/* ===== أثر | ATHAR — store styles ===== */

@font-face{
  font-family: 'FatimahArabicITF';
  src: url('../fonts/FatimahArabicITF-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'FatimahArabicITF';
  src: url('../fonts/FatimahArabicITF-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'FatimahArabicITF';
  src: url('../fonts/FatimahArabicITF-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'FatimahArabicITF';
  src: url('../fonts/FatimahArabicITF-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'FatimahArabicITF';
  src: url('../fonts/FatimahArabicITF-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --cream: #f7ecd8;
  --cream-2: #efe0bf;
  --paper: #fbf5e8;
  --maroon: #6d2532;
  --maroon-dark: #4a1a22;
  --wine: #86212c;
  --wine-dark: #5c161e;
  --gold: #bd8f4e;
  --gold-light: #e4c78c;
  --ink: #2c1a12;
  --ink-soft: #5a4436;
  --leather: #a9713f;
  --shadow: 0 8px 20px -15px rgba(74, 26, 34, .18);
  --radius: 18px;
  --radius-sm: 10px;
}

*,*::before,*::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Never scroll-jack a viewer who asked for less motion: the hero drops
     the pinned scrub and plays as a normal, modestly-sized looping video. */
  .hero{ height: auto !important; }
  .hero-sticky{ position: relative !important; height: 88vh !important; height: 88dvh !important; min-height: 560px !important; }
}

/* focus ring: visible for keyboard use only, on-brand color, never removed without replacement */
:focus{ outline: none; }
:focus-visible{
  outline: 2.5px solid var(--wine);
  outline-offset: 3px;
  border-radius: 4px;
}
.section.contact :focus-visible,
.site-footer :focus-visible,
.whatsapp-float:focus-visible{
  outline-color: var(--gold-light);
}

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'FatimahArabicITF', 'Cairo', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; min-width:0; height:auto; display:block; }

h1,h2,h3{
  font-family: 'FatimahArabicITF', serif;
  font-weight: 700;
  color: var(--maroon-dark);
  margin: 0 0 .5em;
  line-height: 1.4;
  text-wrap: balance;
}

p{ margin: 0 0 1em; color: var(--ink-soft); text-wrap: pretty; }

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

/* Isolate an LTR number/phone run inside RTL text. Same semantics as <bdi
   dir="ltr">, but as a CSS-only class: <bdi> triggers a paint glitch (a
   rectangular notch bitten out of the rounded corner) once it sits inside an
   inline-flex pill button with overflow:hidden - this class keeps the
   correct left-to-right digit grouping without that bug. */
.ltr-num{ unicode-bidi: isolate; direction: ltr; }

.wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- background texture ---------- */
body{
  background-image:
    radial-gradient(circle at 8% 12%, rgba(189,143,78,.10), transparent 40%),
    radial-gradient(circle at 95% 30%, rgba(109,37,50,.08), transparent 45%);
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.btn-primary{
  /* Solid, not a gradient: a diagonal gradient on a wide, short pill is
     what was behind the "color doesn't reach the rounded ends" reports
     across devices - a flat fill can't exhibit that class of bug at all,
     regardless of engine/DPR/compositing quirks. */
  background: var(--wine);
  color: var(--paper);
  box-shadow: var(--shadow);
}
.btn-ghost{
  background: transparent;
  border-color: var(--maroon);
  color: var(--maroon-dark);
}
@media (hover: hover){
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 34px -16px rgba(74,26,34,.45); }
  .btn-ghost:hover{ background: rgba(109,37,50,.08); transform: translateY(-2px); }
}
.btn:active{ transform: translateY(0) scale(.97); }

/* ---------- top bar ---------- */
.topbar{
  background: var(--maroon-dark);
  color: var(--paper);
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  padding: 8px 12px;
}
.topbar a{ color: var(--paper); text-decoration: underline; font-weight: 700; }

/* ---------- header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247,236,216,.97);
  border-bottom: 1px solid rgba(109,37,50,.12);
  transform: translateZ(0);
}
.header-inner{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
}
/* The header is three parts: brand, nav, actions. Giving the two flanking
   groups an equal share is what puts the nav in the real centre. It used to
   lean on two competing auto margins - margin-left on the brand against
   margin-inline-start on the nav - and flexbox split the leftover between
   them, so where the nav landed depended on how wide the window was: 213px
   left of centre at 1280, 137px at 1024. */
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.header-actions{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.brand-badge{
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(109,37,50,.25);
}
.brand-badge.small{ width: 40px; height: 40px; }
.brand-text{ display: flex; flex-direction: column; line-height: 1.1; }
.brand-ar{ font-family:'FatimahArabicITF', serif; font-weight:900; font-size: 1.35rem; color: var(--maroon-dark); }
.brand-en{ font-size: .62rem; letter-spacing: .28em; color: var(--gold); font-weight: 700; }

.main-nav{
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 0 0 auto;
}
.main-nav a{
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 2px;
}
.main-nav a::after{
  content:"";
  position:absolute; right:0; bottom:-4px;
  width:0; height:2px; background: var(--gold);
  transition: width .2s ease;
}
@media (hover: hover){
  .main-nav a:hover{ color: var(--maroon-dark); }
  .main-nav a:hover::after{ width: 100%; }
}

.header-cta{ padding: 10px 20px; font-size: .88rem; min-height: 42px; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-inline-start: -4px;
  background: none; border: none; cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease, transform .15s ease;
}
.nav-toggle span{ display:block; width: 20px; height:2px; background: var(--maroon-dark); border-radius: 2px; transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.nav-toggle:active{ transform: scale(.92); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero: full-screen scroll-scrubbed video intro ---------- */
.hero{ position: relative; height: 320vh; }
.hero-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--maroon-dark);
}
.hero-video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(20,10,8,.68) 0%, rgba(20,10,8,.1) 32%, rgba(20,10,8,.06) 60%, rgba(20,10,8,.5) 100%);
}
.hero-overlay{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: max(48px, env(safe-area-inset-bottom) + 32px);
}
/* No-JS / reduced-motion fallback: a normal, non-pinned, still-cinematic block */
html:not(.js) .hero,
html.hero-no-pin .hero{ height: auto; }
html:not(.js) .hero-sticky,
html.hero-no-pin .hero-sticky{
  position: relative;
  height: 88vh;
  height: 88dvh;
  min-height: 560px;
}

.eyebrow{
  display:inline-block;
  font-weight: 700;
  color: var(--wine);
  background: rgba(189,143,78,.16);
  border: 1px solid rgba(189,143,78,.4);
  padding: 5px 16px;
  border-radius: 999px;
  font-size: .8rem;
  margin-bottom: 16px;
}
.hero-scroll-hint{
  align-self: center;
  margin-top: 28px;
  opacity: .85;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-hint-text{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(251,245,232,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.scroll-hint-pill{
  display: block;
  width: 22px; height: 36px;
  border: 2px solid rgba(251,245,232,.75);
  border-radius: 999px;
  position: relative;
}
.scroll-hint-pill::before{
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 8px;
  margin-inline-start: -2px;
  border-radius: 999px;
  background: var(--gold-light);
  animation: hero-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-dot{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ transform: translateY(14px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 0; }
}
html:not(.js) .hero-scroll-hint,
html.hero-no-pin .hero-scroll-hint{ display: none; }

/* ---------- sections generic ---------- */
section[id]{ scroll-margin-top: 88px; }
.section{ padding: 76px 0; }
.section-head{ text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-sub{ font-size: 1rem; }

.section.inside{ background: var(--paper); border-top: 1px solid rgba(109,37,50,.08); border-bottom: 1px solid rgba(109,37,50,.08); }

/* ---------- inside cards ---------- */
.inside-cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px;
}
.inside-card{
  background: var(--cream);
  border: 1px solid rgba(109,37,50,.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover){
  .inside-card:hover{ transform: translateY(-4px); }
}
.inside-card-media{ position: relative; overflow: hidden; }
.inside-card-media img{
  display: block;
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
}
.inside-card h3{
  font-size: 1rem;
  margin: 16px 16px 4px;
}
.inside-card p{
  font-size: .86rem;
  margin: 0 16px 18px;
}

/* ---------- packages ---------- */
.package-card{
  display:grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 0;
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 40px;
  border: 1px solid rgba(109,37,50,.08);
}
.package-media{ position:relative; min-height: 260px; min-width: 0; flex: 1 1 auto; }
.package-media img{ width:100%; height:100%; object-fit:cover; }

/* optional swipeable image gallery inside .package-media (multi-photo packages)
   Absolute, so the slides cannot size the card. .package-media has no height
   of its own on desktop - it is stretched to whatever the taller grid column
   needs - which left the gallery's height:100% resolving to auto and each
   slide falling back to its intrinsic ratio. One slide is a narrow strip of
   scroll (292x1080), so at the 444px column width it asked for 1642px and
   dragged the whole card to three times the height of its neighbours. Taking
   the gallery out of flow gives it a definite height to fill instead. */
.package-gallery{
  position:absolute; inset:0;
  display:flex; height:100%; width:100%;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.package-gallery::-webkit-scrollbar{ display:none; }
.package-gallery-slide{ flex:0 0 100%; scroll-snap-align:start; }
/* A slide far narrower than the frame is shown whole on the paper ground -
   cover would crop a strip like that down to an unreadable middle third. */
.package-gallery-slide.is-tall{ object-fit:contain; background:var(--paper); }
.package-gallery-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2;
}
.package-gallery-dot{
  width:6px; height:6px; border-radius:50%; padding:0; border:none;
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  cursor:pointer; transition: background .2s ease, transform .2s ease;
}
.package-gallery-dot.is-active{ background:#fff; transform:scale(1.3); }
.package-toggle{ display:flex; flex-direction:column; color:inherit; text-decoration:none; pointer-events:none; }
.package-toggle-bar{ display:none; }
.package-quick-add{ display:none; }
.package-body{ padding: 34px 36px; }
.package-body h3{ font-size: 1.5rem; margin-bottom: .3em; }
.package-desc{ font-size: .96rem; }

.options{ display:flex; flex-direction:column; gap: 10px; margin: 18px 0; }
.option{
  display:flex; align-items:center; gap: 12px;
  min-height: 44px;
  border: 1.5px solid rgba(109,37,50,.18);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
@media (hover: hover){
  .option:hover{ border-color: var(--gold); }
}
.option:active{ transform: scale(.99); }

/* custom radio: bigger, consistent, on-brand across browsers */
.option input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(109,37,50,.35);
  background: var(--paper);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .15s ease;
}
.option input[type="radio"]::before{
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--wine);
  transform: scale(0);
  transition: transform .16s cubic-bezier(.22,1,.36,1);
}
.option input[type="radio"]:checked{ border-color: var(--wine); }
.option input[type="radio"]:checked::before{ transform: scale(1); }

.option:has(input:checked),
.option.is-selected{
  border-color: var(--wine);
  background: rgba(189,143,78,.10);
}
.option-body{ display:flex; justify-content:space-between; align-items:center; flex:1; gap: 12px; }
.option-title{ font-weight: 700; color: var(--ink); font-size: .95rem; }
.option-price{ font-weight: 800; color: var(--wine); white-space: nowrap; font-size: 1.02rem; }
.badge{
  display:inline-block;
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  background: var(--gold);
  color: var(--maroon-dark);
  padding: 2px 9px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}
.badge.sold-out-badge{ background: rgba(134,33,44,.14); color: var(--wine); }
.option.is-soldout{ opacity: .55; pointer-events: none; }
.option.is-soldout input{ cursor: not-allowed; }
.btn:disabled{ opacity: .5; cursor: not-allowed; box-shadow: none; }

/* whole package sold out: grey the card out and stamp the image */
.package-card.is-soldout{ filter: grayscale(1); }
.package-card.is-soldout .package-media::after{
  content: "نفدت الكمية";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,10,8,.5);
  color: var(--paper);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
}
.lawha-frame{ position: relative; }
.lawha-frame.is-soldout{ filter: grayscale(1); }
.lawha-frame.is-soldout::after{
  content: "نفدت الكمية";
  position: absolute; inset: 14px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,10,8,.5);
  color: var(--paper);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .02em;
}
@media (hover: hover){
  .btn:disabled:hover{ transform: none; }
}

.name-field{
  background: rgba(189,143,78,.12);
  border: 1px dashed var(--gold);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.name-field label{ display:block; font-size: .88rem; font-weight: 700; color: var(--maroon-dark); margin-bottom: 8px; }
.name-field input,
.name-field select{
  width: 100%;
  min-height: 22px;
  padding: 9px 9px;
  border-radius: 10px;
  border: 1.5px solid rgba(109,37,50,.25);
  font-family: 'FatimahArabicITF', sans-serif;
  font-size: 1rem; /* 16px min: prevents iOS Safari auto-zoom on focus */
  background: var(--paper);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.name-field select{ cursor: pointer; }
.name-field input:focus-visible,
.name-field select:focus-visible{
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(134,33,44,.18);
}
.field-hint{ margin: 6px 2px 0; font-size: .8rem; color: var(--wine); min-height: 1em; font-weight: 600; }

.delivery-summary{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1.5px solid rgba(109,37,50,.25);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  text-align: right;
  cursor: pointer;
  transition: border-color .15s ease;
}
@media (hover: hover){
  .delivery-summary:hover{ border-color: var(--gold); }
}
.delivery-summary-text{ display:flex; align-items:center; gap: 10px; }
.delivery-summary-text strong{ color: var(--wine); }
.delivery-summary-chevron{
  flex: none;
  width: 9px; height: 9px;
  border-inline-end: 2px solid var(--gold);
  border-block-end: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.delivery-summary[aria-expanded="true"] .delivery-summary-chevron{ transform: rotate(-135deg); }
#checkoutCountryOptions{ margin-top: 10px; }
#checkoutCountryOptions[hidden]{ display: none; }

details.benefits{
  margin: 14px 0 20px;
  border-top: 1px solid rgba(109,37,50,.14);
  padding-top: 12px;
}
details.benefits summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--maroon-dark);
  font-size: .95rem;
  list-style: none;
  display:flex; align-items:center; gap: 8px;
  min-height: 44px;
  padding: 4px 2px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
details.benefits summary::-webkit-details-marker{ display:none; }
details.benefits summary::after{
  content: "";
  width: 8px; height: 8px;
  margin-inline-start: auto;
  border-inline-end: 2px solid var(--gold);
  border-block-end: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
details.benefits[open] summary::after{ transform: rotate(-135deg); }
details.benefits summary::before{
  content: "◆";
  color: var(--gold);
  font-size: .7rem;
}
details.benefits .hadith-list,
details.benefits .hadith-cards,
details.benefits blockquote.standalone{
  animation: benefits-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes benefits-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.hadith-list{ margin: 12px 0 0; padding-inline-start: 20px; font-size: .9rem; color: var(--ink-soft); }
.hadith-list li{ margin-bottom: 6px; }
.hadith-list.two-col{ columns: 2; column-gap: 24px; }

.hadith-cards{ display:flex; flex-direction:column; gap: 14px; margin-top: 12px; }
.hadith-quote{
  margin:0;
  background: var(--cream);
  border-radius: 12px;
  padding: 14px 18px;
  border-inline-start: 4px solid var(--gold);
}
.hadith-quote strong{ color: var(--maroon-dark); display:block; margin-bottom: 4px; font-size: .88rem; }
.hadith-quote p{ margin:0; font-family: 'FatimahArabicITF', serif; font-weight: 500; font-size: .95rem; color: var(--ink); }
.hadith-quote.standalone{ margin-top: 12px; }
.benefits-inline-img{ border-radius: 12px; box-shadow: var(--shadow); max-width: 320px; margin: 0 auto 4px; }

.package-footer{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  border-top: 1px solid rgba(109,37,50,.12);
  padding-top: 18px;
  flex-wrap: wrap;
}
.total{ font-size: .95rem; color: var(--ink-soft); }
.total strong{ color: var(--wine); font-size: 1.2rem; }

/* ---------- lawha: featured premium product ---------- */
.section.lawha{
  background: linear-gradient(160deg, var(--maroon-dark) 0%, var(--wine-dark) 55%, var(--maroon-dark) 100%);
  position: relative;
  overflow: hidden;
}
.section.lawha::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(228,199,140,.16), transparent 45%), radial-gradient(circle at 85% 80%, rgba(228,199,140,.12), transparent 45%);
  pointer-events: none;
}
.section.lawha .eyebrow.lawha-eyebrow{
  color: var(--maroon-dark);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent;
  font-weight: 800;
}
.section.lawha h2{ color: var(--paper); }
.section.lawha .package-desc{ color: rgba(251,245,232,.88); font-size: 1.02rem; }
.lawha-inner{
  position: relative; z-index: 1;
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 52px; align-items:center;
}
.lawha-frame{
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(228,199,140,.5), rgba(228,199,140,.08));
}
.lawha-hero-img{
  display: block;
  border-radius: 18px;
  box-shadow: 0 24px 46px -18px rgba(20,10,8,.55);
  width: 100%;
  cursor: zoom-in;
}
.lawha-benefits li{ color: rgba(251,245,232,.88); }
.lawha-benefits li::marker{ color: var(--gold-light); }
.lawha-order{
  display:flex; align-items:center; gap: 20px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.lawha-price{
  font-family:'FatimahArabicITF', serif;
  font-weight: 900;
  font-size: 2rem;
  color: var(--gold-light);
  line-height: 1;
}
.section.lawha .btn-primary{
  background: var(--gold);
  color: var(--maroon-dark);
}

/* ---------- why: swipeable carousel ---------- */
.why-carousel{ display:flex; align-items:center; gap: 14px; }
.why-arrow{
  display:none;
  flex:none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(109,37,50,.18);
  background: var(--paper);
  color: var(--maroon-dark);
  align-items:center; justify-content:center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
@media (hover: hover) and (pointer: fine){
  .why-arrow{ display:flex; }
  .why-arrow:hover{ border-color: var(--gold); background: rgba(189,143,78,.12); }
}
.why-arrow:active{ transform: scale(.92); }

.why-cards{
  flex: 1; min-width: 0;
  display:flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px 14px;
  scrollbar-width: none;
}
.why-cards::-webkit-scrollbar{ display:none; }

.why-card{
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid rgba(109,37,50,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px;
  text-align: center;
}
.why-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: linear-gradient(155deg, rgba(228,199,140,.4), rgba(189,143,78,.14));
  color: var(--wine);
  margin-bottom: 18px;
}
.why-card-icon svg{ width: 30px; height: 30px; display:block; }
.why-card h3{ font-size: 1.05rem; margin-bottom: 8px; }
.why-card p{ font-size: .9rem; margin: 0; color: var(--ink-soft); }

.why-dots{ display:flex; justify-content:center; gap: 8px; margin-top: 6px; }
.why-dot{
  width: 8px; height: 8px; border-radius: 50%;
  border: none; padding: 0;
  background: rgba(109,37,50,.2);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.why-dot.is-active{ background: var(--wine); transform: scale(1.3); }

.why-outro{
  max-width: 640px; margin: 34px auto 0;
  text-align: center;
  font-size: .96rem;
  padding-top: 26px;
  border-top: 1px solid rgba(109,37,50,.12);
}

/* ---------- customer feedback: small quote-card carousels ---------- */
.feedback-carousel{ display:flex; align-items:center; gap: 12px; }
.feedback-arrow{
  display:none;
  flex:none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(109,37,50,.18);
  background: var(--paper);
  color: var(--maroon-dark);
  align-items:center; justify-content:center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
@media (hover: hover) and (pointer: fine){
  .feedback-arrow{ display:flex; }
  .feedback-arrow:hover{ border-color: var(--gold); background: rgba(189,143,78,.12); }
}
.feedback-arrow:active{ transform: scale(.92); }

.feedback-cards{
  flex: 1; min-width: 0;
  display:flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}
.feedback-cards::-webkit-scrollbar{ display:none; }

.feedback-card{
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid rgba(109,37,50,.08);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.feedback-stars{ color: var(--gold); font-size: .72rem; letter-spacing: 2px; margin-bottom: 8px; }
.feedback-card p{ font-size: .84rem; line-height: 1.6; margin: 0; color: var(--ink); }

.feedback-dots{ display:flex; justify-content:center; gap: 7px; margin-top: 2px; }
.feedback-dot{
  width: 6px; height: 6px; border-radius: 50%;
  border: none; padding: 0;
  background: rgba(109,37,50,.2);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.feedback-dot.is-active{ background: var(--wine); transform: scale(1.3); }

/* small 2-card strip embedded in the لوحة section: no arrows/dots needed */
.lawha-feedback{ margin-top: 28px; }
.lawha-feedback-label{
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  color: rgba(251,245,232,.7); margin-bottom: 10px;
}
.lawha-feedback .feedback-cards{ padding: 4px 4px 4px; }
.lawha-feedback .feedback-card{ flex-basis: 200px; }

/* ---------- contact ---------- */
.section.contact{ background: linear-gradient(135deg, var(--maroon-dark), var(--wine-dark)); }
.section.contact .eyebrow{ background: rgba(228,199,140,.15); border-color: rgba(228,199,140,.4); color: var(--gold-light); }
.section.contact h2{ color: var(--paper); }
.section.contact .section-sub{ color: rgba(251,245,232,.85); }
.contact-inner{ display:flex; align-items:center; justify-content:center; text-align:center; gap: 40px; flex-wrap: wrap; }
.contact-actions{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 18px; justify-content:center; }
.contact .btn-ghost{ border-color: var(--gold-light); color: var(--gold-light); }

/* ---------- footer ---------- */
.site-footer{ background: var(--maroon-dark); color: rgba(251,245,232,.75); padding: 44px 0 0; }
.footer-inner{ display:flex; align-items:center; justify-content:center; padding-bottom: 28px; }
.footer-brand{ display:flex; align-items:center; gap: 14px; cursor: default; user-select: none; }
.footer-brand .brand-ar{ font-family:'FatimahArabicITF', serif; font-weight:900; color: var(--gold-light); font-size: 1.3rem; margin:0; }
.footer-brand .brand-en{ font-size: .65rem; letter-spacing:.2em; color: rgba(251,245,232,.6); }
.footer-tag{ font-size: .85rem; margin: 4px 0 0; color: rgba(251,245,232,.72); }
.footer-bottom{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px;
  text-align: center;
  border-top: 1px solid rgba(251,245,232,.14);
  padding: 20px 0 28px;
}
.copyright{ font-size: .8rem; color: rgba(251,245,232,.6); margin:0; }
.footer-credit{ font-size: .78rem; color: rgba(251,245,232,.5); }
.footer-credit a{ color: rgba(228,199,140,.9); font-weight: 700; text-decoration: none; }
@media (hover: hover){
  .footer-credit a:hover{ text-decoration: underline; }
}

/* ---------- floating whatsapp ---------- */
.whatsapp-float{
  position: fixed;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
  right: max(22px, calc(env(safe-area-inset-right) + 16px));
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(134,33,44,.22) 0%, rgba(189,143,78,.22) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 -1px 1px rgba(0,0,0,.1),
    0 8px 32px rgba(0,0,0,.2);
  z-index: 70;
  transition: all .3s cubic-bezier(.25,.8,.25,1);
  animation: wa-pop .4s cubic-bezier(.22,1,.36,1) .6s backwards;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .whatsapp-float{ background: linear-gradient(135deg, var(--wine) 0%, var(--gold) 100%); }
}
@keyframes wa-pop{
  from{ opacity: 0; transform: scale(.5); }
  to{ opacity: 1; transform: scale(1); }
}
@media (hover: hover){
  .whatsapp-float:hover{
    background: linear-gradient(135deg, rgba(134,33,44,.32) 0%, rgba(189,143,78,.32) 100%);
    border-color: rgba(255,255,255,.4);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.4),
      0 12px 36px rgba(0,0,0,.25);
    transform: translateY(-2px) scale(1.06);
  }
}
.whatsapp-float:active{
  transform: scale(.94);
  background: linear-gradient(135deg, rgba(134,33,44,.14) 0%, rgba(189,143,78,.14) 100%);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.2),
    0 4px 12px rgba(0,0,0,.15);
}

/* ---------- header cart button ---------- */
.header-cart{
  position: relative;
  border: none;
  background: none;
  color: var(--maroon-dark);
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  flex: none;
  padding: 8px;
  transition: opacity .15s ease, transform .15s ease;
}
@media (hover: hover){
  .header-cart:hover{ opacity: .7; }
}
.header-cart:active{ transform: scale(.94); }
.cart-badge{
  position: absolute;
  top: -2px; inset-inline-end: -2px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--wine);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid var(--paper);
}
.cart-badge[hidden]{ display: none; }

/* ---------- cart drawer ---------- */
.cart-overlay{
  position: fixed; inset: 0;
  background: rgba(20,10,8,.55);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  /* display:none, matching .lightbox further down - the one overlay in this
     file that already got it right. opacity:0 still leaves a full-viewport
     fixed box for the engine to composite, and on iOS that is enough to keep
     the bottom band alive even after the sheet above it stopped rendering.
     Nothing rendered means nothing to decorate. */
  display: none;
}
.cart-overlay.open{
  display: block;
  opacity: 1; visibility: visible;
  animation: overlay-fade .25s ease;
}
@keyframes overlay-fade{ from{ opacity: 0; } to{ opacity: 1; } }

.cart-drawer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 81;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  /* Same as the quickpick sheet above: dismissed off the bottom, its
     upward-cast shadow lands back on the page, and iOS paints it through
     visibility:hidden. The shadow is therefore part of the open state. */
  box-shadow: none;
  visibility: hidden;
  /* Same reasoning as the quickpick sheet above. */
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.cart-drawer.open{
  display: flex;
  transform: translateY(0);
  visibility: visible;
  box-shadow: 0 -20px 50px -20px rgba(20,10,8,.5);
  animation: cart-drawer-rise .3s cubic-bezier(.22,1,.36,1);
}
@keyframes cart-drawer-rise{
  from{ transform: translateY(100%); }
  to{ transform: translateY(0); }
}

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(109,37,50,.1);
  flex: none;
}
.cart-drawer-head h2{ margin: 0; font-size: 1.2rem; }
.cart-close{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(109,37,50,.08);
  color: var(--maroon-dark);
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
}

.cart-body{ overflow-y: auto; padding: 16px 20px; flex: 1 1 auto; min-height: 0; }
.cart-empty{ text-align:center; color: var(--ink-soft); padding: 24px 8px; margin: 0; }

.cart-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 14px; }
.cart-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  padding: 14px;
  border: 1px solid rgba(109,37,50,.12);
  border-radius: 14px;
  background: var(--cream);
}
.cart-item-name{ font-weight: 700; color: var(--maroon-dark); font-size: .95rem; }
.cart-item-option{ font-size: .82rem; color: var(--ink-soft); grid-column: 1; }
.cart-item-extra{ font-size: .78rem; color: var(--wine); font-weight: 600; grid-column: 1; }
.cart-item-qty{ font-size: .78rem; color: var(--ink-soft); grid-column: 1; }
.cart-item-price{ font-weight: 800; color: var(--wine); white-space: nowrap; }
.shipping-line{
  margin-top: -2px;
  border-style: dashed;
  border-color: var(--gold);
  background: rgba(189,143,78,.1);
  align-items: center;
}
.shipping-line .cart-item-name{ font-weight: 700; color: var(--maroon-dark); font-size: .9rem; }
.shipping-line .cart-item-price{ color: var(--maroon-dark); }
.cart-item-controls{
  grid-column: 1 / -1;
  display:flex; align-items:center; justify-content: space-between;
  margin-top: 4px;
}
.cart-qty{ display:flex; align-items:center; gap: 10px; }
.cart-qty button{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(109,37,50,.25);
  background: var(--paper);
  color: var(--maroon-dark);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}
.cart-qty span{ min-width: 18px; text-align:center; font-weight:700; }
.cart-remove{
  background: none; border: none;
  color: var(--wine);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}

.cart-footer{
  flex: none;
  border-top: 1px solid rgba(109,37,50,.1);
  padding: 14px 20px;
  background: var(--paper);
}
.cart-total-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--maroon-dark);
  margin-bottom: 12px;
}
.cart-total-row strong{ color: var(--wine); font-size: 1.25rem; }
.cart-submit{ width: 100%; }

/* ---------- add-to-cart toast ---------- */
.cart-toast{
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
  transform: translate(-50%, 12px);
  background: var(--maroon-dark);
  color: var(--paper);
  font-weight: 700;
  font-size: .9rem;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgba(20,10,8,.5);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.cart-toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- quick-pick modal (choose an option without leaving the card) ---------- */
.quickpick-overlay{
  position: fixed; inset: 0;
  background: rgba(44,26,18,.45);
  opacity: 0; visibility: hidden;
  z-index: 82;
  /* display:none, matching .lightbox further down - the one overlay in this
     file that already got it right. opacity:0 still leaves a full-viewport
     fixed box for the engine to composite, and on iOS that is enough to keep
     the bottom band alive even after the sheet above it stopped rendering.
     Nothing rendered means nothing to decorate. */
  display: none;
}
.quickpick-overlay.open{
  display: block;
  opacity: 1; visibility: visible;
  animation: overlay-fade .25s ease;
}
.quickpick-modal{
  position: fixed;
  left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: min(460px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  padding: 20px 20px max(20px, calc(env(safe-area-inset-bottom) + 10px));
  z-index: 83;
  /* The shadow belongs to the open state only. Dismissed, this sheet sits
     one viewport below with its top edge exactly on the bottom of the
     screen, and the shadow is cast upwards - so its blur lands back on the
     page. visibility:hidden ought to stop that and does everywhere I can
     test, but iOS Safari paints it anyway (A/B'd on device: the same shell
     with these five sheets shows the band, without them it does not). A
     shadow that does not exist while closed cannot leak, whatever the
     engine does with visibility. */
  box-shadow: none;
  visibility: hidden;
  /* Not rendered at all while closed. Pushing it off-screen was not enough
     and neither was hiding it: with bottom:0 and overflow-y:auto it is still
     a scrollable box anchored to the bottom of the viewport, and iOS Safari
     draws its scroll-edge treatment for one - five of these stacked is the
     grey band. Proven on device: the same shell with these sheets shows it,
     without them it does not, and it outlived both visibility:hidden and
     box-shadow:none. display:none leaves nothing to draw. The cost is that
     dismissing no longer animates; opening still does, via the keyframes
     below rather than a transition, which display:none cannot drive. */
  display: none;
}
.quickpick-modal.open{
  display: block;
  transform: translate(-50%, 0);
  visibility: visible;
  box-shadow: 0 -14px 40px rgba(44,26,18,.28);
  animation: quickpick-rise .28s cubic-bezier(.22,1,.36,1);
}
@keyframes quickpick-rise{
  from{ transform: translate(-50%, 100%); }
  to{ transform: translate(-50%, 0); }
}
@media (min-width: 640px){
  .quickpick-modal{
    bottom: auto; top: 50%;
    border-radius: 22px;
    opacity: 0; visibility: hidden;
    transform: translate(-50%, calc(-50% + 16px));
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .quickpick-modal.open{
    transform: translate(-50%, -50%);
    opacity: 1; visibility: visible;
    animation: quickpick-zoom .22s ease;
  }
  @keyframes quickpick-zoom{
    from{ opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
    to{ opacity: 1; transform: translate(-50%, -50%); }
  }
}
.quickpick-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 4px; }
.quickpick-head h3{ font-size: 1.08rem; margin: 0; }
.quickpick-close{
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(109,37,50,.08);
  color: var(--maroon-dark);
  display: grid; place-content: center;
  cursor: pointer;
}
.quickpick-hint{ font-size: .82rem; color: var(--ink-soft); margin: 4px 0 12px; }
.quickpick-options{ margin: 0 0 14px; }
.quickpick-options .options{ margin: 0; }
.quickpick-name-field{ margin: 0 0 14px; }
.quickpick-footer{
  display:flex; align-items:center; justify-content:space-between; gap: 14px;
  border-top: 1px solid rgba(109,37,50,.12);
  padding-top: 14px;
}
.quickpick-footer .total{ font-size: .95rem; color: var(--ink-soft); }
.quickpick-footer .total strong{ color: var(--wine); font-size: 1.15rem; }

/* ---------- checkout page ---------- */
.checkout-header-inner{ justify-content: space-between; }
.checkout-header-actions{ display:flex; align-items:center; gap: 16px; }
.checkout-back{
  display:flex; align-items:center; gap: 8px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--maroon-dark);
}
.checkout-page{ padding: 44px 0 80px; min-height: 70vh; }
.checkout-wrap{ max-width: 900px; }
.checkout-page h1{ font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 28px; }

.checkout-empty,
.checkout-success{
  text-align:center;
  background: var(--paper);
  border: 1px solid rgba(109,37,50,.1);
  border-radius: var(--radius);
  padding: 48px 24px;
  box-shadow: var(--shadow);
}
.checkout-empty p,
.checkout-success p{ font-size: 1.05rem; margin-bottom: 20px; }

.checkout-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 32px;
  align-items: start;
}
.checkout-layout[hidden]{ display: none; }
.checkout-summary,
.checkout-form-section{
  background: var(--paper);
  border: 1px solid rgba(109,37,50,.1);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
}
.checkout-summary h2,
.checkout-form-section h2{ font-size: 1.15rem; margin-bottom: 18px; }
.checkout-summary .cart-items{ margin-bottom: 16px; }
.checkout-summary .shipping-line{ margin-bottom: 16px; }
.checkout-edit-link{
  display:inline-block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wine);
  text-decoration: underline;
  margin-bottom: 18px;
}
.checkout-total-row{
  border-top: 1px dashed rgba(109,37,50,.2);
  padding-top: 16px;
  margin-bottom: 0;
}
.checkout-form-section .name-field{ margin-bottom: 14px; }

@media (max-width: 820px){
  .checkout-layout{ grid-template-columns: minmax(0,1fr); }
}

/* ---------- lightbox ---------- */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(20,10,8,.88);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  padding: 30px;
}
.lightbox.open{ display: flex; }
.lightbox img{ max-width: min(92vw, 640px); max-height: 88vh; border-radius: 14px; }
.lightbox-close{
  position:absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,245,232,.15);
  color: var(--paper);
  border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.lightbox-close:active{ transform: scale(.92); }

/* ---------- reveal animation ----------
   Content is visible by default (progressive enhancement). Only once
   `html.js` confirms JS ran do sections start hidden pending reveal —
   so no-JS, slow-JS, and headless-render paths never ship blank. */
.reveal{ opacity: 1; transform: none; }
html.js .reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
/* Drop the transform once settled (rather than leaving translateY(0)):
   a lingering, non-"none" transform pins the element to its own
   compositing layer for good, and rounded-corner/gradient buttons nested
   inside such a layer can render with a hairline seam at the curve in
   Chromium. Transitioning *to* none animates identically to translateY(0). */
html.js .reveal.in{ opacity: 1; transform: none; }

/* ---------- responsive ---------- */
body.nav-locked{ overflow: hidden; }

@media (max-width: 980px){
  .inside-grid{ grid-template-columns: minmax(0,1fr); }
  .package-card{ grid-template-columns: minmax(0,1fr); }
  .package-media{ min-height: 0; aspect-ratio: 4 / 5; }
  .package-media img{ height: 100%; }
  .lawha-inner{ grid-template-columns: minmax(0,1fr); }
  .lawha-frame{ order: -1; }
}

@media (max-width: 820px){
  .main-nav{
    position: absolute;
    top: 100%; right: 0; left: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 18px max(18px, env(safe-area-inset-bottom));
    gap: 2px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid rgba(109,37,50,.12);
    box-shadow: 0 16px 28px -12px rgba(74,26,34,.28);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .main-nav.open{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav a{
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 6px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(109,37,50,.08);
  }
  .main-nav a:last-child{ border-bottom: none; }
  .main-nav a::after{ display: none; }
  .main-nav a:active{ color: var(--maroon-dark); background: rgba(189,143,78,.08); }
  .nav-toggle{ display: flex; order: 3; }
  .header-cta{ display:none; }

  .topbar{ padding: 6px 12px; font-size: .8rem; }
  .header-inner{ padding: 8px 18px; }
  .brand-badge{ width: 36px; height: 36px; }
  .brand-ar{ font-size: 1.1rem; }
  .brand-en{ font-size: .55rem; }

  .inside-cards{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .inside-cards::-webkit-scrollbar{ display: none; }
  .inside-card{ flex: 0 0 128px; scroll-snap-align: start; }
  .inside-card h3{ font-size: .78rem; margin: 10px 10px 2px; line-height: 1.3; }
  .inside-card p{ font-size: .72rem; margin: 0 10px 12px; line-height: 1.35; }

  .why-cards{ gap: 14px; padding: 4px 4px 12px; }
  .why-card{ flex-basis: 82%; padding: 24px 22px; }
  .why-card-icon{ width: 56px; height: 56px; margin-bottom: 14px; }
  .why-card-icon svg{ width: 26px; height: 26px; }
  .why-outro{ font-size: .88rem; margin-top: 26px; padding-top: 20px; }

  .feedback-cards{ gap: 10px; padding: 4px 4px 10px; }
  .feedback-card{ flex-basis: 68%; padding: 14px 16px; }
  .lawha-feedback .feedback-card{ flex-basis: 74%; }

  /* packages: compact 2-up + 1-centered grid, tap a card to open its detail page.
     Four tracks rather than two, with every card spanning two of them, so the
     lone third card is centred by sitting on tracks 2-3. It used to span the
     full row with max-width:calc(50% - 7px), which lines up with a column in
     Chrome but came out visibly narrower than its neighbours in iOS Safari -
     the percentage resolves against a different box there. fr units have no
     such ambiguity. grid-auto-rows keeps the third card the same height as the
     pair above it instead of shrinking to its own shorter text. */
  .packages-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
  }
  .packages-grid .package-card{ grid-column: span 2; margin-bottom: 0; }
  .packages-grid .package-card:nth-child(3){ grid-column: 2 / span 2; }
  .packages-grid .package-toggle{
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .packages-grid .package-toggle:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
  .packages-grid .package-toggle-bar{
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--paper);
  }
  .packages-grid .package-toggle-title-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .packages-grid .package-toggle-title{
    font-weight: 700;
    font-size: .84rem;
    color: var(--maroon-dark);
    line-height: 1.3;
  }
  .packages-grid .package-toggle-arrow{
    flex: none;
    font-size: .8rem;
    color: var(--gold);
    line-height: 1;
  }
  .packages-grid .package-toggle-tagline{
    font-size: .72rem;
    color: var(--ink-soft);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .packages-grid .package-toggle-price{ font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
  .packages-grid .package-toggle-price strong{ color: var(--wine); font-size: .92rem; }
  .packages-grid .package-quick-add{
    display: block;
    width: calc(100% - 20px);
    margin: 0 10px 12px;
    padding: 10px 0;
    font-size: .84rem;
  }
  .packages-grid .package-body{ display: none; }

  /* leave room so the fixed WhatsApp button never sits on top of the
     footer credit line at the bottom of the page (.wrap resets vertical
     padding at 560px, so this needs the extra class for specificity) */
  .footer-bottom.wrap{ padding-bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px)); }
}

@media (max-width: 560px){
  .wrap{ padding: 0 18px; }
  .section{ padding: 48px 0; }
  .section-head{ margin-bottom: 32px; }
  .package-card{ margin-bottom: 0; border-radius: 20px; }
  .package-body{ padding: 22px 18px; }
  .package-desc{ font-size: 1rem; }
  .option-title{ font-size: 1rem; }
  .option-price{ font-size: 1.08rem; }
  .package-footer{ flex-direction: column; align-items: stretch; gap: 10px; }
  .package-footer .btn{ width: 100%; }
  .total{ text-align: center; }
  .hadith-list.two-col{ columns: 1; }
  .contact-inner{ justify-content: center; text-align: center; }
  .contact-actions{ justify-content: center; }
  .lawha-order{ flex-direction: column; align-items: stretch; text-align: center; }
  .lawha-order .btn{ width: 100%; }
}