/* The home page (owner list 2026-10-27, item E; docs/LAYOUTS.md «Bento
   tiles» and «The phone home»). app/home-tiles.js draws the bento,
   app/home-chrome.js the phone hero and footer. No sticky; logical sides
   except the share button's fixed corner (the language picker owns the
   other one). */

/* ======================= bento category tiles ======================= */
/* #navScroll[data-bento]: tiles | cards | chips (chips only once the owner
   set a big tile or info tiles). Two across a phone, the big tile the full
   width; four across a computer, the big tile 2 × 2. */
#navScroll[data-bento]{
  --cat-gap:12px; --cat-pad:16px;
  display:grid; grid-auto-flow:row dense; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-columns:auto;
  overflow:visible; scroll-snap-type:none; gap:var(--cat-gap);
  max-width:var(--container); padding:4px var(--cat-pad) 8px;
}
@media (min-width:768px){
  #navScroll[data-bento]{--cat-gap:16px; --cat-pad:24px; grid-template-columns:repeat(4, minmax(0, 1fr));}
}
#navScroll[data-bento] > *{min-width:0; aspect-ratio:4 / 3;}
#navScroll[data-bento] > .nav-pill.is-big{order:-1; grid-column:span 2; aspect-ratio:16 / 9;}
@media (min-width:768px){
  #navScroll[data-bento] > .nav-pill.is-big{grid-row:span 2; aspect-ratio:auto;}
  #navScroll[data-bento][data-short] > .nav-pill.is-big{grid-row:auto; aspect-ratio:auto;}
}
/* «לכל המוצרים» closes the last row (data-span-*, app/home-tiles.js): no
   hole at any width. Wider than one column it takes the row's height. */
#navScroll[data-bento] > .home-tile-all[data-span-phone="2"]{grid-column:span 2; aspect-ratio:auto; min-height:4.5rem;}
@media (min-width:768px){
  #navScroll[data-bento] > .home-tile-all[data-span-wide]{grid-column:auto; aspect-ratio:4 / 3; min-height:0;}
  #navScroll[data-bento] > .home-tile-all:is([data-span-wide="2"], [data-span-wide="3"], [data-span-wide="4"]){aspect-ratio:auto; min-height:5rem;}
  #navScroll[data-bento] > .home-tile-all[data-span-wide="2"]{grid-column:span 2;}
  #navScroll[data-bento] > .home-tile-all[data-span-wide="3"]{grid-column:span 3;}
  #navScroll[data-bento] > .home-tile-all[data-span-wide="4"]{grid-column:span 4;}
}

