/* Click Retail · Secciones PDP — Buy Box (estilo Apple)
 * Transcripción 1:1 del prototipo de Claude Design (Buy Box Maier MB900S).
 * Todo va scoped bajo .crb para no chocar con Woodmart/Elementor.
 */

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

@keyframes crb-spin { to { transform: rotate(360deg); } }
@keyframes crb-fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes crb-storyfill { from { width: 0; } to { width: 100%; } }
@keyframes crb-imgin { from { opacity: .35; } to { opacity: 1; } }

/* ---------- Tokens ---------- */
.crb {
  --bg:#ffffff; --fg:#1d1d1f; --fg2:#494950; --sec:#6e6e73; --ter:#86868b;
  --mut:#a1a1a6; --mut2:#aeaeb2; --line:#e5e5e7; --ring:#e3e3e6; --hair:#d2d2d7;
  --tint:#f5f5f7; --field:#f0f0f2; --ok:#1a8f37; --star:#FFB400;
  --accent-l:#E01F26; --accentPress-l:#C11B21; --accent-d:#FF5A60; --accentPress-d:#FF7176;
  --accent:var(--accent-l); --accentPress:var(--accentPress-l);
  --accentTint:rgba(224,31,38,.07);

  background:var(--bg); color:var(--fg);
  font-family:inherit; /* usar la fuente por defecto del sitio */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.47;
}
.crb[data-theme="dark"] {
  --bg:#000000; --fg:#f5f5f7; --fg2:#c7c7cc; --sec:#a1a1a6; --ter:#8a8a8f;
  --mut:#8a8a8f; --mut2:#6a6a6e; --line:rgba(255,255,255,.14); --ring:rgba(255,255,255,.16);
  --hair:rgba(255,255,255,.22); --tint:#1c1c1e; --field:#2a2a2c; --star:#FFC24D;
  --accent:var(--accent-d); --accentPress:var(--accentPress-d); --accentTint:rgba(255,90,96,.12);
}
@media (prefers-color-scheme: dark) {
  .crb[data-theme="auto"] {
    --bg:#000000; --fg:#f5f5f7; --fg2:#c7c7cc; --sec:#a1a1a6; --ter:#8a8a8f;
    --mut:#8a8a8f; --mut2:#6a6a6e; --line:rgba(255,255,255,.14); --ring:rgba(255,255,255,.16);
    --hair:rgba(255,255,255,.22); --tint:#1c1c1e; --field:#2a2a2c; --star:#FFC24D;
    --accent:var(--accent-d); --accentPress:var(--accentPress-d); --accentTint:rgba(255,90,96,.12);
  }
}
.crb button, .crb input, .crb select, .crb textarea { font-family:inherit; }
.crb img { display:block; max-width:100%; }
.crb a { color:inherit; text-decoration:none; }
.crb-hidden { display:none !important; }

/* ---------- Layout ---------- */
.crb-buybox { padding:0; } /* sin padding propio: el buy box usa el ancho/inset NATIVO del contenedor de la PDP (alineado con migas y tabs); la separación de abajo la da el margen nativo del wrap/tabs */
.crb-grid { max-width:none; margin:0 auto; display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); align-items:flex-start; } /* max-width:none → llena el ancho nativo del contenedor (imagen más grande) */

/* ---------- Galería ---------- */
.crb-gallery { flex:1.15 1 0; min-width:300px; position:sticky; top:20px; align-self:flex-start; }
.crb-stage { position:relative; background:#fff; aspect-ratio:var(--crb-ar,2262/2560); border-radius:22px; overflow:hidden; cursor:zoom-in; }
.crb-stage-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .35s ease; }
.crb-stage-img.is-active { opacity:1; }
.crb-zoom { position:absolute; bottom:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.14); pointer-events:none; color:#1d1d1f; }
.crb-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#86868b; transition:background .15s,color .15s,transform .1s; }
.crb-arrow.prev { left:6px; }
.crb-arrow.next { right:6px; }
.crb-arrow:hover { background:rgba(255,255,255,.9); color:#1d1d1f; }
.crb-arrow:active { transform:translateY(-50%) scale(.92); }
.crb-badges { position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:8px; z-index:3; align-items:flex-start; }
.crb-badge { color:#fff; font-size:12px; font-weight:600; padding:5px 11px; border-radius:100px; letter-spacing:.02em; }
.crb-badge.is-accent { background:var(--accent); }
.crb-badge.is-dark { background:rgba(29,29,31,.88); font-size:11px; letter-spacing:.05em; }
.crb-thumbs { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.crb-thumb { width:74px; height:74px; flex:none; padding:0; border:none; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--ring); cursor:pointer; overflow:hidden; opacity:1; transition:box-shadow .15s, opacity .25s ease; }
.crb-thumb:hover { opacity:.5; }
.crb-thumb.is-active { opacity:.5; }
.crb-thumb img { width:100%; height:100%; object-fit:cover; border-radius:14px; }

/* ---------- Panel ---------- */
.crb-panel { flex:1 1 0; min-width:330px; display:flex; flex-direction:column; gap:22px; }

.crb-header { display:flex; flex-direction:column; }
.crb-title { margin:10px 0 0; font-size:clamp(24px,3.4vw,33px); line-height:1.08; letter-spacing:-.02em; font-weight:600; }
.crb-rating { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:13px; }
.crb-stars { position:relative; display:inline-block; font-size:15px; letter-spacing:1px; line-height:1; top:2px; }
.crb-stars-bg { color:var(--hair); }
.crb-stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--star); }
.crb-rating-val { font-size:14px; font-weight:600; }
.crb-rating-link { font-size:14px; color:var(--sec); border-bottom:1px solid var(--hair); padding-bottom:1px; cursor:pointer; }
.crb-rating-link:hover { color:var(--accent); }

