/* ===================================================================
   eShobuy — Page width + configurable grid layout (final layout owner)
   -------------------------------------------------------------------
   Loaded LAST so it wins over every earlier cascade layer. Everything
   here is driven by CSS variables that the admin panel writes through
   store-standard.js, so layout is data, not code:

     --stb-page-max        page width cap ("none" = edge-to-edge)
     --stb-page-pad        gutter either side of the content
     --stb-product-cols    products per row, desktop      (1–10)
     --stb-product-cols-mid  ... at ≤1240px
     --stb-product-cols-sm   ... at ≤980px
     --stb-cat-cols        categories per row, desktop    (1–10)
     --stb-brand-cols      brands per row, desktop        (1–10)

   The site used to be locked to a 1420–1480px column with a hard
   `auto-fill minmax(108px,122px)` on the category shelf, which is why
   categories bunched up on the left of a wide screen and the page sat
   in a narrow strip. Both are now explicit.
   =================================================================== */

/* 1560px, not edge-to-edge. A shop that runs to both bezels of a 24"
   monitor reads as a directory listing, not a store: the eye has to
   travel the whole desk to get from the logo to the account menu, and
   a five-across product row stretches until the cards stop looking
   like cards. 1560 keeps five products at a comfortable card size,
   fits eight category tiles, and leaves a visible margin on a 1920
   screen — while on a 1366/1440 laptop nothing changes at all, because
   the page is narrower than the cap anyway. The admin panel can
   override it (Site Customizer → Grid Layout → Page Width), including
   back to full-bleed. */
:root{
  --stb-page-max: 1560px;
  --stb-page-pad: clamp(16px, 2.4vw, 52px);
  --stb-product-cols: 5;
  --stb-product-cols-mid: 4;
  --stb-product-cols-sm: 3;
  --stb-product-cols-xs: 2;
  --stb-cat-cols: 8;
  --stb-brand-cols: 8;
  --stb-tile-gap: 18px;
}

/* ── 1. FULL-WIDTH PAGE ─────────────────────────────────────────── */
html body .container,
html body.stb-standard .container{
  width: 100%!important;
  max-width: var(--stb-page-max, none)!important;
  margin-left: auto!important;
  margin-right: auto!important;
  padding-left: var(--stb-page-pad)!important;
  padding-right: var(--stb-page-pad)!important;
  box-sizing: border-box!important;
}

/* The top announcement strip and the footer read as full-bleed bands with
   their inner row aligned to the same gutter as the rest of the page. */
html body .market-top,
html body.stb-standard .market-top,
html body footer,
html body.stb-standard footer{ width:100%!important; }

@media (max-width: 760px){
  :root{ --stb-page-pad: 12px; }
}

/* ── 2. PRODUCT GRID ────────────────────────────────────────────── */
html body .grid,
html body.stb-standard .grid{
  grid-template-columns: repeat(var(--stb-product-cols, 5), minmax(0,1fr))!important;
  gap: var(--core-grid-gap, 16px)!important;
}
@media (max-width: 1240px){
  html body .grid,
  html body.stb-standard .grid{
    grid-template-columns: repeat(var(--stb-product-cols-mid, 4), minmax(0,1fr))!important;
  }
}
@media (max-width: 980px){
  html body .grid,
  html body.stb-standard .grid{
    grid-template-columns: repeat(var(--stb-product-cols-sm, 3), minmax(0,1fr))!important;
  }
}
@media (max-width: 760px){
  html body .grid,
  html body.stb-standard .grid{
    grid-template-columns: repeat(var(--stb-product-cols-xs, 2), minmax(0,1fr))!important;
    gap: 10px!important;
  }
}

/* ── 3. CATEGORY / BRAND SHELVES ────────────────────────────────── */
/* Explicit column counts at every breakpoint — never auto-fill, so the
   shelf always spans the full content width instead of clustering left. */
