/* Catalogue storefronts: configurator, catalog grid and brand tiles, plus
   the product page, category page, account area and shipping fields they
   share.

   Loaded only for the layouts that need it (see partials/head.ejs), so the
   five AI-subscription sites download not one byte of this.

   Everything here is built on the same custom properties base.css defines,
   so a new theme restyles all three layouts without touching this file. */

/* ===========================================================================
   Shared scaffolding
   ======================================================================== */

.shop-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
}

.shop-wrap--narrow { max-width: 920px; }

.shop-section { margin-top: 2.5rem; }

.shop-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.shop-section-head h2 { margin: 0; font-size: 1.3rem; }
.shop-section-head a { font-size: 0.9rem; text-decoration: none; }
.shop-section-head a:hover { text-decoration: underline; }

/* A trust row sits directly under the hero on every catalogue storefront.
   It is the row that makes a shop nobody has heard of worth reading past:
   three concrete, checkable claims rather than a carousel. */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  padding: 0.85rem 1.5rem;
  margin: 0 0 2rem;
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
  font-size: 0.92rem;
}
.trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
}
.trust-bar svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: 0.85; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 1.1rem 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs span[aria-hidden] { opacity: 0.5; }

.section-label {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.stock-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--success);
  flex: none;
}
.stock-dot--low { background: #d97706; }
.stock-dot--out { background: var(--text-muted); }

/* ===========================================================================
   Product cards — shared by the catalog grid, the tile grid and the
   "related" rows on a product page.
   ======================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
}
.product-grid--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.product-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.product-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.85rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}
.product-media img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
/* No photography yet for most of the catalogue, so a card falls back to the
   product's initials rather than to a broken-image frame. */
.product-media-fallback {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.55;
}

.product-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  line-height: 1.35;
}
.product-card .product-sub {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.product-price { font-size: 1.15rem; font-weight: 700; }
.product-price small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--text-muted); }

/* The comparison line is techwithcrypto's entire conversion argument: a
   buyer at this ticket size has the retailer's own price open in another
   tab, so we print it ourselves rather than hoping they do not look. */
.retail-compare {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.retail-compare s { opacity: 0.75; }

/* ===========================================================================
   LAYOUT: catalog — techwithcrypto.com
   A dense filterable grid with a left rail. Retail catalogues are navigated
   by narrowing, not by scrolling, which is why the rail is permanent on
   desktop and a drawer on a phone.
   ======================================================================== */

.catalog-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-top: 1.5rem;
}

.filter-rail {
  position: sticky;
  top: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}
.filter-group + .filter-group { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.filter-group h3 {
  margin: 0 0 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.22rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.filter-option input { accent-color: var(--accent); flex: none; }
.filter-option .filter-count { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); }

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.catalog-search {
  flex: 1 1 240px;
  min-width: 0;
}
.catalog-search input,
.shop-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.catalog-search input:focus-visible,
.shop-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.catalog-count { font-size: 0.86rem; color: var(--text-muted); margin-left: auto; }

.filter-drawer-toggle { display: none; }

.catalog-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* ===========================================================================
   LAYOUT: tiles — buygiftswithcrypto.com
   Brand tiles, denomination pills, three taps to checkout. Deliberately
   bigger targets than anywhere else here: this niche is phone traffic.
   ======================================================================== */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
}

.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  aspect-ratio: 1 / 1;
  padding: 1rem 0.75rem;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.brand-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.brand-tile img { width: 56px; height: 56px; object-fit: contain; }
.brand-tile-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--accent);
}
.brand-tile strong { font-size: 0.93rem; line-height: 1.25; }
.brand-tile small { font-size: 0.76rem; color: var(--text-muted); }

/* The live delivery stat on the gifts homepage. Computed from real orders,
   never a hardcoded number — an invented "42 seconds" is the kind of claim
   that is checkable the first time somebody times it. */
.delivery-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  margin: 1.5rem 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.delivery-stat strong { font-size: 1.2rem; }

