/* Theme 5 "Flow" — design tokens + base. Colours come from <x-theme5::palette-style> (admin settings):
   --t5-primary, --t5-on-primary, --t5-accent, --t5-on-accent, --t5-primary-d, --t5-sale, --t5-radius, --t5-speed.
   Plan: doc/theme5/PLAN.md. Namespace: .t5-* */

/* ---------- tokens ---------- */
:root {
  --t5-primary: #4F46E5; --t5-on-primary: #fff; --t5-accent: #F59E0B; --t5-on-accent: #111827;
  --t5-primary-d: #818CF8; --t5-on-primary-d: #111827; --t5-sale: #DC2626; --t5-on-sale: #fff;
  --t5-radius: 12px; --t5-speed: 1;

  --t5-bg: #F7F7FA; --t5-surface: #FFFFFF; --t5-surface-2: #F1F1F5; --t5-text: #111827; --t5-muted: #6B7280;
  --t5-line: #E5E7EB; --t5-success: #059669; --t5-warning: #B45309;
  --t5-brand: var(--t5-primary); --t5-on-brand: var(--t5-on-primary);
  --t5-brand-soft: color-mix(in srgb, var(--t5-brand) 10%, var(--t5-surface));
  --t5-shadow-1: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
  --t5-shadow-2: 0 16px 36px -16px rgba(17, 24, 39, .28);

  --t5-r-sm: calc(var(--t5-radius) * .66); --t5-r: var(--t5-radius); --t5-r-lg: calc(var(--t5-radius) * 1.6);

  --t5-font: 'Noto Sans Bengali', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t5-font-num: 'Plus Jakarta Sans', 'Noto Sans Bengali', system-ui, sans-serif;

  /* motion: every duration is multiplied by the admin speed */
  --t5-ease: cubic-bezier(.2, .8, .2, 1);
  --t5-ease-in-out: cubic-bezier(.45, 0, .2, 1);
  --t5-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t5-d-xs: calc(80ms * var(--t5-speed));
  --t5-d-sm: calc(150ms * var(--t5-speed));
  --t5-d-md: calc(220ms * var(--t5-speed));
  --t5-d-lg: calc(280ms * var(--t5-speed));
  --t5-d-xl: calc(600ms * var(--t5-speed));

  --t5-tabbar-h: 64px;
  --t5-safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* dark: explicit choice, or system when the visitor/admin left it on "system" */
:root[data-t5-theme="dark"] {
  --t5-bg: #0F1117; --t5-surface: #171A22; --t5-surface-2: #1F232D; --t5-text: #F3F4F6; --t5-muted: #9CA3AF;
  --t5-line: #2A2F3A; --t5-success: #34D399;
  --t5-brand: var(--t5-primary-d); --t5-on-brand: var(--t5-on-primary-d);
  --t5-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --t5-shadow-2: 0 18px 40px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-t5-mode="system"] {
    --t5-bg: #0F1117; --t5-surface: #171A22; --t5-surface-2: #1F232D; --t5-text: #F3F4F6; --t5-muted: #9CA3AF;
    --t5-line: #2A2F3A; --t5-success: #34D399;
    --t5-brand: var(--t5-primary-d); --t5-on-brand: var(--t5-on-primary-d);
    --t5-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --t5-shadow-2: 0 18px 40px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* motion level: off = durations collapse to a short fade; reduced-motion always wins */
:root[data-t5-motion="off"] { --t5-speed: .5; }
@media (prefers-reduced-motion: reduce) {
  :root { --t5-speed: .5; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
:root[data-t5-motion="off"] *, :root[data-t5-motion="off"] *::before, :root[data-t5-motion="off"] *::after { animation: none !important; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.t5-body { margin: 0; font-family: var(--t5-font); font-size: 15px; line-height: 1.5; color: var(--t5-text); background: var(--t5-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.t5-body img { max-width: 100%; height: auto; display: block; }
.t5-body a { color: inherit; text-decoration: none; }
.t5-body button { font: inherit; color: inherit; cursor: pointer; }
.t5-body :focus-visible { outline: 2px solid var(--t5-brand); outline-offset: 2px; }
.t5-num { font-family: var(--t5-font-num); font-variant-numeric: tabular-nums; }
.t5-main { min-height: 60vh; }
.t5-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1024px) { .t5-container { padding-inline: 28px; } }
.t5-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons (shared fx hooks: .t5-btn--primary, .t5-btn--buy) ---------- */
.t5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--t5-r); font-weight: 700; font-size: 14px; line-height: 1.2; background: var(--t5-surface-2); color: var(--t5-text); transition: transform var(--t5-d-sm) var(--t5-ease), background-color var(--t5-d-sm), box-shadow var(--t5-d-sm); }
.t5-btn:active { transform: scale(.97); }
.t5-btn--primary, .t5-btn--buy { background: var(--t5-brand); color: var(--t5-on-brand); }
.t5-btn--accent { background: var(--t5-accent); color: var(--t5-on-accent); }
.t5-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--t5-text); }
.t5-btn--block { width: 100%; }
.t5-btn[disabled], .t5-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------- badges / chips ---------- */
.t5-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; font: 700 11px/1.4 var(--t5-font-num); background: var(--t5-sale); color: var(--t5-on-sale); }
.t5-badge--new { background: var(--t5-brand); color: var(--t5-on-brand); }
.t5-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--t5-line); background: var(--t5-surface); font-size: 13px; white-space: nowrap; }
.t5-chip.is-active { background: var(--t5-text); color: var(--t5-bg); border-color: var(--t5-text); }

/* ---------- toast host (filled by motion/toast.js) ---------- */
.t5-toast-host { position: fixed; left: 12px; right: 12px; z-index: 90; display: flex; flex-direction: column; gap: 8px; pointer-events: none; bottom: calc(var(--t5-tabbar-h) + 12px + var(--t5-safe-b)); }
:root[data-t5-toast="top"] .t5-toast-host { bottom: auto; top: 12px; }
@media (min-width: 1024px) { .t5-toast-host { left: auto; right: 24px; width: 360px; bottom: 24px; } }

/* ---------- motion engine (T5.2): sheet, toast, skeleton, reveal, page change ---------- */
.t5-locked body { position: fixed; left: 0; right: 0; overflow: hidden; }

.t5-sheet-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.t5-sheet__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 20, .48); backdrop-filter: blur(2px); }
.t5-sheet { position: relative; width: 100%; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; background: var(--t5-surface); color: var(--t5-text); border-radius: var(--t5-r-lg) var(--t5-r-lg) 0 0; box-shadow: var(--t5-shadow-2); padding-bottom: var(--t5-safe-b); outline: none; touch-action: pan-y; will-change: transform; }
.t5-sheet--full { height: calc(100dvh - 24px); max-height: none; }
.t5-sheet__grip { width: 40px; height: 5px; border-radius: 3px; background: var(--t5-line); margin: 8px auto 0; flex: none; }
.t5-sheet__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 20px; cursor: grab; touch-action: none; flex: none; }
.t5-sheet__title { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
.t5-sheet__x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--t5-surface-2); }
.t5-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.t5-sheet-wrap.is-modal { align-items: center; padding: 24px; }
.t5-sheet-wrap.is-modal .t5-sheet { max-width: 560px; border-radius: var(--t5-r-lg); max-height: calc(100dvh - 48px); }
.t5-sheet-wrap.is-drawer { justify-content: flex-end; align-items: stretch; }
.t5-sheet-wrap.is-drawer .t5-sheet { width: 420px; max-width: 92vw; max-height: none; height: 100%; border-radius: var(--t5-r-lg) 0 0 var(--t5-r-lg); }
.t5-sheet-wrap.is-modal .t5-sheet__grip, .t5-sheet-wrap.is-drawer .t5-sheet__grip { display: none; }
.t5-sheet-wrap.is-modal .t5-sheet__head, .t5-sheet-wrap.is-drawer .t5-sheet__head { cursor: default; padding-top: 14px; }
.t5-sheet-wrap.is-closing { pointer-events: none; }

