/* =========================================================
   VARIABLES
========================================================= */
:root{
    --brand:#f47272;
    --brand-2:#be123c;
    --accent:#f59e0b;

    /* UI tokens */
    --radius-sm:.5rem;
    --radius:.75rem;
    --radius-lg:1rem;

    --shadow-sm:0 8px 24px rgba(0,0,0,.06);
    --shadow-md:0 12px 32px rgba(0,0,0,.12);
    --shadow-lg:0 16px 40px rgba(0,0,0,.12);

    --border:#eee;
    --muted:#6b7280;
    --bg:#fafafa;
    --brand-soft:#fdecec;
    --brand-rgb:244,114,114;
    --brand-2-rgb:190,18,60;
    --tile-grad:linear-gradient(135deg,#fdecec,#ffffff);
    font-size:16px;
}

/* Scale the root font size down for spacious, high-res viewports */
@media (min-width:1440px){
    :root{
        font-size:15px;
    }
}

@media (min-width:1920px){
    :root{
        font-size:14px;
    }
}

/* =========================================================
   BASE
========================================================= */
body{background:var(--bg);position:relative;z-index:0;}
main{flex:1 0 auto;}
.logo{font-weight:800;letter-spacing:.3px}
.logo span{color:var(--brand)}

.info-icon{
    width:40px;height:40px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--brand-soft);color:var(--brand)
}

/* =========================================================
   TOPBAR
========================================================= */
.site-header{
    position:sticky;
    top:0;
    z-index:1040;
    background:transparent;
}
.site-header .navbar{
    position:relative;
    z-index:2;
    box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.site-header .topbar{
    position:relative;
    z-index:3;
}
.site-header + main{
    position:relative;
    z-index:0;
}
.topbar{background:var(--brand); color:#fff; font-size:.925rem}
.topbar a{color:#fff;text-decoration:none}

/* =========================================================
   SEARCH (NAV + PAGE)
========================================================= */
.search-wrap{ position:relative }
.search-wrap .bi-search{
    position:absolute; left:.75rem; top:50%;
    transform:translateY(-50%); opacity:.6
}
#navSearchInput{ padding-left:2.25rem }

.navbar .search-wrap{
    min-height:100%;
    flex:1 1 560px;
    min-width:320px;
    max-width:720px;
}
.navbar .search-wrap .form-control{
    min-height:46px;
}
.navbar .btn-brand{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}
.nav-icon-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border-radius:50%;
    gap:0;
}
.nav-icon-btn i{
    font-size:1.2rem;
    line-height:1;
}
.nav-icon-btn .nav-icon-badge{
    position:absolute;
    top:4px;
    right:3px;
    font-size:.7rem;
    min-width:1.2rem;
    min-height:1.2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:.1rem .25rem;
}
.nav-icon-btn.btn-outline-amber .nav-icon-badge{
    background:rgba(251,191,36,.22);
    color:#a16207;
}
.nav-icon-btn.btn-brand .nav-icon-badge{
    background:#fff;
    color:var(--brand);
}
.nav-icon-btn.btn-outline-amber{
    border-color:rgba(251,191,36,.45);
    color:#d97706;
    background:#fff;
}
.nav-icon-btn.btn-outline-amber:hover{
    background:rgba(251,191,36,.12);
    border-color:rgba(217,119,6,.65);
    color:#b45309;
}
.nav-icon-btn.btn-outline-success{
    border-color:rgba(var(--brand-rgb),.45);
    color:var(--brand);
    background:#fff;
}
.nav-icon-btn.btn-outline-success:hover{
    background:rgba(var(--brand-rgb),.12);
    border-color:rgba(var(--brand-rgb),.65);
    color:var(--brand-2);
}
.nav-icon-btn.btn-brand{
    gap:0;
}
.nav-icon-btn.dropdown-toggle::after{
    display:none;
}
.nav-profile-btn{
    background:linear-gradient(135deg,rgba(var(--brand-rgb),.95),rgba(59,130,246,.75));
    color:#fff;
    border:none;
    box-shadow:0 8px 22px rgba(15,23,42,.18);
}
.nav-profile-btn:hover{
    color:#fff;
    background:linear-gradient(135deg,rgba(var(--brand-rgb),.95),rgba(37,99,235,.8));
}
.nav-profile-btn:focus-visible{
    outline:2px solid rgba(59,130,246,.6);
    outline-offset:2px;
}
.nav-profile-btn i{
    font-size:1.15rem;
}
.nav-actions{
    width:100%;
    gap:inherit;
}

@media (max-width:1399.98px){
    .navbar .search-wrap{
        flex-basis:420px;
        min-width:260px;
        max-width:100%;
    }
    .navbar .btn-brand{
        padding:.6rem 1.15rem;
    }
    .nav-icon-btn{
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;
    }
    .nav-icon-btn i{
        font-size:1.1rem;
    }
}

@media (max-width:1199.98px){
    #navMain .navbar-nav{
        width:100%;
        gap:.75rem;
    }
    #navMain .navbar-nav .nav-link{
        padding-left:0;
        padding-right:0;
    }
    .navbar .search-wrap{
        min-width:100%;
        flex-basis:100%;
        max-width:100%;
    }
    .navbar .search-wrap .form-control{
        min-height:42px;
    }
    .nav-actions{
        width:100%;
        align-items:flex-start;
    }
    .nav-actions .nav-icon-btn{
        width:56px;
        height:56px;
        min-width:56px;
        min-height:56px;
        border-radius:50%;
    }
    .nav-actions .nav-icon-btn i{
        font-size:1.25rem;
    }
}

@media (min-width:1200px){
    #navMain{
        display:flex!important;
        align-items:center;
        gap:1.75rem;
    }
    #navMain > .navbar-nav{
        flex:0 0 auto;
        width:auto!important;
    }
    #navMain > .search-wrap{
        flex:1 1 600px;
        max-width:760px;
    }
    #navMain > .nav-actions{
        flex:0 0 auto;
        width:auto;
    }
    .nav-actions{
        width:auto;
    }
}

/* dropdown */
.search-dropdown{
    position:absolute; left:0; right:0; top:100%; z-index:1050;
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    margin-top:.5rem; padding:.5rem;
    max-height:70vh; overflow:auto;
}
.search-section{ padding:.25rem .25rem .5rem }
.search-sec-title{
    font-size:.75rem; font-weight:700; color:var(--muted);
    padding:.25rem .5rem
}
.search-item{
    display:flex; align-items:center; gap:.5rem;
    padding:.5rem; border-radius:var(--radius-sm);
    cursor:pointer; text-decoration:none; color:inherit;
}
.search-item:hover, .search-item[aria-selected="true"]{ background:#f8fafc }
.search-item .avatar{
    width:36px; height:36px; border-radius:.5rem; background:#f3f4f6; flex:0 0 auto
}
.search-item .name{ font-weight:600; }
.search-item .sub{ font-size:.8rem; color:var(--muted) }
.search-empty{ padding:.5rem .75rem }

/* search page finomítás */
#searchResults .list-group-item { border-radius: var(--radius-sm); margin-bottom:.25rem; }

/* =========================================================
   HERO / PILLS
========================================================= */
.slot-pill{
    background:#fff;color:#111;border-radius:999px;
    padding:.35rem .75rem;display:inline-flex;gap:.35rem;align-items:center
}
.slot-pill .dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--accent)}

.hero{
    background:var(--tile-grad);
    border-bottom:1px solid #e7e7e7
}

/* =========================================================
   CATEGORY TILES + H SCROLLER
========================================================= */
.cat-tile{
    border-radius:var(--radius-lg); overflow:hidden; background:#fff;
    border:1px solid var(--border); transition:.2s
}
.cat-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm) }

/* Vízszintes kategóriasor */
.cat-scroll-wrap { position: relative; }
.cat-scroll {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 0;
}
.cat-scroll::-webkit-scrollbar { height: 6px; }
.cat-scroll::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }

