body.ce-kit-1{font-family:"Inter", sans-serif;}a, .elementor a{font-family:"Inter", sans-serif;}body.ce-kit-1 h1{font-family:"Inter", sans-serif;}body.ce-kit-1 h2{font-family:"Inter", sans-serif;}body.ce-kit-1 h3{font-family:"Inter", sans-serif;}body.ce-kit-1 h4{font-family:"Inter", sans-serif;}body.ce-kit-1 h5{font-family:"Noto Sans", sans-serif;}body.ce-kit-1 h6{font-family:"Noto Sans", sans-serif;}body.ce-kit-1 .ce-display-small{font-family:"Inter", sans-serif;}body.ce-kit-1 #content{background-color:#FBF9FA;}body.ce-kit-1 .container{width:1540px;max-width:100%;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1540px;}/* Start custom CSS for page-settings */@media (min-width: 1200px) {
  .container {
    width: 1540px !important;
    max-width: 100%;
  }
}

.ets_mm_megamenu_content_content {
  background: #FBF9FA !important;
}


.page-cart ul.mm_menus_ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* carrito */

/* ==========================================================================
   1. CONTENEDORES PRINCIPALES (Efecto Tarjeta Limpia)
   ========================================================================== */

/* Quitamos fondos grises o bordes raros del contenedor general */
#main .cart-grid {
    background: transparent !important;
    display: flex;
    flex-wrap: wrap;
}

/* Contenedor del listado de productos (Izquierda) */
#main .cart-grid-body {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
}

/* Reseteamos la "card" interna de PrestaShop para que no duplique fondos ni bordes */
#main .cart-grid-body .card.cart-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Contenedor del Resumen del Pedido (Derecha) */
#main .cart-grid-right .card.cart-summary {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
}

/* Quitar la línea divisoria dura debajo del título "Carrito" */
#main .cart-container .separator {
    border-top: 1px solid #f1f5f9 !important;
    margin: 15px 0 !important;
}


/* ==========================================================================
   2. FILA DEL PRODUCTO (Alineación horizontal limpia)
   ========================================================================== */

/* Estilo para cada fila de producto en la lista */
#main .cart-item {
    padding: 20px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
#main .cart-item:last-child {
    border-bottom: none !important;
}

/* Forzar que los elementos internos se alineen verticalmente en el centro */
#main .product-line-grid {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
}

/* Nombre del producto y precio base */
#main .product-line-grid-body .label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    text-decoration: none !important;
}
#main .product-line-grid-body .current-price .price {
    color: #4a5568 !important;
    font-size: 15px !important;
}

/* Ocultar el salto de línea <br> que mete PrestaShop y deforma la fila */
#main .product-line-grid-body br {
    display: none !important;
}


/* ==========================================================================
   3. SELECTOR DE CANTIDAD, PRECIO TOTAL Y ELIMINAR
   ========================================================================== */

/* Input de cantidad y botones Touchspin al estilo Figma */
#main .bootstrap-touchspin {
    position: relative !important;
    max-width: 90px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

#main .js-cart-line-product-quantity.form-control {
    height: 38px !important;
    text-align: center !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* Ajuste fino para los minobotones de + y - nativos */
#main .input-group-btn-vertical {
    background: #f8fafc !important;
    border-left: 1px solid #e2e8f0 !important;
}
#main .input-group-btn-vertical .btn-touchspin {
    height: 19px !important;
    border: none !important;
    padding: 0 8px !important;
}

/* Precio total del producto (columna derecha) */
#main .product-line-grid-right .product-price strong {
    font-size: 16px !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Icono de papelera para eliminar producto */
#main .remove-from-cart i {
    color: #a0aec0 !important;
    transition: color 0.2s ease;
}
#main .remove-from-cart i:hover {
    color: #e53e3e !important;
}


/* ==========================================================================
   4. BLOQUE DERECHO: BOTONES Y CUPÓN (Resumen del pedido)
   ========================================================================== */

/* Botón principal: Finalizar Compra (Amarillo Figma) */
#main .cart-detailed-actions .btn-primary {
    background-color: #f1b80c !important;
    border-color: #f1b80c !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
}
#main .cart-detailed-actions .btn-primary:hover {
    background-color: #dca607 !important;
    border-color: #dca607 !important;
}

