/* MD3 Scandi — desktop vs iPhone layout tokens & utilities */

:root {
  --md3-bp-desktop: 768px;
  --md3-page-pad-mobile: 1.25rem;
  --md3-page-pad-desktop: 2.5rem;
  --md3-header-h-mobile: 3.75rem;
  --md3-header-h-desktop: 5rem;
}

/* Visibility helpers */
.only-desktop { display: none !important; }
.only-mobile { display: revert !important; }

@media (min-width: 768px) {
  .only-desktop { display: revert !important; }
  .only-mobile { display: none !important; }
}

/* Safe areas (iPhone notch / home bar) — keep on chrome, not body (avoids 100vw overflow) */
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: clip;
  background: #fff;
}

@supports (padding: max(0px)) {
  .promo-bar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .site-header .header-inner {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  @media (min-width: 768px) {
    .site-header .header-inner {
      padding-left: max(2.5rem, env(safe-area-inset-left));
      padding-right: max(2.5rem, env(safe-area-inset-right));
    }
  }
}

/* ── MOBILE (iPhone) ── */
html[data-viewport='mobile'] .promo-bar,
html.is-mobile .promo-bar {
  font-size: 8px;
  letter-spacing: 0.2em;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.4;
}

html[data-viewport='mobile'] .site-header .header-inner,
html.is-mobile .site-header .header-inner {
  height: var(--md3-header-h-mobile);
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
}

html[data-viewport='mobile'] .header-left,
html.is-mobile .header-left {
  justify-self: start;
}

html[data-viewport='mobile'] .site-header .logo,
html.is-mobile .site-header .logo {
  font-size: 1.05rem;
  padding: 0 0.25rem;
  letter-spacing: 0.18em;
}

html[data-viewport='mobile'] .header-util,
html.is-mobile .header-util {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

html[data-viewport='mobile'] .header-icons,
html.is-mobile .header-icons {
  gap: 0.35rem;
}

/* Language lives in the footer on phones — beside currency */
html[data-viewport='mobile'] .header-util > .lang.lang-compact,
html.is-mobile .header-util > .lang.lang-compact {
  display: none !important;
}

html[data-viewport='mobile'] #md3-hero.home-hero,
html.is-mobile #md3-hero.home-hero,
html[data-viewport='mobile'] #md3-hero.home-hero--cinema,
html.is-mobile #md3-hero.home-hero--cinema {
  aspect-ratio: auto;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  height: auto;
  max-height: none;
  border-radius: 0;
}

html[data-viewport='mobile'] .home-hero-heading.only-mobile,
html.is-mobile .home-hero-heading.only-mobile {
  top: auto;
  left: auto;
  right: auto;
  max-width: none;
  text-align: left;
  margin-bottom: 0.65rem;
  position: relative;
}

html[data-viewport='mobile'] .home-hero-line2,
html.is-mobile .home-hero-line2 {
  font-size: clamp(1.35rem, 7vw, 2.05rem);
  margin-top: -0.08em;
  margin-left: 0.15rem;
}

html[data-viewport='mobile'] .home-hero-copy,
html.is-mobile .home-hero-copy {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: max(0.85rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  max-width: none;
  width: auto;
  box-sizing: border-box;
  z-index: 6;
}

html[data-viewport='mobile'] .home-hero-copy.is-cta-fixed,
html.is-mobile .home-hero-copy.is-cta-fixed {
  position: fixed;
  left: 1.15rem;
  right: 1.15rem;
  bottom: max(0.85rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  max-width: none;
  width: auto;
}

html[data-viewport='mobile'] .home-hero-copy.is-cta-parked,
html.is-mobile .home-hero-copy.is-cta-parked {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: max(0.85rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  max-width: none;
  width: auto;
}

html[data-viewport='mobile'] .home-hero-foot,
html.is-mobile .home-hero-foot {
  left: auto;
  right: auto;
  bottom: auto;
  max-width: none;
  width: auto;
  text-align: left;
}

html[data-viewport='mobile'] .home-hero-tagline,
html.is-mobile .home-hero-tagline {
  font-size: 0.8rem;
  margin-bottom: 1.15rem;
  margin-left: 0;
  margin-right: 0;
  max-width: 22rem;
}

html[data-viewport='mobile'] .home-hero-ctas,
html.is-mobile .home-hero-ctas {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.65rem;
}

html[data-viewport='mobile'] .home-btn,
html.is-mobile .home-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 0.9rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  white-space: normal;
  text-align: center;
}

html[data-viewport='mobile'] .home-marquee-group,
html.is-mobile .home-marquee-group {
  gap: 2.5rem;
  font-size: 9px;
  letter-spacing: 0.28em;
  padding: 1rem 1.25rem;
}

html[data-viewport='mobile'] .home-univers,
html.is-mobile .home-univers {
  padding: 2.25rem var(--md3-page-pad-mobile) 3.5rem;
}

/* Phone: Fashion | Home on top, Limited Edition full-width below — no carousel */
html[data-viewport='mobile'] .home-univers-grid,
html.is-mobile .home-univers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

html[data-viewport='mobile'] .home-univers-card,
html.is-mobile .home-univers-card {
  flex: none;
  width: auto;
  min-width: 0;
  scroll-snap-align: unset;
  aspect-ratio: 3 / 4;
}

html[data-viewport='mobile'] .home-univers-card:nth-child(3),
html.is-mobile .home-univers-card:nth-child(3) {
  grid-column: 1 / -1;
  aspect-ratio: 2.15 / 1;
}

html[data-viewport='mobile'] .home-section-head,
html.is-mobile .home-section-head {
  margin-bottom: 1.75rem;
}

html[data-viewport='mobile'] .home-featured,
html.is-mobile .home-featured {
  padding: 3.25rem var(--md3-page-pad-mobile) 3.5rem;
}

html[data-viewport='mobile'] .home-featured-head,
html.is-mobile .home-featured-head {
  margin-bottom: 1.75rem;
  gap: 0.75rem;
}

html[data-viewport='mobile'] .home-section-title,
html.is-mobile .home-section-title {
  font-size: clamp(1.85rem, 8vw, 2.4rem);
}

html[data-viewport='mobile'] .home-featured-carousel,
html.is-mobile .home-featured-carousel {
  min-height: 300px;
}

html[data-viewport='mobile'] .home-featured .product-grid,
html.is-mobile .home-featured .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 0.75rem;
}

html[data-viewport='mobile'] .home-journal,
html.is-mobile .home-journal {
  padding: 4rem var(--md3-page-pad-mobile);
}

html[data-viewport='mobile'] .site-footer,
html.is-mobile .site-footer {
  margin-top: 4rem;
}

html[data-viewport='mobile'] .site-footer-inner,
html.is-mobile .site-footer-inner {
  padding: 3.5rem var(--md3-page-pad-mobile);
  padding-bottom: max(3.5rem, calc(env(safe-area-inset-bottom) + 2rem));
}

html[data-viewport='mobile'] .site-footer-grid,
html.is-mobile .site-footer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 0.75rem;
}

html[data-viewport='mobile'] .site-footer-grid > :first-child,
html.is-mobile .site-footer-grid > :first-child {
  grid-column: 1 / -1;
}

html[data-viewport='mobile'] .boutique-page .sgrid,
html.is-mobile .boutique-page .sgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 0.75rem;
  padding: 0 1rem 2rem;
}

