/* ==========================================================================
   Theme 3 "Bazaar" — storefront stylesheet
   High-density marketplace. Every class lives under .t3-*.
   Sections: 1 tokens · 2 base · 3 layout · 4 buttons · 5 forms · 6 badges
   7 price/rating/meters · 8 product card · 9 panels · 10 overlays
   11 navigation widgets · 12 shell · 13 home · 14 product page
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand (primary / header_bg / sale / button_text are overridden from theme settings) */
  --t3-primary: #F25C05;
  --t3-on-primary: #0B1530;
  --t3-header-bg: #0B1530;
  --t3-sale: #E11D48;

  --t3-primary-600: color-mix(in srgb, var(--t3-primary) 86%, #000);
  --t3-primary-hover: color-mix(in srgb, var(--t3-primary) 82%, #fff);
  --t3-primary-50: color-mix(in srgb, var(--t3-primary) 8%, #fff);
  --t3-primary-100: color-mix(in srgb, var(--t3-primary) 16%, #fff);
  --t3-navy-900: var(--t3-header-bg);
  --t3-navy-700: color-mix(in srgb, var(--t3-header-bg) 86%, #4a5a80);
  --t3-navy-600: color-mix(in srgb, var(--t3-header-bg) 72%, #5b6b92);
  --t3-on-header: #fff;
  --t3-sale-50: color-mix(in srgb, var(--t3-sale) 8%, #fff);

  /* Semantic. *-ink variants pass 4.5:1 as text on white. */
  --t3-success: #12A150;
  --t3-success-ink: #0B7A3B;
  --t3-success-50: #E8F7EE;
  --t3-warning: #F59E0B;
  --t3-warning-ink: #92400E;
  --t3-warning-50: #FFF7E6;
  --t3-info: #2563EB;
  --t3-info-50: #EAF1FE;
  --t3-price: #C2410C;
  --t3-star: #F59E0B;

  /* Neutral */
  --t3-bg: #F3F4F6;
  --t3-surface: #FFFFFF;
  --t3-surface-2: #F9FAFB;
  --t3-line: #E5E7EB;
  --t3-line-2: #D1D5DB;
  --t3-text: #111827;
  --t3-text-2: #4B5563;
  --t3-muted: #6B7280;   /* smallest text colour that still passes AA on white */
  --t3-text-3: #9CA3AF;  /* icons, placeholders, disabled only */

  /* Shape & depth */
  --t3-radius-sm: 4px;
  --t3-radius: 8px;
  --t3-radius-lg: 12px;
  --t3-radius-pill: 999px;
  --t3-shadow-1: 0 1px 2px rgb(0 0 0 / .06);
  --t3-shadow-2: 0 8px 24px rgb(11 21 48 / .12);
  --t3-shadow-3: 0 18px 48px rgb(11 21 48 / .22);
  --t3-ring: 0 0 0 3px color-mix(in srgb, var(--t3-primary) 45%, transparent);

  /* Space: 4px scale */
  --t3-s1: 4px; --t3-s2: 8px; --t3-s3: 12px; --t3-s4: 16px; --t3-s5: 20px; --t3-s6: 24px; --t3-s8: 32px; --t3-s10: 40px; --t3-s12: 48px;

  /* Type */
  --t3-font: 'Inter', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t3-fs-xs: 12px; --t3-fs-sm: 13px; --t3-fs: 14px; --t3-fs-md: 16px; --t3-fs-lg: 20px; --t3-fs-xl: 24px; --t3-fs-2xl: 32px;

  /* Motion */
  --t3-ease: cubic-bezier(.2, .7, .3, 1);
  --t3-fast: 150ms;
  --t3-slow: 250ms;

  /* Layout */
  --t3-container: 1440px;
  --t3-gutter: 12px;
  --t3-header-h: 0px; /* set by JS to the sticky header height */
  --t3-z-header: 50;
  --t3-z-tray: 60;
  --t3-z-overlay: 80;
  --t3-z-toast: 90;
}
@media (min-width: 768px) { :root { --t3-gutter: 16px; } }
@media (min-width: 1280px) { :root { --t3-gutter: 24px; } }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--t3-header-h) + 8px); }
body {
  margin: 0;
  font-family: var(--t3-font);
  font-size: var(--t3-fs);
  line-height: 1.5;
  color: var(--t3-text);
  background: var(--t3-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="bn"] body { line-height: 1.6; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--t3-navy-600); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; font-weight: 700; color: inherit; }
p { margin: 0 0 var(--t3-s3); }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--t3-line); margin: var(--t3-s4) 0; }
del { color: var(--t3-muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--t3-primary); outline-offset: 2px; }
::selection { background: var(--t3-primary-100); }
.t3-nums { font-variant-numeric: tabular-nums; }

/* 3. Layout & utilities ---------------------------------------------------- */
.t3-container { width: 100%; max-width: var(--t3-container); margin-inline: auto; padding-inline: var(--t3-gutter); }
.t3-main { min-height: 50vh; padding-block: var(--t3-s3) var(--t3-s8); }
.t3-stack > * + * { margin-top: var(--t3-s3); }
.t3-row { display: flex; align-items: center; gap: var(--t3-s2); flex-wrap: wrap; }
.t3-spacer { flex: 1 1 auto; }
.t3-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.t3-skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--t3-surface); color: var(--t3-text); padding: 10px 16px; border-radius: var(--t3-radius); box-shadow: var(--t3-shadow-2); font-weight: 600; }
.t3-skip:focus { top: 8px; }
.t3-muted { color: var(--t3-muted); }
.t3-small { font-size: var(--t3-fs-xs); }
.t3-scroll-x { display: flex; gap: var(--t3-s2); padding-top: 6px; margin-top: -6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.t3-scroll-x::-webkit-scrollbar { display: none; }
.t3-scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Product grid: 2 / 3 / 4 / 5 / 6 columns, 8px gap */
.t3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t3-s2); }
@media (min-width: 768px) { .t3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .t3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .t3-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .t3-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.t3-grid--wide { }
@media (min-width: 1280px) { .t3-grid--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Icons (inline SVG sprite, Lucide-style 24px grid, stroke 1.75) */
.t3-i { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.t3-i--sm { width: 16px; height: 16px; }
.t3-i--xs { width: 14px; height: 14px; }
.t3-i--lg { width: 24px; height: 24px; }
.t3-i--fill { fill: currentColor; stroke: none; }

/* 4. Buttons --------------------------------------------------------------- */
.t3-btn {
  --_bg: var(--t3-surface); --_fg: var(--t3-text); --_bd: var(--t3-line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--t3-s2);
  min-height: 44px; padding: 0 var(--t3-s4);
  border: 1px solid var(--_bd); border-radius: var(--t3-radius);
  background: var(--_bg); color: var(--_fg);
  font-size: var(--t3-fs); font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap;
  transition: background-color var(--t3-fast) var(--t3-ease), border-color var(--t3-fast) var(--t3-ease), box-shadow var(--t3-fast) var(--t3-ease), transform var(--t3-fast) var(--t3-ease);
  position: relative; user-select: none; -webkit-tap-highlight-color: transparent;
}
.t3-btn:hover { color: var(--_fg); border-color: var(--t3-text-3); }
.t3-btn:active { transform: translateY(1px); }
.t3-btn:focus-visible { outline: none; box-shadow: var(--t3-ring); }
.t3-btn[disabled], .t3-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.t3-btn--primary { --_bg: var(--t3-primary); --_fg: var(--t3-on-primary); --_bd: var(--t3-primary); }
.t3-btn--primary:hover { --_bg: var(--t3-primary-hover); --_bd: var(--t3-primary-hover); }
.t3-btn--dark { --_bg: var(--t3-navy-900); --_fg: #fff; --_bd: var(--t3-navy-900); }
.t3-btn--dark:hover { --_bg: var(--t3-navy-700); --_bd: var(--t3-navy-700); }
.t3-btn--sale { --_bg: var(--t3-sale); --_fg: #fff; --_bd: var(--t3-sale); }
.t3-btn--ghost { --_bg: transparent; --_bd: transparent; }
.t3-btn--ghost:hover { --_bg: var(--t3-surface-2); border-color: transparent; }
.t3-btn--soft { --_bg: var(--t3-primary-50); --_fg: var(--t3-text); --_bd: var(--t3-primary-100); }
.t3-btn--link { --_bg: transparent; --_bd: transparent; padding: 0; min-height: 0; color: var(--t3-info); font-weight: 600; }
.t3-btn--link:hover { text-decoration: underline; border-color: transparent; }
.t3-btn--sm { min-height: 36px; padding: 0 var(--t3-s3); font-size: var(--t3-fs-sm); border-radius: var(--t3-radius-sm); }
.t3-btn--lg { min-height: 52px; padding: 0 var(--t3-s6); font-size: var(--t3-fs-md); }
.t3-btn--block { display: flex; width: 100%; }
.t3-btn.is-loading { color: transparent !important; pointer-events: none; }
.t3-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid var(--_fg); border-right-color: transparent; border-radius: 50%; animation: t3-spin .7s linear infinite;
}
@keyframes t3-spin { to { transform: rotate(360deg); } }

.t3-icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: var(--t3-radius); background: transparent; color: inherit;
  transition: background-color var(--t3-fast) var(--t3-ease), color var(--t3-fast) var(--t3-ease);
  position: relative;
}
.t3-icon-btn:hover { background: rgb(0 0 0 / .05); }
.t3-icon-btn--round { border-radius: 50%; }
.t3-icon-btn--surface { background: var(--t3-surface); border-color: var(--t3-line); box-shadow: var(--t3-shadow-1); }
.t3-icon-btn--surface:hover { background: var(--t3-surface); border-color: var(--t3-text-3); }
.t3-icon-btn.is-active { color: var(--t3-sale); }
.t3-icon-btn.is-active .t3-i { fill: currentColor; }
.t3-count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--t3-radius-pill); background: var(--t3-primary); color: var(--t3-on-primary);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.t3-count:empty, .t3-count[data-count="0"] { display: none; }
.t3-count.is-bump { animation: t3-bump .5s var(--t3-ease); }
@keyframes t3-bump { 40% { transform: scale(1.35); } }

/* 5. Forms ----------------------------------------------------------------- */
.t3-field { display: grid; gap: 6px; }
.t3-label { font-size: var(--t3-fs-sm); font-weight: 600; color: var(--t3-text); }
.t3-label .t3-req { color: var(--t3-sale); }
.t3-help { font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-error { font-size: var(--t3-fs-xs); color: #B91C1C; font-weight: 500; }
.t3-input, .t3-select, .t3-textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius); background: var(--t3-surface);
  font-size: var(--t3-fs-md); /* 16px stops iOS zoom */
  transition: border-color var(--t3-fast) var(--t3-ease), box-shadow var(--t3-fast) var(--t3-ease);
}
@media (min-width: 1024px) { .t3-input, .t3-select, .t3-textarea { font-size: var(--t3-fs); } }
.t3-input::placeholder, .t3-textarea::placeholder { color: var(--t3-text-3); }
.t3-input:focus, .t3-select:focus, .t3-textarea:focus { outline: none; border-color: var(--t3-primary); box-shadow: var(--t3-ring); }
.t3-input[aria-invalid="true"], .t3-textarea[aria-invalid="true"] { border-color: #DC2626; }
.t3-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.t3-textarea { min-height: 96px; resize: vertical; }
.t3-input-group { display: flex; }
.t3-input-group > .t3-input { border-radius: var(--t3-radius) 0 0 var(--t3-radius); }
.t3-input-group > .t3-btn { border-radius: 0 var(--t3-radius) var(--t3-radius) 0; }

.t3-check { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: var(--t3-fs-sm); }
.t3-check input { appearance: none; margin: 0; width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid var(--t3-line-2); border-radius: var(--t3-radius-sm); background: var(--t3-surface); display: grid; place-items: center; transition: background-color var(--t3-fast), border-color var(--t3-fast); }
.t3-check input[type="radio"] { border-radius: 50%; }
.t3-check input:checked { background: var(--t3-navy-900); border-color: var(--t3-navy-900); }
.t3-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.t3-check input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.t3-check input:focus-visible { box-shadow: var(--t3-ring); outline: none; }
.t3-check__count { margin-left: auto; color: var(--t3-muted); font-size: var(--t3-fs-xs); font-variant-numeric: tabular-nums; }

/* Selectable option chip (variants, delivery area) */
.t3-opt { position: relative; display: inline-flex; }
.t3-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.t3-opt span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius); background: var(--t3-surface);
  font-size: var(--t3-fs-sm); font-weight: 500; transition: border-color var(--t3-fast), box-shadow var(--t3-fast), background-color var(--t3-fast);
}
.t3-opt span img { width: 28px; height: 28px; border-radius: var(--t3-radius-sm); object-fit: cover; }
.t3-opt input:hover + span { border-color: var(--t3-text-3); }
.t3-opt input:checked + span { border-color: var(--t3-navy-900); box-shadow: inset 0 0 0 1px var(--t3-navy-900); background: var(--t3-surface-2); font-weight: 600; }
.t3-opt input:focus-visible + span { box-shadow: var(--t3-ring); }
.t3-opt input:disabled + span { opacity: .45; text-decoration: line-through; }

/* Quantity stepper */
.t3-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius); background: var(--t3-surface); overflow: hidden; }
.t3-qty button { width: 40px; min-height: 40px; border: 0; background: transparent; display: grid; place-items: center; color: var(--t3-text); }
.t3-qty button:hover { background: var(--t3-surface-2); }
.t3-qty button:disabled { color: var(--t3-text-3); cursor: not-allowed; background: transparent; }
.t3-qty input, .t3-qty output { width: 44px; border: 0; border-inline: 1px solid var(--t3-line); text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; display: grid; place-items: center; background: transparent; }
.t3-qty--sm button { width: 32px; min-height: 32px; }
.t3-qty--sm input, .t3-qty--sm output { width: 36px; font-size: var(--t3-fs-sm); }

