/* =========================================================
   SPADE — GLOBAL TRUE FULL-WIDTH LAYOUT
   =========================================================
   Purpose:
   - Every custom SPADE section spans the real device viewport.
   - Escapes Blocksy / WordPress parent max-width containers.
   - Inner content still gets a small responsive gutter.
   - Prevents accidental horizontal scrolling.
   ========================================================= */

:root {
    --spade-page-gutter: clamp(18px, 2vw, 32px);
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}


/* =========================================================
   OUTER SECTIONS — BREAK OUT TO REAL VIEWPORT WIDTH
   ========================================================= */

.spade-cinematic,
.spade-shop-by-bag,
.spade-new-arrivals,
.spade-featured-picks,
.spade-lifestyle-banner,
.spade-featured-brands,
.spade-why-shop,
.spade-google-reviews,
.spade-newsletter,
.spade-support-page,
.spade-contact-page,
.spade-footer {
    position: relative !important;

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

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   INNER WRAPPERS — USE FULL AVAILABLE WIDTH
   ========================================================= */

.spade-shop-by-bag__inner,
.spade-new-arrivals__inner,
.spade-featured-picks__inner,
.spade-featured-brands__inner,
.spade-why-shop__inner,
.spade-google-reviews__inner,
.spade-newsletter__inner,
.spade-support-shell,
.spade-footer__inner {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: var(--spade-page-gutter) !important;
    padding-right: var(--spade-page-gutter) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   SHOP BY BAG
   ========================================================= */

.spade-shop-by-bag__grid,
.spade-shop-by-bag__grid--primary,
.spade-shop-by-bag__grid--secondary {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   NEW ARRIVALS
   ========================================================= */

.spade-new-arrivals__track {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   FEATURED PICKS
   ========================================================= */

.spade-featured-picks__layout {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   CINEMATIC / HERO VIDEO
   Full bleed by design
   ========================================================= */

.spade-cinematic {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.spade-cinematic__media {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

.spade-cinematic__video {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   LIFESTYLE BANNER
   Full bleed by design
   ========================================================= */

.spade-lifestyle-banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.spade-lifestyle-banner__inner {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

.spade-lifestyle-banner__image {
    display: block;

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


/* =========================================================
   FEATURED BRANDS
   ========================================================= */

.spade-featured-brands__marquee,
.spade-featured-brands__track {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   WHY SHOP
   ========================================================= */

.spade-why-shop__grid {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   GOOGLE REVIEWS
   ========================================================= */

.spade-google-reviews__tabs,
.spade-google-reviews__panels {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.spade-newsletter {
    box-sizing: border-box !important;
}


/* =========================================================
   SUPPORT / CONTACT PAGES
   ========================================================= */

.spade-support-page,
.spade-contact-page {
    box-sizing: border-box !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.spade-footer {
    overflow: hidden;
}

.spade-footer__top-row,
.spade-footer__lower-row,
.spade-footer__payment-section {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   GENERIC MEDIA SAFETY
   Only inside SPADE custom sections
   ========================================================= */

.spade-cinematic img,
.spade-cinematic video,
.spade-shop-by-bag img,
.spade-new-arrivals img,
.spade-featured-picks img,
.spade-lifestyle-banner img,
.spade-featured-brands img,
.spade-why-shop img,
.spade-google-reviews img,
.spade-newsletter img,
.spade-support-page img,
.spade-footer img {
    max-width: 100%;
}


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

@media (max-width: 1024px) {

    :root {
        --spade-page-gutter: 20px;
    }
}


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

@media (max-width: 700px) {

    :root {
        --spade-page-gutter: 14px;
    }

    .spade-cinematic,
    .spade-shop-by-bag,
    .spade-new-arrivals,
    .spade-featured-picks,
    .spade-lifestyle-banner,
    .spade-featured-brands,
    .spade-why-shop,
    .spade-google-reviews,
    .spade-newsletter,
    .spade-support-page,
    .spade-contact-page,
    .spade-footer {
        width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}


/* =========================================================
   SPADE — MISSING HOMEPAGE SECTIONS
   Hero + Shop by Category
   ========================================================= */

/* HERO */
.spade-hero {
    position: relative !important;

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

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    box-sizing: border-box !important;
}

.spade-hero__inner,
.spade-hero__media,
.spade-hero__slider,
.spade-hero__track,
.spade-hero__slide {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

.spade-hero img,
.spade-hero video,
.spade-hero picture {
    width: 100% !important;
    max-width: none !important;
}


/* SHOP BY CATEGORY */
.spade-shop-categories {
    position: relative !important;

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

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    box-sizing: border-box !important;
}

.spade-shop-categories__inner {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: var(--spade-page-gutter) !important;
    padding-right: var(--spade-page-gutter) !important;

    box-sizing: border-box !important;
}

.spade-shop-categories__track {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


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

    .spade-hero,
    .spade-shop-categories {
        width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .spade-shop-categories__inner {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* =========================================================
   SPADE — COMPACT HOMEPAGE SECTION SPACING
   ========================================================= */

/* Shop by Bag */
.spade-shop-by-bag {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Shop by Category */
.spade-shop-categories {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* New Arrivals */
.spade-new-arrivals {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove empty margins created by inner wrappers */
.spade-shop-by-bag__inner,
.spade-shop-categories__inner,
.spade-new-arrivals__inner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


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

@media (max-width: 1000px) {

    .spade-shop-by-bag,
    .spade-new-arrivals {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .spade-shop-categories {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
}


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

@media (max-width: 700px) {

    .spade-shop-by-bag,
    .spade-new-arrivals {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }

    .spade-shop-categories {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}


/* =========================================================
   SPADE — FEATURED PICKS STICKY EDITORIAL COMPATIBILITY
   =========================================================
   Keep the full-width breakout, but ensure the Featured Picks
   ancestor chain does not create a sticky clipping boundary.
   ========================================================= */

.spade-featured-picks,
.spade-featured-picks__inner,
.spade-featured-picks__editorial,
.spade-featured-picks__campaign-column {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.spade-featured-picks,
.spade-featured-picks__inner,
.spade-featured-picks__editorial {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}

.spade-featured-picks__editorial {
    align-items: stretch !important;
}

.spade-featured-picks__campaign-column {
    position: relative !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 100% !important;
}

.spade-featured-picks__campaign-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 112px !important;
    align-self: flex-start !important;
    width: 100% !important;
    height: auto !important;
}

/* Disable sticky only on mobile. */
@media (max-width: 767px) {

    .spade-featured-picks__campaign-sticky {
        position: relative !important;
        top: auto !important;
    }
}