/* ==========================================================================
   ARIZOO — PRODUCT PAGE
   Loaded after pages.css and only by product.html, so these rules win over the
   older product block there without editing it.

   Every colour and face is a token: the shop sets its own accent, fonts and
   page background from the dashboard. Panels are translucent rather than
   opaque so a background image chosen there still shows through, and each one
   carries .is-glass for the shop-wide glass mode in core.css.
   ========================================================================== */

.pdp {
  --pdp-panel: color-mix(in srgb, var(--c-surface) 72%, transparent);
  position: relative;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: var(--s-5) var(--s-7);
  overflow-x: clip;
}

.pdp > * { min-width: 0; }

/* Club and season down the outer edge — decoration only, read by nobody. */
.pdp__edge {
  display: none;
  position: absolute;
  inset-block-start: var(--s-7);
  inset-inline-start: calc(var(--gutter) / 2 - 0.6em);
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Turned on the inner span: on the outer one, vertical writing would turn the
   logical offsets above sideways too. */
.pdp__edge > span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); }

body[dir='rtl'] .pdp__edge { letter-spacing: 0.1em; }

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
.gallery { position: static; gap: var(--s-4); }

/* Only stick on a screen tall enough for most of the column; on a short one
   the strip under the photo would wait until the end of the page. */
@media (min-width: 901px) and (min-height: 760px) {
  .gallery { position: sticky; }
}

.gallery__main {
  border-radius: var(--r-xl);
  border-color: var(--c-line-2);
  background: var(--c-surface-2);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}

.gallery__flags { inset-block-start: var(--s-4); inset-inline-start: var(--s-4); gap: var(--s-2); }

.gallery__flags .badge {
  height: 28px;
  padding-inline: 10px;
  border-radius: var(--r-sm);
  font-size: var(--t-xxs);
}

.gallery__flags .badge svg { width: 14px; height: 14px; flex: none; }

.gallery__flags .badge--gold {
  background: var(--c-gold);
  color: var(--on-accent, #17130a);
  border-color: transparent;
}

/* Dark on any photograph, whatever the theme. */
.gallery__flags .badge--rare {
  background: rgba(8, 8, 7, 0.78);
  color: var(--c-on-photo);
  border-color: rgba(255, 255, 255, 0.16);
}

.gallery__flags .badge--rare svg { color: var(--c-gold-bright); }

.gallery__zoom {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 8, 7, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--c-on-photo);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}

.gallery__zoom svg { width: 19px; height: 19px; }
.gallery__main:hover .gallery__zoom,
.gallery__main:focus-visible .gallery__zoom { background: var(--c-gold); color: var(--on-accent, #17130a); border-color: transparent; }
.gallery__main:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

/* Thumbnail strip with round arrows either side */
.gallery__strip { display: flex; align-items: center; gap: var(--s-3); }

.gallery__thumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 3px;
}

.gallery__thumbs::-webkit-scrollbar { display: none; }

.gallery__thumb {
  flex: 0 0 calc((100% - 4 * var(--s-3)) / 5);
  min-width: 56px;
  scroll-snap-align: start;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  opacity: 0.6;
}

.gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 2px var(--c-gold), 0 6px 22px var(--c-gold-glow);
}

.gallery__thumb:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.gallery__nav {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-line-2);
  background: var(--pdp-panel);
  color: var(--c-text);
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}

.gallery__nav svg { width: 18px; height: 18px; }
.gallery__nav:hover { border-color: var(--c-gold); color: var(--c-gold); }
.gallery__nav:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.gallery__nav--prev svg,
body[dir='rtl'] .gallery__nav:not(.gallery__nav--prev) svg { transform: scaleX(-1); }
body[dir='rtl'] .gallery__nav--prev svg { transform: none; }

/* Three short lines under the photographs */
.pdp-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: var(--s-3);
  padding: 0;
  list-style: none;
}

.pdp-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-2) var(--s-3);
  text-align: center;
}

.pdp-feat + .pdp-feat { border-inline-start: 1px solid var(--c-line-2); }
.pdp-feat svg { width: 26px; height: 26px; color: var(--c-text); margin-block-end: var(--s-1); }

.pdp-feat__t {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
}

.pdp-feat__d { font-size: var(--t-xs); color: var(--c-text-2); overflow-wrap: anywhere; }

