/* ============================================================
   BOTIGA · Casabella Natura  ·  v5.5
   Maquetación de la página de producto (WooCommerce + Enfold)
   Cargado por botiga.php · prefijo cbn-cartj

   v4: la descripción corta vive bajo la galería (la mueve el
   JS de botiga.php), pestañas a ancho completo con listas y
   tabla de atributos bien formateadas.
   v4.1: contador de cantidad oscuro, igual que el botón.
   v4.2: fix — estilos de Enfold (#top) ganaban a las reglas
   del contador; todo el bloque se fuerza con !important.
   v4.3: contador con esquinas rectas y número en caja blanca.
   v4.4: el número se fuerza sobre CUALQUIER input dentro de
   .quantity y el bloque contenedor pasa a fondo blanco.
   v4.5: borde de 2px oscuro alrededor del contador.
   v4.6: sin borde en el contador; border-radius de 3px.
   v4.7: pestañas alineadas por abajo, unidas al panel.
   v4.8: pestañas — TODOS los selectores llevan #top: Enfold
   aplica color/estilos de pestaña activa con el ID #top y
   ganaba a las reglas sin ID (texto invisible y decoración
   de esquina). Mismo patrón que el fix v4.2 del contador.
   v4.9: contador igual de alto que el botón (estira con
   align-self: stretch, sin altura fija) y filo fino claro
   para que la caja blanca se vea sobre el fondo blanco de
   la ficha; el input ocupa toda la altura del bloque.
   v5.0: descripción corta con fondo blanco en vez de crema.
   v5.1: columnas a la MISMA altura — la rejilla estira las
   dos columnas y la caja de compra y la descripción corta
   terminan en la misma línea inferior (flex + flex:1).
   v5.2: descripción corta idéntica a la caja de compra:
   mismo borde fino, radio de 14px y sombra; SIN la franja
   verde del lado izquierdo.
   v5.3: bloque de pestañas más pegado a las columnas —
   margen superior de 54px a 12px.
   v5.4: pestaña de VALORACIONES oculta (tab y panel).
   v5.5: pestañas todavía más arriba — margen superior a 0,
   margen inferior de la rejilla a 0 y se anulan los
   márgenes/paddings del wrapper del producto que Enfold
   añade bajo las columnas.
   ============================================================ */

/*
 ------------------------------------------------------------
 1 · VARIABLES Y BASE
 ------------------------------------------------------------
*/

body.cbn-cartj {
    --cartj-green: #37442e;
    --cartj-green-dark: #293323;
    --cartj-ink: #26301d;
    --cartj-olive: #68734b;
    --cartj-cream: #f4f0e6;
    --cartj-bg: #fbfaf5;
    --cartj-text: #34372f;
    --cartj-muted: #75786f;
    --cartj-line: rgba(55, 68, 46, .14);
    --cartj-serif: Georgia, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

body.cbn-cartj.single-product #main .container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

body.cbn-cartj .woocommerce-breadcrumb {
    margin: 0 0 26px;
    color: var(--cartj-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.cbn-cartj .woocommerce-breadcrumb a {
    color: var(--cartj-olive);
    text-decoration: none;
}

body.cbn-cartj .woocommerce-breadcrumb a:hover {
    color: var(--cartj-green);
}

/*
 ------------------------------------------------------------
 2 · REJILLA CONSTRUIDA POR JS: galería 7/12 + compra 5/12
      v5.1: align-items stretch + columnas flex para que
      ambas terminen a la misma altura.
      v5.5: sin margen inferior — las pestañas quedan justo
      debajo.
 ------------------------------------------------------------
*/

.cbn-cartj-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 44px;
    align-items: stretch;
    margin: 0 0 0;
}

.cbn-cartj-grid .cbn-cartj-col {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cbn-cartj-col--gallery {
    position: relative;
}

/* Los bloques que el JS no mueve quedan en el flujo normal.
   v5.5: sin margen ni padding extra en el wrapper — de ahí
   salía el hueco grande antes de las pestañas. */
body.cbn-cartj #main div.product {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.cbn-cartj #main div.product::after {
    content: "";
    display: table;
    clear: both;
}

/*
 ------------------------------------------------------------
 3 · GALERÍA
 ------------------------------------------------------------
*/

body.cbn-cartj .woocommerce-product-gallery,
body.cbn-cartj #main div.product .images {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 auto;
}

/* Imagen principal: siempre al ancho completo de la columna */
body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-gallery__wrapper,
body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-gallery__image,
body.cbn-cartj .cbn-cartj-col--gallery .images a.woocommerce-main-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block;
}

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-gallery img,
body.cbn-cartj .cbn-cartj-col--gallery img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 14px;
    background: var(--cartj-cream);
}

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-gallery__image,
body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-gallery__wrapper {
    border-radius: 14px;
    overflow: hidden;
}

