/*
Theme Name: Paccari Child Hello Elementor
Theme URI: 
Template: hello-elementor
Version: 1.0.0
*/

/* --- Estilos para el carrito de compras --- */

/* --- Estructura y Estilos de Items del Carrito --- */

/* 1. Convertimos cada item del carrito en un contenedor Grid */
.woocommerce-cart-form .cart_item {
    background-color: #212121; /* Fondo negro */
    border-radius: 20px !important;      /* Puntas redondeadas de 20px */
    margin-bottom: 10px;
    color: white;
    display: grid; /* ¡La magia empieza aquí! */
    grid-template-columns: 1fr 2fr 1fr; /* Columnas: imagen, contenido, eliminar */
    grid-template-rows: auto auto auto; /* Tres filas, altura automática */
    padding: 20px;
    gap: 20px; /* Espacio entre celdas */
    align-items: center; /* Centramos verticalmente el contenido de cada celda */
}
.woocommerce-cart-form .cart_item *{color:white;}
/* Evitamos el cambio de color al pasar el cursor (hover) o en filas alternas */
.woocommerce-cart-form .cart_item:hover,
.woocommerce-cart-form .cart_item:nth-child(even) {
    background-color: #212121 !important;
}

/* Evitar cualquier resaltado al hacer hover sobre la fila del carrito o sus celdas.
   Algunas hojas de estilo (reset/tema padre) aplican background a <td> en :hover, así que
   forzamos que las celdas hereden/transparen el fondo del contenedor para no ver el "resalte" */
.woocommerce-cart-form .cart_item:hover td,
.woocommerce-cart-form .cart_item:hover th,
.woocommerce table.shop_table tbody tr:hover > td,
.woocommerce table.shop_table tbody tr:hover > th {
    background-color: transparent !important;
    background: none !important;
}


/* Eliminar el zebrado (filas alternadas) que aplican reglas generales como
   `table tbody>tr:nth-child(odd)>td { background-color: ... }` del tema padre. */
.woocommerce table.shop_table tbody > tr:nth-child(odd) > td,
.woocommerce table.shop_table tbody > tr:nth-child(even) > td,
.woocommerce table.shop_table tbody > tr:nth-child(odd) > th,
.woocommerce table.shop_table tbody > tr:nth-child(even) > th {
    background-color: transparent !important;
    background: none !important;
}


/* Además asegurar que cualquier <td>/<th> dentro de tablas de WooCommerce sea transparente */
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart-form .cart_item td,
.woocommerce-cart-form .cart_item th {
    background: transparent !important;
}

/* 2. Ocultamos las cabeceras de la tabla que ya no necesitamos */
.woocommerce table.shop_table thead {
    display: none;
}

/* 3. Posicionamos cada celda en la nueva cuadrícula */

/* Fila 1 */
.woocommerce .cart_item .product-thumbnail { grid-area: 1 / 1 / 3 / 2; display:block; width: 100%; height: auto; } /* Fila 1, Col 1 */
.woocommerce .cart_item .product-name { grid-area: 1 / 2 / 2 / 3; justify-self: start; text-align: left; align-self: start; }    /* Fila 1, Col 2 */
.woocommerce .cart_item .product-price { grid-area: 1 / 3 / 2 / 4; justify-self: end; align-self: start; }    /* Fila 1, Col 3 */

/* Fila 2 */
.woocommerce .cart_item .product-quantity { grid-area: 3 / 1 / 4 / 2; } /* Fila 2, Col 1 */
.woocommerce .cart_item .product-subtotal { grid-area: 3 / 2 / 3 / 3; justify-self: end; } /* Fila 2, Col 2 */
.woocommerce .cart_item .product-remove { grid-area: 3 / 3 / 4 / 4; }   /* Fila 2, Col 3 */

/* Fila 3 (Nueva) */
.woocommerce .cart_item .paccari-weight-td { grid-area: 2 / 2 / 3 / 3; justify-self: start; align-self: start; } /* Fila 3, Col 1 a 4, alineado abajo */

/* Alineamos el icono de eliminar a la derecha dentro de su celda */
.woocommerce .cart_item .product-remove {
    display: flex;
    justify-content: flex-end; /* Empuja el icono hacia la derecha */
    align-items: center; /* Centra verticalmente */
    justify-self: end;
}

