/* Ragab Store brand website */

:root {
  color-scheme: light dark;

  /* Brand colours, taken from the logo */
  --blue: #1a4fd6;
  --blue-deep: #0c2a80;
  --navy: #081a52;
  --gold: #fbb613;
  --gold-deep: #e39b00;
  /* Icon colour. It is too light to read on beige, so icons sit on a navy chip. */
  --icon: #ffc73a;
  --icon-bg: var(--navy);

  /* Primary colour: beige, as a four-step scale used for the gradients */
  --beige-1: light-dark(#fcf8f0, #15110d);
  --beige-2: light-dark(#f6eddc, #1c1712);
  --beige-3: light-dark(#ecdcc0, #261f18);
  --beige-4: light-dark(#dcc49c, #32281e);

  --bg: var(--beige-1);
  --bg-tint: var(--beige-2);
  --surface: light-dark(#fffdf8, #241d16);
  --ink: light-dark(#131d3b, #f4ecdf);
  --ink-soft: color-mix(in srgb, var(--ink) 80%, transparent);
  --muted: light-dark(#55607c, #c0b3a0);
  --line: light-dark(#e4d5b8, #3d3226);
  --accent: light-dark(#1a4fd6, #8eb0ff);

  --radius: 20px;
  --radius-lg: 32px;
  --shadow: 0 18px 40px -22px rgb(90 62 20 / .45);

  --font-display: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Manual theme choice (header button) overrides the system setting */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--beige-1), var(--beige-2)) var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* Bilingual content: both languages are in the markup, one is shown. */
html[lang="ar"] [lang="en"],
html[lang="en"] [lang="ar"] { display: none !important; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.35; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1180px, 100% - 2.500rem); margin-inline: auto; }

.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100;
  background: var(--gold); color: var(--navy); padding: .500rem 1rem; border-radius: 10px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.500rem; min-height: 72px; }
.brand img { height: 56px; width: auto; }
.main-nav { display: flex; gap: 1.500rem; margin-inline-start: auto; }
.main-nav a {
  text-decoration: none; font-weight: 500; font-size: .9750rem; color: var(--muted);
  padding-block: .250rem; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.main-nav a:hover { color: var(--ink); border-color: var(--gold); }
.lang-btn {
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  color: var(--ink); background: transparent;
  border: 1.500px solid var(--line); border-radius: 999px; padding: .350rem 1.100rem;
  transition: border-color .2s, background-color .2s;
}
.lang-btn:hover { border-color: var(--accent); background: var(--surface); }
.theme-btn {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer;
  color: var(--ink); background: transparent;
  border: 1.500px solid var(--line); border-radius: 50%;
  transition: border-color .2s, background-color .2s;
}
.theme-btn:hover { border-color: var(--accent); background: var(--surface); }
.theme-btn i { font-size: 1.050rem; }
.menu-btn { display: none; }
.mobile-nav { border-top: 1px solid var(--line); }
.mobile-nav .wrap { display: grid; padding-block: .250rem .750rem; }
.mobile-nav a {
  text-decoration: none; font-weight: 500; padding-block: .700rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav .rs-btn { margin-top: .750rem; border-bottom: 2px solid transparent; }
.rs-btn.header-shop { padding: .400rem 1.250rem; font-size: .950rem; }
@media (min-width: 1101px) { .mobile-nav { display: none !important; } }
/* Show the icon of the mode the button switches to */
.theme-btn .icon-sun { display: none; }
:root[data-theme="dark"] .theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn .icon-sun { display: block; }
  :root:not([data-theme]) .theme-btn .icon-moon { display: none; }
}

/* ---------- Buttons ---------- */
.rs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .550rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: .800rem 1.700rem; border-radius: 999px; border: 2px solid transparent;
  transition: transform .2s, background-color .2s, border-color .2s;
}
.rs-btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #ffc73a; }
.btn-ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(60rem 30rem at 85% 115%, rgb(251 182 19 / .22), transparent 60%),
    linear-gradient(140deg, var(--beige-1) 0%, var(--beige-3) 55%, var(--beige-4) 100%);
  padding-block: clamp(2.500rem, 6vw, 5rem) 0;
}
.hero-grid {
  display: grid; grid-template-columns: 1.050fr 1fr; gap: clamp(2rem, 5vw, 4.500rem); align-items: center;
}
.eyebrow {
  display: inline-block; font-size: .850rem; font-weight: 600; letter-spacing: .04em;
  color: var(--navy); background: var(--gold); border-radius: 999px; padding: .150rem 1rem;
}
.hero-logo {
  width: min(420px, 78%); margin-block: 1.250rem .500rem;
  filter: drop-shadow(0 14px 22px rgb(90 62 20 / .25));
}
.hero h1 { font-size: clamp(1.900rem, 4.200vw, 3.250rem); font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead { margin-top: 1.100rem; font-size: 1.150rem; color: var(--ink-soft); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .900rem; margin-top: 2rem; }
.hero-media { position: relative; }
.hero-media::before {
  content: ""; position: absolute; inset: 1.250rem -1.250rem -1.250rem 1.250rem;
  border: 3px solid var(--gold); border-radius: var(--radius-lg);
}
.hero-media img {
  position: relative; width: 100%; aspect-ratio: 4 / 4.600; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: 0 30px 60px -25px rgb(60 40 10 / .55);
}
.hero-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .500rem 2.500rem;
  margin-top: clamp(2.500rem, 5vw, 4rem); padding-block: 1.100rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-family: var(--font-display); font-weight: 500;
}
.hero-tags li { display: flex; align-items: center; gap: .700rem; }
.hero-tags li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.500rem, 8vw, 6.500rem); }
.section-tint { background: linear-gradient(180deg, var(--beige-2), var(--beige-3)); }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.250rem); }
.kicker {
  display: inline-flex; align-items: center; gap: .600rem; margin-bottom: .600rem;
  font-family: var(--font-display); font-weight: 700; font-size: .950rem; color: var(--accent);
}
.kicker::before { content: ""; width: 28px; height: 4px; border-radius: 4px; background: var(--gold); }
h2 { font-size: clamp(1.600rem, 3.200vw, 2.400rem); font-weight: 800; }
h3 { font-size: 1.200rem; font-weight: 700; }

.section-head .section-sub { margin-top: .600rem; color: var(--muted); }
.section-foot { display: flex; justify-content: center; margin-top: clamp(1.750rem, 4vw, 2.750rem); }

/* Text link with an arrow, used as the card-level call to action */
.card-link {
  display: inline-flex; align-items: center; gap: .500rem; margin-top: .900rem;
  font-family: var(--font-display); font-weight: 700; font-size: .950rem;
  color: var(--accent); text-decoration: none;
}
.card-link i { font-size: .850rem; transition: translate .2s; }
[dir="rtl"] .card-link i { scale: -1 1; }
.card-link:hover i { translate: 4px 0; }
[dir="rtl"] .card-link:hover i { translate: -4px 0; }
/* The whole card is clickable through its link */
.cat-card, .product-card, .room-card { position: relative; }
.card-link::after { content: ""; position: absolute; inset: 0; }

/* Product categories */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.500rem; }
.cat-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s, box-shadow .25s;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cat-body { padding: 1.250rem 1.400rem 1.500rem; }
.cat-body p { margin-top: .350rem; color: var(--muted); font-size: 1rem; }

