/* ==========================================================================
   RNO Beauty, page sections
   ========================================================================== */

/* HOME: hero slider */
.hero { position: relative; background: var(--color-bg); overflow: hidden; }
.hero__slides { position: relative; display: grid; }
.hero__slide { grid-area: 1 / 1; display: grid; opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease-out), visibility 1.2s; }
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
@media (min-width: 900px) { .hero__slide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-block-size: min(86vh, 820px); } }
.hero__media { position: relative; overflow: hidden; background: var(--color-peach); aspect-ratio: 4 / 3.4; order: -1; }
@media (min-width: 900px) { .hero__media { aspect-ratio: auto; order: 2; } }
.hero__media > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 78% 30%; transform: scale(1.08); transition: transform 7s var(--ease-out); }
.hero__slide.is-active .hero__media > img { transform: scale(1); }
/* Physical side on purpose: the photo is never mirrored */
.hero__product { position: absolute; bottom: 6%; left: 6%; inline-size: clamp(110px, 22%, 210px); aspect-ratio: 3 / 4; animation: float 6s var(--ease-in-out) infinite; mix-blend-mode: multiply; }
.hero__product img { inline-size: 100%; block-size: 100%; object-fit: contain; }
@keyframes float { 50% { transform: translateY(-14px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .hero__product { animation: none; } }
.hero__content { position: relative; display: grid; align-content: center; gap: var(--space-5); padding: var(--space-8) var(--gutter) var(--space-10); }
@media (min-width: 900px) { .hero__content { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--space-9); padding-block: var(--space-10); } }
.hero__lineart { position: absolute; inset-block-start: 8%; inset-inline-end: 4%; inline-size: clamp(140px, 22vw, 260px); opacity: 0.16; pointer-events: none; }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); max-inline-size: 11ch; }
html[lang="ar"] .hero__title { max-inline-size: 12ch; }
.hero__text { max-inline-size: 440px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-start: var(--space-4); }
.hero__seal { position: absolute; inset-block-start: var(--space-5); inset-inline-end: var(--space-5); z-index: 2; }
@media (max-width: 899px) { .hero__seal { inline-size: 92px; block-size: 92px; font-size: 9px; } }
.hero__controls { position: absolute; z-index: 3; inset-block-end: var(--space-5); inset-inline-start: var(--gutter); display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 900px) { .hero__controls { inset-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); } }
@media (max-width: 899px) { .hero__controls { inset-block-end: auto; inset-block-start: calc(100vw * 3.4 / 4 - 44px); inset-inline-start: auto; inset-inline-end: var(--gutter); } }
.hero__dots { display: flex; gap: var(--space-2); }
.hero__dot { inline-size: 32px; block-size: var(--tap); position: relative; }
.hero__dot::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 1px; background: var(--color-text); opacity: 0.25; }
.hero__dot::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; block-size: 1px; inline-size: 0; background: var(--color-text); }
.hero__dot[aria-current="true"]::after { inline-size: 100%; transition: inline-size var(--hero-interval, 7s) linear; }
.hero.is-paused .hero__dot[aria-current="true"]::after { transition: none; }
@media (max-width: 899px) { .hero__dot::before, .hero__dot::after { background: #fff; } .hero__dot::before { opacity: 0.6; } }
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: 0.08em; }
.split-words .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 70ms + 150ms); }
.is-active .split-words .w > span, .split-words.is-visible .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .split-words .w > span { transform: none; } }
html.no-js .split-words .w > span { transform: none; }

/* HOME: marquee */
.marquee { border-block: var(--border-thin); background: var(--color-surface); overflow: hidden; }
.marquee__track { display: flex; inline-size: max-content; animation: marquee 38s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: var(--space-8); padding-inline-end: var(--space-8); min-block-size: 64px; }
.marquee__item { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: 1.25rem; white-space: nowrap; color: var(--color-primary-dark); }
.marquee__item .icon { color: var(--color-accent); inline-size: 16px; block-size: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; } }

