/*
 * MAWSIM · Product page (catalog:product). Loaded after shop.css.
 *
 *  1 Hero grid          5 The label (board, hotspots, popovers)
 *  2 Gallery            6 Harvest Passport
 *  3 Purchase panel     7 Related
 *  4 Story & details    8 Mobile bag bar
 */

/* ── 1 · Hero grid ─────────────────────────────────────────────────────────── */
.pdp-hero {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-s) var(--space-2xl);
}
@media (min-width: 64em) {
  .pdp-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(3rem, 1rem + 4vw, 7rem);
    align-items: start;
    padding-block: var(--space-m) var(--space-3xl);
  }
}

/* ── 2 · Gallery ───────────────────────────────────────────────────────────── */
.pdp-gallery { position: relative; min-inline-size: 0; }
.pdp-gallery__track {
  display: flex;
  gap: .5rem;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.pdp-gallery__track::-webkit-scrollbar { display: none; }
.pdp-gallery__track:focus-visible { outline-offset: -2px; }
.pdp-gallery__slide { flex: 0 0 86%; scroll-snap-align: start; min-inline-size: 0; }
.pdp-gallery__slide:only-child { flex-basis: 100%; }
.pdp-gallery__frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-s);
  background: var(--c-beige);
}
.pdp-gallery__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Extreme crops (a long back label, a tall strip) lie whole on cotton paper */
.pdp-gallery__slide--wide .pdp-gallery__frame,
.pdp-gallery__slide--tall .pdp-gallery__frame {
  background: var(--c-paper) url("../../img/texture/paper.14e96cbe7863.webp");
  background-size: 512px 512px;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px var(--line);
}
.pdp-gallery__slide--wide .pdp-gallery__img,
.pdp-gallery__slide--tall .pdp-gallery__img {
  inset: 9%;
  inline-size: 82%;
  block-size: 82%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgb(31 26 22 / .18));
}
.pdp-gallery__counter {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--space-xs);
  inset-inline-end: var(--space-xs);
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  padding: .35rem .75rem;
  border-radius: var(--radius-pill);
  background: rgb(246 241 232 / .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--f-latin-text);
  font-size: var(--step--2);
  letter-spacing: .12em;
  color: var(--c-ink);
}
.pdp-gallery__of { color: var(--c-gold-ink); }

@media (min-width: 64em) {
  .pdp-gallery__track {
    display: grid;
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .pdp-gallery__frame { aspect-ratio: var(--ar, .8); }
  .pdp-gallery__slide--wide .pdp-gallery__frame { aspect-ratio: 2 / 1; }
  .pdp-gallery__slide--tall .pdp-gallery__frame { aspect-ratio: 5 / 4; }
  .pdp-gallery__slide--wide .pdp-gallery__img { inset: 6% 7%; inline-size: 86%; block-size: 88%; }
  .pdp-gallery__slide--tall .pdp-gallery__img { inset: 7%; inline-size: 86%; block-size: 86%; }
  .pdp-gallery__counter { display: none; }
}

/* ── 3 · Purchase panel ────────────────────────────────────────────────────── */
.pdp-panel { min-inline-size: 0; }
.pdp-panel__inner { display: grid; gap: var(--space-s); }
@media (min-width: 64em) {
  .pdp-panel {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-m));
    transition: inset-block-start var(--dur-3) var(--ease-out);
  }
  body:has(.site-header.is-hidden) .pdp-panel { inset-block-start: var(--space-l); }
  .pdp-panel.is-static { position: static; }
  .pdp-panel__inner { padding-block-start: var(--space-xs); }
}
.pdp-panel .breadcrumbs { margin-block-end: var(--space-2xs); }
.pdp-panel__kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.pdp-panel__line { color: inherit; text-decoration: none; display: inline-flex; gap: .45em; align-items: baseline; min-block-size: 2.75rem; align-items: center; }
.pdp-panel__line:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.pdp-panel__title {
  font-size: clamp(2.6rem, 1.5rem + 3.2vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.pdp-panel__title:lang(ar) { line-height: 1.3; letter-spacing: 0; }
.pdp-panel__subtitle {
  font-size: var(--step--1);
  letter-spacing: .03em;
  color: var(--fg-muted);
}
.pdp-panel__subtitle:lang(ar) { letter-spacing: 0; }
.pdp-panel__short {
  margin-block-start: var(--space-2xs);
  font-family: var(--f-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-soft);
  max-inline-size: 32em;
}
.pdp-panel__short:lang(ar) { line-height: 1.85; }

.pdp-buy { display: grid; gap: var(--space-s); margin-block-start: var(--space-xs); padding-block-start: var(--space-m); border-block-start: 1px solid var(--line); }
.pdp-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.pdp-price { font-size: var(--step-4); }
.pdp-price--muted { color: var(--fg-muted); }
.pdp-buy__edition {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pdp-buy__edition:lang(ar) { font-size: var(--step--1); letter-spacing: 0; text-transform: none; }
.pdp-buy__diamond { inline-size: 6px; block-size: 6px; background: var(--c-gold); transform: rotate(45deg); flex: none; }
.pdp-variants { display: grid; gap: .6rem; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.pdp-variants legend { padding: 0; margin-block-end: .6rem; }
.pdp-variants__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-2xs); }
.pdp-variant { align-items: center; min-block-size: 4rem; }
.pdp-variant .choice__title { font-family: var(--f-display); font-size: var(--step-1); font-weight: 400; line-height: 1.2; }
.pdp-variant .choice__text { font-size: var(--step--2); }
.pdp-variant .choice__aside { font-size: var(--step--1); color: var(--fg-soft); }
.pdp-variant input { margin-block-start: 0; }
.pdp-buy__size { display: flex; align-items: baseline; gap: .9rem; font-family: var(--f-display); font-size: var(--step-1); }
.pdp-buy__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs); }
.pdp-buy__qty .qty { block-size: 3.5rem; }
.pdp-buy__qty .qty input { line-height: 3.5rem; }
.pdp-buy__add { min-block-size: 3.5rem; justify-content: space-between; padding-inline: 1.5rem; }
.pdp-buy__add-price { font-variant-numeric: tabular-nums; letter-spacing: .06em; text-transform: none; opacity: .85; }
.pdp-buy__note {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--step--1);
  color: var(--accent);
}
.pdp-buy__note::before { content: ""; inline-size: 5px; block-size: 5px; background: currentColor; transform: rotate(45deg); flex: none; }