.t5-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--t5-r); background: #111827; color: #F9FAFB; box-shadow: var(--t5-shadow-2); font-size: 14px; touch-action: pan-y; user-select: none; }
[data-t5-theme="dark"] .t5-toast { background: #F3F4F6; color: #111827; }
.t5-toast__icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.t5-toast--success .t5-toast__icon { background: var(--t5-success); color: #fff; }
.t5-toast--error .t5-toast__icon { background: var(--t5-sale); color: var(--t5-on-sale); }
.t5-toast__msg { flex: 1; }
.t5-toast__action { border: 0; background: none; color: var(--t5-accent); font-weight: 700; padding: 6px 8px; border-radius: var(--t5-r-sm); }

.t5-skel-card { display: flex; flex-direction: column; gap: 8px; }
.t5-skel { border-radius: var(--t5-r-sm); background: linear-gradient(90deg, var(--t5-surface-2) 0%, var(--t5-line) 50%, var(--t5-surface-2) 100%) 0 0 / 200% 100%; animation: t5-shimmer calc(1.4s * var(--t5-speed)) linear infinite; }
.t5-skel--media { aspect-ratio: 1; border-radius: var(--t5-r); }
.t5-skel--line { height: 12px; margin-bottom: 6px; }
.t5-skel--line.is-short { width: 55%; }
@keyframes t5-shimmer { to { background-position: -200% 0; } }

.t5-reveal-on [data-t5-reveal]:not(.is-done) { transition: opacity var(--t5-d-xl) var(--t5-ease), transform var(--t5-d-xl) var(--t5-ease); transition-delay: var(--t5-rd, 0ms); }
.t5-reveal-on [data-t5-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); }
.t5-reveal-on [data-t5-reveal="fade"]:not(.is-in) { transform: none; }
.t5-reveal-on [data-t5-reveal="scale"]:not(.is-in) { transform: scale(.94); }
.t5-reveal-on [data-t5-reveal="left"]:not(.is-in) { transform: translateX(-24px); }
:root[data-t5-motion="subtle"].t5-reveal-on [data-t5-reveal]:not(.is-in) { transform: translateY(8px); }

/* page change (cross-document View Transitions) */
[data-t5-vt="hero"] { view-transition-name: t5-hero; }
::view-transition-group(*) { animation-duration: var(--t5-d-lg); animation-timing-function: var(--t5-ease); }
::view-transition-group(t5-hero) { animation-duration: var(--t5-d-xl); }
:root[data-t5-pt="slide"]:not([data-t5-swap], .t5-vt-mode)::view-transition-old(root) { animation: var(--t5-d-lg) var(--t5-ease) both t5-vt-out; }
:root[data-t5-pt="slide"]:not([data-t5-swap], .t5-vt-mode)::view-transition-new(root) { animation: var(--t5-d-lg) var(--t5-ease) both t5-vt-in; }
:root[data-t5-pt="slide"]:not([data-t5-swap], .t5-vt-mode)[data-t5-dir="back"]::view-transition-old(root) { animation-name: t5-vt-out-back; }
:root[data-t5-pt="slide"]:not([data-t5-swap], .t5-vt-mode)[data-t5-dir="back"]::view-transition-new(root) { animation-name: t5-vt-in-back; }
@keyframes t5-vt-out { to { opacity: 0; transform: translateX(-30%); } }
@keyframes t5-vt-in { from { opacity: 0; transform: translateX(30%); } }
@keyframes t5-vt-out-back { to { opacity: 0; transform: translateX(30%); } }
@keyframes t5-vt-in-back { from { opacity: 0; transform: translateX(-30%); } }
/* in-page swaps (transition.swap): only the [data-t5-step] block moves, the page stays */
:root[data-t5-swap] [data-t5-step] { view-transition-name: t5-step; }
:root[data-t5-swap="next"]::view-transition-old(t5-step) { animation: var(--t5-d-md) var(--t5-ease) both t5-vt-out; }
:root[data-t5-swap="next"]::view-transition-new(t5-step) { animation: var(--t5-d-md) var(--t5-ease) both t5-vt-in; }
:root[data-t5-swap="prev"]::view-transition-old(t5-step) { animation: var(--t5-d-md) var(--t5-ease) both t5-vt-out-back; }
:root[data-t5-swap="prev"]::view-transition-new(t5-step) { animation: var(--t5-d-md) var(--t5-ease) both t5-vt-in-back; }
:root[data-t5-swap="fade"]::view-transition-group(t5-step) { animation-duration: var(--t5-d-md); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .t5-reveal-on [data-t5-reveal]:not(.is-in) { transform: none; }
}
@media (prefers-color-scheme: dark) { :root[data-t5-mode="system"] .t5-toast { background: #F3F4F6; color: #111827; } }

/* ======================================================================
   App shell (T5.4): icons, header + mega-menu, tab bar, search, menu, footer, errors, offline
   ====================================================================== */
.t5-i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.t5-i--sm { width: 18px; height: 18px; }
.t5-i--xs { width: 14px; height: 14px; }
@media (min-width: 1024px) { .t5-mob { display: none !important; } }
@media (max-width: 1023.98px) { .t5-desk { display: none !important; } }
.t5-skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--t5-r); background: var(--t5-brand); color: var(--t5-on-brand) !important; font-weight: 700; transition: top var(--t5-d-sm); }
.t5-skip:focus { top: 12px; }
.t5-main:focus { outline: none; }

.t5-ib { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--t5-text); transition: background-color var(--t5-d-sm), transform var(--t5-d-sm) var(--t5-ease); }
.t5-ib:hover { background: var(--t5-surface-2); }
.t5-ib:active { transform: scale(.92); }
.t5-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--t5-accent); color: var(--t5-on-accent); font: 800 10.5px/18px var(--t5-font-num); text-align: center; box-shadow: 0 0 0 2px var(--t5-surface); }
.t5-count:empty { display: none; }
.t5-eyebrow { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t5-muted); }
.t5-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t5-chip--brand { background: var(--t5-brand-soft); border-color: transparent; color: var(--t5-brand); font-weight: 700; }
.t5-link { border: 0; background: none; padding: 4px 0; color: var(--t5-brand); font-weight: 700; font-size: 13px; }
.t5-h1 { margin: 0 0 8px; font-size: clamp(22px, 5vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.t5-lead { margin: 0 0 20px; color: var(--t5-muted); font-size: 15px; }

/* mode switch: show the icon of the mode you would switch to */
.t5-mode-sun { display: none; }
:root[data-t5-theme="dark"] .t5-mode-sun { display: inline; }
:root[data-t5-theme="dark"] .t5-mode-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-t5-mode="system"] .t5-mode-sun { display: inline; }
  :root[data-t5-mode="system"] .t5-mode-moon { display: none; }
}
/* circle reveal from the switch (shell.js toggleMode, same-document View Transition) */
:root.t5-vt-mode .t5-hd, :root.t5-vt-mode .t5-tabbar { view-transition-name: none; }
:root.t5-vt-mode::view-transition-old(root) { animation: none; }
:root.t5-vt-mode::view-transition-new(root) { animation: calc(520ms * var(--t5-speed)) var(--t5-ease-in-out) both t5-vt-circle; }
@keyframes t5-vt-circle { from { clip-path: circle(0 at var(--t5-mx, 50%) var(--t5-my, 0)); } to { clip-path: circle(150vmax at var(--t5-mx, 50%) var(--t5-my, 0)); } }

/* ---------- header ---------- */
.t5-hd { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--t5-surface) 92%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t5-d-md), box-shadow var(--t5-d-md); view-transition-name: t5-header; }
.t5-hd.is-scrolled { border-bottom-color: var(--t5-line); box-shadow: 0 6px 18px -14px rgba(17, 24, 39, .35); }
.t5-hd__bar { display: flex; align-items: center; gap: 4px; height: 56px; }
.t5-logo { display: flex; align-items: center; min-width: 0; margin-right: auto; padding: 4px; font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--t5-text); }
.t5-logo img { max-height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.t5-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t5-hd__acts { display: flex; align-items: center; gap: 2px; margin-right: -6px; }
.t5-lang { font: 800 13px/1 var(--t5-font-num); }
.t5-hd__pill { padding-bottom: 10px; }
.t5-hd__search { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--t5-surface-2); color: var(--t5-muted); font-size: 14px; border: 1px solid transparent; transition: border-color var(--t5-d-sm), background-color var(--t5-d-sm); }
.t5-hd__search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t5-hd__search:hover { border-color: var(--t5-line); }
.t5-hd__search kbd { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--t5-line); background: var(--t5-surface); font: 700 11px/1.5 var(--t5-font-num); color: var(--t5-muted); }
/* phones: the bar scrolls away, the search pill stays (pure CSS: sticky with a negative top) */
@media (max-width: 1023.98px) {
  .t5-hd[data-shrink] { top: -56px; }
}
@media (min-width: 1024px) {
  .t5-hd__bar { height: 72px; gap: 16px; }
  .t5-logo { margin-right: 8px; }
  .t5-logo img { max-height: 42px; max-width: 190px; }
  .t5-hd__search { flex: 1; max-width: 620px; margin: 0 auto; min-height: 46px; }
  .t5-hd__acts { gap: 4px; }
}

/* desktop nav row + mega-menu */
.t5-hd__nav { position: relative; border-top: 1px solid var(--t5-line); }
.t5-hd__navin { display: flex; align-items: center; gap: 4px; height: 46px; overflow-x: auto; scrollbar-width: none; }
.t5-hd__navin::-webkit-scrollbar { display: none; }
.t5-mm__btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; margin-right: 8px; border: 0; border-radius: var(--t5-r); background: var(--t5-brand); color: var(--t5-on-brand); font-weight: 700; font-size: 14px; white-space: nowrap; }
.t5-mm__btn[aria-expanded="true"] .t5-mm__chev { transform: rotate(180deg); }
.t5-mm__chev { transition: transform var(--t5-d-md) var(--t5-ease); }
.t5-hd__link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--t5-r); font-size: 14px; font-weight: 600; color: var(--t5-muted); white-space: nowrap; transition: color var(--t5-d-sm), background-color var(--t5-d-sm); }
.t5-hd__link:hover, .t5-hd__link[aria-current] { color: var(--t5-text); background: var(--t5-surface-2); }
.t5-hd__link.is-hot { color: var(--t5-sale); }
.t5-mm { position: absolute; left: 0; right: 0; top: 100%; background: var(--t5-surface); border-top: 1px solid var(--t5-line); box-shadow: var(--t5-shadow-2); }
.t5-mm[hidden] { display: none; }
.t5-mm__in { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding-block: 18px 22px; max-height: min(70vh, 560px); }
.t5-mm__list { margin: 0; padding: 0 12px 0 0; list-style: none; overflow-y: auto; border-right: 1px solid var(--t5-line); }
.t5-mm__cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--t5-r-sm); font-weight: 600; font-size: 14px; color: var(--t5-text); }
.t5-mm__cat .t5-i { opacity: .4; }
.t5-mm__cat[aria-current] { background: var(--t5-brand-soft); color: var(--t5-brand); }
.t5-mm__cat[aria-current] .t5-i { opacity: 1; }
.t5-mm__panel { display: grid; grid-template-columns: 1fr 240px; gap: 24px; min-height: 0; }
.t5-mm__panel[hidden] { display: none; }
.t5-mm__title { margin: 4px 0 14px; font-size: 18px; font-weight: 800; }
.t5-mm__title small { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--t5-muted); }
.t5-mm__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 16px; }
.t5-mm__links a { padding: 7px 0; font-size: 14px; color: var(--t5-muted); }
.t5-mm__links a:hover, .t5-mm__links a:focus-visible { color: var(--t5-brand); }
.t5-mm__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; color: var(--t5-brand); }
.t5-mm__art { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--t5-r-lg); overflow: hidden; background: var(--t5-brand-soft); color: var(--t5-brand); font-size: 56px; font-weight: 800; }
.t5-mm__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t5-d-xl) var(--t5-ease); }
.t5-mm__panel:hover .t5-mm__art img { transform: scale(1.04); }

/* ---------- bottom tab bar ---------- */
.t5-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding-bottom: var(--t5-safe-b); background: color-mix(in srgb, var(--t5-surface) 90%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--t5-line); transition: transform var(--t5-d-lg) var(--t5-ease); view-transition-name: t5-tabbar; }
.t5-tabbar.is-hidden { transform: translateY(calc(100% + 2px)); }
.t5-tabbar ul { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--t5-tabbar-h); margin: 0 auto; padding: 0 4px; max-width: 560px; list-style: none; }
.t5-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; color: var(--t5-muted); font-size: 11px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.t5-tab__ico { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color var(--t5-d-md) var(--t5-ease), transform var(--t5-d-sm) var(--t5-ease); }
.t5-tab__ico .t5-count { top: -3px; right: 4px; }
.t5-tab__txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t5-tab:active .t5-tab__ico { transform: scale(.9); }
.t5-tab[aria-current] { color: var(--t5-brand); }
.t5-tab[aria-current] .t5-tab__ico { background: var(--t5-brand-soft); --t5-f: 1; }
@media (max-width: 1023.98px) { body.t5-body { padding-bottom: calc(var(--t5-tabbar-h) + var(--t5-safe-b)); } }
@media (min-width: 1024px) { .t5-tabbar { display: none; } }
@media (max-width: 340px) { .t5-tab__txt { font-size: 10px; } .t5-tab__ico { width: 44px; } }

