/* ===========================================================================
   FITLAB — Balanced direction
   Bright editorial. Airy minimalist canvas, big wide lifestyle imagery,
   color from the photography + sharp accents. Elegant, human, colorful.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

:root {
  --paper:   #faf8f3;
  --paper-2: #ffffff;
  --sand:    #efe9df;
  --ink:     #1a1916;
  --ink-soft:#3a3833;
  --muted:   #79746b;
  --line:    rgba(26,25,22,.12);
  --line-soft: rgba(26,25,22,.07);

  --coral:  #ef534e;
  --blue:   #1d4ed8;
  --turq:   #14bdbd;
  --mint:   #34b88a;
  --yellow: #e9a900;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Montserrat", system-ui, sans-serif;

  --maxw: 1360px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --section: clamp(5rem, 11vw, 9rem);
  --r: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: var(--head); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--coral); }
.eyebrow.muted { color: var(--muted); }
.eyebrow.on-dark { color: rgba(255,255,255,.75); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: .7em;
  background: var(--bg); color: var(--fg);
  padding: 1.05em 2.2em; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--bg); border-radius: 100px; cursor: pointer;
  transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--coral { --bg: var(--coral); border-color: var(--coral); }
.btn--light { --bg: var(--paper-2); --fg: var(--ink); border-color: var(--paper-2); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ghost.on-dark { --fg: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost.on-dark:hover { background: #fff; color: var(--ink); }
.link-underline { display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; padding-bottom:3px; position:relative; }
.link-underline::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background: currentColor; transform-origin:right; transition: transform .45s var(--ease); }
.link-underline:hover::after { transform-origin:left; transform: scaleX(0); }

/* ---- Announcement + header ------------------------------------------------ */
.announce { background: var(--ink); color: var(--paper); text-align:center; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; padding:.6rem 1rem; font-weight:500; }
.announce b { color: var(--yellow); }
.header { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.header__bar { display:flex; align-items:center; justify-content:space-between; height: 78px; }
.logo { font-family: var(--head); font-weight: 700; font-size: 1.6rem; letter-spacing: -.04em; }
.nav { display:flex; gap: 2.4rem; }
.nav a { font-size:.84rem; font-weight:500; letter-spacing:.03em; position:relative; padding:.3rem 0; }
.nav a::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%; background: var(--coral); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.header__tools { display:flex; align-items:center; gap:1.4rem; }
.icon-btn { background:none; border:none; cursor:pointer; display:inline-flex; position:relative; padding:.25rem; }
.icon-btn svg { width:21px; height:21px; }
.cart-count { position:absolute; top:-6px; right:-8px; background:var(--coral); color:#fff; font-size:.62rem; font-weight:700; min-width:17px; height:17px; border-radius:100px; display:grid; place-items:center; padding:0 4px; transform:scale(0); transition: transform .35s var(--ease); }
.cart-count.show { transform: scale(1); }
.menu-toggle { display:none; }

/* ---- Hero (full-bleed wide image, text in negative space) ----------------- */
.hero { position: relative; background: var(--sand); }
.hero__media { position: relative; width: 100%; height: min(88vh, 860px); }
.hero__media img { width:100%; height:100%; object-fit: cover; object-position: 30% center; }
.hero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent 30%, rgba(250,248,243,.4) 55%, rgba(250,248,243,.92) 78%); }
.hero__inner { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:flex-end; }
.hero__text { max-width: 540px; text-align: left; }
.hero h1 { font-size: clamp(3rem, 7vw, 6.2rem); font-weight: 600; letter-spacing: -.035em; line-height: .98; margin: 1.2rem 0 1.5rem; }
.hero h1 em { font-style: normal; color: var(--coral); }
.hero__sub { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink-soft); max-width: 40ch; margin-bottom: 2.2rem; }
.hero__cta { display:flex; gap:1rem; flex-wrap:wrap; }

/* ---- Attribute strip ------------------------------------------------------ */
.attrs { border-bottom: 1px solid var(--line); background: var(--paper); }
.attrs__grid { display:grid; grid-template-columns: repeat(4,1fr); }
.attr { padding: 2.2rem var(--pad); border-left: 1px solid var(--line); text-align:center; }
.attr:first-child { border-left:none; }
.attr h4 { font-family: var(--head); font-size: .98rem; font-weight: 600; letter-spacing: 0; }
.attr p { font-size:.8rem; color: var(--muted); margin-top:.3rem; }

/* ---- Section -------------------------------------------------------------- */
.sec { padding-block: var(--section); }
.sec__head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom: clamp(2.5rem,5vw,4rem); flex-wrap:wrap; }
.sec__head h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); max-width: 18ch; }
.sec__head .eyebrow { display:block; margin-bottom:1rem; }

