/* Products page: the featured-brand card under the top menu (it stays in view), the filters in a column on
   the left (wide screens only), one search box, and smaller product cards. Loaded by products.html only. */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Featured brand card (Mai-Mai): stays under the top menu while the products scroll ---- */
.page-products .products-header.has-brand-ad{position:relative;top:0;z-index:45;padding:var(--nav-height) 0 0;text-align:left;overflow:visible}
.page-products .products-header.has-brand-ad h1{animation:none;margin:-1px}
.page-products .products-header.has-brand-ad > .container{height:0}
.page-products .ad-show{animation:fadeSlideUp .7s cubic-bezier(.16,1,.3,1) .25s both}
.ads-v{position:relative;display:block;background:#fff;border-bottom:1px solid var(--border);overflow:hidden;padding:0;--edge:max(1.5rem,calc((100vw - 1232px) / 2))}
.ads-in{position:relative;display:flex;align-items:center;gap:1.75rem;width:100%;box-sizing:border-box;height:150px;padding:0 var(--edge)}
.ads-kicker{display:block;font-family:'General Sans',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .35rem}
.ads-head{font-family:'Chillax','General Sans',sans-serif;font-weight:500;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.12;letter-spacing:-.01em;color:var(--primary);margin:0}
.products-header .ads-sub{position:static;margin:.35rem 0 0;font-size:.875rem;line-height:1.45;color:var(--text);opacity:1;animation:none;max-width:42ch}
.ads-text{flex:1;min-width:0}
.ads-cta{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:999px;background:var(--accent);color:#fff;font-family:'Chillax','General Sans',sans-serif;font-size:.8125rem;font-weight:500;white-space:nowrap;transition:background .2s ease,transform .2s ease}
.ads-cta:hover{background:#2b45b8;color:#fff;transform:translateY(-1px)}
.ads-cta svg{width:13px;height:13px}
.ads-jar{display:block;height:100%;width:auto;filter:drop-shadow(0 8px 9px rgba(15,23,42,.18))}
/* the Mai-Mai logo, tilted, left of the words */
.ads-mark{display:block;height:128px;width:auto;flex-shrink:0;transform:rotate(-8deg);margin-left:calc(-1 * min(110px, max(0px, var(--edge) - 28px)))}
/* jars side by side, just touching (no space between), the middle one tallest */
.ads-cluster{position:relative;display:flex;align-items:flex-end;gap:0;height:120px}
.ads-cluster .ads-jar{height:96px;margin-left:-7px}
.ads-cluster .ads-jar:first-child{margin-left:0}
.ads-cluster .ads-jar:nth-child(1),.ads-cluster .ads-jar:nth-child(7){height:80px}
.ads-cluster .ads-jar:nth-child(2),.ads-cluster .ads-jar:nth-child(6){height:92px}
.ads-cluster .ads-jar:nth-child(3),.ads-cluster .ads-jar:nth-child(5){height:104px}
.ads-cluster .ads-jar:nth-child(4){height:118px;position:relative;z-index:2}
.ads-cluster .ads-jar:nth-child(5),.ads-cluster .ads-jar:nth-child(6),.ads-cluster .ads-jar:nth-child(7){position:relative;z-index:1}
.ads-cluster .ads-jar:nth-child(6){z-index:0}
/* tablets (no filter column): smaller logo and jars so the words keep room */
@media(min-width:769px) and (max-width:1024px){
    .ads-in{gap:1.1rem}
    .ads-mark{height:92px;margin-left:0}
    .ads-text{flex:1 1 0;min-width:220px}
    .products-header .ads-sub{display:none}
    .ads-cluster{height:100px;gap:0}
    .ads-cluster .ads-jar{height:78px;margin-left:-6px}
    .ads-cluster .ads-jar:nth-child(4){height:96px}
    .ads-cluster .ads-jar:nth-child(1),.ads-cluster .ads-jar:nth-child(7){display:none}
}
/* with the filter column: the logo sits over the column, the words start just left of the first product
   card (--grid-left and --side-mid are measured by js/shop-layout.js) */
@media(min-width:1025px){
    .ads-in{padding-left:calc(var(--grid-left,calc(256px + 2rem)) - 28px)}
    .ads-mark{position:absolute;left:var(--side-mid,128px);top:50%;margin:0;transform:translate(-50%,-50%) rotate(-8deg)}
}
/* phones: logo, headline, jars, button stacked in the middle */
@media(max-width:768px){
    .ads-in{flex-wrap:wrap;justify-content:center;text-align:center;height:auto;gap:.35rem 1rem;padding:.6rem 1rem .75rem}
    .ads-text{flex-basis:100%}
    .ads-kicker,.products-header .ads-sub{display:none}
    .ads-head{font-size:1.15rem}
    .ads-mark{height:54px;margin:0}
    .ads-cluster{flex-basis:100%;justify-content:center;height:90px}
    .ads-cluster{gap:0}
    .ads-cluster .ads-jar,.ads-cluster .ads-jar:nth-child(n){height:min(72px,18vw);margin-left:-5px}
    .ads-cluster .ads-jar:first-child{margin-left:0}
}
.page-products .products-toolbar.stuck{top:calc(var(--nav-height) + var(--ad-h,0px))}

@media(min-width:1025px) and (min-height:600px){
    .page-products .products-header.has-brand-ad{position:sticky}
    html:has(.has-brand-ad){scroll-padding-top:calc(var(--nav-height) + var(--ad-h,0px) + 8px)}
}

/* ---- One search box with sub-category suggestions ---- */
.toolbar-search{position:relative}
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;padding:.4rem;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px -18px rgba(15,23,42,.35)}
.search-suggest-head{margin:.2rem .5rem .3rem;font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light)}
.search-suggest-item{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:.45rem .6rem;border:0;border-radius:8px;background:none;cursor:pointer;font:inherit;font-size:.875rem;color:var(--text);text-align:left}
.search-suggest-item:hover,.search-suggest-item:focus-visible{background:var(--accent-light);color:var(--accent);outline:none}
.search-suggest-count{font-size:.75rem;color:var(--text-light)}

/* ---- Filters in a column on the left (html.shop-side-on, wide screens) ---- */
.shop-layout{display:grid;grid-template-columns:256px minmax(0,1fr);gap:2rem;align-items:stretch}
.shop-layout::before{content:'';grid-column:1;grid-row:1;background:#fff;border-right:1px solid var(--border);pointer-events:none}
.shop-side{grid-column:1;grid-row:1;position:sticky;top:calc(var(--nav-height) + var(--ad-h,0px));align-self:start;z-index:3;height:calc(100vh - var(--nav-height) - var(--ad-h,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding:0 1rem 1.5rem 1.25rem;background:#fff;border-right:1px solid var(--border)}
.shop-main{grid-column:2;grid-row:1;padding-top:1rem}
.shop-side-on section.products{padding-top:0}
.shop-side-on section.products > .container{max-width:none;padding-left:0;padding-right:max(1.5rem,calc((100% - 1232px) / 2))}
.side-search{padding:.85rem 0 .75rem;border-bottom:1px solid var(--border)}
.shop-side-on .side-search .toolbar-search{width:100%;max-width:none}
.shop-side-on .side-search .toolbar-search input{width:100%}
.side-sec{border-bottom:1px solid var(--border)}
.side-sec:last-child{border-bottom:0}
.side-body{padding:0 0 .9rem}
.side-sec.is-closed .side-body{display:none}
.side-head{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:.35rem 0;border:0;background:none;cursor:pointer;font-family:'General Sans',sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.side-head:hover{color:var(--accent)}
.side-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.side-head svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.side-sec.is-closed .side-head svg{transform:rotate(-90deg)}
.side-pills{display:flex;flex-direction:column;gap:2px}
.shop-side-on .side-pills .filter-pill{display:block;width:100%;text-align:left;padding:.5rem .7rem;border:0;border-radius:8px;background:none;box-shadow:none;font-size:.875rem;color:var(--text)}
.shop-side-on .side-pills .filter-pill:hover{background:var(--bg-alt);color:var(--primary)}
.shop-side-on .side-pills .filter-pill.active{background:var(--accent-light);color:var(--accent);font-weight:500}
/* the sub-category list is a plain list in the column (it folds with its heading) */
.shop-side-on .shop-side .dropdown{position:static}
.shop-side-on .shop-side .dropdown-trigger,.shop-side-on .shop-side .dropdown-search{display:none}
.shop-side-on .shop-side .dropdown-panel,.shop-side-on .shop-side .dropdown.open .dropdown-panel{position:static;display:block;opacity:1;visibility:visible;transform:none;animation:none;min-width:0;width:auto;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
.shop-side-on .shop-side .dropdown-list{max-height:none;overflow:visible;padding:0}
.shop-side-on .shop-side .dropdown-item{padding:.45rem .7rem;font-size:.875rem;border-radius:8px}
.shop-side-on .shop-side .dropdown-item.active{background:var(--accent-light);color:var(--accent);font-weight:500}
.shop-side-on .shop-side .dropdown-item-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.shop-side-on .shop-side .dropdown-item-count{font-size:.75rem;color:var(--text-light)}
.shop-side-on .shop-main .products-toolbar{display:none}
/* the product count under the search box */
.shop-side-on .side-search .products-count{display:block;margin:.55rem .1rem 0;font-size:.75rem;color:var(--text-light)}
/* the product count and the sort choice are hidden for now (owner call) */
.page-products #products-count,.page-products .products-toolbar.stuck #products-count,.page-products #sort-select{display:none!important}
.shop-side-on .shop-side .sort-select{width:100%;margin:0 0 .2rem}
.shop-side-on .shop-side .dropdown-item:focus-visible,.search-suggest-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---- Smaller, lighter product cards next to the filter column ---- */
.shop-side-on .shop-main .products-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.85rem}
@media(max-width:1280px){.shop-side-on .shop-main .products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1700px){.shop-side-on .shop-main .products-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.shop-side-on #products-grid .product-thumb{aspect-ratio:auto;height:118px;cursor:zoom-in}
.shop-side-on #products-grid .product-thumb:has(img){background:#fff}
.shop-side-on #products-grid .product-thumb img{width:auto;max-width:68%;height:auto;max-height:82%;object-fit:contain}
.shop-side-on #products-grid .product-body{padding:.55rem .65rem .6rem}
.shop-side-on #products-grid .product-badge{font-size:.5625rem;font-weight:500;padding:.1rem .35rem}
.shop-side-on #products-grid .product-brand{font-size:.5625rem;font-weight:400;margin-bottom:.1rem}
.shop-side-on #products-grid .product-name,.shop-side-on #products-grid .product-name-btn{font-size:.75rem;font-weight:400;line-height:1.3;margin-bottom:.15rem}
.shop-side-on #products-grid .product-meta{font-size:.625rem;margin-bottom:.4rem}
.shop-side-on #products-grid .add-to-cart{font-size:.6875rem;font-weight:500;padding:.3rem .65rem;min-height:0}

/* ---- Product window: lighter, smaller text ---- */
.product-modal .product-modal-badge{font-size:.5625rem;font-weight:500}
.product-modal .product-modal-brand{font-size:.625rem;font-weight:400}
.product-modal .product-modal-name{font-family:'General Sans',sans-serif;font-size:1.05rem;font-weight:500;line-height:1.35}
.product-modal .product-modal-packaging{font-size:.8125rem}
.product-modal .product-modal-price{font-size:1rem;font-weight:500}
.product-modal .product-modal-cart-btn,.product-modal .product-modal-order-btn{font-size:.8125rem;font-weight:500}

@media(prefers-reduced-motion:reduce){
    .page-products .ad-show{animation:none;opacity:1}
}

/* ---- Phones: 4 small product cards per row ---- */
@media(max-width:768px){
    #products-grid.products-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
    #products-grid .product-card{border-radius:10px}
    #products-grid .product-thumb{aspect-ratio:auto;height:60px;background:#fff}
    #products-grid .product-thumb img{width:auto;max-width:82%;height:auto;max-height:86%;object-fit:contain}
    #products-grid .product-no-image span,#products-grid .product-badge{display:none}
    #products-grid .product-no-image svg{width:20px;height:20px}
    #products-grid .product-body{display:flex;flex-direction:column;padding:.3rem .3rem .35rem}
    #products-grid .product-brand{font-size:.4375rem;font-weight:400;letter-spacing:.03em;margin-bottom:.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #products-grid .product-name,#products-grid .product-name-btn{font-size:.5625rem;font-weight:400;line-height:1.25;margin-bottom:.1rem}
    #products-grid .product-card .product-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.5em;max-height:2.5em}
    #products-grid .product-meta{font-size:.4375rem;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #products-grid .product-footer{margin-top:auto;gap:.2rem}
    #products-grid .add-to-cart{width:100%;font-size:.5rem;font-weight:500;padding:.25rem .15rem;min-height:24px;border-radius:7px;white-space:nowrap}
    #products-grid .add-to-order{width:30px;height:30px}
}

/* Phones: the back-to-top button sits lower and smaller so it covers less of the last card's button */
@media(max-width:768px){
    .page-products .go-top{width:34px;height:34px;right:8px;bottom:8px}
}