.denom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.9rem 0;
}
.denom-pill {
  padding: 0.6rem 1rem;
  min-width: 4.5rem;
  font: inherit;
  text-align: center;
  color: var(--text);
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.denom-pill:hover { border-color: var(--accent); }
.denom-pill.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}
.denom-pill[disabled] { opacity: 0.4; cursor: not-allowed; }
.denom-pill small { display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.8; }

/* Custom amount — the Bitrefill move, and the reason most brands here have
   no fixed denominations at all. */
.custom-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.custom-amount label { flex: 1 1 160px; }
.custom-amount .amount-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.custom-amount .amount-field span { color: var(--text-muted); font-weight: 600; }
.custom-amount input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.custom-amount input:focus-visible { outline: none; }
.custom-amount .amount-note { flex-basis: 100%; margin: 0; font-size: 0.8rem; color: var(--text-muted); }

/* ===========================================================================
   LAYOUT: configurator — serverswithcrypto.com
   The configurator IS the product. A step rail on the left, a sticky price
   readout on the right that updates on every choice, and a review line that
   spells out exactly what is about to be bought.
   ======================================================================== */

.cfg-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding-top: 1.5rem;
}

.cfg-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.cfg-steps { counter-reset: cfgstep; }
.cfg-step { border: 0; padding: 0; margin: 0 0 1.6rem; }
.cfg-step:last-of-type { margin-bottom: 0; }
.cfg-step > legend {
  counter-increment: cfgstep;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  margin-bottom: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.cfg-step > legend::before {
  content: counter(cfgstep);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.78rem;
  letter-spacing: 0;
  flex: none;
}

.cfg-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}
.cfg-options--tight { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

.cfg-opt {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cfg-opt:hover { border-color: var(--accent); }
.cfg-opt.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
}
.cfg-opt strong { font-size: 0.93rem; font-weight: 650; }
.cfg-opt small { font-size: 0.76rem; color: var(--text-muted); }
.cfg-opt[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The sticky readout. A configurator whose price is below the fold is a
   configurator nobody trusts. */
.cfg-summary { position: sticky; top: 1rem; }

.cfg-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.cfg-price strong { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cfg-price span { font-size: 0.82rem; color: var(--text-muted); }

.cfg-readout { margin: 0 0 1.1rem; font-size: 0.88rem; }
.cfg-readout div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px dotted var(--border);
}
.cfg-readout div:last-child { border-bottom: 0; }
.cfg-readout dt, .cfg-readout span:first-child { color: var(--text-muted); }
.cfg-readout dd, .cfg-readout strong { margin: 0; font-weight: 600; text-align: right; }

.cfg-saving {
  margin: 0 0 1rem;
  padding: 0.5rem 0.7rem;
  background: color-mix(in srgb, var(--success) 12%, var(--card-bg));
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  color: var(--success);
  font-weight: 600;
}

/* ===========================================================================
   Spec tables — servers and hardware both live or die on these.
   ======================================================================== */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
}
.spec-table th,
.spec-table td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec-table th {
  width: 40%;
  font-weight: 500;
  color: var(--text-muted);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* ===========================================================================
   Product page
   ======================================================================== */

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
  gap: 2.25rem;
  align-items: start;
  padding-top: 1.25rem;
}

.product-hero h1 { margin: 0.4rem 0 0.5rem; font-size: 1.85rem; }
.product-lede { margin: 0 0 1.25rem; font-size: 1.04rem; color: var(--text-muted); }

.product-gallery {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.product-gallery img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }

.product-body { line-height: 1.7; }
.product-body h2 { margin: 1.75rem 0 0.6rem; font-size: 1.2rem; }
.product-body ul { padding-left: 1.2rem; }
.product-body li { margin-bottom: 0.35rem; }

.buy-panel {
  position: sticky;
  top: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
}
.buy-panel-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.buy-panel-price strong { font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.buy-panel-price span { font-size: 0.85rem; color: var(--text-muted); }

.price-compare-line {
  margin: 0 0 1rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.variant-list { display: grid; gap: 0.5rem; margin: 1rem 0; }
.variant-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.92rem;
}
.variant-opt:hover { border-color: var(--accent); }
.variant-opt.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card-bg)); }
.variant-opt input { accent-color: var(--accent); flex: none; }
.variant-opt .variant-price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.variant-opt small { display: block; color: var(--text-muted); font-size: 0.78rem; }
.variant-opt--out { opacity: 0.5; cursor: not-allowed; }

