/* ============================================================
   Single Product Page – Redesign
   Companion file to content-single-product.php
   ============================================================ */


/* ----------------------------------------------------------
   Badge (Bestseller / Hot / etc.)
   ---------------------------------------------------------- */
.vb-pdp-badge {
    display: inline-block;
    background: #FFE000;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}


/* ----------------------------------------------------------
   Back to Products link (replaces breadcrumb)
   ---------------------------------------------------------- */
.vb-pdp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s ease;

    color: #6B6B6B;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.312px;
}

.vb-pdp-back-link:hover {
    color: #1a1a1a;
}

.vb-pdp-back-link__arrow {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* ----------------------------------------------------------
   Product Title
   ---------------------------------------------------------- */
.single-product .entry-summary .product_title {
    align-self: stretch;
    color: #1A1A1A;
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px; /* 111.111% */
    letter-spacing: 0.369px;
}


/* ----------------------------------------------------------
   Brand ("by Le Creuset")
   ---------------------------------------------------------- */
.vb-pdp-brand {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: #6b6b6b;
    margin: 0 0 12px;
}
.vb-pdp-brand a {
    color: #6b6b6b;
    text-decoration: underline !important;
}
.vb-pdp-brand a:hover {
    color: #C8102E;
    text-decoration: underline !important;
}


/* ----------------------------------------------------------
   Star Rating Row
   ---------------------------------------------------------- */
.vb-pdp-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 14px;
}
.vb-pdp-rating .vb-stars {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
}
.vb-pdp-rating .vb-stars .vb-star {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
    max-width: none !important;
    fill: #e0e0e0 !important;
    flex-shrink: 0;
    display: block !important;
    shape-rendering: geometricPrecision;
}
.vb-pdp-rating .vb-stars .vb-star.vb-star--on {
    fill: #C8102E !important;
}
.vb-pdp-rating .vb-rating-score,
.vb-pdp-rating .vb-rating-count {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #1a1a1a;
    font-size: 14px;
    letter-spacing: -0.1504px;
}


/* ----------------------------------------------------------
   Price Block
   Row 1: [PRICE-TYPE badge] WAS: $759.99
   Row 2: $229.99 (large)  Save $150
   Replaces the old stacked .price-wrapper blocks
   ---------------------------------------------------------- */
.vb-pdp-price-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* Row 1 – price-type pill + struck-through "WAS" price */
.vb-pdp-price-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.vb-pdp-price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.vb-pdp-price-badge--hot     { background: #C8102E; }
.vb-pdp-price-badge--chopped { background: #1ea84c; }
.vb-pdp-price-was {
    font-size: 20px;
    font-weight: 400;
    color: #6b6b6b;
    line-height: 28px;
}

/* Row 2 – large current price + "% OFF RRP" pill */
.vb-pdp-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.vb-pdp-price-current {
    font-size: 36px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 40px;
    letter-spacing: 0.369px;
}
/* Red rounded discount pill beside the price (non-HOT/CHOP discounted items) */
.vb-pdp-discount-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border-radius: 50px;
    background: #c8102e;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}
.vb-pdp-price-rrp {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
}
.vb-pdp-price-save {
    font-size: 13px;
    color: #777;
}

/* Keep the old price-wrapper hidden when the redesign is active */
.vb-pdp-active .price-wrapper {
    display: none !important;
}
.vb-pdp-active .woocommerce-product-rating {
    display: none;
}


/* ----------------------------------------------------------
   Short Description (sits between price and benefits bar)
   ---------------------------------------------------------- */
.vb-pdp-short-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 22px;
}
.vb-pdp-short-desc p {
    margin: 0 0 10px;
    color: #555;
    line-height: 1.6;
}
.vb-pdp-short-desc p:last-child {
    margin-bottom: 0;
}
.vb-pdp-short-desc ul,
.vb-pdp-short-desc ol {
    margin: 8px 0 12px 18px;
    padding: 0;
    color: #555;
    line-height: 1.6;
}
.vb-pdp-short-desc strong {
    color: #1a1a1a;
}


/* ----------------------------------------------------------
   Benefits Bar (Free Shipping | 2 Year Warranty | 30-Day Returns)
   ---------------------------------------------------------- */
.vb-pdp-benefits {
    display: flex;
    gap: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin-bottom: 26px;
    padding: 17px;
    background: rgba(245, 245, 245, 0.3);
}
.vb-pdp-benefit-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.vb-pdp-benefit-item svg {
    display: block;
    color: #C8102E;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.vb-pdp-benefit-title {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.3;
}
.vb-pdp-benefit-sub {
    display: block;
    font-size: 12px;
    color: #777;
}


/* ----------------------------------------------------------
   Quantity Row (label + +/- control + stock notice)
   ---------------------------------------------------------- */
.vb-pdp-qty-section {
    margin-bottom: 16px;
    width: 100%;
}
.vb-pdp-qty-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.1504px;
    color: #1a1a1a;
    margin-bottom: 8px;
}
.vb-pdp-qty-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}
.vb-pdp-qty-stock {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1504px;
    color: #6b6b6b;
    white-space: nowrap;
}
/* WooCommerce wraps the availability text in <p class="stock in-stock"> (e.g.
   "Only 5 left in stock"). custom/product.css hides it globally with
   `p.stock.in-stock { display: none }`; re-show it inside the quantity row
   and match the Figma type. */
