/* mock-kit.css — interaction layer for static mock-ups. Pairs with mock-kit.js.
   The page's own design sets the look through the tokens below; the kit adds motion, states and feedback.
   Movement uses only transform and opacity; colours, borders and shadows get short state transitions (hover, selected).
   Hover styles sit behind @media (hover: hover) so taps never leave a stuck hover. Touch targets reach 44px on touch/mobile.
   Rules marked GLOBAL also reach the site's own markup on purpose (scroll padding, focus ring, details fade, reduced motion).
   Everything respects prefers-reduced-motion. */

:root {
  --mk-accent: #1a5d3a;
  --mk-accent-ink: #fff;
  --mk-success: #1e7d46;
  --mk-danger: #b42318;
  --mk-ink: #1d1d1f;
  --mk-muted: #5f6368;
  --mk-line: #e3e3e6;
  --mk-surface: #fff;
  --mk-skeleton: #ececef;
  --mk-shadow: 0 12px 32px rgba(17, 24, 39, .14), 0 2px 6px rgba(17, 24, 39, .08);
  --mk-radius: 10px;
  --mk-font: inherit;

  /* motion tokens (ms values agreed with the Codex review) */
  --mk-d1: 120ms;      /* press, hover colour, small state changes */
  --mk-d2: 160ms;      /* menus, suggestions, crossfades */
  --mk-d3: 220ms;      /* drawers, sheets, toasts in */
  --mk-d-exit: 160ms;  /* everything that leaves */
  --mk-d4: 450ms;      /* fly-to-cart, progress bars */
  --mk-ease-std: cubic-bezier(.2, 0, 0, 1);
  --mk-ease-out: cubic-bezier(.16, 1, .3, 1);   /* enter */
  --mk-ease-in: cubic-bezier(.4, 0, 1, 1);      /* exit */
  --mk-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --mk-bottom-offset: 0px;  /* set by the sticky buy bar so toasts never sit on it */
}

[hidden] { display: none !important; }
/* GLOBAL: fixed bottom bars must not cover focused fields or the end of the page */
html { scroll-padding-bottom: var(--mk-bottom-offset); }
.mk-bottom-spacer { height: var(--mk-bottom-offset); }

/* ---------- generic kit buttons (auto mini-cart, form acknowledgement) ---------- */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 20px;
  border-radius: var(--mk-radius); border: 1px solid var(--mk-accent); font: 600 .95rem/1 var(--mk-font); cursor: pointer; text-decoration: none; }
.mk-btn-primary { background: var(--mk-accent); color: var(--mk-accent-ink); }
.mk-btn-ghost { background: transparent; color: var(--mk-accent); }
@media (hover: hover) { .mk-btn-ghost:hover { background: color-mix(in srgb, var(--mk-accent) 7%, transparent); } }

/* ---------- async buttons: press, loading, success (add to cart, form submit) ---------- */
.mk-btn, .mk-async, [data-add-to-cart] {
  position: relative;
  transition: transform var(--mk-d1) var(--mk-ease-out), background-color var(--mk-d2) var(--mk-ease-std),
              color var(--mk-d2) var(--mk-ease-std), border-color var(--mk-d2) var(--mk-ease-std), box-shadow var(--mk-d2) var(--mk-ease-std);
  -webkit-tap-highlight-color: transparent;
}
.mk-btn:active, .mk-async:active, [data-add-to-cart]:active { transform: scale(.97); }
.mk-async .mk-btn-label { display: inline-flex; align-items: center; gap: .5em; transition: opacity var(--mk-d1), transform var(--mk-d2) var(--mk-ease-out); }
.mk-async .mk-btn-state { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(6px);
  transition: opacity var(--mk-d1), transform var(--mk-d2) var(--mk-ease-out); pointer-events: none; }
