/* =========================================================
   VARIABLES
========================================================= */
:root{
    --brand:#16a34a;
    --brand-2:#065f46;
    --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;
    --tile-grad:linear-gradient(135deg,#e8f5e9,#ffffff);
}

/* =========================================================
   BASE
========================================================= */
body{background:var(--bg);}
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:#e8f5e9;color:var(--brand)
}

/* =========================================================
   TOPBAR
========================================================= */
.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 }

/* 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-bottom: .25rem;
}
.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:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cat-chip--home{
    min-width:190px;
    max-width:220px;
    height:auto;
    padding:.9rem 1rem;
    background:linear-gradient(160deg,rgba(248,250,252,1),rgba(226,232,240,.8));
    border-radius:1rem;
    border:1px solid rgba(148,163,184,.25);
    display:flex;
    align-items:center;
    gap:.85rem;
    transition:all .18s ease;
    color:inherit;
}
.cat-chip--home .cat-thumb{
    width:48px;
    height:48px;
    border-radius:12px;
    object-fit:cover;
    box-shadow:0 6px 16px rgba(15,23,42,.12);
}
.cat-chip--home span{
    font-size:.9rem;
    font-weight:600;
    color:#0f172a;
    text-align:left;
}
.cat-chip--home:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(15,23,42,.12);
    border-color:rgba(37,99,235,.35);
    background:linear-gradient(155deg,rgba(219,234,254,1),rgba(224,242,254,.85));
}

/* =========================================================
   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;
    overflow:hidden; position:relative;
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.product-thumb{
    aspect-ratio:1/1; width:100%;
    object-fit:contain; background:#fff; padding:5px;
}

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

.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-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(22,163,74,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(22,163,74,.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(22,163,74,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(22,163,74,.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(22,163,74,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(22,163,74,.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(22,163,74,.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(22,163,74,.12),rgba(22,163,74,0));
    border:1px solid rgba(22,163,74,.12);
}
.mega-sidebar-header{
    display:flex;
    align-items:center;
    gap:.75rem;
}
.mega-sidebar-header .icon-circle{
    width:42px;
    height:42px;
    border-radius:999px;
    background:#16a34a;
    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(22,163,74,.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(22,163,74,.08);
    border-color:rgba(22,163,74,.25);
}
.mega-root-link:hover .bullet{ border-color:#16a34a; }
.mega-root-link.active{
    background:#fff;
    border-color:#16a34a;
    box-shadow:0 8px 18px rgba(22,163,74,.15);
    color:#0f172a;
}
.mega-root-link.active .bullet{
    background:#16a34a;
    border-color:#16a34a;
}
.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(22,163,74,.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(22,163,74,.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:#16a34a;
}
.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(22,163,74,.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(22,163,74,.15), transparent 55%), linear-gradient(135deg, rgba(59,130,246,.18), rgba(22,163,74,.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(22,163,74,.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;
}
.home-hero__card img{
    width:100%;
    height:260px;
    object-fit:cover;
}
.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-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(22,163,74,.1);
    color:#16a34a;
    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(22,163,74,.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: 991px){
    .home-hero__grid{
        grid-template-columns:minmax(0,1fr);
    }
    .home-hero__card img{
        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(22,163,74,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(22,163,74,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(22,163,74,.55);
    box-shadow:0 0 0 3px rgba(22,163,74,.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:#16a34a;
}