/* KUBOLAB redesign — página de Produto (scoped under .kbl) */

.kbl .product{
  display:grid; grid-template-columns:1.4fr 1fr; min-height:100vh; padding-top:88px;
}
@media (max-width:900px){ .kbl .product{ grid-template-columns:1fr; padding-top:72px; } }

/* ---------- stage ---------- */
.kbl .stage{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(24px,4vw,56px); gap:22px; background:var(--bg-panel); border-right:1px solid var(--line);
}
@media (max-width:900px){ .kbl .stage{ border-right:none; border-bottom:1px solid var(--line); } }
.kbl .image-frame{
  position:relative; width:100%; max-width:680px; aspect-ratio:1/1;
  overflow:hidden; border-radius:2px; cursor:zoom-in; background:var(--bg-inset);
}
.kbl .image-frame img{
  position:absolute; inset:64px; width:calc(100% - 128px); height:calc(100% - 128px);
  object-fit:contain; object-position:center; transform-origin:center; transition:opacity .25s ease, transform .25s ease;
}
.kbl .image-frame.zoomed img{ transform:scale(2.1); transition:none; }
.kbl .image-empty{ position:absolute; inset:0; background:
  repeating-linear-gradient(45deg,var(--bg-panel) 0 12px,var(--bg-inset) 12px 24px); opacity:.6; }
@media (max-width:560px){ .kbl .image-frame img{ inset:40px; width:calc(100% - 80px); height:calc(100% - 80px); } }
.kbl .zoom-hint{
  font-weight:500; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint); display:flex; align-items:center; gap:8px;
}
.kbl .zoom-hint::before{ content:"\2197"; color:var(--text); }
.kbl .view-tabs{ display:flex; gap:6px; }
.kbl .view-tab{
  font-family:inherit; font-weight:500; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:7px 14px; border:1px solid var(--line-strong); background:transparent; color:var(--text-soft);
  cursor:pointer; border-radius:20px; transition:all .2s;
}
.kbl .view-tab.active{ background:var(--ink); color:var(--ink-contrast); border-color:var(--ink); }
.kbl .view-tab:disabled{ opacity:.35; cursor:not-allowed; }

/* ---------- info panel ---------- */
.kbl .info{
  padding:clamp(28px,5vw,64px) clamp(24px,4vw,56px) 64px;
  display:flex; flex-direction:column; gap:26px; max-width:540px;
}
.kbl .info .eyebrow{ margin:0 0 12px; }
.kbl .info h1{
  font-weight:600; font-size:clamp(2.4rem,5vw,3.4rem); line-height:1; letter-spacing:-0.01em; margin:0; text-wrap:balance;
}
.kbl .price{ font-weight:500; font-size:1.2rem; color:var(--text); font-variant-numeric:tabular-nums; }
.kbl .price .woocommerce-Price-amount{ font-weight:500; }
.kbl .price del{ opacity:.5; margin-right:8px; font-weight:400; }
.kbl .price ins{ text-decoration:none; }

.kbl .field{ display:flex; flex-direction:column; gap:12px; }
.kbl .field-label{
  font-weight:500; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-faint); display:flex; justify-content:space-between; gap:10px;
}
.kbl .field-label .val{ color:var(--text-soft); text-transform:none; letter-spacing:0; }

/* native selects kept for WooCommerce JS, visually hidden (beats woocommerce.css .variations select{width:100%}) */
.kbl .variations select.kbl-native,
.kbl select.kbl-native{
  position:absolute !important; width:1px !important; height:1px !important; min-width:0 !important; max-width:1px !important;
  margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0; pointer-events:none;
}

.kbl .swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.kbl .swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  position:relative; padding:0; background:none; transition:transform .15s;
}
.kbl .swatch::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sw,#B9B9BE); }
.kbl .swatch.active{ border-color:var(--text); }
.kbl .swatch:hover{ transform:scale(1.08); }
.kbl .swatch:disabled{ cursor:not-allowed; opacity:.4; }

.kbl .sizes{ display:flex; flex-wrap:wrap; gap:8px; }
.kbl .size-pill{
  min-width:38px; height:38px; padding:0 6px; border-radius:50%; border:1px solid var(--line-strong);
  background:transparent; color:var(--text-soft); font-family:inherit; font-weight:500; font-size:13px;
  cursor:pointer; transition:all .15s;
}
.kbl .size-pill:hover{ border-color:var(--text); color:var(--text); }
.kbl .size-pill.active{ background:var(--ink); color:var(--ink-contrast); border-color:var(--ink); }
.kbl .size-guide{
  font-weight:500; font-size:11px; letter-spacing:0.04em; color:var(--text-faint);
  text-decoration:underline; text-underline-offset:3px; align-self:flex-start;
}
.kbl .size-guide:hover{ color:var(--text); }

