/* ============================================================
   RANKED BEDWARS Store page. Toolbar + category sidebar +
   product grid + the Ranks compare table + slide-in cart drawer.
   The store has no top bar of its own any more: the shared left
   sidenav is the navigation, so search and cart live in the page.
   Frost/ice theme, tokens only.
   ============================================================ */

/* ---------- page shell ---------- */
/* The .bg-layer ambient divs are fixed and positioned, so plain in-flow text
   paints behind them unless the page wrapper is lifted into the same layer. */
.store-page { position: relative; z-index: 1; padding-top: clamp(26px, 3.4vw, 44px); }

/* The background behind the store is a photo now, not a flat gradient, so the
   near-transparent frost used elsewhere would leave copy sitting on top of tree
   lines and hotbars. These two locals are the theme's own ink held at an opacity
   that reads over anything; every panel below fills from them. */
.store-page, .cart-drawer {
  --glass:   color-mix(in srgb, var(--bg-1) 72%, transparent);
  --glass-2: color-mix(in srgb, var(--bg-2) 84%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .store-page, .cart-drawer { --glass: var(--bg-1); --glass-2: var(--bg-2); }
}

/* visually hidden, still read out (compare-table marks, button context) */
.store-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- hero (compact: the sidenav carries the navigation) ---------- */
.store-hero { max-width: 720px; margin: 0 auto clamp(20px, 2.8vw, 30px); text-align: center; }
.store-hero .eyebrow { justify-content: center; }
.store-title { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.05; margin-top: 11px; }
.store-sub { margin-top: 12px; color: var(--text-dim); font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.6; }

/* ---------- toolbar: search + cart ----------
   The old fixed 480px search wrap never shrank and pushed 692px of the page off
   to the side on a phone. Everything here is fluid: a max, never a floor. The
   input needs min-width:0 of its own, because a form control's intrinsic width
   is its default min-width as a flex item and it would refuse to give ground. */
.store-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.store-search-wrap {
  position: relative; display: flex; align-items: center;
  flex: 1 1 240px; width: 100%; max-width: 480px; min-width: 0;
}
.store-search-ic { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--text-mute); pointer-events: none; }
.store-search {
  width: 100%; min-width: 0;
  padding: 11px 38px 11px 40px;
  border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--hairline);
  color: var(--text); font-size: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.store-search::placeholder { color: var(--text-faint); }
.store-search:focus { outline: none; border-color: rgba(180,204,228,.5); background: var(--bg-2); box-shadow: 0 0 0 3px rgba(180,204,228,.12); }
.store-search-clear {
  position: absolute; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: var(--surface-2); color: var(--text-dim); font-size: 15px; line-height: 1;
}
.store-search-clear:hover { background: var(--surface-3); color: var(--text); }
/* store.js toggles this with the `hidden` property, but the `display: grid` above
   outranks the UA sheet's [hidden] { display: none }, so the button sat there on
   an empty search box. Any element toggled via `hidden` needs this opt-out. */
.store-search-clear[hidden] { display: none; }

.store-cart-btn {
  position: relative; margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px 10px 15px; border-radius: var(--r-pill);
  background: var(--accent-grad); color: #0a1320; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 6px 20px -8px rgba(150,180,220,.7);
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t);
}
.store-cart-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(150,180,220,.9); }
.store-cart-btn svg { width: 17px; height: 17px; }
.store-cart-count {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center;
  background: #0a1320; color: var(--ice-100); font-size: 11px; font-weight: 800;
}
/* Same trap as the search clear: store.js hides this via the `hidden` property,
   but the `display` above beats the UA sheet, so an empty cart still read "0". */
.store-cart-count[hidden] { display: none; }

/* ---------- layout: sidebar + main ---------- */
/* How far below the top of the viewport the sticky sidebar parks. store.js reads
   this for its scroll target, and .store-main reserves height against it: the two
   MUST agree or the document ends up too short to hold the scroll. There is no
   top bar on the desktop shell, so this is just breathing room; under 1024px the
   shell puts a fixed 60px bar back and the sidebar has to clear it. */
:root { --store-offset: 26px; }
@media (max-width: 1023.98px) { :root { --store-offset: 76px; } }