.pdp-coming, .pdp-soldout {
  display: grid;
  gap: var(--space-s);
  margin-block-start: var(--space-xs);
  padding: var(--space-m);
  border: 1px solid color-mix(in srgb, var(--c-gold) 50%, transparent);
  border-radius: var(--radius-s);
  background: var(--c-paper) url("../../img/texture/paper.14e96cbe7863.webp");
  background-size: 512px 512px;
  background-blend-mode: multiply;
  scroll-margin-block-start: calc(var(--header-h) + var(--space-l));
}
.pdp-coming__title { font-family: var(--f-display); font-size: var(--step-3); line-height: 1.15; color: var(--fg); }
.pdp-coming__title:lang(ar) { line-height: 1.5; }
.pdp-coming__text, .pdp-coming__invite { color: var(--fg-soft); font-size: var(--step--1); }
.pdp-coming__seasons { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); }
.pdp-coming__season {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: baseline;
  padding-block: .7rem;
  border-block-end: 1px solid var(--line);
}
.pdp-coming__no { font-family: var(--f-latin-display); color: var(--accent); }
.pdp-coming__honey { font-family: var(--f-display); font-size: var(--step-1); }
.pdp-coming__when { font-size: var(--step--1); color: var(--fg-muted); text-align: end; }
.pdp-coming__season.is-now .pdp-coming__when { color: var(--c-olive); }

.pdp-services {
  display: grid;
  gap: .2rem;
  margin: var(--space-xs) 0 0;
  padding: var(--space-s) 0 0;
  list-style: none;
  border-block-start: 1px solid var(--line);
}
.pdp-services__item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  padding-block: .45rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--fg-soft);
}
.pdp-services__item .icon { --icon-size: 1.15rem; color: var(--accent); translate: 0 .2em; }
.pdp-services__item .link { color: var(--fg); }
.pdp-services__aside { color: var(--fg-muted); }

