/*
 * Momo Jord design polish — emergency CSS Groups A through K2
 * Migrated 2026-05-27 from wp-content/themes/shoptimizer-child/style.css
 * (lines 1217-2111). Enqueued by modules/design/module.php.
 */
   2026-05-27 — Pixel-perfect harmonisering (Group A)
   Global CTA contrast. Vit text på alla primära gröna knappar.
   Shoptimizers default på .single_add_to_cart_button är #111 (svart text på
   mörkgrönt = för dålig kontrast + ser inte intentionellt ut).
   ============================================================================ */
.single_add_to_cart_button,
button.single_add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.button.alt,
button.button.alt,
.shoptimizer-mini-cart-wrap .checkout-button,
#shoptimizerCartDrawer .checkout-button,
.added_to_cart {
    color: #fff !important;
}
.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.button.alt:hover,
button.button.alt:hover,
.shoptimizer-mini-cart-wrap .checkout-button:hover,
#shoptimizerCartDrawer .checkout-button:hover {
    color: #fff !important;
}

/* Säkerställ att SVG-ikoner inuti gröna CTA-knappar är vita (checkmark, pil) */
.single_add_to_cart_button svg,
.wc-block-cart__submit-button svg,
.wc-block-components-checkout-place-order-button svg,
#shoptimizerCartDrawer .checkout-button svg {
    fill: currentColor !important;
    color: #fff !important;
}

/* ATC-knapp flexbox alignment så ikon (checkmark) hamnar i baseline med text.
   IMG_1732 visar att default-Shoptimizer renderar ikonen lite för lågt och
   off-center; vi tvingar inline-flex med gap. */
.single_add_to_cart_button,
button.single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    line-height: 1 !important;
}
.single_add_to_cart_button::before,
button.single_add_to_cart_button::before {
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* ============================================================================
   2026-05-27 — Pixel-perfect harmonisering (Groups B–F)
   ============================================================================ */

/* ---- GROUP B: Header / Hamburger ------------------------------------------ */

/* Hide "Meny" text from Shoptimizer hamburger — the icon is universally
   understood. */
.menu-toggle .bar-text { display: none !important; }

/* Pure-CSS morph: three bars → X when body.mobile-toggled is set by Shoptimizer
   on menu open. Use longer transition for elegance, transform-origin center. */
.menu-toggle .bar {
    transition: transform .35s cubic-bezier(.4,.0,.2,1),
                margin-top .35s cubic-bezier(.4,.0,.2,1),
                opacity .2s ease,
                width .35s ease !important;
    transform-origin: center !important;
    border-radius: 2px !important;
}

/* Slimmer, more elegant lines (was 22×2 → now 22×1.5, with subtle round). */
.menu-toggle .bar { height: 1.5px !important; }

body.mobile-toggled .menu-toggle .bar:nth-child(1) {
    margin-top: -1px !important;
    transform: rotate(45deg) !important;
}
body.mobile-toggled .menu-toggle .bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}
body.mobile-toggled .menu-toggle .bar:nth-child(3) {
    margin-top: -1px !important;
    transform: rotate(-45deg) !important;
}

/* Visually align hamburger + cart with logo. Both Shoptimizer elements are
   absolute-positioned to top:0; centering vertically via top:50% is cleaner. */
@media (max-width: 992px) {
    .site-header .menu-toggle,
    .site-header .site-header-cart {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    body.mobile-toggled .site-header .menu-toggle {
        transform: translateY(-50%) !important;
    }
}

/* ---- GROUP C: PDP variations + ATC + Stripe Link -------------------------- */

/* Variation cards (cgkit) — cleaner, more minimal */
.cgkit-attribute-swatches .cgkit-as-single {
    border: 1px solid #d4d4cf !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
    box-shadow: none !important;
}
.cgkit-attribute-swatches .cgkit-as-single:hover {
    border-color: #8da870 !important;
    background: #fafbf6 !important;
}
.cgkit-attribute-swatches .cgkit-as-single.cgkit-as-active,
.cgkit-attribute-swatches .cgkit-as-single.selected,
.cgkit-attribute-swatches .cgkit-as-single[aria-selected="true"] {
    border: 2px solid #5f8e38 !important;
    background: #f5f8ee !important;
    padding: 11px 13px !important; /* compensate +1px border */
}
/* Out-of-stock variant — clear muted state */
.cgkit-attribute-swatches .cgkit-as-single.cgkit-as-out-of-stock,
.cgkit-attribute-swatches .cgkit-as-single.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f5f5f3 !important;
    position: relative;
}
.cgkit-attribute-swatches .cgkit-as-single.cgkit-as-out-of-stock::after {
    content: "Slut";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
}

/* Stripe Express Checkout ("Betala säkert med link") — hide on single product.
   Selectors are defensive: Stripe + WC Blocks + WC core variants. */
