/* ══ CosClub — global design system ══════════════════════════════════════
   Brand kit: soft rounded sans (Quicksand + Nunito), cos-300 / club-900 /
   club-500 / blush-300 / sparkle-300.

   TOKEN STRATEGY
   The five brand tokens below are the source of truth. Everything under
   "legacy aliases" is the OLD vocabulary (--coral, --soft-rose, --baby-blue…)
   remapped onto the new palette, because a dozen PHP templates and four other
   stylesheets already say var(--coral). Aliasing rebrands all of them at once
   and keeps one place to change; deleting them would mean editing every file
   that references one and would break any that got missed.

   CONTRAST
   --cos-300 and --sparkle-300 are BACKGROUNDS ONLY. On white they measure
   1.9:1 and 1.5:1, nowhere near readable, so no rule below ever uses them as
   a text colour. Text is --club-900 (16.6:1 on white) or --club-500 (5.3:1,
   passes AA). Dark text on either pastel clears 10:1.

   The one alias that carries weight is --soft-rose. Page-level stylesheets
   (account.css, shipping.css, membership.php, product.php) still use it as a
   TEXT colour, where the old #7AAFD8 measured 2.3:1 and failed outright.
   It now resolves to --cos-700, which passes AA, so those pages are fixed
   from here without editing any of them.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── brand kit ── */
  --cos-300:#A9C9EC;      /* primary CTAs, active states, primary badges     */
  --club-900:#1A1A1A;     /* headings, brand text, strong emphasis           */
  --club-500:#6B6B6B;     /* body text, nav links, prices                    */
  --blush-300:#F3C6D3;    /* SALE badges only                                */
  --sparkle-300:#BFE3F0;  /* decorative accents, secondary badges            */

  /* supporting neutrals (not brand colours — borders and surfaces) */
  --line:#E8E8E8;
  --surface:#FFFFFF;
  --surface-soft:#F7F9FC;
  --cos-400:#8FB8E3;      /* hover depth under cos-300 BACKGROUNDS           */
  --cos-700:#3D6E96;      /* deep cos — the only blue readable as TEXT (5.6:1)*/

  /* ── typography ── */
  --heading-font:'Quicksand',ui-rounded,'Segoe UI Rounded',system-ui,sans-serif;
  --body-font:'Nunito',system-ui,-apple-system,sans-serif;

  --radius-pill:9999px;
  --radius-card:16px;

  /* ── legacy aliases → new palette ──
     Old name              was          now */
  --charcoal:var(--club-900);        /* #2C2C2C  → #1A1A1A */
  --gray:var(--club-500);            /* #8A8A8A  → #6B6B6B */
  --light-gray:var(--line);          /* #E0E0E0  → #E8E8E8 */
  --blush-pink:var(--cos-300);       /* #A9C9EC  → unchanged, same hex */
  --soft-rose:var(--cos-700);        /* #7AAFD8  → #3D6E96, readable as text */
  --baby-blue:var(--cos-300);        /* #F9C8D0  → primary CTA is blue now */
  --baby-blue-hover:var(--cos-400);
  --off-white:var(--surface);
  /* --coral was the accent for links, prices and hovers. The new kit has no
     warm accent, so emphasis is carried by weight and near-black instead. */
  --coral:var(--club-900);
  --coral-hover:#000000;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--surface);}
body{
  font-family:var(--body-font);background:var(--surface);color:var(--club-500);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
p{color:var(--club-500);}
strong,b{color:var(--club-900);font-weight:700;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--heading-font);margin:0;color:var(--club-900);
  font-weight:700;letter-spacing:-.01em;line-height:1.18;
}
.wrap{max-width:1380px;margin:0 auto;padding:0 5%;}
:focus-visible{outline:2px solid var(--cos-700);outline-offset:2px;}

