/* ═══════════════════════════════════════════════════════════════
   T3 SPORTS — Mobile Fixes (≤480 px / iPhone SE 1st-gen, 320 px)
   Loaded after every page's own <style> block so it overrides.
   ui-ux-pro-max checklist: touch targets ≥44 px, font ≥16 px on inputs
   (no iOS zoom), no horizontal scroll, single-col footer.
═══════════════════════════════════════════════════════════════ */

/* ── 480 px and below ── */
@media (max-width: 480px) {

  /* Announcement bar — single line, smaller, dismiss tap target preserved */
  #anno-bar, #annoBar, [id^="anno"] {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    padding: 8px 36px 8px 12px !important;
    line-height: 1.45 !important;
  }
  #anno-bar button, #annoBar button { right: 6px !important; width: 44px !important; height: 44px !important; }
  #anno-bar button .mat, #annoBar button .mat { font-size: 16px !important; }

  /* Header padding tightened */
  header > div, header > nav { padding-left: 12px !important; padding-right: 12px !important; }
  /* Logo size */
  header a[href="index.html"].font-display, header a[href="/"].font-display {
    font-size: 18px !important;
    letter-spacing: -0.03em !important;
  }
  /* Header icon buttons — keep ≥44 px touch */
  header [aria-label="Search"], header [aria-label="Account"],
  header [aria-label="My account"], header [aria-label="Cart"],
  header [aria-label="Open menu"] {
    width: 44px !important; height: 44px !important;
  }
  header [aria-label] .mat { font-size: 20px !important; }
  /* Cart badge nudge */
  header [aria-label="Cart"] span[class*="bg-primary"],
  header [aria-label="Cart"] span[class*="rounded-full"] {
    top: 4px !important; right: 2px !important;
  }

  /* WCAG 44×44 tap targets — listing card wishlist, filter trigger, drawer close */
  .wish-btn { width: 44px !important; height: 44px !important; top: 8px !important; right: 8px !important; }
  .wish-btn .mat { font-size: 18px !important; }
  .filter-trigger { min-height: 44px !important; min-width: 44px !important; padding: 12px 18px !important; }
  .drawer-close { width: 44px !important; height: 44px !important; }
  /* Tap-active feedback on mobile nav sub-expand */
  .mn-sub-expand:active { background: #E3F2FD !important; color: #1565C0 !important; }

  /* Hero — let content dictate height; cap font so 3-line title fits comfortably.
     Previous version forced 480px min-height + 52px font, pushing eyebrow + CTA
     off-screen on iPhone SE / 14. New: auto height with vertical padding, smaller
     responsive font that still hero-scales on bigger phones.
     NOTE: tablet (481-1023px) rule is in a separate @media block below so iPads
     don't get the desktop `min-height: 680px` that dominates their viewport. */
  #hero {
    min-height: auto !important;
    height: auto !important;
    padding: 48px 16px 56px !important;
  }
  #hero h1, #hero h1.h-title {
    font-size: clamp(1.7rem, 9vw, 3rem) !important;
    line-height: 1.02 !important;
    margin-top: 12px !important;
    margin-bottom: 14px !important;
    max-width: 22ch !important;
  }
  #hero h2 { font-size: 10px !important; letter-spacing: 0.18em !important; }
  #hero p { font-size: 10px !important; letter-spacing: 0.18em !important; }
  #hero a[class*="bg-white"] { padding: 14px 28px !important; font-size: 10px !important; }
  /* Trust-row / brand-chips secondary content — shrink so above-fold stays clean */
  #hero .h-trust { padding: 8px 12px !important; gap: 10px !important; }
  #hero .h-eyebrow { font-size: 10px !important; }

  /* Section vertical padding */
  section.py-16, section.py-20, section.md\:py-20,
  section[class*="py-14"], section[class*="py-12"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  section .max-w-\[1440px\], section .max-w-\[1100px\], section .max-w-\[1200px\] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section headers (h2 main) */
  section h2.font-display.font-black { font-size: clamp(20px, 6vw, 28px) !important; }

  /* Top Selling Categories — keep 2-col, tighter, mobile-effect substitute */
  .shop-cat-card { aspect-ratio: 4 / 5; border-radius: 10px; }
  .shop-cat-card .cat-overlay { padding: 14px !important; }
  .cat-title { font-size: 16px !important; line-height: 1.1 !important; }
  .cat-eyebrow { font-size: 9px !important; opacity: 1 !important; transform: none !important; }
  .cat-cta { max-width: 240px !important; opacity: 1 !important; font-size: 9px !important; padding-top: 6px !important; }
  .cat-cta-arrow { font-size: 14px !important; }

  /* Tap feedback (substitute for desktop hover) */
  .shop-cat-card:active { transform: scale(0.97) !important; transition: transform .12s ease !important; }
  .shop-cat-card:active .cat-art { transform: scale(1.04) !important; filter: saturate(1.2) !important; transition: transform .35s ease, filter .35s ease !important; }
  .shop-cat-card:active::before { opacity: 0.92 !important; }
  .shop-cat-card:active::after { box-shadow: inset 0 0 0 2px rgba(21,101,192,0.7) !important; }

  /* Scroll-into-view: shimmer sweep + zoom-settle (runs once via JS observer) */
  .shop-cat-card.in-view .cat-shimmer::after { animation: mShimSweep 1.05s cubic-bezier(.22,1,.36,1) forwards; }
  .shop-cat-card.in-view .cat-art { animation: mZoomSettle 1.6s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes mShimSweep { 0% { left: -75%; } 100% { left: 130%; } }
  @keyframes mZoomSettle { 0% { transform: scale(1.06); filter: saturate(1.25); } 100% { transform: scale(1); filter: saturate(1); } }

  /* Top Selling Products grid — single col under 360px */
  /* (default 2 col stays at 360-480) */

  /* Brands carousel — smaller, no arrows */
  .brand-arrow { display: none !important; }
  .brand-fade { display: none !important; }
  .brand-row { padding: 8px 16px !important; gap: 36px !important; }
  .brand-card { min-width: 100px !important; height: 52px !important; font-size: 18px !important; }

  /* Featured slides — buttons stack, slide padding tighter, prev/next arrows hidden */
  #feat-wrap { min-height: 460px !important; }
  .feat-slide { padding: 24px 18px 64px !important; } /* extra bottom padding for dots */
  .feat-slide h2 { font-size: clamp(28px, 9vw, 44px) !important; margin-bottom: 16px !important; }
  .feat-slide p[class*="tracking-[0.3em]"] { font-size: 9px !important; letter-spacing: 0.2em !important; margin-bottom: 12px !important; }
  .feat-slide .flex.flex-col.gap-3 { gap: 6px !important; margin-bottom: 18px !important; }
  .feat-slide .feat-link span:last-child { font-size: 10px !important; letter-spacing: 0.12em !important; }
  .feat-slide .feat-dash { width: 14px !important; }
  .feat-slide .flex.flex-wrap.gap-3 { flex-direction: column !important; gap: 8px !important; }
  .feat-slide .flex.flex-wrap.gap-3 > a {
    display: block !important; text-align: center !important;
    width: 100% !important; padding: 12px 14px !important;
    font-size: 10px !important; letter-spacing: 0.14em !important;
  }
  /* Decorative big background word smaller */
  .feat-slide [aria-hidden] span { font-size: 28vw !important; opacity: 0.04 !important; }
  /* HIDE prev/next arrows on mobile — they block content. Use swipe + dots instead. */
  section > button[onclick^="goFeatSlide"] { display: none !important; }
  /* Bigger dots, easier to tap, brighter */
  .feat-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; min-width: 10px; }

  /* Trust bar — 2 cols stay, smaller icons */
  section.bg-zinc-50 .grid.md\:grid-cols-4 .mat { font-size: 24px !important; }

  /* Newsletter input + button stack on small */
  #nl-form { flex-direction: column !important; max-width: 100% !important; gap: 8px !important; }
  #nl-form input, #nl-form button {
    width: 100% !important;
    border-radius: 0 !important;
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 14px !important;
  }

  /* Footer columns — 1 col stack */
  footer .grid.md\:grid-cols-4, footer .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  footer h3 { font-size: 11px !important; }
  footer .border-t { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }

  /* Forms — prevent iOS zoom (must be ≥16 px) */
  input, select, textarea { font-size: 16px !important; }

  /* Cart / checkout — single-col layout, stack qty + price */
  .product-card, .cart-row { flex-wrap: wrap !important; padding: 12px !important; }

  /* Listing pages — single column products on smallest, 2-col on 360+ */
  #productGrid { gap: 12px !important; }

  /* Megamenu — already hidden via lg:flex; ensure mobile drawer handles */

  /* Track-order, feedback, help-support — full-bleed forms */
  .t3-btn { width: 100% !important; }

  /* Tier flyout / megamenu sub-sub — irrelevant on mobile (no hover), hide */
  .mm-tier-flyout { display: none !important; }

  /* Help-support — quick action grid 2-col */
  #section-help .quick-card, .quick-card { padding: 14px !important; }

  /* Feature cards padding */
  .feature-card, .promo-card { padding: 16px !important; }

  /* Buttons in cards — full width if standalone */
  .add-to-cart-btn { font-size: 11px !important; padding: 10px !important; }

  /* Modal — full screen on mobile */
  .modal { padding: 16px !important; max-width: 100% !important; }

  /* Hide heavy decorative SVG/blob elements that break layout */
  [aria-hidden="true"][class*="-translate-x"][class*="-translate-y"] { transform: none; }

  /* Killing horizontal scroll caused by anything off-screen */
  html, body { overflow-x: hidden !important; }
  body > * { max-width: 100vw; }
}

