/* =============================================================
   responsive.css — Mobile responsive overrides for all themes
   These themes were built desktop-first (Tailwind, no breakpoint
   prefixes). This file retrofits proper mobile behaviour via
   scoped media queries + !important.
   Loaded from every theme page: <link rel="stylesheet" href="../responsive.css">

   Breakpoints:
     ≤ 1279px  Small desktop / large tablet  -- gentle scale-down
     ≤ 1023px  Tablet                        -- stack sidebars, simplify grids
     ≤ 767px   Mobile                        -- single column flows, hide sliders
     ≤ 420px   Tiny phone                    -- final compaction
   ============================================================= */


/* ====================================================================
   SMALL DESKTOP / LARGE TABLET  (≤ 1279px) — gentle compaction
   ==================================================================== */
@media (max-width: 1279px) {
  .max-w-7xl { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .gap-16 { gap: 2rem !important; }
}


/* ====================================================================
   TABLET  (≤ 1023px) — break wide multi-column layouts
   ==================================================================== */
@media (max-width: 1023px) {

  /* ---- Fixed-px hero grids (sidebar + main + ads) ---- */
  [class*="grid-cols-[180px_1fr_160px]"],
  [class*="grid-cols-[200px_1fr_170px]"],
  [class*="grid-cols-[200px_1fr]"],
  [class*="grid-cols-[180px_1fr]"] {
    grid-template-columns: 1fr !important;
  }

  /* On tablet, the right-side mini-banner column reverts to a 2-up row */
  [class*="grid-cols-[180px_1fr_160px]"] > .flex.flex-col,
  [class*="grid-cols-[200px_1fr_170px]"] > .flex.flex-col {
    flex-direction: row !important;
  }
  [class*="grid-cols-[180px_1fr_160px]"] > .flex.flex-col > *,
  [class*="grid-cols-[200px_1fr_170px]"] > .flex.flex-col > * {
    flex: 1 1 0% !important;
  }

  /* ---- 5+ column product/category Tailwind grids → 3 cols ---- */
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* ---- Wrap side-by-side product/cart/checkout flex layouts ---- */
  .flex:has(> .w-44.flex-shrink-0),
  .flex:has(> .w-48.flex-shrink-0),
  .flex:has(> .w-52.flex-shrink-0),
  .flex:has(> .w-56.flex-shrink-0),
  .flex:has(> .w-60.flex-shrink-0),
  .flex:has(> .w-64.flex-shrink-0),
  .flex:has(> .w-72.flex-shrink-0),
  .flex:has(> .w-80.flex-shrink-0),
  .flex:has(> .w-96.flex-shrink-0),
  .flex:has(> .flex-shrink-0[class*="w-"]),
  .flex:has(> aside.flex-shrink-0),
  .flex:has(> [class*="w-[420px]"]),
  .flex:has(> [class*="w-[400px]"]),
  .flex:has(> [class*="w-[380px]"]),
  main > .flex.gap-6,
  main > .flex.gap-8,
  body > div > .flex.gap-6,
  body > div > .flex.gap-8,
  .max-w-7xl.flex.gap-6,
  .max-w-7xl.flex.gap-8,
  .max-w-7xl.flex.gap-4 {
    flex-wrap: wrap !important;
  }

  /* Sidebars become full width when the parent wraps */
  .w-44.flex-shrink-0,
  .w-48.flex-shrink-0,
  .w-52.flex-shrink-0,
  .w-56.flex-shrink-0,
  .w-60.flex-shrink-0,
  .w-64.flex-shrink-0,
  .w-72.flex-shrink-0,
  .w-80.flex-shrink-0,
  .w-96.flex-shrink-0,
  [class*="w-[420px]"].flex-shrink-0,
  [class*="w-[400px]"].flex-shrink-0,
  [class*="w-[380px]"].flex-shrink-0,
  aside.flex-shrink-0 {
    width: 100% !important;
    flex-shrink: 1 !important;
    max-width: 100% !important;
  }

  /* Shrink huge desktop gaps */
  .gap-16 { gap: 1.5rem !important; }
  .gap-12 { gap: 1.25rem !important; }
  .gap-10 { gap: 1rem !important; }
}


/* ====================================================================
   MOBILE  (≤ 767px) — single column, hide slider controls
   ==================================================================== */
@media (max-width: 767px) {

  /* ---------------------------------------------------------------
     SLIDER / CAROUSEL HANDLING
     Hero carousels exist in: theme-bold, theme-bold-blue,
     theme-bold-red, theme-elegant, theme-food, theme-jewel.
     On mobile we:
       1) Hide the prev/next arrows + dots indicator
       2) Stop auto-rotation visually by collapsing the slider to a
          single static hero (still readable, still on-brand)
       3) Cap hero height so it doesn't dominate the viewport
     The auto-rotate JS keeps running but the controls are gone, so
     mobile users see whatever slide is current — which is fine; the
     content beneath becomes the focus.
     --------------------------------------------------------------- */

  /* Hide carousel navigation buttons (arrow left/right) */
  #heroBanner > button,
  #carousel > button,
  #heroBanner [onclick*="heroPrev"],
  #heroBanner [onclick*="heroNext"],
  #carousel [onclick*="prev"],
  #carousel [onclick*="next"] {
    display: none !important;
  }

  /* Hide carousel dot indicators */
  #heroDots,
  #dots,
  #carousel #dots,
  #heroBanner #heroDots {
    display: none !important;
  }

  /* Cap hero/carousel heights on mobile so they fit one fold */
  #heroBanner,
  #carousel,
  [class*="h-[320px]"],
  [class*="h-[300px]"],
  [class*="h-[340px]"],
  [class*="h-[360px]"],
  [class*="h-[380px]"],
  [class*="h-[400px]"],
  [class*="h-[420px]"],
  [class*="h-[440px]"],
  [class*="h-[450px]"],
  [class*="h-[480px]"],
  [class*="h-[500px]"],
  [class*="h-[520px]"],
  [class*="h-[540px]"],
  [class*="h-[560px]"],
  [class*="h-[580px]"],
  [class*="h-[600px]"],
  [class*="h-[650px]"],
  [class*="h-[700px]"] {
    height: 260px !important;
    min-height: 0 !important;
  }
  .h-80 { height: 14rem !important; }
  .h-96 { height: 16rem !important; }
  [class*="h-[150px]"] { height: 110px !important; }

  /* Slider inner content padding — tighten so text fits */
  #heroBanner .p-8,
  #heroBanner .p-12,
  #heroBanner [class*="px-12"],
  #carousel [class*="px-12"],
  .relative.h-\[380px\] [class*="px-12"],
  .relative.h-\[360px\] [class*="px-12"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Slider headline + body text scale down */
  #heroTitle,
  #slideTitle,
  #heroBanner h1,
  #heroBanner h2,
  #carousel h1,
  #carousel h2 {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
  }
  #heroSub,
  #heroPrice,
  #slidePrice,
  #slideEyebrow,
  #heroMeta,
  #heroTag,
  #slideTag {
    font-size: 0.8125rem !important;
  }
  #heroBanner .text-4xl,
  #heroBanner .text-5xl,
  #carousel .text-4xl,
  #carousel .text-5xl {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }


  /* ---------------------------------------------------------------
     GRIDS — collapse to 2 columns
     --------------------------------------------------------------- */
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Footer grids — always 2 cols on mobile */
  footer .grid-cols-4,
  footer .grid-cols-3,
  footer .grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }


  /* ---------------------------------------------------------------
     PADDING / SPACING SCALE
     --------------------------------------------------------------- */
  .max-w-7xl.px-8,
  .max-w-7xl > .px-8,
  section .px-8,
  footer .px-8,
  header .px-8,
  nav .px-8,
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .px-12 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .py-10 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-14 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .p-8  { padding: 1.25rem !important; }
  .p-12 { padding: 1.5rem !important; }

  /* Tighter grid gaps */
  .gap-5 { gap: 0.75rem !important; }
  .gap-6 { gap: 0.75rem !important; }
  .gap-8 { gap: 1rem !important; }
  .gap-10 { gap: 1rem !important; }
  .gap-12 { gap: 1.25rem !important; }
  .gap-16 { gap: 1.5rem !important; }


  /* ---------------------------------------------------------------
     TYPOGRAPHY — heading scale-down
     --------------------------------------------------------------- */
  .text-6xl { font-size: 2.5rem !important; line-height: 1.05 !important; }
  .text-5xl { font-size: 2.125rem !important; line-height: 1.1 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.15 !important; }
  .text-3xl { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .text-2xl { font-size: 1.25rem !important; line-height: 1.25 !important; }


  /* ---------------------------------------------------------------
     TOP INFO STRIPS — hide secondary clutter, keep promo
     --------------------------------------------------------------- */
  [class*="h-9"][class*="flex"][class*="justify-between"] > div:first-child,
  [class*="h-9"][class*="flex"][class*="justify-between"] > div:last-child {
    display: none !important;
  }
  [class*="h-9"][class*="flex"][class*="justify-between"] {
    justify-content: center !important;
  }
  div.h-12.flex.items-center.justify-between > div:first-child,
  div.h-12.flex.items-center.justify-between > div:last-child,
  [class*="h-12"].flex.items-center.justify-between > div.flex.items-center.gap-6,
  [class*="h-12"].flex.items-center.justify-between > div.flex.items-center.gap-5 {
    display: none !important;
  }
  div.h-12.flex.items-center.justify-between {
    justify-content: center !important;
  }


  /* ---------------------------------------------------------------
     MAIN STORE HEADER — wrap so search drops to its own row
     --------------------------------------------------------------- */
  header .max-w-7xl.h-16,
  header .max-w-7xl[class*="h-16"],
  header .max-w-7xl.h-20,
  header .max-w-7xl[class*="h-20"] {
    height: auto !important;
    min-height: 4rem;
    flex-wrap: wrap !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    gap: 0.5rem !important;
  }
  header .max-w-7xl.h-16 > .flex-1,
  header .max-w-7xl[class*="h-16"] > .flex-1 {
    flex-basis: 100% !important;
    order: 99;
  }

  /* Hide desktop inline header navs (elegant, jewel, organic, pharmacy) */
  header nav.flex,
  header > div > nav,
  header > div > div > nav {
    display: none !important;
  }

  /* Header flex items need min-width:0 to actually shrink */
  header .flex > *,
  header .flex select,
  header .flex input,
  header .flex button {
    min-width: 0 !important;
  }
  header select { max-width: 35vw !important; }
  header input[type="text"],
  header input[type="search"],
  header input:not([type]) {
    min-width: 0 !important;
    width: auto !important;
  }
  header .max-w-2xl,
  header .max-w-xl,
  header .max-w-lg {
    max-width: 100% !important;
  }

  /* Cart button — compact */
  header a[href*="cart"].flex-shrink-0 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }


  /* ---------------------------------------------------------------
     CATEGORY / NAV STRIPS — horizontal scroll
     --------------------------------------------------------------- */
  nav > div.flex,
  nav > .max-w-7xl > .flex,
  nav .flex.items-center.gap-1,
  nav .flex.items-center.gap-2,
  nav .flex.items-center.gap-4,
  nav .flex.items-center.gap-6,
  nav .flex.items-center.gap-8 {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav > div.flex::-webkit-scrollbar,
  nav .flex.items-center::-webkit-scrollbar { display: none; }
  nav .overflow-x-auto { scrollbar-width: none; }
  nav .overflow-x-auto::-webkit-scrollbar { display: none; }

  /* Centred nav (elegant) → left-align + scroll */
  nav .flex.items-center.justify-center.gap-8,
  nav .flex.items-center.justify-center.gap-6 {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  nav .flex.items-center.justify-center.gap-8 > a,
  nav .flex.items-center.justify-center.gap-6 > a {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Product tab rows (Description / Reviews / FAQ) */
  .flex.border-b,
  .flex.gap-1.border-b,
  .flex.gap-2.border-b,
  div.flex.border-b.border-gray-200,
  div.flex.border-b.border-gray-100 {
    overflow-x: auto !important;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .flex.border-b::-webkit-scrollbar { display: none; }


  /* ---------------------------------------------------------------
     CART / PRODUCT / CHECKOUT — stack everything
     --------------------------------------------------------------- */

  /* Product page galleries / thumbs */
  .flex.gap-8 > .w-80.flex-shrink-0,
  .flex.gap-6 > .w-80.flex-shrink-0,
  .flex.gap-8 > .w-72.flex-shrink-0,
  .flex.gap-6 > .w-72.flex-shrink-0,
  .flex.gap-8 > .w-56.flex-shrink-0,
  .flex.gap-6 > .w-56.flex-shrink-0 {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* Fixed-width side panels (cart summary, filter sidebar) → full width */
  .w-44.flex-shrink-0,
  .w-48.flex-shrink-0,
  .w-52.flex-shrink-0,
  .w-56.flex-shrink-0,
  .w-60.flex-shrink-0,
  .w-64.flex-shrink-0,
  .w-72.flex-shrink-0,
  .w-80.flex-shrink-0,
  .w-96.flex-shrink-0,
  aside.flex-shrink-0,
  [class*="w-[420px]"],
  [class*="w-[400px]"],
  [class*="w-[380px]"] {
    width: 100% !important;
    flex-shrink: 1 !important;
    max-width: 100% !important;
  }

  /* Shop filter sidebar — fold into a top accordion section */
  aside.w-56.flex-shrink-0,
  aside.w-60.flex-shrink-0,
  aside.w-64.flex-shrink-0 {
    width: 100% !important;
    flex-shrink: 1 !important;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 1rem;
  }

  /* Sticky panels unstick on mobile so they don't overlap content */
  .sticky.top-4,
  .sticky.top-6,
  .sticky.top-8 { position: static !important; }

  /* Cart line items wrap */
  .flex.items-center.gap-4.py-4,
  .flex.items-center.gap-4.py-5,
  .flex.items-center.gap-4.py-6 {
    flex-wrap: wrap !important;
  }

  /* Cart thumbnail shrinks */
  .flex.items-center img.w-20,
  .flex.items-center img.w-24 {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* Table on cart pages */
  table.w-full { font-size: 0.8125rem !important; }


  /* ---------------------------------------------------------------
     FORM CONTROLS — never push layout out
     --------------------------------------------------------------- */
  select {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  input, textarea {
    max-width: 100% !important;
  }


  /* ---------------------------------------------------------------
     THEME PICKER DOCK — shrink to fit mobile
     --------------------------------------------------------------- */
  #tpicker-root .tp-dock {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px !important;
    max-width: calc(100vw - 24px);
  }
  #tpicker-root .tp-dock .tp-badge { display: none; }
  #tpicker-root .tp-dock .tp-label { display: none; }
  #tpicker-root .tp-panel {
    width: calc(100vw - 24px) !important;
    max-width: 340px;
  }
  #tpicker-root { bottom: 12px !important; }


  /* ---------------------------------------------------------------
     ROOT LANDING PAGE — modal preview adjustments
     --------------------------------------------------------------- */
  .tmpl-modal {
    height: 92vh !important;
    border-radius: 10px !important;
  }
  .tmpl-modal-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .tmpl-modal-url { flex-basis: 100%; order: 3; font-size: 11px !important; }
  .tmpl-modal-pages {
    flex-basis: 100%;
    order: 4;
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .tmpl-modal-page-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
  .tmpl-page-tabs .tmpl-page-tab {
    font-size: 9px !important;
    padding: 6px 2px !important;
    letter-spacing: 0.03em !important;
  }
}


/* ====================================================================
   TINY PHONE  (≤ 420px) — final compaction
   ==================================================================== */
@media (max-width: 420px) {
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl  { font-size: 1.0625rem !important; }
  header a.text-2xl,
  header a[class*="text-2xl"] { font-size: 1.125rem !important; }

  /* Hero — even shorter on tiny screens */
  #heroBanner,
  #carousel,
  [class*="h-[320px]"],
  [class*="h-[360px]"],
  [class*="h-[380px]"],
  [class*="h-[400px]"],
  [class*="h-[450px]"],
  [class*="h-[480px]"],
  [class*="h-[500px]"],
  [class*="h-[520px]"],
  [class*="h-[560px]"],
  [class*="h-[600px]"] {
    height: 220px !important;
  }

  /* Footer 4-col → 1 col */
  footer .grid-cols-4 { grid-template-columns: 1fr !important; }

  /* Flash-deal countdown chip wraps */
  #countdown { display: inline-block; margin-top: 4px; }

  /* Trust strips with multiple icons → 2 cols */
  .grid-cols-3.text-center,
  .grid-cols-4.text-center {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}