/* =========================================================================
   LALE MODA — style.css
   Arabic, RTL, light and warm fashion UI.

   RTL NOTES
   - Every left/right value uses logical properties (inset-inline, margin-inline,
     padding-inline) so the layout mirrors correctly in RTL.
   - letter-spacing and text-transform are switched OFF: both break Arabic
     letter joining and Arabic has no upper case.
   Order: tokens → base → header → hero → sections → grid → footer → modal
   ========================================================================= */

/* ---------- 1. DESIGN TOKENS (edit these to retheme the site) ---------- */
:root {
  /* Colours */
  --c-bg: #fbf7f4;          /* warm white page background */
  --c-surface: #ffffff;     /* cards */
  --c-surface-tint: #f6efe9;/* cream band sections */
  --c-ink: #2b2523;         /* dark charcoal text */
  --c-ink-soft: #6d615c;    /* muted body text */
  --c-accent: #b3898f;      /* dusty rose */
  --c-accent-deep: #8d666c; /* rose for hover/links */
  --c-border: #ece2dc;      /* very subtle border */
  --c-gold: #c9a86a;        /* warm gold, used sparingly */
  --c-wash: rgba(179, 137, 143, 0.12); /* subtle brand wash */

  /* Typography — Amiri (elegant naskh, headings) + Tajawal (clean UI/body) */
  --font-display: "Amiri", "Traditional Arabic", "Times New Roman", serif;
  --font-body: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;

  /* Space & shape */
  --container: 1240px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-soft: 0 8px 30px rgba(72, 55, 50, 0.07);
  --shadow-lift: 0 16px 44px rgba(72, 55, 50, 0.14);

  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) var(--c-surface-tint);
}

/* Global sleek scrollbar matching Lale Moda palette */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--c-surface-tint);
}
::-webkit-scrollbar-thumb {
  background: #d4bec2;
  border-radius: 999px;
  border: 2px solid var(--c-surface-tint);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-accent);
}
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;            /* Arabic needs more leading than Latin */
  overflow-x: hidden;          /* hard guard against horizontal scroll */
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;            /* Amiri sits low, needs air */
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a {
  color: inherit;
  text-decoration: none;
}

ul { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Latin-only bits (order numbers, e-mail) stay LTR inside RTL text */
[dir="ltr"], .ltr { direction: ltr; unicode-bidi: isolate; }

/* Visible focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--c-accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-ink);
  color: #fff;
  padding: 12px 18px;
  font-size: 14px;
}
.skip-link:focus { inset-inline-start: 0; }

/* Eyebrow / small label. No letter-spacing: it would break Arabic joining. */
.eyebrow {
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-accent-deep);
  font-weight: 500;
  margin-bottom: 14px;
}

/* ---------- 3. BUTTONS ---------- */
/* The order buttons and the contact lists are removed with the hidden
   attribute when the matching .env value is empty. Any display rule below
   would otherwise beat the browser default for [hidden] and leave them
   visible as empty elements. */
.btn[hidden],
.modal-actions[hidden],
#contactList[hidden],
#socialList[hidden] {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;                 /* comfortable touch target */
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn-primary {
  background: var(--c-ink);
  color: #fff;
}
.btn-primary:hover { background: var(--c-accent-deep); }

.btn-ghost {
  border-color: var(--c-border);
  color: var(--c-ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--c-ink); }

.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
}
.btn-whatsapp:hover {
  background: #20bd5a;
  border-color: #20bd5a;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.38);
}
.btn-whatsapp .btn-icon,
.btn-whatsapp svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

@view-transition {
  navigation: auto;
}

/* ---------- 4. HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 244, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  view-transition-name: site-header;
}
.site-header.is-stuck {
  border-bottom-color: var(--c-border);
  box-shadow: 0 6px 24px rgba(72, 55, 50, 0.06);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}
.brand-tag {
  font-size: 11px;
  color: var(--c-ink-soft);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink-soft);
  padding: 6px 0;
  transition: color 0.2s var(--ease);
}
/* Underline indicator: static for active, smooth for hover */
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--c-accent-deep);
  transform: scaleX(0);
  transform-origin: right;   /* inline-start in RTL */
}
[dir="ltr"] .nav-link::after {
  transform-origin: left;
}
.nav-link:hover {
  color: var(--c-ink);
}
.nav-link:hover::after {
  transform: scaleX(1);
  background: var(--c-accent);
  transition: transform 0.22s var(--ease);
}
.nav-link.is-active,
.nav-link.active {
  color: var(--c-ink);
}
.nav-link.is-active::after,
.nav-link.active::after {
  transform: scaleX(1);
  background: var(--c-accent-deep);
}

