/* =========================================================
   NAGHAM PERFUME — Offer banner v3 "Boutique Vitrine"
   Concept: a luxury shop-window. Product photos (normal
   rectangular photos — no cutouts needed) live inside tall
   golden ARCH frames, standing on a marble podium, inside a
   soft gold-ringed halo. A circular discount medallion, a
   sage leaf branch and floating gold sparks complete the
   composition — inspired by high-end campaign banners.
   Tokens come from style.css.
   ========================================================= */

.offer-banner { position: relative; background: linear-gradient(180deg, #fffdf8 0%, #fff 100%); padding-block: clamp(2.5rem, 5vw, 4.5rem); direction: rtl; }
.offer-banner[hidden] { display: none; }
.offer__unit { max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.offer__unit + .offer__unit { margin-block-start: clamp(2rem, 5vw, 4rem); }

/* ---------- The card ---------- */
.offer__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 4.5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: 24px;
  background: linear-gradient(180deg, #fafaf7 0%, #f1f0e9 100%);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(23,19,16,.04), 0 28px 56px -44px rgba(120,95,40,.35);
  overflow: hidden;
}
/* faint gold arc bleeding off the card edge, like the reference */
.offer__card::before {
  content: ""; position: absolute; inset-block: -12%; inset-inline-end: 30%;
  inline-size: 1px; opacity: 0;
}
.offer__card::after { content: none; }

/* ---------- Copy column ---------- */
.offer__copy { position: relative; z-index: 1; display: grid; justify-items: start; text-align: start; gap: clamp(.9rem, 2vw, 1.35rem); animation: obFadeUp .8s var(--ease-luxe) both; }

/* vertical ornament dots (reference's left rail) */
.offer__dots { position: absolute; inset-inline-start: -1.1rem; inset-block-start: 3.4rem; display: grid; gap: .55rem; }
.offer__dots i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold-light); }
.offer__dots i:first-child { background: var(--ink); }
.offer__dots i:nth-child(3) { opacity: .6; }
.offer__dots i:nth-child(4) { opacity: .35; }

.offer__eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0; font: 700 .72rem/1 var(--font-en); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-deep); }
.offer__eyebrow span { inline-size: 34px; block-size: 1.5px; background: linear-gradient(90deg, var(--gold), transparent); }

.offer__title { margin: 0; font: 700 clamp(2.2rem, 1rem + 4.2vw, 3.6rem)/1.12 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.offer__title em { font-style: normal; color: var(--gold); position: relative; }
.offer__title em::after { content: ""; position: absolute; inset-inline: 2%; inset-block-end: .04em; block-size: .14em; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold-light) 45%, transparent), transparent); z-index: -1; }
.offer__sub { margin: 0; max-inline-size: 40ch; font: 400 clamp(.95rem,.85rem + .5vw,1.08rem)/1.85 var(--font-ar); color: var(--muted); }

