@font-face{font-family:'Poorich';src:url('assets/POORICH.TTF') format('truetype');font-display:swap}
:root{
  --bg:#070707;--text:#f7f1eb;--muted:#ccbdb3;--line:rgba(255,255,255,.08);
  --brand:#7d0d42;--gold:#ffcf8a;--panel:rgba(255,255,255,.04);--shadow:0 24px 70px rgba(0,0,0,.34)
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font-family:Inter,Arial,sans-serif;
  background:radial-gradient(circle at top left, rgba(125,13,66,.22), transparent 28%),
             radial-gradient(circle at 100% 0, rgba(75,40,29,.18), transparent 20%),
             var(--bg)
}
body.loading{overflow:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{width:min(1240px,calc(100% - 42px));margin:0 auto}
@media (max-width:820px){.wrap{width:min(100% - 28px,1240px)}}
.loader-text,.hero h1,.section h2,.signature-card h3,.brew-item h3,.favorite-card h3,.visit-title,.online-strip h3,.site-footer{font-family:'Poorich',Georgia,serif;font-weight:400}

/* loader */
#loader{
  position:fixed; inset:0; z-index:10000;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:radial-gradient(circle at 30% 20%, #1e140a, #030201);
  transition:opacity 1s ease;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-cup{
  width:200px;height:220px;display:flex;justify-content:center;align-items:center;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
}
.loader-cup svg{width:100%;height:auto;display:block}
.loader-text{
  margin-top:28px;font-size:1.2rem;letter-spacing:4px;
  background:linear-gradient(135deg,#e6b17e,#d49a5a);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700
}
.loader-sub{margin-top:8px;font-size:.75rem;color:#ccbdb3;letter-spacing:2px;text-transform:uppercase}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(7,7,7,.76);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.header-row{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:84px;filter:brightness(0) invert(1)}
.nav{display:flex;gap:28px;color:#ede3dc;font-size:15px}.nav a{opacity:.86}.nav a:hover{opacity:1}
.header-actions{display:flex;gap:10px;align-items:center}.lang-toggle{display:flex;gap:8px}
.lang-toggle a{min-width:42px;height:42px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-weight:700}
.lang-toggle a.active{background:linear-gradient(135deg,var(--brand),#9f235b)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:999px;font-weight:700;transition:.25s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),#9f235b);color:#fff;box-shadow:0 12px 30px rgba(125,13,66,.32)}
.btn-outline{border-color:var(--line);background:rgba(255,255,255,.04);color:#fff}

/* hero */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 96px);display:flex;align-items:center;padding:68px 0 84px}
.hero-bg{position:absolute;border-radius:999px;filter:blur(72px);opacity:.36;pointer-events:none}
.hero-bg-a{width:340px;height:340px;background:#651733;left:-70px;top:120px}
.hero-bg-b{width:360px;height:360px;background:#4b281d;right:-90px;bottom:80px}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.hero h1{margin:0;font-size:clamp(50px,8vw,90px);line-height:.94;letter-spacing:.01em;max-width:760px}
.hero p{margin:20px 0 0;max-width:620px;color:var(--muted);font-size:18px;line-height:1.9}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-stage{
  position:relative;min-height:720px;border-radius:38px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(circle at 68% 20%, rgba(255,212,145,.09), transparent 24%),linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow)
}
.hero-caption{
  position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:2;padding:12px 18px;border-radius:999px;
  border:1px solid var(--line);background:rgba(7,7,7,.78);color:#fff0d7;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap
}
.hero-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .9s ease,transform 1.2s ease;transform:scale(1.01)}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-slide img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 55px rgba(0,0,0,.35))}
.scroll-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:56px;height:56px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 0 22px rgba(255,208,138,.28),0 0 42px rgba(255,208,138,.10);
  transition:opacity .35s ease,transform .35s ease,box-shadow .25s ease
}
.scroll-cue.hidden{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}
.scroll-cue img{width:22px;animation:bob 1.8s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* sections */
.section{padding:108px 0}
.center-head{text-align:center;max-width:1120px}
.center-head h2{margin:0;font-size:clamp(40px,5vw,70px);line-height:1}
.center-head h2.one-line{white-space:nowrap}
.center-head p{margin:16px auto 0;color:var(--muted);font-size:18px;line-height:1.8}
.signature-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.signature-card,.favorite-card,.brew-item{background:var(--panel);border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.signature-card:hover,.favorite-card:hover,.brew-item:hover{transform:translateY(-6px);box-shadow:0 34px 86px rgba(0,0,0,.48),0 0 28px rgba(255,208,138,.06);border-color:rgba(255,208,138,.16)}
.signature-card{padding:24px;position:relative}
.tag,.bottom-badge,.top-label{display:inline-flex;width:max-content;padding:9px 12px;border-radius:999px;border:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.03)}
.tag{background:rgba(125,13,66,.24);color:#ffd1e2}
.bottom-badge{margin-top:18px;background:rgba(255,208,138,.10);color:#ffd9a4}
.image-shell{margin-top:18px;height:320px;border-radius:26px;display:grid;place-items:center;background:radial-gradient(circle at center, rgba(255,255,255,.08), transparent 58%)}
.image-shell img{max-height:94%;width:auto;object-fit:contain;filter:drop-shadow(0 24px 50px rgba(0,0,0,.45))}
.card-copy{margin-top:18px}.signature-card h3{margin:0;font-size:42px;line-height:.95}.signature-card p{margin:12px 0 0;color:var(--muted);font-size:17px;line-height:1.8}

.section-brown{background:radial-gradient(circle at top center, rgba(255,255,255,.04), transparent 24%),linear-gradient(180deg,#4a281d,#341d17)}
.brews-grid{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.brew-item{padding:22px 18px 26px;text-align:center}
.brew-image{height:220px;border-radius:24px;display:grid;place-items:center;background:radial-gradient(circle at center, rgba(255,255,255,.09), transparent 60%)}
.brew-image img{max-height:186px;width:auto;object-fit:contain}.brew-item h3{margin:18px 0 0;font-size:34px;line-height:1}

.favorites-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.favorite-card{padding:24px}
.favorite-image{height:290px;border-radius:24px;display:grid;place-items:center;background:radial-gradient(circle at center, rgba(255,255,255,.08), transparent 58%)}
.favorite-image img{max-height:92%;width:auto;object-fit:contain;filter:drop-shadow(0 24px 50px rgba(0,0,0,.4))}
.favorite-card h3{margin:18px 0 0;font-size:40px;line-height:.96}.favorite-card p{margin:10px 0 0;color:var(--muted);line-height:1.8;font-size:17px}

.reviews-section .center-head{max-width:860px}
.reactions-grid{margin-top:34px;display:grid;grid-template-columns:.75fr 1.25fr;gap:36px;align-items:center}
.review-count,.review-display{min-height:260px;display:flex;flex-direction:column;justify-content:center}
.count-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#e9d4bf}
.count-number{margin-top:12px;font-family:'Poorich',Georgia,serif;font-size:112px;line-height:.85;display:flex;align-items:flex-start;gap:4px}
.count-number small{font-size:56px;color:var(--gold);transform:translateY(14px)}
.review-count p{margin:16px 0 0;color:var(--muted);line-height:1.8;font-size:17px}
.review-display p{margin:16px 0 0;max-width:760px;font-family:'Poorich',Georgia,serif;font-size:48px;line-height:1.06;transition:opacity .45s ease}
.review-display .stars{font-size:30px;letter-spacing:6px;color:#ffd78d}

.gallery-section{background:rgba(255,255,255,.02);padding-bottom:16px}
.gallery-grid{margin-top:40px;display:grid;gap:18px;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:340px 260px}
.gallery-grid>div{overflow:hidden;border-radius:30px;border:1px solid var(--line);box-shadow:var(--shadow)}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
.gallery-tall{grid-row:1 / span 2}.gallery-wide{grid-column:2 / span 2}

.location-wrap{margin-top:8px}
.location-block{
  width:min(980px,100%);margin:0 auto;padding:14px 20px;background:#000;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)
}
.location-meta{width:100%;margin:0;display:flex;align-items:center;justify-content:space-between;gap:14px}
.location-copy{margin:0;font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;order:2;text-align:right}
.location-actions{margin:0;flex-shrink:0;order:1}

#location.section{padding-top:14px;padding-bottom:14px}
.online-strip{margin-top:8px}
.online-strip h3{margin:0 0 8px;text-align:center;font-size:54px;line-height:1}
.apps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center}
.app-logo{display:grid;place-items:center;min-height:60px}
.app-logo img{max-width:92%;max-height:50px;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.18))}

.social-strip{margin-top:8px;text-align:center}
.social-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.social-link{width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);transition:.2s ease}
.social-link img{width:24px;height:24px;object-fit:contain}

.site-footer{padding:8px 0 18px;text-align:center;color:#bbaea5;font-size:20px;line-height:1.4}

[dir="rtl"] body{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
[dir="rtl"] .header-row,[dir="rtl"] .hero-grid{direction:rtl}
[dir="rtl"] .nav{flex-direction:row-reverse}
[dir="rtl"] .hero-copy{text-align:right}
[dir="rtl"] .count-number{justify-content:flex-end}
[dir="rtl"] .review-display{text-align:right}
[dir="rtl"] .lang-toggle{direction:ltr}
[dir="rtl"] .location-meta{flex-direction:row-reverse}
[dir="rtl"] .location-copy{order:1;text-align:left}
[dir="rtl"] .location-actions{order:2}

@media (max-width:1160px){
  .hero-grid,.reactions-grid{grid-template-columns:1fr}
  .signature-grid,.favorites-grid{grid-template-columns:1fr 1fr}
  .brews-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:300px 260px 260px}
  .gallery-tall{grid-row:auto}.gallery-wide{grid-column:1 / -1}
}
@media (max-width:820px){
  .nav{display:none}.wrap{width:min(100% - 28px,1240px)}.brand img{height:66px}
  .hero{padding-top:40px}.hero h1{font-size:46px}.hero-stage{min-height:420px}
  .hero-caption{font-size:11px;padding:10px 14px;bottom:16px}
  .center-head h2.one-line{white-space:normal}
  .signature-grid,.favorites-grid,.brews-grid,.apps-row{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto}.gallery-wide{grid-column:auto}
  .review-display p{font-size:34px}.count-number{font-size:82px}
  .location-meta{flex-direction:column;align-items:flex-start}
  .location-copy{white-space:normal;font-size:14px;order:2;text-align:left}
  .location-actions{order:1}
  .site-footer{font-size:16px}
  [dir="rtl"] .location-meta{align-items:flex-end}
  [dir="rtl"] .location-copy{text-align:right}
}


/* ===== V21 final overrides ===== */
#loader{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}
.loader-cup{
  width:220px !important;
  height:240px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.loader-cup svg{width:100%;height:auto;display:block}
.loader-text{
  margin-top:18px !important;
  font-size:1.2rem !important;
  letter-spacing:4px !important;
}
.loader-sub{
  margin-top:6px !important;
  font-size:.78rem !important;
}

/* remove extra visual space at the bottom */
.gallery-section{padding-bottom:8px !important;}
.location-wrap{margin-top:4px !important;}
.location-block{
  width:min(980px,100%) !important;
  padding:12px 18px !important;
}
.location-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.location-actions{order:1 !important; flex-shrink:0 !important;}
.location-copy{
  order:2 !important;
  margin:0 !important;
  white-space:nowrap !important;
  text-align:right !important;
  font-size:13px !important;
  line-height:1.3 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#location.section{
  padding-top:8px !important;
  padding-bottom:8px !important;
}
.online-strip{margin-top:4px !important;}
.online-strip h3{
  margin:0 0 6px !important;
}
.apps-row{
  gap:6px !important;
}
.app-logo{
  min-height:54px !important;
}
.app-logo img{
  max-height:44px !important;
}
.social-strip{
  margin-top:6px !important;
}
.social-links{
  gap:10px !important;
}
.site-footer{
  padding:4px 0 14px !important;
  font-size:22px !important;
}
.review-count .count-number.loading-review{
  opacity:.75;
}
@media (max-width:820px){
  .location-meta{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .location-copy{
    white-space:normal !important;
    text-align:left !important;
    font-size:14px !important;
  }
  [dir="rtl"] .location-meta{
    align-items:flex-end !important;
  }
  [dir="rtl"] .location-copy{
    text-align:right !important;
  }
  .site-footer{font-size:17px !important;}
}
[dir="rtl"] .location-meta{
  flex-direction:row-reverse !important;
}
[dir="rtl"] .location-copy{
  order:1 !important;
  text-align:left !important;
}
[dir="rtl"] .location-actions{
  order:2 !important;
}


/* ===== V22 final hero styling ===== */
.hero-headline{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero-headline .line{
  display:block;
  margin:0;
}
.hero-headline .line-accent-top{
  background:linear-gradient(135deg,#ffd7a3 0%, #ff9ac3 55%, #d28cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-headline .line-middle{
  color:var(--text);
}
.hero-headline .line-accent-bottom{
  background:linear-gradient(135deg,#9ee7ff 0%, #b7ffcf 45%, #ffe08a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy p{
  margin-top:24px;
}
@media (max-width:820px){
  .hero-headline{gap:4px}
}


/* ===== V25 Arabic font + performance ===== */
[dir="rtl"] body{
  font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif !important;
  text-rendering:optimizeLegibility;
}
[dir="rtl"] .hero h1,
[dir="rtl"] .section h2,
[dir="rtl"] .signature-card h3,
[dir="rtl"] .brew-item h3,
[dir="rtl"] .favorite-card h3,
[dir="rtl"] .visit-title,
[dir="rtl"] .online-strip h3,
[dir="rtl"] .site-footer{
  font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif !important;
  line-height:1.2 !important;
  padding-bottom:.08em;
}
[dir="rtl"] .hero-headline{gap:14px}
[dir="rtl"] .hero-copy p,
[dir="rtl"] .center-head p,
[dir="rtl"] .signature-card p,
[dir="rtl"] .favorite-card p,
[dir="rtl"] .location-copy{
  line-height:1.9 !important;
}
img[loading="lazy"]{content-visibility:auto;}


/* ===== TRUE HERO REBUILD ===== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 96px);
  padding: 68px 0 84px;
}
.hero-bg-a,
.hero-bg-b {
  display: none !important;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(123,13,67,.28), transparent 24%),
    radial-gradient(circle at 20% 20%, rgba(221,182,134,.10), transparent 18%),
    linear-gradient(180deg, rgba(10,7,9,.22), rgba(8,6,7,.88)),
    url("assets/store-front.webp") center/cover no-repeat;
  filter: saturate(1.04);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(8,6,7,.95) 0%,
    rgba(8,6,7,.82) 40%,
    rgba(8,6,7,.42) 72%,
    rgba(8,6,7,.72) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-grid {
  align-items: center;
}
.hero-visual {
  position: relative;
}
.hero-stage {
  position: relative;
  min-height: 720px;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .9s ease, transform 1.2s ease;
  transform: scale(1.01);
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}
.hero-slide img {
  width: min(92%, 620px);
  height: auto;
  max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 28px 55px rgba(0,0,0,.42));
}
.hero-slide.active img {
  animation: heroFloatY 4.4s ease-in-out infinite;
}
@keyframes heroFloatY {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
.hero-caption {
  z-index: 3;
  bottom: 18px;
  background: rgba(7,7,7,.74);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.hero-copy {
  position: relative;
  z-index: 3;
}

/* ===== CINEMATIC IMAGE SECTION ===== */
.cinematic-view {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: #090608;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.cinematic-fill,
.cinematic-overlay,
.cinematic-main {
  position: absolute;
  inset: 0;
}
.cinematic-fill {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(18px) brightness(.42);
  transform: scale(1.08);
  opacity: 1;
  transition: opacity 1.2s ease;
}
.cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(8,6,7,.95), rgba(8,6,7,.34), rgba(8,6,7,.92)),
    radial-gradient(circle at right, rgba(123,13,67,.18), transparent 28%);
  z-index: 1;
}
.cinematic-main {
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 34px 42px;
  opacity: 1;
  transition: opacity 1.2s ease;
}
@media (max-width: 1100px) {
  .hero-stage { min-height: 560px; }
  .hero-slide img { width: min(92%, 520px); }
  .cinematic-view { min-height: 440px; }
}
@media (max-width: 820px) {
  .hero { padding-top: 34px; }
  .hero-stage { min-height: 420px; }
  .hero-slide img { width: min(96%, 360px); max-height: 76%; }
  .cinematic-view { min-height: 320px; }
  .cinematic-main { padding: 18px 16px; }
}


/* ===== Hero storefront visibility refinement ===== */
.hero-bg {
  background:
    radial-gradient(circle at 74% 30%, rgba(123,13,67,.14), transparent 24%),
    radial-gradient(circle at 16% 20%, rgba(221,182,134,.04), transparent 18%),
    linear-gradient(90deg, rgba(8,6,7,.97) 0%, rgba(8,6,7,.90) 28%, rgba(8,6,7,.64) 52%, rgba(8,6,7,.30) 72%, rgba(8,6,7,.18) 100%),
    linear-gradient(180deg, rgba(10,7,9,.16), rgba(8,6,7,.70)),
    url("assets/store-front.webp") 72% center / cover no-repeat !important;
  filter: saturate(1.06) brightness(1.02);
}

.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(8,6,7,.98) 0%,
    rgba(8,6,7,.92) 34%,
    rgba(8,6,7,.60) 56%,
    rgba(8,6,7,.22) 78%,
    rgba(8,6,7,.08) 100%
  ) !important;
}

/* ===== Guest reactions with cinematic background ===== */
.cinematic-reviews {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cinematic-reviews .wrap {
  position: relative;
  z-index: 2;
}

.cinematic-reviews::before,
.cinematic-reviews::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cinematic-reviews::before {
  z-index: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(14px) brightness(.32);
  transform: scale(1.08);
  opacity: 1;
  transition: opacity 1.1s ease, background-image 1.1s ease;
}

.cinematic-reviews::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,7,7,.88), rgba(7,7,7,.52), rgba(7,7,7,.86)),
    radial-gradient(circle at center, rgba(125,13,66,.12), transparent 34%);
}

.cinematic-reviews .review-count,
.cinematic-reviews .review-display {
  background: rgba(7,7,7,.18);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 18px 22px;
}

@media (max-width: 820px) {
  .cinematic-reviews .review-count,
  .cinematic-reviews .review-display {
    padding: 14px 16px;
    border-radius: 18px;
  }
}



/* ===== VISIBLE RIGHT HERO BACKGROUND FIX ===== */
.hero-stage{
  border-radius: 38px !important;
  overflow: hidden !important;
}

.hero-bg{
  border-radius: 0 !important;
  background:
    linear-gradient(90deg,
      rgba(8,6,7,.98) 0%,
      rgba(8,6,7,.96) 22%,
      rgba(8,6,7,.78) 42%,
      rgba(8,6,7,.44) 62%,
      rgba(8,6,7,.16) 82%,
      rgba(8,6,7,.08) 100%
    ),
    radial-gradient(circle at 78% 22%, rgba(140,20,80,.20), transparent 24%),
    url("assets/store-front.webp") 82% center / cover no-repeat !important;
  filter: saturate(1.08) brightness(1.04);
}

.hero-overlay{
  background: none !important;
}

/* ===== GUEST REACTIONS BACKGROUND MORE VISIBLE ===== */
.cinematic-reviews{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cinematic-reviews .wrap{
  position: relative;
  z-index: 2;
}
.cinematic-reviews::before,
.cinematic-reviews::after{
  content:"";
  position:absolute;
  inset:0;
}
.cinematic-reviews::before{
  z-index:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter: blur(6px) brightness(.62) saturate(1.03);
  transform: scale(1.05);
  opacity:1;
  transition: opacity 1.1s ease, background-image 1.1s ease;
}
.cinematic-reviews::after{
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(7,7,7,.78) 0%,
      rgba(7,7,7,.58) 24%,
      rgba(7,7,7,.40) 50%,
      rgba(7,7,7,.58) 76%,
      rgba(7,7,7,.78) 100%
    ),
    linear-gradient(180deg,
      rgba(7,7,7,.28) 0%,
      rgba(7,7,7,.12) 18%,
      rgba(7,7,7,.12) 82%,
      rgba(7,7,7,.28) 100%
    );
}

.cinematic-reviews .review-count,
.cinematic-reviews .review-display{
  background: rgba(7,7,7,.22) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

@media (max-width: 820px){
  .hero-bg{
    background:
      linear-gradient(180deg,
        rgba(8,6,7,.76) 0%,
        rgba(8,6,7,.56) 32%,
        rgba(8,6,7,.28) 62%,
        rgba(8,6,7,.16) 100%
      ),
      url("assets/store-front.webp") 72% center / cover no-repeat !important;
  }
  .cinematic-reviews::before{
    filter: blur(4px) brightness(.64);
  }
}


/* ===== PATCH: storefront stronger on right, no curve feel ===== */
.hero-bg{
  background:
    linear-gradient(90deg,
      rgba(8,6,7,.985) 0%,
      rgba(8,6,7,.96) 18%,
      rgba(8,6,7,.84) 34%,
      rgba(8,6,7,.54) 52%,
      rgba(8,6,7,.22) 74%,
      rgba(8,6,7,.10) 100%
    ),
    radial-gradient(circle at 80% 22%, rgba(145,28,88,.18), transparent 22%),
    url("assets/store-front.webp") 88% center / 112% auto no-repeat !important;
  border-radius: 0 !important;
}

.hero-stage{
  overflow: hidden !important;
  border-radius: 34px !important;
}

/* ===== PATCH: cinematic behind Guest Reactions, visible but readable ===== */
.cinematic-reviews{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cinematic-reviews::before,
.cinematic-reviews::after{
  content:"";
  position:absolute;
  inset:0;
}

.cinematic-reviews::before{
  z-index:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter: blur(12px) brightness(.28) saturate(1.02);
  transform: scale(1.08);
  opacity:1;
}

.cinematic-reviews::after{
  z-index:1;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.82;
}

.cinematic-reviews .wrap{
  position:relative;
  z-index:2;
}

.cinematic-reviews .center-head,
.cinematic-reviews .reactions-grid{
  background: transparent !important;
}

.cinematic-reviews .review-count,
.cinematic-reviews .review-display{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.cinematic-reviews .review-count{
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.cinematic-reviews .review-display{
  text-shadow: 0 2px 18px rgba(0,0,0,.50);
}

@media (max-width: 820px){
  .hero-bg{
    background:
      linear-gradient(180deg,
        rgba(8,6,7,.76) 0%,
        rgba(8,6,7,.58) 28%,
        rgba(8,6,7,.34) 58%,
        rgba(8,6,7,.18) 100%
      ),
      url("assets/store-front.webp") 78% center / cover no-repeat !important;
  }

  .cinematic-reviews::after{
    background-size: cover;
    opacity: .42;
  }
}



/* ===== FINAL FIX: Hero + Cinematic + Arabic ===== */

/* Hero storefront more right and a little zoomed, full rectangular feel */
.hero-bg{
  background:
    linear-gradient(90deg,
      rgba(8,6,7,.985) 0%,
      rgba(8,6,7,.96) 18%,
      rgba(8,6,7,.83) 34%,
      rgba(8,6,7,.53) 54%,
      rgba(8,6,7,.20) 76%,
      rgba(8,6,7,.08) 100%
    ),
    radial-gradient(circle at 80% 20%, rgba(145,28,88,.16), transparent 22%),
    url("assets/store-front.webp") 90% center / 116% auto no-repeat !important;
  filter: saturate(1.08) brightness(1.04);
}
.hero-stage{
  border-radius: 34px !important;
  overflow: hidden !important;
}

/* Make cinematic images visible and contained behind Guest Reactions */
.cinematic-reviews{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cinematic-reviews .wrap{
  position: relative;
  z-index: 2;
}
.cinematic-reviews::before,
.cinematic-reviews::after{
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
}
.cinematic-reviews::before{
  z-index: 0;
  background-size: cover;
  filter: blur(8px) brightness(.58) saturate(1.02);
  transform: scale(1.06);
  opacity: 1;
  transition: background-image 1.0s ease;
}
.cinematic-reviews::after{
  z-index: 1;
  background-size: contain;
  opacity: .48;
  transition: background-image 1.0s ease;
}
.cinematic-reviews .review-count,
.cinematic-reviews .review-display{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* Arabic hero: product image a bit left, headline wider, less vertical drop */
[dir="rtl"] .hero-grid{
  grid-template-columns: 1.02fr .98fr;
  gap: 26px;
}
[dir="rtl"] .hero-copy{
  max-width: none;
  padding-left: 34px;
}
[dir="rtl"] .hero h1{
  max-width: none;
  line-height: 1.04;
  font-size: clamp(42px, 6.5vw, 82px);
}
[dir="rtl"] .hero p{
  max-width: none;
}
[dir="rtl"] .hero-headline{
  gap: 8px;
}
[dir="rtl"] .hero-slide img{
  margin-right: auto;
  margin-left: 0;
  width: min(94%, 590px);
}
[dir="rtl"] .hero-slide.active img{
  animation: heroFloatYRTL 4.4s ease-in-out infinite;
}
@keyframes heroFloatYRTL{
  0%,100% { transform: translate(-8%, 0); }
  50% { transform: translate(-8%, -14px); }
}

/* Arabic reviews: move counter area to the right */
[dir="rtl"] .reactions-grid{
  grid-template-columns: 1.1fr .9fr;
}
[dir="rtl"] .review-count{
  order: 2;
  align-items: flex-end;
  text-align: right;
}
[dir="rtl"] .review-display{
  order: 1;
  text-align: right;
}
[dir="rtl"] .count-number{
  justify-content: flex-end;
}
[dir="rtl"] .count-number small{
  order: -1;
  transform: translateY(10px);
}

/* Mobile Arabic cleanup */
@media (max-width: 820px){
  [dir="rtl"] .hero-grid{
    grid-template-columns: 1fr;
  }
  [dir="rtl"] .hero-copy{
    padding-left: 0;
  }
  [dir="rtl"] .hero h1{
    font-size: clamp(36px, 10vw, 54px);
  }
  [dir="rtl"] .hero-slide img{
    width: min(96%, 360px);
    margin: 0 auto;
  }
  [dir="rtl"] .hero-slide.active img{
    animation: heroFloatY 4.4s ease-in-out infinite;
  }
}


/* ===== FINAL PATCH: Arabic hero image + cinematic readability ===== */

/* Slightly darker overlay for cinematic readability, easy to remove later */
.cinematic-reviews::before{
  filter: blur(8px) brightness(.52) saturate(1.02) !important;
  transition: background-image .8s ease-in-out;
}
.cinematic-reviews::after{
  opacity: .56 !important;
  transition: background-image .8s ease-in-out;
}

/* Arabic hero image should not cut from the left */
[dir="rtl"] .hero-stage{
  overflow: visible !important;
}
[dir="rtl"] .hero-slide{
  justify-items: start !important;
  padding-inline-start: 20px;
}
[dir="rtl"] .hero-slide img{
  width: min(96%, 640px) !important;
  max-width: none !important;
  max-height: 84% !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  transform-origin: left center !important;
}

@media (max-width: 820px){
  [dir="rtl"] .hero-stage{
    overflow: hidden !important;
  }
  [dir="rtl"] .hero-slide{
    justify-items: center !important;
    padding-inline-start: 0;
  }
  [dir="rtl"] .hero-slide img{
    width: min(96%, 380px) !important;
    object-position: center !important;
    margin: 0 auto !important;
  }


/* ===== SEO pack scroll cue visibility fix ===== */
.scroll-cue{
  position:absolute !important;
  left:50% !important;
  bottom:clamp(110px,14vh,170px) !important;
  transform:translateX(-50%) !important;
  z-index:30 !important;
}
.scroll-cue.hidden{
  opacity:0 !important;
  pointer-events:none !important;
}