/* באנרים — עמוד הבית
 *
 * Campaign banners added to [oweb_hero] after the three the plugin manages.
 * They reuse the plugin's carousel shell (.oweb-hero*) and only add their own
 * layer on top, so the dots, arrows, cross-fade and the fixed 500/480 band are
 * unchanged.
 *
 * The layout is the Figma canvas (pgcGD7OwPQviOELtyrs08d), 1920 x 505 — the
 * `Frame 1` band of each Banner frame, which starts at y=98 on the artboard.
 * Every number below is that frame's own pixel value times --u, so the copy
 * stays locked to the photo instead of drifting across it as the crop moves.
 *
 * Type, per the design file:
 *   Montserrat 900  — BLACK · NOVEMBER · 70% · 25%
 *   Karantina 700   — עד · הנחה באתר ובסניפים · הנחה על חבילות גיוס
 *   Assistant 700   — the button label
 *   Heebo           — stands in for Almoni DL AAA / Almoni Tzar AAA, which are
 *                     licensed per-site and cannot be shipped. Almoni is the
 *                     narrower face, so each Heebo run carries a scaleX taken
 *                     from the design's own render bounds (absoluteRenderBounds
 *                     in the Figma REST payload) divided by the width Heebo
 *                     sets at the same size — that is the only way the lines
 *                     keep the width the design gives them.
 * All four are OFL and self-hosted next to the theme; nothing is fetched from
 * fonts.googleapis.com, and only the hebrew/latin subsets are shipped.
 */

