/* =========================================================================
   DiscountLED - Single Lighting Product page
   All selectors namespaced .dled-product* and scoped under .dled-product so
   they cannot leak into, or be leaked into by, unrelated theme styles.

   Design tokens are read from the live theme (--logo-orange / --font-head)
   with hard fallbacks, so this page stays visually consistent with the rest
   of the site rather than introducing a second palette.
   ========================================================================= */

.dled-product {
  /* Local token layer - inherits the theme, falls back if tokens are absent. */
  --dled-orange:        var(--logo-orange, #ff6b00);
  --dled-orange-dark:   #d9550f;
  --dled-orange-soft:   rgba(255, 107, 0, 0.10);
  --dled-orange-glow:   rgba(255, 107, 0, 0.22);

  --dled-ink:           #1a1208;
  --dled-body:          #3d3020;
  --dled-muted:         #6b6560;
  --dled-line:          #e7e3de;
  --dled-surface:       #f5f3f0;
  --dled-surface-2:     #faf9f7;
  --dled-dark:          #201c1a;

  --dled-font-head:     var(--font-head, 'Space Grotesk', sans-serif);
  --dled-font-body:     var(--font-body, 'Inter', sans-serif);

  --dled-radius:        20px;
  --dled-radius-sm:     12px;
  --dled-gap:           56px;

  padding: 56px 20px 80px;
  background: #fff;
  font-family: var(--dled-font-body);
  color: var(--dled-body);
}

.dled-product *,
.dled-product *::before,
.dled-product *::after { box-sizing: border-box; }

.dled-product__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Breadcrumb ---------- */
.dled-product__breadcrumb {
  margin: 0 0 32px;
  font-size: 0.95rem;
}

.dled-product__breadcrumb a {
  color: var(--dled-orange);
  font-weight: 600;
  text-decoration: none;
}

.dled-product__breadcrumb a:hover,
.dled-product__breadcrumb a:focus-visible { text-decoration: underline; }

/* ---------- Layout ---------- */
.dled-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--dled-gap);
  align-items: start;
}

/* =========================================================================
   LEFT - gallery
   ========================================================================= */
.dled-product__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* FIXED STAGE SIZE.
     The frame is a square regardless of the image inside it, so every product
     page has the same layout height whether the upload is 800x600, 2560x1920
     or portrait. The image is fitted into this box (object-fit: contain), never
     the other way round - so no upload can stretch or shrink the frame.
     Padding is safe here because the frame is white, the same as the white
     background baked into the product photos: it reads as breathing room,
     not as the grey ring it used to be. */
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--dled-line);
  border-radius: var(--dled-radius);
  overflow: hidden;
}

/* Radial orange glow behind the product. */
.dled-product__frame::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--dled-orange-glow) 0%, rgba(255, 107, 0, 0) 68%);
  pointer-events: none;
}

.dled-product__image,
.dled-product__image-placeholder {
  position: relative;
  z-index: 1;
  display: block;

  /* Fill the fixed stage and scale down to fit. object-fit: contain preserves
     the aspect ratio, so an oversized or odd-shaped upload is letterboxed in
     white rather than cropped or distorted. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---------- Hover zoom ----------
   transform-origin follows the cursor (set inline by product.js), so hovering
   magnifies the point under the pointer. Only enabled on devices with a real
   hovering pointer - see the @media guard below. */
.dled-product__frame.is-zoomable { cursor: zoom-in; }

.dled-product__frame.is-zoomable .dled-product__image {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.dled-product__frame.is-zoomable.is-zooming .dled-product__image {
  transform: scale(2);
  transition-duration: 0.18s;
}

/* Hide the radial glow while zoomed so it does not wash over the detail. */
.dled-product__frame.is-zooming::before { opacity: 0; transition: opacity 0.18s ease; }

.dled-product__zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(32, 28, 26, 0.82);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.dled-product__frame.is-zoomable:hover .dled-product__zoom-hint { opacity: 1; }
.dled-product__frame.is-zooming .dled-product__zoom-hint { opacity: 0; }

/* Only products with no image at all fall back to the grey panel. It fills the
   same fixed square, so an imageless product does not change the page height. */
.dled-product__image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--dled-surface);
  border-radius: var(--dled-radius-sm);
  color: #d9d4cd;
  font-size: 4rem;
}

