/* =====================================================================
   HASAD — luxury layer for the main site (same palette as the About film)
   ===================================================================== */
:root {
  --lux: 'Cormorant Garamond', 'Amiri', serif;
  --c0: #fffdf8; --c1: #faf7ef; --c2: #f4efe3; --c3: #ebe4d3; --c4: #dcd3bd; --line: #e6dfcc;
  --g9: #1a2813; --g8: #2c4320; --g7: #395528; --g6: #4e6d37; --g5: #6e8e53; --g1: #e8ecdc;
  --gold: #cfa968; --gold-d: #96773a; --amber: #d98a3d; --terracotta: #b8653a; --cream: #efe8d6;
  --muted: #7a7766; --ink: #1d2416; --ink2: #3d4434;
  --shadow: 0 30px 60px -36px rgba(31, 46, 23, .55);
}
body { background: var(--c2); }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- typography ---------- */
.lux { font-family: var(--lux) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.005em; }
[dir='rtl'] .lux { font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0; }
.eyebrow { color: var(--gold-d); letter-spacing: .2em; }
[dir='rtl'] .eyebrow { letter-spacing: .04em; font-size: 12.5px; }
.eyebrow::before { content: ''; display: inline-block; width: 26px; height: 1px; background: currentColor; margin-inline-end: 10px; vertical-align: middle; opacity: .8; }
.h2.lux { font-size: clamp(34px, 4.2vw, 58px); color: var(--g9); }
.contact-info .h2.lux { color: var(--cream); }
.contact-info .eyebrow { color: var(--gold) !important; opacity: 1 !important; }
.lead { color: var(--muted); }

