/* =====================================================================
   Nails By Beb — storefront stylesheet
   Values are lifted 1:1 from the approved design; the only additions are
   the responsive rules at the bottom of the file.
   ===================================================================== */

:root{
  --ink:#171310;
  --base:#EDE6E0;
  --panel:#FBF7F3;
  --cream:#FBF7F3;
  --cream-2:#EFE5DE;
  --cream-3:#F4EBE4;
  --tan:#E2C9BB;
  --tan-2:#C9A794;
  --accent:#A9836F;
  --accent-2:#B08E79;
  --muted:#7C6C63;
  --muted-2:#9C8A80;
  --muted-3:#6F615A;
  --muted-4:#8B7A70;
  --muted-5:#B0998B;
  --muted-6:#B7A79D;
  --line:#E8DCD4;
  --line-2:#E4D8D0;
  --line-3:#E1D3CA;
  --line-4:#DFD1C8;
  --line-5:#F0E7E1;
  --dark-line:#2B231E;
  --dark-line-2:#3A302B;
  --green:#1F7A4C;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:Jost,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;background:var(--base);touch-action:pan-x pan-y}
body{touch-action:pan-x pan-y}

body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-y:visible;
}

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%}
input,select,textarea,button{font-family:inherit}
::selection{background:var(--tan)}

@keyframes nbbTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes nbbFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------------------------------------------------------------------
   Announcement banner (pinned above the ticker)
   --------------------------------------------------------------------- */
.announce{
  position:fixed;top:0;left:0;right:0;height:38px;z-index:81;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 16px;text-align:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--accent);color:var(--cream);text-decoration:none;
}
a.announce:hover{color:var(--cream);opacity:.92}

/* ---------------------------------------------------------------------
   Shop-closed notice
   --------------------------------------------------------------------- */
