/* =============================================================================
   HATAN — Scene CSS
   ============================================================================= */

/* ── Web Fonts ─────────────────────────────────────────────────────────────── */
/* Self-hosted via hatan-fonts handle — no Google CDN. See assets/fonts/fonts.css */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --hatan-background:        hsl(22, 23%, 8%);
  --hatan-foreground:        hsl(32, 10%, 68%);
  --hatan-border:            hsl(30, 15%, 18%);
  --hatan-input:             hsl(30, 15%, 18%);
  --hatan-ring:              hsl(32, 43%, 92%);
  --hatan-card:              hsl(22, 23%, 10%);
  --hatan-card-foreground:   hsl(32, 10%, 68%);
  --hatan-primary:           hsl(32, 43%, 92%);
  --hatan-primary-fg:        hsl(22, 23%, 8%);
  --hatan-secondary:         hsl(22, 15%, 16%);
  --hatan-secondary-fg:      hsl(32, 43%, 92%);
  --hatan-muted:             hsl(22, 15%, 14%);
  --hatan-muted-fg:          hsl(30, 20%, 65%);
  --hatan-destructive:       hsl(0, 60%, 45%);
  --hatan-radius:            0.75rem;
  --hatan-radius-sm:         calc(var(--hatan-radius) - 4px);
  --hatan-radius-lg:         calc(var(--hatan-radius) + 8px);
  --hatan-radius-xl:         calc(var(--hatan-radius) + 4px);
  --hatan-radius-2xl:        calc(var(--hatan-radius) + 12px);
  --hatan-radius-full:       9999px;
  --hatan-font-sans:         'Inter', sans-serif;
  --hatan-font-serif:        'Playfair Display', serif;
  --hatan-font-ar-sans:      'Noto Sans Arabic', sans-serif;
  --hatan-font-ar-serif:     'Amiri', serif;
  --hatan-marks-color:       rgba(248, 244, 238, 0.90);

  /* ── Semantic aliases (used in woocommerce.css) ── */
  --hatan-text-primary:      hsl(32, 10%, 68%);
  --hatan-text-secondary:    hsl(30, 20%, 65%);
  --hatan-text-tertiary:     hsla(30, 20%, 65%, 0.45);
  --hatan-overlay-opacity:   0.4;
  --hatan-glass-bg:          hsla(22, 23%, 8%, var(--hatan-overlay-opacity, 0.4));
  --hatan-glass-border:      rgba(255, 255, 255, 0.06);
  --hatan-space-md:          1.25rem;
  --hatan-space-lg:          2rem;
  --hatan-font-display:      'Playfair Display', serif;
  --hatan-font-arabic-sans:  'Noto Sans Arabic', sans-serif;
  --hatan-select-bg:         hsl(22, 23%, 10%);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.hatan-theme {
  font-family: var(--hatan-font-sans);
  background-color: var(--hatan-background);
  color: var(--hatan-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

body.hatan-theme.lang-ar,
body.hatan-theme [dir="rtl"] { font-family: var(--hatan-font-ar-sans); }

::selection { background-color: hsla(32,43%,92%,0.3); color: var(--hatan-primary-fg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ── Accessibility ─────────────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
.focus-ring:focus-visible { outline: 2px solid var(--hatan-primary); outline-offset: 3px; }

/* ── Reduced Motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .orb { animation: none !important; }
}

/* ── Typography ────────────────────────────────────────────────────────────── */
/* Cinematic 1.1 is preserved for explicitly sized display/hero headings
   (which all carry their own line-height declarations). The global default
   uses a balanced 1.35 so that headings at 1–2 rem (cards, archive, breadcrumbs,
   inner-page h2/h3) are comfortably readable rather than cramped. */
body.hatan-theme h1,
body.hatan-theme h2,
body.hatan-theme h3,
body.hatan-theme h4 { font-family: var(--hatan-font-serif); line-height: 1.35; }

body.hatan-theme.lang-ar h1,
body.hatan-theme.lang-ar h2,
body.hatan-theme.lang-ar h3,
body.hatan-theme [dir="rtl"] h1,
body.hatan-theme [dir="rtl"] h2,
body.hatan-theme [dir="rtl"] h3 { font-family: var(--hatan-font-ar-serif); letter-spacing: 0; }

/* Arabic line-height: scoped to theme-owned content wrappers only.
   WooCommerce / plugin content uses its own wrappers (.woocommerce, .wc-*)
   and is intentionally excluded. Per-component rules above provide finer control. */
body.hatan-theme [dir="rtl"] .entry-content p,
body.hatan-theme [dir="rtl"] .hatan-page-content p,
body.hatan-theme [dir="rtl"] .hatan-single-post__content p,
body.hatan-theme.lang-ar .entry-content p,
body.hatan-theme.lang-ar .hatan-page-content p,
body.hatan-theme.lang-ar .hatan-single-post__content p { line-height: 1.95; letter-spacing: 0; }

/* ── Utility ───────────────────────────────────────────────────────────────── */
.glass-panel {
  background: var(--hatan-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
}

.glass-card {
  background-color: rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--hatan-radius-2xl);
  transition: background-color 500ms ease;
}
.glass-card:hover { background-color: rgba(255,255,255,0.04); }

.hatan-container { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width:640px) { .hatan-container { padding-inline: 1.5rem; } }
@media (min-width:1024px) { .hatan-container { padding-inline: 2rem; } }

/* ── Atmospheric Orbs ──────────────────────────────────────────────────────── */
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  opacity: 0; pointer-events: none;
  animation: orb-fade-in 2s ease forwards;
}
.orb-1 {
  width: 600px; height: 600px; top: -10%; left: -15%;
  background: radial-gradient(circle, hsla(30,49%,40%,0.18) 0%, transparent 70%);
  animation: orb-fade-in 2s ease forwards, orb-drift-1 25s ease-in-out 2s infinite alternate;
}
.orb-2 {
  width: 500px; height: 500px; bottom: 20%; right: -10%;
  background: radial-gradient(circle, hsla(22,30%,30%,0.14) 0%, transparent 70%);
  animation: orb-fade-in 2.5s ease forwards, orb-drift-2 30s ease-in-out 2.5s infinite alternate;
}
.orb-3 {
  width: 400px; height: 400px; top: 50%; left: 40%;
  background: radial-gradient(circle, hsla(30,49%,45%,0.10) 0%, transparent 70%);
  animation: orb-fade-in 3s ease forwards, orb-drift-3 20s ease-in-out 3s infinite alternate;
}

@keyframes orb-fade-in { to { opacity: 1; } }
@keyframes orb-drift-1 {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(40px,30px) scale(1.05); }
  66%  { transform: translate(-20px,50px) scale(0.97); }
  100% { transform: translate(30px,-20px) scale(1.03); }
}
@keyframes orb-drift-2 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-50px,-30px) scale(1.08); }
  100% { transform: translate(20px,40px) scale(0.95); }
}
@keyframes orb-drift-3 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(30px,-40px) scale(1.06); }
  100% { transform: translate(-30px,20px) scale(0.98); }
}

