/* GiftB360x — Shop Page Styles */

/* ── Layout: single column (no persistent sidebar) ───── */
.gb-shop-layout {
    display: block;
    padding: 0 0 60px;
}

/* ── Category rail (B360X-412 / STO-058) ──────────────
   A MODIFIER class, never an edit to .gb-shop-layout: with the rail switched
   off the layout keeps its shipped `display: block` and not one rule below
   applies, so the page is byte-identical to before this build.
   align-items:flex-start is load-bearing — the default `stretch` would make
   the rail full-height and `position: sticky` would have nothing to slide in.
   The Filters drawer and its backdrop are position:fixed, so they sit outside
   this flex row entirely. */
.gb-shop-layout--rail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 0 60px;
}
/* A grid inside a flex item refuses to shrink past its content without this. */
.gb-shop-layout--rail .gb-shop-main { flex: 1; min-width: 0; }

.gb-cat-rail {
    flex: 0 0 76px;
    width: 76px;
    position: sticky;
    /* .gb-header is ITSELF sticky at top:0 and 62px tall, so 8px here slid the
       rail underneath it. 62 + an 8px gap. */
    top: 70px;
    /* 70 top offset + an 8px gap. No .gb-bottom-nav at this width — it is
       display:flex only below 900px, so its height is subtracted in the media
       query below, keyed to that same breakpoint. dvh is declared SECOND so a
       browser without it keeps the vh line — mobile URL-bar drift, not a
       broken box. */
    max-height: calc(100vh - 78px);
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 4px 0 8px;
    background: var(--gb-bg-soft);
    border-radius: 12px;
}
.gb-cat-rail::-webkit-scrollbar { display: none; }

.gb-cat-rail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 4px;
    text-decoration: none;
    color: var(--gb-text);
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
}
.gb-cat-rail__item.is-active {
    background: var(--gb-bg);
    border-left-color: var(--gb-primary);
}

.gb-cat-rail__img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gb-bg);
    border: 1px solid var(--gb-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.gb-cat-rail__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-cat-rail__item.is-active .gb-cat-rail__img { border-color: var(--gb-primary); }
/* No picture on the category yet — an initial, never a broken image. */
.gb-cat-rail__letter {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gb-primary);
}

.gb-cat-rail__label {
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gb-cat-rail__item.is-active .gb-cat-rail__label { color: var(--gb-primary); }

/* .gb-bottom-nav is display:flex ONLY below 900px (global.css:791) — subtract its
   height at exactly that breakpoint, so the rail's floor and the nav that causes it
   can never drift apart. Above it the nav does not exist and the rail reclaims 70px. */
@media (max-width: 900px) {
    .gb-cat-rail {
        max-height: calc(100vh - 140px);
        max-height: calc(100dvh - 140px);
    }
}

/* ── Sub-category tiles (B360X-496) ─────────────────────────────────────────
   Square, like the homepage quick strip — deliberately NOT round, so with the
   rail on (round pictures down the side) the two rows never read as one control. */
/* A slider like the quick strip: each tile takes the same share of the row (~4.3
   visible, ~3.6 beside the narrower rail column) so the next one peeks out and the
   gaps are equal; desktop gets the shared window.gbScrollArrows ‹ ›. */
.gb-subcats {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 4px 0 14px;
}
.gb-subcats::-webkit-scrollbar { display: none; }
.gb-subcats__item {
    flex: 0 0 calc(100% / 4.3);
    min-width: 0;
    box-sizing: border-box;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--gb-gray-600, #4b5563);
}
.gb-shop-layout--rail .gb-subcats__item { flex-basis: calc(100% / 3.6); }
.gb-subcats__img {
    width: 100%;
    max-width: 68px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: var(--gb-gray-50, #f9fafb);
    border: 1.5px solid var(--gb-gray-200, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gb-primary);
    box-sizing: border-box;
}
.gb-subcats__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The whole name: wraps at spaces onto up to 2 lines (a too-long single word breaks
   rather than overflow), and every label reserves 2 lines so the photos stay in line. */
.gb-subcats__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    min-height: 2.4em;
    font-size: 0.56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    overflow-wrap: break-word;
}
.gb-subcats__item.is-active .gb-subcats__img { border: 2px solid var(--gb-primary); }
.gb-subcats__item.is-active .gb-subcats__label { color: var(--gb-primary); font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
    .gb-subcats ~ .gb-sarrow { top: 38px !important; }
}
@media (prefers-reduced-motion: reduce) { .gb-subcats { scroll-behavior: auto; } }

@media (max-width: 380px) {
    .gb-shop-layout--rail { gap: 8px; }
    .gb-cat-rail { flex-basis: 66px; width: 66px; }
    .gb-cat-rail__img { width: 40px; height: 40px; }
}

/* ── Sidebar: always a slide-in drawer (desktop + mobile) */
.gb-shop-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    width: 280px;
    z-index: 1000;
    border-radius: 0;
    border: none;
    background: var(--gb-bg);
    box-shadow: var(--gb-shadow-lg);
    transition: left .3s ease;
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px;
}
.gb-shop-sidebar.is-open { left: 0; }

.gb-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.gb-sidebar-backdrop.is-open { opacity: 1; pointer-events: all; }

.gb-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.gb-sidebar-title { font-size: 15px; font-weight: 700; }
.gb-sidebar-clear {
    font-size: 12px;
    font-weight: 600;
    color: var(--gb-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.gb-filter-group { margin-bottom: 22px; }
.gb-filter-group__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--gb-text-muted);
    margin-bottom: 12px;
}
.gb-filter-list { display: flex; flex-direction: column; gap: 6px; }
.gb-price-ranges { display: flex; flex-direction: column; gap: 6px; }