.shopclosed{background:var(--ink);color:#DCCFC7;padding:clamp(20px,3.4vw,32px) clamp(14px,4vw,22px)}
.shopclosed .wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.shopclosed .eyebrow-sm{color:var(--tan)}
.shopclosed h2{font-family:var(--serif);font-weight:300;font-size:clamp(22px,4.4vw,30px);margin:0;color:var(--cream)}
.shopclosed p{margin:0;font-size:12.5px;line-height:1.8;max-width:60ch}
.shopclosed .btn-sm{border-color:var(--cream-2);color:var(--cream-2)}

/* ---------------------------------------------------------------------
   Sale pricing
   --------------------------------------------------------------------- */
.price-was{color:var(--muted-2);text-decoration:line-through;margin-left:6px;font-size:.86em}
.pcard__badge--sale{background:var(--ink);color:var(--cream)}
.sale-flag{display:inline-block;background:var(--ink);color:var(--cream);
  padding:4px 9px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.soldout-flag{display:inline-block;background:rgba(251,247,243,.94);color:var(--muted);
  padding:5px 9px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}

/* ---------------------------------------------------------------------
   Ticker
   --------------------------------------------------------------------- */
.ticker{
  position:fixed;top:0;left:0;right:0;height:34px;
  background:var(--ink);color:var(--cream-3);
  z-index:80;overflow:hidden;display:flex;align-items:center;
}
.ticker__track{display:flex;width:max-content;animation:nbbTick 42s linear infinite}
.ticker__item{
  display:inline-flex;align-items:center;gap:22px;padding:0 22px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  white-space:nowrap;color:#EADFD7;
}
.ticker__item span{opacity:.45}

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */
.shell{max-width:100%;margin-top:var(--top-offset,34px);background:var(--base);padding-bottom:0}
.page{min-height:100vh;background:var(--base)}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header{
  position:sticky;top:var(--top-offset,34px);z-index:60;
  background:rgba(251,247,243,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header__bar{
  max-width:1280px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.header__logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.header__logo img{width:104px;height:44px;object-fit:cover;mix-blend-mode:multiply;display:block}
.header__search{
  flex:1 1 220px;min-width:180px;display:flex;align-items:center;gap:8px;
  border:1px solid var(--line-3);background:#fff;padding:9px 12px;
}
.header__search span{color:var(--muted-5);font-size:12px}
.header__search input{
  border:0;outline:0;background:transparent;width:100%;
  font-size:12.5px;letter-spacing:.04em;color:var(--ink);
}
.header__actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.header__nav{
  max-width:1280px;margin:0 auto;padding:0 22px 10px;
  display:flex;gap:17px;overflow-x:auto;scrollbar-width:none;
}
.header__nav::-webkit-scrollbar{display:none}
.header__nav a{
  font-size:9.8px;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;padding-bottom:6px;border-bottom:1px solid transparent;
  color:var(--muted);
}
.header__nav a:hover{color:var(--ink)}
.header__nav a.is-active{color:var(--ink)}
.header__nav a .rule{display:block;height:1px;background:var(--ink);margin-top:6px}

/* ---------------------------------------------------------------------
   Buttons (all sizes used across the design)
   --------------------------------------------------------------------- */
.btn{
  border:1px solid var(--line-3);background:#fff;padding:9px 14px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  color:var(--ink);display:inline-block;text-align:center;
}
.btn-dark{border:1px solid var(--ink);background:var(--ink);color:var(--cream);padding:9px 14px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;display:inline-block}
.btn-solid{border:0;background:var(--ink);color:var(--cream);padding:15px 30px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-block;text-align:center}
.btn-outline{border:1px solid var(--ink);background:transparent;padding:15px 30px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-block;text-align:center;color:var(--ink)}
.btn-sm{border:1px solid var(--ink);background:transparent;padding:10px 18px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;display:inline-block;color:var(--ink)}
.btn-sm-solid{border:0;background:var(--ink);color:var(--cream);padding:8px 14px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;display:inline-block}
.btn-sm-outline{border:1px solid var(--ink);background:transparent;padding:8px 14px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;display:inline-block;color:var(--ink)}
.btn-ghost{border:1px solid var(--line-4);background:transparent;padding:11px 18px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:var(--muted);display:inline-block}
.btn-link{border:0;background:transparent;padding:0;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);cursor:pointer;border-bottom:1px solid var(--line-4)}
.btn-lg{border:0;background:var(--ink);color:var(--cream);padding:16px 32px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-block}
.btn-lg-outline{border:1px solid var(--ink);background:transparent;padding:16px 28px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-block;color:var(--ink)}
.btn-cream{border:1px solid var(--cream-2);background:transparent;color:var(--cream-2);
  padding:15px 30px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-block}
.btn-wa{border:1px solid var(--green);color:var(--green);padding:11px 18px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;display:inline-block;background:transparent;cursor:pointer}
.btn-green{border:0;background:var(--green);color:#fff;padding:8px 14px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.btn-mini{border:1px solid var(--line-4);background:transparent;padding:8px 14px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.btn-mini-dark{border:1px solid var(--ink);background:transparent;padding:8px 12px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.btn-xs{border:1px solid var(--line-4);background:transparent;padding:6px 10px;
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.btn-xs-dark{border:1px solid var(--ink);background:transparent;padding:6px 10px;
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.btn-med{border:0;background:var(--ink);color:var(--cream);padding:14px 26px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-block}
.btn-med-light{border:0;background:var(--cream);color:var(--ink);padding:14px 26px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-block}
.btn-tan{border:0;background:var(--tan);color:var(--ink);padding:16px 24px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;width:100%}
.btn-copy{border:0;background:var(--ink);color:var(--cream);padding:7px 12px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.btn-track{border:1px solid var(--ink);background:transparent;padding:10px 16px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.btn-reorder{border:0;background:var(--ink);color:var(--cream);padding:10px 16px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.btn-save{border:0;background:var(--ink);color:var(--cream);padding:12px 22px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.btn-add{border:1px solid var(--ink);background:transparent;padding:11px 20px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.btn-notify{border:0;background:var(--ink);color:var(--cream);padding:13px 24px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.btn-full{width:100%}
.self-start{align-self:flex-start}

.chip{
  padding:9px 16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--line-4);
  display:inline-block;
}
.chip.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.tab{
  padding:14px 20px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;background:transparent;border:0;border-bottom:1px solid transparent;
  color:var(--muted-2);white-space:nowrap;display:inline-block;
}
.tab.is-on{border-bottom-color:var(--ink);color:var(--ink)}
.tab-dark{
  padding:14px 20px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;background:transparent;border:0;border-bottom:1px solid transparent;
  color:var(--muted-2);white-space:nowrap;display:inline-block;
}
.tab-dark.is-on{border-bottom-color:var(--tan);color:var(--cream)}

/* Form controls ------------------------------------------------------- */
.field{border:1px solid var(--line-3);background:#fff;padding:12px;font-size:13px;outline:0;width:100%;color:var(--ink)}
.field-lg{border:1px solid var(--line-3);background:#fff;padding:14px;font-size:14px;outline:0;width:100%;color:var(--ink)}
textarea.field{resize:vertical}
.label{display:flex;flex-direction:column;gap:7px}
.label > span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.label-2{display:flex;flex-direction:column;gap:6px}
.label-2 > span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}

.dropzone{
  position:relative;border:1.5px dashed #C9A794;background:linear-gradient(180deg,#fff,#FBF7F3 140%);
  padding:32px 20px;border-radius:4px;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;cursor:pointer;
}
.dropzone:hover{border-color:var(--ink);transform:translateY(-1px)}
.dropzone.is-dragover{border-color:var(--ink);background:#FBF3EC}
.dropzone .up{font-size:24px;color:var(--tan-2);transition:transform .2s ease}
.dropzone:hover .up{transform:translateY(-2px) scale(1.06)}
.dropzone .t{font-size:12.5px;color:var(--muted-3);font-weight:500}
.dropzone .s{font-size:10.5px;color:var(--muted-2)}
.dropzone .filename{font-size:11px;color:var(--ink);font-weight:500;word-break:break-all}
.dropzone input[type=file]{
  font-size:11px;color:var(--muted);margin-top:2px;max-width:100%;
}
.dropzone--sm{padding:20px 14px;gap:6px}
.dropzone--sm .up{font-size:19px}

/* consistent, nicer native file-picker button everywhere on the site */
input[type=file]::file-selector-button{
  border:1px solid var(--ink);background:var(--ink);color:var(--cream);
  padding:8px 14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;margin-right:10px;transition:background .15s ease,transform .1s ease;
  font-family:var(--sans);
}
input[type=file]::file-selector-button:hover{background:#2b241f}
input[type=file]::file-selector-button:active{transform:scale(.97)}

/* ---------------------------------------------------------------------
   Generic type helpers used throughout
   --------------------------------------------------------------------- */
.eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.eyebrow-sm{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.eyebrow-light{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--tan)}
.eyebrow-dark{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-2)}
.serif{font-family:var(--serif);font-weight:300}
.link-ul{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px}
.main{animation:nbbFade .4s ease}

/* ---------------------------------------------------------------------
   HOME
   --------------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));background:var(--panel);
  max-width:1400px;margin:0 auto;padding:0 clamp(12px,2.4vw,32px)}
.hero__copy{
  padding:clamp(34px,7vw,64px) clamp(18px,4.5vw,44px);
  display:flex;flex-direction:column;justify-content:center;gap:22px;order:2;
}
.hero__slide{display:none;flex-direction:column;gap:22px}
.hero__slide.is-on{display:flex;animation:nbbFade .4s ease}
.hero__copy h1{font-family:var(--serif);font-weight:300;font-size:clamp(32px,7.5vw,52px);
  line-height:1.05;margin:0;letter-spacing:-.01em}
.hero__copy p{margin:0;max-width:38ch;font-size:14px;line-height:1.8;color:var(--muted-3)}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.hero__dots{display:flex;gap:8px;padding-top:8px}
.hero__dot{width:34px;height:2px;border:0;padding:0;cursor:pointer;background:#C9B8AE;
  display:block;transform:scaleX(.41);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,.8,.24,1),background-color .3s ease}
.hero__dot.is-on{transform:scaleX(1);background:var(--ink)}
.hero__media{position:relative;min-height:clamp(320px,58vw,520px);order:1;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease}
.hero__img.is-on{opacity:1}
.hero__tag{position:absolute;left:0;bottom:0;background:rgba(251,247,243,.94);padding:12px 18px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;display:none}
.hero__tag.is-on{display:block}
.hero__thumbs{position:absolute;right:16px;bottom:16px;display:flex;gap:8px}
.hero__thumb{width:54px;height:68px;padding:0;border:1px solid rgba(251,247,243,.7);cursor:pointer;
  background:transparent;overflow:hidden;display:block}
.hero__thumb img{width:100%;height:100%;object-fit:cover;display:block}

.trust{position:relative;z-index:2;background:var(--ink);color:var(--cream-2);
  padding:clamp(22px,3.6vw,40px) clamp(14px,4vw,22px) 34px;margin-top:16px}
.trust__inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:26px 48px}
.trust__logo{width:120px;height:46px;object-fit:cover;filter:invert(1);mix-blend-mode:screen}
.trust__item{display:flex;flex-direction:column;gap:4px;min-width:120px}
.trust__big{font-family:var(--serif);font-size:26px;line-height:1;color:var(--cream)}
.trust__small{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-6)}

.sec{padding:clamp(40px,6.5vw,72px) clamp(14px,4vw,22px);background:var(--base)}
.sec-panel{padding:clamp(35px,5.8vw,64px) clamp(14px,4vw,22px);background:var(--panel);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wrap{max-width:1280px;margin:0 auto}
.wrap-wide{max-width:1400px;margin:0 auto}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:28px}
.sec__head h2{font-family:var(--serif);font-weight:300;font-size:clamp(27px,6vw,38px);margin:8px 0 0}
.sec__head-2{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:24px}
.sec__head-2 h2{font-family:var(--serif);font-weight:300;font-size:clamp(25px,5.2vw,34px);margin:0}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,42vw,210px),1fr));gap:14px}
.cat-card{position:relative;background:#fff;border:1px solid var(--line-2);overflow:hidden;
  transition:transform .3s ease}
.cat-card:hover{transform:translateY(-3px)}
.cat-card__media{position:relative;aspect-ratio:3/4;overflow:hidden}
.cat-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.cat-card__soon{position:absolute;top:14px;left:-42px;transform:rotate(-38deg);background:var(--ink);
  color:var(--cream);padding:6px 52px;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.cat-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px}
.cat-card__body h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0}
.cat-card__body p{margin:0;font-size:12px;line-height:1.7;color:var(--muted);min-height:40px}

.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--line-4)}

.pcard{background:#fff;border:1px solid var(--line-2);
  transition:transform .35s cubic-bezier(.16,.8,.24,1),box-shadow .35s ease,border-color .35s ease}
.pcard:hover{transform:translateY(-5px);box-shadow:0 18px 38px -22px rgba(23,19,16,.45);border-color:var(--line-4)}
.pcard--rail{flex:0 0 236px;scroll-snap-align:start}
.pcard__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.16,.8,.24,1)}
.pcard:hover .pcard__media img{transform:scale(1.055)}

/* ---- Share row ------------------------------------------------------- */
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px}
.share__k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.share__btn{border:1px solid var(--line-4);background:transparent;color:var(--muted);
  padding:7px 13px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:border-color .22s ease,color .22s ease,transform .22s ease}
.share__btn:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}

/* ---- Cart upsell ----------------------------------------------------- */
.upsell{max-width:1280px;margin:clamp(26px,4vw,44px) auto 0}

/* ---- Production queue ------------------------------------------------ */
.capbar{background:var(--panel);border:1px solid var(--line-2);padding:16px 18px;
  display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.capbar__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.capbar__n{font-size:12px;color:var(--muted-3)}
.capbar__rail{display:block;height:6px;background:var(--line-3);overflow:hidden}
.capbar__fill{display:block;height:100%;background:var(--accent);
  transition:width .5s cubic-bezier(.16,.8,.24,1)}
.capbar__note{font-size:11.5px;color:#8A4B2B}

.prodq{display:flex;flex-direction:column}
.prodq__row{display:flex;gap:16px;align-items:flex-start;padding:15px 22px;
  border-bottom:1px solid var(--line-5);border-left:3px solid transparent;
  transition:background .2s ease,border-left-color .2s ease}
.prodq__row:last-child{border-bottom:0}
.prodq__row:hover{background:#F8F1EC}
.prodq__row.is-late{border-left-color:#8A2B2B;background:#FDF6F6}
.prodq__row.is-soon{border-left-color:#C4632B}

.prodq__when{flex:0 0 74px;display:flex;flex-direction:column;gap:2px;text-align:center;
  padding-top:2px}
.prodq__days{font-family:var(--serif);font-size:19px;line-height:1.1;color:var(--ink)}
.prodq__row.is-late .prodq__days{color:#8A2B2B}
.prodq__row.is-soon .prodq__days{color:#C4632B}
.prodq__due{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

.prodq__what{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.prodq__code{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.prodq__cust{font-size:13px}
.prodq__cust .tag{margin-left:6px}
.prodq__items{display:flex;flex-direction:column;gap:4px;padding-top:3px}
.prodq__item{font-size:11.5px;color:var(--muted-3);line-height:1.5}
.prodq__item b{font-weight:500;color:var(--ink)}
.prodq__item i{font-style:italic;color:var(--accent)}

.prodq__move{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;align-items:flex-end}

.prodq__empty{padding:44px 22px;text-align:center;display:flex;flex-direction:column;gap:6px}
.prodq__empty strong{font-family:var(--serif);font-weight:300;font-size:22px}
.prodq__empty span{font-size:12.5px;color:var(--muted-3)}

@media (max-width:760px){
  .prodq__row{flex-wrap:wrap;gap:10px;padding:14px}
  .prodq__when{flex:0 0 auto;flex-direction:row;align-items:baseline;gap:7px;text-align:left}
  .prodq__what{flex:1 1 100%;order:3}
  .prodq__move{flex:1 1 auto;flex-direction:row;align-items:center;justify-content:flex-end}
}

/* ---- Admin alert bar (low stock) ------------------------------------ */
.alertbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#FBF1E9;border:1px solid #E8CDB8;padding:12px 16px;margin-bottom:16px;
  animation:nbbFade .35s ease both}
.alertbar__k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8A4B2B;
  flex:0 0 auto}
.alertbar__items{display:flex;gap:8px;flex-wrap:wrap}
.alertbar__item{font-size:11.5px;color:#7A4526;border:1px solid #E8CDB8;background:#fff;
  padding:6px 11px;transition:border-color .2s ease,transform .2s ease}
.alertbar__item:hover{border-color:#C4632B;transform:translateY(-1px);color:#7A4526}
.alertbar__item b{font-weight:500}

/* ---- Low-stock nudge ------------------------------------------------- */
.stock-low{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:#FBEFE9;border:1px solid #E8C9B8;color:#8A4B2B;
  padding:8px 13px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.stock-low::before{content:'';width:6px;height:6px;border-radius:50%;background:#C4632B;
  animation:nbbStockPulse 1.8s ease-in-out infinite}
@keyframes nbbStockPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ---- 404 ------------------------------------------------------------- */
.notfound{background:var(--panel);padding:clamp(50px,9vw,110px) clamp(14px,4vw,22px)}
.notfound__inner{max-width:640px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.notfound h1{font-family:var(--serif);font-weight:300;margin:4px 0;
  font-size:clamp(30px,6.5vw,48px);line-height:1.1}
.notfound p{margin:0;font-size:14px;line-height:1.9;color:var(--muted-3);max-width:46ch}
.notfound__cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* ---- Discount code panel -------------------------------------------- */
.promo{display:flex;flex-direction:column;gap:12px;padding:20px 22px}
.promo__row{display:flex;gap:8px}
.promo__row .field{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.1em}
.promo__row .btn-sm-solid{flex:0 0 auto;white-space:nowrap}
.promo__note{margin:0;font-size:12px;line-height:1.7;color:var(--muted-3)}
.promo__on{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px dashed var(--accent);padding:11px 14px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  animation:nbbFade .3s ease both}
.summary__row--off span{color:var(--tan)}

/* ---- Live order ticker ----------------------------------------------- */
.livefeed{background:var(--panel);border-bottom:1px solid var(--line);
  overflow:hidden;padding:11px 0}
.livefeed__track{display:flex;width:max-content;gap:38px;
  animation:nbbTick 46s linear infinite}
.livefeed:hover .livefeed__track{animation-play-state:paused}
.livefeed__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:11.5px;color:var(--muted-3)}
.livefeed__item b{font-weight:500;color:var(--ink)}
.livefeed__item i{font-style:normal;color:var(--accent)}
.livefeed__dot{width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:nbbStockPulse 2s ease-in-out infinite}
.livefeed__ago{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* ---- Video reels ------------------------------------------------------ */
/* A phone-shaped rail, not full-width panels: a reel should read as a
   clip you could scroll past, and three of them must not out-shout the
   products above. Capped so one reel never grows past a phone's width. */
.reels{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:2px}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;flex:0 0 clamp(150px,22vw,230px);scroll-snap-align:start;
  aspect-ratio:9/16;overflow:hidden;display:block;
  background:var(--ink);border:1px solid var(--line-2);
  transition:transform .35s cubic-bezier(.16,.8,.24,1),box-shadow .35s ease}
.reel:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(23,19,16,.45)}
.reel img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.16,.8,.24,1)}
.reel:hover img{transform:scale(1.06)}
.reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(251,247,243,.92);color:var(--ink);font-size:15px;padding-left:3px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.12)}
.reel__cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 13px;
  background:linear-gradient(to top,rgba(23,19,16,.86),transparent);
  color:var(--cream);font-size:11.5px;line-height:1.45}

/* ---- Bridal date checker --------------------------------------------- */
.bridalcheck{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,3.5vw,44px);align-items:start}
.bridalcheck__copy{display:flex;flex-direction:column;gap:12px}
.bridalcheck__copy h2{font-family:var(--serif);font-weight:300;margin:0;
  font-size:clamp(25px,5vw,36px);line-height:1.12}
.bridalcheck__copy p{margin:0;font-size:13.5px;line-height:1.85;color:var(--muted-3);max-width:40ch}
.bridalcheck__form{display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--line-2);padding:22px}
.bridalcheck__res{display:flex;flex-direction:column;gap:8px;padding:16px;
  border-left:3px solid var(--line-4);background:var(--panel);
  animation:nbbFade .35s ease both}
.bridalcheck__res strong{font-weight:500;font-size:14px}
.bridalcheck__res span{font-size:12.5px;line-height:1.75;color:var(--muted-3)}
.bridalcheck__res.is-ok{border-left-color:var(--green);background:#F1F7F3}
.bridalcheck__res.is-tight{border-left-color:#C4632B;background:#FBF1E9}
.bridalcheck__res.is-busy{border-left-color:#C4632B;background:#FBF1E9}
.bridalcheck__res.is-err{border-left-color:#8A2B2B;background:#FBEAEA}

@media (max-width:760px){
  .reels{gap:8px}
  .livefeed__item{font-size:10.5px}
}

.refer__share{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}

/* ---- Membership card ------------------------------------------------- */
.memcard{
  --card-ink:#171310; --card-foil:#C9A227;
  position:relative;overflow:hidden;margin-top:20px;
  max-width:420px;padding:22px 24px 20px;
  display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(145deg,#241D18 0%,#171310 55%,#2C231C 100%);
  color:var(--cream);border:1px solid rgba(201,162,39,.34);
  box-shadow:0 20px 44px -24px rgba(23,19,16,.75);
  animation:nbbFade .45s ease both}
/* a soft sheen so it reads as a card, not a dark box */
.memcard::after{content:'';position:absolute;top:-60%;left:-30%;width:60%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  transform:rotate(18deg);pointer-events:none}
.memcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.memcard__logo{width:96px;height:38px;object-fit:cover;filter:invert(1);mix-blend-mode:screen}
.memcard__badge{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--card-foil);color:var(--card-foil);padding:5px 10px;white-space:nowrap}
.memcard__body{display:flex;flex-direction:column;gap:4px}
.memcard__name{font-family:var(--serif);font-size:24px;font-weight:300;line-height:1.1}
.memcard__no{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-6)}
.memcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.memcard__pts{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.memcard__ptsv{font-family:var(--serif);font-size:30px;line-height:1;color:var(--card-foil)}
.memcard__ptsk{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.memcard__prog{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.memcard__progk{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-6)}
.memcard__bar{display:block;height:3px;background:rgba(251,247,243,.16);overflow:hidden}
.memcard__bar span{display:block;height:100%;background:var(--card-foil);
  animation:nbbBarGrow .9s cubic-bezier(.16,.8,.24,1) both}
@keyframes nbbBarGrow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
.memcard__perk{font-size:11px;letter-spacing:.05em;color:var(--muted-6);
  border-top:1px solid rgba(251,247,243,.1);padding-top:12px}
/* each tier gets its own foil colour */
.memcard[data-tier="silver"]  { --card-foil:#C7CBD1 }
.memcard[data-tier="gold"]    { --card-foil:#D9AE3B }
.memcard[data-tier="platinum"]{ --card-foil:#E6E1D8 }
@media (max-width:520px){
  .memcard{max-width:none;padding:18px 18px 16px}
  .memcard__foot{flex-direction:column;align-items:stretch;gap:12px}
  .memcard__name{font-size:21px}
}

/* ---- Guided email setup (admin) -------------------------------------- */
.mailwarn{background:#FBEAEA;border:1px solid #E4BDBD;padding:16px 18px;margin-bottom:16px;
  display:flex;flex-direction:column;gap:8px}
.mailwarn__k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8A2B2B}
.mailwarn p{margin:0;font-size:12.5px;line-height:1.75;color:#6E2A2A}
.mailwarn b{font-weight:500}

.mailsetup{margin-bottom:16px}
.mailsteps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.mailsteps li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-5)}
.mailsteps li:last-child{border-bottom:0}
.mailsteps__n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:11px}
.mailsteps li > div{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.mailsteps b{font-weight:500;font-size:13px}
.mailsteps p{margin:0;font-size:12px;line-height:1.7;color:var(--muted-3);max-width:62ch}
.mailsteps code{background:var(--base);padding:1px 5px;font-size:11.5px}
.mailsteps i{font-style:italic}

/* ---- Product specs (stocked goods, nothing to choose) ---------------- */
.pdp__specs{display:flex;gap:10px;flex-wrap:wrap}
.pdp__spec{display:flex;flex-direction:column;gap:3px;
  border:1px solid var(--line-3);background:#fff;padding:10px 14px;min-width:96px}
.pdp__spec span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.pdp__spec b{font-weight:500;font-size:13.5px}

/* ---- Admin: tick-all-that-apply option picker ------------------------ */
.optpick{display:flex;flex-direction:column;gap:6px}
.optpick[hidden]{display:none}
.optpick__box{display:flex;gap:6px;flex-wrap:wrap;
  border:1px solid var(--line-3);background:#fff;padding:9px 10px}
.optpick__one{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--line-4);padding:6px 10px;font-size:11.5px;
  transition:border-color .2s ease,background .2s ease}
.optpick__one:hover{border-color:var(--accent)}
.optpick__one input{margin:0}
.optpick__one:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ---- Whole card is the link ------------------------------------------ */
.pcard__media{position:relative}
.pcard__link{position:absolute;inset:0;z-index:1}
/* the heart and any badge must stay clickable above it */
.pcard__media .wishbtn,
.pcard__media .pcard__badge{z-index:2}

/* ---- Gifting --------------------------------------------------------- */
.giftcheck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border:1px solid var(--line-3);background:#fff;padding:13px 15px;
  transition:border-color .22s ease}
.giftcheck:hover{border-color:var(--accent)}
.giftcheck input{margin-top:3px;flex:0 0 auto}
.giftcheck span{display:flex;flex-direction:column;gap:2px}
.giftcheck b{font-weight:500;font-size:13px}
.giftcheck small{font-size:11.5px;line-height:1.5;color:var(--muted-3)}
.giftfields{display:flex;flex-direction:column;gap:10px;
  animation:nbbFade .3s ease both}
.giftfields[hidden]{display:none}

.giftnote{border:1px dashed var(--accent);background:var(--panel);padding:14px 16px;
  display:flex;flex-direction:column;gap:6px}
.giftnote__k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.giftnote__msg{margin:0;font-size:13px;line-height:1.7;font-style:italic}
.giftnote__from{font-size:11.5px;color:var(--muted-3)}

/* ---- Back-in-stock waitlist ------------------------------------------ */
.restock{border:1px solid var(--line-3);background:var(--panel);padding:16px 18px;
  display:flex;flex-direction:column;gap:9px}
.restock__k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.restock p{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted-3)}
.restock__done{color:var(--green) !important}
.restock__form{display:flex;gap:8px;flex-wrap:wrap}
.restock__form .field{flex:1 1 180px;min-width:0}

/* ---- Refunds and exchanges (admin) ----------------------------------- */
.refundrow{display:flex;flex-direction:column;gap:4px;padding:11px 13px;
  border:1px solid var(--line-2);background:#fff;border-left:3px solid var(--line-4)}
.refundrow.is-done{border-left-color:var(--green)}
.refundrow.is-declined{border-left-color:var(--muted-2);opacity:.72}
.refundrow.is-open{border-left-color:#C4632B}
.refundrow__k{font-size:12px;font-weight:500}
.refundrow__why{font-size:11.5px;line-height:1.55;color:var(--muted-3)}
.refundrow__when{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.refundrow__cta{display:flex;gap:6px;padding-top:5px}
.refundform{display:flex;flex-direction:column;gap:8px}
.refundform__row{display:flex;gap:8px}
.refundform__row .field{flex:1;min-width:0}

.switch__row{display:flex;gap:6px;flex-wrap:wrap}

/* ---- Loyalty: tier badges (admin) and history (customer) ------------ */
.tier{display:inline-block;padding:4px 9px;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;border:1px solid var(--line-4);color:var(--muted-3)}
.tier--bronze  {border-color:#C08A5E;color:#8A5A33}
.tier--silver  {border-color:#A9AEB5;color:#5E646B}
.tier--gold    {border-color:#C9A227;color:#8A6E12}
.tier--platinum{border-color:#8C8579;color:#4A463F;background:#F3F1EC}
.ptsform{display:flex;gap:5px;margin-top:7px;justify-content:flex-end}
.ptsform .field{width:74px;padding:6px 8px;font-size:11px;text-align:center}

.loyalog{display:flex;flex-direction:column;gap:0;
  background:var(--panel);border:1px solid var(--line-2);padding:20px 22px}
.loyalog .eyebrow-sm{margin-bottom:12px}
.loyalog__row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line-5)}
.loyalog__what{font-size:12.5px}
.loyalog__when{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.loyalog__pts{font-family:var(--serif);font-size:16px;color:var(--accent);min-width:44px;text-align:right}
.loyalog__pts.is-down{color:#8A2B2B}
.loyalog .hint{padding-top:12px}

/* ---- Saved addresses at checkout ------------------------------------ */
.savedaddr{display:flex;flex-direction:column;gap:8px}
.savedaddr__k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.savedaddr__list{display:flex;gap:8px;flex-wrap:wrap}
.savedaddr__pick{flex:1 1 190px;text-align:left;cursor:pointer;
  border:1px solid var(--line-3);background:#fff;padding:11px 13px;
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .22s ease,transform .22s ease}
.savedaddr__pick:hover{border-color:var(--accent);transform:translateY(-1px)}
.savedaddr__pick.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.savedaddr__pick b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.savedaddr__pick span{font-size:11.5px;line-height:1.5;color:var(--muted-3)}

/* ---- Courier tracking number ---------------------------------------- */
.trackno{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  border:1px dashed var(--accent);background:var(--panel);padding:12px 15px}
.trackno__k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.trackno__v{font-size:14px;letter-spacing:.09em;font-weight:500;flex:1;min-width:0;
  word-break:break-all}
.trackform{display:flex;flex-direction:column;gap:7px}
.notecheck{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;
  line-height:1.5;color:var(--muted-3);cursor:pointer}
.notecheck input{margin-top:2px;flex:0 0 auto}
.note--internal{border-left:3px solid var(--accent);background:#FBF4EF}

/* ---- Order tracker (customer dashboard) ----------------------------- */
.track{display:flex;list-style:none;margin:20px 0 4px;padding:0;counter-reset:track}
.track__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  position:relative;text-align:center}
/* the connecting rail, drawn behind each dot */
.track__step::before{content:'';position:absolute;top:8px;left:-50%;width:100%;height:2px;
  background:var(--line-3);z-index:0}
.track__step:first-child::before{display:none}
.track__step.is-done::before,.track__step.is-now::before{background:var(--accent)}
.track__dot{width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--line-3);position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.track__label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-4);transition:color .3s ease;line-height:1.4}
.track__step.is-done .track__dot{background:var(--accent);border-color:var(--accent)}
.track__step.is-done .track__dot::after{content:'✓';color:#fff;font-size:10px;line-height:1}
.track__step.is-done .track__label{color:var(--muted-3)}
.track__step.is-now .track__dot{background:var(--ink);border-color:var(--ink);transform:scale(1.15)}
/* a soft halo so the current step reads at a glance */
.track__step.is-now .track__dot::before{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--ink);opacity:.28;animation:nbbTrackPulse 2.2s ease-in-out infinite}
@keyframes nbbTrackPulse{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(1.18);opacity:.08}}
.track__step.is-now .track__label{color:var(--ink)}
@media (max-width:520px){
  .track__label{font-size:7.5px;letter-spacing:.06em}
  .track__dot{width:15px;height:15px}
  .track__step::before{top:6.5px}
}

/* ---- Install app bar ------------------------------------------------- */
.installbar{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:110;
  display:none;align-items:center;gap:13px;
  background:var(--panel);border:1px solid var(--line-3);
  padding:12px 14px;box-shadow:0 20px 44px -20px rgba(23,19,16,.5);
  transform:translateY(120%);transition:transform .4s cubic-bezier(.16,.8,.24,1)}
.installbar.is-on{display:flex;transform:translateY(0)}
.installbar__icon{width:42px;height:42px;flex:0 0 auto;border:1px solid var(--line-2)}
.installbar__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.installbar__copy strong{font-weight:500;font-size:13px}
.installbar__copy span{font-size:11.5px;line-height:1.5;color:var(--muted-3)}
/* only the line matching the current mode is shown */
.installbar__ios{display:none}
.installbar[data-mode="ios"] .installbar__prompt{display:none}
.installbar[data-mode="ios"] .installbar__ios{display:block}
.installbar[data-mode="ios"] [data-install-go]{display:none}
.installbar__cta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.installbar__x{border:0;background:transparent;cursor:pointer;color:var(--muted-2);
  font-size:13px;line-height:1;padding:8px}
.installbar__x:hover{color:var(--ink)}
/* clear the fixed mobile action bar when it is on screen */
@media (max-width:760px){ .installbar{bottom:74px} }
@media (max-width:420px){
  .installbar{gap:10px;padding:11px 12px}
  .installbar__icon{width:36px;height:36px}
  .installbar__copy strong{font-size:12px}
  .installbar__copy span{font-size:10.5px}
}

/* ---- Toast ---------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:26px;z-index:120;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--cream);padding:13px 22px;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 16px 40px -16px rgba(23,19,16,.6);max-width:calc(100vw - 32px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.16,.8,.24,1)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast--warn{background:#8A2B2B}
@media (max-width:760px){ .toast{bottom:78px} }

/* ---- Wishlist heart ------------------------------------------------- */
.wishbtn{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border:1px solid var(--line-3);border-radius:50%;background:rgba(251,247,243,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.wishbtn svg{width:17px;height:17px;fill:none;stroke:var(--muted-3);stroke-width:1.7;
  stroke-linejoin:round;transition:fill .25s ease,stroke .25s ease}
.wishbtn:hover{transform:scale(1.09);border-color:var(--accent)}
.wishbtn:hover svg{stroke:var(--accent)}
.wishbtn.is-on{background:var(--ink);border-color:var(--ink)}
.wishbtn.is-on svg{fill:var(--tan);stroke:var(--tan)}
.wishbtn.is-bumped{animation:nbbHeart .42s cubic-bezier(.3,1.4,.5,1)}
@keyframes nbbHeart{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
/* On the product page it sits in the button row instead of over an image. */
.wishbtn--inline{position:static;width:46px;height:46px;flex:0 0 auto;border-radius:50%}
.wishbtn--inline svg{width:20px;height:20px}
.pcard__badge{position:absolute;top:10px;left:10px;background:rgba(251,247,243,.94);
  padding:5px 9px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
/* The body has to fill whatever height the tallest card in the row takes,
   so the price and View button sit on one line at the bottom of every
   card instead of floating wherever a one- or two-line name leaves them. */
.pcard{display:flex;flex-direction:column}
.pcard__body{padding:13px 14px 16px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto}
.pcard__name{font-family:var(--serif);font-size:18px;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(2 * 1.32em)}
.pcard__meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-top:4px;margin-top:auto}
.pcard__price{font-size:13px;white-space:nowrap}
.pcard__foot .btn-sm-solid,
.pcard__foot .btn-sm{flex:0 0 auto}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(140px,40vw,200px),1fr));
  gap:16px;text-align:left}
.step{background:var(--panel);border:1px solid var(--line-2);padding:24px 20px;
  display:flex;flex-direction:column;gap:10px}
.step__num{font-family:var(--serif);font-size:clamp(23px,4.6vw,30px);color:var(--tan-2);line-height:1}
.step h3{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.step p{margin:0;font-size:12.5px;line-height:1.75;color:var(--muted)}

.bridal-band{background:var(--ink);color:var(--cream-2);padding:0}
.bridal-band__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:1400px;margin:0 auto;padding:0 clamp(12px,2.4vw,32px)}
.bridal-band__copy{padding:clamp(38px,7vw,70px) clamp(18px,4.5vw,44px);display:flex;
  flex-direction:column;justify-content:center;gap:20px}
.bridal-band__copy h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,6.5vw,44px);
  line-height:1.1;margin:0;color:var(--cream)}
.bridal-band__copy p{margin:0;max-width:40ch;font-size:14px;line-height:1.85;color:var(--muted-6)}
.bridal-band__facts{display:flex;gap:26px;flex-wrap:wrap;padding-top:6px}
.fact{display:flex;flex-direction:column;gap:3px}
.fact__big{font-family:var(--serif);font-size:22px;color:var(--cream)}
.fact__small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.bridal-band__imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px}
.bridal-band__imgs div{aspect-ratio:1/1;overflow:hidden}
.bridal-band__imgs img{width:100%;height:100%;object-fit:cover;display:block}

.rcard{flex:0 0 300px;scroll-snap-align:start;background:var(--base);border:1px solid var(--line-2);
  display:flex;flex-direction:column}
.rcard__media{aspect-ratio:16/11;overflow:hidden}
.rcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.rcard__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.rcard__stars{color:var(--accent);font-size:12px;letter-spacing:.2em}
.rcard__body p{margin:0;font-family:var(--serif);font-size:17px;line-height:1.5;font-style:italic;color:#3A302B}
.rcard__who{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}

.insta__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.insta__head h2{font-family:var(--serif);font-weight:300;font-size:clamp(23px,4.6vw,30px);margin:0}
.insta__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.insta__grid a{position:relative;aspect-ratio:1/1;overflow:hidden;display:block}
.insta__grid img{width:100%;height:100%;object-fit:cover;display:block}

.promo-row{padding:0 clamp(14px,4vw,22px) clamp(34px,6vw,64px);background:var(--base)}
.promo-row__grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.promo-custom{position:relative;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;
  padding:30px;background:var(--ink)}
.promo-custom > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.promo-custom__in{position:relative;display:flex;flex-direction:column;gap:14px}
.promo-custom__in h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,5vw,32px);
  margin:0;color:var(--cream);max-width:22ch}
.promo-custom__in p{margin:0;font-size:12.5px;line-height:1.7;color:#DCCFC7;max-width:34ch}
.promo-ref{background:var(--tan);padding:30px;display:flex;flex-direction:column;
  justify-content:center;gap:14px;min-height:260px}
.promo-ref h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,5vw,32px);margin:0;max-width:20ch}
.promo-ref p{margin:0;font-size:12.5px;line-height:1.7;color:#5C463A;max-width:36ch}
.promo-ref__eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#7B5B49}
.promo-ref__code{display:flex;align-items:center;gap:10px;background:rgba(251,247,243,.7);
  border:1px dashed var(--accent);padding:12px 16px;align-self:flex-start}
.promo-ref__code span{font-size:13px;letter-spacing:.2em}

.delivery{background:var(--panel);border-top:1px solid var(--line);
  padding:clamp(24px,4vw,44px) clamp(14px,4vw,22px)}
.delivery__grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.delivery__item{display:flex;flex-direction:column;gap:8px}
.delivery__k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.delivery__v{font-family:var(--serif);font-size:20px}
.delivery__d{font-size:12px;line-height:1.7;color:var(--muted)}

/* ---------------------------------------------------------------------
   SHOP
   --------------------------------------------------------------------- */
.page-head{background:var(--panel);border-bottom:1px solid var(--line);
  padding:clamp(24px,4vw,44px) clamp(14px,4vw,22px) 0}
.page-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(29px,6.4vw,42px);margin:8px 0 6px}
.page-head p{margin:0 0 18px;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:52ch}
.page-head--plain{padding:clamp(29px,4.7vw,52px) clamp(14px,4vw,22px) 24px}
.page-head--plain h1{margin:8px 0 8px}
.page-head--plain p{margin:0;max-width:56ch;line-height:1.8}
.tabrow{display:flex;gap:4px;overflow-x:auto;border-top:1px solid var(--line);scrollbar-width:none}
.tabrow::-webkit-scrollbar{display:none}

.shop-body{padding:clamp(18px,2.4vw,26px) clamp(14px,4vw,22px) 72px;background:var(--base)}
.filters{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.filters__groups{display:flex;gap:24px;flex-wrap:wrap}
.filters__group{display:flex;flex-direction:column;gap:9px}
.filters__chips{display:flex;gap:6px;flex-wrap:wrap}
.filters__count{display:flex;align-items:center;gap:14px}
.filters__count span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,42vw,226px),1fr));gap:14px}
.grid-products-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,42vw,216px),1fr));gap:14px}

.soon-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;
  background:var(--panel);border:1px solid var(--line-2);margin-bottom:14px}
.soon-panel__img{min-height:300px;overflow:hidden}
.soon-panel__img img{width:100%;height:100%;object-fit:cover;display:block}
.soon-panel__copy{padding:clamp(28px,5.5vw,44px) clamp(20px,4.5vw,34px);display:flex;
  flex-direction:column;justify-content:center;gap:14px}
.soon-panel__copy h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,5vw,32px);margin:0}
.soon-panel__copy p{margin:0;font-size:13px;line-height:1.8;color:var(--muted);max-width:40ch}
.soon-panel__form{display:flex;gap:8px;flex-wrap:wrap}
.soon-panel__form input{border:1px solid var(--line-3);background:#fff;padding:13px 14px;
  font-size:13px;outline:0;min-width:200px;flex:1 1 200px}

/* ---------------------------------------------------------------------
   PRODUCT
   --------------------------------------------------------------------- */
.pdp{padding:clamp(20px,3.3vw,36px) clamp(14px,4vw,22px) 20px;background:var(--panel)}
.pdp__grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:38px}
.pdp__gallery{display:flex;flex-direction:column;gap:10px}
.pdp__main{aspect-ratio:4/5;overflow:hidden;background:var(--base)}
.pdp__main img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pdp__thumb{aspect-ratio:1/1;padding:0;cursor:pointer;background:transparent;
  border:1px solid var(--line-2);display:block;overflow:hidden}
.pdp__thumb.is-on{border-color:var(--ink)}
.pdp__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__video{aspect-ratio:1/1;border:1px solid var(--line-2);background:var(--base);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted-4)}
.pdp__video span:first-child{font-size:15px}
.pdp__video span:last-child{font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.pdp__info{display:flex;flex-direction:column;gap:18px;padding-top:6px}
.pdp__title{display:flex;flex-direction:column;gap:8px}
.pdp__title .eyebrow{letter-spacing:.28em}
.pdp__title h1{font-family:var(--serif);font-weight:300;font-size:clamp(29px,6.4vw,42px);margin:0;line-height:1.05}
.pdp__price{display:flex;align-items:baseline;gap:12px}
.pdp__price b{font-size:20px;font-weight:400}
.pdp__price span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.pdp__blurb{margin:0;font-size:13.5px;line-height:1.85;color:var(--muted-3);max-width:46ch}
.pdp__opt{display:flex;flex-direction:column;gap:10px}
.pdp__opt > span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.pdp__opt .filters__chips{gap:6px}
.pdp__size{background:var(--base);border:1px solid var(--line-2);padding:16px 18px;
  display:flex;flex-direction:column;gap:6px}
.pdp__size > span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pdp__size p{margin:0;font-size:12.5px;line-height:1.75;color:var(--muted-3)}
.pdp__size a{border-bottom:1px solid var(--accent)}
.pdp__hint{font-size:11px;letter-spacing:.1em;color:var(--accent)}
.pdp__added{background:var(--ink);color:var(--cream-2);padding:14px 18px;font-size:11.5px;letter-spacing:.1em}
.pdp__added a{color:var(--tan);border-bottom:1px solid #6B564A}
.pdp__cta{display:flex;gap:10px;flex-wrap:wrap}
.pdp__facts{display:flex;gap:22px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
.pdp__facts span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);padding-top:14px}
.related{padding:clamp(31px,5.1vw,56px) clamp(14px,4vw,22px) 72px;background:var(--base)}
.related h2{font-family:var(--serif);font-weight:300;font-size:clamp(23px,4.6vw,30px);margin:0 0 20px}
.rel-card{background:#fff;border:1px solid var(--line-2)}
.rel-card__media{aspect-ratio:4/5;overflow:hidden}
.rel-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.rel-card__body{padding:13px 14px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rel-card__body .n{font-family:var(--serif);font-size:17px}
.rel-card__body .p{font-size:12px;color:var(--muted)}

/* ---------------------------------------------------------------------
   CUSTOM ORDER
   --------------------------------------------------------------------- */
.custom-hero{position:relative;background:var(--ink);padding:clamp(33px,5.5vw,60px) clamp(14px,4vw,22px)}
.custom-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.custom-hero__in{position:relative;max-width:1280px;margin:0 auto}
.custom-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,6.5vw,44px);
  margin:8px 0 8px;color:var(--cream);max-width:24ch}
.custom-hero p{margin:0;font-size:13.5px;line-height:1.8;color:#DCCFC7;max-width:52ch}

.two-col{padding:clamp(24px,4vw,44px) clamp(14px,4vw,22px) 72px;background:var(--base)}
.two-col__grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line-2)}
.card-pad{padding:clamp(20px,4.5vw,30px) clamp(18px,4vw,28px);display:flex;flex-direction:column;gap:22px}
.card-pad-sm{padding:clamp(20px,4vw,26px) clamp(16px,3.6vw,24px);display:flex;flex-direction:column;gap:14px}
.card-dark{background:var(--ink);color:#DCCFC7;padding:clamp(20px,4vw,26px) clamp(16px,3.6vw,24px);
  display:flex;flex-direction:column;gap:12px}
.card-dark p{margin:0;font-size:12.5px;line-height:1.8}
.card-dark .eyebrow-sm{color:var(--tan)}
.stack{display:flex;flex-direction:column;gap:14px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.grid-2-tight{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.bridal-note{background:var(--tan);border:1px solid var(--tan-2);padding:20px;
  display:flex;flex-direction:column;gap:12px}
.bridal-note p{margin:0;font-size:12.5px;line-height:1.75;color:#5C463A}
.bridal-note > span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#5C463A}
.bridal-note .label-2 > span{color:#5C463A;letter-spacing:.18em}
.bridal-note .field{border-color:var(--tan-2);background:var(--panel);padding:11px}
.paylist{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.paylist__item{display:flex;flex-direction:column;gap:2px}
.paylist__k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.paylist__v{font-size:12.5px;color:var(--muted-3)}
.foot-note{margin:0;font-size:12px;line-height:1.7;color:var(--muted-4);
  border-top:1px solid var(--line);padding-top:14px}

/* ---------------------------------------------------------------------
   SIZE GUIDE
   --------------------------------------------------------------------- */
.measure{display:flex;gap:16px;align-items:flex-start}
.measure__num{font-family:var(--serif);font-size:26px;color:var(--tan-2);line-height:1;min-width:32px}
.measure__t{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.measure__d{font-size:12.5px;line-height:1.75;color:var(--muted-3)}
.diagram{display:flex;align-items:flex-end;gap:10px;padding:18px;background:var(--base);
  border:1px solid var(--line-2);flex-wrap:wrap}
.diagram__col{display:flex;flex-direction:column;align-items:center;gap:8px}
.diagram__nail{background:var(--tan);border:1px solid var(--tan-2)}
.diagram__w{font-size:9px;letter-spacing:.1em;color:var(--muted-4)}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{padding:10px 24px;font-weight:400;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--line);text-align:left;color:var(--muted-2)}
.tbl th.tight,.tbl td.tight{padding-left:12px;padding-right:12px}
.tbl td{padding:11px 24px;border-bottom:1px solid var(--line-5)}
.tbl td.size{font-family:var(--serif);font-size:17px}
.tbl td.muted{color:var(--muted)}
.sizeset{background:#fff;border:1px solid var(--line-2);padding:18px;display:flex;flex-direction:column;gap:5px}
.sizeset__k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.sizeset__v{font-size:12px;line-height:1.6;color:var(--muted)}

/* ---------------------------------------------------------------------
   CART / CHECKOUT
   --------------------------------------------------------------------- */
.checkout{padding:clamp(20px,3.3vw,36px) clamp(14px,4vw,22px) 80px;background:var(--base)}
.checkout__grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}

/* ---- Checkout step progress bar ---- */
.ckstep{max-width:1280px;margin:0 auto clamp(22px,3vw,34px);display:flex;align-items:center;
  padding:0 clamp(14px,4vw,22px)}
.ckstep__dot{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;position:relative}
.ckstep__num{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-3);background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted-3);
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s ease}
.ckstep__label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-4);
  white-space:nowrap;transition:color .35s ease}
.ckstep__dot.is-active .ckstep__num{background:var(--ink);border-color:var(--ink);color:var(--cream);transform:scale(1.08)}
.ckstep__dot.is-active .ckstep__label{color:var(--ink)}
.ckstep__dot.is-done .ckstep__num{background:var(--accent);border-color:var(--accent);color:#fff}
.ckstep__dot.is-done .ckstep__num::after{content:'✓'}
.ckstep__dot.is-done .ckstep__num span{display:none}
.ckstep__line{flex:1 1 auto;height:1px;background:var(--line-3);margin:0 6px 20px;position:relative;overflow:hidden}
.ckstep__line::after{content:'';position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.ckstep__line.is-filled::after{transform:scaleX(1)}

/* ---- Step panels ---- */
.step-panel{display:none;animation:nbbStepIn .4s cubic-bezier(.16,.8,.24,1) both}
.step-panel.is-active{display:flex;flex-direction:column;gap:var(--gap,16px)}
.step-panel[data-step="1"].is-active{display:block}
@keyframes nbbStepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:16px;
  border-top:1px solid var(--line-5)}

.review-block{display:flex;flex-direction:column;gap:0;border:1px solid var(--line-2)}
.review-block__row{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line-5);font-size:12.5px}
.review-block__row:last-child{border-bottom:0}
.review-block__row span{color:var(--muted-3)}
.review-block__row strong{font-weight:500;text-align:right;max-width:60%}

#placeOrderBtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-tan__spin{width:14px;height:14px;border:2px solid rgba(23,19,16,.25);border-top-color:var(--ink);
  border-radius:50%;animation:nbbSpin .7s linear infinite}
@keyframes nbbSpin{to{transform:rotate(360deg)}}
#placeOrderBtn.is-loading .btn-tan__label{opacity:.6}
[data-shake]{animation:nbbShake .4s ease}
@keyframes nbbShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.field.is-invalid,.field-lg.is-invalid{border-color:#C0524F;background:#FBEEEE}

@media (max-width:640px){
  .ckstep__label{display:none}
  .ckstep__num{width:26px;height:26px;font-size:11px}
}

/* ---- Order-placed success screen ---- */
.order-success{background:var(--panel);border:1px solid var(--line-2);padding:clamp(32px,6vw,56px) clamp(20px,5vw,40px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.order-success__check{width:78px;height:78px;margin-bottom:8px}
.order-success__check svg{width:100%;height:100%}
.order-success__check circle{fill:none;stroke:var(--ink);stroke-width:2;
  stroke-dasharray:151;stroke-dashoffset:151;animation:nbbCircle .6s ease forwards}
.order-success__check path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;animation:nbbCheck .4s ease forwards .55s}
@keyframes nbbCircle{to{stroke-dashoffset:0}}
@keyframes nbbCheck{to{stroke-dashoffset:0}}
.order-success h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,4vw,32px);margin:2px 0}
.order-success__code{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-3);
  border:1px solid var(--line-3);padding:6px 14px;display:inline-block;margin:2px 0}
.order-success p{margin:0;font-size:13px;color:var(--muted-3);line-height:1.8;max-width:44ch}
.order-success__steps{display:flex;gap:0;margin-top:26px;width:100%;max-width:480px}
.order-success__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-4);position:relative}
.order-success__step::before{content:'';position:absolute;top:12px;left:-50%;width:100%;height:1px;background:var(--line-3);z-index:0}
.order-success__step:first-child::before{display:none}
.order-success__step span{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--line-3);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--muted-3);z-index:1;position:relative}
.order-success__step.is-on span{background:var(--ink);border-color:var(--ink);color:var(--cream);
  animation:nbbPop .4s ease .9s both}