.crb-valueprop { margin:0; font-size:16px; line-height:1.5; color:var(--fg2); }
.crb-valueprop strong { font-weight:600; color:var(--fg); }

.crb-pricebox { display:flex; flex-direction:column; }
.crb-price-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.crb-price { font-size:clamp(28px,4.2vw,36px); font-weight:600; letter-spacing:-.02em; color:#C62437; }
.crb-orig { font-size:18px; color:var(--mut); text-decoration:line-through; }
.crb-price-badge { background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:4px 9px; border-radius:7px; }
.crb-installments { margin-top:9px; font-size:14px; color:var(--sec); }
.crb-installments strong { color:var(--fg); font-weight:600; }

.crb-sep { height:1px; background:var(--line); }

/* Modelos */
.crb-models-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px; gap:12px; }
.crb-models-title { font-size:15px; font-weight:600; }
.crb-color { font-size:13px; color:var(--ter); }
.crb-models-grid { display:flex; gap:10px; flex-wrap:wrap; }
.crb-model { flex:1 1 150px; min-width:150px; text-align:left; position:relative; padding:14px 14px 13px; border-radius:16px; border:none; background:var(--bg); box-shadow:inset 0 0 0 1px var(--ring); cursor:pointer; transition:box-shadow .15s,background .15s; }
.crb-model.is-selected { background:var(--accentTint); box-shadow:inset 0 0 0 2px var(--accent); }
.crb-model-rec { position:absolute; top:-9px; left:14px; background:var(--fg); color:var(--bg); font-size:10px; font-weight:600; letter-spacing:.04em; padding:3px 8px; border-radius:100px; }
.crb-model-check { position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; background:var(--accent); display:none; align-items:center; justify-content:center; color:#fff; }
.crb-model.is-selected .crb-model-check { display:flex; }
.crb-model-name { display:block; font-size:15px; font-weight:600; padding-right:22px; margin-bottom:10px; text-align:left; }
.crb-model-price { display:flex; align-items:baseline; gap:7px; }
/* Modelos sin precio (p.ej. colores mismo precio): fila flex nombre|check, centrado; el check deja de ser absoluto para no chocar con la esquina redondeada. */
.crb.crb[data-theme] .crb-model { padding:16px 14px 13px !important; }
.crb.crb[data-theme] .crb-models-grid--noprice .crb-model { display:flex !important; align-items:center; justify-content:space-between; gap:8px; }
.crb-models-grid--noprice .crb-model-name { margin-bottom:0; padding-right:0; }
.crb-models-grid--noprice .crb-model-check { position:static; top:auto; right:auto; transform:none; order:1; }
.crb-model-price .p { font-size:16px; font-weight:600; }
.crb-model-price .o { font-size:12px; color:var(--mut2); text-decoration:line-through; }

/* Swatches de color (variaciones tipo color, estilo Woodmart) */
.crb-swatches { display:flex; gap:12px; flex-wrap:wrap; }
.crb-swatch { position:relative; width:44px; height:44px; flex:none; padding:3px; border:none; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1.5px var(--ring); cursor:pointer; transition:box-shadow .15s; }
.crb-swatch:hover { box-shadow:inset 0 0 0 2px var(--fg); }
.crb-swatch.is-selected { box-shadow:inset 0 0 0 2px var(--accent); }
.crb-swatch-bg { display:block; width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center; background-repeat:no-repeat; }
.crb-swatch-check { position:absolute; bottom:-2px; right:-2px; width:18px; height:18px; border-radius:50%; background:var(--accent); display:none; align-items:center; justify-content:center; color:#fff; box-shadow:0 0 0 2px var(--bg); }
.crb-swatch.is-selected .crb-swatch-check { display:flex; }

/* Complementos */
.crb-complements-title { font-size:12px; font-weight:600; color:var(--sec); margin-bottom:10px; letter-spacing:.06em; text-align:left; }
.crb-complement { width:100%; text-align:left; display:flex; align-items:center; gap:14px; padding:12px; border-radius:16px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--ring); border:none; cursor:pointer; transition:box-shadow .15s,background .15s; margin-bottom:10px; }
.crb-complement:last-child { margin-bottom:0; }
.crb-complement.is-added { background:var(--accentTint); box-shadow:inset 0 0 0 2px var(--accent); }
.crb-complement-check { flex:none; width:24px; height:24px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 2px #c7c7cc; display:flex; align-items:center; justify-content:center; color:#fff; }
.crb-complement-check svg { opacity:0; }
.crb-complement.is-added .crb-complement-check { background:var(--accent); box-shadow:none; }
.crb-complement.is-added .crb-complement-check svg { opacity:1; }
.crb-complement-img { width:54px; height:54px; object-fit:cover; border-radius:10px; background:var(--field); flex:none; }
.crb-complement-name { flex:1; min-width:0; font-size:14px; font-weight:600; line-height:1.25; text-align:left; }
.crb-complement-price { text-align:right; flex:none; display:flex; flex-direction:column; }
.crb-complement-price .p { font-size:14px; font-weight:600; }
.crb-complement-price .o { font-size:11px; color:var(--mut2); text-decoration:line-through; }

/* Acciones */
.crb-actions-row { display:flex; gap:12px; align-items:stretch; }
.crb-qty { display:flex; align-items:center; gap:2px; height:54px; border:1.5px solid var(--hair); border-radius:100px; padding:0 4px; flex:none; }
.crb-qty-btn { width:42px; height:42px; border:none; background:transparent; border-radius:50%; cursor:pointer; color:var(--fg); display:flex; align-items:center; justify-content:center; transition:background .15s; }
.crb-qty-btn:hover { background:#ececee; }
.crb-qty-val { min-width:22px; text-align:center; font-size:16px; font-weight:600; }
.crb-add { flex:1; height:54px; border:none; border-radius:100px; font-size:17px; font-weight:600; color:#fff; background:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; transition:background .25s,filter .15s,transform .1s; }
.crb-add:hover { filter:brightness(.93); }
.crb-add:active { transform:scale(.99); }
.crb-add-spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:crb-spin .7s linear infinite; display:none; }
.crb-add-check { display:none; align-items:center; justify-content:center; }
.crb-add.is-adding { opacity:.85; }
.crb-add.is-adding .crb-add-spin { display:block; }
.crb-add.is-added { background:var(--ok); }
.crb-add.is-added .crb-add-check { display:flex; }
/* WooCommerce inyecta un enlace "Ver carrito" tras agregar → se oculta. */
.crb .added_to_cart, .crb a.added_to_cart, .crb a.wc-forward { display:none !important; }
.crb-buynow { width:100%; height:54px; margin-top:11px; border:1.5px solid var(--fg); background:transparent; color:var(--fg); border-radius:100px; font-size:17px; font-weight:600; cursor:pointer; transition:background .2s,color .2s; }
.crb-buynow:hover { background:var(--fg); color:var(--bg); }
.crb-total-row { display:flex; align-items:baseline; justify-content:flex-start; margin-top:14px; gap:6px; }
.crb-total-val { font-size:15px; font-weight:600; }
.crb-total-price { color:#C62437; font-weight:600; }
.crb-total-inst { font-weight:400; color:var(--mut); }

/* Reassurance */
.crb-reassure { display:flex; flex-direction:column; gap:11px; }
.crb-reassure-row { display:flex; gap:11px; align-items:center; font-size:13.5px; color:var(--fg2); }
.crb-reassure-ok { flex:none; width:22px; height:22px; border-radius:50%; background:var(--ok); display:flex; align-items:center; justify-content:center; color:#fff; }
.crb-reassure-ic { flex:none; color:var(--ter); display:flex; }
.crb-reassure-row strong { font-weight:600; color:var(--fg); }
.crb-delivery-wrap { display:inline-flex; align-items:center; gap:1px; flex-wrap:wrap; }
.crb-tip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; padding:0; border:none; background:transparent; color:var(--ter); cursor:help; transition:color .15s; flex:none; overflow:visible; }
.crb-tip:hover { color:var(--accent); }
.crb-tip-pop { position:absolute; bottom:calc(100% + 9px); right:-4px; left:auto; width:max-content; max-width:230px; background:#1d1d1f; color:#fff; font-size:12px; line-height:1.4; font-weight:400; padding:8px 11px; border-radius:9px; box-shadow:0 8px 22px rgba(0,0,0,.22); z-index:100000; text-align:left; display:none; }
.crb-tip.is-open .crb-tip-pop { display:block; }
.crb-tip-pop::after { content:""; position:absolute; top:100%; right:10px; border:5px solid transparent; border-top-color:#1d1d1f; }

/* ---------- Barra sticky (portada a <body>) ---------- */
.crb-sticky { position:fixed; left:0; right:0; bottom:0; z-index:100050; transform:translateY(120%); transition:transform .32s cubic-bezier(.4,0,.2,1); background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:1px solid rgba(0,0,0,.1); }
.crb-sticky.is-visible { transform:translateY(0); }
.crb-sticky-inner { max-width:1180px; margin:0 auto; padding:12px clamp(16px,4vw,48px); display:flex; align-items:center; gap:16px; }
.crb-sticky-img { width:68px; height:68px; object-fit:cover; background:#fff; border-radius:8px; padding:0; flex:none; }
.crb-sticky-info { min-width:0; flex:1; }
.crb-sticky-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#1d1d1f; }
.crb-sticky-price { display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1.15; flex:none; }
.crb-sticky-now { font-size:17px; font-weight:700; color:#C62437; }
.crb-sticky-inst { font-size:12px; color:#6e6e73; margin-top:1px; white-space:nowrap; }
.crb-sticky-prow { display:flex; align-items:baseline; gap:8px; justify-content:flex-end; }
.crb-sticky-orig { font-size:13px; color:#a1a1a6; text-decoration:line-through; }
.crb-sticky-stars { display:inline-block; margin-top:4px; font-size:12px; top:0; }
.crb-sticky-price .m { color:#a1a1a6; }
.crb-sticky-btn { flex:none; background:#C62437; color:#fff; border:none; border-radius:100px; padding:15px 34px; font-size:16px; font-weight:600; cursor:pointer; transition:filter .15s; }
.crb-sticky-btn:hover { filter:brightness(.93); }
.crb[data-theme="dark"] .crb-sticky { background:rgba(20,20,22,.82); border-top-color:rgba(255,255,255,.12); }
.crb[data-theme="dark"] .crb-sticky-title { color:#f5f5f7; }
/* Cuando la barra sticky está visible, el botón "ir arriba" de Woodmart (.scrollToTop, fixed bottom:20px) sube
   por ENCIMA de la barra para no quedar tapado. --crb-sticky-h lo fija el JS con el alto real (desktop y móvil);
   .scrollToTop ya trae transition:all .25s, así que el desplazamiento se anima solo. El body.crb-sticky-on lo
   pone/quita el JS junto con .is-visible. Selector fuera de .crb: apunta al botón nativo del tema. */
body.crb-sticky-on .scrollToTop { bottom:calc(var(--crb-sticky-h, 93px) + 16px) !important; }

/* ---------- Lightbox estilo historias (portado a <body>) ---------- */
.crb-st { position:fixed; inset:0; z-index:100070; background:#000; display:flex; align-items:center; justify-content:center; animation:crb-imgin .25s ease; }
.crb-st-card { position:relative; width:100%; height:100%; max-width:none; display:flex; flex-direction:column; background:transparent; overflow:hidden; }
.crb-st-shade { position:absolute; top:0; left:0; right:0; height:96px; background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent); z-index:3; pointer-events:none; }
.crb-st-bars { position:absolute; top:0; left:0; right:0; z-index:5; padding:14px 16px 0; display:flex; gap:4px; }
.crb-st-bar { flex:1; height:3px; background:rgba(255,255,255,.35); border-radius:100px; overflow:hidden; }
.crb-st-bar-fill { display:block; height:100%; width:0; background:#fff; border-radius:100px; }
.crb-st-close { position:absolute; top:20px; right:14px; z-index:6; width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.crb-st-close:hover { background:rgba(0,0,0,.72); }
.crb-st-stage { flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; -webkit-user-select:none; user-select:none; touch-action:none; cursor:pointer; }
.crb-st-stage img { width:100%; height:100%; object-fit:contain; animation:crb-imgin .3s ease; pointer-events:none; }

/* ---------- Responsive ---------- */
@media (max-width:760px) {
  .crb-gallery { position:static; top:auto; flex-basis:100%; }
  .crb-panel { flex-basis:100%; }
}

/* ---------- Endurecimiento contra el tema (Woodmart) ----------
 * Woodmart fuerza en botones/inputs: MAYÚSCULAS, radio 0, fuente DM Sans, fondo
 * gris, texto gris, borde 0 y position:relative. Restauramos con alta
 * especificidad (.crb.crb[data-theme]) y !important, cubriendo también los nodos
 * portados a <body> (sticky/lightbox llevan .crb[data-theme]).
 */
.crb.crb[data-theme] * {
  font-family:inherit !important; /* usar la fuente por defecto del sitio (cascada desde la raíz .crb) */
}
.crb.crb[data-theme] button {
  text-transform:none !important; letter-spacing:normal !important; min-height:0 !important;
  box-shadow:none; text-shadow:none;
}
/* Radios */
.crb.crb[data-theme] .crb-add,
.crb.crb[data-theme] .crb-buynow,
.crb.crb[data-theme] .crb-qty,
.crb.crb[data-theme] .crb-badge,
.crb.crb[data-theme] .crb-sticky-btn { border-radius:100px !important; }
.crb.crb[data-theme] .crb-price-badge { border-radius:7px !important; }
.crb.crb[data-theme] .crb-model,
.crb.crb[data-theme] .crb-complement { border-radius:16px !important; }
.crb.crb[data-theme] .crb-stage { border-radius:22px !important; }
.crb.crb[data-theme] .crb-thumb { border-radius:14px !important; }
.crb.crb[data-theme] .crb-complement-img { border-radius:10px !important; }
.crb.crb[data-theme] .crb-sticky-img { border-radius:8px !important; }
.crb.crb[data-theme] .crb-arrow,
.crb.crb[data-theme] .crb-zoom,
.crb.crb[data-theme] .crb-qty-btn,
.crb.crb[data-theme] .crb-model-check,
.crb.crb[data-theme] .crb-complement-check,
.crb.crb[data-theme] .crb-reassure-ok,
.crb.crb[data-theme] .crb-swatch,
.crb.crb[data-theme] .crb-swatch-check,
.crb.crb[data-theme] .crb-st-close { border-radius:50% !important; }
/* Posición absoluta (Woodmart fuerza relative en botones) */
.crb.crb[data-theme] .crb-arrow { position:absolute !important; top:50% !important; transform:translateY(-50%) !important; }
.crb.crb[data-theme] .crb-arrow.prev { left:6px !important; right:auto !important; }
.crb.crb[data-theme] .crb-arrow.next { right:6px !important; left:auto !important; }
.crb.crb[data-theme] .crb-st-close { position:absolute !important; }
/* Fondo/color/borde por elemento */
.crb.crb[data-theme] .crb-add { background:var(--accent) !important; color:#fff !important; border:none !important; }
.crb.crb[data-theme] .crb-add.is-added { background:var(--ok) !important; }
.crb.crb[data-theme] .crb-buynow { background:transparent !important; color:var(--fg) !important; border:1.5px solid var(--fg) !important; }
.crb.crb[data-theme] .crb-buynow:hover { background:var(--fg) !important; color:var(--bg) !important; }
.crb.crb[data-theme] .crb-qty-btn { background:transparent !important; color:var(--fg) !important; border:none !important; }
.crb.crb[data-theme] .crb-qty-btn:hover { background:#ececee !important; }
.crb.crb[data-theme] .crb-arrow { background:rgba(255,255,255,.55) !important; color:#86868b !important; border:none !important; box-shadow:none !important; }
.crb.crb[data-theme] .crb-arrow:hover { background:rgba(255,255,255,.9) !important; color:#1d1d1f !important; }
.crb.crb[data-theme] .crb-model { display:block !important; background:var(--bg) !important; border:none !important; box-shadow:inset 0 0 0 1px var(--ring) !important; text-align:left !important; }
.crb.crb[data-theme] .crb-model.is-selected { background:var(--accentTint) !important; box-shadow:inset 0 0 0 2px var(--accent) !important; }
.crb.crb[data-theme] .crb-model-name { text-align:left !important; }
.crb.crb[data-theme] .crb-complement { background:var(--bg) !important; border:none !important; box-shadow:inset 0 0 0 1px var(--ring) !important; text-align:left !important; }
.crb.crb[data-theme] .crb-complement-name { text-align:left !important; }
.crb.crb[data-theme] .crb-swatch { padding:3px !important; background:transparent !important; border:none !important; box-shadow:inset 0 0 0 1.5px var(--ring) !important; width:44px !important; height:44px !important; min-width:0 !important; }
.crb.crb[data-theme] .crb-swatch:hover { box-shadow:inset 0 0 0 2px var(--fg) !important; }
.crb.crb[data-theme] .crb-swatch.is-selected { box-shadow:inset 0 0 0 2px var(--accent) !important; }
.crb.crb[data-theme] .crb-thumb { background:#fff !important; border:none !important; box-shadow:inset 0 0 0 1px var(--ring) !important; padding:0 !important; overflow:hidden !important; opacity:1 !important; }
.crb.crb[data-theme] .crb-thumb img { object-fit:cover !important; }
.crb.crb[data-theme] .crb-thumb:hover { opacity:.5 !important; }
.crb.crb[data-theme] .crb-thumb.is-active { opacity:.5 !important; }
.crb.crb[data-theme] .crb-sticky-btn { background:#C62437 !important; color:#fff !important; border:none !important; padding:15px 34px !important; font-size:16px !important; min-height:0 !important; line-height:1 !important; }
/* botones en mayusculas */
.crb-add, .crb-buynow, .crb-sticky-btn { text-transform:uppercase; }
.crb.crb[data-theme] .crb-add, .crb.crb[data-theme] .crb-buynow, .crb.crb[data-theme] .crb-sticky-btn { text-transform:uppercase !important; }
.crb.crb[data-theme] .crb-tip { background:transparent !important; border:none !important; color:var(--ter) !important; }
.crb.crb[data-theme] .crb-tip:hover { color:var(--accent) !important; }
.crb.crb[data-theme] .crb-st-close { background:rgba(0,0,0,.5) !important; color:#fff !important; border:none !important; border-radius:50% !important; }
.crb.crb[data-theme] .crb-tip { overflow:visible !important; background:transparent !important; border:none !important; width:17px !important; height:17px !important; min-width:0 !important; padding:0 !important; }
.crb.crb[data-theme] .crb-model-rec { color:var(--bg) !important; }
/* Iconos SVG dentro de <button>: Woodmart les colapsa el ancho a 0. Forzar tamaño. */
.crb.crb[data-theme] .crb-arrow svg { width:18px !important; height:18px !important; }
.crb.crb[data-theme] .crb-qty-btn svg { width:18px !important; height:18px !important; }
.crb.crb[data-theme] .crb-add svg { width:19px !important; height:19px !important; }
.crb.crb[data-theme] .crb-tip svg { width:15px !important; height:15px !important; }
.crb.crb[data-theme] .crb-st-close svg { width:27px !important; height:27px !important; }
.crb.crb[data-theme] .crb-swatch-check svg { width:13px !important; height:13px !important; }

/* ---------- Colapsar galería + resumen nativos de Woodmart cuando el buy box está activo ----------
 * Woodmart arma la PDP con un grid en .product-image-summary-inner.wd-grid-g (galería | resumen).
 * Lo forzamos a block y hacemos que .product-images ocupe el ancho completo para que el buy box
 * (que trae su propio grid galería+panel) no quede confinado a media columna.
 */
.single-product.crb-active .product-image-summary,
.single-product.crb-active .product-image-summary-inner { display:block !important; }
.single-product.crb-active .summary.entry-summary { display:none !important; }
.single-product.crb-active .wd-sticky-btn { display:none !important; } /* sticky propia del buy box en uso; ocultar la nativa de Woodmart */
/* Separación migas→buy box = la NATIVA: no se fuerza margin-top; se hereda el margen del wrap de Woodmart
   (igual que la que tenía el resumen de producto nativo). */
/* La barra sticky nativa de Woodmart duplica la del buy box → ocultarla. */
.single-product.crb-active .product-images {
  width:100% !important; max-width:100% !important; flex:0 0 100% !important; grid-column:1 / -1 !important; margin:0 !important; padding:0 !important; float:none !important; overflow:visible !important;
}

/* ---------- Pack (bundle): desglose + un color por producto (etiqueta pdp-showbundle) ---------- */
.crb-bundle-title { font-size:12px; font-weight:600; color:var(--sec); margin-bottom:10px; letter-spacing:.06em; text-align:left; }
.crb-bundle-item { display:flex; align-items:flex-start; gap:13px; padding:12px; border-radius:16px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--ring); margin-bottom:10px; }
.crb-bundle-item:last-child { margin-bottom:0; }
.crb-bundle-img { flex:none; width:44px; height:44px; border-radius:10px; object-fit:cover; background:#fff; }
.crb-bundle-info { flex:1; min-width:0; }
.crb-bundle-name { display:block; font-size:14px; font-weight:600; color:var(--fg); text-align:left; line-height:1.3; margin-bottom:9px; }
.crb-bundle-qty { font-weight:500; color:var(--sec); }
.crb-bundle-swatches { gap:9px; }
/* Variacion agotada: no seleccionable. */
.crb-swatch.is-oos { cursor:not-allowed; }
.crb-swatch.is-oos .crb-swatch-bg { filter:grayscale(1); opacity:.4; }
.crb-swatch.is-oos::after { content:""; position:absolute; left:50%; top:1px; bottom:1px; width:1.5px; background:var(--sec); opacity:.75; transform:translateX(-50%) rotate(45deg); border-radius:2px; pointer-events:none; }
.crb-swatch.is-oos .crb-swatch-check { display:none; }
/* Mensaje real del servidor cuando el add-to-cart es rechazado. */
.crb-cta-error { margin-top:9px; font-size:12.5px; line-height:1.4; color:#C62437; text-align:left; }

/* Hardening Woodmart: el swatch del pack es mas chico que el del selector de modelo (la regla base lleva !important). */
.crb.crb[data-theme] .crb-bundle-item { text-align:left !important; }
.crb.crb[data-theme] .crb-bundle-name { text-align:left !important; }
.crb.crb[data-theme] .crb-bundle-img { border-radius:10px !important; }
.crb.crb[data-theme] .crb-bundle-swatches .crb-swatch { width:34px !important; height:34px !important; padding:2px !important; }
.crb.crb[data-theme] .crb-bundle-swatches .crb-swatch-check { width:15px !important; height:15px !important; }
.crb.crb[data-theme] .crb-swatch.is-oos:hover { box-shadow:inset 0 0 0 1.5px var(--ring) !important; }
.crb.crb[data-theme] .crb-add.is-error { background:#6e6e73 !important; }

/* Modelo/variacion agotada en la grilla de tarjetas (.crb-swatch.is-oos ya esta definido mas arriba). */
.crb-model.is-oos { cursor:not-allowed; }
.crb-model.is-oos .crb-model-name, .crb-model.is-oos .crb-model-price { opacity:.45; }
.crb-model.is-oos::after { content:"Agotado"; position:absolute; top:10px; right:10px; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--sec); background:var(--field); padding:3px 10px; border-radius:100px; pointer-events:none; }
.crb.crb[data-theme] .crb-model.is-oos { cursor:not-allowed !important; }
.crb.crb[data-theme] .crb-model.is-oos .crb-model-name, .crb.crb[data-theme] .crb-model.is-oos .crb-model-price { opacity:.45 !important; }
.crb.crb[data-theme] .crb-model.is-oos::after { content:"Agotado" !important; position:absolute !important; top:10px !important; right:10px !important; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.02em !important; color:var(--sec) !important; background:var(--field) !important; padding:3px 10px !important; border-radius:100px !important; pointer-events:none !important; }
.crb.crb[data-theme] .crb-model.is-oos:hover { box-shadow:inset 0 0 0 1px var(--ring) !important; }

/* ---------- Descripcion corta con formato real ----------
   El filtro woocommerce_short_description ya emite <p>/<br>/<h4>; antes se pintaba el post_excerpt crudo
   con kses de 4 etiquetas => los saltos de linea colapsaban y los <h4> del cliente se perdian. */
.crb-valueprop > *:first-child { margin-top:0; }
.crb-valueprop > *:last-child { margin-bottom:0; }
.crb-valueprop p { margin:0 0 10px; font-size:16px; line-height:1.5; color:var(--fg2); }
.crb-valueprop h1, .crb-valueprop h2, .crb-valueprop h3,
.crb-valueprop h4, .crb-valueprop h5, .crb-valueprop h6 { margin:14px 0 5px; font-size:16px; line-height:1.4; font-weight:600; color:var(--fg); }
.crb-valueprop ul, .crb-valueprop ol { margin:0 0 10px; padding-left:20px; }
.crb-valueprop li { margin:0 0 3px; font-size:16px; line-height:1.5; color:var(--fg2); }
.crb-valueprop a { color:var(--accent); text-decoration:underline; }
.crb-valueprop b, .crb-valueprop strong { font-weight:600; color:var(--fg); }

/* Hardening Woodmart: pisa margenes/tamanos/uppercase de p y h1-h6 dentro de la PDP. */
.crb.crb[data-theme] .crb-valueprop p { margin:0 0 10px !important; font-size:16px !important; line-height:1.5 !important; color:var(--fg2) !important; }
.crb.crb[data-theme] .crb-valueprop h1, .crb.crb[data-theme] .crb-valueprop h2, .crb.crb[data-theme] .crb-valueprop h3,
.crb.crb[data-theme] .crb-valueprop h4, .crb.crb[data-theme] .crb-valueprop h5, .crb.crb[data-theme] .crb-valueprop h6 {
  margin:14px 0 5px !important; font-size:16px !important; line-height:1.4 !important; font-weight:600 !important;
  color:var(--fg) !important; text-transform:none !important; letter-spacing:normal !important;
}
.crb.crb[data-theme] .crb-valueprop ul, .crb.crb[data-theme] .crb-valueprop ol { margin:0 0 10px !important; padding-left:20px !important; list-style:disc !important; }
.crb.crb[data-theme] .crb-valueprop li { margin:0 0 3px !important; font-size:16px !important; line-height:1.5 !important; color:var(--fg2) !important; }
.crb.crb[data-theme] .crb-valueprop > *:first-child { margin-top:0 !important; }
.crb.crb[data-theme] .crb-valueprop > *:last-child { margin-bottom:0 !important; }
/* Iconos inline con su texto en la descripción: Woodmart fuerza los <img> a display:block y los apilaba
   encima del texto (líneas "icono / texto"). Los volvemos inline junto a su texto. */
.crb .crb-valueprop img,
.crb.crb[data-theme] .crb-valueprop img { display:inline-block !important; vertical-align:middle !important; width:20px !important; height:20px !important; margin:-2px 8px 0 0 !important; }

/* ---------- Complementos: selector (check) a la izquierda + info[nombre+swatches] + precio ---------- */
.crb .crb-complement-info { flex:1; min-width:0; }
.crb .crb-complement-info .crb-complement-name { display:block; flex:none; margin:0; }
.crb .crb-complement-swatches { margin-top:9px; }


/* ---------- Miniaturas: carrusel de 3 con flechas (móvil) ---------- */
.crb-thumbs-wrap { position:relative; }
.crb-thumbs-nav { display:none; }
@media (max-width:760px) {
  .crb-thumbs { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; padding:2px 0; }
  .crb-thumbs::-webkit-scrollbar { display:none; }
  .crb-thumbs .crb-thumb { flex:0 0 calc((100% - 20px) / 3); width:auto; height:auto; aspect-ratio:1 / 1; scroll-snap-align:start; }
  .crb-thumbs-nav { display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:32px; height:32px; border:none; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(0,0,0,.2); color:#1d1d1f; cursor:pointer; padding:0; }
  .crb-thumbs-nav.prev { left:-2px; }
  .crb-thumbs-nav.next { right:-2px; }
  .crb-thumbs-nav[hidden] { display:none; }
}
.crb.crb[data-theme] .crb-thumbs-nav { border-radius:50% !important; width:32px !important; height:32px !important; min-width:0 !important; padding:0 !important; background:rgba(255,255,255,.94) !important; box-shadow:0 2px 8px rgba(0,0,0,.2) !important; }


/* Flechas de miniaturas: SOLO movil, SUPERPUESTAS sobre la fila (mas espacio para las imagenes). */
.crb.crb[data-theme] .crb-thumbs-nav { display:none !important; }
@media (max-width:760px) {
  .crb-thumbs-wrap { position:relative; margin-top:14px; }
  .crb.crb[data-theme] .crb-thumbs-wrap { display:block !important; position:relative !important; margin-top:14px; }
  .crb.crb[data-theme] .crb-thumbs { margin-top:0 !important; }
  .crb.crb[data-theme] .crb-thumbs-nav { display:flex !important; position:absolute !important; top:50% !important; transform:translateY(-50%) !important; z-index:3; flex:0 0 auto; width:30px !important; height:30px !important; background:rgba(255,255,255,.72) !important; -webkit-backdrop-filter:blur(4px) !important; backdrop-filter:blur(4px) !important; color:#1d1d1f !important; box-shadow:0 1px 5px rgba(0,0,0,.2) !important; }
  .crb.crb[data-theme] .crb-thumbs-nav.prev { left:2px !important; right:auto !important; }
  .crb.crb[data-theme] .crb-thumbs-nav.next { right:2px !important; left:auto !important; }
  .crb.crb[data-theme] .crb-thumbs-nav[hidden] { display:none !important; }
}

/* Flechas galeria: anular el padding de boton de Woodmart para respetar 34px del diseno. */
.crb.crb[data-theme] .crb-arrow { width:34px !important; height:34px !important; padding:0 !important; min-width:0 !important; }

/* Precio con 7 digitos no pegado al borde: tarjetas de modelo full-width en movil. (crb-model full-width movil) */
@media (max-width:760px) {
  .crb.crb[data-theme] .crb-models-grid .crb-model { flex-basis:100% !important; }
}

.crb-sticky-qty { display:flex; align-items:center; gap:2px; flex:none; border:1.5px solid var(--hair); border-radius:100px; height:46px; padding:0 5px; }
.crb-sqty-btn { -webkit-appearance:none; appearance:none; width:34px; height:34px; border:none; background:transparent; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; color:var(--fg); padding:0; }
.crb-sqty-btn:hover { background:var(--tint); }
.crb-sqty-val { min-width:22px; text-align:center; font-size:15px; font-weight:600; color:var(--fg); }
.crb.crb[data-theme] .crb-sqty-btn { background:transparent !important; border:none !important; width:34px !important; height:34px !important; min-height:0 !important; padding:0 !important; color:var(--fg) !important; font-size:20px !important; line-height:1 !important; border-radius:50% !important; }
.crb.crb[data-theme] .crb-sqty-btn:hover { background:var(--tint) !important; }
.crb-sticky.crb-sticky--behind { z-index:1 !important; pointer-events:none !important; }
/* Sticky en movil: barra roja full-width con Agregar al carrito (estilo nativo). */
@media (max-width:760px) {
  .crb-sticky { background:#C62437 !important; border-top:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .crb-sticky-inner { max-width:none; padding:0; gap:0; }
  .crb-sticky-img, .crb-sticky-info, .crb-sticky-price, .crb-sticky-qty { display:none !important; }
  .crb-sticky-btn { flex:1 1 auto; width:100%; font-size:16px; }
  .crb.crb[data-theme] .crb-sticky-btn { border-radius:0 !important; padding:0 !important; height:var(--wd-sticky-btn-height, 95px) !important; display:flex !important; align-items:center !important; justify-content:center !important; }
}

/* ===== v1.1.4 · Tamaños compactos (la fuente del sitio, Poppins, rinde más grande que SF Pro;
   se reduce todo hacia el tamaño nativo y se acota la foto para que la PDP entre sin scroll) ===== */
.crb.crb[data-theme] .crb-title{ font-size:clamp(26px,3.4vw,34px) !important; line-height:1.2 !important; margin-top:4px !important; } /* tamaño nativo del .product_title (34px/1.2) */
/* Título del producto con la fuente de TÍTULOS del tema (DM Sans), no la del cuerpo (Poppins) — como era nativo. */
.crb.crb[data-theme] .crb-title,
.crb.crb[data-theme] .crb-sticky-title{ font-family:var(--wd-title-font,"DM Sans",Arial,Helvetica,sans-serif) !important; }
.crb.crb[data-theme] .crb-price{ font-size:clamp(25px,3.4vw,30px) !important; }
.crb.crb[data-theme] .crb-orig{ font-size:15px !important; }
.crb.crb[data-theme] .crb-price-badge{ font-size:12px !important; }
.crb.crb[data-theme] .crb-valueprop,.crb.crb[data-theme] .crb-valueprop p,.crb.crb[data-theme] .crb-valueprop li{ font-size:14px !important; line-height:1.45 !important; }
.crb.crb[data-theme] .crb-valueprop p{ margin:0 0 7px !important; }
.crb.crb[data-theme] .crb-valueprop h4,.crb.crb[data-theme] .crb-valueprop h5,.crb.crb[data-theme] .crb-valueprop h6{ font-size:14px !important; margin:10px 0 4px !important; }
.crb.crb[data-theme] .crb-installments{ font-size:13px !important; margin-top:6px !important; }
.crb.crb[data-theme] .crb-rating-val,.crb.crb[data-theme] .crb-rating-link{ font-size:13px !important; }
.crb.crb[data-theme] .crb-stars{ font-size:14px !important; }
.crb.crb[data-theme] .crb-models-title{ font-size:14px !important; }
.crb.crb[data-theme] .crb-model-name{ font-size:14px !important; margin-bottom:7px !important; }
.crb.crb[data-theme] .crb-model-price .p{ font-size:15px !important; }
.crb.crb[data-theme] .crb-complement-name{ font-size:13.5px !important; }
.crb.crb[data-theme] .crb-add,.crb.crb[data-theme] .crb-buynow{ font-size:15px !important; height:48px !important; }
.crb.crb[data-theme] .crb-buynow{ margin-top:8px !important; }
.crb.crb[data-theme] .crb-qty{ height:48px !important; }
.crb.crb[data-theme] .crb-qty-val{ font-size:15px !important; }
.crb.crb[data-theme] .crb-total-val{ font-size:14px !important; }
.crb.crb[data-theme] .crb-reassure-row{ font-size:13px !important; }
.crb.crb[data-theme] .crb-reassure{ margin-top:13px !important; gap:8px !important; }
.crb.crb[data-theme] .crb-sep{ margin:6px 0 !important; } /* separadores compactos y UNIFORMES (precio↔modelo, modelo↔complementos, etc.) → panel derecho más corto */
.crb.crb[data-theme] .crb-pricebox{ margin-top:9px !important; }
@media (min-width:1025px){
  /* Galería estilo nativo, usando TODO el ancho del contenedor (galería+panel con proporciones flex nativas
     1.15/1). MINIATURAS grandes en columna a la IZQUIERDA que, junto con las flechas, ocupan el MISMO ALTO
     que la imagen principal. El lado de cada miniatura lo calcula el JS (sizeGallery) para que 3 llenen ese
     alto (rompe la dependencia circular ancho-columna ↔ alto-imagen). Flechas ‹ › lado a lado al fondo. */
  .crb.crb[data-theme] .crb-grid{ justify-content:flex-start !important; gap:clamp(24px,3vw,44px) !important; }
  .crb.crb[data-theme] .crb-gallery{ display:flex !important; flex-direction:row !important; align-items:flex-start !important; gap:14px !important; flex:1.15 1 0 !important; max-width:none !important; container-type:inline-size; } /* container-type → las thumbs calculan su lado con unidades cqw (ancho de la galería) SIN JS */
  .crb.crb[data-theme] .crb-panel{ flex:1 1 0 !important; max-width:none !important; }
  .crb.crb[data-theme] .crb-stage{ order:2 !important; flex:1 1 0 !important; width:auto !important; max-width:none !important; aspect-ratio:var(--crb-ar,2262/2560) !important; height:auto !important; }
  .crb.crb[data-theme] .crb-stage-img{ object-fit:contain !important; }
  /* Columna de miniaturas (izquierda). El lado de cada thumb lo calcula el CSS con cqw = ancho de la galería
     (lado = (100cqw − B) / D, con B=--crb-tb y D=--crb-td que pone el servidor según el ratio) → se pinta al
     tamaño FINAL de una, sin esperar al JS ni redimensionar. La BASE usa clamp() y el bloque @supports de más
     abajo pone el cálculo cqw EXACTO SOLO donde el navegador soporta unidades de contenedor. El @supports es
     imprescindible: sin él, una declaración cqw con var() se asume válida al parsear (pisa al clamp) y luego
     falla en computed-value → la propiedad vuelve a su valor INICIAL (no al clamp) en navegadores viejos. */
  .crb.crb[data-theme] .crb-thumbs-wrap{ order:1 !important; flex:0 0 auto !important; display:flex !important; flex-direction:column !important; gap:10px !important; margin:0 !important; position:relative !important; }
  .crb.crb[data-theme] .crb-thumbs{ flex-direction:column !important; flex-wrap:nowrap !important; gap:10px !important; margin:0 !important; overflow:hidden !important; scroll-behavior:smooth !important; max-height:calc(clamp(112px,12vw,150px) * 3 + 20px); }
  .crb.crb[data-theme] .crb-thumb{ min-width:0 !important; min-height:0 !important; flex:0 0 auto !important; width:clamp(112px,12vw,150px); height:clamp(112px,12vw,150px); } /* min:0 → el flex-item no queda atado al tamaño intrínseco del <img>; el clamp es el fallback para navegadores sin cqw */
  /* Solo si el navegador soporta unidades de contenedor: tamaño cqw EXACTO (si no, se queda el clamp de arriba). */
  @supports (width: 1cqw) {
    .crb.crb[data-theme] .crb-thumbs{ max-height:calc((100cqw - var(--crb-tb,66) * 1px) / var(--crb-td,3.65) * 3 + 20px); }
    .crb.crb[data-theme] .crb-thumb{ width:calc((100cqw - var(--crb-tb,66) * 1px) / var(--crb-td,3.65)); height:calc((100cqw - var(--crb-tb,66) * 1px) / var(--crb-td,3.65)); }
  }
  /* Flechas ‹ › lado a lado, centradas al FONDO de la columna (solo si hay >3 fotos). El wrap reserva alto abajo. */
  .crb.crb[data-theme] .crb-thumbs-wrap.crb-scrollable{ padding-bottom:38px !important; }
  .crb.crb[data-theme] .crb-thumbs-wrap.crb-scrollable .crb-thumbs-nav{ display:flex !important; position:absolute !important; bottom:0 !important; top:auto !important; transform:none !important; width:38px !important; height:30px !important; min-width:0 !important; border-radius:8px !important; background:rgba(0,0,0,.05) !important; box-shadow:none !important; color:#1d1d1f !important; }
  .crb.crb[data-theme] .crb-thumbs-wrap.crb-scrollable .crb-thumbs-nav.prev{ right:calc(50% + 5px) !important; left:auto !important; }
  .crb.crb[data-theme] .crb-thumbs-wrap.crb-scrollable .crb-thumbs-nav.next{ left:calc(50% + 5px) !important; right:auto !important; }
  .crb.crb[data-theme] .crb-thumbs-wrap.crb-scrollable .crb-thumbs-nav[hidden]{ display:flex !important; visibility:hidden !important; }
  .crb.crb[data-theme] .crb-thumbs-wrap.crb-scrollable .crb-thumbs-nav svg{ transform:rotate(90deg) !important; } /* chevrons ‹ › → ↑/↓ (arriba/abajo), lado a lado */
}