/* g82 (client deck 08-10-2026, OB-REV-09 / OB-REV-10)
   - "Show: 50 · 100 · 200" products per page on Compras (inside the g49 toolbar head)
   - store page: search in store, sort, "Show: 25 · 50 · 65 · 100", 7 products per row on a large desktop
   Reads the shared --ob-* tokens when ob-design.css is on the page; the fallbacks are today's colours. */

.g82-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── page-size selector (shared) ─────────────────────────────────────── */
.g82-size { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.g82-size-label { margin-right: 2px; font-size: 14px; color: var(--ob-muted, #6f6f6f); white-space: nowrap; }
.g82-size-opt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 40px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--ob-border, #cfcfcf); border-radius: var(--ob-radius-sm, 6px);
    background: var(--ob-card, #fff); color: var(--ob-ink, #1c1c1c) !important;
    font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none !important;
    transition: border-color .15s ease, background-color .15s ease;
}
.g82-size-opt:hover { border-color: var(--ob-ink, #1c1c1c); }
.g82-size-opt:focus-visible { outline: 2px solid var(--ob-primary, #f5a00f); outline-offset: 2px; }
.g82-size-opt.is-on { background: var(--ob-black, #1c1c1c); border-color: var(--ob-black, #1c1c1c); color: #fff !important; cursor: default; }

/* Compras: in the g49 head, between the result count and "Sort by" */
.g49-head .g82-size { margin-left: auto; }
.g49-head .g82-size-opt { height: 44px; }  /* same height as the sort box next to it */
@media (max-width: 575.98px) {
    .g49-head .g82-size { margin-left: 0; }
    .g82-size-label { font-size: 13px; }
}

/* ── store page tools ────────────────────────────────────────────────── */
.g82-store-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 16px; }
.g82-store-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; flex: 1 1 480px; min-width: 0; margin: 0; }
.g82-store-search { display: flex; flex: 1 1 240px; min-width: 0; max-width: 380px; }
.g82-store-search input[type="search"] {
    flex: 1 1 0; width: 0; min-width: 0; height: 40px; margin: 0; padding: 0 12px;
    border: 1px solid var(--ob-border, #cfcfcf); border-right: 0; border-radius: var(--ob-radius-sm, 6px) 0 0 var(--ob-radius-sm, 6px);
    background: var(--ob-card, #fff); color: var(--ob-ink, #1c1c1c); font-size: 14px;
}
.g82-store-search input[type="search"]:focus { outline: 2px solid var(--ob-primary, #f5a00f); outline-offset: -1px; }
.g82-store-go {
    height: 40px; padding: 0 16px; border: 1px solid var(--ob-black, #1c1c1c); border-radius: 0 var(--ob-radius-sm, 6px) var(--ob-radius-sm, 6px) 0;
    background: var(--ob-black, #1c1c1c); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.g82-store-go:focus-visible { outline: 2px solid var(--ob-primary, #f5a00f); outline-offset: 2px; }
noscript .g82-store-go, .g82-store-sort .g82-store-go { border-radius: var(--ob-radius-sm, 6px); }
.g82-store-sort { display: flex; align-items: center; gap: 8px; min-width: 0; }
.g82-store-sort label { margin: 0; font-size: 14px; color: var(--ob-muted, #6f6f6f); white-space: nowrap; }
.g82-store-sort select {
    height: 40px; min-width: 190px; margin: 0; padding: 0 32px 0 12px;
    border: 1px solid var(--ob-border, #cfcfcf); border-radius: var(--ob-radius-sm, 6px);
    background-color: var(--ob-card, #fff); color: var(--ob-ink, #1c1c1c); font-size: 14px; cursor: pointer;
}
.g82-store-sort select:focus-visible { outline: 2px solid var(--ob-primary, #f5a00f); outline-offset: 1px; }
.g82-store-clear { font-size: 14px; color: var(--ob-info, #1565c0) !important; text-decoration: underline; white-space: nowrap; }

@media (max-width: 767.98px) {
    .g82-store-form { flex-basis: 100%; }
    .g82-store-search { max-width: none; flex-basis: 100%; }
    .g82-store-sort { flex: 1 1 100%; }
    .g82-store-sort select { flex: 1 1 0; width: 0; min-width: 0; }
    .g82-store-tools .g82-size { flex: 1 1 100%; }
}

/* ── store grid: 7 per row where the product area is wide enough, fewer as it narrows (cards stay ≥ ~170 px) ──
   Columns follow the width of the product area itself (container query), so a page with a side column
   (dev / Phase 3: "About the store" card) gets fewer columns than a full-width one at the same screen size. */
.store-products-section { container-type: inline-size; container-name: g82store; }
@container g82store (max-width: 519.98px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container g82store (min-width: 520px) and (max-width: 699.98px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container g82store (min-width: 700px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container g82store (min-width: 880px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container g82store (min-width: 1060px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container g82store (min-width: 1240px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px 12px; } }
/* browsers without container queries: by screen width */
@supports not (container-type: inline-size) {
    @media (min-width: 992px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
    @media (min-width: 1200px) { .g82-store-grid.odb-product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    @media (min-width: 1400px) { main:not(.obp-store) .g82-store-grid.odb-product-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
}

/* dev / Phase 3 (g69 catalogue look): same height as its sort box */
.g69-catalog .g49-head .g82-size-opt { height: 42px; border-radius: var(--ob-radius-sm, 8px); }