/* ── 360 px and below (iPhone SE / small Android) ── */
@media (max-width: 360px) {

  header a[href="index.html"].font-display { font-size: 16px !important; }
  #anno-bar, #annoBar, [id^="anno"] {
    font-size: 8.5px !important;
    padding: 7px 32px 7px 10px !important;
  }
  #hero h1 { font-size: clamp(2rem, 14vw, 3.5rem) !important; }

  /* Top Selling Products — 1 col under 360 */
  section .grid.grid-cols-2.md\:grid-cols-3 { grid-template-columns: 1fr !important; }

  /* Top Selling Categories stays 2 col */
  section .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Listing product grid — 1 col */
  #productGrid { grid-template-columns: 1fr !important; }

  .cat-title { font-size: 14px !important; }
  .cat-overlay { padding: 12px !important; }

  /* Trust bar 2x2 instead of 4 wide */
  section.bg-zinc-50 .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET 481-1023 px — iPad portrait + landscape, Android tablets
   Plugs the gap between mobile (≤480) and desktop (≥1024). Without
   this block, tablets inherit desktop's `min-height: 680px` hero
   which dominates the iPad portrait viewport.
═══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 1023px) {
  #hero {
    min-height: 540px !important;
    height: auto !important;
    padding: 56px 24px 64px !important;
  }
  #hero h1, #hero h1.h-title {
    font-size: clamp(2.4rem, 6vw, 4.4rem) !important;
    line-height: 1.02 !important;
    max-width: 20ch !important;
    margin-top: 16px !important;
    margin-bottom: 18px !important;
  }
  #hero h2 { font-size: 11px !important; letter-spacing: 0.18em !important; }
  #hero .h-trust { padding: 10px 14px !important; gap: 12px !important; }

  /* Tablet header — hamburger button bigger touch target (mobile.css only
     forces 44px ≤480, so 481-1023 was left at 40px). */
  header [aria-label="Open menu"],
  header button[aria-label*="menu" i] {
    width: 44px !important; height: 44px !important;
  }

  /* Listing grid — at iPad portrait 768px, 2-col 4/5 cards too tall. Use 3-col. */
  #productGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ── prefers-reduced-motion already honored upstream — nothing extra ── */

