/* ============================================================
   GOLD WISDOM — "Be Bold" beauty-store inspired theme
   White · blush #f6edf0 · dusty-rose #d4a6b6 · black
   Marcellus (display serif) + Open Sans (body)
   ============================================================ */

:root {
  /* —— Gold Wisdom warm palette (Be Bold layout) —— */
  --white:    #fffdf7;   /* warm ivory surfaces */
  --ink:      #3b2517;   /* deep chocolate brown */
  --ink-2:    #4a2f1c;
  --text:     #6d5844;   /* warm body text */
  --text-2:   #9a8267;   /* muted */
  --rose:     #e5875a;   /* coral accent */
  --rose-deep:#cd6234;
  --rose-ink: #b0521f;
  --blush:    #f2e9d5;   /* warm cream band */
  --blush-2:  #f8f2e2;
  --sale:     #c0492e;
  --line:     #ece1cd;
  --border:   #e3d7c1;

  /* —— Legacy token names remapped (so existing markup keeps working) —— */
  --cream: var(--white); --cream-soft: var(--blush); --ivory: var(--white);
  --brown: var(--ink); --brown-2: var(--ink-2); --brown-deep: #141414;
  --coral: var(--rose); --coral-deep: var(--rose-deep); --coral-soft: #e7c8d3;
  --tan: #d8c3cb; --gold: #c9a24b;
  --bg: var(--white); --surface: var(--white);
  --text-muted: var(--text-2);
  --ring: rgba(212,166,182,.55);

  /* dark context (footer / drawer) — warm brown */
  --dark-bg: #2a190e; --dark-surface: #3a2416; --dark-text: #f6ecdc;
  --dark-muted: #c9b79f; --dark-border: rgba(255,240,220,.13);

  /* —— Spacing —— */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* —— Type —— */
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem;
  --fs-lg:1.1875rem; --fs-xl:1.5rem; --fs-2xl:2rem;
  --fs-display: clamp(2.4rem, 5vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);

  --font-display: "Marcellus", Georgia, serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;

  /* —— Radius (squared / minimal) —— */
  --r-sm:2px; --r-md:3px; --r-lg:4px; --r-xl:6px; --r-full:999px;

  /* —— Shadows (soft) —— */
  --shadow-sm: 0 1px 2px rgba(30,20,25,.05);
  --shadow-md: 0 10px 30px rgba(60,40,50,.08);
  --shadow-lg: 0 24px 60px rgba(60,40,50,.12);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 260ms;
  --container: 1240px;
  --nav-h: 118px;
}

* { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  scroll-behavior: smooth; scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.75;
  overflow-x: hidden; -webkit-tap-highlight-color: rgba(212,166,182,.2); min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--rose); color: #fff; }

h1,h2,h3,h4 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.12;
  letter-spacing: .01em; color: var(--ink); margin: 0 0 var(--s-4); overflow-wrap: break-word;
}
p, li, a, span, blockquote, cite { overflow-wrap: break-word; }
p { margin: 0 0 var(--s-4); max-width: 66ch; }

.container { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: clamp(var(--s-4),5vw,var(--s-8)); }
.section { padding-block: clamp(var(--s-8),9vw,var(--s-10)); position: relative; }
.section--blush { background: var(--blush); }
.section--tint { background: var(--blush-2); }

/* —— Type helpers —— */
.eyebrow {
  display:inline-block; font-family: var(--font-body); font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--rose-deep);
  margin-bottom: var(--s-4);
}
.serif-i { font-family: var(--font-display); font-style: italic; }
.lede { font-size: var(--fs-lg); color: var(--text); max-width: 56ch; line-height: 1.8; }

/* —— Buttons —— */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-3);
  padding: 16px 34px; border: 1px solid var(--ink); border-radius: var(--r-sm);
  font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  cursor:pointer; white-space:nowrap; background: var(--ink); color: #fff;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn svg { width:15px; height:15px; }