/* HOME: shade finder */
.shade-finder { --tint: var(--color-blush-soft); background: var(--tint); transition: background 900ms var(--ease-out); }
.shade-finder__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .shade-finder__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-10); } }
.shade-finder__stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: radial-gradient(circle at 50% 45%, #fff 0 38%, transparent 70%); }
.shade-finder__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.shade-finder__img.is-active { opacity: 1; transform: none; }
.shade-finder__options { display: flex; gap: var(--space-3); margin-block: var(--space-5) var(--space-6); }
.shade-finder__option { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--color-text-muted); min-inline-size: 84px; }
.shade-finder__option .swatch { inline-size: 56px; block-size: 56px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.shade-finder__option[aria-checked="true"] { color: var(--color-text); }
.shade-finder__option[aria-checked="true"] .swatch { transform: scale(1.08); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-text); }
.shade-finder__panel { transition: opacity 400ms var(--ease-out); }
.shade-finder__panel[hidden] { display: none !important; }
.shade-finder__name { font-size: var(--fs-h2); }
.shade-finder__desc { margin-block: var(--space-4) var(--space-5); max-inline-size: 460px; }
.shade-finder__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); padding-block: var(--space-5); border-block: var(--border-thin); margin: 0 0 var(--space-6); }
.shade-finder__facts dt { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
html[lang="ar"] .shade-finder__facts dt { font-size: var(--fs-xs); text-transform: none; }
.shade-finder__facts dd { margin-block-start: 4px; font-size: var(--fs-small); }

/* HOME: shade cards */
.shade-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); aspect-ratio: 3 / 4; }
.shade-card img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.shade-card:hover img { transform: scale(1.05); }
.shade-card__label { position: absolute; inset-inline: var(--space-4); inset-block-end: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-radius: var(--radius-sm); }
.shade-card__label h3 { font-size: 1.375rem; }
.shade-card__label p { font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 767px) { .shade-cards { grid-template-columns: 1fr !important; } .shade-card { aspect-ratio: 4 / 3; } }

/* HOME: story, values, zones, pillars, campaign, why, ugc, newsletter */
.story__media { position: relative; }
.story__img { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-peach); }
.story__img img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% 30%; }
.story__inset { position: absolute; inset-block-end: -8%; inset-inline-end: -6%; inline-size: 46%; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-md); border: 6px solid var(--color-bg); }
.story__inset img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 899px) { .story__inset { inset-inline-end: 4%; } }
.values { display: grid; gap: var(--space-5); margin-block-start: var(--space-7); }
@media (min-width: 600px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value { border-block-start: 1px solid var(--color-text); padding-block-start: var(--space-4); }
.value h3 { font-size: 1.5rem; margin-block: var(--space-2); }
.value p { font-size: var(--fs-small); color: var(--color-text-muted); }
.zones { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .zones { grid-template-columns: 1fr 1fr; } }
.zones__face { position: relative; max-inline-size: 300px; margin-inline: auto; inline-size: 100%; }
.zones__face img { inline-size: 100%; opacity: 0.9; }
.zone-dot { position: absolute; inline-size: 36px; block-size: 36px; margin: -18px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.85); border: 1px solid var(--color-primary); color: var(--color-primary-dark); font-size: 12px; font-weight: var(--fw-semibold); font-family: var(--font-body-en); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.zone-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--color-primary); opacity: 0; animation: ping 2.4s var(--ease-out) infinite; }
.zone-dot.is-active, .zone-dot:hover { background: var(--color-primary); color: #fff; transform: scale(1.1); }
@keyframes ping { 0% { opacity: 0.6; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .zone-dot::after { animation: none; } }
.zone-list { display: grid; gap: var(--space-2); }
.zone-item { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4); border-radius: var(--radius-sm); text-align: start; transition: background var(--dur-base); inline-size: 100%; }
.zone-item:hover, .zone-item.is-active { background: var(--color-surface); }
.zone-item__num { inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--color-primary); display: grid; place-items: center; font-family: var(--font-body-en); font-size: 12px; color: var(--color-primary-dark); }
.zone-item.is-active .zone-item__num { background: var(--color-primary); color: #fff; }
.zone-item h3 { font-size: 1.375rem; }
.zone-item p { font-size: var(--fs-small); color: var(--color-text-muted); margin-block-start: 2px; }
.pillars { display: grid; gap: 1px; background: var(--color-border); border: var(--border-thin); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 600px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { background: var(--color-bg); padding: var(--space-7) var(--space-6); display: grid; gap: var(--space-3); align-content: start; transition: background var(--dur-base); }
.pillar:hover { background: var(--color-surface); }
.pillar .icon { inline-size: 32px; block-size: 32px; color: var(--color-primary); }
.pillar h3 { font-size: 1.5rem; }
.pillar p { font-size: var(--fs-small); color: var(--color-text-muted); }
.campaign { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-peach); min-block-size: 460px; display: grid; }
.campaign__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 80% 30%; }
.campaign__content { position: relative; z-index: 1; align-self: center; padding: var(--space-8) var(--space-6); max-inline-size: 520px; display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .campaign { min-block-size: 560px; } .campaign__content { padding-inline: var(--space-10); } }
@media (max-width: 899px) { .campaign { display: block; min-block-size: 0; background: var(--color-blush-soft); } .campaign__img { position: static; aspect-ratio: 16 / 10; object-position: 82% 30%; } }
.why { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .why { grid-template-columns: repeat(5, 1fr); } }
.why__item { display: grid; justify-items: center; text-align: center; gap: var(--space-3); }
.why__icon { inline-size: 72px; block-size: 72px; border-radius: 50%; border: 1px solid var(--color-accent); display: grid; place-items: center; color: var(--color-primary); }
.why__icon .icon { inline-size: 28px; block-size: 28px; }
.why__item h3 { font-size: 1.25rem; }
.why__item p { font-size: var(--fs-xs); color: var(--color-text-muted); max-inline-size: 200px; }
.why__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .why__item:last-child:nth-child(odd) { grid-column: auto; } }
.ugc { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ugc { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
.ugc__item { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-surface); }
.ugc__item img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 75% 30%; transition: transform 1.2s var(--ease-out); }
.ugc__item--product img { object-fit: contain; padding: 10%; }
.ugc__item::after { content: ""; position: absolute; inset: 0; background: rgba(43,38,34,0.35); opacity: 0; transition: opacity var(--dur-base); }
.ugc__item .icon { position: absolute; inset: 0; margin: auto; color: #fff; z-index: 1; opacity: 0; transition: opacity var(--dur-base); inline-size: 28px; block-size: 28px; }
.ugc__item:hover img { transform: scale(1.05); }
.ugc__item:hover::after, .ugc__item:hover .icon { opacity: 1; }
.newsletter { text-align: center; }
.newsletter__form { display: flex; flex-direction: column; gap: var(--space-3); max-inline-size: 520px; margin: var(--space-6) auto 0; }
@media (min-width: 600px) { .newsletter__form { flex-direction: row; } .newsletter__form .input { flex: 1; } }
.newsletter__note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-block-start: var(--space-3); }