.cat-chip{
    scroll-snap-align: start;
    min-width:120px; max-width:160px; height:120px;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    background:#fff; padding:.5rem; gap:.25rem; flex:0 0 auto;
    transition:.15s;
}
.cat-chip:not(.cat-chip--home):hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cat-chip--home{
    position:relative;
    min-width:200px;
    max-width:260px;
    height:auto;
    padding:1rem 1.2rem;
    background:#fff;
    border-radius:1.15rem;
    border:1px solid rgba(15,23,42,.06);
    display:flex;
    align-items:center;
    gap:1rem;
    box-shadow:0 14px 28px rgba(15,23,42,.08);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color:inherit;
    overflow:hidden;
    z-index:0;
    margin:.35rem 0;
}
.cat-chip--home::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(59,130,246,.08));
    opacity:0;
    transition:opacity .2s ease;
    z-index:0;
    pointer-events:none;
}
.cat-chip--home:hover{
    transform:translateY(-2px);
    box-shadow:0 24px 40px rgba(15,23,42,.12);
    border-color:rgba(15,23,42,.12);
}
.cat-chip--home:hover::before{
    opacity:1;
}
.cat-chip--home .cat-chip__thumb{
    position:relative;
    flex:0 0 auto;
    width:60px;
    height:60px;
    border-radius:18px;
    background:rgba(15,23,42,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 22px rgba(15,23,42,.12);
    z-index:1;
}
.cat-chip--home .cat-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
}
.cat-chip--home .cat-chip__body{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:.35rem;
}
.cat-chip--home .cat-chip__title{
    font-size:.95rem;
    font-weight:600;
    color:#0f172a;
}
.cat-chip--home .cat-chip__cta{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    font-size:.8rem;
    font-weight:500;
    color:var(--brand);
    opacity:.85;
    transition:opacity .2s ease;
}
.cat-chip--home .cat-chip__cta i{
    font-size:1rem;
    transition:transform .2s ease;
}
.cat-chip--home:hover .cat-chip__cta{
    opacity:1;
}
.cat-chip--home:hover .cat-chip__cta i{
    transform:translateX(4px);
}

@media (max-width: 576px){
    .cat-chip--home{
        min-width:180px;
        padding:.85rem 1rem;
    }
    .cat-chip--home .cat-chip__thumb{
        width:52px;
        height:52px;
    }
}

/* =========================================================
   PRODUCT CARD
========================================================= */
.product-card{
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:#fff;
    transition: box-shadow .2s, transform .2s;
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem;
    overflow:hidden;
    position:relative;
    box-shadow:0 18px 40px rgba(15,23,42,.05);
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.product-card__figure{
    position:relative;
    border-radius:1.25rem;
    padding:1rem;
    background:linear-gradient(145deg,rgba(248,250,252,1),rgba(236,253,245,1));
    border:1px solid rgba(15,23,42,.05);
}
.product-card__media{
    display:block;
    border-radius:1rem;
    background:#fff;
    padding:.35rem;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.03);
}
.product-card__media-inner{
    border-radius:1rem;
    aspect-ratio:1/1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.product-card__image{
    width:100%;
    height:100%;
    object-fit:contain;
}
.product-thumb{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}
.product-card__favorite{
    position:absolute;
    top:.75rem;
    right:.75rem;
}

.product-card__body{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    height:100%;
    padding:0 .1rem .25rem;
}
.product-card__bottom{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:.75rem;
}
.product-card__title{
    font-weight:600;
    color:#0f172a;
    line-height:1.3;
    word-break:break-word;
    margin-bottom:.15rem;
}
.product-card__title:hover{
    color:var(--brand-2);
}
.product-card__price{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    font-size:.9rem;
}
.product-card__price .price-line{
    display:flex;
    align-items:baseline;
    gap:.35rem;
}
.product-card__price .price-net{
    font-size:1.05rem;
    font-weight:700;
    color:var(--brand-2);
}
.product-card__price .price-gross{
    font-size:.95rem;
    color:#475569;
}
.product-card__price .price-orig{
    font-size:.85rem;
    color:#dc2626;
    text-decoration:line-through;
}
.product-card__price-label{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:#0f172a;
    font-weight:600;
}
.product-card__price-label--muted{
    color:#64748b;
}
.product-card__price-note{
    font-size:.8rem;
    color:#64748b;
}
.product-card__footer{
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.product-card__qty input{
    max-width:70px;
}
.product-card__actions{
    display:flex;
    align-items:center;
    gap:.5rem;
}
.product-card__actions .btn{
    white-space:nowrap;
    flex-shrink:0;
}
.product-card__note{
    font-size:.8rem;
    color:#64748b;
}

.product-card .product-body{
    flex:1 1 auto; display:flex; flex-direction:column;
}

.favorite-toggle{
    width:38px;
    height:38px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.12);
    background:rgba(255,255,255,.95);
    color:var(--muted);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .2s ease;
    position:relative;
    z-index:2;
    box-shadow:0 6px 18px rgba(15,23,42,.12);
}
.favorite-toggle .favorite-toggle__icon{
    transition:opacity .15s ease;
    font-size:1rem;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
}
.favorite-toggle .favorite-toggle__icon--on{
    opacity:0;
}
.favorite-toggle.is-active{
    background:var(--brand);
    border-color:var(--brand);
    color:#fff;
    box-shadow:0 12px 32px rgba(var(--brand-rgb),.25);
}
.favorite-toggle.is-active .favorite-toggle__icon--off{ opacity:0; }
.favorite-toggle.is-active .favorite-toggle__icon--on{ opacity:1; }
.favorite-toggle:hover{
    border-color:var(--brand);
    color:var(--brand);
}
.favorite-toggle.is-active:hover{
    color:#fff;
}
.favorite-toggle.is-loading{
    pointer-events:none;
    opacity:.65;
}
.favorite-toggle--sm{ width:34px; height:34px; }
.favorite-toggle--md{ width:40px; height:40px; }
.home-promos__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.25rem;
}
.promo-card{
    position:relative;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    padding:1rem;
    display:flex;
    flex-direction:column;
    height:100%;
    transition:box-shadow .2s ease, transform .2s ease;
}
.promo-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
}
.promo-card__media{
    position:relative;
}
.promo-card__badge{
    position:absolute;
    top:0.5rem;
    left:0.5rem;
    z-index:2;
    font-size:.75rem;
    font-weight:600;
    padding:.25rem .65rem;
    border-radius:999px;
    background:rgba(248,113,113,.15);
    color:#b91c1c;
    backdrop-filter:blur(6px);
    box-shadow:0 8px 18px rgba(185,28,28,.25);
}
.promo-card__favorite{
    position:absolute;
    top:.5rem;
    right:.5rem;
    z-index:2;
}
.promo-card__thumb{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:.75rem;
    background:#fff;
}
.promo-card__body{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    margin-top:1rem;
}
.promo-card__title{
    font-weight:600;
    color:#0f172a;
}
.promo-card__title:hover{
    color:var(--brand);
}
.promo-card__price{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    font-size:.9rem;
}
.promo-card__price-net{
    font-size:1.05rem;
    font-weight:700;
    color:var(--brand-2);
}
.promo-card__price-gross{
    font-size:.95rem;
    color:#475569;
}
.promo-card__price-orig{
    font-size:.85rem;
    color:#dc2626;
    text-decoration:line-through;
}
.promo-card__actions{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.promo-card__qty input{
    max-width:70px;
}
.promo-card__actions .btn{
    white-space:nowrap;
}
@media (max-width:575.98px){
    .home-promos__grid{
        grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
        gap:1rem;
    }
    .promo-card{
        padding:.85rem;
    }
}

/* =========================================================
   HOME: POPULAR TODAY
========================================================= */
.home-popular{
    position:relative;
    background:linear-gradient(140deg,rgba(var(--brand-rgb),.08),rgba(255,255,255,.95));
    border-top:1px solid rgba(var(--brand-rgb),.12);
    border-bottom:1px solid rgba(31,41,55,.08);
}
.home-popular__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--brand-2);
    background:rgba(var(--brand-rgb),.12);
    padding:.35rem .75rem;
    border-radius:999px;
}
.home-popular__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1.5rem;
}
.popular-card{
    position:relative;
    border-radius:1.25rem;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
    padding:1.5rem 1.25rem 1.25rem;
    display:flex;
    flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
}
.popular-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}
.popular-card__favorite{
    position:absolute;
    top:1.15rem;
    right:1.15rem;
    z-index:4;
}
.popular-card__labels{
    position:absolute;
    top:1.15rem;
    left:1.15rem;
    z-index:3;
}
.popular-card__badge{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    font-size:.75rem;
    font-weight:600;
    padding:.3rem .65rem;
    border-radius:999px;
    backdrop-filter:blur(10px);
    box-shadow:0 6px 18px rgba(15,23,42,.12);
    color:#0f172a;
}
.popular-card__badge--primary{
    background:linear-gradient(130deg,rgba(134,239,172,.9),rgba(74,222,128,.75));
    color:#0b3f1e;
}
.popular-card__badge--save{
    background:linear-gradient(135deg,rgba(252,231,243,.95),rgba(252,165,165,.9));
    color:#7f1d1d;
}
.popular-card__media{
    background:#fff;
    border-radius:1rem;
    margin:0 -.25rem 1.25rem;
    padding:1.25rem .75rem;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:170px;
}
.popular-card__body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}
.popular-card__thumb{
    max-height:130px;
    width:100%;
    object-fit:contain;
}
.popular-card__meta{
    font-size:.8rem;
    color:var(--muted);
}
.popular-card__rank{
    font-weight:700;
    color:var(--brand-2);
}
.popular-card__hint{
    font-size:.75rem;
}
.popular-card__title{
    font-weight:600;
    color:#0f172a;
    margin-bottom:.35rem;
    line-height:1.3;
    word-break:break-word;
}
.popular-card__title:hover{
    color:var(--brand-2);
}
.popular-card__price{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    font-size:.9rem;
    margin-bottom:.75rem;
    margin-top:auto;
}
.popular-card__footer{
    display:flex;
    flex-direction:column;
    gap:.55rem;
}
.popular-card__price-net{
    font-size:1.05rem;
    font-weight:700;
    color:var(--brand-2);
}
.popular-card__price-gross{
    font-size:.95rem;
    color:#475569;
}
.popular-card__price-orig{
    font-size:.85rem;
    color:#dc2626;
    text-decoration:line-through;
}
.popular-card__qty input{
    max-width:70px;
}
.popular-card__actions{
    display:flex;
    gap:.5rem;
}
.popular-card__actions .btn-outline-secondary{
    border-color:rgba(148,163,184,.5);
    color:rgba(71,85,105,1);
}
.popular-card__actions .btn-outline-secondary:hover{
    color:#0f172a;
    border-color:rgba(71,85,105,.85);
}