.store-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.store-sidebar { position: sticky; top: var(--store-offset); display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.store-side-card {
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px;
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.store-side-h {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin: 2px 4px 12px;
}

.store-nav { display: flex; flex-direction: column; gap: 3px; }
.store-navi {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
  background: none; border: 1px solid transparent; cursor: pointer; text-align: left;
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.store-navi:hover { background: var(--surface-2); color: var(--text); }
.store-navi.is-active { background: var(--accent-grad-soft); color: var(--text); border-color: rgba(180,204,228,.3); }
.store-navi-ic { display: grid; place-items: center; width: 20px; height: 20px; color: var(--text-mute); flex: 0 0 auto; }
.store-navi-ic svg { width: 18px; height: 18px; }
.store-navi.is-active .store-navi-ic { color: var(--accent); }
.store-navi-name { flex: 1 1 auto; min-width: 0; }
.store-navi-count {
  flex: 0 0 auto; min-width: 22px; text-align: center;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-mute);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.store-navi.is-active .store-navi-count { background: rgba(180,204,228,.18); color: var(--ice-100); }

/* payment-methods panel */
.store-accept-line { font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.store-pays { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.store-pay {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text-dim); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.store-pay--crypto { color: var(--ice-100); }
.store-pay--crypto svg { width: 13px; height: 13px; color: var(--accent); }
.store-accept-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: var(--text-mute); }
.store-accept-note svg { width: 14px; height: 14px; color: var(--safe); }

/* ---------- main column ---------- */
/* Reserve a full viewport below the layout's top edge. A category with few products
   shrinks the grid, which shrinks the document; if the document can no longer reach
   --store-offset the browser clamps scrollY on the same frame and the sticky sidebar
   teleports. Holding >= 100vh - --store-offset here makes that target always reachable
   for every category, so the scroll position (and the sidebar) never moves. */
.store-main { min-width: 0; min-height: calc(100vh - var(--store-offset)); }
.store-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.store-h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.store-blurb { margin-top: 4px; color: var(--text-mute); font-size: 13.5px; }
.store-resultcount { flex: 0 0 auto; color: var(--text-faint); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 18px; }
.store-grid.in { animation: storeGridIn .24s var(--e-out); }
@keyframes storeGridIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- product card ---------- */
.pcard {
  display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: var(--r-md); overflow: hidden;
  backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%);
  transition: transform var(--t) var(--e-out), border-color var(--t), box-shadow var(--t), background var(--t);
}
.pcard:hover { transform: translateY(-3px); border-color: var(--hairline-strong); box-shadow: var(--shadow-md); background: var(--glass-2); }

/* Fixed-height media box, art centred inside it. An aspect-ratio box with a
   percentage height does not resolve here, and square art overflowed and clipped. */
.pcard-media { position: relative; height: 176px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-2); }
.pcard-media img { height: 132px; width: auto; max-width: 86%; object-fit: contain; }
.pcard-media--icon { background: radial-gradient(120% 120% at 50% 10%, color-mix(in srgb, var(--pc, var(--accent)) 16%, var(--bg-2)), var(--bg-2) 72%); }
.pcard-ic { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: color-mix(in srgb, var(--pc, var(--accent)) 14%, transparent); color: var(--pc, var(--accent)); }
.pcard-ic svg { width: 30px; height: 30px; }
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .pcard-media--icon { background: var(--bg-2); }
  .pcard-ic { background: var(--surface-2); color: var(--accent); }
}

/* per-category accent (soft, keeps the frosty look) */
.pcat-ranks        { --pc: #E6C34A; }
.pcat-custom-roles { --pc: #B49AE6; }
.pcat-pugs         { --pc: #77CDD6; }
.pcat-stats-reset  { --pc: #7FCBA0; }
.pcat-unbans       { --pc: #E68A6B; }
.pcat-unmutes      { --pc: #8AA9E6; }

.pcard-body { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 16px; flex: 1 1 auto; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.pcard-badge {
  flex: 0 0 auto; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(180,204,228,.14); color: var(--ice-200);
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.pcard-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
/* No clamp: cards grow so the full description always shows. */
.pcard-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-mute); }
.pcard-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-price { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.pcard-per { font-size: 11.5px; font-weight: 600; color: var(--text-mute); margin-left: 1px; }
.pcard-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--hairline-strong); color: var(--text);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast) var(--e-spring);
}
.pcard-add svg { width: 15px; height: 15px; }
.pcard-add:hover { background: var(--accent-grad); border-color: transparent; color: #0a1320; }
.pcard-add:active { transform: scale(.95); }
.pcard-add.is-added { background: rgba(87,217,163,.16); border-color: rgba(87,217,163,.4); color: var(--safe); }

/* ============================================================
   RANKS: tier columns + feature compare table
   The whole thing is ONE table and the tier cards are its header
   cells, which is what keeps every column locked to its rank with
   nothing measured in JS. Narrow screens scroll this panel, never
   the page: .ranks-scroll owns the overflow.
   ============================================================ */
.store-grid.is-ranks { display: block; }

.ranks-wrap { position: relative; }
/* Only shown when the panel really does overflow. store.js measures it, because
   the width that matters is the main column's, and that depends on the shell's
   sidenav as well as the viewport, so no media query can call it correctly. */
.ranks-hint { display: none; margin: 0 0 10px; font-size: 12.5px; color: var(--text-mute); }
.ranks-wrap.is-scrollable .ranks-hint { display: block; }

.ranks-scroll {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--shadow-md);
}
.ranks-scroll:focus-visible { outline: 2px solid rgba(180,204,228,.55); outline-offset: 3px; }

/* fixed layout: the header row sets the columns, the rest inherit them */
.ranks-table {
  width: 100%; min-width: 580px;
  border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
}
/* Padding and alignment live on the cell classes below. A blanket
   `.ranks-table th, .ranks-table td` reset here would beat every one of them on
   specificity (0,1,1 against 0,1,0) and quietly flatten the whole table. */

/* --- tier card (a <th> in the header row) --- */
.rtier {
  position: relative; vertical-align: bottom; text-align: center;
  padding: 52px 14px 22px;
  background: var(--surface);
  border-left: 1px solid var(--hairline);
}
.rtier--best { background: var(--accent-grad-soft); }
.rtier-flag {
  position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--accent-grad); color: #0a1320;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
/* Same fixed-height media box as the product cards. */
.rtier-media { display: flex; align-items: center; justify-content: center; height: 108px; }
.rtier-media img { height: 94px; width: auto; max-width: 86%; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(120,160,215,.35)); }
.rtier-name { display: block; margin-top: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
/* Reserve two lines. These three cards are cells of one table row, so a card whose
   line wraps one step further than its neighbours pushes its own art and name out
   of line with theirs; holding the box makes them agree. */
.rtier-line { display: block; margin: 7px auto 0; min-height: 2.9em; max-width: 210px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--text-mute); }
.rtier-price { display: block; margin-top: 14px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.rtier-per { font-size: 12px; font-weight: 600; color: var(--text-mute); margin-left: 2px; }
.rtier-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; max-width: 186px; margin-top: 14px;
  padding: 10px 16px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--hairline-strong); color: var(--text);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast) var(--e-spring);
}
.rtier-buy svg { width: 15px; height: 15px; flex: 0 0 auto; }
.rtier-buy:hover { background: var(--accent-grad); border-color: transparent; color: #0a1320; }
.rtier-buy:active { transform: scale(.96); }
.rtier-buy.is-added { background: rgba(87,217,163,.16); border-color: rgba(87,217,163,.4); color: var(--safe); }
.rtier--best .rtier-buy { background: var(--accent-grad); border-color: transparent; color: #0a1320; box-shadow: 0 6px 20px -8px rgba(150,180,220,.75); }
.rtier--best .rtier-buy:hover { box-shadow: 0 10px 28px -8px rgba(150,180,220,.95); }
.rtier--best .rtier-buy.is-added { background: rgba(87,217,163,.16); color: var(--safe); box-shadow: none; }

/* --- feature rows --- */
/* The corner cell is the only one carrying a width, and with table-layout: fixed
   that one number sets the whole grid: the three rank columns split the rest. */
.rc-corner { width: 28%; vertical-align: bottom; text-align: left; padding: 0 18px 20px; background: none; border: 0; }
.rc-corner-h { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.rc-corner-s { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--text-mute); }
.rc-feat {
  position: relative;
  vertical-align: middle; text-align: left; padding: 13px 18px;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text-dim);
  border-top: 1px solid var(--hairline);
}
.rc-feat-name { border-bottom: 1px dotted rgba(164,180,200,.4); cursor: help; }
/* Perk description box on hover */
.rc-tip {
  display: none; position: absolute; left: 14px; bottom: calc(100% - 4px); z-index: 30;
  width: 280px; max-width: 70vw; padding: 10px 12px;
  border: 1px solid var(--hairline-strong); border-radius: 10px;
  background: #10141f; box-shadow: 0 12px 30px -8px rgba(0,0,0,.6);
  font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--text);
  white-space: normal; pointer-events: none;
}
.rc-feat:hover .rc-tip { display: block; }
.rc-cell {
  vertical-align: middle; text-align: center; padding: 13px 12px; color: var(--text);
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
}
/* The top tier keeps a faint column all the way down so the eye can follow it.
   Neutral on purpose: the accent belongs to the badge and the card, not here. */
.rc-best { background: var(--surface); }
.ranks-table tbody tr:hover > * { background: var(--surface-2); }
.ranks-table tbody tr:hover > .rc-best { background: var(--surface-3); }

.rc-val { display: inline-block; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.rc-yes, .rc-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.rc-yes { background: rgba(87,217,163,.14); color: var(--safe); }
.rc-no { color: var(--text-faint); }
.rc-ic { width: 15px; height: 15px; }
.rc-no .rc-ic { width: 17px; height: 17px; }

/* --- repeat buy row, same as the reference --- */
.rc-buyrow .rc-feat { font-weight: 700; color: var(--text); }
.rc-buyrow .rc-cell { padding: 16px 12px 18px; }
.rtier-buy--sm { max-width: 150px; margin-top: 0; padding: 9px 14px; font-size: 12.5px; }

.ranks-note { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--text-mute); }

/* ---------- empty state ---------- */
.store-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-mute); }
.store-empty svg { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--text-faint); }
.store-empty-h { font-size: 17px; font-weight: 700; color: var(--text); }
.store-empty-s { margin: 6px 0 18px; font-size: 13.5px; }