/* SHOP */
.shop-layout { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .shop-layout { grid-template-columns: 260px 1fr; gap: var(--space-9); } }
.shop-filters { display: none; }
@media (min-width: 1024px) { .shop-filters { display: block; position: sticky; inset-block-start: calc(var(--header-h) + var(--adminbar) + var(--space-5)); align-self: start; } }
.filter-group { border-block-end: var(--border-thin); padding-block: var(--space-4); }
.filter-group__title { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--fw-medium); margin-block-end: var(--space-2); }
html[lang="ar"] .filter-group__title { font-size: var(--fs-small); text-transform: none; }
.filter-group .check { min-block-size: 40px; padding-block: 8px; }
.filter-count { color: var(--color-text-muted); font-size: var(--fs-xs); margin-inline-start: auto; }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); padding-block-end: var(--space-4); border-block-end: var(--border-thin); }
.shop-toolbar__count { font-size: var(--fs-small); color: var(--color-text-muted); }
.shop-toolbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.shop-toolbar .select { min-block-size: var(--tap); inline-size: auto; padding-block: 8px; font-size: var(--fs-small); }
.coming-soon-card { display: grid; place-content: center; justify-items: center; gap: var(--space-3); text-align: center; aspect-ratio: 4 / 5; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-5); color: var(--color-text-muted); }
.coming-soon-card img { inline-size: 64px; opacity: 0.6; }

