/* BOROBO visual — Fase 1. PDP layout and native-content presentation only.
 * Final references 01-05 personally reviewed on 2026-10-05.
 * Load after theme/E1 styles. No commercial modules, new copy or cart styles.
 * body.bb-visual-fase1 is added only to the three-sector E1 product template.
 */
body.bb-visual-fase1 {
  --bbv-ink: #111820;
  --bbv-muted: #66716f;
  --bbv-green: #194c3c;
  --bbv-pale-green: #edf4ee;
  --bbv-border: #dce2de;
  --bbv-surface: #fff;
  --bbv-subtle: #f7f8f7;
  --bbv-dock-height: 62px;
  --bbv-cookie-clearance: 0px;
  background: var(--bbv-surface);
}

body.bb-visual-fase1 #single-product.borobo-ficha-e1,
body.bb-visual-fase1 #single-product.borobo-ficha-e1 *,
body.bb-visual-fase1 .bbv-mobile-dock,
body.bb-visual-fase1 .bbv-mobile-dock * { box-sizing: border-box; }

body.bb-visual-fase1 #single-product.borobo-ficha-e1 :is(a, button, input, select, summary):focus-visible,
body.bb-visual-fase1 .bbv-bottom-nav a:focus-visible { outline: 2px solid var(--bbv-green); outline-offset: 3px; }

body.bb-visual-fase1 #single-product.borobo-ficha-e1 {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 22px clamp(16px, 2.5vw, 40px) 36px;
  color: var(--bbv-ink);
}

body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-layout {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 33fr) minmax(0, 27fr);
  align-items: start;
  gap: clamp(16px, 1.8vw, 28px);
  width: 100%;
  height: auto !important;
  margin: 0;
  padding: 0;
}

body.bb-visual-fase1 #single-product.borobo-ficha-e1 :is(.borobo-e1-media-column, .borobo-e1-info, .bbv-information-column) {
  width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

body.bb-visual-fase1 #single-product.borobo-ficha-e1 :is(.borobo-e1-info, .bbv-information-column) {
  padding: clamp(14px, 1.4vw, 22px);
  border: 1px solid var(--bbv-border);
  border-radius: 12px;
  background: var(--bbv-surface);
  box-shadow: none;
}

