/*----------------------------------------------------------------------------
  CARRYON — mobile-first layer
  ---------------------------------------------------------------------------
  main.css is the inherited desktop-down stylesheet. This file re-states the
  parts that matter mobile-first: base rules target the small screen, and
  min-width media queries add back the larger layouts. It loads after main.css,
  so it wins.

  Breakpoints
    (base)      < 576   phone
    >= 576      large phone
    >= 768      tablet portrait
    >= 992      tablet landscape
    >= 1200     laptop      <- primary nav appears here
    >= 1400     desktop
----------------------------------------------------------------------------*/

/* ------------------------------------------------------------------ 1. base */
html { -webkit-text-size-adjust: 100%; }

body {
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.6;
}

img, svg, video { max-width: 100%; height: auto; }

/* stop long words blowing out narrow columns */
h1, h2, h3, h4, p, a, li { overflow-wrap: break-word; }

/* every interactive target clears 44px on touch, per WCAG 2.5.5 */
@media (pointer: coarse) {
  button, .btn-black, .btn-white, .btn-border, .product-action-btn-2,
  .header-right-options > ul > li > button, .pdp-swatch, .shop-chip {
    min-height: 44px;
  }
  .product-action-btn-2 { min-width: 44px; }
}

/* keep the fixed mobile bar clear of the page end */
@media (max-width: 767px) {
  body { padding-bottom: 64px; }
  .bottom-menu { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* --------------------------------------------------------------- 2. headings */
.section-title.fs-40 { font-size: 30px; }
.section-title.fs-56 { font-size: 32px; }
.page-title         { font-size: 32px; }

@media (min-width: 768px) {
  .section-title.fs-40 { font-size: 34px; }
  .section-title.fs-56 { font-size: 42px; }
  .page-title          { font-size: 42px; }
}
@media (min-width: 1200px) {
  .section-title.fs-40 { font-size: 40px; }
  .section-title.fs-56 { font-size: 56px; }
  .page-title          { font-size: 56px; }
}

/* ----------------------------------------------------------------- 3. header */
/* base = phone: hamburger left, wordmark centre, cart right */
.header-area .container { padding-inline: 16px; }

.header-nav-zone { gap: 10px; }

.header-brand { padding: 12px 0; }

.brand-wordmark { font-size: 22px; }
@media (min-width: 576px)  { .brand-wordmark { font-size: 26px; } }
@media (min-width: 992px)  { .brand-wordmark { font-size: 30px; } }
@media (min-width: 1200px) { .brand-wordmark { font-size: 34px; } }

/* utility icons: tighter on phones so nothing wraps */
.header-style-3 .header-right-options > ul > li:not(:last-child) { margin-inline-end: 6px; }
@media (min-width: 576px)  { .header-style-3 .header-right-options > ul > li:not(:last-child) { margin-inline-end: 10px; } }
@media (min-width: 992px)  { .header-style-3 .header-right-options > ul > li:not(:last-child) { margin-inline-end: 16px; } }

.header-style-3 .header-right-options > ul > li > button,
.header-style-3 .header-right-options > ul > li > a {
  width: 40px; height: 40px; line-height: 40px;
}
@media (min-width: 992px) {
  .header-style-3 .header-right-options > ul > li > button,
  .header-style-3 .header-right-options > ul > li > a { width: 48px; height: 48px; line-height: 48px; }
}
@media (min-width: 1200px) {
  .header-style-3 .header-right-options > ul > li > button,
  .header-style-3 .header-right-options > ul > li > a { width: 54px; height: 54px; line-height: 54px; }
}

.header-style-3 .header-right-options > ul > li .count-box {
  width: 20px; height: 20px; line-height: 20px; font-size: 10px; top: -4px; right: -4px;
}
@media (min-width: 992px) {
  .header-style-3 .header-right-options > ul > li .count-box {
    width: 24px; height: 24px; line-height: 24px; font-size: 11px;
  }
}

/* promo bar: shorter on phones, arrows hidden (handled in markup) */
.header-top-style-3 { padding: 5px 0; }
.header-discount-item p { font-size: 11px; line-height: 1.5; padding-bottom: 0; }
@media (min-width: 768px) { .header-discount-item p { font-size: 13px; } }
.header-discount-close button { right: 10px; }
@media (min-width: 768px) { .header-discount-close button { right: 24px; } }

/* the desktop nav only exists from 1200px; below that it lives in the drawer */
@media (min-width: 1200px) {
  .header-style-3 .header-menu.menu-height-62 > nav > ul > li > a { padding: 24px 0; }
}

/* pages other than home get a solid bar instead of the hero overlay */
.header-main.header-solid { position: static; background-color: var(--common-black); }
.header-main.header-solid .header-area::before { display: none; }

/* offcanvas drawer sizing */
.offcanvas-wrap { width: min(92vw, 400px); }

/* ------------------------------------------------------------------- 4. hero */
.hero-split-grid { grid-template-columns: 1fr; min-height: 0; }

.hero-panel-media { order: 1; min-height: 58vh; }
.hero-panel-text  { order: 2; padding: 40px 20px 48px; }

.hero-title { font-size: 44px; }
.hero-lead  { font-size: 15px; margin-bottom: 28px; }
.hero-actions { gap: 14px; margin-bottom: 32px; }
.hero-facts { gap: 18px; padding-top: 22px; }
.hero-scroll { display: none; }
.hero-split .hero-info { inset-inline-end: 16px; bottom: 16px; min-width: 0; }

@media (min-width: 576px) {
  .hero-title { font-size: 54px; }
  .hero-panel-text { padding: 48px 28px 56px; }
}
@media (min-width: 768px) {
  .hero-title { font-size: 64px; }
  .hero-panel-media { min-height: 64vh; }
  .hero-panel-text { padding: 60px 36px; }
}
@media (min-width: 992px) {
  .hero-split-grid { grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .hero-panel-media { order: 2; min-height: 0; padding-top: 0; }
  .hero-panel-text  { order: 1; padding: 160px 48px 80px; }
  .hero-scroll { display: flex; }
}
@media (min-width: 1400px) {
  .hero-split-grid { grid-template-columns: 5fr 7fr; }
  .hero-panel-text { padding: 190px 70px 90px; }
  .hero-title { font-size: 84px; }
}
@media (min-width: 1700px) {
  .hero-panel-text { padding: 200px 90px 90px; }
  .hero-title { font-size: 104px; }
}

/* --------------------------------------------------------------- 5. sections */
.product-area { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 768px)  { .product-area { padding-top: 64px; padding-bottom: 64px; } }
@media (min-width: 1200px) { .product-area { padding-top: 90px; padding-bottom: 90px; } }

.pt-120, .pt-115 { padding-top: 48px; }
.pb-120          { padding-bottom: 48px; }
.pt-90           { padding-top: 44px; }
.pb-90           { padding-bottom: 44px; }
@media (min-width: 768px) {
  .pt-120, .pt-115 { padding-top: 72px; }
  .pb-120          { padding-bottom: 72px; }
  .pt-90           { padding-top: 60px; }
  .pb-90           { padding-bottom: 60px; }
}
@media (min-width: 1200px) {
  .pt-120, .pt-115 { padding-top: 120px; }
  .pb-120          { padding-bottom: 120px; }
  .pt-90           { padding-top: 90px; }
  .pb-90           { padding-bottom: 90px; }
}

/* editorial banner tiles */
.sale-content { margin: 20px; }
.sale-title   { font-size: 28px; }
@media (min-width: 768px)  { .sale-content { margin: 32px; } .sale-title { font-size: 38px; } }
@media (min-width: 1200px) { .sale-content { margin: 60px; } .sale-title { font-size: 54px; } }

/* new-season split: stack the editorial image above the grid on small screens */
@media (max-width: 1199px) {
  .collection-thumb { position: static; margin-bottom: 0; }
  .collection-thumb img { max-height: 60vh; width: 100%; object-fit: cover; }
  .collection-right { padding-inline: 16px; padding-top: 40px; }
}

/* atelier + gallery */
.explore-item { margin-bottom: 32px; }
.gallery-follower a { min-height: 64px; padding: 16px 20px; font-size: 14px; }
@media (min-width: 768px) { .gallery-follower a { min-height: 85px; padding: 20px 45px; font-size: 18px; } }

/* ---------------------------------------------------------------- 6. footer */
.footer-area { padding-top: 48px; }
.footer-widget { margin-bottom: 36px; }
@media (min-width: 992px) {
  .footer-area { padding-top: 100px; }
  .footer-widget { margin-bottom: 90px; }
}
.copyright-text p { font-size: 13px; }

/* --------------------------------------------------- 7. drawers on mobile */
.cartmini-area {
  width: min(100vw, 420px);
  max-width: 100vw;
}
.wishlist-popup {
  width: min(100vw, 460px);
  max-width: 100vw;
}
@media (max-width: 575px) {
  .cartmini-area, .wishlist-popup { width: 100vw; }
}

/* the compare bar is noise on phones */
@media (max-width: 767px) { .compare-area { display: none !important; } }

/* modal fits the viewport */
.product-modal .modal-dialog { margin: 12px; }
@media (min-width: 768px) { .product-modal .modal-dialog { margin: 1.75rem auto; } }

/* ------------------------------------------------- 8. mobile chrome fixes */
/*  The inherited white-bar rule only targeted hamburgers inside
    .header-right-options. Ours now lives in .header-nav-zone, so it was
    falling back to black — invisible on the dark header.                    */
.header-style-3 .header-nav-zone .header-3-bar {
  width: 40px; height: 40px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(5px);
}
.header-style-3 .header-nav-zone .header-bar span { background-color: #fff; }
.header-style-3 .header-nav-zone .header-3-bar:hover .header-bar span:nth-child(1),
.header-style-3 .header-nav-zone .header-3-bar:hover .header-bar span:nth-child(3) { width: 25px; }
.header-style-3 .header-nav-zone .header-3-bar:hover .header-bar span:nth-child(2) { width: 15px; }

/* solid-header pages: the promo bar and header share one dark field */
.header-main.header-solid .header-area { background-color: var(--common-black); }

/* bottom bar: match the brand, keep the badges legible */
.bottom-menu {
  border-top: 1px solid rgba(26, 21, 23, .1);
  background-color: #fff;
  box-shadow: 0 -2px 16px rgba(26, 21, 23, .07);
}
.bottom-menu-item .count-box {
  position: absolute; top: -6px; inset-inline-end: -10px;
  min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px;
  font-size: 10px; font-weight: 700; text-align: center; border-radius: 20px;
  color: #fff; background-color: var(--primary);
}
.bottom-menu-item span { font-family: var(--ff-sans); font-size: 11px; }

/* offcanvas drawer: the cloned nav needs breathing room on small screens */
.offcanvas-menu > nav > ul > li > a { padding: 13px 0; font-size: 15px; }
.offcanvas-menu .mega-menu,
.offcanvas-menu .submenu { padding-inline-start: 12px; }
.offcanvas-menu .megamenu-feature { display: none; }

/* tablet: nav is still in the drawer, but there's room for more utilities */
@media (min-width: 768px) and (max-width: 1199px) {
  .header-brand { padding: 16px 0; }
  .header-nav-zone { gap: 14px; }
}