/* ── 4 · Story & details ───────────────────────────────────────────────────── */
.pdp-details__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.pdp-story { display: grid; gap: var(--space-m); min-inline-size: 0; }
.pdp-story__text { max-inline-size: 40rem; color: var(--fg-soft); }
.pdp-story__text > * + * { margin-block-start: 1.1em; }
.pdp-story__text > p:first-child {
  font-family: var(--f-display);
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--fg);
  text-wrap: pretty;
}
.pdp-story__text > p:first-child:lang(ar) { line-height: 1.7; font-size: calc(var(--step-3) * .92); }
.pdp-accordions { display: grid; gap: var(--space-m); align-content: start; min-inline-size: 0; }
.pdp-accordions .accordion:first-of-type { border-block-start: 1px solid var(--line); }
.pdp-accordions .section-label { margin-block-end: 0; }
.pdp-box { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.pdp-box li { display: flex; align-items: baseline; gap: .8rem; padding-block: .45rem; border-block-end: 1px dashed var(--line); }
.pdp-box li::before { content: ""; flex: none; inline-size: 5px; block-size: 5px; background: var(--c-gold); transform: translateY(-.2em) rotate(45deg); }
.pdp-box li:last-child { border-block-end: 0; }

.pdp-details__aside { min-inline-size: 0; }
.pdp-spec { display: grid; gap: var(--space-m); align-content: start; }
.pdp-spec .section-label { margin: 0; }
.pdp-spec [data-pdp-weight] { text-transform: none; letter-spacing: .04em; }
.pdp-notes { display: grid; gap: .7rem; }
.pdp-notes__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pdp-note {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent);
  border-radius: var(--radius-pill);
  background: rgb(246 241 232 / .6);
  font-family: var(--f-display);
  font-size: var(--step-0);
  line-height: 1.3;
  color: var(--fg);
}
.pdp-note:lang(en) { font-style: italic; }
.pdp-note::before { content: ""; inline-size: 4px; block-size: 4px; background: var(--c-gold); transform: rotate(45deg); flex: none; }
.pdp-spec__link { justify-self: start; }
@media (min-width: 64em) {
  .pdp-details__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
  .pdp-story { grid-column: 1; grid-row: 1; }
  .pdp-accordions { grid-column: 1; grid-row: 2; }
  .pdp-details__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
    transition: inset-block-start var(--dur-3) var(--ease-out);
  }
  body:has(.site-header.is-hidden) .pdp-details__aside { inset-block-start: var(--space-l); }
}

/* ── 5 · The label ─────────────────────────────────────────────────────────── */
.pdp-label { overflow: hidden; }
.pdp-label__head { display: grid; justify-items: center; gap: var(--space-s); max-inline-size: 42rem; margin: 0 auto var(--space-2xl); text-align: center; }
.pdp-label__title { font-size: var(--step-5); line-height: 1.02; }
.pdp-label__title:lang(ar) { line-height: 1.35; }
.pdp-label__lede { color: var(--fg-soft); max-inline-size: 34em; }
.pdp-label__board { display: grid; gap: var(--space-xl); align-items: start; }
.pdp-label__front { display: grid; gap: var(--space-s); margin: 0; justify-items: center; }
.pdp-label__photo { inline-size: min(100%, 26rem); }
.pdp-label__frame {
  position: relative;
  border-radius: var(--radius-s);
  box-shadow: 0 40px 60px -40px rgb(31 26 22 / .45);
}
.pdp-label__img { inline-size: 100%; border-radius: var(--radius-s); }
.pdp-label__caption {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pdp-label__caption:lang(ar) { font-size: var(--step--1); letter-spacing: 0; text-transform: none; }
.pdp-label__caption .section-label__index { color: var(--accent); letter-spacing: .14em; }

/* Hotspots — a 44px target around a small numbered seal. Physical left/top: the photo never mirrors. */
.pdp-hotspot {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  translate: -50% -50%;
  border-radius: 50%;
  color: var(--c-ivory);
  -webkit-tap-highlight-color: transparent;
}
.pdp-hotspot span {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  border-radius: 50%;
  background: rgb(31 26 22 / .86);
  box-shadow: 0 0 0 1px var(--c-gold), 0 6px 14px -4px rgb(23 20 16 / .5);
  font-family: var(--f-latin-text);
  font-size: .72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-out);
}
.pdp-hotspot span::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  opacity: 0;
  animation: pdp-ping 3.6s var(--ease-out) infinite;
  animation-delay: calc(var(--n, 0) * 420ms);
}
@keyframes pdp-ping { 0% { opacity: .9; scale: .7; } 60%, 100% { opacity: 0; scale: 1.45; } }
.pdp-hotspot:hover span, .pdp-hotspot:focus-visible span, .pdp-hotspot.is-active span, .pdp-hotspot[aria-expanded="true"] span {
  background: var(--c-gold);
  color: var(--c-ink);
  scale: 1.12;
}
.pdp-hotspot:focus-visible { outline: 2px solid var(--c-ivory); outline-offset: 0; }

