/* ============================================================
   Beauty & Beyond SuperCenter — "Daylight"
   Market bones · Gallery typography
   White ground, ink, one magenta. Fraunces + Karla.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --ink:#111111;
  --veil:#F7F3F2;
  --magenta:#A80E2D;
  --magenta-deep:#860A22;
  --blush:#F6E1E3;
  --blush-soft:#FFEFF1;     /* body text on crimson ground (AA) */
  --blush-bright:#FFFFFF;   /* small accent text on ink: white, like the logo's lettering (only the & is crimson) */
  --hair:#EAE2E1;
  --muted:#6C6161;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Karla',-apple-system,'Helvetica Neue',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:16px;
  line-height:1.5;
  overflow-x:clip;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto;width:100%}
.site-footer{margin-top:auto}
::selection{background:var(--blush);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2.5px solid var(--magenta);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:14px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:14px;text-decoration:none;
}
.skip-link:focus{left:14px}

/* ---------- ticker ---------- */
.ticker{background:var(--magenta);color:#fff;overflow:hidden;padding:9px 0;position:relative}
.ticker-track{
  display:flex;width:max-content;
  animation:tick 30s linear infinite;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.ticker.paused .ticker-track{animation-play-state:paused}
.ticker-set{display:flex}
.ticker-track span{white-space:nowrap}
.ticker-track span::after{content:"✦";margin:0 48px;color:var(--blush)}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker::after{ /* fade the scrolling text out under the pause button */
  content:"";position:absolute;right:0;top:0;bottom:0;width:64px;pointer-events:none;
  background:linear-gradient(90deg,rgba(168,14,45,0),var(--magenta) 60%);
}
.ticker-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:1;
  border:0;cursor:pointer;background:rgba(0,0,0,.28);color:#fff;
  border-radius:999px;width:24px;height:24px;font-size:9px;line-height:1;
  display:grid;place-items:center;
}
.ticker-toggle:hover{background:rgba(0,0,0,.45)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--paper);   /* opaque: the pinned "Menu" chip's cover strip must match it (was 94% white, grey over the dark footer) */
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
  transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 34px rgba(17,17,17,.07)}
.header-row{
  max-width:1320px;margin:0 auto;
  display:flex;align-items:center;gap:34px;
  padding:16px 32px 14px;
}
.logo{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1;
  color:var(--ink);text-decoration:none;flex-shrink:0;
}
.logo em{font-style:italic;color:var(--magenta)}
.logo small{
  display:block;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.34em;color:var(--magenta);margin-top:5px;text-transform:uppercase;
}
.search{
  flex:1;display:flex;align-items:center;
  border:1.5px solid var(--hair);border-radius:999px;
  background:var(--paper);
  transition:border-color .18s ease,box-shadow .18s ease;
  overflow:hidden;
}
.search:focus-within{border-color:var(--magenta);box-shadow:0 6px 24px rgba(168,14,45,.12)}
.search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:13px 8px 13px 22px;font-size:16px;font-family:var(--sans);color:var(--ink);
}
.search input::placeholder{color:var(--muted)}
.search button{
  border:0;cursor:pointer;flex-shrink:0;
  background:var(--ink);color:#fff;
  font-family:var(--sans);font-weight:800;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:12px 26px;margin:4px;border-radius:999px;
  transition:background .16s ease;
}
.search button:hover{background:var(--magenta)}
.search button:focus-visible{outline-offset:-4px;outline-color:#fff}
.header-links{display:flex;gap:26px;flex-shrink:0}
.header-links a{
  font-size:14px;font-weight:700;letter-spacing:.03em;
  color:var(--ink);text-decoration:none;transition:color .15s ease;
}
.header-links a:hover{color:var(--magenta)}
/* items in the bag, after "Cart" (site.js, only when 1 or more) */
.cart-n{display:inline-block;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:999px;background:var(--magenta);color:#fff;font:800 11px/18px var(--sans);letter-spacing:0;text-align:center;vertical-align:1px}
/* phones: a bubble on the corner of "Cart" that takes no width, so Visit / Cart still fit beside the logo from 350px */
@media (max-width:760px){
  .header-links a[href*="cart"]{position:relative}
  .cart-n{position:absolute;top:1px;right:-9px;min-width:17px;height:17px;margin:0;padding:0 4px;font-size:10.5px;line-height:17px;box-shadow:0 0 0 2px #fff}
}
/* under 350px logo + Visit + Cart don't fit one row (Visit/Cart dropped to a second row): Visit hides, Cart stays */
@media (max-width:349px){.header-links a[href*="#visit"]{display:none}}

.chip-row{border-top:1px solid var(--hair)}
.chip-row-in{
  max-width:1320px;margin:0 auto;
  display:flex;gap:8px;padding:10px 32px;
  overflow-x:auto;scrollbar-width:none;
}
.chip-row-in::-webkit-scrollbar{display:none}
.chip-row-in a{
  white-space:nowrap;text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:7px 15px;border-radius:999px;border:1px solid transparent;
  transition:all .15s ease;
}
.chip-row-in a:hover{background:var(--blush);color:var(--magenta-deep);border-color:var(--blush)}

/* ---------- hero board ---------- */
.board{
  max-width:1320px;margin:28px auto 0;padding:0 32px;
  display:grid;grid-template-columns:1.65fr 1fr;gap:20px;
}
.hero-card{
  position:relative;overflow:hidden;
  background:var(--veil);border-radius:26px;
  padding:72px 64px;min-height:500px;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-orb{
  position:absolute;right:-90px;top:-110px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--blush) 0%,rgba(246,225,227,.45) 46%,rgba(247,243,242,0) 72%);
  pointer-events:none;
}
.hero-ring{
  position:absolute;right:56px;bottom:-140px;width:330px;height:330px;border-radius:50%;
  border:1.5px dashed rgba(168,14,45,.3);pointer-events:none;
}
.eyebrow{
  position:relative;z-index:1;
  font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:26px;
  animation:rise .7s ease both;
}
.hero-card h1{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(42px,5.4vw,78px);line-height:1.02;letter-spacing:-.022em;
  max-width:13ch;position:relative;z-index:1;
  animation:rise .7s .08s ease both;
}
.hero-card h1 em{font-style:italic;color:var(--magenta)}
.hero-card .lede{
  margin-top:26px;font-size:17px;line-height:1.65;color:var(--muted);
  max-width:46ch;position:relative;z-index:1;
  animation:rise .7s .16s ease both;
}
.lede-short{display:none}
.hero-cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;animation:rise .7s .24s ease both}
.btn{
  display:inline-block;padding:15px 32px;border-radius:999px;
  font-size:13.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;transition:all .18s ease;text-align:center;
}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--magenta);transform:translateY(-2px);box-shadow:0 14px 30px rgba(168,14,45,.28)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{border-color:var(--magenta);color:var(--magenta)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.side-stack{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.side-card{
  position:relative;overflow:hidden;border-radius:26px;padding:72px 34px 36px;
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;
}
.side-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(17,17,17,.13)}
.side-card .badge{
  position:absolute;top:24px;left:34px;
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
}
.side-card h2{
  font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.14;letter-spacing:-.01em;
}
.side-card p{font-size:14px;margin-top:9px;line-height:1.55}
.side-card .go{
  margin-top:16px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.side-card .go::after{content:" →";transition:margin .15s ease}
.side-card:hover .go::after{margin-left:5px}

.side-card--magenta{background:var(--magenta);color:#fff}
.side-card--magenta .badge{background:rgba(0,0,0,.22);color:#fff}
.side-card--magenta p{color:var(--blush-soft)}
.side-card--magenta .go{color:#fff}
.side-card--magenta::after{
  content:"";position:absolute;right:-70px;top:-70px;width:210px;height:210px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.35);
}
.side-card--line{background:var(--paper);border:1.5px solid var(--hair);color:var(--ink)}
.side-card--line:hover{border-color:var(--magenta)}
.side-card--line .badge{background:var(--blush);color:var(--magenta-deep)}
.side-card--line p{color:var(--muted)}
.side-card--line .go{color:var(--magenta)}

/* ---------- stats band ---------- */
.stats{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:64px}
.stats-in{
  max-width:1320px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{padding:38px 26px;border-left:1px solid var(--hair)}
.stat:first-child{border-left:0}
.stat .n{font-family:var(--serif);font-weight:400;font-size:44px;letter-spacing:-.02em;color:var(--magenta);line-height:1}
.stat .l{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* ---------- sections ---------- */
.section{max-width:1320px;margin:0 auto;padding:96px 32px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:44px}
.sec-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,3.8vw,52px);letter-spacing:-.015em;line-height:1.05;
}
.sec-head h2 em{font-style:italic;color:var(--magenta)}
.sec-head .more{
  font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--magenta);text-decoration:none;white-space:nowrap;
}
.sec-head .more:hover{color:var(--magenta-deep)}

/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{
  border:1.5px solid var(--hair);border-radius:20px;
  padding:30px 26px;min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  text-decoration:none;color:var(--ink);background:var(--paper);
  transition:all .16s ease;
}
.cat-card:hover{border-color:var(--magenta);background:var(--blush)}
.cat-card .name{
  display:block;
  font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em;line-height:1.1;
  transition:color .16s ease;
}
.cat-card:hover .name{color:var(--magenta-deep);font-style:italic}
.cat-card .sub{display:block;font-size:13px;color:var(--muted);margin-top:7px;line-height:1.5}
.cat-card .arr{
  align-self:flex-end;color:var(--magenta);font-size:20px;
  transition:transform .16s ease;
}
.cat-card:hover .arr{transform:translateX(5px)}

/* brand wall */
.brand-wall{
  display:grid;grid-template-columns:repeat(6,1fr);
  border:1.5px solid var(--hair);border-radius:22px;overflow:hidden;
  background:var(--hair);gap:1px;
}
.brand-cell{
  display:block;text-decoration:none;
  background:var(--paper);padding:30px 12px;text-align:center;
  font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.005em;
  color:var(--ink);transition:all .18s ease;
}
.brand-cell:hover{background:var(--ink);color:var(--blush-bright);font-style:italic}
.brand-cell--more{color:var(--magenta);font-style:italic}

/* ---------- services band ---------- */
.services{background:var(--veil);margin-top:96px}
.services-in{
  max-width:1320px;margin:0 auto;padding:76px 32px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:56px;
}
.svc .t{
  font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;
}
.svc .t::before{content:"— ";color:var(--magenta)}
.svc p{font-size:14.5px;color:var(--muted);line-height:1.7;max-width:38ch}
.svc a{color:var(--magenta-deep);font-weight:700;text-decoration:none}
.svc a:hover{text-decoration:underline}

/* ---------- visit ---------- */
.visit{max-width:1320px;margin:0 auto;padding:96px 32px}
.visit-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.visit h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,4vw,54px);letter-spacing:-.015em;line-height:1.08;
}
.visit h2 em{font-style:italic;color:var(--magenta)}
.visit .addr{
  font-family:var(--serif);font-size:21px;line-height:1.5;margin-top:28px;
}
.visit .phone{
  display:inline-block;font-family:var(--serif);font-size:clamp(28px,3vw,40px);
  color:var(--magenta);text-decoration:none;margin-top:18px;letter-spacing:-.01em;
}
.visit .phone:hover{color:var(--magenta-deep)}
.visit .hours{font-size:14.5px;color:var(--muted);margin-top:14px;line-height:1.7;max-width:44ch}
.visit .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.map-frame{
  border:1.5px solid var(--hair);border-radius:24px;overflow:hidden;
  aspect-ratio:4/3;background:var(--veil);
}
.map-frame iframe{
  width:100%;height:100%;border:0;display:block;
}

/* ---------- shop page ---------- */
.shop-head{max-width:1320px;margin:0 auto;padding:54px 32px 8px}
.shop-head h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.4vw,60px);letter-spacing:-.018em;line-height:1.04;
}
.shop-head h1 em{font-style:italic;color:var(--magenta)}
.shop-head p{color:var(--muted);font-size:15.5px;margin-top:14px;max-width:60ch;line-height:1.65}
.shop-head p a{color:var(--magenta-deep);font-weight:700;text-decoration:none}
.shop-head p a:hover{text-decoration:underline}
.store-embed{max-width:1320px;margin:0 auto;padding:28px 32px 90px;min-height:70vh}