/* 6. Badges, chips, tags --------------------------------------------------- */
.t3-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: var(--t3-radius-sm); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  background: var(--t3-surface-2); color: var(--t3-text-2);
}
.t3-badge--sale { background: var(--t3-sale); color: #fff; }
.t3-badge--new { background: var(--t3-info); color: #fff; }
.t3-badge--free { background: var(--t3-success-50); color: var(--t3-success-ink); }
.t3-badge--hot { background: var(--t3-primary); color: var(--t3-on-primary); }
.t3-badge--cod { background: rgb(255 255 255 / .12); color: #fff; border: 1px solid rgb(255 255 255 / .25); }
.t3-badge--warn { background: var(--t3-warning-50); color: var(--t3-warning-ink); }
.t3-badge--outline { background: transparent; border: 1px solid var(--t3-line-2); color: var(--t3-text-2); }
.t3-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px;
  border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius-pill); background: var(--t3-surface);
  font-size: var(--t3-fs-sm); font-weight: 500; color: var(--t3-text);
}
.t3-chip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--t3-surface-2); color: var(--t3-text-2); padding: 0; }
.t3-chip button:hover { background: var(--t3-line); }
.t3-chip--plain { padding: 0 12px; }
.t3-chip--active { background: var(--t3-navy-900); border-color: var(--t3-navy-900); color: #fff; }
.t3-chip--active:hover { color: #fff; }

/* 7. Price, rating, meters, countdown -------------------------------------- */
.t3-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-variant-numeric: tabular-nums; }
.t3-price__now { font-weight: 700; color: var(--t3-price); font-size: var(--t3-fs-md); }
.t3-price__was { font-size: var(--t3-fs-xs); color: var(--t3-muted); text-decoration: line-through; }
.t3-price__off { font-size: var(--t3-fs-xs); font-weight: 700; color: var(--t3-sale); }
.t3-price--lg .t3-price__now { font-size: 28px; letter-spacing: -.01em; }
.t3-price--lg .t3-price__was { font-size: var(--t3-fs-md); }
.t3-price--lg .t3-price__off { font-size: var(--t3-fs); }

.t3-rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t3-fs-xs); color: var(--t3-muted); font-variant-numeric: tabular-nums; }
.t3-stars {
  --p: 0%;
  font-size: 13px; letter-spacing: 1px; line-height: 1;
  background: linear-gradient(90deg, var(--t3-star) var(--p), var(--t3-line-2) var(--p));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.t3-rating strong { color: var(--t3-text); font-weight: 600; }

.t3-meter { height: 6px; border-radius: var(--t3-radius-pill); background: var(--t3-sale-50); overflow: hidden; }
.t3-meter > span { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--t3-primary), var(--t3-sale)); }

.t3-countdown { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 700; }
.t3-countdown__seg { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 4px; border-radius: var(--t3-radius-sm); background: var(--t3-navy-900); color: #fff; font-size: var(--t3-fs-sm); }
.t3-countdown__sep { color: currentColor; font-weight: 700; }
.t3-countdown--chip { gap: 2px; height: 22px; padding: 0 8px; border-radius: var(--t3-radius-sm); background: var(--t3-sale-50); color: var(--t3-sale); font-size: 11px; }
.t3-countdown--chip .t3-countdown__seg { min-width: 0; height: auto; padding: 0; background: none; color: inherit; font-size: inherit; }
.t3-countdown.is-ended { opacity: .6; }

/* 8. Product (deal) card --------------------------------------------------- */
.t3-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--t3-surface); border: 1px solid var(--t3-line); border-radius: var(--t3-radius);
  overflow: hidden;
  transition: box-shadow var(--t3-slow) var(--t3-ease), border-color var(--t3-fast) var(--t3-ease), transform var(--t3-slow) var(--t3-ease);
}
@media (hover: hover) {
  .t3-card:hover { box-shadow: var(--t3-shadow-2); border-color: transparent; z-index: 1; transform: translateY(-4px); }
}
/* Touch: the card gives a little under the finger. */
@media (hover: none) {
  .t3-card:active { transform: scale(.985); transition-duration: 80ms; }
}
.t3-card__media { position: relative; display: block; aspect-ratio: 1; background: var(--t3-surface-2); overflow: hidden; }
.t3-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t3-slow) var(--t3-ease); }
@media (hover: hover) { .t3-card:hover .t3-card__media img { transform: scale(1.04); } }
.t3-card__off { position: absolute; top: 8px; left: 8px; z-index: 1; }
.t3-card__flags { position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 1; }
.t3-card__wish { position: absolute; top: 6px; right: 6px; z-index: 2; width: 36px; height: 36px; color: var(--t3-text-2); background: rgb(255 255 255 / .92); }
.t3-card__wish:hover { background: #fff; color: var(--t3-sale); }
.t3-card__wish.is-pop svg { animation: t3-heart .45s var(--t3-ease); }
@keyframes t3-heart { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
/* Quick view and compare: round buttons stacked under the heart, on every screen (no hover bar). */
.t3-card__qv, .t3-card__cmp { position: absolute; right: 6px; z-index: 2; width: 36px; height: 36px; color: var(--t3-text-2); background: rgb(255 255 255 / .92);
  transition: background-color var(--t3-fast) var(--t3-ease), color var(--t3-fast) var(--t3-ease), transform var(--t3-fast) var(--t3-ease); }
.t3-card__qv { top: 48px; }
.t3-card__cmp { top: 90px; }
.t3-card__qv:hover, .t3-card__cmp:hover { background: #fff; color: var(--t3-navy-900); transform: scale(1.06); }
.t3-card__cmp[aria-pressed="true"] { background: var(--t3-navy-900); color: #fff; }
/* List rows: the buttons sit on the card's right edge, so the text keeps clear of them. */
.t3-card--row .t3-card__body, .t3-grid.is-rows .t3-card__body { padding-right: 52px; }
.t3-card__body { display: flex; flex-direction: column; gap: 4px; padding: var(--t3-s2) var(--t3-s2) var(--t3-s3); flex: 1; }
@media (min-width: 768px) { .t3-card__body { padding: var(--t3-s3); } }
.t3-card__title {
  font-size: var(--t3-fs-sm); line-height: 1.4; color: var(--t3-text); min-height: 2.8em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[lang="bn"] .t3-card__title { line-height: 1.5; min-height: 3em; }
.t3-card__title:hover { color: var(--t3-navy-600); text-decoration: underline; text-underline-offset: 2px; }
.t3-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; }
.t3-card__add { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--t3-primary); color: var(--t3-on-primary);
  transition: background-color var(--t3-fast) var(--t3-ease), transform var(--t3-fast) var(--t3-ease); }
.t3-card__add:hover { background: var(--t3-primary-hover); }
.t3-card__add.is-loading, .t3-card__buy.is-loading { opacity: .6; pointer-events: none; }
.t3-card__add.is-added { animation: t3-bump .5s var(--t3-ease); }
/* Buy now + add to cart, under the price */
.t3-card__actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.t3-card__buy {
  position: relative; flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--t3-navy-900); color: #fff; font-size: var(--t3-fs-xs); font-weight: 700; white-space: nowrap;
  transition: background-color var(--t3-fast) var(--t3-ease), transform var(--t3-fast) var(--t3-ease);
}
.t3-card__buy span { overflow: hidden; text-overflow: ellipsis; }
.t3-card__buy svg { flex: 0 0 auto; color: var(--t3-primary); }
.t3-card__buy:hover { background: var(--t3-navy-700); }
@media (hover: hover) { .t3-card__buy:hover { transform: translateY(-1px); } }
/* Buy now keeps a calm call to action going: every few seconds a light sheen crosses it and
   the bolt "charges". Transform/opacity only, so dozens of cards stay cheap; neighbouring
   cards run out of step (--t3-buy-delay) so a grid never flashes all at once. */
.t3-card__buy { isolation: isolate; }
.t3-card__buy::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .3), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: t3-buy-sheen 3.8s cubic-bezier(.4, 0, .2, 1) var(--t3-buy-delay, 0s) infinite;
}
.t3-card__buy svg { animation: t3-buy-zap 3.8s ease-in-out var(--t3-buy-delay, 0s) infinite; }
@keyframes t3-buy-sheen { 0%, 58% { transform: translateX(-160%) skewX(-20deg); } 86%, 100% { transform: translateX(340%) skewX(-20deg); } }
@keyframes t3-buy-zap { 0%, 60%, 100% { transform: none; } 66% { transform: scale(1.3) rotate(-10deg); } 72% { transform: scale(.92); } 78% { transform: scale(1.12); } 84% { transform: none; } }
.t3-card:nth-child(4n+2) { --t3-buy-delay: .95s; }
.t3-card:nth-child(4n+3) { --t3-buy-delay: 1.9s; }
.t3-card:nth-child(4n+4) { --t3-buy-delay: 2.85s; }
.t3-card__buy.is-loading::after, .t3-card__buy.is-loading svg { animation-duration: 1s; animation-delay: 0s; }
.t3-card__buy:active, .t3-card__add:active { transform: scale(.92); }
.t3-card--row .t3-card__actions { max-width: 280px; }
.t3-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; }
/* Mini card for horizontal strips */
.t3-card--mini { width: 156px; }
@media (min-width: 768px) { .t3-card--mini { width: 184px; } }
/* Horizontal (list view) card */
.t3-card--row { flex-direction: row; }
.t3-card--row .t3-card__media { width: 132px; flex: 0 0 132px; }
@media (min-width: 768px) { .t3-card--row .t3-card__media { width: 180px; flex-basis: 180px; } }
.t3-card--row .t3-card__title { -webkit-line-clamp: 3; min-height: 0; font-size: var(--t3-fs); }

