/* Arabic + Russian: EveryDay & Custom Cakes listing and flavour page.
   Loaded after css/i18n.css on ar/ and ru/ cakes.html and cakes/flavour.html. */

/* ---------- Arabic / RTL ---------- */
/* The qty stepper keeps minus | number | plus order, like a number line. */
html[dir="rtl"] .pd__qty{direction:ltr}
/* Cart / favourites count badges sit on the other corner of the icon. */
html[dir="rtl"] .tools__btn--bag-count{right:auto;left:2px}
/* Hero and section copy: Arabic body text reads better with a little more air. */
html[lang="ar"] .cakes-hero__title{line-height:1.3}
html[lang="ar"] .cakes-hero__body,html[lang="ar"] .cakes-section__head p,html[lang="ar"] .cake-card__desc,html[lang="ar"] .pd__desc,html[lang="ar"] .pd-info__grid p{line-height:1.9}
html[lang="ar"] .cake-card__name,html[lang="ar"] .pd__name{line-height:1.45}
html[lang="ar"] .cake-card__from{line-height:1.6}
html[lang="ar"] .cake-custom__field span{font-size:.875rem}
html[lang="ar"] .pd__size-row label small{font-size:.8125rem}
/* The select arrow/padding follow the writing direction automatically; keep text start-aligned. */
html[dir="rtl"] .cake-custom__field select{text-align:start}

/* ---------- Russian ---------- */
html[lang="ru"] .cakes-hero__title{font-size:clamp(2.3rem,4.4vw,4.4rem);overflow-wrap:anywhere}
html[lang="ru"] .cakes-hero__inner{max-width:44rem}
html[lang="ru"] .cakes-section__head h2{overflow-wrap:break-word}
html[lang="ru"] .cake-card__name{overflow-wrap:break-word;hyphens:auto}
html[lang="ru"] .pd__name{overflow-wrap:break-word}
html[lang="ru"] .cake-card--link .btn,html[lang="ru"] .pd__actions .btn{white-space:normal;text-align:center}
html[lang="ru"] .pd__size-row label{gap:.75rem}
html[lang="ru"] .pd__size-row label>span:first-child{min-width:0}
@media (max-width:480px){
  html[lang="ru"] .pd__size-row label{font-size:.8125rem}
}

/* ---------- Flavour page on phones ----------
   The English layout keeps image and text side by side at every width, which
   leaves Arabic/Russian text far too narrow. Stack them below 700px. */
@media (max-width:700px){
  html[lang="ar"] .pd__grid,html[lang="ru"] .pd__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
  html[lang="ar"] .pd__body,html[lang="ru"] .pd__body{max-width:none;width:100%}
  html[lang="ar"] .pd__fig,html[lang="ru"] .pd__fig{aspect-ratio:4/5}
}