/* Light-touch Ecwid harmonizing — fonts + accent only.
   Deliberately conservative; deeper theming happens in Ecwid design settings. */
#my-store-141202372,
#my-store-141202372 .ec-size,
#my-store-141202372 .ec-store{font-family:var(--sans)}
#my-store-141202372 h1,#my-store-141202372 h2,#my-store-141202372 h3,
#my-store-141202372 .grid-product__title-inner{font-family:var(--sans);font-weight:700}
#my-store-141202372 .form-control--primary,
#my-store-141202372 .form-control__button--icon-plus{background:var(--ink)}
#my-store-141202372 .form-control--primary:hover{background:var(--magenta)}
#my-store-141202372 .ec-link,#my-store-141202372 a{color:var(--magenta-deep)}

/* ---------- 404 ---------- */
.lost{
  max-width:1320px;margin:0 auto;padding:120px 32px 140px;text-align:center;
}
.lost .big{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(90px,16vw,200px);line-height:1;color:var(--blush);
  -webkit-text-stroke:1.5px var(--magenta);
}
.lost h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);
  letter-spacing:-.015em;margin-top:18px;
}
.lost h1 em{font-style:italic;color:var(--magenta)}
.lost p{color:var(--muted);margin-top:14px;font-size:16px}
.lost .cta-row{display:flex;justify-content:center;gap:14px;margin-top:36px;flex-wrap:wrap}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);margin-top:0;padding:78px 32px 38px}
.site-footer :focus-visible{outline-color:var(--blush-bright)}
.footer-grid{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;
}
.footer-brand{font-family:var(--serif);font-size:26px;font-weight:500;color:#fff;line-height:1.1}
.footer-brand em{font-style:italic;color:var(--magenta)}
.footer-brand small{
  display:block;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.34em;color:var(--blush-bright);margin-top:8px;text-transform:uppercase;
}
.footer-grid p{font-size:14px;line-height:1.75;margin-top:18px}
.footer-grid p a{color:rgba(255,255,255,.72);text-decoration:none}
.footer-grid p a:hover{color:var(--blush-bright)}
.fcol .h{
  font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:16px;
}
.fcol a{display:block;color:rgba(255,255,255,.72);text-decoration:none;font-size:14px;padding:5px 0;transition:color .15s ease}
.fcol a:hover{color:var(--blush-bright)}
.footer-base{
  max-width:1320px;margin:54px auto 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.45);
}
.footer-base a{color:inherit}
.footer-base--compact{margin-top:0;border-top:0}

/* ---------- motion & responsive ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* ticker becomes a static wrapping strip: one copy, all facts visible */
  .ticker-track{width:auto}
  .ticker-set{flex-wrap:wrap;justify-content:center;row-gap:4px}
  .ticker-set--dup,.ticker-toggle,.ticker::after{display:none}
}

