/* ================================================================================================
   STORE.CSS — Direction C, "Clinical Utility"
   Design system for /store, /university and /courses.

   Loaded AFTER css/site.css on every storefront.layout page (see resources/views/storefront/
   layout.blade.php). It does not redeclare anything site.css already owns site-wide — it reads
   site.css's :root token ramp (--brand, --gold, --green, --bg, --surface, the --ink ramp, --line, --font, --ease,
   --shell/--z-*) and REUSES site.css's header/nav/mega-menu/drawer/footer components verbatim,
   unchanged, so the store is unmistakably the same site as the rest of dev.sesc.net. This file
   only adds what site.css does not already have: the commerce component vocabulary (product
   cards, listings, cart, checkout, University, Courses) plus a small number of additive refinements
   to shared components, each called out below.

   Ported from public/design/store-c.html (client-approved "Direction C" mockup), reorganised from
   one flat <style> block into the grouped sections below with the mockup's own class names kept
   verbatim wherever practical — see this stage's return value for the full published contract and
   the .c1-, .c2- and .prod- naming-collision note.
   ================================================================================================ */

/* ------------------------------------------------------------------------------------------------
   0. TOKENS — additive only. Everything else (brand, gold, green, bg, surface, the ink ramp, line, font, ease,
   shell/z-*) already exists in site.css's :root and is reused as-is, not redeclared here.
   ------------------------------------------------------------------------------------------------ */
:root {
  /* --danger is the one net-new colour Direction C needs (out-of-stock / sold-out / remove),
     built with the same color-mix formula as every other tint in site.css. Used only as small
     text and dot accents — never a large fill — per the "muted, not alarming" brief. */
  --danger: oklch(0.5 0.14 26);
  --danger-tint: color-mix(in oklch, var(--danger) 10%, white 90%);

  /* Card corner radius and section padding are store-specific: denser than the marketing site's
     section rhythm (site.css's bare `section` is 48-82px block padding; commerce sections don't
     need that much air — see .store-sec below, which opts in per-section rather than overriding
     `section` globally so marketing-style sections dropped into a store page are unaffected). */
  --radius-card: 14px;
  --section-pad: clamp(26px, 3.6vw, 46px);
}

/* ------------------------------------------------------------------------------------------------
   1. PAGE SHELL — section rhythm, heading rows, and the two link/label primitives almost every
   store section uses.
   ------------------------------------------------------------------------------------------------ */
section.store-sec { padding-block: var(--section-pad); }
.store-sec.no-pad-top { padding-top: 0; }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sec-head h2 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--brand); font-weight: 800; }
.sec-head p { margin-top: 4px; color: var(--ink-faint); font-size: 0.83rem; }

.link-more { font-size: 0.79rem; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: 5px; }
.link-more svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.link-more:hover { text-decoration: underline; }

