/* ==========================================================================
   HUB PAGE  —  WOOCOMMERCE ARCHIVE (Product Hub) STYLES
   Gift Shop Kathmandu Child Theme

   DESIGN RULES (from design_guide_dump.txt):
   ─────────────────────────────────────────────────────────────────────
   1. All visual states are consistent (hover, active, focus, disabled).
   2. Filters are easy to find on mobile AND desktop.
   3. Product cards follow ONE layout system across the entire grid.
   4. No colour is the only way meaning is communicated (icons + text).
   5. Tap targets on mobile ≥ 44px tall.
   6. Sidebar HAS NO display:none with JS off — the .gsk-js-active
      class (added by hub-page.js) is what hides it initially on mobile.
   ========================================================================== */

/* ── KADENCE/WOO RESET ────────────────────────────────────────────────
   Safety net: hide any Kadence WooCommerce elements that leak through
   despite our remove_action() calls in functions.php.
   ─────────────────────────────────────────────────────────────────── */
.woocommerce .kadence-woo-toggle,
.woocommerce .kadence-toggle-list,
.woocommerce-view-switcher,
.kadence-shop-toggle-container,
.woocommerce .grid-list-toggle,
.woocommerce .woo-toggle-wrapper {
    display: none !important;
}



/* ── FIXED #4: Page-level wrapper — max-width + padding so hub never
   stretches to 100% viewport on ultrawide monitors.
   .gsk-hub-page-wrap is output by archive-product.php around the
   container div. This mirrors how homepage sections are structured. ── */
.gsk-hub-page-wrap {
    width: 100%;
}

/* FIXED #5: Added padding-top so H1 doesn't touch the mega nav directly */
.woocommerce-products-header {
    padding-top: var(--gsk-space-10);
    margin-bottom: var(--gsk-space-8);
    text-align: center;
    padding-left: var(--gsk-space-4);
    padding-right: var(--gsk-space-4);
}

.woocommerce-products-header__title.page-title {
    font-family: var(--gsk-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--gsk-weight-bold);
    color: var(--gsk-purple-800);
    margin-bottom: var(--gsk-space-3);
}

/* Category description text (WooCommerce outputs this via archive_description) */
.woocommerce-products-header .woocommerce-product-header-text,
.woocommerce-products-header p,
.term-description p {
    font-size: var(--gsk-text-base);
    color: var(--gsk-gray-600);
    max-width: 680px;
    margin: 0 auto;
    line-height: var(--gsk-leading-relaxed);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.gsk-hub-breadcrumb {
    padding-top: var(--gsk-space-6);
    padding-bottom: var(--gsk-space-2);
}

/* WooCommerce native breadcrumb styles */
.woocommerce-breadcrumb {
    font-size: var(--gsk-text-sm);
    color: var(--gsk-gray-500);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gsk-space-1);
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.woocommerce-breadcrumb a {
    color: var(--gsk-gray-500);
    text-decoration: none;
    transition: color var(--gsk-transition-fast);
}

.woocommerce-breadcrumb a:hover {
    color: var(--gsk-purple-700);
}


/* ==========================================================================
   TWO-COLUMN GRID LAYOUT  (Sidebar + Products)
   Mobile-first approach.
   ========================================================================== */

.gsk-hub-container {
    display: grid;
    grid-template-columns: 1fr;   /* Mobile: stack */
    gap: var(--gsk-space-8);
    margin-bottom: var(--gsk-space-16);
    position: relative;
}

@media (min-width: 993px) {
    .gsk-hub-container {
        grid-template-columns: 270px 1fr;  /* Desktop: 270px sidebar + flexible main */
        align-items: start;
    }
}

/* CRITICAL: grid children default to min-width:auto which prevents overflow clipping.
   Without this, the pill slider and product grid overflow beyond the 1fr column. */
.gsk-hub-main {
    min-width: 0;
    overflow: hidden;
}


/* ==========================================================================
   SIDEBAR  —  Filters + Mobile Drawer
   NO-JS SAFE: Sidebar is in normal document flow on mobile by default.
   When .gsk-js-active is added to <body>, the sidebar becomes a drawer.
   ========================================================================== */

/* ── Desktop sidebar ─────────────────────────────────────────────────── */
.gsk-hub-sidebar {
    background: var(--gsk-white);
    border: 1px solid var(--gsk-gray-200);
    border-radius: var(--gsk-radius-xl);
    padding: var(--gsk-space-6);
    height: fit-content;
    position: sticky;
    /* FIXED #6: top offset = utility bar (~36px) + header (~80px) + mega nav (~48px) + gap (8px) = ~172px */
    top: 172px;
}

.gsk-hub-sidebar h3,
.woof_widget_title {
    font-family: var(--gsk-font-heading);
    font-size: var(--gsk-text-lg);
    font-weight: var(--gsk-weight-semi);
    color: var(--gsk-purple-800);
    margin-bottom: var(--gsk-space-5);
    padding-bottom: var(--gsk-space-3);
    border-bottom: 2px solid var(--gsk-gold-100);
    display: flex;
    align-items: center;
    gap: var(--gsk-space-2);
}

/* ── Mobile sidebar close button (only visible on mobile) ──────────── */
.gsk-sidebar-close {
    display: none;
    position: absolute;
    top: var(--gsk-space-4);
    right: var(--gsk-space-4);
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gsk-gray-100);
    border-radius: var(--gsk-radius-full);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--gsk-gray-600);
    transition: background var(--gsk-transition-fast), color var(--gsk-transition-fast);
}

