/* ==========================================================================
   SINGLE PRODUCT PAGE – NEW LAYOUT
   ========================================================================== */

.w2w-product {
    --fvs-heavy: "wdth" 114, "XTRA" 600, "XOPQ" 96, "YOPQ" 79, "YTLC" 530, "YTUC" 690, "YTAS" 740, "YTDE" -180, "YTFI" 738;
    --background-color: var(--w2w-p-surface);

    /* /care-plan design tokens, scoped to this page. Structure is unchanged —
       these only re-point the palette, hairlines, radius and type at the same
       system every other new page uses (see css/pages/care-plan.css). */
    --w2w-p-surface: rgba(236, 238, 243, .05);
    --w2w-p-hairline: rgba(236, 238, 243, .1);
    --w2w-p-text: var(--w2w-nb-text, #eceef3);
    --w2w-p-body: #c3d2d8;
    --w2w-p-muted: #7e939b;
    --w2w-p-brand: var(--w2w-nb-brand, #2e8bff);
    --w2w-p-radius: 14px;
}

.w2w-product {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 60px;
    padding-bottom: 120px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    color: #fff;
}

.w2w-product *,
.w2w-product *::before,
.w2w-product *::after {
    box-sizing: border-box;
}

/* Notices
   ========================================================================== */

.w2w-product__notices {
    max-width: 1460px;
    margin: 0 auto 24px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.w2w-product__notices:empty {
    display: none;
}

.w2w-product__notices .woocommerce-notices-wrapper,
.w2w-product__notices .woocommerce-message,
.w2w-product__notices .woocommerce-error,
.w2w-product__notices .woocommerce-info {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Breadcrumbs
   ========================================================================== */

.w2w-product__breadcrumbs {
    max-width: 1460px;
    margin: 0 auto 32px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--w2w-p-muted);
}

.w2w-product__breadcrumbs a {
    color: var(--w2w-p-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.w2w-product__breadcrumbs a:hover {
    color: #fff;
}

.w2w-product__breadcrumbs-sep {
    margin: 0 8px;
    color: var(--w2w-p-hairline);
}

.w2w-product__breadcrumbs-current {
    color: #fff;
    font-weight: 600;
}

/* Hero Section
   ========================================================================== */

.w2w-product__hero {
    max-width: 1460px;
    margin: 0 auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 0;
    padding-bottom: 0;
    display: grid;
    /* Figma: gallery 650 / info 698, ~72px between (justify-between). fr units
       keep that ratio while scaling down on narrower viewports. */
    grid-template-columns: 650fr 698fr;
    gap: 72px;
    align-items: start;
    /* NOTE: must NOT be overflow:hidden — that would break the sticky gallery. */
    overflow: visible;
}

.w2w-product__info {
    min-width: 0;
}

/* Gallery
   ========================================================================== */

.w2w-product__gallery {
    min-width: 0;
    /* Sticky on desktop: the gallery stays pinned while the taller info column
       (and any content beside it) scrolls. top clears the sticky site header. */
    position: sticky;
    top: 100px;
    align-self: start;
}

.w2w-product__gallery-main {
    position: relative;
    border-radius: var(--w2w-p-radius);
    border: 1px solid var(--w2w-p-hairline);
    overflow: hidden;
    background: transparent;
    width: 100%;
    max-width: 650px;
    height: 650px;
}

.w2w-product__gallery-slider,
.w2w-product__gallery-slider .swiper-wrapper,
.w2w-product__gallery-slider .swiper-slide {
    height: 650px !important;
    max-height: 650px !important;
}

.w2w-product__gallery-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.w2w-product__gallery-slider .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Gallery Arrows */
.w2w-product__gallery-prev,
.w2w-product__gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    padding: 12px;
    border-radius: var(--w2w-radius-pill, 40px);
    border: 1px solid rgba(236, 238, 243, .12);
    /* Not the page's glass fill: these sit ON TOP of the product photo, and a
       5%-alpha wash over a light image leaves the white chevron with nothing
       behind it. A dark translucent puck keeps the contrast whatever the photo
       is, and the hairline keeps its edge visible on a dark one. */
    background-color: rgba(5, 11, 14, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.w2w-product__gallery-prev:hover,
.w2w-product__gallery-next:hover {
    background: rgba(5, 11, 14, .75);
}

.w2w-product__gallery-prev {
    left: 24px;
}

.w2w-product__gallery-next {
    right: 24px;
}

.w2w-product__gallery-prev::after,
.w2w-product__gallery-next::after {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
}

/* Thumbnails — 6-column grid that always sums to main image width */
.w2w-product__gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 16px;
    width: 100%;
    max-width: 650px;
}

/* Default (non-slider) mode: thumbs become direct grid items */
.w2w-product__gallery-thumbs:not(.is-slider) .w2w-product__gallery-thumbs-list {
    display: contents;
}

/* Slider mode: thumbs in a horizontally-scrolling row taking the left 3 cols */
.w2w-product__gallery-thumbs.is-slider .w2w-product__gallery-thumbs-list {
    grid-column: span 3;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 2px;
    margin: -2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.w2w-product__gallery-thumbs.is-slider .w2w-product__gallery-thumbs-list::-webkit-scrollbar {
    display: none;
}

.w2w-product__gallery-thumbs.is-slider .w2w-product__gallery-thumb {
    flex: 0 0 calc((100% - 16px) / 3); /* 3 visible at a time, 2 gaps of 8px */
    scroll-snap-align: start;
}

.w2w-product__gallery-thumb,
.w2w-product__gallery-thumb:hover,
.w2w-product__gallery-thumb:focus,
.w2w-product__gallery-thumb:active {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--w2w-p-radius);
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--w2w-p-hairline);
    overflow: hidden;
    cursor: pointer;
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    padding: 0;
    transition: border-color 0.2s;
    box-shadow: none !important;
    box-sizing: border-box;
}

.w2w-product__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.w2w-product__gallery-thumb.is-active,
.w2w-product__gallery-thumb:hover {
    border-color: var(--w2w-p-brand) !important;
}

/* Explore CTA button — spans the remaining columns of the thumbs grid */
.w2w-product__explore-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 16px 20px;
    border-radius: var(--w2w-p-radius);
    background-color: var(--w2w-p-surface);
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--w2w-p-hairline);
    color: var(--w2w-p-brand);
    font-family: var(--w2w-nb-font-body);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.2px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s;
    width: 100%;
    height: 100%;
    min-height: 102px;
    grid-column: -4 / -1; /* right 3 of the 6 columns */
}


.w2w-product__explore-link__text {
    position: relative;
    z-index: 2;
}

.w2w-product__explore-link__arrow {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 42px;
    height: 12px;
}

.w2w-product__explore-link:hover {
    border-color: var(--w2w-p-brand);
    color: var(--w2w-p-brand);
}

/* Product Info
   ========================================================================== */

.w2w-product__promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 32px;
    margin: 0 0 16px;
    background: rgba(46, 139, 255, 0.1);
    border: 0.628px solid #FFFFFF;
    border-radius: 30px;
    backdrop-filter: blur(23.85px);
    -webkit-backdrop-filter: blur(23.85px);
    box-shadow:
        0 0 20px 0 #2e8bff,
        0 10.732px 13.714px 0 rgba(0, 0, 0, 0.05),
        inset 0 0.596px 3.577px 0 rgba(255, 255, 255, 0.35),
        inset -0.596px 0.596px 0.596px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
    white-space: nowrap;
}
.w2w-product__promo-badge-text {
    font-family: var(--w2w-nb-font-data);
    font-variation-settings: 'wdth' 114, 'GRAD' 0, 'XOPQ' 96, 'XTRA' 600, 'YOPQ' 79, 'YTAS' 740, 'YTDE' -180, 'YTFI' 738, 'YTLC' 530, 'YTUC' 690;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .1em;
    color: var(--w2w-nb-text-secondary, #a8aeb8)FFF;
    text-transform: uppercase;
}

.w2w-product__title {
    font-family: var(--w2w-nb-font-display);
    /* !important to beat the global `h1 { font-size: 32px !important }`
       coming from the theme/typography settings. */
    font-size: 52px !important;
    /* care-plan headline: display face at 500, sentence case, .025em tracking.
       The old shop set this in heavy uppercase with 1px tracking. */
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .025em;
    margin: 0 0 24px;
    color: var(--w2w-p-text);
    text-transform: none;
}

.w2w-product__description {
    color: var(--w2w-p-body);
    font-family: var(--w2w-nb-font-body);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0;
    max-width: 520px;
}

.w2w-product__description p {
    margin: 0 0 12px;
}

.w2w-product__description ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

.w2w-product__description li {
    position: relative;
    padding-left: 16px;
    color: var(--w2w-p-body);
    font-family: var(--w2w-nb-font-body);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.w2w-product__description li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}

.w2w-product__attributes {
    color: var(--w2w-nb-warm-amber, #e8902a);
    font-family: var(--w2w-nb-font-data);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: .02em;
    text-transform: none;
    /* Figma: 61px below the description, 24px above the purchase card. */
    margin-top: 61px;
    margin-bottom: 0;
}

/* Purchase Card
   ========================================================================== */

.w2w-product__purchase-card {
    background: var(--w2w-p-surface);
    border: 1px solid var(--w2w-p-hairline);
    border-radius: var(--w2w-p-radius);
    padding: 32px;
    margin-top: 24px;
}

.w2w-product__price,
.w2w-product__price .woocommerce-Price-amount,
.w2w-product__price .woocommerce-Price-currencySymbol,
.w2w-product__price bdi {
    font-family: var(--w2w-nb-font-display);
    font-size: 28px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 110%;
    letter-spacing: .025em;
    color: #2e8bff;
    text-transform: none;
}

.w2w-product__price {
    margin-bottom: 24px;
}

.w2w-product__price del,
.w2w-product__price del .woocommerce-Price-amount,
.w2w-product__price del .woocommerce-Price-currencySymbol,
.w2w-product__price del bdi {
    color: var(--w2w-p-muted) !important;
    font-size: 20px !important;
    text-decoration: line-through;
}

.w2w-product__price ins,
.w2w-product__price ins bdi,
.w2w-product__price ins .woocommerce-Price-amount,
.w2w-product__price ins .woocommerce-Price-currencySymbol {
    text-decoration: none;
    color: #2e8bff !important;
}

/* Shipping / return badges — sit at the BOTTOM of the purchase card, centered. */
.w2w-product__meta-badges {
    display: flex;
    justify-content: center;
    gap: 24px;
    color: #FFF;
    font-family: var(--w2w-nb-font-body);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.2px;
    margin-top: 24px;
}

.w2w-product__subscribe-label {
    color: var(--w2w-nb-text-secondary, #a8aeb8);
    font-family: var(--w2w-nb-font-data);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Purchase Options (radio buttons) */
.w2w-product__purchase-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.w2w-product__option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border-radius: var(--w2w-p-radius);
    border: 1px solid var(--w2w-p-hairline);
    background-color: var(--w2w-p-surface);
    cursor: pointer;
    transition: border-color 0.2s;
}

.w2w-product__option:hover {
    border-color: var(--w2w-p-muted);
}

.w2w-product__option.is-active {
    border-color: #fff;
}

/* Visually hidden but accessible to screen readers */
.w2w-product__option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.w2w-product__option-radio {
    width: 21px;
    height: 21px;
    border-radius: var(--w2w-radius-pill, 40px);
    border: 1px solid var(--w2w-p-hairline);
    background: var(--w2w-p-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.w2w-product__option.is-active .w2w-product__option-radio {
    border-color: #2e8bff;
}

.w2w-product__option.is-active .w2w-product__option-radio::after {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2e8bff;
}

.w2w-product__option-label {
    color: #fff;
    font-family: var(--w2w-nb-font-body);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.w2w-product__option-freq {
    font-size: 14px;
    font-weight: 400;
    color: var(--w2w-p-muted);
    margin-left: auto;
}

/* Frequency dropdown — Figma: a full-width box on the right of the Subscribe
   row (bg #181b20, 1px var(--w2w-p-hairline), radius 4px, 14px padding, Roboto Bold 16px,
   24px chevron). Fills the remaining width next to the radio + "Subscribe". */
.w2w-product__option-select {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 46px 14px 14px;
    border-radius: 4px;
    border: 1px solid var(--w2w-p-hairline);
    background-color: var(--w2w-p-surface) !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-body);
    font-size: 16px !important;
    font-style: normal;
    font-weight: 700;
    /* Native <select> clips glyphs in Chrome when a tight line-height is set;
       `normal` + auto height lets the text render fully. */
    line-height: normal !important;
    height: auto !important;
    letter-spacing: 0.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Chevron matched to Figma: white @ 80% opacity, 1.5 stroke, 24px.
       !important so Woodmart's native <select> arrow can't override it. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 8.5L12.2209 16.5L4 8.5' stroke='white' stroke-opacity='0.8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 24px 24px !important;
}

.w2w-product__option-save {
    font-size: 11px;
    color: var(--w2w-nb-warm-amber, #e8902a);
}

/* Cart Actions */
.w2w-product__cart-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
}

/* Quantity Selector */
.w2w-product__quantity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    order: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.w2w-product__qty-btn,
.w2w-product__qty-btn:hover,
.w2w-product__qty-btn:focus,
.w2w-product__qty-btn:active {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
    cursor: pointer;
    box-shadow: none !important;
}

.w2w-product__qty-btn svg {
    display: block;
    width: 42px;
    height: 42px;
}

.w2w-product__qty-btn:hover svg rect:first-child {
    fill: var(--w2w-p-surface);
}

.w2w-product__qty-input,
.w2w-product__qty-input:focus,
.w2w-product__qty-input:hover,
.w2w-product__qty-input:active {
    width: 48px !important;
    min-width: 48px !important;
    height: 42px !important;
    flex-shrink: 0;
    text-align: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: var(--fvs-heavy) !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 25.6px !important;
    padding: 0 !important;
    -moz-appearance: textfield;
}

.w2w-product__qty-input::-webkit-inner-spin-button,
.w2w-product__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to Cart Button */
.w2w-product__add-to-cart,
.w2w-product__add-to-cart:hover,
.w2w-product__add-to-cart:focus,
.w2w-product__add-to-cart:active {
    flex: 1 1 0 !important;
    min-width: 0;
    /* !important beats Woodmart's `form.cart .single_add_to_cart_button { order: 10 }`
       (specificity 0,2,1) so the button keeps its place: qty → Add to cart → wishlist. */
    order: 1 !important;
    padding: 16px 40px;
    border-radius: var(--w2w-radius-pill, 40px);
    border: 1px solid var(--w2w-p-brand) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--w2w-p-brand) !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: var(--fvs-heavy) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: none !important;
}

.w2w-product__add-to-cart:hover {
    border-radius: var(--w2w-radius-pill, 40px);
    background: var(--w2w-p-brand) !important;
    background-color: var(--w2w-p-brand) !important;
    color: #000 !important;
}

.w2w-product__add-to-cart:disabled,
.w2w-product__add-to-cart[disabled],
.w2w-product__add-to-cart:disabled:hover,
.w2w-product__add-to-cart[disabled]:hover {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--w2w-p-hairline) !important;
    border-color: var(--w2w-p-hairline) !important;
}

/* Wishlist */
.w2w-product__wishlist {
    order: 2;
    flex-shrink: 0;
    position: relative;
}

.w2w-product__wishlist,
.w2w-product__wishlist a,
.w2w-product__wishlist a:hover,
.w2w-product__wishlist a:focus,
.w2w-product__wishlist a:active {
    width: 42px !important;
    height: 42px !important;
    padding: 11px !important;
    border-radius: var(--w2w-radius-pill, 40px) !important;
    border: 1px solid var(--w2w-p-hairline) !important;
    background: var(--w2w-p-surface) !important;
    background-color: var(--w2w-p-surface) !important;
    color: var(--w2w-p-brand) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    box-shadow: none !important;
    text-decoration: none !important;
}

.w2w-product__wishlist a:hover {
    border-color: var(--w2w-p-brand) !important;
    color: var(--w2w-p-brand) !important;
}

.w2w-product__wishlist a.added {
    color: var(--w2w-p-brand) !important;
    border-color: var(--w2w-p-brand) !important;
}

.w2w-product__wishlist svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Hide default Woodmart wishlist text — we only show the icon */
.w2w-product__wishlist a > span {
    display: none !important;
}

/* Wishlist tooltip */
.w2w-product__wishlist-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--w2w-p-brand);
    color: #fff;
    font-family: var(--w2w-nb-font-body);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.w2w-product__wishlist-tooltip.is-visible {
    opacity: 1;
}

.w2w-product__wishlist-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--w2w-p-brand);
}

/* Buy Now Button */
.w2w-product__buy-now,
.w2w-product__buy-now:hover,
.w2w-product__buy-now:focus,
.w2w-product__buy-now:active {
    width: 100%;
    padding: 12px 30px;
    border-radius: var(--w2w-radius-pill, 40px);
    border: none !important;
    background: var(--w2w-p-brand) !important;
    background-color: var(--w2w-p-brand) !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: var(--fvs-heavy) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: none !important;
}

.w2w-product__buy-now:hover {
    background: var(--w2w-p-brand) !important;
    background-color: var(--w2w-p-brand) !important;
    color: #fff !important;
}

/* Sale / New flash badges
   ========================================================================== */

.w2w-product__sale-flash,
.w2w-product__new-flash {
    position: absolute;
    top: 16px;
    z-index: 5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--w2w-radius-pill, 40px);
}

