/* ═══════════════════════════════════════════════════════════════
   product.css — Talleres Un Cuarto Verde · Design System
   Consumes tokens from root.css · Light theme · March 2026
   ═══════════════════════════════════════════════════════════════ */

/* ── PDP wrapper ──────────────────────────────────────────────── */

.bn-pdp {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  min-height: var(--token-size-100vh);
  padding: clamp(var(--token-space-25), var(--token-size-3vw), var(--token-space-5));
  box-sizing: border-box;
}

.bn-pdp * { box-sizing: border-box; }

.bn-pdp__wrap {
  width: var(--token-ratio-100percent);
  max-width: var(--token-size-80rem);          /* ← was 112rem, tighter for better reading */
  margin: var(--token-number-0) auto;
}


/* ── Product grid ─────────────────────────────────────────────── */

.bn-pdp__grid {
  display: grid;
  grid-template-columns: var(--token-track-1fr);
  gap: clamp(var(--token-space-25), var(--token-size-3vw), var(--token-space-5));
  align-items: start;
  position: relative;
}


/* ── Gallery ──────────────────────────────────────────────────── */

.bn-pdp__gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--token-space-15), var(--token-size-1p6vw), var(--token-space-2));
  position: relative;
  z-index: var(--token-number-2);
  min-width: var(--token-number-0);
}

.bn-pdp__media {
  width: 60%;
  aspect-ratio: var(--token-number-1) / var(--token-number-1);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: relative;
  box-shadow: var(--shadow-card);
  z-index: var(--token-number-1);
}

.bn-pdp__image {
  width: var(--token-ratio-100percent);
  height: var(--token-ratio-100percent);
  object-fit: contain;
  padding: var(--token-number-0);
  transform: translateZ(var(--token-number-0));
  transition: transform var(--token-duration-0p35s) cubic-bezier(var(--token-number-0p2), var(--token-number-0p8), var(--token-number-0p2), var(--token-number-1));
  will-change: transform;
}

.bn-pdp__media:hover .bn-pdp__image { transform: scale(var(--token-number-1p04)); }

.bn-pdp__placeholder {
  width: var(--token-ratio-100percent);
  height: var(--token-ratio-100percent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-weight: var(--font-weight-600);
  letter-spacing: var(--tracking-label);
}


/* ── Thumbnails ───────────────────────────────────────────────── */

.bn-pdp__thumbs {
  display: flex;
  gap: var(--token-space-125);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--token-space-025) var(--token-number-0) var(--token-space-075);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: var(--token-number-3);
  min-width: var(--token-number-0);
}

.bn-pdp__thumbs::-webkit-scrollbar { display: none; }

.bn-pdp__thumb {
  width: var(--token-size-72px);
  height: var(--token-size-72px);
  flex: var(--token-number-0) var(--token-number-0) auto;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  padding: var(--token-space-5px);
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(var(--token-number-0));
  transition: transform var(--token-duration-0p15s) ease, border-color var(--token-duration-0p2s) ease, box-shadow var(--token-duration-0p2s) ease;
}

.bn-pdp__thumb img {
  width: var(--token-ratio-100percent);
  height: var(--token-ratio-100percent);
  object-fit: contain;
  opacity: var(--token-number-0p7);
  transition: opacity var(--token-duration-0p2s) ease;
  display: block;
}

.bn-pdp__thumb:hover {
  transform: translateY(var(--token-size-neg-1px));
  border-color: rgb(var(--color-green-rgb) / var(--alpha-40));
}

.bn-pdp__thumb:hover img { opacity: var(--token-number-0p9); }

.bn-pdp__thumb.is-active {
  border-color: var(--color-accent);
  box-shadow: var(--token-number-0) var(--token-number-0) var(--token-number-0) var(--token-size-2px) rgb(var(--color-green-rgb) / var(--alpha-20));
}

.bn-pdp__thumb.is-active img {
  opacity: var(--token-number-1);
  transform: scale(var(--token-number-1p02));
}

@media (min-width: 721px) {
  .bn-pdp__gallery--with-thumbs {
    display: grid;
    grid-template-columns: var(--token-size-72px) minmax(var(--token-number-0), var(--token-track-1fr));
    align-items: center;
  }

  .bn-pdp__gallery--with-thumbs .bn-pdp__media { grid-column: 2; grid-row: 1; }
  .bn-pdp__gallery--with-thumbs .bn-pdp__thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}


/* ── Panel (right column) ─────────────────────────────────────── */

.bn-pdp__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--token-space-175), var(--token-size-2vw), var(--token-space-25));
  position: relative;
  z-index: var(--token-number-1);
  min-width: var(--token-number-0);
}

.bn-pdp__details {
  display: grid;
  grid-template-columns: minmax(var(--token-number-0), var(--token-track-1fr));
  gap: clamp(var(--token-space-2), var(--token-size-2vw), var(--token-space-3));
  min-width: var(--token-number-0);
}

.bn-pdp__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--token-number-0), var(--token-track-1fr)));
  gap: var(--token-space-2);
  padding: var(--token-space-2) var(--token-number-0);
  border-top: var(--border-width-hairline) solid var(--color-border);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  position: relative;
  z-index: var(--token-number-3);
  background: var(--color-bg);
}