/* Category badge pill, top-left. */
.dled-product__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 15px;
  background: var(--dled-dark);
  color: #fff;
  border-radius: 999px;
  font-family: var(--dled-font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Thumbnails ---------- */
.dled-product__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.dled-product__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  padding: 6px;
  background: var(--dled-surface-2);
  border: 2px solid var(--dled-line);
  border-radius: var(--dled-radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.dled-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dled-product__thumb:hover { transform: translateY(-2px); }
.dled-product__thumb.is-active { border-color: var(--dled-orange); }

.dled-product__thumb:focus-visible,
.dled-product__tab:focus-visible,
.dled-product__cta:focus-visible,
.dled-product__panel:focus-visible {
  outline: 3px solid var(--dled-orange);
  outline-offset: 3px;
}

/* =========================================================================
   RIGHT - info panel
   ========================================================================= */
.dled-product__eyebrow {
  margin: 0 0 10px;
  color: var(--dled-orange);
  font-family: var(--dled-font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.dled-product__title {
  margin: 0 0 16px;
  font-family: var(--dled-font-head);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dled-ink);
}

.dled-product__desc p {
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--dled-body);
}

/* ---------- Spec chips ---------- */
.dled-product__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
  padding: 0;
  list-style: none;
}

.dled-product__chip {
  padding: 16px 12px;
  background: var(--dled-surface);
  border: 1px solid var(--dled-line);
  border-radius: var(--dled-radius-sm);
  text-align: center;
}

.dled-product__chip-value {
  display: block;
  font-family: var(--dled-font-head);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dled-ink);
  word-break: break-word;
}

.dled-product__chip-label {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dled-muted);
}

/* ---------- CTAs ---------- */
.dled-product__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 26px 0 0;
}

.dled-product__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 22px;
  border-radius: var(--dled-radius-sm);
  font-family: var(--dled-font-head);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dled-product__cta--primary {
  background: var(--dled-orange);
  color: #fff;
  border: 2px solid var(--dled-orange);
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.28);
}

.dled-product__cta--primary:hover,
.dled-product__cta--primary:focus-visible {
  background: var(--dled-orange-dark);
  border-color: var(--dled-orange-dark);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 107, 0, 0.36);
  transform: translateY(-2px);
}

.dled-product__cta--secondary {
  background: #fff;
  color: var(--dled-ink);
  border: 2px solid var(--dled-line);
}

.dled-product__cta--secondary:hover,
.dled-product__cta--secondary:focus-visible {
  border-color: var(--dled-orange);
  color: var(--dled-orange);
}

/* ---------- Trust badges ---------- */
.dled-product__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--dled-line);
  list-style: none;
}

.dled-product__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dled-body);
}

.dled-product__trust-item i { color: var(--dled-orange); }

/* =========================================================================
   Tabbed details
   ========================================================================= */
.dled-product__tabs { margin-top: 72px; }

.dled-product__tablist {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--dled-line);
}

.dled-product__tab {
  position: relative;
  padding: 0 2px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--dled-font-head);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--dled-muted);
  transition: color 0.18s ease;
}

.dled-product__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--dled-orange);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform 0.22s ease;
}

.dled-product__tab:hover { color: var(--dled-ink); }
.dled-product__tab.is-active { color: var(--dled-orange); }
.dled-product__tab.is-active::after { transform: scaleX(1); }

.dled-product__panel {
  display: none;
  padding-top: 34px;
}

.dled-product__panel.is-active {
  display: block;
  animation: dled-fade 0.28s ease both;
}

@keyframes dled-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.dled-product__panel-title {
  margin: 0 0 20px;
  font-family: var(--dled-font-head);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--dled-ink);
}

.dled-product__panel-title + * { margin-top: 0; }
.dled-product__apps + .dled-product__panel-title,
.dled-product__features + .dled-product__panel-title { margin-top: 40px; }

/* ---------- Feature cards ---------- */
.dled-product__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dled-product__feature {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 19px;
  background: var(--dled-surface);
  border: 1px solid var(--dled-line);
  border-radius: var(--dled-radius-sm);
}

.dled-product__feature-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--dled-orange-soft);
  color: var(--dled-orange);
  border-radius: 8px;
  font-size: 0.78rem;
}