/* ---------- buttons ---------- */
.btn-primary { background: var(--g8); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(207, 169, 104, 0); transition: background .3s, box-shadow .3s, color .3s, transform .3s; }
.btn-primary:hover { background: var(--g9); color: #fff; box-shadow: inset 0 0 0 1px rgba(207, 169, 104, .55), 0 14px 30px -18px rgba(26, 40, 19, .8); }
.btn-ghost { border-color: var(--c4); }
.btn-ghost:hover { border-color: var(--gold); color: var(--g9); }
.btn-film { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding-inline: 6px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--g9); background: rgba(255, 253, 248, .6); border: 1px solid rgba(207, 169, 104, .5); backdrop-filter: blur(8px); transition: background .3s, border-color .3s; }
.btn-film:hover { background: rgba(255, 253, 248, .9); border-color: var(--gold); }
.btn-film .pc { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--g8); color: var(--cream); font-size: 12px; position: relative; }
.btn-film .pc::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); animation: pulseRing 2.2s ease-out infinite; }
.btn-film .pc .i { fill: currentColor; stroke: none; margin-inline-start: 2px; }
[dir='rtl'] .btn-film .pc .i { transform: scaleX(-1); margin: 0 2px 0 0; }
@keyframes pulseRing { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.btn-gold { background: var(--gold); color: var(--g9); }
.btn-gold:hover { background: #dcbb7f; }

/* ---------- header ---------- */
.logo-text b { font-family: var(--lux); font-weight: 600; font-size: 23px; letter-spacing: .04em; }
[dir='rtl'] .logo-text b { font-weight: 700; font-size: 24px; letter-spacing: 0; }
.logo-text small { color: var(--gold-d); }
.header.scrolled { background: rgba(250, 247, 239, .88); box-shadow: 0 1px 0 rgba(207, 169, 104, .35); }
.nav a::after { background: var(--gold); height: 1px; }
.pill-select, .lang-btn, .quote-btn, .menu-btn { background: rgba(255, 253, 248, .75); border-color: rgba(207, 169, 104, .35); }
.badge-count { background: var(--terracotta); }

/* ---------- hero ---------- */
.hero-bg { filter: saturate(.95) sepia(.08) contrast(1.03); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 22px; }
[dir='rtl'] .hero-eyebrow { letter-spacing: .04em; font-size: 13px; }
.hero-eyebrow::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.hero h1.lux { font-size: clamp(46px, 6.2vw, 92px); color: var(--g9); line-height: 1.04 !important; }
[dir='rtl'] .hero h1.lux { line-height: 1.32 !important; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .lni { display: inline-block; will-change: transform; }
.hero h1 .ln:not(:first-child) { color: var(--g7); font-weight: 400 !important; }
[dir='rtl'] .hero h1 .ln:not(:first-child) { font-weight: 400 !important; }
:lang(en) .hero h1 .ln:first-child .lni { font-style: italic; }
.hero-sub { font-size: 15.5px; color: var(--ink2); }
.hero-actions { align-items: center; gap: 14px; }
.hcard-ico { color: var(--gold-d); }
.glass { background: rgba(250, 247, 239, .72); border-color: rgba(255, 255, 255, .7); }
.sheet { background: var(--c1); }

/* ---------- range + stats ---------- */
.range-card { background: linear-gradient(160deg, var(--g8), var(--g9)); }
.range-card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(207, 169, 104, .25); border-radius: 16px; pointer-events: none; }
.range-num { color: var(--gold); font-family: var(--lux); font-size: 18px; font-style: italic; opacity: 1; }
.range-card h2.lux { font-size: 30px; color: var(--cream); }
.vcard-price { background: rgba(207, 169, 104, .22); border: 1px solid rgba(207, 169, 104, .45); color: #f6ecd5; }
.vcard h3 { font-family: var(--lux); font-size: 22px; font-weight: 600; }
[dir='rtl'] .vcard h3 { font-weight: 700; }
.vcard img { filter: saturate(.95) sepia(.06); }
.stats { background: var(--c0); border: 1px solid var(--line); box-shadow: 0 20px 40px -34px rgba(31, 46, 23, .5); }
.stat .i { color: var(--gold-d); }
.stat-val { font-family: var(--lux); font-size: 40px; font-weight: 600; letter-spacing: -.01em; }
.stat-val sup { font-family: var(--font); color: var(--gold-d); }
.feature .fi { background: var(--c3); color: var(--gold-d); }
.video-card { filter: none; }
.partners { background: linear-gradient(120deg, var(--g9), var(--g8)); }
.partners::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(207, 169, 104, .22); border-radius: 18px; pointer-events: none; }
.plogo .i { color: var(--gold); }

/* ---------- film teaser band ---------- */
.film-teaser { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; min-height: 480px; color: var(--cream);
  background: linear-gradient(to bottom, #1b2420 0%, #3f4a44 34%, #b9784b 72%, #efb36a 90%); box-shadow: var(--shadow); }
.film-teaser::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(239, 232, 214, .16); border-radius: 20px; pointer-events: none; z-index: 6; }
.ft-sun { position: absolute; z-index: 0; width: 150px; height: 150px; border-radius: 50%; left: 20%; bottom: 150px; background: radial-gradient(circle, #fbe7b5 0 40%, #d98a3d 62%, transparent 72%); box-shadow: 0 0 140px 50px rgba(217, 120, 55, .45); }
[dir='ltr'] .ft-sun { left: auto; right: 20%; }
.ft-far { position: absolute; z-index: 1; left: 0; bottom: 100px; height: 150px; width: 3200px; --far1: #6b5243; --far2: #8f6448; animation: ftFar 70s linear infinite; }
.ft-far svg { width: 3200px; height: 150px; display: block; }
.ft-far .mt1 { fill: var(--far1); } .ft-far .mt2 { fill: var(--far2); }
@keyframes ftFar { to { transform: translateX(-1600px); } }
.ft-asphalt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 104px; background: linear-gradient(#45423a, #2a2925 40%, #1b1b19); }
.ft-asphalt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(#c9b892, #8f8165); }
.ft-asphalt i { position: absolute; left: -400px; right: -400px; top: 58%; height: 5px; background: repeating-linear-gradient(90deg, rgba(240, 232, 210, .8) 0 80px, transparent 80px 180px); animation: ftDash .42s linear infinite; }
@keyframes ftDash { to { transform: translateX(-180px); } }
.ft-truck { position: absolute; z-index: 3; bottom: 26px; inset-inline-end: 5%; width: min(600px, 58%); --night: .2; --mid-b: .9; }
.ft-truck .bob { animation: ftBob .32s ease-in-out infinite alternate; }
@keyframes ftBob { to { transform: translateY(1.2px); } }
.ft-truck .spin { transform-box: view-box; animation: ftSpin .5s linear infinite; }
@keyframes ftSpin { to { transform: rotate(360deg); } }
.ft-truck .beam, .ft-truck .head-glow, .ft-truck .tail-glow { opacity: .2; }
.ft-truck .clr { opacity: .5; }
.ft-copy { position: relative; z-index: 4; padding: 56px 56px 140px; max-width: 560px; }
.ft-copy .eyebrow { color: #e9cf9a; }
.ft-copy h2 { font-size: clamp(32px, 3.8vw, 54px); color: #fff; margin: 4px 0 16px; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.ft-copy p { color: rgba(239, 232, 214, .85); font-size: 15px; line-height: 1.8; max-width: 440px; }
.ft-copy .btn { margin-top: 26px; }
.ft-copy .btn .i { fill: currentColor; stroke: none; }
[dir='rtl'] .ft-copy .btn .i { transform: scaleX(-1); }

/* ---------- catalog chrome ---------- */
.chip { border-color: var(--line); background: var(--c0); }
.chip .i { color: var(--gold-d); }
.chip.active { background: var(--g9); border-color: var(--g9); color: var(--cream); }
.chip.active .i, .chip.active small { color: var(--gold); }
.input, .select, .textarea { background: var(--c0); border-color: var(--line); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(207, 169, 104, .2); }

/* ---------- product card (premium) ---------- */
.grid { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 22px; }
.pcard { background: var(--c0); border: 1px solid var(--line); border-radius: 24px; transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s, border-color .4s; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #e0d2b0; }
.pcard-img { margin: 8px 8px 0; border-radius: 18px; aspect-ratio: 5 / 4; background: var(--c3); }
.pcard-img img { filter: saturate(.96) sepia(.05) contrast(1.03); transition: transform 1.3s cubic-bezier(.22, 1, .36, 1); }
.pcard:hover .pcard-img img { transform: scale(1.08); }
.pcard-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 40, 19, .28), transparent 45%); pointer-events: none; }
.pcard-badges { z-index: 2; }
.tag { font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; background: rgba(255, 253, 248, .92); backdrop-filter: blur(6px); }
.tag-premium { background: var(--gold); color: var(--g9); }
.tag-bestseller { background: var(--g9); color: var(--gold); }
.tag-new { background: #f3dccd; color: #8a3f1c; }
.tag-low { background: #f6e6c8; color: #82560f; }
.flag-chip { z-index: 2; }
.quick { position: absolute; z-index: 3; inset-inline: 12px; bottom: 12px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--g9);
  background: rgba(255, 253, 248, .92); backdrop-filter: blur(8px); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s cubic-bezier(.22, 1, .36, 1); }
.quick .i { color: var(--gold-d); font-size: 15px; }
.pcard:hover .quick { opacity: 1; transform: none; }
@media (hover: none) { .quick { display: none; } }
.pcard-body { padding: 14px 18px 18px; }
.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard h3 { font-family: var(--lux); font-size: 23px; font-weight: 600; line-height: 1.15; color: var(--g9); }
[dir='rtl'] .pcard h3 { font-weight: 700; font-size: 22px; line-height: 1.35; }
.pcard .alt { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.price-tag { text-align: end; flex: none; }
.price-tag b { display: block; font-family: 'Readex Pro', sans-serif; font-size: 20px; font-weight: 600; color: var(--g8); line-height: 1.2; direction: ltr; unicode-bidi: isolate; }
.price-tag span { display: block; font-size: 10.5px; color: var(--gold-d); letter-spacing: .03em; margin-top: 2px; }
.pcard-origin { margin-top: 6px; }
.pcard-origin .i { color: var(--gold-d); }
.pcard-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pcard-specs div { background: var(--c1); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 10.5px; color: var(--muted); }
.pcard-specs b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink2); margin-top: 1px; }
.pcard-specs .carton { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.pcard-specs .carton b { display: inline; direction: ltr; unicode-bidi: isolate; }
.stock { margin-top: 14px; }
.bar { height: 3px; background: var(--c3); }
.bar i { background: linear-gradient(90deg, var(--g6), var(--gold)); }
.bar.low i { background: linear-gradient(90deg, var(--amber), var(--terracotta)); }
.months { margin-top: 12px; gap: 3px; }
.months i { height: 3px; }
.months i.on { background: var(--g5); }
.months i.now { outline: 1.5px solid var(--gold); }
.add-btn { background: var(--g9); color: var(--cream); transition: background .3s, color .3s; }
.add-btn:hover { background: var(--g8); color: #fff; }
.add-btn.in { background: var(--g1); color: var(--g8); }
.stepper { background: var(--c1); border-color: var(--line); }
.meta, .price-row, .price-carton { display: none; }
.pm .meta, .pm .price-row { display: grid; }

/* ---------- quick view (product modal) ---------- */
.modal-box { background: var(--c1); border-radius: 30px; }
.pm { grid-template-columns: 1.05fr 1fr; }
.pm-img { min-height: 480px; background: var(--c3) center / cover; filter: saturate(.96) sepia(.05); }
.pm-body { padding: 36px 34px; display: flex; flex-direction: column; }
.pm-body h3 { font-size: clamp(30px, 3vw, 42px); color: var(--g9); line-height: 1.1; }
.pm-cat { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--gold-d); text-transform: uppercase; margin-bottom: 6px; }
.pm-price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pm-price b { font-family: 'Readex Pro', sans-serif; font-size: 34px; font-weight: 600; color: var(--g8); direction: ltr; unicode-bidi: isolate; }
.pm-price span { color: var(--gold-d); font-size: 13px; }
.pm-price small { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.pm-rows { margin: 14px 0 0; display: grid; gap: 0; }
.pm-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.pm-rows b { color: var(--ink2); font-weight: 600; text-align: end; }
.pm-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 16px; }
.pm-months span { text-align: center; font-size: 9.5px; color: var(--muted); padding-top: 6px; border-top: 3px solid var(--c3); }
.pm-months span.on { border-color: var(--g5); color: var(--g8); font-weight: 600; }
.pm-months span.now { border-color: var(--gold); }
.pm-body .pcard-foot { margin-top: auto; padding-top: 22px; }

/* ---------- sections polish ---------- */
.card { background: var(--c0); border-color: var(--line); }
.ttype .i, .card-title .i { color: var(--gold-d); }
.track { background: linear-gradient(160deg, var(--g8), var(--g9)); }
.contact-info::before { background: linear-gradient(160deg, rgba(44, 67, 32, .96), rgba(26, 40, 19, .9)); }
.footer { background: var(--g9); }
.footer h4 { color: var(--gold); font-weight: 500; letter-spacing: .04em; }
.fab { background: var(--g9); box-shadow: 0 18px 36px -14px rgba(26, 40, 19, .7), inset 0 0 0 1px rgba(207, 169, 104, .4); }
.fab b { background: var(--gold); color: var(--g9); }
.toast { background: var(--g9); box-shadow: inset 0 0 0 1px rgba(207, 169, 104, .4), var(--shadow); }

.pre .hero-content > *, .pre .hero-cards > * { opacity: 0; }

/* motion-driven reveal (falls back to CSS when Motion is unavailable) */
.reveal { opacity: 0; transform: translateY(26px); transition: none; }
.reveal.in { opacity: 1; transform: none; }
.no-motion .reveal { transition: opacity .9s, transform .9s cubic-bezier(.22, 1, .36, 1); }

@media (max-width: 1020px) {
  .pm { grid-template-columns: 1fr; }
  .pm-img { min-height: 300px; }
}
@media (max-width: 680px) {
  .film-teaser { min-height: 560px; border-radius: 22px; }
  .ft-copy { padding: 34px 24px 220px; }
  .ft-truck { width: 92%; inset-inline-end: 4%; bottom: 30px; }
  .ft-sun { bottom: 190px; width: 110px; height: 110px; }
  .grid { gap: 16px; }
  .stat-val { font-size: 32px; }
  .hero-actions .btn-film { width: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-far, .ft-asphalt i, .ft-truck .bob, .ft-truck .spin, .btn-film .pc::after { animation: none !important; }
}

/* Photographic teaser and softly paced entrances. */
.ft-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.film-teaser::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #10190de8, #11190d73 55%, transparent); pointer-events: none; }
[dir='rtl'] .film-teaser::before { background: linear-gradient(270deg, #10190de8, #11190d73 55%, transparent); }
.hero-bg { filter: none; background-position: left center; }
@media (max-width: 640px) {
  .ft-video { object-position: 62% center; }
  .film-teaser::before, [dir='rtl'] .film-teaser::before { background: linear-gradient(#11190dd9, #11190d66 70%, #11190d26); }
  .ft-copy { padding: 35px 25px 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; transform: none; }
  [dir='ltr'] .hero-bg { animation: none; transform: scaleX(-1); }
  .no-motion .reveal { transition: none; }
}