/* =========================================================================
   Shiv Shakti — shared site header
   Used by every page via assets/site-header.js. Edit here once.
   All selectors are namespaced with .ss- so they never collide with the
   per-page inline styles.
   ========================================================================= */
:root{
  --ss-maroon-950:#280509;
  --ss-maroon-900:#3a0a11;
  --ss-maroon-800:#511019;
  --ss-maroon-700:#6e1622;
  --ss-gold-600:#a9791f;
  --ss-gold-500:#c79a2e;
  --ss-gold-400:#d9b04a;
  --ss-gold-300:#e8c876;
  --ss-cream:#fbf5e8;
  --ss-topbar-h:36px;
  --ss-bar-h:76px;
  --ss-ease:cubic-bezier(.22,.61,.36,1);
  /* Width of the header/footer content shell. A page whose own content runs
     wider (see .home-page in assets/home.css) redefines these two on <body>
     so the chrome lines up with it instead of starting inside it. */
  --ss-shell:1320px;
  --ss-shell-pad:32px;
}

/* ---------------------------------------------------------------- top bar */
.ss-topbar{
  background:var(--ss-maroon-950);
  color:#f0dfa2;
  font-size:.78rem;
  letter-spacing:.02em;
  border-bottom:1px solid rgba(201,162,46,.22);
  position:relative;
  z-index:101;
}
.ss-topbar-in{
  max-width:var(--ss-shell); margin:0 auto; padding:0 var(--ss-shell-pad);
  min-height:var(--ss-topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.ss-tb-msgs{display:flex; align-items:center; gap:0; flex-wrap:wrap; min-width:0;}
.ss-tb-msgs > span{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 0; white-space:nowrap;
}
.ss-tb-msgs > span + span{
  margin-left:20px; padding-left:20px;
  border-left:1px solid rgba(217,176,74,.26);
}
.ss-tb-msgs b{color:var(--ss-gold-300); font-weight:600;}
.ss-tb-msgs svg{width:14px; height:14px; color:var(--ss-gold-400); flex:none;}
.ss-tb-links{display:flex; align-items:center; gap:18px; flex:none;}
.ss-tb-links a{
  display:inline-flex; align-items:center; gap:7px;
  color:#e2cfae; text-decoration:none; transition:color .25s;
}
.ss-tb-links a:hover{color:var(--ss-gold-300);}
.ss-tb-links svg{width:14px; height:14px; color:var(--ss-gold-400);}

/* ------------------------------------------------- cream search band */
/* sits between the dark top bar and the dark header and breaks them apart */
.ss-midbar{
  position:relative;
  color:var(--ss-maroon-800);
  background:
    radial-gradient(60% 140% at 50% -40%, rgba(232,200,118,.30), transparent 70%),
    linear-gradient(180deg,#fdf9ef 0%,var(--ss-cream) 55%,#f6ecd5 100%);
  border-bottom:1px solid rgba(169,121,31,.22);
}
.ss-midbar::before{            /* faint gold dot lattice, fades out toward the edges */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle,rgba(199,154,46,.35) 1px,transparent 1.2px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 22%,transparent 78%,#000);
          mask-image:linear-gradient(90deg,#000,transparent 22%,transparent 78%,#000);
}
.ss-midbar-in{
  position:relative;
  max-width:var(--ss-shell); margin:0 auto; padding:14px var(--ss-shell-pad);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(22px,3vw,56px);
}

/* left: the full logo */
.ss-mid-brand{
  display:flex; align-items:center; gap:clamp(12px,1.1vw,18px);
  justify-self:start; text-decoration:none; color:inherit;
}
.ss-mid-mark{
  width:clamp(70px,5.4vw,96px); aspect-ratio:1; flex:none;
  border-radius:50%; padding:3px;
  background:conic-gradient(from 210deg,var(--ss-gold-600),var(--ss-gold-300),var(--ss-gold-500),var(--ss-gold-600));
  box-shadow:0 0 0 4px rgba(255,253,248,.75), 0 12px 24px -12px rgba(81,16,25,.6);
  transition:transform .5s var(--ss-ease);
}
.ss-mid-mark img{width:100%; height:100%; display:block; border-radius:50%; object-fit:cover;}
.ss-mid-brand:hover .ss-mid-mark{transform:rotate(-6deg) scale(1.04);}
.ss-mid-word{display:flex; flex-direction:column; line-height:1;}
.ss-mid-word b{
  font-family:var(--display,'Cinzel',serif); font-weight:700;
  font-size:clamp(1.6rem,2.45vw,2.8rem); letter-spacing:.01em; text-transform:uppercase;
  color:#8e1b24;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.ss-mid-word i{
  margin-top:clamp(5px,.5vw,9px);
  font-style:normal; font-weight:600; white-space:nowrap;
  font-size:clamp(.6rem,.7vw,.82rem); letter-spacing:.2em; text-transform:uppercase;
  color:#7b3b2c;
}

/* centre: always-visible search */
.ss-find{
  position:relative; display:flex; align-items:center;
  width:100%; max-width:640px; justify-self:center;
  height:clamp(50px,3.6vw,58px); padding:5px 5px 5px 24px;
  border-radius:999px;
  background:linear-gradient(180deg,#fffaf0,#fbf1dc);
  border:1.5px solid rgba(199,154,46,.55);
  box-shadow:inset 0 1px 2px rgba(81,16,25,.05), 0 10px 22px -16px rgba(81,16,25,.45);
  transition:border-color .25s, box-shadow .25s;
}
.ss-find:focus-within{
  border-color:var(--ss-gold-500);
  box-shadow:0 0 0 4px rgba(217,176,74,.22), 0 10px 24px -14px rgba(81,16,25,.5);
}
.ss-find input{
  flex:1; min-width:0; height:100%;
  border:0; background:transparent; outline:none;
  font-family:inherit; font-size:1rem; color:var(--ss-maroon-900);
}
.ss-find input::placeholder{color:#8d776a;}
.ss-find input:focus-visible{outline:none;}          /* the pill shows the focus ring */
.ss-find input::-webkit-search-cancel-button{cursor:pointer;}
.ss-find button{
  flex:none; height:100%; aspect-ratio:1;
  display:grid; place-items:center;
  padding:0; border:0; border-radius:50%; cursor:pointer;
  color:#fff3d6;
  background:radial-gradient(circle at 35% 30%,var(--ss-maroon-600,#8a1c2a),var(--ss-maroon-900));
  box-shadow:0 6px 14px -8px rgba(58,10,17,.9);
  transition:filter .25s, transform .25s var(--ss-ease);
}
.ss-find button svg{width:19px; height:19px; stroke-width:2.2;}
.ss-find button:hover{filter:brightness(1.18); transform:scale(1.05);}

/* right: account / wishlist / cart */
.ss-tiles{display:flex; align-items:center; gap:clamp(18px,2vw,38px); justify-self:end;}
.ss-tile{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#3b2320; white-space:nowrap;
}
.ss-tile-ic{
  position:relative; flex:none;
  width:40px; height:40px; display:grid; place-items:center;
  color:var(--ss-gold-500);
  transition:transform .35s var(--ss-ease), color .25s;
}
.ss-tile-ic svg{width:34px; height:34px; stroke-width:1.7;}
.ss-tile:hover .ss-tile-ic{transform:translateY(-2px); color:var(--ss-gold-600);}
.ss-tile-txt{display:flex; flex-direction:column; gap:2px; line-height:1.15;}
.ss-tile-txt b{font-size:1.06rem; font-weight:600; transition:color .25s;}
.ss-tile-txt small{font-size:.86rem; color:#7a6258;}
.ss-tile-txt .ss-tile-total{font-weight:600; color:var(--ss-maroon-700);}
.ss-tile:hover .ss-tile-txt b{color:var(--ss-maroon-700);}
.ss-tile.is-current .ss-tile-ic{color:var(--ss-maroon-700);}
.ss-tile .ss-badge{
  top:-4px; right:-6px;
  background:linear-gradient(160deg,#b8283a,var(--ss-maroon-700));
  color:#fff; box-shadow:0 0 0 2px #fdf7ea;
}

/* ----------------------------------------------------------------- header */
.ss-header{
  position:sticky; top:0; z-index:100;
  background:
    radial-gradient(120% 180% at 12% -40%, rgba(217,176,74,.20), transparent 55%),
    radial-gradient(90% 160% at 88% -30%, rgba(165,35,50,.42), transparent 60%),
    linear-gradient(180deg,var(--ss-maroon-900) 0%,var(--ss-maroon-800) 100%);
  box-shadow:0 1px 0 rgba(217,176,74,.28), 0 10px 30px -18px rgba(0,0,0,.7);
  transition:box-shadow .4s var(--ss-ease), background .4s var(--ss-ease);
}
.ss-header::before{            /* gold hairline along the very top */
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,transparent,var(--ss-gold-500) 22%,var(--ss-gold-300) 50%,var(--ss-gold-500) 78%,transparent);
  opacity:.75;
}
.ss-header.is-stuck{
  background:
    radial-gradient(120% 200% at 12% -60%, rgba(217,176,74,.16), transparent 55%),
    linear-gradient(180deg,rgba(40,5,9,.96),rgba(58,10,17,.96));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(217,176,74,.3), 0 18px 40px -20px rgba(0,0,0,.85);
}

.ss-bar{
  position:relative;
  max-width:var(--ss-shell); margin:0 auto; padding:0 var(--ss-shell-pad);
  min-height:var(--ss-bar-h);
  display:flex; align-items:center; gap:28px;
  transition:min-height .35s var(--ss-ease);
}
.ss-header.is-stuck .ss-bar{min-height:62px;}

/* Desktop: the cream band above already shows the logo and the account,
   wishlist and cart links, so the maroon bar is just the nav. Once it
   sticks and the cream band has scrolled away, the compact logo and the
   icons slide back in. */
@media (min-width:981px){
  :root{--ss-bar-h:60px;}
  .ss-header.is-stuck .ss-bar{min-height:60px;}
  .ss-header:not(.is-stuck) .ss-bar > .ss-brand,
  .ss-header:not(.is-stuck) .ss-actions{display:none;}
  .ss-header.is-stuck .ss-bar > .ss-brand,
  .ss-header.is-stuck .ss-actions{animation:ssSlideIn .45s var(--ss-ease) both;}
}
@keyframes ssSlideIn{from{opacity:0; transform:translateY(-8px);}to{opacity:1; transform:none;}}

/* ------------------------------------------------------------------ brand */
.ss-brand{
  display:flex; align-items:center; gap:13px;
  flex:none; text-decoration:none; color:inherit;
}
.ss-brand-mark{
  position:relative; width:52px; height:52px; flex:none;
  border-radius:50%; padding:2px;
  background:conic-gradient(from 210deg,var(--ss-gold-600),var(--ss-gold-300),var(--ss-gold-500),var(--ss-gold-600));
  box-shadow:0 0 0 1px rgba(40,5,9,.5), 0 8px 20px -8px rgba(0,0,0,.8);
  transition:width .35s var(--ss-ease), height .35s var(--ss-ease), transform .5s var(--ss-ease);
}
.ss-brand-mark img{
  width:100%; height:100%; display:block;
  border-radius:50%; object-fit:cover;
  background:var(--ss-maroon-950);
}
.ss-brand:hover .ss-brand-mark{transform:rotate(-6deg) scale(1.05);}
.ss-header.is-stuck .ss-brand-mark{width:42px; height:42px;}
.ss-brand-word{display:flex; flex-direction:column; line-height:1;}
.ss-brand-word b{
  font-family:var(--display,'Cinzel',serif);
  font-size:1.34rem; letter-spacing:.07em; font-weight:600;
  background:linear-gradient(95deg,var(--ss-gold-300),#fff0c9 45%,var(--ss-gold-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:font-size .35s var(--ss-ease);
}
.ss-brand-word i{
  font-style:normal; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:#c9b39b; margin-top:5px;
}
.ss-header.is-stuck .ss-brand-word b{font-size:1.18rem;}

/* -------------------------------------------------------------------- nav */
.ss-nav{display:flex; align-items:center; gap:4px; margin:0 auto;}
.ss-nav-top{
  position:relative; display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:8px;
  color:#f2e6d5; text-decoration:none;
  font-size:.86rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
  transition:color .25s var(--ss-ease), background .25s var(--ss-ease);
}
.ss-nav-top::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--ss-gold-500),var(--ss-gold-300));
  border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ss-ease);
}
.ss-nav-top:hover{color:var(--ss-gold-300); background:rgba(217,176,74,.08);}
.ss-nav-top:hover::after, .ss-nav-top.is-active::after{transform:scaleX(1);}
.ss-nav-top.is-active{color:var(--ss-gold-300);}
.ss-caret{width:12px; height:12px; flex:none; opacity:.7; transition:transform .3s var(--ss-ease);}
.ss-nav-top .ss-caret{transform:rotate(90deg); margin-left:1px;}

/* ------------------------------------------------------- shop dropdown */
.ss-nav-item{position:relative;}
.ss-nav-item.is-open > .ss-nav-top{color:var(--ss-gold-300); background:rgba(217,176,74,.08);}
.ss-nav-item.is-open > .ss-nav-top::after{transform:scaleX(1);}
.ss-nav-item.is-open > .ss-nav-top .ss-caret{transform:rotate(-90deg);}
.ss-menu{
  position:absolute; top:100%; left:50%; z-index:5;
  padding-top:12px;                     /* hover bridge between bar and panel */
  opacity:0; visibility:hidden;
  transform:translate(-50%,-8px);
  transition:opacity .28s var(--ss-ease), transform .28s var(--ss-ease), visibility .28s;
}
.ss-nav-item.is-open > .ss-menu{opacity:1; visibility:visible; transform:translate(-50%,0);}
.ss-menu-in{
  position:relative;
  width:max(420px,26vw); max-width:520px;
  border-radius:16px; padding:16px;
  background:linear-gradient(180deg,#430c14 0%,var(--ss-maroon-950) 100%);
  border:1px solid rgba(217,176,74,.3);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.25);
}
.ss-menu-in::before{                    /* little gold beak pointing at the link */
  content:""; position:absolute; top:-7px; left:50%; width:13px; height:13px;
  transform:translateX(-50%) rotate(45deg);
  background:#430c14;
  border-left:1px solid rgba(217,176,74,.3); border-top:1px solid rgba(217,176,74,.3);
  border-radius:3px 0 0 0;
}
.ss-menu-label{
  margin:2px 6px 10px; font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ss-gold-400);
}
.ss-menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px;}
.ss-menu-grid a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px;
  text-decoration:none; color:#e8d8c0;
  font-size:.83rem; letter-spacing:.02em; line-height:1.25;
  border:1px solid transparent;
  transition:color .22s, background .22s, border-color .22s;
}
.ss-menu-ic{
  width:30px; height:30px; flex:none; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(217,176,74,.1); border:1px solid rgba(217,176,74,.2);
  color:var(--ss-gold-300);
  transition:background .22s, border-color .22s, transform .22s var(--ss-ease);
}
.ss-menu-ic svg{width:16px; height:16px;}
.ss-menu-grid a:hover{
  color:var(--ss-gold-300);
  background:rgba(217,176,74,.1);
  border-color:rgba(217,176,74,.26);
}
.ss-menu-grid a:hover .ss-menu-ic{
  background:rgba(217,176,74,.22); border-color:rgba(217,176,74,.45);
  transform:translateY(-1px);
}
.ss-menu-all{
  margin-top:12px; padding:11px 14px; border-radius:999px;
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.82rem; font-weight:600; letter-spacing:.03em;
  background:linear-gradient(135deg,var(--ss-gold-400),var(--ss-gold-600));
  color:var(--ss-maroon-950);
  transition:filter .25s, transform .25s var(--ss-ease);
}
.ss-menu-all svg{width:16px; height:16px;}
.ss-menu-all .ss-caret{margin-left:auto; opacity:.85;}
.ss-menu-all:hover{filter:brightness(1.08); transform:translateY(-1px);}
.ss-menu-all:hover .ss-caret{transform:translateX(3px);}

/* ---------------------------------------------------------------- actions */
.ss-actions{display:flex; align-items:center; gap:6px; flex:none; margin-left:auto;}
.ss-ic{
  position:relative;
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ss-cream); background:transparent;
  border:1px solid transparent; text-decoration:none; padding:0; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ss-ease);
}
.ss-ic svg{width:20px; height:20px; stroke-width:1.6;}
.ss-ic:hover{
  color:var(--ss-gold-300);
  background:rgba(217,176,74,.14);
  border-color:rgba(217,176,74,.35);
  transform:translateY(-2px);
}
.ss-ic.is-current{
  color:var(--ss-gold-300);
  background:rgba(217,176,74,.16);
  border-color:rgba(217,176,74,.45);
}
.ss-badge{
  position:absolute; top:2px; right:1px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--ss-gold-500); color:var(--ss-maroon-950);
  font-size:.63rem; font-weight:700; font-style:normal; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px var(--ss-maroon-900);
}
.ss-header.is-stuck .ss-badge{box-shadow:0 0 0 2px #33080e;}
.ss-burger{display:none;}

/* ----------------------------------------------------------------- search */
.ss-search{
  overflow:hidden; max-height:0; opacity:0;
  border-top:1px solid transparent;
  background:rgba(40,5,9,.6);
  transition:max-height .35s var(--ss-ease), opacity .25s;
}
.ss-search.is-open{max-height:90px; opacity:1; border-top-color:rgba(217,176,74,.2);}
.ss-search form{
  max-width:var(--ss-shell); margin:0 auto; padding:14px var(--ss-shell-pad);
  display:flex; align-items:center; gap:10px;
}
.ss-search input{
  flex:1; min-width:0;
  background:rgba(251,245,232,.06);
  border:1px solid rgba(217,176,74,.3);
  border-radius:999px; padding:12px 20px;
  color:var(--ss-cream); font-family:inherit; font-size:.92rem;
}
.ss-search input::placeholder{color:#b49c86;}
.ss-search input:focus{outline:none; border-color:var(--ss-gold-400); background:rgba(251,245,232,.1);}
.ss-search button{
  flex:none; border:0; border-radius:999px; cursor:pointer;
  padding:12px 24px; font-family:inherit; font-size:.86rem; font-weight:600;
  background:linear-gradient(135deg,var(--ss-gold-400),var(--ss-gold-600));
  color:var(--ss-maroon-950);
  transition:filter .25s, transform .25s;
}
.ss-search button:hover{filter:brightness(1.08); transform:translateY(-1px);}

/* ------------------------------------------------- search autocomplete
   The panel lives on <body> (site-header.js) and is positioned against the
   search box, so neither .ss-search's overflow nor the sticky header can
   clip it. Both search boxes share these styles. */
.ss-ac{
  position:fixed; z-index:160;
  max-height:min(70vh,520px); overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg,#fffdf7,#fbf5e8);
  border:1.5px solid rgba(199,154,46,.5);
  border-radius:18px;
  box-shadow:0 26px 60px -28px rgba(40,5,9,.62), 0 2px 8px -4px rgba(40,5,9,.25);
  padding:8px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .18s var(--ss-ease), transform .18s var(--ss-ease);
}
.ss-ac.is-open{opacity:1; transform:none;}
.ss-ac[hidden]{display:none;}
.ss-ac.is-loading{cursor:progress;}

.ss-ac-sec{
  padding:10px 12px 6px;
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#9a7b46;
}
.ss-ac-sec + .ss-ac-sec, .ss-ac-row + .ss-ac-sec{margin-top:4px; border-top:1px solid rgba(199,154,46,.22);}

.ss-ac-row{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:12px;
  text-decoration:none; color:var(--ss-maroon-900);
  transition:background .15s, transform .15s var(--ss-ease);
}
.ss-ac-row.is-active,
.ss-ac-row:hover{background:rgba(217,176,74,.2);}
.ss-ac-row.is-active{box-shadow:inset 0 0 0 1.5px rgba(199,154,46,.55);}

.ss-ac-pic{
  flex:none; width:46px; height:46px; border-radius:10px; object-fit:cover;
  background:#fff; border:1px solid rgba(199,154,46,.3);
}
.ss-ac-pic-empty{background:linear-gradient(135deg,#f3e7cf,#e8d6ae);}
.ss-ac-ico svg{width:17px; height:17px;}

.ss-ac-ico{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ss-maroon-800);
  background:radial-gradient(circle at 35% 30%,#f6e8c6,#e6d0a0);
  border:1px solid rgba(199,154,46,.4);
}

.ss-ac-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ss-ac-txt b{
  font-weight:600; font-size:.92rem; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-ac-txt small{font-size:.72rem; color:#8d776a;}
.ss-ac mark{background:none; color:var(--ss-gold-600); font-weight:800;}

.ss-ac-price{
  flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  font-size:.9rem; font-weight:700; color:var(--ss-maroon-800);
}
.ss-ac-price s{font-size:.72rem; font-weight:500; color:#a08d7d;}
.ss-ac-price em{font-size:.66rem; font-style:normal; font-weight:600; color:#a33;}

.ss-ac-all{
  display:block; margin-top:6px; padding:12px;
  text-align:center; text-decoration:none; border-radius:12px;
  font-size:.82rem; font-weight:700;
  color:var(--ss-maroon-950);
  background:linear-gradient(135deg,var(--ss-gold-400),var(--ss-gold-600));
  transition:filter .2s;
}
.ss-ac-all:hover, .ss-ac-all.is-active{filter:brightness(1.08);}

.ss-ac-empty{
  padding:22px 16px; text-align:center; color:var(--ss-maroon-800); font-size:.9rem;
}
.ss-ac-empty b{color:var(--ss-gold-600);}
.ss-ac-empty span{display:block; margin-top:6px; font-size:.78rem; color:#8d776a;}

@media (prefers-reduced-motion: reduce){
  .ss-ac{transition:none; transform:none;}
}

/* --------------------------------------------------------- mobile drawer */
.ss-scrim{
  position:fixed; inset:0; z-index:110;
  background:rgba(20,3,6,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.ss-scrim.is-open{opacity:1; visibility:visible;}
.ss-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:111;
  width:min(360px,86vw);
  background:linear-gradient(180deg,var(--ss-maroon-900),var(--ss-maroon-950));
  border-left:1px solid rgba(217,176,74,.28);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.9);
  transform:translateX(102%);
  transition:transform .42s var(--ss-ease);
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
}
.ss-drawer.is-open{transform:translateX(0);}
.ss-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; border-bottom:1px solid rgba(217,176,74,.18);
}
.ss-drawer-head .ss-brand-word b{font-size:1.16rem;}
.ss-close{
  width:40px; height:40px; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid rgba(217,176,74,.3); background:rgba(217,176,74,.08);
  color:var(--ss-gold-300); display:inline-flex; align-items:center; justify-content:center;
}
.ss-close svg{width:18px; height:18px;}
.ss-drawer-nav{display:flex; flex-direction:column; padding:10px 12px;}
.ss-drawer-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px; border-radius:10px; text-decoration:none;
  color:var(--ss-cream); font-size:.98rem; letter-spacing:.03em;
  border-bottom:1px solid rgba(217,176,74,.1);
  transition:background .25s, color .25s;
}
.ss-drawer-nav a:hover, .ss-drawer-nav a.is-active{color:var(--ss-gold-300); background:rgba(217,176,74,.1);}
.ss-drawer-nav a svg{width:15px; height:15px; opacity:.55;}
.ss-drawer-label{
  padding:20px 22px 8px; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ss-gold-400);
}
.ss-drawer-chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 20px;}
.ss-drawer-chips a{
  padding:8px 14px; border-radius:999px; text-decoration:none;
  font-size:.79rem; color:#dcc8ab;
  border:1px solid rgba(217,176,74,.26); background:rgba(217,176,74,.06);
}
.ss-drawer-chips a:hover{color:var(--ss-gold-300); border-color:var(--ss-gold-400);}
.ss-drawer-foot{
  margin-top:auto; padding:20px; display:grid; gap:12px;
  border-top:1px solid rgba(217,176,74,.18);
}
.ss-drawer-foot a{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 18px; border-radius:999px; text-decoration:none;
  font-size:.88rem; font-weight:600; letter-spacing:.03em;
}
.ss-drawer-foot .ss-d-cta{
  background:linear-gradient(135deg,var(--ss-gold-400),var(--ss-gold-600));
  color:var(--ss-maroon-950);
}
.ss-drawer-foot .ss-d-call{
  border:1px solid rgba(217,176,74,.4); color:var(--ss-gold-300);
}
.ss-drawer-foot svg{width:16px; height:16px;}

/* ------------------------------------------------------- install app */
/* phones / tablets only — site-header.js removes [hidden] when the browser can install */
[data-install][hidden]{display:none !important;}
.ss-tile-install{
  padding:0; border:0; background:none; font:inherit; text-align:left; cursor:pointer;
}
/* the search-band button belongs to the burger layout (shown at 980px and below) */
.ss-install{
  display:none; flex:none; align-items:center; gap:7px;
  height:46px; padding:0 18px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.86rem; font-weight:600; line-height:1; letter-spacing:.02em; white-space:nowrap;
  color:#fff3d6;
  background:radial-gradient(circle at 35% 30%,var(--ss-maroon-600,#8a1c2a),var(--ss-maroon-900));
  box-shadow:0 6px 14px -8px rgba(58,10,17,.9), inset 0 0 0 1px rgba(217,176,74,.45);
}
.ss-install svg{width:18px; height:18px; stroke-width:2; color:var(--ss-gold-300);}
.ss-install em{font-style:normal;}
.ss-drawer-foot .ss-d-install{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 18px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.88rem; font-weight:600; letter-spacing:.03em;
  color:var(--ss-cream,#fbf6ea); background:rgba(217,176,74,.12);
  border:1px dashed rgba(217,176,74,.55);
}

/* iOS has no install prompt: a short "Share → Add to Home Screen" sheet instead */
.ss-ios-sheet{
  position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; z-index:1300;
  max-width:420px; margin:0 auto; padding:20px 20px 18px;
  border-radius:20px; color:var(--ss-cream,#fbf6ea);
  background:linear-gradient(180deg,var(--ss-maroon-800),var(--ss-maroon-950,#280509));
  border:1px solid rgba(217,176,74,.4); box-shadow:0 24px 50px -16px rgba(0,0,0,.7);
}
.ss-ios-sheet h3{margin:0 0 10px; font-family:var(--display,'Cinzel',serif); font-size:1.05rem; color:var(--ss-gold-300);}
.ss-ios-sheet ol{margin:0; padding-left:20px; font-size:.9rem; line-height:1.7;}
.ss-ios-sheet b{color:var(--ss-gold-300);}
.ss-ios-sheet button{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  color:inherit; background:rgba(255,255,255,.08);
}
.ss-ios-sheet button svg{width:16px; height:16px;}

body.ss-locked{overflow:hidden;}

/* ------------------------------------------------------- fly-to-cart */
.ss-fly{position:fixed; z-index:1200; pointer-events:none;}
.ss-fly-y{width:100%; height:100%;}
.ss-fly-pic{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:18px; border:2px solid var(--ss-gold-400);
  background:var(--ss-cream);
  box-shadow:0 20px 40px -10px rgba(40,5,9,.6);
}
.ss-fly-bag{
  display:grid; place-items:center; color:var(--ss-maroon-900);
  background:linear-gradient(145deg,var(--ss-gold-300),var(--ss-gold-500));
}
.ss-fly-bag svg{width:46%; height:46%;}
/* gold ring that pulses out of the cart icon as the item lands */
.ss-ic.ss-caught::after,
.ss-tile-ic.ss-caught::after{
  content:""; position:absolute; inset:-1px; border-radius:50%; pointer-events:none;
  border:2px solid var(--ss-gold-400);
  animation:ssCaught .7s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ssCaught{from{opacity:.95; transform:scale(.85);} to{opacity:0; transform:scale(1.7);}}

/* ------------------------------------------------------------ responsive */
/* the cream band gives up words before the search box gets cramped */
@media (max-width:1360px){
  .ss-tile[data-ss="wishlist"] .ss-tile-txt{display:none;}
  .ss-tile-txt b{font-size:.98rem;}
  .ss-tile-txt small{font-size:.8rem;}
}
@media (max-width:1180px){
  .ss-bar{gap:18px; padding:0 22px;}
  .ss-nav-top{padding:10px 10px; font-size:.82rem;}
  .ss-topbar-in, .ss-search form, .ss-midbar-in{padding-left:22px; padding-right:22px;}
  .ss-midbar-in{gap:20px;}
  .ss-tile-txt{display:none;}
  .ss-tiles{gap:10px;}
  .ss-header.is-stuck .ss-bar > .ss-brand .ss-brand-word{display:none;}
}
/* last squeeze before the burger takes over at 980px */
@media (max-width:1080px){
  .ss-bar{gap:12px; padding:0 16px;}
  .ss-nav{gap:0;}
  .ss-nav-top{padding:10px 7px; font-size:.78rem; letter-spacing:.04em;}
  .ss-nav-top::after{left:7px; right:7px;}
  .ss-menu-in{width:min(420px,80vw); padding:14px;}
  .ss-brand-word i{display:none;}          /* keep the wordmark, drop the tagline */
  .ss-topbar-in, .ss-search form, .ss-midbar-in{padding-left:16px; padding-right:16px;}
}
@media (max-width:980px){
  .ss-nav{display:none;}
  .ss-burger{display:inline-flex;}
  .ss-tb-links .ss-tb-track{display:none;}
  /* burger layout: the maroon bar holds the logo and icons again, so the
     cream band is just a full-width search box */
  .ss-midbar-in{display:flex; align-items:center; gap:10px; padding-top:10px; padding-bottom:10px;}
  .ss-mid-brand, .ss-tiles{display:none;}
  .ss-find{flex:1 1 auto; min-width:0; max-width:none;}
  .ss-install{display:inline-flex;}
  /* one rotating message instead of a row that wraps onto two lines */
  .ss-tb-msgs{position:relative; height:34px; flex:1 1 auto;}
  .ss-tb-msgs > span{
    position:absolute; inset:0; margin:0 !important; padding:0 !important;
    border:0 !important; justify-content:flex-start; white-space:nowrap;
    opacity:0; transition:opacity .5s var(--ss-ease);
  }
  .ss-tb-msgs > span.is-on{opacity:1;}
}
@media (max-width:760px){
  :root{--ss-bar-h:64px;}
  .ss-topbar{font-size:.72rem;}
  .ss-topbar-in{padding:0 16px; justify-content:center;}
  .ss-tb-links{display:none;}
  .ss-tb-msgs{width:100%; justify-content:center;}
  .ss-tb-msgs > span{justify-content:center;}
  .ss-bar{padding:0 16px; gap:12px;}
  .ss-brand-mark{width:42px; height:42px;}
  .ss-brand-word b{font-size:1.06rem;}
  .ss-brand-word i{font-size:.52rem; letter-spacing:.14em;}
  .ss-actions{gap:0;}
  .ss-ic{width:38px; height:38px;}
  .ss-ic[data-ss="search"]{display:none;}
  .ss-search form{padding:12px 16px;}
  .ss-midbar-in{padding:10px 16px;}
  .ss-find{height:46px; padding-left:18px;}
  .ss-find input{font-size:16px;}           /* 16px stops iOS zooming into the field */
}
@media (max-width:420px){
  .ss-install{padding:0 14px;}
  .ss-install em{display:none;}             /* "Install" alone keeps the search box roomy */
  .ss-brand-word i{display:none;}
  .ss-ic[data-ss="wishlist"]{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ss-header, .ss-bar, .ss-brand-mark, .ss-nav-top::after, .ss-drawer, .ss-scrim,
  .ss-menu, .ss-search{transition-duration:.01ms !important;}
}