/* Chip row — used for the listing's active-filter summary, University's track filter and any
   other single-select/multi-select pill row. */
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; min-height: 38px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 0.81rem; font-weight: 700; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip:active { transform: scale(0.97); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .n { font-weight: 600; opacity: 0.75; }

/* ------------------------------------------------------------------------------------------------
   2. TITLEBAND, BADGE-RING, MONOGRAM, BREADCRUMB, TRUST STRIP
   .titleband / .badge-ring / .monogram / .crumb / .crumb-static are REUSED VERBATIM from site.css
   — not redeclared here. Every store page's title band (store home, category, product, checkout,
   University, course) uses that exact same navy band + circular badge + breadcrumb the marketing
   site already renders, so the two never drift into two different "title band" designs.
   Only .trust-strip is net new to the store: a compact fact bar directly under the title band.
   ------------------------------------------------------------------------------------------------ */
.trust-strip { background: var(--brand-tint); border-bottom: 1px solid var(--line); }
.trust-strip .shell { display: flex; flex-wrap: wrap; gap: 5px 26px; padding-block: 11px; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.79rem; font-weight: 600; color: var(--ink-soft); }
.trust-item svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.trust-item a { color: var(--brand); font-weight: 700; }
.trust-item a:hover { text-decoration: underline; }

/* Refinement of site.css's shared .checks/.check/.tick trust-checklist component for the denser
   two-line "label + description" usage on the product detail page (site.css's own version is a
   single line per row with a bottom-border divider, sized for the marketing "why choose SESC"
   block). Same tokens, tighter spacing, no divider. Scoped to nothing extra deliberately: store
   pages should get the compact version wherever .checks appears, the same way store.css refining
   .btn below applies everywhere in the store, not just on one page. */
.checks { gap: 2px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.check { padding: 8px 2px; border-bottom: 0; }
.check b { display: block; font-size: 0.87rem; font-weight: 700; color: var(--ink); }
.check span.d { display: block; font-size: 0.81rem; color: var(--ink-faint); }

/* ------------------------------------------------------------------------------------------------
   3. BUTTONS — intentionally overrides site.css's .btn/.btn-primary/.btn-outline for the store
   context. site.css's versions are the marketing hero's CTA (gold-on-navy, no disabled/active
   states, no minimum touch target — it never needed them next to a static headline). Commerce
   buttons are pressed constantly, need a real :active tactile state, a :disabled state that isn't
   "just dimmer", and a guaranteed 44px target. store.css loads after site.css, so this table wins
   inside every storefront-rendered page without touching a single marketing template.
   ------------------------------------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 44px; border-radius: 999px; font-weight: 800; font-size: 0.87rem; border: 2px solid transparent; cursor: pointer; transition: transform 160ms var(--ease), background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; transform: none !important; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--green); color: #fff; box-shadow: 0 12px 22px -14px rgba(0,157,79,0.55); }
.btn-primary:hover:not(:disabled) { background: var(--green-deep); transform: translateY(-1px); }

.btn-navy { background: var(--brand); color: #fff; box-shadow: 0 12px 22px -14px rgba(25,79,144,0.5); }
.btn-navy:hover:not(:disabled) { background: var(--brand-deep); transform: translateY(-1px); }

.btn-outline { background: #fff; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover:not(:disabled) { background: var(--brand); color: #fff; }

.btn-wa { background: var(--wa-green); color: #fff; box-shadow: 0 12px 22px -14px rgba(37,211,102,0.55); }
.btn-wa:hover:not(:disabled) { background: #1fb959; transform: translateY(-1px); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; min-height: 38px; font-size: 0.78rem; }

/* ------------------------------------------------------------------------------------------------
   4. HEADER EXTRAS — the store's additions to site.css's header (cart tool + badge, and the
   account tool's logged-in dropdown). Everything else in the header/nav/mega-menu is site.css's
   own .site-header/.nav/.nav-link/.tool/.account/.drop/.mega/.mega-grid/.burger, reused as-is.
   ------------------------------------------------------------------------------------------------ */
.tool-cart { position: relative; }
.cart-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--brand-deeper); font-size: 0.65rem; font-weight: 800; display: grid; place-items: center; transition: transform 200ms var(--ease); font-variant-numeric: tabular-nums; }
.cart-badge.is-pulse { animation: cartBadgePulse 420ms var(--ease); }
@keyframes cartBadgePulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Small addition to site.css's .mega-edu-lane (the Education mega's two University/Courses
   lanes): a one-line description under each lane heading. site.css defines the lane's width but
   never a <p> inside it, because the coming-soon version it originally shipped had no copy. */
.mega-edu-lane p { font-size: 0.78rem; color: var(--ink-faint); padding: 0 6px; max-width: 22ch; }

/* Net-new dropdown for the Shop nav item (product categories) and the logged-in Account tool.
   Reuses site.css's own .drop panel/.drop a styling; only the badge and the hover-root are new. */
.drop-count { font-size: 0.72rem; font-weight: 700; color: var(--ink-faint); }
.drop-static { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 0.87rem; font-weight: 600; color: var(--ink-soft); background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.drop-static:hover { background: var(--brand-tint); color: var(--brand); }

/* .account-wrap is the positioned root for the logged-in Account tool's .drop panel — site.css's
   hover-opens-.drop mechanism is `li:hover > .drop`/`li:focus-within > .drop`; the header's
   account tool sits in .header-tools, not an <li>, so this repeats that exact mechanism one level
   up rather than inventing a second one. */
.account-wrap { position: relative; }
.account-wrap:hover > .drop, .account-wrap:focus-within > .drop { opacity: 1; visibility: visible; transform: none; }
.account-wrap > .drop { right: 0; left: auto; min-width: 190px; }

/* ------------------------------------------------------------------------------------------------
   5. CATEGORY TILES — store home's "Shop by category" section.
   ------------------------------------------------------------------------------------------------ */
.cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .cat-tiles { grid-template-columns: 1fr; } }
.cat-tile { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 10px 22px -20px rgba(25,79,144,0.4); transition: transform 160ms var(--ease), border-color 160ms ease, box-shadow 200ms var(--ease); }
.cat-tile:hover, .cat-tile:focus-visible { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 18px 32px -18px rgba(25,79,144,0.5); }
.cat-tile-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; }
.cat-tile-ic svg { width: 24px; height: 24px; }
.cat-tile h3 { font-size: 1rem; color: var(--ink); font-weight: 800; }
.cat-tile p { margin-top: 3px; font-size: 0.8rem; color: var(--ink-faint); }
.cat-tile-arrow { margin-left: auto; color: var(--brand); flex: none; }

