/* =========================================================================
   Micro Mania — Combo Deals page  (2026-09)

   The design of page-mmi-combos.php only: hero, Best sellers heading, deal
   cards and the empty state. Loaded on that page alone, after mmi-deals.css,
   whose fire badge and was/now price it uses rather than redrawing (only their
   size knobs are set here).

   Phone first. The page's colour is the neon green of the fourth hero button,
   with the brand cyan and magenta kept for the flames, the new price and the
   secondary action, so it reads as Micro Mania and as its own place at once.

     1. Page ground and hero
     2. Best sellers heading and grid
     3. The deal card: ribbon, parts stage, contents, price, add button
     4. Empty state
     5. Wider screens
     6. Arabic, reduced motion
   ====================================================================== */

/* ---- 1. Page ground and hero ------------------------------------------- */
.mmi-page .combo-page{
  --cb-green:#39FF6A;
  --cb-green-lit:#8dffa6;
  --cb-green-pale:#b8ffc9;
  --cb-ink:#04150a;
  --cb-line:rgba(57,255,106,.22);
  --cb-fill:linear-gradient(118deg,#12b457 0%,#39FF6A 52%,#b8ffc9 100%);
  min-height:70vh;padding:18px 0 118px;overflow:hidden;
  background:
    radial-gradient(640px 460px at 88% 3%,rgba(57,255,106,.12),transparent 66%),
    radial-gradient(560px 420px at 6% 16%,rgba(79,216,224,.08),transparent 66%),
    radial-gradient(620px 520px at 50% 72%,rgba(217,47,196,.05),transparent 70%),
    #08080e;
}
.mmi-page .cb-crumb{position:relative;z-index:2}

.mmi-page .cb-hero{position:relative;z-index:1;display:grid;gap:24px;margin:28px 0 44px}
.mmi-page .cb-hero::before{
  content:"";position:absolute;z-index:-1;inset:-80px -60px -40px;pointer-events:none;
  background:
    radial-gradient(circle at 24% 38%,rgba(57,255,106,.10),transparent 42%),
    radial-gradient(circle at 78% 60%,rgba(79,216,224,.07),transparent 40%);
}
.mmi-page .cb-kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:6px 13px 6px 10px;
  border:1px solid rgba(57,255,106,.36);border-radius:999px;background:rgba(57,255,106,.07);
  color:var(--cb-green-lit);font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
}
.mmi-page .cb-kicker i{
  width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--cb-green);
  box-shadow:0 0 0 3px rgba(57,255,106,.18),0 0 12px var(--cb-green);
}
.mmi-page .cb-hero h1{
  max-width:13ch;margin:0;font-size:clamp(38px,11.2vw,50px);line-height:1.02;
  font-weight:900;letter-spacing:-.04em;
}
.mmi-page .cb-lit{
  color:transparent;
  background:linear-gradient(92deg,#39FF6A 0%,#a6ffbd 46%,#4FD8E0 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(57,255,106,.28));
}
.mmi-page .cb-lead{max-width:58ch;margin:18px 0 0;color:#fff;font-size:13px;line-height:1.8;opacity:.88}

.mmi-page .cb-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:24px}
.mmi-page .cb-hero-primary,
.mmi-page .cb-hero-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 12px;
  border-radius:10px;text-align:center;text-decoration:none;font-size:10px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;
  transition:transform .18s cubic-bezier(.22,1,.36,1),filter .18s,box-shadow .18s,border-color .18s;
}
.mmi-page .cb-hero-primary{
  color:var(--cb-ink);border:1px solid rgba(57,255,106,.55);background:var(--cb-fill);
  box-shadow:0 12px 30px -18px rgba(57,255,106,.95),inset 0 1px 0 rgba(255,255,255,.34);
}
.mmi-page .cb-hero-primary svg{width:16px;height:16px;flex:0 0 auto}
.mmi-page .cb-hero-secondary{color:#fff;border:1px solid rgba(79,216,224,.46);background:rgba(8,8,14,.55)}
.mmi-page .cb-hero-primary:hover,
.mmi-page .cb-hero-secondary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.mmi-page .cb-hero-secondary:hover{border-color:var(--cyan)}
.mmi-page .cb-hero-primary:focus-visible,
.mmi-page .cb-hero-secondary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.mmi-page .cb-trust{display:grid;gap:9px;margin:24px 0 0;padding:0;list-style:none}
.mmi-page .cb-trust li{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;line-height:1.4}
.mmi-page .cb-trust svg{
  width:22px;height:22px;flex:0 0 auto;padding:4px;border-radius:50%;
  color:var(--cb-green);background:rgba(57,255,106,.12);box-shadow:inset 0 0 0 1px rgba(57,255,106,.3);
}

/* The best current discount, as big as the headline allows. The flame is the
   mark variant: the number is printed beside it, not in it. */
.mmi-page .cb-hero-offer{
  position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid rgba(57,255,106,.32);border-radius:18px;
  background:linear-gradient(150deg,rgba(57,255,106,.13),rgba(16,16,24,.92) 58%),#101018;
  box-shadow:0 30px 60px -42px rgba(57,255,106,.9),inset 0 1px 0 rgba(255,255,255,.06);
}
.mmi-page .cb-hero-offer .cb-offer-flame{--fire-h:58px}
.mmi-page .cb-hero-offer strong{display:block;color:#fff;font-size:26px;line-height:1.1;font-weight:900;letter-spacing:-.02em}
.mmi-page .cb-hero-offer span{display:block;margin-top:5px;color:var(--cb-green-lit);font-size:11px;font-weight:800}

/* ---- 2. Best sellers heading and grid ----------------------------------- */
.mmi-page .cb-deals{position:relative;z-index:1;padding:0;scroll-margin-top:96px}
.mmi-page .cb-head{margin:0 0 22px}
.mmi-page .cb-head::after{
  content:"";display:block;height:1px;margin-top:18px;
  background:linear-gradient(90deg,rgba(57,255,106,.55),rgba(79,216,224,.2) 42%,transparent);
}
.mmi-page .cb-best{display:flex;align-items:center;gap:10px;margin:0;font-size:28px;line-height:1.1;font-weight:900;letter-spacing:-.02em}
.mmi-page .cb-best .mmi-fire--mark{--fire-h:36px}
.mmi-page .cb-head p{margin:8px 0 0;color:#fff;font-size:12px;line-height:1.6;opacity:.74}

.mmi-page .cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;align-items:stretch}

/* ---- 3. The deal card ---------------------------------------------------- */
.mmi-page .cb-card{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid var(--cb-line);border-radius:18px;
  background:linear-gradient(180deg,#0f1612 0%,#0d0d15 40%,#0c0c13 100%);
  box-shadow:0 26px 50px -40px rgba(57,255,106,.6),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
}
@media (hover:hover){
  .mmi-page .cb-card:hover{
    border-color:rgba(57,255,106,.5);transform:translateY(-3px);
    box-shadow:0 34px 60px -40px rgba(57,255,106,.85),inset 0 1px 0 rgba(255,255,255,.06);
  }
}
.mmi-page .cb-card.is-out{border-color:rgba(255,255,255,.11);background:linear-gradient(180deg,#121218 0%,#0d0d14 40%,#0c0c13 100%)}

.mmi-page .cb-ribbon{
  position:absolute;z-index:4;top:14px;inset-inline-start:14px;display:inline-flex;align-items:center;
  min-height:25px;padding:1px 11px 0;border-radius:7px;background:var(--cb-green);color:var(--cb-ink);
  font:900 9.5px/1 "Cairo",var(--fallback-ar);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 8px 20px -8px rgba(57,255,106,.95);
}
.mmi-page .cb-ribbon--hot{background:linear-gradient(110deg,#FF4D5E,#D92FC4);color:#fff;box-shadow:0 8px 20px -8px rgba(255,77,94,.95)}
.mmi-page .cb-ribbon--new{background:var(--cyan);color:#04191d;box-shadow:0 8px 20px -8px rgba(79,216,224,.95)}
.mmi-page .cb-ribbon--value{background:linear-gradient(110deg,#FF9F1C,#FFC93C);color:#1a1206;box-shadow:0 8px 20px -8px rgba(255,190,34,.95)}

/* The parts, side by side on a lit stage, joined by plus signs. Columns are
   shared equally, so two parts get big tiles and five still fit a 360px
   phone; the plus sits on the seam between two tiles. */
.mmi-page .cb-stage{
  position:relative;padding:50px 14px 20px;border-bottom:1px solid rgba(57,255,106,.14);
  background:
    radial-gradient(110% 90% at 50% 0%,rgba(57,255,106,.15),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.mmi-page .cb-card.is-out .cb-stage{background:radial-gradient(110% 90% at 50% 0%,rgba(255,255,255,.06),transparent 62%)}
.mmi-page .cb-tiles{
  --cb-gap:16px;
  display:grid;grid-template-columns:repeat(var(--cb-n,3),minmax(0,1fr));gap:var(--cb-gap);align-items:center;
  max-width:calc(var(--cb-n,3) * 132px + (var(--cb-n,3) - 1) * var(--cb-gap));margin-inline:auto;
}
.mmi-page .cb-card.is-many .cb-tiles{--cb-gap:11px}
.mmi-page .cb-tile{position:relative;display:block;min-width:0;aspect-ratio:1/1}
.mmi-page .cb-tile + .cb-tile::before{
  content:"+";position:absolute;z-index:3;top:50%;inset-inline-start:calc(var(--cb-gap) / -2);
  transform:translate(-50%,-50%);display:grid;place-items:center;width:22px;height:22px;padding-bottom:2px;
  border:1px solid rgba(57,255,106,.6);border-radius:50%;background:#08080e;color:var(--cb-green);
  font:900 15px/1 "Cairo",var(--fallback-ar);box-shadow:0 0 12px -2px rgba(57,255,106,.75);
}
.mmi-page .cb-card.is-many .cb-tile + .cb-tile::before{width:19px;height:19px;font-size:13px}
.mmi-page .cb-tile.is-out .cb-photo{opacity:.42;filter:grayscale(1)}

/* The product picture from mmi_product_thumb(), in the same three states the
   shop and the product page use (see mmi-product-stage.css): a cutout on the
   dark stage, a white-backed photo on the lit shelf. */
.mmi-page .cb-photo{
  --accent:#8B7FD4;--accent-rgb:139,127,212;
  position:absolute;inset:0;display:block;overflow:hidden;border-radius:14px;
  border:1px solid rgba(var(--accent-rgb),.36);
  transition:opacity .2s,filter .2s;
}
.mmi-page .cb-photo.is-cut,
.mmi-page .cb-photo.is-clean{
  background:
    radial-gradient(120% 68% at 50% 104%,rgba(var(--accent-rgb),.34),rgba(var(--accent-rgb),.08) 48%,transparent 66%),
    radial-gradient(90% 55% at 50% -6%,rgba(255,255,255,.075),transparent 58%),
    linear-gradient(162deg,#1d1740 0%,#120f22 48%,#0b0b14 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 14px 26px -18px rgba(var(--accent-rgb),.8);
}
.mmi-page .cb-photo.is-plain{
  border-color:rgba(var(--accent-rgb),.42);
  background:
    radial-gradient(115% 62% at 50% 104%,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),.06) 46%,transparent 66%),
    radial-gradient(80% 50% at 50% -4%,rgba(255,255,255,.9),transparent 60%),
    linear-gradient(166deg,#f6f7fc 0%,#e9ebf5 52%,#dcdfee 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 14px 26px -18px rgba(var(--accent-rgb),.8);
}
.mmi-page .cb-photo img{
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;padding:11%;
  object-fit:contain;border-radius:0;background:transparent;
}
.mmi-page .cb-photo.is-cut img,
.mmi-page .cb-photo.is-clean img{mix-blend-mode:normal;filter:drop-shadow(0 8px 8px rgba(0,0,0,.55))}
.mmi-page .cb-photo.is-plain img{mix-blend-mode:multiply}
.mmi-page .cb-photo > svg{position:absolute;top:30%;left:30%;width:40%;height:40%;color:var(--accent)}

.mmi-page .cb-tile-qty{
  position:absolute;z-index:4;top:-7px;inset-inline-end:-7px;min-width:24px;height:21px;padding:0 6px;
  border-radius:999px;background:var(--cb-green);color:var(--cb-ink);box-shadow:0 0 0 2px #0c0c13;
  font:900 10.5px/21px "Cairo",var(--fallback-ar);text-align:center;
}

.mmi-page .cb-body{display:flex;flex:1 1 auto;flex-direction:column;gap:14px;padding:18px 16px}

/* Name, then the flame and its percentage: the badge reads with the name. */
.mmi-page .cb-name{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 11px;margin:0;
  font-size:21px;line-height:1.2;font-weight:900;letter-spacing:-.01em;
}
.mmi-page .cb-name-text{min-width:0;overflow-wrap:anywhere}
.mmi-page .cb-name .cb-fire{--fire-h:30px;--fire-pct-size:14px}
.mmi-page .cb-tagline{margin:-8px 0 0;color:#fff;font-size:12px;line-height:1.6;opacity:.72}

.mmi-page .cb-inside{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.02)}
.mmi-page .cb-inside-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);color:var(--cb-green-lit);
  font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.mmi-page .cb-inside-head b{color:#fff;font-weight:800;letter-spacing:.04em;opacity:.7}
.mmi-page .cb-items{margin:0;padding:4px 0;list-style:none}
.mmi-page .cb-item a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  min-height:48px;padding:7px 12px;color:#fff;text-decoration:none;transition:background .15s;
}
.mmi-page .cb-item a:hover{background:rgba(57,255,106,.06)}
.mmi-page .cb-item a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:8px}
.mmi-page .cb-item-qty{
  display:grid;place-items:center;min-width:30px;height:23px;padding:0 5px;border-radius:6px;
  background:rgba(57,255,106,.12);color:var(--cb-green);font-size:11px;font-weight:900;
}
.mmi-page .cb-item-copy{display:grid;min-width:0;line-height:1.3}
.mmi-page .cb-item-copy small{color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
.mmi-page .cb-item-copy bdi{
  display:-webkit-box;overflow:hidden;font-size:12px;font-weight:800;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;
}
.mmi-page .cb-item-price{color:#fff;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.62}
.mmi-page .cb-item-out{color:#FF6B78;font-size:9.5px;font-style:normal;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mmi-page .cb-item.is-out .cb-item-qty{background:rgba(255,77,94,.14);color:#FF6B78}
.mmi-page .cb-item.is-out bdi{opacity:.62}

.mmi-page .cb-buy{display:grid;gap:12px;margin-top:auto;padding-top:14px;border-top:1px dashed rgba(57,255,106,.22)}
.mmi-page .cb-buy-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mmi-page .cb-price-h{color:#fff;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.mmi-page .cb-stock{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:900}
.mmi-page .cb-stock i{width:7px;height:7px;flex:0 0 auto;border-radius:50%}
.mmi-page .cb-stock.in{color:var(--cb-green-lit)}
.mmi-page .cb-stock.in i{background:var(--stock);box-shadow:0 0 8px var(--stock)}
.mmi-page .cb-stock.out{color:#FF6B78}
.mmi-page .cb-stock.out i{background:#FF4D5E}
.mmi-page .cb-buy .cb-price{justify-self:start}
.mmi-page .cb-card.is-out .cb-price{opacity:.7}

.mmi-page .cb-save{
  display:flex;align-items:center;gap:8px;margin:0;padding:8px 11px;border-radius:9px;
  border:1px solid rgba(57,255,106,.25);background:rgba(57,255,106,.09);
  color:var(--cb-green-pale);font-size:12px;font-weight:800;line-height:1.4;
}
.mmi-page .cb-save svg{width:16px;height:16px;flex:0 0 auto;color:var(--cb-green)}

.mmi-page .cb-add{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;
  margin:0;padding:0 18px;border:1px solid rgba(57,255,106,.55);border-radius:12px;background:var(--cb-fill);
  color:var(--cb-ink);font:900 12px/1 "Cairo",var(--fallback-ar);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 14px 30px -18px rgba(57,255,106,.95),inset 0 1px 0 rgba(255,255,255,.36);
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,filter .18s,background .18s,color .18s;
}
.mmi-page .cb-add svg{width:18px;height:18px;flex:0 0 auto}
.mmi-page .cb-add .cb-add-done{display:none}
.mmi-page .cb-add:hover{transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(57,255,106,1),inset 0 1px 0 rgba(255,255,255,.44)}
.mmi-page .cb-add:active{transform:translateY(0) scale(.985)}
.mmi-page .cb-add:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.mmi-page .cb-add.is-busy{cursor:progress;filter:saturate(.75)}
.mmi-page .cb-add.is-busy .cb-add-icon{animation:mmiCbCartNudge .9s cubic-bezier(.45,0,.55,1) infinite}
.mmi-page .cb-add.is-added{background:#0f2a18;color:var(--cb-green-lit);border-color:rgba(57,255,106,.75)}
.mmi-page .cb-add.is-added .cb-add-icon{display:none}
.mmi-page .cb-add.is-added .cb-add-done{display:block}
.mmi-page .cb-add:disabled,
.mmi-page .cb-add:disabled:hover{
  cursor:not-allowed;transform:none;border-color:rgba(255,255,255,.12);background:#191920;
  color:rgba(255,255,255,.58);box-shadow:none;filter:none;
}
@keyframes mmiCbCartNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}

.mmi-page .cb-out-note{margin:0;color:#fff;font-size:11.5px;line-height:1.65;opacity:.84}
.mmi-page .cb-out-note a{
  display:inline-block;padding-block:4px;margin-inline-start:3px;color:var(--cb-green);font-weight:900;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---- 4. Empty state ------------------------------------------------------ */
.mmi-page .cb-empty{
  position:relative;display:grid;justify-items:center;gap:10px;max-width:580px;margin:6px auto 0;padding:34px 18px 26px;
  border:1px dashed rgba(57,255,106,.32);border-radius:22px;text-align:center;
  background:radial-gradient(circle at 50% 0,rgba(57,255,106,.11),transparent 62%),#0d0d15;
}
.mmi-page .cb-empty-art{display:flex;align-items:center;gap:20px;margin-bottom:8px}
.mmi-page .cb-empty-art span{
  position:relative;display:block;width:52px;height:52px;border-radius:14px;
  border:1px dashed rgba(255,255,255,.24);background:rgba(255,255,255,.03);
}
.mmi-page .cb-empty-art span:nth-child(2){border:1px solid rgba(57,255,106,.5);box-shadow:0 0 24px -6px rgba(57,255,106,.65)}
.mmi-page .cb-empty-art span + span::before{
  content:"+";position:absolute;top:50%;inset-inline-start:-10px;transform:translate(-50%,-50%);
  color:var(--cb-green);font:900 17px/1 "Cairo",var(--fallback-ar);
}
.mmi-page .cb-empty h3{margin:0;font-size:21px;line-height:1.25;font-weight:900}
.mmi-page .cb-empty p{max-width:44ch;margin:0;color:#fff;font-size:12.5px;line-height:1.75;opacity:.78}
.mmi-page .cb-empty-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;max-width:420px;margin-top:10px}

/* ---- 5. Wider screens ---------------------------------------------------- */
@media (max-width:420px){
  .mmi-page .cb-card.is-many .cb-stage{padding-inline:10px}
  .mmi-page .cb-card.is-many .cb-tiles{--cb-gap:9px}
  .mmi-page .cb-card.is-many .cb-tile-qty{top:-6px;inset-inline-end:-4px;min-width:20px;height:18px;padding:0 4px;font-size:9.5px;line-height:18px}
}

@media (max-width:620px){
  .mmi-page .cb-name .cb-fire{--fire-h:28px;--fire-pct-size:13.5px}
  .mmi-page .cb-best .mmi-fire--mark{--fire-h:32px}
}

@media (min-width:621px){
  .mmi-page .combo-page{padding:34px 0 100px}
  .mmi-page .cb-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
  .mmi-page .cb-hero-primary,
  .mmi-page .cb-hero-secondary{padding:0 24px;font-size:10.5px}
  .mmi-page .cb-trust{display:flex;flex-wrap:wrap;gap:10px 24px}
  .mmi-page .cb-best{font-size:34px}
  .mmi-page .cb-head p{font-size:13px}
  .mmi-page .cb-body{padding:20px 20px 22px}
  .mmi-page .cb-stage{padding-inline:20px}
  .mmi-page .cb-empty{padding:46px 32px 36px}
  .mmi-page .cb-empty-actions{display:flex;justify-content:center;width:auto}
}

@media (min-width:960px){
  .mmi-page .cb-hero{grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);align-items:end;gap:40px;margin:58px 0 66px}
  .mmi-page .cb-hero h1{font-size:clamp(54px,6vw,78px)}
  .mmi-page .cb-lead{font-size:14px}
  .mmi-page .cb-hero-offer{flex-direction:column;align-items:flex-start;gap:12px;padding:24px 26px 26px}
  .mmi-page .cb-hero-offer .cb-offer-flame{--fire-h:84px}
  .mmi-page .cb-hero-offer strong{font-size:34px}
  .mmi-page .cb-hero-offer span{font-size:12px}
  .mmi-page .cb-grid{gap:22px}
}

/* ---- 6. Arabic, reduced motion -------------------------------------------
   Arabic is never letter-spaced (it breaks the joins) and needs more line
   height for its marks; the plus signs mirror their offset. */
[dir="rtl"] .mmi-page .cb-kicker,
[dir="rtl"] .mmi-page .cb-hero-primary,
[dir="rtl"] .mmi-page .cb-hero-secondary,
[dir="rtl"] .mmi-page .cb-ribbon,
[dir="rtl"] .mmi-page .cb-inside-head,
[dir="rtl"] .mmi-page .cb-price-h,
[dir="rtl"] .mmi-page .cb-add,
[dir="rtl"] .mmi-page .cb-item-out,
[dir="rtl"] .mmi-page .cb-item-copy small{letter-spacing:0}
[dir="rtl"] .mmi-page .cb-best,
[dir="rtl"] .mmi-page .cb-name{letter-spacing:0}
[dir="rtl"] .mmi-page .cb-head::after{background:linear-gradient(270deg,rgba(57,255,106,.55),rgba(79,216,224,.2) 42%,transparent)}
[dir="rtl"] .mmi-page .cb-tile + .cb-tile::before,
[dir="rtl"] .mmi-page .cb-empty-art span + span::before{transform:translate(50%,-50%)}
[dir="rtl"] .mmi-page .cb-save svg{transform:scaleX(-1)}
[dir="rtl"] .mmi-page .cb-add.is-busy .cb-add-icon{animation-direction:reverse}

/* Arabic display sizes. At the same pixel size Cairo's Arabic letters stand
   about 45% taller than its Latin ones, so the English sizes made every
   Arabic title wrap an extra line and pushed the badge under the name. The
   rest of the site sets Arabic headlines about a fifth smaller; this page now
   does the same, with the line height the taller letters need. */
[dir="rtl"] .mmi-page .cb-hero h1{font-size:clamp(30px,8.6vw,40px);line-height:1.32;letter-spacing:0;max-width:none}
[dir="rtl"] .mmi-page .cb-hero-offer strong{font-size:22px;line-height:1.3}
[dir="rtl"] .mmi-page .cb-best{font-size:23px;line-height:1.35}
[dir="rtl"] .mmi-page .cb-name{font-size:18px;line-height:1.45}
[dir="rtl"] .mmi-page .cb-empty h3{font-size:18px;line-height:1.45}

@media (min-width:621px){
  [dir="rtl"] .mmi-page .cb-best{font-size:28px}
}

@media (min-width:960px){
  [dir="rtl"] .mmi-page .cb-hero h1{font-size:clamp(44px,4.9vw,62px)}
  [dir="rtl"] .mmi-page .cb-hero-offer strong{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  .mmi-page .cb-card,
  .mmi-page .cb-add,
  .mmi-page .cb-hero-primary,
  .mmi-page .cb-hero-secondary,
  .mmi-page .cb-item a{transition:none}
  .mmi-page .cb-card:hover,
  .mmi-page .cb-add:hover,
  .mmi-page .cb-add:active,
  .mmi-page .cb-hero-primary:hover,
  .mmi-page .cb-hero-secondary:hover{transform:none}
  .mmi-page .cb-add.is-busy .cb-add-icon{animation:none}
}