/* Storefront V2 runtime completion: settings here must have visible storefront effects. */

/* Global width and rhythm must reach the shell as well as page content. */
.sf-shell { width: min(100% - 2rem, var(--sf-content-max)); }
.sf-home-v2 { gap: var(--sf-section-gap); }

/* Major CTAs follow the selected button treatment, not only product-card buttons. */
body[data-sf-button-style="pill"] .sf-home-v2__primary,
body[data-sf-button-style="pill"] .sf-home-v2__secondary,
body[data-sf-button-style="pill"] .sf-footer-v2__cta { border-radius: 999px !important; }
body[data-sf-button-style="outline"] .sf-home-v2__primary,
body[data-sf-button-style="outline"] .sf-footer-v2__cta { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.75) !important; }
body[data-sf-button-style="soft"] .sf-home-v2__primary { background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; }

body[data-sf-header-density="compact"] .sf-header-v2__announcement-inner { min-height: 28px; font-size: .68rem; }
body[data-sf-header-density="compact"] .sf-header-v2__main { min-height: 68px; gap: .85rem; }
body[data-sf-header-density="compact"] .sf-header-v2__logo { width: 42px; height: 42px; border-radius: 14px; }
body[data-sf-header-density="compact"] .sf-header-v2__logo img { width: 34px; height: 34px; }
body[data-sf-header-density="compact"] .sf-header-v2__search { height: 44px; border-radius: 14px; }
body[data-sf-header-density="compact"] .sf-header-v2__icon-action,
body[data-sf-header-density="compact"] .sf-header-v2__cart,
body[data-sf-header-density="compact"] .sf-header-v2__currency-static { height: 38px; border-radius: 11px; }
body[data-sf-header-density="compact"] .sf-header-v2__nav-row { min-height: 42px; }
body[data-sf-header-density="compact"] .sf-header-v2__primary-nav a { padding-block: .65rem; }

/* Category section V2 */
.sf-category-section__eyebrow {
    display: inline-block;
    margin-bottom: .35rem;
    color: var(--brand-700);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .035em;
}
.sf-category-section__all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--brand-700);
    font-size: .75rem;
    font-weight: 900;
}
.sf-category-section__all svg { width: 16px; height: 16px; }
.sf-category-grid {
    display: grid;
    grid-template-columns: repeat(var(--sf-category-mobile, 2), minmax(0, 1fr));
    gap: clamp(.75rem, 1.5vw, 1.2rem);
}
.sf-category-card {
    position: relative;
    min-height: 13rem;
    overflow: hidden;
    border-radius: max(var(--radius-card), 16px);
    background: #0f172a;
    box-shadow: var(--sf-shadow-sm);
}
.sf-category-card__media,
.sf-category-card__media img,
.sf-category-card__fallback,
.sf-category-card__overlay { position: absolute; inset: 0; }
.sf-category-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sf-motion-slow) var(--sf-ease); }
.sf-category-card__fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--brand-500), var(--brand-900));
    color: rgba(255,255,255,.78);
}
.sf-category-card__fallback svg { width: 42px; height: 42px; }
.sf-category-card__overlay { background: linear-gradient(0deg, rgba(2,6,23,.78), rgba(2,6,23,.08) 70%); }
.sf-category-card__copy {
    position: absolute;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: grid;
    gap: .2rem;
    color: #fff;
}
.sf-category-card__copy strong { font-size: .9rem; font-weight: 900; }
.sf-category-card__copy small { color: rgba(255,255,255,.68); font-size: .64rem; font-weight: 700; }
.sf-category-card:hover .sf-category-card__media img { transform: scale(1.045); }

.sf-category-rail {
    display: flex;
    gap: clamp(.85rem, 1.5vw, 1.35rem);
    overflow-x: auto;
    padding: .5rem .15rem .8rem;
    scroll-snap-type: x proximity;
}
.sf-category-orb {
    flex: 0 0 8.5rem;
    display: grid;
    justify-items: center;
    gap: .75rem;
    scroll-snap-align: start;
}
.sf-category-orb__media {
    width: 7.2rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-500) 16%, #e2e8f0);
    border-radius: 999px;
    background: linear-gradient(145deg, #fff, var(--brand-50));
    color: var(--brand-600);
    box-shadow: 0 14px 32px -26px rgba(15,23,42,.65);
    transition: transform var(--sf-motion-normal) var(--sf-ease), border-color var(--sf-motion-fast) ease;
}
.sf-category-orb__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sf-motion-slow) var(--sf-ease); }
.sf-category-orb__media svg { width: 34px; height: 34px; }
.sf-category-orb strong {
    max-width: 8.5rem;
    color: #334155;
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.5;
}
.sf-category-orb:hover .sf-category-orb__media { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand-500) 48%, #e2e8f0); }
.sf-category-orb:hover .sf-category-orb__media img { transform: scale(1.055); }
.sf-category-orb:hover strong { color: var(--brand-700); }