/* Enlace de la imagen principal (marcado antiguo) */
body.cbn-cartj .cbn-cartj-col--gallery a.woocommerce-main-image {
    display: block !important;
    width: 100% !important;
    border-radius: 14px;
    overflow: hidden;
}

/* Miniaturas modernas */
body.cbn-cartj .cbn-cartj-col--gallery ol.flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.cbn-cartj .cbn-cartj-col--gallery ol.flex-control-thumbs li {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
}

body.cbn-cartj .cbn-cartj-col--gallery ol.flex-control-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: .55;
    cursor: pointer;
    transition: opacity .25s ease, border-color .25s ease;
}

body.cbn-cartj .cbn-cartj-col--gallery ol.flex-control-thumbs img.flex-active,
body.cbn-cartj .cbn-cartj-col--gallery ol.flex-control-thumbs img:hover {
    opacity: 1;
    border-color: var(--cartj-olive);
}

/* Miniaturas del marcado antiguo */
body.cbn-cartj .cbn-cartj-col--gallery div.thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px !important;
    padding: 0 !important;
    width: 100% !important;
}

body.cbn-cartj .cbn-cartj-col--gallery div.thumbnails a {
    width: 78px;
    height: 78px;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: .55;
}

body.cbn-cartj .cbn-cartj-col--gallery div.thumbnails a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
    background: transparent;
}

body.cbn-cartj .cbn-cartj-col--gallery div.thumbnails a:hover {
    opacity: 1;
    border-color: var(--cartj-olive);
}

/* Etiqueta "¡Oferta!" anclada a la galería */
body.cbn-cartj .cbn-cartj-col--gallery span.onsale {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    right: auto !important;
    z-index: 6;

    margin: 0 !important;
    padding: 8px 16px !important;

    background: var(--cartj-olive) !important;
    color: #ffffff !important;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;

    border-radius: 999px;
}

/*
 ------------------------------------------------------------
 4 · DESCRIPCIÓN CORTA (bajo la galería, la coloca el JS)
      v5.0: fondo blanco.
      v5.1: estira (flex: 1) hasta que su columna iguale la
      altura de la columna de compra.
      v5.2: misma apariencia que la caja de compra — borde
      fino, radio 14px y sombra; sin franja verde lateral.
 ------------------------------------------------------------
*/

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-details__short-description {
    margin: 20px 0 0 !important;
    padding: 26px 28px !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;

    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #ffffff;
    border: 1px solid var(--cartj-line);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(38, 48, 29, .09);

    color: #4a4f42;
    font-size: 15px;
    line-height: 1.7;
}

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-details__short-description p {
    margin: 0 0 8px;
}

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-details__short-description ul {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: disc outside;
}

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-details__short-description li {
    margin: 5px 0;
    line-height: 1.6;
}

body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-details__short-description li::marker {
    color: var(--cartj-olive);
}

/*
 ------------------------------------------------------------
 5 · CAJA DE COMPRA (summary)
      v5.1: estira (flex: 1) hasta que su columna iguale la
      altura de la columna de la galería.
 ------------------------------------------------------------
*/

body.cbn-cartj .cbn-cartj-col--summary .summary,
body.cbn-cartj .cbn-cartj-col--summary .entry-summary {
    position: sticky;
    top: 100px;

    float: none !important;
    width: 100% !important;
    margin: 0 !important;

    flex: 1 1 auto;

    background: #ffffff;
    border: 1px solid var(--cartj-line);
    border-radius: 14px;
    padding: 32px 30px 28px;
    box-sizing: border-box;
    box-shadow: 0 20px 45px rgba(38, 48, 29, .09);
}

body.cbn-cartj .summary .product_title {
    margin: 0 0 10px;
    color: var(--cartj-ink);
    font-family: var(--cartj-serif);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
}

body.cbn-cartj .summary p.price {
    margin: 6px 0 2px;
    font-family: var(--cartj-serif);
    font-size: 27px;
    line-height: 1.2;
}

body.cbn-cartj .summary p.price .woocommerce-Price-amount {
    color: var(--cartj-olive);
    font-weight: 600;
}

