/* ============================================================================
   sèva demo — Genesis Works overlay
   Layered after theme.css so the cloned stylesheet stays byte-identical and
   every addition here is legible as "ours". Two jobs: the Arabic/RTL pass,
   and the products-showcase composition.
   ========================================================================== */

/* ---------- products showcase ----------
   The three bottles are transparent cut-outs now, so they float on the colour
   field instead of arriving as photo rectangles. That exposed the arch window
   behind them: sized for a tall dropper bottle, it stuck a slab of blurred
   greenery out of the squat jar's lid. Pulled in and down, it reads as the
   halo it was meant to be — a sliver of atmosphere behind the product. */
#prodotti .prodotti__bg-static{top:53%;width:11.5vw;height:36vh;
  /* the arch was built to frame a tall dropper bottle; behind a squat jar its
     hard edge read as a dome growing out of the lid. Blurred and masked, the
     same photo becomes the bloom of light it was standing in for. */
  filter:blur(18px) saturate(.85) brightness(1.06);opacity:.6;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 62%,#000 25%,transparent 100%);
          mask-image:radial-gradient(62% 58% at 50% 62%,#000 25%,transparent 100%)}
/* one canvas spec for all three cut-outs (1200x1600), so the line-up no
   longer jumps between a 533x765 jar and a 432x478 bottle */
#prodotti .prodotti__bottle-img{top:56%}
.prodotti__preview-img img{object-fit:contain;padding:6px}

@media(max-width:768px){
  #prodotti .prodotti__bg-static{width:30vw;height:26vh;top:52%}
}

/* ---------- Arabic ---------- */
html[lang=ar]{font-family:'Tajawal','IBM Plex Sans Arabic','Noto Sans Arabic',var(--font-body-family),sans-serif}
html[lang=ar] body,
html[lang=ar] .dett-nav__link,
html[lang=ar] .dett-hero__bottom-link,
html[lang=ar] .dett-menu-overlay__link,
html[lang=ar] .prodotti__name,
html[lang=ar] .prodotti__label,
html[lang=ar] .prodotti__tagline,
html[lang=ar] .prodotti__desc,
html[lang=ar] .linea-story__type,
html[lang=ar] .linea-story__copy,
html[lang=ar] .lines-grid__text,
html[lang=ar] .nx-loader__word,
html[lang=ar] .nx-loader__cta{font-family:'Tajawal','IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif;letter-spacing:0}
/* the display faces are set on sub-1 leading for Latin; Arabic marks and
   descenders need the room back or the lines stack into each other */
html[lang=ar] .linea-story__type{line-height:1.5}
html[lang=ar] .prodotti__name{line-height:1.4}
html[lang=ar] .prodotti__desc,html[lang=ar] .prodotti__tagline{line-height:1.9}
html[lang=ar] .lines-grid__text{line-height:1.45}
html[lang=ar] .nx-loader__word{line-height:1.35}
/* prices, the phone number and the address are Latin runs inside RTL copy */
html[lang=ar] .prodotti__price,
html[lang=ar] .dett-menu-overlay__contact-link,
html[lang=ar] .nav-wordmark,
html[lang=ar] .footer__legal{direction:ltr;unicode-bidi:isolate}
/* the wordmark is the brand — it never mirrors */
html[dir=rtl] .nav-wordmark,html[dir=rtl] .nx-loader__title{direction:ltr}

/* ---------- RTL: what must stay LTR ----------
   Two things break under a document-level dir flip, and neither is about
   language. (1) The JS-driven horizontal tracks position slide N at N*100vw
   and translate the strip by hand — flip the writing direction and the flex
   row reverses, so the carousel lands between slides. (2) SplitType puts every
   GLYPH in its own inline box; under rtl those boxes lay out right-to-left, so
   the Latin product names render backwards ("Flora" as "arolF").
   Both stay LTR; the actual Arabic copy inside gets its direction back. */
html[dir=rtl] .slideshow,
html[dir=rtl] .slide,
html[dir=rtl] .prodotti__track,
html[dir=rtl] .prodotti__slide,
html[dir=rtl] .hero-mobile__cards-track,
html[dir=rtl] .hero-mobile__cards-wrap,
html[dir=rtl] .hero-mobile__counter,
html[dir=rtl] .slide_content-heading,
html[dir=rtl] .slide_left-wrap,
html[dir=rtl] .slide_right-wrap,
html[dir=rtl] .slide_center-wrap,
html[dir=rtl] .linea-story__title{direction:ltr}
html[dir=rtl] .prodotti__slide-info,
html[dir=rtl] .prodotti__desc,
html[dir=rtl] .prodotti__tagline,
html[dir=rtl] .prodotti__name,
html[dir=rtl] .prodotti__label,
html[dir=rtl] .info-testo,
html[dir=rtl] .hero-mobile__card-info{direction:rtl;text-align:right}
/* arrows lead the reading direction */
html[dir=rtl] .prodotti__explore-cta svg,
html[dir=rtl] .brand__cta svg,
html[dir=rtl] .slide_explore-cta svg{transform:scaleX(-1)}