/* 9. Panels & section headers ---------------------------------------------- */
.t3-panel { background: var(--t3-surface); border: 1px solid var(--t3-line); border-radius: var(--t3-radius); }
.t3-panel + .t3-panel, .t3-block + .t3-block { margin-top: var(--t3-s3); }
@media (min-width: 1024px) { .t3-block + .t3-block { margin-top: var(--t3-s4); } }
.t3-panel__body { padding: var(--t3-s3); }
@media (min-width: 768px) { .t3-panel__body { padding: var(--t3-s4); } }
.t3-sechead {
  --accent: var(--t3-navy-900);
  display: flex; align-items: center; gap: var(--t3-s3); min-height: 52px; padding: var(--t3-s2) var(--t3-s3);
  border-bottom: 1px solid var(--t3-line); position: relative;
}
@media (min-width: 768px) { .t3-sechead { padding-inline: var(--t3-s4); } }
.t3-sechead::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.t3-sechead h2 { font-size: var(--t3-fs-md); }
@media (min-width: 768px) { .t3-sechead h2 { font-size: 18px; } }
.t3-sechead__link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t3-fs-sm); font-weight: 600; color: var(--t3-navy-600); white-space: nowrap; min-height: 44px; }
.t3-sechead__link:hover { text-decoration: underline; }
.t3-sechead--fill { background: var(--accent); color: #fff; border-bottom: 0; border-radius: var(--t3-radius) var(--t3-radius) 0 0; }
.t3-sechead--fill::before { display: none; }
.t3-sechead--fill .t3-sechead__link { color: #fff; }
[data-accent="1"] { --accent: var(--t3-navy-900); }
[data-accent="2"] { --accent: #0F766E; }
[data-accent="3"] { --accent: #7C3AED; }
[data-accent="4"] { --accent: #BE123C; }
[data-accent="5"] { --accent: #1D4ED8; }
[data-accent="6"] { --accent: #B45309; }

/* 10. Overlays: dialog, drawer, sheet, toast, popover ---------------------- */
.t3-dialog {
  width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); padding: 0; border: 0;
  border-radius: var(--t3-radius-lg); background: var(--t3-surface); color: var(--t3-text); box-shadow: var(--t3-shadow-3);
  overflow: hidden;
}
.t3-dialog--sm { width: min(440px, calc(100vw - 24px)); }
.t3-dialog::backdrop { background: rgb(11 21 48 / .55); }
.t3-dialog[open] { display: flex; flex-direction: column; animation: t3-pop var(--t3-slow) var(--t3-ease); }
@keyframes t3-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.t3-dialog__head { display: flex; align-items: center; gap: var(--t3-s3); padding: var(--t3-s3) var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-dialog__head h2 { font-size: var(--t3-fs-md); }
.t3-dialog__close { margin-left: auto; }
.t3-dialog__body { padding: var(--t3-s4); overflow: auto; overscroll-behavior: contain; }
.t3-dialog__foot { display: flex; gap: var(--t3-s2); justify-content: flex-end; padding: var(--t3-s3) var(--t3-s4); border-top: 1px solid var(--t3-line); background: var(--t3-surface-2); }

/* Side drawer (cart, mobile menu) built on <dialog> */
.t3-drawer {
  margin: 0; margin-left: auto; width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: var(--t3-surface); color: var(--t3-text); box-shadow: var(--t3-shadow-3);
}
.t3-drawer--left { margin-left: 0; margin-right: auto; }
.t3-drawer::backdrop { background: rgb(11 21 48 / .55); }
.t3-drawer[open] { display: flex; flex-direction: column; animation: t3-slide-r var(--t3-slow) var(--t3-ease); }
.t3-drawer--left[open] { animation-name: t3-slide-l; }
@keyframes t3-slide-r { from { transform: translateX(100%); } }
@keyframes t3-slide-l { from { transform: translateX(-100%); } }
.t3-drawer__head { display: flex; align-items: center; gap: var(--t3-s2); min-height: 56px; padding: 0 var(--t3-s2) 0 var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-drawer__head h2 { font-size: var(--t3-fs-md); }
.t3-drawer__head .t3-icon-btn { margin-left: auto; }
.t3-drawer__body { flex: 1; overflow: auto; overscroll-behavior: contain; }
.t3-drawer__foot { padding: var(--t3-s3) var(--t3-s4) calc(var(--t3-s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--t3-line); background: var(--t3-surface-2); display: grid; gap: var(--t3-s2); }

/* Bottom sheet (mobile facets, mobile compare) */
.t3-sheet {
  margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 88dvh; padding: 0; border: 0;
  border-radius: var(--t3-radius-lg) var(--t3-radius-lg) 0 0; background: var(--t3-surface); color: var(--t3-text);
}
.t3-sheet::backdrop { background: rgb(11 21 48 / .55); }
.t3-sheet[open] { display: flex; flex-direction: column; animation: t3-slide-up var(--t3-slow) var(--t3-ease); }
@keyframes t3-slide-up { from { transform: translateY(100%); } }

/* Toasts */
.t3-toasts { position: fixed; z-index: var(--t3-z-toast); top: 12px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); display: grid; gap: 8px; pointer-events: none; }
@media (min-width: 768px) { .t3-toasts { left: auto; right: 16px; top: 16px; transform: none; } }
.t3-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px;
  border-radius: var(--t3-radius); background: var(--t3-navy-900); color: #fff; box-shadow: var(--t3-shadow-3);
  font-size: var(--t3-fs-sm); animation: t3-toast-in var(--t3-slow) var(--t3-ease);
}
.t3-toast .t3-i { margin-top: 1px; }
.t3-toast--success .t3-i { color: #4ADE80; }
.t3-toast--error { background: #7F1D1D; }
.t3-toast--error .t3-i { color: #FCA5A5; }
.t3-toast__msg { flex: 1; }
.t3-toast__action { color: var(--t3-primary); font-weight: 700; white-space: nowrap; }
.t3-toast__action:hover { color: #fff; }
.t3-toast button { border: 0; background: none; color: rgb(255 255 255 / .7); padding: 0 2px; }
.t3-toast.is-leaving { animation: t3-toast-out var(--t3-fast) ease-in forwards; }
@keyframes t3-toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes t3-toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* 11. Navigation widgets --------------------------------------------------- */
.t3-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--t3-fs-xs); color: var(--t3-muted); padding-block: var(--t3-s2); }
.t3-crumbs a { color: var(--t3-text-2); }
.t3-crumbs a:hover { color: var(--t3-text); text-decoration: underline; }
.t3-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.t3-crumbs li + li::before { content: "›"; color: var(--t3-text-3); }
.t3-crumbs [aria-current] { color: var(--t3-text); font-weight: 500; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.t3-tabs { display: flex; gap: var(--t3-s1); border-bottom: 1px solid var(--t3-line); overflow-x: auto; scrollbar-width: none; }
.t3-tabs::-webkit-scrollbar { display: none; }
.t3-tab { position: relative; min-height: 48px; padding: 0 var(--t3-s4); border: 0; background: none; font-weight: 600; color: var(--t3-muted); white-space: nowrap; }
.t3-tab:hover { color: var(--t3-text); }
.t3-tab[aria-selected="true"] { color: var(--t3-text); }
.t3-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--t3-s4); right: var(--t3-s4); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--t3-primary); }
.t3-tabpanel { padding-block: var(--t3-s4); }
.t3-tabpanel:focus-visible { outline-offset: -2px; }

.t3-acc { border: 1px solid var(--t3-line); border-radius: var(--t3-radius); background: var(--t3-surface); }
.t3-acc + .t3-acc { margin-top: var(--t3-s2); }
.t3-acc > summary { display: flex; align-items: center; gap: var(--t3-s3); min-height: 52px; padding: 0 var(--t3-s4); cursor: pointer; font-weight: 600; list-style: none; }
.t3-acc > summary::-webkit-details-marker { display: none; }
.t3-acc > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--t3-text-2); border-bottom: 2px solid var(--t3-text-2); transform: rotate(45deg) translateY(-2px); transition: transform var(--t3-fast); }
.t3-acc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.t3-acc__body { padding: 0 var(--t3-s4) var(--t3-s4); }

.t3-step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--t3-navy-900); color: #fff; font-size: var(--t3-fs-sm); font-weight: 700; flex: 0 0 28px; }
.t3-step-no--done { background: var(--t3-success-ink); }

.t3-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding-block: var(--t3-s4); }
.t3-pager a, .t3-pager span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--t3-line); border-radius: var(--t3-radius); background: var(--t3-surface); font-weight: 600; font-size: var(--t3-fs-sm); font-variant-numeric: tabular-nums; }
.t3-pager a:hover { border-color: var(--t3-text-3); }
.t3-pager [aria-current="page"] { background: var(--t3-navy-900); border-color: var(--t3-navy-900); color: #fff; }
.t3-pager .is-disabled { color: var(--t3-text-3); }

.t3-empty { display: grid; justify-items: center; gap: var(--t3-s3); padding: var(--t3-s12) var(--t3-s4); text-align: center; }
.t3-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--t3-primary-50); color: var(--t3-primary-600); }
.t3-empty__icon .t3-i { width: 32px; height: 32px; }
.t3-empty h2 { font-size: var(--t3-fs-lg); }
.t3-empty p { color: var(--t3-muted); max-width: 46ch; margin: 0; }

