/* ══ Hoodify store ═══════════════════════════════════════════════════
   Loaded after ../assets/css/site.css, which supplies every base token
   (surfaces, text tones, accent, type, space, radius, motion), the nav,
   the .button family and the footer. This file adds the store's
   components and nothing else.

   The component patterns come from 21st.dev and were rebuilt in plain
   CSS on these tokens, not copied with their Tailwind defaults:
     Product Card  (ravikatiyar162/product-card-2)  → .product-card, .product-grid
     Table Dialog  (ruixen.ui/table-dialog)         → .ui-table, .ui-badge, admin dialogs
       and the shadcn/ui primitives it ships with:
       Dialog → .ui-dialog   Input → .ui-input   Label → .ui-label
       Button → .ui-btn (admin); the shop maps its variants onto the
       site's own .button-solid / .button-quiet instead, so an order
       button looks like every other call to action on the site

   Same rule as site.css: no raw value below the token block. A
   breakpoint redefines a token; it never overrides a rule.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* surfaces and ink, named for what they do in the store */
  --store-surface:var(--surface-night);
  --store-raised:var(--surface-night-soft);
  --store-line:var(--line-on-dark);
  --store-line-strong:rgba(238,233,223,.30);
  --store-fill:var(--fill-on-dark);
  --store-text:var(--on-dark-1);
  --store-muted:var(--on-dark-2);
  --store-faint:var(--on-dark-3);
  /* the site's own error pair, from its enquiry form */
  --store-danger-line:#c96a5c;
  --store-danger-ink:#e08a7d;
  --store-danger-fill:rgba(201,106,92,.14);
  /* depth: the nav's shadow at rest, a longer one on lift */
  --store-shadow:0 12px 30px rgba(0,0,0,.16);
  --store-shadow-lift:0 22px 44px rgba(0,0,0,.34);
  --store-scrim:rgba(10,11,8,.72);          /* the piece dialog's backdrop */
  --store-input-shadow:0 1px 2px rgba(0,0,0,.18);
  --store-ring:rgba(238,233,223,.18);
  --store-ring-w:3px;
  /* shape */
  --store-pill:999px;
  --store-inner-radius:calc(var(--radius) / 2);
  --store-card-ratio:4 / 5;
  --store-thumb:48px;
  --store-thumb-lg:64px;
  --store-preview:112px;
  --store-control-h:var(--tap-min);
  --store-control-sm:40px;
  --store-switch-w:44px;
  --store-switch-track:24px;
  --store-switch-knob:18px;
  --store-textarea-h:92px;
  --store-name-min:220px;
  --store-dialog-w:460px;
  --store-dialog-wide:600px;
  --store-login-w:380px;
  --store-table-h:70vh;
  /* motion: the card's lift and zoom, the grid's stagger, the dialog's entry */
  --store-lift:-5px;
  --store-zoom:1.05;
  --store-rise:20px;
  --store-stagger:100ms;
  --store-dialog-from:.96;
  --store-disabled:.5;
  /* layout that changes at breakpoints */
  --store-cols:4;
  --store-field-cols:2;
  --store-footer-dir:row;
  --store-footer-justify:flex-end;
  --store-shop-top:calc(var(--nav-h) + var(--sp-10));
}
@media (max-width:1100px){ :root{ --store-cols:3 } }
@media (max-width:820px) { :root{ --store-cols:2 } }
@media (max-width:560px) {
  :root{ --store-cols:1; --store-field-cols:1; --store-footer-dir:column-reverse;
         --store-footer-justify:stretch; --store-shop-top:calc(var(--nav-h) + var(--sp-8)) }
}

/* author display values beat the UA [hidden] rule; the grid and the
   dialog panes set display, so hidden has to be made to win */
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.store-lock{overflow:hidden}

/* ══ SHOP PAGE ════════════════════════════════════════════════════ */
.store-page{background:var(--store-surface);color:var(--store-text)}
.shop{position:relative;min-height:100svh;padding-top:var(--store-shop-top)}
.shop-head{margin-bottom:var(--sp-9)}
.shop-head h1{margin:var(--sp-4) 0 var(--sp-5);font-size:var(--fs-h2);max-width:12ch}
.shop-status{max-width:52ch;color:var(--store-muted);font-size:var(--fs-body);line-height:var(--lh-body)}
.shop-status a{color:var(--store-text)}
.nav-links a[aria-current="page"]{color:var(--store-text)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.shop-footer{padding:var(--sp-6) 0}
.shop-footer a{color:inherit;text-decoration:none;border-bottom:1px solid var(--store-line)}
.shop-footer a:hover{color:var(--gold-soft);border-bottom-color:currentColor}

/* ── product grid ─ grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 ─ */
.product-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--store-cols),minmax(0,1fr));gap:var(--sp-6)}
/* the demo's staggered entrance: each item rises in, 100ms after the last */
.product-grid > li{animation:store-rise var(--dur-slow) var(--ease-out) both;
  animation-delay:calc(var(--i, 0) * var(--store-stagger))}
