/* ============================================
   SJOLIE EDITORIAL LUXURY - Mockup 2
   Playfair Display + DM Sans
   Nuda-inspired warm palette
   ============================================ */

:root {
    --wd-block-spacing: 0px;
    /* Core Palette */
    --sjolie-espresso: #3a2d27;
    --sjolie-deep: #4e3629;
    --sjolie-mocha: #6b5a50;
    --sjolie-caramel: #b4926e;
    --sjolie-sand: #dcbfa6;
    --sjolie-pearl: #f3ece3;
    --sjolie-cream: #fbfbf8;
    --sjolie-white: #ffffff;
    --sjolie-border: #e8ddd4;

    /* Typography */
    --sjolie-serif: "Playfair Display", Georgia, serif;
    --sjolie-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── GLOBAL ─── */
body.single-product {
    background-color: var(--sjolie-cream) !important;
    font-family: var(--sjolie-sans) !important;
    color: var(--sjolie-mocha);
    font-weight: 300;
    line-height: 1.7;
    font-size: 14px;
}

/* ─── PRODUCT TITLE ─── */
.single-product .product_title,
.single-product h1.product_title {
    font-family: var(--sjolie-serif) !important;
    font-size: 46px !important;
    font-weight: 300 !important;
    color: var(--sjolie-espresso) !important;
    line-height: 1.15 !important;
    letter-spacing: 0;
    margin-bottom: 6px !important;
}

/* ─── PRODUCT SUBTITLE / TAGLINE ─── */
.sjolie-tagline {
    font-family: var(--sjolie-serif);
    font-size: 18px;
    font-style: italic;
    color: var(--sjolie-caramel);
    margin-bottom: 20px;
    font-weight: 300;
}

/* ─── COLLECTION LABEL ─── */
.sjolie-collection-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
    font-weight: 500;
}

/* ─── PRODUCT PRICE ─── */
.single-product .price,
.single-product p.price,
.single-product span.woocommerce-Price-amount {
    font-family: var(--sjolie-serif) !important;
    font-size: 36px !important;
    color: var(--sjolie-espresso) !important;
    font-weight: 400 !important;
}
.single-product .price del {
    font-size: 24px !important;
    opacity: 0.5;
}

/* ─── SHORT DESCRIPTION ─── */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p {
    font-family: var(--sjolie-sans) !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    color: var(--sjolie-mocha) !important;
    max-width: 440px;
    margin-bottom: 28px !important;
}

/* ─── DIVIDER LINE ─── */
.sjolie-divider {
    width: 40px;
    height: 1px;
    background: var(--sjolie-caramel);
    margin-bottom: 28px;
}

/* ─── STAR RATING ─── */
.single-product .star-rating {
    color: var(--sjolie-caramel) !important;
}
.single-product .woocommerce-review-link {
    font-size: 12px !important;
    color: var(--sjolie-mocha) !important;
}

/* ─── ADD TO CART BUTTON ─── */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
    background-color: var(--sjolie-espresso) !important;
    color: var(--sjolie-cream) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--sjolie-sans) !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    padding: 16px 40px !important;
    font-weight: 400 !important;
    transition: background-color 0.3s ease !important;
    height: auto !important;
    min-height: 50px;
}
.single-product .single_add_to_cart_button:hover {
    background-color: var(--sjolie-caramel) !important;
}

/* ─── QUANTITY INPUT ─── */
.single-product .quantity .qty,
.single-product .quantity input {
    border: 1px solid var(--sjolie-border) !important;
    font-family: var(--sjolie-sans) !important;
    color: var(--sjolie-espresso) !important;
}

/* ─── VARIATION SWATCHES ─── */
.single-product .variations td select,
.single-product .wd-swatches-product .wd-swatch {
    border-color: var(--sjolie-border) !important;
    font-family: var(--sjolie-sans) !important;
}
.single-product .wd-swatches-product .wd-swatch.wd-active,
.single-product .wd-swatches-product .wd-swatch:hover {
    border-color: var(--sjolie-espresso) !important;
}

/* ─── PROMISE BADGES ─── */
.sjolie-promises {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--sjolie-border);
}
.sjolie-promise {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sjolie-mocha);
}
.sjolie-promise-dot {
    width: 6px;
    height: 6px;
    background: var(--sjolie-caramel);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─── SCROLLING MARQUEE ─── */
.sjolie-marquee {
    background: var(--sjolie-espresso);
    overflow: hidden;
    padding: 14px 0;
    white-space: nowrap;
}
.sjolie-marquee-track {
    display: inline-flex;
    animation: sjolie-scroll 25s linear infinite;
}
.sjolie-marquee-item {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-sand);
    margin: 0 40px;
    flex-shrink: 0;
}
@keyframes sjolie-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─── SECTION LABELS (reusable) ─── */
.sjolie-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
    font-weight: 500;
}
.sjolie-heading {
    font-family: var(--sjolie-serif);
    font-size: 36px;
    font-weight: 300;
    color: var(--sjolie-espresso);
    line-height: 1.3;
    margin-bottom: 24px;
}

/* ─── STORY / DETAIL SECTION ─── */
.sjolie-story-section {
    padding: 80px 0;
}
.sjolie-story-text {
    font-family: var(--sjolie-sans);
    line-height: 1.9;
    color: var(--sjolie-mocha);
    font-weight: 300;
}
.sjolie-story-text p {
    margin-bottom: 16px;
}

/* ─── INGREDIENTS SECTION ─── */
.sjolie-ingredients-section {
    background: var(--sjolie-pearl);
    padding: 80px 0;
}
.sjolie-ing-card {
    background: var(--sjolie-white);
    padding: 36px 28px;
    text-align: center;
    border: 1px solid var(--sjolie-border);
    transition: transform 0.2s;
}
.sjolie-ing-card:hover {
    transform: translateY(-4px);
}
.sjolie-ing-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--sjolie-sand);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--sjolie-caramel);
}
.sjolie-ing-name {
    font-family: var(--sjolie-serif);
    font-size: 18px;
    color: var(--sjolie-espresso);
    margin-bottom: 10px;
}
.sjolie-ing-desc {
    font-size: 12px;
    color: var(--sjolie-mocha);
    line-height: 1.7;
}

/* ─── HOW TO USE STEPS ─── */
.sjolie-howto-section {
    padding: 80px 0;
}
.sjolie-step-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sjolie-cream);
    border: 1px solid var(--sjolie-sand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-family: var(--sjolie-serif);
    font-size: 22px;
    color: var(--sjolie-espresso);
}
.sjolie-step-heading {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sjolie-espresso);
    margin-bottom: 12px;
    font-weight: 500;
    text-align: center;
}
.sjolie-step-body {
    font-size: 13px;
    color: var(--sjolie-mocha);
    line-height: 1.8;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}

/* ─── FAQ SECTION (Dark Background) ─── */
.sjolie-faq-section {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 20px;
}
.sjolie-faq-section--dark {
    background: var(--sjolie-espresso);
    max-width: none;
    padding: 80px 40px;
}
.sjolie-faq-section--dark .sjolie-faq-inner {
    max-width: 760px;
    margin: 0 auto;
}
.sjolie-faq-header {
    text-align: center;
    margin-bottom: 48px;
}
.sjolie-faq-section--dark .sjolie-label {
    color: var(--sjolie-sand);
}
.sjolie-faq-section--dark .sjolie-heading {
    color: var(--sjolie-cream);
}
.sjolie-faq-item {
    border-bottom: 1px solid var(--sjolie-border);
}
.sjolie-faq-section--dark .sjolie-faq-item {
    border-bottom-color: rgba(220,191,166,0.2);
}
.sjolie-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    cursor: pointer;
    font-size: 15px;
    color: var(--sjolie-espresso);
    font-weight: 400;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--sjolie-sans);
    transition: color 0.2s;
}
.sjolie-faq-section--dark .sjolie-faq-question {
    color: var(--sjolie-cream);
}
.sjolie-faq-question:hover {
    color: var(--sjolie-caramel);
}
.sjolie-faq-section--dark .sjolie-faq-question:hover {
    color: var(--sjolie-sand);
}
.sjolie-faq-toggle {
    font-size: 18px;
    color: var(--sjolie-caramel);
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 20px;
}
.sjolie-faq-section--dark .sjolie-faq-toggle {
    color: var(--sjolie-sand);
}
.sjolie-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    color: var(--sjolie-mocha);
    line-height: 1.85;
    font-size: 13px;
}
.sjolie-faq-section--dark .sjolie-faq-answer {
    color: var(--sjolie-sand);
}
.sjolie-faq-item.active .sjolie-faq-answer {
    max-height: 300px;
    padding-bottom: 22px;
}
.sjolie-faq-item.active .sjolie-faq-toggle {
    transform: rotate(45deg);
}

/* ─── PRODUCT IMAGE AREA ─── */
.single-product .product-image-summary .product-images {
    background: var(--sjolie-pearl) !important;
}

/* ─── TABS OVERRIDE ─── */
.single-product .woocommerce-tabs .tabs li a,
.single-product .wd-nav-product .wd-nav-link {
    font-family: var(--sjolie-sans) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-mocha) !important;
    font-weight: 400 !important;
}
.single-product .woocommerce-tabs .tabs li.active a,
.single-product .wd-nav-product .wd-nav-link.wd-active {
    color: var(--sjolie-espresso) !important;
}
.single-product .woocommerce-Tabs-panel {
    font-family: var(--sjolie-sans) !important;
    color: var(--sjolie-mocha) !important;
    line-height: 1.85 !important;
}

/* ─── RELATED PRODUCTS ─── */
.single-product .related.products > h2,
.single-product .upsells.products > h2,
.single-product .wd-products-element .title {
    font-family: var(--sjolie-serif) !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    color: var(--sjolie-espresso) !important;
    text-align: center;
}

/* ─── WOODMART SPECIFIC OVERRIDES ─── */
.single-product .wd-single-add-cart .single_add_to_cart_button {
    background-color: var(--sjolie-espresso) !important;
    border-radius: 0 !important;
}
.single-product .wd-single-add-cart .single_add_to_cart_button:hover {
    background-color: var(--sjolie-caramel) !important;
}

