/* «יום שוק» (app/market-day.js): the board of a dated market, in four looks
   (data-look): stall «דוכן» (an awning over a stall, handwritten price
   tags), chalk «לוח גיר» (a chalkboard menu, the cards pinned on it as
   paper notes), paper «עיתון שוק» (a market broadsheet: masthead, rules,
   columns) and modern «מודרני» (bold cards under a countdown band).

   Colours: the shop's palette only — the chalkboard is the shop's ink with
   its paper for chalk (the body text pair, inverted), the bands the order
   button's own pair (--ui-btn-primary-*), so every pair the owner can pick
   keeps the contrast the theme already keeps. Sizes in rem (the owner's
   type scale), logical sides (RTL and the LTR translations), the numbers in
   LTR runs. The product cards are the catalogue's own (productCardEl): only
   their frame changes here, never what sits inside them (no-overlap rule,
   test/visual-pins.test.js). One motion moment, the awning's sway on first
   paint, behind reduced motion and the shop's «תנועה» level. */

.editorial-block.editorial-marketDay[hidden]{display:none;}
.editorial-marketDay{--block-default-background:transparent; --block-default-border:0 solid transparent;}
.editorial .editorial-block.editorial-marketDay{padding:0; overflow:hidden;}
.md{position:relative; display:grid; gap:clamp(16px, 3vw, 28px); padding:clamp(18px, 4vw, 40px); min-width:0; text-align:center; color:var(--ink);}
.md-head{display:grid; justify-items:center; gap:8px; min-width:0;}
.md-head .editorial-copy{display:contents;}
.md-head .editorial-eyebrow{margin:0;}
.editorial .md .md-head h2, .md-title{margin:0; font-family:var(--font-display), var(--font-body), serif; font-size:clamp(2rem, 6vw, 3.25rem); line-height:1.05; font-weight:900; color:inherit; overflow-wrap:anywhere;}
.editorial .md .md-head .rich-text{margin:0 auto; max-width:36rem; text-align:inherit; font-size:1.0625rem; line-height:1.5; color:inherit;}
.md-badge{display:inline-flex; align-items:center; gap:8px; margin:0; padding:4px 14px; border-radius:999px; font-size:0.875rem; font-weight:800;
  background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff);}
.md[data-state="live"] .md-badge::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor;}
.md-when{margin:0; font-size:1.0625rem; font-weight:700; line-height:1.5;}
.md-when bdi, .md-hours{unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.md-clock{display:grid; justify-items:center; gap:6px; min-width:0;}
.md-clock-label{font-size:0.875rem; font-weight:700;}
.md-clock-digits{display:flex; gap:8px; direction:ltr; unicode-bidi:isolate;}
.md-clock[data-days="0"] .md-d{display:none;}
.md-clock-cell{display:grid; justify-items:center; min-width:3.25rem; padding:6px 8px; border-radius:var(--r-chip, 8px); background:var(--paper); color:var(--ink); border:1px solid var(--line);}
.md-clock-n{font-size:1.5rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums;}
.md-clock-u{font-size:0.75rem; font-weight:600;}

/* The cards: the catalogue's own, in a grid of the board's. */
.md .md-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap:clamp(12px, 2vw, 20px); margin:0; text-align:start; min-width:0;}
@media (max-width:640px){ .md .md-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;} }
.md .md-grid > .card, .md .md-tile{min-width:0; color:var(--ink);}
/* Before the market: the list as a preview, no stepper. */
.md-preview{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap:12px; margin:0; padding:0; list-style:none; text-align:start; min-width:0;}
@media (max-width:640px){ .md-preview{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;} }
.md-tile{display:grid; align-content:start; gap:6px; min-width:0; padding:10px; border-radius:var(--r-control, 12px); background:var(--paper); color:var(--ink); border:1px solid var(--line);}
.md-tile-photo{display:block; aspect-ratio:1 / 1; overflow:hidden; border-radius:calc(var(--r-control, 12px) - 4px); background:var(--paper-dim);}
.md-tile-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.md-tile-name{font-weight:800; line-height:1.3; overflow-wrap:anywhere;}
.md-tile-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;}
.md-tile-now{font-weight:900; font-size:1.0625rem; font-variant-numeric:tabular-nums; unicode-bidi:isolate;}
.md-tile-unit{font-size:0.875rem; font-weight:600;}
.md-tile-was{font-size:0.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; unicode-bidi:isolate;}