.bn-pdp__benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--token-space-1);
  min-width: var(--token-number-0);
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: var(--font-weight-600);
  line-height: var(--leading-tight);
  text-align: left;
}

.bn-pdp__benefit svg {
  width: var(--token-size-28px);
  height: var(--token-size-28px);
  flex: var(--token-number-0) var(--token-number-0) auto;
  color: var(--token-color-green-dark);
}


/* ── Breadcrumbs ──────────────────────────────────────────────── */

.bn-pdp__breadcrumbs {
  font-size: var(--text-label);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--token-space-075);
  flex-wrap: wrap;
  margin: var(--token-number-0);
}

.bn-pdp__breadcrumbs a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--token-duration-0p2s) ease;
}

.bn-pdp__breadcrumbs a:hover { color: var(--color-accent); }

.bn-pdp__crumb-sep { opacity: var(--token-number-0p5); }

.bn-pdp__crumb-current {
  color: var(--color-text);
  font-weight: var(--font-weight-600);
}


/* ── Header ───────────────────────────────────────────────────── */

.bn-pdp__header {
  padding-bottom: clamp(var(--token-size-0p85rem), var(--token-size-2vw), var(--token-size-1p25rem));
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.bn-pdp__title {
  font-family: var(--font-title);
  font-weight: var(--weight-900);
  font-size: var(--text-heading-lg-desktop);   /* ← smaller, proportional */
  line-height: var(--leading-tight);
  color: var(--color-text);                     /* ← Ink, not accent */
  margin: var(--token-number-0) var(--token-number-0) var(--token-space-075) var(--token-number-0);
  text-transform: none;                         /* ← no uppercase */
  letter-spacing: var(--tracking-tight);
}

.bn-pdp__sku {
  font-family: var(--font-mono);
  color: var(--color-muted);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
}


/* ── Description ──────────────────────────────────────────────── */

.bn-pdp__desc {
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  margin: var(--token-number-0);
  max-width: 65ch;
  font-size: var(--text-body);
}

.bn-pdp__price {
  color: var(--color-accent);
  font-size: var(--text-heading-md);
  font-weight: var(--weight-700);
}


/* ── Labels (shared) ──────────────────────────────────────────── */

.bn-pdp__label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  color: var(--color-text);
  font-size: var(--text-body);
  margin: var(--token-number-0) var(--token-number-0) var(--token-space-125) var(--token-number-0);
}


/* ── Variants ─────────────────────────────────────────────────── */

.bn-pdp__variants { margin: var(--token-number-0); }

.bn-pdp__unique {
  padding: var(--token-space-2);
  border-radius: var(--radius-btn);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-cloud);
  color: var(--color-muted);
  font-size: var(--text-body);
}

.bn-pdp__variant-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--token-space-1);
}

.bn-pdp__variant {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--token-space-1) var(--token-space-2);
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: transform var(--token-duration-0p12s) ease, border-color var(--token-duration-0p2s) ease, background var(--token-duration-0p2s) ease, box-shadow var(--token-duration-0p2s) ease;
  user-select: none;
}

.bn-pdp__variant-input {
  position: absolute;
  opacity: var(--token-number-0);
  width: var(--token-size-1px);
  height: var(--token-size-1px);
  pointer-events: none;
}

.bn-pdp__variant:hover {
  background: var(--color-cloud);
  border-color: rgb(var(--color-black-rgb) / var(--alpha-18));
  transform: translateY(var(--token-size-neg-1px));
}

.bn-pdp__variant:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.bn-pdp__variant.is-selected {
  background: rgb(var(--color-green-rgb) / var(--alpha-08));
  border-color: var(--color-accent);
  box-shadow: var(--token-number-0) var(--token-number-0) var(--token-number-0) var(--token-size-1px) var(--color-accent);
  transform: none;
}

.bn-pdp__variant-row {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--token-space-2);
  min-width: var(--token-number-0);
}

.bn-pdp__variant-name {
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-label);
  min-width: var(--token-number-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.bn-pdp__variant-meta {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--token-space-025);
  flex: var(--token-number-0) var(--token-number-0) auto;
}

.bn-pdp__variant-price {
  color: var(--color-accent);
  font-weight: var(--weight-700);
  font-size: var(--text-body);
}

.bn-pdp__variant-stock {
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  font-weight: var(--font-weight-600);
  letter-spacing: var(--tracking-label);
}

.bn-pdp__variant-stock.is-in { color: var(--color-success); }
.bn-pdp__variant-stock.is-out { color: var(--color-danger); }
.bn-pdp__variant-stock.is-unknown { color: var(--color-muted); }


/* ── Personalization / Techniques ─────────────────────────────── */

.bn-pdp__personalization { margin: clamp(var(--token-space-3), var(--token-size-3vw), var(--token-space-5)) 0 0; }

.bn-pdp__techniques-list {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-1);
}