@keyframes store-rise{from{opacity:0;transform:translateY(var(--store-rise))}to{opacity:1;transform:none}}

/* ── product card ─────────────────────────────────────────────────────
   Kept from the component: centred column, image on top, name and a
   muted line, the price large, a pill under it, a 5px lift and a 1.05
   image zoom on hover.
   Changed: the image is a 4:5 cover crop instead of object-contain in a
   160px box -- these are garments photographed on a set, not product
   cut-outs, and contain left them floating in empty bands. The pill
   carries "Cash on delivery" where the original had a discount, and the
   card gets the button the brief asks for. */
.product-card{display:flex;flex-direction:column;align-items:center;height:100%;
  padding:var(--sp-5);text-align:center;
  background:var(--store-raised);color:var(--store-text);
  border:1px solid var(--store-line);border-radius:var(--radius);box-shadow:var(--store-shadow);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out)}
.product-card:hover{transform:translateY(var(--store-lift));box-shadow:var(--store-shadow-lift);
  border-color:var(--store-line-strong)}
.product-card-media{width:100%;margin-bottom:var(--sp-5);aspect-ratio:var(--store-card-ratio);
  overflow:hidden;border-radius:var(--store-inner-radius);background:var(--store-surface)}
.product-card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out)}
.product-card:hover .product-card-media img{transform:scale(var(--store-zoom))}
.product-card-body{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);flex-grow:1}
/* site.css sizes every h2 as a display headline; a card title is not one.
   It takes the register of the landing page's own card titles instead
   (.specimen h3, .path h3): the display face, in that type system's case. */
.product-card-name{margin:0;max-width:none;font-family:var(--font-display);font-size:var(--fs-title);
  font-weight:var(--display-weight);line-height:var(--lh-title);letter-spacing:var(--display-ls);
  text-transform:var(--display-case)}
.product-card-tagline{margin:0;color:var(--store-muted);font-size:var(--fs-small);line-height:var(--lh-body);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-card-pricing{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4)}
.product-card-price{font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:500;color:var(--gold-soft)}
.product-card-pill{display:inline-flex;align-items:center;padding:var(--sp-1) var(--sp-3);
  border-radius:var(--store-pill);background:var(--store-fill);color:var(--store-muted);
  font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:var(--ls-micro);text-transform:uppercase}
.product-card-cta{width:100%;margin-top:var(--sp-5)}

/* ══ DIALOG ─ shadcn/ui Dialog ════════════════════════════════════════
   Kept: the centred panel, the dark scrim, the fade-and-zoom entrance,
   the header / body / footer stack, the close button in the corner, and
   a footer that stacks with the primary action on top on a phone.
   Changed: a native <dialog> in place of Radix, so the site needs no
   framework, and the panel is the night surface, not white. */
.ui-dialog{position:fixed;inset:0;margin:auto;height:fit-content;
  width:min(var(--store-dialog-w),calc(100vw - 2 * var(--sp-4)));max-width:none;
  max-height:calc(100dvh - 2 * var(--sp-4));overflow:auto;padding:0;
  border:1px solid var(--store-line);border-radius:var(--radius);
  background:var(--store-raised);color:var(--store-text);box-shadow:var(--store-shadow-lift)}
.ui-dialog--wide{width:min(var(--store-dialog-wide),calc(100vw - 2 * var(--sp-4)))}
.ui-dialog::backdrop{background:var(--store-scrim)}
.ui-dialog[open]{animation:store-dialog-in var(--dur-base) var(--ease-out)}
.ui-dialog[open]::backdrop{animation:store-fade var(--dur-base) var(--ease-out)}
@keyframes store-dialog-in{from{opacity:0;transform:scale(var(--store-dialog-from))}to{opacity:1;transform:none}}
@keyframes store-fade{from{opacity:0}to{opacity:1}}
.ui-dialog-inner,.order-form,.order-done{position:relative;display:grid;gap:var(--sp-4)}
.ui-dialog-inner{padding:var(--sp-6)}
.ui-dialog-header{display:grid;gap:var(--sp-2);padding-right:var(--sp-8)}
/* interface titles, not headlines: site.css uppercases every h1/h2 */
.ui-dialog-title,.admin-title,.ui-card-title{text-transform:none}
/* ...and caps their measure with :root[data-type] h1/h2 {max-width:14ch/16ch},
   which outranks a single class. These match its specificity (0,2,1) and
   come later, so the titles take their container's width. */