/* ── Scene Structure ───────────────────────────────────────────────────────── */
.scene-wrapper { position: relative; z-index: 1; min-height: 100vh; overflow-x: hidden; }
.scene-orbs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.scene-content { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.scene-main { flex: 1; padding-top: 3.5rem; }

/* ── Header ────────────────────────────────────────────────────────────────── */
.scene-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  transition: background-color 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.scene-header.is-scrolled {
  background-color: hsla(22,23%,8%,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,0.05);
}
.scene-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 3.5rem; padding-inline: 1rem;
  max-width: 80rem; margin-inline: auto;
}
@media (min-width:640px) { .scene-header__inner { padding-inline: 1.5rem; } }
@media (min-width:1024px) { .scene-header__inner { padding-inline: 2rem; } }

.scene-header__logo {
  font-family: var(--hatan-font-serif);
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.25em;
  color: hsla(32,10%,68%,0.65); text-transform: uppercase;
}
.lang-ar .scene-header__logo { font-family: var(--hatan-font-ar-serif); }

.scene-header__nav { display: flex; align-items: center; gap: 2rem; }
.scene-header__nav-list,
.scene-header__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2rem; }
.scene-header__nav li { display: block; }
.scene-header__nav a {
  font-size: 0.8rem; color: hsla(32,10%,68%,0.65);
  letter-spacing: 0.1em; transition: color 200ms ease;
}
.scene-header__nav a:hover { color: var(--hatan-primary); }

.scene-header__actions { display: flex; align-items: center; gap: 1rem; }

.scene-header__lang-btn {
  font-size: 0.7rem; letter-spacing: 0.15em;
  color: hsla(32,10%,68%,0.45); background: none; border: none;
  cursor: pointer; padding: 0.25rem 0.5rem;
  border-radius: var(--hatan-radius-sm);
  transition: color 200ms ease; font-family: inherit; text-transform: uppercase;
}
.scene-header__lang-btn:hover { color: var(--hatan-foreground); }

.scene-header__cart-btn {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: hsla(32,10%,68%,0.65);
  background: none; border: none; cursor: pointer;
  padding: 0.25rem; border-radius: var(--hatan-radius-sm);
  transition: color 200ms ease; font-family: inherit;
}
.scene-header__cart-btn:hover { color: var(--hatan-primary); }

.scene-header__cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1rem; height: 1rem; padding-inline: 0.2rem;
  background-color: var(--hatan-primary); color: var(--hatan-primary-fg);
  border-radius: var(--hatan-radius-full); font-size: 0.6rem; font-weight: 600; line-height: 1;
}

.scene-header__hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 2rem; height: 2rem;
  background: none; border: none; cursor: pointer; padding: 0.25rem;
}
.scene-header__hamburger span {
  display: block; width: 100%; height: 1px;
  background-color: var(--hatan-foreground);
  transition: transform 300ms ease, opacity 300ms ease;
}