/* Featured products (filled from js/store-config.js) */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.500rem; }
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s, box-shadow .25s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 1.100rem 1.250rem 1.350rem; }
.product-body h3 { font-size: 1.050rem; }
.product-badge {
  position: absolute; top: .900rem; inset-inline-start: .900rem; z-index: 1;
  font-size: .800rem; font-weight: 600; color: var(--navy); background: var(--gold);
  border-radius: 999px; padding: .050rem .800rem;
}
.product-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .250rem 1rem; margin-top: .450rem; }
.product-price { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.product-rating { font-size: .900rem; color: var(--muted); }
.product-rating i { color: var(--gold-deep); }
.product-body .card-link { margin-top: auto; padding-top: .900rem; }

/* Why us */
.section-brand {
  color: var(--ink);
  background: linear-gradient(160deg, var(--beige-4), var(--beige-2));
}
.why-grid { display: grid; grid-template-columns: .800fr 1.400fr; gap: clamp(2rem, 5vw, 4.500rem); align-items: start; }
.why-intro > p:not(.kicker) { margin-block: 1.100rem 1.750rem; font-size: 1.100rem; color: var(--ink-soft); }
.why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.250rem; }
.why-list li {
  display: flex; gap: 1rem; padding: 1.400rem;
  background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--line); border-radius: var(--radius);
}
.why-list i {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  font-size: 1.200rem; color: var(--icon); background: var(--icon-bg); border-radius: 14px;
}
.why-list p { margin-top: .250rem; color: var(--ink-soft); font-size: 1rem; }