.ui-dialog h2.ui-dialog-title,.product-card h2.product-card-name,
.admin-main h1.admin-title,.ui-card h1.ui-card-title{max-width:none}
.ui-dialog-title{margin:0;max-width:none;font-family:var(--font-text);font-size:var(--fs-title);
  font-weight:600;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.ui-dialog-desc{margin:0;color:var(--store-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.ui-dialog-footer{display:flex;flex-direction:var(--store-footer-dir);justify-content:var(--store-footer-justify);
  gap:var(--sp-3);margin-top:var(--sp-2)}
/* Offsets count from the edge of .ui-dialog-inner's padding, which is the
   dialog's own edge, not from inside it. Negative values put the button
   12px outside the dialog, and its overflow:auto turned that into a
   horizontal scrollbar under every dialog. */
.ui-dialog-close{position:absolute;top:var(--sp-3);right:var(--sp-3);z-index:1;
  display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);padding:0;
  border:0;border-radius:var(--radius);background:transparent;color:var(--store-muted);
  font-size:var(--fs-lg);line-height:1;text-decoration:none;cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.ui-dialog-close:hover{color:var(--store-text);background:var(--store-fill)}

/* ══ FORM PRIMITIVES ─ shadcn/ui Label + Input ═══════════════════════
   Kept: a small medium-weight label over a full-width bordered control,
   the soft inner shadow, and focus shown as a border change plus a wide
   translucent ring. Changed: the control is 44px, not 36px, to meet the
   site's --tap-min, and its text is 16px so iOS does not zoom on focus. */
.ui-field{display:grid;gap:var(--sp-2);align-content:start}
.ui-field-row{display:grid;grid-template-columns:repeat(var(--store-field-cols),minmax(0,1fr));gap:var(--sp-4)}
.ui-label{font-size:var(--fs-small);font-weight:500;line-height:var(--lh-title);color:var(--store-text)}
.ui-label .opt{margin-left:var(--sp-1);color:var(--store-faint);font-weight:400}
.ui-input{width:100%;min-height:var(--store-control-h);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--store-line);border-radius:var(--radius);
  background:var(--store-surface);color:var(--store-text);box-shadow:var(--store-input-shadow);
  font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-title);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.ui-input::placeholder{color:var(--store-faint)}
.ui-input:hover{border-color:var(--store-line-strong)}
/* transparent outline, not none: forced-colors mode repaints it */
.ui-input:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--gold-soft);
  box-shadow:0 0 0 var(--store-ring-w) var(--store-ring)}
textarea.ui-input{min-height:var(--store-textarea-h);resize:vertical}
.ui-input--mono{font-family:var(--font-mono);font-size:var(--fs-small)}
.ui-input[type="file"]{padding:0;color:var(--store-muted);font-size:var(--fs-small)}
.ui-input[type="file"]::file-selector-button{height:var(--store-control-h);margin-right:var(--sp-3);
  padding:0 var(--sp-3);border:0;border-right:1px solid var(--store-line);
  background:var(--store-fill);color:var(--store-text);font:inherit;font-weight:500;cursor:pointer}
.ui-hint{margin:0;color:var(--store-faint);font-size:var(--fs-small);line-height:var(--lh-body)}
.ui-field-error{display:none;color:var(--store-danger-ink);font-size:var(--fs-small)}
.ui-field.is-bad .ui-input{border-color:var(--store-danger-line)}
.ui-field.is-bad .ui-field-error{display:block}
.ui-check{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--store-control-h);
  font-size:var(--fs-small);color:var(--store-muted);cursor:pointer}
.ui-check input{width:var(--sp-5);height:var(--sp-5);margin:0;accent-color:var(--gold)}

/* the honeypot: out of sight and out of the accessibility tree */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── order dialog specifics ──────────────────────────────────────── */
.order-summary{display:grid;grid-template-columns:var(--store-thumb-lg) minmax(0,1fr);gap:var(--sp-4);
  align-items:center;padding:var(--sp-3);border:1px solid var(--store-line);
  border-radius:var(--radius);background:var(--store-fill)}