/* ---- Lifestyle band (full-bleed wide image) ------------------------------- */
.band { position: relative; min-height: 78vh; display:flex; align-items:center; overflow:hidden; color:#fff; }
.band__media { position:absolute; inset:0; z-index:0; }
.band__media img { width:100%; height:115%; object-fit:cover; will-change: transform; }
.band__media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(20,19,16,.62) 0%, rgba(20,19,16,.28) 45%, transparent 75%); }
.band--right .band__media::after { background: linear-gradient(270deg, rgba(20,19,16,.62) 0%, rgba(20,19,16,.28) 45%, transparent 75%); }
.band__inner { position: relative; z-index: 2; width:100%; }
.band__text { max-width: 540px; }
.band--right .band__inner { display:flex; justify-content:flex-end; }
.band h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); margin: 1.1rem 0 1.3rem; }
.band p { font-size: 1.08rem; color: rgba(255,255,255,.85); max-width: 42ch; margin-bottom: 2rem; }

/* ---- Products (minimalist grid) ------------------------------------------- */
.products { background: var(--paper); }
.pgrid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem,2.5vw,2rem); }
.card { position:relative; }
.card__media { position:relative; aspect-ratio: 4/5; background: var(--paper-2); border-radius: var(--r); overflow:hidden; border:1px solid var(--line-soft); }
.card__media img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__tag { position:absolute; top:1rem; left:1rem; z-index:2; background: var(--ink); color: var(--paper); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.42em .8em; border-radius:100px; }
.card__tag.accent { background: var(--coral); }
.card__add { position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:2; background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); border:1px solid var(--line); cursor:pointer; padding:.9em 1em; border-radius:100px; font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; backdrop-filter: blur(6px); opacity:0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s, color .3s; }
.card:hover .card__add { opacity:1; transform: none; }
.card__add:hover { background: var(--ink); color: var(--paper); }
.card__add.added { background: var(--mint); color:#fff; border-color: var(--mint); }
.card__info { display:flex; justify-content:space-between; align-items:flex-start; padding: 1.1rem .15rem 0; gap:1rem; }
.card__name { font-family: var(--head); font-weight: 600; font-size: 1.05rem; }
.card__meta { font-size:.78rem; color: var(--muted); margin-top:.25rem; }
.card__price { text-align:right; white-space:nowrap; }
.card__price .now { font-family: var(--head); font-weight:600; font-size:1.02rem; }
.card__price .was { display:block; font-size:.74rem; color: var(--muted); text-decoration: line-through; }
.card__dots { display:flex; gap:.32rem; padding:.6rem .15rem 0; }
.card__dots span { width:11px; height:11px; border-radius:100px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
@media (hover: none) { .card__add { opacity:1; transform:none; } }

/* ---- Gear ----------------------------------------------------------------- */
.gear { background: var(--sand); }

/* ---- Personalize ---------------------------------------------------------- */
.personalize { background: var(--paper); }
.personalize__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.personalize__media { border-radius: var(--r); overflow:hidden; aspect-ratio: 5/4; background: var(--sand); position:relative; }
.personalize__media img { width:100%; height:100%; object-fit: cover; }
.personalize h2 { font-size: clamp(2.2rem,5vw,3.8rem); margin:1rem 0 1.2rem; }
.personalize p { color: var(--ink-soft); max-width: 42ch; margin-bottom: 1.8rem; }
.feat-list { display:flex; flex-direction:column; gap:.9rem; margin-bottom: 2.2rem; }
.feat-list li { display:flex; gap:.8rem; align-items:center; font-size:.96rem; }
.feat-list svg { width:18px; height:18px; stroke: var(--coral); flex:none; }

/* ---- Proof ---------------------------------------------------------------- */
.proof { background: var(--paper-2); text-align:center; border-top:1px solid var(--line-soft); }
.proof__stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-bottom: clamp(3rem,6vw,5rem); border-block:1px solid var(--line); }
.stat { padding: 2.4rem 1rem; border-left:1px solid var(--line); }
.stat:first-child { border-left:none; }
.stat .num { font-family: var(--head); font-weight:600; font-size: clamp(2rem,4vw,3rem); letter-spacing:-.03em; }
.stat .lbl { font-size:.78rem; color: var(--muted); margin-top:.3rem; }
.reviews { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,2.5vw,2rem); text-align:left; }
.review { border:1px solid var(--line); border-radius: var(--r); padding: 2rem 1.8rem; background: var(--paper); }
.review .stars { color: var(--yellow); letter-spacing:.15em; margin-bottom:1rem; }
.review p { font-size:.98rem; color: var(--ink-soft); margin-bottom:1.4rem; }
.review .who { font-weight:600; font-size:.82rem; } .review .who span { color: var(--muted); font-weight:400; }
.channels { display:flex; gap:2.2rem; justify-content:center; flex-wrap:wrap; margin-top: clamp(3rem,6vw,5rem); align-items:center; }
.channels .lab { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.channels span:not(.lab) { font-family: var(--head); font-weight:600; font-size:1.05rem; color: var(--ink); opacity:.5; transition: opacity .3s; }
.channels span:not(.lab):hover { opacity:1; }

/* ---- Footer --------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--paper); padding-block: clamp(4rem,8vw,6rem) 2.5rem; }
.footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap:2.5rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer .logo { font-size:2.4rem; margin-bottom:1rem; }
.footer__top p { color: rgba(255,255,255,.6); max-width:32ch; font-size:.92rem; }
.footer h4 { font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.55); margin-bottom:1.2rem; font-family: var(--sans); font-weight:600; }
.footer__links a { display:block; padding:.42rem 0; font-size:.92rem; color: rgba(255,255,255,.8); transition: color .25s, padding-left .25s; }
.footer__links a:hover { color: var(--paper); padding-left:5px; }
.newsletter { display:flex; border:1px solid rgba(255,255,255,.22); border-radius:100px; overflow:hidden; margin-top:1rem; }
.newsletter input { flex:1; background:none; border:none; padding:.9rem 1.2rem; color:var(--paper); outline:none; font-size:.88rem; }
.newsletter input::placeholder { color: rgba(255,255,255,.45); }
.newsletter button { background: var(--coral); color:#fff; border:none; padding:0 1.5rem; cursor:pointer; font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; flex-wrap:wrap; gap:1rem; font-size:.8rem; color: rgba(255,255,255,.55); }

/* ---- Cart ----------------------------------------------------------------- */
.overlay { position: fixed; inset:0; background: rgba(20,19,16,.42); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: opacity .45s var(--ease), visibility .45s; z-index:90; }
.overlay.open { opacity:1; visibility:visible; }
.cart { position: fixed; top:0; right:0; height:100%; width:min(440px,100%); z-index:100; background: var(--paper); display:flex; flex-direction:column; transform: translateX(100%); transition: transform .55s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.16); }
.cart.open { transform: translateX(0); }
.cart__head { display:flex; align-items:center; justify-content:space-between; padding:1.6rem 1.8rem; border-bottom:1px solid var(--line); }
.cart__head h3 { font-size:1.1rem; }
.cart__close { background:none; border:none; cursor:pointer; font-size:1.4rem; line-height:1; }
.ship-bar { padding:1.1rem 1.8rem; background: var(--sand); font-size:.8rem; }
.ship-bar p { margin-bottom:.55rem; } .ship-bar b { color: var(--coral); }
.ship-track { height:5px; background: rgba(0,0,0,.1); border-radius:100px; overflow:hidden; }
.ship-fill { height:100%; width:0; background: var(--mint); border-radius:100px; transition: width .5s var(--ease); }
.cart__items { flex:1; overflow-y:auto; padding:.5rem 1.8rem; }
.cart__empty { text-align:center; color: var(--muted); padding:4rem 1rem; }
.citem { display:grid; grid-template-columns:64px 1fr auto; gap:1rem; padding:1.3rem 0; border-bottom:1px solid var(--line-soft); align-items:center; }
.citem__img { width:64px; height:80px; border-radius: var(--r); object-fit:cover; background: var(--sand); }
.citem__name { font-family: var(--head); font-weight:600; font-size:.92rem; }
.citem__color { font-size:.74rem; color: var(--muted); margin-top:.15rem; }
.qty { display:inline-flex; align-items:center; gap:.7rem; margin-top:.6rem; border:1px solid var(--line); border-radius:100px; padding:.25rem .55rem; }
.qty button { background:none; border:none; cursor:pointer; font-size:1rem; line-height:1; width:18px; color:var(--ink); }
.qty span { font-size:.82rem; min-width:14px; text-align:center; }
.citem__price { font-family: var(--head); font-weight:600; font-size:.9rem; text-align:right; }
.citem__remove { background:none; border:none; cursor:pointer; font-size:.68rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-top:.5rem; }
.citem__remove:hover { color: var(--coral); }
.cart__foot { padding:1.6rem 1.8rem; border-top:1px solid var(--line); }
.cart__row { display:flex; justify-content:space-between; margin-bottom:.6rem; font-size:.9rem; }
.cart__row.total { font-family: var(--head); font-weight:600; font-size:1.2rem; margin:1rem 0 1.3rem; }
.cart__foot .btn { width:100%; justify-content:center; }
.cart__note { text-align:center; font-size:.72rem; color: var(--muted); margin-top:.9rem; }