/* Shop by room */
.room-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.250rem; }
.room-card { overflow: hidden; border-radius: var(--radius); color: #fff; }
.room-card img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: scale .6s ease; }
.room-card:hover img { scale: 1.06; }
.room-body {
  position: absolute; inset: auto 0 0 0; padding: 3.500rem 1.250rem 1.250rem;
  background: linear-gradient(180deg, transparent, rgb(20 14 6 / .88));
}
.room-body p { margin-top: .250rem; font-size: .950rem; color: rgb(255 255 255 / .88); }
.room-body .card-link { color: var(--gold); margin-top: .650rem; }

/* About */
.about-brief { max-width: 50rem; margin-inline: auto; text-align: center; }
.about-brief .about-lead { margin-top: 1.100rem; font-size: 1.150rem; color: var(--ink); }
.about-brief p:not(.kicker):not(.about-lead) { margin-top: .750rem; color: var(--muted); }
.about-brief .rs-btn { margin-top: 1.750rem; }

/* Shopping steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.500rem; counter-reset: step; }
.steps li {
  counter-increment: step;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.600rem 1.500rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: .500rem;
  font-family: var(--font-display); font-weight: 800; font-size: 2.250rem; line-height: 1.2; color: var(--gold-deep);
}
.steps p { margin-top: .350rem; color: var(--muted); font-size: 1rem; }

/* Trust */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.250rem; }
.trust-grid li {
  display: flex; gap: 1rem; padding: 1.400rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.trust-grid i {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  font-size: 1.150rem; color: var(--icon); background: var(--icon-bg); border-radius: 50%;
}
.trust-grid p { margin-top: .250rem; color: var(--muted); font-size: 1rem; }
.trust-grid a { color: var(--accent); }

/* Customer reviews (filled from js/store-config.js) */
/* Carousel: a scroll-snap row, so swipe and keyboard scrolling work without script */
.rs-slider { --per-view: 3; --gap: 1.500rem; }
.rs-slider-track {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding-block: .500rem 1rem;
}
.rs-slider-track::-webkit-scrollbar { display: none; }
.rs-slider-track > * {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
}
.rs-slider-nav { display: flex; justify-content: center; gap: .750rem; margin-top: .750rem; }
[dir="ltr"] .rs-slider-nav i { scale: -1 1; }
.review-card {
  margin: 0; padding: 1.600rem 1.500rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.review-card .product-rating { font-size: 1rem; }
.review-card blockquote { margin: .600rem 0 1rem; color: var(--ink-soft); }
.review-card figcaption { font-family: var(--font-display); font-weight: 700; }
.review-card figcaption small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); }

/* FAQ */
.faq-list { max-width: 52rem; display: grid; gap: .900rem; }
.faq-list details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  padding: 1.100rem 1.400rem; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.050rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  font-size: 1.250rem; line-height: 1; color: var(--navy); background: var(--gold); border-radius: 50%;
  transition: rotate .2s;
}
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list details > p { padding: 0 1.400rem 1.250rem; color: var(--muted); }
.faq-list details a { color: var(--accent); }

