*{box-sizing:border-box}html{scroll-behavior:smooth}
:root{--red:#d81324;--red-dk:#a80e1c;--dark:#171717;--soft:#f6f5f3;--line:#e7e4de;--green:#13a84b;--gold:#c9962f;--shadow:0 10px 30px -12px rgba(23,23,23,.18);--radius:16px}
body{margin:0;font-family:'Segoe UI',Arial,Helvetica,sans-serif;color:#20211f;background:#fff;-webkit-font-smoothing:antialiased}
a{color:#20211f;text-decoration:none}
img{max-width:100%}
.notice{background:var(--red);color:#fff;text-align:center;padding:9px;font-size:12px;font-weight:700;letter-spacing:.4px}

/* header */
header{min-height:88px;display:flex;align-items:center;gap:18px;padding:14px 5%;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:50}
.logo{display:flex;align-items:center;gap:10px;min-width:170px}
.logo img{height:46px;width:auto;display:block}
.logo span{display:flex;flex-direction:column;line-height:1}
.logo b{font-size:23px;font-weight:900;color:var(--red);letter-spacing:.5px}
.logo small{font-weight:700;letter-spacing:.5px;color:#3a3b38;font-size:10px;margin-top:3px}
.catmenu{position:relative}
#catBtn{background:var(--red);white-space:nowrap;display:flex;align-items:center;gap:8px}
#catBtn em{font-style:normal;font-size:11px}
.catpanel{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:230px;max-height:70vh;overflow-y:auto;z-index:60}
.catpanel.open{display:block}
.catpanel a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;font-weight:700;font-size:13.5px;color:#3a3b38}
.cpIcon{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:16px}
.catpanel a:hover{background:var(--soft);color:var(--red)}
.catpanel hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.search{display:flex;flex:1;max-width:600px}
.search input{width:100%;border:2px solid var(--red);border-right:0;border-radius:10px 0 0 10px;padding:13px 16px;font-size:14px;background:#fff}
.search input:focus{outline:none}
.search button{border-radius:0 10px 10px 0;padding:0 20px;font-size:17px}
.headlinks{display:flex;align-items:center;gap:22px;white-space:nowrap;margin-left:auto}
.headlinks a{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:#20211f}
.headlinks a:hover{color:var(--red)}
.headlinks .ic2{font-size:19px;position:relative;line-height:1}
.headlinks .ic2 b{position:absolute;top:-9px;right:-13px;background:var(--red);color:#fff;border-radius:20px;font-size:10px;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;font-weight:800}
button{background:var(--red);color:#fff;border:0;border-radius:9px;padding:12px 18px;font-weight:800;cursor:pointer;transition:.15s;font-size:14px}
button:hover{background:var(--red-dk)}
button:disabled{background:#c6c6c6;cursor:not-allowed}
.info{display:flex;align-items:center;gap:28px;padding:9px 5%;font-size:12.5px;color:#555;border-bottom:1px solid var(--line);background:var(--soft);overflow:auto;white-space:nowrap}
.info a{color:#555;font-weight:600}
.info a:hover{color:var(--red)}
.info .loc b{color:#20211f;margin-right:3px}
.info .homeLink{font-weight:800;color:#20211f}
.info .homeLink:hover{color:var(--red)}
.info .welcome{margin-left:auto;font-weight:700;color:#20211f}

/* hero / carousel */
.hero{position:relative;min-height:420px;overflow:hidden;background:#171717}
.slides{position:relative;height:420px}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:45px 8%;background:linear-gradient(115deg,#171717 0,#2a1210 60%,#0b0b0b 100%);opacity:0;pointer-events:none;transition:opacity .6s ease}
.slide.on{opacity:1;pointer-events:auto}
.heroText h1{font-size:54px;margin:10px 0;color:#fff;line-height:1.05}
.heroText h1 em{font-style:normal;color:var(--gold)}
.heroText p{color:#e6e6e6;font-size:16px;max-width:480px}
.eyebrow{letter-spacing:4px;color:var(--gold);font-weight:800;font-size:13px}
.outline{background:transparent;border:1px solid #fff;color:#fff;margin-left:8px}
.outline:hover{background:#ffffff22}
.heroCard{width:300px;border-radius:20px;background:linear-gradient(135deg,#232323,#0c0c0c);border:1px solid #3a3a3a;padding:28px;text-align:center;box-shadow:0 25px 40px #0008}
.heroLoyMobile{display:none}
.heroCard img{height:64px;margin-bottom:10px}
.heroCard b{display:block;font-size:18px;color:#fff;letter-spacing:1px}
.heroCard small{display:block;margin-top:8px;color:#bbb}
.dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px}
.dot{width:9px;height:9px;padding:0;border-radius:50%;background:#ffffff55;border:0}
.dot.on{background:var(--red);width:24px;border-radius:6px}

main{max-width:1450px;margin:auto;padding:34px 5%}
.title{display:flex;align-items:center;gap:20px}
.title span{height:1px;background:var(--line);flex:1}
.title h2{font-size:24px}

.category{border:1px solid var(--line);border-radius:20px;padding:14px 10px 18px;text-align:center;font-weight:800;font-size:13px;min-height:150px;transition:.15s;background:#fff;flex:0 0 140px}
.category:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent}
.category .round{height:88px;width:88px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:42px;margin:0 auto 10px;overflow:hidden}
.category .round img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.category.catTorn{border:none;background:transparent;padding:0;min-height:0}
.category.catTorn:hover{box-shadow:none;border-color:transparent}
.tornCard{width:150px;height:150px;background:#fff;clip-path:polygon(0.0% 0.8%,14.3% -2.8%,28.6% -1.3%,42.9% -1.7%,57.1% 1.4%,71.4% 1.1%,85.7% 2.4%,100.0% -2.5%,97.2% 14.3%,98.3% 28.6%,100.0% 42.9%,97.2% 57.1%,98.2% 71.4%,100.9% 85.7%,100.3% 100.0%,85.7% 100.5%,71.4% 101.9%,57.1% 97.0%,42.9% 101.8%,28.6% 101.2%,14.3% 99.0%,0.0% 97.9%,-1.0% 85.7%,-2.4% 71.4%,-2.4% 57.1%,2.1% 42.9%,0.6% 28.6%,1.8% 14.3%,1.4% 0.0%);filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));transition:.15s;overflow:hidden}
.tornCard img{width:100%;height:100%;object-fit:cover;display:block}
.category.catTorn:hover .tornCard{transform:translateY(-4px) scale(1.02)}

/* horizontal scroll rows (category rail, per-category product carousels) */
.hrow{position:relative;display:flex;align-items:center;gap:10px}
.hScroll{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:6px 2px 14px;scrollbar-width:none;flex:1}
.hScroll::-webkit-scrollbar{display:none}
.hScroll .product{flex:0 0 220px}
.hArrow{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--red);font-size:20px;line-height:1;padding:0;display:grid;place-items:center;box-shadow:var(--shadow)}
.hArrow:hover{background:var(--red);color:#fff}

/* per-category showcase: banner + carousel */
.catShowcase{margin:44px 0}
.catBanner{border-radius:18px;padding:26px 6%;display:flex;align-items:center;justify-content:space-between;color:#fff;margin-bottom:14px;overflow:hidden;min-height:150px}
.catBannerImg{padding:0;min-height:0;background-size:cover;background-position:center;aspect-ratio:1520/460}
.catBanner .cbEmoji{font-size:60px;line-height:1}
.catBanner h2{margin:4px 0 0;font-size:24px}
.catBanner small{letter-spacing:2.5px;font-weight:800;opacity:.85;font-size:11px}
.cbg0{background:linear-gradient(115deg,#7a1010,#d81324)}
.cbg1{background:linear-gradient(115deg,#1f2a1a,#3f7a3a)}
.cbg2{background:linear-gradient(115deg,#171717,#3a2a10)}
.cbg3{background:linear-gradient(115deg,#0d2b3a,#146b8c)}
.cbg4{background:linear-gradient(115deg,#3a1030,#8c2f6b)}
.cbg5{background:linear-gradient(115deg,#2a2000,#8c6b14)}
.viewAll{display:block;text-align:right;font-weight:800;color:var(--red);margin-top:2px;font-size:13px}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:35px 0}
.benefits div{background:var(--soft);padding:20px;border-radius:14px}
.benefits b,.benefits small{display:block;margin-top:5px}
.benefits small{color:#666}

.sectionTitle{display:flex;justify-content:space-between;align-items:end;margin:35px 0 16px}
#filterToggle{display:none}
.sectionTitle h2{margin:3px 0;font-size:22px}
.sectionTitle small{color:var(--red);font-weight:800;letter-spacing:.4px}
.sectionTitle>a{font-weight:800;font-size:13px;color:var(--red)}

/* products */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product{border:1px solid var(--line);border-radius:var(--radius);padding:15px;position:relative;background:#fff;transition:.15s}
.product:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent}
.product.out{opacity:.6}
/* background-color, NOT the "background" shorthand: the shorthand resets
   background-image/size/position/repeat to their defaults too, which was silently
   overriding the .pic{background-size:contain;...} rule that actually displays the
   product photo (v3.css) — even though that rule loads AFTER this one, this rule's
   higher specificity (.product .pic vs .pic) still won, so every shop/category grid
   card photo was rendering at its natural size, repeated, anchored top-left instead
   of shown whole and centered (the "pictures not showing completely" bug). Same fix
   already applied to the product detail page's .pd .big box for the same reason. */
.product .pic{height:170px;background-color:var(--soft);border-radius:12px;display:grid;place-items:center;font-size:70px;overflow:hidden;padding:12px;box-sizing:border-box}
.badge{position:absolute;top:24px;left:24px;background:var(--red);color:#fff;border-radius:7px;padding:6px 9px;font-size:11px;font-weight:800;z-index:2}
.badge.soldout{background:#555}
.pname{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-top:12px}
.pname h3{font-size:15px;margin:0 0 4px;color:#171717;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wish.icon{flex:0 0 auto;background:#fff;color:var(--red);border:1px solid var(--line);width:30px;height:30px;padding:0;border-radius:50%;font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer}
.wish.icon.on{background:var(--red);color:#fff;border-color:var(--red)}
.wish.icon:hover{transform:scale(1.08)}
.product .sub{font-size:12px;color:#777}
.price{font-size:19px;font-weight:900}
/* Product cards: clicking the photo or the name already opened the product
   page, but the price sat as plain text next to the Add-to-cart button with
   nowhere to tap — wrapped it in its own link (Sep 2026 fix) so name,
   photo AND price all open the same product page. */
.priceLink{color:inherit;text-decoration:none}
.old{color:#999;text-decoration:line-through;font-size:13px}
.product p{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.product button{border-radius:50%;width:38px;height:38px;padding:0;display:grid;place-items:center}
.stockNote{font-size:12.5px;font-weight:700;color:var(--gold);margin:4px 0}
.stockNote.bad{color:var(--red)}

/* category section grid (hypermarket-style category landing) */
.secGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.secCard{text-align:center;font-weight:800;font-size:14px;background:transparent;transition:.15s;display:block;border:none}
.secCard:hover .secPic{box-shadow:var(--shadow);transform:translateY(-3px)}
.secPic{width:150px;height:150px;margin:0 auto;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;font-size:56px;padding:16px;box-sizing:border-box;overflow:hidden;transition:.15s}
.secPic img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block}
.secLabel{padding:12px 10px 4px;font-weight:700}

/* sidebar filters (sections / categories / sort) */
.radioRow{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px;font-weight:600;cursor:pointer}
.radioRow input{accent-color:var(--red);width:15px;height:15px;margin:0}
.sortPills{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sortPill{background:#fff;color:#3a3b38;border:1px solid var(--line);padding:8px 14px;font-size:12.5px;font-weight:700;border-radius:20px}
.sortPill.on{border-color:var(--green);color:var(--green);background:#eafbf1}
.sortPill:hover{background:var(--soft)}

.bakery{display:flex;justify-content:space-between;align-items:center;background:#f8eee5;margin-top:40px;padding:35px 6%;border-radius:20px}
.bakery h2{font-size:34px;margin:6px 0}
.cake{font-size:110px}

.whatsapp{position:fixed;right:22px;bottom:22px;background:#18b653;color:#fff;padding:12px 18px;border-radius:30px;display:flex;gap:8px;align-items:center;z-index:99;box-shadow:0 8px 25px #0004}
.whatsapp small{font-weight:400}

/* footer */
footer{background:#171717;color:#d8d8d8;padding:40px 6% 0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.fcol h4{color:#fff;font-size:13px;letter-spacing:.6px;margin:0 0 10px}
.fcol p{margin:0;line-height:1.9;font-size:13.5px}
.fcol a{color:#c9c9c9}
.fcol a:hover{color:#fff}
.fbrand img{height:40px;margin-bottom:10px}
.fbrand b{display:block;color:#fff;font-size:15px;letter-spacing:.4px}
.fbrand p{color:#999;margin-top:8px}
.fsocial{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}
.fsocial a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.fsocial a:hover{transform:translateY(-3px);box-shadow:0 6px 16px #0006}
.fsocial .soc-fb{background:#1877f2}
.fsocial .soc-ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)}
.fsocial .soc-tt{background:#000}
.fsocial .soc-yt{background:#ff0000}
.fsocial .soc-wa{background:#25d366}
.fbottom{grid-column:1/-1;border-top:1px solid #2c2c2c;margin-top:26px;padding:16px 0;font-size:12px;color:#888;text-align:center}

.offerlayout{display:grid;grid-template-columns:230px 1fr;gap:30px}
.offerlayout aside{border:1px solid var(--line);border-radius:14px;padding:18px;height:max-content}
.offerlayout label{display:block;padding:10px 0}
.offerlayout select,.sectionTitle select{padding:10px;width:100%;border:1px solid var(--line);border-radius:7px}
.crumb{font-size:12px;color:#777}
.checkout{display:grid;grid-template-columns:1fr 380px;gap:35px}
.choice{display:block;border:1px solid var(--line);padding:16px;margin:10px 0;border-radius:10px}
.mapfake{height:180px;background:#eef2f3;border:1px dashed #9da7ad;border-radius:12px;display:grid;place-items:center;text-align:center}
.field{display:block;width:100%;padding:13px;margin:10px 0;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit}
.field:focus{outline:none;border-color:var(--red)}
.summary{background:var(--soft);padding:25px;border-radius:16px}
.summary p,.summary h3{display:flex;justify-content:space-between}
.accountgrid,.adminGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.accountgrid>div,.adminGrid>section{border:1px solid var(--line);border-radius:14px;padding:22px}
.muted{color:#777}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.stats div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.stats small{color:#777}
.stats b{display:block;font-size:32px;margin-top:8px;color:var(--red)}
.warning{margin-top:20px;background:#fff2c8;border:1px solid #e8c660;padding:18px;border-radius:12px}

/* admin panel — dedicated shell (storefront header/footer hidden via body[data-page=admin]) */
body[data-page="admin"] #top,body[data-page="admin"] #bot,body[data-page="vendor"] #top,body[data-page="vendor"] #bot{display:none}
.adminLoginPage{max-width:440px;margin:64px auto 40px;padding:0 20px}
.adminLoginBrand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:24px}
.adminLoginBrand img{height:42px}
.adminLoginBrand b{display:block;font-size:21px;color:var(--red);letter-spacing:.5px}
.adminLoginBrand small{display:block;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#8a8a8a;margin-top:2px}

.adminShell{display:flex;align-items:stretch;min-height:100vh;background:#f4f3f0}
.adminSidebar{width:230px;flex:0 0 230px;background:#171717;padding:20px 14px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.adminBrand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px;border-bottom:1px solid #2b2b2b;margin-bottom:14px}
.adminBrand img{height:32px}
.adminBrand b{display:block;color:#fff;font-size:15px;letter-spacing:.4px}
.adminBrand small{display:block;font-size:9px;font-weight:800;letter-spacing:1.6px;color:#999;margin-top:2px}
.adminNav{display:flex;flex-direction:column;gap:3px;flex:1}
.adminNav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#c4c4c4;font-weight:700;font-size:13px;transition:.12s}
.adminNav a span{font-size:14px;width:26px;height:26px;line-height:26px;text-align:center;border-radius:8px;flex:0 0 auto;transition:.12s}
.adminNav a:hover{background:#242424;color:#fff}
.adminNav a.on{background:var(--red);color:#fff}
.adminNav a.on span,.adminNav a:hover span{background:rgba(255,255,255,.22)!important;color:#fff!important}
.adminSideFoot{display:flex;flex-direction:column;gap:3px;border-top:1px solid #2b2b2b;padding-top:12px;margin-top:12px}
.adminSideFoot a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;color:#c4c4c4;font-weight:700;font-size:12.5px}
.adminSideFoot a span{font-size:14px;width:18px;text-align:center;flex:0 0 auto}
.adminSideFoot a:hover{background:#242424;color:#fff}
main.adminMain{flex:1;max-width:none;margin:0;padding:26px 32px 60px;min-width:0}
.adminTopbar{margin-bottom:18px}
.adminTopbar h1{font-size:25px;margin:0;letter-spacing:.2px}
.adminTopbar .muted{margin:4px 0 0;font-size:13px}
.stats div{box-shadow:0 3px 14px -6px rgba(23,23,23,.14);position:relative;overflow:hidden}
.stats div::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),#ff7a63)}
@media(max-width:900px){
.adminSidebar{width:74px;flex:0 0 74px;padding:16px 8px}
.adminBrand{justify-content:center;padding:2px 0 16px}
.adminBrand div{display:none}
.adminNav a{justify-content:center;padding:11px}
.adminNav a span{width:auto}
.adminNav a{font-size:0}
.adminSideFoot a{justify-content:center;font-size:0;padding:10px}
main.adminMain{padding:20px 16px 50px}
}

@media(max-width:950px){
header{flex-wrap:wrap}
.logo{min-width:auto}
.search{order:3;flex-basis:100%}
.info{overflow:auto}
.info .welcome{display:none}
/* was "min-height" here, but .slides/.hero also carry an unconditional
   height:420px from the base rule above — height always wins over a smaller
   min-height, so the hero never actually shrank on phones/tablets before
   this fix (a 420px-tall box showing a wide "cover" banner image cropped
   almost all of it, including any text baked into the image). */
/* .hero also carries an unconditional min-height:420px in the base rule
   above (see .hero{min-height:420px...}) which otherwise wins over a
   smaller "height" here (min-height always wins when height would be
   less), so min-height has to be overridden too, not just height. */
.slides,.hero{height:340px;min-height:340px}
.slide{min-height:340px}
.heroText h1{font-size:38px}
.heroCard{display:none}
.heroLoyMobile{display:inline-block;background:linear-gradient(135deg,#d9ae3c,#805d10);color:#fff;text-decoration:none;padding:8px 14px;border-radius:20px;font-size:13px;font-weight:600;margin:4px 0 8px}
.heroLoyMobile b{font-weight:800}
.secGrid{grid-template-columns:repeat(3,1fr)}
.products{grid-template-columns:repeat(3,1fr)}
.benefits{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(2,1fr)}
footer{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
header{padding:12px 4%;gap:8px}
#catBtn{padding:10px 12px}
#catBtn span{display:none}
.headlinks{font-size:13px;gap:16px}
.headlinks a{gap:4px}
.headlinks a span:not(.ic2){display:none}
/* "About Us" has no icon of its own, so hiding its label would leave a
   dead empty link — simplest correct fix on a phone-width header is to
   drop it from the header entirely (it's still reachable from the footer). */
a.aboutLink{display:none}
.info{padding:8px 4%;font-size:11px;gap:10px}
.info .homeLink,.info .emailLink{display:none}
.slide{padding:20px 5%;min-height:220px}
.slides,.hero{height:220px;min-height:220px}
.heroText h1{font-size:24px}
.heroText p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* "flat" slides are a single pre-designed banner image with the headline
   already drawn into the picture. These images are wide (desktop-banner
   shaped), so "cover" on a tall narrow phone screen zoomed in and sliced
   off most of the text on both sides. "contain" always shows the full
   image (letterboxed in the store's dark brand color instead) so the text
   stays readable. */
.slide.flat a{background-size:contain!important;background-position:center!important;background-repeat:no-repeat;background-color:#171717}
main{padding:25px 4%}
.category{min-height:120px;padding:10px 6px 14px;flex:0 0 110px}
.category .round{height:64px;width:64px;font-size:30px}
.tornCard{width:100px;height:100px}
.secGrid{grid-template-columns:repeat(2,1fr);gap:10px}
.secPic{width:110px;height:110px;font-size:40px;padding:10px}
.products{grid-template-columns:repeat(2,1fr);gap:10px}
.product{padding:10px}
/* Was a fixed height:120px box — on phone-width grid/scroll cards the
   width doesn't match 120px, so background-size:contain left empty side
   bars around the photo (the "picture is not full, side is blank" bug).
   Same square-box fix as the product detail page's .pd .big (Sep 2026). */
.product .pic{height:auto;aspect-ratio:1/1;font-size:50px}
.hScroll .product{flex:0 0 160px}
.hArrow{width:32px;height:32px;font-size:16px}
.catBanner{padding:20px 5%}
.catBanner h2{font-size:19px}
.catBanner .cbEmoji{font-size:40px}
.accountgrid,.adminGrid,.stats{grid-template-columns:1fr}
/* Benefits boxes (Home Delivery / Store Pickup / Weekly & Monthly Offers /
   Flexible Payments) were stacking full-width at 1-per-row on phones, with
   the same generous 20px padding as desktop — each box ended up tall and
   the section ran long. Keep 2 columns on phones too (matches the 950px
   tablet breakpoint) and shrink the padding/text so it reads as a compact
   info strip instead of four big cards (Sep 2026 fix). */
.benefits{grid-template-columns:repeat(2,1fr);gap:8px;margin:20px 0}
.benefits div{padding:12px 10px;border-radius:10px}
.benefits b{font-size:13px}
.benefits small{font-size:11px}
.bakery{padding:25px;flex-direction:column;text-align:center;gap:14px}
.cake{display:none}
.offerlayout,.checkout{grid-template-columns:1fr}
.offerlayout aside.side{order:-1;display:none;margin-bottom:16px;max-height:60vh;overflow-y:auto}
.offerlayout aside.side.open{display:block}
.sectionTitle{align-items:center}
#filterToggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:9px 14px;white-space:nowrap}
footer{grid-template-columns:1fr;text-align:center}
.fsocial{justify-content:center}
.whatsapp{right:14px;bottom:14px;width:50px;height:50px;padding:0;border-radius:50%;justify-content:center;font-size:22px}
.whatsapp span{display:none}
/* "Apply coupon" / "Apply staff ID" buttons at checkout looked small on
   phones next to the full-width "Place Order" button below them — same
   base button style, but the surrounding .grid2 column gave them less
   breathing room. Bump their own size up specifically on mobile (Sep
   2026 fix). */
#cpb,#sfb{width:100%;padding:15px 18px;font-size:15px}
/* Payment method select (checkout) and Size/Weight select (product page)
   were plain grey like every other .field input — on a phone, where they're
   one of the few visible choices left on screen, they read as an
   after-thought next to the site's red brand color. Give them their own
   colorful look on mobile: red border/text on a light red tint, bold, with
   a custom red dropdown arrow (Sep 2026 fix, phone only — desktop keeps the
   plain .field look). */
.selFancy{appearance:none;-webkit-appearance:none;background-color:#fdecec;border:2px solid var(--red);color:var(--red-dk);font-weight:800;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23d81324' d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:38px}
}