@font-face { font-family: "Heebo"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fonts/heebo-400-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fonts/heebo-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/heebo-700-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/heebo-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 900; font-display: swap;
    src: url("fonts/heebo-900-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 900; font-display: swap;
    src: url("fonts/heebo-900-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap;
    src: url("fonts/montserrat-900-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Karantina"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/karantina-700-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Karantina"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/karantina-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/assistant-700-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/assistant-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

.tzzb-slide {
    --tzzb-green: #41DC59;
    --tzzb-green-deep: #5B9B00;
    --tzzb-grey: #959B91;
    /* The two painted-text fills, at the design's own 159deg. */
    --tzzb-silver-fill: linear-gradient(159deg, #FFFFFF 0%, #E8E8E8 40%, #B2B2B2 49.5%, #CDCDCD 62%, #FFFFFF 84%, #BABABA 100%);
    --tzzb-green-fill: linear-gradient(159deg, #E6FFEA 0%, #8FF29E 40%, #41DC59 49.5%, #1C6E29 50.5%, #34C24B 62%, #9CF7AA 84%, #2B9A3D 100%);
    /* The drop shadow + 2 inner shadows the design puts under every painted
       headline, flattened to the one shadow a text fill can carry. */
    --tzzb-emboss: drop-shadow(0 calc(3 * var(--u)) calc(5.7 * var(--u)) rgba(0, 0, 0, .75));
    font-family: "Heebo", "Assistant", Arial, sans-serif;
}

/* The plugin paints a side scrim over every slide. These banners carry their
   own shading inside the artwork, and a second one on top greys the photo. */
.tzzb-slide::after { content: none; }

.tzzb-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* 500px band / (1920:505) — below this the artwork is cropped on the sides
       rather than the top, and the stage has to follow it. */
    min-width: 1901px;
    aspect-ratio: 1920 / 505;
    container-type: size;
    pointer-events: none;
    --u: calc(100cqw / 1920);
}

.tzzb-stage a { pointer-events: auto; }

/* The cut-out that belongs in front of the product cards. The artwork is
   already laid out on the same 1920x505 canvas, so it lines up by covering. */
.tzzb-model {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* ---- Product cards ---------------------------------------------------- */

.tzzb-cards { position: absolute; inset: 0; z-index: 1; }

.tzzb-card {
    position: absolute;
    top: calc(202 * var(--u));
    width: calc(186 * var(--u));
    height: calc(238 * var(--u));
    background: #EAEAEA;
    border-radius: calc(10 * var(--u));
    text-decoration: none;
    direction: rtl;
}

/* A card that carries a link is a link: it needs a focus ring a keyboard can
   see, and a name screen readers can read before the chip and the prices. */
.tzzb-card__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

a.tzzb-card:focus-visible {
    outline: calc(3 * var(--u)) solid var(--tzzb-green);
    outline-offset: calc(3 * var(--u));
}

a.tzzb-card:hover { filter: brightness(1.03); }

.tzzb-card:nth-child(1) { left: calc(131 * var(--u)); }
.tzzb-card:nth-child(2) { left: calc(591 * var(--u)); }
.tzzb-card:nth-child(3) { left: calc(805 * var(--u)); }
.tzzb-card:nth-child(4) { left: calc(1018 * var(--u)); }

.tzzb-card__frame {
    position: absolute;
    display: block;
    overflow: hidden;
}

.tzzb-card__img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

/* BLACK NOVEMBER — a cut-out product floating on the card, 178 square at
   (4, 27) in the design. */
.tzzb-slide--black-november .tzzb-card__frame {
    top: calc(27 * var(--u));
    left: calc(4 * var(--u));
    width: calc(178 * var(--u));
    height: calc(178 * var(--u));
}
.tzzb-slide--black-november .tzzb-card__img { object-fit: contain; }

/* מבצעי ע-נ-ק — a photo filling the top of the card, 186 square at (0, 0),
   rounded with the card at the top two corners. */
.tzzb-slide--anak .tzzb-card__frame {
    top: 0;
    left: 0;
    width: calc(186 * var(--u));
    height: calc(186 * var(--u));
    border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
}
.tzzb-slide--anak .tzzb-card__img { object-fit: cover; }

/* The discount chip: a 45x20 green rectangle at (12, 10), label centred on it. */
.tzzb-card__tag {
    position: absolute;
    top: calc(10 * var(--u));
    left: calc(12 * var(--u));
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(45 * var(--u));
    height: calc(20 * var(--u));
    padding: 0 calc(4 * var(--u));
    font-family: "Heebo", Arial, sans-serif;
    font-size: calc(13.13 * var(--u));
    font-weight: 900;
    line-height: 1;
    color: #000;
    direction: ltr;
    unicode-bidi: isolate;
    background: var(--tzzb-green);
}
.tzzb-card__tag > span { display: block; transform: scaleX(1.1003); }

/* The price row. Left to right the design reads: the new price with its ₪ on
   its left, then the old price, struck through on the diagonal. Laid out as a
   row rather than four absolute runs, so a longer price still reads. */
.tzzb-card__prices {
    position: absolute;
    inset: 0;
    z-index: 3;
    direction: ltr;
    line-height: 1;
    font-family: "Heebo", Arial, sans-serif;
}

.tzzb-card__new,
.tzzb-card__old {
    position: absolute;
    display: flex;
    direction: ltr;
    align-items: baseline;
    text-decoration: none;
    white-space: nowrap;
    transform-origin: right bottom;
}

/* The two anchors are the design's own ink edges: the new price ends 55 from
   the card's right edge, the was-price 16.6, and both sit on one baseline. */
.tzzb-card__new { right: calc(55 * var(--u));   gap: calc(4 * var(--u));   color: #000; transform: scaleX(1.0554); }
.tzzb-card__old { right: calc(16.6 * var(--u)); gap: calc(2.5 * var(--u)); color: var(--tzzb-grey); transform: scaleX(.8678); }

.tzzb-slide--black-november .tzzb-card__new { bottom: calc(12.9 * var(--u)); }
.tzzb-slide--black-november .tzzb-card__old { bottom: calc(16.69 * var(--u)); }
.tzzb-slide--anak           .tzzb-card__new { bottom: calc(7.9 * var(--u)); }
.tzzb-slide--anak           .tzzb-card__old { bottom: calc(11.69 * var(--u)); }

/* Sizes are the design's, re-cut for Heebo: Almoni sets a digit about 0.53 of
   its em and Heebo about 0.73, so the same font-size would print a third too
   tall. Each size below is the one at which Heebo's ink matches the design's. */
.tzzb-card__new .tzzb-card__num { font-size: calc(34.61 * var(--u)); font-weight: 900; }
.tzzb-card__new .tzzb-card__cur { font-size: calc(10.9 * var(--u));  font-weight: 900; }
.tzzb-card__old .tzzb-card__num { font-size: calc(16.02 * var(--u)); font-weight: 400; }
.tzzb-card__old .tzzb-card__cur { font-size: calc(8.5 * var(--u));   font-weight: 400; }

/* The design strikes the old price with a line tilted 14.9deg, not with the
   browser's horizontal rule. */
.tzzb-card__old { position: absolute; }
.tzzb-card__old::after {
    position: absolute;
    top: 58%;
    left: calc(-2 * var(--u));
    width: calc(104% + 4 * var(--u));
    height: calc(2 * var(--u));
    content: "";
    background: var(--tzzb-grey);
    transform: translateY(-50%) rotate(-14.9deg);
}

/* ---- The offer block --------------------------------------------------
 *
 * Every run sits at its own Figma coordinate on the 1920x505 band; the block
 * itself is only the positioning context. The wrappers the markup puts around
 * them stay out of the way (static, no box of their own).
 */

.tzzb-offer {
    position: absolute;
    inset: 0;
    z-index: 3;
    direction: rtl;
    color: #fff;
}

.tzzb-offer > p,
.tzzb-title,
.tzzb-discount { margin: 0; }

.tzzb-title,
.tzzb-discount { position: static; display: block; }

.tzzb-eyebrow,
.tzzb-title__a,
.tzzb-title__b,
.tzzb-discount__prefix,
.tzzb-discount__value,
.tzzb-note,
.tzzb-footnote,
.tzzb-cta {
    position: absolute;
    display: block;
    margin: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Painted headlines: the fill is a gradient clipped to the glyphs.
   Where a line carries the substitute-width wrapper the glyphs are painted by
   that wrapper and not by the positioned box, so the fill has to be clipped on
   it too — otherwise the text is transparent over nothing and disappears. */
.tzzb-title__a,
.tzzb-title__b,
.tzzb-discount__value,
.tzzb-box__a,
.tzzb-box__b {
    color: transparent;
    filter: var(--tzzb-emboss);
    background-clip: text;
    -webkit-background-clip: text;
}

.tzzb-title__a .tzzb-sx,
.tzzb-title__b .tzzb-sx,
.tzzb-discount__value .tzzb-sx,
.tzzb-box__a .tzzb-sx,
.tzzb-box__b .tzzb-sx {
    background-image: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* The hairline the design draws above the discount row. It belongs to the
   headline block, so it is drawn as its own rule rather than a border — and
   only where there is a discount row for it to sit above. */
.tzzb-has-rule::before {
    position: absolute;
    height: calc(1.2 * var(--u));
    content: "";
    background: #fff;
}

/* The small line that flanks the eyebrow on two of the banners. */
.tzzb-eyebrow::before,
.tzzb-eyebrow::after {
    position: absolute;
    top: calc(20.1 * var(--u));
    width: calc(110.3 * var(--u));
    height: calc(.6 * var(--u));
    content: "";
    background: #fff;
}

/* Heebo standing in for Almoni: the run keeps the width the design gives it. */
.tzzb-sx { display: inline-block; }

.tzzb-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    width: calc(278 * var(--u));
    height: calc(56 * var(--u));
    font-family: "Assistant", "Heebo", Arial, sans-serif;
    font-size: calc(24 * var(--u));
    font-weight: 700;
    line-height: calc(26 * var(--u));
    color: #fff !important;
    text-decoration: none;
    background: var(--tzzb-green-deep);
    border-radius: calc(4 * var(--u));
    transition: filter .2s ease, transform .2s ease;
}

.tzzb-cta:hover,
.tzzb-cta:focus-visible { filter: brightness(1.08); }

.tzzb-cta__arrow { display: block; flex: none; transform: scaleX(-1); }

/* ---- BLACK NOVEMBER --------------------------------------------------- */

.tzzb-slide--black-november .tzzb-title__a {   /* BLACK */
    top: calc(41.39 * var(--u));
    left: calc(1261 * var(--u));
    width: calc(294 * var(--u));
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 900;
    font-size: calc(80.09 * var(--u));
    line-height: 1;
    letter-spacing: calc(-0.8 * var(--u));
    background-image: var(--tzzb-silver-fill);
}
.tzzb-slide--black-november .tzzb-title__b {   /* NOVEMBER */
    top: calc(121.88 * var(--u));
    left: calc(1262.5 * var(--u));
    width: calc(293 * var(--u));
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 900;
    font-size: calc(47.61 * var(--u));
    line-height: 1;
    letter-spacing: calc(-0.48 * var(--u));
    background-image: var(--tzzb-green-fill);
}
.tzzb-slide--black-november .tzzb-has-rule::before {
    top: calc(197.6 * var(--u)); left: calc(1262.2 * var(--u)); width: calc(292.2 * var(--u));
}
.tzzb-slide--black-november .tzzb-discount__value {   /* 70% */
    top: calc(210.41 * var(--u));
    left: calc(1265.3 * var(--u));
    width: calc(231 * var(--u));
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 900;
    font-size: calc(104.22 * var(--u));
    line-height: 1;
    letter-spacing: calc(-1.04 * var(--u));
    background-image: var(--tzzb-green-fill);
}
.tzzb-slide--black-november .tzzb-discount__prefix {   /* עד */
    top: calc(210.93 * var(--u));
    left: calc(1497 * var(--u));
    width: calc(53 * var(--u));
    font-family: "Karantina", "Heebo", sans-serif;
    font-weight: 700;
    font-size: calc(67.25 * var(--u));
    line-height: 1;
    letter-spacing: 0;
}
.tzzb-slide--black-november .tzzb-note {
    top: calc(312.96 * var(--u));
    left: calc(1265.7 * var(--u));
    width: calc(283 * var(--u));
    font-family: "Karantina", "Heebo", sans-serif;
    font-weight: 700;
    font-size: calc(49.58 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.28 * var(--u));
}
.tzzb-slide--black-november .tzzb-cta {
    top: calc(384 * var(--u)); left: calc(1271 * var(--u));
}

/* ---- מבצעי ע-נ-ק ------------------------------------------------------
 * This one is set in solid white under a wide soft shadow, not in the painted
 * silver/green of the other three. */

.tzzb-slide--anak .tzzb-title__a,
.tzzb-slide--anak .tzzb-title__b,
.tzzb-slide--anak .tzzb-title__a .tzzb-sx,
.tzzb-slide--anak .tzzb-title__b .tzzb-sx,
.tzzb-slide--anak .tzzb-discount__value,
.tzzb-slide--anak .tzzb-discount__prefix,
.tzzb-slide--anak .tzzb-note {
    background-image: none;
    color: #fff;
    filter: drop-shadow(0 0 calc(20 * var(--u)) rgba(0, 0, 0, .7));
    -webkit-background-clip: border-box;
    background-clip: border-box;
}
.tzzb-slide--anak .tzzb-title__a {   /* מבצעי */
    top: calc(32.26 * var(--u));
    left: calc(1333.7 * var(--u));
    width: calc(154 * var(--u));
    font-weight: 900;
    font-size: calc(53.41 * var(--u));
    line-height: 1;
    letter-spacing: calc(2.14 * var(--u));
}
.tzzb-slide--anak .tzzb-title__a .tzzb-sx { transform: scaleX(0.9427); }
.tzzb-slide--anak .tzzb-title__b {   /* ע-נ-ק */
    top: calc(76.1 * var(--u));
    left: calc(1265 * var(--u));
    width: calc(289 * var(--u));
    font-weight: 900;
    font-size: calc(106.81 * var(--u));
    line-height: 1;
    letter-spacing: calc(-1.07 * var(--u));
}
.tzzb-slide--anak .tzzb-title__b .tzzb-sx { transform: scaleX(1.0468); }
.tzzb-slide--anak .tzzb-has-rule::before {
    top: calc(206 * var(--u)); left: calc(1271 * var(--u)); width: calc(278 * var(--u));
}
.tzzb-slide--anak .tzzb-discount__value {   /* 70% */
    top: calc(213.29 * var(--u));
    left: calc(1268.7 * var(--u));
    width: calc(227 * var(--u));
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 900;
    font-size: calc(102.29 * var(--u));
    line-height: 1;
    letter-spacing: calc(-1.02 * var(--u));
}
.tzzb-slide--anak .tzzb-discount__prefix {   /* עד */
    top: calc(212.2 * var(--u));
    left: calc(1496.2 * var(--u));
    width: calc(52 * var(--u));
    font-family: "Karantina", "Heebo", sans-serif;
    font-weight: 700;
    font-size: calc(66 * var(--u));
    line-height: 1;
    letter-spacing: 0;
}
.tzzb-slide--anak .tzzb-note {
    top: calc(312.86 * var(--u));
    left: calc(1269.1 * var(--u));
    width: calc(278 * var(--u));
    font-family: "Karantina", "Heebo", sans-serif;
    font-weight: 700;
    font-size: calc(48.66 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.28 * var(--u));
}
.tzzb-slide--anak .tzzb-cta {
    top: calc(384 * var(--u)); left: calc(1271 * var(--u));
}

/* ---- מתגייסים --------------------------------------------------------- */

.tzzb-slide--recruits .tzzb-eyebrow {
    top: calc(36.53 * var(--u));
    left: calc(1173.1 * var(--u));
    width: calc(228 * var(--u));
    font-weight: 400;
    font-size: calc(23.71 * var(--u));
    line-height: 1;
    letter-spacing: calc(2.85 * var(--u));
}
.tzzb-slide--recruits .tzzb-eyebrow .tzzb-sx { transform: scaleX(1.1028); }
.tzzb-slide--recruits .tzzb-eyebrow::before { left: calc(-135.5 * var(--u)); }
.tzzb-slide--recruits .tzzb-eyebrow::after  { left: calc(253.9 * var(--u)); }
.tzzb-slide--recruits .tzzb-title__a {   /* מצבעי ע-נ-ק */
    top: calc(67.71 * var(--u));
    left: calc(1047.5 * var(--u));
    width: calc(480 * var(--u));
    font-weight: 900;
    font-size: calc(80.76 * var(--u));
    line-height: 1;
    letter-spacing: calc(-0.81 * var(--u));
    background-image: var(--tzzb-silver-fill);
}
.tzzb-slide--recruits .tzzb-title__a .tzzb-sx { transform: scaleX(1.0555); }
.tzzb-slide--recruits .tzzb-title__b {   /* בטקטיקל זון */
    top: calc(158.92 * var(--u));
    left: calc(1031 * var(--u));
    width: calc(509 * var(--u));
    font-weight: 900;
    font-size: calc(40.5 * var(--u));
    line-height: 1;
    letter-spacing: calc(2.83 * var(--u));
    background-image: var(--tzzb-green-fill);
}
.tzzb-slide--recruits .tzzb-title__b .tzzb-sx { transform: scaleX(1.0866); }
.tzzb-slide--recruits .tzzb-has-rule::before {
    top: calc(216 * var(--u)); left: calc(1146.9 * var(--u)); width: calc(278 * var(--u));
}
.tzzb-slide--recruits .tzzb-discount__value {   /* 25% */
    top: calc(222.69 * var(--u));
    left: calc(1149.6 * var(--u));
    width: calc(217 * var(--u));
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 900;
    font-size: calc(102.29 * var(--u));
    line-height: 1;
    letter-spacing: calc(-1.02 * var(--u));
    background-image: var(--tzzb-green-fill);
}
.tzzb-slide--recruits .tzzb-discount__prefix {   /* עד */
    top: calc(222.2 * var(--u));
    left: calc(1372.1 * var(--u));
    width: calc(52 * var(--u));
    font-family: "Karantina", "Heebo", sans-serif;
    font-weight: 700;
    font-size: calc(66 * var(--u));
    line-height: 1;
    letter-spacing: 0;
}
.tzzb-slide--recruits .tzzb-note {
    top: calc(322.84 * var(--u));
    left: calc(1143 * var(--u));
    width: calc(282 * var(--u));
    font-family: "Karantina", "Heebo", sans-serif;
    font-weight: 700;
    font-size: calc(48.66 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.28 * var(--u));
}
.tzzb-slide--recruits .tzzb-cta {
    top: calc(388 * var(--u)); left: calc(1146.9 * var(--u));
    color: #000 !important;
    background: var(--tzzb-green);
}

/* ---- משתחררים --------------------------------------------------------- */

.tzzb-slide--discharged .tzzb-eyebrow {
    top: calc(58.53 * var(--u));
    left: calc(1163.2 * var(--u));
    width: calc(249 * var(--u));
    font-weight: 400;
    font-size: calc(23.71 * var(--u));
    line-height: 1;
    letter-spacing: calc(2.85 * var(--u));
}
.tzzb-slide--discharged .tzzb-eyebrow .tzzb-sx { transform: scaleX(1.109); }
.tzzb-slide--discharged .tzzb-eyebrow::before { left: calc(-125.6 * var(--u)); }
.tzzb-slide--discharged .tzzb-eyebrow::after  { left: calc(263.8 * var(--u)); }
.tzzb-slide--discharged .tzzb-title__a {   /* הכוכבים פגים */
    top: calc(101.1 * var(--u));
    left: calc(1113.5 * var(--u));
    width: calc(348 * var(--u));
    font-weight: 900;
    font-size: calc(61.66 * var(--u));
    line-height: 1;
    letter-spacing: calc(-0.62 * var(--u));
    background-image: var(--tzzb-silver-fill);
}
.tzzb-slide--discharged .tzzb-title__a .tzzb-sx { transform: scaleX(0.9412); }
.tzzb-slide--discharged .tzzb-title__b {   /* יום לפני השחרור. */
    top: calc(164.18 * var(--u));
    left: calc(1028 * var(--u));
    width: calc(519 * var(--u));
    font-weight: 900;
    font-size: calc(67.53 * var(--u));
    line-height: 1;
    letter-spacing: calc(-0.68 * var(--u));
    text-align: right;
    background-image: var(--tzzb-green-fill);
}
.tzzb-slide--discharged .tzzb-title__b .tzzb-sx { transform: scaleX(1.0087); transform-origin: right; }
.tzzb-slide--discharged .tzzb-has-rule::before { content: none; }

/* The outlined block, and the voucher card that overlaps its left edge. */
.tzzb-box {
    position: absolute;
    top: calc(251.5 * var(--u));
    left: calc(1021.5 * var(--u));
    z-index: 3;
    box-sizing: content-box;
    width: calc(527.8 * var(--u));
    height: calc(132.2 * var(--u));
    border: calc(1.7 * var(--u)) solid var(--tzzb-green);
    border-radius: calc(5.6 * var(--u));
}

.tzzb-box__lines { display: block; }

.tzzb-box__a,
.tzzb-box__b {
    position: absolute;
    display: block;
    line-height: 1;
    white-space: nowrap;
    filter: var(--tzzb-emboss);
}
.tzzb-box__a {   /* ממשים כוכבים ב- */
    top: calc(7.46 * var(--u));
    left: calc(79.3 * var(--u));
    width: calc(437.8 * var(--u));
    font-weight: 700;
    font-size: calc(60.16 * var(--u));
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
    background-image: var(--tzzb-green-fill);
}
.tzzb-box__a .tzzb-sx { transform: scaleX(0.7295); transform-origin: right; }
.tzzb-box__b {   /* BLACK NOVEMBER */
    top: calc(74.69 * var(--u));
    left: calc(195.8 * var(--u));
    width: calc(322 * var(--u));
    font-weight: 900;
    font-size: calc(40.63 * var(--u));
    line-height: 1;
    letter-spacing: calc(-0.41 * var(--u));
    text-align: center;
    background-image: var(--tzzb-silver-fill);
}
.tzzb-box__b .tzzb-sx { transform: scaleX(0.9153); }

/* The voucher.
 *
 * In the design the 225x175 rectangle is the group's *mask*, not a plate: it
 * bounds the tilted card and is never painted. Filling it white would put a
 * card-sized white square on the artwork, which it must not do.
 *
 * The design also lets that mask cut the card: at the Figma size the card's
 * tilted silhouette measures 226.7 x 208.2 against a 225.1 x 175.2 mask, so
 * its lower-right corner is sliced off and its top crosses the outline into
 * the headline. Per Kfir (2026-11-08) the whole card has to sit inside the
 * outlined block instead, so it is scaled down rather than clipped.
 *
 * The geometry is the asset's own: the card silhouette is 981 x 672 inside the
 * 1874 x 839 artwork, and at 32.1448deg that silhouette's bounding box is
 * 133.125 x 122.232 -- the 1.08912 : 1 ratio this frame carries. The frame IS
 * that bounding box, so insetting it from the block's edges is what puts the
 * card inside the border. Everything inside is expressed in percentages of the
 * frame, so the same rule holds at every breakpoint:
 *   image box   = 209.968 x 94.004  ->  157.722% x 76.906% of the frame
 *   silhouette centre sits 0.507 x 1.510 off the image centre once rotated,
 *   i.e. 0.2415% x 1.6058% of the image's own box, which re-centres it.
 * No overflow:hidden anywhere on this path -- nothing is cropped to fit. */
.tzzb-box__frame {
    position: absolute;
    top: calc(5 * var(--u));
    left: calc(5 * var(--u));
    overflow: visible;
    height: calc(122.232 * var(--u));
    aspect-ratio: 133.125 / 122.232;
    width: auto;
    background: transparent;
    border-radius: 0;
}

.tzzb-box__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 157.722% !important;
    height: 76.906% !important;
    max-width: none !important;
    object-fit: cover;
    transform: translate(-50%, -50%) translate(0.2415%, 1.6058%) rotate(32.1448deg);
}

.tzzb-slide--discharged .tzzb-footnote {
    top: calc(409.52 * var(--u));
    left: calc(1023 * var(--u));
    width: calc(528 * var(--u));
    font-weight: 400;
    font-size: calc(32.08 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.64 * var(--u));
    color: #fff;
}
.tzzb-slide--discharged .tzzb-footnote .tzzb-sx { transform: scaleX(0.9929); }

/* ---- Phone and tablet ----
 *
 * 1200px, not 767. The stage is never narrower than 1901px, so below roughly
 * 1173 the crop takes the offer block off the side of the screen — the layout
 * has to change where the copy stops fitting, not where phones start. Below
 * this width the artwork is the portrait crop and the copy is laid out in
 * flow over it rather than at Figma coordinates.
 *
 * Everything positioned above is reset explicitly: a leftover `position:
 * absolute` with pixel offsets is what breaks these layouts.
 */
@media (max-width: 1200px) {

    .tzzb-stage {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: auto !important;
        transform: none !important;
        container-type: normal;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 18px 20px 16px;
        --u: 1px;
    }

    .tzzb-model { display: none !important; }

    .tzzb-offer {
        position: static !important;
        inset: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        text-align: center;
    }

    /* The desktop rule is drawn by ::before at a Figma coordinate; in flow it
       belongs above the discount row instead. */
    .tzzb-has-rule::before { content: none !important; }

    .tzzb-eyebrow,
    .tzzb-title__a,
    .tzzb-title__b,
    .tzzb-discount__prefix,
    .tzzb-discount__value,
    .tzzb-note,
    .tzzb-footnote,
    .tzzb-cta {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        letter-spacing: normal !important;
    }

    /* The substitute-width correction is a desktop concern: in flow the runs
       are free to take the width they need. */
    .tzzb-sx { transform: none !important; }

    .tzzb-eyebrow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    .tzzb-eyebrow::before,
    .tzzb-eyebrow::after {
        position: static !important;
        top: auto !important;
        left: auto !important;
        flex: 0 0 48px;
        width: 48px !important;
        height: 1px !important;
    }

    .tzzb-title { line-height: 1; }
    .tzzb-slide--black-november .tzzb-title__a { font-size: 42px !important; }
    .tzzb-slide--black-november .tzzb-title__b { font-size: 26px !important; }
    .tzzb-slide--anak .tzzb-title__a { font-size: 26px !important; }
    .tzzb-slide--anak .tzzb-title__b { font-size: 56px !important; }
    .tzzb-slide--recruits .tzzb-title__a { font-size: 44px !important; }
    .tzzb-slide--recruits .tzzb-title__b { font-size: 24px !important; }
    .tzzb-slide--discharged .tzzb-title__a { font-size: 32px !important; }
    .tzzb-slide--discharged .tzzb-title__b { font-size: 34px !important; text-align: center !important; }

    .tzzb-discount {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 6px;
        margin-top: 14px !important;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, .55);
    }

    .tzzb-discount__prefix { font-size: 24px !important; line-height: 1 !important; }
    .tzzb-discount__value { font-size: 46px !important; }

    .tzzb-note { margin-top: 2px !important; font-size: 20px !important; }

    .tzzb-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: flex;
        align-items: center;
        box-sizing: border-box !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 10px;
        padding: 8px 10px 8px 76px;
        border-width: 2px !important;
        border-radius: 6px !important;
    }

    .tzzb-box__lines { flex: 1 1 auto; text-align: center; }

    .tzzb-box__a,
    .tzzb-box__b {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        letter-spacing: normal !important;
        text-align: center !important;
    }
    .tzzb-box__a { font-size: 24px !important; }
    .tzzb-box__b { font-size: 19px !important; }

    /* Same containment rule as the desktop: the frame is the card's tilted
       silhouette box, inset inside the outline. 100% here is the block's
       padding box, so the card follows the block's height instead of standing
       at a fixed size that outgrows it. */
    .tzzb-box__frame {
        position: absolute !important;
        top: 3px !important;
        left: 3px !important;
        height: calc(100% - 6px) !important;
        aspect-ratio: 133.125 / 122.232;
        width: auto !important;
        overflow: visible !important;
        transform: none;
    }

    .tzzb-slide--discharged .tzzb-footnote { margin-top: 8px !important; font-size: 15px !important; }

    .tzzb-cta {
        width: auto !important;
        min-width: 180px;
        height: 42px !important;
        margin-top: 12px;
        padding: 0 18px;
        font-size: 16px !important;
        line-height: 1 !important;
        align-self: center;
    }

    /* A row of small cards along the bottom: the prices have to survive the
       phone, and four desktop cards do not fit across 375px.
       Clear of the dots, which sit at the foot of the band. */
    .tzzb-cards {
        position: absolute !important;
        inset: auto 12px 34px 12px;
        z-index: 4;
        display: flex;
        gap: 6px;
        justify-content: center;
    }

    /* relative, not static: the discount chip is absolute inside the card, and
       with a static card all four chips resolve against the row and pile up on
       the first one. */
    .tzzb-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        flex: 1 1 0;
        width: auto !important;
        max-width: 84px;
        height: auto !important;
        padding: 6px 4px 5px;
        border-radius: 5px !important;
    }

    .tzzb-card__frame {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 46px !important;
        margin-bottom: 2px;
        border-radius: 0 !important;
    }
    .tzzb-card__img { object-fit: contain !important; }
    a.tzzb-card:focus-visible { outline: 2px solid var(--tzzb-green); outline-offset: 2px; }

    .tzzb-card__tag {
        position: absolute !important;
        top: 2px;
        left: 2px;
        min-width: 0;
        height: 13px;
        padding: 0 3px;
        font-size: 9px !important;
    }
    .tzzb-card__tag > span { transform: none; }

    .tzzb-card__prices {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        display: flex;
        gap: 3px;
        justify-content: center;
    }

    .tzzb-card__new,
    .tzzb-card__old {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .tzzb-card__new .tzzb-card__num { font-size: 15px !important; transform: none; }
    .tzzb-card__new .tzzb-card__cur { font-size: 8px !important; }
    .tzzb-card__old .tzzb-card__num { font-size: 10px !important; transform: none; }
    .tzzb-card__old .tzzb-card__cur { font-size: 7px !important; }
    .tzzb-card__old::after { height: 1px; }
}

/* Tablet: the same flow layout, with type stepped up for the wider band. */
@media (min-width: 768px) and (max-width: 1200px) {

    .tzzb-stage { padding: 30px 40px 24px; }

    .tzzb-eyebrow { font-size: 20px !important; gap: 16px; }
    .tzzb-eyebrow::before,
    .tzzb-eyebrow::after { flex-basis: 80px; width: 80px !important; }

    .tzzb-slide--black-november .tzzb-title__a { font-size: 62px !important; }
    .tzzb-slide--black-november .tzzb-title__b { font-size: 38px !important; }
    .tzzb-slide--anak .tzzb-title__a { font-size: 38px !important; }
    .tzzb-slide--anak .tzzb-title__b { font-size: 82px !important; }
    .tzzb-slide--recruits .tzzb-title__a { font-size: 64px !important; }
    .tzzb-slide--recruits .tzzb-title__b { font-size: 34px !important; }
    .tzzb-slide--discharged .tzzb-title__a { font-size: 46px !important; }
    .tzzb-slide--discharged .tzzb-title__b { font-size: 50px !important; }

    .tzzb-discount { gap: 10px; margin-top: 14px !important; padding-top: 14px; }
    .tzzb-discount__prefix { font-size: 34px !important; }
    .tzzb-discount__value { font-size: 68px !important; }

    .tzzb-note { font-size: 28px !important; }

    .tzzb-box { padding-left: 100px; padding-right: 16px; }
    .tzzb-box__a { font-size: 34px !important; }
    .tzzb-box__b { font-size: 27px !important; }
    .tzzb-box__frame { top: 4px !important; left: 4px !important;
        height: calc(100% - 8px) !important; }

    .tzzb-slide--discharged .tzzb-footnote { font-size: 20px !important; }

    .tzzb-cta { height: 50px !important; font-size: 19px !important; min-width: 220px; }

    .tzzb-cards { inset: auto 24px 30px 24px; gap: 10px; }
    .tzzb-card { max-width: 128px; padding: 8px 6px 7px; }
    .tzzb-card__frame { height: 74px !important; }
    .tzzb-card__tag { height: 18px; padding: 0 5px; font-size: 12px !important; }
    .tzzb-card__new .tzzb-card__num { font-size: 22px !important; }
    .tzzb-card__new .tzzb-card__cur { font-size: 11px !important; }
    .tzzb-card__old .tzzb-card__num { font-size: 14px !important; }
    .tzzb-card__old .tzzb-card__cur { font-size: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .tzzb-cta { transition: none; }
}