/* ========================================================
   product.css
   Page-specific styles for product.aspx.
   Depends on Home.css being loaded first.

   Rebuilt from the actual product-style.css this page used to
   load. That file was ~2400 lines and almost entirely generic
   site-wide "framework" CSS unrelated to this page — hero
   banners, testimonials, blog/blog-classic/blog-details, a full
   checkout/login/register form kit, a track-order page, a FAQ
   accordion, a 16-variant button demo showcase (.btn-1 through
   .btn-16), and more. None of it is reachable from this page's
   markup, and everything actually needed (buttons, breadcrumb
   pattern, footer, cart sidebar) already lives in the shared
   Home.css. Only what this page's own markup uses is kept here.

   Also found and fixed: three rule blocks were defined TWICE,
   back-to-back, in the original file —
   - .cr-size-and-weight-contain (once mid-file, once again near
     "Products-page", nearly identical)
   - .zoom-image-hover (once near the quickview modal section,
     again near vehicle-detail-banner, identical)
   - the entire .cr-size-and-weight .cr-size-weight .cr-kg chain
     (five selectors, repeated verbatim with only an empty
     "/* Karat selection 
" comment separating the two copies)
Each is kept once below.
======================================================== */
/* === BREADCRUMB === */
.product-breadcrumb {
    width: 100%;
    padding: 28px 0;
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--light-gold) 100%);
}

.product-breadcrumb-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

    .product-breadcrumb-title h2 {
        margin: 0;
        font-family: 'Manrope', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--black);
    }

    .product-breadcrumb-title span {
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: var(--black);
    }

        .product-breadcrumb-title span a {
            color: var(--black);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

/* === PRODUCT NOT FOUND === */
.product-not-found {
    padding: var(--spacing-2xl) 0;
    text-align: center;
}

.product-not-found-icon {
    font-size: 4rem;
    color: #d1d5db;
    display: block;
    margin-bottom: var(--spacing-md);
}

.product-not-found h2 {
    margin-bottom: var(--spacing-sm);
}

.product-not-found p {
    margin-bottom: var(--spacing-lg);
}

/* === GALLERY (Swiper main + thumbs) ===
   .zoom-image-hover is the one genuinely reusable rule from the
   original source — kept once (it was duplicated there), retoned
   to the gold palette, and repurposed as the frame around the
   Swiper main slide instead of the original's static image wrap. */
.product-gallery {
    position: sticky;
    top: 30px;
}

.product-main-swiper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.zoom-image-hover {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--border-light);
    background-color: var(--light-gray);
    border-radius: var(--radius-lg);
    cursor: crosshair;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-thumbs-swiper {
    box-sizing: border-box;
    padding: 2px;
}

    .product-thumbs-swiper .swiper-slide {
        border-radius: var(--radius-sm);
        overflow: hidden;
        border: 2px solid transparent;
        cursor: pointer;
        opacity: 0.6;
        transition: all var(--transition-base);
        aspect-ratio: 1 / 1;
    }

        .product-thumbs-swiper .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .product-thumbs-swiper .swiper-slide-thumb-active {
        border-color: var(--primary-gold);
        opacity: 1;
    }

/* === PRODUCT INFO === */
.cr-size-and-weight-contain {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--spacing-lg);
}

    .cr-size-and-weight-contain .heading {
        margin-bottom: var(--spacing-sm);
        font-size: 1.6rem;
        color: var(--black);
    }

.pdescription-text {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.8;
    white-space: pre-line;
    margin-bottom: var(--spacing-md);
}