/* chips and tiles: the photo fills the tile, the name on a label over it
   (the tiles row's look; owner colours: the card surface and the name). */
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill{overflow:hidden; border-radius:var(--r-panel);}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-photo{position:absolute; inset:0; height:auto; flex:none; border-radius:inherit; aspect-ratio:auto;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-photo img{border-radius:inherit;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-emoji{font-size:2.5rem;}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-body{
  position:absolute; inset-inline-start:0.5rem; inset-block-end:0.5rem; max-width:calc(100% - 1rem); min-height:0;
  padding:0.375rem 0.75rem; border-radius:var(--r-chip); background:var(--ui-cat-card-bg, var(--paper)) !important;
  box-shadow:0 4px 12px -6px rgba(0,0,0,0.45);
}
#navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-name{font-size:0.9375rem; text-align:start; -webkit-line-clamp:1;}
#navScroll[data-bento] > .nav-pill .cat-card-arrow{display:none;}
#navScroll[data-bento] > .nav-pill.is-big .cat-card-name{font-size:1.125rem;}
@media (min-width:768px){
  #navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-name{font-size:1.0625rem;}
  #navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill .cat-card-body{inset-inline-start:0.75rem; inset-block-end:0.75rem; padding:0.5rem 1rem;}
  #navScroll[data-bento] > .nav-pill.is-big .cat-card-name{font-size:1.5rem;}
  #navScroll:is([data-bento="chips"], [data-bento="tiles"]) > .nav-pill.is-big .cat-card-body{inset-inline-start:1rem; inset-block-end:1rem; padding:0.625rem 1.25rem;}
}
/* cards: the photo over the brand band (app/layouts-voice.css), the band a
   fixed share of the tile so the big one keeps the same proportion. */
#navScroll[data-bento="cards"] > .nav-pill .cat-card-photo{height:auto; flex:1 1 auto; min-height:0;}
#navScroll[data-bento="cards"] > .nav-pill .cat-card-body{flex:0 0 auto; padding:8px 12px;}
#navScroll[data-bento="cards"] > .nav-pill .cat-card-name{font-size:1rem; -webkit-line-clamp:1;}

/* Boutique draws its row as round chips; a bento takes them back to tiles. */
html[data-catalog-style="boutique"] #navScroll[data-bento] > .nav-pill .cat-card-photo{border-radius:inherit; aspect-ratio:auto;}
html[data-catalog-style="boutique"] #navScroll[data-bento="chips"] > .nav-pill{background:var(--ui-cat-card-bg, var(--paper)) !important;}

/* The extra tiles: info (the owner's words, a link) and «לכל המוצרים». */
.home-tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  padding:14px 16px; border-radius:var(--r-panel); overflow:hidden; text-decoration:none;
  background:var(--ui-cat-card-bg, var(--paper)); color:var(--ui-cat-name-color, var(--ink));
  border:2px solid var(--line); box-shadow:0 4px 14px -6px rgba(31,77,58,0.18);
}
a.home-tile:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
.home-tile-title{font-weight:800; font-size:1rem; line-height:1.3; overflow-wrap:anywhere;}
.home-tile-text{font-size:0.875rem; line-height:1.45; color:var(--ink-soft); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
/* Without a photo: the brand's tint, an icon and the words centred (owner
   list 26.10, item 10 — an empty white box before). */
.home-tile-info:not(.has-photo){
  align-items:center; justify-content:center; text-align:center; gap:8px;
  background:var(--ui-cat-card-bg, #EEF3EC); background:var(--ui-cat-card-bg, color-mix(in srgb, var(--primary) 12%, var(--paper)));
  border-color:transparent;
}
.home-tile-info:not(.has-photo) .home-tile-body{align-items:center;}
.home-tile-icon{display:none;}
.home-tile-info:not(.has-photo) .home-tile-icon{
  display:inline-flex; width:2.75rem; height:2.75rem; flex:none; align-items:center; justify-content:center;
  border-radius:50%; background:var(--primary); color:var(--home-on-primary, #fff);
}
.home-tile-icon svg{width:1.375rem; height:1.375rem;}
.home-tile-info.has-photo{padding:0;}
.home-tile-info .home-tile-photo{flex:1 1 auto; min-height:0; background:var(--paper-dim);}
.home-tile-info .home-tile-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.home-tile-info.has-photo .home-tile-body{padding:10px 14px 12px;}
.home-tile-info.has-photo .home-tile-text{-webkit-line-clamp:1;}
.home-tile-body{display:flex; flex-direction:column; gap:4px; min-width:0;}
.home-tile-all{
  background:var(--primary); color:var(--home-on-primary, #fff); border-color:var(--primary);
  flex-direction:row; align-items:center; justify-content:space-between;
}
.home-tile-all .home-tile-title{font-size:1.125rem;}
.home-tile-arrow{display:inline-flex; width:2.25rem; height:2.25rem; flex:none; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,0.18);}
.home-tile-arrow svg{width:1.25rem; height:1.25rem;}
[dir="ltr"] .home-tile-arrow svg{transform:scaleX(-1);}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]):not([data-a11y-motion="1"]) a.home-tile{transition:transform .2s ease, box-shadow .2s ease;}
  html:not([data-motion="off"]):not([data-a11y-motion="1"]) a.home-tile:hover{transform:translateY(-3px); box-shadow:0 10px 22px -6px rgba(31,77,58,0.3);}
}
html[data-a11y-contrast="1"] .home-tile{background:#fff !important; color:#000 !important; border-color:#000 !important;}
html[data-a11y-contrast="1"] .home-tile-text{color:#000 !important;}

/* ======================= the hero ======================= */
/* «מכירה מיוחדת» (content.heroLabel): every screen, only when set. */
.hero-label{
  display:inline-flex; align-items:center; min-height:28px; padding:4px 14px; margin-bottom:10px;
  border-radius:var(--r-chip, 999px); background:var(--paper); color:var(--primary);
  font-weight:800; font-size:0.875rem; line-height:1.3; box-shadow:0 4px 12px -6px rgba(0,0,0,0.45);
}
html[data-layout-hero="split"] #home:has(> #heroBg[style*="url("]) .hero-label{align-self:flex-start;}
.hero-share, .footer-copy-link{display:none;}

@media (max-width:640px){
  .hero-share:focus-visible, .footer-copy-link:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}

  /* Share: a 44px circle at the hero's top right (physical: the language
     picker keeps the top left). */
  .hero-share{
    display:flex; align-items:center; justify-content:center; position:absolute; top:14px; right:14px; z-index:5;
    width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
    background:rgba(14,20,16,0.55); color:#fff;
  }

  /* The main button: a pill in the brand colour (the owner's button shape wins). */
  html:not([data-catalog-style="boutique"]) #home .hero-primary-action{
    background:var(--primary); color:var(--home-on-primary, #fff); min-height:48px; padding:12px 28px;
    box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 8px 20px -8px rgba(0,0,0,0.45);
  }
  html:not([data-catalog-style="boutique"]):not([data-button-style]) #home .hero-primary-action{border-radius:999rem;}

  /* ======================= the footer (phone) ======================= */
  footer#siteFooter{margin-top:32px; padding-top:26px;}
  #siteFooter .footer-zones{gap:18px;}
  .footer-copy-link{
    display:flex; align-items:center; gap:8px; min-height:44px; margin:18px auto 0; padding:0 18px;
    border:1px solid currentColor; border-radius:var(--r-chip, 999px); background:transparent;
    color:inherit; font:inherit; font-size:0.875rem; font-weight:700; cursor:pointer;
  }
}

/* ======================= the footer ======================= */
/* Shorter: the pickup points live in the checkout and in «נקודות איסוף»
   (app/pickup-section.js); content.footerPickup brings the list back
   (html[data-footer-pickup], app/home-chrome.js). Owner list 26.10, item 11:
   a computer too, not only a phone. */
html:not([data-footer-pickup]) #siteFooter .footer-zone-pickup{display:none;}
/* Lighter, on every screen: the page's own ground, unless the owner gave the
   footer a ground or colours of their own (home-chrome.js leaves the
   attribute off). */
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]){
  background:var(--paper-dim); color:var(--ink-soft); border-top:1px solid var(--line);
}
/* A page ground the owner chose (a «רקע» recipe): the footer is a shade of
   that ground, not --paper-dim. --paper-dim is derived from the brand colour
   with its hue turned 35°, so under a white or cream page a warm brand's
   footer came out olive (momos, 2026-10-28). Light grounds only: :where()
   keeps the dark grounds' rule (background-scope.css) ahead of this one, and
   the text stays the light footer's ink. */