body.cbn-cartj .summary p.price del {
    color: #9a9b8e;
    font-size: 16px;
}

body.cbn-cartj .summary p.price ins {
    text-decoration: none;
}

/* Stock como cápsula */
body.cbn-cartj .summary .stock {
    display: inline-block;
    margin: 10px 0 2px;
    padding: 5px 12px;

    background: rgba(244, 240, 230, .7);
    border: 1px solid rgba(104, 115, 75, .4);
    border-radius: 999px;

    color: var(--cartj-olive);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Cantidad + botón alineados */
body.cbn-cartj .summary form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;

    margin: 24px 0 10px;
}

/*
   Contador de cantidad. Interior blanco con el número negro;
   signos -/+ oscuros con texto blanco, igual que el botón.
   v4.9: sin altura fija — estira hasta medir lo mismo que el
   botón (align-self: stretch). Filo fino claro para que la
   caja blanca se vea sobre el fondo blanco; radius de 3px.
*/
body.cbn-cartj .summary form.cart div.quantity,
body.cbn-cartj #top .summary form.cart div.quantity,
body.cbn-cartj #top .summary form.cart .quantity {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: stretch;
    align-self: stretch;
    height: auto !important;
    min-height: 52px;

    background: #ffffff !important;
    border: 1px solid rgba(38, 48, 29, .28) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* Signos - y + (button, a, span o input según plantilla) */
body.cbn-cartj .summary form.cart div.quantity .minus,
body.cbn-cartj .summary form.cart div.quantity .plus,
body.cbn-cartj .summary form.cart div.quantity button,
body.cbn-cartj .summary form.cart div.quantity a,
body.cbn-cartj .summary form.cart div.quantity input[type="button"],
body.cbn-cartj #top .summary form.cart div.quantity .minus,
body.cbn-cartj #top .summary form.cart div.quantity .plus,
body.cbn-cartj #top .summary form.cart .quantity .minus,
body.cbn-cartj #top .summary form.cart .quantity .plus {
    width: 46px;
    flex: 0 0 auto;

    background: #141417 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    transition: background .25s ease;
}

body.cbn-cartj .summary form.cart div.quantity .minus:hover,
body.cbn-cartj .summary form.cart div.quantity .plus:hover,
body.cbn-cartj .summary form.cart div.quantity button:hover,
body.cbn-cartj .summary form.cart div.quantity a:hover {
    background: var(--cartj-green) !important;
    color: #ffffff !important;
}

/* Número: CUALQUIER input dentro de .quantity, blanco/negro.
   v4.9: sin altura fija, estira hasta llenar el bloque. */
body.cbn-cartj .summary form.cart div.quantity input,
body.cbn-cartj #top .summary form.cart div.quantity input,
body.cbn-cartj #top .summary form.cart .quantity input {
    width: 64px !important;
    min-width: 64px !important;
    height: auto !important;

    background: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    text-align: center;
    font-size: 15px;
    font-weight: 700;
    -moz-appearance: textfield;
    appearance: textfield;
}

body.cbn-cartj .summary form.cart div.quantity input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--cartj-olive);
}

body.cbn-cartj .summary form.cart div.quantity input::-webkit-outer-spin-button,
body.cbn-cartj .summary form.cart div.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.cbn-cartj .summary form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    min-height: 52px;

    background: #141417;
    color: #ffffff;
    border: 0;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

body.cbn-cartj .summary form.cart button.single_add_to_cart_button:hover {
    background: var(--cartj-green);
    transform: translateY(-1px);
}

/* Meta (SKU, categorías...) */
body.cbn-cartj .summary .product_meta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(55, 68, 46, .22);

    color: var(--cartj-muted);
    font-size: 12px;
    line-height: 1.9;
}

body.cbn-cartj .summary .product_meta a {
    color: var(--cartj-olive);
    text-decoration: none;
}

body.cbn-cartj .summary .product_meta a:hover {
    color: var(--cartj-green);
}

/*
 ------------------------------------------------------------
 6 · PESTAÑAS (a ancho completo, la coloca el JS al final)
      v4.8: TODOS los selectores llevan #top para superar los
      estilos de Enfold (color blanco de la pestaña activa
      sobre fondo claro = texto invisible, y su decoración de
      esquina). El texto pasa a visible en los tres estados.
      v5.3: margen superior reducido a 12px — el bloque
      queda pegado justo debajo de las cajas.
      v5.4: pestaña y panel de VALORACIONES ocultos.
      v5.5: margen superior a 0 — pegado a las columnas.
 ------------------------------------------------------------
*/