/* ---------- add to cart ---------- */
.kbl .variations_form, .kbl form.cart{ display:flex; flex-direction:column; gap:24px; margin:0; }
.kbl .variations_form .variations{ display:flex; flex-direction:column; gap:24px; }
.kbl .single_variation_wrap{ display:flex; flex-direction:column; gap:14px; }
.kbl .woocommerce-variation.single_variation{ font-size:0.9rem; color:var(--text-soft); }
.kbl .woocommerce-variation.single_variation .price{ font-size:1.1rem; color:var(--text); }
.kbl .woocommerce-variation-add-to-cart, .kbl form.cart{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.kbl .quantity{ display:flex; }
.kbl .quantity .qty{
  width:64px; height:52px; text-align:center; border:1px solid var(--line-strong); background:var(--bg);
  font-family:inherit; font-size:14px; color:var(--text); border-radius:2px;
}
.kbl .cta, .kbl .single_add_to_cart_button{
  font-family:inherit; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  background:var(--ink); color:var(--ink-contrast); border:none; padding:0 34px; min-height:52px;
  cursor:pointer; transition:background .2s, opacity .2s; border-radius:2px; flex:1; min-width:200px;
}
.kbl .cta:hover, .kbl .single_add_to_cart_button:hover{ background:var(--ink-hover); }
.kbl .single_add_to_cart_button:disabled, .kbl .single_add_to_cart_button.disabled, .kbl .single_add_to_cart_button.wc-variation-selection-needed{
  opacity:.35; cursor:not-allowed;
}
.kbl .kbl-oos{ color:var(--text-faint); font-size:0.95rem; }

.kbl .divider{ height:1px; background:var(--line); border:none; margin:2px 0; }

.kbl .specs{ display:flex; flex-direction:column; }
.kbl .spec-row{
  display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:0.92rem;
}
.kbl .spec-row:last-child{ border-bottom:none; }
.kbl .spec-row .k{ color:var(--text-soft); }
.kbl .spec-row .v{ font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }

.kbl .copy{ color:var(--text-soft); font-size:0.98rem; line-height:1.7; max-width:52ch; }
.kbl .copy p{ margin:0 0 10px; }
.kbl .copy strong{ color:var(--text); font-weight:600; }

.kbl .note{
  font-size:0.84rem; color:var(--text-faint); display:flex; gap:8px; align-items:flex-start;
  padding:14px 16px; background:var(--bg-panel); border-radius:2px; border:1px solid var(--line);
}
.kbl .note.is-ready{
  color:var(--text-soft); background:var(--bg); border-color:var(--line-strong);
}

/* ---------- related strip ---------- */
.kbl .related{ border-top:1px solid var(--line); padding:80px clamp(20px,4vw,48px) 40px; }
.kbl .related-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:16px; flex-wrap:wrap; }
.kbl .related-head h2{ font-weight:600; font-size:clamp(1.5rem,2.8vw,1.9rem); margin:0; letter-spacing:-0.01em; }
.kbl .related-head span{ color:var(--text-faint); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.kbl .related-grid{ display:grid; grid-template-columns:2.2fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.kbl .r-card{ background:var(--bg); position:relative; overflow:hidden; }
.kbl .r-card.tall{ grid-row:span 2; }
.kbl .r-img{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-panel); }
.kbl .r-card.tall .r-img{ aspect-ratio:auto; height:100%; min-height:420px; }
.kbl .r-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.kbl .r-card:hover .r-img img{ transform:scale(1.06); }
.kbl .r-info{ padding:14px 16px 18px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.kbl .r-name{ font-weight:600; font-size:0.95rem; }
.kbl .r-price{ font-weight:500; font-size:0.85rem; color:var(--text-soft); font-variant-numeric:tabular-nums; }
@media (max-width:800px){
  .kbl .related-grid{ grid-template-columns:1fr 1fr; }
  .kbl .r-card.tall{ grid-column:span 2; grid-row:span 1; }
  .kbl .r-card.tall .r-img{ min-height:auto; aspect-ratio:16/9; }
}

@media (prefers-reduced-motion: reduce){
  .kbl .image-frame img, .kbl header{ transition:none; }
}