@media (max-width:767px) {
  .scene-header__nav {
    display: none; position: absolute; top: 100%; inset-inline: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background-color: hsla(22,23%,8%,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 1rem;
    transform-origin: top center;
  }
  .scene-header__nav.is-open {
    display: flex;
    animation: hatan-nav-open 220ms cubic-bezier(0.22,1,0.36,1) forwards;
  }
  .scene-header__nav.is-closing {
    display: flex;
    animation: hatan-nav-close 180ms ease forwards;
  }
  @keyframes hatan-nav-open {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes hatan-nav-close {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
  }
  .scene-header__nav a { padding: 0.75rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.9rem; }
  .scene-header__hamburger { display: flex; }
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.scene-hero {
  min-height: 80vh; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem 2rem; position: relative;
}
@media (min-width:640px) { .scene-hero { padding-inline: 1.5rem; } }
@media (min-width:1024px) { .scene-hero { padding-inline: 2rem; } }

.scene-hero__inner {
  max-width: 56rem; margin-inline: auto;
  text-align: center; position: relative; z-index: 10;
}

.scene-hero__title {
  font-family: var(--hatan-font-serif);
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 700; line-height: 1.1;
  color: var(--hatan-foreground);
  margin-bottom: 1.25rem; text-wrap: balance;
  opacity: 0; transform: translateY(20px);
  animation: hero-fade-up 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
}
.lang-ar .scene-hero__title, [dir="rtl"] .scene-hero__title {
  font-family: var(--hatan-font-ar-serif); letter-spacing: 0;
}

.scene-hero__phrase {
  font-size: 0.75rem; color: hsla(32,43%,92%,0.6);
  letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 3.5rem; min-height: 1.2em; overflow: hidden;
  opacity: 0; animation: hero-fade-up 0.8s ease 0.6s forwards;
}
.lang-ar .scene-hero__phrase, [dir="rtl"] .scene-hero__phrase { font-family: var(--hatan-font-ar-sans); }

.scene-hero__phrase-text { display: inline-block; transition: opacity 0.4s ease, transform 0.4s ease; }
.scene-hero__phrase-text.is-entering { opacity: 0; transform: translateY(12px); }
.scene-hero__phrase-text.is-active   { opacity: 1; transform: translateY(0); }
.scene-hero__phrase-text.is-leaving  { opacity: 0; transform: translateY(-12px); }

.scene-hero__cta {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 2.25rem; border-radius: var(--hatan-radius-full);
  border: 1px solid hsla(32,10%,68%,0.15);
  color: hsla(30,20%,65%,0.6); font-size: 0.875rem; letter-spacing: 0.05em;
  transition: color 300ms ease, border-color 300ms ease;
  opacity: 0; animation: hero-fade-up 0.7s ease 0.8s forwards;
}
.scene-hero__cta:hover { color: var(--hatan-foreground); border-color: hsla(32,10%,68%,0.35); }
.scene-hero__cta svg { width: 1rem; height: 1rem; }

@keyframes hero-fade-up { to { opacity: 1; transform: translateY(0); } }

/* ── Products Section ──────────────────────────────────────────────────────── */
.scene-products {
  max-width: 80rem; margin-inline: auto;
  padding-inline: 1rem; padding-top: 5rem;
}
@media (min-width:640px) { .scene-products { padding-inline: 1.5rem; } }
@media (min-width:1024px) { .scene-products { padding-inline: 2rem; } }

.scene-products__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }

.scene-products__title { font-family: var(--hatan-font-serif); font-size: 1.5rem; color: hsla(32,10%,68%,0.8); font-weight: 400; }
.lang-ar .scene-products__title, [dir="rtl"] .scene-products__title { font-family: var(--hatan-font-ar-serif); }

.scene-products__see-all {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: hsla(30,20%,65%,0.5); display: inline-flex; align-items: center; gap: 0.375rem;
  transition: color 200ms ease;
}
.scene-products__see-all:hover { color: var(--hatan-primary); }
.scene-products__see-all svg { width: 0.75rem; height: 0.75rem; transition: transform 200ms ease; }
.scene-products__see-all:hover svg { transform: translateX(2px); }
[dir="rtl"] .scene-products__see-all:hover svg { transform: translateX(-2px); }

.scene-products__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width:640px) { .scene-products__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px) { .scene-products__grid { grid-template-columns: repeat(3,1fr); } }

/* ── Product Card ──────────────────────────────────────────────────────────── */
.product-card { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.product-card.is-visible { opacity: 1; transform: translateY(0); }

.product-card__link { display: block; border-radius: var(--hatan-radius-2xl); }
.product-card__link:focus-visible { outline: 2px solid var(--hatan-primary); outline-offset: 3px; }

.product-card__media {
  position: relative; aspect-ratio: 3/4;
  overflow: hidden; border-radius: var(--hatan-radius-2xl);
}

.product-card__image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.product-card__link:hover .product-card__image { transform: scale(1.04); }

.product-card__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,var(--hatan-overlay-opacity,0.4)) 40%, transparent 100%);
  pointer-events: none;
}

.product-card__stock-badge { position: absolute; top: 1rem; inset-inline-start: 1rem; inset-inline-end: 1rem; }

.product-card__out-of-stock {
  display: inline-block;
  background-color: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6); font-size: 0.625rem;
  padding: 0.25rem 0.75rem; border-radius: var(--hatan-radius-full);
  letter-spacing: 0.2em; text-transform: uppercase;
}

.product-card__meta {
  position: absolute; top: 1rem; inset-inline-end: 1rem;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.25rem; opacity: 0; transition: opacity 500ms ease;
}
.product-card__link:hover .product-card__meta { opacity: 1; }

.product-card__meta-item {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5); font-family: var(--hatan-font-sans);
}

.product-card__text { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem 1.25rem 1.5rem; }

.product-card__flavor {
  font-size: 0.6875rem; color: hsla(32,43%,92%,0.8); line-height: 1.4;
  margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic; font-family: var(--hatan-font-sans);
}
.lang-ar .product-card__flavor, [dir="rtl"] .product-card__flavor {
  font-family: var(--hatan-font-ar-sans); font-style: normal;
}

.product-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }

.product-card__name {
  font-family: var(--hatan-font-serif); font-size: 1.15rem;
  line-height: 1.3; color: rgba(255,255,255,0.9); font-weight: 400;
  transition: color 300ms ease;
}
.lang-ar .product-card__name, [dir="rtl"] .product-card__name { font-family: var(--hatan-font-ar-serif); }
.product-card__link:hover .product-card__name { color: hsla(32,43%,92%,0.9); }

.product-card__price {
  font-size: 0.75rem; color: rgba(255,255,255,0.70);
  white-space: nowrap; flex-shrink: 0; margin-bottom: 0.125rem;
  letter-spacing: 0.05em; font-family: var(--hatan-font-sans);
}