/* ---------- search screen ---------- */
.t5-search-sheet .t5-sheet__head { padding-bottom: 4px; }
.t5-search__form { position: sticky; top: -4px; z-index: 1; margin: 0 -20px; padding: 4px 20px 10px; background: var(--t5-surface); }
.t5-field { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--t5-surface-2); border: 2px solid transparent; color: var(--t5-muted); transition: border-color var(--t5-d-sm); }
.t5-field:focus-within { border-color: var(--t5-brand); }
.t5-field input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: var(--t5-text); font: inherit; font-size: 16px; }
.t5-field input::-webkit-search-cancel-button { display: none; }
.t5-field__clear { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--t5-muted); }
.t5-search__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t5-search__row .t5-eyebrow { margin-bottom: 10px; }
.t5-search__note { margin: 24px 0; text-align: center; color: var(--t5-muted); }
.t5-sres { margin: 0 0 14px; padding: 0; list-style: none; }
.t5-sres__row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: var(--t5-r); }
.t5-sres__row:hover, .t5-sres__row:focus-visible { background: var(--t5-surface-2); }
.t5-sres__row img { width: 56px; height: 56px; border-radius: var(--t5-r-sm); object-fit: cover; background: var(--t5-surface-2); }
.t5-sres__name { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; }
.t5-sres__price { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; }
.t5-sres__price del { font-size: 12px; color: var(--t5-muted); }
.t5-btn--block { width: 100%; }
@media (min-width: 1024px) { .t5-search-sheet.is-modal { align-items: flex-start; padding-top: 10vh; } .t5-search-sheet.is-modal .t5-sheet { max-width: 640px; } }

/* ---------- menu ---------- */
.t5-menu > .t5-hd__search { margin-top: 4px; }
.t5-menu__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.t5-menu__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 84px; padding: 12px; border-radius: var(--t5-r); background: var(--t5-surface-2); font-size: 13px; font-weight: 700; line-height: 1.25; transition: transform var(--t5-d-sm) var(--t5-ease); }
.t5-menu__tile .t5-i { color: var(--t5-brand); }
.t5-menu__tile.is-hot .t5-i { color: var(--t5-sale); --t5-f: 1; }
.t5-menu__tile[aria-current] { background: var(--t5-brand-soft); color: var(--t5-brand); }
.t5-menu__tile:active { transform: scale(.96); }
.t5-menu__cats, .t5-menu__links { margin: 0; padding: 0; list-style: none; }
.t5-mcat { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: var(--t5-r-sm); cursor: pointer; list-style: none; }
.t5-mcat::-webkit-details-marker { display: none; }
.t5-mcat > .t5-i { color: var(--t5-muted); transition: transform var(--t5-d-md) var(--t5-ease); }
.t5-mcat-d[open] .t5-mcat__chev { transform: rotate(180deg); }
.t5-mcat__img { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--t5-r-sm); overflow: hidden; background: var(--t5-brand-soft); color: var(--t5-brand); font-weight: 800; }
.t5-mcat__img img { width: 100%; height: 100%; object-fit: cover; }
.t5-mcat__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.t5-mcat__txt small { font-weight: 500; font-size: 12px; color: var(--t5-muted); }
.t5-mcat__subs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 4px 12px 60px; }
.t5-menu__links a { display: flex; align-items: center; gap: 12px; padding: 11px 4px; font-size: 14px; }
.t5-menu__links .t5-i { color: var(--t5-muted); }
.t5-menu__social { display: flex; gap: 4px; margin: 18px 0 8px; }

/* ---------- footer ---------- */
.t5-ft { margin-top: 48px; padding: 32px 0 20px; background: var(--t5-surface); border-top: 1px solid var(--t5-line); font-size: 14px; }
.t5-ft__grid { display: grid; gap: 4px; }
.t5-ft__brand { padding-bottom: 12px; }
.t5-ft__mark { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.t5-ft__line { display: flex; gap: 8px; margin: 0; color: var(--t5-muted); }
.t5-ft__line .t5-i { margin-top: 2px; }
.t5-ft__social { display: flex; gap: 2px; margin: 10px 0 0 -10px; }
.t5-ft__col { border-top: 1px solid var(--t5-line); }
.t5-ft__col summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; }
.t5-ft__col summary::-webkit-details-marker { display: none; }
.t5-ft__col summary .t5-i { color: var(--t5-muted); transition: transform var(--t5-d-md) var(--t5-ease); }
.t5-ft__col[open] summary .t5-i { transform: rotate(180deg); }
.t5-ft__col h2 { margin: 0; font-size: 14px; font-weight: 800; }
.t5-ft__col nav, .t5-ft__contact { display: flex; flex-direction: column; padding-bottom: 12px; }
.t5-ft__col nav a, .t5-ft__contact a { display: flex; align-items: center; gap: 8px; padding: 7px 0; color: var(--t5-muted); overflow-wrap: anywhere; }
.t5-ft__col a:hover { color: var(--t5-brand); }
.t5-ft__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--t5-line); color: var(--t5-muted); }
.t5-ft__lang { display: inline-flex; align-items: center; gap: 8px; }
.t5-ft__lang a[aria-current] { color: var(--t5-text); font-weight: 700; }
@media (min-width: 768px) {
  .t5-ft__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
  .t5-ft__col { border-top: 0; }
  .t5-ft__col summary { pointer-events: none; min-height: 0; margin-bottom: 10px; }
  .t5-ft__col summary .t5-i { display: none; }
}

/* ---------- error pages ---------- */
.t5-err { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 56px 32px; max-width: 560px; }
.t5-err__code { margin: 0 0 8px; font-size: clamp(72px, 22vw, 132px); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, var(--t5-brand), var(--t5-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t5-err__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- offline notice ---------- */
.t5-offline { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 95; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 9px 14px; border-radius: 999px; background: #111827; color: #F9FAFB; font-size: 13px; font-weight: 600; box-shadow: var(--t5-shadow-2); transform: translateX(-50%); animation: t5-drop var(--t5-d-lg) var(--t5-ease) both; }
.t5-offline[hidden] { display: none; }
.t5-offline.is-back { background: var(--t5-success); color: #fff; }
@keyframes t5-drop { from { opacity: 0; transform: translate(-50%, -16px); } }

/* ======================================================================
   Home + product card (T5.5)
   ====================================================================== */
.t5-block { margin-top: 28px; }
@media (min-width: 1024px) { .t5-block { margin-top: 44px; } }
.t5-shead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.t5-shead__title { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; font-size: clamp(17px, 4.4vw, 22px); font-weight: 800; letter-spacing: -.01em; }
.t5-shead__title .t5-i { color: var(--t5-brand); }
.t5-shead__more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--t5-brand); white-space: nowrap; }
.t5-more { margin-top: 16px; }

/* product grid + horizontal rail */
.t5-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .t5-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .t5-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .t5-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.t5-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 44%); gap: 12px; margin-inline: -16px; padding: 2px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
.t5-rail::-webkit-scrollbar { display: none; }
.t5-rail > * { scroll-snap-align: start; }
@media (min-width: 768px) { .t5-rail { grid-auto-columns: minmax(180px, 30%); } }
@media (min-width: 1024px) { .t5-rail { grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; scrollbar-width: thin; } }

/* card */
.t5-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--t5-r); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); overflow: hidden; transition: transform var(--t5-d-md) var(--t5-ease), box-shadow var(--t5-d-md); }
:root[data-t5-press="1"] .t5-card:active { transform: scale(.97); }
.t5-card__frame { position: relative; }
.t5-card__media { display: block; aspect-ratio: 1; background: var(--t5-surface-2); overflow: hidden; }
.t5-card__media img { width: 100%; height: 100%; object-fit: cover; }
.t5-card__badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.t5-badge--free { background: var(--t5-success); color: #fff; }
.t5-card__fav, .t5-card__add { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--t5-surface) 88%, transparent); color: var(--t5-text); box-shadow: var(--t5-shadow-1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform var(--t5-d-sm) var(--t5-ease), color var(--t5-d-sm), background-color var(--t5-d-sm); }
.t5-card__fav { top: 8px; right: 8px; }
.t5-card__fav[aria-pressed="true"] { color: var(--t5-sale); --t5-f: 1; }
.t5-card__add { right: 8px; bottom: 8px; background: var(--t5-brand); color: var(--t5-on-brand); }
.t5-card__fav:active, .t5-card__add:active { transform: scale(.88); }
.t5-card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.t5-card__name { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.t5-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.t5-card__fav, .t5-card__add, .t5-card__badges { z-index: 1; }
.t5-card__rate { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--t5-text); }
.t5-card__rate .t5-i { color: var(--t5-accent); }
.t5-card__rate span { color: var(--t5-muted); font-weight: 500; }
.t5-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.t5-price__now { font-size: 15px; font-weight: 800; color: var(--t5-text); }
.t5-price__was { font-size: 12px; color: var(--t5-muted); }
.t5-price--lg .t5-price__now { font-size: 24px; }
@media (hover: hover) and (pointer: fine) { .t5-card:hover { box-shadow: var(--t5-shadow-2); } }

/* hero */
.t5-hero { margin-top: 4px; }
@media (min-width: 1024px) { .t5-hero { margin-top: 20px; } }
.t5-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--t5-r-lg); scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: 3px; }
.t5-hero__track::-webkit-scrollbar { display: none; }
.t5-hero__slide { flex: 0 0 100%; scroll-snap-align: center; overflow: hidden; background: var(--t5-surface-2); }
.t5-hero__slide img { width: 100%; height: auto; }
.t5-hero__dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.t5-hero__dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.t5-hero__dots i { display: block; width: 6px; height: 6px; border-radius: 999px; background: var(--t5-line); transition: width var(--t5-d-lg) var(--t5-ease), background-color var(--t5-d-md); }
.t5-hero__dots .is-active i { width: 20px; background: var(--t5-brand); }
/* fade: slides stacked in one cell */
.t5-hero[data-mode="fade"] .t5-hero__track { display: grid; overflow: hidden; }
.t5-hero[data-mode="fade"] .t5-hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--t5-d-xl) var(--t5-ease-in-out), visibility 0s var(--t5-d-xl); }
.t5-hero[data-mode="fade"] .t5-hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
/* ken burns: slow zoom on the visible banner */
.t5-hero[data-mode="ken_burns"] .t5-hero__slide img { transform-origin: 60% 40%; }
.t5-hero[data-mode="ken_burns"] .t5-hero__slide.is-active img { animation: t5-kb calc(7s * var(--t5-speed)) ease-out both; }
@keyframes t5-kb { from { transform: scale(1); } to { transform: scale(1.08); } }
/* float (rich): the banner drifts a little */
.t5-hero[data-mode="float"] .t5-hero__track { animation: t5-float calc(6s * var(--t5-speed)) ease-in-out infinite; box-shadow: var(--t5-shadow-2); }
@keyframes t5-float { 50% { transform: translateY(-6px); } }

