/*
 * JoAndrew Child Theme — Homepage Sweep Hotfix
 * v1.0.6 — AC1-AC4 cascade-conflict leftovers from v1.0.5
 * v1.1.0 — Design refresh 2026-07-09 (kanban t_f1dcd1fe):
 *           SK-II SG genus matched (different species),
 *           placeholder image system for 48 product slots + hero + carousel.
 *
 * AC mapping (v1.0.6):
 *   AC1 — Carousel: parent position + arrow anchoring + reduced slide min-height
 *   AC2 — Compact front page: hero/section vertical density cuts (~30% reduction)
 *   AC3 — Cart icon top-right: final-state override with !important on every
 *         conflicting property from the OLD hover-bar rules (blocks 1/2/5).
 *   AC4 — Navbar: rhythm + alignment between logo, nav pill, search bar, actions.
 *
 * Strategy: ALL rules use !important on every property the OLD rules declared,
 * so later wins clean. Same fix pattern as the 2026-06-28 cascade-conflict session.
 */

/* ===================================================================
   AC1 — CAROUSEL
   =================================================================== */

/* The arrows are appended to .ja-carousel-section's parent by JS (carousel.parentNode).
   Without position:relative on .ja-carousel-section, position:absolute arrows
   anchor to the viewport (Pitfall #12 from session-pitfalls-2026-06-28).
   Also ensure the section sits in its own stacking context so z-index works. */
.ja-carousel-section {
    position: relative !important;
}

/* Boost arrow z-index so they sit above slide content + gradients. */
.ja-carousel-section .ja-carousel__arrows {
    z-index: 10 !important;
}

/* Compress slide min-height (was clamp(440px, ..., 600px)) so the carousel
   doesn't dominate the viewport on desktop. Helps AC2 — less vertical air. */
.ja-carousel__slide {
    min-height: 360px !important;
}

/* Mobile: even smaller so the carousel fits above the fold on phones. */
@media (max-width: 720px) {
    .ja-carousel__slide { min-height: 320px !important; }
}

/* Ensure dots sit on top of any slide background. */
.ja-carousel-section .ja-carousel__dots {
    z-index: 10 !important;
}

/* ===================================================================
   AC2 — COMPACT FRONT PAGE
   =================================================================== */

/* Reduce section vertical padding everywhere on the front page. The design
   tokens use --ja-section-y = clamp(60px, 9vw, 120px). We override on
   .ja-front-page only (not on the shop/contact/etc. pages) to keep the
   rest of the site unchanged. */
.ja-front-page .ja-section {
    padding: clamp(40px, 5vw, 70px) 0 !important;
}

/* Hero: tighter padding-bottom so the trust strip / featured row climbs
   above the fold on a 1366x768 laptop. */
.ja-front-page .ja-hero {
    padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 40px) !important;
}

/* Section heads: trim margin-bottom so the eyebrow/title block doesn't
   eat vertical space. */
.ja-front-page .ja-section-head {
    margin-bottom: clamp(16px, 2.5vw, 28px) !important;
}

/* Carousel section in particular: it was the biggest single vertical
   consumer because of the 440px+ min-height slides. */
.ja-front-page .ja-carousel-section {
    padding: clamp(36px, 4.5vw, 64px) 0 !important;
}

/* ===================================================================
   AC3 — CART ICON TOP-RIGHT (cascade-conflict resolution)
   ===================================================================
   The OLD style.css has 5+ rules targeting .ja-product-card__add across
   multiple line numbers. Each later rule wins on properties it declares,
   but earlier rules keep winning on properties NOT redeclared. The result
   is a button that has Block 1's padding + background, Block 6's position,
   Block 5's full-width on mobile, and never displays the actual SVG icon
   properly. This is the exact failure mode documented in
   session-pitfalls-2026-06-28-cascade-conflict-and-host-check.md §11.

   The fix: one final-state rule with !important on EVERY property that
   any old rule declared, so the icon shape is unambiguous.
*/