.btn--coral { background: var(--ink); color:#fff; border-color: var(--ink); }
.btn--coral:hover { background: var(--rose); border-color: var(--rose); color: var(--ink); transform: translateY(-2px); }
.btn--brown { background: var(--rose); border-color: var(--rose); color: var(--ink); }
.btn--brown:hover { background: var(--rose-deep); border-color: var(--rose-deep); color:#fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color:#fff; }
.btn--on-dark { background: transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn--on-dark:hover { background:#fff; color: var(--ink); border-color:#fff; }
.btn:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--ring); }
.btn--block { width:100%; }
.btn--sm { padding: 11px 22px; letter-spacing:.12em; }
.btn .arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* text link with underline */
.tlink { display:inline-flex; align-items:center; gap: var(--s-2); font-size: var(--fs-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--ink); border-bottom:1px solid var(--ink); padding-bottom:4px; }
.tlink:hover { color: var(--rose-deep); border-color: var(--rose-deep); }
.tlink .arrow { transition: transform var(--dur) var(--ease-out); }
.tlink:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  background: var(--ink); color: #fff; text-align:center; font-size: var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; padding: 10px var(--s-4); position: relative; z-index: 101;
}
.topbar b { color: var(--rose); font-weight:700; }
.topbar span { opacity:.4; margin-inline: var(--s-3); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky; top:0; z-index:100; background: rgba(255,253,247,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease-out);
}
.nav.scrolled { box-shadow: 0 4px 24px rgba(60,40,50,.07); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap: var(--s-5); height:74px; }
.brand { display:flex; align-items:center; gap: var(--s-3); min-width:0; }
.brand__mark { width:42px; height:42px; flex:none; }
.brand__text { display:flex; flex-direction:column; line-height:1; min-width:0; }
.brand__name { font-family: var(--font-display); font-weight:400; font-size:1.5rem; letter-spacing:.06em; color: var(--ink); white-space:nowrap; }
.brand__tag { font-size:.55rem; letter-spacing:.34em; text-transform:uppercase; color: var(--rose-deep); margin-top:4px; }
.nav__links { display:flex; align-items:center; gap: var(--s-6); }
.nav__link { font-size: var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--ink); position:relative; padding-block:8px; transition: color var(--dur) var(--ease-out); }
.nav__link::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--rose-deep); transform: scaleX(0); transform-origin:left; transition: transform var(--dur) var(--ease-out); }
.nav__link:hover { color: var(--rose-deep); } .nav__link:hover::after { transform: scaleX(1); }
.nav__actions { display:flex; align-items:center; gap: var(--s-4); }