/* ---------- Countdown ---------- */
.offer__timer { display: inline-flex; align-items: center; gap: clamp(.3rem,1vw,.55rem); margin-block: .3rem; }
.tsep { font: 700 1.3rem/1 var(--font-en); color: var(--gold-light); font-style: normal; transform: translateY(-.4rem); }
.tbox { position: relative; min-inline-size: clamp(56px,11vw,72px); padding: .75rem .4rem .58rem; text-align: center; background: #fff; border-radius: 14px; border: 1px solid var(--hairline); box-shadow: 0 10px 24px -18px rgba(120,95,40,.45); }
.tbox b { display: block; font: 700 clamp(1.35rem,3.2vw,1.8rem)/1 var(--font-en); color: var(--ink); font-variant-numeric: tabular-nums; }
.tbox span { display: block; margin-top: .3rem; font: 400 .6rem/1 var(--font-ar); color: var(--muted); }

/* ---------- CTA ---------- */
.offer__cta { display: flex; align-items: center; gap: .8rem; margin-block-start: .4rem; flex-wrap: wrap; }
.offer__cta .buy { display: inline-flex; align-items: center; gap: .8rem; padding: .95rem 1.9rem; background: var(--ink); color: #fff; border-radius: 999px; font: 700 .92rem/1 var(--font-ar); transition: background-color .3s var(--ease-luxe),transform .3s var(--ease-luxe),box-shadow .3s var(--ease-luxe); box-shadow: 0 16px 32px -14px rgba(23,19,16,.55); }
.offer__cta .buy:hover { background: #000; transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(23,19,16,.6); }
.offer__cta .buy svg { inline-size: 18px; block-size: 18px; transition: transform .3s var(--ease-luxe); }
.offer__cta .buy:hover svg { transform: translateX(-4px); }
.offer__cta .tag { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: #fff; flex: none; box-shadow: 0 14px 28px -12px color-mix(in srgb,var(--gold) 75%,transparent); transition: transform .3s var(--ease-luxe); }
.offer__cta .tag:hover { transform: rotate(-12deg) scale(1.05); }
.offer__cta .tag svg { inline-size: 21px; block-size: 21px; }

/* =========================================================
   THE STAGE — boutique vitrine
   ========================================================= */
.offer__stage { position: relative; z-index: 1; min-block-size: clamp(320px, 30vw, 430px); display: grid; place-items: end center; }
.scene { position: relative; inline-size: 100%; block-size: 100%; min-block-size: inherit; display: flex; align-items: flex-end; justify-content: center; }

/* soft warm halo behind everything */
.scene__halo {
  position: absolute; z-index: 0; left: 50%; bottom: clamp(30px, 3.6vw, 46px);
  transform: translateX(-50%);
  inline-size: min(72%, 340px); block-size: 82%;
  border-radius: 999px 999px 26px 26px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0) 70%);
}
/* thin gold ring, slightly larger + offset — jewellery detail */
.scene__ring { display: none; }

/* leaf branch peeking from the top corner */
.scene__leaf { position: absolute; z-index: 0; inset-block-start: -4%; inset-inline-start: 0; inline-size: clamp(52px, 6.5vw, 84px); transform: rotate(14deg); opacity: .55; animation: obSway 8s ease-in-out infinite; transform-origin: bottom center; }

/* gold sparks */
.scene__spark { position: absolute; z-index: 3; border-radius: 50%; background: radial-gradient(circle, #fff 20%, var(--gold-light) 60%, transparent 70%); animation: obTwinkle 4s ease-in-out infinite; }
.scene__spark--a { inline-size: 9px; block-size: 9px; inset-block-start: 14%; inset-inline-end: 14%; }
.scene__spark--b, .scene__spark--c { display: none; }

/* marble podium under the frames */
.scene__podium {
  position: absolute; z-index: 1; left: 50%; bottom: clamp(8px, 1vw, 14px);
  transform: translateX(-50%);
  inline-size: min(86%, 430px); block-size: clamp(14px, 1.8vw, 20px);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(120,95,40,.18), transparent 72%);
  filter: blur(3px);
}
.scene__podium::after { content: none; }

/* ---------- Arch vitrine frames ---------- */
.scene__bottles {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(.6rem, 1.8vw, 1.1rem);
  padding-block-end: clamp(14px, 1.8vw, 22px); /* stand ON the podium */
}
.vitrine {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  animation: obRise .8s var(--ease-luxe) backwards;
  animation-delay: calc(var(--seq, 0) * .14s + .1s);
}
.vitrine__glass {
  position: relative;
  display: block;
  inline-size: clamp(96px, 15vw, 140px);
  aspect-ratio: 10 / 14;
  border-radius: 999px 999px 16px 16px;
  padding: clamp(8px, 1vw, 12px);
  background: linear-gradient(180deg, #fffefb 0%, #f7f5ee 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 18px 36px -20px rgba(120,95,40,.4);
  transition: transform .5s var(--ease-luxe), box-shadow .5s var(--ease-luxe), border-color .5s var(--ease-luxe);
}
/* tiny gold keystone dot at the top of each arch — the only ornament */
.vitrine__glass::before {
  content: ""; position: absolute; inset-block-start: -4px; left: 50%; transform: translateX(-50%);
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px #fafaf7;
}
.vitrine__img {
  display: block; inline-size: 100%; block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* white photo backgrounds melt into the panel → clean cutout look */
  filter: saturate(1.04) contrast(1.02);
}
/* placeholder bottle fallback keeps working inside the arch */
.vitrine__glass .obottle__ph { position: absolute; inset: 14% 24% 10%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; z-index: 1; }

.vitrine__name { max-inline-size: 130px; font: 600 .68rem/1.25 var(--font-ar); color: var(--ink-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the LEAD (biggest deal) arch: taller, richer frame, in front */
.vitrine--lead { z-index: 3; }
.vitrine--lead .vitrine__glass {
  inline-size: clamp(120px, 18.5vw, 168px);
  border-color: var(--gold);
  box-shadow: 0 26px 48px -22px rgba(120,95,40,.5);
}
.vitrine--lead .vitrine__name { font-size: .76rem; font-weight: 700; color: var(--ink); }

.vitrine:hover .vitrine__glass { transform: translateY(-6px); border-color: var(--gold); }

/* gentle phased float */
.vitrine:nth-child(1) { animation: obRise .8s var(--ease-luxe) backwards, obFloat 6.4s ease-in-out 1s infinite; }
.vitrine:nth-child(2) { animation: obRise .8s var(--ease-luxe) .14s backwards, obFloat 7.6s ease-in-out 1.2s infinite; }
.vitrine:nth-child(3) { animation: obRise .8s var(--ease-luxe) .28s backwards, obFloat 6.9s ease-in-out 1.1s infinite; }

/* ---------- Circular medallion badge (reference style) ---------- */
.scene__badge {
  position: absolute; z-index: 4;
  inset-inline-start: clamp(-.25rem, 0vw, .5rem); inset-block-start: 16%;
  inline-size: clamp(92px, 10.5vw, 122px); aspect-ratio: 1;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 16px 32px -18px rgba(150,120,50,.45);
  animation: obPop .55s var(--ease-luxe) .35s backwards, obFloat 8s ease-in-out 1.4s infinite;
}
.scene__badge small { font: 600 .62rem/1 var(--font-ar); color: var(--ink-soft); }
.scene__badge b { font: 700 clamp(1.5rem, 2.6vw, 1.95rem)/1 var(--font-en); color: var(--gold-deep); letter-spacing: -.02em; }
.scene__badge svg { inline-size: 13px; block-size: 13px; color: var(--gold); }

/* ---------- Placeholder bottle (no image at all) ---------- */
.ph-body { inline-size: 100%; flex: 1; border-radius: 10px 10px 8px 8px; background: linear-gradient(160deg,var(--g1,#e9dcc0),var(--g2,#b8892e)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35),inset -5px -6px 14px rgba(0,0,0,.14); position: relative; overflow: hidden; }
.ph-body::before { content: ""; position: absolute; left: 15%; top: 8%; inline-size: 22%; block-size: 68%; border-radius: 40%; background: linear-gradient(180deg,rgba(255,255,255,.55),transparent); }
.ph-cap { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); inline-size: 38%; block-size: 17px; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg,#2c2c2c,#171717); z-index: 2; }
.ph-collar { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); inline-size: 28%; block-size: 7px; background: linear-gradient(180deg,var(--gold-light),var(--gold-deep)); z-index: 1; }
.vitrine[data-gender="نسائي"] { --g1: #f4c9d6; --g2: #d67b96; }
.vitrine[data-gender="رجالي"] { --g1: #c3ccdb; --g2: #4b5a72; }
.vitrine[data-gender="مشترك"] { --g1: #ecdfc4; --g2: #b8892e; }


/* ---------- Motion ---------- */
@keyframes obRise { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes obFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes obFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes obTwinkle { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes obSway { 0%,100% { transform: rotate(14deg); } 50% { transform: rotate(18deg); } }
@keyframes obPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .offer__card { grid-template-columns: 1fr; gap: clamp(1.25rem,4vw,2rem); padding: clamp(1.5rem,5vw,2.25rem); border-radius: 26px; }
  .offer__card::after { inset-block-start: auto; inset-block-end: 26%; inset-inline-end: -22%; }
  .offer__copy { order: 1; justify-items: center; text-align: center; }
  .offer__dots { display: none; }
  .offer__stage { order: 2; min-block-size: clamp(300px, 78vw, 400px); }
  .offer__cta { justify-content: center; }
  .offer__sub { max-inline-size: 46ch; }
  .scene__badge { inset-block-start: 6%; }
}
@media (max-width: 440px) {
  .offer__timer { gap: .3rem; }
  .tsep { display: none; }
  .tbox { min-inline-size: 56px; border-radius: 14px; padding: .65rem .35rem .5rem; }
  .vitrine__glass { inline-size: clamp(84px, 24vw, 100px); }
  .vitrine--lead .vitrine__glass { inline-size: clamp(104px, 30vw, 126px); }
  .vitrine__name { font-size: .6rem; max-inline-size: 92px; }
  .scene__badge { inline-size: 84px; }
  .scene__badge b { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .offer__copy,.vitrine,.scene__badge,.scene__spark,.scene__leaf { animation: none !important; }
}