/* ===== Premium storefront foundation ===== */
:root {
    --sf-radius: 1.25rem;
    --sf-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
    overflow-x: clip;
}

body.sf-body {
    font-family: 'Outfit', 'DM Sans', sans-serif;
    background: var(--sf-bg, #f4f1ec);
    color: var(--sf-ink, #14110f);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Keep Bootstrap grid stable on phones (do NOT override .container max-width) */
.sf-body .row > [class*="col"] {
    min-width: 0;
}

.display-font,
.sf-brand,
body.sf-body h1,
body.sf-body h2,
body.sf-body h3 {
    font-family: 'Instrument Serif', 'Fraunces', Georgia, serif;
    letter-spacing: -0.02em;
}

/* Nav — glass + accent line */
.sf-nav {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 rgba(20, 17, 15, 0.06);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.sf-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sf-accent), var(--sf-accent-2), transparent);
    opacity: .85;
}
.sf-brand {
    font-weight: 600;
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    color: var(--sf-ink);
    text-decoration: none;
    line-height: 1;
}
.sf-nav .nav-link {
    color: var(--sf-muted, #5c564f);
    font-weight: 500;
    font-size: .95rem;
    padding: .55rem .85rem !important;
    border-radius: 999px;
    transition: color .2s var(--sf-ease), background .2s var(--sf-ease);
}
.sf-nav .nav-link:hover {
    color: var(--sf-ink);
    background: rgba(20, 17, 15, 0.05);
}
.btn-brand {
    background: linear-gradient(135deg, var(--sf-accent), var(--sf-accent-2));
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .7rem 1.45rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--sf-accent) 35%, transparent);
    transition: transform .25s var(--sf-ease), filter .2s ease, box-shadow .25s ease;
}
.btn-brand:hover {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--sf-accent) 40%, transparent);
}
.btn-outline-dark {
    border-radius: 999px;
}