/* Desktop: 38x38 white circle in the top-right, plum-colored cart SVG. */
.ja-product-card__add {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ja-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--ja-plum) !important;
    box-shadow: var(--ja-shadow-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease,
                box-shadow 0.18s ease, border-color 0.18s ease !important;
    z-index: 2 !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

/* The "Add to cart" fallback text is hidden on desktop — icon only. */
.ja-product-card__add-fb {
    display: none !important;
}

/* Cart SVG inside the icon button: ensure stroke colors follow the
   button's color (which is plum on white normally, white on plum on hover). */
.ja-product-card__add svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Hover/focus: fill the button with plum, white icon, small lift. */
.ja-product-card:hover .ja-product-card__add,
.ja-product-card:focus-within .ja-product-card__add,
.ja-product-card__add:hover,
.ja-product-card__add:focus-visible {
    background: var(--ja-plum) !important;
    color: #fff !important;
    border-color: var(--ja-plum) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ja-shadow-md) !important;
}

.ja-product-card__add:focus-visible {
    outline: 2px solid var(--ja-pink) !important;
    outline-offset: 2px !important;
}

/* Adding state: pink bg, white icon, no double-clicks. */
.ja-product-card__add.is-adding {
    background: var(--ja-pink) !important;
    color: #fff !important;
    border-color: var(--ja-pink) !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Added state: same pink + green checkmark glyph via ::after. */
.ja-product-card__add.is-added {
    background: var(--ja-pink) !important;
    color: #fff !important;
    border-color: var(--ja-pink) !important;
}

/* Mobile: KEEP the 38x38 top-right icon. Do NOT collapse to a full-width
   bar (the OLD mobile @media rule did this; we override it). The icon
   must work the same on all viewports. */
@media (max-width: 720px) {
    .ja-product-card__add {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        font-size: inherit !important;
        text-transform: none !important;
    }
    .ja-product-card__add svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ===================================================================
   AC4 — NAVBAR RHYTHM
   ===================================================================
   Header is: [logo] [nav pill] [inline search bar] [actions]. With
   justify-content: space-between + 24px gap, the nav pill ends up with
   only its 3 short items (About / Shop / Contact us), making it look
   under-filled compared to the wide inline search bar.

   Fix: reduce the empty air inside the nav pill, give the search bar a
   max-width so it doesn't squeeze the actions group, and tighten the
   gap between nav and search. The nav pill keeps its background; we
   just make its internal spacing intentional. */

.ja-header__inner {
    gap: 18px !important;
    padding: 12px 0 !important;
}

/* The nav pill: trim internal padding so it doesn't look like it's holding
   one big empty space. Each link gets a slightly larger padding so the
   3 items read as intentional rhythm rather than crammed. */
.ja-nav {
    gap: 2px !important;
    padding: 4px !important;
}

.ja-nav a {
    padding: 8px 18px !important;
    font-size: 0.92rem !important;
}

/* Inline search bar: cap its width so it never squeezes the actions group.
   The current rule already sets width:240px desktop; tighten a bit and
   add a max-width so it can't grow past 320px on wide screens. */
.ja-search-bar {
    max-width: 320px !important;
    width: 280px !important;
}

/* On mid-width screens (laptops between 1280 and 1366), the header gets
   tight. Let the search bar shrink slightly rather than pushing actions off. */
@media (max-width: 1280px) {
    .ja-search-bar { width: 220px !important; }
}

@media (max-width: 1100px) {
    .ja-search-bar { width: 180px !important; }
}

/* Mobile: nav pill becomes its own row (already handled by existing @media 920px)
   but reduce the gap between it and the search bar. */
@media (max-width: 920px) {
    .ja-header__inner { gap: 12px !important; padding: 10px 0 !important; }
}

/* ===================================================================
   REDUCED-MOTION
   ===================================================================
   Respect prefers-reduced-motion: no autoplay-driven transforms, no
   scroll-reveal animations, no hover lift on the cart icon. */
@media (prefers-reduced-motion: reduce) {
    .ja-product-card__add,
    .ja-product-card__add:hover,
    .ja-product-card__add:focus-visible {
        transform: none !important;
        transition: none !important;
    }
    .ja-carousel__slide {
        transition: none !important;
    }
}

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

/* Ensure keyboard focus on the cart icon is always visible. */
.ja-product-card__add:focus-visible {
    outline: 2px solid var(--ja-pink) !important;
    outline-offset: 2px !important;
}

/* Screen-reader text for the hidden fallback "Add to cart" label. The
   span is visually hidden but read by AT, so screen-reader users always
   get the explicit label regardless of viewport. */
.ja-product-card__add-fb {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* ===================================================================
   v1.1 — DESIGN REFRESH (kanban t_f1dcd1fe, 2026-07-09)
   Below: placeholder image system + SK-II genus refresh.
   =================================================================== */

/*!
 * JoAndrew — Hotfix v1.1 (Design Refresh: SK-II Genus · JoAndrew Species)
 * Author: Hermes Agent (2026-07-09, kanban task t_f1dcd1fe)
 *
 * PURPOSE
 *   Match the SK-II SG design GENUS (premium K-beauty editorial —
 *   generous whitespace, serif headlines, full-bleed imagery, low-saturation
 *   monochrome + 1-2 accents) WITHOUT replicating SK-II's SPECIES
 *   (no PITERA™ copy, no red accent, no Pitman Gothic, no SK-II layouts).
 *
 *   Three things land in this hotfix:
 *   1. PLACEHOLDER IMAGE SYSTEM (CSS-only SVG data-URIs)
 *      - 1:1 + 4:5 aspects
 *      - Gradient + brand initials in soft gray
 *      - Override hook per element via inline style or theme mod
 *      - Used in: hero visual, all product cards (12 on home), brand tiles,
 *        carousel slides, founder/contact imagery
 *   2. DESIGN LANGUAGE POLISH
 *      - Larger hero, less text overlay, more breathing room
 *      - Bigger, more generous buttons
 *      - Edge-to-edge product card images (no padding ring)
 *      - Larger card grid gaps, more vertical rhythm
 *      - Subtler dividers between sections
 *   3. PARITY WITH EXISTING WORK
 *      - Honors all prior AC1-AC6 fixes (cart icon, carousel arrows,
 *        add-to-cart states, etc.) — no rollback of any of those
 *      - Token-based — works with the existing --ja-* design tokens
 *
 * COMPATIBILITY
 *   - Loaded AFTER joandrew-child/style.css (cascades later)
 *   - Loaded AFTER joandrew-child/hotfix-style.css v1.0 (the AC6 polish)
 *   - All rules scoped to .ja-* classes — zero interference with
 *     Astra/Elementor parent theme rules
 */

:root {
    /* ===================================================================
       PLACEHOLDER IMAGE SYSTEM — gradient + initials, CSS-only SVG
       --------------------------------------------------------------------
       Override per-element with: style="--ja-placeholder-url: url('/img.jpg');"
       or by adding a `data-placeholder="text"` attribute and using the
       [data-placeholder] attribute selectors below.
       =================================================================== */

    /* Default 1:1 square placeholder — soft beige gradient + "JA" mark */
    --ja-placeholder-square: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23FAF5F0'/><stop offset='100%25' stop-color='%23F0E4D6'/></linearGradient></defs><rect width='400' height='400' fill='url(%23g)'/><text x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='120' font-style='italic' fill='%23C9B8A8' opacity='0.7'>JA</text></svg>");

    /* Default 4:5 portrait placeholder — same gradient, taller, smaller mark */
    --ja-placeholder-portrait: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23FAF5F0'/><stop offset='100%25' stop-color='%23EDE0CE'/></linearGradient></defs><rect width='400' height='500' fill='url(%23g)'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='110' font-style='italic' fill='%23C9B8A8' opacity='0.6'>JA</text></svg>");

    /* Default 16:9 placeholder — for hero/carousel wide shots */
    --ja-placeholder-wide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23FAF5F0'/><stop offset='50%25' stop-color='%23F0E4D6'/><stop offset='100%25' stop-color='%23EDE0CE'/></linearGradient></defs><rect width='1600' height='900' fill='url(%23g)'/><text x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='180' font-style='italic' fill='%23C9B8A8' opacity='0.55'>JA</text></svg>");

    /* Editorial "dark plum" placeholder for carousel slides */
    --ja-placeholder-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><defs><radialGradient id='g' cx='30%25' cy='30%25' r='60%25'><stop offset='0%25' stop-color='%234A2548' stop-opacity='0.95'/><stop offset='100%25' stop-color='%231A0E1A' stop-opacity='1'/></radialGradient></defs><rect width='1600' height='900' fill='url(%23g)'/><text x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='200' font-style='italic' fill='%23C9B8A8' opacity='0.25'>JA</text></svg>");

    /* Light gray placeholder for brand tile marks (when no real logo yet) */
    --ja-placeholder-mark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><rect width='200' height='200' fill='%23F5EBE0'/><text x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='64' font-style='italic' fill='%23C9B8A8' opacity='0.6'>JA</text></svg>");
}

/* ===================================================================
   PLACEHOLDER BINDING — apply the SVG to all common image slots
   --------------------------------------------------------------------
   Strategy: layer a CSS background-image behind any existing <img>.
   - When a real image is present, its <img src> shows on top
   - When <img> is missing OR broken OR hidden, the placeholder shows
   - Per-element override via: style="--ja-placeholder-url: url('...');"
   =================================================================== */

/* 1:1 — product card default (joins are 4-px, looks crisp) */
.ja-product-card__visual,
.ja-product-card__img {
    background-color: #F5EBE0 !important;
    background-image: var(--ja-placeholder-url, var(--ja-placeholder-square)) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 4:5 — founder/portrait slots */
.ja-founder__visual,
.ja-hero__visual {
    background-color: #F5EBE0 !important;
    background-image: var(--ja-placeholder-url, var(--ja-placeholder-portrait)) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 16:9 — wide editorial (collection featured, about hero, blog covers) */
.ja-collection-featured,
.ja-about-hero,
.ja-blog-cover,
.ja-section--wide-image > .ja-section__media {
    background-color: #F5EBE0 !important;
    background-image: var(--ja-placeholder-url, var(--ja-placeholder-wide)) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Brand-tile mark when no real brand mark yet */
.ja-brand-tile__mark {
    background-image: var(--ja-placeholder-url, var(--ja-placeholder-mark)) !important;
    background-size: cover !important;
    background-position: center !important;
    color: transparent !important;
}

/* Carousel slides — dark plum placeholder when no hero image */
.ja-carousel__slide {
    background-image: var(--ja-placeholder-url, var(--ja-placeholder-dark)) !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Per-product override hook — set on the product card or visual element */
.ja-product-card__visual[data-placeholder="dabo"],
.ja-product-card[data-brand="dabo"] .ja-product-card__visual {
    --ja-placeholder-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23F8B8D4' stop-opacity='0.3'/><stop offset='100%25' stop-color='%23FAF5F0'/></linearGradient></defs><rect width='400' height='400' fill='url(%23g)'/><text x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='80' font-style='italic' fill='%23C9B8A8' opacity='0.65'>DA</text></svg>");
}
.ja-product-card__visual[data-placeholder="tsuya-ii"],
.ja-product-card[data-brand="tsuya-ii"] .ja-product-card__visual {
    --ja-placeholder-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23E8D5C4' stop-opacity='0.4'/><stop offset='100%25' stop-color='%23FAF5F0'/></linearGradient></defs><rect width='400' height='400' fill='url(%23g)'/><text x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='80' font-style='italic' fill='%23C9B8A8' opacity='0.65'>T2</text></svg>");
}
.ja-product-card__visual[data-placeholder="tsuya-tsuya"],
.ja-product-card[data-brand="tsuya-tsuya"] .ja-product-card__visual {
    --ja-placeholder-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23F5D7C7' stop-opacity='0.45'/><stop offset='100%25' stop-color='%23FAF5F0'/></linearGradient></defs><rect width='400' height='400' fill='url(%23g)'/><text x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' font-family='Georgia,serif' font-size='80' font-style='italic' fill='%23C9B8A8' opacity='0.65'>TT</text></svg>");
}

/* ===================================================================
   DESIGN LANGUAGE POLISH — match SK-II genus, distinct from SK-II species
   =================================================================== */

/* -----------------------------------------------------------
   1. HERO — bigger, more breathing room, less text overlay
   ----------------------------------------------------------- */
.ja-hero {
    padding: clamp(80px, 12vw, 180px) 0 clamp(64px, 9vw, 140px) !important;
}
.ja-hero__title {
    font-size: clamp(3rem, 8vw, 6.5rem) !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 32px 0 !important;
}
.ja-hero__subtitle {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    max-width: 38ch !important;
    margin: 0 0 44px 0 !important;
    color: var(--ja-muted) !important;
}
.ja-hero__visual {
    aspect-ratio: 4 / 5 !important;
    min-height: 380px !important;
    max-height: 540px !important;
    box-shadow: var(--ja-shadow-xl) !important;
}
.ja-hero__visual-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;
}

/* -----------------------------------------------------------
   2. BUTTONS — more generous padding, premium feel
   ----------------------------------------------------------- */
.ja-btn {
    padding: 18px 36px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    border-radius: var(--ja-radius-pill) !important;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ja-btn--primary {
    padding: 18px 40px !important;
    box-shadow: var(--ja-shadow-md) !important;
}
.ja-btn--primary:hover {
    box-shadow: var(--ja-shadow-lg) !important;
    transform: translateY(-2px) !important;
}
.ja-btn--ghost {
    padding: 18px 36px !important;
    border-width: 1.5px !important;
}

/* -----------------------------------------------------------
   3. PRODUCT CARD — edge-to-edge image, larger gaps, more breathing room
   ----------------------------------------------------------- */
.ja-products__grid {
    gap: clamp(20px, 2.4vw, 32px) !important;
}
.ja-product-card {
    border-radius: var(--ja-radius-lg) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ja-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ja-shadow-lg) !important;
}
/* Edge-to-edge image — kill the white padding ring around the product photo */
.ja-product-card__visual {
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    border-top-left-radius: var(--ja-radius-lg) !important;
    border-top-right-radius: var(--ja-radius-lg) !important;
    position: relative !important;
}
.ja-product-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ja-product-card:hover .ja-product-card__img {
    transform: scale(1.04) !important;
}
.ja-product-card__body {
    padding: 18px 22px 22px !important;
}
.ja-product-card__title {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: var(--ja-ink) !important;
    margin: 6px 0 8px !important;
}
.ja-product-card__brand {
    font-size: 0.68rem !important;
    letter-spacing: 0.18em !important;
    color: var(--ja-muted) !important;
}
.ja-product-card__price {
    font-size: 0.95rem !important;
    color: var(--ja-plum) !important;
    font-weight: 500 !important;
}

/* -----------------------------------------------------------
   4. SECTION HEADERS — editorial restraint (smaller, more breathing room)
   ----------------------------------------------------------- */
.ja-section {
    padding: clamp(80px, 11vw, 160px) 0 !important;
}
.ja-section-head {
    margin-bottom: clamp(40px, 6vw, 80px) !important;
}
.ja-section-head__eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 20px !important;
}
.ja-section-head__title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.05 !important;
}
.ja-section-head__lede {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    max-width: 52ch !important;
}

/* -----------------------------------------------------------
   5. BRAND TILES — bigger mark, more breathing room, softer corners
   ----------------------------------------------------------- */
.ja-brands__grid {
    gap: clamp(20px, 2.4vw, 32px) !important;
}
.ja-brand-tile {
    padding: 40px 32px !important;
    border-radius: var(--ja-radius-lg) !important;
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
}
.ja-brand-tile:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--ja-shadow-xl) !important;
}
.ja-brand-tile__mark {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 24px !important;
    font-size: 1.6rem !important;
}
.ja-brand-tile__name {
    font-size: 1.6rem !important;
    font-weight: 400 !important;
}
.ja-brand-tile__desc {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin-top: 20px !important;
}

/* -----------------------------------------------------------
   6. STAT STRIP — gentler, more refined
   ----------------------------------------------------------- */
.ja-stats {
    padding: clamp(40px, 5vw, 72px) 0 !important;
}
.ja-stat__num {
    font-size: clamp(2.2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}
.ja-stat__label {
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
}

/* -----------------------------------------------------------
   7. CAROUSEL — give the dark slides more breathing room and lighter text
   ----------------------------------------------------------- */
.ja-carousel-section {
    padding: clamp(80px, 11vw, 160px) 0 !important;
}
.ja-carousel__slide {
    min-height: 560px !important;
    padding: 56px 64px !important;
}
.ja-carousel__brand {
    font-size: clamp(3rem, 5.6vw, 4.4rem) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.0 !important;
}
.ja-carousel__line {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    max-width: 32ch !important;
    margin-bottom: 40px !important;
}
.ja-carousel__eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 16px !important;
}
.ja-carousel__cta {
    font-size: 0.92rem !important;
    letter-spacing: 0.04em !important;
    padding: 16px 32px !important;
}

/* -----------------------------------------------------------
   8. INGREDIENTS SPOTLIGHT — more breathing room
   ----------------------------------------------------------- */
.ja-ingredients {
    padding: clamp(80px, 11vw, 160px) 0 !important;
}
.ja-ingredients__list {
    gap: clamp(16px, 2vw, 28px) !important;
}
.ja-ingredient {
    padding: 24px !important;
    border-radius: var(--ja-radius-lg) !important;
}

/* -----------------------------------------------------------
   9. FOUNDER + CONTACT — slightly more generous spacing
   ----------------------------------------------------------- */
.ja-founder,
.ja-contact {
    padding: clamp(64px, 9vw, 128px) 0 !important;
}

/* -----------------------------------------------------------
   10. STAT STRIP INLINE — gentle, refined
   ----------------------------------------------------------- */
.ja-trust-strip {
    padding: 18px 0 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.04em !important;
}

/* -----------------------------------------------------------
   11. GLOBAL — fine rule between major sections (subtle divider)
   ----------------------------------------------------------- */
.ja-section + .ja-section,
.ja-section + .ja-stats,
.ja-stats + .ja-section {
    border-top: 1px solid var(--ja-line) !important;
}

/* -----------------------------------------------------------
   12. CAROUSEL ARROWS — slightly bigger for the new bigger carousel
   ----------------------------------------------------------- */
.ja-carousel__arrow {
    width: 56px !important;
    height: 56px !important;
}
@media (max-width: 720px) {
    .ja-carousel__arrow {
        width: 44px !important;
        height: 44px !important;
    }
    .ja-carousel__slide {
        min-height: 420px !important;
        padding: 36px 28px !important;
    }
    .ja-carousel__brand {
        font-size: 2.4rem !important;
    }
}

/* ===================================================================
   ACCESSIBILITY — focus rings that don't look 2018
   =================================================================== */
:focus-visible {
    outline: 2px solid var(--ja-pink) !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
}

/* ===================================================================
   PERFORMANCE — keep the placeholder SVGs tiny
   =================================================================== */
/* The data-URI SVGs above are <600 bytes each. They're inlined into CSS,
   so they don't cost an HTTP request. When a real image is set via the
   .ja-product-card__visual > img selector, the browser uses the real
   <img src>; the placeholder only shows if the img fails or is empty. */

/* Make sure the .ja-product-card__img element has its placeholder
   gradient visible if the underlying image fails to load */
.ja-product-card__visual {
    position: relative !important;
}
.ja-product-card__visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: inherit !important;
    background-color: transparent !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* ===================================================================
   SAFETY — respect reduced motion
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ja-product-card,
    .ja-product-card__img,
    .ja-brand-tile,
    .ja-btn,
    .ja-carousel__arrow {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
    .ja-product-card:hover .ja-product-card__img {
        transform: none !important;
    }
}

/* ===================================================================
   END OF HOTFIX v1.1
   --------------------------------------------------------------------
   For per-product placeholder overrides, set inline:
     <div class="ja-product-card__visual"
          data-placeholder="dabo"               <!-- or "tsuya-ii", "tsuya-tsuya" -->
          style="--ja-placeholder-url: url('/wp-content/uploads/product.jpg');">
   The inline --ja-placeholder-url beats the [data-placeholder] attribute
   selector above, so when real images land, swap the inline style and
   the gradient disappears behind the real <img>.
   =================================================================== */