/* category chips under the hero */
.t5-qchips { margin-top: 16px; }
.t5-qchips__row { display: flex; gap: 8px; margin-inline: -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.t5-qchips__row::-webkit-scrollbar { display: none; }
.t5-qchip { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--t5-line); background: var(--t5-surface); font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color var(--t5-d-sm), transform var(--t5-d-sm) var(--t5-ease); }
.t5-qchip:hover { border-color: var(--t5-brand); }
.t5-qchip:active { transform: scale(.96); }
.t5-qchip__img { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; overflow: hidden; background: var(--t5-brand-soft); color: var(--t5-brand); font-weight: 800; font-size: 12px; }
.t5-qchip__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .t5-qchips__row { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } }

/* flash sale */
.t5-flash__box { padding: 14px 16px 6px; margin-inline: -4px; border-radius: var(--t5-r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--t5-accent) 22%, var(--t5-surface)), color-mix(in srgb, var(--t5-brand) 10%, var(--t5-surface))); }
.t5-flash .t5-shead__title .t5-i { color: var(--t5-accent); --t5-f: 1; }
.t5-flash .t5-rail { margin-inline: -16px; padding-inline: 16px; }
@media (min-width: 1024px) { .t5-flash__box { padding: 20px 24px 12px; margin-inline: 0; } .t5-flash .t5-rail { margin-inline: 0; padding-inline: 0; } }
.t5-cd { display: inline-flex; align-items: center; gap: 4px; perspective: 300px; }
.t5-cd__lbl { margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--t5-muted); }
.t5-cd__u { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 8px; background: var(--t5-text); color: var(--t5-bg); font-weight: 800; font-size: 14px; transform-origin: 50% 50%; }
.t5-cd b { font-weight: 800; color: var(--t5-text); }
.t5-cd.is-over { opacity: .5; }

/* category tiles */
.t5-ctiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .t5-ctiles { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; } }
.t5-ctile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.t5-ctile__img { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: var(--t5-r-lg); overflow: hidden; background: var(--t5-brand-soft); color: var(--t5-brand); transition: transform var(--t5-d-md) var(--t5-ease); }
.t5-ctile__img img { width: 100%; height: 100%; object-fit: cover; }
.t5-ctile__img b { font-size: 26px; }
.t5-ctile:hover .t5-ctile__img { transform: translateY(-3px); }
.t5-ctile:active .t5-ctile__img { transform: scale(.95); }
.t5-ctile__name { width: 100%; font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* reviews */
.t5-rail--reviews { grid-auto-columns: minmax(250px, 82%); }
@media (min-width: 768px) { .t5-rail--reviews { grid-auto-columns: minmax(280px, 40%); } }
@media (min-width: 1024px) { .t5-rail--reviews { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
.t5-review { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 18px; border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); }
.t5-review__q { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; color: var(--t5-brand-soft); }
.t5-review blockquote { margin: 0; font-size: 14px; line-height: 1.55; }
.t5-review figcaption { display: flex; flex-direction: column; margin-top: auto; font-size: 13px; }
.t5-review figcaption a { color: var(--t5-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t5-stars { display: inline-flex; gap: 1px; color: var(--t5-line); }
.t5-stars .is-on { color: var(--t5-accent); }

/* pull to refresh */
.t5-ptr { --t5-ptr: 0px; position: fixed; left: 50%; top: 0; z-index: 70; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; border-radius: 999px; background: var(--t5-surface); color: var(--t5-brand); box-shadow: var(--t5-shadow-2); opacity: 0; transform: translateY(calc(var(--t5-ptr) - 48px)) rotate(calc(var(--t5-ptr) * 3)); pointer-events: none; }
.t5-ptr.is-pull { opacity: 1; }
.t5-ptr.is-ready { color: var(--t5-on-brand); background: var(--t5-brand); }
.t5-ptr.is-busy .t5-ptr__spin { animation: t5-spin .8s linear infinite; }
.t5-ptr__spin { display: grid; }
@keyframes t5-spin { to { transform: rotate(360deg); } }

/* ======================================================================
   Listing (T5.6): head, filters (sidebar / sheet), toolbar, chips, pager, empty, categories
   ====================================================================== */
.t5-list { padding-top: 12px; }
.t5-list__head { margin-bottom: 12px; }
.t5-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-bottom: 6px; font-size: 12.5px; color: var(--t5-muted); }
.t5-crumbs a:hover { color: var(--t5-brand); }
.t5-crumbs [aria-current] { color: var(--t5-text); font-weight: 600; }
.t5-list__layout { display: block; }
@media (min-width: 1024px) {
  .t5-list__layout.has-side { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
  .t5-list__layout.has-side .t5-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .t5-list__layout.has-side .t5-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.t5-list__side { display: none; }
@media (min-width: 1024px) { .t5-list__side { display: block; position: sticky; top: calc(72px + 46px + 16px); max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; } }
.t5-list__bar { position: sticky; top: var(--t5-hd-stick, 54px); z-index: 20; display: flex; align-items: center; gap: 8px; margin: 0 -16px 8px; padding: 8px 16px; background: color-mix(in srgb, var(--t5-bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 1024px) { .t5-list__bar { position: static; margin: 0 0 8px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-end; } }
.t5-list__bar .t5-chip b { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--t5-brand); color: var(--t5-on-brand); font-size: 11px; text-align: center; }
.t5-list__bar .t5-chip.is-active b { background: var(--t5-bg); color: var(--t5-text); }
.t5-list__research { flex: 1; min-width: 0; }
.t5-list__count { margin: 0 0 10px; font-size: 13px; color: var(--t5-muted); }
.t5-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--t5-line); background: var(--t5-surface); color: var(--t5-text); font-size: 13px; font-weight: 600; }
.t5-sort select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 6px 2px; max-width: 46vw; cursor: pointer; }
.t5-sort select:focus { outline: none; }
.t5-sort:focus-within { border-color: var(--t5-brand); }
.t5-active { margin-bottom: 10px; }
.t5-active .t5-chip .t5-i { margin-left: 2px; }
.t5-subcats { display: flex; gap: 8px; margin: 0 -16px 12px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.t5-subcats::-webkit-scrollbar { display: none; }
.t5-subcats .t5-chip { flex: none; }
@media (min-width: 1024px) { .t5-subcats { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; } }
.t5-results[aria-busy="true"] { pointer-events: none; }

/* filter form (sidebar on desktop, inside a sheet on phones) */
.t5-filter { display: flex; flex-direction: column; gap: 4px; }
.t5-filter__head { display: flex; align-items: center; justify-content: space-between; }
.t5-filter__head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.t5-filter-sheet .t5-filter__head { display: none; }
.t5-filter__group { margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--t5-line); }
.t5-filter__group legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t5-muted); }
.t5-check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 14px; }
.t5-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--t5-brand); }
.t5-check span { flex: 1; min-width: 0; }
.t5-check small { font-size: 12px; color: var(--t5-muted); }
.t5-check--sub { padding-left: 28px; font-size: 13.5px; }
.t5-filter__cats { max-height: none; }
@media (min-width: 1024px) { .t5-filter__cats { max-height: 340px; overflow-y: auto; scrollbar-width: thin; } }
.t5-range { display: flex; align-items: center; gap: 8px; }
.t5-range label { flex: 1; min-width: 0; }
.t5-range input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--t5-line); border-radius: var(--t5-r-sm); background: var(--t5-surface); color: var(--t5-text); font: inherit; font-size: 16px; }
.t5-range input:focus { outline: 2px solid var(--t5-brand); outline-offset: -1px; border-color: transparent; }
.t5-filter__apply { padding-top: 12px; }
@media (min-width: 1024px) { .t5-list__side .t5-filter__apply { display: none; } }
.t5-filter-sheet .t5-filter__apply { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px calc(12px + var(--t5-safe-b)); background: var(--t5-surface); border-top: 1px solid var(--t5-line); }

/* load more + pager */
.t5-js .t5-pager { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t5-pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; font-size: 14px; }
.t5-pager a { font-weight: 700; color: var(--t5-brand); }
.t5-more[data-busy] { opacity: .7; }

/* empty state */
.t5-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; text-align: center; }
.t5-empty__art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 999px; background: var(--t5-brand-soft); color: var(--t5-brand); }
.t5-empty__art .t5-i { width: 32px; height: 32px; }
.t5-empty h2 { margin: 8px 0 0; font-size: 18px; font-weight: 800; }
.t5-empty p { margin: 0 0 8px; max-width: 420px; color: var(--t5-muted); }

/* categories page */
.t5-catlist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .t5-catlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1280px) { .t5-catlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.t5-catcard { border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); overflow: hidden; }
.t5-catcard__main { display: flex; align-items: center; gap: 14px; padding: 12px; }
.t5-catcard__main > .t5-i { color: var(--t5-muted); }
.t5-catcard__img { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: var(--t5-r); overflow: hidden; background: var(--t5-brand-soft); color: var(--t5-brand); font-size: 22px; }
.t5-catcard__img img { width: 100%; height: 100%; object-fit: cover; }
.t5-catcard__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t5-catcard__txt b { font-size: 15px; }
.t5-catcard__txt small { font-size: 12.5px; color: var(--t5-muted); }
.t5-catcard__subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 90px; }
.t5-catcard__subs .t5-chip { min-height: 30px; padding: 4px 11px; font-size: 12.5px; }
@media (max-width: 359.98px) { .t5-catcard__subs { padding-left: 12px; } }
:root:has(.t5-hd:not([data-shrink])) { --t5-hd-stick: 110px; }

/* ======================================================================
   Product page + quick view (T5.7): gallery, buy form, options sheet, sticky buy,
   viewer, facts, accordions, reviews, often bought together, add-to-cart effects
   ====================================================================== */
.t5-pdp { padding-top: 10px; padding-bottom: 24px; }
.t5-pdp .t5-crumbs { display: none; }
@media (min-width: 1024px) { .t5-pdp { padding-top: 16px; } .t5-pdp .t5-crumbs { display: flex; } }
.t5-pdp__grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .t5-pdp__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; } }