@media (max-width: 767.98px){
    .home-popular__grid{ grid-template-columns:1fr; }
    .popular-card{ padding:1.25rem; }
    .popular-card__media{ min-height:150px; }
}
.favorite-toggle--lg{
    width:auto;
    height:auto;
    padding:.35rem .9rem;
    gap:.5rem;
    font-weight:600;
    letter-spacing:.01em;
    border-radius:999px;
    box-shadow:none;
    border:1px solid rgba(15,23,42,.12);
    background:rgba(248,250,252,.95);
}
.favorite-toggle--lg .favorite-toggle__icon{
    opacity:1;
    font-size:1.05rem;
    position:static;
    transform:none;
}
.favorite-toggle--lg.is-active{
    background:rgba(220,38,38,.1);
    border-color:rgba(220,38,38,.4);
    color:#b91c1c;
}
.favorite-toggle__label{
    font-size:.85rem;
    white-space:nowrap;
}
.favorite-toggle__label--active{
    display:none;
}
.favorite-toggle.is-active .favorite-toggle__label--default{
    display:none;
}
.favorite-toggle.is-active .favorite-toggle__label--active{
    display:inline;
}
.favorite-toggle--floating{
    position:absolute;
    top:.6rem;
    right:.6rem;
    box-shadow:0 12px 24px rgba(15,23,42,.18);
}
.favorite-toggle--floating.is-active{
    color:#fff;
}
.favorite-toggle--standalone{
    border:1px solid rgba(15,23,42,.12);
    background:rgba(248,250,252,.95);
    color:var(--muted);
}
.favorite-toggle--standalone.is-active{
    background:rgba(220,38,38,.12);
    border-color:rgba(220,38,38,.4);
    color:#b91c1c;
}

