/* =========================================================
   SHOP LOOK (customer pages only; Staff, driver and tracking
   pages do not load this file). Loaded after styles.css.
   ========================================================= */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #BE9756; }

:root { --tile: 18px; --ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- shared: buttons, header, bottom bar ---------- */
.btn { border-radius: 999px; gap: 10px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(3px); }
#addBtn svg, #addBtn:hover svg { transform: none; }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: #f1f1f1; }
.btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.input, .field input, .field select, .field textarea { border-radius: 12px; }

.site-header { transition: box-shadow .25s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.cart-count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.bottom-nav { box-shadow: 0 -8px 24px rgba(0,0,0,.12); }   /* square corners: rounded ones showed white spots over the page */
.bottom-nav a { transition: color .2s; }
.bottom-nav a::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--gilt); transform: scale(0); transition: transform .25s var(--ease); }
.bottom-nav a[aria-current="page"]::after { transform: scale(1); }
.bottom-nav a svg { transition: transform .2s var(--ease); }
.bottom-nav a:active svg { transform: scale(.85); }

/* scroll reveal (only when JS turns it on and motion is allowed) */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; }

.eyebrow { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gilt); margin: 0 0 10px; font-weight: 500; }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 13px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; vertical-align: 1px; }

/* ---------- home: dark hero ---------- */
.hero2 { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 22px 0 30px; }
body[data-page="home"] { transition: --glow 1s ease; }
/* home only: the header logo takes the colour of the spray on show */
body[data-page="home"] .site-header .logo { background: var(--glow); filter: brightness(1.15);
  -webkit-mask: url(../img/logo_white.png) center / contain no-repeat content-box; mask: url(../img/logo_white.png) center / contain no-repeat content-box; }