.cr-size-and-weight {
    padding-top: var(--spacing-md);
}

    .cr-size-and-weight .list ul {
        list-style: none;
        padding: 0;
        margin: var(--spacing-sm) 0;
    }

        .cr-size-and-weight .list ul li {
            font-size: 14px;
            color: var(--dark-gray);
        }

            .cr-size-and-weight .list ul li label {
                font-weight: 600;
                margin-right: 4px;
            }

    /* Karat/size swatch chip pattern — from the original's .cr-kg rules
   (kept once; deduplicated). Not currently rendered by this page's
   dropdown-based size/karat pickers, but kept available as the
   established chip style in case that UI pattern is used here later. */
    .cr-size-and-weight .cr-size-weight {
        display: flex;
        align-items: center;
        padding-top: var(--spacing-md);
    }

        .cr-size-and-weight .cr-size-weight h5 {
            margin-bottom: 0;
            font-size: 1rem;
            color: var(--black);
        }

        .cr-size-and-weight .cr-size-weight .cr-kg {
            padding-left: var(--spacing-sm);
        }

            .cr-size-and-weight .cr-size-weight .cr-kg ul {
                width: 100%;
                padding: 0;
                margin: 0;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
            }

                .cr-size-and-weight .cr-size-weight .cr-kg ul li {
                    margin: 2px;
                    padding: 5px 10px;
                    font-size: 12px;
                    background-color: var(--white);
                    color: var(--medium-gray);
                    border: 1px solid var(--border-light);
                    border-radius: var(--radius-sm);
                    cursor: pointer;
                    transition: all var(--transition-base);
                }

                .cr-size-and-weight .cr-size-weight .cr-kg ul .active-color {
                    background-color: var(--primary-gold);
                    color: var(--white);
                }

/* === PURCHASE PANEL ===
   Replaces the old bare dropdown-container + cr-product-price +
   cr-add-button trio, which had no visual hierarchy: two same-
   weight buttons under plain grey placeholder text. This wraps
   the whole purchase flow in one card with step indicators, a
   price box that only becomes prominent once both selections are
   made, a clear primary/secondary button split, and a trust strip. */
.purchase-box {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--primary-gold);
    box-shadow: var(--shadow-sm);
}

/* --- Step indicators --- */
.purchase-steps {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.purchase-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    color: var(--medium-gray);
    font-size: 13px;
    font-weight: 700;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--medium-gray);
    transition: color var(--transition-base);
}

.step-connector {
    flex: 1;
    max-width: 60px;
    height: 2px;
    margin: 0 var(--spacing-sm);
    background: var(--border-light);
    transition: background-color var(--transition-base);
}

/* JS toggles .is-complete once a dropdown has a real value selected */
.purchase-step.is-complete .step-circle {
    border-color: var(--primary-gold);
    background: var(--primary-gold);
    color: var(--white);
}

    .purchase-step.is-complete .step-circle::before {
        content: '\2713';
    }

.purchase-step.is-complete .step-label {
    color: var(--black);
}

.purchase-steps.is-size-complete .step-connector {
    background: var(--primary-gold);
}

/* --- Dropdowns (unchanged look, now inside the card) --- */
.dropdown-container {
    position: relative;
    width: 100%;
}

.dropdown-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.custom-dropdown {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: border-color var(--transition-base);
}

    .custom-dropdown:focus {
        border-color: var(--primary-gold);
    }

.dropdown-arrow {
    width: 0;
    height: 0;
    margin-left: -24px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--dark-gray);
    pointer-events: none;
}

/* --- Price reveal box ---
   Starts flat/muted (the "please select" placeholder state) and
   the JS adds .is-ready the instant both dropdowns have a real
   value, ahead of the server round-trip actually filling in the
   number — the reveal itself feels immediate even though the
   price text still comes from the postback. */
.price-box {
    margin: var(--spacing-md) 0;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--light-gray);
    border: 1px dashed var(--border-light);
    transition: all 0.35s ease;
}

    .price-box .new-price {
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--medium-gray);
    }

    .price-box.is-ready {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.04));
        border: 1px solid var(--primary-gold);
        transform: scale(1.01);
    }

        .price-box.is-ready .new-price {
            font-family: 'Manrope', sans-serif;
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--primary-gold);
        }

/* --- CTA hierarchy ---
   Add to Cart is now the obvious primary action (full-width,
   gold gradient, bold); Wishlist shrinks to an icon-only circular
   outline button beside it instead of competing for attention. */
.cr-add-button {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-top: var(--spacing-lg);
    position: relative;
}