@media (min-width: 768px) {
    .sf-category-grid { grid-template-columns: repeat(var(--sf-category-tablet, 3), minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .sf-category-grid { grid-template-columns: repeat(var(--sf-category-desktop, 4), minmax(0, 1fr)); }
}

/* Minimal: quieter chrome, flatter hierarchy, more whitespace. */
body[data-sf-personality="minimal"] .sf-header-v2__announcement { display: none; }
body[data-sf-personality="minimal"] .sf-header-v2__surface { background: rgba(255,255,255,.96); box-shadow: none; }
body[data-sf-personality="minimal"] .sf-header-v2__logo { border-radius: 6px; box-shadow: none; background: #fff; }
body[data-sf-personality="minimal"] .sf-header-v2__search,
body[data-sf-personality="minimal"] .sf-header-v2__icon-action,
body[data-sf-personality="minimal"] .sf-header-v2__cart,
body[data-sf-personality="minimal"] .sf-header-v2__currency-static { border-radius: 6px; box-shadow: none; }
body[data-sf-personality="minimal"] .sf-home-v2__hero { border-radius: 8px; box-shadow: none; min-height: 29rem; }
body[data-sf-personality="minimal"] .sf-home-v2__hero-content { min-height: 29rem; max-width: 38rem; }
body[data-sf-personality="minimal"] .sf-footer-v2__prelude { background: #f8fafc; color: #0f172a; border-top: 1px solid #e2e8f0; }
body[data-sf-personality="minimal"] .sf-footer-v2__prelude p,
body[data-sf-personality="minimal"] .sf-footer-v2__eyebrow { color: #64748b; }
body[data-sf-personality="minimal"] .sf-footer-v2__body { background: #fff; color: #475569; border-top: 1px solid #e2e8f0; }
body[data-sf-personality="minimal"] .sf-footer-v2 h3,
body[data-sf-personality="minimal"] .sf-footer-v2__brand-lockup { color: #0f172a; }
body[data-sf-personality="minimal"] .sf-footer-v2__links a,
body[data-sf-personality="minimal"] .sf-footer-v2__contact a { color: #64748b; }
body[data-sf-personality="minimal"] .sf-category-card { border-radius: 4px; box-shadow: none; }

/* Luxury: slower rhythm, editorial typography, restrained chrome. */
body[data-sf-personality="luxury"] .sf-header-v2__announcement { background: #111827; }
body[data-sf-personality="luxury"] .sf-header-v2__main { min-height: 104px; }
body[data-sf-personality="luxury"] .sf-header-v2__brand-copy strong { font-weight: 700; letter-spacing: .025em; }
body[data-sf-personality="luxury"] .sf-header-v2__search { background: #fff; border-color: #d6d3d1; border-radius: 999px; }
body[data-sf-personality="luxury"] .sf-header-v2__icon-action,
body[data-sf-personality="luxury"] .sf-header-v2__cart,
body[data-sf-personality="luxury"] .sf-header-v2__currency-static { border-radius: 999px; }
body[data-sf-personality="luxury"] .sf-home-v2__hero { min-height: 42rem; border-radius: 0; }
body[data-sf-personality="luxury"] .sf-home-v2__hero-content { min-height: 42rem; max-width: 48rem; padding: 5.5rem; }
body[data-sf-personality="luxury"] .sf-home-v2__hero h1 { font-weight: 650; letter-spacing: -.015em; }
body[data-sf-personality="luxury"] .sf-footer-v2__prelude { padding-block: 4.5rem; }
body[data-sf-personality="luxury"] .sf-footer-v2__body { padding-top: 5rem; }
body[data-sf-personality="luxury"] .sf-category-card { min-height: 17rem; border-radius: 0; }
body[data-sf-personality="luxury"] .sf-category-card__copy strong { font-size: 1rem; font-weight: 650; }

/* Fashion: imagery leads, navigation recedes. */
body[data-sf-personality="fashion"] .sf-header-v2__announcement-inner { font-size: .69rem; letter-spacing: .04em; }
body[data-sf-personality="fashion"] .sf-header-v2__surface { background: rgba(255,255,255,.94); box-shadow: none; }
body[data-sf-personality="fashion"] .sf-header-v2__logo { border-radius: 0; box-shadow: none; }
body[data-sf-personality="fashion"] .sf-home-v2__hero { min-height: 44rem; border-radius: 0; }
body[data-sf-personality="fashion"] .sf-home-v2__hero-content { min-height: 44rem; }
body[data-sf-personality="fashion"] .sf-home-v2__hero h1 { font-size: clamp(2.8rem,6vw,5.7rem); }
body[data-sf-personality="fashion"] .sf-footer-v2__prelude { background: #18181b; }
body[data-sf-personality="fashion"] .sf-footer-v2__body { background: #09090b; }
body[data-sf-personality="fashion"] .sf-category-card { min-height: 18rem; border-radius: 0; }

/* Electronics: denser, sharper, information-forward. */
body[data-sf-personality="electronics"] .sf-header-v2__announcement { background: #0f172a; }
body[data-sf-personality="electronics"] .sf-header-v2__main { min-height: 74px; }
body[data-sf-personality="electronics"] .sf-header-v2__logo,
body[data-sf-personality="electronics"] .sf-header-v2__search,
body[data-sf-personality="electronics"] .sf-header-v2__icon-action,
body[data-sf-personality="electronics"] .sf-header-v2__cart,
body[data-sf-personality="electronics"] .sf-header-v2__currency-static { border-radius: 8px; }
body[data-sf-personality="electronics"] .sf-home-v2__hero { min-height: 30rem; border-radius: 14px; }
body[data-sf-personality="electronics"] .sf-home-v2__hero-content { min-height: 30rem; }
body[data-sf-personality="electronics"] .sf-footer-v2__prelude { background: linear-gradient(135deg,#0f172a,#1e293b); }
body[data-sf-personality="electronics"] .sf-category-card { min-height: 11rem; border-radius: 8px; }

/* Grocery: compact, friendly, action-oriented. */
body[data-sf-personality="grocery"] .sf-header-v2__announcement-inner { min-height: 30px; }
body[data-sf-personality="grocery"] .sf-header-v2__main { min-height: 72px; }
body[data-sf-personality="grocery"] .sf-header-v2__logo,
body[data-sf-personality="grocery"] .sf-header-v2__search,
body[data-sf-personality="grocery"] .sf-header-v2__icon-action,
body[data-sf-personality="grocery"] .sf-header-v2__cart,
body[data-sf-personality="grocery"] .sf-header-v2__currency-static { border-radius: 16px; }
body[data-sf-personality="grocery"] .sf-home-v2__hero { min-height: 27rem; border-radius: 24px; }
body[data-sf-personality="grocery"] .sf-home-v2__hero-content { min-height: 27rem; padding: 3rem; }
body[data-sf-personality="grocery"] .sf-footer-v2 { margin-top: 4rem; }
body[data-sf-personality="grocery"] .sf-category-card { min-height: 10rem; border-radius: 18px; }

/* Motion must affect the shell too, not only product cards. */
body[data-sf-motion="off"] .sf-header-v2__pulse { animation: none; }
body[data-sf-motion="off"] .sf-header-v2__brand:hover .sf-header-v2__logo,
body[data-sf-motion="off"] .sf-home-v2__primary:hover,
body[data-sf-motion="off"] .sf-home-v2__secondary:hover,
body[data-sf-motion="off"] .sf-category-card:hover .sf-category-card__media img,
body[data-sf-motion="off"] .sf-category-orb:hover .sf-category-orb__media,
body[data-sf-motion="off"] .sf-category-orb:hover .sf-category-orb__media img { transform: none; }
body[data-sf-motion="expressive"] .sf-home-v2__hero { transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s cubic-bezier(.2,.8,.2,1); }
body[data-sf-motion="expressive"] .sf-home-v2__hero:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -48px rgba(15,23,42,.78); }

@media (max-width: 767px) {
    body[data-sf-personality="luxury"] .sf-home-v2__hero,
    body[data-sf-personality="fashion"] .sf-home-v2__hero { min-height: 34rem; }
    body[data-sf-personality="luxury"] .sf-home-v2__hero-content,
    body[data-sf-personality="fashion"] .sf-home-v2__hero-content { min-height: 34rem; padding: 2rem; }
    .sf-category-card { min-height: 11rem; }
    .sf-category-orb { flex-basis: 7.5rem; }
    .sf-category-orb__media { width: 6.4rem; }
}