/* «סימונים בכרטיס» «מתחת לתמונה» (app/card-marks.js). Only under
   html[data-marks="below"], except the footer seal (business.kosher, both
   modes); no key = the card as it was. */

/* One muted line under the price: origin · kashrut · tags · «מדבקה». The
   card's own ink, softened, so it reads on a light and a dark card alike. */
html[data-marks="below"] .card[data-key] > .card-marks{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px 6px;
  min-width:0; margin:0 8px 6px; font-size:0.75rem; font-weight:500; line-height:1.4;
  color:inherit; opacity:.78;
}
html[data-marks="below"] .card-marks > [data-mark] + [data-mark]::before{
  content:"·"; margin-inline-end:6px; opacity:.8;
}
html[data-marks="below"] .card-marks .card-origin{
  position:static; inset:auto; transform:none; margin:0; padding:0; background:none; box-shadow:none;
  display:inline-flex; align-items:center; gap:4px; color:inherit; font-size:inherit; width:auto; height:auto;
}
html[data-marks="below"] .card-marks .card-origin-mark{
  position:static; transform:none; width:auto; height:auto; padding:0; background:none; box-shadow:none;
  border-radius:0; clip-path:none; display:inline-flex; animation:none;
}
html[data-marks="below"] .card-marks .card-origin-mark .card-origin-flag{position:static; inset:auto; display:block; padding:0; border:0; width:1.25em; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); clip-path:none; transform:none; animation:none;}
html[data-marks="below"] .card-marks .card-origin-name{display:inline; position:static; margin:0; padding:0; background:none; color:inherit; font:inherit; transform:none;}
/* The owner's tags as words in the line, not chips. */
html[data-marks="below"] .card-marks > .card-tags{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:0 6px; margin:0; padding:0;
}
html[data-marks="below"] .card-marks .card-tag{
  margin:0; padding:0; background:none; border:0; box-shadow:none; border-radius:0;
  color:inherit; font:inherit; line-height:inherit;
}
html[data-marks="below"] .card-marks .card-tag + .card-tag::before{content:"·"; margin-inline-end:6px; opacity:.8;}

/* An offer's regular price, out of the photo, under the name. */
html[data-marks="below"] .card[data-key] > .deal-was[data-marks-out]{
  position:static; inset:auto; transform:none; rotate:none; display:flex; justify-content:center; gap:4px;
  margin:0 8px 2px; padding:0; background:none; box-shadow:none; border:0; border-radius:0;
  color:inherit; font-size:0.8125rem; font-weight:500; opacity:.85;
  font-variant-numeric:tabular-nums;
}

/* The unit in the stepper, under the count: the live unit and a caret; the
   other option stays in the page (app.js's own button) and is reached
   through it. Its 44px hit area grows downward, off the count, into the
   stepper's foot and the card's padding (card-marks.js keeps room there). */
html[data-marks="below"] .qty-value:has(.unit-choice) > .qty-unit{display:none;}
/* The room the 44px hit area grows into: every card alike, so the steppers of a row stay level. */
html[data-marks="below"] .card[data-key] > .qty-row{margin-block-end:12px;}
html[data-marks="below"] .qty-value > .unit-choice{
  position:static; inset:auto; transform:none; margin:1px 0 0; padding:0; display:block; background:none; box-shadow:none;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-toggle{
  display:block; position:static; padding:0; margin:0; background:none; border:0; box-shadow:none; width:auto;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt:not(.on){display:none;}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt.on{
  position:relative; display:inline-flex; align-items:center; gap:2px;
  min-width:0; min-height:0; width:auto; height:auto; margin:0; padding:1px 6px;
  font:700 0.75rem/1.2 var(--font-body), sans-serif; color:inherit;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-chip); box-shadow:none;
  cursor:pointer; transform:none; overflow:visible;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt.on::after{
  content:"▾"; font-size:0.8em; line-height:1; opacity:.75;
}
html[data-marks="below"] .qty-value > .unit-choice .unit-opt.on::before{
  content:""; position:absolute; z-index:1; inset:0 auto auto 50%; width:max(100%, 44px); height:44px; transform:translateX(-50%);
}

/* «כל המוצרים כשרים» (business.kosher): one outlined seal under the shop's name in the footer. */
#siteFooter .shop-kosher{
  display:inline-flex; align-items:center; justify-content:center; align-self:center;
  margin-block-start:8px; padding:3px 12px; border:1px solid currentColor; border-radius:var(--r-chip);
  font-size:0.8125rem; font-weight:700; line-height:1.3;
}

/* The list (rows): the price keeps its own place (layouts-voice.css); the
   name no longer leaves room for the unit pill, which is in the stepper; the
   regular price and the marks follow the name in its column. */
html[data-marks="below"][data-layout-catalog="rows"]:not([data-catalog-style="boutique"]) #catalog .product-grid:not(.product-carousel) > .card:has(.unit-choice-img) > .card-name{align-self:center; margin-bottom:0;}
html[data-marks="below"][data-layout-catalog="rows"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-marks, .deal-was[data-marks-out]){
  position:static; inset:auto; grid-column:2; justify-content:flex-start; text-align:start; margin:2px 0 0;
}
@media (max-width:640px){
  html[data-marks="below"][data-layout-catalog="rows"]:not([data-catalog-style="boutique"]) #catalog .product-grid:not(.product-carousel) > .card:has(.unit-choice-img) > .card-name{align-self:start; margin-bottom:30px;}
}
/* The gallery: the words under the photo start-aligned like the name. */
html[data-marks="below"][data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-marks, .deal-was[data-marks-out]){
  position:static; inset:auto; justify-content:flex-start; margin-inline:0; padding-inline-end:calc(var(--gal-price-w) + 10px);
}
@media (max-width:640px){
  html[data-marks="below"][data-layout-catalog="gallery"] #catalog .product-grid:not(.product-carousel) > .card > :is(.card-marks, .deal-was[data-marks-out]){padding-inline-end:0;}
}

/* Boutique: with the flag off the photo, the heart takes the corner the flag
   gave it (origin-styles.css), clear of a wide sale badge at the top. A
   fixed physical corner on purpose, as there. */
html[data-marks="below"][data-catalog-style="boutique"] .card[data-key]:not(.rich-product-purchase) > .card-img .boutique-favorite{left:auto; right:0.5rem; top:auto; bottom:0.5rem;}
/* Boutique: the price right under the name and the marks under it, so a card
   with a marks line keeps its price level with its row's (the stepper alone
   stays pinned to the card's foot, boutique.css). */
html[data-marks="below"][data-catalog-style="boutique"] .boutique-card:not(.rich-product-purchase) > .price-tag{margin-top:0;}
html[data-marks="below"][data-catalog-style="boutique"] :is(#catalog, #dealsStrip) .boutique-card:not(.rich-product-purchase) > .price-tag{margin-top:0;}
html[data-marks="below"][data-catalog-style="boutique"] .boutique-card > .card-marks{margin-bottom:10px;}
html[data-marks="below"][data-catalog-style="boutique"] .boutique-card:not(.rich-product-purchase) > .qty-row{margin-top:auto;}