body.single-product .wc-stripe-payment-request-wrapper,
body.single-product .stripe-payment-request-wrapper,
body.single-product .wc-stripe-product-page-prb,
body.single-product .wc-stripe-product-checkout-container,
body.single-product .wc-block-components-express-payment,
body.single-product .wc-block-components-express-payment--cart,
body.single-product #wc-stripe-payment-request-wrapper,
body.single-product #wc-stripe-payment-request-button,
body.single-product [id^="wc-stripe-payment-request-button"],
body.single-product .wc-stripe-link-button-wrapper,
body.single-product .wc-stripe-payment-request-button-wrapper,
body.single-product .wc-stripe-link-button,
body.single-product .stripe-pay-button-wrapper {
    display: none !important;
}

/* Sticky CTA on PDP (momo-sticky-cta.php) — refine spacing so checkmark icon
   centers with text in the ATC button inside the bar. */
.momo-scta__atc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
    color: #fff !important;
}
.momo-scta__atc svg,
.momo-scta__atc::before { flex-shrink: 0 !important; }

/* ---- GROUP D: Sidebar cart drawer ----------------------------------------- */

/* Drawer "Till kassan" button: dark moss-green solid, no gradient, no lock
   icon. Arrow added via ::after. */
.shoptimizer-mini-cart-wrap .checkout-button,
#shoptimizerCartDrawer .checkout-button,
.shoptimizer-mini-cart-wrap .checkout,
#shoptimizerCartDrawer .button.checkout {
    background: #2e3a22 !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 14px 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 6px 16px rgba(46, 58, 34, 0.18) !important;
    transition: background-color .18s ease, transform .15s ease, box-shadow .18s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.shoptimizer-mini-cart-wrap .checkout-button:hover,
#shoptimizerCartDrawer .checkout-button:hover {
    background: #3a4a2c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 20px rgba(46, 58, 34, 0.22) !important;
}

/* Hide lock-icon pseudo-elements (FontAwesome \f023, dashicons-lock, etc.) */
.shoptimizer-mini-cart-wrap .checkout-button::before,
#shoptimizerCartDrawer .checkout-button::before,
.shoptimizer-mini-cart-wrap .checkout::before {
    content: none !important;
    display: none !important;
}
/* Inline SVG lock icon if present */
.shoptimizer-mini-cart-wrap .checkout-button svg[class*="lock"],
#shoptimizerCartDrawer .checkout-button svg[class*="lock"],
.shoptimizer-mini-cart-wrap .checkout-button .lock-icon,
#shoptimizerCartDrawer .checkout-button .lock-icon {
    display: none !important;
}
/* Add subtle arrow */
.shoptimizer-mini-cart-wrap .checkout-button::after,
#shoptimizerCartDrawer .checkout-button::after {
    content: "→" !important;
    display: inline-block !important;
    font-weight: 400 !important;
    transition: transform .18s ease !important;
}
.shoptimizer-mini-cart-wrap .checkout-button:hover::after,
#shoptimizerCartDrawer .checkout-button:hover::after {
    transform: translateX(3px) !important;
}

/* Free-shipping bar in drawer/cart — add bottom margin so it doesn't kiss the
   product row below. */
.momo-freeship,
.shoptimizer-mini-cart-wrap .momo-freeship,
#shoptimizerCartDrawer .momo-freeship {
    margin-bottom: 18px !important;
}
.momo-freeship--won { padding: 12px 16px !important; }

/* "Visa varukorg" secondary button — subtle outline, not competing with primary */
.shoptimizer-mini-cart-wrap .wc-forward:not(.checkout-button):not(.checkout),
#shoptimizerCartDrawer .wc-forward:not(.checkout-button):not(.checkout) {
    background: transparent !important;
    color: #2e3a22 !important;
    border: 1px solid #d4d4cf !important;
    border-radius: 10px !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
}

/* ---- GROUP E: Mobile checkout tightening ---------------------------------- */

/* Hide "Övrig information" heading — it adds no value, just clutter */
.woocommerce-additional-fields > h3,
.woocommerce-additional-fields-heading,
.wc-block-checkout__additional-fields h2,
.wc-block-checkout__additional-fields h3 {
    display: none !important;
}