/* ---------- cart drawer ---------- */
/* Motion: the drawer is NEVER display:none. `display` is not animatable, so the old
   none -> block flip gave the transitions no before-change style to start from (the
   panel had no box at all, so even translateX(100%) could not resolve) and BOTH the
   open and the close popped in one frame. So the closed state is painted instead
   (opacity + transform), and `visibility` is what really hides it, flipped on a
   delay so the panel survives long enough to animate out. `pointer-events` drops the
   instant it closes, so this full-viewport overlay never swallows a click, and the
   `visibility: hidden` that lands afterwards also takes it out of the tab order. */
html.drawer-lock { overflow: hidden; }

.cart-drawer {
  --drawer-in:   var(--t-slow);   /* panel glides in: long, with a soft settle */
  --drawer-out:  var(--t);        /* panel leaves: snappier, gets out of the way */
  --drawer-fade: var(--t);        /* backdrop + panel opacity, both directions */

  position: fixed; inset: 0; z-index: 2000;
  visibility: hidden;
  pointer-events: none;           /* inherited by both children */
  /* Hold `visible` for the whole exit, then flip in one step at the end. Duration is
     0s: only the delay matters, and it MUST stay >= the longest exit transition. */
  transition: visibility 0s linear var(--drawer-out);
}
.cart-drawer.open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;           /* ...but on the way in, show immediately */
}

