/* ============================================================
   NOVARA — PDP styles (product detail)
   Reuses existing tokens: ink #0E0E0E · surface #141312 · line #272728
   · bone #F7F4EE · mist #8A8A85 · faint #6E6A63 · gold #D4AF37
   Fonts: Instrument Serif (display) · Archivo (body) · Geist Mono (labels)
   No new visual language — only PDP-specific layout/behaviour.
   ============================================================ */

/* ---- Top: gallery + sticky info ---- */
.nv-pdp-top { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .nv-pdp-top { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
}
@media (min-width: 1280px) {
  .nv-pdp-top { grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; }
}

/* ---- Gallery ---- */
.nv-pdp-gallery { display: grid; gap: 12px; }
@media (min-width: 768px) { .nv-pdp-gallery { grid-template-columns: 1fr 1fr; } }
.nv-pdp-shot {
  position: relative; overflow: hidden; background: #141312; border: 1px solid #1c1b1a;
  aspect-ratio: 4 / 5; margin: 0; cursor: zoom-in;
}
.nv-pdp-shot--lead { grid-column: 1 / -1; aspect-ratio: 5 / 6; }
.nv-pdp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-pdp-shot__zoom {
  position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid rgba(247,244,238,.25);
  background: rgba(14,14,14,.55); color: #F7F4EE; opacity: 0; transition: opacity .3s ease;
}
.nv-pdp-shot:hover .nv-pdp-shot__zoom, .nv-pdp-shot:focus-visible .nv-pdp-shot__zoom { opacity: 1; }
.nv-pdp-shot:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .nv-pdp-shot img { transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
  .nv-pdp-shot:hover img { transform: scale(1.035); }
}
/* Mobile: swipe-friendly single-file carousel with snap */
@media (max-width: 767px) {
  .nv-pdp-gallery { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nv-pdp-gallery::-webkit-scrollbar { display: none; }
  .nv-pdp-shot { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 5; border-left: 0; border-right: 0; }
  .nv-pdp-shot--lead { aspect-ratio: 4 / 5; }
}
.nv-pdp-dots { display: none; }
@media (max-width: 767px) {
  .nv-pdp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .nv-pdp-dot { width: 6px; height: 6px; border-radius: 50%; background: #3a3835; border: 0; padding: 0; transition: background-color .25s ease, transform .25s ease; }
  .nv-pdp-dot.is-active { background: #D4AF37; transform: scale(1.25); }
}

/* ---- Info panel ---- */
@media (min-width: 1024px) {
  .nv-pdp-info { position: sticky; top: 100px; align-self: start; }
}
.nv-pdp-eyebrow { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; }
.nv-pdp-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; line-height: 1.05; color: #F7F4EE; font-size: 34px; margin-top: 14px; }
@media (min-width: 768px) { .nv-pdp-title { font-size: 40px; } }
.nv-pdp-price { margin-top: 16px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 17px; color: #D4AF37; letter-spacing: .02em; }
.nv-pdp-price s { color: #6E6A63; text-decoration: line-through; margin-left: 12px; font-size: 14px; }
.nv-pdp-price .nv-pdp-sale-tag { margin-left: 12px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #0E0E0E; background: #D4AF37; padding: 2px 7px; vertical-align: middle; }
.nv-pdp-desc { margin-top: 20px; font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.7; color: #8A8A85; max-width: 42ch; }

.nv-pdp-field { margin-top: 28px; }
.nv-pdp-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nv-pdp-field__label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #8A8A85; }
.nv-pdp-field__value { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #F7F4EE; }

/* colour swatches (labelled) */
.nv-pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-pdp-swatch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px 8px 9px; border: 1px solid #272728; background: transparent; cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A85; transition: border-color .25s ease, color .25s ease; }
.nv-pdp-swatch .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(247,244,238,.28); flex: none; }
.nv-pdp-swatch:hover { color: #F7F4EE; border-color: rgba(212,175,55,.45); }
.nv-pdp-swatch[aria-checked="true"] { color: #F7F4EE; border-color: rgba(212,175,55,.6); }
.nv-pdp-swatch[aria-checked="true"] .dot { box-shadow: 0 0 0 2px #0E0E0E, 0 0 0 3px #D4AF37; }
.nv-pdp-swatch:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }

/* size selector */
.nv-pdp-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-pdp-size { min-width: 54px; padding: 13px 12px; text-align: center; border: 1px solid #272728; background: transparent; cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; color: #8A8A85; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.nv-pdp-size:hover { color: #F7F4EE; border-color: rgba(212,175,55,.5); }
.nv-pdp-size[aria-checked="true"] { background: #F7F4EE; color: #0E0E0E; border-color: #F7F4EE; }
.nv-pdp-size[aria-disabled="true"] { color: #38352f; border-color: #1c1b1a; cursor: not-allowed; text-decoration: line-through; }
.nv-pdp-size:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }

.nv-pdp-sizeguide { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #D4AF37; transition: color .25s ease; }
.nv-pdp-sizeguide svg { width: 15px; height: 9px; }
.nv-pdp-sizeguide:hover { color: #F7F4EE; }
.nv-pdp-sizeguide:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }

/* buy actions */
.nv-pdp-buy { margin-top: 30px; }
.nv-pdp-atc { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 18px 22px;
  background: #F7F4EE; color: #0A0A0A; border: 0; cursor: pointer; font-family: "Archivo", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: background-color .3s ease; }
.nv-pdp-atc:hover { background: #ffffff; }
.nv-pdp-atc:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
.nv-pdp-atc[disabled] { opacity: .45; cursor: not-allowed; }
.nv-pdp-atc-arrow { width: 20px; height: 12px; flex: none; }
@media (prefers-reduced-motion: no-preference) { .nv-pdp-atc-arrow { transition: transform .3s cubic-bezier(.16,1,.3,1); } .nv-pdp-atc:hover .nv-pdp-atc-arrow { transform: translateX(5px); } }
.nv-pdp-validation { min-height: 15px; margin-top: 12px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #D4AF37; opacity: 0; transition: opacity .25s ease; }
.nv-pdp-validation.is-shown { opacity: 1; }
.nv-pdp-underbuy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.nv-pdp-wishlist { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A8A85; transition: color .25s ease; }
.nv-pdp-wishlist svg { width: 18px; height: 18px; transition: color .25s ease; }
.nv-pdp-wishlist:hover { color: #F7F4EE; }
.nv-pdp-wishlist[aria-pressed="true"] { color: #F7F4EE; }
.nv-pdp-wishlist[aria-pressed="true"] svg { fill: #D4AF37; stroke: #D4AF37; }
.nv-pdp-wishlist:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.nv-pdp-ship { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6E6A63; }

/* ---- Accordions (details) ---- */
.nv-pdp-acc-list { margin-top: 36px; }
.nv-pdp-acc { border-top: 1px solid #272728; }
.nv-pdp-acc:last-child { border-bottom: 1px solid #272728; }
.nv-pdp-acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #F7F4EE; }
.nv-pdp-acc__btn:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.nv-pdp-acc__icon { position: relative; width: 12px; height: 12px; flex: none; }
.nv-pdp-acc__icon::before, .nv-pdp-acc__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; margin-top: -.75px; background: #D4AF37; }
.nv-pdp-acc__icon::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .nv-pdp-acc__icon::after { transition: transform .3s ease; } .nv-pdp-acc__panel { transition: max-height .4s cubic-bezier(.16,1,.3,1); } }
.nv-pdp-acc.is-open .nv-pdp-acc__icon::after { transform: rotate(0deg); }
.nv-pdp-acc__panel { overflow: hidden; max-height: 0; }
.nv-pdp-acc__inner { padding-bottom: 22px; font-family: "Archivo", system-ui, sans-serif; font-size: 14px; line-height: 1.75; color: #8A8A85; }
.nv-pdp-acc__inner dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; }
.nv-pdp-acc__inner dt { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6E6A63; }
.nv-pdp-acc__inner dd { margin: 0; color: #F7F4EE; font-size: 13px; }

/* ---- Craft / story ---- */
.nv-pdp-craft { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .nv-pdp-craft { grid-template-columns: 1.15fr 1fr; gap: 64px; } }
.nv-pdp-craft__media { position: relative; overflow: hidden; background: #141312; border: 1px solid #1c1b1a; aspect-ratio: 4 / 3; }
.nv-pdp-craft__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Technical details ---- */
.nv-pdp-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #272728; border: 1px solid #272728; }
@media (min-width: 768px) { .nv-pdp-spec { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .nv-pdp-spec { grid-template-columns: repeat(5, 1fr); } }
.nv-pdp-spec__cell { background: #0E0E0E; padding: 26px 22px; }
.nv-pdp-spec__k { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #6E6A63; }
.nv-pdp-spec__v { margin-top: 10px; font-family: "Archivo", system-ui, sans-serif; font-size: 15px; color: #F7F4EE; }

/* ---- Fit & model ---- */
.nv-pdp-fit { display: grid; gap: 24px; }
@media (min-width: 768px) { .nv-pdp-fit { grid-template-columns: repeat(3, auto) 1fr; align-items: center; gap: 48px; } }
.nv-pdp-fit__k { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #6E6A63; }
.nv-pdp-fit__v { margin-top: 8px; font-family: "Instrument Serif", Georgia, serif; font-size: 24px; color: #F7F4EE; }
.nv-pdp-fit__guide { justify-self: start; }
@media (min-width: 768px) { .nv-pdp-fit__guide { justify-self: end; } }

/* ---- Related / recently viewed grids (reuse .nv-product-card) ---- */
.nv-pdp-cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 16px; }
@media (min-width: 768px) { .nv-pdp-cardgrid { grid-template-columns: repeat(4, 1fr); gap: 28px 28px; } }

/* ---- Lightbox ---- */
.nv-pdp-lightbox-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(8,8,8,.94); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.nv-pdp-lightbox-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.nv-pdp-lightbox { position: fixed; inset: 0; z-index: 101; display: flex; align-items: center; justify-content: center; padding: 6vh 7vw; visibility: hidden; }
.nv-pdp-lightbox.is-open { visibility: visible; }
.nv-pdp-lightbox__img { max-width: 100%; max-height: 88vh; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .nv-pdp-lightbox__img { transition: opacity .3s ease; } }
.nv-pdp-lightbox__btn { position: absolute; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(247,244,238,.22); background: rgba(14,14,14,.5); color: #F7F4EE; cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.nv-pdp-lightbox__btn:hover { border-color: rgba(212,175,55,.6); color: #fff; }
.nv-pdp-lightbox__btn:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
.nv-pdp-lightbox__close { top: 22px; right: 22px; }
.nv-pdp-lightbox__prev { left: 18px; top: 50%; margin-top: -24px; }
.nv-pdp-lightbox__next { right: 18px; top: 50%; margin-top: -24px; }
.nv-pdp-lightbox__count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; color: #8A8A85; }

/* ---- Mobile sticky Add-to-Cart ---- */
.nv-pdp-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: #0E0E0E; border-top: 1px solid #272728; transform: translateY(115%); }
.nv-pdp-stickybar.is-visible { transform: none; }
@media (prefers-reduced-motion: no-preference) { .nv-pdp-stickybar { transition: transform .35s cubic-bezier(.16,1,.3,1); } }
@media (min-width: 1024px) { .nv-pdp-stickybar { display: none !important; } }
.nv-pdp-stickybar__info { min-width: 0; }
.nv-pdp-stickybar__name { font-family: "Instrument Serif", Georgia, serif; font-size: 17px; color: #F7F4EE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-pdp-stickybar__price { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #D4AF37; margin-top: 2px; }
.nv-pdp-stickybar__atc { flex: none; display: inline-flex; align-items: center; gap: 12px; background: #F7F4EE; color: #0A0A0A; border: 0; cursor: pointer;
  padding: 14px 20px; font-family: "Archivo", system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nv-pdp-stickybar__atc:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }

/* ---- Reveal (PDP-owned observer; calm, product-first) ---- */
@media (prefers-reduced-motion: no-preference) {
  .nv-pdp-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
  .nv-pdp-reveal.is-in { opacity: 1; transform: none; }
  .nv-pdp-media { overflow: hidden; }
  .nv-pdp-media img { transform: scale(1.03); transition: transform 1.3s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
  .nv-pdp-media.is-in img { transform: scale(1); }
}