.product-card-skeleton {
  aspect-ratio: 3/4; border-radius: var(--hatan-radius-2xl);
  background-color: rgba(255,255,255,0.02);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ── Story Section ─────────────────────────────────────────────────────────── */
.scene-story {
  max-width: 80rem; margin-inline: auto;
  padding-inline: 1rem; padding-top: 6rem;
}
@media (min-width:640px) { .scene-story { padding-inline: 1.5rem; } }
@media (min-width:1024px) { .scene-story { padding-inline: 2rem; } }

.scene-story__block {
  max-width: 28rem;
  border-inline-start: 1px solid hsla(32,43%,92%,0.2);
  padding-inline-start: 2rem;
}

.scene-story__overline {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.25em;
  color: hsla(32,43%,92%,0.5); margin-bottom: 1.25rem;
  display: block; font-family: var(--hatan-font-sans);
}
.lang-ar .scene-story__overline, [dir="rtl"] .scene-story__overline { font-family: var(--hatan-font-ar-sans); }

.scene-story__body {
  display: flex; flex-direction: column; gap: 1.25rem;
  font-size: 1rem; color: hsla(30,20%,65%,0.8); line-height: 1.85;
  font-family: var(--hatan-font-sans);
}
.lang-ar .scene-story__body, [dir="rtl"] .scene-story__body { font-family: var(--hatan-font-ar-sans); line-height: 1.95; }

/* ── CTA Section ───────────────────────────────────────────────────────────── */
.scene-cta-section {
  max-width: 80rem; margin-inline: auto;
  padding-inline: 1rem; padding-top: 6rem; padding-bottom: 4rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
@media (min-width:640px) { .scene-cta-section { padding-inline: 1.5rem; } }
@media (min-width:1024px) { .scene-cta-section { padding-inline: 2rem; } }
.scene-cta-section.is-visible { opacity: 1; transform: translateY(0); }

.scene-cta-section__box {
  position: relative; overflow: hidden; text-align: center;
  padding: 5rem 2rem; border-radius: 1.5rem;
}
@media (min-width:768px) { .scene-cta-section__box { padding: 7rem 5rem; } }

.scene-cta-section__glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, hsla(32,43%,92%,0.05), transparent, transparent);
  pointer-events: none;
}

.scene-cta-section__title {
  font-family: var(--hatan-font-serif);
  font-size: clamp(2.25rem,6vw,4.5rem);
  color: var(--hatan-foreground); line-height: 1.3;
  margin-bottom: 1.25rem; position: relative;
}
.lang-ar .scene-cta-section__title, [dir="rtl"] .scene-cta-section__title { font-family: var(--hatan-font-ar-serif); }

.scene-cta-section__sub {
  font-size: 0.875rem; color: hsla(30,20%,65%,0.7);
  max-width: 28rem; margin-inline: auto; margin-bottom: 3rem;
  line-height: 1.75; font-family: var(--hatan-font-sans); position: relative;
}
.lang-ar .scene-cta-section__sub, [dir="rtl"] .scene-cta-section__sub { font-family: var(--hatan-font-ar-sans); }

.scene-cta-section__link {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 2.25rem; border-radius: var(--hatan-radius-full);
  border: 1px solid hsla(32,10%,68%,0.15);
  color: hsla(30,20%,65%,0.6); font-size: 0.875rem; letter-spacing: 0.05em;
  transition: color 300ms ease, border-color 300ms ease;
  font-family: var(--hatan-font-sans);
}
.scene-cta-section__link:hover { color: var(--hatan-foreground); border-color: hsla(32,10%,68%,0.35); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.scene-footer {
  position: relative; z-index: 10;
  border-top: 1px solid rgba(255,255,255,0.06); margin-top: 2rem;
}

.scene-footer__inner {
  max-width: 80rem; margin-inline: auto;
  padding-inline: 1rem; padding-top: 4rem; padding-bottom: 2.5rem;
}
@media (min-width:640px) { .scene-footer__inner { padding-inline: 1.5rem; } }
@media (min-width:1024px) { .scene-footer__inner { padding-inline: 2rem; } }

.scene-footer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3.5rem; }
@media (min-width:768px) { .scene-footer__grid { grid-template-columns: repeat(3,1fr); } }

.scene-footer__brand-name {
  font-family: var(--hatan-font-serif); font-size: 1.125rem; font-weight: 700;
  letter-spacing: 0.25em; color: hsla(32,10%,68%,0.65); margin-bottom: 1rem; display: block;
}
.lang-ar .scene-footer__brand-name { font-family: var(--hatan-font-ar-serif); }

.scene-footer__tagline {
  font-size: 0.875rem; color: hsla(32,10%,68%,0.65);
  line-height: 1.85; max-width: 18rem; font-family: var(--hatan-font-sans);
}
.lang-ar .scene-footer__tagline { font-family: var(--hatan-font-ar-sans); }

.scene-footer__section-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.25em;
  color: hsla(32,10%,68%,0.35); margin-bottom: 1.5rem;
  display: block; font-family: var(--hatan-font-sans);
}
.lang-ar .scene-footer__section-label { font-family: var(--hatan-font-ar-sans); }