/* Hamburger — hidden on desktop */
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-bar {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--c-ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
  animation: drawerIn 0.28s var(--ease);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-list {
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-list li { border: none; }
.mobile-nav-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink-soft);
  text-align: right;
  border-inline-start: 3px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, padding 0.2s;
}
.mobile-nav-list a:hover {
  background: var(--c-surface-tint);
  color: var(--c-ink);
}
.mobile-nav-list a.is-active,
.mobile-nav-list a.active {
  background: var(--c-wash);
  color: var(--c-accent-deep);
  font-weight: 700;
  border-inline-start-color: var(--c-accent-deep);
  padding-inline-start: 16px;
}
.mobile-nav-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.mobile-nav-list li:last-child a { border-bottom: 0; }

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 5. HERO ---------- */
.hero {
  position: relative;
  min-height: clamp(540px, 80vh, 760px);
  display: flex;
  align-items: center;
  padding: clamp(64px, 10vw, 120px) 0;
  overflow: hidden;
  background-color: var(--c-bg);
}

/* Responsive hero background picture covering the entire section behind text */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* Luxury ambient gradient wash ensuring crystal-clear text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(251, 247, 244, 0.95) 0%,
    rgba(251, 247, 244, 0.85) 34%,
    rgba(251, 247, 244, 0.48) 58%,
    rgba(251, 247, 244, 0.08) 80%,
    transparent 100%
  );
}

[dir="ltr"] .hero-overlay,
html[dir="ltr"] .hero-overlay {
  background: linear-gradient(
    to right,
    rgba(251, 247, 244, 0.95) 0%,
    rgba(251, 247, 244, 0.85) 34%,
    rgba(251, 247, 244, 0.48) 58%,
    rgba(251, 247, 244, 0.08) 80%,
    transparent 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
}

.hero-copy {
  max-width: 580px;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(38px, 6.2vw, 68px);
  line-height: 1.25;
  margin-bottom: 22px;
  color: var(--c-ink);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.hero-text {
  max-width: 48ch;
  color: var(--c-ink-soft);
  font-size: 18px;
  line-height: 1.85;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(43, 37, 35, 0.18);
}

.hero-actions .btn-ghost:hover {
  background: #ffffff;
  border-color: var(--c-ink);
}

/* ---------- 6. VALUE STRIP ---------- */
.marquee-strip {
  border-block: 1px solid var(--c-border);
  background: var(--c-surface);
}
.strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  padding-block: 18px;
  font-size: 12px;
  color: var(--c-ink-soft);
}
.strip-inner span[aria-hidden] { color: var(--c-gold); }

/* ---------- 7. SECTIONS ---------- */
.section { padding: clamp(56px, 9vw, 116px) 0; }
.section-tint { background: var(--c-surface-tint); }

.section-head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 44px;
}
.section-title { font-size: clamp(30px, 4.4vw, 48px); }
.section-sub { color: var(--c-ink-soft); margin: 0; }

/* Filter chips */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.chip {
  min-height: 42px;
  padding: 0 20px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink-soft);
  transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.chip[aria-pressed="true"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #fff;
}

/* ---------- 8. PRODUCT GRID ---------- */
/* 4 up on desktop, 3 on tablet, 2 on mobile */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
}
.product-grid-featured { margin-top: 4px; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: start;
  padding: 0;
  background-color: var(--c-surface);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: #e3d4cd;
}

.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 12%, #f6cfcf 0%, #eed1d1 45%, #ffcac8 100%);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.card:hover .card-media img:not(.card-fallback) { transform: scale(1.03); }

.card-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-accent-deep);
}

/* Shown instead of a photo when a product has no image, or image storage is
   unbound. The store mark sits contained in the frame on a flat colour taken
   from the mark's own background (#e8c1b7, the measured average of its border
   pixels), so its square edge disappears into the tile. An earlier radial
   gradient fought the logo's own vignette and left a visible pink frame. */
.card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 18px;
  background: radial-gradient(120% 90% at 50% 12%, #f7e6e6 0%, #f3dcdc 45%, #eccfce 100%) !important;
}
/* Two classes, not one: `.card-media img` below also sets object-fit:cover and
   outranks a single class, which cropped the mark. */
.card-media img.card-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* never crop the mark */
}