.bn-pdp__technique-option {
  display: flex;
  align-items: center;
  gap: var(--token-space-15);
  padding: var(--token-space-175) var(--token-space-2);
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color var(--token-duration-0p2s) ease, background var(--token-duration-0p2s) ease, transform var(--token-duration-0p12s) ease;
  user-select: none;
}

.bn-pdp__technique-option:hover {
  background: var(--color-cloud);
  border-color: rgb(var(--color-black-rgb) / var(--alpha-18));
  transform: translateY(var(--token-size-neg-1px));
}

.bn-pdp__technique-checkbox {
  position: absolute;
  opacity: var(--token-number-0);
  width: var(--token-size-1px);
  height: var(--token-size-1px);
  pointer-events: none;
}

.bn-pdp__technique-check {
  width: var(--token-size-22px);
  height: var(--token-size-22px);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--token-size-6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--token-duration-0p2s) ease, background var(--token-duration-0p2s) ease;
  flex-shrink: var(--token-number-0);
}

.bn-pdp__technique-check::after {
  content: "✓";
  font-size: var(--text-label);
  font-weight: var(--weight-700);
  color: var(--color-white);
  opacity: var(--token-number-0);
  transform: scale(var(--token-number-0p5));
  transition: opacity var(--token-duration-0p15s) ease, transform var(--token-duration-0p15s) ease;
}

.bn-pdp__technique-checkbox:checked + .bn-pdp__technique-check {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.bn-pdp__technique-checkbox:checked + .bn-pdp__technique-check::after {
  opacity: var(--token-number-1);
  transform: scale(var(--token-number-1));
}

.bn-pdp__technique-checkbox:focus-visible + .bn-pdp__technique-check {
  box-shadow: var(--focus-ring);
}

.bn-pdp__technique-option:has(.bn-pdp__technique-checkbox:checked) {
  background: rgb(var(--color-green-rgb) / var(--alpha-06));
  border-color: var(--color-accent);
}

.bn-pdp__technique-label {
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  color: var(--color-text);
}

.bn-pdp__techniques-hint {
  margin-top: var(--token-size-0p5rem);
  font-size: var(--text-label);
  color: var(--color-muted);
}

.bn-pdp__datasheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-1);
  min-height: var(--token-size-44px);
  margin-top: var(--token-space-2);
  padding: var(--token-space-1) var(--token-space-2);
  border: var(--border-width-hairline) solid var(--color-accent);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-600);
  line-height: var(--leading-tight);
  text-decoration: none;
  transition: color var(--token-duration-0p2s) ease, background var(--token-duration-0p2s) ease, border-color var(--token-duration-0p2s) ease;
}

.bn-pdp__datasheet:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.bn-pdp__datasheet:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bn-pdp__datasheet svg {
  width: var(--token-size-20px);
  height: var(--token-size-20px);
  flex: var(--token-number-0) var(--token-number-0) auto;
}


/* ── Quantity ─────────────────────────────────────────────────── */

.bn-pdp__qty { margin: var(--token-number-0); }

.bn-pdp__qty-row {
  display: flex;
  align-items: center;
  gap: var(--token-space-1);
  width: min(var(--token-ratio-100percent), calc(var(--token-size-44px) * 2 + var(--token-size-140px) + var(--token-space-2)));
}

.bn-pdp__qty-btn {
  width: var(--token-size-44px);
  height: var(--token-size-44px);
  flex: var(--token-number-0) var(--token-number-0) auto;
  border-radius: var(--radius-btn);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-body-lg);
  line-height: var(--leading-tight);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--token-duration-0p12s) ease, border-color var(--token-duration-0p2s) ease, background var(--token-duration-0p2s) ease;
}

.bn-pdp__qty-btn:hover {
  background: var(--color-cloud);
  border-color: rgb(var(--color-black-rgb) / var(--alpha-18));
  transform: translateY(var(--token-size-neg-1px));
}

.bn-pdp__qty-btn:active { transform: translateY(var(--token-size-1px)); }

.bn-pdp__qty-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.bn-pdp__qty-input {
  width: var(--token-ratio-100percent);
  max-width: var(--token-size-140px);
  height: var(--token-size-44px);
  padding: var(--token-space-15) var(--token-space-2);
  border-radius: var(--radius-btn);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  text-align: center;
  transition: border-color var(--token-duration-0p2s) ease, box-shadow var(--token-duration-0p2s) ease;
}

.bn-pdp__qty-input:hover {
  border-color: rgb(var(--color-black-rgb) / var(--alpha-18));
}

.bn-pdp__qty-input:focus { outline: none; }

.bn-pdp__qty-input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.bn-pdp__qty-input::-webkit-outer-spin-button,
.bn-pdp__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: var(--token-number-0);
}

.bn-pdp__qty-input { -moz-appearance: textfield; }

.bn-pdp__qty-hint {
  margin-top: var(--token-size-0p45rem);
  color: var(--color-muted);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
}


/* ── Actions / CTA ────────────────────────────────────────────── */

.bn-pdp__actions {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-15);
  margin-top: var(--token-size-0p25rem);
  width: min(var(--token-ratio-100percent), calc(var(--token-size-44px) * 2 + var(--token-size-140px) + var(--token-space-2)));
}