.mk-async.is-loading .mk-btn-label, .mk-async.is-done .mk-btn-label { opacity: 0; transform: translateY(-6px); }
.mk-async.is-loading .mk-btn-loading, .mk-async.is-done .mk-btn-done { opacity: 1; transform: none; }
.mk-async.is-loading { cursor: progress; }
.mk-async.is-done { background-color: var(--mk-success) !important; border-color: var(--mk-success) !important; color: #fff !important; }

.mk-spinner { width: 1.15em; height: 1.15em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; flex: none; }
/* spin only while visible: hidden infinite animations still cost frames */
.is-loading .mk-spinner, .mk-spinner.is-on { animation: mk-spin 800ms linear infinite; }
.mk-check { width: 1.3em; height: 1.3em; flex: none; }
.mk-check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.is-done .mk-check path, .mk-toast .mk-check path { animation: mk-draw 320ms var(--mk-ease-out) 60ms forwards; }
.mk-done-row { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }

@keyframes mk-spin { to { transform: rotate(360deg); } }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }

/* ---------- cart badge ---------- */
[data-cart-count], [data-wish-count] { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--mk-accent); color: var(--mk-accent-ink); font: 600 .72rem/1 var(--mk-font); font-variant-numeric: tabular-nums;
  transition: opacity var(--mk-d2), transform var(--mk-d2) var(--mk-ease-spring); }
[data-cart-count][data-empty], [data-wish-count][data-empty] { opacity: 0; transform: scale(.4); }
.mk-bump { animation: mk-bump 260ms var(--mk-ease-spring); }
@keyframes mk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mk-cart-shake { animation: mk-shake 420ms var(--mk-ease-out); transform-origin: 50% 20%; }
@keyframes mk-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 55% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

/* fly-to-cart clone */
.mk-fly { position: fixed; z-index: 9999; pointer-events: none; border-radius: var(--mk-radius); object-fit: cover; box-shadow: var(--mk-shadow); will-change: transform, opacity; }

/* small "no" nudge: limit reached, unavailable option (never on form errors) */
.mk-nudge-x { animation: mk-nudge 260ms var(--mk-ease-out); }
@keyframes mk-nudge { 25% { transform: translateX(-3px); } 60% { transform: translateX(2px); } }

/* ---------- toasts ---------- */
.mk-toasts { position: fixed; z-index: 9998; right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--mk-bottom-offset));
  display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 600px) { .mk-toasts { left: 12px; right: 12px; width: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--mk-bottom-offset)); } }
.mk-toast { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 12px 12px 12px;
  background: var(--mk-surface); color: var(--mk-ink); border: 1px solid var(--mk-line); border-radius: calc(var(--mk-radius) + 2px); box-shadow: var(--mk-shadow);
  font: 400 .92rem/1.35 var(--mk-font); transform: translateY(16px) scale(.98); opacity: 0;
  transition: transform var(--mk-d3) var(--mk-ease-out), opacity var(--mk-d3) var(--mk-ease-out); overflow: hidden; position: relative; }