.scene-footer__nav-list { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
.scene-footer__nav-list a { font-size: 0.875rem; color: hsla(32,10%,68%,0.65); transition: color 200ms ease; font-family: var(--hatan-font-sans); }
.lang-ar .scene-footer__nav-list a { font-family: var(--hatan-font-ar-sans); }
.scene-footer__nav-list a:hover { color: var(--hatan-primary); }

.scene-footer__whatsapp { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: hsla(32,10%,68%,0.65); transition: color 200ms ease; font-family: var(--hatan-font-sans); }
.scene-footer__whatsapp:hover { color: var(--hatan-primary); }
.scene-footer__whatsapp svg { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; opacity: 0.6; }

/* Trust row */
.scene-footer__trust-row { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem; margin-bottom: 1.5rem; }
.scene-footer__trust-items { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 0.5rem; }
.scene-footer__trust-item { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: hsla(32,10%,68%,0.35); font-family: var(--hatan-font-sans); }
.lang-ar .scene-footer__trust-item { font-family: var(--hatan-font-ar-sans); }
.scene-footer__trust-dot { color: rgba(255,255,255,0.1); font-size: 0.75rem; }

/* Marks row */
.scene-footer__marks-row {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 2rem; margin-bottom: 2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem;
}
.scene-footer__marks-panel {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.25rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--hatan-radius);
  background: rgba(8, 5, 2, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--hatan-marks-color);
}
.scene-footer__mark-svg { height: 2rem; width: auto; display: block; flex: 0 0 auto; }
@media (max-width: 600px) { .scene-footer__mark-svg { height: 1.625rem; } }
.scene-footer__mark-link { display: inline-flex; align-items: center; text-decoration: none; color: inherit; transition: opacity 200ms ease; }
.scene-footer__mark-link:hover { opacity: 0.7; }

/* Copyright */
.scene-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.05); padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.scene-footer__copyright { font-size: 0.6875rem; color: hsla(32,10%,68%,0.3); font-family: var(--hatan-font-sans); }
.lang-ar .scene-footer__copyright { font-family: var(--hatan-font-ar-sans); }
.scene-footer__admin-link { font-size: 0.625rem; color: rgba(255,255,255,0.08); margin-inline-start: auto; transition: color 200ms ease; }
.scene-footer__admin-link:hover { color: rgba(255,255,255,0.2); }

/* ── Scroll Reveal ─────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.scene-notice { padding: 1rem 1.5rem; border-radius: var(--hatan-radius); font-size: 0.875rem; margin-bottom: 1.5rem; font-family: var(--hatan-font-sans); }
.scene-notice--error { background-color: hsla(0,60%,45%,0.1); border: 1px solid hsla(0,60%,45%,0.2); color: hsl(0,60%,70%); }
.scene-notice--success { background-color: hsla(130,40%,40%,0.1); border: 1px solid hsla(130,40%,40%,0.2); color: hsl(130,40%,70%); }

/* ── 404 page ──────────────────────────────────────────────────────────────── */
.hatan-404 { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.hatan-404__number { font-family: var(--hatan-font-serif); font-size: 5rem; color: hsla(32,10%,68%,0.15); line-height: 1; margin-bottom: 1rem; }
.hatan-404__title { font-family: var(--hatan-font-serif); font-size: 1.5rem; color: var(--hatan-foreground); margin-bottom: 0.5rem; }
.lang-ar .hatan-404__title { font-family: var(--hatan-font-ar-serif); }
.hatan-404__message { font-size: 0.875rem; color: hsla(30,20%,65%,0.6); margin-bottom: 2rem; font-family: var(--hatan-font-sans); }
.lang-ar .hatan-404__message { font-family: var(--hatan-font-ar-sans); }
.hatan-404__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ── Static pages ──────────────────────────────────────────────────────────── */
.hatan-page-header { margin-bottom: 2rem; }
.hatan-page-header__title { font-family: var(--hatan-font-serif); font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 400; color: var(--hatan-foreground); }
.lang-ar .hatan-page-header__title, [dir="rtl"] .hatan-page-header__title { font-family: var(--hatan-font-ar-serif); }
.hatan-page-content { padding: 2rem; line-height: 1.85; color: hsla(30,20%,65%,0.8); font-family: var(--hatan-font-sans); }
.lang-ar .hatan-page-content, [dir="rtl"] .hatan-page-content { font-family: var(--hatan-font-ar-sans); line-height: 1.95; }
.hatan-page-content p { margin-bottom: 1.25rem; }
.hatan-page-content h2, .hatan-page-content h3 { font-family: var(--hatan-font-serif); color: var(--hatan-foreground); margin-block: 1.5rem 0.75rem; }
.lang-ar .hatan-page-content h2, .lang-ar .hatan-page-content h3 { font-family: var(--hatan-font-ar-serif); }

/* Bilingual inner-page blocks */
.lang-en .hatan-bilingual-ar { display: none; }
.lang-ar .hatan-bilingual-en { display: none; }
.hatan-bilingual-ar { direction: rtl; text-align: right; }
.hatan-bilingual-en { direction: ltr; text-align: left; }
.hatan-faq-item { border-bottom: 1px solid rgba(255,255,255,0.06); padding-block: 1.25rem; }
.hatan-faq-item h3 { font-size: 1rem; font-weight: 500; color: var(--hatan-foreground); margin-block: 0 0.6rem; }
.hatan-faq-item p { margin: 0; }

/* ── Hero subtitle ─────────────────────────────────────────────────────────── */
.scene-hero__sub {
  font-size: 0.9375rem; color: hsla(30,20%,65%,0.65); line-height: 1.7;
  max-width: 36rem; margin-inline: auto; margin-bottom: 2.5rem;
  font-family: var(--hatan-font-sans);
  opacity: 0; animation: hero-fade-up 0.7s ease 0.75s forwards;
}
.lang-ar .scene-hero__sub, [dir="rtl"] .scene-hero__sub {
  font-family: var(--hatan-font-ar-sans); line-height: 1.95;
}

/* ── Story CTA ─────────────────────────────────────────────────────────────── */
.scene-story__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: hsla(32,43%,92%,0.55); transition: color 250ms ease;
  font-family: var(--hatan-font-sans);
}
.scene-story__cta:hover { color: var(--hatan-foreground); }
.scene-story__cta svg { width: 0.75rem; height: 0.75rem; }
.lang-ar .scene-story__cta, [dir="rtl"] .scene-story__cta { font-family: var(--hatan-font-ar-sans); letter-spacing: 0; }