.bn-pdp__cta {
  width: var(--token-ratio-100percent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--token-space-2) var(--token-space-25);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--token-duration-0p12s) ease, box-shadow var(--token-duration-0p2s) ease, background var(--token-duration-0p2s) ease;
}

.bn-pdp__cta:hover {
  transform: translateY(var(--token-size-neg-1px));
  box-shadow: var(--token-number-0) var(--token-size-12px) var(--token-size-32px) rgb(var(--color-green-rgb) / var(--alpha-30));
  background: var(--color-accent-hover);
}

.bn-pdp__cta:active {
  transform: translateY(var(--token-size-1px));
  box-shadow: var(--token-number-0) var(--token-size-6px) var(--token-size-18px) rgb(var(--color-green-rgb) / var(--alpha-20));
}

.bn-pdp__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-cta);
}


/* ── Production note ──────────────────────────────────────────── */

.bn-pdp__note {
  margin-top: var(--token-size-1rem);
  display: flex;
  align-items: flex-start;
  gap: var(--token-space-15);
  padding: var(--token-space-175) var(--token-space-2);
  border-radius: var(--radius-btn);
  background: rgb(var(--color-green-rgb) / var(--alpha-06));
  border: var(--border-width-hairline) dashed rgb(var(--color-green-rgb) / var(--alpha-35));
}

.bn-pdp__note-icon {
  color: var(--color-accent);
  flex: var(--token-number-0) var(--token-number-0) auto;
  margin-top: var(--token-size-0p1rem);
}

.bn-pdp__note-text {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-025);
  font-size: var(--text-body);
}

.bn-pdp__note-text strong {
  color: var(--color-accent);
  font-weight: var(--font-weight-600);
}

.bn-pdp__note-text span {
  color: var(--color-muted);
  font-size: var(--text-label);
}


/* ═══════════════════════════════════════════════════════════════
   SPECS TABLE
   ═══════════════════════════════════════════════════════════════ */

.bn-pdp__specs {
  width: var(--token-ratio-100percent);
  display: flex;
  flex-direction: column;
  gap: var(--token-space-175);
  position: relative;
  z-index: var(--token-number-4);
}

.bn-pdp__specs-inner {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: var(--token-space-3);
}

.bn-pdp__specs-header {
  margin-bottom: var(--token-size-1p25rem);
}

.bn-pdp__specs-title {
  font-family: var(--font-title);
  font-weight: var(--weight-900);
  font-size: var(--text-heading-md);
  color: var(--color-text);
  margin: var(--token-number-0) var(--token-number-0) var(--token-space-5px) var(--token-number-0);
}

.bn-pdp__specs-subtitle {
  color: var(--color-muted);
  font-size: var(--text-label);
  line-height: var(--leading-normal);
  max-width: 54ch;
  margin: var(--token-number-0);
}

.bn-pdp__specs-table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-btn);
  border: var(--border-width-hairline) solid var(--color-border);
}

.bn-pdp__specs-table {
  width: var(--token-ratio-100percent);
  border-collapse: separate;
  border-spacing: var(--token-number-0);
  margin: var(--token-number-0);
}

.bn-pdp__specs-table th,
.bn-pdp__specs-table td {
  padding: var(--token-space-175) var(--token-space-2);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  vertical-align: top;
  font-size: var(--text-body);
}

.bn-pdp__specs-table tr:last-child th,
.bn-pdp__specs-table tr:last-child td { border-bottom: none; }

.bn-pdp__specs-table th {
  text-align: left;
  color: var(--color-text);
  font-weight: var(--font-weight-600);
  background: var(--color-cloud);
  width: var(--token-ratio-35percent);
}

.bn-pdp__specs-table td {
  text-align: left;
  color: var(--color-muted);
  line-height: var(--leading-normal);
  background: var(--color-surface);
}

.bn-pdp__specs-table tbody tr:hover th,
.bn-pdp__specs-table tbody tr:hover td {
  background: rgb(var(--color-green-rgb) / var(--alpha-04));
}


/* ── Vectors ──────────────────────────────────────────────────── */

.bn-pdp__vectors {
  margin-top: var(--token-size-1p25rem);
}

.bn-pdp__vectors-title {
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  color: var(--color-text);
  margin-bottom: var(--token-size-0p5rem);
}

.bn-pdp__vectors-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--token-space-1);
}

.bn-pdp__vector {
  display: inline-flex;
  align-items: center;
  padding: var(--token-space-1) var(--token-space-175);
  border-radius: var(--radius-btn);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-cloud);
  color: var(--color-accent);
  font-size: var(--text-label);
  font-weight: var(--font-weight-600);
  text-decoration: none;
  transition: border-color var(--token-duration-0p2s) ease, background var(--token-duration-0p2s) ease;
}

.bn-pdp__vector:hover {
  border-color: var(--color-accent);
  background: rgb(var(--color-green-rgb) / var(--alpha-06));
}


/* ═══════════════════════════════════════════════════════════════
   RECOMMENDED PRODUCTS
   ═══════════════════════════════════════════════════════════════ */