.mk-toast.is-in { transform: none; opacity: 1; }
.mk-toast.is-out { transform: translateY(8px) scale(.98); opacity: 0; transition-duration: 140ms; transition-timing-function: var(--mk-ease-in); }
.mk-toast img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--mk-skeleton); }
.mk-toast-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mk-success); color: #fff; flex: none; }
.mk-toast--heart .mk-toast-icon { background: #e0245e; }
.mk-toast--info .mk-toast-icon { background: var(--mk-ink); }
.mk-toast--error .mk-toast-icon { background: var(--mk-danger); }
.mk-toast-text { min-width: 0; }
.mk-toast strong { display: block; font-weight: 600; }
.mk-toast p { margin: 2px 0 0; color: var(--mk-muted); font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-toast-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mk-toast-actions button, .mk-toast-actions a { font: 600 .82rem/1 var(--mk-font); padding: 0 10px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: var(--mk-accent); text-decoration: none; white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center;
  transition: background-color var(--mk-d1); }
@media (hover: hover) { .mk-toast-actions button:hover, .mk-toast-actions a:hover { background: color-mix(in srgb, var(--mk-accent) 8%, transparent); } }
.mk-toast-actions .is-primary { background: var(--mk-accent); color: var(--mk-accent-ink); }
@media (hover: hover) { .mk-toast-actions .is-primary:hover { background: color-mix(in srgb, var(--mk-accent) 88%, #000); } }
.mk-toast-actions .mk-toast-close { width: 36px; height: 36px; padding: 0; justify-content: center; color: var(--mk-muted); }
.mk-toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--mk-accent); opacity: .25; transform-origin: left; }
@media (max-width: 420px) { .mk-toast { grid-template-columns: auto 1fr; } .mk-toast-actions { grid-column: 1 / -1; } }

/* ---------- drawer (mini-cart, filters on mobile, mobile menu) ---------- */
/* closed and closing layers never catch clicks (the fade-out is still on screen for a moment) */
.mk-overlay, .mk-drawer, .mk-lightbox, .mk-suggest { pointer-events: none; }
.mk-overlay.is-open, .mk-drawer.is-open, .mk-lightbox.is-open, .mk-suggest.is-open { pointer-events: auto; }
.mk-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(15, 18, 24, .42); opacity: 0; visibility: hidden;
  transition: opacity var(--mk-d-exit) var(--mk-ease-in), visibility 0s linear var(--mk-d-exit); }
.mk-overlay.is-open { opacity: 1; visibility: visible; transition: opacity var(--mk-d3) var(--mk-ease-out); }
.mk-drawer { position: fixed; z-index: 9991; top: 0; right: 0; height: 100dvh; width: min(420px, 100vw); background: var(--mk-surface); color: var(--mk-ink);
  box-shadow: var(--mk-shadow); transform: translateX(104%); visibility: hidden; display: flex; flex-direction: column;
  transition: transform var(--mk-d-exit) var(--mk-ease-in), visibility 0s linear var(--mk-d-exit); font-family: var(--mk-font); outline: none; }
.mk-drawer[data-side="left"] { right: auto; left: 0; transform: translateX(-104%); }
.mk-drawer.is-open { transform: none; visibility: visible; transition: transform var(--mk-d3) var(--mk-ease-out); }
.mk-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 16px 20px; border-bottom: 1px solid var(--mk-line); }
.mk-drawer-head h2 { margin: 0; font-size: 1.1rem; }
.mk-drawer-head h2 span { color: var(--mk-muted); font-weight: 400; }
.mk-drawer-body { flex: 1; overflow: auto; padding: 16px 20px; overscroll-behavior: contain; }
.mk-drawer-body .mk-line:first-child { padding-top: 4px; }
.mk-drawer-foot { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--mk-line); display: grid; gap: 12px; }
.mk-icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--mk-d1); flex: none; }
@media (hover: hover) { .mk-icon-btn:hover { background: rgba(0, 0, 0, .06); } }

.mk-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--mk-line); align-items: start;
  animation: mk-line-in var(--mk-d3) var(--mk-ease-out); }