/* PRODUCT */
.pdp { display: grid; gap: var(--space-7); padding-block: var(--space-4) var(--space-9); }
@media (min-width: 1024px) { .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; } }
.gallery { display: grid; gap: var(--space-3); }
@media (min-width: 1024px) { .gallery { grid-template-columns: 84px 1fr; position: sticky; inset-block-start: calc(var(--header-h) + var(--adminbar) + var(--space-4)); } }
.gallery__main { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); }
@media (min-width: 1024px) { .gallery__main { order: 2; } }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; position: relative; overflow: hidden; cursor: zoom-in; }
.gallery__slide img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: transform var(--dur-base) var(--ease-out); transform-origin: var(--zx, 50%) var(--zy, 50%); }
@media (hover: hover) and (min-width: 1024px) { .gallery__slide.is-zooming img { transform: scale(1.9); } }
.gallery__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1024px) { .gallery__thumbs { flex-direction: column; } }
.gallery__thumb { flex: 0 0 68px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); border: 1px solid transparent; transition: border-color var(--dur-fast); }
@media (min-width: 1024px) { .gallery__thumb { flex-basis: auto; } }
.gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.gallery__thumb[aria-current="true"] { border-color: var(--color-text); }
.gallery__dots { position: absolute; inset-block-end: var(--space-3); inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.gallery__dots span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--color-border-strong); transition: background var(--dur-fast), inline-size var(--dur-base); }
.gallery__dots span.is-active { background: var(--color-text); inline-size: 18px; border-radius: 4px; }
@media (min-width: 1024px) { .gallery__dots { display: none; } }
.gallery__badges { position: absolute; inset-block-start: var(--space-4); inset-inline-start: var(--space-4); z-index: 2; }
.gallery__zoom { position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); z-index: 2; }
.pdp__info { display: grid; gap: var(--space-5); align-content: start; }
.pdp__title { font-size: var(--fs-h2); }
.pdp__subtitle { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-primary-ink); }
.pdp__shade-label { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-small); margin-block-end: var(--space-3); }
.pdp__shade-label strong { font-weight: var(--fw-medium); }
.pdp__buy, .pdp__info form.cart { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); margin: 0; }
.pdp__buy .btn--secondary { grid-column: 1 / -1; }
.pdp__wish { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); min-block-size: var(--tap); }
.pdp__wish[aria-pressed="true"] .icon { fill: var(--color-primary); color: var(--color-primary); }
.bnpl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--border-thin); border-radius: var(--radius-sm); font-size: var(--fs-small); background: var(--color-surface); }
.bnpl__logo { font-family: var(--font-body-en); font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 4px; direction: ltr; }
.bnpl__logo--tabby { background: #3BFFC1; color: #121212; }
.bnpl__logo--tamara { background: linear-gradient(90deg,#F5D4C8,#E7C1E8,#C8D7F5); color: #121212; }
.stock { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); }
.stock::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-bg); }
.stock--low::before { background: var(--color-warning); box-shadow: 0 0 0 4px var(--color-warning-bg); }
.delivery { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-warm); font-size: var(--fs-small); }
.delivery__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.delivery .select { min-block-size: 40px; padding-block: 6px; inline-size: auto; font-size: var(--fs-small); background-color: var(--color-surface); }
.pdp__claims { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reviews-summary { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .reviews-summary { grid-template-columns: 280px 1fr; gap: var(--space-9); } }
.reviews-score { font-family: var(--font-display-en); font-size: 4rem; line-height: 1; }
.review-list { display: grid; gap: var(--space-5); }
.review { padding-block-end: var(--space-5); border-block-end: var(--border-thin); display: grid; gap: var(--space-2); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ingredients { font-size: var(--fs-small); line-height: 1.8; direction: ltr; text-align: start; }
html[dir="rtl"] .ingredients { text-align: right; }

/* CART and CHECKOUT layout */
.cart-layout, .checkout-layout { display: grid; gap: var(--space-7); padding-block: var(--space-5) var(--space-10); }
@media (min-width: 1024px) { .cart-layout { grid-template-columns: 1fr 400px; gap: var(--space-9); align-items: start; } .checkout-layout { grid-template-columns: 1fr 420px; gap: var(--space-9); align-items: start; } }
.cart-aside, .checkout-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--adminbar) + var(--space-5)); }
.mini-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center; font-size: var(--fs-small); }
.mini-line__img { position: relative; inline-size: 56px; block-size: 56px; background: var(--color-surface); border-radius: var(--radius-sm); }
.mini-line__img img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 4px; }

/* CONTENT PAGES */
.about-hero { position: relative; display: grid; min-block-size: min(76vh, 720px); background: var(--color-peach); overflow: hidden; }
.about-hero > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 75% 30%; }
.about-hero__content { position: relative; z-index: 1; align-self: end; padding: var(--space-8) var(--gutter); max-inline-size: 620px; }
@media (min-width: 900px) { .about-hero__content { align-self: center; padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); } }
@media (max-width: 899px) { .about-hero { display: block; min-block-size: 0; background: var(--color-bg); } .about-hero > img { position: static; aspect-ratio: 4/3; object-position: 82% 30%; } }
.quote-block { text-align: center; max-inline-size: 860px; margin-inline: auto; }
.quote-block blockquote { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); line-height: 1.3; }
.contact-grid { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-10); } }
.contact-card { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); padding-block: var(--space-5); border-block-end: var(--border-thin); }
.contact-card__icon { inline-size: 48px; block-size: 48px; border-radius: 50%; border: 1px solid var(--color-accent); display: grid; place-items: center; color: var(--color-primary); }
.contact-card h2, .contact-card h3 { font-size: 1.25rem; }
.faq-search { position: relative; max-inline-size: 560px; margin: var(--space-6) auto 0; }
.faq-search .icon { position: absolute; inset-inline-start: 16px; inset-block: 0; margin-block: auto; color: var(--color-text-muted); }
.faq-search .input { padding-inline-start: 48px; }
.faq-layout { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 220px 1fr; gap: var(--space-9); } }
.faq-nav { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1024px) { .faq-nav { flex-direction: column; position: sticky; inset-block-start: calc(var(--header-h) + var(--adminbar) + var(--space-5)); align-self: start; } }
.faq-group + .faq-group { margin-block-start: var(--space-8); }
.faq-group h2 { font-size: 1.75rem; margin-block-end: var(--space-4); }
.policy-layout { display: grid; gap: var(--space-7); padding-block: var(--space-5) var(--space-10); }
@media (min-width: 1024px) { .policy-layout { grid-template-columns: 240px 1fr; gap: var(--space-10); } }
.policy-nav { display: grid; gap: var(--space-1); align-self: start; }
@media (min-width: 1024px) { .policy-nav { position: sticky; inset-block-start: calc(var(--header-h) + var(--adminbar) + var(--space-5)); } }
.policy-nav a { padding: var(--space-3) var(--space-4); border-inline-start: 1px solid var(--color-border); font-size: var(--fs-small); color: var(--color-text-muted); }
.policy-nav a.is-active, .policy-nav a:hover { border-color: var(--color-text); color: var(--color-text); }
.policy-section + .policy-section { margin-block-start: var(--space-9); padding-block-start: var(--space-9); border-block-start: var(--border-thin); }
.post-card { display: grid; gap: var(--space-3); align-content: start; position: relative; }
.post-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-peach); }
.post-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__meta { font-size: var(--fs-xs); color: var(--color-text-muted); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.post-card__title { font-size: 1.5rem; line-height: 1.25; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.article { padding-block: var(--space-7) var(--space-10); }
.article__hero { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-peach); margin-block: var(--space-7); }
.article__hero img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 75% 30%; }
.article__body { font-size: 1.0625rem; }
.callout, .article__body blockquote { padding: var(--space-5) var(--space-6); border-inline-start: 2px solid var(--color-primary); background: var(--color-surface-warm); font-family: var(--font-display); font-size: 1.3rem; line-height: 1.5; margin-block: var(--space-6); }
.notfound { min-block-size: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--space-10); }
.notfound__num { font-family: var(--font-display-en); font-size: clamp(6rem, 4rem + 10vw, 12rem); line-height: 1; color: var(--color-blush); }
.notfound__art { inline-size: 120px; margin: calc(-1 * var(--space-9)) auto var(--space-4); opacity: 0.85; }