.vb-pdp-qty-stock p.stock,
.vb-pdp-qty-stock p.stock.in-stock {
    display: block !important;
    margin: 0;
    padding: 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1504px;
    color: #6b6b6b;
    white-space: nowrap;
}

/* Quantity input – [−] [input] [+] inline layout
   Selectors deliberately match/beat custom.css L2851+ (
   .woocommerce.single-product div.product form.cart div.quantity
   .woocommerce.single-product div.quantity input)
*/
body.woocommerce.single-product div.product form.cart .vb-pdp-qty-section .quantity,
.vb-pdp-active .quantity {
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    width: fit-content !important;
    height: auto !important;
    margin: 0 !important;
    background: #fff;
}
/* Number cell – no outer border, only thin internal dividers */
body.woocommerce.single-product div.product .vb-pdp-active .quantity input.qty,
body.woocommerce.single-product div.product .vb-pdp-active .quantity input.qty-txt-field,
body.woocommerce.single-product div.quantity input,
.vb-pdp-active .quantity input.qty,
.vb-pdp-active .quantity input.qty-txt-field {
    width: 48px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid #e5e5e5 !important;
    border-right: 1px solid #e5e5e5 !important;
    padding: 0 !important;
    height: 40px !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: -0.3125px !important;
    color: #1a1a1a !important;
    background: #fff !important;
    -moz-appearance: textfield;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
    order: 2;
    box-shadow: none !important;
    outline: none !important;
}
.vb-pdp-active .quantity input.qty::-webkit-inner-spin-button,
.vb-pdp-active .quantity input.qty::-webkit-outer-spin-button,
.vb-pdp-active .quantity input.qty-txt-field::-webkit-inner-spin-button,
.vb-pdp-active .quantity input.qty-txt-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.vb-pdp-active .quantity button.minus { order: 1; }
.vb-pdp-active .quantity button.plus  { order: 3; }
/* − / + buttons – black symbols, transparent bg, no border, square cells */
body.woocommerce.single-product div.product .vb-pdp-active .quantity button.minus,
body.woocommerce.single-product div.product .vb-pdp-active .quantity button.plus,
.vb-pdp-active .quantity button.minus,
.vb-pdp-active .quantity button.plus {
    background: #fff !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    cursor: pointer;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    flex-shrink: 0;
    -webkit-appearance: none !important;
    appearance: none !important;
}
body.woocommerce.single-product div.product .vb-pdp-active .quantity button.minus:hover,
body.woocommerce.single-product div.product .vb-pdp-active .quantity button.plus:hover,
.vb-pdp-active .quantity button.minus:hover,
.vb-pdp-active .quantity button.plus:hover {
    background: #f5f5f5 !important;
    color: #1a1a1a !important;
}
.vb-pdp-active .quantity button.minus:active,
.vb-pdp-active .quantity button.plus:active {
    background: #eaeaea !important;
}


/* ----------------------------------------------------------
   Add-to-Cart action row
   (full-width button + wishlist icon + share icon)
   ---------------------------------------------------------- */
/* Override custom.css's higher-specificity flex rule on form.cart */
.woocommerce.single-product .vb-pdp-active form.cart,
.vb-pdp-active form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-bottom: 0;
}

/* Each section inside the form stacks as a full-width block */
.vb-pdp-active form.cart .vb-pdp-qty-section,
.vb-pdp-active form.cart .vb-pdp-cart-row {
    width: 100%;
    flex-shrink: 0;
}

.vb-pdp-cart-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}

/* The main Add to Cart button inside the row */
.vb-pdp-cart-row .single_add_to_cart_button,
.vb-pdp-cart-row .btn.single_add_to_cart_button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #C8102E;
    color: #fff;
    border: none;
    height: 60px;
    min-height: 60px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: none;
    letter-spacing: -0.3125px;
    padding: 0 20px;
    white-space: nowrap;
    line-height: 24px;
    box-sizing: border-box;
}
.vb-pdp-cart-row .single_add_to_cart_button:hover,
.vb-pdp-cart-row .btn.single_add_to_cart_button:hover {
    background: #c0151b;
    color: #fff;
}

/* Separator between "Add to Cart" and the price – give the dash breathing
   room on both sides so the price doesn't read as a negative amount. */
.vb-pdp-cart-row .single_add_to_cart_button .vb-pdp-cart-sep {
    margin: 0 8px;
}
.vb-pdp-cart-row .single_add_to_cart_button .vb-pdp-cart-price {
    white-space: nowrap;
}