.t3-skel { background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 37%, #eceef1 63%); background-size: 400% 100%; animation: t3-shimmer 1.3s ease infinite; border-radius: var(--t3-radius-sm); }
@keyframes t3-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.t3-alert { display: flex; gap: var(--t3-s3); align-items: flex-start; padding: var(--t3-s3) var(--t3-s4); border-radius: var(--t3-radius); border: 1px solid var(--t3-line); background: var(--t3-surface-2); font-size: var(--t3-fs-sm); }
.t3-alert--warn { background: var(--t3-warning-50); border-color: #FCD9A0; color: var(--t3-warning-ink); }
.t3-alert--deal { background: var(--t3-primary-50); border-color: var(--t3-primary-100); }
.t3-alert--success { background: var(--t3-success-50); border-color: #B7E4C7; color: var(--t3-success-ink); }
.t3-alert--error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

/* 12. Shell: utility bar, header, search, nav, mega menu, footer ----------- */
.t3-utility { background: var(--t3-navy-700); color: rgb(255 255 255 / .82); font-size: var(--t3-fs-xs); }
.t3-utility .t3-container { display: flex; align-items: center; gap: var(--t3-s4); min-height: 32px; }
.t3-utility a, .t3-utility span { display: inline-flex; align-items: center; gap: 6px; }
.t3-utility a:hover { color: #fff; }
.t3-utility__note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t3-marquee { flex: 1 1 auto; display: block; overflow: hidden; text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.t3-marquee__track { display: inline-flex; width: max-content; animation: t3-marquee var(--t3-marquee-dur, 20s) linear infinite; }
.t3-marquee__item { display: inline-block !important; padding-right: 64px; white-space: nowrap; }
.t3-marquee__item a { display: inline !important; text-decoration: underline; }
.t3-marquee:hover .t3-marquee__track, .t3-marquee:focus-within .t3-marquee__track { animation-play-state: paused; }
@keyframes t3-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .t3-marquee__track { animation: none; }
  .t3-marquee__item[aria-hidden] { display: none !important; }
  .t3-marquee__item { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
.t3-utility__right { margin-left: auto; display: flex; align-items: center; gap: var(--t3-s4); flex: 0 0 auto; }
.t3-utility .is-current { color: #fff; font-weight: 700; }
@media (max-width: 767px) { .t3-utility__hide-sm { display: none !important; } }

.t3-header { position: sticky; top: 0; z-index: var(--t3-z-header); background: var(--t3-header-bg); color: var(--t3-on-header); }
.t3-header__main { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "menu logo . actions" "search search search search"; align-items: center; gap: var(--t3-s2) var(--t3-s2); padding-block: var(--t3-s2); }
@media (min-width: 1024px) {
  .t3-header__main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search actions"; gap: var(--t3-s6); min-height: 72px; padding-block: var(--t3-s3); }
}
.t3-header__menu { grid-area: menu; color: inherit; margin-left: -8px; }
.t3-header__menu:hover { background: rgb(255 255 255 / .1); }
@media (min-width: 1024px) { .t3-header__menu { display: none; } }
.t3-logo { grid-area: logo; display: inline-flex; align-items: center; min-height: 40px; max-width: 180px; padding: 4px 10px; border-radius: var(--t3-radius); background: #fff; color: var(--t3-navy-900); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.t3-logo img { max-height: 32px; width: auto; }
@media (min-width: 1024px) { .t3-logo { max-width: 220px; min-height: 48px; } .t3-logo img { max-height: 38px; } }
.t3-logo:hover { color: var(--t3-navy-900); }

.t3-search { grid-area: search; position: relative; min-width: 0; }
@media (min-width: 1024px) { .t3-search { max-width: 820px; width: 100%; justify-self: center; } }
.t3-search__form { display: flex; height: 44px; border-radius: var(--t3-radius); background: #fff; color: var(--t3-text); overflow: hidden; box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--t3-fast); }
.t3-search__form:focus-within { box-shadow: 0 0 0 2px var(--t3-primary); }
.t3-search__cat { display: none; max-width: 170px; border: 0; border-right: 1px solid var(--t3-line); background-color: var(--t3-surface-2); padding: 0 32px 0 12px; font-size: var(--t3-fs-sm); color: var(--t3-text-2); cursor: pointer; }
@media (min-width: 1024px) { .t3-search__cat { display: block; } .t3-search__form { height: 46px; } }
.t3-search__input { flex: 1; min-width: 0; border: 0; padding: 0 12px; font-size: var(--t3-fs-md); background: transparent; }
.t3-search__input:focus { outline: none; }
.t3-search__input::-webkit-search-cancel-button { display: none; }
.t3-search__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0 var(--t3-s4); background: var(--t3-primary); color: var(--t3-on-primary); font-weight: 700; }
.t3-search__btn:hover { background: var(--t3-primary-hover); }
.t3-search__btn span { display: none; }
@media (min-width: 1280px) { .t3-search__btn span { display: inline; } }
.t3-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; max-height: min(70vh, 560px); overflow: auto;
  background: var(--t3-surface); color: var(--t3-text); border-radius: var(--t3-radius); box-shadow: var(--t3-shadow-3); padding: var(--t3-s2) 0;
}
.t3-suggest__group { padding: var(--t3-s2) var(--t3-s3) var(--t3-s1); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t3-muted); display: flex; align-items: center; }
.t3-suggest__group button { margin-left: auto; border: 0; background: none; color: var(--t3-info); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; min-height: 28px; }
.t3-suggest__item { display: flex; align-items: center; gap: var(--t3-s3); min-height: 44px; padding: 6px var(--t3-s3); font-size: var(--t3-fs-sm); }
.t3-suggest__item img { width: 40px; height: 40px; border-radius: var(--t3-radius-sm); object-fit: cover; background: var(--t3-surface-2); flex: 0 0 40px; }
.t3-suggest__item .t3-i { color: var(--t3-text-3); }
.t3-suggest__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t3-suggest__name mark { background: none; color: inherit; font-weight: 700; }
.t3-suggest__item[aria-selected="true"], .t3-suggest__item:hover { background: var(--t3-primary-50); color: var(--t3-text); }
.t3-suggest__all { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: var(--t3-s1); border-top: 1px solid var(--t3-line); font-size: var(--t3-fs-sm); font-weight: 600; color: var(--t3-navy-600); }
.t3-suggest__empty { padding: var(--t3-s4); text-align: center; color: var(--t3-muted); font-size: var(--t3-fs-sm); }

.t3-actions { grid-area: actions; display: flex; align-items: center; gap: 2px; }
.t3-action { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 6px; border: 0; border-radius: var(--t3-radius); background: transparent; color: inherit; }
.t3-action:hover { background: rgb(255 255 255 / .1); color: inherit; }
.t3-action .t3-i { width: 24px; height: 24px; }
.t3-action__text { display: none; text-align: left; line-height: 1.15; }
.t3-action__text small { display: block; font-size: 11px; color: rgb(255 255 255 / .7); }
.t3-action__text strong { display: block; min-width: 3ch; font-size: var(--t3-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t3-action .t3-count { top: 2px; left: 22px; right: auto; }
@media (min-width: 1280px) { .t3-action { padding: 0 10px; } .t3-action__text { display: block; } }
@media (max-width: 479px) { .t3-action--hide-xs { display: none; } }

/* Category / quick-link bar */
.t3-nav { position: relative; background: var(--t3-surface); color: var(--t3-text); border-bottom: 1px solid var(--t3-line); }
.t3-nav .t3-container { display: flex; align-items: center; gap: var(--t3-s2); min-height: 44px; }
.t3-nav__all { display: none; }
@media (min-width: 1024px) {
  .t3-nav__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--t3-s4); border: 0; border-radius: 0; background: var(--t3-navy-900); color: #fff; font-weight: 600; margin-right: var(--t3-s2); }
  .t3-nav__all:hover, .t3-nav__all[aria-expanded="true"] { background: var(--t3-navy-700); }
  .t3-nav__all .t3-i:last-child { transition: transform var(--t3-fast); }
  .t3-nav__all[aria-expanded="true"] .t3-i:last-child { transform: rotate(180deg); }
}
.t3-nav__links { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding-block: 6px; }
.t3-nav__links::-webkit-scrollbar { display: none; }
.t3-nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--t3-radius-pill); white-space: nowrap; font-size: var(--t3-fs-sm); font-weight: 500; color: var(--t3-text-2); }
.t3-nav__link:hover { background: var(--t3-surface-2); color: var(--t3-text); }
.t3-nav__link[aria-current="page"] { background: var(--t3-navy-900); color: #fff; }
.t3-nav__link--flash { color: var(--t3-sale); font-weight: 700; }
.t3-nav__link--flash .t3-i { fill: currentColor; }
@media (max-width: 1023px) { .t3-nav__link { border: 1px solid var(--t3-line); } }
.t3-nav__help { display: none; margin-left: auto; align-items: center; gap: 6px; font-size: var(--t3-fs-sm); color: var(--t3-text-2); white-space: nowrap; }
@media (min-width: 1280px) { .t3-nav__help { display: inline-flex; } }
.t3-nav__help strong { color: var(--t3-text); }

/* Mega menu (desktop) */
.t3-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 65; display: none; }
.t3-mega.is-open { display: block; }
.t3-nav .t3-mega .t3-container { display: block; min-height: 0; }
.t3-mega__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 420px; max-height: calc(100dvh - var(--t3-header-h) - 24px); background: var(--t3-surface); color: var(--t3-text); border-radius: 0 0 var(--t3-radius-lg) var(--t3-radius-lg); box-shadow: var(--t3-shadow-3); overflow: hidden; }
.t3-mega__rail { overflow-y: auto; border-right: 1px solid var(--t3-line); padding-block: var(--t3-s2); background: var(--t3-surface-2); }
.t3-mega__top { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 var(--t3-s3) 0 var(--t3-s4); font-size: var(--t3-fs-sm); font-weight: 500; color: var(--t3-text); }
.t3-mega__top img, .t3-mega__top .t3-letter { width: 24px; height: 24px; border-radius: var(--t3-radius-sm); object-fit: cover; flex: 0 0 24px; }
.t3-mega__top .t3-i { margin-left: auto; color: var(--t3-text-3); }
.t3-mega__top.is-active, .t3-mega__top:hover, .t3-mega__top:focus-visible { background: var(--t3-surface); color: var(--t3-text); box-shadow: inset 3px 0 0 var(--t3-primary); outline: none; }
.t3-mega__pane { display: none; padding: var(--t3-s4) var(--t3-s6); overflow-y: auto; }
.t3-mega__pane.is-active { display: block; }
.t3-mega__head { display: flex; align-items: center; gap: var(--t3-s3); margin-bottom: var(--t3-s4); }
.t3-mega__head h3 { font-size: var(--t3-fs-lg); }
.t3-mega__head a { margin-left: auto; font-size: var(--t3-fs-sm); font-weight: 600; color: var(--t3-navy-600); display: inline-flex; align-items: center; gap: 4px; }
.t3-mega__cols { columns: 3 200px; column-gap: var(--t3-s6); }
.t3-mega__group { break-inside: avoid; margin-bottom: var(--t3-s4); }
.t3-mega__group > a { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--t3-fs-sm); padding-block: 4px; }
.t3-mega__group > a img, .t3-mega__group > a .t3-letter { width: 36px; height: 36px; border-radius: var(--t3-radius); object-fit: cover; }
.t3-mega__group ul a { display: block; padding: 3px 0 3px 44px; font-size: var(--t3-fs-sm); color: var(--t3-text-2); }
.t3-mega__group a:hover { color: var(--t3-text); text-decoration: underline; }
.t3-mega__empty { display: grid; grid-template-columns: 200px 1fr; gap: var(--t3-s6); align-items: center; }
.t3-mega__empty img, .t3-mega__empty .t3-letter { width: 200px; height: 200px; border-radius: var(--t3-radius-lg); object-fit: cover; }
.t3-letter { display: inline-grid; place-items: center; background: var(--t3-primary-50); color: var(--t3-primary-600); font-weight: 700; text-transform: uppercase; }

/* Mobile menu (drill-down) */
.t3-mnav__panel { display: none; }
.t3-mnav__panel.is-active { display: block; animation: t3-fade-in var(--t3-fast) var(--t3-ease); }
@keyframes t3-fade-in { from { opacity: 0; transform: translateX(16px); } }
.t3-mnav__item { display: flex; align-items: center; gap: var(--t3-s3); width: 100%; min-height: 52px; padding: 0 var(--t3-s4); border: 0; border-bottom: 1px solid var(--t3-line); background: none; text-align: left; font-size: var(--t3-fs); font-weight: 500; }
.t3-mnav__item img, .t3-mnav__item .t3-letter { width: 32px; height: 32px; border-radius: var(--t3-radius-sm); object-fit: cover; flex: 0 0 32px; }
.t3-mnav__item > .t3-i:last-child { margin-left: auto; color: var(--t3-text-3); }
.t3-mnav__item:hover { background: var(--t3-surface-2); }
.t3-mnav__back { color: var(--t3-navy-600); font-weight: 600; background: var(--t3-surface-2); }
.t3-mnav__back > .t3-i:first-child { margin-left: 0; }
.t3-mnav__title { padding: var(--t3-s3) var(--t3-s4) var(--t3-s2); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t3-muted); }
.t3-mnav__quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t3-s2); padding: var(--t3-s3) var(--t3-s4); }
.t3-mnav__quick a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--t3-s3); border: 1px solid var(--t3-line); border-radius: var(--t3-radius); font-size: var(--t3-fs-sm); font-weight: 500; }

/* Footer */
.t3-trust { background: var(--t3-surface); border-top: 1px solid var(--t3-line); }
.t3-trust ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t3-s3); padding-block: var(--t3-s4); }
@media (min-width: 1024px) { .t3-trust ul { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: var(--t3-s6); } }
.t3-trust li { display: flex; align-items: center; gap: var(--t3-s3); min-width: 0; }
.t3-trust__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--t3-primary-50); color: var(--t3-primary-600); }
.t3-trust strong { display: block; font-size: var(--t3-fs-sm); }
.t3-trust span { display: block; font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-footer { background: var(--t3-navy-900); color: rgb(255 255 255 / .78); font-size: var(--t3-fs-sm); }
.t3-footer__grid { display: grid; gap: var(--t3-s6); padding-block: var(--t3-s8); grid-template-columns: 1fr 1fr; }
.t3-footer__about { grid-column: 1 / -1; }
@media (min-width: 1024px) { .t3-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } .t3-footer__about { grid-column: auto; } }
.t3-footer h2 { font-size: var(--t3-fs); color: #fff; margin-bottom: var(--t3-s3); }
.t3-footer li + li { margin-top: 2px; }
.t3-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.t3-footer a:hover { color: #fff; text-decoration: underline; }
.t3-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--t3-s3); }
.t3-social li + li { margin-top: 0; }
.t3-footer .t3-social__link { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: #fff;
  transition: background-color var(--t3-fast) var(--t3-ease), transform var(--t3-fast) var(--t3-ease); }
.t3-footer .t3-social__link:hover { text-decoration: none; transform: translateY(-2px); background: var(--t3-primary); color: var(--t3-on-primary); }
.t3-footer .t3-social__link--facebook:hover { background: #1877f2; color: #fff; }
.t3-footer .t3-social__link--instagram:hover { background: #e1306c; color: #fff; }
.t3-footer .t3-social__link--youtube:hover { background: #ff0000; color: #fff; }
.t3-footer .t3-social__link--x-social:hover { background: #000; color: #fff; }
.t3-footer .t3-social__link--messenger:hover { background: #0084ff; color: #fff; }
.t3-footer .t3-social__link--whatsapp:hover { background: #25d366; color: #fff; }
.t3-footer__copy a { display: inline; min-height: 0; color: #fff; text-decoration: underline; }
.t3-footer__bar { border-top: 1px solid rgb(255 255 255 / .12); }
.t3-footer__bar .t3-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--t3-s2); min-height: 56px; font-size: var(--t3-fs-xs); }
.t3-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.t3-pay span { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: var(--t3-radius-sm); background: rgb(255 255 255 / .1); color: #fff; font-size: 11px; font-weight: 600; }

/* 13. Home ------------------------------------------------------------------ */
.t3-hero { display: grid; gap: var(--t3-s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .t3-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--t3-s3); } }
@media (min-width: 1280px) { .t3-hero--rail { grid-template-columns: 236px minmax(0, 1fr) 300px; } }
.t3-hero__rail { display: none; }
@media (min-width: 1280px) { .t3-hero--rail .t3-hero__rail { display: block; } }
.t3-rail { position: relative; height: 100%; background: var(--t3-surface); border: 1px solid var(--t3-line); border-radius: var(--t3-radius); padding-block: 6px; }
.t3-rail__item > a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 var(--t3-s3); font-size: var(--t3-fs-sm); color: var(--t3-text-2); }
.t3-rail__item > a img, .t3-rail__item > a .t3-letter { width: 22px; height: 22px; border-radius: var(--t3-radius-sm); object-fit: cover; flex: 0 0 22px; font-size: 11px; }
.t3-rail__item > a .t3-i { margin-left: auto; color: var(--t3-text-3); }
.t3-rail__item:hover > a, .t3-rail__item:focus-within > a { background: var(--t3-primary-50); color: var(--t3-text); }
.t3-rail__fly { display: none; position: absolute; top: -1px; bottom: -1px; left: 100%; width: 560px; z-index: 20; padding: var(--t3-s4) var(--t3-s6); background: var(--t3-surface); border: 1px solid var(--t3-line); border-radius: 0 var(--t3-radius) var(--t3-radius) 0; box-shadow: var(--t3-shadow-2); overflow: auto; }
.t3-rail__item:hover > .t3-rail__fly, .t3-rail__item:focus-within > .t3-rail__fly { display: block; }
.t3-rail__more { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 var(--t3-s3); font-size: var(--t3-fs-sm); font-weight: 600; color: var(--t3-navy-600); }

.t3-slider { position: relative; border-radius: var(--t3-radius); overflow: hidden; background: var(--t3-navy-900); aspect-ratio: 2.4 / 1; }
@media (max-width: 767px) { .t3-slider { aspect-ratio: 2 / 1; border-radius: var(--t3-radius-sm); } }
.t3-slider__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.t3-slider__track::-webkit-scrollbar { display: none; }
.t3-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; }
.t3-slide a, .t3-slide > div { display: block; height: 100%; position: relative; overflow: hidden; }
.t3-slide img, .t3-slide video { width: 100%; height: 100%; object-fit: cover; }
/* Banners keep their own shape: the picture is contained and a blurred copy fills the box. */
.t3-slide__bg { position: absolute; inset: 0; filter: blur(22px) saturate(1.15); transform: scale(1.2); opacity: .75; }
.t3-slide .t3-slide__img { position: relative; object-fit: contain; }
.t3-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .9); color: var(--t3-text); display: grid; place-items: center; box-shadow: var(--t3-shadow-2); opacity: 0; transition: opacity var(--t3-fast); }
.t3-slider__nav--prev { left: 12px; } .t3-slider__nav--next { right: 12px; }
.t3-slider:hover .t3-slider__nav, .t3-slider:focus-within .t3-slider__nav { opacity: 1; }
@media (hover: none) { .t3-slider__nav { display: none; } }
.t3-slider__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.t3-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--t3-radius-pill); background: rgb(255 255 255 / .55); transition: width var(--t3-fast), background-color var(--t3-fast); position: relative; }
.t3-slider__dot::before { content: ""; position: absolute; inset: -10px -4px; } /* 28px hit area */
.t3-slider__dot[aria-current="true"] { width: 22px; background: var(--t3-primary); }

