/* Rozy Store — "bold glam": black, white and one hot burgundy; expanded uppercase display type,
   square edges, product cut-outs on warm grey. English is LTR, Arabic (/ar/) is RTL; every rule uses
   logical properties so both directions share one stylesheet. */

:root {
  --ink: #0b0b0b;
  --ink-2: #1c1a1a;
  --paper: #ffffff;
  --bone: #f3efec;
  --bone-2: #e8e2de;
  --line: #e3ddd9;
  --muted: #6b6461;
  --rozy: #a0103f;
  --rozy-dark: #7b0a2f;
  --rozy-light: #ff5c8f;
  --rozy-tint: #fbe8ee;

  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --latin-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --stretch: 112%;
  --track: .12em;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: 16px;
  --header: 64px;
}
:root[lang="ar"] {
  --display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --text: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --stretch: 100%;
  --track: 0;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:root[lang="ar"] body { font-size: 16px; line-height: 1.75; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--rozy); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip:focus { top: 8px; }
.no-scroll { overflow: hidden; }
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.fine { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
:root[lang="ar"] .fine { font-size: 13.5px; }
.center { text-align: center; }
.lede { color: var(--muted); max-width: 60ch; margin: -8px 0 28px; }
.h3 { font-size: 20px; }

/* Uppercase, tracked display type is an English thing; Arabic keeps its natural shapes. */
:root[lang="en"] :is(.eyebrow, .btn, .badge, .chip, .desknav a, .more, .crumbs, .shead__title, .pagehead h1,
  .hero__title, .cat__label, .cat__foot, .promo__title, .promo__types a, .cta__title, .footer__col h2, .acc summary,
  .field label, .banner__types, .brandcard__types, .brandcard__foot, .count, .h3, .notfound h1, .langlink, .drawer__panel > a,
  .product__fit span, .info__section h2, .steps strong, .routine__label strong, .quiz__q legend, .summary__row--total, .cgroup__head h2) { text-transform: uppercase; }
:root[lang="en"] :is(h1, h2, h3, .hero__title, .cat__label, .promo__title, .cta__title, .notfound__code, .footer__mega, .wordmark) { font-stretch: var(--stretch); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--text); letter-spacing: .2em; color: var(--rozy); margin-bottom: 18px; }
:root[lang="ar"] .eyebrow { font-size: 13px; letter-spacing: 0; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.eyebrow--light { color: var(--rozy-light); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 0;
  font: 600 12.5px/1 var(--text); letter-spacing: var(--track); white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
:root[lang="ar"] .btn { font: 700 15px/1 var(--display); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow, .more:hover .arrow, .cat:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow, [dir="rtl"] .more:hover .arrow, [dir="rtl"] .cat:hover .arrow { transform: scaleX(-1) translateX(4px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--rozy); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--rozy); color: #fff; }
.btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--muted, .btn:disabled { background: var(--bone-2); color: var(--muted); cursor: not-allowed; }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 58px; }
.more { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--text); letter-spacing: var(--track); white-space: nowrap; border-bottom: 1.5px solid transparent; padding-bottom: 3px; transition: border-color .2s, color .2s; }
:root[lang="ar"] .more { font-size: 14px; }
.more:hover { border-color: currentColor; color: var(--rozy); }
.linkbtn { background: none; border: 0; padding: 4px 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.linkbtn:hover { color: var(--rozy); }

/* ---------- Badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; font: 600 10.5px/1.1 var(--text); letter-spacing: .1em; background: #fff; color: var(--ink); border: 1px solid var(--line); max-width: 100%; }
:root[lang="ar"] .badge { font-size: 12px; letter-spacing: 0; }
.badge--pre { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge--pre::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rozy-light); flex: none; }
.badge--out { background: var(--bone-2); color: var(--muted); border-color: var(--bone-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 0 18px; border: 1px solid var(--ink); background: #fff; font: 600 12px/1 var(--text); letter-spacing: var(--track); transition: background .2s, color .2s; }
:root[lang="ar"] .chip { font: 600 15px/1 var(--display); }
.chip:hover { background: var(--bone); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tag { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); font-size: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Marquee (brand strip) ---------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
@keyframes marquee { to { transform: translateX(-25%); } }
@keyframes marquee-rtl { to { transform: translateX(25%); } }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header); }
.header__start, .header__end { display: flex; align-items: center; gap: 2px; }
.header__end { justify-content: flex-end; gap: 8px; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; position: relative; transition: color .2s; }
.iconbtn:hover { color: var(--rozy); }
.wordmark { display: inline-flex; gap: .26em; font: 900 19px/1 var(--latin-display); font-stretch: 112%; letter-spacing: .01em; text-transform: uppercase; direction: ltr; white-space: nowrap; }
.wordmark span:last-child { color: var(--rozy); }
@media (max-width: 380px) { .wordmark { font-size: 16px; } }
@media (min-width: 1024px) { .wordmark { font-size: 26px; } }
.wordmark--sm { font-size: 18px; }
.langlink { display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 8px; border: 1px solid var(--ink); font: 700 12px/1 var(--text); letter-spacing: .08em; transition: background .2s, color .2s; }
:root[lang="en"] .langlink { font: 700 15px/1 'Alexandria', 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; padding-bottom: 3px; }
.langlink:hover { background: var(--ink); color: #fff; }
.cartlink__count { position: absolute; top: 5px; inset-inline-end: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rozy); color: #fff; font: 700 10px/18px var(--text); text-align: center; }
.desknav { display: none; border-top: 1px solid var(--line); }
.desknav__row { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 40px); height: 46px; align-items: stretch; }
.desknav a { display: flex; align-items: center; font: 600 11.5px/1 var(--text); letter-spacing: .14em; position: relative; white-space: nowrap; }
:root[lang="ar"] .desknav a { font: 600 15px/1 var(--display); letter-spacing: 0; }
.desknav a::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--rozy); transform: scaleX(0); transition: transform .3s var(--ease); }
.desknav a:hover::after, .desknav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1024px) {
  .desknav { display: block; }
  .header__menu { display: none; }
}

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(11, 11, 11, .55); animation: fade .25s both; }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(88vw, 400px); background: #fff; padding: 0 var(--gutter) 32px; overflow-y: auto; display: flex; flex-direction: column; animation: slide-in .35s var(--ease) both; }
[dir="rtl"] .drawer__panel { animation-name: slide-in-rtl; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: var(--header); margin-bottom: 8px; }
.drawer__panel > a { padding: 14px 0; border-bottom: 1px solid var(--line); font: 800 20px/1.1 var(--display); font-stretch: var(--stretch); transition: color .2s, padding .2s; }
.drawer__panel > a:hover, .drawer__panel > a[aria-current="page"] { color: var(--rozy); padding-inline-start: 6px; }
.drawer__panel > a.drawer__lang { margin-top: 20px; border: 1px solid var(--ink); text-align: center; font: 700 15px/1 'Alexandria', var(--text); padding: 14px; text-transform: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(-100%); } }
@keyframes slide-in-rtl { from { transform: translateX(100%); } }

/* ---------- Search ---------- */
.search { position: fixed; inset: 0; z-index: 70; }
.search__backdrop { position: absolute; inset: 0; background: rgba(11, 11, 11, .55); animation: fade .2s both; }
.search__panel { position: relative; background: #fff; padding-bottom: 24px; max-height: 88vh; overflow-y: auto; animation: drop .3s var(--ease) both; }
@keyframes drop { from { transform: translateY(-16px); opacity: 0; } }
.search__bar { display: flex; align-items: center; gap: 12px; height: 76px; border-bottom: 1px solid var(--ink); }
.search__bar input { flex: 1; min-width: 0; border: 0; outline: 0; font: 600 20px/1.2 var(--display); background: none; }
.search__bar input::-webkit-search-cancel-button { display: none; }
.search__hint { margin-top: 18px; }
.search__results { list-style: none; margin: 8px 0 0; padding: 0; }
.search__hit { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.search__hit:hover strong { color: var(--rozy); }
.search__img { width: 52px; height: 64px; flex: none; background: var(--bone); display: grid; place-items: center; }
.search__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.search__text { display: flex; flex-direction: column; min-width: 0; }
.search__text strong { font-weight: 600; transition: color .2s; }
.search__text span { font-size: 12.5px; color: var(--muted); }
.search__none { padding: 18px 0; color: var(--muted); }
.search__none a { color: var(--rozy); text-decoration: underline; }

/* ---------- Wishlist & account ---------- */
.wishbtn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); transition: color .2s, transform .2s; }
.wishbtn:hover { color: var(--rozy); transform: scale(1.08); }
.wishbtn[aria-pressed="true"] { color: var(--rozy); }
.wishbtn[aria-pressed="true"] path { fill: currentColor; }
.pcard { position: relative; }
.pcard__wish { position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; }
.wishbtn--lg { width: 58px; height: 58px; flex: none; border: 1px solid var(--line); border-radius: 0; background: #fff; }
.product__buy { display: flex; gap: 10px; }
.product__buy > :first-child { flex: 1; }
@media (max-width: 599px) { .header__account { display: none; } }
/* Small phones: the language switch moves to the menu and footer so the header row fits. */
@media (max-width: 479px) {
  .header__end .langlink { display: none; }
  .header .iconbtn { width: 40px; }
  .wordmark { font-size: 17px; }
}
.acctiles { display: grid; gap: 10px; padding-bottom: 24px; }
@media (min-width: 600px) { .acctiles { grid-template-columns: 1fr 1fr; } }
.acctile { position: relative; display: grid; gap: 6px; padding: 22px 52px 22px 22px; border: 1px solid var(--line); background: #fff; transition: border-color .2s; }
[dir="rtl"] .acctile { padding: 22px 22px 22px 52px; }
.acctile:hover { border-color: var(--ink); }
.acctile strong { font: 800 17px/1.2 var(--display); }
.acctile span { color: var(--muted); font-size: 14px; }
.acctile .arrow { position: absolute; top: 24px; inset-inline-end: 20px; }

/* ---------- Brand logos ---------- */
/* --s is the side of a square with the logo's area; width = s·k, height = s/k (k = √ratio). */
.brandname { font-family: var(--latin-display); font-weight: 800; font-stretch: 112%; direction: ltr; unicode-bidi: isolate; }
.brandlogo { --s: 40px; display: flex; align-items: center; justify-content: center; }
.brandlogo img { width: calc(var(--s) * var(--k)); max-width: 100%; height: auto; }
.brandlogo--sm { --s: 22px; justify-content: flex-start; }
.brandlogo--sm img { width: auto; height: max(14px, calc(var(--s) / var(--k))); }
.brandlogo--inline { --s: 1.3em; display: inline-flex; vertical-align: middle; margin-inline: .12em; }
.brandlogo--inline img { width: auto; height: max(.85em, calc(var(--s) / var(--k))); max-width: none; }
.brandname.brandlogo--sm, .brandname.brandlogo--inline { display: inline; }
.pcard__brand.brandlogo { --s: 24px; justify-content: flex-start; min-height: 28px; }
.pcard__brand.brandname { font-size: 13px; }
.product__brandmark.brandlogo { --s: 40px; justify-content: flex-start; }
.product__brandmark.brandname { font-size: 22px; }
.bstrip__mark.brandlogo { --s: 46px; }
.bstrip__mark.brandname { font-size: 22px; }
.brandcard__name.brandlogo { --s: 56px; }
.brandcard__name.brandname { font-size: 30px; }
.banner__name.brandlogo { --s: 84px; justify-content: flex-start; }
.banner__name.brandname { font-size: clamp(44px, 8vw, 88px); }
.minibrand__mark.brandlogo { --s: 34px; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 45%, rgba(160, 16, 63, .55), transparent 70%); }
[dir="rtl"] .hero::before { background: radial-gradient(60% 70% at 22% 45%, rgba(160, 16, 63, .55), transparent 70%); }
.hero__inner { display: grid; gap: 8px; padding-block: 44px 8px; }
.hero__title { font-weight: 900; font-size: clamp(46px, 12.4vw, 100px); position: relative; z-index: 3; line-height: .88; letter-spacing: -.02em; margin-bottom: 22px; }
:root[lang="ar"] .hero__title { line-height: 1.12; letter-spacing: 0; font-size: clamp(52px, 13vw, 132px); }
.hero__title span { display: block; animation: rise .9s var(--ease) both; }
.hero__title span + span { animation-delay: .12s; }
.hero__accent { color: transparent; -webkit-text-stroke: 1.5px #fff; }
:root[lang="ar"] .hero__accent { color: var(--rozy-light); -webkit-text-stroke: 0; }
@supports not (-webkit-text-stroke: 1px #fff) { .hero__accent { color: var(--rozy-light); } }
.hero__text > p { max-width: 44ch; color: rgba(255, 255, 255, .74); font-size: 16px; animation: rise .9s .2s var(--ease) both; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; animation: rise .9s .28s var(--ease) both; }
.hero__art { position: relative; height: clamp(300px, 80vw, 420px); }
.hero__pic { position: absolute; bottom: 4%; height: 78%; width: auto; filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .55)); animation: float 7s ease-in-out infinite alternate, pop 1s var(--ease) both; }
.hero__pic--1 { inset-inline-start: 50%; height: 86%; bottom: 2%; translate: -50% 0; z-index: 2; animation-delay: 0s, .15s; }
[dir="rtl"] .hero__pic--1 { translate: 50% 0; }
.hero__pic--2 { inset-inline-start: 0; height: 58%; bottom: 6%; rotate: -10deg; animation-delay: -2s, .3s; }
.hero__pic--3 { inset-inline-end: 0; height: 58%; bottom: 6%; rotate: 9deg; animation-delay: -4s, .45s; }
.hero__ring { position: absolute; inset-inline-start: 50%; top: 50%; width: min(78%, 420px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; translate: -50% -50%; z-index: -1; }
[dir="rtl"] .hero__ring { translate: 50% -50%; }
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; padding-block: 18px 22px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .14); font: 600 11px/1.4 var(--text); letter-spacing: .16em; color: rgba(255, 255, 255, .8); }
:root[lang="en"] .hero__trust { text-transform: uppercase; }
:root[lang="ar"] .hero__trust { font: 500 13px/1.4 var(--display); letter-spacing: 0; }
.hero__trust li { display: flex; align-items: center; gap: 10px; }
.hero__trust li::before { content: '✦'; color: var(--rozy-light); font-size: 9px; }
@media (min-width: 900px) {
  .hero__pic--2 { inset-inline-start: -4%; height: 54%; }
  .hero__pic--3 { inset-inline-end: -4%; height: 54%; }
  .hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; min-height: min(76vh, 700px); padding-block: 56px; }
  .hero__art { height: min(64vh, 580px); }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes pop { from { opacity: 0; scale: .9; } }
@keyframes float { to { transform: translateY(-12px); } }

/* ---------- Brand strip ---------- */
.bstrip { border-bottom: 1px solid var(--line); }
.bstrip .marquee__track { animation-duration: 40s; }
.bstrip:hover .marquee__track { animation-play-state: paused; }
.bstrip__item { display: grid; place-items: center; height: 104px; padding-inline: clamp(28px, 4vw, 56px); border-inline-end: 1px solid var(--line); }
.bstrip__item img { filter: grayscale(1) contrast(1.3); opacity: .8; transition: filter .3s, opacity .3s; }
.bstrip__item:hover img { filter: none; opacity: 1; }

/* ---------- Sections ---------- */
.section { padding-block: 56px; }
.section--tight { padding-block: 24px; }
.section--bone { background: var(--bone); }
@media (min-width: 900px) { .section { padding-block: 88px; } }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.shead__title { font-weight: 900; font-size: clamp(30px, 6vw, 60px); line-height: .95; letter-spacing: -.01em; }
:root[lang="ar"] .shead__title { line-height: 1.25; letter-spacing: 0; font-size: clamp(28px, 5.4vw, 52px); }
@media (max-width: 599px) { .shead { flex-direction: column; align-items: flex-start; } }

/* ---------- Campaign banners (image, video, or a product composition until media is uploaded) ---------- */
.section--flush { padding-block: 12px 0; }
@media (min-width: 900px) { .section--flush { padding-block: 16px 0; } }
.camps { display: grid; gap: 8px; }
@media (min-width: 900px) { .camps { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.camp { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; isolation: isolate; background: var(--ink); }
@media (min-width: 600px) and (max-width: 899px) { .camp { aspect-ratio: 16 / 11; } }
.camp--rozy { background: radial-gradient(90% 80% at 50% 30%, #c4185a, var(--rozy) 55%, var(--rozy-dark)); }
.camp--ink { background: radial-gradient(90% 80% at 50% 30%, #3a2a30, var(--ink) 65%); }
.camp--bone { background: var(--bone); color: var(--ink); }
.camp__media { position: absolute; inset: 0; z-index: -1; }
.camp__video, .camp__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.camp:hover .camp__video, .camp:hover .camp__img { transform: scale(1.04); }
.camp__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55)); }
.camp--bone .camp__media::after { display: none; }
.camp__pics { position: absolute; inset: 7% 0 36%; }
.camp__pic { position: absolute; bottom: 0; height: 74%; width: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .4)); transition: transform .8s var(--ease); }
.camp__pic--1 { inset-inline-start: 50%; height: 92%; translate: -50% 0; z-index: 2; }
[dir="rtl"] .camp__pic--1 { translate: 50% 0; }
.camp__pic--2 { inset-inline-start: 6%; rotate: -8deg; }
.camp__pic--3 { inset-inline-end: 6%; rotate: 8deg; }
.camp:hover .camp__pic--1 { transform: translateY(-10px); }
.camp:hover .camp__pic--2 { transform: translate(-8px, -4px); }
.camp:hover .camp__pic--3 { transform: translate(8px, -4px); }
.camp__text { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(18px, 3vw, 36px); display: grid; gap: 10px; justify-items: start; }
.camp__title { font-weight: 900; font-size: clamp(32px, 5.4vw, 64px); line-height: .92; letter-spacing: -.02em; }
:root[lang="en"] .camp__title { text-transform: uppercase; font-stretch: var(--stretch); }
:root[lang="ar"] .camp__title { line-height: 1.2; letter-spacing: 0; }
.camp__text p { max-width: 40ch; color: rgba(255, 255, 255, .82); }
.camp--bone .camp__text p { color: var(--muted); }
.camp__text .btn { margin-top: 6px; }
.camp__link:hover { background: var(--rozy); color: #fff; }
.camp__link::after { content: ''; position: absolute; inset: 0; z-index: -1; }

/* ---------- Shoppable video reels ---------- */
.section--ink { background: var(--ink); color: #fff; }
.section--ink .lede { color: rgba(255, 255, 255, .65); }
.section--ink .rail { scrollbar-color: #fff transparent; }
.rail--reels { grid-auto-columns: min(64vw, 250px); gap: 12px; scrollbar-width: none; }
.rail--reels::-webkit-scrollbar { display: none; }
.reels__grid { display: grid; gap: 8px; }
.reels__intro .arrows { margin-top: 20px; }
@media (max-width: 899px) { .reels__intro .arrows { display: none; } }
@media (min-width: 900px) {
  .reels__grid { grid-template-columns: minmax(240px, .9fr) 3fr; gap: 40px; align-items: start; }
  .reels__intro { position: sticky; top: 140px; }
  .rail--reels { grid-auto-columns: calc((100% - 24px) / 3); }
}
@media (min-width: 1300px) { .rail--reels { grid-auto-columns: calc((100% - 36px) / 3.4); } }
.reel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.reel__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink-2); }
.reel__video, .reel__img { width: 100%; height: 100%; object-fit: cover; }
.reel__media::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); pointer-events: none; }
.reel__ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 40%, #5a1030, var(--ink-2) 75%); }
.reel:nth-child(even) .reel__ph { background: radial-gradient(80% 60% at 50% 40%, #3a2a30, var(--ink-2) 75%); }
.reel__ph img { width: 70%; height: auto; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .5)); animation: float 6s ease-in-out infinite alternate; }
.reel:nth-child(2n) .reel__ph img { animation-delay: -3s; }
.reel__soon { position: absolute; z-index: 1; top: 12px; inset-inline-start: 12px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .4); font: 600 10.5px/1 var(--text); letter-spacing: .1em; color: rgba(255, 255, 255, .8); }
.reel__cap { position: absolute; z-index: 1; inset-inline: 14px; bottom: 14px; font: 800 18px/1.1 var(--display); }
:root[lang="en"] .reel__cap { text-transform: uppercase; font-stretch: var(--stretch); }
.reel__product { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px; background: #fff; color: var(--ink); transition: background .2s; }
.reel__product:hover { background: var(--rozy-tint); }
.reel__thumb { position: relative; width: 44px; height: 52px; background: var(--bone); }
.reel__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.reel__info { display: flex; flex-direction: column; min-width: 0; }
.reel__name { font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__price { font-size: 12px; color: var(--muted); }
.reel__go { display: grid; place-items: center; }

/* ---------- Video controls & carousel arrows ---------- */
.vctl { position: absolute; z-index: 3; bottom: 14px; inset-inline-end: 14px; display: flex; gap: 8px; }
.reel .vctl { top: 10px; bottom: auto; inset-inline-end: 10px; }
.vctl__btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); transition: background .2s, color .2s; }
.vctl__btn:hover { background: var(--rozy); color: #fff; }
.vctl__btn .i-play, .vctl__btn[aria-pressed="true"] .i-pause, .vctl__btn .i-on, .vctl__btn[aria-pressed="true"] .i-off { display: none; }
.vctl__btn[aria-pressed="true"] .i-play, .vctl__btn[aria-pressed="true"] .i-on { display: inline; }
.arrows { display: flex; gap: 8px; }
.arrows__btn { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: inherit; transition: background .2s, color .2s, border-color .2s; }
.arrows__btn:hover { background: var(--rozy); border-color: var(--rozy); color: #fff; }
[dir="rtl"] .arrows__btn svg { transform: scaleX(-1); }

/* ---------- Hero with an uploaded video or photo ---------- */
.hero--media { min-height: min(86vh, 760px); display: grid; align-items: end; }
.hero--media::before { display: none; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .7)); }
.hero--media .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 80px 56px; }
.hero--media .vctl { bottom: 22px; inset-inline-end: var(--gutter); }

/* ---------- Handpicked: centre-focus product carousel ---------- */
.pick { padding-block: 56px 48px; background: var(--rozy-tint); overflow: hidden; }
@media (min-width: 900px) { .pick { padding-block: 80px 64px; } }
.pick__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.pick__title { font-weight: 900; font-size: clamp(34px, 7vw, 84px); line-height: .92; letter-spacing: -.02em; color: var(--rozy); }
:root[lang="en"] .pick__title { text-transform: uppercase; font-stretch: var(--stretch); }
:root[lang="ar"] .pick__title { line-height: 1.2; letter-spacing: 0; }
.pick .arrows { color: var(--rozy); }
.pick__track { --w: min(46vw, 230px); display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 36px calc(50% - var(--w) / 2) 44px; }
.pick__track::-webkit-scrollbar { display: none; }
.pick__item { flex: 0 0 var(--w); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-inline: 8px; opacity: .45; transform: scale(.78); transition: transform .5s var(--ease), opacity .5s var(--ease); }
.pick__item.is-center { opacity: 1; transform: scale(1.12); }
.pick__img { position: relative; width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; }
.pick__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(122, 10, 47, .22)); }
.pick__item.is-center .pick__img::before { content: ''; position: absolute; inset: 12% 4% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.pick__brand { justify-content: center; margin-top: 6px; }
.pick__name { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick__price { font-size: 12.5px; color: var(--muted); }
.pick__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

/* ---------- Categories ---------- */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 900px) { .cats { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.cat { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 1.08; padding: clamp(14px, 2vw, 24px); background: var(--ink); color: #fff; position: relative; overflow: hidden; transition: background .35s; }
.cat--2, .cat--3 { background: var(--rozy); }
.cat:hover { background: var(--rozy-dark); }
.cat--2:hover, .cat--3:hover { background: var(--ink); }
.cat__num { font: 600 12px/1 var(--text); opacity: .6; letter-spacing: .1em; }
.cat > :not(.cat__media) { position: relative; z-index: 1; }
.cat__media { position: absolute; inset: 0; z-index: 0; }
.cat__img, .cat__video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat:hover .cat__img, .cat:hover .cat__video { transform: scale(1.05); }
.cat--photo .cat__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .65)); }
.cat__pic { position: absolute; top: 9%; height: 50%; width: auto; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .4)); transition: transform .6s var(--ease); }
.cat__pic--1 { inset-inline-end: 8%; rotate: 6deg; z-index: 1; }
.cat__pic--2 { inset-inline-end: 34%; top: 16%; height: 40%; rotate: -8deg; opacity: .9; }
.cat:hover .cat__pic--1 { transform: translateY(-8px) rotate(-3deg); }
.cat:hover .cat__pic--2 { transform: translateY(-4px) rotate(3deg); }
.cat__label { margin-top: auto; margin-bottom: 12px; }
.cat__label { font: 900 clamp(24px, 6vw, 44px)/.95 var(--display); overflow-wrap: anywhere; letter-spacing: -.01em; transition: transform .4s var(--ease); }
:root[lang="ar"] .cat__label { line-height: 1.2; }
.cat:hover .cat__label { transform: translateY(-6px); }
.cat__foot { display: flex; align-items: center; justify-content: space-between; font: 600 11px/1 var(--text); letter-spacing: .12em; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .3); }
:root[lang="ar"] .cat__foot { font-size: 13px; letter-spacing: 0; }