.dled-product__feature-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--dled-body);
}

/* ---------- Application pills ---------- */
.dled-product__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dled-product__app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  background: var(--dled-surface-2);
  border: 1px solid var(--dled-line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dled-body);
}

.dled-product__app-dot {
  width: 7px;
  height: 7px;
  background: var(--dled-orange);
  border-radius: 50%;
}

/* ---------- Specifications table ---------- */
.dled-product__spec {
  width: 100%;
  border-collapse: collapse;
}

.dled-product__spec-row { border-bottom: 1px solid var(--dled-line); }
.dled-product__spec-row:last-child { border-bottom: 0; }

.dled-product__spec-label,
.dled-product__spec-value {
  padding: 15px 0;
  font-size: 0.97rem;
  vertical-align: top;
}

.dled-product__spec-label {
  width: 45%;
  text-align: left;
  font-weight: 500;
  color: var(--dled-muted);
}

.dled-product__spec-value {
  text-align: right;
  font-weight: 700;
  color: var(--dled-ink);
}

/* Legacy HTML spec tables (pre-field products) - keep them readable. */
.dled-product__legacy-spec { overflow-x: auto; }
.dled-product__legacy-spec table { width: 100%; border-collapse: collapse; }
.dled-product__legacy-spec th,
.dled-product__legacy-spec td {
  padding: 11px 14px;
  border: 1px solid var(--dled-line);
  font-size: 0.92rem;
  text-align: left;
}
.dled-product__legacy-spec thead th { background: var(--dled-surface); font-weight: 700; }
.dled-product__legacy-spec h2 { display: none; }

.dled-product__richtext { font-size: 0.99rem; line-height: 1.72; }
.dled-product__richtext ul { padding-left: 20px; }
.dled-product__richtext li { margin-bottom: 8px; }

/* =========================================================================
   Related products
   ========================================================================= */
.dled-product__related {
  margin-top: 76px;
  padding-top: 52px;
  border-top: 1px solid var(--dled-line);
}

.dled-product__related-title {
  margin: 0 0 30px;
  font-family: var(--dled-font-head);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--dled-ink);
}

.dled-product__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.dled-product__related-card {
  display: block;
  padding: 16px;
  background: var(--dled-surface-2);
  border: 1px solid var(--dled-line);
  border-radius: var(--dled-radius-sm);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.dled-product__related-card:hover {
  border-color: var(--dled-orange);
  transform: translateY(-3px);
}

.dled-product__related-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  overflow: hidden;
}

.dled-product__related-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dled-product__related-placeholder { color: #ddd8d1; font-size: 2rem; }

.dled-product__related-name {
  display: block;
  font-family: var(--dled-font-head);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dled-ink);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .dled-product { --dled-gap: 40px; }
  .dled-product__grid { grid-template-columns: minmax(0, 1fr); }
  /* Single column: a full-width square would be enormous, so flatten the stage. */
  .dled-product__frame { aspect-ratio: 4 / 3; max-width: 560px; margin-inline: auto; }
  .dled-product__tabs { margin-top: 52px; }
}

@media (max-width: 700px) {
  .dled-product__features { grid-template-columns: minmax(0, 1fr); }
  .dled-product__tablist { gap: 22px; }
}

@media (max-width: 480px) {
  .dled-product { padding: 40px 16px 60px; }
  .dled-product__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dled-product__frame { aspect-ratio: 1 / 1; padding: 16px; }
  .dled-product__thumb { width: 68px; height: 68px; }
  .dled-product__trust { gap: 10px 18px; }
  .dled-product__spec-label,
  .dled-product__spec-value { font-size: 0.92rem; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .dled-product *,
  .dled-product *::before,
  .dled-product *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .dled-product__panel.is-active { animation: none; }
  .dled-product__cta:hover,
  .dled-product__thumb:hover,
  .dled-product__related-card:hover { transform: none; }
  .dled-product__tab::after { transition: none; }

  /* No magnification when motion is reduced - the jump is the problem, not the
     zoom itself, and a 2x snap is worse than none. */
  .dled-product__frame.is-zoomable.is-zooming .dled-product__image { transform: none; }
  .dled-product__frame.is-zoomable { cursor: default; }
  .dled-product__zoom-hint { display: none; }
}