/* ------------------------------------------------------------------------------------------------
   6. PRODUCT CARD (pcard) — the single card used on store home, category listing, search results,
   cart recommendations and related products. Deliberately denser than the marketing .cat-card/
   .svc-card: less padding, more facts per card (price + stock + size availability all visible
   with no click, per the Direction C brief).

   NAMING: does NOT reuse site.css's existing .prod-card/.prod-grid/.prod-thumb — see this stage's
   return value for why those names are being retired, not extended.
   ------------------------------------------------------------------------------------------------ */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .pgrid { grid-template-columns: 1fr; } }
/* Fixed 4-up variant for contexts whose own container is narrower than the shell (e.g. a related-
   products rail) and should not fall back to the 3/2/1-up breakpoints meant for the full shell. */
.pgrid.pgrid-sm { grid-template-columns: repeat(4, 1fr); }

.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), border-color 160ms ease; }
.pcard:hover, .pcard:focus-visible { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 16px 28px -18px rgba(25,79,144,0.45); }
.pcard.is-out { opacity: 0.72; }
.pcard-link { display: block; }

/* Exactly one photo per product (never a gallery — see the project brief). object-fit:contain,
   not cover: a single clinic-supply photo on a flat backdrop should never be cropped to fill a
   square, or genuinely wide/tall items (a resistance band coil vs. a foam roller) get mangled. */
