/**
* ============================================================================
* [RUBIK] Mini-carrito — diseño con detalle de reserva
* ============================================================================
*
* Reconstruye el diseño original del mini-carrito: miniatura a la izquierda,
* detalle completo de la reserva en el centro (add-ons, fecha, duración,
* configuración del kit) con separadores punteados, y botón de eliminar a la
* derecha. Aplica tanto al panel lateral como al desplegable de escritorio.
*
* ---------------------------------------------------------------------------
* REGLAS DE YELLOWPENCIL QUE NEUTRALIZA
* ---------------------------------------------------------------------------
* YellowPencil genera selectores por POSICIÓN, no por elemento, y eso hace que
* alcancen cosas que no debían:
*
* .oceanwp-cart-sidebar div a { background-color:#08cdff; }
* -> pintaba de cian el nombre del producto y el botón de eliminar
* .current-shop-items-dropdown p a { background-color:#ffffff; }
* -> dejaba "FINALIZAR PEDIDO" en blanco sobre blanco (invisible)
* .oceanwp-cart-sidebar a img { width:107px; max-width:107px; }
* -> desbordaba la miniatura fuera de su columna e invadía el texto
*
* ---------------------------------------------------------------------------
* ESTRUCTURA REAL (oceanwp/woocommerce/cart/mini-cart.php)
* ---------------------------------------------------------------------------
* li.mini_cart_item
* div.owp-grid-wrap
* div.owp-grid.thumbnail > a > img
* div.owp-grid.content > div
* h3 > a (nombre del producto)
* dl.variation (add-ons, fecha, duración…)
* dt / dd > p
* span.quantity (1 × $160.00)
* a.remove.remove_from_cart_button
*
* @package OceanWP_Child
* @version 2.0.0
* @since 2026-07-28
*/
/* ===========================================================================
* 1. CONTENEDOR DEL ÍTEM
* ======================================================================== */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item {
padding: 18px 0 !important;
border-bottom: 1px solid #ececec !important;
list-style: none !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid-wrap,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid-wrap {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px !important;
position: relative !important;
}
/* ===========================================================================
* 2. MINIATURA — columna izquierda, centrada verticalmente
* ======================================================================== */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.thumbnail,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.thumbnail {
flex: 0 0 88px !important;
width: 88px !important;
max-width: 88px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
align-self: center !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.thumbnail a,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.thumbnail a {
display: block !important;
width: 100% !important;
background: none !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* La imagen SIEMPRE dentro de su columna (corrige el width:107px de YellowPencil) */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.thumbnail img,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.thumbnail img {
position: relative !important;
top: auto !important;
left: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border-radius: 2px !important;
transform: none !important;
object-fit: contain !important;
}
/**
* Emojis dentro del detalle de la reserva.
*
* WordPress sustituye los emojis por ![]()
, y WooCommerce aplica
* .woocommerce ul.product_list_widget li img { position:absolute; top:10px; left:0; width:80px; height:80px }
* a CUALQUIER imagen del listado — incluidos esos emojis, que salían disparados
* a la esquina superior izquierda encima del nombre del producto.
*/
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item img.emoji,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item img.emoji {
position: static !important;
top: auto !important;
left: auto !important;
display: inline-block !important;
width: 1.1em !important;
min-width: 0 !important;
max-width: 1.1em !important;
height: 1.1em !important;
margin: 0 .15em !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
vertical-align: -.15em !important;
transform: none !important;
object-fit: contain !important;
}
/* ===========================================================================
* 3. COLUMNA DE CONTENIDO
* ======================================================================== */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.content,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.content {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 34px 0 0 !important; /* hueco a la derecha para la × */
position: relative !important;
}
/* ===========================================================================
* 4. NOMBRE DEL PRODUCTO
* ======================================================================== */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.content h3,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.content h3 {
margin: 0 0 10px !important;
padding: 0 !important;
font-family: 'Roboto', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
letter-spacing: .2px !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.content h3 a,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.content h3 a {
display: block !important;
width: auto !important;
max-width: 100% !important;
padding: 0 !important;
background: none !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #222 !important;
font: inherit !important;
text-decoration: none !important;
text-transform: inherit !important;
white-space: normal !important;
transform: none !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.content h3 a:hover,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.content h3 a:hover {
color: #08cdff !important;
background: none !important;
background-color: transparent !important;
}
/* Ningún interno debe heredar fondos de color */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.content a span,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .owp-grid.content a span {
background: none !important;
background-color: transparent !important;
color: inherit !important;
padding: 0 !important;
height: auto !important;
border-radius: 0 !important;
display: inline !important;
}
/* ===========================================================================
* 5. DETALLE DE LA RESERVA (dl.variation)
* Add-ons, fecha, duración, configuración del kit…
* ======================================================================== */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item dl.variation,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item dl.variation {
display: block !important;
margin: 0 0 10px !important;
padding: 0 !important;
font-family: 'Roboto', sans-serif !important;
}
/* Etiqueta: "Extensiones extras de 10 metros c/u:" */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item dl.variation dt,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item dl.variation dt {
clear: both !important;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
color: #7a7a7a !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
text-transform: none !important;
}
/* Valor: "2 🔌" — con separador punteado debajo */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item dl.variation dd,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item dl.variation dd {
clear: both !important;
float: none !important;
width: auto !important;
margin: 0 0 8px !important;
padding: 0 0 8px !important;
border-bottom: 1px dashed #d5d5d5 !important;
color: #222 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item dl.variation dd:last-child,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item dl.variation dd:last-child {
margin-bottom: 0 !important;
}
/**
* El valor va dentro de un . YellowPencil aplica
* .oceanwp-cart-sidebar div p { border-bottom: dashed #a3a3a3; }
* ("cualquier párrafo dentro de cualquier div"), así que el punteado salía
* DUPLICADO: uno del
y otro del
. Aquí se elimina el del y se
* conserva solo el del
.
*/
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item dl.variation dd p,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item dl.variation dd p {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
}
/* ===========================================================================
* 6. CANTIDAD Y PRECIO
* ======================================================================== */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .quantity,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .quantity {
display: block !important;
margin: 8px 0 0 !important;
padding: 0 !important;
background: none !important;
background-color: transparent !important;
color: #8a8a8a !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .quantity .woocommerce-Price-amount,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item .quantity .woocommerce-Price-amount {
background: none !important;
background-color: transparent !important;
color: #08cdff !important;
font-size: 15px !important;
font-weight: 700 !important;
}
/* ===========================================================================
* 7. BOTÓN DE ELIMINAR (×) — derecha, centrado verticalmente
* ======================================================================== */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item a.remove.remove_from_cart_button,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item a.remove.remove_from_cart_button {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
min-width: 26px !important;
max-width: 26px !important;
height: 26px !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #222 !important;
font-family: inherit !important;
font-size: 22px !important;
font-weight: 300 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
opacity: 1 !important;
transition: color .15s ease !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item a.remove.remove_from_cart_button:hover,
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item a.remove.remove_from_cart_button:focus,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item a.remove.remove_from_cart_button:hover,
.current-shop-items-dropdown ul.cart_list li.mini_cart_item a.remove.remove_from_cart_button:focus {
background: none !important;
background-color: transparent !important;
color: #e2401c !important;
transform: translateY(-50%) !important;
}
/* ===========================================================================
* 8. SUBTOTAL
* ======================================================================== */
/* Fondo transparente: OceanWP le pone una banda gris (#fafafa) por defecto */
.oceanwp-cart-sidebar .widget_shopping_cart_content p.total,
.current-shop-items-dropdown .widget_shopping_cart_content p.total {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
margin: 16px 0 !important;
padding: 16px 0 0 !important;
background: none !important;
background-color: transparent !important;
border: 0 !important;
border-top: 2px dashed #d5d5d5 !important;
font-family: 'Roboto', sans-serif !important;
}
.oceanwp-cart-sidebar .widget_shopping_cart_content p.total strong,
.current-shop-items-dropdown .widget_shopping_cart_content p.total strong {
color: #222 !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .6px !important;
text-transform: uppercase !important;
}
.oceanwp-cart-sidebar .widget_shopping_cart_content p.total .woocommerce-Price-amount,
.current-shop-items-dropdown .widget_shopping_cart_content p.total .woocommerce-Price-amount {
background: none !important;
color: #08cdff !important;
font-size: 20px !important;
font-weight: 700 !important;
}
/* ===========================================================================
* 9. BOTONES "VER CARRITO" / "FINALIZAR PEDIDO"
* Ambos en cian relleno, como en el diseño original.
* Corrige .current-shop-items-dropdown p a { background-color:#fff; }
* que dejaba el botón de finalizar invisible (blanco sobre blanco).
* ======================================================================== */
.oceanwp-cart-sidebar .widget_shopping_cart_content p.buttons,
.current-shop-items-dropdown .widget_shopping_cart_content p.buttons {
display: flex !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
.oceanwp-cart-sidebar .widget_shopping_cart_content p.buttons a.button,
.current-shop-items-dropdown .widget_shopping_cart_content p.buttons a.button {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 14px 10px !important;
background: none !important;
background-color: #08cdff !important;
border: 1px solid #08cdff !important;
border-radius: 2px !important;
color: #ffffff !important;
font-family: 'Roboto', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: .8px !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
transform: none !important;
transition: background-color .15s ease, border-color .15s ease !important;
}
.oceanwp-cart-sidebar .widget_shopping_cart_content p.buttons a.button:hover,
.oceanwp-cart-sidebar .widget_shopping_cart_content p.buttons a.button:focus,
.current-shop-items-dropdown .widget_shopping_cart_content p.buttons a.button:hover,
.current-shop-items-dropdown .widget_shopping_cart_content p.buttons a.button:focus {
background-color: #06b4e0 !important;
border-color: #06b4e0 !important;
color: #ffffff !important;
}
/* ===========================================================================
* 10. RESPONSIVE — móviles
* ======================================================================== */
@media (max-width: 767px) {
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.thumbnail {
flex: 0 0 74px !important;
width: 74px !important;
max-width: 74px !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid-wrap {
gap: 10px !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.content {
padding-right: 30px !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item .owp-grid.content h3 {
font-size: 14px !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item dl.variation dt {
font-size: 12px !important;
}
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item dl.variation dd {
font-size: 13px !important;
}
/* Área táctil mayor para la × */
.oceanwp-cart-sidebar ul.cart_list li.mini_cart_item a.remove.remove_from_cart_button {
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
height: 30px !important;
font-size: 24px !important;
}
.oceanwp-cart-sidebar .widget_shopping_cart_content p.buttons {
flex-wrap: wrap !important;
}
.oceanwp-cart-sidebar .widget_shopping_cart_content p.buttons a.button {
flex: 1 1 45% !important;
font-size: 11px !important;
padding: 14px 8px !important;
}
}