/* ===================== «דוכן»: an awning over a stall ===================== */
.md[data-look="stall"]{padding-top:0; background:var(--paper);}
.md-awning{--md-stripe:clamp(28px, 5vw, 48px); height:clamp(54px, 9vw, 84px); margin-inline:calc(-1 * clamp(18px, 4vw, 40px));
  background:repeating-linear-gradient(90deg, var(--ui-btn-primary-bg, var(--primary)) 0 var(--md-stripe), var(--paper-dim) var(--md-stripe) calc(2 * var(--md-stripe)));
  -webkit-mask:linear-gradient(#000, #000) 0 0 / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 50%, #000 13.5px, transparent 14px) 0 100% / var(--md-stripe) 28px repeat-x;
          mask:linear-gradient(#000, #000) 0 0 / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 50%, #000 13.5px, transparent 14px) 0 100% / var(--md-stripe) 28px repeat-x;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.12)); transform-origin:50% 0;}
.md[data-look="stall"] .md-head h2, .md[data-look="stall"] .md-title{color:var(--primary);}
.md[data-look="stall"] .md-when{display:inline-block; padding:4px 16px; border-block:2px solid var(--ink);}
.md[data-look="stall"] .md-grid > .card{border:2px solid var(--ink); border-radius:var(--r-control, 12px); box-shadow:4px 4px 0 var(--ink);}
/* The handwritten tag: the card's own price line, on a tag. */
.md[data-look="stall"] .md-grid > .card > .price-tag[data-price-line]{justify-self:start; width:max-content; max-width:100%; padding:2px 12px 2px 10px; border:2px dashed var(--primary); border-radius:6px;
  background:var(--paper); color:var(--ink); font-family:var(--font-display), var(--font-body), serif; transform:rotate(-2deg);}
.md[data-look="stall"] .md-clock-cell{border:2px solid var(--ink);}

/* ===================== «לוח גיר»: a chalkboard menu ===================== */
.md[data-look="chalk"]{background:radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.06), transparent 60%), var(--ink); color:var(--paper);
  border:clamp(8px, 1.4vw, 14px) solid var(--gold); border-radius:var(--r-panel, 16px); box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), inset 0 0 60px rgba(0,0,0,.35);}
.md[data-look="chalk"] .md-head h2, .md[data-look="chalk"] .md-title{font-weight:700; color:var(--paper); text-shadow:0 0 1px currentColor;}
.md[data-look="chalk"] .md-head::after{content:""; width:min(12rem, 60%); height:0; border-top:2px dashed currentColor; opacity:.7;}
.md[data-look="chalk"] .md-badge{background:transparent; color:var(--paper); border:2px solid var(--paper);}
.md[data-look="chalk"] .md-clock-cell{background:transparent; color:var(--paper); border:2px dashed var(--paper);}
.md[data-look="chalk"] .md-head .editorial-eyebrow{color:var(--paper);}
/* The cards: paper notes pinned on the board. */
.md[data-look="chalk"] .md-grid > .card, .md[data-look="chalk"] .md-tile{position:relative; border:0; border-radius:4px; box-shadow:0 6px 14px rgba(0,0,0,.35);}
.md[data-look="chalk"] .md-grid > .card::before, .md[data-look="chalk"] .md-tile::before{content:""; position:absolute; inset-block-start:-7px; inset-inline-start:50%; z-index:1; width:14px; height:14px; margin-inline-start:-7px;
  border-radius:50%; background:var(--gold); box-shadow:0 2px 3px rgba(0,0,0,.4); pointer-events:none;}
.md[data-look="chalk"] .md-grid{padding-top:8px;}