.pcard-thumb { position: relative; aspect-ratio: 1 / 1; background: #f3f1ee; display: block; }
.pcard-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.pcard-cat { position: absolute; left: 8px; top: 8px; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); background: rgba(255,255,255,0.92); padding: 3px 8px; border-radius: 999px; }
.pcard-stockflag { position: absolute; right: 8px; top: 8px; font-size: 0.63rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.pcard-stockflag.low { background: color-mix(in oklch, var(--gold) 22%, white); color: color-mix(in oklch, var(--gold) 60%, black 40%); }
.pcard-stockflag.out { background: var(--danger-tint); color: var(--danger); }

.pcard-body { padding: 11px 12px 12px; display: grid; gap: 5px; flex: 1 1 auto; }
.pcard-name { font-size: 0.87rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pcard-facts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.pcard-price { font-size: 0.95rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.pcard-stock { font-size: 0.72rem; font-weight: 700; color: var(--green); }
.pcard-stock.low { color: color-mix(in oklch, var(--gold) 60%, black 40%); }
.pcard-stock.out { color: var(--danger); }

.pcard-sizes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px; }
.pcard-size { font-size: 0.66rem; font-weight: 800; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-soft); }
.pcard-size.avail { border-color: var(--brand); color: var(--brand); }
.pcard-size.oos { color: var(--ink-faint); text-decoration: line-through; opacity: 0.55; }

.pcard-add { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; min-height: 40px; border-radius: 9px; border: 1.5px solid var(--green); background: #fff; color: var(--green); font-weight: 800; font-size: 0.79rem; cursor: pointer; transition: background 150ms ease, color 150ms ease; }
.pcard-add:hover:not(:disabled) { background: var(--green); color: #fff; }
.pcard-add:active:not(:disabled) { transform: scale(0.97); }
.pcard-add:disabled { border-color: var(--line); color: var(--ink-faint); cursor: not-allowed; }

/* ------------------------------------------------------------------------------------------------
   7. LISTING — category/search page: sidebar filters + result grid.
   ------------------------------------------------------------------------------------------------ */
.listing { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; }
@media (max-width: 860px) { .listing { grid-template-columns: 1fr; } }

.filters { position: sticky; top: 12px; display: grid; gap: 22px; }
@media (max-width: 860px) { .filters { position: static; } }
.filter-group h4 { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.filter-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; min-height: 30px; }
.filter-row input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.filter-row .cnt { margin-left: auto; font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.filters-note { font-size: 0.76rem; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 12px; }

.listing-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.result-count { font-size: 0.82rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sort-select { border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; min-height: 40px; font-size: 0.82rem; font-weight: 600; color: var(--ink); background: #fff; cursor: pointer; }
.sort-select:focus-visible { border-color: var(--brand); }

/* ------------------------------------------------------------------------------------------------
   8. EMPTY STATES — one canonical component for every "nothing here" state in the store
   (empty cart, empty listing after filtering, no University videos yet, no upcoming courses).

   Consolidated from the mockup's three near-identical dashed-box variants (.cart-empty, .vempty,
   .empty-note) into a single .empty-state — see this stage's return value for why: three
   almost-identical primitives in a contract that twelve agents build against just invites three
   slightly different re-implementations of the same "nothing here" box.
   ------------------------------------------------------------------------------------------------ */
.empty-state { display: none; text-align: center; padding: 40px 18px; border: 1.5px dashed var(--line); border-radius: var(--radius-card); color: var(--ink-faint); font-size: 0.87rem; }
.empty-state.is-shown { display: block; }
.empty-state-ic { width: 56px; height: 56px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; margin: 0 auto 14px; }
.empty-state-ic svg { width: 26px; height: 26px; }
.empty-state h3 { font-size: 1rem; font-weight: 800; color: var(--ink); }
.empty-state p { margin-top: 6px; font-size: 0.85rem; color: var(--ink-faint); }
.empty-state .btn { margin-top: 16px; }

/* ------------------------------------------------------------------------------------------------
   9. PRODUCT DETAIL
   ------------------------------------------------------------------------------------------------ */
.pdetail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 50px); align-items: start; }
@media (max-width: 860px) { .pdetail { grid-template-columns: 1fr; } }
.pdetail-photo { aspect-ratio: 1 / 1; background: #f3f1ee; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.pdetail-photo img { width: 100%; height: 100%; object-fit: contain; padding: 26px; }
.pdetail-trust { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }

.pdetail-eyebrow { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
.pdetail h1 { margin-top: 6px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--ink); font-weight: 800; }
.pdetail .sku { margin-top: 4px; font-size: 0.78rem; color: var(--ink-faint); }
.pdetail-price { margin-top: 12px; font-size: 1.55rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.pdetail-desc { margin-top: 10px; color: var(--ink-soft); font-size: 0.93rem; max-width: 52ch; }

.opt-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.opt-head span.lbl { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.opt-head span.sel { font-size: 0.79rem; font-weight: 700; color: var(--ink); }
.opt-row { display: flex; gap: 9px; flex-wrap: wrap; }
.opt-color { width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--line); cursor: pointer; display: grid; place-items: center; padding: 3px; background: none; }
.opt-color .sw { width: 100%; height: 100%; border-radius: 999px; }
.opt-color.is-sel { border-color: var(--brand); box-shadow: 0 0 0 2px #fff inset; }
.opt-color:focus-visible { outline-offset: 3px; }
/* .opt-size doubles as the guarded variant-picker button: `disabled` (server truly has no such
   combination) and `.oos` (combination exists but is out of stock) render identically on purpose
   — both mean "you cannot buy this right now" — so a page template can use either the native
   attribute or the class depending on how its own JS/Blade tracks state. */
.opt-size { min-width: 46px; height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 0.85rem; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.opt-size .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); display: none; }
.opt-size.low .dot { display: block; }
.opt-size.is-sel { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.opt-size:disabled, .opt-size.oos { color: var(--ink-faint); border-color: var(--line); text-decoration: line-through; cursor: not-allowed; background: var(--surface); }

.avail-line { margin-top: 14px; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.avail-line svg { width: 15px; height: 15px; flex: none; }
.avail-line.ok { color: var(--green); }
.avail-line.warn { color: color-mix(in oklch, var(--gold) 60%, black 40%); }
.avail-line.bad { color: var(--danger); }

/* Quantity stepper — used on product detail (full size) and cart lines (.sm). Guards its own
   bounds visually via :disabled on the +/- buttons; the page template supplies the actual
   min/max/step logic server + client side, this only renders whatever state it is told. */
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty-stepper button { width: 40px; height: 40px; background: #fff; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--brand); }
.qty-stepper button:hover:not(:disabled) { background: var(--brand-tint); }
.qty-stepper button:active:not(:disabled) { transform: scale(0.94); }
.qty-stepper button:disabled { color: var(--ink-faint); cursor: not-allowed; }
.qty-stepper input { width: 42px; text-align: center; border: 0; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); height: 40px; font-weight: 800; font-size: 0.9rem; }
.qty-stepper.sm button { width: 32px; height: 32px; }
.qty-stepper.sm input { width: 34px; height: 32px; font-size: 0.82rem; }

.qty-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.pdetail-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.pdetail-actions .btn { flex: 1 1 180px; }

/* ------------------------------------------------------------------------------------------------
   10. CART
   ------------------------------------------------------------------------------------------------ */
.cart-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
@media (max-width: 900px) { .cart-wrap { grid-template-columns: 1fr; } }
.cart-lines { display: grid; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 68px 1fr auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cart-line.is-unavailable { opacity: 0.6; }
.cart-thumb { width: 68px; height: 68px; border-radius: 9px; background: #f3f1ee; overflow: hidden; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-info h4 { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.cart-info .variant { font-size: 0.78rem; color: var(--ink-faint); margin-top: 2px; }
.cart-info .unit { font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cart-line-right { display: grid; gap: 8px; justify-items: end; }
.cart-line-total { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.cart-line-actions { display: flex; align-items: center; gap: 10px; }
.remove-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-faint); display: grid; place-items: center; cursor: pointer; }
.remove-btn:hover { border-color: var(--danger); color: var(--danger); }
.remove-btn:active { transform: scale(0.94); }

/* Order summary — reused as-is for the cart sidebar AND checkout sidebar, so the two totals
   blocks can never silently drift into different-looking numbers. */
.summary-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; padding: 20px; position: sticky; top: 12px; }
.summary-card h3 { font-size: 0.98rem; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 0.87rem; color: var(--ink-soft); }
.summary-row.total { border-top: 1.5px solid var(--line); margin-top: 6px; padding-top: 12px; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.summary-row .v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.summary-note { font-size: 0.76rem; color: var(--ink-faint); margin-top: 4px; }
.summary-actions { display: grid; gap: 9px; margin-top: 16px; }

/* ------------------------------------------------------------------------------------------------
   11. CHECKOUT
   ------------------------------------------------------------------------------------------------ */
.checkout-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
@media (max-width: 900px) { .checkout-wrap { grid-template-columns: 1fr; } }
.co-block { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; padding: 20px; margin-bottom: 16px; }
.co-block h3 { font-size: 0.92rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.co-block .sub { font-size: 0.79rem; color: var(--ink-faint); margin-bottom: 14px; }

/* Form fields — net new; no shared form styling existed to reuse (site.css has no <input>/
   <select> rules of its own). This is now the store's one field system: filters above reuse
   .filter-row's own checkbox styling, everything else (checkout, future account forms) uses this. */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea { border: 1.5px solid var(--line); border-radius: 9px; padding: 11px 12px; min-height: 44px; font-size: 0.87rem; background: #fff; color: var(--ink); font-family: inherit; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brand); }
.field .field-error { font-size: 0.76rem; font-weight: 700; color: var(--danger); }
.field-check { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.field-check input { width: 18px; height: 18px; accent-color: var(--brand); }

.method-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .method-row { grid-template-columns: 1fr; } }
.method-opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.method-opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.method-opt.is-sel { border-color: var(--brand); background: var(--brand-tint); }
.method-opt b { display: block; font-size: 0.87rem; color: var(--ink); }
.method-opt span { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-top: 2px; }
.reveal-block { margin-top: 14px; }
.pickup-box { margin-top: 14px; background: var(--brand-tint); border-radius: 10px; padding: 14px 16px; font-size: 0.84rem; color: var(--ink-soft); display: flex; gap: 10px; }
.pickup-box svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: 2px; }

.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1 1 auto; }
.coupon-msg { font-size: 0.78rem; margin-top: 6px; display: none; }
.coupon-msg.ok { color: var(--green); display: block; }
.coupon-msg.bad { color: var(--danger); display: block; }

.pay-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pay-chip { font-size: 0.73rem; font-weight: 800; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; }
.co-trust { text-align: center; font-size: 0.76rem; color: var(--ink-faint); margin-top: 12px; }

/* Generic alert (server-side validation summary, payment failure banner, etc.) — net new, no
   equivalent existed anywhere in the storefront's own styling. */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: 10px; font-size: 0.86rem; margin-bottom: 16px; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-error { background: var(--danger-tint); color: color-mix(in oklch, var(--danger) 75%, black 25%); border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent); }
.alert-ok { background: color-mix(in oklch, var(--green) 12%, white 88%); color: var(--green-deep); border: 1px solid color-mix(in oklch, var(--green) 30%, transparent); }
.alert ul { margin-top: 4px; padding-left: 1.1em; list-style: disc; }

/* ------------------------------------------------------------------------------------------------
   12. UNIVERSITY (video library)
   ------------------------------------------------------------------------------------------------ */
.uni-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; border-radius: var(--radius-card); padding: 18px 22px; margin-bottom: 22px; }
.uni-band .t { max-width: 60ch; }
.uni-band b { display: block; font-size: 1.02rem; font-weight: 800; }
.uni-band span { display: block; margin-top: 3px; font-size: 0.83rem; color: color-mix(in oklch, white 82%, transparent); }

.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }
.vcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform 160ms var(--ease), box-shadow 200ms var(--ease); }
.vcard:hover, .vcard:focus-within { transform: translateY(-2px); box-shadow: 0 16px 28px -18px rgba(25,79,144,0.45); }
.vthumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(155deg, var(--brand) 0%, var(--brand-deeper) 100%); display: grid; place-items: center; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb .playbtn { width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 2px solid rgba(255,255,255,0.6); color: #fff; display: grid; place-items: center; }
.vthumb .playbtn svg { width: 18px; height: 18px; margin-left: 2px; }
.vthumb .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(9,20,36,0.72); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.vthumb .lockflag { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,0.92); color: var(--brand); font-size: 0.63rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; display: flex; align-items: center; gap: 4px; }
.vthumb .lockflag svg { width: 11px; height: 11px; }
.vbody { padding: 12px 14px 14px; }
.vbody .track { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); }
.vbody h4 { margin-top: 4px; font-size: 0.9rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.vbody .instr { margin-top: 3px; font-size: 0.79rem; color: var(--ink-faint); }
.vbody .vcta { margin-top: 10px; width: 100%; padding: 9px; min-height: 40px; border-radius: 9px; font-size: 0.79rem; font-weight: 800; cursor: pointer; border: 1.5px solid var(--brand); background: #fff; color: var(--brand); }
.vbody .vcta:hover { background: var(--brand); color: #fff; }
.vbody .vcta.locked { border-color: var(--line); color: var(--ink-faint); }
.vbody .vcta.locked:hover { background: var(--surface); color: var(--ink-faint); }

/* ------------------------------------------------------------------------------------------------
   13. COURSES
   ------------------------------------------------------------------------------------------------ */
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .cgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cgrid { grid-template-columns: 1fr; } }
.ccard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px; display: grid; gap: 9px; transition: transform 160ms var(--ease), box-shadow 200ms var(--ease); }
.ccard:hover, .ccard:focus-within { transform: translateY(-2px); box-shadow: 0 16px 28px -18px rgba(25,79,144,0.45); }
.ccard.is-soldout, .ccard.is-unscheduled { opacity: 0.68; }
.ccard .track { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); }
.ccard h3 { font-size: 0.98rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.ccard .meta { display: grid; gap: 4px; font-size: 0.79rem; color: var(--ink-soft); }
.ccard .meta li { display: flex; gap: 7px; align-items: center; }
.ccard .meta svg { width: 14px; height: 14px; color: var(--ink-faint); flex: none; }

.seat-wrap { margin-top: 2px; }
.seat-txt { display: flex; justify-content: space-between; font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.seat-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.seat-bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.seat-bar.low span { background: var(--gold); }
.seat-bar.out span { background: var(--danger); }

.ccard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ccard-price { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }

/* Unscheduled state — every course at launch. Not a generic .empty-state (that is for a whole
   grid with nothing in it); this is a per-card notice replacing the date/seats/price it cannot
   show yet, so it stays a small addition to .ccard rather than swapping the whole component. */
.ccard-unscheduled-note { font-size: 0.79rem; color: var(--ink-faint); font-style: italic; }

.cdetail { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
@media (max-width: 900px) { .cdetail { grid-template-columns: 1fr; } }
.curriculum { display: grid; gap: 2px; margin-top: 14px; }
.curriculum li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-soft); }
.curriculum li:last-child { border-bottom: 0; }
.curriculum li b { color: var(--ink); }
.curriculum .num { width: 22px; height: 22px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; flex: none; margin-top: 1px; }

.instr-card { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.instr-avatar { width: 52px; height: 52px; border-radius: 999px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.instr-avatar svg { width: 24px; height: 24px; }
.instr-card h4 { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.instr-card p { margin-top: 2px; font-size: 0.8rem; color: var(--ink-faint); }

.booking-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; padding: 20px; position: sticky; top: 12px; }
.booking-card .price { font-size: 1.4rem; font-weight: 800; color: var(--brand); }
.booking-card .price span { font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }
.booking-meta { display: grid; gap: 9px; margin: 14px 0; }
.booking-meta li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.84rem; color: var(--ink-soft); }
.booking-meta svg { width: 16px; height: 16px; color: var(--brand); flex: none; margin-top: 1px; }
.qty-line { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; }
.qty-line .lbl { font-size: 0.84rem; font-weight: 700; color: var(--ink); }
.booking-total { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.map-mini { border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line); margin-top: 14px; }
.map-mini iframe { width: 100%; height: 100%; border: 0; }

/* Booking-not-open state: no date scheduled yet. Every one of the 25 courses is in this state at
   launch (see project brief) — this is not an edge case, it is the default, so it gets a real,
   deliberate treatment rather than an afterthought "TBA" label. No booking button renders at all
   in this state (page templates simply omit .btn-primary here, there is nothing to disable-and-
   grey per the "never a dead button" rule elsewhere in this system). */
.booking-unscheduled { text-align: center; padding: 8px 4px 4px; }
.booking-unscheduled svg { width: 30px; height: 30px; color: var(--ink-faint); margin: 0 auto 10px; }
.booking-unscheduled p { font-size: 0.87rem; color: var(--ink-soft); }
.booking-unscheduled .hint { margin-top: 6px; font-size: 0.78rem; color: var(--ink-faint); }

/* ------------------------------------------------------------------------------------------------
   14. MOTION
   ------------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cart-badge.is-pulse,
  .pcard, .cat-tile, .vcard, .ccard,
  .btn, .chip, .qty-stepper button, .remove-btn, .pcard-add {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Services table
   Moved here out of storefront/partials/services-table.blade.php. It rendered
   inline behind an @once guard, which worked, but it put the string
   ".svc-table td.svc-price" into the page body — and StorefrontCatalogTest
   counts "svc-price" occurrences to prove a category rendered exactly one
   price cell per service. Shipping stylesheet text inside the document made
   that count read one too high on every category page.
   ========================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.svc-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.svc-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; min-width: 620px; }
.svc-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 12px 14px;
    border-bottom: 1.5px solid var(--line);
    white-space: nowrap;
}
.svc-table th.svc-table-num { text-align: right; }
.svc-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    vertical-align: middle;
}
.svc-table tbody tr:last-child td { border-bottom: 0; }
.svc-table tbody tr:hover { background: var(--brand-tint); }

.svc-table-name a {
    font-weight: 700;
    color: var(--ink);
    display: inline-block;
    padding: 4px 0;
}
.svc-table-name a:hover { color: var(--brand); text-decoration: underline; }

.svc-badge-course {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--green);
    background: color-mix(in oklch, var(--green) 12%, white 88%);
    padding: 3px 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.svc-table-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-table td.svc-price { font-weight: 800; color: var(--brand); }

.svc-table-desc { color: var(--ink-faint); font-size: 0.83rem; max-width: 34ch; }

.svc-table-save { width: 44px; text-align: center; }
/* wishlist-heart.blade.php is a shared partial this unit does not own; its own button
   keeps whatever site-wide styling it already has — this only guarantees the table cell
   around it never collapses below the 44px minimum touch target the brief requires. */
.svc-table-save .wishlist-heart-form { display: inline-flex; }
.svc-table-save .wishlist-heart { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: 0; font-size: 1.1rem; }

@media (max-width: 560px) {
    .svc-table-desc { display: none; }
}

/* The WhatsApp enquiry is a full-width secondary, not a third competitor in the
   button row. .pdetail-actions .btn sets flex:1 1 180px, which overrode the
   .btn-block already on that link and squeezed three buttons onto one row until
   "Enquire via WhatsApp" wrapped onto two lines. The approved design shows two
   actions here; this keeps the mandatory WhatsApp route without crowding them. */
.pdetail-actions .btn-wa { flex: 1 0 100%; }


/* ==========================================================================
   Header: rich dropdown + inline search
   Added 2026-07-29. Both live here rather than in site.css because they are
   the store header's own additions; the shared chrome above is untouched.
   ========================================================================== */

/* A .drop whose entries need a line of explanation. Education uses it: two
   destinations where the label alone ("University") does not tell a patient
   what they are clicking into. Wider than a plain .drop, nowhere near a mega. */
.drop-rich { width: 290px; padding: 8px; }
.drop-rich a { display: block; padding: 11px 12px; border-radius: 9px; }
.drop-rich-title { display: block; font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.drop-rich-sub { display: block; margin-top: 3px; font-size: 0.77rem; line-height: 1.45; color: var(--ink-faint); }
.drop-rich a:hover .drop-rich-title { color: var(--brand); }

/* --- Inline header search ------------------------------------------------ */

.hsearch { position: relative; display: flex; align-items: center; }
/* Above the field it overlays, so the icon stays clickable and visible. */
.hsearch-toggle { position: relative; z-index: 1; }

/* Collapsed to nothing rather than display:none, so opening is a width
   transition the eye can follow instead of a jump. */
/* Absolutely positioned, expanding leftwards from the header's right edge.
   In flow it pushed the nav sideways and wrapped "Our Services" onto two
   lines the moment it opened — a search box should not rearrange the
   navigation to make room for itself. */
.hsearch-field {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  padding: 0;
  border: 1.4px solid transparent;
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: width 260ms var(--ease), opacity 180ms var(--ease), padding 260ms var(--ease), border-color 180ms ease;
}
.hsearch-field::placeholder { color: var(--ink-faint); }
.hsearch-field::-webkit-search-cancel-button { display: none; }

.hsearch.is-open .hsearch-field {
  /* Right padding clears the magnifier, which sits above the field. */
  width: clamp(190px, 24vw, 300px);
  padding: 9px 42px 9px 14px;
  border-color: var(--line);
  background: #fff;
  opacity: 1;
  pointer-events: auto;
}
.hsearch.is-open .hsearch-field:focus { outline: none; border-color: var(--brand); }
.hsearch.is-open .hsearch-toggle { color: var(--brand); }

.hsearch-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--z-dropdown, 60);
  width: clamp(280px, 30vw, 380px);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* Tinted to the brand hue, never pure black — same formula as every other
     raised surface in this file. */
  box-shadow: 0 24px 48px -28px rgba(25, 79, 144, 0.45);
}

.hsearch-group + .hsearch-group { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.hsearch-group-label {
  display: block;
  padding: 8px 12px 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hsearch-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}
.hsearch-item:hover,
.hsearch-item.is-active { background: var(--brand-tint); color: var(--brand); }
.hsearch-item-meta { flex: none; font-size: 0.78rem; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hsearch-item.is-active .hsearch-item-meta { color: var(--brand); }

.hsearch-note { padding: 14px 12px; font-size: 0.83rem; color: var(--ink-faint); }
.hsearch-all {
  display: block;
  margin-top: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--brand);
}
.hsearch-all:hover { background: var(--brand-tint); }

/* Skeleton rows, sized like the results they stand in for, so the panel does
   not resize under the pointer when the answer arrives. */
.hsearch-skeleton { padding: 9px 12px; }
.hsearch-skeleton span {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--line) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: hsearchShimmer 1.3s ease-in-out infinite;
}
.hsearch-skeleton span + span { margin-top: 8px; width: 62%; }
@keyframes hsearchShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 900px) {
  .hsearch.is-open .hsearch-field { width: clamp(150px, 40vw, 220px); }
  .hsearch-panel { width: min(84vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  .hsearch-field { transition: opacity 120ms linear; }
  .hsearch-skeleton span { animation: none; }
}

/* Two actions per card. "Add to cart" stays the primary and keeps its full
   weight; "Buy now" sits beside it as an outline so the card offers a shortcut
   without turning into two competing green blocks. Stacks on narrow cards,
   where side-by-side would wrap the labels. */
.pcard-actions { display: flex; gap: 8px; }
.pcard-actions .pcard-add { flex: 1 1 auto; }
.pcard-buy {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1.4px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.pcard-buy:hover { background: var(--brand); color: #fff; }
.pcard-buy:active { transform: translateY(1px); }
.pcard-buy:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 520px) {
  .pcard-actions { flex-direction: column; }
  .pcard-buy { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard-buy { transition: none; }
}

/* Hierarchy once there are two buttons. The mockup's .pcard-add is an outline
   because it was the only control on the card; beside a second button it reads
   as an equal, and a card offering two equal choices makes the visitor decide
   which is the normal one. Filled green when paired, so "Add to cart" is
   obviously the default and "Buy now" is obviously the shortcut. Radius matched
   to .pcard-add rather than the pill used elsewhere, since these two sit
   shoulder to shoulder. */
.pcard-actions .pcard-add { background: var(--green); color: #fff; }
.pcard-actions .pcard-add:hover:not(:disabled) { background: var(--brand-deep, #16406f); border-color: var(--brand-deep, #16406f); }
.pcard-actions .pcard-add:disabled { background: #fff; }
.pcard-buy { border-radius: 9px; min-height: 40px; margin-top: 6px; font-size: 0.79rem; font-weight: 800; }