/* A product's extra fields on the card (app/product-fields.js): the
   producer line and the tag chips under the name, «₪X לק״ג» in the price
   sticker, and the «סינון» chip in the category row. Its own file: a shop
   whose products carry none of them never matches a rule here. */

/* «יצרן»: one quiet line under the name, centred like it, truncated. */
.card-producer{margin:-2px 8px 4px; min-width:0; font-size:0.75rem; line-height:1.3; text-align:center;
  color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Tags: at most two chips in full and «+N» (owner list 26.10, items 8 and
   17): they wrap onto a second line rather than cut a word, 12px in the ink
   on a faint brand tint (≥ 4.5:1 on the card ground). */
.card-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-width:0; margin:0 8px 6px;}
.card-tag{flex:0 1 auto; min-width:0; max-width:100%; padding:2px 8px; border-radius:var(--r-chip, 999px);
  font-size:0.75rem; font-weight:600; line-height:1.4; white-space:normal; overflow-wrap:anywhere; text-align:center;
  color:var(--ink, #1F2A24); background:rgba(31,77,58,0.1); background:color-mix(in srgb, var(--primary, #1F4D3A) 10%, transparent);}
.card-tag-more{flex:none; white-space:nowrap; background:rgba(31,42,36,0.08); background:color-mix(in srgb, var(--ink, #1F2A24) 8%, transparent);}
/* «₪X לק״ג»: a small second line inside the sticker, under the price. */
.price-tag .price-perkg{display:block; font-family:var(--font-body), sans-serif; font-size:0.6875rem; font-weight:500;
  line-height:1.2; opacity:0.85; white-space:nowrap;}
/* The product page keeps the producer and drops the chips (its title says enough). */
.rich-product-purchase .card-tags{display:none;}

/* The tag filter (owner list 26.10, item 18): one row with the categories —
   #navScroll first, then «סינון» (and the chosen tag with ×) at its end; the
   tags open in a small popover under the chip. A bento grid or the side list
   puts the chip on its own line under them. */
#shop.has-tag-filter{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#shop.has-tag-filter > #navScroll{flex:1 1 0; min-width:0; margin-inline:0;}
#shop.has-tag-filter > #navScroll:is([data-bento]){flex-basis:100%; margin-inline:auto;}
html[data-layout-categories="side"] #shop.has-tag-filter > #navScroll{flex-basis:100%;}
.tag-filter{position:relative; display:flex; flex:none; align-items:center; gap:6px; padding-inline:4px 16px; min-width:0;}
#shop.has-tag-filter > #navScroll[data-bento] ~ .tag-filter,
html[data-layout-categories="side"] #shop.has-tag-filter > .tag-filter{flex-basis:100%; max-width:var(--container); padding:4px 16px 0;}
.tag-filter-open, .tag-filter-chosen{
  display:inline-flex; align-items:center; gap:6px; flex:none; min-height:40px; padding:0 14px;
  border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-chip, 999px);
  background:var(--surface, var(--paper, #fff)); color:var(--ink, #1F2A24);
  font:inherit; font-size:0.875rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.tag-filter-open.is-on{border-color:var(--primary, #1F4D3A); color:var(--primary, #1F4D3A);}
.tag-filter-chosen{padding-inline:12px 10px; background:var(--primary, #1F4D3A); border-color:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
.tag-filter-chosen[hidden]{display:none;}
/* A phone with a tag chosen: «סינון» is its icon, the row keeps its categories. */
@media (max-width:640px){
  .tag-filter-open.is-on{padding:0 11px;}
  .tag-filter-open.is-on > span{display:none;}
}
.tag-filter-pop{
  position:absolute; top:calc(100% + 6px); inset-inline-end:16px; z-index:60;
  display:flex; flex-wrap:wrap; gap:6px; width:max-content; max-width:min(20rem, calc(100vw - 32px)); padding:10px;
  border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-control, 12px); background:var(--paper, #fff);
  box-shadow:0 14px 32px -12px rgba(20,24,20,.35);
}
.tag-filter-pop[hidden]{display:none;}
.tag-filter-chip{flex:none; min-height:40px; padding:0 14px; border:1px solid var(--line, rgba(0,0,0,.14));
  border-radius:var(--r-chip, 999px); background:var(--surface, #fff); color:var(--ink, #1F2A24);
  font:inherit; font-size:0.875rem; font-weight:600; cursor:pointer;}
.tag-filter-chip[aria-pressed="true"]{background:var(--primary, #1F4D3A); border-color:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
.tag-filter :is(button):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
#catalog .card.tag-out, #catalog .category-section.tag-empty{display:none;}

html[data-a11y-contrast="1"] :is(.card-tag, .tag-filter-chip, .tag-filter-open, .tag-filter-chosen){background:#000 !important; color:#fff !important; border:1px solid #fff !important;}