.bn-reco {
  width: var(--token-ratio-100percent);
  padding: var(--token-space-5) var(--token-number-0) var(--token-number-0);
  position: relative;
  z-index: var(--token-number-3);
  min-width: var(--token-number-0);
  overflow: visible;
}

.bn-reco__inner {
  width: var(--token-ratio-100percent);
  max-width: var(--token-ratio-100percent);
  min-width: var(--token-number-0);
}

.bn-reco__header {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-5px);
  margin: var(--token-number-0) var(--token-number-0) var(--token-space-25);
}

.bn-reco__title {
  font-family: var(--font-title);
  font-weight: var(--weight-900);
  margin: var(--token-number-0);
  font-size: var(--text-heading-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.bn-reco__subtitle {
  margin: var(--token-number-0);
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  max-width: 60ch;
}

.bn-reco__rail-wrap {
  position: relative;
  width: var(--token-ratio-100percent);
  max-width: var(--token-ratio-100percent);
  min-width: var(--token-number-0);
  padding: var(--token-number-0) var(--token-space-6);
  box-sizing: border-box;
  overflow: visible;
}

.bn-reco__nav {
  position: absolute;
  top: var(--token-ratio-50percent);
  transform: translateY(var(--token-ratio-neg-50percent));
  width: var(--token-size-42px);
  height: var(--token-size-42px);
  border-radius: var(--radius-pill);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: grid;
  place-items: center;
  font-size: var(--text-heading-md);
  line-height: var(--leading-tight);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--token-duration-0p15s) ease, background var(--token-duration-0p15s) ease, border-color var(--token-duration-0p15s) ease;
  z-index: var(--token-number-4);
}

.bn-reco__nav--prev { left: var(--token-number-0); }
.bn-reco__nav--next { right: var(--token-number-0); }

.bn-reco__nav:hover {
  transform: translateY(calc(var(--token-ratio-neg-50percent) - var(--token-size-1px)));
  background: var(--color-cloud);
  border-color: rgb(var(--color-black-rgb) / var(--alpha-18));
  box-shadow: var(--shadow-card-hover);
}

.bn-reco__nav:active { transform: translateY(var(--token-ratio-neg-50percent)); }

.bn-reco__nav:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bn-reco__nav[disabled],
.bn-reco__nav.is-disabled {
  opacity: var(--token-number-0p35);
  pointer-events: none;
}

.bn-reco__rail {
  width: var(--token-ratio-100percent);
  max-width: var(--token-ratio-100percent);
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(var(--token-size-200px), var(--token-size-22vw), var(--token-size-240px));
  gap: var(--token-space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--token-number-0);
  padding: var(--token-space-15);
  border-radius: var(--radius-card);
  background: var(--color-cloud);
  border: var(--border-width-hairline) solid var(--color-border);
  -webkit-overflow-scrolling: touch;
  min-width: var(--token-number-0);
}

.bn-reco__rail::-webkit-scrollbar { height: var(--token-size-8px); }
.bn-reco__rail::-webkit-scrollbar-track { background: transparent; }
.bn-reco__rail::-webkit-scrollbar-thumb {
  background: rgb(var(--color-black-rgb) / var(--alpha-12));
  border-radius: var(--radius-pill);
}

.bn-reco__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.bn-reco__rail:focus-visible {
  outline: var(--border-width-strong) solid rgb(var(--color-green-rgb) / var(--alpha-35));
  outline-offset: var(--token-size-4px);
}

.bn-reco__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--token-number-0);
  text-decoration: none;
  color: inherit;
  min-height: var(--token-ratio-100percent);
  border-radius: var(--radius-card);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--token-duration-0p15s) ease, border-color var(--token-duration-0p15s) ease, box-shadow var(--token-duration-0p15s) ease;
}

.bn-reco__card:hover {
  transform: translateY(var(--token-size-neg-2px));
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}

.bn-reco__card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bn-reco__card,
.bn-reco__card:hover,
.bn-reco__card:focus {
  text-decoration: none;
}

.bn-reco__media {
  aspect-ratio: var(--token-number-4) / var(--token-number-3);
  background: var(--color-cloud);
  display: grid;
  place-items: center;
}

.bn-reco__media img {
  width: var(--token-ratio-100percent);
  height: var(--token-ratio-100percent);
  object-fit: cover;
  display: block;
}

.bn-reco__ph {
  color: var(--color-muted);
  font-size: var(--text-body);
}

.bn-reco__meta {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-5px);
  padding: var(--token-space-175) var(--token-space-2) var(--token-space-2);
}