.btn-add-to-cart {
    flex: 1;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-gold), var(--light-gold));
    color: var(--black);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

    .btn-add-to-cart:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--black), #2d2d2d);
        color: var(--white);
    }

    /* JS applies this until both size and karat are selected —
       dimmed and inert rather than a clickable dead end. */
    .btn-add-to-cart:disabled,
    .btn-add-to-cart.is-disabled {
        background: var(--light-gray);
        color: #b3b3b3;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* JS applies this for the brief window between click and the
       UpdatePanel postback resolving, so the wait doesn't read as
       a dead click. */
    .btn-add-to-cart.is-loading {
        color: transparent !important;
        pointer-events: none;
    }

        .btn-add-to-cart.is-loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 18px;
            margin: -9px 0 0 -9px;
            border: 2px solid rgba(0, 0, 0, 0.25);
            border-top-color: var(--black);
            border-radius: 50%;
            animation: btnSpin 0.6s linear infinite;
        }

@keyframes btnSpin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Wishlist button ---
   Redesigned: the icon is now an inline SVG heart applied via CSS
   mask rather than an icon-font glyph, so the exact outline/filled
   shape is fully authored here instead of depending on remixicon
   having a fill-variant codepoint at a guessed value. Two mask
   sources (outline, filled) are swapped between states; the color
   and scale motion carry the transition.

   States, driven by product.js:
   - idle: white bg, rose-outline heart
   - hover: soft blush tint (not yet wishlisted)
   - is-loading: spinner overlay while the postback is in flight
   - is-wishlisted: filled rose→gold gradient bg + white heart,
     with a spring-eased pop plus a small particle burst on the
     moment of confirmation (not on repeat "already wishlisted"
     clicks) — see initWishlistButton in product.js
   - :focus-visible: a real focus ring for keyboard users, absent
     from the previous version entirely */
:root {
    --wishlist-accent: #b23a5c;
    --wishlist-accent-soft: #fdf1f4;
}

.wishlist-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--white);
    border: 1.5px solid var(--border-light);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    color: transparent;
    font-size: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

    .wishlist-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 21px;
        height: 21px;
        transform: translate(-50%, -50%) scale(1);
        background-color: var(--wishlist-accent);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.35-9.5-8.5C.5 8.5 2 4 6 4c2 0 3.5 1 4 2.5C10.5 5 12 4 14 4c4 0 5.5 4.5 3.5 8.5C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.35-9.5-8.5C.5 8.5 2 4 6 4c2 0 3.5 1 4 2.5C10.5 5 12 4 14 4c4 0 5.5 4.5 3.5 8.5C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .wishlist-btn:hover:not(.is-wishlisted):not(.is-loading) {
        border-color: var(--wishlist-accent);
        background: var(--wishlist-accent-soft);
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(178, 58, 92, 0.15);
    }

    .wishlist-btn:active:not(.is-loading) {
        transform: translateY(0) scale(0.94);
    }

    .wishlist-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(178, 58, 92, 0.25);
    }

    .wishlist-btn.is-wishlisted {
        background: linear-gradient(135deg, var(--wishlist-accent), #c9536f);
        border-color: transparent;
        box-shadow: 0 3px 10px rgba(178, 58, 92, 0.3);
    }

        .wishlist-btn.is-wishlisted::before {
            background-color: var(--white);
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21s-7-4.35-9.5-8.5C.5 8.5 2 4 6 4c2 0 3.5 1 4 2.5C10.5 5 12 4 14 4c4 0 5.5 4.5 3.5 8.5C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21s-7-4.35-9.5-8.5C.5 8.5 2 4 6 4c2 0 3.5 1 4 2.5C10.5 5 12 4 14 4c4 0 5.5 4.5 3.5 8.5C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
        }

        .wishlist-btn.is-wishlisted.is-popping {
            animation: wishlistPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

            .wishlist-btn.is-wishlisted.is-popping::before {
                animation: wishlistIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

    .wishlist-btn.is-loading {
        pointer-events: none;
    }

        .wishlist-btn.is-loading::before {
            -webkit-mask-image: none;
            mask-image: none;
            background-color: transparent;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(178, 58, 92, 0.25);
            border-top-color: var(--wishlist-accent);
            border-radius: 50%;
            animation: btnSpin 0.6s linear infinite;
        }

/* --- Wishlist confirmation burst ---
   A handful of small dots created by product.js at the moment a
   product is newly wishlisted, radiating outward and fading —
   the same family of micro-interaction as the familiar "like
   button" heart-burst pattern. Purely decorative; removes itself
   from the DOM after the animation via JS. */
.wishlist-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--wishlist-accent);
    pointer-events: none;
    z-index: 15;
    animation: wishlistBurst 0.6s ease-out forwards;
}

@keyframes wishlistPop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.18);
    }

    70% {
        transform: scale(0.96);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes wishlistIconPop {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    45% {
        transform: translate(-50%, -50%) scale(1.3);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes wishlistBurst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--burst-x), var(--burst-y)) scale(0.4);
    }
}