.gb-filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 5px 0;
    color: var(--gb-text-muted);
    transition: color .15s;
}
.gb-filter-check input { display: none; }
.gb-filter-check.is-active,
.gb-filter-check:hover { color: var(--gb-primary); font-weight: 600; }
.gb-filter-check.is-active::before {
    content: '✓';
    font-size: 11px;
    color: var(--gb-success);
    font-weight: 700;
    margin-right: -4px;
}
.gb-filter-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--gb-text-muted);
    background: var(--gb-bg-soft);
    padding: 2px 7px;
    border-radius: 10px;
}

/* ── Header (STO-091): title + gold underline + item count; filter and sort are icons ── */
.gb-shop-head {
    --gb-gold: #C8A24C;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.gb-shop-head__t { min-width: 0; }
.gb-shop-head__row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gb-shop-title { font-size: 20px; font-weight: 800; line-height: 1.2; margin: 0; }
.gb-shop-head__count { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.gb-shop-head__line { display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--gb-gold); margin-top: 6px; }
.gb-shop-head__acts { display: flex; gap: 8px; flex-shrink: 0; }
.gb-page .gb-head-btn {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1.5px solid var(--gb-border);
    background: #fff;
    color: var(--gb-text);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.gb-page .gb-head-btn.is-on { border-color: #C8A24C; }
.gb-head-btn__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1.5px solid #fff;
    background: #C8A24C;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
}
/* Selected sub-category tile wears the same gold as the underline */
.gb-subcats__item.is-active .gb-subcats__img { border-color: #C8A24C !important; }

/* Sort sheet — buttons prefixed .gb-page so Astra's button:hover paint never wins */
.gb-sort-sheet { position: fixed; inset: 0; z-index: 1200; }
.gb-sort-sheet[hidden] { display: none; }
.gb-sort-sheet__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity .2s; }
.gb-sort-sheet.is-open .gb-sort-sheet__overlay { opacity: 1; }
.gb-sort-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 100%);
    transition: transform .22s ease;
}
.gb-sort-sheet.is-open .gb-sort-sheet__panel { transform: translate(-50%, 0); }
.gb-sort-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: #ddd; margin: 0 auto 12px; }
.gb-sort-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 16px; font-weight: 800; }
.gb-page .gb-sort-sheet__close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f2f2f2; color: #1a1a1a; font-size: 14px; cursor: pointer; }
.gb-page .gb-sort-sheet__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
    background: none;
    font: inherit;
    font-size: 14.5px;
    color: var(--gb-text);
    text-align: left;
    cursor: pointer;
}
.gb-page .gb-sort-sheet__opt:last-child { border-bottom: 0; }
.gb-page .gb-sort-sheet__opt.is-on { font-weight: 800; color: var(--gb-primary); }
.gb-sort-sheet__opt span { color: #C8A24C; font-weight: 800; }
/* The store's global button style is UPPERCASE + letter-spaced; these are words, not buttons-as-labels */
.gb-page .gb-sort-sheet__opt, .gb-page .gb-active-filters__clear, .gb-page .gb-sort-sheet__close { text-transform: none !important; letter-spacing: normal !important; }
@media (prefers-reduced-motion: reduce) { .gb-sort-sheet__overlay, .gb-sort-sheet__panel { transition: none; } }

/* ── Category pills ──────────────────────────────────── */
.gb-cat-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.gb-cat-pill {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--gb-border);
    color: var(--gb-text-muted);
    transition: all .15s;
    white-space: nowrap;
}
.gb-cat-pill:hover,
.gb-cat-pill.is-active {
    background: var(--gb-primary);
    border-color: var(--gb-primary);
    color: #fff;
}

/* Active filter chips */
.gb-active-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.gb-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    background: var(--gb-primary);
    color: #fff !important;
    text-decoration: none;
    transition: opacity .15s;
}
.gb-active-filter-chip:hover { opacity: .8; }
.gb-chip-x { font-size: 15px; line-height: 1; opacity: .75; }
.gb-page .gb-active-filters__clear { padding: 5px 2px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--gb-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.gb-shop-desc {
    font-size: 13px;
    color: var(--gb-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ── Product Grid: 2 columns always ─────────────────── */
.gb-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 36px;
}

/* ── Pagination ──────────────────────────────────────── */
.gb-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.gb-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--gb-radius);
    border: 1.5px solid var(--gb-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--gb-text);
    transition: all .15s;
    text-decoration: none;
}
.gb-pagination .page-numbers:hover,
.gb-pagination .page-numbers.current {
    background: var(--gb-primary);
    border-color: var(--gb-primary);
    color: #fff;
}
.gb-pagination .page-numbers.prev,
.gb-pagination .page-numbers.next { width: auto; padding: 0 14px; }

/* ── Empty state ─────────────────────────────────────── */
.gb-shop-empty {
    text-align: center;
    padding: 80px 20px;
}
.gb-shop-empty__icon { font-size: 56px; margin-bottom: 20px; }
.gb-shop-empty h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.gb-shop-empty p { color: var(--gb-text-muted); margin-bottom: 24px; }

@media (max-width: 380px) {
    .gb-shop-grid { gap: 10px; }
    .gb-product-card__info { padding: 10px 10px 12px; }
}