/* casual x Shared Mobile Foundation: adapter. Loaded only for an enabled store.
   Tokens are the theme's own header values (generated by gen_adapters.py); no layout rules here. */
body.sf-m.sf-m-t-casual {
    --sf-m-header-bg: var(--white, rgb(255, 255, 255));
    --sf-m-header-fg: rgb(68, 68, 68);
    --sf-m-header-line: rgb(240, 236, 232);
    --sf-m-header-line-w: 1px;
    --sf-m-color-accent: rgb(248, 58, 38);
    --sf-m-color-on-accent: rgb(0, 0, 0);
    --sf-m-drawer-bg: var(--white, rgb(255, 255, 255));
    --sf-m-drawer-fg: rgb(44, 44, 44);
    --sf-m-bar-bg: var(--white, rgb(255, 255, 255));
    --sf-m-bar-fg: rgb(44, 44, 44);
    --sf-m-bar-line: rgb(240, 236, 232);
    --sf-m-bar-active: rgb(248, 58, 38);
    --sf-m-sheet-bg: var(--white, rgb(255, 255, 255));
    --sf-m-sheet-fg: rgb(68, 68, 68);
    --sf-m-sheet-line: rgb(224, 216, 208);
    --sf-m-control-bg: var(--white, rgb(255, 255, 255));
    --sf-m-control-fg: rgb(68, 68, 68);
    --sf-m-control-line: rgb(224, 216, 208);
}

/* ---- responsive hero (contract roles in config/storefront_mobile.php) ----
   Desktop concept: brand artwork inside a large soft circle with a red triangle and dot, a bold
   headline and the round red arrow CTA. Phones keep exactly that, artwork first.
   Theme-specific: the artwork panel is sized by the contract (it was 0px wide below 992px because
   it only holds absolutely positioned children); the circle and the two accents are placed
   around the artwork instead of at their desktop pixel offsets. */
body.sf-m.sf-m-t-casual {
    --sf-m-hero-media-h: clamp(230px, 64vw, 300px);
    --sf-m-hero-fit: contain;
    --sf-m-hero-title: clamp(32px, 9.4vw, 40px);
    --sf-m-hero-title-lh: 1.15;
    --sf-m-hero-gap: 8px;
}

@media (max-width: 991.98px) {
    body.sf-m.sf-m-t-casual .cs-hero-model-img {
        inset: 0 !important;
        transform: none !important; /* desktop centres the artwork with left:50% + translateX(-50%) */
        z-index: 1;
    }

    body.sf-m.sf-m-t-casual .cs-hero-bg-circle {
        inset: 50% auto auto 50% !important;
        inline-size: calc(var(--sf-m-hero-media-h) * .96) !important;
        block-size: calc(var(--sf-m-hero-media-h) * .96) !important;
        transform: translate(-50%, -50%);
    }

    body.sf-m.sf-m-t-casual .cs-hero-deco-triangle {
        inset: 6% auto auto calc(50% + var(--sf-m-hero-media-h) * .34) !important;
    }

    body.sf-m.sf-m-t-casual .cs-hero-deco-dot {
        inset: auto auto 10% calc(50% - var(--sf-m-hero-media-h) * .44) !important;
    }

    body.sf-m.sf-m-t-casual .cs-hero-left {
        padding-block: 4px 0 !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    body.sf-m.sf-m-t-casual {
        --sf-m-hero-media-h: min(48vw, 380px);
        --sf-m-hero-title: clamp(40px, 6vw, 52px);
    }
}

@media (max-width: 359.98px) {
    body.sf-m.sf-m-t-casual {
        --sf-m-hero-media-h: 196px;
        --sf-m-hero-title: 30px;
    }
}

/* ---- category strip, card actions (contract roles in config/storefront_mobile.php) ----
   Desktop: a strip of round-image category cards (min 160px). Phones keep the strip, swipeable,
   with the next card peeking. */
body.sf-m.sf-m-t-casual {
    --sf-m-cat-item-w: clamp(124px, 38vw, 160px);
    --sf-m-cat-gap: 12px;
}