/* ================================================================
   Product page (products#show) — design system "ProductPage"
   Dimmed HUD banner, Spec-sheet description, sticky purchase panel.
   Tokens + shared ev-* components live in design_system.css.

   Class names used by Stimulus controllers are kept as-is:
   product-view (#product-image-container, carousel-*, #image-lightbox),
   language-switcher (lang-*), variant-picker / discount
   (hero-variant-*, hero-purchase-form, discount-*), checkout-form
   (#stripe-loading-overlay).
   ================================================================ */

.product-page { gap: var(--space-6); }

/* ---- Back link ---- */
.pp-back {
  align-self: flex-start;
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  background: var(--surface-100);
  transition: color 0.15s, border-color 0.15s;
}

.pp-back:hover { color: var(--ink); border-color: var(--ki); }
.pp-back:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }

/* ---- Banner ---- */
.pp-banner {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background-color: var(--ki-deep);
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  align-items: flex-end;
}

.pp-banner .ev-br { width: 18px; height: 18px; }
.pp-banner .ev-br--tl { top: 10px; left: 10px; }
.pp-banner .ev-br--tr { top: 10px; right: 10px; }
.pp-banner .ev-br--bl { bottom: 10px; left: 10px; }
.pp-banner .ev-br--br { bottom: 10px; right: 10px; }

.product-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* crop mostly from the bottom, a little from the top */
  opacity: 0.55;
  cursor: zoom-in;
}

.pp-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, var(--void) 0%, rgba(7, 8, 12, 0.6) 40%, rgba(8, 17, 31, 0.2) 100%);
}

.pp-banner-over {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-8) var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none; /* clicks fall through to the image (lightbox) */
}

.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.pp-title {
  margin: 0;
  font: 700 32px/1.15 var(--font-sans);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---- Two columns ---- */
.pp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

#hero-description,
#hero-purchase { scroll-margin-top: 80px; }

.hero-desc-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* Wraps the language switch + per-language bodies (language-switcher controller) */
.pp-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Language switch: sticky top-right of the description, no row of its own ---- */
.pp-lang {
  position: sticky;
  top: 72px;
  z-index: 5;
  height: 0;
  margin-bottom: calc(-1 * var(--space-6));
  display: flex;
  justify-content: flex-end;
}

.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: fit-content;
  font: 600 12px/1 var(--font-sans);
  color: var(--ink);
  background: var(--surface-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 0 0 4px var(--void);
  transition: border-color 0.15s;
}

.lang-switcher:hover { border-color: var(--ki); }
.lang-current { display: inline-flex; align-items: center; gap: 6px; }
.lang-globe { width: 14px; height: 14px; color: var(--ink-muted); }
.lang-label { font: 700 12px/1 var(--font-display); letter-spacing: 0.08em; }
.lang-dropdown-arrow { font-size: 10px; color: var(--ink-muted); }

.lang-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 170px;
  padding: 6px;
  background: var(--surface-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--lift);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}

.lang-dropdown--open { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: 400 13px/1.2 var(--font-sans);
  color: var(--ink-muted);
  cursor: pointer;
}

.lang-option:hover { background: var(--surface-200); color: var(--ink); }
.lang-option--active { background: var(--surface-200); color: var(--ink); box-shadow: inset 2px 0 0 var(--ki); }

/* ---- Description: Spec sheet (headings left, bullet lists right) ----
   Works on plain parsed Markdown: h2/h3 headings or bold-only paragraphs
   (marked `.md-h` server-side by ProductsHelper#spec_sheet). */
.hero-desc-body {
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  column-gap: var(--space-6);
}

.hero-desc-body[hidden] { display: none; }
.hero-desc-body > * { grid-column: 1 / -1; margin: 0 0 var(--space-2); }

.hero-desc-body h2,
.hero-desc-body h3,
.hero-desc-body h4,
.hero-desc-body .md-h,
.hero-desc-body .md-h strong {
  font: 700 11px/1.4 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ki);
}

.hero-desc-body h2,
.hero-desc-body h3,
.hero-desc-body h4,
.hero-desc-body .md-h {
  grid-column: 1;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.hero-desc-body ul,
.hero-desc-body ol {
  grid-column: 2;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.hero-desc-body li { padding: 3px 0; }
.hero-desc-body li::before { content: "▸"; color: var(--ink-muted); margin-right: var(--space-2); font-size: 11px; }
.hero-desc-body strong { color: var(--ink); font-weight: 600; }
.hero-desc-body :is(h2, h3, h4, .md-h) strong { color: inherit; font: inherit; }
.hero-desc-body a { color: var(--ki); text-decoration: underline; text-underline-offset: 2px; }
.hero-desc-body a:hover { color: var(--ink); }
.hero-desc-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hero-desc-body th,
.hero-desc-body td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: left; }

/* ---- Gallery / carousel ---- */
#product-image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-100);
}