.gsk-sidebar-close:hover {
    background: var(--gsk-gray-200);
    color: var(--gsk-gray-900);
}

/* ── Mobile drawer mode (JS adds .gsk-js-active to body) ─────────────── */
@media (max-width: 992px) {

    /* With JS off: sidebar shows normally above the product grid */
    .gsk-hub-sidebar {
        position: static;
        border-radius: var(--gsk-radius-lg);
    }

    /* With JS on: sidebar becomes an off-canvas drawer */
    .gsk-js-active .gsk-hub-sidebar {
        position: fixed;
        top: 0;
        left: -320px;  /* Hidden off-screen */
        width: 300px;
        max-width: 90vw;
        height: 100dvh;
        overflow-y: auto;
        z-index: var(--gsk-z-overlay);
        border-radius: 0 var(--gsk-radius-xl) var(--gsk-radius-xl) 0;
        padding: var(--gsk-space-16) var(--gsk-space-5) var(--gsk-space-8);
        transition: left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: none;
    }

    .gsk-js-active .gsk-hub-sidebar.gsk-sidebar-open {
        left: 0;
        box-shadow: 4px 0 40px rgba(0, 0, 0, 0.15);
    }

    .gsk-sidebar-close {
        display: flex;
    }
}

/* ── Fullscreen overlay (closes filter drawer on tap) ───────────────── */
.gsk-filter-overlay {
    display: none;
}

.gsk-js-active .gsk-filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--gsk-z-overlay) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gsk-js-active .gsk-filter-overlay.gsk-overlay-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Prevent body scroll when filter drawer is open */
.gsk-filter-open {
    overflow: hidden;
}


/* ==========================================================================
   MOBILE FILTER TOGGLE BUTTON
   Always visible on mobile. Hidden on desktop.
   ========================================================================== */

.gsk-filter-toggle {
    display: none;  /* Hidden on desktop */
}

@media (max-width: 992px) {
    .gsk-filter-toggle {
        display: flex;
        align-items: center;
        gap: var(--gsk-space-2);
        background: var(--gsk-white);
        border: 1px solid var(--gsk-gray-300);
        border-radius: var(--gsk-radius-full);
        padding: var(--gsk-space-2) var(--gsk-space-5);
        font-family: var(--gsk-font-body);
        font-size: var(--gsk-text-sm);
        font-weight: var(--gsk-weight-semi);
        color: var(--gsk-gray-700);
        cursor: pointer;
        min-height: 44px;  /* accessibility tap target */
        transition: border-color var(--gsk-transition-fast), background var(--gsk-transition-fast);
    }

    .gsk-filter-toggle:hover {
        border-color: var(--gsk-purple-400);
        background: var(--gsk-purple-50);
        color: var(--gsk-purple-700);
    }

    .gsk-filter-toggle svg {
        flex-shrink: 0;
    }

    /* No-JS: hide the toggle button so users see the sidebar inline */
    body:not(.gsk-js-active) .gsk-filter-toggle {
        display: none;
    }
}


/* ==========================================================================
   TOP ACTION BAR  (Sort + Count + Mobile Filter Trigger row)
   ========================================================================== */

