/* ══════════════════════════════════════════════════════════════════
   DEMETOS — Storefront styles (frontend-only cart)
   Brand tokens re-declared so this file works on every page.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --sh-green:#02805D; --sh-yellow:#EDCA00; --sh-red:#EE295C;
  --sh-blue:#283B8E;  --sh-pink:#CD1F86;  --sh-cream:#FAFAF0;
  --sh-dark:#1A1A1A;  --sh-white:#fff;
}
.sh-pokinca{ font-family:'Goshco',serif; }

/* ── Mascot cursor must outrank the shop layers ─────────────────────
   The shop stacks: fab 99990 · overlay 100000 · drawer 100001 ·
   modal 100010 · toast 100002. The product pages declare the mascot
   cursor at z-index:99999, so an open drawer buried it — the pointer
   vanished exactly where you needed to click. index.html happens to use
   9999999 and never showed the bug.

   Fixed here rather than in each page's <style> because those blocks are
   parsed AFTER this file: at equal specificity they'd win. `body .cursor`
   (0,1,1) outranks a bare `.cursor` (0,1,0) regardless of order, so this
   holds without !important and without editing four HTML files. */
body .cursor{ z-index:100020; }

/* ── Floating cart button (all pages) ───────────────────────────── */
.sh-fab{
  position:fixed; right:22px; bottom:22px; z-index:99990;
  width:60px; height:60px; border-radius:50%;
  background:var(--sh-green); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(2,128,93,.35);
  cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.sh-fab:hover{ transform:scale(1.08); background:#026a4d; }
.sh-fab svg{ width:26px; height:26px; }
.sh-fab-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 6px; border-radius:100px;
  background:var(--sh-yellow); color:var(--sh-dark);
  font-family:'Goshco',serif; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sh-fab-badge.show{ transform:scale(1); }
@media(max-width:1024px){ .sh-fab{ cursor:auto; } }

/* ── Overlay + drawer ───────────────────────────────────────────── */
.sh-overlay{
  position:fixed; inset:0; z-index:100000;
  background:rgba(18,18,14,.55); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  /* visibility is a DISCRETE property: `transition:visibility .3s` flips it
     only at the END of the 300ms. That made the drawer unfocusable for its
     whole opening animation — focus() silently no-ops on a hidden element,
     so moving focus into the cart failed. Show it instantly on open; delay
     the hide until the fade-out has finished. */
  transition:opacity .3s, visibility 0s linear .3s;
}
.sh-overlay.open{ opacity:1; visibility:visible; transition:opacity .3s, visibility 0s; }

.sh-drawer{
  position:fixed; top:0; right:0; z-index:100001;
  width:452px; max-width:94vw; height:100%;
  background:#fff; color:var(--sh-dark);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,1,.36,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.22);
  font-family:'Goshco',Georgia,serif;
}
.sh-drawer.open{ transform:translateX(0); }

/* header — cream "chrome" band, distinct from the white content sheet */
.sh-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px 12px; background:var(--sh-cream); }
.sh-drawer-title{ font-family:'Goshco',serif; font-size:21px; line-height:1; letter-spacing:.01em; color:var(--sh-dark); }
.sh-drawer-count{ font-size:11px; color:rgba(26,26,26,.45); margin-top:6px; letter-spacing:.1em; }
.sh-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* Orders is reachable from the drawer at all times — it used to appear only
   after you'd ordered, which is exactly when you couldn't find it. */
.sh-head-orders{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px;
  border-radius:100px; text-decoration:none; color:rgba(26,26,26,.6);
  font-family:'Goshco',serif; font-size:11px; letter-spacing:.07em;
  transition:background .2s, color .2s;
}
.sh-head-orders svg{ width:15px; height:15px; }
.sh-head-orders:hover{ background:rgba(2,128,93,.1); color:var(--sh-green); }

.sh-close{ width:44px; height:44px; border-radius:50%; border:none; background:rgba(26,26,26,.05); color:var(--sh-dark); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,color .2s; flex-shrink:0; }
.sh-close:hover{ background:var(--sh-dark); color:#fff; }
.sh-close svg{ width:15px; height:15px; }

/* Orders link injected into the product-page nav by cart.js.
   That nav centres its logo with position:absolute, so appended children
   just pile up on the left — margin-left:auto puts this on the right edge,
   opposite the back link, where a shop's account link belongs. */
.sh-nav-orders{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 6px;
  text-decoration:none; color:var(--sh-dark);
  font-family:'Goshco',serif; font-size:14px; transition:color .2s;
}
.sh-nav-orders svg{ width:17px; height:17px; }
.sh-nav-orders:hover{ color:var(--sh-green); }

/* ── Progress bar (pinned) ──────────────────────────────────────
   Nodes are positioned by their real ₹ ratio (left:amount/max),
   so the fill and the dots always agree with the message.        */
.sh-progress{ padding:0 22px 12px; background:var(--sh-cream); border-bottom:1px solid rgba(26,26,26,.08); }
.sh-progress-msg{ font-size:12.5px; letter-spacing:.02em; margin-bottom:18px; color:rgba(26,26,26,.7); line-height:1.35; }
.sh-progress-msg b{ color:var(--sh-green); }
/* The track begins ON the first dot and ends ON the last one. The 30px
   side margins are the room those end dots' captions need to stay centred
   under them — the captions, not the bar, land on the drawer's 22px
   gutter. See renderProgress(): dots span [first tier .. last tier]. */
.sh-progress-track{ position:relative; height:6px; border-radius:100px; background:rgba(26,26,26,.1); margin:0 30px 34px; }
.sh-progress-fill{ position:absolute; left:0; top:0; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--sh-green),#3fae7f); transition:width .5s cubic-bezier(.22,1,.36,1); }
.sh-node{ position:absolute; top:50%; }
/* the cream ring punches a gap in the track, so an un-unlocked node
   always interrupts the fill instead of being swallowed by it */
.sh-node .dot{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--sh-cream); border:2.5px solid rgba(26,26,26,.28);
  box-shadow:0 0 0 3px var(--sh-cream);
  display:flex; align-items:center; justify-content:center; transition:.35s;
}
.sh-node .dot svg{ width:9px; height:9px; color:#fff; opacity:0; transition:opacity .2s; }
/* a reached dot must merge into the fill — keeping the cream ring here
   would cut the bar and orphan the green run past this node */
.sh-node.reached .dot{ background:var(--sh-green); border-color:var(--sh-green); box-shadow:none; }
.sh-node.reached .dot svg{ opacity:1; }
.sh-node .cap{ position:absolute; left:0; top:15px; transform:translateX(-50%); white-space:nowrap; text-align:center; font-size:10px; letter-spacing:.04em; line-height:1.35; color:rgba(26,26,26,.5); }
.sh-node .cap b{ font-family:'Goshco',serif; font-weight:normal; color:rgba(26,26,26,.6); }
.sh-node.reached .cap, .sh-node.reached .cap b{ color:var(--sh-green); }

/* ── Scrollable body (single scroll, white content sheet) ───────── */
.sh-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:#fff; }
/* pinned regions never shrink — only .sh-scroll scrolls */
.sh-drawer-head, .sh-progress, .sh-foot{ flex-shrink:0; }

/* ── Items (hairline-separated rows, not cards) ─────────────────── */
.sh-items{ padding:2px 22px; }
.sh-line{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid rgba(26,26,26,.07); }
.sh-items .sh-line:last-child{ border-bottom:none; }
.sh-line-img{ width:64px; height:64px; border-radius:12px; object-fit:cover; background:#f4f4ec; }
.sh-line-main{ min-width:0; }
.sh-line-cat{ font-size:10px; letter-spacing:.14em; color:rgba(26,26,26,.5); }
.sh-line-name{ font-family:'Goshco',serif; font-size:16px; line-height:1.15; margin:3px 0 10px; color:var(--sh-dark); }
.sh-line-row{ display:flex; align-items:center; gap:14px; }
/* Quantity: 44px targets. The pill stays visually 36px tall — the buttons
   overflow it slightly and the row absorbs the extra, so the control looks
   the same but is actually thumb-sized. Measured, not eyeballed. */
.sh-qty{ display:flex; align-items:center; border:1.5px solid rgba(26,26,26,.14); border-radius:100px; height:38px; }
.sh-qty button{ width:44px; height:44px; border:none; background:transparent; font-size:17px; line-height:1; cursor:pointer; color:var(--sh-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s; }
.sh-qty button:hover{ background:rgba(2,128,93,.1); color:var(--sh-green); }
.sh-qty span{ min-width:26px; text-align:center; font-size:14.5px; }
.sh-line-rm{ min-height:44px; background:none; border:none; padding:0 6px; font-family:'Goshco',serif; font-size:11px; letter-spacing:.08em; color:rgba(26,26,26,.55); cursor:pointer; transition:color .18s; }
.sh-line-rm:hover{ color:var(--sh-red); }
.sh-line-total{ font-family:'Goshco',serif; font-size:16.5px; color:var(--sh-dark); text-align:right; white-space:nowrap; line-height:1.2; align-self:center; }
.sh-line-total s{ display:block; font-family:'Goshco',serif; font-size:11px; color:rgba(26,26,26,.35); margin-top:2px; }
.sh-line.gift{ background:linear-gradient(100deg, rgba(2,128,93,.07), rgba(237,202,0,.1)); border:none; border-radius:14px; padding:14px; margin:10px 0 4px; }
.sh-line.gift .sh-line-img{ background:transparent; display:flex; align-items:center; justify-content:center; color:var(--sh-green); }
.sh-line.gift .sh-line-img svg{ width:28px; height:28px; }
.sh-line.gift .sh-line-name{ margin-bottom:0; }
.sh-line-free{ color:var(--sh-green); font-family:'Goshco',serif; font-size:13px; letter-spacing:.1em; }

/* empty state */
.sh-empty{ text-align:center; padding:70px 24px; color:rgba(26,26,26,.5); }
.sh-empty svg{ width:56px; height:56px; opacity:.2; margin-bottom:16px; }
.sh-empty h4{ font-family:'Goshco',serif; font-size:19px; color:var(--sh-dark); margin-bottom:6px; }
.sh-empty p{ font-size:13.5px; margin-bottom:22px; }
.sh-empty-btn{ display:inline-block; background:var(--sh-green); color:#fff; text-decoration:none; padding:12px 26px; border-radius:100px; font-family:'Goshco',serif; font-size:14px; cursor:pointer; }
.sh-empty-btn:hover{ background:#026a4d; }

/* ── Section label shared by upsell / coupon ────────────────────── */
.sh-sec{ padding:16px 22px; border-top:1px solid rgba(26,26,26,.07); }
.sh-sec-title{ font-family:'Goshco',serif; font-size:11px; letter-spacing:.14em; color:rgba(26,26,26,.45); margin-bottom:12px; }

/* ── Upsell (compact scroller) ──────────────────────────────────── */
/* top padding clears the -8px overhang of .sh-up-add, which the
   horizontal scroller would otherwise clip */
.sh-upsell-row{ display:flex; gap:14px; overflow-x:auto; padding:12px 2px 6px; scrollbar-width:thin; }
.sh-up-card{ flex:0 0 112px; background:var(--sh-cream); border:1px solid rgba(26,26,26,.07); border-radius:14px; padding:8px; position:relative; }
.sh-up-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:9px; background:#f0f0e8; }
.sh-up-name{ font-family:'Goshco',serif; font-size:11.5px; margin:7px 0 2px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-up-price{ font-size:11.5px; color:rgba(26,26,26,.5); }
.sh-up-add{ position:absolute; top:-10px; right:-10px; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--sh-green); border:1.5px solid rgba(2,128,93,.3); box-shadow:0 3px 10px rgba(0,0,0,.14); font-size:21px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.sh-up-add:hover{ background:var(--sh-green); color:#fff; border-color:var(--sh-green); transform:scale(1.1); }

/* ── Coupons ────────────────────────────────────────────────────── */
.sh-coupon-suggest{
  display:flex; align-items:center; gap:10px;
  background:rgba(2,128,93,.06); border:1px dashed rgba(2,128,93,.4);
  border-radius:12px; padding:11px 13px; margin-bottom:9px; font-size:12.5px; cursor:pointer; transition:background .2s;
}
.sh-coupon-suggest:hover{ background:rgba(2,128,93,.12); }
.sh-coupon-suggest svg{ flex-shrink:0; }
.sh-coupon-suggest .tag{ font-family:'Goshco',serif; color:var(--sh-green); }
.sh-coupon-suggest .go{ margin-left:auto; font-family:'Goshco',serif; color:var(--sh-green); font-size:11.5px; letter-spacing:.06em; white-space:nowrap; }
.sh-coupon-input{ display:flex; gap:8px; }
.sh-coupon-input input{
  flex:1; min-width:0; border:1.5px solid rgba(26,26,26,.14); border-radius:12px;
  padding:0 14px; height:46px; font-family:'Goshco',serif; font-size:13.5px; text-transform:uppercase; letter-spacing:.08em; background:var(--sh-cream);
}
.sh-coupon-input input::placeholder{ text-transform:none; letter-spacing:.02em; color:rgba(26,26,26,.38); }
.sh-coupon-input input:focus{ outline:none; border-color:var(--sh-green); background:#fff; }
.sh-coupon-input button{ background:var(--sh-dark); color:#fff; border:none; padding:0 20px; height:46px; border-radius:12px; font-family:'Goshco',serif; font-size:12px; letter-spacing:.08em; cursor:pointer; transition:background .2s; }
.sh-coupon-input button:hover{ background:var(--sh-green); }
.sh-coupon-applied{ display:flex; align-items:center; gap:9px; background:rgba(2,128,93,.08); border-radius:12px; padding:13px; font-size:13px; color:var(--sh-green); }
.sh-coupon-applied > svg{ width:17px; height:17px; flex-shrink:0; }
.sh-coupon-applied .tag{ font-family:'Goshco',serif; }
.sh-coupon-applied button{ margin-left:auto; background:none; border:none; color:rgba(26,26,26,.42); cursor:pointer; font-size:11px; letter-spacing:.06em; }
.sh-coupon-applied button:hover{ color:var(--sh-red); }
.sh-coupon-err{ color:var(--sh-red); font-size:11.5px; margin-top:7px; min-height:14px; }

/* ── Offer wall ("+N more offers" → the full list) ───────────────
   Collapsed by default so the cart stays a cart, not a coupon page.
   Locked offers stay in the list, greyed with their reason — the point
   is to show what ₹X more (or a sign-in) would unlock. */
.sh-offers-toggle{
  width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:9px 2px; margin-bottom:2px; cursor:pointer;
  font-family:'Goshco',serif; font-size:11.5px; letter-spacing:.06em; color:var(--sh-green);
}
.sh-offers-toggle .go{ display:inline-flex; align-items:center; gap:5px; color:rgba(26,26,26,.5); }
.sh-offers-toggle .go svg{ width:12px; height:12px; transition:transform .25s; }
.sh-offers-toggle.open .go svg{ transform:rotate(90deg); }
.sh-offers-toggle:hover .go{ color:var(--sh-dark); }

.sh-offer-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:11px; }
.sh-offer{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(26,26,26,.1); border-radius:12px; padding:11px 12px; background:var(--sh-cream);
}
.sh-offer-l{ display:flex; align-items:center; gap:9px; min-width:0; }
.sh-offer-l > svg{ flex-shrink:0; }
.sh-offer-code{ font-family:'Goshco',serif; font-size:12.5px; letter-spacing:.06em; color:var(--sh-dark); }
.sh-offer-desc{ font-size:11px; line-height:1.4; color:rgba(26,26,26,.5); margin-top:2px; }
.sh-offer-apply{
  margin-left:auto; flex-shrink:0; white-space:nowrap; min-height:44px;
  background:var(--sh-green); color:#fff; border:none; border-radius:100px;
  padding:0 16px; font-family:'Goshco',serif; font-size:10.5px; letter-spacing:.08em;
  cursor:pointer; transition:background .2s;
}
.sh-offer-apply:hover{ background:var(--sh-dark); }
.sh-offer-lock{
  margin-left:auto; flex-shrink:0; white-space:nowrap;
  font-size:10.5px; letter-spacing:.04em; color:rgba(26,26,26,.42);
}
/* dim the row, but never the reason — that's the actionable part */
.sh-offer.locked{ background:transparent; }
.sh-offer.locked .sh-offer-l{ opacity:.5; }
/* a lock that opens the sign-in modal reads as a link, not dead text */
.sh-offer-lock.as-btn{
  min-height:44px; padding:0 4px;
  background:none; border:none; cursor:pointer;
  color:var(--sh-green); text-decoration:underline; text-underline-offset:3px;
  font-family:inherit; font-size:10.5px; letter-spacing:.04em;
}
.sh-offer-lock.as-btn:hover{ color:var(--sh-dark); }

.sh-signin-badge{
  display:inline-block; margin-top:3px;
  font-family:'Goshco',serif; font-size:10px; letter-spacing:.05em; color:var(--sh-green);
}

/* ── Sign-in nudge (demoted: sits under the coupon block) ───────── */
.sh-signin{ display:flex; align-items:center; gap:11px; margin-top:10px; background:var(--sh-cream); border:1px solid rgba(26,26,26,.08); border-radius:12px; padding:11px 12px; }
.sh-signin-ic{ width:30px; height:30px; border-radius:50%; background:var(--sh-yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sh-signin-ic svg{ width:15px; height:15px; color:var(--sh-dark); }
.sh-signin-txt{ flex:1; min-width:0; font-size:11.5px; line-height:1.4; color:rgba(26,26,26,.62); }
.sh-signin-txt b{ font-family:'Goshco',serif; font-weight:normal; color:var(--sh-dark); }
.sh-signin-cta{ min-height:44px; background:var(--sh-dark); color:#fff; border:none; padding:0 16px; border-radius:100px; font-family:'Goshco',serif; font-size:11px; letter-spacing:.08em; cursor:pointer; white-space:nowrap; transition:background .2s; }
.sh-signin-cta:hover{ background:var(--sh-green); }
.sh-signin.is-in .sh-signin-ic{ background:var(--sh-green); }
.sh-signin.is-in .sh-signin-ic svg{ color:#fff; }
.sh-signin-out{ background:transparent; color:rgba(26,26,26,.4); border:none; font-family:'Goshco',serif; font-size:11px; letter-spacing:.06em; cursor:pointer; white-space:nowrap; }
.sh-signin-out:hover{ color:var(--sh-red); }

/* ── Footer / totals / checkout ─────────────────────────────────── */
.sh-foot{ padding:14px 22px 16px; background:var(--sh-cream); border-top:1px solid rgba(26,26,26,.09); box-shadow:0 -14px 26px rgba(0,0,0,.045); }
.sh-row{ display:flex; justify-content:space-between; font-size:12.5px; letter-spacing:.02em; margin-bottom:7px; color:rgba(26,26,26,.6); }
.sh-row.save span:last-child{ color:var(--sh-green); }
/* savings rides under the total instead of eating its own 44px band */
.sh-total{ margin-top:12px; padding-top:11px; border-top:1px solid rgba(26,26,26,.1); }
.sh-row.total{ font-family:'Goshco',serif; font-size:20px; letter-spacing:.01em; color:var(--sh-dark); margin:0; align-items:baseline; }
.sh-saveline{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:5px; color:var(--sh-green); font-family:'Goshco',serif; font-size:10.5px; letter-spacing:.06em; }
.sh-saveline svg{ width:11px; height:11px; flex-shrink:0; }
.sh-checkout{
  width:100%; margin-top:12px; padding:15px; border:none; border-radius:14px;
  background:var(--sh-green); color:#fff; font-family:'Goshco',serif;
  font-size:14.5px; letter-spacing:.08em; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background .2s, transform .15s, box-shadow .2s;
  box-shadow:0 8px 20px rgba(2,128,93,.26);
}
.sh-checkout:hover{ background:#026a4d; transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,128,93,.32); }
.sh-checkout:active{ transform:translateY(0); }
.sh-checkout:disabled{ background:rgba(26,26,26,.2); box-shadow:none; cursor:not-allowed; transform:none; }
.sh-checkout svg{ width:17px; height:17px; }
.sh-trust{ text-align:center; font-size:9.5px; letter-spacing:.1em; color:rgba(26,26,26,.4); margin-top:10px; }

/* ── Drawer: short-viewport + mobile ────────────────────────────── */
@media(max-height:720px){
  .sh-progress-msg{ margin-bottom:14px; }
  .sh-progress-track{ margin-bottom:30px; }
  .sh-line{ padding:12px 0; }
  .sh-foot{ padding:12px 20px 14px; }
}
@media(max-width:480px){
  .sh-items, .sh-sec{ padding-left:16px; padding-right:16px; }
  .sh-drawer-head{ padding:16px 16px 10px; }
  .sh-progress{ padding:0 16px 10px; }
  .sh-foot{ padding:12px 16px 16px; }
  .sh-line{ grid-template-columns:58px 1fr auto; gap:12px; }
  .sh-line-img{ width:58px; height:58px; }
  .sh-line-name{ font-size:15px; }
}

/* ── Toast ──────────────────────────────────────────────────────── */
.sh-toast{
  position:fixed; bottom:96px; right:22px; z-index:100002;
  background:var(--sh-dark); color:#fff; padding:12px 18px; border-radius:12px;
  font-family:'Goshco',serif; font-size:14.5px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  transform:translateY(20px); opacity:0; pointer-events:none; transition:.3s;
}
.sh-toast.show{ transform:translateY(0); opacity:1; }
.sh-toast b{ color:var(--sh-yellow); font-family:'Goshco',serif; }

/* ── Sign-in modal ──────────────────────────────────────────────── */
.sh-modal-overlay{ position:fixed; inset:0; z-index:100010; background:rgba(20,20,15,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.3s; padding:20px; }
.sh-modal-overlay.open{ opacity:1; visibility:visible; }
.sh-modal{ background:var(--sh-cream); border-radius:22px; width:400px; max-width:100%; padding:32px 30px; text-align:center; font-family:'Goshco',serif; transform:scale(.94); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.sh-modal-overlay.open .sh-modal{ transform:scale(1); }
.sh-modal h3{ font-family:'Goshco',serif; font-size:26px; color:var(--sh-green); margin-bottom:8px; }
.sh-modal p{ font-size:13.5px; color:rgba(26,26,26,.6); margin-bottom:20px; line-height:1.5; }
.sh-modal input{ width:100%; border:1.5px solid rgba(26,26,26,.15); border-radius:12px; padding:13px 16px; font-family:'Goshco',serif; font-size:14px; background:#fff; margin-bottom:12px; }
.sh-modal input:focus{ outline:none; border-color:var(--sh-green); }
.sh-modal-btn{ width:100%; background:var(--sh-green); color:#fff; border:none; border-radius:12px; padding:14px; font-family:'Goshco',serif; font-size:15px; cursor:pointer; }
.sh-modal-btn:hover{ background:#026a4d; }
.sh-modal-close{ position:absolute; top:18px; right:18px; }
.sh-modal-err{ color:var(--sh-red); font-size:12px; min-height:16px; margin-bottom:6px; }
.sh-modal-note{ font-size:11px; color:rgba(26,26,26,.4); margin-top:14px; }

/* ── Product-page: price + add-to-cart injected into flavour cards ── */
.sh-card-buy{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(26,26,26,.07); }
.sh-card-price{ font-family:'Goshco',serif; font-size:19px; color:var(--sh-dark); }
.sh-card-price s{ font-size:12.5px; color:rgba(26,26,26,.4); margin-left:5px; font-family:'Goshco',serif; }
.sh-add-btn{
  background:var(--sh-green); color:#fff; border:none; border-radius:100px;
  padding:10px 18px; font-family:'Goshco',serif; font-size:13.5px; letter-spacing:.04em;
  cursor:pointer; transition:background .2s, transform .2s; white-space:nowrap;
}
.sh-add-btn:hover{ background:var(--sh-yellow); color:var(--sh-dark); transform:translateY(-1px); }
.sh-add-btn.added{ background:var(--sh-dark); }
@media(max-width:1024px){ .sh-add-btn, .sh-card-buy button{ cursor:auto; } }
@media(max-width:480px){
  .sh-card-buy{ flex-direction:column; align-items:stretch; gap:8px; }
  .sh-add-btn{ width:100%; padding:10px; }
  .sh-card-price{ text-align:center; }
}

/* ══ Homepage: bundles section ═══════════════════════════════════
   Built on the same skeleton as #categories / .cat-card so it reads
   as part of the site, not as a bolted-on shop widget:
   left title + right note header, 3/4 image tiles, hard offset
   yellow shadow on hover.                                          */
.sh-bundles{
  background:var(--sh-cream);
  padding:80px 60px 60px;
  position:relative; overflow:hidden;
}
.sh-bundles-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:52px; position:relative; z-index:2;
}
.sh-bundles-head .section-label{ color:rgba(26,26,26,.45); }
.sh-bundles-head .section-title{ color:var(--sh-green); }
.sh-bundles-head p{
  color:rgba(26,26,26,.5); font-size:14px; max-width:240px;
  text-align:right; line-height:1.7;
}

/* auto-fill rather than a fixed 4, because there are now 8 combo cards of
   uneven copy length — a fixed column count leaves a ragged last row at
   most widths, and these cards carry a contents list so they need room */
.sh-bundle-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(276px, 1fr));
  gap:20px; position:relative; z-index:2;
  max-width:1280px; margin:0 auto;
}

/* The card no longer uses aspect-ratio. Combo cards carry a name, tagline,
   a 3-5 item contents list and an ideal-for line; at a fixed 3/4 ratio the
   longer combos ("Chalo Kahin Door…. Snacks Ke Saath", the 5-item party
   box) overflowed their own scrim. It grows to fit instead, with a
   min-height so the short ones still look like cards, not chips. */
.sh-bundle-card{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:440px; border-radius:20px; overflow:hidden;
  border:2.5px solid rgba(26,26,26,.08);
  background:#111;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .35s;
}
.sh-bundle-card:hover{
  transform:translateY(-12px) scale(1.02);
  border-color:var(--sh-yellow);
  box-shadow:6px 10px 0 var(--sh-yellow);
}
.sh-bundle-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .55s ease; }
.sh-bundle-card:hover .sh-bundle-img{ transform:scale(1.07); }
/* stronger scrim than .cat-card's: these packshots are bright and carry
   their own display type, so the card copy needs real separation */
/* Held opaque much further up the card than the old 3/4-ratio version
   needed. The combo body is now name + tagline + contents + ideal-for +
   price, roughly 60% of the card, and these packshots are loud enough
   that anything under ~.85 alpha loses the white text against them. */
.sh-bundle-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.96) 0%, rgba(0,0,0,.93) 45%, rgba(0,0,0,.82) 62%,
    rgba(0,0,0,.45) 78%, rgba(0,0,0,.12) 92%, transparent 100%);
}

.sh-bundle-save{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--sh-red); color:#fff;
  font-family:'Goshco',serif; font-size:10px; letter-spacing:.12em;
  padding:6px 12px; border-radius:100px;
}
/* relative, not absolute — the card is a flex column that ends with this
   block, so the body's height is what makes the card tall enough.
   It carries its own near-opaque backdrop rather than trusting the
   card-wide scrim: the packshots behind these cards range from near-black
   to bright yellow, and a gradient tuned to look right over the dark ones
   left the contents list unreadable over the bright ones. Anchoring the
   text panel makes legibility independent of whatever is behind it. */
.sh-bundle-body{
  position:relative; padding:24px 22px; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.88) 70%, rgba(0,0,0,.6) 100%);
}
/* Pokinca lowercase — same family and casing as .es-label and the
   section labels, so the mood reads as a brand label rather than a tag
   borrowed from another design system. */
.sh-bundle-mood{
  font-family:'Pokinca',sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:lowercase; color:var(--sh-yellow); margin-bottom:7px;
}
.sh-bundle-name{ font-family:'Pokinca',sans-serif; font-size:26px; line-height:1.05; color:#fff; text-transform:lowercase; letter-spacing:.02em; }
.sh-bundle-tag{ font-family:'Goshco',serif; font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.55); margin:8px 0 12px; line-height:1.5; }

/* What is actually in the box. This is the reason someone buys a combo
   over four singles, so it is on the card rather than behind a click. */
.sh-bundle-inside{ list-style:none; margin:0 0 12px; padding:0; }
.sh-bundle-inside li{
  font-family:'Goshco',serif; font-size:11.5px; line-height:1.6;
  color:rgba(255,255,255,.82); padding-left:14px; position:relative;
}
.sh-bundle-inside li::before{
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--sh-yellow);
}
.sh-bundle-ideal{
  font-family:'Goshco',serif; font-size:10px; letter-spacing:.05em;
  color:rgba(255,255,255,.42); margin-bottom:16px; line-height:1.5;
}

/* Coming-soon combos: same card, visibly not for sale. Dimmed rather than
   hidden because the client wants all eight listed. */
.sh-bundle-save.soon{ background:rgba(255,255,255,.22); color:#fff; }
.sh-bundle-card.is-soon{ opacity:.72; }
.sh-bundle-card.is-soon:hover{ transform:none; box-shadow:none; border-color:rgba(26,26,26,.08); }
.sh-bundle-soon-note{
  font-family:'Goshco',serif; font-size:10.5px; letter-spacing:.05em;
  color:rgba(255,255,255,.6); text-align:right; line-height:1.4;
}
.sh-bundle-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sh-bundle-price{ font-family:'Pokinca',sans-serif; font-size:26px; color:var(--sh-yellow); line-height:1; }
.sh-bundle-price s{ display:block; font-family:'Goshco',serif; font-size:11px; color:rgba(255,255,255,.4); margin-top:5px; letter-spacing:.04em; }

/* primary CTA — mirrors the site's .btn-primary: pill, 2.5px border,
   lowercase Goshco, bottom-up wipe fill on hover */
.sh-bundle-add{
  position:relative; overflow:hidden; flex-shrink:0;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:100px;
  border:2.5px solid var(--sh-green); background:var(--sh-green);
  color:var(--sh-yellow);
  font-family:'Goshco',serif; font-size:11.5px; letter-spacing:.12em;
  text-transform:lowercase; white-space:nowrap; cursor:pointer;
  transition:border-color .3s ease;
}
.sh-bundle-add::before{
  content:''; position:absolute; inset:0; background:var(--sh-yellow);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.sh-bundle-add > *{ position:relative; z-index:1; transition:color .3s ease, transform .3s ease; }
.sh-bundle-add .ic{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* inherits currentColor + overrides the SVG's own thin stroke-width attr */
.sh-bundle-add .ic svg{ width:16px; height:16px; stroke-width:1.9; }
/* fills when the card is hovered, like .cat-card's arrow */
.sh-bundle-card:hover .sh-bundle-add{ border-color:var(--sh-yellow); }
.sh-bundle-card:hover .sh-bundle-add::before{ transform:translateY(0); }
.sh-bundle-card:hover .sh-bundle-add > *{ color:var(--sh-dark); }
.sh-bundle-card:hover .sh-bundle-add .ic{ transform:scale(1.1); }

.sh-bundle-add.added,
.sh-bundle-card:hover .sh-bundle-add.added{ background:var(--sh-dark); border-color:var(--sh-dark); }
.sh-bundle-add.added::before,
.sh-bundle-card:hover .sh-bundle-add.added::before{ transform:translateY(100%); }
.sh-bundle-add.added > *,
.sh-bundle-card:hover .sh-bundle-add.added > *{ color:var(--sh-yellow); }
.sh-bundle-add.added .ic{ transform:none; }
.sh-bundle-add.added .ic svg{ stroke-width:2.6; }

@media(hover:none){ .sh-bundle-add::before{ display:none; } }

@media(max-width:900px){
  .sh-bundles{ padding:60px 30px 50px; }
  .sh-bundles-head{ flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:36px; }
  .sh-bundles-head p{ text-align:left; max-width:none; }
}
@media(max-width:640px){
  .sh-bundles{ padding:48px 16px 40px; }
  .sh-bundle-grid{ gap:14px; }
  .sh-bundle-body{ padding:16px 14px; }
  .sh-bundle-name{ font-size:20px; }
  .sh-bundle-tag{ display:none; }
  /* the contents list stays on mobile — it is the reason to buy a combo.
     The ideal-for line is the one that goes; it is flavour text. */
  .sh-bundle-ideal{ display:none; }
  .sh-bundle-inside li{ font-size:11px; }
  .sh-bundle-card{ min-height:400px; }
  .sh-bundle-meta{ flex-direction:column; align-items:stretch; gap:10px; }
  .sh-bundle-price{ font-size:20px; }
  .sh-bundle-price s{ display:inline; margin-left:8px; }
  .sh-bundle-add{ justify-content:center; padding:11px; }
}

/* ══════════════════════════════════════════════════════════════════
   CHECKOUT PAGE (checkout.html)
   ══════════════════════════════════════════════════════════════════ */
.co-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:0 40px; height:70px; background:var(--sh-cream); border-bottom:1px solid rgba(26,26,26,.08); }
.co-nav .nav-back{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--sh-dark); font-family:'Goshco',serif; font-size:14px; transition:color .2s; }
.co-nav .nav-back:hover{ color:var(--sh-green); }
.co-logo{ height:34px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.co-secure{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:rgba(26,26,26,.55); }
.co-secure svg{ width:15px; height:15px; }

.co-wrap{ max-width:1080px; margin:0 auto; padding:40px 40px 90px; display:grid; grid-template-columns:1fr 372px; gap:36px; align-items:start; }
.co-title{ font-family:'Goshco',serif; font-size:34px; color:var(--sh-green); margin-bottom:24px; }

/* steps */
.co-step{ background:#fff; border-radius:18px; box-shadow:0 2px 14px rgba(26,26,26,.05); margin-bottom:16px; overflow:hidden; }
.co-step-head{ display:flex; align-items:center; gap:14px; padding:18px 22px; }
.co-step-num{ width:30px; height:30px; border-radius:50%; background:rgba(26,26,26,.08); color:rgba(26,26,26,.5); font-family:'Goshco',serif; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.co-step-num svg{ width:15px; height:15px; }
.co-step.active .co-step-num, .co-step.done .co-step-num{ background:var(--sh-green); color:#fff; }
.co-step-title{ font-family:'Goshco',serif; font-size:18px; flex:1; color:var(--sh-dark); }
.co-step:not(.active):not(.done) .co-step-title{ color:rgba(26,26,26,.4); }
.co-step-edit{ background:none; border:none; color:var(--sh-green); font-family:'Goshco',serif; font-size:13px; cursor:pointer; }
.co-step-summary{ font-size:13.5px; color:rgba(26,26,26,.6); padding:0 22px 18px 66px; line-height:1.55; }
.co-step-body{ padding:2px 22px 24px; }

/* fields */
.co-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.co-field{ display:flex; flex-direction:column; gap:6px; }
.co-field.full{ grid-column:1 / -1; }
.co-field label{ font-size:12.5px; color:rgba(26,26,26,.6); letter-spacing:.02em; }
.co-field input{ border:1.5px solid rgba(26,26,26,.14); border-radius:12px; padding:12px 14px; font-family:'Goshco',serif; font-size:15px; background:var(--sh-cream); transition:border-color .2s, background .2s; width:100%; }
.co-field input:focus{ outline:none; border-color:var(--sh-green); background:#fff; }
.co-field.err input{ border-color:var(--sh-red); background:rgba(238,41,92,.03); }
.co-field small{ color:var(--sh-red); font-size:11.5px; min-height:13px; }

/* payment options */
.co-pay-opt{ display:flex; align-items:center; gap:14px; border:1.5px solid rgba(26,26,26,.14); border-radius:14px; padding:16px; margin-bottom:12px; cursor:pointer; transition:border-color .2s, background .2s; }
.co-pay-opt.sel{ border-color:var(--sh-green); background:rgba(2,128,93,.05); }
.co-pay-opt.disabled{ opacity:.55; cursor:not-allowed; }
.co-pay-radio{ width:20px; height:20px; border-radius:50%; border:2px solid rgba(26,26,26,.3); flex-shrink:0; position:relative; }
.co-pay-opt.sel .co-pay-radio{ border-color:var(--sh-green); }
.co-pay-opt.sel .co-pay-radio::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--sh-green); }
.co-pay-main{ flex:1; }
.co-pay-name{ font-family:'Goshco',serif; font-size:15px; }
.co-pay-desc{ font-size:12.5px; color:rgba(26,26,26,.55); margin-top:2px; }
.co-pay-tag{ font-size:11px; background:rgba(237,202,0,.28); color:#7a6800; padding:3px 10px; border-radius:100px; font-family:'Goshco',serif; white-space:nowrap; }

/* review */
.co-review-list{ margin-bottom:4px; }
.co-review-row{ display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px solid rgba(26,26,26,.07); color:rgba(26,26,26,.75); }

/* primary button */
.co-btn{ display:block; width:100%; background:var(--sh-green); color:#fff; border:none; border-radius:14px; padding:15px; font-family:'Goshco',serif; font-size:16px; text-align:center; text-decoration:none; cursor:pointer; margin-top:18px; transition:background .2s, transform .15s, box-shadow .2s; }
.co-btn:hover{ background:#026a4d; transform:translateY(-1px); }
.co-btn.place{ box-shadow:0 8px 20px rgba(2,128,93,.28); }
.co-btn.dark{ background:var(--sh-dark); }
.co-btn.dark:hover{ background:#000; }

/* order summary */
.co-summary{ background:#fff; border-radius:18px; box-shadow:0 2px 14px rgba(26,26,26,.05); padding:22px; position:sticky; top:90px; }
.co-summary h3{ font-family:'Goshco',serif; font-size:18px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:baseline; color:var(--sh-dark); }
.co-summary h3 a{ font-size:12.5px; color:var(--sh-green); text-decoration:none; }
.co-sum-items{ margin-bottom:6px; }
.co-sum-item{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.co-sum-thumb{ position:relative; flex-shrink:0; }
.co-sum-thumb img{ width:52px; height:52px; border-radius:10px; object-fit:cover; background:#f0f0e8; }
.co-sum-badge{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:100px; background:var(--sh-dark); color:#fff; font-family:'Goshco',serif; font-size:11px; display:flex; align-items:center; justify-content:center; }
.co-sum-name{ flex:1; font-family:'Goshco',serif; font-size:13.5px; line-height:1.15; }
.co-sum-price{ font-size:13.5px; white-space:nowrap; color:rgba(26,26,26,.75); }
.co-sum-rows{ border-top:1px solid rgba(26,26,26,.1); margin-top:6px; padding-top:14px; }
.co-row{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:8px; color:rgba(26,26,26,.65); }
.co-row.save span:last-child{ color:var(--sh-green); }
.co-row.total{ font-family:'Goshco',serif; font-size:20px; color:var(--sh-dark); margin-top:10px; padding-top:12px; border-top:1px solid rgba(26,26,26,.1); }
.co-sum-save{ margin-top:12px; background:rgba(2,128,93,.1); color:var(--sh-green); font-family:'Goshco',serif; text-align:center; font-size:13px; border-radius:10px; padding:9px; }

/* empty */
.co-empty{ max-width:460px; margin:80px auto; text-align:center; color:rgba(26,26,26,.55); }
.co-empty svg{ width:56px; height:56px; opacity:.2; margin-bottom:16px; }
.co-empty h2{ font-family:'Goshco',serif; font-size:24px; color:var(--sh-dark); margin-bottom:8px; }
.co-empty p{ font-size:14px; margin-bottom:20px; }
.co-empty-btn{ max-width:240px; margin:0 auto; }

/* confirmation */
.co-done{ max-width:560px; margin:56px auto; background:#fff; border-radius:22px; box-shadow:0 4px 24px rgba(26,26,26,.07); padding:48px 40px; text-align:center; }
.co-done-ic{ width:78px; height:78px; border-radius:50%; background:rgba(2,128,93,.12); color:var(--sh-green); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.co-done-ic svg{ width:38px; height:38px; }
.co-done h2{ font-family:'Goshco',serif; font-size:30px; color:var(--sh-green); margin-bottom:12px; }
.co-done p{ font-size:14.5px; color:rgba(26,26,26,.6); line-height:1.6; }
.co-done-sub{ margin-top:14px; }
.co-order-no{ display:inline-block; background:var(--sh-cream); border:1px dashed rgba(26,26,26,.22); border-radius:10px; padding:11px 20px; font-family:'Goshco',serif; font-size:16px; color:var(--sh-dark); margin:18px 0 6px; letter-spacing:.03em; }
.co-done-actions{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.co-done-actions .co-btn{ margin-top:0; }
.co-done-cont{ color:var(--sh-green); text-decoration:none; font-family:'Goshco',serif; font-size:14px; margin-top:4px; }

@media(max-width:900px){
  .co-wrap{ grid-template-columns:1fr; gap:24px; padding:28px 20px 70px; }
  .co-summary{ position:static; order:-1; }
  .co-nav{ padding:0 20px; }
  .co-logo{ height:28px; }
}
@media(max-width:520px){
  .co-fields{ grid-template-columns:1fr; }
  .co-title{ font-size:28px; }
  .co-secure span, .co-secure{ font-size:11px; }
  .co-done{ padding:36px 24px; margin:32px auto; }
}

/* ══ ORDERS PAGE (orders.html) ═══════════════════════════════════════ */
.co-btn.ghost{ background:transparent; color:var(--sh-dark); border:2px solid rgba(26,26,26,.16); }
.co-btn.ghost:hover{ background:transparent; border-color:var(--sh-dark); }

.od-wrap{ max-width:760px; margin:0 auto; padding:40px 24px 90px; }
.od-head-page{ margin-bottom:26px; }
.od-head-page h1{ font-family:'Goshco',serif; font-size:34px; color:var(--sh-dark); }
.od-head-page p{ font-size:13.5px; color:rgba(26,26,26,.5); margin-top:6px; }

.od-card{ background:#fff; border-radius:18px; box-shadow:0 2px 14px rgba(26,26,26,.05); padding:22px; margin-bottom:20px; }
.od-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid rgba(26,26,26,.08); }
.od-id{ font-family:'Goshco',serif; font-size:17px; color:var(--sh-dark); letter-spacing:.03em; }
.od-date{ font-size:12px; color:rgba(26,26,26,.45); margin-top:4px; }
.od-pay{
  flex-shrink:0; white-space:nowrap; border-radius:100px; padding:7px 13px;
  background:rgba(237,202,0,.22); color:#7a6a00;
  font-family:'Goshco',serif; font-size:10.5px; letter-spacing:.06em;
}
.od-pay.paid{ background:rgba(2,128,93,.12); color:var(--sh-green); }

.od-lines{ padding:6px 0; }
.od-line{ display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid rgba(26,26,26,.05); }
.od-line:last-child{ border-bottom:none; }
.od-line-img{ width:52px; height:52px; border-radius:10px; object-fit:cover; background:#f0f0e8; flex-shrink:0; }
.od-noimg{ background:rgba(26,26,26,.06); }
.od-line-main{ flex:1; min-width:0; }
.od-line-name{ font-family:'Goshco',serif; font-size:14px; color:var(--sh-dark); }
.od-line-qty{ font-size:11.5px; color:rgba(26,26,26,.45); margin-top:3px; }
.od-line-total{ font-family:'Goshco',serif; font-size:14px; white-space:nowrap; }

.od-sums{ border-top:1px solid rgba(26,26,26,.08); margin-top:6px; padding-top:14px; }
.od-row{ display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:7px; color:rgba(26,26,26,.62); }
.od-row.save span:last-child{ color:var(--sh-green); }
.od-row.total{ font-family:'Goshco',serif; font-size:19px; color:var(--sh-dark); margin-top:9px; padding-top:11px; border-top:1px solid rgba(26,26,26,.08); }

.od-addr{ margin-top:16px; background:var(--sh-cream); border-radius:12px; padding:13px 14px; font-size:12.5px; line-height:1.65; color:rgba(26,26,26,.62); }
.od-addr b{ font-family:'Goshco',serif; font-weight:normal; color:var(--sh-dark); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

.od-actions{ display:flex; gap:10px; }
.od-actions .co-btn{ margin-top:16px; font-size:14px; padding:13px; }

.od-note{ font-size:11.5px; line-height:1.7; color:rgba(26,26,26,.45); text-align:center; margin-top:26px; }
.od-note a{ color:var(--sh-green); }

.od-empty{ max-width:460px; margin:80px auto; text-align:center; color:rgba(26,26,26,.55); }
.od-empty-ic svg{ width:56px; height:56px; opacity:.2; margin-bottom:16px; color:var(--sh-dark); }
.od-empty h2{ font-family:'Goshco',serif; font-size:24px; color:var(--sh-dark); margin-bottom:8px; }
.od-empty p{ font-size:14px; margin-bottom:20px; }
.od-empty-btn{ max-width:240px; margin:0 auto; }

/* links into the orders page from the drawer */
.sh-empty-alt{ display:inline-block; margin-top:14px; min-height:44px; line-height:44px; font-size:12.5px; color:var(--sh-green); text-decoration:none; }
.sh-empty-alt:hover{ text-decoration:underline; }

/* ══ KEYBOARD FOCUS ══════════════════════════════════════════════════
   There was no visible focus ring on a single shop control — a keyboard
   user tabbing the cart saw nothing move. :focus-visible keeps it off for
   mouse clicks, so this costs the pointer user nothing. */
.sh-drawer a:focus-visible,
.sh-drawer button:focus-visible,
.sh-drawer input:focus-visible,
.sh-modal a:focus-visible,
.sh-modal button:focus-visible,
.sh-modal input:focus-visible,
.sh-fab:focus-visible,
.sh-nav-orders:focus-visible,
.sh-bundle-add:focus-visible,
.od-card a:focus-visible,
.od-card button:focus-visible,
.co-btn:focus-visible,
#co-app input:focus-visible,
#co-app button:focus-visible{
  outline:3px solid var(--sh-green);
  outline-offset:2px;
  border-radius:8px;
}
/* on the green FAB and green buttons, a green ring is invisible — flip it */
.sh-fab:focus-visible,
.sh-checkout:focus-visible,
.sh-offer-apply:focus-visible,
.co-btn:focus-visible{ outline-color:var(--sh-dark); }

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════
   The drawer slides, the progress bar sweeps, cards lift and the toast
   flies in. For a vestibular-disorder user that is not decoration, it is
   a symptom trigger. Honour the OS setting: keep every state change,
   drop the travel. */
@media (prefers-reduced-motion: reduce){
  .sh-drawer, .sh-overlay, .sh-toast, .sh-progress-fill, .sh-fab,
  .sh-bundle-card, .sh-bundle-add, .sh-bundle-add::before,
  .sh-node .dot, .sh-up-add, .co-btn, .sh-modal{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .sh-bundle-card:hover{ transform:none; }
  .sh-fab:hover{ transform:none; }
  .co-btn:hover{ transform:none; }
}

@media(max-width:520px){
  .od-wrap{ padding:28px 16px 70px; }
  .od-head-page h1{ font-size:27px; }
  .od-card{ padding:17px; border-radius:15px; }
  .od-actions{ flex-direction:column; gap:0; }
  .od-actions .co-btn{ margin-top:10px; }
}