/* gallery */
.t5-gal { position: relative; margin-inline: -16px; }
@media (min-width: 1024px) { .t5-gal { margin-inline: 0; position: sticky; top: 132px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; } .t5-gal__track { grid-column: 2; grid-row: 1; } .t5-gal__thumbs { grid-column: 1; grid-row: 1; } }
.t5-gal__track { display: flex; aspect-ratio: 1; background: var(--t5-surface-2); outline-offset: -3px; touch-action: pan-y pinch-zoom; }
@media (min-width: 1024px) { .t5-gal__track { border-radius: var(--t5-r-lg); overflow: hidden; } }
.t5-gal--swipe .t5-gal__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.t5-gal--swipe .t5-gal__track::-webkit-scrollbar { display: none; }
.t5-gal__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.t5-gal__slide img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; -webkit-user-drag: none; user-select: none; }
.t5-gal--fade .t5-gal__track, .t5-gal--thumbs .t5-gal__track { display: grid; overflow: hidden; }
.t5-gal--fade .t5-gal__slide, .t5-gal--thumbs .t5-gal__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.t5-gal--fade .t5-gal__slide.is-active, .t5-gal--thumbs .t5-gal__slide.is-active { opacity: 1; visibility: visible; }
.t5-gal__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.t5-gal__dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--t5-text) 25%, transparent); transition: width var(--t5-d-md) var(--t5-ease), background-color var(--t5-d-md); }
.t5-gal__dots i.is-on { width: 18px; background: var(--t5-brand); }
.t5-gal__thumbs { display: none; gap: 8px; }
.t5-gal__thumbs button { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--t5-r-sm); overflow: hidden; background: var(--t5-surface-2); opacity: .7; transition: opacity var(--t5-d-sm), border-color var(--t5-d-sm); }
.t5-gal__thumbs button.is-active { border-color: var(--t5-brand); opacity: 1; }
.t5-gal__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.t5-gal--thumbs .t5-gal__thumbs { display: flex; overflow-x: auto; padding: 10px 16px 0; scrollbar-width: none; }
.t5-gal--thumbs .t5-gal__dots { display: none; }
@media (min-width: 1024px) {
  .t5-gal__dots { display: none; }
  .t5-gal .t5-gal__thumbs { display: flex; flex-direction: column; padding: 0; max-height: 640px; overflow-y: auto; scrollbar-width: thin; }
  .t5-gal__thumbs button { width: 72px; height: 72px; }
}
.t5-gal__tools { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; }
.t5-gal__btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--t5-surface) 88%, transparent); color: var(--t5-text); box-shadow: var(--t5-shadow-1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform var(--t5-d-sm) var(--t5-ease); }
.t5-gal__btn:active { transform: scale(.88); }
.t5-gal__btn[aria-pressed="true"] { color: var(--t5-sale); --t5-f: 1; }
.t5-gal__badge { position: absolute; top: 12px; left: 12px; font-size: 13px; padding: 3px 9px; }
@media (min-width: 1024px) { .t5-gal__badge { left: 100px; } }

/* info column */
.t5-pdp__info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.t5-pdp__brand { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t5-brand); }
.t5-pdp__title { margin: 0; font-size: clamp(19px, 5vw, 28px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.t5-pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.t5-pdp__meta .t5-price { align-items: center; }
.t5-pdp__meta .t5-price__was { font-size: 15px; }
.t5-price--md .t5-price__now { font-size: 19px; }
.t5-pdp__deal { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--t5-r); background: color-mix(in srgb, var(--t5-accent) 18%, var(--t5-surface)); font-weight: 600; font-size: 14px; }
.t5-pdp__stock { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
.t5-pdp__stock.is-in { color: var(--t5-success); }
.t5-pdp__stock.is-out { color: var(--t5-sale); }
.t5-pdp__ask { display: flex; flex-wrap: wrap; gap: 8px; }

/* buy form */
.t5-pform { display: flex; flex-direction: column; gap: 14px; }
.t5-opts { display: flex; flex-direction: column; gap: 14px; }
.t5-opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.t5-opt__label { display: flex; gap: 6px; padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.t5-opt__label output { font-weight: 500; color: var(--t5-muted); }
.t5-opt__label output:not(:empty)::before { content: "· "; }
.t5-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.t5-swatch { position: relative; display: inline-flex; cursor: pointer; }
.t5-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t5-swatch__pill { display: inline-flex; align-items: center; min-height: 40px; min-width: 44px; justify-content: center; padding: 8px 14px; border-radius: var(--t5-r-sm); border: 1.5px solid var(--t5-line); background: var(--t5-surface); font-size: 14px; font-weight: 600; transition: border-color var(--t5-d-sm), background-color var(--t5-d-sm), color var(--t5-d-sm), transform var(--t5-d-sm) var(--t5-ease); }
.t5-swatch__dot { width: 40px; height: 40px; border-radius: 999px; background: var(--sw, var(--t5-surface-2)) center / cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--t5-surface), 0 0 0 3.5px transparent; transition: box-shadow var(--t5-d-sm), transform var(--t5-d-sm) var(--t5-ease); }
.t5-swatch input:checked + .t5-swatch__pill { border-color: var(--t5-brand); background: var(--t5-brand-soft); color: var(--t5-brand); }
.t5-swatch input:checked + .t5-swatch__dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--t5-surface), 0 0 0 4px var(--t5-brand); }
.t5-swatch input:focus-visible + span { outline: 2px solid var(--t5-brand); outline-offset: 3px; }
.t5-swatch:active span:first-of-type { transform: scale(.94); }
.t5-swatch__free { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 4px; background: var(--t5-success); color: #fff; font-size: 9px; font-weight: 700; line-height: 14px; white-space: nowrap; pointer-events: none; }
.t5-opt__err { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--t5-sale); }
.t5-opt__err:empty { display: none; }
.t5-opt.is-missing .t5-swatches { animation: t5-shake calc(400ms * var(--t5-speed)) var(--t5-ease); }
.t5-opt.is-missing .t5-swatch__pill { border-color: color-mix(in srgb, var(--t5-sale) 60%, var(--t5-line)); }
@keyframes t5-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.t5-pform__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.t5-pform__note { font-size: 13px; color: var(--t5-muted); }
.t5-stepper { display: inline-flex; align-items: center; height: 44px; border-radius: var(--t5-r); border: 1.5px solid var(--t5-line); background: var(--t5-surface); }
.t5-stepper button { width: 44px; height: 100%; display: grid; place-items: center; border: 0; background: none; }
.t5-stepper button:disabled { opacity: .35; cursor: default; }
.t5-stepper output { min-width: 32px; text-align: center; font-weight: 800; font-size: 16px; }
.t5-stepper.is-locked { padding: 0 12px; gap: 8px; }
.t5-stepper__label { font-size: 13px; color: var(--t5-muted); }
.t5-pform__cta { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.t5-btn--lg { min-height: 52px; font-size: 15px; }
.t5-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.t5-btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-color: var(--t5-text) transparent var(--t5-text) transparent; animation: t5-spin .7s linear infinite; }
.t5-btn--buy.is-loading::after, .t5-btn--primary.is-loading::after { border-color: var(--t5-on-brand) transparent var(--t5-on-brand) transparent; }
@keyframes t5-spin { to { transform: rotate(1turn); } }

/* options sheet (phone) */
.t5-optsheet { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }

/* facts + accordions */
.t5-facts { list-style: none; margin: 0; padding: 4px 14px; border-radius: var(--t5-r); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); }
.t5-facts li { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.t5-facts li + li { border-top: 1px solid var(--t5-line); }
.t5-facts li .t5-i { color: var(--t5-brand); }
.t5-facts b { margin-left: auto; }
.t5-acc { border-bottom: 1px solid var(--t5-line); }
.t5-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.t5-acc > summary::-webkit-details-marker { display: none; }
.t5-acc > summary .t5-i { transition: transform var(--t5-d-md) var(--t5-ease); }
.t5-acc[open] > summary .t5-i { transform: rotate(180deg); }
.t5-acc__body { padding-bottom: 16px; }
.t5-prose { font-size: 14.5px; line-height: 1.7; overflow-wrap: anywhere; }
.t5-prose img { margin: 10px 0; border-radius: var(--t5-r-sm); }
.t5-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.t5-prose td, .t5-prose th { border: 1px solid var(--t5-line); padding: 6px 8px; }

/* reviews */
.t5-rsum { display: grid; gap: 16px; padding: 16px; border-radius: var(--t5-r); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); }
@media (min-width: 768px) { .t5-rsum { grid-template-columns: 180px 1fr; align-items: center; } }
.t5-rsum__avg { display: flex; flex-direction: column; gap: 4px; }
.t5-rsum__avg strong { font-size: 40px; line-height: 1; font-weight: 800; }
.t5-rsum__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.t5-rsum__bars li { display: grid; grid-template-columns: 12px 14px 1fr 32px; align-items: center; gap: 6px; font-size: 13px; }
.t5-rsum__bars i { height: 8px; border-radius: 4px; background: linear-gradient(var(--t5-accent), var(--t5-accent)) 0 0 / var(--w) 100% no-repeat, var(--t5-surface-2); }
.t5-rsum__bars .t5-i, .t5-stars .t5-i { color: var(--t5-accent); }
.t5-stars { display: inline-flex; gap: 1px; }
.t5-stars .t5-i.is-off, .t5-i.is-off { color: var(--t5-line); }
.t5-muted { color: var(--t5-muted); font-size: 13px; }
.t5-reviews { display: grid; gap: 10px; margin: 12px 0; }
@media (min-width: 768px) { .t5-reviews { grid-template-columns: 1fr 1fr; } }
.t5-review { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--t5-r); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); }
.t5-review p { margin: 0; font-size: 14px; }
.t5-review-write { margin-top: 8px; }
.t5-review-form { display: flex; flex-direction: column; gap: 12px; }
.t5-review-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t5-review-form__msg { margin: 0; font-size: 13px; font-weight: 600; }
.t5-review-form__msg:empty { display: none; }
.t5-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.t5-input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--t5-r-sm); border: 1.5px solid var(--t5-line); background: var(--t5-surface); color: var(--t5-text); font: inherit; font-weight: 400; font-size: 15px; }
.t5-input:focus { outline: none; border-color: var(--t5-brand); }
.t5-stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; border: 0; }
.t5-stars-input legend { float: left; width: 100%; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.t5-stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t5-stars-input label { cursor: pointer; color: var(--t5-line); padding: 2px; }
.t5-stars-input label .t5-i { width: 30px; height: 30px; }
.t5-stars-input input:checked ~ label, .t5-stars-input label:hover, .t5-stars-input label:hover ~ label { color: var(--t5-accent); }
.t5-stars-input input:focus-visible + label { outline: 2px solid var(--t5-brand); border-radius: 4px; }

/* often bought together */
.t5-fbt__items { list-style: none; margin: 0 -16px; padding: 0 16px 4px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.t5-fbt__item { flex: 0 0 132px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.t5-fbt__item + .t5-fbt__item { position: relative; }
.t5-fbt__pick { position: relative; display: block; border-radius: var(--t5-r); overflow: hidden; background: var(--t5-surface-2); }
.t5-fbt__pick img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity var(--t5-d-sm); }
.t5-fbt__pick input { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; accent-color: var(--t5-brand); }
.t5-fbt__pick:has(input:not(:checked)) img { opacity: .45; }
.t5-fbt__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t5-fbt__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.t5-fbt__sum strong { font-size: 18px; }
.t5-fbt__sum .t5-btn { margin-left: auto; }
@media (max-width: 479px) { .t5-fbt__sum .t5-btn { width: 100%; } }

/* sticky buy: above the tab bar on phones; slides up once the form's buttons leave the screen */
.t5-sticky { position: fixed; z-index: 45; display: flex; align-items: center; gap: 10px; transform: translateY(calc(100% + 120px)); transition: transform var(--t5-d-lg) var(--t5-ease); }
.t5-sticky.is-on { transform: none; }
.t5-sticky--bar { left: 0; right: 0; bottom: calc(var(--t5-tabbar-h) + var(--t5-safe-b)); padding: 10px 16px; background: color-mix(in srgb, var(--t5-surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -8px 24px -12px rgba(17, 24, 39, .25); border-top: 1px solid var(--t5-line); }
.t5-sticky__price { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; }
.t5-sticky__price small { font-size: 11px; color: var(--t5-muted); }
.t5-sticky__price strong { font-size: 18px; font-weight: 800; }
.t5-sticky--bar .t5-btn--buy { min-width: 44%; }
.t5-sticky__add { width: 48px; padding: 0; }
.t5-sticky--pill { left: 50%; bottom: calc(var(--t5-tabbar-h) + var(--t5-safe-b) + 12px); transform: translate(-50%, calc(100% + 140px)); }
.t5-sticky--pill.is-on { transform: translate(-50%, 0); }
.t5-sticky--pill .t5-btn { border-radius: 999px; padding-inline: 22px; box-shadow: var(--t5-shadow-2); white-space: nowrap; }
.t5-pdp-page.t5-sticky-on .t5-toast-host { bottom: calc(var(--t5-tabbar-h) + 84px + var(--t5-safe-b)); }
@media (min-width: 1024px) { .t5-sticky { display: none; } }

/* full-screen viewer */
.t5-viewer-open, .t5-viewer-open body { overflow: hidden; }
.t5-viewer { position: fixed; inset: 0; z-index: 120; background: #000; }
.t5-viewer__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.t5-viewer__track::-webkit-scrollbar { display: none; }
.t5-viewer__slide { flex: 0 0 100%; display: grid; place-items: center; overflow: hidden; scroll-snap-align: center; touch-action: pan-x; }
.t5-viewer__slide.is-zoomed { touch-action: none; }
.t5-viewer__slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; }
.t5-viewer__x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.t5-viewer__hint { position: absolute; left: 50%; bottom: calc(20px + var(--t5-safe-b)); transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; }

/* quick view (sheet on phones, modal on desktop) */
.t5-qv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.t5-qv .t5-pform { grid-column: 1 / -1; }
.t5-qv__img { display: block; border-radius: var(--t5-r); overflow: hidden; background: var(--t5-surface-2); aspect-ratio: 1; }
.t5-qv__img img { width: 100%; height: 100%; object-fit: cover; }
.t5-qv__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t5-qv__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.t5-qv__more { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.t5-qv .t5-skel--media { width: 96px; }
@media (min-width: 1024px) {
  .t5-qv-sheet.is-modal .t5-sheet { max-width: 760px; }
  .t5-qv { grid-template-columns: 300px minmax(0, 1fr); gap: 16px 24px; }
  .t5-qv .t5-pform { grid-column: 2; }
  .t5-qv__img { grid-row: span 2; }
  .t5-qv .t5-skel--media { width: 300px; }
}

/* add-to-cart feedback (motion/fly.js) */
.t5-fly { position: fixed; z-index: 130; object-fit: cover; border-radius: var(--t5-r); box-shadow: var(--t5-shadow-2); pointer-events: none; }
.t5-stamp { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--t5-success); color: #fff; pointer-events: none; }
.t5-btn, .t5-sticky .t5-btn { position: relative; }
.t5-card__media[data-t5-hold] { -webkit-touch-callout: none; user-select: none; }

/* ---------- T5.8 cart → order: shared lines, totals, coupon ---------- */
.t5-badge--soft { background: var(--t5-brand-soft); color: var(--t5-brand); gap: 3px; justify-self: start; }
.t5-badge--line { background: transparent; color: var(--t5-text); box-shadow: inset 0 0 0 1px var(--t5-line); }
.t5-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; background: var(--t5-surface); }
.t5-line__img { position: relative; display: block; width: 72px; height: 72px; border-radius: var(--t5-r-sm); overflow: hidden; background: var(--t5-surface-2); }
.t5-line__img img { width: 100%; height: 100%; object-fit: cover; }
.t5-line__qty { position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--t5-text); color: var(--t5-surface); }
.t5-mc .t5-line__qty { display: none; }
.t5-line__info { display: grid; gap: 4px; min-width: 0; }
.t5-line__name { font-weight: 700; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t5-line__meta { font-size: 12.5px; color: var(--t5-muted); }
.t5-line__row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.t5-line__rm { width: 36px; height: 36px; color: var(--t5-muted); }
.t5-line__rm:hover { color: var(--t5-sale); background: var(--t5-surface-2); }
.t5-line__sum { font-size: 14px; white-space: nowrap; }
.t5-stepper--sm { height: 36px; }
.t5-stepper--sm button { width: 36px; }
.t5-stepper--sm output { min-width: 24px; font-size: 14px; }
.t5-sum { display: grid; gap: 8px; }
.t5-sum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.t5-sum__row--good { color: var(--t5-success); font-weight: 600; }
.t5-sum__row--total { padding-top: 10px; border-top: 1px dashed var(--t5-line); font-size: 17px; font-weight: 800; }
.t5-sum__note { margin: 0; font-size: 12px; }
.t5-oit { list-style: none; margin: 0; padding: 0; }
.t5-oit .t5-line + .t5-line { border-top: 1px solid var(--t5-line); }
.t5-oit .t5-line { grid-template-columns: 64px 1fr auto; }
.t5-oit .t5-line__img { width: 64px; height: 64px; }
.t5-oit__sub { padding: 10px 0 2px; border-top: 1px solid var(--t5-line); }
/* option picker shared by all themes (frontend/partials/cart-line-options) */
.t5-body .cart-opt { display: grid; gap: 6px; }
.t5-body .cart-opt__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.t5-body .cart-opt__label { font-size: 12.5px; color: var(--t5-muted); }
.t5-body .cart-opt__select { min-height: 34px; padding: 4px 28px 4px 10px; border-radius: var(--t5-r-sm); border: 1.5px solid var(--t5-line); background: var(--t5-surface); color: var(--t5-text); font: inherit; font-size: 13px; }
.t5-body .cart-opt__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.t5-body .cart-opt__chip { margin: 0 !important; cursor: pointer; }
.t5-body .cart-opt__chip input { position: absolute; opacity: 0; pointer-events: none; }
.t5-body .cart-opt__chip span { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 11px; border-radius: 999px; border: 1.5px solid var(--t5-line); font-size: 12.5px; }
.t5-body .cart-opt__chip.is-active span, .t5-body .cart-opt__chip input:checked + span { border-color: var(--t5-brand); background: var(--t5-brand-soft); color: var(--t5-brand); font-weight: 700; }
.t5-body .cart-opt__chip input:focus-visible + span { outline: 2px solid var(--t5-brand); outline-offset: 2px; }

.t5-coupon { display: grid; gap: 6px; }
.t5-coupon__box > summary, .t5-coupon__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--t5-brand); font-weight: 700; font-size: 13.5px; cursor: pointer; list-style: none; }
.t5-coupon__box > summary::-webkit-details-marker { display: none; }
.t5-coupon__form { display: flex; gap: 8px; margin-top: 4px; }
.t5-coupon__form[hidden] { display: none; }
.t5-coupon__form .t5-input { text-transform: uppercase; }
.t5-coupon__on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--t5-r-sm); background: color-mix(in srgb, var(--t5-success) 10%, var(--t5-surface)); color: var(--t5-success); font-size: 13.5px; }
.t5-coupon__on[hidden] { display: none; }
.t5-coupon__on small { flex-basis: 100%; }
.t5-coupon__on .t5-link { margin-left: auto; color: var(--t5-muted); }
.t5-coupon__msg { margin: 0; min-height: 0; font-size: 12.5px; color: var(--t5-success); }
.t5-coupon__msg.is-bad { color: var(--t5-sale); }
.t5-coupon__msg:empty { display: none; }