.order-success__step.is-on{color:var(--ink)}
@keyframes nbbPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.panel{background:var(--panel);border:1px solid var(--line-2);padding:24px}
.cart-item{display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line-5);padding-bottom:14px}
.cart-item__img{width:74px;height:92px;flex:0 0 auto;overflow:hidden;background:var(--base)}
.cart-item__img img{width:100%;height:100%;object-fit:cover;display:block}
.cart-item__body{flex:1;display:flex;flex-direction:column;gap:5px}
.cart-item__n{font-family:var(--serif);font-size:19px}
.cart-item__meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.cart-item__price{font-size:13.5px}
.paymode{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-4);
  border:1px solid var(--line-4);padding:5px 10px}
.paymode--gw{color:var(--green);border-color:#BFD9CB}
.paybox{border:1px solid var(--line);background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.summary{background:var(--ink);color:#DCCFC7;padding:clamp(20px,4vw,26px) clamp(16px,3.6vw,24px);
  display:flex;flex-direction:column;gap:12px}
.summary__row{display:flex;justify-content:space-between;font-size:13px}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--dark-line);padding-top:12px}
.summary__total span:first-child{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-2)}
.summary__total span:last-child{font-family:var(--serif);font-size:clamp(23px,4.6vw,30px);color:var(--cream)}
.summary p{margin:0;font-size:11.5px;line-height:1.7;color:var(--muted-2)}