/* Live search */
.sf-live-search {
    position: relative;
    min-width: min(280px, 70vw);
}
.sf-live-search .sf-live-input {
    min-width: 220px;
    border-radius: 999px;
    padding-left: .95rem;
    padding-right: .95rem;
}
.sf-live-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid #e7e5e4;
    border-radius: 1rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
    overflow: hidden;
    max-height: min(70vh, 420px);
    overflow-y: auto;
}
.sf-live-search-page .sf-live-panel {
    left: 0;
    right: 0;
}
.sf-live-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .7rem .9rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f5f5f4;
}
.sf-live-item:hover,
.sf-live-item:focus {
    background: #fafaf9;
    color: inherit;
}
.sf-live-item img {
    width: 44px;
    height: 44px;
    border-radius: .65rem;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f4;
}
.sf-live-name {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}
.sf-live-sub {
    font-size: .78rem;
    color: #78716c;
    margin-top: .1rem;
    white-space: normal;
    word-break: break-word;
}
.sf-live-item {
    align-items: flex-start;
}
.sf-live-all {
    display: block;
    text-align: center;
    padding: .75rem;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    color: var(--sf-accent, #0f766e);
    background: #fafaf9;
}
.sf-live-all:hover { filter: brightness(.97); }
.sf-live-empty {
    padding: 1rem;
    color: #78716c;
    font-size: .9rem;
    text-align: center;
}
@media (max-width: 767.98px) {
    .sf-live-search { min-width: 100%; }
    .sf-live-search .sf-live-input { min-width: 0; width: 100%; }
}

/* Products */
.product-card {
    background: var(--sf-surface, #fff);
    border: 0;
    border-radius: var(--sf-radius);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(20,17,15,.04), 0 12px 32px rgba(20,17,15,.06);
    height: 100%;
    transition: transform .35s var(--sf-ease), box-shadow .35s var(--sf-ease);
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(20,17,15,.12);
}
.product-card-media {
    overflow: hidden;
    background: linear-gradient(145deg, #ebe6df, #f7f3ee);
    position: relative;
}
.product-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(20,17,15,.08));
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}
.product-card:hover .product-card-media::after { opacity: 1; }
.product-card img.js-product-image {
    height: 260px;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform .7s var(--sf-ease);
}
.product-card:hover img.js-product-image { transform: scale(1.07); }
.product-card .js-product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.price {
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(90deg, var(--sf-accent), var(--sf-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.product-card .price small {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #78716c !important;
}

/* Footer */
.sf-footer {
    margin-top: 4rem;
    background:
        radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--sf-accent) 35%, transparent), transparent 50%),
        radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--sf-accent-2) 28%, transparent), transparent 45%),
        #0e0c0b;
    color: #a8a29e;
    position: relative;
    overflow: hidden;
}
.sf-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.sf-footer a { color: #f5f5f4; text-decoration: none; }
.sf-footer a:hover { color: #fff; opacity: .9; }

#sfCartIcon {
    width: 42px; height: 42px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #fff, #f0ebe4);
    box-shadow: 0 4px 14px rgba(20,17,15,.08);
}
#sfCartIcon.cart-bump { animation: cartBump .45s ease; }
@keyframes cartBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.cart-fly-item {
    position: fixed !important; z-index: 99999 !important; width: 72px; height: 72px;
    border-radius: 16px; overflow: hidden; pointer-events: none;
    box-shadow: 0 12px 32px rgba(15,23,42,.35); border: 3px solid #fff;
    background: var(--sf-accent);
}
.cart-fly-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-fly-item .cart-fly-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem;
    background: linear-gradient(135deg, var(--sf-accent), #0f172a);
}
.sf-toast-wrap {
    position: fixed; top: 90px; right: 16px; z-index: 100000;
    display: flex; flex-direction: column; gap: .65rem;
    max-width: 360px; width: calc(100% - 32px);
}
.sf-toast {
    background: #fff; border: 1px solid #e7e5e4; border-left: 5px solid var(--sf-accent);
    border-radius: .9rem; box-shadow: 0 18px 40px rgba(15,23,42,.16);
    padding: 1rem 1.1rem; display: flex; gap: .8rem; align-items: flex-start;
}
.sf-toast.error { border-left-color: #dc2626; }
.sf-toast .sf-toast-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: color-mix(in srgb, var(--sf-accent) 15%, #fff);
    color: var(--sf-accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Section titles */
.sf-section-head {
    display: flex; justify-content: space-between; align-items: end;
    margin-bottom: 1.75rem; gap: 1rem;
}
.sf-section-head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0;
}
.sf-section-head a {
    color: var(--sf-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
}
.sf-section-head a:hover { color: var(--sf-accent); }

/* ===== Default — ink + gold luxury ===== */
body.theme-default {
    background:
        radial-gradient(ellipse at 10% -10%, rgba(15, 118, 110, .12), transparent 45%),
        radial-gradient(ellipse at 90% 0%, rgba(180, 140, 60, .14), transparent 40%),
        linear-gradient(180deg, #f7f4ef 0%, #efeae3 100%) !important;
}
body.theme-default .section-hero {
    min-height: 86vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(15, 23, 42, .78) 0%, rgba(15, 118, 110, .45) 55%, rgba(20, 17, 15, .55) 100%),
        var(--sf-hero-image, linear-gradient(135deg, #0f766e, #1e293b)) center/cover no-repeat !important;
    color: #fff;
}
body.theme-default .section-hero::before {
    content: "";
    position: absolute;
    inset: -20% auto auto -10%;
    width: 50vmax; height: 50vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, .28), transparent 65%);
    animation: sfFloat 12s ease-in-out infinite;
}
body.theme-default .section-hero::after {
    content: "";
    position: absolute;
    right: -15%; bottom: -30%;
    width: 55vmax; height: 55vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 118, 110, .35), transparent 60%);
    animation: sfFloat 16s ease-in-out infinite reverse;
}
@keyframes sfFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2%, -3%); }
}
body.theme-default .section-hero .lead,
body.theme-default .section-hero .text-muted { color: rgba(255,255,255,.82) !important; }
body.theme-default .btn-brand {
    background: linear-gradient(135deg, #c9a227, #e8c547);
    color: #1a1408;
    box-shadow: 0 12px 32px rgba(201, 162, 39, .35);
}

/* ===== Cozy Boutique — soft blush mesh, brand-forward ===== */
body.theme-cozy {
    font-family: 'Outfit', sans-serif !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(214, 122, 140, .22), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(120, 90, 110, .16), transparent 38%),
        radial-gradient(circle at 50% 100%, rgba(232, 200, 180, .25), transparent 45%),
        #faf6f3 !important;
}
body.theme-cozy h1,
body.theme-cozy h2,
body.theme-cozy h3,
body.theme-cozy .display-font,
body.theme-cozy .sf-brand {
    font-family: 'Instrument Serif', Georgia, serif !important;
    color: #2a1f24 !important;
}
body.theme-cozy .sf-nav {
    background: rgba(250, 246, 243, .8) !important;
}
body.theme-cozy .btn-brand {
    background: linear-gradient(135deg, #5c3d4a, #a66b7a) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(92, 61, 74, .28) !important;
}
body.theme-cozy .section-hero {
    min-height: 88vh !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    position: relative;
    overflow: hidden;
}
body.theme-cozy .section-hero::before {
    content: "";
    position: absolute;
    width: 70vmax; height: 70vmax;
    right: -25%; top: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 122, 140, .28), transparent 68%);
    animation: sfFloat 14s ease-in-out infinite;
}
body.theme-cozy .section-hero::after { display: none !important; }
body.theme-cozy .product-card {
    border-radius: 1.5rem !important;
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 40px rgba(42, 31, 36, .08) !important;
}
body.theme-cozy .price {
    background: linear-gradient(90deg, #5c3d4a, #a66b7a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.theme-cozy .sf-footer {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(166, 107, 122, .35), transparent 50%),
        #2a1f24 !important;
}

.cozy-hero-visual {
    width: min(480px, 92vw);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(145deg, #e8b4bc, #c98997 40%, #5c3d4a);
    box-shadow:
        0 30px 60px rgba(42, 31, 36, .18),
        inset 0 0 0 10px rgba(255,255,255,.2);
    animation: cozyMorph 10s ease-in-out infinite;
}
@keyframes cozyMorph {
    0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
    50% { border-radius: 55% 45% 42% 58% / 42% 55% 45% 58%; }
}
.cozy-hero-visual img {
    width: 100%; height: 100%; object-fit: cover;
    mix-blend-mode: soft-light;
    opacity: .95;
}

/* ===== Market — bold commerce, full-bleed ===== */
body.theme-market {
    font-family: 'Outfit', sans-serif !important;
    background:
        radial-gradient(ellipse at 80% -10%, rgba(14, 165, 233, .1), transparent 40%),
        #f3f6f9 !important;
}
body.theme-market h1,
body.theme-market h2,
body.theme-market h3,
body.theme-market .display-font,
body.theme-market .sf-brand {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #0b1220 !important;
}
body.theme-market .sf-nav {
    background: rgba(255,255,255,.85) !important;
}
body.theme-market .btn-brand {
    background: linear-gradient(135deg, #0b1220, #0ea5e9) !important;
    border-radius: .75rem !important;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .28) !important;
}
body.theme-market .section-hero {
    min-height: 72vh !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}
body.theme-market .section-hero::after { display: none !important; }
body.theme-market .product-card {
    border: 0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 28px rgba(11, 18, 32, .07) !important;
}
body.theme-market .product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(11, 18, 32, .12) !important;
}
body.theme-market .price {
    background: linear-gradient(90deg, #0b1220, #0284c7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.theme-market .sf-footer {
    background:
        radial-gradient(ellipse at 70% 0%, rgba(14, 165, 233, .25), transparent 45%),
        #0b1220 !important;
}

.market-hero-banner {
    width: 100%;
    min-height: 72vh;
    border-radius: 0;
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    display: flex;
    align-items: center;
    background:
        linear-gradient(105deg, rgba(11, 18, 32, .92) 0%, rgba(11, 18, 32, .55) 48%, rgba(14, 165, 233, .25) 100%),
        var(--sf-hero-image, linear-gradient(135deg, #0b1220, #0369a1)) center/cover no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.market-hero-banner::after {
    content: "";
    position: absolute;
    inset: auto -5% -40% 40%;
    height: 70%;
    background: radial-gradient(circle, rgba(14, 165, 233, .35), transparent 60%);
    pointer-events: none;
}
.market-hero-banner .text-muted,
.market-hero-banner .text-primary {
    color: rgba(255,255,255,.75) !important;
}
.market-hero-banner h1,
.market-hero-banner .display-font { color: #fff !important; }
.market-deals-strip {
    background: linear-gradient(90deg, #fff, #f0f9ff);
    border: 0;
    border-radius: 1rem;
    padding: 1.1rem 1.35rem;
    box-shadow: 0 10px 28px rgba(11,18,32,.06);
}

/* Shared hero content animation */
.sf-hero-copy {
    position: relative;
    z-index: 2;
    animation: sfRise .8s var(--sf-ease) both;
}
@keyframes sfRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.sf-hero-visual {
    position: relative;
    z-index: 2;
    animation: sfRise .9s .12s var(--sf-ease) both;
}

@media (max-width: 991.98px) {
    body.theme-default .section-hero,
    body.theme-cozy .section-hero,
    .market-hero-banner { min-height: 70vh; }
}

/* ===== Mobile / tablet — keep design, prevent overflow only ===== */
@media (max-width: 767.98px) {
    .sf-nav .navbar-collapse {
        padding-top: .85rem;
        padding-bottom: .65rem;
    }
    .sf-nav .navbar-collapse .d-flex.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
        gap: .75rem !important;
    }
    .sf-live-search { width: 100%; min-width: 0; }
    .sf-live-search .sf-live-input { min-width: 0; width: 100%; }
    .sf-section-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .4rem;
    }
    .product-card img.js-product-image { height: 220px; }
    .product-card:hover { transform: none; }
    .sf-footer { margin-top: 2.5rem; }
    .sf-toast-wrap { top: 80px; right: 12px; max-width: calc(100% - 24px); }
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    body.theme-default .section-hero,
    body.theme-cozy .section-hero,
    body.theme-market .section-hero,
    .market-hero-banner {
        min-height: 62vh !important;
    }
    .sf-brand { font-size: 1.4rem; }
    .sf-brand img { max-height: 36px !important; }
    .display-3, .section-hero .display-3, .market-hero-banner h1 {
        font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    }
    .product-card img.js-product-image { height: 190px; }
    .cozy-hero-visual { width: min(300px, 88vw); }

    .sf-account-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: .4rem;
        padding-bottom: .35rem;
        margin-bottom: 1rem;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .sf-account-nav .list-group-item {
        flex: 0 0 auto;
        width: auto;
        border-radius: 999px !important;
        border: 1px solid #e7e5e4 !important;
        padding: .5rem 1rem;
        white-space: nowrap;
        background: #fff;
    }
    .sf-account-nav .list-group-item.active {
        background: var(--sf-accent, #0f766e) !important;
        border-color: var(--sf-accent, #0f766e) !important;
        color: #fff !important;
    }
    .sf-account-nav form { display: contents; }

    .sf-shop-filters { margin-bottom: .65rem; }
    .sf-shop-filters summary {
        list-style: none;
        cursor: pointer;
        font-weight: 600;
        padding: .75rem 1rem;
        background: #fff;
        border: 1px solid #e7e5e4;
        border-radius: 1rem;
        margin-bottom: .65rem;
    }
    .sf-shop-filters summary::-webkit-details-marker { display: none; }
}