body[data-page="home"] .site-header .logo img { opacity: 0; }
.hero2::before { content: ""; position: absolute; inset: -20% -30% auto; height: 90%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .28; pointer-events: none; }
.hero2-inner { position: relative; display: grid; gap: 18px; }
.hero2 .eyebrow { color: var(--glow); filter: brightness(1.15); }   /* follows the spray on show, like "your sense." */
.hero2 h1 { font-size: clamp(46px, 13vw, 76px); line-height: .92; letter-spacing: -.01em; color: #fff; }
.hero2 h1 .line2 { display: block; font-style: italic; color: var(--glow); filter: brightness(1.15); padding-inline-start: 12vw; }   /* follows the colour of the spray on show */
/* Arabic: the shadda of "حدّث" sits high in this font and touched the line above, so the word is written without it
   and the shadda is drawn here, lower, right over the dal (positions are in em, so they scale with the title) */
html[lang="ar"] .hero2 h1 { line-height: 1.02; position: relative; }
html[lang="ar"] .hero2 h1::before { content: "\FE7C"; content: "\FE7C" / ""; position: absolute; right: .84em; top: .34em; transform: translateX(50%); line-height: 1; }
html[lang="ar"] .hero2 h1 .line2 { font-style: normal; }
html[lang="ar"] .hero2 .eyebrow { margin-bottom: 14px; }
.hero2-art { position: relative; display: block; border-radius: 26px; overflow: hidden; background: #1A1A1A; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px rgba(0,0,0,.45); isolation: isolate; }
/* the photo sits on top; the name and price sit in a bar under it, so nothing covers the bottle */
.hero2-slides { position: relative; aspect-ratio: 4 / 5; background: var(--card); overflow: hidden; }
.hero2-slides .hero-slide { position: absolute; inset: 0; }
.hero2 .hero-slide { opacity: 0; transform: scale(1.1); transition: opacity 1s ease, transform 6s linear; }
.hero2 .hero-slide.on { opacity: 1; transform: scale(1); }
/* the switch clip plays on top of the slides; the slides do not move by themselves then */
.hero2-slides.sw .hero-slide { transform: none; transition: opacity .2s; }
.hero-switch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .25s; }
.hero-switch.on { opacity: 1; }
.hero2 .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero2 .hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; transition: opacity .6s ease; }
.hero2 .hero-vid.ready { opacity: 1; }
.hero2 .hero-tag {
  position: relative; margin: 0;
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px;
  background: #1A1A1A; color: #fff; border-top: 2px solid var(--glow);
}
html[dir="rtl"] .hero2 .hero-tag { padding: 14px 18px 14px 14px; }
.hero-tag-name { display: grid; flex: 1; min-width: 0; line-height: 1.1; }
.hero2 .hero-tag b { font-family: var(--display); font-size: 26px; font-weight: 600; filter: brightness(1.35); }
.hero-tag-name small { font-size: 12px; opacity: .7; margin-top: 2px; }
.hero-tag-price { font-weight: 600; font-size: 15px; white-space: nowrap; }
.hero-go { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; flex: none; transition: transform .25s var(--ease); }
.hero-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .hero-go svg { transform: scaleX(-1); }
.hero2-art:hover .hero-go { transform: rotate(-45deg); }
.hero2 .hero-tag.swap > span:not(.hero-go) { animation: tagUp .7s var(--ease) both; }
@keyframes tagUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.scent-rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.scent-rail::-webkit-scrollbar { display: none; }
.rail-item { flex: 1 0 auto; min-width: 64px; display: grid; justify-items: center; gap: 6px; padding: 8px 6px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.6); transition: background .25s, border-color .25s, color .25s, transform .15s; }
.rail-item:active { transform: scale(.96); }
.rail-thumb { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--card); box-shadow: 0 0 0 2px transparent; transition: box-shadow .25s; }
.rail-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.3); }
.rail-name { font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1; }
.rail-bar { width: 28px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: 0; background: var(--acc); }
.rail-item.on { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: var(--acc); }
.rail-item.on .rail-thumb { box-shadow: 0 0 0 2px var(--acc); }
.rail-item.on .rail-bar i { animation: railFill 4s linear forwards; }   /* rest of the clip (2.5 s) + the still time (1.5 s) */
@keyframes railFill { to { width: 100%; } }
@media (hover: hover) { .rail-item:hover { background: rgba(255,255,255,.08); color: #fff; } }

.hero2-copy p { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.78); margin: 0; max-width: 40ch; }
.hero2 .hero-cta { display: flex; gap: 10px; margin: 18px 0 0; }
.hero2 .hero-cta .btn { flex: 1; min-height: 50px; }

/* moving word band */
.marquee { overflow: hidden; border-bottom: 1px solid var(--mist); background: #fff; padding: 14px 0; }
.marquee-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: marquee 28s linear infinite; }
.marquee span { font-family: var(--display); font-style: italic; font-size: 22px; white-space: nowrap; color: var(--ink); }
.marquee i { width: 7px; height: 7px; background: var(--gilt); transform: rotate(45deg); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee-track { animation-name: marqueeRtl; }
html[lang="ar"] .marquee span { font-style: normal; }
@keyframes marqueeRtl { to { transform: translateX(50%); } }

/* why us: three soft tiles */
.value2 { border-top: 0; gap: 8px; padding: 18px 0 26px; margin: 0; }
.value2 div { background: var(--card); border-radius: 16px; padding: 14px 8px; color: var(--ink); font-size: 11.5px; gap: 8px; }
.vr-ico { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(17,17,17,.06); }
.value2 svg { width: 20px; height: 20px; }

/* ---------- footer: dark, logo and tagline ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.55); border-top: 0; padding-top: 30px; padding-bottom: 22px; margin-top: 8px; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 46px; width: auto; margin: 0 auto; }
.site-footer .footer-tag { font-family: var(--display); font-style: italic; font-size: 20px; color: #fff; margin: 6px 0 18px; }
html[lang="ar"] .footer-tag { font-style: normal; }
.site-footer .social { margin-bottom: 16px; gap: 12px; }
.site-footer .social a { width: 44px; height: 44px; box-shadow: none; transition: transform .2s var(--ease); }
.site-footer .social a:hover { transform: translateY(-3px); }
.site-footer p { font-size: 12px; }
body[data-page="home"] .site-footer { margin-top: 0; }

/* ---------- shop page ---------- */
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 10px 0 14px; }
.shop-head h1 { font-size: 32px; white-space: nowrap; }
.shop-count { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.shop-bar { margin: 0; }
.shop-bar select { min-height: 40px; border-radius: 999px; padding: 0 14px; background-color: var(--card); border-color: transparent; font-size: 13.5px; }
.fam-chips { margin-bottom: 20px; }
.fam-chips .chip { min-height: 40px; padding: 0 14px; font-size: 13.5px; background: var(--card); border-color: transparent; transition: background .2s, color .2s; }
.fam-chips .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------- product card: tile with price and a round add button ---------- */
.grid { gap: 14px 12px; }
.card { background: #fff; border: 1px solid var(--mist); border-radius: var(--tile); overflow: hidden; gap: 0; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card-media { border: 0; border-radius: 0; aspect-ratio: 3 / 4; }
.card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--acc); opacity: .9; }
.card-media img { transition: transform .7s var(--ease); }
.card-body { padding: 10px 12px 12px; gap: 2px; }
.card-name { font-size: 21px; }
.card-meta { gap: 2px 6px; }
.card-meta .dot { width: 7px; height: 7px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.card-foot .price { margin: 0; font-size: 15.5px; }
.card-foot .price del { display: block; margin: 0; font-size: 12px; }
.card-add, .card-go {
  width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; flex: none; border-radius: 50%; border: 0;
  background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .2s var(--ease), background .2s;
}
.card-go { background: var(--card); color: var(--ink); }
.card-add svg, .card-go svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .card-go svg { transform: scaleX(-1); }
.card-add:active { transform: scale(.88); }
.card-add:disabled { background: var(--mist); color: var(--muted); opacity: 1; }
.card.is-out .card-media img { filter: grayscale(.6); opacity: .75; }
.badge { top: 10px; font-size: 10.5px; padding: 5px 10px; backdrop-filter: blur(6px); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,17,17,.1); border-color: transparent; }
  .card:hover .card-media img { transform: scale(1.06); }
  .card-add:hover { background: var(--gilt); }
}
.slider .card { flex-basis: 58%; }

