/* «מוצרים משלימים» (app/complements.js): the product page's «משלים מצוין» row
   and the drawer's «אולי תרצו גם». Both templates; owner colours through the
   card and palette tokens; logical properties only. */

/* ---- the product page row: compact catalogue cards in one scrolling line ---- */
.complements-row{clear:both;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
.complements-title{font-family:var(--font-body),sans-serif;font-size:.95rem;font-weight:700;margin:0 0 12px;color:var(--ink);}
.complements-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,180px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding:2px 2px 10px;margin:0 -2px;}
.complements-grid>.card{scroll-snap-align:start;min-width:0;width:auto;max-width:none;margin:0;}
.complements-grid>.card .card-img{aspect-ratio:1;height:auto;min-height:0;}
.complements-grid>.card .card-name{font-size:.875rem;line-height:1.35;}
.complements-grid>.card :is(.card-desc,.card-subtitle,.boutique-subtitle,.boutique-thumbnails,.card-tags){display:none;}
html[data-catalog-style="boutique"] .complements-grid>.card{padding:0;}

/* ---- the cart upsell, the first thing in the drawer's foot ---- */
.cart-upsell{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.cart-upsell[hidden]{display:none;}
.cart-upsell-title{display:flex;align-items:center;gap:8px;min-height:44px;list-style:none;cursor:pointer;
  font-size:.875rem;font-weight:700;color:var(--primary);}
.cart-upsell-title::-webkit-details-marker{display:none;}
/* The fold's chevron points down / up: symmetric, so physical sides are fine in both directions. */
.cart-upsell-title::after{content:"";inline-size:.5em;block-size:.5em;margin-inline-start:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);}
.cart-upsell[open]>.cart-upsell-title::after{transform:translateY(2px) rotate(-135deg);}
.cart-upsell-list{list-style:none;margin:0;padding:2px 2px 6px;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;}
.cart-upsell-list>li{flex:0 0 auto;max-width:min(240px,74vw);scroll-snap-align:start;}
.cart-upsell-add{display:flex;align-items:center;gap:8px;inline-size:100%;min-height:52px;padding:4px;padding-inline-start:4px;
  border:1px solid var(--line);border-radius:var(--r-control);background:var(--ui-card-bg, #fff);color:var(--ink);
  font:inherit;text-align:start;cursor:pointer;}
.cart-upsell-add img{flex:none;inline-size:44px;block-size:44px;border-radius:var(--r-chip);object-fit:cover;background:var(--paper-dim);}
.cart-upsell-text{display:flex;flex-direction:column;min-width:0;}
.cart-upsell-name{font-size:.8125rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-upsell-price{font-size:.75rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;unicode-bidi:isolate;}
.cart-upsell-plus{flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;margin-inline-start:auto;border-radius:50%;
  background:var(--ui-qty-plus-bg, var(--primary));color:var(--ui-qty-plus-text, var(--paper));font-size:1.125rem;font-weight:700;line-height:1;}
/* Shorter still (a phone on its side, a raised keyboard): no room, no row. */
@media (max-height:520px){.cart-upsell{display:none;}}