/* ==========================================================================
   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: #1A1D29;
}

.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: #9A9BA1;
}

.w2w-product__breadcrumbs a {
    color: #9A9BA1;
    text-decoration: none;
    transition: color 0.2s;
}

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

.w2w-product__breadcrumbs-sep {
    margin: 0 8px;
    color: #4F5058;
}

.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: 16px;
    border: 1px solid var(--grey, #4F5058);
    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: 90px;
    border: none;
    background: var(--background-color, #1A1D29);
    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: #252837;
}

.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: 16px;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--grey, #4F5058);
    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(--blue, #34B4F4) !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: 16px;
    background-color: #14161D;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--grey, #4F5058);
    color: var(--Brand-color, #34B4F4);
    font-family: Roboto, sans-serif;
    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(--blue, #34B4F4);
    color: var(--Brand-color, #34B4F4);
}

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

.w2w-product__promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 32px;
    margin: 0 0 16px;
    background: rgba(52, 180, 244, 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 #34B4F4,
        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: 'Roboto Flex', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    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: 14px;
    font-weight: 1000;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.w2w-product__title {
    font-family: Roboto, sans-serif;
    font-variation-settings: var(--fvs-heavy);
    /* !important to beat the global `h1 { font-size: 32px !important }`
       coming from the theme/typography settings. */
    font-size: 52px !important;
    font-weight: 1000;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 24px;
    color: var(--white, #FFF);
    text-transform: uppercase;
}