.order-thumb{display:block;width:var(--store-thumb-lg);aspect-ratio:1;overflow:hidden;
  border-radius:var(--store-inner-radius);background:var(--store-surface)}
.order-thumb img{width:100%;height:100%;object-fit:cover}
.order-name{margin:0;font-weight:600;line-height:var(--lh-title)}
.order-unit{margin:var(--sp-1) 0 0;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--store-muted)}
.qty{display:grid;grid-template-columns:var(--tap-min) minmax(0,1fr) var(--tap-min);gap:var(--sp-2)}
.qty .ui-input{text-align:center;font-family:var(--font-mono);-moz-appearance:textfield;appearance:textfield}
.qty .ui-input::-webkit-inner-spin-button,.qty .ui-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty .ui-btn{padding:0;font-size:var(--fs-lg)}
.order-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);margin:0;
  padding-top:var(--sp-4);border-top:1px solid var(--store-line);color:var(--store-muted);font-size:var(--fs-small)}
.order-total b{font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:500;color:var(--gold-soft)}
.order-done{padding-top:var(--sp-2)}
.order-done:focus{outline:none}
.order-done .eyebrow{margin:0}

/* ══ BUTTONS ─ shadcn/ui Button, for the admin ═══════════════════════
   default → --primary, outline, ghost, destructive; sizes default / sm */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--store-control-h);padding:0 var(--sp-4);
  border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--store-text);
  font-family:var(--font-text);font-size:var(--fs-small);font-weight:500;line-height:1;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.ui-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.ui-btn:disabled{opacity:var(--store-disabled);pointer-events:none}
.ui-btn--primary{background:var(--gold);border-color:var(--gold);color:var(--surface-night)}
.ui-btn--primary:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.ui-btn--outline{border-color:var(--store-line)}
.ui-btn--outline:hover{border-color:var(--store-line-strong);background:var(--store-fill)}
.ui-btn--ghost:hover{background:var(--store-fill)}
.ui-btn--danger{color:var(--store-danger-ink)}
.ui-btn--danger:hover{background:var(--store-danger-fill)}
.ui-btn--destructive{background:var(--store-danger-line);border-color:var(--store-danger-line);color:var(--surface-night)}
.ui-btn--destructive:hover{background:var(--store-danger-ink);border-color:var(--store-danger-ink)}
.ui-btn--sm{min-height:var(--store-control-sm);padding:0 var(--sp-3)}
.ui-btn--block{width:100%}

/* ══ ADMIN ════════════════════════════════════════════════════════ */
.store-admin{min-height:100svh;background:var(--store-surface);color:var(--store-text)}
.admin-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding:var(--sp-2) var(--sp-5);border-bottom:1px solid var(--store-line);background:var(--store-raised)}
.admin-brand{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--tap-min);text-decoration:none;
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--store-muted)}
.admin-brand img{width:auto;height:var(--sp-6)}
.admin-bar-actions{display:flex;align-items:center;gap:var(--sp-2)}
.admin-bar-actions form{margin:0}
.admin-main{padding:var(--sp-8) 0 var(--sp-10)}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.admin-title{margin:0;max-width:none;font-family:var(--font-text);font-size:var(--fs-lg);font-weight:600;
  line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.admin-sub{margin:var(--sp-1) 0 0;color:var(--store-muted);font-size:var(--fs-small)}
.flash{margin:0 0 var(--sp-5);padding:var(--sp-3) var(--sp-4);border:1px solid var(--store-line);
  border-radius:var(--radius);background:var(--store-fill);font-size:var(--fs-small);line-height:var(--lh-body)}
.ui-dialog .flash,.ui-card .flash{margin:0}
.flash--error{border-color:var(--store-danger-line);background:var(--store-danger-fill);color:var(--store-danger-ink)}

/* ── table ─ Table Dialog's container, sticky header and footer ──── */
.ui-table-wrap{overflow:hidden;border:1px solid var(--store-line);border-radius:var(--radius);
  background:var(--store-raised);box-shadow:var(--store-shadow)}
.ui-table-scroll{max-height:var(--store-table-h);overflow:auto}
.ui-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.ui-table th{position:sticky;top:0;z-index:1;height:var(--sp-9);padding:0 var(--sp-3);
  background:var(--store-raised);border-bottom:1px solid var(--store-line);
  text-align:left;vertical-align:middle;font-weight:500;color:var(--store-muted);white-space:nowrap}
.ui-table td{padding:var(--sp-3);vertical-align:middle;border-bottom:1px solid var(--store-line)}
.ui-table tbody tr{transition:background-color var(--dur-fast) var(--ease-out)}
.ui-table tbody tr:hover{background:var(--store-fill)}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tfoot td{position:sticky;bottom:0;background:var(--store-raised);border-top:1px solid var(--store-line);
  border-bottom:0;color:var(--store-muted);font-weight:500}
.ui-table .num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.ui-table .actions{text-align:right;white-space:nowrap}
.ui-table .actions .ui-btn + .ui-btn{margin-left:var(--sp-1)}
.ui-table-empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--store-muted)}
.cell-product{display:flex;align-items:center;gap:var(--sp-3);min-width:var(--store-name-min)}
.cell-product img{flex:none;width:var(--store-thumb);height:var(--store-thumb);object-fit:cover;
  border-radius:var(--store-inner-radius);background:var(--store-surface)}