.mk-line:last-child { border-bottom: 0; }
.mk-line.is-removing { animation: mk-line-out var(--mk-d2) var(--mk-ease-in) forwards; }
.mk-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--mk-skeleton); }
.mk-line-main { min-width: 0; }
.mk-line-name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.mk-line-price { color: var(--mk-muted); font-size: .84rem; margin-top: 2px; }
.mk-line-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.mk-line [data-qty] { height: 36px; }
.mk-line [data-qty] button { width: 36px; }
.mk-line-total { font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-line-remove { background: none; border: 0; color: var(--mk-muted); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; padding: 8px 0; min-height: 36px; }
@media (hover: hover) { .mk-line-remove:hover { color: var(--mk-danger); } }
@keyframes mk-line-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes mk-line-out { to { opacity: 0; transform: translateX(24px); } }
.mk-empty { display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--mk-muted); padding: 56px 8px; }
.mk-empty svg { color: var(--mk-line); width: 56px; height: 56px; }
.mk-empty p { margin: 0; font-size: 1rem; color: var(--mk-ink); }
.mk-subtotal { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.mk-ship { font-size: .85rem; color: var(--mk-muted); }
.mk-ship.is-free .mk-ship-text { color: var(--mk-success); font-weight: 600; }
.mk-ship-bar { height: 6px; border-radius: 99px; background: var(--mk-skeleton); overflow: hidden; margin-top: 8px; }
.mk-ship-bar span { display: block; height: 100%; background: var(--mk-success); transform-origin: left; transform: scaleX(0); transition: transform var(--mk-d4) var(--mk-ease-out); }

/* ---------- quantity stepper ---------- */
/* content-box: the buttons get the full 44px, the border sits outside */
[data-qty] { display: inline-flex; align-items: center; box-sizing: content-box; border: 1px solid var(--mk-line); border-radius: 999px; overflow: hidden; height: 44px; background: var(--mk-surface); }
[data-qty] button { width: 44px; height: 100%; border: 0; background: transparent; color: inherit; font-size: 1.1rem; cursor: pointer; transition: background-color var(--mk-d1), opacity var(--mk-d1); }
@media (hover: hover) { [data-qty] button:hover { background: rgba(0, 0, 0, .05); } }
[data-qty] button[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (hover: hover) { [data-qty] button[aria-disabled="true"]:hover { background: transparent; } }
[data-qty] output, [data-qty] input { min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; display: inline-block; }
[data-qty] input { width: 3.2ch; border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; padding: 0; -moz-appearance: textfield; appearance: textfield; }
[data-qty] input::-webkit-outer-spin-button, [data-qty] input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mk-tick-up { animation: mk-tick-up var(--mk-d2) var(--mk-ease-out); }
.mk-tick-down { animation: mk-tick-down var(--mk-d2) var(--mk-ease-out); }
@keyframes mk-tick-up { from { transform: translateY(60%); opacity: 0; } }
@keyframes mk-tick-down { from { transform: translateY(-60%); opacity: 0; } }

/* ---------- wishlist heart ---------- */
[data-wishlist] { position: relative; cursor: pointer; transition: transform var(--mk-d1) var(--mk-ease-out); }
[data-wishlist]:active { transform: scale(.92); }
[data-wishlist] svg { transition: fill var(--mk-d2), color var(--mk-d2); }
[data-wishlist][aria-pressed="true"] svg { fill: #e0245e; color: #e0245e; animation: mk-heart 320ms var(--mk-ease-spring); }
@keyframes mk-heart { 0% { transform: scale(1); } 35% { transform: scale(.82); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.mk-burst { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #e0245e; pointer-events: none;
  animation: mk-burst 520ms var(--mk-ease-out) forwards; }
.mk-burst:nth-child(even) { background: #f7a1bd; }
@keyframes mk-burst { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-22px) scale(.3); opacity: 0; } }

/* ---------- product card: one quiet hover, only where hover exists ---------- */
[data-card] .mk-card-media { position: relative; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  [data-card] .mk-card-media img { transition: transform 220ms var(--mk-ease-std), opacity 180ms var(--mk-ease-std); }
  [data-card]:hover .mk-card-media img { transform: scale(1.025); }
  [data-card] [data-card-alt] { opacity: 0; }
  [data-card]:hover [data-card-alt] { opacity: 1; }
  [data-card] .mk-card-quick { opacity: 0; transform: translateY(6px); transition: opacity 140ms var(--mk-ease-std), transform 140ms var(--mk-ease-std); }
  [data-card]:hover .mk-card-quick, [data-card]:focus-within .mk-card-quick,
  [data-card] .mk-card-quick.is-loading, [data-card] .mk-card-quick.is-done { opacity: 1; transform: none; } /* never hide its own feedback */
}
[data-card] [data-card-alt] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media not ((hover: hover) and (pointer: fine)) { [data-card] [data-card-alt] { display: none; } }

/* ---------- skeletons: mark the real parts with data-skel, the group toggles .is-loading (no layout shift) ---------- */
.mk-skel, [data-skeleton-group].is-loading [data-skel] { position: relative; overflow: hidden; background: var(--mk-skeleton) !important; border-radius: 6px;
  color: transparent !important; border-color: transparent !important; }
.mk-skel > *, [data-skeleton-group].is-loading [data-skel] > * { visibility: hidden; }
.mk-skel::after, [data-skeleton-group].is-loading [data-skel]::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: mk-shimmer 1.4s linear infinite; }
@keyframes mk-shimmer { to { transform: translateX(100%); } }
[data-skeleton-group] [data-skel] > * { transition: opacity var(--mk-d2) var(--mk-ease-std); }

/* ---------- reveal on scroll (one subtle move, once) ---------- */
/* Only on elements the page marks, never on every section. Hidden only once JS has started (html.mk-js). */
.mk-js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(12px); }
[data-reveal] { transition: opacity 300ms var(--mk-ease-out), transform 300ms var(--mk-ease-out); transition-delay: calc(min(var(--mk-i, 0), 6) * 50ms); }

/* ---------- header: shadow after scroll, hide on scroll down (mobile, opt-in) ---------- */
[data-header] { transition: transform var(--mk-d3) var(--mk-ease-out), box-shadow var(--mk-d2), background-color var(--mk-d2); }
[data-header].is-scrolled { box-shadow: 0 1px 0 var(--mk-line), 0 6px 18px rgba(17, 24, 39, .06); }
[data-header].is-hidden { transform: translateY(-100%); }

/* ---------- dropdown / mega menu ---------- */
[data-menu] { position: relative; }
[data-menu-panel] { opacity: 0; transform: translateY(6px); visibility: hidden; pointer-events: none;
  transition: opacity 100ms var(--mk-ease-in), transform 100ms var(--mk-ease-in), visibility 0s linear 100ms; }
[data-menu].is-open [data-menu-panel] { opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity var(--mk-d2) var(--mk-ease-out), transform var(--mk-d2) var(--mk-ease-out); }
[data-menu-trigger] svg { transition: transform var(--mk-d2) var(--mk-ease-std); }
[data-menu].is-open [data-menu-trigger] svg { transform: rotate(180deg); }

/* ---------- search suggestions ---------- */
[data-search] { position: relative; }
.mk-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--mk-surface); color: var(--mk-ink); border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius); box-shadow: var(--mk-shadow); padding: 6px; opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity 100ms var(--mk-ease-in), transform 100ms var(--mk-ease-in), visibility 0s linear 100ms; }
.mk-suggest.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity var(--mk-d2) var(--mk-ease-out), transform var(--mk-d2) var(--mk-ease-out); }
.mk-suggest [role="option"] { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: .92rem; }
/* the clear button shows only when there is something to clear (the input needs a placeholder) */
[data-search]:has(input:placeholder-shown) [data-search-clear] { visibility: hidden; }
.mk-suggest [role="option"][aria-selected="true"] { background: rgba(0, 0, 0, .05); }
@media (hover: hover) { .mk-suggest [role="option"]:hover { background: rgba(0, 0, 0, .05); } }
.mk-suggest img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--mk-skeleton); }
.mk-suggest mark { background: none; color: inherit; font-weight: 700; }
.mk-suggest-price { font-variant-numeric: tabular-nums; color: var(--mk-muted); font-size: .85rem; white-space: nowrap; }
.mk-suggest-empty { margin: 0; padding: 14px 10px; color: var(--mk-muted); font-size: .9rem; }
.mk-suggest-all { display: block; padding: 10px; margin-top: 4px; border-top: 1px solid var(--mk-line); color: var(--mk-accent); font-weight: 600; font-size: .88rem; text-decoration: none; }