.w2w-product__description {
    color: var(--white, #FFF);
    font-family: Roboto, sans-serif;
    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(--white, #FFF);
    font-family: Roboto, sans-serif;
    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(--white, #FFF);
    font-family: Roboto, sans-serif;
    font-variation-settings: var(--fvs-heavy);
    font-size: 18px;
    font-style: normal;
    font-weight: 1000;
    line-height: 110%;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Figma: 61px below the description, 24px above the purchase card. */
    margin-top: 61px;
    margin-bottom: 0;
}

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

.w2w-product__purchase-card {
    background: #1A1D29;
    border: 1px solid var(--grey, #4F5058);
    border-radius: 12px;
    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: Roboto, sans-serif;
    font-variation-settings: var(--fvs-heavy);
    font-size: 28px;
    font-style: normal;
    font-weight: 1000 !important;
    line-height: 110%;
    letter-spacing: 1px;
    color: #34B4F4;
    text-transform: uppercase;
}

.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: #6B6C73 !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: #34B4F4 !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: Roboto, sans-serif;
    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(--white, #FFF);
    font-family: Roboto, sans-serif;
    font-variation-settings: var(--fvs-heavy);
    font-size: 14px;
    font-style: normal;
    font-weight: 1000;
    line-height: 140%;
    letter-spacing: 1px;
    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: 12px;
    border: 1px solid var(--grey, #4F5058);
    background: var(--background-color, #1A1D29);
    cursor: pointer;
    transition: border-color 0.2s;
}

.w2w-product__option:hover {
    border-color: #9A9BA1;
}

.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: 90px;
    border: 1px solid var(--grey, #4F5058);
    background: var(--Grey, #0D0F15);
    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: #34B4F4;
}

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

.w2w-product__option-label {
    color: var(--white, #FFF);
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.w2w-product__option-freq {
    font-size: 14px;
    font-weight: 400;
    color: #9A9BA1;
    margin-left: auto;
}

/* Frequency dropdown — Figma: a full-width box on the right of the Subscribe
   row (bg #1A1D29, 1px #4F5058, 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(--grey, #4F5058);
    background-color: var(--background-color, #1A1D29) !important;
    color: var(--white, #FFF) !important;
    font-family: Roboto, sans-serif;
    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: 13px;
    color: #34B4F4;
}

/* 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: #14161D;
}

.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: var(--white, #FFF) !important;
    font-family: Roboto, sans-serif !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: 40px;
    border: 1px solid var(--blue, #34B4F4) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--blue, #34B4F4) !important;
    font-family: Roboto, sans-serif !important;
    font-variation-settings: var(--fvs-heavy) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 1000 !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: 40px;
    background: var(--Light-blue, #95D8F9) !important;
    background-color: var(--Light-blue, #95D8F9) !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(--grey, #4F5058) !important;
    border-color: var(--grey, #4F5058) !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: 90px !important;
    border: 1px solid var(--grey, #4F5058) !important;
    background: var(--Grey, #0D0F15) !important;
    background-color: var(--Grey, #0D0F15) !important;
    color: var(--blue, #34B4F4) !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(--blue, #34B4F4) !important;
    color: var(--Light-blue, #95D8F9) !important;
}

.w2w-product__wishlist a.added {
    color: var(--Light-blue, #95D8F9) !important;
    border-color: var(--blue, #34B4F4) !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(--blue, #34B4F4);
    color: #0D0F15;
    font-family: Roboto, sans-serif;
    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(--blue, #34B4F4);
}

/* 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: 16px 40px;
    border-radius: 40px;
    border: none !important;
    background: var(--blue, #34B4F4) !important;
    background-color: var(--blue, #34B4F4) !important;
    color: var(--background-color, #1A1D29) !important;
    font-family: Roboto, sans-serif !important;
    font-variation-settings: var(--fvs-heavy) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 1000 !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__buy-now:hover {
    background: var(--Light-blue, #95D8F9) !important;
    background-color: var(--Light-blue, #95D8F9) !important;
    color: #000 !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: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 90px;
}

.w2w-product__sale-flash {
    left: 16px;
    background: var(--blue, #34B4F4);
    color: #0D0F15;
}

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

.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: 90px;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.w2w-product__gallery-main .product-labels .onsale {
    background: var(--blue, #34B4F4);
    color: #0D0F15;
}

.w2w-product__gallery-main .product-labels .out-of-stock {
    background: #E5616B;
    color: #FFF;
}

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

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

.w2w-product__rating .star-rating {
    color: #FFB800;
}

.w2w-product__rating .woocommerce-review-link {
    color: #9A9BA1;
    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: #9A9BA1;
}

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

.w2w-product .product_meta a {
    color: var(--blue, #34B4F4);
    text-decoration: none;
}

.w2w-product .product_meta a:hover {
    color: var(--Light-blue, #95D8F9);
}

/* After CTA content */
.w2w-product .wd-after-add-to-cart {
    margin-top: 16px;
    font-size: 14px;
    color: #9A9BA1;
}

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

.w2w-product__native-form {
    background: #1A1D29;
    border: 1px solid var(--grey, #4F5058);
    border-radius: 12px;
    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: 16px 40px !important;
    border-radius: 40px !important;
    border: 1px solid var(--blue, #34B4F4) !important;
    background: transparent !important;
    color: var(--blue, #34B4F4) !important;
    font-family: Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    line-height: 120% !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: center;
    box-shadow: none !important;
}

.w2w-product__native-form .single_add_to_cart_button:hover {
    background: var(--Light-blue, #95D8F9) !important;
    color: #000 !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: 16px 40px !important;
    border-radius: 40px !important;
    border: none !important;
    background: var(--blue, #34B4F4) !important;
    color: var(--background-color, #1A1D29) !important;
    font-family: Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    line-height: 120% !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: center;
    box-shadow: none !important;
}

.w2w-product__native-form .wd-buy-now-btn:hover {
    background: var(--Light-blue, #95D8F9) !important;
    color: #000 !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: #C4C4C8;
    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: 12px;
    }

    .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: 16px 40px;
        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: Roboto, sans-serif;
    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: Roboto, sans-serif;
    font-variation-settings: var(--fvs-heavy);
    font-size: 14px;
    font-weight: 1000;
    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: #C4C4C8;
    font-family: Roboto, sans-serif;
    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: 12px;
    border: 1px solid var(--grey, #4F5058);
    background: var(--Grey, #0D0F15);
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.w2w-product__oos button,
.w2w-product__oos .button {
    width: 100%;
    padding: 16px 40px !important;
    border-radius: 40px !important;
    border: none !important;
    background: var(--blue, #34B4F4) !important;
    color: #0D0F15 !important;
    font-family: Roboto, sans-serif !important;
    font-variation-settings: var(--fvs-heavy);
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer;
}

.w2w-product__oos button:hover,
.w2w-product__oos .button:hover {
    background: var(--Light-blue, #95D8F9) !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 #0D0F15 (was #1A1D29), while the boxes/inputs that read
       --darker-blue (#0D0F15) now render in #1A1D29. Brand blue (#34B4F4) on the
       heading/stars/bars/submit is intentionally left untouched. */
    background: #0D0F15;
    margin-top: 60px;
    padding: 60px 0;
    color: #fff;

    --darker-blue: #1A1D29;
}

/* 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;
}

/*
 * Review-specific styling intentionally lives elsewhere, not here.
 *
 * The reviews markup is rendered via woodmart_shortcode_single_product_reviews()
 * (see templates/template-single-product.php), which wraps it in
 * `.wd-single-reviews` and enqueues Woodmart's review CSS parts
 * (woo-single-prod-el-reviews*, mod-comments). The list, rating summary,
 * progress bars, sorting, star-rating input and review form are therefore
 * styled by Woodmart + our `.wd-single-reviews` rules in style.css — the
 * single source of truth for review styling.
 *
 * `.w2w-product__reviews` above only positions the section full-width below
 * the hero; do NOT re-add `.w2w-product__reviews .commentlist/.comment-form/…`
 * rules here, or they will fight the `.wd-single-reviews` styling again.
 */

/* ==========================================================================
   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(--blue, #34B4F4) !important;
    font-family: Roboto, sans-serif;
    font-variation-settings: var(--fvs-heavy);
    font-size: 28px;
    font-weight: 1000;
    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 ~#0D0F15
       instead of the design's #1A1D29. */
    background-color: #1A1D29 !important;
    background-image: none !important;
    border: 1px solid var(--grey, #4F5058);
    border-radius: 12px;
    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: #1A1D29 !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(--blue, #34B4F4);
    }
}

/* 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: var(--white, #FFF);
    font-family: Roboto, sans-serif;
    font-variation-settings: var(--fvs-heavy);
    /* !important to beat the theme's global `h3 { font-size: … !important }`. */
    font-size: 18px !important;
    font-weight: 1000 !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(--blue, #34B4F4);
}

.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(--blue, #34B4F4) !important;
    font-family: Roboto, sans-serif !important;
    font-variation-settings: var(--fvs-heavy);
    font-size: 18px !important;
    font-weight: 1000 !important;
    line-height: 1.1 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.w2w-suggested__product-price del,
.w2w-suggested__product-price del * {
    color: #6B6C73 !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(--blue, #34B4F4) !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(--Light-blue, #95D8F9) !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;
    }
}