/* ── Arabic typography resets ──────────────────────────────────────────────── */
/* Arabic script is naturally spaced; letter-spacing and text-transform: uppercase
   are visually broken in RTL and must be reset to zero / none on every element
   that uses a non-zero value in LTR mode.                                       */

/* Header */
.lang-ar .scene-header__logo,
[dir="rtl"] .scene-header__logo { letter-spacing: 0; text-transform: none; }

.lang-ar .scene-header__nav a,
[dir="rtl"] .scene-header__nav a { letter-spacing: 0; }

/* Hero */
.lang-ar .scene-hero__phrase,
[dir="rtl"] .scene-hero__phrase { letter-spacing: 0; text-transform: none; }

.lang-ar .scene-hero__cta,
[dir="rtl"] .scene-hero__cta { letter-spacing: 0; }

/* Products */
.lang-ar .scene-products__see-all,
[dir="rtl"] .scene-products__see-all { letter-spacing: 0; text-transform: none; }

.lang-ar .product-card__out-of-stock,
[dir="rtl"] .product-card__out-of-stock { letter-spacing: 0; text-transform: none; }

.lang-ar .product-card__meta-item,
[dir="rtl"] .product-card__meta-item { letter-spacing: 0; text-transform: none; }

.lang-ar .product-card__price,
[dir="rtl"] .product-card__price { letter-spacing: 0; }

/* Story */
.lang-ar .scene-story__overline,
[dir="rtl"] .scene-story__overline { letter-spacing: 0; text-transform: none; }

/* CTA section */
.lang-ar .scene-cta-section__link,
[dir="rtl"] .scene-cta-section__link { letter-spacing: 0; }

/* Footer */
.lang-ar .scene-footer__brand-name,
[dir="rtl"] .scene-footer__brand-name { letter-spacing: 0; }

.lang-ar .scene-footer__section-label,
[dir="rtl"] .scene-footer__section-label { letter-spacing: 0; text-transform: none; }

.lang-ar .scene-footer__trust-item,
[dir="rtl"] .scene-footer__trust-item { letter-spacing: 0; text-transform: none; }

/* ── Inner-page shared ─────────────────────────────────────────────────────── */
.hatan-glass { background: var(--hatan-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--hatan-radius); }
.hatan-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--hatan-background);
}
.hatan-inner-wrap { padding-block: 3rem 4rem; }
.hatan-inner-wrap--narrow { max-width: 56rem; margin-inline: auto; }

/* ── Post grid / cards (archive, search) ───────────────────────────────────── */
.hatan-archive-header { margin-bottom: 2.5rem; }
.hatan-archive-header__title { font-family: var(--hatan-font-serif); font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 400; color: var(--hatan-foreground); margin-bottom: 0.75rem; }
.lang-ar .hatan-archive-header__title, [dir="rtl"] .hatan-archive-header__title { font-family: var(--hatan-font-ar-serif); }
.hatan-archive-header__desc { font-size: 0.9375rem; color: hsla(30,20%,65%,0.7); font-family: var(--hatan-font-sans); }
.lang-ar .hatan-archive-header__desc, [dir="rtl"] .hatan-archive-header__desc { font-family: var(--hatan-font-ar-sans); }

.hatan-post-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width:640px) { .hatan-post-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px) { .hatan-post-grid { grid-template-columns: repeat(3,1fr); } }

