/*
 * Atelier Archive — black & gold colour scheme (2026-10-21)
 *
 * Loaded last (priority 99) so it overrides both the theme and the
 * atelier-design-system plugin. Layout, spacing and typography are untouched;
 * only colours change.
 *
 * Palette
 *   page      #000000
 *   panel     #0b0b0b / #050505
 *   headings  #ffd700  (bright gold)
 *   body      #f2d675  (soft gold, ~11:1 on black)
 *   muted     #b99a3e  (dim gold, ~7:1 on black)
 *   borders   #2f2a18  (warm dark)
 */

:root,
body,
.atelier-design-system-enabled {
  --paper: #000000;
  --mist: #0b0b0b;
  --line: #2f2a18;
  --muted: #b99a3e;
  --accent: #ffd700;
  --ink: #f2d675;

  --ads-accent: #ffd700;
  --ads-ink: #f2d675;
  --ads-muted: #b99a3e;
  --ads-line: #2f2a18;
  --ads-surface: #0b0b0b;

  color-scheme: dark;
}

html { background: #000; }
body,
body.atelier-design-system-enabled {
  background: #000;
  color: #f2d675;
}

h1, h2, h3, h4,
.atelier-design-system-enabled h1,
.atelier-design-system-enabled h2,
.atelier-design-system-enabled h3,
.product-navigation strong { color: #ffd700; }

a { color: inherit; }
a:hover { color: #ffe45c; }

::selection { background: #ffd700; color: #000; }
::-moz-selection { background: #ffd700; color: #000; }

/* ---------- header ---------- */
.ads-utility {
  background: #000;
  border-bottom-color: #2f2a18;
  color: #b99a3e;
}
.atelier-design-system-enabled .site-header,
.site-header {
  background: rgba(0, 0, 0, .96);
  border-bottom-color: #2f2a18;
}
.brand { color: #ffd700; }
.brand small { color: #b99a3e; }

.site-nav .menu > li > a,
.site-nav .menu summary { color: #f2d675; }
.site-nav .menu > li > a:hover,
.site-nav .menu summary:hover,
.site-nav .menu .current-menu-item > a { border-color: #ffd700; color: #ffd700; }
.menu-browse details[open] summary { border-color: #ffd700; }

.header-search,
.atelier-design-system-enabled .header-search { border-bottom-color: #ffd700; }
.header-search input { color: #ffd700; }
.header-search input::placeholder { color: #8f7a35; opacity: 1; }
.search-icon { color: #ffd700; }

.menu-dropdown {
  background: #050505;
  border-color: #2f2a18;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .75);
}
.menu-dropdown a { color: #c9a94e; }
.menu-dropdown a:hover { background: #15120a; color: #ffd700; }
.menu-dropdown small { color: #8f7a35; }
.site-nav .menu-featured-brand a { background: #15120a; color: #ffd700; }

/* ---------- hero ---------- */
.hero { border-bottom-color: #2f2a18; }
.eyebrow,
.atelier-design-system-enabled .hero .eyebrow { color: #ffd700; }
.hero p:last-child,
.atelier-design-system-enabled .hero p:last-child { color: #f2d675; }
.atelier-design-system-enabled .hero { color: #ffd700; }
.atelier-design-system-enabled .hero::before {
  background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.22) 78%);
}

/* ---------- brand directory ---------- */
.major-brand-directory { border-top-color: #ffd700; border-bottom-color: #2f2a18; }
.major-brand-directory__heading h2 { color: #ffd700; }
.major-brand-directory__grid { border-top-color: #2f2a18; border-left-color: #2f2a18; }
.major-brand-directory__item {
  color: #f2d675;
  border-right-color: #2f2a18;
  border-bottom-color: #2f2a18;
}
.major-brand-directory__item:hover { background: #ffd700; color: #000; }
.major-brand-directory__item small { color: #b99a3e; }

/* ---------- catalog sidebar / tools ---------- */
.catalog-sidebar h2 { color: #b99a3e; }
.catalog-sidebar ul { border-top-color: #2f2a18; }
.catalog-sidebar li { border-bottom-color: #2f2a18; }
.catalog-sidebar a { color: #b99a3e; }
.catalog-sidebar a:hover,
.catalog-sidebar .current-cat a { color: #ffd700; }
.catalog-sidebar__refine { border-top-color: #ffd700; }

.catalog-tools { border-bottom-color: #2f2a18; }
.catalog-tools p { color: #b99a3e; }
.atelier-design-system-enabled .catalog-tools p { color: #f2d675; }

.catalog-filter label { color: #b99a3e; }
.catalog-filter select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #0b0b0b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffd700' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  border-color: #2f2a18;
  color: #ffd700;
  padding-right: 34px;
}
.catalog-filter select option { background: #0b0b0b; color: #f2d675; }
.catalog-filter__actions a { color: #b99a3e; }
.catalog-filter-drawer { border-color: #2f2a18; }
.catalog-filter-drawer summary { color: #f2d675; }
.catalog-filter-drawer summary span { color: #ffd700; }
.catalog-sidebar::-webkit-scrollbar-thumb { background: #3a3418; border-radius: 8px; }
.catalog-sidebar { scrollbar-color: #3a3418 transparent; }

/* ---------- product cards ---------- */
.product-card__image,
.atelier-design-system-enabled .product-card__image { background: #0b0b0b; }
.product-card__brand { color: #ffd700; }
.product-card__brand::after { color: #8f7a35; }
.product-card__collection,
.atelier-design-system-enabled .product-card__collection { color: #ffc400; }
.product-card__code { color: #b99a3e; }
.product-card h2 { color: #f2d675; }
.product-card:hover h2 { color: #ffd700; }

/* ---------- product detail ---------- */
.breadcrumbs { color: #b99a3e; }
.breadcrumbs a:hover { color: #ffd700; }
.product-code { color: #b99a3e; }
.product-info h1 { color: #ffd700; }
.product-intro { color: #e8c96a; border-color: #2f2a18; }
.product-main-image,
.atelier-design-system-enabled .product-main-image { background: #0b0b0b; }
.gallery-thumbs button { background: #0b0b0b; border-color: #2f2a18; }
.gallery-thumbs button[aria-current="true"] { border-color: #ffd700; }

.specs th, .specs td { border-bottom-color: #2f2a18; }
.specs th { color: #b99a3e; }
.specs td { color: #f2d675; }
.details-heading { color: #ffd700; }

.button,
.atelier-design-system-enabled .button {
  background: #ffd700;
  border-color: #ffd700;
  color: #000;
}
.button:hover,
.atelier-design-system-enabled .button:hover {
  background: #000;
  color: #ffd700;
  border-color: #ffd700;
}
.inquiry-note { color: #b99a3e; }

.option-groups { color: #f2d675; }
.option-group { border-bottom-color: #2f2a18; }
.option-group li { border-color: #2f2a18; color: #f2d675; }

.product-navigation { border-top-color: #2f2a18; }
.product-navigation span { color: #8f7a35; }
.product-navigation a:hover strong { color: #ffd700; }

.empty-state { border-top-color: #2f2a18; color: #b99a3e; }

/* ---------- footer ---------- */
.site-footer,
.atelier-design-system-enabled .site-footer {
  background: #050505;
  border-top-color: #2f2a18;
}
.footer-grid h2 { color: #ffd700; }
.footer-grid p, .footer-grid li { color: #b99a3e; }
.footer-grid a:hover { color: #ffd700; }
.copyright { color: #8f7a35; border-top-color: #2f2a18; }

/* ---------- homepage brand features / pagination / enquiry ---------- */
.brand-features__heading h2 { color: #ffd700; }
.brand-features__heading > a { color: #b99a3e; border-bottom-color: #2f2a18; }
.brand-feature img { background: #000; }
.brand-feature__caption { color: #f2d675; }
.brand-feature__caption small { color: #b99a3e; }

.catalog-pagination { border-top-color: #2f2a18; }
.catalog-pagination__status { color: #b99a3e; }
.catalog-pagination__status strong { color: #ffd700; }
.catalog-pagination .page-numbers {
  background: #0b0b0b;
  border-color: #2f2a18;
  color: #f2d675;
}
.catalog-pagination a.page-numbers:hover { background: #15120a; border-color: #ffd700; color: #ffd700; }
.catalog-pagination .page-numbers.current { background: #ffd700; border-color: #ffd700; color: #000; }
.catalog-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: #8f7a35; }

.enquiry-page p { color: #d9b95c; }
.enquiry-page label { color: #ffd700; }
.enquiry-page input,
.enquiry-page textarea {
  background: #0b0b0b;
  border-color: #2f2a18;
  color: #ffd700;
}
.enquiry-page input::placeholder,
.enquiry-page textarea::placeholder { color: #8f7a35; }
.enquiry-selection { border-color: #2f2a18; }
.enquiry-selection:hover { border-color: #ffd700; }
#enquiry-feedback { color: #ffd700; }

/* ---------- misc ---------- */
.lightbox { background: rgba(0, 0, 0, .94); }
.lightbox button { color: #ffd700; }
.atelier-design-system-enabled :focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline-color: #ffd700; }

/* ---------- mobile layout polish (2026-10-21, round 2) ---------- */
@media (max-width: 800px) {
  /* On phones, put "Discover the collections" straight after the hero, above
     the filter bar, product grid and pagination. */
  body.post-type-archive-catalog_product main { display: flex; flex-direction: column; }
  body.post-type-archive-catalog_product main > .hero { order: 0; }
  body.post-type-archive-catalog_product main > .shell:not(.catalog-layout):not(.hero) { order: 1; }
  body.post-type-archive-catalog_product main > .catalog-layout { order: 2; }

  /* Keep brand/collection labels on one line each so the two-column grid stays aligned. */
  .product-card__brand,
  .product-card__collection {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-card__brand::after { content: ''; }
  .product-card__meta { min-height: 0; }

  /* Show the watch group of each per-brand hero on narrow screens. */
  .post-type-archive-catalog_product .hero,
  .tax-product_brand .hero,
  .tax-product_collection .hero { background-position: 74% center; }
}

/* ---------- contact channels: WhatsApp / Telegram ---------- */
.contact-channels { margin-top: 36px; padding-top: 26px; border-top: 1px solid #2f2a18; }
.contact-channels h2 { color: #ffd700; }
.contact-channels__actions,
.product-channels { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 12px; }
.button--ghost,
.atelier-design-system-enabled .button--ghost,
.atelier-design-system-enabled a.button--ghost {
  background: transparent;
  color: #ffd700;
  border: 1px solid #2f2a18;
}
.button--ghost:hover,
.atelier-design-system-enabled .button--ghost:hover {
  background: #15120a;
  border-color: #ffd700;
  color: #ffd700;
}
.contact-channels__hint { color: #b99a3e; font-size: .82rem; }

/* ---------- 404 page + catalogue refinements ---------- */
.not-found { max-width: 820px; }
.not-found__search { display: flex; gap: 10px; margin: 28px 0 8px; flex-wrap: wrap; }
.not-found__search input[type="search"] {
  flex: 1 1 260px; min-height: 46px; padding: 10px 14px;
  background: #0b0b0b; border: 1px solid #2f2a18; color: #ffd700;
}
.not-found__search input::placeholder { color: #8f7a35; }
.not-found__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.not-found__links a { color: #b99a3e; border-bottom: 1px solid #2f2a18; padding-bottom: 2px; }
.not-found__links a:hover { color: #ffd700; border-bottom-color: #ffd700; }
.breadcrumbs span { color: #f2d675; }

@media (max-width: 800px) {
  .not-found__search { flex-direction: column; }
  .not-found__search .button { width: 100%; }
}

/* brand-only cards: drop the trailing separator when the collection equals the brand */
.product-card--brand-only .product-card__brand::after { content: ''; }

/* 404 search input must not stretch vertically when stacked */
@media (max-width: 800px) {
  .not-found__search input[type="search"] { flex: 0 0 auto; width: 100%; min-height: 46px; }
}

/* Mobile heroes: keep the black/gold stage and drop the cover-cropped artwork,
   so no medallion is ever cut by the narrow viewport. */
@media (max-width: 800px) {
  /* Catalogue hero on phones: use the desktop artwork as the background and
     let PRODUCT CATALOGUE / Products / intro sit over it, like on desktop. */
  body.post-type-archive-catalog_product.atelier-design-system-enabled .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    height: clamp(200px, 54vw, 230px);
    padding: 0 16px 50px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .08) 36%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .94) 100%),
      var(--ads-hero-image) 78% 42% / cover no-repeat !important;
  }
  body.post-type-archive-catalog_product.atelier-design-system-enabled .hero::before {
    display: none;
  }
  body.post-type-archive-catalog_product.atelier-design-system-enabled .hero > * {
    position: relative;
    z-index: 1;
  }
  body.post-type-archive-catalog_product.atelier-design-system-enabled .hero p:last-child {
    display: none;
  }
  body.post-type-archive-catalog_product.atelier-design-system-enabled .hero .eyebrow {
    margin-top: 0;
  }

  /* Brand and collection pages: no hero artwork on phones. */
  body.tax-product_brand.atelier-design-system-enabled .hero,
  body.tax-product_collection.atelier-design-system-enabled .hero {
    min-height: 0;
    height: auto;
    padding: 26px 16px 30px;
    justify-content: flex-start;
    background: #050505 !important;
  }
  body.tax-product_brand.atelier-design-system-enabled .hero::before,
  body.tax-product_collection.atelier-design-system-enabled .hero::before {
    display: none;
  }
}


/* ---------- floating WhatsApp / Telegram buttons (all pages) ---------- */
.contact-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-float__link {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.contact-float__link:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
}
.contact-float__link:focus-visible { outline: 2px solid #ffd700; outline-offset: 3px; }
.contact-float__link svg { width: 30px; height: 30px; fill: #fff; }
.contact-float__link--whatsapp { background: #25d366; }
.contact-float__link--telegram { background: #229ed9; }

@media (max-width: 800px) {
  .contact-float {
    right: 12px;
    /* clear the iOS Safari / Android Chrome bottom toolbar */
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .contact-float__link { width: 48px; height: 48px; }
  .contact-float__link svg { width: 26px; height: 26px; }
}


/* ---------- typography: three tiers (self-hosted, 2026-10-23) ----------
 * Display  : Cormorant Garamond — H1, brand wordmark, hero titles
 * Subhead  : Jost — H2/H3, section headings, nav, buttons, labels, card titles
 * Body     : Inter — paragraphs, descriptions, specification values
 * ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-italic-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ads-ui-font: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --ads-brand-font: 'Cormorant Garamond', Didot, 'Bodoni 72', Georgia, serif;
  --ads-display-font: 'Cormorant Garamond', Didot, 'Bodoni 72', Georgia, serif;
  --ads-body-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* body copy */
.atelier-design-system-enabled {
  font-family: var(--ads-body-font);
  letter-spacing: 0;
}
.atelier-design-system-enabled p,
.atelier-design-system-enabled td,
.atelier-design-system-enabled .product-intro,
.atelier-design-system-enabled .inquiry-note,
.atelier-design-system-enabled .footer-grid p {
  font-family: var(--ads-body-font);
}

/* large headings */
.atelier-design-system-enabled h1,
.atelier-design-system-enabled .brand {
  font-family: var(--ads-display-font);
  font-weight: 500;
  letter-spacing: .005em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.atelier-design-system-enabled .brand {
  font-size: 26px;
  letter-spacing: 6px;
}

/* small headings, navigation, controls and labels */
.atelier-design-system-enabled h2,
.atelier-design-system-enabled h3,
.atelier-design-system-enabled .brand small,
.atelier-design-system-enabled .site-nav .menu > li > a,
.atelier-design-system-enabled .site-nav .menu summary,
.atelier-design-system-enabled .button,
.atelier-design-system-enabled button,
.atelier-design-system-enabled input[type="submit"],
.atelier-design-system-enabled .eyebrow,
.atelier-design-system-enabled .product-card h2,
.atelier-design-system-enabled .product-card__brand,
.atelier-design-system-enabled .product-card__collection,
.atelier-design-system-enabled .catalog-sidebar h2,
.atelier-design-system-enabled .catalog-sidebar a,
.atelier-design-system-enabled .breadcrumbs,
.atelier-design-system-enabled .catalog-filter label,
.atelier-design-system-enabled .catalog-filter select,
.atelier-design-system-enabled .catalog-pagination,
.atelier-design-system-enabled .footer-grid h2,
.atelier-design-system-enabled label,
.atelier-design-system-enabled legend,
.atelier-design-system-enabled .specs th,
.atelier-design-system-enabled .product-navigation strong,
.atelier-design-system-enabled .contact-channels h2 {
  font-family: var(--ads-ui-font);
}
.atelier-design-system-enabled label,
.atelier-design-system-enabled legend {
  letter-spacing: .05em;
  font-weight: 600;
}
.atelier-design-system-enabled .brand small {
  font-size: 8px;
  letter-spacing: 2.6px;
}
.atelier-design-system-enabled .site-nav .menu > li > a,
.atelier-design-system-enabled .site-nav .menu summary {
  font-weight: 500;
  letter-spacing: .055em;
}
.atelier-design-system-enabled .button,
.atelier-design-system-enabled button,
.atelier-design-system-enabled input[type="submit"] {
  font-weight: 600;
  letter-spacing: .085em;
}
.eyebrow {
  font-weight: 600;
  letter-spacing: 2.2px;
}
.product-card h2,
.product-card__brand,
.product-card__collection {
  letter-spacing: 0;
}
.product-card__brand,
.product-card__collection {
  letter-spacing: 1.4px;
}
.specs th {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
/* references / SKU stay in the body face, with tabular figures */
.product-code,
.product-card__code,
.catalog-pagination__status {
  font-family: var(--ads-body-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}


/* ---------- landing page ---------- */
.landing { display: block; }
.landing-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  padding: 90px 0 72px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 46%, rgba(0, 0, 0, .12) 78%),
    var(--landing-hero) 80% center / cover no-repeat,
    #050505;
  border-bottom: 1px solid #2f2a18;
}
.landing-hero__inner { width: 100%; }
.landing-hero h1 {
  margin: 0 0 22px;
  font-family: var(--ads-display-font);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 500;
  line-height: 1.02;
  color: #ffd700;
}
.landing-hero__lead { max-width: 560px; margin: 0 0 30px; color: #f2d675; font-family: var(--ads-body-font); font-size: 17px; line-height: 1.6; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.landing-brands,
.landing-steps,
.landing-featured,
.landing-cta { padding: 72px 0 0; }
.landing-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.landing-heading h2 { margin: 0; font-family: var(--ads-ui-font); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; color: #ffd700; }
.landing-link { font-family: var(--ads-ui-font); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #b99a3e; border-bottom: 1px solid #2f2a18; padding-bottom: 4px; }
.landing-link:hover { color: #ffd700; border-color: #ffd700; }

.landing-brands__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #2f2a18; border-left: 1px solid #2f2a18; }
.landing-brand { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 22px; border-right: 1px solid #2f2a18; border-bottom: 1px solid #2f2a18; color: #f2d675; }
.landing-brand:hover { background: #0d0b06; }
.landing-brand__name { font-family: var(--ads-ui-font); font-size: 17px; font-weight: 500; letter-spacing: .02em; color: #ffd700; }
.landing-brand__meta { font-family: var(--ads-body-font); font-size: 12px; color: #b99a3e; }
.landing-brand__arrow { margin-top: auto; font-size: 18px; color: #b99a3e; }

.landing-steps h2 { margin: 0 0 26px; font-family: var(--ads-ui-font); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; color: #ffd700; }
.landing-steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #2f2a18; border: 1px solid #2f2a18; }
.landing-step { padding: 26px 26px 30px; background: #050505; }
.landing-step__num { display: block; margin-bottom: 18px; font-family: var(--ads-body-font); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .18em; color: #b99a3e; }
.landing-step h3 { margin: 0 0 10px; font-family: var(--ads-ui-font); font-size: 19px; font-weight: 500; color: #ffd700; }
.landing-step p { margin: 0; color: #d9b95c; font-family: var(--ads-body-font); font-size: 14px; line-height: 1.65; }

.landing-grid { margin-top: 4px; }
.landing-cta { padding-bottom: 84px; }
.landing-cta__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 42px; border: 1px solid #2f2a18; background: radial-gradient(70% 120% at 12% 20%, rgba(255, 215, 0, .10), rgba(0, 0, 0, 0) 62%), #070604; }
.landing-cta h2 { margin: 0 0 12px; font-family: var(--ads-display-font); font-size: clamp(32px, 3.6vw, 48px); font-weight: 500; color: #ffd700; }
.landing-cta p { max-width: 560px; margin: 0; color: #d9b95c; font-family: var(--ads-body-font); font-size: 15px; line-height: 1.6; }
.landing-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .landing-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-steps__grid { grid-template-columns: 1fr; }
  .landing-cta__inner { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
}
@media (max-width: 800px) {
  .landing-hero {
    min-height: 0;
    padding: 0 0 28px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .12) 34%, rgba(0, 0, 0, .62) 68%, rgba(0, 0, 0, .96) 100%),
      var(--landing-hero) 78% 42% / cover no-repeat,
      #050505;
  }
  .landing-hero__inner { padding: 200px 16px 0; }
  .landing-hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .landing-hero__lead { font-size: 15px; }
  .landing-brands, .landing-steps, .landing-featured, .landing-cta { padding-top: 46px; }
  .landing-brands__grid { grid-template-columns: 1fr; }
  .landing-brand { min-height: 96px; }
  .landing-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
  .landing-cta { padding-bottom: 56px; }
  .landing-cta__inner { padding: 24px 18px; }
}


/* ---------- product gallery: Taobao-style thumbnails on the left ---------- */
.product-gallery {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.product-gallery .product-main-image {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}
.product-gallery .gallery-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  max-height: 600px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.product-gallery .gallery-thumbs button {
  width: 100%;
  flex: 0 0 auto;
  border-radius: 0;
}
@media (max-width: 800px) {
  .product-gallery { grid-template-columns: 54px minmax(0, 1fr); gap: 9px; }
  /* keep the thumbnail rail inside the square main image height */
  .product-gallery .gallery-thumbs { max-height: calc(100vw - 91px); gap: 6px; }
}


/* ---------- product page: smaller hero image + balanced layout ---------- */
@media (min-width: 801px) {
  .atelier-design-system-enabled .product-layout {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: clamp(32px, 3.5vw, 56px);
    align-items: start;
  }
  .atelier-design-system-enabled .product-gallery {
    position: sticky;
    top: 24px;
    width: 100%;
    max-width: 480px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
  }
  .atelier-design-system-enabled .product-main-image {
    max-width: 416px;
    border: 1px solid #2f2a18;
    background: #0b0b0b;
  }
  .atelier-design-system-enabled .product-gallery .gallery-thumbs { max-height: 416px; gap: 7px; }
  .atelier-design-system-enabled .product-info h1 { font-size: clamp(26px, 2.4vw, 38px); }
}
.atelier-design-system-enabled .product-gallery--single { grid-template-columns: minmax(0, 1fr); }
.atelier-design-system-enabled .product-gallery--single .gallery-thumbs { display: none; }
.atelier-design-system-enabled .product-gallery--single .product-main-image { grid-column: 1; max-width: 520px; }