.lang-switch { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius: var(--r-sm); background:#fff; padding:2px; cursor:pointer; }
.lang-switch__opt { font-size:.7rem; font-weight:700; letter-spacing:.08em; color: var(--text-2); padding:5px 9px; border-radius:1px; transition: all var(--dur) var(--ease-out); }
.lang-switch__opt.active { background: var(--ink); color:#fff; }
.lang-switch:hover { border-color: var(--rose); }

.cart-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid transparent; background:transparent; color: var(--ink); cursor:pointer; transition: color var(--dur) var(--ease-out); }
.cart-btn:hover { color: var(--rose-deep); }
.cart-btn svg { width:22px; height:22px; }
.cart-count { position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 5px; background: var(--rose); color: var(--ink); border-radius: var(--r-full); font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; transform: scale(0); transition: transform var(--dur) var(--ease-out); }
.cart-count.show { transform: scale(1); }
.nav__toggle { display:none; background:none; border:0; cursor:pointer; width:44px; height:44px; color: var(--ink); align-items:center; justify-content:center; }
.nav__toggle svg { width:26px; height:26px; }

/* ============================================================
   Hero
   ============================================================ */
.hero { background: var(--blush); overflow:hidden; }
.hero__inner { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: clamp(var(--s-6),5vw,var(--s-9)); padding-block: clamp(var(--s-8),7vw,var(--s-10)); }
.hero__eyebrow { color: var(--rose-deep); }
.hero h1 { font-size: var(--fs-display); font-weight:400; letter-spacing:.005em; margin-bottom: var(--s-5); line-height:1.08; }
.hero p { font-size: var(--fs-lg); color: var(--text); max-width: 46ch; margin-bottom: var(--s-7); line-height:1.85; }
.hero__actions { display:flex; flex-wrap:wrap; gap: var(--s-4); align-items:center; }
.hero__visual { position:relative; display:grid; place-items:center; }
.hero__disc { position:absolute; inset:auto; width: 84%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle at 40% 35%, #fff, var(--rose) 140%); opacity:.55; z-index:0; }
.hero__pack { position:relative; z-index:1; width:min(78%,340px); filter: drop-shadow(0 30px 40px rgba(120,80,95,.28)); }
.hero__badge { position:absolute; z-index:2; bottom:8%; left:2%; background:#fff; border-radius: var(--r-full); width:104px; height:104px; display:grid; place-content:center; text-align:center; box-shadow: var(--shadow-md); }
.hero__badge b { font-family: var(--font-display); font-size:1.4rem; color: var(--ink); }
.hero__badge span { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color: var(--rose-deep); margin-top:2px; }

/* ============================================================
   Section headings
   ============================================================ */
.sec-head { max-width: 640px; margin-bottom: var(--s-8); }
.sec-head--center { margin-inline:auto; text-align:center; }
.sec-head h2 { font-size: var(--fs-h2); font-weight:400; }
.sec-head p { color: var(--text); font-size: var(--fs-lg); }
.sec-head--center p { margin-inline:auto; }

/* ============================================================
   Products
   ============================================================ */
.shop { background: var(--white); }
.shop__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-6); }
.shop__grid--two { grid-template-columns: repeat(2,1fr); max-width: 860px; margin-inline:auto; gap: var(--s-7); }
.pcard { display:flex; flex-direction:column; background: var(--white); text-decoration:none; color:inherit; }
.pcard--link { cursor:pointer; }
.pcard__media { position:relative; background: var(--blush); aspect-ratio: 1/1.05; display:grid; place-items:center; overflow:hidden; }
.pcard__media img { width:auto; max-height:78%; transition: transform var(--dur) var(--ease-out); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__flag { position:absolute; top: var(--s-4); left: var(--s-4); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background: var(--sale); padding:6px 12px; border-radius: var(--r-sm); }
.pcard__flag--brown { background: var(--ink); }
.pcard__quick { position:absolute; left:0; right:0; bottom:0; background: var(--ink); color:#fff; text-align:center; font-size: var(--fs-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding: 14px; transform: translateY(100%); transition: transform var(--dur) var(--ease-out); }
.pcard:hover .pcard__quick { transform: translateY(0); }
.pcard__body { padding: var(--s-5) var(--s-2) 0; text-align:center; display:flex; flex-direction:column; align-items:center; flex:1; }
.pcard__fr { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--text-2); margin-bottom: var(--s-2); }
.pcard h3 { font-size:1.35rem; font-weight:400; margin-bottom: var(--s-3); }
.pcard__desc { font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--s-3); max-width: 34ch; }
.pcard__rating { color: var(--rose); letter-spacing:2px; font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.pcard__rating span { color: var(--text-2); font-size: var(--fs-xs); letter-spacing:0; margin-left:6px; }
.stars { color: var(--rose); letter-spacing:2px; }
.pcard__foot { margin-top:auto; }
.pcard__price { font-family: var(--font-display); font-size:1.25rem; color: var(--ink); display:flex; gap:10px; align-items:baseline; justify-content:center; }
.pcard__price del { color: var(--text-2); font-size:1rem; }
.pcard__price ins { text-decoration:none; color: var(--rose-deep); }
.pcard__price small { font-size:.8rem; color: var(--text-2); font-family: var(--font-body); }
.pcard__cta { margin-top: var(--s-4); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--ink); border-bottom:1px solid var(--ink); padding-bottom:3px; display:inline-flex; gap:6px; }
.pcard--link:hover .pcard__cta { color: var(--rose-deep); border-color: var(--rose-deep); }

/* product-card inline add (kept for JS compatibility) */
.qty { display:flex; align-items:center; justify-content:center; gap: var(--s-3); margin: var(--s-4) 0; }
.qty__label { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--text-2); }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius: var(--r-sm); }
.stepper button { width:36px; height:40px; border:0; background:#fff; color: var(--ink); font-size:1.1rem; cursor:pointer; transition: background var(--dur) var(--ease-out); }
.stepper button:hover { background: var(--blush); }
.stepper input { width:40px; height:40px; text-align:center; border:0; background:transparent; font:600 var(--fs-sm) var(--font-body); color: var(--ink); -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.add-btn.added { background: var(--rose); border-color: var(--rose); color: var(--ink); }

/* ============================================================
   Promo / collection banner
   ============================================================ */
.promo { background: var(--blush); }
.promo__grid { display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(var(--s-6),5vw,var(--s-9)); }
.promo__media { position:relative; overflow:hidden; aspect-ratio: 5/4; }
.promo__media img { width:100%; height:100%; object-fit:cover; }
.promo__body h2 { font-size: var(--fs-h2); font-weight:400; }
.promo__body p { color: var(--text); font-size: var(--fs-lg); line-height:1.85; }

/* ============================================================
   Why choose us
   ============================================================ */
.why { background: var(--white); }
.why__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(var(--s-6),4vw,var(--s-8)); text-align:center; }
.why__item { display:flex; flex-direction:column; align-items:center; }
.why__media { position:relative; width:100%; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-md); margin-bottom: var(--s-6); }
.why__media img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-out); }
.why__item:hover .why__media img { transform: scale(1.07); }
.why__media::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent 55%, rgba(43,25,14,.32)); }
.why__icon { position:absolute; z-index:2; bottom: var(--s-4); left:50%; transform: translateX(-50%); width:56px; height:56px; margin:0; border-radius:50%; background: rgba(255,253,247,.95); color: var(--rose-deep); display:grid; place-items:center; box-shadow: var(--shadow-md); transition: transform .4s var(--ease-out); }
.why__item:hover .why__icon { transform: translateX(-50%) translateY(-4px); }
.why__icon svg { width:28px; height:28px; }
.why__item h3 { font-size:1.35rem; font-weight:400; margin-bottom: var(--s-3); }
.why__item p { color: var(--text); font-size: var(--fs-sm); max-width: 34ch; }
.why__philo { max-width: 760px; margin: clamp(var(--s-7),5vw,var(--s-9)) auto 0; text-align:center; padding-top: var(--s-7); border-top:1px solid var(--line); }
.why__philo-label { display:block; font-size: var(--fs-xs); letter-spacing:.26em; text-transform:uppercase; color: var(--rose-deep); font-weight:700; margin-bottom: var(--s-4); }
.why__philo > span:last-child { font-family: var(--font-display); font-style:italic; font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height:1.5; color: var(--ink); }

