/* =========================================================
   SPADE — PRODUCT PAGE
   ========================================================= */

.single-product .site-main {
    padding: 0;
}

.spade-product-page {
    background: #ffffff;
    color: #111111;
}

.spade-product-shell {
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: 24px clamp(18px, 3vw, 42px) 80px;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.spade-product-breadcrumb {
    margin: 0 0 28px;

    color: #7a7a7a;

    font-size: 12px;
    line-height: 1.5;
}

.spade-product-breadcrumb a {
    color: #7a7a7a;
}


/* Hide Blocksy breadcrumb / page hero */

.single-product .ct-breadcrumbs,
.single-product .hero-section {
    display: none !important;
}

.single-product #main-container,
.single-product .site-main > .ct-container-full,
.single-product .site-main > .ct-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* =========================================================
   MAIN PRODUCT GRID
   ========================================================= */

.spade-product-main {
    display: grid;

    grid-template-columns:
        minmax(0, 2.35fr)
        minmax(360px, 0.75fr);

    gap: clamp(28px, 2.5vw, 38px);

    align-items: start;
}


/* =========================================================
   EDITORIAL PRODUCT GALLERY
   ========================================================= */

.spade-product-gallery {
    min-width: 0;
}

.spade-product-gallery--editorial {
    width: 100%;
}

.spade-product-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 4px;
}


/* Media tile */

.spade-product-media-item {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: #f7f7f7;
}


/* Images */

.spade-product-media-item img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    object-fit: unset;
}


/* Video */

.spade-product-media-item--video {
    background: #f3f3f3;
}

.spade-product-media-item video {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 100%;

    object-fit: cover;

    background: #f3f3f3;
}


/* Wishlist floating on first image */

.spade-product-gallery__wishlist {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 5;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);
    color: #111111;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.spade-product-gallery__wishlist:hover {
    transform: scale(1.06);

    background: #ffffff;
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.spade-product-info {
    position: sticky;

    top: 30px;

    align-self: start;
}


/* =========================================================
   PRODUCT BRAND + TITLE
   ========================================================= */

.spade-product-heading {
    width: 100%;
    max-width: 680px;
    margin: 0;
    padding: 0;
}


/* Large brand name */

.spade-product-heading__brand {
    margin: 0 0 8px;

    color: #111111;

    font-family: var(--spade-font-heading);
    font-size: clamp(46px, 3.6vw, 66px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.035em;

    text-align: left;
}


/* Smaller product name */

.spade-product-title {
    width: 100%;
    max-width: 650px;

    margin: 0;

    color: #111111;

    font-family: var(--spade-font-heading);
    font-size: clamp(28px, 2.15vw, 38px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;

    text-align: left;
}


/* Tablet */

@media (max-width: 999px) {

    .spade-product-heading__brand {
        font-size: clamp(42px, 7vw, 58px);
    }

    .spade-product-title {
        font-size: clamp(28px, 5vw, 36px);
    }
}


/* Mobile */

@media (max-width: 600px) {

    .spade-product-heading {
        max-width: 100%;
    }

    .spade-product-heading__brand {
        margin-bottom: 6px;

        font-size: 40px;
        line-height: 0.98;
    }

    .spade-product-title {
        max-width: 100%;

        font-size: 27px;
        line-height: 1.08;
    }
}

/* =========================================================
   META
   ========================================================= */

.spade-product-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-top: 24px;

    font-size: 12px;
}

.spade-product-rating {
    display: flex;
    align-items: center;

    gap: 8px;
}

.spade-product-sku {
    color: #666666;
}


/* =========================================================
   PRICE
   ========================================================= */

.spade-product-price {
    margin-top: 28px;

    color: #111111;

    font-size: 28px;
    font-weight: 700;
}


/* =========================================================
   BNPL — MINTPAY + KOKO
   ========================================================= */

.spade-bnpl {
    margin-top: 10px;
}

.spade-bnpl__text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px;

    color: #555555;

    font-size: 14px;
    line-height: 1.5;
}

.spade-bnpl__text strong {
    color: #111111;

    font-weight: 700;
}

.spade-bnpl__providers {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 10px;
}

.spade-bnpl__provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;

    line-height: 0;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.spade-bnpl__provider:hover {
    opacity: 0.75;

    transform: translateY(-1px);
}

.spade-bnpl__provider img {
    display: block;

    width: auto !important;
    max-width: none !important;

    object-fit: contain;
}

.spade-bnpl__mintpay {
    height: 21px !important;
}

.spade-bnpl__koko {
    height: 19px !important;
}


/* =========================================================
   SHORT DESCRIPTION
   ========================================================= */

.spade-product-short {
    max-width: 520px;

    margin-top: 24px;

    color: #555555;

    font-size: 14px;
    line-height: 1.75;
}

