/* ===========================================================================
   Skyrmex design tokens.

   One accent, not three. The palette used to run slate (#2d3748), amber
   (#f59e0b) and pink (#ec4899) side by side, which read as busy rather than
   curated. Everything now hangs off a single antique gold against warm,
   paper-like neutrals — the warmth is what separates "admin dashboard" from
   "boutique", and every surface, border and shadow below is tinted to match.
   =========================================================================== */
:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-2: #f2f0ec;
  --border: #e8e5e0;
  --text: #14161a;
  --muted: #77726b;
  /* Brand is the same near-black as the text, so the header, footer and dark
     buttons all read as one ink rather than three shades of slate. */
  --brand: #14161a;
  --brand-2: #0d0f12;
  --accent: #b08d3f;
  --accent-dark: #8f7031;
  --danger: #dc2626;
  --success: #16a34a;
  --info: #2563eb;
  --radius: 14px;
  --radius-s: 9px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .06);
  --shadow-lg: 0 16px 40px rgba(20, 22, 26, .13);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Headings only. Body copy, buttons, forms and tables deliberately stay on
     Inter: a display serif earns its keep at 22px and up and turns to mush in
     a 13px label. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5rem; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

.app { min-height: calc(100vh - 200px); padding: 0 0 48px; }

/* ---------- header ---------- */
.topbar { background: var(--brand-2); color: #d6d1c9; text-align: center; font-size: 12.5px; letter-spacing: .05em; padding: 8px 16px; }
/* renderAnnounce() writes '' when there are no active announcements, which left
   a bare 16px strip of dark paint across the top of every page. */
.topbar:empty { display: none; }
/* Visually hidden but read aloud: the page-level heading on screens whose design
   leads with an image rather than with text (home, shop, category banners). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Frosted rather than opaque: the bar is sticky, so as content scrolls under it
   the blur is what makes it read as a floating layer instead of a strip of
   paint with text crawling behind it. The border replaces the old drop shadow,
   which the translucency would have made look muddy. */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(20, 22, 26, .08); }
.header-inner { max-width: 1240px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--brand); display: flex; align-items: center; gap: 8px; }
.brand .dot { color: var(--accent); }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a { padding: 8px 12px; border-radius: var(--radius-s); color: var(--text); font-weight: 500; font-size: 14px; }
.nav a:hover, .nav a.active { background: var(--surface-2); text-decoration: none; color: var(--text); }
/* Header "Sell on Skyrmex" entry (guest + customer nav): a filled pill so it
   reads as the page's action, not another section link. */