html body #marketCategoryGrid,
html body.stb-standard #marketCategoryGrid{
  grid-template-columns: repeat(var(--stb-cat-cols, 8), minmax(0,1fr))!important;
  gap: var(--stb-tile-gap)!important;
}
html body #marketBrandGrid,
html body.stb-standard #marketBrandGrid{
  grid-template-columns: repeat(var(--stb-brand-cols, 8), minmax(0,1fr))!important;
  gap: var(--stb-tile-gap)!important;
}
@media (max-width: 1240px){
  html body #marketCategoryGrid,
  html body.stb-standard #marketCategoryGrid,
  html body #marketBrandGrid,
  html body.stb-standard #marketBrandGrid{
    grid-template-columns: repeat(min(var(--stb-cat-cols, 8), 6), minmax(0,1fr))!important;
  }
}
@media (max-width: 760px){
  html body #marketCategoryGrid,
  html body.stb-standard #marketCategoryGrid,
  html body #marketBrandGrid,
  html body.stb-standard #marketBrandGrid{
    grid-template-columns: repeat(min(var(--stb-cat-cols, 8), 3), minmax(0,1fr))!important;
    gap: 10px!important;
  }
}

/* Tiles stretch to their column instead of sitting at a fixed 122px. */
html body .market-category,
html body.stb-standard .market-category{
  width: 100%!important;
  display: flex!important;
  flex-direction: column!important;
  align-items: center!important;
  justify-content: flex-start!important;
  gap: 10px!important;
  padding: 16px 10px!important;
  border: 1px solid var(--e-rule, #e1e9f2)!important;
  border-radius: 12px!important;
  background: var(--e-surface, #fff)!important;
  transition: border-color .14s ease, box-shadow .14s ease!important;
  min-height: 132px!important;
}
html body .market-category:hover,
html body.stb-standard .market-category:hover{
  border-color: var(--core-primary, #0074C2)!important;
  box-shadow: 0 2px 10px rgba(10,47,92,.08)!important;
}
html body .market-category .cat-art,
html body.stb-standard .market-category .cat-art{
  width: clamp(56px, 4.4vw, 78px)!important;
  height: clamp(56px, 4.4vw, 78px)!important;
  margin: 0!important;
  display: grid!important;
  place-items: center!important;
  overflow: hidden!important;
}
html body .market-category > span:last-child,
html body.stb-standard .market-category > span:last-child{
  display: -webkit-box!important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35!important;
  font-size: 12.5px!important;
}

/* ── 4. "SEE MORE" TILE ─────────────────────────────────────────── */
html body .market-category.stb-see-more,
html body.stb-standard .market-category.stb-see-more{
  border-style: dashed!important;
  border-color: var(--core-primary, #0074C2)!important;
  color: var(--core-primary, #0074C2)!important;
  background: transparent!important;
}
html body .market-category.stb-see-more .cat-art,
html body.stb-standard .market-category.stb-see-more .cat-art{
  background: transparent!important;
  border: 1px dashed currentColor!important;
  border-radius: 50%!important;
  font-size: 26px!important;
  font-weight: 700!important;
}

/* ── 5. /categories and /brands index pages ─────────────────────── */
.stb-index-page{ padding: 8px 0 48px; }
.stb-index-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 22px 0 6px;
}
.stb-index-head h1{
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 900;
  color: var(--core-text, #0f1e33);
  margin: 0;
  letter-spacing: -.4px;
}
.stb-index-count{ font-size: 13px; color: var(--muted, #6b7c93); font-weight: 600; }
.stb-index-search{
  width: min(360px, 100%);
  padding: 11px 14px;
  border: 1px solid var(--e-rule, #d7e2ed);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: inherit;
}
.stb-index-search:focus{ outline: 2px solid var(--core-primary, #0074C2); outline-offset: 1px; }
.stb-index-grid{
  display: grid;
  grid-template-columns: repeat(var(--stb-cat-cols, 8), minmax(0,1fr));
  gap: var(--stb-tile-gap);
  margin-top: 20px;
}
@media (max-width: 1240px){ .stb-index-grid{ grid-template-columns: repeat(min(var(--stb-cat-cols,8),6), minmax(0,1fr)); } }
@media (max-width: 760px){ .stb-index-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } }
.stb-index-empty{ padding: 40px 0; color: var(--muted, #6b7c93); font-weight: 600; }