/* Quitar líneas negras / bordes superiores sobre la imagen, nombre o precio */
.woocommerce .cart_item .product-thumbnail,
.woocommerce .cart_item .product-name,
.woocommerce .cart_item .product-price {
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
}

.woocommerce .cart_item .product-thumbnail img {
    border-top: none !important;
    box-shadow: none !important;
}

/* Ocultamos pseudo-elementos que puedan dibujar líneas arriba/abajo */
.woocommerce .cart_item .product-thumbnail::before,
.woocommerce .cart_item .product-name::before,
.woocommerce .cart_item .product-price::before,
.woocommerce .cart_item .product-thumbnail::after,
.woocommerce .cart_item .product-name::after,
.woocommerce .cart_item .product-price::after {
    display: none !important;
    content: none !important;
}

/* Ocultar cualquier <hr> que pudiera estar dentro del item */
.woocommerce .cart_item hr {
    display: none !important;
}

/* También quitar la línea superior encima del subtotal (Total) y del botón eliminar */
.woocommerce .cart_item .product-subtotal,
.woocommerce .cart_item .product-remove {
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
}

.woocommerce .cart_item .product-remove::before,
.woocommerce .cart_item .product-remove::after {
    display: none !important;
    content: none !important;
}

/* Línea blanca de 1px entre la fila 1 y la fila 2 de cada item */
.woocommerce-cart-form .cart_item {
    /* Aseguramos que el pseudo-elemento participe del grid */
    position: relative; /* necesario para compatibilidad en algunos navegadores */
}
.woocommerce-cart-form .cart_item::before {
    content: "";
    display: block;
    grid-column: 1 / -1;    /* ocupar todas las columnas */
    grid-row: 3 / 3;        /* situarse en la segunda fila, al inicio */
    align-self: start;      /* pegarse al borde superior de la fila 2 */
    height: 1px;
    background: #ffffff;    /* línea blanca */
    width: 100%;
    z-index: 1;
}

/* Empujamos el contenido de la segunda fila un poco hacia abajo para que no tape la línea */
.woocommerce .cart_item .product-quantity,
.woocommerce .cart_item .product-subtotal,
.woocommerce .cart_item .product-remove {
    padding-top: 10px;
}

/* 4. Ajustes de estilo para que se vea bien */

/* Estilos para el botón de eliminar (la "X") */
.woocommerce .cart_item .product-remove a.remove {
    font-size: 0; /* Ocultamos la "X" de texto */
    width: 24px;  /* Ancho del icono */
    height: 24px; /* Alto del icono */
    display: block;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F79C21'%3e%3cpath d='M9 3V4H4V6H5V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V6H20V4H15V3H9ZM7 6H17V20H7V6ZM9 8V18H11V8H9ZM13 8V18H15V8H13Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.woocommerce .cart_item .product-remove a.remove:hover {
    background-color: transparent; /* Evitamos el color de fondo al pasar el cursor */
    opacity: 1;
}

/* Estilos para el nombre del producto. Usamos ">" para que solo afecte al enlace directo y no al de la categoría */
.woocommerce .cart_item .product-name > a {
    font-size: 22px;
    line-height: 24px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none; /* Opcional: para quitar el subrayado del enlace */
    padding-top: 15px;
    display: inline-block; /* Necesario para que el padding-top funcione */
}

/* Estilos para la categoría del producto que acabamos de añadir */
.paccari-product-category a {
    font-size: 14px;
    color: #F79C21; /* Color personalizado */
    font-weight: normal !important; /* Peso de fuente regular */
    line-height: 20px !important;
}

/* Creamos el texto "Cantidad" y le damos estilo */
.woocommerce .cart_item .product-quantity::before {
    content: "Cantidad";
    color: #ffffff;      /* Color blanco */
    font-size: 16px;      /* Tamaño de 16px */
}
/* Añadimos el texto "Cantidad" antes del selector numérico */
.woocommerce .cart_item .product-quantity {
    display: flex; /* Usamos flexbox para alinear el texto y el selector */
    align-items: center;
    gap: 10px; /* Espacio entre el texto y el selector */
}

/* Hacemos más ancho el campo del número */
.woocommerce .cart_item .product-quantity .quantity input.qty {
    width: 80px;
    text-align: center; /* Centramos el número dentro del campo */
    background-color: #212121;
    color:#F79C21;
}

/* Estilos para el precio unitario */
.woocommerce .cart_item .product-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el contenido al inicio (top) dentro de la celda) */
}