/* Call to action */
.cta {
  text-align: center; padding: clamp(2.250rem, 5vw, 4rem) clamp(1.500rem, 5vw, 4rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  background:
    radial-gradient(40rem 20rem at 50% 120%, rgb(251 182 19 / .22), transparent 65%),
    linear-gradient(140deg, var(--beige-2), var(--beige-4));
}
.cta > p { max-width: 46rem; margin: 1rem auto 0; font-size: 1.150rem; color: var(--ink-soft); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .900rem; margin-top: 1.750rem; }

/* Sticky shopping bar on phones */
.mobile-cta { display: none; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contact-copy p:not(.kicker) { margin-block: 1rem 1.750rem; color: var(--muted); }
.contact-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.500rem, 3vw, 2.250rem); box-shadow: var(--shadow);
}
.contact-card dl { margin: 0; }
.contact-card dl > div { padding-block: .900rem; border-bottom: 1px solid var(--line); }
.contact-card dt { display: flex; align-items: center; gap: .500rem; font-size: .850rem; font-weight: 400; color: var(--muted); }
.contact-card dt i, .footer-contact i {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  font-size: .800rem; color: var(--icon); background: var(--icon-bg); border-radius: 50%;
}
.contact-card dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.100rem; }
.contact-card dd a { text-decoration: none; }
.contact-card dd a:hover { color: var(--accent); }
.socials { display: flex; flex-wrap: wrap; gap: .500rem; margin-top: 1.400rem; }
.socials a {
  display: inline-flex; align-items: center; gap: .450rem; text-decoration: none; font-size: .900rem; font-weight: 500;
  padding: .250rem .950rem; border-radius: 999px; border: 1.500px solid var(--icon-bg);
  color: #fbf6ec; background: var(--icon-bg);
  transition: border-color .2s, transform .2s;
}
.socials a i { color: var(--icon); }
.socials a:hover, .footer-socials a:hover { transform: translateY(-3px); }
.socials a:hover { border-color: var(--icon); }