/* Loading state – hide text, show centered spinner.
   Selectors deliberately match/beat WooCommerce core specificity:
   .woocommerce button.button.loading::after (0,4,2)
   Our: body.woocommerce .vb-pdp-cart-row button.single_add_to_cart_button.loading::after (0,5,2)
*/
body.woocommerce .vb-pdp-cart-row button.single_add_to_cart_button.loading,
body.woocommerce .vb-pdp-cart-row button.btn.single_add_to_cart_button.loading,
.vb-pdp-cart-row .single_add_to_cart_button.loading {
    color: transparent !important;
    position: relative !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background-image: none !important;
    text-indent: 0 !important;
    padding-right: 20px !important; /* override WC's padding-right: 2.618em on .loading */
}
/* Hide any inner icons/spinners injected by WC or plugins */
body.woocommerce .vb-pdp-cart-row button.single_add_to_cart_button.loading > *,
.vb-pdp-cart-row .single_add_to_cart_button.loading > * {
    visibility: hidden !important;
}
/* Theme's custom.js prepends <div class="vb-loader2"> into the button on submit –
   hide it completely so only our centered ::after spinner shows. */
body.woocommerce .vb-pdp-cart-row button.single_add_to_cart_button .vb-loader2,
.vb-pdp-cart-row .single_add_to_cart_button .vb-loader2 {
    display: none !important;
}
/* Kill any WooCommerce / plugin ::before spinner */
body.woocommerce .vb-pdp-cart-row button.single_add_to_cart_button.loading::before,
.vb-pdp-cart-row .single_add_to_cart_button.loading::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
    border: none !important;
}
/* Our centered spinner via ::after – beats WC core specificity */
body.woocommerce .vb-pdp-cart-row button.single_add_to_cart_button.loading::after,
body.woocommerce .vb-pdp-cart-row button.btn.single_add_to_cart_button.loading::after,
.vb-pdp-cart-row .single_add_to_cart_button.loading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 -10px !important;
    padding: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: vbPdpSpin 0.7s linear infinite !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    opacity: 1 !important;
    vertical-align: middle !important;
    transform-origin: center center;
    /* Override WC's exact properties: */
    top: 50% !important;
    right: auto !important;
}
@keyframes vbPdpSpin {
    to { transform: rotate(360deg); }
}

/* Any other injected children (e.g. afterpay) also go full-width */
.vb-pdp-active form.cart > *:not(.vb-pdp-qty-section):not(.vb-pdp-cart-row) {
    width: 100%;
    flex-shrink: 0;
}

/* Fallback: override the old grey add-to-cart button colour globally on this page */
.vb-pdp-active form.cart .single_add_to_cart_button {
    background: #C8102E;
    color: #fff;
}
.vb-pdp-active form.cart .single_add_to_cart_button:hover {
    background: #c0151b;
}

/* Afterpay instalment message now renders below the express button (outside
   form.cart), so the style is scoped to the summary rather than the form. */
.vb-pdp-active .afterpay-main-text {
    color: #6B6B6B !important;
    font-family: Inter !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 24px !important; /* 150% */
    letter-spacing: -0.312px !important;
    padding-right: 5px !important;
}

/* Icon buttons (wishlist + share) */
.vb-pdp-icon-btn {
    border: 2px solid #e5e5e5;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
    color: #333;
    text-decoration: none;
    padding: 14px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}
.vb-pdp-icon-btn:hover {
    border-color: #999;
    color: #C8102E;
    text-decoration: none;
}
.vb-pdp-icon-btn svg {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

/* Wishlist wrapper – make it the same size as the other icon buttons */
.vb-pdp-wishlist-wrap {
    overflow: visible;
    position: relative;
    line-height: 0;
}
.vb-pdp-wishlist-wrap .tinv-wraper.tinv-wishlist {
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.vb-pdp-wishlist-wrap a.tinvwl_add_to_wishlist_button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none;
    background: transparent;
    border: none;
    line-height: 0;
}
.vb-pdp-wishlist-wrap a.tinvwl_add_to_wishlist_button:hover {
    background: transparent;
}
.vb-pdp-wishlist-wrap a.tinvwl_add_to_wishlist_button .tinvwl-font {
    display: none;
}
.vb-pdp-wishlist-wrap a.tinvwl_add_to_wishlist_button::before,
.vb-pdp-wishlist-wrap a.tinvwl_add_to_wishlist_button.tinvwl-icon-heart::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url(../images/likeheartoutline.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    line-height: 0 !important;
    vertical-align: middle !important;
}


/* ----------------------------------------------------------
   Stripe Express Checkout (Apple Pay / Google Pay) – occupies the
   slot that the old "Buy Now" button used to sit in, directly below
   the Add to Cart row. Stripe renders the button inside a cross-origin
   iframe, so we can only control the container: width and spacing.
   The element keeps its inline `display:none` until Stripe confirms the
   device can pay (canMakePayment); on devices without a supported wallet
   it stays hidden, leaving only the Add to Cart button. The button's own
   colour/height/radius come from the Stripe "Express checkout" settings
   (theme: dark = black; size: large = 56px height / 6px radius).
   ---------------------------------------------------------- */
#wc-stripe-express-checkout-element {
    width: 100%;
    margin-top: 0 !important;   /* override plugin inline margin-top:1em */
    margin-bottom: 20px;
    clear: both;
}