/* ── announcement ────────────────────────────────────────────────────── */
.announcement{background:var(--club-900);color:#fff;text-align:center;padding:11px;font-size:14px;letter-spacing:.2px;}
.announcement span{color:var(--sparkle-300);font-weight:700;}

/* ── nav: floating pill ──────────────────────────────────────────────── */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:12px 24px;position:sticky;top:12px;z-index:395;
  max-width:1320px;margin:14px auto 0;width:calc(100% - 10%);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-pill);box-shadow:0 2px 14px rgba(26,26,26,.06);
}
.nav-logo img{height:52px;}
.nav-wordmark{
  font-family:var(--heading-font);font-weight:700;font-size:24px;
  letter-spacing:.02em;color:var(--club-900);display:block;line-height:52px;
}
.nav-links{display:flex;gap:28px;font-weight:600;font-size:15px;color:var(--club-500);}
.nav-links a{color:var(--club-500);transition:color .18s;}
.nav-links a:hover{color:var(--club-900);}
.nav-actions{display:flex;align-items:center;gap:18px;}
.nav-ico{cursor:pointer;color:var(--club-900);display:inline-flex;align-items:center;transition:opacity .2s;}
.nav-ico:hover{opacity:.6;}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn-solid,.btn-add,.cc-search-btn,.cc-checkout-btn{
  background:var(--cos-300);color:var(--club-900);
  font-family:var(--body-font);font-weight:700;
  border:none;border-radius:var(--radius-pill);cursor:pointer;
  transition:background .18s,transform .1s;
}
.btn-solid{padding:11px 24px;font-size:14px;}
.btn-solid:hover,.btn-add:hover,.cc-search-btn:hover,.cc-checkout-btn:hover{background:var(--cos-400);}
.btn-solid:active,.btn-add:active{transform:scale(.98);}

.btn-ghost{
  border:1px solid var(--club-900);background:transparent;color:var(--club-900);
  padding:12px 26px;font-weight:700;border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--body-font);font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s,color .18s;
}
.btn-ghost:hover{background:var(--club-900);color:#fff;}

/* ── sections ────────────────────────────────────────────────────────── */
.section{padding:72px 5%;max-width:1380px;margin:0 auto;}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:20px;flex-wrap:wrap;}
.section-header h2{font-size:34px;}
/* Eyebrows were --soft-rose on white (2.3:1). Now readable. */
.section-header .eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--club-500);margin-bottom:8px;}
.section-header a{font-weight:700;color:var(--club-900);font-size:15px;border-bottom:1.5px solid var(--cos-300);padding-bottom:2px;}
.section-header a:hover{border-bottom-color:var(--club-900);}

/* ── product cards ───────────────────────────────────────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
/* Homepage "New in" grid: 4 columns, 16 products. Capped at 1114px and
   centered so the cards match the Shop All page's proportions (its
   #shopGrid sits in a 1380px layout minus a 232px rail and 34px gap =
   ~1114px of content), instead of stretching 4 cards across the full
   ~1380px homepage section. */
#productGrid{grid-template-columns:repeat(4,1fr);max-width:1114px;margin:0 auto;}
@media(max-width:1100px){
  #productGrid{grid-template-columns:repeat(3,1fr);max-width:100%;}
}
.product-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:16px;position:relative;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(26,26,26,.08);border-color:var(--cos-300);}
.product-img{border-radius:12px;aspect-ratio:1/1;overflow:hidden;margin:0 0 16px;background:var(--surface-soft);background-size:cover;background-position:center;}
.product-img img{width:100%;height:100%;object-fit:cover;}
.p-brand{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--club-500);font-weight:700;padding:0 4px;}
.p-name{display:block;font-family:var(--heading-font);color:var(--club-900);font-weight:700;font-size:16px;line-height:1.35;height:44px;overflow:hidden;margin:6px 0 12px;padding:0 4px;}
.p-name:hover{color:var(--club-500);}
.pricing-block{display:flex;border-top:1px solid var(--line);padding:12px 4px;margin-top:auto;margin-bottom:14px;}
.p-col{flex:1;display:flex;flex-direction:column;}
.p-col.member{padding-left:10px;border-left:1px solid var(--line);}
.p-col.retail{padding-right:10px;}
.p-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--club-500);font-weight:700;margin-bottom:3px;}
.retail-val{color:var(--club-500);font-size:14px;text-decoration:line-through;}
/* Prices are --club-500 per the kit; the member figure keeps its weight and
   size so it still reads as the important number without a colour accent. */
.member-val{color:var(--club-900);font-family:var(--heading-font);font-size:20px;font-weight:700;}
.single-price{color:var(--club-500);font-family:var(--heading-font);font-size:20px;font-weight:700;padding:12px 4px;border-top:1px solid var(--line);margin-top:auto;margin-bottom:14px;}