/* ---- Checkout ------------------------------------------------------------- */
.co-header { position: static; }
.co-secure { display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:600; color: var(--muted); }
.co-secure svg { width:18px; height:18px; }
.checkout { min-height: 68vh; padding-block: clamp(2rem,4vw,3.5rem) clamp(3rem,6vw,5rem); }
.co { display:grid; grid-template-columns: 1.2fr .9fr; gap: clamp(2rem,4vw,4rem); align-items:start; }
.co__back { display:inline-block; font-size:.82rem; font-weight:600; color: var(--muted); margin-bottom:1.5rem; }
.co__back:hover { color: var(--ink); }
.co__sec { margin-bottom: 2.2rem; }
.co__sec h2 { font-size:1.15rem; margin-bottom:1.1rem; }
.field { margin-bottom:1rem; display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:.78rem; font-weight:600; color: var(--muted); letter-spacing:.02em; }
.field input { padding:.85em 1em; border:1px solid var(--line); border-radius:10px; font-size:.95rem; background: var(--paper-2); outline:none; transition: border-color .2s, background .2s; }
.field input:focus { border-color: var(--ink); }
.field input.bad { border-color: var(--coral); background:#fff5f4; }
.field-row { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.field-row:has(.field--sm) { grid-template-columns: 1fr 1fr .7fr; }
.pay { display:flex; flex-direction:column; gap:.7rem; }
.pay__opt { display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; cursor:pointer; transition: border-color .2s; }
.pay__opt:has(input:checked) { border-color: var(--ink); }
.pay__opt input { width:18px; height:18px; accent-color: var(--coral); }
.pay__opt b { display:block; font-size:.92rem; font-family:var(--head); }
.pay__opt small { color: var(--muted); font-size:.8rem; }
.card-fields { margin-top:1rem; }
.co__summary { background: var(--paper-2); border:1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.6rem 1.8rem; position: sticky; top: 1.5rem; }
.co__summary h2 { font-size:1.1rem; margin-bottom:1.2rem; }
.co-lines { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.3rem; }
.co-line { display:grid; grid-template-columns:52px 1fr auto; gap:.9rem; align-items:center; }
.co-line__img { position:relative; width:52px; height:60px; }
.co-line__img img { width:100%; height:100%; object-fit:cover; border-radius:8px; background: var(--sand); }
.co-line__qty { position:absolute; top:-8px; right:-8px; background: var(--ink); color:#fff; font-size:.66rem; font-weight:700; min-width:18px; height:18px; border-radius:100px; display:grid; place-items:center; padding:0 4px; }
.co-line__name { font-family:var(--head); font-weight:600; font-size:.88rem; }
.co-line__var { font-size:.73rem; color: var(--muted); margin-top:.15rem; line-height:1.3; }
.co-line__price { font-family:var(--head); font-weight:600; font-size:.88rem; }
.co-tot { border-top:1px solid var(--line); padding-top:1.1rem; }
.co-tot__row { display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:.55rem; color: var(--ink-soft); }
.co-tot__total { font-family:var(--head); font-weight:600; font-size:1.2rem; color: var(--ink); margin-top:.6rem; }
.co__place { width:100%; justify-content:center; margin-top:1.4rem; }
.co__trust { text-align:center; font-size:.74rem; color: var(--muted); margin-top:.9rem; }
.co-empty { text-align:center; padding: clamp(4rem,10vw,7rem) 1rem; }
.co-empty h1 { font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom:1rem; }
.co-empty p { color: var(--muted); margin-bottom:1.8rem; }
.co-done { max-width: 620px; margin-inline:auto; text-align:center; padding: clamp(3rem,7vw,6rem) 1rem; }
.co-done__check { width:64px; height:64px; border-radius:100px; background: var(--mint); color:#fff; display:grid; place-items:center; margin:0 auto 1.6rem; }
.co-done__check svg { width:30px; height:30px; }
.co-done .eyebrow { display:block; color: var(--muted); margin-bottom:.8rem; }
.co-done h1 { font-size: clamp(1.9rem,4.5vw,2.8rem); margin-bottom:1rem; }
.co-done p { color: var(--ink-soft); margin-bottom:2rem; }
.co-done__sum { text-align:left; border:1px solid var(--line); border-radius: var(--r); padding:1.5rem; margin-bottom:2rem; }
.co-foot { border-top:1px solid var(--line); padding: 1.5rem 0; }
.co-foot .wrap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color: var(--muted); }
@media (max-width: 820px){ .co { grid-template-columns: 1fr; } .co__summary { position: static; order:-1; } }
@media (max-width: 480px){ .field-row, .field-row:has(.field--sm) { grid-template-columns: 1fr; } }

/* ---- Content pages (about / faqs) ----------------------------------------- */
.page { padding-block: clamp(2.5rem,5vw,4.5rem) clamp(3rem,7vw,6rem); min-height: 60vh; }
.page__head { max-width: 760px; margin-bottom: clamp(2rem,4vw,3rem); }
.page__head .eyebrow { display:block; color: var(--coral); margin-bottom:.9rem; }
.page__head h1 { font-size: clamp(2.2rem,5vw,3.6rem); line-height:1.02; }
.page__head .lead { color: var(--ink-soft); font-size:1.08rem; margin-top:1.1rem; max-width:56ch; }
.prose { max-width: 64ch; }
.prose h2 { font-size: clamp(1.3rem,3vw,1.9rem); margin: 2.2rem 0 .8rem; }
.prose p { color: var(--ink-soft); margin-bottom:1.1rem; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; padding:1.2rem 0; font-family:var(--head); font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-weight:400; font-size:1.4rem; color: var(--muted); }
.faq details[open] summary::after { content:"\2212"; }
.faq p { padding-bottom:1.3rem; color: var(--ink-soft); max-width:62ch; }

/* ---- Reveal --------------------------------------------------------------- */
[data-reveal] { opacity:0; transform: translateY(30px); }
.reveal-ready [data-reveal] { transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }

/* ---- Lifestyle gallery ---------------------------------------------------- */
.lifestyle { background: var(--paper); }
.lifegrid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.lifecard { position:relative; border-radius: var(--r); overflow:hidden; aspect-ratio: 4/5; }
.lifecard img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.lifecard:hover img { transform: scale(1.05); }
.lifecard::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,19,16,.72) 0%, rgba(20,19,16,.08) 46%, transparent 72%); }
.lifecard__cap { position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem; z-index:2; color:#fff; }
.lifecard__cap .k { font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.82); display:block; margin-bottom:.45rem; }
.lifecard__cap .t { font-family: var(--head); font-weight:600; font-size:1.18rem; line-height:1.15; letter-spacing:-.01em; }