/* ---------------------------------------------------------------------
   ACCOUNT / DASHBOARD
   --------------------------------------------------------------------- */
.dash-head{padding:clamp(24px,4vw,44px) clamp(14px,4vw,22px) 0;background:var(--panel);
  border-bottom:1px solid var(--line)}
.dash-head__top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(27px,6vw,38px);margin:8px 0 4px}
.dash-head__sub{font-size:12px;color:var(--muted)}
.dash-head__actions{display:flex;gap:8px;flex-wrap:wrap}
.dash-tabs{display:flex;gap:4px;overflow-x:auto;margin-top:18px;scrollbar-width:none}
.dash-tabs::-webkit-scrollbar{display:none}
@media (max-width:640px){
  .dash-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow-x:visible}
  .dash-tabs .tab{text-align:center;white-space:normal;padding:10px 6px;font-size:9px;letter-spacing:.1em;
    border:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}
  .dash-tabs .tab.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
}
.dash-body{padding:clamp(18px,2.9vw,32px) clamp(14px,4vw,22px) 80px;background:var(--base)}

.order-row{background:var(--panel);border:1px solid var(--line-2);padding:16px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.order-row__img{width:66px;height:82px;overflow:hidden;background:var(--base);flex:0 0 auto}
.order-row__img img{width:100%;height:100%;object-fit:cover;display:block}
.order-row__main{flex:1 1 200px;display:flex;flex-direction:column;gap:4px}
.order-row__id{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.order-row__items{font-family:var(--serif);font-size:19px}
.order-row__kind{font-size:11.5px;color:var(--muted)}
.order-row__side{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pill{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);
  color:var(--cream);padding:5px 10px;display:inline-block}
.pill-lg{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);
  color:var(--cream);padding:6px 12px;display:inline-block}
.order-row__cta{display:flex;gap:8px;flex-wrap:wrap}

.grid-start{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.grid-start-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.detail-head__l{display:flex;flex-direction:column;gap:5px}
.detail-head__id{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.detail-head__t{font-family:var(--serif);font-size:24px}
.detail-head__k{font-size:12px;color:var(--muted)}
.tracker{display:flex;align-items:center;gap:8px;margin-top:26px}
.tracker__step{display:flex;align-items:center;gap:8px;flex:1}
.tracker__col{display:flex;flex-direction:column;align-items:center;gap:8px}
.tracker__dot{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:10px;letter-spacing:.08em;background:transparent;
  color:var(--muted-5);border:1px solid var(--line-4);flex:0 0 auto}
.tracker__dot.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.tracker__label{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}
.tracker__bar{flex:1;height:1px;background:var(--line-4);min-width:8px}
.tracker__bar.is-on{background:var(--ink)}
.note{border-left:1px solid var(--tan);padding:0 0 0 14px;display:flex;flex-direction:column;gap:4px}
.note__who{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.note__t{font-size:12.5px;line-height:1.75;color:#4A3D37}
.note-form{display:flex;gap:8px;flex-wrap:wrap}
.note-form input{flex:1 1 180px}
.payhist{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line-5);padding-bottom:10px}
.payhist__l,.payhist__r{display:flex;flex-direction:column;gap:3px}
.payhist__r{align-items:flex-end}
.payhist__k{font-size:12.5px}
.payhist__w{font-size:11px;color:var(--muted-2)}
.payhist__s{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.wish-card{background:var(--panel);border:1px solid var(--line-2)}
.addr{border:1px solid var(--line);background:#fff;padding:14px;display:flex;flex-direction:column;gap:4px}
.addr__k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.addr__v{font-size:12.5px;line-height:1.7;color:#4A3D37}
.refer{background:var(--tan);padding:24px;display:flex;flex-direction:column;gap:10px}
.refer__eyebrow{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#5C463A}
.refer__code{font-family:var(--serif);font-size:28px;letter-spacing:.06em}
.refer__d{font-size:12px;line-height:1.7;color:#5C463A}
.review-form{max-width:640px;background:var(--panel);border:1px solid var(--line-2);
  padding:28px;display:flex;flex-direction:column;gap:16px}
.review-form__t{font-family:var(--serif);font-size:24px}
.rate{display:flex;gap:8px;align-items:center}
.rate__stars{display:flex;gap:2px}
.rate__star{border:0;background:transparent;padding:0;cursor:pointer;font-size:22px;
  color:var(--line-4);line-height:1}
.rate__star.is-on{color:var(--accent)}
.rate__hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.alert-row{background:var(--panel);border:1px solid var(--line-2);padding:18px 20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.alert-row span:first-child{font-size:13px;color:#4A3D37}
.alert-row span:last-child{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* Sign-in / sign-up ---------------------------------------------------- */
.auth{padding:clamp(33px,5.5vw,60px) clamp(14px,4vw,22px) 80px;background:var(--base)}
.auth__box{max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));background:var(--panel);
  border:1px solid var(--line-2)}
.auth__img{min-height:380px;overflow:hidden}
.auth__img img{width:100%;height:100%;object-fit:cover;display:block}
.auth__form{padding:clamp(28px,5.5vw,44px) clamp(20px,4.5vw,36px);display:flex;
  flex-direction:column;gap:16px;justify-content:center}
.auth__form h1{font-family:var(--serif);font-weight:300;font-size:clamp(25px,5.2vw,34px);margin:0;line-height:1.1}
.auth__form p{margin:0;font-size:12.5px;line-height:1.8;color:var(--muted)}
.auth__switch{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.auth__note{font-size:11.5px;color:var(--muted-4);line-height:1.7}
.msg{padding:12px 14px;font-size:12px;line-height:1.6;letter-spacing:.02em}
.msg-err{background:#FBEAEA;border:1px solid #E4BDBD;color:#8A2B2B}
.msg-ok{background:#E8F3ED;border:1px solid #BFD9CB;color:#1F7A4C}

/* ---------------------------------------------------------------------
   ADMIN
   --------------------------------------------------------------------- */
.admin-head{padding:clamp(21px,3.5vw,38px) clamp(14px,4vw,22px) 0;background:var(--ink)}
.admin-head__top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(25px,5.2vw,34px);
  margin:8px 0 4px;color:var(--cream)}
.admin-head__sub{font-size:11.5px;color:var(--muted-2)}
.admin-head__flags{display:flex;gap:8px;flex-wrap:wrap}
.admin-flag{border:1px solid var(--dark-line-2);color:var(--cream-2);padding:11px 16px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.admin-tabs{display:flex;gap:4px;overflow-x:auto;margin-top:20px;border-top:1px solid var(--dark-line);scrollbar-width:none}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-body{padding:clamp(18px,2.7vw,30px) clamp(14px,4vw,22px) 80px;background:var(--base)}
.admin-stack{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,40vw,190px),1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line-2);padding:20px;
  display:flex;flex-direction:column;gap:6px}
.kpi__k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.kpi__v{font-family:var(--serif);font-size:28px;line-height:1}
.kpi__d{font-size:11px;color:var(--muted-4)}
.block{background:var(--panel);border:1px solid var(--line-2)}
.block__head{padding:20px 22px 14px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.block-pad{background:var(--panel);border:1px solid var(--line-2);padding:22px;
  display:flex;flex-direction:column;gap:14px}
.statfilters{display:flex;gap:6px;flex-wrap:wrap}
.statfilter{border:1px solid var(--line-4);padding:7px 12px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);background:transparent;cursor:pointer;display:inline-block}
.statfilter.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.notify-tools{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.bulkbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#2B231E;color:#fff;padding:10px 16px;font-size:12px;margin:0 0 12px;
  animation:nbbFade .25s ease both}
.bulkbar span{letter-spacing:.06em}
/* display:flex above beats the UA's [hidden] rule, so restate it. */
.bulkbar[hidden]{display:none}
.tbl-admin{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
.tbl-admin th{padding:10px 12px;font-weight:400;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--line);text-align:left;color:var(--muted-2)}
.tbl-admin th:first-child,.tbl-admin td:first-child{padding-left:22px}
.tbl-admin th:last-child,.tbl-admin td:last-child{padding-right:22px}
.tbl-admin td{padding:13px 12px;border-bottom:1px solid var(--line-5)}
.tbl-admin tbody tr{cursor:pointer}
.tbl-admin tbody tr:hover{background:#F6EEE9}
.tbl-admin td.code{letter-spacing:.08em}
.tbl-admin td.muted{color:var(--muted)}
.tbl-admin .sub{font-size:11px;color:var(--muted-2)}
.tbl-admin .tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-4);padding:4px 9px;display:inline-block}

.queue-item{border:1px solid var(--line);background:#fff;padding:14px;display:flex;gap:14px;flex-wrap:wrap}
.queue-item__img{width:76px;height:94px;overflow:hidden;background:var(--base);flex:0 0 auto}
.queue-item__img img{width:100%;height:100%;object-fit:cover;display:block}
.queue-item__body{flex:1 1 160px;display:flex;flex-direction:column;gap:6px}
.queue-item__cust{font-size:12.5px}
.queue-item__cust span{color:var(--muted-2)}
.queue-item__note{font-size:12px;line-height:1.6;color:var(--muted)}
.queue-item__when{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-5)}
.queue-item__cta{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.pay-item{border:1px solid var(--line);background:#fff;padding:14px;display:flex;gap:14px;
  flex-wrap:wrap;align-items:center}
.pay-item__file{width:76px;height:94px;flex:0 0 auto;background:var(--base);border:1px dashed #C9B8AE;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;padding:6px;overflow:hidden}
.pay-item__file img{width:100%;height:100%;object-fit:cover}
.pay-item__file .ic{font-size:14px;color:var(--muted-5)}
.pay-item__file .nm{font-size:8px;letter-spacing:.06em;color:var(--muted-4);word-break:break-all}
.pay-item__body{flex:1 1 150px;display:flex;flex-direction:column;gap:5px}
.pay-item__body .a{font-size:12.5px}
.pay-item__body .b{font-size:12px;color:var(--muted)}
.paymode-cards{display:flex;gap:12px;flex-wrap:wrap}
.paymode-card{flex:1 1 260px;padding:18px;cursor:pointer;text-align:left;
  border:1px solid var(--line-2);background:#fff;color:var(--muted)}
.paymode-card.is-on{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.paymode-card .t{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.paymode-card .d{display:block;font-size:12px;line-height:1.6}
.paymode-live{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.paymode-live a{border-bottom:1px solid var(--line-4)}

.adminprod{border:1px solid var(--line);background:#fff}
.adminprod__media{aspect-ratio:1/1;overflow:hidden}
.adminprod__media img{width:100%;height:100%;object-fit:cover;display:block}
.adminprod__body{padding:12px;display:flex;flex-direction:column;gap:7px}
.adminprod__n{font-size:13px}
.adminprod__p{font-size:11.5px;color:var(--muted)}
.adminprod__cta{display:flex;gap:5px;flex-wrap:wrap}
.adminprod__stock{display:flex;gap:12px;padding-top:2px;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-4)}
.adminprod__stock button{border:0;background:transparent;padding:0;cursor:pointer;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-4)}
.adminprod__stock button.is-on{color:var(--ink)}

.bar-row{display:flex;flex-direction:column;gap:6px}
.bar-row__top{display:flex;justify-content:space-between;font-size:12.5px}
.bar-row__top span:last-child{color:var(--muted)}
.bar{background:var(--base);height:4px}
.bar > div{height:4px;background:var(--ink)}
.bar > div.tanbar{background:var(--accent)}
.months{display:flex;align-items:flex-end;gap:10px;height:110px}
.months__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:flex-end}
.months__bar{width:100%;background:var(--line-4)}
.months__m{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-4)}
.promo-item{border:1px solid var(--line);background:#fff;padding:14px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.promo-item__c{font-size:13px;letter-spacing:.14em}
.promo-item__d{font-size:11.5px;color:var(--muted)}
.promo-item__u{font-size:11px;color:var(--muted-2)}
.promo-item__s{font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid #BFD9CB;
  color:var(--green);padding:4px 9px}
.ship-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line-5);
  padding-bottom:10px;font-size:12.5px}
.ship-row > span:last-child{display:flex;gap:16px;color:var(--muted)}
.banner-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;padding:10px}
.banner-row__img{width:48px;height:48px;overflow:hidden;flex:0 0 auto}
.banner-row__img img{width:100%;height:100%;object-fit:cover;display:block}
.banner-row__body{flex:1;display:flex;flex-direction:column;gap:2px}
.banner-row__k{font-size:12.5px}
.banner-row__v{font-size:11px;color:var(--muted-2)}

.drawer{position:fixed;inset:0;z-index:95;background:rgba(23,19,16,.5);display:flex;justify-content:flex-end}
.drawer__panel{width:min(440px,100%);background:var(--panel);height:100%;overflow-y:auto;
  padding:28px 26px;display:flex;flex-direction:column;gap:18px}
.drawer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.drawer__head-l{display:flex;flex-direction:column;gap:5px}
.drawer__id{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.drawer__cust{font-family:var(--serif);font-size:24px}
.drawer__wa{font-size:12px;color:var(--muted)}
.drawer__close{border:1px solid var(--line-4);background:transparent;padding:8px 12px;
  font-size:11px;cursor:pointer;color:var(--muted)}
.drawer__img{overflow:hidden;border:1px solid var(--line-2)}
.drawer__img img{width:100%;display:block}
.drawer__rows{display:flex;flex-direction:column;gap:10px}
.drawer__row{display:flex;justify-content:space-between;font-size:12.5px;
  border-bottom:1px solid var(--line-5);padding-bottom:9px;gap:12px}
.drawer__row span:first-child{color:var(--muted-2)}
.drawer__foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

/* ---------------------------------------------------------------------
   GALLERY / REVIEWS / ABOUT / FAQ / CONTACT
   --------------------------------------------------------------------- */
.gallery{padding:clamp(18px,2.2vw,24px) clamp(14px,4vw,22px) 72px;background:var(--base)}
.gallery__cols{max-width:1400px;margin:0 auto;columns:clamp(150px,20vw,230px);column-gap:10px}
.gallery__item{break-inside:avoid;margin-bottom:10px;overflow:hidden;background:var(--panel)}
.gallery__item img{width:100%;display:block}

.review-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.review-stat{display:flex;flex-direction:column;gap:4px}
.review-stat__big{font-family:var(--serif);font-size:clamp(24px,5vw,32px);line-height:1}
.review-stat__small{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.reviews-grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rev-card{background:var(--panel);border:1px solid var(--line-2);display:flex;flex-direction:column}
.rev-card__media{aspect-ratio:4/3;overflow:hidden}
.rev-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.rev-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px}
.rev-card__body p{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5;
  font-style:italic;color:#3A302B}

.about-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));background:var(--panel);
  max-width:1400px;margin:0 auto;padding:0 clamp(12px,2.4vw,32px)}
.about-hero__img{min-height:460px;overflow:hidden;order:1}
.about-hero__img img{width:100%;height:100%;object-fit:cover;display:block}
.about-hero__copy{padding:clamp(34px,6.5vw,60px) clamp(18px,4.5vw,44px);display:flex;
  flex-direction:column;justify-content:center;gap:18px;order:2}
.about-hero__copy h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,6.5vw,44px);
  line-height:1.08;margin:0}
.about-hero__copy p{margin:0;font-size:13.5px;line-height:1.9;color:var(--muted-3);max-width:46ch}
.about-hero__facts{display:flex;gap:26px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line)}
.about-hero__facts .fact{padding-top:16px}
.about-hero__facts .fact__big{color:var(--ink)}
.about-hero__facts .fact__small{color:var(--accent)}
.values{padding:clamp(33px,5.5vw,60px) clamp(14px,4vw,22px);background:var(--base)}
.values__grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.value{background:var(--panel);border:1px solid var(--line-2);
  padding:clamp(20px,4vw,26px) clamp(16px,3.6vw,24px);display:flex;flex-direction:column;gap:10px}
.value__t{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.value p{margin:0;font-size:12.5px;line-height:1.8;color:var(--muted-3)}
.strip{background:var(--ink);padding:2px}
.strip__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px}
.strip__grid div{aspect-ratio:1/1;overflow:hidden}
.strip__grid img{width:100%;height:100%;object-fit:cover;display:block}

.faq-item{border-bottom:1px solid var(--line-5)}
.faq-item__q{width:100%;text-align:left;border:0;background:transparent;padding:18px 22px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;cursor:pointer}
.faq-item__q span:first-child{font-size:13.5px;color:var(--ink)}
.faq-item__sign{font-size:15px;color:var(--accent)}
.faq-item__a{margin:0;padding:0 22px 20px;font-size:12.5px;line-height:1.85;
  color:var(--muted-3);max-width:60ch}
.faq-item:not(.is-open) .faq-item__a{display:none}
.care{display:flex;flex-direction:column;gap:5px}
.care__t{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.care__d{font-size:12.5px;line-height:1.8;color:var(--muted-3)}
.card-dark p.tall{line-height:1.85}

.contact-card{background:var(--panel);border:1px solid var(--line-2);padding:22px 24px;
  display:flex;flex-direction:column;gap:5px}
.contact-card:hover{border-color:var(--ink)}
.contact-card__v{font-family:var(--serif);font-size:22px}
.contact-card__d{font-size:11.5px;color:var(--muted-4)}
.cities{display:flex;gap:6px;flex-wrap:wrap}
.city{border:1px solid var(--line-3);padding:7px 12px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.contact-note{font-size:12px;line-height:1.8;color:var(--muted-3);
  border-top:1px solid var(--line);padding-top:12px}

/* ---------------------------------------------------------------------
   FOOTER + floating chrome
   --------------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--muted-6);
  padding:clamp(31px,5.1vw,56px) clamp(14px,4vw,22px) 30px}
.site-footer__grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(140px,40vw,200px),1fr));gap:34px}
.site-footer__brand{display:flex;flex-direction:column;gap:14px}
.site-footer__brand img{width:130px;height:50px;object-fit:cover;filter:invert(1);mix-blend-mode:screen}
.site-footer__brand p{margin:0;font-size:12.5px;line-height:1.8;max-width:30ch}
.site-footer__social{display:flex;gap:10px}
.site-footer__social a{border:1px solid var(--dark-line-2);padding:9px 14px;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-2)}
.site-footer__col{display:flex;flex-direction:column;gap:12px}
.site-footer__col > span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2)}
.site-footer__col a{font-size:12.5px;color:var(--muted-6)}
.site-footer__col p{margin:0;font-size:12.5px;line-height:1.7}
.site-footer__wa{font-size:11.5px;letter-spacing:.06em}
.site-footer__bottom{max-width:1280px;margin:34px auto 0;padding-top:18px;
  border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.wa-float{position:fixed;right:18px;bottom:24px;z-index:70;display:flex;align-items:center;gap:10px;
  background:var(--green);color:#fff;padding:13px 18px;border-radius:999px;
  box-shadow:0 14px 34px -10px rgba(23,19,16,.5);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase}
.wa-float:hover{color:#fff}

.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
  background:var(--ink);border-top:1px solid var(--dark-line)}
.mobilebar a,.mobilebar button{flex:1;border:0;background:transparent;color:var(--muted-6);
  padding:16px 8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  text-align:center}
.mobilebar a + a,.mobilebar a + button{border-left:1px solid var(--dark-line)}
.mobilebar .cta{flex:1.3;background:var(--tan);color:var(--ink);border-left:0}

/* Closed by default. `.popup{display:flex}` would beat the UA's [hidden] rule,
   so visibility is driven by an explicit class instead of the attribute. */
.popup{position:fixed;inset:0;z-index:100;background:rgba(23,19,16,.6);display:none;
  align-items:center;justify-content:center;padding:22px}
.popup.is-open{display:flex}
.popup[hidden]{display:none}
.popup__box{position:relative;background:var(--panel);max-width:660px;width:100%;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border:1px solid var(--line-2)}
.popup__x{position:absolute;top:0;right:0;z-index:2;width:38px;height:38px;display:flex;
  align-items:center;justify-content:center;font-size:13px;line-height:1;color:var(--muted);
  background:rgba(251,247,243,.92);cursor:pointer;text-decoration:none}
.popup__x:hover{color:var(--ink);background:var(--panel)}
.popup__img{min-height:220px;overflow:hidden}
.popup__img img{width:100%;height:100%;object-fit:cover;display:block}
.popup__body{padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.popup__body h3{font-family:var(--serif);font-weight:300;font-size:28px;margin:0;line-height:1.15}
.popup__body p{margin:0;font-size:12.5px;line-height:1.75;color:var(--muted)}
.popup__no{border:0;background:transparent;color:var(--muted-2);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-align:center;
  padding:4px 0;text-decoration:none}
.popup__no:hover{color:var(--ink)}

/* =====================================================================
   RESPONSIVE — the design read well on a laptop; these rules make the
   same layout behave properly on tablets and phones.
   ===================================================================== */

@media (max-width:1024px){
  .tbl-admin{min-width:680px}
  .gallery__cols{columns:3}
}

@media (max-width:900px){
  .hero__copy{order:2}
  .hero__media{order:1}
  .about-hero__img{min-height:320px}
  .drawer__panel{width:min(420px,100%)}
}

/* ---- Tablet / large phone ------------------------------------------- */
@media (max-width:760px){
  .announce{font-size:9.5px;letter-spacing:.1em;padding:0 12px}
  .header__bar{padding:10px 14px;gap:8px 10px;flex-wrap:wrap;align-items:center}
  .header__logo{order:1}
  .header__logo img{width:80px;height:34px}
  .header__actions{order:2;margin-left:auto;gap:6px;flex-wrap:nowrap}
  .header__actions .btn,.header__actions .btn-dark{padding:8px 10px;font-size:8.5px;letter-spacing:.1em;white-space:nowrap}
  .header__search{order:3;flex:1 1 100%;width:100%;min-width:0;padding:8px 10px}
  .header__nav{padding:0 14px 8px;gap:16px}
  .header__nav a{font-size:9.5px;letter-spacing:.16em}

  .hero__media{min-height:clamp(300px,74vw,420px)}
  .hero__copy{gap:16px}
  .hero__cta{gap:8px}
  .hero__cta .btn-solid,.hero__cta .btn-outline{flex:1 1 100%;padding:14px 20px}
  .hero__thumb{width:44px;height:56px}

  .trust__inner{gap:18px 26px;justify-content:flex-start}
  .trust__item{min-width:calc(50% - 13px)}
  /* The logo takes the whole first line so the stats start cleanly
     underneath it, rather than sharing a row with "2.7k+". The box is
     full width but the mark itself stays its own size on the left —
     object-fit:contain keeps it from being stretched or cropped. */
  .trust__logo{flex:0 0 100%;width:100%;height:38px;
    object-fit:contain;object-position:left center;margin-bottom:2px}

  .sec__head,.sec__head-2{margin-bottom:18px;gap:12px}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cat-card__body{padding:12px 12px 14px;gap:8px}
  .cat-card__body h3{font-size:18px}
  .cat-card__body p{font-size:11.5px;min-height:0}

  .pcard--rail{flex:0 0 200px}
  .rcard{flex:0 0 268px}

  .grid-products,.grid-products-sm{grid-template-columns:repeat(2,1fr);gap:10px}
  .pcard__body{padding:11px 12px 14px;gap:6px}
  .pcard__name{font-size:16px}
  .pcard__foot{flex-wrap:wrap;gap:6px}
  .pcard__foot .btn-sm-solid,.pcard__foot .btn-sm-outline{flex:1 1 100%;padding:9px 10px}

  .steps{grid-template-columns:repeat(2,1fr);gap:10px}
  .step{padding:18px 16px}

  .bridal-band__imgs{padding:0;gap:0}
  .promo-custom,.promo-ref{padding:24px 20px;min-height:220px}
  .insta__grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .delivery__grid{gap:20px}

  .filters{gap:16px;margin-bottom:16px}
  .filters__groups{gap:16px;width:100%}
  .filters__group{flex:1 1 100%}
  .filters__chips{gap:5px}
  .chip{padding:8px 12px;font-size:9.5px;letter-spacing:.12em}
  .filters__count{width:100%;justify-content:space-between}

  .pdp{padding-top:16px}
  .pdp__grid{gap:22px}
  .pdp__info{padding-top:0;gap:15px}
  .pdp__cta .btn-lg,.pdp__cta .btn-lg-outline{flex:1 1 100%;padding:15px 20px}
  .pdp__facts{gap:12px}
  .pdp__facts span{font-size:10px;padding-top:12px}

  .two-col__grid,.checkout__grid,.grid-start,.grid-start-sm{gap:14px}
  .card-pad{gap:18px}
  .panel{padding:18px}
  .btn-lg,.btn-solid{padding:15px 22px}

  .tracker{gap:4px;margin-top:20px}
  .tracker__step{gap:4px}
  .tracker__dot{width:26px;height:26px;font-size:9px}
  .tracker__label{font-size:7.5px;letter-spacing:.08em}
  .tracker__bar{min-width:4px}

  .order-row{gap:12px;padding:14px}
  .order-row__img{width:56px;height:70px}
  .order-row__items{font-size:17px}
  .order-row__side{flex:0 0 auto}
  .order-row__cta{width:100%}
  .order-row__cta .btn-track,.order-row__cta .btn-reorder{flex:1}

  .dash-head__actions{width:100%}
  .dash-head__actions .btn-wa,.dash-head__actions .btn-ghost{flex:1;text-align:center}

  .admin-head__flags{width:100%}
  .admin-flag{flex:1;text-align:center;padding:10px 8px;font-size:8.5px;letter-spacing:.1em}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:16px}
  .kpi__v{font-size:24px}
  .paymode-card{flex:1 1 100%}
  .drawer__panel{padding:22px 18px}

  .gallery__cols{columns:2;column-gap:8px}
  .gallery__item{margin-bottom:8px}
  .reviews-grid{grid-template-columns:1fr}
  .strip__grid{grid-template-columns:repeat(2,1fr)}

  .auth__img{display:none}
  .auth__box{grid-template-columns:1fr}
  .auth__form{padding:26px 20px}

  .site-footer__grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .site-footer__brand{grid-column:1 / -1}
  .site-footer__bottom{flex-direction:column;gap:8px;font-size:9.5px}

  .wa-float{right:14px;bottom:76px;padding:12px 15px}
  .mobilebar{display:flex}
  body.has-mobilebar .shell{padding-bottom:64px}
}

/* ---- Small phone ----------------------------------------------------- */
@media (max-width:480px){
  .ticker__item{font-size:9.5px;letter-spacing:.18em;padding:0 16px;gap:16px}
  .header__actions .btn,.header__actions .btn-dark{padding:8px;font-size:8px;letter-spacing:.1em}
  .header__logo img{width:74px;height:32px}

  .hero__copy{padding:26px 16px}
  .hero__tag{padding:9px 12px;font-size:9px;letter-spacing:.16em}
  .hero__thumbs{right:10px;bottom:10px;gap:6px}
  .hero__thumb{width:38px;height:48px}

  .trust__item{min-width:calc(50% - 9px)}
  .trust__big{font-size:22px}

  .cat-grid{grid-template-columns:1fr}
  .cat-card__media{aspect-ratio:4/3}
  .steps{grid-template-columns:1fr}
  .insta__grid{grid-template-columns:repeat(2,1fr)}

  .grid-products,.grid-products-sm{gap:8px}
  .pcard__name{font-size:15px}
  .pcard__price{font-size:12px}

  .pdp__thumbs{grid-template-columns:repeat(3,1fr)}
  .pdp__price b{font-size:18px}

  .tracker{overflow-x:auto;padding-bottom:6px}
  .tracker__step{flex:0 0 auto}
  .tracker__col{min-width:56px}
  .tracker__bar{width:16px;flex:0 0 16px}

  .tbl th,.tbl td{padding-left:14px;padding-right:14px}
  .tbl th.tight,.tbl td.tight{padding-left:8px;padding-right:8px}

  .kpis{grid-template-columns:1fr}
  .queue-item__img,.pay-item__file{width:64px;height:80px}
  .adminprod__cta .btn-xs,.adminprod__cta .btn-xs-dark{flex:1 1 auto}

  .gallery__cols{columns:1}
  .strip__grid{grid-template-columns:1fr}

  .review-form{padding:20px}
  .popup__box{grid-template-columns:1fr}
  .popup__img{min-height:150px}
  .popup__body{padding:22px 20px}
  .popup__body h3{font-size:24px}

  .site-footer__grid{grid-template-columns:1fr}

  .promo-ref__code{width:100%;justify-content:space-between}
  .soon-panel__form input{min-width:0}
  .soon-panel__form .btn-notify{flex:1 1 100%}
}

/* Anything that must scroll rather than push the page sideways */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* forgot-password link under the sign-in form */
.auth__forgot{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--line-4);align-self:flex-start;padding-bottom:2px}
.auth__forgot:hover{color:var(--ink)}

/* =====================================================================
   ADMIN PANEL — forms, editable rows, settings grid, email log
   ===================================================================== */

.hint{font-size:11px;line-height:1.6;color:var(--muted-4)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

/* quick switches on the dashboard */
.switch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.switch{border:1px solid var(--line);background:#fff;padding:16px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.switch__k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.switch__v{font-size:12.5px;line-height:1.6;color:var(--muted-3);min-height:34px}

/* checkbox rows */
.check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-3);cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--ink);cursor:pointer;flex:0 0 auto}

/* product add / edit form */
.prodform__wrap{border:1px solid var(--line);background:#fff;padding:18px;margin:14px 0}
.prodform{display:flex;flex-direction:column;gap:14px}
.prodform__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.prodform__sale{border:1px solid var(--tan-2);background:rgba(226,201,187,.28);
  padding:14px;display:flex;flex-direction:column;gap:10px}

/* generic editable row (hero slides, collections, faq, size chart …) */
.editrow{border:1px solid var(--line);background:#fff;padding:16px;
  display:flex;flex-direction:column;gap:12px}
.editrow--tight{gap:10px}
.editrow__head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.editrow__thumb{width:96px;height:120px;flex:0 0 auto;overflow:hidden;background:var(--base);
  border:1px solid var(--line-2)}
.editrow__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.editrow__foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line-5);padding-top:10px}
.rowslug{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.rowtools{display:inline-flex;gap:4px;margin-left:auto}

/* image strips (extra product images, gallery) */
.imgstrip{display:flex;gap:8px;flex-wrap:wrap}
.imgstrip--wrap{gap:6px}
.imgstrip__item{position:relative;width:96px;height:120px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--base)}
.imgstrip__item img{width:100%;height:100%;object-fit:cover;display:block}
.imgstrip__x{position:absolute;top:0;right:0;width:22px;height:22px;border:0;cursor:pointer;
  background:rgba(23,19,16,.72);color:#fff;font-size:11px;line-height:1;padding:0}
.imgstrip__x:hover{background:var(--ink)}
.imgstrip__tag{position:absolute;left:0;bottom:0;background:rgba(251,247,243,.94);
  padding:3px 7px;font-size:8px;letter-spacing:.14em;text-transform:uppercase}

/* settings grid */
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.setfield{display:flex;flex-direction:column;gap:5px}
.setfield--textarea,.setfield--lines{grid-column:1 / -1}
.colorpick{display:flex;align-items:center;gap:10px}
.colorpick input[type=color]{width:52px;height:36px;padding:0;border:1px solid var(--line-3);
  background:#fff;cursor:pointer}
.colorpick code{font-size:11px;color:var(--muted-2)}
.toggle{display:flex;align-items:center}
.imgfield{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.imgfield__preview{width:64px;height:64px;flex:0 0 auto;overflow:hidden;
  border:1px solid var(--line-2);background:var(--base)}
.imgfield__preview img{width:100%;height:100%;object-fit:cover;display:block}
.imgfield__controls{flex:1 1 180px;display:flex;flex-direction:column;gap:6px}

/* admin search boxes */
.admin-search{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.admin-search .field{width:auto;min-width:180px}

/* product cards in the admin grid */
.adminprod__media{position:relative}
.adminprod.is-off{opacity:.55}
.adminprod__sale{position:absolute;top:8px;left:8px;background:var(--ink);color:var(--cream);
  padding:4px 8px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}
.adminprod__hidden{position:absolute;top:8px;right:8px;background:rgba(251,247,243,.94);
  color:var(--muted);padding:4px 8px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}
.adminprod__meta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

/* SMTP transcript */
.smtplog{display:flex;flex-direction:column;gap:8px}
.smtplog pre{margin:0;background:var(--ink);color:#C9E4D3;padding:14px 16px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.7}

@media (max-width:760px){
  .prodform__grid{grid-template-columns:1fr}
  .setgrid{grid-template-columns:1fr}
  .editrow__thumb{width:72px;height:90px}
  .rowtools{margin-left:0;width:100%}
  .admin-search .field{min-width:0;flex:1 1 140px}
  .switch-row{grid-template-columns:1fr}
}

/* =====================================================================
   PJAX loading bar — thin progress strip for instant-feeling navigation
   ===================================================================== */
.pjaxbar{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--accent),var(--tan));
  transition:transform .25s ease,opacity .3s ease;opacity:0;pointer-events:none;
  transform:scaleX(0);transform-origin:left;
}
.pjaxbar.is-active{opacity:1}
.pjaxbar.is-done{transform:scaleX(1) !important;opacity:0}

/* subtle content-swap transition so navigation feels like a deliberate
   page turn rather than a jarring reload */
.page.is-transitioning .main,
.page.is-transitioning .site-footer{opacity:0;transform:translateY(6px)}
.main,.site-footer{transition:opacity .22s ease,transform .22s ease}

/* =====================================================================
   Mobile hamburger button + slide-in navigation drawer
   ===================================================================== */
.navtoggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line-3);background:#fff;
  cursor:pointer;padding:0;transition:background .15s ease,border-color .15s ease;
}
.navtoggle:hover{border-color:var(--ink)}
.navtoggle span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.navtoggle--admin{background:transparent;border-color:var(--dark-line-2)}
.navtoggle--admin span{background:var(--cream-2)}

.mobilenav{position:fixed;inset:0;z-index:95;display:none}
.mobilenav.is-open{display:block}
.mobilenav__backdrop{
  position:absolute;inset:0;background:rgba(23,19,16,.55);
  opacity:0;transition:opacity .25s ease;
}
.mobilenav.is-open .mobilenav__backdrop{opacity:1}
.mobilenav__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:var(--panel);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.9,.35,1);
  box-shadow:-18px 0 40px -20px rgba(23,19,16,.4);
}
.mobilenav.is-open .mobilenav__panel{transform:translateX(0)}
.mobilenav__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 18px;border-bottom:1px solid var(--line);
}
.mobilenav__logo{width:96px;height:auto;object-fit:contain}
.mobilenav__close{
  border:1px solid var(--line-4);background:transparent;width:32px;height:32px;
  cursor:pointer;font-size:13px;color:var(--muted);transition:border-color .15s ease,color .15s ease;
}
.mobilenav__close:hover{border-color:var(--ink);color:var(--ink)}
.mobilenav__links{display:flex;flex-direction:column;padding:8px 0;overflow-y:auto;flex:1}
.mobilenav__links a{
  padding:14px 20px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-left:2px solid transparent;transition:background .15s ease,color .15s ease;
}
.mobilenav__links a:hover{background:var(--base);color:var(--ink)}
.mobilenav__links a.is-active{color:var(--ink);border-left-color:var(--ink);background:var(--base);font-weight:500}
.mobilenav__foot{
  display:flex;gap:8px;padding:16px 18px;border-top:1px solid var(--line);
}
.mobilenav__foot .btn-sm,.mobilenav__foot .btn-wa{flex:1;text-align:center;justify-content:center;display:flex;align-items:center}

/* =====================================================================
   Cart item notes, drawer items, measure uploads
   ===================================================================== */
.cart-item__notes{font-size:11.5px;font-style:italic;color:var(--accent);line-height:1.5}
.tag--warn{border-color:#E4BDBD !important;color:#8A2B2B !important;margin-top:4px;display:inline-block}

.measure-upload{
  border:1px solid var(--line-2);background:var(--base);padding:16px;
  display:flex;flex-direction:column;gap:12px;animation:nbbFade .25s ease;
}
.measure-upload__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}

.drawer__items{display:flex;flex-direction:column;gap:10px}
.drawer__item{display:flex;gap:12px;border:1px solid var(--line-2);background:#fff;padding:10px}
.drawer__item-img{width:56px;height:70px;flex:0 0 auto;overflow:hidden;background:var(--base)}
.drawer__item-img img{width:100%;height:100%;object-fit:cover;display:block}
.drawer__item-body{display:flex;flex-direction:column;gap:3px}
.drawer__item-body .n{font-size:13px;font-weight:500}
.drawer__item-body .m{font-size:11px;color:var(--muted)}
.drawer__item-body .note-text{font-size:11px;font-style:italic;color:var(--accent)}
.drawer__item-body .measure-links{font-size:10.5px;color:var(--muted-4)}
.drawer__item-body .measure-links a{border-bottom:1px solid var(--line-4);color:var(--ink)}

/* size guide coin-method photo */
/* ---- Size guide ------------------------------------------------------
   The written steps and the printed poster sit side by side: most people
   read the steps, and the poster is there for anyone who wants to see it
   laid out. On a phone the steps come first, the poster follows.        */
.sizeguide{padding:clamp(20px,3.4vw,36px) clamp(14px,4vw,22px) 0;background:var(--base)}
.sizeguide__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2.6vw,28px);align-items:start}
.sizeguide__steps{gap:20px}

.sizeguide__poster{position:relative;display:block;overflow:hidden;
  border:1px solid var(--line-2);background:#fff;
  box-shadow:0 20px 44px -30px rgba(23,19,16,.35);
  transition:transform .35s cubic-bezier(.16,.8,.24,1),box-shadow .35s ease}
.sizeguide__poster:hover{transform:translateY(-3px);
  box-shadow:0 26px 54px -28px rgba(23,19,16,.45)}
.sizeguide__poster img{width:100%;height:auto;display:block}
.sizeguide__zoom{position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 12px;text-align:center;
  background:linear-gradient(to top,rgba(23,19,16,.82),transparent);
  color:var(--cream);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.16,.8,.24,1)}
.sizeguide__poster:hover .sizeguide__zoom{opacity:1;transform:translateY(0)}
/* touch devices never hover, so keep the hint visible there */
@media (hover:none){ .sizeguide__zoom{opacity:1;transform:none} }

/* =====================================================================
   Admin theme picker
   ===================================================================== */
.theme-picker{display:flex;gap:6px;align-items:center;margin-right:6px}
.theme-swatch{
  width:20px;height:20px;border-radius:999px;border:2px solid rgba(255,255,255,.35);
  cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease;
}
.theme-swatch:hover{transform:scale(1.15)}
.theme-swatch.is-on{border-color:#fff;box-shadow:0 0 0 2px var(--ink)}

/* Site colour themes -- the picker in the admin header sets one of these
   on <body>, and because it is stored in the database every visitor gets
   it: Beb's laptop, a customer's phone, a browser that has never been
   here before. Classic is the default and adds nothing.

   Only the ink and the accents move. The cream backgrounds, spacing and
   type stay put, so the shop still reads as the same shop in a different
   colour rather than a different site. Because these are the same custom
   properties the whole stylesheet already uses, every page and every
   breakpoint -- phone, tablet, laptop -- follows automatically. */
body[data-site-theme="slate"]{
  --ink:#1E2833; --dark-line:#2E3B48;
  --accent:#6E8CA0; --accent-2:#7E97A8;
  --tan:#C7D3DC; --tan-2:#9DB2C0;
  --muted-5:#93A6B3; --muted-6:#A6B6C1;
}
body[data-site-theme="rose"]{
  --ink:#3A1620; --dark-line:#4E2530;
  --accent:#B5748A; --accent-2:#C08A9C;
  --tan:#E8C7D1; --tan-2:#CE9FAE;
  --muted-5:#C29AA6; --muted-6:#CDAAB4;
}
body[data-site-theme="emerald"]{
  --ink:#14302A; --dark-line:#22453C;
  --accent:#5E9C85; --accent-2:#6FA994;
  --tan:#BFD9CE; --tan-2:#96BBAB;
  --muted-5:#8FB3A4; --muted-6:#A3C1B4;
}

/* Admin colour themes -- override only the accent tokens used by the admin
   chrome (header, active tabs, primary buttons, kpi/eyebrow accents). */
body.is-admin[data-admin-theme="slate"]  { --admin-ink:#1C2833; --admin-accent:#5DA9E9; --admin-tan:#7FB3E0; }
body.is-admin[data-admin-theme="rose"]   { --admin-ink:#3A1620; --admin-accent:#D98BA0; --admin-tan:#E8B9C6; }
body.is-admin[data-admin-theme="emerald"]{ --admin-ink:#0F2E24; --admin-accent:#4FBF97; --admin-tan:#8FD9BE; }

body.is-admin[data-admin-theme]{--ink:var(--admin-ink,#171310)}
body.is-admin[data-admin-theme] .admin-head{background:var(--admin-ink,#171310)}
body.is-admin[data-admin-theme] .eyebrow-dark{color:var(--admin-tan,#B08E79)}
body.is-admin[data-admin-theme] .tab-dark.is-on{border-bottom-color:var(--admin-tan,#E2C9BB)}
body.is-admin[data-admin-theme] .btn-save,
body.is-admin[data-admin-theme] .btn-xs-dark,
body.is-admin[data-admin-theme] .btn-sm-solid,
body.is-admin[data-admin-theme] .paymode-card.is-on,
body.is-admin[data-admin-theme] .statfilter.is-on,
body.is-admin[data-admin-theme] .adminprod__stock button.is-on{background:var(--admin-ink,#171310);border-color:var(--admin-ink,#171310)}
body.is-admin[data-admin-theme] .kpi__k,
body.is-admin[data-admin-theme] .eyebrow-sm{color:var(--admin-accent,#A9836F)}

/* =====================================================================
   Micro-animations and hover polish -- applied broadly so the whole site
   (storefront and admin) feels alive rather than static.
   ===================================================================== */
a,button,.btn,.btn-dark,.btn-sm,.btn-lg,.chip,.tab,.tab-dark,.pill,.kpi,.block,
.block-pad,.adminprod,.editrow,.queue-item,.pay-item,.promo-item,.order-row{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,
             transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.btn-solid:active,.btn-lg:active,.btn-med:active,.btn-save:active,.btn-xs-dark:active,
.btn-sm-solid:active,.btn-tan:active,.btn-dark:active{transform:scale(.97)}

.kpi:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(23,19,16,.25)}
.order-row:hover,.editrow:hover,.queue-item:hover,.pay-item:hover{box-shadow:0 10px 22px -18px rgba(23,19,16,.3)}
.adminprod:hover{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(23,19,16,.3)}
.promo-item:hover{border-color:var(--ink)}
.rel-card:hover,.rcard:hover,.wish-card:hover,.rev-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -22px rgba(23,19,16,.3)}
.rel-card,.rcard,.wish-card,.rev-card{transition:transform .22s ease,box-shadow .22s ease}
.contact-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(23,19,16,.28)}

.statfilter,.tag,.paymode-card,.chip{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease}
.chip:active,.statfilter:active{transform:scale(.96)}

/* animated entrance for admin sections and message banners */
.admin-stack > *{animation:nbbFade .35s ease both}
.admin-stack > *:nth-child(2){animation-delay:.03s}
.admin-stack > *:nth-child(3){animation-delay:.06s}
.msg{animation:nbbSlideDown .25s ease}
@keyframes nbbSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* smoother FAQ open/close */
.faq-item__a{
  overflow:hidden;max-height:0;padding-top:0;padding-bottom:0;
  transition:max-height .28s ease,padding .2s ease,opacity .2s ease;opacity:0;
}
.faq-item.is-open .faq-item__a{max-height:400px;opacity:1}
.faq-item__sign{transition:transform .25s ease}
.faq-item.is-open .faq-item__sign{transform:rotate(45deg)}

/* drawer slide-in (admin order/product drawers) */
.drawer{animation:nbbFade .18s ease}
.drawer__panel{animation:nbbDrawerIn .25s cubic-bezier(.22,.9,.35,1)}
@keyframes nbbDrawerIn{from{transform:translateX(24px);opacity:.6}to{transform:translateX(0);opacity:1}}

/* popup polish */
.popup__box{animation:nbbPopIn .22s cubic-bezier(.22,.9,.35,1)}
@keyframes nbbPopIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* gentle scale-in for cards on load */
.cat-card,.pcard,.kpi,.adminprod{animation:nbbFade .35s ease both}

/* =====================================================================
   Micro-interactions — the polish that separates a shop from a form.
   Everything here is transform/opacity only, so it stays smooth on
   phones, and all of it is disabled under prefers-reduced-motion.
   ===================================================================== */

/* Buttons: lift on hover, press down on click. */
.btn-solid,.btn-lg,.btn-med,.btn-tan,.btn-dark,.btn-sm-solid,.btn-save,.btn-notify{
  transition:transform .22s cubic-bezier(.16,.8,.24,1),box-shadow .22s ease,background .22s ease}
.btn-solid:hover,.btn-lg:hover,.btn-med:hover,.btn-tan:hover,.btn-dark:hover,
.btn-sm-solid:hover,.btn-save:hover,.btn-notify:hover{
  transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(23,19,16,.55)}
.btn-solid:active,.btn-lg:active,.btn-med:active,.btn-tan:active,.btn-dark:active,
.btn-sm-solid:active,.btn-save:active,.btn-notify:active{transform:translateY(0);box-shadow:none}

.btn,.btn-outline,.btn-sm,.btn-sm-outline,.btn-lg-outline,.btn-ghost,.btn-mini,.chip{
  transition:border-color .22s ease,color .22s ease,background .22s ease,transform .22s ease}
.btn:hover,.btn-outline:hover,.btn-sm:hover,.btn-sm-outline:hover,
.btn-lg-outline:hover,.btn-ghost:hover,.btn-mini:hover{border-color:var(--ink);color:var(--ink)}
.chip:hover{border-color:var(--accent);color:var(--ink)}

/* Underlines that draw in from the left rather than just appearing. */
.link-ul,.btn-link{position:relative;display:inline-block}
.link-ul::after,.btn-link::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.16,.8,.24,1)}
.link-ul:hover::after,.btn-link:hover::after{transform:scaleX(1);transform-origin:left}

/* Nav items get the same treatment. */
.header__nav a{position:relative}
.header__nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.16,.8,.24,1)}
.header__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header__nav a.is-active::after{transform:scaleX(0)}

/* Collection + gallery + review cards: same lift-and-zoom as product cards. */
.cat-card,.rcard,.rel-card,.gallery__item{
  transition:transform .35s cubic-bezier(.16,.8,.24,1),box-shadow .35s ease}
.cat-card:hover,.rcard:hover,.rel-card:hover,.gallery__item:hover{
  transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(23,19,16,.4)}
.cat-card__media img,.rcard__media img,.rel-card__media img,.gallery__item img,
.insta__grid img,.strip__grid img{transition:transform .55s cubic-bezier(.16,.8,.24,1)}
.cat-card:hover .cat-card__media img,.rcard:hover .rcard__media img,
.rel-card:hover .rel-card__media img,.gallery__item:hover img,
.insta__grid a:hover img,.strip__grid div:hover img{transform:scale(1.06)}

/* Inputs settle into focus instead of snapping. */
.field,.field-lg{transition:border-color .22s ease,box-shadow .22s ease,background .22s ease}
.field:focus,.field-lg:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(169,131,111,.13)}

/* Bag counter pulses when its number changes after an add-to-cart. */
.header__actions .btn-dark{transition:transform .22s cubic-bezier(.16,.8,.24,1),background .22s ease}

/* The floating WhatsApp pill breathes gently so it reads as live, not stuck. */
.wa-float{transition:transform .25s cubic-bezier(.16,.8,.24,1),box-shadow .25s ease}
.wa-float:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:0 20px 40px -12px rgba(23,19,16,.55)}

/* =====================================================================
   Admin panel presentation — same design language as the storefront, so
   running the shop feels like part of the brand rather than a database
   form. Layout is untouched; this is depth, spacing and motion only.
   ===================================================================== */

/* Cards get a soft lift and a warm hairline instead of a flat box. */
.kpi,.block,.block-pad,.adminprod,.editrow,.switch,.prodform__wrap,.banner-row{
  box-shadow:0 1px 2px rgba(23,19,16,.04),0 8px 22px -18px rgba(23,19,16,.28)}
.kpi:hover,.block-pad:hover,.adminprod:hover,.editrow:hover{
  box-shadow:0 2px 4px rgba(23,19,16,.05),0 16px 34px -20px rgba(23,19,16,.34)}

/* The KPI row is the first thing Beb sees — give it a little presence. */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);opacity:.55;transition:opacity .25s ease}
.kpi:hover::before{opacity:1}

/* Section headers read as headings, not table captions. */
.block__head{border-bottom:1px solid var(--line-5)}
.block__head .eyebrow-sm{color:var(--accent)}

/* Table rows: clear hover target with a left accent, not just a grey wash. */
.tbl-admin tbody tr{transition:background .2s ease,box-shadow .2s ease}
.tbl-admin tbody tr:hover{background:#F8F1EC;
  box-shadow:inset 3px 0 0 var(--accent)}
.tbl-admin .tag{transition:background .2s ease,color .2s ease}

/* Status pills in the admin tables get colour so state is scannable. */
.tag--warn{background:#FBEAEA;color:#8A2B2B;border-color:#E4BDBD}

/* Admin tabs echo the storefront nav underline. */
.admin-tabs .tab-dark{position:relative;transition:color .22s ease}
.admin-tabs .tab-dark::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--tan);transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.16,.8,.24,1)}
.admin-tabs .tab-dark:hover::after{transform:scaleX(1);transform-origin:left}
.admin-tabs .tab-dark.is-on::after{transform:scaleX(0)}

/* Queue and payment items behave like the storefront's cards. */
.queue-item,.pay-item,.promo-item{
  transition:transform .3s cubic-bezier(.16,.8,.24,1),box-shadow .3s ease,border-color .3s ease}
.queue-item:hover,.pay-item:hover,.promo-item:hover{
  transform:translateY(-2px);border-color:var(--line-4);
  box-shadow:0 14px 30px -20px rgba(23,19,16,.35)}
.pay-item__file img{transition:transform .4s cubic-bezier(.16,.8,.24,1)}
.pay-item:hover .pay-item__file img{transform:scale(1.05)}

/* Admin content fades in section by section, like the storefront does. */
.admin-stack > *{animation:nbbFade .4s ease both}
.admin-stack > *:nth-child(2){animation-delay:.06s}
.admin-stack > *:nth-child(3){animation-delay:.12s}
.admin-stack > *:nth-child(4){animation-delay:.18s}

/* =====================================================================
   Admin on a phone — Beb runs the shop from her hand, so the panel has
   to work there, not just survive there. The order table becomes a
   stack of cards (no sideways scrolling), and every control gets a
   thumb-sized tap target.
   ===================================================================== */
@media (max-width:760px){

  /* --- tables become cards ------------------------------------------ */
  .scroll-x{overflow:visible}
  .tbl-admin{min-width:0;display:block}
  .tbl-admin thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-admin tbody,.tbl-admin tr,.tbl-admin td{display:block;width:100%}
  .tbl-admin tr{
    border:1px solid var(--line-2);background:#fff;margin-bottom:10px;padding:12px 14px;
    position:relative;box-shadow:0 1px 2px rgba(23,19,16,.04)}
  .tbl-admin tr:hover{box-shadow:inset 3px 0 0 var(--accent),0 6px 16px -10px rgba(23,19,16,.3)}
  .tbl-admin td{
    border:0;padding:5px 0;display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .tbl-admin th:first-child,.tbl-admin td:first-child,
  .tbl-admin th:last-child,.tbl-admin td:last-child{padding-left:0;padding-right:0}
  /* the label that the hidden header used to provide */
  .tbl-admin td[data-label]::before{
    content:attr(data-label);flex:0 0 auto;
    font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .tbl-admin td[data-label]{text-align:right}
  .tbl-admin td .sub{display:block}
  /* the checkbox cell has no label, so let it sit on its own line */
  .tbl-admin td:not([data-label]){justify-content:flex-start;padding-bottom:8px;
    border-bottom:1px solid var(--line-5);margin-bottom:6px}
  .tbl-admin td input[type=checkbox]{width:20px;height:20px}
  .tbl-admin tbody tr td.muted[colspan]{justify-content:center;text-align:center}

  /* --- bars and headers --------------------------------------------- */
  .bulkbar{flex-direction:column;align-items:stretch;gap:10px;text-align:center}
  .bulkbar .btn-mini{padding:11px 14px}
  .block__head{flex-direction:column;align-items:stretch;gap:10px}
  .admin-search{width:100%;display:flex;gap:6px}
  .admin-search .field{flex:1;min-width:0}
  .statfilters{gap:5px}
  .statfilter{padding:9px 12px}
  .alertbar{flex-direction:column;align-items:flex-start;gap:9px}

  /* --- drawer takes the whole screen -------------------------------- */
  .drawer__panel{width:100%;max-width:none}
  .drawer__foot{flex-direction:column;align-items:stretch;gap:8px}
  .drawer__foot .btn-wa,.drawer__foot .btn-mini{width:100%;text-align:center}

  /* --- forms and buttons stay thumb-friendly ------------------------ */
  .switch-row{grid-template-columns:1fr}
  .switch{gap:10px}
  .switch .btn-mini,.switch .btn-sm-solid{width:100%;text-align:center;padding:11px 14px}
  .editrow{padding:14px}
  .queue-item__cta,.adminprod__cta{gap:6px}
  .queue-item__cta .btn-mini,.queue-item__cta .btn-sm-solid{flex:1 1 auto;text-align:center}
  .notify-tools .btn-xs{flex:1;text-align:center;padding:9px 10px}
  .theme-picker{gap:10px}
  .theme-swatch{width:26px;height:26px}
}

/* =====================================================================
   Motion, part two — richer movement that still costs almost nothing.

   Rule followed throughout: only `transform` and `opacity` are animated.
   Both are handled by the compositor, so they never trigger layout or
   paint and stay smooth on a mid-range phone. Anything that would have
   animated width/height/box-shadow is done with a scaled pseudo-element
   instead.
   ===================================================================== */

/* The two marquees only need to run while they are on screen. JS adds
   .is-paused when they scroll out of view. */
.ticker__track.is-paused,
.livefeed__track.is-paused{animation-play-state:paused}

/* --- Section headings draw themselves in ---------------------------- */
html.reveal-ready main > section .sec__head,
html.reveal-ready main > section .sec__head-2{overflow:hidden}
html.reveal-ready main > section .sec__head h2,
html.reveal-ready main > section .sec__head-2 h2,
html.reveal-ready main > section .sec__head .eyebrow{
  transform:translateY(115%);transition:transform .7s cubic-bezier(.16,.8,.24,1)}
html.reveal-ready main > section.is-revealed .sec__head h2,
html.reveal-ready main > section.is-revealed .sec__head-2 h2,
html.reveal-ready main > section.is-revealed .sec__head .eyebrow{transform:translateY(0)}
/* the eyebrow leads, the heading follows a beat later */
html.reveal-ready main > section .sec__head h2{transition-delay:.08s}

/* --- Product and collection cards rise in sequence ------------------- */
html.reveal-ready .cat-grid > *,
html.reveal-ready .grid-products > *,
html.reveal-ready .grid-products-sm > *,
html.reveal-ready .steps > *,
html.reveal-ready .reels > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,.8,.24,1)}
html.reveal-ready .is-revealed .cat-grid > *,
html.reveal-ready .is-revealed .grid-products > *,
html.reveal-ready .is-revealed .grid-products-sm > *,
html.reveal-ready .is-revealed .steps > *,
html.reveal-ready .is-revealed .reels > *{opacity:1;transform:translateY(0)}
/* a short stagger reads as craft; any longer reads as lag */
html.reveal-ready .is-revealed .cat-grid > :nth-child(2),
html.reveal-ready .is-revealed .grid-products > :nth-child(2),
html.reveal-ready .is-revealed .grid-products-sm > :nth-child(2),
html.reveal-ready .is-revealed .steps > :nth-child(2),
html.reveal-ready .is-revealed .reels > :nth-child(2){transition-delay:.07s}
html.reveal-ready .is-revealed .cat-grid > :nth-child(3),
html.reveal-ready .is-revealed .grid-products > :nth-child(3),
html.reveal-ready .is-revealed .grid-products-sm > :nth-child(3),
html.reveal-ready .is-revealed .steps > :nth-child(3),
html.reveal-ready .is-revealed .reels > :nth-child(3){transition-delay:.14s}
html.reveal-ready .is-revealed .cat-grid > :nth-child(4),
html.reveal-ready .is-revealed .grid-products > :nth-child(4),
html.reveal-ready .is-revealed .grid-products-sm > :nth-child(4),
html.reveal-ready .is-revealed .steps > :nth-child(4){transition-delay:.21s}
html.reveal-ready .is-revealed .cat-grid > :nth-child(n+5),
html.reveal-ready .is-revealed .grid-products > :nth-child(n+5){transition-delay:.26s}

/* --- Bridal band images settle into place --------------------------- */
html.reveal-ready .bridal-band__imgs > *{
  opacity:0;transform:scale(1.04);
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,.8,.24,1)}
html.reveal-ready .bridal-band.is-revealed .bridal-band__imgs > *{opacity:1;transform:scale(1)}
html.reveal-ready .bridal-band.is-revealed .bridal-band__imgs > :nth-child(2){transition-delay:.08s}
html.reveal-ready .bridal-band.is-revealed .bridal-band__imgs > :nth-child(3){transition-delay:.16s}
html.reveal-ready .bridal-band.is-revealed .bridal-band__imgs > :nth-child(4){transition-delay:.24s}

/* --- Buttons get a soft ripple instead of a shadow repaint ---------- */
.btn-solid,.btn-lg,.btn-med,.btn-tan,.btn-dark,.btn-sm-solid{
  position:relative;overflow:hidden;isolation:isolate}
.btn-solid::after,.btn-lg::after,.btn-med::after,
.btn-tan::after,.btn-dark::after,.btn-sm-solid::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(251,247,243,.16);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,.8,.24,1)}
.btn-solid:hover::after,.btn-lg:hover::after,.btn-med:hover::after,
.btn-tan:hover::after,.btn-dark:hover::after,.btn-sm-solid:hover::after{transform:scaleX(1)}
.btn-tan::after{background:rgba(23,19,16,.09)}

/* --- The bag counter kicks when something is added ------------------ */
.header__actions .btn-dark.is-bumped{animation:nbbBagPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes nbbBagPop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}

/* --- Hero copy arrives line by line --------------------------------- */
.hero__slide.is-on > *{animation:nbbHeroIn .65s cubic-bezier(.16,.8,.24,1) both}
.hero__slide.is-on > :nth-child(2){animation-delay:.07s}
.hero__slide.is-on > :nth-child(3){animation-delay:.14s}
.hero__slide.is-on > :nth-child(4){animation-delay:.21s}
@keyframes nbbHeroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Tell the browser which layers will move, but only for the handful of
   elements that actually animate continuously — promoting everything
   would cost more memory than it saves. */
.ticker__track,.livefeed__track,.pjaxbar{will-change:transform}

/* Respect the OS "reduce motion" setting: keep the layout, drop the movement. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
    scroll-behavior:auto !important}
  /* Anything that starts hidden and is revealed by motion must be shown
     outright, or a reduced-motion visitor would see an empty page. */
  html.reveal-ready main > section,
  html.reveal-ready .admin-stack > *,
  html.reveal-ready .cat-grid > *,
  html.reveal-ready .grid-products > *,
  html.reveal-ready .grid-products-sm > *,
  html.reveal-ready .steps > *,
  html.reveal-ready .reels > *,
  html.reveal-ready .bridal-band__imgs > *,
  html.reveal-ready main > section .sec__head h2,
  html.reveal-ready main > section .sec__head-2 h2,
  html.reveal-ready main > section .sec__head .eyebrow{
    opacity:1 !important;transform:none !important}
  /* the marquees stop rather than teleport */
  .ticker__track,.livefeed__track{animation:none !important}
}

/* =====================================================================
   Responsive -- hamburger takeover + 2-column grids reconfirmed
   ===================================================================== */
@media (max-width:760px){
  .header__nav{display:none}
  .navtoggle{display:flex}
  .header__actions{gap:6px}
  .header__actions .navtoggle{margin-right:2px}

  .admin-tabs{display:none}
  .navtoggle--admin{display:flex}
  .admin-head__flags{flex-wrap:wrap;gap:8px}
  .theme-picker{order:99;width:100%;justify-content:flex-start;margin-top:4px}
}

@media (min-width:761px){
  .navtoggle--admin{display:none}
}

@media (max-width:480px){
  .mobilenav__panel{width:88vw}
  .measure-upload__grid{grid-template-columns:1fr}
  .sizeguide{padding-top:16px}
}

/* =====================================================================
   Shop page category tabs -- boxed 2-per-row grid on mobile instead of
   a horizontal scroll strip, matching the 2-column product grid feel.
   ===================================================================== */
@media (max-width:760px){
  .tabrow{
    display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
    overflow-x:visible;border-top:0;
  }
  .tabrow .tab{
    border:1px solid var(--line-4);background:#fff;padding:11px 10px;
    font-size:9.5px;letter-spacing:.1em;text-align:center;white-space:normal;
    line-height:1.4;border-bottom:1px solid var(--line-4);
  }
  .tabrow .tab.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
}

/* =====================================================================
   Scroll-reveal -- sections fade + rise into place as the visitor
   scrolls, driven by IntersectionObserver in main.js. Falls back to
   fully visible if JS never runs (progressive enhancement).
   ===================================================================== */
/* Only takes effect once JS has added .reveal-ready to <html> --
   if JS never runs, every section stays fully visible by default. */
html.reveal-ready main > section,
html.reveal-ready .admin-stack > *{
  opacity:0;transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.16,.8,.24,1),transform .6s cubic-bezier(.16,.8,.24,1);
}
html.reveal-ready main > section.is-revealed,
html.reveal-ready .admin-stack > *.is-revealed{opacity:1;transform:translateY(0)}

/* staggered children inside a just-revealed grid */
.is-revealed .cat-card,.is-revealed .pcard,.is-revealed .step,.is-revealed .kpi{
  animation:nbbFade .5s ease both;
}
.is-revealed .cat-card:nth-child(2),.is-revealed .pcard:nth-child(2),.is-revealed .kpi:nth-child(2){animation-delay:.05s}
.is-revealed .cat-card:nth-child(3),.is-revealed .pcard:nth-child(3),.is-revealed .kpi:nth-child(3){animation-delay:.1s}
.is-revealed .cat-card:nth-child(4),.is-revealed .pcard:nth-child(4),.is-revealed .kpi:nth-child(4){animation-delay:.15s}
.is-revealed .cat-card:nth-child(5),.is-revealed .pcard:nth-child(5),.is-revealed .kpi:nth-child(5){animation-delay:.2s}

/* count-up numbers (trust band, about facts, review stats) */
[data-count]{font-variant-numeric:tabular-nums}

/* hover polish on hero CTA + primary buttons: soft glow lift */
.btn-solid:hover,.btn-lg:hover,.btn-med:hover,.btn-save:hover{
  box-shadow:0 10px 24px -10px rgba(23,19,16,.45);transform:translateY(-1px);
}
.btn-outline:hover,.btn-lg-outline:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* nicer sticky header shadow once page has scrolled */
.site-header.is-scrolled{box-shadow:0 8px 24px -18px rgba(23,19,16,.35)}

/* admin KPI numbers get a subtle pop on load */
.kpi__v{animation:nbbPop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes nbbPop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* customer dashboard summary strip + delivery ETA badge */
.dash-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);margin-top:18px;
}
.dash-stat{background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.dash-stat__v{font-family:var(--serif);font-size:22px;line-height:1}
.dash-stat__k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.detail-head__eta{
  display:inline-block;margin-top:4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--tan-2);padding:4px 9px;background:rgba(226,201,187,.2);
}