.cell-name{display:block;font-weight:600;color:var(--store-text)}
.cell-id{display:block;margin-top:var(--sp-1);font-family:var(--font-mono);font-size:var(--fs-nano);color:var(--store-faint)}
.stock-cell{display:flex;align-items:center;gap:var(--sp-2);margin:0}

/* ── badge ─ default and secondary variants ────────────────────── */
.ui-badge{display:inline-flex;align-items:center;padding:var(--sp-1) var(--sp-3);border:1px solid transparent;
  border-radius:var(--store-pill);font-size:var(--fs-micro);font-weight:600;line-height:var(--lh-title);white-space:nowrap}
.ui-badge--default{background:var(--gold);color:var(--surface-night)}
.ui-badge--secondary{background:var(--store-fill);border-color:var(--store-line);color:var(--store-muted)}

/* ── switch ─ the in-stock toggle. The button is a full 44px target;
   the track and knob are drawn inside it. ──────────────────────── */
.ui-switch{position:relative;flex:none;width:var(--store-switch-w);height:var(--tap-min);padding:0;
  border:0;background:transparent;cursor:pointer}
.ui-switch::before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--store-switch-track);
  transform:translateY(-50%);border:1px solid var(--store-line-strong);border-radius:var(--store-pill);
  background:var(--store-fill);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ui-switch::after{content:"";position:absolute;top:50%;left:calc((var(--store-switch-track) - var(--store-switch-knob)) / 2);
  width:var(--store-switch-knob);height:var(--store-switch-knob);border-radius:50%;background:var(--store-muted);
  transform:translateY(-50%);transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.ui-switch[aria-checked="true"]::before{background:var(--gold);border-color:var(--gold)}
.ui-switch[aria-checked="true"]::after{background:var(--surface-night);
  transform:translate(calc(var(--store-switch-w) - var(--store-switch-track)),-50%)}
.ui-switch:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

/* ── product form: photo beside its inputs ──────────────────────── */
.img-field{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start}
.img-preview{width:var(--store-preview);aspect-ratio:var(--store-card-ratio);object-fit:cover;
  border:1px solid var(--store-line);border-radius:var(--store-inner-radius);background:var(--store-surface)}
.img-inputs{display:grid;gap:var(--sp-2)}

/* ── sign in ─ a card of the same primitives ───────────────────── */
.admin-login{display:grid;place-items:center;min-height:100svh;padding:var(--sp-5)}
.ui-card{display:grid;gap:var(--sp-5);width:min(var(--store-login-w),100%);padding:var(--sp-7);
  border:1px solid var(--store-line);border-radius:var(--radius);background:var(--store-raised);box-shadow:var(--store-shadow-lift)}
.ui-card-header{display:grid;gap:var(--sp-2)}
.ui-card-title{margin:0;max-width:none;font-family:var(--font-text);font-size:var(--fs-lg);font-weight:600;
  line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.ui-card-desc{margin:0;color:var(--store-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.login-mark{width:auto;height:var(--sp-8)}

@media (prefers-reduced-motion:reduce){
  .product-grid > li,.ui-dialog[open],.ui-dialog[open]::backdrop{animation:none}
  .product-card,.product-card-media img,.ui-switch::before,.ui-switch::after{transition:none}
  .product-card:hover,.product-card:hover .product-card-media img{transform:none}
}