/* ============================================================
   Store themes — mobile layer (issue #182)

   The shared foundation mobile.css (issue #180) already fixes the
   things every storefront page has in common: no sideways scroll,
   one screen-edge padding, 44px tap targets, stacked cart and
   checkout. This file is the next layer: it makes the DISTINCT
   layout of each of the 8 store themes work on a phone.

   Load order: every theme head.php loads this file LAST, after the
   theme token sheet (bold.css, warm.css, marketplace.css, ...) and
   after mobile.css. That is what lets these rules win.

   Two rules for this file:
     1. Every layout rule lives inside a max-width @media block, so
        DESKTOP DOES NOT CHANGE. Only the :root token block is global.
     2. Selectors are scoped with [data-store-theme="<key>"] (or
        html:not([data-store-theme]) for the default Modern theme).
        That is two simple selectors, so it beats the one-class rules
        in the per-page inline <style> blocks without any !important.

   Theme identity (font, radius, button shape, colors) is NOT touched.
   Only size and layout change. The store color still comes from
   var(--accent) (color.php), so a non-orange store color still works.
   ============================================================ */

:root {
  /* Phone type scale for the big theme headlines. Each theme keeps its
     own display font; only the size comes down so it fits 375px. */
  --sf-t-display: 1.75rem;
  --sf-t-display-sm: 1.5rem;
  --sf-t-h1: 1.375rem;
  --sf-t-h2: 1.125rem;

  /* One rhythm for every theme on a phone: the gap above a section and
     the gap between the hero and the rest of the page. */
  --sf-t-section: var(--sp-8, 32px);
  --sf-t-hero-gap: var(--sp-6, 24px);
  --sf-t-grid-gap: var(--sp-4, 16px);

  /* Padding inside a hero panel / banner on a phone. */
  --sf-t-pad: var(--sp-6, 24px);
}

/* ============================================================
   1. Phone type scale — all 8 themes + the default Modern theme

   The themes set --fs-display / --fs-h1 / --fs-h2 on their own
   :root[data-store-theme] block. We restate them here at the SAME
   specificity (:root + attribute), but inside a @media block and
   later in the cascade, so the phone sizes win and desktop keeps
   the big type.
   ============================================================ */
@media (max-width: 767px) {
  :root:not([data-store-theme]),
  :root[data-store-theme="theme2"],
  :root[data-store-theme="minimal"],
  :root[data-store-theme="bold"],
  :root[data-store-theme="warm"],
  :root[data-store-theme="luxury"],
  :root[data-store-theme="playful"],
  :root[data-store-theme="marketplace"],
  :root[data-store-theme="magazine"] {
    --fs-display: var(--sf-t-display);
    --fs-h1: var(--sf-t-h1);
    --fs-h2: var(--sf-t-h2);
    --fs-body-lg: 1rem;
  }
}

@media (max-width: 575px) {
  :root:not([data-store-theme]),
  :root[data-store-theme="theme2"],
  :root[data-store-theme="minimal"],
  :root[data-store-theme="bold"],
  :root[data-store-theme="warm"],
  :root[data-store-theme="luxury"],
  :root[data-store-theme="playful"],
  :root[data-store-theme="marketplace"],
  :root[data-store-theme="magazine"] {
    --fs-display: var(--sf-t-display-sm);
  }
}

/* ============================================================
   2. Default theme (Modern) — hero and grid reflow
   ============================================================ */
@media (max-width: 575px) {
  html:not([data-store-theme]) .sf-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sf-t-hero-gap);
  }

  html:not([data-store-theme]) .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sf-t-grid-gap);
  }

  html:not([data-store-theme]) .sf-section {
    margin-block-start: var(--sf-t-section);
  }
}

/* ============================================================
   3. Minimal — quiet split hero stacks, 2-up grid
   ============================================================ */
@media (max-width: 575px) {
  [data-store-theme="minimal"] .sf-min-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sf-t-hero-gap);
    margin-block-start: var(--sf-t-section);
  }

  [data-store-theme="minimal"] .sf-min-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sf-t-grid-gap);
  }

  [data-store-theme="minimal"] .sf-min-section {
    margin-block-start: var(--sf-t-section);
  }
}

/* ============================================================
   4. Bold — the boxed hero panel stacks and loses its big padding
   ============================================================ */
@media (max-width: 575px) {
  [data-store-theme="bold"] .sf-bold-hero {
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: var(--sf-t-hero-gap);
  }

  [data-store-theme="bold"] .sf-bold-hero-panel {
    padding: var(--sf-t-pad);
    gap: var(--sp-3, 12px);
  }

  [data-store-theme="bold"] .sf-bold-hero-media {
    min-block-size: 0;
    aspect-ratio: 16 / 10;
  }

  [data-store-theme="bold"] .sf-bold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sf-t-grid-gap);
  }

  [data-store-theme="bold"] .sf-bold-section {
    margin-block-start: var(--sf-t-section);
  }
}

/* ============================================================
   5. Warm — the overlay hero stays readable, 2-up grid
   ============================================================ */