#product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.25s ease;
}

#product-image-container img[hidden] { display: none; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(7, 8, 12, 0.7);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s;
}

.carousel-arrow:hover { border-color: var(--ki); }
.carousel-arrow:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(242, 244, 248, 0.3);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.carousel-dot:hover { background: rgba(242, 244, 248, 0.6); }
.carousel-dot.active { background: var(--ki); transform: scale(1.25); }

.carousel-counter {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 2;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  background: rgba(7, 8, 12, 0.7);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* ---- Image lightbox (built by product_view_controller.js) ---- */
#image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(7, 8, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  animation: lightbox-in 0.15s ease forwards;
}

#image-lightbox.fade-out { animation: lightbox-out 0.15s ease forwards; }

@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-out { from { opacity: 1; } to { opacity: 0; } }

#image-lightbox img {
  width: 90vw;
  height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  cursor: default;
}

#image-lightbox .lightbox-close,
#image-lightbox .lightbox-arrow {
  position: absolute;
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-100);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s;
}

#image-lightbox .lightbox-close:hover,
#image-lightbox .lightbox-arrow:hover { border-color: var(--ki); }
#image-lightbox .lightbox-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 20px; }
#image-lightbox .lightbox-arrow { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 28px; }
#image-lightbox .lightbox-prev { left: 16px; }
#image-lightbox .lightbox-next { right: 16px; }

#image-lightbox .lightbox-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  background: var(--surface-100);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

#image-lightbox .lightbox-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

#image-lightbox .lightbox-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(242, 244, 248, 0.3);
  cursor: pointer;
}

#image-lightbox .lightbox-dot.active { background: var(--ki); transform: scale(1.25); }

/* ---- Purchase panel ---- */
.hero-purchase-panel {
  position: sticky;
  top: 72px;
  background: var(--surface-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero-purchase-panel .panel-title { margin: 0; font: 600 15px/1.3 var(--font-sans); color: var(--ink); }

.hero-purchase-form { display: flex; flex-direction: column; gap: var(--space-3); }

.hero-purchase-form label {
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero-purchase-form input[type="email"],
.hero-purchase-form input[type="text"] {
  width: 100%;
  margin-top: calc(-1 * var(--space-1));
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--void);
  color: var(--ink);
  font: 400 14px/1.2 var(--font-sans);
}

.hero-purchase-form input::placeholder { color: #5c6478; }

.hero-purchase-form input:focus,
.hero-purchase-panel .discount-input:focus {
  outline: none;
  border-color: var(--ki);
  box-shadow: 0 0 0 1px var(--ki);
}

/* Variant picker (details/summary, variant_picker_controller.js) */
.hero-variant-picker { min-width: 0; }
.hero-variant-picker > summary { list-style: none; }
.hero-variant-picker > summary::-webkit-details-marker { display: none; }

.hero-purchase-form .hero-variant-summary,
.hero-purchase-form .hero-variant-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-200);
  color: var(--ink);
  font: 400 14px/1.35 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.hero-purchase-form .hero-variant-summary:hover,
.hero-purchase-form .hero-variant-option:hover,
.hero-variant-picker[open] > .hero-variant-summary,
.hero-variant-picker[data-selected] > .hero-variant-summary,
.hero-purchase-form .hero-variant-option:has(.hero-variant-radio:checked) { border-color: var(--ki); }

.hero-variant-summary:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }

.hero-variant-summary::after {
  content: "▾";
  flex: none;
  font-size: 11px;
  color: var(--ink-muted);
  transition: transform 0.15s;
}

.hero-variant-picker[open] > .hero-variant-summary::after { transform: rotate(180deg); }

.hero-variant-radio-indicator {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 4px solid var(--ki);
}

.hero-variant-picker:not([data-selected]) .hero-variant-radio-indicator { border-width: 2px; border-color: var(--ink-muted); }

.hero-variant-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 16rem;
  margin-top: var(--space-2);
  overflow-y: auto;
}

.hero-variant-radio { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--ki); }
.hero-variant-radio:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }
.hero-variant-info { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; }
.hero-variant-info .v-name { overflow-wrap: anywhere; color: var(--ink); font-size: 14px; font-weight: 500; }
.hero-variant-summary .hero-variant-pricing { margin-left: auto; }
.hero-variant-pricing { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; }
.hero-variant-price-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); white-space: nowrap; }