.buy-panel .buy-btn { width: 100%; justify-content: center; margin-top: 0.4rem; }

.buy-panel-notes {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.buy-panel-notes li { margin-bottom: 0.4rem; list-style: none; padding-left: 1.1rem; position: relative; }
.buy-panel-notes li::before {
  content: var(--bullet);
  position: absolute;
  left: 0;
  color: var(--accent);
}
.buy-panel-notes ul { margin: 0; padding: 0; }

/* ===========================================================================
   Shipping fields at checkout.
   One fieldset inside the existing checkout form, not a second page: this
   funnel already loses 94.9% of its carts and an extra step is an extra
   place to lose one.
   ======================================================================== */

.address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.address-grid label { display: block; font-size: 0.85rem; }
.address-grid label span { display: block; margin-bottom: 0.25rem; color: var(--text-muted); }
.address-grid .span-2 { grid-column: 1 / -1; }
.address-grid input,
.address-grid select { width: 100%; }

.saved-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.9rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
}
.saved-address button {
  margin-left: auto;
  font: inherit;
  font-size: 0.82rem;
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

/* ===========================================================================
   Accounts
   ======================================================================== */

.auth-card {
  max-width: 420px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.auth-card h1 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.auth-card .auth-lede { margin: 0 0 1.5rem; color: var(--text-muted); font-size: 0.93rem; }
.auth-card label { display: block; margin-bottom: 1rem; font-size: 0.88rem; }
.auth-card label span { display: block; margin-bottom: 0.3rem; color: var(--text-muted); }
.auth-card .buy-btn { width: 100%; justify-content: center; }
.auth-alt { margin: 1.25rem 0 0; text-align: center; font-size: 0.88rem; color: var(--text-muted); }

.form-error {
  padding: 0.65rem 0.85rem;
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, #dc2626 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, #dc2626 35%, var(--border));
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.form-notice {
  padding: 0.65rem 0.85rem;
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--success) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.account-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-top: 1.5rem;
}
.account-nav {
  display: grid;
  gap: 0.15rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.6rem;
}
.account-nav a {
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}
.account-nav a:hover { background: var(--bg-alt); }
.account-nav a.is-active { background: var(--accent); color: var(--accent-text); }

.order-table { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
.order-table th, .order-table td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.order-table th { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.order-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.order-table a { text-decoration: none; }
.order-table a:hover { text-decoration: underline; }

.status-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--bg-alt);
  color: var(--text-muted);
  white-space: nowrap;
}
.status-tag--success { background: color-mix(in srgb, var(--success) 18%, var(--card-bg)); color: var(--success); }
.status-tag--waiting { background: color-mix(in srgb, #d97706 18%, var(--card-bg)); color: #b45309; }

.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* The delivered gift-card code on the order page. Monospace, selectable,
   and big — somebody is reading this off a phone to type into Steam. */
.code-reveal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--bg-alt);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
}
.code-reveal code {
  flex: 1 1 200px;
  font-family: var(--font-num);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-all;
  user-select: all;
}

/* ===========================================================================
   Responsive. Each shell collapses to one column and its sticky panel stops
   being sticky, since a sticky panel on a phone eats the viewport.
   ======================================================================== */

@media (max-width: 960px) {
  .catalog-shell,
  .cfg-shell,
  .product-page,
  .account-shell { grid-template-columns: minmax(0, 1fr); }

  .cfg-summary,
  .buy-panel,
  .filter-rail { position: static; }

  .filter-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    font: inherit;
    font-size: 0.88rem;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .filter-rail[hidden] { display: none; }

  .account-nav { display: flex; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .shop-wrap { padding-inline: 1rem; }
  .product-hero h1 { font-size: 1.5rem; }
  .cfg-panel, .buy-panel, .auth-card { padding: 1.1rem; }
  .address-grid { grid-template-columns: minmax(0, 1fr); }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .trust-bar { gap: 0.4rem 1.1rem; font-size: 0.84rem; }
  .cfg-price strong { font-size: 1.7rem; }
}