.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(4,6,11,.66);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity var(--drawer-fade) var(--e-in-out);
}
.cart-drawer.open .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(410px, 92vw);
  display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-lg);
  /* Closed is the state we transition TO on close, so it carries the exit timing. */
  transform: translate3d(100%, 0, 0); opacity: 0;
  transition: transform var(--drawer-out) var(--e-in-out), opacity var(--drawer-fade) var(--e-in-out);
}
.cart-drawer.open .drawer-panel {
  transform: translate3d(0, 0, 0); opacity: 1;
  transition: transform var(--drawer-in) var(--e-out), opacity var(--drawer-fade) var(--e-out);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.drawer-title { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--text); }
.drawer-title svg { width: 19px; height: 19px; color: var(--accent); }
.drawer-x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline); color: var(--text-dim); cursor: pointer; transition: background var(--t), color var(--t), transform var(--t); }
.drawer-x:hover { background: var(--surface-2); color: var(--text); transform: rotate(90deg); }
.drawer-x svg { width: 17px; height: 17px; }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; }

.dl-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dl { display: flex; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); }
.dl-media { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--bg-2); }
.dl-media img { width: 100%; height: 100%; object-fit: cover; }
.dl-media--icon { background: color-mix(in srgb, var(--pc, var(--accent)) 14%, var(--bg-2)); }
.dl-ic { display: grid; place-items: center; color: var(--pc, var(--accent)); }
.dl-ic svg { width: 24px; height: 24px; }
.dl-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dl-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.dl-meta { font-size: 11.5px; color: var(--text-mute); }
.dl-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; }
.dl-step { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; transition: background var(--t), color var(--t); }
.dl-step:hover { background: var(--surface-3); color: var(--text); }
.dl-q { min-width: 26px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dl-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.dl-x { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: none; border: none; color: var(--text-faint); cursor: pointer; transition: color var(--t), background var(--t); }
.dl-x:hover { color: var(--danger); background: rgba(255,107,122,.1); }
.dl-x svg { width: 15px; height: 15px; }
.dl-total { font-size: 14px; font-weight: 800; color: var(--text); }

.drawer-empty { text-align: center; padding: 60px 20px; color: var(--text-mute); }
.drawer-empty svg { width: 42px; height: 42px; margin: 0 auto 14px; color: var(--text-faint); }
.drawer-empty p { font-size: 15px; font-weight: 700; color: var(--text-dim); }
.drawer-empty span { display: block; margin-top: 5px; font-size: 12.5px; }

.drawer-foot { flex: 0 0 auto; padding: 16px 18px 18px; border-top: 1px solid var(--hairline); background: var(--bg-1); }
.drawer-sub-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 13px; }
.drawer-sub-row span:first-child { color: var(--text-dim); font-size: 14px; }
.drawer-sub-row span:last-child { font-size: 20px; font-weight: 800; color: var(--text); }
.drawer-checkout svg { width: 17px; height: 17px; }
.drawer-continue { display: block; width: 100%; margin-top: 10px; padding: 8px; background: none; border: none; color: var(--text-mute); font-size: 13px; font-weight: 600; cursor: pointer; transition: color var(--t); }
.drawer-continue:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .store-layout { grid-template-columns: 212px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 780px) {
  /* Around here the compare table has hit its 580px floor, so the tier cards are
     working with roughly 145px of column each and need to give up some size. */
  .rtier { padding: 40px 10px 18px; }
  .rtier-media { height: 84px; }
  .rtier-media img { height: 72px; }
  .rtier-name { font-size: 16.5px; }
  .rtier-line { font-size: 12px; }
  .rtier-price { font-size: 20px; margin-top: 11px; }
  /* Scoped to the header card: an unscoped .rtier-buy sits later in the file than
     .rtier-buy--sm at the same specificity and would put a margin back on the
     repeat buy row, which is already centred in its own cell. */
  .rtier .rtier-buy { margin-top: 11px; padding: 9px 12px; font-size: 12.5px; }
  .rc-feat { padding: 11px 14px; font-size: 12.5px; }
  .rc-cell { padding: 11px 8px; }
  .rc-corner { padding: 0 14px 16px; }
  .rc-corner-h { font-size: 14px; }
  .rc-corner-s { font-size: 12px; }
}
/* The shell's own 250px sidenav is already on screen, so a second 244px column
   inside the page starves the products long before the viewport gets small. The
   categories become a pill row here instead, which hands the whole container to
   the grid and keeps the compare table off its horizontal scroll down to ~620px. */