@media (max-width:760px){
  .dash-stats{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   Image cropper — the dialog that opens after a photo is chosen in the
   admin panel. Sized to work with a thumb on a phone: a big stage, fat
   corner handles, and the buttons within reach at the bottom.
   ===================================================================== */
.cropper{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
  justify-content:center;padding:14px;background:rgba(23,19,16,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cropper__panel{background:var(--cream,#FBF7F3);border-radius:4px;width:min(760px,100%);
  max-height:100%;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.cropper__head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-2,#E8DED6)}
.cropper__title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2,#8A7A6E)}
.cropper__x{background:none;border:0;font-size:15px;cursor:pointer;color:var(--ink,#171310);
  line-height:1;padding:4px 6px}

.cropper__stage{position:relative;flex:1 1 auto;min-height:min(58vh,420px);
  background:#201914;overflow:hidden;touch-action:none;user-select:none;
  -webkit-user-select:none}
.cropper__img{position:absolute;display:block;pointer-events:none;
  -webkit-user-drag:none;user-select:none}

/* The dim outside the crop is one huge shadow rather than four panels. */
.cropper__box{position:absolute;cursor:move;touch-action:none;
  box-shadow:0 0 0 9999px rgba(23,19,16,.62);
  outline:1px solid rgba(251,247,243,.95)}
.cropper__grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(251,247,243,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,247,243,.4) 1px,transparent 1px);
  background-size:33.333% 33.333%;background-position:0 0}
.cropper__box i{position:absolute;width:26px;height:26px;background:transparent;
  touch-action:none}
.cropper__box i::after{content:"";position:absolute;width:14px;height:14px;
  border:2px solid #FBF7F3;background:rgba(23,19,16,.35)}
.cropper__box i[data-h="nw"]{left:-13px;top:-13px;cursor:nwse-resize}
.cropper__box i[data-h="ne"]{right:-13px;top:-13px;cursor:nesw-resize}
.cropper__box i[data-h="sw"]{left:-13px;bottom:-13px;cursor:nesw-resize}
.cropper__box i[data-h="se"]{right:-13px;bottom:-13px;cursor:nwse-resize}
.cropper__box i[data-h="nw"]::after{left:6px;top:6px;border-right:0;border-bottom:0}
.cropper__box i[data-h="ne"]::after{right:6px;top:6px;border-left:0;border-bottom:0}
.cropper__box i[data-h="sw"]::after{left:6px;bottom:6px;border-right:0;border-top:0}
.cropper__box i[data-h="se"]::after{right:6px;bottom:6px;border-left:0;border-top:0}

.cropper__bar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line-2,#E8DED6)}
.cropper__ratios,.cropper__acts{display:flex;gap:7px;flex-wrap:wrap}
.cropper__ratio{background:none;border:1px solid var(--line-3,#DDD0C6);cursor:pointer;
  padding:7px 12px;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink,#171310);border-radius:2px}
.cropper__ratio.is-on{background:var(--ink,#171310);border-color:var(--ink,#171310);color:var(--cream,#FBF7F3)}

@media (max-width:600px){
  .cropper{padding:0}
  .cropper__panel{width:100%;height:100%;max-height:100%;border-radius:0}
  .cropper__stage{min-height:0}
  .cropper__bar{justify-content:center}
  .cropper__acts{width:100%;justify-content:center}
}

/* Admin photo field -- the picture that is on the site now, sitting next
   to the control that replaces it, so it is obvious what is being changed. */
.imgfield{display:flex;flex-direction:column;gap:6px}
.imgfield__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.imgfield__row{display:flex;align-items:flex-start;gap:10px}
.imgfield__thumb{width:54px;height:68px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line-3);background:var(--cream-2)}
.imgfield__ctl{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0}
.imgfield__ctl .field{width:100%}
.imgfield__ctl .btn-xs-dark{align-self:flex-start}