@media (max-width:1060px){
  .board{grid-template-columns:1fr}
  .side-stack{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .side-card{min-height:210px}
  .stats-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-left:0;border-top:1px solid var(--hair)}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(even){border-left:1px solid var(--hair)}
  .cat-grid{grid-template-columns:1fr 1fr}
  .brand-wall{grid-template-columns:repeat(3,1fr)}
  .services-in{grid-template-columns:1fr;gap:40px;padding:60px 32px}
  .visit-grid{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}

@media (max-width:760px){
  html{scroll-padding-top:200px}
  .header-row{flex-wrap:wrap;gap:8px;padding:10px 16px 8px}
  .logo{font-size:21px}
  .search{order:3;flex-basis:100%}
  .search-box{order:3;flex-basis:100%}
  .search-box .search{width:100%}
  .search input{padding:11px 8px 11px 18px}
  .search button{padding:10px 20px;margin:3px}
  .chip-row-in{padding:7px 16px}
  .lede-long{display:none}
  .lede-short{display:inline}
  .sec-head{flex-wrap:wrap}
  .header-links{margin-left:auto}
  .chip-row-in{padding:10px 20px}
  .board{margin-top:16px;padding:0 16px;gap:12px}
  /* Compact hero on phones so the pickup card sits in the first screen */
  .hero-card{padding:34px 24px 30px;min-height:0;border-radius:22px}
  .eyebrow{margin-bottom:16px;font-size:11px}
  .hero-card h1{font-size:clamp(34px,9.6vw,42px);max-width:none}
  .hero-card .lede{font-size:15px;line-height:1.55;margin-top:16px}
  .hero-cta{margin-top:22px;gap:10px}
  .hero-cta .btn{flex:1 1 0;padding:13px 12px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
  .side-stack{grid-template-columns:1fr;gap:12px}
  .side-card{padding:54px 24px 26px;border-radius:22px}
  .side-card .badge{top:20px;left:24px}
  .side-card h2{font-size:22px}
  .side-card p{font-size:13.5px}
  .section{padding:72px 20px 0}
  .visit{padding:72px 20px}
  .shop-head{padding:40px 20px 4px}
  .store-embed{padding:22px 8px 70px}
  .cat-grid{grid-template-columns:1fr}
  .cat-card{min-height:0;flex-direction:row;align-items:center}
  .cat-card .arr{align-self:center}
  .brand-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-cell{padding:22px 10px;font-size:15px}
  .stats-in{padding:0 20px}
  .stat{padding:26px 14px}
  .stat .n{font-size:31px}
  .stat .l{font-size:11px;letter-spacing:.12em}
  /* two columns: address across the top, then Shop beside Store + Help (was one 1,260px column) */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .footer-grid>:first-child{grid-column:1/-1}
  .footer-grid>.fcol:nth-child(2){grid-column:1;grid-row:2/span 2}
  .footer-grid>.fcol:nth-child(3){grid-column:2;grid-row:2}
  .footer-grid>.fcol:nth-child(4){grid-column:2;grid-row:3}
  .site-footer{padding:60px 20px 32px}
  .footer-base{flex-direction:column;gap:6px}
}

/* ---------- hours ---------- */
.hours-list{display:grid;grid-template-columns:auto auto;gap:6px 28px;width:max-content;margin-top:22px}
.hours-list div{display:contents}
.hours-list dt{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-self:baseline}
.hours-list dd{font-family:var(--serif);font-size:20px;letter-spacing:-.01em}
.footer-hours{font-size:13px!important;line-height:1.6!important;margin-top:12px!important;color:rgba(255,255,255,.55)}

/* ---------- catalog pages (generated: /categories/*, /brands/*) ---------- */
.catalog{max-width:1320px;margin:0 auto;padding:44px 32px 96px}
.crumbs{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--magenta)}
.crumbs span::before{content:"›";margin-right:8px;color:var(--hair)}
.crumbs span:first-child::before{content:none}
.catalog h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.6vw,62px);letter-spacing:-.02em;line-height:1.04;margin-top:22px;
}
.catalog h1 em{font-style:italic;color:var(--magenta)}
.catalog .lede{color:var(--muted);font-size:16.5px;line-height:1.65;max-width:62ch;margin-top:16px}
.catalog .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.facet{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.facet .facet-label{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.facet a{
  text-decoration:none;color:var(--ink);font-size:13px;font-weight:700;min-height:40px;display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;background:var(--veil);transition:all .15s ease;
}
.facet a:hover{background:var(--blush);border-color:var(--blush);color:var(--magenta-deep)}
.facet a small{font-weight:500;color:var(--muted);margin-left:4px}

.plist{width:100%;border-collapse:collapse;margin-top:36px;font-size:14.5px}
.plist th{
  text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 12px 0;border-bottom:1.5px solid var(--ink);
}
.plist td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.plist td.price{white-space:nowrap;font-family:var(--serif);font-size:17px;text-align:right;padding-right:0}
.plist th.price{text-align:right;padding-right:0}
.plist td.brand{color:var(--muted);white-space:nowrap}
.plist td.brand a{color:var(--muted);text-decoration:none}
.plist td.brand a:hover{color:var(--magenta)}
.plist a.pname{color:var(--ink);text-decoration:none;font-weight:600}
.plist a.pname:hover{color:var(--magenta)}
.plist .oos{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.plist tr:hover td{background:var(--veil)}
.plist td.thumbcell,.plist th.thumbcell{width:48px;padding-right:14px}
.pthumb{display:block;width:48px;height:48px;border-radius:10px;border:1px solid var(--hair);object-fit:contain;background:#fff}
.pthumb--none{background:var(--veil);border-color:var(--veil)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.group-h{
  font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em;
  margin-top:48px;padding-bottom:10px;border-bottom:1.5px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.group-h a{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);text-decoration:none;white-space:nowrap}
.group-h a:hover{color:var(--magenta-deep)}
.group-h + .plist{margin-top:0}
.group-h + .plist th{display:none}

.index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.index-grid .cat-card .count{font-size:13px;color:var(--muted);margin-top:7px}
.az{margin-top:40px;columns:4;column-gap:32px}
.az .letter{break-inside:avoid;margin-bottom:26px}
.az .letter h2{font-family:var(--serif);font-size:30px;color:var(--magenta);font-weight:400;line-height:1;margin-bottom:10px}
.az .letter a{display:block;color:var(--ink);text-decoration:none;font-size:14.5px;padding:4px 0}
.az .letter a:hover{color:var(--magenta)}
.az .letter a small{color:var(--muted);margin-left:5px;font-size:12.5px}

/* policy pages (generated: /returns, /privacy, /terms) */
.catalog.policy{max-width:820px}
.policy-updated{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-top:16px}
.policy-body{margin-top:28px;font-size:16.5px;line-height:1.7}
.policy-body h2{
  font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em;line-height:1.2;
  margin-top:40px;padding-top:20px;border-top:1px solid var(--hair);
}
.policy-body p,.policy-body ul{margin-top:12px}
.policy-body ul{padding-left:22px}
.policy-body li{margin-top:8px;padding-left:4px}
.policy-body li::marker{color:var(--magenta)}
.policy-body a{color:var(--ink);text-decoration-color:var(--magenta);text-underline-offset:3px}
.policy-body a:hover{color:var(--magenta)}
.policy-body a.tel{white-space:nowrap}
.policy-more{margin-top:52px;padding-top:20px;border-top:1.5px solid var(--ink);font-size:14.5px;color:var(--muted)}
.policy-more a{color:var(--ink);font-weight:700;text-decoration-color:var(--magenta);text-underline-offset:3px}
.policy-more a:hover{color:var(--magenta)}

@media (max-width:1060px){
  .index-grid{grid-template-columns:1fr 1fr}
  .az{columns:2}
}
@media (max-width:760px){
  .catalog{padding:32px 20px 72px}
  .index-grid{grid-template-columns:1fr}
  .az{columns:1}
  .plist td.brand{display:none}
  .plist th.brand{display:none}
  .plist{font-size:14px}
  .hours-list{gap:4px 20px}
  .hours-list dd{font-size:18px}
}

/* ============================================================
   v2 preview upgrades — search answers, compact header, aisles,
   open-now, catalog tiles, refine, motion, footer name
   ============================================================ */

/* ---------- search box + answer panel ---------- */
.search-box{flex:1;position:relative;min-width:0}
.search-panel{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:90;
  background:var(--paper);border:1.5px solid var(--hair);border-radius:22px;
  box-shadow:0 18px 44px rgba(17,17,17,.12);padding:14px 16px 12px;
}
.search-answers:empty{display:none}
.search-answers{display:grid;gap:4px;margin-bottom:10px}
.ans{
  display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);
  font-size:14.5px;padding:10px 12px;border-radius:12px;
}
.ans em{font-family:var(--serif);font-style:italic;color:var(--magenta);font-size:17px}
.ans span{margin-left:auto;color:var(--magenta)}
.ans:hover,.ans.is-active{background:var(--veil)}
.ans--search{color:var(--muted)}
.search-ask-label{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.search-ask{display:flex;flex-wrap:wrap;gap:6px}
.search-ask button{
  border:0;background:var(--veil);color:var(--ink);cursor:pointer;min-height:40px;
  font-family:var(--sans);font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;
}
.search-ask button:hover{background:var(--blush);border-color:var(--blush);color:var(--magenta-deep)}
.search-counter{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.search-counter a{color:var(--magenta-deep);font-weight:700;text-decoration:none}

/* ---------- compact header on scroll ---------- */
.header-row{transition:padding .25s ease}
.logo{transition:font-size .25s ease}
.site-header.scrolled .header-row{padding:9px 32px 8px}
.site-header.scrolled .logo{font-size:19px}
.site-header.scrolled .logo small{display:none}

/* ---------- chips: scroll affordance + active state ---------- */
.chip-row-in{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
.chip-row-in a{scroll-snap-align:start;min-height:40px;display:inline-flex;align-items:center}
.chip-row-in:focus-within{-webkit-mask-image:none;mask-image:none}
.chip-row-in a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- open-now pill + utility line ---------- */
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.open-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1.5px solid currentColor;border-radius:999px;letter-spacing:.18em}
.open-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.open-pill.is-closed{color:var(--muted)}
.utility{display:none}
[data-open-state].is-open{color:var(--magenta)}

/* ---------- aisles ---------- */
.eyebrow--serif{font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.aisle{margin-top:34px}
.aisle:first-of-type{margin-top:0}
.aisle-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aisle .cat-card{min-height:118px;padding:22px 22px}
.cat-card .name{font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:-.01em}
.cat-card:hover .name{font-style:normal}

/* ---------- serif rationing ---------- */
.svc .t{font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.01em}
.hours-list dd{font-family:var(--sans);font-weight:800;font-size:17px}

/* ---------- brand wall honesty ---------- */
.brand-cell--soon{color:var(--muted)}
.brand-cell--soon::after{content:"in store";display:block;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.brand-cell--soon:hover{background:var(--veil);color:var(--ink);font-style:normal}

/* ---------- catalog: tile grid ---------- */
.catalog .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:30px}
.refine{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.refine .facet-label{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.refine button{
  border:0;background:var(--veil);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;min-height:40px;
}
.refine button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sortbar{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sortbar select{font-family:var(--sans);font-size:13px;font-weight:700;padding:9px 14px;min-height:40px;border-radius:999px;border:0;background:var(--veil);color:var(--ink)}
.pcount{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 16px;margin-top:26px}
.ptile{display:block;text-decoration:none;color:var(--ink)}
.ptile .well{display:grid;place-items:center;aspect-ratio:1;background:var(--veil);border-radius:16px;padding:10%;position:relative;overflow:hidden}
.ptile .well img{width:100%;height:100%;min-height:0;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s ease}
.ptile:hover .well img{transform:scale(1.04)}
.ptile .mono{font-family:var(--serif);font-size:44px;color:var(--magenta);opacity:.55}
.ptile .brand{display:block;margin-top:10px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ptile .pname{display:block;margin-top:3px;font-size:14px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ptile .price{display:block;margin-top:6px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.ptile .variants{color:var(--muted);font-weight:500;font-size:12.5px;margin-left:6px}
.ptile.is-oos{opacity:.62}
.badge--muted{position:absolute;left:10px;top:10px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:#fff;color:var(--muted);padding:5px 8px;border-radius:999px;border:1px solid var(--hair)}
.pgrid-empty{margin-top:28px;color:var(--muted)}
.group-h{scroll-margin-top:70px}
.jumps{position:sticky;top:var(--hdr,130px);z-index:5;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 0;margin-top:26px;background:var(--paper)}
.jumps::-webkit-scrollbar{display:none}
.jumps a{white-space:nowrap;text-decoration:none;color:var(--ink);font-size:13px;font-weight:700;padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;border-radius:999px;background:var(--veil)}
.jumps a:hover{background:var(--blush);border-color:var(--blush);color:var(--magenta-deep)}
.jumps a small{color:var(--muted);margin-left:5px;font-weight:600}
.index-grid{grid-auto-rows:minmax(150px,auto)}
.cat-card--wide{grid-column:span 2}
.cat-card .bubble{width:64px;height:64px;border-radius:50%;background:var(--veil);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.cat-card .bubble img{width:100%;height:100%;min-height:0;object-fit:contain;mix-blend-mode:multiply;padding:8px}
.cat-card--pic{flex-direction:row;align-items:center;gap:18px;min-height:0}
.azrail{position:sticky;top:var(--hdr,130px);z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0;margin-top:26px;background:var(--paper)}
.azrail::-webkit-scrollbar{display:none}
.azrail a{text-decoration:none;color:var(--ink);font-weight:800;font-size:13px;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:var(--veil);flex-shrink:0}
.azrail a:hover{background:var(--ink);color:#fff}
.az .letter{scroll-margin-top:70px}

/* ---------- quiet motion ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js [data-rv]:not(.in):not(:focus-within)>*{opacity:0;transform:translateY(12px)}
  [data-rv]>*{transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--i,0)*45ms)}
}

/* ---------- large-name footer ---------- */
.site-footer{position:relative;overflow:hidden}
.footer-name{
  font-family:var(--serif);font-weight:500;font-size:clamp(40px,11.5vw,220px);line-height:1.08;letter-spacing:-.03em;
  color:rgba(255,255,255,.07);white-space:nowrap;overflow:visible;margin:-34px 0 6px -4px;pointer-events:none;
}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .aisle-row{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .search-box{order:3;flex:0 0 100%;width:100%}
  .ticker{display:none}
  .utility{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0;padding:8px 16px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em}
  .utility [data-open-state].is-open{color:var(--blush-bright)}
  /* the dark address strip (34px) scrolls away; logo, search and chips stay pinned. Cart stays, only Visit hides */
  body:not([data-shop-page]) .site-header{top:-34px}
  .site-header.scrolled .header-row{padding:6px 16px 4px}
  .site-header.scrolled .header-links a[href*="#visit"]{display:none}
  .chip-row-in a{min-height:40px;display:inline-flex;align-items:center}
  .search-panel{max-height:60vh;overflow:auto}
  .aisle-row{display:flex;overflow-x:auto;scrollbar-width:none;gap:10px;margin:0 -20px;padding:0 20px;scroll-snap-type:x proximity}
  .aisle-row::-webkit-scrollbar{display:none}
  .aisle .cat-card{flex:0 0 78%;scroll-snap-align:start;flex-direction:row;align-items:center;min-height:0}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .sortbar{margin-left:0;width:100%}
  body:not([data-shop-page]) .jumps,body:not([data-shop-page]) .azrail{top:calc(var(--hdr,160px) - 34px)}
  .group-h,.az .letter{scroll-margin-top:16px}
  .group-h{flex-wrap:wrap;gap:4px 16px}
  .group-h a{white-space:normal}
  .cat-card--wide{grid-column:auto}
  .utility span:last-child{display:none}
  .footer-name{margin-top:-8px}
}

/* ============================================================
   VARIANT C — "Editorial motion" (appended block; additive only)
   Four moments: masked line reveals on headlines, a gliding
   chip underline, a typographic brand marquee, and a counter
   picks rail with pointer tilt. All gated by reduced motion.
   ============================================================ */

/* ---------- 1. masked line-by-line reveal ---------- */
.split .ln{display:block;overflow:hidden;padding:.12em .14em .18em .06em;margin:-.12em -.14em -.18em -.06em}
.split .ln-in{display:block}
@media (prefers-reduced-motion:no-preference){
  html.vm:not(.vm-static) [data-split]:not(.split){opacity:0}
  html.vm .hero-card h1{animation:none}
  html.vm .hero-card:not(.hero-ready) .eyebrow,
  html.vm .hero-card:not(.hero-ready) .lede,
  html.vm .hero-card:not(.hero-ready) .hero-cta{animation-play-state:paused}
  .split .ln-in{transform:translateY(130%);transition:transform 1s cubic-bezier(.22,.8,.16,1);transition-delay:calc(var(--l,0)*95ms)}
  .split.in .ln-in{transform:none}
}

/* ---------- 2. gliding chip underline (tubelight, no glow) ---------- */
.chip-row-in{position:relative}
.chip-glide{
  position:absolute;left:0;bottom:5px;height:2px;width:100px;border-radius:2px;
  background:var(--magenta);transform-origin:0 50%;transform:translateX(0) scaleX(0);
  opacity:0;pointer-events:none;
}
.chip-glide.is-on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .chip-glide{transition:transform .42s cubic-bezier(.3,.85,.2,1),opacity .22s ease}
  .chip-glide.no-glide{transition:opacity .22s ease}
}

/* ---------- 3. brand marquee ---------- */
.brand-marquee{margin-top:-10px}
.marquee-row{overflow:hidden;padding:10px 0}
.marquee-row + .marquee-row{border-top:1px solid var(--hair)}
.marquee-track{display:flex;width:auto}
.marquee-set{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;flex:1 1 100%;min-width:0}
.marquee-set a{
  display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(30px,4.4vw,60px);letter-spacing:-.018em;line-height:1.15;
  padding:4px 0;transition:color .18s ease;
}
.marquee-set a::after{content:"";width:.2em;height:.2em;border-radius:50%;background:var(--magenta);margin:0 .55em;flex-shrink:0}
.marquee-set a:hover{color:var(--magenta)}
.marquee-set a:focus-visible{outline-offset:-2px;border-radius:8px}
html.vm .brand-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
html.vm .marquee-track{width:max-content;animation:mq-left var(--dur,60s) linear infinite}
html.vm .marquee-row[data-dir="right"] .marquee-track{animation-name:mq-right}
html.vm .marquee-set{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start}
.brand-marquee:hover .marquee-track,
.brand-marquee:focus-within .marquee-track,
.brand-marquee.paused .marquee-track{animation-play-state:paused}
@keyframes mq-left{to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.brand-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);
}
.brand-instore{font-size:13.5px;color:var(--muted);line-height:1.65;max-width:78ch;margin:0}
.brand-instore .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-right:6px}
.marquee-toggle{
  flex-shrink:0;cursor:pointer;min-height:40px;padding:8px 16px;border-radius:999px;
  border:1.5px solid var(--hair);background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;transition:border-color .15s ease,color .15s ease;
}
.marquee-toggle::before{content:"❚❚";font-size:8px;letter-spacing:0}
.marquee-toggle[aria-pressed="true"]::before{content:"▶"}
.marquee-toggle:hover{border-color:var(--magenta);color:var(--magenta-deep)}
html:not(.vm) .marquee-toggle{display:none}
html:not(.vm) .marquee-set a:last-child::after{display:none} /* static wrap: no trailing dot */

/* ---------- 4. counter picks rail ---------- */
.picks .sec-head{margin-bottom:20px}
.picks-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:18px}
.picks-note{color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch;margin:0}
.rail-nav{display:flex;gap:8px;flex-shrink:0}
.rail-btn{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--hair);background:var(--paper);color:var(--ink);
  font-size:18px;line-height:1;display:grid;place-items:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.rail-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rail-btn[disabled]{opacity:.3;cursor:default;pointer-events:none}
.rail{position:relative}
.rail-track{
  list-style:none;margin:0 -8px;padding:8px 8px 26px;
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail-track::-webkit-scrollbar{display:none}
.rail-track li{flex:0 0 calc((100% - 16px*4)/4.4);min-width:0;scroll-snap-align:start}
.pick{display:block;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.pick .well{
  display:grid;place-items:center;aspect-ratio:1;background:var(--veil);border-radius:20px;padding:12%;
  position:relative;overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.pick.is-tilting .well{transition:transform .09s linear,box-shadow .35s ease}
.pick .well img{
  width:100%;height:100%;min-height:0;object-fit:contain;mix-blend-mode:multiply;
  transform:translate(var(--px,0px),var(--py,0px)) scale(var(--s,1));
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.pick.is-tilting .well img{transition:transform .09s linear}
.pick:hover .well{box-shadow:0 26px 44px -22px rgba(17,17,17,.32)}
.pick:hover .well img{--s:1.05}
.pick .brand{display:block;margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pick .pname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:14.5px;font-weight:700;line-height:1.3}
.pick .price{display:block;margin-top:6px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.pick:hover .pname{color:var(--magenta-deep)}

/* ---------- variant: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .chip-glide{display:none}
  html.vm .brand-marquee{-webkit-mask-image:none;mask-image:none}
  html.vm .marquee-track{width:auto;animation:none}
  html.vm .marquee-set{flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:center;row-gap:2px}
  .marquee-set--dup,.marquee-toggle{display:none!important}
  html.vm .marquee-set a:last-child::after{display:none}
  .pick .well,.pick .well img{transform:none}
}

/* ---------- variant: responsive ---------- */
@media (max-width:1060px){
  .rail-track li{flex-basis:calc((100% - 16px*2)/2.6)}
}
@media (max-width:760px){
  .chip-glide{bottom:4px}
  .marquee-row{padding:6px 0}
  .marquee-set a{font-size:clamp(28px,8.4vw,34px)}
  .brand-foot{margin-top:16px;align-items:flex-start}
  .brand-instore{font-size:13px}
  .picks-bar{flex-wrap:wrap}
  .rail-nav{display:none}
  .rail-track{margin:0 -20px;padding:6px 20px 18px;gap:12px;scroll-padding-inline:20px}
  .rail-track li{flex-basis:calc((100% - 12px)/1.55)}
  .pick .well{border-radius:16px}
  .pick .brand{margin-top:10px;font-size:11px}
  .pick .pname{font-size:14px}
}

/* ===== from variant A: product mosaic hero ===== */

/* ============================================================
   VARIANT A: "Product mosaic hero"
   Hero orb/ring replaced by an editorial wall of real pack shots
   (white wells, hairline borders). Side cards reflow under it on
   desktop; on phones the wall becomes one snapping row of 6.
   Motion: transform/opacity only, gated by prefers-reduced-motion.
   ============================================================ */

.board--mosaic{grid-template-columns:1fr;gap:20px}
.hero-card--mosaic{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;gap:56px;
  padding:52px 56px 44px 64px;min-height:0;
}
.hero-card--mosaic .hero-orb,.hero-card--mosaic .hero-ring{display:none}
.hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero-card--mosaic h1{font-size:clamp(40px,4.5vw,66px);max-width:12ch}
.hero-card--mosaic .lede{margin-top:22px;font-size:16.5px;max-width:42ch}
.hero-card--mosaic .hero-cta{margin-top:32px}

/* the wall */
.hero-wall{min-width:0;position:relative;z-index:1}
.hero-mosaic{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:10px;aspect-ratio:4/3.55;
}
.mz-tile{
  display:block;min-width:0;min-height:0;text-decoration:none;color:var(--ink);
  transform:translateY(calc(var(--py,0) * var(--d,0) * 1px));
  will-change:transform;
}
.mz-in{display:block;position:relative;height:100%;border-radius:14px;overflow:hidden;background:var(--paper);border:1px solid var(--hair);transition:border-color .18s ease,box-shadow .18s ease}
.mz-tile:hover .mz-in,.mz-tile:focus-visible .mz-in{border-color:var(--magenta);box-shadow:0 10px 26px rgba(168,14,45,.12)}
.mz-well{display:block;position:absolute;inset:0;padding:9%}
.mz-well img{width:100%;height:100%;min-height:0;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s ease}
.mz-tile:hover .mz-well img{transform:scale(1.06)}
.mz-price{
  position:absolute;left:8px;bottom:8px;z-index:2;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  background:var(--paper);border:1px solid var(--hair);border-radius:999px;padding:3px 7px;
  transition:opacity .18s ease;
}
.mz-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:7px 9px 8px;background:var(--paper);border-top:1px solid var(--hair);
  font-size:11.5px;line-height:1.3;
  transform:translateY(101%);transition:transform .22s ease;
}
.mz-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;min-width:0}
.mz-cap-price{font-weight:800;color:var(--magenta-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.mz-tile:hover .mz-cap,.mz-tile:focus-visible .mz-cap{transform:none}
.mz-tile:hover .mz-price,.mz-tile:focus-visible .mz-price{opacity:0}
.mz-note{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:right}
.mz-note a{color:var(--magenta-deep);font-weight:800;text-decoration:none;letter-spacing:.04em}
.mz-note a:hover{color:var(--magenta)}

/* placement (4 x 4) + parallax depth per column */
.mz-tile.t1{grid-area:1/1/3/2;--d:-1}      /* wig, tall */
.mz-tile.t2{grid-area:1/2/2/3;--d:.55}     /* lash */
.mz-tile.t3{grid-area:1/3/2/4;--d:-.45}    /* edge tamer jar */
.mz-tile.t4{grid-area:3/2/5/3;--d:.55}     /* shampoo, tall */
.mz-tile.t5{grid-area:1/4/3/5;--d:.85}     /* bundle, tall */
.mz-tile.t6{grid-area:2/2/3/3;--d:.55}     /* press-on set */
.mz-tile.t7{grid-area:3/1/5/2;--d:-1}      /* ponytail, tall */
.mz-tile.t8{grid-area:2/3/3/4;--d:-.45}    /* black soap */
.mz-tile.t9{grid-area:3/3/4/4;--d:-.45}    /* braid pack */
.mz-tile.t10{grid-area:3/4/4/5;--d:.85}    /* castor oil */
.mz-tile.t11{grid-area:4/3/5/4;--d:-.45}   /* bonnet */
.mz-tile.t12{grid-area:4/4/5/5;--d:.85}    /* miracle edges */

/* staggered arrival (inner wrapper, so it never fights the parallax transform) */
@media (prefers-reduced-motion:no-preference){
  .mz-in{animation:mz-rise .6s ease both;animation-delay:calc(.18s + var(--k,0) * 55ms)}
  @keyframes mz-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
}

/* side cards ride under the wall on desktop */
.board--mosaic .side-stack{grid-template-rows:none;grid-template-columns:1fr 1fr}
.board--mosaic .side-card{padding:60px 34px 30px;min-height:0}

@media (max-width:1060px){
  .hero-card--mosaic{grid-template-columns:1fr;gap:40px;padding:48px 40px 40px}
  .hero-card--mosaic h1{max-width:14ch}
  .hero-mosaic{aspect-ratio:4/3.3}
}

@media (max-width:760px){
  .hero-card--mosaic{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:30px 22px 26px}
  .hero-copy{display:contents}
  .hero-card--mosaic .eyebrow{display:none}
  .hero-card--mosaic h1{order:1;max-width:none}
  .hero-card h1{text-wrap:balance}
  .hero-wall{order:2;margin:16px -22px 0;padding:0 22px}
  .hero-card--mosaic .hero-cta{order:3;margin-top:20px}
  .hero-card--mosaic .lede{order:4;margin-top:18px}
  .hero-mosaic{
    display:flex;aspect-ratio:auto;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 -22px;padding:0 22px 4px;
  }
  .hero-mosaic::-webkit-scrollbar{display:none}
  .mz-tile{flex:0 0 120px;scroll-snap-align:start;transform:none;will-change:auto}
  .mz-tile:nth-child(n+7){display:none}
  .mz-in{display:flex;flex-direction:column;height:auto;overflow:visible;border:0;background:transparent;border-radius:0}
  .mz-tile:hover .mz-in,.mz-tile:focus-visible .mz-in{box-shadow:none}
  .mz-well{position:relative;inset:auto;aspect-ratio:1;min-height:0;border:1px solid var(--hair);border-radius:14px;background:var(--paper);padding:0;overflow:hidden}
  .mz-well img{position:absolute;left:10%;top:10%;width:80%;height:80%}
  .mz-tile:hover .mz-well,.mz-tile:focus-visible .mz-well{border-color:var(--magenta)}
  .mz-price{display:none}
  .mz-cap{position:static;transform:none;transition:none;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 2px 0;border:0;background:transparent;font-size:11.5px}
  .mz-name{-webkit-line-clamp:1;font-weight:700}
  .mz-cap-price{font-size:12px}
  .mz-note{display:none}
  .board--mosaic .side-stack{grid-template-columns:1fr}
  .board--mosaic .side-card{padding:54px 24px 26px}
  .board--mosaic .side-card--line{display:none}
  /* homepage categories: all 12 on screen as a 2-column grid (the brand rails keep swiping) */
  #categories .aisle-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  #categories .aisle .cat-card{min-width:0;padding:16px 14px;gap:8px}
  #categories .cat-card .name{font-size:16px}
  #categories .cat-card .sub{display:none}
}
@media (max-width:360px){#categories .cat-card .arr{display:none}}

/* ---------- print: nothing stays hidden behind a reveal ---------- */
@media print{
  html.vm [data-split]{opacity:1!important}
  .split .ln-in{transform:none!important;transition:none!important}
  [data-rv]{opacity:1!important;transform:none!important}
  .install-bar{display:none!important}
}

/* ---------- PWA install bar (homepage only, dismissible) ---------- */
.install-bar{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:60;
  display:flex;align-items:center;gap:12px;
  background:#fff;color:var(--ink);border:1px solid #E7DFDE;border-radius:16px;
  box-shadow:0 12px 40px rgba(17,17,17,.14);padding:12px 12px 12px 14px;
  transform:translateY(calc(100% + 24px));transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.install-bar.is-on{transform:none}
.install-bar img{width:40px;height:40px;border-radius:10px;flex:0 0 auto}
.install-bar .t{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.3}
.install-bar .t strong{display:block;font-weight:700}
.install-bar .t span{color:#555}
.install-bar .go{flex:0 0 auto;background:var(--magenta);color:#fff;border:0;border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer}
.install-bar .go:hover{background:var(--magenta-deep)}
.install-bar .x{flex:0 0 auto;background:none;border:0;color:#555;font-size:22px;line-height:1;padding:4px 6px;cursor:pointer;min-width:44px;min-height:44px;margin:-7px -6px -7px 0}
.install-bar .x:hover{color:var(--ink)}
@media (min-width:761px){.install-bar{left:auto;right:24px;bottom:24px;max-width:420px}}

/* shop page: the store's own checkout bar sticks to the top, so our header scrolls away there instead of overlapping it */
body[data-shop-page] .site-header{position:relative}

/* back button, only in the home-screen app (no browser buttons there) */
.app-back{display:none}
html.is-app .app-back{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;margin-right:-14px;border:1.5px solid var(--hair);border-radius:50%;
  background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;padding:0 0 3px 0;
}
html.is-app .app-back:hover{border-color:var(--ink)}
html.is-app.at-home .app-back{visibility:hidden}

/* ---------- members: join card (all pages but /shop) + welcome code (on /shop once signed in) ---------- */
.member-card{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:90;
  max-height:calc(100svh - 24px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;color:var(--ink);border:1px solid #E7DFDE;border-radius:20px;
  box-shadow:0 18px 50px rgba(17,17,17,.18);padding:22px 22px 18px;
  transform:translateY(calc(100% + 24px));transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.member-card.is-on{transform:none}
.member-card .k{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.member-card h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-.01em;margin-top:8px;padding-right:28px}
.member-card h2 em{color:var(--magenta)}
.member-card p{font-size:15px;line-height:1.5;color:var(--muted);margin-top:8px}
.member-card .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.member-card .go{display:inline-flex;align-items:center;min-height:46px;background:var(--magenta);color:#fff;border:0;border-radius:999px;
  padding:0 22px;font:inherit;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.member-card .go:hover{background:var(--magenta-deep)}
.member-card .alt{color:var(--ink);font-size:14px;font-weight:700;text-underline-offset:3px;text-decoration-color:var(--magenta)}
.member-card .x{position:absolute;top:8px;right:8px;width:44px;height:44px;background:none;border:0;color:#777;font-size:24px;line-height:1;cursor:pointer;border-radius:50%}
.member-card .x:hover{color:var(--ink);background:var(--veil)}
.member-card .code{display:flex;align-items:center;gap:10px;margin-top:14px}
.member-card .code b{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:.14em;padding:8px 14px;border:2px dashed var(--magenta);border-radius:12px;color:var(--ink)}
.member-card .copy{min-height:44px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:0 18px;font:inherit;font-weight:700;cursor:pointer}
.member-card .join{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.member-card .join input[type=text]{flex:1 1 100%;min-width:0;min-height:46px;border:1.5px solid var(--hair);border-radius:999px;padding:0 18px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff}
.member-card .join input:focus{outline:none;border-color:var(--ink)}
.member-card .join .go{flex:0 0 auto}
@media (min-width:761px){.member-card{left:24px;right:auto;bottom:24px;max-width:400px}}
@media (max-height:760px){
  .member-card{padding:16px 18px 14px}
  .member-card h2{font-size:24px;margin-top:4px}
  .member-card .intro{display:none}
  .member-card .join{gap:8px;margin-top:12px}
  .member-card .join input[type=text]{min-height:42px}
}
/* small phones: name field and button share one row, so the card stays short */
@media (max-width:420px){
  .member-card .join{flex-wrap:nowrap;gap:8px}
  .member-card .join input[type=text]{flex:1 1 auto;padding:0 14px;text-overflow:ellipsis}
  .member-card .join .go{padding:0 16px;letter-spacing:.04em;white-space:nowrap}
}
@media print{.member-card{display:none!important}}

/* logo monogram (crimson preview) */
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{height:44px;width:auto;display:block}
.site-header.scrolled .logo-mark{height:34px}
@media (max-width:760px){ .logo-mark{height:36px} }

/* ---------- mobile tap targets: bigger touch areas, nothing moves ---------- */
.header-links a{display:inline-block;padding:12px 4px;margin:-12px -4px}
.sec-head .more,.group-h a{display:inline-block;padding:12px 0;margin:-12px 0}
.crumbs a{display:inline-block;padding:12px 0;margin:-12px 0}
.fcol a{padding:9px 0}
.footer-grid p a,.visit a[href^="tel:"]{display:inline-block;padding:8px 0;margin:-8px 0}

/* shop: on a product, cart or checkout page the store comes first, not the shop intro */
body[data-shop-page].store-deep .shop-head,
body[data-shop-page].store-deep main > section.catalog{display:none}

/* ---------- shortcut bubbles (homepage, under the hero) ---------- */
.sbubbles{max-width:1320px;margin:40px auto 0;padding:0 32px}
.sbubbles-in{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.sbubble{display:flex;flex-direction:column;align-items:center;gap:10px;width:104px;text-decoration:none;color:var(--ink)}
.sbubble-img{width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--veil);
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--hair);transition:box-shadow .18s ease,transform .18s ease}
.sbubble-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.sbubble-l{font-size:13px;font-weight:700;letter-spacing:.02em;text-align:center;line-height:1.2}
.sbubble:hover .sbubble-img,.sbubble:focus-visible .sbubble-img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--magenta);transform:translateY(-2px)}
@media (max-width:760px){
  .sbubbles{padding:0;margin-top:28px}
  .sbubbles-in{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:4px 16px 8px;gap:14px;scroll-snap-type:x proximity;scrollbar-width:none}
  .sbubbles-in::-webkit-scrollbar{display:none}
  .sbubble{width:76px;flex:none;scroll-snap-align:start}
  .sbubble-img{width:72px;height:72px}
  .sbubble-l{font-size:12px}
}

/* ---------- header search: product matches with photo + price ---------- */
.ans.ans--prod{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:8px 12px}
.ans--prod img,.ans--prod .ans-ph{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--veil)}
.ans--prod span{margin-left:0}
.ans--prod .ans-n{text-align:left;font-size:14px;line-height:1.25;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ans--prod .ans-p{font-weight:700;font-size:14px;color:var(--ink)}
.ans-head{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 12px 2px}

/* ---------- /shop product page: other sizes + shelf location ----------
   Lives inside the store widget, whose own link/text styles are very specific - hence the long selectors + !important. */
html body .ec-store .bb-pextra{margin:16px 0 6px !important}
html body .ec-store .bb-sizes{display:flex !important;flex-wrap:wrap;align-items:center;gap:8px}
html body .ec-store .bb-sizes .lbl{font-size:14px !important;font-weight:700 !important;margin-right:4px;color:var(--ink) !important}
html body .ec-store .bb-sizes a{border:1px solid #CFC6C5 !important;border-radius:999px !important;padding:8px 16px !important;
  font-size:15px !important;line-height:1 !important;color:var(--ink) !important;text-decoration:none !important;
  min-height:38px;display:inline-flex !important;align-items:center;background:#fff !important;cursor:pointer}
html body .ec-store .bb-sizes a:hover{border-color:var(--ink) !important}
html body .ec-store .bb-sizes a.is-current{background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important;cursor:default}
html body .ec-store .bb-aisle{margin:12px 0 0 !important;font-size:15px !important;color:var(--ink) !important}
html body .ec-store .bb-aisle b{color:var(--magenta) !important;font-weight:700 !important}

/* ---------- hair filters on category pages (Style / Length / Color / Brand) ---------- */
.hfacets{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:22px 0 4px}
.hfacet{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hfacet select{min-width:170px;height:42px;border:1px solid #CFC6C5;border-radius:12px;padding:0 12px;font:inherit;font-size:15px;
  letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink);background:#fff}
.hfacet select:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.hfacet-clear{height:42px;padding:0 16px;border:0;border-radius:12px;background:var(--veil);font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
@media (max-width:760px){.hfacets{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hfacet select{min-width:0;width:100%}.hfacet-clear{grid-column:1/-1}}
/* brands A-Z: product lines show their parent */
.az a i{font-style:normal;color:var(--muted);font-size:.85em;margin-left:4px}

/* ---------- /shop hair-colour chips (replace the Color dropdown) ---------- */
html body .ec-store .bb-chips{margin:4px 0 10px}
html body .ec-store .bb-chips-now{margin:0 0 10px !important;font-size:15px !important;color:var(--ink) !important}
html body .ec-store .bb-chips button{display:inline-flex;flex-direction:column;align-items:center;gap:4px;width:64px;margin:0 6px 10px 0;
  padding:4px 2px 6px;border:0;background:none;cursor:pointer;font:inherit;vertical-align:top}
html body .ec-store .bb-chips img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px #D9D0CF}
html body .ec-store .bb-chips button span{font-size:12px !important;line-height:1.2;color:var(--ink) !important;word-break:break-word;text-align:center}
html body .ec-store .bb-chips button:not(:has(img)) span{border:1px solid #CFC6C5;border-radius:999px;padding:8px 10px;font-size:13px !important}
html body .ec-store .bb-chips button[aria-checked="true"] img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
html body .ec-store .bb-chips button[aria-checked="true"] span{font-weight:700 !important}
html body .ec-store .bb-chips button:focus-visible{outline:2px solid var(--magenta);outline-offset:2px;border-radius:10px}
html body .ec-store .bb-chips-select{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important}

/* ============================================================
   Structure + search (Sam's Beauty teardown, 10/17)
   Department menu: chips scroll on phones, hover panels on desktop, "Menu" drawer everywhere.
   ============================================================ */
.chip-menu{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;min-height:40px;scroll-snap-align:start;
  padding:7px 15px 7px 13px;border-radius:999px;border:1px solid var(--hair);background:var(--paper);
  color:var(--ink);font:700 13px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:all .15s ease;
}
.chip-menu:hover,.chip-menu[aria-expanded="true"]{background:var(--blush);border-color:var(--blush);color:var(--magenta-deep)}
.chip-menu-i{position:relative;width:14px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.chip-menu-i::after{content:"";position:absolute;left:0;right:0;top:2px;height:2px;background:currentColor}
.megas{display:none}

@media (hover:hover) and (pointer:fine) and (min-width:1100px){
  .dept-nav{position:relative}
  .dept-nav .chip-row-in{position:static;-webkit-mask-image:none;mask-image:none}
  .megas{display:block}
  .mega{
    position:absolute;left:0;right:0;top:100%;z-index:85;background:var(--paper);
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);box-shadow:0 26px 50px rgba(17,17,17,.10);
  }
  .mega-in{
    max-width:1320px;margin:0 auto;padding:26px 32px 30px;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 240px;gap:10px 32px;align-items:start;
  }
  .mega-h{font:800 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
  .mega-col a{display:block;padding:6px 0;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.3;break-inside:avoid}
  .mega-col a:hover{color:var(--magenta)}
  .mega-col a small{color:var(--muted);font-size:12px;margin-left:3px}
  .mega-col--wide{grid-column:span 2;columns:2;column-gap:32px}
  .mega-col--3{grid-column:span 3;columns:3;column-gap:32px}
  .mega-col--wide .mega-h,.mega-col--3 .mega-h{column-span:all}
  .mega-feature{grid-column:-2/-1;grid-row:1;display:block;text-decoration:none;color:var(--ink);background:var(--veil);border-radius:18px;padding:12px}
  .mega-feature-img{display:block;aspect-ratio:5/4;border-radius:12px;overflow:hidden;background:#fff;margin-bottom:12px}
  .mega-feature-img img{width:100%;height:100%;object-fit:contain}
  .mega-feature-t{display:block;font-family:var(--serif);font-size:20px;line-height:1.15;padding:0 4px}
  .mega-feature-s{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);padding:0 4px 4px}
  .mega-feature:hover .mega-feature-t{color:var(--magenta)}
  .mega-feature--text{min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--ink);color:#fff;padding:20px}
  .mega-feature--text .mega-feature-s{color:rgba(255,255,255,.72)}
  .mega-feature--text:hover .mega-feature-t{color:#fff;text-decoration:underline}
}

/* Menu drawer (a native <dialog>: focus stays inside, Escape closes) */
.menu-drawer{
  position:fixed;top:0;bottom:0;left:0;right:auto;width:min(420px,92vw);max-width:none;height:100%;max-height:none;
  margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain;
  box-shadow:24px 0 48px rgba(17,17,17,.18);
}
.menu-drawer::backdrop{background:rgba(17,17,17,.45)}
html.menu-open{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .menu-drawer[open]{animation:md-slide .28s cubic-bezier(.2,.8,.2,1)}
  @keyframes md-slide{from{transform:translateX(-100%)}}
}
.md-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 20px;background:var(--paper);border-bottom:1px solid var(--hair)}
.md-title{font-family:var(--serif);font-size:22px;line-height:1.1}
.md-x{width:44px;height:44px;border:0;border-radius:50%;background:var(--veil);color:var(--ink);font-size:26px;line-height:1;cursor:pointer}
.md-x:hover{background:var(--blush);color:var(--magenta-deep)}
.md-body{padding:4px 20px 36px}
.md-dept{border-bottom:1px solid var(--hair)}
.md-dept summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:14px 0;font-weight:800;font-size:16px;letter-spacing:.02em;cursor:pointer}
.md-dept summary::-webkit-details-marker{display:none}
.md-dept summary::after{content:"+";font-size:24px;font-weight:400;color:var(--muted)}
.md-dept[open] summary::after{content:"\2212"}
.md-in{display:flex;flex-direction:column;gap:16px;padding:0 0 20px}
.md-in .mega-h{font:800 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.md-in .mega-col a{display:inline-flex;align-items:center;min-height:40px;margin:0 6px 8px 0;padding:8px 13px;border-radius:999px;background:var(--veil);color:var(--ink);text-decoration:none;font-size:14px}
.md-in .mega-col a small{color:var(--muted);font-size:12px;margin-left:5px}
.md-in .mega-feature{order:-1;display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--blush);color:var(--ink);text-decoration:none;font-weight:800}
.md-in .mega-feature-img{flex:0 0 52px;width:52px;height:52px;border-radius:10px;overflow:hidden;background:#fff}
.md-in .mega-feature-img:empty{display:none}
.md-in .mega-feature-img img{width:100%;height:100%;object-fit:contain}
.md-in .mega-feature-s{display:none}
.md-in .mega-feature--text{background:var(--ink);color:#fff;padding:14px}
.md-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0 0}
.md-links a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border:1px solid var(--hair);border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.md-links a:hover{border-color:var(--magenta);color:var(--magenta-deep)}
.md-visit{margin:18px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.md-visit a{color:var(--magenta-deep);font-weight:800;text-decoration:none}

/* Search panel: before typing (recent / people ask for | counter picks), typing (answers + highlighted products) */
.search-idle{display:grid;gap:16px}
.search-recent{margin-bottom:14px}
.search-recent .search-ask-label{display:flex;justify-content:space-between;align-items:center}
.search-recent-x{border:0;background:none;padding:2px 4px;color:var(--muted);font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.search-recent-x:hover{color:var(--magenta)}
.search-picks{display:grid;gap:2px}
.search-idle-r .ans--prod{padding:6px 10px}
.ans mark{background:none;color:var(--magenta);font-weight:800}
.ans-head span{float:right;font-weight:700;letter-spacing:.04em;text-transform:none}
.ans-fix{font-size:13px;color:var(--muted);padding:6px 12px 2px}
.ans-fix b{color:var(--ink)}
.ans-none{font-size:14px;line-height:1.5;padding:8px 12px 4px;color:var(--ink)}
.ans-none a{color:var(--magenta-deep);font-weight:800;text-decoration:none;white-space:nowrap}
.search-panel{overscroll-behavior:contain}
.ans .ans-where{display:contents;color:inherit}
.ans-p small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
/* nothing found: one phone number, the "People ask for" chips again */
.search-panel.is-none .search-counter,.search-panel.is-none .search-idle-r,.search-panel.is-none .search-recent{display:none}
.search-panel.is-none .search-idle{grid-template-columns:1fr;margin-top:6px}
@media (max-width:760px){
  .ans .ans-where{display:none}
  .ans.ans--yes{padding:8px 12px}
}
@media (min-width:900px){
  .search-idle{grid-template-columns:1fr 1fr;gap:28px}
  .ans-prods{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
}

/* Categories index grouped by department; category pages: link to the live store listing under the grid */
.dept-h{margin-top:44px;scroll-margin-top:30px}
.dept-h small{font-family:var(--sans);font-size:14px;color:var(--muted);margin-left:6px;font-weight:400}
.pgrid-more{margin:30px 0 0;font-size:14px;line-height:1.5;color:var(--muted);text-align:center}
.pgrid-more a{color:var(--magenta-deep);font-weight:700}
/* chips snapped flush to the screen edge (first chip cut off on phones): snap to the row's padding instead */
.chip-row-in{scroll-padding-inline:32px}
@media (max-width:1060px){.chip-row-in{scroll-padding-inline:20px}}
/* "Menu" stays pinned at the start of the chip row (the only way into the phone drawer); chips slide under it.
   The ::before covers the row's side gutter; 130 / 118px = gutter (32 / 20) + Menu width (89) + gap, keep in step. */
.chip-row-in .chip-menu{position:sticky;left:0;z-index:2;box-shadow:4px 0 0 var(--paper),10px 0 10px -6px var(--paper)}
.chip-row-in .chip-menu::before{content:"";position:absolute;top:-2px;bottom:-2px;right:calc(100% + 1px);width:32px;background:var(--paper)}
/* square white box behind the pill, so chips sliding under it never show at its round corners; the pill itself
   (outline + hover fill) is drawn by ::after */
.chip-row-in .chip-menu,.chip-row-in .chip-menu:hover,.chip-row-in .chip-menu[aria-expanded="true"]{border-color:transparent;border-radius:0;background:var(--paper)}
.chip-row-in .chip-menu::after{content:"";position:absolute;inset:-1px;z-index:-1;border:1px solid var(--hair);border-radius:999px;background:var(--paper);transition:inherit}
.chip-row-in .chip-menu:hover::after,.chip-row-in .chip-menu[aria-expanded="true"]::after{background:var(--blush);border-color:var(--blush)}
.chip-row-in .chip-menu:focus-visible{outline:none}
.chip-row-in .chip-menu:focus-visible::after{outline:2px solid var(--magenta);outline-offset:2px}
@media (max-width:1099px){.dept-nav .chip-row-in{scroll-padding-inline-start:130px}}
@media (max-width:760px){.dept-nav .chip-row-in{scroll-padding-inline-start:118px}}
/* Phones: brand + refine chips swipe in one row each, so products start in the first screens (Sam's shows products
   right under the title). The row bleeds to the screen edges like the department chips. */
@media (max-width:760px){
  .catalog .facet,.catalog .refine{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:2px 20px;scroll-padding-inline:20px;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  .catalog .facet{margin-top:22px}
  .catalog .facet::-webkit-scrollbar,.catalog .refine::-webkit-scrollbar{display:none}
  .catalog .facet a,.catalog .refine button{flex:0 0 auto;white-space:nowrap}
  .catalog .facet .facet-label,.catalog .refine .facet-label{flex:0 0 auto}
  .catalog .refine{width:calc(100% + 40px)}
}
.hf-toggle{display:none}
@media (max-width:760px){
  .hfacets:not(.is-open){display:none}
  .hf-toggle{display:inline-flex;align-items:center;min-height:40px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:800 13px/1 var(--sans);letter-spacing:.02em;cursor:pointer}
  .hf-toggle[aria-expanded="true"]{background:var(--ink);color:#fff}
  .sortbar{flex-wrap:wrap;gap:8px 10px}
}


/* Phones: filter sheet (opened by "Filter" on hair category pages) */
.fsheet{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
.fsheet:not([open]){display:none}
.fsheet::backdrop{background:rgba(17,17,17,.45)}
@media (prefers-reduced-motion:no-preference){.fsheet[open]{animation:fs-up .26s cubic-bezier(.2,.8,.2,1)}@keyframes fs-up{from{transform:translateY(40px);opacity:0}}}
.fs-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 20px;border-bottom:1px solid var(--hair)}
.fs-title{font-family:var(--serif);font-size:22px;line-height:1.1}
.fs-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 20px 24px}
.fs-group{border:0;padding:0;margin:20px 0 0;min-width:0}
.fs-group legend{font:800 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0}
.fs-opts{display:flex;flex-wrap:wrap;gap:8px}
.fs-opt{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:700 14px/1.2 var(--sans);cursor:pointer}
.fs-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.fs-foot{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:var(--paper)}
.fs-clear{min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:800 14px var(--sans);cursor:pointer}
.fs-show{min-height:48px;padding:0 16px;border:0;border-radius:999px;background:var(--magenta);color:#fff;font:800 15px var(--sans);letter-spacing:.02em;cursor:pointer}
.fs-show:hover{background:var(--magenta-deep)}

/* Phones, /shop product pages: Add to bag pinned to the bottom once the store's own button is off screen */
.bb-buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--hair);box-shadow:0 -10px 30px rgba(17,17,17,.10)}
.bb-buybar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bb-buybar-n{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-buybar-p{font-weight:800;font-size:17px;color:var(--ink)}
.bb-buybar-b{flex:0 0 auto;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--magenta);color:#fff;font:800 15px var(--sans);cursor:pointer}
@media (min-width:761px){.bb-buybar{display:none!important}}
@media (max-width:760px){body.bb-buybar-on{padding-bottom:84px}}

/* Search: our own results page (/search) */
.sres-answers:not(:empty){display:grid;gap:4px;margin:18px 0 0;max-width:680px}
.sres-answers .ans{background:var(--veil)}
.sres .toolbar{margin-top:20px}
.sres-more{text-align:center;margin-top:28px}
.sres-none{display:grid;gap:12px;margin-top:22px;max-width:520px}
.sres-none .sres-store-btn{display:block;width:100%;padding:14px 18px;line-height:1.35}
.sres-none .sres-tel{display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-height:44px;padding:0 24px;white-space:nowrap}
.sres-none .search-ask-label{margin-top:10px}
.ptile mark{background:none;color:var(--magenta);font-weight:800}

/* Phones, /shop product pages: the photo filled the whole first screen (tightly cropped jars and packs), pushing the
   name, price and Add to bag out of view. Cap it, centred; the name now shows in the first screen. */
@media (max-width:760px){
  html body .ec-store .product-details__gallery{max-width:270px !important;margin-left:auto !important;margin-right:auto !important}
}

/* "Powered by Lightspeed" line in the store's footer (every /shop page). Musa 10/17: remove it. Lightspeed has no
   setting for it (its storefront config only has show_footer_menu, which would also drop Track orders / Sign in /
   Favorites / Bag), so it is hidden here. Delete this rule to bring it back. */
html body .ec-store .ec-lightspeed-branding-wrapper{display:none !important}
/* phones: swipe rows (Shop by category / Shop by brand) snapped their first card flush to the screen edge */
@media (max-width:760px){.aisle-row{scroll-padding-inline:20px}}

/* /shop colour chips: sold-out colours (like Sam's "OUT OF STOCK" swatch) - faded with a diagonal line, still tappable */
html body .ec-store .bb-chips button{position:relative}
html body .ec-store .bb-chips button.is-sold img{opacity:.38;filter:grayscale(.6)}
html body .ec-store .bb-chips button.is-sold::after{content:"";position:absolute;left:12px;top:22px;width:44px;height:2px;background:var(--muted);transform:rotate(-45deg);pointer-events:none}
html body .ec-store .bb-chips .bb-sold{font-style:normal !important;font-size:9.5px !important;font-weight:800 !important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted) !important;line-height:1}
html body .ec-store .bb-chips-note{margin:2px 0 6px !important;font-size:13.5px !important;color:var(--magenta-deep) !important}
/* colour chips without a drawn swatch (FFH-AUBURN...): a pill sized to its text; sold out = struck through */
html body .ec-store .bb-chips button:not(:has(img)){width:auto;min-width:64px}
html body .ec-store .bb-chips button:not(:has(img)) span{white-space:nowrap;word-break:normal}
html body .ec-store .bb-chips button.is-sold:not(:has(img))::after{display:none}
html body .ec-store .bb-chips button.is-sold:not(:has(img)) span{text-decoration:line-through;color:var(--muted) !important;border-style:dashed}

/* quantity stepper (Musa 10/17, like Sam's): [ - ][ 1 ][ + ] around the store's own field */
html body .ec-store .details-product-purchase__qty.bb-qty{display:flex !important;align-items:center;flex-wrap:wrap}
html body .ec-store .bb-qty label{width:100%;margin:0 0 8px !important}
html body .ec-store .bb-qty .details-product-purchase__qty-field{width:56px !important;min-width:0 !important;margin:0 !important}
html body .ec-store .bb-qty .details-product-purchase__qty-field input,html body .ec-store .bb-qty .form-control__placeholder{text-align:center !important;padding-left:0 !important;padding-right:0 !important;justify-content:center}
html body .ec-store .bb-qty input::-webkit-outer-spin-button,html body .ec-store .bb-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html body .ec-store .bb-qty input[type=number]{-moz-appearance:textfield;appearance:textfield}
html body .ec-store .bb-qty-btn{width:44px;height:44px;border:1px solid #CFC6C5;background:#fff;color:var(--ink);font:400 22px/1 var(--sans);cursor:pointer;padding:0}
html body .ec-store .bb-qty-btn:hover{background:var(--veil)}
html body .ec-store .bb-qty-minus{border-radius:10px 0 0 10px;border-right:0}
html body .ec-store .bb-qty-plus{border-radius:0 10px 10px 0;border-left:0}
html body .ec-store .bb-qty .form-control{border-radius:0 !important}
html body .ec-store .bb-qty:has(input:disabled) .bb-qty-btn{opacity:.35;pointer-events:none}
/* once this item is in the bag ("1 item in the bag", Add More) the store leaves its field enabled: lock - / + anyway,
   and fade the number, which is no longer what is in the bag (the line above it is) */
html body .ec-store .details-product-purchase--in-bag .bb-qty-btn{opacity:.35 !important;pointer-events:none !important}
html body .ec-store .details-product-purchase--in-bag .bb-qty .details-product-purchase__qty-field{opacity:.45}
/* colour list toggle: "All 37 colors" / "Fewer colors" */
html body .ec-store .bb-chips button.bb-chips-more{display:inline-flex !important;flex-direction:row !important;width:auto !important;align-items:center;min-height:40px;margin:2px 0 10px !important;padding:8px 16px !important;border:1.5px solid var(--ink) !important;border-radius:999px !important;background:#fff !important;color:var(--ink) !important;font:800 13px/1 var(--sans) !important;letter-spacing:.02em;cursor:pointer;vertical-align:top}
html body .ec-store .bb-chips button.bb-chips-more:hover{background:var(--veil) !important}

/* hair Length dropdown (Musa 10/17: one line instead of rows of pills, like Sam's "Length" step) */
html body .ec-store .bb-len{display:flex;align-items:center;gap:12px;margin:14px 0 4px}
html body .ec-store .bb-len .lbl{font-size:14px;font-weight:700;color:var(--ink)}
html body .ec-store .bb-len select{min-width:140px;min-height:44px;padding:8px 36px 8px 14px;border:1px solid #CFC6C5;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;-webkit-appearance:none;appearance:none;font:600 15px var(--sans);color:var(--ink)}

/* phones: hair colours in ONE row you swipe (all colours, no "All colors" button) */
@media (max-width:760px){
  html body .ec-store .bb-chips-row{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-padding-inline:16px;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  html body .ec-store .bb-chips-row::-webkit-scrollbar{display:none}
  html body .ec-store .bb-chips-row button{flex:0 0 auto}
}
/* chips say "Color: 1B" themselves, so the store's own "Color" title above them would repeat it */
html body .ec-store .details-product-option--select:has(.bb-chips) .details-product-option__title{display:none !important}
/* the store resets its classes when the value changes (dropping .bb-chips-select), so hide its own dropdown by structure */
html body .ec-store .details-product-option--select:has(.bb-chips) .form-control{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;margin:0 !important;padding:0 !important;border:0 !important}


/* "pick a length" mode (from a hair style card): the style name + "from" price; colours and Add to Bag wait */
body.bb-picklen .ec-store .product-details__product-title,
body.bb-picklen .ec-store .product-details__product-price,
body.bb-picklen .ec-store .details-product-option,
body.bb-picklen .ec-store .details-product-purchase{display:none !important}
html body .ec-store .bb-style-name{font-size:24px !important;line-height:1.25;font-weight:600;color:var(--ink) !important;margin:0 0 6px !important}
html body .ec-store .bb-style-price{font-size:20px !important;font-weight:700;color:var(--ink) !important;margin:0 0 6px !important}
html body .ec-store .bb-len-hint{margin:8px 0 0 !important;font-size:14px !important;color:var(--muted) !important}
body.bb-picklen .ec-store .product-details__general-info,
body.bb-picklen .ec-store .product-details-module:has(.product-detail__promotions){display:none !important}

/* phones: the colour swipe row shows that it scrolls - the next chip peeks in (no fade), a › / ‹ button, "37 colors · swipe →" */
@media (max-width:760px){
  html body .ec-store .bb-chips-row{-webkit-mask-image:none !important;mask-image:none !important}
  html body .ec-store .bb-chips-wrap{position:relative}
  html body .ec-store .bb-chips button.bb-chips-arrow{position:absolute !important;top:6px;z-index:2;width:40px !important;height:40px !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:0 !important;display:grid !important;place-items:center;border:1px solid var(--hair) !important;border-radius:50% !important;background:rgba(255,255,255,.96) !important;box-shadow:0 3px 12px rgba(17,17,17,.18);font:400 24px/1 var(--sans) !important;color:var(--ink) !important}
  html body .ec-store .bb-chips button.bb-chips-arrow[hidden]{display:none !important}
  html body .ec-store .bb-chips-next{right:-14px}
  html body .ec-store .bb-chips-prev{left:-14px}
  /* the row stops just left of the › button (which sits in its own strip), so the button never covers a whole swatch:
     only the cut-off one peeks in beside it. 30px = 44px strip (button 40 + 4 air) - the row's 14px bleed past the wrap */
  html body .ec-store .bb-chips-wrap .bb-chips-row{margin-right:30px}
  /* once scrolled, the ‹ button sits over the row's left end: hide the chips under it (clipped = not tappable either), so
     a tap there always means "back" and a visible chip is never under it. 46px = row bleed 16 + button reach 26 + 4 air */
  html body .ec-store .bb-chips-wrap:has(.bb-chips-prev:not([hidden])) .bb-chips-row{clip-path:inset(0 0 0 46px);scroll-padding-left:46px}
  html body .ec-store .bb-chips-now{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  html body .ec-store .bb-chips-swipe{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--magenta-deep)}
  html body .ec-store .bb-chips-swipe[hidden]{display:none}
}

/* /shop/cart, pickup only: hide the store's empty "Shipping options" step + style the "Pickup only" line (site.js).
   WHEN SHIPPING IS ENABLED: remove these two rules AND the "Pickup only" block in site.js. */
html body .ec-store .ec-cart__steps .ec-cart-step--address.ec-cart-step--empty{display:none !important}
html body .ec-store .bb-pickup-note{margin:0 0 10px !important;font-size:15px !important;font-weight:700 !important;color:var(--ink) !important}

/* Category, brand and search pages on phones: products in the first screen (smaller title + one-line lede, no
   "By brand" row where the Filter sheet has a Brand filter, one-line sort bar). 16px selects: iOS zooms smaller ones. */
@media (max-width:760px){
  .catalog h1{font-size:28px}
  .catalog .lede{font-size:15px;line-height:1.5;margin-top:8px}
  .catalog .facet{margin-top:14px}
  .catalog--hair .facet{display:none}
  .catalog .toolbar,.catalog .pgrid{margin-top:16px}
  .sortbar{flex-wrap:nowrap}
  /* "Filter (1)" and "155 of 189" always whole; the sort box takes the rest (short labels: "Price: high" fits at 320px with a filter on) */
  .sortbar .hf-toggle,.sortbar .pcount{flex:0 0 auto;white-space:nowrap}
  .sortbar .sort-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sortbar label{margin-left:auto;flex:0 1 auto;min-width:0;display:flex}
  .sortbar select{min-width:0;max-width:100%}
  .sortbar select,.hfacet select{font-size:16px}
}
html body .ec-store .bb-len select{font-size:16px !important}
/* hair style cards: the length range sits in the price line ("from $33.99 · 14"–22" · 3 lengths"), never split.
   When it has to wrap, it starts flush under the price with no "·": the line is shifted 14px left and that strip is
   clipped, so a "·" only shows when it sits between the price and the range on one line. */
.ptile .price{display:flex;flex-wrap:wrap;align-items:baseline;margin-left:-14px;clip-path:inset(-8px -8px -8px 14px)}
.ptile .price::before{content:"";flex:0 0 14px}
.ptile .variants{white-space:nowrap;position:relative;margin-left:0;padding-left:14px}
.ptile .variants::before{content:"·";position:absolute;left:0;width:14px;text-align:center}
@media (max-width:360px){
  .sortbar{gap:6px}
  .sortbar .hf-toggle{padding:9px 10px}
  .sortbar select{padding:9px 9px}
}
/* colour/shade code on its own line under the name (cards and search rows), so "- 99J" and "- 350" don't look alike */
.ptile .pvar{display:block;margin-top:2px;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.ans--prod .ans-nw{min-width:0;text-align:left}
.ans--prod .pvar{display:block;margin-top:1px;font-size:12px;font-weight:700;line-height:1.25;color:var(--muted)}
/* filter sheet: "Product lines" heading inside the Brand group */
.fs-sub{flex:0 0 100%;margin:6px 0 0;font:800 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Phones: jump links (A-Z on /brands, departments on /categories, a brand's categories) land the heading just under the
   pinned header + rail. The rail is 60px tall and pins 34px above --hdr (the address strip scrolls away), +12px air.
   Only on pages with a rail, so form fields elsewhere keep the normal offset. /categories cards: one compact row each. */
@media (max-width:760px){
  html:has(.jumps,.azrail){scroll-padding-top:calc(var(--hdr,191px) + 38px)}
  .group-h,.dept-h,.az .letter{scroll-margin-top:0}
  .index-grid{grid-auto-rows:auto}
  .index-grid .cat-card{justify-content:flex-start;gap:16px;padding:14px 18px}
  .index-grid .cat-card>span:nth-child(2){flex:1}
  .index-grid .cat-card .arr{margin-left:auto}
}
/* catalog grids: 48 cards at a time, "Show 48 more (N left)" under the grid (site.js); every card stays in the HTML */
.ptile.is-more{display:none}
.pgrid-next{text-align:center;margin-top:30px}
.pgrid-next button{min-height:48px;padding:13px 28px;background:var(--paper);font-family:var(--sans);cursor:pointer}

/* a fast change of length is being corrected (picked 8", went back to 10" before 8" arrived): while the store swaps,
   the length on screen is not the one they picked, so its options and buying controls wait (a second or two at most) */
html body.bb-switching .ec-store .details-product-option,html body.bb-switching .ec-store .details-product-purchase,
html body.bb-switching .ec-store .product-details__product-price{visibility:hidden !important}
body.bb-switching .bb-buybar{display:none !important}
html body.bb-switching .ec-store .bb-pextra .bb-len{flex-wrap:wrap}
html body.bb-switching .ec-store .bb-pextra .bb-len .lbl{flex-shrink:0;white-space:nowrap}
html body.bb-switching .ec-store .bb-pextra .bb-len::after{content:"Loading that length\2026";display:block;flex-basis:100%;margin-top:6px;font-size:13px;font-weight:700;color:var(--muted)}
html body.bb-switching .ec-store .bb-pextra .bb-len-fail{display:none}