body[dir='rtl'] .pdp-feat__t { letter-spacing: 0; text-transform: none; font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   BUY BOX
   -------------------------------------------------------------------------- */
.buybox { gap: var(--s-5); }

.buybox__head {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The club's name, large and faint behind the title */
.buybox__mark {
  position: absolute;
  inset-block-start: -0.1em;
  inset-inline-end: 0;
  z-index: -1;
  max-width: 70%;
  overflow: hidden;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--c-text);
  opacity: 0.06;
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

.buybox__club { letter-spacing: 0.32em; font-size: var(--t-xs); font-weight: 700; }

.buybox__title {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.buybox__title-tail {
  display: block;
  margin-block-start: 0.08em;
  font-style: italic;
  color: var(--c-gold);
}

body[dir='rtl'] .buybox__title { line-height: 1.25; letter-spacing: 0; }
body[dir='rtl'] .buybox__title-tail { font-style: normal; }

.buybox__price { align-items: center; gap: var(--s-3); }

.buybox__price .price__now,
body[dir='rtl'] .buybox__price .price__now {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  color: var(--c-text);
}

.buybox__price .price__was { font-size: var(--t-sm); color: var(--c-text-3); text-decoration: line-through; }

.pdp-offer {
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--c-gold);
  color: var(--on-accent, #17130a);
  border-color: transparent;
}

.buybox__desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--c-text-2);
  /* The full text is under "The story" further down. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

.option-head { margin-block-end: var(--s-2); }
.option-head__label { color: var(--c-text); letter-spacing: 0.16em; }
.option-head__aux button { gap: 6px; }
.option-head__aux svg { width: 18px; height: 18px; }

.size {
  min-width: 56px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--pdp-panel);
  color: var(--c-text);
  font-weight: 700;
}

.size[aria-pressed='true'] {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--on-accent, #17130a);
  box-shadow: 0 6px 22px var(--c-gold-glow);
}

.size:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.buybox__qty-label { display: block; margin-block-end: var(--s-2); }

.buybox .qty { background: var(--pdp-panel); border-color: var(--c-line-2); }

/* Add to cart and save */
.buybox__actions { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-3); }
.buybox__actions .btn { padding-inline: var(--s-4); }

.pdp-add {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-gold-bright) 35%, var(--c-gold)), var(--c-gold));
  box-shadow: 0 12px 30px -10px var(--c-gold-glow);
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
}

.pdp-add svg { width: 21px; height: 21px; }

.pdp-save { border-color: var(--c-line-2); background: var(--pdp-panel); font-size: var(--t-sm); }
.pdp-save[aria-pressed='true'] { border-color: var(--c-gold); color: var(--c-gold); }
.pdp-save[aria-pressed='true'] svg { fill: currentColor; }
.buybox__actions .btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

/* Trust tiles */
.assurances { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }

.assurance {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--pdp-panel);
  color: var(--c-text);
  line-height: 1.4;
}

.assurance svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   DETAILS, SPEC TABLE, ACCORDIONS
   -------------------------------------------------------------------------- */
.pdp-more { display: flex; flex-direction: column; gap: var(--s-3); }

.pdp-card {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--pdp-panel);
}

.acc.pdp-card { border-block-start: 1px solid var(--c-line-2); }

.pdp-card .acc__head { padding: var(--s-4); font-size: var(--t-body); font-weight: 600; }
.pdp-card .acc__head:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; border-radius: var(--r-md); }
.pdp-card .acc__body > div { padding-inline: var(--s-4); }

.acc__label { display: inline-flex; align-items: center; gap: var(--s-3); }
.acc__label svg,
.acc[data-open='true'] .acc__head .acc__label svg { width: 21px; height: 21px; color: var(--c-text); transform: none; }

/* The details card opens and closes on a chevron rather than a plus. */
.acc[data-open='true'] .acc__head .acc__chev { transform: rotate(180deg); }

/* Material and logo, as tiles */
.pdp-card .facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}

.pdp-card .fact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-surface-2) 70%, transparent);
}

.pdp-card .fact svg { grid-row: span 2; width: 26px; height: 26px; color: var(--c-text); }
.pdp-card .fact__k { font-size: var(--t-xxs); letter-spacing: 0.14em; line-height: 1.3; }
.pdp-card .fact__v { font-size: var(--t-sm); font-weight: 700; color: var(--c-text); line-height: 1.3; }
body[dir='rtl'] .pdp-card .fact__k { letter-spacing: 0; font-size: var(--t-xs); }

.pdp-card .highlights li { color: var(--c-text); font-size: var(--t-sm); }
.pdp-card .highlights svg { width: 17px; height: 17px; stroke-width: 2.6; color: var(--c-gold); margin-block-start: 2px; }

/* Season / club / league / SKU */
.spec-list.pdp-card { padding: var(--s-2) var(--s-4); }
.spec-list.pdp-card .spec-list__row { padding-block: 10px; }
.spec-list.pdp-card .spec-list__row:last-child { border-block-end: 0; }
.spec-list.pdp-card .spec-list__v { font-weight: 500; overflow-wrap: anywhere; }

.pdp-card .acc__body p { color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .pdp__edge { display: block; }
}

@media (max-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1fr); padding-block-start: var(--s-3); }
  .gallery__main { border-radius: var(--r-lg); }
}

@media (max-width: 560px) {
  .gallery__nav { display: none; }
  .gallery__thumb { flex-basis: calc((100% - 3 * var(--s-3)) / 4.4); }
  .pdp-feat { padding-inline: var(--s-2); }
  .pdp-feat__d { font-size: var(--t-xxs); }
  .buybox__actions { grid-template-columns: minmax(0, 1fr); }
  .buybox__mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__zoom,
  .gallery__nav,
  .gallery__thumb,
  .size { transition: none; }
  .gallery__thumbs { scroll-behavior: auto; }
}