/* ============================================================
   Inova Technology BD — Design system / custom components
   Inspired by inovatechnology.com.bd — Inter typeface, indigo primary
   ============================================================ */
:root {
  --primary: #3749BB;
  --primary-dark: #2A379A;
  --primary-light: #ECEEFF;
  --secondary: #17A2B8;
  --accent: #FA308B;
  --success: #28A745;
  --danger: #DC3545;
  --warning: #FFC107;
  --dark: #1F2937;
  --text: #374151;
  --muted: #6B7280;
  --muted-2: #9CA3AF;
  --bg: #F8F9FB;
  --surface: #FFFFFF;
  --border: #E5E7EB;
  --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.12);
  --container: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Bengali', sans-serif;
  background: var(--surface); color: var(--text); margin: 0;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
  /* Sticky footer. A short page — the account dashboard, an empty cart, order
     tracking — is shorter than the viewport, so the document ended where its
     content ended and the body's own white background showed as a band beneath
     the dark footer. Letting the page area absorb the spare height pushes the
     footer to the bottom instead. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* flex:1 grows into the spare height, flex-shrink:0 keeps a tall page from being
   squeezed. Everything after this in the body is position:fixed or display:none
   (drawer, overlay, back-to-top, WhatsApp button, mobile bottom bar), so those
   are not flex items and this is the only rule the change needs. */