/* Single-button layout: there is no second button to separate from,
   so suppress the "— OR —" divider the plugin injects. */
#wc-stripe-express-checkout-button-separator {
    display: none !important;
}


/* ----------------------------------------------------------
   Wishlist – hide text, show icon only inside cart row
   ---------------------------------------------------------- */
/* Aggressive text hide – covers all plugin text spans */
.vb-pdp-wishlist-wrap .tinvwl-font,
.vb-pdp-wishlist-wrap .tinvwl_add_txt,
.vb-pdp-wishlist-wrap span:not(.tinvwl-icon):not([class*="tinvwl-icon"]) {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
}
/* Wishlist link below buttons (standalone fallback position) */
.vb-pdp-active .tinv-wraper.tinv-wishlist {
    margin-bottom: 16px;
}


/* ----------------------------------------------------------
   Hide old free-shipping banner (replaced by benefits bar)
   ---------------------------------------------------------- */
.vb-pdp-active .vb-free-shipping-banner {
    display: none;
}


/* ----------------------------------------------------------
   Product image gallery carousel arrows
   ---------------------------------------------------------- */
.woocommerce-product-gallery {
    position: relative;
}
.vb-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.vb-gallery-arrow:hover {
    background: #fff;
    color: #C8102E;
    border-color: #C8102E;
}
.vb-gallery-prev {
    left: 12px;
}
.vb-gallery-next {
    right: 12px;
}

/* Thumbnail strip carousel
   ===========================
   JS wraps .flex-control-thumbs in:
     <div class="vb-thumbs-carousel">
       <button class="vb-thumb-arrow vb-thumb-prev">‹</button>
       <div class="vb-thumbs-viewport">
         <ol class="flex-control-thumbs">…</ol>
       </div>
       <button class="vb-thumb-arrow vb-thumb-next">›</button>
     </div>
*/
.vb-thumbs-carousel {
    position: relative;
    margin-top: 12px;
    padding: 0 44px; /* room for arrows + breathing space */
}
.vb-thumbs-carousel.no-overflow {
    padding: 0;
}
.vb-thumbs-carousel.no-overflow .vb-thumb-arrow {
    display: none;
}
.vb-thumbs-viewport {
    overflow: hidden;
    width: 100%;
    padding: 2px 0; /* vertical breathing room so active border isn't clipped top/bottom */
}
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 0 4px !important; /* horizontal breathing room so first/last border isn't clipped */
    margin: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

/* Prev / Next arrow buttons – positioned to vertical center of the 80px thumb row */
.vb-thumb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #333;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.vb-thumb-arrow:hover {
    background: #C8102E;
    border-color: #C8102E;
    color: #fff;
}
.vb-thumb-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.vb-thumb-prev { left: 4px; }
.vb-thumb-next { right: 4px; }
.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 80px;
    width: 80px !important;
    height: 80px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 !important;
    margin-right: 0 !important;
    transition: border-color 0.2s;
    background: #fff;
    box-sizing: border-box;
}
.woocommerce div.product div.images .flex-control-thumbs li:hover {
    border-color: #b8b8b8;
}
/* Active thumbnail – modern :has() targets the LI containing the active img */
.woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active),
.woocommerce div.product div.images .flex-control-thumbs li.vb-thumb-active {
    border: 1px solid #C8102E !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border: none !important;
}

/* Main image viewport – larger gallery area */
.flex-viewport {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px;
    min-height: 560px !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper img {
    max-height: 540px !important;
    width: auto !important;
    margin: 0 auto;
    object-fit: contain;
}

/* Hide the small dot indicator nav (custom-nav) – replaced by thumbnails + arrows */
.woocommerce-product-gallery .custom-nav,
ul.custom-nav {
    display: none !important;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .vb-pdp-price-current {
        font-size: 28px;
        line-height: 1.2;
    }
    .vb-pdp-price-badge {
        font-size: 14px;
        padding: 6px 10px;
    }
    .vb-pdp-price-was {
        font-size: 16px;
    }
    .vb-pdp-benefit-title {
        font-size: 12px;
    }
    .vb-pdp-benefit-sub {
        font-size: 11px;
    }
    .vb-pdp-cart-row .single_add_to_cart_button,
    .vb-pdp-cart-row .btn.single_add_to_cart_button {
        font-size: 13px;
        padding: 14px 10px;
    }
}

@media (max-width: 480px) {
    .vb-pdp-benefits {
        flex-wrap: wrap;
        gap: 8px;
    }
    .vb-pdp-benefit-item {
        flex: 0 0 100%;
    }
}


/* ============================================================
   Product Tabs – horizontal text tabs with red underline
   Overrides the vertical sidebar defined in custom.css ~L2648
   ============================================================ */

/* Container: stack tabs ON TOP of content (was flex row in custom.css).
   Border-top spans the full section (Figma node 48:1494). */
body.woocommerce.single #content div.product .woocommerce-tabs {
    display: block;
    margin-top: 32px;
    border-top: 1px solid #e5e5e5;
    border-radius: 0;
}