body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-gallery-shell { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-viewport {
  position: relative;
  order: 0;
  width: 100%;
  height: clamp(260px, 40vw, 640px);
  min-height: 0;
  max-height: 72vh;
  border: 1px solid var(--bbv-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bbv-subtle);
}

/* Native thumb handling expects vertical desktop and horizontal mobile tracks. */
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
}
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-media-item { flex: 0 0 100%; width: 100%; height: 100%; min-height: 100%; min-width: 0; margin: 0; padding: 0; scroll-snap-align: start; scroll-snap-stop: always; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-media-link { width: 100%; height: 100%; background: var(--bbv-subtle); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-media-link > img.borobo-e1-image,
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-track-single .borobo-e1-media-link > img.borobo-e1-image { object-fit: contain !important; object-position: center !important; border-radius: 0 !important; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-thumbs { order: 1; display: flex; flex-direction: row; gap: 8px; width: 100%; max-width: 100%; height: auto; max-height: none; padding: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-thumb { flex: 0 0 clamp(58px, 5.6vw, 82px); width: clamp(58px, 5.6vw, 82px); height: auto; aspect-ratio: 1 / 1; padding: 2px; border: 1px solid var(--bbv-border); border-radius: 8px; overflow: hidden; background: var(--bbv-surface); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-thumb[aria-current="true"] { border: 2px solid var(--bbv-green); padding: 1px; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-thumb img { border-radius: 5px; object-fit: contain; }

body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-heading { margin: 0 0 12px; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-breadcrumbs { margin-bottom: 10px; color: var(--bbv-muted); font-size: 12px; line-height: 1.45; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-title { font-size: clamp(22px, 1.9vw, 29px); font-weight: 700; line-height: 1.16; letter-spacing: -.025em; color: var(--bbv-ink); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-title-suffix { margin-top: 4px; font-size: .72em; color: var(--bbv-muted); line-height: 1.35; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-selected-color { margin-top: 4px; color: var(--bbv-muted); font-size: 14px; line-height: 1.4; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-price-container { margin-bottom: 12px !important; gap: 3px 8px; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #price_display { color: var(--bbv-ink) !important; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-price-unit { color: var(--bbv-muted); font-size: 20px; font-weight: 500; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .js-product-payments-container { margin-top: 0 !important; margin-bottom: 12px !important; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #btn-installments { margin-top: 0 !important; padding-top: 0; padding-bottom: 4px; }

/* Existing tier content and native selection states remain unchanged. */
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-tiers { display: grid; gap: 0; width: 100%; margin: 12px 0; padding: 6px; border: 1px solid var(--bbv-border); border-radius: 10px; background: var(--bbv-subtle); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-tier { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 10px; min-height: 44px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; background: var(--bbv-surface); color: var(--bbv-ink); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-tier span { grid-column: 1; white-space: normal; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-tier strong { grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-tier[aria-pressed="true"] { border-color: #cbded0; background: var(--bbv-pale-green); color: var(--bbv-green); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-tier:disabled { opacity: .5; cursor: not-allowed; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-tiers + [role="status"] { margin: 6px 0 12px; color: var(--bbv-muted); font-size: 12px; line-height: 1.4; }

body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .form-label { color: var(--bbv-ink); font-size: 14px; font-weight: 600; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .js-product-variants-group { margin-bottom: 10px; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .btn-variant { min-width: 44px; min-height: 44px; margin: 0 6px 6px 0; border: 1px solid var(--bbv-border); border-radius: 8px; background: var(--bbv-surface); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .btn-variant.selected { border-color: var(--bbv-green); box-shadow: 0 0 0 1px var(--bbv-green); background: var(--bbv-pale-green); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .btn-variant-content { border-radius: 5px; overflow: hidden; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form > .form-row > :is(.col-4, .col-8.pr-0) { flex: 0 0 100%; width: 100%; max-width: 100%; padding-right: 5px; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .js-quantity { width: 204px; max-width: 100%; margin-bottom: 10px; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .form-quantity { min-height: 46px; border: 1px solid var(--bbv-border); border-radius: 8px; background: var(--bbv-surface); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form .form-quantity-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 8px; color: var(--bbv-ink); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form input[name="quantity"] { min-height: 44px; color: var(--bbv-ink); background: transparent; font-size: 16px; font-variant-numeric: tabular-nums; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bb-cohort-unit { flex: 0 0 auto; color: var(--bbv-muted); font-size: 14px; }

/* No display override: native stock, progress and paused states own visibility. */
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .js-addtocart { width: 100%; min-height: 48px; margin-bottom: 16px !important; padding: 13px 16px; border: 1px solid var(--bbv-green); border-radius: 10px; background: var(--bbv-green); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: .015em; box-shadow: none; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .js-addtocart:disabled,
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .js-addtocart[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column #product-description { margin: 0; padding: 0; border: 0; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column .product-description { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column :is(h2, h3, .borobo-ft-title) { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--bbv-ink); }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column :is(img, video, iframe, table) { max-width: 100%; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column .borobo-ft-card { margin: 0 0 16px; padding: 12px; border: 1px solid var(--bbv-border); border-radius: 8px; box-shadow: none; }
body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column .borobo-ft-grid { grid-template-columns: minmax(0, 1fr); }
body.bb-visual-fase1 .bbv-mobile-dock { display: none; }

@media (max-width: 767px) {
  body.bb-visual-fase1 { padding-bottom: calc(var(--bbv-dock-height) + var(--bbv-cookie-clearance) + 16px); }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 { padding: 12px 16px 26px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 :is(.borobo-e1-info, .bbv-information-column) { padding: 0; border: 0; border-radius: 0; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-viewport { height: min(52vw, 240px); min-height: 0; max-height: none; aspect-ratio: auto; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-track { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-media-item { flex: 0 0 100%; width: 100%; height: 100%; min-height: 100%; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-thumbs { display: flex; gap: 7px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-thumb { flex-basis: 54px; width: 54px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-title { font-size: clamp(24px, 6.2vw, 27px); line-height: 1.15; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 #price_display { font-size: 32px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-price-unit { font-size: 20px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column { padding-top: 18px; border-top: 1px solid var(--bbv-border); }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column .borobo-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .js-addtocart { scroll-margin-bottom: calc(var(--bbv-dock-height) + var(--bbv-cookie-clearance) + 24px); }
  /* Override the older 64px mobile side reserve on the existing CTA wrapper. */
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 #product_form > .form-row > :has(> .js-addtocart) { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }

  /* Only replace duplicated access after the native-backed bottom links exist. */
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main > .section-topbar,
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main .nav-row,
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main [data-component="menu-button"],
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main [data-toggle="#nav-search"],
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main .borobo-e11-search-trigger,
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main #ajax-cart,
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main .js-search-container,
  body.bb-visual-fase1.bbv-mobile-nav-ready .head-main .js-search-suggest { display: none !important; }
  body.bb-visual-fase1 .head-main { border-bottom: 1px solid var(--bbv-border); background: var(--bbv-surface); box-shadow: none; }
  body.bb-visual-fase1 .head-main > .container-fluid { padding-top: 7px; padding-bottom: 7px !important; }
  body.bb-visual-fase1 .head-main > .container-fluid > .row.no-gutters.align-items-center { min-height: 42px; }
  body.bb-visual-fase1 .head-main :is(.logo-img-small, .logo-img-big) { width: auto; max-width: 176px; max-height: 38px; object-fit: contain; }
  body.bb-visual-fase1 .head-main :is(.logo-img-container-small, .logo-img-container-big) { max-width: 176px; margin: 0 auto; }

  body.bb-visual-fase1 .bbv-mobile-dock { position: fixed; inset: auto 0 0; z-index: 900; display: block; width: 100%; margin: 0; border-top: 1px solid var(--bbv-border); background: var(--bbv-surface); box-shadow: 0 -3px 16px rgb(17 24 32 / 6%); }
  body.bb-visual-fase1 .bbv-bottom-nav { display: flex; align-items: stretch; justify-content: space-around; gap: 0; margin: 0; padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)); background: var(--bbv-surface); }
  body.bb-visual-fase1 .bbv-bottom-nav > a.bbv-nav-link { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 50px; margin: 0; padding: 4px 2px; border: 0; border-radius: 8px; background: transparent; color: var(--bbv-ink); font: inherit; font-size: 11px; line-height: 1.2; text-align: center; text-decoration: none; }
  body.bb-visual-fase1 .bbv-bottom-nav > a.bbv-nav-link[aria-current="page"] { color: var(--bbv-green); background: var(--bbv-pale-green); }
  body.bb-visual-fase1 .bbv-bottom-nav svg.bbv-nav-icon { width: 23px; height: 23px; flex: 0 0 23px; color: inherit; }
  body.bb-visual-fase1 .bbv-mobile-dock[hidden] { display: none; }

  /* Keep the native cookie notice and its own dismissal behavior available. */
  body.bb-visual-fase1.bbv-mobile-nav-ready .js-notification-cookie-banner.notification-fixed-bottom {
    bottom: calc(var(--bbv-dock-height) + 6px) !important;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.4;
  }
  body.bb-visual-fase1.bbv-mobile-nav-ready .js-notification-cookie-banner .js-acknowledge-cookies { min-height: 44px; }
  body.bb-visual-fase1.bbv-mobile-nav-ready:has(.js-notification-cookie-banner:not([hidden]):not([style*="display: none"]):not([style*="display:none"])) { --bbv-cookie-clearance: 96px; }
}

@media (max-width: 359px) {
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 { padding-right: 15px; padding-left: 15px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .borobo-e1-title { font-size: 24px; }
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 .bbv-information-column .borobo-ft-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body.bb-visual-fase1 #single-product.borobo-ficha-e1 * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}