body > main { flex: 1 0 auto; }
h1,h2,h3,h4,h5,h6 { margin: 0; color: #111827; font-weight: 700; line-height: 1.3; }
p { margin: 0; color: var(--muted); }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input,select,textarea { font-family: inherit; font-size: 14px; color: var(--text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ic { display: inline-flex; width: 1em; height: 1em; vertical-align: -2px; }
.ic svg { width: 1em; height: 1em; display: block; }

.tl-container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.tl-hide { display: none !important; }

/* ---------------- Top bar ---------------- */
.tl-topbar { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 12.5px; }
.tl-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.tl-topbar-msg { display: flex; align-items: center; gap: 7px; opacity: .95; }
.tl-topbar-msg .ic { font-size: 14px; }
.tl-topbar-links { display: flex; align-items: center; gap: 18px; }
.tl-topbar-links a { opacity: .9; transition: opacity .2s; }
.tl-topbar-links a:hover { opacity: 1; text-decoration: underline; }
.tl-topbar-phone { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tl-topbar-phone .ic { font-size: 14px; }

/* ---------------- Header ---------------- */
.tl-sticky-wrap { position: sticky; top: 0; z-index: 900; background: #fff; transition: box-shadow .25s; }
.tl-sticky-wrap--scrolled { box-shadow: 0 6px 22px rgba(17,24,39,.12); }
.tl-main-header { position: relative; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .3s ease, box-shadow .3s; }
.tl-header-hide { transform: translateY(-100%); }
.tl-header-inner { display: flex; align-items: center; gap: 22px; padding: 14px 20px; max-width: var(--container); margin: 0 auto; }
.tl-header-logo { flex: 0 0 auto; display: flex; align-items: center; }
.tl-logo-img { height: 60px; width: auto; display: block; }
.tl-logo-card { display: inline-block; background: #fff; border-radius: 10px; padding: 6px 10px; line-height: 0; }
.tl-logo-card .tl-logo-img { height: 40px; }
.tl-mobile-logo .tl-logo-img { height: 40px; }
.tl-header-search { flex: 1 1 auto; max-width: 820px; position: relative; }
.tl-search-wrap { display: flex; align-items: center; height: 48px; border: 2px solid var(--primary); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.tl-search-ic { display: flex; padding: 0 4px 0 14px; color: var(--muted-2); font-size: 17px; }
.tl-search-input { flex: 1; border: none; height: 100%; padding: 0 12px; background: transparent; outline: none; font-size: 14.5px; min-width: 0; }
.tl-search-btn { height: 100%; padding: 0 26px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.tl-search-btn:hover { filter: brightness(1.08); }
.tl-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tl-action-btn { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; transition: all .2s; position: static; border: 1px solid var(--border); background: #fff; }
.tl-action-btn:hover { background: var(--primary-light); border-color: #c9d2ff; box-shadow: var(--shadow-sm); }
.tl-action-ic { position: relative; font-size: 19px; color: var(--primary); display: flex; width: 38px; height: 38px; border-radius: 50%; background: var(--primary-light); align-items: center; justify-content: center; }
.tl-action-txt { display: flex; flex-direction: column; line-height: 1.25; }
.tl-action-txt small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.tl-action-txt strong { font-size: 13px; color: #111827; }
.tl-action-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

/* mini cart */
.tl-mini-cart { position: relative; }
.tl-minicart-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 340px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: 16px; z-index: 950; }
.tl-mini-cart:hover .tl-minicart-panel, .tl-minicart-panel:focus-within { }
.tl-mini-cart:hover .tl-minicart-panel.tl-hide { display: none; }
.tl-mini-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f3f7; align-items: center; }
.tl-mini-thumb { width: 52px; height: 52px; object-fit: contain; background: #f3f4f6; border-radius: 8px; }
.tl-mini-info { flex: 1; min-width: 0; }
.tl-mini-name { font-size: 12.5px; font-weight: 600; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-mini-name:hover { color: var(--primary); }
.tl-mini-row { display: flex; justify-content: space-between; margin-top: 3px; font-size: 12px; }
.tl-mini-price { font-weight: 700; color: var(--primary); }
.tl-mini-qty { color: var(--muted); }
.tl-mini-remove { color: var(--muted-2); padding: 4px; border-radius: 6px; }
.tl-mini-remove:hover { color: var(--danger); background: #fef2f3; }
.tl-mini-foot { padding-top: 12px; display: grid; gap: 8px; }
.tl-mini-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tl-mini-total strong { font-size: 16px; color: var(--primary); }
.tl-minicart-empty { text-align: center; padding: 18px 8px; }
.tl-minicart-empty p { margin: 8px 0 12px; font-size: 13.5px; }

/* ---------------- Buttons ---------------- */
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; transition: all .22s ease; white-space: nowrap; border: 1px solid transparent; }
.tl-btn:disabled { opacity: .5; cursor: not-allowed; }
.tl-btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 2px 6px rgba(55,73,187,.28); }
.tl-btn-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(55,73,187,.32); }
.tl-btn-buy { background: linear-gradient(135deg, var(--accent), #d91d72); color: #fff; box-shadow: 0 2px 6px rgba(250,48,139,.26); }
.tl-btn-buy:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tl-btn-ghost { background: #fff; border-color: var(--border); color: var(--text); }
.tl-btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.tl-btn-ghost.is-active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.tl-btn-block { width: 100%; }
.tl-btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.tl-link-btn { color: var(--primary); font-weight: 600; font-size: 13px; }
.tl-link-btn:hover { text-decoration: underline; }

/* Small muted body text. Exists because a handful of views carried leftover
   Tailwind utilities (`text-sm text-neutral-600`) from the previous theme;
   the storefront is otherwise styled entirely with the tl-* vocabulary and
   CSS custom properties, so the CDN is not needed. */
.tl-note { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.tl-note + .tl-note { margin-top: 7px; }
.tl-note-muted { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.tl-note-muted + .tl-note-muted { margin-top: 7px; }

/* ---------------- Navbar / mega menu ---------------- */
.tl-navbar { background: #fff; border-bottom: 1px solid var(--border); }
.tl-nav-inner { display: flex; align-items: center; gap: 14px; max-width: var(--container); margin: 0 auto; padding: 0 20px; position: relative; }
.tl-cat-menu { position: relative; flex: 0 0 auto; }
.tl-cat-btn { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; box-shadow: var(--shadow-md); transition: all .25s; }
.tl-cat-btn:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.tl-cat-btn .ic:last-child { font-size: 12px; opacity: .8; }
.tl-cat-dropdown { position: absolute; top: calc(100% + 10px); left: 0; width: 290px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: var(--r); box-shadow: var(--shadow-xl); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .22s; z-index: 900; }
.tl-cat-menu--open .tl-cat-dropdown, .tl-cat-menu:hover .tl-cat-dropdown, .tl-cat-menu:focus-within .tl-cat-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.tl-cat-scroll { max-height: 460px; overflow-y: auto; }
.tl-cat-dropdown a { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 13.5px; font-weight: 500; color: #333; }
.tl-cat-dropdown a .ic { font-size: 11px; color: var(--muted-2); }
.tl-cat-dropdown a span { flex: 1; }
.tl-cat-dropdown a small { color: var(--muted-2); font-size: 11.5px; }
.tl-cat-dropdown a:hover { background: var(--primary-light); color: var(--primary); }
.tl-cat-dropdown a:hover .ic, .tl-cat-dropdown a:hover small { color: var(--primary); }

.tl-nav-list { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tl-nav-list::-webkit-scrollbar { display: none; }
.tl-nav-megas { position: absolute; top: 100%; left: 0; right: 0; height: 0; pointer-events: none; }
.tl-nav-megas .tl-mega { pointer-events: auto; }
.tl-nav-item { position: relative; }
.tl-nav-item > a { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 62px; font-weight: 600; font-size: 14px; color: #1f2937; white-space: nowrap; transition: color .2s; position: relative; }
.tl-nav-item > a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--primary); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform .25s; }
.tl-nav-item:hover > a, .tl-nav-item > a:focus { color: var(--primary); }
.tl-nav-item:hover > a::after { transform: scaleX(1); }
.tl-nav-item.has-mega > a { color: #1f2937; }
.tl-nav-caret { font-size: 11px; opacity: .6; }
.tl-nav-item:hover .tl-nav-caret { transform: rotate(180deg); }
.tl-nav-item .ic { font-size: 15px; color: var(--primary); }

.tl-mega { position: absolute; top: 100%; left: 0; width: 720px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-xl); padding: 20px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s, transform .22s, visibility .22s; z-index: 920; }
.tl-mega.tl-mega--show { opacity: 1; visibility: visible; transform: translateY(0); }
.tl-mega-grid { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 22px; }
.tl-mega-head { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 700; margin-bottom: 10px; }
.tl-mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.tl-mega-list a { font-size: 13px; padding: 5px 8px; border-radius: 6px; color: #444; display: block; }
.tl-mega-list a:hover { background: var(--primary-light); color: var(--primary); }
.tl-mega-list--brands { grid-template-columns: 1fr; }
/* The featured tile is the right-hand rail, not "whatever track is left". The
   grid is three fixed tracks and Blade now always renders all three columns, but
   pinning the rail means the layout holds even if a column is ever dropped
   again — otherwise auto-placement slides the tile into track 2. */
.tl-mega-promo { grid-column: 3; }
.tl-mega-promo .tl-mega-feature { display: block; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg); text-align: center; }
.tl-mega-promo .tl-mega-feature img { margin: 0 auto; }
.tl-mega-promo .tl-mega-feature span { display: block; padding: 8px; font-size: 12.5px; font-weight: 700; color: var(--primary); }

/* ---------------- Mobile header ---------------- */
#tl-mobile-header { display: none; }
.tl-mobile-bar { display: none; }
.tl-bottom-nav { display: none; }
.tl-mob-btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #1f2937; border-radius: 8px; }
.tl-mob-btn:hover { background: var(--primary-light); color: var(--primary); }
.tl-mob-actions { display: flex; align-items: center; gap: 2px; }
.tl-mob-cart { position: relative; }
.tl-mob-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Inline mobile search box (below the mobile main bar) */
.tl-mobile-search { display: none; }

/* ---------------- Mobile search popup ---------------- */
.tl-search-popup { position: fixed; inset: 0; z-index: 1060; background: rgba(17,24,39,.5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.tl-search-popup--open { opacity: 1; visibility: visible; }
.tl-search-popup-sheet { background: #fff; border-radius: 0 0 18px 18px; box-shadow: var(--shadow-xl); max-height: 84vh; display: flex; flex-direction: column; transform: translateY(-14px); transition: transform .28s cubic-bezier(.4,0,.2,1); }
.tl-search-popup--open .tl-search-popup-sheet { transform: translateY(0); }
.tl-search-popup-head { display: flex; align-items: center; justify-content: flex-end; padding: 14px 16px 0; }
.tl-search-popup-head strong { font-size: 15px; }
.tl-search-popup-close { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--muted); }
.tl-search-popup-close:hover { background: var(--primary-light); color: var(--primary); }
.tl-search-popup-body { padding: 10px 16px 16px; }
.tl-search-popup .tl-suggest { position: static; max-height: 54vh; margin-top: 10px; box-shadow: none; }
.tl-search-popup .tl-search-btn { padding: 0 16px; }

/* ---------------- Drawer / overlay ---------------- */
.tl-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s; backdrop-filter: blur(2px); }
.tl-overlay--show { opacity: 1; visibility: visible; }
.tl-drawer { position: fixed; top: 0; left: 0; width: min(380px, 86vw); height: 100vh; background: #fff; z-index: 1001; transform: translateX(-102%); transition: transform .32s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
.tl-drawer--open { transform: translateX(0); }
.tl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); position: relative; overflow: hidden; flex: 0 0 auto; }
.tl-drawer-head::before { content: ''; position: absolute; right: -46px; top: -46px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.09); }
.tl-drawer-head::after { content: ''; position: absolute; left: -34px; bottom: -62px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.06); }
.tl-drawer-logo { position: relative; z-index: 1; }
.tl-drawer-close { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 10px; color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.tl-drawer-close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }
.tl-drawer-body { flex: 1; overflow-y: auto; padding: 10px 0 26px; }
.tl-drawer-sec { padding: 6px 16px 4px; }
.tl-drawer-sec + .tl-drawer-sec { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 4px; }
.tl-drawer-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted-2); font-weight: 700; padding: 8px 4px; }
.tl-drawer-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-weight: 600; font-size: 14.5px; color: #1f2937; border-radius: 11px; transition: background .18s, color .18s; }
.tl-drawer-nav a:hover, .tl-drawer-nav a.tl-drawer-active { background: var(--primary-light); color: var(--primary); }
.tl-drawer-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; transition: background .18s; }
.tl-drawer-nav a:hover .tl-drawer-ic, .tl-drawer-nav a.tl-drawer-active .tl-drawer-ic { background: #fff; }
.tl-drawer-cats .tl-acc-item + .tl-acc-item { margin-top: 2px; }
.tl-acc-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-weight: 600; font-size: 14.5px; color: #1f2937; border-radius: 11px; text-align: left; transition: background .18s, color .18s; }
.tl-acc-toggle:hover { background: var(--primary-light); }
.tl-acc-name { flex: 1; min-width: 0; }
.tl-acc-count { font-size: 11px; color: var(--muted-2); font-weight: 700; background: var(--bg); padding: 2px 9px; border-radius: 20px; transition: background .18s, color .18s; }
.tl-acc-chevron { font-size: 12px; color: var(--muted-2); transition: transform .25s, color .18s; }
.tl-acc-open > .tl-acc-toggle { color: var(--primary); background: var(--primary-light); }
.tl-acc-open > .tl-acc-toggle .tl-acc-count { background: #fff; color: var(--primary); }
.tl-acc-open > .tl-acc-toggle .tl-acc-chevron { transform: rotate(180deg); color: var(--primary); }
.tl-acc-sub { display: none; padding: 4px 0 10px; margin: 2px 0 4px 18px; border-left: 2px solid var(--primary-light); }
.tl-acc-open > .tl-acc-sub { display: block; }
.tl-acc-sub a { display: block; padding: 7px 12px; font-size: 13px; color: var(--muted); border-radius: 7px; transition: color .18s, background .18s; }
.tl-acc-sub a:hover { color: var(--primary); background: var(--primary-light); }
.tl-drawer-foot { flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: grid; gap: 10px; background: #fff; }
.tl-drawer-foot .tl-btn { height: 44px; }
.tl-drawer-call { display: flex; align-items: center; gap: 11px; color: var(--text); }
.tl-drawer-call .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.tl-drawer-call span { display: flex; flex-direction: column; line-height: 1.3; }
.tl-drawer-call small { font-size: 11px; color: var(--muted); }
.tl-drawer-call strong { font-size: 14px; }
.tl-drawer-call:hover strong { color: var(--primary); }
.tl-drawer-social { display: flex; gap: 8px; }
.tl-drawer-social a { width: 40px; height: 40px; border-radius: 11px; background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 17px; transition: all .2s; }
.tl-drawer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* ---------------- Hero slider ---------------- */
.tl-hero { position: relative; }
.tl-slide { display: none; position: relative; }
.tl-slide--active { display: block; }
.tl-slide img { width: 100%; height: clamp(220px, 32vw, 460px); object-fit: cover; }
.tl-slider-prev, .tl-slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(17,24,39,.55); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 3; border: 1px solid rgba(255,255,255,.2); transition: background .2s; }
.tl-slider-prev:hover, .tl-slider-next:hover { background: rgba(17,24,39,.85); }
.tl-slider-prev { left: 16px; } .tl-slider-next { right: 16px; }
.tl-slider-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
.tl-slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.55); transition: all .25s; }
.tl-dot--active { width: 28px; border-radius: 6px; background: #fff; }

/* ---------------- Trust strip ---------------- */
.tl-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 22px 0; }
.tl-trust-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tl-trust-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.tl-trust-item h6 { font-size: 14px; }
.tl-trust-item small { font-size: 12px; color: var(--muted); }

/* ---------------- Sections ---------------- */
/* padding-block, not the shorthand: .tl-sec is paired with .tl-container in 17
   places, and a `padding: 46px 0` shorthand overwrote the container's side
   gutters to zero — every home page section sat flush against the viewport. */
.tl-sec { padding-block: 46px; }
.tl-sec--gray { background: var(--bg); }
.tl-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tl-sec-title h2 { font-size: 26px; position: relative; display: inline-block; padding-left: 14px; }
.tl-sec-title h2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--primary), var(--accent)); }
.tl-sec-title p { font-size: 13.5px; margin-top: 5px; }
.tl-sec-all { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13.5px; color: var(--primary); white-space: nowrap; }
.tl-sec-all:hover { gap: 9px; color: var(--accent); }

/* ---------------- Grid ---------------- */
.tl-grid { display: grid; gap: 18px; }
#tl-cat-shortcuts { padding: 0 10px; }
.tl-sec .tl-grid { padding: 0 10px; }
.tl-sec-head { padding: 0 10px; }
.tl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tl-grid--5 { grid-template-columns: repeat(5, 1fr); }
.tl-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* ---------------- Category shortcut cards ---------------- */
.tl-cat-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 14px 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .28s, box-shadow .28s, border-color .28s; }
.tl-cat-card::before { content: ''; position: absolute; inset: 0; background: var(--cat, #3749BB); opacity: .045; transition: opacity .28s; }
.tl-cat-card > * { position: relative; }
.tl-cat-card:hover { transform: translateY(-5px); border-color: #c3cdf5; border-color: color-mix(in srgb, var(--cat, #3749BB) 42%, var(--border)); box-shadow: 0 16px 34px rgba(55,73,187,.16); box-shadow: 0 16px 34px color-mix(in srgb, var(--cat, #3749BB) 18%, transparent); }
.tl-cat-card:hover::before { opacity: .12; }
.tl-cat-glow { position: absolute; top: -38px; right: -38px; width: 118px; height: 118px; border-radius: 50%; background: var(--cat, #3749BB); opacity: .09; transition: transform .35s ease; }
.tl-cat-card:hover .tl-cat-glow { transform: scale(1.28); }
.tl-cat-media { width: 78px; height: 78px; border-radius: 22px; background: #fff; box-shadow: 0 6px 16px rgba(17,24,39,.09); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 9px; transition: transform .28s ease; }
.tl-cat-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tl-cat-card:hover .tl-cat-media { transform: translateY(-3px) scale(1.06); }
.tl-cat-info { text-align: center; }
.tl-cat-card h6 { font-size: 14px; font-weight: 700; line-height: 1.35; }
.tl-cat-count { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 3px 11px; border-radius: 20px; background: var(--bg); border: 1px solid var(--border); }
.tl-cat-count .ic { font-size: 12px; color: var(--cat, #3749BB); }
.tl-cat-arrow { position: absolute; bottom: 12px; right: 14px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cat, #3749BB); font-size: 12px; background: var(--bg); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.tl-cat-card:hover .tl-cat-arrow { opacity: 1; transform: translateX(0); }

/* ---------------- Product card ---------------- */
.tl-product-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: all .28s ease; box-shadow: var(--shadow-sm); position: relative; }
.tl-product-card:hover { box-shadow: 0 16px 34px rgba(15,23,42,.13); border-color: #d6dcf2; transform: translateY(-3px); }
.tl-product-media { position: relative; background: #f3f4f6; }
.tl-product-img-wrap { display: flex; align-items: center; justify-content: center; height: 190px; padding: 14px; }
.tl-product-img { max-height: 100%; width: auto; object-fit: contain; transition: transform .4s ease; }
.tl-product-card:hover .tl-product-img { transform: scale(1.07); }
.tl-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tl-badge { font-size: 10.5px; font-weight: 700; color: #fff; padding: 4px 8px; border-radius: 5px; letter-spacing: .3px; text-transform: uppercase; }
.tl-badge--new { background: #0ea5e9; }
.tl-badge--sale { background: var(--danger); }
.tl-badge--hot { background: linear-gradient(135deg, #f97316, #ea580c); }
.tl-badge--popular { background: #7c3aed; }
.tl-badge--official { background: var(--success); }
.tl-badge--limited { background: #d97706; }
.tl-badge--out { background: #6b7280; }
.tl-badge--off { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.tl-wish-btn { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: var(--shadow-sm); transition: all .2s; }
.tl-wish-btn:hover { background: #fff; color: var(--accent); transform: scale(1.1); }
.tl-wish-btn.is-active { color: var(--accent); }
.tl-quick-btn { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; height: 34px; border-radius: 8px; background: rgba(17,24,39,.78); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: translateY(8px); transition: all .28s; backdrop-filter: blur(3px); }
.tl-product-card:hover .tl-quick-btn { opacity: 1; transform: translateY(0); }
.tl-quick-btn:hover { background: var(--primary); }
.tl-product-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.tl-product-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tl-product-brand { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .4px; }
.tl-product-brand:hover { color: var(--accent); }
.tl-product-sku { font-size: 10.5px; color: var(--muted-2); }
.tl-product-name { font-size: 13.5px; font-weight: 600; line-height: 1.45; margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.tl-product-name a:hover { color: var(--primary); }
.tl-rating-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tl-stars { display: inline-flex; gap: 1px; }
.tl-star-wrap { position: relative; display: inline-block; }
.tl-star-bg { color: #e5e7eb; }
.tl-star-bg svg, .tl-star-fg svg { width: 100%; height: 100%; }
.tl-star-fg { position: absolute; inset: 0; overflow: hidden; color: #f5a623; }
.tl-rating-count { font-size: 11.5px; color: var(--muted); }
.tl-price-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.tl-price-current { font-size: 17px; font-weight: 800; color: var(--primary); }
.tl-price-original { font-size: 12.5px; color: var(--muted-2); }
.tl-save-badge { font-size: 10px; font-weight: 700; color: var(--success); background: #ecfdf3; padding: 2px 7px; border-radius: 5px; }
.tl-stock-row { margin-top: 7px; margin-bottom: 10px; }
.tl-stock { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--success); }
.tl-stock .ic { font-size: 13px; }
.tl-stock--low { color: #d97706; }
.tl-stock--out { color: #ef4444; }
/* Flex, not grid. Both buttons live in ONE <form>, so a grid here hands that
   form a single cell: the second column stays empty and the two buttons wrap
   inside the first. The form is a flex child of the row and a flex container for
   its own buttons, which is what actually puts them side by side. */
.tl-card-actions { display: flex; gap: 7px; }
.tl-card-actions form { display: flex; gap: 7px; flex: 1; min-width: 0; }
.tl-card-actions .tl-btn { height: 36px; font-size: 12.5px; padding: 0 8px; min-width: 0; }
.tl-card-actions .tl-btn-add { flex: 1.4; }
.tl-card-actions .tl-btn-buy { flex: 1; }
.tl-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f3f7; }
.tl-foot-btn { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px 2px; border-radius: 6px; }
.tl-foot-btn:hover { color: var(--primary); background: var(--primary-light); }
.tl-foot-btn.is-active { color: var(--primary); }
.tl-foot-btn .ic { font-size: 14px; }
.tl-foot-divider { width: 1px; height: 14px; background: var(--border); }
.tl-foot-warranty { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); }
.tl-foot-warranty .ic { font-size: 12px; color: var(--primary); }

/* ---------------- Brand card ---------------- */
.tl-brand-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; text-align: center; box-shadow: 0 8px 20px rgba(15,23,42,.05); transition: all .25s; }
.tl-brand-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(37,99,235,.13); border-color: #93c5fd; }
.tl-brand-media { height: 84px; display: flex; align-items: center; justify-content: center; border: 1px solid #eef2f7; border-radius: var(--r); background: linear-gradient(180deg, #fff, #f8fbff); overflow: hidden; }
.tl-brand-media img { max-height: 58px; width: auto; object-fit: contain; }
.tl-brand-name { font-size: 14px; margin: 10px 0 2px; }
.tl-brand-card small { font-size: 11.5px; color: var(--muted); }

/* ---------------- Group deals ---------------- */
.tl-deal-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.tl-deal-card:hover { box-shadow: 0 18px 38px rgba(15,23,42,.15); transform: translateY(-4px); }
.tl-deal-media { position: relative; background: linear-gradient(135deg, #eef0ff, #fdf2f8); height: 196px; display: flex; align-items: center; justify-content: center; }
.tl-deal-media img { max-height: 168px; object-fit: contain; }
.tl-deal-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.94); color: var(--accent); font-size: 10px; font-weight: 800; padding: 4px 10px 4px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; box-shadow: var(--shadow-sm); }
.tl-deal-tag .ic { font-size: 12px; }
.tl-deal-off { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, var(--accent), #d91d72); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 8px; box-shadow: 0 4px 12px rgba(250,48,139,.35); }
.tl-deal-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.tl-deal-name { font-size: 14.5px; font-weight: 600; line-height: 1.4; min-height: 40px; }
.tl-deal-name a { color: #111827; transition: color .18s; }
.tl-deal-name a:hover { color: var(--primary); }
.tl-deal-price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.tl-deal-price strong { font-size: 19px; color: var(--accent); font-weight: 800; }
.tl-deal-price del { font-size: 13px; color: var(--muted-2); }
.tl-deal-min { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-light); padding: 5px 10px; border-radius: 7px; align-self: flex-start; }
.tl-deal-min .ic { font-size: 13px; }
.tl-deal-foot { margin-top: auto; padding-top: 10px; }
.tl-deal-progress { height: 7px; border-radius: 5px; background: #eef0f4; overflow: hidden; }
.tl-deal-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ff5ba0); border-radius: 5px; }
.tl-deal-sold { font-size: 11px; color: var(--muted); margin-top: 5px; }
/* From the reference. Dropped when .tl-deal-actions replaced the card's single
   full-width button: .tl-btn-block only carries `width: 100%`, so without this
   the Add to Cart button sat flush against the caption above it with no gap.
   Restored because the card is back to the reference's one-button layout. */
.tl-deal-body .tl-btn-block { margin-top: 12px; }
.tl-countdown { display: flex; gap: 6px; margin: 10px 0; }
.tl-cd-box { flex: 1; background: linear-gradient(160deg, var(--dark), #111827); color: #fff; border-radius: 10px; text-align: center; padding: 7px 4px; }
.tl-cd-box b { display: block; font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tl-cd-box small { font-size: 8.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .65; }
/* Compare / Add to Cart / Buy Now share one row. Flex for the reason given at
   .tl-card-actions: a grid hands the single wrapping <form> one cell, so the
   compare button, Add to Cart and Buy Now cannot all get a column each.
   `min-width: 0` lets the two labels shrink instead of forcing the row wider
   than the card — the group-deals grid is five across, the narrowest place
   these buttons appear. */
.tl-deal-actions { display: flex; align-items: stretch; gap: 7px; margin-top: 12px; }
.tl-deal-actions form { display: flex; gap: 7px; flex: 1; min-width: 0; }
.tl-deal-actions .tl-btn { height: 36px; font-size: 12.5px; padding: 0 8px; min-width: 0; }
.tl-deal-actions .tl-deal-add { flex: 1.5; }
.tl-deal-actions .tl-btn-buy { flex: 1; }
.tl-deal-compare { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--muted); transition: color .18s, border-color .18s, background .18s; }
.tl-deal-compare:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.tl-deal-compare.is-active { color: #fff; background: var(--primary); border-color: var(--primary); }
.tl-deal-compare .ic { font-size: 15px; }

/* Group deals banner */
.tl-deals-banner { display: flex; align-items: center; gap: 22px; background: linear-gradient(120deg, #2A379A 0%, #3749BB 55%, #FA308B 130%); border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 22px; color: #fff; position: relative; overflow: hidden; }
.tl-deals-banner::before { content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.09); }
.tl-deals-banner::after { content: ''; position: absolute; right: 120px; bottom: -90px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.06); }
.tl-deals-banner-info { position: relative; z-index: 1; }
.tl-deals-flag { display: inline-flex; align-items: center; background: rgba(255,255,255,.18); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 4px 11px; border-radius: 20px; margin-bottom: 8px; }
.tl-deals-banner-info h2 { color: #fff; font-size: 24px; line-height: 1.2; }
.tl-deals-banner-info p { color: rgba(255,255,255,.85); font-size: 13.5px; margin-top: 3px; }
.tl-deals-banner-cd { position: relative; z-index: 1; margin-left: auto; }
.tl-deals-banner-cd > small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.8); margin-bottom: 6px; }
.tl-deals-banner-cd .tl-countdown { margin: 0; min-width: 210px; }
.tl-deals-banner-cd .tl-cd-box { background: rgba(255,255,255,.18); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.22); }
.tl-deals-cta { position: relative; z-index: 1; flex: 0 0 auto; background: #fff; color: var(--primary-dark); font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.tl-deals-cta:hover { background: #fff; filter: none; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.24); }

/* ---------------- Promo banners ---------------- */
.tl-promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tl-promo-banner { border-radius: var(--r-lg); padding: 30px 28px; color: #fff; position: relative; overflow: hidden; min-height: 170px; display: flex; flex-direction: column; justify-content: center; }
.tl-promo--blue { background: linear-gradient(120deg, #3749BB, #2A379A); }
.tl-promo--purple { background: linear-gradient(120deg, #7c3aed, #5b21b6); }
.tl-promo-banner h3 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.tl-promo-banner p { color: rgba(255,255,255,.85); font-size: 13.5px; margin-bottom: 14px; }
.tl-promo-cta { align-self: flex-start; background: #fff; color: var(--primary); font-weight: 700; font-size: 13px; padding: 9px 20px; border-radius: 8px; transition: all .2s; }
.tl-promo-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tl-promo-banner::after { content: ''; position: absolute; right: -30px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.09); }

/* ---------------- Scroller ---------------- */
.tl-scroller { position: relative; }
.tl-scroll-track { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.tl-scroll-track > * { flex: 0 0 auto; }
.tl-scroll-track > .tl-brand-card { width: calc((100% - 96px) / 7); }
.tl-scroll-prev, .tl-scroll-next { position: absolute; top: -58px; right: 2px; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: var(--shadow-sm); transition: all .2s; z-index: 4; }
.tl-scroll-prev { right: 46px; }
.tl-scroll-prev:hover, .tl-scroll-next:hover { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-color: var(--primary); }
.tl-scroll-track::-webkit-scrollbar { display: none; }

/* ---------------- Breadcrumb ---------------- */
.tl-breadcrumb { background: var(--bg); border-bottom: 1px solid var(--border); }
.tl-breadcrumb ol { display: flex; align-items: center; gap: 8px; padding: 12px 0; flex-wrap: wrap; }
.tl-breadcrumb li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tl-breadcrumb a:hover { color: var(--primary); }
.tl-breadcrumb li > .ic { font-size: 11px; }
.tl-breadcrumb span { color: #111827; font-weight: 600; }

/* ---------------- Panel ---------------- */
.tl-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
/* The body of a panel, i.e. everything under its head/title. A panel is a
   bordered card and the card itself carries no padding, so without this every
   field inside one sat flush against the card's own 1px border — an input's
   border touching the panel's. The reference wrapped these bodies in an inline
   padding div; this is that, as a class.
   Panels whose body is a full-bleed table (cart, orders, compare) leave this
   off on purpose, so the table can run to the card edges. */
.tl-panel-body { padding: 18px; }
.tl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.tl-panel-head h2 { font-size: 18px; }
.tl-panel-head h2 small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.tl-panel-title { font-size: 16px; padding: 16px 18px 0; }

/* ---------------- Shop / filter layout ---------------- */
/* padding-block, not the `padding` shorthand: these wrappers are always used
   together with .tl-container, which supplies the 20px side gutters. An equal-
   specificity shorthand defined further down the file overwrote padding-inline
   to 0, so every inner page sat flush against the viewport edge while the
   breadcrumb above it stayed inset. Only the vertical spacing belongs here. */
.tl-shop-layout { display: grid; grid-template-columns: 258px 1fr; gap: 22px; align-items: start; padding-block: 26px 60px; }
.tl-shop-aside { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 76px; }
.tl-filter-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.tl-filter-head h3 { font-size: 15px; }
.tl-filter-close { width: 34px; height: 34px; border-radius: 8px; color: var(--muted); display: none; align-items: center; justify-content: center; font-size: 18px; }
.tl-filter-body { padding: 6px 16px 16px; max-height: none; }
.tl-filter-group { border-bottom: 1px solid #f1f3f7; padding: 8px 0; }
.tl-filter-group:last-of-type { border-bottom: none; }
.tl-filter-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; color: #111827; padding: 8px 0; }
.tl-filter-toggle .ic { font-size: 13px; color: var(--muted); transition: transform .25s; }
.tl-filter-group:not(.tl-fg-open) .tl-filter-content { display: none; }
.tl-filter-group:not(.tl-fg-open) .tl-filter-toggle .ic { transform: rotate(-90deg); }
.tl-filter-scroll { max-height: 180px; overflow-y: auto; }
.tl-check { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.tl-check:hover { background: var(--primary-light); }
.tl-check input { accent-color: var(--primary); width: 15px; height: 15px; flex: 0 0 auto; }
.tl-check span { flex: 1; color: #374151; }
.tl-check small { color: var(--muted-2); font-size: 11.5px; }
.tl-shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 18px; flex-wrap: wrap; }
.tl-shop-head h1 { font-size: 22px; margin-bottom: 3px; }
.tl-shop-head p { font-size: 13px; }
.tl-shop-tools { display: flex; align-items: center; gap: 10px; }
.tl-sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tl-sort-wrap select { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-weight: 600; color: var(--text); cursor: pointer; }
.tl-filter-open { display: none; }
.tl-listing-count { font-size: 13px; color: var(--muted); margin: 0 0 14px 2px; }
.tl-cat-pills { background: #fff; border-bottom: 1px solid var(--border); }
.tl-cat-pills .tl-container { display: flex; gap: 8px; overflow-x: auto; padding: 10px 20px; scrollbar-width: none; }
.tl-cat-pills .tl-container::-webkit-scrollbar { display: none; }
.tl-cat-pills a { flex: 0 0 auto; padding: 7px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); background: #fff; white-space: nowrap; }
.tl-cat-pills a:hover, .tl-cat-pills a.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* pagination */
.tl-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.tl-page { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: #fff; font-weight: 600; font-size: 13.5px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
/* CMS page body (template/page). Deliberately NOT .tl-page: that is the
   pagination button, a 38px square, and sharing the name pinned every CMS page
   to height:38px and overwrote the container's side gutters. */
.tl-cms-page { padding-block: 26px 60px; }
.tl-page:hover { border-color: var(--primary); color: var(--primary); }
.tl-page.is-active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-color: var(--primary); }
.tl-page-gap { display: inline-flex; align-items: center; color: var(--muted-2); }

/* ---------------- Product detail ---------------- */
.tl-product-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; padding-block: 24px 40px; }
.tl-product-main { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tl-gallery-main { position: relative; background: #f3f4f6; border: 1px solid var(--border); border-radius: var(--r-lg); height: 380px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tl-gallery-main img { max-width: 88%; max-height: 88%; object-fit: contain; transition: transform .2s ease; }
.tl-img-zoom { transform: scale(1.8); }
.tl-gallery-zoom-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(17,24,39,.75); color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 6px; display: flex; align-items: center; gap: 5px; }
.tl-gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.tl-thumb { width: 76px; height: 76px; border: 2px solid var(--border); border-radius: 10px; background: #f3f4f6; padding: 6px; transition: border-color .2s; }
.tl-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tl-thumb.is-active, .tl-thumb:hover { border-color: var(--primary); }
.tl-p-brand { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; }
.tl-p-title { font-size: 22px; line-height: 1.35; margin: 8px 0 10px; }
.tl-p-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.tl-p-sku { font-size: 12px; color: var(--muted); }
.tl-p-sku strong { color: var(--text); }
.tl-p-price-block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.tl-p-price { font-size: 28px; font-weight: 800; color: var(--primary); }
.tl-p-old { font-size: 15px; color: var(--muted-2); }
.tl-p-off { font-size: 12px; font-weight: 700; color: var(--success); background: #ecfdf3; padding: 4px 9px; border-radius: 6px; }
.tl-p-stock-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-p-warranty { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text); }
.tl-p-warranty .ic { font-size: 14px; color: var(--primary); }
.tl-p-desc { font-size: 13.5px; line-height: 1.7; margin-bottom: 16px; }
.tl-p-qty-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.tl-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.tl-qty button { width: 38px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; }
.tl-qty button:hover { background: var(--primary-light); color: var(--primary); }
.tl-qty input { width: 56px; height: 42px; border: none; text-align: center; font-weight: 700; border-left: 1px solid var(--border); border-right: 1px solid var(--border); outline: none; }
.tl-p-action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-p-action-row .tl-btn { flex: 1; min-width: 150px; }
.tl-p-assurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.tl-p-assurance > div { display: flex; gap: 9px; align-items: flex-start; }
.tl-p-assurance .ic { font-size: 18px; color: var(--primary); }
.tl-p-assurance strong { display: block; font-size: 12.5px; color: #111827; }
.tl-p-assurance small { font-size: 11px; color: var(--muted); }
.tl-product-aside { display: grid; gap: 18px; position: sticky; top: 76px; }
.tl-spec-mini { padding: 12px 18px 16px; }
.tl-spec-mini li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f4f5f9; font-size: 12.5px; }
.tl-spec-mini li:last-child { border-bottom: none; }
.tl-spec-mini span { color: var(--muted); }
.tl-spec-mini strong { color: #111827; font-weight: 600; text-align: right; }

/* tabs */
.tl-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
.tl-tabs::-webkit-scrollbar { display: none; }
.tl-tab { padding: 12px 18px; font-weight: 700; font-size: 13.5px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tl-tab:hover { color: var(--primary); }
.tl-tab.is-active { color: var(--primary); border-color: var(--primary); }
.tl-tab-panels { padding-top: 20px; padding-bottom: 8px; }
.tl-tab-panel { display: none; }
.tl-tab-panel.is-active { display: block; animation: tl-fade .3s ease; }
@keyframes tl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tl-tab-panel h3 { font-size: 16px; margin-bottom: 12px; }
.tl-tab-panel p { font-size: 13.5px; line-height: 1.75; margin-bottom: 10px; }
.tl-spec-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tl-spec-table th, .tl-spec-table td { padding: 11px 14px; font-size: 13px; text-align: left; border-bottom: 1px solid #f1f3f7; }
.tl-spec-table tr:last-child th, .tl-spec-table tr:last-child td { border-bottom: none; }
.tl-spec-table th { background: #fafbfe; color: var(--muted); font-weight: 600; width: 220px; }
.tl-spec-table td { color: #111827; font-weight: 500; }
.tl-feature-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13.5px; }
.tl-feature-list .ic { color: var(--success); font-size: 17px; flex: 0 0 auto; }
.tl-review-summary { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px; background: var(--bg); border-radius: var(--r); margin-bottom: 18px; align-items: center; }
.tl-review-score { text-align: center; }
.tl-review-score strong { font-size: 38px; color: #111827; display: block; }
.tl-review-bars { display: grid; gap: 5px; }
.tl-review-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tl-bar { flex: 1; height: 7px; background: #e8eaf1; border-radius: 4px; overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: #f5a623; border-radius: 4px; }
.tl-review { padding: 14px 0; border-bottom: 1px solid #f1f3f7; }
.tl-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.tl-review-head strong { font-size: 13.5px; }
.tl-review p { font-size: 13px; }
/* Write-a-review form. .tl-panel carries no padding, so this panel owns its
   own 18px inset — including the h3, whose global 16px 18px 0 padding is
   reset here, and the sign-in / not-eligible notes, which would otherwise
   sit flush against the panel's border. */
.tl-review-form { padding: 18px; margin-top: 18px; }
.tl-review-form .tl-panel-title { padding: 0 0 4px; }
.tl-review-form .tl-form-grid { margin-top: 12px; }
.tl-review-form .tl-note-muted { margin: 0; }
/* Star picker. Five radio + label pairs, DOM order 5..1 with row-reverse, so
   `input:checked ~ label` fills the chosen star and every star left of it —
   no JavaScript, keyboard accessible, and the posted value is an ordinary
   `rating` field the existing validation already accepts. Star colours match
   the read-only stars above (#e5e7eb empty, #f5a623 filled). */
.tl-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.tl-rate input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tl-rate label { cursor: pointer; color: #e5e7eb; line-height: 1; padding: 2px; }
.tl-rate label .ic { font-size: 28px; }
.tl-rate label:hover, .tl-rate label:hover ~ label,
.tl-rate input:checked ~ label { color: #f5a623; }
.tl-rate input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.tl-rate-caption { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Screen-reader-only text. The storefront has no utility framework, so the
   few places that need it (the star picker's per-star labels) use this. */
.tl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------- Cart ---------------- */
.tl-cart-layout, .tl-wish-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; padding: 24px 0 60px; }
.tl-cart-table-wrap { overflow-x: auto; }
.tl-cart-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.tl-cart-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.tl-cart-table td { padding: 14px 16px; border-bottom: 1px solid #f1f3f7; vertical-align: middle; }
.tl-cart-product { display: flex; align-items: center; gap: 12px; min-width: 250px; }
.tl-cart-product img { width: 70px; height: 70px; object-fit: contain; background: #f3f4f6; border-radius: 9px; }
.tl-cart-name { font-size: 13.5px; font-weight: 600; color: #111827; display: block; }
.tl-cart-name:hover { color: var(--primary); }
.tl-cart-product small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.tl-cart-price strong { font-size: 14px; color: var(--primary); }
.tl-cart-price del { display: block; font-size: 12px; color: var(--muted-2); }
.tl-cart-sub { font-size: 14.5px; font-weight: 700; color: #111827; }
.tl-icon-btn { width: 34px; height: 34px; border-radius: 8px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.tl-icon-btn:hover { background: #fef2f3; color: var(--danger); }
.tl-cart-continue { margin-top: 16px; }
.tl-cart-continue a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--text); }
.tl-cart-continue a:hover { color: var(--primary); }
.tl-summary { padding: 14px 18px; }
.tl-summary li { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13.5px; }
.tl-summary strong { color: #111827; }
.tl-summary-discount { color: var(--success) !important; }
.tl-summary-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px !important; }
.tl-summary-total strong { font-size: 18px; color: var(--primary); }
.tl-free-ship { color: var(--success); font-weight: 700; font-size: 11.5px; }
.tl-ship-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); background: #fff8ec; border: 1px dashed #fbbf24; padding: 9px 12px; border-radius: 8px; margin: 0 18px 12px; }
.tl-ship-note .ic { color: #d97706; font-size: 15px; }
.tl-zone-select { display: grid; gap: 6px; padding: 0 18px 14px; font-size: 12.5px; }
.tl-zone-select label { display: flex; gap: 7px; align-items: center; cursor: pointer; }
.tl-zone-select input { accent-color: var(--primary); }
.tl-cart-aside .tl-btn, .tl-cart-trust { margin: 0 18px 12px; }
.tl-cart-trust { display: flex; gap: 14px; padding-bottom: 16px; font-size: 11.5px; color: var(--muted); }
.tl-cart-trust span { display: flex; align-items: center; gap: 5px; }
.tl-cart-trust .ic { font-size: 14px; color: var(--success); }

/* ---------------- Empty state ---------------- */
.tl-empty { text-align: center; padding: 60px 20px; max-width: 460px; margin: 0 auto; }
.tl-empty-ic { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.tl-empty h3 { font-size: 20px; margin-bottom: 8px; }
.tl-empty p { font-size: 13.5px; margin-bottom: 18px; }
.tl-cart-empty, .tl-wish-empty { padding: 30px 0 50px; }

/* ---------------- Compare ---------------- */
.tl-compare-wrap { padding-block: 24px 60px; }
.tl-compare-scroll { overflow-x: auto; }
.tl-compare-table { border-collapse: collapse; min-width: 100%; }
.tl-compare-table th, .tl-compare-table td { padding: 12px 16px; border-bottom: 1px solid #f1f3f7; font-size: 13px; text-align: center; min-width: 200px; }
.tl-compare-table th { background: #fafbfe; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.tl-cmp-sticky { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left !important; box-shadow: 4px 0 8px -4px rgba(0,0,0,.08); }
.tl-cmp-row-head td { padding-top: 18px; }
.tl-cmp-product { position: relative; }
.tl-cmp-product img { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 10px; background: #f3f4f6; border-radius: 10px; }
.tl-cmp-name { font-size: 13px; font-weight: 700; color: #111827; display: block; }
.tl-cmp-name:hover { color: var(--primary); }
.tl-cmp-remove { position: absolute; top: -6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: #fef2f3; color: var(--danger); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tl-cmp-empty { background: #fafbfe; color: var(--muted-2); font-size: 12px; }
.tl-cmp-empty span { display: flex; align-items: center; justify-content: center; height: 140px; text-align: center; line-height: 1.7; }
.tl-cmp-best { background: #f0fdf4; color: #166534; font-weight: 700; }
.tl-cmp-best-tag { display: inline-block; background: var(--success); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; margin-top: 4px; }

/* ---------------- Checkout ---------------- */
.tl-checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 22px; align-items: start; padding-block: 24px 60px; }
.tl-step { padding: 20px 22px; margin-bottom: 18px; }
.tl-step-title { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 16px; }
.tl-step-num { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.tl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tl-field { margin-bottom: 14px; }
.tl-field label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.tl-field label span { color: var(--danger); }
.tl-field input, .tl-field select, .tl-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #d6dbe6; border-radius: 8px; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.tl-field input:focus, .tl-field select:focus, .tl-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(55,73,187,.14); }
.tl-field textarea { resize: vertical; }
.tl-field-error input, .tl-field-error select, .tl-field-error textarea { border-color: var(--danger); }
.tl-err { display: block; color: var(--danger); font-size: 11.5px; margin-top: 4px; min-height: 0; }
.tl-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl-radio-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .2s; }
.tl-radio-card:hover { border-color: var(--primary); background: var(--primary-light); }
.tl-radio-card input { accent-color: var(--primary); width: 16px; height: 16px; flex: 0 0 auto; }
.tl-radio-card strong { display: block; font-size: 13.5px; color: #111827; }
.tl-radio-card small { font-size: 11.5px; color: var(--muted); }
.tl-pay-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); background: var(--primary-light); padding: 10px 14px; border-radius: 8px; }
.tl-ck-items { padding: 14px 18px 4px; }
.tl-ck-items li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f4f5f9; }
.tl-ck-items li:last-child { border-bottom: none; }
.tl-ck-items img { width: 48px; height: 48px; object-fit: contain; background: #f3f4f6; border-radius: 7px; }
.tl-ck-info { flex: 1; min-width: 0; }
.tl-ck-name { font-size: 12.5px; font-weight: 600; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-ck-info small { font-size: 11px; color: var(--muted); }
.tl-ck-items strong { font-size: 13px; color: var(--primary); }
.tl-checkout-aside .tl-btn { margin: 0 18px 12px; }
/* A full-width button is still inset by the 18px margins its aside applies to
   it, so `width: 100%` is 100% of the panel PLUS those 36px — the Proceed to
   Checkout / Place Order buttons hung out past the right edge of their own card.
   This is in the reference stylesheet too, so it is a fix rather than a port.
   Only the two asides need it: everywhere else a block button either has no
   horizontal margin or sits in a padded body. */
.tl-cart-aside .tl-btn-block, .tl-checkout-aside .tl-btn-block { width: calc(100% - 36px); }

/* ---------------- Coupon box ---------------- */
.tl-coupon { margin: 14px 18px 0; padding-top: 14px; border-top: 1px dashed var(--border); }
.tl-coupon > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.tl-coupon-row { display: flex; gap: 8px; }
.tl-coupon-row input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #d6dbe6; border-radius: 8px; background: #fff; outline: none; text-transform: uppercase; font-weight: 700; letter-spacing: .6px; transition: border-color .2s, box-shadow .2s; }
.tl-coupon-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(55,73,187,.14); }
/* `margin: 0` is load bearing: the coupon panel sits inside .tl-checkout-aside,
   whose `.tl-btn { margin: 0 18px 12px }` also matches this Apply button. That
   rule is equal specificity and does not declare `margin`, so without the reset
   Apply picks up 18px side margins inside a flex row — extra gaps and a row
   wider than its own panel. */
.tl-coupon-row .tl-btn { flex: 0 0 auto; height: 38px; margin: 0; }
.tl-coupon-msg { display: block; font-size: 12px; margin-top: 7px; color: var(--muted); }
.tl-coupon-msg.is-err { color: var(--danger); font-weight: 600; }
.tl-coupon-hint { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 9px; }
.tl-coupon-hint b { color: var(--primary); cursor: pointer; font-weight: 700; }
.tl-coupon-hint b:hover { text-decoration: underline; }
.tl-coupon-chip { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #ecfdf3; border: 1px solid #c9f0d8; }
.tl-coupon-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.tl-coupon-chip-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tl-coupon-chip-txt strong { font-size: 13px; color: #14532d; }
.tl-coupon-chip-txt small { font-size: 11.5px; color: #3b7a52; }
.tl-coupon-x { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #3b7a52; font-size: 12px; flex: 0 0 auto; transition: all .18s; }
.tl-coupon-x:hover { background: rgba(220,53,69,.12); color: var(--danger); }
.tl-coupon-save { font-weight: 700; color: #14532d !important; }

/* ---------------- Wishlist + compare ---------------- */
/* .tl-wish-btn is positioned absolutely for a product card's media block. On the
   product page the heart sits inline in the info row instead, so it needs
   `position: static` or it would be pinned to the top-right of the whole page. */
.tl-p-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.tl-wish-btn--inline { position: static; }
/* The quick view is a two-column grid with no product-media wrapper, so the
   absolute card positioning has no anchor there either. */
.tl-qv-info { position: relative; }
.tl-qv-info .tl-wish-btn { top: 0; right: 0; }

/* ---------------- Flash notice ---------------- */
/* A plain confirmation line. `.tl-check` is a label style (it is clickable and
   flexes its children), so it is not what a message wants. */
.tl-flash { margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; }
.tl-flash--ok { background: #ecfdf3; border: 1px solid #c9f0d8; color: #14532d; }
.tl-flash--err { background: #fdecea; border: 1px solid #f5c6c2; color: #8a1c13; }
/* The SweetAlert popup that carries the same messages when JS is available
   (x-template.swal-flash). SweetAlert brings its own stylesheet; these four
   rules only re-skin it to the storefront's type scale and radius. The button
   colour is set in JS from `--primary`, so it cannot drift from the theme. */
.tl-swal { border-radius: var(--r-lg); font-family: inherit; }
.tl-swal .swal2-title { font-size: 15px; font-weight: 700; color: #1f2937; }
.tl-swal .swal2-html-container { font-size: 13.5px; color: var(--muted); }
.tl-swal .swal2-confirm { border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; }
/* Inside a summary panel .tl-panel has no padding, so an un-inset notice runs
   edge to edge and touches the card's own 1px border. The siblings in these
   panels are inset with `margin`, so this one is too. */
.tl-cart-aside .tl-flash, .tl-checkout-aside .tl-flash { margin: 0 18px 14px; }

/* ---------------- Order tracking ---------------- */
.tl-track-wrap { padding-block: 24px 60px; max-width: 920px; }
.tl-track-panel { padding: 30px 26px; }
.tl-track-sub { font-size: 13.5px; margin-bottom: 18px; }
.tl-track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.tl-track-err { color: var(--danger); font-size: 12.5px; margin-top: 12px; }
.tl-track-recent { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); }
.tl-track-recent h6 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-2); margin-bottom: 8px; }
.tl-track-recent button { font-size: 12.5px; color: var(--primary); font-weight: 600; margin-right: 12px; }
.tl-track-recent button:hover { text-decoration: underline; }
.tl-order-confirm { padding: 24px 26px; }
.tl-order-confirm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.tl-order-confirm-ic { width: 52px; height: 52px; border-radius: 50%; background: #ecfdf3; color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.tl-order-confirm-head h2 { font-size: 20px; }
.tl-order-confirm-head small { font-size: 12.5px; color: var(--muted); }
.tl-order-confirm-head .tl-badge { margin-left: auto; }
.tl-timeline { display: flex; justify-content: space-between; gap: 6px; position: relative; padding-top: 6px; }
.tl-timeline::before { content: ''; position: absolute; top: 16px; left: 8%; right: 8%; height: 3px; background: #e5e7eb; border-radius: 3px; }
.tl-tl-item { position: relative; flex: 1; text-align: center; z-index: 2; }
.tl-tl-dot { width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: #fff; border: 3px solid #e5e7eb; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: all .3s; }
.tl-tl-item.is-done .tl-tl-dot { background: var(--success); border-color: var(--success); }
.tl-tl-item.is-current .tl-tl-dot { background: #fff; border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 5px rgba(55,73,187,.15); }
.tl-tl-label strong { display: block; font-size: 12px; color: #111827; }
.tl-tl-label small { font-size: 10.5px; color: var(--muted); }
.tl-track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }

/* ---------------- Quick view modal ---------------- */
.tl-modal-host { position: fixed; inset: 0; background: rgba(17,24,39,.55); z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); }
.tl-modal-host--show { display: flex; }
.tl-modal { position: relative; background: #fff; border-radius: var(--r-lg); max-width: 820px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); animation: tl-pop .28s cubic-bezier(.34,1.4,.64,1); }
@keyframes tl-pop { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
.tl-modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--shadow-sm); }
.tl-modal-close:hover { background: #fff; color: var(--danger); }
.tl-qv-grid { display: grid; grid-template-columns: 1fr 1fr; }
.tl-qv-media { background: #f3f4f6; display: flex; align-items: center; justify-content: center; padding: 30px; min-height: 320px; }
.tl-qv-media img { max-height: 260px; object-fit: contain; }
.tl-qv-info { padding: 28px; }
.tl-qv-name { font-size: 19px; line-height: 1.4; margin: 8px 0 10px; }
.tl-qv-stock { margin: 12px 0; }
.tl-qv-specs { margin: 14px 0 18px; border-top: 1px dashed var(--border); padding-top: 12px; }
.tl-qv-specs li { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; }
.tl-qv-specs span { color: var(--muted); }
.tl-qv-specs strong { color: #111827; font-weight: 600; }
.tl-qv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-qv-actions .tl-btn { flex: 1; min-width: 140px; }

/* ---------------- Toast ---------------- */
.tl-toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 1500; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.tl-toast { display: flex; align-items: center; gap: 10px; background: #111827; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-xl); opacity: 0; transform: translateX(24px); transition: all .3s cubic-bezier(.34,1.4,.64,1); max-width: 340px; }
.tl-toast--show { opacity: 1; transform: none; }
.tl-toast-ic { font-size: 17px; display: flex; }
.tl-toast--success .tl-toast-ic { color: #4ade80; }
.tl-toast--error .tl-toast-ic { color: #f87171; }
.tl-toast--warn .tl-toast-ic { color: #fbbf24; }

/* ---------------- Search suggestions ---------------- */
.tl-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); z-index: 950; max-height: 440px; overflow-y: auto; padding: 8px; }
.tl-suggest-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 700; padding: 10px 12px 6px; }
.tl-suggest-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; }
.tl-suggest-item img { width: 46px; height: 46px; object-fit: contain; background: #f3f4f6; border-radius: 7px; }
.tl-suggest-info { flex: 1; min-width: 0; }
.tl-suggest-info strong { display: block; font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-suggest-info small { font-size: 11px; color: var(--muted); }
.tl-suggest-price { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.tl-suggest-cat .ic { font-size: 16px; color: var(--primary); }
.tl-suggest-cat span { flex: 1; font-size: 13px; font-weight: 600; }
.tl-suggest-cat small { font-size: 11px; color: var(--muted); }
.tl-suggest-item:hover, .tl-suggest-item.is-active { background: var(--primary-light); }
.tl-suggest-empty { display: flex; align-items: center; gap: 10px; padding: 18px 14px; color: var(--muted); font-size: 13px; }
.tl-suggest-empty .ic { font-size: 18px; color: var(--muted-2); }

/* ---------------- Auth pages ---------------- */
.tl-auth-wrap { display: grid; place-items: center; padding: 40px 0 70px; }
.tl-auth-card { width: 100%; max-width: 460px; padding: 32px; }
.tl-auth-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.tl-auth-card h1 { font-size: 22px; text-align: center; margin-bottom: 6px; }
.tl-auth-sub { text-align: center; font-size: 13px; margin-bottom: 22px; }
.tl-auth-foot { text-align: center; font-size: 13px; margin-top: 16px; color: var(--muted); }
.tl-auth-foot a { color: var(--primary); font-weight: 700; }
.tl-auth-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin-bottom: 14px; }
.tl-auth-row label { display: flex; align-items: center; gap: 7px; color: var(--text); }
.tl-auth-row input { accent-color: var(--primary); }
.tl-auth-row a { color: var(--primary); font-weight: 600; }
.tl-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted-2); font-size: 12px; }
.tl-auth-divider::before, .tl-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tl-auth-notice { display: flex; gap: 9px; align-items: flex-start; background: var(--primary-light); border: 1px solid rgba(55,73,187,.18); color: var(--primary-dark); border-radius: 9px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 16px; }
.tl-auth-notice strong { font-weight: 700; letter-spacing: .3px; }
.tl-auth-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.tl-auth-steps span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.tl-auth-steps i { width: 22px; height: 22px; border-radius: 50%; background: #e5e9f5; color: var(--muted-2); display: grid; place-items: center; font-style: normal; font-size: 11.5px; }
.tl-auth-steps span.is-active { color: var(--primary); }
.tl-auth-steps span.is-active i { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.tl-auth-steps b { width: 26px; height: 2px; background: var(--border); border-radius: 2px; }
.tl-auth-back { display: flex; justify-content: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.tl-auth-back a { color: var(--primary); font-weight: 700; }
.tl-otp-input { letter-spacing: 6px; font-weight: 700; text-align: center; }

/* ---------------- Account ---------------- */
.tl-account-layout { display: grid; grid-template-columns: 258px 1fr; gap: 22px; align-items: start; padding-block: 24px 60px; }
.tl-account-menu button, .tl-account-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--text); border-left: 3px solid transparent; }
.tl-account-menu button:hover, .tl-account-menu a:hover { background: var(--primary-light); color: var(--primary); }
.tl-account-menu button.is-active { background: var(--primary-light); color: var(--primary); border-left-color: var(--primary); }
.tl-account-menu .ic { font-size: 16px; }
.tl-account-head { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid var(--border); }
.tl-avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; }
.tl-order-table { width: 100%; border-collapse: collapse; }
.tl-order-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--border); }
.tl-order-table td { padding: 12px 16px; border-bottom: 1px solid #f1f3f7; font-size: 13px; }
.tl-order-table tbody tr:hover { background: #fafbfe; }
.tl-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.tl-status--delivered { background: #ecfdf3; color: #166534; }
.tl-status--pending { background: #fff8ec; color: #b45309; }
.tl-status--shipped { background: var(--primary-light); color: var(--primary); }

/* ---------------- Brand page ---------------- */
.tl-brand-banner { padding: 22px 0; }
/* Tinted from the theme primary rather than a hardcoded hex in the view, so
   the banner follows the palette. rgba() cannot read a custom property for
   its alpha channel, so the 8% wash is approximated with color-mix. */
.tl-brand-banner-inner { display: flex; align-items: center; gap: 26px; padding: 26px 30px; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 8%, #fff) 0%, var(--surface) 100%); }
.tl-brand-banner-inner img { width: 190px; flex: 0 0 auto; }
.tl-brand-banner-inner h2 { font-size: 26px; margin-bottom: 8px; }
.tl-brand-banner-inner p { font-size: 13.5px; max-width: 640px; margin-bottom: 12px; }
.tl-brands-page { padding-block: 30px 60px; }
.tl-brand-group { margin-bottom: 34px; }
.tl-brand-group h3 { font-size: 17px; margin-bottom: 14px; }

/* ---------------- Blog ---------------- */
.tl-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tl-post-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .25s; display: flex; flex-direction: column; height: 100%; }
.tl-post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(55,73,187,.13); }
.tl-post-thumb { height: 180px; object-fit: cover; width: 100%; }
.tl-post-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.tl-post-meta { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; margin-bottom: 8px; }
.tl-post-card h3 { font-size: 15.5px; line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-post-card h3:hover { color: var(--primary); }
.tl-post-card p { font-size: 13px; line-height: 1.65; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl-post-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--primary); margin-top: 12px; }
.tl-post-more:hover { color: var(--accent); gap: 9px; }
.tl-post-detail { display: grid; grid-template-columns: 1fr 320px; gap: 26px; padding: 26px 0 60px; align-items: start; }
.tl-post-content { font-size: 14.5px; line-height: 1.8; }
.tl-post-content p { margin-bottom: 16px; font-size: 14.5px; line-height: 1.8; }
.tl-post-content h3 { font-size: 19px; margin: 22px 0 10px; }
.tl-post-hero { border-radius: var(--r-lg); margin-bottom: 22px; width: 100%; height: 340px; object-fit: cover; }

/* ---------------- Static pages (about/contact) ---------------- */
.tl-page-hero { padding: 40px 0 26px; text-align: center; background: linear-gradient(135deg, var(--primary-light), #fff); border-bottom: 1px solid var(--border); }
.tl-page-hero h1 { font-size: 32px; margin-bottom: 8px; }
.tl-page-hero p { font-size: 14px; max-width: 640px; margin: 0 auto; }
.tl-prose { max-width: 860px; margin: 0 auto; padding: 30px 0 60px; }
.tl-prose p { font-size: 14.5px; line-height: 1.8; margin-bottom: 16px; }
.tl-prose h2 { font-size: 22px; margin: 30px 0 12px; }
.tl-prose ul { margin: 0 0 16px; }
.tl-prose li { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; }
.tl-prose li .ic { color: var(--success); font-size: 17px; flex: 0 0 auto; margin-top: 2px; }
.tl-feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tl-feature-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); transition: all .25s; }
.tl-feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(55,73,187,.12); }
.tl-feature-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.tl-feature-card h3 { font-size: 16px; margin-bottom: 7px; }
.tl-feature-card p { font-size: 13px; line-height: 1.65; }
.tl-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-block: 30px 60px; align-items: start; }
.tl-contact-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f1f3f7; }
.tl-contact-item:last-child { border-bottom: none; }
.tl-contact-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 11px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.tl-contact-item strong { display: block; font-size: 13.5px; color: #111827; }
.tl-contact-item span { font-size: 13px; color: var(--muted); }
.tl-map { height: 220px; border-radius: var(--r-lg); margin-top: 18px; background: linear-gradient(135deg, #eef0ff, #f8fbff); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 13px; flex-direction: column; gap: 8px; }
.tl-map .ic { font-size: 34px; color: var(--primary); }

/* ---------------- Distribution ---------------- */
.tl-dist-hero { background: linear-gradient(120deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: var(--r-lg); padding: 46px 40px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; }
.tl-dist-hero h2 { color: #fff; font-size: 30px; margin-bottom: 12px; }
.tl-dist-hero p { color: rgba(255,255,255,.86); font-size: 14.5px; line-height: 1.7; margin-bottom: 20px; }
.tl-dist-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tl-dist-stat { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; text-align: center; box-shadow: var(--shadow-sm); }
.tl-dist-stat strong { display: block; font-size: 26px; color: var(--primary); }
.tl-dist-stat small { font-size: 12px; color: var(--muted); }

/* ---------------- 404 ---------------- */
.tl-404 { text-align: center; padding: 70px 20px 90px; }
.tl-404-code { font-size: 110px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tl-404 h1 { font-size: 26px; margin: 10px 0 8px; }
.tl-404 p { font-size: 14px; margin: 0 auto 22px; max-width: 420px; }
.tl-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------------- Footer ---------------- */
.tl-footer { background: #0f172a; color: #cbd5e1; margin-top: 20px; }
.tl-footer-trust { border-bottom: 1px solid rgba(255,255,255,.08); padding: 18px 0; }
.tl-footer-trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tl-footer-trust-item { display: flex; align-items: center; gap: 11px; }
.tl-footer-trust-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: rgba(255,255,255,.08); color: #a5b4fc; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tl-footer-trust-item h6 { color: #fff; font-size: 13px; }
.tl-footer-trust-item small { font-size: 11px; color: #94a3b8; }
.tl-footer-main { padding: 46px 0 30px; }
.tl-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: 28px; }
.tl-footer-brand p { font-size: 13px; color: #94a3b8; line-height: 1.7; margin: 12px 0 14px; }
.tl-footer-logo svg { width: 170px; }
.tl-footer-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.tl-footer-phone:hover { color: #FA308B; }
.tl-footer-phone .ic { font-size: 16px; color: #FA308B; }
.tl-footer-branch { display: block; font-size: 12.5px; color: #94a3b8; margin-bottom: 8px; line-height: 1.6; }
.tl-footer-branch strong { display: block; color: #cbd5e1; font-size: 12.5px; }
.tl-payment-icons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tl-payment-icons span { font-size: 10px; font-weight: 700; color: #cbd5e1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 4px 8px; border-radius: 5px; }
.tl-footer-title { color: #fff; font-size: 14px; margin-bottom: 16px; text-transform: capitalize; }
.tl-footer-col ul li { margin-bottom: 10px; }
.tl-footer-col ul a { font-size: 13px; color: #94a3b8; }
.tl-footer-col ul a:hover { color: #fff; padding-left: 3px; }
.tl-footer-col > p { font-size: 13px; color: #94a3b8; margin-bottom: 12px; }
.tl-newsletter { display: flex; gap: 8px; margin-bottom: 16px; }
.tl-newsletter input { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 13px; outline: none; }
.tl-newsletter input::placeholder { color: #64748b; }
.tl-newsletter input:focus { border-color: var(--primary); }
.tl-newsletter button { padding: 0 18px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.tl-footer-social { display: flex; gap: 9px; }
.tl-footer-social a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.07); color: #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all .2s; }
.tl-footer-social a:hover { transform: translateY(-2px); }
.tl-footer-social a:nth-child(1):hover { background: #1877f2; color: #fff; }
.tl-footer-social a:nth-child(2):hover { background: #ff0000; color: #fff; }
.tl-footer-social a:nth-child(3):hover { background: #0a66c2; color: #fff; }
.tl-footer-social a:nth-child(4):hover { background: #25d366; color: #fff; }
.tl-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0; font-size: 12px; color: #94a3b8; }
.tl-footer-bottom-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tl-footer-bottom-links { display: flex; gap: 16px; }
.tl-footer-bottom-links a:hover { color: #fff; }

/* back top + whatsapp fab */
.tl-back-top { position: fixed; bottom: 86px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s; z-index: 800; }
.tl-back-top--show { opacity: 1; visibility: visible; transform: none; }
.tl-back-top:hover { filter: brightness(1.12); }
.tl-wa-fab { position: fixed; bottom: 24px; right: 24px; width: 50px; height: 50px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: var(--shadow-lg); z-index: 800; transition: transform .2s; }
.tl-wa-fab:hover { transform: scale(1.1); }

/* ---------------- Recently viewed section ---------------- */
.tl-recent-sec { padding-bottom: 20px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .tl-grid--5 { grid-template-columns: repeat(4, 1fr); }
  .tl-grid--6 { grid-template-columns: repeat(4, 1fr); }
  .tl-scroll-track > .tl-brand-card { width: calc((100% - 64px) / 5); }
  .tl-mega { width: 620px; }
  .tl-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; }
}
@media (max-width: 1180px) {
  .tl-nav-item > a { padding: 0 11px; font-size: 13px; }
  .tl-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .tl-topbar { display: none; }
  .tl-main-header, .tl-navbar { display: none; }
  #tl-mobile-header { display: block; position: sticky; top: 0; z-index: 900; }
  .tl-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: #fff; }
  .tl-mobile-search { display: block; position: relative; padding: 0 16px 12px; background: #fff; }
  .tl-mobile-search .tl-search-wrap { height: 44px; border-width: 1.5px; }
  .tl-mobile-search .tl-search-btn { padding: 0 16px; font-size: 13px; }
  .tl-mobile-search .tl-suggest { top: calc(100% + 6px); max-height: 62vh; }
  .tl-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border); z-index: 890; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tl-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; font-size: 10.5px; color: var(--muted); font-weight: 600; }
  .tl-bottom-nav .tl-bottom-ic { font-size: 20px; color: var(--muted); position: relative; }
  .tl-bottom-active .tl-bottom-ic, .tl-bottom-active small { color: var(--primary); }
  .tl-bottom-cart .tl-bottom-ic { color: var(--primary); }
  .tl-bottom-cart b { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
  .tl-bottom-wish .tl-bottom-ic { color: var(--accent); }
  .tl-bottom-wish b { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
  body { padding-bottom: 62px; }
  .tl-back-top, .tl-wa-fab { bottom: 74px; }
  .tl-back-top { bottom: 136px; }
  .tl-product-main { grid-template-columns: 1fr; }
  .tl-shop-layout, .tl-account-layout { grid-template-columns: 1fr; }
  .tl-product-aside { grid-template-columns: 1fr 1fr; position: static; }
  .tl-checkout-layout, .tl-cart-layout, .tl-wish-layout { grid-template-columns: 1fr; }
  .tl-checkout-aside, .tl-cart-aside { position: static; }
  .tl-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .tl-post-detail { grid-template-columns: 1fr; }
  .tl-contact-grid { grid-template-columns: 1fr; }
  .tl-dist-hero { grid-template-columns: 1fr; }
  .tl-dist-stats { grid-template-columns: repeat(2, 1fr); }
  .tl-feature-cards { grid-template-columns: 1fr 1fr; }
  .tl-footer-grid { grid-template-columns: 1fr 1fr; }
  .tl-footer-trust-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tl-promo-row { grid-template-columns: 1fr; }
  .tl-mega { position: fixed; top: 0; left: 0; right: 0; width: 100%; border-radius: 0; transform: translateY(0); }
  .tl-review-summary { grid-template-columns: 1fr; }
  .tl-trust { grid-template-columns: repeat(2, 1fr); }
  .tl-track-grid { grid-template-columns: 1fr; }
  .tl-track-form { grid-template-columns: 1fr; }
  /* filter drawer */
  .tl-filter-open { display: inline-flex; }
  .tl-filter-close { display: flex; }
  .tl-shop-aside { position: static; max-height: none; }
  .tl-shop-aside.tl-filter-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); z-index: 1005; border-radius: 0; transform: translateX(-102%); transition: transform .3s; overflow-y: auto; box-shadow: var(--shadow-xl); }
  .tl-shop-aside.tl-filter-drawer--open { transform: translateX(0); }
  .tl-shop-aside.tl-filter-drawer .tl-filter-body { max-height: none; overflow: visible; }
  .tl-shop-aside.tl-filter-drawer .tl-filter-scroll { max-height: none; }
}
@media (max-width: 900px) {
  .tl-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .tl-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .tl-product-layout { grid-template-columns: 1fr; }
  .tl-qv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .tl-container { padding: 0 16px; }
  .tl-topbar-links a:nth-child(-n+3) { display: none; }
  .tl-sec { padding: 32px 0; }
  .tl-sec-head { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
  .tl-sec-title h2 { font-size: 21px; }
  .tl-grid--2, .tl-grid--3, .tl-grid--4, .tl-grid--5, .tl-grid--6 { grid-template-columns: repeat(2, 1fr); }
  #tl-cat-shortcuts { padding: 0 14px; }
  .tl-sec .tl-grid { padding: 0 14px; }
  .tl-sec-head { padding: 0 14px; }
  .tl-scroll-track > .tl-brand-card { width: 150px; }
  .tl-blog-grid, .tl-feature-cards { grid-template-columns: 1fr; }
  .tl-form-grid, .tl-radio-cards { grid-template-columns: 1fr; }
  .tl-footer-grid { grid-template-columns: 1fr; }
  .tl-footer-trust-grid { grid-template-columns: 1fr 1fr; }
  .tl-dist-stats { grid-template-columns: 1fr 1fr; }
  .tl-gallery-main { height: 300px; }
  .tl-p-title { font-size: 18px; }
  .tl-hero .tl-slider-prev, .tl-hero .tl-slider-next { width: 36px; height: 36px; font-size: 15px; }
  .tl-header-inner { flex-wrap: wrap; }
  .tl-brand-banner-inner { flex-direction: column; align-items: flex-start; }
  .tl-deals-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tl-deals-banner-cd { margin-left: 0; width: 100%; }
  .tl-deals-banner-cd .tl-countdown { min-width: 0; }
  .tl-toast-wrap { left: 14px; right: 14px; bottom: 74px; align-items: stretch; }
  .tl-toast { max-width: none; }
  .tl-404-code { font-size: 76px; }
}
@media (max-width: 480px) {
  .tl-grid--2, .tl-grid--3, .tl-grid--4, .tl-grid--5, .tl-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .tl-trust { grid-template-columns: 1fr; }
  .tl-container { padding: 0 14px; }
  .tl-sec { padding: 24px 0; }
  .tl-sec-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  .tl-sec-title h2 { font-size: 19px; }
  .tl-product-img-wrap { height: 160px; }
  .tl-card-actions .tl-btn, .tl-deal-actions .tl-btn { height: 32px; font-size: 11px; padding: 0 5px; gap: 4px; }
  .tl-product-aside { grid-template-columns: 1fr; }
  .tl-review-bars { min-width: 0; }
  .tl-mobile-logo .tl-logo-img { height: 40px; }
  .tl-topbar-inner { height: auto; padding: 6px 0; }
  .tl-topbar-msg { font-size: 11px; }
  .tl-footer-bottom-inner { flex-direction: column; gap: 6px; }
}