.price{ font-weight:700; color:var(--brand-2); margin-bottom:.35rem; }
.price-stack{ display:flex; flex-direction:column; gap:.15rem; }
.price-line.price-gross{ font-size:1rem; line-height:1.1; }
.price-line.price-net{ font-size:.8rem; color:var(--muted); font-weight:600; }
.price-line.price-orig{ font-size:.75rem; color:var(--muted); text-decoration:line-through; font-weight:600; }
.price.price-promo .price-line.price-gross span[data-role="price-gross"]{ color:var(--brand); }
.price.price-promo .price-line.price-orig{ color:#ef4444; }
.badge-save{ background:var(--accent) }

.product-card__price .price-line.price-net{
    font-size:1.05rem;
    font-weight:700;
    color:var(--brand-2);
}
.product-card__price .price-line.price-gross{
    font-size:.95rem;
    color:#475569;
}
.product-card__price .price-line.price-orig{
    font-size:.85rem;
    color:#dc2626;
}

.product-actions{
    margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
}
.qty-input{ width:80px; text-align:center; }

/* =========================================================
   BUTTONS / CTAs
========================================================= */
.btn-brand{ background:var(--brand); border-color:var(--brand) }
.btn-brand:hover{ background:var(--brand-2); border-color:var(--brand-2) }
.btn-outline-amber{
    color:#b45309;
    border-color:rgba(234,179,8,.6);
    background:rgba(253,230,138,.15);
}
.btn-outline-amber:hover{
    color:#92400e;
    border-color:rgba(217,119,6,.8);
    background:rgba(251,191,36,.25);
}

/* =========================================================
   NAV USER MENU
========================================================= */
.user-menu-toggle{
    gap:.65rem;
}
.user-menu-toggle .user-initial{
    width:36px;
    height:36px;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(var(--brand-rgb),1),rgba(59,130,246,.7));
    color:#fff;
    font-size:1.1rem;
    box-shadow:0 8px 24px rgba(15,23,42,.15);
}
.user-menu-toggle .user-initial i{
    line-height:1;
}
.user-menu{
    min-width:280px;
    border-radius:1rem;
    overflow:hidden;
}
.user-menu__header{
    padding:1.1rem 1.25rem;
    background:linear-gradient(135deg,#f8fafc,#ecfdf5);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}
.user-menu__title{
    font-weight:700;
    font-size:1rem;
    color:#0f172a;
}
.user-menu__subtitle{
    font-size:.85rem;
    color:rgba(71,85,105,.9);
}
.user-menu__body{
    padding:.5rem;
    display:flex;
    flex-direction:column;
    gap:.35rem;
}
.user-menu__item{
    display:flex;
    gap:.75rem;
    padding:.8rem .9rem;
    border-radius:.9rem;
    text-decoration:none;
    color:inherit;
    transition:background .2s, transform .2s;
}
.user-menu__item:hover{
    background:#f8fafc;
    transform:translateX(2px);
}
.user-menu__icon{
    width:36px;
    height:36px;
    border-radius:.9rem;
    background:rgba(var(--brand-rgb),.12);
    color:var(--brand);
    display:grid;
    place-items:center;
    font-size:1.1rem;
    flex:0 0 auto;
}
.user-menu__item-title{
    font-weight:600;
    font-size:.95rem;
    color:#0f172a;
}
.user-menu__item-sub{
    font-size:.8rem;
    color:var(--muted);
}
.user-menu__footer{
    padding:1rem 1.25rem;
    border-top:1px solid rgba(148,163,184,.2);
    background:#fff;
}

/* =========================================================
   PROFILE PAGE
========================================================= */
.profile-hero{
    background:linear-gradient(135deg,#f1f5f9,#ecfdf5);
    padding:2.4rem 0 2rem;
}
.profile-hero__card{
    background:#fff;
    border-radius:1.1rem;
    padding:1.65rem 1.9rem;
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
    position:relative;
    box-shadow:0 12px 28px rgba(15,23,42,.07);
}
.profile-hero__avatar{
    width:56px;
    height:56px;
    border-radius:1.1rem;
    background:linear-gradient(155deg,rgba(var(--brand-rgb),1),rgba(34,197,94,.8),rgba(59,130,246,.65));
    color:#fff;
    font-size:1.45rem;
    display:grid;
    place-items:center;
    font-weight:700;
}
.profile-hero__content{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.profile-hero__tag{
    font-weight:600;
    color:#0f172a;
}
.profile-hero__title{
    font-size:1.65rem;
    font-weight:700;
    margin:0;
    color:#0f172a;
}
.profile-hero__subtitle{
    margin:0;
    font-size:1rem;
    color:var(--muted);
}
.profile-hero__meta{
    display:flex;
    flex-wrap:wrap;
    gap:.85rem 1.4rem;
}
.profile-meta__label{
    display:block;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:rgba(100,116,139,.8);
}
.profile-meta__value{
    font-size:1rem;
    font-weight:600;
    color:#0f172a;
}
.profile-hero__status{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.4rem;
}

.profile-section{
    background:#fff;
    padding:2rem 0 5.5rem;
}
.profile-card{
    background:#fff;
    border-radius:1.05rem;
    border:1px solid rgba(148,163,184,.14);
    box-shadow:0 10px 22px rgba(15,23,42,.06);
    display:flex;
    flex-direction:column;
    height:100%;
}
.profile-card--highlight{
    border-color:rgba(var(--brand-rgb),.16);
    box-shadow:0 16px 34px rgba(15,23,42,.08);
    background:linear-gradient(135deg,rgba(248,250,252,1),rgba(240,253,244,.9));
}
.profile-card__header{
    padding:1.3rem 1.45rem 1.1rem;
    display:flex;
    align-items:center;
    gap:1rem;
    border-bottom:1px solid rgba(148,163,184,.16);
}
.profile-card__icon{
    width:38px;
    height:38px;
    border-radius:.9rem;
    display:grid;
    place-items:center;
    font-size:1.1rem;
}
.profile-card__title{
    margin:0;
    font-size:1.1rem;
    font-weight:700;
    color:#0f172a;
}
.profile-card__subtitle{
    margin:0;
    font-size:.9rem;
    color:var(--muted);
}
.profile-card__body{
    padding:1.2rem 1.45rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.profile-card__footer{
    padding:.9rem 1.45rem;
    border-top:1px solid rgba(148,163,184,.16);
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
    background:rgba(248,250,252,.8);
}
.profile-detail{
    display:flex;
    flex-direction:column;
    gap:.35rem;
}
.profile-detail__label{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(100,116,139,.9);
}
.profile-detail__value{
    font-size:.9rem;
    font-weight:600;
    color:#0f172a;
}
.profile-detail__value a{
    color:inherit;
    text-decoration:none;
}
.profile-detail__value a:hover{
    text-decoration:underline;
}

.profile-action-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}
.profile-action-list li{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    padding-bottom:.9rem;
    border-bottom:1px solid rgba(148,163,184,.18);
}
.profile-action-list li:last-child{
    border-bottom:0;
    padding-bottom:0;
}
.profile-action-list h3{
    margin:0 0 .4rem;
    font-size:.98rem;
    font-weight:700;
    color:#0f172a;
}
.profile-action-list p{
    margin:0;
    color:var(--muted);
    font-size:.86rem;
}

@media (max-width: 991.98px){
    .profile-hero{
        padding:2.25rem 0 2rem;
    }
    .profile-hero__card{
        flex-direction:column;
        align-items:flex-start;
        gap:1.5rem;
    }
    .profile-hero__status{
        flex-direction:row;
        gap:.6rem;
    }
}
@media (max-width: 575.98px){
    .profile-hero__card{
        padding:2rem 1.75rem;
    }
    .profile-hero__meta{
        gap:1rem;
    }
    .profile-action-list li{
        flex-direction:column;
        align-items:flex-start;
    }
.profile-card__footer{
        flex-direction:column;
        align-items:stretch;
    }
}

/* =========================================================
   PROFILE PAGE (NEW LAYOUT)
========================================================= */
.profile-page{
    background:#f8fafc;
}
.profile-breadcrumb a{ text-decoration:none; }
.profile-summary{ border-radius:1rem; }
.profile-summary__avatar{
    width:56px; height:56px;
    border-radius:1rem;
    background:linear-gradient(135deg,rgba(var(--brand-rgb),1),rgba(59,130,246,.7));
    color:#fff; display:grid; place-items:center;
    font-weight:700; font-size:1.4rem;
}
.profile-summary__label{
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(71,85,105,.8);
}
.profile-summary__title{
    font-size:1.5rem;
    font-weight:700;
    margin:0;
    color:#0f172a;
}
.profile-summary__meta .badge{
    font-weight:500;
}

.profile-tile{
    border-radius:1rem;
}
.profile-tile__header{
    display:flex;
    align-items:center;
    gap:.8rem;
}
.profile-tile__icon{
    width:38px; height:38px;
    border-radius:.9rem;
    display:grid; place-items:center;
    font-size:1.1rem;
}
.profile-tile__title{
    font-size:1.05rem;
    font-weight:700;
    margin:0;
    color:#0f172a;
}
.profile-tile__subtitle{
    margin:0;
    font-size:.88rem;
    color:var(--muted);
}
.profile-tile__list{
    margin:0;
}
.profile-tile__list div{
    margin-bottom:1rem;
}
.profile-tile__list div:last-child{
    margin-bottom:0;
}
.profile-tile__list dt{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(100,116,139,.9);
}
.profile-tile__list dd{
    margin:0;
    font-size:.92rem;
    font-weight:600;
    color:#0f172a;
}
.profile-tile__list a{
    text-decoration:none;
}
.profile-tile__list a:hover{
    text-decoration:underline;
}

.profile-field{
    background:#fff;
    padding:1rem;
    border:1px solid rgba(148,163,184,.16);
    border-radius:.9rem;
    height:100%;
}
.profile-field__label{
    display:block;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(100,116,139,.9);
}
.profile-field__value{
    font-size:.98rem;
    font-weight:600;
    color:#0f172a;
    margin-top:.35rem;
}
.profile-note{
    background:#f1f5f9;
    border-radius:.85rem;
    padding:.85rem 1rem;
    font-size:.85rem;
    color:var(--muted);
}
.profile-order-stats{
    display:flex;
    gap:1.5rem;
}
.profile-order-stats > div{
    display:flex;
    flex-direction:column;
    gap:.25rem;
}
.profile-orders-table th{
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(100,116,139,.9);
}
.profile-orders-table td{
    font-size:.9rem;
    color:#0f172a;
}

.profile-actions{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:1.2rem;
}
.profile-actions li{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    border-bottom:1px solid rgba(148,163,184,.18);
    padding-bottom:1rem;
}
.profile-actions li:last-child{
    border-bottom:0;
    padding-bottom:0;
}
.profile-actions h3{
    margin:0 0 .4rem;
    font-size:.98rem;
    font-weight:700;
    color:#0f172a;
}
.profile-actions p{
    margin:0;
    font-size:.86rem;
    color:var(--muted);
}

@media (max-width: 991.98px){
    .profile-summary__title{ font-size:1.35rem; }
    .profile-order-stats{flex-direction:column;}
}
@media (max-width: 575.98px){
    .profile-actions li{ flex-direction:column; align-items:flex-start; }
    .profile-summary__avatar{ width:50px; height:50px; }
}

.profile-pagination .page-link{
    border-radius:.75rem;
    border:1px solid rgba(148,163,184,.2);
    background:#fff;
    color:#0f172a;
    box-shadow:0 6px 14px rgba(15,23,42,.06);
    transition:all .2s ease;
}
.profile-pagination .page-link:hover{
    border-color:rgba(var(--brand-rgb),.4);
    color:var(--brand);
}
.profile-pagination .page-item.active .page-link{
    background:var(--brand);
    color:#fff;
    border-color:var(--brand);
    box-shadow:0 8px 16px rgba(var(--brand-rgb),.25);
}
.profile-pagination .page-item.disabled .page-link{
    opacity:.6;
    box-shadow:none;
}

.profile-related-list{
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.profile-related-item{
    border:1px solid rgba(148,163,184,.18);
    border-radius:.9rem;
    padding:1rem;
    background:#fff;
}



/* =========================================================
   PAGINATION / PAGER
========================================================= */
.pager-wrap.top{
    position:static; top:auto; z-index:101; background:#fff;
    border:1px solid var(--border); border-radius:var(--radius);
    padding:.5rem .75rem; margin-bottom:.75rem;
}
.pager-wrap.bottom{
    border-top:1px solid var(--border);
    margin-top:1rem; padding-top:.75rem;
}
.pagination .page-link{ border-radius:var(--radius-sm); }
.pagination .page-item.active .page-link{
    background-color:var(--brand);
    border-color:var(--brand);
}

/* =========================================================
   MEGA MENU
========================================================= */
.mega-menu-item{
    padding:0;
    min-width:860px;
    max-width:1180px;
}
.mega-grid{
    display:grid;
    grid-template-columns:310px minmax(0,1fr);
    gap:1.5rem;
    padding:1.75rem;
    background:#fff;
    border-radius:1.25rem;
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
}
.mega-sidebar{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem;
    border-radius:1rem;
    background:linear-gradient(160deg,rgba(var(--brand-rgb),.12),rgba(var(--brand-rgb),0));
    border:1px solid rgba(var(--brand-rgb),.12);
}
.mega-sidebar-header{
    display:flex;
    align-items:center;
    gap:.75rem;
}
.mega-sidebar-header .icon-circle{
    width:42px;
    height:42px;
    border-radius:999px;
    background:var(--brand);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.1rem;
}
.mega-sidebar-header .title{
    margin:0;
    font-weight:700;
    font-size:1rem;
}
.mega-sidebar-header .subtitle{
    margin:0;
    font-size:.8rem;
    color:var(--muted);
}
.mega-root-list{
    display:flex;
    flex-direction:column;
    gap:.35rem;
    max-height:420px;
    overflow-y:auto;
    padding-right:.3rem;
}
.mega-root-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.65rem .75rem;
    border-radius:.85rem;
    text-decoration:none;
    color:#111;
    border:1px solid transparent;
    transition:all .18s ease;
    font-weight:600;
}
.mega-root-link .label{
    display:flex;
    align-items:center;
    gap:.55rem;
    flex:1 1 auto;
}
.mega-root-link .bullet{
    width:10px;
    height:10px;
    border-radius:999px;
    background:rgba(var(--brand-rgb),.2);
    border:2px solid transparent;
    transition:all .18s ease;
}
.mega-root-link i{ opacity:.5; transition:transform .18s ease, opacity .18s ease; }
.mega-root-link:hover{
    background:rgba(var(--brand-rgb),.08);
    border-color:rgba(var(--brand-rgb),.25);
}
.mega-root-link:hover .bullet{ border-color:var(--brand); }
.mega-root-link.active{
    background:#fff;
    border-color:var(--brand);
    box-shadow:0 8px 18px rgba(var(--brand-rgb),.15);
    color:#0f172a;
}
.mega-root-link.active .bullet{
    background:var(--brand);
    border-color:var(--brand);
}
.mega-root-link.active i{
    opacity:1;
    transform:translateX(4px);
}
.mega-sidebar-footer .btn{
    font-weight:600;
}
.mega-content{
    position:relative;
    min-height:380px;
}
.mega-subpanel{
    display:none;
    flex-direction:column;
    gap:1rem;
}
.mega-subpanel.show{ display:flex; }
.mega-subpanel.d-none{ display:none!important; }
.mega-subpanel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding-bottom:.5rem;
    border-bottom:1px solid rgba(148,163,184,.2);
}
.mega-subpanel-header h3{
    font-weight:700;
}
.mega-subgrid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:.85rem;
}
.mega-subcard{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.65rem .75rem;
    border-radius:.9rem;
    background:#f8fafc;
    border:1px solid transparent;
    text-decoration:none;
    color:inherit;
    transition:all .18s ease;
}
.mega-subcard:hover{
    border-color:rgba(var(--brand-rgb),.35);
    background:#fff;
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}
.mega-subcard .thumb{
    width:42px;
    height:42px;
    border-radius:.8rem;
    background:#fff;
    overflow:hidden;
    flex:0 0 auto;
    box-shadow:0 4px 12px rgba(15,23,42,.08);
}
.mega-subcard .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.mega-subcard .info{
    display:flex;
    flex-direction:column;
    gap:.1rem;
    overflow:hidden;
}
.mega-subcard .name{
    font-weight:600;
    font-size:.95rem;
}
.mega-subcard .cta{
    color:var(--muted);
}
.mega-subpanel-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    padding:2.5rem 1rem;
    border-radius:1rem;
    background:rgba(15,23,42,.04);
    color:var(--muted);
    font-size:.9rem;
}
.mega-subpanel-empty i{ font-size:1.5rem; }

.mega-dropdown .dropdown-menu{
    border-radius:1.5rem;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 24px 60px rgba(15,23,42,.18);
    padding:0;
    background:#f8fafc;
    width:auto;
    min-width:860px;
    max-width:1180px;
}

/* =========================================================
   CATEGORY PAGE
========================================================= */
.category-hero{
    padding:1.75rem 2rem;
    border-radius:1.25rem;
    background:linear-gradient(140deg,rgba(var(--brand-rgb),.12),rgba(59,130,246,.08));
    border:1px solid rgba(148,163,184,.25);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.category-hero__breadcrumbs{
    display:flex;
    align-items:center;
    gap:.65rem;
    font-size:.85rem;
    margin-bottom:1rem;
    flex-wrap:wrap;
}
.category-hero__breadcrumbs .crumb{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:#0f172a;
    font-weight:600;
    text-decoration:none;
}
.category-hero__breadcrumbs .crumb i{
    font-size:1rem;
    color:var(--brand);
}
.category-hero__breadcrumbs .crumb.current{
    color:#2563eb;
}
.category-hero__breadcrumbs .separator{
    color:rgba(15,23,42,.5);
}
.category-hero__body{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.category-hero__title{
    font-size:clamp(1.6rem,2vw + .6rem,2.4rem);
    font-weight:800;
    margin-bottom:.5rem;
    letter-spacing:-.01em;
}
.category-hero__meta{
    font-size:.9rem;
}
.category-hero__cta .badge{
    font-size:.8rem;
    background:rgba(34,197,94,.12);
    color:#166534;
}
.category-section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.category-section-header .title{
    font-weight:700;
    font-size:1.1rem;
}
.category-section-header .subtitle{
    font-size:.85rem;
}
.category-subsection{
    padding:1.5rem;
    border-radius:1.1rem;
    background:#fff;
    border:1px solid rgba(148,163,184,.2);
    box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.category-subgrid{
    margin-top:1.25rem;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:1rem;
}
.category-subcard{
    display:flex;
    gap:.75rem;
    align-items:center;
    padding:.85rem;
    border-radius:.95rem;
    border:1px solid rgba(148,163,184,.2);
    background:linear-gradient(160deg,#fff,rgba(248,250,252,.9));
    text-decoration:none;
    color:inherit;
    transition:all .18s ease;
}
.category-subcard:hover{
    border-color:rgba(var(--brand-rgb),.4);
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}
.category-subcard .thumb{
    width:48px;
    height:48px;
    border-radius:1rem;
    overflow:hidden;
    background:#fff;
    flex:0 0 auto;
    box-shadow:0 4px 14px rgba(15,23,42,.08);
}
.category-subcard .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.category-subcard .info{
    display:flex;
    flex-direction:column;
    gap:.1rem;
    overflow:hidden;
}
.category-subcard .name{
    font-weight:600;
}
.category-subcard .cta{
    font-size:.78rem;
}
.category-pagination{
    display:flex;
    justify-content:flex-end;
}
.category-pagination .pager-wrap{
    margin-bottom:0;
}

@media (max-width: 767px){
    .category-hero{
        padding:1.25rem 1.5rem;
    }
    .category-subsection{
        padding:1.25rem;
    }
    .category-subgrid{
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    }
    .category-pagination{
        justify-content:center;
    }
}

/* =========================================================
   HOME PAGE
========================================================= */
.home-hero{
    background:radial-gradient(circle at top left, rgba(var(--brand-rgb),.15), transparent 55%), linear-gradient(135deg, rgba(59,130,246,.18), rgba(var(--brand-rgb),.08));
    color:#0f172a;
}
.home-hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,36%);
    gap:2rem;
    align-items:center;
}
.home-hero__badge{
    font-weight:600;
    border-radius:999px;
    padding:.45rem .85rem;
    background:rgba(var(--brand-rgb),.15)!important;
    color:#166534!important;
}
.home-hero__title{
    font-size:clamp(2.2rem,2.4vw + 1.4rem,3rem);
    font-weight:800;
    margin:1rem 0 .75rem;
    letter-spacing:-.015em;
}
.home-hero__title .accent{
    color:#2563eb;
}
.home-hero__subtitle{
    font-size:1.05rem;
    max-width:520px;
    color:#1f2937;
}
.home-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin:1.5rem 0;
}
.home-hero__stats{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
}
.home-hero__stats .stat{
    display:flex;
    flex-direction:column;
    gap:.25rem;
}
.home-hero__stats .stat__value{
    font-size:1.75rem;
    font-weight:800;
}
.home-hero__stats .stat__label{
    font-size:.85rem;
    color:#475569;
}
.home-hero__visual{
    justify-content:flex-end;
}
.home-hero__card{
    border-radius:1.5rem;
    overflow:hidden;
    background:#fff;
    display:flex;
    flex-direction:column;
    max-width:420px;
}
.home-hero__card-media{
    padding:1.5rem;
    background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(16,185,129,.12));
    display:flex;
    align-items:center;
    justify-content:center;
}
.home-hero__card-media img{
    width:100%;
    height:auto;
    max-height:280px;
    object-fit:contain;
}
.home-hero__card-info{
    padding:1.25rem;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.home-hero__card-info .tag{
    display:inline-block;
    background:rgba(56,189,248,.15);
    color:#0369a1;
    font-weight:700;
    padding:.35rem .75rem;
    border-radius:999px;
    font-size:.75rem;
}

.home-feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1rem;
}
.home-feature{
    border-radius:1rem;
   background:#fff;
    border:1px solid rgba(148,163,184,.25);
    padding:1.25rem;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
    display:flex;
    flex-direction:column;
    gap:.6rem;
}
.home-favorite-card{
    border-radius:1.5rem;
    background:linear-gradient(135deg, rgba(253,230,138,.45), rgba(255,247,237,.92));
    border:1px solid rgba(250,204,21,.25);
    box-shadow:0 22px 40px rgba(245,158,11,.18);
}
.home-favorite-card .card-body{
    padding:2rem;
}
.favorite-card__icon{
    width:64px;
    height:64px;
    font-size:1.55rem;
    box-shadow:0 16px 32px rgba(249,115,22,.28);
}
@media (max-width: 991.98px){
    .home-favorite-card .card-body{
        padding:1.5rem;
    }
    .favorite-card__icon{
        width:52px;
        height:52px;
        font-size:1.35rem;
    }
}
.home-feature h3{
    font-size:1rem;
    font-weight:700;
    margin-bottom:0;
}
.home-feature p{
    font-size:.9rem;
    color:#475569;
    margin-bottom:0;
}
.home-feature .icon-circle{
    width:46px;
    height:46px;
    border-radius:14px;
    background:rgba(var(--brand-rgb),.1);
    color:var(--brand);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
}

.home-section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:1.25rem;
}
.home-section-header .title{
    font-size:1.25rem;
    font-weight:700;
}
.home-section-header .subtitle{
    font-size:.88rem;
}