.t3-promos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t3-s2); }
@media (min-width: 1024px) { .t3-promos { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: var(--t3-s3); } }
.t3-promo { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--t3-s2); min-height: 112px; padding: var(--t3-s3); border-radius: var(--t3-radius); overflow: hidden; color: #fff; background: var(--t3-navy-900); isolation: isolate; }
.t3-promo:hover { color: #fff; }
.t3-promo--deal { background: linear-gradient(135deg, var(--t3-sale), color-mix(in srgb, var(--t3-primary) 80%, var(--t3-sale))); }
.t3-promo--new { background: linear-gradient(135deg, var(--t3-navy-900), var(--t3-navy-600)); }
.t3-promo--img { padding: 0; background: var(--t3-surface-2); }
.t3-promo--img img { width: 100%; height: 100%; object-fit: cover; }
.t3-promo__kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.t3-promo__title { font-size: var(--t3-fs-md); font-weight: 700; line-height: 1.25; }
@media (min-width: 1024px) { .t3-promo__title { font-size: var(--t3-fs-lg); } }
.t3-promo__cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t3-fs-xs); font-weight: 700; }
.t3-promo__pic { position: absolute; right: -8px; bottom: -8px; width: 46%; aspect-ratio: 1; border-radius: var(--t3-radius); object-fit: cover; z-index: -1; opacity: .95; transform: rotate(-6deg); box-shadow: var(--t3-shadow-2); }
@media (max-width: 1023px) { .t3-promo__pic { width: 40%; } }
@media (max-width: 767px) { .t3-promo__pic { display: none; } }

/* Category icon rail (2 rows, scrolls on mobile) */
.t3-cats { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 84px; gap: var(--t3-s2); overflow-x: auto; scrollbar-width: none; padding: var(--t3-s3); scroll-snap-type: x proximity; }
.t3-cats::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .t3-cats { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; padding: var(--t3-s4); gap: var(--t3-s3); } }
@media (min-width: 1280px) { .t3-cats { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.t3-cat { display: grid; justify-items: center; gap: 6px; padding: var(--t3-s2) 4px; border-radius: var(--t3-radius); text-align: center; scroll-snap-align: start; }
.t3-cat:hover { background: var(--t3-primary-50); color: var(--t3-text); }
.t3-cat__img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--t3-surface-2); border: 1px solid var(--t3-line); display: grid; place-items: center; }
.t3-cat__img img { width: 100%; height: 100%; object-fit: cover; }
.t3-cat__img .t3-letter { width: 100%; height: 100%; font-size: 20px; }
@media (min-width: 1024px) { .t3-cat__img { width: 64px; height: 64px; } }
.t3-cat__name { font-size: var(--t3-fs-xs); line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t3-cat__count { font-size: 11px; color: var(--t3-muted); font-variant-numeric: tabular-nums; }

/* Flash sale strip */
.t3-flash { border: 0; overflow: hidden; }
.t3-flash__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t3-s2) var(--t3-s4); padding: var(--t3-s3); background: linear-gradient(90deg, var(--t3-sale), color-mix(in srgb, var(--t3-primary) 85%, var(--t3-sale))); color: #fff; }
@media (min-width: 768px) { .t3-flash__head { padding: var(--t3-s3) var(--t3-s4); } }
.t3-flash__title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t3-fs-lg); font-weight: 800; letter-spacing: -.01em; }
.t3-flash__title .t3-i { fill: #FDE047; stroke: #FDE047; }
.t3-flash__ends { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t3-fs-sm); font-weight: 600; }
.t3-flash__ends .t3-countdown__seg { background: rgb(0 0 0 / .28); }
.t3-flash__all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: var(--t3-radius-pill); background: #fff; color: var(--t3-sale); font-weight: 700; font-size: var(--t3-fs-sm); }
.t3-flash__all:hover { color: var(--t3-sale); background: var(--t3-sale-50); }
.t3-flash__row { padding: var(--t3-s3); background: var(--t3-surface); }
@media (min-width: 768px) { .t3-flash__row { padding: var(--t3-s4); } }
.t3-strip { position: relative; }
.t3-strip__btn { position: absolute; top: 40%; z-index: 3; transform: translateY(-50%); }
.t3-strip__btn--prev { left: -6px; } .t3-strip__btn--next { right: -6px; }
.t3-strip:not(.can-prev) .t3-strip__btn--prev, .t3-strip:not(.can-next) .t3-strip__btn--next { opacity: 0; pointer-events: none; }
@media (hover: none) { .t3-strip__btn { display: none; } }

/* 14. Product page ------------------------------------------------------------ */
.t3-pdp { display: grid; gap: var(--t3-s3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .t3-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--t3-s4); } }
@media (min-width: 1280px) { .t3-pdp { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3.2fr); } }
.t3-pdp__box { grid-column: 1 / -1; }
@media (min-width: 1280px) { .t3-pdp__box { grid-column: auto; position: sticky; top: calc(var(--t3-header-h) + 12px); } }

.t3-gallery { display: grid; gap: var(--t3-s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .t3-gallery { grid-template-columns: 68px minmax(0, 1fr); } }
.t3-gallery__thumbs { display: flex; gap: var(--t3-s2); order: 2; overflow-x: auto; scrollbar-width: none; }
.t3-gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .t3-gallery__thumbs { order: 0; flex-direction: column; overflow: auto; max-height: 520px; } }
.t3-gallery__thumb { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 1px solid var(--t3-line); border-radius: var(--t3-radius); background: var(--t3-surface); overflow: hidden; }
.t3-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.t3-gallery__thumb[aria-current="true"] { border-color: var(--t3-primary); box-shadow: inset 0 0 0 1px var(--t3-primary); }
.t3-gallery__stage { position: relative; aspect-ratio: 1; border-radius: var(--t3-radius); background: var(--t3-surface); border: 1px solid var(--t3-line); overflow: hidden; }
.t3-gallery__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.t3-gallery__track::-webkit-scrollbar { display: none; }
.t3-gallery__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; overflow: hidden; cursor: zoom-in; }
.t3-gallery__slide img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t3-fast) linear; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.t3-gallery__slide.is-zoom img { transform: scale(2); }
.t3-gallery__full { position: absolute; right: 10px; top: 10px; }
.t3-gallery__badges { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 1; pointer-events: none; }
.t3-gallery__count { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: var(--t3-radius-pill); background: rgb(11 21 48 / .7); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

.t3-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t3-s3); align-content: start; }
.t3-info__brand { font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-info__brand a { color: var(--t3-info); font-weight: 600; }
.t3-info h1 { font-size: var(--t3-fs-lg); line-height: 1.3; font-weight: 700; }
@media (min-width: 1280px) { .t3-info h1 { font-size: 22px; } }
.t3-info__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t3-s2) var(--t3-s4); font-size: var(--t3-fs-sm); color: var(--t3-muted); }
.t3-info__meta a { color: var(--t3-info); }
.t3-pricebox { padding: var(--t3-s3) var(--t3-s4); border-radius: var(--t3-radius); background: var(--t3-surface-2); border: 1px solid var(--t3-line); display: grid; gap: 4px; }
.t3-pricebox__save { font-size: var(--t3-fs-sm); color: var(--t3-success-ink); font-weight: 600; }
.t3-optgroup { display: grid; gap: var(--t3-s2); border: 0; padding: 0; margin: 0; min-width: 0; }
.t3-optgroup legend { padding: 0; margin-bottom: var(--t3-s2); font-size: var(--t3-fs-sm); font-weight: 600; }
.t3-optgroup legend output { font-weight: 500; color: var(--t3-muted); }
.t3-optgroup__list { display: flex; flex-wrap: wrap; gap: var(--t3-s2); }
.t3-buy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t3-s2); }
.t3-buy .t3-btn, .t3-buybar .t3-btn { white-space: normal; padding-inline: var(--t3-s2); }
.t3-buy__qty { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--t3-s3); }
.t3-info__links { display: flex; flex-wrap: wrap; gap: var(--t3-s1) var(--t3-s4); }
.t3-info__links .t3-btn { min-height: 40px; padding: 0 4px; }

.t3-buybox { display: grid; }
.t3-buybox__row { display: flex; gap: var(--t3-s3); padding: var(--t3-s3) var(--t3-s4); border-bottom: 1px solid var(--t3-line); font-size: var(--t3-fs-sm); }
.t3-buybox__row:last-child { border-bottom: 0; }
.t3-buybox__row > .t3-i { color: var(--t3-text-2); margin-top: 2px; }
.t3-buybox__row strong { display: block; font-weight: 600; }
.t3-buybox__row small { display: block; color: var(--t3-muted); font-size: var(--t3-fs-xs); }
.t3-buybox__title { padding: var(--t3-s3) var(--t3-s4) 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t3-muted); }
.t3-ship-list { width: 100%; font-size: var(--t3-fs-sm); }
.t3-ship-list td { padding: 3px 0; }
.t3-ship-list td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Frequently bought together */
.t3-fbt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t3-s3); }
.t3-fbt__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t3-s2); }
.t3-fbt__item { position: relative; width: 112px; }
.t3-fbt__item img { width: 112px; height: 112px; border-radius: var(--t3-radius); border: 1px solid var(--t3-line); object-fit: cover; }
.t3-fbt__item input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--t3-navy-900); }
.t3-fbt__plus { color: var(--t3-text-3); font-size: 20px; font-weight: 300; }
.t3-fbt__sum { display: grid; gap: var(--t3-s2); min-width: 200px; }

/* Mobile sticky buy bar */
.t3-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--t3-z-tray); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--t3-s2); padding: var(--t3-s2) var(--t3-s3) calc(var(--t3-s2) + env(safe-area-inset-bottom)); background: var(--t3-surface); border-top: 1px solid var(--t3-line); box-shadow: 0 -6px 20px rgb(11 21 48 / .08); transform: translateY(110%); transition: transform var(--t3-slow) var(--t3-ease); }
.t3-buybar.is-visible { transform: none; }
.t3-buybar .t3-btn { min-height: 46px; padding: 0 8px; }
@media (min-width: 1024px) { .t3-buybar { display: none; } }

/* Reviews */
.t3-reviews { display: grid; gap: var(--t3-s6); }
@media (min-width: 1024px) { .t3-reviews { grid-template-columns: 300px minmax(0, 1fr); } }
.t3-review { display: grid; grid-template-columns: 40px 1fr; gap: var(--t3-s3); padding-block: var(--t3-s3); border-bottom: 1px solid var(--t3-line); }
.t3-review__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--t3-primary-50); color: var(--t3-primary-600); font-weight: 700; }
.t3-starpick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.t3-starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t3-starpick label { font-size: 26px; line-height: 1; color: var(--t3-line-2); cursor: pointer; padding: 2px; }
.t3-starpick label:hover, .t3-starpick label:hover ~ label, .t3-starpick input:checked ~ label { color: var(--t3-star); }
.t3-starpick input:focus-visible + label { outline: 2px solid var(--t3-primary); border-radius: 4px; }

.t3-prose { font-size: var(--t3-fs); line-height: 1.7; color: var(--t3-text); overflow-wrap: anywhere; }
.t3-prose img { max-width: 100%; height: auto; border-radius: var(--t3-radius); margin-block: var(--t3-s3); }
.t3-prose table { margin-block: var(--t3-s3); }
.t3-prose td, .t3-prose th { border: 1px solid var(--t3-line); padding: 6px 10px; }
.t3-prose h2, .t3-prose h3 { margin: var(--t3-s4) 0 var(--t3-s2); }
.t3-prose ul, .t3-prose ol { padding-left: 1.4em; margin-bottom: var(--t3-s3); }
.t3-prose ul { list-style: disc; } .t3-prose ol { list-style: decimal; }
.t3-prose iframe, .t3-prose video { max-width: 100%; }