.faq-nav .chip { white-space: nowrap; flex: 0 0 auto; }

/* ==========================================================================
   Cards v2: shop-by-shade + product cards (Oct 2026)
   ========================================================================== */
.shade-card, .product-card { --card-radius: 18px; --card-shadow: 0 28px 56px -32px rgba(43, 38, 34, 0.38); }

/* Shade cards */
.shade-card { aspect-ratio: auto; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; color: inherit; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.3s; }
.shade-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow); border-color: transparent; }
.shade-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(120% 95% at 50% 30%, #fff 0%, var(--tint) 72%); }
.shade-card .shade-card__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; padding: 9% 8% 5%; mix-blend-mode: multiply; transition: transform 1.2s var(--ease-out); }
.shade-card:hover .shade-card__media img { transform: scale(1.06); }
.shade-card__tag { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: var(--fs-xs); color: var(--color-text); }
.shade-card__body { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 22px 22px 4px; }
.shade-card__swatch { inline-size: 36px; block-size: 36px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0) 46%), var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #fff, 0 0 0 5px var(--color-border); }
.shade-card__text { min-inline-size: 0; }
.shade-card__text h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); line-height: 1.15; margin: 0; }
.shade-card__desc { display: block; margin-block-start: 3px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.shade-card__price { font-size: 1rem; font-weight: var(--fw-medium); white-space: nowrap; }
.shade-card__cta { display: flex; align-items: center; justify-content: space-between; margin: 16px 22px 22px; padding-block-start: 16px; border-block-start: 1px solid var(--color-border); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--fw-medium); }
.shade-card__cta .icon { transition: translate 0.4s var(--ease-out); }
.shade-card:hover .shade-card__cta .icon { translate: 5px 0; }
html[dir="rtl"] .shade-card:hover .shade-card__cta .icon { translate: -5px 0; }
html[lang="ar"] .shade-card__cta { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); }
@media (max-width: 767px) { .shade-card { aspect-ratio: auto; } .shade-card__media { aspect-ratio: 5 / 4; } }