/* ---------- product gallery ---------- */
[data-gallery] .mk-gallery-main { position: relative; overflow: hidden; border-radius: var(--mk-radius); cursor: zoom-in; touch-action: pan-y; }
[data-gallery] .mk-gallery-main img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--mk-d3) var(--mk-ease-out), opacity var(--mk-d2) var(--mk-ease-std); }
[data-gallery] .mk-gallery-main.is-zoom img { transform: scale(1.9); }
[data-gallery] .mk-gallery-main img.is-swap { opacity: 0; }
[data-gallery] [data-thumb] { cursor: pointer; border-radius: 8px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--mk-d1), opacity var(--mk-d1);
  opacity: .72; padding: 0; border: 0; background: none; }
@media (hover: hover) { [data-gallery] [data-thumb]:hover { opacity: 1; } }
[data-gallery] [data-thumb][aria-current="true"] { outline-color: var(--mk-ink); opacity: 1; }
.mk-lightbox { position: fixed; inset: 0; z-index: 9995; background: rgba(10, 10, 12, .92); display: grid; place-items: center; opacity: 0; visibility: hidden;
  transition: opacity 150ms var(--mk-ease-in), visibility 0s linear 150ms; touch-action: pan-y; }
.mk-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 200ms var(--mk-ease-out); }
.mk-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 6px; transform: scale(.96); transition: transform 200ms var(--mk-ease-out); user-select: none; }
.mk-lightbox.is-open img { transform: none; }
.mk-lightbox .mk-icon-btn { position: absolute; color: #fff; background: rgba(255, 255, 255, .1); }
@media (hover: hover) { .mk-lightbox .mk-icon-btn:hover { background: rgba(255, 255, 255, .2); } }
.mk-lightbox .mk-lb-close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.mk-lightbox .mk-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.mk-lightbox .mk-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.mk-lb-count { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8);
  font: 500 .85rem/1 var(--mk-font); font-variant-numeric: tabular-nums; }

