/* ============================================================
   TEKKO BD — Design tokens
   Source: Figma "TLL Website 4.0" (Teamz Lab homepage, node 8002:154)
   real variables pulled from that file — NOT invented. Palette is
   light/clean (black-on-white, blue accent), deliberately different
   mood from goalkit's dark neon-lime jersey shop.

   EVERY component below reads these tokens, never a hardcoded color.
   To reskin the whole site later: edit this block only.
   ============================================================ */
:root {
  --ink: #000000;
  --ink-soft: #6B7280;      /* body copy on white — darkened from figma's #868686 for AA contrast */
  --ink-faint: #9AA1AC;
  --paper: #FFFFFF;
  --surface: #F5F5F7;        /* figma "Warm Grey" — section backgrounds */
  --surface-2: #E5E7EB;      /* figma "Cold Grey" — card/skeleton fill */
  --border: #DDDDDD;

  --accent: #1570EE;         /* figma "Blue" — links, focus rings, highlights */
  --accent-ink: #FFFFFF;     /* text ON accent — paired per contrast rule */
  --accent-soft: #EAF2FE;

  --wa-green: #25D366;
  --wa-ink: #062B1A;
  --fb-blue: #0084FF;
  --fb-ink: #FFFFFF;

  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-sm: 12px;

  --shadow-sm: 0 8px 24px rgba(0,0,0,.10);
  --shadow-md: 0 16px 48px rgba(0,0,0,.12);
  --shadow-lift: 0 20px 40px rgba(0,0,0,.16);

  --max-width: 1200px;

  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(21,112,238,.15); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; height: auto; display: block; }
button, a { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 12px; color: var(--ink); font-weight: 700; }
h1 { font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.5px; }
h2 { font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.3px; }
h3 { font-size: 19px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); }
p { margin: 0 0 12px; color: var(--ink-soft); }
.muted { color: var(--ink-faint); font-size: 14px; }
.lead { font-size: 19px; color: var(--ink-soft); }
.kicker { display: inline-block; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.accent { color: var(--accent); }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Skip link: off-screen until keyboard focus, then a real visible control. The class
   was used in the markup on every page but had no rule at all, so the link rendered
   as stray "Skip to content" text above the header sitewide. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.visually-hidden:focus, .visually-hidden:focus-visible { position: fixed; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 12px 20px; clip: auto; clip-path: none; white-space: normal; background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); z-index: 200; }

/* ---------- Top utility bar ---------- */
.top-bar { background: var(--ink); color: var(--paper); font-size: 12.5px; padding: 8px 0; }
.top-bar .container { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.top-bar span { color: rgba(255,255,255,.75); }
.top-bar strong { color: var(--paper); }

/* ---------- Header / pill nav (figma pattern) ---------- */
.site-header { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 60; }
.header-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.logo-mark { width: 38px; height: 38px; flex-shrink: 0; }
.logo-text { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; }

.site-nav { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: var(--radius-pill); padding: 4px; }
.site-nav a { font-size: 14px; font-weight: 500; color: var(--ink-soft); padding: 9px 16px; border-radius: var(--radius-pill); transition: background .2s ease, color .2s ease; display: inline-flex; align-items: center; gap: 6px; }
.site-nav a:hover, .site-nav a.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.nav-badge-new { background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); letter-spacing: .3px; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink); border: none; cursor: pointer; transition: background .2s ease; }
.header-icon-btn:hover { background: var(--surface-2); }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Buttons — pill shape, per figma ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; transition: transform .2s cubic-bezier(.2,1.2,.3,1), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #1a1a1a; color: var(--paper); box-shadow: var(--shadow-lift); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sm); }

.btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(21,112,238,.28); }
.btn-accent:hover { background: #0F5FD1; color: var(--accent-ink); box-shadow: 0 14px 36px rgba(21,112,238,.4); }

.btn-wa { background: var(--wa-green); color: var(--wa-ink); box-shadow: 0 8px 24px rgba(37,211,102,.28); }
.btn-wa:hover { background: #22c15e; color: var(--wa-ink); box-shadow: 0 14px 36px rgba(37,211,102,.4); }

.btn-fb { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-fb:hover { color: var(--fb-blue); border-color: var(--fb-blue); background: var(--paper); }

.btn-sm { padding: 10px 18px; font-size: 13.5px; }
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-pill-badge { background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); margin-left: 2px; }

/* ---------- Trust badge (Google-rating style, per figma hero) ---------- */
.rating-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.rating-badge .stars { color: #F5A623; letter-spacing: 1px; }

/* ---------- Tag pills (hero category chips, per figma) ---------- */
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.tag-pill { background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-size: 13.5px; font-weight: 500; padding: 7px 16px; border-radius: var(--radius-pill); }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 72px; background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero-copy h1 { margin-bottom: 4px; }
.hero-copy .h1-sub { display: block; color: var(--ink-faint); font-weight: 600; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero-media { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); aspect-ratio: 4/3; box-shadow: var(--shadow-md); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Section titles ---------- */
.section { padding: 64px 0; }
.section-alt { background: var(--surface); }
.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.section-title h2 { margin: 0; }
.section-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 12px 24px; border-radius: var(--radius-pill); background: var(--surface); transition: background .2s ease; }
.section-link:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- Category cards ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.category-card { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.2,1,.3,1), box-shadow .25s ease; text-decoration: none; color: var(--ink); }
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); color: var(--ink); }
.category-card-media { aspect-ratio: 4/3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.category-card-media svg { width: 64px; height: 64px; color: var(--ink-faint); }
.category-card-body { padding: 20px 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.category-card-body h3 { margin: 0; }
.category-card-count { font-size: 12.5px; color: var(--ink-faint); }
.category-card-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease, transform .2s ease; }
.category-card:hover .category-card-arrow { background: var(--ink); color: var(--paper); transform: rotate(45deg); }

/* ---------- Info cards + tick list (request page) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.card { background: var(--surface); border-radius: var(--radius-card); padding: 26px 24px; }
.card h3 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.card p { margin: 0; font-size: 15px; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 13px 32px; }
.tick-list li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.tick-list li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ---------- Product grid + cards ---------- */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filter-chip { background: var(--surface); border: 1px solid transparent; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; padding: 9px 18px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); cursor: pointer; transition: all .2s ease; }
.filter-chip:hover { background: var(--surface-2); }
.filter-chip.is-active { background: var(--ink); color: var(--paper); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.product-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; transition: transform .25s cubic-bezier(.2,1,.3,1), box-shadow .25s ease; position: relative; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.product-link { display: block; position: relative; }
.product-img-wrap { aspect-ratio: 1/1; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-img { width: 100%; height: 100%; object-fit: cover; }
.product-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.product-img-placeholder svg { width: 56px; height: 56px; color: var(--ink-faint); }
.product-soldout-badge { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); }
.product-body { padding: 16px 18px 18px; }
.product-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.product-name { font-size: 15.5px; font-weight: 600; margin: 4px 0 6px; line-height: 1.3; }
.product-desc { font-size: 13px; color: var(--ink-faint); margin: 0 0 10px; line-height: 1.5; }
.product-price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.product-price { font-size: 15px; font-weight: 700; color: var(--ink); }
.product-price.is-contact { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.product-actions--icons { display: flex; gap: 8px; }
/* These two are the WhatsApp/Messenger order buttons on every card — the only way an
   order starts on this site, and they were the smallest targets on the page at 36px. */
.product-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .2s ease; }
.product-icon-btn:hover { transform: scale(1.08); }
.product-icon-wa { background: var(--wa-green); color: var(--wa-ink); }
.product-icon-fb { background: var(--fb-blue); color: var(--fb-ink); }

/* ---------- Skeleton loaders ---------- */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.skeleton-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.skeleton-img { aspect-ratio: 1/1; background: var(--surface-2); animation: pulse 1.4s ease-in-out infinite; }
.skeleton-body { padding: 16px 18px; }
.skeleton-line { height: 12px; background: var(--surface-2); border-radius: 6px; margin-bottom: 10px; animation: pulse 1.4s ease-in-out infinite; }
.skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.h-32 { height: 16px; }
.skeleton-cta { height: 32px; background: var(--surface-2); border-radius: var(--radius-pill); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 48px 24px; grid-column: 1 / -1; }
.empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { max-width: 420px; margin: 0 auto 20px; }

/* ---------- FAQ accordion (figma "+" rotate pattern) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq-item { background: var(--surface); border-radius: var(--radius-sm); padding: 4px 24px; }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; font-weight: 600; font-size: 15.5px; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .25s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.faq-answer { padding: 0 0 20px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }

/* ---------- CTA banner (figma footer-CTA pattern) ---------- */
.cta-banner { background: var(--ink); color: var(--paper); border-radius: var(--radius-card); padding: 56px 40px; text-align: center; margin: 0 24px; }
.cta-banner h2 { color: var(--paper); }
.cta-banner p { color: rgba(255,255,255,.7); max-width: 520px; margin: 0 auto 24px; }
.cta-banner .hero-cta { justify-content: center; }
.cta-banner .btn-outline { color: var(--paper); border-color: rgba(255,255,255,.3); }
.cta-banner .btn-outline:hover { border-color: var(--paper); }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); padding: 64px 0 28px; margin-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p { max-width: 320px; font-size: 14px; }
.footer-col h4 { color: var(--ink); margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.footer-col a { font-size: 14px; color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-faint); }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: background .2s ease, color .2s ease; }
.footer-social a:hover { background: var(--ink); color: var(--paper); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 13px; color: var(--ink-faint); padding: 18px 0; }
.breadcrumb a { color: var(--ink-faint); display: inline-block; padding: 6px 2px; }
.pd-specs td a { display: inline-block; padding: 12px 2px; }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Toast ---------- */
.tk-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; padding: 14px 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 200; max-width: 90vw; text-align: center; }
.tk-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Product detail page ---------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 32px 0 64px; }
.pd-gallery { border-radius: var(--radius-card); overflow: hidden; background: var(--surface); aspect-ratio: 1/1; }
.pd-info h1 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 8px; }
.pd-price { font-size: 24px; font-weight: 700; margin: 12px 0 20px; }
.pd-specs { margin: 24px 0; border-top: 1px solid var(--border); padding-top: 20px; }
.pd-specs table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-specs td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.pd-specs td:first-child { color: var(--ink-faint); width: 40%; }
.pd-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.pd-cta .btn { flex: 1; min-width: 160px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; aspect-ratio: 16/10; }
  .hero-media:not(:has(img)) { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 780px) {
  /* The closed drawer parks at right:-100%, i.e. a fixed 320px box sitting one full
     viewport to the right. That box counted toward scrollWidth, so every page could be
     swiped sideways into 390px of blank white on a phone (measured at 390px: scrollWidth
     780 against a 390 viewport). Clipping the horizontal axis kills the phantom scroll;
     the drawer still slides in because it is position:fixed, which this does not clip. */
  html, body { overflow-x: hidden; }
  .site-nav { position: fixed; top: 0; right: -100%; height: 100vh; width: min(320px, 86vw); background: var(--paper); flex-direction: column; align-items: stretch; border-radius: 0; padding: 90px 24px 24px; box-shadow: var(--shadow-lift); transition: right .3s cubic-bezier(.2,1,.3,1); z-index: 70; }
  .site-nav.is-open { right: 0; }
  .site-nav a { padding: 14px 16px; border-radius: var(--radius-sm); }
  .nav-toggle { display: inline-flex; }
  .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 65; }
  .nav-scrim.is-open { display: block; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-banner { padding: 40px 24px; margin: 0 16px; }
}
@media (max-width: 640px) {
  .section { padding: 44px 0; }
  .container { padding: 0 18px; }
  .hero { padding: 36px 0 48px; }
}
@media (max-width: 380px) {
  .btn { padding: 12px 20px; font-size: 14px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}