/* Hide default Woodmart elements we are replacing */
.single-product .wd-product-brands,
.single-product .wd-single-sharing {
    display: none;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    .single-product .product_title,
    .single-product h1.product_title {
        font-size: 32px !important;
    }
    .single-product .price,
    .single-product p.price,
    .single-product span.woocommerce-Price-amount {
        font-size: 28px !important;
    }
    .sjolie-heading {
        font-size: 28px;
    }
    .sjolie-promises {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   FIX: Vertical centering + empty <p> gaps
   ============================================ */

/* Kill empty <p> tags injected by wpautop between sections */
.sjolie-product-content-area > p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    height: 0 !important;
}

/* Application Guide section — reduce excessive bottom padding */
.sjolie-fw-section .sjolie-steps-grid {
    margin-bottom: 0 !important;
}

/* Trust Bar section — ensure icons are 6-column grid and centered */
.sjolie-trust-bar {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    max-width: 1000px;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Trust bar dividers — hide the 7th pseudo-element if present */
.sjolie-trust-item:last-child::after {
    display: none !important;
}

@media (max-width: 768px) {
    .sjolie-trust-bar {
    display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .sjolie-trust-bar {
    display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ============================================
   FIX: Tighter padding on steps + trust sections
   ============================================ */

/* Application Guide section — make it tighter since it only has 3 short steps */
.sjolie-fw-section:has(.sjolie-steps-grid) {
    padding: 40px 0 36px !important;
}

.sjolie-fw-section:has(.sjolie-steps-grid) .sjolie-fw-header {
    margin-bottom: 28px !important;
}

/* Trust bar compact section — tighter */
.sjolie-fw-section.sjolie-fw-compact:has(.sjolie-trust-bar) {
    padding: 32px 0 28px !important;
}

/* Also remove any hidden <p> margins that might add to section heights */
.sjolie-fw-section > p:empty,
.sjolie-fw-inner > p:empty {
    display: none !important;
}

/* Ensure the "For the Professional" story section doesn't have excessive bottom whitespace */
.sjolie-fw-section:has(.sjolie-story-grid) {
    padding-bottom: 48px !important;
}


/* ============================================
   FIX: Give trust bar + ingredients more breathing room
   ============================================ */

/* Trust bar (icon bar) — more vertical space */
.sjolie-fw-section.sjolie-fw-compact:has(.sjolie-trust-bar) {
    padding: 44px 0 40px !important;
}

/* Full ingredient list section — more vertical space */
.sjolie-fw-section.sjolie-fw-compact:has(.sjolie-ingredients-list) {
    padding: 80px 0 72px !important;
}

/* Also give the last compact section (ingredients) some space */
.sjolie-fw-section.sjolie-fw-compact.sjolie-fw-last {
    padding: 80px 0 72px !important;
}


/* ============================================
   VARIANT SELECTOR: Box/Swatch Style
   ============================================ */

/* Hide the original select dropdown when swatches are active */
.sjolie-has-swatches select[name^="attribute_"] {
    display: none !important;
}

/* Swatch container */
.sjolie-variant-swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0;
}

/* Individual swatch button */
.sjolie-variant-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    min-width: 80px;
    border: 1.5px solid var(--sjolie-border, #e8ddd4);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso, #3c2415) !important;
    transition: all 0.2s ease;
    user-select: none;
}

.sjolie-variant-swatch:hover {
    border-color: var(--sjolie-caramel, #a67c5b);
    background: var(--sjolie-cream, #faf7f4);
}

/* Active/selected state */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: var(--sjolie-espresso, #3c2415);
    background: var(--sjolie-espresso, #3c2415);
    color: #ffffff !important;
}

/* Disabled/unavailable state */
.sjolie-variant-swatch.sjolie-swatch-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Label styling */
.variations th.label {
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso, #3c2415) !important;
    padding-right: 16px !important;
    vertical-align: top !important;
    padding-top: 12px !important;
}

/* Clear button styling */
.variations .reset_variations {
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 11px !important;
    color: var(--sjolie-mocha, #7a6355) !important;
    margin-left: 8px !important;
}

/* Responsive */
@media (max-width: 480px) {
    .sjolie-variant-swatch {
        padding: 8px 14px;
        min-width: 60px;
        font-size: 11px !important;
    }
}


/* ============================================
   VARIANT SWATCHES: Brand Color Upgrade
   ============================================ */

/* Unselected swatch — warm cream with caramel border */
.sjolie-variant-swatch {
    border-color: var(--sjolie-sand, #dcbfa6) !important;
    background: var(--sjolie-cream, #faf7f4) !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Hover — caramel accent */
.sjolie-variant-swatch:hover {
    border-color: var(--sjolie-caramel, #a67c5b) !important;
    background: #f5ece3 !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Active/selected — rich caramel brown */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: var(--sjolie-caramel, #a67c5b) !important;
    background: var(--sjolie-caramel, #a67c5b) !important;
    color: #ffffff !important;
}

/* Also style the label to use brand font */
.variations th.label label {
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Clear link styling */
.variations .reset_variations {
    color: var(--sjolie-caramel, #a67c5b) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

.variations .reset_variations:hover {
    color: var(--sjolie-espresso, #3c2415) !important;
}


/* ============================================
   VARIANT SWATCHES: Darker Nude Color Scheme
   ============================================ */

/* Unselected — soft warm nude with subtle border */
.sjolie-variant-swatch {
    border-color: #c9a98c !important;
    background: #f0e6dc !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Hover — warm mid-nude */
.sjolie-variant-swatch:hover {
    border-color: #8b6548 !important;
    background: #e4d3c3 !important;
}

/* Active/selected — deep dark nude/mocha */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: var(--sjolie-espresso, #3a2d27) !important;
    background: var(--sjolie-espresso, #3a2d27) !important;
    color: #ffffff !important;
}


/* ============================================
   ADD TO CART BUTTON: Match Dark Nude Scheme
   ============================================ */

/* Single product Add to Cart button */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
    background-color: var(--sjolie-espresso, #3a2d27) !important;
    border-color: var(--sjolie-espresso, #3a2d27) !important;
    color: #ffffff !important;
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    border-radius: 4px !important;
    transition: all 0.25s ease !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover {
    background-color: #553a26 !important;
    border-color: #553a26 !important;
    color: #ffffff !important;
}

/* Quantity buttons to match */
.single-product .quantity .plus,
.single-product .quantity .minus {
    border-color: #c9a98c !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

.single-product .quantity .plus:hover,
.single-product .quantity .minus:hover {
    background: #f0e6dc !important;
    border-color: var(--sjolie-espresso, #3a2d27) !important;
}


/* ============================================
   FIX: Hide duplicate price near product title
   ============================================ */

/* Hide the price range displayed directly in summary-inner (under title) */
.single-product.sjolie-has-variants .summary-inner > .price {
    display: none !important;
}


/* ============================================
   SJOLIE PRO PRICE BADGE — above both prices
   ============================================ */

.sjolie-pro-badge {
    display: inline-block;
    background: var(--sjolie-espresso, #3a2d27) !important;
    color: #ffffff !important;
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 3px;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

.woocommerce-variation-price .price {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
}

.woocommerce-variation-price .price ins {
    text-decoration: none !important;
}


/* ============================================
   VARIANT SELECTOR: Box/Swatch Style
   ============================================ */

/* Hide the original select dropdown when swatches are active */
.sjolie-has-swatches select[name^="attribute_"] {
    display: none !important;
}

/* Swatch container */
.sjolie-variant-swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0;
}

/* Individual swatch button */
.sjolie-variant-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    min-width: 80px;
    border: 1.5px solid var(--sjolie-border, #e8ddd4);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso, #3c2415) !important;
    transition: all 0.2s ease;
    user-select: none;
}

.sjolie-variant-swatch:hover {
    border-color: var(--sjolie-caramel, #a67c5b);
    background: var(--sjolie-cream, #faf7f4);
}

/* Active/selected state */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: var(--sjolie-espresso, #3c2415);
    background: var(--sjolie-espresso, #3c2415);
    color: #ffffff !important;
}

/* Disabled/unavailable state */
.sjolie-variant-swatch.sjolie-swatch-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Label styling */
.variations th.label {
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso, #3c2415) !important;
    padding-right: 16px !important;
    vertical-align: top !important;
    padding-top: 12px !important;
}

/* Clear button styling */
.variations .reset_variations {
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 11px !important;
    color: var(--sjolie-mocha, #7a6355) !important;
    margin-left: 8px !important;
}

/* Responsive */
@media (max-width: 480px) {
    .sjolie-variant-swatch {
        padding: 8px 14px;
        min-width: 60px;
        font-size: 11px !important;
    }
}


/* ============================================
   VARIANT SWATCHES: Brand Color Upgrade
   ============================================ */

/* Unselected swatch — warm cream with caramel border */
.sjolie-variant-swatch {
    border-color: var(--sjolie-sand, #dcbfa6) !important;
    background: var(--sjolie-cream, #faf7f4) !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Hover — caramel accent */
.sjolie-variant-swatch:hover {
    border-color: var(--sjolie-caramel, #a67c5b) !important;
    background: #f5ece3 !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Active/selected — rich caramel brown */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: var(--sjolie-caramel, #a67c5b) !important;
    background: var(--sjolie-caramel, #a67c5b) !important;
    color: #ffffff !important;
}

/* Also style the label to use brand font */
.variations th.label label {
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Clear link styling */
.variations .reset_variations {
    color: var(--sjolie-caramel, #a67c5b) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

.variations .reset_variations:hover {
    color: var(--sjolie-espresso, #3c2415) !important;
}


/* ============================================
   VARIANT SWATCHES: Darker Nude Color Scheme
   ============================================ */

/* Unselected — soft warm nude with subtle border */
.sjolie-variant-swatch {
    border-color: #c9a98c !important;
    background: #f0e6dc !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

/* Hover — warm mid-nude */
.sjolie-variant-swatch:hover {
    border-color: #8b6548 !important;
    background: #e4d3c3 !important;
}

/* Active/selected — deep dark nude/mocha */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: var(--sjolie-espresso, #3a2d27) !important;
    background: var(--sjolie-espresso, #3a2d27) !important;
    color: #ffffff !important;
}


/* ============================================
   ADD TO CART BUTTON: Match Dark Nude Scheme
   ============================================ */

/* Single product Add to Cart button */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
    background-color: var(--sjolie-espresso, #3a2d27) !important;
    border-color: var(--sjolie-espresso, #3a2d27) !important;
    color: #ffffff !important;
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    border-radius: 4px !important;
    transition: all 0.25s ease !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover {
    background-color: #553a26 !important;
    border-color: #553a26 !important;
    color: #ffffff !important;
}

/* Quantity buttons to match */
.single-product .quantity .plus,
.single-product .quantity .minus {
    border-color: #c9a98c !important;
    color: var(--sjolie-espresso, #3c2415) !important;
}

.single-product .quantity .plus:hover,
.single-product .quantity .minus:hover {
    background: #f0e6dc !important;
    border-color: var(--sjolie-espresso, #3a2d27) !important;
}


/* ============================================
   FIX: Hide duplicate price near product title
   ============================================ */

/* Hide the price range displayed directly in summary-inner (under title) */
.single-product.sjolie-has-variants .summary-inner > .price {
    display: none !important;
}


/* ============================================
   SJOLIE PRO PRICE BADGE
   ============================================ */

.sjolie-pro-badge {
    display: inline-block;
    background: var(--sjolie-espresso, #3c2415);
    color: #ffffff !important;
    font-family: var(--sjolie-sans, 'Poppins', sans-serif) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    line-height: 1.4 !important;
}

/* Make the variation price area stack nicely */
.woocommerce-variation-price .price {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px 0 !important;
}

/* Keep the del (original price) and ins (sale price) inline */
.woocommerce-variation-price .price del {
    order: 1;
    margin-right: 8px !important;
}

.woocommerce-variation-price .price .sjolie-pro-badge {
    order: 2;
}

.woocommerce-variation-price .price ins {
    order: 3;
    text-decoration: none !important;
}
/* ============================================
   LAYOUT GRID RULES — Matching Mockup 2 Editorial
   ============================================ */

/* ─── FULL-WIDTH SECTION SYSTEM ─── */
.sjolie-fw-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 80px 0;
    position: relative;
}
.sjolie-fw-white {
    background: #ffffff;
}
.sjolie-fw-cream {
    background: var(--sjolie-pearl, #f3ece3);
}
.sjolie-fw-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px;
}
.sjolie-fw-header {
    text-align: center;
    margin-bottom: 60px;
}
.sjolie-fw-compact {
    padding: 56px 0;
}
.sjolie-fw-last {
    padding-bottom: 64px;
}

/* ─── SECTION LABELS & TITLES ─── */
.sjolie-section-label {
    display: block;
    font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-caramel, #b4926e);
    margin-bottom: 16px;
    font-weight: 500;
}
.sjolie-section-title {
    font-family: var(--sjolie-serif, 'Playfair Display', serif);
    font-size: 36px;
    font-weight: 300;
    color: var(--sjolie-espresso, #3a2d27);
    line-height: 1.3;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

/* ─── STORY GRID (TWO-COLUMN: image + text) ─── */
.sjolie-story-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
}
.sjolie-story-grid.sjolie-story-reverse {
    direction: rtl;
}
.sjolie-story-grid.sjolie-story-reverse > * {
    direction: ltr;
}
.sjolie-story-grid.sjolie-story-text-only {
    grid-template-columns: 1fr !important;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    gap: 0 !important;
}
.sjolie-story-image {
    overflow: hidden;
    aspect-ratio: 4/5;
    border-radius: 0;
}
.sjolie-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sjolie-story-content {
    padding: 20px 0;
}

/* ─── INGREDIENTS GRID (4-col cards) ─── */
.sjolie-ing-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
}
.sjolie-ing-grid.sjolie-ing-grid-3col {
    grid-template-columns: repeat(3, 1fr) !important;
}
.sjolie-ing-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ─── STEPS GRID (3-column with connecting line) ─── */
.sjolie-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 48px !important;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}
/* Line removed — was cutting through step numbers */
.sjolie-step {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* ─── TRUST BAR (6-col icons) ─── */
.sjolie-trust-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}
.sjolie-trust-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
}
.sjolie-trust-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sjolie-trust-item strong {
    font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sjolie-espresso, #3a2d27);
    font-weight: 600;
}
.sjolie-trust-item span {
    font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
    font-size: 11px;
    color: var(--sjolie-mocha, #6b5a50);
    font-weight: 300;
}

/* ─── FULL INGREDIENT LIST (bottom text) ─── */
.sjolie-ingredients-list {
    font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
    font-size: 12px;
    line-height: 1.8;
    color: var(--sjolie-mocha, #6b5a50);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* ─── PRODUCT CONTENT AREA ─── */
.sjolie-product-content-area {
    margin-top: 0;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .sjolie-fw-inner {
        padding: 0 40px;
    }
    .sjolie-story-grid {
        gap: 48px !important;
    }
}

@media (max-width: 768px) {
    .sjolie-story-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .sjolie-story-grid.sjolie-story-reverse {
        direction: ltr;
    }
    .sjolie-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .sjolie-steps-grid::before {
        display: none;
    }
    .sjolie-ing-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .sjolie-fw-section {
        padding: 48px 0;
    }
    .sjolie-fw-inner {
        padding: 0 20px;
    }
    .sjolie-section-title {
        font-size: 28px;
    }
    .sjolie-trust-bar {
    display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .sjolie-ing-grid {
        grid-template-columns: 1fr !important;
    }
    .sjolie-trust-bar {
    display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}



/* ═══════════════════════════════════════════════════════
   FIX: Marquee bar — full viewport width breakout
   ═══════════════════════════════════════════════════════ */
.sjolie-marquee {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: FAQ section — full-width + Template 2 design
   Match: mockup-2-editorial-luxury.html .faq-section
   ═══════════════════════════════════════════════════════ */
.sjolie-faq-section--dark {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative !important;
    background: var(--sjolie-espresso, #3a2d27) !important;
    padding: 80px 80px !important;
    max-width: none !important;
    border-radius: 0 !important;
}

.sjolie-faq-section--dark .sjolie-faq-wrapper {
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* FAQ header: centered label + title */
.sjolie-faq-section--dark .sjolie-faq-label {
    display: block !important;
    text-align: center !important;
    font-family: var(--sjolie-sans, DM Sans, sans-serif) !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-sand, #dcbfa6) !important;
    margin-bottom: 16px !important;
    font-weight: 500 !important;
}

.sjolie-faq-section--dark .sjolie-faq-title {
    text-align: center !important;
    font-family: var(--sjolie-serif, Playfair Display, serif) !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    color: var(--sjolie-cream, #fbfbf8) !important;
    line-height: 1.3 !important;
    margin-bottom: 48px !important;
}

/* FAQ items: transparent bg with subtle border, no white boxes */
.sjolie-faq-section--dark .sjolie-faq-item {
    border-bottom: 1px solid rgba(220,191,166,0.2) !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FAQ question buttons */
.sjolie-faq-section--dark .sjolie-faq-question {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 22px 0 !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: var(--sjolie-cream, #fbfbf8) !important;
    font-weight: 400 !important;
    background: none !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    font-family: var(--sjolie-sans, DM Sans, sans-serif) !important;
    transition: color 0.2s !important;
}

.sjolie-faq-section--dark .sjolie-faq-question:hover {
    color: var(--sjolie-sand, #dcbfa6) !important;
}

/* FAQ icon (+/x) */
.sjolie-faq-section--dark .sjolie-faq-icon {
    font-size: 18px !important;
    color: var(--sjolie-sand, #dcbfa6) !important;
    transition: transform 0.3s !important;
    flex-shrink: 0 !important;
    margin-left: 20px !important;
}

/* FAQ answer text */
.sjolie-faq-section--dark .sjolie-faq-answer {
    color: var(--sjolie-sand, #dcbfa6) !important;
    line-height: 1.8 !important;
    font-size: 13px !important;
    background: transparent !important;
    padding: 0 !important;
}

.sjolie-faq-section--dark .sjolie-faq-answer p {
    color: var(--sjolie-sand, #dcbfa6) !important;
    margin: 0 0 22px 0 !important;
}

/* Override any WoodMart accordion/card styles leaking in */
.sjolie-faq-section--dark .sjolie-faq-item,
.sjolie-faq-section--dark .sjolie-faq-item *,
.sjolie-faq-section--dark .sjolie-faq-question {
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   BIG FIX BATCH — 2026-03-04
   1. Gallery background → white
   2. Center + constrain product image/summary
   3. FAQ accordion class fix
   4. White bar between sections fix
   5. Full header/logo/nav restoration
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. PRODUCT IMAGE AREA: White background ─── */
.single-product .product-image-summary .product-images {
    background: #ffffff !important;
}


/* ─── 2. CENTER + CONSTRAIN PRODUCT IMAGE/SUMMARY ─── */
.single-product .container-fluid {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.single-product .product-image-summary {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
}

/* Shrink the product image column */
.single-product .product-image-summary .product-images {
    max-width: 480px !important;
    flex: 0 0 480px !important;
}

/* Give summary breathing room */
.single-product .product-image-summary .summary {
    flex: 1 !important;
    padding-left: 60px !important;
    max-width: 600px !important;
}

/* Thumbnail strip also constrained */
.single-product .product-image-summary .thumbnails {
    max-width: 480px !important;
}


/* ─── 3. FAQ ACCORDION FIX ─── */
/* The JS toggle uses .sjolie-faq-open class and display:block/none.
   Override the max-height approach to work with both patterns. */
.sjolie-faq-section--dark .sjolie-faq-answer {
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
}

/* When item is open (JS sets display:block on answer) */
.sjolie-faq-item.sjolie-faq-open .sjolie-faq-answer {
    padding-bottom: 22px !important;
}


/* ─── 4. WHITE BAR FIX: Between Ingredient List and FAQ ─── */
/* Kill gap from Woodmart product-tabs-wrapper */
.single-product .product-tabs-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.single-product .product-tabs-inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Restore centering on product-tabs-inner container */
.single-product .product-tabs-inner.container,
.single-product .container.product-tabs-inner {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Last section before FAQ — kill bottom gap */
.sjolie-fw-section.sjolie-fw-last {
    margin-bottom: 0 !important;
    padding-bottom: 48px !important;
}

/* Remove gap between product-content-area and FAQ */
.sjolie-product-content-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Kill any gap on the last fw-section inside content area */
.sjolie-product-content-area > .sjolie-fw-section:last-child {
    margin-bottom: -20px !important;
}


/* ═══════════════════════════════════════════════════════════════
   5. HEADER / LOGO / NAVIGATION RESTORATION
   (Lost during CSS wipe — recovered from transcript)
   ═══════════════════════════════════════════════════════════════ */

/* ─── MAIN HEADER WRAPPER ─── */
.whb-row.whb-general-header,
.whb-general-header {
    background: var(--sjolie-cream) !important;
    border-bottom: 1px solid var(--sjolie-border, rgba(220,191,166,0.25)) !important;
    transition: all 0.3s ease;
}

/* Sticky header */
.whb-sticky-shadow.whb-scroll-stick .whb-general-header,
.whb-sticked .whb-general-header {
    background: rgba(251, 251, 248, 0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 12px rgba(58, 45, 39, 0.06) !important;
}

/* ─── HEADER INNER CONTAINER ─── */
.whb-general-header .container,
.whb-general-header .whb-flex-row {
    max-width: 1400px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* ─── LOGO ─── */
.woodmart-logo img,
.whb-general-header .woodmart-logo img,
.wd-header-logo img {
    max-height: 48px !important;
    width: auto !important;
    transition: opacity 0.3s ease;
}

.woodmart-logo:hover img,
.wd-header-logo:hover img {
    opacity: 0.75;
}

/* ─── MAIN NAVIGATION ITEMS ─── */
.whb-general-header .wd-nav-main > li > a,
.whb-general-header .wd-nav > li > a,
.woodmart-navigation .menu > li > a {
    font-family: var(--sjolie-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso) !important;
    padding: 0 18px !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
    position: relative;
}

.whb-general-header .wd-nav-main > li > a:hover,
.whb-general-header .wd-nav > li > a:hover,
.woodmart-navigation .menu > li > a:hover {
    color: var(--sjolie-caramel) !important;
    opacity: 1;
}

/* Active menu item */
.whb-general-header .wd-nav-main > li.current-menu-item > a,
.whb-general-header .wd-nav-main > li.current-menu-parent > a {
    color: var(--sjolie-caramel) !important;
}

/* Subtle underline on hover */
.whb-general-header .wd-nav-main > li > a::after,
.whb-general-header .wd-nav > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--sjolie-caramel);
    transition: width 0.3s ease, left 0.3s ease;
}

.whb-general-header .wd-nav-main > li > a:hover::after,
.whb-general-header .wd-nav > li > a:hover::after,
.whb-general-header .wd-nav-main > li.current-menu-item > a::after {
    width: 60%;
    left: 20%;
}

/* Remove Woodmart default underline effects */
.whb-general-header .wd-nav-main > li > a .nav-link-text::after,
.whb-general-header .wd-nav > li > a .nav-link-text::after,
.woodmart-navigation .menu > li > a .nav-link-text::after {
    display: none !important;
}

/* ─── HEADER ICONS (Search, Cart, Account) ─── */
.whb-general-header .wd-tools-element > a,
.whb-general-header .wd-header-search-form > a,
.whb-general-header .wd-header-cart > a,
.whb-general-header .wd-header-my-account > a {
    color: var(--sjolie-espresso) !important;
    transition: color 0.3s ease !important;
}

.whb-general-header .wd-tools-element > a:hover,
.whb-general-header .wd-header-search-form > a:hover,
.whb-general-header .wd-header-cart > a:hover,
.whb-general-header .wd-header-my-account > a:hover {
    color: var(--sjolie-caramel) !important;
}

/* Cart count badge */
.whb-general-header .wd-cart-number,
.wd-header-cart .wd-cart-number {
    background: var(--sjolie-espresso) !important;
    color: #ffffff !important;
    font-family: var(--sjolie-sans) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
}

/* ─── MEGA MENU DROPDOWN ─── */
.wd-dropdown-menu,
.woodmart-navigation .menu > li .wd-dropdown-menu,
.wd-nav-main > li .wd-dropdown-menu,
.woodmart-navigation .sub-menu-dropdown,
.wd-dropdown {
    background: var(--sjolie-cream) !important;
    border: none !important;
    border-top: 1px solid var(--sjolie-border, rgba(220,191,166,0.25)) !important;
    box-shadow: 0 12px 40px rgba(58, 45, 39, 0.08) !important;
    padding: 32px 0 !important;
}

.wd-dropdown-menu .wd-sub-menu-title,
.wd-dropdown .container .wd-sub-menu-title,
.woodmart-navigation .wd-dropdown-menu .extra-menu-title a,
.extra-menu-title a,
.extra-menu .extra-menu-title {
    font-family: var(--sjolie-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--sjolie-border, rgba(220,191,166,0.25)) !important;
}

.wd-dropdown-menu .sub-menu a,
.wd-dropdown-menu .wd-sub-menu a,
.extra-menu-list a,
.wd-dropdown .extra-menu-list a {
    font-family: var(--sjolie-sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--sjolie-mocha) !important;
    padding: 6px 0 !important;
    letter-spacing: 0.02em !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.wd-dropdown-menu .sub-menu a:hover,
.wd-dropdown-menu .wd-sub-menu a:hover,
.extra-menu-list a:hover,
.wd-dropdown .extra-menu-list a:hover {
    color: var(--sjolie-caramel) !important;
    padding-left: 4px !important;
}

/* Dropdown animation */
.wd-dropdown-menu,
.wd-dropdown {
    animation: sjolieFadeIn 0.25s ease;
}

@keyframes sjolieFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── TOP BAR ─── */
.whb-row.whb-top-bar,
.whb-top-bar {
    background: var(--sjolie-espresso) !important;
    color: var(--sjolie-pearl) !important;
    font-family: var(--sjolie-sans) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
}

.whb-top-bar a {
    color: var(--sjolie-sand) !important;
}

.whb-top-bar a:hover {
    color: #ffffff !important;
}

/* ─── CENTER-LOGO HEADER FIXES ─── */
.whb-general-header .whb-column-center,
.whb-general-header .whb-col-center {
    text-align: center !important;
    justify-content: center !important;
}

.whb-general-header .whb-column-left,
.whb-general-header .whb-col-left {
    justify-content: flex-start !important;
}

.whb-general-header .whb-column-right,
.whb-general-header .whb-col-right {
    justify-content: flex-end !important;
}

/* Hide "LOGIN / REGISTER" text, icon only */
.whb-general-header .wd-header-my-account .wd-tools-text {
    display: none !important;
}

/* Fix empty header bottom bar */
.whb-row.whb-header-bottom:empty,
.whb-header-bottom .container:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.whb-row.whb-header-bottom {
    min-height: 0 !important;
    height: auto !important;
}

/* ─── SEARCH OVERLAY ─── */
.wd-search-full-screen,
.wd-search-overlay {
    background: rgba(251, 251, 248, 0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.wd-search-full-screen .searchform input[type="text"],
.wd-search-overlay input[type="text"] {
    font-family: var(--sjolie-serif) !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: var(--sjolie-espresso) !important;
    border-bottom: 2px solid var(--sjolie-border, rgba(220,191,166,0.25)) !important;
    background: transparent !important;
}

.wd-search-full-screen .searchform input[type="text"]:focus,
.wd-search-overlay input[type="text"]:focus {
    border-bottom-color: var(--sjolie-caramel) !important;
}

/* ─── CART SIDE PANEL ─── */
.wd-cart-design-side .cart-widget-side,
.cart-widget-side {
    background: var(--sjolie-cream) !important;
}

.cart-widget-side .widget_shopping_cart_content .product-title a {
    font-family: var(--sjolie-sans) !important;
    color: var(--sjolie-espresso) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.cart-widget-side .widget_shopping_cart_content .amount {
    font-family: var(--sjolie-serif) !important;
    color: var(--sjolie-espresso) !important;
}

/* ─── MOBILE HEADER ─── */
@media (max-width: 1024px) {
    .whb-general-header .container,
    .whb-general-header .whb-flex-row {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .whb-general-header .wd-nav-main > li > a,
    .whb-general-header .wd-nav > li > a {
        padding: 0 12px !important;
    }
}

/* ─── MOBILE SIDE PANEL ─── */
.wd-side-menu,
.wd-side-hidden,
.mobile-nav {
    background: var(--sjolie-cream) !important;
}

.wd-side-menu .wd-nav-mobile > li > a,
.mobile-nav .menu li a {
    font-family: var(--sjolie-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso) !important;
    border-bottom: 1px solid var(--sjolie-border, rgba(220,191,166,0.25)) !important;
    padding: 14px 20px !important;
}

.wd-side-menu .wd-nav-mobile .sub-menu a,
.mobile-nav .menu .sub-menu li a {
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    color: var(--sjolie-mocha) !important;
    padding: 10px 20px 10px 36px !important;
}

.wd-burger-icon .wd-tools-icon,
.whb-general-header .wd-burger-icon {
    color: var(--sjolie-espresso) !important;
}


/* ═══════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — dark espresso, static
   ═══════════════════════════════════════════════════════ */
.sjolie-announcement-bar {
    background: var(--sjolie-espresso, #3a2d27) !important;
    color: var(--sjolie-sand, #dcbfa6) !important;
    text-align: center !important;
    padding: 10px 20px !important;
    font-family: var(--sjolie-sans, "DM Sans", sans-serif) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.sjolie-announcement-bar span {
    color: var(--sjolie-sand, #dcbfa6) !important;
}

.sjolie-announcement-sep {
    color: var(--sjolie-caramel, #b4926e) !important;
    font-size: 8px !important;
    opacity: 0.6 !important;
}

@media (max-width: 768px) {
    .sjolie-announcement-bar {
        font-size: 10px !important;
        letter-spacing: 1px !important;
        padding: 8px 16px !important;
        gap: 8px !important;
    }
    .sjolie-announcement-sep {
        display: none !important;
    }
    .sjolie-announcement-bar span {
        display: none !important;
    }
    .sjolie-announcement-bar span:first-child {
        display: inline !important;
    }
}


/* ═══════════════════════════════════════════════════════
   BUTTON COLOR — warm mid-brown (between espresso & mocha)
   ═══════════════════════════════════════════════════════ */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
    background-color: #5c4a3e !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover {
    background-color: #4a3b31 !important;
}

/* Active swatch to match */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: #5c4a3e !important;
    background: #5c4a3e !important;
}

/* Pro badge to match */
.sjolie-pro-badge {
    background: #5c4a3e !important;
}


/* ═══════════════════════════════════════════════════════
   SITE-WIDE DARK COLOR: #5c4a3e (warm mid-brown)
   Replaces #3a2d27 espresso as the primary dark accent
   ═══════════════════════════════════════════════════════ */

/* Announcement bar */
.sjolie-announcement-bar {
    background: #5c4a3e !important;
}

/* Scrolling marquee bar */
.sjolie-marquee {
    background: #5c4a3e !important;
}

/* FAQ section background */
.sjolie-faq-section--dark {
    background: #5c4a3e !important;
}

/* Cart badge */
.whb-general-header .wd-cart-number,
.wd-header-cart .wd-cart-number {
    background: #5c4a3e !important;
}


/* ═══════════════════════════════════════════════════════
   FOOTER — warm mid-brown #5c4a3e + Sjolie typography
   ═══════════════════════════════════════════════════════ */
.footer-container,
.site-footer,
footer.wd-footer {
    background: #5c4a3e !important;
}

/* Footer headings */
.footer-container .widget-title,
.footer-container h1,
.footer-container h2,
.footer-container h3,
.footer-container h4,
.footer-container h5 {
    font-family: var(--sjolie-sans, "DM Sans", sans-serif) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-cream, #fbfbf8) !important;
    margin-bottom: 20px !important;
}

/* Footer links */
.footer-container a,
.footer-container .widget a {
    font-family: var(--sjolie-sans, "DM Sans", sans-serif) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--sjolie-sand, #dcbfa6) !important;
    transition: color 0.2s ease !important;
    letter-spacing: 0.02em !important;
}

.footer-container a:hover,
.footer-container .widget a:hover {
    color: #ffffff !important;
}

/* Footer text */
.footer-container,
.footer-container p,
.footer-container .textwidget,
.footer-container .widget {
    font-family: var(--sjolie-sans, "DM Sans", sans-serif) !important;
    color: var(--sjolie-sand, #dcbfa6) !important;
    font-size: 13px !important;
}

/* Newsletter email input */
.footer-container input[type="email"],
.footer-container input[type="text"] {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(220,191,166,0.3) !important;
    color: #ffffff !important;
    font-family: var(--sjolie-sans, "DM Sans", sans-serif) !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
}

.footer-container input[type="email"]::placeholder {
    color: var(--sjolie-sand, #dcbfa6) !important;
    opacity: 0.6 !important;
}

/* Newsletter button */
.footer-container button,
.footer-container input[type="submit"],
.footer-container .mc4wp-form-fields input[type="submit"] {
    background: var(--sjolie-caramel, #b4926e) !important;
    color: #ffffff !important;
    font-family: var(--sjolie-sans, "DM Sans", sans-serif) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 24px !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
}

.footer-container button:hover,
.footer-container input[type="submit"]:hover {
    background: var(--sjolie-sand, #dcbfa6) !important;
    color: #5c4a3e !important;
}

/* Copyrights bar */
.wd-copyrights,
.copyrights-wrapper {
    border-top: 1px solid rgba(220,191,166,0.15) !important;
    font-family: var(--sjolie-sans, "DM Sans", sans-serif) !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    color: var(--sjolie-sand, #dcbfa6) !important;
    opacity: 0.6 !important;
}


/* ═══════════════════════════════════════════════════════
   COLOR REVISION: #4a3c33 — warm dark brown
   Midpoint between #5c4a3e and #3a2d27
   Applied site-wide as THE dark accent color
   ═══════════════════════════════════════════════════════ */

/* Announcement bar */
.sjolie-announcement-bar { background: #4a3c33 !important; }

/* Scrolling marquee */
.sjolie-marquee { background: #4a3c33 !important; }

/* FAQ section */
.sjolie-faq-section--dark { background: #4a3c33 !important; }

/* Footer */
.footer-container, .site-footer, footer.wd-footer { background: #4a3c33 !important; }

/* Buttons */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button { background-color: #4a3c33 !important; }
.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover { background-color: #3a2f27 !important; }

/* Active swatch */
.sjolie-variant-swatch.sjolie-swatch-active {
    border-color: #4a3c33 !important;
    background: #4a3c33 !important;
}

/* Pro badge */
.sjolie-pro-badge { background: #4a3c33 !important; }

/* Cart badge */
.whb-general-header .wd-cart-number,
.wd-header-cart .wd-cart-number { background: #4a3c33 !important; }

/* Newsletter button stays caramel for contrast */

/* ── Pro Badge: outline style ── */
.sjolie-pro-badge {
    background: transparent !important;
    color: #4a3c33 !important;
    border: 1.5px solid #4a3c33 !important;
    font-family: var(--sjolie-sans) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    display: inline-block !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
}
.woocommerce-variation-price .price .sjolie-pro-badge {
    background: transparent !important;
    color: #4a3c33 !important;
    border: 1.5px solid #4a3c33 !important;
}

/* ── Mega Menu Styling (SHOP & DISCOVER) ── */
/* Dropdown background — match simple dropdown cream */
.menu-mega-dropdown > .wd-dropdown-menu {
    background: var(--sjolie-cream, #fbfbf8) !important;
    border-top: 1px solid #e8ddd4 !important;
}

/* Category headings — DM Sans uppercase with letter-spacing */
.sjolie-mega-heading {
    font-family: var(--sjolie-sans, "DM Sans") !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-espresso, #3a2d27) !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(180, 146, 110, 0.2) !important;
}

/* Menu links — DM Sans, mocha color, caramel hover */
.sjolie-mega-links li a {
    font-family: var(--sjolie-sans, "DM Sans") !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--sjolie-mocha, #6b5a50) !important;
    letter-spacing: 0.3px !important;
    padding: 5px 0 !important;
    transition: color 0.3s ease !important;
}
.sjolie-mega-links li a:hover {
    color: var(--sjolie-caramel, #b4926e) !important;
}

/* Bullet styling */
.sjolie-mega-links li {
    list-style: none !important;
    padding: 3px 0 !important;
}
.sjolie-mega-links li::marker {
    color: var(--sjolie-caramel, #b4926e) !important;
}

/* Mega menu columns spacing */
.sjolie-mega-col {
    padding: 10px 20px !important;
}
.sjolie-mega-menu {
    display: flex !important;
    padding: 20px 10px !important;
}

/* ── Mega Menu: center columns ── */
.menu-mega-dropdown > .wd-dropdown-menu > .container {
    display: flex !important;
    justify-content: center !important;
}
.sjolie-mega-menu {
    justify-content: center !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
.sjolie-mega-col {
    flex: 0 1 auto !important;
    min-width: 220px !important;
}

/* ── Story Grid: alternating layout fix ── */
/* Override direction trick — use explicit grid placement instead */
.sjolie-story-grid.sjolie-story-reverse {
    direction: ltr !important;
}
.sjolie-story-grid.sjolie-story-reverse > .sjolie-story-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.sjolie-story-grid.sjolie-story-reverse > .sjolie-story-image {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* ── Story Grid: heading, label, body typography ── */
.sjolie-story-label {
    display: block !important;
    font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--sjolie-caramel, #b4926e) !important;
    margin-bottom: 16px !important;
    font-weight: 500 !important;
}
.sjolie-story-heading {
    font-family: var(--sjolie-serif, 'Playfair Display', serif) !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    color: var(--sjolie-espresso, #3a2d27) !important;
    line-height: 1.3 !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.5px !important;
}
.sjolie-story-body p {
    font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: var(--sjolie-mocha, #6b5a50) !important;
    line-height: 1.8 !important;
    margin-bottom: 16px !important;
}

/* ── Standalone sections: center label + title ── */
.sjolie-fw-section > .sjolie-fw-inner > .sjolie-section-label,
.sjolie-fw-section > .sjolie-fw-inner > .sjolie-section-title {
    text-align: center !important;
}


/* ── Trust Bar: white background + brand text colors ── */
/* Background — white with generous padding */
.sjolie-fw-section.sjolie-fw-compact:has(.sjolie-trust-bar) {
    background: #ffffff !important;
    padding: 72px 0 !important;
}

/* Circle icon holders — cream/pearl background, 93px */
.sjolie-fw-section.sjolie-fw-compact:has(.sjolie-trust-bar) .sjolie-trust-icon {
    width: 93px !important;
    height: 93px !important;
    padding: 16px !important;
    border-radius: 50% !important;
    background: var(--sjolie-pearl, #f3ece3) !important;
    filter: none !important;
    opacity: 1 !important;
    object-fit: contain !important;
}

/* Trust item gap */
.sjolie-fw-section.sjolie-fw-compact:has(.sjolie-trust-bar) .sjolie-trust-item {
    gap: 8px !important;
}

/* Trust bar text — espresso titles, mocha descriptions (matches white-bg sections) */
.sjolie-trust-bar .sjolie-trust-item strong,
.sjolie-trust-bar .sjolie-trust-item .sjolie-trust-title,
.sjolie-trust-bar .sjolie-trust-item span.sjolie-trust-title {
    color: var(--sjolie-espresso, #3a2d27) !important;
    -webkit-text-fill-color: var(--sjolie-espresso, #3a2d27) !important;
}
.sjolie-trust-bar .sjolie-trust-item span,
.sjolie-trust-bar .sjolie-trust-item .sjolie-trust-desc,
.sjolie-trust-bar .sjolie-trust-item span.sjolie-trust-desc {
    color: var(--sjolie-mocha, #6b5a50) !important;
    -webkit-text-fill-color: var(--sjolie-mocha, #6b5a50) !important;
}
/* Override: title spans should stay espresso (not mocha from generic span rule above) */
.sjolie-trust-bar .sjolie-trust-item span.sjolie-trust-title {
    color: var(--sjolie-espresso, #3a2d27) !important;
    -webkit-text-fill-color: var(--sjolie-espresso, #3a2d27) !important;
}

/* =============================================
   STARTER KIT PAGE STYLES
   ============================================= */

/* --- Video Education Section --- */
.sjolie-kit-video-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: start;
}
.sjolie-kit-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(58,45,39,0.10);
}
.sjolie-kit-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.sjolie-kit-video-details {
  background: var(--sjolie-pearl);
  border-radius: 4px;
  padding: 28px 24px;
}
@media (max-width: 768px) {
  .sjolie-kit-video-wrap {
    grid-template-columns: 1fr;
  }
}

/* --- Persona Cards --- */
.sjolie-kit-persona-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.sjolie-kit-persona {
  text-align: center;
  padding: 32px 20px 28px;
  background: var(--sjolie-pearl);
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sjolie-kit-persona:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(58,45,39,0.08);
}
.sjolie-kit-persona-icon {
  margin-bottom: 16px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sjolie-kit-persona-title {
  font-family: var(--sjolie-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sjolie-espresso);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.sjolie-kit-persona-desc {
  font-family: var(--sjolie-sans);
  font-size: 0.92rem;
  color: var(--sjolie-mocha);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 900px) {
  .sjolie-kit-persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .sjolie-kit-persona-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Kit Item Cards --- */
.sjolie-kit-item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.sjolie-kit-item {
  background: #fff;
  border-radius: 4px;
  padding: 26px 22px 22px;
  position: relative;
  border: 1px solid var(--sjolie-sand);
  transition: box-shadow 0.2s ease;
}
.sjolie-kit-item:hover {
  box-shadow: 0 4px 18px rgba(58,45,39,0.07);
}
.sjolie-kit-item-badge {
  display: inline-block;
  font-family: var(--sjolie-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sjolie-caramel);
  background: rgba(180,146,110,0.1);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.sjolie-kit-item-name {
  font-family: var(--sjolie-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sjolie-espresso);
  margin: 0 0 8px;
  line-height: 1.35;
}
.sjolie-kit-item-desc {
  font-family: var(--sjolie-sans);
  font-size: 0.88rem;
  color: var(--sjolie-mocha);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .sjolie-kit-item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .sjolie-kit-item-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Income Projection Cards --- */
.sjolie-kit-income-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}
.sjolie-kit-income-card {
  text-align: center;
  padding: 36px 20px;
  background: var(--sjolie-pearl);
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.sjolie-kit-income-card:hover {
  transform: translateY(-2px);
}
.sjolie-kit-income-highlight {
  background: var(--sjolie-espresso);
}
.sjolie-kit-income-highlight .sjolie-kit-income-label,
.sjolie-kit-income-highlight .sjolie-kit-income-amount,
.sjolie-kit-income-highlight .sjolie-kit-income-period {
  color: #fff;
}
.sjolie-kit-income-highlight .sjolie-kit-income-label {
  opacity: 0.75;
}
.sjolie-kit-income-label {
  font-family: var(--sjolie-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sjolie-mocha);
  margin: 0 0 8px;
}
.sjolie-kit-income-amount {
  font-family: var(--sjolie-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--sjolie-espresso);
  margin: 0 0 4px;
  line-height: 1.2;
}
.sjolie-kit-income-period {
  font-family: var(--sjolie-sans);
  font-size: 0.82rem;
  color: var(--sjolie-mocha);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .sjolie-kit-income-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

/* --- Mobile fix: 3-col ingredient grid stacking --- */
@media (max-width: 768px) {
    .sjolie-ing-grid.sjolie-ing-grid-3col {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================================
   SJOLIE RETAIL PRODUCT PAGES
   Full-bleed backgrounds with contained inner content (max 1200px)
   ===================================================================== */

/* --- RETAIL: FULL-BLEED BACKGROUNDS --- */
/* Break ALL retail sections out of WooCommerce content wrapper */
.sjolie-retail-split,
.sjolie-retail-banner,
.sjolie-retail-howto,
.sjolie-retail-ingredients,
.sjolie-retail-protip,
.sjolie-retail-trust,
.sjolie-retail-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* --- RETAIL: EDITORIAL SPLIT (image + text side-by-side) --- */
.sjolie-retail-split {
    display: flex;
    justify-content: center;
}
.sjolie-retail-split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    max-width: 1200px;
    height: 500px;
    max-height: 500px;
    overflow: hidden;
}
.sjolie-retail-split-img {
    overflow: hidden;
    height: 500px;
}
.sjolie-retail-split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reverse: flip column order inside inner */
.sjolie-retail-split.sjolie-split-reverse .sjolie-retail-split-inner {
    direction: rtl;
}
.sjolie-retail-split.sjolie-split-reverse .sjolie-retail-split-inner > * {
    direction: ltr;
}

/* Split text panel */
.sjolie-retail-split-text {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sjolie-retail-split-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sjolie-retail-split-title {
    font-family: var(--sjolie-serif);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 18px;
}
.sjolie-retail-split-body {
    max-width: 480px;
}
.sjolie-retail-split-body p {
    font-family: var(--sjolie-sans);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
}
.sjolie-retail-split-body p:last-child {
    margin-bottom: 0;
}

/* Background-color helpers (on outer split for full-bleed bg) */
.sjolie-retail-split.sjolie-bg-cream { background: var(--sjolie-cream); }
.sjolie-retail-split.sjolie-bg-white { background: var(--sjolie-white); }
.sjolie-retail-split.sjolie-bg-espresso { background: var(--sjolie-espresso); }
.sjolie-retail-split.sjolie-bg-espresso .sjolie-retail-split-label,
.sjolie-retail-split.sjolie-bg-espresso .sjolie-retail-split-title,
.sjolie-retail-split.sjolie-bg-espresso .sjolie-retail-split-body p {
    color: var(--sjolie-cream);
}

/* Text-panel bg colors (for contained text area matching) */
.sjolie-retail-split-text.sjolie-bg-cream  { background: var(--sjolie-cream); }
.sjolie-retail-split-text.sjolie-bg-white  { background: var(--sjolie-white); }
.sjolie-retail-split-text.sjolie-bg-espresso { background: var(--sjolie-espresso); }
.sjolie-retail-split-text.sjolie-bg-espresso .sjolie-retail-split-label,
.sjolie-retail-split-text.sjolie-bg-espresso .sjolie-retail-split-title,
.sjolie-retail-split-text.sjolie-bg-espresso .sjolie-retail-split-body p {
    color: var(--sjolie-cream);
}

/* Video inside split */
.sjolie-retail-video-cell {
    overflow: hidden;
}
.sjolie-retail-video-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center 30%;
}

/* --- RETAIL: FULL-WIDTH PHOTO BANNER --- */
.sjolie-retail-banner {
    display: flex;
    justify-content: center;
}
.sjolie-retail-banner img {
    max-width: 1200px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* --- RETAIL: HOW-TO STEPS --- */
.sjolie-retail-howto {
    background: var(--sjolie-cream);
    padding: 72px 24px;
    text-align: center;
}
.sjolie-retail-howto-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 8px;
}
.sjolie-retail-howto-title {
    font-family: var(--sjolie-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin: 0 0 48px;
}
.sjolie-retail-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}
.sjolie-retail-step {
    text-align: center;
}
.sjolie-retail-step-num {
    font-family: var(--sjolie-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--sjolie-caramel);
    margin-bottom: 10px;
}
.sjolie-retail-step-title {
    font-family: var(--sjolie-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
}
.sjolie-retail-step-desc {
    font-family: var(--sjolie-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--sjolie-mocha);
    margin: 0;
}

/* --- RETAIL: INGREDIENTS STRIP --- */
.sjolie-retail-ingredients {
    background: var(--sjolie-white);
    padding: 72px 24px;
    text-align: center;
}
.sjolie-retail-ingredients-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 8px;
}
.sjolie-retail-ingredients-title {
    font-family: var(--sjolie-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin: 0 0 8px;
}
.sjolie-retail-ingredients-subtitle {
    font-family: var(--sjolie-sans);
    font-size: 15px;
    color: var(--sjolie-mocha);
    margin: 0 0 48px;
}
.sjolie-retail-ing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}
.sjolie-retail-ing-card {
    text-align: center;
    padding: 28px 16px;
    background: var(--sjolie-cream);
    border-radius: 12px;
}
.sjolie-retail-ing-icon {
    margin-bottom: 14px;
}
.sjolie-retail-ing-name {
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
}
.sjolie-retail-ing-desc {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--sjolie-mocha);
    margin: 0;
}

/* --- RETAIL: PRO TIP CALLOUT --- */
.sjolie-retail-protip {
    background: var(--sjolie-espresso);
    padding: 56px 24px;
    text-align: center;
}
.sjolie-retail-protip-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
}
.sjolie-retail-protip-text {
    font-family: var(--sjolie-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-style: italic;
    line-height: 1.7;
    color: var(--sjolie-cream);
    max-width: 720px;
    margin: 0 auto;
}

/* --- RETAIL: TRUST BAR --- */
.sjolie-retail-trust {
    background: var(--sjolie-pearl);
}

/* --- RETAIL MOBILE --- */
@media (max-width: 768px) {
    .sjolie-retail-split-inner {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }
    .sjolie-retail-split.sjolie-split-reverse .sjolie-retail-split-inner {
        direction: ltr;
    }
    .sjolie-retail-split-img {
        height: 320px;
    }
    .sjolie-retail-split-text {
        padding: 40px 24px;
    }
    .sjolie-retail-banner img {
        height: 260px;
    }
    .sjolie-retail-steps {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
    }
    .sjolie-retail-ing-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .sjolie-retail-video-cell,
    .sjolie-retail-video-cell video {
        height: 420px;
    }
}
@media (max-width: 480px) {
    .sjolie-retail-split-img {
        height: 280px;
    }
    .sjolie-retail-steps {
        grid-template-columns: 1fr;
    }
    .sjolie-retail-ing-grid {
        grid-template-columns: 1fr;
    }
    .sjolie-retail-video-cell,
    .sjolie-retail-video-cell video {
        height: 360px;
    }
}

/* --- RETAIL: Remove gap between marquee and first content split --- */
.sjolie-marquee + .sjolie-product-content-area {
    margin-top: -40px;
}
/* ============================================
   SJOLIE HOMEPAGE — FRESH BUILD
   Only overrides what's needed for the homepage.
   All sections use existing sjolie-retail-* and
   sjolie-fw-* patterns from luxury.css.
   ============================================ */

/* ─── PAGE-LEVEL RESET (only kill WP gaps) ─── */
.page-id-175303 .wd-content-layout {
    padding-block: 0 !important;
    overflow: visible !important;
}
.page-id-175303 .wd-page-title {
    display: none !important;
}
.page-id-175303 .entry-content > p:empty,
.page-id-175303 .entry-content > br {
    display: none;
}
.page-id-175303 .entry-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ─── HOMEPAGE SPLIT OVERRIDES ─── */
.page-id-175303 .sjolie-retail-split-inner {
    height: 600px !important;
    max-height: 600px !important;
    overflow: hidden !important;
}
.page-id-175303 .sjolie-retail-split-img {
    height: 600px !important;
}

/* ─── HERO ─── */
.sjolie-home-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    height: 92vh;
    min-height: 560px;
    max-height: 960px;
    overflow: hidden;
}
.sjolie-home-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}
.sjolie-home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(58,45,39,0.82) 0%,
        rgba(58,45,39,0.55) 45%,
        rgba(58,45,39,0.15) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 0 0 80px 0;
}
.sjolie-home-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 48px;
}
.sjolie-home-hero-kicker {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
    font-weight: 500;
}
.sjolie-home-hero-h1 {
    font-family: var(--sjolie-serif) !important;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 300;
    color: var(--sjolie-cream);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    max-width: 680px;
}
.sjolie-home-hero-lead {
    font-family: var(--sjolie-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--sjolie-sand);
    max-width: 480px;
    margin-bottom: 32px;
    font-weight: 300;
}
.sjolie-home-hero-btns {
    display: flex;
    gap: 12px;
}
.sjolie-home-hero-btn {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 16px 36px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}
.sjolie-home-hero-btn--primary {
    background: var(--sjolie-cream);
    color: var(--sjolie-espresso) !important;
}
.sjolie-home-hero-btn--primary:hover {
    background: var(--sjolie-white);
}
.sjolie-home-hero-btn--ghost {
    background: transparent;
    color: var(--sjolie-cream) !important;
    border: 1px solid rgba(243,236,227,0.4);
}
.sjolie-home-hero-btn--ghost:hover {
    border-color: var(--sjolie-cream);
    background: rgba(255,255,255,0.08);
}

/* ─── TRUST STRIP ─── */
.sjolie-home-trust-strip {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background: var(--sjolie-espresso);
    padding: 16px 24px;
}
.sjolie-home-trust-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 0;
    font-family: var(--sjolie-sans);
    font-size: 10.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--sjolie-sand);
    font-weight: 400;
}
.sjolie-home-trust-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--sjolie-caramel);
    margin: 0 14px;
    vertical-align: middle;
}

/* ─── SHOP CATEGORIES (dark bar, text buttons) ─── */
.sjolie-home-shopnav {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background: var(--sjolie-pearl);
    padding: 56px 24px;
    text-align: center;
}
.sjolie-home-shopnav-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    font-weight: 500;
    margin-bottom: 10px;
}
.sjolie-home-shopnav-title {
    font-family: var(--sjolie-serif);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 400;
    color: var(--sjolie-espresso);
    line-height: 1.2;
    margin-bottom: 32px;
}
.sjolie-home-shopnav-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.sjolie-home-shopnav-btn {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sjolie-espresso) !important;
    text-decoration: none !important;
    padding: 14px 32px;
    border: 1px solid var(--sjolie-border);
    background: var(--sjolie-white);
    transition: all 0.3s ease;
}
.sjolie-home-shopnav-btn:hover {
    border-color: var(--sjolie-espresso);
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream) !important;
}

/* ─── INTERACTIVE TOOLS (5-card grid) ─── */
.sjolie-home-tools {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background: var(--sjolie-cream);
    padding: 80px 24px;
    text-align: center;
}
.sjolie-home-tools-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    font-weight: 500;
    margin-bottom: 10px;
}
.sjolie-home-tools-title {
    font-family: var(--sjolie-serif);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 400;
    color: var(--sjolie-espresso);
    line-height: 1.2;
    margin-bottom: 14px;
}
.sjolie-home-tools-sub {
    font-family: var(--sjolie-sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--sjolie-mocha);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto 48px;
}
.sjolie-home-tools-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.sjolie-home-tools-grid > p,
.sjolie-home-tools-grid > br {
    display: none !important;
}
.sjolie-home-support-grid > p,
.sjolie-home-support-grid > br {
    display: none !important;
}
.sjolie-home-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 28px 32px;
    background: var(--sjolie-white);
    border: 1px solid var(--sjolie-border);
    text-align: center;
    text-decoration: none !important;
    transition: all 0.3s ease;
}
.sjolie-home-tool-card:hover {
    border-color: var(--sjolie-espresso);
    box-shadow: 0 4px 20px rgba(58,45,39,0.08);
    transform: translateY(-2px);
}
.sjolie-home-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    font-size: 28px;
    margin-bottom: 14px;
    line-height: 1;
}
.sjolie-home-tool-name {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 10px;
}
.sjolie-home-tool-desc {
    font-family: var(--sjolie-sans);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--sjolie-mocha);
    font-weight: 300;
    flex-grow: 1;
}
.sjolie-home-tool-link {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sjolie-caramel);
    border-bottom: 1px solid var(--sjolie-caramel);
    padding-bottom: 2px;
}

/* ─── YOUR SUCCESS TEAM (dark section) ─── */
.sjolie-home-support {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background: var(--sjolie-espresso);
    padding: 80px 24px;
}
.sjolie-home-support-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.sjolie-home-support-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    font-weight: 500;
    margin-bottom: 10px;
}
.sjolie-home-support-title {
    font-family: var(--sjolie-serif);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 400;
    color: var(--sjolie-cream);
    line-height: 1.2;
    margin-bottom: 14px;
}
.sjolie-home-support-lead {
    font-family: var(--sjolie-sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--sjolie-sand);
    font-weight: 300;
    max-width: 640px;
    margin: 0 auto 48px;
}
.sjolie-home-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}
.sjolie-home-support-item {
    padding: 32px 24px;
    border: 1px solid rgba(180,146,110,0.2);
}
.sjolie-home-support-num {
    font-family: var(--sjolie-serif);
    font-size: 32px;
    font-weight: 300;
    color: var(--sjolie-caramel);
    margin-bottom: 14px;
    line-height: 1;
}
.sjolie-home-support-name {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sjolie-cream);
    margin-bottom: 10px;
}
.sjolie-home-support-desc {
    font-family: var(--sjolie-sans);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--sjolie-sand);
    font-weight: 300;
}

/* ─── DUAL CTA (rewards + returns) ─── */
.sjolie-home-dual-cta {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 72px 24px;
    background: var(--sjolie-white);
}
.sjolie-home-dual-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.sjolie-home-cta-card {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
}
.sjolie-home-cta-card--dark {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}
.sjolie-home-cta-card--light {
    background: var(--sjolie-white);
    border: 1px solid var(--sjolie-border);
}
.sjolie-home-cta-kicker {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-home-cta-title {
    font-family: var(--sjolie-serif);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 14px;
}
.sjolie-home-cta-card--dark .sjolie-home-cta-title { color: var(--sjolie-cream); }
.sjolie-home-cta-card--light .sjolie-home-cta-title { color: var(--sjolie-espresso); }
.sjolie-home-cta-desc {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}
.sjolie-home-cta-card--dark .sjolie-home-cta-desc { color: var(--sjolie-sand); }
.sjolie-home-cta-card--light .sjolie-home-cta-desc { color: var(--sjolie-mocha); }
.sjolie-home-cta-link {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none !important;
    color: var(--sjolie-caramel) !important;
    border-bottom: 1px solid var(--sjolie-caramel);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color 0.25s;
}
.sjolie-home-cta-link--dark {
    color: var(--sjolie-espresso) !important;
    border-color: var(--sjolie-caramel);
}

/* ─── FAQ WRAP ─── */
.sjolie-home-faq-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 72px 24px;
    background: var(--sjolie-white);
}
.sjolie-home-faq-wrap .sj-faqList {
    max-width: 800px;
    margin: 0 auto;
}

/* ─── SOCIAL STRIP ─── */
.sjolie-home-social {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 48px 24px 56px;
    background: var(--sjolie-pearl);
    text-align: center;
}
.sjolie-home-social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.sjolie-home-social-links a {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sjolie-espresso) !important;
    text-decoration: none !important;
    padding: 10px 24px;
    border: 1px solid var(--sjolie-border);
    transition: all 0.25s;
}
.sjolie-home-social-links a:hover {
    border-color: var(--sjolie-espresso);
    background: var(--sjolie-white);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
    .sjolie-home-hero { height: 80vh; }
    .sjolie-home-hero-inner { padding: 0 32px; }
    .sjolie-home-dual-inner { grid-template-columns: 1fr; }
    .sjolie-home-tools-grid { grid-template-columns: repeat(2, 1fr); }
    .sjolie-home-support-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 600px) {
    .sjolie-home-hero { height: 85vh; min-height: 480px; }
    .sjolie-home-hero-overlay {
        padding-bottom: 48px;
        background: linear-gradient(180deg,rgba(58,45,39,0.2) 0%,rgba(58,45,39,0.75) 60%,rgba(58,45,39,0.92) 100%);
    }
    .sjolie-home-hero-inner { padding: 0 20px; }
    .sjolie-home-hero-btns { flex-direction: column; }
    .sjolie-home-hero-btn { text-align: center; }
    .sjolie-home-trust-inner { font-size: 9.5px; letter-spacing: 2px; }
    .sjolie-home-trust-dot { margin: 0 8px; }
    .sjolie-home-cta-card { padding: 36px 28px; }
    .sjolie-home-social-links { flex-wrap: wrap; gap: 10px; }
    .sjolie-home-shopnav-grid { gap: 8px; }
    .sjolie-home-shopnav-btn { padding: 12px 20px; font-size: 10px; }
    .sjolie-home-tools-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .sjolie-home-support-grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADDITIVE PRODUCT PAGES — DARK LUXURY LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* Dark background variables */
.sjolie-additive-dark { background: #2a2220; }
.sjolie-additive-darker { background: #1e1816; }

/* ── HERO ── */
.sjolie-additive-hero {
    background: linear-gradient(180deg, #1e1816 0%, #2a2220 100%);
    text-align: center;
    padding: 70px 24px 50px;
    position: relative;
    overflow: hidden;
}
.sjolie-additive-hero::before {
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180,146,110,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.sjolie-additive-hero-badge {
    display: inline-block;
    font-family: var(--sjolie-sans) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    position: relative;
}
.sjolie-additive-hero-badge::before,
.sjolie-additive-hero-badge::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--sjolie-caramel);
    vertical-align: middle;
    margin: 0 14px;
    opacity: 0.4;
}
.sjolie-additive-hero-product {
    max-width: 220px;
    margin: 30px auto 40px;
    position: relative;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4));
}
.sjolie-additive-hero-product img {
    width: 100%;
    height: auto;
}
.sjolie-additive-hero-title {
    font-family: var(--sjolie-serif) !important;
    font-size: 46px;
    font-weight: 400;
    color: var(--sjolie-pearl);
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.sjolie-additive-hero-sub {
    font-family: var(--sjolie-sans) !important;
    font-size: 16px;
    line-height: 1.75;
    color: var(--sjolie-sand);
    max-width: 560px;
    margin: 0 auto 32px;
    opacity: 0.8;
}
.sjolie-additive-hero-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.sjolie-additive-hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sjolie-sans) !important;
    font-size: 13px;
    color: var(--sjolie-sand);
    opacity: 0.7;
}
.sjolie-additive-hero-feature::before {
    content: "\2713";
    color: var(--sjolie-caramel);
    font-weight: 700;
}

/* ── DIVIDER ── */
.sjolie-additive-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sjolie-caramel), transparent);
    opacity: 0.2;
}

/* ── STORY SPLIT ── */
.sjolie-additive-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}
.sjolie-additive-story-img {
    min-height: 520px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.sjolie-additive-story-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 50px;
    background: #2a2220;
}
.sjolie-additive-story-label {
    font-family: var(--sjolie-sans) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
}
.sjolie-additive-story-title {
    font-family: var(--sjolie-serif) !important;
    font-size: 30px;
    font-weight: 400;
    color: var(--sjolie-pearl);
    line-height: 1.3;
    margin-bottom: 18px;
}
.sjolie-additive-story-body {
    font-family: var(--sjolie-sans) !important;
    font-size: 15px;
    line-height: 1.75;
    color: var(--sjolie-sand);
    opacity: 0.75;
}
.sjolie-additive-story-body p + p { margin-top: 14px; }

/* ── BENEFITS GRID ── */
.sjolie-additive-benefits {
    background: #1e1816;
    padding: 60px 24px;
    text-align: center;
}
.sjolie-additive-section-label {
    font-family: var(--sjolie-sans) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-additive-section-title {
    font-family: var(--sjolie-serif) !important;
    font-size: 30px;
    font-weight: 400;
    color: var(--sjolie-pearl);
    margin-bottom: 40px;
}
.sjolie-additive-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-additive-benefit-card {
    background: #342b27;
    border: 1px solid rgba(180,146,110,0.2);
    border-radius: 12px;
    padding: 36px 24px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.sjolie-additive-benefit-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--sjolie-caramel) 0%, transparent 100%);
}
.sjolie-additive-benefit-name {
    font-family: var(--sjolie-serif) !important;
    font-size: 18px;
    color: var(--sjolie-pearl);
    margin-bottom: 10px;
    padding-left: 12px;
}
.sjolie-additive-benefit-desc {
    font-family: var(--sjolie-sans) !important;
    font-size: 14px;
    line-height: 1.65;
    color: var(--sjolie-sand);
    opacity: 0.7;
    padding-left: 12px;
}

/* ── HOW TO USE ── */
.sjolie-additive-howto {
    background: #2a2220;
    padding: 60px 24px;
    text-align: center;
}
.sjolie-additive-howto-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.sjolie-additive-howto-step { text-align: center; }
.sjolie-additive-howto-num {
    font-family: var(--sjolie-serif) !important;
    font-size: 48px;
    color: var(--sjolie-caramel);
    opacity: 0.35;
    margin-bottom: 8px;
    line-height: 1;
}
.sjolie-additive-howto-step-title {
    font-family: var(--sjolie-serif) !important;
    font-size: 17px;
    color: var(--sjolie-pearl);
    margin-bottom: 10px;
}
.sjolie-additive-howto-step-desc {
    font-family: var(--sjolie-sans) !important;
    font-size: 14px;
    line-height: 1.65;
    color: var(--sjolie-sand);
    opacity: 0.7;
}

/* ── INGREDIENTS ── */
.sjolie-additive-ingredients {
    background: #1e1816;
    padding: 60px 24px;
    text-align: center;
}
.sjolie-additive-ing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 30px;
}
.sjolie-additive-ing-card { text-align: center; }
.sjolie-additive-ing-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
}
.sjolie-additive-ing-name {
    font-family: var(--sjolie-serif) !important;
    font-size: 17px;
    color: var(--sjolie-pearl);
    margin-bottom: 8px;
}
.sjolie-additive-ing-desc {
    font-family: var(--sjolie-sans) !important;
    font-size: 13px;
    line-height: 1.65;
    color: var(--sjolie-sand);
    opacity: 0.7;
}
.sjolie-additive-ing-full {
    font-family: var(--sjolie-sans) !important;
    font-size: 12px;
    color: var(--sjolie-sand);
    opacity: 0.5;
    max-width: 700px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(180,146,110,0.2);
    line-height: 1.6;
}

/* ── VERSATILITY ── */
.sjolie-additive-versatility {
    background: #2a2220;
    padding: 50px 24px;
    text-align: center;
}
.sjolie-additive-versatility-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}
.sjolie-additive-versatility-item {
    background: #342b27;
    border: 1px solid rgba(180,146,110,0.2);
    border-radius: 8px;
    padding: 14px 24px;
    font-family: var(--sjolie-sans) !important;
    font-size: 14px;
    color: var(--sjolie-sand);
}

/* ── PRO TIP ── */
.sjolie-additive-protip {
    background: linear-gradient(135deg, #1a1412 0%, #2e231e 100%);
    text-align: center;
    padding: 50px 24px;
    border-top: 1px solid rgba(180,146,110,0.2);
    border-bottom: 1px solid rgba(180,146,110,0.2);
}
.sjolie-additive-protip-label {
    font-family: var(--sjolie-sans) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
}
.sjolie-additive-protip-text {
    font-family: var(--sjolie-serif) !important;
    font-size: 18px;
    font-style: italic;
    color: var(--sjolie-sand);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.85;
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
    .sjolie-additive-hero-title { font-size: 32px; }
    .sjolie-additive-story { grid-template-columns: 1fr; }
    .sjolie-additive-story-img { min-height: 350px; }
    .sjolie-additive-story-text { padding: 40px 24px; }
    .sjolie-additive-benefits-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .sjolie-additive-howto-steps { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .sjolie-additive-ing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .sjolie-additive-hero-features { gap: 12px; }
}

/* ── ADDITIVE: Reverse split (text left, image right) ── */
.sjolie-additive-story-reverse {
    direction: rtl;
}
.sjolie-additive-story-reverse > * {
    direction: ltr;
}

/* ── FULL-BLEED BACKGROUNDS FOR ADDITIVE SECTIONS ── */
/* Story splits: full-bleed background, padded grid stays at container width */
.sjolie-additive-story {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding-left: max(0px, calc((100vw - 1192px) / 2));
    padding-right: max(0px, calc((100vw - 1192px) / 2));
}

/* Non-grid sections: direct full-bleed */
.sjolie-additive-benefits,
.sjolie-additive-howto,
.sjolie-additive-ingredients,
.sjolie-additive-versatility,
.sjolie-additive-protip,
.product-tabs-inner > .sjolie-trust-bar {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}
/* FAQ uses its own full-bleed via margin-left: calc(-50vw + 50%) in .sjolie-faq-section--dark */

/* Parent overflow: allow full-bleed to escape container */
.single-product .product-tabs-inner:has(.sjolie-additive-story),
.single-product .product-tabs-inner:has(.sjolie-additive-benefits) {
    overflow: visible !important;
}



/* Prevent horizontal scrollbar */
body:has(.sjolie-additive-story) {
    overflow-x: hidden;
}


/* Ensure all additive story sections have dark backgrounds */
.sjolie-additive-story {
    background: #1e1816;
}

/* Fix FAQ full-bleed - transform handles centering now */

/* ── ADDITIVE: Video embed in story split ── */
.sjolie-additive-story-video {
    position: relative;
    width: 100%;
    min-height: 520px;
    background: #1a1412;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sjolie-additive-story-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 768px) {
    .sjolie-additive-story-video {
        min-height: 300px;
    }
}

/* ── ADDITIVE: Video poster overlay ── */
.sjolie-additive-story-video {
    cursor: pointer;
    overflow: hidden;
}
.sjolie-additive-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.sjolie-additive-story-video:hover .sjolie-additive-video-poster {
    transform: scale(1.03);
    filter: brightness(0.85);
}
.sjolie-additive-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.sjolie-additive-story-video:hover .sjolie-additive-video-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}
.sjolie-additive-video-active .sjolie-additive-video-poster,
.sjolie-additive-video-active .sjolie-additive-video-play {
    display: none;
}

/* Full ingredient list spans all columns */
.sjolie-additive-ing-grid > .sjolie-additive-ing-full,
.sjolie-additive-ing-grid > p {
    grid-column: 1 / -1;
}

/* Centering handled by transform: translateX(-50%) on the full-bleed rule above */

/* =============================================
   PRE-TAN PREP: Card Stack Layout
   Stacked white cards on pearl bg, rounded corners,
   soft shadows. Distinct from additive story-split layout.
   ============================================= */

/* ── PREP: Pearl background wrapper ── */
.sjolie-prep-wrap {

    background-color: var(--sjolie-pearl);
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 48px 24px 56px;
}

/* ── PREP: Container ── */
.sjolie-prep-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* ── PREP: Category pill ── */
.sjolie-prep-category {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    text-align: center;
    padding: 48px 0 16px;
}

/* ── PREP: Headline ── */
.sjolie-prep-headline {
    font-family: var(--sjolie-serif) !important;
    font-size: 42px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    color: var(--sjolie-espresso) !important;
    text-align: center;
    margin: 0 0 40px !important;
    padding: 0;
}

/* ── PREP: Generic card ── */
.sjolie-prep-card {
    background-color: var(--sjolie-white);
    border-radius: 20px;
    box-shadow: 0 6px 28px rgba(58, 45, 39, 0.07);
    padding: 44px;
    margin-bottom: 28px;
}

/* ── PREP: Hero card (image + text grid) ── */
.sjolie-prep-hero-card {
    background-color: var(--sjolie-white);
    border-radius: 20px;
    box-shadow: 0 6px 28px rgba(58, 45, 39, 0.07);
    padding: 44px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

.sjolie-prep-hero-image {
    border-radius: 12px;
    overflow: hidden;
}

.sjolie-prep-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.sjolie-prep-hero-text h2 {
    font-family: var(--sjolie-serif) !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    color: var(--sjolie-espresso) !important;
    margin: 0 0 20px !important;
}

.sjolie-prep-hero-text p {
    font-family: var(--sjolie-sans);
    font-size: 15px;
    color: var(--sjolie-mocha);
    line-height: 1.8;
    margin-bottom: 16px;
}

.sjolie-prep-hero-text p:last-child {
    margin-bottom: 0;
}

/* ── PREP: Section title inside card ── */
.sjolie-prep-card h2 {
    font-family: var(--sjolie-serif) !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    color: var(--sjolie-espresso) !important;
    margin: 0 0 28px !important;
}

.sjolie-prep-card p {
    font-family: var(--sjolie-sans);
    font-size: 15px;
    color: var(--sjolie-mocha);
    line-height: 1.8;
    margin-bottom: 14px;
}

.sjolie-prep-card p:last-of-type {
    margin-bottom: 0;
}

/* ── PREP: Benefits grid (2-col inside card) ── */
.sjolie-prep-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.sjolie-prep-benefit {
    padding: 22px;
    background: linear-gradient(135deg, var(--sjolie-pearl) 0%, var(--sjolie-cream) 100%);
    border-radius: 12px;
    border-left: 3px solid var(--sjolie-caramel);
}

.sjolie-prep-benefit h3 {
    font-family: var(--sjolie-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sjolie-espresso) !important;
    margin: 0 0 8px !important;
    letter-spacing: 0.3px;
}

.sjolie-prep-benefit p {
    font-size: 13px !important;
    color: var(--sjolie-mocha);
    line-height: 1.7;
    margin: 0 !important;
}

/* ── PREP: Steps (vertical numbered list inside card) ── */
.sjolie-prep-steps {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sjolie-prep-step {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    align-items: flex-start;
}

.sjolie-prep-step-circle {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--sjolie-caramel) 0%, var(--sjolie-mocha) 100%);
    color: var(--sjolie-cream);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 0;
    padding: 0;
    line-height: 1;
}

.sjolie-prep-step-num {
    font-family: var(--sjolie-serif);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    padding: 0;
    display: block;
}

.sjolie-prep-step-label {
    font-family: var(--sjolie-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 1px 0 0;
    padding: 0;
    display: block;
    line-height: 1;
}

.sjolie-prep-step-text h3 {
    font-family: var(--sjolie-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--sjolie-espresso) !important;
    margin: 0 0 6px !important;
}

.sjolie-prep-step-text p {
    font-size: 14px !important;
    color: var(--sjolie-mocha);
    line-height: 1.7;
    margin: 0 !important;
}

/* ── PREP: At a Glance grid (inside card) ── */
.sjolie-prep-glance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sjolie-prep-glance-item {
    padding: 18px;
    background-color: var(--sjolie-cream);
    border-radius: 10px;
    border-top: 3px solid var(--sjolie-caramel);
    text-align: center;
}

.sjolie-prep-glance-item p {
    font-size: 13px !important;
    color: var(--sjolie-espresso);
    margin: 0 !important;
    font-weight: 500;
}

/* ── PREP: Full-bleed image break ── */
.sjolie-prep-image-break {

    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 420px;
    overflow: hidden;
    margin: 0;
    z-index: 2;
}

.sjolie-prep-image-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── PREP: Dark trust card ── */
.sjolie-prep-trust-card {
    background: linear-gradient(135deg, var(--sjolie-espresso) 0%, var(--sjolie-deep) 100%);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-bottom: 28px;
}

.sjolie-prep-trust-card p {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--sjolie-pearl);
    margin: 6px 0 !important;
}

/* ── PREP: Pro tip card (sand bg) ── */
.sjolie-prep-tip-card {
    background-color: var(--sjolie-sand);
    border-radius: 20px;
    padding: 36px 44px;
    margin-bottom: 28px;
}

.sjolie-prep-tip-card h2 {
    font-family: var(--sjolie-serif) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    color: var(--sjolie-espresso) !important;
    margin: 0 0 16px !important;
}

.sjolie-prep-tip-card p {
    font-family: var(--sjolie-sans);
    font-size: 14px;
    color: var(--sjolie-deep);
    line-height: 1.8;
    margin-bottom: 12px;
}

.sjolie-prep-tip-card p:last-child {
    margin-bottom: 0;
}

/* ── PREP: Responsive ── */
@media (max-width: 768px) {
    .sjolie-prep-headline {
        font-size: 32px !important;
    }

    .sjolie-prep-hero-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px;
    }

    .sjolie-prep-card {
        padding: 28px;
    }

    .sjolie-prep-card h2,
    .sjolie-prep-hero-text h2 {
        font-size: 26px !important;
    }

    .sjolie-prep-benefits-grid {
        grid-template-columns: 1fr;
    }

    .sjolie-prep-glance-grid {
        grid-template-columns: 1fr;
    }

    .sjolie-prep-step {
        grid-template-columns: 56px 1fr;
        gap: 14px;
    }

    .sjolie-prep-step-circle {
        width: 56px;
        height: 56px;
    }

    .sjolie-prep-step-num {
        font-size: 22px;
    }

    .sjolie-prep-image-break {

        height: 280px;
    }

    .sjolie-prep-tip-card {
        padding: 28px;
    }
}

/* ── PREP: Spacing after full-bleed image ── */
.sjolie-prep-image-break + .sjolie-prep-wrap {
    padding-top: 48px;
}

/* ============================================================
   SOLUTION SAMPLE PAGES — Template A "Confidence Pitch"
   Prefix: .sjolie-sample-*
   ============================================================ */

.sjolie-sample-hero {
  background-color: var(--sjolie-espresso, #3a2d27);
  color: var(--sjolie-cream, #fbfbf8);
  padding: 72px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sjolie-sample-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(180, 146, 110, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.sjolie-sample-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.sjolie-sample-hero h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--sjolie-cream, #fbfbf8);
}

.sjolie-sample-hero .sjolie-sample-sub {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 400;
  margin-bottom: 36px;
  opacity: 0.92;
  line-height: 1.6;
}

/* Value props grid in hero */
.sjolie-sample-props {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 36px;
  margin: 44px auto;
  max-width: 800px;
  text-align: left;
}

.sjolie-sample-prop {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sjolie-sample-prop-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  background-color: var(--sjolie-caramel, #b4926e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--sjolie-espresso, #3a2d27);
  margin-top: 2px;
}

.sjolie-sample-prop h3 {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--sjolie-cream, #fbfbf8);
}

.sjolie-sample-prop p {
  font-size: 0.88rem;
  opacity: 0.82;
  margin: 0;
  line-height: 1.5;
}

/* Confidence / story section */
.sjolie-sample-confidence {
  background-color: var(--sjolie-cream, #fbfbf8);
  padding: 72px 24px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sjolie-sample-confidence-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.sjolie-sample-confidence-text h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 24px;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.2;
}

.sjolie-sample-confidence-text p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 1rem;
  margin-bottom: 18px;
  line-height: 1.75;
  color: var(--sjolie-deep, #4e3629);
}

.sjolie-sample-confidence-img {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
}

.sjolie-sample-confidence-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Why Sjolie / benefits section */
.sjolie-sample-why {
  background-color: var(--sjolie-dark-bg, #2a2220);
  color: var(--sjolie-cream, #fbfbf8);
  padding: 72px 24px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sjolie-sample-why-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sjolie-sample-why h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 44px;
  text-align: center;
  color: var(--sjolie-cream, #fbfbf8);
}

.sjolie-sample-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.sjolie-sample-benefit {
  background-color: var(--sjolie-dark-card, #342b27);
  padding: 32px;
  border-radius: 4px;
  border-left: 4px solid var(--sjolie-caramel, #b4926e);
}

.sjolie-sample-benefit h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--sjolie-caramel, #b4926e);
}

.sjolie-sample-benefit p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  line-height: 1.7;
  opacity: 0.88;
  margin: 0;
}

/* Ingredients section */
.sjolie-sample-ingredients {
  background-color: var(--sjolie-pearl, #f3ece3);
  padding: 72px 24px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sjolie-sample-ingredients-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sjolie-sample-ingredients h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 44px;
  text-align: center;
  color: var(--sjolie-espresso, #3a2d27);
}

.sjolie-sample-ing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.sjolie-sample-ing-card {
  background-color: #ffffff;
  padding: 28px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(58, 45, 39, 0.07);
}

.sjolie-sample-ing-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  color: var(--sjolie-caramel, #b4926e);
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.sjolie-sample-ing-card p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.88rem;
  color: var(--sjolie-mocha, #6b5a50);
  line-height: 1.6;
  margin: 0;
}

/* Full ingredient list */
.sjolie-sample-full-ingredients {
  margin-top: 36px;
  padding: 24px 28px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(58, 45, 39, 0.07);
}

.sjolie-sample-full-ingredients h3 {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sjolie-mocha, #6b5a50);
  margin-bottom: 10px;
}

.sjolie-sample-full-ingredients p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--sjolie-mocha, #6b5a50);
  margin: 0;
}

/* Specs section */
.sjolie-sample-specs {
  background-color: var(--sjolie-espresso, #3a2d27);
  color: var(--sjolie-cream, #fbfbf8);
  padding: 72px 24px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sjolie-sample-specs-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sjolie-sample-specs h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 44px;
  text-align: center;
  color: var(--sjolie-cream, #fbfbf8);
}

.sjolie-sample-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.sjolie-sample-spec {
  border: 1px solid var(--sjolie-caramel, #b4926e);
  padding: 28px;
  border-radius: 4px;
  text-align: center;
}

.sjolie-sample-spec-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 8px;
}

.sjolie-sample-spec-value {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.sjolie-sample-spec-desc {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  opacity: 0.78;
}

/* Full-bleed image break */
.sjolie-sample-image-break {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 420px;
  overflow: hidden;
  z-index: 2;
}

.sjolie-sample-image-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* CTA final section */
.sjolie-sample-cta {
  background: linear-gradient(135deg, var(--sjolie-deep, #4e3629) 0%, var(--sjolie-mocha, #6b5a50) 100%);
  color: var(--sjolie-cream, #fbfbf8);
  padding: 72px 24px;
  text-align: center;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sjolie-sample-cta-inner {
  max-width: 800px;
  margin: 0 auto;
}

.sjolie-sample-cta h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 18px;
  color: var(--sjolie-cream, #fbfbf8);
}

.sjolie-sample-cta p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 1.05rem;
  margin-bottom: 32px;
  opacity: 0.92;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .sjolie-sample-hero {
    padding: 56px 20px;
  }
  .sjolie-sample-props {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sjolie-sample-confidence-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sjolie-sample-confidence-img {
    max-width: 100%;
    margin: 0 auto;
  }
  .sjolie-sample-benefits {
    grid-template-columns: 1fr;
  }
  .sjolie-sample-why,
  .sjolie-sample-ingredients,
  .sjolie-sample-specs,
  .sjolie-sample-cta {
    padding: 56px 20px;
  }
  .sjolie-sample-image-break {
    height: 280px;
  }
  .sjolie-sample-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .sjolie-sample-specs-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   BLOG PAGE — Asymmetric Editorial Layout
   ===================================================== */

/* Hero */
.sjolie-blog-hero {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 80px 0 60px;
}
.sjolie-blog-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.sjolie-blog-hero .eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 16px;
}
.sjolie-blog-hero h1 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 3.4rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.1;
  margin-bottom: 20px;
  max-width: 700px;
}
.sjolie-blog-hero .hero-line {
  width: 60px;
  height: 2px;
  background: var(--sjolie-caramel, #b4926e);
  margin-bottom: 20px;
}
.sjolie-blog-hero .hero-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #a09189;
  max-width: 520px;
}

/* Featured Row */
.sjolie-blog-featured {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
}
.sjolie-blog-feat-main {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(180,146,110,0.1);
  transition: box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.sjolie-blog-feat-main:hover {
  box-shadow: 0 16px 48px rgba(58,45,39,0.1);
}
.sjolie-blog-feat-main-img {
  height: 320px;
  background-size: cover;
  background-position: center;
  background-color: var(--sjolie-pearl, #f3ece3);
}
.sjolie-blog-feat-main-body {
  padding: 32px;
}
.sjolie-blog-cat-badge {
  display: inline-block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--sjolie-caramel, #b4926e);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.sjolie-blog-feat-main-body h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-blog-feat-main-body p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #a09189;
}
.sjolie-blog-meta {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  color: #a89a90;
  margin-top: 14px;
}

.sjolie-blog-feat-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sjolie-blog-feat-side-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(180,146,110,0.1);
  display: grid;
  grid-template-columns: 140px 1fr;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s;
  flex: 1;
}
.sjolie-blog-feat-side-card:hover {
  box-shadow: 0 8px 28px rgba(58,45,39,0.08);
}
.sjolie-blog-feat-side-img {
  background-size: cover;
  background-position: center;
  background-color: var(--sjolie-pearl, #f3ece3);
  min-height: 100%;
}
.sjolie-blog-feat-side-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sjolie-blog-cat-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 6px;
  display: block;
}
.sjolie-blog-feat-side-body h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--sjolie-espresso, #3a2d27);
}

/* Category Tabs */
.sjolie-blog-tabs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 0;
  border-bottom: 1px solid rgba(180,146,110,0.2);
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.sjolie-blog-tab {
  padding: 14px 24px;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 500;
  color: #a89a90;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  text-decoration: none;
}
.sjolie-blog-tab:hover {
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-blog-tab.active {
  color: var(--sjolie-espresso, #3a2d27);
  border-bottom-color: var(--sjolie-caramel, #b4926e);
}

/* Blog Grid */
.sjolie-blog-grid-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
}
.sjolie-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sjolie-blog-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(180,146,110,0.1);
  transition: box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.sjolie-blog-card:hover {
  box-shadow: 0 10px 36px rgba(58,45,39,0.08);
  transform: translateY(-3px);
}
.sjolie-blog-card-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--sjolie-pearl, #f3ece3);
}
.sjolie-blog-card-body {
  padding: 22px;
}
.sjolie-blog-card-body h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-blog-card-body p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #a09189;
  margin-bottom: 10px;
}

/* Pagination */
.sjolie-blog-pagination {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 40px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.sjolie-blog-pagination a,
.sjolie-blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}
.sjolie-blog-pagination a {
  background: #fff;
  color: var(--sjolie-espresso, #3a2d27);
  border: 1px solid rgba(180,146,110,0.2);
}
.sjolie-blog-pagination a:hover {
  background: var(--sjolie-pearl, #f3ece3);
  border-color: var(--sjolie-caramel, #b4926e);
}
.sjolie-blog-pagination span.current {
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
  border: 1px solid var(--sjolie-espresso, #3a2d27);
}

/* Bottom CTA */
.sjolie-blog-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px 80px;
}
.sjolie-blog-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.sjolie-blog-bottom-card {
  background: var(--sjolie-pearl, #f3ece3);
  border-radius: 16px;
  padding: 40px;
}
.sjolie-blog-bottom-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-blog-bottom-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #a09189;
  margin-bottom: 20px;
}
.sjolie-blog-bottom-link {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sjolie-caramel, #b4926e);
  text-decoration: none;
  letter-spacing: 0.03em;
}
.sjolie-blog-bottom-link:hover {
  color: var(--sjolie-espresso, #3a2d27);
}

/* Responsive */
@media (max-width: 900px) {
  .sjolie-blog-hero h1 { font-size: 2.4rem; }
  .sjolie-blog-featured { grid-template-columns: 1fr; }
  .sjolie-blog-feat-side { flex-direction: row; overflow-x: auto; }
  .sjolie-blog-feat-side-card { min-width: 280px; grid-template-columns: 100px 1fr; }
  .sjolie-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .sjolie-blog-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sjolie-blog-hero h1 { font-size: 2rem; }
  .sjolie-blog-hero-inner { padding: 0 20px; }
  .sjolie-blog-featured { padding: 0 20px 30px; }
  .sjolie-blog-feat-main-img { height: 200px; }
  .sjolie-blog-tabs { padding: 30px 20px 0; }
  .sjolie-blog-grid-wrap { padding: 30px 20px; }
  .sjolie-blog-grid { grid-template-columns: 1fr; }
  .sjolie-blog-feat-side { flex-direction: column; }
  .sjolie-blog-bottom { padding: 20px 20px 60px; }
}

/* ===== BLOG HERO — Full-width breakout from WP container ===== */
.sjolie-blog-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 80px 0 60px;
}

/* ===== Spacing between hero and featured/content below ===== */
.sjolie-blog-featured {
  padding-top: 48px;
}

/* When there's no featured row (filtered view), tabs get the top spacing */
.sjolie-blog-tabs {
  padding-top: 48px;
}

/* If featured row is present, tabs can be tighter */
.sjolie-blog-featured + .sjolie-blog-tabs {
  padding-top: 40px;
}

/* ===== BLOG PAGE — Remove gap between header and hero, true full-width ===== */

/* Kill page title bar on blog page */
body.blog .page-title {
  display: none !important;
}

/* Remove all top padding/margin on the main content wrappers */
body.blog .main-page-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.blog .wd-content-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.blog .wd-content-area {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.blog #main-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Override the hero to ensure no top margin and true full-width */
.sjolie-blog-hero {
  margin-top: 0 !important;
  padding-top: 80px;
  padding-bottom: 60px;
  overflow: hidden;
}


/* =====================================================
   FREE SAMPLES PAGE — Editorial Marketing Layout
   ===================================================== */

/* Hero */
.sjolie-samples-hero {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 80px 40px 60px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.sjolie-samples-eyebrow {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 16px;
}
.sjolie-samples-hero h1 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.15;
  margin-bottom: 20px;
}
.sjolie-samples-hero-line {
  width: 60px;
  height: 2px;
  background: var(--sjolie-caramel, #b4926e);
  margin: 0 auto 20px;
}
.sjolie-samples-hero-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #a09189;
  max-width: 560px;
  margin: 0 auto 32px;
}
.sjolie-samples-hero-btn {
  display: inline-block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sjolie-espresso, #3a2d27);
  padding: 16px 40px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}
.sjolie-samples-hero-btn:hover {
  background: var(--sjolie-caramel, #b4926e);
  color: #fff;
}

/* Trust Bar */
.sjolie-samples-trust-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding: 32px 40px;
  max-width: 1000px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(180,146,110,0.15);
}
.sjolie-samples-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sjolie-espresso, #3a2d27);
  letter-spacing: 0.02em;
}
.sjolie-samples-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sjolie-caramel, #b4926e);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Shared section styles */
.sjolie-samples-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 40px;
}
.sjolie-samples-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.sjolie-samples-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 12px;
}
.sjolie-samples-section-header h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}
.sjolie-samples-section-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #a09189;
  max-width: 520px;
  margin: 14px auto 0;
}

/* Selling Points Grid */
.sjolie-samples-selling-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sjolie-samples-sell-card {
  background: #fff;
  border: 1px solid rgba(180,146,110,0.12);
  border-radius: 14px;
  padding: 32px 28px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.sjolie-samples-sell-card:hover {
  box-shadow: 0 8px 32px rgba(58,45,39,0.07);
  transform: translateY(-2px);
}
.sjolie-samples-sell-num {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--sjolie-sand, #dcbfa6);
  margin-bottom: 14px;
  line-height: 1;
}
.sjolie-samples-sell-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
  line-height: 1.3;
}
.sjolie-samples-sell-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
}

/* Products Section */
.sjolie-samples-products-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 60px 40px;
}
.sjolie-samples-products-section .sjolie-samples-section-header {
  max-width: 1100px;
  margin: 0 auto 40px;
}
.sjolie-samples-products-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.sjolie-samples-product-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  border: 1px solid rgba(180,146,110,0.1);
}
.sjolie-samples-product-badge {
  display: inline-block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--sjolie-caramel, #b4926e);
  padding: 4px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.sjolie-samples-product-badge--luxe {
  background: #7a5e8a;
}
.sjolie-samples-product-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 6px;
  line-height: 1.3;
}
.sjolie-samples-product-size {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  color: #a89a90;
  margin-bottom: 18px;
}
.sjolie-samples-product-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.sjolie-samples-product-card li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #5a4d45;
  padding: 6px 0 6px 20px;
  position: relative;
}
.sjolie-samples-product-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sjolie-caramel, #b4926e);
  font-weight: 700;
}
.sjolie-samples-product-note {
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  color: #a89a90;
  border-top: 1px solid rgba(180,146,110,0.12);
  padding-top: 14px;
  margin-top: 4px;
}

/* How It Works — Steps */
.sjolie-samples-steps {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  justify-content: center;
}
.sjolie-samples-step {
  flex: 1;
  max-width: 300px;
  text-align: center;
}
.sjolie-samples-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.sjolie-samples-step h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
}
.sjolie-samples-step p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
}
.sjolie-samples-step-arrow {
  font-size: 1.6rem;
  color: var(--sjolie-sand, #dcbfa6);
  margin-top: 12px;
  flex-shrink: 0;
}

/* Before You Test — Note Section */
.sjolie-samples-note-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 60px;
}
.sjolie-samples-note-card {
  background: var(--sjolie-cream, #fbfbf8);
  border: 1px solid rgba(180,146,110,0.15);
  border-radius: 16px;
  padding: 40px;
}
.sjolie-samples-note-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 24px;
  text-align: center;
}
.sjolie-samples-note-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sjolie-samples-note-item strong {
  display: block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sjolie-samples-note-item p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
}
.sjolie-samples-note-item a {
  color: var(--sjolie-caramel, #b4926e);
  text-decoration: none;
  font-weight: 500;
}
.sjolie-samples-note-item a:hover {
  color: var(--sjolie-espresso, #3a2d27);
}

/* Testimonials Section */
.sjolie-samples-testimonials-section {
  background: var(--sjolie-pearl, #f3ece3);
  max-width: 100%;
  padding: 60px 40px;
}
.sjolie-samples-testimonials-section .sjolie-samples-section-header {
  max-width: 1100px;
  margin: 0 auto 30px;
}

/* FAQ Section */
.sjolie-samples-faq-section {
  border-top: 1px solid rgba(180,146,110,0.1);
}
.sjolie-samples-faq-list {
  max-width: 740px;
  margin: 0 auto;
}
.sjolie-samples-faq {
  border-bottom: 1px solid rgba(180,146,110,0.15);
}
.sjolie-samples-faq summary {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sjolie-samples-faq summary::-webkit-details-marker {
  display: none;
}
.sjolie-samples-faq summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--sjolie-caramel, #b4926e);
  transition: transform 0.3s;
}
.sjolie-samples-faq[open] summary::after {
  content: "−";
}
.sjolie-samples-faq p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a09189;
  padding: 0 0 18px;
}

/* Form Section */
.sjolie-samples-form-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 60px 40px 80px;
}
.sjolie-samples-form-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 36px;
}
.sjolie-samples-form-header h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 12px;
}
.sjolie-samples-form-header p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #a09189;
}

/* Responsive */
@media (max-width: 900px) {
  .sjolie-samples-hero h1 { font-size: 2.2rem; }
  .sjolie-samples-selling-grid { grid-template-columns: repeat(2, 1fr); }
  .sjolie-samples-steps { flex-direction: column; align-items: center; }
  .sjolie-samples-step-arrow { transform: rotate(90deg); }
  .sjolie-samples-products-grid { grid-template-columns: 1fr; }
  .sjolie-samples-note-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sjolie-samples-hero { padding: 60px 20px 40px; }
  .sjolie-samples-hero h1 { font-size: 1.8rem; }
  .sjolie-samples-section { padding: 40px 20px; }
  .sjolie-samples-selling-grid { grid-template-columns: 1fr; }
  .sjolie-samples-products-section { padding: 40px 20px; }
  .sjolie-samples-note-section { padding: 0 20px 40px; }
  .sjolie-samples-note-card { padding: 28px 20px; }
  .sjolie-samples-form-section { padding: 40px 20px 60px; }
  .sjolie-samples-trust-bar { gap: 12px 24px; padding: 24px 20px; }
}


/* Testimonial Cards — Pure HTML */
.sjolie-samples-testimonial-carousel {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sjolie-samples-testimonial-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  border: 1px solid rgba(180,146,110,0.1);
  transition: box-shadow 0.3s, transform 0.3s;
}
.sjolie-samples-testimonial-card:hover {
  box-shadow: 0 8px 28px rgba(58,45,39,0.07);
  transform: translateY(-2px);
}
.sjolie-samples-testimonial-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 2px solid var(--sjolie-sand, #dcbfa6);
}
.sjolie-samples-testimonial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sjolie-samples-testimonial-stars {
  color: var(--sjolie-caramel, #b4926e);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.sjolie-samples-testimonial-text {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.65;
  color: #5a4d45;
  margin-bottom: 16px;
}
.sjolie-samples-testimonial-name {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sjolie-caramel, #b4926e);
  letter-spacing: 0.04em;
}

/* Show only first 3 testimonials on desktop, scroll on mobile */
.sjolie-samples-testimonial-card:nth-child(n+4) {
  display: none;
}

@media (max-width: 900px) {
  .sjolie-samples-testimonial-carousel {
    grid-template-columns: 1fr 1fr;
  }
  .sjolie-samples-testimonial-card:nth-child(4) {
    display: block;
  }
}
@media (max-width: 600px) {
  .sjolie-samples-testimonial-carousel {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sjolie-samples-testimonial-card:nth-child(n+4) {
    display: block;
  }
}


/* =====================================================
   REWARDS PRO PAGE — Editorial Sales Layout
   ===================================================== */

/* Hero */
.sjolie-rewards-hero {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 80px 40px 60px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.sjolie-rewards-eyebrow {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 16px;
}
.sjolie-rewards-hero h1 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.15;
  margin-bottom: 20px;
}
.sjolie-rewards-hero-line {
  width: 60px;
  height: 2px;
  background: var(--sjolie-caramel, #b4926e);
  margin: 0 auto 20px;
}
.sjolie-rewards-hero-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #a09189;
  max-width: 600px;
  margin: 0 auto 32px;
}
.sjolie-rewards-hero-btn {
  display: inline-block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sjolie-espresso, #3a2d27);
  padding: 16px 40px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}
.sjolie-rewards-hero-btn:hover {
  background: var(--sjolie-caramel, #b4926e);
  color: #fff;
}

/* Discount Bar */
.sjolie-rewards-discount-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 44px 40px;
  max-width: 900px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(180,146,110,0.15);
}
.sjolie-rewards-discount-item {
  text-align: center;
}
.sjolie-rewards-discount-pct {
  display: block;
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1;
  margin-bottom: 6px;
}
.sjolie-rewards-discount-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a09189;
}
.sjolie-rewards-discount-divider {
  width: 1px;
  height: 60px;
  background: rgba(180,146,110,0.25);
}

/* Shared section styles */
.sjolie-rewards-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 40px;
}
.sjolie-rewards-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.sjolie-rewards-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 12px;
}
.sjolie-rewards-section-header h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}

/* Benefits Grid */
.sjolie-rewards-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sjolie-rewards-benefit-card {
  background: #fff;
  border: 1px solid rgba(180,146,110,0.12);
  border-radius: 14px;
  padding: 32px 28px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.sjolie-rewards-benefit-card:hover {
  box-shadow: 0 8px 32px rgba(58,45,39,0.07);
  transform: translateY(-2px);
}
.sjolie-rewards-benefit-num {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--sjolie-sand, #dcbfa6);
  margin-bottom: 14px;
  line-height: 1;
}
.sjolie-rewards-benefit-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
  line-height: 1.3;
}
.sjolie-rewards-benefit-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
}

/* The Math Section */
.sjolie-rewards-math-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 60px 40px;
}
.sjolie-rewards-math-section .sjolie-rewards-section-header {
  max-width: 1100px;
  margin: 0 auto 40px;
}
.sjolie-rewards-math-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sjolie-rewards-math-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  border: 1px solid rgba(180,146,110,0.1);
}
.sjolie-rewards-math-card h3 {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 16px;
}
.sjolie-rewards-math-prices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sjolie-rewards-math-old {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.4rem;
  color: #c0b0a4;
  text-decoration: line-through;
}
.sjolie-rewards-math-arrow {
  color: var(--sjolie-caramel, #b4926e);
  font-size: 1.2rem;
}
.sjolie-rewards-math-new {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-rewards-math-highlight {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 16px;
}
.sjolie-rewards-math-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
}
.sjolie-rewards-math-card p strong {
  color: var(--sjolie-espresso, #3a2d27);
}

/* Steps */
.sjolie-rewards-steps {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  justify-content: center;
}
.sjolie-rewards-step {
  flex: 1;
  max-width: 300px;
  text-align: center;
}
.sjolie-rewards-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.sjolie-rewards-step h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
}
.sjolie-rewards-step p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
}
.sjolie-rewards-step-arrow {
  font-size: 1.6rem;
  color: var(--sjolie-sand, #dcbfa6);
  margin-top: 12px;
  flex-shrink: 0;
}

/* Who Qualifies */
.sjolie-rewards-qualify-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 60px;
}
.sjolie-rewards-qualify-card {
  background: var(--sjolie-cream, #fbfbf8);
  border: 1px solid rgba(180,146,110,0.15);
  border-radius: 16px;
  padding: 44px;
  text-align: center;
}
.sjolie-rewards-qualify-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
}
.sjolie-rewards-qualify-intro {
  font-size: 0.92rem;
  color: #a09189;
  margin-bottom: 24px;
}
.sjolie-rewards-qualify-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 700px;
  margin: 0 auto 24px;
}
.sjolie-rewards-qualify-item {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--sjolie-espresso, #3a2d27);
  background: #fff;
  border: 1px solid rgba(180,146,110,0.15);
  border-radius: 8px;
  padding: 12px 16px;
}
.sjolie-rewards-qualify-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #a89a90;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* FAQ */
.sjolie-rewards-faq-section {
  border-top: 1px solid rgba(180,146,110,0.1);
}
.sjolie-rewards-faq-list {
  max-width: 740px;
  margin: 0 auto;
}
.sjolie-rewards-faq {
  border-bottom: 1px solid rgba(180,146,110,0.15);
}
.sjolie-rewards-faq summary {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sjolie-rewards-faq summary::-webkit-details-marker { display: none; }
.sjolie-rewards-faq summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--sjolie-caramel, #b4926e);
  transition: transform 0.3s;
}
.sjolie-rewards-faq[open] summary::after { content: "−"; }
.sjolie-rewards-faq p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a09189;
  padding: 0 0 18px;
}

/* Form Section */
.sjolie-rewards-form-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 60px 40px 80px;
  position: relative;
}
.sjolie-rewards-form-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 32px;
}
.sjolie-rewards-form-header h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 12px;
}
.sjolie-rewards-form-header p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #a09189;
}

/* Form Tabs */
.sjolie-rewards-form-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 420px;
  margin: 0 auto 32px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid rgba(180,146,110,0.15);
}
.sjolie-rewards-form-tab {
  flex: 1;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #a09189;
  background: transparent;
  border: none;
  padding: 14px 24px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
}
.sjolie-rewards-form-tab--active {
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
  box-shadow: 0 2px 8px rgba(58,45,39,0.15);
}
.sjolie-rewards-form-tab:hover:not(.sjolie-rewards-form-tab--active) {
  color: var(--sjolie-espresso, #3a2d27);
}

/* Form Panels */
.sjolie-rewards-form-panel {
  display: none;
  max-width: 700px;
  margin: 0 auto;
}
.sjolie-rewards-form-panel--active {
  display: block;
}
.sjolie-rewards-form-note {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
  text-align: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: rgba(255,255,255,0.6);
  border-radius: 10px;
  border: 1px solid rgba(180,146,110,0.1);
}
.sjolie-rewards-form-note strong {
  color: var(--sjolie-espresso, #3a2d27);
}

/* Responsive */
@media (max-width: 900px) {
  .sjolie-rewards-hero h1 { font-size: 2.2rem; }
  .sjolie-rewards-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .sjolie-rewards-math-grid { grid-template-columns: 1fr; max-width: 400px; }
  .sjolie-rewards-steps { flex-direction: column; align-items: center; }
  .sjolie-rewards-step-arrow { transform: rotate(90deg); }
  .sjolie-rewards-qualify-grid { grid-template-columns: repeat(2, 1fr); }
  .sjolie-rewards-discount-bar { gap: 24px; }
  .sjolie-rewards-discount-pct { font-size: 2.4rem; }
}
@media (max-width: 600px) {
  .sjolie-rewards-hero { padding: 60px 20px 40px; }
  .sjolie-rewards-hero h1 { font-size: 1.8rem; }
  .sjolie-rewards-section { padding: 40px 20px; }
  .sjolie-rewards-benefits-grid { grid-template-columns: 1fr; }
  .sjolie-rewards-discount-bar { flex-direction: column; gap: 20px; padding: 32px 20px; }
  .sjolie-rewards-discount-divider { width: 60px; height: 1px; }
  .sjolie-rewards-qualify-section { padding: 0 20px 40px; }
  .sjolie-rewards-qualify-card { padding: 28px 20px; }
  .sjolie-rewards-qualify-grid { grid-template-columns: 1fr 1fr; }
  .sjolie-rewards-form-section { padding: 40px 20px 60px; }
  .sjolie-rewards-form-tabs { max-width: 100%; }
  .sjolie-rewards-math-section { padding: 40px 20px; }
}


/* =====================================================
   SHIPPING & DELIVERY PAGE — Editorial Info Layout
   ===================================================== */

/* Hero */
.sjolie-ship-hero {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 80px 40px 60px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.sjolie-ship-eyebrow {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 16px;
}
.sjolie-ship-hero h1 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.15;
  margin-bottom: 20px;
}
.sjolie-ship-hero-line {
  width: 60px;
  height: 2px;
  background: var(--sjolie-caramel, #b4926e);
  margin: 0 auto 20px;
}
.sjolie-ship-hero-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #a09189;
  max-width: 560px;
  margin: 0 auto;
}

/* Rate Cards */
.sjolie-ship-rates {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
  padding: 50px 40px;
}
.sjolie-ship-rate-card {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(180,146,110,0.12);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s;
}
.sjolie-ship-rate-card:hover {
  box-shadow: 0 8px 28px rgba(58,45,39,0.07);
  transform: translateY(-2px);
}
.sjolie-ship-rate-card--featured {
  border: 2px solid var(--sjolie-caramel, #b4926e);
  position: relative;
}
.sjolie-ship-rate-badge {
  display: inline-block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--sjolie-caramel, #b4926e);
  padding: 4px 14px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.sjolie-ship-rate-price {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1;
  margin-bottom: 6px;
}
.sjolie-ship-rate-condition {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 14px;
}
.sjolie-ship-rate-detail {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #a09189;
}

/* Shared section styles */
.sjolie-ship-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 40px;
}
.sjolie-ship-section-header {
  text-align: center;
  margin-bottom: 36px;
}
.sjolie-ship-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 12px;
}
.sjolie-ship-section-header h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.2;
  max-width: 600px;
  margin: 0 auto;
}
.sjolie-ship-section-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #a09189;
  max-width: 520px;
  margin: 12px auto 0;
}

/* Info Card Grid (reused across sections) */
.sjolie-ship-info-grid,
.sjolie-ship-intl-details,
.sjolie-ship-tracking-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.sjolie-ship-info-card {
  background: #fff;
  border: 1px solid rgba(180,146,110,0.1);
  border-radius: 14px;
  padding: 32px 28px;
}
.sjolie-ship-info-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
  line-height: 1.3;
}
.sjolie-ship-info-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
}
.sjolie-ship-info-card a {
  color: var(--sjolie-caramel, #b4926e);
  text-decoration: none;
  font-weight: 500;
}
.sjolie-ship-info-card a:hover {
  color: var(--sjolie-espresso, #3a2d27);
}

/* Expedited Section */
.sjolie-ship-expedited-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 60px 40px;
}
.sjolie-ship-expedited-section .sjolie-ship-section-header {
  max-width: 1100px;
  margin: 0 auto 36px;
}
.sjolie-ship-expedited-grid {
  max-width: 1100px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sjolie-ship-expedited-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid rgba(180,146,110,0.1);
}
.sjolie-ship-expedited-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 8px;
}
.sjolie-ship-expedited-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #a09189;
}
.sjolie-ship-expedited-card strong {
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-ship-expedited-note {
  max-width: 1100px;
  margin: 0 auto;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #a89a90;
  text-align: center;
  font-style: italic;
}

/* International — Country Card */
.sjolie-ship-intl-card {
  background: var(--sjolie-cream, #fbfbf8);
  border: 1px solid rgba(180,146,110,0.15);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 28px;
  text-align: center;
}
.sjolie-ship-intl-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 20px;
}
.sjolie-ship-countries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.sjolie-ship-country {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--sjolie-espresso, #3a2d27);
  background: #fff;
  border: 1px solid rgba(180,146,110,0.15);
  border-radius: 8px;
  padding: 10px 18px;
}
.sjolie-ship-intl-card > p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a09189;
  max-width: 560px;
  margin: 0 auto;
}
.sjolie-ship-intl-card a {
  color: var(--sjolie-caramel, #b4926e);
  text-decoration: none;
  font-weight: 500;
}
.sjolie-ship-intl-card a:hover {
  color: var(--sjolie-espresso, #3a2d27);
}

/* Tracking Section */
.sjolie-ship-tracking-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 60px 40px;
}
.sjolie-ship-tracking-section .sjolie-ship-section-header {
  max-width: 1100px;
  margin: 0 auto 36px;
}
.sjolie-ship-tracking-grid {
  max-width: 1100px;
  margin: 0 auto;
}

/* Bottom CTA */
.sjolie-ship-cta {
  max-width: 700px;
  margin: 0 auto;
  padding: 60px 40px;
  text-align: center;
}
.sjolie-ship-cta h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
}
.sjolie-ship-cta p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #a09189;
  margin-bottom: 28px;
}
.sjolie-ship-cta-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sjolie-ship-cta-btn {
  display: inline-block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sjolie-espresso, #3a2d27);
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}
.sjolie-ship-cta-btn:hover {
  background: var(--sjolie-caramel, #b4926e);
  color: #fff;
}
.sjolie-ship-cta-btn--outline {
  background: transparent;
  color: var(--sjolie-espresso, #3a2d27);
  border: 1px solid var(--sjolie-espresso, #3a2d27);
}
.sjolie-ship-cta-btn--outline:hover {
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .sjolie-ship-hero h1 { font-size: 2.1rem; }
  .sjolie-ship-expedited-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .sjolie-ship-info-grid,
  .sjolie-ship-intl-details,
  .sjolie-ship-tracking-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sjolie-ship-hero { padding: 60px 20px 40px; }
  .sjolie-ship-hero h1 { font-size: 1.7rem; }
  .sjolie-ship-rates { flex-direction: column; padding: 40px 20px; }
  .sjolie-ship-section { padding: 40px 20px; }
  .sjolie-ship-expedited-section { padding: 40px 20px; }
  .sjolie-ship-tracking-section { padding: 40px 20px; }
  .sjolie-ship-intl-card { padding: 28px 20px; }
  .sjolie-ship-cta { padding: 40px 20px; }
  .sjolie-ship-cta-links { flex-direction: column; align-items: center; }
}


/* =====================================================
   OUR STORY — Cinematic Editorial About Page
   ===================================================== */

/* Cinematic Hero with background image */
.sjolie-about-hero {
  position: relative;
  min-height: 520px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sjolie-about-hero-overlay {
  background: rgba(58,45,39,0.55);
  width: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
}
.sjolie-about-hero-eyebrow {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--sjolie-sand, #dcbfa6);
  margin-bottom: 20px;
}
.sjolie-about-hero h1 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 3.4rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
}
.sjolie-about-hero-line {
  width: 60px;
  height: 2px;
  background: var(--sjolie-caramel, #b4926e);
  margin: 0 auto 24px;
}
.sjolie-about-hero-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 580px;
  margin: 0 auto;
}

/* Pronunciation + Intro */
.sjolie-about-intro {
  background: var(--sjolie-espresso, #3a2d27);
  padding: 60px 40px;
}
.sjolie-about-intro-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.sjolie-about-intro-pron {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.sjolie-about-intro-pron span {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--sjolie-sand, #dcbfa6);
  font-style: italic;
}
.sjolie-about-intro-text {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.75);
  margin-top: 20px;
}

/* Shared section styles */
.sjolie-about-section-header {
  text-align: center;
  margin-bottom: 44px;
}
.sjolie-about-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 12px;
}
.sjolie-about-section-header h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}

/* Founders Section */
.sjolie-about-founders {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 40px;
}
.sjolie-about-founders-content {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
}
.sjolie-about-founders-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.sjolie-about-founders-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sjolie-about-founders-text {
  padding-top: 8px;
}
.sjolie-about-founders-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--sjolie-espresso, #3a2d27);
  font-weight: 500;
  margin-bottom: 18px;
}
.sjolie-about-founders-text p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #a09189;
  margin-bottom: 16px;
}
.sjolie-about-quote {
  margin: 28px 0 0;
  padding: 28px 32px;
  border-left: 3px solid var(--sjolie-caramel, #b4926e);
  background: var(--sjolie-pearl, #f3ece3);
  border-radius: 0 12px 12px 0;
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-about-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  color: var(--sjolie-caramel, #b4926e);
  letter-spacing: 0.03em;
}

/* Timeline */
.sjolie-about-timeline-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 70px 40px;
}
.sjolie-about-timeline {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  padding-left: 80px;
}
.sjolie-about-timeline::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--sjolie-sand, #dcbfa6);
}
.sjolie-about-timeline-item {
  position: relative;
  padding-bottom: 40px;
}
.sjolie-about-timeline-item:last-child { padding-bottom: 0; }
.sjolie-about-timeline-year {
  position: absolute;
  left: -80px;
  top: 0;
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sjolie-espresso, #3a2d27);
  width: 50px;
  text-align: right;
}
.sjolie-about-timeline-dot {
  position: absolute;
  left: -49px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sjolie-caramel, #b4926e);
  border: 3px solid var(--sjolie-pearl, #f3ece3);
  z-index: 1;
}
.sjolie-about-timeline-text h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 8px;
}
.sjolie-about-timeline-text p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a09189;
}

/* The Sjolie Difference Grid */
.sjolie-about-difference {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 40px;
}
.sjolie-about-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.sjolie-about-diff-card {
  background: #fff;
  border: 1px solid rgba(180,146,110,0.1);
  border-radius: 16px;
  padding: 36px 32px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.sjolie-about-diff-card:hover {
  box-shadow: 0 10px 36px rgba(58,45,39,0.08);
  transform: translateY(-3px);
}
.sjolie-about-diff-card--wide {
  grid-column: 1 / -1;
  background: var(--sjolie-espresso, #3a2d27);
}
.sjolie-about-diff-card--wide .sjolie-about-diff-num {
  color: var(--sjolie-sand, #dcbfa6);
}
.sjolie-about-diff-card--wide h3 {
  color: #fff;
}
.sjolie-about-diff-card--wide p {
  color: rgba(255,255,255,0.7);
}
.sjolie-about-diff-num {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--sjolie-sand, #dcbfa6);
  margin-bottom: 14px;
  line-height: 1;
}
.sjolie-about-diff-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 10px;
  line-height: 1.3;
}
.sjolie-about-diff-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a09189;
}

/* Trust Badges */
.sjolie-about-badges {
  background: var(--sjolie-cream, #fbfbf8);
  padding: 70px 40px;
}
.sjolie-about-badge-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.sjolie-about-badge {
  text-align: center;
}
.sjolie-about-badge img {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  object-fit: contain;
}
.sjolie-about-badge span {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Full-width product image break */
.sjolie-about-product-break {
  max-width: 100%;
  overflow: hidden;
  line-height: 0;
}
.sjolie-about-product-break img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 480px;
}

/* Responsibility */
.sjolie-about-responsibility {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 40px;
}
.sjolie-about-resp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sjolie-about-resp-card {
  background: var(--sjolie-pearl, #f3ece3);
  border-radius: 16px;
  padding: 36px 28px;
}
.sjolie-about-resp-card h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 12px;
}
.sjolie-about-resp-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a09189;
}

/* Testimonials */
.sjolie-about-testimonials {
  background: var(--sjolie-espresso, #3a2d27);
  padding: 70px 40px;
}
.sjolie-about-testimonials .sjolie-about-label {
  color: var(--sjolie-sand, #dcbfa6);
}
.sjolie-about-testimonials .sjolie-about-section-header h2 {
  color: #fff;
}
.sjolie-about-test-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sjolie-about-test-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px;
}
.sjolie-about-test-stars {
  color: var(--sjolie-caramel, #b4926e);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.sjolie-about-test-card p {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
}
.sjolie-about-test-card cite {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  color: var(--sjolie-sand, #dcbfa6);
}

/* Bottom CTA */
.sjolie-about-cta {
  max-width: 700px;
  margin: 0 auto;
  padding: 70px 40px;
  text-align: center;
}
.sjolie-about-cta h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 12px;
}
.sjolie-about-cta p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #a09189;
  margin-bottom: 28px;
}
.sjolie-about-cta-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sjolie-about-cta-btn {
  display: inline-block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sjolie-espresso, #3a2d27);
  padding: 16px 36px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}
.sjolie-about-cta-btn:hover {
  background: var(--sjolie-caramel, #b4926e);
  color: #fff;
}
.sjolie-about-cta-btn--outline {
  background: transparent;
  color: var(--sjolie-espresso, #3a2d27);
  border: 1px solid var(--sjolie-espresso, #3a2d27);
}
.sjolie-about-cta-btn--outline:hover {
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .sjolie-about-hero h1 { font-size: 2.6rem; }
  .sjolie-about-founders-content { grid-template-columns: 1fr; }
  .sjolie-about-founders-img { max-width: 400px; margin: 0 auto; }
  .sjolie-about-diff-grid { grid-template-columns: 1fr; }
  .sjolie-about-diff-card--wide { grid-column: auto; }
  .sjolie-about-badge-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .sjolie-about-resp-grid { grid-template-columns: 1fr; }
  .sjolie-about-test-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .sjolie-about-section-header h2 { font-size: 1.8rem; }
}
@media (max-width: 600px) {
  .sjolie-about-hero-overlay { padding: 60px 20px; min-height: 420px; }
  .sjolie-about-hero h1 { font-size: 2rem; }
  .sjolie-about-intro { padding: 40px 20px; }
  .sjolie-about-founders { padding: 50px 20px; }
  .sjolie-about-timeline-section { padding: 50px 20px; }
  .sjolie-about-timeline { padding-left: 60px; }
  .sjolie-about-timeline-year { left: -60px; font-size: 0.82rem; width: 40px; }
  .sjolie-about-timeline-dot { left: -29px; }
  .sjolie-about-timeline::before { left: 25px; }
  .sjolie-about-difference { padding: 50px 20px; }
  .sjolie-about-badges { padding: 50px 20px; }
  .sjolie-about-badge-grid { grid-template-columns: repeat(2, 1fr); }
  .sjolie-about-responsibility { padding: 50px 20px; }
  .sjolie-about-testimonials { padding: 50px 20px; }
  .sjolie-about-cta { padding: 50px 20px; }
  .sjolie-about-cta-links { flex-direction: column; align-items: center; }
  .sjolie-about-quote { padding: 20px 24px; }
}




/* =====================================================
   OUR STORY (page 22417) — Layout Override
   Single clean block — replaces all previous patches
   ===================================================== */

/* Hide Woodmart page title */
body.page-id-22417 .page-title-default,
body.page-id-22417 .wd-page-title {
  display: none !important;
}

/* Strip wrapper padding so sections can go full-width */
body.page-id-22417 .main-page-wrapper,
body.page-id-22417 .wd-content-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}
body.page-id-22417 .wd-content-layout,
body.page-id-22417 .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page-id-22417 .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Kill WP auto-generated empty <p> tags between sections */
body.page-id-22417 .entry-content > p {
  display: none !important;
}

/* =====================================================
   Full-width breakout for ALL sections
   ===================================================== */
body.page-id-22417 .sjolie-about-hero,
body.page-id-22417 .sjolie-about-intro,
body.page-id-22417 .sjolie-about-founders,
body.page-id-22417 .sjolie-about-industry,
body.page-id-22417 .sjolie-about-difference,
body.page-id-22417 .sjolie-about-badges,
body.page-id-22417 .sjolie-about-product-break,
body.page-id-22417 .sjolie-about-responsibility,
body.page-id-22417 .sjolie-about-testimonials,
body.page-id-22417 .sjolie-about-cta {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  right: auto !important;
}

/* =====================================================
   Section backgrounds
   ===================================================== */
body.page-id-22417 .sjolie-about-founders {
  background: var(--sjolie-cream, #fbfbf8);
  padding: 70px 40px !important;
}
body.page-id-22417 .sjolie-about-difference {
  background: #fff;
  padding: 70px 40px !important;
}
body.page-id-22417 .sjolie-about-responsibility {
  background: var(--sjolie-cream, #fbfbf8);
  padding: 70px 40px !important;
}
body.page-id-22417 .sjolie-about-cta {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 70px 40px !important;
  text-align: center;
}

/* =====================================================
   Inner content centering for sections that
   previously had max-width on themselves
   ===================================================== */
body.page-id-22417 .sjolie-about-founders .sjolie-about-section-header,
body.page-id-22417 .sjolie-about-founders .sjolie-about-founders-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
body.page-id-22417 .sjolie-about-difference .sjolie-about-section-header,
body.page-id-22417 .sjolie-about-difference .sjolie-about-diff-grid {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
body.page-id-22417 .sjolie-about-responsibility .sjolie-about-section-header,
body.page-id-22417 .sjolie-about-responsibility .sjolie-about-resp-grid {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
body.page-id-22417 .sjolie-about-cta h2,
body.page-id-22417 .sjolie-about-cta p,
body.page-id-22417 .sjolie-about-cta-links {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
body.page-id-22417 .sjolie-about-cta p {
  margin-bottom: 28px;
}

/* Diff cards on white bg — use pearl */
body.page-id-22417 .sjolie-about-diff-card {
  background: var(--sjolie-pearl, #f3ece3) !important;
  border-color: transparent !important;
}
body.page-id-22417 .sjolie-about-diff-card--wide {
  background: var(--sjolie-espresso, #3a2d27) !important;
}

/* =====================================================
   Hero — slightly darker overlay
   ===================================================== */
body.page-id-22417 .sjolie-about-hero-overlay {
  background: rgba(58,45,39,0.72) !important;
}
body.page-id-22417 .sjolie-about-hero-desc {
  color: rgba(255,255,255,0.92) !important;
}

/* =====================================================
   Industry Authority — 3-column grid
   ===================================================== */
body.page-id-22417 .sjolie-about-industry-grid {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* =====================================================
   Product break image — full width
   ===================================================== */
body.page-id-22417 .sjolie-about-product-break img {
  width: 100% !important;
  max-width: 100% !important;
}

/* =====================================================
   Responsive overrides
   ===================================================== */
@media (max-width: 900px) {
  body.page-id-22417 .sjolie-about-industry-grid {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
  }
}
@media (max-width: 600px) {
  body.page-id-22417 .sjolie-about-founders,
  body.page-id-22417 .sjolie-about-difference,
  body.page-id-22417 .sjolie-about-responsibility,
  body.page-id-22417 .sjolie-about-cta {
    padding: 50px 20px !important;
  }
}


/* =====================================================
   Industry Authority Section Styles
   ===================================================== */
.sjolie-about-industry {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 70px 40px;
}
.sjolie-about-industry .sjolie-about-section-header {
  max-width: 1100px;
  margin: 0 auto 44px;
}
.sjolie-about-industry-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}
.sjolie-about-industry-stat {
  background: #fff;
  border-radius: 18px;
  padding: 44px 36px;
  border: 1px solid rgba(180,146,110,0.1);
  text-align: center;
}
.sjolie-about-industry-big {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1;
  margin-bottom: 8px;
}
.sjolie-about-industry-stat h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 16px;
  line-height: 1.3;
}
.sjolie-about-industry-stat p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #a09189;
  text-align: left;
}
.sjolie-about-industry-bottom {
  max-width: 760px;
  margin: 32px auto 0;
  text-align: center;
}
.sjolie-about-industry-bottom p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #a09189;
  font-style: italic;
}

@media (max-width: 900px) {
  .sjolie-about-industry-grid { grid-template-columns: 1fr; max-width: 560px; }
  .sjolie-about-industry-big { font-size: 2.8rem; }
}
@media (max-width: 600px) {
  .sjolie-about-industry { padding: 50px 20px; }
  .sjolie-about-industry-stat { padding: 32px 24px; }
  .sjolie-about-industry-big { font-size: 2.4rem; }
}


/* =====================================================
   PRODUCT PAGE — Reviews Section
   ===================================================== */
.sjolie-reviews-section {
  background: var(--sjolie-pearl, #f3ece3);
  padding: 70px 40px;
  margin-top: 0;
}
.sjolie-reviews-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.sjolie-reviews-header {
  text-align: center;
  margin-bottom: 44px;
}
.sjolie-reviews-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 12px;
}
.sjolie-reviews-header h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  line-height: 1.2;
  margin: 0 0 16px;
}
.sjolie-reviews-avg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.sjolie-reviews-stars {
  font-size: 1.3rem;
  color: var(--sjolie-caramel, #b4926e);
  letter-spacing: 0.05em;
}
.sjolie-reviews-avg-num {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  color: #a09189;
}

/* Review Cards Grid */
.sjolie-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.sjolie-review-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid rgba(180,146,110,0.08);
  transition: box-shadow 0.3s, transform 0.3s;
}
.sjolie-review-card:hover {
  box-shadow: 0 8px 28px rgba(58,45,39,0.06);
  transform: translateY(-2px);
}
.sjolie-review-stars {
  font-size: 0.85rem;
  color: var(--sjolie-caramel, #b4926e);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.sjolie-review-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a09189;
  margin-bottom: 16px;
  font-style: italic;
}
.sjolie-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sjolie-review-author {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
}
.sjolie-review-date {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.72rem;
  color: #a89b92;
}

.sjolie-reviews-more {
  text-align: center;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  color: #a89b92;
  margin-bottom: 32px;
}

/* Review Form */
.sjolie-review-form-wrap {
  max-width: 600px;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  border: 1px solid rgba(180,146,110,0.08);
}
.sjolie-review-form-wrap h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 20px;
  text-align: center;
}
.sjolie-review-form-wrap .comment-respond {
  margin: 0;
  padding: 0;
}
.sjolie-review-form-wrap .comment-reply-title {
  display: none;
}
.sjolie-review-rating-select {
  margin-bottom: 16px;
}
.sjolie-review-rating-select label,
.sjolie-review-form-wrap .comment-form-comment label {
  display: block;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sjolie-espresso, #3a2d27);
  margin-bottom: 6px;
}
.sjolie-review-rating-select select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--sjolie-sand, #dcbfa6);
  border-radius: 8px;
  font-size: 0.9rem;
  background: #fff;
  color: var(--sjolie-espresso, #3a2d27);
  appearance: auto;
}
.sjolie-review-form-wrap textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sjolie-sand, #dcbfa6);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  resize: vertical;
  min-height: 55px;
  color: var(--sjolie-espresso, #3a2d27);
  box-sizing: border-box;
}
.sjolie-review-form-wrap textarea:focus,
.sjolie-review-rating-select select:focus {
  outline: none;
  border-color: var(--sjolie-caramel, #b4926e);
}
.sjolie-review-submit {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 32px;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sjolie-espresso, #3a2d27);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}
.sjolie-review-submit:hover {
  background: var(--sjolie-caramel, #b4926e);
}

.sjolie-review-login {
  text-align: center;
  font-size: 0.9rem;
  color: #a09189;
}
.sjolie-review-login a {
  color: var(--sjolie-caramel, #b4926e);
  font-weight: 600;
  text-decoration: underline;
}

/* Hide default WP form elements we don't need */
.sjolie-review-form-wrap .form-submit {
  margin: 0;
  padding: 0;
}
.sjolie-review-form-wrap #reply-title {
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
  .sjolie-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .sjolie-reviews-section {
    padding: 50px 20px;
  }
  .sjolie-reviews-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
  }
  .sjolie-review-form-wrap {
    padding: 28px 20px;
  }
  .sjolie-reviews-header h2 {
    font-size: 1.8rem;
  }
}

/* Load More Button */
.sjolie-reviews-load-more-wrap {
  text-align: center;
  margin-bottom: 32px;
}
.sjolie-reviews-load-more {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 36px;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sjolie-espresso, #3a2d27);
  background: transparent;
  border: 1.5px solid var(--sjolie-caramel, #b4926e);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.sjolie-reviews-load-more:hover {
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
  border-color: var(--sjolie-espresso, #3a2d27);
}
#sjolie-remaining-reviews { display: none; }

/* ── Product Star Rating (below title) ── */
.sjolie-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.sjolie-product-rating:hover {
  opacity: 0.75;
}
.sjolie-product-stars {
  display: flex;
  gap: 1px;
}
.sjolie-star {
  font-size: 1.1rem;
  line-height: 1;
}
.sjolie-star-full {
  color: var(--sjolie-caramel, #b4926e);
}
.sjolie-star-half {
  color: var(--sjolie-caramel, #b4926e);
  opacity: 0.6;
}
.sjolie-star-empty {
  color: var(--sjolie-sand, #dcbfa6);
}
.sjolie-product-rating-count {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  color: var(--sjolie-caramel, #b4926e);
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════
   SCHEDULE CONSULT PAGE (ID 222479)
   ═══════════════════════════════════════════════════ */

/* Hide default Woodmart title */
body.page-id-222479 .page-title,
body.page-id-222479 .wd-breadcrumbs { display: none !important; }
body.page-id-222479 .entry-content .container { max-width: 100% !important; padding: 0 !important; }
body.page-id-222479 .site-content { padding-top: 0 !important; }
body.page-id-222479 .entry-content > p:empty { display: none !important; }

/* ── Hero ── */
.sjolie-consult-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sjolie-espresso, #3a2d27) 0%, #2a1f1a 100%);
  overflow: hidden;
}
.sjolie-consult-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(180,146,110,0.15) 0%, transparent 70%);
}
.sjolie-consult-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding: 80px 24px;
}
.sjolie-consult-hero-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 16px;
}
.sjolie-consult-hero h1 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 20px;
}
.sjolie-consult-hero-sub {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 1.05rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin: 0;
}

/* ── Why Section ── */
.sjolie-consult-why {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--sjolie-cream, #fbfbf8);
  padding: 80px 24px;
}
.sjolie-consult-why-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.sjolie-consult-section-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sjolie-caramel, #b4926e);
  margin-bottom: 12px;
}
.sjolie-consult-why h2,
.sjolie-consult-how h2,
.sjolie-consult-form-section h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  color: var(--sjolie-espresso, #3a2d27);
  margin: 0 0 16px;
}
.sjolie-consult-why-intro {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 1rem;
  color: #6b5e57;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 48px;
}

/* Reason cards */
.sjolie-consult-reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: left;
}
.sjolie-consult-reason {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  border: 1px solid rgba(180,146,110,0.12);
  transition: box-shadow 0.3s;
}
.sjolie-consult-reason:hover {
  box-shadow: 0 8px 32px rgba(58,45,39,0.08);
}
.sjolie-consult-reason-num {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--sjolie-sand, #dcbfa6);
  display: block;
  margin-bottom: 12px;
}
.sjolie-consult-reason h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin: 0 0 8px;
}
.sjolie-consult-reason p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  color: #6b5e57;
  line-height: 1.65;
  margin: 0;
}

/* ── How It Works ── */
.sjolie-consult-how {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #fff;
  padding: 80px 24px;
}
.sjolie-consult-how-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.sjolie-consult-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 48px;
}
.sjolie-consult-step {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}
.sjolie-consult-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sjolie-espresso, #3a2d27);
  color: #fff;
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 1.3rem;
  margin: 0 auto 20px;
}
.sjolie-consult-step h3 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sjolie-espresso, #3a2d27);
  margin: 0 0 8px;
}
.sjolie-consult-step p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.88rem;
  color: #6b5e57;
  line-height: 1.6;
  margin: 0;
}
.sjolie-consult-step-divider {
  width: 60px;
  height: 1px;
  background: var(--sjolie-sand, #dcbfa6);
  margin-top: 26px;
  flex-shrink: 0;
}

/* ── Form Section ── */
.sjolie-consult-form-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--sjolie-pearl, #f3ece3);
  padding: 80px 24px;
}
.sjolie-consult-form-inner {
  max-width: 720px;
  margin: 0 auto;
}
.sjolie-consult-form-header {
  text-align: center;
  margin-bottom: 40px;
}
.sjolie-consult-form-note {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.88rem;
  color: #6b5e57;
  line-height: 1.6;
  margin-top: 8px;
}

/* Gravity Form Styling */
.sjolie-consult-form-wrap .gform_wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  border: 1px solid rgba(180,146,110,0.12);
  box-shadow: 0 4px 24px rgba(58,45,39,0.06);
}
.sjolie-consult-form-wrap .gform_wrapper .gfield_label,
.sjolie-consult-form-wrap .gform_wrapper label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--sjolie-espresso, #3a2d27) !important;
}
.sjolie-consult-form-wrap .gform_wrapper input[type="text"],
.sjolie-consult-form-wrap .gform_wrapper input[type="email"],
.sjolie-consult-form-wrap .gform_wrapper input[type="tel"],
.sjolie-consult-form-wrap .gform_wrapper input[type="number"],
.sjolie-consult-form-wrap .gform_wrapper input[type="date"],
.sjolie-consult-form-wrap .gform_wrapper select,
.sjolie-consult-form-wrap .gform_wrapper textarea {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
  font-size: 0.92rem !important;
  border: 1px solid var(--sjolie-sand, #dcbfa6) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  background: var(--sjolie-cream, #fbfbf8) !important;
  color: var(--sjolie-espresso, #3a2d27) !important;
  transition: border-color 0.3s !important;
}
.sjolie-consult-form-wrap .gform_wrapper input:focus,
.sjolie-consult-form-wrap .gform_wrapper select:focus,
.sjolie-consult-form-wrap .gform_wrapper textarea:focus {
  border-color: var(--sjolie-caramel, #b4926e) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(180,146,110,0.15) !important;
}
.sjolie-consult-form-wrap .gform_wrapper textarea {
  min-height: 120px !important;
  resize: vertical !important;
}
/* Checkboxes */
.sjolie-consult-form-wrap .gform_wrapper .gfield_checkbox label {
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: 0.92rem !important;
}
/* Submit button */
.sjolie-consult-form-wrap .gform_wrapper input[type="submit"],
.sjolie-consult-form-wrap .gform_wrapper .gform_button {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--sjolie-espresso, #3a2d27) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 40px !important;
  cursor: pointer !important;
  transition: background 0.3s !important;
  width: 100% !important;
  margin-top: 8px !important;
}
.sjolie-consult-form-wrap .gform_wrapper input[type="submit"]:hover,
.sjolie-consult-form-wrap .gform_wrapper .gform_button:hover {
  background: var(--sjolie-caramel, #b4926e) !important;
}
/* Select All button */
.sjolie-consult-form-wrap .gform_wrapper .gfield_choice_all_toggle {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--sjolie-sand, #dcbfa6) !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  color: var(--sjolie-espresso, #3a2d27) !important;
  cursor: pointer !important;
}
/* Required asterisk */
.sjolie-consult-form-wrap .gform_wrapper .gfield_required {
  color: var(--sjolie-caramel, #b4926e) !important;
}
/* Validation */
.sjolie-consult-form-wrap .gform_wrapper .gfield_error input,
.sjolie-consult-form-wrap .gform_wrapper .gfield_error textarea,
.sjolie-consult-form-wrap .gform_wrapper .gfield_error select {
  border-color: #c44 !important;
}

/* ── Bottom CTA ── */
.sjolie-consult-cta {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--sjolie-espresso, #3a2d27);
  padding: 56px 24px;
  text-align: center;
}
.sjolie-consult-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}
.sjolie-consult-cta h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif) !important;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 12px;
}
.sjolie-consult-cta p {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin: 0;
}
.sjolie-consult-cta a {
  color: var(--sjolie-caramel, #b4926e);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sjolie-consult-cta a:hover {
  color: var(--sjolie-sand, #dcbfa6);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .sjolie-consult-hero-content { padding: 60px 20px; }
  .sjolie-consult-reasons { grid-template-columns: 1fr; }
  .sjolie-consult-steps { flex-direction: column; gap: 32px; align-items: center; }
  .sjolie-consult-step-divider { width: 1px; height: 32px; margin: 0; }
  .sjolie-consult-form-wrap .gform_wrapper { padding: 24px; }
  .sjolie-consult-why,
  .sjolie-consult-how,
  .sjolie-consult-form-section { padding: 56px 20px; }
}

/* Kill wpautop gaps between consult sections */
body.page-id-222479 .entry-content > p {
  display: none !important;
}
body.page-id-222479 .entry-content {
  display: flex;
  flex-direction: column;
}
body.page-id-222479 .entry-content > div {
  display: block;
}

/* Kill all section margins on consult page */
body.page-id-222479 .entry-content > div {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
body.page-id-222479 .entry-content {
  margin-bottom: 0 !important;
}

/* Fix hero centering and overflow */
/* overflow-x removed per user request */
/* body.page-id-222479 .wd-page-wrapper overflow removed - caused header shift */
.sjolie-consult-hero-content {
  text-align: center !important;
  margin: 0 auto !important;
}
/* Fix hero flex alignment */
.sjolie-consult-hero {
  align-items: center !important;
  justify-content: center !important;
}

/* ── Consult page: remove gap between header and hero ── */
body.page-id-222479 .content-layout-wrapper { padding-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════
   CATEGORY PAGE — Editorial Top Section
   ═══════════════════════════════════════════════════════════ */
.sjolie-cat-editorial {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 40px;
    text-align: center;
}
.sjolie-cat-headline {
    font-family: var(--sjolie-serif);
    font-size: 32px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    letter-spacing: 0.02em;
    margin: 0 0 20px;
}
.sjolie-cat-intro {
    font-family: var(--sjolie-sans);
    font-size: 14px;
    line-height: 1.85;
    color: #a09189;
    max-width: 720px;
    margin: 0 auto 36px;
}
.sjolie-cat-features {
    display: flex;
    gap: 24px;
    justify-content: center;
}
.sjolie-cat-feature {
    flex: 1;
    max-width: 290px;
    text-align: center;
    padding: 28px 20px;
    border: 1px solid var(--sjolie-border, #e0d6cc);
    border-radius: 4px;
    background: var(--sjolie-pearl);
}
.sjolie-cat-feature strong {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-cat-feature span {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.7;
    color: #a09189;
}
@media (max-width: 768px) {
    .sjolie-cat-editorial { padding: 32px 20px 28px; }
    .sjolie-cat-headline { font-size: 26px; }
    .sjolie-cat-features { flex-direction: column; align-items: center; gap: 16px; }
    .sjolie-cat-feature { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY PAGE — Below-Grid Content (CMS Block v2)
   Full-bleed sections, 2-col cards, clean modern layout
   ═══════════════════════════════════════════════════════════ */
.sjolie-cat-content {
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
    overflow: hidden;
}

/* ── Sections — truly full-bleed, no gaps ── */
.sjolie-cat-section {
    padding: 64px 40px;
    width: 100%;
    margin: 0;
    background: #fff;
}
.sjolie-cat-section--pearl {
    background: var(--sjolie-pearl) !important;
}
.sjolie-cat-section--cta {
    background: var(--sjolie-espresso) !important;
    text-align: center;
    padding: 64px 40px;
}
.sjolie-cat-section-header {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}
.sjolie-cat-section-header h2 {
    font-family: var(--sjolie-serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}
.sjolie-cat-section--pearl .sjolie-cat-section-header h2,
.sjolie-cat-section .sjolie-cat-section-header h2 {
    color: var(--sjolie-espresso);
}
.sjolie-cat-section-header p {
    font-family: var(--sjolie-sans);
    font-size: 13.5px;
    line-height: 1.85;
    color: #a09189;
    margin: 0;
}

/* ── 2-Column Grid ── */
.sjolie-cat-grid--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .sjolie-cat-grid--2col { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Solution Comparison Cards ── */
.sjolie-cat-card {
    background: #fff;
    border: 1px solid var(--sjolie-border, #e0d6cc);
    border-radius: 6px;
    padding: 36px 32px;
    position: relative;
}
.sjolie-cat-card-badge {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.sjolie-cat-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}
.sjolie-cat-card-desc {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.8;
    color: #a09189;
    margin: 0 0 20px;
}
.sjolie-cat-card-specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    margin: 0 0 20px;
    border-top: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-cat-card-specs dt {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--sjolie-espresso);
    padding: 10px 16px 10px 0;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
    white-space: nowrap;
}
.sjolie-cat-card-specs dd {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: #a09189;
    padding: 10px 0;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
    margin: 0;
    line-height: 1.6;
}
.sjolie-cat-card-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sjolie-cat-card-benefits li {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    line-height: 1.7;
    color: #a09189;
    padding: 6px 0 6px 20px;
    position: relative;
}
.sjolie-cat-card-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--sjolie-caramel);
    font-weight: 500;
}

/* ── Rapid Banner — full-width horizontal strip ── */
.sjolie-cat-rapid-banner {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 28px auto 0;
    background: var(--sjolie-espresso);
    border-radius: 6px;
    padding: 36px 40px;
    color: var(--sjolie-cream);
}
.sjolie-cat-rapid-left {
    flex: 1;
}
.sjolie-cat-rapid-left h3 {
    font-family: var(--sjolie-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--sjolie-cream);
    margin: 0 0 10px;
}
.sjolie-cat-rapid-left p {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.8;
    color: var(--sjolie-sand);
    margin: 0;
}
.sjolie-cat-rapid-right {
    flex-shrink: 0;
    text-align: center;
}
.sjolie-cat-rapid-times {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.sjolie-cat-rapid-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-sand);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sjolie-cat-rapid-time span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(220,191,166,0.35);
    font-family: var(--sjolie-serif);
    font-size: 18px;
    color: var(--sjolie-caramel);
    letter-spacing: 0;
    text-transform: none;
}
.sjolie-cat-rapid-note {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: rgba(220,191,166,0.6);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .sjolie-cat-rapid-banner { flex-direction: column; padding: 28px 24px; gap: 24px; }
    .sjolie-cat-rapid-times { justify-content: center; }
}

/* ── Ingredient Columns ── */
.sjolie-cat-ingredients-col {
    padding: 32px;
    border-radius: 6px;
    border: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-cat-ingredients-col--love {
    background: #fff;
    border-left: 3px solid #8b9a6b;
}
.sjolie-cat-ingredients-col--avoid {
    background: #fff;
    border-left: 3px solid #c4958a;
}
.sjolie-cat-ingredients-col h4 {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-espresso);
    margin: 0 0 16px;
}
.sjolie-cat-ingredients-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sjolie-cat-ingredients-col li {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.7;
    color: #a09189;
    padding: 8px 0;
    border-bottom: 1px solid rgba(224,214,204,0.5);
}
.sjolie-cat-ingredients-col li:last-child {
    border-bottom: none;
}
.sjolie-cat-ingredients-col li strong {
    color: var(--sjolie-espresso);
    font-weight: 500;
}
.sjolie-cat-certifications {
    max-width: 800px;
    margin: 28px auto 0;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.85;
    color: #a09189;
}

/* ── Pro Tips Grid — compact 2x4 ── */
.sjolie-cat-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid var(--sjolie-border, #e0d6cc);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.sjolie-cat-tip {
    padding: 20px 24px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
    border-right: 1px solid var(--sjolie-border, #e0d6cc);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sjolie-cat-tip:nth-child(2n) {
    border-right: none;
}
.sjolie-cat-tip:nth-last-child(-n+2) {
    border-bottom: none;
}
.sjolie-cat-tip strong {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sjolie-espresso);
}
.sjolie-cat-tip span {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.6;
    color: #a09189;
}
@media (max-width: 600px) {
    .sjolie-cat-tips-grid { grid-template-columns: 1fr; }
    .sjolie-cat-tip { border-right: none !important; }
    .sjolie-cat-tip:last-child { border-bottom: none; }
}

/* ── FAQ Accordion — clean, no grey boxes ── */
.sjolie-cat-faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-cat-faq-item {
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-cat-faq-item:first-child {
    border-top: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-cat-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    cursor: pointer;
    font-family: var(--sjolie-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    background: none;
    border: none;
    text-align: left;
    transition: color 0.2s;
    line-height: 1.5;
}
.sjolie-cat-faq-q::after {
    content: '+';
    font-size: 20px;
    color: var(--sjolie-caramel);
    flex-shrink: 0;
    margin-left: 20px;
    transition: transform 0.3s;
    font-weight: 300;
    line-height: 1;
}
.sjolie-cat-faq-item.open .sjolie-cat-faq-q::after {
    content: '−';
}
.sjolie-cat-faq-q:hover {
    color: var(--sjolie-caramel);
}
.sjolie-cat-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.sjolie-cat-faq-item.open .sjolie-cat-faq-a {
    max-height: 800px;
    padding-bottom: 20px;
}
.sjolie-cat-faq-a p {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.85;
    color: #a09189;
    margin: 0 0 12px;
}
.sjolie-cat-faq-a ul {
    padding-left: 18px;
    margin: 8px 0 12px;
}
.sjolie-cat-faq-a li {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.7;
    color: #a09189;
    margin-bottom: 4px;
}
.sjolie-cat-faq-a a {
    color: var(--sjolie-caramel);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.sjolie-cat-faq-a a:hover {
    border-bottom-color: var(--sjolie-caramel);
}
.sjolie-cat-faq-a li strong {
    color: var(--sjolie-espresso);
    font-weight: 500;
}

/* ── CTA Section ── */
.sjolie-cat-section--cta h2 {
    font-family: var(--sjolie-serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--sjolie-cream);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}
.sjolie-cat-section--cta p {
    font-family: var(--sjolie-sans);
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--sjolie-sand);
    max-width: 600px;
    margin: 0 auto 16px;
}
.sjolie-cat-cta-phone {
    font-family: var(--sjolie-serif);
    font-size: 20px !important;
    color: var(--sjolie-cream) !important;
    margin: 24px auto 16px !important;
}
.sjolie-cat-cta-phone a {
    color: var(--sjolie-caramel);
    text-decoration: none;
    border-bottom: 1px solid var(--sjolie-caramel);
}
.sjolie-cat-cta-links {
    font-size: 13px !important;
    color: var(--sjolie-sand) !important;
}
.sjolie-cat-cta-links a {
    color: var(--sjolie-sand);
    text-decoration: none;
    border-bottom: 1px solid rgba(220,191,166,0.3);
    transition: border-color 0.2s, color 0.2s;
}
.sjolie-cat-cta-links a:hover {
    color: var(--sjolie-cream);
    border-bottom-color: var(--sjolie-cream);
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .sjolie-cat-section { padding: 40px 20px; }
    .sjolie-cat-section-header h2 { font-size: 22px; }
    .sjolie-cat-section-header { margin-bottom: 28px; }
    .sjolie-cat-card { padding: 28px 20px; }
    .sjolie-cat-card h3 { font-size: 19px; }
    .sjolie-cat-section--cta { padding: 40px 20px; }
    .sjolie-cat-section--cta h2 { font-size: 22px; }
    .sjolie-cat-cta-phone { font-size: 17px !important; }
    .sjolie-cat-faq-q { font-size: 13px; padding: 16px 0; }
}

/* ── FAQ Button Override — kill Woodmart's grey bg ── */
.sjolie-cat-faq-q {
    background: transparent !important;
    background-color: transparent !important;
    padding: 20px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    width: 100% !important;
    font-size: 14px !important;
    color: var(--sjolie-espresso) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.sjolie-cat-faq-q:hover {
    background: transparent !important;
    color: var(--sjolie-caramel) !important;
}
.sjolie-cat-faq-q::after {
    background: none !important;
}
@media (max-width: 768px) {
    .sjolie-cat-faq-q { font-size: 13px !important; padding: 16px 0 !important; }
}

/* ── Kill all gaps around full-bleed category content ── */
.tax-product_cat .wd-term-desc > .sjolie-cat-content {
    margin-bottom: 0 !important;
}
.tax-product_cat .wd-content-layout.container {
    padding-bottom: 0 !important;
}
/* Push the content wrapper flush — eat parent padding */
.sjolie-cat-content {
    margin-bottom: -40px !important;
}
/* Ensure no Woodmart entry-content margins interfere */
.wd-term-desc .sjolie-cat-content,
.wd-entry-content .sjolie-cat-content {
    margin-bottom: 0 !important;
}
/* Override Woodmart's .entry-content > div margin on category pages */
.tax-product_cat .wd-term-desc > div {
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   RETAIL PRODUCTS — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Product Spotlight (Sugar Scrub Section) ── */
.sjolie-retail-product-spotlight {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 20px rgba(58,45,39,0.04);
}
.sjolie-retail-spotlight-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-retail-spotlight-header h3 {
    font-family: var(--sjolie-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}
.sjolie-retail-size {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sjolie-retail-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
.sjolie-retail-detail-card {
    padding: 20px;
    background: var(--sjolie-pearl);
    border-radius: 10px;
}
.sjolie-retail-detail-card strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-retail-detail-card span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
}
.sjolie-retail-directions {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-retail-directions strong {
    color: var(--sjolie-espresso);
    font-weight: 500;
}

@media (max-width: 600px) {
    .sjolie-retail-product-spotlight { padding: 24px 20px; }
    .sjolie-retail-detail-grid { grid-template-columns: 1fr; gap: 16px; }
    .sjolie-retail-spotlight-header h3 { font-size: 19px; }
}

/* ── Aftercare Grid (4 step cards) ── */
.sjolie-retail-aftercare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.sjolie-retail-aftercare-card {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
}
.sjolie-retail-ac-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-retail-ac-step {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sjolie-caramel);
    margin-bottom: 8px;
}
.sjolie-retail-ac-header h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-retail-ac-use {
    font-family: var(--sjolie-sans);
    font-size: 11.5px;
    color: #a09189;
}
.sjolie-retail-ac-body {
    padding: 20px 24px 24px;
    flex: 1;
}
.sjolie-retail-ac-body p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
    margin: 0 0 16px;
}
.sjolie-retail-ac-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.sjolie-retail-ac-ingredients span {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-espresso);
    background: var(--sjolie-pearl);
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}
.sjolie-retail-ac-note {
    font-family: var(--sjolie-sans) !important;
    font-size: 11px !important;
    color: var(--sjolie-caramel) !important;
    font-style: italic;
    margin: 0 !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .sjolie-retail-aftercare-grid { grid-template-columns: 1fr; }
    .sjolie-retail-ac-header { padding: 20px 20px 14px; }
    .sjolie-retail-ac-body { padding: 16px 20px 20px; }
    .sjolie-retail-ac-header h3 { font-size: 17px; }
}

/* ── Self-Tan Grid (3 product cards) ── */
.sjolie-retail-selftan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-retail-selftan-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-retail-selftan-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-retail-st-type {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-retail-selftan-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
    margin: 0 0 20px;
}
.sjolie-retail-st-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.sjolie-retail-st-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 10px 12px;
}
.sjolie-retail-st-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 3px;
}
.sjolie-retail-st-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}

@media (max-width: 768px) {
    .sjolie-retail-selftan-grid { grid-template-columns: 1fr; }
    .sjolie-retail-selftan-card { padding: 24px 20px; }
}

/* ── Mitt Features (dark section) ── */
.sjolie-retail-mitt-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-retail-mitt-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-retail-mitt-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-retail-mitt-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-retail-mitt-features { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-retail-mitt-feature { padding: 12px 20px; }
}

/* ── Routine Grid (6 steps) ── */
.sjolie-retail-routine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.sjolie-retail-routine-step {
    background: white;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(58,45,39,0.04);
}
.sjolie-retail-routine-when {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white;
    background: var(--sjolie-caramel);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.sjolie-retail-routine-step strong {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
}
.sjolie-retail-routine-step span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    line-height: 1.65;
    color: #a09189;
}

@media (max-width: 768px) {
    .sjolie-retail-routine-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sjolie-retail-routine-grid { grid-template-columns: 1fr; }
}

/* ── Grid !important overrides for Woodmart ── */
.sjolie-retail-detail-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
.sjolie-retail-aftercare-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
.sjolie-retail-selftan-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
}
.sjolie-retail-mitt-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
}
.sjolie-retail-routine-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
}
.sjolie-retail-st-specs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 768px) {
    .sjolie-retail-aftercare-grid { grid-template-columns: 1fr !important; }
    .sjolie-retail-selftan-grid { grid-template-columns: 1fr !important; }
    .sjolie-retail-mitt-features { grid-template-columns: 1fr !important; }
    .sjolie-retail-routine-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
    .sjolie-retail-detail-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .sjolie-retail-routine-grid { grid-template-columns: 1fr !important; }
}

/* ══ Retail page — kill white gaps between full-bleed sections ══ */
.sjolie-cat-content > .sjolie-cat-section,
.sjolie-cat-content > .sjolie-cat-section.sjolie-cat-section--accent,
.sjolie-cat-content > .sjolie-cat-section.sjolie-cat-section--cta {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Kill any Woodmart spacing between adjacent sections */
.sjolie-cat-content > div + div {
    margin-top: 0 !important;
}
/* Kill any p/div margin Woodmart adds inside the content wrapper */
.sjolie-cat-content {
    font-size: 0;
    line-height: 0;
}
.sjolie-cat-content > .sjolie-cat-section {
    font-size: 14px;
    line-height: 1.6;
}
/* Also kill the script element spacing */
.sjolie-cat-content > script {
    display: none !important;
}

/* ══ Fix aftercare grid — force 2x2 ══ */
.sjolie-retail-aftercare-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}
.sjolie-retail-aftercare-card {
    display: flex !important;
    flex-direction: column !important;
}
@media (max-width: 768px) {
    .sjolie-retail-aftercare-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══ Kill wpautop empty <p> tags inside all retail grids ══ */
.sjolie-retail-aftercare-grid > p,
.sjolie-retail-selftan-grid > p,
.sjolie-retail-detail-grid > p,
.sjolie-retail-mitt-features > p,
.sjolie-retail-routine-grid > p,
.sjolie-retail-st-specs > p,
.sjolie-cat-section-header > p:empty,
.sjolie-retail-aftercare-card > .sjolie-retail-ac-body > p:empty,
.sjolie-retail-selftan-card > p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
/* Also hide any stray <br> tags wpautop adds */
.sjolie-retail-aftercare-grid > br,
.sjolie-retail-selftan-grid > br,
.sjolie-retail-detail-grid > br,
.sjolie-retail-mitt-features > br,
.sjolie-retail-routine-grid > br {
    display: none !important;
}

/* ══ Kill ALL wpautop <p> and whitespace gaps between full-bleed sections ══ */
.sjolie-cat-content > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.sjolie-cat-content > br {
    display: none !important;
}
.sjolie-cat-content {
    font-size: 0 !important;
    line-height: 0 !important;
    word-spacing: 0 !important;
    letter-spacing: 0 !important;
}
.sjolie-cat-content > .sjolie-cat-section {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ══ Nuclear option — flexbox kills ALL whitespace gaps ══ */
.sjolie-cat-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    row-gap: 0 !important;
}
.sjolie-cat-content > p,
.sjolie-cat-content > br {
    flex: 0 0 0px !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sjolie-cat-content > .sjolie-cat-section {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ══ Fix routine pill contrast ══ */
.sjolie-retail-routine-when {
    color: var(--sjolie-cream) !important;
    background: var(--sjolie-espresso) !important;
}

/* ══════════════════════════════════════════════════════════
   STARTER KITS — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Business Steps Grid (4 cards) ── */
.sjolie-sk-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-sk-step-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-sk-step-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-sk-step-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-sk-step-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-sk-steps-grid { grid-template-columns: 1fr; }
    .sjolie-sk-step-card { padding: 24px 20px; }
}

/* ── Kit Comparison Grid (3 cards per row) ── */
.sjolie-sk-brand-label {
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sjolie-caramel);
    text-align: center;
    margin: 32px 0 16px;
}
.sjolie-sk-brand-label:first-of-type {
    margin-top: 0;
}
.sjolie-sk-kit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-sk-kit-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
    position: relative;
}
.sjolie-sk-kit-card--featured {
    border: 2px solid var(--sjolie-caramel);
}
.sjolie-sk-kit-tier {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sjolie-cream);
    background: var(--sjolie-espresso);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    align-self: flex-start;
}
.sjolie-sk-kit-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-sk-kit-price {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 28px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
}
.sjolie-sk-kit-best {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-sk-kit-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-sk-kit-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-sk-kit-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-sk-kit-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-sk-kit-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}
.sjolie-sk-kit-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-sk-kit-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 768px) {
    .sjolie-sk-kit-grid { grid-template-columns: 1fr; max-width: 400px; }
    .sjolie-sk-kit-card { padding: 24px 20px; }
}

/* ── What's Included Grid (3x2) ── */
.sjolie-sk-included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-sk-included-item {
    background: white;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 2px 12px rgba(58,45,39,0.04);
}
.sjolie-sk-included-item strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-sk-included-item span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
}

@media (max-width: 768px) {
    .sjolie-sk-included-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sjolie-sk-included-grid { grid-template-columns: 1fr; }
}

/* ── Spray Tanning From Home Grid (2x2) ── */
.sjolie-sk-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-sk-home-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-sk-home-card strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.sjolie-sk-home-card span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-sk-home-grid { grid-template-columns: 1fr; }
    .sjolie-sk-home-card { padding: 24px 20px; }
}

/* ══════════════════════════════════════════════════════════
   SPRAY TAN MACHINES — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── How to Choose Grid (2x2) ── */
.sjolie-stm-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-stm-choose-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-stm-choose-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-stm-choose-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-stm-choose-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-stm-choose-grid { grid-template-columns: 1fr; }
    .sjolie-stm-choose-card { padding: 24px 20px; }
}

/* ── Machine Cards (Apollo 4-col, Fuji 3-col) ── */
.sjolie-stm-machine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1060px;
    margin: 0 auto;
}
.sjolie-stm-fuji-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-stm-machine-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
    position: relative;
}
.sjolie-stm-machine-card--featured {
    border: 2px solid var(--sjolie-caramel);
}
.sjolie-stm-machine-tier {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sjolie-cream);
    background: var(--sjolie-espresso);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    align-self: flex-start;
}
.sjolie-stm-machine-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-stm-machine-price {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
}
.sjolie-stm-machine-best {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-stm-machine-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-stm-machine-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-stm-machine-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-stm-machine-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-stm-machine-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}
.sjolie-stm-machine-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-stm-machine-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 1024px) {
    .sjolie-stm-machine-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .sjolie-stm-machine-grid { grid-template-columns: 1fr; max-width: 400px; }
    .sjolie-stm-fuji-grid { grid-template-columns: 1fr; max-width: 400px; }
    .sjolie-stm-machine-card { padding: 24px 20px; }
}

/* ── Features Grid (3x2) ── */
.sjolie-stm-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-stm-feature-card {
    background: white;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 2px 12px rgba(58,45,39,0.04);
}
.sjolie-stm-feature-card strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-stm-feature-card span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
}

@media (max-width: 768px) {
    .sjolie-stm-features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sjolie-stm-features-grid { grid-template-columns: 1fr; }
}

/* ── Why Sjolie (dark section features) ── */
.sjolie-stm-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-stm-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-stm-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-stm-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-stm-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-stm-why-feature { padding: 12px 20px; }
}

/* ── Comparison Table ── */
.sjolie-stm-table-wrap {
    max-width: 960px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sjolie-stm-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-stm-compare-table thead {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}
.sjolie-stm-compare-table th {
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 16px;
    text-align: left;
}
.sjolie-stm-compare-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
    color: var(--sjolie-espresso);
}
.sjolie-stm-compare-table td strong {
    font-weight: 600;
}
.sjolie-stm-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.sjolie-stm-compare-table tbody tr:nth-child(even) {
    background: var(--sjolie-pearl);
}

@media (max-width: 600px) {
    .sjolie-stm-compare-table th,
    .sjolie-stm-compare-table td { padding: 10px 12px; font-size: 12px; }
    .sjolie-stm-compare-table th { font-size: 9px; }
}

/* ══════════════════════════════════════════════════════════
   SELF-TAN — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Product Cards (2x2) ── */
.sjolie-st-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-st-product-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
}
.sjolie-st-product-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-st-product-type {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-st-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-st-product-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-st-product-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-st-product-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-st-product-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}
.sjolie-st-product-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-st-product-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 768px) {
    .sjolie-st-product-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-st-product-card { padding: 24px 20px; }
}

/* ── Application Steps Grid (2x2) ── */
.sjolie-st-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-st-step-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-st-step-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-st-step-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-st-step-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-st-steps-grid { grid-template-columns: 1fr; }
    .sjolie-st-step-card { padding: 24px 20px; }
}

/* ── Why Sjolie (dark section) ── */
.sjolie-st-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-st-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-st-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-st-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-st-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-st-why-feature { padding: 12px 20px; }
}

/* ══════════════════════════════════════════════════════════
   PRE-TAN — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Product Cards (2x2) ── */
.sjolie-pt-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-pt-product-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
}
.sjolie-pt-product-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-pt-product-type {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-pt-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-pt-product-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-pt-product-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-pt-product-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-pt-product-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}
.sjolie-pt-product-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-pt-product-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 768px) {
    .sjolie-pt-product-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-pt-product-card { padding: 24px 20px; }
}

/* ── Preparation Steps Grid (2x2) ── */
.sjolie-pt-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-pt-step-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-pt-step-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-pt-step-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-pt-step-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-pt-steps-grid { grid-template-columns: 1fr; }
    .sjolie-pt-step-card { padding: 24px 20px; }
}

/* ── Why Prep Section (dark) ── */
.sjolie-pt-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-pt-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-pt-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-pt-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-pt-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-pt-why-feature { padding: 12px 20px; }
}

/* ── Client Checklist Grid ── */
.sjolie-pt-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-pt-checklist-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-pt-checklist-card strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-pt-checklist-card span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-pt-checklist-grid { grid-template-columns: 1fr; }
    .sjolie-pt-checklist-card { padding: 24px 20px; }
}

/* ══════════════════════════════════════════════════════════
   SKIN CARE — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Product Cards (3x2) ── */
.sjolie-sc-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-sc-product-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
}
.sjolie-sc-product-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-sc-product-type {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-sc-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-sc-product-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-sc-product-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-sc-product-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-sc-product-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}
.sjolie-sc-product-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-sc-product-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 768px) {
    .sjolie-sc-product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sjolie-sc-product-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-sc-product-card { padding: 24px 20px; }
}

/* ── Aftercare Steps Grid (2x2) ── */
.sjolie-sc-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-sc-step-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-sc-step-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-sc-step-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-sc-step-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-sc-steps-grid { grid-template-columns: 1fr; }
    .sjolie-sc-step-card { padding: 24px 20px; }
}

/* ── Why Aftercare Section (dark) ── */
.sjolie-sc-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-sc-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-sc-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-sc-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-sc-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-sc-why-feature { padding: 12px 20px; }
}

/* ── Do / Avoid Tips Cards ── */
.sjolie-sc-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-sc-tip-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-sc-tip-card strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}
.sjolie-sc-tip-card--do strong { color: #5a7a5a; }
.sjolie-sc-tip-card--avoid strong { color: #9a5a5a; }
.sjolie-sc-tip-card span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-sc-tips-grid { grid-template-columns: 1fr; }
    .sjolie-sc-tip-card { padding: 24px 20px; }
}

/* ══════════════════════════════════════════════════════════
   ADDITIVES — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Concentrate Product Cards (2x2) ── */
.sjolie-ad-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-ad-product-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
}
.sjolie-ad-product-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 6px;
}
.sjolie-ad-product-type {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-ad-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-ad-product-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-ad-product-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-ad-product-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-ad-product-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}
.sjolie-ad-product-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-ad-product-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 768px) {
    .sjolie-ad-product-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-ad-product-card { padding: 24px 20px; }
}

/* ── Enhancement Cards (Shimmer & Scent) ── */
.sjolie-ad-enhance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-ad-enhance-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    border-top: 3px solid var(--sjolie-caramel);
}
.sjolie-ad-enhance-card strong {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 4px;
}
.sjolie-ad-enhance-label {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-ad-enhance-card p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
}
.sjolie-ad-enhance-price {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--sjolie-espresso);
}
.sjolie-ad-enhance-card--shimmer { border-top-color: #c9a96e; }
.sjolie-ad-enhance-card--scent { border-top-color: #8aab7f; }

@media (max-width: 600px) {
    .sjolie-ad-enhance-grid { grid-template-columns: 1fr; }
    .sjolie-ad-enhance-card { padding: 24px 20px; }
}

/* ── How-To Steps Grid (2x2) ── */
.sjolie-ad-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-ad-step-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-ad-step-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-ad-step-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-ad-step-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-ad-steps-grid { grid-template-columns: 1fr; }
    .sjolie-ad-step-card { padding: 24px 20px; }
}

/* ── Why Customization Section (dark) ── */
.sjolie-ad-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-ad-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-ad-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-ad-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-ad-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-ad-why-feature { padding: 12px 20px; }
}

/* ── Quick-Reference Guide (3x2) ── */
.sjolie-ad-ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-ad-ref-card {
    background: white;
    border-radius: 12px;
    padding: 22px 20px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-ad-ref-card strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-ad-ref-card span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    line-height: 1.7;
    color: #a09189;
}

@media (max-width: 768px) {
    .sjolie-ad-ref-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sjolie-ad-ref-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-ad-ref-card { padding: 20px 18px; }
}

/* ══════════════════════════════════════════════════════════
   FUJI SPRAY — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Turbine Comparison Grid (3-col) ── */
.sjolie-fj-turbine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-fj-turbine-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-fj-turbine-card--featured {
    border-top-color: var(--sjolie-caramel);
    box-shadow: 0 4px 24px rgba(58,45,39,0.08);
}
.sjolie-fj-turbine-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 4px;
}
.sjolie-fj-turbine-tag {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-fj-turbine-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-fj-turbine-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-fj-turbine-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-fj-turbine-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-fj-turbine-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 12px;
    flex: 1;
}
.sjolie-fj-turbine-ideal {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    line-height: 1.6;
    color: #a09189;
    margin-bottom: 16px;
}
.sjolie-fj-turbine-ideal strong {
    color: var(--sjolie-espresso);
}
.sjolie-fj-turbine-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-fj-turbine-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}
.sjolie-fj-turbine-card--featured .sjolie-fj-turbine-link {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
    border-color: var(--sjolie-espresso);
}
.sjolie-fj-turbine-card--featured .sjolie-fj-turbine-link:hover {
    background: var(--sjolie-caramel);
    border-color: var(--sjolie-caramel);
}

@media (max-width: 768px) {
    .sjolie-fj-turbine-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-fj-turbine-card { padding: 24px 20px; }
}

/* ── Applicator Cards (2-col) ── */
.sjolie-fj-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-fj-app-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
}
.sjolie-fj-app-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 4px;
}
.sjolie-fj-app-label {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-fj-app-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-fj-app-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-fj-app-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-fj-app-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-fj-app-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}
.sjolie-fj-app-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-fj-app-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 600px) {
    .sjolie-fj-app-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-fj-app-card { padding: 24px 20px; }
}

/* ── How to Choose Steps (2x2) ── */
.sjolie-fj-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-fj-choose-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-fj-choose-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-fj-choose-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-fj-choose-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-fj-choose-grid { grid-template-columns: 1fr; }
    .sjolie-fj-choose-card { padding: 24px 20px; }
}

/* ── Why Fuji Section (dark) ── */
.sjolie-fj-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-fj-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-fj-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-fj-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-fj-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-fj-why-feature { padding: 12px 20px; }
}

/* ══════════════════════════════════════════════════════════
   APOLLO — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Machine Comparison Grid (2x2) ── */
.sjolie-ap-machine-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-ap-machine-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-ap-machine-card--featured {
    border-top-color: var(--sjolie-caramel);
    box-shadow: 0 4px 24px rgba(58,45,39,0.08);
}
.sjolie-ap-machine-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 4px;
}
.sjolie-ap-machine-tag {
    display: inline-block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-ap-machine-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-ap-machine-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-ap-machine-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-ap-machine-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-ap-machine-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 12px;
    flex: 1;
}
.sjolie-ap-machine-ideal {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    line-height: 1.6;
    color: #a09189;
    margin-bottom: 16px;
}
.sjolie-ap-machine-ideal strong {
    color: var(--sjolie-espresso);
}
.sjolie-ap-machine-link {
    display: block;
    text-align: center;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sjolie-espresso);
    border: 1px solid var(--sjolie-espresso);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sjolie-ap-machine-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}
.sjolie-ap-machine-card--featured .sjolie-ap-machine-link {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
    border-color: var(--sjolie-espresso);
}
.sjolie-ap-machine-card--featured .sjolie-ap-machine-link:hover {
    background: var(--sjolie-caramel);
    border-color: var(--sjolie-caramel);
}

@media (max-width: 768px) {
    .sjolie-ap-machine-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-ap-machine-card { padding: 24px 20px; }
}

/* ── Applicator Cards (2-col) ── */
.sjolie-ap-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-ap-app-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
    display: flex;
    flex-direction: column;
}
.sjolie-ap-app-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 4px;
}
.sjolie-ap-app-label {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-ap-app-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.sjolie-ap-app-specs > div {
    background: var(--sjolie-pearl);
    border-radius: 8px;
    padding: 8px 12px;
}
.sjolie-ap-app-specs strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sjolie-caramel);
    margin-bottom: 2px;
}
.sjolie-ap-app-specs span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    color: var(--sjolie-espresso);
}
.sjolie-ap-app-card > p {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
    margin: 0 0 16px;
    flex: 1;
}

@media (max-width: 600px) {
    .sjolie-ap-app-grid { grid-template-columns: 1fr; max-width: 440px; }
    .sjolie-ap-app-card { padding: 24px 20px; }
}

/* ── How to Choose Steps (2x2) ── */
.sjolie-ap-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-ap-choose-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-ap-choose-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-ap-choose-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-ap-choose-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-ap-choose-grid { grid-template-columns: 1fr; }
    .sjolie-ap-choose-card { padding: 24px 20px; }
}

/* ── Why Apollo Section (dark) ── */
.sjolie-ap-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-ap-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-ap-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-ap-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-ap-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-ap-why-feature { padding: 12px 20px; }
}

/* ══════════════════════════════════════════════════════════
   TECHNICIAN SUPPLIES — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Supply Group Cards (2x2) ── */
.sjolie-ts-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-ts-group-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-ts-group-label {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-ts-group-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sjolie-ts-item strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.sjolie-ts-item span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-ts-group-grid { grid-template-columns: 1fr; }
    .sjolie-ts-group-card { padding: 24px 20px; }
}

/* ── Stocking Tips (2x2) ── */
.sjolie-ts-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-ts-tips-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-ts-tips-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-ts-tips-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-ts-tips-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-ts-tips-grid { grid-template-columns: 1fr; }
    .sjolie-ts-tips-card { padding: 24px 20px; }
}

/* ── Why Section (dark) ── */
.sjolie-ts-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-ts-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-ts-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-ts-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-ts-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-ts-why-feature { padding: 12px 20px; }
}

/* ══════════════════════════════════════════════════════════
   EQUIPMENT SUPPLIES — Category Page Styles
   ══════════════════════════════════════════════════════════ */

/* ── Brand Parts Grid (2-col) ── */
.sjolie-es-brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-es-brand-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-es-brand-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin: 0 0 4px;
}
.sjolie-es-brand-label {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    color: var(--sjolie-caramel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-border, #e0d6cc);
}
.sjolie-es-parts-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sjolie-es-parts-group strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}
.sjolie-es-parts-group span {
    font-family: var(--sjolie-sans);
    font-size: 12px;
    line-height: 1.65;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-es-brand-grid { grid-template-columns: 1fr; }
    .sjolie-es-brand-card { padding: 24px 20px; }
}

/* ── Universal Accessories (2x2) ── */
.sjolie-es-universal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-es-universal-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-es-universal-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-es-universal-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-es-universal-grid { grid-template-columns: 1fr; }
    .sjolie-es-universal-card { padding: 24px 20px; }
}

/* ── When to Replace (2x2) ── */
.sjolie-es-when-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.sjolie-es-when-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(58,45,39,0.04);
}
.sjolie-es-when-num {
    display: inline-block;
    font-family: var(--sjolie-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--sjolie-caramel);
    margin-bottom: 12px;
}
.sjolie-es-when-card > strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--sjolie-espresso);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.sjolie-es-when-card > span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-es-when-grid { grid-template-columns: 1fr; }
    .sjolie-es-when-card { padding: 24px 20px; }
}

/* ── Why Section (dark) ── */
.sjolie-es-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.sjolie-es-why-feature {
    text-align: center;
    padding: 20px;
}
.sjolie-es-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-es-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-es-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-es-why-feature { padding: 12px 20px; }
}

/* ══ Full-bleed fix for category extra description sections ══ */
.wd-term-desc > .sjolie-cat-section,
.wd-term-desc > .sjolie-cat-section.sjolie-cat-section--accent,
.wd-term-desc > .sjolie-cat-section.sjolie-cat-section--cta {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    padding-left: calc(50vw - 50% + 40px) !important;
    padding-right: calc(50vw - 50% + 40px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.wd-term-desc > div + div {
    margin-top: 0 !important;
}
/* ══ Mobile Tanning Tents (.sjolie-tn-*) ══ */
.sjolie-tn-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-tn-product-card {
    background: #fff;
    border: 1px solid var(--sjolie-sand);
    border-radius: 3px;
    padding: 32px 28px;
}
.sjolie-tn-product-card h3 {
    font-family: var(--sjolie-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 4px;
}
.sjolie-tn-product-type {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sjolie-sand);
}
.sjolie-tn-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--sjolie-pearl);
    border-radius: 3px;
    padding: 12px;
}
.sjolie-tn-product-specs div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sjolie-tn-product-specs strong {
    font-family: var(--sjolie-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sjolie-caramel);
}
.sjolie-tn-product-specs span {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    color: var(--sjolie-espresso);
    font-weight: 500;
}
.sjolie-tn-product-card p {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.75;
    color: #a09189;
    margin-bottom: 20px;
}
.sjolie-tn-product-link {
    display: block;
    text-align: center;
    padding: 12px 24px;
    border: 1px solid var(--sjolie-espresso);
    border-radius: 2px;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--sjolie-espresso);
    text-decoration: none;
    transition: all 0.25s ease;
}
.sjolie-tn-product-link:hover {
    background: var(--sjolie-espresso);
    color: var(--sjolie-cream);
}

@media (max-width: 768px) {
    .sjolie-tn-product-grid { grid-template-columns: 1fr; }
}

/* Steps grid */
.sjolie-tn-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-tn-step-card {
    background: var(--sjolie-pearl);
    border-radius: 3px;
    padding: 28px 24px;
}
.sjolie-tn-step-num {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 12px;
    color: var(--sjolie-caramel);
    margin-bottom: 8px;
}
.sjolie-tn-step-card strong {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 10px;
}
.sjolie-tn-step-card span {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-tn-steps-grid { grid-template-columns: 1fr; }
}

/* Compare grid */
.sjolie-tn-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-tn-compare-card {
    background: #fff;
    border: 1px solid var(--sjolie-sand);
    border-radius: 3px;
    padding: 28px 24px;
}
.sjolie-tn-compare-card strong {
    display: block;
    font-family: var(--sjolie-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--sjolie-espresso);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sjolie-sand);
}
.sjolie-tn-compare-card span {
    font-family: var(--sjolie-sans);
    font-size: 13px;
    line-height: 1.75;
    color: #a09189;
}

@media (max-width: 600px) {
    .sjolie-tn-compare-grid { grid-template-columns: 1fr; }
}

/* Why grid */
.sjolie-tn-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.sjolie-tn-why-feature {
    text-align: center;
    padding: 12px;
}
.sjolie-tn-why-feature strong {
    display: block;
    font-family: var(--sjolie-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sjolie-tn-why-feature span {
    font-family: var(--sjolie-sans);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .sjolie-tn-why-grid { grid-template-columns: 1fr; gap: 8px; }
    .sjolie-tn-why-feature { padding: 12px 20px; }
}

/* =====================================================
   REWARDS PAGE — Full-Width Fixes & Gap Squashing
   ===================================================== */

/* Kill white gap between header and hero */
.page-id-23342 main.container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Squash white lines between ALL sections on rewards page */
.post-23342.entry-content > div + div {
  margin-top: 0 !important;
}
.post-23342.entry-content > div {
  margin-bottom: 0 !important;
}

/* Full-bleed breakout for background sections */
.sjolie-rewards-hero,
.sjolie-rewards-math-section,
.sjolie-rewards-form-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  box-sizing: border-box !important;
}

/* Hero needs centered content within the full bleed */
.sjolie-rewards-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 80px !important;
  padding-bottom: 60px !important;
}

/* Math section inner content stays centered */
.sjolie-rewards-math-section .sjolie-rewards-section-header,
.sjolie-rewards-math-section .sjolie-rewards-math-grid {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Form section inner content stays centered */
.sjolie-rewards-form-section .sjolie-rewards-form-header,
.sjolie-rewards-form-section .sjolie-rewards-form-tabs,
.sjolie-rewards-form-section .sjolie-rewards-form-panel {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Discount bar — also full bleed with bottom border spanning full width */
.sjolie-rewards-discount-bar {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}

/* Who qualifies card — full bleed background */
.sjolie-rewards-qualify-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  padding-bottom: 60px !important;
}

/* FAQ section top border should span full width */
.sjolie-rewards-faq-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
}

/* Responsive adjustments for rewards full-bleed */
@media (max-width: 600px) {
  .sjolie-rewards-hero {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }
  .sjolie-rewards-hero,
  .sjolie-rewards-math-section,
  .sjolie-rewards-form-section,
  .sjolie-rewards-discount-bar,
  .sjolie-rewards-qualify-section,
  .sjolie-rewards-faq-section {
    padding-left: calc(50vw - 50% + 20px) !important;
    padding-right: calc(50vw - 50% + 20px) !important;
  }
}

/* Kill wpautop empty <p> tags wrapping HTML comments on rewards page */
.post-23342.entry-content > p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =====================================================
   CONTACT PAGE — Full Redesign
   ===================================================== */

/* Kill main container padding for contact page */
.page-id-262 main.container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-id-262 .entry-content > p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* --- HERO --- */
.sjolie-contact-hero {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  background: #f3ece3;
  padding: 70px calc(50vw - 50%) 50px !important;
  text-align: center;
}
.sjolie-contact-kicker {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #b4926e;
  margin: 0 0 12px 0;
  font-weight: 500;
}
.sjolie-contact-h1 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(32px, 5vw, 50px);
  color: #3a2d27;
  margin: 0 0 16px 0;
  font-weight: 400;
  line-height: 1.15;
}
.sjolie-contact-h2 {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: clamp(26px, 3.5vw, 38px);
  color: #3a2d27;
  margin: 0 0 18px 0;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.sjolie-contact-divider {
  width: 50px;
  height: 2px;
  background: #b4926e;
  margin: 0 auto 18px;
}
.sjolie-contact-subtitle {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 16px;
  color: #a09189;
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.sjolie-contact-body {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 15px;
  color: #6b5e56;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

/* Quick-link cards */
.sjolie-contact-quick-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto;
}
.sjolie-contact-qlink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e0d6cc;
  border-radius: 14px;
  padding: 28px 32px 22px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 1 1 180px;
  min-width: 170px;
  max-width: 220px;
}
.sjolie-contact-qlink:hover {
  border-color: #b4926e;
  box-shadow: 0 8px 24px rgba(58,45,39,0.08);
  transform: translateY(-3px);
}
.sjolie-contact-qlink-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f3ece3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sjolie-contact-qlink:hover .sjolie-contact-qlink-icon {
  background: #b4926e;
}
.sjolie-contact-qlink:hover .sjolie-contact-qlink-icon svg {
  stroke: #fff;
}
.sjolie-contact-qlink-label {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 17px;
  color: #3a2d27;
  font-weight: 400;
}
.sjolie-contact-qlink-desc {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  color: #a09189;
}

/* --- LIVE CHAT SECTION --- */
.sjolie-contact-chat-section {
  padding: 60px 0;
}
.sjolie-contact-chat-inner {
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto;
}
.sjolie-contact-chat-text {
  flex: 1;
  min-width: 260px;
}
.sjolie-contact-chat-window {
  flex: 1;
  min-width: 320px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.sjolie-contact-chat-window:hover {
  transform: scale(1.02);
}

/* Chat frame mockup */
.sjolie-chat-frame {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(58,45,39,0.12), 0 2px 8px rgba(58,45,39,0.06);
  overflow: hidden;
  border: 1px solid #e0d6cc;
}
.sjolie-chat-frame-header {
  background: #3a2d27;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sjolie-chat-frame-dots {
  display: flex;
  gap: 6px;
}
.sjolie-chat-frame-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.sjolie-chat-frame-dots span:first-child { background: #e74c3c; }
.sjolie-chat-frame-dots span:nth-child(2) { background: #f39c12; }
.sjolie-chat-frame-dots span:nth-child(3) { background: #2ecc71; }
.sjolie-chat-frame-title {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin-left: 6px;
}
.sjolie-chat-frame-body {
  padding: 24px 18px;
  min-height: 180px;
  background: #fbfbf8;
}
.sjolie-chat-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.sjolie-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #b4926e;
  color: #fff;
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sjolie-chat-msg {
  background: #f3ece3;
  padding: 12px 16px;
  border-radius: 4px 16px 16px 16px;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  color: #3a2d27;
  line-height: 1.5;
  max-width: 85%;
}

/* Typing indicator animation */
.sjolie-chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 42px;
}
.sjolie-chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b4926e;
  opacity: 0.4;
  animation: sjolieTyping 1.4s infinite ease-in-out;
}
.sjolie-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.sjolie-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sjolieTyping {
  0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.2); }
}

.sjolie-chat-frame-footer {
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid #f0e8df;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sjolie-chat-input-fake {
  flex: 1;
  padding: 10px 14px;
  border-radius: 24px;
  background: #f8f5f1;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  color: #a09189;
  border: 1px solid #e0d6cc;
}
.sjolie-chat-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f3ece3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sjolie-chat-click-hint {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  color: #a09189;
  text-align: center;
  margin: 12px 0 0;
}

/* --- DETAILS SECTION (Call & Visit) --- */
.sjolie-contact-details-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  background: #f3ece3;
  padding: 60px calc(50vw - 50%) !important;
}
.sjolie-contact-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}
.sjolie-contact-detail-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 30px;
  text-align: center;
  border: 1px solid #e0d6cc;
}
.sjolie-contact-detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f3ece3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.sjolie-contact-detail-title {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 22px;
  color: #3a2d27;
  margin: 0 0 16px 0;
  font-weight: 400;
}
.sjolie-contact-phone-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
.sjolie-contact-phone-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sjolie-contact-phone-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a09189;
}
.sjolie-contact-phone-number {
  font-family: var(--sjolie-serif, 'Playfair Display', serif);
  font-size: 22px;
  color: #3a2d27;
  text-decoration: none;
  transition: color 0.2s;
}
.sjolie-contact-phone-number:hover {
  color: #b4926e;
}
.sjolie-contact-phone-divider {
  width: 1px;
  height: 40px;
  background: #e0d6cc;
}
.sjolie-contact-detail-note {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  color: #a09189;
  margin: 0;
}
.sjolie-contact-btn-outline {
  display: inline-block;
  padding: 10px 24px;
  border: 1.5px solid #b4926e;
  border-radius: 8px;
  color: #b4926e;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  margin-top: 8px;
}
.sjolie-contact-btn-outline:hover {
  background: #b4926e;
  color: #fff;
}

/* --- EMAIL FORM SECTION --- */
.sjolie-contact-email-section {
  padding: 60px 0;
  text-align: center;
}
.sjolie-contact-email-inner {
  max-width: 700px;
  margin: 0 auto;
}
.sjolie-contact-form-wrapper {
  text-align: left;
}

/* Style Gravity Form to match brand */
.sjolie-contact-form-wrapper .gform_wrapper input[type="text"],
.sjolie-contact-form-wrapper .gform_wrapper input[type="email"],
.sjolie-contact-form-wrapper .gform_wrapper input[type="tel"],
.sjolie-contact-form-wrapper .gform_wrapper textarea,
.sjolie-contact-form-wrapper .gform_wrapper select {
  border: 1px solid #e0d6cc !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
  font-size: 15px !important;
  color: #3a2d27 !important;
  background: #fbfbf8 !important;
  transition: border-color 0.2s !important;
}
.sjolie-contact-form-wrapper .gform_wrapper input:focus,
.sjolie-contact-form-wrapper .gform_wrapper textarea:focus {
  border-color: #b4926e !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(180,146,110,0.1) !important;
}
.sjolie-contact-form-wrapper .gform_wrapper .gform_button,
.sjolie-contact-form-wrapper .gform_wrapper input[type="submit"] {
  background: #3a2d27 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 36px !important;
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif) !important;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}
.sjolie-contact-form-wrapper .gform_wrapper .gform_button:hover,
.sjolie-contact-form-wrapper .gform_wrapper input[type="submit"]:hover {
  background: #b4926e !important;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  .sjolie-contact-hero {
    padding: 50px calc(50vw - 50% + 20px) 40px !important;
  }
  .sjolie-contact-quick-links {
    gap: 12px;
  }
  .sjolie-contact-qlink {
    padding: 20px 18px 16px;
    min-width: 140px;
  }
  .sjolie-contact-chat-inner {
    flex-direction: column;
    gap: 30px;
    padding: 0 20px;
  }
  .sjolie-contact-chat-text {
    text-align: center;
  }
  .sjolie-contact-chat-text .sjolie-contact-kicker,
  .sjolie-contact-chat-text .sjolie-contact-h2 {
    text-align: center !important;
  }
  .sjolie-contact-chat-window {
    min-width: unset;
    width: 100%;
  }
  .sjolie-contact-details-section {
    padding: 40px calc(50vw - 50% + 20px) !important;
  }
  .sjolie-contact-details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sjolie-contact-phone-row {
    flex-direction: column;
    gap: 14px;
  }
  .sjolie-contact-phone-divider {
    width: 40px;
    height: 1px;
  }
  .sjolie-contact-email-section {
    padding: 40px 20px;
  }
}

/* Contact page — kill wpautop empty <p> tags inside all containers */
.sjolie-contact-hero p:empty,
.sjolie-contact-quick-links > p,
.sjolie-contact-chat-inner > p,
.sjolie-contact-details-grid > p,
.sjolie-contact-detail-card > p:empty,
.sjolie-contact-email-inner > p:empty,
.sjolie-contact-chat-section > p,
.sjolie-contact-details-section > p,
.sjolie-contact-email-section > p,
.sjolie-chat-frame > p,
.sjolie-chat-frame-body > p,
.sjolie-chat-frame-footer > p,
.sjolie-chat-frame-header > p,
.sjolie-contact-phone-row > p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Contact page — arrow replaces fake chat after click */
.sjolie-arrow-replace {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 30px;
}
.sjolie-arrow-replace-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: sjolieReplaceIn 0.5s ease-out;
}
.sjolie-arrow-replace-svg {
  animation: sjolieArrowNudge 1.2s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(180,146,110,0.4));
}
.sjolie-arrow-replace-label {
  font-family: var(--sjolie-sans, 'DM Sans', sans-serif);
  font-size: 17px;
  font-weight: 600;
  color: #3a2d27;
  background: #f3ece3;
  padding: 12px 24px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
@keyframes sjolieReplaceIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sjolieArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}
@media (max-width: 768px) {
  .sjolie-arrow-replace {
    min-height: 120px;
    padding: 20px;
  }
  .sjolie-arrow-replace-label {
    font-size: 15px;
    padding: 10px 18px;
  }
}


/* ═══ HOMEPAGE TOOL ICONS — image icons ═══ */
.sjolie-home-tool-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════
   FULL-WIDTH VIEWPORT BREAKOUT + GAP FIX
   Samples page (85520) & Shipping page (23077)
   ═══════════════════════════════════════════════════════ */

/* ── Shared full-width breakout mixin ── */
.sjolie-samples-hero,
.sjolie-samples-trust-bar,
.sjolie-samples-section,
.sjolie-samples-products-section,
.sjolie-samples-note-section,
.sjolie-samples-testimonials-section,
.sjolie-samples-faq-section,
.sjolie-samples-form-section,
.sjolie-ship-hero,
.sjolie-ship-rates,
.sjolie-ship-section,
.sjolie-ship-expedited-section,
.sjolie-ship-tracking-section,
.sjolie-ship-cta {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* ── Sections that need inner content constrained ── */
.sjolie-samples-hero {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
  text-align: center;
}
.sjolie-samples-trust-bar {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
  justify-content: center;
}
.sjolie-samples-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-samples-products-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-samples-note-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-samples-testimonials-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-samples-faq-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.sjolie-samples-form-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}

/* Shipping page sections */
.sjolie-ship-hero {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
  text-align: center;
}
.sjolie-ship-rates {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-ship-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-ship-expedited-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-ship-tracking-section {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}
.sjolie-ship-cta {
  padding-left: calc(50vw - 50% + 40px) !important;
  padding-right: calc(50vw - 50% + 40px) !important;
  max-width: none !important;
}

/* ── Inner content max-width constraints (keep content centered) ── */
.sjolie-samples-products-section .sjolie-samples-products-grid,
.sjolie-samples-products-section .sjolie-samples-section-header,
.sjolie-samples-testimonials-section .sjolie-samples-section-header,
.sjolie-samples-testimonials-section .sjolie-samples-testimonial-carousel {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.sjolie-samples-section > .sjolie-samples-section-header,
.sjolie-samples-section > .sjolie-samples-selling-grid,
.sjolie-samples-section > .sjolie-samples-steps,
.sjolie-samples-section > .sjolie-samples-faq-list {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.sjolie-samples-note-section > .sjolie-samples-note-card {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.sjolie-samples-form-section > .sjolie-samples-form-header {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.sjolie-samples-faq-section > .sjolie-samples-section-header {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.sjolie-samples-faq-section > .sjolie-samples-faq-list {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* Shipping inner constraints */
.sjolie-ship-rates > .sjolie-ship-rate-card,
.sjolie-ship-section > .sjolie-ship-section-header,
.sjolie-ship-section > .sjolie-ship-info-grid {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.sjolie-ship-rates {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Alternating backgrounds for sections without explicit bg ── */
/* Samples: hero(pearl) → trust(white) → why(white) → products(pearl) → steps(white) → note(white) → testimonials(pearl) → faq(white) → form(pearl) */
.sjolie-samples-trust-bar {
  background: #ffffff;
}
.sjolie-samples-section {
  background: #ffffff;
}
.sjolie-samples-note-section {
  background: #ffffff;
}
.sjolie-samples-faq-section {
  background: #ffffff;
}

/* Shipping: hero(pearl) → rates(white) → domestic(white) → expedited(pearl) → intl(white) → tracking(pearl) → cta(espresso) */
.sjolie-ship-rates {
  background: #ffffff;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.sjolie-ship-section {
  background: #ffffff;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* ── Smash white gaps — entry content wrappers ── */
.page-id-85520 .entry-content,
.page-id-23077 .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}
.page-id-85520 .entry-content > p:empty,
.page-id-85520 .entry-content > br,
.page-id-23077 .entry-content > p:empty,
.page-id-23077 .entry-content > br {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
.page-id-85520 .site-content,
.page-id-85520 .content-area,
.page-id-85520 .main-page-wrapper,
.page-id-85520 .site-main,
.page-id-23077 .site-content,
.page-id-23077 .content-area,
.page-id-23077 .main-page-wrapper,
.page-id-23077 .site-main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.page-id-85520 .website-wrapper > .main-page-wrapper,
.page-id-85520 .website-wrapper > .main-page-wrapper > .container,
.page-id-85520 .website-wrapper > .main-page-wrapper > .container > .row,
.page-id-85520 .website-wrapper > .main-page-wrapper > .container > .row > .site-content,
.page-id-85520 .website-wrapper > .main-page-wrapper > .container > .row > .site-content > .site-main,
.page-id-23077 .website-wrapper > .main-page-wrapper,
.page-id-23077 .website-wrapper > .main-page-wrapper > .container,
.page-id-23077 .website-wrapper > .main-page-wrapper > .container > .row,
.page-id-23077 .website-wrapper > .main-page-wrapper > .container > .row > .site-content,
.page-id-23077 .website-wrapper > .main-page-wrapper > .container > .row > .site-content > .site-main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .sjolie-samples-hero,
  .sjolie-samples-trust-bar,
  .sjolie-samples-section,
  .sjolie-samples-products-section,
  .sjolie-samples-note-section,
  .sjolie-samples-testimonials-section,
  .sjolie-samples-faq-section,
  .sjolie-samples-form-section,
  .sjolie-ship-hero,
  .sjolie-ship-rates,
  .sjolie-ship-section,
  .sjolie-ship-expedited-section,
  .sjolie-ship-tracking-section,
  .sjolie-ship-cta {
    padding-left: calc(50vw - 50% + 20px) !important;
    padding-right: calc(50vw - 50% + 20px) !important;
  }
}


/* ── Hide Woodmart page title bar + kill top gap ── */
.page-id-23077 .wd-page-title,
.page-id-23077 .page-title-default,
.page-id-85520 .wd-page-title,
.page-id-85520 .page-title-default,
.page-id-1043 .wd-page-title,
.page-id-1043 .page-title-default {
  display: none !important;
}

/* Kill any top padding/margin on the content wrapper */
.page-id-23077 .main-page-wrapper,
.page-id-23077 .wd-content-layout,
.page-id-85520 .main-page-wrapper,
.page-id-85520 .wd-content-layout,
.page-id-1043 .main-page-wrapper,
.page-id-1043 .wd-content-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
}