/* Product cards */
.product-card { gap: 0; block-size: 100%; background: #fff; border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.3s; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow); border-color: transparent; }
.product-card__media { aspect-ratio: 1 / 1; border-radius: 0; background: radial-gradient(120% 95% at 50% 30%, #fff 0%, var(--tint) 75%); }
.product-card__media img { padding: 9%; mix-blend-mode: multiply; }
.product-card__badges { display: flex; flex-wrap: wrap; gap: 6px; inset-block-start: 14px; inset-inline-start: 14px; }
.product-card__wish { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 3; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--color-text); cursor: pointer; transition: transform 0.3s var(--ease-out), background 0.3s; }
.product-card__wish:hover { background: #fff; transform: scale(1.06); }
.product-card__wish[aria-pressed="true"] .icon { fill: var(--color-primary); color: var(--color-primary); }
.product-card__soldout { position: absolute; inset-inline: 14px; inset-block-end: 14px; z-index: 2; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); text-align: center; font-size: var(--fs-xs); }
.product-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 20px 20px 20px; }
.product-card__shade { display: flex; align-items: center; gap: 8px; margin: 0; }
.product-card__dot { inline-size: 12px; block-size: 12px; flex: none; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.product-card__title { font-size: clamp(1.375rem, 1.2rem + 0.4vw, 1.625rem); }
.product-card__name { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.product-card__rating { display: inline-flex; align-items: center; gap: 4px; }
.product-card__foot { margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px solid var(--color-border); }
.product-card__name { margin-block-end: 10px; }
.product-card__add { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; block-size: 44px; padding-inline: 18px; border-radius: 999px; background: var(--color-text); color: #fff; font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; transition: background 0.3s, transform 0.3s var(--ease-out); }
.product-card__add:hover { background: var(--color-primary); color: #fff; }
.product-card__add:active { transform: scale(0.97); }
.product-card__add.is-loading { opacity: 0.6; pointer-events: none; }
.product-card__add.is-added { background: var(--color-primary); }
html[lang="ar"] .product-card__add { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); }
@media (max-width: 420px) { .product-card__add { inline-size: 44px; padding: 0; } .product-card__add span { display: none; } }
@media (prefers-reduced-motion: reduce) { .shade-card, .product-card, .shade-card:hover, .product-card:hover { transform: none; } }
.story__img img { object-position: 74% 40%; }

/* Hero buttons: two equal buttons on one line on every screen size */
.hero__ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; inline-size: 100%; max-inline-size: 520px; flex-wrap: nowrap; }
.hero__ctas .btn { inline-size: 100%; min-inline-size: 0; justify-content: center; text-align: center; white-space: nowrap; padding-inline: 16px; }
@media (max-width: 600px) {
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { min-block-size: 50px; padding-inline: 8px; font-size: 10.5px; letter-spacing: 0.08em; }
  html[lang="ar"] .hero__ctas .btn { font-size: 14px; letter-spacing: 0; }
}
@media (max-width: 360px) {
  .hero__ctas .btn { font-size: 9.5px; letter-spacing: 0.05em; }
}
/* ==========================================================================
   About v2 + Contact v2 (Oct 2026)
   ========================================================================== */
.about2-hero, .contact2-hero { --r: 18px; }
.about2-hero { display: grid; background: var(--color-bg); }
@media (min-width: 900px) { .about2-hero { grid-template-columns: 1fr 1fr; min-block-size: min(86vh, 820px); } }
.about2-hero__content { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: var(--space-8) var(--gutter); }
@media (min-width: 900px) { .about2-hero__content { padding-inline: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))) var(--space-9); } }
.about2-hero__title { font-size: clamp(2.75rem, 2rem + 3.6vw, 5.25rem); line-height: 1.02; margin: 0; }
.about2-hero__title em, .contact2-hero__title em { font-style: italic; color: var(--color-primary); }
.about2-hero__lead { max-inline-size: 34ch; }
.about2-hero__media { position: relative; min-block-size: 420px; overflow: hidden; background: var(--color-peach); }
.about2-hero__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 30%; }
.about2-hero__badge { position: absolute; inset-block-end: 24px; inset-inline-start: 24px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: var(--fs-xs); color: var(--color-text-muted); }
.about2-hero__badge .num { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--color-text); }
.about2-stats { border-block: 1px solid var(--color-border); background: #fff; }
.about2-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .about2-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.about2-stat { display: grid; gap: 6px; padding: 28px 20px; text-align: center; border-inline-end: 1px solid var(--color-border); }
.about2-stat:last-child { border-inline-end: 0; }
@media (max-width: 899px) { .about2-stat:nth-child(2) { border-inline-end: 0; } .about2-stat:nth-child(-n+2) { border-block-end: 1px solid var(--color-border); } }
.about2-stat__num { font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; color: var(--color-primary-dark); }
.about2-stat__label { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.04em; }
.about2-story__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .about2-story__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10, 96px); } }
.about2-story__media { position: relative; padding-block-end: 12%; }
.about2-story__img { overflow: hidden; border-radius: var(--r, 18px); background: var(--color-peach); aspect-ratio: 1 / 1; }
.about2-story__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.about2-story__img--small { position: absolute; inline-size: 42%; aspect-ratio: 4 / 5; inset-block-end: 0; inset-inline-end: -4%; border: 6px solid var(--color-bg); box-shadow: 0 28px 56px -32px rgba(43, 38, 34, 0.45); }
@media (max-width: 899px) { .about2-story__img--small { inset-inline-end: 4%; } }
.about2-story__text h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); line-height: 1.1; }
.about2-mission { padding: 24px 26px; border-radius: 16px; background: var(--color-surface); border-inline-start: 3px solid var(--color-primary); }
.about2-mission h3 { font-size: 1.375rem; margin-block-end: 8px; }
.about2-values { display: grid; gap: 20px; margin-block-start: var(--space-7); }
@media (min-width: 768px) { .about2-values { grid-template-columns: repeat(3, 1fr); } }
.about2-value { position: relative; display: grid; gap: 12px; padding: 30px 28px 32px; border-radius: 18px; background: #fff; border: 1px solid var(--color-border); transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.about2-value:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -32px rgba(43, 38, 34, 0.38); }
.about2-value__icon { inline-size: 54px; block-size: 54px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--color-peach)); color: var(--color-primary-dark); }
.about2-value__num { position: absolute; inset-block-start: 26px; inset-inline-end: 28px; font-family: var(--font-display); font-size: 1.125rem; color: var(--color-text-muted); }
.about2-value h3 { font-size: 1.5rem; margin: 6px 0 0; }
.about2-value__text { font-size: var(--fs-small); color: var(--color-text-muted); }
.about2-band { position: relative; display: grid; place-items: center; min-block-size: min(78vh, 680px); padding: var(--space-9) var(--gutter); overflow: hidden; background: var(--color-peach); }
.about2-band > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.about2-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 38, 34, 0.05), rgba(43, 38, 34, 0.25)); }
.about2-band__card { position: relative; z-index: 1; max-inline-size: 560px; padding: 40px 36px; border-radius: 20px; text-align: center; background: rgba(250, 248, 245, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px rgba(43, 38, 34, 0.5); }
.about2-band__card .icon { color: var(--color-primary); }
.about2-band__card h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); margin-block: 10px 12px; }
.about2-band__text { color: var(--color-text-muted); }
.about2-cta .hero__ctas, .contact2-wa__btns { margin-inline: auto; }