/* Tabs row: horizontal, full width, bottom border */
body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    border-right: none;          /* kill the mint right border */
    border-radius: 0 !important; /* kill stray rounded corner from WC/Bootstrap core */
    gap: 32px;
}

/* Individual tab */
body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: none !important;  /* kill mint fill */
    border: none;
    border-radius: 0;
    list-style: none;
    position: relative;
}

/* Tab link */
body.woocommerce.single div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 17px 0;
    color: #6b6b6b;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3125px;
    text-decoration: none;
    background: none;
    border: none;
    transition: color 0.2s;
}
body.woocommerce.single div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #1a1a1a;
}

/* Active tab: red text + red underline indicator
   (2px, sits on top of the row's 1px bottom border) */
body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs li.active a {
    color: #C8102E;
}
body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs li.active {
    background: none !important;
}
/* Kill WooCommerce core's decorative rounded tab corners. product.css already
   hides li::after + li.active::before, but leaves the plain li::before (which
   carries border-bottom-right-radius: 4px). Hide both core pseudos here — but
   NOT li.active::after, which is our red underline below. */
body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs li:not(.active)::after {
    content: none !important;
    display: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs li.active::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    width: auto !important;
    bottom: -1px;
    height: 2px;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #C8102E;
}

/* Panels: full width below tabs */
body.woocommerce.single #content div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    width: 100%;
    padding: 0;
    align-self: stretch;
    color: #6B6B6B;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.312px;
}

/* ------------------------------------------------------------
   Description content — Figma "Product Description" styling.
   Applied to the free-form product description (the_content) so
   merchant-authored copy matches the mockup with no structural
   change. Headings, body copy, and red checkmark bullet lists.
   ------------------------------------------------------------ */
.woocommerce-Tabs-panel--description {
    font-family: 'Inter', sans-serif;
    color: #6b6b6b;
}

/* Section headings (Product Overview, Key Features, Care …) */
.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.44px;
    color: #1a1a1a;
    margin: 28px 0 12px;
}
.woocommerce-Tabs-panel--description > :first-child {
    margin-top: 0;
}

/* Body copy */
.woocommerce-Tabs-panel--description p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.31px;
    color: #6b6b6b;
    margin: 0 0 16px;
}
.woocommerce-Tabs-panel--description strong {
    color: #1a1a1a;
}

/* Unordered lists → red checkmark bullets (Figma "Key Features") */
.woocommerce-Tabs-panel--description ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.woocommerce-Tabs-panel--description ul li {
    position: relative;
    margin: 0;
    padding-left: 22px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    color: #6b6b6b;
}
.woocommerce-Tabs-panel--description ul li::before {
    content: "\2713"; /* ✓ */
    position: absolute;
    left: 0;
    top: 0;
    line-height: 24px;
    color: #C8102E;
    font-weight: 400;
}

/* Ordered lists keep their numbers but inherit the body type */
.woocommerce-Tabs-panel--description ol {
    margin: 0 0 16px 18px;
    padding: 0;
}
.woocommerce-Tabs-panel--description ol li {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    color: #6b6b6b;
}

/* Optional two-column dot list — add the class "vb-included-list"
   to a <ul> in the editor to get the Figma "What's Included" grid. */
.woocommerce-Tabs-panel--description ul.vb-included-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.woocommerce-Tabs-panel--description ul.vb-included-list li {
    padding-left: 18px;
}
.woocommerce-Tabs-panel--description ul.vb-included-list li::before {
    content: "";
    top: 8px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C8102E;
}
@media (max-width: 575px) {
    .woocommerce-Tabs-panel--description ul.vb-included-list {
        grid-template-columns: 1fr;
    }
}

/* Product Details — auto-generated key/value table (Figma).
   Rendered by woocommerce/single-product/tabs/description.php from
   live product data (SKU, categories, attributes, stock status). */
.vb-pdp-details {
    margin-top: 28px;
}
.vb-pdp-details__heading {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.44px;
    color: #1a1a1a;
    margin: 0 0 16px;
}
.vb-pdp-details__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 520px;
}
.vb-pdp-details__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.vb-pdp-details__label,
.vb-pdp-details__value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
}
.vb-pdp-details__label {
    color: #6b6b6b;
}
.vb-pdp-details__value {
    color: #1a1a1a;
    text-align: right;
}
.vb-pdp-details__value--instock {
    color: #C8102E;
}

/* Mobile: horizontal scroll if tabs overflow */
@media (max-width: 575px) {
    body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        gap: 20px;
    }
    body.woocommerce.single #content div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
        display: none;
    }
    body.woocommerce.single div.product .woocommerce-tabs ul.tabs li a {
        white-space: nowrap;
        padding: 14px 0;
        font-size: 15px;
    }
}