/* Motion preferences ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 15. Floating: compare tray, contact button, back to top, announcement ------- */
.t3-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--t3-z-tray); background: var(--t3-navy-900); color: #fff; box-shadow: 0 -8px 24px rgb(11 21 48 / .25); padding-bottom: env(safe-area-inset-bottom); animation: t3-slide-up var(--t3-slow) var(--t3-ease); }
.t3-tray__inner { display: flex; align-items: center; gap: var(--t3-s3); min-height: 64px; }
.t3-tray__title { white-space: nowrap; font-size: var(--t3-fs-sm); }
.t3-tray__slots { display: flex; gap: var(--t3-s2); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.t3-tray__slot { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--t3-radius); background: rgb(255 255 255 / .1); border: 1px dashed rgb(255 255 255 / .3); }
.t3-tray__slot img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.t3-tray__slot button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: #fff; color: var(--t3-text); box-shadow: var(--t3-shadow-1); }
.t3-tray__actions { display: flex; gap: var(--t3-s2); }
.t3-tray .t3-btn--ghost { --_fg: #fff; }
.t3-tray .t3-btn--ghost:hover { --_bg: rgb(255 255 255 / .1); }
@media (max-width: 479px) { .t3-tray__title { display: none; } }
body.has-tray .t3-fab, body.has-tray .t3-totop { bottom: 88px; }
body.has-buybar .t3-fab, body.has-buybar .t3-totop { bottom: 84px; }

.t3-fab { position: fixed; right: 16px; bottom: 20px; z-index: 55; display: grid; gap: 10px; }
.t3-fab__btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: var(--t3-shadow-2); transition: transform var(--t3-fast) var(--t3-ease); }
.t3-fab__btn:hover { color: #fff; transform: scale(1.06); }
.t3-fab__btn .t3-i { width: 28px; height: 28px; }
.t3-fab__btn--wa { background: #1FAF55; }
.t3-fab__btn--ms { background: #0866FF; }
.t3-totop { position: fixed; left: 16px; bottom: 20px; z-index: 55; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--t3-line); background: var(--t3-surface); color: var(--t3-text); display: grid; place-items: center; box-shadow: var(--t3-shadow-2); }
@media (min-width: 1024px) { .t3-totop { left: auto; right: 80px; } }

.t3-anc { position: relative; }
.t3-anc__close { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgb(255 255 255 / .9); }
.t3-anc__track { gap: 0; }
.t3-anc__slide { flex: 0 0 100% !important; display: grid; gap: var(--t3-s3); justify-items: center; padding: var(--t3-s6) var(--t3-s4); text-align: center; }
.t3-anc__slide img { max-height: 60vh; width: auto; border-radius: var(--t3-radius); }
.t3-anc__slide h2 { font-size: var(--t3-fs-lg); }
html.t3-locked { overflow: hidden; }

/* 16. Header behaviour ----------------------------------------------------------- */
/* The header keeps one height while scrolling: the nav row (flash sale, hot deals…) never hides
   and nothing shrinks, so the page below never jumps. Scrolling only adds a shadow. */
.t3-header { transition: box-shadow var(--t3-fast); }
.t3-header.is-stuck { box-shadow: 0 6px 18px rgb(11 21 48 / .18); }
.t3-qv-skel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--t3-s4); }
.t3-qv-skel > .t3-skel { aspect-ratio: 1; }
.t3-qv-skel div { display: grid; gap: 10px; align-content: start; }
.t3-qv-skel div .t3-skel { height: 16px; }
.t3-qv-skel div .t3-skel:first-child { height: 24px; }

/* 17. Mini cart & summary rows ------------------------------------------------- */
.t3-mini { display: flex; flex-direction: column; min-height: 100%; }
.t3-mini__list { flex: 1; }
.t3-mini__line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--t3-s3); padding: var(--t3-s3) var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-mini__line img { width: 64px; height: 64px; border-radius: var(--t3-radius); object-fit: cover; border: 1px solid var(--t3-line); }
.t3-mini__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.t3-mini__name { font-size: var(--t3-fs-sm); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t3-mini__attrs { font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-mini__row { display: flex; align-items: center; justify-content: space-between; gap: var(--t3-s2); margin-top: 4px; }
.t3-mini__remove { width: 36px; height: 36px; color: var(--t3-muted); }
.t3-mini__remove:hover { color: var(--t3-sale); }
.t3-mini__foot { position: sticky; bottom: 0; display: grid; gap: var(--t3-s2); padding: var(--t3-s3) var(--t3-s4) calc(var(--t3-s3) + env(safe-area-inset-bottom)); background: var(--t3-surface-2); border-top: 1px solid var(--t3-line); }
.t3-sumrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--t3-s3); font-size: var(--t3-fs-sm); }
.t3-sumrow strong { font-variant-numeric: tabular-nums; }
.t3-sumrow--save { color: var(--t3-success-ink); }
.t3-sumrow--total { font-size: var(--t3-fs-md); font-weight: 700; padding-top: var(--t3-s2); border-top: 1px solid var(--t3-line); }
.t3-sumrow--total strong { font-size: var(--t3-fs-lg); color: var(--t3-price); }

/* 18. Error pages ----------------------------------------------------------------- */
.t3-error { display: grid; justify-items: center; gap: var(--t3-s3); padding: var(--t3-s12) var(--t3-s4); text-align: center; margin-block: var(--t3-s4); }
.t3-error__code { font-size: clamp(64px, 14vw, 120px); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, var(--t3-primary), var(--t3-sale)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t3-error h1 { font-size: var(--t3-fs-xl); }
.t3-error p { color: var(--t3-muted); max-width: 52ch; }
.t3-error__search { width: min(520px, 100%); }
.t3-error__links { justify-content: center; }

/* 19. Home: category rows, empty slider -------------------------------------------- */
.t3-catrow { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 1024px) { .t3-catrow { grid-template-columns: 240px minmax(0, 1fr); } }
.t3-catrow__tile { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "img title" "img count" "subs subs" "cta cta"; align-items: center; gap: 2px var(--t3-s3); padding: var(--t3-s3); background: linear-gradient(160deg, var(--t3-primary-50), var(--t3-surface) 70%); border-bottom: 1px solid var(--t3-line); }
@media (min-width: 1024px) { .t3-catrow__tile { grid-template-columns: 1fr; grid-template-areas: "img" "title" "count" "subs" "cta"; align-content: start; gap: var(--t3-s2); padding: var(--t3-s4); border-bottom: 0; border-right: 1px solid var(--t3-line); } }
.t3-catrow__img { grid-area: img; width: 56px; height: 56px; border-radius: var(--t3-radius); overflow: hidden; background: var(--t3-surface); border: 1px solid var(--t3-line); display: grid; place-items: center; }
.t3-catrow__img img { width: 100%; height: 100%; object-fit: cover; }
.t3-catrow__img .t3-letter { width: 100%; height: 100%; font-size: 24px; }
@media (min-width: 1024px) { .t3-catrow__img { width: 96px; height: 96px; } }
.t3-catrow__tile h2 { grid-area: title; font-size: var(--t3-fs-md); }
.t3-catrow__tile > .t3-muted { grid-area: count; }
.t3-catrow__subs { grid-area: subs; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--t3-s2); }
.t3-catrow__subs .t3-chip { min-height: 28px; font-size: var(--t3-fs-xs); }
.t3-catrow__tile > .t3-btn { grid-area: cta; justify-self: start; margin-top: var(--t3-s2); }
@media (max-width: 1023px) { .t3-catrow__tile > .t3-btn { display: none; } }
.t3-catrow__list { padding: var(--t3-s3); min-width: 0; }
@media (min-width: 768px) { .t3-catrow__list { padding: var(--t3-s4); } }
.t3-slider--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--t3-s4); color: #fff; font-size: var(--t3-fs-xl); font-weight: 800; background: linear-gradient(135deg, var(--t3-navy-900), var(--t3-navy-600)); }
.t3-slider--empty:hover { color: #fff; }

/* 20. Listing pages ------------------------------------------------------------------ */
.t3-lhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t3-s3); padding: var(--t3-s2) 0 var(--t3-s3); }
.t3-lhead__title { display: flex; align-items: center; gap: var(--t3-s3); min-width: 0; flex: 1 1 260px; }
.t3-lhead__title h1 { font-size: var(--t3-fs-lg); }
@media (min-width: 1024px) { .t3-lhead__title h1 { font-size: var(--t3-fs-xl); } }
.t3-lhead__title p { margin: 2px 0 0; }
.t3-lhead__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--t3-radius); background: var(--t3-navy-900); color: var(--t3-primary); }
.t3-lhead__tools { display: flex; align-items: center; gap: var(--t3-s2); flex-wrap: wrap; }
.t3-lhead__sort { position: relative; display: inline-flex; align-items: center; }
.t3-lhead__sort > .t3-i { position: absolute; left: 10px; color: var(--t3-text-2); pointer-events: none; }
.t3-lhead__sort .t3-select { min-height: 40px; padding: 6px 32px 6px 32px; font-size: var(--t3-fs-sm); width: auto; }
.t3-lhead__filter { min-height: 40px; }
@media (min-width: 1024px) { .t3-lhead__filter { display: none; } }
.t3-lhead__find { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 360px; }
.t3-lhead__find .t3-i { position: absolute; left: 12px; color: var(--t3-text-3); }
.t3-lhead__find .t3-input { padding-left: 38px; }
.t3-viewtoggle { display: inline-flex; border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius); background: var(--t3-surface); overflow: hidden; }
.t3-viewtoggle .t3-icon-btn { border-radius: 0; width: 40px; height: 38px; color: var(--t3-muted); }
.t3-viewtoggle .t3-icon-btn[aria-pressed="true"] { background: var(--t3-navy-900); color: #fff; }

.t3-listing { display: grid; gap: var(--t3-s3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .t3-listing { grid-template-columns: 248px minmax(0, 1fr); gap: var(--t3-s4); } }
.t3-listing__aside { display: none; }
@media (min-width: 1024px) { .t3-listing__aside { display: block; position: sticky; top: calc(var(--t3-header-h) + 12px); max-height: calc(100dvh - var(--t3-header-h) - 24px); overflow: auto; scrollbar-width: thin; } }
.t3-listing__aside:has(.t3-facets) { display: contents; }
@media (min-width: 1024px) { .t3-listing__aside:has(.t3-facets) { display: block; } }

.t3-sidenav { padding: var(--t3-s2) 0; }
.t3-sidenav__title { padding: var(--t3-s3) var(--t3-s4) var(--t3-s1); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t3-muted); }
.t3-sidenav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--t3-s4); font-size: var(--t3-fs-sm); color: var(--t3-text-2); }
.t3-sidenav a:hover, .t3-sidenav a[aria-current] { background: var(--t3-primary-50); color: var(--t3-text); box-shadow: inset 3px 0 0 var(--t3-primary); }
.t3-sidenav__count { margin-left: auto; font-size: var(--t3-fs-xs); color: var(--t3-muted); font-variant-numeric: tabular-nums; }
.t3-sidenav__more { color: var(--t3-navy-600) !important; font-weight: 600; }

.t3-subcats { gap: var(--t3-s2); padding-bottom: var(--t3-s3); }
.t3-subcat { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px 6px 6px; border: 1px solid var(--t3-line); border-radius: var(--t3-radius-pill); background: var(--t3-surface); font-size: var(--t3-fs-sm); font-weight: 500; white-space: nowrap; }
.t3-subcat:hover { border-color: var(--t3-text-3); }
.t3-subcat[aria-current="page"] { border-color: var(--t3-navy-900); box-shadow: inset 0 0 0 1px var(--t3-navy-900); font-weight: 700; }
.t3-subcat__img { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--t3-surface-2); }
.t3-subcat__img img { width: 100%; height: 100%; object-fit: cover; }
.t3-subcat__img .t3-letter { width: 100%; height: 100%; }

.t3-results { min-width: 0; transition: opacity var(--t3-fast); }
.t3-results[aria-busy="true"] { opacity: .5; pointer-events: none; }
.t3-results__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t3-s2) var(--t3-s3); padding: var(--t3-s2) var(--t3-s3); margin-bottom: var(--t3-s2); background: var(--t3-surface); border: 1px solid var(--t3-line); border-radius: var(--t3-radius); }
.t3-results__count { margin: 0; font-size: var(--t3-fs-sm); color: var(--t3-text-2); }
.t3-results__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.t3-results__chips .t3-chip a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--t3-surface-2); }
.t3-results__chips .t3-chip a:hover { background: var(--t3-line); }
.t3-grid.is-rows { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .t3-grid.is-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t3-grid.is-rows .t3-card { flex-direction: row; }
.t3-grid.is-rows .t3-card__media { width: 132px; flex: 0 0 132px; }
@media (min-width: 768px) { .t3-grid.is-rows .t3-card__media { width: 176px; flex-basis: 176px; } }
.t3-grid.is-rows .t3-card__title { -webkit-line-clamp: 3; min-height: 0; font-size: var(--t3-fs); }
.t3-more { display: grid; justify-items: center; gap: var(--t3-s2); padding: var(--t3-s6) 0 var(--t3-s2); }
.t3-more__meter { width: min(260px, 70%); }
.t3-more .t3-btn { min-width: min(320px, 100%); }

/* Facets: a bottom sheet on phones, a static side panel from 1024px */
.t3-facets form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; width: 100%; }
.t3-facets__head { display: flex; align-items: center; gap: var(--t3-s3); min-height: 52px; padding: 0 var(--t3-s2) 0 var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-facets__head h2 { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t3-fs-md); margin-right: auto; }
.t3-facets__body { flex: 1; overflow: auto; padding: 0 var(--t3-s4); }
.t3-facets__foot { padding: var(--t3-s3) var(--t3-s4) calc(var(--t3-s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--t3-line); }
.t3-facet { border: 0; margin: 0; padding: var(--t3-s3) 0; border-bottom: 1px solid var(--t3-line); min-width: 0; }
.t3-facet:last-of-type { border-bottom: 0; }
.t3-facet legend { padding: 0; margin-bottom: var(--t3-s2); font-size: var(--t3-fs-sm); font-weight: 700; float: left; width: 100%; }
.t3-facet legend + * { clear: both; }
.t3-facet .t3-check { display: flex; }
.t3-facet__tree ul { padding-left: 26px; }
.t3-facet__price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--t3-s2); }
.t3-facet__price .t3-input { min-height: 40px; padding: 6px 10px; }
.t3-facet__ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--t3-s2); }
.t3-facet__ranges .t3-chip { min-height: 30px; font-size: var(--t3-fs-xs); cursor: pointer; }
@media (min-width: 1024px) {
  .t3-facets:not([open]) { display: block; position: static; inset: auto; width: auto; max-width: none; max-height: none; margin: 0; border: 1px solid var(--t3-line); border-radius: var(--t3-radius); background: var(--t3-surface); }
  .t3-facets__close, .t3-facets__foot { display: none; }
  .t3-facets__body { overflow: visible; }
}