.hero-variant-price,
.hero-variant-price-discounted { font: 800 20px/1 var(--font-sans); letter-spacing: -.02em; color: var(--ink); }

.hero-variant-option.is-discounted .hero-variant-price {
  font: 500 12px/1 var(--font-sans);
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* The struck-through old price reads as plain text, not split euros/cents. */
.hero-variant-option.is-discounted .hero-variant-price .ev-cur,
.hero-variant-option.is-discounted .hero-variant-price .ev-ct { font-size: inherit; vertical-align: baseline; margin: 0; color: inherit; }

.hero-variant-stock { font: 700 10px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hot); }
.hero-purchase-form .hero-variant-option.is-out-of-stock { background: var(--surface-100); cursor: not-allowed; }
.hero-purchase-form .hero-variant-option.is-out-of-stock:hover { border-color: var(--line); }
.hero-variant-option.is-out-of-stock .v-name,
.hero-variant-option.is-out-of-stock .hero-variant-price { color: var(--ink-muted); }

.hero-payment-methods { margin: 0; font-size: 12px; color: var(--ink-muted); text-align: center; }

/* Discount code (discount_controller.js) */
.hero-purchase-panel .discount-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.hero-purchase-panel .discount-form label {
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero-purchase-panel .discount-input-row { display: flex; gap: var(--space-2); }

.hero-purchase-panel .discount-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--void);
  color: var(--ink);
  font: 400 13px/1.2 var(--font-sans);
}

.hero-purchase-panel .discount-input::placeholder { color: #5c6478; }
.hero-purchase-panel .discount-input:disabled { opacity: 0.55; cursor: not-allowed; }
.hero-purchase-panel .discount-status { margin: 0; min-height: 1.25rem; font-size: 13px; font-weight: 600; }
.hero-purchase-panel .discount-status.success { color: var(--success); }
.hero-purchase-panel .discount-status.error { color: var(--hot); }
.hero-purchase-panel .discount-status.loading { display: flex; align-items: center; gap: var(--space-2); color: var(--ki); }

.hero-purchase-panel .discount-status.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid rgba(34, 211, 238, 0.3);
  border-top-color: var(--ki);
  border-radius: 50%;
  animation: discount-spin 0.7s linear infinite;
}

@keyframes discount-spin { to { transform: rotate(360deg); } }

/* iOS Safari zooms into any focused input under 16px; keep phones at 16px */
@media (max-width: 760px), (pointer: coarse) {
  .hero-purchase-form input[type="email"],
  .hero-purchase-form input[type="text"],
  .hero-purchase-panel .discount-input { font-size: 16px; }
}

/* ---- Stripe redirect overlay (checkout_form_controller.js) ---- */
.stripe-loading-overlay {
  display: none; /* shown on submit */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(7, 8, 12, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.stripe-loading-card {
  background: var(--surface-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  text-align: center;
  box-shadow: var(--lift);
}

.stripe-loading-card p { margin: var(--space-4) 0 0; color: var(--ink-soft); font-size: 15px; font-weight: 500; }

.stripe-loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--stone);
  border-radius: 50%;
  animation: stripe-spin 0.7s linear infinite;
}

@keyframes stripe-spin { to { transform: rotate(360deg); } }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .pp-banner { min-height: 300px; }
  .pp-banner-over { padding: var(--space-6) var(--space-4) var(--space-4); }
  .pp-title { font-size: 24px; }
  .pp-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .hero-purchase-panel { position: static; padding: var(--space-4); }
  #product-image-container { height: 280px; }
  .pp-lang { top: 64px; }
  .hero-desc-body { grid-template-columns: minmax(0, 1fr); }

  .hero-desc-body h2,
  .hero-desc-body h3,
  .hero-desc-body h4,
  .hero-desc-body .md-h,
  .hero-desc-body ul,
  .hero-desc-body ol { grid-column: 1; }

  .hero-desc-body :is(h2, h3, h4, .md-h) + :is(ul, ol) { border-top: 0; padding-top: 0; }
}

@media (max-width: 480px) {
  .pp-banner { min-height: 260px; }
  #product-image-container { height: 220px; }
  .hero-purchase-form input[type="email"],
  .hero-purchase-form input[type="text"] { font-size: 16px; } /* no iOS zoom on focus */
}

@media (prefers-reduced-motion: reduce) {
  .lang-dropdown,
  .carousel-dot,
  #product-image-container img { transition: none; }
  #image-lightbox,
  #image-lightbox.fade-out { animation: none; opacity: 1; }
}