/* Order notes <details>+<summary> collapse styling (injected by checkout-polish JS) */
.mj-order-notes-collapse {
    margin: 16px 0 !important;
    border-top: 1px solid #eee !important;
    padding-top: 12px !important;
}
.mj-order-notes-collapse > summary {
    cursor: pointer !important;
    font-size: 0.88rem !important;
    color: #5f6f4a !important;
    list-style: none !important;
    padding: 6px 0 !important;
    user-select: none !important;
}
.mj-order-notes-collapse > summary::-webkit-details-marker { display: none !important; }
.mj-order-notes-collapse > summary::before {
    content: "+ ";
    font-weight: 600 !important;
    color: #2e3a22 !important;
}
.mj-order-notes-collapse[open] > summary::before { content: "− "; }
.mj-order-notes-collapse[open] > summary { color: #2e3a22 !important; }
.mj-order-notes-collapse .form-row,
.mj-order-notes-collapse .woocommerce-additional-fields__field-wrapper { margin-top: 8px !important; }

/* Newsletter checkbox — single line on mobile */
@media (max-width: 768px) {
    body.woocommerce-checkout .form-row .checkbox,
    body.woocommerce-checkout label.checkbox,
    body.woocommerce-checkout .wc-block-components-checkbox {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
    }
}

/* Tighten shipping selector on mobile fallback form */
@media (max-width: 768px) {
    body.woocommerce-checkout form.woocommerce-checkout #shipping_method,
    body.woocommerce-checkout form.woocommerce-checkout .woocommerce-shipping-methods {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.woocommerce-checkout form.woocommerce-checkout #shipping_method li,
    body.woocommerce-checkout form.woocommerce-checkout .woocommerce-shipping-methods li {
        background: #fff !important;
        border: 1px solid #e5e3dd !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        margin-bottom: 8px !important;
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }
    body.woocommerce-checkout form.woocommerce-checkout #shipping_method li label,
    body.woocommerce-checkout form.woocommerce-checkout .woocommerce-shipping-methods li label {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        cursor: pointer !important;
    }
    /* Tighten form rows on mobile */
    body.woocommerce-checkout form.woocommerce-checkout .form-row { margin-bottom: 12px !important; }
    body.woocommerce-checkout form.woocommerce-checkout h3 {
        font-size: 0.98rem !important;
        font-weight: 600 !important;
        margin: 16px 0 8px !important;
        padding-top: 0 !important;
    }
    /* Klarna iframe — give it scroll-margin so jumping-to lands cleanly */
    #kco-iframe, .kco-iframe { scroll-margin-top: 16px !important; }
}

/* "Betala med Swish eller kort (Stripe) istället!" — smaller, more subordinate */
#klarna-checkout-select-other,
.kco-form-toggle,
button#klarna-checkout-select-other {
    font-size: 0.88rem !important;
    padding: 9px 18px !important;
    border: 1.5px solid #5f8e38 !important;
    background: transparent !important;
    color: #2e3a22 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    margin: 12px auto !important;
    display: inline-flex !important;
    align-items: center !important;
    text-transform: none !important;
}
#klarna-checkout-select-other:hover {
    background: #f5f8ee !important;
}

/* Frakt row "halv ruta" — the .totalt row in KCO can look broken on mobile.
   Force consistent borders. */
@media (max-width: 768px) {
    body.woocommerce-checkout #kco-order-review .woocommerce-shipping-totals,
    body.woocommerce-checkout #kco-order-review .order-total,
    body.woocommerce-checkout #kco-order-review .shipping {
        border-top: 1px solid #eee !important;
        border-bottom: 0 !important;
        padding: 10px 0 !important;
    }
    body.woocommerce-checkout #kco-order-review td,
    body.woocommerce-checkout #kco-order-review th {
        padding: 8px 6px !important;
        font-size: 0.92rem !important;
    }
}

/* ---- GROUP F: Homepage margins + hero + text blocks ----------------------- */

/* Remove white outer padding on homepage so .alignfull rows are truly edge-
   to-edge. Inner content (theme content width) keeps its max-width via the
   row's inner column wrap. */
body.home .site-content,
body.home main.site-main,
body.home #primary,
body.home .content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
body.home .entry-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero (first parallax row on homepage). NOTE: this is the BIG image hero
   "Hammockar designade av någon som faktiskt sover i skogen" — NOT the
   "Vi är på äventyr" widget above it (which is .header-widget-region and
   should be left alone). */
body.home main .kb-row-layout-wrap.kt-jarallax:first-of-type,
body.home .kb-row-layout-wrap.kt-row-has-bg.kt-jarallax:first-of-type {
    padding-top: 32px !important;
    padding-bottom: 56px !important;
}
@media (max-width: 768px) {
    body.home main .kb-row-layout-wrap.kt-jarallax:first-of-type,
    body.home .kb-row-layout-wrap.kt-row-has-bg.kt-jarallax:first-of-type {
        padding-top: 24px !important;
        padding-bottom: 44px !important;
        min-height: auto !important;
    }
}

/* Trim margin-top on first heading inside any block row so headings don't
   gain phantom luft above them */
body.home .kb-row-layout-wrap .kt-row-column-wrap > .kt-inside-inner-col > :first-child,
body.home .kb-row-layout-wrap .wp-block-kadence-advancedheading:first-child {
    margin-top: 0 !important;
}

/* Text-only blocks under image rows — give them 24px padding on mobile so
   text doesn't kiss the screen edge */