/* ---------- mini-cart (sheet / drawer) ---------- */
.t5-cart-sheet .t5-sheet__body { padding-bottom: 0; display: flex; flex-direction: column; flex: 1; }
.t5-cart-sheet .t5-sheet { min-height: min(62dvh, 520px); }
.t5-mc { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.t5-mc__hint { margin: 0; font-size: 12px; }
@media (pointer: fine) { .t5-mc__hint { display: none; } }
.t5-mc__list { list-style: none; margin: 0; padding: 0; }
.t5-mc__line { position: relative; overflow: hidden; border-bottom: 1px solid var(--t5-line); }
.t5-mc__line[hidden] { display: none; }
.t5-mc__del { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 18px; background: var(--t5-sale); color: var(--t5-on-sale); font-weight: 700; font-size: 13px; }
.t5-mc__del .t5-i { transition: transform var(--t5-d-sm) var(--t5-ease-back); }
.t5-mc__line.is-armed .t5-mc__del .t5-i { transform: scale(1.25); }
.t5-mc__line [data-t5-swipe] { position: relative; transition: transform var(--t5-d-md) var(--t5-ease); touch-action: pan-y; }
.t5-mc__line [data-t5-swipe].is-dragging { transition: none; }
.t5-free { padding: 12px 14px; border-radius: var(--t5-r); background: var(--t5-brand-soft); }
.t5-free__txt { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.t5-free__txt .t5-i { color: var(--t5-brand); flex: none; }
.t5-free__bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--t5-brand) 18%, var(--t5-surface)); overflow: hidden; }
.t5-free__bar span { display: block; height: 100%; width: var(--t5-pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--t5-brand), var(--t5-accent)); transition: width calc(700ms * var(--t5-speed)) var(--t5-ease); }
.t5-free.is-done { background: color-mix(in srgb, var(--t5-success) 12%, var(--t5-surface)); }
.t5-free.is-done .t5-free__txt, .t5-free.is-done .t5-free__txt .t5-i { color: var(--t5-success); font-weight: 700; }
.t5-free.is-done .t5-free__bar span { background: var(--t5-success); }
.t5-free.is-pop { animation: t5-pop calc(420ms * var(--t5-speed)) var(--t5-ease-back); }
@keyframes t5-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.t5-upsell__title { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.t5-upsell__row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.t5-upsell__row::-webkit-scrollbar { display: none; }
.t5-upsell__item { position: relative; flex: 0 0 132px; scroll-snap-align: start; display: grid; gap: 4px; padding: 8px; border-radius: var(--t5-r); border: 1px solid var(--t5-line); }
.t5-upsell__img { display: block; aspect-ratio: 1; border-radius: var(--t5-r-sm); overflow: hidden; background: var(--t5-surface-2); }
.t5-upsell__img img { width: 100%; height: 100%; object-fit: cover; }
.t5-upsell__name { font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t5-upsell__price { font-size: 13px; font-weight: 800; }
.t5-upsell__add { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--t5-brand); color: var(--t5-on-brand); box-shadow: var(--t5-shadow-1); transition: transform var(--t5-d-sm) var(--t5-ease-back); }
.t5-upsell__add:active { transform: scale(.88); }
.t5-upsell__add.is-loading { opacity: .6; pointer-events: none; }
.t5-mc__foot { position: sticky; bottom: 0; margin: auto -20px 0; padding: 14px 20px calc(14px + var(--t5-safe-b)); display: grid; gap: 12px; background: var(--t5-surface); border-top: 1px solid var(--t5-line); box-shadow: 0 -10px 24px -18px rgba(17, 24, 39, .4); }
.t5-mc__foot .t5-btn--buy .t5-num { font-weight: 800; }

/* ---------- checkout ---------- */
.t5-co-body .t5-tabbar { display: none; }
@media (max-width: 1023.98px) { body.t5-co-body { padding-bottom: calc(84px + var(--t5-safe-b)); } }
.t5-co-page { padding-top: 14px; padding-bottom: 32px; }
.t5-co { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .t5-co { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "steps sum" "alert sum" "form sum" "bar sum" "terms sum"; column-gap: 28px; align-items: start; }
  .t5-co__steps { grid-area: steps; } .t5-alert { grid-area: alert; } .t5-co__form { grid-area: form; } .t5-co__bar { grid-area: bar; } .t5-co__terms { grid-area: terms; }
  .t5-co__sum { grid-area: sum; position: sticky; top: 96px; }
}
.t5-co__steps { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 4px 0 0; padding: 0; list-style: none; }
.t5-co__steps[hidden] { display: none; }
.t5-co__stepdot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--t5-muted); }
.t5-co__stepdot span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--t5-surface); box-shadow: inset 0 0 0 2px var(--t5-line); font-weight: 800; font-size: 13px; transition: background-color var(--t5-d-md), box-shadow var(--t5-d-md), color var(--t5-d-md), transform var(--t5-d-md) var(--t5-ease-back); }
.t5-co__stepdot b { font-weight: 600; }
.t5-co__stepdot.is-on { color: var(--t5-text); }
.t5-co__stepdot.is-on span { box-shadow: inset 0 0 0 2px var(--t5-brand); color: var(--t5-brand); transform: scale(1.1); }
.t5-co__stepdot.is-done span { background: var(--t5-brand); color: var(--t5-on-brand); box-shadow: none; }
.t5-co__progress { position: absolute; top: 14px; height: 2px; background: var(--t5-line); left: calc(100% / (var(--n, 3) * 2)); right: calc(100% / (var(--n, 3) * 2)); }
.t5-co__steps:has(> li:nth-child(2):last-of-type) .t5-co__progress { --n: 2; }
.t5-co__progress span { display: block; height: 100%; width: 0; background: var(--t5-brand); transition: width calc(420ms * var(--t5-speed)) var(--t5-ease); }
.t5-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--t5-r); background: color-mix(in srgb, var(--t5-sale) 10%, var(--t5-surface)); color: var(--t5-sale); }
.t5-alert p { margin: 0 0 6px; color: var(--t5-text); }
.t5-co__form { display: grid; gap: 16px; min-width: 0; }
.t5-co__step { display: grid; gap: 14px; margin: 0; padding: 18px 16px; border: 0; border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); min-width: 0; }
.t5-co__step[hidden] { display: none; }
.t5-co__title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 16px; font-weight: 800; }
.t5-co__title .t5-i { color: var(--t5-brand); }
.t5-co__title small { font-weight: 500; font-size: 12.5px; }
.t5-cf { display: grid; gap: 5px; }
.t5-cf__label { font-size: 13px; font-weight: 700; }
.t5-cf .t5-input { min-height: 50px; font-size: 16px; }
.t5-cf__area { resize: vertical; min-height: 76px !important; line-height: 1.45; }
.t5-cf__hint { font-size: 12px; color: var(--t5-muted); }
.t5-cf__err { font-size: 12.5px; font-weight: 600; color: var(--t5-sale); }
.t5-cf__err:empty { display: none; }
.t5-input[aria-invalid="true"] { border-color: var(--t5-sale); background: color-mix(in srgb, var(--t5-sale) 5%, var(--t5-surface)); }
.t5-co__private { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.t5-co__choices { display: grid; gap: 10px; }
.t5-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: var(--t5-r); box-shadow: inset 0 0 0 1.5px var(--t5-line); cursor: pointer; transition: box-shadow var(--t5-d-sm), background-color var(--t5-d-sm); }
.t5-choice input { position: absolute; opacity: 0; pointer-events: none; }
.t5-choice__dot { width: 20px; height: 20px; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--t5-line); transition: box-shadow var(--t5-d-sm) var(--t5-ease-back); }
.t5-choice__title { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; }
.t5-choice__title small { display: block; font-weight: 500; font-size: 12.5px; color: var(--t5-muted); }
.t5-choice__meta { font-weight: 800; font-size: 14px; }
.t5-choice:has(input:checked), .t5-choice.is-on { box-shadow: inset 0 0 0 2px var(--t5-brand); background: var(--t5-brand-soft); }
.t5-choice:has(input:checked) .t5-choice__dot, .t5-choice.is-on .t5-choice__dot { box-shadow: inset 0 0 0 6px var(--t5-brand); }
.t5-choice:has(input:focus-visible) { outline: 2px solid var(--t5-brand); outline-offset: 2px; }
.t5-choice.is-on > .t5-i { color: var(--t5-brand); }
.t5-co__review { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--t5-r); background: var(--t5-surface-2); font-size: 13.5px; }
.t5-co__review[hidden] { display: none; }
.t5-co__review > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.t5-co__review span { overflow-wrap: anywhere; }
.t5-co__sum { display: grid; gap: 14px; padding: 16px; border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); min-width: 0; }
.t5-co__fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.t5-co__fold > summary::-webkit-details-marker { display: none; }
.t5-co__fold[open] > summary { margin-bottom: 6px; }
.t5-co__chev { transition: transform var(--t5-d-md) var(--t5-ease); color: var(--t5-muted); }
details[open] > summary .t5-co__chev { transform: rotate(180deg); }
.t5-co__bar { display: flex; gap: 10px; }
.t5-co__back { width: 52px; min-height: 52px; padding: 0; flex: none; }
.t5-co__back[hidden], .t5-co__go[hidden] { display: none; }
.t5-co__go { flex: 1; justify-content: space-between; }
.t5-co__go > span:first-of-type { flex: 1; text-align: left; }
.t5-co__bartotal { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 800; }
@media (max-width: 1023.98px) {
  .t5-co__bar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + var(--t5-safe-b)); background: color-mix(in srgb, var(--t5-surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--t5-line); box-shadow: 0 -8px 24px -12px rgba(17, 24, 39, .25); }
}
.t5-co__terms { margin: 0; font-size: 12px; text-align: center; }

/* ---------- order placed ---------- */
.t5-done-page { padding-top: 28px; padding-bottom: 40px; }
.t5-done { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.t5-done__mark { width: 104px; height: 104px; margin-bottom: 14px; }
.t5-done__mark svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.t5-done__ring { stroke: var(--t5-success); stroke-width: 5; fill: color-mix(in srgb, var(--t5-success) 12%, transparent); stroke-dasharray: 277; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; }
.t5-done__tick { stroke: var(--t5-success); stroke-width: 7; stroke-dasharray: 64; stroke-dashoffset: 0; }
.t5-js .t5-done__mark:not(.is-static):not(.is-drawing) svg { opacity: 0; }
.t5-done__mark.is-drawing .t5-done__ring { animation: t5-draw-ring calc(600ms * var(--t5-speed)) var(--t5-ease) both; }
.t5-done__mark.is-drawing .t5-done__tick { animation: t5-draw-tick calc(380ms * var(--t5-speed)) var(--t5-ease) calc(480ms * var(--t5-speed)) both; }
.t5-done__mark.is-drawing { animation: t5-pop calc(420ms * var(--t5-speed)) var(--t5-ease-back) calc(820ms * var(--t5-speed)) both; }
@keyframes t5-draw-ring { from { stroke-dashoffset: 277; } to { stroke-dashoffset: 0; } }
@keyframes t5-draw-tick { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
.t5-done .t5-lead { max-width: 420px; }
.t5-receipt { width: 100%; display: grid; gap: 0; margin: 4px 0 20px; padding: 6px 16px; border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); text-align: left; }
.t5-receipt > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.t5-receipt > div + div { border-top: 1px dashed var(--t5-line); }
.t5-receipt dt { color: var(--t5-muted); font-size: 13.5px; }
.t5-receipt dd { margin: 0; display: flex; align-items: center; gap: 4px; font-weight: 800; }
.t5-receipt__copy { width: 36px; height: 36px; color: var(--t5-muted); }
.t5-next { width: 100%; margin-bottom: 22px; text-align: left; }
.t5-next__title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.t5-next ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: n; }
.t5-next li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.t5-next__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--t5-brand-soft); color: var(--t5-brand); }
.t5-done__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.t5-done__acts .t5-btn { flex: 1 1 200px; }
.t5-done__small { margin-top: 16px; font-size: 13px; }
.t5-confetti { position: fixed; inset: 0; z-index: 120; width: 100vw; height: 100vh; pointer-events: none; }