.gsk-hub-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gsk-space-3);
    margin-bottom: var(--gsk-space-6);
    padding-bottom: var(--gsk-space-5);
    border-bottom: 1px solid var(--gsk-gray-200);
}

/* WooCommerce native result count */
.woocommerce-result-count {
    margin: 0;
    color: var(--gsk-gray-500);
    font-size: var(--gsk-text-sm);
}

/* WooCommerce native sorting dropdown */
.woocommerce-ordering {
    margin: 0;
}

.woocommerce-ordering select {
    padding: var(--gsk-space-2) var(--gsk-space-8) var(--gsk-space-2) var(--gsk-space-3);
    border: 1px solid var(--gsk-gray-300);
    border-radius: var(--gsk-radius-full);
    background-color: var(--gsk-white);
    font-family: var(--gsk-font-body);
    font-size: var(--gsk-text-sm);
    color: var(--gsk-gray-700);
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--gsk-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
    border-color: var(--gsk-purple-400);
    outline: none;
}

/* Sticky topbar enhancement (JS adds this class on scroll) */
.gsk-topbar-sticky {
    position: sticky;
    top: 80px;
    z-index: var(--gsk-z-sticky);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--gsk-radius-lg);
    box-shadow: var(--gsk-shadow-sm);
}


/* ==========================================================================
   SUBCATEGORY PILLS  (Navigation inside the hub)
   Lists all direct subcategories of the current category.
   Future-proof: dynamically rendered by PHP get_terms().
   ========================================================================== */

.gsk-hub-subcategories {
    display: flex;
    gap: var(--gsk-space-2);
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--gsk-space-8);
    padding-bottom: var(--gsk-space-2);
    /* Hide scrollbar but keep scroll functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gsk-hub-subcategories::-webkit-scrollbar {
    display: none;
}

.gsk-hub-subcat-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--gsk-space-2) var(--gsk-space-4);
    background: var(--gsk-gray-100);
    color: var(--gsk-gray-700);
    border-radius: var(--gsk-radius-full);
    font-size: var(--gsk-text-sm);
    font-weight: var(--gsk-weight-medium);
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition:
        background var(--gsk-transition-fast),
        color var(--gsk-transition-fast),
        border-color var(--gsk-transition-fast);
    min-height: 36px;
}

.gsk-hub-subcat-pill:hover {
    background: var(--gsk-purple-100);
    color: var(--gsk-purple-700);
    border-color: var(--gsk-purple-400);
}

.gsk-hub-subcat-pill.active,
.gsk-hub-subcat-pill[aria-current="page"] {
    background: var(--gsk-purple-800);
    color: var(--gsk-white);
    border-color: var(--gsk-purple-800);
}

.gsk-hub-subcat-pill:focus-visible {
    outline: 2px solid var(--gsk-gold-500);
    outline-offset: 2px;
}


/* ==========================================================================
   PRODUCT GRID
   auto-fill ensures future-proof: adding more products auto-creates
   new rows. No PHP changes needed when you add 10 more products.
   ========================================================================== */

/* Override WooCommerce's default UL reset */
ul.products,
ul.gsk-hub-grid {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    /* Remove WooCommerce's default float-based layout */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--gsk-space-5) !important;
    float: none !important;
    width: 100% !important;
}

@media (max-width: 576px) {
    ul.products,
    ul.gsk-hub-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gsk-space-3) !important;
    }
}

/* WooCommerce product list items */
ul.products li.product,
.gsk-hub-grid li.gsk-product-card {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}


/* ==========================================================================
   PRODUCT CARD  (content-product.php)
   ONE consistent design per the design guide.
   Every state (default/hover/focus) is visually distinct.
   ========================================================================== */

.gsk-product-card {
    position: relative;
    background: var(--gsk-white);
    border: 1px solid var(--gsk-gray-200);
    border-radius: var(--gsk-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        box-shadow var(--gsk-transition-normal),
        border-color var(--gsk-transition-normal),
        transform var(--gsk-transition-normal);
}

.gsk-product-card:hover {
    box-shadow: var(--gsk-shadow-lg);
    border-color: var(--gsk-purple-400);
    transform: translateY(-3px);
}

/* ── Product Image Wrapper ──────────────────────────────────────────── */
.gsk-product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gsk-gray-50);
}

.gsk-product-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}

.gsk-product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: block;
}

.gsk-product-card:hover .gsk-product-image-wrapper img {
    transform: scale(1.07);
}