html[data-home-footer="light"]:not([data-a11y-contrast="1"]):where([data-theme-background]) #siteFooter:not([data-part-ground]){
  background:var(--theme-page-bg, var(--paper-dim));
  background:color-mix(in srgb, var(--theme-page-bg, var(--paper-dim)) 95%, var(--ink));
}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-name, .footer-col-h, .footer-copy-link, .footer-pickup-title, .footer-pickup-name){color:var(--ink);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-info, .footer-contact-link, .footer-legal a, .footer-col-link, .copy, .footer-pickup-address, .footer-pickup-hours, .footer-pickup-note){color:var(--ink-soft);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.social-chip, .footer-review, .footer-pickup-link){background:var(--paper); border-color:var(--line); color:var(--ink);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) .footer-legal .sep{color:var(--ink-soft);}
html[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.copy, .footer-zones){border-top-color:var(--line);}

/* The footer's finish (benchmark 2026-10-27): sizes and rhythm only, so the
   light footer, an owner's footer colours and high contrast keep their own
   colours. The name reads as the shop's sign, the details at body size,
   the column labels in the body face, the legal links with the «תקנון»
   (app/shop-terms.js) as one quiet row above the copyright. */
#siteFooter{padding-top:44px;}
#siteFooter .footer-zones{align-items:start; row-gap:28px;}
#siteFooter .footer-zone{gap:10px;}
#siteFooter .footer-name{font-size:calc(1.375rem * var(--part-title-scale, 1)); line-height:1.25;}
#siteFooter .footer-logo{width:64px; height:64px;}
#siteFooter .footer-info, #siteFooter .footer-contact-link, #siteFooter .footer-pickup-point{font-size:0.875rem; line-height:1.6;}
#siteFooter .footer-hours{font-variant-numeric:tabular-nums;}
#siteFooter .footer-col-h{margin-bottom:6px; font-size:1rem;}
#siteFooter .footer-col-link{font-size:0.9375rem;}
#siteFooter .footer-legal{gap:6px 18px; margin-top:28px; font-size:0.875rem;}
#siteFooter .footer-legal .sep{display:none;}
#siteFooter .copy{margin-top:20px; font-size:0.8125rem;}
@media (min-width:769px){
  html:not([data-layout-footer="full"]) #siteFooter .footer-zone-social{align-self:center;}
}