.pdp-label__legend { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); counter-reset: none; }
.pdp-label__note {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-xs);
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--line);
  transition: background-color var(--dur-2) var(--ease-out);
}
.pdp-label__note.is-active { background: linear-gradient(to right, transparent, var(--tint), transparent); }
.pdp-label__num { font-family: var(--f-latin-display); font-size: var(--step-2); line-height: 1.1; color: var(--accent); }
.pdp-label__term { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.3; color: var(--fg); }
.pdp-label__term:lang(ar) { line-height: 1.6; }
.pdp-label__echo { margin-inline-start: .4em; color: var(--accent); font-size: .85em; }
.pdp-label__echo:lang(ar) { font-family: var(--f-arabic-display); }
.pdp-label__echo:lang(en) { font-family: var(--f-latin-text); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; }
.pdp-label__text { margin-block-start: .2rem; font-size: var(--step--1); color: var(--fg-soft); line-height: 1.6; }

.pdp-label__strip { display: grid; gap: var(--space-s); justify-items: center; margin: 0; }
.pdp-label__strip-img { inline-size: min(9.5rem, 100%); border-radius: var(--radius-s); box-shadow: 0 30px 50px -30px rgb(23 20 16 / .55); }

.pdp-label__wrap { display: grid; gap: var(--space-s); margin: var(--space-2xl) 0 0; }
.pdp-label__wrap-photo { overflow: hidden; border-radius: var(--radius-s); background: var(--c-night); }
.pdp-label__wrap-img { inline-size: 100%; }
.pdp-label__wrap-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem var(--space-m); align-items: baseline; }
.pdp-label__wrap-text { font-size: var(--step--1); color: var(--fg-muted); max-inline-size: 40em; }

@media (min-width: 40em) and (max-width: 63.99em) {
  .pdp-label__board { grid-template-columns: minmax(0, 1fr) auto; }
  .pdp-label__front { grid-column: 1; }
  .pdp-label__strip { grid-column: 2; grid-row: 1; align-self: center; }
  .pdp-label__legend { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .pdp-label__board { grid-template-columns: minmax(0, 5fr) minmax(0, 4.5fr) minmax(0, 2fr); gap: var(--space-2xl); align-items: center; }
  .pdp-label__strip-img { inline-size: min(10.5rem, 100%); }
}

/* Popovers (native [popover]; product.js places them beside their mark, otherwise they centre) */
.pdp-pop {
  inline-size: min(21rem, calc(100vw - 2rem));
  max-block-size: calc(100svh - 2rem);
  padding: var(--space-m) var(--space-m) var(--space-s);
  border: 1px solid color-mix(in srgb, var(--c-gold) 45%, transparent);
  border-radius: var(--radius-s);
  background: var(--c-ivory);
  color: var(--c-ink);
  box-shadow: 0 30px 60px -28px rgb(23 20 16 / .5);
  text-align: start;
  opacity: 0;
  translate: 0 .5rem;
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
}
.pdp-pop:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .pdp-pop:popover-open { opacity: 0; translate: 0 .5rem; } }
.pdp-pop.is-placed { inset: auto; margin: 0; }
.pdp-pop::backdrop { background: transparent; }
.pdp-pop__index { font-family: var(--f-latin-display); font-size: var(--step-2); line-height: 1; color: var(--c-gold-ink); }
.pdp-pop__term { margin-block-start: .4rem; padding-inline-end: 2rem; font-family: var(--f-display); font-size: var(--step-2); line-height: 1.25; }
.pdp-pop__term:lang(ar) { line-height: 1.6; }
.pdp-pop__echo { display: block; font-size: var(--step--1); color: var(--c-gold-ink); }
.pdp-pop__echo:lang(en) { font-family: var(--f-latin-text); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; }
.pdp-pop__echo:lang(ar) { font-family: var(--f-arabic-display); font-size: var(--step-0); }
.pdp-pop__text { margin-block-start: .6rem; font-size: var(--step--1); line-height: 1.6; color: var(--c-ink-soft); }
.pdp-pop__close { position: absolute; inset-block-start: .4rem; inset-inline-end: .4rem; }

/* ── 6 · Harvest Passport ──────────────────────────────────────────────────── */
.pdp-passport__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.pdp-passport__card-wrap { display: grid; place-items: center; perspective: 1200px; padding-block: var(--space-s); }
.pdp-passport__card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .7rem;
  inline-size: min(100%, 21rem);
  aspect-ratio: 5 / 7;
  padding: 2.2rem 1.8rem 1.8rem;
  border-radius: 6px;
  background: var(--c-ivory) url("../../img/texture/paper.14e96cbe7863.webp");
  background-size: 512px 512px;
  background-blend-mode: multiply;
  color: var(--c-ink);
  box-shadow: 0 50px 80px -40px rgb(0 0 0 / .65), 0 2px 0 rgb(255 255 255 / .4) inset;
  rotate: -3deg;
  transition: rotate var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out);
}
[dir="rtl"] .pdp-passport__card { rotate: 3deg; }
@media (hover: hover) { .pdp-passport__card-wrap:hover .pdp-passport__card { rotate: 0deg; translate: 0 -6px; } }
.pdp-passport__corner { position: absolute; inset: 9px; border: 1px solid rgb(200 154 74 / .55); border-radius: 3px; pointer-events: none; }
.pdp-passport__mark { display: block; block-size: 4.2rem; color: var(--c-gold); }
.pdp-passport__mark .brand-svg { block-size: 100%; margin-inline: auto; }
.pdp-passport__kind { font-family: var(--f-latin-text); font-size: .68rem; font-weight: 500; letter-spacing: .42em; margin-inline-end: -.42em; color: var(--c-gold-ink); }
.pdp-passport__kind-ar { margin-block-start: -.4rem; font-family: var(--f-arabic-display); font-size: 1.15rem; color: var(--c-ink); }
.pdp-passport__card .divider { color: var(--c-gold); --divider-w: 7rem; }
.pdp-passport__rows { display: grid; inline-size: 100%; margin-block-start: .3rem; }
.pdp-passport__rows > span { display: flex; justify-content: space-between; gap: 1rem; padding-block: .42rem; border-block-end: 1px solid rgb(31 26 22 / .1); font-size: .78rem; }
.pdp-passport__key { color: var(--c-muted); letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; align-self: center; }
.pdp-passport__key:lang(ar), :lang(ar) .pdp-passport__key { letter-spacing: 0; font-size: .78rem; }
.pdp-passport__val { font-family: var(--f-display); font-size: 1rem; }
.pdp-passport__code { margin-block-start: auto; font-family: var(--f-latin-text); font-size: .72rem; letter-spacing: .2em; color: var(--c-ink-soft); }
.pdp-passport__qr { position: absolute; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; color: var(--c-gold-ink); }
.pdp-passport__qr .icon { --icon-size: 1.6rem; }
.pdp-passport__text { display: grid; gap: var(--space-s); align-content: start; max-inline-size: 36rem; }
.pdp-passport__title { font-size: var(--step-5); line-height: 1.04; }
.pdp-passport__title:lang(ar) { line-height: 1.4; }
.pdp-passport__lede { color: var(--fg-soft); font-size: var(--step-1); line-height: 1.6; }
.pdp-passport__lede:lang(ar) { line-height: 1.9; }
.pdp-passport__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-block-start: var(--space-xs); }
@media (min-width: 56em) {
  .pdp-passport__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-3xl); }
}