/* ---------- variant chips ---------- */
[data-variants] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-variants] button { min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--mk-line); background: var(--mk-surface);
  color: var(--mk-ink); cursor: pointer; transition: border-color var(--mk-d1), box-shadow var(--mk-d1), transform var(--mk-d1); font: inherit; }
@media (hover: hover) { [data-variants] button:hover { border-color: var(--mk-muted); } }
[data-variants] button:active { transform: scale(.96); }
[data-variants] button[aria-pressed="true"] { border-color: var(--mk-ink); box-shadow: inset 0 0 0 1px var(--mk-ink); }
[data-variants] button[disabled], [data-variants] button[aria-disabled="true"] { color: var(--mk-muted); text-decoration: line-through; cursor: not-allowed; opacity: .6; }
[data-variants].is-invalid button:not([aria-disabled="true"]) { border-color: var(--mk-danger); }

/* ---------- sticky add-to-cart bar ---------- */
[data-sticky-buy] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; transform: translateY(110%); visibility: hidden;
  transition: transform var(--mk-d-exit) var(--mk-ease-in), visibility 0s linear var(--mk-d-exit); padding-bottom: env(safe-area-inset-bottom); }
[data-sticky-buy].is-visible { transform: none; visibility: visible; transition: transform 180ms var(--mk-ease-out); }

/* ---------- filters / sorting ---------- */
[data-results] { position: relative; transition: opacity 140ms var(--mk-ease-std); }
[data-results].is-busy { opacity: .55; }
[data-results].is-busy::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 2px; background: var(--mk-accent); transform-origin: left;
  animation: mk-indet 900ms var(--mk-ease-std) infinite; }
@keyframes mk-indet { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
[data-filter-item].is-hidden { display: none; }
[data-filter-item].mk-enter { animation: mk-pop-in var(--mk-d3) var(--mk-ease-out) both; }
@keyframes mk-pop-in { from { opacity: 0; transform: scale(.96); } }
[data-filter-chip] { transition: background-color var(--mk-d1), color var(--mk-d1), border-color var(--mk-d1); }
.mk-count { display: inline-block; font-variant-numeric: tabular-nums; }
[data-applied] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-applied { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mk-line);
  background: var(--mk-surface); color: var(--mk-ink); font: 500 .85rem/1 var(--mk-font); cursor: pointer; animation: mk-pop-in var(--mk-d2) var(--mk-ease-out); }