/* "Join to get this price" — a real pill, not a whisper */
.p-memberhint{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-size:12px;font-weight:800;letter-spacing:.01em;
  background:var(--sparkle-300);color:var(--club-900);
  padding:6px 12px;border-radius:var(--radius-pill);
  margin:-4px 4px 12px;transition:background .18s;
}
.p-memberhint:hover{background:var(--cos-300);}

.btn-add{width:100%;padding:13px;font-size:15px;}

/* ── badges ──────────────────────────────────────────────────────────── */
.save-badge,.new-badge,.nav-member,.acct-badge{
  font-family:var(--body-font);font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;
  border-radius:var(--radius-pill);white-space:nowrap;
}
/* SALE — blush, and only here */
.save-badge{position:absolute;top:12px;left:12px;background:var(--blush-300);color:var(--club-900);padding:6px 12px;z-index:2;box-shadow:none;}
/* Sale campaign — card badge + struck-through pre-sale price. */
.promo-badge{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:2px;background:var(--club-900);color:#fff;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.2}
.promo-badge span{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.was-price{text-decoration:line-through;opacity:.55;font-weight:400;margin-right:6px}
.pd-promo{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px}
.pd-promo-badge{background:var(--club-900);color:#fff;padding:4px 9px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.04em}
.pd-promo-txt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.pd-was{text-decoration:line-through;opacity:.55}
/* NEW — sparkle */
.new-badge{position:absolute;top:12px;left:12px;background:var(--sparkle-300);color:var(--club-900);padding:6px 12px;z-index:2;}
/* MEMBER — cos */
.nav-member{display:inline-flex;align-items:center;gap:5px;background:var(--cos-300);border:none;color:var(--club-900);padding:7px 14px;}
.nav-member:hover{background:var(--cos-400);}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{display:flex;align-items:center;background:linear-gradient(to right,var(--surface) 34%,var(--sparkle-300));padding:72px 5%;gap:32px;}
.hero-text{flex:1;min-width:0;}
.hero-text .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);padding:7px 16px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;color:var(--club-900);margin-bottom:22px;}
.hero-text h1{font-size:clamp(2.2rem,4.4vw,3.35rem);line-height:1.1;margin-bottom:16px;}
.hero-text p{color:var(--club-500);font-size:17px;margin-bottom:30px;line-height:1.65;max-width:480px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero-art{flex-shrink:0;width:min(42vw,440px);aspect-ratio:1/1;border-radius:24px;background:var(--surface-soft) center/cover no-repeat;box-shadow:0 24px 60px rgba(26,26,26,.12);}

/* ── hero 4-card panel ───────────────────────────────────────────────────
   Cards were 8–10px type in a 44vw panel: unreadable. Fewer, bigger cards
   with type that survives a glance. */
.hero-trio{flex-shrink:0;display:flex;gap:14px;width:min(62vw,940px);height:min(42vw,480px);}
.ht-card{
  flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:0 8px 28px rgba(26,26,26,.08);opacity:0;
  transition:opacity .4s ease,box-shadow .2s;color:var(--club-900);
  display:flex;flex-direction:column;
}
.ht-card.ht-vis{opacity:1;}
.ht-card:hover{box-shadow:0 16px 40px rgba(26,26,26,.14);}
.ht-img{flex:1;overflow:hidden;min-height:0;}
.ht-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ht-info{padding:12px 13px 14px;flex-shrink:0;}
.ht-brand{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--club-500);margin-bottom:4px;}
.ht-name{font-family:var(--heading-font);font-size:14px;font-weight:700;line-height:1.3;color:var(--club-900);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;}
.ht-pricing{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ht-retail{font-size:12px;text-decoration:line-through;color:var(--club-500);font-weight:600;}
/* Same treatment as .member-val on the grid — one member-price style sitewide */
.ht-member{font-family:var(--heading-font);font-size:15px;font-weight:700;background:none;color:var(--club-900);padding:0;border-radius:0;}
@media(max-width:1180px){
  .hero-trio{width:min(62vw,700px);}
  .hero-trio .ht-card:nth-child(4){display:none;}
}

/* ── brand discoveries ───────────────────────────────────────────────── */
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.brand-card{display:flex;flex-direction:column;color:var(--club-900);border-radius:var(--radius-card);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:transform .2s,box-shadow .2s;}
.brand-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(26,26,26,.1);}
.brand-img{aspect-ratio:4/5;overflow:hidden;background:var(--surface-soft);}
.brand-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.brand-card:hover .brand-img img{transform:scale(1.04);}
.brand-img-placeholder{background:linear-gradient(135deg,var(--sparkle-300),var(--cos-300));}
.brand-name{padding:14px 16px;font-family:var(--heading-font);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--club-900);}