/* «הקישור הועתק» */
.home-toast{
  position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom, 0px)); z-index:1000;
  transform:translateX(-50%); opacity:0; pointer-events:none; max-width:calc(100vw - 32px); overflow-wrap:anywhere;
  padding:10px 18px; border-radius:var(--r-chip, 999px); background:var(--ink); color:var(--paper);
  font-weight:700; font-size:0.9375rem; box-shadow:0 10px 24px -8px rgba(0,0,0,0.45);
}
.home-toast.is-on{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  html:not([data-a11y-motion="1"]) .home-toast{transition:opacity .2s ease;}
}

/* ======================= «נקודות איסוף» ======================= */
/* The section kind pickupPoints (app/pickup-section.js; owner list 26.10,
   item 12): the checkout's point cards on the page. «כרטיסים» a grid of
   framed cards, «רשימה» one column of rows; «מפה» one map under them. */
.editorial-block[data-pks-empty]{display:none;}
.pks{display:grid; gap:20px; margin-top:18px; min-width:0;}
.pks-list{display:grid; gap:12px; margin:0; padding:0; list-style:none; min-width:0;}
.pks[data-look="cards"] .pks-list{grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr));}
.pks-card{display:flex; flex-direction:column; gap:4px; min-width:0; text-align:start;}
.pks[data-look="cards"] .pks-card{padding:16px; border:1px solid var(--line); border-radius:var(--r-control, 12px); background:var(--paper);}
.pks[data-look="list"] .pks-list{gap:0;}
.pks[data-look="list"] .pks-card{padding:14px 0; border-bottom:1px solid var(--line);}
.pks[data-look="list"] .pks-card:last-child{border-bottom:0;}
.pks-name{margin:0; font-size:1rem; font-weight:800; line-height:1.35; color:var(--ink);}
.pks-address, .pks-hours, .pks-note, .pks-contact{margin:0; font-size:0.875rem; line-height:1.5; color:var(--ink-soft); overflow-wrap:anywhere;}
.pks-day{white-space:nowrap;}
.pks-contact{display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;}
.pks-phone{color:var(--primary); font-weight:700; text-decoration:underline; unicode-bidi:isolate; direction:ltr;}
.pks-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.pks-link{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border:1px solid var(--line);
  border-radius:var(--r-chip, 999px); background:var(--surface, var(--paper)); color:var(--ink);
  font:inherit; font-size:0.875rem; font-weight:700; text-decoration:none; cursor:pointer;}
.pks-link svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.pks-on-map[aria-pressed="true"]{border-color:var(--primary); color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary);}
.pks :is(a, button):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
.pks-map{min-width:0;}
.pks-map .editorial-embed-box{margin:0;}
@media (min-width:900px){
  .pks .pks-list{order:-1;}
  .pks[data-look="list"].has-map{grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); align-items:start;}
}
html[data-a11y-contrast="1"] .pks-link{background:#000 !important; color:#fff !important; border:2px solid #fff !important;}

/* ======================= a category with no photo ======================= */
/* Benchmark 2026-10-27, item 6: a tinted tile from the brand colour with the
   category's icon in a soft circle — or, with no icon, the name's first
   letter in the title face (app.js catCardHTML) — instead of a flat grey
   box. Every category form (cards, tiles, bento, chips) draws it. */
.cat-card-photo.is-blank{
  background-color:var(--paper-dim);
  background-image:linear-gradient(150deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
}
@supports (background: color-mix(in srgb, red 5%, white)){
  .cat-card-photo.is-blank{background-color:color-mix(in srgb, var(--primary, #1F4D3A) 10%, var(--paper, #FBF7EF));}
}
.cat-card-photo.is-blank .cat-card-emoji::before{
  content:""; position:absolute; z-index:-1; width:1.9em; max-height:86%; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,0.6);
}
.cat-card-photo.is-blank .cat-card-emoji{position:relative; z-index:0; isolation:isolate;}
.cat-card-initial{font-family:var(--font-heading, var(--font-brand)), var(--font-display, 'Suez One'), serif; font-weight:900; color:var(--primary);}
.cat-chip .cat-card-photo.is-blank .cat-card-emoji::before{width:100%;}