.home-cta__box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    padding:2.25rem;
    border-radius:1.25rem;
    background:linear-gradient(130deg,rgba(var(--brand-rgb),.9),rgba(13,148,136,.85));
    color:#e0f2f1;
    box-shadow:0 18px 40px rgba(13,148,136,.28);
}
.home-cta__box h2{
    font-weight:800;
    margin-bottom:.35rem;
}
.home-cta__box p{
    color:#d1fae5;
}

.home-faq{
    box-shadow:0 14px 30px rgba(15,23,42,.08);
}

@media (max-width:1399.98px){
    .home-hero__grid{
        gap:1.5rem;
    }
    .home-hero__title{
        font-size:clamp(2rem,1.8vw + 1.3rem,2.6rem);
    }
    .home-hero__subtitle{
        font-size:1rem;
    }
    .home-hero__actions{
        gap:.85rem;
    }
    .home-hero__stats{
        gap:1.2rem;
    }
    .home-hero__stats .stat__value{
        font-size:1.55rem;
    }
    .home-hero__card-media img{
        max-height:240px;
    }
    .home-feature{
        padding:1.15rem;
    }
    .home-favorite-card .card-body{
        padding:1.75rem;
    }
    .cat-chip{
        min-width:110px;
        max-width:150px;
        height:110px;
    }
    .cat-chip--home{
        min-width:180px;
        padding:.95rem 1.1rem;
    }
    .cat-chip--home .cat-chip__thumb{
        width:56px;
        height:56px;
    }
    .popular-card{
        padding:1.35rem 1.1rem;
    }
    .popular-card__media{
        min-height:150px;
        padding:1rem;
    }
    .popular-card__thumb{
        max-height:120px;
    }
}