/* ── trust bar / banner ──────────────────────────────────────────────── */
.trust-bar{background:var(--sparkle-300);padding:16px 5%;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-weight:700;font-family:var(--body-font);font-size:14px;color:var(--club-900);}
.trust-bar span{display:flex;align-items:center;gap:8px;}
.mid-banner{background:linear-gradient(135deg,var(--sparkle-300),var(--cos-300));text-align:center;padding:76px 20px;}
.mid-banner h2{font-size:clamp(2rem,3.6vw,2.6rem);margin-bottom:14px;}
.mid-banner p{font-size:18px;margin-bottom:28px;line-height:1.6;color:var(--club-900);}

/* ── category slider ─────────────────────────────────────────────────── */
.cat-slider{position:relative;}
.cat-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 5% 20px;-ms-overflow-style:none;scrollbar-width:none;scroll-padding-left:5%;}
.cat-track::-webkit-scrollbar{display:none;}
.cat-card{position:relative;flex:0 0 clamp(258px,40vw,330px);height:clamp(320px,42vw,410px);border-radius:20px;overflow:hidden;scroll-snap-align:start;background:var(--surface-soft);display:flex;align-items:flex-end;color:#fff;transition:transform .22s,box-shadow .22s;}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(26,26,26,.18);}
.cat-card .cat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform .5s;}
.cat-card .cat-label em{display:block;font-style:normal;font-size:.78rem;font-weight:600;opacity:.9;margin-top:5px;letter-spacing:.04em;}
.cat-card:hover .cat-img{transform:scale(1.05);}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.72),rgba(26,26,26,.06) 58%,transparent);}
.cat-card .cat-label{position:relative;z-index:1;padding:22px 24px;font-family:var(--heading-font);font-weight:700;font-size:1.5rem;line-height:1.1;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4);}
.cat-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--club-900);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(26,26,26,.12);transition:background .15s,opacity .2s,transform .15s;}
.cat-nav:hover{background:#fff;}
.cat-nav:active{transform:translateY(-50%) scale(.94);}
.cat-nav.prev{left:calc(5% - 8px);}.cat-nav.next{right:calc(5% - 8px);}
.cat-nav[hidden]{opacity:0;pointer-events:none;}
@media(max-width:560px){.cat-nav{display:none;}}

/* ── generic ─────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:80px 20px;color:var(--club-500);}
.empty h2{color:var(--club-900);margin-bottom:10px;}
.notice{background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:20px 0;color:var(--club-500);}

/* ── footer ──────────────────────────────────────────────────────────── */
.footer{background:var(--club-900);color:#fff;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding:76px 5%;}
.footer-col h3{margin-bottom:22px;font-size:18px;color:#fff;letter-spacing:.02em;}
.footer-col p,.footer-col a{color:#B4B4B4;font-size:14px;line-height:2.1;display:block;transition:color .2s;}
.footer-col a:hover{color:var(--sparkle-300);}
.social-icons{display:flex;gap:16px;margin-top:18px;}
.social-icons a{color:#fff;display:inline-flex;transition:color .2s;}
.social-icons a:hover{color:var(--sparkle-300);}
.footer-bottom{background:var(--club-900);text-align:center;padding:20px;border-top:1px solid #333;color:#8A8A8A;font-size:13px;}
.footer-embed{background:var(--club-900);display:flex;justify-content:center;padding:4px 5% 22px;}

/* ── search overlay ──────────────────────────────────────────────────── */
.cc-search-overlay{position:fixed;inset:0;background:rgba(26,26,26,.55);z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding-top:120px;opacity:0;pointer-events:none;transition:opacity .2s;}
.cc-search-overlay.open{opacity:1;pointer-events:all;}
.cc-search-box{background:#fff;border-radius:20px;width:90%;max-width:620px;padding:24px;box-shadow:0 24px 60px rgba(26,26,26,.25);transform:translateY(-12px);transition:transform .2s;}
.cc-search-overlay.open .cc-search-box{transform:translateY(0);}
.cc-search-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--club-500);margin-bottom:12px;}
.cc-search-row{display:flex;gap:10px;align-items:center;}
.cc-search-input{flex:1;border:1.5px solid var(--line);border-radius:var(--radius-pill);padding:14px 20px;font-size:16px;font-family:var(--body-font);outline:none;transition:border-color .2s;color:var(--club-900);}
.cc-search-input:focus{border-color:var(--cos-300);box-shadow:0 0 0 3px rgba(169,201,236,.4);}
.cc-search-btn{padding:14px 24px;font-size:14px;white-space:nowrap;}
.cc-search-close{margin-top:14px;text-align:center;font-size:13px;color:var(--club-500);cursor:pointer;}
.cc-search-close:hover{color:var(--club-900);}
.cc-search-hints{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.cc-hint{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s;color:var(--club-900);}
.cc-hint:hover{background:var(--sparkle-300);}

/* ── cart drawer ─────────────────────────────────────────────────────── */
.cc-cart-overlay{position:fixed;inset:0;background:rgba(26,26,26,.4);z-index:9000;opacity:0;pointer-events:none;transition:opacity .25s;}
.cc-cart-overlay.open{opacity:1;pointer-events:all;}
.cc-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:95vw;background:#fff;z-index:9001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(26,26,26,.15);}
.cc-cart-overlay.open .cc-cart-drawer{transform:translateX(0);}
.cc-cart-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);font-family:var(--heading-font);font-weight:700;font-size:18px;color:var(--club-900);}
.cc-cart-header-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--club-500);transition:all .2s;}
.cc-cart-header-close:hover{border-color:var(--club-900);color:var(--club-900);}
.cc-ship-bar{padding:12px 24px;background:var(--surface-soft);font-size:13px;font-weight:700;color:var(--club-900);}
.cc-ship-track{height:6px;background:var(--line);border-radius:var(--radius-pill);margin-top:8px;overflow:hidden;}
.cc-ship-fill{height:100%;background:var(--cos-300);border-radius:var(--radius-pill);transition:width .4s;}
.cc-cart-items{flex:1;overflow-y:auto;padding:16px 24px;}
.cc-cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.cc-cart-item:last-child{border-bottom:none;}
.cc-item-img{width:64px;height:64px;border-radius:12px;background:var(--surface-soft) center/cover no-repeat;border:1px solid var(--line);flex-shrink:0;}
.cc-item-info{flex:1;}
.cc-item-brand{font-size:10px;font-weight:800;color:var(--club-500);text-transform:uppercase;letter-spacing:.08em;}
.cc-item-name{font-family:var(--heading-font);font-size:14px;font-weight:700;color:var(--club-900);margin:2px 0 6px;line-height:1.35;}
.cc-item-pricing{display:flex;align-items:center;gap:8px;}
.cc-item-member{color:var(--club-900);font-weight:700;font-size:14px;}
.cc-item-controls{display:flex;align-items:center;gap:8px;margin-top:8px;}
.cc-qty-btn{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:14px;font-weight:700;color:var(--club-900);display:flex;align-items:center;justify-content:center;transition:all .2s;}
.cc-qty-btn:hover{border-color:var(--club-900);}
.cc-qty-val{font-size:14px;font-weight:700;min-width:20px;text-align:center;color:var(--club-900);}
.cc-remove-btn{margin-left:auto;font-size:12px;color:var(--club-500);cursor:pointer;background:none;border:none;font-family:var(--body-font);transition:color .2s;}
.cc-remove-btn:hover{color:var(--club-900);}
.cc-cart-empty{text-align:center;padding:60px 24px;color:var(--club-500);}
.cc-cart-empty p{margin-top:12px;font-size:14px;}
.cc-cart-empty-icon{font-size:48px;}
.cc-cart-footer{padding:20px 24px;border-top:1px solid var(--line);background:#fff;}
.cc-subtotal{display:flex;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--club-900);}
.cc-subtotal-note{font-size:12px;color:var(--club-500);margin-bottom:16px;}
.cc-checkout-btn{width:100%;padding:15px;font-size:15px;margin-bottom:10px;}
.cc-keep-shopping{text-align:center;font-size:13px;color:var(--club-500);cursor:pointer;transition:color .2s;}
.cc-keep-shopping:hover{color:var(--club-900);}

/* ── category pages ──────────────────────────────────────────────────── */
.cx-crumb{max-width:1380px;margin:0 auto;padding:16px 5% 12px;font-size:13px;color:var(--club-500);display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.cx-crumb a:hover{color:var(--club-900);}
.cx-crumb span{color:var(--line);}
.cx-crumb em{font-style:normal;color:var(--club-900);font-weight:700;}
.cx-hero{position:relative;margin:0 5%;border-radius:20px;overflow:hidden;min-height:clamp(220px,26vw,310px);display:flex;align-items:flex-end;color:#fff;background:var(--surface-soft);}
.cx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cx-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.84),rgba(26,26,26,.34) 62%,rgba(26,26,26,.12));}
.cx-hero-in{position:relative;z-index:1;padding:30px clamp(22px,4vw,44px);max-width:720px;}
.cx-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.94;margin-bottom:9px;}
.cx-hero h1{color:#fff;font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.12;margin-bottom:11px;text-shadow:0 2px 18px rgba(0,0,0,.35);}
.cx-hero p{font-size:15px;line-height:1.62;max-width:560px;opacity:.95;color:#fff;}
.cx-bar{max-width:1380px;margin:22px auto 0;padding:0 5%;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.cx-toolbar{position:relative;margin-top:18px;padding-bottom:18px;}
.cx-toolbar::after{content:"";position:absolute;left:5%;right:5%;bottom:0;height:1px;background:var(--line);}
.cx-count{font-size:14px;font-weight:700;color:var(--club-500);}
.cx-chips{display:flex;gap:9px;flex-wrap:wrap;}
.cx-chip{border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 18px;font-size:13px;font-weight:700;color:var(--club-900);white-space:nowrap;transition:border-color .18s,background .18s;}
.cx-chip:hover{border-color:var(--club-900);}
.cx-chip.on{background:var(--cos-300);border-color:var(--cos-300);color:var(--club-900);}
.cx-chip-n{display:inline-block;margin-left:5px;font-size:11px;font-weight:700;color:var(--club-500);}
.cx-chip.on .cx-chip-n{color:var(--club-900);opacity:.7;}
.cx-sort{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--club-500);}
.cx-sort label{font-weight:700;white-space:nowrap;}
.cx-sort select{padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--club-900);cursor:pointer;outline:none;transition:border-color .18s;}
.cx-sort select:focus,.cx-sort select:hover{border-color:var(--club-900);}
.cx-sort-go{margin-left:6px;padding:10px 18px;border:none;border-radius:var(--radius-pill);background:var(--cos-300);color:var(--club-900);font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
@media(max-width:640px){
  .cx-hero{border-radius:14px;min-height:200px;}
  .cx-toolbar{gap:12px;}
  .cx-sort{width:100%;}
  .cx-sort select{flex:1;}
}

/* ── filter rail ─────────────────────────────────────────────────────── */
.cx-layout{display:grid;grid-template-columns:232px 1fr;gap:34px;align-items:start;max-width:1380px;margin:0 auto;padding:0 5%;}
/* Sticky alone pins the TOP of the rail at 96px and leaves it there — it
   does not make the box itself scrollable. With more groups than fit one
   screen (Quick search, Price, Product type, Category, Member savings,
   Brand, Key ingredient, Skin type, Skin concern), the lower ones were
   rendering below the viewport with no way to reach them except scrolling
   the whole page down to where the rail naturally un-sticks near the grid's
   end. max-height + overflow-y gives the rail its own scrollbar instead, so
   Brand and the rest are one scroll inside the 96px-pinned box away, not a
   scroll through the entire product grid. */
/* The rail is a flex column now, not a single scrolling box: the header
   ("Filters" / Clear all) and the quick-search box are flex-shrink:0, so they
   stay put at the top of the 96px-pinned rail, and only .cx-fscroll — the
   wrapper around Price through Skin concern in shop/index.php — scrolls
   underneath them. Scrollbar hidden rather than styled thin: it still scrolls
   by wheel, trackpad, touch or keyboard, the bar is just not drawn. */
.cx-filters{position:sticky;top:96px;max-height:calc(100vh - 116px);display:flex;flex-direction:column;font-size:14px;}
.cx-filters-head,.shop-qsearch-wrap{flex-shrink:0;}
.cx-fscroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px;scrollbar-width:none;-ms-overflow-style:none;}
.cx-fscroll::-webkit-scrollbar{display:none;}
.cx-filters-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line);}
.cx-filters-head span{font-family:var(--heading-font);font-weight:700;font-size:15px;color:var(--club-900);}
.cx-clear{font-size:12px;font-weight:700;color:var(--club-900);text-decoration:underline;}
.cx-fgroup{border:none;padding:0;margin:0 0 22px;}
.cx-fgroup legend{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--club-500);padding:0;margin-bottom:9px;}
.cx-fgroup ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
.cx-fopt{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 0;min-height:36px;border-radius:8px;color:var(--club-500);cursor:pointer;transition:color .15s;}
.cx-fopt:hover{color:var(--club-900);}
.cx-fbox{width:18px;height:18px;border:1.5px solid var(--line);border-radius:6px;flex-shrink:0;position:relative;transition:all .15s;}
.cx-fopt:hover .cx-fbox{border-color:var(--club-900);}
.cx-fopt.on .cx-fbox{background:var(--cos-300);border-color:var(--cos-300);}
.cx-fopt.on .cx-fbox::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:8px;border:solid var(--club-900);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.cx-flabel{flex:1;line-height:1.35;}
.cx-fopt.on{color:var(--club-900);}
.cx-fopt.on .cx-flabel{font-weight:700;}
.cx-fn{font-size:11.5px;color:var(--club-500);font-weight:600;}
.cx-active{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.cx-apill{display:inline-flex;align-items:center;gap:8px;background:var(--cos-300);color:var(--club-900);border-radius:var(--radius-pill);padding:8px 15px;font-size:12.5px;font-weight:700;min-height:34px;}
.cx-apill span{opacity:.65;font-size:15px;line-height:1;}
.cx-apill:hover span{opacity:1;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.cx-fmob{display:none;}

/* ── responsive ──────────────────────────────────────────────────────── */
@media(max-width:900px){
  .cx-layout{grid-template-columns:1fr;gap:0;}
  /* The desktop scroll-box is for the pinned rail only. Below 900px the rail
     is static and collapses behind the "Filter products" toggle instead, so
     it should expand to its full natural height, not clip to a leftover
     max-height from the desktop rule. */
  .cx-filters{position:static;margin-bottom:18px;max-height:none;display:block;}
  .cx-fscroll{overflow-y:visible;max-height:none;}
  .cx-fmob{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:14px 20px;font:inherit;font-size:14px;font-weight:700;font-family:var(--body-font);color:var(--club-900);cursor:pointer;margin-bottom:14px;min-height:48px;}
  .cx-fmob[aria-expanded="true"]{border-color:var(--club-900);}
  .cx-filters[data-collapsed="1"] .cx-fgroup,.cx-filters[data-collapsed="1"] .cx-filters-head{display:none;}
  /* 44px minimum tap targets */
  .cx-fopt{min-height:44px;padding:11px 6px 11px 0;}
  .cx-fbox{width:20px;height:20px;}
  .cx-fopt.on .cx-fbox::after{left:6.5px;top:3px;}
  .cx-apill{min-height:44px;padding:11px 18px;font-size:13.5px;}
  .cx-chip{min-height:44px;display:inline-flex;align-items:center;}
  .nav{padding:10px 16px;width:calc(100% - 8%);}
  .nav-ico{padding:6px;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .hero{flex-direction:column;text-align:center;}
  .hero-text p{margin-left:auto;margin-right:auto;}
  .hero-btns{justify-content:center;}
  .hero-art{width:min(80vw,360px);}
  .hero-trio{display:none;}
  .brand-grid{grid-template-columns:repeat(2,1fr);}
  .footer{grid-template-columns:1fr 1fr;gap:40px;}
}
@media(max-width:640px){
  .nav-links{display:none;}
  /* Was 1 column here, which put one oversized card per screen and read as
     broken rather than a store shelf. Every mainstream mobile storefront
     (Amazon, Sephora, Shopify defaults) runs 2-up on a phone; this matches
     that and keeps the grid from looking like a single-product landing page. */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .product-card{padding:10px;}
  .product-img{margin:0 0 10px;}
  .p-brand{font-size:9.5px;}
  .p-name{font-size:13.5px;height:36px;line-height:1.3;margin:5px 0 8px;}
  .pricing-block{padding:8px 2px;margin-bottom:10px;}
  .p-label{font-size:8.5px;}
  .retail-val{font-size:12px;}
  .btn-add{padding:10px;font-size:13px;}
  .trust-bar{gap:16px;font-size:13px;}
  .footer{grid-template-columns:1fr;gap:32px;}
  .section{padding:56px 5%;}
  .section-header h2{font-size:27px;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}