@media (max-width: 768px) {
    body.home .kb-row-layout-wrap:not(.kt-row-has-bg) .kt-row-column-wrap,
    body.home .kb-row-layout-wrap.has-theme-palette8-background-color .kt-row-column-wrap,
    body.home .kb-row-layout-wrap.has-theme-palette9-background-color .kt-row-column-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Below-header widget (Vi är på äventyr) — UNTOUCHED by hero rules above.
   But: tighten its vertical rhythm slightly so it sits closer to header. */
.header-widget-region #block-37 p { margin: 0 !important; }
.header-widget-region .col-full { padding-top: 6px !important; padding-bottom: 6px !important; }

/* ---- Generic accessibility/safety overrides ------------------------------- */

/* Ensure ATC button stays white-text even when Shoptimizer's "Klick i varukorg"
   loading state kicks in */
.single_add_to_cart_button.loading,
.single_add_to_cart_button:disabled { color: #fff !important; }

/* ============================================================================
   2026-05-27 — Group H: Regression fixes after Chrome QA verification
   ============================================================================ */

/* H1: ATC button text — backup high-specificity in case autoptimize cache or
   shoptimizer parent CSS still wins. Targets every plausible chain. */
html body.woocommerce button.single_add_to_cart_button,
html body.woocommerce-page button.single_add_to_cart_button,
html body button.button.alt.single_add_to_cart_button,
html body .summary form.cart button.single_add_to_cart_button {
    color: #ffffff !important;
}

/* H2: Stripe Express Checkout — NEW Stripe Blocks API. Jord-Claude only had
   the legacy .wc-stripe-payment-request-wrapper selectors; live element is
   #wc-stripe-express-checkout-element. */
body.single-product #wc-stripe-express-checkout-element,
body.single-product #wc-stripe-express-checkout-element-link,
body.single-product .wc-stripe-express-checkout-element,
body.single-product .wc-stripe-express-checkout-wrapper,
body.single-product .wc-stripe-express-checkout__container,
body.single-product div[id^="wc-stripe-express-checkout"] {
    display: none !important;
}

/* H3: Order notes CSS-only collapse. The <details>/<summary> wrapper got
   destroyed on KCO re-render. Hide row by default, show on body class. JS
   in checkout-polish only inserts a toggle button (idempotent). */
body.woocommerce-checkout p#order_comments_field,
body.woocommerce-checkout .form-row.notes { display: none !important; }
body.woocommerce-checkout.mj-notes-open p#order_comments_field,
body.woocommerce-checkout.mj-notes-open .form-row.notes { display: block !important; }
.mj-notes-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 8px 0; margin: 0;
    cursor: pointer; font-size: 0.88rem; color: #5f6f4a;
    font-family: inherit; text-align: left;
}
.mj-notes-toggle::before {
    content: "+"; font-weight: 700; color: #2e3a22;
    width: 14px; display: inline-block; text-align: center;
}
body.mj-notes-open .mj-notes-toggle::before { content: "−"; }
.mj-notes-toggle:hover { color: #2e3a22; }

/* ============================================================================
   2026-05-27 — Group I: Pixel-perfect homepage polish + AI-slop purge
   Triggered by user feedback: "Finns i lager"-AI-slop, missade marginaler,
   hero-bild ej till kanten, inkoherent layout, CTAs utan marginal.
   ============================================================================ */

/* I1: Remove AI-slop "✓ Finns i lager" sub-line under "Den enda underquilt..."
   on homepage. Author: jord-Claude added it as a credibility cue but it reads
   as slop. Hide everywhere it appears — only used in one spot. */
.mj-instock-badge { display: none !important; }

/* I2: Consistent vertical breathing room around all CTAs. Default Kadence
   advanced buttons render with margin:0 — add space so they don't crash into
   surrounding text. */
.entry-content .wp-block-kadence-advancedbtn.kb-buttons-wrap,
.entry-content .wp-block-buttons,
.entry-content > .wp-block-button {
    margin-top: 1.75rem !important;
    margin-bottom: 1.25rem !important;
}

/* I3: Standardize body paragraph font-size for all content paragraphs.
   Some Kadence blocks render at 16px, others smaller; force 1rem consistent
   typography rhythm. */
.entry-content p.wp-block-paragraph,
.kt-inside-inner-col p.wp-block-paragraph {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}
/* Exception: smaller text inside green announcement band (top hero) */
.kb-row-layout-wrap[class*="385120_3ec5d8"] p.wp-block-paragraph,
.kt-row-layout-id385120_3ec5d8-ab p.wp-block-paragraph {
    font-size: 0.875rem !important;
}

/* I4: Mobile alignfull — make sure full-bleed sections actually reach edges
   of viewport (not constrained by parent container padding). */
@media (max-width: 991px) {
    body .entry-content > .alignfull,
    body .entry-content .wp-block-kadence-rowlayout.alignfull,
    body .entry-content .kb-row-layout-wrap.alignfull,
    body .entry-content .wp-block-cover.alignfull,
    body .entry-content .wp-block-image.alignfull {
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    body .entry-content .alignfull img { width: 100% !important; max-width: 100% !important; }
}

/* I5: Section vertical rhythm on mobile — consistent breathing between
   feature rows so headlines don't crash into the bottom of preceding sections. */
@media (max-width: 991px) {
    .entry-content .kb-row-layout-wrap[id^="kt-layout-id385120"] .kt-row-column-wrap {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    .entry-content h1.wp-block-kadence-advancedheading,
    .entry-content h2.wp-block-kadence-advancedheading,
    .entry-content h2,
    .entry-content [class*="adv-heading"] {
        margin-top: 1.5rem !important;
    }
}

/* I6: Consistent image margins on mobile — non-alignfull images should sit
   inside the same gutter so widths look coherent vertically. */
@media (max-width: 991px) {
    .entry-content .wp-block-image:not(.alignfull):not(.alignwide),
    .entry-content figure.wp-block-image:not(.alignfull):not(.alignwide) {
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
}

/* I7: Newsletter "Häng med oss" popup — user reports it covers entire screen
   on add-to-cart, blocking the flow. Hide overlay variants entirely. Can be
   re-enabled later with smarter trigger (delay, exit-intent, once-per-session). */
.pum-overlay, .popmake-overlay, [id^="pum-"],
.popup-overlay, #momo-newsletter-popup,
.ck-modal-overlay, [class*="convertkit-modal-overlay"],
[class*="kit-form-modal"],
.formkit-modal, .formkit-overlay,
[id^="ck_modal_"], [class*="ck-modal"],
[data-uid][class*="formkit-form"][role="dialog"] {
    display: none !important;
}

/* I8: PDP UQ800 "Slut"-badge — cgkit-button mode swatches don't apply a
   stock class, so we detect via WC variation form data attribute. */
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button {
    position: relative !important;
}
/* Visual disabled state — when cgkit greys out a variant, opacity drops below 1 */
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button[aria-disabled="true"],
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button[disabled],
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button.disabled,
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button.cgkit-disabled,
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button.cgkit-out-of-stock {
    position: relative !important;
}
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button[aria-disabled="true"]::after,
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button[disabled]::after,
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button.disabled::after,
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button.cgkit-disabled::after,
.cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button.cgkit-out-of-stock::after {
    content: "Slut";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b85a3c;
    background: #fff5f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    pointer-events: none;
}

/* I9: Configurator (hammockkit + andningssmycke) — variant thumbnail boxes
   render at fixed size even when image missing. Reduce visual weight of empty
   thumbnails so they look like checkbox cards, not broken images. */
.hammock-kit-row .hammock-kit-thumb:not(:has(img)),
.hammock-kit-row .hammock-kit-thumb img:not([src]),
.hammock-kit-row .hammock-kit-thumb img[src=""],
.andningssmycke-row .andn-thumb:not(:has(img)) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
}

/* I10: Consistent price format spacing — let CSS-content do thousand separator
   visual hint. WooCommerce default is no thousand-sep, KCO uses thin space.
   Keep WC formatting as-is, but improve visual rhythm via font-feature. */
.woocommerce-Price-amount, .price, .product-total .amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================================
   2026-05-27 — Group J: Final polish — configurator empty-img + KB pro modal
   ============================================================================ */

/* J1: Andningssmycke storlek-card uses grid with image as col 1 — when image
   is missing, the grid track is still allocated. Collapse it. */
.asc-size-card { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 14px !important; align-items: center !important; }
.asc-size-card:not(:has(.asc-size-img)) { grid-template-columns: 1fr auto !important; }
/* Fallback for browsers without :has() — keep gap minimal */
.asc-size-img { width: 56px !important; height: 56px !important; flex: 0 0 56px !important; }

/* J2: Hammockkit option image collapse if missing (after PHP fix wrap) */
.hkc-opt:not(:has(img.hkc-opt-img)) .hkc-opt-img-wrap,
.hkc-card:not(:has(.hkc-card-img img)) .hkc-card-img { display: none !important; }

/* J3: Kadence Blocks Pro form modal — same family as "Häng med oss" popup. */
.kb-form-modal, .kadence-form-modal,
[class*="kb-popup-modal"], [class*="kadence-popup-modal"],
.kb-form-popup-overlay, .kadence-popup-overlay,
.wp-block-kadence-advancedform[data-show-on*="modal"] .kb-form-modal,
div[role="dialog"][class*="kb-"] { display: none !important; }

/* J4: All overlay-style modals that may carry the newsletter popup. Aggressive
   but safe — none of these are used elsewhere on momojord.se. */
body > div[class*="modal"][class*="overlay"],
body > div[id*="modal"][id*="overlay"],
body > .modaal-overlay { display: none !important; }

/* J5: Ensure CTAs have visible focus state — accessibility + design polish */
.wp-block-kadence-advancedbtn .kb-button:focus-visible,
.wp-block-buttons .wp-block-button__link:focus-visible {
    outline: 2px solid #2e3a22 !important;
    outline-offset: 3px !important;
}

/* ============================================================================
   2026-05-27 — Group K: Header layout fix (Codex P0) + mobile banner
   Root cause: Shoptimizer header-4 layout puts .primary-navigation absolute,
   collapsing parent .main-navigation to width:0 at 1024-1399 viewport. Force
   static layout so nav flows in flex parent.
   ============================================================================ */

/* K1: Header nav must flex into parent .col-full-nav at desktop widths */
@media (min-width: 768px) {
    header.site-header nav.main-navigation,
    header.site-header #site-navigation {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
    }
    header.site-header .primary-navigation,
    header.site-header .primary-navigation.with-logo {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
    }
    header.site-header .primary-navigation .menu-primary-menu-container > ul.menu,
    header.site-header .primary-navigation > ul.menu {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 28px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    header.site-header .primary-navigation ul.menu > li.menu-item {
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
    }
    header.site-header .primary-navigation ul.menu > li.menu-item > a {
        display: inline-flex;
        align-items: center;
        padding: 10px 0 !important;
        white-space: nowrap;
        text-decoration: none;
        font-size: 0.95rem;
        line-height: 1.2;
        color: #1a1a1a;
        transition: color .15s ease;
    }
    header.site-header .primary-navigation ul.menu > li.menu-item > a:hover {
        color: #2e3a22;
    }
    header.site-header .col-full-nav {
        display: flex !important;
        align-items: center !important;
        gap: 24px !important;
    }
    /* Hide hamburger menu-toggle on desktop where horizontal nav fits */
    header.site-header .menu-toggle {
        display: none !important;
    }
}

/* K2: At 1200-1399 the nav was completely missing — make extra sure */
@media (min-width: 1200px) and (max-width: 1399px) {
    header.site-header .primary-navigation ul.menu > li.menu-item > a {
        font-size: 0.92rem;
    }
    header.site-header .primary-navigation .menu-primary-menu-container > ul.menu {
        gap: 22px !important;
    }
}

/* K3: Mobile semester-banner — kompakt notice, inte H1-sized takeover */
@media (max-width: 991px) {
    .kb-row-layout-wrap[class*="385120_3ec5d8"] .wp-block-kadence-advancedheading,
    .kt-row-layout-id385120_3ec5d8-ab h1,
    .kt-row-layout-id385120_3ec5d8-ab h2,
    .kt-row-layout-id385120_3ec5d8-ab .wp-block-kadence-advancedheading {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        margin: 0 0 4px 0 !important;
        font-weight: 600 !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
    .kb-row-layout-wrap[class*="385120_3ec5d8"] .kt-row-column-wrap,
    .kt-row-layout-id385120_3ec5d8-ab .kt-row-column-wrap {
        padding: 10px 16px !important;
        min-height: 0 !important;
    }
    .kb-row-layout-wrap[class*="385120_3ec5d8"] p,
    .kt-row-layout-id385120_3ec5d8-ab p {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }
    /* "Vi är på äventyr..." caption on mobile — even smaller */
    .kb-row-layout-wrap[class*="385120_3ec5d8"] p:first-of-type {
        font-size: 0.7rem !important;
        opacity: 0.85;
        margin-bottom: 2px !important;
    }
}

/* K4: Make hero CTA visible above the fold on mobile — shrink hero copy weight */
@media (max-width: 480px) {
    body.home .kb-row-layout-wrap[id^="kt-layout-id385120"] .kt-row-column-wrap[style*="parallax"] h1,
    body.home .wp-block-cover h1,
    body.home .kt-jarallax h1 {
        font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
        line-height: 1.05 !important;
    }
}

/* K5: Cookie banner must NEVER cover an active CTA. Add safe bottom padding so
   it sits below sticky checkout button. */
body.woocommerce-checkout #momo-cookie,
body.single-product #momo-cookie {
    bottom: 80px !important;
}
@media (max-width: 768px) {
    body.woocommerce-checkout #momo-cookie,
    body.single-product #momo-cookie {
        bottom: 100px !important;
    }
}

/* ============================================================================
   2026-05-27 — Group K2: REAL header fix (Group K had wrong selectors)
   Root cause: nav.main-navigation is inside .header-4-container, NOT inside
   header.site-header. Selectors must anchor on body.header-4 or
   .header-4-container.
   Shoptimizer rule at @media(min-width:1199px) {.header-4 .primary-navigation
   {position:absolute}} — we need higher specificity to override.
   ============================================================================ */

/* K2.1: Force nav to flow in flex parent (.col-full-nav) instead of being
   absolutely positioned and collapsing its parent. */
@media (min-width: 768px) {
    body.header-4 nav.main-navigation,
    body.header-4 #site-navigation,
    .header-4-container nav.main-navigation,
    .header-4-container #site-navigation {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
        display: block !important;
    }
    body.header-4 .primary-navigation,
    body.header-4 .primary-navigation.with-logo,
    .header-4-container .primary-navigation,
    .header-4-container .primary-navigation.with-logo {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        text-align: center;
    }
    body.header-4 .primary-navigation .menu-primary-menu-container > ul.menu,
    body.header-4 .primary-navigation > ul.menu {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 28px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    body.header-4 .primary-navigation ul.menu > li.menu-item {
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
        display: list-item;
    }
    body.header-4 .primary-navigation ul.menu > li.menu-item > a {
        display: inline-flex;
        align-items: center;
        padding: 10px 4px !important;
        white-space: nowrap;
        text-decoration: none;
        font-size: 0.95rem;
        line-height: 1.2;
        color: #1a1a1a;
        transition: color .15s ease;
    }
    body.header-4 .primary-navigation ul.menu > li.menu-item > a:hover,
    body.header-4 .primary-navigation ul.menu > li.menu-item.current-menu-item > a {
        color: #2e3a22;
    }
    body.header-4 .col-full-nav {
        display: flex !important;
        align-items: center !important;
        gap: 24px !important;
        padding-block: 0 !important;
    }
    /* Hide hamburger menu-toggle on desktop — horizontal nav present */
    body.header-4 .menu-toggle {
        display: none !important;
    }
}

/* K2.2: Tighter gap at 1024-1199 viewport so 9 menu items fit without wrap */
@media (min-width: 1024px) and (max-width: 1199px) {
    body.header-4 .primary-navigation .menu-primary-menu-container > ul.menu {
        gap: 18px !important;
    }
    body.header-4 .primary-navigation ul.menu > li.menu-item > a {
        font-size: 0.88rem !important;
    }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    body.header-4 .primary-navigation .menu-primary-menu-container > ul.menu {
        gap: 24px !important;
    }
    body.header-4 .primary-navigation ul.menu > li.menu-item > a {
        font-size: 0.92rem !important;
    }
}

/* ============================================================================
   2026-05-27 — Group L: Stock badges consistency + UX polish
   B1: stock badges samma typografi (mixed case)
   B2: shop hero compact
   B3: PDP mobile variant cards
   B4: bottom reviews compact
   ============================================================================ */

/* L1: Stock badges — kill uppercase + harmonize style */
.momo-instock-badge,
.mj-oos-badge {
    text-transform: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    padding: 4px 9px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}
.momo-instock-badge { background: #4a7a3a !important; }
.mj-oos-badge { background: #4a4a4a !important; }

/* L2: Shop page hero ("Välj stillheten") — compact on small viewports so
   products visible above the fold. Don't kill it entirely (branding), just trim. */
@media (max-width: 1199px) {
    .post-type-archive-product .wp-block-cover,
    .post-type-archive-product .wp-block-cover__inner-container,
    body.archive .wp-block-cover.alignfull {
        min-height: 200px !important;
        max-height: 280px !important;
    }
    .post-type-archive-product .wp-block-cover__inner-container h1,
    .post-type-archive-product .wp-block-cover__inner-container h2 {
        font-size: 1.5rem !important;
        line-height: 1.1 !important;
        margin: 0 0 4px 0 !important;
    }
}
@media (max-width: 768px) {
    .post-type-archive-product .wp-block-cover,
    body.archive .wp-block-cover.alignfull {
        min-height: 160px !important;
        max-height: 200px !important;
    }
}

/* L3: PDP variation cards — mobile, prevent clipping + tighter padding */
@media (max-width: 480px) {
    .summary .cgkit-attribute-swatches,
    .cgkit-attribute-swatches {
        gap: 8px !important;
    }
    .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button,
    .cgkit-attribute-swatches .cgkit-swatch.cgkit-as-single {
        padding: 10px 8px !important;
        min-width: 0 !important;
        font-size: 0.85rem !important;
    }
    .cgkit-attribute-swatches .cgkit-as-price {
        font-size: 0.8rem !important;
    }
}

/* L4: Bottom reviews block — kompakt så footer syns tidigare på shop */
body.post-type-archive-product .momo-reviews-bar {
    margin-top: 3rem !important;
    padding: 1rem !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #eee !important;
    border-radius: 0 !important;
}
body.post-type-archive-product .momo-reviews-header {
    margin-bottom: 0.5rem !important;
}
body.post-type-archive-product .momo-reviews-stars {
    font-size: 1rem !important;
}
body.post-type-archive-product .momo-reviews-count {
    font-size: 0.75rem !important;
}
body.post-type-archive-product .momo-reviews-scroll {
    gap: 0.75rem !important;
}
body.post-type-archive-product .momo-review-card {
    background: #fafaf5 !important;
    padding: 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}
@media (max-width: 768px) {
    body.post-type-archive-product .momo-reviews-scroll {
        grid-template-columns: 1fr !important;
    }
    body.post-type-archive-product .momo-review-card {
        font-size: 0.85rem !important;
    }
}

/* L2 FIX: Shop hero is .butikhero (Kadence row block), not wp-block-cover.
   Compact to keep products near top of fold. */
body.post-type-archive-product .butikhero,
body.post-type-archive-product .kb-row-layout-wrap.butikhero {
    min-height: 280px !important;
    max-height: 360px !important;
}
body.post-type-archive-product .butikhero .kt-row-column-wrap {
    min-height: 280px !important;
}
body.post-type-archive-product .butikhero h1,
body.post-type-archive-product .butikhero h2,
body.post-type-archive-product .butikhero .wp-block-kadence-advancedheading {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 6px 0 !important;
}
body.post-type-archive-product .butikhero p {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
}
@media (max-width: 768px) {
    body.post-type-archive-product .butikhero,
    body.post-type-archive-product .kb-row-layout-wrap.butikhero {
        min-height: 180px !important;
        max-height: 220px !important;
    }
    body.post-type-archive-product .butikhero h1,
    body.post-type-archive-product .butikhero h2 {
        font-size: 1.3rem !important;
    }
}

/* ============================================================================
   2026-05-27 — Group M: Codex audit follow-ups
   M1: mobile horizontal overflow (3px) on PDP/configurator
   M2: butik H1 hidden (display:none) — make visible
   M3: andningssmycke mobile hero compact
   M4: General mobile overflow guard
   ============================================================================ */

/* M1: Stop 3px overflow on PDP — content-area/site-main report width 396 vs vw 390.
   Likely from margin-left:-3px or similar in Shoptimizer parent. */
@media (max-width: 991px) {
    body.single-product .content-area,
    body.single-product .site-main,
    body.single-product .col-full,
    body.archive .content-area,
    body.archive .site-main {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden;
    }
    body .cg-grid-layout,
    body .swiper-container,
    body .swiper-wrapper,
    body .cg-main-swiper {
        max-width: 100vw !important;
    }
    /* Hard guard: nothing in main flow should exceed viewport */
    body > #page,
    body > #page > * {
        max-width: 100vw !important;
        overflow-x: clip;
    }
}

/* M2: Butik page H1 was display:none — show it. Codex P1. */
body.post-type-archive-product .woocommerce-products-header__title,
body.post-type-archive-product .page-title {
    display: block !important;
    visibility: visible !important;
    margin: 0 0 0.5rem 0 !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-align: left !important;
}

/* M3: Andningssmycke mobile — present the portrait pendant photo in a proper
   4:5 editorial frame (was a hard 300px object-fit:cover crop that chopped the
   portrait to a near-square — Leon flagged it 2026-06). */
@media (max-width: 768px) {
    body.postid-609 .woocommerce-product-gallery,
    body.postid-609 .product .images,
    body.postid-609 .single-product-image {
        max-height: none !important;
        overflow: visible !important;
    }
    body.postid-609 .woocommerce-product-gallery .woocommerce-product-gallery__image,
    body.postid-609 .woocommerce-product-gallery img,
    body.postid-609 .single-product-image img {
        max-height: none !important;
        aspect-ratio: 4 / 5 !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 8px;
    }
    body.postid-609 .asc-showcase {
        margin-top: 1rem !important;
        padding: 0.75rem 0 !important;
    }
}

/* M4: Defensive — body should never scroll horizontally on mobile */
@media (max-width: 991px) {
    html, body {
        overflow-x: clip;
        max-width: 100vw;
    }
}

/* ============================================================================
   2026-06-02 — Group N: Unify ALL commerce CTAs to the brand green.
   Shoptimizer's Kirki accent paints archive/cart/added buttons #dd9933 (orange)
   + assorted muddy greens (#565f3a/#75ae00); Group A only fixed the text colour,
   not the background. This makes every primary "buy/checkout" button the palette
   green (--brand #2f6b3a) so the green is consistent everywhere (Leon: "lite
   inkonsekvent med de gröna färgerna"). Editorial .btn classes are untouched.
   ============================================================================ */
.single_add_to_cart_button,
button.single_add_to_cart_button,
ul.products li.product .button,
ul.products li.product .added_to_cart,
.added_to_cart,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.cart-collaterals .checkout-button,
.wc-proceed-to-checkout .checkout-button,
.shoptimizer-mini-cart-wrap .checkout-button,
#shoptimizerCartDrawer .checkout-button,
.widget_shopping_cart a.button.checkout,
.woocommerce #respond input#submit.alt,
.woocommerce-cart p.return-to-shop a,
.mjep-view-current,
ul.products li.product .button.product_type_variable,
ul.products li.product .button.product_type_composite,
.button.alt,
button.button.alt {
    background-color: var(--brand, #2f6b3a) !important;
    border-color: var(--brand, #2f6b3a) !important;
    color: #fff !important;
}
.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover,
.added_to_cart:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.cart-collaterals .checkout-button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
.shoptimizer-mini-cart-wrap .checkout-button:hover,
#shoptimizerCartDrawer .checkout-button:hover,
.widget_shopping_cart a.button.checkout:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-cart p.return-to-shop a:hover,
.mjep-view-current:hover,
ul.products li.product .button.product_type_variable:hover,
ul.products li.product .button.product_type_composite:hover,
.button.alt:hover,
button.button.alt:hover {
    background-color: var(--brand-deep, #234d2a) !important;
    border-color: var(--brand-deep, #234d2a) !important;
    color: #fff !important;
}

/* ---- GROUP D cont.: drawer action buttons (2026-06-03) ----
   Make both mini-cart buttons full-width with the checkout (primary) on top;
   fix "Visa varukorg" text that sat at the bottom (line-height:50px + padding). */
#shoptimizerCartDrawer .woocommerce-mini-cart__buttons,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons{
  display:flex !important; flex-direction:column; gap:10px; padding:0;
}
#shoptimizerCartDrawer .woocommerce-mini-cart__buttons .button,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons .button{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; margin:0 !important; box-sizing:border-box;
  line-height:1.2 !important; min-height:52px;
}
/* checkout = primary, on top */
#shoptimizerCartDrawer .woocommerce-mini-cart__buttons .button.checkout,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons .button.checkout{ order:-1; }
/* view cart = secondary outlined */
#shoptimizerCartDrawer .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout),
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout){
  background:transparent !important; color:#1c2018 !important;
  border:1px solid #d8d2c4 !important; border-radius:10px !important;
  padding:13px 22px !important; font-weight:500 !important; box-shadow:none !important;
}