/* ── Badges (Sale, New, Best Seller) injected by WooCommerce ──────── */
.gsk-product-card .onsale {
    position: absolute;
    top: var(--gsk-space-3);
    left: var(--gsk-space-3);
    background: var(--gsk-sale);
    color: var(--gsk-white);
    font-size: var(--gsk-text-xs);
    font-weight: var(--gsk-weight-bold);
    padding: 3px var(--gsk-space-2);
    border-radius: var(--gsk-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    line-height: 1.4;
    margin: 0;
    min-width: 0;
}

/* ── YITH / Plugin Hover Actions ──────────────────────────────────── */
.gsk-product-actions {
    position: absolute;
    top: var(--gsk-space-3);
    right: var(--gsk-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--gsk-space-2);
    /* Default state: hidden off-screen to the right */
    opacity: 0;
    transform: translateX(12px);
    transition:
        opacity var(--gsk-transition-normal),
        transform var(--gsk-transition-normal);
    z-index: 3;
}

.gsk-product-card:hover .gsk-product-actions {
    opacity: 1;
    transform: translateX(0);
}

/* Touch devices: always show actions (no hover) */
@media (hover: none) {
    .gsk-product-actions {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Pill action buttons (Wishlist & Quick View) ─────────────────── */
.gsk-action-btn,
.yith-wcwl-add-button > a,
.yith-wcwl-wishlist-already-in > a,
.yith-wcqv-button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--gsk-white) !important;
    color: var(--gsk-gray-800) !important;
    padding: 6px 14px !important;
    border-radius: var(--gsk-radius-full) !important;
    font-family: var(--gsk-font-body) !important;
    font-size: var(--gsk-text-xs) !important;
    font-weight: var(--gsk-weight-semi) !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    transition:
        background var(--gsk-transition-fast),
        color var(--gsk-transition-fast),
        transform var(--gsk-transition-fast) !important;
    white-space: nowrap;
    min-height: 32px;
    line-height: 1;
}

.gsk-action-btn:hover,
.yith-wcwl-add-button > a:hover,
.yith-wcqv-button:hover {
    background: var(--gsk-purple-800) !important;
    color: var(--gsk-white) !important;
    transform: scale(1.05) !important;
}

/* When item is already in wishlist */
.yith-wcwl-wishlist-already-in > a {
    background: var(--gsk-sale-bg) !important;
    color: var(--gsk-sale) !important;
}


/* ── Product Info Block ──────────────────────────────────────────── */
.gsk-product-info {
    padding: var(--gsk-space-4);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--gsk-space-2);
}

/* Condensed on small mobile */
@media (max-width: 400px) {
    .gsk-product-info {
        padding: var(--gsk-space-3);
    }
}

.gsk-product-title {
    font-family: var(--gsk-font-heading);
    font-size: var(--gsk-text-base);
    font-weight: var(--gsk-weight-semi);
    color: var(--gsk-gray-900);
    margin: 0;
    line-height: var(--gsk-leading-tight);
    /* Clamp to 2 lines, prevents layout shift with long names */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;  /* Standard property for modern browsers */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gsk-product-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--gsk-transition-fast);
}

.gsk-product-title a:hover {
    color: var(--gsk-purple-700);
}

.gsk-product-price {
    font-size: var(--gsk-text-lg);
    font-weight: var(--gsk-weight-bold);
    color: var(--gsk-purple-800);
    margin: 0;
}

/* WooCommerce sale price */
.gsk-product-price del {
    color: var(--gsk-gray-400);
    font-weight: var(--gsk-weight-regular);
    font-size: var(--gsk-text-sm);
    margin-right: 4px;
}

.gsk-product-price ins {
    text-decoration: none;
    color: var(--gsk-sale);
}

/* ── Add to Cart Button (WooCommerce loop) ──────────────────────── */
.gsk-product-card .button.add_to_cart_button,
.gsk-product-card .added_to_cart {
    display: block !important;
    width: 100%;
    text-align: center;
    background: var(--gsk-purple-800) !important;
    color: var(--gsk-white) !important;
    padding: var(--gsk-space-2) var(--gsk-space-4) !important;
    border-radius: var(--gsk-radius-md) !important;
    text-decoration: none !important;
    font-family: var(--gsk-font-body) !important;
    font-weight: var(--gsk-weight-semi) !important;
    font-size: var(--gsk-text-sm) !important;
    border: 2px solid var(--gsk-purple-800) !important;
    transition:
        background var(--gsk-transition-fast),
        border-color var(--gsk-transition-fast),
        color var(--gsk-transition-fast) !important;
    min-height: 44px;
    line-height: 1.4;
    margin-top: auto !important;
    cursor: pointer;
}