/* ---- Collection / listing page -------------------------------------------- */
.listing { padding-top: clamp(1rem,2vw,2rem); }
.listing__head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:.5rem 1.6rem; }
.listing__head .eyebrow { display:block; margin-bottom:.7rem; color: var(--coral); }
.listing__head h1 { font-size: clamp(2rem,4.5vw,3.4rem); }
.listing__count { color: var(--muted); font-size:.9rem; }
.filterbar { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; padding-block:1.2rem; border-block:1px solid var(--line); margin-bottom: clamp(1.8rem,3vw,2.6rem); }
.fpills { display:flex; gap:.5rem; flex-wrap:wrap; }
.fpill { padding:.55em 1.2em; border:1px solid var(--line); background:transparent; border-radius:100px; cursor:pointer; font-weight:600; font-size:.85rem; transition: background .25s, color .25s, border-color .25s; }
.fpill:hover { border-color: var(--ink); }
.fpill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filterbar__right { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.fcolors { display:flex; align-items:center; gap:.5rem; }
.fdot { width:24px; height:24px; border-radius:100px; background: var(--sw); border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; transition: transform .25s var(--ease), box-shadow .25s; }
.fdot:hover { transform: scale(1.15); }
.fdot.on { box-shadow:0 0 0 2px var(--ink); }
.fdot--any { width:auto; height:auto; padding:.4em .9em; border-radius:100px; background:transparent; box-shadow:none; border:1px solid var(--line); font-size:.78rem; font-weight:600; color: var(--muted); }
.fdot--any.on { border-color: var(--ink); color: var(--ink); }
.fsort { padding:.6em 2.4em .6em 1em; border:1px solid var(--line); border-radius:100px; background: var(--paper-2); font-size:.85rem; font-weight:500; cursor:pointer; appearance:none; -webkit-appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2379746b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right .9em center; }
.listing .pgrid { padding-bottom: clamp(3rem,6vw,5rem); }
.listing__empty { text-align:center; padding: clamp(3rem,7vw,6rem) 1rem; }
.listing__empty p { color: var(--muted); margin-bottom:1.5rem; }
@media (max-width:620px){
  .filterbar { flex-direction:column; align-items:stretch; }
  .filterbar__right { justify-content:space-between; }
}

/* ---- Product detail page -------------------------------------------------- */
#pdp { padding-top: clamp(1rem,2vw,2rem); }
.breadcrumb { font-size:.8rem; color: var(--muted); padding-block: 1.5rem; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { color: var(--ink); }
.pdp { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4.5rem); align-items:start; padding-bottom: clamp(3rem,6vw,5rem); }
.pdp__gallery { position: sticky; top: 96px; }
.pdp__main { aspect-ratio: 4/5; border-radius: var(--r); overflow:hidden; background: var(--paper-2); border:1px solid var(--line-soft); }
.pdp__main img { width:100%; height:100%; object-fit:cover; }
.pdp__thumbs { display:flex; gap:.7rem; margin-top:.7rem; flex-wrap:wrap; }
.thumb { width:74px; height:74px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background: var(--paper-2); cursor:pointer; padding:0; opacity:.65; transition: opacity .3s, border-color .3s; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb.on, .thumb:hover { opacity:1; border-color: var(--ink); }
.pdp__info .eyebrow { display:block; margin-bottom:.8rem; }
.pdp__info h1 { font-size: clamp(2rem,4vw,3rem); line-height:1.02; }
.pdp__rating { color: var(--yellow); letter-spacing:.1em; margin:.9rem 0; font-size:1rem; }
.pdp__rating .rate { color: var(--muted); letter-spacing:0; font-size:.82rem; margin-left:.4rem; }
.pdp__price { display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.2rem; }
.pdp__price .now { font-family:var(--head); font-weight:600; font-size:1.7rem; }
.pdp__price .was { color: var(--muted); text-decoration: line-through; }
.pdp__save { background: var(--coral); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; padding:.35em .7em; border-radius:100px; align-self:center; }
.pdp__blurb { color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.8rem; }
.pdp__opt { margin-bottom: 1.4rem; }
.pdp__optlabel { font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom:.7rem; }
.pdp__optlabel span { color: var(--ink); margin-left:.5rem; text-transform:none; letter-spacing:0; font-weight:500; }
.pdp__swatches { display:flex; gap:.6rem; flex-wrap:wrap; }
.swatch { width:30px; height:30px; border-radius:100px; background: var(--sw); border:2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor:pointer; padding:0; transition: transform .25s var(--ease), box-shadow .25s; }
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.pdp__sizes { display:flex; gap:.5rem; }
.sizebtn { min-width:54px; padding:.55em 1em; border:1px solid var(--line); background: var(--paper-2); border-radius:100px; cursor:pointer; font-weight:600; font-size:.85rem; transition: border-color .25s, background .25s, color .25s; }
.sizebtn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pdp__buy { display:flex; gap:.8rem; margin: 1.8rem 0 1rem; }
.qtybox { display:flex; align-items:center; gap:1rem; border:1px solid var(--line); border-radius:100px; padding:.4rem 1.1rem; }
.qtybox button { background:none; border:none; cursor:pointer; font-size:1.2rem; line-height:1; color: var(--ink); width:18px; }
.qtybox span { min-width:16px; text-align:center; font-weight:600; }
.pdp__add { flex:1; justify-content:center; }
.pdp__ship { font-size:.84rem; color: var(--muted); margin-bottom:1.8rem; }
.pdp__feats { display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.2rem; margin-bottom:2rem; }
.pdp__feats li { display:flex; gap:.6rem; align-items:center; font-size:.9rem; }
.pdp__feats svg { width:16px; height:16px; stroke: var(--mint); flex:none; }
.pdp__acc details { border-top:1px solid var(--line); }
.pdp__acc details:last-child { border-bottom:1px solid var(--line); }
.pdp__acc summary { cursor:pointer; padding:1.1rem 0; font-family:var(--head); font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.pdp__acc summary::-webkit-details-marker { display:none; }
.pdp__acc summary::after { content:"+"; font-weight:400; font-size:1.35rem; color: var(--muted); }
.pdp__acc details[open] summary::after { content:"\2212"; }
.pdp__acc p { padding-bottom:1.2rem; color: var(--ink-soft); font-size:.92rem; max-width:60ch; }
/* personalization */
.pz { border:1px solid var(--line); border-radius: var(--r); padding: 0; margin-bottom: 1.4rem; overflow:hidden; }
.pz__toggle { display:flex; align-items:center; gap:.7rem; padding: 1rem 1.2rem; cursor:pointer; font-weight:600; font-size:.92rem; }
.pz__toggle input { width:18px; height:18px; accent-color: var(--coral); cursor:pointer; }
.pz__title { flex:1; }
.pz__price { color: var(--coral); font-weight:700; font-size:.85rem; }
.pz__panel { padding: 0 1.2rem 1.3rem; border-top:1px solid var(--line-soft); }
.pz__name { width:100%; margin-top:1.1rem; padding:.85em 1em; border:1px solid var(--line); border-radius:10px; font-size:1rem; font-family:var(--head); background: var(--paper-2); outline:none; transition: border-color .2s; }
.pz__name:focus { border-color: var(--ink); }
.pz__charcount { text-align:right; font-size:.72rem; color: var(--muted); margin-top:.35rem; }
.pz__group { margin-top:1rem; }
.pz__lbl { display:block; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-bottom:.55rem; }
.pz__fonts { display:flex; gap:.5rem; flex-wrap:wrap; }
.pzfont { padding:.5em 1.1em; border:1px solid var(--line); background: var(--paper-2); border-radius:100px; cursor:pointer; font-size:1.05rem; line-height:1; transition: border-color .2s, background .2s; }
.pzfont.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pz__threads { display:flex; gap:.5rem; flex-wrap:wrap; }
.pzthread { width:28px; height:28px; border-radius:100px; background: var(--sw); border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; transition: transform .2s var(--ease), box-shadow .2s; }
.pzthread:hover { transform: scale(1.12); }
.pzthread.on { box-shadow:0 0 0 2px var(--ink); }
/* live preview on the product image */
.pdp__main { position: relative; }
.pz-ovl {
  position:absolute; right:24%; bottom:10%; z-index:2; max-width:60%;
  font-size: clamp(1rem, 2.6vw, 1.5rem); line-height:1; white-space:nowrap;
  text-align:right; letter-spacing:.01em; pointer-events:none;
  text-shadow: 0 1px 1.5px rgba(0,0,0,.22);
}

.related { padding-block: clamp(3rem,6vw,5rem); border-top:1px solid var(--line); }
.related .sec__head { margin-bottom: 2rem; }
.related .sec__head h2 { font-size: clamp(1.6rem,3.5vw,2.4rem); }
@media (max-width: 860px){
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }
}
@media (max-width: 520px){ .pdp__feats { grid-template-columns: 1fr; } }

/* ---- Social / Instagram feed ---------------------------------------------- */
.social { background: var(--paper); padding-block: var(--section) 0; }
.social__head { text-align:center; max-width: 760px; margin: 0 auto clamp(2.2rem,4vw,3.2rem); padding-inline: var(--pad); }
.social__head .eyebrow { display:block; margin-bottom:1rem; }
.social__head h2 { font-size: clamp(2rem,4.6vw,3.4rem); }
.social__head h2 a { color: var(--coral); transition: opacity .3s; }
.social__head h2 a:hover { opacity:.75; }
.social__head p { color: var(--muted); margin-top:1.1rem; font-size:.98rem; }
.social__row { display:grid; grid-template-columns: repeat(6,1fr); gap:0; }
.ig { position:relative; aspect-ratio:1/1; overflow:hidden; display:block; background: var(--sand); }
.ig img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.ig:hover img { transform: scale(1.09); }
.ig__ov { position:absolute; inset:0; background: rgba(20,19,16,.45); opacity:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; color:#fff; font-weight:600; font-size:.8rem; letter-spacing:.03em; transition: opacity .45s var(--ease); }
.ig:hover .ig__ov { opacity:1; }
.ig__ov svg { width:26px; height:26px; }
@media (max-width:900px){ .social__row { grid-template-columns: repeat(3,1fr); } }
@media (max-width:520px){ .social__row { grid-template-columns: repeat(2,1fr); } }

/* ---- Collections ---------------------------------------------------------- */
.collections { background: var(--sand); }
.colgrid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(.9rem,1.6vw,1.4rem); }
.coltile { position:relative; border-radius: var(--r); overflow:hidden; aspect-ratio: 4/5; display:block; }
.coltile img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.coltile:hover img { transform: scale(1.06); }
.coltile::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,19,16,.8) 0%, rgba(20,19,16,.12) 52%, rgba(20,19,16,.18) 100%); }
.coltile__cap { position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem; z-index:2; color:#fff; }
.coltile__cap h3 { font-family:var(--head); font-weight:600; font-size:1.42rem; letter-spacing:-.01em; }
.coltile__cap .shop { display:inline-flex; align-items:center; gap:.45em; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:.55rem; opacity:.88; }
.coltile .shop .arr { transition: transform .4s var(--ease); }
.coltile:hover .shop .arr { transform: translateX(5px); }
@media (max-width:900px){ .colgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .colgrid { grid-template-columns: 1fr; } .coltile { aspect-ratio: 16/10; } }

/* ---- Social proof bento --------------------------------------------------- */
.proof { background: var(--paper-2); border-top: 1px solid var(--line-soft); text-align: left; }
.proof__head { text-align: center; margin-bottom: clamp(2.2rem,4vw,3.4rem); }
.proof__head .eyebrow { display:block; margin-bottom: 1rem; }
.proof__head h2 { font-size: clamp(2rem,4.6vw,3.4rem); }
.proof__bento { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(.7rem,1.4vw,1.1rem); grid-auto-rows: minmax(168px,auto); }
.ptile { border-radius: var(--r); padding: 1.7rem 1.6rem; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.ptile--rating { grid-column: span 2; grid-row: span 2; background: var(--ink); color:#fff; justify-content:center; gap:.35rem; }
.ptile--rating .ptile__stars { color: var(--yellow); letter-spacing:.22em; font-size:1.15rem; }
.ptile--rating .ptile__big { font-family: var(--head); font-weight:600; font-size: clamp(3.6rem,8vw,6rem); line-height:1; letter-spacing:-.03em; }
.ptile--rating .ptile__big span { font-size:.3em; color: rgba(255,255,255,.45); }
.ptile--rating p { color: rgba(255,255,255,.72); font-size:.96rem; }
blockquote.ptile { color:#fff; justify-content:flex-start; }
.ptile--coral { background: var(--coral); } .ptile--blue { background: var(--blue); }
.ptile--turq { background: var(--turq); } .ptile--mint { background: var(--mint); }
.ptile__mark { font-family: var(--head); font-weight:700; font-size:2.8rem; line-height:.6; opacity:.32; margin-bottom:.2rem; }
blockquote.ptile p { font-size:.97rem; line-height:1.45; font-weight:500; margin:.2rem 0 auto; }
blockquote.ptile footer { margin-top:1.1rem; }
blockquote.ptile footer b { display:block; font-family:var(--head); font-weight:600; font-size:.9rem; }
blockquote.ptile footer span { font-size:.75rem; opacity:.82; }
.ptile--tag { grid-column: 1 / -1; background: var(--yellow); color: var(--ink); flex-direction:row; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; min-height: 0; }
.ptile--tag .eyebrow { color: var(--ink); opacity:.65; }
.ptile--tag h3 { font-size: clamp(1.4rem,2.7vw,2.1rem); line-height:1.05; }
.ptile--tag .btn { flex:none; }
@media (max-width:900px){
  .proof__bento { grid-template-columns: 1fr 1fr; }
  .ptile--rating { grid-column: 1 / -1; grid-row: span 1; align-items:center; text-align:center; }
  .ptile--tag { grid-column: 1 / -1; }
}
@media (max-width:560px){
  .proof__bento { grid-template-columns: 1fr; }
  .ptile { min-height: 150px; }
  .ptile--tag { flex-direction:column; align-items:flex-start; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .nav { display:none; } .menu-toggle { display:inline-flex; }
  .nav.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; z-index:70;
    background: var(--paper); border-bottom:1px solid var(--line); padding:.6rem var(--pad) 1.2rem;
    box-shadow:0 16px 28px -18px rgba(0,0,0,.35); }
  .nav.open a { padding:.95rem 0; font-size:1.05rem; border-bottom:1px solid var(--line-soft); }
  .nav.open a:last-child { border-bottom:none; }
  .nav.open a::after { display:none; }
  .personalize__grid { grid-template-columns: 1fr; }
  .personalize__media { order:-1; }
  .footer__top { grid-template-columns:1fr 1fr; }
  .attrs__grid { grid-template-columns:1fr 1fr; } .attr:nth-child(3){ border-left:none; }
  .hero__media::after { background: linear-gradient(0deg, var(--paper) 8%, rgba(250,248,243,.55) 45%, transparent 75%); }
  .hero__inner { align-items: flex-end; padding-bottom: 3rem; }
  .hero__text { text-align: left; }
}
@media (max-width: 900px) { .lifegrid { grid-template-columns: 1fr; } .lifecard { aspect-ratio: 16/10; } }
@media (max-width: 720px) {
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .proof__stats { grid-template-columns:1fr 1fr; } .stat:nth-child(3){ border-left:none; }
  .reviews { grid-template-columns:1fr; }
  .footer__top { grid-template-columns:1fr; }
  .hero__media img { object-position: 36% center; }
  /* Bands: stack a near-full-width photo over a solid text panel so wide shots
     keep their width (subject stays in frame) instead of cropping to a sliver. */
  .band { min-height: 0; display: block; }
  .band__media { position: static; aspect-ratio: 16/11; }
  .band__media::after { display: none; }
  .band__inner { position: static; background: var(--ink); padding: 2.6rem var(--pad) 3rem; }
  .band--right .band__inner { justify-content: flex-start; }
  .band__text { max-width: none; }
  .band h2 { margin-top: .4rem; }
}
@media (max-width: 460px) { .pgrid { grid-template-columns:1fr; } .proof__stats { grid-template-columns:1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  * { transition-duration:.01ms !important; }
}