html,body{font-family:Nunito,system-ui,sans-serif}
@font-face{font-family:"Nunito";src:url("/assets/storefront/fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}
/* Storefront home — retail composition, refs: category circles + 2/3+1/3 banners + 5-col grid */

:root{
  --ink:var(--color-text);--mist:#DCE8ED;--bg:var(--color-surface);
  --muted:var(--color-muted);--title:var(--color-primary);--border:var(--color-border);--error:var(--color-error);--success:var(--color-success);
  --radius:8px;--control:48px;--max:1480px;--gap:13px;
  --font-h:"Nunito",system-ui,sans-serif;--font-b:"Nunito",system-ui,sans-serif;
  --card-w:283px;
  /* Shared card/header/footer design tokens: the single source consumed by the
     cards in this file, by header.css and by footer.css. Values mirror the
     pinned user contract so the rendered design is unchanged. */
  --card-border:var(--color-border);--card-radius:12px;
  --footer-bg:#19344F;--footer-heading:#ffffff;--footer-link:#C7D3DF;--footer-hover:#ffffff;--footer-separator:#3C536B;--footer-social:#ffffff;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:#ffffff;color:var(--ink);font-family:var(--font-b);line-height:1.5}
h1,h2,h3{font-family:var(--font-h);line-height:1.15;margin:0 0 8px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;min-height:var(--control)}
input,select,textarea{font-size:16px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(calc(100% - 32px),1480px);max-width:1480px;margin:0 auto;padding:0}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:12px 16px;z-index:60;border-radius:8px}
.skip:focus{top:8px}
.location-compact{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--mist);font-size:13px}
.location-compact svg{flex:0 0 auto}
.location-text{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.location-text strong{font-size:14px}
.location-text #location-status{color:var(--ink)}
.location-actions{display:flex;gap:8px;align-items:center}
.location-compact button{min-height:36px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;font-size:14px}
.location-compact .btn.secondary{background:#fff;color:var(--ink)}
#loc-results li button{-webkit-tap-highlight-color:transparent}
@media (hover:hover){
#loc-results li:hover{background:#F3F5F7}
#loc-results li:hover button{background:transparent}
}
#loc-results li button:focus-visible{background:#F3F5F7;outline:2px solid var(--color-primary);outline-offset:-2px}
.content-error{display:flex;align-items:center;gap:8px;border:1px dashed var(--border);border-radius:var(--radius);padding:8px 12px;margin-bottom:8px;background:#fff;font-size:13px}
/* Banners: ordered admin collection, first visible is main, count-based columns */
.banners{display:grid;gap:12px;margin-top:12px}
.banner-grid{display:grid;gap:12px}
.banner-grid.banner-count-1{grid-template-columns:1fr}
.banner-grid.banner-count-2{grid-template-columns:repeat(2,1fr)}
.banner-grid.banner-count-3{grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:16/5}
.banner-grid.banner-count-3 .banner-main{grid-row:1/3}
.banner-grid.banner-count-3 .banner-item{aspect-ratio:auto;min-height:0}
.banner-grid.banner-count-4{grid-template-columns:repeat(2,1fr)}
.banner-grid.banner-count-many{grid-template-columns:repeat(3,1fr)}
.banner-item{display:block;position:relative;background:#fff;border:1px solid var(--mist);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/7;min-height:120px}
.banner-item img{display:block;width:100%;height:100%;object-fit:cover}
/* Strips + chips */
.section-title{font-size:20px;margin:20px 0 10px}
.hstrip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.hstrip>*{scroll-snap-align:start;flex:0 0 auto}
.strip-wrap{position:relative;padding:0 48px}
/* Vertical center = 10px chip top padding + 50px half of the 100px photo; the
   48px arrow box is pulled up by half its own height so its center sits at 60px. */
.strip-arrow{position:absolute;top:60px;transform:translateY(-50%);width:var(--control);height:var(--control);display:inline-flex;align-items:center;justify-content:center;border:0;background:#ffffff;color:var(--ink);cursor:pointer;border-radius:var(--radius);padding:0;z-index:2}
.strip-arrow[disabled]{opacity:.35;cursor:default}
.strip-arrow[data-action="strip-prev"]{left:0}
.strip-arrow[data-action="strip-next"]{right:0}
#category-strip{scroll-padding:0 8px}
#category-strip .cat-chip{width:120px}
/* Desktop story strip hides its horizontal scrollbar (overflow-x:auto keeps
   wheel/trackpad/arrow scrolling); the picks strip below keeps its thin visible
   scrollbar per the featured-picks contract, so this rule targets only #category-strip. */
@media(min-width:768px){#category-strip{gap:8px;scrollbar-width:none;-ms-overflow-style:none}#category-strip::-webkit-scrollbar{display:none}#category-strip .cat-chip{width:120px;padding:10px}}
/* Wide desktop: the story viewport reaches the full 1480px content ceiling. The
   arrows step outside the viewport (left/right:-48px) and the wrapper gives up
   its internal gutter, so twelve 120px stories (12x120=1440px) plus eleven gaps
   share the leftover 40px: gap = (1480 - 1440)/11. Exactly twelve stories sit
   fully inside; the thirteenth is scrolled out. Narrower viewports keep the
   48px internal gutters and the fixed 120px item from the rules above. */
@media(min-width:1600px){
.strip-wrap{padding:0}
.strip-arrow[data-action="strip-prev"]{left:-48px}
.strip-arrow[data-action="strip-next"]{right:-48px}
#category-strip{gap:calc((100% - 1440px)/11)}
}
.cat-chip{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:10px;cursor:pointer;min-width:var(--control);text-decoration:none;color:inherit}
.cat-chip img{width:100px;height:100px;object-fit:cover;border-radius:50%;background:var(--mist)}
.cat-chip .chip-media-empty{display:block;width:100px;height:100px;border-radius:50%;background:var(--mist);border:1px dashed var(--border)}
.cat-chip .chip-media-empty::after{content:"?";display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-weight:700}
.cat-chip[aria-pressed="true"]{background:var(--mist);border-radius:var(--radius)}
#category-strip .cat-chip span{display:block;width:120px;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.filter-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--mist);background:#fff;border-radius:999px;padding:8px 12px;min-height:var(--control);font-size:16px}
/* Shared ProductCard visual contract (single source): white card, 1px #DDE2E9,
   12px radius, 4:5 contain media with 8px horizontal inset (square photos shown
   fully, never cropped or stretched), delivery band directly
   below media, 12px text inset, 2-line name, old-price+badge row, navy sale.
   Every surface (home grid, picks, category/search, recently viewed, product
   page) reuses this markup + these rules; no surface-specific card variant. */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
#picks-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:8px;margin-top:-8px;padding-bottom:12px;margin-bottom:-4px;scrollbar-width:thin;scrollbar-color:var(--ink) var(--mist)}
#picks-track::-webkit-scrollbar{height:8px}#picks-track::-webkit-scrollbar-track{background:var(--mist)}#picks-track::-webkit-scrollbar-thumb{background:var(--ink);border-radius:8px}
.picks{--card-w:calc((100% - 64px)/5)}
.picks .product-card{flex:0 0 var(--card-w);width:var(--card-w);min-width:0;scroll-snap-align:start}
@media(max-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.picks{--card-w:calc((100% - 48px)/4)}}
@media(max-width:992px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.picks{--card-w:calc((100% - 32px)/3)}}
@media(max-width:576px){:root{--card-w:calc((100vw - 36px)/2)}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.picks{--card-w:calc((100% - 12px)/2)}#picks-track{gap:12px}}
.catalog-heading{font-size:clamp(22px,6vw,28px);font-weight:600;line-height:1.3;text-align:center;color:var(--ink);margin:24px 0 16px}
.product-card{box-sizing:border-box;width:100%;max-width:100%;height:auto;min-width:0;margin:0;padding:0;border:1px solid var(--card-border);border-radius:var(--card-radius);background:#fff;overflow:hidden}
.card-open{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;text-decoration:none}
.product-card:hover{border-color:var(--card-border)}
.card-media{display:block;width:auto;margin:8px 8px 0;aspect-ratio:4/5;background:#fff;border-radius:8px;overflow:hidden}
.card-media img{display:block;width:100%;height:100%;object-fit:contain}
/* Desktop-only product-card hover (reference): normal translateY(0)/scale(1),
   hover translateY(-3px)/scale(1.025) with 0 8px 24px rgba(25,52,79,.09) and
   border #C3CDD9, 220ms ease-out. Text and price never change; mobile keeps
   the base behavior. Shared contract: every surface loads home.css. */
@media(min-width:768px){
.product-card{transform:translateY(0);transition:220ms ease-out}
.product-card:hover,.product-card:focus-within{transform:translateY(-3px);border-color:#C3CDD9;box-shadow:0 8px 24px rgba(25,52,79,.09)}
.card-media img{transform:scale(1);transition:transform 220ms ease-out}
.product-card:hover .card-media img,.product-card:focus-within .card-media img{transform:scale(1.025)}
}
.card-delivery{display:flex;align-items:center;justify-content:center;width:auto;margin:8px 8px 0;min-height:30px;padding:6px 8px;border-radius:6px;background:var(--success-bg);color:#326B45;text-align:center;font-family:Nunito,var(--font-b),sans-serif;font-size:12px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:0;padding:10px 12px 12px;min-width:0}
.card-name{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;max-height:2.6em;min-height:2.6em;margin:0;color:var(--ink);font-family:Nunito,var(--font-h),sans-serif;font-size:15px;font-weight:600;line-height:1.3}
.card-price-block{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:10px;min-width:0;font-family:Nunito,var(--font-h),sans-serif}
.card-price-meta{display:flex;align-items:center;gap:6px;min-width:0;min-height:17px;flex-wrap:wrap;font-family:Nunito,var(--font-b),sans-serif}
.card-discount{display:inline-flex;align-items:center;justify-content:center;background:#EF865C;color:#fff;font-family:Nunito,var(--font-b),sans-serif;font-size:11px;font-weight:600;line-height:1.2;border-radius:4px;padding:3px 7px;white-space:nowrap;max-width:100%}
.card-price{color:var(--title);font-size:21px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-original{color:var(--muted);text-decoration:line-through;font-family:Nunito,var(--font-b),sans-serif;font-size:12px;font-weight:400;white-space:nowrap}
.skeleton{border:1px solid var(--mist);border-radius:var(--card-radius);min-height:280px;background:var(--mist);opacity:.6;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.3}}
.skeleton{border:1px solid var(--mist);border-radius:var(--radius);min-height:280px;background:var(--mist);opacity:.6;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.3}}
.state-box{border:1px dashed var(--border);border-radius:var(--radius);padding:20px;margin:12px 0;background:#fff}
.state-box.error{border-color:var(--error)}
/* Catalog paging: a quiet sentinel plus a real button, so the next page can also be
   requested without a scroll gesture (keyboard, screen reader, slow connection). */
.catalog-more{display:grid;justify-items:center;gap:8px;margin:16px 0}
.catalog-more-sentinel{width:100%;height:1px}
.catalog-more-status{margin:0;color:var(--muted);font-size:13px;min-height:18px}
.catalog-more[hidden]{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control);padding:0 18px;border-radius:var(--radius);border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;text-decoration:none;font-size:16px}
.btn.secondary{background:#fff;color:var(--ink)}
/* Dialogs */
dialog{border:1px solid var(--mist);border-radius:var(--radius);padding:20px;max-width:min(560px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(36,62,74,.5)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dialog-head h2{margin:0}
dialog input[type="search"]{width:100%;min-height:var(--control);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;font-size:16px;background:#fff}
dialog ul{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px;max-height:40vh;overflow:auto}
dialog li button{width:100%;text-align:left;border:1px solid var(--mist);background:#fff;border-radius:var(--radius);padding:12px;cursor:pointer;min-height:var(--control);font-size:16px}
.muted{color:var(--ink);font-size:13px}
.preview-media img{border-radius:var(--radius)}
@media(max-width:767px){
  .wrap{padding:0}
  .location-compact{flex-wrap:wrap;font-size:12px}
  .banners{padding:0;margin-top:8px}
  .banner-grid,.banner-grid.banner-count-1,.banner-grid.banner-count-2,.banner-grid.banner-count-3,.banner-grid.banner-count-4,.banner-grid.banner-count-many{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto;gap:10px}
  .banner-grid .banner-main,.banner-grid.banner-count-3 .banner-main{grid-column:auto;grid-row:auto}
  .banner-item,.banner-grid.banner-count-3 .banner-item{aspect-ratio:16/7;min-height:0;min-width:0;border:0}
  /* 414px mobile: 68px story photo (68+2*10=88px chip), label follows the photo box */
  .cat-chip img{width:68px;height:68px}
  .cat-chip .chip-media-empty{width:68px;height:68px}
  #category-strip{gap:6px;scrollbar-width:none;-ms-overflow-style:none}
  #category-strip::-webkit-scrollbar{display:none;width:0;height:0}
  #category-strip .cat-chip{width:78px;padding:5px}
  #category-strip .cat-chip span{width:68px;font-size:10.5px;line-height:1.25;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0;text-align:center}
  .strip-wrap{padding:0}
  .strip-arrow{display:none}
  #location-dialog{margin:0;max-width:100%;width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .section-title{font-size:18px;margin:16px 0 8px}
  .muted{color:var(--ink)}
  .card-body{padding:8px}
  .card-name{font-size:13px}
  .card-price{font-size:18px}
  .card-original{font-size:11px}
  .card-discount{font-size:10px;padding:2px 6px}
  .card-delivery{min-height:0;margin:8px 8px 0;padding:6px 6px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}