.hatan-post-card { border-radius: var(--hatan-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 300ms ease, box-shadow 300ms ease; }
.hatan-post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.hatan-post-card__image-link { display: block; aspect-ratio: 16/9; overflow: hidden; }
.hatan-post-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.hatan-post-card:hover .hatan-post-card__image { transform: scale(1.03); }
.hatan-post-card__body { padding: 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.hatan-post-card__date { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsla(32,43%,92%,0.4); font-family: var(--hatan-font-sans); }
.lang-ar .hatan-post-card__date, [dir="rtl"] .hatan-post-card__date { font-family: var(--hatan-font-ar-sans); letter-spacing: 0; }
.hatan-post-card__title { font-family: var(--hatan-font-serif); font-size: 1.125rem; font-weight: 400; color: var(--hatan-foreground); line-height: 1.4; }
.hatan-post-card__title a { color: inherit; }
.hatan-post-card__title a:hover { color: var(--hatan-primary); }
.lang-ar .hatan-post-card__title, [dir="rtl"] .hatan-post-card__title { font-family: var(--hatan-font-ar-serif); }
.hatan-post-card__excerpt { font-size: 0.875rem; color: hsla(30,20%,65%,0.65); line-height: 1.7; font-family: var(--hatan-font-sans); }
.lang-ar .hatan-post-card__excerpt, [dir="rtl"] .hatan-post-card__excerpt { font-family: var(--hatan-font-ar-sans); line-height: 1.95; }

.hatan-no-results { padding: 2rem; text-align: center; color: hsla(30,20%,65%,0.5); font-family: var(--hatan-font-sans); border-radius: var(--hatan-radius); }
.hatan-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.hatan-pagination .nav-links { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hatan-pagination .page-numbers { padding: 0.5rem 0.875rem; border-radius: var(--hatan-radius-sm); border: 1px solid rgba(255,255,255,0.07); color: hsla(30,20%,65%,0.6); font-size: 0.875rem; transition: border-color 200ms, color 200ms; }
.hatan-pagination .page-numbers.current, .hatan-pagination .page-numbers:hover { border-color: hsla(32,10%,68%,0.3); color: var(--hatan-foreground); }

/* ── Single post ───────────────────────────────────────────────────────────── */
.hatan-single-post { }
.hatan-single-post__header { margin-bottom: 2rem; }
.hatan-single-post__thumbnail { margin-bottom: 2rem; border-radius: var(--hatan-radius-lg); overflow: hidden; }
.hatan-single-post__thumbnail img { width: 100%; height: auto; display: block; }
.hatan-single-post__meta { margin-bottom: 1rem; }
.hatan-single-post__date { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsla(32,43%,92%,0.4); font-family: var(--hatan-font-sans); }
.lang-ar .hatan-single-post__date, [dir="rtl"] .hatan-single-post__date { font-family: var(--hatan-font-ar-sans); letter-spacing: 0; }
.hatan-single-post__title { font-family: var(--hatan-font-serif); font-size: clamp(1.75rem,4vw,2.75rem); font-weight: 400; color: var(--hatan-foreground); line-height: 1.35; }
.lang-ar .hatan-single-post__title, [dir="rtl"] .hatan-single-post__title { font-family: var(--hatan-font-ar-serif); }
.hatan-single-post__content { padding: 2rem; line-height: 1.85; color: hsla(30,20%,65%,0.8); font-family: var(--hatan-font-sans); }
.lang-ar .hatan-single-post__content, [dir="rtl"] .hatan-single-post__content { font-family: var(--hatan-font-ar-sans); line-height: 1.95; }
.hatan-single-post__content h2, .hatan-single-post__content h3, .hatan-single-post__content h4 { font-family: var(--hatan-font-serif); color: var(--hatan-foreground); margin-block: 1.5rem 0.75rem; }
.lang-ar .hatan-single-post__content h2, .lang-ar .hatan-single-post__content h3, .lang-ar .hatan-single-post__content h4 { font-family: var(--hatan-font-ar-serif); }
.hatan-single-post__content p { margin-bottom: 1.25rem; }
.hatan-single-post__footer { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.06); }
.hatan-single-post__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.hatan-tag { display: inline-flex; padding: 0.3rem 0.75rem; border-radius: var(--hatan-radius-full); border: 1px solid rgba(255,255,255,0.07); font-size: 0.75rem; color: hsla(30,20%,65%,0.55); transition: border-color 200ms, color 200ms; }
.hatan-tag:hover { border-color: hsla(32,10%,68%,0.3); color: var(--hatan-foreground); }
.hatan-post-nav { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.hatan-post-nav a { color: hsla(30,20%,65%,0.6); transition: color 200ms; }
.hatan-post-nav a:hover { color: var(--hatan-foreground); }
.hatan-page-links { margin-top: 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.875rem; color: hsla(30,20%,65%,0.6); }
.hatan-comments-wrap { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.06); }

/* ── Reveal (inner-page alias matching archive/single templates) ────────────── */
.hatan-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.hatan-reveal-child { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.hatan-reveal.is-visible { opacity: 1; transform: translateY(0); }
.hatan-reveal-child.is-visible { opacity: 1; transform: translateY(0); }

/* =============================================================================
   LIGHT MODE  — body.hatan-mode-light
   Overrides dark-theme hardcoded colors for use with bright/white backgrounds.
   ============================================================================= */
body.hatan-mode-light {
  --hatan-foreground:       hsl(22, 25%, 15%);
  --hatan-muted-fg:         hsl(30, 18%, 28%);
  --hatan-card-foreground:  hsl(22, 25%, 15%);
  --hatan-secondary-fg:     hsl(22, 25%, 15%);
  --hatan-text-primary:     hsl(22, 25%, 15%);
  --hatan-text-secondary:   hsl(30, 18%, 28%);
  --hatan-text-tertiary:    hsla(30, 18%, 28%, 0.5);
  --hatan-card:             hsla(32, 43%, 97%, 0.6);
  --hatan-glass-bg:         hsla(32, 43%, 97%, 0.5);
  --hatan-glass-border:     rgba(0, 0, 0, 0.09);
  --hatan-border:           rgba(0, 0, 0, 0.10);
  --hatan-input:            rgba(0, 0, 0, 0.10);
  --hatan-secondary:        hsla(32, 30%, 92%, 0.6);
}

/* Header */
body.hatan-mode-light .scene-header.is-scrolled {
  background-color: hsla(32, 43%, 97%, 0.92);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.hatan-mode-light .scene-header__logo { color: hsla(22, 25%, 15%, 0.75); }
body.hatan-mode-light .scene-header__nav a { color: hsla(22, 25%, 15%, 0.75); }
body.hatan-mode-light .scene-header__nav a:hover { color: hsl(22, 25%, 8%); }
body.hatan-mode-light .scene-header__lang-btn { color: hsla(22, 25%, 15%, 0.50); }
body.hatan-mode-light .scene-header__lang-btn:hover { color: hsl(22, 25%, 10%); }
body.hatan-mode-light .scene-header__cart-btn { color: hsla(22, 25%, 15%, 0.70); }
body.hatan-mode-light .scene-header__cart-btn:hover { color: hsl(22, 25%, 8%); }
body.hatan-mode-light .scene-header__hamburger span { background-color: hsl(22, 25%, 15%); }

/* Mobile dropdown menu */
body.hatan-mode-light .scene-header__nav {
  background-color: hsla(32, 43%, 97%, 0.97);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.hatan-mode-light .scene-header__nav a { border-bottom-color: rgba(0, 0, 0, 0.05); }

/* Hero */
body.hatan-mode-light .scene-hero__title { color: hsl(22, 25%, 12%); }
body.hatan-mode-light .scene-hero__phrase-text { color: hsla(22, 25%, 15%, 0.65); }
body.hatan-mode-light .scene-hero__cta {
  color: hsla(22, 25%, 15%, 0.70);
  border-color: hsla(22, 25%, 15%, 0.22);
}
body.hatan-mode-light .scene-hero__cta:hover {
  color: hsl(22, 25%, 8%);
  border-color: hsla(22, 25%, 15%, 0.45);
  background-color: rgba(0, 0, 0, 0.04);
}
body.hatan-mode-light .scene-hero__scroll-hint { color: hsla(22, 25%, 15%, 0.35); }

/* Products rail */
body.hatan-mode-light .scene-products__label { color: hsla(22, 25%, 15%, 0.50); }
body.hatan-mode-light .scene-products__title { color: hsla(22, 25%, 15%, 0.85); }
body.hatan-mode-light .scene-products__view-all { color: hsla(22, 25%, 15%, 0.55); }
body.hatan-mode-light .scene-products__view-all:hover { color: hsl(22, 25%, 8%); }
body.hatan-mode-light .product-card__name { color: hsla(22, 25%, 15%, 0.90); }
body.hatan-mode-light .product-card__price { color: hsla(22, 25%, 15%, 0.85); }
body.hatan-mode-light .product-card__excerpt { color: hsla(22, 25%, 15%, 0.55); }
body.hatan-mode-light .product-card__category { color: hsla(22, 25%, 15%, 0.50); }

/* Story section */
body.hatan-mode-light .scene-story__label { color: hsla(22, 25%, 15%, 0.50); }
body.hatan-mode-light .scene-story__title { color: hsl(22, 25%, 12%); }
body.hatan-mode-light .scene-story__text { color: hsla(22, 25%, 15%, 0.75); }
body.hatan-mode-light .scene-story__cta {
  color: hsla(22, 25%, 15%, 0.70);
  border-color: hsla(22, 25%, 15%, 0.22);
}
body.hatan-mode-light .scene-story__cta:hover {
  color: hsl(22, 25%, 8%);
  border-color: hsla(22, 25%, 15%, 0.45);
}

/* CTA section */
body.hatan-mode-light .scene-cta-section__label { color: hsla(22, 25%, 15%, 0.65); }
body.hatan-mode-light .scene-cta-section__link {
  color: hsla(22, 25%, 15%, 0.70);
  border-color: hsla(22, 25%, 15%, 0.22);
}
body.hatan-mode-light .scene-cta-section__link:hover {
  color: hsl(22, 25%, 8%);
  border-color: hsla(22, 25%, 15%, 0.45);
}

/* Footer */
body.hatan-mode-light .scene-footer { border-top-color: rgba(0, 0, 0, 0.07); }
body.hatan-mode-light .scene-footer__brand-name { color: hsla(22, 25%, 12%, 0.80); }
body.hatan-mode-light .scene-footer__tagline { color: hsla(22, 25%, 15%, 0.60); }
body.hatan-mode-light .scene-footer__section-label { color: hsla(22, 25%, 15%, 0.40); }
body.hatan-mode-light .scene-footer__nav-list a { color: hsla(22, 25%, 15%, 0.65); }
body.hatan-mode-light .scene-footer__nav-list a:hover { color: hsl(22, 25%, 8%); }
body.hatan-mode-light .scene-footer__whatsapp { color: hsla(22, 25%, 15%, 0.65); }
body.hatan-mode-light .scene-footer__whatsapp:hover { color: hsl(22, 25%, 8%); }
body.hatan-mode-light .scene-footer__trust-row { border-top-color: rgba(0, 0, 0, 0.07); }
body.hatan-mode-light .scene-footer__trust-item { color: hsla(22, 25%, 15%, 0.40); }
body.hatan-mode-light .scene-footer__trust-dot { color: rgba(0, 0, 0, 0.12); }
body.hatan-mode-light .scene-footer__marks-row { border-top-color: rgba(0, 0, 0, 0.07); }
body.hatan-mode-light .scene-footer__marks-panel {
  --hatan-marks-color: rgba(30, 18, 8, 0.72);
  background: rgba(30, 18, 8, 0.07);
  border-color: rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.hatan-mode-light { --hatan-select-bg: hsl(32, 43%, 97%); }
body.hatan-mode-light .scene-footer__legal { border-top-color: rgba(0, 0, 0, 0.07); }
body.hatan-mode-light .scene-footer__copyright { color: hsla(22, 25%, 15%, 0.35); }
body.hatan-mode-light .scene-footer__admin-link { color: rgba(0, 0, 0, 0.10); }
body.hatan-mode-light .scene-footer__admin-link:hover { color: rgba(0, 0, 0, 0.28); }

/* Single post / archive / inner pages */
body.hatan-mode-light .hatan-single-post__content { color: hsla(22, 25%, 15%, 0.78); }
body.hatan-mode-light .hatan-single-post__footer { border-top-color: rgba(0, 0, 0, 0.07); }
body.hatan-mode-light .hatan-tag { border-color: rgba(0, 0, 0, 0.10); color: hsla(22, 25%, 15%, 0.55); }
body.hatan-mode-light .hatan-tag:hover { border-color: rgba(0, 0, 0, 0.25); color: hsl(22, 25%, 10%); }
body.hatan-mode-light .hatan-post-nav a { color: hsla(22, 25%, 15%, 0.60); }
body.hatan-mode-light .hatan-post-nav a:hover { color: hsl(22, 25%, 8%); }
body.hatan-mode-light .hatan-page-links { color: hsla(22, 25%, 15%, 0.60); }
body.hatan-mode-light .hatan-comments-wrap { border-top-color: rgba(0, 0, 0, 0.07); }