/* ─── T3 Sports logo: responsive sizing (added 2026-05-24) ──────── */
.t3-logo-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  margin-left: -12px;
}
.t3-logo-mark     { height: 30px; width: auto; display: block; }
.t3-logo-wordmark { height: 15px; width: auto; display: block; }
/* Laptop (≤1280px): trim slightly so nav fits */
@media (max-width: 1280px) {
  .t3-logo-row { margin-left: -10px; gap: 5px; }
  .t3-logo-mark     { height: 26px; }
  .t3-logo-wordmark { height: 13px; }
}
/* Tablet (≤1024px): smaller */
@media (max-width: 1024px) {
  .t3-logo-row { margin-left: -8px; gap: 5px; }
  .t3-logo-mark     { height: 24px; }
  .t3-logo-wordmark { height: 12px; }
}
/* Mobile (≤640px): compact — keep brand readable but small */
@media (max-width: 640px) {
  .t3-logo-row { margin-left: -4px; gap: 4px; }
  .t3-logo-mark     { height: 22px; }
  .t3-logo-wordmark { height: 11px; }
}

/* Footer logo: invert to white on dark bg */
footer .t3-logo-row img,
.bg-black .t3-logo-row img,
[class*="bg-zinc-9"] .t3-logo-row img,
[class*="bg-gray-9"] .t3-logo-row img,
[class*="bg-slate-9"] .t3-logo-row img {
  filter: invert(1) brightness(1.05);
}