/* All categories page */
.t3-catgrid { display: grid; gap: var(--t3-s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .t3-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .t3-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.t3-catcard__head { display: flex; align-items: center; gap: var(--t3-s3); padding: var(--t3-s3); }
.t3-catcard__head > span:nth-child(2) { flex: 1; min-width: 0; }
.t3-catcard__head strong { display: block; font-size: var(--t3-fs-md); }
.t3-catcard__head small { color: var(--t3-muted); font-size: var(--t3-fs-xs); }
.t3-catcard__head .t3-i { color: var(--t3-text-3); }
.t3-catcard__img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--t3-radius); overflow: hidden; background: var(--t3-surface-2); display: grid; place-items: center; }
.t3-catcard__img img { width: 100%; height: 100%; object-fit: cover; }
.t3-catcard__img .t3-letter { width: 100%; height: 100%; font-size: 22px; }
.t3-catcard__subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--t3-s3) var(--t3-s3); }
.t3-catcard__subs .t3-chip { min-height: 30px; font-size: var(--t3-fs-xs); }
.t3-facet__tree > li { position: relative; }
.t3-facet__tree > li > .t3-check { padding-right: 36px; }
.t3-facet__tree > li > .t3-check .t3-check__count { margin-right: 4px; }
.t3-facet__toggle { position: absolute; right: -6px; top: 0; width: 32px; height: 32px; border: 0; border-radius: var(--t3-radius-sm); background: none; display: grid; place-items: center; color: var(--t3-text-2); }
.t3-facet__toggle:hover { background: var(--t3-surface-2); }
.t3-facet__toggle[aria-expanded="true"] .t3-i { transform: rotate(180deg); }

/* 21. Product page extras, quick view, viewer ---------------------------------------- */
.t3-optgroup.is-invalid .t3-opt span { border-color: #DC2626; }
.t3-buyform { display: grid; gap: var(--t3-s4); }
.t3-success { color: var(--t3-success-ink); }
.t3-contact { display: flex; flex-wrap: wrap; gap: var(--t3-s2); }
.t3-contact .t3-btn { flex: 1 1 140px; }
.t3-contact__wa { --_bg: #1FAF55; --_fg: #fff; --_bd: #1FAF55; }
.t3-contact__ms { --_bg: #0866FF; --_fg: #fff; --_bd: #0866FF; }
.t3-buybar__price { display: flex; align-items: center; padding-right: 4px; font-weight: 700; color: var(--t3-price); font-size: var(--t3-fs-md); }
.t3-pdp__tabs .t3-tabpanel { padding-bottom: 0; }
.t3-review-sum { display: flex; align-items: center; flex-wrap: wrap; gap: var(--t3-s2); margin-bottom: var(--t3-s4); }
.t3-review-sum__avg { font-size: 40px; line-height: 1; font-weight: 800; }
.t3-review-form { display: grid; gap: var(--t3-s3); padding: var(--t3-s4); border: 1px solid var(--t3-line); border-radius: var(--t3-radius); background: var(--t3-surface-2); }
.t3-review-form h3 { font-size: var(--t3-fs-md); }
.t3-review p { margin: 4px 0 0; }

.t3-qv { display: grid; gap: var(--t3-s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .t3-qv { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.t3-qv__media { position: relative; aspect-ratio: 1; border: 1px solid var(--t3-line); border-radius: var(--t3-radius); overflow: hidden; background: var(--t3-surface-2); }
.t3-qv__media img { width: 100%; height: 100%; object-fit: contain; }
.t3-qv__off { position: absolute; left: 10px; top: 10px; }
.t3-qv__name { font-size: var(--t3-fs-lg); }
.t3-qv .t3-info { gap: var(--t3-s2); }

.t3-viewer { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(11 21 48 / .96); color: #fff; }
.t3-viewer[open] { display: block; }
.t3-viewer::backdrop { background: transparent; }
.t3-viewer__track { height: 100%; gap: 0; }
.t3-viewer__slide { flex: 0 0 100% !important; height: 100%; display: grid; place-items: center; padding: 56px 16px; }
.t3-viewer__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.t3-viewer__close { position: absolute; top: 12px; right: 12px; z-index: 2; color: #fff; background: rgb(255 255 255 / .12); }
.t3-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; color: #fff; background: rgb(255 255 255 / .12); width: 48px; height: 48px; border-radius: 50%; }
.t3-viewer__nav--prev { left: 12px; } .t3-viewer__nav--next { right: 12px; }
.t3-viewer .t3-icon-btn:hover { background: rgb(255 255 255 / .24); }

/* 22. Checkout, order confirmed, track order ---------------------------------------- */
.t3-co__hero { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--t3-s3); margin: var(--t3-s2) 0 var(--t3-s4); }
.t3-co__title { font-size: var(--t3-fs-xl); margin: 0; }
.t3-co__sub { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--t3-fs-sm); color: var(--t3-text-2); }
.t3-co__sub .t3-i { color: var(--t3-success-ink); }
.t3-co__perks { display: flex; flex-wrap: wrap; gap: var(--t3-s2); margin: 0; padding: 0; list-style: none; }
.t3-co__perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--t3-line); border-radius: 999px; background: var(--t3-surface); font-size: var(--t3-fs-xs); font-weight: 600; color: var(--t3-text-2); }
.t3-co__perks .t3-i { color: var(--t3-primary); }
@media (max-width: 599px) { .t3-co__perks { display: none; } }
.t3-co { display: grid; gap: var(--t3-s3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .t3-co { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--t3-s4); } .t3-co__summary { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--t3-header-h) + 12px); } .t3-co__main { grid-column: 1; grid-row: 1; } }
.t3-co__h { font-size: var(--t3-fs-md); padding: var(--t3-s3) var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-co__sumtoggle { display: flex; align-items: center; gap: var(--t3-s2); width: 100%; min-height: 52px; padding: 0 var(--t3-s4); border: 1px solid var(--t3-line); border-radius: var(--t3-radius); background: var(--t3-primary-50); font-weight: 600; text-align: left; }
.t3-co__sumtoggle span { flex: 1; }
.t3-co__sumtoggle strong { color: var(--t3-price); }
.t3-co__sumtoggle[aria-expanded="true"] .t3-i:last-child { transform: rotate(180deg); }
.t3-co__sumbody { margin-top: var(--t3-s2); }
.js .t3-co__sumbody { display: none; }
.js .t3-co__sumtoggle[aria-expanded="true"] + .t3-co__sumbody { display: block; }
@media (min-width: 1024px) { .t3-co__sumtoggle { display: none; } .js .t3-co__sumbody { display: block; margin-top: 0; } }
.t3-co__sumbody > .t3-sumrow, .t3-co__totals { padding: var(--t3-s2) var(--t3-s4); }
#t3-oit > .t3-sumrow { padding: var(--t3-s2) var(--t3-s4); border-top: 1px solid var(--t3-line); }
.t3-co__totals { display: grid; gap: 6px; border-top: 1px solid var(--t3-line); }
.t3-co__trust { display: flex; align-items: center; gap: 8px; margin: 0; padding: var(--t3-s3) var(--t3-s4); font-size: var(--t3-fs-xs); color: var(--t3-success-ink); background: var(--t3-success-50); border-radius: 0 0 var(--t3-radius) var(--t3-radius); }

.t3-oit { max-height: 360px; overflow: auto; }
.t3-oit__line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--t3-s3); padding: var(--t3-s3) var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-oit__line:last-child { border-bottom: 0; }
.t3-oit__line img { width: 56px; height: 56px; border-radius: var(--t3-radius); object-fit: cover; border: 1px solid var(--t3-line); }
.t3-oit__line--static { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; padding-inline: 0; }
.t3-oit__line--static img { width: 48px; height: 48px; }
.t3-oit__info { display: grid; gap: 4px; min-width: 0; align-content: start; }
.t3-oit__name { font-size: var(--t3-fs-sm); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t3-oit__attrs { font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-oit__row { display: flex; align-items: center; gap: var(--t3-s2); flex-wrap: wrap; }
.t3-oit__sum { margin-left: auto; }
.t3-oit__remove { width: 36px; height: 36px; color: var(--t3-muted); }
.t3-oit__remove:hover { color: var(--t3-sale); }
[data-t3-oit-wrap][aria-busy="true"] { opacity: .5; pointer-events: none; }

.t3-coupon { display: grid; gap: var(--t3-s2); padding: var(--t3-s3) var(--t3-s4); border-top: 1px dashed var(--t3-line-2); }
.t3-coupon__applied { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--t3-radius); background: var(--t3-success-50); color: var(--t3-success-ink); font-size: var(--t3-fs-sm); }
.t3-coupon__applied .t3-btn { margin-left: auto; }
.t3-coupon__form .t3-input { text-transform: uppercase; }
.t3-coupon [data-t3-coupon-msg].is-error { color: #B91C1C; }
.t3-coupon [data-t3-coupon-msg].is-ok { color: var(--t3-success-ink); }

.t3-co__main { display: grid; gap: var(--t3-s3); min-width: 0; }
/* one-page sections: always open; the header tick turns green when the section is complete */
.t3-cosec__head { display: flex; align-items: center; gap: var(--t3-s3); padding: var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-cosec__head > div { flex: 1; min-width: 0; }
.t3-cosec__head h2 { font-size: var(--t3-fs-md); margin: 0; }
.t3-cosec__head p { margin: 2px 0 0; font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-cosec__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--t3-radius); background: var(--t3-primary-50); color: var(--t3-primary); }
.t3-cosec__ok { color: var(--t3-line-2); transition: color var(--t3-fast, .15s); }
.t3-cosec.is-ok .t3-cosec__ok { color: var(--t3-success-ink); }
.t3-cosec__body { display: grid; gap: var(--t3-s4); padding: var(--t3-s4); }
.t3-cogrid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .t3-cogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t3-cogrid__full { grid-column: 1 / -1; } }
.t3-cofield { position: relative; }
.t3-cofield .t3-input, .t3-cofield .t3-textarea { padding-left: 40px; padding-right: 36px; }
.t3-cofield__i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--t3-muted); pointer-events: none; }
.t3-cofield--area .t3-cofield__i { top: 14px; transform: none; }
.t3-cofield__ok { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--t3-success-ink); opacity: 0; transition: opacity .15s; pointer-events: none; }
.t3-cofield--area .t3-cofield__ok { top: 14px; transform: none; }
.t3-cofield.is-ok .t3-cofield__ok { opacity: 1; }
.t3-cofield.is-ok .t3-input, .t3-cofield.is-ok .t3-textarea { border-color: color-mix(in srgb, var(--t3-success-ink) 55%, var(--t3-line-2)); }
.t3-co__count { justify-self: end; }
.t3-ship__radio { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 2px solid var(--t3-line-2); background: var(--t3-surface); }
.t3-ship__opt input:checked + .t3-ship__card .t3-ship__radio, .t3-ship__radio.is-on { border: 5px solid var(--t3-navy-900); }
.t3-co__sumcta { display: none; gap: var(--t3-s2); padding: var(--t3-s3) var(--t3-s4); border-top: 1px solid var(--t3-line); }
.t3-co__ready { margin: 0; text-align: center; font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-co__ready.is-ok { color: var(--t3-success-ink); font-weight: 600; }
.t3-co__help { display: none; align-items: center; gap: var(--t3-s3); margin-top: var(--t3-s3); padding: var(--t3-s3) var(--t3-s4); }
.t3-co__help > .t3-i { color: var(--t3-primary); }
.t3-co__help div { display: grid; gap: 2px; font-size: var(--t3-fs-sm); }
.t3-co__help span { display: flex; gap: var(--t3-s3); }
.t3-co__help a { color: var(--t3-info); font-weight: 600; }
/* phones: fixed pay bar; desktop: confirm lives in the sticky summary */
.t3-copay { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--t3-z-tray); display: flex; align-items: center; gap: var(--t3-s3); padding: var(--t3-s2) var(--t3-s3) calc(var(--t3-s2) + env(safe-area-inset-bottom)); background: var(--t3-surface); border-top: 1px solid var(--t3-line); box-shadow: 0 -6px 20px rgb(11 21 48 / .08); }
.t3-copay__sum { flex: 1; display: grid; line-height: 1.2; }
.t3-copay__sum small { font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.t3-copay__sum strong { font-size: var(--t3-fs-lg); color: var(--t3-price); }
body:has(.t3-copay) { padding-bottom: 76px; }
body:has(.t3-copay) .t3-fab, body:has(.t3-copay) .t3-totop { bottom: 92px; }
@media (max-width: 1023.98px) { body:has(.t3-copay) .t3-tray { display: none; } } /* compare tray would sit on the pay bar */
@media (min-width: 1024px) {
  .t3-copay { display: none; }
  body:has(.t3-copay) { padding-bottom: 0; }
  body:has(.t3-copay) .t3-fab, body:has(.t3-copay) .t3-totop { bottom: 20px; }
  .t3-co__sumcta { display: grid; }
  .t3-co__help { display: flex; }
}
.t3-field [data-t3-count] { justify-self: end; }
.t3-field .t3-error:empty { display: none; }

.t3-ship { display: grid; gap: var(--t3-s2); border: 0; margin: 0; padding: 0; min-width: 0; }
@media (min-width: 768px) { .t3-ship { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t3-ship__opt { position: relative; }
.t3-ship__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.t3-ship__card { display: flex; align-items: center; gap: var(--t3-s3); min-height: 64px; padding: var(--t3-s3) var(--t3-s4); border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius); background: var(--t3-surface); }
.t3-ship__text { flex: 1; display: grid; min-width: 0; }
.t3-ship__text small { color: var(--t3-muted); font-size: var(--t3-fs-xs); }
.t3-ship__price { color: var(--t3-price); }
.t3-ship__opt input:checked + .t3-ship__card { border-color: var(--t3-navy-900); box-shadow: inset 0 0 0 1px var(--t3-navy-900); background: var(--t3-surface-2); }
.t3-ship__opt input:focus-visible + .t3-ship__card { box-shadow: var(--t3-ring); }
.t3-pay-opt { display: flex; align-items: center; gap: var(--t3-s3); padding: var(--t3-s3) var(--t3-s4); border: 1px solid var(--t3-navy-900); box-shadow: inset 0 0 0 1px var(--t3-navy-900); border-radius: var(--t3-radius); background: var(--t3-surface-2); }
.t3-pay-opt div { flex: 1; display: grid; }
.t3-pay-opt small { color: var(--t3-muted); font-size: var(--t3-fs-xs); }
.t3-pay-opt__check { color: var(--t3-success-ink); }
.t3-co__confirm { white-space: normal; }
.t3-co__terms { text-align: center; }
.t3-co__terms a { color: var(--t3-info); text-decoration: underline; }

.t3-done { display: grid; justify-items: center; gap: var(--t3-s3); padding: var(--t3-s8) var(--t3-s4); text-align: center; margin-top: var(--t3-s3); }
.t3-done__icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--t3-success-ink); color: #fff; box-shadow: 0 0 0 10px var(--t3-success-50); animation: t3-pop .5s var(--t3-ease); }
.t3-done__icon .t3-i { width: 40px; height: 40px; stroke-width: 2.5; }
.t3-done h1 { font-size: var(--t3-fs-xl); }
.t3-done__facts { display: grid; gap: var(--t3-s2); width: min(460px, 100%); margin: 0; padding: var(--t3-s3) var(--t3-s4); border-radius: var(--t3-radius); background: var(--t3-surface-2); border: 1px solid var(--t3-line); }
.t3-done__facts div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--t3-s2); }
.t3-done__facts dt { color: var(--t3-muted); font-size: var(--t3-fs-sm); }
.t3-done__facts dd { margin: 0; display: flex; align-items: center; gap: var(--t3-s2); }
.t3-done__facts dd strong { font-size: var(--t3-fs-lg); }
.t3-done__next { display: grid; gap: var(--t3-s2); text-align: left; width: min(460px, 100%); counter-reset: n; }
.t3-done__next li { display: flex; align-items: center; gap: var(--t3-s3); font-size: var(--t3-fs-sm); }
.t3-done__next .t3-i { color: var(--t3-primary-600); }
.t3-done__actions { justify-content: center; }