@media (max-width: 991px){
    .home-hero__grid{
        grid-template-columns:minmax(0,1fr);
    }
    .home-hero__card-media img{
        max-height:200px;
    }
}

@media (max-width: 767px){
    .home-hero{
        padding:2.5rem 0 2rem;
    }
    .home-hero__actions{
        flex-direction:column;
        align-items:stretch;
    }
    .home-hero__stats{
        gap:1rem;
    }
    .home-hero__stats .stat__value{
        font-size:1.4rem;
    }
    .home-cta__box{
        align-items:flex-start;
    }
    .home-feature-grid{
        grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    }
}

/* =========================================================
   FOOTER / MISC
========================================================= */
footer{ border-top:1px solid var(--border); background:#fff }

/* =========================================================
   LOGIN MODAL
========================================================= */
.login-modal .modal-content{
    border-radius:1.5rem;
    box-shadow:0 28px 60px rgba(15,23,42,.18);
}
.login-modal__content{
    background:#fff;
}
.login-modal__hero{
    background:linear-gradient(140deg,rgba(var(--brand-rgb),1),rgba(59,130,246,.85));
    position:relative;
    color:#f8fafc;
    padding:2.75rem 2.5rem;
    overflow:hidden;
}
.login-modal__hero::after{
    content:'';
    position:absolute;
    inset:auto -80px -120px auto;
    width:320px;
    height:320px;
    background:radial-gradient(circle at center,rgba(255,255,255,.18),transparent 65%);
    transform:rotate(12deg);
}
.login-modal__hero-inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:1.4rem;
}
.login-modal__tag{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.35rem .85rem;
    border-radius:999px;
    background:rgba(248,250,252,.22);
    font-size:.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.login-modal__hero-title{
    font-size:1.85rem;
    font-weight:700;
    line-height:1.15;
    margin:0;
}
.login-modal__hero-text{
    font-size:.95rem;
    color:rgba(248,250,252,.85);
    margin:0;
}
.login-modal__benefits{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    font-size:.9rem;
}
.login-modal__benefits i{
    margin-right:.5rem;
    font-size:1rem;
    vertical-align:middle;
}
.login-modal__quote{
    margin-top:auto;
    padding:1.25rem 1.1rem;
    border-radius:1rem;
    background:rgba(248,250,252,.18);
    display:flex;
    flex-direction:column;
    gap:.5rem;
    font-size:.85rem;
}
.login-modal__quote i{
    font-size:1.4rem;
    opacity:.8;
}
.login-modal__quote span{
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:.72rem;
    opacity:.85;
}
.login-modal__main{
    padding:2.75rem 2.5rem 2.25rem;
    background:#fff;
    min-height:100%;
    display:flex;
    flex-direction:column;
    gap:1.75rem;
}
.login-modal__header{
    margin-bottom:1.75rem;
}
.login-modal__title{
    font-weight:700;
    font-size:1.65rem;
    margin:0 0 .35rem;
    color:#0f172a;
}
.login-modal__subtitle{
    margin:0;
    font-size:.95rem;
    color:var(--muted);
}
.login-modal__close{
    position:absolute;
    top:1.25rem;
    right:1.25rem;
    z-index:2;
    background:#fff;
    border-radius:999px;
    box-shadow:0 6px 18px rgba(15,23,42,.12);
    opacity:1;
}
.login-modal__close:focus-visible{
    outline:2px solid rgba(59,130,246,.65);
    outline-offset:2px;
}
.login-modal__form{
    flex:1 1 auto;
    display:flex;
}
.login-modal__form form{
    display:flex;
    flex-direction:column;
    width:100%;
}
.login-modal__form .form-floating>.form-control{
    border-radius:.9rem;
    border:1px solid rgba(148,163,184,.28);
    background:#f8fafc;
    transition:border-color .2s, box-shadow .2s, background .2s;
}
.login-modal__form .form-floating>.form-control:focus{
    border-color:rgba(59,130,246,.65);
    background:#fff;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.login-modal__form .form-floating>label{
    color:rgba(71,85,105,.75);
}
.login-modal__toggle{
    position:absolute;
    top:50%;
    right:.65rem;
    transform:translateY(-50%);
    color:rgba(71,85,105,.65);
    text-decoration:none;
    font-size:1rem;
}
.login-modal__toggle:hover,
.login-modal__toggle.is-active{
    color:rgba(15,23,42,.85);
}
.login-modal__message .alert{
    border-radius:.85rem;
    border:0;
    box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.login-modal__footer{
    margin-top:auto;
    text-align:center;
}
.login-modal__footer a{
    color:var(--brand);
}

@media (max-width: 991.98px){
    .login-modal .modal-content{
        border-radius:1.25rem;
    }
    .login-modal__main{
        padding:2.25rem 1.75rem 2rem;
    }
    .login-modal__title{
        font-size:1.45rem;
    }
    .login-modal__close{
        top:.85rem;
        right:.85rem;
    }
}
@media (max-width: 575.98px){
    .login-modal .modal-dialog{
        margin:1.5rem auto;
    }
    .login-modal__main{
        padding:2rem 1.5rem 1.75rem;
    }
}

/* =========================================================
   ACCESS SELECTOR MODAL
========================================================= */
.access-modal .modal-content{
    border-radius:1.5rem;
    background:#fff;
}
.access-modal__aside{
    background:linear-gradient(145deg,rgba(var(--brand-rgb),1),rgba(16,185,129,.85),rgba(59,130,246,.75));
    color:#f8fafc;
    padding:2.75rem 2.5rem;
    position:relative;
    overflow:hidden;
}
.access-modal__aside::after{
    content:'';
    position:absolute;
    inset:auto -90px -120px auto;
    width:320px;
    height:320px;
    background:radial-gradient(circle at center,rgba(255,255,255,.22),transparent 70%);
    transform:rotate(14deg);
}
.access-modal__aside-inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:1.4rem;
    height:100%;
}
.access-modal__tag{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.4rem .9rem;
    border-radius:999px;
    background:rgba(248,250,252,.2);
    font-size:.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.12em;
}
.access-modal__title{
    font-size:1.8rem;
    font-weight:700;
    line-height:1.15;
    margin:0;
}
.access-modal__text{
    margin:0;
    font-size:.95rem;
    color:rgba(248,250,252,.85);
}
.access-modal__list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    font-size:.9rem;
}
.access-modal__list li{
    display:flex;
    align-items:center;
    gap:.6rem;
}
.access-modal__list i{
    font-size:1.1rem;
    opacity:.9;
}
.access-modal__hint{
    margin-top:auto;
    padding:1.1rem 1rem;
    border-radius:1rem;
    background:rgba(248,250,252,.22);
    display:flex;
    gap:.65rem;
    font-size:.85rem;
    line-height:1.5;
}
.access-modal__hint i{
    font-size:1.2rem;
    flex:0 0 auto;
    margin-top:.1rem;
}
.access-modal__main{
    padding:2.75rem 2.5rem 2.25rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    min-height:100%;
    background:#fff;
}
.access-modal__close{
    position:absolute;
    top:1.25rem;
    right:1.25rem;
    z-index:2;
    background:#fff;
    border-radius:999px;
    box-shadow:0 6px 18px rgba(15,23,42,.12);
    opacity:1;
}
.access-modal__close:focus-visible{
    outline:2px solid rgba(59,130,246,.65);
    outline-offset:2px;
}
.access-modal__header p{
    font-size:.95rem;
}
.access-modal__status .badge{
    padding:.55rem .9rem;
    font-size:.82rem;
    font-weight:600;
    background:#f1f5f9;
    color:#0f172a;
}
.access-modal__status .badge.text-bg-success{
    background:rgba(34,197,94,.18) !important;
    color:#166534 !important;
}
.access-modal__status .badge.text-bg-secondary{
    background:rgba(100,116,139,.16) !important;
    color:#334155 !important;
}
.access-modal__body .form-select{
    border-radius:1rem;
    padding:.75rem 1rem;
    border:1px solid rgba(148,163,184,.28);
    transition:border-color .2s, box-shadow .2s;
}
.access-modal__body .form-select:focus{
    border-color:rgba(59,130,246,.65);
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.access-modal__body .form-text{
    color:var(--muted);
}
.access-modal__body .form-switch .form-check-input{
    width:3rem;
    height:1.5rem;
}
.access-modal__body .form-switch .form-check-input:focus{
    box-shadow:0 0 0 .25rem rgba(59,130,246,.15);
}
.access-modal__body .form-switch .form-check-input:checked{
    background-color:var(--brand);
    border-color:var(--brand);
}
.access-modal__loading p{
    font-size:.95rem;
}
.access-modal__empty{
    padding:3rem 1.5rem;
}
.access-modal__empty i{
    color:#c2410c;
}

@media (max-width: 991.98px){
    .access-modal .modal-content{
        border-radius:1.25rem;
    }
    .access-modal__main{
        padding:2.25rem 1.75rem 2rem;
    }
    .access-modal__close{
        top:.85rem;
        right:.85rem;
    }
}
@media (max-width: 575.98px){
    .access-modal .modal-dialog{
        margin:1.5rem auto;
    }
    .access-modal__main{
        padding:2rem 1.5rem 1.75rem;
    }
    .access-modal__status .badge{
        width:100%;
        justify-content:center;
    }
}

/* =========================================================
   HELP PAGES
========================================================= */
.section-hero-lite{
    padding:4rem 0 3rem;
    background:linear-gradient(140deg,#f8fafc 0%,#f1f5f9 60%,#ffffff 100%);
}
.section-hero-lite .badge{
    font-weight:600;
}
.help-card{
    border-radius:1.5rem;
    background:#fff;
}
.help-card .form-control{
    border-radius:.9rem;
    border:1px solid rgba(148,163,184,.28);
    transition:border-color .2s, box-shadow .2s;
}
.help-card .form-control:focus{
    border-color:rgba(var(--brand-rgb),.55);
    box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15);
}
.help-form-note{
    line-height:1.5;
}
.help-info-tile{
    background:#fff;
    border-radius:1.25rem;
    border:1px solid rgba(148,163,184,.18);
    padding:1.75rem 1.6rem;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
    height:100%;
    display:flex;
    flex-direction:column;
    gap:.75rem;
}
.help-info-tile h2{
    font-size:1.1rem;
    font-weight:700;
    margin:0;
}
.help-info-tile p{
    margin:0;
    color:var(--muted);
}
.help-info-icon{
    width:56px;
    height:56px;
    border-radius:1.25rem;
    display:grid;
    place-items:center;
    font-size:1.4rem;
}
.help-bullet-list{
    font-size:.95rem;
    color:#0f172a;
}
.help-bullet-list li{
    display:flex;
    align-items:center;
    gap:.65rem;
    background:#fff;
    border-radius:999px;
    padding:.55rem 1rem;
    box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.help-bullet-list i{
    color:var(--brand);
    font-size:1.1rem;
}
.section-hero-lite + section{
    background:#fff;
}

@media (max-width: 991.98px){
    .section-hero-lite{
        padding:3.5rem 0 3rem;
    }
}
@media (max-width: 575.98px){
    .section-hero-lite{
        padding:2.75rem 0 2.5rem;
    }
    .help-bullet-list{
        gap:.75rem;
    }
    .help-bullet-list li{
        width:100%;
        justify-content:flex-start;
    }
}

.mini-skel{
    height:140px;
    background:linear-gradient(90deg,#f0f0f0,#fafafa,#f0f0f0);
    background-size:200% 100%;
    animation:sh 1.2s linear infinite
}
.modal .mini-skel { height: auto; }
.sticky-cart{ position:fixed; right:1rem; bottom:1rem; z-index:1030 }
.sticky-cart .btn{ border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.15) }
.pulse { transform: scale(1.03); transition: transform .2s; }
.pulse:where(:not(:active)) { transform: scale(1); }

/* =========================================================
   MEDIA QUERIES
========================================================= */
@media (max-width: 991.98px){
    .search-dropdown{ left:-.5rem; right:-.5rem; border-radius:var(--radius); }
    .mega-dropdown .dropdown-menu{
        min-width:100vw; max-width:100vw;
        border-radius:0; border-left:0; border-right:0;
        padding:0;
    }
    .mega-menu-item{
        min-width:auto;
        max-width:none;
    }
    .mega-grid{
        grid-template-columns:1fr;
        padding:1.25rem 1rem;
        gap:1rem;
    }
    .mega-sidebar{
        background:#fff;
        border:1px solid rgba(148,163,184,.25);
    }
    .mega-root-list{
        max-height:220px;
        border-radius:1rem;
        border:1px solid rgba(148,163,184,.2);
        padding:.35rem .35rem .35rem .5rem;
        background:#f8fafc;
    }
    .mega-content{
        min-height:auto;
    }
    .mega-subpanel{
        padding:.5rem 0 0;
        gap:.75rem;
    }
    .mega-subgrid{
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:.75rem;
    }
    .mega-subcard{
        padding:.65rem .75rem;
    }
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes sh{
    0%{background-position:0 0}
    100%{background-position:200% 0}
}


/* STICKY CART – SIMPLE LINES */
.sc-item{ padding:.6rem 0; border-bottom:1px solid var(--border); }
.sc-item:last-child{ border-bottom-color:transparent; }

.sc-row{
    display:grid; grid-template-columns: 1fr auto auto;
    align-items:center; gap:.6rem; padding:.15rem 0;
}
.sc-top{
    grid-template-columns: 1fr auto; padding-bottom:.2rem;
}
.sc-name{ font-weight:700; line-height:1.2; font-size:.95rem; }
.sc-ctrls{ display:flex; align-items:center; }
.sc-ctrls .btn-group .btn{ min-width:2.1rem; padding:.25rem .5rem; }
.sc-ctrls [data-cart-qty]{ cursor:default; }

.sc-left{ color:var(--muted); }
.sc-mid, .sc-right{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.sc-unit{ color:var(--muted); margin-left:.25rem; }
.sc-gross{ color:#15803d; font-weight:800; }
@media (prefers-color-scheme:dark){ .sc-gross{ color:#22c55e; } }

@media (max-width:576px){
    .sc-row{ grid-template-columns: 1fr auto; }
    .sc-left{ grid-column: 1 / -1; }
}
.search-dropdown .avatar{
    width:48px;
    height:48px;
    border-radius:12px;
    overflow:hidden;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    box-shadow:0 4px 12px rgba(15,23,42,.08);
}
.search-dropdown .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.search-dropdown .item-info .sub .price{
    margin-left:.5rem;
    font-weight:700;
    color:var(--brand);
}

/* =========================================================
   SEASONAL THEMES & EFFECTS
========================================================= */
body.theme-winter,
body.theme-spring,
body.theme-summer,
body.theme-autumn,
body.theme-christmas{
    overflow-x:hidden;
}
body.theme-winter > *,
body.theme-spring > *,
body.theme-summer > *,
body.theme-autumn > *,
body.theme-christmas > *{
    position:relative;
    z-index:1;
}
body.theme-winter::after,
body.theme-spring::after,
body.theme-summer::after,
body.theme-autumn::after,
body.theme-christmas::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
}

body.theme-winter::before,
body.theme-winter::after{
    pointer-events:none;
    position:fixed;
    inset:0;
}
body.theme-winter::after{
    background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 45%),
               radial-gradient(circle at 80% 10%, rgba(224,242,254,.9) 0%, rgba(224,242,254,0) 40%),
               linear-gradient(180deg, rgba(14,165,233,.05) 0%, rgba(224,242,254,.9) 45%, rgba(255,255,255,.95) 100%);
    filter:hue-rotate(-5deg);
    backdrop-filter:blur(2px);
    z-index:0;
}
body.theme-winter::before{
    content:"";
    background-image:
        radial-gradient(circle, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 55%),
        radial-gradient(circle, rgba(224,242,254,.9) 0, rgba(224,242,254,0) 45%),
        radial-gradient(circle, rgba(14,165,233,.4) 0, rgba(14,165,233,0) 55%);
    background-size:120px 120px, 200px 200px, 320px 320px;
    animation:snow-fall 26s linear infinite;
    opacity:.45;
    z-index:0;
}
body.theme-winter #openCart{
    position:relative;
    overflow:visible;
}
body.theme-winter #openCart::before{
    content:"";
    position:absolute;
    width:42px;
    height:42px;
    top:-46px;
    left:50%;
    transform:translateX(-50%);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='46' r='14' fill='%23e0f2fe' stroke='%230369a1' stroke-width='2'/%3E%3Ccircle cx='32' cy='28' r='10' fill='%23f8fafc' stroke='%230369a1' stroke-width='2'/%3E%3Ccircle cx='28' cy='26' r='2' fill='%230369a1'/%3E%3Ccircle cx='36' cy='26' r='2' fill='%230369a1'/%3E%3Cpath d='M32 30 L40 32' stroke='%23f97316' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M25 20 L19 16' stroke='%230369a1' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M39 20 L45 16' stroke='%230369a1' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='34' r='1.4' fill='%23b45309'/%3E%3Ccircle cx='32' cy='38' r='1.4' fill='%23b45309'/%3E%3Ccircle cx='32' cy='42' r='1.4' fill='%23b45309'/%3E%3C/svg%3E") no-repeat center/contain;
    animation:snowman-bob 4s ease-in-out infinite;
}

body.theme-spring::after{
    background-image:
        radial-gradient(circle, rgba(244,114,182,.4) 15%, transparent 60%),
        radial-gradient(circle, rgba(34,197,94,.25) 15%, transparent 55%),
        radial-gradient(circle, rgba(250,240,202,.22) 20%, transparent 65%);
    background-size:280px 280px, 360px 360px, 460px 460px;
    animation:petal-fall 22s linear infinite;
    opacity:.45;
}

body.theme-summer::after{
    background-image:
        radial-gradient(circle, rgba(253,224,71,.35) 20%, transparent 70%),
        radial-gradient(circle, rgba(249,115,22,.25) 15%, transparent 65%),
        radial-gradient(circle, rgba(255,255,255,.2) 10%, transparent 60%);
    background-size:260px 260px, 420px 420px, 180px 180px;
    animation:sun-glow 18s linear infinite;
    opacity:.4;
}

body.theme-autumn::after{
    background-image:
        radial-gradient(circle, rgba(180,83,9,.4) 18%, transparent 65%),
        radial-gradient(circle, rgba(234,88,12,.3) 20%, transparent 60%),
        radial-gradient(circle, rgba(250,204,21,.2) 15%, transparent 70%);
    background-size:300px 300px, 360px 360px, 500px 500px;
    animation:leaf-fall 28s linear infinite;
    opacity:.45;
}

body.theme-christmas::after{
    background-image:
        radial-gradient(circle, rgba(185,28,28,.45) 15%, transparent 60%),
        radial-gradient(circle, rgba(15,157,88,.4) 18%, transparent 65%),
        radial-gradient(circle, rgba(255,255,255,.8) 8%, transparent 55%);
    background-size:220px 220px, 340px 340px, 140px 140px;
    animation:twinkle 14s linear infinite;
    opacity:.55;
}

@keyframes snow-fall{
    0%{background-position:0 0,0 0,0 0;}
    100%{background-position:0 900px,0 600px,0 500px;}
}
@keyframes petal-fall{
    0%{background-position:0 -200px, 100px -100px, -80px -150px;}
    100%{background-position:-260px 700px, -60px 600px, -140px 650px;}
}
@keyframes sun-glow{
    0%{background-position:0 0, 0 0, 0 0;}
    50%{background-position:120px 120px, -140px 80px, 60px 60px;}
    100%{background-position:0 0, 0 0, 0 0;}
}
@keyframes leaf-fall{
    0%{background-position:0 -300px, 80px -200px, -120px -250px;}
    100%{background-position:-200px 800px, -40px 700px, -260px 750px;}
}
@keyframes twinkle{
    0%{background-position:0 0, 0 0, 0 0; opacity:.3;}
    50%{background-position:80px 120px, -60px 80px, 40px 40px; opacity:.7;}
    100%{background-position:0 0, 0 0, 0 0; opacity:.3;}
}
@keyframes snowman-bob{
    0%,100%{transform:translate(-50%,-2px);}
    50%{transform:translate(-50%,3px);}
}