/* ---------- Product rail & grid ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(70vw, 290px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 900px) { .rail { grid-auto-columns: calc((100% - 48px) / 4); } }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 36px 20px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.pcard { display: flex; flex-direction: column; min-width: 0; }
.pcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--bone); overflow: hidden; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 11% 12%; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__media .badge { position: absolute; top: 10px; inset-inline-start: 10px; max-width: calc(100% - 20px); }
.noimg { font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding-block: 14px 12px; flex: 1; }
.pcard__name { font: 500 14px/1.4 var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__name a:hover { color: var(--rozy); }
.pcard__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 12.5px; color: var(--muted); }
.pcard__price { font: 700 14.5px/1.2 var(--text); color: var(--ink); }
.pcard__btn { min-height: 44px; font-size: 11.5px; }
:root[lang="ar"] .pcard__btn { font-size: 14px; }

/* ---------- Promo (routine finder) ---------- */
.promo { background: var(--rozy); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.promo::after { content: '✦'; position: absolute; inset-inline-end: -4%; top: 50%; translate: 0 -50%; font-size: clamp(220px, 40vw, 520px); line-height: 1; color: rgba(255, 255, 255, .07); z-index: -1; animation: spin 40s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.promo__inner { padding-block: 64px; }
@media (min-width: 900px) { .promo__inner { padding-block: 96px; } }
.promo__title { font-weight: 900; font-size: clamp(40px, 9.4vw, 108px); line-height: .9; letter-spacing: -.02em; max-width: 12ch; margin-bottom: 20px; }
:root[lang="ar"] .promo__title { line-height: 1.2; letter-spacing: 0; font-size: clamp(36px, 8vw, 84px); max-width: 16ch; }
.promo p { max-width: 52ch; color: rgba(255, 255, 255, .85); }
.promo__types { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.promo__types a { padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .55); font: 600 11.5px/1 var(--text); letter-spacing: .12em; transition: background .2s, color .2s; }
:root[lang="ar"] .promo__types a { font: 600 14px/1 var(--display); letter-spacing: 0; }
.promo__types a:hover { background: #fff; color: var(--rozy); }

/* ---------- Bundles ---------- */
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.bcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); min-width: 0; transition: border-color .25s; }
.bcard:hover { border-color: var(--ink); }
.section--bone .bcard { border-color: transparent; }
.bcard__media { display: flex; justify-content: center; align-items: flex-end; height: 200px; padding: 18px 12px 0; background: linear-gradient(180deg, var(--bone-2), var(--bone)); overflow: hidden; }
.bcard__media img { height: 160px; width: auto; margin-inline: -14px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .15)); transition: transform .5s var(--ease); }
.bcard__media img:nth-child(2) { height: 176px; position: relative; z-index: 1; }
.bcard:hover .bcard__media img { transform: translateY(-6px); }
.bcard__body { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1; }
.bcard__brands { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; min-height: 22px; }
.bcard__name { font-size: 19px; font-weight: 800; line-height: 1.2; }
.bcard__items { margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--muted); }
.bcard__items li::marker { color: var(--rozy); }
.bcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.bcard__price { font-size: 16px; }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .wrap > .steps, .section > .steps { grid-template-columns: repeat(4, 1fr); } .narrow .steps, .split .steps { grid-template-columns: 1fr; } }
.steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--ink); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 900 40px/1 var(--latin-display); font-stretch: 125%; color: var(--rozy); }
.steps strong { font: 800 16px/1.25 var(--display); letter-spacing: .02em; }
:root[lang="ar"] .steps strong { font-size: 18px; letter-spacing: 0; }
.steps span { color: var(--muted); font-size: 14px; }