.gsk-product-card .button.add_to_cart_button:hover,
.gsk-product-card .added_to_cart:hover {
    background: var(--gsk-white) !important;
    color: var(--gsk-purple-800) !important;
}

/* Processing/loading state (AJAX add to cart) */
.gsk-product-card .button.loading {
    opacity: 0.7;
    pointer-events: none;
}


/* ==========================================================================
   PAGINATION  (WooCommerce native)
   ========================================================================== */

.woocommerce-pagination {
    margin-top: var(--gsk-space-12);
    text-align: center;
}

.woocommerce-pagination ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--gsk-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--gsk-radius-md);
    border: 1px solid var(--gsk-gray-200);
    font-size: var(--gsk-text-sm);
    font-weight: var(--gsk-weight-medium);
    color: var(--gsk-gray-700);
    text-decoration: none;
    transition: background var(--gsk-transition-fast), color var(--gsk-transition-fast), border-color var(--gsk-transition-fast);
}

.woocommerce-pagination ul li a:hover {
    background: var(--gsk-purple-100);
    border-color: var(--gsk-purple-400);
    color: var(--gsk-purple-700);
}

.woocommerce-pagination ul li span.current {
    background: var(--gsk-purple-800);
    border-color: var(--gsk-purple-800);
    color: var(--gsk-white);
}


/* ==========================================================================
   "NO PRODUCTS FOUND" STATE
   ========================================================================== */

.woocommerce-info {
    background: var(--gsk-purple-50);
    border-left: 4px solid var(--gsk-purple-400);
    border-radius: var(--gsk-radius-lg);
    padding: var(--gsk-space-4) var(--gsk-space-5);
    color: var(--gsk-purple-700);
    font-size: var(--gsk-text-base);
    margin-bottom: var(--gsk-space-6);
}


/* ==========================================================================
   WOOF (HUSKY) FILTER PLUGIN  —  Style Override
   We override the plugin's default styles to match our design system.
   ========================================================================== */

/* Section titles within the filter widget */
.woof_container_inner h4,
.woof_block_html_items legend,
.woof_list_item_label {
    font-family: var(--gsk-font-body) !important;
    font-size: var(--gsk-text-sm) !important;
    font-weight: var(--gsk-weight-semi) !important;
    color: var(--gsk-gray-700) !important;
    margin-bottom: var(--gsk-space-2) !important;
}

/* Checkboxes / radio labels */
.woof_list li label,
.woof_container li label {
    font-size: var(--gsk-text-sm) !important;
    color: var(--gsk-gray-600) !important;
    cursor: pointer;
}

.woof_list li label:hover {
    color: var(--gsk-purple-700) !important;
}

/* Price range slider */
.woof_slider_handler {
    background: var(--gsk-purple-800) !important;
    border: 2px solid var(--gsk-white) !important;
}

.ui-slider-range {
    background: var(--gsk-purple-400) !important;
}

/* Apply Filters button */
.woof_submit_search_form,
button.woof_submit_search_form {
    background: var(--gsk-purple-800) !important;
    color: var(--gsk-white) !important;
    border: none !important;
    border-radius: var(--gsk-radius-md) !important;
    padding: var(--gsk-space-2) var(--gsk-space-4) !important;
    font-family: var(--gsk-font-body) !important;
    font-weight: var(--gsk-weight-semi) !important;
    font-size: var(--gsk-text-sm) !important;
    width: 100% !important;
    cursor: pointer !important;
    min-height: 44px !important;
    transition: background var(--gsk-transition-fast) !important;
}

.woof_submit_search_form:hover {
    background: var(--gsk-purple-700) !important;
}


/* ==========================================================================
   REVIEW SECTION  (Bottom of every hub page)
   Static HTML — no plugin dependency (Google-safe per technical SEO rules).
   These are business/delivery reviews, NOT fake product star ratings.
   ========================================================================== */

.gsk-hub-reviews {
    background: var(--gsk-gray-50);
    border-top: 1px solid var(--gsk-gray-200);
    padding: var(--gsk-space-16) var(--gsk-space-4);
    margin-top: var(--gsk-space-16);
}