/* ===================== «עיתון שוק»: a market broadsheet ===================== */
.md[data-look="paper"]{background:var(--paper); border-block:6px double var(--ink); border-radius:0; gap:clamp(14px, 2.4vw, 22px);}
.md-masthead{display:flex; justify-content:space-between; gap:12px; width:100%; padding-bottom:6px; border-bottom:1px solid var(--ink); font-size:0.875rem; font-weight:700;}
.md[data-look="paper"] .md-head{justify-items:stretch; text-align:center;}
.md[data-look="paper"] .md-badge{justify-self:center; border-radius:0; background:var(--ink); color:var(--paper);}
.md[data-look="paper"] .md-head h2, .md[data-look="paper"] .md-title{font-size:clamp(2.5rem, 9vw, 4.75rem); letter-spacing:0; border-bottom:3px solid var(--ink); padding-bottom:8px;}
.md[data-look="paper"] .md-clock{grid-auto-flow:column; justify-content:center; align-items:center; gap:12px;}
.md[data-look="paper"] .md-clock-cell{border-radius:0; border:1px solid var(--ink); background:transparent;}
.md[data-look="paper"] .md-grid{gap:0; border-top:1px solid var(--ink);}
.md[data-look="paper"] .md-grid > .card{border:0; border-radius:0; box-shadow:none; background:transparent; padding-block:14px; border-bottom:1px solid var(--line);}
@media (min-width:641px){ .md[data-look="paper"] .md-grid > .card{border-inline-end:1px solid var(--line); padding-inline:14px;} }
.md[data-look="paper"] .md-grid > .card > .card-name{font-family:var(--font-display), var(--font-body), serif; font-size:1.125rem;}
.md[data-look="paper"] .md-tile{border-radius:0; border:0; border-bottom:1px solid var(--line); background:transparent;}

/* ===================== «מודרני»: bold cards, a countdown band ===================== */
.md[data-look="modern"]{background:var(--paper-dim); border-radius:var(--r-panel, 16px);}
.md[data-look="modern"] .md-head{justify-items:start; text-align:start;}
.editorial .md[data-look="modern"] .md-head .rich-text{margin-inline:0;}
.md[data-look="modern"] .md-head h2, .md[data-look="modern"] .md-title{font-size:clamp(2.25rem, 7vw, 4rem); letter-spacing:0;}
.md[data-look="modern"] .md-clock{width:100%; grid-auto-flow:column; justify-content:space-between; align-items:center; padding:12px clamp(12px, 2vw, 20px); margin-top:4px;
  border-radius:var(--r-control, 12px); background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff);}
@media (max-width:480px){ .md[data-look="modern"] .md-clock{grid-auto-flow:row; justify-content:stretch; justify-items:start;} }
.md[data-look="modern"] .md-clock-label{font-size:1rem;}
.md[data-look="modern"] .md-clock-cell{background:transparent; color:inherit; border:0; padding:0 4px; min-width:2.75rem;}
.md[data-look="modern"] .md-clock-n{font-size:1.75rem;}
.md[data-look="modern"] .md-grid > .card{border:0; border-radius:var(--r-panel, 16px); box-shadow:0 10px 26px -14px rgba(0,0,0,.35);}
.md[data-look="modern"] .md-grid > .card[data-md-deal] > .price-tag[data-price-line]{font-size:1.25rem; font-weight:900;}

/* The boutique template's cards keep their own frame; the board around them is the look's. */
html[data-catalog-style="boutique"] .md .md-grid > .card{box-shadow:none;}

/* One moment: the awning sways in when the board is painted. */
@media (prefers-reduced-motion: no-preference){
  html:not([data-a11y-motion="1"]):not([data-motion="off"]) .md-awning{animation:md-sway .9s cubic-bezier(.2,.7,.3,1.2) both;}
  @keyframes md-sway{from{transform:scaleY(.6) rotate(-1deg);} to{transform:none;}}
}
.md :is(a, button, input, select):focus-visible{outline:var(--focus-ring-width, 3px) solid var(--focus-ring, #0B5FFF); outline-offset:2px;}
/* A phone: the frame and the board's sides give the cards their width back
   (the boutique heart and sale badge need it, the no-overlap rule). */
@media (max-width:640px){
  .md{padding-inline:12px;}
  .md[data-look="chalk"]{border-width:6px; padding-inline:8px;}
  .md-awning{margin-inline:-12px;}
}