/**
 * Golden Hive Blocks — Lightweight product rail (CSS scroll-snap carousel).
 *
 * No slider library: native horizontal scroll + scroll-snap (Shopify-style),
 * with optional arrow buttons. Cards are standard WooCommerce product cards, so
 * they inherit the theme's styling and carry Quick View + the size picker.
 * See includes/product-rail.php.
 */

.gh-rail {
    position: relative;
    margin: 0 0 40px;
}

.gh-rail__title {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Holds the track + the side arrows; arrows are centered against the cards. */
.gh-rail__viewport { position: relative; }

.gh-rail__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e2e2e6;
    background: #fff;
    color: #1f2532;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.gh-rail__nav--prev { left: 6px; }
.gh-rail__nav--next { right: 6px; }
.gh-rail__nav:hover { border-color: #721124; color: #721124; }
.gh-rail__nav[disabled] { opacity: .35; cursor: default; }
/* Arrows are a desktop enhancement: hidden until JS confirms overflow, and on
   touch where native swipe is the interaction. */
.gh-rail:not(.is-scrollable) .gh-rail__nav { display: none; }
@media (max-width: 767px) {
    .gh-rail__nav { display: none; }
}

/* The track: native scroll-snap rail. Beats the theme's grid/float on
   .woocommerce ul.products (hence the !important overrides + float reset). */
.gh-rail .gh-rail__track,
.gh-rail__track,
.gh-rail__track.products {
    --gh-cols: 4;          /* overridden inline per shortcode (columns="N") */
    --gh-gap: 16px;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--gh-gap);
    margin: 0 !important;
    padding: 0 2px 10px;
    list-style: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gh-rail__track::before,
.gh-rail__track::after { content: none !important; display: none !important; } /* kill theme clearfix */
.gh-rail__track::-webkit-scrollbar { display: none; }

.gh-rail .gh-rail__track > li.product,
.gh-rail__track > li.product {
    /* Exactly --gh-cols cards fill the visible width on desktop. */
    flex: 0 0 calc((100% - (var(--gh-cols) - 1) * var(--gh-gap)) / var(--gh-cols)) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    clear: none !important;
    position: relative;          /* anchor the absolutely-positioned QV button */
    scroll-snap-align: start;
    /* Uniform card so every row lines up (image, 2-line title, price, button). */
    display: flex !important;
    flex-direction: column !important;
}

/* Uniform square image across all cards. */
.gh-rail__track > li.product img,
.gh-rail__track > li.product .attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 0 10px !important;
}
/* Two-line clamped title with a fixed height so cards stay aligned. */
.gh-rail__track > li.product .woocommerce-loop-product__title,
.gh-rail__track > li.product h2,
.gh-rail__track > li.product h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    font-size: 14px;
    margin: 0 0 4px;
}
.gh-rail__track > li.product .price {
    margin: 0 0 4px;
    font-size: 14px;
}
/* On phones, ignore the column count and show a peek so cards stay tappable. */
@media (max-width: 767px) {
    .gh-rail .gh-rail__track > li.product,
    .gh-rail__track > li.product {
        flex-basis: 44vw !important;
    }
}

/* Make sure the Quick View button reveals on the rail too (its default reveal
   is scoped to hover under .woocommerce; we wrap the rail in .woocommerce, but
   keep this explicit for touch + focus robustness). */
.gh-rail__track > li.product:hover .rp-quick-view-btn,
.gh-rail__track > li.product:focus-within .rp-quick-view-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
@media (hover: none) {
    .gh-rail__track .rp-quick-view-btn {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}