/* ── Product page (PDP) ─────────────────────────────────────────
   Layered on top of style.css. Reuses the nav, footer, loader,
   theme toggle and tokens from the main fashion stylesheet. */

/* On the PDP the nav sits over light product imagery, so give it a
   solid, readable backing instead of the transparent hero overlay. */
.pdp-page .site-header,
.shop-page .site-header {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
.pdp-page .site-header.scrolled,
.shop-page .site-header.scrolled { background: var(--nav-bg-sc); }
.pdp-page .nav-link, .shop-page .nav-link,
.pdp-page .dropdown-link, .shop-page .dropdown-link,
.pdp-page .subdropdown-link, .shop-page .subdropdown-link { text-shadow: none; }
.pdp-page .nav-logo-img,
.shop-page .nav-logo-img { filter: invert(1); }
[data-theme="light"] .pdp-page .nav-logo-img,
[data-theme="light"] .shop-page .nav-logo-img { filter: invert(0); }

/* ── Layout ─────────────────────────────────────────────────── */
.pdp {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: start;
  gap: 2px;
  padding-top: var(--nav-h);
}

/* Gallery — two-up grid, featured shot spans full width */
.pdp-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
}
.pdp-gallery .pdp-shot {
  display: block;
  width: 100%;
  /* Uniform 9:16 frame (matches the model PNGs exactly, so they are
     shown full-figure; the squarer studio packshots cover with only a
     small side crop, keeping every cell the same height). */
  aspect-ratio: 941 / 1672;
  object-fit: cover;
  object-position: center;
  background: #e9e6e2;
}
[data-theme="dark"] .pdp-gallery .pdp-shot { background: #16161a; }
/* The lifestyle / featured frame runs full bleed as an editorial banner */
.pdp-gallery .pdp-shot--full {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center 32%;
}

/* ── Info panel ─────────────────────────────────────────────── */
.pdp-info { padding: 3.5rem 3rem; }
.pdp-info-inner {
  position: sticky;
  top: calc(var(--nav-h) + 2.5rem);
  max-width: 360px;
}

.pdp-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 0.6rem;
}
.pdp-brand .pdp-star { color: var(--accent); font-size: 0.8rem; line-height: 1; }

.pdp-title {
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 2.5rem;
}

/* Size chart + select */
.pdp-sizechart-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
}
.pdp-sizechart {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  border: 0; border-bottom: 1px solid var(--fg-dim);
  background: none; padding: 0 0 1px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pdp-sizechart:hover { color: var(--fg); border-color: var(--fg); }

/* Size guide (toggled) */
.pdp-sizeguide { margin: 0 0 1.2rem; border: 1px solid var(--border); }
.pdp-sizeguide table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.pdp-sizeguide th, .pdp-sizeguide td {
  padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border);
}
.pdp-sizeguide th { font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.62rem; color: var(--fg-dim); }
.pdp-sizeguide tbody tr:last-child td { border-bottom: 0; }
.pdp-sizeguide-note { padding: 0.6rem 0.75rem 0.75rem; font-size: 0.68rem; line-height: 1.5; color: var(--fg-dim); }

.pdp-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);
  padding: 1rem 2.5rem 1rem 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  /* chevron */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg) 50%),
    linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% - 1px),
    calc(100% - 14px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pdp-select:focus { outline: none; border-color: var(--accent); }
.pdp-select option { background: var(--bg); color: var(--fg); }

.pdp-cart {
  width: 100%;
  margin-top: 1.1rem;
  padding: 1.15rem;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.25s ease, background 0.25s ease;
}
.pdp-cart:hover { opacity: 0.85; }
.pdp-cart.is-added { background: var(--accent); color: var(--bg); }

/* ── Tabs ───────────────────────────────────────────────────── */
.pdp-tabs {
  display: flex;
  gap: 1.6rem;
  margin-top: 2.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.pdp-tab {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0 0 0.9rem;
  position: relative;
  transition: color 0.2s ease;
}
.pdp-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.pdp-tab:hover { color: var(--fg); }
.pdp-tab.is-active { color: var(--fg); }
.pdp-tab.is-active::after { transform: scaleX(1); }

.pdp-panels { padding-top: 1.6rem; }
.pdp-panel { display: none; }
.pdp-panel.is-active { display: block; animation: pdpFade 0.4s ease; }
@keyframes pdpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pdp-panel p {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.9;
}
.pdp-panel ul { display: flex; flex-direction: column; gap: 0.5rem; }
.pdp-panel li {
  font-size: 0.82rem;
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
  opacity: 0.9;
}
.pdp-panel li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

/* ── You Will Also Like ─────────────────────────────────────── */
.ywal { padding: 5rem 3rem 2rem; max-width: 1440px; margin: 0 auto; }
.ywal .section-header { margin-bottom: 2.5rem; }
.ywal-empty {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 2rem 0;
}

/* ── Shop / category overview ───────────────────────────────── */
.shop {
  padding: calc(var(--nav-h) + 3rem) 3rem 2rem;
  max-width: 1440px;
  margin: 0 auto;
}
.shop-breadcrumb {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1.2rem;
}
.shop-breadcrumb a { transition: color 0.2s ease; }
.shop-breadcrumb a:hover { color: var(--fg); }
.shop-breadcrumb .sep { opacity: 0.4; margin: 0 0.5rem; }

.shop-title {
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.shop-count {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1.6rem;
}
.shop .product-grid { row-gap: 3rem; }

/* Subcategory filter chips */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.6rem;
}
.shop-filter {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease,
              background 0.2s ease;
}
.shop-filter:hover { color: var(--fg); border-color: var(--fg-dim); }
.shop-filter.is-active {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

/* Real product card image (clean studio packshot) */
.product-img--photo {
  background-size: cover;
  background-position: center;
  background-image: none;     /* override the gradient placeholder */
}

/* "Coming soon" filler cards — keep the grid full like the reference */
.product-card--soon { cursor: default; }
.product-card--soon .product-name,
.product-card--soon .product-brand { color: var(--fg-dim); }
.product-card--soon .product-img { position: relative; }
.product-card--soon .product-img::after {
  content: 'Coming soon';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-info-inner { position: static; max-width: none; }
  .pdp-info { padding: 2.5rem 1.5rem; }
}
@media (max-width: 768px) {
  .ywal { padding: 4rem 1.5rem 1rem; }
  .shop { padding: calc(var(--nav-h) + 2rem) 1.5rem 1rem; }

  /* A backdrop-filter on the header makes it the containing block for
     the fixed mobile menu, trapping it inside the 64px bar. Drop the
     blur here (product.css loads after style.css, so this wins) and use
     a solid bar so the full-screen menu lays out against the viewport. */
  .pdp-page .site-header,
  .shop-page .site-header,
  .pdp-page .site-header.scrolled,
  .shop-page .site-header.scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
  }
}