.bn-reco__name {
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: var(--token-number-2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bn-reco__name:hover { text-decoration: none; }
a:hover .bn-reco__name { text-decoration: none; }

.bn-reco__price {
  font-weight: var(--weight-700);
  color: var(--color-accent);
  font-size: var(--text-body);
}

.bn-reco__cta {
  margin-top: var(--token-size-0p2rem);
  align-self: flex-start;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: var(--font-weight-600);
}

.bn-reco__card:hover .bn-reco__cta {
  color: var(--color-accent);
}


/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

.bn-toast {
  position: fixed;
  bottom: var(--token-size-20px);
  right: var(--token-size-20px);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--token-space-2) var(--token-space-25);
  border-radius: var(--radius-card);
  border: var(--border-width-hairline) solid var(--color-border);
  border-left: var(--token-size-4px) solid var(--color-accent);
  box-shadow: var(--shadow-strong);
  z-index: var(--token-number-9999);
  display: flex;
  align-items: center;
  gap: var(--token-space-175);
  transform: translateY(var(--token-size-100px));
  opacity: var(--token-number-0);
  transition: transform var(--token-duration-0p3s) ease, opacity var(--token-duration-0p3s) ease;
  max-width: var(--token-size-360px);
}

.bn-toast.bn-toast--visible {
  transform: translateY(var(--token-number-0));
  opacity: var(--token-number-1);
}

.bn-toast__icon {
  color: var(--color-accent);
  font-size: var(--text-heading-md);
  flex: var(--token-number-0) var(--token-number-0) auto;
}

.bn-toast__content { flex: var(--token-number-1); min-width: var(--token-number-0); }

.bn-toast__title {
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  margin-bottom: var(--token-size-0p2rem);
  color: var(--color-text);
}

.bn-toast__link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--text-label);
  font-weight: var(--font-weight-600);
}

.bn-toast__link:hover { text-decoration: underline; }

.bn-toast__close {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: var(--token-space-05);
  font-size: var(--text-body-lg);
  line-height: var(--leading-tight);
  transition: color var(--token-duration-0p15s) ease;
  flex: var(--token-number-0) var(--token-number-0) auto;
}

.bn-toast__close:hover { color: var(--color-text); }


/* ═══════════════════════════════════════════════════════════════
   SELECT (dropdown genérico)
   ═══════════════════════════════════════════════════════════════ */

.bn-pdp__select-wrap { position: relative; width: var(--token-ratio-100percent); }

.bn-pdp__select {
  width: var(--token-ratio-100percent);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: var(--token-space-175) var(--token-space-6) var(--token-space-175) var(--token-space-2);
  border-radius: var(--radius-btn);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  transition: border-color var(--token-duration-0p2s) ease, box-shadow var(--token-duration-0p2s) ease;
}

.bn-pdp__select:hover {
  border-color: rgb(var(--color-black-rgb) / var(--alpha-18));
}

.bn-pdp__select:focus { outline: none; }

.bn-pdp__select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.bn-pdp__select:disabled { opacity: var(--token-number-0p6); cursor: not-allowed; }

.bn-pdp__select-wrap::after {
  content: "";
  position: absolute;
  top: var(--token-ratio-50percent);
  right: var(--token-size-1rem);
  width: var(--token-size-0p5rem);
  height: var(--token-size-0p5rem);
  border-right: var(--border-width-strong) solid var(--color-muted);
  border-bottom: var(--border-width-strong) solid var(--color-muted);
  transform: translateY(var(--token-ratio-neg-60percent)) rotate(var(--token-angle-45deg));
  pointer-events: none;
}

.bn-pdp__select option {
  background: var(--color-surface);
  color: var(--color-text);
}

.bn-pdp select {
  color: var(--color-text);
}

.bn-pdp .bn-pdp__panel select:not(.bn-pdp__select) {
  width: var(--token-ratio-100percent);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: var(--token-space-175) var(--token-space-6) var(--token-space-175) var(--token-space-2);
  border-radius: var(--radius-btn);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
}


@media (max-width: 720px) {
  .bn-reco__nav { display: none; }
  .bn-reco__rail-wrap { padding: var(--token-number-0); }
  .bn-reco__rail { grid-auto-columns: clamp(var(--token-size-200px), var(--token-size-78vw), var(--token-size-300px)); }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.page__main > .container:has(> .bn-pdp) {
  width: var(--token-ratio-100percent);
  max-width: none;
}

.bn-pdp {
  min-height: auto;
  padding: var(--token-space-5) var(--token-number-0) var(--token-space-8);
}

.bn-pdp__wrap {
  width: var(--token-ratio-100percent);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--token-space-4);
}

.bn-pdp__breadcrumbs {
  margin: var(--token-number-0) var(--token-number-0) var(--token-space-3);
  gap: var(--token-space-1);
  font-size: var(--text-label);
  line-height: var(--token-leading-label);
}

.bn-pdp__grid {
  display: grid;
  grid-template-columns: minmax(var(--token-number-0), var(--token-track-1fr));
  gap: var(--token-space-4);
  align-items: start;
}

.bn-pdp__gallery {
  display: block;
  min-width: var(--token-number-0);
  position: static;
  z-index: auto;
}

.bn-pdp__media {
  width: var(--token-ratio-100percent);
  max-height: 500px;
  aspect-ratio: 4 / 3;
  align-self: auto;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
}

.bn-pdp__image {
  object-fit: contain;
  padding: var(--token-space-2);
}

.bn-pdp__media:hover .bn-pdp__image { transform: none; }

.bn-pdp__gallery--with-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-2);
}

.bn-pdp__gallery--with-thumbs .bn-pdp__media {
  width: var(--token-ratio-100percent);
}