/* ---------- Call to action band ---------- */
.cta { background: var(--ink); color: #fff; }
.cta__inner { padding-block: 64px; display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) { .cta__inner { padding-block: 96px; grid-template-columns: 1.3fr 1fr; align-items: end; column-gap: 64px; } .cta__inner .btn { grid-column: 2; justify-self: start; } .cta__title { grid-row: span 2; } }
.cta__title { font-weight: 900; font-size: clamp(34px, 7vw, 80px); line-height: .92; letter-spacing: -.02em; }
:root[lang="ar"] .cta__title { line-height: 1.2; letter-spacing: 0; font-size: clamp(32px, 6vw, 64px); }
.cta p { color: rgba(255, 255, 255, .72); max-width: 46ch; }
.cta .brandlogo--inline img, .cta .brandlogo--sm img { filter: brightness(0) invert(1); }

/* ---------- Page heads, breadcrumbs, banners ---------- */
.pagehead { padding-block: 40px 28px; }
@media (min-width: 900px) { .pagehead { padding-block: 64px 36px; } }
.pagehead h1 { font-weight: 900; font-size: clamp(34px, 8vw, 88px); overflow-wrap: anywhere; line-height: .92; letter-spacing: -.02em; }
:root[lang="ar"] .pagehead h1 { line-height: 1.2; letter-spacing: 0; font-size: clamp(34px, 7vw, 72px); }
.pagehead p { margin-top: 16px; color: var(--muted); max-width: 60ch; font-size: 16px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 20px; font: 600 11px/1.4 var(--text); letter-spacing: .14em; color: var(--muted); }
:root[lang="ar"] .crumbs { font-size: 13px; letter-spacing: 0; }
.crumbs a:hover { color: var(--rozy); }
.banner { background: var(--bone); }
.banner__inner { padding-block: 8px 48px; }
.banner__title { margin-block: 18px 12px; }
.banner__types { font: 600 12px/1.4 var(--text); letter-spacing: .14em; color: var(--rozy); }
:root[lang="ar"] .banner__types { font-size: 14px; letter-spacing: 0; }
.banner__about { margin-top: 12px; color: var(--muted); max-width: 60ch; }
.count { font: 600 11.5px/1.4 var(--text); letter-spacing: .14em; color: var(--muted); }
:root[lang="ar"] .count { font-size: 13.5px; letter-spacing: 0; }
.count--top { padding-block: 28px 18px; }

/* ---------- Brands page ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; padding-bottom: 56px; }
.brandcard { display: flex; flex-direction: column; border: 1px solid var(--line); transition: border-color .25s; }
.brandcard:hover { border-color: var(--ink); }
.brandcard__mark { display: grid; place-items: center; height: 180px; background: var(--bone); transition: background .3s; }
.brandcard:hover .brandcard__mark { background: var(--bone-2); }
.brandcard__mark img { transition: transform .5s var(--ease); }
.brandcard:hover .brandcard__mark img { transform: scale(1.06); }
.brandcard__types { padding: 16px 18px 0; font: 600 11.5px/1.4 var(--text); letter-spacing: .12em; color: var(--rozy); }
:root[lang="ar"] .brandcard__types { font-size: 14px; letter-spacing: 0; }
.brandcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px 18px; font: 600 11.5px/1.4 var(--text); letter-spacing: .12em; color: var(--muted); }
:root[lang="ar"] .brandcard__foot { font-size: 13.5px; letter-spacing: 0; }
.brandcard__foot .more { color: var(--ink); }
.empty { padding: 32px 0; color: var(--muted); }
.minibrands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.minibrand { display: grid; place-items: center; height: 96px; background: var(--bone); border: 1px solid transparent; transition: border-color .25s, background .25s; }
.minibrand:hover { border-color: var(--ink); background: #fff; }

/* ---------- Product page ---------- */
.product { display: grid; gap: 28px; padding-bottom: 32px; }
@media (min-width: 900px) { .product { grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .product__info { position: sticky; top: 140px; } }
.gallery { min-width: 0; }
.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: 4 / 5; background: var(--bone); display: grid; place-items: center; position: relative; }
.gallery__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gallery__thumb { flex: none; width: 64px; height: 80px; padding: 0; background: var(--bone); border: 1.5px solid transparent; transition: border-color .2s; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.gallery__thumb[aria-current="true"] { border-color: var(--ink); }
.product__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.product__brand { align-self: flex-start; }
.product__name { font-weight: 800; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.04; letter-spacing: -.01em; overflow-wrap: anywhere; }
:root[lang="en"] .product__name { text-transform: uppercase; }
.product__price { font: 700 22px/1.2 var(--text); }
.product__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.product__fit { padding: 14px 16px; background: var(--rozy-tint); font-size: 14px; }
.product__fit span { font: 700 11px/1 var(--text); letter-spacing: .12em; color: var(--rozy); margin-inline-end: 6px; }
:root[lang="ar"] .product__fit span { font-size: 13px; letter-spacing: 0; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.facts li { display: flex; gap: 10px; }
.facts .facts__origin { color: var(--ink); font-weight: 600; }
.facts li::before { content: '✦'; color: var(--rozy); font-size: 9px; padding-top: 4px; }
.accs { border-bottom: 1px solid var(--line); }
.acc { border-top: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; font: 700 12.5px/1.3 var(--text); letter-spacing: .12em; }
:root[lang="ar"] .acc summary { font: 700 16px/1.4 var(--display); letter-spacing: 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font: 300 22px/1 var(--text); transition: transform .3s var(--ease); }
.acc[open] summary::after { transform: rotate(45deg); }
.acc > p { padding-bottom: 20px; color: var(--muted); }
.acc .more { color: var(--ink); margin-inline-start: 6px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; padding-bottom: 32px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font: 600 11px/1.3 var(--text); letter-spacing: .14em; }
:root[lang="ar"] .field label { font-size: 14px; letter-spacing: 0; }
.field input:not(.sr-only), .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #cdc6c2; border-radius: 0; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
[aria-invalid="true"] { border-color: var(--rozy) !important; box-shadow: inset 0 0 0 1px var(--rozy) !important; }
.field-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; }
.field-row--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .field-row--even { grid-template-columns: 1fr; } }
.upload { display: flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border: 1.5px dashed #b9b1ad; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font: 500 14px/1.3 var(--text) !important; transition: border-color .2s, background .2s; }
.upload:hover { border-color: var(--ink); background: var(--bone); }
input.sr-only:focus-visible + * , .field:focus-within .upload { border-color: var(--ink); }
.form__error { padding: 12px 14px; background: var(--rozy-tint); color: var(--rozy-dark); border-inline-start: 3px solid var(--rozy); font-size: 14px; }
.split { display: grid; gap: 8px; padding-bottom: 40px; }
@media (min-width: 960px) { .split { grid-template-columns: .9fr 1.1fr; gap: 72px; } .split__aside { position: sticky; top: 140px; align-self: start; } .split__main { padding-top: 64px; } }
.done { display: grid; justify-items: center; gap: 14px; padding: 40px 24px; margin-bottom: 32px; background: var(--bone); text-align: center; }
.done svg { color: var(--rozy); }
.done h2 { font-size: clamp(24px, 4vw, 34px); }
:root[lang="en"] .done h2 { text-transform: uppercase; }
.order-text { width: 100%; text-align: start; white-space: pre-wrap; background: #fff; border: 1px solid var(--line); padding: 16px; font: 13px/1.6 var(--text); margin: 0; }

/* ---------- Bag ---------- */
.cgroup { margin-bottom: 24px; }
.cgroup__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.cgroup__head h2 { font-size: 18px; }
.cline { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.cline .media { aspect-ratio: 4 / 5; background: var(--bone); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.cline .media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cline__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.cline__name { font-weight: 600; overflow-wrap: anywhere; }
.cline__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.cline__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; width: 100%; margin-top: 4px; }
.cline__row strong { margin-inline-end: auto; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); }
.qty button { width: 36px; height: 36px; border: 0; background: none; font-size: 17px; }
.qty button:hover { background: var(--bone); }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.summary { display: grid; gap: 10px; padding: 22px; background: var(--bone); margin-bottom: 32px; }
.summary__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.summary__row--total { padding-top: 12px; border-top: 2px solid var(--ink); font: 800 16px/1.3 var(--display); }
.checkout { border-top: 1px solid var(--line); padding-top: 28px; }

/* ---------- Info pages ---------- */
.info { padding-bottom: 24px; }
.info__section { padding-block: 26px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.info__section h2 { font-size: 18px; letter-spacing: .02em; }
.info__section p { color: var(--muted); }

/* ---------- Routine finder ---------- */
.chips--tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
@media (min-width: 640px) { .chips--tabs { grid-template-columns: repeat(4, 1fr); } }
.chips--tabs .chip { min-height: 52px; }
.quiz__intro { color: var(--muted); padding-top: 16px; }
.quiz__q { border: 0; padding: 0; margin: 10px 0 0; min-width: 0; }
.quiz__q legend { display: flex; align-items: baseline; gap: 12px; font: 800 19px/1.3 var(--display); margin-bottom: 14px; padding: 0; }
:root[lang="ar"] .quiz__q legend { font-size: 20px; }
.quiz__n { font: 800 13px/1 var(--latin-display); color: var(--rozy); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.opt { position: relative; display: flex; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt__label { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid #cdc6c2; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.opt__label small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.opt:hover .opt__label { border-color: var(--ink); }
.opt input:checked + .opt__label { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt input:checked + .opt__label small { color: rgba(255, 255, 255, .7); }
.opt input:focus-visible + .opt__label { outline: 2px solid var(--rozy); outline-offset: 2px; }
.result { padding-block: 32px; }
.result__head { display: grid; gap: 12px; margin-bottom: 18px; }
.result__head h2 { font-size: clamp(26px, 5vw, 40px); }
:root[lang="en"] .result__head h2 { text-transform: uppercase; }
.routine { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: rstep; }
.routine__step { display: grid; gap: 14px; padding-block: 20px; border-top: 1px solid var(--line); counter-increment: rstep; }
.routine__label { display: flex; flex-direction: column; gap: 4px; }
.routine__label strong { font: 800 15px/1.3 var(--display); letter-spacing: .04em; }
.routine__label strong::before { content: counter(rstep, decimal-leading-zero) ' '; color: var(--rozy); }
:root[lang="ar"] .routine__label strong { font-size: 17px; letter-spacing: 0; }
.routine__label > span { color: var(--muted); font-size: 14px; }
.routine__when { display: inline-block; margin-inline-start: 8px; padding: 3px 8px; background: var(--rozy-tint); color: var(--rozy-dark); font: 600 11px/1.3 var(--text); letter-spacing: 0; text-transform: none; vertical-align: middle; }
.routine__product { display: grid; grid-template-columns: 80px 1fr; gap: 14px; }
.routine__media { aspect-ratio: 4 / 5; background: var(--bone); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.routine__media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.routine__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.routine__name { font-weight: 600; overflow-wrap: anywhere; }
.routine__name:hover { color: var(--rozy); }
.routine__price { font-weight: 700; }
.routine__step--empty .routine__label strong { color: var(--muted); }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-block: 56px 88px; }
.notfound__code { display: block; font: 900 clamp(120px, 34vw, 320px)/.85 var(--latin-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 2px var(--rozy); margin-bottom: 16px; }
.notfound h1 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 12px; }
.notfound p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.notfound .hero__actions { justify-content: center; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .7); margin-top: 0; overflow: hidden; }
main > :last-child:not(.cta) { margin-bottom: 0; }
.footer__grid { display: grid; gap: 36px; padding-block: 56px 32px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.wordmark--footer { font-size: 24px; color: #fff; }
.wordmark--footer span:last-child { color: var(--rozy-light); }
.footer__brand p { max-width: 32ch; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.footer__col h2 { font: 700 11px/1 var(--text); letter-spacing: .18em; color: #fff; margin-bottom: 14px; }
:root[lang="ar"] .footer__col h2 { font: 700 15px/1 var(--display); letter-spacing: 0; }
.footer__col a { padding: 5px 0; font-size: 14px; transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__mega { font: 900 min(11.4vw, 210px)/.8 var(--latin-display); font-stretch: 100%; letter-spacing: -.03em; text-transform: uppercase; color: #fff; white-space: nowrap; text-align: center; padding-block: 8px 0; direction: ltr; user-select: none; }
.footer__base { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding-block: 22px 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12px; margin-top: 18px; }
.footer__note { flex: 1 1 320px; }
.footer__base a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__fallback { font: 900 24px/1 var(--latin-display); color: #fff; }

/* ---------- Toast ---------- */
[hidden] { display: none !important; }
.toast { position: fixed; inset-inline: 12px; bottom: 16px; z-index: 80; margin-inline: auto; max-width: 440px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--ink); color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); animation: toast .35s var(--ease) both; }
.toast a { color: var(--rozy-light); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@keyframes toast { from { transform: translateY(16px); opacity: 0; } }

/* ---------- Scroll reveal (main.js adds data-reveal only when motion is allowed) ---------- */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none !important; }
  .hero__pic, .reel__ph img { animation: none !important; }
  .pick__item { transition: none; }
}

/* Optional product videos, shown below verified product information. */
.product__clips{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;min-width:0}
.product__clips-title{grid-column:1/-1;font-size:15px;font-weight:600;margin:12px 0 0}
.product__clips video{width:100%;max-height:440px;aspect-ratio:4/5;object-fit:contain;background:#f7f1ed;border:1px solid #eaded9;border-radius:8px}

/* ROZY e.l.f. review: optional shade reference on product pages */
.product__variants{margin-block:1.1rem 1.45rem;padding:1rem 1.05rem;border:1px solid #e8dfe2;background:#fcf8fa;display:grid;gap:.6rem}
.product__variants label{font-weight:600;font-size:.9rem;display:flex;gap:.5rem;align-items:center}
.product__variants label span{font-size:.75rem;color:#916c7d}
.product__variants select{min-height:44px;max-width:100%;padding:.7rem .8rem;color:#332a30;border:1px solid #cdbbc2;background:#fff}
.product__variants p{line-height:1.6;margin:0}

/* The ROZY Edit — premium, no-scroll shade picker; built progressively from the native select */
.product__variants.rozy-variant-studio{margin:25px 0;padding:clamp(16px,2.4vw,27px);background:#fcfaf8;border:1px solid #e8deda;border-radius:3px}
.product__variants.rozy-variant-studio>label,.product__variants.rozy-variant-studio>p.fine{display:none}
.product__variants select[hidden]{display:none!important}
.rozy-variant-studio__heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.rozy-variant-studio__heading strong{font-weight:600;font-size:clamp(17px,2vw,22px);letter-spacing:-.02em;color:#372c31}
.rozy-variant-studio__heading small{white-space:nowrap;font-size:11px;color:#8e7c7d}
.rozy-variant-studio__filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 17px}
.rozy-variant-studio__filter{border:1px solid #e5d8d7;background:white;color:#715f65;border-radius:99px;padding:8px 13px;font-size:12px;min-height:36px;cursor:pointer}
.rozy-variant-studio__filter[aria-pressed=true]{background:#352931;color:#fff;border-color:#352931}
.rozy-variant-studio__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.rozy-variant-studio__grid.is-option{grid-template-columns:repeat(3,minmax(0,1fr))}
.rozy-variant-studio__tile{min-width:0;background:#fff;border:1px solid #e5dcda;border-radius:3px;color:#4b3a41;padding:10px 7px;min-height:98px;display:flex;gap:9px;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.rozy-variant-studio__tile:hover{border-color:#a77a87;background:#fffaf9}
.rozy-variant-studio__tile[aria-pressed=true]{outline:2px solid #44343d;outline-offset:-2px;background:#fcf6f7}
.rozy-variant-studio__tile[aria-pressed=true]::after{content:'✓';font-size:10px;color:#75535e;position:absolute;top:3px;right:6px}
.rozy-variant-studio__tile{position:relative}
.rozy-variant-studio__tile:focus-visible,.rozy-variant-studio__filter:focus-visible,.rozy-variant-studio__clear:focus-visible{outline:2px solid #a26b7c;outline-offset:3px}
.rozy-variant-studio__tile[hidden]{display:none!important}
.rozy-variant-studio__swatch{display:block;width:38px;height:38px;border:1px solid rgba(45,28,34,.13);border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}
.rozy-variant-studio__name{font-size:11px;line-height:1.32;overflow-wrap:anywhere}
.rozy-variant-studio__grid.is-option .rozy-variant-studio__tile{min-height:58px;padding:10px;flex-direction:row}
.rozy-variant-studio__selection{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e8dfdc;margin-top:18px;padding-top:17px;min-height:65px}
.rozy-variant-studio__selection div{display:grid;gap:5px}
.rozy-variant-studio__selection small{font-size:10px;letter-spacing:.13em;color:#927982}
.rozy-variant-studio__selection strong{font-size:15px;font-weight:600;color:#392d32}
.rozy-variant-studio__clear{border:0;background:transparent;color:#805968;text-decoration:underline;font-size:12px;cursor:pointer;padding:10px}
.rozy-variant-studio__note{margin:12px 0 0;font-size:11px;line-height:1.65;color:#897b7e}
@media(max-width:700px){.product__variants.rozy-variant-studio{padding:15px;margin:18px 0}.rozy-variant-studio__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.rozy-variant-studio__grid.is-option{grid-template-columns:repeat(2,minmax(0,1fr))}.rozy-variant-studio__tile{min-height:94px}.rozy-variant-studio__swatch{width:33px;height:33px}}
@media(prefers-reduced-motion:reduce){.rozy-variant-studio__tile{transition:none}}

.rozy-variant-studio__preview-tone{width:48px;height:48px;flex:0 0 48px;border-radius:50%;border:1px solid rgba(41,30,35,.18);box-shadow:inset 0 0 0 4px rgba(255,255,255,.23),0 1px 6px rgba(30,18,18,.07)}

/* ROZY variant enquiry bag */
.cline__variant{display:flex;align-items:center;gap:8px;margin:7px 0 5px;color:#3b2c35;font-size:13px;line-height:1.45}
.cline__variant strong{font-weight:650}
.cline__swatch{display:inline-flex;width:18px;height:18px;flex:0 0 18px;border:1px solid rgba(39,25,31,.14);border-radius:50%}
.cline__reference{font-size:11px!important;margin:4px 0 10px;color:#8e777d;line-height:1.5}
.cgroup--quotes{background:#fcfaf8;border:1px solid #e9dfda;padding:clamp(16px,2vw,25px)}
.cgroup--quotes .cgroup__head h2{color:#342630}
.cgroup--quotes>.btn{margin-top:20px}
.product__buy [data-rozy-add-variant]{min-width:0}
.product__buy [data-rozy-variant-error]{margin:7px 0;color:#af485e;font-size:13px;line-height:1.6}
@media(max-width:700px){.cgroup--quotes{padding:14px}.cline__variant{font-size:12px}}

/* Keep direct enquiries secondary to the new variant-aware bag CTA */
.product__buy [data-rozy-product-enquiry]{background:#fff!important;color:#392931!important;border:1px solid #b79da4!important;box-shadow:none!important}
.product__buy [data-rozy-product-enquiry]:hover{background:#f8f0f1!important;border-color:#74535c!important}

/* Shade simulation is always visibly identified as an approximation, never a manufacturer photo. */
.gallery__slide{position:relative}
.rozy-photo-simulation-label{position:absolute;bottom:15px;left:15px;z-index:2;padding:7px 11px;font-size:10px;letter-spacing:.06em;line-height:1.3;color:#3b3035;background:rgba(255,250,247,.9);border:1px solid rgba(101,76,83,.16);pointer-events:none}
.cline .media{position:relative}
.cline__simulated{position:absolute;bottom:0;inset-inline:0;text-align:center;background:rgba(254,248,245,.91);color:#715760;font-size:9px;padding:4px 2px;line-height:1.3}
@media(max-width:600px){.rozy-photo-simulation-label{bottom:8px;left:8px;padding:5px 8px;font-size:9px}}

/* Variant image sync: hidden sibling photos must never be revived by gallery display:grid */
.gallery__track .gallery__slide[hidden], .gallery__thumbs .gallery__thumb[hidden] { display: none !important; }

/* ROZY verified SKU image gallery V3 - original design, no artificial photo recoloring */
.product__variants.rozy-verified-variant{padding:0}
.rozy-sku-picker{background:#fbf9f7;border:1px solid #e8dfda;padding:clamp(17px,2.6vw,27px);margin:20px 0}
.product__variants:has(.rozy-sku-picker)>label,.product__variants:has(.rozy-sku-picker)>p.fine{display:none}
.rozy-sku-picker__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.rozy-sku-picker__top small{font-size:10px;letter-spacing:.16em;color:#9f7482}
.rozy-sku-picker__top h2{font-size:clamp(21px,2vw,26px);line-height:1.2;font-weight:500;margin:5px 0 0}
.rozy-sku-picker__top>span{font-size:11px;color:#927f80;white-space:nowrap}
.rozy-sku-picker__filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:17px}
.rozy-sku-picker__filter{border:1px solid #e6dad5;background:white;border-radius:99px;min-height:36px;padding:7px 12px;font-size:12px;color:#55494e;cursor:pointer}
.rozy-sku-picker__filter[aria-pressed=true]{background:#32272c;color:#fff;border-color:#32272c}
.rozy-sku-picker__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rozy-sku-picker__grid.is-option{grid-template-columns:repeat(3,minmax(0,1fr))}
.rozy-sku-picker__tile{min-width:0;min-height:96px;background:white;border:1px solid #e5dad6;padding:10px 6px;color:#45383e;display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column;cursor:pointer;position:relative}
.rozy-sku-picker__tile:hover{border-color:#987780}
.rozy-sku-picker__tile.is-selected{outline:2px solid #49363f;outline-offset:-2px;background:#fdf6f7}
.rozy-sku-picker__tile.is-selected:after{content:'✓';position:absolute;top:4px;right:7px;color:#674650;font-size:12px}
.rozy-sku-picker__tile:focus-visible,.rozy-sku-picker__filter:focus-visible{outline:2px solid #916674;outline-offset:2px}
.rozy-sku-picker__tile[hidden]{display:none!important}
.rozy-sku-picker__chip{width:35px;height:35px;border-radius:50%;border:1px solid rgba(46,30,32,.15);background:#e5d5d1;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2)}
.rozy-sku-picker__chip.is-photo-verified{outline:1px solid #a37b84;outline-offset:2px}
.rozy-sku-picker__name{font-size:11px;line-height:1.4;overflow-wrap:anywhere;text-align:center}
.rozy-sku-picker__summary{display:flex;align-items:center;gap:12px;border-top:1px solid #e9deda;margin-top:18px;padding-top:16px}
.rozy-sku-picker__swatch-photo{height:66px;width:66px;object-fit:contain;background:#fff;border:1px solid #e8deda}
.rozy-sku-picker__summary-info{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.rozy-sku-picker__summary-info strong{font-size:14px;font-weight:600}
.rozy-sku-picker__photo-status{font-size:11px;color:#8b797c;line-height:1.5}
.rozy-sku-picker__clear{background:transparent;border:0;text-decoration:underline;font-size:11px;color:#825c69;cursor:pointer}
.rozy-sku-picker__guide{font-size:11px;color:#907e81;line-height:1.6;margin:14px 0 0}
.rozy-sku-picker__image-label{position:absolute;bottom:12px;left:12px;z-index:4;padding:7px 10px;background:#fff9f4;color:#564449;border:1px solid #e1d5d3;font-size:11px}
@media(max-width:670px){.rozy-sku-picker{padding:15px}.rozy-sku-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rozy-sku-picker__grid.is-option{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.rozy-sku-picker__tile{transition:none}}

/* Official selected shade visual fills the PRIMARY gallery, never limited to a mini preview. */
.gallery__slide .rozy-sku-picker__image-label{position:absolute;bottom:14px;inset-inline-start:14px;left:auto;z-index:4;padding:7px 11px;color:#3a2d31;background:rgba(255,250,246,.96);font-size:11px;line-height:1.5;border:1px solid #e5dad4;max-width:calc(100% - 28px)}
.gallery__slide img{object-fit:contain}

/* Approved image transitions: stable 4:5 frame, no blank frame or stretching. */
.gallery__slide .rozy-gallery-overlay { position:absolute; inset:0; width:100%; height:100%; padding:8%; object-fit:contain; opacity:0; z-index:2; pointer-events:none; transition:opacity 220ms ease; }
.gallery__slide .rozy-gallery-overlay.is-visible { opacity:1; }
@media (prefers-reduced-motion: reduce) { .gallery__slide .rozy-gallery-overlay { transition:none; } }


/* ROZY Cart Variant UI v1 — quiet luxury. Attached to existing Shopping Bag; no overlay duplication. */
.cgroup--quotes{background:#fffdfb;border:1px solid #ede1d9;border-radius:18px;padding:clamp(15px,3vw,26px)}
.cgroup--quotes .cgroup__head{margin-bottom:15px}
.rozy-bag-card.cline{
  display:grid;grid-template-columns:minmax(112px,142px) minmax(0,1fr);gap:clamp(14px,3vw,25px);
  padding:22px 4px;border-bottom:1px solid #ece3dc;align-items:start;
}
.rozy-bag-card__visual.media{
  aspect-ratio:4/5;position:relative;align-self:start;overflow:hidden;
  border-radius:13px;background:#f7f1ec;border:1px solid #f0e8e1;min-height:148px;
}
.rozy-bag-card__visual.media img{width:100%;height:100%;object-fit:contain;padding:9px;filter:drop-shadow(0 6px 7px rgba(62,45,38,.06));}
.rozy-bag-card__no-photo{display:block;max-width:120px;text-align:center;font-size:11px;line-height:1.6;color:#806a62;padding:13px}
.rozy-bag-card__media-kind{
  position:absolute;bottom:0;inset-inline:0;padding:7px 5px;
  text-align:center;color:#5c4843;background:rgba(253,249,245,.92);
  font-size:9px;letter-spacing:.04em;text-transform:uppercase;
}
.rozy-bag-card__detail.cline__body{display:flex;align-items:stretch;gap:8px}
.rozy-bag-card__brand.cline__meta{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9a8275;}
.rozy-bag-card__brand.cline__meta .brandlogo{transform:scale(.88);transform-origin:left center}
.rozy-bag-card__detail .cline__name{font-size:clamp(16px,2vw,20px);letter-spacing:-.02em;color:#332927;font-weight:600;line-height:1.3}
.rozy-bag-card__choice.cline__variant{
  display:flex;align-items:center;gap:12px;margin:8px 0 0;padding:12px 14px;
  border-radius:10px;background:#f9f3ef;border:1px solid #eee2dc;color:#553d42;
}
.rozy-bag-card__choice.cline__variant>div{display:grid;gap:3px;min-width:0}
.rozy-bag-card__choice.cline__variant small{font-size:10px;color:#917a74}
.rozy-bag-card__choice.cline__variant strong{font-size:14px;overflow-wrap:anywhere;font-weight:650}
.rozy-bag-card__sku{font-size:10px;color:#977e7b;letter-spacing:.025em}
.rozy-bag-card__quote{font-size:12px;color:#795a58;line-height:1.6}
.rozy-bag-card__bottom.cline__row{margin-top:9px;gap:10px}
.rozy-bag-card__bottom.cline__row>strong{font-weight:600;font-size:12px;color:#4d3839}
.rozy-bag-card__actions{display:flex;align-items:center;gap:18px;margin-top:5px}
.rozy-bag-card__edit,.rozy-bag-card__actions .linkbtn{
  font-size:12px;line-height:1.5;color:#63454c;
  text-decoration:underline;text-underline-offset:4px;
}
.rozy-bag-card__actions .linkbtn{color:#a07f7c}
.rozy-bag-card__hold{display:block;font-size:12px;line-height:1.7;color:#8c3c43;padding:9px 11px;background:#fff1ef;border-radius:8px}
.rozy-bag-card.cline--needs-photo .rozy-bag-card__visual.media{border-color:#e1b4ac}
@media(max-width:650px){
 .rozy-bag-card.cline{grid-template-columns:104px minmax(0,1fr);gap:13px;padding:17px 0}
 .rozy-bag-card__visual.media{min-height:130px;border-radius:10px}
 .rozy-bag-card__choice.cline__variant{padding:9px 10px;gap:7px}
 .rozy-bag-card__detail .cline__name{font-size:15px}
 .rozy-bag-card__actions{gap:13px;flex-wrap:wrap}
 .rozy-bag-card__bottom.cline__row{gap:9px}
}
@media(max-width:380px){
 .rozy-bag-card.cline{grid-template-columns:88px minmax(0,1fr);gap:9px}
 .rozy-bag-card__visual.media{min-height:115px}
 .rozy-bag-card__choice.cline__variant strong{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.rozy-bag-card,.rozy-bag-card *{scroll-behavior:auto}}


/* Image-first mini bag: the chosen shade appears immediately after adding it. */
.toast:has(.rozy-mini-bag){max-width:500px;padding:10px 14px;gap:14px;border-radius:13px;
 background:#282126;box-shadow:0 19px 50px rgba(29,16,21,.24)}
.rozy-mini-bag{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.rozy-mini-bag img{width:62px;height:78px;flex:0 0 62px;object-fit:contain;
 border-radius:8px;background:#f8f2ee;padding:4px}
.rozy-mini-bag__details{display:grid;gap:4px;min-width:0;line-height:1.35}
.rozy-mini-bag__details small{font-size:10px;letter-spacing:.02em;color:#e8c4ca}
.rozy-mini-bag__details strong{font-size:12px;font-weight:600;white-space:normal;line-height:1.4}
.rozy-mini-bag__details span{font-size:11px;color:#dbc2c5;overflow-wrap:anywhere}
.toast:has(.rozy-mini-bag)>a{font-size:11px;color:#fff1f1;text-underline-offset:5px;flex-shrink:0}
@media(max-width:480px){
 .toast:has(.rozy-mini-bag){inset-inline:8px;bottom:8px;padding:9px;gap:8px}
 .rozy-mini-bag{gap:8px}
 .rozy-mini-bag img{width:50px;height:68px;flex-basis:50px}
 .toast:has(.rozy-mini-bag)>a{font-size:10px}
}


/* THE ROZY EDIT — e.l.f. collection. Scoped only: no homepage, hero, header or existing-brand redesign. */
.elf-edit{padding-block:28px 88px;}
.elf-edit__breadcrumbs{display:flex;gap:9px;align-items:center;color:#907a72;font-size:11px;letter-spacing:.07em;margin-bottom:35px}
.elf-edit__breadcrumbs a{text-decoration:none;color:#79615b}
.elf-edit__hero{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:40px;align-items:end;
 padding:clamp(30px,5vw,74px);background:#f7f1eb;border:1px solid #efe3d7;border-radius:7px;position:relative;overflow:hidden}
.elf-edit__hero:after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(126,92,82,.09);border-radius:100%;inset-inline-end:-95px;top:-99px;pointer-events:none}
.elf-edit__eyebrow{display:block;font-size:10px;color:#967b6f;letter-spacing:.16em;font-weight:600;margin-bottom:26px}
.elf-edit__hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(38px,6vw,76px);line-height:1.06;
 letter-spacing:-.042em;color:#40302e;max-width:760px;margin-bottom:22px}
.elf-edit__hero p{max-width:560px;font-size:clamp(13px,1.45vw,16px);line-height:1.9;color:#806e67;margin:0 0 27px}
.elf-edit__edition{font-size:9px;letter-spacing:.1em;border-top:1px solid #dcd0c6;padding-top:12px;color:#9b7c73}
.elf-edit__hero-meta{display:grid;grid-template-columns:1fr;justify-items:start;gap:4px;border-inline-start:1px solid #e0d1c8;padding-inline-start:32px}
.elf-edit__hero-meta strong{font-family:Georgia,serif;font-size:clamp(37px,5vw,58px);line-height:1.1;font-weight:400;color:#5b4940;margin-top:12px}
.elf-edit__hero-meta span{font-size:10px;letter-spacing:.08em;color:#957f73}
.elf-edit__nav{display:flex;gap:8px 19px;align-items:center;overflow:auto;padding:20px 2px;margin:20px 0 33px;white-space:nowrap;
 border-bottom:1px solid #ece3de;scrollbar-width:thin}
.elf-edit__nav a{font-size:11px;color:#6d5b55;text-decoration:none;border-bottom:1px solid transparent;padding:5px 0}
.elf-edit__nav a:hover,.elf-edit__nav a:focus-visible{border-color:#845e62;color:#392b30}
.elf-edit__chapter{scroll-margin-top:100px;margin-bottom:55px}
.elf-edit__sectionhead{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 18px}
.elf-edit__sectionhead h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(24px,3vw,33px);line-height:1.3;color:#4c3a36}
.elf-edit__sectionhead small{font-size:11px;color:#a18c84}
.elf-edit__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.elf-edit__product{min-width:0;display:flex;flex-direction:column;padding-bottom:18px}
.elf-edit__photo{position:relative;aspect-ratio:4/5;display:grid;place-items:center;background:#f7f4f1;
 border:1px solid #eee9e4;border-radius:5px;overflow:hidden}
.elf-edit__photo img{height:100%;width:100%;object-fit:contain;padding:clamp(12px,2.2vw,28px);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.elf-edit__product:hover img{transform:scale(1.055)}
.elf-edit__index{position:absolute;inset-block-start:13px;inset-inline-start:15px;font-family:Georgia,serif;font-size:14px;color:#99867e}
.elf-edit__details{padding:17px 2px 0;display:flex;flex-direction:column;flex:1}
.elf-edit__brand{font-size:9px;letter-spacing:.1em;color:#a08b84}
.elf-edit__details>a:not(.elf-edit__view){text-decoration:none;color:inherit}
.elf-edit__details h3{font-size:clamp(13px,1.4vw,16px);font-weight:600;line-height:1.5;color:#483b36;margin:8px 0}
.elf-edit__foot{display:flex;flex-direction:column;gap:4px;margin-top:auto;font-size:10px;color:#988177;line-height:1.6}
.elf-edit__view{font-size:11px;color:#664950;text-decoration:none;border-bottom:1px solid #ad9195;
 display:inline-flex;align-self:flex-start;gap:10px;padding-bottom:4px;margin-top:16px}
.elf-edit__note{border-top:1px solid #e8ded7;padding:20px 0 0;font-size:11px;line-height:1.8;color:#978078}
@media(max-width:1040px){.elf-edit__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .elf-edit{padding-block:14px 48px}
 .elf-edit__breadcrumbs{margin-bottom:16px}
 .elf-edit__hero{grid-template-columns:1fr;gap:22px;padding:27px 20px}
 .elf-edit__hero h1{font-size:42px}
 .elf-edit__hero-meta{grid-template-columns:repeat(4,auto);border-inline-start:0;border-top:1px solid #ded1c6;padding-inline-start:0;padding-top:12px;align-items:baseline;gap:5px 12px}
 .elf-edit__hero-meta strong{font-size:29px;margin-top:0}
 .elf-edit__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .elf-edit__photo img{padding:14px}
 .elf-edit__chapter{margin-bottom:38px}
}
@media(prefers-reduced-motion:reduce){.elf-edit__product img{transition:none}}


/* ROZY e.l.f. product correction: isolated to owner supplied 16 product preview */
.product--elf-archive .product__info{position:static!important;top:auto!important}
.product--elf-archive .product__variants{margin-block:20px 6px}
.product--elf-archive .rozy-sku-picker{margin:0;padding:clamp(14px,2.4vw,22px);min-width:0}
.product--elf-archive .rozy-sku-picker__tile{border-radius:10px;min-height:100px;transition:border-color .2s,box-shadow .2s}
.product--elf-archive .rozy-sku-picker__tile.is-selected{box-shadow:0 5px 22px rgba(65,43,48,.08);background:#fffbfa}
.product--elf-archive .rozy-sku-picker__chip{width:42px;height:42px;flex-shrink:0;background:transparent;display:grid;place-items:center;overflow:hidden;border:1px solid #cdbbb7}
.product--elf-archive .rozy-sku-picker__chip.is-photo-sampled{box-shadow:inset 0 0 0 3px rgba(255,255,255,.28),0 1px 3px rgba(47,27,27,.08)}
.product--elf-archive .rozy-sku-picker__chip.is-image-chip{background:#fff;box-shadow:none}
.product--elf-archive .rozy-sku-picker__chip-photo{display:block;width:100%;height:100%;object-fit:cover}
.product--elf-archive .rozy-sku-picker__chip.is-unmatched-chip{background:repeating-linear-gradient(45deg,#fff7f5,#fff7f5 5px,#f4e9e5 5px,#f4e9e5 10px)}
.product--elf-archive .rozy-sku-picker__name{font-size:11px;color:#453638;line-height:1.4}
.product--elf-archive .product__buy--rozy-elf{
  display:grid!important;grid-template-columns:minmax(0,1fr) 150px 50px;align-items:stretch;
  gap:10px;margin:18px 0 9px;min-width:0;
}
.product__buy--rozy-elf .rozy-elf-request-cta,
.product__buy--rozy-elf .rozy-elf-bag-cta{
  min-width:0;min-height:54px;display:flex;align-items:center;justify-content:center;
  white-space:normal;text-align:center;line-height:1.4;font-size:11px;letter-spacing:.04em;
  padding:10px 12px;text-decoration:none
}
.product__buy--rozy-elf .rozy-elf-request-cta{background:#302528!important;color:#fff!important;border:1px solid #302528!important}
.product__buy--rozy-elf .rozy-elf-bag-cta{background:#fffaf8!important;color:#4d3940!important;border:1px solid #cab6b6!important}
.product__buy--rozy-elf .wishbtn{height:54px;min-width:50px;max-width:50px;grid-column:3;grid-row:1}
.product__buy--rozy-elf .rozy-elf-variant-error{grid-column:1/-1!important;margin:0!important;line-height:1.55;color:#983d4f}
.product--elf-archive .facts{margin-top:7px}
@media(max-width:850px){
 .product__buy--rozy-elf.product__buy{grid-template-columns:minmax(0,1fr) 52px}
 .product__buy--rozy-elf .rozy-elf-request-cta{grid-column:1;grid-row:1}
 .product__buy--rozy-elf .rozy-elf-bag-cta{grid-column:1/-1;grid-row:2}
 .product__buy--rozy-elf .wishbtn{grid-column:2;grid-row:1}
}
@media(max-width:450px){.product--elf-archive .rozy-sku-picker__tile{min-height:95px}.product--elf-archive .rozy-sku-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ROZY private order / exact SKU preview, scoped to /elf-request/ */
.elf-request{padding-block:24px 75px}
.elf-request__crumbs{font-size:11px;color:#97817c;letter-spacing:.08em;margin-bottom:32px;display:flex;gap:8px}
.elf-request__crumbs a{color:#74565c;text-decoration:none}
.elf-request__intro{max-width:780px;margin:0 auto 40px;text-align:center}
.elf-request__intro small{display:block;font-size:10px;letter-spacing:.2em;color:#9b797c;margin-bottom:20px}
.elf-request__intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,5vw,64px);font-weight:400;color:#3c2d31;line-height:1.13;margin-bottom:16px}
.elf-request__intro p{color:#8d7775;font-size:13px;line-height:1.9;max-width:630px;margin-inline:auto}
.elf-request__layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);align-items:start;gap:clamp(25px,5vw,84px)}
.elf-request__review{padding:clamp(16px,2.3vw,29px);background:#faf7f4;border:1px solid #eee4de}
.elf-request__overline,.elf-request__section-head small{font-size:10px;letter-spacing:.13em;color:#9d7a79}
.elf-request__photo{display:grid;place-items:center;position:relative;aspect-ratio:4/4.5;margin:18px 0;background:#f6f0eb;border:1px solid #f0e9e3;border-radius:5px;overflow:hidden}
.elf-request__photo img{object-fit:contain;width:100%;height:100%;padding:clamp(8px,3vw,29px)}
.elf-request__photo span{color:#957d74;font-size:13px;text-align:center;padding:15px}
.elf-request__brand{font-size:10px;letter-spacing:.14em;color:#9d7f7c;margin-bottom:8px}
.elf-request__review h2{font-size:clamp(20px,2.4vw,27px);font-weight:600;color:#372d31;line-height:1.4;margin:0 0 20px}
.elf-request__specs{display:grid;gap:11px}
.elf-request__specs>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid #e9e0da;padding-bottom:11px;line-height:1.6}
.elf-request__specs span{font-size:12px;color:#9b8180}
.elf-request__specs strong{font-size:12px;font-weight:600;color:#4c383f;text-align:end;overflow-wrap:anywhere}
.elf-request__change{display:inline-block;margin-top:22px;color:#644a50;text-underline-offset:5px;font-size:12px}
.elf-request__details{padding:clamp(19px,3.3vw,42px);border:1px solid #eee4dd;background:#fff}
.elf-request__section-head{margin-bottom:28px}
.elf-request__section-head h2{font-family:Georgia,serif;font-size:clamp(26px,3vw,37px);font-weight:400;margin-top:10px;color:#3c3032}
.elf-request__field{display:grid;gap:9px;margin-bottom:17px}
.elf-request__field label{font-size:12px;color:#5d4b4d;font-weight:600}
.elf-request__field input,.elf-request__field textarea{
 width:100%;max-width:100%;min-width:0;padding:13px 15px;border:1px solid #ddd0cd;border-radius:5px;
 background:#fdfafa;color:#392b2e;font-size:14px;line-height:1.5;font-family:inherit
}
.elf-request__field input:focus-visible,.elf-request__field textarea:focus-visible{outline:2px solid #876971;outline-offset:2px}
.elf-request__two{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px}
.elf-request__send{margin-top:11px;min-height:56px}
.elf-request__privacy,.elf-request__message p{font-size:11px;line-height:1.75;color:#947f7f;margin-top:14px}
.elf-request__error{font-size:12px;color:#9d4356;background:#fff2f0;padding:12px;margin:12px 0}
.elf-request__message{margin-top:22px;padding:22px;background:#f8f2f0;border:1px solid #eedfda}
.elf-request__message h3{font-family:Georgia,serif;font-weight:400;font-size:25px;color:#463439;margin-bottom:15px}
.elf-request__message>a{display:inline-flex;margin:10px 0;max-width:100%}
@media(max-width:760px){
 .elf-request{padding-block:12px 42px}
 .elf-request__layout{grid-template-columns:minmax(0,1fr);gap:15px}
 .elf-request__review{display:grid;grid-template-columns:105px minmax(0,1fr);gap:7px 15px;align-items:start}
 .elf-request__overline{grid-column:1/-1}
 .elf-request__photo{grid-column:1;grid-row:2/5;aspect-ratio:4/5;margin:0}
 .elf-request__brand,.elf-request__review h2,.elf-request__specs{grid-column:2;min-width:0}
 .elf-request__brand{margin:0}
 .elf-request__review h2{font-size:17px;margin:0}
 .elf-request__specs{gap:5px}
 .elf-request__specs>div{padding-bottom:5px}
 .elf-request__change{grid-column:1/-1;margin-top:8px}
 .elf-request__details{padding:20px}
}
@media(max-width:420px){.elf-request__review{grid-template-columns:85px minmax(0,1fr)}.elf-request__two{grid-template-columns:minmax(0,1fr) 85px}}


/* Huda Beauty — scoped to private archive pages; original ROZY home, hero and other brands stay untouched. */
.huda-edit__hero.elf-edit__hero{background:linear-gradient(118deg,#f5f0ed,#ede3df);border-color:#eaded9}
.huda-edit__hero h1{color:#372a31}
.huda-edit__hero .elf-edit__eyebrow{color:#866971}
.huda-edit__photo.elf-edit__photo{background:#faf7f5;border-color:#eee7e5}
.huda-edit__no-photo{padding:25px;line-height:1.7;font-size:12px;text-align:center;color:#897278}
.product--elf-archive:has([data-rozy-brand="huda-beauty"]) .rozy-sku-picker{
  background:#fbf9f8;border-color:#e9e0df;
}
.product--elf-archive .rozy-sku-picker__variant-preview{
  display:block;width:62px;height:72px;object-fit:contain;object-position:center;
  background:#f8f2ef;border:1px solid #f0e6e2;border-radius:7px;padding:3px;
  transition:transform .22s ease;
}
.product--elf-archive .rozy-sku-picker__tile.is-huda-image-tile{min-height:124px;gap:7px;padding:9px 6px}
.product--elf-archive .rozy-sku-picker__tile.is-huda-image-tile:hover .rozy-sku-picker__variant-preview{transform:scale(1.055)}
.product--elf-archive .rozy-sku-picker__tile.is-huda-image-tile .rozy-sku-picker__name{font-size:11px;line-height:1.4}
.product--elf-archive .rozy-sku-picker__tile.rozy-sku-picker__preview-unavailable:before{
 content:"Image unavailable";color:#9c666b;font-size:10px;line-height:1.5
}
.rozy-elf-request-disabled{
 display:flex;align-items:center;justify-content:center;padding:14px 16px;
 width:100%;font-size:12px;line-height:1.7;text-align:center;
 background:#f8eeec;border:1px solid #f0dbd7;color:#8b555c;grid-column:1/-1
}
@media(max-width:580px){
 .product--elf-archive .rozy-sku-picker__tile.is-huda-image-tile{min-height:118px}
 .product--elf-archive .rozy-sku-picker__variant-preview{width:52px;height:62px}
}
@media(prefers-reduced-motion:reduce){.product--elf-archive .rozy-sku-picker__variant-preview{transition:none}}

/* ROZY Exact Order Handoff — every request photo is drawn from ROZY itself. */
.rozy-request-selection{margin:0 0 20px;padding:18px;background:#faf7f5;border:1px solid #e8dcd8;border-radius:8px}
.rozy-request-selection__heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rozy-request-selection__heading strong{font-family:inherit;font-size:13px;letter-spacing:.02em}
.rozy-request-selection__heading a{font-size:12px;color:#7c5760;text-underline-offset:4px}
.rozy-request-item{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;border-top:1px solid #ece1dc;padding:14px 0;align-items:center}
.rozy-request-item img{display:block;width:90px;aspect-ratio:4/5;object-fit:contain;background:#fff;border:1px solid #ece1dc;border-radius:5px}
.rozy-request-item__info{min-width:0;display:grid;gap:5px;font-size:12px;line-height:1.5}
.rozy-request-item__info>small{color:#99777c}
.rozy-request-item__info>strong{font-size:14px;overflow-wrap:anywhere}
.rozy-request-item__info>p{margin:0;overflow-wrap:anywhere}
.rozy-request-item__info>a{width:fit-content;text-underline-offset:3px}
.rozy-request-selection>.fine{margin-top:8px;line-height:1.65}
.rozy-request-selection .form__error{line-height:1.6}
@media(max-width:540px){.rozy-request-selection{padding:13px}.rozy-request-item{grid-template-columns:72px minmax(0,1fr);gap:11px}.rozy-request-item img{width:72px}}

/* Multiple-product bundles: never present one product's image as every item. */
.rozy-bundle-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%;padding:4px}
.rozy-bundle-photos img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#fff;border:1px solid #ebdeda;border-radius:3px}
.rozy-bundle-photos img:only-child{grid-column:span 2}
@media(max-width:540px){.rozy-bundle-photos{gap:3px;padding:2px}}

/* Release A customer journey — short, readable, accessible on mobile. */
.product__enquiry-guide{display:grid;gap:7px;padding:14px 16px;background:var(--surface,#faf7f7);border:1px solid var(--line,#e8e0e0);border-radius:12px;font-size:13px;line-height:1.55}
.product__bag-shortcut{display:inline-flex;align-self:flex-start;font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:4px;margin-block-start:-4px}
.product__bag-shortcut:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:599px){.product__enquiry-guide{padding:12px 14px;font-size:12px}}

/* Overlay interaction: keyboard access and deliberate reduced-motion behavior. */
.drawer__panel:focus-visible,.search__panel:focus-visible{outline:2px solid var(--rozy);outline-offset:-3px}
.search__results[aria-busy="true"]{opacity:.65}
@media(prefers-reduced-motion:reduce){
 .drawer__backdrop,.drawer__panel,.search__backdrop,.search__panel{animation:none}
}


/* Release A — accessible in-page catalog discovery, original ROZY color tokens */
.catalog-tools{display:grid;gap:13px;margin-block:28px 20px;min-width:0}
.catalog-tools__controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,190px);gap:10px}
.catalog-tools__search,.catalog-tools__sort{display:flex;min-width:0}
.catalog-tools__search input,.catalog-tools__sort select{width:100%;min-width:0;min-height:48px;padding:10px 14px;background:var(--paper,#fff);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:500 14px/1.35 var(--text)}
.catalog-tools__search input:focus-visible,.catalog-tools__sort select:focus-visible,.catalog-tools__chip:focus-visible,.catalog-tools__reset:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.catalog-tools__filters{display:flex;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:2px 2px 7px;min-width:0}
.catalog-tools__chip{border:1px solid var(--line);border-radius:999px;min-height:44px;padding:9px 16px;background:transparent;white-space:nowrap;font:500 13px/1.2 var(--text);color:var(--ink);cursor:pointer}
.catalog-tools__chip[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}
.catalog-tools__summary{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:26px}
.catalog-tools__reset{border:0;background:none;color:var(--ink);font:600 13px/1.2 var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.catalog-tools__empty{border:1px solid var(--line);background:var(--bone);padding:24px;border-radius:10px;color:var(--muted)}
.catalog-tools__empty[hidden],.catalog-tools__reset[hidden],.catalog-grid .pcard[hidden]{display:none!important}
.category-quick-nav{display:flex;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-inline:contain;padding-block:12px 8px}
.category-quick-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font:500 13px/1.2 var(--text)}
.category-quick-nav a[aria-current=page]{border-color:var(--ink);background:var(--bone)}
.catalog-grid .pcard{min-width:0}
.catalog-grid .pcard__body{min-height:106px}
.catalog-grid .pcard__name{min-height:2.8em;overflow-wrap:anywhere}
.catalog-grid .pcard__media img{transition-duration:.25s}
.catalog-grid .pcard__btn{min-height:46px;line-height:1.35}
@media(max-width:599px){.catalog-tools__controls{grid-template-columns:minmax(0,1fr) 126px;gap:8px}.catalog-tools__search input,.catalog-tools__sort select{padding-inline:9px;font-size:12px}.catalog-tools{margin-block:18px 14px}.catalog-tools__chip{font-size:12px;padding-inline:13px}.catalog-grid .pcard__body{min-height:112px}}
@media(prefers-reduced-motion:reduce){.catalog-grid .pcard__media img{transition:none}}


/* Release A collection refinement: improve hierarchy without new components. */
.catalog-grid{align-items:stretch}
.catalog-grid .pcard{height:100%;border-radius:12px;overflow:hidden}
.catalog-grid .pcard__media{border-radius:12px;isolation:isolate}
.catalog-grid .pcard__media:focus-visible,.catalog-grid .pcard__name a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.catalog-grid .pcard__body{gap:7px;min-height:0;padding:12px 2px 12px}
.catalog-grid .pcard__name{min-height:2.8em;line-height:1.4}
.catalog-grid .pcard__meta{align-items:start;flex-wrap:wrap;gap:4px 9px}
.catalog-grid .pcard__size{overflow-wrap:anywhere}
.catalog-grid .pcard__options,.catalog-grid .pcard__availability{margin:0;color:var(--muted);font:500 11px/1.5 var(--text)}
.catalog-grid .pcard__availability{color:var(--ink)}
.catalog-grid .pcard__btn{margin-top:auto;white-space:normal;padding-inline:9px;text-align:center}
.catalog-tools__chip:focus-visible,.category-quick-nav a:focus-visible,.brandcard:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.brandcard{min-width:0;border-radius:12px;overflow:hidden}
.brandcard__mark{min-height:156px}
.brandcard__types{overflow-wrap:anywhere}
.brandcard__foot{margin-top:auto}
@media(max-width:389px){
 .catalog-grid{gap:22px 9px}
 .catalog-grid .pcard__body{padding-block:10px}
 .catalog-grid .pcard__name{font-size:13px}
 .catalog-grid .pcard__price{font-size:13px}
 .catalog-grid .pcard__options,.catalog-grid .pcard__availability{font-size:10.5px}
 .catalog-grid .pcard__btn{font-size:11px;min-height:48px}
 :root[lang="ar"] .catalog-grid .pcard__btn{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.catalog-grid .pcard__media img,.brandcard__mark img{transition:none}}