.nav a.nav-sell { background: var(--brand); color: #fff; font-weight: 600; }
.nav a.nav-sell:hover, .nav a.nav-sell.active { background: var(--brand-2); color: #fff; }
.header-actions { display: flex; align-items: center; gap: 10px; }
/* The nav panel toggle only exists below the mobile breakpoint; on desktop the
   links are always visible, so the button would be a control for nothing.
   Specificity matters here: .hdr-burger alone (0,1,0) is declared BEFORE
   .icon-btn (also 0,1,0) and was therefore losing the cascade — the burger was
   rendered on desktop at every width, and clicking it flipped aria-expanded to
   true with no visible change at all. Two classes outrank the one below. */
.icon-btn.hdr-burger { display: none; }
.icon-btn { position: relative; background: var(--surface-2); border: none; border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; }
.icon-btn .badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-weight: 700; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 9px 16px; border-radius: var(--radius-s); font-weight: 600; font-size: 14px; transition: .15s; }
.btn:hover { text-decoration: none; box-shadow: var(--shadow); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #111827; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #111827; }
.btn-dark { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-dark:hover { background: var(--brand-2); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.user-chip { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 999px; padding: 5px 12px 5px 5px; }
.user-chip .ava { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.role-tag { font-size: 11px; background: #eef2ff; color: #4338ca; padding: 1px 7px; border-radius: 999px; font-weight: 600; }

/* category dropdown in header */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 8px 12px; font-weight: 600; font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap; }
.nav-drop-btn:hover { box-shadow: var(--shadow); }
.nav-drop-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; }
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 14px; }
.nav-drop-menu a:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- hero / banners ---------- */
/* Ink, not slate — and the warm stop at the far end is the gold accent showing
   through, so the hero belongs to the same palette as the buttons below it. */
.hero { background: linear-gradient(120deg, #0d0f12 0%, #1b1f24 55%, #2b2620 100%); color: #fff; border-radius: 20px; margin: 24px auto 0; max-width: 1240px; overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; }
.hero-copy { padding: 52px 48px; }
/* Fluid rather than a hard 38px: the hero is the one heading that has to hold
   together from a 320px phone to a 1440px monitor without a breakpoint. */
.hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 14px; }
.hero p { color: #cbd5e1; font-size: 16px; margin-bottom: 24px; }
.hero .btn { font-size: 15px; padding: 12px 22px; }
.hero-art { background-size: cover; background-position: center; min-height: 320px; }
.announce-bar { background: var(--accent); color: #111827; text-align: center; padding: 8px 16px; font-weight: 600; font-size: 14px; }

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
/* Breathing room: 36px stacked the homepage shelves on top of each other, 56px
   gives each one its own beat. .section/.section-head are storefront-only — no
   admin, seller or account view emits either — so this can't inflate a dashboard. */
.section { margin-top: 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
/* The display face starts here and only here: 22px+ headings. Anything smaller
   falls back to Inter automatically, so there is no half-way serif. */
.section-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.1; }
/* Tracked small caps rather than a blue underlined word — "View all" is a
   whisper, not a link fighting the heading for attention. */
.link-all { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.link-all:hover { color: var(--accent); text-decoration: none; }
/* 18px rather than 14px. The card grew a taller 3/4 frame and, on hover, a
   40px-blurred shadow — at 14px one card's shadow visibly landed on its
   neighbour, which is what made the old grid feel crowded. Chosen over a
   :has(.pc-card) scoped rule because every product shelf uses this class
   (store grid, similar-items rail and account wishlist included) and leaving
   those at 14px would have read as a mistake rather than a decision. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1279px) and (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1023px) and (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
/* Phones: below ~440px auto-fill collapses to a single column and, because the
   tiles are square, stacks five full-width blocks — "Shop by category" alone
   measured 1714px, about 1.9 phone screens, and over half the homepage.

   The phone layout is 3 + 2 instead. Six equal tracks let the first three cards
   span two each (one third of the row) and the last two span three each (half of
   the row), which reads as two larger cards centred under the first row. If a
   category is ever added the extra cards simply pair up the same way rather than
   breaking the grid. Tablet and desktop keep auto-fill untouched. */
@media (max-width: 639px) {
  .cat-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .cat-tile:nth-child(-n+3) { grid-column: span 2; }
  .cat-tile:nth-child(n+4) { grid-column: span 3; }
}

/* Horizontal subcategory carousel (2 rows) */
.cat-subcats { --cat-card-w: 116px; --cat-img: 108px; --cat-gap: 14px; --cat-row-gap: 10px; }
.cat-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.cat-scroll::-webkit-scrollbar { height: 4px; }
.cat-scroll::-webkit-scrollbar-track { background: transparent; }
.cat-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,.2); border-radius: 2px; }
.cat-two-rows { display: flex; flex-direction: column; gap: var(--cat-row-gap); padding-right: var(--cat-gap); }
.cat-row { display: flex; flex-wrap: nowrap; gap: var(--cat-gap); align-items: flex-start; }
.cat-tile--v { flex: 0 0 auto; width: var(--cat-card-w); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-decoration: none; color: inherit; padding: 2px 0 6px; border-radius: 10px; transition: transform .15s ease; min-height: calc(var(--cat-img) + 40px); }
.cat-tile--v:hover { transform: translateY(-2px); }
.cat-tile-img { width: var(--cat-img); height: var(--cat-img); border-radius: 10px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-img-fb { color: var(--muted); font-size: 18px; display: none; }
.cat-tile-label { margin-top: 6px; font-size: 13px; font-weight: 500; text-align: center; color: var(--text); display: block; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: visible; line-height: 1.25; padding: 0 4px; width: 100%; height: auto; min-height: 32px; white-space: normal; word-break: break-word; }

@media (min-width: 1280px) {
  .cat-subcats { --cat-card-w: 124px; --cat-img: 116px; --cat-gap: 16px; }
}
@media (max-width: 1024px) {
  .cat-subcats { --cat-card-w: 112px; --cat-img: 104px; --cat-gap: 14px; }
}
@media (max-width: 768px) {
  .cat-subcats { --cat-card-w: 102px; --cat-img: 94px; --cat-gap: 12px; }
}
@media (max-width: 480px) {
  .cat-subcats { --cat-card-w: 92px; --cat-img: 86px; --cat-gap: 10px; }
}

/* product card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: .15s; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
/* Portrait, not near-square. The catalogue art is generated at 600x750
   (seed.js svg()) so 3/4 shows the whole frame instead of cropping the top and
   bottom off it — and 3/4 is simply what fashion photography is shot at. */
.pc-img { aspect-ratio: 3 / 4; background: var(--surface-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2, .7, .3, 1); }
.pc-card:hover .pc-img img { transform: scale(1.055); }
.pc-img .pc-img-fallback { color: var(--muted); font-size: 12px; text-align: center; padding: 8px; line-height: 1.4; }
.pc-body { padding: 13px 14px 14px; }
/* Tracked small caps: the seller line is provenance, so it should read as a
   stamp rather than compete with the product name underneath it. */
.pc-seller { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pc-name { font-weight: 500; font-size: 14.5px; letter-spacing: -.008em; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }

/* Promotional banners (compact 3-col) */
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-card { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); display: flex; flex-direction: column; height: 100%; }
/* Same artwork as the hero, so these cards carry the 2048x746 ratio too. The old
   16/7 box was narrower than the artwork, and cover then sliced the promo off
   both sides; contain in a matching box shows the banner whole. height:auto lets
   aspect-ratio drive it instead of a percentage height that fought the flex
   parent and could distort the image. */
.promo-img { width: 100%; height: auto; object-fit: contain; object-position: center; aspect-ratio: 2048 / 746; display: block; background: var(--surface-2); }
.promo-fallback { display: none; align-items: center; justify-content: center; text-align: center; padding: 20px; background: linear-gradient(135deg,#1f2937,#374151); color: #fff; aspect-ratio: 2048 / 746; }
.promo-fallback h3 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.promo-fallback p { margin: 0 0 10px; color: #e2e8f0; font-size: 13px; }
.promo-content { padding: 14px 16px; background: var(--surface); }
.promo-content h3 { margin: 0 0 4px; font-size: 15px; }
.promo-content p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.promo-cta { color: var(--brand); font-weight: 600; font-size: 13px; }
@media (max-width: 1023px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .promo-grid { grid-template-columns: 1fr; } }
.pc-price { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pc-price .off { white-space: nowrap; }
.price { font-weight: 700; font-size: 16px; }
.strike { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.off { color: var(--success); font-weight: 700; font-size: 12px; }
/* The stars are gold; the number beside them stays neutral. Colouring both
   turned every rating into a second call-to-action. */
.rating { color: var(--text); font-weight: 600; font-size: 13px; }
.rating .gray { color: var(--muted); font-weight: 400; }
.stars { color: var(--accent); letter-spacing: .06em; }

/* category tile */
.cat-tile { border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 1/1; box-shadow: var(--shadow); }
.cat-tile img, .cat-tile .cat-art { width: 100%; height: 100%; object-fit: cover; }
.cat-tile .lab { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; padding: 26px 14px 12px; font-weight: 700; font-size: 16px; }
/* The "· N subcats" meta is one unbreakable unit, so every card breaks at the
   same place: name first, meta intact on the next line when the card is too
   narrow for both. Without this each label wraps at its own last-fitting word,
   which is why "Fashion Accessories" split differently from the other four.
   Wide cards still put name and meta on a single line. */
.cat-tile .lab span { white-space: nowrap; }
/* Phones: the same section drops the dark overlay and the "· N subcats" meta
   and becomes an image on top with the plain category name underneath. The
   overlay measured 71% of a 154px card and swallowed the photo.

   Every selector is prefixed with `.cat-grid` on purpose: it keeps the store
   page's separate `.cat-tile` (same class, further down this file) untouched,
   and the extra specificity means these win over the base `.cat-tile` and `.lab`
   rules regardless of source order. The card shell — surface, border, radius,
   hover — already comes from those shared rules. */
@media (max-width: 639px) {
  .cat-grid > .cat-tile { aspect-ratio: auto; padding: 8px; align-content: start; }
  .cat-grid > .cat-tile > img,
  .cat-grid > .cat-tile > .cat-art { height: auto; aspect-ratio: 1/1; border-radius: var(--radius-s); }
  .cat-grid > .cat-tile > .lab {
    position: static; background: none; color: var(--text);
    padding: 0; font-size: 13px; line-height: 1.3; text-align: center;
    /* Two lines is the ceiling, and min-height keeps every card in a row the
       same height so the images stay aligned whatever the name length. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
  }
  .cat-grid > .cat-tile > .lab span { display: none; }
}

/* category page hero */
.cat-hero { border-radius: 20px; margin-top: 20px; overflow: hidden; background-size: cover; background-position: center; position: relative; min-height: 200px; display: flex; align-items: flex-end; background-color: #1a2431; }
.cat-hero-inner { padding: 34px 36px; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; }
.cat-hero-inner h1 { font-size: 32px; margin-bottom: 6px; }
.cat-hero-inner .muted { color: #cbd5e1; margin-bottom: 14px; }

/* product detail extras: video, chips, shipping/returns, specs, size chart */
.pd-video { width: 100%; max-height: 480px; background: #000; border-radius: var(--radius); }
.pd-video-btn { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(17, 24, 39, .85); color: #fff; border: none; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.pd-video-btn:hover { background: rgba(17, 24, 39, 1); }
.pd-video-btn.active { background: var(--danger); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.ship-boxes { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 14px 0; }
.ship-box { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.ship-box b { font-size: 13px; }
.ship-box span { color: var(--muted); }
.table-wrap .spec-table th { white-space: nowrap; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table td, .spec-table th { border: 1px solid var(--border); padding: 9px 14px; text-align: left; }
.spec-table tr td:first-child { background: var(--surface-2); font-weight: 600; width: 38%; }
@media (min-width: 640px) { .ship-boxes { grid-template-columns: 1fr 1fr 1fr; } }

/* shop */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; margin-top: 20px; }
.filters { position: sticky; top: 84px; align-self: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.filters h2, .filters h4 { margin-top: 0; font-size: 15px; }
.filters .fgroup { margin: 14px 0; border-top: 1px solid var(--border); padding-top: 12px; }
.filters label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; cursor: pointer; }
/* Colour facet swatches: same hairline the store page's .chip-color i uses,
   so light shades (White, Cream) stay visible against the panel. --none is
   the graceful placeholder when no product colour data backs the entry. */
.sw-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: #e5e7eb; box-sizing: border-box; flex: none; }
.sw-dot--none { background: repeating-linear-gradient(45deg, #eceff3 0 3px, #fff 3px 6px); }
.price-inputs { display: flex; align-items: center; gap: 6px; }
.price-inputs input { width: 70px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 14px; }
.search-box { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-width: 420px; flex: 1; }
.search-box input { border: none; outline: none; padding: 10px 14px; flex: 1; }
.search-box button { border: none; background: var(--brand); color: #fff; padding: 0 16px; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }

/* product page */
.pd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 24px; }
/* Grid items default to min-width:auto, which means they refuse to shrink below
   their widest unbreakable content. A long SKU, or a store name with no spaces,
   would push a column past its 1fr track and scroll the whole page sideways. */
.pd-gallery { position: relative; min-width: 0; }
.pd-info { min-width: 0; }
.pd-gallery .main-img { border-radius: var(--radius); aspect-ratio: 4/5; overflow: hidden; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.pd-gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
/* Thumbnails are buttons so they are keyboard reachable; the button carries the
   chrome and the image keeps the sizing. */
.pd-thumbs button { padding: 0; border: 0; background: none; line-height: 0; border-radius: 8px; }
.pd-thumbs img { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.pd-thumbs button.active img { border-color: var(--accent); }
.pd-info h1 { font-size: 26px; }
.pd-seller a { color: var(--brand); font-weight: 600; }
.opt-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
/* Size and colour are native buttons (keyboard reachable, aria-pressed). They
   keep the existing .size-pill / .color-dot look; only the button defaults that
   would change their metrics are reset. */
.size-pill { font-family: inherit; border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--surface); }
.size-pill.selected { border-color: var(--brand); background: var(--brand); color: #fff; }
.color-dot { padding: 0; font-family: inherit; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; position: relative; }
.color-dot.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.size-pill:focus-visible, .color-dot:focus-visible, .pd-thumbs button:focus-visible, .qty-stepper button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.qty-stepper button { border: none; background: var(--surface-2); width: 36px; height: 38px; font-size: 18px; cursor: pointer; }
.qty-stepper span { min-width: 40px; text-align: center; font-weight: 600; }
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.meta-grid .k { font-size: 12px; color: var(--muted); text-transform: uppercase; }

/* cart */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 20px; }
.cart-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; align-items: center; }
.cart-item img { width: 84px; height: 100px; object-fit: cover; border-radius: 8px; }
.cart-list { display: flex; flex-direction: column; gap: 12px; }
.summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: sticky; top: 84px; }
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; }
.summary-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 17px; }

/* checkout */
.pay-method { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; cursor: pointer; background: var(--surface); transition: .15s; }
.pay-method.selected { border-color: var(--brand); background: #f8fafc; }
.pay-method .pm-head { display: flex; align-items: center; gap: 12px; }
.pay-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1; flex: none; display: grid; place-items: center; }
.pay-method.selected .pay-radio { border-color: var(--brand); }
.pay-method.selected .pay-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.pay-method .desc { font-size: 13px; color: var(--muted); margin: 6px 0 0 30px; }
.addr-card { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px; cursor: pointer; background: var(--surface); }
.addr-card.selected { border-color: var(--brand); background: #f8fafc; }

/* forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45, 55, 72, .12); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-card { max-width: 440px; margin: 48px auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-lg); }
.tabs { display: flex; gap: 6px; background: var(--surface-2); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.tabs button { flex: 1; border: none; background: transparent; padding: 9px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.demo-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: #78350f; margin-top: 18px; }
.demo-box code { background: #fef3c7; padding: 1px 5px; border-radius: 5px; font-size: 12px; }

/* dashboard layout */
.dash { display: grid; grid-template-columns: 230px 1fr; gap: 24px; margin-top: 24px; min-height: 70vh; }
.dash-nav { position: sticky; top: 84px; align-self: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dash-nav .dn-head { padding: 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.dash-nav a.opt { display: flex; gap: 10px; align-items: center; padding: 11px 16px; color: var(--text); font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--surface-2); }
.dash-nav a.opt:hover { background: var(--surface-2); text-decoration: none; }
.dash-nav a.opt.active { background: var(--brand); color: #fff; }
.dash-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { background: var(--surface-2); border-radius: var(--radius); padding: 16px; }
.stat-card .num { font-size: 26px; font-weight: 800; }
.stat-card .lab { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
tr:last-child td { border-bottom: none; }
.td-img img { width: 42px; height: 52px; object-fit: cover; border-radius: 6px; }

/* badges / pills */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-success { background: #dcfce7; color: #166534; }
.pill-danger { background: #fee2e2; color: #991b1b; }
.pill-warn { background: #fef3c7; color: #92400e; }
.pill-info { background: #dbeafe; color: #1e40af; }
.pill-gray { background: #e5e7eb; color: #374151; }

/* category management (admin), grouped seller assignment checkboxes */
.cat-checks .cat-group { flex-basis: 100%; }
.cat-checks .cat-group .cat-subs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 22px; }
.cat-main td { border-top: 2px solid var(--border); }
.cat-sub td { border-top: none; }
.cat-main td:first-child, .cat-sub td:first-child { width: 96px; }
.pill-brand { background: #ede9fe; color: #5b21b6; }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 14px 0; }
.timeline li { position: relative; padding: 0 0 14px 26px; }
.timeline li::before { content: ''; position: absolute; left: 7px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.timeline li.done::before { background: var(--success); }
.timeline li::after { content: ''; position: absolute; left: 11px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline .tl-t { font-weight: 600; font-size: 13.5px; }
.timeline .tl-s { font-size: 12.5px; color: var(--muted); }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--surface); border-radius: 18px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 24px; box-shadow: var(--shadow-lg); }
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.sd-opts { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; margin: 6px 0 12px; }
.sd-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.sd-opt:hover { border-color: #94a3b8; }
.sd-opt.on { border-color: #4f46e5; background: #eef2ff; }
.sd-opt input { display: none; }
.sd-opt .so-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-opt .so-txt b { font-size: 14px; color: var(--text); }
.sd-opt .so-txt i { font-style: normal; font-size: 12px; }
.sd-opt .so-chk { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; flex: none; position: relative; }
.sd-opt.on .so-chk { border-color: #4f46e5; }
.sd-opt.on .so-chk::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #4f46e5; }

/* Status update modal (PRD spec) */
.us-head { display: flex; align-items: center; gap: 12px; }
.us-head .sd-timg { width: 46px; height: 46px; flex: none; }
.us-head .us-hi { flex: 1; min-width: 0; }
.us-head .us-hi b { font-size: 15px; display: block; }
.us-timg img { width: 100%; height: 100%; object-fit: cover; }
.sd-timg-n { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #f1f5f9; border-radius: 10px; }
.us-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 10px 0 14px; color: var(--muted); font-size: 13px; }
.us-sub .us-amt { color: var(--text); font-weight: 700; white-space: nowrap; }
.us-cur { display: flex; align-items: center; justify-content: space-between; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.us-sec-t { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--muted); margin: 6px 0 6px; }
.us-trx { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.us-fixed { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; font-size: 13px; }
.us-conf { background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 14px; }
.us-conf h4 { margin: 0 0 6px; color: #b91c1c; }
.chk-line { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.chk-line input { margin-top: 3px; }
.chk-line span { display: flex; flex-direction: column; }
.chk-line b { font-size: 13px; }
.chk-line i { font-style: normal; font-size: 12px; }
.ras { display: flex; gap: 8px; flex-wrap: wrap; }
.ras .ra { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px; }
.ras .ra:has(input:checked) { border-color: #4f46e5; background: #eef2ff; }
.req { color: #dc2626; }

/* Primary action + menu clipping protection */
.sd-prim { white-space: nowrap; }
.sd-menu { overflow-y: auto; }
.sd-dr-cls { margin-left: auto; border: 1px solid var(--border); background: #fff; border-radius: 9px; width: 34px; height: 34px; cursor: pointer; font-size: 14px; }

/* toasts */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: #111827; color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; min-width: 240px; max-width: 360px; animation: slideIn .2s ease; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* misc */
.empty { text-align: center; color: var(--muted); padding: 50px 20px; }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.center { text-align: center; }
.perms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.perms-grid label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); }
.switch { position: relative; width: 38px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .sl { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: .2s; cursor: pointer; }
.switch .sl::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: .2s; }
.switch input:checked + .sl { background: var(--success); }
.switch input:checked + .sl::before { transform: translateX(18px); }

/* QR placeholder */
.qr-block { width: 200px; height: 200px; margin: 12px auto; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; font-weight: 800; font-size: 15px; color: var(--brand); letter-spacing: 1px; image-rendering: pixelated; }

/* footer */
.site-footer { background: var(--brand-2); color: #cbd5e1; margin-top: 48px; padding: 40px 20px 30px; }
.footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
/* Footer column headings are <h2> for heading order; h4 is kept in the
   selector so any deeper heading placed here still matches this treatment. */
.site-footer h2, .site-footer h4 { color: #fff; font-size: 15px; }
.site-footer a { color: #94a3b8; font-size: 13.5px; display: block; margin: 4px 0; }

@media (max-width: 900px) {
  .hero-grid, .pd-layout, .shop-layout, .cart-layout, .dash, .grid2 { grid-template-columns: 1fr; }
  .filters, .dash-nav { position: static; }
  .hero-copy { padding: 32px 24px; }
  .hero h1 { font-size: 28px; }
  .form-grid2, .perms-grid { grid-template-columns: 1fr; }
  .nav { order: 3; width: 100%; }
}

/* ---------- admin / dashboard utilities ---------- */
.inp { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); outline: none; }
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45, 55, 72, .12); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.card.p { padding: 18px; }
.perms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.perms-grid label, .tog-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.perms-grid label span:last-child, .tog-line span:nth-child(2) { flex: 1; }
.perms-grid b, .tog-line b { font-size: 13.5px; }
.bar-chart { display: flex; gap: 4px; align-items: flex-end; height: 130px; padding: 12px; background: var(--surface-2); border-radius: var(--radius); overflow-x: auto; }
.bar-col { flex: 1; min-width: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bar-col .bar { width: 100%; background: var(--brand); border-radius: 5px 5px 0 0; min-height: 2px; }
.bar-col .bar-lab { font-size: 10px; color: var(--muted); white-space: nowrap; }
.share-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.share-bar .bar { height: 100%; border-radius: 999px; background: var(--info); }
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-item { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; }
.notif-item.muted { opacity: .6; }
.sect-row { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); }
.footer-sub { max-width: 1240px; margin: 24px auto 0; border-top: 1px solid #334155; padding-top: 16px; font-size: 12.5px; color: #64748b; }
.dash-nav a.dn-off { opacity: .4; cursor: not-allowed; pointer-events: none; }
.dn-foot { padding: 10px 0 4px; }

.status-card { border-radius: 12px; padding: 14px 18px; border: 1px solid var(--border); background: var(--surface); line-height: 1.55; }
.status-card b { display: block; margin-bottom: 4px; }
.status-pending { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.status-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.status-danger { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.auth-card .mb { display: block; }

/* seller-application review pages */
.hidden { display: none !important; }
.ap-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.ap-grid .card, .card.ap { padding: 18px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.kv span { color: var(--muted); flex: 1; }
.kv b { text-align: right; }
.dec-tabs { gap: 8px; }
.dec-tabs .btn { flex: 1; }
.tl { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--muted); flex: none; margin-top: 2px; }
.tl-now .tl-dot { background: var(--brand); border-color: var(--brand); }
.tl-done .tl-dot { background: var(--success); border-color: var(--success); }
.tl-body { font-size: 13.5px; line-height: 1.5; }
@media (max-width: 900px) { .ap-grid { grid-template-columns: 1fr; } }

/* category pickers (seller request / admin grant) */
.cat-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cat-pick-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; background: var(--surface); color: var(--text); }
.cat-pick-card:hover { border-color: var(--brand); }
.cat-pick-card .cp-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cat-pick-card .cp-sub { color: var(--muted); }
.cat-pick-card input { display: none; }
.cat-pick-card.is-sel, .cat-pick-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft, rgba(120, 60, 200, .06)); box-shadow: 0 0 0 1px var(--brand) inset; }
.cat-pick-card.is-sel .cp-name::before, .cat-pick-card:has(input:checked) .cp-name::before { content: '\2713'; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* admin category-grant cards */
.cat-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.cat-card .cat-mh { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14px; }
.cat-card .cat-mh .cp-sub { margin-left: auto; font-weight: 400; }
.cat-card .cat-subs { margin: 8px 0 2px 4px; padding-left: 14px; border-left: 2px solid var(--border); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; font-size: 13px; }
.cat-card .cat-subs label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cat-card .cat-subs input { accent-color: var(--brand); }
.cat-card .ml { margin-left: 6px; font-size: 12px; }

/* ================= premium approval / application UI ================= */
.ap-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 28px; color: #fff; display: flex; gap: 18px; align-items: center; box-shadow: var(--shadow-lg); }
.ap-hero::after { content: ''; position: absolute; right: -70px; top: -70px; width: 270px; height: 270px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); pointer-events: none; }
.ap-hero::before { content: ''; position: absolute; left: -60px; bottom: -110px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
.ap-hero.g-pending { background: linear-gradient(135deg, #78350f, #b45309 55%, #d97706); }
.ap-hero.g-info    { background: linear-gradient(135deg, #1e3a8a, #1d4ed8 55%, #3b82f6); }
.ap-hero.g-reject  { background: linear-gradient(135deg, #7f1d1d, #b91c1c 55%, #ef4444); }
.ap-hero.g-success { background: linear-gradient(135deg, #064e3b, #047857 55%, #10b981); }
.hero-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; font-weight: 700; }
.hero-title { margin: 0 0 8px; font-size: 26px; font-weight: 800; color: #fff; }
.hero-main { flex: 1; min-width: 0; }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.h-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; margin: 3px 4px 0 0; }
.h-chip b { font-weight: 700; }
.hpill { display: inline-block; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.32); font-size: 13px; font-weight: 800; text-transform: capitalize; }
.hdate { font-size: 12.5px; opacity: .85; }
.hero-ava { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; font-size: 24px; font-weight: 800; letter-spacing: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.38); flex: none; }

.ap-card { overflow: hidden; }
.ap-card .ap-body { padding: 16px 18px 18px; }
.card-h { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; padding: 14px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.card-ic { width: 28px; height: 28px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 14px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.kv span { color: var(--muted); flex: 1; }
.kv b { text-align: right; font-weight: 600; }
.kvg { display: flex; flex-direction: column; gap: 7px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.kvg > span { color: var(--muted); font-size: 13px; }
.req-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.req-chip { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; }
.req-chip.cat { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.locked-note { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.locked-note b { color: var(--text); }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 5px; }
.seg button { border: none; background: transparent; border-radius: 8px; padding: 9px 6px; font-size: 13px; font-weight: 700; color: var(--muted); transition: .15s; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.sec-h { margin-top: 16px; }
.sec-h b { font-size: 14px; display: block; }
.sec-h span { font-size: 12.5px; color: var(--muted); }

.scope-pick { display: grid; grid-template-columns: 1fr; gap: 10px; }
.scope-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; transition: .15s; }
.scope-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow); }
.scope-card.sel { border-color: #6366f1; background: linear-gradient(180deg, #eef2ff, #f8faff); box-shadow: 0 0 0 1px #6366f1; }
.scope-card input { display: none !important; }
.scope-badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; font-weight: 800; color: #fff; flex: none; }
.scope-info { flex: 1; min-width: 0; }
.scope-info b { font-size: 14.5px; display: block; }
.scope-info span { font-size: 12.5px; color: var(--muted); }
.scope-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; flex: none; background: var(--surface); transition: .15s; }
.scope-card.sel .scope-check { background: #6366f1; border-color: #6366f1; }
.scope-tune { border: 1px solid var(--border); background: var(--surface); color: var(--info); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.scope-tune:hover { background: var(--surface-2); }
.scope-subs { display: none; width: 100%; padding: 12px 4px 4px; border-top: 1px dashed var(--border); }
.scope-card.open .scope-subs { display: block; }
.scope-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; user-select: none; }
.scope-chip .tick { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; line-height: 1; }
.scope-chip.on { background: #eef2ff; border-color: #c7d2fe; }
.scope-chip.on .tick { background: #6366f1; border-color: #6366f1; }
.scope-chip.off { opacity: .5; }
.scope-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 0; }
.sum-bubble { background: var(--surface-2); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--muted); }
.sum-bubble b { color: var(--text); }
.sum-bubble.hl { background: #eef2ff; color: #4338ca; }
.sum-bubble.hl b { color: #4338ca; }

.perm-sheet { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.perm-sheet summary { list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.perm-sheet summary::-webkit-details-marker { display: none; }
.perm-sheet summary .perm-c { margin-left: auto; background: var(--surface-2); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.perm-sheet[open] summary { border-bottom: 1px solid var(--border); }
.perm-sheet .perms-grid { padding: 14px; margin: 0; }
.btn-approve { width: 100%; margin-top: 16px; padding: 13px 20px; border: none; border-radius: 12px; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 8px 20px rgba(79, 70, 229, .35); transition: .15s; }
.btn-approve:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(79, 70, 229, .45); }
.btn-approve:disabled { opacity: .55; cursor: not-allowed; filter: saturate(.4); }
.status-card { border-radius: 14px; padding: 15px 18px; border: 1px solid; line-height: 1.55; }
.status-card b { display: block; margin-bottom: 4px; }

.ap-dec { position: sticky; top: 90px; }

@media (max-width: 1080px) {
  .ap-grid { grid-template-columns: 1fr; }
  .ap-dec { position: static; }
}
@media (max-width: 720px) {
  .ap-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .hero-side { align-items: flex-start; text-align: left; }
  .hero-title { font-size: 22px; }
  .hero-ava { width: 54px; height: 54px; border-radius: 16px; font-size: 20px; }
  .scope-pick { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-main { padding: 14px; }
  .form-grid2 { grid-template-columns: 1fr; }
  .kv { flex-direction: column; gap: 2px; }
  .kv b { text-align: left; }
  .scope-card { gap: 10px; }
  .scope-tune { margin-left: auto; }
}

.scope-card.sel .scope-tune, .scope-card.sel .scope-subs { display: none; }
.scope-card.sel .scope-info span { color: #4338ca; }

/* ---- Admin Sellers: premium card grid ---- */
.seller-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.seller-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); position: relative; overflow: hidden; transition: .18s; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.seller-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, hsl(var(--h, 210) 62% 46%), hsl(var(--h, 210) 62% 58%)); }
.seller-card:hover { transform: translateY(-2px); border-color: hsl(var(--h, 210) 55% 82%); box-shadow: 0 10px 26px rgba(16, 24, 40, .10); }
.s-ava { width: 44px; height: 44px; border-radius: 12px; background: hsl(var(--h, 210) 62% 46%); color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.sc-top { display: flex; align-items: center; gap: 10px; }
.sc-id { flex: 1; min-width: 0; }
.sc-id b { display: block; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-id span { font-size: 12px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-status { flex: none; }
.s-cat { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.s-cat i { font-style: normal; opacity: .7; }
.s-cat.none { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.sc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.sc-meta div { display: flex; flex-direction: column; gap: 1px; }
.sc-meta b { font-size: 15px; font-weight: 800; }
.sc-meta span { font-size: 11px; color: var(--muted); }
.sc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.sc-foot span { color: hsl(var(--h, 210) 62% 46%); font-weight: 700; white-space: nowrap; }
.s-sub { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; display: inline-block; margin: 3px 5px 0 0; }
@media (max-width: 520px) {
  .seller-grid { grid-template-columns: 1fr; }
  .sc-meta { grid-template-columns: 1fr 1fr 1fr; }
}

/* =================== Shipping & Delivery (Admin / Seller / Customer) =================== */
.pill .pi { font-size: 11px; line-height: 1; }

/* sub-navigation pills (shipping sections) */
.ship-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; }
.ship-nav button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ship-nav button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ship-nav button .cnt { opacity: .75; font-weight: 700; margin-left: 4px; }
.ship-nav .ship-sep { width: 1px; background: var(--border); margin: 4px 2px; }

/* summary cards with tone accents */
.ship-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ship-stat { position: relative; overflow: hidden; border: 1px solid var(--border); cursor: pointer; text-align: left; font: inherit; }
.ship-stat::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; }
.ship-stat:hover { border-color: var(--brand); }
.ship-stat.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79, 70, 229, .18); }
.ship-stat.tone-success::after { background: #16a34a; } .ship-stat.tone-danger::after { background: #dc2626; }
.ship-stat.tone-warn::after { background: #d97706; } .ship-stat.tone-info::after { background: #2563eb; }
.ship-stat.tone-brand::after { background: #6d28d9; } .ship-stat.tone-gray::after { background: #9ca3af; }
.ship-stat .num { font-size: 24px; font-weight: 800; }
.ship-stat .lab { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* filter toolbar */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin: 14px 0; }
.filters .field { margin: 0; }
.filters input, .filters select { padding: 8px 10px; font-size: 13px; }

/* shipment table */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 9px 10px; background: var(--surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.data-table td { padding: 10px; border-top: 1px solid var(--border); vertical-align: top; }
.data-table tr:hover td { background: var(--surface-2); }
.ship-id { font-family: ui-monospace, monospace; }

/* key/value detail list */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 6px 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }

/* parenthesised actions under a row (admin + seller ops) */
.ship-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

/* detail split layout */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.cardp { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.cardp h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* vertical event timeline (shipment style) */
.ship-timeline { display: flex; flex-direction: column; gap: 0; margin: 6px 0; }
.st-item { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.st-item:last-child { padding-bottom: 0; }
.st-item::before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--border); }
.st-item.latest::before { background: linear-gradient(var(--brand), var(--border)); }
.st-item:last-child::before { display: none; }
.st-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: none; background: var(--surface-2); }
.st-dot.pill-success { background: #dcfce7; } .st-dot.pill-danger { background: #fee2e2; }
.st-dot.pill-warn { background: #fef3c7; } .st-dot.pill-info { background: #dbeafe; }
.st-dot.pill-brand { background: #ede9fe; } .st-dot.pill-gray { background: #e5e7eb; }
.st-body { font-size: 13.5px; line-height: 1.5; padding-top: 2px; }
.st-title { font-weight: 600; }

/* horizontal progress stepper */
.track-steps { display: flex; align-items: center; gap: 0; margin: 8px 0 4px; flex-wrap: nowrap; }
.track-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; text-align: center; opacity: .45; }
.track-step .ts-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); display: grid; place-items: center; }
.track-step .ts-l { font-size: 11px; font-weight: 600; white-space: nowrap; }
.track-step.done { opacity: 1; } .track-step.done .ts-ic { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.track-step.current { opacity: 1; } .track-step.current .ts-ic { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 5px rgba(79, 70, 229, .15); }
.track-step.bad .ts-ic { background: #fee2e2; border-color: #dc2626; }
.track-step.current .ts-l { color: var(--brand); }
.track-line { flex: 0 0 auto; width: 14px; height: 2px; background: var(--border); margin-top: 16px; }

/* customer order card */
.order-card { display: flex; gap: 14px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; }
.order-card .oc-img { width: 74px; height: 88px; border-radius: 10px; overflow: hidden; flex: none; }
.order-card .oc-img img { width: 100%; height: 100%; object-fit: cover; }
.order-card .oc-main { flex: 1; min-width: 0; }
.order-card .oc-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.order-card .oc-edd { font-size: 15px; font-weight: 800; color: var(--brand); }
.order-card .oc-sep { height: 1px; background: var(--border); margin: 10px 0; }
.order-card .oc-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.order-card .oc-st { font-size: 13px; font-weight: 700; }
.oc-items { display: flex; gap: 8px; flex-wrap: wrap; }
.oc-thumb { width: 42px; height: 50px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.oc-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* EDD blurb */
.edd-banner { display: flex; gap: 10px; align-items: center; background: linear-gradient(90deg, #ede9fe, #e0e7ff); border: 1px solid #c7d2fe; border-radius: 12px; padding: 10px 14px; margin: 6px 0 4px; }
.edd-banner .be { font-size: 20px; }

/* bottom sheets on small screens */
.sheet-inner { position: relative; }
@media (max-width: 640px) {
  .modal-backdrop { padding: 0; align-items: end; }
  .modal, .modal.sheet { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); animation: sheetUp .22s ease-out; }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
}

/* small screens: hide the wide shipment tables and show stacked cards instead */
.ship-card-mobile { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
.ship-card-mobile .m-ic { font-size: 20px; display: grid; place-items: center; }
.ship-card-mobile .m-l1 { font-weight: 700; font-size: 13.5px; }
.ship-card-mobile .m-l2 { font-size: 12px; color: var(--muted); }
.ship-card-mobile .m-st { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ship-card-mobile .m-actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.ship-on-mobile { display: none; }
@media (max-width: 820px) {
  .ship-desktop-table { display: none; }
  .ship-on-mobile { display: block; }
  .split { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 108px 1fr; }
}
@media (min-width: 821px) { .ship-on-mobile { display: none; } }

/* exception trays (failed / overdue / RTO) */
.exc-tray { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.exc-tray .cardp { border-left: 4px solid; }
.exc-tray .cardp.c-failed { border-left-color: #dc2626; }
.exc-tray .cardp.c-rto { border-left-color: #9333ea; }
.exc-tray .cardp.c-late { border-left-color: #d97706; }

.btn-xs { padding: 4px 9px; font-size: 12px; line-height: 1.3; border-radius: 8px; }
.modal.wide { max-width: 880px; }
.shipd .shipd-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.shipd .shipd-awb { font-family: ui-monospace, monospace; color: var(--muted); font-size: 12px; }
.shipd-gap { display: grid; gap: 14px; margin-top: 14px; }
.shipd section h4.t { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tag-line { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* =================== Seller Dashboard (Skyrmex spec) =================== */
body.seller-app .topbar, body.seller-app .site-header, body.seller-app .site-footer { display: none; }
body.seller-app { background: #f4f6fb; }

.sd-shell { display: flex; min-height: 100vh; }
.sd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-main { flex: 1; }
.sd-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1099; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sd-scrim.show { opacity: 1; pointer-events: auto; }
.sd-group-title { margin: 16px 12px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #64748b; font-weight: 700; }
.sd-nav .sd-link.dn-off, .sd-nav.off .sd-link, .sd-nav.off .sd-sub { opacity: .38; pointer-events: none; }

/* dark sidebar */
.sd-side { width: 256px; flex: none; background: #101828; color: #cbd5e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1100; transition: transform .22s ease; }
.sd-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; }
.sd-brand .sd-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6d28d9, #9333ea); display: grid; place-items: center; font-size: 18px; color: #fff; flex: none; }
.sd-brand b { color: #fff; font-size: 17px; letter-spacing: .2px; }
.sd-brand b span { color: #f0abfc; }
.sd-brand small { display: block; font-size: 10.5px; color: #64748b; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* Super Admin banner + store picker, shown above the seller console nav */
.sd-admin-bar { padding: 0 14px 12px; }
.sd-admin-tag { display: inline-block; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(124, 58, 237, .22); border: 1px solid rgba(167, 139, 250, .4); color: #ddd6fe; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
/* Super Admin store scope in the workspace sidebar. The store is picked from a
   directory page, so this is either the "pick a store" prompt or the store in
   scope with a way out of it. */
.sd-store-link, .sd-scope { display: block; padding: 8px 10px; border-radius: 9px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.sd-store-link:hover, .sd-scope:hover { border-color: #7c3aed; color: #fff; }
.sd-scope span { font-weight: 400; color: #94a3b8; }
.sd-scope-x { float: right; margin-top: -30px; margin-right: 8px; padding: 2px 7px; border-radius: 999px; background: #1e293b; border: 1px solid #334155; color: #94a3b8; font-size: 11px; text-decoration: none; }
.sd-scope-x:hover { border-color: #ef4444; color: #fecaca; }

/* Store directory (#/adminproducts/stores) */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.st-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; }
.st-card:hover { border-color: #7c3aed; box-shadow: 0 8px 22px rgba(124, 58, 237, .14); transform: translateY(-1px); }
.st-card.on { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.st-card-h { display: flex; align-items: center; gap: 10px; }
.st-ava { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: #ede9fe; color: #6d28d9; font-weight: 800; font-size: 13px; }
.st-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-on { padding: 2px 8px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.st-stats { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.st-stats b { color: var(--text); }
.st-card-f { display: flex; justify-content: flex-end; }
.st-scope { margin-bottom: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.st-scope b { color: var(--text); }
.st-scope a { color: #7c3aed; font-weight: 600; }
.sd-nav { flex: 1; padding: 6px 10px 20px; }
.sd-group { margin: 14px 0 4px; padding: 0 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #64748b; font-weight: 700; }
.sd-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 1px 0; border-radius: 9px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: .12s; }
.sd-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.sd-link .ic { width: 22px; text-align: center; font-size: 15px; flex: none; }
.sd-link .cnt { margin-left: auto; background: rgba(255,255,255,.1); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.sd-link.has-sub { position: relative; }
.sd-link.has-sub .sw { margin-left: auto; transition: transform .15s; }
.sd-sub { max-height: 0; overflow: hidden; transition: max-height .18s ease; padding: 0 6px; }
.sd-group.open .sd-link.has-sub .sw { transform: rotate(90deg); }
.sd-group.open { background: rgba(255,255,255,.03); border-radius: 10px; }
.sd-group.open .sd-sub { max-height: 320px; }
.sd-sub a { display: block; padding: 6px 12px 6px 46px; font-size: 12.5px; color: #94a3b8; border-left: 2px solid transparent; }
.sd-sub a:hover { color: #fff; }
.sd-sub a.on, .sd-link.on { background: rgba(109, 40, 217, .28); color: #fff; }
.sd-sub a.on { border-left-color: #a78bfa; }
.sd-side .sd-foot { padding: 14px 10px 20px; border-top: 1px solid rgba(255,255,255,.07); }
.sd-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.sd-user:hover { background: rgba(255,255,255,.06); }
.sd-user .su-ava { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #6d28d9, #d946ef); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none; }
.sd-user .su-name { font-size: 13px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-user .su-role { font-size: 11px; color: #94a3b8; }

/* top header */
.sd-top { position: sticky; top: 0; z-index: 1050; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.sd-hamb { display: none; border: 1px solid var(--border); background: #fff; border-radius: 9px; width: 38px; height: 38px; font-size: 16px; cursor: pointer; flex: none; }
.sd-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.sd-crumb b { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; background: #f1f5f9; border: 1px solid transparent; border-radius: 10px; padding: 0 12px; height: 38px; }
.sd-search:focus-within { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.sd-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--text); }
.sd-search .si { font-size: 14px; color: var(--muted); }
.sd-top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sd-ic { position: relative; width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent; cursor: pointer; font-size: 17px; display: grid; place-items: center; color: #374151; }
.sd-ic:hover { background: #f1f5f9; }
.sd-ic .badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.sd-dd { position: absolute; top: 46px; right: 0; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 1060; }
.sd-dd.open { display: block; }
.sd-dd a, .sd-dd button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; border-radius: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.sd-dd a:hover, .sd-dd button:hover { background: #f1f5f9; }
.sd-dd .sd-dd-h { padding: 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; font-weight: 700; font-size: 13px; }
.sd-dd .sd-dd-h small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.sd-avatar { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
.sd-avatar .su-ava { width: 30px; height: 30px; border-radius: 8px; }
.sd-avatar b { font-size: 12.5px; }

/* content */
.sd-main { flex: 1; min-width: 0; padding: 24px 26px 60px; }

/* page heading */
.sd-page-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sd-page-h h1 { font-size: 21px; font-weight: 800; margin: 0; letter-spacing: -.2px; }
.sd-page-h p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.sd-page-h .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* summary cards */
.sd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.sd-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; cursor: pointer; text-align: left; font: inherit; transition: .15s; }
.sd-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
/* Dashboard KPI cards are links to the pages they summarise: keep the card's
   own typography (no link blue, no underline on hover). */
a.sd-card, a.sd-card:hover { color: inherit; text-decoration: none; }
.sd-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.sd-card.t-success::before { background: #16a34a; } .sd-card.t-warn::before { background: #d97706; }
.sd-card.t-info::before { background: #2563eb; } .sd-card.t-danger::before { background: #dc2626; }
.sd-card.t-brand::before { background: #6d28d9; } .sd-card.t-gray::before { background: #94a3b8; }
.sd-card .sd-c-ic { font-size: 16px; }
.sd-card .num { font-size: 23px; font-weight: 800; line-height: 1.1; }
.sd-card .lab { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.sd-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79, 70, 229, .18); }

.sd-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.sd-action .act-ic { font-size: 18px; flex: none; }
.sd-action .act-main { flex: 1; min-width: 200px; }
.sd-action .act-main b { font-size: 14px; color: #92400e; }
.sd-action .act-main span { display: block; font-size: 12.5px; color: var(--muted); }
.sd-action .act-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-action .act-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5c76b; background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #92400e; cursor: pointer; transition: .12s; }
.sd-action .act-chip b { background: #f59e0b; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11.5px; line-height: 16px; }
.sd-action .act-chip.danger { border-color: #fecaca; color: #b91c1c; }
.sd-action .act-chip.danger b { background: #dc2626; }
.sd-action .act-chip:hover { border-color: #f59e0b; box-shadow: 0 2px 8px rgba(217, 119, 6, .18); }

.sd-pd-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
.sd-pd-gallery { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.sd-pd-img { aspect-ratio: 4/5; background: var(--surface-2); display: grid; place-items: center; }
.sd-pd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-pd-img .sd-pd-none { font-size: 34px; color: var(--muted); }
.sd-pd-thumbs { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; }
.sd-pd-thumb { width: 54px; height: 66px; border: 2px solid var(--border); border-radius: 8px; padding: 0; overflow: hidden; background: var(--surface); cursor: pointer; }
.sd-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-pd-thumb.on { border-color: var(--brand); }
.sd-pd-facts { padding: 18px 20px; }
.pd-facts-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.pd-facts-badges { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.pd-facts-price { margin: 12px 0 6px; }
.pd-facts-price .cur { font-size: 26px; font-weight: 800; }
.pd-facts-price .mrp { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.pd-facts-price .off { font-size: 13px; font-weight: 700; color: #16a34a; }
.pd-facts-stock { font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
.pd-facts-stock.ok { color: var(--brand); }
.pd-facts-stock.low { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 7px 10px; }
.sd-pd-facts .pd-facts-meta { margin-top: 4px; }
.sd-sect { margin-bottom: 22px; }
.sd-sect-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sd-sect-h h4 { margin: 0; font-size: 15px; }
.pd-desc { padding: 16px 18px; line-height: 1.6; font-size: 14px; }
.sd-sub-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.sd-table tr.sd-total td { background: #f8fafc; border-top: 2px solid var(--border); }
@media (max-width: 820px) {
  .sd-pd-grid { grid-template-columns: 1fr; }
}

/* status tabs */
.sd-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.sd-tab { flex: none; border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sd-tab .cnt { background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
.sd-tab:hover { border-color: var(--brand); }
.sd-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sd-tab.on .cnt { background: rgba(255,255,255,.2); color: #fff; }

/* Payments & Payouts — in-page tabs. Active state is Skyrmex purple. */
.sd-tabs.pay-tabs { gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; margin-bottom: 16px; }
.sd-tabs.pay-tabs .sd-tab { border-radius: 10px 10px 0 0; border-bottom: none; background: transparent; color: var(--muted); padding: 9px 15px; font-size: 13px; }
.sd-tabs.pay-tabs .sd-tab:hover { background: #f4f2ee; color: var(--text); border-color: transparent; }
.sd-tabs.pay-tabs .sd-tab.on,
.sd-tabs.pay-tabs .sd-tab[aria-selected="true"] { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.sd-tabs.pay-tabs .sd-tab:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }
.sd-tabs.pay-sub { margin-bottom: 14px; }
.sd-tabs.pay-sub .sd-tab { border-radius: 999px; border: 1px solid var(--border); background: #fff; }
.sd-tabs.pay-sub .sd-tab.on,
.sd-tabs.pay-sub .sd-tab[aria-selected="true"] { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.pay-panel:focus { outline: none; }

/* Settlement drawer — right-side on desktop, full sheet on mobile.
   Reuses the accessible UI.modal plumbing (role=dialog, focus trap, Escape). */
.modal-backdrop.pay-drawer-bg { display: flex; justify-content: flex-end; align-items: stretch; padding: 0; }
.modal.pay-drawer { max-width: 540px; width: 100%; max-height: 100%; height: 100%; border-radius: 0; overflow-y: auto; }
@media (max-width: 640px) {
  .modal-backdrop.pay-drawer-bg { align-items: flex-end; }
  .modal.pay-drawer { max-width: 100%; max-height: 92vh; height: auto; border-radius: 16px 16px 0 0; }
}

/* Settlement line items: label + amount, with an optional derivation note. */
.pay-lines { display: grid; gap: 2px; }
.pay-line { padding: 9px 0; border-bottom: 1px solid var(--border); }
.pay-line:last-child { border-bottom: none; }
.pay-line .pl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pay-line .pl-label { font-size: 13px; color: var(--text); }
.pay-line .pl-amt { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pay-line .pl-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.pay-line.pay-total { background: #f4f2ee; border-radius: 10px; padding: 11px 12px; border-bottom: none; margin-top: 4px; }
.pay-miss { color: var(--muted); }
.pay-na { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* Admin financial workspace (Payments & Payouts) */
.fin-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; margin-top: 14px; }
.fin-panel { padding: 16px 18px; }
.fin-h { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fin-h .small { font-weight: 500; }
.fin-brk { overflow-x: auto; }
.fin-bar { background: #eef2f7; border-radius: 6px; height: 8px; min-width: 60px; overflow: hidden; }
.fin-bar-in { background: #6d28d9; height: 100%; border-radius: 6px; }
.fin-legend { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.fin-legend-i { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.fin-legend-i .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fin-recon { display: grid; gap: 2px; }
.fin-recon-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.fin-recon-row:last-of-type { border-bottom: none; }
.fin-recon-row b.ok { color: #16a34a; }
.fin-recon-row b.warn { color: #d97706; }
.fin-recon-row b.bad { color: #dc2626; }
@media (max-width: 640px) { .fin-two { grid-template-columns: 1fr; } }

/* filter bar */
.sd-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.sd-filters .fld { display: flex; flex-direction: column; gap: 3px; position: relative; }
.sd-filters .fld label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.sd-filters input, .sd-filters select { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: 13px; background: #fff; color: var(--text); outline: none; min-width: 0; }
.sd-filters input:focus, .sd-filters select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.sd-filters .fld-chk { display: flex; align-items: flex-end; font-size: 12px; color: var(--muted); gap: 6px; padding-bottom: 8px; cursor: pointer; }
.sd-filters .fld-chk input { accent-color: var(--brand); }
.sd-filter-reset { margin-left: auto; }

/* toolbar row between filters and table */
.sd-toolrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sd-count { font-size: 13px; color: var(--muted); font-weight: 600; }
.sd-count b { color: var(--text); }

/* orders table */
.sd-panel { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.sd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sd-table th { text-align: left; padding: 11px 12px; background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; white-space: nowrap; }
.sd-table td { padding: 11px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.sd-table tbody tr:hover td { background: #f8fafc; }
.sd-table tbody tr.sel td { background: #eef2ff; }
.sd-table .sd-cb { width: 36px; }
.sd-table input[type="checkbox"] { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }

/* ---------- Inventory: compact variant chips (no more giant rows) ---------- */
/* Each variant is a small chip instead of its own line, the first 6 fit in the
   cell and the rest collapse behind a "+N more" toggle — a product with 40
   variants keeps a one-line row instead of pushing every next row down. */
.inv-prod { display: flex; flex-direction: column; gap: 2px; min-width: 170px; max-width: 260px; }
.inv-prod .sku { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.inv-var-wrap { display: flex; flex-wrap: wrap; gap: 5px; max-width: 430px; }
.sd-table th.inv-vars, .sd-table td.inv-vars { width: 38%; min-width: 300px; }
.sd-table td.inv-vars .inv-var-wrap { max-width: none; }
.inv-panel { overflow-x: auto; }
.inv-panel .sd-table { min-width: 720px; }
.inv-chip { display: inline-flex; align-items: center; gap: 4px; background: #f8fafc; border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--text); }
.inv-chip .v-qty { font-weight: 800; }
.inv-chip.inv-low { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.inv-chip.inv-out { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.inv-chip.inv-more { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.inv-chip.inv-more:hover { background: #e0e7ff; }
.inv-var-wrap:not(.inv-open) .inv-extra { display: none; }
.inv-empty { font-size: 12px; color: var(--muted); }
.inv-stock { font-weight: 800; font-size: 14px; white-space: nowrap; }
.inv-stock.low { color: #b45309; }
.inv-stock.zero { color: #b91c1c; }
input.inv-qty { width: 78px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.inv-search { max-width: 300px; }
.inv-edit-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; margin: 12px 0 4px; }
.inv-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; }
.sd-mcard .mc-top .inv-prod { flex: 1; min-width: 0; max-width: none; }
.sd-mcard .inv-mbody { margin-top: 10px; }
.sd-mcard .inv-var-wrap { max-width: none; }

/* ============ Orders & Shipping — unified KPI strip ============ */
/* ONE rounded summary container holding all eight metrics. A 1px grid gap over
   the container's border colour draws the hairline dividers between sections,
   so the lines stay correct through every responsive wrap (8-up at 1440px+,
   then 4-up, then 2-up) and the page never scrolls sideways. */
.ord-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.ord-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--surface); border: 0; padding: 12px 12px 11px; min-height: 96px; cursor: pointer; font: inherit; color: var(--text); transition: background .12s, box-shadow .12s; }
.ord-kpi:hover { background: #f7f5f1; }
/* Active stage: warm tint plus a slim gold inset bar — the page's accent. */
.ord-kpi.on { background: #faf6ec; box-shadow: inset 0 2.5px 0 var(--accent); }
.ord-kpi .k-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; font-size: 12px; line-height: 1; }
.ord-kpi .num { font-size: 20px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.ord-kpi .lab { font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; margin-top: auto; }
/* Restrained pastel accents live in the icon chip; counts stay ink-dark. */
.ord-kpi.tone-gold .k-ic { background: #f6eedb; }
.ord-kpi.tone-amber .k-ic { background: #fdf0d3; }
.ord-kpi.tone-indigo .k-ic { background: #e8e8fb; }
.ord-kpi.tone-purple .k-ic { background: #f3e8fc; }
.ord-kpi.tone-blue .k-ic { background: #e4eefd; }
.ord-kpi.tone-green .k-ic { background: #dcf5e5; }
.ord-kpi.tone-red .k-ic { background: #fde5e5; }
.ord-kpi.tone-slate .k-ic { background: #e9eef4; }
@media (max-width: 1399px) { .ord-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ord-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ord-kpi { min-height: 86px; } }

/* One clean filter toolbar. Primary row: search + status + payment + courier +
   placed-in + More Filters; AWB and the date range live in the expandable
   panel so the toolbar never spills onto a second line by default. */
.ord-filters { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.ord-fbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; }
.ord-fbar .fld-q { flex: 1 1 260px; min-width: 210px; }
.ord-fbar .fld-q input { width: 100%; height: 36px; }
.ord-filters .fld select { height: 36px; padding-top: 0; padding-bottom: 0; }
.ord-morebtn { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; }
.ord-morebtn.on { border-color: var(--brand); background: var(--surface-2); }
.ord-fbar [data-freset="1"] { margin-left: auto; }
.ord-more { display: none; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; border-top: 1px dashed var(--border); background: #fcfbf9; border-radius: 0 0 13px 13px; }
.ord-more.open { display: flex; }
.ord-more .fld input { height: 36px; }

/* Compact, scannable order rows: thumbnail + order id + product line, customer
   contact, date/time split across two lines, fulfilment reference, badge and
   one contextual action — everything a rep reads in a single pass. */
.ord-pinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ord-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ord-sub b { color: var(--text); }
.ord-flag { color: #92400e; font-weight: 700; }
.sd-table td .sd-timg { flex: none; }
.sd-pcell { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.sd-pcell .sd-timg { width: 46px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); flex: none; background: #f1f5f9; }
.sd-pcell .sd-timg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-pcell b { display: block; font-size: 13px; line-height: 1.3; max-width: 220px; }
.sd-pcell span { font-size: 11.5px; color: var(--muted); }
.sd-mono { font-family: ui-monospace, monospace; font-size: 12px; }
.sd-id-link { color: var(--brand); font-weight: 700; cursor: pointer; }
.sd-id-link:hover { text-decoration: underline; }
.sd-cell-sub { font-size: 11.5px; color: var(--muted); }
.sd-cust { display: flex; flex-direction: column; gap: 1px; }
.sd-cust b { font-size: 12.5px; }
.sd-cust span { font-size: 11.5px; color: var(--muted); }
.sd-edd { font-weight: 700; font-size: 12.5px; }
.sd-edd.late { color: #dc2626; }
.sd-ops { display: flex; align-items: center; gap: 6px; position: relative; }

/* dot menu */
.sd-menu { position: absolute; right: 0; top: 34px; min-width: 208px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(16,24,40,.16); padding: 6px; z-index: 60; }
.sd-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; padding: 8px 11px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.sd-menu button:hover { background: #f1f5f9; }
.sd-menu button.danger { color: #dc2626; }
.sd-menu .sd-menu-h { padding: 6px 11px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.sd-menu .sd-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* bulk bar */
.sd-bulk { display: none; align-items: center; gap: 12px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.sd-bulk.show { display: flex; }
.sd-bulk b { font-size: 13px; color: #4338ca; }
.sd-bulk .sp { flex: 1; }

/* status badges */
.sd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sd-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sd-b-gray { background: #f1f5f9; color: #475569; } .sd-b-blue { background: #dbeafe; color: #1e40af; }
.sd-b-green { background: #dcfce7; color: #166534; } .sd-b-amber { background: #fef3c7; color: #92400e; }
.sd-b-red { background: #fee2e2; color: #991b1b; } .sd-b-purple { background: #ede9fe; color: #5b21b6; }
.sd-b-indigo { background: #e0e7ff; color: #4338ca; }

/* pagination */
.sd-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.sd-pager .info { font-size: 12.5px; color: var(--muted); }
.sd-pager .pgs { display: flex; gap: 6px; }
.sd-pager button { border: 1px solid var(--border); background: #fff; border-radius: 9px; min-width: 32px; height: 32px; font-size: 13px; cursor: pointer; color: var(--text); font-weight: 600; }
.sd-pager button:hover:not(:disabled) { border-color: var(--brand); }
.sd-pager button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sd-pager button:disabled { opacity: .45; cursor: not-allowed; }

/* mobile order cards */
.sd-mcards { display: none; gap: 12px; flex-direction: column; }
.sd-mcard { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.sd-mcard .mc-top { display: flex; align-items: flex-start; gap: 10px; }
.sd-mcard .mc-top .sd-pcell { min-width: 0; flex: 1; }
.sd-mcard .mc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.sd-mcard .mc-meta b { color: var(--text); }
.sd-mcard .mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* drawer */
.sd-drawer-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1140; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sd-drawer-bg.show { opacity: 1; pointer-events: auto; }
.sd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 96vw; background: #fff; z-index: 1150; box-shadow: -18px 0 40px rgba(16, 24, 40, .18); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.sd-drawer.show { transform: none; }
.sd-drawer .sd-dr-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex: none; }
.sd-drawer .sd-dr-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.sd-drawer .sd-dr-head .sub { font-size: 12px; color: var(--muted); }
.sd-drawer .sd-dr-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.sd-drawer .sd-dr-cls { margin-left: auto; border: 1px solid var(--border); background: #fff; border-radius: 9px; width: 34px; height: 34px; cursor: pointer; font-size: 14px; }
.sd-sec { margin: 16px 0; }
.sd-sec h4 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
.sd-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sd-kv .kv-i { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.sd-kv .kv-i span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; font-weight: 700; }
.sd-kv .kv-i b { font-size: 13.5px; }
.sd-prod-l { display: flex; flex-direction: column; gap: 8px; }
.sd-prod-i { display: flex; gap: 10px; align-items: center; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.sd-prod-i img { width: 40px; height: 48px; border-radius: 7px; object-fit: cover; border: 1px solid var(--border); }
.sd-prod-i .pi-m { flex: 1; min-width: 0; }
.sd-prod-i .pi-m b { display: block; font-size: 13px; }
.sd-prod-i .pi-m span { font-size: 11.5px; color: var(--muted); }
.sd-prod-i .pi-p { font-size: 13px; font-weight: 700; white-space: nowrap; }
.sd-dr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-dr-steps { display: flex; flex-direction: column; }
.sd-ogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sd-og-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sd-og-col .sd-sec { margin: 0; }
.sd-sec .sd-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.sd-sec .sd-total b { font-size: 15px; }
.sd-order-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.sd-order-meta > span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.sd-order-meta > span:first-child { margin-right: 2px; }
.sd-order-meta > span:not(:first-child):not(.sd-badge) { padding-left: 10px; border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  .sd-ogrid { grid-template-columns: 1fr; }
  .sd-panel.sd-desktop { display: none; }
  .sd-mcards { display: flex; }
  .sd-side { position: fixed; left: 0; top: 0; transform: translateX(-100%); }
  body.seller-app.sd-sideopen .sd-side { transform: none; box-shadow: 18px 0 40px rgba(16,24,40,.2); }
  .sd-hamb { display: grid; place-items: center; }
  .sd-top { padding: 10px 14px; }
  .sd-main { padding: 16px 14px 50px; }
  .sd-search { max-width: none; }
  .sd-avatar b { display: none; }
}
@media (max-width: 640px) {
  .sd-cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
  .sd-drawer { width: 100%; max-width: 100%; }
  .sd-kv { grid-template-columns: 1fr; }
}

/* ================= Admin Shipping & Delivery console ================= */
/* dark sidebar shell — matches the seller console (navy #101828 + Skyrmex purple) */
.dash-nav { background: #101828; border-color: #101828; }
.dash-nav .dn-head { color: #fff; border-bottom: 1px solid #1e293b; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.dash-nav .dn-head::before { content: '👕'; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #6d28d9, #9333ea); display: grid; place-items: center; font-size: 15px; }
.dash-nav a.opt { color: #cbd5e1; border-bottom: none; padding: 9px 14px; }
.dash-nav a.opt:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.dash-nav a.opt.active { background: rgba(109, 40, 217, .32); color: #fff; box-shadow: inset 3px 0 0 #a78bfa; }
.dash-nav a.opt .opt-ic { width: 20px; text-align: center; font-size: 14px; flex: none; }
.dash-nav .dn-group { padding: 14px 16px 5px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #64748b; font-weight: 700; }
.dash-nav .dn-foot { padding: 12px 16px; font-size: 11px; color: #64748b; letter-spacing: .04em; text-transform: uppercase; border-top: 1px solid #1e293b; }
body.adm-nav-collapsed .dash { grid-template-columns: 0 1fr; gap: 0; transition: grid-template-columns .2s; }
body.adm-nav-collapsed .dash-nav { display: none; }
.adm-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.adm-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); position: sticky; top: 0; z-index: 900; }
.adm-top-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.adm-burger { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; color: var(--text); }
.adm-search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; width: min(400px, 58vw); }
.adm-search .as-ic { color: var(--muted); font-size: 15px; }
.adm-search input { border: 0; background: none; outline: none; font-size: 13px; width: 100%; color: var(--text); }
.adm-top-r { display: flex; align-items: center; gap: 8px; }
.adm-clock { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--muted); }
.adm-ic { position: relative; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; width: 36px; height: 36px; font-size: 15px; cursor: pointer; }
.adm-badge { position: absolute; top: -6px; right: -6px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; }
.adm-prof { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--surface-2); }
.adm-prof .adm-ava .ava { width: 28px; height: 28px; font-size: 12px; }
.adm-prof-name { font-size: 13px; font-weight: 600; color: var(--text); }
.adm-prof-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .16); min-width: 180px; overflow: hidden; z-index: 990; }
.adm-prof-menu.open { display: block; }
.adm-prof-menu a, .adm-prof-menu button { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: none; font-size: 13px; cursor: pointer; color: var(--text); text-decoration: none; }
.adm-prof-menu a:hover, .adm-prof-menu button:hover { background: var(--surface-2); }
.adm-notif { position: absolute; top: 58px; right: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px rgba(15, 23, 42, .18); width: min(380px, 94vw); max-height: 74vh; overflow: auto; z-index: 960; }
.adm-notif-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; }
.adm-notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.adm-notif-item.read { opacity: .65; }
.adm-notif-item:hover { background: var(--surface-2); }
.ant-t { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.nt-dot { width: 7px; height: 7px; border-radius: 999px; background: #6366f1; flex: none; }
.ant-m { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ant-at { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.adm-notif-foot { padding: 10px 14px; text-align: center; }
.adm-notif-foot a { font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 600; }

/* shipping page chrome */
.shd-crumbs { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.shd-crumbs a { color: var(--brand); text-decoration: none; font-weight: 600; }
.shd-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.shd-title-actions { display: flex; gap: 8px; }
.shd-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.shd-nav button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.shd-nav button.on { background: #0f172a; border-color: #0f172a; color: #fff; }
.shd-nav button .cnt { background: rgba(0, 0, 0, .08); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; }
.shd-nav button.on .cnt { background: rgba(255, 255, 255, .22); }

/* KPI cards */
.shd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.shd-kpi { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; position: relative; overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.shd-kpi:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(79, 70, 229, .12); }
.shd-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: #6366f1; }
.shd-kpi:nth-child(7n+2)::before { background: #f59e0b; }
.shd-kpi:nth-child(7n+3)::before { background: #2563eb; }
.shd-kpi:nth-child(7n+4)::before { background: #7c3aed; }
.shd-kpi:nth-child(7n+5)::before { background: #16a34a; }
.shd-kpi:nth-child(7n+6)::before { background: #dc2626; }
.shd-kpi:nth-child(7n+7)::before { background: #9333ea; }
.shd-kpi-lab { font-size: 12px; color: var(--muted); font-weight: 600; }
.shd-kpi-num { font-size: 28px; font-weight: 800; margin: 2px 0; color: var(--text); }
.shd-kpi-delta { font-size: 11.5px; font-weight: 700; }
.shd-kpi-delta.up { color: #16a34a; }
.shd-kpi-delta.down { color: #dc2626; }
.shd-kpi-delta.flat { color: #94a3b8; }

/* analytics cards */
.shd-an-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
.shd-an-row.shd-rail { grid-template-columns: 1fr 1fr; }
.shd-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.shd-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.shd-rgs { display: inline-flex; gap: 4px; }
.shd-rg { border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); }
.shd-rg.on { background: #0f172a; color: #fff; border-color: #0f172a; }
.shd-area { width: 100%; height: auto; }
.sg { stroke: #eef2f7; stroke-width: 1; }
.sg-lbl { font-size: 9px; fill: #94a3b8; }
.sx-lbl { font-size: 9px; fill: #64748b; text-anchor: middle; }
.shd-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.shd-legend .lg { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.shd-legend .lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.lg-pend::before { background: #f59e0b; }
.lg-on::before { background: #2563eb; }
.lg-succ::before { background: #16a34a; }
.lg-err::before { background: #dc2626; }
.shd-donut-flex { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.shd-donut { width: 150px; height: 150px; }
.shd-donut .dc-big { font-size: 27px; font-weight: 800; fill: #0f172a; }
.shd-donut .dc-lbl { font-size: 10px; fill: #94a3b8; }
.shd-dlegend { font-size: 12.5px; display: flex; flex-direction: column; gap: 7px; min-width: 150px; }
.shd-dlegend .ldot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.shd-perf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shd-perf { text-align: center; }
.shd-ring { width: 92px; height: 92px; }
.shd-ring .dc-big { fill: #0f172a; font-weight: 800; }
.shd-perf-num { font-size: 26px; font-weight: 800; color: var(--text); margin: 14px 0 0; }
.shd-perf .small { color: var(--muted); margin-top: 4px; }
.shd-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shd-qa-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 8px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); }
.shd-qa-btn:hover { border-color: var(--brand); background: #f5f4ff; }
.shd-cstats { display: flex; flex-direction: column; gap: 9px; }
.shd-cstat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.shd-cstat-l { display: flex; gap: 10px; align-items: center; min-width: 0; }
.shd-cstat-i .ava { width: 34px; height: 34px; font-size: 13px; }
.shd-cstat-r { text-align: right; flex: none; }
.shd-issues-mini { display: flex; flex-direction: column; gap: 8px; }
.shd-issue { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.shd-issue:hover { border-color: var(--brand); }

/* table page */
.shd-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.shd-tab { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.shd-tab.on { background: #0f172a; color: #fff; border-color: #0f172a; }
.shd-tab-cnt { background: rgba(0, 0, 0, .08); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.shd-tab.on .shd-tab-cnt { background: rgba(255, 255, 255, .22); }
.shd-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.shd-tb-left, .shd-tb-right { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shd-filters { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr auto auto; gap: 10px; align-items: end; margin: 10px 0; }
.shd-filters .field { margin: 0; }
.shd-adv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; padding: 12px; background: #f8fafc; border: 1px dashed var(--border); border-radius: var(--radius); margin-bottom: 12px; }
.shd-adv .field { margin: 0; }
.shd-table-wrap { margin-top: 6px; }
.shd-table td { vertical-align: middle; }
.shd-row { cursor: pointer; }
.shd-chk { width: 36px; }
.shd-order { white-space: nowrap; }
.shd-acts { white-space: nowrap; text-align: right; }
.shd-dot { border: 1px solid var(--border); background: #fff; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-weight: 800; color: var(--muted); }
.shd-dot:hover { border-color: var(--brand); color: var(--brand); }

/* floating row menu */
.shd-menu { position: fixed; z-index: 1500; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); min-width: 216px; display: none; overflow: hidden; }
.shd-menu-head { padding: 10px 14px; font-weight: 700; font-size: 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted); }
.ship-menu-item { display: block; width: 100%; text-align: left; padding: 9px 14px; background: none; border: 0; font-size: 13px; cursor: pointer; color: var(--text); text-decoration: none; }
.ship-menu-item:hover { background: var(--surface-2); }
.ship-menu-item.menu-danger { color: #dc2626; }

/* shipment detail drawer */
.shd-drawer-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .25s; z-index: 1200; pointer-events: none; }
.shd-drawer-bg.on { opacity: 1; pointer-events: auto; }
.shd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 96vw); background: #fff; z-index: 1201; transform: translateX(105%); transition: transform .28s ease; display: flex; flex-direction: column; box-shadow: -8px 0 34px rgba(15, 23, 42, .2); }
.shd-drawer.open { transform: translateX(0); }
.shd-dr-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); background: #fbfcfe; }
.shd-dr-title { flex: 1 1 100%; min-width: 0; }
.shd-dr-t1 { font-size: 17px; font-weight: 800; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shd-dr-t1 .ship-id { font-size: 12px; }
.shd-dr-t2 { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.shd-dr-close { border: 1px solid var(--border); background: #fff; border-radius: 10px; width: 32px; height: 32px; cursor: pointer; color: var(--muted); font-weight: 700; }
.shd-dr-foot { flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.shd-dr-body { overflow-y: auto; padding: 16px 18px 30px; flex: 1; }
.shd-dr-body h4.t { margin: 14px 0 8px; }
.shd-item { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; }

/* rates + mgmt pages */
.shd-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.slab-row-head { display: flex; gap: 8px; padding: 2px 0 4px; align-items: center; }
.slab-row-head span { width: 130px; }
.slab-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.slab-row input { width: 130px; padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; }
.slab-row .slab-del { width: 34px; }
.shd-mgmt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

@media (max-width: 900px) {
  .shd-an-row, .shd-an-row.shd-rail, .shd-rates { grid-template-columns: 1fr; }
  .shd-kpis { grid-template-columns: repeat(2, 1fr); }
  .shd-perf-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-clock { display: none; }
  .shd-filters { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .shd-list { display: none; }
  .adm-prof-name { display: none; }
  .adm-prof { padding: 4px; }
}

/* ---------- marketplace product page (pp-*) ---------- */
.pp-wrap { max-width: 1240px; margin: 0 auto; padding: 18px 20px 40px; }
.pp-crumb { color: var(--muted); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px; line-height: 1.7; }
.pp-crumb a { color: var(--info); }

.pp-rating { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; cursor: pointer; }
.pp-rating b { color: var(--text); }
.pp-rating .gray { color: var(--muted); font-size: 13px; }

.pp-price { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.pp-price .price { font-size: 26px; font-weight: 800; color: var(--text); }
.pp-price .strike { font-size: 15px; }
.pp-price .off { background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pp-views { color: var(--muted); font-size: 12.5px; margin: 8px 0 4px; }

.btn.link { background: none; border: none; color: var(--info); padding: 4px 0; font-weight: 600; box-shadow: none; }
.btn.link:hover { text-decoration: underline; }

.btn-lg { padding: 13px 22px; font-size: 15px; }

.pp-stock { font-size: 13px; font-weight: 700; margin: 8px 0; }
.pp-stock.ok { color: var(--success); }
.pp-stock.low { color: #d97706; }
.pp-stock.out { color: var(--danger); }

.size-pill.dis, .color-dot.dis { opacity: .35; cursor: not-allowed; text-decoration: line-through; pointer-events: none; }

.pp-buy { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.pp-buy .btn-lg { flex: 1; min-width: 160px; }
.pp-wish.on { background: var(--pk-100); border-color: var(--pk); }

.main-img.pp-zoomable { cursor: zoom-in; }

/* delivery check */
.pp-pin { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px; margin-top: 14px; }
.pp-pin-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pp-pin-h > span { font-size: 22px; }
.pp-pin-h b { display: block; }
.pp-pin-row { display: flex; gap: 8px; align-items: center; }
.pp-pin-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); font-size: 14px; }
.pp-pin-stat { font-size: 13px; color: var(--muted); }
.pp-pin-msg { font-size: 13px; margin-top: 8px; }
.pp-pin-msg.ok { color: var(--success); }
.pp-pin-msg.err { color: var(--danger); }
.pp-pin-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.pp-pin-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.pp-pin-cell span { display: block; font-size: 12px; color: var(--muted); }
.pp-pin-cell b { font-size: 14px; }
.pp-pin-cell i { display: block; font-size: 11.5px; color: var(--success); font-style: normal; }
.pp-pin-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

/* trust badges */
.pp-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.trust-b { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.trust-b .ti { font-size: 18px; }
.trust-b b { display: block; font-size: 13px; margin: 4px 0 2px; }
.trust-b i { font-style: normal; font-size: 12px; color: var(--muted); }

/* tabs + sections */
.pp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 26px 0 20px; border-bottom: 2px solid var(--border); padding-bottom: 0; }
.pp-tab { border: none; background: none; font-size: 14px; font-weight: 600; color: var(--muted); padding: 10px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pp-tab:hover { color: var(--text); }
.pp-tab.on { color: var(--brand); border-bottom-color: var(--accent); }
.pp-tab-c { background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 12px; }

.pp-section { scroll-margin-top: 90px; margin-bottom: 28px; }
.pp-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pp-sec-h h2 { margin: 0; font-size: 20px; }
.pp-sec-h .btn-sm { flex-shrink: 0; }

.pp-bullets { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.pp-bullets li { display: flex; gap: 10px; align-items: flex-start; }
.pp-bullets li > span { font-size: 16px; }
.pp-bullets b { display: block; font-size: 13px; }
.pp-bullets i { font-style: normal; font-size: 13px; color: var(--muted); }

/* returns */
.pp-return { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pp-return-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.pp-return-item b { display: block; font-size: 14px; margin-bottom: 4px; }
.pp-return-item span { font-size: 13px; color: var(--muted); }
.pp-policy p { margin: 0 0 10px; font-size: 13.5px; }

/* seller card */
.pp-seller { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.pp-seller-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rav { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.rav.lg { width: 48px; height: 48px; font-size: 16px; }
.pp-store { font-size: 16px; }
.pp-seller-acts { display: flex; gap: 8px; margin-left: auto; }
.pp-seller-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 8px; font-size: 13px; color: var(--muted); }
.pp-seller-name { font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.pp-seller-name a { font-weight: 600; }

/* reviews */
.pp-rev-top { display: grid; grid-template-columns: 180px 1fr; gap: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.rev-score { text-align: center; border-right: 1px solid var(--border); padding-right: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.rev-score .big { font-size: 42px; font-weight: 800; }
.rev-dist { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.rev-bar { display: grid; grid-template-columns: 34px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.rb-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.rb-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.rb-n i { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 4px; }
.rev-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-top: 10px; }
.rev-top { display: flex; gap: 10px; }
.vp { font-size: 11.5px; font-weight: 700; color: var(--success); background: #dcfce7; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }

/* Q&A */
.qa-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-top: 10px; }
.qa-q { font-size: 14.5px; font-weight: 600; }
.qa-a { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.qa-pending { margin-top: 6px; }

/* sticky buy bar */
.pp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(16,24,40,.10); padding: 10px 16px; transform: translateY(110%); transition: transform .25s ease; display: flex; align-items: center; gap: 14px; }
.pp-sticky.show { transform: translateY(0); }
.pp-sticky-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pp-sticky-l img { width: 42px; height: 52px; object-fit: cover; border-radius: 8px; }
.pp-sticky-l b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sticky-l span { font-size: 13px; color: var(--muted); }
.pp-sticky-l span i { font-style: normal; color: #15803d; font-weight: 700; }
.pp-sticky-a { display: flex; gap: 8px; align-items: center; }

/* zoom lightbox */
.zb { text-align: center; }
.zb-close { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 15px; }
.zb-stage img { max-height: 74vh; margin: 0 auto; border-radius: 8px; }
.zb-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }

/* header search */
.hdr-search { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 14px; min-width: 200px; }
.hdr-search input { border: none; background: none; outline: none; padding: 7px 0; flex: 1; min-width: 0; font-size: 13.5px; }
.hdr-search .btn { border-radius: 999px; padding: 6px 10px; }

/* Between this band the header runs out of room: brand + nav (which also holds
   the Categories dropdown) + a search box + the action buttons have to share
   one row. With .nav at flex:1 it was allowed to shrink below its own content,
   so its last link ("New Arrivals") slid underneath the search box — measured
   as 391px of nav content in a 292px box at 912px wide.

   The nav is the thing that must stay intact (it is the site's navigation), so
   this block makes it inflexible and single-line, tightens the link padding,
   and hands the remaining space to the search box instead: the search is the
   only element here that works fine at a smaller width. Its basis is 0 rather
   than auto: flexbox decides what to wrap using each item's *hypothetical*
   size, so with basis auto the search's own ~200px content width was enough to
   push the action buttons onto a second row (118px header) even though there
   was room for them — at basis 0 it claims nothing and takes whatever is left.
   Below 900px the search
   already takes its own row (see @media max-width:900px) and above 1280px
   nothing has to give.

   This block deliberately sits AFTER the .hdr-search base rule above it: both
   are (0,1,0), so a block placed earlier in the file would silently lose the
   cascade and change nothing — the same trap that hid the burger button. */
@media (min-width: 901px) and (max-width: 1279px) {
  .header-inner { gap: 12px; }
  .nav { flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; }
  .nav > a { padding: 8px 7px; font-size: 13.5px; white-space: nowrap; }
  .nav-drop-btn { padding: 8px 9px; font-size: 13.5px; }
  .hdr-search { flex: 1 1 0px; min-width: 120px; max-width: 340px; }
}

@media (max-width: 900px) {
  .pp-rev-top { grid-template-columns: 1fr; }
  .rev-score { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 12px; }
  .pd-layout { grid-template-columns: 1fr; gap: 20px; }
  .hdr-search { order: 10; flex-basis: 100%; }
}

@media (max-width: 760px) {
  /* Two rows: logo + search on top, burger + cart beneath. Keeping all of it on
     one line squeezes the search box to a few characters on a phone, which makes
     it useless; the alternative of hiding search entirely is worse. */
  .hdr-burger { display: grid; }
  .header-inner { gap: 10px 12px; padding: 10px 14px; }
  .brand { order: 1; }
  .hdr-search { order: 2; flex: 1 1 auto; min-width: 0; }
  /* Forcing the actions onto their own row is what produces the second line. */
  .header-actions { order: 3; flex-basis: 100%; justify-content: space-between; }
  /* The nav becomes a panel rather than a wrapping row of links. */
  .site-header .nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; border-top: 1px solid var(--border); }
  .site-header.is-navopen .nav { display: flex; }
  .site-header .nav > a, .site-header .nav-drop-btn { padding: 11px 4px; font-weight: 600; }
  .nav-drop-menu { position: static; box-shadow: none; border: 0; display: none; padding-left: 10px; }
  .nav-drop.open .nav-drop-menu { display: grid; }
}
@media (max-width: 620px) {
  .pp-buy .btn-lg { min-width: calc(50% - 5px); }
  .pp-seller-acts { margin-left: 0; }
}

/* ============ product page v2 additions ============ */
.has-sticky-bar #app { padding-bottom: 96px; }

.tab-c { display: none; }
.tab-c.on { display: block; }

.pp-desc { font-size: 14.5px; line-height: 1.7; color: var(--text); }
/* Plain-text descriptions rely on their own newlines; rich text brings its own
   block spacing, so pre-line is reserved for the markup-free case. */
.pp-desc--plain { white-space: pre-line; }
.pp-desc > :first-child { margin-top: 0; }
.pp-desc > :last-child { margin-bottom: 0; }
.pp-desc p { margin: 0 0 10px; }
.pp-desc h2, .pp-desc h3, .pp-desc h4 { margin: 16px 0 8px; line-height: 1.35; font-weight: 700; }
.pp-desc h2 { font-size: 17px; }
.pp-desc h3 { font-size: 16px; }
.pp-desc h4 { font-size: 15px; }
.pp-desc ul, .pp-desc ol { margin: 0 0 10px; padding-left: 20px; }
.pp-desc li { margin: 3px 0; }
/* Seller copy nests a <p> inside each <li>; drop that inner margin so the
   bullet and its label sit on one line instead of drifting apart. */
.pp-desc li p, .pp-desc li > p:last-child { margin: 0; }
.pp-desc b, .pp-desc strong { font-weight: 700; }

.cardwrap { position: relative; }
.pc-wish { position: absolute; top: 10px; right: 10px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); box-shadow: var(--shadow); font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: transform .12s; }
.pc-wish:hover { transform: scale(1.12); }
/* The heart is an inline SVG, not a text emoji: emoji render in Apple's red on
   a Mac, Google's pink on an Android and an outline on Windows, so the one
   control a shopper taps most looked like it came from three different sites.

   The path carries no colour of its own — fill and stroke are `currentColor`,
   so each rule below is just "what colour is this button". Off is an outline
   (fill:none), on fills with the same colour. */
.pc-wish { color: var(--brand); }
.pc-wish svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .18s; }
.pc-wish.on { background: var(--pk-100); color: var(--pk); }
.pc-wish.on svg { fill: currentColor; }
.pc-soldout { position: absolute; inset: auto 0 0 0; background: rgba(15,23,42,.6); color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 4px; }

/* Same treatment for the two other wishlist surfaces. .store-fav--on and
   .spc__fav.on already set `color`, so neither needed a rule adding. */
.pp-wish svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; vertical-align: -3px; transition: fill .18s; }
.pp-wish.on { color: var(--pk-dark); }
.pp-wish.on svg, .store-fav svg, .spc__fav svg { fill: currentColor; stroke: currentColor; }
.store-fav svg, .spc__fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .18s; }

.rev-ph { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rev-ph img { width: 74px; height: 90px; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--border); }

[data-helpful].on { background: #ffe4e6; border-color: #fda4af; color: #be123c; }

.opt-row > b { min-width: 52px; }

.pp-sticky-a { flex-wrap: wrap; }
.pp-sticky-a .btn { min-width: 120px; }
.pp-sticky-a .icon-btn { flex: none; }

@media (max-width: 620px) {
  .pp-sticky-a .btn { min-width: 0; flex: 1; }
  .pp-buy .btn-outline { order: 4; }
}
.btn-outline { background: transparent; border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- product specifications editor (category-driven attributes) ----------
   A self-contained blue accent, deliberately local to this section: the rest of
   the marketplace keeps its navy brand, and the specification picker is the one
   place a seller makes many rapid choices, so it gets a stronger selection
   colour of its own. */
.spec-editor { --se-blue: #2563eb; --se-blue-dark: #1d4ed8; --se-blue-bg: #eff6ff; --se-blue-line: #bfdbfe; }

.spec-editor {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px 16px; margin: 4px 0 8px;
}
.spec-editor-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.spec-editor-headings { min-width: 0; }
.spec-editor-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.spec-editor-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.spec-badge {
  flex: none; background: var(--se-blue-bg); color: var(--se-blue-dark);
  border: 1px solid var(--se-blue-line); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
}

.spec-progress { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; }
.spec-progress-txt { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.spec-progress-bar { flex: 1; height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.spec-progress-bar i { display: block; height: 100%; background: var(--se-blue); border-radius: 999px; transition: width .18s ease; }

.spec-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; margin-top: 14px; }
.spec-attr {
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px 12px;
  background: var(--surface); transition: border-color .12s ease, box-shadow .12s ease;
}
.spec-attr.done { border-color: var(--se-blue-line); background: #fcfdff; }
.spec-attr-h { display: flex; align-items: baseline; gap: 5px; margin-bottom: 9px; }
.spec-attr-name { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.spec-req { color: #dc2626; font-weight: 800; font-size: 14px; line-height: 1; }
.spec-opt-tag {
  font-size: 10px; font-weight: 600; color: var(--muted); background: var(--surface-2);
  border-radius: 4px; padding: 1px 5px; text-transform: uppercase; letter-spacing: .04em;
}
.spec-attr-opts { display: flex; flex-wrap: wrap; gap: 6px; }

.spec-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--text);
  font-family: inherit; text-align: left; transition: all .12s ease;
}
.spec-chip:hover { border-color: var(--se-blue); color: var(--se-blue-dark); background: #fafcff; }
.spec-chip:focus-visible { outline: 2px solid var(--se-blue); outline-offset: 1px; }
.spec-chip.on { background: var(--se-blue-bg); border-color: var(--se-blue); color: var(--se-blue-dark); }
.spec-chip-tick { font-size: 11px; line-height: 1; font-weight: 800; color: var(--se-blue); }

.spec-empty { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* collapsed "additional specifications" area */
.spec-extra { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.spec-extra > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.spec-extra > summary::-webkit-details-marker { display: none; }
.spec-extra > summary::before { content: '\25B8'; font-size: 11px; color: var(--muted); transition: transform .15s ease; }
.spec-extra[open] > summary::before { transform: rotate(90deg); }
.spec-extra-t { font-size: 13px; font-weight: 700; }
.spec-extra-s { font-size: 12px; color: var(--muted); }
.spec-extra-body { margin-top: 11px; }
.spec-custom-rows { display: flex; flex-direction: column; gap: 7px; }
.spec-custom-row {
  display: flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 9px; padding: 7px 10px;
}
.spec-custom-name { font-size: 12.5px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.spec-custom-row .inp { flex: 1; min-width: 0; padding: 5px 9px; font-size: 12.5px; }
.spec-extra-add { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.spec-extra-add .inp { flex: 1 1 150px; min-width: 0; font-size: 12.5px; padding: 7px 10px; }

/* read-only name / value list on the storefront */
.spec-ro { margin: 0; display: grid; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.spec-ro-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; border-bottom: 1px solid var(--border); }
.spec-ro-row:last-child { border-bottom: 0; }
.spec-ro-row dt {
  background: var(--surface-2); font-weight: 600; font-size: 13.5px;
  padding: 10px 14px; border-right: 1px solid var(--border);
}
.spec-ro-row dd { margin: 0; font-size: 13.5px; padding: 10px 14px; }

@media (max-width: 720px) {
  .spec-editor { padding: 14px 14px 12px; }
  .spec-attrs { grid-template-columns: 1fr; }
  .spec-ro-row { grid-template-columns: 1fr; }
  .spec-ro-row dt { border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .spec-ro-row dd { padding-top: 6px; }
}

/* ---------- My Attributes: a seller's own value list for one name ---------- */
.at-vals { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.at-valx {
  background: none; border: 0; cursor: pointer; color: inherit; font-size: 11px;
  line-height: 1; padding: 0 0 0 6px; opacity: .7;
}
.at-valx:hover { opacity: 1; color: var(--danger, #b3261e); }

/* ---------- multiple product image URLs (repeater) ---------- */
.img-repeater { display: flex; flex-direction: column; gap: 8px; }
.img-row { display: flex; align-items: center; gap: 8px; }
.img-row .img-thumb {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 8px; border: 1px solid var(--border);
  object-fit: cover; background: var(--surface-2); display: block;
}
.img-row .img-thumb.ph { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); }
.img-row .img-inp { flex: 1; min-width: 0; }
.img-row .cover-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand); background: var(--surface-2); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.img-row .star { width: 32px; flex: 0 0 32px; padding: 0; }
.img-row .star.on { color: #f59e0b; border-color: #f59e0b; }
.img-row .del { color: var(--danger); }
.img-row .move { width: 28px; flex: 0 0 28px; padding: 0; }
.img-repeater-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.img-repeater-foot .count { font-size: 12px; color: var(--muted); }

/* ============ Seller Add Product page ============ */
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-bar h1 { font-size: 22px; margin: 0; }
.pf-bar-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-bar-r { display: flex; gap: 10px; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.pf-col-preview { position: sticky; top: 20px; }
.pf-preview-sticky { position: sticky; top: 16px; }
.pf-foot { margin-top: 18px; }
.pf-sec { margin-bottom: 16px; }
.pf-sec-body { padding: 16px 20px 20px; }
.pf-ic { font-size: 17px; }
.pf-num { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; margin-right: 4px; }
.pf-sec .card-h b { font-size: 15px; }
.pf-sec .card-h { display: flex; align-items: center; gap: 8px; }
.pf-subh { font-weight: 700; font-size: 13.5px; margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.pf-subh:first-child { margin-top: 0; }

.pf-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.pf-img-tile { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); aspect-ratio: 3 / 4; }
.pf-img-tile img { width: 100%; height: 100%; object-fit: cover; }
.pf-img-acts { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.6)); justify-content: center; }
.pf-icbtn { background: rgba(255,255,255,.92); border: none; border-radius: 8px; width: 26px; height: 26px; font-size: 13px; cursor: pointer; line-height: 1; }
.pf-icbtn:disabled { opacity: .4; cursor: default; }
.pf-icbtn.pf-del { background: #fecaca; color: #b91c1c; }
.pf-icbtn.pf-cover { background: #fef9c3; color: #a16207; }
.pf-cover-tag { position: absolute; top: 6px; left: 6px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.pf-colorinput { width: 46px !important; padding: 2px !important; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-on { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; }
.chip-clear { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.chip-x { border: none; background: none; color: inherit; margin-left: 4px; cursor: pointer; font-weight: 700; }

.pf-addrow { display: flex; gap: 8px; margin: 10px 0; align-items: center; }
.pf-addrow input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; }

.pf-crow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pf-swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); flex: none; }
.pf-crow input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.pf-cname { flex: 1; min-width: 90px; }
.pf-chex { width: 40px !important; padding: 2px !important; }
.pf-cimg { flex: 2; min-width: 120px; }

.pf-matrix { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pf-matrix th { background: var(--surface-2); padding: 8px 10px; text-align: center; font-size: 12px; }
.pf-matrix td { border-top: 1px solid var(--border); text-align: center; padding: 4px; }
.pf-matrix .pf-vrow { background: #f8fafc; text-align: left; white-space: nowrap; }
.pf-qty { width: 76px; text-align: center; padding: 7px; border: 1px solid var(--border); border-radius: 8px; }

.pf-sku-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pf-sku-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pf-sku-cell { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.pf-sku-lab { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pf-sku-inp { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.pf-duperr { color: var(--danger); font-size: 12.5px; margin-top: 10px; }

.pf-richtool { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; padding: 6px 8px; background: var(--surface-2); }
.pf-richtool button { border: none; background: none; padding: 6px 9px; cursor: pointer; border-radius: 6px; font-size: 13px; }
.pf-richtool button:hover { background: #e2e8f0; }
.pf-richtool .pf-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
.pf-richedit { min-height: 150px; border: 1px solid var(--border); border-radius: 0 0 10px 10px; padding: 12px 14px; outline: none; background: var(--surface); }
.pf-richedit:empty::before { content: attr(data-ph); color: var(--muted); }

.pf-customspec summary { cursor: pointer; font-size: 13px; color: var(--brand); margin-top: 6px; }
.pf-discrow { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }

/* live preview */
.pf-live { font-family: inherit; }
.pf-live-imgs { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pf-live-imgs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: none; }
.pf-live-imgs img.on { display: block; }
.pf-ph { aspect-ratio: 4 / 5; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: 34px; }
.pf-live-brand { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.pf-live-title { font-size: 15px; font-weight: 700; margin: 4px 0 6px; }
.pf-live-price { display: flex; gap: 8px; align-items: center; font-size: 19px; font-weight: 800; color: var(--accent); }
.pf-live-price s { color: var(--muted); font-weight: 400; font-size: 14px; }
.pf-live-off { background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.pf-live-return { font-size: 12.5px; color: #047857; margin: 4px 0; }
.pf-live-colors { display: flex; gap: 6px; margin: 8px 0; }
.pf-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); }
.pf-live-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-chip-sm { border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.pf-chip-ok { color: var(--text); border-color: var(--brand); }
.pf-live-hl { margin: 8px 0; padding-left: 18px; }
.pf-live-hl li { font-size: 12.5px; margin-bottom: 3px; }
.pf-live-desc { font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.pf-live-desc * { max-width: 100%; }
.pf-live-specs { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 8px; }
.pf-live-specs td { border-top: 1px solid var(--border); padding: 5px 4px; }
.pf-live-specs td:first-child { color: var(--muted); }
.pf-live-sku { font-family: ui-monospace, monospace; margin-top: 8px; word-break: break-word; }
.pf-live-status { font-size: 12px; margin-top: 10px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.pf-live-status.ok { color: var(--success); }
.pf-strike { text-decoration: line-through; }

@media (max-width: 980px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-col-preview { position: static; }
  .pf-preview-sticky { position: static; order: -1; }
}
@media (max-width: 620px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-bar { flex-direction: column; align-items: stretch; }
  .pf-bar-r { flex-direction: column; }
}

/* ---------- fabric library (seller console) ---------- */
.fb-layout { display: grid; grid-template-columns: 250px 1fr; gap: 20px; margin-top: 18px; align-items: start; }
.fb-tree { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; }
.fb-search { margin-bottom: 10px; }
.fb-search input { width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; outline: none; background: var(--surface); color: var(--text); }
.fb-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45, 55, 72, .12); }
.fb-tree-g { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; margin: 12px 6px 5px; }
.fb-tree-i { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: transparent; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.fb-tree-i:hover { background: var(--surface-2); }
.fb-tree-i.on { background: var(--brand); color: #fff; }
.fb-tl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-tc { font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0 7px; }
.fb-tree-i.on .fb-tc { background: rgba(255, 255, 255, .22); color: #fff; }

.fb-main { min-width: 0; }
.fb-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fb-head h2 { font-size: 19px; margin: 0; }
.fb-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 18px; }
.fb-add input[type="text"], .fb-add input:not([type]) { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; outline: none; background: var(--surface); color: var(--text); }
.fb-add input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45, 55, 72, .12); }
.fb-scope { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }

.fb-sec { margin-bottom: 22px; }
.fb-sec h3 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 6px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 13px; font-size: 13px; font-weight: 600; }
.fb-chip:hover { border-color: var(--brand); }
.fb-cn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-cu { font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0 6px; }
.fb-x { border: none; background: transparent; color: var(--muted); width: 20px; height: 20px; border-radius: 50%; font-size: 11px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fb-x:hover { background: var(--danger); color: #fff; }
.fb-chip:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45, 55, 72, .12); }

/* fabric picker inside the product form */
.pf-fab-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.pf-fab-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; font-weight: 600; }
.pf-fab-tag.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.pf-fab-tag button { border: none; background: transparent; color: inherit; opacity: .65; cursor: pointer; font-size: 11px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; }
.pf-fab-tag button:hover { opacity: 1; background: rgba(127, 127, 127, .22); }
.pf-fab-hint { font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .fb-layout { grid-template-columns: 1fr; }
  .fb-tree { position: static; max-height: 260px; }
}

/* ============================================================
   Product variants: colour chips, size chips, stock matrix
   Scoped to .pv-* so the rest of the seller form is untouched.
   ============================================================ */
.btn-pv { background: var(--info, #2563eb); border-color: var(--info, #2563eb); color: #fff; }
.btn-pv:hover { filter: brightness(1.08); }
.pv-addrow { align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pv-addrow input { flex: 1 1 180px; min-width: 0; }

.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: flex-start; }
.pv-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 6px; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; max-width: 100%;
}
.pv-chip-name {
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  padding: 0 2px; text-align: left; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 160px;
}
.pv-chip-name:hover { color: var(--info, #2563eb); text-decoration: underline; }
.pv-chip-size { padding: 6px 6px 6px 12px; background: #eff6ff; border-color: #bfdbfe; }
.pv-swatch {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.pv-x {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 999px; flex: none;
}
.pv-x:hover { background: #fee2e2; color: #b91c1c; }
.pv-sizes-picked:empty { display: none; }

.pv-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.pv-bulk-lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pv-bulk-in { width: 92px; text-align: center; }

.pv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.pv-matrix { min-width: 100%; }
.pv-matrix th { position: relative; }
.pv-matrix thead th .pv-colfill {
  display: block; margin: 3px auto 0; border: 0; background: none; cursor: pointer;
  color: var(--info, #2563eb); font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.pv-matrix thead th .pv-colfill:hover { background: #dbeafe; }
.pv-matrix .pv-corner { text-align: left; white-space: nowrap; position: sticky; left: 0; z-index: 2; }
.pv-vrow > .pv-vname { vertical-align: middle; }
.pv-matrix .pv-vrow .pv-swatch { display: inline-block; vertical-align: middle; margin-right: 7px; }
.pv-matrix tbody td { padding: 5px 6px; }
.pv-matrix tbody tr:hover td { background: #f8fafc; }
.pv-cell { text-align: center; }
.pv-qty { width: 72px; }
.pv-rowtot, .pv-coltot { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-rowtot b { display: inline-block; min-width: 26px; }
.pv-matrix .pv-rowfill {
  border: 0; background: none; cursor: pointer; color: var(--info, #2563eb);
  font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 6px; margin-left: 4px;
}
.pv-matrix .pv-rowfill:hover { background: #dbeafe; }
.pv-matrix tfoot th, .pv-matrix tfoot td {
  background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border);
  text-align: center; padding: 9px 6px; font-variant-numeric: tabular-nums;
}
.pv-matrix tfoot .pv-grand { background: #dbeafe; color: #1d4ed8; }

@media (max-width: 640px) {
  .pv-qty { width: 58px; padding: 6px 4px; }
  .pv-matrix { font-size: 12px; }
  .pv-chip-name { max-width: 92px; }
}

/* ============================================================
   Colour picker modal
   ============================================================ */
.cp-modal { max-width: 620px; width: 100%; }
.cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cp-head h3 { margin: 0; }
.cp-x { border: 0; background: none; font-size: 15px; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.cp-x:hover { background: #f1f5f9; }
.cp-body { display: flex; gap: 18px; align-items: flex-start; }
.cp-left { display: flex; gap: 12px; flex: none; }
.cp-spectrum {
  position: relative; width: 190px; height: 190px; border-radius: 12px; cursor: crosshair;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  touch-action: none; border: 1px solid var(--border);
}
.cp-marker {
  position: absolute; width: 15px; height: 15px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); pointer-events: none;
}
.cp-hue {
  position: relative; width: 15px; height: 190px; border-radius: 8px; cursor: ns-resize; touch-action: none;
  background: linear-gradient(to bottom, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
  border: 1px solid var(--border);
}
.cp-hmark {
  position: absolute; left: 50%; width: 21px; height: 7px; margin-left: -10px; margin-top: -3px;
  border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none;
}
.cp-right { flex: 1 1 auto; min-width: 0; }
.cp-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cp-chip { width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--border); flex: none; }
.cp-pvhex { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 700; }
.cp-lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.cp-in { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; }
.cp-hexin { font-family: ui-monospace, monospace; text-transform: uppercase; }
.cp-pop { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.cp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.cp-swatch {
  position: relative; height: 30px; border-radius: 7px; border: 1px solid var(--border);
  cursor: pointer; padding: 0; overflow: hidden;
}
.cp-swatch span {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 7px;
  font-size: 11px; font-weight: 600; opacity: 0; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85); transition: opacity .12s;
}
.cp-swatch:hover span { opacity: 1; }
.cp-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.cp-done { background: var(--info, #2563eb); border-color: var(--info, #2563eb); color: #fff; }

@media (max-width: 560px) {
  .cp-body { flex-direction: column; align-items: stretch; }
  .cp-left { justify-content: center; }
  .cp-spectrum { width: 100%; max-width: 260px; height: 170px; }
  .cp-hue { height: 170px; }
}

/* ---- My Attributes: a card per attribute name, with its scope switch ---- */
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.at-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; }
.at-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.at-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.at-used { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.at-inline { width: 100%; margin-top: 10px; }

/* Product form Section 7: the specification chips are styled above in the
   "specification chips" block; these leftovers back the fabric suggestions
   that come from the seller's own fabric library. */
.sp-sug { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 3px 10px; margin: 3px 4px 0 0; font-size: 12px; font-weight: 600; cursor: pointer; }
.sp-sug:hover:not(:disabled) { border-color: var(--brand); }
.sp-sug:disabled { opacity: .45; cursor: not-allowed; }

/* live gateway note on the checkout page */
.pay-note { border: 1.5px solid var(--border); border-radius: var(--radius); background: #f8fafc; padding: 14px; }

/* inline status banners (admin gateway state, form errors) */
.alert { border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.alert code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.alert-success { border-left-color: var(--success); background: #f0fdf4; }
.alert-warn { border-left-color: #d97706; background: #fffbeb; }
.alert-danger { border-left-color: var(--danger); background: #fef2f2; }
.alert-info { border-left-color: #2563eb; background: #eff6ff; }

/* ============================================================
   SELLER STORES - directory, storefront and store-scoped cards
   ============================================================ */

/* ---------- directory ---------- */
.stores-hero { text-align: center; padding: 28px 0 6px; }
.stores-hero h1 { font-size: 32px; }
.stores-hero p { margin: 0 0 18px; }
.stores-search { display: flex; gap: 8px; max-width: 620px; margin: 0 auto 14px; }
.stores-search input { flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.stores-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.stores-controls select { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.stores-hero .chips { justify-content: center; }

/* Cards and rows share the same trust and favourite affordances; the row is the
   denser variant used in the full list. */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.store-list { display: grid; gap: 14px; }

.store-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: .15s; display: flex; flex-direction: column; }
.store-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.store-card__cover { position: relative; display: block; }
.store-card__cat { position: absolute; left: 10px; bottom: 10px; background: rgba(20, 28, 38, .78); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.store-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.store-card__id { display: flex; align-items: center; gap: 10px; }
.store-card__name { font-weight: 800; color: var(--text); font-size: 15px; }
.store-card__cats { display: flex; gap: 6px; flex-wrap: wrap; }
.store-card__body .btn-block { margin-top: auto; }

.store-row { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; transition: .15s; }
.store-row:hover { box-shadow: var(--shadow); border-color: #d6dae1; }
.store-row__main { flex: 1; min-width: 0; }
.store-row__name { font-weight: 800; color: var(--text); font-size: 16px; }
.store-row__cats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.store-row__previews { display: flex; gap: 8px; }
.store-row__img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--border); }
.store-row__cta { display: flex; align-items: center; gap: 10px; }

/* ---------- store identity ---------- */
.store-cover { width: 100%; height: 130px; object-fit: cover; background: var(--surface-2); }
.store-cover--tall { height: 240px; }
.store-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); background: var(--surface-2); flex: none; display: inline-grid; place-items: center; font-weight: 800; color: var(--muted); }
.store-logo--lg { width: 96px; height: 96px; border-width: 4px; font-size: 26px; }
.store-thumb--fallback { display: inline-grid; place-items: center; }

/* The verified tick is a marketplace trust signal: it is only ever rendered from
   the server's boolean, never from anything a seller can submit. */
.store-verified { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--info); color: #fff; font-size: 10px; font-weight: 900; vertical-align: middle; }
.store-verified--lg { width: 22px; height: 22px; font-size: 13px; }

.store-fav { background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font-size: 15px; color: var(--muted); flex: none; }
.store-fav:hover { border-color: #d6dae1; color: var(--danger); }
.store-fav--on { color: var(--danger); border-color: #f3c6c6; background: #fdf2f2; }
.store-card__id .store-fav { margin-left: auto; }

/* ---------- storefront ---------- */
.storefront__cover { position: relative; background: var(--surface-2); }
/* The banner is a fixed-ratio box rather than an <img> with a height, so a
   seller-uploaded image of any shape is cropped with object-fit rather than
   stretched. aspect-ratio holds the crop proportional at every viewport width,
   which a fixed or clamped height cannot: the height is then derived, not chosen. */
.storefront__cover .store-cover--hero { width: 100%; aspect-ratio: 3 / 1; height: auto; object-fit: cover; border-radius: 0 0 var(--radius) var(--radius); }
.storefront__coverfade { position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(transparent, rgba(16, 24, 40, .25)); pointer-events: none; }
.storefront__back { position: absolute; left: 18px; top: 16px; background: rgba(255, 255, 255, .92); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; }

.storefront__id { display: flex; gap: 20px; align-items: flex-end; margin-top: -44px; position: relative; z-index: 1; }
.storefront__meta { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.storefront__meta h1 { font-size: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.storefront__rating { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; flex-wrap: wrap; }
/* "No ratings yet" read as a void; "New Store" reads as a status. */
.storefront__newbadge { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; color: var(--muted); }
.storefront__stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 6px; }
.storefront__stats b { color: var(--text); }
.storefront__catline { margin-top: 8px; font-size: 13px; color: var(--muted); }
.storefront__catline b { color: var(--text); }
.storefront__about { margin: 10px 0 0; }
.storefront__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Tabs stick under the site header so a long catalogue can be navigated without
   scrolling back up. Scrolls horizontally on a phone rather than wrapping. */
.storefront__nav { display: flex; gap: 4px; margin: 20px 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; overflow-x: auto; position: sticky; top: 8px; z-index: 20; scrollbar-width: none; }
.storefront__nav::-webkit-scrollbar { display: none; }
.storefront__tab { border: 0; background: transparent; padding: 9px 14px; border-radius: var(--radius-s); font-weight: 600; color: var(--muted); white-space: nowrap; }
.storefront__tab:hover { background: var(--surface-2); }
.storefront__tab.is-on { background: var(--brand); color: #fff; }
.storefront__tab .caret { font-size: 10px; opacity: .7; }

/* Categories live in a dropdown rather than as one tab each: a store with eight
   categories would push Reviews and About off the edge of the bar. */
.storefront__dropdown { position: relative; flex: none; }
.storefront__dmenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 30; }
.storefront__dmenu.is-open { display: grid; }
.storefront__ditem { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: var(--radius-s); font-weight: 600; color: var(--text); }
.storefront__ditem:hover { background: var(--surface-2); }

/* ---------- offer strip ---------- */
.promo-carousel { position: relative; margin-top: 18px; border-radius: var(--radius); background: linear-gradient(120deg, var(--brand-2), var(--brand)); color: #fff; overflow: hidden; }
.promo-carousel__track { position: relative; }
.offer-slide { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.offer-slide.is-off { display: none; }
.offer-slide__title { font-size: 20px; font-weight: 900; letter-spacing: .3px; }
.offer-slide__sub { opacity: .88; font-size: 13px; margin-top: 2px; }
.promo-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .2); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1; }
.promo-carousel__nav:hover { background: rgba(255, 255, 255, .34); }
.promo-carousel__nav--prev { left: 8px; }
.promo-carousel__nav--next { right: 8px; }
.promo-carousel__dots { display: flex; gap: 6px; justify-content: center; padding: 0 0 12px; }
.promo-carousel__dot { width: 7px; height: 7px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .45); padding: 0; }
.promo-carousel__dot.is-on { background: #fff; }
/* With a single offer the arrows would be a control with nothing to control. */
.promo-carousel:not(.is-multi) .offer-slide { padding-right: 24px; }

.offer-list { display: grid; gap: 12px; margin-top: 18px; }
.offer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 14px 18px; }
.offer-row__title { font-weight: 800; }
.offer-row__off { font-weight: 900; color: var(--success); font-size: 18px; }

.policy-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.policy-strip__item { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; }

.store-about { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.store-about--inline { display: block; }
.store-about__main h4 { margin: 20px 0 8px; }
.store-about__side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.store-about__side ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

.review-summary { display: grid; grid-template-columns: 200px 1fr; gap: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.review-summary__score { text-align: center; }
.review-score { font-size: 42px; font-weight: 900; line-height: 1; }
.review-bar { display: grid; grid-template-columns: 30px 1fr 40px; align-items: center; gap: 10px; }
.review-bar + .review-bar { margin-top: 6px; }
.review-bar__track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.review-bar__fill { height: 100%; background: var(--accent); }
.review-list { display: grid; gap: 12px; margin-top: 18px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.review-card p { margin: 8px 0 0; }
.review-verified { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--success); }
.review-verified:empty { display: none; }
.review-reply { margin-top: 10px; background: var(--surface-2); border-radius: var(--radius-s); padding: 10px 12px; font-size: 13px; }

/* ---------- store filters ----------
   A left rail beside the results on desktop. The same markup becomes a
   slide-over drawer on a phone, so there is one filter implementation and only
   the layout changes. */
.sf-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 18px 0 14px; }
.sf-toolbar__right { display: flex; gap: 8px; align-items: center; }
.sf-toolbar select { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.sf-drawer-btn { display: inline-flex; align-items: center; gap: 7px; }
.sf-ic { flex: none; }
.sf-counthead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
/* The grid is the only column: filters are an overlay, so there is no rail to
   reserve space for and the products span the full page at every breakpoint. */
.sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 18px; }

/* ---------- the filter drawer ----------
   An overlay panel rather than a column in the grid: it is taken out of flow and
   fixed to the right edge, so the product grid keeps the full page width whether
   the panel is open or shut. It is hidden with the `hidden` attribute rather than
   left parked off screen, so a shut panel is out of the tab order, out of the
   accessibility tree and no longer swallowing clicks meant for the grid. The cost
   is that the close is immediate while the open still slides in: a display:none
   element cannot be transitioned. */
.sf-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 90; animation: sf-fade .18s ease; }
.sf-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 91; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; box-shadow: -8px 0 24px rgba(16, 24, 40, .12); }
.sf-drawer.is-shown { transform: translateX(0); }
.sf-drawer[hidden], .sf-scrim[hidden] { display: none; }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
.sf-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; border-bottom: 1px solid var(--border); flex: none; }
.sf-drawer-x { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
/* The scroll area takes all the spare height, so the action row below it stays
   put however long the option list grows. */
.sf-drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; }
.sf-drawer-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
body.sf-drawer-open { overflow: hidden; }

/* Collapsible sections. The head is a real button so it is reachable by keyboard
   and carries aria-expanded for the panel state. */
.sf-fg { border-bottom: 1px solid var(--border); }
.sf-fg:last-child { border-bottom: 0; }
.sf-fg__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 14px 0; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--text); text-align: left; }
.sf-fg__caret { color: var(--muted); transition: transform .18s; }
.sf-fg.is-open .sf-fg__caret { transform: rotate(180deg); }
.sf-fg__body { padding-bottom: 14px; }
/* Spelled out rather than left to the user-agent rule, because .sf-drawer is a
   flex container and a collapsed body must leave the layout as well as the
   screen: a closed section takes no vertical space. */
.sf-fg__body[hidden] { display: none; }
.sf-fopts { display: grid; gap: 2px; max-height: 190px; overflow-y: auto; }
/* A whole row is the target, not the checkbox alone. */
.sf-fopt { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: var(--radius-s); font-size: 13px; cursor: pointer; }
.sf-fopt:hover { background: var(--surface-2); }
.sf-fopt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-fopt i { font-style: normal; font-size: 11px; color: var(--muted); }
.sf-drawer .chips { max-height: 190px; overflow-y: auto; }
.sf-drawer input[type="number"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
/* Two inputs in a row, sized to share the space between them. */
.price-inputs { display: flex; align-items: center; gap: 6px; }
.price-inputs input { width: auto; flex: 1; min-width: 0; }
.chip-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-color i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }

/* ---------- store-scoped product card ----------
   Carries the same buying actions as the main grid (wishlist, variants, cart)
   so a shopper never has to leave the store to act on a product. */
.spc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.spc__media { position: relative; background: var(--surface-2); }
.spc__link { display: block; }
.spc__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* The second image is revealed on hover, which is the cheapest way to give a
   card more than one view without a carousel dependency. Disabled on touch,
   where there is no hover and a stuck hover-image looks like a broken card. */
.spc__img--b { position: absolute; inset: 0; opacity: 0; transition: opacity .18s; }
.spc:hover .spc__img--b { opacity: 1; }
.spc__off { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--success); color: #fff; }
.spc__fav { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .94); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px; color: var(--muted); }
.spc__fav.on { color: var(--danger); }
.spc__qv { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(255, 255, 255, .94); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 7px; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .18s; }
.spc:hover .spc__qv, .spc__qv:focus-visible { opacity: 1; }
.spc__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px 16px 16px; }
/* The name is clamped to two lines so cards in a row stay the same height
   whatever the product is called, and the body uses gap rather than per-element
   margins so the vertical rhythm is even. */
.spc__name { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spc__name a { color: var(--text); }
.spc__price { display: flex; gap: 8px; align-items: baseline; }
/* Stock is stated in words, because a shopper should not have to infer
   availability from an empty cart. */
.spc__stock { font-weight: 700; color: var(--success); }
.spc__stock.is-low { color: var(--accent); }
.spc__stock.is-out { color: var(--muted); }
.spc__colors, .spc__sizes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.spc__swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.spc__swatch.on { border-color: var(--text); }
.spc__size { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-s); padding: 3px 9px; font-size: 12px; font-weight: 600; }
.spc__size.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Overflow is hidden with CSS rather than omitted from the markup, so "+N"
   can reveal the real options in place instead of a popover. */
.spc__colors.is-collapsed .spc__swatch:nth-child(n+5),
.spc__sizes.is-collapsed .spc__size:nth-child(n+5) { display: none; }
.spc__more { border: 1px dashed var(--border); background: var(--surface); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; color: var(--muted); }
/* margin-top:auto pins the actions to the bottom, so the two buttons line up
   across a row whatever height the product name and swatches make the card. */
.spc__cta { margin-top: auto; padding-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.spc__cta .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- home tab shelves ---------- */
.linkbtn { border: 0; background: transparent; color: var(--brand); font-weight: 700; font-size: 13px; }
.cat-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-tile { display: grid; gap: 6px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; transition: .15s; }
.cat-tile:hover { border-color: #d6dae1; box-shadow: var(--shadow); transform: translateY(-2px); }
.cat-tile__img { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-s); background: var(--surface-2); overflow: hidden; }
.cat-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile__name { font-weight: 800; color: var(--text); }
.cat-tile__n { color: var(--muted); }

/* ---------- share / contact modals ---------- */
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.share-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 8px; font-size: 13px; font-weight: 700; }
.share-btn:hover { border-color: #d6dae1; background: var(--surface-2); }
.share-url { margin-bottom: 12px; }
.share-url input { width: 100%; padding: 9px 11px; border: 1px dashed var(--border); border-radius: var(--radius-s); background: var(--surface-2); font-size: 13px; }
.field { display: grid; gap: 5px; margin: 12px 0; }
.field > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); font: inherit; }


/* ---------- quick view ---------- */
.qv { display: grid; grid-template-columns: 200px 1fr; gap: 18px; }
.qv__media > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-s); background: var(--surface-2); }
.qv__thumbs { display: flex; gap: 6px; margin-top: 8px; }
.qv__thumbs img { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; }
.qv__body h3 { font-size: 17px; }
.qv .opt-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .storefront__id { flex-direction: column; align-items: flex-start; margin-top: -36px; }
  .store-about, .review-summary { grid-template-columns: 1fr; }
  .store-row__previews { display: none; }
  /* 2.5:1 on tablet: 3:1 is too letterboxed once the page narrows. */
  .storefront__cover .store-cover--hero { aspect-ratio: 5 / 2; }
  /* 3 across on tablet: 4 leaves each card too narrow for a price and a Buy
     button to sit side by side without wrapping. */
  .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .stores-search { flex-direction: column; }
  /* 2:1 on phones. Any taller and the logo overlaps most of the visible page. */
  .storefront__cover .store-cover--hero { aspect-ratio: 2 / 1; }
  .storefront__nav { top: 0; }
  .store-row { flex-wrap: wrap; }
  .store-row__cta { width: 100%; justify-content: space-between; }
  .qv { grid-template-columns: 1fr; }

  /* 2 across on a phone. Search takes its own row, then Filter and Sort share
     the next one so both stay reachable without a horizontal scroll. */
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sf-toolbar { flex-wrap: wrap; }
  .sf-toolbar .search-box { flex: 1 1 100%; }
  .sf-toolbar__right { width: 100%; justify-content: space-between; }
  .sf-toolbar__right select { flex: 1; }
  /* The panel keeps the right-edge form on a phone too, only wider, so the close
     button stays where the shopper's thumb already expects it. */
  .sf-drawer { width: 100%; max-width: none; }

  .storefront__actions .btn { flex: 1 1 auto; }
  .offer-slide { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
  .offer-slide__title { font-size: 17px; }
  .share-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-rail { grid-template-columns: repeat(2, 1fr); }
  /* Hover has no meaning on touch: a tap that leaves the second image showing
     reads as a broken card, so only the front image is ever shown. */
  .spc:hover .spc__img--b { opacity: 0; }
  .spc__qv { display: none; }
  .spc__fav { width: 36px; height: 36px; }
}

/* Touch devices that report no hover keep the single-image card too. */
@media (hover: none) {
  .spc:hover .spc__img--b { opacity: 0; }
  .spc__qv { display: none; }
}

/* The hero sits inside .wrap so it shares the 1240px content column with every
   other homepage block; it is never full-bleed and never 100vw, so a wide promo
   cannot push the page sideways. */
.hero-carousel { position: relative; width: 100%; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* Height comes from the artwork ratio alone. Because the box and the 2048x746
   artwork share a ratio, contain fills it edge to edge: no crop, no letterbox. */
.hero-slides { position: relative; width: 100%; aspect-ratio: 2048 / 746; overflow: hidden; background: var(--surface-2); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease-in-out; z-index: 1; }
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide-link { display: block; width: 100%; height: 100%; }
/* The promo artwork is authored at 2048x746 and carries its own text, so it is
   fitted whole rather than cropped: a cover here would slice off the branding
   on one axis. The container matches the artwork ratio, so contain fills it. */
.hero-slide-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--surface-2); }
.hero-slide-fallback { width: 100%; height: 100%; background: linear-gradient(135deg,#1a2431,#2d3748); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.hero-arrow:hover { background: rgba(0,0,0,.6); }
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
.hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; }
.hero-dot.active { background: rgba(255,255,255,.95); }

/* ---------- compact category navigation below hero ---------- */
/* Quick jump rail, not a discovery section: the card holds every chip in one
   row so it stays ~120px tall, and only the rail scrolls. Overflow is contained
   by the rail itself, so the page never gains a horizontal scrollbar. */
.catstrip { position: relative; margin: 16px auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 0; }
.catstrip__rail { display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 0 44px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
/* The rail is a control, not content: a visible scrollbar under a row of circles
   reads as a mistake, and the arrows already signal that it scrolls. */
.catstrip__rail::-webkit-scrollbar { display: none; }
/* 152px a chip is what lands 6-7 of them across the 1200px content column, which
   is the density a marketplace rail reads as. The circle stays small, so the extra
   width becomes the airy gap between categories rather than a bigger thumbnail. */
.catstrip__item { flex: 0 0 auto; width: 152px; scroll-snap-align: center; display: grid; justify-items: center; gap: 9px; padding: 2px 0; border-radius: 14px; transition: background .15s; }
.catstrip__item:hover { background: var(--surface-2); }
.catstrip__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.catstrip__thumb { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#eef1f5,#dfe4ea); border: 1px solid var(--border); }
.catstrip__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The glyph sits under the photo and is simply covered by it, so a category with
   no image (or one that 404s, which drops the img) still reads as a chip. */
.catstrip__glyph { font-size: 26px; line-height: 1; }
.catstrip__name { font-size: 13px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.25; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catstrip__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; z-index: 2; box-shadow: var(--shadow); padding: 0; }
.catstrip__nav:hover { background: var(--surface-2); }
.catstrip__nav--prev { left: 8px; }
.catstrip__nav--next { right: 8px; }
.catstrip__nav[disabled] { opacity: .35; cursor: default; }
/* Narrower desktop/tablet: step the chip back down so five or six still fit on
   screen instead of dropping to three and hiding most of the rail behind arrows. */
@media (max-width: 900px) {
  .catstrip__item { width: 132px; }
  .catstrip__thumb { width: 68px; height: 68px; }
}
@media (max-width: 720px) {
  .catstrip { border-radius: 14px; padding: 12px 0; }
  .catstrip__item { width: 104px; gap: 7px; }
  .catstrip__thumb { width: 56px; height: 56px; }
  .catstrip__glyph { font-size: 20px; }
  .catstrip__name { font-size: 12px; }
  .catstrip__rail { padding: 0 34px; }
  /* Arrows stay inside the card so they can never widen the page on a phone. */
  .catstrip__nav { width: 28px; height: 28px; }
  .catstrip__nav--prev { left: 4px; }
  .catstrip__nav--next { right: 4px; }
}

/* ===================================================================
   Category landing page (Women and the other main categories)
   A fashion-forward storefront block: hero, visual advertisements,
   subcategory strip, benefit strip, then the shared filters + grid.
   =================================================================== */
:root {
  /* The old Skyrmex pink is retired. With one accent in the system, every sale
     badge, quick-add button and wishlist state reads gold instead — so these
     are the gold family living under their original names.

     The names are kept on purpose: they appear in ~25 rules across the
     category, product and Top Deals blocks, and renaming them for a colour
     change is churn with no visual payoff. */
  --pk: #b08d3f;
  --pk-dark: #8f7031;
  --pk-50: #f8f4ea;
  --pk-100: #f1e9d8;
  --pk-200: #e2d4b6;
  --peach: #fbf6ee;
}

/* ---------- breadcrumb ---------- */
/* A location trail, not a heading: small, muted, and one tap per level. The
   current level is text carrying aria-current rather than a link to itself, and
   the row scrolls inside its own box — so a long trail on a 320px phone widens
   the trail, never the page. */
.crumbs { margin: 14px 0 12px; }
.crumbs__list { display: flex; align-items: center; margin: 0; padding: 3px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.crumbs__list::-webkit-scrollbar { display: none; }
.crumbs__item { display: inline-flex; align-items: center; flex: none; font-size: 13px; line-height: 1.45; white-space: nowrap; }
.crumbs__sep { margin: 0 7px; color: #b8bec8; font-size: 15px; }
.crumbs__item a { color: var(--muted); }
.crumbs__item a:hover { color: var(--text); text-decoration: none; }
.crumbs__item a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.crumbs__cur { color: var(--text); font-weight: 650; }

/* ---------- Hot This Week (category page) ----------
   A horizontal rail of the category's own promotional tiles — one photo per
   card, no copy under it. Card width is a *fraction* of the rail rather than a
   fixed pixel count, so one tier shows about five cards on a wide screen,
   three-to-four on a tablet and two and a half on a phone: two whole tiles plus
   the slice of the next one, which is what tells a shopper the row scrolls,
   before they ever reach an arrow. Arrows live in the gutters above 768px,
   where there is room for them, and are hidden below it so nothing overlays a
   card a thumb is about to tap. */
.hotwk__title h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.hotwk__icon { font-size: 19px; line-height: 1; }
.hotwk__sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.hotwk .link-all { flex: none; white-space: nowrap; }
.hotwk__wrap { position: relative; }
.hotwk__rail { --hw-per: 2.5; --hw-gap: 12px; display: flex; gap: var(--hw-gap); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0; }
.hotwk__rail::-webkit-scrollbar { display: none; }
.hotwk__rail:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.hwcard { flex: 0 0 calc((100% - (var(--hw-per) - 1) * var(--hw-gap)) / var(--hw-per)); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.hwcard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Inset rather than outset: the rail scrolls, and an outline hanging outside the
   card would simply be clipped by it. */
.hwcard:focus-visible { outline: 2px solid var(--pk); outline-offset: -3px; }
/* A tile is a photo and nothing else — the offer band and caption that used to
   sit under it are gone, so the media is now the whole card. If the artwork
   404s the frame shows a quiet glyph rather than a blank white square. */
.hwcard__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); }
.hwcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hwcard:hover .hwcard__media img { transform: scale(1.05); }
.hwcard__media:empty::after { content: '\1F45C'; display: grid; place-items: center; height: 100%; font-size: 34px; opacity: .35; }

@media (min-width: 560px) { .hotwk__rail { --hw-per: 2.6; } }
@media (min-width: 768px) {
  .hotwk__rail { --hw-per: 3.4; }
  /* The gutter is 44px wide, so a 36px button at 8px sits exactly inside it and
     still clears the cards — a comfortable target for a tablet thumb. */
  .hotwk__wrap { padding: 0 44px; }
  .hotwk__wrap .catstrip__nav { width: 36px; height: 36px; font-size: 13px; }
}
@media (min-width: 1024px) { .hotwk__rail { --hw-per: 4.4; } }
/* Desktop starts at 1280 — the width a laptop actually is, not the width a
   wide monitor happens to be. Below this the rail still reads as a tablet
   (3-4 cards), which is honest for a 1024 landscape screen; at 1280 and up it
   lands on the five the desktop layout promises. */
@media (min-width: 1280px) { .hotwk__rail { --hw-per: 5; } }
@media (max-width: 767.98px) { .hotwk__wrap .catstrip__nav { display: none; } }

.wcat-head .wch { margin-top: 6px; }

/* ---------- hero ---------- */
.wch .hero-slide { display: flex; align-items: center; }
.wch-slide { position: relative; display: flex; align-items: center; width: 100%; height: 100%; min-height: 100%; text-decoration: none; }
.wch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wch-img--bare { background: linear-gradient(115deg, var(--pk-100), var(--peach)); }
.wch-copy { position: relative; z-index: 2; max-width: 620px; padding: clamp(22px, 4vw, 48px); }
.wch-copy h1, .wch-copy h2 { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.08; margin: 0 0 8px; color: var(--text); letter-spacing: -.01em; }
.wch-copy p { margin: 0 0 18px; color: var(--muted); font-size: clamp(14px, 1.3vw, 16px); }
.wch-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--pk-dark); margin-bottom: 10px; }
.wch-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--pk); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 24px; border-radius: 999px; box-shadow: 0 8px 20px rgba(236, 72, 153, .28); transition: .18s; }
.wch-cta:hover { background: var(--pk-dark); color: #fff; text-decoration: none; transform: translateY(-2px); }
/* The fallback hero is a designed pink/peach/cream panel, with the category
   photo (if the admin set one) washed back behind the copy. */
.wch-fb { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; height: 100%; background-color: #fff7f0; background-image: linear-gradient(100deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .82) 46%, rgba(255, 255, 255, .35) 72%), var(--wch-img, none); background-size: cover; background-position: center; }
/* Three tilted photo cards built from the category's own images, so the right
   half of the hero is the merchandise rather than empty space. */
.wch-art { position: relative; flex: 0 0 42%; max-width: 460px; height: 100%; }
.wch-art img { position: absolute; top: 50%; left: calc(var(--i, 0) * 27%); width: 42%; aspect-ratio: 3 / 4; object-fit: cover; border: 5px solid #fff; border-radius: 16px; box-shadow: var(--shadow-lg); transform: translateY(-50%) rotate(calc((var(--i, 0) - 1) * 7deg)); }
/* Copy sitting on an admin-supplied artwork: a scrim keeps it readable on any
   photo, and it only renders when the banner actually has a title/subtitle. */
.wch-copy--onimg { position: absolute; inset: auto 0 0 0; max-width: none; background: linear-gradient(transparent, rgba(17, 24, 39, .78)); padding: 56px clamp(22px, 4vw, 48px) clamp(22px, 3vw, 36px); }
.wch-copy--onimg h1, .wch-copy--onimg h2 { color: #fff; }
.wch-copy--onimg p { color: #f3d9e4; margin-bottom: 14px; }

/* ---------- promotional advertisement cards ---------- */
.wads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.wad { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--wad-tint, var(--pk-100)), var(--peach)); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; }
.wad:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wad-media { position: absolute; inset: 0; display: block; overflow: hidden; }
.wad-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.wad:hover .wad-media img { transform: scale(1.06); }
.wad-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; opacity: .3; }
.wad-body { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 44px 16px 16px; background: linear-gradient(transparent, rgba(17, 24, 39, .82)); color: #fff; }
.wad-title { font-size: clamp(15px, 1.5vw, 20px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.wad-sub { font-size: 13px; font-weight: 600; color: #ffd9e7; }
.wad-cta { margin-top: 8px; background: #fff; color: var(--pk-dark); font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; }
.wads--mid { grid-template-columns: repeat(2, 1fr); }
.wads--mid .wad { aspect-ratio: 16 / 6.4; }

/* ---------- service / benefit strip ---------- */
.wbenefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 20px; background: var(--pk-50); border: 1px solid var(--pk-100); border-radius: 18px; padding: 16px 18px; }
.wben { display: flex; align-items: center; gap: 12px; padding: 6px 12px; }
.wben + .wben { border-left: 1px solid var(--pk-100); }
.wben-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #fff; border: 1px solid var(--pk-100); color: var(--pk); }
.wben-ic svg { width: 21px; height: 21px; }
.wben-t { min-width: 0; }
.wben-t b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.wben-t span { display: block; font-size: 12.5px; color: var(--muted); }

/* ---------- deal shelves (mid-page ads + top deals) ---------- */
.wcat-tail .wads { margin-top: 26px; }
.wsec-band { background: linear-gradient(180deg, var(--pk-50), #fff 70%); border: 1px solid var(--pk-100); border-radius: 18px; padding: 18px; }
.wsec .section-head h2 { position: relative; padding-left: 14px; }
.wsec .section-head h2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--pk); }

/* ---------- product card: badges, wishlist, quick add ---------- */

/* The quick-add button sits ON the photograph, which the markup doesn't express:
   .pc-actions is a sibling of .pc-media, not a child — a <button> cannot legally
   live inside the <a> that wraps the image. Grid buys the overlap without
   restructuring markup that five different views all render:

     row 1 = .pc-media, with .pc-actions forced into that same cell and pinned
             to its bottom edge      row 2 = .pc-body

   Placement is explicit on every item on purpose: auto-placement would put the
   four children in four separate rows and drop the button below the image
   again. .pc-wish is left off the list because it is position:absolute, and an
   absolutely positioned grid child takes the padding box as its containing
   block — exactly where it already was. */
.pc-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.pc-card .pc-media { grid-row: 1; grid-column: 1; display: block; z-index: 1; }
.pc-card .pc-actions { grid-row: 1; grid-column: 1; z-index: 6; align-self: end; margin: 0; padding: 0 12px 12px; }
.pc-card .pc-body { grid-row: 2; grid-column: 1; display: block; color: inherit; text-decoration: none; }
.pc-card .pc-body:hover { text-decoration: none; }

.pc-badges { position: absolute; top: 10px; left: 10px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.pc-badge { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Three distinct weights, because a single card can carry two of these at once:
   ink for the money badge, gold for the merchandising one, outlined ink for
   social proof. All flat colours on a blurred base rather than pills with a
   drop shadow, which read as stickers. */
.pc-badge--off { background: rgba(20, 22, 26, .92); color: #fff; }
.pc-badge--new { background: var(--accent); color: #14161a; }
.pc-badge--best { background: rgba(255, 255, 255, .94); color: var(--brand); border: 1px solid var(--brand); }

/* Hidden until the pointer arrives: the card is a photograph first, and a
   permanent pastel button under every tile is a lot of the reason the grid read
   as a bargain bin. Three escapes keep it genuinely reachable rather than
   merely hidden — :focus-within for a keyboard user tabbing into it,
   (hover: none) for phones and tablets where there is no hover to reveal it,
   and opacity instead of display so the control stays in the a11y tree. */
.pc-actions { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .28s cubic-bezier(.2, .7, .3, 1), transform .28s cubic-bezier(.2, .7, .3, 1); }
.pc-card:hover .pc-actions, .pc-card:focus-within .pc-actions { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) { .pc-actions { opacity: 1; transform: none; pointer-events: auto; } }
.pc-cart { width: 100%; border: 1px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .95); color: var(--brand); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 10px; padding: 11px 12px; font-weight: 600; font-size: 13.5px; transition: .22s; box-shadow: 0 6px 18px rgba(20, 22, 26, .18); }
.pc-cart:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.pc-cart:disabled { background: rgba(255, 255, 255, .92); border-color: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none; }

/* ===================================================================
   Top Deals — the homepage deal shelf.
   Configured through the `content` singleton (server/topDeals.js) and
   rendered by topDealsSection(); the storefront never holds product ids
   or promo copy of its own.

   Every selector below is scoped to .section--td / .td-grid /
   .td-banner. The shared .card, .grid and .pc-* rules that the shop,
   category and store pages rely on are therefore left exactly as they
   are — this block only changes how they look inside this section.
   =================================================================== */

/* --- section header: heading + subtitle left, View All right --- */
.td-head__text { min-width: 0; }
.td-head__text h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.td-head__icon { font-size: 17px; line-height: 1; }
.td-head__sub { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
/* The brief asks for a link you can actually hit on a phone. Padding grows the
   tappable box; the matching negative margin hands the vertical space straight
   back, so the header measures exactly as it did and no other section is
   affected. Horizontal padding is deliberately omitted: a negative horizontal
   margin would drag the link leftward into the heading at 320/360px. */
.section--td .link-all { flex: none; white-space: nowrap; padding: 10px 0; margin: -10px 0; }

/* --- promotional banner: a carousel of whole admin images ---
   One complete banner fills the card at a time. The entire slide is the link,
   so there is nothing to hunt for; no copy is painted over the artwork and no
   second white text panel is split off beside it.

   The track starts at the site's 2048x746 banner ratio and initTdCarousel swaps
   in the first image's real proportions once it decodes. object-fit: contain is
   deliberate: the whole point is that a banner's promotional text is never
   cropped out of the frame, and any letterboxing left over would be on a
   mismatched upload rather than on the artwork itself. */
.td-carousel {
  position: relative; display: block; overflow: hidden; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
  /* Horizontal swipes belong to the carousel; vertical ones keep scrolling the
     page normally, which is what makes the swipe feel native on a phone. */
  touch-action: pan-y;
}
.td-carousel__track { position: relative; width: 100%; aspect-ratio: 2048 / 746; overflow: hidden; }
.td-carousel__slide {
  position: absolute; inset: 0; z-index: 0; display: block;
  text-decoration: none;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}
.td-carousel__slide.is-active { z-index: 1; opacity: 1; visibility: visible; }
.td-carousel__img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--surface-2); }

.td-carousel__nav {
  position: absolute; top: 50%; z-index: 3;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--border); border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--text);
  box-shadow: var(--shadow); cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.td-carousel__nav:hover { background: #fff; box-shadow: var(--shadow-lg); transform: translateY(-50%) scale(1.06); }
.td-carousel__nav:active { transform: translateY(-50%) scale(.96); }
.td-carousel__nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.td-carousel__nav svg { width: 20px; height: 20px; }
.td-carousel__nav--prev { left: 14px; }
.td-carousel__nav--next { right: 14px; }

/* Dots sit over the artwork's bottom edge, so they carry their own contrast
   ring rather than a scrim — nothing gets painted across the image itself. */
.td-carousel__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 7px; }
.td-carousel__dot {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .28);
  cursor: pointer; transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}
.td-carousel__dot.is-on { width: 22px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 1px rgba(16, 24, 40, .12); }
.td-carousel__dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 640px) {
  .td-carousel__nav { width: 32px; height: 32px; }
  .td-carousel__nav svg { width: 17px; height: 17px; }
  .td-carousel__nav--prev { left: 8px; }
  .td-carousel__nav--next { right: 8px; }
  .td-carousel__dots { bottom: 8px; gap: 6px; }
  .td-carousel__dot { width: 7px; height: 7px; }
  .td-carousel__dot.is-on { width: 18px; }
}
/* Cards drift up as a shelf paints, staggered so a row reads left-to-right
   rather than popping in as one slab. Two details matter:

     - `backwards`, never `both`/`forwards`. The card's resting style includes
       the hover lift (.card:hover), and an animation with fill-mode forwards
       outranks a normal declaration — so `both` would freeze every card at
       transform:none and silently kill the hover effect for good.
     - the whole thing sits behind no-preference rather than relying on the
       reduce block below to undo it. A reader who has already asked their OS
       for less motion never gets the first frame, instead of getting it and
       having it switched off. */
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .grid > .pc-card { animation: cardIn .5s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
  .grid > .pc-card:nth-child(1) { --i: 0; } .grid > .pc-card:nth-child(2) { --i: 1; }
  .grid > .pc-card:nth-child(3) { --i: 2; } .grid > .pc-card:nth-child(4) { --i: 3; }
  .grid > .pc-card:nth-child(5) { --i: 4; } .grid > .pc-card:nth-child(6) { --i: 5; }
  .grid > .pc-card:nth-child(7) { --i: 6; } .grid > .pc-card:nth-child(8) { --i: 7; }
  .grid > .pc-card:nth-child(9) { --i: 8; } .grid > .pc-card:nth-child(10) { --i: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .td-carousel__slide { transition: none; }
  .td-carousel__nav, .td-carousel__dot { transition: none; }
  /* Everything the redesign added: the shelf stagger, the slow image push-in on
     hover and the quick-add sliding up into place. Left in, each of these is a
     large-area movement, which is the part of motion that actually triggers
     discomfort rather than the small hover states. */
  .grid > .pc-card { animation: none; }
  .pc-img img, .pc-card:hover .pc-img img { transition: none; transform: none; }
  .pc-actions, .pc-card:hover .pc-actions, .pc-card:focus-within .pc-actions { transition: none; transform: none; }
}

/* Legacy copy-only banner: no artwork to rotate, so it is one full-width card.
   Kept rather than deleted because a banner saved before the carousel existed
   must keep rendering. There is no --img variant any more on purpose: the split
   text-panel-plus-image layout is exactly what this redesign removes. */
.td-banner {
  display: grid; overflow: hidden; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.td-banner:hover { text-decoration: none; box-shadow: var(--shadow-lg); }
.td-banner__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-width: 0; padding: 20px clamp(16px, 3vw, 30px); }
.td-banner__offer { background: rgba(245, 158, 11, .16); color: var(--accent-dark); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 8px; }
.td-banner__title { font-size: clamp(17px, 2.1vw, 21px); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--text); }
.td-banner__text { color: var(--muted); font-size: 14px; line-height: 1.45; }
.td-banner__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--brand); font-size: 14px; font-weight: 700; }
.td-banner:hover .td-banner__cta { color: var(--accent-dark); }

/* --- product grid: 4 / 3 / 2 --- */
.td-grid { grid-template-columns: repeat(4, 1fr); }

/* --- card --- */
.td-grid .card { border-radius: 16px; border-color: #ebeef2; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .05); }
.td-grid .card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 14px 30px rgba(16, 24, 40, .10); }
.td-grid .pc-img img { transition: transform .4s ease; }
.td-grid .card:hover .pc-img img { transform: scale(1.03); }
.td-grid .pc-body { padding: 11px 13px 4px; }
.td-grid .pc-seller { font-size: 11.5px; font-weight: 600; }
.td-grid .pc-name { font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 38px; margin-top: 3px; }
.td-grid .pc-price { flex-wrap: wrap; column-gap: 6px; row-gap: 2px; margin-top: 8px; }
.td-grid .price { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.td-grid .strike { font-size: 12.5px; }
/* Savings wraps to its own line on a narrow card and sits right; on a wide
   card it stays on the price row and is pushed to the far edge. */
.td-grid .pc-price .off { margin-left: auto; font-size: 12px; font-weight: 700; }

/* One badge per card: the discount is the deal. "Best seller"/"New" are
   hidden here rather than deleted, because they are derived from real data
   and still show on every other shelf. */
.td-grid .pc-badge { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .16); font-size: 11px; padding: 4px 8px; }
.td-grid .pc-badge--best, .td-grid .pc-badge--new { display: none; }
.td-grid .pc-wish { width: 36px; height: 36px; }

/* Primary CTA. Rounded but not pill-shaped, and it reuses the site's brand
   slate rather than introducing a new colour. hover / active / disabled are
   all defined; postCart() disables the button for the length of the request,
   which is the loading state. */
.td-grid .pc-actions { padding: 8px 13px 13px; }
.td-grid .pc-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--brand); border-color: var(--brand); color: #fff;
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 700;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  /* The label must stay on one line. Without this the 320px card has ~90px of
     room for a ~94px label + cart glyph, so the text silently dropped onto a
     second line and made the button 57px tall instead of ~40px. The narrow
     breakpoint below shrinks the metrics so it fits rather than overflows. */
  white-space: nowrap;
}
.td-grid .pc-cart:hover:not(:disabled) { background: var(--brand-2); border-color: var(--brand-2); }
.td-grid .pc-cart:active:not(:disabled) { transform: translateY(1px); }
.td-grid .pc-cart:disabled { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.td-grid .pc-cart__ic { flex: none; }

/* --- phones --- */
@media (max-width: 1023px) { .td-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) {
  .td-head__text h2 { gap: 8px; font-size: 20px; }
  .td-head__icon { font-size: 15px; }
  .td-head__sub { margin-top: 3px; font-size: 13px; }

  .td-carousel { margin-bottom: 14px; border-radius: 16px; }
  .td-banner { margin-bottom: 14px; border-radius: 16px; }
  .td-banner__body { gap: 5px; padding: 15px 15px 16px; }
  .td-banner__title { font-size: 17px; }
  .td-banner__text { font-size: 13px; }
  .td-banner__cta { margin-top: 2px; padding: 3px 0; font-size: 14px; }

  .td-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .td-grid .card { border-radius: 16px; }
  .td-grid .pc-body { padding: 10px 11px 2px; }
  .td-grid .pc-seller { font-size: 11px; }
  .td-grid .pc-name { font-size: 13.5px; min-height: 36px; }
  .td-grid .rating { font-size: 12px; }
  .td-grid .price { font-size: 16px; }
  .td-grid .strike { font-size: 12px; }
  .td-grid .pc-price .off { font-size: 11.5px; }
  .td-grid .pc-badges { top: 8px; left: 8px; }
  .td-grid .pc-wish { width: 36px; height: 36px; top: 8px; right: 8px; }
  .td-grid .pc-actions { padding: 8px 11px 11px; }
  .td-grid .pc-cart { padding: 11px 10px; font-size: 13.5px; }
}
/* Very narrow phones: tighten type and padding rather than drop to one
   column or let anything scroll sideways. Two columns stay usable at 320px. */
@media (max-width: 360px) {
  .td-head__text h2 { font-size: 19px; }
  .td-grid { gap: 10px; }
  .td-grid .pc-body { padding: 9px 9px 2px; }
  .td-grid .pc-name { font-size: 13px; min-height: 34px; }
  .td-grid .price { font-size: 15px; }
  .td-grid .pc-actions { padding: 7px 9px 9px; }
  /* Same button, tighter: a 320px card leaves the label ~4px short of fitting,
     so padding, type, gap and glyph all come down a notch instead of the label
     wrapping or being clipped. Measured inner width 94px vs ~85px of content. */
  .td-grid .pc-cart { padding: 10px 6px; font-size: 12px; gap: 5px; }
  .td-grid .pc-cart__ic { width: 14px; height: 14px; }
}

/* ===================================================================
   Admin › Website Content › Top Deals
   The editing surface for the section above. Scoped to .tdp-* so the
   admin chrome shares nothing with the storefront rules.
   =================================================================== */
.tdp-lede { margin-top: 0; }
.tdp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tdp-span { grid-column: 1 / -1; }
@media (max-width: 900px) { .tdp-cols { grid-template-columns: minmax(0, 1fr); } .tdp-span { grid-column: auto; } }

.tdp-card { padding: 16px 18px 18px; }
/* These are form panels, not tiles: the shared card lift would slide the form
   under the cursor while it is being filled in. */
.tdp-card:hover { transform: none; box-shadow: none; }
.tdp-card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.tdp-card__h b { font-size: 14.5px; }
.tdp-note { margin: 0 0 12px; line-height: 1.45; }
.tdp-on { display: inline-flex; align-items: center; gap: 8px; }
.tdp-grow { flex: 1 1 190px; min-width: 0; margin-bottom: 0; }

/* catalogue search */
.tdp-q { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font-size: 14px; }
.tdp-q:focus { outline: none; border-color: var(--brand); }
.tdp-res { margin-top: 10px; max-height: 218px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tdp-hit { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.tdp-hit:last-child { border-bottom: 0; }
.tdp-hit img, .tdp-hit__noimg { width: 36px; height: 42px; flex: none; border-radius: 6px; background: var(--surface-2); object-fit: cover; }
.tdp-hit__b { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tdp-hit__b b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdp-res__none { padding: 16px; text-align: center; }

/* ordered shortlist */
.tdp-sel { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tdp-sel__empty { padding: 18px; text-align: center; border: 1px dashed var(--border); border-radius: 10px; }
.tdp-row { display: flex; align-items: center; gap: 10px; padding: 6px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; cursor: grab; }
.tdp-row:active { cursor: grabbing; }
.tdp-row.is-drag { opacity: .4; }
.tdp-row.is-over { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tdp-row__n { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.tdp-row__img { width: 32px; height: 38px; flex: none; border-radius: 6px; overflow: hidden; background: var(--surface); }
.tdp-row__img img { width: 100%; height: 100%; object-fit: cover; }
.tdp-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tdp-row__b b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdp-row__mv { display: flex; gap: 5px; flex: none; }

.tdp-bnprev { margin-top: 12px; padding: 12px; background: var(--bg); border: 1px dashed var(--border); border-radius: 12px; }

/* --- Top Deals carousel management ---
   One row per banner: its place in the order, what it looks like, where it goes
   and whether it is live, with the editor folded into the row so a long list
   still reads as a list. */
.tdp-bnbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tdp-bnint { display: inline-flex; align-items: center; gap: 6px; }
.tdp-bnint input { width: 82px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font-size: 13px; text-align: right; }
.tdp-bnint input:focus { outline: none; border-color: var(--brand); }

.tdp-bnlist { display: flex; flex-direction: column; gap: 8px; }
.tdbn { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.tdbn.is-off .tdbn__top { opacity: .6; }
.tdbn__top { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.tdbn__n { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tdbn__thumb { width: 46px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.tdbn__thumb img { width: 100%; height: 100%; object-fit: contain; }
.tdbn__thumb img.broken, .tdbn__imgprev img.broken { visibility: hidden; }
.tdbn__noimg { font-size: 15px; line-height: 1; opacity: .4; }
.tdbn__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.32; }
.tdbn__meta b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdbn__sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdbn__state { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; }
.tdbn__state.is-on { background: rgba(22, 163, 74, .14); color: #15803d; }
.tdbn__state.is-wip { background: rgba(245, 158, 11, .16); color: var(--accent-dark); }
.tdbn__state.is-off { background: var(--surface-2); color: var(--muted); }
.tdbn__sw { flex: none; }
.tdbn__mv { display: flex; gap: 4px; flex: none; }
.tdbn__mv .btn-sm { padding: 4px 8px; font-size: 12.5px; line-height: 1.4; }
.tdbn__form { padding: 4px 12px 12px; border-top: 1px dashed var(--border); background: var(--bg); }
.tdbn__imgprev { display: grid; place-items: center; min-height: 76px; margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.tdbn__imgprev img { display: block; width: 100%; max-height: 150px; object-fit: contain; }
.tdbn__imgnote { padding: 14px 16px; text-align: center; }

/* The filter a banner carries: which subcategories its shelf is drawn from and
   what ceiling makes them deals. Chips rather than a multi-select — 76
   subcategories in a ctrl-click list is unusable on a phone and unreadable at
   a glance, so they are added one at a time from a grouped picker. */
.tdbn__filter { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.tdbn__filter > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.tdbn__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; min-height: 26px; }
.tdbn__chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 5px 4px 10px; border: 1px solid var(--brand); border-radius: 999px; background: var(--surface-2); color: var(--brand); font-size: 12.5px; font-weight: 600; }
.tdbn__chipx { flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.tdbn__chipx:hover { background: var(--brand); color: #fff; }
.tdp-narrow { flex: 0 1 136px; min-width: 0; margin-bottom: 0; }

@media (max-width: 640px) {
  .tdbn__top { flex-wrap: wrap; }
  .tdbn__meta { flex: 1 1 110px; }
  .tdbn__mv { flex: 1 1 100%; justify-content: flex-end; }
}
.tdp-foot { margin-top: 2px; }

/* preview: the section rebuilt inside an iframe at a real device width, so the
   media queries answer to the frame instead of the admin window. */
.tdp-vp { display: flex; gap: 6px; }
.tdp-vp-b.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tdp-prev { position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.tdp-iframe { display: block; border: 0; background: var(--bg); box-shadow: var(--shadow); }
.tdp-off { padding: 44px 16px; text-align: center; }

/* ---------- quick-add variant picker ---------- */
.qa-pick { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.qa-pick img { width: 54px; height: 66px; object-fit: cover; border-radius: 8px; flex: none; }
.qa-pick .qa-name { font-weight: 600; font-size: 14px; line-height: 1.35; }

/* ---------- listing toolbar + mobile filter drawer ---------- */
.shop-toolbar-right { display: flex; align-items: center; gap: 10px; }
.shop-toolbar-right label { white-space: nowrap; }
.shop-filter-btn { display: none; }
.shop-layout .filters { display: block; margin: 0; }
.filters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filters-head h4 { margin: 0; }
.filters-x { display: none; width: 32px; height: 32px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px; place-items: center; color: var(--muted); }
.shop-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 90; }
.shop-scrim[hidden] { display: none; }

/* ---------- active category in the header menu ---------- */
.nav-drop-btn.is-active { background: var(--pk-100); border-color: var(--pk-200); color: var(--pk-dark); }
.nav-drop-menu a.is-active { background: var(--brand); color: #fff; }
.nav-drop-menu a.is-active:hover { background: var(--brand-2); }
.nav-drop-menu a.is-active .muted { color: #cbd5e1; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .wads { grid-template-columns: repeat(2, 1fr); }
  /* The third card spans the row instead of leaving a one-card hole. */
  .wads:not(.wads--mid) .wad:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16 / 6.4; }
  .wbenefits { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .wben + .wben { border-left: 0; }
  .wben:nth-child(even) { border-left: 1px solid var(--pk-100); }
}
@media (max-width: 900px) {
  /* Filters become a right-edge drawer so the grid keeps the full width. */
  .shop-filter-btn { display: inline-flex; }
  .filters-x { display: grid; }
  .shop-layout .filters { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 92vw); margin: 0; padding: 18px; overflow-y: auto; border-radius: 0; border-left: 1px solid var(--border); transform: translateX(105%); transition: transform .22s ease; z-index: 91; }
  .shop-layout .filters.is-shown { transform: translateX(0); box-shadow: -8px 0 24px rgba(16, 24, 40, .12); }
}
@media (max-width: 720px) {
  /* A phone-sized hero: taller than the desktop banner so the headline, copy
     and CTA still have room. */
  .wch .hero-slides { aspect-ratio: 4 / 3.2; }
  .wch-copy { padding: 22px; }
  .wch-art { display: none; }
  .wch-copy--onimg { padding: 40px 20px 20px; }
  .wbenefits { padding: 12px; }
  .wben { padding: 6px 8px; }
  .wsec-band { padding: 14px; }
  .shop-toolbar-right { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  /* Advertisements become a swipeable rail: one and a bit cards visible, so it
     is obvious there is more to scroll, and the page never gains a horizontal
     scrollbar of its own (only this rail scrolls). */
  .wads, .wads--mid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 6px; }
  /* The arrows are absent down here, but a visible scrollbar under a rail of
     ads reads as a mistake — the snap points and the half-visible next card
     already say "swipe me". */
  .wads, .wads--mid { scrollbar-width: none; }
  .wads::-webkit-scrollbar, .wads--mid::-webkit-scrollbar { display: none; }
  .wad, .wads--mid .wad, .wads:not(.wads--mid) .wad:last-child:nth-child(odd) { flex: 0 0 80%; grid-column: auto; aspect-ratio: 16 / 10; scroll-snap-align: start; }
  .wbenefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  /* Still a 2x2 grid on a phone: four short lines fit, and a 1-column stack
     would push the products a full screen further down. */
  .wbenefits { grid-template-columns: repeat(2, 1fr); padding: 10px; }
  .wben { padding: 6px; gap: 9px; }
  .wben-ic { width: 34px; height: 34px; border-radius: 11px; }
  .wben-ic svg { width: 18px; height: 18px; }
}

/* Women category redesign styles */
.cat-hero-women { min-height: 320px; display: flex; align-items: center; border-radius: var(--radius); overflow: hidden; }
.cat-hero-content { padding: 40px 48px; }
.hero-tag { color: #db2777; font-weight: 600; letter-spacing: 2px; font-size: 13px; margin-bottom: 8px; }
.cat-hero-women h1 { font-size: 44px; color: #1f2937; margin-bottom: 8px; }
.hero-cta { margin-top: 20px; }
.ads-section { padding-top: 20px; }
.ads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ad-card { height: 160px; border-radius: var(--radius); padding: 24px; display: flex; align-items: center; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.ad-kurtis { background: linear-gradient(135deg, #f5f3ff 0%, #e9d5ff 100%); }
.ad-sarees { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%); }
.ad-tops { background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%); }
.ad-content h3 { font-size: 20px; margin-bottom: 4px; color: #1f2937; }
.ad-content p { color: #4b5563; margin-bottom: 12px; }
.ad-cta { font-weight: 600; color: #db2777; }
.benefits-section { background: #fff5f9; border-radius: var(--radius); padding: 20px 0; }
.benefits-strip { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; padding: 0 20px; }
.benefit-item { display: flex; align-items: center; gap: 12px; }
.benefit-text { display: flex; flex-direction: column; }
.benefit-text strong { font-size: 13px; color: #1f2937; }
.benefit-text span { font-size: 12px; color: #6b7280; }
.promo-section { padding-top: 20px; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; }
.promo-card { height: 200px; border-radius: var(--radius); padding: 32px; display: flex; align-items: center; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.promo-winter { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); }
.promo-festive { background: linear-gradient(135deg, #fefce8 0%, #fde047 40%, #fef3c7 100%); }
.promo-content h3 { font-size: 24px; margin-bottom: 4px; color: #1f2937; }
.promo-content p { color: #4b5563; margin-bottom: 8px; }
.promo-off { display: block; font-weight: 700; color: #dc2626; margin-bottom: 12px; }
.promo-cta { font-weight: 600; color: #db2777; }
@media (max-width: 768px) { .cat-hero-women h1 { font-size: 28px; } .promo-grid { grid-template-columns: 1fr; } .ads-grid { grid-template-columns: 1fr; } .benefits-strip { flex-direction: column; align-items: flex-start; } }


/* ===========================================================================
   Seller · Analytics & Reports (redesigned dashboard)

   One header with a range picker, a four-up KPI strip on hairline dividers,
   then a 12-column card grid: trend + category side by side, products /
   location / status as a balanced row, table + downloads at the bottom.
   Charts are hand-rolled SVG (no chart library in this project).
   =========================================================================== */

/* --- header range picker --- */
.an-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-range select, .an-range input[type="date"] {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 12.5px; font-weight: 600;
}
.an-range select { padding-right: 28px; cursor: pointer; }
.an-range input[type="date"] { font-weight: 500; min-width: 0; }
.an-custom { display: inline-flex; align-items: center; gap: 6px; }
.an-custom[hidden] { display: none; }
.an-dash { color: var(--muted); }

/* --- KPI strip: four cards in one row, 1px grid gap over border colour --- */
.an-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow); margin-bottom: 8px;
}
.an-kpi { background: var(--surface); padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 7px; min-height: 118px; min-width: 0; }
.an-k-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-kpi .an-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; }
.an-kpi .lab { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.25; }
.an-kpi .num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.an-k-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-ic.t-gold { background: #f6eedb; }
.an-ic.t-blue { background: #e4eefd; }
.an-ic.t-purple { background: #f3e8fc; }
.an-ic.t-green { background: #dcf5e5; }
.an-dlt { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2.5px 8px; white-space: nowrap; }
.an-dlt.up { background: #dcf5e5; color: #15803d; }
.an-dlt.down { background: #fde5e5; color: #b91c1c; }
.an-dlt.flat { background: var(--surface-2); color: var(--muted); }
.an-dlt.none { background: none; color: var(--muted); font-weight: 600; padding: 2.5px 0; font-size: 10.5px; }
.an-rule-note { margin: -1px 2px 14px; font-size: 11px; }

/* --- 12-column card grid --- */
.an-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: start; }
.an-c8 { grid-column: span 8; }
.an-c4 { grid-column: span 4; }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.an-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.an-card-h h3 { margin: 0; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.an-sub { font-size: 11px; color: var(--muted); font-weight: 600; }
.an-more { font-size: 12px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.an-more:hover { color: var(--accent); }
.an-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); font-weight: 600; flex-wrap: wrap; }
.an-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.an-note { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.an-empty-c { text-align: center; color: var(--muted); font-size: 12.5px; padding: 26px 8px; }

/* --- trend chart (bars = sales, line = orders, dual axis) --- */
.an-chart { position: relative; }
.an-chart svg { display: block; max-width: 100%; }
.an-ax { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.an-ax-r { fill: #a16207; }
.an-empty-lab { font-size: 11.5px; fill: var(--muted); }
.an-tip {
  position: absolute; z-index: 5; pointer-events: none; background: var(--brand); color: #fff;
  font-size: 11.5px; line-height: 1.5; border-radius: 8px; padding: 7px 9px;
  box-shadow: 0 6px 18px rgba(20, 22, 26, .22); min-width: 118px;
}
.an-tip b { display: block; font-size: 10.5px; color: #c9c4bc; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.an-tip span { display: flex; align-items: center; gap: 6px; }
.an-tip span i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.an-tip span strong { margin-left: auto; font-weight: 800; padding-left: 12px; }

/* --- donuts + legends --- */
.an-donut-body { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.an-donut { flex: none; width: 170px; height: 170px; display: grid; place-items: center; }
.an-donut svg { display: block; }
.an-dc-v { font-size: 15px; font-weight: 800; fill: var(--text); font-family: var(--font); }
.an-dc-l { font-size: 9.5px; fill: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-family: var(--font); }
.an-legend-list { list-style: none; margin: 0; padding: 0; flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 7px; max-height: 196px; overflow-y: auto; }
.an-legend-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.an-legend-list .an-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.an-legend-list .an-lg-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.an-legend-list .an-lg-vl { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-lg-empty { color: var(--muted); justify-content: center; font-size: 12px; }

/* --- top selling products --- */
.an-prods { display: flex; flex-direction: column; }
.an-prod { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border); color: inherit; min-width: 0; border-radius: 8px; }
.an-prod:first-child { border-top: 0; }
a.an-prod:hover { background: #faf9f7; text-decoration: none; }
.an-rank { width: 21px; height: 21px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: none; }
.an-prod:first-child .an-rank { background: #f6eedb; color: var(--accent-dark); }
.an-pimg { position: relative; width: 38px; height: 38px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--muted); flex: none; overflow: hidden; }
.an-pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.an-pmeta { flex: 1; min-width: 0; }
.an-pmeta b { display: block; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-pmeta small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-prev { font-size: 12.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- customer location --- */
.an-locs { display: flex; flex-direction: column; gap: 11px; }
.an-loc-t { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 5px; }
.an-loc-t span:first-child { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-loc-t span:last-child { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-bar { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.an-bar i { display: block; height: 100%; background: #2563eb; border-radius: 999px; }

/* --- sales report table --- */
.an-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 430px; }
.an-tbl th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.an-tbl td { padding: 9px 10px; border-bottom: 1px solid #f1efeb; vertical-align: top; }
.an-tbl tbody tr:last-child td { border-bottom: 0; }
.an-tbl th.num, .an-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.an-tbl tbody tr:hover td { background: #faf9f7; }
.an-cell-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.an-empty-td { text-align: center; color: var(--muted); padding: 26px 10px; }
.an-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 12px; color: var(--muted); }
.an-pager .btn:disabled { opacity: .45; cursor: default; }

/* --- reports & downloads --- */
.an-dls { display: flex; flex-direction: column; }
.an-dl { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--border); min-width: 0; }
.an-dl:first-child { border-top: 0; padding-top: 2px; }
.an-dl-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; }
.an-dl-ic.c-blue { background: #e4eefd; }
.an-dl-ic.c-green { background: #dcf5e5; }
.an-dl-ic.c-purple { background: #f3e8fc; }
.an-dl-ic.c-amber { background: #fdf0d3; }
.an-dl-m { flex: 1; min-width: 0; }
.an-dl-m b { display: block; font-size: 12.5px; }
.an-dl-m small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- functional states --- */
.an-load { text-align: center; padding: 56px 16px; color: var(--muted); }
.an-load .spinner { margin-bottom: 10px; }
.an-err { text-align: center; padding: 56px 16px; color: var(--muted); }
.an-err p { margin: 8px 0 0; font-size: 13.5px; }
.an-err .btn { margin-top: 14px; }

/* --- responsive --- */
@media (max-width: 1100px) {
  .an-c8 { grid-column: span 12; }
  .an-c4 { grid-column: span 6; }
  .an-c-dl { grid-column: span 12; }
}
@media (max-width: 760px) {
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpi { min-height: 100px; padding: 12px 13px; }
  .an-kpi .num { font-size: 20px; }
  .an-c4 { grid-column: span 12; }
  .an-range { width: 100%; }
  .an-range select { flex: 1 1 auto; }
  .an-custom { flex: 1 1 100%; }
  .an-custom input[type="date"] { flex: 1 1 0; min-width: 0; }
  .an-donut { margin: 0 auto; }
  .an-donut-body { justify-content: center; }
  .an-legend-list { flex-basis: 100%; max-height: 168px; }
  .an-dl .btn { min-height: 36px; padding: 8px 12px; }
  .an-card { padding: 14px; }
}
@media (max-width: 420px) {
  .an-kpi .num { font-size: 18px; }
  .an-kpi .lab { font-size: 9.5px; }
}

/* ---------------- 404 (router no-match) ----------------
   Rendered inside #app by UI.notFound(), so the header/footer shell around it
   is untouched. Everything scales down without extra markup: the card grid is
   auto-fit, and the actions simply wrap. */
.nf-page { text-align: center; padding: 44px 16px 56px; max-width: 780px; margin: 0 auto; }
.nf-art svg { width: min(240px, 68vw); height: auto; }
.nf-title { font-size: clamp(22px, 4vw, 30px); margin: 14px 0 6px; letter-spacing: .2px; }
.nf-sub { color: #6b7280; font-size: 15px; line-height: 1.55; margin: 0 auto 20px; max-width: 470px; }
.nf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.nf-actions .btn { min-width: 160px; text-align: center; }
.nf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; text-align: left; }
.nf-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 14px; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.nf-card:hover, .nf-card:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 22, 26, .08); }
.nf-card .nf-ic { display: block; font-size: 22px; margin-bottom: 6px; }
.nf-card b { display: block; font-size: 15px; }
.nf-card i { font-style: normal; display: block; font-size: 12.5px; color: #8a8580; margin-top: 2px; }
@media (max-width: 420px) {
  .nf-page { padding: 30px 10px 44px; }
  .nf-actions .btn { min-width: 0; flex: 1 1 140px; }
}

/* ---------------- shop filter sidebar: accordions ----------------
   Native <details>/<summary> sections with thin dividers and uppercase
   headings. Only shop.js uses .facc, so the category page sidebar and every
   other .filters panel keep their current look. */
.facc { border-top: 1px solid var(--border); }
.facc:last-of-type { border-bottom: 1px solid var(--border); }
.facc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.facc > summary::-webkit-details-marker { display: none; }
.facc > summary::after { content: "\25B8"; font-size: 13px; color: #9aa0a6; transition: transform .15s ease; }
.facc[open] > summary::after { transform: rotate(90deg); }
.facc > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.facc-body { padding: 0 2px 12px; }
.facc-body .fgroup { margin: 0; border-top: 0; padding-top: 0; } /* dividers belong to the accordion now */
.facc-body .price-inputs input { width: 100%; }
#f-apply { margin-top: 14px; }

/* =============== Seller Dashboard (redesign) ===============
   Scoped to the #/seller overview screen only: KPI tiles, the two-column
   layout, attention cards, recent-order rows, the analytics extras and the
   right rail. The navy sidebar (#101828), purple active navigation and the
   rest of the console are untouched above — accents reuse that same violet
   (#6d28d9 / #4f46e5). Everything scales down cleanly: the grid collapses
   to one column on tablets, rows reflow on phones, nothing overflows. */
/* One line on desktop: all nine tiles share a single row (each shrinks via
   minmax(0,1fr), type scales down with the column so nothing overflows).
   The wrap is the query container for the narrow fallback below. */
.dash-kpis-wrap { container-type: inline-size; }
.dash-kpis { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.dk { position: relative; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 9px 11px; color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow: hidden; }
.dk:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #d9ccf7; text-decoration: none; }
.dk:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }
.dk-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13.5px; background: var(--surface-2); margin-bottom: 7px; }
.dk.k-brand .dk-ic { background: #f1e9ff; } .dk.k-blue .dk-ic { background: #e0efff; }
.dk.k-green .dk-ic { background: #dcfce7; } .dk.k-amber .dk-ic { background: #fef0cf; }
.dk.k-red .dk-ic { background: #ffe2e2; } .dk.k-violet .dk-ic { background: #ede9fe; }
.dk-num { font-size: clamp(13px, 1.5vw, 21px); font-weight: 800; letter-spacing: -.4px; line-height: 1.15; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-lab { font-size: clamp(9.5px, .9vw, 11.5px); color: var(--muted); font-weight: 600; margin-top: 2px; line-height: 1.25; }
/* When nine readable columns don't fit (container < 780px — e.g. the
   sidebar-visible band around 912px, or any phone), the strip becomes ONE
   horizontally scrollable line of fixed-width chips: still a single row,
   numbers never clipped, and no page-level horizontal overflow. */
@container (max-width: 780px) {
  .dash-kpis { display: flex; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .dk { flex: 0 0 130px; padding: 13px 13px 12px; scroll-snap-align: start; }
  .dk-ic { width: 28px; height: 28px; font-size: 14.5px; border-radius: 9px; }
  .dk-num { font-size: 17px; }
  .dk-lab { font-size: 11px; }
  .dash-kpis::-webkit-scrollbar { height: 6px; }
  .dash-kpis::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
  .dash-kpis::-webkit-scrollbar-track { background: transparent; }
}
.dk-go { position: absolute; right: 12px; top: 13px; color: #c9cdd6; font-size: 13px; transition: transform .15s ease, color .15s ease; }
.dk:hover .dk-go { color: #6d28d9; transform: translateX(2px); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.dash-body { display: grid; gap: 18px; min-width: 0; }
.dash-rail { display: grid; gap: 18px; min-width: 0; }
.dash-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
.dash-sec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-sec-h h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: var(--text); }
.dash-sec-h p { margin: 3px 0 0; }
.dash-more { font-size: 12.5px; font-weight: 700; color: #6d28d9; white-space: nowrap; }
.dash-more:hover { text-decoration: none; opacity: .78; }

.att-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.att-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; min-width: 0; }
.att-item:hover { border-color: #d9ccf7; box-shadow: 0 4px 12px rgba(20, 22, 26, .07); }
.att-item.hot { border-color: #f2d17a; background: #fffaef; }
.att-item.err { border-color: #f5c2c2; background: #fef4f4; }
.att-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 15px; }
.att-item.hot .att-ic { background: #fdf0cf; }
.att-item.err .att-ic { background: #ffe2e2; }
.att-m { flex: 1; min-width: 0; display: grid; gap: 1px; }
.att-m b { font-size: 13px; color: var(--text); }
.att-m .small { color: var(--muted); font-size: 11.5px; }
.att-item.err .att-m .small { color: var(--danger); }

.rng { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; }
.rng-b { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); padding: 5px 11px; border-radius: 8px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.rng-b:hover { color: var(--text); }
.rng-b.on { background: #6d28d9; color: #fff; box-shadow: 0 1px 3px rgba(109, 40, 217, .35); }
.rng-b:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; }


.ro-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ro-list { display: grid; gap: 6px; }
.ro-row { display: grid; grid-template-columns: 42px minmax(0, 1.7fr) minmax(0, 1fr) 92px auto 132px 34px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; transition: background .15s ease, border-color .15s ease; min-width: 0; }
.ro-row:hover { background: var(--surface-2); border-color: var(--border); }
.ro-thumb { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
.ro-ph { font-size: 16px; opacity: .65; }
.ro-meta { min-width: 0; display: grid; }
.ro-meta b { font-size: 13px; color: var(--text); }
.ro-meta .small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-cust { color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-amt { font-weight: 800; font-size: 13px; color: var(--text); text-align: right; white-space: nowrap; }
.ro-date { white-space: nowrap; font-size: 11.5px; text-align: right; }
.ro-act { position: relative; justify-self: end; }
.ro-more { border: 1px solid var(--border); background: var(--surface); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.ro-more:hover { background: var(--surface-2); color: var(--text); border-color: #cfd2d8; }
.ro-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; }
.ro-menu[hidden] { display: none; }
.ro-menu a, .ro-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; color: var(--text); cursor: pointer; text-decoration: none; }
.ro-menu a:hover, .ro-menu button:hover { background: var(--surface-2); text-decoration: none; }

.payout-rows .row + .row { margin-top: 6px; }

.qk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qk { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 11px; font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; min-width: 0; }
.qk:hover { border-color: #d9ccf7; background: #faf8ff; transform: translateY(-1px); text-decoration: none; }
.qk-ic { flex: none; }
.qk span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-rail { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
}
@media (max-width: 860px) {
  .ro-row { grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "thumb meta amt" "thumb st date" "cust cust act"; row-gap: 4px; }
  .ro-thumb { grid-area: thumb; } .ro-meta { grid-area: meta; } .ro-amt { grid-area: amt; }
  .ro-st { grid-area: st; } .ro-date { grid-area: date; text-align: left; }
  .ro-cust { grid-area: cust; } .ro-act { grid-area: act; }
}
@media (max-width: 640px) {
  /* KPI one-liner is handled by the container query above (scroll chips). */
  .att-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-sec { padding: 14px; }
}
@media (max-width: 480px) {
  .dk-num { font-size: 18px; }
  .qk-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =============== Seller Notifications (inbox) ===============
   Scoped to #/seller/notifications: compact filter tabs plus one flat list
   of slim hairline-separated rows — no per-card shadows, illustrations or
   summary tiles. The shared .notif-* rules above stay (admin still uses
   them). Responsive: the meta line wraps on small screens. */
.nbi-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.nbi-tab { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.nbi-tab:hover { color: var(--text); border-color: #d9ccf7; }
.nbi-tab.on { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.nbi-tab:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; }
.nbi-count { background: var(--surface-2); border-radius: 999px; padding: 1px 7px; font-size: 11px; color: var(--muted); font-weight: 700; }
.nbi-tab.on .nbi-count { background: rgba(255, 255, 255, .22); color: #fff; }

.nbi-list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.nbi-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s ease; min-width: 0; }
.nbi-row:last-child { border-bottom: 0; }
.nbi-row:hover { background: var(--surface-2); }
.nbi-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.nbi-body { min-width: 0; }
.nbi-line1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.nbi-title { font-size: 13.5px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nbi-row.unread .nbi-title { font-weight: 800; }
.nbi-dot { width: 7px; height: 7px; border-radius: 50%; background: #6d28d9; flex: none; }
.nbi-sp { flex: 1; }
.nbi-cat { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.nbi-cat.c-action { background: #fef0cf; color: #92600a; }
.nbi-cat.c-money { background: #dcfce7; color: #15803d; }
.nbi-cat.c-updates { background: #e8edf5; color: #475569; }
.nbi-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.nbi-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.nbi-row.exp .nbi-desc { display: none; }
.nbi-more-link { border: 0; background: none; padding: 4px 0 0; font: inherit; font-size: 11.5px; font-weight: 700; color: #6d28d9; cursor: pointer; }
.nbi-more-link:hover { text-decoration: underline; }
.nbi-full { font-size: 12.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-top: 5px; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }
.nbi-act { position: relative; margin-left: auto; }
.nbi-more { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.nbi-more:hover { background: var(--surface-2); color: var(--text); }
.nbi-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 156px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 5px; display: grid; gap: 2px; }
.nbi-menu[hidden] { display: none; }
.nbi-menu a, .nbi-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 10px; border: 0; background: transparent; border-radius: 7px; color: var(--text); cursor: pointer; text-decoration: none; }
.nbi-menu a:hover, .nbi-menu button:hover { background: var(--surface-2); text-decoration: none; }

@media (max-width: 640px) {
  .nbi-row { padding: 10px 12px; }
  .nbi-title { white-space: normal; }
  .nbi-time { font-size: 11px; }
}

/* =============== Seller Panel accessibility ===============
   Visible keyboard focus for the controls whose base styles suppress the
   default ring (borderless search, div-based sidebar toggles). Mouse users
   see no change — :focus-visible only fires for keyboard interaction. */
.sd-link.has-sub:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
.sd-search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }