/* 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);
    }
}

@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;
}

/* ── Top bar ─────────────────────────────────────────── */
.gb-shop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}
.gb-shop-topbar__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gb-shop-title { font-size: 17px; font-weight: 700; }
.gb-shop-count { font-size: 13px; color: var(--gb-text-muted); }

/* Filter button: always visible */
.gb-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gb-bg-soft);
    border: 1.5px solid var(--gb-border);
    border-radius: var(--gb-radius);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--gb-text);
}

.gb-sort-select {
    padding: 9px 14px;
    border: 1.5px solid var(--gb-border);
    border-radius: var(--gb-radius);
    font-size: 13px;
    font-weight: 500;
    background: var(--gb-bg);
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* ── 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-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; }
}