/* Sales banners: the four templates.
   Loaded only on a page that renders a banner (inc/banners.php).

   The canvas is the handoff's 1600x460 with a 24px radius. Below 1600 the
   layout flexes instead of the whole thing scaling: a scaled banner would
   shrink the type with it, and the type is the point. Every fixed measure the
   design gives (a 1030px column, a 72px inset, a 580px panel) is written as
   min(the design's px, the same fraction of the banner's own width), so the
   proportion survives every width down to the phone layout.

   Every type size is a custom property the renderer writes per banner, twice:
   once in px and once as a share of the banner's width. min() of the two lets
   a banner in a 1140px column shrink in proportion, and max() puts a floor
   under it, because a 10px trust line is not a smaller version of the design,
   it is an unreadable one.

   Container queries and not media queries for that, because a banner does not
   know how wide the window is, only how wide its own column is.

   Order matters below: the base is the split template, each template then
   overrides what it needs, and the phone block at the bottom overrides them
   all. Where a phone rule has to beat a template rule it repeats the
   template's class, which is why some selectors there look redundant. */

.smb{
  container-type:inline-size;   /* every size below is measured against the banner, not the window */
  --smb-ground:#fdf7f1;
  --smb-ink:#171717;
  --smb-c-body:#4a4540;
  --smb-c-muted:#6f675e;
  --smb-cta-hover:#b0181f;
  --smb-panel:#ffffff;

  position:relative;
  display:flex;
  flex-direction:row-reverse;   /* RTL: text first in the DOM, so this puts the photo on the left */
  align-items:stretch;
  width:100%;
  max-width:1600px;
  /* The editor's choice: נמוך 360, רגיל 460, גבוה 540. A plain height and not
     a share of the width like everything else here: an element that declares
     a container cannot measure itself against it, so cqw in this one property
     would silently fall back to the viewport. */
  height:var(--smb-h,460px);
  margin-inline:auto;
  border-radius:24px;
  overflow:hidden;
  background:var(--smb-ground);
  color:var(--smb-ink);
  font-family:var(--font);
}

.smb-dark{
  --smb-ground:#141414;
  --smb-ink:#ffffff;
  --smb-c-body:#cfc8c1;
  --smb-c-muted:#8f8881;
  --smb-cta-hover:#ef3a41;
  --smb-panel:#101010;
}

/* Image side. The photo is mirrored when it moves, so the product keeps
   facing the words rather than turning its back on them. */
.smb-image-right{flex-direction:row}
.smb-image-right .smb-photo{transform:scaleX(-1)}

.smb-media{
  flex:0 0 64.375%;   /* 1030 of 1600 */
  position:relative;
  overflow:hidden;
  background:#e9e2da;
}
.smb-photo{
  width:100%;height:100%;
  object-fit:cover;
  object-position:46% 52%;
  display:block;
}
/* The height once more, heavier. On shop, category and product pages
   WooCommerce's own `.woocommerce img{height:auto}` outweighs the rule above,
   and the photo kept its natural shape with the box's grey showing under it.
   Only the height is repeated: the whole rule at this weight would also beat
   the phone's own object-position further down. */
.smb .smb-photo{height:100%}

/* The wash that makes words readable on a photograph. Which gradient it is
   and how strong it gets are the renderer's, because both depend on the theme
   and on which side the photo sits. */
.smb-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.smb-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:min(var(--smb-gap,16px),var(--smb-gap-q,16px));
  padding:0 min(var(--smb-pad,56px),var(--smb-pad-q,56px));
}