/* Contact v2 */
.contact2-hero { padding-block: var(--space-6) var(--space-9); background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-blush, #F3E7DF) 100%); }
.contact2-hero__grid { display: grid; gap: var(--space-7); align-items: end; }
@media (min-width: 900px) { .contact2-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-9); } }
.contact2-hero__text { display: grid; gap: 16px; }
.contact2-hero__title { font-size: clamp(2.75rem, 2rem + 3.4vw, 5rem); line-height: 1.02; margin: 0; }
.contact2-wa { display: grid; gap: 10px; padding: 32px; border-radius: 22px; background: #fff; border: 1px solid var(--color-border); box-shadow: 0 40px 80px -48px rgba(43, 38, 34, 0.45); }
.contact2-wa__icon { inline-size: 56px; block-size: 56px; display: grid; place-items: center; border-radius: 50%; background: #E9F7EF; color: #1C9C55; }
.contact2-wa__icon .icon { inline-size: 26px; block-size: 26px; }
.contact2-wa__number { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); color: var(--color-text); line-height: 1.1; unicode-bidi: isolate; }
html[dir="rtl"] .contact2-wa__number { text-align: right; justify-self: stretch; }
.contact2-wa__btns { max-inline-size: none; margin-block-start: 8px; }
.contact2-cards { margin-block-start: calc(var(--space-7) * -1); position: relative; z-index: 1; }
.contact2-cards__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .contact2-cards__grid { grid-template-columns: repeat(3, 1fr); } }
.contact2-card { display: grid; align-content: start; gap: 8px; padding: 26px; border-radius: 18px; background: #fff; border: 1px solid var(--color-border); color: var(--color-text); transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.3s; }
.contact2-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -32px rgba(43, 38, 34, 0.38); border-color: transparent; color: var(--color-text); }
.contact2-card__icon { inline-size: 46px; block-size: 46px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--color-peach)); color: var(--color-primary-dark); margin-block-end: 6px; }
.contact2-card__label { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
html[lang="ar"] .contact2-card__label { font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; }
.contact2-card__value { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.3; word-break: break-word; }
.contact2-card__value--sm { font-family: inherit; font-size: var(--fs-small); line-height: 1.6; }
.contact2-card__more { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 4px; font-size: var(--fs-xs); color: var(--color-primary-dark); }
.contact2-main__grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .contact2-main__grid { grid-template-columns: 1.4fr 0.8fr; align-items: start; } }
.contact2-form { padding: clamp(24px, 4vw, 44px); border-radius: 22px; background: #fff; border: 1px solid var(--color-border); }
.contact2-form h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.contact2-form__submit { min-inline-size: 220px; }
@media (max-width: 600px) { .contact2-form__submit { inline-size: 100%; } }
.contact2-aside__img { overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3; background: var(--color-peach); }
.contact2-aside__img img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 80% 35%; }
.contact2-links { list-style: none; padding: 0; margin: 12px 0 0; border-block-start: 1px solid var(--color-border); }
.contact2-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-block-end: 1px solid var(--color-border); color: var(--color-text); font-size: var(--fs-small); }
.contact2-links a:hover { color: var(--color-primary-dark); }
.about2-story__img img { object-position: 78% 40%; }
.about2-band > img { object-position: 80% 35%; }
@media (max-width: 899px) { .about2-band > img { object-position: 85% 30%; } }

