/* =====================================================================
PUERTO FANTASY · NEON GEEK SKIN
Capa de estilos que se carga DESPUÉS de theme.css y custom.css.
Para volver al diseño anterior basta con borrar este archivo o quitar
la línea de templates/_partials/head.tpl
===================================================================== */
:root {
--pf-bg: #07061a; /* fondo general */
--pf-bg-2: #0e0c2b; /* paneles */
--pf-bg-3: #17143d; /* paneles elevados / hover */
--pf-line: rgba(140, 120, 255, .22);
--pf-text: #e9e7ff;
--pf-muted: #a7a3d6;
--pf-pink: #ff2e88; /* rosa del logo, versión neón */
--pf-cyan: #20e3ff;
--pf-violet: #8b5cff;
--pf-lime: #b6ff3b;
--pf-glow-pink: 0 0 6px rgba(255, 46, 136, .8), 0 0 18px rgba(255, 46, 136, .45);
--pf-glow-cyan: 0 0 6px rgba(32, 227, 255, .8), 0 0 18px rgba(32, 227, 255, .45);
--pf-radius: 14px;
--pf-display: "Chakra Petch", "Montserrat", sans-serif;
--pf-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
/* ---------- Base ---------- */
html, body { background: var(--pf-bg) !important; }
body {
color: var(--pf-text) !important;
font-family: var(--pf-body) !important;
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(139, 92, 255, .18), transparent 60%),
radial-gradient(900px 500px at 100% 10%, rgba(255, 46, 136, .12), transparent 60%),
linear-gradient(rgba(32, 227, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(32, 227, 255, .035) 1px, transparent 1px) !important;
background-size: auto, auto, 40px 40px, 40px 40px !important;
background-attachment: fixed !important;
}
main, #wrapper, #content-wrapper, #main, .page-content,
#content, .page-home, section#wrapper { background: transparent !important; color: var(--pf-text); }
/* Contenedor principal opaco: tapa restos de módulos que quedan detrás (p.ej. banner de cookies) */
.ht-main-content {
position: relative;
z-index: 1;
background-color: var(--pf-bg) !important;
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(139, 92, 255, .18), transparent 60%),
radial-gradient(900px 500px at 100% 10%, rgba(255, 46, 136, .12), transparent 60%),
linear-gradient(rgba(32, 227, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(32, 227, 255, .035) 1px, transparent 1px) !important;
background-size: auto, auto, 40px 40px, 40px 40px !important;
background-attachment: fixed !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--pf-display) !important;
color: #fff !important;
letter-spacing: .02em;
}
p, li, span, label, dt, dd, td, th, small { color: inherit; }
a { color: var(--pf-cyan); transition: color .2s, text-shadow .2s; }
a:hover, a:focus { color: var(--pf-pink) !important; text-shadow: var(--pf-glow-pink); text-decoration: none; }
hr { border-color: var(--pf-line) !important; }
::selection { background: var(--pf-pink); color: #fff; }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pf-bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--pf-pink), var(--pf-violet)); border-radius: 10px; }
/* ---------- Header ---------- */
#header, #header .header-nav, #header .header-top, .header-banner {
background: rgba(7, 6, 26, .92) !important;
color: var(--pf-text) !important;
border: 0 !important;
}
#header .header-nav { border-bottom: 1px solid var(--pf-line) !important; }
#header .header-nav .header-wrapper { border: 0 !important; }
#header .header-nav a, #header .header-nav span, #header .header-nav i,
#header .user-info a, #header .user-info span { color: var(--pf-muted) !important; }
#header .header-nav a:hover { color: var(--pf-cyan) !important; text-shadow: var(--pf-glow-cyan); }
/* Logo con halo neón */
#_desktop_logo img, #_mobile_logo img, .logo {
filter: drop-shadow(0 0 6px rgba(255, 46, 136, .65)) drop-shadow(0 0 16px rgba(32, 227, 255, .25));
transition: filter .3s;
}
#_desktop_logo:hover img { filter: drop-shadow(0 0 10px rgba(255, 46, 136, .9)) drop-shadow(0 0 26px rgba(32, 227, 255, .45)); }
/* Buscador */
#search_widget form input[type=text], .search-widget form input[type=text] {
background: var(--pf-bg-2) !important;
color: #fff !important;
border: 1px solid var(--pf-line) !important;
border-radius: 999px 0 0 999px !important;
font-family: var(--pf-body);
transition: border-color .2s, box-shadow .2s;
}
#search_widget form input[type=text]::placeholder { color: var(--pf-muted) !important; }
#search_widget form input[type=text]:focus {
border-color: var(--pf-cyan) !important;
box-shadow: 0 0 0 1px var(--pf-cyan), var(--pf-glow-cyan) !important;
outline: 0;
}
#search_widget form button[type=submit], .search-widget form button[type=submit] {
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
border: 0 !important;
border-radius: 0 999px 999px 0 !important;
color: #fff !important;
box-shadow: var(--pf-glow-pink);
}
#search_widget form button[type=submit] i { color: #fff !important; }
.ui-autocomplete.ui-menu, .ui-autocomplete { background: var(--pf-bg-2) !important; border: 1px solid var(--pf-line) !important; }
.ui-autocomplete .ui-menu-item a { color: var(--pf-text) !important; }
.ui-autocomplete .ui-menu-item a:hover, .ui-autocomplete .ui-state-focus { background: var(--pf-bg-3) !important; }
/* Carrito */
#_desktop_cart .blockcart, #_mobile_cart .blockcart, .blockcart, .blockcart a, .blockcart i, .blockcart .header {
background: transparent !important;
color: var(--pf-cyan) !important;
}
.blockcart i { text-shadow: var(--pf-glow-cyan); }
.blockcart .cart-products-count, .cart-products-count {
background: var(--pf-pink) !important;
color: #fff !important;
box-shadow: var(--pf-glow-pink);
font-family: var(--pf-display);
font-weight: 700;
}
/* Menú principal */
.displaytopmenu, .top-navigation-menu, .top-navigation-menu-inner, #_desktop_top_menu {
background: linear-gradient(90deg, #120a3a 0%, #1b0d4a 50%, #120a3a 100%) !important;
border: 0 !important;
}
.displaytopmenu {
position: relative;
border-top: 1px solid rgba(32, 227, 255, .35) !important;
border-bottom: 1px solid rgba(255, 46, 136, .5) !important;
box-shadow: 0 0 22px rgba(255, 46, 136, .25), inset 0 0 30px rgba(139, 92, 255, .2);
}
#top-menu[data-depth="0"] > li > a, .top-menu[data-depth="0"] > li > a {
font-family: var(--pf-display) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .08em;
color: #fff !important;
position: relative;
transition: color .2s, text-shadow .2s;
}
#top-menu[data-depth="0"] > li > a::after {
content: "";
position: absolute; left: 12%; right: 12%; bottom: 8px; height: 2px;
background: linear-gradient(90deg, var(--pf-cyan), var(--pf-pink));
box-shadow: var(--pf-glow-pink);
transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
#top-menu[data-depth="0"] > li:hover > a, #top-menu[data-depth="0"] > li > a:hover {
color: var(--pf-cyan) !important;
text-shadow: var(--pf-glow-cyan);
background: transparent !important;
}
#top-menu[data-depth="0"] > li:hover > a::after { transform: scaleX(1); }
/* Submenús desplegables */
.top-menu .sub-menu, .top-navigation-menu .popover, #_desktop_top_menu .sub-menu {
background: rgba(14, 12, 43, .97) !important;
border: 1px solid var(--pf-line) !important;
border-top: 2px solid var(--pf-pink) !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 46, 136, .2) !important;
border-radius: 0 0 var(--pf-radius) var(--pf-radius);
}
.top-menu .sub-menu a, .top-menu[data-depth="1"] a, .top-menu[data-depth="2"] a { color: var(--pf-text) !important; background: transparent !important; }
.top-menu .sub-menu a:hover, .top-menu[data-depth="1"] a:hover { color: var(--pf-pink) !important; text-shadow: var(--pf-glow-pink); }
/* Menú móvil */
#mobile_top_menu_wrapper, #mobile_top_menu_wrapper .top-menu, .mobile .top-logo { background: var(--pf-bg-2) !important; }
#mobile_top_menu_wrapper a, #mobile_top_menu_wrapper span, #mobile_top_menu_wrapper i { color: var(--pf-text) !important; }
#menu-icon i, #header .mobile i { color: var(--pf-cyan) !important; }
#header .mobile { background: var(--pf-bg) !important; }
/* ---------- Slider ---------- */
.image-slider-block { position: relative; }
.image-slider-block::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--pf-cyan), var(--pf-pink), transparent);
box-shadow: 0 0 14px var(--pf-pink);
}
.carousel .carousel-control .icon-next, .carousel .carousel-control .icon-prev {
color: #fff !important;
background: rgba(7, 6, 26, .55) !important;
border: 1px solid var(--pf-cyan);
border-radius: 50%;
box-shadow: var(--pf-glow-cyan);
}
.carousel .carousel-indicators li { border-color: var(--pf-cyan) !important; }
.carousel .carousel-indicators .active { background: var(--pf-pink) !important; box-shadow: var(--pf-glow-pink); }
/* ---------- Títulos de sección ---------- */
.section-title h2, .products-section-title, .featured-products h2.title, .brand-section .title {
font-family: var(--pf-display) !important;
font-size: clamp(26px, 3.4vw, 40px) !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
color: #fff !important;
text-shadow: 0 0 4px #fff, 0 0 12px var(--pf-pink), 0 0 28px var(--pf-pink), 0 0 48px rgba(255, 46, 136, .6);
animation: pf-flicker 6s infinite;
}
.section-title h2::before {
background: var(--pf-cyan) !important; box-shadow: var(--pf-glow-cyan);
width: 70px !important; right: -40px !important;
}
.section-title h2::after {
background: var(--pf-pink) !important; box-shadow: var(--pf-glow-pink);
width: 70px !important; right: 40px !important;
}
@keyframes pf-flicker {
0%, 91%, 95%, 100% { opacity: 1; }
92% { opacity: .55; }
93% { opacity: 1; }
94% { opacity: .7; }
}
/* Alterna color de títulos: una sección rosa, la siguiente cian */
.featured-products:nth-of-type(even) .section-title h2 {
text-shadow: 0 0 4px #fff, 0 0 12px var(--pf-cyan), 0 0 28px var(--pf-cyan), 0 0 48px rgba(32, 227, 255, .6);
}
.featured-products, .brand-section, .new-product { background: transparent !important; }
/* ---------- Tarjetas de producto ---------- */
.product-miniature .thumbnail-container,
#products .thumbnail-container,
.featured-products .thumbnail-container,
.products-grid .products .product-item .product-miniature .thumbnail-container,
#products .products-grid .products .product-item .product-miniature .thumbnail-container {
background: linear-gradient(180deg, var(--pf-bg-2), #0a0920) !important;
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.product-miniature:hover .thumbnail-container,
#products .product-miniature:hover .thumbnail-container,
.featured-products .product-miniature:hover .thumbnail-container {
transform: translateY(-6px);
border-color: var(--pf-pink) !important;
box-shadow: 0 0 0 1px var(--pf-pink), 0 0 22px rgba(255, 46, 136, .45), 0 18px 40px rgba(0, 0, 0, .5) !important;
}
/* Zona de imagen: panel claro para que las fotos con fondo blanco se vean bien */
.product-miniature .product-image-block,
.products-grid .products .product-item .product-miniature .thumbnail-container .product-image-block,
#products .products-grid .products .product-item .product-miniature .thumbnail-container .product-image-block {
background: #fff !important;
margin: 10px 10px 0 !important;
border-radius: calc(var(--pf-radius) - 4px);
overflow: hidden;
position: relative;
}
.product-miniature .product-thumbnail img { transition: transform .4s ease; }
.product-miniature:hover .product-thumbnail img { transform: scale(1.05); }
.product-miniature .product-description,
#products .product-description, .featured-products .product-description {
background: transparent !important;
}
.product-miniature .product-title, .product-miniature .product-title a,
#products .product-title a, .featured-products .product-title a {
color: var(--pf-text) !important;
font-family: var(--pf-body) !important;
font-weight: 600 !important;
}
.product-miniature .product-title a:hover { color: var(--pf-cyan) !important; text-shadow: var(--pf-glow-cyan); }
.product-miniature .product-short-desc, .product-miniature .product-short-desc * { color: var(--pf-muted) !important; }
.product-miniature .price, #products .price, .featured-products .price,
.product-price-and-shipping .price {
font-family: var(--pf-display) !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
color: var(--pf-cyan) !important;
text-shadow: 0 0 8px rgba(32, 227, 255, .6);
}
.product-miniature .regular-price, #products .regular-price, .regular-price {
color: var(--pf-muted) !important;
text-decoration: line-through;
}
/* Etiquetas (Nuevo, Oferta, -20%...) */
.product-flags li.product-flag, .product-flag {
font-family: var(--pf-display) !important;
font-weight: 700 !important;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 6px !important;
background: var(--pf-pink) !important;
color: #fff !important;
box-shadow: var(--pf-glow-pink);
}
.product-flag.new { background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important; }
.product-flag.discount, .product-flag.discount-percentage, .product-flag.on-sale {
background: var(--pf-lime) !important; color: #0b0b1a !important;
box-shadow: 0 0 6px rgba(182, 255, 59, .8), 0 0 16px rgba(182, 255, 59, .4);
}
.product-flag.out_of_stock, .product-flag.out-of-stock { background: #3a3560 !important; box-shadow: none; }
/* Capa de acciones al pasar el ratón */
.highlighted-informations, #products .highlighted-informations, .featured-products .highlighted-informations {
background: linear-gradient(0deg, rgba(7, 6, 26, .92), rgba(7, 6, 26, 0)) !important;
}
.highlighted-informations .quick-view, .highlighted-informations .quick-view i {
color: #fff !important;
}
.highlighted-informations .quick-view {
background: var(--pf-bg-3) !important;
border: 1px solid var(--pf-cyan) !important;
box-shadow: var(--pf-glow-cyan);
}
/* ---------- Botones ---------- */
.btn-primary, .btn-primary:visited, button.btn-primary, a.btn-primary,
.add-to-cart, .product-add-to-cart .add-to-cart {
font-family: var(--pf-display) !important;
font-weight: 700 !important;
letter-spacing: .06em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
border: 0 !important;
color: #fff !important;
border-radius: 10px !important;
box-shadow: 0 0 10px rgba(255, 46, 136, .45) !important;
transition: transform .15s, box-shadow .2s, filter .2s !important;
}
.btn-primary:hover, .btn-primary:focus, .add-to-cart:hover {
filter: brightness(1.15);
transform: translateY(-1px);
box-shadow: 0 0 0 1px #fff3, 0 0 16px rgba(255, 46, 136, .8), 0 0 34px rgba(139, 92, 255, .5) !important;
color: #fff !important;
}
.btn-primary:disabled, .btn-primary.disabled, .btn-primary.store-only {
background: #2a2552 !important; box-shadow: none !important; color: var(--pf-muted) !important; filter: none; transform: none;
}
.btn-secondary, .btn-tertiary, .btn-default, .btn-outline {
background: transparent !important;
color: var(--pf-cyan) !important;
border: 1px solid var(--pf-cyan) !important;
border-radius: 10px !important;
font-family: var(--pf-display);
font-weight: 700;
}
.btn-secondary:hover, .btn-tertiary:hover, .btn-default:hover {
background: rgba(32, 227, 255, .1) !important; box-shadow: var(--pf-glow-cyan) !important; color: #fff !important;
}
/* ---------- Formularios ---------- */
.form-control, input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], textarea, select, .custom-select,
.bootstrap-touchspin input, .input-group .form-control {
background-color: var(--pf-bg-2) !important;
color: var(--pf-text) !important;
border: 1px solid var(--pf-line) !important;
border-radius: 8px;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
border-color: var(--pf-cyan) !important;
box-shadow: 0 0 0 1px var(--pf-cyan), 0 0 12px rgba(32, 227, 255, .35) !important;
outline: 0 !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #7d78b0 !important; }
.form-control-label, label { color: var(--pf-text) !important; }
.bootstrap-touchspin .btn-touchspin, .input-group-btn-vertical .btn {
background: var(--pf-bg-3) !important; color: var(--pf-cyan) !important; border-color: var(--pf-line) !important;
}
.custom-checkbox input[type=checkbox] + span, .custom-radio {
background: var(--pf-bg-2) !important; border-color: var(--pf-cyan) !important;
}
.custom-radio input[type=radio]:checked + span { background: var(--pf-pink) !important; box-shadow: var(--pf-glow-pink); }
.custom-checkbox input[type=checkbox] + span .checkbox-checked { color: var(--pf-pink) !important; }
/* ---------- Paneles genéricos (categoría, cuenta, checkout, CMS) ---------- */
.card, .card-block, .block-category, #js-product-list-top, #js-product-list-header,
.products-selection, #left-column .block, #right-column .block, #search_filters,
#search_filters_wrapper, .block-categories, .page-content.page-cms, .cart-grid-body .card,
.cart-summary, .checkout-step, .modal-content, .dropdown-menu, .account-list a, #customer-form,
.contact-rich, .contact-form, .page-my-account #content .links a, .order-confirmation-table,
.product-information .tabs, .tabs, .product-customization .card, #blockcart-modal .modal-body,
.block-reassurance, #block-reassurance, .blockreassurance_product, .ht-blog, .facet,
.pagination, .page-footer, .page-header, .notifications-container .alert, .table, .cms-block,
.featured-products.clearfix, .product-accessories, #product-modal .modal-content {
background-color: var(--pf-bg-2) !important;
color: var(--pf-text) !important;
border-color: var(--pf-line) !important;
}
.card, .block-category, #search_filters, .block-categories, .cart-summary, .checkout-step,
.modal-content, .tabs, #left-column .block, #right-column .block {
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
}
.page-header h1, .block-category h1, #js-product-list-header h1 {
text-shadow: 0 0 10px rgba(255, 46, 136, .6);
}
.block-category .block-category-inner, #category-description, #category-description * { color: var(--pf-text) !important; background: transparent !important; }
.card-header, .card-footer, .modal-header, .modal-footer {
background: var(--pf-bg-3) !important; border-color: var(--pf-line) !important; color: var(--pf-text) !important;
}
.modal-header .close, .close { color: #fff !important; opacity: .8; text-shadow: none; }
.table, .table td, .table th, .table thead th { border-color: var(--pf-line) !important; color: var(--pf-text) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .03) !important; }
.thead-default th { background: var(--pf-bg-3) !important; }
/* Columna lateral / filtros */
#left-column .block .title, #search_filters .h6, #search_filters .facet .facet-title,
.block-categories .h6, .block-categories a.h6, .text-uppercase.h6 {
color: #fff !important;
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .08em;
}
.block-categories a, .block-categories .collapse-icons i, #search_filters .facet-label a,
#search_filters .facet-label, .facet .magnitude { color: var(--pf-muted) !important; }
.block-categories a:hover, #search_filters .facet-label a:hover { color: var(--pf-cyan) !important; }
.ui-slider, .ui-widget-content { background: var(--pf-bg-3) !important; border-color: var(--pf-line) !important; }
.ui-slider .ui-slider-range { background: linear-gradient(90deg, var(--pf-cyan), var(--pf-pink)) !important; }
.ui-slider .ui-slider-handle { background: #fff !important; border: 2px solid var(--pf-pink) !important; box-shadow: var(--pf-glow-pink); }
#js-active-search-filters, .active_filters { background: var(--pf-bg-3) !important; }
.active_filters .filter-block { background: var(--pf-bg-2) !important; color: var(--pf-text) !important; border: 1px solid var(--pf-pink); }
/* Orden / selector */
.products-sort-order .select-title, .brands-sort .select-title, .suppliers-sort .select-title {
background: var(--pf-bg-3) !important; color: var(--pf-text) !important; border: 1px solid var(--pf-line) !important;
}
.dropdown-menu .dropdown-item, .products-sort-order .select-list { color: var(--pf-text) !important; background: transparent !important; }
.dropdown-menu .dropdown-item:hover, .products-sort-order .select-list:hover { background: var(--pf-bg-3) !important; color: var(--pf-pink) !important; }
.showing, .total-products p, .sort-by { color: var(--pf-muted) !important; }
/* Paginación */
.pagination .page-list { background: transparent !important; box-shadow: none !important; }
.pagination a, .pagination .page-list li a { color: var(--pf-text) !important; }
.pagination .current a, .pagination .page-list li.current a {
color: #fff !important; background: var(--pf-pink) !important; border-radius: 6px; box-shadow: var(--pf-glow-pink);
}
/* Migas de pan */
.breadcrumb, nav.breadcrumb { background: transparent !important; }
.breadcrumb li, .breadcrumb li a, .breadcrumb li::after { color: var(--pf-muted) !important; }
.breadcrumb li:last-child, .breadcrumb li:last-child a { color: var(--pf-cyan) !important; }
/* ---------- Página de producto ---------- */
#product #content, .product-cover, .product-images > li.thumb-container > .thumb,
.images-container .product-images img, .product-cover img {
background: #fff !important;
border-radius: var(--pf-radius);
}
.product-cover { box-shadow: 0 0 0 1px var(--pf-line), 0 0 30px rgba(139, 92, 255, .25) !important; overflow: hidden; }
.product-images > li.thumb-container > .thumb.selected, .product-images > li.thumb-container > .thumb:hover {
border: 2px solid var(--pf-pink) !important; box-shadow: var(--pf-glow-pink);
}
.product-cover .layer { background: rgba(7, 6, 26, .5) !important; }
.product-cover .layer .zoom-in { color: var(--pf-cyan) !important; }
#product h1.h1, .product-detail-name, #main h1.h1 {
color: #fff !important;
text-shadow: 0 0 12px rgba(255, 46, 136, .5);
}
.product-prices .current-price, .product-prices .current-price span, .product-price, .current-price-value {
font-family: var(--pf-display) !important;
color: var(--pf-cyan) !important;
text-shadow: var(--pf-glow-cyan);
font-weight: 700 !important;
}
.product-prices .discount, .discount-percentage, .discount-amount {
background: var(--pf-lime) !important; color: #0b0b1a !important; border-radius: 6px;
}
.product-prices .tax-shipping-delivery-label, .product-information, .product-description,
.product-description *, #product-details, #product-details *, .product-features dl.data-sheet dd,
.product-features dl.data-sheet dt, .product-quantities, .product-reference, .product-manufacturer {
color: var(--pf-text) !important;
}
.product-features dl.data-sheet dd.value:nth-of-type(odd), .product-features dl.data-sheet dt.name:nth-of-type(odd),
.product-features dl.data-sheet dd, .product-features dl.data-sheet dt {
background: var(--pf-bg-3) !important;
}
.tabs .nav-tabs { border-color: var(--pf-line) !important; }
.tabs .nav-tabs .nav-link {
color: var(--pf-muted) !important; font-family: var(--pf-display); text-transform: uppercase; letter-spacing: .06em;
background: transparent !important; border: 0 !important;
}
.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover {
color: #fff !important; border-bottom: 2px solid var(--pf-pink) !important; text-shadow: var(--pf-glow-pink);
}
.tab-content, .tab-pane { background: transparent !important; color: var(--pf-text) !important; }
#product-availability, .product-availability { color: var(--pf-lime) !important; }
#product-availability .product-unavailable, #product-availability .product-last-items { color: #ffb020 !important; }
.social-sharing li { background-color: var(--pf-bg-3) !important; border-radius: 50%; box-shadow: 0 0 0 1px var(--pf-line); }
/* ---------- Carrito / checkout ---------- */
.cart-item, .cart-overview .cart-item, .cart-summary-line, .cart-detailed-totals, .cart-summary-products,
.block-promo, .promo-code, .checkout-step .step-title, .checkout-step .content, .delivery-option,
.address-item, .address-item .address-footer, .order-options, .payment-options {
background: transparent !important; color: var(--pf-text) !important; border-color: var(--pf-line) !important;
}
.checkout-step.-current .step-title, .checkout-step .step-title { font-family: var(--pf-display) !important; color: #fff !important; }
.checkout-step.-current { box-shadow: 0 0 0 1px var(--pf-pink), 0 0 22px rgba(255, 46, 136, .25) !important; }
.step-number { background: var(--pf-pink) !important; color: #fff !important; }
.address-item.selected { border: 2px solid var(--pf-cyan) !important; box-shadow: var(--pf-glow-cyan); }
.delivery-option { background: var(--pf-bg-3) !important; border-radius: 10px; }
.cart-summary-line .value, .cart-total .value { color: var(--pf-cyan) !important; font-family: var(--pf-display); }
.cart-summary-line.cart-total, .cart-total { background: var(--pf-bg-3) !important; }
.label, .product-line-info .label { color: var(--pf-text) !important; }
/* Modal "Producto añadido" */
#blockcart-modal .modal-header { background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important; }
#blockcart-modal .modal-title, #blockcart-modal .modal-title i { color: #fff !important; }
#blockcart-modal .cart-content, #blockcart-modal .product-name { color: var(--pf-text) !important; }
/* Alertas */
.alert-info { background: rgba(32, 227, 255, .1) !important; border-color: var(--pf-cyan) !important; color: var(--pf-text) !important; }
.alert-success { background: rgba(182, 255, 59, .1) !important; border-color: var(--pf-lime) !important; color: var(--pf-text) !important; }
.alert-warning { background: rgba(255, 176, 32, .1) !important; border-color: #ffb020 !important; color: var(--pf-text) !important; }
.alert-danger { background: rgba(255, 46, 136, .12) !important; border-color: var(--pf-pink) !important; color: var(--pf-text) !important; }
/* ---------- Marcas ---------- */
.brand-section .brand-content img, .brand-section img {
background: #fff;
border-radius: 10px;
padding: 6px;
filter: grayscale(1) opacity(.75);
transition: filter .25s, box-shadow .25s, transform .25s;
}
.brand-section .brand-content a:hover img, .brand-section img:hover {
filter: none;
transform: translateY(-3px);
box-shadow: 0 0 0 2px var(--pf-cyan), var(--pf-glow-cyan);
}
/* ---------- Bloques de reaseguro / banners ---------- */
.banner img, .ps-banner img, .ht-banner img, .advertising-block img {
border-radius: var(--pf-radius);
box-shadow: 0 0 0 1px var(--pf-line), 0 0 26px rgba(139, 92, 255, .3);
}
/* ---------- Footer ---------- */
#footer, #footer .footer-before, #footer .footer-container, #footer .footer-bottom {
background: #050414 !important;
color: var(--pf-muted) !important;
border: 0 !important;
}
#footer { position: relative; margin-top: 60px; }
#footer::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
background: linear-gradient(90deg, var(--pf-cyan), var(--pf-violet), var(--pf-pink), var(--pf-cyan));
background-size: 300% 100%;
box-shadow: 0 0 18px rgba(255, 46, 136, .7);
animation: pf-slide 8s linear infinite;
}
@keyframes pf-slide { from { background-position: 0 0; } to { background-position: 300% 0; } }
#footer .footer-title, #footer h3, #footer .h3, #footer h4, #footer .block-contact .footer-title,
.footer-container .h3, .footer-container h3 {
color: #fff !important;
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .1em;
text-shadow: 0 0 10px rgba(32, 227, 255, .6);
}
#footer a, #footer li, #footer span, #footer p, .footer-container li a, .block-contact { color: var(--pf-muted) !important; }
#footer a:hover, .footer-container li a:hover { color: var(--pf-pink) !important; text-shadow: var(--pf-glow-pink); padding-left: 3px; transition: all .2s; }
#footer .footer-bottom { border-top: 1px solid var(--pf-line) !important; }
#footer .footer-bottom, #footer .footer-bottom * { color: #7d78b0 !important; }
#footer .collapse-icons i { color: var(--pf-cyan) !important; }
/* Newsletter */
.block_newsletter, .block_newsletter form, #footer .block_newsletter { background: transparent !important; }
.block_newsletter input[type=email], .block_newsletter input[type=text] {
background: var(--pf-bg-2) !important; border: 1px solid var(--pf-cyan) !important; color: #fff !important;
border-radius: 999px !important; padding-left: 18px !important;
}
.block_newsletter input[type=submit], .block_newsletter .btn {
border-radius: 999px !important;
}
.block_newsletter p, .block_newsletter #block-newsletter-label { color: var(--pf-text) !important; }
/* Redes sociales */
.block-social ul li, .social-sharing ul li {
background-color: var(--pf-bg-3) !important;
border-radius: 50% !important;
box-shadow: 0 0 0 1px var(--pf-line);
transition: box-shadow .2s, transform .2s;
}
.block-social ul li:hover { box-shadow: 0 0 0 1px var(--pf-pink), var(--pf-glow-pink); transform: translateY(-2px); }
/* Volver arriba */
#back-top a, .back-top, #scroll-top, .scroll-top, #back-to-top {
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
color: #fff !important;
border-radius: 50% !important;
box-shadow: var(--pf-glow-pink) !important;
}
/* Banner de cookies: solo los botones (el contenedor lo gestiona el módulo) */
.ets_cookie_banber_block .ets-cb-btn-not-ok { background: transparent !important; color: var(--pf-cyan) !important; border: 1px solid var(--pf-cyan) !important; box-shadow: none !important; }
/* Blog (xipblog) */
.xipblog, .blog_post, .xipblog .blog_post_content, .home_blog_post_area .blog_post {
background: var(--pf-bg-2) !important; color: var(--pf-text) !important; border-radius: var(--pf-radius);
}
/* Imágenes del slider por encima del fondo de rejilla */
#carousel img { display: block; }
/* ---------- Accesibilidad: sin animaciones si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ---------- Móvil ---------- */
@media (max-width: 767px) {
.section-title h2 { letter-spacing: .06em !important; }
.product-miniature:hover .thumbnail-container { transform: none; }
#header .header-nav { background: var(--pf-bg) !important; }
}
/* =====================================================================
v1.1 · Correcciones
===================================================================== */
/* 1) Tarjetas igualadas: el título siempre ocupa 2 líneas */
.product-miniature .product-title,
#products .product-miniature .product-title,
.featured-products .product-miniature .product-title {
line-height: 1.35 !important;
height: 2.7em !important;
min-height: 2.7em !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 2) Flechas del slider: un solo círculo, sin el "punto" interior */
.image-slider-block .carousel-control .icon-prev,
.image-slider-block .carousel-control .icon-next {
display: flex !important;
align-items: center;
justify-content: center;
width: 46px !important;
height: 46px !important;
margin-top: -23px !important;
background: rgba(7, 6, 26, .6) !important;
border: 1px solid var(--pf-cyan) !important;
border-radius: 50% !important;
box-shadow: var(--pf-glow-cyan) !important;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.image-slider-block .carousel-control .icon-prev::before,
.image-slider-block .carousel-control .icon-next::before { display: none !important; }
.image-slider-block .carousel-control i,
.image-slider-block .carousel-control .material-icons {
background: none !important;
border: 0 !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
font-size: 28px !important;
line-height: 1 !important;
text-shadow: var(--pf-glow-cyan);
}
.image-slider-block .carousel-control:hover .icon-prev,
.image-slider-block .carousel-control:hover .icon-next {
border-color: var(--pf-pink) !important;
box-shadow: var(--pf-glow-pink) !important;
transform: scale(1.08);
}
.image-slider-block .carousel-control { background: none !important; opacity: 1 !important; }
/* Flechas de los carruseles de productos (antes cuadrados azul marino) */
.owl-prev .prev-arrow, .owl-next .next-arrow, .owl-buttons .owl-prev, .owl-buttons .owl-next {
background: rgba(7, 6, 26, .75) !important;
border: 1px solid var(--pf-cyan) !important;
border-radius: 50% !important;
color: #fff !important;
box-shadow: var(--pf-glow-cyan) !important;
}
.owl-prev .prev-arrow i, .owl-next .next-arrow i { color: #fff !important; }
.owl-prev:hover .prev-arrow, .owl-next:hover .next-arrow {
border-color: var(--pf-pink) !important;
box-shadow: var(--pf-glow-pink) !important;
}
.owl-buttons .owl-prev .prev-arrow, .owl-buttons .owl-next .next-arrow { border: 0 !important; box-shadow: none !important; background: none !important; }
/* 3a) "Ahorre un X €" con el mismo estilo que Añadir al carrito */
.product-prices .discount, .product-prices .discount-amount, .product-prices .discount-percentage,
.current-price .discount {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
padding: 6px 14px !important;
font-family: var(--pf-display) !important;
font-size: .85rem !important;
font-weight: 700 !important;
letter-spacing: .06em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: 0 0 10px rgba(255, 46, 136, .45) !important;
text-shadow: none !important;
}
/* 3b) Resumen del producto legible (el tema lo pintaba en gris oscuro) */
.product-information .product-short-desc, .product-information .product-short-desc *,
[id^="product-description-short"], [id^="product-description-short"] *,
#main .product-information p, .page-content p, .cms-content p, #description p, #description li {
color: var(--pf-text) !important;
}
.product-information .product-short-desc, [id^="product-description-short"] { line-height: 1.6; }
/* En las tarjetas del listado sigue siendo gris suave */
.product-miniature .product-short-desc, .product-miniature .product-short-desc * { color: var(--pf-muted) !important; }
/* Aviso de última unidad en rojo neón */
.pf-alert-stock-big {
color: #ff4d6d !important;
text-shadow: 0 0 8px rgba(255, 77, 109, .7);
font-family: var(--pf-display) !important;
letter-spacing: .04em;
}
/* =====================================================================
v1.2 · Categorías, filtros, comentarios y tarjetas
===================================================================== */
/* --- Tarjeta de producto: imagen pegada al borde, esquinas inferiores rectas --- */
.product-miniature .product-image-block,
.products-grid .products .product-item .product-miniature .thumbnail-container .product-image-block,
#products .products-grid .products .product-item .product-miniature .thumbnail-container .product-image-block {
margin: 0 !important;
border-radius: calc(var(--pf-radius) - 1px) calc(var(--pf-radius) - 1px) 0 0 !important;
border-bottom: 1px solid var(--pf-line);
}
.product-miniature .product-description,
#products .product-miniature .product-description,
.featured-products .product-miniature .product-description {
padding: 4px 16px 16px !important;
}
.product-miniature .product-title,
#products .product-miniature .product-title,
.featured-products .product-miniature .product-title {
padding: 0 !important;
margin: 12px 0 8px !important;
text-align: left;
}
.product-miniature .product-price-and-shipping,
#products .product-price-and-shipping,
.featured-products .product-price-and-shipping {
display: flex !important;
align-items: baseline;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
text-align: center !important;
width: 100%;
margin: 0 !important;
}
/* --- Título de categoría centrado y neón --- */
.category-desc, .block-category .category-desc { text-align: left; }
.category-desc h1.h1, .block-category h1.h1, #js-product-list-header h1.h1 {
display: block;
text-align: center !important;
font-family: var(--pf-display) !important;
font-size: clamp(28px, 3.6vw, 42px) !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
color: #fff !important;
margin: 6px 0 22px !important;
padding-bottom: 16px;
position: relative;
text-shadow: 0 0 4px #fff, 0 0 12px var(--pf-pink), 0 0 28px var(--pf-pink), 0 0 48px rgba(255, 46, 136, .6);
animation: pf-flicker 6s infinite;
}
.category-desc h1.h1::before, .category-desc h1.h1::after,
.block-category h1.h1::before, .block-category h1.h1::after {
content: "";
position: absolute;
left: 50%;
height: 2px;
width: 70px;
}
.category-desc h1.h1::before, .block-category h1.h1::before {
bottom: 4px; transform: translateX(-30%);
background: var(--pf-cyan); box-shadow: var(--pf-glow-cyan);
}
.category-desc h1.h1::after, .block-category h1.h1::after {
bottom: -1px; transform: translateX(-70%);
background: var(--pf-pink); box-shadow: var(--pf-glow-pink);
}
/* --- Columna izquierda: cabeceras de bloque en neón (antes cajas blancas) --- */
.block-categories, #search_filters { overflow: hidden; padding-top: 0 !important; }
.block-categories .category-top-menu { border: 0 !important; }
.block-categories .category-top-menu > li > a.h6,
.block-categories .category-top-menu > li:first-child > a,
#search_filters > p.h6, #search_filters > .h6 {
display: block;
margin: 0 0 10px !important;
padding: 14px 16px !important;
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
color: #fff !important;
font-family: var(--pf-display) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .12em;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(255, 255, 255, .45);
border: 0 !important;
box-shadow: 0 4px 16px rgba(255, 46, 136, .25);
}
.block-categories .category-top-menu > li > a.h6:hover { color: #fff !important; filter: brightness(1.1); }
.block-categories .category-sub-menu li a { padding-left: 16px; display: inline-block; }
.block-categories .category-sub-menu li a::before {
content: "›"; color: var(--pf-pink); margin-right: 8px; font-weight: 700;
}
#search_filters .facet { background: transparent !important; padding: 6px 16px !important; border-top: 1px solid var(--pf-line); }
#search_filters .facet:first-of-type { border-top: 0; }
#search_filters .facet .facet-title { color: var(--pf-cyan) !important; text-shadow: 0 0 6px rgba(32, 227, 255, .5); }
#search_filters .facet .collapse-icons i, #search_filters .facet .navbar-toggler i { color: var(--pf-muted) !important; }
#search_filters .custom-checkbox input[type=checkbox] + span {
border-radius: 4px; background: transparent !important; border: 1px solid var(--pf-cyan) !important;
}
#search_filters .custom-checkbox input[type=checkbox]:checked + span {
background: var(--pf-pink) !important; border-color: var(--pf-pink) !important; box-shadow: var(--pf-glow-pink);
}
#search_filters .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked { color: #fff !important; }
#search_filters .facet-label.active a, #search_filters .facet-label.active { color: #fff !important; }
#search_filters .js-search-filters-clear-all, #_desktop_search_filters_clear_all .btn {
margin: 0 16px 10px; width: calc(100% - 32px);
}
/* --- Comentarios del producto: mismo panel que la descripción --- */
.product-comments {
background: var(--pf-bg-2) !important;
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
overflow: hidden;
padding: 0 0 6px !important;
margin-top: 30px;
}
.product-comments #product-comments-list-header {
background: transparent !important;
border-bottom: 1px solid var(--pf-line) !important;
padding: 14px 20px !important;
float: none; width: 100%;
}
.product-comments .comments-nb, .product-comments .comments-nb i {
color: #fff !important;
font-family: var(--pf-display) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .06em;
}
.product-comments .comments-nb {
display: inline-block;
padding-bottom: 6px;
border-bottom: 2px solid var(--pf-pink);
text-shadow: var(--pf-glow-pink);
}
.product-comments .comments-nb i { color: var(--pf-pink) !important; vertical-align: middle; margin-right: 6px; }
.product-comments #empty-product-comment, .product-comments .product-comment-list-item {
background: transparent !important;
color: var(--pf-muted) !important;
padding: 18px 20px !important;
margin: 0 !important;
}
.product-comments .product-comment-list-item + .product-comment-list-item { border-top: 1px solid var(--pf-line); }
.product-comments .product-comment-list-item *, .product-comments .comment-infos * { color: var(--pf-text) !important; }
.product-comments .comment-infos .comment-author, .product-comments h4 { color: var(--pf-cyan) !important; }
.product-comments #product-comments-list-footer { padding: 0 20px 14px !important; float: none; width: 100%; }
.product-comments .post-product-comment, .product-comments .btn-comment, .product-comments .btn-comment-big {
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
color: #fff !important; border: 0 !important; border-radius: 10px !important;
font-family: var(--pf-display) !important; font-weight: 700 !important; text-transform: uppercase;
box-shadow: 0 0 10px rgba(255, 46, 136, .45) !important;
}
#post-product-comment-modal .modal-content, #product-comment-posted-modal .modal-content,
#update-comment-usefulness-post-error .modal-content, #report-comment-confirmation .modal-content {
background: var(--pf-bg-2) !important; color: var(--pf-text) !important;
}
.product-miniature .product-thumbnail img { height: auto !important; }
/* =====================================================================
v1.3 · Cabecera, carrito y comentarios
===================================================================== */
/* --- Menú: un único color de lado a lado (antes el bloque central era distinto) --- */
.displaytopmenu {
background: linear-gradient(180deg, #1d0f52 0%, #140b3e 100%) !important;
}
.displaytopmenu .container, .top-navigation-menu, .top-navigation-menu-inner,
#_desktop_top_menu, #_desktop_top_menu > .top-menu {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Quita los triangulitos grises de los desplegables */
.top-menu .popover::before, .top-menu .popover::after,
.top-navigation-menu .sub-menu::before, .top-navigation-menu .sub-menu::after { display: none !important; }
/* --- Buscador: una sola cápsula con el botón redondo dentro --- */
#search_widget form, .search-widget form {
position: relative !important;
}
#search_widget form input[type=text], .search-widget form input[type=text] {
width: 100% !important;
height: 46px !important;
padding: 0 56px 0 20px !important;
border-radius: 999px !important;
background: var(--pf-bg-2) !important;
border: 1px solid rgba(32, 227, 255, .35) !important;
box-shadow: inset 0 0 12px rgba(139, 92, 255, .15) !important;
}
#search_widget form input[type=text]:focus {
border-color: var(--pf-cyan) !important;
box-shadow: 0 0 0 1px var(--pf-cyan), 0 0 14px rgba(32, 227, 255, .35) !important;
}
#search_widget form button[type=submit], .search-widget form button[type=submit] {
position: absolute !important;
top: 50% !important;
right: 5px !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%);
width: 36px !important;
height: 36px !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
box-shadow: 0 0 8px rgba(255, 46, 136, .5) !important;
line-height: 1 !important;
}
#search_widget form button[type=submit]:hover { box-shadow: 0 0 14px rgba(255, 46, 136, .85) !important; }
#search_widget form button[type=submit] i { font-size: 15px !important; color: #fff !important; position: static !important; margin: 0 !important; }
/* --- Carrito de la cabecera: botón neón bien visible --- */
#header #_desktop_cart .blockcart, #header #_mobile_cart .blockcart { background: transparent !important; }
#header #_desktop_cart .blockcart .header, #header #_mobile_cart .blockcart .header {
display: inline-flex !important;
align-items: center;
gap: 10px;
position: relative;
width: auto !important;
height: auto !important;
padding: 9px 16px 9px 14px !important;
border: 1px solid var(--pf-cyan) !important;
border-radius: 999px !important;
background: rgba(32, 227, 255, .08) !important;
box-shadow: 0 0 10px rgba(32, 227, 255, .35), inset 0 0 10px rgba(32, 227, 255, .12) !important;
transition: border-color .2s, box-shadow .2s, transform .2s;
cursor: pointer;
}
#header #_desktop_cart .blockcart .header:hover, #header #_mobile_cart .blockcart .header:hover,
#header .blockcart.active .header {
border-color: var(--pf-pink) !important;
box-shadow: 0 0 14px rgba(255, 46, 136, .6), inset 0 0 10px rgba(255, 46, 136, .15) !important;
transform: translateY(-1px);
}
#header #_desktop_cart .blockcart .header a, #header #_mobile_cart .blockcart .header a {
display: inline-flex !important; align-items: center; gap: 10px; color: #fff !important; text-shadow: none !important;
}
#header #_desktop_cart .blockcart .header i, #header #_mobile_cart .blockcart .header i,
#header .blockcart .shopping-basket i, #header .blockcart .shopping-basket {
color: #fff !important;
font-size: 22px !important;
line-height: 1 !important;
text-shadow: 0 0 8px var(--pf-cyan), 0 0 16px rgba(32, 227, 255, .6) !important;
position: static !important;
margin: 0 !important;
}
#header #_desktop_cart .blockcart .cart-products-count, #header #_mobile_cart .blockcart .cart-products-count {
position: static !important;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 7px !important;
margin: 0 !important;
border-radius: 999px !important;
background: var(--pf-pink) !important;
color: #fff !important;
font-family: var(--pf-display) !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
box-shadow: var(--pf-glow-pink) !important;
}
/* --- Ventana "Producto añadido al carrito" --- */
#blockcart-modal .modal-content { border: 1px solid var(--pf-line) !important; border-radius: var(--pf-radius) !important; overflow: hidden; }
#blockcart-modal .modal-header .close, #blockcart-modal .modal-header .close span { color: #fff !important; opacity: 1; text-shadow: none; }
#blockcart-modal .modal-body { background: var(--pf-bg-2) !important; }
#blockcart-modal .divide-right { border-right: 1px solid var(--pf-line) !important; }
#blockcart-modal .product-image { background: #fff; border-radius: 10px; padding: 6px; }
#blockcart-modal .cart-content, #blockcart-modal .cart-content p,
#blockcart-modal .cart-content .label, #blockcart-modal .cart-content span,
#blockcart-modal .product-quantity, #blockcart-modal .product-quantity strong {
color: var(--pf-text) !important;
background: transparent !important;
}
#blockcart-modal .cart-content p.cart-products-count, #blockcart-modal .cart-products-count {
background: transparent !important;
box-shadow: none !important;
color: var(--pf-cyan) !important;
font-family: var(--pf-display) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
padding: 0 0 10px !important;
margin: 0 0 10px !important;
border-bottom: 1px solid var(--pf-line);
border-radius: 0 !important;
text-shadow: 0 0 8px rgba(32, 227, 255, .5);
}
#blockcart-modal .cart-content p { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 12px !important; margin: 0 !important; }
#blockcart-modal .cart-content p.cart-products-count { display: block; padding-left: 0 !important; }
#blockcart-modal .cart-content .value { color: #fff !important; font-weight: 600; }
#blockcart-modal .cart-content .product-total, #blockcart-modal .cart-content p.product-total {
background: var(--pf-bg-3) !important;
border: 1px solid var(--pf-line);
border-radius: 10px;
margin: 8px 0 !important;
padding: 10px 12px !important;
}
#blockcart-modal .cart-content .product-total .label { color: #fff !important; font-weight: 700 !important; }
#blockcart-modal .cart-content .product-total .value {
color: var(--pf-cyan) !important;
font-family: var(--pf-display) !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
text-shadow: var(--pf-glow-cyan);
}
#blockcart-modal .cart-content .product-tax, #blockcart-modal .cart-content .product-tax * { color: var(--pf-muted) !important; font-size: .85rem; }
#blockcart-modal .product-name { color: #fff !important; font-family: var(--pf-display) !important; }
#blockcart-modal .product-price { color: var(--pf-cyan) !important; }
#blockcart-modal .cart-content-btn { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#blockcart-modal .cart-content-btn .btn { flex: 1 1 auto; margin: 0 !important; }
/* --- Comentarios: el icono mostraba "CHA" en vez del dibujo --- */
.product-comments .comments-nb i, .product-comments .material-icons, .product-comments i.material-icons {
font-family: "Material Icons" !important;
text-transform: none !important;
letter-spacing: normal !important;
font-weight: normal !important;
font-size: 22px !important;
line-height: 1 !important;
text-shadow: var(--pf-glow-pink) !important;
}
.product-comments .comments-nb { display: inline-flex !important; align-items: center; gap: 8px; }
.product-comments .comments-nb i { margin: 0 !important; }
.product-comments #product-comments-list-footer,
.product-comments #product-comments-list-pagination { border-top: 0 !important; }
.product-comments #product-comments-list-header { border-bottom: 1px solid var(--pf-line) !important; }
/* Respeta qué contador se ve en móvil y en escritorio */
@media (max-width: 767px) { #header .blockcart .cart-products-count.hidden-sm-down { display: none !important; } }
@media (min-width: 768px) { #header .blockcart .cart-products-count.hidden-md-up { display: none !important; } }
/* Botón "volver arriba" */
a.scrollTop, a.scrollTop span {
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
border: 0 !important;
border-radius: 50% !important;
color: #fff !important;
}
a.scrollTop { box-shadow: var(--pf-glow-pink) !important; transition: transform .2s; }
a.scrollTop:hover { transform: translateY(-3px); text-shadow: none !important; }
a.scrollTop i { color: #fff !important; }
/* =====================================================================
v1.4 · Desplegable del buscador y zona "Su cuenta"
===================================================================== */
/* --- Desplegable de resultados del buscador (custom.css / custom.js) --- */
ul.searchbar-autocomplete {
background: #0e0c2b !important;
border: 1px solid rgba(32, 227, 255, .45) !important;
border-radius: 16px !important;
z-index: 1000 !important;
margin-top: 8px !important;
padding: 6px !important;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(32, 227, 255, .2) !important;
}
ul.searchbar-autocomplete li {
border: 0 !important;
border-radius: 10px;
background: transparent !important;
transition: background .15s, box-shadow .15s;
}
ul.searchbar-autocomplete li + li:not(.searchbar-see-more-item) { margin-top: 2px; }
ul.searchbar-autocomplete li a {
color: var(--pf-text) !important;
font-family: var(--pf-body) !important;
font-size: 13px !important;
padding: 8px 10px !important;
gap: 12px;
text-shadow: none !important;
}
ul.searchbar-autocomplete li a .product { color: inherit !important; line-height: 1.35; }
ul.searchbar-autocomplete li:not(.searchbar-see-more-item):hover {
background: rgba(255, 46, 136, .12) !important;
box-shadow: inset 0 0 0 1px rgba(255, 46, 136, .6), 0 0 12px rgba(255, 46, 136, .25);
}
ul.searchbar-autocomplete li:not(.searchbar-see-more-item):hover a { color: #fff !important; }
ul.searchbar-autocomplete .autocomplete-thumbnail {
width: 44px !important;
height: 44px !important;
margin: 0 !important;
flex: 0 0 44px;
background: #fff !important;
border: 0 !important;
border-radius: 8px !important;
padding: 2px;
}
ul.searchbar-autocomplete li.searchbar-see-more-item {
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
border: 0 !important;
border-radius: 10px !important;
margin-top: 6px !important;
box-shadow: 0 0 10px rgba(255, 46, 136, .45);
}
ul.searchbar-autocomplete li.searchbar-see-more-item a {
color: #fff !important;
font-family: var(--pf-display) !important;
letter-spacing: .1em;
padding: 11px !important;
text-align: center;
}
ul.searchbar-autocomplete li.searchbar-see-more-item:hover {
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
filter: brightness(1.15);
box-shadow: 0 0 18px rgba(255, 46, 136, .8);
}
/* --- Cabeceras y pies de página genéricos: sin franja oscura detrás --- */
.page-header, .page-footer { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.page-header h1 {
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .1em;
text-shadow: 0 0 4px #fff, 0 0 12px var(--pf-pink), 0 0 28px rgba(255, 46, 136, .6) !important;
}
.page-customer-account #content, .page-addresses #content, .page-my-account #content,
.page-customer-account .page-content, #module-psgdpr-gdpr #content {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.page-footer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.page-footer a { margin: 0 !important; }
/* --- Su cuenta: tarjetas de enlaces --- */
.page-my-account #content .links { display: flex; flex-wrap: wrap; }
.page-my-account #content .links a {
background: transparent !important;
padding: 0 12px !important;
margin-bottom: 24px;
text-shadow: none !important;
}
.page-my-account #content .links a span.link-item {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
height: 100%;
min-height: 150px;
padding: 28px 18px !important;
background: linear-gradient(180deg, var(--pf-bg-2), #0a0920) !important;
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
color: var(--pf-text) !important;
font-family: var(--pf-display) !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: .08em;
text-transform: uppercase;
text-align: center;
transition: transform .25s, border-color .25s, box-shadow .25s;
}
.page-my-account #content .links a span.link-item i {
display: flex !important;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 !important;
padding: 0 !important;
border-radius: 50%;
font-size: 32px !important;
color: var(--pf-cyan) !important;
background: rgba(32, 227, 255, .08);
border: 1px solid rgba(32, 227, 255, .4);
box-shadow: 0 0 14px rgba(32, 227, 255, .3);
text-shadow: 0 0 10px rgba(32, 227, 255, .8);
transition: color .25s, border-color .25s, box-shadow .25s, background .25s;
}
.page-my-account #content .links a:hover span.link-item {
transform: translateY(-5px);
border-color: var(--pf-pink) !important;
color: #fff !important;
box-shadow: 0 0 0 1px var(--pf-pink), 0 0 22px rgba(255, 46, 136, .45), 0 18px 40px rgba(0, 0, 0, .5) !important;
}
.page-my-account #content .links a:hover span.link-item i {
color: var(--pf-pink) !important;
border-color: var(--pf-pink);
background: rgba(255, 46, 136, .1);
box-shadow: var(--pf-glow-pink);
text-shadow: 0 0 10px rgba(255, 46, 136, .8);
}
.page-my-account #content .text-sm-center { margin-top: 10px; }
/* --- Direcciones --- */
.address, article.address {
background: linear-gradient(180deg, var(--pf-bg-2), #0a0920) !important;
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
overflow: hidden;
margin-bottom: 24px;
transition: border-color .25s, box-shadow .25s;
}
.address:hover { border-color: var(--pf-cyan) !important; box-shadow: 0 0 0 1px var(--pf-cyan), 0 0 18px rgba(32, 227, 255, .3) !important; }
.address .address-body { padding: 18px 20px !important; color: var(--pf-text) !important; }
.address .address-body h4 {
margin: 0 0 10px !important;
color: var(--pf-cyan) !important;
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .08em;
text-shadow: 0 0 8px rgba(32, 227, 255, .5);
}
.address .address-body h4:empty { display: none; }
.address .address-body address { color: var(--pf-text) !important; line-height: 1.7; margin: 0; }
.address .address-footer {
display: flex; justify-content: center; gap: 22px;
padding: 12px 16px !important;
border-top: 1px solid var(--pf-line) !important;
background: rgba(255, 255, 255, .02) !important;
}
.address .address-footer a, .address .address-footer a i, .address .address-footer a span {
color: var(--pf-muted) !important; text-shadow: none !important;
}
.address .address-footer a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.address .address-footer a i { font-size: 18px !important; }
.address .address-footer a[data-link-action="edit-address"]:hover,
.address .address-footer a[data-link-action="edit-address"]:hover * { color: var(--pf-cyan) !important; }
.address .address-footer a[data-link-action="delete-address"]:hover,
.address .address-footer a[data-link-action="delete-address"]:hover * { color: var(--pf-pink) !important; }
/* "+ Crear nueva dirección" como botón neón discontinuo */
.addresses-footer { margin: 4px 0 24px; clear: both; }
.addresses-footer a {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 14px 22px !important;
border: 1px dashed var(--pf-cyan) !important;
border-radius: var(--pf-radius) !important;
color: var(--pf-cyan) !important;
background: rgba(32, 227, 255, .05) !important;
font-family: var(--pf-display) !important;
font-weight: 700 !important;
letter-spacing: .06em;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(32, 227, 255, .5);
transition: background .2s, box-shadow .2s, color .2s;
}
.addresses-footer a i, .addresses-footer a span { color: inherit !important; }
.addresses-footer a:hover {
background: rgba(32, 227, 255, .12) !important;
color: #fff !important;
border-style: solid !important;
box-shadow: var(--pf-glow-cyan);
}
/* --- Página RGPD / GDPR (módulo psgdpr) --- */
.psgdprinfo17, #module-psgdpr-gdpr .psgdprinfo17 {
background: linear-gradient(180deg, var(--pf-bg-2), #0a0920) !important;
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
padding: 24px 26px !important;
margin-bottom: 24px !important;
}
.psgdprinfo17 h2 {
color: #fff !important;
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .08em;
font-size: 20px !important;
text-shadow: 0 0 10px rgba(32, 227, 255, .6);
margin-bottom: 12px !important;
}
.psgdprinfo17 p { color: var(--pf-text) !important; line-height: 1.6; }
.psgdprinfo17 a:not(.btn) { color: var(--pf-cyan) !important; }
#module-psgdpr-gdpr #content section, #module-psgdpr-gdpr .page-content { border: 0 !important; background: transparent !important; padding: 0 !important; }
/* El buscador por encima del menú para que el desplegable no quede detrás */
#header .header-top { position: relative; z-index: 20; }
#header .displaytopmenu { z-index: 10; }
/* =====================================================================
v1.5 · Checkout (/pedido)
===================================================================== */
/* --- Radios centrados (envío, pago, direcciones) --- */
.custom-radio {
box-sizing: border-box !important;
width: 22px !important;
height: 22px !important;
border: 2px solid var(--pf-cyan) !important;
background: transparent !important;
border-radius: 50% !important;
position: relative !important;
flex: 0 0 22px;
box-shadow: 0 0 6px rgba(32, 227, 255, .35);
}
.custom-radio input[type=radio] {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.custom-radio input[type=radio] + span { display: none; }
.custom-radio input[type=radio]:checked + span {
display: block !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 10px !important;
height: 10px !important;
margin: 0 !important;
transform: translate(-50%, -50%);
border-radius: 50% !important;
background: var(--pf-pink) !important;
box-shadow: var(--pf-glow-pink) !important;
}
.custom-radio:has(input:checked) { border-color: var(--pf-pink) !important; box-shadow: 0 0 8px rgba(255, 46, 136, .5); }
/* --- Direcciones dentro del checkout --- */
body#checkout section.checkout-step .address-item {
background: var(--pf-bg-3) !important;
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
overflow: hidden;
box-shadow: none !important;
transition: border-color .2s, box-shadow .2s;
}
body#checkout section.checkout-step .address-item:hover { border-color: var(--pf-cyan) !important; }
body#checkout section.checkout-step .address-item.selected {
background: var(--pf-bg-3) !important;
border: 1px solid var(--pf-pink) !important;
box-shadow: 0 0 0 1px var(--pf-pink), 0 0 18px rgba(255, 46, 136, .35) !important;
}
body#checkout .address-item header, body#checkout .address-item .radio-block {
padding: 16px 18px 6px !important;
background: transparent !important;
}
body#checkout .address-item .radio-block label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
body#checkout .address-item .address-alias {
color: var(--pf-cyan) !important;
font-family: var(--pf-display) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
text-shadow: 0 0 8px rgba(32, 227, 255, .5);
}
/* El bloque no debe parecer otra tarjeta dentro de la tarjeta */
body#checkout .address-item .address, body#checkout .address-item address.address {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 8px 0 0 !important;
padding: 0 !important;
overflow: visible;
color: var(--pf-text) !important;
line-height: 1.7;
}
body#checkout .address-item .address:hover { box-shadow: none !important; }
body#checkout .address-item hr { border-color: var(--pf-line) !important; margin: 10px 0 0 !important; }
body#checkout .address-item .address-footer {
display: flex; justify-content: center; gap: 22px;
padding: 12px 16px !important;
background: rgba(255, 255, 255, .02) !important;
}
body#checkout .address-item .address-footer a, body#checkout .address-item .address-footer a * {
color: var(--pf-muted) !important; text-shadow: none !important;
}
body#checkout .address-item .address-footer a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
body#checkout .address-item .address-footer a.edit-address:hover, body#checkout .address-item .address-footer a.edit-address:hover * { color: var(--pf-cyan) !important; }
body#checkout .address-item .address-footer a.delete-address:hover, body#checkout .address-item .address-footer a.delete-address:hover * { color: var(--pf-pink) !important; }
/* "+ Añadir nueva dirección" */
body#checkout .add-address { margin: 10px 0 16px; }
body#checkout .add-address a {
display: inline-flex !important; align-items: center; gap: 8px;
padding: 12px 20px !important;
border: 1px dashed var(--pf-cyan) !important;
border-radius: var(--pf-radius) !important;
color: var(--pf-cyan) !important;
background: rgba(32, 227, 255, .05) !important;
font-family: var(--pf-display) !important; font-weight: 700 !important;
text-transform: uppercase; letter-spacing: .06em;
text-shadow: 0 0 8px rgba(32, 227, 255, .5);
}
body#checkout .add-address a i { color: inherit !important; }
body#checkout .add-address a:hover { background: rgba(32, 227, 255, .12) !important; color: #fff !important; border-style: solid !important; box-shadow: var(--pf-glow-cyan); }
/* --- Resumen del carrito: productos siempre visibles --- */
#cart-summary-product-list, #cart-summary-product-list.collapse {
display: block !important;
height: auto !important;
visibility: visible !important;
}
.cart-summary-products a[data-target="#cart-summary-product-list"],
.cart-summary-products p:has(> a[data-target="#cart-summary-product-list"]) { display: none !important; }
.cart-summary-products > p:first-child, .cart-summary-products .cart-summary-count {
color: #fff !important;
font-family: var(--pf-display) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .08em;
padding-bottom: 10px;
margin-bottom: 12px !important;
border-bottom: 1px solid var(--pf-line);
text-shadow: 0 0 8px rgba(255, 46, 136, .5);
}
#cart-summary-product-list .media-list { margin: 0; padding: 0; }
#cart-summary-product-list .media {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 0 !important;
border-bottom: 1px solid var(--pf-line);
}
#cart-summary-product-list .media:last-child { border-bottom: 0; }
#cart-summary-product-list .media-left img, #cart-summary-product-list img {
width: 64px; height: auto; background: #fff; border-radius: 8px; padding: 2px;
}
#cart-summary-product-list .media-body { flex: 1; min-width: 0; }
#cart-summary-product-list .product-name, #cart-summary-product-list .product-name a {
color: var(--pf-text) !important; font-size: 13px; line-height: 1.4; text-shadow: none !important;
}
#cart-summary-product-list .product-name a:hover { color: var(--pf-cyan) !important; }
#cart-summary-product-list .product-quantity { color: var(--pf-muted) !important; }
#cart-summary-product-list .product-price { color: var(--pf-cyan) !important; font-family: var(--pf-display); font-weight: 700; float: right; }
/* --- Información del método de pago (Bizum, transferencia...) --- */
body#checkout .additional-information, body#checkout .additional-information * { color: var(--pf-text) !important; }
body#checkout .additional-information table, body#checkout .additional-information dl {
width: 100%;
max-width: 560px;
border-collapse: separate !important;
border-spacing: 0 !important;
background: var(--pf-bg-3) !important;
border: 1px solid var(--pf-line) !important;
border-radius: 12px;
overflow: hidden;
}
body#checkout .additional-information td, body#checkout .additional-information th,
body#checkout .additional-information dt, body#checkout .additional-information dd {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--pf-line) !important;
padding: 12px 16px !important;
margin: 0 !important;
}
body#checkout .additional-information tr:last-child td, body#checkout .additional-information tr:last-child th { border-bottom: 0 !important; }
body#checkout .additional-information td:first-child, body#checkout .additional-information th, body#checkout .additional-information dt {
color: var(--pf-muted) !important;
font-weight: 600;
width: 45%;
}
body#checkout .additional-information td:last-child, body#checkout .additional-information dd {
color: #fff !important;
font-family: var(--pf-display) !important;
font-weight: 700 !important;
letter-spacing: .03em;
}
body#checkout .additional-information dl { display: grid; grid-template-columns: 45% 55%; }
body#checkout .additional-information section, body#checkout .additional-information .well,
body#checkout .additional-information div[style*="background"] { background: transparent !important; }
/* Lista de métodos de pago */
body#checkout .payment-options .payment-option { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
body#checkout .payment-options .payment-option label { margin: 0; cursor: pointer; color: var(--pf-text) !important; }
body#checkout .payment-options .payment-option img { max-height: 24px; filter: brightness(1.6); }
/* v1.5.1 · Bizum/transferencia: sin huecos entre etiqueta y valor */
body#checkout .additional-information dl {
grid-template-columns: max-content 1fr !important;
max-width: 520px;
}
body#checkout .additional-information dt,
body#checkout .additional-information dd {
width: auto !important;
max-width: none !important;
float: none !important;
display: flex !important;
align-items: center;
padding: 10px 16px !important;
line-height: 1.35;
}
body#checkout .additional-information dt { padding-right: 24px !important; white-space: nowrap; }
body#checkout .additional-information dl > dt:nth-last-of-type(1),
body#checkout .additional-information dl > dd:last-of-type { border-bottom: 0 !important; }
body#checkout .additional-information td:first-child, body#checkout .additional-information th { width: 1% !important; white-space: nowrap; padding-right: 24px !important; }
@media (max-width: 575px) {
body#checkout .additional-information dl { grid-template-columns: 1fr !important; }
body#checkout .additional-information dt { border-bottom: 0 !important; padding-bottom: 0 !important; white-space: normal; }
}
/* =====================================================================
v1.6 · Botones "Todos los productos en oferta / novedades / reentradas"
===================================================================== */
.featured-products .all-products, .all-products {
float: none !important;
clear: both;
display: flex !important;
justify-content: center;
width: 100% !important;
margin: 28px 0 10px !important;
padding: 0 15px !important;
text-align: center !important;
}
.featured-products .all-product-link, .all-product-link,
.all-product-link.float-xs-left, .all-product-link.float-md-right {
float: none !important;
position: relative;
display: inline-flex !important;
align-items: center;
gap: 12px;
margin: 0 !important;
padding: 13px 28px !important;
border: 1px solid var(--pf-pink) !important;
border-radius: 999px !important;
background: rgba(255, 46, 136, .08) !important;
color: #fff !important;
font-family: var(--pf-display) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .12em;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(255, 46, 136, .7) !important;
box-shadow: 0 0 12px rgba(255, 46, 136, .4), inset 0 0 12px rgba(255, 46, 136, .15) !important;
transition: background .25s, box-shadow .25s, transform .25s, color .25s;
white-space: nowrap;
}
.all-product-link::after {
content: "→";
font-family: var(--pf-body);
font-size: 18px;
line-height: 1;
color: var(--pf-cyan);
text-shadow: var(--pf-glow-cyan);
transition: transform .25s;
}
.all-product-link:hover, .all-product-link:focus {
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet)) !important;
border-color: transparent !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 22px rgba(255, 46, 136, .8), 0 0 40px rgba(139, 92, 255, .5) !important;
}
.all-product-link:hover::after { transform: translateX(5px); color: #fff; }
@media (max-width: 575px) {
.featured-products .all-product-link, .all-product-link {
font-size: 13px !important;
padding: 12px 22px !important;
letter-spacing: .08em;
white-space: normal;
text-align: center;
}
}
/* v1.6 · Logos de marcas todos del mismo tamaño */
.brand-section .brand-content img, .brand-section img {
width: 100% !important;
height: 96px !important;
object-fit: contain;
padding: 12px !important;
box-sizing: border-box;
}
.brand-section .brand-content li.item, .brand-section .owl-item .item { display: flex; align-items: center; justify-content: center; padding: 8px; }
@media (max-width: 575px) { .brand-section .brand-content img, .brand-section img { height: 80px !important; } }
/* v1.6 · Sin desplazamiento horizontal en móvil */
.ht-main-content, #footer { overflow-x: clip; }
@supports not (overflow-x: clip) { .ht-main-content, #footer { overflow-x: hidden; } }
/* v1.6 · Título "Boletín informativo" igual que los demás del pie */
#footer .footer-block-title, #footer .footer-block-title span {
color: #fff !important;
font-family: var(--pf-display) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .1em;
text-shadow: 0 0 10px rgba(32, 227, 255, .6) !important;
}
/* =====================================================================
v1.7 · Remates
===================================================================== */
/* --- Botones sobre la foto: "Añadir al carrito" + lupa a juego --- */
@media (min-width: 768px) {
.product-miniature .highlighted-informations,
#products .highlighted-informations, .featured-products .highlighted-informations,
.products-grid .products .product-item .product-miniature .thumbnail-container .product-image-block .highlighted-informations,
#products .products-grid .products .product-item .product-miniature .thumbnail-container .product-image-block .highlighted-informations {
display: flex !important;
align-items: stretch;
gap: 8px;
padding: 10px !important;
box-sizing: border-box;
}
}
.product-miniature .highlighted-informations .add {
float: none !important;
flex: 1 1 auto;
width: auto !important;
min-width: 0;
}
.product-miniature .highlighted-informations .add form { height: 100%; }
.product-miniature .highlighted-informations .add .btn {
width: 100% !important;
height: 46px !important;
padding: 0 12px !important;
display: flex !important;
align-items: center;
justify-content: center;
line-height: 1.1 !important;
font-size: 13px !important;
border-radius: 10px !important;
}
.product-miniature .highlighted-informations .quick-view {
float: none !important;
flex: 0 0 46px;
width: 46px !important;
height: 46px !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 10px !important;
border: 1px solid var(--pf-cyan) !important;
background: rgba(14, 12, 43, .85) !important;
box-shadow: 0 0 10px rgba(32, 227, 255, .45) !important;
transition: background .2s, box-shadow .2s, border-color .2s;
}
.product-miniature .highlighted-informations .quick-view i {
font-size: 22px !important;
line-height: 1 !important;
margin: 0 !important;
color: #fff !important;
text-shadow: var(--pf-glow-cyan);
}
.product-miniature .highlighted-informations .quick-view:hover {
background: rgba(32, 227, 255, .18) !important;
box-shadow: 0 0 16px rgba(32, 227, 255, .8) !important;
}
/* Si solo está la lupa (producto solo en tienda física, etc.) */
.product-miniature .highlighted-informations .add .btn.store-only { font-size: 11px !important; }
/* --- Pie: "Dirección:" se pintaba como tarjeta (compartía la clase .address) --- */
#footer .address, #footer .content-title.address, #footer span.address {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
display: inline !important;
}
#footer .address:hover { box-shadow: none !important; border: 0 !important; }
#footer .block-contact .content-title, #footer .block-contact .content-title.address {
color: var(--pf-cyan) !important;
font-family: var(--pf-display) !important;
font-weight: 700 !important;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 13px;
}
#footer .block-contact .content-title a { color: var(--pf-text) !important; font-family: var(--pf-body); text-transform: none; letter-spacing: 0; }
#footer .block-contact li.content { margin-bottom: 14px; }
/* --- Marcas: menos aire arriba y abajo --- */
.brand-section { margin: 20px 0 0 !important; padding: 0 !important; }
.brand-section .section-title { margin: 10px 0 22px !important; }
.brand-section .brand-content, .brand-section .brand-row { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.brand-section li.item, .brand-section .brand-content li.item, .brand-section .owl-item .item {
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
}
.brand-section .brand-content a { display: block; width: 100%; }
.brand-section .owl-wrapper-outer, .brand-section .owl-carousel { height: auto !important; }
#footer { margin-top: 36px !important; }
/* Logos de marcas un poco más grandes */
.brand-section .brand-content img, .brand-section img { height: 110px !important; padding: 8px 14px !important; }
@media (max-width: 575px) { .brand-section .brand-content img, .brand-section img { height: 90px !important; padding: 6px 10px !important; } }
/* v1.8 · Ocultar el bloque de categorías si no hay subcategorías (respaldo por CSS) */
.block-categories:not(:has(.category-sub-menu li)) { display: none !important; }
/* v1.9 · Logo con aire arriba y abajo */
#header .header-top { padding: 12px 0 !important; }
#_desktop_logo img, #_desktop_logo .logo {
width: 130px !important;
height: auto !important;
max-width: 100%;
}
@media (max-width: 991px) { #_desktop_logo img, #_desktop_logo .logo { width: 110px !important; } }
/* =====================================================================
v2.0 · Páginas de contenido (Envío, Aviso legal, FAQ...)
Clases para usar dentro del editor: pf-page, pf-lead, pf-box, pf-cards,
pf-card, pf-steps, pf-table, pf-faq, pf-btn, pf-meta, pf-contact
===================================================================== */
/* Título de la página centrado y neón */
#cms .page-header { text-align: center; margin: 10px 0 26px !important; }
#cms .page-header h1 {
display: inline-block;
position: relative;
font-size: clamp(26px, 3.4vw, 40px) !important;
letter-spacing: .1em !important;
padding-bottom: 16px;
margin: 0 !important;
text-shadow: 0 0 4px #fff, 0 0 12px var(--pf-pink), 0 0 28px var(--pf-pink), 0 0 48px rgba(255, 46, 136, .6) !important;
}
#cms .page-header h1::before, #cms .page-header h1::after {
content: ""; position: absolute; left: 50%; height: 2px; width: 70px;
}
#cms .page-header h1::before { bottom: 4px; transform: translateX(-30%); background: var(--pf-cyan); box-shadow: var(--pf-glow-cyan); }
#cms .page-header h1::after { bottom: -1px; transform: translateX(-70%); background: var(--pf-pink); box-shadow: var(--pf-glow-pink); }
/* Contenedor de la página */
#cms .page-content.page-cms {
background: var(--pf-bg-2) !important;
border: 1px solid var(--pf-line) !important;
border-radius: var(--pf-radius) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
padding: clamp(18px, 3vw, 40px) !important;
color: var(--pf-text) !important;
font-size: 15px;
line-height: 1.75;
}
#cms .page-content.page-cms > .container,
#cms .page-cms .pf-page { width: auto !important; max-width: 880px; margin: 0 auto !important; padding: 0 !important; }
/* Tipografía */
#cms .page-cms h1 { font-size: 26px !important; text-align: center; margin: 0 0 20px !important; }
#cms .page-cms h2 {
font-size: 21px !important;
margin: 38px 0 14px !important;
padding-bottom: 10px;
border-bottom: 1px solid var(--pf-line);
text-transform: uppercase;
letter-spacing: .08em;
color: #fff !important;
text-shadow: 0 0 10px rgba(32, 227, 255, .45);
}
#cms .page-cms h2:first-child { margin-top: 0 !important; }
#cms .page-cms h3 { font-size: 17px !important; margin: 26px 0 10px !important; color: var(--pf-cyan) !important; letter-spacing: .04em; }
#cms .page-cms h4 { font-size: 15px !important; margin: 18px 0 8px !important; color: #fff !important; }
#cms .page-cms p, #cms .page-cms li, #cms .page-cms td, #cms .page-cms dd { color: var(--pf-text) !important; }
#cms .page-cms strong, #cms .page-cms b { color: #fff !important; }
#cms .page-cms em { color: var(--pf-muted); }
#cms .page-cms a:not(.pf-btn) { color: var(--pf-cyan) !important; text-decoration: underline; text-underline-offset: 3px; }
#cms .page-cms a:not(.pf-btn):hover { color: var(--pf-pink) !important; }
#cms .page-cms ul, #cms .page-cms ol { padding-left: 1.3em; margin: 0 0 16px; }
#cms .page-cms ul li { list-style: none; position: relative; margin-bottom: 8px; }
#cms .page-cms ul li::before {
content: ""; position: absolute; left: -1.05em; top: .72em;
width: 7px; height: 7px; border-radius: 50%;
background: var(--pf-pink); box-shadow: 0 0 6px var(--pf-pink);
}
#cms .page-cms ol li { margin-bottom: 8px; }
#cms .page-cms ol li::marker { color: var(--pf-cyan); font-weight: 700; }
#cms .page-cms hr { border: 0 !important; height: 1px; margin: 32px 0; background: linear-gradient(90deg, transparent, var(--pf-pink), var(--pf-cyan), transparent); opacity: .6; }
/* Entradilla */
#cms .page-cms .pf-lead { font-size: 17px; text-align: center; color: #fff !important; max-width: 720px; margin: 0 auto 28px !important; }
/* Cajas destacadas: pf-box (info), pf-box pf-box--warn, pf-box pf-box--ok */
#cms .page-cms .pf-box {
position: relative;
margin: 22px 0;
padding: 18px 20px 18px 22px;
border-radius: 12px;
background: rgba(32, 227, 255, .06) !important;
border: 1px solid rgba(32, 227, 255, .4) !important;
border-left: 4px solid var(--pf-cyan) !important;
box-shadow: 0 0 18px rgba(32, 227, 255, .08);
}
#cms .page-cms .pf-box > *:last-child { margin-bottom: 0 !important; }
#cms .page-cms .pf-box h2, #cms .page-cms .pf-box h3 { margin-top: 0 !important; border: 0; padding: 0; }
#cms .page-cms .pf-box--warn {
background: rgba(255, 46, 136, .07) !important;
border-color: rgba(255, 46, 136, .5) !important;
border-left-color: var(--pf-pink) !important;
box-shadow: 0 0 18px rgba(255, 46, 136, .12);
}
#cms .page-cms .pf-box--warn h2, #cms .page-cms .pf-box--warn h3 { color: var(--pf-pink) !important; text-shadow: 0 0 8px rgba(255, 46, 136, .5); }
#cms .page-cms .pf-box--ok {
background: rgba(182, 255, 59, .06) !important;
border-color: rgba(182, 255, 59, .4) !important;
border-left-color: var(--pf-lime) !important;
}
/* Tarjetas en rejilla */
#cms .page-cms .pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 20px 0 26px; }
#cms .page-cms .pf-card {
padding: 20px;
border-radius: 12px;
background: linear-gradient(180deg, var(--pf-bg-3), #0f0c2e) !important;
border: 1px solid var(--pf-line) !important;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
#cms .page-cms .pf-card:hover { border-color: var(--pf-pink) !important; box-shadow: 0 0 16px rgba(255, 46, 136, .3); transform: translateY(-2px); }
#cms .page-cms .pf-card h3 { margin: 0 0 8px !important; color: #fff !important; font-size: 16px !important; }
#cms .page-cms .pf-card p { margin: 0 0 6px !important; font-size: 14px; }
#cms .page-cms .pf-card p:last-child { margin-bottom: 0 !important; }
#cms .page-cms .pf-card .pf-tag {
display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
font-family: var(--pf-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #0b0b1a !important; background: var(--pf-cyan);
}
#cms .page-cms .pf-card .pf-tag--pink { background: var(--pf-pink); color: #fff !important; }
/* Pasos numerados */
#cms .page-cms ol.pf-steps { counter-reset: pfstep; padding: 0; margin: 20px 0; }
#cms .page-cms ol.pf-steps > li {
list-style: none; counter-increment: pfstep;
position: relative; padding: 4px 0 14px 54px; margin: 0;
}
#cms .page-cms ol.pf-steps > li::before {
content: counter(pfstep);
position: absolute; left: 0; top: 0;
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--pf-display); font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet));
box-shadow: 0 0 10px rgba(255, 46, 136, .5);
}
#cms .page-cms ol.pf-steps > li:not(:last-child)::after {
content: ""; position: absolute; left: 17px; top: 40px; bottom: 2px; width: 2px;
background: linear-gradient(var(--pf-pink), transparent); opacity: .5;
}
/* Tablas */
#cms .page-cms .pf-table-wrap { overflow-x: auto; margin: 18px 0 24px; border-radius: 12px; border: 1px solid var(--pf-line); }
#cms .page-cms table.pf-table { width: 100%; border-collapse: collapse; background: transparent !important; margin: 0; font-size: 14px; }
#cms .page-cms table.pf-table th {
background: var(--pf-bg-3) !important; color: var(--pf-cyan) !important;
font-family: var(--pf-display); text-transform: uppercase; letter-spacing: .06em; font-size: 13px;
text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--pf-line) !important;
}
#cms .page-cms table.pf-table td { padding: 11px 14px; border-bottom: 1px solid var(--pf-line) !important; vertical-align: top; }
#cms .page-cms table.pf-table tr:last-child td { border-bottom: 0 !important; }
#cms .page-cms table.pf-table tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
#cms .page-cms table.pf-table code { color: var(--pf-pink); background: rgba(255, 46, 136, .1); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
/* Preguntas frecuentes */
#cms .page-cms .pf-faq { display: grid; gap: 12px; margin: 16px 0 28px; }
#cms .page-cms .pf-faq .pf-q {
padding: 16px 20px;
border-radius: 12px;
background: var(--pf-bg-3) !important;
border: 1px solid var(--pf-line) !important;
border-left: 3px solid var(--pf-cyan) !important;
}
#cms .page-cms .pf-faq .pf-q h3 { margin: 0 0 6px !important; color: #fff !important; font-size: 16px !important; }
#cms .page-cms .pf-faq .pf-q p { margin: 0 !important; }
#cms .page-cms .pf-faq .pf-q:nth-child(even) { border-left-color: var(--pf-pink) !important; }
/* Botones */
#cms .page-cms .pf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0 8px; }
#cms .page-cms a.pf-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px; border-radius: 10px;
font-family: var(--pf-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px;
color: #fff !important; text-decoration: none !important;
background: linear-gradient(135deg, var(--pf-pink), var(--pf-violet));
box-shadow: 0 0 10px rgba(255, 46, 136, .45);
transition: transform .15s, box-shadow .2s, filter .2s;
}
#cms .page-cms a.pf-btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 0 20px rgba(255, 46, 136, .8); }
#cms .page-cms a.pf-btn--alt { background: transparent; border: 1px solid var(--pf-cyan); box-shadow: 0 0 10px rgba(32, 227, 255, .35); }
#cms .page-cms a.pf-btn--alt:hover { background: rgba(32, 227, 255, .12); box-shadow: 0 0 18px rgba(32, 227, 255, .7); }
/* Bloque de contacto final */
#cms .page-cms .pf-contact {
margin-top: 34px; padding: 26px 22px; text-align: center; border-radius: 14px;
background: radial-gradient(600px 200px at 50% 0%, rgba(255, 46, 136, .15), transparent 70%), var(--pf-bg-3) !important;
border: 1px solid rgba(255, 46, 136, .45) !important;
box-shadow: 0 0 22px rgba(255, 46, 136, .15);
}
#cms .page-cms .pf-contact h2 { border: 0 !important; margin: 0 0 8px !important; padding: 0; text-shadow: 0 0 10px rgba(255, 46, 136, .6); }
#cms .page-cms .pf-contact p { margin: 0 0 4px !important; }
/* Fecha de actualización */
#cms .page-cms .pf-meta { margin-top: 26px !important; font-size: 13px; color: var(--pf-muted) !important; text-align: center; }
/* Formulario de desistimiento (texto para copiar) */
#cms .page-cms .pf-form {
margin: 16px 0; padding: 18px 20px; border-radius: 10px;
background: #0a0920 !important; border: 1px dashed var(--pf-line) !important;
font-size: 14px; color: var(--pf-text);
}
#cms .page-cms .pf-form p { margin: 0 0 8px !important; }
/* Restos de estilos antiguos pegados a mano: los neutralizamos para que no queden cajas blancas */
#cms .page-cms [style*="background"] { background: transparent !important; }
#cms .page-cms [style*="color:#555"], #cms .page-cms [style*="color:#444"], #cms .page-cms [style*="color:#333"],
#cms .page-cms [style*="color: #555"], #cms .page-cms [style*="color: #444"], #cms .page-cms [style*="color: #333"] { color: var(--pf-text) !important; }
#cms .page-cms [style*="#e6346f"] { color: var(--pf-pink) !important; border-color: var(--pf-pink) !important; }
@media (max-width: 575px) {
#cms .page-content.page-cms { padding: 18px 14px !important; font-size: 14px; }
#cms .page-cms h2 { font-size: 18px !important; }
#cms .page-cms ol.pf-steps > li { padding-left: 48px; }
}
#cms .page-cms code { color: var(--pf-pink) !important; background: rgba(255, 46, 136, .1) !important; padding: 1px 6px; border-radius: 4px; font-size: .9em; }
#cms .page-cms p, #cms .page-cms li, #cms .page-cms td { font-size: 15px; line-height: 1.7; }
#cms .page-cms .pf-card p, #cms .page-cms table.pf-table td { font-size: 14px; }
@media (max-width: 575px) { #cms .page-cms p, #cms .page-cms li { font-size: 14px; } }
#cms .page-cms, #cms .page-cms p, #cms .page-cms li, #cms .page-cms h2, #cms .page-cms h3, #cms .page-cms td { text-align: left !important; }
#cms .page-cms .pf-lead, #cms .page-cms .pf-contact, #cms .page-cms .pf-contact p, #cms .page-cms .pf-contact h2, #cms .page-cms .pf-meta { text-align: center !important; }
#cms .page-header h1 { line-height: 1.2 !important; }
/* =====================================================================
v2.1 · Contacto y Tiendas
===================================================================== */
/* --- /contactenos: columna de información --- */
#contact #left-column .contact-rich {
padding: 22px 20px !important;
border-radius: var(--pf-radius) !important;
}
#contact .contact-rich h4 {
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .1em;
font-size: 16px !important;
margin: 0 0 18px !important;
padding-bottom: 12px;
border-bottom: 1px solid var(--pf-line);
text-shadow: 0 0 10px rgba(255, 46, 136, .5);
}
#contact .contact-rich .block {
display: flex !important;
align-items: flex-start;
flex-wrap: wrap;
gap: 4px 14px;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
#contact .contact-rich .block .icon {
flex: 0 0 40px;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(32, 227, 255, .08);
border: 1px solid rgba(32, 227, 255, .45);
box-shadow: 0 0 10px rgba(32, 227, 255, .25);
float: none !important;
margin: 0 !important;
}
#contact .contact-rich .block .icon i { color: var(--pf-cyan) !important; font-size: 20px !important; margin: 0 !important; }
#contact .contact-rich .block .data {
flex: 1 1 0;
min-width: 0;
color: var(--pf-text) !important;
font-size: 14px;
line-height: 1.6;
padding-top: 2px;
overflow-wrap: anywhere;
}
#contact .contact-rich .block .data.email { flex-basis: calc(100% - 54px); color: var(--pf-muted) !important; }
#contact .contact-rich .block > a { margin-left: 54px; margin-top: -4px; font-size: 13px; white-space: nowrap; }
#contact .contact-rich .block .data.email { font-size: 13px; }
@media (max-width: 1199px) { #contact .contact-rich .block > a { margin-left: 0; margin-top: 6px; white-space: normal; overflow-wrap: anywhere; } }
#contact .contact-rich .block a { color: var(--pf-cyan) !important; font-weight: 600; }
#contact .contact-rich hr { border: 0 !important; height: 1px; background: var(--pf-line); margin: 16px 0 !important; }
/* --- /contactenos: formulario (sin doble panel) --- */
#contact .page-content .contact-form, #contact section.contact-form {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 6px 4px !important;
}
#contact .contact-form h3 {
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .1em;
font-size: 20px !important;
text-shadow: 0 0 10px rgba(255, 46, 136, .5);
}
#contact .contact-form .form-control-label { color: var(--pf-text) !important; font-weight: 600; }
#contact .contact-form .form-control-comment { color: var(--pf-muted) !important; font-size: 13px; }
#contact .contact-form textarea { min-height: 170px !important; resize: vertical; }
#contact .contact-form .form-control, #contact .contact-form select, #contact .contact-form textarea { border-radius: 10px !important; }
#contact .contact-form .bootstrap-filestyle .form-control { border-radius: 10px 0 0 10px !important; }
#contact .contact-form .bootstrap-filestyle .btn, #contact .contact-form .group-span-filestyle .btn {
border-radius: 0 10px 10px 0 !important;
}
#contact .contact-form footer { text-align: right; }
#contact .contact-form footer .btn-primary { min-width: 160px; }
/* --- /tiendas --- */
#stores .page-stores .store-item {
border-radius: var(--pf-radius) !important;
overflow: hidden;
}
#stores .store-item-container { display: flex; flex-wrap: wrap; align-items: center; padding: 26px 10px !important; }
#stores .store-picture img { border-radius: 12px; box-shadow: 0 0 0 1px var(--pf-line), 0 0 18px rgba(139, 92, 255, .25); }
#stores .store-description .card-title {
font-family: var(--pf-display) !important;
text-transform: uppercase;
letter-spacing: .08em;
text-shadow: 0 0 10px rgba(255, 46, 136, .5);
}
#stores .store-description address { color: var(--pf-text) !important; line-height: 1.6; }
#stores .store-description a, #stores .store-description a strong, #stores .store-description a i { color: var(--pf-cyan) !important; }
#stores .divide-left { border-left: 1px solid var(--pf-line) !important; }
#stores table.pf-hours, #stores .store-item table { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin: 0; }
#stores table.pf-hours th, #stores .store-item table th {
text-align: left !important;
padding: 10px 14px !important;
width: 1%;
color: #fff !important;
font-family: var(--pf-display);
font-weight: 700;
letter-spacing: .04em;
background: var(--pf-bg-3);
border-radius: 10px 0 0 10px;
white-space: nowrap;
vertical-align: middle;
}
#stores table.pf-hours td, #stores .store-item table td {
text-align: left !important;
padding: 10px 14px !important;
color: var(--pf-cyan) !important;
font-weight: 600;
background: var(--pf-bg-3);
border-radius: 0 10px 10px 0;
vertical-align: middle;
}
#stores .store-item table td ul { margin: 0; padding: 0; }
#stores .store-item table td li { list-style: none; }
#stores .store-item table td li::before { display: none; }
#stores .store-item-footer, #stores .store-item-footer * { color: var(--pf-text) !important; }
@media (max-width: 767px) {
#stores .divide-left { border-left: 0 !important; border-top: 1px solid var(--pf-line) !important; margin-top: 16px; padding-top: 12px; }
}
#stores table.pf-hours td { line-height: 1.6; white-space: nowrap; }
/* =====================================================================
v2.2 · Descripción de categoría y barra "Ordenar por"
===================================================================== */
/* Descripción de la categoría con aire */
#category .block-category, .block-category.card {
padding: 26px clamp(18px, 3vw, 36px) 30px !important;
}
#category .block-category .category-cover-block, #category .block-category .category-desc { padding: 0 !important; margin: 0 !important; }
#category #category-description { max-width: 860px; margin: 0 auto !important; }
#category #category-description p { font-size: 15px; line-height: 1.75; margin: 0 0 14px !important; text-align: left !important; }
#category #category-description > p img, #category #category-description > img {
display: block;
max-width: 100%;
height: auto;
margin: 18px auto 0;
border-radius: 12px;
box-shadow: 0 0 0 1px var(--pf-line), 0 0 24px rgba(139, 92, 255, .25);
}
/* Barra de vista / total / ordenar */
#js-product-list-top.products-selection {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin: 0 0 22px !important;
padding: 14px 20px !important;
border-radius: var(--pf-radius) !important;
}
#js-product-list-top.products-selection::before, #js-product-list-top.products-selection::after { display: none !important; }
#js-product-list-top > [class*="col-"] { width: auto !important; max-width: none !important; flex: 0 1 auto; padding: 0 !important; float: none !important; }
#js-product-list-top .display-and-count { display: flex !important; align-items: center; gap: 16px; }
#js-product-list-top .display-mode { display: flex; gap: 8px; margin: 0 !important; }
#js-product-list-top .display-mode span {
width: 38px !important; height: 38px !important; margin: 0 !important;
display: flex !important; align-items: center; justify-content: center;
border-radius: 10px;
background: transparent !important;
border: 1px solid var(--pf-line);
color: var(--pf-muted) !important;
cursor: pointer;
transition: border-color .2s, box-shadow .2s, color .2s;
}
#js-product-list-top .display-mode span i { color: inherit !important; font-size: 16px; }
#js-product-list-top .display-mode span:hover { color: #fff !important; border-color: var(--pf-cyan); }
#js-product-list-top .display-mode span.active, #js-product-list-top .display-mode span.selected {
color: #fff !important;
border-color: var(--pf-pink);
background: rgba(255, 46, 136, .12) !important;
box-shadow: 0 0 10px rgba(255, 46, 136, .4);
}
#js-product-list-top .total-products p { margin: 0 !important; color: var(--pf-muted) !important; }
#js-product-list-top .sort-by-row {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
margin: 0 !important;
padding: 0 !important;
}
#js-product-list-top .sort-by-row > [class*="col-"] { width: auto !important; max-width: none !important; padding: 0 !important; float: none !important; }
#js-product-list-top .sort-by { white-space: nowrap; margin: 0 !important; color: var(--pf-muted) !important; }
#js-product-list-top .products-sort-order { position: relative; min-width: 300px; }
#js-product-list-top .products-sort-order .select-title {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100% !important;
height: 44px !important;
padding: 0 14px 0 16px !important;
border-radius: 10px !important;
border: 1px solid rgba(32, 227, 255, .35) !important;
background: var(--pf-bg-2) !important;
color: #fff !important;
font-size: 14px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: border-color .2s, box-shadow .2s;
}
#js-product-list-top .products-sort-order .select-title:hover,
#js-product-list-top .products-sort-order.open .select-title,
#js-product-list-top .products-sort-order .select-title[aria-expanded="true"] {
border-color: var(--pf-cyan) !important;
box-shadow: 0 0 12px rgba(32, 227, 255, .3);
}
#js-product-list-top .products-sort-order .select-title i { float: none !important; margin: 0 !important; color: var(--pf-cyan) !important; flex: 0 0 auto; }
#js-product-list-top .products-sort-order .dropdown-menu {
width: 100%;
margin-top: 6px !important;
padding: 6px !important;
border-radius: 12px !important;
border: 1px solid rgba(32, 227, 255, .4) !important;
background: #0e0c2b !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 18px rgba(32, 227, 255, .15) !important;
}
#js-product-list-top .products-sort-order .select-list {
padding: 9px 12px !important;
border-radius: 8px;
color: var(--pf-text) !important;
white-space: nowrap;
}
#js-product-list-top .products-sort-order .select-list:hover,
#js-product-list-top .products-sort-order .select-list.current {
background: rgba(255, 46, 136, .12) !important;
color: #fff !important;
text-shadow: none !important;
}
/* Móvil: el desplegable ocupa todo el ancho */
@media (max-width: 767px) {
#js-product-list-top.products-selection { padding: 12px !important; }
#js-product-list-top > [class*="col-"] { flex: 1 1 100%; }
#js-product-list-top .products-sort-order { min-width: 0; flex: 1 1 auto; }
#js-product-list-top .sort-by-row { width: 100%; }
}
/* v2.3 · Rejilla de franquicias dentro de la descripción (tabla con logos) */
#category #category-description table {
width: 100% !important;
margin: 26px auto 4px !important;
border: 0 !important;
background: transparent !important;
}
#category #category-description table tbody { display: block; }
#category #category-description table tr {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
#category #category-description table td {
flex: 0 0 128px;
width: 128px !important;
padding: 16px 10px 14px !important;
border: 1px solid var(--pf-line) !important;
border-radius: 14px;
background: var(--pf-bg-3) !important;
text-align: center !important;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
#category #category-description table td:hover {
transform: translateY(-4px);
border-color: var(--pf-pink) !important;
box-shadow: 0 0 0 1px var(--pf-pink), 0 0 18px rgba(255, 46, 136, .4);
}
/* Marco del logo: conserva el color de borde de cada franquicia */
#category #category-description table td > div:first-child {
width: 84px !important;
height: 84px !important;
margin: 0 auto !important;
border-width: 3px !important;
border-radius: 18px !important;
overflow: hidden;
background: #fff;
box-shadow: 0 0 12px rgba(255, 255, 255, .12);
}
#category #category-description table td > div:first-child a { display: block; width: 100%; height: 100%; text-decoration: none !important; }
#category #category-description table td img {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 4px;
object-fit: contain;
border-radius: 0 !important;
box-shadow: none !important;
background: #fff;
}
#category #category-description table td > div:last-child { margin-top: 12px !important; line-height: 1.25 !important; }
#category #category-description table td > div:last-child a {
color: #fff !important;
text-decoration: none !important;
font-family: var(--pf-display);
font-size: 13px;
letter-spacing: .04em;
text-transform: uppercase;
}
#category #category-description table td:hover > div:last-child a { color: var(--pf-pink) !important; text-shadow: var(--pf-glow-pink); }
@media (max-width: 575px) {
#category #category-description table tr { gap: 10px; }
#category #category-description table td { flex-basis: calc(50% - 10px); width: auto !important; }
}
/* =====================================================================
v2.4 · Botón flotante de WhatsApp + accesibilidad
===================================================================== */
.pf-sr-only {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important; border: 0 !important;
}
/* v2.5: mismo boton que v2.4, sin ondas y con el texto en blanco puro */
.pf-wa {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99970;
display: flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 0 14px;
border-radius: 999px;
color: #fff !important;
text-decoration: none !important;
background: linear-gradient(135deg, #1fd65f, #0fae4a);
border: 1px solid rgba(255, 255, 255, .25);
box-shadow: 0 0 0 1px rgba(37, 211, 102, .35), 0 0 18px rgba(37, 211, 102, .55), 0 10px 26px rgba(0, 0, 0, .45);
transition: transform .2s, box-shadow .2s, opacity .3s;
}
.pf-wa:hover, .pf-wa:focus-visible {
transform: translateY(-3px);
box-shadow: 0 0 0 1px rgba(37, 211, 102, .6), 0 0 28px rgba(37, 211, 102, .85), 0 14px 30px rgba(0, 0, 0, .5);
color: #fff !important;
outline: none;
}
.pf-wa__icon { flex: 0 0 28px; color: #fff !important; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .5)); }
.pf-wa__label,
.pf-wa:hover .pf-wa__label,
.pf-wa:focus .pf-wa__label,
.pf-wa:visited .pf-wa__label {
font-family: var(--pf-display);
font-weight: 700;
font-size: 14px;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
opacity: 1 !important;
background: none !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important;
}
/* Sin ondas */
.pf-wa::before, .pf-wa::after { content: none !important; display: none !important; animation: none !important; }
/* El boton "volver arriba" sube para no taparse con WhatsApp */
a.scrollTop { bottom: 88px !important; right: 26px !important; }
/* Movil: solo el icono redondo */
@media (max-width: 767px) {
.pf-wa { right: 12px; bottom: 12px; width: 52px; height: 52px; padding: 0; justify-content: center; }
.pf-wa__label { display: none; }
a.scrollTop { bottom: 74px !important; right: 16px !important; }
}
/* Mientras se muestra el aviso de cookies, el boton de WhatsApp espera */
body:has(#pf-cookies:not([hidden])) .pf-wa { opacity: 0; pointer-events: none; transform: translateY(10px); }
/* ===== v2.6 · Ventana de ampliar foto del producto ===== */
/* .ht-main-content tiene z-index:1 y dejaba la ventana por debajo del fondo oscuro */
body.modal-open .ht-main-content { z-index: auto !important; }
body.modal-open .pf-wa { opacity: 0; pointer-events: none; }
#product-modal .modal-content {
background: var(--pf-bg-2) !important;
border: 1px solid rgba(255, 46, 136, .45) !important;
border-radius: 16px !important;
box-shadow: 0 0 30px rgba(255, 46, 136, .25), 0 20px 50px rgba(0, 0, 0, .6) !important;
overflow: hidden;
}
#product-modal .modal-body { background: transparent !important; }
#product-modal figure img.product-cover-modal { background: #fff; border-radius: 12px; }
#product-modal .image-caption { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, .1) !important; padding-top: 14px; }
#product-modal .image-caption, #product-modal .image-caption p { color: #d9d6f5 !important; font-size: 14px; line-height: 1.6; }
#product-modal .product-images img { background: #fff; border-radius: 10px; border: 2px solid transparent !important; }
#product-modal .product-images img.selected, #product-modal .product-images img:hover { border-color: var(--pf-pink) !important; box-shadow: 0 0 12px rgba(255, 46, 136, .5); }
.modal-backdrop.in, .modal-backdrop.show { opacity: .85 !important; background: #04030f !important; }