.gsk-hub-reviews-inner {
    max-width: var(--gsk-container-xl);
    margin: 0 auto;
}

.gsk-hub-reviews-header {
    text-align: center;
    margin-bottom: var(--gsk-space-10);
}

.gsk-hub-reviews-header h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--gsk-weight-bold);
    color: var(--gsk-purple-800);
    margin-bottom: var(--gsk-space-2);
}

.gsk-hub-reviews-header p {
    color: var(--gsk-gray-500);
    max-width: 560px;
    margin: 0 auto;
    font-size: var(--gsk-text-sm);
}

/* ── Review grid ─────────────────────────────────────────────────── */
.gsk-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gsk-space-5);
}

@media (max-width: 992px) {
    .gsk-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Hide 3rd card on tablet to keep even grid */
    .gsk-reviews-grid .gsk-review-card:nth-child(3) {
        display: none;
    }
}

@media (max-width: 640px) {
    .gsk-reviews-grid {
        /* Convert to swipe carousel on small screens */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--gsk-space-4);
        padding-bottom: var(--gsk-space-4);
        /* Hide scrollbar visually but keep it functional */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .gsk-reviews-grid::-webkit-scrollbar {
        display: none;
    }
    .gsk-reviews-grid .gsk-review-card:nth-child(3) {
        display: block;  /* Show all 3 on mobile swipe */
    }
}

/* ── Individual review card ─────────────────────────────────────── */
.gsk-review-card {
    background: var(--gsk-white);
    padding: var(--gsk-space-6);
    border-radius: var(--gsk-radius-xl);
    border: 1px solid var(--gsk-gray-100);
    box-shadow: var(--gsk-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--gsk-space-3);
    transition: box-shadow var(--gsk-transition-normal);
}

.gsk-review-card:hover {
    box-shadow: var(--gsk-shadow-lg);
}

@media (max-width: 640px) {
    .gsk-review-card {
        min-width: 280px;
        scroll-snap-align: center;
        flex-shrink: 0;
    }
}

.gsk-review-stars {
    color: var(--gsk-gold-500);
    font-size: 1.125rem;
    letter-spacing: 2px;
    line-height: 1;
}

.gsk-review-text {
    color: var(--gsk-gray-700);
    font-size: var(--gsk-text-sm);
    font-style: italic;
    line-height: var(--gsk-leading-relaxed);
    flex-grow: 1;
}

.gsk-review-text::before { content: '\201C'; }
.gsk-review-text::after  { content: '\201D'; }

.gsk-review-author {
    display: flex;
    align-items: center;
    gap: var(--gsk-space-2);
    font-weight: var(--gsk-weight-semi);
    font-size: var(--gsk-text-sm);
    color: var(--gsk-gray-900);
    border-top: 1px solid var(--gsk-gray-100);
    padding-top: var(--gsk-space-3);
}

.gsk-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--gsk-success);
    font-size: var(--gsk-text-xs);
    font-weight: var(--gsk-weight-regular);
}


/* ==========================================================================
   SCROLL TO TOP BUTTON
   Exists in HTML as a standard link (JS enhances into animated button).
   ========================================================================== */

.gsk-scroll-top {
    position: fixed;
    bottom: var(--gsk-space-8);
    right: var(--gsk-space-5);
    width: 44px;
    height: 44px;
    background: var(--gsk-purple-800);
    color: var(--gsk-white);
    border-radius: var(--gsk-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--gsk-shadow-lg);
    z-index: 90;
    /* Hidden by default — JS adds visible class on scroll */
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition:
        opacity var(--gsk-transition-normal),
        transform var(--gsk-transition-normal);
}

/* No JS: always show the scroll-to-top */
body:not(.gsk-js-active) .gsk-scroll-top {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* JS active: only show when user scrolls down */
.gsk-scroll-top--visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.gsk-scroll-top:hover {
    background: var(--gsk-purple-700);
}

.gsk-scroll-top:focus-visible {
    outline: 2px solid var(--gsk-gold-500);
    outline-offset: 2px;
}


/* ==========================================================================
   SIMILAR CATEGORIES SECTION (Sibling categories on sub-hub pages)
   Shows related subcategories when viewing a specific sub-hub.
   Example: On /cakes/black-forest/, shows Birthday, Red Velvet, etc.
   ========================================================================== */

.gsk-similar-categories {
    background: var(--gsk-white);
    border-top: 1px solid var(--gsk-gray-200);
    padding: var(--gsk-space-12) var(--gsk-space-4);
}

.gsk-similar-categories-inner {
    max-width: var(--gsk-container-xl);
    margin: 0 auto;
}

.gsk-similar-categories-inner h2 {
    font-family: var(--gsk-font-heading);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: var(--gsk-weight-bold);
    color: var(--gsk-purple-800);
    text-align: center;
    margin-bottom: var(--gsk-space-8);
}

.gsk-similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gsk-space-4);
    margin-bottom: var(--gsk-space-6);
}