/* ============================================================
   Presentation — cinematic film
   ============================================================ */
.film { position:relative; margin-top: var(--s-2); aspect-ratio: 16/9; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg); background: var(--ink); }
.film__slides, .film__video, .film__overlay { position:absolute; inset:0; }
.film__slides { z-index:1; }
.film__slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; animation: filmKen 36s infinite; }
.film__slide:nth-child(1){animation-delay:0s} .film__slide:nth-child(2){animation-delay:6s} .film__slide:nth-child(3){animation-delay:12s} .film__slide:nth-child(4){animation-delay:18s} .film__slide:nth-child(5){animation-delay:24s} .film__slide:nth-child(6){animation-delay:30s}
@keyframes filmKen { 0%{opacity:0;transform:scale(1.06)} 3%{opacity:1} 15%{opacity:1} 18%{opacity:0} 100%{opacity:0;transform:scale(1.16)} }
.film__video { z-index:2; width:100%; height:100%; object-fit:cover; background:transparent; }
.film__overlay { z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--s-5); background: linear-gradient(180deg, rgba(30,18,10,.12), rgba(30,18,10,.5)); pointer-events:none; }
.film__badge { width:76px; height:76px; border-radius:50%; background: rgba(255,255,255,.92); color: var(--ink); display:grid; place-items:center; box-shadow: var(--shadow-lg); animation: gwBadge 3s ease-in-out infinite; }
.film__badge svg { width:26px; height:26px; margin-left:3px; }
.film__caption { color:#fff; font-family: var(--font-display); font-size: clamp(1.1rem,2.4vw,1.6rem); letter-spacing:.02em; text-shadow:0 2px 14px rgba(0,0,0,.45); margin:0; text-align:center; padding-inline: var(--s-4); }

/* Testimonial avatars */
.tmb__avatar { width:66px; height:66px; border-radius:50%; object-fit:cover; margin:0 auto var(--s-4); border:2px solid var(--blush); box-shadow: var(--shadow-sm); }

@media (prefers-reduced-motion: reduce) {
  .film__slide { animation:none !important; opacity:0 !important; transform:none !important; }
  .film__slide:first-child { opacity:1 !important; }
  .film__badge { animation:none !important; }
}

/* ============================================================
   Testimonials
   ============================================================ */
.tmb { background: var(--blush); }
.tmb__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-6); }
.tmb__card { background:#fff; padding: clamp(var(--s-6),3vw,var(--s-7)); text-align:center; border:1px solid var(--line); }
.tmb__stars { color: var(--rose); letter-spacing:3px; margin-bottom: var(--s-4); }
.tmb__quote { font-family: var(--font-display); font-size:1.15rem; line-height:1.6; color: var(--ink); margin-bottom: var(--s-5); font-style:italic; }
.tmb__name { font-size: var(--fs-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--rose-deep); }

/* ============================================================
   Newsletter
   ============================================================ */
.news { background: var(--ink); color:#fff; }
.news__in { text-align:center; max-width: 620px; margin-inline:auto; }
.news__in .eyebrow { color: var(--rose); }
.news__in h2 { color:#fff; font-size: var(--fs-h2); font-weight:400; }
.news__in p { color: rgba(255,255,255,.65); margin-inline:auto; margin-bottom: var(--s-6); }
.news__form { display:flex; gap: var(--s-3); max-width: 480px; margin-inline:auto; }
.news__form input { flex:1; background: transparent; border:1px solid rgba(255,255,255,.4); color:#fff; padding: 14px 16px; border-radius: var(--r-sm); font: 400 var(--fs-sm) var(--font-body); }
.news__form input::placeholder { color: rgba(255,255,255,.5); }
.news__form input:focus { outline:none; border-color: var(--rose); }
.news__form .btn { background: var(--rose); border-color: var(--rose); color: var(--ink); }
.news__form .btn:hover { background:#fff; border-color:#fff; }
.news__note { font-size: var(--fs-xs); color: rgba(255,255,255,.45); margin-top: var(--s-4); }

/* ============================================================
   Contact
   ============================================================ */
.contact { background: var(--white); }
.contact__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6),5vw,var(--s-8)); }
.contact__info h2 { font-size: var(--fs-h2); font-weight:400; }
.contact__list { list-style:none; margin: var(--s-6) 0 0; padding:0; display:grid; gap: var(--s-4); }
.contact__item { display:flex; gap: var(--s-4); align-items:flex-start; }
.contact__item svg { width:22px; height:22px; color: var(--rose-deep); flex:none; margin-top:3px; }
.contact__item b { display:block; font-size: var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color: var(--text-2); margin-bottom:2px; }
.contact__item a:hover { color: var(--rose-deep); }
.socials { display:flex; gap: var(--s-3); margin-top: var(--s-6); }
.social { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border); color: var(--text-2); transition: all var(--dur) var(--ease-out); }
.social:hover { border-color: var(--ink); color: var(--ink); }
.social svg { width:19px; height:19px; }
.form { background: var(--blush); padding: clamp(var(--s-6),4vw,var(--s-7)); }
.field { margin-bottom: var(--s-5); }
.field label { display:block; font-size: var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom: var(--s-2); color: var(--ink); }
.field input, .field textarea, .field select { width:100%; font-family:inherit; font-size: var(--fs-base); color: var(--ink); background:#fff; border:1px solid var(--border); border-radius: var(--r-sm); padding:13px 15px; transition: border-color var(--dur) var(--ease-out); }
.field textarea { resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--ring); }
.field--row { display:grid; grid-template-columns:1fr 1fr; gap: var(--s-4); }
.form__note { font-size: var(--fs-xs); color: var(--text-2); text-align:center; margin: var(--s-4) 0 0; }
.form__success { display:none; align-items:center; gap: var(--s-3); background:#fff; border:1px solid var(--rose); color: var(--rose-ink); border-radius: var(--r-sm); padding: var(--s-4); font-size: var(--fs-sm); font-weight:600; margin-bottom: var(--s-5); }
.form__success.show { display:flex; }

/* ============================================================
   Product detail page (PDP)
   ============================================================ */
.pdp { background: var(--white); padding-top: clamp(var(--s-7),6vw,var(--s-8)); }
.crumbs { display:flex; align-items:center; gap: var(--s-3); font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--text-2); margin-bottom: var(--s-6); }
.crumbs a { display:inline-flex; align-items:center; gap: var(--s-2); font-weight:700; color: var(--ink); }
.crumbs a svg { width:15px; height:15px; }
.crumbs a:hover { color: var(--rose-deep); }
.pdp__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6),5vw,var(--s-8)); align-items:start; }
.pdp__gallery { position: sticky; top: calc(var(--nav-h) + 12px); }
.pdp__stage { background: var(--blush); display:grid; place-items:center; padding: clamp(var(--s-6),5vw,var(--s-8)); min-height:360px; }
.pdp__stage img { max-height:460px; width:auto; filter: drop-shadow(0 22px 30px rgba(120,80,95,.22)); }
.pdp__thumbs { display:flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap:wrap; }
.pdp__thumb { width:78px; height:78px; border:1px solid var(--border); background: var(--blush); padding:6px; cursor:pointer; display:grid; place-items:center; transition: border-color var(--dur) var(--ease-out); }
.pdp__thumb img { max-height:100%; width:auto; }
.pdp__thumb.is-active { border-color: var(--ink); }
.pdp__brand { font-size: var(--fs-xs); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--rose-deep); }
.pdp__title { font-size: clamp(2rem,4vw,3rem); font-weight:400; margin:.25em 0 .1em; }
.pdp__subtitle { font-family: var(--font-display); font-style:italic; color: var(--text-2); font-size:1.1rem; margin-bottom: var(--s-5); }
.pdp__rating { display:flex; align-items:center; gap: var(--s-3); margin-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--text-2); }
.pdp__tagline { font-size: var(--fs-lg); color: var(--text); margin-bottom: var(--s-5); line-height:1.8; }
.pdp__price { display:flex; align-items:baseline; gap: var(--s-3); margin-bottom: var(--s-6); }
.pdp__price b { font-family: var(--font-display); font-size:2rem; font-weight:400; color: var(--ink); }
.pdp__price .pdp__pricenote { font-size: var(--fs-xs); color: var(--text-2); }
.buybox { border-top:1px solid var(--line); padding-top: var(--s-6); }
.buybox__label { font-size: var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--text-2); margin-bottom: var(--s-3); display:block; }
.variants { display:flex; flex-wrap:wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.variant { border:1px solid var(--border); background:#fff; color: var(--ink); border-radius: var(--r-sm); padding:11px 18px; font:600 var(--fs-xs)/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition: all var(--dur) var(--ease-out); }
.variant:hover { border-color: var(--rose); }
.variant.is-active { border-color: var(--ink); background: var(--ink); color:#fff; }
.variant:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.buybox__row { display:flex; align-items:center; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap:wrap; }
.buybox__row .stepper { flex:none; }
.buybox .btn { flex:1; min-width:200px; }
.buybox__secure { display:flex; align-items:flex-start; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
.buybox__secure svg { width:16px; height:16px; color: var(--rose-deep); flex:none; margin-top:2px; }
.pdp__block { margin-top: clamp(var(--s-7),6vw,var(--s-8)); }
.pdp__block h2 { font-size:1.6rem; font-weight:400; margin-bottom: var(--s-5); }
.pdp__features { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap: var(--s-4); }
.pdp__features li { display:flex; align-items:center; gap: var(--s-3); font-size: var(--fs-sm); }
.pdp__features svg { width:20px; height:20px; color: var(--rose-deep); flex:none; }
.pdp__certs { display:flex; flex-wrap:wrap; gap: var(--s-2); margin-top: var(--s-5); }
.cert { font-size: var(--fs-xs); font-weight:600; letter-spacing:.02em; color: var(--rose-ink); background: var(--blush); border:1px solid var(--border); border-radius: var(--r-full); padding:6px 13px; }
.pdp__specs { width:100%; border-collapse:collapse; max-width:560px; }
.pdp__specs tr { border-bottom:1px solid var(--line); }
.pdp__specs th { text-align:left; padding: var(--s-4) 0; font-weight:400; color: var(--text-2); font-size: var(--fs-sm); }
.pdp__specs td { text-align:right; padding: var(--s-4) 0; font-family: var(--font-display); color: var(--ink); }
.spec-note { font-size: var(--fs-xs); color: var(--text-2); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--dark-bg); color: var(--dark-muted); padding-top: var(--s-9); padding-bottom: var(--s-6); }
.footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); padding-bottom: var(--s-8); border-bottom:1px solid var(--dark-border); }
.footer__brand .brand__name { color:#fff; }
.footer__brand p { color: var(--dark-muted); font-size: var(--fs-sm); margin-top: var(--s-4); max-width: 38ch; line-height:1.8; }
.footer__col h4 { font-family: var(--font-display); font-size:1.1rem; font-weight:400; color:#fff; margin-bottom: var(--s-4); letter-spacing:.02em; }
.footer__col ul { list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3); }
.footer__col a, .footer__col span { font-size: var(--fs-sm); color: var(--dark-muted); transition: color var(--dur) var(--ease-out); }
.footer__col a:hover { color: var(--rose); }
.footer__pay { display:flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap:wrap; }
.footer__pay span { font-size:.6rem; font-weight:700; letter-spacing:.06em; padding:5px 9px; border:1px solid var(--dark-border); border-radius: var(--r-sm); color: var(--dark-muted); }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; gap: var(--s-4); padding-top: var(--s-5); font-size: var(--fs-xs); flex-wrap:wrap; }

/* ============================================================
   Cart drawer
   ============================================================ */
.overlay { position:fixed; inset:0; background: rgba(20,15,18,.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: opacity var(--dur) var(--ease-out); z-index:300; }
.overlay.show { opacity:1; visibility:visible; }
.cart { position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:310; background:#fff; box-shadow: var(--shadow-lg); display:flex; flex-direction:column; transform: translateX(100%); transition: transform .4s var(--ease-out); }
.cart.open { transform: translateX(0); }
.cart__head { display:flex; align-items:center; justify-content:space-between; padding: var(--s-5) var(--s-6); border-bottom:1px solid var(--line); }
.cart__head h3 { margin:0; font-size:1.3rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; }
.cart__close { background:none; border:0; cursor:pointer; width:40px; height:40px; color: var(--ink); }
.cart__close svg { width:24px; height:24px; }
.cart__body { flex:1; overflow-y:auto; padding: var(--s-5) var(--s-6); }
.cart__empty { text-align:center; color: var(--text-2); padding: var(--s-9) var(--s-4); }
.cart__empty svg { width:50px; height:50px; color: var(--rose); margin:0 auto var(--s-4); }
.citem { display:grid; grid-template-columns:64px 1fr auto; gap: var(--s-4); padding: var(--s-4) 0; border-bottom:1px solid var(--line); align-items:center; }
.citem__img { width:64px; height:64px; background: var(--blush); object-fit:contain; padding:4px; }
.citem__name { font-family: var(--font-display); font-size:1rem; line-height:1.3; color: var(--ink); }
.citem__meta { font-size: var(--fs-xs); color: var(--text-2); }
.citem__ctrl { display:inline-flex; align-items:center; gap: var(--s-2); margin-top: var(--s-2); }
.citem__ctrl button { width:26px; height:26px; border:1px solid var(--border); background:#fff; cursor:pointer; color: var(--ink); font-size:1rem; line-height:1; }
.citem__ctrl span { min-width:20px; text-align:center; font-weight:600; font-size: var(--fs-sm); }
.citem__right { text-align:right; }
.citem__price { font-family: var(--font-display); color: var(--ink); }
.citem__remove { background:none; border:0; color: var(--text-2); font-size: var(--fs-xs); cursor:pointer; margin-top: var(--s-2); text-decoration:underline; }
.citem__remove:hover { color: var(--sale); }
.cart__foot { border-top:1px solid var(--line); padding: var(--s-5) var(--s-6) var(--s-6); background: var(--blush-2); }
.cart__row { display:flex; justify-content:space-between; margin-bottom: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.cart__total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom: var(--s-5); }
.cart__total b { font-family: var(--font-display); font-size:1.5rem; color: var(--ink); }
.cart__checkout { display:grid; gap: var(--s-3); }
.cart__hint { font-size: var(--fs-xs); color: var(--text-2); text-align:center; margin: var(--s-3) 0 0; }
.paypal-box { margin-bottom: var(--s-4); } .paypal-box:empty { display:none; }
.paypal-sep { display:flex; align-items:center; gap: var(--s-3); margin: var(--s-4) 0; color: var(--text-2); font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; }
.paypal-sep::before, .paypal-sep::after { content:""; flex:1; height:1px; background: var(--line); }

/* toast + back-to-top + progress */
.toast { position:fixed; left:50%; bottom:28px; transform: translate(-50%,140%); background: var(--ink); color:#fff; padding:13px 22px; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); z-index:400; display:flex; align-items:center; gap: var(--s-3); letter-spacing:.04em; transition: transform .4s var(--ease-out); }
.toast.show { transform: translate(-50%,0); }
.toast svg { width:20px; height:20px; color: var(--rose); }
.to-top { position:fixed; right: clamp(16px,3vw,26px); bottom: clamp(16px,3vw,26px); z-index:90; width:48px; height:48px; background: var(--ink); color:#fff; border:0; cursor:pointer; display:grid; place-items:center; box-shadow: var(--shadow-lg); opacity:0; transform: translateY(16px); pointer-events:none; transition: all .3s var(--ease-out); }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background: var(--rose); color: var(--ink); }
.to-top svg { width:20px; height:20px; }
.scroll-prog { position:fixed; top:0; left:0; height:3px; width:0; z-index:400; background: var(--rose); }

/* reveal */
.reveal { opacity:0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"]{transition-delay:.09s} .reveal[data-delay="2"]{transition-delay:.18s} .reveal[data-delay="3"]{transition-delay:.27s}
.reveal--left{transform:translateX(-30px)} .reveal--right{transform:translateX(30px)} .reveal--left.in,.reveal--right.in{transform:none}

/* ============================================================
   Motion — alive & dynamic
   ============================================================ */
@keyframes gwFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes gwPulse  { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.07);opacity:.7} }
@keyframes gwBadge  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes gwMarquee{ to { transform: translateX(-50%) } }
@keyframes gwRing   { 0%{box-shadow:0 0 0 0 rgba(229,135,90,.45)} 70%{box-shadow:0 0 0 16px rgba(229,135,90,0)} 100%{box-shadow:0 0 0 0 rgba(229,135,90,0)} }
@keyframes gwShimmer{ to { background-position: 200% center } }

.hero__pack  { animation: gwFloat 6s ease-in-out infinite; will-change: transform; }
.hero__disc  { animation: gwPulse 7s ease-in-out infinite; }
.hero__badge { animation: gwBadge 3.4s ease-in-out infinite, gwRing 3.4s ease-out infinite; }

/* animated brand shimmer (gold sweep on the wordmark) */
.brand:hover .brand__name {
  background: linear-gradient(90deg, var(--ink) 0%, var(--gold) 50%, var(--ink) 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: gwShimmer 1.4s linear;
}

/* button sheen */
.btn--coral { position: relative; overflow: hidden; }
.btn--coral::after { content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease-out); pointer-events:none; }
.btn--coral:hover::after { left:150%; }

/* animated section-title underline */
.sec-head h2 { position: relative; }
.sec-head h2::after { content:""; display:block; width:0; height:2px; margin: var(--s-4) 0 0; background: linear-gradient(90deg, var(--rose), var(--gold)); transition: width .9s var(--ease-out) .25s; }
.sec-head--center h2::after { margin-inline: auto; }
.sec-head.in h2::after { width: 56px; }

/* hover motion */
.pcard--link { transition: transform .35s var(--ease-out); }
.pcard--link:hover { transform: translateY(-8px); }
.pcard__media img { transition: transform .5s var(--ease-out); }
.why__item { transition: transform .35s var(--ease-out); }
.why__item:hover { transform: translateY(-8px); }
.why__icon { transition: transform .45s var(--ease-out); display:inline-flex; }
.why__item:hover .why__icon { transform: scale(1.14) rotate(-8deg); }
.tmb__card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); }
.tmb__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--rose); }
.promo__media img { transition: transform 1.2s var(--ease-out); }
.promo__media:hover img { transform: scale(1.05); }
.contact__item { transition: transform .3s var(--ease-out); }
.contact__item:hover { transform: translateX(4px); }
.pdp__thumb { transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.pdp__thumb:hover { transform: translateY(-3px); }

/* marquee band */
.marquee { background: var(--ink); color: var(--dark-text); overflow:hidden; padding: 14px 0; border-block:1px solid var(--dark-border); }
.marquee__track { display:flex; width:max-content; animation: gwMarquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display:inline-flex; align-items:center; gap: var(--s-7); padding-inline: calc(var(--s-7)/2); font-family: var(--font-display); font-size:1.2rem; letter-spacing:.05em; white-space:nowrap; }
.marquee__item::after { content:"✦"; color: var(--rose); font-size:.7em; }

@media (prefers-reduced-motion: reduce) {
  .hero__pack, .hero__disc, .hero__badge, .marquee__track { animation: none !important; }
  .hero__pack, .hero__disc, .hero__badge { transform: none !important; }
}

/* mobile drawer */
.drawer { position:fixed; inset:0; z-index:200; background: rgba(20,15,18,.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display:flex; flex-direction:column; padding: var(--s-6); transform: translateY(-100%); transition: transform .4s var(--ease-out); visibility:hidden; }
.drawer.open { transform: translateY(0); visibility:visible; }
.drawer__head { display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--s-8); }
.drawer__close { background:none; border:0; color:#fff; width:44px; height:44px; cursor:pointer; }
.drawer__close svg { width:28px; height:28px; }
.drawer a { font-family: var(--font-display); font-size:1.9rem; color:#fff; padding: var(--s-3) 0; border-bottom:1px solid var(--dark-border); }
.drawer a:hover { color: var(--rose); }
.drawer .btn { margin-top: var(--s-6); }
.drawer__lang { display:flex; align-items:center; justify-content:space-between; margin-top: var(--s-6); padding-top: var(--s-5); border-top:1px solid var(--dark-border); }
.drawer__lang > span:first-child { font-size: var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--dark-muted); }
.drawer .lang-switch { background:#fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  :root { --nav-h: 108px; }
  .hero__inner { grid-template-columns:1fr; }
  .hero__visual { order:-1; max-width:340px; margin-inline:auto; }
  .shop__grid { grid-template-columns: repeat(2,1fr); }
  .promo__grid, .contact__grid, .pdp__grid { grid-template-columns:1fr; }
  .promo__media { order:-1; }
  .pdp__gallery { position:static; }
  .tmb__grid { grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .footer__top { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
  .nav__links, .nav__wholesale, .nav__actions .lang-switch { display:none; }
  .nav__toggle { display:inline-flex; }
  .shop__grid, .shop__grid--two { grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .why__grid { grid-template-columns:1fr; gap: var(--s-7); }
  .pdp__features { grid-template-columns:1fr; }
  .field--row { grid-template-columns:1fr; }
  .footer__top { grid-template-columns:1fr 1fr; gap: var(--s-6); }
  .hero__actions { width:100%; }
  .news__form { flex-direction:column; }
}
@media (max-width: 560px) {
  :root { --nav-h: 100px; }
  .topbar :not(b) { display:none; }
  .topbar { letter-spacing:.06em; }
  .footer__top { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; align-items:flex-start; gap: var(--s-2); }
  .hero__badge { width:84px; height:84px; }
  .buybox .btn { min-width:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}