/* ============================================================
   Reviews tab – rating summary, distribution bars, review list,
   "Write a Review" button + modal
   ============================================================ */
.vb-reviews {
    padding-top: 8px;
}

/* ----- Rating Summary (avg score + distribution bars) ----- */
.vb-reviews-summary {
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 24px 16px 32px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.vb-reviews-summary-avg {
    text-align: center;
    flex: 0 0 auto;
    min-width: 160px;
}
.vb-reviews-avg-number {
    font-size: 48px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 8px;
}
.vb-reviews-avg-stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    margin-bottom: 8px;
}
.vb-reviews-avg-stars .vb-reviews-avg-star {
    width: 22px !important;
    height: 22px !important;
    fill: #e0e0e0 !important;
    flex-shrink: 0;
    display: block !important;
    shape-rendering: geometricPrecision;
}
.vb-reviews-avg-stars .vb-reviews-avg-star.vb-reviews-avg-star--on {
    fill: #C8102E !important;
}
.vb-reviews-avg-count {
    font-size: 13px;
    color: #666;
}

.vb-reviews-summary-bars {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}
.vb-reviews-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #555;
}
.vb-reviews-bar-label {
    flex: 0 0 50px;
    color: #555;
}
.vb-reviews-bar-track {
    flex: 1;
    height: 8px;
    background: #efefef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.vb-reviews-bar-fill {
    display: block;
    height: 100%;
    background: #C8102E;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.vb-reviews-bar-pct {
    flex: 0 0 36px;
    text-align: right;
    color: #666;
}

/* ----- Customer Reviews heading row + Write button ----- */
.vb-reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.vb-reviews-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.vb-reviews-write-btn {
    display: inline-block;
    padding: 10px 22px;
    background: #fff;
    color: #C8102E;
    border: 2px solid #C8102E;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
}
.vb-reviews-write-btn:hover {
    background: #C8102E;
    color: #fff;
}

/* ----- Review list (custom layout from woocommerce/single-product/review.php) ----- */
.vb-reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vb-reviews-list li.vb-review,
.vb-reviews-list li.comment,
.vb-reviews-list li.review {
    list-style: none;
    padding: 20px 0 !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
}
.vb-reviews-list li.vb-review:last-child,
.vb-reviews-list li.comment:last-child,
.vb-reviews-list li.review:last-child {
    border-bottom: none !important;
}
.vb-review__container {
    display: block;
    padding: 0;
    margin: 0;
}

/* Row 1: author + verified badge */
.vb-review__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.vb-review__author {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1;
}
.vb-review__verified {
    display: inline-block;
    background: #fdecec;
    color: #C8102E;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.2;
}

/* Row 2: stars + date */
.vb-review__rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.vb-review__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}
.vb-review__star {
    width: 16px !important;
    height: 16px !important;
    fill: #e0e0e0 !important;
    flex-shrink: 0;
    display: block !important;
    shape-rendering: geometricPrecision;
}
.vb-review__star.vb-review__star--on {
    fill: #C8102E !important;
}
.vb-review__date {
    font-size: 13px;
    color: #888;
}

/* Row 3: bold title */
.vb-review__title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
    line-height: 1.35;
}

/* Row 4: body */
.vb-review__body {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.vb-review__body p {
    margin: 0 0 8px;
    color: #555;
    line-height: 1.6;
}
.vb-review__body p:last-child {
    margin-bottom: 0;
}
.vb-review__pending {
    margin: 6px 0 0 !important;
    font-size: 12px;
    color: #999;
}

/* (Review title field removed — inline review form matches the Figma design.) */
.vb-reviews-empty {
    font-family: Inter, sans-serif;
    padding: 24px 0 8px;
    color: #1a1a1a;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.3125px;
}

/* ----- Load More Reviews button (full width, grey outline) ----- */
.vb-reviews-load-more {
    display: block;
    width: 100%;
    margin: 20px 0 0;
    padding: 16px;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
    box-sizing: border-box;
}
.vb-reviews-load-more:hover {
    background: #f7f7f7;
    border-color: #b8b8b8;
    color: #1a1a1a;
}
.vb-reviews-load-more:focus {
    outline: none;
    border-color: #999;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}

/* Hide native WC paginator when our Load More is active */
.vb-reviews .woocommerce-pagination {
    display: none;
}


/* ----------------------------------------------------------
   Inline review form (rendered directly in the Customer Reviews
   tab — replaces the former Write-a-Review modal)
   ---------------------------------------------------------- */
/* Width matches the Shop-All button row below (see responsive ladder at the
   bottom of this file) so the right edges align. */
.vb-reviews {
    width: 50%;
    max-width: none;
}
#review_form_wrapper {
    margin: 24px 0 0;
}
/* The form has no visible heading in the design */
#review_form #reply-title.comment-reply-title {
    display: none;
}
#review_form .comment-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#review_form .comment-notes {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: #1a1a1a;
    margin: 0;
}
#review_form .comment-form > p {
    margin: 0;
}