@media (max-width: 576px) {
    .gsk-similar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gsk-space-3);
    }
}

.gsk-similar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gsk-space-5) var(--gsk-space-4);
    background: var(--gsk-gray-50);
    border: 1px solid var(--gsk-gray-200);
    border-radius: var(--gsk-radius-xl);
    text-decoration: none;
    text-align: center;
    transition:
        background var(--gsk-transition-fast),
        border-color var(--gsk-transition-fast),
        box-shadow var(--gsk-transition-fast),
        transform var(--gsk-transition-fast);
    min-height: 80px;
}

.gsk-similar-card:hover {
    background: var(--gsk-purple-50);
    border-color: var(--gsk-purple-400);
    box-shadow: var(--gsk-shadow-md);
    transform: translateY(-2px);
}

.gsk-similar-card__name {
    font-family: var(--gsk-font-heading);
    font-size: var(--gsk-text-base);
    font-weight: var(--gsk-weight-semi);
    color: var(--gsk-gray-800);
    margin-bottom: var(--gsk-space-1);
}

.gsk-similar-card:hover .gsk-similar-card__name {
    color: var(--gsk-purple-700);
}

.gsk-similar-card__count {
    font-size: var(--gsk-text-xs);
    color: var(--gsk-gray-500);
}

.gsk-similar-view-all {
    text-align: center;
}

.gsk-similar-view-all__link {
    display: inline-flex;
    align-items: center;
    gap: var(--gsk-space-2);
    color: var(--gsk-purple-700);
    font-weight: var(--gsk-weight-semi);
    font-size: var(--gsk-text-base);
    text-decoration: none;
    padding: var(--gsk-space-2) var(--gsk-space-5);
    border: 2px solid var(--gsk-purple-200);
    border-radius: var(--gsk-radius-full);
    transition:
        background var(--gsk-transition-fast),
        border-color var(--gsk-transition-fast),
        color var(--gsk-transition-fast);
}

.gsk-similar-view-all__link:hover {
    background: var(--gsk-purple-800);
    border-color: var(--gsk-purple-800);
    color: var(--gsk-white);
}


/* ==========================================================================
   CATEGORY CONTENT SECTION  (SEO long-form copy below reviews)
   On live site this is populated by WooCommerce category description.
   ========================================================================== */

.gsk-hub-content {
    background: var(--gsk-white);
    padding: var(--gsk-space-16) var(--gsk-space-4);
    border-top: 1px solid var(--gsk-gray-200);
}

.gsk-hub-content-inner {
    max-width: 820px;
    margin: 0 auto;
}

.gsk-hub-content-inner h2 {
    font-family: var(--gsk-font-heading);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: var(--gsk-weight-bold);
    color: var(--gsk-purple-800);
    margin-bottom: var(--gsk-space-5);
}

.gsk-hub-content-inner h3 {
    font-family: var(--gsk-font-heading);
    font-size: var(--gsk-text-lg);
    font-weight: var(--gsk-weight-semi);
    color: var(--gsk-gray-800);
    margin-top: var(--gsk-space-8);
    margin-bottom: var(--gsk-space-3);
}

.gsk-hub-content-inner p {
    font-size: var(--gsk-text-base);
    color: var(--gsk-gray-600);
    line-height: var(--gsk-leading-relaxed);
    margin-bottom: var(--gsk-space-4);
}

.gsk-hub-content-inner ul {
    padding-left: var(--gsk-space-6);
    margin-bottom: var(--gsk-space-5);
}

.gsk-hub-content-inner li {
    font-size: var(--gsk-text-base);
    color: var(--gsk-gray-600);
    line-height: var(--gsk-leading-relaxed);
    margin-bottom: var(--gsk-space-2);
}

.gsk-hub-content-inner li strong {
    color: var(--gsk-gray-800);
}