@media (hover: hover) { .mk-applied:hover { border-color: var(--mk-ink); } }
.mk-applied span[aria-hidden] { font-size: 1.05rem; line-height: 1; color: var(--mk-muted); }
.mk-applied-clear { background: none; border: 0; color: var(--mk-accent); font: 600 .85rem/1 var(--mk-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 36px; padding: 0 6px; }

/* ---------- accordions (native details) — GLOBAL: every details on the page fades open ---------- */
details > summary { cursor: pointer; }
details[open] > :not(summary) { animation: mk-fade var(--mk-d1) var(--mk-ease-std); }
@keyframes mk-fade { from { opacity: 0; } }

/* ---------- forms ---------- */
.mk-field { position: relative; display: grid; gap: 6px; }
.mk-field input, .mk-field textarea, .mk-field select { transition: border-color var(--mk-d1), box-shadow var(--mk-d1); }
.mk-field.is-invalid input, .mk-field.is-invalid textarea, .mk-field.is-invalid select { border-color: var(--mk-danger) !important; }
.mk-field.is-valid input, .mk-field.is-valid textarea { border-color: var(--mk-success) !important; }
.mk-field .mk-error { color: var(--mk-danger); font-size: .82rem; min-height: 1.15em; opacity: 0; transition: opacity var(--mk-d1); }
.mk-field.is-invalid .mk-error { opacity: 1; }
.mk-form-done { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 8px; animation: mk-pop-in 180ms var(--mk-ease-out); }
.mk-form-done h3 { margin: 4px 0 0; outline: none; }
.mk-form-done p { margin: 0; color: var(--mk-muted); max-width: 42ch; }
.mk-form-done .mk-toast-icon { width: 56px; height: 56px; }
.mk-form-done .mk-check { width: 30px; height: 30px; }
.mk-form-done .mk-check path { animation: mk-draw 420ms var(--mk-ease-out) 120ms forwards; }

/* ---------- inline error under add-to-cart (and ?demo=error) ---------- */
.mk-inline-error { color: var(--mk-danger); font-size: .86rem; margin: 8px 0 0; display: none; }
.mk-inline-error.is-on { display: block; animation: mk-fade var(--mk-d1) var(--mk-ease-std); }
.mk-demo-note { color: var(--mk-muted); font-size: .78rem; }

/* ---------- trust: real policies, real logos only (see reference/details.md) ---------- */
.mk-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px 28px; }
.mk-trust-item { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; }
.mk-trust-item svg { width: 28px; height: 28px; color: var(--mk-accent); grid-row: span 2; }
.mk-trust-item strong { font-weight: 600; font-size: .95rem; }
.mk-trust-item span { color: var(--mk-muted); font-size: .85rem; line-height: 1.45; }
.mk-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-pay img { height: 26px; width: auto; border: 1px solid var(--mk-line); border-radius: 4px; background: #fff; padding: 3px 6px; }
.mk-anpc { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-anpc img { height: 50px; width: auto; }

/* ---------- page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 140ms var(--mk-ease-in) both mk-vt-out; }
::view-transition-new(root) { animation: 180ms var(--mk-ease-std) both mk-vt-in; }
@keyframes mk-vt-out { to { opacity: 0; } }
@keyframes mk-vt-in { from { opacity: 0; } }
[data-vt-hero-target] { view-transition-name: mk-hero; }
::view-transition-group(mk-hero) { animation-duration: 380ms; animation-timing-function: var(--mk-ease-out); }

/* ---------- focus — GLOBAL: one visible ring for every control, the site's own included ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

.mk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- touch: every kit control reaches 44px where fingers are used ---------- */
@media (pointer: coarse), (max-width: 767px) {
  .mk-toast-actions button, .mk-toast-actions a, .mk-line-remove, .mk-applied, .mk-applied-clear { min-height: 44px; }
  .mk-toast-actions .mk-toast-close { width: 44px; height: 44px; }
  .mk-line [data-qty] { height: 44px; }
  .mk-line [data-qty] button { width: 44px; }
}

/* ---------- reduced motion — GLOBAL: states change, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .mk-js [data-reveal]:not(.is-in), [data-reveal] { opacity: 1; transform: none; }
  .mk-skel::after, [data-skeleton-group].is-loading [data-skel]::after { display: none; }
  .mk-spinner { animation: none; border-right-color: currentColor; opacity: .6; }
  .mk-toast-progress, [data-results].is-busy::before { visibility: hidden; }
  @view-transition { navigation: none; }
}
@media print { .mk-js [data-reveal] { opacity: 1 !important; transform: none !important; } .mk-toasts, .mk-overlay, .mk-drawer, [data-sticky-buy] { display: none !important; } }