/* "Your Rating" — clickable outline stars that fill red when selected */
#review_form .vb-rating-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}
#review_form .vb-rating-field > label {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: #1a1a1a;
}
.vb-rating-input {
    display: inline-flex;
    gap: 12px;
}
.vb-rating-input__star {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.vb-rating-input__star svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 28px;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: fill 0.15s, stroke 0.15s;
}
.vb-rating-input__star.is-on svg {
    fill: #C8102E;
    stroke: #C8102E;
}

/* Inputs + textarea */
#review_form .comment-form-author input,
#review_form .comment-form-email input {
    width: 100%;
    height: 52px;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    padding: 12px 16px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    box-sizing: border-box;
}
#review_form .comment-form-comment textarea {
    width: 100%;
    min-height: 136px;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    padding: 16px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
    box-sizing: border-box;
    resize: vertical;
}
#review_form input::placeholder,
#review_form textarea::placeholder {
    color: rgba(26, 26, 26, 0.5);
}
#review_form input:focus,
#review_form textarea:focus {
    outline: none;
    border-color: #C8102E;
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.12);
}

/* Submit — full-width red CTA */
#review_form .form-submit {
    margin: 0;
}
/* !important mirrors the other PDP CTAs (.vb-pdp-shop-btn, #tab-contact submit)
   to beat the global .btn / .btn-secondary classes WooCommerce applies. */
#review_form input#submit,
#review_form button[type="submit"],
#review_form .form-submit input[type="submit"] {
    width: 100% !important;
    background: #C8102E !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 18px !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: -0.3125px !important;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: none !important;
    -webkit-appearance: none;
    appearance: none;
}
#review_form input#submit:hover,
#review_form button[type="submit"]:hover,
#review_form .form-submit input[type="submit"]:hover {
    background: #c0151b !important;
}
/* Hide the "Save my name, email…" cookies opt-in — not part of the design */
#review_form .comment-form-cookies-consent {
    display: none;
}
#review_form .required {
    color: #C8102E;
}
#review_form .must-log-in {
    margin: 0;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
}
#review_form .must-log-in a {
    color: #C8102E;
    text-decoration: underline;
}
#review_form .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile responsive for reviews summary */
@media (max-width: 575px) {
    .vb-reviews-summary {
        gap: 20px;
        padding: 16px 0 24px;
    }
    .vb-reviews-summary-avg {
        flex: 1 1 100%;
        min-width: 0;
    }
    .vb-reviews-avg-number {
        font-size: 36px;
    }
    .vb-reviews-summary-bars {
        flex: 1 1 100%;
        max-width: none;
    }
    .vb-reviews-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ============================================================
   Related / Up-sells section spacing + heading
   The tiles themselves now use the refresh card (.vb-cat-refresh),
   so the grid comes from category-refresh.css. Only the section
   margins and heading style live here.
   ============================================================ */

.related.products,
.upsells.products {
    margin-top: 40px;
    margin-bottom: 40px;
}
body.single-product .related.products > h2,
body.single-product .upsells.products > h2 {
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 36px !important;
    letter-spacing: 0.3955px !important;
    color: #1a1a1a !important;
    margin: 0 0 18px !important;
    font-family: 'Inter', sans-serif !important;
}


/* ============================================================
   Standardized PDP action buttons (.vb-pdp-shop-btn)
   Shop All / Back to / store-availability buttons now share the
   Add to Cart (filled) and Buy Now (outline) look so every action
   button on the single product page matches. !important is used
   to beat the legacy Bootstrap .btn-primary rules in global.css.
   ============================================================ */
body.single-product a.btn.vb-pdp-shop-btn,
body.woocommerce.single-product a.btn.vb-pdp-shop-btn,
body.single-product a.btn.vb-pdp-shop-btn--outline,
body.woocommerce.single-product a.btn.vb-pdp-shop-btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff !important;
    color: #C8102E !important;
    border: 2px solid #C8102E !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.3125px !important;
    text-decoration: none !important;
    line-height: 24px !important;
    padding: 18px 24px !important;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
body.single-product a.btn.vb-pdp-shop-btn:hover,
body.woocommerce.single-product a.btn.vb-pdp-shop-btn:hover,
body.single-product a.btn.vb-pdp-shop-btn--outline:hover,
body.woocommerce.single-product a.btn.vb-pdp-shop-btn--outline:hover {
    background: #C8102E !important;
    border-color: #C8102E !important;
    color: #fff !important;
}

body.single-product a.btn.vb-pdp-shop-btn b {
    font-weight: 500 !important;
}

/* "Shop [Category]" button row — left-aligned, equal-width, gap 16px.
   Layout is scoped to this block so the buttons stay where they are
   in the markup (not repositioned into the reviews tab). */
.vb-product-cat-btns {
    text-align: left;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.vb-product-cat-btns .row {
    margin: 0;
    width: 50%;
}
.vb-product-cat-btns .row > div {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch; /* both buttons match the taller one's height */
    gap: 16px;
    justify-content: flex-start;
    text-align: left;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Buttons share one row, each capped at half width — so a single button
   (e.g. no child category) sits at 50% rather than stretching edge-to-edge.
   The responsive width ladder for the .row container itself (and the matching
   tab bodies) lives at the bottom of this file. */
.vb-product-cat-btns .row > div > a.btn.vb-pdp-shop-btn {
    flex: 1 1 0;
    max-width: calc(50% - 8px);
}


/* ============================================================
   "Ask A Question" tab (#tab-contact) — Gravity Form
   Content mirrors the legacy theme; styling matches the PDP
   redesign (Inter typography, red CTA), not the old gray look.
   ============================================================ */
body.single-product #tab-contact {
    font-family: 'Inter', sans-serif;
}
/* Intro copy ("Have a question? Use the form below to contact us.") */
body.single-product #tab-contact .gform_heading {
    margin: 0 0 24px;
}
body.single-product #tab-contact .gform_title {
    display: none;
}
body.single-product #tab-contact .gform_description {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: #1a1a1a;
    margin: 0;
}
/* Width matches the Shop-All button row below (see responsive ladder at the
   bottom of this file) so the right edges align. */