/* --- Wishlist feedback toast ---
   Reads the server's own status message (lblResult, shared with
   the price box) and shows it here instead — see product.js for
   why: clicking the wishlist button used to silently overwrite the
   price display with this same text, since both features write to
   one shared label. Appended dynamically above the wishlist button
   rather than living in the markup, since it only exists while a
   message is showing. */
.wishlist-toast {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    max-width: 220px;
    padding: 8px 14px;
    background: var(--black);
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 20;
}

    .wishlist-toast::after {
        content: '';
        position: absolute;
        top: 100%;
        right: 18px;
        border: 6px solid transparent;
        border-top-color: var(--black);
    }

    .wishlist-toast.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .wishlist-toast.is-error {
        background: #b3273e;
    }

        .wishlist-toast.is-error::after {
            border-top-color: #b3273e;
        }

/* --- Trust strip --- */
.trust-strip {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    text-align: center;
}

    .trust-item i {
        font-size: 20px;
        color: var(--primary-gold);
    }

    .trust-item span {
        font-size: 11px;
        color: var(--medium-gray);
        font-weight: 500;
        line-height: 1.3;
    }

/* --- Mobile sticky purchase bar ---
   Pinned to the bottom once the purchase panel scrolls out of
   view on small screens, so Add to Cart is always one tap away.
   Hidden by default/on desktop; JS toggles .is-visible. */
.mobile-sticky-bar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-sticky-bar {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        padding: 10px var(--spacing-md);
        background: var(--white);
        border-top: 1px solid var(--border-light);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

        .mobile-sticky-bar.is-visible {
            transform: translateY(0);
        }

    .sticky-price {
        flex: 1;
        font-family: 'Manrope', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--black);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .sticky-price.is-ready {
            color: var(--primary-gold);
        }

    .sticky-add-btn {
        flex-shrink: 0;
        height: 42px;
        padding: 0 20px;
        background: linear-gradient(135deg, var(--primary-gold), var(--light-gold));
        color: var(--black);
        border: none;
        border-radius: var(--radius-sm);
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
    }

        .sticky-add-btn:disabled {
            background: var(--light-gray);
            color: #b3b3b3;
            cursor: not-allowed;
        }
}

/* === PRODUCT INFO === */
.cr-paking-delivery {
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-lg);
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

    .cr-paking-delivery .nav-tabs {
        border-bottom: 1px solid var(--border-light);
        margin-bottom: var(--spacing-lg);
    }

        .cr-paking-delivery .nav-tabs .nav-link {
            color: var(--medium-gray);
            font-weight: 600;
            border: none;
            border-bottom: 2px solid transparent;
        }

            .cr-paking-delivery .nav-tabs .nav-link.active {
                color: var(--primary-gold);
                border-bottom-color: var(--primary-gold);
                background: none;
            }

    .cr-paking-delivery .heading {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-sm);
        font-size: 1.1rem;
        color: var(--black);
    }

    .cr-paking-delivery .cr-description p {
        color: var(--medium-gray);
        line-height: 1.8;
    }

    .cr-paking-delivery .list ul {
        list-style: none;
        padding: 0;
        margin-top: var(--spacing-md);
    }

        .cr-paking-delivery .list ul li {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-light);
            font-size: 14px;
        }

            .cr-paking-delivery .list ul li label {
                font-weight: 600;
                margin-right: 4px;
            }

/* === GOLD COLOUR SWATCHES === */
.custom-radio-button-list input[type="radio"] {
    display: none;
}

.custom-radio-button-list img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
    display: block;
}

.custom-radio-button-list label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    margin-right: var(--spacing-md);
    padding: 8px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.custom-radio-button-list input[type="radio"]:checked + label {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .product-gallery {
        position: static;
        margin-bottom: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .product-breadcrumb-title h2 {
        font-size: 18px;
    }

    .custom-radio-button-list img {
        width: 48px;
        height: 48px;
    }
}