.t3-track__search { display: grid; gap: var(--t3-s3); grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--t3-s4); margin-bottom: var(--t3-s3); }
.t3-track__search h1 { font-size: var(--t3-fs-lg); }
.t3-track__search p { margin: 0; }
.t3-track__search form { grid-column: 1 / -1; max-width: 520px; }
@media (min-width: 1024px) { .t3-track__search { grid-template-columns: auto minmax(0, 1fr) minmax(0, 420px); } .t3-track__search form { grid-column: auto; } }
.t3-order { margin-bottom: var(--t3-s3); }
.t3-order__head { display: flex; align-items: center; justify-content: space-between; gap: var(--t3-s3); padding: var(--t3-s3) var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-order__head h2 { font-size: var(--t3-fs-md); }
.t3-order__body { display: grid; gap: var(--t3-s4); padding: var(--t3-s4); }
@media (min-width: 1024px) { .t3-order__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.t3-order__who { display: grid; gap: var(--t3-s2); margin: 0; font-size: var(--t3-fs-sm); }
.t3-order__who dt { color: var(--t3-muted); font-size: var(--t3-fs-xs); }
.t3-order__who dd { margin: 0; }
.t3-progress { --c: var(--t3-success-ink); display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); padding: var(--t3-s4) var(--t3-s4) 0; position: relative; }
.t3-progress--warn { --c: var(--t3-warning-ink); }
.t3-progress--bad { --c: #B91C1C; }
.t3-progress li { display: grid; justify-items: center; gap: 6px; font-size: var(--t3-fs-xs); text-align: center; color: var(--t3-muted); position: relative; }
.t3-progress li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: var(--t3-line); z-index: 0; }
.t3-progress li.is-done + li.is-done::before { background: var(--c); }
.t3-progress__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--t3-line); color: var(--t3-text-2); font-weight: 700; }
.t3-progress li.is-done { color: var(--t3-text); font-weight: 600; }
.t3-progress li.is-done .t3-progress__dot { background: var(--c); color: #fff; }

/* 23. Flash sale page ---------------------------------------------------------- */
.t3-flashpage { margin-top: var(--t3-s2); }
.t3-flashpage__banner { width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.t3-flashpage .t3-flash__title { font-size: var(--t3-fs-xl); }
.t3-flashpage__count { margin-left: auto; font-size: var(--t3-fs-sm); font-weight: 600; }

/* 24. Compare -------------------------------------------------------------------- */
.t3-compare { overflow-x: auto; }
.t3-compare__table { min-width: calc(140px + var(--cols) * 200px); table-layout: fixed; font-size: var(--t3-fs-sm); }
.t3-compare__table th, .t3-compare__table td { padding: var(--t3-s3); border-bottom: 1px solid var(--t3-line); vertical-align: top; text-align: left; }
.t3-compare__table tbody th { width: 140px; color: var(--t3-muted); font-weight: 600; background: var(--t3-surface-2); position: sticky; left: 0; z-index: 1; }
.t3-compare__corner { width: 140px; background: var(--t3-surface-2); position: sticky; left: 0; z-index: 1; }
.t3-compare__head { position: relative; font-weight: 400; }
.t3-compare__product { display: grid; gap: var(--t3-s2); margin-bottom: var(--t3-s2); font-weight: 600; }
.t3-compare__product img { width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: var(--t3-radius); border: 1px solid var(--t3-line); }
.t3-compare__remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: var(--t3-surface); border: 1px solid var(--t3-line); border-radius: 50%; }
.t3-compare__table tbody tr:first-child td { color: var(--t3-price); font-weight: 700; font-size: var(--t3-fs-md); }

/* 25. Frequently bought together --------------------------------------------------- */
.t3-fbt { justify-content: space-between; }
.t3-fbt__items { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--t3-s2); }
.t3-fbt__item { width: 132px; display: grid; gap: 4px; font-size: var(--t3-fs-xs); }
.t3-fbt__item label { position: relative; display: block; cursor: pointer; }
.t3-fbt__item img { width: 132px; height: 132px; }
.t3-fbt__item input:not(:checked) + img { opacity: .4; }
.t3-fbt__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t3-fbt__plus { align-self: center; padding-top: 0; margin-top: 50px; }
.t3-fbt__sum strong { font-size: var(--t3-fs-xl); }

/* 26. Content pages ------------------------------------------------------------------ */
.t3-content { display: grid; gap: var(--t3-s3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .t3-content { grid-template-columns: 260px minmax(0, 1fr); gap: var(--t3-s4); } .t3-content__nav { position: sticky; top: calc(var(--t3-header-h) + 12px); } }
.t3-content__nav { display: grid; gap: var(--t3-s3); }
@media (max-width: 1023px) { .t3-content__nav { order: 2; } }
.t3-content__help { display: grid; gap: 6px; padding: var(--t3-s4); font-size: var(--t3-fs-sm); }
.t3-content__help a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--t3-navy-600); }
.t3-content__body { padding: var(--t3-s4); }
@media (min-width: 768px) { .t3-content__body { padding: var(--t3-s6) var(--t3-s8); } }
.t3-content__head { display: flex; align-items: center; gap: var(--t3-s3); margin-bottom: var(--t3-s4); padding-bottom: var(--t3-s4); border-bottom: 1px solid var(--t3-line); }
.t3-content__head h1 { font-size: var(--t3-fs-xl); }

/* ---------- App-style navigation (t3-spa.js) ---------- */
.t3-navbar { position: fixed; inset: 0 auto auto 0; z-index: 9999; width: 100%; height: 3px; pointer-events: none;
  background: var(--t3-primary); box-shadow: 0 0 8px color-mix(in srgb, var(--t3-primary) 60%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.t3-navbar.is-loading { opacity: 1; transform: scaleX(.85); transition: transform 6s cubic-bezier(.08, .7, .2, 1); }
.t3-navbar.is-done { opacity: 0; transform: scaleX(1); transition: transform .18s ease-out, opacity .3s ease .18s; }
.t3-main.is-navigating { opacity: .55; pointer-events: none; transition: opacity .2s ease; }
.t3-main:focus { outline: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) {
  .t3-navbar.is-loading, .t3-navbar.is-done, .t3-main.is-navigating { transition: none; }
}

/* ---------- Card motion: rise in on scroll, fly to cart (t3-widgets.js, t3-shell.js) ---------- */
.t3-card.t3-reveal { opacity: 0; transform: translateY(18px); }
.t3-card.t3-reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--t3-ease) var(--t3-d, 0ms), transform .5s var(--t3-ease) var(--t3-d, 0ms); }
.t3-fly { position: fixed; z-index: 9998; margin: 0; border-radius: var(--t3-radius); object-fit: cover; pointer-events: none; box-shadow: var(--t3-shadow-2); }
@media (prefers-reduced-motion: reduce) {
  .t3-card, .t3-card:hover, .t3-card:active { transform: none; }
  .t3-card.t3-reveal { opacity: 1; transform: none; }
  .t3-card__buy::after { display: none; }
  .t3-card__buy svg { animation: none; }
  .t3-card__wish.is-pop svg, .t3-card__add.is-added { animation: none; }
}

/* Quantity-type attribute ("3 pcs"): quantity follows the option, no +/- (CartLineAttributes) */
.t3-qty--locked { background: var(--t3-surface-2); }
.t3-qty--locked output { min-width: 48px; min-height: 40px; padding-inline: var(--t3-s3); }

/* Cart line attribute picker (frontend/partials/cart-line-options) */
.cart-opt { margin-top: 4px; display: grid; gap: 4px; }
.cart-opt__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cart-opt__label { font-size: var(--t3-fs-xs); color: var(--t3-muted); }
.cart-opt__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cart-opt__chip { position: relative; cursor: pointer; }
.cart-opt__chip input { position: absolute; opacity: 0; pointer-events: none; }
.cart-opt__chip span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius-sm); background: var(--t3-surface); font-size: var(--t3-fs-xs); font-weight: 600; }
.cart-opt__chip input:checked + span { border-color: var(--t3-navy-900); background: var(--t3-navy-900); color: var(--t3-on-header); }
.cart-opt__chip input:focus-visible + span { box-shadow: var(--t3-ring); }
.cart-opt__select { min-height: 32px; padding: 0 8px; border: 1px solid var(--t3-line-2); border-radius: var(--t3-radius-sm); background: var(--t3-surface); font: inherit; font-size: var(--t3-fs-xs); }
.t3-qty--sm.t3-qty--locked output { min-height: 32px; min-width: 40px; }