/* Fallback más específico: aseguramos que la etiqueta aparezca justo debajo del importe */
.woocommerce .cart_item .product-price .woocommerce-Price-amount::after,
.woocommerce .cart_item .product-price .amount::after {
    content: "por unidad";
    display: block;
    font-size: 12px;
    color: #ffffff !important;
    margin-top: 4px;
    text-align: right;
}

/* --- Estilos para mostrar el PESO en la página del carrito --- */


/* Etiqueta/key (ej. 'Peso') - la palabra puede permanecer en blanco o ajustarse si se desea */
body.woocommerce-cart .cart_item .item_data dt,
body.woocommerce-cart .cart_item dl.variation dt,
body.woocommerce-cart .cart_item .wc-item-meta li span.label {
    color: #ffffff !important;
    font-size: 14px;
    margin-right: 6px;
    display: inline-block;
}

/* Valor del peso: tamaño 18px y color #E5CCBD */
body.woocommerce-cart .cart_item .item_data dd,
body.woocommerce-cart .cart_item dl.variation dd,
body.woocommerce-cart .cart_item .wc-item-meta li,
body.woocommerce-cart .cart_item .paccari-product-weight-cart .weight-value,
body.woocommerce-cart .cart_item .variation dd {
    color: #E5CCBD !important;
    font-size: 18px !important;
    display: inline-block;
}

/* Estilos para el contenedor del peso (icono + valor) */
.paccari-product-weight-cart {
    align-items: center;
    gap: 6px; /* Espacio entre el icono y el texto */
    border: 1px solid #ffffff; /* Borde blanco de 1px */
    border-radius: 10px;       /* Bordes redondeados de 10px */
    padding: 6px 30px;  
         /* Espaciado interno para que se vea bien */
}



/* Estilos para el precio total (subtotal del item) */
.woocommerce .cart_item .product-subtotal {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinea todo a la derecha */
    gap: 8px; /* Espacio entre el texto "Total" y el precio */
}

.woocommerce .cart_item .product-subtotal::before {
    content: "Total";
    color: #ffffff;
    font-size: 16px;
    margin-right: 8px; /* espacio a la derecha para separarlo del importe */
    display: inline-block;
    vertical-align: middle;
}

.woocommerce .cart_item .product-subtotal .woocommerce-Price-amount {
    font-size: 32px;
    color: #F79C21;
}

/* Hacemos que la imagen ocupe todo el ancho de su celda */
.woocommerce .cart_item .product-thumbnail img {
    width: 100%;
    height: auto;
}

/* Quitamos los bordes de las celdas para un look más limpio */
.woocommerce-cart-form .cart_item td {
    border: none;
    padding: 0;
}

/* Para asegurar que la separación se vea bien, quitamos el borde por defecto */
.woocommerce table.shop_table {
    border: none;
}

/* --- Estilos para los Totales del Carrito --- */

/* 1. Estilo principal del contenedor de totales */
.cart-collaterals .cart_totals {
    background-color: #F1E8DC; /* Fondo color crema */
    border-radius: 20px;       /* Bordes redondeados */
    padding: 30px;             /* Espaciado interno para que no se vea apretado */
    border: none;              /* Quitamos cualquier borde por defecto */
}

/* 2. Cambiamos el color del texto a negro */
.cart-collaterals .cart_totals h2,
.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td,
.cart-collaterals .cart_totals .woocommerce-Price-amount,
.cart-collaterals .cart_totals .shipping-calculator-button {
    color: #000000; /* Texto negro */
}

.cart-collaterals .cart_totals table {
    border: none; /* Quitamos bordes internos de la tabla */
}

/* --- Estilos para el botón de Finalizar Compra --- */

.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: block; /* Para que ocupe todo el ancho */
    background-color: #F79C21; /* Fondo naranja */
    color: #000000 !important; /* Texto negro, !important para asegurar que se aplique */
    font-weight: bold;
    text-align: center;
    padding: 15px;
    border-radius: 20px; /* Mismos bordes redondeados */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}