html[data-viewport='mobile'] .product-page-wrap,
html.is-mobile .product-page-wrap {
  grid-template-columns: 1fr;
  padding: 1.25rem var(--md3-page-pad-mobile) 2.5rem;
}

/* Versace-style sticky gallery + sliding sheet on product phones */
html[data-viewport='mobile'] body.product-page .product-page-wrap,
html.is-mobile body.product-page .product-page-wrap {
  display: block;
  padding: 0 0 4rem;
  max-width: 100%;
}

html[data-viewport='mobile'] .md3-shop-toast,
html.is-mobile .md3-shop-toast {
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  max-width: calc(100vw - 2rem);
  white-space: normal;
  text-align: center;
}

/* ── DESKTOP (computer) ── */
@media (min-width: 768px) {
  html[data-viewport='desktop'] .home-univers-grid,
  html.is-desktop .home-univers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  html[data-viewport='desktop'] .home-univers-card,
  html.is-desktop .home-univers-card {
    flex: unset;
  }

  html[data-viewport='desktop'] .home-featured .product-grid,
  html.is-desktop .home-featured .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  html[data-viewport='desktop'] .boutique-page .sgrid,
  html.is-desktop .boutique-page .sgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0 2.5rem 3rem;
  }
}

@media (min-width: 1200px) {
  html[data-viewport='desktop'] .boutique-page .sgrid,
  html.is-desktop .boutique-page .sgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  html[data-viewport='mobile'] .boutique-hero,
  html.is-mobile .boutique-hero {
    padding: 2rem var(--md3-page-pad-mobile) 1.25rem;
  }

  html[data-viewport='mobile'] .boutique-hero h1,
  html.is-mobile .boutique-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  /* Cart / checkout / account pages (not homepage — keep full-bleed hero) */
  body:not(.home-page) main {
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(3rem, calc(env(safe-area-inset-bottom, 0px) + 2rem));
    max-width: 100%;
    box-sizing: border-box;
  }

  .checkout-grid {
    grid-template-columns: 1fr !important;
  }

  .cart-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px 14px !important;
    grid-template-columns: none !important;
  }

  .cart-item-visual {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 96px !important;
  }

  .cart-item-body {
    flex: 1 1 calc(100% - 90px) !important;
    min-width: 0 !important;
  }

  .cart-item-actions,
  .cart-item > :last-child {
    grid-column: auto !important;
    flex: 1 1 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .product-page-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .home-journal-inner {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
}