/* Product detail */

.lc-pdp {
  padding-block: var(--lc-space-6) var(--lc-section-y-compact);
}

.lc-pdp__breadcrumb { margin-bottom: var(--lc-space-6); }

.lc-pdp__top {
  display: grid;
  gap: var(--lc-space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .lc-pdp__top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--lc-space-12);
  }

  .lc-pdp__summary {
    position: sticky;
    top: calc(var(--lc-header-h) + var(--lc-space-6));
  }
}

/* ---------- ProductVisualization (3D-ready) ----------
 * The stage has an explicit size (aspect-ratio + min-height) so a future canvas can
 * fill it with width/height: 100%. No transforms, filters or backdrop-filters are used
 * on the stage or its ancestors (they degrade WebGL compositing and fullscreen).
 */
.lc-pv {
  display: grid;
  gap: var(--lc-space-3);
  min-width: 0;
}

.lc-pv__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  max-height: 72vh;
  width: 100%;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background:
    radial-gradient(80% 70% at 50% 35%, var(--lc-graphite-800), transparent 75%),
    var(--lc-graphite-990);
  overflow: hidden;
  contain: layout paint;
}

.lc-pv__layer {
  position: absolute;
  inset: 0;
}

.lc-pv__layer[hidden] { display: none; }

.lc-pv__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 1px, transparent 1.5px);
  background-size: 14px 14px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 25%, transparent 85%);
}

.lc-pv__image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--lc-space-6);
}

.lc-pv__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--lc-space-4);
  color: var(--lc-text-subtle);
  text-align: center;
}

.lc-pv__placeholder .lc-icon { width: 4.5rem; height: 4.5rem; stroke-width: 0.9; color: var(--lc-text-muted); }

/* Future viewer mounts a <canvas> here (see docs/ui/3d-integration.md). */
.lc-pv__viewer-host { touch-action: none; }
.lc-pv__viewer-host > canvas { display: block; width: 100% !important; height: 100% !important; }

.lc-pv__badge {
  position: absolute;
  top: var(--lc-space-4);
  left: var(--lc-space-4);
  background: color-mix(in srgb, var(--lc-graphite-950) 80%, transparent);
}

.lc-pv__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-3);
}

.lc-pv__thumbs {
  display: flex;
  gap: var(--lc-space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.lc-pv__thumb {
  flex: none;
  width: 4rem;
  height: 3rem;
  padding: 0.2rem;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-sm);
  background: var(--lc-graphite-990);
  cursor: pointer;
}

.lc-pv__thumb img { width: 100%; height: 100%; object-fit: contain; }
.lc-pv__thumb[aria-pressed="true"] { border-color: var(--lc-accent); }

/* ---------- Summary ---------- */
.lc-pdp__summary {
  display: grid;
  gap: var(--lc-space-6);
}

.lc-pdp__heading {
  display: grid;
  gap: var(--lc-space-3);
}

.lc-pdp__title {
  font-size: var(--lc-text-3xl);
  line-height: 1.1;
  letter-spacing: var(--lc-tracking-display);
}

.lc-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-space-2) var(--lc-space-4);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
}

.lc-pdp__description {
  margin: 0;
  color: var(--lc-text-muted);
  line-height: 1.65;
}

.lc-pdp__buy {
  display: grid;
  gap: var(--lc-space-5);
  padding: var(--lc-space-6);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-surface-raised);
}

.lc-pdp__buy .lc-btn-row { flex-direction: column; align-items: stretch; }
.lc-pdp__buy .lc-btn-row .lc-btn { width: 100%; }

.lc-pdp__assurances {
  display: grid;
  gap: var(--lc-space-3);
  margin: 0;
  padding: var(--lc-space-5) 0 0;
  border-top: 1px solid var(--lc-border);
  list-style: none;
  font-size: var(--lc-text-sm);
  color: var(--lc-text-muted);
}

.lc-pdp__assurances li { display: flex; gap: var(--lc-space-3); align-items: flex-start; }
.lc-pdp__assurances .lc-icon { color: var(--lc-text-subtle); margin-top: 0.1rem; }

.lc-pdp__project-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-4);
  padding: var(--lc-space-4) var(--lc-space-5);
  border: 1px dashed var(--lc-border-strong);
  border-radius: var(--lc-radius-md);
  font-size: var(--lc-text-sm);
  color: var(--lc-text-muted);
}

.lc-pdp__project-hint strong { display: block; color: var(--lc-text); }

/* ---------- In-page section nav ---------- */
.lc-subnav {
  position: sticky;
  top: var(--lc-header-h);
  z-index: 5;
  border-block: 1px solid var(--lc-border);
  background: color-mix(in srgb, var(--lc-surface) 94%, transparent);
}