.smb-badge{
  padding:7px 10px;
  border-radius:4px;
  background:var(--smb-accent,#d62027);
  color:#fff;
  font-size:max(11px,min(var(--smb-badge,12px),var(--smb-badge-q,12px)));
  font-weight:700;
  line-height:1;
}

/* The same field as the pill above, drawn as an eyebrow instead: a pill on a
   full-bleed photograph reads as a sticker, and the editorial and colour
   block templates want a line of small capitals leading into the headline. */
.smb-eyebrow{
  margin:0;
  color:var(--smb-accent-text,var(--smb-accent,#d62027));
  font-size:max(11px,min(var(--smb-badge,13px),var(--smb-badge-q,13px)));
  font-weight:800;
  line-height:1;
  letter-spacing:.2em;
}

.smb-title{
  margin:0;
  font-size:max(30px,min(var(--smb-title,50px),var(--smb-title-q,50px)));
  font-weight:900;
  line-height:.98;
  letter-spacing:-.025em;
  color:var(--smb-ink);
}
.smb-title span{display:block}
/* A 460px box cannot grow, so copy that does not fit has to stop somewhere
   visible. Clamping the headline and the description keeps the price and the
   button on screen, which is the part that earns money; the editor sees the
   same truncation in the live preview as the shopper does. */
.smb-title span{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.smb-body{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.smb-title-2{color:var(--smb-accent-text,var(--smb-accent,#d62027))}

.smb-body{
  margin:0;
  max-width:34ch;
  font-size:max(15px,min(var(--smb-body,19px),var(--smb-body-q,19px)));
  font-weight:400;
  line-height:var(--smb-lh-body,1.5);
  color:var(--smb-c-body);
}

.smb-prices{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.smb-price{
  font-size:max(24px,min(var(--smb-price,34px),var(--smb-price-q,34px)));
  font-weight:900;
  line-height:1;
  color:var(--smb-ink);
}
.smb-old{
  font-size:max(14px,min(var(--smb-old,19px),var(--smb-old-q,19px)));
  color:var(--smb-c-muted);
  text-decoration:line-through;
}

.smb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:17px 30px;
  border-radius:8px;
  background:var(--smb-accent,#d62027);
  color:#fff;
  font-size:max(15px,min(var(--smb-cta,18px),var(--smb-cta-q,18px)));
  font-weight:800;
  line-height:1;
  text-decoration:none;
  transition:background .15s ease;
}
.smb-cta:hover,.smb-cta:focus{background:var(--smb-cta-hover);color:#fff}
.smb-cta:focus-visible{outline:3px solid var(--smb-ink);outline-offset:3px}

.smb-trust{
  margin:0;
  font-size:max(12px,min(var(--smb-trust,14px),var(--smb-trust-q,14px)));
  font-weight:600;
  line-height:var(--smb-lh-trust,1.6);
  color:var(--smb-c-muted);
}

/* Floors, on top of the proportional scale above: a banner in a 700px column
   may shrink, but a 10px trust line or an 12px button label is not a smaller
   version of the design, it is an unreadable one. The CTA is a control and
   keeps a tap target as well. */
.smb-cta{min-height:44px;padding:min(17px,1.06cqw) min(30px,1.88cqw)}

/* -------------------------------------------------------------------------
   כרטיס (card): the photo fills the canvas, a floating panel holds the words

   The panel is what makes this template work on a photograph that is not
   perfectly calm: the blur and the near-opaque background put a surface
   between the words and the picture, and the soft scrim keeps the edge of
   that surface from looking cut out.
   ---------------------------------------------------------------------- */

.smb-card{display:block}
.smb-card .smb-media{position:absolute;inset:0}
.smb-card .smb-photo{object-position:52% 52%}
.smb-card .smb-scrim{background:var(--smb-scrim-soft)}

/* 72px in from the text side, vertically centred. :where() keeps the side
   selectors weightless so the phone block below can reset them. */
.smb-card .smb-panel-wrap{
  position:absolute;
  top:0;bottom:0;
  width:min(var(--smb-panel-w,580px),38.75cqw);
  display:flex;
  align-items:center;
}
.smb-card:where(.smb-image-left) .smb-panel-wrap{right:min(72px,4.5cqw)}
.smb-card:where(.smb-image-right) .smb-panel-wrap{left:min(72px,4.5cqw)}

.smb-card .smb-panel{
  width:100%;
  background:var(--smb-panel-bg);
  border:1px solid var(--smb-panel-border);
  box-shadow:0 18px 44px -24px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.smb-card .smb-text{
  justify-content:flex-start;
  padding:min(32px,2cqw) min(34px,2.125cqw);
}
/* The two headline lines run on and wrap where the panel ends, rather than
   breaking where the editor happened to split the sentence. */
.smb-card .smb-title span{display:inline}
.smb-card .smb-body{max-width:none}
.smb-card .smb-cta{padding:min(16px,1cqw) min(28px,1.75cqw)}
.smb-card .smb-trust{line-height:1.5}

/* -------------------------------------------------------------------------
   עריכתי (editorial): a magazine cover

   No panel at all, so the scrim has to do the whole job of separating the
   words from the photograph, and it is the harder of the two. The trust line
   moves down into a bar across the full width, which is what pays for the
   66px headline: it takes the line out of the stack and out of the scrim.
   ---------------------------------------------------------------------- */

.smb-editorial{display:block}
.smb-editorial .smb-media{position:absolute;inset:0}
.smb-editorial .smb-photo{object-position:56% 48%}
.smb-editorial .smb-scrim{background:var(--smb-scrim-hard)}

.smb-editorial .smb-text{
  position:absolute;
  top:min(42px,2.625cqw);
  width:min(640px,40cqw);
  padding:0;
  justify-content:flex-start;
}
.smb-editorial:where(.smb-image-left) .smb-text{right:min(72px,4.5cqw)}
.smb-editorial:where(.smb-image-right) .smb-text{left:min(72px,4.5cqw)}

.smb-editorial .smb-title{line-height:.92;letter-spacing:-.035em}
/* The colour is carried by the eyebrow and the rule here. A second headline
   line in the accent as well would be three accents in four lines. */
.smb-editorial .smb-title-2{color:inherit}
.smb-editorial .smb-body{max-width:min(460px,28.75cqw)}
.smb-editorial .smb-cta{padding:min(16px,1cqw) min(28px,1.75cqw)}

.smb-rule{
  display:block;
  flex:none;
  width:min(64px,4cqw);
  height:3px;
  background:var(--smb-accent,#d62027);
}

/* The button and the price on one row, so the headline keeps their height. */
.smb-row{
  display:flex;
  align-items:center;
  gap:min(16px,1cqw);
}

.smb-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:min(14px,.875cqw) 0;
  background:var(--smb-bar-bg);
  text-align:center;
}
/* The bar is dark in both themes, so its text is the cream, not the ink. */
.smb-bar .smb-trust{color:#f6efe8;line-height:1}

/* -------------------------------------------------------------------------
   בלוק צבע (colour block): the photo against a column in the brand colour

   The highest contrast of the four. Every value below is white at some
   opacity because the ground is the accent itself, and the button has to
   invert or it would be accent on accent.
   ---------------------------------------------------------------------- */

.smb-block .smb-media{flex:0 0 62.5%}   /* 1000 of 1600 */
.smb-block .smb-photo{object-position:48% 52%}

.smb-block .smb-text{
  background:var(--smb-accent,#d62027);
  padding:0 min(54px,3.375cqw);
}
.smb-block .smb-title{letter-spacing:-.03em;color:#fff}
.smb-block .smb-title-2{color:#fff}
/* The handoff's alphas (.82 eyebrow, .88 body, .7 old price, .78 trust) were
   drawn over the charcoal accent, where they pass. Over the shop's own red
   they measure 3.1:1 to 4.2:1, under the 4.5:1 body text needs, so the three
   small roles go to full white and the struck-through price keeps just enough
   grey to read as secondary. */
.smb-block .smb-eyebrow{color:#fff}
.smb-block .smb-body{max-width:min(400px,25cqw);color:#fff}
.smb-block .smb-price{color:#fff}
.smb-block .smb-old{color:rgba(255,255,255,.88)}
.smb-block .smb-trust{color:#fff;line-height:1.5}
.smb-block .smb-cta{
  background:#fff;
  color:var(--smb-accent,#d62027);
  padding:min(16px,1cqw) min(30px,1.88cqw);
}
.smb-block .smb-cta:hover,.smb-block .smb-cta:focus{background:#f6efe8;color:var(--smb-accent,#d62027)}
/* The ink outline the other templates use would vanish on a dark accent. */
.smb-block .smb-cta:focus-visible{outline-color:#fff}

/* -------------------------------------------------------------------------
   The phone

   Each template keeps its character rather than collapsing into one shared
   card: the split stacks, the card's panel climbs over the photo, the
   editorial becomes a poster with the photo behind the words, and the colour
   block keeps its block. The type comes from the renderer's separate phone
   scale, because a 50px headline reduced in proportion would be 12px here.
   ---------------------------------------------------------------------- */

@media(max-width:760px){
  .smb{
    flex-direction:column;
    height:auto;
    border-radius:20px;
  }
  .smb-image-right{flex-direction:column}
  .smb-media{flex:0 0 auto;height:230px}
  .smb-photo{object-position:50% 50%}
  .smb-text{
    padding:22px 20px 26px;
    gap:12px;
    align-items:flex-start;
  }
  .smb-badge,.smb-eyebrow{font-size:var(--smb-m-badge,12px)}
  .smb-badge{padding:6px 9px}
  .smb-title{font-size:var(--smb-m-title,34px);line-height:1.02}
  .smb-body{font-size:var(--smb-m-body,15.5px);max-width:none}
  .smb-price{font-size:var(--smb-m-price,25px)}
  .smb-old{font-size:var(--smb-m-old,16px)}
  .smb-cta{
    align-self:stretch;
    padding:16px 0;
    font-size:var(--smb-m-cta,16.5px);
    min-height:44px;
  }
  .smb-trust{font-size:var(--smb-m-trust,12.5px)}

  /* card: photo, then the panel pulled up over the bottom of it. The scrim
     goes: it runs across the width, and on the phone the words are below the
     photo rather than on it. */
  .smb-card{display:flex;flex-direction:column}
  .smb-card .smb-media{position:relative;inset:auto;height:280px}
  .smb-card .smb-photo{object-position:50% 46%}
  .smb-card .smb-scrim{display:none}
  .smb-card .smb-panel-wrap{
    position:relative;
    top:auto;bottom:auto;left:auto;right:auto;
    display:block;
    width:auto;
    margin-top:-76px;
    padding:0 16px 20px;
  }
  .smb-card .smb-panel{
    border-radius:12px;
    box-shadow:0 14px 34px -20px rgba(0,0,0,.45);
  }
  .smb-card .smb-text{padding:20px 18px 22px;gap:11px}
  .smb-card .smb-title{line-height:1}

  /* editorial: the photo becomes the background and the scrim turns vertical,
     which is the only way a 640px text block and a full-bleed photograph fit
     into 390px without one of them being thrown away. */
  .smb-editorial .smb-media{position:absolute;inset:0;height:100%}
  .smb-editorial .smb-photo{object-position:54% 46%}
  .smb-editorial .smb-scrim{background:var(--smb-scrim-mobile)}
  .smb-editorial .smb-text{
    position:relative;
    top:auto;left:auto;right:auto;
    width:auto;
    min-height:430px;
    padding:24px 20px 62px;
    gap:12px;
  }
  .smb-editorial .smb-title{line-height:.95;letter-spacing:-.03em}
  .smb-editorial .smb-body{max-width:300px}
  .smb-editorial .smb-rule{width:52px}
  /* The row unstacks the other way up, so the price stays above the button
     and the button keeps the full width every phone CTA here has. */
  .smb-editorial .smb-row{
    flex-direction:column-reverse;
    align-items:stretch;
    align-self:stretch;
    gap:12px;
  }
  .smb-editorial .smb-cta{padding:16px 0}
  .smb-bar{padding:12px 14px}
  .smb-bar .smb-trust{line-height:1.3}

  /* block: a shorter photo, then the accent block. The basis is reset as well
     as the height: 62.5% of a 320px column is 200px of intrinsic width, and
     the band took the photo's own ratio instead of the 210px asked for. */
  .smb-block .smb-media{flex:0 0 auto;height:210px}
  .smb-block .smb-photo{object-position:50% 52%}
  .smb-block .smb-text{padding:22px 20px 26px;gap:12px}
  .smb-block .smb-title{line-height:1}
  .smb-block .smb-body{max-width:none}
  .smb-block .smb-cta{padding:16px 0}
}

/* The four-line limit on the description protects a box that cannot grow.
   The phone layout can, so someone who has enlarged the text there reads all
   of it instead of an ellipsis. */
@media(max-width:760px){
  html.a11y-zoomed .smb-body{display:block;-webkit-line-clamp:unset;overflow:visible}
}

/* The accessibility widget's text size (zoom on body) leaves the media
   queries at the real width, so a tablet at 200% kept the photo's fixed
   share and the headline slid under it. The photo gives up width as the
   text grows; a long word may break rather than be clipped. */
@media(min-width:761px){
  html.a11y-zoomed .smb-media{flex-basis:calc(64.375% * var(--a11y-unzoom,1))}
  html.a11y-zoomed .smb-block .smb-media{flex-basis:calc(62.5% * var(--a11y-unzoom,1))}
}
html.a11y-zoomed .smb-title span{overflow-wrap:anywhere}

/* -------------------------------------------------------------------------
   The picture shown whole (התאמת התמונה: מוצגת כולה)

   For a product cut out on a flat ground. The box changes shape with the
   screen -- 798x460 on a desktop, 476x460 on a tablet held upright, 720x230 on
   a phone held sideways -- and a picture that covers it is cropped to each of
   those in turn. This one is fitted inside instead, and what is left of the
   box takes the picture's own ground (the renderer reads it from the file),
   so the picture has no visible edge at any of them.

   Split and colour block only: in כרטיס and עריכתי the photo is the canvas the
   words sit on, and a canvas with bands down its sides is not one.
   ---------------------------------------------------------------------- */

.smb-split.smb-fit-contain .smb-media,
.smb-block.smb-fit-contain .smb-media{background:var(--smb-photo-ground,#e9e2da)}
.smb-split.smb-fit-contain .smb-photo,
.smb-block.smb-fit-contain .smb-photo{object-fit:contain}

/* -------------------------------------------------------------------------
   Taking turns: several banners in one place (inc/banners-placement.php)

   The banners are stacked in one grid cell, so the place is as tall as the
   tallest of them from the first paint and nothing below it moves when one
   gives way to the next. Which one shows is a class the server writes on the
   first and the script moves afterwards; with the script blocked the first
   banner simply stays, and the controls under it are never revealed.

   visibility and not display for the ones waiting: a hidden banner keeps its
   box (that is what holds the height) but leaves the tab order and the
   accessibility tree, so a keyboard never lands on a button nobody can see.
   ---------------------------------------------------------------------- */

.smb-rot{position:relative}
.smb-rot-track{
  display:grid;
  /* A sideways swipe changes the banner; up and down stays the page's, and so
     does a pinch. Without the second word two fingers on the banner did
     nothing at all, on a page whose small print people enlarge that way. */
  touch-action:pan-y pinch-zoom;
}
/* And once the page has been pinched larger, every direction: the visitor is
   moving the view across the banner, not changing it (the script stands down
   on the same condition). */
.smb-rot.is-zoomed .smb-rot-track{touch-action:auto}

/* A banner waiting its turn is not hidden in the usual way. It is painted,
   at one hundredth of its strength, through a slit one pixel high, underneath
   the banner that shows -- which no eye can tell from hidden, and Chrome can.
   Chrome times the page's largest picture (LCP) when each picture is first
   painted and never again. Hidden properly, a waiting photo was first painted
   seven seconds in, when its turn came, and wherever it was larger than the
   first banner's it became the page's LCP: 7.9s measured, against 0.4s. This
   way every photo is measured at load, as a sliver far too small to count,
   and the first banner's photo stays the one that is timed.

   The slit sits 100px down because in all four templates the photo covers
   that row of the banner, on a desktop and on a phone. A template that puts
   its photo lower would not be measured at load and would bring the late LCP
   back; move the slit with it.

   What makes this safe is `inert`, which the server writes on every banner
   but the first and the script moves with the turn: a painted banner would
   otherwise offer its button to the Tab key and its words to a screen reader.
   The three belong together. A browser without `inert` (Safari before 15.5)
   is given the ordinary hidden kind back by the script, below. */
.smb-rot-slide{
  grid-area:1/1;
  min-width:0;
  display:flex;           /* the banner inside stretches to the row, i.e. to the tallest */
  opacity:.01;
  clip-path:inset(100px 0 calc(100% - 101px) 0);
}
/* Only the arrival is animated. */
.smb-rot-slide.is-active{
  z-index:2;
  opacity:1;
  clip-path:none;
  transition:opacity .45s ease;
}
/* The one going out stays whole underneath while the next fades in over it,
   and is cut the moment the script takes this class away, by which time it
   is covered. Fading both at once lets the page show through the pair of them
   halfway, and the hero blinks white between every two banners. The
   transition is switched off by name: a banner that was itself still fading
   in when a second press sent it out would otherwise carry on from where it
   was, and the page showed through for a tenth of a second. */
.smb-rot-slide.is-leaving{z-index:1;opacity:1;clip-path:none;transition:none}
/* While the two overlap the incoming banner is on top and still nearly
   invisible. A tap in that half second would open the link of a banner the
   visitor has not seen yet, so it waits until it has arrived. */
.smb-rot.is-fading .smb-rot-slide.is-active{pointer-events:none}

/* No `inert` in this browser: hidden the plain way, and late LCP with it. */
.smb-rot.no-inert .smb-rot-slide{visibility:hidden;opacity:0;clip-path:none}
.smb-rot.no-inert .smb-rot-slide.is-active,
.smb-rot.no-inert .smb-rot-slide.is-leaving{visibility:visible;opacity:1}

/* In a stack every banner takes the height of the tallest one beside it,
   which the server works out from the editor's own choices and hands over as
   --smb-rot-h. A given height and not height:auto, so the box stays the fixed
   canvas the four templates are drawn on. The phone layout is height:auto
   already, and there the row's stretch does the same job. */
@media(min-width:761px){
  .smb-rot-slide>.smb{height:var(--smb-rot-h,var(--smb-h,460px))}
}

/* The controls sit under the banner, on the page's own ground, and never on
   the banner: the four templates leave no corner that is free in all of them
   (the editorial one runs a bar along the bottom, the phone layouts put the
   button there), and a control laid over a photograph has a contrast nobody
   can promise for a picture that has not been uploaded yet. */
.smb-rot-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  /* It fits one line on every phone at the page's own size. With the site's
     text-size control at 150% and up a 390px screen has under 200px to give
     it, and a row that could not wrap ran off both sides, taking the stop
     control with it. */
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  direction:ltr;          /* DOM order is the physical order; see the markup */
  visibility:hidden;      /* its room is kept, so revealing it moves nothing */
}
.smb-rot.is-ready .smb-rot-nav{visibility:visible}
/* Enlarged on a narrow screen (theme.js names the state), the three buttons
   keep one line together and the dots take the next, rather than the row
   breaking wherever it happens to run out. */
html.a11y-narrow .smb-rot-dots{order:1;flex:0 0 100%;flex-wrap:wrap;justify-content:center;margin-inline:0}

/* The stop control once more, ahead of the banners in the page's order and
   out of sight (the markup says for whom). Not .screen-reader-text: that
   class steps into the layout when focused and would push the banner down.
   Absent in exactly the states in which the visible one is. */
.smb-rot-first{
  position:absolute;top:0;inset-inline-start:0;
  width:1px;height:1px;
  margin:0;padding:0;border:0;
  background:none;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.smb-rot:not(.is-ready) .smb-rot-first{display:none}

.smb-rot-nav .carousel-arrow,
.smb-rot-toggle{
  flex:none;
  width:40px;height:40px;
  padding:0;
  cursor:pointer;
}
.smb-rot-nav .carousel-arrow{font-size:25px}
.smb-rot-toggle{
  display:flex;align-items:center;justify-content:center;
  border:1px solid #e7e1d8;border-radius:50%;
  background:#fff;color:#1e1e1e;
  transition:.18s;
}
.smb-rot-toggle:hover{background:#111;color:#fff;border-color:#111}
.smb-rot-nav .carousel-arrow:focus-visible,
.smb-rot-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* One button, two states; the script names the state on the group. */
.smb-rot-ico-play{display:none}
.smb-rot.is-stopped .smb-rot-ico-play{display:block}
.smb-rot.is-stopped .smb-rot-ico-stop{display:none}

/* The first banner on the right, like everything else that has an order in
   this shop, so the bar that fills moves the way the "next" arrow points. */
.smb-rot-dots{display:flex;align-items:center;direction:rtl;margin-inline:4px}
/* 8px of dot inside a 24px target, as on the reviews rail. */
.smb-rot-dot{
  flex:none;
  min-width:24px;height:24px;
  padding:0 4px;
  border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.smb-rot-dot i{
  position:relative;
  display:block;
  width:8px;height:8px;
  border-radius:99px;
  background:var(--muted);   /* 5.3:1 on white; a control needs 3:1 */
  overflow:hidden;
  transition:width .25s ease,background .25s ease;
}
/* The current one is longer as well as red, so the state is not carried by
   hue alone. */
.smb-rot-dot[aria-current="true"] i{width:30px;background:var(--red)}
.smb-rot-dot:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-radius:99px}

/* While the banners are changing by themselves the current dot is a bar that
   fills over the time its banner has left, which says both that the picture
   is about to change and when. The script keeps its own clock (a stylesheet
   that fails to load must not stop the banners or start them); the two are
   paused and resumed by the same class, so they stay together. */
/* The unfilled part is pale on purpose and 1.7:1 against the page by itself,
   so the bar is given an edge that a control is owed (3:1). */
.smb-rot.is-auto .smb-rot-dot[aria-current="true"] i{background:#c9c4bd;box-shadow:0 0 0 1px var(--muted)}
.smb-rot.is-auto .smb-rot-dot[aria-current="true"] i::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:var(--red);
  transform-origin:100% 50%;   /* from the right: this is a right-to-left row */
  animation:smb-rot-fill var(--smb-rot-ms,7000ms) linear forwards;
}
.smb-rot.is-auto.is-held .smb-rot-dot[aria-current="true"] i::after{animation-play-state:paused}
@keyframes smb-rot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Someone who asked for less motion gets none: the banners stay where they
   are until that visitor moves them, the change is a cut and not a fade, and
   the control that stops a rotation has nothing left to stop. The site's own
   "עצירת אנימציות" switch does the same through html.a11y-noanim, whose
   blanket rule in theme.css already removes the transitions. */
@media(prefers-reduced-motion:reduce){
  .smb-rot-slide.is-active,.smb-rot-dot i{transition:none}
  .smb-rot-slide.is-leaving{opacity:.01;clip-path:inset(100px 0 calc(100% - 101px) 0)}
  .smb-rot-toggle,.smb-rot-first{display:none}
}
html.a11y-noanim .smb-rot-slide.is-leaving{opacity:.01;clip-path:inset(100px 0 calc(100% - 101px) 0)}
html.a11y-noanim .smb-rot-toggle,
html.a11y-noanim .smb-rot-first{display:none}

/* A Windows contrast theme replaces every background colour with the page's,
   and the dots are nothing but background. The system's own colours are the
   ones it leaves alone. */
@media(forced-colors:active){
  .smb-rot-dot i{background:ButtonText}
  .smb-rot-dot[aria-current="true"] i,
  .smb-rot.is-auto .smb-rot-dot[aria-current="true"] i,
  .smb-rot-dot[aria-current="true"] i::after{background:Highlight;box-shadow:none}
}