/* ---------- product page ---------- */
.pdp { --acc: var(--ink); }
.gallery .dots { bottom: 38px; }
.pdp-info { position: relative; z-index: 1; background: #fff; border-radius: 26px 26px 0 0; margin: -26px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 0; }
.pdp-title h1 { font-size: 44px; line-height: .95; }
#pFamily { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp-price { font-size: 24px; }
.stock { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(47,122,87,.1); color: var(--ok); font-weight: 500; font-size: 13px; }
.stock.low { background: rgba(180,83,27,.1); color: var(--warn); }
.stock.out { background: var(--card); color: var(--muted); }
.stock::before { animation: pulse 1.8s ease-in-out infinite; }
.stock.out::before { animation: none; }
@keyframes pulse { 50% { opacity: .35; } }
.qty { border-radius: 999px; }
.buy-row .btn { min-height: 50px; }
#buyNow { min-height: 50px; }
.trust2 { background: none; padding: 0; gap: 8px; }
.trust2 div { background: var(--card); border-radius: 14px; padding: 12px 14px; }
.trust2 svg { width: 22px; height: 22px; }

.pyramid { gap: 14px; }
.pyramid .note-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; }
.note-lvl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding-top: 7px; }
.lvl { display: inline-block; height: 10px; border-radius: 2px; background: var(--acc); }
.lvl1 { width: 6px; opacity: .45; } .lvl2 { width: 10px; opacity: .7; } .lvl3 { width: 14px; }
.note-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.note-chips span { padding: 5px 12px; border-radius: 999px; font-size: 13.5px; background: color-mix(in srgb, var(--acc) 12%, #fff); border: 1px solid color-mix(in srgb, var(--acc) 25%, #fff); }
.meter div { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; }
.meter b { font-weight: 500; }
.meter .bar { height: 6px; border-radius: 3px; background: #fff; overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.meter .segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.meter .segs i { height: 6px; border-radius: 3px; background: #fff; }
.meter .segs i.on { background: var(--acc); }
details.acc summary::after { transition: transform .25s var(--ease); }
details.acc[open] .acc-body { animation: accIn .35s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }
.sticky-buy .btn { min-height: 48px; }

/* ---------- bag ---------- */
.bag-head { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 14px; }
.ship-card { background: var(--card); border-radius: 16px; padding: 14px; margin-bottom: 6px; }
.ship-card-top { display: flex; align-items: center; gap: 12px; }
.ship-card-top p { margin: 0; font-weight: 500; }
.ship-ico { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.ship-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ship-card .ship-bar { height: 8px; border-radius: 4px; background: #fff; margin-top: 12px; }
.ship-card .ship-bar i { border-radius: 4px; background: linear-gradient(90deg, var(--ink), var(--gilt)); transition: width .6s var(--ease); position: relative; overflow: hidden; }
.ship-card .ship-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: shine 2.2s ease-in-out infinite; }
@keyframes shine { to { transform: translateX(100%); } }
.ship-card.done { background: rgba(47,122,87,.1); }
.ship-card.done .ship-bar i { background: var(--ok); }
.ship-card.done .ship-ico svg { stroke: var(--ok); }
#cartLines .line { border: 1px solid var(--mist); border-radius: 16px; padding: 10px; margin-top: 10px; grid-template-columns: 84px 1fr; }
#cartLines .line .thumb { border-radius: 12px; }
.line .qty { border-radius: 999px; }
.bag-empty { display: grid; justify-items: center; gap: 4px; }
.empty-ico { width: 76px; height: 76px; border-radius: 50%; background: var(--card); display: grid; place-items: center; margin-bottom: 8px; }
.empty-ico svg { width: 32px; height: 32px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.summary-wrap { margin-top: 8px; }

/* ---------- checkout and thank-you ---------- */
.checkout-summary, .order-box { border-radius: 16px; }
.step { background: #fff; }
.confirm .check-ring { animation: pop .6s var(--ease) both; }
.confirm .check-ring svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s .35s var(--ease) forwards; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- computers ---------- */
@media (min-width: 720px) {
  .hero2 { padding: 64px 0 72px; }
  .hero2::before { inset: -30% -10% auto 30%; height: 130%; }
  .hero2-inner { grid-template-columns: 1fr minmax(360px, 480px); grid-template-rows: auto auto 1fr; gap: 0 64px; align-items: start; }
  .hero2-head { grid-column: 1; grid-row: 1; align-self: end; padding-top: 40px; }
  .hero2-copy { grid-column: 1; grid-row: 2; margin-top: 26px; }
  .scent-rail { grid-column: 1; grid-row: 3; align-self: start; margin: 36px 0 0; padding: 0; max-width: 560px; }
  .hero2-art { grid-column: 2; grid-row: 1 / span 3; }
  .hero2 h1 { font-size: clamp(72px, 8vw, 116px); }
  .hero2 h1 .line2 { padding-inline-start: 4rem; }
  .hero2-copy p { font-size: 18px; }
  .hero2 .hero-cta { gap: 14px; margin-top: 28px; }
  .hero2 .hero-cta .btn { flex: 0 0 auto; min-height: 54px; padding: 0 30px; font-size: 16px; }
  .rail-item { min-width: 90px; }
  .marquee { padding: 18px 0; }
  .marquee span { font-size: 28px; }
  .value2 { gap: 16px; padding: 40px 0 56px; }
  .value2 div { padding: 26px 16px; font-size: 14px; border-radius: 20px; }
  .vr-ico { width: 56px; height: 56px; }
  .value2 svg { width: 26px; height: 26px; }
  .shop-head { margin: 16px 0 18px; }
  .shop-head h1 { font-size: 48px; }
  .fam-chips { margin: 0 0 32px; padding: 2px 0; }
  .grid { gap: 28px 22px; }
  .card-body { padding: 14px 16px 16px; }
  .card-name { font-size: 24px; }
  .slider .card { flex-basis: 30%; }
  .pdp-info { margin: 0; padding: 0; border-radius: 0; }
  .gallery .dots { bottom: 14px; }
  .pdp-title h1 { font-size: 60px; }
  .ship-card { max-width: 640px; }
  .site-footer { padding-top: 44px; padding-bottom: 32px; }
}
@media (min-width: 1024px) { .slider .card { flex-basis: 22.5%; } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero2 .hero-slide { transform: none; }
}