/* ════════════════════════════════════════════════
   WATEEN PERFUMES — PRODUCT PAGE
   ════════════════════════════════════════════════ */

body.product-page{ background:#fff; }

/* ════════════════════════════════════════════════
   NAVBAR OVERRIDE — a normal, plain, full-width navbar
   (same treatment as the category pages: no glass capsules,
   no split halves, no floating medallion — one ordinary
   opaque white bar, fixed to the top, logo centred and larger)
   ════════════════════════════════════════════════ */

body.product-page .announce{ display:none; }

body.product-page .nav{
  position:fixed;
  top:0;
}
body.product-page .nav__bar{
  max-width:none;
  padding:0 30px;
  background:#fff;
  border-bottom:1px solid rgba(58,50,42,.08);
  box-shadow:0 2px 16px -8px rgba(94,68,40,.14);
}
/* qualified as ".nav .nav__cap" so this always outranks hero.css's
   ".nav.is-stuck .nav__cap" — belt-and-suspenders alongside the
   is-stuck/is-hidden guard in hero.js */
body.product-page .nav .nav__cap{
  height:72px;
  margin:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body.product-page .nav .nav__cap--left{ padding-right:70px; }
body.product-page .nav .nav__cap--right{ padding-left:70px; }
/* the gold roundel is a hero-only flourish — here it's just the
   plain mark, centred and sized to sit comfortably in the bar */
body.product-page .nav .nav__medallion{
  width:auto; height:auto;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  box-shadow:none;
}
body.product-page .nav .nav__medallionRing{ display:none; }
body.product-page .nav .nav__medallion img{ width:72px; height:auto; }
body.product-page .nav.is-hidden{ transform:none; }

body.product-page .nav__mob{ background:#fff; border-bottom:1px solid rgba(58,50,42,.08); }
body.product-page .nav__mobTop{ min-height:76px; }
body.product-page .nav .nav__mobLogo img{ height:68px; }
body.product-page .nav .nav__burger,
body.product-page .nav .nav__pill--mob{
  margin-top:0;   /* the home page drops these to sit under its big logo */
  margin-bottom:0;
  background:none;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

body.product-page .crumb{ padding-top:88px; }
@media (max-width:1180px){
  body.product-page .crumb{ padding-top:92px; }
}

/* ---- breadcrumb (shared class name with category.css, kept local
   here so this file works standalone) ---- */
.crumb{ padding:22px 0 0; }
.crumb__inner{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.06em;
  color:var(--ink-soft);
}
.crumb__inner a{ transition:color .2s var(--ease); }
.crumb__inner a:hover{ color:var(--gold-deep); }
.crumb__inner span{ color:rgba(58,50,42,.4); }
.crumb__inner b{ font-weight:500; color:var(--ink); }

/* ---- back button ---- */
.backBtn{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px;
  font-size:11px; letter-spacing:.1em; font-weight:500;
  color:var(--ink-soft);
  transition:color .18s var(--ease), gap .18s var(--ease);
}
.backBtn svg{ width:15px; height:15px; transition:transform .18s var(--ease); }
.backBtn:hover{ color:var(--gold-deep); gap:11px; }
.backBtn:hover svg{ transform:translateX(-3px); }


/* ════════════════════════════════════════════════
   1 · PRODUCT TOP: gallery + info
   ════════════════════════════════════════════════ */

.pd{ padding:22px 0 0; }
.pd__top{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px;
  align-items:start;
}

/* ---- gallery: main photo + a row of thumbnails underneath ---- */
.pd__gallery{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pd__main{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:6px;
  background:#fff;
  box-shadow:0 30px 60px -30px rgba(20,16,12,.18);
}
.pd__main img{
  width:100%; height:100%;
  padding:44px;
  object-fit:contain; /* the whole bottle, always fully visible */
  image-rendering:auto;
}
.pd__zoom{
  position:absolute;
  right:16px; bottom:16px;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  color:var(--ink);
  box-shadow:0 8px 20px -10px rgba(94,68,40,.5);
  transition:transform .2s var(--ease);
}
.pd__zoom svg{ width:16px; height:16px; }
.pd__zoom:hover{ transform:scale(1.08); }

.pd__thumbs{
  display:flex;
  gap:12px;
}
.pd__thumb{
  position:relative;
  width:76px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:3px;
  background:#fff;
  border:1.5px solid rgba(58,50,42,.1);
  cursor:pointer;
  transition:border-color .2s var(--ease);
}
.pd__thumb img{
  width:100%; height:100%;
  padding:6px;
  object-fit:contain; /* the whole bottle, never cropped */
}
.pd__thumb.is-active{ border-color:var(--ink); }
.pd__thumb:hover{ border-color:rgba(58,50,42,.4); }

/* ---- product info ---- */
.pd__info{
  padding-top:12px;
}
.pd__brand{
  margin:0 0 10px;
  font-size:12.5px; letter-spacing:.36em; font-weight:500;
  color:var(--gold-deep);
}
.pd__lowStock{
  display:inline-block;
  margin:0 0 10px 10px;
  padding:4px 10px;
  font-family:var(--f-body);
  font-size:10px; font-weight:600; letter-spacing:.1em;
  color:#fff;
  background:#b3251e;
  border-radius:3px;
  vertical-align:middle;
}
.pd__name{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.4rem,3.6vw,3.4rem);
  line-height:1.06;
  letter-spacing:.01em;
  color:var(--ink);
}
.pd__type{
  margin:10px 0 0;
  font-size:12.5px; letter-spacing:.26em; font-weight:400;
  color:var(--ink-soft);
}
.pd__rating{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 0;
  font-size:15px;
  color:var(--gold);
}
.pd__rating i{ font-size:13px; font-style:normal; color:var(--ink-soft); }

.pd__price{
  margin:26px 0 0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:2.4rem;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.pd__price .roll{ font-variant-numeric:tabular-nums; }
.pd__price--sale .pd__priceNow{ color:#b3251e; }
.pd__priceWas{
  font-size:.6em;
  font-weight:400;
  color:var(--ink-soft);
  text-decoration:line-through;
  opacity:.7;
}
.pd__priceBadge{
  font-family:var(--f-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:#fff;
  background:#b3251e;
  padding:3px 9px;
  border-radius:3px;
  align-self:center;
}

.pd__desc{
  margin:24px 0 0;
  max-width:50ch;
  font-size:15.5px;
  line-height:1.9;
  font-weight:300;
  color:var(--ink-soft);
}
.pd__rule{
  display:block;
  width:56px; height:1px;
  margin:22px 0;
  background:linear-gradient(90deg,rgba(143,102,51,.55),transparent);
}

/* ---- size selector ---- */
.pd__sizeLabel{
  margin:0 0 12px;
  font-size:10.5px; letter-spacing:.3em; font-weight:500;
  color:var(--ink);
}
.pd__sizes{ display:flex; gap:10px; margin-bottom:26px; }
.pd__size{
  flex:1 1 0;
  padding:13px 10px;
  text-align:center;
  font-size:11px; letter-spacing:.08em;
  color:var(--ink-soft);
  border:1px solid rgba(58,50,42,.22);
  border-radius:2px;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.pd__size:hover{ border-color:var(--gold); color:var(--gold-deep); }
.pd__size.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---- buy row ---- */
.pd__buy{ display:flex; gap:12px; margin-bottom:24px; }
.pd__buy .add{ flex:1 1 auto; width:auto; min-width:0; }
.pd__wish{
  flex:0 0 auto;
  width:56px; height:56px;
  display:grid; place-items:center;
  border:1px solid rgba(58,50,42,.22);
  border-radius:2px;
  color:var(--ink-soft);
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.pd__wish svg{ width:19px; height:19px; }
.pd__wish:hover{ border-color:var(--gold); color:#c0392b; }
.pd__wish.is-on{ color:#c0392b; border-color:#c0392b; }
.pd__wish.is-on svg{ fill:#c0392b; }

/* ---- mini trust row ---- */
.pd__trust{
  display:flex;
  gap:26px;
  padding-top:22px;
  border-top:1px solid rgba(58,50,42,.14);
  flex-wrap:wrap;
}
.pd__trustItem{
  display:flex; align-items:center; gap:9px;
  font-size:10px;
  color:var(--ink-soft);
}
.pd__trustItem svg{ width:20px; height:20px; flex:0 0 auto; color:var(--ink); }
.pd__trustItem b{ display:block; font-size:10.5px; letter-spacing:.03em; font-weight:500; color:var(--ink); }
.pd__trustItem i{ font-style:normal; font-size:9px; color:var(--ink-soft); }


/* ════════════════════════════════════════════════
   2 · ABOUT / NOTES / DETAILS
   ════════════════════════════════════════════════ */

.pd__about{
  padding:70px 0 0;
}
.pd__aboutGrid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:70px;
  align-items:start;
}
.pd__aboutCol h2{
  margin:0 0 20px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.8rem;
  letter-spacing:.02em;
  color:var(--ink);
}
.pd__aboutCol > p{
  margin:0 0 22px;
  font-size:15px;
  line-height:1.9;
  font-weight:300;
  color:var(--ink-soft);
}

.pd__notes{ margin:0; }
.pd__notes dt{
  margin-top:16px;
  font-size:11.5px; letter-spacing:.16em; font-weight:600;
  color:var(--ink);
}
.pd__notes dt:first-child{ margin-top:0; }
.pd__notes dd{
  margin:4px 0 0;
  font-size:14px; font-weight:300;
  color:var(--ink-soft);
}

/* details table */
.pd__details h2{
  margin:0 0 20px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.8rem;
  letter-spacing:.02em;
  color:var(--ink);
}
.pd__detailsTable{ width:100%; border-collapse:collapse; }
.pd__detailsTable tr{ border-bottom:1px solid rgba(58,50,42,.12); }
.pd__detailsTable tr:last-child{ border-bottom:0; }
.pd__detailsTable th,
.pd__detailsTable td{
  padding:13px 0;
  text-align:left;
  font-size:14px;
  font-weight:400;
  vertical-align:top;
}
.pd__detailsTable th{ width:44%; color:var(--ink-soft); font-weight:400; }
.pd__detailsTable td{ color:var(--ink); }
.pd__stock{
  display:inline-flex; align-items:center; gap:6px;
  color:#3e7d4d;
  font-weight:500;
}
.pd__stock i{
  width:6px; height:6px; border-radius:50%;
  background:#3e7d4d;
}
.pd__stock.is-low{ color:#b3251e; }
.pd__stock.is-low i{ background:#b3251e; }
.pd__stock.is-out{ color:var(--ink-soft); }
.pd__stock.is-out i{ background:var(--ink-soft); }


/* ════════════════════════════════════════════════
   3 · QUOTE BANNER
   ════════════════════════════════════════════════ */

.pd__quote{
  position:relative;
  margin-top:56px;
  padding:52px 20px;
  text-align:center;
  overflow:hidden;
}
.pd__quoteBg{
  position:absolute; inset:0;
  object-fit:cover;
  width:100%; height:100%;
  opacity:.5;
}
.pd__quoteVeil{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(243,236,226,.92),rgba(243,236,226,.65));
}
.pd__quote blockquote{
  position:relative;
  z-index:2;
  margin:0;
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.1rem,2vw,1.5rem);
  letter-spacing:.08em;
  color:var(--ink);
}
.pd__quote span{
  position:relative; z-index:2;
  display:block;
  margin-top:14px;
  color:var(--gold);
  font-size:14px;
}


/* ════════════════════════════════════════════════
   4 · YOU MAY ALSO LIKE
   ════════════════════════════════════════════════ */

.pd__related{
  padding:64px 0 100px;
}
.pd__relatedHead{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:14px;
}
.pd__relatedTitle{
  margin:0;
  font-size:11px; letter-spacing:.36em; font-weight:500;
  color:var(--ink);
}
.pd__relatedRule{
  display:block;
  width:70px; height:1px;
  margin:0 auto 40px;
  background:linear-gradient(90deg,transparent,rgba(143,102,51,.55),transparent);
}
.pd__relatedRow{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
}
.pd__relatedTrack{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
.pd__relatedNav{
  flex:0 0 auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(58,50,42,.22);
  color:var(--ink-soft);
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.pd__relatedNav svg{ width:17px; height:17px; }
.pd__relatedNav:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px); }

/* related cards reuse .card / .card__media / .add from hero.css */
.pd__relatedTrack .card{
  align-items:stretch;
  text-align:left;
  padding:0 0 14px;
}
.pd__relatedTrack .card__media{
  /* square box that keeps its size: without this the flex column can squeeze
     it and the photo then overflows onto the name and price */
  position:relative;
  flex:0 0 auto;
  height:auto;
  aspect-ratio:1/1;
  margin-bottom:16px;
  background:#fff;
  border:1px solid rgba(58,50,42,.08);
  border-radius:2px;
}
.pd__relatedTrack .card__media img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; padding:11%; object-fit:contain; }
.pd__relatedTrack .card__brand{ text-align:left; margin-bottom:2px; }
.pd__relatedTrack .card__name{ text-align:left; font-size:15px; margin-bottom:2px; }
.pd__relatedTrack .card__type{ text-align:left; margin-bottom:6px; }
.pd__relatedTrack .card__rating{
  display:flex; align-items:center; gap:6px;
  margin:0 0 8px;
  font-size:11px;
  color:var(--gold);
}
.pd__relatedTrack .card__rating i{ font-style:normal; color:var(--ink-soft); }
.pd__relatedTrack .card__price{ text-align:left; margin:0; font-size:13px; }


/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width:1180px){
  .pd__top{ gap:28px; }
  .pd__aboutGrid{ gap:26px; }
}

@media (max-width:900px){
  .crumb__inner{ font-size:10px; }

  /* mobile: the photo takes center stage, full-width and large, with
     small thumbnails underneath — then the info stacks below in a
     comfortably-sized, legible type scale. Nothing shrinks to
     illegible sizes just to preserve the desktop's side-by-side layout. */
  .pd{ padding-top:16px; }
  .pd__top{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .pd__gallery{ gap:14px; }
  .pd__main{ border-radius:8px; }
  .pd__main img{ padding:28px; }
  .pd__zoom{ width:36px; height:36px; right:14px; bottom:14px; }
  .pd__zoom svg{ width:15px; height:15px; }
  .pd__thumbs{ gap:10px; justify-content:center; }
  .pd__thumb{ width:58px; border-radius:6px; }

  .pd__info{ padding-top:0; text-align:center; min-width:0; }
  .pd__brand{ font-size:11px; letter-spacing:.28em; margin-bottom:6px; }
  .pd__name{ font-size:1.7rem; line-height:1.12; }
  .pd__type{ font-size:10.5px; letter-spacing:.2em; margin-top:6px; }
  .pd__rating{ font-size:13px; gap:8px; margin-top:12px; justify-content:center; }
  .pd__rating i{ font-size:11.5px; }
  .pd__price{ font-size:1.55rem; margin-top:16px; }
  .pd__desc{ font-size:13.5px; line-height:1.65; max-width:none; margin-top:16px; }
  .pd__rule{ width:44px; margin:20px auto; }
  .pd__sizeLabel{ font-size:10px; letter-spacing:.2em; margin-bottom:10px; }
  .pd__sizes{ gap:8px; margin-bottom:20px; flex-wrap:wrap; justify-content:center; }
  .pd__size{ padding:10px 16px; font-size:11.5px; flex:0 1 auto; min-width:0; }
  .pd__buy{ gap:10px; margin-bottom:20px; }
  .pd__buy .add .add__label{ font-size:11.5px; letter-spacing:.1em; }
  .pd__wish{ width:46px; height:46px; }
  .pd__wish svg{ width:18px; height:18px; }
  .pd__trust{ gap:12px 10px; padding-top:18px; justify-content:center; }
  .pd__trustItem{ flex:1 1 30%; font-size:10px; }
  .pd__trustItem svg{ width:19px; height:19px; }
  .pd__trustItem b{ font-size:10.5px; }
  .pd__trustItem i{ font-size:9px; }

  .pd__about{ padding-top:48px; }
  .pd__aboutGrid{
    grid-template-columns:1fr;
    gap:36px;
  }

  .pd__quote{ margin-top:40px; padding:40px 18px; }

  .pd__related{ padding:44px 0 64px; }
  .pd__relatedTrack{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .pd__relatedNav{ display:none; }
  .pd__relatedTrack .card__name{ font-size:13.5px; }
}


/* ════════════════════════════════════════════════
   IMAGE ZOOM LIGHTBOX
   Opens from the magnifier on the gallery. The photo can be
   dragged around at any zoom level, so you can inspect the part
   you actually care about instead of a fixed centred crop.
   ════════════════════════════════════════════════ */

.zoomx{
  position:fixed; inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  background:rgba(28,22,16,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.zoomx.is-open{
  opacity:1;
  visibility:visible;
}

/* the window the photo moves inside — it clips, the image doesn't */
.zoomx__stage{
  width:100%; height:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  cursor:grab;
  /* the browser must not claim the drag/pinch gestures for scrolling */
  touch-action:none;
}
.zoomx__stage.is-panning{ cursor:grabbing; }

.zoomx__img{
  max-width:88vw;
  max-height:84vh;
  width:auto; height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  /* the script writes the full transform string straight onto the element */
  transform:translate3d(0,0,0) scale(1);
  transition:transform .18s var(--ease-out);
  will-change:transform;
}
/* while a finger/mouse is down the image must track the pointer exactly,
   so the easing is dropped for the duration of the drag */
.zoomx__img.is-dragging{ transition:none; }

.zoomx__close{
  position:absolute;
  top:20px; right:22px;
  z-index:2;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.zoomx__close svg{ width:19px; height:19px; }
.zoomx__close:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg); }

/* zoom controls */
.zoomx__bar{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.zoomx__btn{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  background:transparent;
  transition:background .18s var(--ease);
}
.zoomx__btn svg{ width:16px; height:16px; }
.zoomx__btn:hover{ background:rgba(255,255,255,.18); }
.zoomx__btn:disabled{ opacity:.35; cursor:default; }
.zoomx__btn:disabled:hover{ background:transparent; }
.zoomx__btn--wide{
  width:auto;
  padding:0 14px;
  border-radius:999px;
  font-size:9px; letter-spacing:.18em; font-weight:400;
}
.zoomx__level{
  min-width:46px;
  text-align:center;
  font-size:10.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.9);
  font-variant-numeric:tabular-nums;
}
.zoomx__sep{
  width:1px; height:18px;
  background:rgba(255,255,255,.22);
  margin:0 2px;
}

.zoomx__hint{
  position:absolute;
  top:24px; left:50%;
  transform:translateX(-50%);
  margin:0;
  font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.zoomx__hint.is-gone{ opacity:0; }

/* the gallery's magnifier is a real control now, so it reads as one */
.pd__zoom{ cursor:zoom-in; }

@media (max-width:700px){
  .zoomx__img{ max-width:94vw; max-height:74vh; }
  .zoomx__close{ top:12px; right:12px; width:38px; height:38px; }
  .zoomx__close svg{ width:16px; height:16px; }
  .zoomx__bar{ bottom:20px; gap:4px; padding:6px 8px; }
  .zoomx__btn{ width:32px; height:32px; }
  .zoomx__hint{ top:16px; font-size:8.5px; letter-spacing:.14em; }
}

/* ---- accessories: same reasoning as the shop grid override in shop.css —
   these product photos are naturally smaller/tighter than perfume bottles,
   so they need less padding inside the main gallery frame to read at a
   comparable, confident size. ---- */
.accessories-page .pd__main img{ padding:18px; }
.accessories-page .pd__thumb img{ padding:2px; }

/* ---- watches: same shared stone-podium backdrop as the watches grid
   (shop.css), applied to the product-page gallery — main frame + thumbs —
   so a single watch's own page matches the display case it was picked from.
   Same zoomed/pushed-down backdrop + pulled-down photo as the grid cards
   (see the note above .watches-page's rule in shop.css) so the watch reads
   as resting on the slab instead of floating centred in the frame. ---- */
.watches-page .pd__main,
.watches-page .pd__thumb{
  background:#e9e0d2 url('assets/bg/watches.webp') center 40%/112% 112% no-repeat;
}
.watches-page .pd__main img{ padding:8%; object-position:center 70%; }
.watches-page .pd__thumb img{ padding:8%; object-position:center 70%; }

/* ---- perfumes: same shared stone-podium backdrop as the perfumes grid
   (shop.css), applied to the product-page gallery — main frame + thumbs.
   No object-position push needed here (see the longer note in shop.css) —
   the bottle+box photos already sit correctly against a plain cover-fit
   backdrop. ---- */
.perfumes-page .pd__main,
.perfumes-page .pd__thumb{
  background:#efe6d6 url('assets/bg/perfumes.webp') center/cover no-repeat;
}