body.cbn-cartj #top .woocommerce-tabs {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    box-sizing: border-box;
}

body.cbn-cartj #top .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-end;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(55, 68, 46, .18) !important;
    list-style: none !important;
}

/* Limpia líneas, flechas y muescas decorativas de Enfold */
body.cbn-cartj #top .woocommerce-tabs ul.tabs::before,
body.cbn-cartj #top .woocommerce-tabs ul.tabs::after,
body.cbn-cartj #top .woocommerce-tabs ul.tabs li::before,
body.cbn-cartj #top .woocommerce-tabs ul.tabs li::after,
body.cbn-cartj #top .woocommerce-tabs ul.tabs li a::before,
body.cbn-cartj #top .woocommerce-tabs ul.tabs li a::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
}

body.cbn-cartj #top .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    float: none !important;
}

/* v5.4: sin pestaña de valoraciones (tab y panel) */
body.cbn-cartj #top .woocommerce-tabs ul.tabs li.reviews_tab {
    display: none !important;
}

body.cbn-cartj #top .woocommerce-tabs .woocommerce-Tabs-panel--reviews,
body.cbn-cartj #top .woocommerce-tabs #tab-reviews {
    display: none !important;
}

/* Pestañas inactivas y activas: color legible forzado */
body.cbn-cartj #top .woocommerce-tabs ul.tabs li a,
body.cbn-cartj #top .woocommerce-tabs ul.tabs li a span {
    display: block;
    padding: 12px 18px !important;
    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    text-shadow: none !important;
    background-image: none !important;

    color: #5d6650 !important;
    background-color: var(--cartj-cream) !important;

    font-size: 12px;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none !important;

    border: 0 !important;
    border-radius: 8px 8px 0 0;
    position: relative;
    top: 0 !important;
    z-index: 1;
}

body.cbn-cartj #top .woocommerce-tabs ul.tabs li a:hover {
    color: var(--cartj-green) !important;
    background-color: #ece8d8 !important;
}

body.cbn-cartj #top .woocommerce-tabs ul.tabs li.active a,
body.cbn-cartj #top .woocommerce-tabs ul.tabs li.active a span {
    color: #2f3a26 !important;
    background-color: var(--cartj-bg) !important;

    /* Baja 1px para tapar la línea y unirse al panel */
    margin-bottom: -1px !important;
    padding-bottom: 13px !important;
    z-index: 2;
}

body.cbn-cartj #top .woocommerce-tabs .panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 30px 34px !important;
    float: none !important;
    box-sizing: border-box !important;

    background-color: var(--cartj-bg) !important;
    background-image: none !important;
    border: 1px solid rgba(55, 68, 46, .12) !important;
    border-top: 0 !important;
    border-radius: 0 12px 12px 12px !important;

    color: var(--cartj-text);
    font-size: 16px;
    line-height: 1.75;
}

body.cbn-cartj #top .woocommerce-tabs .panel h2:first-child {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--cartj-ink);
    font-family: var(--cartj-serif);
    font-size: 22px;
}

/* Párrafos */
body.cbn-cartj #top .woocommerce-tabs .panel p {
    margin: 0 0 14px;
}

/* Listas (viñetas) bien formateadas */
body.cbn-cartj #top .woocommerce-tabs .panel ul,
body.cbn-cartj #top .woocommerce-tabs .panel ol {
    margin: 6px 0 18px;
    padding-left: 24px;
    list-style: disc outside;
}

body.cbn-cartj #top .woocommerce-tabs .panel ol {
    list-style: decimal outside;
}

body.cbn-cartj #top .woocommerce-tabs .panel li {
    margin: 7px 0;
    padding-left: 4px;
    line-height: 1.65;
}

body.cbn-cartj #top .woocommerce-tabs .panel li::marker {
    color: var(--cartj-olive);
    font-weight: 700;
}

/* Tabla de "Información adicional" */
body.cbn-cartj #top .woocommerce-tabs .panel table.woocommerce-product-attributes,
body.cbn-cartj #top .woocommerce-tabs .panel table.variations {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid var(--cartj-line);
    border-radius: 10px;
    overflow: hidden;
}

body.cbn-cartj #top .woocommerce-tabs .panel table.woocommerce-product-attributes th,
body.cbn-cartj #top .woocommerce-tabs .panel table.woocommerce-product-attributes td {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--cartj-line);
    text-align: left;
    font-size: 14px;
    vertical-align: top;
}