/* Compact cart styles */
.compact-cart {
    display: flex;
    flex-direction: column;
}

.compact-cart-item {
    display: flex;
    margin-bottom: 10px;
}

.compact-cart-item .product-thumbnail {
    width: 100px; /* Adjust as needed */
}

.compact-cart-item .product-details {
    margin-left: 10px;
}

/* Estilo al pasar el cursor (hover) */
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #000000; /* Fondo negro */
    color: #ffffff !important; /* Texto blanco */
}
/* --- Icono de peso en el carrito (añadido vía CSS) --- */
.paccari-product-weight-cart .weight-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E5CCBD'%3E%3Cpath d='M12 2L15 8H9L12 2Z'/%3E%3Cpath d='M5 8H19L18 21H6L5 8Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 6px; /* Espacio entre el icono y el texto "Peso" */
}

/* --- Diseño de 2 Columnas para el Carrito (Escritorio) --- */

@media (min-width: 992px) { /* Aplicamos estos estilos solo en pantallas grandes y solo en la página del carrito */

 /* Limitamos los cambios únicamente a la página del carrito usando la clase de body que añade WooCommerce */
body.woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
  body.woocommerce-cart .woocommerce-message {
    flex: 0 0 100%;
  }


/* Columna izquierda: productos */
body.woocommerce-cart .woocommerce-cart-form {
    flex: 3;
}

/* Columna derecha: totales */
body.woocommerce-cart .cart-collaterals {
    flex: 2;
    margin-left: 20px;
}

body.woocommerce-cart .cart_totals {
        width: 100% !important;
}

}

/* Media query for mobile devices */
@media (max-width: 767px) {
/* Fallback más específico: aseguramos que la etiqueta aparezca justo debajo del importe */
.woocommerce .cart_item .product-price .woocommerce-Price-amount::after,
.woocommerce .cart_item .product-price .amount::after {
    display: inline;
    padding-left: 10px;
}

    
}

/* Minimal cart */
.minimal-cart a {
    display: inline-block;
    padding: 5px 10px;/* Dark background */
    color: #fff; /* White text */
    border-radius: 5px;
    text-decoration: none;
    position: relative;
}

.minimal-cart .dashicons-cart {
    color: #fff;
    font-size: 20px;
    vertical-align: middle;
}

.minimal-cart .dashicons-cart:hover {
    color: #F79C21;
    font-size: 20px;
    vertical-align: middle;
}

.minimal-cart .cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #F79C21; /* Eye-catching color */
    color: #000;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
}

.compact-cart-item .product-name a{
    color: #ffffff;
}

.compact-cart-item .product-name .paccari-product-category a{

    color: #F79C21 !important;

}

/* Carrito en la tienda */
.compact-cart-item {
    background-color: #212121;
    border-radius: 20px;
    padding: 20px;
    color: white;
}

.paccari_compact_car .product-quantity{
    border: 1px solid #ffffff;
    border-radius: 20px;
    display: flex;
    text-align: center;
    justify-content: center;

}

.paccari_compact_car .product-quantity input{
    background-color: #212121;
    color: #F79C21;
    border: none;
    text-align: center;
    width: 50px;
}

.paccari_compact_car .product-name a{
    border-radius: 20px;
    background-color: red;
}

.compact-cart .woocommerce-mini-cart__buttons a{
    background-color: #F79C21; /* Eye-catching color */
    color: #000;
    padding: 10px 20px;
    text-align: center;
}

.compact-cart .woocommerce-mini-cart__buttons a:hover{
    background-color: #000; /* Eye-catching color */
    color: white;
}

.compact-cart .total{
    border-top:#000 solid 1px;
}

.compact-cart .product-remove a.remove{
    font-size: 0; /* Ocultamos la "X" de texto */
    width: 24px;  /* Ancho del icono */
    height: 24px; /* Alto del icono */
    display: block;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F79C21'%3e%3cpath d='M9 3V4H4V6H5V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V6H20V4H15V3H9ZM7 6H17V20H7V6ZM9 8V18H11V8H9ZM13 8V18H15V8H13Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    justify-self: end;
}

.compact-cart .product-remove a:hover{
    background-color: black;
}