.w2w-product__sale-flash {
    left: 16px;
    background: var(--w2w-p-brand);
    color: #121418;
}

.w2w-product__new-flash {
    left: 16px;
    background: #2ECC71;
    color: #121418;
}

.w2w-product__sale-flash + .w2w-product__new-flash {
    left: auto;
    right: 16px;
}

/* Woodmart product labels (Sale / Sold out) — these come through our
   woocommerce_sale_flash call as a <div class="product-labels"> block.
   Style + position them so the "Sold out" label isn't clipped. */
.w2w-product__gallery-main .product-labels {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.w2w-product__gallery-main .product-labels .product-label {
    position: static;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--w2w-radius-pill, 40px);
    font-family: var(--w2w-nb-font-data);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.w2w-product__gallery-main .product-labels .onsale {
    background: var(--w2w-p-brand);
    color: #121418;
}

.w2w-product__gallery-main .product-labels .out-of-stock {
    background: #E5616B;
    color: var(--w2w-nb-text-secondary, #a8aeb8);
}

/* Rating
   ========================================================================== */

.w2w-product__rating {
    margin-bottom: 16px;
}

.w2w-product__rating .star-rating {
    color: var(--w2w-nb-warm-amber, #e8902a);
}

.w2w-product__rating .woocommerce-review-link {
    color: var(--w2w-p-muted);
    font-size: 13px;
    text-decoration: none;
    margin-left: 8px;
}

.w2w-product__rating .woocommerce-review-link:hover {
    color: #fff;
}

/* Product Meta (SKU, categories, tags)
   ========================================================================== */

.w2w-product .product_meta {
    margin-top: 20px;
    font-size: 14px;
    color: var(--w2w-p-muted);
}

.w2w-product .product_meta > span {
    display: block;
    margin-bottom: 4px;
}

.w2w-product .product_meta a {
    color: var(--w2w-p-brand);
    text-decoration: none;
}

.w2w-product .product_meta a:hover {
    color: var(--w2w-p-brand);
}

/* After CTA content */
.w2w-product .wd-after-add-to-cart {
    margin-top: 16px;
    font-size: 14px;
    color: var(--w2w-p-muted);
}

/* Native WC form fallback (variable/grouped/bundle/gift-card products)
   ========================================================================== */

.w2w-product__native-form {
    background: var(--w2w-p-surface);
    border: 1px solid var(--w2w-p-hairline);
    border-radius: var(--w2w-p-radius);
    padding: 32px;
    color: #fff;
    margin-top: 32px;
}

.w2w-product__native-form .variations,
.w2w-product__native-form .single_variation_wrap {
    color: #fff;
}

/* Native form buttons — match our custom form styling */
.w2w-product__native-form .single_add_to_cart_button,
.w2w-product__native-form .single_add_to_cart_button:hover,
.w2w-product__native-form .single_add_to_cart_button:focus {
    display: block !important;
    width: 100% !important;
    margin-top: 24px;
    padding: 12px 30px !important;
    border-radius: var(--w2w-radius-pill, 40px) !important;
    border: 1px solid var(--w2w-p-brand) !important;
    background: transparent !important;
    color: var(--w2w-p-brand) !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center;
    box-shadow: none !important;
}

.w2w-product__native-form .single_add_to_cart_button:hover {
    background: var(--w2w-p-brand) !important;
    color: #fff !important;
}

.w2w-product__native-form .wd-buy-now-btn,
.w2w-product__native-form .wd-buy-now-btn:hover,
.w2w-product__native-form .wd-buy-now-btn:focus {
    display: block !important;
    width: 100% !important;
    margin-top: 12px;
    padding: 12px 30px !important;
    border-radius: var(--w2w-radius-pill, 40px) !important;
    border: none !important;
    background: var(--w2w-p-brand) !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center;
    box-shadow: none !important;
}

.w2w-product__native-form .wd-buy-now-btn:hover {
    background: var(--w2w-p-brand) !important;
    color: #fff !important;
}

/* Native form quantity */
.w2w-product__native-form .quantity {
    margin-bottom: 0;
}

/* Hide Woodmart's buy-now on external/affiliate products — only one link button needed */
.w2w-product.product-type-external .w2w-product__native-form .wd-buy-now-btn {
    display: none !important;
}

/* Native form field spacing */
.w2w-product__native-form p,
.w2w-product__native-form .form-row {
    margin-bottom: 16px;
}

.w2w-product__native-form label {
    margin-bottom: 6px;
    display: block;
}

.w2w-product__native-form textarea,
.w2w-product__native-form input[type="text"],
.w2w-product__native-form input[type="email"],
.w2w-product__native-form input[type="number"],
.w2w-product__native-form select {
    margin-bottom: 8px;
}

/* Extra content + Custom tabs
   ========================================================================== */

.w2w-product__extra-content {
    max-width: 1460px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.w2w-product__custom-tabs {
    max-width: 1460px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.w2w-product__custom-tab {
    margin-bottom: 40px;
}

.w2w-product__custom-tab h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.w2w-product__custom-tab p,
.w2w-product__custom-tab li {
    color: var(--w2w-p-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* Related / Upsells wrapper
   ========================================================================== */

.w2w-product__related {
    max-width: 1460px;
    margin: 80px auto 0;
    padding: 0 20px;
}

.w2w-product__related:empty {
    display: none;
}

/* Custom WPBakery sections below hero
   ========================================================================== */

.w2w-product__sections {
    margin-top: 80px;
}

.w2w-product__sections .vc_row:not(.vc_inner) {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* The thumbnail grid stays at 6 columns across all desktop widths so the
   "3 thumbs + 3-column Explore banner" split (and the slider math) holds at
   every breakpoint. The grid shrinks proportionally with the gallery column. */

/* ==========================================================================
   TABLET (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .w2w-product__hero {
        gap: 24px;
    }

    .w2w-product__title {
        font-size: 44px !important;
    }

    .w2w-product__gallery-main {
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .w2w-product__gallery-slider,
    .w2w-product__gallery-slider .swiper-wrapper,
    .w2w-product__gallery-slider .swiper-slide {
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1 / 1;
    }

}

/* ==========================================================================
   MOBILE (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    .w2w-product {
        padding-top: 0 !important;
        padding-bottom: 60px;
    }

    /* Breadcrumbs shown on mobile (Figma): smaller, 70% white */
    .w2w-product__breadcrumbs {
        display: block;
        max-width: 100%;
        margin: 0 0 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
    }

    .w2w-product__breadcrumbs a {
        color: rgba(255, 255, 255, 0.7);
    }

    .w2w-product__breadcrumbs-current {
        color: #fff;
        font-weight: 600;
    }

    /* Single column */
    .w2w-product__hero {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 16px !important;
    }

    /* Gallery: full width, square — no sticky in the single-column layout. */
    .w2w-product__gallery {
        margin-bottom: 42px;
        position: static;
        top: auto;
    }

    .w2w-product__gallery-main {
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: var(--w2w-p-radius);
    }

    .w2w-product__gallery-slider,
    .w2w-product__gallery-slider .swiper-wrapper,
    .w2w-product__gallery-slider .swiper-slide {
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1 / 1;
    }

    /* Hide thumbnails + explore on mobile */
    .w2w-product__gallery-thumbs {
        display: none;
    }

    /* Title (Figma mobile H2 = 36px) */
    .w2w-product__title {
        font-size: 36px !important;
        margin-bottom: 12px;
    }

    /* Description + list */
    .w2w-product__description {
        font-size: 18px;
    }

    .w2w-product__description li {
        font-size: 18px;
    }

    /* Highlight text (60 CAPSULES): 32px above (desc), 12px below (price) */
    .w2w-product__attributes {
        margin-top: 32px;
        margin-bottom: 12px;
    }

    /* Purchase card: on mobile the chrome is dropped — price/options/buttons
       sit flush on the page background (Figma). */
    .w2w-product__purchase-card {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-top: 0;
    }

    .w2w-product__price {
        /* More space between the price and the promo line below it on mobile. */
        margin-bottom: 24px;
    }

    /* Bottom shipping badges: single row, left-aligned (Figma mobile) */
    .w2w-product__meta-badges {
        flex-direction: row;
        flex-wrap: wrap;
        /* Centered on mobile. */
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
        color: rgba(255, 255, 255, 0.8);
    }

    /* "SUBSCRIBE & SAVE 10%" label is not shown on mobile (Figma) */
    .w2w-product__subscribe-label {
        display: none;
    }

    /* Purchase options — 12px gap, 12px below */
    .w2w-product__purchase-options {
        gap: 12px !important;
        margin-bottom: 12px;
    }

    .w2w-product__option {
        padding: 12px 14px;
        margin: 0 !important;
    }

    .w2w-product__option-label {
        font-size: 16px;
    }

    /* Stack subscribe label + dropdown vertically */
    .w2w-product__option[data-w2w-option="subscribe"] {
        flex-wrap: wrap;
    }

    .w2w-product__option-select {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
    }

    /* Cart actions: qty on left, wishlist on right — same row */
    .w2w-product__cart-actions {
        flex-wrap: wrap;
        column-gap: 12px;
        row-gap: 0;
    }

    /* Row 1: - qty + on left, wishlist on right */
    .w2w-product__quantity {
        order: 0;
        flex: 0 0 auto;
    }

    .w2w-product__wishlist {
        order: 1;
        margin-left: auto;
    }

    /* Row 2: Add to Cart full width, 24px above */
    .w2w-product__add-to-cart,
    .w2w-product__add-to-cart:hover,
    .w2w-product__add-to-cart:focus,
    .w2w-product__add-to-cart:active {
        order: 2 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding: 16px 40px;
        margin-top: 24px;
    }

    /* Qty buttons */
    .w2w-product__qty-btn svg {
        width: 42px;
        height: 42px;
    }

    .w2w-product__qty-btn,
    .w2w-product__qty-btn:hover,
    .w2w-product__qty-btn:focus,
    .w2w-product__qty-btn:active {
        width: 42px !important;
        height: 42px !important;
    }

    /* Amount font size */
    .w2w-product__qty-input,
    .w2w-product__qty-input:focus,
    .w2w-product__qty-input:hover,
    .w2w-product__qty-input:active {
        width: 48px !important;
        min-width: 48px !important;
        height: 42px !important;
        font-size: 32px !important;
    }

    /* Wishlist stays same size as desktop */
    .w2w-product__wishlist,
    .w2w-product__wishlist a,
    .w2w-product__wishlist a:hover {
        width: 42px !important;
        height: 42px !important;
        padding: 11px !important;
    }

    .w2w-product__wishlist svg {
        width: 20px;
        height: 20px;
    }

    /* Buy Now — same width as Add to Cart, 12px below it (Figma) */
    .w2w-product__buy-now,
    .w2w-product__buy-now:hover,
    .w2w-product__buy-now:focus,
    .w2w-product__buy-now:active {
        padding: 12px 30px;
        margin-top: 12px;
    }

    .w2w-product__cart-actions {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Notices */
    .w2w-product__notices {
        padding: 0 16px !important;
    }

    /* Extra content + custom tabs + below-hero sections */
    .w2w-product__extra-content,
    .w2w-product__custom-tabs,
    .w2w-product__reviews {
        padding: 0 16px;
        margin-top: 40px;
    }

    /* WPBakery sections */
    .w2w-product__sections {
        margin-top: 40px;
    }
}

/* ==========================================================================
   SMALL MOBILE (≤ 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .w2w-product__hero {
        padding: 0 12px;
    }

    .w2w-product__gallery-main {
        border-radius: 8px;
    }

    .w2w-product__gallery-prev {
        left: 8px;
    }

    .w2w-product__gallery-next {
        right: 8px;
    }

    .w2w-product__gallery-prev,
    .w2w-product__gallery-next {
        width: 36px;
        height: 36px;
        padding: 8px;
    }

    .w2w-product__title {
        font-size: 32px !important;
    }

    .w2w-product__quantity {
        gap: 6px;
    }
}

/* ==========================================================================
   STOCK STATUS / OUT-OF-STOCK / "NOTIFY ME"
   ========================================================================== */

.w2w-product__stock {
    margin-bottom: 16px;
}

.w2w-product__stock .stock {
    font-family: var(--w2w-nb-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.w2w-product__stock .stock.in-stock { color: #2ECC71; }
.w2w-product__stock .stock.available-on-backorder { color: #F5A623; }
.w2w-product__stock .stock.out-of-stock { color: #E5616B; }

.w2w-product__oos {
    margin-top: 8px;
}

.w2w-product__oos-label {
    color: #E5616B;
    font-family: var(--w2w-nb-font-body);
    font-variation-settings: var(--fvs-heavy);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* Back in Stock Notifications "Notify me" form */
.w2w-product__oos form {
    margin: 0;
}

.w2w-product__oos p {
    color: var(--w2w-p-muted);
    font-family: var(--w2w-nb-font-body);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.w2w-product__oos input[type="email"],
.w2w-product__oos input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--w2w-p-radius);
    border: 1px solid var(--w2w-p-hairline);
    background: var(--w2w-p-surface);
    color: #fff;
    font-family: var(--w2w-nb-font-body);
    font-size: 16px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.w2w-product__oos button,
.w2w-product__oos .button {
    width: 100%;
    padding: 12px 30px !important;
    border-radius: var(--w2w-radius-pill, 40px) !important;
    border: none !important;
    background: var(--w2w-p-brand) !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: var(--fvs-heavy);
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}

.w2w-product__oos button:hover,
.w2w-product__oos .button:hover {
    background: var(--w2w-p-brand) !important;
}

/* Hide the static top price only for variable products — the variation price
   updates inside the native form. Bundles (woosb) keep the top price: that's
   where WPC renders the bundle total via get_price_html(). */
.w2w-product.product-type-variable .w2w-product__price {
    display: none;
}

/* ==========================================================================
   REVIEWS (full-width section below the hero)
   ========================================================================== */

.w2w-product__reviews {
    /* Full-width band. Swap the two dark tones in this section: the section
       background takes #121418 (was #181b20), while the boxes/inputs that read
       --darker-blue (#121418) now render in #181b20. Brand blue (#2e8bff) on the
       heading/stars/bars/submit is intentionally left untouched. */
    background: #121418;
    /* TOP is the separator's spacing and matches .w2w-suggested exactly: 60 here,
       120 from 1024 up (the step is right below this rule).

       BOTTOM is smaller on purpose, and asymmetry is correct here. Nothing sits
       under this section but the footer, and the space is already paid for twice
       over: .w2w-product — the page wrapper — carries its own 120px
       padding-bottom, and the footer adds 80px padding-top. With 120 here that
       came to 320px of empty band on desktop. This keeps enough that the dark
       #121418 band does not clip the last review card, and lets the wrapper do
       the rest. */
    padding: 60px 0 40px;
    color: #fff;

    --darker-blue: #181b20;
}

@media (min-width: 1024px) {

    .w2w-product__reviews {
        padding-top: 120px;
        padding-bottom: 60px;
    }
}

/* Match the reviews content width + gutters to the sections above
   (max-width 1460 + 20px side padding, centered). The navy band stays
   full-width; only the inner content is constrained, like the other sections. */
.w2w-product__reviews .w2w-product__section-inner {
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 20px;
}

/*
 * `.w2w-product__reviews` above only positions the section full-width below
 * the hero; review internals are styled by the REVIEWS block at the end of
 * this file, so do NOT add `.w2w-product__reviews .commentlist/.comment-form/…`
 * rules here — they would fight it.
 */

/* ==========================================================================
   SUGGESTED FOR YOU — recommendations section (FULLY ISOLATED)
   --------------------------------------------------------------------------
   The [w2w_product_recommendations] shortcode outputs ONLY .w2w-suggested*
   classes (no shared shop-archive classes), so everything here is scoped to
   the single-product page and can never affect the catalog "Recently Viewed".
   Horizontal cards: image left, title + (price · cart) right.
   ========================================================================== */

.w2w-suggested {
    max-width: 1460px;
    margin: 60px auto 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.w2w-suggested__title {
    margin: 0;
    /* !important so a global `h2 { color: … }` theme rule can't override the
       brand-blue heading from the design. */
    color: var(--w2w-p-brand) !important;
    font-family: var(--w2w-nb-font-display);
    font-variation-settings: var(--fvs-heavy);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.w2w-suggested__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.w2w-suggested__product {
    display: flex;
    align-items: stretch;
    min-width: 0;
    /* !important — without it a theme/WC rule darkens the card to ~#121418
       instead of the design's #181b20. */
    background-color: var(--w2w-p-surface) !important;
    background-image: none !important;
    border: 1px solid var(--w2w-p-hairline);
    border-radius: var(--w2w-p-radius);
    overflow: hidden;
    padding-right: 42px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

/* WPBakery ships `.wpb_wrapper div { background-color: transparent !important }`
   (specificity 0,1,1) which, since this section renders inside .wpb_wrapper,
   wipes the card background. Two classes (0,2,0) outrank it so the card keeps
   the navy fill; the image area matches so transparent product PNGs blend in. */
.w2w-suggested .w2w-suggested__product,
.w2w-suggested .w2w-suggested__product-image,
.w2w-suggested .w2w-suggested__product-link {
    background-color: var(--w2w-p-surface) !important;
    background-image: none !important;
}

/* Hover (Figma "Variant2"): blue glow, border stays grey. Scoped to
   @media (hover: hover) so it applies only on mouse devices — no hover
   effect on mobile / touch. */
@media (hover: hover) {
    .w2w-suggested__product:hover {
        box-shadow: 0 0 10px 0 var(--w2w-p-brand);
    }
}

/* Image (left) — 120×160 box, image fills & is cropped/centered */
.w2w-suggested__product-link {
    flex: 0 0 120px;
    width: 120px;
    height: 160px;
    display: block;
    overflow: hidden;
}

.w2w-suggested__product-image,
.w2w-suggested__product-image img {
    width: 100%;
    height: 100%;
}

.w2w-suggested__product-image img {
    object-fit: cover;
    display: block;
}

/* Details (right) — stretch to card height and push the price/cart row to the
   bottom so prices + cart icons line up across cards regardless of title length. */
.w2w-suggested__product-info {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
}

.w2w-suggested__product-title {
    margin: 0;
    color: #fff;
    font-family: var(--w2w-nb-font-body);
    font-variation-settings: var(--fvs-heavy);
    /* !important to beat the theme's global `h3 { font-size: … !important }`. */
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.w2w-suggested__product-title a {
    color: inherit;
    text-decoration: none;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.w2w-suggested__product-title a:hover {
    color: var(--w2w-p-brand);
}

.w2w-suggested__product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.w2w-suggested__product-price,
.w2w-suggested__product-price * {
    color: var(--w2w-p-brand) !important;
    font-family: var(--w2w-nb-font-display) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: .025em !important;
    text-transform: none !important;
    white-space: nowrap;
}

.w2w-suggested__product-price del,
.w2w-suggested__product-price del * {
    color: var(--w2w-p-muted) !important;
    font-size: 14px !important;
    text-decoration: line-through;
}

/* Hide any subscription discount badge ("10%") that SATT may append to the
   price — the card shows a clean price only (also suppressed PHP-side). */
.w2w-suggested__product-price .wcsatt-sub-options,
.w2w-suggested__product-price .wcsatt-sub-discount,
.w2w-suggested__product-price .wcsatt-price-suffix {
    display: none !important;
}

/* Hide WooCommerce's "View cart" link that gets appended after AJAX
   add-to-cart — the card keeps only the round cart button. */
.w2w-suggested .added_to_cart,
.w2w-suggested .added_to_cart.wc-forward {
    display: none !important;
}

/* Round add-to-cart button */
.w2w-suggested__product-btn-cart,
.w2w-suggested__product-btn-cart:hover,
.w2w-suggested__product-btn-cart:focus,
.w2w-suggested__product-btn-cart:active {
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50% !important;
    background: var(--w2w-p-brand) !important;
    color: #FFF !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background-color 0.2s;
}

.w2w-suggested__product-btn-cart:hover {
    background: var(--w2w-p-brand) !important;
}

.w2w-suggested__product-btn-cart svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Loading / added states from WC AJAX — keep the circle clean */
.w2w-suggested__product-btn-cart.loading,
.w2w-suggested__product-btn-cart.added {
    opacity: 0.85;
}

.w2w-suggested__product-btn-cart::after {
    display: none !important;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .w2w-suggested__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .w2w-suggested {
        padding: 0 16px;
        margin-top: 40px;
    }
}

@media (max-width: 600px) {
    /* Mobile (Figma): single column, larger image, tighter paddings. */
    .w2w-suggested {
        gap: 20px;
    }

    .w2w-suggested__title {
        font-size: 24px;
        line-height: 1.2;
    }

    .w2w-suggested__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .w2w-suggested__product {
        padding-right: 20px;
    }

    /* Shorter card: the image drives card height, so reduce it; the bottle is
       still cropped/centered nicely via object-cover. */
    .w2w-suggested__product-link {
        flex: 0 0 120px;
        width: 120px;
        height: 150px;
    }

    /* No description on mobile → tighten the gap/padding so the card isn't sparse. */
    .w2w-suggested__product-info {
        gap: 10px;
        /* Symmetric breathing room top & bottom on mobile. */
        padding: 28px 0 32px;
        /* Pin the price/cart row to the bottom on mobile too, for a consistent
           position across cards while scrolling. */
        justify-content: space-between;
    }

    .w2w-suggested__product-title {
        font-size: 18px !important;
    }

    /* Slightly larger, more tappable add-to-cart button on mobile. */
    .w2w-suggested__product-btn-cart,
    .w2w-suggested__product-btn-cart:hover,
    .w2w-suggested__product-btn-cart:focus,
    .w2w-suggested__product-btn-cart:active {
        flex-basis: 40px;
        width: 40px !important;
        height: 40px !important;
    }

    .w2w-suggested__product-btn-cart svg {
        width: 18px;
        height: 18px;
    }
}


/* ==========================================================================
   REVIEWS
   --------------------------------------------------------------------------
   Restyled in the /care-plan design language rather than ported from the old
   Woodmart shop: the display face for headings, a translucent
   rgba(236,238,243,.05) surface with a .1 hairline at 14px radius for cards,
   the mono face for metadata, pill buttons on --w2w-nb-brand, and muted
   #7e939b / #c3d2d8 for secondary text.

   Everything is scoped to .wd-single-reviews, the wrapper
   templates/template-single-product.php emits around comments_template().
   Selectors target WooCommerce's own review markup (#reviews, #comments,
   .commentlist, .review, .comment_container, .comment-text, .star-rating,
   .stars, .comment-form, #review_form_wrapper), so nothing here depends on a
   plugin or theme that is not installed.
   ========================================================================== */

.wd-single-reviews {
    color: var(--w2w-nb-text, #eceef3);
    font-family: var(--w2w-nb-font-body);
}

/* WooCommerce and the theme's woocommerce.css both paint and pad these
   wrappers; the design wants them to carry nothing of their own. */
.wd-single-reviews #comments,
.wd-single-reviews .commentlist,
.wd-single-reviews .commentlist .review,
.wd-single-reviews .comment-text,
.wd-single-reviews #review_form,
.wd-single-reviews #respond,
.wd-single-reviews .clear {
    /* !important throughout: WooCommerce's own review rules are far more
       specific than these (its `.woocommerce #reviews #comments ol.commentlist
       li .comment-text` is 0,4,4 against 0,2,0 here) and would otherwise win.
       In particular it sets `margin: 0 0 0 50px` to leave room for the gravatar
       we hide, which is where the oversized left inset came from. */
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Clearfix pseudo-elements WooCommerce adds around .comment-text. */
.wd-single-reviews .commentlist .review .comment-text::before,
.wd-single-reviews .commentlist .review .comment-text::after {
    content: none !important;
    display: none !important;
}

/* Layout: one column on small screens, reviews beside the form from tablet up.
   minmax(0, …) so a long word cannot blow the columns out. */
.wd-single-reviews #reviews {
    display: grid;
    gap: 40px;
}

@media (min-width: 1024px) {
    .wd-single-reviews #reviews {
        /* Same column rhythm as .w2w-product__hero (650fr / 698fr, 72px gap),
           so the review list sits under the gallery and the form under the
           product info instead of on its own arbitrary split. */
        grid-template-columns: 650fr 698fr;
        gap: 72px;
        /* start, not stretch: the form panel is as tall as its own content
           rather than following the review column, which grows with however
           many reviews a product has. */
        align-items: start;
    }
}

/* Headings ---------------------------------------------------------------- */

.wd-single-reviews h2.woocommerce-Reviews-title,
.wd-single-reviews .comment-reply-title {
    display: block;
    margin: 0 0 22px;
    padding: 0;
    font-family: var(--w2w-nb-font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: .025em;
    /* The old shop shouted these in uppercase; /care-plan sets
       text-transform:none on every heading, so match that. */
    text-transform: none;
    color: var(--w2w-nb-text, #eceef3);
}

@media (min-width: 1024px) {
    .wd-single-reviews h2.woocommerce-Reviews-title,
    .wd-single-reviews .comment-reply-title {
        font-size: 34px;
    }
}

/* "Cancel reply" sits inside the form heading. */
.wd-single-reviews .comment-reply-title small {
    display: block;
    margin-top: 8px;
    font-family: var(--w2w-nb-font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.wd-single-reviews .comment-reply-title small a {
    color: var(--w2w-nb-brand, #2e8bff);
}

/* Review list ------------------------------------------------------------- */

.wd-single-reviews ol.commentlist {
    display: grid;
    gap: 14px;
    list-style: none;
}

.wd-single-reviews ol.commentlist li.review {
    list-style: none;
}

.wd-single-reviews .commentlist .review .comment_container {
    display: block;
    padding: 18px 22px 18px 16px;
    background: rgba(236, 238, 243, .05) !important;
    border: 1px solid rgba(236, 238, 243, .1) !important;
    border-radius: 14px;
}

/* Gravatars are noise here — /care-plan cards carry no avatars. */
.wd-single-reviews .commentlist .review .comment_container > img.avatar,
.wd-single-reviews .commentlist .review .avatar {
    display: none !important;
}

.wd-single-reviews .commentlist .review .comment-text > .meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 10px 0 8px;
    font-size: 14px;
}

.wd-single-reviews .woocommerce-review__author {
    font-weight: 600;
    color: var(--w2w-nb-text, #eceef3);
}

/* The literal dash separator adds nothing once author and date are laid out
   as separate flex items. */
.wd-single-reviews .woocommerce-review__dash {
    display: none;
}

.wd-single-reviews .woocommerce-review__published-date {
    font-family: var(--w2w-nb-font-data);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7e939b;
}

.wd-single-reviews .commentlist .review .description,
.wd-single-reviews .commentlist .review .description p {
    margin: 0;
    color: #c3d2d8;
    font-size: 15px;
    line-height: 1.6;
}

.wd-single-reviews .commentlist .review .description p + p {
    margin-top: 10px;
}

/* Stars and badges removed -------------------------------------------------- */

/* Ratings are switched off for this store (WooCommerce > Settings > Products >
   Reviews > "Enable star rating on reviews"), so no rating input renders and no
   rating is required to post. These rules hide the star output that still comes
   from reviews saved before that, and WooCommerce's "(verified owner)" badge,
   which the design does not use. */
.wd-single-reviews .star-rating,
.wd-single-reviews .comment-form-rating,
.wd-single-reviews .woocommerce-review__verified {
    display: none !important;
}

/* Empty state ------------------------------------------------------------- */

/* woocommerce.css paints this as a blue info bar. */
.wd-single-reviews .woocommerce-noreviews {
    margin: 0;
    padding: 20px 22px;
    background: rgba(236, 238, 243, .05) !important;
    border: 1px solid rgba(236, 238, 243, .1) !important;
    border-radius: 14px;
    color: #7e939b;
    font-size: 15px;
    line-height: 1.5;
}

.wd-single-reviews .woocommerce-noreviews::before {
    content: none !important;
}

/* Form ------------------------------------------------------------------- */

.wd-single-reviews #review_form_wrapper {
    /* Fills the stretched grid cell so the panel ends level with the review
       column; the form itself stays top-aligned inside it. border-box is what
       keeps it level — with content-box the padding is added on top of the
       100% height and the panel overhangs the column by 26px at each end. */
    box-sizing: border-box;
    padding: 26px 24px;
    background: rgba(236, 238, 243, .05) !important;
    border: 1px solid rgba(236, 238, 243, .1) !important;
    border-radius: 14px;
}

@media (min-width: 1024px) {
    .wd-single-reviews #review_form_wrapper {
        padding: 30px 28px;
    }
}

.wd-single-reviews .comment-form {
    display: grid;
    gap: 16px;
}

.wd-single-reviews .comment-form > p {
    margin: 0;
}

.wd-single-reviews .comment-form label {
    display: block;
    margin-bottom: 8px;
    color: #7e939b;
    font-size: 14px;
}

.wd-single-reviews .comment-form textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 14px 16px;
    background: rgba(236, 238, 243, .05) !important;
    border: 1px solid rgba(236, 238, 243, .14) !important;
    border-radius: 14px;
    color: var(--w2w-nb-text, #eceef3);
    font-family: var(--w2w-nb-font-body);
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
}

.wd-single-reviews .comment-form textarea::placeholder {
    color: #5e7a84;
}

.wd-single-reviews .comment-form textarea:focus {
    outline: none;
    border-color: var(--w2w-nb-brand, #2e8bff) !important;
}

/* Pill button, matching .care-plan-*__button--primary. !important because
   WooCommerce's and the theme's button rules are more specific than a
   `.comment-form .submit` descendant selector and flatten it otherwise. */
.wd-single-reviews .form-submit {
    margin: 4px 0 0;
}

.wd-single-reviews .comment-form .submit,
.wd-single-reviews .comment-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 46px;
    padding: 12px 30px !important;
    background: var(--w2w-nb-brand, #2e8bff) !important;
    border: 1px solid var(--w2w-nb-brand, #2e8bff) !important;
    border-radius: var(--w2w-radius-pill, 40px) !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.wd-single-reviews .comment-form .submit:hover,
.wd-single-reviews .comment-form input[type="submit"]:hover {
    background: #1f7bef !important;
    border-color: #1f7bef !important;
}

/* Shown instead of the form when reviews require an account. */
.wd-single-reviews .must-log-in {
    margin: 0;
    color: #7e939b;
    font-size: 15px;
    line-height: 1.5;
}

.wd-single-reviews .must-log-in a {
    color: var(--w2w-nb-brand, #2e8bff);
}

/* Woodmart-only leftovers: its rating dashboard and review filter form have no
   markup on this stack. Kept hidden so a future partial port cannot leak an
   unstyled half-built box into the section. */
.wd-single-reviews .wd-rating-summary-wrap,
.wd-single-reviews .wd-reviews-tools {
    display: none !important;
}

/* ==========================================================================
   PARITY WITH THE OLD SITE'S PER-PAGE CSS
   --------------------------------------------------------------------------
   On the old shop these were maintained by hand in WPBakery's per-page custom
   CSS box, on every Supplements product. Only the three rules below still have
   anything to act on here — the rest of that snippet targeted Woodmart /
   WPBakery wrappers that do not exist on this stack (.main-page-wrapper,
   .wpb_wrapper, .vc_section[wd-section-stretch], .wd-single-rating,
   .btn-scheme-light, select option via --bgcolor-white), or helper classes that
   are not used by any template here (.change-column-width, .hide-for-now,
   .max-w-1460), or an element this template never outputs
   (.woocommerce-product-rating). Those are deliberately not carried over.
   ========================================================================== */

/* Stock status was hidden. wc_get_stock_html() renders <p class="stock in-stock">
   inside .w2w-product__stock, and the template prints that wrapper only when the
   html is non-empty, so hiding the wrapper is exact and leaves no empty gap.
   The separate "Out of stock" label (.w2w-product__oos-label) is a different
   element and stays visible, as it did before. */
.w2w-product .w2w-product__stock,
.w2w-product .stock {
    display: none !important;
}

/* The promo badge's brand-blue glow was switched off. */
.w2w-product__promo-badge {
    box-shadow: none !important;
}

/* Frequency dropdown: the old site used a softer 12px corner and tighter
   vertical padding than the current 4px / 14px Figma values. The 46px right
   padding that clears the arrow is left alone. */
.w2w-product__option-select {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-radius: var(--w2w-p-radius) !important;
}

/* Read more / Show less -----------------------------------------------------
   inc/misc-frontend-tweaks.php collapses the list after the third review and
   injects <button id="load-more-reviews">, adding .expanded while open.

   Same shape and type as .care-plan-hero__button--secondary: transparent fill,
   brand hairline, pill radius, white label at 16px/600 with 12px 30px padding.
   (The arrow SVG that button used to carry was removed from the PHP — it had
   the old shop's blue hardcoded into its fill and read as a rule across the
   button rather than an affordance.) */

.wd-single-reviews #load-more-reviews {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 18px 0 0;
    padding: 12px 30px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid var(--w2w-nb-brand, #2e8bff);
    border-radius: var(--w2w-radius-pill, 40px);
    color: #fff;
    font-family: var(--w2w-nb-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.wd-single-reviews #load-more-reviews:hover {
    background: var(--w2w-nb-brand, #2e8bff);
    border-color: var(--w2w-nb-brand, #2e8bff);
}

.wd-single-reviews #load-more-reviews:focus-visible {
    outline: 2px solid var(--w2w-nb-brand, #2e8bff);
    outline-offset: 3px;
}


/* ==========================================================================
   SECTION DIVIDERS
   --------------------------------------------------------------------------
   The warm hairline /care-plan puts between its sections (.care-plan-divider).
   Same gradient values, added as a ::before so the markup is untouched: it
   fades in from transparent, peaks amber in the middle and fades out again,
   which is why it can run full-bleed without looking like a cut.
   ========================================================================== */

.w2w-suggested,
.w2w-product__reviews {
    position: relative;
}

.w2w-suggested::before,
.w2w-product__reviews::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(194, 69, 31, 0) 0%,
        rgba(194, 69, 31, .75) 28%,
        rgba(232, 144, 42, .95) 52%,
        rgba(201, 154, 91, .5) 78%,
        rgba(201, 154, 91, 0) 100%
    );
}

/* The promo badge sits directly above the title; a warm hairline ties it to the
   dividers and the servings line without adding another filled colour. */
.w2w-product__promo-badge {
    border-color: rgba(232, 144, 42, .45) !important;
}

/* ==========================================================================
   HERO — /care-plan ALIGNMENT
   --------------------------------------------------------------------------
   The section above was ported from the old shop and then had its palette
   swapped. That fixed the colours but left the old proportions, which is why
   it still read as a different page than the reviews block below it.

   This block aligns the remaining three things /care-plan actually defines:

     1. Numbers are mono. Every figure on that page — stat values, chip
        counts, footnotes — uses --w2w-nb-font-data at weight 500, never the
        display or body face.
     2. Labels are a fixed recipe. Every eyebrow / role / category there is
        mono 500, 10–12.5px, letter-spacing .1em, uppercase, in
        --w2w-nb-text-secondary. Nothing else is uppercase.
     3. Prose is one tone. Headline in the display face at 400–500 sentence
        case, subhead at 20px / 155% in the secondary tone — not white.

   Amber is deliberately spent once here, on the price. On /care-plan the warm
   accent marks values (.care-plan-hero__stat-number) and nothing else, so
   giving it to both the price and the servings line would spend it twice and
   flatten the hierarchy.
   ========================================================================== */

/* Breadcrumbs as an eyebrow, which is what they are. -------------------------- */

.w2w-product .w2w-product__breadcrumbs,
.w2w-product .w2w-product__breadcrumbs a,
.w2w-product .w2w-product__breadcrumbs-current {
    font-family: var(--w2w-nb-font-data);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.w2w-product .w2w-product__breadcrumbs,
.w2w-product .w2w-product__breadcrumbs a {
    color: var(--w2w-nb-text-secondary, #a8aeb8);
}

.w2w-product .w2w-product__breadcrumbs-current {
    color: var(--w2w-p-text);
    font-weight: 500;
}

/* Title ---------------------------------------------------------------------- */

/* font-size is left to the existing responsive steps; only the rhythm and the
   line-height are brought in line with .care-plan-hero__headline (104–110%). */
.w2w-product .w2w-product__title {
    line-height: 1.06;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__title {
        /* /care-plan puts 20px between headline and subhead. */
        margin-bottom: 20px;
    }
}

/* Prose ---------------------------------------------------------------------- */

/* .care-plan-hero__subhead: 20px / 155%, secondary tone. Paragraph and bullets
   share it — they were two different colours before, which is what made the
   block look patched together. */
.w2w-product .w2w-product__description,
.w2w-product .w2w-product__description li {
    color: var(--w2w-nb-text-secondary, #a8aeb8);
    font-family: var(--w2w-nb-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 155%;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__description,
    .w2w-product .w2w-product__description li {
        font-size: 20px;
    }
}

.w2w-product .w2w-product__description p {
    margin: 0 0 14px;
}

.w2w-product .w2w-product__description ul {
    margin: 18px 0 0;
}

/* Specs and values ----------------------------------------------------------- */

/* "60 capsules / 60 servings" is a spec line, so it takes the label recipe
   rather than the value accent it briefly had. */
.w2w-product .w2w-product__attributes {
    color: var(--w2w-nb-text-secondary, #a8aeb8);
    font-family: var(--w2w-nb-font-data);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* The price is the page's headline figure: mono 500 in amber, the same
   treatment /care-plan gives .care-plan-hero__stat-number, scaled up. */
.w2w-product .w2w-product__price,
.w2w-product .w2w-product__price .woocommerce-Price-amount,
.w2w-product .w2w-product__price .woocommerce-Price-currencySymbol,
.w2w-product .w2w-product__price bdi {
    color: var(--w2w-nb-warm-amber, #e8902a);
    font-family: var(--w2w-nb-font-data);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.w2w-product .w2w-product__price {
    font-size: 30px;
    line-height: 108%;
    margin-bottom: 20px;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__price {
        font-size: 34px;
    }
}

/* Surfaces ------------------------------------------------------------------- */

/* The gallery frame had a hairline but no fill, so it read as an outline rather
   than one of the page's cards. */
.w2w-product .w2w-product__gallery-main {
    background: var(--w2w-p-surface);
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__purchase-card {
        /* 32px was the old shop's; /care-plan cards sit at 24–30px. */
        padding: 26px;
        border: 1px solid var(--w2w-p-hairline);
    }
}

/* Pills on the gallery keep a light label in both variants — the sale one was
   dark-on-brand and the stock one used the secondary tone on red. */
.w2w-product .w2w-product__gallery-main .product-labels .product-label {
    color: #fff;
}

/* Suggested products share the section rhythm of every other band. */
.w2w-suggested {
    padding: 64px 0;
}

/* The description was capped at 520px, a holdover from the old shop's narrower
   info column. The hero column here is 698fr wide, so let the copy use it. */
.w2w-product .w2w-product__description {
    max-width: none;
}

/* ==========================================================================
   BAND SECTION HEADERS — centred, /care-plan style
   --------------------------------------------------------------------------
   /care-plan centres section headers and only section headers: 18 of its 24
   text-align rules are centre, and every one of them is a __header /
   __headline / __subhead / __intro block. Content inside cards and lists stays
   left (the other 6). The recipe is always the same — a column flex box,
   align-items:center, 14–18px gap, text-align:center.

   Applied here to the full-width bands, which are the structural equivalent.
   Deliberately NOT applied to two places:

     - the hero, because it is a two-column commerce layout. /care-plan centres
       its hero because that hero is a single column with nothing beside it;
       centring a product title against a gallery on its left would leave the
       copy floating away from the thing it describes.
     - the reviews columns, whose headings sit above their own column rather
       than above the section, and which already read correctly.
   ========================================================================== */

.w2w-suggested__title,
.w2w-product__custom-tab > h3 {
    text-align: center;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

/* Custom sections as /care-plan panels: same surface, hairline and radius as
   its cards, and the section rhythm of every other band. */
.w2w-product__custom-tabs {
    padding-top: 64px;
    padding-bottom: 64px;
}

.w2w-product__custom-tab {
    padding: 26px 24px;
    background: var(--w2w-p-surface);
    border: 1px solid var(--w2w-p-hairline);
    border-radius: var(--w2w-p-radius);
}

.w2w-product__custom-tab + .w2w-product__custom-tab {
    margin-top: 18px;
}

.w2w-product__custom-tab > h3 {
    margin: 0 auto 18px;
    font-family: var(--w2w-nb-font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: .025em;
    text-transform: none;
    color: var(--w2w-p-text);
}

@media (min-width: 1024px) {
    .w2w-product__custom-tab > h3 {
        font-size: 30px;
    }
}

/* Body copy inside the panels follows the page's prose tone. */
.w2w-product__custom-tab p,
.w2w-product__custom-tab li {
    color: var(--w2w-nb-text-secondary, #a8aeb8);
    font-family: var(--w2w-nb-font-body);
    font-size: 17px;
    line-height: 155%;
}

/* The warm hairline that separates every other band. */
.w2w-product__custom-tabs,
.w2w-product__extra-content {
    position: relative;
}

.w2w-product__custom-tabs::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(194, 69, 31, 0) 0%,
        rgba(194, 69, 31, .75) 28%,
        rgba(232, 144, 42, .95) 52%,
        rgba(201, 154, 91, .5) 78%,
        rgba(201, 154, 91, 0) 100%
    );
}


/* ==========================================================================
   HERO CONTROLS AND LABELS — finishing the /care-plan alignment
   --------------------------------------------------------------------------
   The HERO block above re-pointed the prose, the breadcrumbs, the spec line
   and the price. It did not touch the controls, which are the loudest thing in
   the hero and were still speaking the old shop's voice: uppercase labels at
   weight 600-700 with Roboto's variable-font axes pinned through --fvs-heavy.

   /care-plan's own rules, quoted in that block: nothing is uppercase except
   the label recipe (mono 500, 10-12.5px, .1em track), figures are mono, and
   prose is sentence case in the display or body face. So the buttons take the
   same pill every other new page uses, and the badges take the label recipe
   they always should have had.

   --fvs-heavy has to be reset to `normal` wherever the face changes. Those
   axes are Roboto's; they are not part of font-family, so they keep deforming
   whatever face replaces it — the same trap as the success pages' .item_left.

   !important is used only where the declaration being replaced already has it.
   This file is heavily !important-ed against Woodmart and WooCommerce, and a
   plain declaration silently loses to those.
   ========================================================================== */

/* Buttons: one pill, shared with the questionnaire, /schedule and the success
   pages — display face, weight 500, sentence case, .8px track. */
.w2w-product .w2w-product__add-to-cart,
.w2w-product .w2w-product__add-to-cart:hover,
.w2w-product .w2w-product__add-to-cart:focus,
.w2w-product .w2w-product__add-to-cart:active,
.w2w-product .w2w-product__buy-now,
.w2w-product .w2w-product__buy-now:hover,
.w2w-product .w2w-product__buy-now:focus,
.w2w-product .w2w-product__buy-now:active,
.w2w-product .w2w-product__native-form .single_add_to_cart_button,
.w2w-product .w2w-product__oos .button,
.w2w-product .w2w-product__oos button {
    font-family: var(--w2w-nb-font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: .8px !important;
    text-transform: none !important;
}

/* Labels and badges: the one place uppercase is correct here. */
.w2w-product .w2w-product__sale-flash,
.w2w-product .w2w-product__new-flash,
.w2w-product .w2w-product__oos-label,
.w2w-product .w2w-product__promo-badge-text,
.w2w-product .w2w-product__gallery-main .product-labels .product-label {
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* Figures are mono, including the quantity the customer types. */
.w2w-product .w2w-product__qty-input,
.w2w-product .w2w-product__qty-input:focus,
.w2w-product .w2w-product__qty-input:active {
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
}

/* Purchase options are prose, not labels: weight 700 in pure white was the old
   shop's emphasis. */
.w2w-product .w2w-product__option-label {
    color: var(--w2w-p-text);
    font-weight: 500;
    font-size: 17px;
}

/* The page's base tone. #fff is brighter than the system's text/primary, which
   is what made the hero copy read hotter than the same copy on /care-plan. */
.w2w-product {
    color: var(--w2w-p-text);
}

/* The breadcrumb separator is furniture, not content. */
.w2w-product .w2w-product__breadcrumbs-sep {
    color: var(--w2w-p-muted);
}

/* Keyboard focus — there was none anywhere on this page. Every control here is
   a link, a button or an input, so one rule covers the gallery arrows and
   thumbs, the purchase options, both buy buttons and the suggested cards. No
   border-radius is set: an outline follows the element's own corners already. */
.w2w-product a:focus-visible,
.w2w-product button:focus-visible,
.w2w-product input:focus-visible,
.w2w-product select:focus-visible,
.w2w-suggested a:focus-visible,
.w2w-suggested button:focus-visible {
    outline: 2px solid var(--w2w-p-brand);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .w2w-product *,
    .w2w-product *::before,
    .w2w-product *::after,
    .w2w-suggested *,
    .w2w-suggested *::before,
    .w2w-suggested *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   SUGGESTED FOR YOU — /care-plan alignment
   --------------------------------------------------------------------------
   This section had never actually been seen: [w2w_product_recommendations] is
   in no product's content in this database, and the ACF w2w_rec_enabled toggle
   gates it as well, so it rendered nowhere. It was therefore still entirely in
   the old shop's language — brand-blue uppercase heading, uppercase card titles
   at weight 600 with the Roboto axes, and a blue price.

   Retargeted to the same recipe as the sibling bands on this page: the section
   header matches .w2w-product__custom-tab > h3 exactly, the price takes the
   amber the hero gives the product's own price (in a card the price IS the
   value the accent is for), and card titles become sentence-case prose.

   Two real defects are fixed here as well, each noted at the rule that fixes
   it: the section lost its horizontal padding, and the card's text sat flush
   against the image.
   ========================================================================== */

/* Section rhythm. `padding: 64px 0` further up overrode the earlier
   `padding: 0 20px`, so the section had NO horizontal padding at all and the
   cards ran to the viewport edge on narrow screens. Both axes are stated
   together here so that cannot happen again, on /care-plan's own 64/140 scale.
   The divider is a background rather than a ::before because this element is
   `display: flex` — a pseudo-element would become a flex item and claim a
   column, which is exactly what went wrong on the success pages' .allen. */
.w2w-suggested {
    max-width: 1460px;
    margin: 0 auto;
    padding: 64px 20px;
    gap: 28px;
    background-image: linear-gradient(
        90deg,
        rgba(194, 69, 31, 0) 0%,
        rgba(194, 69, 31, .75) 28%,
        rgba(232, 144, 42, .95) 52%,
        rgba(201, 154, 91, .5) 78%,
        rgba(201, 154, 91, 0) 100%
    );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 2px;
}

@media (min-width: 1024px) {
    .w2w-suggested {
        padding: 140px 20px;
    }
}

/* Restated at the two narrow breakpoints the block above sets, which would
   otherwise put the vertical padding back to 0. */
@media (max-width: 768px) {
    .w2w-suggested {
        padding: 56px 16px;
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .w2w-suggested {
        padding: 48px 16px;
        gap: 22px;
    }
}

/* Section header: the same rule as .w2w-product__custom-tab > h3, so the two
   bands on this page cannot drift. The colour needs !important because the
   original set brand blue that way. */
.w2w-suggested .w2w-suggested__title {
    color: var(--w2w-p-text) !important;
    font-family: var(--w2w-nb-font-display);
    font-variation-settings: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: .025em;
    text-transform: none;
}

@media (min-width: 1024px) {
    .w2w-suggested .w2w-suggested__title {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .w2w-suggested .w2w-suggested__title {
        font-size: 22px;
    }
}

/* Card: the text sat directly against the image edge — .w2w-suggested__product
   has no gap and __product-info had `padding: 24px 0`. And the card carried
   42px of right padding against 0 on the left, which is what made the row look
   off-centre. */
.w2w-suggested .w2w-suggested__product {
    padding-right: 22px;
    transition: border-color .2s ease, background-color .2s ease;
}

.w2w-suggested .w2w-suggested__product-info {
    gap: 16px;
    padding: 22px 0 22px 22px;
}

/* Hover was a blue glow. Every other selectable surface in the new system
   marks itself with the brand hairline and a faint tint instead, which reads
   as "this is the target" rather than as a highlight effect. */
@media (hover: hover) {
    .w2w-suggested .w2w-suggested__product:hover {
        box-shadow: none;
        border-color: var(--w2w-p-brand);
        background-color: rgba(46, 139, 255, .06) !important;
    }
}

/* The card holds two links and a button, so the whole card marks itself when
   any of them takes focus — otherwise only the focused child moves and the card
   itself gives no feedback. */
.w2w-suggested .w2w-suggested__product:focus-within {
    border-color: var(--w2w-p-brand);
}

/* Card titles are prose. Uppercase at weight 600 with a 1px track is the label
   recipe, and applying it to a product name made every card shout. */
.w2w-suggested .w2w-suggested__product-title,
.w2w-suggested .w2w-suggested__product-title a {
    color: var(--w2w-p-text) !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: normal !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.w2w-suggested .w2w-suggested__product-title a:hover {
    color: var(--w2w-p-brand) !important;
}

/* The price is the card's headline figure, so it takes exactly what the hero
   gives the product's own price: mono 500 in amber. Blue put it in the same
   voice as the links around it. */
.w2w-suggested .w2w-suggested__product-price,
.w2w-suggested .w2w-suggested__product-price * {
    color: var(--w2w-nb-warm-amber, #e8902a) !important;
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* A struck-through was-price is context, not the value. */
.w2w-suggested .w2w-suggested__product-price del,
.w2w-suggested .w2w-suggested__product-price del * {
    color: var(--w2w-p-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* The add-to-cart circle had a hover rule that set the colour it already had,
   so pointing at it did nothing visible. */
.w2w-suggested .w2w-suggested__product-btn-cart {
    transition: opacity .2s ease;
}

@media (hover: hover) {
    .w2w-suggested .w2w-suggested__product-btn-cart:hover {
        opacity: .88;
    }
}


/* ==========================================================================
   PAGE BAND AND BUTTON CASE — what the pass above could not reach
   --------------------------------------------------------------------------
   Two things made the restyle above nearly invisible on a real product page,
   both found by resolving the cascade rather than by looking:

   1. THE PAGE HAD NO BACKGROUND OF ITS OWN. vue-globals.css sets
      `body { background: #181b20 }` site-wide — the old page colour — and
      nothing on this page overrode it. /care-plan, the reference for this
      work, paints its own wrapper `background: var(--w2w-nb-bg)` (#121418),
      and every other restyled page does the same. So the product page was
      the one new-design page still sitting on the old ground.

      Painted on `body.single-product` rather than on `.w2w-product`: that
      wrapper is a WooCommerce product div with its own padding, so anything
      outside it — the gap under the nav, the strip above the footer — would
      keep showing #181b20 and leave two visible seams.

   2. THE BUTTON LABELS ARE AUTHORED IN CAPITALS. The markup is literally
      `>BUY NOW<` and `>ADD TO CART<`, so `text-transform: none` has nothing
      to undo and the buttons kept shouting. Lowercasing the label and
      restoring the first letter gives sentence case without touching the
      template's copy — the same treatment the success-page titles needed.

      ::first-letter works here because neither button is a flex container
      (checked: no `display` rule targets either one, so both are the
      button's default inline-block) and the label is a direct text node.
      SUBSCRIBE & SAVE is deliberately left in capitals: it is a label, and
      the label recipe is the one place capitals are correct on this page.
   ========================================================================== */

/* The page band is set by the template's own inline <style> (see
   templates/template-single-product.php): that block is printed after every
   enqueued stylesheet and carries !important, so a rule here could never win
   it. Retargeted at the source instead of duplicated here. */

.w2w-product .w2w-product__buy-now,
.w2w-product .w2w-product__buy-now:hover,
.w2w-product .w2w-product__buy-now:focus,
.w2w-product .w2w-product__buy-now:active,
.w2w-product .w2w-product__add-to-cart,
.w2w-product .w2w-product__add-to-cart:hover,
.w2w-product .w2w-product__add-to-cart:focus,
.w2w-product .w2w-product__add-to-cart:active,
.w2w-product .w2w-product__native-form .single_add_to_cart_button {
    text-transform: lowercase !important;
}

.w2w-product .w2w-product__buy-now::first-letter,
.w2w-product .w2w-product__add-to-cart::first-letter,
.w2w-product .w2w-product__native-form .single_add_to_cart_button::first-letter {
    text-transform: uppercase !important;
}


/* ==========================================================================
   PRICE — every part of it, in every state
   --------------------------------------------------------------------------
   The amber rule further up listed .w2w-product__price, .woocommerce-Price-
   amount and bdi, but NOT .woocommerce-Price-currencySymbol — and an earlier
   rule does list it, in brand blue. So the price rendered split: a blue "$"
   against an amber "23.40".

   A product on sale has a second problem waiting: WooCommerce wraps the
   current price in <ins>, and `.w2w-product__price ins .woocommerce-Price-
   currencySymbol { color: #2e8bff !important }` (0,3,0 with !important) would
   beat a plain declaration. So this states !important too, and covers the
   <ins> path explicitly rather than relying on inheritance.

   <del> is left alone: the was-price is context, and it is already muted.
   ========================================================================== */

.w2w-product .w2w-product__price,
.w2w-product .w2w-product__price .woocommerce-Price-amount,
.w2w-product .w2w-product__price .woocommerce-Price-currencySymbol,
.w2w-product .w2w-product__price bdi,
.w2w-product .w2w-product__price ins,
.w2w-product .w2w-product__price ins bdi,
.w2w-product .w2w-product__price ins .woocommerce-Price-amount,
.w2w-product .w2w-product__price ins .woocommerce-Price-currencySymbol {
    color: var(--w2w-nb-warm-amber, #e8902a) !important;
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* The was-price stays muted and smaller, but takes the mono face so the two
   figures read as one pair. */
.w2w-product .w2w-product__price del,
.w2w-product .w2w-product__price del .woocommerce-Price-amount,
.w2w-product .w2w-product__price del .woocommerce-Price-currencySymbol,
.w2w-product .w2w-product__price del bdi {
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
}


/* ==========================================================================
   PDP HERO + SUGGESTED FOR YOU — the actual Figma spec
   --------------------------------------------------------------------------
   Source: Figma "W2W | New website", frame "Berberine 500 (desktop) - new
   style" (3247:2359) — buy panel 3248:57, suggested 3250:81.

   Everything above this block aligned the page to /care-plan, because that was
   the reference I had. The PDP has its own frame, and it disagrees with
   /care-plan on the things that matter most here. Values below are the frame's,
   read off the design rather than inferred:

     band              surface/sky #0b1f28   (set inline in the template)
     breadcrumb        Inter 400 14/1.55, links electric-blue, rest tertiary
     badge             amber-wash pill, amber-edge border, mono 11 label
     title             GC arturm Medium 64 / 69.12, track .96
     description       Inter 400 16/1.6 text/secondary
     support bullet    Inter 400 16/1.6 text/lead, 5px cyan dot
     spec line         mono Medium 11, track 1.1, UPPER, mural-teal
     price             mono Medium 56 / .96 text/PRIMARY  + "one-time" unit
     options panel     glass/fill + glass/stroke, r14, pad 22
     option (default)  surface/backdrop + glass/stroke, r10, pad 14/16
     option (selected) blue-wash + blue-edge, radio filled electric-blue
     qty               glass/fill-strong pill, r999, mono 16 value
     Add to cart       SECONDARY — glass/fill-raised + glass/stroke
     Buy now           PRIMARY  — electric-blue, label white
     trust line        Inter 400 12/1.45 tertiary, centred
     suggested         pad 110/90, gap 42, title display 44/50.6 centred
     suggested card    glass r14, pad 18/20/18/18, gap 16, thumb 96x120 r8
     suggested price   mono Regular 16, track .16, text/PRIMARY

   Two corrections to earlier work in this file, both mine:

     - THE PRICE IS NOT AMBER. Both the hero price and the suggested-card price
       are text/primary in the design. Amber appears in exactly one place on
       this page — the badge — and spending it on the price flattened that.
     - THE BREADCRUMB IS NOT A MONO LABEL. It is body copy with blue links.

   Not reachable from CSS, so still to do in the template (flagged, not faked):
   the qty stepper's − / + buttons, the "one-time" unit beside the price, and
   the cadence select inside the Subscribe row.
   ========================================================================== */

/* Breadcrumb ---------------------------------------------------------------- */

.w2w-product .w2w-product__breadcrumbs,
.w2w-product .w2w-product__breadcrumbs a,
.w2w-product .w2w-product__breadcrumbs-current,
.w2w-product .w2w-product__breadcrumbs-sep {
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.w2w-product .w2w-product__breadcrumbs a {
    color: var(--w2w-nb-brand, #2e8bff) !important;
}

.w2w-product .w2w-product__breadcrumbs,
.w2w-product .w2w-product__breadcrumbs-sep,
.w2w-product .w2w-product__breadcrumbs-current {
    color: #6e747e !important; /* text/tertiary */
}

/* Badge — the one amber thing on the page ---------------------------------- */

.w2w-product .w2w-product__promo-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: rgba(232, 144, 42, .1);   /* accent/amber-wash */
    border: 1px solid rgba(232, 144, 42, .55); /* accent/amber-edge */
    border-radius: 999px;
    box-shadow: none;
}

.w2w-product .w2w-product__promo-badge-text {
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: var(--w2w-nb-warm-amber, #e8902a) !important;
}

/* Title — display H1 ------------------------------------------------------- */

.w2w-product .w2w-product__title {
    font-family: var(--w2w-nb-font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 40px !important;
    line-height: 1.08 !important;
    letter-spacing: .96px !important;
    text-transform: none !important;
    color: var(--w2w-nb-text, #eceef3) !important;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__title {
        font-size: 64px !important;
    }
}

/* Prose: the paragraph and the claim bullets are two different tones -------- */

.w2w-product .w2w-product__description {
    color: #a8aeb8 !important; /* text/secondary */
    font-family: var(--w2w-nb-font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.w2w-product .w2w-product__description li {
    color: #c3d2d8 !important; /* text/lead */
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding-bottom: 10px;
}

/* Spec line — mural teal, not the secondary grey it had -------------------- */

.w2w-product .w2w-product__attributes {
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: var(--w2w-nb-cool-teal, #3d91a2) !important;
}

/* Price — text/primary, NOT amber ----------------------------------------- */

.w2w-product .w2w-product__price,
.w2w-product .w2w-product__price .woocommerce-Price-amount,
.w2w-product .w2w-product__price .woocommerce-Price-currencySymbol,
.w2w-product .w2w-product__price bdi,
.w2w-product .w2w-product__price ins,
.w2w-product .w2w-product__price ins bdi,
.w2w-product .w2w-product__price ins .woocommerce-Price-amount,
.w2w-product .w2w-product__price ins .woocommerce-Price-currencySymbol {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.w2w-product .w2w-product__price {
    font-size: 40px !important;
    line-height: .96 !important;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__price {
        font-size: 56px !important;
    }
}

/* Purchase options panel --------------------------------------------------- */

.w2w-product .w2w-product__purchase-card {
    padding: 22px;
    background: rgba(236, 238, 243, .05);  /* glass/fill */
    border: 1px solid rgba(236, 238, 243, .1); /* glass/stroke */
    border-radius: 14px;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__purchase-card {
        padding: 22px;
    }
}

.w2w-product .w2w-product__subscribe-label {
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: var(--w2w-nb-cool-teal, #3d91a2) !important;
    margin-bottom: 16px !important;
}

.w2w-product .w2w-product__purchase-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Radio rows: default sits on surface/backdrop, selected on the blue wash. */
.w2w-product .w2w-product__option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #050b0e;                        /* surface/backdrop */
    border: 1px solid rgba(236, 238, 243, .1);  /* glass/stroke */
    border-radius: 10px;
    transition: background .14s ease-out, border-color .14s ease-out;
}

.w2w-product .w2w-product__option.is-active {
    background: rgba(46, 139, 255, .12);   /* accent/blue-wash */
    border-color: rgba(46, 139, 255, .9);  /* accent/blue-edge */
}

@media (hover: hover) {
    .w2w-product .w2w-product__option:not(.is-active):hover {
        background: rgba(236, 238, 243, .09);
        border-color: rgba(236, 238, 243, .18);
    }
}

.w2w-product .w2w-product__option-radio {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(236, 238, 243, .28); /* glass/stroke-strong */
    background: none;
}

.w2w-product .w2w-product__option.is-active .w2w-product__option-radio {
    border-color: var(--w2w-nb-brand, #2e8bff);
    background:
        radial-gradient(circle at 50% 50%,
            var(--w2w-nb-brand, #2e8bff) 0 45%,
            rgba(0, 0, 0, 0) 46%);
}

.w2w-product .w2w-product__option-label {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* The saving figure is the secondary line of the row, not a chip. */
.w2w-product .w2w-product__option-save {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: #6e747e !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Quantity ---------------------------------------------------------------- */

.w2w-product .w2w-product__qty,
.w2w-product .w2w-product__cart-form .quantity {
    background: rgba(236, 238, 243, .12);  /* glass/fill-strong */
    border: 0;
    border-radius: 999px;
    padding: 11px 10px;
}

.w2w-product .w2w-product__qty-input,
.w2w-product .w2w-product__qty-input:focus,
.w2w-product .w2w-product__qty-input:active {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    letter-spacing: .16px !important;
}

/* Buttons ----------------------------------------------------------------- */

/* Both share the site-wide button geometry: 52px, pad 18/34, r40, display
   Medium 16 / track .8. The design gives Add to cart the SECONDARY treatment
   and Buy now the primary fill — it was the other way round here. */
.w2w-product .w2w-product__add-to-cart,
.w2w-product .w2w-product__add-to-cart:hover,
.w2w-product .w2w-product__add-to-cart:focus,
.w2w-product .w2w-product__add-to-cart:active,
.w2w-product .w2w-product__buy-now,
.w2w-product .w2w-product__buy-now:hover,
.w2w-product .w2w-product__buy-now:focus,
.w2w-product .w2w-product__buy-now:active,
.w2w-product .w2w-product__native-form .single_add_to_cart_button {
    min-height: 52px !important;
    padding: 18px 34px !important;
    border-radius: 40px !important;
    font-family: var(--w2w-nb-font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 16px !important;
    letter-spacing: .8px !important;
    text-transform: lowercase !important;
    transition: background .14s ease-out, border-color .14s ease-out !important;
}

/* Add to cart — secondary. */
.w2w-product .w2w-product__add-to-cart,
.w2w-product .w2w-product__add-to-cart:focus,
.w2w-product .w2w-product__native-form .single_add_to_cart_button {
    background: rgba(236, 238, 243, .07) !important;   /* glass/fill-raised */
    border: 1px solid rgba(236, 238, 243, .1) !important;
    color: var(--w2w-nb-text, #eceef3) !important;
}

@media (hover: hover) {
    .w2w-product .w2w-product__add-to-cart:hover,
    .w2w-product .w2w-product__native-form .single_add_to_cart_button:hover {
        background: rgba(236, 238, 243, .12) !important;
        border-color: rgba(236, 238, 243, .18) !important;
        color: var(--w2w-nb-text, #eceef3) !important;
    }
}

/* Buy now — primary. */
.w2w-product .w2w-product__buy-now,
.w2w-product .w2w-product__buy-now:focus {
    background: var(--w2w-nb-brand, #2e8bff) !important;
    border: 1px solid var(--w2w-nb-brand, #2e8bff) !important;
    color: #fff !important;
}

@media (hover: hover) {
    .w2w-product .w2w-product__buy-now:hover {
        background: #2578e0 !important;
        border-color: #2578e0 !important;
        color: #fff !important;
    }
}

/* Trust line -------------------------------------------------------------- */

.w2w-product .w2w-product__meta-badges {
    justify-content: center;
    gap: 10px;
    color: #6e747e !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.w2w-product .w2w-product__badge {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* ==========================================================================
   SUGGESTED FOR YOU — Figma 3250:81
   ========================================================================== */

.w2w-suggested {
    max-width: 1420px;
    margin: 0 auto;
    padding: 60px 20px 60px;
    gap: 42px;
    /* The frame carries no divider of its own — 3352:17617 sits between the
       reviews and this section, so it belongs to the page, not to the card
       grid. Kept as a background so it cannot become a flex item. */
    background-image: linear-gradient(
        90deg,
        rgba(194, 69, 31, 0) 0%,
        rgba(194, 69, 31, .75) 28%,
        rgba(232, 144, 42, .95) 52%,
        rgba(201, 154, 91, .5) 78%,
        rgba(201, 154, 91, 0) 100%
    );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 2px;
}

@media (min-width: 1024px) {
    .w2w-suggested {
        padding: 120px 20px 120px;
    }
}

@media (max-width: 768px) {
    .w2w-suggested {
        padding: 60px 16px 60px;
        margin-top: 0;
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .w2w-suggested {
        padding: 60px 16px 60px;
        gap: 24px;
    }
}

/* Display H2, centred. */
.w2w-suggested .w2w-suggested__title {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-display);
    font-variation-settings: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: 1.1px;
    text-transform: none;
    text-align: center;
}

@media (min-width: 1024px) {
    .w2w-suggested .w2w-suggested__title {
        font-size: 44px;
        line-height: 50.6px;
    }
}

.w2w-suggested .w2w-suggested__grid {
    gap: 24px;
}

/* Card: pad 18 top/bottom/left, 20 right; gap 16; centred vertically. */
.w2w-suggested .w2w-suggested__product {
    align-items: center;
    gap: 16px;
    padding: 18px 20px 18px 18px;
    border-radius: 14px;
    transition: background-color .14s ease-out, border-color .14s ease-out;
}

@media (hover: hover) {
    .w2w-suggested .w2w-suggested__product:hover {
        box-shadow: none;
        background-color: rgba(236, 238, 243, .09) !important;
        border-color: rgba(236, 238, 243, .18);
    }
}

/* Thumb: 96x120, r8, on surface/backdrop so a transparent bottle render has
   something behind it. */
.w2w-suggested .w2w-suggested__product-link {
    flex: 0 0 96px;
    width: 96px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #050b0e !important;
}

.w2w-suggested .w2w-suggested__product-image,
.w2w-suggested .w2w-suggested__product-image img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.w2w-suggested .w2w-suggested__product-image img {
    object-fit: cover;
}

.w2w-suggested .w2w-suggested__product-info {
    gap: 24px;
    padding: 0;
}

/* Name: body strong, sentence case. */
.w2w-suggested .w2w-suggested__product-title,
.w2w-suggested .w2w-suggested__product-title a {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Price: mono Regular, text/primary — not amber, and not the display face. */
.w2w-suggested .w2w-suggested__product-price,
.w2w-suggested .w2w-suggested__product-price * {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    letter-spacing: .16px !important;
    text-transform: none !important;
}

.w2w-suggested .w2w-suggested__product-price del,
.w2w-suggested .w2w-suggested__product-price del * {
    color: #6e747e !important;
    font-size: 13px !important;
}

/* Cart circle: 32px, electric-blue, 14.2px glyph. */
.w2w-suggested .w2w-suggested__product-btn-cart,
.w2w-suggested .w2w-suggested__product-btn-cart:hover,
.w2w-suggested .w2w-suggested__product-btn-cart:focus,
.w2w-suggested .w2w-suggested__product-btn-cart:active {
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--w2w-nb-brand, #2e8bff) !important;
    color: #fff !important;
    transition: background-color .14s ease-out !important;
}

.w2w-suggested .w2w-suggested__product-btn-cart svg {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .w2w-suggested .w2w-suggested__product-btn-cart:hover {
        background: #2578e0 !important;
    }
}


/* ==========================================================================
   PDP — the pieces that needed markup, and the reviews palette
   --------------------------------------------------------------------------
   Figma: buy panel 3248:57, reviews columns 3346:24793.

   The button labels are sentence case in the template now, so the
   `text-transform: lowercase` + `::first-letter` pair further up is retired
   below rather than left to fight with authored copy — a real label beats a
   CSS trick, and "Subscribe now" comes from JS where the same change was made.
   ========================================================================== */

/* Retire the case hack — the markup carries the right words now. */
.w2w-product .w2w-product__buy-now,
.w2w-product .w2w-product__buy-now:hover,
.w2w-product .w2w-product__buy-now:focus,
.w2w-product .w2w-product__buy-now:active,
.w2w-product .w2w-product__add-to-cart,
.w2w-product .w2w-product__add-to-cart:hover,
.w2w-product .w2w-product__add-to-cart:focus,
.w2w-product .w2w-product__add-to-cart:active,
.w2w-product .w2w-product__native-form .single_add_to_cart_button {
    text-transform: none !important;
}

/* ── Price + cadence unit (Figma PDP / price) ───────────────────────────── */

.w2w-product .w2w-product__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.w2w-product .w2w-product__price-row .w2w-product__price {
    margin-bottom: 0 !important;
}

/* mono Light, so it reads as a unit next to the figure rather than as a second
   number. */
.w2w-product .w2w-product__price-unit {
    font-family: var(--w2w-nb-font-data);
    font-variation-settings: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .28px;
    text-transform: none;
    color: #6e747e; /* text/tertiary */
    white-space: nowrap;
}

/* ── Quantity stepper (Figma PDP / qty stepper, 3266:2544) ──────────────── */

/* 126x48 pill on glass/fill-strong, pad 11/10, gap 16, 26px round buttons on
   glass/fill, signs text/lead, value text/primary. */
.w2w-product .w2w-product__quantity {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 11px 10px;
    background: rgba(236, 238, 243, .12);
    border: 0;
    border-radius: 999px;
}

.w2w-product .w2w-product__qty-btn,
.w2w-product .w2w-product__qty-btn:hover,
.w2w-product .w2w-product__qty-btn:focus,
.w2w-product .w2w-product__qty-btn:active {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(236, 238, 243, .05) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #c3d2d8 !important; /* text/lead */
    cursor: pointer;
    transition: background-color .14s ease-out;
}

.w2w-product .w2w-product__qty-btn span {
    font-family: var(--w2w-nb-font-data);
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: inherit;
}

@media (hover: hover) {
    .w2w-product .w2w-product__qty-btn:hover {
        background: rgba(236, 238, 243, .18) !important;
    }
}

.w2w-product .w2w-product__qty-input,
.w2w-product .w2w-product__qty-input:focus,
.w2w-product .w2w-product__qty-input:active {
    width: 22px !important;
    min-width: 22px !important;
    height: 26px !important;
    padding: 0 !important;
    text-align: center !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    /* The spinner arrows would break the pill; the − / + buttons are the
       control. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.w2w-product .w2w-product__qty-input::-webkit-outer-spin-button,
.w2w-product .w2w-product__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* ── Cadence select (Figma PDP / cadence select, 3385:3334) ─────────────── */

/* Trigger only: glass/fill + glass/stroke, 44 tall, r10, pad 14, Inter 14, with
   a drawn chevron. The design's open list overlays the Buy now button; a native
   <select> gives that behaviour for free, which is why the control stays native
   rather than being rebuilt. */
/* height and border-radius carry !important because two earlier rules on this
   file set `height: auto !important` and `border-radius: var(--w2w-p-radius)
   !important` on the bare class — equal specificity, so nothing short of
   !important reaches them. Caught by the spec check, not by eye. */
.w2w-product .w2w-product__option-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 0 38px 0 14px;
    background-color: rgba(236, 238, 243, .05);
    background-image:
        linear-gradient(45deg, transparent 50%, #6e747e 50%),
        linear-gradient(135deg, #6e747e 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% - 1px), calc(100% - 14px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid rgba(236, 238, 243, .1);
    border-radius: 10px;
    color: var(--w2w-nb-text, #eceef3);
    font-family: var(--w2w-nb-font-body);
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    /* Renders the native option list dark instead of white-on-white. */
    color-scheme: dark;
}

.w2w-product .w2w-product__option-select:focus-visible {
    border-color: var(--w2w-nb-brand, #2e8bff);
    outline: none;
}

/* ==========================================================================
   REVIEWS — palette only
   --------------------------------------------------------------------------
   Figma "columns" 3346:24793 and the PDP / review card + review form
   components. The layout the earlier pass built is kept; these are the tones
   and faces the design specifies.

   Worth quoting from the component description, because it is a deliberate
   product decision and not an omission: "No star rating and no helpful count —
   ratings were pulled out of the PDP on purpose, so nothing here implies a
   score." Ratings are already disabled in this install, so nothing to hide.
   ========================================================================== */

/* Review card: glass/fill + glass/stroke, r14, pad 24, 12px apart. */
.w2w-product .wd-single-reviews .commentlist li.review,
.w2w-product .wd-single-reviews .commentlist li.comment {
    padding: 24px !important;
    background: var(--w2w-p-surface) !important;
    border: 1px solid var(--w2w-p-hairline) !important;
    border-radius: 14px !important;
}

.w2w-product .wd-single-reviews .commentlist li.review + li.review {
    margin-top: 12px !important;
}

/* Name — body strong, text/primary. */
.w2w-product .wd-single-reviews .woocommerce-review__author {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Date — mono label, text/tertiary, uppercase. */
.w2w-product .wd-single-reviews .woocommerce-review__published-date {
    color: #6e747e !important;
    font-family: var(--w2w-nb-font-data) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
}

/* The design separates name and date with an 8px gap, not a dash. */
.w2w-product .wd-single-reviews .woocommerce-review__dash {
    display: none !important;
}

.w2w-product .wd-single-reviews .comment-text .meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px !important;
}

/* Quote — body base, text/lead. */
.w2w-product .wd-single-reviews .comment-text .description,
.w2w-product .wd-single-reviews .comment-text .description p {
    color: #c3d2d8 !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Section heading — display H2. */
.w2w-product .wd-single-reviews .woocommerce-Reviews-title {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    letter-spacing: 1.1px !important;
    text-transform: none !important;
}

/* ── Review form ────────────────────────────────────────────────────────── */

.w2w-product .wd-single-reviews #review_form_wrapper,
.w2w-product .wd-single-reviews #respond {
    padding: 28px !important;
    background: var(--w2w-p-surface) !important;
    border: 1px solid var(--w2w-p-hairline) !important;
    border-radius: 16px !important;
}

@media (min-width: 1024px) {
    .w2w-product .wd-single-reviews #review_form_wrapper,
    .w2w-product .wd-single-reviews #respond {
        padding: 42px !important;
    }
}

.w2w-product .wd-single-reviews #reply-title {
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 26px !important;
    line-height: 1.22 !important;
    letter-spacing: .84px !important;
    text-transform: none !important;
}

@media (min-width: 1024px) {
    .w2w-product .wd-single-reviews #reply-title {
        font-size: 30px !important;
    }
}

/* Field labels — body small, text/secondary; the required mark is the amber. */
.w2w-product .wd-single-reviews .comment-form label {
    color: #a8aeb8 !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-variation-settings: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.w2w-product .wd-single-reviews .comment-form label .required,
.w2w-product .wd-single-reviews .comment-form .required {
    color: var(--w2w-nb-warm-amber, #e8902a) !important;
    text-decoration: none !important;
}

/* Inputs — glass/fill + glass/stroke, r10, pad 14/16. */
.w2w-product .wd-single-reviews .comment-form input[type="text"],
.w2w-product .wd-single-reviews .comment-form input[type="email"],
.w2w-product .wd-single-reviews .comment-form input[type="url"],
.w2w-product .wd-single-reviews .comment-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px !important;
    background: var(--w2w-p-surface) !important;
    border: 1px solid var(--w2w-p-hairline) !important;
    border-radius: 10px !important;
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
}

.w2w-product .wd-single-reviews .comment-form textarea {
    min-height: 124px !important;
    resize: vertical;
}

.w2w-product .wd-single-reviews .comment-form ::placeholder {
    color: #6e747e !important;
}

/* Focus: glass/fill-strong plus a 1px electric-blue ring. */
.w2w-product .wd-single-reviews .comment-form input:focus,
.w2w-product .wd-single-reviews .comment-form textarea:focus {
    background: rgba(236, 238, 243, .12) !important;
    border-color: var(--w2w-nb-brand, #2e8bff) !important;
    outline: none !important;
}

/* Submit — the site-wide primary button, full width. */
.w2w-product .wd-single-reviews .comment-form .submit,
.w2w-product .wd-single-reviews .comment-form input#submit,
.w2w-product .wd-single-reviews .comment-form button[type="submit"] {
    width: 100%;
    min-height: 52px !important;
    padding: 18px 34px !important;
    background: var(--w2w-nb-brand, #2e8bff) !important;
    border: 1px solid var(--w2w-nb-brand, #2e8bff) !important;
    border-radius: 40px !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: .8px !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color .14s ease-out !important;
}

@media (hover: hover) {
    .w2w-product .wd-single-reviews .comment-form input#submit:hover,
    .w2w-product .wd-single-reviews .comment-form button[type="submit"]:hover {
        background: #2578e0 !important;
        border-color: #2578e0 !important;
    }
}

/* The moderation / cookie note under the form. */
.w2w-product .wd-single-reviews .comment-form-cookies-consent label,
.w2w-product .wd-single-reviews .comment-notes {
    color: #6e747e !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}


/* ==========================================================================
   PDP BUY COLUMN — the card boundary, and the two-line option row
   --------------------------------------------------------------------------
   Comparing the built page against Figma 3248:57 side by side turned up a
   STRUCTURAL difference, not a colour one.

   In the design the buy column is a plain stack, and exactly ONE thing in it is
   a card:

       price              bare, on the page
       purchase options   the only card — glass/fill + glass/stroke, r14, pad 22
       actions            bare row: qty pill + Add to cart
       Buy now            bare, full width
       trust              bare, centred

   Here everything was inside one bordered panel: the price, the eyebrow, the
   options, the quantity, both buttons and the trust line. So the page read as
   one big box where the design reads as a price with a plan picker under it.

   .w2w-product__purchase-card keeps its class (JS and other rules reference it)
   and becomes a plain stack; the surface moves to the options panel, which is
   what the design actually draws. The eyebrow moved inside that panel in the
   template, since CSS cannot reparent it.
   ========================================================================== */

.w2w-product .w2w-product__purchase-card {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__purchase-card {
        padding: 0 !important;
        border: 0 !important;
    }
}

/* The one card in the column. */
.w2w-product .w2w-product__purchase-options {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: rgba(236, 238, 243, .05);   /* glass/fill */
    border: 1px solid rgba(236, 238, 243, .1); /* glass/stroke */
    border-radius: 14px;
}

/* Eyebrow inside the card: 16px above the first row, no bottom margin of its
   own beyond that. */
.w2w-product .w2w-product__purchase-options .w2w-product__subscribe-label {
    margin: 0 0 6px !important;
}

/* Rhythm around the card, from the design's spacer frames: 24px above (after
   the price), 20px below (before the actions row). */
.w2w-product .w2w-product__purchase-options {
    margin: 24px 0 20px;
}

/* ── Option row: radio | (title over sub) | select ──────────────────────── */

/* Figma's row is a radio, a two-line text column, and — on the Subscribe row —
   the cadence select. A grid gives that without touching the markup: the radio
   spans both text rows, and the sub-line collapses when a row has none. The
   radio input itself is position:absolute (visually-hidden pattern), so it
   takes no cell. */
.w2w-product .w2w-product__option {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas:
        "radio title select"
        "radio sub   select";
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
}

.w2w-product .w2w-product__option-radio {
    grid-area: radio;
    align-self: center;
}

.w2w-product .w2w-product__option-label {
    grid-area: title;
    min-width: 0;
}

/* The saving / cadence line — body small in text/tertiary, under the title. */
.w2w-product .w2w-product__option-save {
    grid-area: sub;
    min-width: 0;
}

.w2w-product .w2w-product__option-select {
    grid-area: select;
    width: 350px;
    max-width: 100%;
}

@media (max-width: 900px) {
    /* The select cannot hold 350px next to the label on a narrow column, so the
       row becomes two rows rather than squeezing the text. */
    .w2w-product .w2w-product__option {
        grid-template-columns: 18px minmax(0, 1fr);
        grid-template-areas:
            "radio title"
            "radio sub"
            "select select";
        row-gap: 10px;
    }

    .w2w-product .w2w-product__option-select {
        width: 100%;
    }
}

/* ── Quantity pill ─────────────────────────────────────────────────────── */

/* `background: transparent !important` on the bare class was winning — an
   !important beats specificity, so the track was invisible and the two round
   buttons floated on the page. Caught by comparing against the design, then
   confirmed in the cascade. */
.w2w-product .w2w-product__quantity {
    background: rgba(236, 238, 243, .12) !important;
}

/* ── Actions row ───────────────────────────────────────────────────────── */

/* qty and Add to cart sit on one row, 12px apart, with the button taking the
   rest of the width (Figma "actions" 3248:116). */
.w2w-product .w2w-product__cart-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.w2w-product .w2w-product__cart-actions .w2w-product__add-to-cart {
    flex: 1 1 0 !important;
    min-width: 0;
}

/* ── Trust line ────────────────────────────────────────────────────────── */

.w2w-product .w2w-product__meta-badges {
    margin-top: 16px;
}


/* ==========================================================================
   REVIEWS — geometry from Figma 3346:24793
   --------------------------------------------------------------------------
   The palette pass landed (card, name, date, quote, form, hidden avatar and
   dash all resolve to the design's tokens). These are the measurements that
   were still the earlier port's:

     card spacing   12px                                  (was 14)
     heading        display H2 44 / 50.6, track 1.1       (was 34)
     Show all       Button · W2W kind=Secondary           (was a bespoke pill)

   One thing from the design is deliberately NOT ported: the "REVIEWS" eyebrow
   between two cyan rules. It works there because the heading beside it is a
   phrase — "What people report back." Ours is WooCommerce's own
   "Product Reviews", so an eyebrow above it would read "REVIEWS / Product
   Reviews". The eyebrow is worth adding the day the heading becomes a phrase.
   ========================================================================== */

/* The two-column split is left as the port had it (650fr / 698fr, gap 72).
   The design's fixed 520px form column belongs to a 1920 frame; forcing it into
   this container would crowd the review cards rather than match anything. Not
   every number needs to be copied — the palette and the type do. */

.w2w-product .wd-single-reviews ol.commentlist {
    gap: 12px;
}

/* Heading — display H2. */
.w2w-product .wd-single-reviews .woocommerce-Reviews-title {
    font-size: 30px !important;
    line-height: 1.15 !important;
}

@media (min-width: 1024px) {
    .w2w-product .wd-single-reviews .woocommerce-Reviews-title {
        font-size: 44px !important;
        line-height: 50.6px !important;
    }
}

/* "Show all reviews" — the site-wide secondary button, same geometry as
   Add to cart. It was a bespoke 46px pill. */
.w2w-product .wd-single-reviews #load-more-reviews,
.w2w-product .wd-single-reviews #load-more-reviews:focus {
    min-height: 52px !important;
    padding: 18px 34px !important;
    background: rgba(236, 238, 243, .07) !important;  /* glass/fill-raised */
    border: 1px solid rgba(236, 238, 243, .1) !important;
    border-radius: 40px !important;
    color: var(--w2w-nb-text, #eceef3) !important;
    font-family: var(--w2w-nb-font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: .8px !important;
    text-transform: none !important;
    transition: background-color .14s ease-out, border-color .14s ease-out !important;
}

@media (hover: hover) {
    .w2w-product .wd-single-reviews #load-more-reviews:hover {
        background: rgba(236, 238, 243, .12) !important;
        border-color: rgba(236, 238, 243, .18) !important;
        color: var(--w2w-nb-text, #eceef3) !important;
    }
}

/* The textarea in the design is 124px, not 150. */
.w2w-product .wd-single-reviews .comment-form textarea {
    min-height: 124px !important;
}

/* The date sits 8px after the name on one baseline; the ported rule gave the
   meta row its own vertical margins, which pushed the quote away from it. */
.w2w-product .wd-single-reviews .commentlist .review .comment-text > .meta {
    margin: 0 0 16px !important;
    gap: 8px !important;
}


/* ==========================================================================
   REVIEWS — one surface per thing, not two
   --------------------------------------------------------------------------
   My own regression, visible as a box inside a box on every review and around
   the form. The earlier port had already made `.comment_container` the review
   card and `#review_form_wrapper` the form card. I then added the same
   treatment to `li.review` and to `#respond`, which sit OUTSIDE and INSIDE
   those respectively — so each review rendered as an outer frame wrapping an
   inner frame, with both insets stacking.

   The surface goes back to the element that already had it; the wrapper and the
   inner node are stripped. Values are the design's: card pad 24 / r14, form
   pad 42 / r16.
   ========================================================================== */

/* The <li> is spacing only. */
.w2w-product .wd-single-reviews .commentlist li.review,
.w2w-product .wd-single-reviews .commentlist li.comment {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* The card is the container the port already styled. */
.w2w-product .wd-single-reviews .commentlist .review .comment_container {
    padding: 24px !important;
    background: var(--w2w-p-surface) !important;
    border: 1px solid var(--w2w-p-hairline) !important;
    border-radius: 14px !important;
}

/* Form: the wrapper is the card, #respond inside it is not. */
.w2w-product .wd-single-reviews #respond {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.w2w-product .wd-single-reviews #review_form_wrapper {
    padding: 28px !important;
    background: var(--w2w-p-surface) !important;
    border: 1px solid var(--w2w-p-hairline) !important;
    border-radius: 16px !important;
}

@media (min-width: 1024px) {
    .w2w-product .wd-single-reviews #review_form_wrapper {
        padding: 42px !important;
    }
}

/* The textarea had picked up the card's own 14px radius from a rule that
   targets it alongside the panels; the design gives form controls 10px. */
.w2w-product .wd-single-reviews .comment-form textarea {
    border-radius: 10px !important;
}

/* ==========================================================================
   REVIEWS SECTION — no band of its own
   --------------------------------------------------------------------------
   .w2w-product__reviews carried `background: #121418`, a leftover from when
   this page sat on that colour. It was the ONLY section on the page with a
   fill of its own — the hero, the custom tabs, the extra content and the
   suggested grid are all transparent and let the page band through. So the
   reviews block read as a darker slab cut into the page, which is not what the
   design does: there the whole PDP is one surface/sky band with cards on it.
   ========================================================================== */

.w2w-product .w2w-product__reviews {
    background: none !important;
}

/* ==========================================================================
   PURCHASE OPTION ROW — vertical alignment, and the native option list
   --------------------------------------------------------------------------
   Two fixes.

   1. ALIGNMENT. The grid put `select` in BOTH rows, so the control spanned them
      and its 44px was split ~22px each. "Subscribe" is in row 1, so it centred
      inside that half and sat visibly high against a select that filled the
      whole row.

      The template's two branches are mutually exclusive — with one scheme it
      renders the label plus `__option-save`, with several it renders the label
      plus the select, never both (checked: `if count(...) === 1 / else`). So the
      select can own row 1 and the sub-line can own row 2 across both text
      columns. Whichever branch renders, the unused row collapses and the
      content ends up centred.

   2. THE OPTION LIST. `color-scheme: dark` alone does not repaint a native
      <select> popup on Chrome/Windows, so the list came out white with a blue
      highlight against a dark page. The options are styled directly, which
      Chrome does honour. Keeping the control native is deliberate — the design
      has the open list overlay the Buy now button, which is what a native popup
      does for free.
   ========================================================================== */

.w2w-product .w2w-product__option {
    grid-template-areas:
        "radio title select"
        "radio sub   sub" !important;
}

@media (max-width: 900px) {
    .w2w-product .w2w-product__option {
        grid-template-areas:
            "radio title"
            "radio sub"
            "select select" !important;
    }
}

.w2w-product .w2w-product__option-select option {
    background-color: #0b1f28; /* surface/sky, same as the page */
    color: var(--w2w-nb-text, #eceef3);
}

.w2w-product .w2w-product__option-select option:checked,
.w2w-product .w2w-product__option-select option:hover {
    background-color: #12303c;
    color: var(--w2w-nb-text, #eceef3);
}

/* ==========================================================================
   PRICE SIZE AND THE SPACING ABOVE THE SPEC LINE
   --------------------------------------------------------------------------
   Two things the design comparison caught that my earlier checks missed.

   1. THE PRICE RENDERED AT 28px, not 56. WooCommerce wraps the figure in
      `<span class="woocommerce-Price-amount">`, and an earlier rule sets
      `font-size: 28px` on THAT span. Setting 56px on .w2w-product__price only
      sizes the container — the text takes the child's own value. My spec check
      read the parent and reported 56px: the right number on the wrong element.
      Sized on every node the figure can live in now.

   2. `.w2w-product__attributes` carried `margin-top: 61px`. Figma's buy panel
      puts an 18px spacer between the last claim bullet and the spec line
      (3248:92), and each bullet already contributes 10px of bottom padding —
      so 18px here is what adds up to the design's 28px. 61px was the old
      shop's.

   With that, the whole run below the bullets matches the frame's spacers:
   bullets → 18 → spec line → 20 → price → 24 → options panel.
   ========================================================================== */

.w2w-product .w2w-product__price,
.w2w-product .w2w-product__price .woocommerce-Price-amount,
.w2w-product .w2w-product__price .woocommerce-Price-currencySymbol,
.w2w-product .w2w-product__price bdi,
.w2w-product .w2w-product__price ins,
.w2w-product .w2w-product__price ins .woocommerce-Price-amount,
.w2w-product .w2w-product__price ins .woocommerce-Price-currencySymbol,
.w2w-product .w2w-product__price ins bdi {
    font-size: 40px !important;
    line-height: .96 !important;
}

@media (min-width: 1024px) {
    .w2w-product .w2w-product__price,
    .w2w-product .w2w-product__price .woocommerce-Price-amount,
    .w2w-product .w2w-product__price .woocommerce-Price-currencySymbol,
    .w2w-product .w2w-product__price bdi,
    .w2w-product .w2w-product__price ins,
    .w2w-product .w2w-product__price ins .woocommerce-Price-amount,
    .w2w-product .w2w-product__price ins .woocommerce-Price-currencySymbol,
    .w2w-product .w2w-product__price ins bdi {
        font-size: 56px !important;
    }
}

/* The struck-through was-price stays the smaller of the pair. */
.w2w-product .w2w-product__price del,
.w2w-product .w2w-product__price del .woocommerce-Price-amount,
.w2w-product .w2w-product__price del .woocommerce-Price-currencySymbol,
.w2w-product .w2w-product__price del bdi {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

.w2w-product .w2w-product__attributes {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
}

/* Free-form HTML sections
   ==========================================================================
   Editor-supplied markup from the product's "HTML sections" meta box
   (w2w-core/inc/product-page/html-sections.php). Deliberately minimal: this
   only gives the sections the page's own column and rhythm. Anything inside is
   the editor's markup and is left alone — styling it from here would fight
   whatever they pasted. */

.w2w-product__html-sections {
    display: flex;
    flex-direction: column;
    /* Spacing between sections is a MARGIN, not `gap` — see the rule below.
       gap applies to every pair and cannot be waived for one of them, and two of
       the things a section can hold (the reviews block, the suggested-products
       block) already carry their own 120/60 padding above and below the warm
       separator they draw. With gap, that 56px landed on top of the 120 and the
       separator ended up 176 above and 120 below. */
    gap: 0;
    width: 100%;
    max-width: 1460px;
    margin: 56px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.w2w-product__html-section {
    width: 100%;
}

.w2w-product__html-section + .w2w-product__html-section {
    margin-top: 40px;
}

/* A section whose whole content is a block that already spaces itself gets no
   margin of its own: its own padding is the gap. `:has()` rather than a class on
   the section, because the section wrapper is generic — what it holds is decided
   by the shortcode the editor pasted, not by the markup around it.

   Scoped through the wrapper on purpose, for one weight of specificity more than
   the `+` rule above and the 56px one in the desktop query below. Without it this
   waiver tied with them and lost on source order — which showed up as mobile
   being correct and desktop still 176 above the separator. */
.w2w-product__html-sections .w2w-product__html-section:has(> .w2w-product__reviews),
.w2w-product__html-sections .w2w-product__html-section:has(> .w2w-suggested) {
    margin-top: 0;
}

/* ...and out of the column, too.
   .w2w-product is forced full-bleed (see the top of this file) precisely so the
   reviews band and its 2px amber separator can run edge to edge. Nesting that
   section inside the 1460px/20px wrapper shrank the separator to 1420px and gave
   the review column 40px more inset per side than every other section, because
   .w2w-product__reviews .w2w-product__section-inner pads again inside it. The
   two blocks that bring their own width are released from the wrapper's. */
.w2w-product__html-sections:has(> .w2w-product__html-section > .w2w-product__reviews),
.w2w-product__html-sections:has(> .w2w-product__html-section > .w2w-suggested) {
    max-width: none;
    padding: 0;
}

.w2w-product__html-sections .w2w-product__html-section:has(> .w2w-product__reviews) > .w2w-product__reviews,
.w2w-product__html-sections .w2w-product__html-section:has(> .w2w-suggested) > .w2w-suggested {
    width: 100%;
}

.w2w-product__html-section > *:first-child {
    margin-top: 0;
}

.w2w-product__html-section > *:last-child {
    margin-bottom: 0;
}

/* Pasted markup should not be able to push the page sideways. */
.w2w-product__html-section img,
.w2w-product__html-section iframe,
.w2w-product__html-section video,
.w2w-product__html-section table {
    max-width: 100%;
}

.w2w-product__html-section table {
    display: block;
    overflow-x: auto;
}

@media (min-width: 1024px) {
    .w2w-product__html-sections {
        margin-top: 80px;
    }

    .w2w-product__html-section + .w2w-product__html-section {
        margin-top: 56px;
    }
}

/* Variable & subscription products: WooCommerce's own variation form
   ==========================================================================
   A variable-subscription product (Core Care Plan) renders WooCommerce's
   stock `form.variations_form` inside our purchase card, and almost none of
   it had been dressed. Measured before this block, at 1440:

     select   color rgb(64,64,64) on our dark card, border 1px solid #ccc,
              border-radius 0, height 26px - light-theme defaults, i.e. near
              invisible text in a hairline box, opening a white native list
     button   background rgba(236,238,243,.07) with padding 18px 34px, picked
              up from a generic button rule rather than the outlined style the
              `.w2w-product__native-form` rules above intend - a grey ghost
              that reads as disabled next to a live price
     Clear    a bare brand-blue link, same weight as body copy, sharing a row
              with the select
     price    the selected variation's price line, unstyled

   Everything below reuses the page's own tokens, so it matches the SATT
   purchase options (.w2w-product__option) and the primary CTA
   (.w2w-product__buy-now) that products with a one-time option already show.

   Scoped through .w2w-product__purchase-card, one class deeper than the rules
   above, so these win on specificity rather than on source order. */

.w2w-product__purchase-card .w2w-product__native-form .variations {
    width: 100%;
    margin: 0 0 20px;
    border: 0;
}

/* The stock markup is a <table> with a label cell and a value cell. Rows
   become blocks and the cells stack, which is what the design draws and what
   a narrow card needs - a two-column table cannot reflow. */
.w2w-product__purchase-card .w2w-product__native-form .variations tbody,
.w2w-product__purchase-card .w2w-product__native-form .variations tr,
.w2w-product__purchase-card .w2w-product__native-form .variations td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
}

.w2w-product__purchase-card .w2w-product__native-form .variations tr + tr {
    margin-top: 16px;
}

.w2w-product__purchase-card .w2w-product__native-form .variations td.label label {
    display: block;
    margin: 0 0 8px;
    font-family: var(--w2w-nb-font-data, inherit);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w2w-p-muted);
}

/* `color-scheme: dark` is the part that fixes the OPEN dropdown: that list is
   painted by the browser, not by this stylesheet, so no amount of styling the
   select reaches it. Without this it opens white with a blue selection bar
   over a dark page. The `option` colours below are the fallback for engines
   that ignore color-scheme on a select. */
.w2w-product__purchase-card .w2w-product__native-form select {
    color-scheme: dark;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 13px 40px 13px 16px;
    border: 1px solid var(--w2w-p-hairline);
    border-radius: 8px;
    background-color: var(--w2w-p-surface);
    color: var(--w2w-p-text);
    font-family: var(--w2w-nb-font-body, inherit);
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    /* The native arrow goes with `appearance: none`, which is already set
       upstream, so the chevron is drawn here. Inlined as a data URI rather
       than fetched: it is 300 bytes of arrow. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237e939b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: border-color .16s ease-out, box-shadow .16s ease-out;
}

.w2w-product__purchase-card .w2w-product__native-form select:hover {
    border-color: var(--w2w-p-muted);
}

.w2w-product__purchase-card .w2w-product__native-form select:focus,
.w2w-product__purchase-card .w2w-product__native-form select:focus-visible {
    outline: none;
    border-color: var(--w2w-p-brand);
    box-shadow: 0 0 0 3px rgba(46, 139, 255, .25);
}

.w2w-product__purchase-card .w2w-product__native-form select option {
    background-color: #0b1f28;
    color: var(--w2w-p-text);
}

/* "Clear" is a reset, not an action - it belongs at the quiet end of the
   hierarchy, on its own line under the field rather than beside it, where it
   was competing with the select for the same row. */
.w2w-product__purchase-card .w2w-product__native-form .reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--w2w-nb-font-body, inherit);
    font-size: 13px;
    line-height: 1.4;
    color: var(--w2w-p-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.w2w-product__purchase-card .w2w-product__native-form .reset_variations:hover,
.w2w-product__purchase-card .w2w-product__native-form .reset_variations:focus {
    color: var(--w2w-p-text);
}

/* The chosen variation's price. Same face as the headline price above the
   card, one step down in size - it confirms the selection, it is not a second
   headline. */
.w2w-product__purchase-card .w2w-product__native-form .woocommerce-variation-price {
    margin: 0 0 16px;
}

.w2w-product__purchase-card .w2w-product__native-form .woocommerce-variation-price .price,
.w2w-product__purchase-card .w2w-product__native-form .woocommerce-variation-price .amount {
    font-family: var(--w2w-nb-font-display, inherit);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--w2w-p-text);
}

.w2w-product__purchase-card .w2w-product__native-form .woocommerce-variation-price .subscription-details {
    font-family: var(--w2w-nb-font-body, inherit);
    font-size: 14px;
    font-weight: 400;
    color: var(--w2w-p-muted);
}

.w2w-product__purchase-card .w2w-product__native-form .woocommerce-variation-description p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--w2w-p-body);
}

/* The real CTA, matching .w2w-product__buy-now: a filled brand pill, not the
   outlined ghost. Geometry is repeated across :hover/:focus/:active so the
   button cannot change size under the cursor - padding and border were
   arriving from different rules in different states, which is what made it
   jump. Only the colours transition. */
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button,
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button:hover,
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button:focus,
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button:active {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 30px !important;
    border: 0 !important;
    border-radius: var(--w2w-radius-pill, 40px) !important;
    background: var(--w2w-p-brand) !important;
    background-color: var(--w2w-p-brand) !important;
    color: #fff !important;
    font-family: var(--w2w-nb-font-body, inherit) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .2s, color .2s !important;
}

.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button:hover {
    background: var(--w2w-nb-brand-hover, #4fa3ff) !important;
    background-color: var(--w2w-nb-brand-hover, #4fa3ff) !important;
}

.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button:active {
    background: var(--w2w-nb-brand-pressed, #1f6ed6) !important;
    background-color: var(--w2w-nb-brand-pressed, #1f6ed6) !important;
}

.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button:disabled,
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button.disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

/* One term, one subscription - a quantity stepper on a monthly plan asks a
   question the plan has no answer to, and WooCommerce prints it regardless.
   Hidden rather than removed, so the input still posts its value of 1. */
.w2w-product__purchase-card .w2w-product__native-form .variations_button .quantity {
    display: none;
}

/* Disabled until a term is picked, which is WooCommerce's own behaviour and
   correct - but at 50% of a saturated blue the label went muddy and the
   button read as broken rather than as waiting. A flat muted surface says
   "not yet" legibly, and the pointer still refuses it. */
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button:disabled,
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button.disabled,
.w2w-product__purchase-card .w2w-product__native-form .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 1 !important;
    background: var(--w2w-p-surface) !important;
    background-color: var(--w2w-p-surface) !important;
    color: var(--w2w-p-muted) !important;
    box-shadow: inset 0 0 0 1px var(--w2w-p-hairline) !important;
    cursor: not-allowed !important;
}