@supports (backdrop-filter: blur(1px)) {
  .lc-subnav {
    background: color-mix(in srgb, var(--lc-surface) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.lc-subnav ul {
  display: flex;
  gap: var(--lc-space-1);
  margin: 0;
  padding: var(--lc-space-2) 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.lc-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--lc-space-3);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.lc-subnav a:hover { color: var(--lc-text); background: var(--lc-surface-hover); text-decoration: none; }

/* ---------- Detail sections ---------- */
.lc-pdp-section {
  display: grid;
  gap: var(--lc-space-6);
  padding-block: var(--lc-space-12);
  border-bottom: 1px solid var(--lc-border);
}

.lc-pdp-section:last-child { border-bottom: 0; }

@media (min-width: 1024px) {
  .lc-pdp-section {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--lc-space-12);
  }
}

.lc-pdp-section__head { display: grid; gap: var(--lc-space-3); align-content: start; }
.lc-pdp-section__head p { margin: 0; color: var(--lc-text-muted); font-size: var(--lc-text-sm); }

.lc-pdp-section--full { grid-template-columns: minmax(0, 1fr); }

.lc-info-grid {
  display: grid;
  gap: var(--lc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.lc-info-grid .lc-card { padding: var(--lc-space-5); }

.lc-product-grid-related {
  display: grid;
  gap: var(--lc-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}

/* =========================================================== STORE THEME (commerce-first UI) */
/* Left: the product on a neutral plate. Right: the purchase decision (price, quantity, cart, help, what happens
   after the order), then the few values that matter; the full technical list follows below the fold. */
.lc-theme-store .lc-pdp { padding-block: var(--lc-space-5) var(--lc-section-y-compact); }
.lc-theme-store .lc-pdp__breadcrumb { margin-bottom: var(--lc-space-5); }

@media (min-width: 1024px) {
  .lc-theme-store .lc-pdp__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
  .lc-theme-store .lc-pv { position: sticky; top: calc(var(--lc-header-h) + var(--lc-space-6)); }
  .lc-theme-store .lc-pdp__summary { position: static; }
}

.lc-theme-store .lc-pv__stage {
  border-color: var(--lc-store-line);
  border-radius: var(--lc-radius-xl);
  background: radial-gradient(80% 70% at 50% 40%, #ffffff, transparent 75%), var(--lc-store-media);
}

.lc-theme-store .lc-pv__media::before { background-image: radial-gradient(circle at center, rgba(14, 16, 19, 0.06) 1px, transparent 1.5px); }
.lc-theme-store .lc-pv__media .lc-media-frame__corner { display: none; }
.lc-theme-store .lc-pv__image { padding: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); }
.lc-theme-store .lc-pv__thumb { background: var(--lc-store-media); border-color: var(--lc-store-line); border-radius: var(--lc-radius-md); width: 4.5rem; height: 3.5rem; }
.lc-theme-store .lc-pv__thumb[aria-pressed="true"] { border-color: var(--lc-text); box-shadow: inset 0 0 0 1px var(--lc-text); }
.lc-theme-store .lc-pv__badge { background: var(--lc-surface); }

.lc-theme-store .lc-pdp__summary { gap: var(--lc-space-5); }
.lc-theme-store .lc-pdp__heading { gap: var(--lc-space-2); }
.lc-theme-store .lc-pdp__title { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.12; }
.lc-theme-store .lc-pdp__meta { font-size: var(--lc-text-sm); }
.lc-theme-store .lc-pdp__description { font-size: var(--lc-text-base); line-height: 1.6; }

.lc-theme-store .lc-pdp__buy {
  gap: var(--lc-space-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-color: var(--lc-store-line);
  border-radius: var(--lc-radius-xl);
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-card);
}

.lc-theme-store .lc-pdp__buy .lc-price__amount { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem); }
.lc-theme-store .lc-pdp__buy .lc-price__quote { font-size: var(--lc-text-xl); }
.lc-theme-store .lc-pdp__buy .lc-add-to-cart { flex-wrap: nowrap; }
.lc-theme-store .lc-pdp__buy .lc-add-to-cart .lc-btn { min-height: 3.25rem; }
.lc-theme-store .lc-pdp__buy .lc-qty { min-height: 3.25rem; }
.lc-theme-store .lc-pdp__buy .lc-price__note { font-size: var(--lc-text-xs); }

.lc-theme-store .lc-pdp__assurances {
  gap: var(--lc-space-3);
  margin-top: var(--lc-space-1);
  padding-top: var(--lc-space-4);
  border-top: 1px solid var(--lc-store-line);
  font-size: var(--lc-text-xs);
}

.lc-theme-store .lc-pdp__assurances li { display: grid; }
.lc-theme-store .lc-pdp__assurances strong { font-size: var(--lc-text-sm); }

.lc-pdp__keyspecs { display: grid; gap: var(--lc-space-2); }
.lc-pdp__keyspecs-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lc-space-4); }
.lc-pdp__keyspecs-title { font-size: var(--lc-text-base); font-weight: var(--lc-weight-semibold); }

.lc-theme-store .lc-pdp__project-hint { border-style: solid; border-color: var(--lc-store-line); background: var(--lc-store-canvas); border-radius: var(--lc-radius-lg); }

.lc-theme-store .lc-subnav { border-color: var(--lc-store-line); }
.lc-theme-store .lc-subnav a { font-weight: var(--lc-weight-medium); }
.lc-theme-store .lc-pdp-section { border-bottom-color: var(--lc-store-line); }

/* Phones and tablets: price and cart right under the title; the description follows. */
@media (max-width: 1023px) {
  .lc-theme-store .lc-pdp__heading { order: 1; }
  .lc-theme-store .lc-pdp__buy { order: 2; }
  .lc-theme-store .lc-pdp__description { order: 3; }
  .lc-theme-store .lc-pdp__keyspecs { order: 4; }
  .lc-theme-store .lc-pdp__project-hint { order: 5; }
}