.spade-product-short p {
    margin: 0;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.spade-product-option {
    margin-top: 30px;
}

.spade-product-option__label {
    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================================
   QUANTITY
   ========================================================= */

.spade-product-quantity {
    width: 128px;
    height: 48px;

    display: grid;
    grid-template-columns: 40px 1fr 40px;

    border: 1px solid #dedede;
    background: #ffffff;
}

.spade-product-quantity button {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: #ffffff !important;
    color: #111111 !important;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}

.spade-product-quantity input.spade-qty-input {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: #ffffff !important;
    color: #111111 !important;

    font-family: var(--spade-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    text-align: center;

    opacity: 1 !important;

    -webkit-text-fill-color: #111111 !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Remove browser number arrows */

.spade-product-quantity input.spade-qty-input::-webkit-inner-spin-button,
.spade-product-quantity input.spade-qty-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}


/* =========================================================
   PURCHASE BUTTONS
   ========================================================= */

.spade-product-buy {
    margin-top: 30px;
}

.spade-product-add {
    width: 100%;
    min-height: 54px;

    border: 1px solid #111111;

    background: #111111;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.spade-product-add:hover {
    background: #ffffff;
    color: #111111;
}

.spade-product-wishlist-btn {
    width: 100%;
    min-height: 50px;

    margin-top: 10px;

    border: 1px solid #bfbfbf;

    background: #ffffff;
    color: #111111;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    cursor: pointer;
}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.spade-product-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-top: 28px;
    padding-top: 22px;

    border-top: 1px solid #eeeeee;
}

.spade-product-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    min-width: 0;

    text-align: center;
}

.spade-product-trust__icon {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.spade-product-trust__icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: #e5006d;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spade-product-trust__text {
    min-width: 0;
}

.spade-product-trust__text strong {
    display: block;

    color: #111111;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;

    text-align: center;
}

.spade-product-trust__text span {
    display: block;

    margin-top: 3px;

    color: #777777;

    font-size: 10px;
    line-height: 1.4;

    text-align: center;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 999px) {

    .spade-product-main {
        display: block;
    }

    /*
     * Gallery becomes horizontal swipe
     */

    .spade-product-media-grid {
        display: flex;

        overflow-x: auto;

        gap: 3px;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .spade-product-media-grid::-webkit-scrollbar {
        display: none;
    }

    .spade-product-media-item {
        flex: 0 0 88%;

        scroll-snap-align: start;
    }

    .spade-product-media-item video {
        height: 100%;
    }

    .spade-product-info {
        position: static;

        margin-top: 32px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .spade-product-shell {
        padding-inline: 14px;
        padding-bottom: 60px;
    }

    .spade-product-breadcrumb {
        margin-bottom: 20px;

        font-size: 11px;
    }

    .spade-product-media-item {
        flex-basis: 92%;
    }

    .spade-product-gallery__wishlist {
        top: 14px;
        right: 14px;

        width: 40px;
        height: 40px;

        font-size: 22px;
    }
.spade-product-meta-row {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    .spade-product-price {
        font-size: 24px;
    }

    .spade-bnpl__text {
        font-size: 13px;
    }

    .spade-bnpl__providers {
        gap: 10px;
    }

    .spade-bnpl__mintpay {
        height: 19px !important;
    }

    .spade-bnpl__koko {
        height: 17px !important;
    }

    .spade-product-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px 12px;
    }


}


/* =========================================================
   SPADE — VARIABLE PRODUCT / COLOR SWATCHES
   ========================================================= */

/*
 * Premium circular colour selector.
 *
 * JS/PHP can set:
 * --spade-swatch-color: #hex;
 *
 * Existing image-based swatches are still supported as a
 * fallback, but colour variations can now display as circles.
 */

.spade-variation-swatches {
    margin-top: 26px;
    margin-bottom: 22px;
}

.spade-variation-group + .spade-variation-group {
    margin-top: 24px;
}

.spade-variation-group {
    position: relative;
}

.spade-variation-group__label {
    margin-bottom: 14px;

    color: #111111;

    font-family: var(--spade-font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;

    text-transform: lowercase;
}

.spade-variation-group__label strong {
    margin-left: 5px;

    color: #666666;

    font-weight: 500;
    text-transform: none;
}


/* Swatch row */

.spade-variation-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    min-height: 58px;
}


/* =========================================================
   CIRCULAR SWATCH
   ========================================================= */

.spade-variation-swatch {
    position: relative;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    margin: 0;
    padding: 0;

    overflow: visible;

    border: 2px solid transparent !important;
    border-radius: 50% !important;

    background:
        var(--spade-swatch-color, #e4e4e4) !important;

    color: #111111 !important;

    cursor: pointer;

    box-shadow:
        0 0 0 1px rgba(17, 17, 17, 0.06);

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}


/* Hover */

.spade-variation-swatch:hover {
    border-color: rgba(215, 0, 109, 0.45) !important;

    transform: translateY(-1px);

    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 5px rgba(215, 0, 109, 0.35);
}


/* Selected */

.spade-variation-swatch.is-active,
.spade-variation-swatch[aria-pressed="true"] {
    border-color: #d7006d !important;

    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 5px #d7006d;
}


/* Pink underline under selected swatch */

.spade-variation-swatch.is-active::after,
.spade-variation-swatch[aria-pressed="true"]::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -13px;

    width: 34px;
    height: 3px;

    border-radius: 999px;

    background: #d7006d;

    transform: translateX(-50%);
}


/* =========================================================
   EXISTING SWATCH IMAGES — FALLBACK SUPPORT
   ========================================================= */

.spade-variation-swatch img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    border-radius: 50%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
}


/*
 * Text fallback.
 * JS can keep the text for accessibility while visually
 * hiding it inside the circular colour button.
 */

.spade-variation-swatch > span:not(.spade-swatch-arrow) {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}


/* =========================================================
   TOOLTIP
   ========================================================= */

/*
 * Recommended:
 * data-label="Khaki"
 *
 * Example:
 * <button class="spade-variation-swatch"
 *         data-label="Khaki">
 */

.spade-variation-swatch[data-label]::before {
    content: attr(data-label);

    position: absolute;

    left: 50%;
    bottom: calc(100% + 16px);

    z-index: 50;

    padding: 8px 12px;

    border-radius: 2px;

    background: #1b1b1b;
    color: #ffffff;

    font-family: var(--spade-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(4px);

    transition:
        opacity 0.16s ease,
        visibility 0.16s ease,
        transform 0.16s ease;
}


/* Tooltip arrow */

.spade-variation-swatch[data-label] .spade-swatch-arrow {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 10px);

    z-index: 49;

    width: 10px;
    height: 10px;

    background: #1b1b1b;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        rotate(45deg);

    transition:
        opacity 0.16s ease,
        visibility 0.16s ease;
}


/* Show tooltip on hover */

.spade-variation-swatch[data-label]:hover::before,
.spade-variation-swatch[data-label]:focus-visible::before,
.spade-variation-swatch[data-label]:hover .spade-swatch-arrow,
.spade-variation-swatch[data-label]:focus-visible .spade-swatch-arrow {
    opacity: 1;
    visibility: visible;
}

.spade-variation-swatch[data-label]:hover::before,
.spade-variation-swatch[data-label]:focus-visible::before {
    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   DISABLED / UNAVAILABLE
   ========================================================= */

.spade-variation-swatch.is-disabled,
.spade-variation-swatch:disabled {
    opacity: 0.28;

    cursor: not-allowed;

    filter: grayscale(0.15);

    transform: none !important;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.spade-variation-swatch:focus {
    outline: none;
}

.spade-variation-swatch:focus-visible {
    outline: 2px solid #d7006d;
    outline-offset: 5px;
}


/* =========================================================
   VARIATION CLEAR BUTTON
   ========================================================= */

.spade-variation-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    padding: 2px 0;
    border: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid currentColor !important;
    color: #d7006d !important;
    font-family: var(--spade-font-body, "Manrope", Arial, sans-serif);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 180ms ease;
}

.spade-variation-clear:hover,
.spade-variation-clear:focus-visible {
    color: #111111 !important;
}

.spade-variation-clear[hidden] {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .spade-variation-swatches {
        margin-top: 22px;
        margin-bottom: 20px;
    }

    .spade-variation-group__label {
        margin-bottom: 12px;

        font-size: 14px;
    }

    .spade-variation-options {
        gap: 14px;

        min-height: 52px;
    }

    .spade-variation-swatch {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .spade-variation-swatch.is-active::after,
    .spade-variation-swatch[aria-pressed="true"]::after {
        bottom: -11px;

        width: 29px;
    }
}


/* =========================================================
   WOOCOMMERCE NATIVE VARIATION FORM
   ========================================================= */

.spade-product-purchase {
    margin-top: 22px;
}

.spade-product-purchase form.cart {
    margin: 0;
}

/* Keep WooCommerce variation engine working,
   but hide the default attribute rows when our
   image swatches are present. */
.spade-variation-swatches + .spade-product-purchase
.variations {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}

/* Remove default "Clear" link from visual layout */
.spade-variation-swatches + .spade-product-purchase
.reset_variations {
    display: none !important;
}

/* Selected variation price / availability */
.spade-product-purchase .single_variation_wrap {
    margin-top: 16px;
}

.spade-product-purchase .woocommerce-variation-price {
    margin-bottom: 8px;

    color: #111111;

    font-family: var(--spade-font-body);
    font-size: 18px;
    font-weight: 700;
}

.spade-product-purchase .woocommerce-variation-availability {
    margin-bottom: 12px;

    font-family: var(--spade-font-body);
    font-size: 13px;
}

/* Quantity + cart row */
.spade-product-purchase
.woocommerce-variation-add-to-cart,
.spade-product-purchase
form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

    gap: 10px;

    margin-top: 16px;
}

/* WooCommerce native quantity */
.spade-product-purchase .quantity {
    display: flex;
    align-items: center;

    margin: 0 !important;
}

.spade-product-purchase .quantity .qty {
    width: 72px;
    min-height: 52px;

    margin: 0;
    padding: 0 10px;

    border: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-family: var(--spade-font-body);
    font-size: 14px;
    font-weight: 500;

    text-align: center;

    -webkit-text-fill-color: #111111 !important;
}

/* Native WooCommerce Add to Cart */
.spade-product-purchase .single_add_to_cart_button {
    flex: 1 1 220px;

    min-height: 52px;

    margin: 0 !important;
    padding: 0 28px !important;

    border: 1px solid #111111 !important;
    border-radius: 0 !important;

    background: #111111 !important;
    color: #ffffff !important;

    font-family: var(--spade-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    opacity: 1;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}

.spade-product-purchase .single_add_to_cart_button:hover {
    background: #ffffff !important;
    color: #111111 !important;
}

.spade-product-purchase .single_add_to_cart_button.disabled,
.spade-product-purchase .single_add_to_cart_button.wc-variation-selection-needed {
    background: #aaaaaa !important;
    border-color: #aaaaaa !important;
    color: #ffffff !important;

    cursor: not-allowed;
}


/* =========================================================
   VARIABLE PRODUCT — MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .spade-variation-swatch {
        width: 62px;
        height: 74px;
    }

    .spade-product-purchase
    .woocommerce-variation-add-to-cart,
    .spade-product-purchase
    form.cart:not(.variations_form) {
        gap: 8px;
    }

    .spade-product-purchase .quantity .qty {
        width: 64px;
    }

    .spade-product-purchase .single_add_to_cart_button {
        flex-basis: calc(100% - 72px);
    }
}


/* =========================================================
   SPADE — RESPONSIVE ADD TO CART LAYOUT
   ========================================================= */

/*
 * Let WooCommerce purchase controls adapt naturally:
 * - variation selectors occupy their own row
 * - quantity stays compact
 * - Add to Cart fills the remaining width
 * - on narrow screens Add to Cart becomes full width
 */

.spade-product-purchase {
    width: 100%;
}

.spade-product-purchase form.cart,
.spade-product-purchase .variations_form,
.spade-product-purchase .single_variation_wrap {
    width: 100%;
}

/* Variation selectors always get full available width */
.spade-product-purchase table.variations {
    width: 100%;
    margin: 0 0 16px;
}

/* Cart controls */
.spade-product-purchase .woocommerce-variation-add-to-cart,
.spade-product-purchase form.cart:not(.variations_form) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;

    width: 100%;
    margin-top: 16px;
}

/* Quantity remains compact */
.spade-product-purchase .quantity {
    width: auto;
    margin: 0 !important;
}

.spade-product-purchase .quantity .qty {
    width: 76px;
    height: 54px;
    min-height: 54px;
}

/* Add to Cart fills the rest of the product-info column */
.spade-product-purchase .single_add_to_cart_button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px;

    margin: 0 !important;
    padding: 0 24px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
}

/* When WooCommerce outputs only a button, allow full width */
.spade-product-purchase form.cart:not(.variations_form)
.single_add_to_cart_button:only-child {
    grid-column: 1 / -1;
}

/* Full-width cart button for products without visible quantity */
.spade-product-purchase .woocommerce-variation-add-to-cart
.single_add_to_cart_button:first-child:last-child {
    grid-column: 1 / -1;
}

/* Keep disabled state full size too */
.spade-product-purchase .single_add_to_cart_button.disabled,
.spade-product-purchase .single_add_to_cart_button.wc-variation-selection-needed {
    width: 100% !important;
}


/* Tablet / narrower product-info columns */
@media (max-width: 1200px) and (min-width: 1000px) {

    .spade-product-purchase .woocommerce-variation-add-to-cart,
    .spade-product-purchase form.cart:not(.variations_form) {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .spade-product-purchase .quantity .qty {
        width: 70px;
    }
}


/* Mobile */
@media (max-width: 600px) {

    .spade-product-purchase .woocommerce-variation-add-to-cart,
    .spade-product-purchase form.cart:not(.variations_form) {
        grid-template-columns: 1fr;
    }

    .spade-product-purchase .quantity {
        width: 100%;
    }

    .spade-product-purchase .quantity .qty {
        width: 100%;
    }

    .spade-product-purchase .single_add_to_cart_button {
        width: 100% !important;
        min-height: 56px;
    }
}

/* =========================================================
   SPADE — FINAL QUANTITY + ADD TO CART (50 / 50)
   ========================================================= */

/*
 * Blocksy renders both controls inside:
 *
 * .ct-cart-actions
 *   ├─ .quantity
 *   └─ .single_add_to_cart_button
 *
 * Keep both controls on the same row and give each exactly
 * half of the available purchase width.
 */

.single-product
.spade-product-purchase
.ct-cart-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;

    align-items: stretch !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   QUANTITY — LEFT 50%
   ========================================================= */

.single-product
.spade-product-purchase
.ct-cart-actions > .quantity {
    display: grid !important;

    grid-template-columns:
        minmax(42px, 1fr)
        minmax(44px, 1fr)
        minmax(42px, 1fr) !important;

    grid-column: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;

    background: #ffffff !important;

    overflow: hidden !important;
}


/* Hide Blocksy's duplicate quantity controls */

.single-product
.spade-product-purchase
.ct-cart-actions
.quantity > .ct-increase,

.single-product
.spade-product-purchase
.ct-cart-actions
.quantity > .ct-decrease {
    display: none !important;
}


/* Minus */

.single-product
.spade-product-purchase
.ct-cart-actions
.spade-product-qty-minus {
    grid-column: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-right: 1px solid #eeeeee !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}


/* Quantity number */

.single-product
.spade-product-purchase
.ct-cart-actions
.quantity > input.qty {
    grid-column: 2 !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: #ffffff !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-family: var(--spade-font-body, "Manrope", Arial, sans-serif);
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 52px !important;

    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    appearance: textfield !important;
    -moz-appearance: textfield !important;
}


/* Remove browser number arrows */

.single-product
.spade-product-purchase
.ct-cart-actions
.quantity > input.qty::-webkit-inner-spin-button,

.single-product
.spade-product-purchase
.ct-cart-actions
.quantity > input.qty::-webkit-outer-spin-button {
    margin: 0 !important;
    -webkit-appearance: none !important;
}


/* Plus */

.single-product
.spade-product-purchase
.ct-cart-actions
.spade-product-qty-plus {
    grid-column: 3 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #eeeeee !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}


/* Quantity button hover */

.single-product
.spade-product-purchase
.ct-cart-actions
.spade-product-qty-minus:hover,

.single-product
.spade-product-purchase
.ct-cart-actions
.spade-product-qty-plus:hover {
    background: #f7f7f7 !important;
}


/* =========================================================
   ADD TO CART — RIGHT 50%
   ========================================================= */

.single-product
.spade-product-purchase
.ct-cart-actions >
.single_add_to_cart_button {
    grid-column: 2 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 1px solid #111111 !important;
    border-radius: 0 !important;

    background: #111111 !important;
    color: #ffffff !important;

    font-family: var(--spade-font-body, "Manrope", Arial, sans-serif);
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;

    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.single-product
.spade-product-purchase
.ct-cart-actions >
.single_add_to_cart_button:hover {
    background: #ffffff !important;
    color: #111111 !important;
}


/* Disabled variation state */

.single-product
.spade-product-purchase
.ct-cart-actions >
.single_add_to_cart_button.disabled,

.single-product
.spade-product-purchase
.ct-cart-actions >
.single_add_to_cart_button.wc-variation-selection-needed {
    background: #aaaaaa !important;
    border-color: #aaaaaa !important;
    color: #ffffff !important;

    cursor: not-allowed !important;
}


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

@media (max-width: 600px) {

    .single-product
    .spade-product-purchase
    .ct-cart-actions {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 8px !important;
    }


    .single-product
    .spade-product-purchase
    .ct-cart-actions > .quantity,

    .single-product
    .spade-product-purchase
    .ct-cart-actions >
    .single_add_to_cart_button {
        height: 50px !important;
        min-height: 50px !important;
    }


    .single-product
    .spade-product-purchase
    .ct-cart-actions
    .spade-product-qty-minus,

    .single-product
    .spade-product-purchase
    .ct-cart-actions
    .spade-product-qty-plus,

    .single-product
    .spade-product-purchase
    .ct-cart-actions
    .quantity > input.qty {
        height: 48px !important;
        min-height: 48px !important;
    }


    .single-product
    .spade-product-purchase
    .ct-cart-actions
    .quantity > input.qty {
        line-height: 48px !important;
        font-size: 14px !important;
    }


    .single-product
    .spade-product-purchase
    .ct-cart-actions >
    .single_add_to_cart_button {
        padding-inline: 10px !important;

        font-size: 11px !important;
        letter-spacing: 0.05em !important;
    }
}


/* Extra-small phones:
   keep the 50/50 row, but reduce typography slightly. */

@media (max-width: 380px) {

    .single-product
    .spade-product-purchase
    .ct-cart-actions {
        gap: 6px !important;
    }


    .single-product
    .spade-product-purchase
    .ct-cart-actions
    .spade-product-qty-minus,

    .single-product
    .spade-product-purchase
    .ct-cart-actions
    .spade-product-qty-plus {
        font-size: 16px !important;
    }


    .single-product
    .spade-product-purchase
    .ct-cart-actions >
    .single_add_to_cart_button {
        padding-inline: 6px !important;

        font-size: 10px !important;
        letter-spacing: 0.03em !important;
    }
}

/* =========================================================
   SPADE — THE DETAILS / LIFESTYLE SECTION
   ========================================================= */

.spade-product-details-section {
    display: block !important;
    clear: both;
    width: 100%;
    margin-top: 84px;
    background: #ffffff;
    color: #111111;
}

.spade-product-details-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding-inline: clamp(0px, 2vw, 20px);
}

.spade-product-details-title {
    display: block !important;

    margin: 0 0 30px;

    color: #111111 !important;

    font-family: var(--spade-font-heading, Georgia, serif);
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;

    text-align: center;
}

.spade-product-accordions {
    display: block !important;
    width: 100%;
    border-top: 1px solid #e8e8e8;
}

.spade-product-accordion {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
}

.spade-product-accordion summary {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 0;
    color: #111111 !important;
    font-family: var(--spade-font-body, Arial, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    list-style: none;
}

.spade-product-accordion summary::-webkit-details-marker {
    display: none;
}

.spade-accordion-icon {
    flex: 0 0 auto;
    color: #111111;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease;
}

.spade-product-accordion[open] .spade-accordion-icon {
    transform: rotate(45deg);
}

.spade-product-accordion__content {
    max-width: 800px;
    padding: 0 0 24px;
    color: #555555;
    font-family: var(--spade-font-body, Arial, sans-serif);
    font-size: 14px;
    line-height: 1.8;
}

.spade-product-accordion__content p {
    margin: 0 0 12px;
}

.spade-product-accordion__content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SPADE — PRODUCT LIFESTYLE MEDIA
   Supports either IMAGE or VIDEO
   ========================================================= */

.spade-product-lifestyle {
    display: block !important;

    width: 100%;
    max-width: 1600px;

    margin: 70px auto 0;

    overflow: hidden;

    background: #f7f7f7;
}


/*
 * Image + video use the same responsive presentation.
 */
.spade-product-lifestyle img,
.spade-product-lifestyle video,
.spade-product-lifestyle__image,
.spade-product-lifestyle__video {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    aspect-ratio: 16 / 9;

    object-fit: cover;
    object-position: center;

    border: 0;
}


/*
 * Lifestyle video
 *
 * Video is intentionally muted/autoplayed/looped by the
 * product template. pointer-events:none keeps this acting
 * like an editorial lifestyle banner rather than a player.
 */
.spade-product-lifestyle video,
.spade-product-lifestyle__video {
    background: #000000;

    pointer-events: none;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1000px) {

    .spade-product-lifestyle img,
    .spade-product-lifestyle video,
    .spade-product-lifestyle__image,
    .spade-product-lifestyle__video {
        min-height: 620px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 999px) {

    .spade-product-lifestyle {
        margin-top: 55px;
    }

    .spade-product-lifestyle img,
    .spade-product-lifestyle video,
    .spade-product-lifestyle__image,
    .spade-product-lifestyle__video {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .spade-product-details-section {
        margin-top: 56px;
    }

    .spade-product-details-inner {
        padding-inline: 0;
    }

    .spade-product-details-title {
        margin-bottom: 22px;
        font-size: 36px;
    }

    .spade-product-accordion summary {
        padding: 18px 0;
        font-size: 12px;
    }

    .spade-product-accordion__content {
        font-size: 13px;
    }

    .spade-product-lifestyle {
        margin-top: 44px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .spade-product-lifestyle {
        margin-top: 42px;
    }

    .spade-product-lifestyle img,
    .spade-product-lifestyle video,
    .spade-product-lifestyle__image,
    .spade-product-lifestyle__video {
        aspect-ratio: 4 / 5;

        min-height: 0;

        object-fit: cover;
        object-position: center;
    }

}


/* =========================================================
   SPADE — YOU MAY ALSO LIKE
   ========================================================= */

.spade-related-products {
    width: 100%;
    margin-top: 96px;
    padding-top: 54px;
    border-top: 1px solid #e8e8e8;
}

.spade-related-products__header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 34px;
}

.spade-related-products__title {
    margin: 0;
    color: #111111;
    font-family: var(--spade-font-heading, Georgia, serif);
    font-size: clamp(28px, 2.4vw, 38px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-align: center;
}

.spade-related-products__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}

.spade-related-card {
    min-width: 0;
}

.spade-related-card__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f7f7f7;
}

.spade-related-card__image-link {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.spade-related-card__image-link img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.spade-related-card:hover .spade-related-card__image-link img {
    transform: scale(1.025);
}

.spade-related-card__wishlist {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #111111;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.spade-related-card__wishlist:hover {
    transform: scale(1.06);
    background: #ffffff;
}

.spade-related-card__content {
    padding-top: 15px;
}

.spade-related-card__brand {
    margin: 0 0 6px;
    color: #777777;
    font-family: var(--spade-font-body, Arial, sans-serif);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.spade-related-card__name {
    margin: 0;
    font-family: var(--spade-font-body, Arial, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.spade-related-card__name a {
    color: #111111;
    text-decoration: none;
}

.spade-related-card__name a:hover {
    opacity: 0.65;
}

.spade-related-card__price {
    margin-top: 7px;
    color: #111111;
    font-family: var(--spade-font-body, Arial, sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.spade-related-card__price del {
    margin-right: 6px;
    color: #8a8a8a;
    font-weight: 400;
}

.spade-related-card__price ins {
    color: #111111;
    text-decoration: none;
}


/* Tablet */

@media (max-width: 999px) {

    .spade-related-products {
        margin-top: 72px;
        padding-top: 44px;
    }

    .spade-related-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 14px;
    }
}


/* Mobile — horizontal product rail */

@media (max-width: 600px) {

    .spade-related-products {
        margin-top: 58px;
        padding-top: 38px;
    }

    .spade-related-products__header {
        margin-bottom: 24px;
    }

    .spade-related-products__title {
        font-size: 27px;
    }

    .spade-related-products__grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .spade-related-products__grid::-webkit-scrollbar {
        display: none;
    }

    .spade-related-card {
        flex: 0 0 72%;
        scroll-snap-align: start;
    }

    .spade-related-card__wishlist {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 19px;
    }

    .spade-related-card__content {
        padding-top: 12px;
    }

    .spade-related-card__name {
        font-size: 13px;
    }

    .spade-related-card__price {
        font-size: 12px;
    }
}


/* =========================================================
   SPADE — RELATED PRODUCT IMAGE + BNPL FIX
   ========================================================= */

/*
 * Product photography should be shown in full.
 * Do not crop the bag to force it into the card ratio.
 */
.spade-related-card__image-link {
    aspect-ratio: 4 / 5;
    background: #ffffff;
}

.spade-related-card__image-link img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Keep hover subtle without cutting off the product */
.spade-related-card:hover .spade-related-card__image-link img {
    transform: scale(1.015);
}


/* Mintpay + Koko beneath each related product */
.spade-related-card__bnpl {
    margin-top: 9px;
}

.spade-related-card__bnpl-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    color: #666666;

    font-family: var(--spade-font-body, Arial, sans-serif);
    font-size: 11px;
    line-height: 1.45;
}

.spade-related-card__bnpl-text strong {
    color: #111111;
    font-weight: 600;
}

.spade-related-card__bnpl-logos {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 7px;
}

.spade-related-card__bnpl-logos img {
    display: block;

    width: auto !important;
    max-width: none !important;

    object-fit: contain !important;
}

.spade-related-card__bnpl-logos img:first-child {
    height: 17px !important;
}

.spade-related-card__bnpl-logos img:last-child {
    height: 15px !important;
}


@media (max-width: 600px) {

    .spade-related-card__bnpl-text {
        font-size: 10px;
    }

    .spade-related-card__bnpl-logos img:first-child {
        height: 16px !important;
    }

    .spade-related-card__bnpl-logos img:last-child {
        height: 14px !important;
    }
}


/* =========================================================
   SPADE — RECENTLY VIEWED
   ========================================================= */

.spade-recent-products {
    width: 100%;

    margin-top: 96px;
    padding-top: 54px;

    border-top: 1px solid #e8e8e8;
}

.spade-recent-products__header {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 34px;
}

.spade-recent-products__title {
    margin: 0;

    color: #111111;

    font-family: var(--spade-font-heading, Georgia, serif);
    font-size: clamp(28px, 2.4vw, 38px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.015em;

    text-align: center;
}

.spade-recent-products__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}


/* Tablet */

@media (max-width: 999px) {

    .spade-recent-products {
        margin-top: 72px;
        padding-top: 44px;
    }

    .spade-recent-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 14px;
    }
}


/* Mobile */

@media (max-width: 600px) {

    .spade-recent-products {
        margin-top: 58px;
        padding-top: 38px;
    }

    .spade-recent-products__header {
        margin-bottom: 24px;
    }

    .spade-recent-products__title {
        font-size: 27px;
    }

    .spade-recent-products__grid {
        display: flex;
        gap: 12px;

        overflow-x: auto;

        padding-bottom: 8px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .spade-recent-products__grid::-webkit-scrollbar {
        display: none;
    }

    .spade-recent-products__grid .spade-recent-card {
        flex: 0 0 72%;
        scroll-snap-align: start;
    }
}

/* Hide WooCommerce/Blocksy default related-products section */
.single-product .related.products {
    display: none !important;
}

/* =========================================================
   SPADE — PRODUCT BADGES
   ========================================================= */

.spade-product-badges {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 8;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 6px;

    pointer-events: none;
}


/* =========================================================
   BASE BADGE
   ========================================================= */

.spade-product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding: 0 10px;

    border-radius: 3px;

    font-family:
        var(--spade-font-body, "Manrope", Arial, sans-serif);

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    white-space: nowrap;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   NEW — MAIN / LARGER BADGE
   SPADE PINK
   ========================================================= */

.spade-product-badge--new {
    min-height: 32px;

    padding: 0 15px;

    background: #E83D72;
    color: #ffffff;

    font-size: 11px;
    letter-spacing: 0.12em;

    box-shadow:
        0 3px 12px rgba(232, 61, 114, 0.22);
}


/* =========================================================
   SALE — DEEP RED
   ========================================================= */

.spade-product-badge--sale {
    background: #C62828;
    color: #ffffff;
}


/* =========================================================
   BEST SELLER — MUTED GOLD
   ========================================================= */

.spade-product-badge--best-seller {
    background: #D4A84F;
    color: #111111;
}


/* =========================================================
   TRENDING — DEEP PURPLE
   ========================================================= */

.spade-product-badge--trending {
    background: #6D4BC3;
    color: #ffffff;
}


/* =========================================================
   SOLD OUT — CHARCOAL
   ========================================================= */

.spade-product-badge--sold-out {
    background: #666666;
    color: #ffffff;
}


/* =========================================================
   PRODUCT CARD POSITIONING
   ========================================================= */

.woocommerce ul.products li.product {
    position: relative;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .spade-product-badges {
        top: 9px;
        left: 9px;

        gap: 4px;
    }

    .spade-product-badge {
        min-height: 22px;

        padding: 0 8px;

        font-size: 7px;

        border-radius: 2px;
    }

    .spade-product-badge--new {
        min-height: 28px;

        padding: 0 12px;

        font-size: 9px;
    }

}


/* =========================================================
   SPADE — FINAL PRODUCT BUY BOX REDESIGN
   Color swatches + original quantity selector
   ========================================================= */

/* ---------- COLOR VARIATION ROW ---------- */

.spade-variation-group--color {
    margin-top: 28px;
}

.spade-variation-group--color .spade-variation-group__label {
    display: flex;
    align-items: baseline;
    gap: 7px;

    margin-bottom: 16px;

    color: #111111;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;

    text-transform: lowercase;
}

.spade-variation-group--color .spade-variation-group__label strong {
    margin: 0;

    color: #333333;

    font-weight: 500;
    text-transform: none;
}

.spade-variation-group--color .spade-variation-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    padding: 5px 4px 14px;
}


/* Circular colour swatch */

.spade-variation-swatch--color {
    position: relative;

    width: 46px !important;
    height: 46px !important;

    flex: 0 0 46px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 2px solid transparent !important;
    border-radius: 50% !important;

    background:
        var(--spade-swatch-color, #dedede) !important;

    box-shadow:
        0 0 0 1px rgba(17, 17, 17, 0.06);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}


/*
 * Old design used the variation product thumbnail.
 * Hide it only for colour swatches. Other attributes can
 * continue using their existing image/text presentation.
 */
.spade-variation-swatch--color > img {
    display: none !important;
}


/* Hide fallback text visually, retain it for accessibility */

.spade-variation-swatch--color > span:not(.spade-swatch-arrow) {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}


/* Hover */

.spade-variation-swatch--color:hover {
    transform: translateY(-1px);

    border-color: rgba(215, 0, 109, .45) !important;

    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 5px rgba(215, 0, 109, .32);
}


/* Selected */

.spade-variation-swatch--color.is-active,
.spade-variation-swatch--color[aria-pressed="true"] {
    border-color: #d7006d !important;

    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 5px #d7006d;
}

.spade-variation-swatch--color.is-active::after,
.spade-variation-swatch--color[aria-pressed="true"]::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -13px;

    width: 33px;
    height: 3px;

    border-radius: 999px;

    background: #d7006d;

    transform: translateX(-50%);
}


/* Tooltip */

.spade-variation-swatch--color[data-label]::before {
    content: attr(data-label);

    position: absolute;

    left: 50%;
    bottom: calc(100% + 17px);

    z-index: 40;

    padding: 8px 11px;

    border-radius: 2px;

    background: #1b1b1b;
    color: #ffffff;

    font-family: var(--spade-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(4px);

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}

.spade-variation-swatch--color .spade-swatch-arrow {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 11px);

    z-index: 39;

    width: 10px;
    height: 10px;

    background: #1b1b1b;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        rotate(45deg);

    transition:
        opacity .16s ease,
        visibility .16s ease;
}

.spade-variation-swatch--color:hover::before,
.spade-variation-swatch--color:focus-visible::before,
.spade-variation-swatch--color:hover .spade-swatch-arrow,
.spade-variation-swatch--color:focus-visible .spade-swatch-arrow {
    opacity: 1;
    visibility: visible;
}

.spade-variation-swatch--color:hover::before,
.spade-variation-swatch--color:focus-visible::before {
    transform:
        translateX(-50%)
        translateY(0);
}


/* Unavailable */

.spade-variation-swatch--color.is-disabled,
.spade-variation-swatch--color:disabled {
    opacity: .28;

    cursor: not-allowed;

    transform: none !important;
}


/* ---------- STOCK ---------- */

.single-product .spade-product-purchase .stock,
.single-product .spade-product-purchase .woocommerce-variation-availability {
    margin: 20px 0 0 !important;

    color: #333333 !important;

    font-size: 13px;
    line-height: 1.5;
}


/* ---------- QUANTITY LABEL ---------- */

.single-product .spade-product-quantity-label {
    flex: 0 0 100%;

    margin: 18px 0 9px;

    color: #222222;

    font-family: var(--spade-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}


/* ---------- QUANTITY + ADD TO CART ROW ---------- */

.single-product .spade-product-purchase
.woocommerce-variation-add-to-cart,
.single-product .spade-product-purchase
form.cart:not(.variations_form) {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;

    gap: 10px !important;

    width: 100%;

    margin-top: 0 !important;
}


/* Original compact selector */

.single-product .spade-product-purchase
form.cart .quantity {
    display: grid !important;
    grid-template-columns: 42px 48px 42px !important;
    align-items: stretch;

    width: 132px !important;
    min-width: 132px !important;
    height: 50px !important;

    flex: 0 0 132px;

    margin: 0 !important;

    overflow: hidden;

    border: 1px solid #d9d9d9 !important;
    border-radius: 0 !important;

    background: #ffffff !important;
}


/* +/- */

.single-product .spade-product-qty-button {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 42px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: #222222 !important;

    font-family: var(--spade-font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        color .18s ease,
        background-color .18s ease;
}

.single-product .spade-product-qty-button:hover:not(:disabled) {
    background: #fafafa !important;
    color: #d7006d !important;
}

.single-product .spade-product-qty-button:disabled {
    color: #c7c7c7 !important;
    cursor: not-allowed;
}


/* Number */

.single-product .spade-product-purchase
form.cart .quantity input.qty {
    display: block !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #eeeeee !important;
    border-right: 1px solid #eeeeee !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-family: var(--spade-font-body);
    font-size: 14px !important;
    font-weight: 600;
    line-height: 48px !important;

    text-align: center;

    box-shadow: none !important;

    -webkit-text-fill-color: #111111 !important;

    appearance: textfield;
    -moz-appearance: textfield;
}

.single-product .spade-product-purchase
form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product .spade-product-purchase
form.cart .quantity input.qty::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}


/* Add to cart takes remaining width */

.single-product .spade-product-purchase
.single_add_to_cart_button {
    flex: 1 1 190px !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 50px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border: 1px solid #111111 !important;
    border-radius: 0 !important;

    background: #111111 !important;
    color: #ffffff !important;

    font-family: var(--spade-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: none;

    white-space: nowrap;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.single-product .spade-product-purchase
.single_add_to_cart_button:hover:not(.disabled) {
    background: #d7006d !important;
    border-color: #d7006d !important;
    color: #ffffff !important;
}


/* Disabled */

.single-product .spade-product-purchase
.single_add_to_cart_button.disabled,
.single-product .spade-product-purchase
.single_add_to_cart_button.wc-variation-selection-needed {
    background: #b5b5b5 !important;
    border-color: #b5b5b5 !important;
    color: #ffffff !important;

    cursor: not-allowed;
}


/* ---------- WISHLIST ---------- */

.single-product .spade-product-wishlist-btn {
    width: 100%;

    min-height: 48px;

    margin-top: 12px;

    border: 1px solid #d7006d !important;

    background: #ffffff !important;
    color: #d7006d !important;
}

.single-product .spade-product-wishlist-btn:hover {
    background: #fff7fb !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

    .spade-variation-group--color .spade-variation-options {
        gap: 14px;

        padding-bottom: 12px;
    }

    .spade-variation-swatch--color {
        width: 40px !important;
        height: 40px !important;

        flex-basis: 40px;
    }

    .spade-variation-swatch--color.is-active::after,
    .spade-variation-swatch--color[aria-pressed="true"]::after {
        bottom: -11px;

        width: 28px;
    }

    .single-product .spade-product-purchase
    .woocommerce-variation-add-to-cart,
    .single-product .spade-product-purchase
    form.cart:not(.variations_form) {
        gap: 10px !important;
    }

    .single-product .spade-product-purchase
    form.cart .quantity {
        grid-template-columns: 40px 46px 40px !important;

        width: 126px !important;
        min-width: 126px !important;

        flex-basis: 126px;
    }

    .single-product .spade-product-qty-button {
        width: 40px !important;
    }

    .single-product .spade-product-purchase
    form.cart .quantity input.qty {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
    }

    .single-product .spade-product-purchase
    .single_add_to_cart_button {
        flex: 1 1 calc(100% - 136px) !important;

        min-height: 50px !important;

        padding-inline: 16px !important;
    }

}


/* Very narrow phones: keep selector, move cart below */
@media (max-width: 390px) {

    .single-product .spade-product-purchase
    .single_add_to_cart_button {
        flex: 0 0 100% !important;

        width: 100% !important;
    }

}


/* =========================================================
   SPADE — PRODUCT BUY BOX FINAL FIX
   Smaller colour swatches + original quantity/cart row
   ========================================================= */

/* Smaller variation circles */
.spade-variation-group--color .spade-variation-options {
    gap: 15px !important;
    padding: 4px 3px 12px !important;
}

.spade-variation-swatch--color {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
}

.spade-variation-swatch--color.is-active::after,
.spade-variation-swatch--color[aria-pressed="true"]::after {
    width: 28px !important;
    bottom: -11px !important;
}

/* Make selected ring slightly finer at the smaller size */
.spade-variation-swatch--color.is-active,
.spade-variation-swatch--color[aria-pressed="true"] {
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px #d7006d !important;
}


/* Quantity label on its own row, selector + cart on same row */
.single-product .spade-product-purchase
.woocommerce-variation-add-to-cart,
.single-product .spade-product-purchase
form.cart:not(.variations_form) {
    display: grid !important;
    grid-template-columns: 154px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 9px !important;
    align-items: stretch !important;

    width: 100% !important;

    margin-top: 0 !important;
}


/* Quantity label across both columns */
.single-product .spade-product-quantity-label {
    grid-column: 1 / -1 !important;

    width: 100% !important;

    margin: 18px 0 0 !important;
}


/* Restore the original wider compact selector */
.single-product .spade-product-purchase
form.cart .quantity {
    grid-column: 1 !important;

    display: grid !important;
    grid-template-columns: 50px 54px 50px !important;

    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    height: 50px !important;

    margin: 0 !important;

    border: 1px solid #d9d9d9 !important;

    overflow: hidden !important;
}


/* Quantity number */
.single-product .spade-product-purchase
form.cart .quantity input.qty {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 48px !important;

    padding: 0 !important;

    border-left: 1px solid #eeeeee !important;
    border-right: 1px solid #eeeeee !important;
}


/* Minus / plus */
.single-product .spade-product-qty-button {
    width: 50px !important;
    height: 48px !important;

    font-size: 17px !important;
}


/*
 * Blocksy/Woo styles can add their own icon/pseudo element.
 * Remove it so our + button never appears as "++".
 */
.single-product .spade-product-qty-button::before,
.single-product .spade-product-qty-button::after {
    content: none !important;
    display: none !important;
}


/* Cart button stays beside quantity */
.single-product .spade-product-purchase
.single_add_to_cart_button {
    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 50px !important;

    margin: 0 !important;

    align-self: stretch !important;
}


/* Woo can inject hidden/variation elements — do not let them break grid */
.single-product .spade-product-purchase
.woocommerce-variation-add-to-cart > input[type="hidden"] {
    display: none !important;
}


/* Mobile */
@media (max-width: 600px) {

    .spade-variation-swatch--color {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .spade-variation-group--color .spade-variation-options {
        gap: 13px !important;
    }

    .spade-variation-swatch--color.is-active::after,
    .spade-variation-swatch--color[aria-pressed="true"]::after {
        width: 25px !important;
        bottom: -10px !important;
    }

    .single-product .spade-product-purchase
    .woocommerce-variation-add-to-cart,
    .single-product .spade-product-purchase
    form.cart:not(.variations_form) {
        grid-template-columns: 136px minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    .single-product .spade-product-purchase
    form.cart .quantity {
        grid-template-columns: 44px 48px 44px !important;

        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
    }

    .single-product .spade-product-purchase
    form.cart .quantity input.qty {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    .single-product .spade-product-qty-button {
        width: 44px !important;
    }
}


/* Very narrow phones: cart can move below */
@media (max-width: 360px) {

    .single-product .spade-product-purchase
    .woocommerce-variation-add-to-cart,
    .single-product .spade-product-purchase
    form.cart:not(.variations_form) {
        grid-template-columns: 1fr !important;
    }

    .single-product .spade-product-quantity-label,
    .single-product .spade-product-purchase
    form.cart .quantity,
    .single-product .spade-product-purchase
    .single_add_to_cart_button {
        grid-column: 1 !important;
    }

}


/* =========================================================
   SPADE — VARIATION-SPECIFIC GALLERY
   ========================================================= */

.spade-product-media-grid {
    transition: opacity 0.18s ease;
}

.spade-product-media-grid.is-changing-variation-gallery {
    opacity: 0.35;
}

.spade-product-media-item--variation {
    margin: 0;
    background: #f7f7f7;
}

.spade-product-media-item--variation img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: unset;
}

@media (prefers-reduced-motion: reduce) {

    .spade-product-media-grid {
        transition: none;
    }

}


/* =========================================================
   SPADE — FINAL QUANTITY INPUT VISIBILITY FIX
   ========================================================= */

.single-product .spade-product-purchase
form.cart .quantity input.qty,
.single-product .spade-product-purchase
.quantity input[type="number"] {

    display: block !important;

    position: static !important;

    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    clip: auto !important;
    clip-path: none !important;

    transform: none !important;

    background: #ffffff !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-family: var(--spade-font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 48px !important;

    text-align: center !important;
    text-indent: 0 !important;

    border: 0 !important;
    border-left: 1px solid #eeeeee !important;
    border-right: 1px solid #eeeeee !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    appearance: textfield !important;
    -moz-appearance: textfield !important;

    z-index: 2 !important;
}


/* Remove Chrome / Safari native arrows */

.single-product .spade-product-purchase
.quantity input.qty::-webkit-inner-spin-button,
.single-product .spade-product-purchase
.quantity input.qty::-webkit-outer-spin-button {

    margin: 0 !important;

    -webkit-appearance: none !important;
}


/* Ensure the three controls stay in correct order */

.single-product .spade-product-purchase
form.cart .quantity {

    display: grid !important;

    grid-template-columns:
        50px
        54px
        50px !important;

    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;

    height: 50px !important;

    align-items: center !important;

    background: #ffffff !important;

    overflow: hidden !important;
}


/* Minus */

.single-product .spade-product-qty-minus {
    grid-column: 1 !important;
}


/* Number */

.single-product .spade-product-purchase
form.cart .quantity input.qty {

    grid-column: 2 !important;
}


/* Plus */

.single-product .spade-product-qty-plus {
    grid-column: 3 !important;
}


/* Mobile */

@media (max-width: 600px) {

    .single-product .spade-product-purchase
    form.cart .quantity {

        grid-template-columns:
            44px
            48px
            44px !important;

        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
    }


    .single-product .spade-product-purchase
    form.cart .quantity input.qty {

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

}

/* =========================================================
   SPADE — FORCE QUANTITY NUMBER VISIBLE
   ========================================================= */

.single-product input.qty,
.single-product .quantity input.qty,
.single-product .spade-product-purchase input.qty,
.single-product .spade-product-purchase .quantity input[type="number"] {

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: Manrope, sans-serif !important;

    line-height: 48px !important;
    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    text-shadow: none !important;

    background-color: #ffffff !important;

    caret-color: #111111 !important;

    -webkit-opacity: 1 !important;

    position: relative !important;
    z-index: 20 !important;
}


/* Extra WebKit / Chrome protection */

.single-product input.qty:focus,
.single-product input.qty:hover,
.single-product input.qty:active {

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;
}


/* Keep native number arrows removed */

.single-product input.qty::-webkit-inner-spin-button,
.single-product input.qty::-webkit-outer-spin-button {

    -webkit-appearance: none !important;

    margin: 0 !important;
}

/* =========================================================
   SPADE — FINAL QUANTITY + ADD TO CART ROW
   ========================================================= */

.single-product .spade-product-purchase
.woocommerce-variation-add-to-cart,
.single-product .spade-product-purchase
form.cart:not(.variations_form) {

    display: grid !important;

    grid-template-columns:
        154px
        minmax(0, 1fr) !important;

    column-gap: 10px !important;
    row-gap: 0 !important;

    align-items: stretch !important;

    width: 100% !important;

    margin-top: 16px !important;
}


/* Quantity selector */

.single-product .spade-product-purchase
form.cart .quantity {

    grid-column: 1 !important;

    display: grid !important;

    grid-template-columns:
        50px
        54px
        50px !important;

    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;

    height: 54px !important;

    margin: 0 !important;

    border: 1px solid #d9d9d9 !important;

    background: #ffffff !important;

    overflow: hidden !important;
}


/* Quantity number */

.single-product .spade-product-purchase
form.cart .quantity input.qty {

    grid-column: 2 !important;

    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #eeeeee !important;
    border-right: 1px solid #eeeeee !important;

    background: #ffffff !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 52px !important;

    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* Minus */

.single-product .spade-product-qty-minus {

    grid-column: 1 !important;

    width: 50px !important;
    height: 52px !important;
}


/* Plus */

.single-product .spade-product-qty-plus {

    grid-column: 3 !important;

    width: 50px !important;
    height: 52px !important;
}


/* Add to cart */

.single-product .spade-product-purchase
.single_add_to_cart_button {

    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;

    align-self: stretch !important;
}


/* Keep quantity label above both */

.single-product .spade-product-quantity-label {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    margin: 0 0 10px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .single-product .spade-product-purchase
    .woocommerce-variation-add-to-cart,
    .single-product .spade-product-purchase
    form.cart:not(.variations_form) {

        grid-template-columns:
            136px
            minmax(0, 1fr) !important;

        column-gap: 8px !important;
    }


    .single-product .spade-product-purchase
    form.cart .quantity {

        grid-template-columns:
            44px
            48px
            44px !important;

        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
    }


    .single-product .spade-product-purchase
    form.cart .quantity input.qty {

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }


    .single-product .spade-product-qty-minus,
    .single-product .spade-product-qty-plus {

        width: 44px !important;
    }

}


/* Very small phones */

@media (max-width: 380px) {

    .single-product .spade-product-purchase
    .woocommerce-variation-add-to-cart,
    .single-product .spade-product-purchase
    form.cart:not(.variations_form) {

        grid-template-columns: 1fr !important;
        row-gap: 10px !important;
    }


    .single-product .spade-product-purchase
    form.cart .quantity,
    .single-product .spade-product-purchase
    .single_add_to_cart_button {

        grid-column: 1 !important;
    }

}

/* =========================================================
   SPADE — MASTER PURCHASE ROW FIX
   FINAL CASCADE OVERRIDE — KEEP AT ABSOLUTE END OF product.css

   Root cause fixed here:
   Blocksy wraps .quantity + .single_add_to_cart_button inside
   .ct-cart-actions. Older SPADE rules were turning the OUTER
   .woocommerce-variation-add-to-cart into a 2-column grid.
   That constrained .ct-cart-actions to only one grid column,
   so the Add to Cart button could never occupy the full
   remaining purchase area correctly.

   Correct structure:
   .woocommerce-variation-add-to-cart
       .spade-product-quantity-label
       .ct-cart-actions
           .quantity
           .single_add_to_cart_button
   ========================================================= */


/* ---------------------------------------------------------
   1. RESET THE OUTER WOO/VARIATION WRAPPER
   It must NOT be the quantity/cart two-column grid.
   --------------------------------------------------------- */

html body.single-product
.spade-product-purchase
.woocommerce-variation-add-to-cart,
html body.single-product
.spade-product-purchase
form.cart:not(.variations_form) {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: 0 !important;
    padding: 0 !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;

    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: 0 !important;

    flex-direction: initial !important;
    flex-wrap: initial !important;
}


/* Quantity label stays above the complete purchase row */

html body.single-product
.spade-product-quantity-label {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 18px 0 10px !important;
    padding: 0 !important;

    clear: both !important;
}


/* ---------------------------------------------------------
   2. THE REAL BLOCKSY PURCHASE ROW
   Exactly 50% quantity / 50% Add to Cart.
   --------------------------------------------------------- */

html body.single-product
.spade-product-purchase
.ct-cart-actions {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    grid-template-rows: 54px !important;

    align-items: stretch !important;

    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   3. QUANTITY — LEFT HALF
   --------------------------------------------------------- */

html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    grid-template-rows: 52px !important;

    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
    flex-basis: auto !important;

    float: none !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;

    background: #ffffff !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* Blocksy creates its own extra +/- spans.
   Our SPADE buttons already provide the controls. */

html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity > .ct-increase,
html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity > .ct-decrease {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Minus */

html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-minus {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-right: 1px solid #eeeeee !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


/* Quantity value */

html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> input.qty {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #ffffff !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-family: var(--spade-font-body, "Manrope", Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 52px !important;

    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    appearance: textfield !important;
    -moz-appearance: textfield !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> input.qty::-webkit-inner-spin-button,
html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> input.qty::-webkit-outer-spin-button {
    margin: 0 !important;
    -webkit-appearance: none !important;
}


/* Plus */

html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-plus {
    grid-column: 3 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #eeeeee !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-minus::before,
html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-minus::after,
html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-plus::before,
html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-plus::after {
    content: none !important;
    display: none !important;
}


html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-minus:hover:not(:disabled),
html body.single-product
.spade-product-purchase
.ct-cart-actions > .quantity
> .spade-product-qty-plus:hover:not(:disabled) {
    background: #f7f7f7 !important;
    color: #d7006d !important;
}


/* ---------------------------------------------------------
   4. ADD TO CART — RIGHT HALF
   --------------------------------------------------------- */

html body.single-product
.spade-product-purchase
.ct-cart-actions
> .single_add_to_cart_button {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    flex: none !important;
    flex-basis: auto !important;

    float: none !important;

    border: 1px solid #111111 !important;
    border-radius: 0 !important;

    background: #111111 !important;
    color: #ffffff !important;

    font-family: var(--spade-font-body, "Manrope", Arial, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: 0.04em !important;
    text-transform: none !important;

    white-space: nowrap !important;

    opacity: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


html body.single-product
.spade-product-purchase
.ct-cart-actions
> .single_add_to_cart_button:hover:not(.disabled) {
    background: #d7006d !important;
    border-color: #d7006d !important;
    color: #ffffff !important;
}


html body.single-product
.spade-product-purchase
.ct-cart-actions
> .single_add_to_cart_button.disabled,
html body.single-product
.spade-product-purchase
.ct-cart-actions
> .single_add_to_cart_button.wc-variation-selection-needed {
    background: #b5b5b5 !important;
    border-color: #b5b5b5 !important;
    color: #ffffff !important;

    cursor: not-allowed !important;
}


/* ---------------------------------------------------------
   5. MOBILE — STILL 50 / 50
   --------------------------------------------------------- */

@media (max-width: 600px) {

    html body.single-product
    .spade-product-purchase
    .ct-cart-actions {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 8px !important;

        width: 100% !important;
    }


    html body.single-product
    .spade-product-purchase
    .ct-cart-actions
    > .single_add_to_cart_button {
        padding-inline: 10px !important;

        font-size: 11px !important;
        letter-spacing: 0.02em !important;
    }
}


@media (max-width: 380px) {

    html body.single-product
    .spade-product-purchase
    .ct-cart-actions {
        gap: 6px !important;
    }


    html body.single-product
    .spade-product-purchase
    .ct-cart-actions > .quantity {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }


    html body.single-product
    .spade-product-purchase
    .ct-cart-actions
    > .single_add_to_cart_button {
        padding-inline: 6px !important;

        font-size: 10px !important;
    }
}


/* =========================================================
   SPADE — MOBILE LIFESTYLE IMAGE
   SHOW FULL IMAGE — NO CROPPING
   ========================================================= */

@media (max-width: 600px) {

    .single-product .spade-product-lifestyle {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 42px !important;

        overflow: visible !important;

        background: #ffffff !important;
    }

    .single-product .spade-product-lifestyle img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: contain !important;
        object-position: center center !important;

        margin: 0 !important;
    }

}

/* =========================================================
   SPADE — LUXURY CARE GUIDE
   Horizontal desktop / vertical mobile
   ========================================================= */

.spade-care-luxury {
    width: 100%;
    color: #111111;
}

.spade-care-luxury__intro {
    margin-bottom: 26px;
}

.spade-care-luxury__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #d7006d;
    font-family: var(--spade-font-body, "Manrope", Arial, sans-serif);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.spade-care-luxury__title {
    margin: 0 0 10px;
    color: #111111;
    font-family: var(--spade-font-heading, "DM Serif Display", Georgia, serif);
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.spade-care-luxury__text {
    max-width: 700px;
    margin: 0;
    color: #666666;
    font-size: 13px;
    line-height: 1.75;
}

.spade-care-luxury__text strong {
    color: #111111;
    font-weight: 600;
}


/* GRID */

.spade-care-luxury__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.spade-care-luxury__item {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
    border: 1px solid #ededed;
    background: #ffffff;
    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.spade-care-luxury__item:hover {
    border-color: rgba(215, 0, 109, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(17, 17, 17, 0.06);
}

.spade-care-luxury__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgba(215, 0, 109, 0.16);
    border-radius: 50%;
    background-color: #fff8fc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.spade-care-luxury__content {
    min-width: 0;
}

.spade-care-luxury__content h4 {
    margin: 1px 0 7px;
    color: #111111;
    font-family: var(--spade-font-body, "Manrope", Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.spade-care-luxury__content p {
    margin: 0;
    color: #666666;
    font-size: 12px;
    line-height: 1.7;
}

.spade-care-luxury__content strong {
    color: #111111;
    font-weight: 600;
}


/* NOTE */

.spade-care-luxury__note {
    margin-top: 20px;
    padding: 18px 20px;
    border-left: 3px solid #d7006d;
    background: #fff7fb;
}

.spade-care-luxury__note-label {
    display: inline-block;
    margin-bottom: 6px;
    color: #d7006d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.spade-care-luxury__note p {
    margin: 0;
    color: #5f5f5f;
    font-size: 12px;
    line-height: 1.7;
}


/* SVG LINE ICONS */

.spade-care-icon--clean {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15c3-1 5-3 6-6l5 5c-3 1-5 3-6 6z'/%3E%3Cpath d='M14 4l.7 1.7L16.5 6.5l-1.8.8L14 9l-.8-1.7-1.7-.8 1.7-.8z'/%3E%3C/svg%3E");
}

.spade-care-icon--storage {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14l1 11H4z'/%3E%3Cpath d='M8 9V7a4 4 0 0 1 8 0v2'/%3E%3Cpath d='M8 13h8'/%3E%3C/svg%3E");
}

.spade-care-icon--shape {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 12H5z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3Cpath d='M8 15h8'/%3E%3Cpath d='M9.5 13.5L8 15l1.5 1.5'/%3E%3Cpath d='M14.5 13.5L16 15l-1.5 1.5'/%3E%3C/svg%3E");
}

.spade-care-icon--sun {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 3v2.2M12 18.8V21M3 12h2.2M18.8 12H21M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6'/%3E%3C/svg%3E");
}

.spade-care-icon--moisture {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c3 4 5 6.5 5 9a5 5 0 1 1-10 0c0-2.5 2-5 5-9z'/%3E%3C/svg%3E");
}

.spade-care-icon--care {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
}


/* MOBILE */

@media (max-width: 900px) {
    .spade-care-luxury__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .spade-care-luxury__intro {
        margin-bottom: 22px;
    }

    .spade-care-luxury__title {
        font-size: 26px;
    }

    .spade-care-luxury__text {
        font-size: 13px;
    }

    .spade-care-luxury__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .spade-care-luxury__item {
        padding: 18px 16px;
        gap: 14px;
    }

    .spade-care-luxury__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        background-size: 20px 20px;
    }

    .spade-care-luxury__content h4 {
        font-size: 13px;
    }

    .spade-care-luxury__content p,
    .spade-care-luxury__note p {
        font-size: 12px;
    }

    .spade-care-luxury__note {
        margin-top: 16px;
        padding: 16px;
    }
}
/* =========================================================
   SPADE — LUXURY DELIVERY + PAYMENT SECTIONS
   Horizontal desktop / vertical mobile
   ========================================================= */

.spade-info-luxury {
    width: 100%;
    color: #111111;
}


/* =========================================================
   INTRO
   ========================================================= */

.spade-info-luxury__intro {
    margin-bottom: 26px;
}


.spade-info-luxury__eyebrow {
    display: inline-block;

    margin-bottom: 8px;

    color: #d7006d;

    font-family:
        var(--spade-font-body, "Manrope", Arial, sans-serif);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.spade-info-luxury__title {
    margin: 0 0 10px;

    color: #111111;

    font-family:
        var(--spade-font-heading, "DM Serif Display", Georgia, serif);

    font-size: clamp(24px, 2.2vw, 34px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.02em;
}


.spade-info-luxury__text {
    max-width: 700px;

    margin: 0;

    color: #666666;

    font-size: 13px;

    line-height: 1.75;
}


.spade-info-luxury__text strong {
    color: #111111;
    font-weight: 600;
}


/* =========================================================
   HORIZONTAL DESKTOP GRID
   ========================================================= */

.spade-info-luxury__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
}


/* =========================================================
   ITEM
   ========================================================= */

.spade-info-luxury__item {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

    padding: 22px 18px;

    border: 1px solid #ededed;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.spade-info-luxury__item:hover {
    transform: translateY(-2px);

    border-color:
        rgba(215, 0, 109, 0.22);

    box-shadow:
        0 12px 30px rgba(17, 17, 17, 0.06);
}


/* =========================================================
   ICON
   ========================================================= */

.spade-info-luxury__icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: block;

    border:
        1px solid rgba(215, 0, 109, 0.17);

    border-radius: 50%;

    background-color: #fff7fb;

    background-repeat: no-repeat;

    background-position: center;

    background-size: 22px 22px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.spade-info-luxury__content h4 {
    margin: 0 0 7px;

    color: #111111;

    font-family:
        var(--spade-font-body, "Manrope", Arial, sans-serif);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.35;
}


.spade-info-luxury__content p {
    margin: 0;

    color: #666666;

    font-size: 12px;

    line-height: 1.7;
}


.spade-info-luxury__content strong {
    color: #111111;

    font-weight: 600;
}


/* =========================================================
   NOTE
   ========================================================= */

.spade-info-luxury__note {
    margin-top: 20px;

    padding: 17px 20px;

    border-left:
        3px solid #d7006d;

    background: #fff7fb;
}


.spade-info-luxury__note-label {
    display: block;

    margin-bottom: 6px;

    color: #d7006d;

    font-size: 9px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.spade-info-luxury__note p {
    margin: 0;

    color: #5f5f5f;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   SVG ICON — DELIVERY
   ========================================================= */

.spade-info-icon--delivery {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v11H3z'/%3E%3Cpath d='M14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}


/* DELIVERY TIME */

.spade-info-icon--time {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}


/* RETURNS */

.spade-info-icon--return {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7v5h5'/%3E%3Cpath d='M5.5 11A7.5 7.5 0 1 1 7 17.5'/%3E%3C/svg%3E");
}


/* EXCHANGE */

.spade-info-icon--exchange {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13'/%3E%3Cpath d='M14 5l3 3-3 3'/%3E%3Cpath d='M20 16H7'/%3E%3Cpath d='M10 13l-3 3 3 3'/%3E%3C/svg%3E");
}


/* =========================================================
   PAYMENT ICONS
   ========================================================= */


/* SECURE */

.spade-info-icon--secure {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.8-2.9 8.2-7 10-4.1-1.8-7-5.2-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}


/* CARD */

.spade-info-icon--card {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h3'/%3E%3C/svg%3E");
}


/* INSTALLMENTS */

.spade-info-icon--installment {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='12' r='5'/%3E%3Ccircle cx='16' cy='12' r='5'/%3E%3Cpath d='M12 7v10'/%3E%3C/svg%3E");
}


/* WALLET */

.spade-info-icon--wallet {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7006d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h14a2 2 0 0 1 2 2v10H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M16 11h5v4h-5a2 2 0 0 1 0-4z'/%3E%3Ccircle cx='17' cy='13' r='.5'/%3E%3C/svg%3E");
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .spade-info-luxury__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE — VERTICAL
   ========================================================= */

@media (max-width: 600px) {

    .spade-info-luxury__intro {
        margin-bottom: 22px;
    }


    .spade-info-luxury__title {
        font-size: 26px;
    }


    .spade-info-luxury__grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .spade-info-luxury__item {
        display: grid;

        grid-template-columns:
            44px
            minmax(0, 1fr);

        align-items: start;

        gap: 14px;

        padding: 17px 15px;
    }


    .spade-info-luxury__icon {
        width: 42px;
        height: 42px;

        background-size: 20px 20px;
    }


    .spade-info-luxury__content h4 {
        margin-top: 1px;

        font-size: 13px;
    }


    .spade-info-luxury__content p {
        font-size: 12px;
    }


    .spade-info-luxury__note {
        margin-top: 14px;

        padding: 15px 16px;
    }

}
/* Policy links inside product information */

.spade-info-policy-link {
    color: #d7006d !important;

    font-weight: 600;

    text-decoration: none !important;

    border-bottom: 1px solid rgba(215, 0, 109, 0.35);

    transition:
        border-color 0.2s ease,
        opacity 0.2s ease;
}

.spade-info-policy-link:hover {
    color: #d7006d !important;

    border-bottom-color: #d7006d;

    opacity: 0.75;
}
/* =========================================================
   SPADE — PRODUCT POLICY / INFORMATION LINKS
   ========================================================= */

.spade-info-policy-link {
    display: inline;

    color: #d7006d !important;

    font-weight: 600;

    text-decoration: none !important;

    border-bottom:
        1px solid rgba(215, 0, 109, 0.32);

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}


.spade-info-policy-link:hover {
    color: #d7006d !important;

    border-bottom-color: #d7006d;

    opacity: 0.72;
}


.spade-info-policy-link:focus-visible {
    outline:
        2px solid rgba(215, 0, 109, 0.28);

    outline-offset: 3px;
}
/* =========================================================
   SPADE — PAYMENT PROVIDER LOGOS
   ========================================================= */

.spade-info-luxury__item--provider {
    position: relative;
}


/* Logo holder */

.spade-info-luxury__provider-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    height: 46px;

    margin-bottom: 0;
}


/* Actual logo */

.spade-info-luxury__provider-logo img {
    display: block;

    width: auto;
    max-width: 92px;

    height: auto;
    max-height: 30px;

    object-fit: contain;
    object-position: left center;
}


/* Koko can be slightly wider */

.spade-info-luxury__item--provider
img[alt="Koko"] {
    max-width: 88px;
    max-height: 28px;
}


/* Mintpay */

.spade-info-luxury__item--provider
img[alt="Mintpay"] {
    max-width: 96px;
    max-height: 28px;
}


/* Provider link spacing */

.spade-info-luxury__item--provider
.spade-info-policy-link {
    display: inline-block;

    margin-top: 10px;

    font-size: 11px;
    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 600px) {

    .spade-info-luxury__item--provider {
        display: grid;

        grid-template-columns:
            72px
            minmax(0, 1fr);

        align-items: start;

        gap: 14px;
    }


    .spade-info-luxury__provider-logo {
        width: 72px;
        height: 42px;

        align-items: center;
        justify-content: flex-start;
    }


    .spade-info-luxury__provider-logo img {
        max-width: 68px;
        max-height: 24px;
    }


    .spade-info-luxury__item--provider
    img[alt="Koko"] {
        max-width: 64px;
        max-height: 23px;
    }


    .spade-info-luxury__item--provider
    img[alt="Mintpay"] {
        max-width: 70px;
        max-height: 23px;
    }

}
/* =========================================================
   PRODUCT PAGE — BLACK WISHLIST BUTTON
   ========================================================= */

.single-product .spade-product-wishlist-btn {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.single-product .spade-product-wishlist-btn .spade-wishlist-icon,
.single-product .spade-product-wishlist-btn .spade-wishlist-text {
    color: #ffffff !important;
}

/* Keep the button black when hovered, focused or selected */
.single-product .spade-product-wishlist-btn:hover,
.single-product .spade-product-wishlist-btn:focus,
.single-product .spade-product-wishlist-btn[aria-pressed="true"] {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}


/* =========================================================
   PRODUCT TRUST SYMBOLS — SPADE PINK
   ========================================================= */

.single-product .spade-product-trust__icon {
    color: #d7006d !important;
}

.single-product .spade-product-trust__icon svg,
.single-product .spade-product-trust__icon svg path,
.single-product .spade-product-trust__icon svg circle,
.single-product .spade-product-trust__icon svg line,
.single-product .spade-product-trust__icon svg polyline {
    stroke: #d7006d !important;
}

/* Prevent outlined symbols from becoming solid shapes */
.single-product .spade-product-trust__icon svg path,
.single-product .spade-product-trust__icon svg circle {
    fill: none !important;
}

/* =========================================================
   PRODUCT TRUST — FINAL 4-COLUMN LAYOUT
   ========================================================= */

.single-product .spade-product-trust {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
}

.single-product .spade-product-trust__item:nth-child(n) {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

.single-product .spade-product-trust__item:nth-child(n)
.spade-product-trust__icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    margin: 0 auto !important;
}

.single-product .spade-product-trust__item:nth-child(n)
.spade-product-trust__text {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

.single-product .spade-product-trust__item:nth-child(n)
.spade-product-trust__text strong {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.single-product .spade-product-trust__item:nth-child(n)
.spade-product-trust__text span {
    display: block !important;
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Mobile: 2 × 2 */
@media (max-width: 600px) {

    .single-product .spade-product-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 12px !important;
    }

    .single-product .spade-product-trust__item:nth-child(n) {
        grid-column: auto !important;
    }
}

/* =========================================================
   SPADE — CARE GUIDE TIP STYLE LIKE DELIVERY NOTE
   ========================================================= */

.spade-care-luxury__note {
    margin-top: 22px;
    padding: 28px 28px 26px;
    border-left: 3px solid #d7006d;
    background: #fff7fb;
}

.spade-care-luxury__note-label {
    display: block;
    margin: 0 0 12px;
    color: #d7006d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.spade-care-luxury__note p {
    margin: 0;
    color: #666666;
    font-size: 13px;
    line-height: 1.9;
}

@media (max-width: 600px) {
    .spade-care-luxury__note {
        margin-top: 16px;
        padding: 20px 18px;
    }

    .spade-care-luxury__note p {
        font-size: 12px;
        line-height: 1.8;
    }
}

/* =========================================================
   SPADE — PRODUCT PAGE SALE BADGE RED
   ========================================================= */

.single-product .spade-sale-circle--product {
    background: #df1f2d !important;
    border-color: #df1f2d !important;

    box-shadow:
        0 7px 18px rgba(223, 31, 45, 0.22) !important;
}

.single-product .spade-sale-circle--product,
.single-product .spade-sale-circle--product * {
    color: #ffffff !important;
}

/* ============================================================
   SPADE — DESKTOP VIDEO GALLERY MASONRY FIX
   Fill space beside tall product video with next gallery image
   ============================================================ */

@media (min-width: 1000px) {

    /*
     * When a product contains a video:
     *
     * Main image = left / row 1
     * Video      = right / spans rows 1 + 2
     * Next image = left / row 2
     */

    .spade-product-media-grid:
    has(.spade-product-media-item--video)
    .spade-product-media-item--video {
        grid-column: 2;
        grid-row: span 2;

        height: 100%;
        min-height: 0;
    }

    .spade-product-media-grid:
    has(.spade-product-media-item--video)
    .spade-product-media-item--video video {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

}
/* ============================================================
   SPADE — DESKTOP PRODUCT VIDEO GALLERY FIX
   Main image left / video right / next photo below main image
   ============================================================ */

@media (min-width: 1000px) {

    /* VIDEO:
       force into right column and make it span 2 rows */
    .spade-product-media-grid
    > .spade-product-media-item--video {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;

        width: 100% !important;
        height: 100% !important;

        align-self: stretch !important;

        overflow: hidden !important;
    }


    /* VIDEO ITSELF */
    .spade-product-media-grid
    > .spade-product-media-item--video
    > video {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        object-fit: cover !important;
    }


    /* FIRST PHOTO AFTER VIDEO:
       force it directly underneath the main image */
    .spade-product-media-grid
    > .spade-product-media-item--video
    + .spade-product-media-item {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }


    /* Make sure that next photo fills the tile */
    .spade-product-media-grid
    > .spade-product-media-item--video
    + .spade-product-media-item
    > img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
    }
}
/* SPADE — Product trust row: 4 equal items on desktop */
.spade-product-trust.spade-product-trust--four {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
}

.spade-product-trust.spade-product-trust--four .spade-product-trust__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.spade-product-trust.spade-product-trust--four .spade-product-trust__icon {
    flex: 0 0 auto !important;
}

.spade-product-trust.spade-product-trust--four .spade-product-trust__text {
    min-width: 0 !important;
}

.spade-product-trust.spade-product-trust--four .spade-product-trust__text strong,
.spade-product-trust.spade-product-trust--four .spade-product-trust__text span {
    display: block !important;
}

/* Tablet */
@media (max-width: 900px) {
    .spade-product-trust.spade-product-trust--four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .spade-product-trust.spade-product-trust--four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 12px !important;
    }
}