/* Footer */
.site-footer {
  color: var(--ink-soft); font-size: .9750rem;
  background: linear-gradient(180deg, var(--beige-3), var(--beige-4));
  border-top: 4px solid var(--gold);
  padding-block: clamp(2.500rem, 5vw, 4rem) 0;
}
.footer-grid {
  display: grid; grid-template-columns: 1.500fr .800fr 1.200fr 1.200fr;
  gap: clamp(1.750rem, 4vw, 3.500rem); align-items: start;
}
.footer-brand img { width: 170px; }
.footer-brand p { margin-top: .500rem; max-width: 24rem; }
.footer-brand .footer-tagline { font-family: var(--font-display); font-weight: 700; font-size: 1.050rem; color: var(--ink); }
.footer-col h2 {
  position: relative; font-size: 1.050rem; font-weight: 700; color: var(--ink);
  padding-bottom: .650rem; margin-bottom: 1rem;
}
.footer-col h2::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
  width: 32px; height: 3px; border-radius: 3px; background: var(--gold);
}
.footer-col ul { display: grid; gap: .550rem; }
.footer-col a { text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--accent); }
.footer-socials { display: flex; flex-wrap: wrap; gap: .500rem; margin-top: 1.100rem; }
.footer-contact li { display: flex; align-items: baseline; gap: .650rem; }
.footer-contact li { align-items: center; }
.footer-socials a {
  display: grid; place-items: center; width: 42px; height: 42px; font-size: 1.050rem; color: var(--icon);
  border-radius: 50%;
  background: var(--icon-bg);
  border: 1.500px solid var(--icon-bg);
  transition: border-color .2s, color .2s, background-color .2s, transform .2s;
}
/* Icon-only links: the network name stays available to screen readers */
.footer-socials .soc-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap;
}
.footer-socials a:hover { border-color: var(--icon); }
.footer-payment {
  display: flex; flex-wrap: wrap; align-items: center; gap: .750rem 1.250rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.250rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.footer-payment h2 { font-size: .950rem; font-weight: 700; color: var(--ink); }
.footer-payment ul { display: flex; flex-wrap: wrap; gap: .500rem; }
.footer-payment img { width: 46px; height: auto; border-radius: 4px; }
.footer-payment + .footer-bottom { margin-top: 1.250rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .500rem 1.500rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.250rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: .875rem;
}
.footer-bottom a { font-weight: 600; color: var(--ink); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Animation (decorative; off for reduced motion and print) ---------- */
.cat-card img { transition: scale .6s ease; }
.cat-card:hover img { scale: 1.06; }
.why-list li, .steps li, .trust-grid li { transition: transform .25s, box-shadow .25s; }
.why-list li:hover, .steps li:hover, .trust-grid li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes fade-up { from { opacity: 0; translate: 0 26px; } }
  @keyframes fade-in-scale { from { opacity: 0; scale: .94; } }
  @keyframes float { 50% { translate: 0 -10px; } }
  @keyframes frame-drift { 50% { translate: 8px 8px; } }

  /* Hero entrance, then a slow float on the picture */
  .hero-copy > * { animation: fade-up .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: .1s; }
  .hero-copy > :nth-child(3) { animation-delay: .2s; }
  .hero-copy > :nth-child(4) { animation-delay: .3s; }
  .hero-copy > :nth-child(5) { animation-delay: .4s; }
  .hero-media { animation: fade-in-scale .9s .2s cubic-bezier(.2, .7, .2, 1) backwards; }
  .hero-media img { animation: float 7s ease-in-out 1.200s infinite; }
  .hero-media::before { animation: frame-drift 7s ease-in-out 1.200s infinite; }
  .hero-tags li { animation: fade-up .6s .6s backwards; }
  .hero-tags li:nth-child(2) { animation-delay: .7s; }
  .hero-tags li:nth-child(3) { animation-delay: .8s; }

  /* Scroll reveal: main.js adds .js-anim, then .is-visible as each block enters the viewport */
  .js-anim .reveal {
    opacity: 0; translate: 0 32px;
    transition:
      opacity .7s ease var(--reveal-delay, 0s),
      translate .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0s),
      transform .25s, box-shadow .25s;
  }
  .js-anim .reveal.is-visible { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  html, .rs-slider-track { scroll-behavior: auto; }
  .rs-btn, .cat-card, .cat-card img, .product-card, .room-card img, .why-list li, .steps li, .trust-grid li,
  .card-link i, .faq-list summary::after, .socials a, .footer-socials a { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .menu-btn { display: grid; }
  .header-shop { margin-inline-start: auto; }
}
@media (max-width: 960px) {
  .hero-grid, .why-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-media img { aspect-ratio: 16 / 11; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cat-grid, .product-grid, .room-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .rs-slider { --per-view: 2; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; padding-bottom: 76px; }
  .cat-grid, .why-list, .steps, .footer-grid { grid-template-columns: 1fr; }
  .rs-slider { --per-view: 1; }
  .room-card img { aspect-ratio: 4 / 5; }
  .hero-media::before { inset: .750rem -.500rem -.750rem .500rem; }
  .brand img { height: 46px; }
  .header-inner { gap: .600rem; }
  .header-shop { display: none; }
  .lang-btn { margin-inline-start: auto; }
  .hero-actions .rs-btn, .cta-actions .rs-btn { flex: 1 1 100%; }
  .mobile-cta {
    position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; gap: .650rem;
    padding: .650rem 1rem calc(.650rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .mobile-cta .rs-btn { flex: 1; padding-block: .650rem; }
  .mobile-cta .mobile-cta-wa { flex: none; width: 52px; padding-inline: 0; font-size: 1.300rem; }
}

/* ---------- Print ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  :root, :root[data-theme] { color-scheme: light; }
  body { font-size: 11pt; padding-bottom: 0; }
  .site-header, .skip-link, .hero-actions, .rs-btn, .mobile-cta { display: none !important; }
  .hero, .section-brand, .site-footer, .eyebrow, .cta, .trust-grid i, .room-body {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .section { padding-block: 9mm; }
  .cat-card, .product-card, .room-card, .why-list li, .steps li, .trust-grid li, .faq-list details, .cta, .contact-card { break-inside: avoid; box-shadow: none; }
  .section-head, h2, h3 { break-after: avoid; }
}