.bn-pdp__gallery--with-thumbs .bn-pdp__thumbs {
  order: 2;
  flex-direction: row;
  gap: var(--token-space-2);
  padding: var(--token-number-0);
  overflow-x: auto;
  overflow-y: hidden;
}

.bn-pdp__thumb {
  width: var(--token-size-64px);
  height: var(--token-size-64px);
  border-radius: var(--radius-btn);
}

.bn-pdp__panel {
  gap: var(--token-space-3);
  width: var(--token-ratio-100percent);
  margin: var(--token-number-0);
}

.bn-pdp__header { margin: var(--token-number-0); }

.bn-pdp__title {
  margin: var(--token-number-0);
  font-size: clamp(var(--token-size-28px), 2vw, var(--token-size-32px));
  line-height: var(--leading-tight);
  font-weight: var(--weight-700);
}

.bn-pdp__desc {
  margin: var(--token-number-0);
  font-size: var(--text-body);
  line-height: 1.6;
}

.bn-pdp__price {
  font-size: clamp(var(--token-size-28px), 2vw, var(--token-size-32px));
  line-height: var(--leading-tight);
  font-weight: var(--weight-700);
}

.bn-pdp__label {
  margin-bottom: var(--token-space-1);
  font-size: var(--text-label);
  font-weight: var(--weight-600);
}

.bn-pdp__variants,
.bn-pdp__qty {
  margin: var(--token-number-0);
}

.bn-pdp__variant-list {
  gap: var(--token-space-1);
}

.bn-pdp__variant {
  padding: var(--token-space-1) var(--token-space-15);
}

.bn-pdp__qty-row,
.bn-pdp__actions {
  width: var(--token-ratio-100percent);
}

.bn-pdp__qty-input {
  flex: var(--token-number-1) var(--token-number-1) auto;
  width: auto;
  min-width: var(--token-number-0);
  max-width: none;
}

.bn-pdp__cta {
  min-height: var(--token-size-44px);
  font-size: var(--text-body);
}

.bn-pdp__extras {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-3);
  min-width: var(--token-number-0);
  margin: var(--token-number-0);
  padding: var(--token-space-3);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-secondary);
}

.bn-pdp__personalization {
  margin: var(--token-number-0);
}

.bn-pdp__techniques-list {
  gap: var(--token-space-1);
}

.bn-pdp__technique-option {
  padding: var(--token-space-15);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
}

.bn-pdp__technique-label {
  font-size: var(--text-label);
  line-height: var(--leading-snug);
}

.bn-pdp__techniques-hint {
  margin-top: var(--token-space-1);
}

.bn-pdp__datasheet {
  width: var(--token-ratio-100percent);
  margin-top: var(--token-space-2);
}

.bn-pdp__note {
  margin-top: var(--token-number-0);
  padding: var(--token-space-2);
  background: rgb(var(--color-green-rgb) / var(--alpha-06));
}

.bn-pdp__benefits {
  display: grid;
  grid-template-columns: minmax(var(--token-number-0), var(--token-track-1fr));
  gap: var(--token-space-2);
  margin: var(--token-space-5) 0 var(--token-space-4);
  padding: var(--token-space-3);
  border-radius: var(--radius-card);
  background: var(--color-bg-secondary);
  position: static;
}

.bn-pdp__benefit {
  flex-direction: row;
  gap: var(--token-space-15);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
}

.bn-pdp__benefit svg {
  width: var(--token-size-24px);
  height: var(--token-size-24px);
}