.card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-category {
  font-size: 12px;
  color: var(--c-ink-soft);
}
.card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.card-price {
  font-size: 15px;
  margin-top: 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  gap: 3px;
  line-height: 1.35;
}
.card-price .price-item {
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}
.card-price .price-secondary {
  color: var(--c-accent);
  font-weight: 500;
  font-size: 13.5px;
}
.card-price .price-sep {
  display: block;
  width: 100%;
  min-width: 48px;
  height: 1px;
  background: var(--c-accent-border, #d8cac2);
  margin: 3px 0;
}

.status-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--c-ink-soft);
  font-size: 15px;
  padding: 40px 0;
}
.status-msg.is-error { color: #9c4a4a; }

/* ---------- 8b. PAGE HEADER + PAGINATION ---------- */
/* عنوان صفحة المتجر */
.page-head {
  padding: clamp(40px, 6vw, 76px) 0 clamp(8px, 2vw, 20px);
  text-align: center;
}
.page-head .section-sub { max-width: 55ch; margin-inline: auto; }

/* عدّاد النتائج */
.result-count {
  text-align: center;
  font-size: 14px;
  color: var(--c-ink-soft);
  margin: 0 0 28px;
}

/* زر «عرض كل القطع» في نهاية الصفحة الرئيسية */
.catalog-more {
  text-align: center;
  margin: clamp(32px, 5vw, 52px) 0 0;
}

/* أزرار الصفحات */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(36px, 5vw, 56px);
}
.pagination[hidden] { display: none; }

.page-btn {
  min-width: 46px;
  min-height: 46px;             /* easy tap target */
  padding: 0 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink-soft);
  transition: all 0.25s var(--ease);
}
.page-btn:hover:not(:disabled) {
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.page-btn.is-current {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #fff;
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- 9. ABOUT ---------- */
.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}
.about-text { color: var(--c-ink-soft); font-size: 16px; }
.about-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--c-border);
}
.about-facts dt {
  font-size: 12px;
  color: var(--c-accent-deep);
  margin-bottom: 6px;
}
.about-facts dd { margin: 0; color: var(--c-ink); font-size: 15px; }

/* ---------- 10. FOOTER ---------- */
.site-footer {
  background: var(--c-ink);
  color: #e9dedb;
  padding: clamp(48px, 7vw, 84px) 0 28px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-logo {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.5);
  margin-bottom: 14px;
  opacity: 0.92;
}
.footer-blurb { font-size: 15px; color: #bfaea9; max-width: 32ch; }
.footer-heading {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gold);
  margin-bottom: 16px;
}
.footer-list { font-size: 15px; color: #cdbfbb; }
.footer-list li { margin-bottom: 10px; }
.footer-list a { display: inline-flex; align-items: center; gap: 8px; transition: color 0.25s var(--ease); }
.footer-list a svg { flex-shrink: 0; }
.footer-list a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 24px;
  font-size: 13px;
  color: #a99792;
}
.footer-bottom p { margin: 0; }

/* ---------- 11. PRODUCT MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 37, 35, 0.58);
  /* No backdrop-filter here on purpose. A full-viewport blur has to be
     recomputed on every frame the dialog animates over it, which reads as lag
     on large screens. The darker background alone gives the same separation. */
  animation: fadeIn 0.22s var(--ease);
  will-change: opacity;
}

.modal-dialog {
  position: relative;
  width: min(1040px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  animation: modalIn 0.26s var(--ease);
  /* Promote to its own layer so the entry animation does not repaint the
     page behind it. */
  will-change: transform, opacity;
  /* Modern standards scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(179, 137, 143, 0.45) transparent;
  overscroll-behavior: contain;
}

/* Elegant, discreet custom scrollbar for modal dialog (WebKit / Blink) */
.modal-dialog::-webkit-scrollbar {
  width: 6px;
}

.modal-dialog::-webkit-scrollbar-track {
  background: transparent;
  margin: 16px 0;
}

.modal-dialog::-webkit-scrollbar-thumb {
  background: rgba(179, 137, 143, 0.4);
  border-radius: 999px;
  transition: background 0.25s var(--ease);
}

.modal-dialog::-webkit-scrollbar-thumb:hover {
  background: var(--c-accent-deep);
}

.modal-dialog::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Honour the OS setting: no motion, but still fully visible. */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-dialog { animation: none; }
}

.modal-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-ink);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.modal-close:hover { background: #fff; transform: rotate(90deg); }

.modal-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 3vw, 40px);
  align-items: start;
}

