/* Inter 900 self-hosted (antes Google Fonts) — mismos ficheros gstatic latin/latin-ext */ @font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 900; src: url("../fonts/inter-latin-900-normal.woff2") format("woff2"); unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd; } @font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 900; src: url("../fonts/inter-latin-ext-900-normal.woff2") format("woff2"); unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff; } /* ========================================================================== COMPONENTES GLOBALES ========================================================================== */ h1,.h1 { font-size: var(--font-size-xl); } h2,.h2 { font-size: var(--font-size-lg); } .weu-products-section-title, .products-section-title, :is(.related-products, .featured-products-container, .cross-selling-splide-container, .wcsp-carousel) > p.h2.text-uppercase { font-family: "Inter", sans-serif; font-weight: 900 !important; line-height: 1.2; color: var(--weu-color-black); letter-spacing: 0.02em; } .weu-products-section-title { margin-bottom: var(--weu-spacing-sm); } #category .block-category h1.page-title-section, #category .block-category .page-title-section.h2 { font-family: "Inter", sans-serif; font-weight: 900 !important; } h3,.h3 { font-size: var(--font-size-md); } h4,.h4 { font-size: var(--font-size-sm); } h5,.h5 { font-size: var(--font-size-xs); } h6,.h6 { font-size: var(--font-size-base); } .btn, .header-block__action-btn, .card, input[type="text"] { border-radius: var(--weu-radius-default); } .form-control, .modal.product-comment-modal .form-control, .modal.product-comment-modal textarea, .form-select { border: 1px solid var(--weu-color-form-control-border); border-radius: var(--weu-radius-default); padding: var(--weu-spacing-xs) var(--weu-spacing-sm); height: 40px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-control:focus, .form-control:focus-visible, .form-select:focus, .form-select:focus-visible, textarea.form-control:focus, textarea.form-control:focus-visible { border-color: var(--weu-focus-border-color); box-shadow: var(--weu-focus-ring-shadow); outline: none; } .form-control.is-invalid { border-color: var(--weu-color-primary) !important; } /* 1. Método moderno (para navegadores actuales si el input es nativo) */ input[type="checkbox"] { accent-color: var(--weu-color-primary); /* Puedes cambiar este código hexadecimal por el rojo exacto de tu marca */ border-radius: 4px!important; } .form-check-input:focus, .form-check-input:focus-visible { border-color: var(--weu-focus-border-color); box-shadow: var(--weu-focus-ring-shadow); outline: none; } /* 2. Método para el tema Classic de PrestaShop 1.7 (checkboxes personalizados) */ .custom-checkbox input[type="checkbox"]:checked + span { background-color: var(--weu-color-primary) !important; border-color: var(--weu-color-primary) !important; } /* Opcional: Cambiar también el color al pasar el ratón por encima (hover) */ .custom-checkbox input[type="checkbox"]:focus + span, .custom-checkbox input[type="checkbox"]:hover + span { border-color: var(--weu-color-primary) !important; } .form-check-input:checked { background-color: var(--weu-color-primary) !important; border-color: var(--weu-color-primary) !important; } .modal.product-comment-modal textarea, .modal.product-comment-modal textarea.form-control, textarea.form-control { min-height: 150px; } .input-group.password-field:focus-within, .input-group:focus-within:has(.form-control) { border-radius: var(--weu-radius-default); box-shadow: var(--weu-focus-ring-shadow); } .input-group.password-field:focus-within .form-control, .input-group:focus-within:has(.form-control) .form-control { border-color: var(--weu-focus-border-color); box-shadow: none; outline: none; } .input-group.password-field:focus-within .btn, .input-group:focus-within:has(.form-control) .btn { border-color: var(--weu-focus-border-color); } .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: calc(var(--bs-border-width) * -1); height: 40px; background-color: transparent; border: 1px solid var(--weu-color-form-control-border); } [data-weu-tooltip] { position: relative; cursor: help; } [data-weu-tooltip]::after { content: attr(data-weu-tooltip); position: absolute; z-index: 1080; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 280px; padding: var(--bs-tooltip-padding-y, 8px) var(--bs-tooltip-padding-x, 14px); border-radius: var(--weu-tooltip-radius); background: var(--weu-tooltip-bg); color: var(--weu-tooltip-color); font-size: var(--font-size-sm); font-weight: var(--weu-tooltip-font-weight, 400); line-height: 1.3; text-align: center; white-space: normal; box-shadow: var(--weu-tooltip-shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } [data-weu-tooltip]::before { content: ''; position: absolute; z-index: 1080; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: calc(var(--weu-tooltip-arrow-size) / 2) solid transparent; border-top-color: var(--weu-tooltip-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s; } [data-weu-tooltip]:hover::after, [data-weu-tooltip]:hover::before, [data-weu-tooltip]:focus-visible::after, [data-weu-tooltip]:focus-visible::before { opacity: 1; visibility: visible; } [data-weu-tooltip]:hover::after, [data-weu-tooltip]:focus-visible::after { transform: translateX(-50%) translateY(0); } .weu-floating-tooltip { position: fixed; z-index: 1080; max-width: min(280px, calc(100vw - 16px)); padding: var(--bs-tooltip-padding-y, 8px) var(--bs-tooltip-padding-x, 14px); border-radius: var(--weu-tooltip-radius); background: var(--weu-tooltip-bg); color: var(--weu-tooltip-color); font-size: var(--font-size-sm); font-weight: var(--weu-tooltip-font-weight, 400); line-height: 1.3; text-align: center; white-space: normal; box-shadow: var(--weu-tooltip-shadow); pointer-events: none; } .weu-floating-tooltip[hidden] { display: none !important; } .product-payment-methods__item, .webike-feature-card, .webike-feature-card__content { overflow: visible; } .tooltip { --bs-tooltip-zindex: 1080; --bs-tooltip-max-width: 280px; --bs-tooltip-padding-x: 14px; --bs-tooltip-padding-y: 8px; --bs-tooltip-font-size: var(--font-size-sm); --bs-tooltip-color: var(--weu-tooltip-color); --bs-tooltip-bg: var(--weu-tooltip-bg); --bs-tooltip-border-radius: var(--weu-tooltip-radius); --bs-tooltip-opacity: 1; --bs-tooltip-arrow-width: var(--weu-tooltip-arrow-size); --bs-tooltip-arrow-height: calc(var(--weu-tooltip-arrow-size) / 2); } .tooltip.show { opacity: 1; } .tooltip .tooltip-inner { font-weight: var(--weu-tooltip-font-weight, 400); line-height: 1.3; text-align: center; color: var(--weu-tooltip-color); background-color: var(--weu-tooltip-bg); border-radius: var(--weu-tooltip-radius); box-shadow: var(--weu-tooltip-shadow); } .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--weu-tooltip-bg); } .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--weu-tooltip-bg); } .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--weu-tooltip-bg); } .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--weu-tooltip-bg); } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--weu-color-primary); --bs-btn-border-color: var(--weu-color-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--weu-color-primary-hover); --bs-btn-hover-border-color: var(--weu-color-primary-hover); --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--weu-color-primary-hover); --bs-btn-active-border-color: var(--weu-color-primary-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--weu-color-primary); --bs-btn-disabled-border-color: var(--weu-color-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--weu-color-primary); border-color: var(--weu-color-primary); color: var(--weu-white); } .dynamic-loading .loadMore.btn-primary { --bs-btn-color: var(--weu-color-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--weu-color-primary); --bs-btn-hover-color: var(--weu-color-primary); --bs-btn-hover-bg: var(--weu-color-primary-soft); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--weu-color-primary); --bs-btn-active-bg: var(--weu-color-primary-soft); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--weu-color-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--weu-color-primary); background-color: transparent; color: var(--weu-color-primary); border: 1px solid var(--weu-color-primary); border-radius: var(--weu-radius-default); font-weight: 600; padding: 8px 24px; box-shadow: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .dynamic-loading .loadMore.btn-primary:hover, .dynamic-loading .loadMore.btn-primary:focus, .dynamic-loading .loadMore.btn-primary:active { background-color: var(--weu-color-primary-soft); border-color: transparent; color: var(--weu-color-primary); box-shadow: none; } .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: var(--weu-color-black); --bs-btn-border-color: var(--weu-color-black); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--weu-color-black); --bs-btn-hover-border-color: var(--weu-color-black); --bs-btn-focus-shadow-rgb: 130, 138, 145; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--weu-color-black); --bs-btn-active-border-color: var(--weu-color-black); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--weu-color-black); --bs-btn-disabled-border-color: var(--weu-color-black); } .btn-outline-primary { --bs-btn-color: var(--weu-color-primary); --bs-btn-border-color: var(--weu-color-primary); --bs-btn-hover-color: var(--weu-white); --bs-btn-hover-bg: var(--weu-color-primary); --bs-btn-hover-border-color: var(--weu-color-primary); --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: var(--weu-white); --bs-btn-active-bg: var(--weu-color-primary); --bs-btn-active-border-color: var(--weu-color-primary); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--weu-color-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--weu-color-primary); --bs-gradient: none; } .grecaptcha-badge { z-index: 1; } a { color: var(--weu-color-black); text-decoration: none; } .search-widgets__dropdown { z-index:1; } .password-field .btn .tbc-heroicon { width: 24px; height: 24px; } .material-icons { font-size: var(--font-size-xl); } .material-icons:hover { color: var(--weu-color-black); } body#product #notifications article.alert.alert-info { display: none; } #search_widget .tbc-heroicon-magnifying-glass { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); filter: none; background-size: auto 24px; mask-size: 24px; background-position: center; pointer-events: none; } #search_widget input[type="search"]::-webkit-search-cancel-button, #search_widget input[type="search"]::-webkit-search-decoration, #search_widget input[type="search"]::-webkit-search-results-button, #search_widget form i.clear, #search_widget .clear { display: none !important; -webkit-appearance: none; appearance: none; } .weu-header-new-products .tbc-heroicon { width: 16px; height: 16px; filter: none; } .header-bottom__row { gap: var(--weu-spacing-sm); margin: 0; } @media (max-width: 991px) { .weu-header-bottom-row { flex-wrap: nowrap; gap: 0; align-items: center; justify-content: space-between; } .weu-header-bottom-row .weu-header-brand { flex: 0 1 auto; min-width: 0; gap: 4px; margin: 0 !important; padding: 0; } .weu-header-bottom-row .weu-header-tools { flex: 1 1 auto; min-width: 0; gap: 0; margin: 0 !important; margin-left: auto !important; padding: 0; justify-content: flex-end; } .weu-header-bottom-row .mobile_menu { flex: 0 0 auto; margin: 0 !important; padding: 0; } .weu-header-bottom-row .search__mobile, .weu-header-bottom-row .header-actions { flex: 0 0 auto; margin: 0 !important; padding: 0; } .weu-header-bottom-row .weu-header-logo { flex: 0 1 auto; min-width: 0; margin: 0 !important; justify-content: flex-start; padding: 0; } .weu-header-bottom-row .header-actions { gap: 0; } .weu-header-bottom-row .header-actions > .d-none { display: none !important; } .weu-header-bottom-row .header-actions #_desktop_user_info, .weu-header-bottom-row .header-actions #blockcart-wrapper, .weu-header-bottom-row .header-actions #_desktop_cart { display: flex; align-items: center; } .weu-header-bottom-row .header-actions #blockcart-wrapper::before, .weu-header-bottom-row .header-actions #_desktop_cart::before { content: ''; display: block; width: 1px; height: 26px; background-color: rgba(255, 255, 255, 0.28); margin-left: 8px; margin-right: 8px; flex-shrink: 0; align-self: center; } .weu-header-bottom-row .mobile_menu .header-block__action-btn, .weu-header-bottom-row .search__mobile .header-block__action-btn, .weu-header-bottom-row .header-actions .header-block__action-btn, .weu-header-bottom-row .header-actions #blockcart-wrapper .header-block__action-btn, .weu-header-bottom-row .header-actions #blockcart-wrapper a[role="button"] { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .weu-header-bottom-row .mobile_menu .weu-burger-btn { width: 44px; height: 44px; border: none; background: transparent; } .weu-header-bottom-row .blockcart { margin-right: 0 !important; } } @media (min-width: 992px) { .weu-header-bottom-row { flex-wrap: nowrap !important; } .weu-header-bottom-row .weu-header-brand { gap: 8px; flex: 0 0 auto; } .weu-header-bottom-row .weu-header-tools { flex: 1 1 0; min-width: 0; margin-left: 0 !important; } .weu-header-bottom-row .mobile_menu { margin-right: 0 !important; margin-left: 0 !important; } .weu-header-bottom-row .weu-header-logo { margin-left: 0 !important; margin-right: 0 !important; flex: 0 0 auto; } .weu-header-bottom-row .search__desktop { flex: 1 1 0 !important; min-width: 0; max-width: none; width: auto; } .weu-header-bottom-row .search__desktop #_desktop_search { flex: 1 1 0; min-width: 0; } .weu-header-bottom-row .search__desktop #_desktop_search, .weu-header-bottom-row .search__desktop #search_widget, .weu-header-bottom-row .search__desktop #search_widget form { width: 100% !important; max-width: none !important; } .weu-header-bottom-row .search__desktop #search_widget { float: none !important; min-width: 0; margin-bottom: 0; } .weu-header-bottom-row .search__desktop #search_widget form { margin-left: 0 !important; } .weu-header-bottom-row .header-actions { flex: 0 0 auto; } } .logo, .mobile_menu, .header-actions { flex-grow: 0; } .search__desktop { flex-grow: 1; } .container { width: 100%; max-width: var(--weu-width-container); } /* Cabecera + breadcrumb + contenido: mismo margen izquierdo en todos los niveles */ #header .weu-top-bar .container-md, #header .header-bottom__container, #header .weu-header-new-products .container-md, .breadcrumb__wrapper > .container, .weu-footer .container { padding-left: var(--weu-header-inline-padding) !important; padding-right: var(--weu-header-inline-padding) !important; max-width: var(--weu-width-container); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } /* Acceso rápido: alinear al borde (antes que el menú hamburguesa) */ #header .weu-header-new-products .container-md { padding-left: 0 !important; } .breadcrumb__wrapper > .container { padding-top: 12px; padding-bottom: 12px; } /* Hamburguesa: quitar el gutter extra de la primera columna del row */ .header-bottom__row.weu-header-bottom-row > .weu-header-brand { padding-left: 0 !important; } /* Carruseles móvil "1 + peek": el track recorta y los slides mantienen su ancho fijo */ @media (max-width: 575px) { .splide.is-initialized[data-weu-mobile-peek] .splide__track { overflow: hidden !important; } .splide.is-initialized[data-weu-mobile-peek] .splide__slide { flex-shrink: 0 !important; } } .breadcrumb__wrapper { border-bottom: 1px solid var(--weu-color-grey); background-color: transparent; max-width: 100%; overflow-x: clip; } .breadcrumb { --bs-breadcrumb-item-padding-x: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .breadcrumb::-webkit-scrollbar { display: none; } .breadcrumb-item { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; padding: 0; } .breadcrumb-item a { font-size: var(--font-size-sm); color: var(--weu-color-black); white-space: nowrap; text-decoration: none; } .breadcrumb-item span { text-transform: capitalize; font-size: var(--font-size-sm); color: var(--weu-color-black); white-space: nowrap; display: inline-block; text-decoration: none; } .breadcrumb-item:last-child span, .breadcrumb-item--current span { text-transform: none; } .breadcrumb-item+.breadcrumb-item { padding-left: 0; padding-right: 0; } .breadcrumb-item+.breadcrumb-item:before { content: var(--bs-breadcrumb-divider, "/"); padding-left: 4px; padding-right: 4px; float: none; } .product-flags { gap: var(--weu-spacing-sm); } .badge { display: inline-block; padding: 5px 12px; font-weight: 300; border-radius: 100px; font-weight: var(--font-weight-bold); text-transform: uppercase; line-height: 1.2; } /* Miniaturas: etiqueta compacta, minúsculas, alineada con el logo de marca */ .product-miniature .product-flags .badge, .product-miniature .product-flags li.badge { margin: 0 !important; font-size: 10px !important; padding: 2px 8px !important; line-height: 1.15 !important; letter-spacing: 0.01em; text-transform: lowercase !important; } @media (max-width: 767.98px) { .product-miniature .product-flags .badge, .product-miniature .product-flags li.badge { font-size: 9px !important; padding: 2px 7px !important; } } .badge.discount { background-color: var(--weu-color-primary); color: var(--weu-white); border-color: var(--weu-color-primary); } .badge.on-sale, .product-flags li.badge.on-sale, .product-flags .badge.on-sale { --bs-badge-color: var(--weu-color-primary); background-color: var(--weu-color-grey) !important; color: var(--weu-color-primary) !important; border: 1.5px solid var(--weu-color-primary) !important; font-size: var(--font-size-sm); font-weight: 600; line-height: 1.2; text-transform: none; } /* * Hummingbird mete .product-flags .badge:not(.discount) en @layer bs-base con !important. * Un !important fuera de capa pierde frente a uno dentro de capa → hay que override en bs-base. */ @layer bs-base { .product-flags .badge.out_of_stock:not(.discount), .product-flags li.badge.out_of_stock:not(.discount), .product-miniature .product-flags .badge.out_of_stock:not(.discount), .page-product .product-flags .badge.out_of_stock:not(.discount) { --bs-badge-color: #1d1d1d; background-color: #ededed !important; color: #1d1d1d !important; border: none !important; text-transform: none; } } .user-info .header-block__action-btn::after { content:none; } .user-info .dropdown-menu { background-color: var(--weu-color-grey-dark); border-radius: var(--weu-radius-default); } .user-info .dropdown-menu .dropdown-item { color: var(--weu-white); display: flex; align-items: center; gap: 16px; } .user-info .dropdown-menu .dropdown-item .tbc-heroicon { filter: none; height: 24px; width: 24px; } /* Hover/foco/activo: fondo de marca, texto e iconos legibles */ .user-info .dropdown-menu .dropdown-item:hover, .user-info .dropdown-menu .dropdown-item:focus, .user-info .dropdown-menu .dropdown-item:active, .user-info .dropdown-menu .dropdown-item.active { background-color: var(--weu-color-primary); color: var(--weu-white); } .user-info .dropdown-menu .dropdown-item:hover .tbc-heroicon, .user-info .dropdown-menu .dropdown-item:focus .tbc-heroicon, .user-info .dropdown-menu .dropdown-item:active .tbc-heroicon, .user-info .dropdown-menu .dropdown-item.active .tbc-heroicon { color: var(--weu-white); } .dropdown-divider { border-top-color: #555; } @media(max-width: 991px) { .search__desktop { display: none !important; } #checkout .weu-top-bar-item--contact { display: inline-flex !important; } #checkout .weu-top-bar__grid { justify-content: center; } #checkout .weu-top-bar-item__link { font-size: 15px; } #checkout .weu-top-bar-item__icon { width: var(--font-size-base); height: var(--font-size-base); } } @media(max-width:767px) { .header-bottom__row { gap: 0; width: 100%; } .blockcart { margin-right: var(--weu-spacing-sm)!important; } .weu-top-bar__content p { font-size: var(--font-size-sm); text-align: center; } #checkout .weu-top-bar__content { display: none; } } /* ========================================================================== ESTILOS DEL HEADER NAV (DRILL-DOWN ESTRUCTURADO) ========================================================================== */ /* --- Estilos para la Top Bar (header_nav) --- */ .weu-top-bar { background-color: var(--weu-color-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* No colapsar la top bar al pin: al reducir su altura el scrollY baja por debajo del umbral y la cabecera entra en bucle pin/unpin (parpadeo). La top bar ya sale de pantalla con el scroll natural. */ .weu-top-bar__grid { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding-top: var(--weu-spacing-xs); padding-bottom: var(--weu-spacing-xs); } .weu-top-bar-item { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; color: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; white-space: nowrap; } .weu-top-bar-item__icon.tbc-heroicon { width: 18px; height: 18px; flex-shrink: 0; filter: none !important; -webkit-filter: none !important; background-color: var(--weu-white) !important; opacity: 1; } .weu-top-bar-item__icon--accent.tbc-heroicon { background-color: var(--weu-color-primary) !important; } .weu-top-bar-item__icon--whatsapp { width: 18px; height: 18px; flex-shrink: 0; filter: none; opacity: 1; } .weu-top-bar-item__label { font-weight: 500; color: rgba(255, 255, 255, 0.72); } .weu-top-bar-item__emphasis { font-weight: 700; color: var(--weu-white); letter-spacing: 0.3px; } .weu-top-bar-item__link { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.92) !important; text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; transition: color 0.2s ease, opacity 0.2s ease; } .weu-top-bar-item__link:hover, .weu-top-bar-item__link:focus { color: var(--weu-white) !important; opacity: 1; text-decoration: none; } .weu-top-bar-item__sep { color: rgba(255, 255, 255, 0.22); font-size: 11px; font-weight: 400; line-height: 1; flex-shrink: 0; } .weu-top-bar-mark { position: relative; display: inline-flex; align-items: center; padding: 1px 10px; min-height: 22px; } .weu-top-bar-mark__text { position: relative; z-index: 2; font-weight: 700; color: var(--weu-white); text-transform: lowercase; line-height: 1.2; } .weu-top-bar-mark__shape { position: absolute; left: 0; right: 0; top: 50%; height: 100%; z-index: 1; transform: translateY(-50%) skewX(-14deg) scaleX(0); transform-origin: left center; pointer-events: none; } .weu-top-bar-mark--delivery .weu-top-bar-mark__shape { background: var(--weu-alert-success-bg, #eefaf1); animation: weuTopBarMarkReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.35s; } .weu-top-bar-mark--delivery .weu-top-bar-mark__text { color: var(--weu-alert-success-text, #1c6b3a); font-weight: 700; } .weu-top-bar-mark--muted .weu-top-bar-mark__shape { background: rgba(255, 255, 255, 0.07); transform: translateY(-50%) skewX(-14deg) scaleX(1); } .weu-top-bar-mark--muted .weu-top-bar-mark__text { font-weight: 600; text-transform: none; } @keyframes weuTopBarMarkReveal { from { transform: translateY(-50%) skewX(-14deg) scaleX(0); } to { transform: translateY(-50%) skewX(-14deg) scaleX(1); } } .weu-top-bar-rating { display: inline-flex; align-items: center; gap: 8px; } .weu-top-bar-rating__stars { color: var(--weu-color-yellow); font-size: 11px; letter-spacing: 0.5px; line-height: 1; } .weu-delivery-widget { display: inline-flex; align-items: center; gap: 8px; } .weu-delivery-widget__text { display: inline-flex; align-items: center; gap: 6px; } .weu-top-bar a { color: rgba(255, 255, 255, 0.92) !important; transition: opacity 0.3s ease; } .weu-top-bar a:hover { opacity: 1; } .header-top__right { display: flex; justify-content: flex-end; align-items: center; } .header-top-desktop.row { align-items: center; min-height: 40px; } .header-top__left { display: flex; align-items: center; } .header-top__right div#_desktop_language_selector { width: fit-content; margin-left: auto; display: flex; align-items: center; } .header-top__right div#_desktop_language_selector .dropdown-toggle { color: var(--weu-white); padding-top: 0; padding-bottom: 0; line-height: 1.2; } .header-top-desktop a { font-weight: 400; } @media (max-width: 1199px) { .weu-top-bar-item { font-size: 12px; gap: 6px; } .weu-top-bar-item__icon { width: 16px; height: 16px; } .weu-top-bar-mark { padding: 1px 8px; min-height: 20px; } .weu-top-bar-mark__text { font-size: 11px; } .weu-top-bar-rating__stars { font-size: 10px; } } @media (max-width: 991px) { .weu-top-bar__grid { justify-content: center; gap: 16px; } .weu-top-bar-item { font-size: 15px; } .weu-top-bar-item__link { font-size: 15px; } .weu-top-bar-mark__text { font-size: 15px; } .weu-top-bar__grid.is-rotating { display: grid; grid-template: 1fr / 1fr; gap: 0; overflow: hidden; width: 100%; } .weu-top-bar__grid.is-rotating .weu-top-bar-item { grid-area: 1 / 1; justify-self: center; align-self: center; max-width: 100%; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s ease; pointer-events: none; } .weu-top-bar__grid.is-rotating .weu-top-bar-item.is-active { opacity: 1; visibility: visible; pointer-events: auto; } } @media (max-width: 767px) { .weu-top-bar { max-height: 40px; } .weu-top-bar__grid { min-height: 36px; gap: 12px; } .weu-top-bar-item { font-size: 15px; gap: 6px; } .weu-top-bar-item__label { font-weight: 600; } .weu-top-bar-rating__stars { display: none; } } .header-top__left a { font-weight: 400; } .weu-external-link { color: var(--weu-white); text-decoration: none; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 800; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.2); padding: 5px 15px; border-radius: var(--weu-radius-tag); /* 16px */ transition: all 0.3s ease; white-space: nowrap; } .weu-external-link:hover { background: var(--weu-white); color: var(--weu-color-primary) !important; transform: translateY(-1px); } .weu-external-link i { color: var(--weu-white); } .weu-external-link:hover i { color: var(--weu-color-primary) !important; } /* Barra superior y categorías scrollean; solo logo + búsqueda fijos al scroll */ body:not(#checkout):not(.page-checkout) #header.header { position: static !important; overflow: visible !important; } body:not(#checkout):not(.page-checkout) #header .header-sticky { z-index: 200; width: 100%; max-width: 100%; background-color: var(--weu-color-black); } body:not(#checkout):not(.page-checkout) #header .header-sticky.is-pinned { position: fixed; top: 0; left: 0; right: 0; } body:not(#checkout):not(.page-checkout) #header .header-sticky-spacer { display: block; height: 0; margin: 0; padding: 0; border: 0; } body:not(#checkout):not(.page-checkout) #header .header-bottom { background-color: var(--weu-color-black); border-bottom: 1px solid var(--weu-color-black); } .header-bottom__bottom { min-height: 50px; background-color: var(--weu-color-black); display: flex; align-items: stretch; justify-content: center; max-width: 100%; overflow-x: clip; } .blockcart { margin-right: var(--weu-spacing-md); } /* ========================================================================== ESTILOS DEL HEADER BOTTOM (DRILL-DOWN ESTRUCTURADO) ========================================================================== */ header .tbc-heroicon { filter: invert(1); } header .weu-top-bar .tbc-heroicon.weu-top-bar-item__icon { filter: none !important; -webkit-filter: none !important; background-color: var(--weu-white) !important; } header .weu-top-bar .weu-top-bar-item__icon--accent.tbc-heroicon { background-color: var(--weu-color-primary) !important; } header #weuCartContent .tbc-heroicon { filter: none; width: 20px; height: 20px; } .header-bottom { --header-top-border-bottom: 1px solid var(--weu-color-black); --header-bottom-border-bottom: 1px solid var(--weu-color-black); border-bottom: var(--weu-color-black); padding: var(--weu-spacing-sm) 0; background-color: var(--weu-color-black); border-color: var(--weu-color-black); } .header-bottom .navbar-brand .logo, .weu-brand-logo__img { max-width: 200px; width: auto; height: auto; } .header-bottom .navbar-brand { transition: transform 0.15s ease; } .header-bottom .navbar-brand:active { transform: scale(0.92); } .header-top .form-select option { text-align: center; text-transform: uppercase } @media(max-width: 767px) { .header-bottom .navbar-brand .logo { max-width: 125px; } header .tbc-heroicon { width: 28px; height: 28px; } .header-actions { gap: var(--weu-spacing-xs)!important; } } .header a:not(.dropdown-item):not(.btn):hover, .header a:not(.dropdown-item):not(.btn):hover i { color: var(--weu-color-black); } .blockcart .header { background-color: transparent; } .cart-products-count { position: absolute; top: -5px; right: -5px; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background-color: var(--weu-white); color: var(--weu-color-black); border-radius: 50%; font-size: var(--font-size-sm); font-weight: 700; line-height: 1; } .header-block__badge { position: absolute; top: -5px; right: -5px; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background-color: var(--weu-white); color: var(--weu-color-black); border-radius: 50%; font-size: var(--font-size-sm); font-weight: 700; line-height: 1; } .cart-products-count::after, .header-block__badge::after { content: none; display: none; } #blockcart-wrapper .blockcart .header > a, .blockcart .header-block__action-btn { position: relative; } #header .blockcart.active .tbc-heroicon-shopping-cart, #header .blockcart.header-block--active .tbc-heroicon-shopping-cart, #header .cart-preview.active .tbc-heroicon-shopping-cart, #header .user-info .header-block.header-block--active .tbc-heroicon-user { filter: none !important; -webkit-filter: none !important; background-color: var(--weu-color-success) !important; } #header .blockcart.active .cart-products-count, #header .blockcart.header-block--active .header-block__badge, #header .cart-preview.active .cart-products-count { background-color: var(--weu-color-success); color: var(--weu-color-black); } .user-info .header-block--logged-in .header-block__action-btn { position: relative; } .header-block__status-dot { position: absolute; top: 3px; right: 0; width: 7px; height: 7px; border-radius: 50%; background-color: var(--weu-color-success); border: none; box-sizing: border-box; pointer-events: none; z-index: 1; animation: weu-account-dot-pulse-soft 3.2s ease-in-out infinite; } .header-block--logged-in.header-block--login-pulse .header-block__status-dot { animation: weu-account-dot-pulse-strong 1s ease-in-out 2; } .header-block--logged-in.header-block--login-pulse .tbc-heroicon-user { animation: weu-account-icon-pulse 1s ease-in-out 2; } @keyframes weu-account-dot-pulse-soft { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--weu-color-success) 30%, transparent); } 50% { transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--weu-color-success) 0%, transparent); } } @keyframes weu-account-dot-pulse-strong { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--weu-color-success) 40%, transparent); } 50% { transform: scale(1.12); box-shadow: 0 0 0 5px color-mix(in srgb, var(--weu-color-success) 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--weu-color-success) 0%, transparent); } } @keyframes weu-account-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .header-block__status-dot { animation: none; } .header-block--logged-in.header-block--login-pulse .header-block__status-dot, .header-block--logged-in.header-block--login-pulse .tbc-heroicon-user { animation: none; } } #js-toast-container, .weu-auth-toast-container { top: calc(var(--weu-header-sticky-offset, 0px) + 0.75rem) !important; z-index: 1065; pointer-events: none; max-width: calc(100vw - 1.5rem); } .weu-auth-toast { pointer-events: auto; width: min(calc(100vw - 1.5rem), 22rem); margin-left: auto; background: #fff; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.1); overflow: hidden; transform: translateX(calc(100% + 1.5rem)); opacity: 0; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; } .weu-auth-toast--visible { transform: translateX(0); opacity: 1; } .weu-auth-toast--hiding { transform: translateX(calc(100% + 1.5rem)); opacity: 0; } .weu-auth-toast__inner { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0.875rem 0.875rem 1rem; } .weu-auth-toast__icon { flex-shrink: 0; width: 2.375rem; height: 2.375rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .weu-auth-toast--login .weu-auth-toast__icon { background: color-mix(in srgb, var(--weu-color-success) 14%, #fff); color: #15803d; } .weu-auth-toast--logout .weu-auth-toast__icon { background: var(--weu-color-grey, #f1f1f1); color: var(--weu-color-dark, #333); } .weu-auth-toast--error .weu-auth-toast__icon { background: color-mix(in srgb, var(--weu-color-primary) 12%, #fff); color: var(--weu-color-primary); } .weu-auth-toast__message { flex: 1; margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--weu-color-black); font-weight: 500; } .weu-auth-toast__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; margin: 0; border: none; border-radius: 6px; background: transparent; color: rgba(0, 0, 0, 0.45); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .weu-auth-toast__close:hover, .weu-auth-toast__close:focus-visible { background: rgba(0, 0, 0, 0.06); color: var(--weu-color-black); outline: none; } .weu-auth-toast__progress { height: 3px; background: var(--weu-color-success); transform-origin: left center; animation: weu-auth-toast-progress linear forwards; } .weu-auth-toast--logout .weu-auth-toast__progress { background: var(--weu-color-dark, #555); } .weu-auth-toast--error .weu-auth-toast__progress { background: var(--weu-color-primary); } .weu-auth-toast--paused .weu-auth-toast__progress { animation-play-state: paused; } @keyframes weu-auth-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .weu-auth-toast { transition: opacity 0.15s ease; transform: none; } .weu-auth-toast--visible { transform: none; } .weu-auth-toast--hiding { transform: none; } .weu-auth-toast__progress { display: none; } } @media (max-width: 575.98px) { #js-toast-container, .weu-auth-toast-container { left: 0.75rem; right: 0.75rem; width: auto; } .weu-auth-toast { width: 100%; } } .header-actions { gap: var(--weu-spacing-sm); } .weu-language-selector--flag { display: flex; align-items: center; } .weu-language-flag-btn { width: 28px; height: 28px; margin: 0 4px; padding: 0; border: none; border-radius: 50%; background-color: transparent; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); transition: box-shadow 0.2s ease, transform 0.2s ease; } .weu-language-flag-btn:hover, .weu-language-flag-btn:focus-visible { box-shadow: 0 0 0 2px rgba(234, 30, 28, 0.35); outline: none; transform: scale(1.04); } .weu-language-flag-btn.dropdown-toggle::after { display: none; } .weu-language-selector--flag .weu-dropdown-menu { min-width: 148px; } /* ========================================================================== DROPDOWN MENU GLOBAL (idioma, ordenación, selectores similares) ========================================================================== */ .weu-dropdown-menu.dropdown-menu { background-color: var(--weu-white); border: none; border-radius: var(--weu-radius-default); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); min-width: 132px; padding: 6px 0; margin-top: 6px; } .weu-dropdown-menu .dropdown-item, .weu-dropdown-menu .weu-dropdown-menu__item, .weu-dropdown-menu .weu-language-option { display: block; padding: 8px 16px; color: var(--weu-color-dark) !important; font-size: 13px; font-weight: 400; line-height: 1.3; text-decoration: none; background-color: transparent; border: none; border-radius: 0; transition: background-color 0.15s ease; } .weu-dropdown-menu .dropdown-item:hover, .weu-dropdown-menu .dropdown-item:focus, .weu-dropdown-menu .weu-dropdown-menu__item:hover, .weu-dropdown-menu .weu-dropdown-menu__item:focus, .weu-dropdown-menu .weu-language-option:hover, .weu-dropdown-menu .weu-language-option:focus { background-color: rgba(234, 30, 28, 0.1); color: var(--weu-color-dark) !important; } .weu-dropdown-menu .dropdown-item.active, .weu-dropdown-menu .dropdown-item.current, .weu-dropdown-menu .weu-dropdown-menu__item.active, .weu-dropdown-menu .weu-dropdown-menu__item.current, .weu-dropdown-menu .weu-language-option.active { background-color: transparent; color: var(--weu-color-dark) !important; font-weight: 700; } .weu-dropdown-menu .dropdown-item.active:hover, .weu-dropdown-menu .dropdown-item.active:focus, .weu-dropdown-menu .dropdown-item.current:hover, .weu-dropdown-menu .dropdown-item.current:focus, .weu-dropdown-menu .weu-language-option.active:hover, .weu-dropdown-menu .weu-language-option.active:focus { background-color: rgba(234, 30, 28, 0.1); font-weight: 700; } .weu-dropdown-menu .weu-language-flag-option, .weu-language-flag-option { display: flex !important; align-items: center; gap: 10px; } .weu-language-flag-option__icon { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .weu-language-flag-option__icon.weu-flag-es, .weu-language-flag-btn.weu-flag-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Crect width='512' height='512' fill='%23AA151B'/%3E%3Crect y='128' width='512' height='256' fill='%23F1BF00'/%3E%3C/svg%3E"); } .weu-language-flag-option__icon.weu-flag-fr, .weu-language-flag-btn.weu-flag-fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Crect width='170.667' height='512' fill='%23002395'/%3E%3Crect x='170.667' width='170.667' height='512' fill='%23FFFFFF'/%3E%3Crect x='341.333' width='170.667' height='512' fill='%23ED2939'/%3E%3C/svg%3E"); } .weu-language-flag-option__label { font-size: 13px; line-height: 1.2; } #checkout div#content-wrapper { padding-top: var(--weu-spacing-md); padding-bottom: var(--weu-spacing-md); } #checkout .footer .footer__main { padding-top: 0 !important; } #checkout .weu-footer__bottom-inner { justify-content: center; } #checkout .weu-footer__copyright { text-align: center !important; } .email-subscription .email-subscription__content__inputs input[type=email]:focus { border: none; box-shadow: none; outline: none; } .email-subscription .email-subscription__content__inputs input[type=email]::placeholder { color: var(--weu-radius-dark); } @media only screen and (min-width: 992px) { header .container-md { width: 100%; max-width: 1760px; } #search_widget { width: 100%; } } @media(max-width: 767px) { .email-subscription .email-subscription__content__inputs{ flex-wrap: wrap; } .email-subscription .email-subscription__content__inputs input[type=email] { border: 1px solid var(--bs-gray-300); border-radius: var(--weu-radius-default); margin-right: 0; } .email-subscription .email-subscription__content__inputs .btn-primary { width: 100%; margin-top: var(--weu-spacing-xs); } .email-subscription .email-subscription__content__infos label { text-align: left; } } /* ========================================================================== OFFCANVAS CARRITO (DESIGN SYSTEM READY) ========================================================================== */ #weuCartOffcanvas { --bs-offcanvas-width: min(420px, 100%); position: fixed; top: 0; right: 0; bottom: 0; left: auto; background-color: var(--weu-white); box-shadow: var(--weu-shadow-offcanva); max-width: 100%; width: min(420px, 100%); height: 100dvh !important; height: 100vh !important; max-height: none; z-index: 1100 !important; transition: var(--weu-transition); border-left: 1px solid var(--weu-color-border); display: none; flex-direction: column; overflow: hidden; overflow-x: clip; box-sizing: border-box; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #weuCartOffcanvas.offcanvas-end { right: 0; left: auto; transform: translateX(100%); } #weuCartOffcanvas.offcanvas-end.show, #weuCartOffcanvas.show { transform: translateX(0); display: flex; } /* Header estilizado — Pedalmoto-style */ #weuCartOffcanvas .weu-cart-drawer__header, #weuCartOffcanvas .offcanvas-header { background-color: var(--weu-white); padding: 16px 20px; color: var(--weu-color-dark); display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--weu-color-border); flex-shrink: 0; } #weuCartOffcanvas .offcanvas-title { font-size: 1.125rem; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--weu-color-dark); } .weu-offcanvas-close-btn { width: 16px; height: 16px; min-width: 16px; min-height: 16px; padding: 0 !important; margin: 0; border: 0 !important; background-color: transparent !important; background-image: var(--bs-btn-close-bg) !important; background-repeat: no-repeat; background-position: center; background-size: 16px; opacity: 1; filter: brightness(0) invert(1); transition: transform 0.3s ease; flex-shrink: 0; box-shadow: none !important; } .weu-offcanvas-close-btn:hover, .weu-offcanvas-close-btn:focus, .weu-offcanvas-close-btn:focus-visible { transform: rotate(90deg); opacity: 1; box-shadow: none !important; background-color: transparent !important; } #weuCartOffcanvas .weu-offcanvas-close-btn { filter: brightness(0); opacity: 0.75; transition: transform 0.3s ease, opacity 0.3s ease; /* Área táctil cómoda en móvil (mín. ~44px) + icono más visible */ width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0 !important; margin: 0 -8px 0 0; background-size: 22px; background-position: center; } #weuCartOffcanvas .weu-offcanvas-close-btn:hover, #weuCartOffcanvas .weu-offcanvas-close-btn:focus, #weuCartOffcanvas .weu-offcanvas-close-btn:focus-visible { transform: rotate(90deg); opacity: 1; filter: brightness(0); background-color: transparent !important; background-image: var(--bs-btn-close-bg) !important; } .weu-cart-drawer__content { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .weu-cart-drawer__layout { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .weu-cart-drawer__scroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 0 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .weu-cart-drawer__footer { flex-shrink: 0; min-width: 0; max-width: 100%; margin-top: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--weu-color-border); background: var(--weu-white); overflow-x: hidden; } .weu-cart-drawer__footer > .weu-cart-crosssell { margin: 14px 0 4px; } .weu-cart-drawer__footer > .weu-cart-voucher { margin: 8px 0 14px; } .weu-cart-drawer__summary { margin-bottom: 8px; padding-top: 4px; border-top: 1px solid var(--weu-color-border); } .weu-cart-drawer__summary .weu-cart-summary-row { margin-bottom: 6px; } .weu-cart-drawer__summary .weu-cart-summary-row:last-child { margin-bottom: 0; } .weu-cart-drawer__footer > .weu-cart-voucher:first-child { border-top: none; padding-top: 0; margin-top: 14px; } .weu-cart-drawer__total-row { margin-bottom: 12px; padding: 0; } .weu-cart-drawer__checkout-btn { width: 100%; justify-content: center; } #weuAuthOffcanvas.weu-auth-offcanvas { position: fixed; top: 0; width: min(480px, 100vw); height: 100vh !important; height: 100dvh !important; max-height: 100dvh; z-index: 1100 !important; transition: var(--weu-transition); border-left: 1px solid var(--weu-color-border); background-color: var(--weu-white); display: flex; flex-direction: column; overflow: hidden; } #weuAuthOffcanvas.offcanvas-end { right: 0; left: auto; transform: translateX(100%); display: none; } #weuAuthOffcanvas.show { transform: translateX(0); } #weuAuthOffcanvas .offcanvas-body { position: relative; flex: 1 1 auto; min-height: 0; max-height: 100%; padding: var(--weu-spacing-md); padding-bottom: calc(var(--weu-spacing-md) + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } #weuAuthOffcanvas .weu-auth-offcanvas__close { position: absolute; top: calc(var(--weu-spacing-md) - 10px); right: calc(var(--weu-spacing-md) - 10px); z-index: 2; filter: brightness(0); opacity: 0.75; transition: transform 0.3s ease, opacity 0.3s ease; /* Misma área táctil / icono que menú móvil y carrito */ width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0 !important; margin: 0; background-size: 22px; background-position: center; background-image: var(--bs-btn-close-bg) !important; } #weuAuthOffcanvas .weu-auth-offcanvas__close:hover, #weuAuthOffcanvas .weu-auth-offcanvas__close:focus, #weuAuthOffcanvas .weu-auth-offcanvas__close:focus-visible { transform: rotate(90deg); opacity: 1; filter: brightness(0); background-color: transparent !important; background-image: var(--bs-btn-close-bg) !important; } #weuAuthOffcanvas .weu-auth-offcanvas__login > .weu-auth-offcanvas__section-title { padding-right: 44px; margin-top: 0; } #weuAuthOffcanvas .offcanvas-body:has(.weu-auth-offcanvas__register-view:not([hidden])) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; padding-bottom: 0; } @media (max-width: 991.98px) { #weuAuthOffcanvas.weu-auth-offcanvas { width: 100%; max-width: 100%; } } .weu-auth-offcanvas__section-title { font-size: 1.15rem; font-weight: 700; color: var(--weu-color-dark); margin: 0 0 10px; } .weu-auth-offcanvas__intro { color: rgba(29, 29, 29, 0.72); font-size: var(--font-size-secondary); line-height: 1.5; margin-bottom: var(--weu-spacing-sm); } .weu-auth-field { position: relative; margin-bottom: 18px; } /* Floating label: en reposo el label ocupa el sitio del placeholder (dentro del campo, a tamaño normal). Al enfocar o cuando el campo tiene valor, sube a su posición flotada (sobre el borde, pequeño) con una transición suave. */ .weu-auth-field__label { position: absolute; top: 24px; left: 13px; transform: translateY(-50%); z-index: 2; max-width: calc(100% - 26px); padding: 0; background: transparent; font-size: var(--font-size-base); font-weight: 500; color: rgba(29, 29, 29, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: top 0.18s ease, left 0.18s ease, transform 0.18s ease, font-size 0.18s ease, font-weight 0.18s ease, color 0.18s ease, background-color 0.18s ease, padding 0.18s ease; } /* Cuando el control tiene icono a la izquierda, el label en reposo arranca después del icono para alinearse con el texto del input. */ .weu-auth-field:has(.weu-auth-field__icon) .weu-auth-field__label { left: 40px; } /* Estado flotado: al enfocar, cuando el campo tiene contenido, y siempre para selects / fechas / textareas (que no muestran placeholder utilizable). */ .weu-auth-field:has(.weu-auth-field__input:focus) .weu-auth-field__label, .weu-auth-field:has(.weu-auth-field__input:not(:placeholder-shown)) .weu-auth-field__label, .weu-auth-field:has(.weu-auth-field__textarea:focus) .weu-auth-field__label, .weu-auth-field:has(.weu-auth-field__textarea) .weu-auth-field__label, .weu-auth-field:has(.weu-auth-field__select) .weu-auth-field__label, .weu-auth-field:has(input[type="date"]) .weu-auth-field__label { top: -8px; left: 12px; transform: none; padding: 0 6px; background: var(--weu-white); font-size: 12px; font-weight: 600; color: rgba(29, 29, 29, 0.75); } .weu-auth-field__control { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1px solid var(--weu-border-color); border-radius: var(--weu-radius-default); background: var(--weu-white); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .weu-auth-field__control:focus-within { border-color: var(--weu-color-primary); box-shadow: 0 0 0 3px rgba(234, 30, 28, 0.12); } .weu-auth-field__control--success { border-color: var(--weu-color-success, #198754); box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.12); } .weu-auth-field__control--danger { border-color: var(--weu-color-danger, #dc3545); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); } .weu-auth-field__icon { flex-shrink: 0; color: rgba(29, 29, 29, 0.45); display: inline-flex; } .weu-auth-field__input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--font-size-base); color: var(--weu-color-dark); padding: 12px 0; outline: none; } .weu-auth-field__input::placeholder { color: rgba(29, 29, 29, 0.45); } /* Autofill del navegador: el azul nativo solo pinta el , dejando huecos blancos por el padding/iconos del control. Extendemos el mismo color al contenedor para que ocupe todo el interior, sin cambiar el diseño. */ .weu-auth-field__control:has(.weu-auth-field__input:-webkit-autofill), .weu-auth-field__control:has(.weu-auth-field__input:autofill), .weu-auth-field__control:has(.weu-auth-field__textarea:-webkit-autofill), .weu-auth-field__control:has(.weu-auth-field__textarea:autofill), .weu-auth-field__control:has(.weu-auth-field__select:-webkit-autofill), .weu-auth-field__control:has(.weu-auth-field__select:autofill) { background-color: #e8f0fe; } .weu-auth-field__input:-webkit-autofill, .weu-auth-field__input:-webkit-autofill:hover, .weu-auth-field__input:-webkit-autofill:focus, .weu-auth-field__input:-webkit-autofill:active, .weu-auth-field__input:autofill, .weu-auth-field__textarea:-webkit-autofill, .weu-auth-field__textarea:-webkit-autofill:hover, .weu-auth-field__textarea:-webkit-autofill:focus, .weu-auth-field__textarea:autofill, .weu-auth-field__select:-webkit-autofill, .weu-auth-field__select:autofill { /* Misma tinta azul que Chrome; box-shadow inset para cubrir el input entero y evitar el “rectángulo interior” con radio distinto al del control. */ -webkit-box-shadow: 0 0 0 1000px #e8f0fe inset !important; box-shadow: 0 0 0 1000px #e8f0fe inset !important; -webkit-text-fill-color: var(--weu-color-dark); caret-color: var(--weu-color-dark); border-radius: 0 !important; /* Chrome intenta devolver el fondo a blanco tras ~1s; lo congelamos. */ transition: background-color 5000s ease-in-out 0s; } .weu-auth-field__toggle { flex-shrink: 0; border: 0; background: transparent; color: var(--weu-color-primary); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .weu-auth-field__toggle:hover { opacity: 0.85; } /* Select / textarea: diseño global weu-auth-field (fuera de checkout también) */ .weu-auth-field__select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d1d1d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 18px; padding-right: 28px !important; } .weu-auth-field__control--textarea { align-items: stretch; flex-direction: column; padding: 12px; min-height: auto; } .weu-auth-field__textarea { min-height: 96px; resize: vertical; padding: 0; line-height: 1.45; } .weu-auth-field__label.required::after { content: " *"; color: var(--weu-color-primary); } .weu-auth-field .weu-checkout-field__optional { font-size: inherit; font-weight: 500; color: rgba(29, 29, 29, 0.5); } .weu-auth-field__control--password { position: relative; } .weu-auth-field__control--password .weu-auth-field__toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; } .weu-auth-field__control--password .weu-auth-field__input { padding-right: 44px; } .weu-checkout-field__comment { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: rgba(29, 29, 29, 0.55); } /* Formulario cuenta (datos personales / registro) */ .weu-customer-form__intro { margin-bottom: 1.25rem; color: rgba(29, 29, 29, 0.7); } .weu-customer-form #customer-form .weu-checkout-consent .form-check { display: flex; align-items: flex-start; gap: 8px; } .weu-customer-form #customer-form .weu-checkout-consent .form-check-input { flex-shrink: 0; margin-top: 2px; } .weu-customer-form #customer-form .weu-checkout-consent .form-check-label { font-size: var(--font-size-base); line-height: 1.45; color: rgba(29, 29, 29, 0.72); } .weu-customer-form #customer-form .weu-checkout-consent .form-check-label em { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: rgba(29, 29, 29, 0.55); } .weu-customer-form #customer-form .weu-checkout-consent .form-check-label a, .weu-customer-form #customer-form .weu-checkout-consent .form-check-label .weu-cms-modal-link { color: var(--weu-color-primary); text-decoration: underline; } .weu-customer-form__footer { display: flex; justify-content: flex-end; margin-top: 8px; } .weu-customer-form__footer .weu-checkout-cta { width: auto; min-width: 180px; } @media (max-width: 575.98px) { .weu-customer-form__footer .weu-checkout-cta { width: 100%; min-width: 0; } } /* Formulario de mensaje en detalle de pedido */ .weu-order-message-form { margin-top: 1.5rem; } .weu-order-message-form__header p { margin-bottom: 1.25rem; color: rgba(29, 29, 29, 0.7); } .weu-order-message-form__fields { display: flex; flex-direction: column; gap: 4px; } .weu-order-message-form__footer { margin-top: 8px; } .weu-order-message-form__footer .weu-checkout-cta { width: auto; min-width: 220px; margin-left: auto; display: flex; } @media (max-width: 575.98px) { .weu-order-message-form__footer .weu-checkout-cta { width: 100%; min-width: 0; } } .weu-auth-offcanvas__form .form-label { font-weight: 600; font-size: 13px; margin-bottom: 6px; } .weu-auth-offcanvas__form .form-control { border-radius: var(--weu-radius-default); min-height: 44px; } .weu-auth-offcanvas__submit { display: flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 700; letter-spacing: 0.3px; text-align: center; background-color: var(--weu-color-primary); border-color: var(--weu-color-primary); color: #fff !important; } .weu-auth-offcanvas__submit:hover, .weu-auth-offcanvas__submit:focus { background-color: #c91917; border-color: #c91917; color: #fff !important; } .weu-auth-offcanvas__forgot { margin: 0 0 12px; text-align: left; } .weu-auth-offcanvas__forgot a, .weu-auth-offcanvas__forgot-link { font-size: var(--font-size-secondary); color: var(--weu-color-primary); text-decoration: underline; } .weu-auth-offcanvas__back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--weu-spacing-sm); padding: 0; border: 0; background: transparent; color: var(--weu-color-dark); font-size: var(--font-size-secondary); font-weight: 600; cursor: pointer; } .weu-auth-offcanvas__back:hover { color: var(--weu-color-primary); } .weu-auth-offcanvas__password .weu-auth-offcanvas__errors .alert-success { margin-bottom: 0; } .weu-auth-offcanvas__register-view .weu-auth-offcanvas__errors .alert-success { margin-bottom: 0; } .weu-auth-offcanvas__register-content { margin-top: var(--weu-spacing-xs); } .weu-auth-offcanvas__register-content .page-title, .weu-auth-offcanvas__register-content .register-form__login-prompt, .weu-auth-offcanvas__register-content .opc_social_form, .weu-auth-offcanvas__register-content .mb-3:has([name="id_gender"]), .weu-auth-offcanvas__register-content > hr { display: none; } .weu-auth-offcanvas__register-content .weu-auth-field__label.required::after { content: none; } /* Como en el checkout: sin texto de ayuda permanente bajo el campo; el mensaje solo aparece al validar (blur / envío). */ .weu-auth-offcanvas__register-content .weu-auth-field .form-text { display: none; } .weu-auth-offcanvas__register-content .field-password-policy { margin-bottom: 18px; } .weu-auth-offcanvas__register-content .field-password-policy .weu-auth-field { margin-bottom: 0; } .weu-auth-offcanvas__register-content .weu-auth-field__control--birthday { flex-wrap: wrap; gap: 8px; height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; } .weu-auth-offcanvas__register-content .weu-auth-field__control--birthday select { flex: 1 1 auto; min-width: 0; } .weu-auth-offcanvas__register-content .weu-auth-field__control--success { border-color: var(--weu-color-success, #198754); box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.12); } .weu-auth-offcanvas__register-content .weu-auth-field__control--danger { border-color: var(--weu-color-danger, #dc3545); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); } .weu-auth-offcanvas__register-content .weu-auth-field__control--password { position: relative; } .weu-auth-offcanvas__register-content .weu-auth-field__control--password .weu-auth-field__toggle, .weu-auth-offcanvas__register-content .weu-auth-field__control--password .weu-register-password-toggle-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; } .weu-auth-offcanvas__register-content .weu-auth-field__control--password .weu-auth-field__input { padding-right: 44px; } /* Medidor Pedalmoto (mismo que /pedido) */ #weuAuthOffcanvas .weu-pwd-meter, .weu-auth-offcanvas__register-content .weu-pwd-meter { margin-top: 10px; } #weuAuthOffcanvas .weu-pwd-meter__track, .weu-auth-offcanvas__register-content .weu-pwd-meter__track { height: 4px; background-color: rgba(29, 29, 29, 0.08); border-radius: 999px; overflow: hidden; } #weuAuthOffcanvas .weu-pwd-meter__fill, .weu-auth-offcanvas__register-content .weu-pwd-meter__fill { display: block; width: 0; height: 100%; background-color: var(--weu-color-success, #198754); border-radius: 999px; transition: width 0.2s ease; } #weuAuthOffcanvas .weu-pwd-meter__hint, .weu-auth-offcanvas__register-content .weu-pwd-meter__hint { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: rgba(29, 29, 29, 0.55); } #weuAuthOffcanvas .weu-pwd-meter__hint:empty, .weu-auth-offcanvas__register-content .weu-pwd-meter__hint:empty { display: none; } .weu-auth-offcanvas__register-content .password-strength-feedback { margin-top: 8px; } .weu-auth-offcanvas__register-content .weu-register-password-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .weu-auth-offcanvas__register-content .weu-register-password-toggle .weu-auth-field__eye { display: none; width: 18px; height: 18px; pointer-events: none; } .weu-auth-offcanvas__register-content .weu-register-password-toggle .weu-auth-field__eye.weu-is-visible { display: block; } .weu-auth-offcanvas__register-content .password-field.input-group > .btn .material-icons { display: none !important; } .weu-auth-offcanvas__register-content .field-password-policy { margin-bottom: 12px; } .weu-auth-offcanvas__register-content .password-strength-feedback { margin-top: 8px; } .weu-auth-offcanvas__register-content .password-strength-feedback .progress-container { margin-bottom: 6px; } .weu-auth-offcanvas__register-content .password-strength-feedback .progress { height: 4px; margin-bottom: 0; background-color: rgba(29, 29, 29, 0.08); border-radius: 999px; overflow: hidden; } .weu-auth-offcanvas__register-content .password-strength-feedback .progress-bar { border-radius: 999px; } .weu-auth-offcanvas__register-content .password-strength-text { font-size: 11px; line-height: 1.35; color: rgba(29, 29, 29, 0.5); margin-bottom: 4px; } .weu-auth-offcanvas__register-content .password-requirements { margin: 0; padding: 0; background: transparent; } .weu-auth-offcanvas__register-content .password-requirements p { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 4px; font-size: 11px; line-height: 1.4; color: rgba(29, 29, 29, 0.55); } .weu-auth-offcanvas__register-content .password-requirements p:last-child { margin-bottom: 0; } .weu-auth-offcanvas__register-content .password-requirements .material-icons { font-size: 14px; line-height: 1; flex-shrink: 0; margin-top: 1px; color: rgba(29, 29, 29, 0.35); } .weu-auth-offcanvas__register-content .password-requirements .material-icons.text-success { color: rgba(234, 30, 28, 0.75) !important; } .weu-auth-offcanvas__register-content .form-check, body#checkout #customer-form .weu-checkout-consent .form-check { display: flex; align-items: flex-start; gap: 8px; } .weu-auth-offcanvas__register-content .form-check-input, body#checkout #customer-form .weu-checkout-consent .form-check-input { flex-shrink: 0; margin-top: 2px; } .weu-auth-offcanvas__register-content .form-check-label, body#checkout #customer-form .weu-checkout-consent .form-check-label { font-size: var(--font-size-base); line-height: 1.45; color: rgba(29, 29, 29, 0.72); } .weu-auth-offcanvas__register-content .form-check-label em, body#checkout #customer-form .weu-checkout-consent .form-check-label em { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: rgba(29, 29, 29, 0.55); } .weu-auth-offcanvas__register-content .form-check-label a, .weu-auth-offcanvas__register-content .form-check-label .weu-cms-modal-link, body#checkout #customer-form .weu-checkout-consent .form-check-label a, body#checkout #customer-form .weu-checkout-consent .form-check-label .weu-cms-modal-link { color: var(--weu-color-primary); text-decoration: underline; } .weu-auth-offcanvas__register-content .form-check-label .weu-cms-modal-link:hover, .weu-auth-offcanvas__register-content .form-check-label .weu-cms-modal-link:focus, body#checkout #customer-form .weu-checkout-consent .form-check-label .weu-cms-modal-link:hover, body#checkout #customer-form .weu-checkout-consent .form-check-label .weu-cms-modal-link:focus { color: #c91917; } .weu-auth-offcanvas__register-content .form-footer { margin-top: var(--weu-spacing-sm); } .weu-auth-offcanvas__register-content .form-control-submit, .weu-auth-offcanvas__register-content .btn-primary[type="submit"], .weu-auth-register-submit-bar .form-control-submit, .weu-auth-register-submit-bar .btn-primary[type="submit"] { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; font-weight: 700; letter-spacing: 0.3px; text-align: center; background-color: var(--weu-color-primary); border-color: var(--weu-color-primary); color: #fff !important; } .weu-auth-offcanvas__register-content .form-control-submit:hover, .weu-auth-offcanvas__register-content .form-control-submit:focus, .weu-auth-offcanvas__register-content .btn-primary[type="submit"]:hover, .weu-auth-offcanvas__register-content .btn-primary[type="submit"]:focus, .weu-auth-register-submit-bar .form-control-submit:hover, .weu-auth-register-submit-bar .form-control-submit:focus, .weu-auth-register-submit-bar .btn-primary[type="submit"]:hover, .weu-auth-register-submit-bar .btn-primary[type="submit"]:focus { background-color: #c91917; border-color: #c91917; color: #fff !important; } .weu-auth-offcanvas__loading { margin: var(--weu-spacing-md) 0; text-align: center; font-size: var(--font-size-secondary); color: rgba(29, 29, 29, 0.6); } .weu-auth-offcanvas__social { margin-top: var(--weu-spacing-md); padding-top: var(--weu-spacing-md); border-top: 1px solid var(--weu-color-grey); } .weu-auth-offcanvas__social-title { font-size: var(--font-size-secondary); color: rgba(29, 29, 29, 0.72); line-height: 1.5; margin-bottom: 14px; text-align: center; } .weu-auth-social { display: flex; justify-content: center; gap: 10px; } .weu-auth-social__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: min(100%, 280px); max-width: 100%; min-height: 44px; padding: 8px 20px; border: 1px solid var(--weu-border-color); border-radius: var(--weu-radius-tag); background: var(--weu-white); color: var(--weu-color-dark); font-size: 11px; font-weight: 400; line-height: 1.25; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .weu-auth-social__btn:hover, .weu-auth-social__btn:focus { border-color: rgba(29, 29, 29, 0.22); background: var(--weu-color-grey-light); color: var(--weu-color-dark); } #weuAuthOffcanvas .weu-auth-social__btn.opc_social_item.facebook, #weuAuthOffcanvas .weu-auth-social__btn.opc_social_item.google { background-color: var(--weu-white); color: var(--weu-color-dark); } .weu-auth-social__icon { display: inline-flex; flex-shrink: 0; } .weu-auth-social__icon svg { width: 16px; height: 16px; } .weu-auth-social__label { flex: 0 1 auto; min-width: 0; text-align: center; white-space: normal; overflow-wrap: break-word; } .weu-auth-offcanvas__social-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: rgba(29, 29, 29, 0.55); text-align: center; } .weu-auth-offcanvas__register { margin-top: var(--weu-spacing-md); padding-top: var(--weu-spacing-md); border-top: 1px solid var(--weu-color-grey); } .weu-auth-offcanvas__register-text { font-size: var(--font-size-secondary); color: rgba(29, 29, 29, 0.72); line-height: 1.5; margin-bottom: 14px; } .weu-auth-offcanvas__register-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid rgba(234, 30, 28, 0.35); border-radius: var(--weu-radius-default); background: rgba(234, 30, 28, 0.06); color: var(--weu-color-primary); font-weight: 700; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .weu-auth-offcanvas__register-btn:hover { background: rgba(234, 30, 28, 0.1); border-color: var(--weu-color-primary); color: var(--weu-color-primary); } .weu-auth-offcanvas__register-icon { display: inline-flex; } .weu-auth-offcanvas__register-title { font-weight: 600; margin-bottom: var(--weu-spacing-sm); color: var(--weu-color-dark); } .weu-auth-offcanvas__errors .alert { margin-bottom: var(--weu-spacing-sm); } .weu-auth-register-alert { margin-bottom: var(--weu-spacing-sm); padding: 10px 12px; font-size: var(--font-size-secondary); line-height: 1.4; } .weu-auth-offcanvas__register-content .form-footer { display: none; } .weu-auth-offcanvas__register-content .weu-register-field--invalid .weu-auth-field__control, .weu-auth-offcanvas__register-content .weu-register-field--invalid .form-control, .weu-auth-offcanvas__register-content .weu-register-field--invalid .form-select, .weu-auth-offcanvas__register-content .weu-register-field--invalid .password-field { border-color: var(--weu-color-danger, #dc3545); box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12); } .weu-auth-offcanvas__register-content .weu-register-field--invalid .form-check-input.is-invalid { border-color: var(--weu-color-danger, #dc3545); box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12); } .weu-auth-offcanvas__register-content .weu-register-field--invalid .form-check-label, .weu-auth-offcanvas__register-content .weu-register-field--invalid .weu-auth-field__label, .weu-auth-offcanvas__register-content .weu-register-field--invalid .form-label { color: var(--weu-color-danger, #dc3545); } .weu-auth-offcanvas__register-content .weu-register-field-error { margin: 6px 0 0; color: var(--weu-color-danger, #dc3545); font-size: 12px; line-height: 1.35; } .weu-auth-offcanvas__register-content .mb-3.weu-register-field--invalid, .weu-auth-offcanvas__register-content .field-password-policy.weu-register-field--invalid, .weu-auth-offcanvas__register-content [id^="gdpr_consent"].weu-register-field--invalid, .weu-auth-offcanvas__register-content [class*="gdpr_module_"].weu-register-field--invalid { padding: 10px 12px; border: 1px solid rgba(220, 53, 69, 0.35); border-radius: var(--weu-radius-default); background-color: rgba(220, 53, 69, 0.04); } .weu-auth-offcanvas__register-content .mb-3.weu-register-field--invalid .form-check { margin: 0; width: 100%; } .weu-auth-offcanvas__register-content .mb-3.weu-register-field--invalid .form-check-input { margin-left: 0; margin-top: 3px; } .weu-auth-offcanvas__register-view:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding-bottom: 0; } .weu-auth-offcanvas__register-view .weu-auth-offcanvas__back, .weu-auth-offcanvas__register-view .weu-auth-offcanvas__section-title, .weu-auth-offcanvas__register-view .weu-auth-offcanvas__errors { flex-shrink: 0; } .weu-auth-offcanvas__register-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .weu-auth-register-submit-bar:not([hidden]) { flex-shrink: 0; margin: var(--weu-spacing-sm) calc(-1 * var(--weu-spacing-md)) 0; padding: var(--weu-spacing-sm) var(--weu-spacing-md) var(--weu-spacing-md); background: var(--weu-white); border-top: 1px solid var(--weu-border-color); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); } .weu-auth-register-submit-bar .form-control-submit, .weu-auth-register-submit-bar .btn-primary[type="submit"] { width: 100%; } #weuDynamicModal .modal-dialog { width: 100%; max-width: 800px; margin: 1.75rem auto; } #weuDynamicModal .modal-header { border-bottom: none; padding: var(--weu-spacing-md) var(--weu-spacing-md) var(--weu-spacing-sm); align-items: center; gap: var(--weu-spacing-sm); } #weuDynamicModal .modal-title, #weuDynamicModal #weuModalTitle { margin: 0; flex: 1 1 auto; min-width: 0; padding-right: var(--weu-spacing-sm); font-size: var(--font-size-md); font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; color: var(--weu-color-dark); } #weuDynamicModal .modal-header .btn-close { flex-shrink: 0; margin: 0; opacity: 0.75; transition: transform 0.3s ease, opacity 0.3s ease; } #weuDynamicModal .modal-header .btn-close:hover, #weuDynamicModal .modal-header .btn-close:focus { transform: rotate(90deg); opacity: 1; } #weuModalBody { padding: var(--weu-spacing-md); } /* Estado carrito vacío */ .weu-cart-empty-icon { font-size: 52px; color: var(--weu-color-primary); line-height: 1; } .no-products.weu-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 2.5rem 1.5rem 2rem; text-align: center; color: var(--weu-color-dark); } .weu-cart-empty__visual { position: relative; width: 148px; height: 148px; margin: 0 auto 1.25rem; } .weu-cart-empty__orbit { position: absolute; inset: 0; border: 2px dashed rgba(234, 30, 28, 0.22); border-radius: 50%; animation: weu-cart-orbit-spin 14s linear infinite; } .weu-cart-empty__orbit--delay { inset: 14px; border-color: rgba(29, 29, 29, 0.12); animation-direction: reverse; animation-duration: 18s; } .weu-cart-empty__icon-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: weu-cart-empty-wobble 2.8s ease-in-out infinite; } .weu-cart-empty__badge { position: absolute; top: 34px; right: 34px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--weu-color-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 22px; animation: weu-cart-badge-pop 2.8s ease-in-out infinite; } .weu-cart-empty__spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--weu-color-primary); opacity: 0.55; } .weu-cart-empty__spark--1 { top: 18px; left: 24px; animation: weu-cart-spark-float 2.4s ease-in-out infinite; } .weu-cart-empty__spark--2 { top: 28px; right: 20px; animation: weu-cart-spark-float 2.8s ease-in-out 0.4s infinite; } .weu-cart-empty__spark--3 { bottom: 24px; left: 50%; margin-left: -4px; animation: weu-cart-spark-float 3.2s ease-in-out 0.8s infinite; } .weu-cart-empty__title { margin: 0 0 0.65rem; font-size: 1.15rem; font-weight: 800; line-height: 1.25; color: var(--weu-color-dark); } .weu-cart-empty__text { margin: 0 0 1.35rem; max-width: 18rem; font-size: var(--font-size-secondary); line-height: 1.5; color: rgba(29, 29, 29, 0.68); } .weu-cart-empty__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.65rem 1.35rem; border: 2px solid var(--weu-color-primary); border-radius: var(--weu-radius-default); background: var(--weu-color-primary); color: #fff !important; font-size: var(--font-size-secondary); font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px rgba(234, 30, 28, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; animation: weu-cart-cta-pulse 2.6s ease-in-out infinite; } .weu-cart-empty__cta:hover, .weu-cart-empty__cta:focus { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(234, 30, 28, 0.18); background: #fff; border-color: var(--weu-color-primary); color: var(--weu-color-primary) !important; } @keyframes weu-cart-orbit-spin { to { transform: rotate(360deg); } } @keyframes weu-cart-empty-wobble { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-4px) rotate(-4deg); } 50% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(-2px) rotate(3deg); } } @keyframes weu-cart-badge-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes weu-cart-spark-float { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-8px); opacity: 0.85; } } @keyframes weu-cart-cta-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(234, 30, 28, 0.28); } 50% { box-shadow: 0 10px 26px rgba(234, 30, 28, 0.42); } } @media (prefers-reduced-motion: reduce) { .weu-cart-empty__orbit, .weu-cart-empty__icon-wrap, .weu-cart-empty__badge, .weu-cart-empty__spark, .weu-cart-empty__cta { animation: none; } } /* Legacy selector kept for list layout */ .no-products:not(.weu-cart-empty) { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--weu-color-black); } /* Contenido y Lista de Productos */ #weuCartContent { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; gap: 0; padding: 0; overflow: hidden; } .cart-items-list { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 100%; min-width: 0; } /* Item de Producto */ .product-line { padding: var(--weu-spacing-sm) 0; border-bottom: 1px solid var(--weu-color-border); transition: background 0.2s ease; } .product-line:last-child { border-bottom: none; } .product-line img { border-radius: var(--weu-radius-default); background: var(--weu-color-grey); padding: 4px; } .product-line .text-gray-800 { color: var(--weu-color-dark); font-size: 14px; line-height: 1.4; margin-bottom: 4px; display: block; } .product-line .qty-selector, .product-line .weu-cart-item-qty-selector { background: var(--weu-white, #fff); border: 1px solid var(--weu-border-color, var(--weu-color-border, #ddd)); display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; overflow: hidden; margin-top: 0; min-height: 36px; flex-shrink: 0; } .product-line .qty-selector button, .product-line .weu-cart-item-qty-selector .weu-cart-qty-btn { border: none; background: transparent; padding: 0 14px; font-weight: 700; font-size: 18px; line-height: 24px; color: var(--weu-color-black); transition: color 0.15s ease, opacity 0.15s ease; } .product-line .qty-selector button:hover, .product-line .weu-cart-item-qty-selector .weu-cart-qty-btn:hover { background: transparent; color: var(--weu-color-primary); } .product-line .qty-selector span, .product-line .weu-cart-item-qty-selector .weu-cart-qty-value { padding: 0; font-size: 14px; font-weight: 700; min-width: 2rem; width: 2rem; height: 34px; line-height: 34px; text-align: center; color: var(--weu-color-black); } /* Totales y Botones */ .cart-summary-totals { background: var(--weu-color-grey); padding: var(--weu-spacing-sm); border-radius: var(--weu-radius-default); margin-top: var(--weu-spacing-sm); } .cart-total { display: flex; justify-content: space-between; align-items: center; } .cart-total .label { text-transform: uppercase; font-size: 12px; font-weight: 700; color: var(--weu-color-neutral); } .cart-total .value { font-size: 18px; font-weight: 800; color: var(--weu-color-black); } .cart-buttons .btn { background-color: var(--weu-color-primary) !important; border-color: var(--weu-color-primary) !important; color: var(--weu-white) !important; padding: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: var(--weu-radius-default); box-shadow: 0 4px 15px rgba(234, 30, 28, 0.2); transition: all 0.3s ease; } .cart-buttons .btn.weu-cart-btn--outline { background: var(--weu-color-black) !important; border-color: var(--weu-color-black) !important; color: var(--weu-white) !important; transition: all 0.3s ease; } .cart-buttons .btn.weu-cart-btn--outline:hover { background: var(--weu-color-dark) !important; border-color: var(--weu-color-dark) !important; color: var(--weu-white) !important; transform: translateY(-2px); } .cart-buttons .btn:hover { background-color: var(--weu-color-dark) !important; border-color: var(--weu-color-dark) !important; } /* ========================================================================== WE SHOPPING CART - VISUAL REDESIGN ========================================================================== */ #weuCartContent { gap: 0; } #weuCartContent .cart-items-list { padding-bottom: 8px; } #weuCartContent .cart-items-list > li { margin-bottom: 4px; } .weu-cart-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--weu-color-border, #efefef); min-width: 0; max-width: 100%; } .weu-cart-item-body { flex: 1; min-width: 0; } .weu-cart-item-info { margin-bottom: 10px; } .weu-cart-item-title-row { display: flex; align-items: flex-start; gap: 8px; } .weu-cart-item-title-link { flex: 1; min-width: 0; text-decoration: none; } .weu-cart-item-title { display: block; margin-bottom: 0; color: var(--weu-color-black); font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } .weu-cart-item-attributes { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--weu-color-muted, #666); } .weu-cart-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .weu-cart-item-qty-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .weu-cart-item-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; text-align: right; min-width: 0; flex: 0 1 auto; } .weu-cart-item:last-child { border-bottom: 0; } .weu-cart-item-image { width: 72px; height: 72px; overflow: hidden; flex-shrink: 0; background: var(--weu-color-grey); isolation: isolate; } .weu-cart-item-img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; } @media (hover: hover) and (pointer: fine) { .weu-cart-item-img { filter: contrast(1.1); } } .weu-cart-item-main { flex: 1; min-width: 0; } .weu-cart-item-price-row { font-weight: 600; color: var(--weu-color-black); } .weu-cart-item-price { color: var(--weu-color-black); font-weight: 700; } .weu-cart-item-price-regular { color: var(--weu-color-muted, #888); font-size: 12px; text-decoration: line-through; font-weight: 500; } .weu-cart-item-discount-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: #1b8f3a; font-weight: 600; } .weu-cart-item-discount-label, .weu-cart-item-discount-value { color: #1b8f3a; } .weu-cart-item-qty-selector { background: var(--weu-white, #fff); border: 1px solid var(--weu-border-color, var(--weu-color-border, #ddd)); border-radius: 999px; width: fit-content; display: inline-flex; align-items: center; flex-shrink: 0; overflow: hidden; min-height: 36px; } .weu-cart-qty-btn { border: 0; background: transparent; color: var(--weu-color-black); font-weight: 700; font-size: 18px; padding: 0 14px; line-height: 24px; min-width: auto; transition: color 0.15s ease, opacity 0.15s ease; } .weu-cart-qty-btn:hover { color: var(--weu-color-primary); background: transparent; } .weu-cart-qty-value { display: inline-block; min-width: 2rem; width: 2rem; text-align: center; font-size: 14px; font-weight: 700; color: var(--weu-color-black); height: 34px; line-height: 34px; } .weu-cart-qty-btn:disabled, .weu-cart-qty-btn[aria-disabled="true"], .weu-cart-qty-btn.is-max-qty { opacity: 0.5; color: var(--weu-color-muted, #adb5bd) !important; cursor: not-allowed; pointer-events: none; } .weu-cart-item-qty-selector .weu-cart-qty-btn.is-max-qty:hover, .weu-cart-item-qty-selector .weu-cart-qty-btn:disabled:hover { background: transparent; color: var(--weu-color-muted, #999) !important; } .weu-cart-drawer__notice { margin: 0; padding: 10px 20px; font-size: 13px; line-height: 1.4; color: #7a1f1f; background: #fdecec; border-bottom: 1px solid #f5c2c2; } .weu-cart-drawer__notice[hidden] { display: none !important; } .weu-cart-remove-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 0; border-radius: 0; color: var(--weu-color-muted, #888) !important; display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; padding: 0; margin: -12px -10px 0 0; opacity: 1; transition: opacity 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; } .weu-cart-remove-btn i { width: 22px; height: 22px; color: inherit; } .weu-cart-remove-btn:hover, .weu-cart-remove-btn:focus-visible { border: 0; color: var(--weu-color-muted, #888) !important; opacity: 0.65; } .weu-cart-summary { background: #fff; border: 0; border-radius: 0; border-top: 1px solid #e6e6e6; padding: 12px 0 0; margin: 0; } .weu-cart-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; min-width: 0; max-width: 100%; } .weu-cart-summary-label { color: var(--weu-color-black); font-size: 15px; } .weu-cart-summary-value { color: var(--weu-color-black); font-size: 15px; font-weight: 500; flex-shrink: 0; text-align: right; white-space: nowrap; } .weu-cart-summary-row--total .weu-cart-summary-label, .weu-cart-summary-row--total .weu-cart-summary-value { font-weight: 700; color: var(--weu-color-black); } .weu-cart-actions { margin-top: 14px; display: flex; flex-direction: column; gap: var(--weu-spacing-sm); } .weu-cart-actions .weu-checkout-cta, .cart-buttons .weu-checkout-cta.btn { min-height: 46px; padding: 0 20px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: 0 4px 12px rgba(234, 30, 28, 0.2); } .weu-cart-actions .weu-checkout-cta__icon { width: 26px; height: 26px; } .weu-cart-actions .weu-checkout-cta__icon .tbc-heroicon { width: 14px; height: 14px; } .weu-cart-actions .weu-cart-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 10px 12px; border-radius: 0; text-align: center; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; } .weu-cart-btn--outline { background: #fff !important; border: 2px solid var(--weu-color-black) !important; color: var(--weu-color-black) !important; } .weu-cart-btn--solid { background: var(--weu-color-black) !important; border: 2px solid var(--weu-color-black) !important; color: #fff !important; box-shadow: none !important; } .weu-cart-actions .weu-cart-btn:hover { transform: none; opacity: 0.92; } /* Cross-sell recomendado (drawer) — Completa tu equipo */ .weu-cart-crosssell { margin: 14px 0 12px; max-width: 100%; min-width: 0; } .weu-cart-crosssell__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .weu-cart-crosssell__head-icon { width: 16px; height: 16px; flex-shrink: 0; background-color: var(--weu-color-dark); } .weu-cart-crosssell__head-title { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--weu-color-dark); } .weu-cart-crosssell__card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--weu-border-color); border-radius: var(--weu-radius-default); background: var(--weu-white); max-width: 100%; min-width: 0; box-sizing: border-box; } .weu-cart-crosssell__product { display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .weu-cart-crosssell__image { flex-shrink: 0; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--weu-radius-default) - 2px); background: var(--weu-color-grey-light); overflow: hidden; } .weu-cart-crosssell__image img { width: 100%; height: 100%; object-fit: contain; } .weu-cart-crosssell__info { flex: 1; min-width: 0; } .weu-cart-crosssell__name { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--weu-color-dark); text-decoration: none; margin-bottom: 4px; overflow-wrap: anywhere; word-break: break-word; } .weu-cart-crosssell__name:hover { color: var(--weu-color-primary); } .weu-cart-crosssell__reason { margin: 0 0 8px; font-size: 12px; font-weight: 400; line-height: 1.35; color: rgba(29, 29, 29, 0.55); } .weu-cart-crosssell__prices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .weu-cart-crosssell__price { font-size: 14px; font-weight: 700; color: var(--weu-color-dark); line-height: 1.2; } .weu-cart-crosssell__regular { font-size: 12px; font-weight: 400; color: rgba(29, 29, 29, 0.45); text-decoration: line-through; line-height: 1.2; } .weu-cart-crosssell__discount { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--weu-alert-success-text); background: var(--weu-alert-success-bg); border-radius: 999px; white-space: nowrap; } .weu-cart-crosssell__actions { display: flex; gap: 8px; align-items: stretch; min-width: 0; } .weu-cart-crosssell__variant { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; border-radius: var(--weu-radius-default); border-color: var(--weu-border-color); } .weu-cart-crosssell__actions:not(:has(.weu-cart-crosssell__variant)) .weu-cart-crosssell__cta { width: 100%; } .weu-cart-crosssell__cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px; border: 1.5px solid var(--weu-color-dark); border-radius: var(--weu-radius-default); background: var(--weu-white); color: var(--weu-color-dark); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .weu-cart-crosssell__cta:hover { background: var(--weu-color-dark); color: var(--weu-white); } .weu-cart-crosssell__note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 11px; font-weight: 400; line-height: 1.4; color: rgba(29, 29, 29, 0.5); } .weu-cart-crosssell__note-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; background-color: rgba(29, 29, 29, 0.45); } /* En móvil ocultamos el motivo y la nota para simplificar el bloque */ @media (max-width: 767.98px) { .weu-cart-crosssell__reason, .weu-cart-crosssell__note { display: none; } } /* Cupón promocional colapsable (drawer) */ .weu-cart-voucher { margin: 8px 0 16px; padding-top: 8px; border-top: 1px solid var(--weu-color-border, #efefef); } .weu-cart-voucher__applied { list-style: none; margin: 0 0 12px; padding: 0; } .weu-cart-voucher__applied-item { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; min-width: 0; } .weu-cart-voucher__applied-item > span:first-child { min-width: 0; overflow-wrap: anywhere; } .weu-cart-voucher__applied-value { margin-left: auto; font-weight: 700; flex-shrink: 0; } .weu-cart-voucher__remove { display: inline-flex; align-items: center; justify-content: center; color: var(--weu-color-muted, #888) !important; opacity: 1; line-height: 1; text-decoration: none; vertical-align: middle; transition: opacity 0.2s ease, color 0.2s ease; } .weu-cart-voucher__remove i, .weu-cart-voucher__remove .tbc-heroicon { width: 18px; height: 18px; color: inherit; } .cart-summary__voucher-remove, .weu-cart-summary-row--voucher .weu-cart-voucher__remove { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: var(--weu-color-muted, #888) !important; opacity: 1; line-height: 1; } .cart-summary__voucher-remove i, .cart-summary__voucher-remove .tbc-heroicon, .weu-cart-summary-row--voucher .weu-cart-voucher__remove i, .weu-cart-summary-row--voucher .weu-cart-voucher__remove .tbc-heroicon { width: 18px; height: 18px; color: inherit; } .cart-summary__voucher-remove:hover, .cart-summary__voucher-remove:focus-visible, .weu-cart-voucher__remove:hover, .weu-cart-voucher__remove:focus-visible, .weu-cart-summary-row--voucher .weu-cart-voucher__remove:hover, .weu-cart-summary-row--voucher .weu-cart-voucher__remove:focus-visible { color: var(--weu-color-muted, #888) !important; opacity: 0.65; } .weu-cart-voucher__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 0; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: var(--weu-color-black); cursor: pointer; text-align: left; } .weu-cart-voucher--expanded .weu-cart-voucher__label { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--weu-color-black); } .weu-cart-voucher--expanded .weu-cart-voucher__panel { display: block; padding-bottom: 8px; } .weu-cart-voucher--expanded .weu-cart-voucher__panel[hidden] { display: block !important; } .weu-cart-voucher__toggle > span:first-child { min-width: 0; overflow-wrap: anywhere; } .weu-cart-voucher__chevron { font-size: 14px; transition: transform 0.2s ease; } .weu-cart-voucher__toggle[aria-expanded="true"] .weu-cart-voucher__chevron { transform: rotate(90deg); } .weu-cart-voucher__panel { padding-bottom: 8px; } .weu-cart-voucher__form { display: flex; gap: 8px; } .weu-cart-voucher__form .form-control { flex: 1; min-width: 0; font-size: 14px; } .weu-cart-voucher__form .btn { flex-shrink: 0; white-space: nowrap; } /* Estado vacío — reglas legacy consolidadas arriba (.weu-cart-empty) */ @media (max-width: 575px) { #weuCartOffcanvas { left: 0; right: 0; width: 100%; max-width: 100%; border-left: 0; } #weuCartOffcanvas .weu-cart-drawer__header, #weuCartOffcanvas .offcanvas-header { padding: 14px 16px; } .weu-cart-drawer__scroll, .weu-cart-drawer__footer { padding-left: 12px; padding-right: 12px; } .weu-cart-item-image, .weu-cart-crosssell__image { width: 64px; height: 64px; } .weu-cart-item-controls { width: 100%; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; } .weu-cart-item-prices { margin-left: auto; width: auto; max-width: 55%; align-items: flex-end; text-align: right; flex: 0 1 auto; } .weu-cart-item-price, .weu-cart-summary-value { white-space: normal; overflow-wrap: anywhere; } } /* Evitar scroll de página con carrito abierto en móvil */ @media (max-width: 991.98px) { html:has(body.offcanvas-open #weuCartOffcanvas.show), body.offcanvas-open:has(#weuCartOffcanvas.show) { overflow: hidden; max-width: 100%; overscroll-behavior: none; } } /* Fix backdrop positioning — opacidad explícita (no depender solo de .fade de Bootstrap) */ #weu-cart-backdrop, #weu-auth-backdrop, .offcanvas-backdrop#weu-cart-backdrop, .offcanvas-backdrop#weu-auth-backdrop { z-index: 1090 !important; opacity: 0.5 !important; background-color: rgba(0, 0, 0, 0.5) !important; } /* Menú móvil: el backdrop debe quedar por debajo del panel (#mobileMenuCanvas, z-index 10050) y por encima del botón sticky FILTROS (#amazzing_filter, z-index 1050) */ #weu-custom-backdrop, .offcanvas-backdrop#weu-custom-backdrop { z-index: 10040 !important; opacity: 0.5 !important; background-color: rgba(0, 0, 0, 0.5) !important; } /* Overlay de carga — plato girando con dos pedales */ .weu-cart-loading { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 15, 15, 0.58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } .weu-cart-loading.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .weu-cart-loading__panel { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--weu-white); text-align: center; } .weu-cart-loading__scene { display: flex; align-items: center; justify-content: center; } .weu-cart-loading__scene-svg { display: block; width: min(120px, 40vw); height: auto; color: var(--weu-white); } .weu-cl-ring { fill: none; stroke: currentColor; stroke-width: 3; } .weu-cl-ring-in { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.85; } .weu-cl-teeth line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .weu-cl-spider line { stroke: currentColor; stroke-width: 2; opacity: 0.8; stroke-linecap: round; } .weu-cl-crankarm { stroke: currentColor; stroke-width: 5; stroke-linecap: round; } .weu-cl-pedal2 { fill: currentColor; stroke: none; } .weu-cl-axle { fill: currentColor; stroke: none; } .weu-cart-loading__label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } body.weu-cart-loading-active { overflow: hidden; } #weu-auth-backdrop { z-index: 1090 !important; } /* Desktop: permitir scroll de la página con carrito / cuenta abiertos */ @media (min-width: 992px) and (hover: hover) { body.offcanvas-open { overflow: auto !important; } } /* ========================================================================== HEADER NEW PRODUCTS / ACCESO RÁPIDO ========================================================================== */ .weu-header-new-products { color: var(--weu-white, #ffffff); font-size: 13px; max-width: 100%; width: 100%; overflow: hidden; display: flex; align-items: stretch; /* Negro (catálogo) + gris carbón (promociones) */ --weu-header-promo-bg: var(--weu-color-grey-dark, #1d1d1d); --weu-header-promo-text: var(--weu-white, #ffffff); --weu-header-promo-kicker: #a8a8a8; --weu-header-promo-slash: 20px; } .weu-header-new-products--has-promo { background-color: var(--weu-color-black, #000); } .weu-header-new-products .container-md { display: flex; align-items: stretch; gap: 0; width: 100%; } .weu-header-new-products-carousel { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0; height: 100%; min-height: 50px; overflow: hidden; position: relative; display: flex; align-items: stretch; } .weu-header-new-products-carousel.has-overflow { padding: 0 30px; } .weu-header-new-products__track { width: 100%; height: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; touch-action: pan-x; } .weu-header-new-products__track::-webkit-scrollbar { display: none; } .weu-header-new-products__track.is-dragging { cursor: grabbing; user-select: none; } .weu-header-new-products__list { display: flex; flex-wrap: nowrap; align-items: stretch; margin: 0; padding: 0; list-style: none; gap: 0; height: 100%; width: max-content; } .weu-header-new-products__list > li { width: auto; white-space: nowrap; display: flex; align-items: center; flex: 0 0 auto; } .weu-header-new-products__title-slide, .weu-header-new-products__item { margin-right: 14px; } .weu-header-new-products__title-slide { padding-left: 8px; } .weu-header-new-products__title { flex-shrink: 0; display: flex; align-items: center; margin: 0; } .weu-header-new-products__title.weu-header-acceso__promo-kicker { color: var(--weu-header-promo-kicker); padding: 0; } .weu-header-new-products__title--stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; line-height: 1.05; white-space: normal; } .weu-header-new-products__title--stacked .weu-header-new-products__title-line { display: block; } .weu-header-new-products__item a { color: var(--weu-white, #ffffff) !important; text-decoration: none; transition: opacity 0.3s ease; padding: var(--weu-spacing-xs) 0; font-size: var(--font-size-base); font-weight: 400; font-style: italic; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } .weu-header-new-products__item a:hover { opacity: 0.8; } /* Slides de promociones (uno por enlace): banda continua + diagonales en extremos */ .weu-header-acceso__promo-slide { align-self: stretch !important; height: auto !important; min-height: 100%; padding: 0 12px !important; margin: 0 !important; background: var(--weu-header-promo-bg); display: flex !important; align-items: center; gap: 12px; flex-shrink: 0; } .weu-header-acceso__promo-slide--start { padding-left: calc(var(--weu-header-promo-slash) + 18px) !important; clip-path: polygon( var(--weu-header-promo-slash) 0, 100% 0, 100% 100%, 0 100% ); -webkit-clip-path: polygon( var(--weu-header-promo-slash) 0, 100% 0, 100% 100%, 0 100% ); } .weu-header-acceso__promo-slide--end { padding-right: calc(var(--weu-header-promo-slash) + 20px) !important; clip-path: polygon( 0 0, 100% 0, calc(100% - var(--weu-header-promo-slash)) 100%, 0 100% ); -webkit-clip-path: polygon( 0 0, 100% 0, calc(100% - var(--weu-header-promo-slash)) 100%, 0 100% ); } .weu-header-acceso__promo-slide--start.weu-header-acceso__promo-slide--end { clip-path: polygon( var(--weu-header-promo-slash) 0, 100% 0, calc(100% - var(--weu-header-promo-slash)) 100%, 0 100% ); -webkit-clip-path: polygon( var(--weu-header-promo-slash) 0, 100% 0, calc(100% - var(--weu-header-promo-slash)) 100%, 0 100% ); } .weu-header-acceso__promo-kicker { flex-shrink: 0; color: var(--weu-header-promo-kicker); font-size: 11px; font-weight: 400; font-style: italic; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; } .weu-header-acceso__promo-sep { flex-shrink: 0; align-self: center; width: 0; height: 14px; border-left: 1px dotted rgba(255, 255, 255, 0.4); } .weu-header-acceso__promo-link { color: var(--weu-header-promo-text) !important; text-decoration: none; text-transform: uppercase; font-size: var(--font-size-base); font-weight: 400; font-style: italic; white-space: nowrap; display: inline-flex; align-items: center; transition: opacity 0.3s ease; } .weu-header-acceso__promo-link:hover { opacity: 0.75; color: var(--weu-header-promo-text) !important; } /* Splide: ocultar región screen-reader y paginación (sin splide.min.css parpadean "..." al scroll) */ .splide__sr, .splide__pagination { display: none !important; } /* Miniaturas carrusel = mismas reglas que listado categoría */ .weu-cat-products .weu-product-carousel .weu-carousel-product > .card { position: relative; } .weu-cat-products .weu-product-carousel .weu-carousel-product:hover > .card, .weu-cat-products .weu-product-carousel .weu-carousel-product:focus-visible > .card { background-color: var(--weu-color-primary-soft-hover); } .weu-cat-products .weu-product-carousel > .splide__track { cursor: grab; } /* Miniaturas en carrusel de alternativas descatalogadas: una sola capa rosa (evitar doble rgba) */ #weuDiscontinuedAlternativesSplide-list .product-miniature > .card { position: relative; isolation: isolate; } @media (hover: hover) and (pointer: fine) { #weuDiscontinuedAlternativesSplide-list .product-miniature > .card:is(:hover, :focus-within) :is( .product-miniature__link, .product-miniature__image-container, .thumbnail-container, picture ) { background-color: transparent !important; } } @media (hover: none) { #weuDiscontinuedAlternativesSplide-list .product-miniature > .card:is(:hover, :focus-within, :active) :is( .product-miniature__link, .product-miniature__image-container, .thumbnail-container, picture ) { background-color: transparent !important; } } @media (hover: none) and (pointer: coarse) { .weu-cat-products .weu-product-carousel > .splide__track, .cross-selling-splide-container .splide__track, #weuRelatedProductsSplide-list .splide__track, .js-weu-viewed-products-splide .splide__track, .js-wcsp-products-splide .splide__track, #weuDiscontinuedAlternativesSplide-list .splide__track { touch-action: pan-y pinch-zoom; } } @media (hover: hover) and (pointer: fine) { .weu-cat-products .weu-product-carousel > .splide__track { touch-action: pan-x; } } @media (max-width: 575px) { :is(.cross-selling-splide-container, .related-products, .product-discontinued-alternatives) { --weu-carousel-scope-w: 100%; --weu-mobile-slide-w: calc((var(--weu-carousel-scope-w) - var(--weu-mobile-product-gap, 12px)) / 2); --weu-mobile-peek-visible: calc(var(--weu-mobile-slide-w) * 1.32 + var(--weu-mobile-product-gap, 12px)); } :is(.weu-product-carousel, .js-cross-selling-splide, .js-weu-viewed-products-splide, .js-wcsp-products-splide, #weuRelatedProductsSplide-list, #weuDiscontinuedAlternativesSplide-list)[data-weu-mobile-peek] { padding: 0 !important; width: 100%; max-width: 100%; overflow: hidden; } :is(.weu-product-carousel, .js-cross-selling-splide, .js-weu-viewed-products-splide, .js-wcsp-products-splide, #weuRelatedProductsSplide-list, #weuDiscontinuedAlternativesSplide-list)[data-weu-mobile-peek] .splide__track { overflow: hidden !important; clip-path: none !important; } /* Splide fija el ancho de cada slide vía estilo inline (fixedWidth). Aquí solo impedimos que se encojan y colapsen; NO fijamos width con variables (que podrían estar indefinidas y anular el ancho inline de Splide). */ :is(.weu-product-carousel, .js-cross-selling-splide, .js-weu-viewed-products-splide, .js-wcsp-products-splide, #weuRelatedProductsSplide-list, #weuDiscontinuedAlternativesSplide-list)[data-weu-mobile-peek] .splide__slide { box-sizing: border-box; flex-grow: 0 !important; flex-shrink: 0 !important; } } .weu-cat-products .weu-product-carousel.is-dragging > .splide__track { cursor: grabbing; } /* ========================================================================== Flechas con fade-in al hover (reutilizable: Splide + Bootstrap carousel) Uso: añadir .weu-hover-arrows al contenedor de flechas Padre: .splide o .weu-product-carousel (position: relative) ========================================================================== */ :is(.splide, .weu-product-carousel) .weu-hover-arrows { position: absolute; top: 50%; left: 0; right: 0; z-index: 2; transform: translateY(-50%); pointer-events: none; opacity: 0; transition: opacity 200ms ease; } :is(.splide, .weu-product-carousel):hover .weu-hover-arrows, :is(.splide, .weu-product-carousel):focus-within .weu-hover-arrows { opacity: 1; } .weu-hover-arrows :is(.splide__arrow, .carousel-control-prev, .carousel-control-next) { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; opacity: 1; background-color: var(--weu-color-primary); background-image: none; transition: background-color 200ms ease, transform 200ms ease; } .weu-hover-arrows :is(.splide__arrow, .carousel-control-prev, .carousel-control-next):hover { background-color: color-mix(in srgb, var(--weu-color-primary), var(--weu-color-black) 12%); transform: translateY(-50%) scale(1.05); } .weu-hover-arrows :is(.splide__arrow--prev, .carousel-control-prev) { left: 0; } .weu-hover-arrows :is(.splide__arrow--next, .carousel-control-next) { right: 0; } .weu-hover-arrows :is(.splide__arrow, .carousel-control-prev, .carousel-control-next) .tbc-heroicon { color: var(--weu-white); background-color: currentColor; width: 24px; height: 24px; } .weu-hover-arrows .carousel-control-prev-icon, .weu-hover-arrows .carousel-control-next-icon { display: none; } @media (max-width: 1024px) { :is(.splide, .weu-product-carousel) .weu-hover-arrows { display: none; } } /* Custom Splide Arrows for the new products ribbon */ /* Fix outline jump */ .weu-header-new-products-carousel li:focus { outline: none !important; border: none !important; } .weu-header-new-products-carousel:not(.has-overflow) .weu-header-new-products-arrows { display: none; } .weu-header-new-products-arrows .weu-header-new-products__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #a9aeb1; border: none; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; opacity: 1; cursor: pointer; transition: all 0.3s ease; z-index: 10; padding: 0; } .weu-header-new-products-arrows .weu-header-new-products__arrow .tbc-heroicon { width: 14px; height: 14px; background-color: #111; filter: none !important; } .weu-header-new-products-arrows .weu-header-new-products__arrow:hover { background: var(--weu-white, #ffffff); } .weu-header-new-products-arrows .weu-header-new-products__arrow[hidden], .weu-header-new-products-arrows .weu-header-new-products__arrow:disabled { display: none !important; } .weu-header-new-products-arrows .weu-header-new-products__arrow--prev { left: 0; } .weu-header-new-products-arrows .weu-header-new-products__arrow--next { right: 0; } @media(max-width: 767px) { .weu-header-new-products__list { width: 100%; } .weu-header-new-products { --weu-header-promo-slash: 16px; } .weu-header-acceso__promo-slide { padding-left: 10px !important; padding-right: 10px !important; gap: 10px; } /* Respiro respecto al corte diagonal (no pegar texto al borde gris) */ .weu-header-acceso__promo-slide--start { padding-left: calc(var(--weu-header-promo-slash) + 22px) !important; } .weu-header-acceso__promo-slide--end { padding-right: calc(var(--weu-header-promo-slash) + 24px) !important; } .weu-header-new-products-carousel { min-height: 44px; } /* En móvil solo flecha derecha */ .weu-header-new-products-arrows .weu-header-new-products__arrow--prev { display: none !important; } .weu-header-new-products-carousel.has-overflow { padding: 0 28px 0 0; } .mobile_menu { margin-left: 0!important; padding: 0; } .mobile_menu .header-block__action-btn.weu-burger-btn { margin-left: 0; } } /**************************************************/ /** cart **/ /**************************************************/ /* 1. RESETEO AGRESIVO: Quitamos cualquier interferencia de Terrabike/Base */ .cross-selling-splide-container .splide__track { overflow: hidden !important; /* Crítico para que el deslizamiento funcione */ position: relative; padding: 10px 0; } .cross-selling-splide-container .splide__list { display: flex !important; /* Forzamos la fila horizontal */ flex-wrap: nowrap !important; gap: var(--weu-spacing-sm); /* Prohibimos que bajen de fila */ padding: 0 !important; margin: 0 !important; list-style: none !important; } .cross-selling-splide-container .splide__slide { flex: 0 0 auto !important; /* Evitamos que el slide se encoja o crezca */ float: none !important; /* Fuera floats del tema */ margin: 0 !important; max-width: none !important; /* Fuera anchos máximos de col-X */ list-style: none; } /* 2. Limpieza de la miniatura dentro del carrusel */ .cross-selling-splide-container .product-miniature, .cross-selling-splide-container .product-miniature-wrapper { width: 100% !important; /* Que ocupe el ancho que le de Splide */ margin: 0 !important; } .cross-selling-splide-container .product-miniature .product-miniature__manufacturer { right: var(--weu-spacing-md); } /* 3. Posicionamiento de las flechas (como en la imagen, arriba a la derecha) */ .cross-selling-splide-container .js-cross-selling-splide { position: relative; } .cross-selling-splide-container .splide__arrows { position: absolute; top: 50%; /* Subimos las flechas al nivel del título */ right: 0; width: 100%; display: flex; justify-content: space-between; } .cross-selling-splide-container .splide__arrow { background: #000; opacity: 1; width: 40px; height: 40px; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; justify-content: center; align-items: center; background-color: color-mix(in srgb, var(--weu-color-black), transparent 50%); } .cross-selling-splide-container .splide__arrow:hover { background: #444; /* Gris oscuro al pasar el ratón */ } .cross-selling-splide-container .splide__arrow svg { fill: #fff; /* Iconos en blanco */ width: 14px; } .cross-selling-splide-container .splide__arrow i.material-icons { font-size: 20px; color: #fff; } .cross-selling-splide-container .splide__arrow--prev { margin-right: 5px; /* Separación entre flechas */ left: 0; } .cross-selling-splide-container .splide__arrow--next { right: 0; } /* Evitamos el colapso visual antes de cargar JS */ .cross-selling-splide-container .js-cross-selling-splide:not(.is-initialized) .splide__list { display: flex; overflow: hidden; width: 100%; } body#checkout .breadcrumb__wrapper { display: none; } #checkout #content-wrapper, #cart #content-wrapper { padding-top: var(--weu-spacing-lg); } @media(max-width: 767px) { .product-line__image { width: calc(33.33% - var(--weu-spacing-sm)); } .product-line__content { width: auto; } body#cart .quantity-button .input-group { max-width: 100%; } #checkout #content-wrapper, #cart #content-wrapper { padding-top: var(--weu-spacing-md); } } /* ========================================================================== LOGIN PAGE - CENTERED LAYOUT ========================================================================== */ /* Contenedor principal centrado */ #authentication .login.tb-auth, #authentication .tb-auth { display: flex; justify-content: center; align-items: stretch; margin: 0 auto; max-width: 100%; border-radius: var(--weu-radius-default); border: 1px solid var(--weu-color-grey); overflow: hidden; } #authentication .login__form-wrapper, #authentication .tb-auth__login { width: 50%; background: var(--weu-white, #ffffff); padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; } #authentication .tb-auth__title, #authentication .login__form-wrapper h1, #authentication .login__form-wrapper h2 { text-align: left; margin: 0 0 var(--weu-spacing-sm); font-weight: 700; font-size: var(--font-size-md); } #authentication .tb-auth__intro { margin: 0 0 var(--weu-spacing-md); color: rgba(29, 29, 29, 0.65); font-size: var(--font-size-sm); line-height: 1.45; } #authentication .tb-auth__login .weu-auth-offcanvas__form { display: flex; flex-direction: column; gap: 14px; } #authentication .tb-auth__login .weu-auth-offcanvas__forgot { margin: 2px 0 4px; } #authentication .tb-auth__sep { display: flex; align-items: center; gap: 12px; margin: 1.25rem 0 1rem; color: rgba(29, 29, 29, 0.5); font-size: 13px; } #authentication .tb-auth__sep::before, #authentication .tb-auth__sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--weu-border-color, #e5e5e5); } #authentication .tb-auth__login .weu-auth-social, #authentication .tb-auth__register .weu-auth-social { width: 100%; } #authentication .tb-auth__login .weu-auth-social__btn, #authentication .tb-auth__register .weu-auth-social__btn { width: 100%; } #authentication .login__register-prompt, #authentication .tb-auth__register { width: 50%; background-color: var(--weu-color-grey); text-align: left; padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; } #authentication .tb-auth__register-actions { margin-top: auto; padding-top: var(--weu-spacing-md); } #authentication .tb-auth__register-actions .tb-auth__sep { margin: 1rem 0; } #authentication .tb-auth__register-google { margin: 0; } #authentication .tb-auth__register-email-btn { min-height: 48px; font-weight: 600; border-radius: var(--weu-radius-default); } .tb-benefits-container { margin-bottom: var(--weu-spacing-md); flex: 1 1 auto; } .tb-benefits-header { margin-bottom: var(--weu-spacing-md); } .tb-benefits-header .h2 { text-align: left; font-weight: 700; font-size: var(--font-size-md); margin: 0 0 var(--weu-spacing-xs); color: var(--weu-color-black, #000); } .tb-benefits-header p { text-align: left; margin: 0; color: rgba(29, 29, 29, 0.65); font-size: var(--font-size-sm); line-height: 1.45; } .tb-benefits-grid { display: flex; flex-direction: column; gap: 14px; } .tb-benefit-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid rgba(29, 29, 29, 0.06); border-radius: var(--weu-radius-default); } .tb-icon-wrapper { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--weu-color-black); background: #fff; border-radius: 10px; border: 1px solid rgba(29, 29, 29, 0.08); } .tb-icon-wrapper .tbc-heroicon { width: 20px; height: 20px; } .tb-benefit-item-content { min-width: 0; } .tb-benefit-item p { text-align: left; font-size: var(--font-size-sm); margin-bottom: 0; color: rgba(29, 29, 29, 0.7); line-height: 1.4; } .tb-benefit-item .h3 { text-align: left; margin: 0 0 4px; font-size: var(--font-size-base); font-weight: 600; } @media (min-width: 1024px) { #authentication .login.tb-auth, #authentication .tb-auth { max-width: 960px; } } @media (max-width: 991px) { #authentication .login.tb-auth, #authentication .tb-auth { flex-direction: column; align-items: stretch; padding: 0; } #authentication .login__form-wrapper, #authentication .tb-auth__login, #authentication .login__register-prompt, #authentication .tb-auth__register { width: 100%; } #authentication .login__form-wrapper, #authentication .tb-auth__login { border-radius: var(--weu-border-default) var(--weu-border-default) 0 0; } #authentication .login__register-prompt, #authentication .tb-auth__register { border-radius: 0 0 var(--weu-border-default) var(--weu-border-default); border-top: 1px solid var(--weu-color-grey); } } #registration .page-title { margin-bottom: var(--weu-spacing-md); } #registration .register-form { width: 700px; margin: 0 auto; border: 1px solid var(--weu-color-grey); padding: var(--weu-spacing-md); border-radius: var(--weu-border-default); } /* Recuperación / restablecer contraseña — mismo patrón que login weu-auth */ #password .tb-auth--password { max-width: 480px; margin: 0 auto; border: 1px solid var(--weu-color-grey); border-radius: var(--weu-radius-default); overflow: hidden; background: var(--weu-white, #ffffff); } #password .tb-auth--password .tb-auth__login { width: 100%; padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0; } #password .tb-auth--password .tb-auth__title { text-align: left; margin: 0 0 var(--weu-spacing-sm); font-weight: 700; font-size: var(--font-size-md); } #password .tb-auth--password .tb-auth__intro { margin: 0 0 var(--weu-spacing-md); color: rgba(29, 29, 29, 0.65); font-size: var(--font-size-sm); line-height: 1.45; } #password .tb-auth--password .weu-auth-offcanvas__form { display: flex; flex-direction: column; gap: 14px; } #password .weu-password-reset-form__email { margin: 0; font-size: var(--font-size-sm); color: rgba(29, 29, 29, 0.72); } #password .tb-auth--password .alert { margin-bottom: var(--weu-spacing-md); } #registration .register-form .btn-primary { width: 100%; } #registration .register-form .form-footer { margin-bottom: var(--weu-spacing-md); } #registration .register-form__login-prompt { text-align: center; } #registration .register-form .opc_social_form { display: flex; flex-direction: column; align-items: center; } #registration .register-form .opc_solo_or { text-align: center; } #password .page-footer { max-width: 480px; margin: 0 auto; } #password .page-content { margin-bottom: var(--weu-spacing-md); } #password .weu-password-back { margin-top: var(--weu-spacing-sm); } /* Solo el enlace «volver»; no tocar iconos del header (están dentro de body#password) */ #password .weu-password-back .tbc-heroicon { width: 16px; height: 16px; } /* Medidor nativo PS (mismo que /registro) */ #password [data-ps-ref="password-feedback-container"] { margin-top: 8px; } #password [data-ps-ref="password-feedback-container"] .progress-container { margin-bottom: 6px; } #password [data-ps-ref="password-feedback-container"] .progress { height: 4px; margin-bottom: 0; background-color: rgba(29, 29, 29, 0.08); border-radius: 999px; overflow: hidden; } #password [data-ps-ref="password-feedback-container"] .progress-bar { border-radius: 999px; } #password .password-requirements { margin: 0; padding: 0; background: transparent; } #password .password-requirements p, #password .password-requirements__length, #password .password-requirements__score { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 4px; font-size: 11px; line-height: 1.4; color: rgba(29, 29, 29, 0.55); } #password .password-requirements p:last-child, #password .password-requirements__score { margin-bottom: 0; } #password .password-requirements .material-icons, #password .password-requirements__icon { font-size: 14px; line-height: 1; flex-shrink: 0; margin-top: 1px; color: rgba(29, 29, 29, 0.35); } #password .password-requirements .material-icons.text-success, #password .password-requirements__icon.text-success { color: rgba(234, 30, 28, 0.75) !important; } /* El theme añade .form-control/.border al input; lo absorbemos en el control weu-auth */ #password .weu-auth-field__input.form-control { border: 0 !important; box-shadow: none !important; background: transparent !important; padding-left: 0; padding-right: 0; height: auto; min-height: 0; } #password .weu-auth-field__control:has(.weu-auth-field__input.border-success) { border-color: var(--weu-color-success, #198754); box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.12); } #password .weu-auth-field__control:has(.weu-auth-field__input.border-danger) { border-color: var(--weu-color-danger, #dc3545); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); } /************************************************* CONTACT ***********************************************/ .tb-contact-page { margin: 0 auto; padding: var(--weu-spacing-md); } .contact-container { padding:0; } .contact-row { margin-bottom: var(--weu-spacing-lg); display: flex; flex-wrap: wrap; gap: var(--weu-spacing-lg); } .contact-intro { width: calc(33.33% - var(--weu-spacing-md)); } .contact-content { width: calc(66.66% - var(--weu-spacing-md)); } .contact-intro h2 { font-size: var(--weu-font-md); font-weight: 700; margin-bottom: var(--weu-spacing-md); } .contact-intro p { line-height: 1.6; } /* Accordion Style */ .tb-accordion .tb-faq-item { border-bottom: 1px solid var(--weu-color-grey); padding: var(--weu-spacing-sm) 0; } /* Contact Form Overrides (Ajuste para PS 9) */ .contact-form { background: transparent; padding: 0; } /*.contact-form .form-footer input[type="submit"], .contact-form button[type="submit"] { background: #1a1a1a; border: none; padding: 12px 40px; font-weight: 600; text-transform: uppercase; transition: background 0.3s; }*/ /*.contact-form button[type="submit"]:hover { background: #EA1E1C; } */ /* Map Card Section */ .tb-map-card { display: flex; border: 1px solid #000; /* Borde negro como en la imagen */ margin-top: 30px; overflow: hidden; background: #fff; } .map-iframe { flex: 2; } .map-info { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; background: #fcfcfc; } .icon-loc { width: 40px; color: #666; margin-bottom: 15px; } .tb-separator { border: 0; border-top: 1px solid var(--weu-color-grey); margin: var(--weu-spacing-lg) 0; } .tb-faq-accordion-wrapper { border-top: 1px solid var(--weu-color-grey); } .tb-faq-item { border-bottom: 1px solid var(--weu-color-grey); padding: var(--weu-spacing-sm) 0; transition: all 0.3s ease; } .tb-faq-item summary { list-style: none; font-weight: 700; font-size: var(--weu-font-size-base); color: var(--weu-color-black); cursor: pointer; display: flex; justify-content: space-between; align-items: center; outline: none; } /* El triángulo lateral personalizado */ .tb-faq-item summary::after { display:block; content: ""; background-image: url('../../assets/fonts/heroicons/chevron-right.svg'); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 16px; height: 16px; transform: rotate(90deg); transition: transform 0.3s ease; } .tb-faq-item[open] summary::after { transform: rotate(270deg); } .tb-faq-content { padding-top: var(--weu-spacing-sm); line-height: 1.6; } /* Quitar la flecha nativa en Chrome/Safari */ summary::-webkit-details-marker { display: none; } @media (max-width: 767px) { .tb-map-card { flex-direction: column; } .contact-row { flex-direction: column; gap: var(--weu-spacing-md); } .contact-intro, .contact-content { width: 100%; } .contact-intro p { margin-bottom: 0; } } /* Footer styles moved to assets/css/tbc-footer.css */ /************************************* CUSTOMER ACCOUNT MENU ************************************/ /* ============================================================================ PÁGINA "MI CUENTA" — grid de tarjetas + menú lateral ============================================================================ */ /* ----- Grid de accesos (página principal de la cuenta) ----- */ .customer-link.row, .customer-link { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0 0 8px; } /* Cada acceso del grid: neutraliza columnas Bootstrap heredadas */ .customer-link > a { width: auto !important; max-width: none !important; flex: initial !important; padding: 0 !important; margin: 0 !important; display: block; text-decoration: none; } /* Tarjeta */ .customer-link > a .link-item { position: relative; display: flex !important; flex-direction: row; align-items: center; gap: 14px; height: 100%; min-height: 84px; margin: 0; padding: 18px 46px 18px 18px; background: var(--weu-white); border: 1px solid var(--weu-color-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); color: var(--weu-color-dark); font-weight: 600; font-size: 15px; line-height: 1.3; text-transform: none; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease; } /* Chip del icono */ .customer-link > a .link-item .cl-ic { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background-color: var(--weu-color-primary-soft); color: var(--weu-color-primary); transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease; } .customer-link > a .link-item .cl-ic .tbc-heroicon { width: 24px; height: 24px; margin: 0; color: inherit; } /* Fallback: icono sin chip (módulos que no lo envuelven) */ .customer-link > a .link-item > .tbc-heroicon { flex: 0 0 auto; width: 26px; height: 26px; margin: 0; color: var(--weu-color-primary); } /* Chevron decorativo a la derecha */ .customer-link > a .link-item::after { content: ""; position: absolute; top: 50%; right: 18px; width: 9px; height: 9px; border-right: 2px solid var(--weu-color-neutral); border-bottom: 2px solid var(--weu-color-neutral); transform: translateY(-50%) rotate(-45deg); transition: right 0.22s ease, border-color 0.22s ease; } /* Hover / foco */ .customer-link > a:hover .link-item, .customer-link > a:focus-visible .link-item { transform: translateY(-3px); border-color: var(--weu-color-primary); box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12); } .customer-link > a:hover .link-item .cl-ic { background-color: var(--weu-color-primary); color: var(--weu-white); transform: scale(1.05); } .customer-link > a:hover .link-item::after { right: 14px; border-color: var(--weu-color-primary); } /* Botón cerrar sesión (visible en móvil) */ .customer-link__logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--weu-color-border); color: var(--weu-color-primary); font-weight: 700; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .customer-link__logout:hover { background: var(--weu-color-primary); border-color: var(--weu-color-primary); color: var(--weu-white); } @media (max-width: 575.98px) { .customer-link.row, .customer-link { grid-template-columns: 1fr 1fr; gap: 12px; } .customer-link > a .link-item { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 116px; padding: 16px; } .customer-link > a .link-item::after { display: none; } } /* ----- Menú lateral de la cuenta ----- */ .account-menu { flex-direction: column; gap: 4px; align-items: stretch; padding: 12px; background: var(--weu-white); border: 1px solid var(--weu-color-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .account-menu__title { font-size: var(--font-size-md); font-weight: 700; margin-bottom: 8px !important; padding: 4px 12px 0; color: var(--weu-color-dark); } /* Cada línea del menú lateral (nativas + inyectadas por módulos) */ .account-menu > a { width: auto !important; max-width: none !important; flex: initial !important; margin: 0 !important; padding: 0 !important; display: block; text-decoration: none; } .account-menu > a .link-item { display: flex !important; flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 11px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--weu-color-dark); background: transparent; transition: background-color 0.18s ease, color 0.18s ease; } /* Iconos del menú lateral: tamaño uniforme, sin chip */ .account-menu > a .link-item .cl-ic { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; padding: 0; background: none; border-radius: 0; color: inherit; } .account-menu > a .link-item .tbc-heroicon { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; color: inherit; } .account-menu > a:hover .link-item, .account-menu > a.active .link-item { background: var(--weu-color-primary-soft); color: var(--weu-color-primary); } .account-menu > a.account-menu--signout .link-item { margin-top: 6px; border-top: 1px solid var(--weu-color-border); border-radius: 0 0 10px 10px; padding-top: 14px; color: var(--weu-color-primary); } .account-menu > a.account-menu--signout:hover .link-item { background: var(--weu-color-primary); color: var(--weu-white); } /* Enlace móvil «Volver a tu cuenta» — weu-btn-interface */ .account-menu__back.weu-btn-interface { margin: 0 0 16px; text-transform: none; letter-spacing: 0.02em; } .account-menu__back.weu-btn-interface .tbc-heroicon-chevron-left { width: 16px; height: 16px; flex-shrink: 0; color: var(--weu-color-primary); } .account-menu__back.weu-btn-interface:hover .tbc-heroicon-chevron-left, .account-menu__back.weu-btn-interface:focus-visible .tbc-heroicon-chevron-left { color: inherit; } /* ============================================================================ HISTORIAL DE PEDIDOS — grid, tipografía y acciones Terra Bike ============================================================================ */ .order-history { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--weu-color-dark); } .order-history__inner, .order-history__header, .order-history__row { font: inherit; } .order-history__cell { font: inherit; color: inherit; } .order-history__cell:before { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--weu-color-black); } .order-history__order-link { color: inherit; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; } .order-history__order-link:hover, .order-history__order-link:focus-visible { color: var(--weu-color-primary); text-decoration: none; } .order-history__cell--total { font-weight: 700; } .order-history__status { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 10px; font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; white-space: normal; } .order-history__cell--actions { display: flex !important; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; } .order-history__cell--actions:before { display: none !important; } .order-history .weu-order-action.weu-btn-interface { width: 100%; justify-content: flex-start; min-height: 40px; padding: 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .order-history .weu-order-action.weu-btn-interface .tbc-heroicon { width: 16px; height: 16px; flex-shrink: 0; color: var(--weu-color-primary); } .order-history .weu-order-action.weu-btn-interface:hover .tbc-heroicon, .order-history .weu-order-action.weu-btn-interface:focus-visible .tbc-heroicon { color: inherit; } .order__header__right { display: flex; justify-content: flex-end; align-items: flex-end; margin-top: 12px; } .order__header__right .weu-order-detail-reorder { min-height: 40px; padding: 0 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .order__header__right .weu-order-detail-reorder .tbc-heroicon { width: 16px; height: 16px; color: var(--weu-color-primary); } @media (min-width: 576px) { .order__header__right { margin-top: 0; } } .weu-order-invoice { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--weu-color-primary-soft); color: var(--weu-color-primary); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .weu-order-invoice .tbc-heroicon { width: 18px; height: 18px; margin: 0; color: inherit; } .weu-order-invoice:hover, .weu-order-invoice:focus-visible { background: var(--weu-color-primary); color: var(--weu-white); } @media (min-width: 1200px) { .order-history__inner { grid-template-columns: minmax(68px, 0.55fr) minmax(88px, 0.75fr) minmax(96px, 0.85fr) minmax(118px, 1.15fr) minmax(118px, 1.2fr) minmax(48px, 0.45fr) minmax(168px, 1.05fr) !important; } .order-history__cell--reference { font-size: 13px; } .order-history__cell--actions { min-width: 168px; } } @media (max-width: 575.98px) { .order-history__cell--actions { align-items: stretch; } .order-history .weu-order-action.weu-btn-interface { white-space: normal; } } .addresses__new-address i, .address__delete { color: var(--weu-color-black); } .address__delete, .address__edit { color: var(--weu-color-black); } .address__alias, .address__content { color: var(--weu-color-black); } .footer .footer__block__content-list a.logout { color: var(--weu-color-white); } /* ============================================================================ REDISEÑO CHECKOUT ESTILO SHOPIFY / HUEL (layout_4--shopify) Va aquí (custom.css) porque el módulo OPC carga su CSS desde la carpeta del módulo, no desde el override del theme; custom.css sí se carga en /checkout. Columna izquierda = flujo (contacto, dirección, envío, pago, pagar) Columna derecha = resumen del pedido sticky (solo lectura) ============================================================================ */ body#checkout #wrapper, body#checkout .content-wrapper { background: var(--weu-white); } /* El layout-both-columns deja content-wrapper en col-lg-6 con columnas laterales vacías; en checkout las ocultamos y usamos el ancho completo. */ body#checkout #left-column, body#checkout #right-column { display: none; } body#checkout #content-wrapper.wrapper__content { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Formulario de dirección — checkout nativo */ body#checkout .weu-checkout-address-fields { display: flex; flex-direction: column; gap: 12px; } body#checkout .weu-checkout-address-fields .weu-auth-field, body#checkout .weu-checkout-address-fields .weu-checkout-field { margin-bottom: 0; } body#checkout .weu-checkout-address-row { display: flex; flex-wrap: wrap; gap: 12px 16px; width: 100%; } body#checkout .weu-checkout-address-row .weu-checkout-field { flex: 1 1 calc(50% - 8px); min-width: 0; max-width: calc(50% - 8px); } body#checkout .weu-checkout-address-fields > .weu-checkout-field, body#checkout .weu-checkout-field--full { flex: 0 0 100%; max-width: 100%; } @media (max-width: 575.98px) { body#checkout .weu-checkout-address-row .weu-checkout-field { flex-basis: 100%; max-width: 100%; } } body#checkout .weu-auth-field__label.required::after { content: none; } body#checkout .weu-auth-field__label .weu-checkout-field__optional { font-size: inherit; font-weight: 500; color: rgba(29, 29, 29, 0.5); } body#checkout .weu-auth-field__control--textarea { align-items: stretch; flex-direction: column; padding: 12px; min-height: auto; } body#checkout .weu-auth-field__textarea { min-height: 72px; resize: vertical; padding: 0; line-height: 1.45; } body#checkout .weu-delivery-comment-field { margin-bottom: 0; } body#checkout .weu-delivery-comment__saved { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--weu-color-success); } body#checkout .weu-delivery-comment__saved[hidden] { display: none; } body#checkout .weu-delivery-comment__hint { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: rgba(29, 29, 29, 0.65); } body#checkout .weu-delivery-comment__hint-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--weu-color-dark); color: var(--weu-white); font-size: 11px; font-weight: 700; line-height: 1; flex-shrink: 0; } body#checkout .weu-delivery-comment__counter { margin-left: auto; font-variant-numeric: tabular-nums; color: rgba(29, 29, 29, 0.75); } body#checkout .weu-delivery-comment__counter.is-limit { color: var(--weu-color-primary); font-weight: 700; } /* Selector de direcciones / transporte — checkout nativo */ body#checkout .js-address-selector .weu-address-card, body#checkout .weu-delivery-option-card.weu-checkout-select-card { border: 1px solid var(--weu-border-color); border-radius: var(--weu-radius-default); background: var(--weu-white); box-shadow: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } body#checkout .js-address-selector .weu-address-card:hover, body#checkout .weu-delivery-option-card.weu-checkout-select-card:hover { border-color: #cbd5e1; } body#checkout .js-address-selector .weu-address-card.selected, body#checkout .weu-delivery-option-card.weu-checkout-select-card.selected { border: 2px solid var(--weu-color-primary); background: var(--weu-white); box-shadow: none; } body#checkout .js-address-selector .weu-address-card .card-body, body#checkout .weu-delivery-option-card.weu-checkout-select-card .card-body { padding: 1.25rem; } body#checkout .weu-address-card__select, body#checkout .weu-checkout-select-card__select { display: block; cursor: pointer; } body#checkout .weu-address-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; } body#checkout .weu-address-card__header-spacer { flex: 1 1 auto; min-width: 0; } body#checkout .weu-address-card__default-badge, body#checkout .weu-checkout-select-card__default-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 0; flex: 1 1 auto; min-width: 0; } body#checkout .js-address-selector .weu-address-card .address__alias, body#checkout .js-address-selector .weu-address-card__alias { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--weu-color-dark); } body#checkout .weu-address-card__radio { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; } body#checkout .weu-address-card__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } body#checkout .weu-address-card__radio-mark { display: block; width: 22px; height: 22px; border: 2px solid #cbd5e1; border-radius: 50%; background: var(--weu-white); transition: border-color 0.2s ease, box-shadow 0.2s ease; pointer-events: none; } body#checkout .weu-address-card__input:checked + .weu-address-card__radio-mark { border-color: var(--weu-color-primary); box-shadow: inset 0 0 0 4px var(--weu-white), inset 0 0 0 10px var(--weu-color-primary); } body#checkout .weu-address-card__input:focus-visible + .weu-address-card__radio-mark { outline: 2px solid var(--weu-color-primary); outline-offset: 2px; } body#checkout .weu-address-card__star, body#checkout .weu-checkout-select-card__star { flex-shrink: 0; width: 18px; height: 18px; background-color: var(--weu-color-primary); } body#checkout .weu-address-card__default-label, body#checkout .weu-checkout-select-card__default-label { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--weu-color-dark); } body#checkout .js-address-selector .weu-address-card__name { font-weight: 600; color: var(--weu-color-dark); } body#checkout .js-address-selector .weu-address-card address { font-style: normal; color: rgba(29, 29, 29, 0.75); line-height: 1.5; font-size: 14px; } body#checkout .js-address-selector .weu-address-card address.address__content--inline { line-height: 1.35; } body#checkout .js-address-selector .weu-address-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; padding-top: 0; } body#checkout .js-address-selector .weu-address-card__actions .weu-btn-interface { position: relative; z-index: 2; } /* Botón de interfaz — secundario pill reutilizable */ .weu-btn-interface { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--weu-color-grey); color: var(--weu-color-black); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .weu-btn-interface .tbc-heroicon { width: 14px; height: 14px; flex-shrink: 0; color: inherit; } .weu-gdpr-export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .weu-btn-interface:hover, .weu-btn-interface:focus-visible { background: var(--weu-color-grey-hover); color: var(--weu-color-black); text-decoration: none; } .weu-btn-interface:active { background: #dedede; } /* Variante a ancho completo (p. ej. Cancelar en formulario de dirección) */ .weu-btn-interface.weu-btn-interface--block { display: flex; width: 100%; min-height: 44px; padding: 12px 18px; border-radius: var(--weu-radius-default); font-size: 14px; letter-spacing: 0.02em; text-transform: none; } body#checkout .weu-checkout-cta-bar .cancel-address.weu-btn-interface { text-decoration: none; } /* CTA principal del checkout nativo */ body#checkout .form-footer { margin-top: 1.5rem; padding-top: 0; border: 0; } body#checkout .weu-checkout-cta-bar { display: flex; flex-direction: column; gap: 12px; width: 100%; } body#checkout .weu-checkout-cta-bar--split { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .weu-checkout-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--weu-radius-default); background: linear-gradient(135deg, var(--weu-color-primary) 0%, #c41816 100%); color: var(--weu-white); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 6px 18px rgba(234, 30, 28, 0.28); transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; } .weu-checkout-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.65s ease; pointer-events: none; z-index: 0; } .weu-checkout-cta:hover, .weu-checkout-cta:focus-visible, .weu-checkout-cta:active, .weu-checkout-cta.btn:active, .weu-checkout-cta.btn.btn-lg:active, a.weu-checkout-cta:active, button.weu-checkout-cta:active { color: var(--weu-white); text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(234, 30, 28, 0.36); filter: brightness(1.03); } .weu-checkout-cta:active, .weu-checkout-cta.btn:active, .weu-checkout-cta.btn.btn-lg:active, a.weu-checkout-cta:active, button.weu-checkout-cta:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(234, 30, 28, 0.24); filter: none; } .weu-checkout-cta:hover::before, .weu-checkout-cta:focus-visible::before { transform: translateX(120%); } .weu-checkout-cta:hover .weu-checkout-cta__label, .weu-checkout-cta:focus-visible .weu-checkout-cta__label, .weu-checkout-cta:active .weu-checkout-cta__label { color: var(--weu-white); } .weu-checkout-cta:hover .weu-checkout-cta__icon .tbc-heroicon, .weu-checkout-cta:focus-visible .weu-checkout-cta__icon .tbc-heroicon, .weu-checkout-cta:active .weu-checkout-cta__icon .tbc-heroicon { background-color: var(--weu-white); } .weu-checkout-cta.disabled, .weu-checkout-cta:disabled, .weu-checkout-cta.btn.disabled, .weu-checkout-cta.btn:disabled { opacity: 1; color: var(--weu-white); pointer-events: none; transform: none; filter: none; box-shadow: none; background: linear-gradient(135deg, rgba(234, 30, 28, 0.55) 0%, rgba(196, 24, 22, 0.55) 100%); } .weu-checkout-cta.disabled .weu-checkout-cta__label, .weu-checkout-cta:disabled .weu-checkout-cta__label { color: var(--weu-white); } .weu-checkout-cta.disabled .weu-checkout-cta__icon .tbc-heroicon, .weu-checkout-cta:disabled .weu-checkout-cta__icon .tbc-heroicon { background-color: var(--weu-white); } .weu-checkout-cta.disabled::before, .weu-checkout-cta:disabled::before { display: none; } .weu-checkout-cta__label, .weu-checkout-cta__icon { position: relative; z-index: 1; } .weu-checkout-cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); flex-shrink: 0; } .weu-checkout-cta__icon .tbc-heroicon { width: 16px; height: 16px; background-color: var(--weu-white); } /* Checkout nativo — split tipo Shopify (formulario blanco | resumen gris) Stepper: ver tbc-checkout.css */ body#checkout #wrapper .container > .row { align-items: stretch; } body#checkout .cart-grid-right .cart-summary, body#checkout .cart-grid-right #js-checkout-summary { border: 0; border-radius: 0; background: transparent !important; box-shadow: none; padding-left: 0; padding-right: 0; } body#checkout .cart-grid-right > hr { display: none; } body#checkout .weu-cart-summary-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--weu-spacing-md); padding-bottom: var(--weu-spacing-sm); border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-size: var(--weu-font-md, 16px); line-height: 1.35; color: var(--weu-color-black); } body#checkout .weu-cart-summary-heading__title { font-weight: 800; } body#checkout .weu-cart-summary-heading__count { font-weight: 400; color: var(--weu-color-black); } @media (min-width: 992px) { body#checkout #content-wrapper { padding-top: 0; padding-bottom: 0; } body#checkout #wrapper .container > .row { min-height: calc(100vh - 220px); } body#checkout .cart-grid-body { position: relative; background-color: var(--weu-white); padding-top: 16px; padding-bottom: 56px; padding-right: 48px; box-shadow: -100vmax 0 0 0 var(--weu-white); clip-path: inset(0 0 0 -100vmax); } body#checkout .cart-grid-right { position: relative; align-self: stretch; background-color: var(--weu-checkout-sidebar-bg); margin-top: 0; padding-top: 1.5rem; padding-bottom: 56px; padding-left: 48px; box-shadow: 100vmax 0 0 0 var(--weu-checkout-sidebar-bg); overflow-x: clip; } body#checkout .cart-grid-right > .weu-checkout-sidebar-sticky, body#checkout .cart-grid-right > .accordion, body#checkout .cart-grid-right > hr { position: relative; z-index: 1; } body#checkout .cart-grid-right .accordion-item { position: static; } body#checkout .cart-grid-right .weu-checkout-sidebar-sticky { position: sticky; top: var(--weu-checkout-sidebar-top, 145px); display: block; } body#checkout .weu-checkout-sidebar-sticky__head { flex-shrink: 0; padding-top: 8px; } body#checkout .weu-checkout-sidebar-sticky__head .weu-cart-summary-heading { margin-bottom: var(--weu-spacing-sm); } body#checkout .weu-checkout-sidebar-sticky__content { overflow: visible; } body#checkout .cart-grid-right #js-checkout-summary { position: static; max-height: none; overflow: visible; } body#checkout .cart-grid-right .cart-summary__product.row, body#checkout .cart-grid-right .cart-voucher__item.row { --bs-gutter-x: 12px; max-width: 100%; margin-left: calc(var(--bs-gutter-x) * -0.5); margin-right: calc(var(--bs-gutter-x) * -0.5); } body#checkout .cart-grid-right .cart-voucher__promo-form .d-flex { flex-wrap: wrap; gap: 8px; } body#checkout .cart-grid-right .cart-voucher__promo-form .form-control { flex: 1 1 140px; min-width: 0; width: auto; } body#checkout .cart-grid-right .cart-voucher__promo-form .btn { flex-shrink: 0; margin-left: 0 !important; } } @media (max-width: 991.98px) { body#checkout .cart-grid-right { background: var(--weu-checkout-sidebar-bg); margin-top: 0; margin-bottom: 8px; padding: 8px var(--weu-spacing-md); border-radius: 0; border-bottom: 1px solid var(--weu-border-color); } body#checkout.weu-checkout--ident-step .cart-grid-right { margin-top: 20px; margin-bottom: 0; border-bottom: 0; border-top: 1px solid var(--weu-border-color); padding-top: 16px; padding-bottom: 20px; } } #form_ets_onepagecheckout.layout_4--shopify { max-width: 1180px; margin: 0 auto; } @media (min-width: 992px) { #form_ets_onepagecheckout.layout_4--shopify .onepagecheckout-left__left { padding-right: 48px; border-right: 1px solid #ececec; } #form_ets_onepagecheckout.layout_4--shopify .onepagecheckout-left__right { padding-left: 48px; } } /* --- Secciones del flujo (izquierda) --- */ #form_ets_onepagecheckout.layout_4--shopify .onepagecheckout-left__left .block-onepagecheckout { border: 0; padding: 28px 0 4px; margin: 0; } #form_ets_onepagecheckout.layout_4--shopify .onepagecheckout-left__left .block-onepagecheckout.block-customer { padding-top: 8px; } #form_ets_onepagecheckout.layout_4--shopify .onepagecheckout-left__left .block-top { padding: 0; margin: 0; } #form_ets_onepagecheckout.layout_4--shopify .title-heading { border: 0; padding: 0 0 16px; margin: 0; font-size: 18px; font-weight: 700; color: var(--weu-color-dark); display: flex; align-items: center; gap: 8px; text-transform: none; } #form_ets_onepagecheckout.layout_4--shopify .title-heading .ets_icon_svg .tbc-heroicon { background-color: var(--weu-color-primary); width: 20px; height: 20px; } #form_ets_onepagecheckout.layout_4--shopify .title-heading:before { display: none !important; } /* --- Campos de formulario --- */ #form_ets_onepagecheckout.layout_4--shopify .form-control, #form_ets_onepagecheckout.layout_4--shopify input.form-control, #form_ets_onepagecheckout.layout_4--shopify .form-control-select, #form_ets_onepagecheckout.layout_4--shopify select.form-control { height: 46px; border: 1px solid #d4d4d4 !important; border-radius: var(--weu-radius-default); background-color: var(--weu-white) !important; font-size: 14px; padding: 0 14px; color: var(--weu-color-dark); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } #form_ets_onepagecheckout.layout_4--shopify textarea.form-control { height: auto; min-height: 90px; padding: 12px 14px; } #form_ets_onepagecheckout.layout_4--shopify .form-control:focus, #form_ets_onepagecheckout.layout_4--shopify input.form-control:focus, #form_ets_onepagecheckout.layout_4--shopify .form-control-select:focus, #form_ets_onepagecheckout.layout_4--shopify select.form-control:focus { border-color: var(--weu-color-primary) !important; box-shadow: var(--weu-focus-ring-shadow) !important; outline: none; } #form_ets_onepagecheckout.layout_4--shopify .form-control.is_required.error, #form_ets_onepagecheckout.layout_4--shopify .form-control.error { border-color: var(--weu-color-danger); } /* Etiquetas de campo arriba, ocupando ancho completo */ #form_ets_onepagecheckout.layout_4--shopify .js-address-form .form-group.row { display: block; margin: 0 0 14px; } #form_ets_onepagecheckout.layout_4--shopify .js-address-form .form-control-label { width: 100%; max-width: 100%; flex: none; text-align: left; padding: 0 0 6px; font-size: 13px; font-weight: 600; color: #555; } #form_ets_onepagecheckout.layout_4--shopify .js-address-form .opc_field_right { width: 100%; max-width: 100%; flex: none; padding: 0; } /* Grid de dos columnas para nombre/apellidos */ @media (min-width: 768px) { #form_ets_onepagecheckout.layout_4--shopify .js-address-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } #form_ets_onepagecheckout.layout_4--shopify .js-address-form > input[type="hidden"] { display: none; } #form_ets_onepagecheckout.layout_4--shopify .js-address-form .form-group.row { grid-column: 1 / -1; } #form_ets_onepagecheckout.layout_4--shopify .js-address-form .form-group.row.firstname, #form_ets_onepagecheckout.layout_4--shopify .js-address-form .form-group.row.lastname { grid-column: span 1; } } #form_ets_onepagecheckout.layout_4--shopify .ets_opc_select { position: relative; } #form_ets_onepagecheckout.layout_4--shopify .ets_opc_select_arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 14px; pointer-events: none; } #form_ets_onepagecheckout.layout_4--shopify .ets_opc_select_arrow svg { fill: #777; } /* --- Radio-cards: ENVÍO --- */ #form_ets_onepagecheckout.layout_4--shopify .delivery-options-list, #form_ets_onepagecheckout.layout_4--shopify .delivery-options-list .delivery-options { display: flex; flex-direction: column; gap: 10px; } #form_ets_onepagecheckout.layout_4--shopify .delivery-option { margin: 0; } #form_ets_onepagecheckout.layout_4--shopify .delivery-option .delivery-option-2 { display: block; margin: 0; padding: 14px 16px; border: 1px solid #d9d9d9; border-radius: var(--weu-radius-default); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } #form_ets_onepagecheckout.layout_4--shopify .delivery-option .delivery-option-2:hover { border-color: #b5b5b5; } #form_ets_onepagecheckout.layout_4--shopify .delivery-option:has(input[type="radio"]:checked) .delivery-option-2, #form_ets_onepagecheckout.layout_4--shopify .delivery-option.selected .delivery-option-2 { border-color: var(--weu-color-primary); background-color: var(--weu-color-primary-soft); box-shadow: inset 0 0 0 1px var(--weu-color-primary); } #form_ets_onepagecheckout.layout_4--shopify .delivery-option .carrier-name { font-weight: 600; color: var(--weu-color-dark); } #form_ets_onepagecheckout.layout_4--shopify .delivery-option .carrier-price { font-weight: 700; color: var(--weu-color-dark); } #form_ets_onepagecheckout.layout_4--shopify .delivery-option .carrier-delay { font-size: 12px; color: #777; } /* --- Radio-cards: PAGO --- */ #form_ets_onepagecheckout.layout_4--shopify .payment-options { display: flex; flex-direction: column; gap: 10px; } #form_ets_onepagecheckout.layout_4--shopify .payment-options > form:empty { display: none; } #form_ets_onepagecheckout.layout_4--shopify .payment-options .ets_payment_method { border: 1px solid #d9d9d9; border-radius: var(--weu-radius-default); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } #form_ets_onepagecheckout.layout_4--shopify .payment-options .ets_payment_method:has(input[type="radio"]:checked) { border-color: var(--weu-color-primary); box-shadow: inset 0 0 0 1px var(--weu-color-primary); } #form_ets_onepagecheckout.layout_4--shopify .payment-option { display: flex; align-items: center; padding: 14px 16px; margin: 0; cursor: pointer; } #form_ets_onepagecheckout.layout_4--shopify .payment-option label { margin: 0; cursor: pointer; font-weight: 600; color: var(--weu-color-dark); } #form_ets_onepagecheckout.layout_4--shopify .payment-option label img { vertical-align: middle; margin-left: 8px; } #form_ets_onepagecheckout.layout_4--shopify .ets_payment_method:has(input[type="radio"]:checked) .payment-option { background-color: var(--weu-color-primary-soft); } #form_ets_onepagecheckout.layout_4--shopify .js-additional-information, #form_ets_onepagecheckout.layout_4--shopify .js-payment-option-form { padding: 0 16px 14px; color: inherit !important; } /* --- Condiciones + botón Pagar --- */ #form_ets_onepagecheckout.layout_4--shopify .onepagecheckout-footer { padding: 24px 0 8px; } #form_ets_onepagecheckout.layout_4--shopify #conditions-to-approve { margin-bottom: 16px; } #form_ets_onepagecheckout.layout_4--shopify .checkout.card-block { display: flex; flex-direction: column; gap: 12px; padding: 0; box-shadow: none; border: 0; } #form_ets_onepagecheckout.layout_4--shopify .checkout.card-block .btn-primary { width: 100%; min-height: 52px; border-radius: var(--weu-radius-default); background: var(--weu-color-primary); border: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; transition: filter .15s ease, opacity .15s ease; } #form_ets_onepagecheckout.layout_4--shopify .checkout.card-block .btn-primary:hover:not([disabled]) { filter: brightness(.94); } #form_ets_onepagecheckout.layout_4--shopify .checkout.card-block .btn-primary[disabled] { opacity: .55; cursor: not-allowed; } #form_ets_onepagecheckout.layout_4--shopify .opc-continue-shopping { color: #555; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } #form_ets_onepagecheckout.layout_4--shopify .opc-continue-shopping:hover { color: var(--weu-color-primary); } #form_ets_onepagecheckout.layout_4--shopify .opc-continue-shopping .tbc-heroicon { width: 16px; height: 16px; background-color: currentColor; } /* --- Resumen del pedido (derecha, sticky) --- */ #form_ets_onepagecheckout.layout_4--shopify .opc-summary-sticky { margin-top: 8px; } @media (min-width: 992px) { #form_ets_onepagecheckout.layout_4--shopify .opc-summary-sticky { position: sticky; top: 24px; } } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse { background: var(--weu-color-grey-light); border: 1px solid #ececec; border-radius: 12px; padding: 20px; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .block-onepagecheckout { border: 0; padding: 0; margin: 0; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .block-shopping-cart > .title-heading { border: 0; padding: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--weu-color-dark); display: flex; align-items: center; gap: 8px; text-transform: none; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .block-shopping-cart > .title-heading:before { display: none !important; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-grid, #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .card, #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-container { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse #main { padding: 0; } /* Líneas de producto del resumen */ #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-grid { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e6e6e6; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-grid-left { position: relative; flex: 0 0 56px; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-grid-left .product-image img { width: 56px; height: 56px; object-fit: cover; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-grid-body { flex: 1; min-width: 0; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product_info_name .label { font-size: 14px; font-weight: 600; color: var(--weu-color-dark); text-decoration: none; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-info.attribute { font-size: 12px; color: #777; } /* Ocultar controles de cantidad/eliminar y precios duplicados en el resumen */ #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-grid .qty, #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-grid .ets_remove_cart, #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-unit-price { display: none; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .product-line-grid-right.product-line-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .form_total_price .product-price { font-size: 14px; font-weight: 700; color: var(--weu-color-dark); } /* Cupón de descuento inline */ #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .promo-code form { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 0; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .promo-code .ets_icon_scices { display: none; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .promo-code .promo-input { flex: 1; height: 44px; border: 1px solid #d4d4d4; border-radius: var(--weu-radius-default); padding: 0 12px; font-size: 14px; background: #fff; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .promo-code .promo-input:focus { border-color: var(--weu-color-primary); box-shadow: var(--weu-focus-ring-shadow); outline: none; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .promo-code .btn { height: 44px; border-radius: var(--weu-radius-default); background: #2b2b2b; border: 0; color: #fff; font-weight: 600; padding: 0 18px; white-space: nowrap; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .promo-code .btn:hover { filter: brightness(1.15); } /* Totales */ #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-summary-totals { padding: 14px 0 0; margin-top: 8px; border-top: 1px solid #e6e6e6; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-summary-line { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; color: #555; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-summary-line .value { color: var(--weu-color-dark); font-weight: 600; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-summary-line.cart-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid #e6e6e6; font-size: 18px; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-summary-line.cart-total .label, #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse .cart-summary-line.cart-total .value { font-weight: 800; color: var(--weu-color-dark); } /* Reaseguro / trust badges debajo del resumen */ #form_ets_onepagecheckout.layout_4--shopify .block-displayReassurance { margin-top: 16px; } /* --- Toggle del resumen en móvil --- */ .opc-summary-mobile-toggle { display: none; } @media (max-width: 991px) { #form_ets_onepagecheckout.layout_4--shopify, #form_ets_onepagecheckout.layout_4--shopify #ets_onepagecheckout { display: flex; flex-direction: column; } #form_ets_onepagecheckout.layout_4--shopify .onepagecheckout-left__right { order: -1; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-mobile-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 1px solid #ececec; border-radius: 12px; background: var(--weu-color-grey-light); font-weight: 700; color: var(--weu-color-dark); cursor: pointer; } .opc-summary-mobile-toggle__label { display: inline-flex; align-items: center; gap: 8px; } .opc-summary-mobile-toggle .tbc-heroicon { width: 18px; height: 18px; background-color: var(--weu-color-primary); } .opc-summary-mobile-toggle__chevron { transition: transform .2s ease; } .opc-summary-mobile-toggle[aria-expanded="true"] .opc-summary-mobile-toggle__chevron { transform: rotate(180deg); } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse { margin-top: 10px; display: none; } #form_ets_onepagecheckout.layout_4--shopify .opc-summary-collapse.is-open { display: block; } } /* ============================================================================ AVISOS DE STOCK — listado en Mi cuenta ============================================================================ */ .ps-emailalerts__product-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 1rem; padding: 0; } .mailalerts-account-line { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--weu-color-border); border-radius: 16px; background: var(--weu-white); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mailalerts-account-line:hover { border-color: rgba(234, 30, 28, 0.22); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08); } .mailalerts-account-line__media { flex: 0 0 72px; display: block; text-decoration: none; } .mailalerts-account-line__media img { display: block; width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--weu-color-grey); } .mailalerts-account-line__body { flex: 1 1 auto; min-width: 0; } .mailalerts-account-line__link { display: block; text-decoration: none; color: inherit; } .mailalerts-account-line__link:hover .mailalerts-account-line__name { color: var(--weu-color-primary); } .mailalerts-account-line__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--weu-color-dark); transition: color 0.2s ease; } .mailalerts-account-line__attributes { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--weu-color-neutral); text-transform: uppercase; letter-spacing: 0.02em; } .mailalerts-account-line__remove.remove-from-cart { position: static; flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background-color: var(--weu-color-primary-soft); color: var(--weu-color-primary); text-decoration: none; opacity: 1; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; z-index: 1; } .mailalerts-account-line__remove.remove-from-cart .tbc-heroicon { width: 18px; height: 18px; color: inherit; } .mailalerts-account-line__remove.remove-from-cart:hover, .mailalerts-account-line__remove.remove-from-cart:focus-visible { background-color: var(--weu-color-primary); color: var(--weu-white); text-decoration: none; transform: scale(1.04); } @media (max-width: 575.98px) { .mailalerts-account-line { align-items: flex-start; padding: 12px; } .mailalerts-account-line__media { flex-basis: 64px; } .mailalerts-account-line__media img { width: 64px; height: 64px; } } /* ============================================================================ DIRECCIONES — listado en Mi cuenta (mismo patrón que avisos de stock) ============================================================================ */ .page-addresses .addresses__list.weu-addresses-account-list, .page-addresses .addresses__list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 1rem; padding: 0; grid-template-columns: none; } .page-addresses .weu-address-account-line { margin: 0; } .page-addresses .weu-address-account-line, .weu-address-account-line { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--weu-color-border); border-radius: 16px; background: var(--weu-white); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .page-addresses .weu-address-account-line:hover, .weu-address-account-line:hover { border-color: rgba(234, 30, 28, 0.22); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08); } .weu-address-account-line__media { flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: var(--weu-color-grey); color: var(--weu-color-dark); } .weu-address-account-line__media .tbc-heroicon { width: 20px; height: 20px; background-color: var(--weu-color-primary); } .weu-address-account-line__body { flex: 1 1 auto; min-width: 0; } .weu-address-account-line__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--weu-color-dark); } .weu-address-account-line__content { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--weu-color-black); } .weu-address-account-line__content-inline { display: inline; color: inherit; } .weu-address-account-line__extra { margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--weu-color-neutral); } .weu-address-account-line__actions { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 8px; } .weu-address-account-line__action { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .weu-address-account-line__action .tbc-heroicon { width: 18px; height: 18px; } .weu-address-account-line__action--edit { background-color: var(--weu-color-grey); color: var(--weu-color-dark); } .weu-address-account-line__action--edit .tbc-heroicon { background-color: var(--weu-color-dark); } .weu-address-account-line__action--edit:hover, .weu-address-account-line__action--edit:focus-visible { background-color: var(--weu-color-grey-hover); transform: scale(1.04); } .weu-address-account-line__action--delete { background-color: var(--weu-color-primary-soft); color: var(--weu-color-primary); } .weu-address-account-line__action--delete .tbc-heroicon { background-color: var(--weu-color-primary); } .weu-address-account-line__action--delete:hover, .weu-address-account-line__action--delete:focus-visible { background-color: var(--weu-color-primary); color: var(--weu-white); transform: scale(1.04); } .weu-address-account-line__action--delete:hover .tbc-heroicon, .weu-address-account-line__action--delete:focus-visible .tbc-heroicon { background-color: var(--weu-white); } .page-addresses .weu-addresses-account-actions { margin-top: 4px; } .page-addresses .weu-addresses-add-btn .tbc-heroicon { background-color: var(--weu-color-black); } @media (max-width: 575.98px) { .weu-address-account-line { align-items: flex-start; padding: 12px; } .weu-address-account-line__media { flex-basis: 44px; width: 44px; height: 44px; } .weu-address-account-line__media .tbc-heroicon { width: 18px; height: 18px; } .weu-address-account-line__actions { flex-direction: row; align-self: flex-start; } } /* ============================================================ Compatibilidad Hummingbird 2.0 El markup del tema hijo (productlist.tpl) usa rejilla Bootstrap:
con miniaturas .col-*. HB 2.0 introduce en su theme.css `.products{display:grid}`, que choca con los .col-* y colapsa tarjetas/imagenes. Revertimos .products a flex/row. ============================================================ */ .products.row { display: flex; flex-wrap: wrap; margin-inline: 0; } #js-product-list .products, .featured-products .products, .product-accessories .products, .products-section .products { display: flex; flex-wrap: wrap; margin-inline: 0; } /* ============================================================ Compatibilidad Hummingbird 2.0 - TIPOGRAFIA HB 1.0.1 solo incluia Inter peso 400, asi que los textos que pedian peso 100/300 caian a 400 (se veian normales). HB 2.0 anade los pesos ligeros reales y el texto se ve mas fino que antes. Reasignamos los pesos 100 y 300 al fichero de peso 400 (Inter Regular) para recuperar el aspecto previo. Las negritas reales (600/700) se mantienen. ============================================================ */ @font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 300; src: url(../../../hummingbird/assets/fonts/inter-latin-400-normal-eca1e21531598d5db58f.woff2) format("woff2"), url(../../../hummingbird/assets/fonts/inter-latin-400-normal-2ea1079c0069eb040a52.woff) format("woff"); unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd; } @font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 300; src: url(../../../hummingbird/assets/fonts/inter-latin-ext-400-normal-210fb826cb25acbd4094.woff2) format("woff2"), url(../../../hummingbird/assets/fonts/inter-latin-ext-400-normal-c616205185f0d3677df9.woff) format("woff"); unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff; } @font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 100; src: url(../../../hummingbird/assets/fonts/inter-latin-400-normal-eca1e21531598d5db58f.woff2) format("woff2"), url(../../../hummingbird/assets/fonts/inter-latin-400-normal-2ea1079c0069eb040a52.woff) format("woff"); unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd; } @font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 100; src: url(../../../hummingbird/assets/fonts/inter-latin-ext-400-normal-210fb826cb25acbd4094.woff2) format("woff2"), url(../../../hummingbird/assets/fonts/inter-latin-ext-400-normal-c616205185f0d3677df9.woff) format("woff"); unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff; } /* Listados: grid fluido según ancho disponible (sidebar incluido) */ #js-product-list { container-type: inline-size; container-name: product-list; } #js-product-list .products.row { display: grid !important; width: 100%; margin-inline: 0; --weu-product-grid-gap: calc(var(--weu-spacing-sm) + var(--weu-spacing-xs) / 2); gap: var(--weu-product-grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } #js-product-list .products.row > .product-miniature, #js-product-list .products.row > [class*="col-"] { width: auto !important; max-width: none !important; flex: unset !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; } @container product-list (min-width: 560px) { #js-product-list .products.row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container product-list (min-width: 1020px) { #js-product-list .products.row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Fallback sin container queries */ @supports not (container-type: inline-size) { @media (min-width: 576px) { #js-product-list .products.row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1400px) { body.layout-full-width #js-product-list .products.row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .layout-left-column #js-product-list .products.row, .layout-right-column #js-product-list .products.row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } } @media (max-width: 575px) { #js-product-list .products.row { --weu-product-grid-gap: var(--weu-mobile-product-gap, 12px); gap: var(--weu-product-grid-gap); } } /* ========================================================================== ALERTAS / AVISOS INFORMATIVOS (estilo global Terrabike) ========================================================================== */ .alert { position: relative; border: 1px solid transparent; border-left-width: 4px; border-radius: var(--weu-alert-radius); padding: 14px 18px; margin-bottom: var(--weu-spacing-sm); font-size: var(--font-size-secondary); line-height: 1.5; color: var(--weu-color-dark); background-color: var(--weu-color-grey-light); box-shadow: none; } .alert-info, .alert-success, .alert-warning, .alert-danger { padding-left: 48px; } .alert > *:last-child, .alert p:last-child, .alert ul:last-child, .alert ol:last-child { margin-bottom: 0; } .alert a { color: inherit; font-weight: 600; text-decoration: underline; } /* Icono común (heroicon a través de mask, sin archivos extra) */ .alert-info::before, .alert-success::before, .alert-warning::before, .alert-danger::before { content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; flex: 0 0 auto; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .alert-info { background-color: var(--weu-alert-info-bg); border-color: var(--weu-alert-info-border); color: var(--weu-alert-info-text); } .alert-info::before { color: var(--weu-alert-info-accent); -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .alert-success { background-color: var(--weu-alert-success-bg); border-color: var(--weu-alert-success-border); color: var(--weu-alert-success-text); } .alert-success::before { color: var(--weu-alert-success-accent); -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .alert-warning { background-color: var(--weu-alert-warning-bg); border-color: var(--weu-alert-warning-border); color: var(--weu-alert-warning-text); } .alert-warning::before { color: var(--weu-alert-warning-accent); -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .alert-danger { background-color: var(--weu-alert-danger-bg); border-color: var(--weu-alert-danger-border); color: var(--weu-alert-danger-text); } .alert-danger::before { color: var(--weu-alert-danger-accent); -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* -------------------------------------------------------------------------- 404 — página no encontrada (misma línea que carrito vacío) -------------------------------------------------------------------------- */ body#pagenotfound #wrapper .container { max-width: 960px; } body#pagenotfound #content.weu-not-found { padding: 3rem 0 4rem; } .weu-not-found__card { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 1rem 0.5rem 2rem; background: transparent; border: 0; box-shadow: none; } .weu-not-found__visual { position: relative; width: 220px; height: 220px; margin: 0 auto 2rem; } .weu-not-found__orbit { position: absolute; inset: 0; border: 2px dashed rgba(234, 30, 28, 0.22); border-radius: 50%; animation: weu-cart-orbit-spin 14s linear infinite; } .weu-not-found__orbit--delay { inset: 20px; border-color: rgba(29, 29, 29, 0.12); animation-direction: reverse; animation-duration: 18s; } .weu-not-found__icon-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: weu-cart-empty-wobble 2.8s ease-in-out infinite; } .weu-not-found__icon { font-size: 72px; color: var(--weu-color-primary); line-height: 1; } .weu-not-found__badge { position: absolute; top: 24px; right: 16px; min-width: 64px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--weu-color-dark); color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 0.06em; line-height: 40px; animation: weu-cart-badge-pop 2.8s ease-in-out infinite; } .weu-not-found__spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--weu-color-primary); opacity: 0.55; } .weu-not-found__spark--1 { top: 16px; left: 22px; animation: weu-cart-spark-float 2.4s ease-in-out infinite; } .weu-not-found__spark--2 { top: 30px; right: 18px; animation: weu-cart-spark-float 2.8s ease-in-out 0.4s infinite; } .weu-not-found__spark--3 { bottom: 22px; left: 50%; margin-left: -4px; animation: weu-cart-spark-float 3.2s ease-in-out 0.8s infinite; } .weu-not-found__eyebrow { margin: 0 0 0.75rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--weu-color-primary); } .weu-not-found__title { margin: 0 0 1rem; max-width: 36rem; font-size: clamp(2.15rem, 5.5vw, 3.25rem); font-weight: 800; line-height: 1.1; color: var(--weu-color-dark); } .weu-not-found__text { margin: 0 0 0.85rem; max-width: 40rem; font-size: 1.05rem; line-height: 1.6; color: rgba(29, 29, 29, 0.72); } .weu-not-found__hint { margin: 0 0 2rem; max-width: 32rem; font-size: 1.05rem; font-style: italic; line-height: 1.45; color: rgba(29, 29, 29, 0.55); } .weu-not-found__actions { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 36rem; margin: 0 auto 1.75rem; } .weu-not-found__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; max-width: 100%; min-height: 48px; padding: 0.75rem 1.25rem; border-radius: var(--weu-radius-default); font-weight: 700; text-decoration: none; } .weu-not-found__actions .weu-checkout-cta { width: 100%; min-height: 48px; padding: 0.75rem 1.25rem; } .weu-not-found__cta .tbc-heroicon { width: 20px; height: 20px; } .weu-not-found__cta--primary { border: 0; color: #fff; } .weu-not-found__cta--primary .tbc-heroicon { color: #fff; } .weu-not-found__cta--secondary { border: 2px solid var(--weu-color-primary); background: #fff; color: var(--weu-color-primary); transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .weu-not-found__cta--secondary:hover, .weu-not-found__cta--secondary:focus { background: var(--weu-color-primary); color: #fff; transform: translateY(-1px); } .weu-not-found__cta--secondary:hover .tbc-heroicon, .weu-not-found__cta--secondary:focus .tbc-heroicon { color: #fff; } /* Doofinder: capa por encima del header (sin tocar el input ni el layout interno) */ .dfd-root { z-index: 10050 !important; } body:has(.dfd-root.dfd-animate) #header .weu-header-brand, body:has(.dfd-root.dfd-animate) #header .header-actions, body:has(.dfd-root.dfd-animate) #header .mobile_menu, body:has(.dfd-root.dfd-animate) #header .header-bottom__bottom { z-index: 1 !important; } #search_widget .search-widgets__dropdown { display: none !important; } .weu-not-found__shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem 1rem; margin: 0; padding: 0; list-style: none; } .weu-not-found__shortcut { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: rgba(29, 29, 29, 0.72); text-decoration: none; transition: color 0.2s ease; } .weu-not-found__shortcut .tbc-heroicon { width: 18px; height: 18px; color: var(--weu-color-primary); } .weu-not-found__shortcut:hover, .weu-not-found__shortcut:focus { color: var(--weu-color-dark); } @media (min-width: 576px) { .weu-not-found__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; max-width: 36rem; } .weu-not-found__actions .weu-not-found__cta, .weu-not-found__actions .weu-checkout-cta { flex: 0 0 auto; width: auto; min-width: 11rem; } } @media (prefers-reduced-motion: reduce) { .weu-not-found__orbit, .weu-not-found__icon-wrap, .weu-not-found__badge, .weu-not-found__spark { animation: none; } } /* ========================================================================== Error de pago (Redsys) — misma línea que 404 / carrito vacío ========================================================================== */ .weu-payment-error { display: flex; justify-content: center; padding: 2.5rem 1rem 3.5rem; } .weu-payment-error__card { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 28rem; } .weu-payment-error__icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 0 1.25rem; border-radius: 50%; background: var(--weu-color-primary-soft, rgba(234, 30, 28, 0.1)); color: var(--weu-color-primary); } .weu-payment-error__icon .tbc-heroicon { width: 32px; height: 32px; background-color: currentColor; } .weu-payment-error__eyebrow { margin: 0 0 0.5rem; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--weu-color-primary); } .weu-payment-error__title { margin: 0 0 0.75rem; font-size: clamp(1.35rem, 4vw, 1.75rem); font-weight: 800; line-height: 1.25; color: var(--weu-color-dark); text-transform: none; } /* Anula el estilo legacy de redsys.css (icono PNG + uppercase) */ .redsys_ko .weu-payment-error__title, .weu-payment-error .weu-payment-error__title { padding: 0; background: none !important; text-transform: none; color: var(--weu-color-dark); font-size: clamp(1.35rem, 4vw, 1.75rem); } .weu-payment-error__text { margin: 0 0 1.25rem; font-size: 15px; line-height: 1.5; color: rgba(29, 29, 29, 0.72); } .weu-payment-error__reason { width: 100%; margin: 0 0 1.5rem; padding: 12px 14px; border-radius: var(--weu-radius-default); background: rgba(29, 29, 29, 0.04); border: 1px solid var(--weu-color-border, #efefef); font-size: 13px; line-height: 1.4; color: rgba(29, 29, 29, 0.7); text-align: left; } .weu-payment-error__reason-label { font-weight: 700; color: var(--weu-color-dark); } .weu-payment-error__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 1.25rem; } .weu-payment-error__cta { text-decoration: none; } .weu-payment-error__secondary { text-transform: none; letter-spacing: 0.02em; font-size: 14px; min-height: 44px; } .weu-payment-error__help { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(29, 29, 29, 0.55); } .weu-payment-error__help a { color: var(--weu-color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .weu-payment-error__help a:hover, .weu-payment-error__help a:focus-visible { color: #c41816; } @media (min-width: 576px) { .weu-payment-error { padding: 3.5rem 1.5rem 4.5rem; } }