@media (max-width: 575px) {
  [data-store-theme="warm"] .sf-warm-hero-media {
    aspect-ratio: 4 / 3;
  }

  [data-store-theme="warm"] .sf-warm-hero-overlay {
    padding: var(--sf-t-pad);
    gap: var(--sp-2, 8px);
  }

  [data-store-theme="warm"] .sf-warm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sf-t-grid-gap);
  }

  [data-store-theme="warm"] .sf-warm-section {
    margin-block-start: var(--sf-t-section);
  }
}

/* ============================================================
   6. Luxury (dark) — the tall centred hero gets shorter, 2-up grid

   The dark canvas and the thin gold rules stay. Only the empty
   space comes down, so the page is not mostly scroll on a phone.
   ============================================================ */
@media (max-width: 575px) {
  [data-store-theme="luxury"] .sf-lux-hero {
    margin-block-start: var(--sf-t-hero-gap);
    padding-block: var(--sp-6, 24px);
    gap: var(--sp-4, 16px);
  }

  [data-store-theme="luxury"] .sf-lux-hero-sub {
    max-inline-size: none;
  }

  [data-store-theme="luxury"] .sf-lux-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sf-t-grid-gap);
  }

  [data-store-theme="luxury"] .sf-lux-section {
    margin-block-start: var(--sf-t-section);
  }

  [data-store-theme="luxury"] .sf-lux-label {
    margin-block-end: var(--sp-6, 24px);
  }
}

/* ============================================================
   7. Playful — the rounded accent hero keeps its shape, 2-up grid
   ============================================================ */
@media (max-width: 575px) {
  [data-store-theme="playful"] .sf-play-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sf-t-pad);
    gap: var(--sf-t-hero-gap);
    margin-block-start: var(--sf-t-hero-gap);
  }

  [data-store-theme="playful"] .sf-play-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sf-t-grid-gap);
  }

  [data-store-theme="playful"] .sf-play-section {
    margin-block-start: var(--sf-t-section);
  }
}

/* ============================================================
   8. Marketplace — the left category sidebar collapses

   On desktop the categories are a sticky 230px column. On a phone
   that column would either eat the screen or, as a wrapped block of
   chips, push the products far below the fold. So on a phone it
   becomes one short scrolling rail of category chips at the top of
   the page. Every category is still reachable, and the rail scrolls
   inside its own box, so the page itself never scrolls sideways.
   ============================================================ */
@media (max-width: 767px) {
  [data-store-theme="marketplace"] .sf-mkt-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4, 16px);
    margin-block-start: var(--sp-4, 16px);
  }

  [data-store-theme="marketplace"] .sf-mkt-sidebar {
    position: static;
    padding: var(--sp-3, 12px);
  }

  [data-store-theme="marketplace"] .sf-mkt-sidebar-title {
    margin-block-end: var(--sp-2, 8px);
  }

  /* One row that scrolls sideways inside itself, not a wrapped block. */
  [data-store-theme="marketplace"] .sf-mkt-catlist {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--sp-2, 8px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-store-theme="marketplace"] .sf-mkt-catlist::-webkit-scrollbar {
    display: none;
  }

  [data-store-theme="marketplace"] .sf-mkt-cat {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    border: 1px solid var(--border);
  }

  [data-store-theme="marketplace"] .sf-mkt-cat.is-active {
    border-color: var(--accent);
  }

  [data-store-theme="marketplace"] .sf-mkt-deals {
    padding: var(--sf-t-pad);
  }

  [data-store-theme="marketplace"] .sf-mkt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3, 12px);
  }

  [data-store-theme="marketplace"] .sf-mkt-section {
    margin-block-start: var(--sf-t-section);
  }
}

/* ============================================================
   9. Magazine — the feature story stacks, image above the text
   ============================================================ */
@media (max-width: 767px) {
  [data-store-theme="magazine"] .sf-mag-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sf-t-hero-gap);
    margin-block-start: var(--sf-t-hero-gap);
  }

  /* The image is first in the source, so it is already on top. State it
     anyway, so the split can never flip on a phone. */
  [data-store-theme="magazine"] .sf-mag-feature-media {
    order: 1;
    aspect-ratio: 16 / 10;
  }

  [data-store-theme="magazine"] .sf-mag-feature-body {
    order: 2;
  }

  [data-store-theme="magazine"] .sf-mag-feature-text {
    max-inline-size: none;
  }

  [data-store-theme="magazine"] .sf-mag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6, 24px) var(--sp-3, 12px);
  }

  [data-store-theme="magazine"] .sf-mag-section {
    margin-block-start: var(--sf-t-section);
  }

  [data-store-theme="magazine"] .sf-mag-section-head {
    margin-block-end: var(--sp-5, 20px);
  }
}

/* ============================================================
   10. Every theme — no sideways overflow from the theme layouts

   A safety net for the theme-only blocks. Grid and flex children
   default to min-width:auto, which lets a long word or a wide image
   push the whole grid wider than the screen.
   ============================================================ */
@media (max-width: 767px) {
  html:not([data-store-theme]) .container > *,
  [data-store-theme] .container > * {
    min-inline-size: 0;
  }

  [data-store-theme] .sf-mkt-main,
  [data-store-theme] .sf-mag-feature-body,
  [data-store-theme] .sf-bold-hero-panel,
  [data-store-theme] .sf-play-hero-text,
  [data-store-theme] .sf-min-hero-text {
    min-inline-size: 0;
  }
}