.bn-pdp__specs,
.bn-reco {
  width: var(--token-ratio-100percent);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .bn-pdp__grid {
    grid-template-columns: minmax(var(--token-number-0), 1fr) minmax(var(--token-number-0), 1fr);
    column-gap: var(--token-space-4);
    row-gap: var(--token-space-5);
  }

  .bn-pdp__extras { grid-column: 1 / -1; }

  .bn-pdp__benefits {
    grid-template-columns: repeat(3, minmax(var(--token-number-0), var(--token-track-1fr)));
    column-gap: var(--token-space-4);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .bn-pdp__extras {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (min-width: 1280px) {
  .bn-pdp { padding-top: var(--token-space-6); }

  .bn-pdp__benefits {
    grid-template-columns: repeat(5, minmax(var(--token-number-0), var(--token-track-1fr)));
  }

  .bn-pdp__wrap {
    width: 92%;
    max-width: 1800px;
  }

  .bn-pdp__grid {
    grid-template-columns: minmax(600px, 43fr) minmax(var(--token-number-0), 39fr) minmax(220px, 18fr);
    gap: var(--token-space-4);
  }

  .bn-pdp__gallery--with-thumbs {
    --bn-pdp-thumb-stack-height: calc(432px + var(--token-space-2) + var(--token-space-2) + var(--token-space-2) + var(--token-space-2) + var(--token-space-2) + var(--token-space-1));
    display: grid;
    grid-template-columns: var(--token-size-72px) minmax(var(--token-number-0), var(--token-track-1fr));
    gap: var(--token-space-2);
    align-items: start;
  }

  .bn-pdp__gallery--with-thumbs .bn-pdp__media {
    grid-column: 2;
    grid-row: 1;
    width: min(var(--bn-pdp-thumb-stack-height), var(--token-ratio-100percent));
    height: var(--bn-pdp-thumb-stack-height);
    justify-self: center;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  .bn-pdp__gallery--with-thumbs .bn-pdp__thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-self: start;
    max-height: var(--bn-pdp-thumb-stack-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .bn-pdp__thumb {
    width: var(--token-size-72px);
    height: var(--token-size-72px);
  }

  .bn-pdp__extras { grid-column: auto; }
}

@media (min-width: 1280px) and (max-width: 1399px) {
  .bn-pdp__grid {
    grid-template-columns: minmax(var(--token-number-0), 1fr) 260px;
    gap: var(--token-space-2);
  }

  .bn-pdp__extras { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .bn-pdp {
    padding-top: var(--token-space-3);
    padding-bottom: var(--token-space-6);
  }

  .bn-pdp__wrap { padding-inline: var(--token-space-25); }

  .bn-pdp__breadcrumbs { margin-bottom: var(--token-space-2); }

  .bn-pdp__media { aspect-ratio: 1 / 1; }

  .bn-pdp__title,
  .bn-pdp__price { font-size: var(--token-size-28px); }

  .bn-pdp__extras { padding: var(--token-space-25); }

  .bn-pdp__benefits { margin-top: var(--token-space-4); }
}

/* HOME DESIGN SYSTEM: flat white surfaces, brand ink and green, no elevation. */
.bn-pdp__media,
.bn-pdp__thumb.is-active,
.bn-pdp__variant.is-selected,
.bn-pdp__cta,
.bn-pdp__specs-inner,
.bn-reco__nav,
.bn-reco__card {
  box-shadow: none;
}

.bn-pdp__extras,
.bn-pdp__benefits {
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-btn);
}

.bn-pdp__note {
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-left: var(--token-size-3px) solid var(--color-accent);
  border-radius: var(--radius-btn);
}

.bn-pdp__specs-inner {
  background: var(--color-surface);
  border-radius: var(--radius-btn);
}

.bn-pdp__specs-table th,
.bn-pdp__specs-table td {
  background: var(--color-surface);
}

.bn-pdp__vector {
  background: var(--color-surface);
  border-radius: var(--radius-btn);
}

.bn-reco__rail {
  padding: var(--token-number-0);
  border: 0;
  border-radius: var(--token-number-0);
  background: transparent;
  grid-auto-columns: clamp(160px, 12.5vw, 180px);
  gap: var(--token-space-4);
}

.bn-reco__rail .bn-card {
  min-width: var(--token-number-0);
}

.bn-reco__nav,
.bn-reco__card {
  border-radius: var(--radius-btn);
}

.bn-reco__nav:hover,
.bn-reco__card:hover {
  box-shadow: none;
  transform: none;
}

.bn-reco__card:focus-visible,
.bn-reco__nav:focus-visible,
.bn-pdp__thumb:focus-visible,
.bn-pdp__variant:focus-within,
.bn-pdp__datasheet:focus-visible,
.bn-pdp__qty-btn:focus-visible,
.bn-pdp__qty-input:focus-visible,
.bn-pdp__select:focus-visible,
.bn-pdp .bn-pdp__panel select:not(.bn-pdp__select):focus-visible {
  outline: var(--border-width-strong) solid var(--color-accent);
  outline-offset: var(--token-size-2px);
  box-shadow: none;
}

.bn-pdp__cta:hover,
.bn-pdp__cta:active {
  transform: none;
  box-shadow: none;
  background: #000;
  color: var(--color-white);
}

.bn-pdp__cta:focus-visible {
  outline: var(--border-width-strong) solid var(--color-text);
  outline-offset: var(--token-size-2px);
  box-shadow: none;
}

.bn-pdp__technique-checkbox:focus-visible + .bn-pdp__technique-check {
  outline: var(--border-width-strong) solid var(--color-accent);
  outline-offset: var(--token-size-2px);
  box-shadow: none;
}

.bn-pdp__cta {
  background: #000;
  color: var(--color-white);
}

.bn-pdp__datasheet {
  background: #000;
  border-color: #000;
  color: var(--color-white);
}

.bn-pdp__datasheet:hover {
  background: #000;
  border-color: #000;
  color: var(--color-white);
}

.bn-pdp__note {
  min-height: var(--token-size-44px);
  align-items: center;
  gap: var(--token-space-1);
  padding: var(--token-space-1) var(--token-space-2);
  background: #000;
  border-color: #000;
  border-left-color: #000;
  color: var(--color-white);
}

.bn-pdp__note-icon {
  width: var(--token-size-20px);
  height: var(--token-size-20px);
  margin-top: var(--token-number-0);
}

.bn-pdp__note-text {
  line-height: 1.15;
}

@media (min-width: 1280px) {
  .bn-pdp__note-text strong span { display: block; }
}

.bn-pdp__note-icon,
.bn-pdp__note-text strong,
.bn-pdp__note-text span {
  color: var(--color-white);
}