/* ירוק ירוק — Wolt-style buy box (compact) */
.yyb{--yyb-dark:#104F2A;--yyb-green:#66A11F;--yyb-lime:#C9E36B;--yyb-soft:#EEF3E6;--yyb-deep:#0B3A1F;container-type:inline-size;display:flex;flex-direction:column;gap:7px;margin-top:auto;font-family:Rubik,sans-serif;width:100%}
.yyb button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1}

/* unit toggle (sliding highlight) */
.yyb__seg{position:relative;display:grid;grid-template-columns:repeat(var(--n,2),1fr);background:var(--yyb-soft);border-radius:999px;padding:3px;isolation:isolate}
.yyb__segbtn{position:relative;z-index:1;border:0!important;background:transparent!important;color:var(--yyb-dark)!important;font-weight:600;font-size:12.5px!important;padding:6px 4px!important;border-radius:999px;transition:color .25s}
.yyb__segbtn.is-on{color:#fff!important}
.yyb__seglight{position:absolute;z-index:0;top:3px;bottom:3px;right:3px;width:calc((100% - 6px) / var(--n,2));border-radius:999px;background:var(--yyb-dark);transform:translateX(calc(var(--seg,0) * -100%));transition:transform .35s cubic-bezier(.34,1.56,.64,1)}

/* stepper + add */
.yyb__row{display:flex;gap:6px;align-items:stretch}
.yyb__step{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:2px;background:var(--yyb-soft);border-radius:999px;padding:3px;min-width:0}
.yyb__minus,.yyb__plus{width:28px;height:28px;flex:0 0 28px;border-radius:50%!important;border:0!important;background:#fff!important;color:var(--yyb-dark)!important;font-size:17px!important;font-weight:500;padding:0!important;display:grid;place-items:center;box-shadow:0 1px 3px rgba(16,79,42,.18);transition:transform .15s,background-color .2s,color .2s}
.yyb__minus:hover,.yyb__plus:hover{background:var(--yyb-dark)!important;color:#fff!important}
.yyb__minus:active,.yyb__plus:active{transform:scale(.85)}
.yyb__minus:disabled{opacity:.35;pointer-events:none}
.yyb__qty{flex:1;text-align:center;font-weight:600;font-size:13.5px;color:var(--yyb-deep);white-space:nowrap;display:inline-block}
.yyb__add{flex:0 0 auto;display:flex!important;align-items:center;justify-content:center;gap:6px;border:0!important;border-radius:999px!important;background:var(--yyb-dark)!important;color:#fff!important;padding:0 12px!important;font-size:13.5px!important;font-weight:600;min-height:34px;transition:background-color .25s,transform .15s}
.yyb__add:hover{background:var(--yyb-green)!important}
.yyb__add:active{transform:scale(.96)}
.yyb__ico{width:16px;height:16px;flex:0 0 16px}
.yyb__total{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;display:inline-block}
.yyb--card .yyb__label{display:none}
.yyb.is-busy .yyb__add{opacity:.7;pointer-events:none}
.yyb.is-added .yyb__add{background:var(--yyb-lime)!important;color:var(--yyb-deep)!important}
.yyb--card.is-added .yyb__label{display:inline}
.yyb--card.is-added .yyb__total,.yyb--card.is-added .yyb__ico{display:none}

/* playful micro-feedback */
.is-pop{animation:yyb-pop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes yyb-pop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.yyb-fly{position:fixed;z-index:99999;border-radius:50%;object-fit:cover;pointer-events:none;transition:transform .6s cubic-bezier(.5,-.3,.7,1),opacity .6s ease;background:#F3F2EE}
@media (prefers-reduced-motion:reduce){.is-pop{animation:none}.yyb__seglight{transition:none}}

/* very narrow cards (2 per row on phones): stepper above the button */
@container (max-width:205px){
  .yyb__row{flex-direction:column}
  .yyb__add{min-height:34px}
}

/* product page variant */
.yyb--page{gap:12px;margin:16px 0 24px;max-width:460px}
.yyb__per{margin:0;font-size:16px;color:#5B6B60}
.yyb__per b{font-size:26px;font-weight:800;color:var(--yyb-dark);font-variant-numeric:tabular-nums}
.yyb--page .yyb__seg{padding:4px}
.yyb--page .yyb__seglight{top:4px;bottom:4px;right:4px;width:calc((100% - 8px) / var(--n,2))}
.yyb--page .yyb__segbtn{font-size:15px!important;padding:9px 8px!important}
.yyb--page .yyb__row{gap:10px}
.yyb--page .yyb__step{flex:0 0 150px;padding:5px}
.yyb--page .yyb__minus,.yyb--page .yyb__plus{width:36px;height:36px;flex-basis:36px;font-size:21px!important}
.yyb--page .yyb__qty{font-size:16px}
.yyb--page .yyb__add{flex:1;justify-content:space-between;min-height:48px;font-size:16px!important;padding:0 20px!important}
.yyb--page .yyb__ico{display:none}
.yyb--page .yyb__total{font-size:17px}
.yyb__note{margin:0;font-size:13px;color:#7A877E}
.yyb__note[hidden]{display:none}
.yyb-out{display:block;text-align:center;padding:9px;border-radius:999px;background:#EEF3E6;color:#104F2A;font-weight:600;font-size:14px}

/* quieter unit selector (Shaked approved 27.9) — the dark "add" button stays the only strong element */
.yyb .yyb__seg{background:transparent;padding:2px;box-shadow:inset 0 0 0 1px #E3E8DC}
.yyb .yyb__segbtn{font-size:12px!important;font-weight:500;padding:4px 4px!important;color:#8A948D!important}
.yyb .yyb__segbtn.is-on{color:#104F2A!important;font-weight:700}
.yyb .yyb__seglight{top:2px;bottom:2px;right:2px;width:calc((100% - 4px) / var(--n,2));background:#E9F2DD;box-shadow:none}

.yyb--page .yyb__seg{max-width:300px;padding:3px}
.yyb--page .yyb__segbtn{font-size:14px!important;padding:7px 6px!important}
.yyb--page .yyb__seglight{top:3px;bottom:3px;right:3px;width:calc((100% - 6px) / var(--n,2))}