/* Footer logo: slightly bigger than header */
footer .t3-logo-row .t3-logo-mark { height: 36px; }
footer .t3-logo-row .t3-logo-wordmark { height: 18px; }

/* Tablet breakpoint fix: between 1024-1279px, hide nav and show hamburger.
   Default Tailwind lg: breakpoint (1024px) is too early for our nav width. */
@media (min-width: 1024px) and (max-width: 1279px) {
  header nav[aria-label="Site navigation"],
  header nav[aria-label="Main navigation"],
  header nav[aria-label="Primary navigation"] {
    display: none !important;
  }
  /* Force hamburger visible at tablet width */
  header .lg\:hidden,
  header [class*="lg:hidden"] {
    display: flex !important;
  }
}

/* Nav bias reset for narrow viewports — drop the 18% bias so nav doesn't crash */
@media (max-width: 1279px) {
  header nav[style*="margin-right:18%"] {
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* ─── Hide page-load progress bar (apexProgressBar). User found it
   distracting; was injected by polish.js as a thin blue strip on
   top of every page during nav transitions. Also nuke any other
   thin blue strip that may show via pseudo-elements or stray fixed
   div at top of page. ────────────────────────────────────────── */
#apexProgressBar,
#nprogress,
.nprogress,
.nprogress-bar,
.progress-bar-top,
#scroll-progress,
.scroll-progress-bar,
.page-progress {
  display: none !important;
}
html::before, html::after,
body::before, body::after {
  display: none !important;
  content: none !important;
}

/* Skip-link must stay HIDDEN unless keyboard-focused. Without this
   safeguard, the blue box was sometimes briefly visible at the top
   of the page during script init because the inline transition kicked
   in before focus was lost. Forces top:-100px until :focus-visible. */
.skip-link {
  position: absolute !important;
  top: -100px !important;
  left: 0 !important;
  transition: none !important;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0 !important;
  transition: top 0.15s ease !important;
}

/* Vercel preview-only: kill the staging banner that auto-injects on
   *.vercel.app URLs. User asked for the blue strip gone and this is
   currently the only orange/blue bar at top of every preview deploy. */
#t3StagingBanner { display: none !important; }

/* ─── Hamburger visibility on mobile/tablet (≤1023px) ─────────────
   Bigger + bolder + brand-blue background so users actually find
   the menu. Default 40x40 with thin border was too easy to miss. */
@media (max-width: 1023px) {
  header button[aria-label="Open menu"] {
    display: flex !important;
    width: 48px !important;
    height: 44px !important;
    border: 2px solid #1565C0 !important;
    border-radius: 10px !important;
    background: #1565C0 !important;
    color: #fff !important;
    margin-left: 4px;
  }
  header button[aria-label="Open menu"] .mat {
    color: #fff !important;
    font-size: 26px !important;
  }
  header button[aria-label="Open menu"]:hover,
  header button[aria-label="Open menu"]:active {
    background: #0D47A1 !important;
    border-color: #0D47A1 !important;
  }
  /* Defensive: hide mega-menu featured promo on narrow viewports too */
  .mega-menu .mm-featured { display: none !important; }
}

/* ─── Hide placeholder icon ::before when real product image is present.
   Listing cards had a rotated category icon as background decoration
   (.prod-img::before content: 'checkroom' / 'sports_hockey' / etc).
   When real product PNGs (puck, gloves) had transparent corners, the
   icon bled through and looked like a blue arrow/triangle overlay. */
.prod-img:has(img)::before {
  content: none !important;
  display: none !important;
}

/* ─── Listing-page filter accordion: collapsed by default ──────────
   User wants all SUBCATEGORY/PLAYER LEVEL/etc filter sections closed
   when the page first loads. Clicking a filter title toggles the
   `.collapsed` class (handler in listing-filters.js + inline onclick
   on static markup). Body hides via CSS. Chevron flips. */
.filter-section.collapsed .filter-body { display: none !important; }
.filter-section .filter-title .mat { transition: transform 0.2s ease; }
.filter-section.collapsed .filter-title .mat { transform: rotate(180deg); }

/* ─── Mega-menu featured-card images (replaces icon span) ─────────
   Drop-in images at assets/megamenu/{slug}.png — they slot into the
   same vertical position the .mm-feat-icon used to occupy. onerror
   in the inline HTML restores the original icon if the image is
   missing or broken, so menu never looks empty. */
.mm-feat-img {
  display: block;
  width: 88%;
  max-width: 180px;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  margin: 4px auto 12px;
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-featured:hover .mm-feat-img {
  transform: scale(1.04);
}

/* ─── Mega-menu showcase card (image + category title + subtitle) ─────
   Replaces the old product-card style (Velocity Pro 8000 / ₹63,990 /
   Shop Now). These cards are pure category-level showcases, not buy-now. */
.mm-feat-title {
  display: block !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
}
.mm-feat-sub {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  color: #64748b !important;
  margin-bottom: 14px;
  text-align: center;
}

/* ─── Temporarily disabled policy/help links ──────────────────────
   User asked to block Shipping Policy, Privacy Policy, Terms & Conditions,
   and Help & Support until copy is finalised. Anchors keep their original
   classes/markup so the footer layout doesn't shift; this class greys them
   out and stops navigation. Removing the class re-enables instantly. */
.policy-disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* ─── Material Symbols ligature text suppression ───────────────────
   When the Material Symbols font fails to load (slow mobile / iOS
   Safari / network blocked), the spans render their ligature
   keyword as plain text ("shopping_bag", "verified_user", etc.).
   Suppress that fallback by zeroing font-size on the span while
   the font isn't applied. The .mat / .material-symbols-outlined
   class itself sets font-family + size via inline style; ligature
   only resolves to an icon glyph when the font is loaded. If the
   font IS loaded the inline font-size wins and icons render fine. */
.mat, .material-symbols-outlined, .material-icons {
  font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
}
html:not(.icons-ready) .mat,
html:not(.icons-ready) .material-symbols-outlined,
html:not(.icons-ready) .material-icons {
  visibility: hidden !important;
}
/* If .icons-ready fires (8s timeout) but the font itself still hasn't
   loaded, hide the raw ligature text via inline-block + overflow.
   The font-family stack falls back to system sans, which DOES render
   the text — so we need to clip it.
   `font-feature-settings: "liga" 1` keeps real icons working when
   the actual font does load. */
.material-symbols-outlined, .mat {
  font-feature-settings: 'liga' 1, 'dlig' 1;
  -webkit-font-feature-settings: 'liga' 1, 'dlig' 1;
  font-variant-ligatures: discretionary-ligatures;
}