body.single-product #tab-contact .gform_wrapper {
    margin: 0;
    width: 50%;
    max-width: none;
}

/* Hide the legacy top "There was a problem" banner; field messages remain */
body.single-product #tab-contact .validation_error {
    display: none;
}

/* Field labels */
body.single-product #tab-contact .gfield_label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}

/* Text / email / tel / textarea / select inputs */
body.single-product #tab-contact input[type=text],
body.single-product #tab-contact input[type=email],
body.single-product #tab-contact input[type=tel],
body.single-product #tab-contact input[type=number],
body.single-product #tab-contact textarea,
body.single-product #tab-contact select {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    padding: 12px 16px;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}
body.single-product #tab-contact input[type=text]:focus,
body.single-product #tab-contact input[type=email]:focus,
body.single-product #tab-contact input[type=tel]:focus,
body.single-product #tab-contact input[type=number]:focus,
body.single-product #tab-contact textarea:focus,
body.single-product #tab-contact select:focus {
    border-color: #C8102E;
    outline: none;
    box-shadow: 0 0 0 2px rgba(223, 26, 33, 0.12);
}
body.single-product #tab-contact textarea {
    min-height: 136px;
    max-height: 300px;
    padding: 16px;
    resize: vertical;
}

/* Submit button — full-width red CTA, matches the review form */
body.single-product #tab-contact input[type=submit],
body.single-product #tab-contact .gform_button {
    font-family: 'Inter', sans-serif !important;
    width: 100%;
    background: #C8102E !important;
    color: #fff !important;
    border: 2px solid #C8102E !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    padding: 18px !important;
    cursor: pointer;
    text-transform: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}
body.single-product #tab-contact input[type=submit]:hover,
body.single-product #tab-contact .gform_button:hover {
    background: #c0151b !important;
    border-color: #c0151b !important;
    color: #fff !important;
}


/* ============================================================
   Responsive width ladder — Shop-All buttons + matching tab bodies
   ------------------------------------------------------------
   The "Shop All [Category]" / "Shop All [Parent] Products" row sits
   at 50% width on desktop. A hard 50% gets cramped as the viewport
   narrows, so step the width up at each breakpoint until it reaches
   full width, then stack the two buttons.

   The Customer Reviews (.vb-reviews) and Ask A Question
   (#tab-contact .gform_wrapper) bodies follow the SAME ladder so their
   right edge stays aligned with the buttons that sit below them.

   Kept at the bottom of the file so these rules win over the base
   width:50% declarations above (equal specificity → later wins).
   ============================================================ */

/* ≤1200px — start widening */
@media (max-width: 1200px) {
    .vb-product-cat-btns .row,
    .vb-reviews,
    body.single-product #tab-contact .gform_wrapper {
        width: 65%;
    }
}

/* ≤992px — wider still */
@media (max-width: 992px) {
    .vb-product-cat-btns .row,
    .vb-reviews,
    body.single-product #tab-contact .gform_wrapper {
        width: 80%;
    }
}

/* ≤767px — full width (buttons still side by side) */
@media (max-width: 767px) {
    .vb-product-cat-btns .row,
    .vb-reviews,
    body.single-product #tab-contact .gform_wrapper {
        width: 100%;
    }
}

/* ≤575px — stack the two buttons, each full width */
@media (max-width: 575px) {
    .vb-product-cat-btns .row > div {
        flex-wrap: wrap;
    }
    .vb-product-cat-btns .row > div > a.btn.vb-pdp-shop-btn {
        flex-basis: 100%;
        max-width: 100%;
        margin-right: 0 !important;
    }
}