/* Botón secundario: Continuar Comprando (Abajo del bloque izquierdo) */
#main .cart-grid-body ~ a.label, 
#main a.label[href*="fotocinecolor.soporteserver.com/"] {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    margin-top: 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
#main .cart-grid-body ~ a.label:hover {
    background: #f8fafc !important;
    color: #000000 !important;
    border-color: #94a3b8 !important;
}

/* Input y botón de código promocional */
#main .promo-code form {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px;
}
#main .promo-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    flex-grow: 1 !important;
}
#main .promo-code rgba, #main .promo-code .btn-primary {
    background: #475569 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
}


/* ==========================================================================
   DISEÑO FINAL COMPACTO COLUMNA DERECHA CARRITO - FONT: INTER (PIXEL-PERFECT)
   ========================================================================== */

/* Contenedor General de la Tarjeta */
.cart-grid-right .cart-summary {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 28px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04) !important;
    border: none !important;
}

/* Título Principal */
.cart-summary .summary-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 22px !important;
    text-transform: none !important;
    letter-spacing: -0.3px !important;
}

/* --- ESTILIZACIÓN DEL BLOQUE DE DESCUENTO --- */
.cart-summary .custom-promo-wrapper {
    background-color: #f8fafc !important; /* Gris limpio de Figma */
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    border: none !important;
    display: block !important;
}

/* Forzar visualización estable del formulario */
.cart-summary .custom-promo-wrapper .promo-code.collapse,
.cart-summary .custom-promo-wrapper #promo-code {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ocultar el enlace de texto antiguo de PrestaShop */
.cart-summary .custom-promo-wrapper .promo-code-button,
.cart-summary .custom-promo-wrapper [data-target="#promo-code"] {
    display: none !important;
}

/* Alineación limpia del Input y el Botón */
.cart-summary .custom-promo-wrapper form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Label superior con el icono estilo Figma */
.cart-summary .custom-promo-wrapper form::before {
    content: "🏷️  Código promocional" !important;
    display: block !important;
    width: 100% !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
}

/* Limpieza de párrafos o labels nativos residuales */
.cart-summary .custom-promo-wrapper .promo-input-label,
.cart-summary .custom-promo-wrapper form > p {
    display: none !important;
}

/* Campo de Texto (Input) */
.cart-summary .custom-promo-wrapper input.promo-input {
    flex: 1 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #333333 !important;
    height: 40px !important;
    margin: 0 !important;
    width: auto !important;
}

/* Botón "Aplicar" */
.cart-summary .custom-promo-wrapper button[type="submit"] {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: none !important;
    padding: 0 16px !important;
    height: 40px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.cart-summary .custom-promo-wrapper button[type="submit"]:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* --- SECCIÓN DE TOTALES --- */
.cart-summary .cart-detailed-subtotals {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.cart-summary .cart-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
}

.cart-summary .cart-summary-line .value {
    color: #1e293b !important;
    font-weight: 500 !important;
}

/* Fila de Total Final */
.cart-summary .cart-summary-line.cart-total {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 18px !important;
    margin-top: 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

.cart-summary .cart-summary-line.cart-total .label,
.cart-summary .cart-summary-line.cart-total .value {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

/* Limpieza de textos de impuestos redundantes de PrestaShop */
.cart-summary .cart-summary-totals .aeat-tax-notification,
.cart-summary .cart-detailed-totals > div:last-child {
    display: none !important;
}

/* --- BOTONES DE ACCIÓN PRINCIPALES --- */
.cart-summary .cart-detailed-actions {
    padding: 0 !important;
    margin-top: 24px !important;
}

/* Botón: Proceder al Checkout */
.cart-summary .cart-detailed-actions .btn-primary {
    display: block !important;
    width: 100% !important;
    background-color: #f1b80a !important; /* Amarillo Figma */
    color: #000000 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 13px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: -0.2px !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
}

.cart-summary .cart-detailed-actions .btn-primary:hover {
    background-color: #e0aa08 !important;
}

/* Botón: Continuar Comprando */
.btn-checkout-secondary {
    display: block !important;
    width: 100% !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 13px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

.btn-checkout-secondary:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

.cart-summary-line::after {
  content: initial !important;
}

.cart-summary .cart-summary-line {
  display: block !important;
  
}/* End custom CSS */