.gallery-main {
  aspect-ratio: 3 / 4;
  background: var(--c-surface-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: imgIn 0.3s var(--ease);
  background:
    radial-gradient(120% 90% at 50% 12%, #f7e6e6 0%, #f3dcdc 45%, #eccfce 100%);
}
@keyframes imgIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: none; }
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.thumb {
  width: 68px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface-tint);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: radial-gradient(120% 90% at 50% 12%, #f6cfcf 0%, #eed1d1 45%, #ffcac8 100%);
}
.thumb:hover { transform: translateY(-2px); }
.thumb[aria-selected="true"] { border-color: var(--c-ink); }

.modal-title { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 8px; }
.modal-price {
  font-size: 19px;
  color: var(--c-ink);
  margin-bottom: 18px;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  gap: 3px;
}
.modal-price .price-item {
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.35;
}
.modal-price .price-secondary {
  color: var(--c-accent);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
}
.modal-price .price-sep {
  display: block;
  width: 100%;
  min-width: 60px;
  height: 1px;
  background: var(--c-accent-border, #d8cac2);
  margin: 4px 0;
}
.modal-desc { color: var(--c-ink-soft); }

/* Product Sizes on Modal Card */
.modal-sizes {
  margin: 18px 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-sizes[hidden] {
  display: none !important;
}
.modal-sizes-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink);
}

/* Card sizes on product grid */
.card-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.card-size-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  background: var(--c-surface-tint, #f6efe9);
  color: var(--c-ink, #2b2523);
  border: 1px solid var(--c-border, #e5ded9);
  line-height: 1.35;
}
.modal-sizes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-size-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm, 6px);
  border: 1.5px solid var(--c-border);
  background: var(--c-surface, #ffffff);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-size-pill:hover {
  border-color: var(--c-accent-deep);
  color: var(--c-accent-deep);
  background: var(--c-surface-hover, #faf4ef);
  transform: translateY(-1px);
}
.modal-size-pill.selected {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(43, 37, 35, 0.2);
}

.modal-meta {
  margin: 24px 0;
  padding: 18px 0;
  border-block: 1px solid var(--c-border);
  font-size: 14px;
  color: var(--c-ink-soft);
}
.modal-meta li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}
.modal-meta li span:first-child { font-weight: 500; }

.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 12. SCROLL REVEAL ----------
   The hidden state is scoped to .js on <html>, which an inline script in
   <head> adds. Without JavaScript the content simply stays visible instead
   of being invisible with nothing able to reveal it. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Hero copy staggers in on load */
.hero .hero-copy > [data-reveal] { transition-delay: 0.05s; }
.hero-copy > [data-reveal]:nth-child(2) { transition-delay: 0.15s; }
.hero-copy > [data-reveal]:nth-child(3) { transition-delay: 0.25s; }
.hero-copy > [data-reveal]:nth-child(4) { transition-delay: 0.35s; }
.hero-visual[data-reveal] { transition-delay: 0.2s; }

body.modal-open { overflow: hidden; }

/* ---------- 13. RESPONSIVE ---------- */
/* Tablet: 3 per row */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .about-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .modal-body { grid-template-columns: 1fr; }
  .gallery { max-width: 460px; margin-inline: auto; }
}

/* Mobile nav collapse — text and image stay side by side (one row) */
@media (max-width: 820px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  .hero {
    min-height: clamp(520px, 74vh, 660px);
    padding: clamp(44px, 8vw, 76px) 0;
  }
  .hero-inner { display: flex; }
  .hero-copy { max-width: 500px; }
  .hero-title { font-size: clamp(28px, 6.5vw, 42px); margin-bottom: 16px; }
  .hero-text { font-size: 15px; margin-bottom: 24px; }
  .hero-actions { gap: 10px; }
  .btn { min-height: 46px; padding: 0 20px; font-size: 13px; }
}

/* Small screens: 2 per row */
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .container { padding-inline: 16px; }

  .hero {
    min-height: clamp(480px, 80vh, 600px);
    display: flex;
    align-items: center;
    padding: clamp(28px, 6vw, 44px) 0;
  }
  .hero-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  .hero-copy {
    max-width: 54%;
    width: 54%;
    position: relative;
    z-index: 2;
  }
  .hero-title {
    font-size: clamp(20px, 5.2vw, 25px);
    line-height: 1.25;
    margin-bottom: 10px;
    color: var(--c-ink);
  }
  .hero-text {
    font-size: clamp(12px, 3.1vw, 13.5px);
    line-height: 1.55;
    margin-bottom: 16px;
    max-width: 100%;
    color: var(--c-ink-soft);
  }
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 180px;
  }
  .hero-actions .btn {
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  [dir="rtl"] .hero-bg-img,
  html[dir="rtl"] .hero-bg-img {
    object-position: 50% 15%;
  }
  [dir="ltr"] .hero-bg-img,
  html[dir="ltr"] .hero-bg-img {
    object-position: 50% 15%;
  }

  [dir="rtl"] .hero-overlay,
  html[dir="rtl"] .hero-overlay {
    background: linear-gradient(
      to left,
      rgba(251, 247, 244, 0.94) 0%,
      rgba(251, 247, 244, 0.85) 36%,
      rgba(251, 247, 244, 0.15) 50%,
      transparent 56%
    ) !important;
  }
  [dir="ltr"] .hero-overlay,
  html[dir="ltr"] .hero-overlay {
    background: linear-gradient(
      to right,
      rgba(251, 247, 244, 0.94) 0%,
      rgba(251, 247, 244, 0.85) 36%,
      rgba(251, 247, 244, 0.15) 50%,
      transparent 56%
    ) !important;
  }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .card-body { padding: 12px 12px 16px; }
  .card-name { font-size: 17px; }
  .card-price { font-size: 13px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .modal { padding: 0; }
  .modal-dialog { max-height: 100vh; height: 100%; border-radius: 0; }
  .modal-actions .btn { width: 100%; padding: 0 18px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero-copy { max-width: 58%; width: 58%; }
  .hero-title { font-size: 18px; margin-bottom: 8px; }
  .hero-text { font-size: 11.5px; line-height: 1.45; margin-bottom: 12px; }
  .hero-actions { max-width: 150px; }
  .hero-actions .btn { min-height: 36px; padding: 0 12px; font-size: 11.5px; }
  .product-grid { gap: 10px; }
  .card-name { font-size: 15px; }
}

/* ---------- 14. ACCESSIBILITY: REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .card:hover .card-media img:not(.card-fallback) { transform: none; }
}

/* ---------- 15. PRINT ---------- */
@media print {
  .site-header, .modal, .site-footer { display: none; }
  body { background: #fff; }
}

/* ---------- 16. LANGUAGE SWITCHER ----------
   Rendered by js/i18n.js only when more than one language is enabled.
   With a single language the host element is removed entirely. */
.lang-slot { display: flex; align-items: center; }
.lang-slot:empty { display: none; }

.lang-switch { position: relative; display: inline-flex; }

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  padding-inline-end: 1.7rem;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.lang-select:hover { border-color: var(--accent); }
.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Chevron built as a CSS triangle rather than rotated borders: a triangle made
   from inline-start/line-end borders is symmetric in both directions, so it
   points down in LTR and RTL without a direction-specific override. */
.lang-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0.62rem;
  width: 0;
  height: 0;
  border-inline-start: 0.3rem solid transparent;
  border-inline-end: 0.3rem solid transparent;
  border-top: 0.34rem solid currentColor;
  transform: translateY(-40%);
  pointer-events: none;
  opacity: .55;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .lang-select { font-size: 0.75rem; padding: 0.35rem 0.6rem; padding-inline-end: 1.5rem; }
}

/* ---------- 17. DIRECTION-SAFE ARROWS ----------
   Arrows live in CSS rather than in the translation files: a glyph baked into
   a translation points the wrong way in the other direction. The same
   border-triangle trick as the language switcher is used, mirrored with
   scaleX(-1) under [dir="rtl"]. */
.tri {
  display: inline-block;
  width: 0; height: 0;
  border-top: 0.22rem solid transparent;
  border-bottom: 0.22rem solid transparent;
  vertical-align: middle;
}

.tri-prev, .tri-next { border-inline-start: 0.36rem solid currentColor; }
.tri-next { border-inline-start: 0; border-inline-end: 0.36rem solid currentColor; }

[dir="rtl"] .tri-prev,
[dir="rtl"] .tri-next { transform: scaleX(-1); }

#btnPrev::before, #btnNext::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-top: 0.26rem solid transparent;
  border-bottom: 0.26rem solid transparent;
  vertical-align: middle;
  opacity: .75;
}

#btnPrev::before {
  border-inline-end: 0.42rem solid currentColor;
  margin-inline-end: 0.45rem;
}

#btnNext::after {
  border-inline-start: 0.42rem solid currentColor;
  margin-inline-start: 0.45rem;
}

[dir="rtl"] #btnPrev::before,
[dir="rtl"] #btnNext::after { transform: scaleX(-1); }

#btnPrev[disabled] { opacity: .45; }