/* ── 7 · Related ───────────────────────────────────────────────────────────── */
.pdp-related__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-s) var(--space-l); margin-block-end: var(--space-xl); }
.pdp-related__head > div { display: grid; gap: var(--space-xs); }
.pdp-related__title { font-size: var(--step-4); }
.pdp-related__grid { display: grid; gap: var(--space-2xl) var(--space-l); margin: 0; padding: 0; list-style: none; }
@media (min-width: 36em) { .pdp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pdp-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 8 · Mobile bag bar ────────────────────────────────────────────────────── */
.pdp-bar {
  position: fixed;
  z-index: calc(var(--z-header) - 1);
  inset-inline: 0;
  inset-block-end: 0;
  padding: .65rem var(--gutter) max(.65rem, env(safe-area-inset-bottom));
  background: rgb(246 241 232 / .94);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-block-start: 1px solid var(--line);
  box-shadow: 0 -18px 40px -24px rgb(31 26 22 / .25);
  translate: 0 110%;
  visibility: hidden;
  transition: translate var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.pdp-bar.is-visible { translate: 0 0; visibility: visible; transition: translate var(--dur-3) var(--ease-out), visibility 0s; }
.pdp-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.pdp-bar__info { min-inline-size: 0; }
.pdp-bar__name { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-bar__name:lang(ar) { line-height: 1.5; }
.pdp-bar__meta { font-size: var(--step--1); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pdp-bar__add { flex: none; min-block-size: 3rem; }
.pdp-bar__add .icon { --icon-size: 1.05rem; }
body.has-pdp-bar .toasts { inset-block-end: calc(4.75rem + env(safe-area-inset-bottom)); }
@media (min-width: 64em) { .pdp-bar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pdp-hotspot span::after { display: none; }
  .pdp-passport__card { rotate: 0deg; }
}
@media print { .pdp-bar, .pdp-hotspot, .pdp-pop { display: none !important; } }

/* Without native popovers the legend already carries every note. */
@supports not selector(:popover-open) {
  .pdp-pop { display: none; }
  .pdp-hotspot { pointer-events: none; }
}
.pdp-spec .pdp-unit { text-transform: none; letter-spacing: .04em; }
.pdp-gallery__slide--wide .pdp-gallery__img,
.pdp-gallery__slide--tall .pdp-gallery__img { background-color: transparent !important; }
.pdp-label__wrap-photo { max-inline-size: 66rem; margin-inline: auto; inline-size: 100%; }
.pdp-label__wrap-caption { max-inline-size: 66rem; margin-inline: auto; inline-size: 100%; }
html:not(.js) .pdp-gallery__counter { display: none; }

/* ── 9 · A closer look (dialog built by product.js) ────────────────────────── */
.pdp-gallery__zoom {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pdp-gallery__zoom:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.pdp-gallery__zoom-icon {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: rgb(246 241 232 / .9);
  color: var(--c-ink);
  opacity: 0;
  scale: .9;
  transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-out);
}
.pdp-gallery__zoom-icon .icon { --icon-size: 1.1rem; }
@media (hover: hover) {
  .pdp-gallery__frame:hover .pdp-gallery__zoom-icon { opacity: 1; scale: 1; }
}
.pdp-gallery__zoom:focus-visible .pdp-gallery__zoom-icon { opacity: 1; scale: 1; }

.pdp-zoom {
  inline-size: 100vw;
  block-size: 100dvh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-night) var(--grain);
  background-size: auto, 220px 220px;
  color: var(--c-ivory);
  overscroll-behavior: contain;
}
.pdp-zoom[open] { display: grid; place-items: center; animation: pdp-zoom-in var(--dur-3) var(--ease-out); }
.pdp-zoom::backdrop { background: rgb(23 20 16 / .6); }
@keyframes pdp-zoom-in { from { opacity: 0; } }
.pdp-zoom__figure { display: grid; justify-items: center; gap: var(--space-s); margin: 0; padding: var(--space-xl) var(--gutter); max-inline-size: 100%; }
.pdp-zoom__img {
  max-inline-size: min(100%, 72rem);
  max-block-size: calc(100dvh - 9rem);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--radius-s);
  background: transparent;
}
.pdp-zoom__caption { max-inline-size: 44rem; text-align: center; font-size: var(--step--1); color: rgb(246 241 232 / .78); }
.pdp-zoom__count { position: absolute; inset-block-start: 1.1rem; inset-inline-start: var(--gutter); font-family: var(--f-latin-text); font-size: var(--step--2); letter-spacing: .16em; color: var(--c-gold); }
.pdp-zoom__close { position: absolute; inset-block-start: .5rem; inset-inline-end: calc(var(--gutter) - .75rem); color: var(--c-ivory); }
.pdp-zoom__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; color: var(--c-ivory); border: 1px solid var(--c-line-light); }
.pdp-zoom__nav--prev { inset-inline-start: calc(var(--gutter) - .5rem); }
.pdp-zoom__nav--next { inset-inline-end: calc(var(--gutter) - .5rem); }
.pdp-zoom .icon-btn:hover { background: rgb(246 241 232 / .08); }
.pdp-zoom :focus-visible { outline-color: var(--c-gold); }
@media (max-width: 40em) {
  .pdp-zoom__nav { inset-block-start: auto; inset-block-end: 1rem; translate: none; }
}
.pdp-hero, .pdp-details, .pdp-label, .pdp-passport, .pdp-related, .pdp-bar, .pdp-zoom { font-variant-numeric: lining-nums; }
/* Keep the last lines of the footer clear of the mobile bag bar. */
@media (max-width: 63.99em) {
  body:has(.pdp-bar) .site-footer { padding-block-end: calc(var(--space-m) + 4.5rem + env(safe-area-inset-bottom)); }
}
/* Arabic letters are never spaced — not even inside a price or a unit. */
.pdp-buy__add-price:lang(ar), .pdp-spec .pdp-unit:lang(ar), .pdp-spec [data-pdp-weight]:lang(ar) { letter-spacing: 0; }