@media (max-width: 1180px) {
  .store-layout { grid-template-columns: 1fr; gap: 18px; }
  .store-sidebar { position: static; flex-direction: column; }
  /* categories become a horizontal scroller */
  .store-side-card.store-cats { padding: 10px; }
  .store-nav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .store-nav::-webkit-scrollbar { display: none; }
  .store-navi { width: auto; flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--hairline); border-radius: var(--r-pill); }
  .store-navi.is-active { border-color: rgba(180,204,228,.4); }
  .store-side-h { display: none; }
  /* The accept card is full width here, so it reads better as one trust bar than
     as a tall panel with a lot of empty space to its right. */
  .store-accept { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 14px; }
  .store-accept-note { margin-top: 0; }
}
@media (max-width: 620px) {
  .store-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .store-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .store-accept { display: none; }   /* payment methods are shown again at checkout */
}
@media (max-width: 420px) {
  .store-cart-label { display: none; }        /* icon-only cart, keeps the row on one line */
  .store-cart-btn { padding: 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No travel: both states resolve to the same transform, so the transform transition
     has nothing to interpolate. site.css already clamps every transition-duration to
     .001s in here, so the fade is an instant cut, which means the exit delay has to
     go too. It is a delay, not a duration, so that clamp does not touch it, and the
     drawer would otherwise sit `visibility: visible` for a further 280ms after it had
     already vanished. */
  .cart-drawer { --drawer-out: 0s; }
  .drawer-panel,
  .cart-drawer.open .drawer-panel { transform: none; }
}