/* ---------- track order ---------- */
.t5-track-page { max-width: 760px; padding-top: 14px; padding-bottom: 40px; }
.t5-track-form { display: flex; gap: 10px; margin-top: 8px; }
.t5-track-form__field { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--t5-r); background: var(--t5-surface); border: 1.5px solid var(--t5-line); color: var(--t5-muted); }
.t5-track-form__field:focus-within { border-color: var(--t5-brand); }
.t5-track-form__field input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--t5-text); font-size: 16px; }
@media (max-width: 479.98px) { .t5-track-form { flex-direction: column; } }
.t5-track__small { margin: 10px 0 0; font-size: 13px; }
.t5-track__found { margin: 22px 0 10px; font-size: 13px; }
.t5-orders { display: grid; gap: 14px; }
.t5-order { padding: 16px; border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); }
.t5-order__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.t5-order__head .t5-eyebrow { margin: 0; }
.t5-order__no { margin: 2px 0 0; font-size: 18px; font-weight: 800; }
.t5-tl { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 18px 0 6px; padding: 0; list-style: none; }
.t5-tl__step { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--t5-muted); }
.t5-tl__step::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 3px; background: var(--t5-line); z-index: 0; }
.t5-tl__step:first-child::before { display: none; }
.t5-tl__step.is-done::before, .t5-tl__step.is-now::before, .t5-tl__step.is-bad::before, .t5-tl__step.is-wait::before { background: var(--t5-brand); }
.t5-tl__dot { position: relative; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--t5-surface); box-shadow: inset 0 0 0 2.5px var(--t5-line); color: #fff; }
.t5-tl__step.is-done .t5-tl__dot { background: var(--t5-brand); box-shadow: none; }
.t5-tl__step.is-now .t5-tl__dot, .t5-tl__step.is-wait .t5-tl__dot { box-shadow: inset 0 0 0 7px var(--t5-brand); }
.t5-tl__step.is-now .t5-tl__dot::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--t5-brand); opacity: 0; animation: t5-ping calc(1600ms * var(--t5-speed)) var(--t5-ease) infinite; }
.t5-tl__step.is-bad .t5-tl__dot { background: var(--t5-sale); box-shadow: none; }
.t5-tl__step.is-done, .t5-tl__step.is-now, .t5-tl__step.is-wait { color: var(--t5-text); font-weight: 700; }
.t5-tl__step.is-bad { color: var(--t5-sale); font-weight: 700; }
.t5-tl__txt small { display: block; font-weight: 500; font-size: 11px; color: var(--t5-muted); }
@keyframes t5-ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
.t5-order__more { margin-top: 10px; border-top: 1px solid var(--t5-line); }
.t5-order__more > summary { display: flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.t5-order__more > summary::-webkit-details-marker { display: none; }
.t5-order__more > summary .t5-co__chev { margin-left: auto; }
.t5-order__more .t5-sum { margin: 8px 0 12px; }
.t5-order__kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.t5-order__kv dt { color: var(--t5-muted); }
.t5-order__kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- T5.9 compare bar + page ---------- */
.t5-cmp-btn[aria-pressed="true"] { border-color: var(--t5-brand); background: var(--t5-brand-soft); color: var(--t5-brand); font-weight: 700; }
.t5-cmpbar { position: fixed; z-index: 55; left: 50%; bottom: calc(var(--t5-tabbar-h) + var(--t5-safe-b) + 10px); transform: none; translate: -50% 0; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 20px); padding: 8px 8px 8px 10px; border-radius: 999px; background: var(--t5-surface); box-shadow: var(--t5-shadow-2), 0 0 0 1px var(--t5-line); }
@media (min-width: 1024px) { .t5-cmpbar { bottom: 20px; } }
.t5-co-body .t5-cmpbar { display: none; }
@media (max-width: 1023.98px) { .t5-sticky-on .t5-cmpbar { bottom: calc(var(--t5-tabbar-h) + var(--t5-safe-b) + 78px); } }
.t5-cmpbar { transition: bottom var(--t5-d-lg) var(--t5-ease); }
.t5-cmpbar__slots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.t5-cmpbar__slot { position: relative; width: 40px; height: 40px; border-radius: 999px; background: var(--t5-surface-2); }
.t5-cmpbar__slot img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.t5-cmpbar__slot.is-empty { box-shadow: inset 0 0 0 1.5px var(--t5-line); background: none; border: 0; }
.t5-cmpbar__x { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: var(--t5-text); color: var(--t5-surface); }
.t5-cmpbar__go { min-height: 40px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }
.t5-cmpbar__hint { max-width: 140px; font-size: 12px; line-height: 1.3; color: var(--t5-muted); }
.t5-cmpbar__clear { width: 40px; height: 40px; color: var(--t5-muted); }
@media (max-width: 380px) { .t5-cmpbar__slot { width: 34px; height: 34px; } .t5-cmpbar__hint { display: none; } }
.t5-cmp-page { padding-top: 14px; padding-bottom: 40px; }
.t5-cmp__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.t5-cmp__head p { margin: 0; }
.t5-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }
.t5-switch input { position: absolute; opacity: 0; pointer-events: none; }
.t5-switch__ui { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--t5-line); transition: background-color var(--t5-d-sm); }
.t5-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: var(--t5-shadow-1); transition: transform var(--t5-d-md) var(--t5-ease-back); }
.t5-switch input:checked + .t5-switch__ui { background: var(--t5-brand); }
.t5-switch input:checked + .t5-switch__ui::after { transform: translateX(18px); }
.t5-switch input:focus-visible + .t5-switch__ui { outline: 2px solid var(--t5-brand); outline-offset: 2px; }
.t5-cmp { overflow-x: auto; border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); scroll-snap-type: x proximity; }
.t5-cmp__table { width: 100%; min-width: calc(110px + var(--cols) * 170px); border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.t5-cmp__table th, .t5-cmp__table td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--t5-line); }
.t5-cmp__table tbody th { position: sticky; left: 0; z-index: 1; width: 110px; background: var(--t5-surface-2); font-weight: 700; font-size: 12.5px; color: var(--t5-muted); }
.t5-cmp__corner { position: sticky; left: 0; z-index: 1; background: var(--t5-surface); }
.t5-cmp__col { position: relative; scroll-snap-align: start; min-width: 170px; }
.t5-cmp__x { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; background: var(--t5-surface); box-shadow: var(--t5-shadow-1); z-index: 1; }
.t5-cmp__prod { display: grid; gap: 8px; margin-bottom: 10px; font-weight: 700; line-height: 1.35; }
.t5-cmp__prod img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--t5-r); background: var(--t5-surface-2); }
.t5-cmp__prod span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t5-cmp__add { min-height: 40px; font-size: 13px; }
.t5-cmp__price { font-weight: 800; font-size: 15px; color: var(--t5-brand); }
.t5-cmp-page.is-diff tr[data-t5-same] { display: none; }
.t5-cmp__table tbody tr:not([data-t5-same]) td { background: color-mix(in srgb, var(--t5-accent) 6%, transparent); }
.t5-cmp-page:not(.is-diff) .t5-cmp__table tbody tr td { background: none; }

/* ---------- wishlist ---------- */
.t5-wl-page { padding-top: 14px; padding-bottom: 32px; }
.t5-wl__head { margin-bottom: 14px; }
.t5-wl__lead { margin: 0; font-size: 13.5px; }
.t5-wl-page .t5-grid { list-style: none; margin: 0; padding: 0; }
.t5-wl__art { color: var(--t5-sale); background: color-mix(in srgb, var(--t5-sale) 10%, var(--t5-surface)); animation: t5-beat calc(1400ms * var(--t5-speed)) var(--t5-ease) infinite; }
@keyframes t5-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.1); } 40% { transform: scale(.97); } }

/* ---------- content pages (about, delivery, return) ---------- */
.t5-page { max-width: 820px; padding-top: 14px; padding-bottom: 40px; }
.t5-page__head { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.t5-page__head .t5-h1 { margin: 0; }
.t5-page__icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--t5-r); background: var(--t5-brand-soft); color: var(--t5-brand); }
.t5-page__nav { margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.t5-page__nav::-webkit-scrollbar { display: none; }
.t5-page__nav .t5-chip[aria-current] { border-color: var(--t5-brand); background: var(--t5-brand); color: var(--t5-on-brand); }
.t5-page__body { padding: 20px 18px; border-radius: var(--t5-r-lg); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); font-size: 15px; }
.t5-page__body h2, .t5-page__body h3 { margin: 1.2em 0 .4em; line-height: 1.3; }
.t5-page__body > :first-child { margin-top: 0; }
.t5-page__body a { color: var(--t5-brand); text-decoration: underline; }
.t5-page__help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: var(--t5-r-lg); background: var(--t5-brand-soft); }
.t5-page__help p { margin: 2px 0 0; font-size: 13.5px; }
.t5-page__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.t5-eta { flex-wrap: wrap; }
.t5-eta__txt { flex: 1 1 160px; min-width: 0; transition: opacity var(--t5-dur-1, .15s); }
.t5-eta.is-busy .t5-eta__txt { opacity: .5; }
.t5-eta__pick { position: relative; display: inline-flex; align-items: center; margin-left: auto; }
.t5-eta__pick select { appearance: none; -webkit-appearance: none; border: 1px solid var(--t5-line); border-radius: 999px; background: var(--t5-surface); color: inherit; font: inherit; font-size: 13px; font-weight: 600; min-height: 36px; padding: 6px 30px 6px 12px; max-width: 170px; cursor: pointer; }
.t5-eta__pick select:focus-visible { outline: 2px solid var(--t5-brand); outline-offset: 2px; }
.t5-eta__pick .t5-i { position: absolute; right: 10px; pointer-events: none; }
.t5-qa { display: grid; gap: 10px; margin: 12px 0; }
.t5-qa:empty { display: none; }
.t5-qa__item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--t5-r); background: var(--t5-surface); box-shadow: var(--t5-shadow-1); }
.t5-qa__q, .t5-qa__a { display: flex; gap: 8px; margin: 0; font-size: 14px; line-height: 1.5; }
.t5-qa__q { font-weight: 600; }
.t5-qa__q b, .t5-qa__a b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 12px; background: var(--t5-brand-soft); color: var(--t5-brand); }
.t5-qa__a b { background: var(--t5-surface-2, var(--t5-line)); color: var(--t5-text); }
.t5-qa__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.t5-review__photos { display: flex; gap: 6px; flex-wrap: wrap; }
.t5-review__photos button { padding: 0; border: 0; border-radius: var(--t5-r-sm); overflow: hidden; background: none; cursor: zoom-in; }
.t5-review__photos img { display: block; width: 64px; height: 64px; object-fit: cover; }
.t5-rphoto__row { display: flex; gap: 8px; flex-wrap: wrap; }
.t5-rphoto__list { display: contents; }
.t5-rphoto__add, .t5-rphoto__item { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--t5-r-sm); overflow: hidden; }
.t5-rphoto__add { border: 1.5px dashed var(--t5-line); color: var(--t5-muted); cursor: pointer; }
.t5-rphoto__add:focus-within { outline: 2px solid var(--t5-brand); outline-offset: 2px; }
.t5-rphoto__add[hidden] { display: none; }
.t5-rphoto__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.t5-rphoto__item img { width: 100%; height: 100%; object-fit: cover; }
.t5-rphoto__item button { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.t5-notify > summary { gap: 8px; }
.t5-notify.is-out > summary { color: var(--t5-brand); }
.t5-notify__form { display: flex; flex-direction: column; gap: 10px; }
.t5-notify__row { display: flex; gap: 8px; }
.t5-notify__row .t5-field { flex: 1; }
.t5-review-form__msg.is-ok { color: var(--t5-success); }
.t5-notify > summary { justify-content: flex-start; }
.t5-notify > summary > .t5-i:last-child { margin-left: auto; }
.t5-notify[open] > summary > .t5-i:first-child { transform: none; }
/* T5.11 tap targets: on touch screens small controls get at least a 44px hit area (the visible size stays) */
@media (pointer: coarse) {
  .t5-chip, .t5-rphoto__item button, .t5-eta__pick { position: relative; }
  .t5-chip::after { content: ""; position: absolute; inset: -5px 0; }
  .t5-rphoto__item button::after { content: ""; position: absolute; inset: -11px; }
  .t5-eta__pick select { min-height: 44px; }
}
/* the hidden attribute must win over component display rules ("more reviews/questions" showed with nothing more) */
.t5-btn[hidden], .t5-chip[hidden], .t5-link[hidden] { display: none; }