body.cbn-cartj #top .woocommerce-tabs .panel table.woocommerce-product-attributes tr:last-child th,
body.cbn-cartj #top .woocommerce-tabs .panel table.woocommerce-product-attributes tr:last-child td {
    border-bottom: 0;
}

body.cbn-cartj #top .woocommerce-tabs .panel table.woocommerce-product-attributes th {
    background: rgba(244, 240, 230, .55);
    color: var(--cartj-ink);
    font-weight: 700;
    width: 180px;
}

/*
 ------------------------------------------------------------
 7 · PRODUCTOS RELACIONADOS Y UPGRADES
 ------------------------------------------------------------
*/

body.cbn-cartj .related,
body.cbn-cartj .upsells {
    margin-top: 54px;
    float: none;
    width: 100%;
    clear: both;
}

body.cbn-cartj .related > h2,
body.cbn-cartj .upsells > h2 {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(55, 68, 46, .14);

    color: var(--cartj-green);
    font-family: var(--cartj-serif);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.015em;
}

body.cbn-cartj .related ul.products,
body.cbn-cartj .upsells ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    margin: 0 !important;
    padding: 0 !important;
}

body.cbn-cartj .related ul.products li.product,
body.cbn-cartj .upsells ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;

    background: #ffffff;
    border: 1px solid rgba(55, 68, 46, .1);
    border-radius: 12px;
    overflow: hidden;

    transition: transform .3s ease, box-shadow .3s ease;
}

body.cbn-cartj .related ul.products li.product:hover,
body.cbn-cartj .upsells ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(38, 48, 29, .12);
}

body.cbn-cartj .related ul.products li.product a img,
body.cbn-cartj .upsells ul.products li.product a img {
    width: 100%;
    transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

body.cbn-cartj .related ul.products li.product:hover a img,
body.cbn-cartj .upsells ul.products li.product:hover a img {
    transform: scale(1.04);
}

body.cbn-cartj .related ul.products li.product .woocommerce-loop-product__title,
body.cbn-cartj .upsells ul.products li.product .woocommerce-loop-product__title {
    padding: 14px 16px 4px;

    color: var(--cartj-ink);
    font-family: var(--cartj-serif);
    font-size: 15px;
    line-height: 1.35;
}

body.cbn-cartj .related ul.products li.product .price,
body.cbn-cartj .upsells ul.products li.product .price {
    padding: 0 16px 14px;
    color: var(--cartj-olive);
    font-weight: 600;
}

body.cbn-cartj .related ul.products li.product .button,
body.cbn-cartj .upsells ul.products li.product .button {
    display: block;
    width: auto;
    margin: 0 16px 16px;
    padding: 11px 10px;

    background: #141417 !important;
    color: #ffffff !important;
    border: 0;
    border-radius: 8px;

    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    transition: background .25s ease;
}

body.cbn-cartj .related ul.products li.product .button:hover,
body.cbn-cartj .upsells ul.products li.product .button:hover {
    background: var(--cartj-green) !important;
}

/*
 ------------------------------------------------------------
 8 · RESPONSIVE
 ------------------------------------------------------------
*/

@media only screen and (max-width: 989px) {

    .cbn-cartj-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* En una sola columna cada caja recupera su altura natural */
    body.cbn-cartj .cbn-cartj-col--gallery .woocommerce-product-details__short-description {
        flex: 0 0 auto;
    }

    body.cbn-cartj .cbn-cartj-col--summary .summary,
    body.cbn-cartj .cbn-cartj-col--summary .entry-summary {
        position: static;
        flex: 0 0 auto;
        padding: 26px 22px 24px;
    }

    body.cbn-cartj .related ul.products,
    body.cbn-cartj .upsells ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media only screen and (max-width: 767px) {

    body.cbn-cartj .woocommerce-breadcrumb {
        margin-bottom: 18px;
    }

    .cbn-cartj-grid {
        gap: 22px;
    }

    body.cbn-cartj .summary .product_title {
        font-size: 27px;
    }

    body.cbn-cartj .summary p.price {
        font-size: 24px;
    }

    body.cbn-cartj .summary form.cart button.single_add_to_cart_button {
        flex: 1 1 100%;
    }

    body.cbn-cartj #top .woocommerce-tabs .panel {
        padding: 22px 20px;
    }
}

@media only screen and (max-width: 480px) {

    body.cbn-cartj .related ul.products,
    body.cbn-cartj .upsells ul.products {
        grid-template-columns: 1fr;
    }
}