/* About v3 hero: single photo bleeding into ivory, floating glass cards, overlapping stats */
.about3-hero { position: relative; overflow: hidden; background: var(--color-bg); }
.about3-hero__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-peach); }
.about3-hero__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 55% 18%; animation: about3-zoom 9s var(--ease-out) both; }
@keyframes about3-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.about3-hero__lineart { display: none; }
.about3-hero__inner { position: relative; z-index: 2; }
.about3-hero__content { display: grid; gap: 16px; padding-block: 28px 40px; }
.about3-hero__title { font-size: clamp(2.75rem, 2rem + 3.8vw, 5.5rem); line-height: 1.02; margin: 4px 0 0; }
.about3-hero__title em { font-style: italic; color: var(--color-primary); }
.about3-hero__lead { max-inline-size: 36ch; }
.about3-hero .hero__ctas { margin-block-start: 6px; }
.about3-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 48px -28px rgba(43, 38, 34, 0.45); font-size: var(--fs-xs); color: var(--color-text-muted); animation: about3-float 7s ease-in-out infinite; }
.about3-float--year { display: grid; gap: 2px; inset-inline-end: 16px; inset-block-start: calc(min(125vw, 100%) - 0px); }
.about3-float--year .num { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--color-text); }
.about3-float--glow { inset-inline-start: 16px; inset-block-start: 16px; max-inline-size: 230px; animation-delay: -3s; }
.about3-float--glow img { inline-size: 48px; block-size: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.about3-float--glow span { color: var(--color-text); line-height: 1.35; }
@keyframes about3-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 899px) {
  .about3-float--year { inset-block-start: auto; inset-block-end: auto; top: calc(125vw - 96px); }
}
@media (max-width: 420px) { .about3-float--glow { display: none; } }
@media (min-width: 900px) {
  .about3-hero { min-block-size: min(88vh, 860px); display: grid; align-items: center; }
  .about3-hero__media { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 62%; aspect-ratio: auto; }
  .about3-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-bg) 0%, rgba(245, 244, 241, 0.55) 18%, rgba(245, 244, 241, 0) 42%); }
  .about3-hero__lineart { display: block; position: absolute; z-index: 1; inset-block-start: 10%; inset-inline-start: 30%; block-size: 70%; inline-size: auto; opacity: 0.22; pointer-events: none; }
  .about3-hero__content { max-inline-size: 560px; padding-block: 120px 150px; }
  .about3-float--year { inset-block-start: auto; inset-block-end: 120px; inset-inline-end: 6%; }
  .about3-float--glow { inset-inline-start: auto; inset-inline-end: 28%; inset-block-start: 22%; }
}
.about3-stats { position: relative; z-index: 4; }
.about3-stats__card { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 20px; background: #fff; border: 1px solid var(--color-border); box-shadow: 0 32px 64px -40px rgba(43, 38, 34, 0.4); }
@media (min-width: 900px) { .about3-stats { margin-block-start: -72px; } .about3-stats__card { grid-template-columns: repeat(4, 1fr); } }
.about3-stat { display: grid; gap: 6px; padding: 26px 18px; text-align: center; }
.about3-stat + .about3-stat { border-inline-start: 1px solid var(--color-border); }
@media (max-width: 899px) { .about3-stat:nth-child(3) { border-inline-start: 0; } .about3-stat:nth-child(-n+2) { border-block-end: 1px solid var(--color-border); } }
.about3-stat__num { font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; color: var(--color-primary-dark); }
.about3-stat__label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.about3-hero + .about3-stats + .about2-story { padding-block-start: var(--space-9); }
@media (prefers-reduced-motion: reduce) { .about3-hero__media img, .about3-float { animation: none; } }
/* About v3 fixes: mirror photo in Arabic so the face looks toward the text; mobile framing */
.about3-hero--flip .about3-hero__media { transform: scaleX(-1); }
.about3-hero__lineart { opacity: 0.16 !important; }
@media (max-width: 899px) { .about3-hero__media img { object-position: 78% 18%; } .about3-float--year { display: none; } }

/* About v3 photos: dedicated EN/AR hero photos + single story photo */
.about3-hero--photo .about3-hero__media { background: #efe4dc; }
.about3-hero--photo .about3-hero__media img { object-position: 50% 28%; }
@media (max-width: 899px) { .about3-hero--photo .about3-hero__media img { object-position: 50% 30%; } }
.about2-story__media { padding-block-end: 0; }
.about2-story__img--photo { aspect-ratio: 4 / 5; }
.about2-story__img.about2-story__img--photo img { object-position: 50% 35%; }
@media (min-width: 900px) {
  .about3-hero--photo .about3-hero__media { inline-size: auto; aspect-ratio: 769 / 975; max-inline-size: 56%; }
  .about3-hero--photo .about3-hero__media img { object-position: 50% 20%; }
  .about3-hero--photo .about3-hero__media::after { background: linear-gradient(90deg, var(--color-bg) 0%, rgba(245, 244, 241, 0.6) 12%, rgba(245, 244, 241, 0) 34%); }
  html[dir="rtl"] .about3-hero--photo .about3-hero__media::after { background: linear-gradient(270deg, var(--color-bg) 0%, rgba(245, 244, 241, 0.6) 12%, rgba(245, 244, 241, 0) 34%); }
  .about3-hero--photo .about3-float--glow { inset-inline-end: auto; inset-inline-start: 46%; inset-block-start: 18%; }
  .about3-hero--photo .about3-hero__lineart { inset-inline-start: 34%; }
}