/* ============================================ ONPROTEC THEME — Phase 2 (mockup-fidelity) Loaded via ir.attachment + view #12848 in ============================================ */ :root { --op-orange: #F26A2E; --op-orange-dark: #D4541E; --op-orange-light: #FFF1EA; --op-text: #1F2937; --op-text-muted: #6B7280; --op-text-light: #9CA3AF; --op-green: #16A34A; --op-green-light: #DCFCE7; --op-amber: #D97706; --op-amber-light: #FEF3C7; --op-red: #DC2626; --op-bg: #F8F9FB; --op-surface: #FFFFFF; --op-border: #E5E7EB; --op-border-strong: #D1D5DB; --op-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --op-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --op-shadow-lg: 0 10px 30px rgba(0,0,0,0.10); } /* === Tipografía Inter en TODO el shop === */ body, .tp-product-item, .tp-product-content, .product_price, .o_wsale_products_main, .oe_website_sale { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; } #wrapwrap .oe_website_sale { background: var(--op-bg); } /* ============================================ GRID — 4 col desktop, 3 tablet, 2 móvil ============================================ */ .row.row-cols-2.row-cols-md-3.row-cols-lg-6 { row-gap: 1.5rem !important; } @media (min-width: 992px) { .row.row-cols-lg-6 { --bs-columns: 4 !important; } .row.row-cols-lg-6 > .col { flex: 0 0 auto !important; width: 25% !important; } } /* ============================================ TARJETA — wrapper, hover, padding ============================================ */ .tp-product-item .tp-product-wrapper { background: var(--op-surface) !important; border: 1px solid var(--op-border) !important; border-radius: 16px !important; overflow: hidden !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; display: flex !important; flex-direction: column !important; box-shadow: var(--op-shadow-sm) !important; position: relative !important; } .tp-product-item .tp-product-wrapper:hover { transform: translateY(-2px) !important; box-shadow: var(--op-shadow-md) !important; border-color: var(--op-border-strong) !important; } .tp-product-item form { background: transparent !important; height: 100% !important; } /* === Imagen contenedor === */ .tp-product-item .tp-product-top { background: #FFFFFF !important; padding: 12px !important; height: 240px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .tp-product-item .tp-product-image-container { height: 100% !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .tp-product-item .tp-product-image, .tp-product-item .tp-product-image-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 auto !important; } /* ============================================ CONTENIDO — alineación izquierda + padding 16px ============================================ */ .tp-product-item .tp-product-content { padding: 16px !important; text-align: left !important; background: var(--op-surface) !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } /* Marca arriba en gris/uppercase */ .tp-product-item .op-brand { font-size: 10px !important; font-weight: 700 !important; color: var(--op-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; margin: 0 !important; line-height: 1 !important; } /* Modelo debajo del titulo, monoespaciado discreto */ .tp-product-item .op-model { font-size: 13px !important; font-weight: 600 !important; color: var(--op-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; margin: 3px 0 5px 0 !important; line-height: 1.25 !important; word-break: break-all !important; } /* Cuando el JS coloca SKU al final, op-model se vuelve fila flex */ .tp-product-item .op-model.op-model-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; word-break: normal !important; } .tp-product-item .op-model-row .op-model-text { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .tp-product-item .op-model-row .op-sku { flex: 0 0 auto !important; margin-left: auto !important; text-align: right !important; white-space: nowrap !important; } /* Cuando el producto no tiene modelo y solo va el SKU, alinear a la derecha */ .tp-product-item .op-model-row.op-sku-only { justify-content: flex-end !important; margin: 3px 0 5px 0 !important; } /* Título: izquierda, 2 líneas, Title Case */ .tp-product-item .tp-product-title, .tp-product-item .tp-product-title h6, .tp-product-item h6.tp-product-title { margin: 0 !important; line-height: 1.35 !important; text-transform: none !important; } .tp-product-item .tp-product-title a, .tp-product-item .tp-product-title a.tp-link-dark, .tp-product-item h6 a { color: var(--op-text) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; text-align: left !important; text-transform: none !important; font-variant: normal !important; font-variant-caps: normal !important; font-feature-settings: normal !important; width: 100% !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; min-height: 2.7em !important; } .tp-product-item .tp-product-title a.tp-link-dark:hover { color: var(--op-orange) !important; } /* === BLOQUE PRECIO + STOCK === */ /* El theme envuelve precio y stock en un row d-flex justify-between. Reset. */ .tp-product-item .tp-product-content > div:not(.op-brand):not(.tp-product-title):not(.op-footer):not(.op-model-row) { margin: 0 !important; width: 100% !important; justify-content: flex-start !important; text-align: left !important; flex-direction: column !important; align-items: flex-start !important; } .tp-product-item .product_price { margin: 0 !important; width: 100% !important; text-align: left !important; border-top: 1px solid #e5e7eb !important; padding-top: 10px !important; margin-top: 8px !important; } .tp-product-item .product_price .h6.text-primary { color: var(--op-text) !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.15 !important; display: inline-block !important; margin: 0 0 4px 0 !important; letter-spacing: -0.01em !important; } .tp-product-item .product_price .h6.text-primary .oe_currency_value { font-size: 28px !important; font-weight: 800 !important; color: var(--op-text) !important; } /* Si Odoo añade un precio tachado real (list_price con pricelist), se ve así */ .tp-product-item .product_price del, .tp-product-item .product_price .text-decoration-line-through { color: var(--op-text-light) !important; font-size: 13px !important; font-weight: 400 !important; margin-left: 6px !important; } /* Pildorita "+ IVA" al lado del precio (todos los productos llevan IVA 16%) */ .tp-product-item .product_price .op-iva-badge { display: inline-block !important; margin-left: 8px !important; padding: 2px 8px !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--op-text-muted, #6b7280) !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; border-radius: 999px !important; vertical-align: middle !important; letter-spacing: 0.02em !important; white-space: nowrap !important; cursor: help !important; position: relative !important; top: -2px !important; } /* Bloque de Stock + SKU */ .tp-product-item .oe_item_qty_available { font-size: 13px !important; color: var(--op-text-muted) !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; text-align: left !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .tp-product-item .oe_item_qty_available br { display: none !important; } /* Estado del stock — generado por JS como .op-stock-state */ .tp-product-item .op-stock-state { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-weight: 500 !important; font-size: 13px !important; line-height: 1.3 !important; } .tp-product-item .op-stock-state::before { content: '' !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; flex-shrink: 0 !important; } /* Disponible (verde) */ .tp-product-item .op-stock-ok { color: var(--op-green) !important; } .tp-product-item .op-stock-ok::before { background: var(--op-green) !important; } /* Stock bajo (ámbar) */ .tp-product-item .op-stock-low { color: var(--op-amber) !important; } .tp-product-item .op-stock-low::before { background: var(--op-amber) !important; } /* Sin stock (gris) */ .tp-product-item .op-stock-out { color: var(--op-text-light) !important; } .tp-product-item .op-stock-out::before { background: var(--op-text-light) !important; } /* SKU — mismo tamaño que el modelo, color más tenue */ .tp-product-item .op-sku { color: var(--op-text-light) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; } /* ============================================ BADGES — estado de stock se muestra inline en el texto, no como badge flotante. Solo descuento queda como badge. ============================================ */ .tp-product-item .op-badge-low, .tp-product-item .op-badge-out { display: none !important; } .tp-product-item .op-badge-discount { position: absolute !important; top: 12px !important; left: 12px !important; padding: 4px 10px !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; z-index: 5 !important; line-height: 1 !important; background: var(--op-green-light) !important; color: var(--op-green) !important; } /* ============================================ WISHLIST (siempre visible) + QUICK VIEW (solo en hover) Flotando sobre la imagen sin reducir su ancho ============================================ */ .tp-product-item .tp-action-buttons { position: absolute !important; top: 12px !important; right: 12px !important; bottom: auto !important; left: auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important; opacity: 1 !important; transform: none !important; transition: none !important; z-index: 4 !important; pointer-events: none !important; } .tp-product-item .tp-action-buttons > * { pointer-events: auto !important; } /* Wishlist (corazón) — ELIMINADO */ .tp-product-item .o_add_wishlist, .tp-product-item [data-action="o_wishlist"], .tp-product-item .tp-action-buttons { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Quickview (ojo) — eliminado por completo */ .tp-product-item .tp-product-quick-view-action, .tp-product-item a[class*="quick-view"], .tp-product-item [class*="quick-view"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Ocultar el toggler chevron de móvil en desktop */ .tp-product-item .tp-action-buttons-toggler { display: none !important; } /* ============================================ BOTÓN AGREGAR + SELECTOR CANTIDAD Reposicionar a estar dentro del .tp-product-content (abajo) ============================================ */ /* Resetear el botón flotante sobre la imagen */ .tp-product-item .tp-add-to-cart-btn.o_wsale_product_btn { position: static !important; display: block !important; padding: 0 !important; margin: 8px 0 0 0 !important; background: transparent !important; opacity: 1 !important; transform: none !important; transition: none !important; width: 100% !important; } .tp-product-item .tp-add-to-cart-btn .btn.btn-primary { background: var(--op-orange) !important; border-color: var(--op-orange) !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 13px !important; padding: 9px 14px !important; border-radius: 10px !important; width: 100% !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-transform: none !important; letter-spacing: 0 !important; height: auto !important; min-height: 38px !important; } .tp-product-item .tp-add-to-cart-btn .btn.btn-primary:hover { background: var(--op-orange-dark) !important; border-color: var(--op-orange-dark) !important; } .tp-product-item .tp-add-to-cart-btn .btn.btn-primary i { font-size: 14px !important; line-height: 1 !important; } /* Footer (qty + button row) — JS construye este wrapper */ .tp-product-item .op-footer { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 10px !important; width: 100% !important; } .tp-product-item .op-qty { display: inline-flex !important; align-items: center !important; background: var(--op-surface) !important; border: 1px solid var(--op-border) !important; border-radius: 10px !important; overflow: hidden !important; height: 38px !important; flex-shrink: 0 !important; } .tp-product-item .op-qty button { background: transparent !important; border: 0 !important; width: 28px !important; height: 100% !important; color: var(--op-text-muted) !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .tp-product-item .op-qty button:hover { color: var(--op-orange) !important; } .tp-product-item .op-qty input { width: 28px !important; height: 100% !important; border: 0 !important; text-align: center !important; font-size: 13px !important; font-weight: 600 !important; color: var(--op-text) !important; background: transparent !important; padding: 0 !important; -moz-appearance: textfield !important; } .tp-product-item .op-qty input::-webkit-outer-spin-button, .tp-product-item .op-qty input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Cuando hay op-footer, el botón ocupa el espacio restante */ .tp-product-item .op-footer .tp-add-to-cart-btn { flex: 1 !important; margin: 0 !important; } /* ============================================ MÓVIL — ajustes ============================================ */ @media (max-width: 991px) { .tp-product-item .tp-product-top { height: 180px !important; padding: 12px !important; } .tp-product-item .tp-product-content { padding: 12px !important; } .tp-product-item .tp-product-title a.tp-link-dark { font-size: 13px !important; } .tp-product-item .product_price .h6.text-primary { font-size: 20px !important; } .tp-product-item .product_price .h6.text-primary .oe_currency_value { font-size: 20px !important; } .tp-product-item .op-qty { height: 34px !important; } .tp-product-item .op-qty button, .tp-product-item .op-qty input { width: 24px !important; } } /* ============================================ Toggle de vista (Grid/List) AHORA ACTIVO (estilizado en bloque TOOLBAR TIENDA más abajo) ============================================ */ /* El pager no debe heredar reglas que oculten */ .op-pager .page-item .page-link { display: block !important; } /* ============================================ ONPROTEC · FICHA INDIVIDUAL (op-pf-*) Mismo lenguaje visual que las tarjetas Prefijo op-pf- exclusivo (no colisiona con shop) ============================================ */ .op-pf-breadcrumb { padding: 14px 20px; font-size: 13px; color: #6b7280; } .op-pf-breadcrumb a { color: #6b7280; text-decoration: none; } .op-pf-breadcrumb a:hover { color: #f97316; } .op-pf-breadcrumb span { margin: 0 6px; color: #d1d5db; } .op-pf-breadcrumb .op-pf-current { color: #111827; font-weight: 500; } /* Layout principal */ .op-pf-page { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 24px 20px 40px !important; max-width: 1280px !important; } .op-pf-page > .op-pf-gallery { grid-column: 1; grid-row: 1; min-width: 0; } .op-pf-page > .op-pf-info { grid-column: 2; grid-row: 1; min-width: 0; } /* Ocultar contenedores nativos del tema cuando es ficha piloto activa */ .op-pf-pilot-active .tp-product-details-tab, .op-pf-pilot-active #tp-product-description-tab, .op-pf-pilot-active .tp-hook-product-details-tab, .op-pf-pilot-active .o_wsale_product_btn_back_to_top, .op-pf-pilot-active section#product_detail, .op-pf-pilot-active div#oe_structure_website_sale_product_1, .op-pf-pilot-active div#oe_structure_website_sale_product_2, .op-pf-pilot-active div#product_full_description { display: none !important; } /* ============ GALERÍA ============ */ .op-pf-gallery .op-pf-main { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; aspect-ratio: 1/1; overflow: hidden; } .op-pf-gallery .carousel-inner, .op-pf-gallery .carousel-item { height: 100%; } .op-pf-gallery .carousel-item { display: none; align-items: center; justify-content: center; } .op-pf-gallery .carousel-item.active { display: flex; } .op-pf-product-img { max-width: 85% !important; max-height: 85% !important; width: auto !important; height: auto !important; object-fit: contain; } .op-pf-brand-overlay { position: absolute; top: 16px; left: 16px; background: #fff; padding: 6px 10px; border-radius: 6px; border: 1px solid #e5e7eb; max-width: 110px; max-height: 40px; z-index: 5; } .op-pf-brand-overlay img { max-width: 100%; max-height: 28px; object-fit: contain; } .op-pf-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e7eb; background: rgba(255,255,255,0.95); font-size: 22px; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,0.06); z-index: 5; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; } .op-pf-prev { left: 12px; } .op-pf-next { right: 12px; } .op-pf-arrow:hover { background: #f97316; color: #fff; border-color: #f97316; } .op-pf-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .op-pf-thumb { width: 80px; height: 80px; background: #fff; border: 2px solid #e5e7eb; border-radius: 6px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s; } .op-pf-thumb img { max-width: 80%; max-height: 80%; object-fit: contain; } .op-pf-thumb.active, .op-pf-thumb:hover { border-color: #f97316; } /* ============ INFO ============ */ .op-pf-info { display: flex; flex-direction: column; gap: 14px; } .op-pf-brand-tag { display: inline-block; align-self: flex-start; background: #f3f4f6; color: #4b5563; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } .op-pf-title { font-size: 19px !important; font-weight: 600 !important; line-height: 1.35 !important; margin: 0 !important; color: #111827 !important; text-transform: none !important; font-variant: normal !important; font-variant-caps: normal !important; font-feature-settings: normal !important; letter-spacing: -0.005em !important; } /* ============================================================ HEADER · OPCIÓN B · Solo iconos (estilo Stripe / Linear) Reemplazo CSS-only del bloque .tp-account-info - Carrito y Lista de deseos: solo icono cuadrado con badge - Divisor sutil - Cuenta: avatar circular + nombre + chevron ============================================================ */ /* Compactar el row contenedor */ .tp-account-info { gap: 2px !important; align-items: center !important; } .tp-account-info .col-auto.my-1 { margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* CARRITO y LISTA: cuadrados solo con icono */ .tp-account-info .col-auto:nth-child(1) > .d-flex, .tp-account-info .col-auto:nth-child(2) > .d-flex { position: relative; width: 52px; height: 52px; border-radius: 11px; align-items: center; justify-content: center; transition: background 0.15s ease; cursor: pointer; } .tp-account-info .col-auto:nth-child(1) > .d-flex:hover, .tp-account-info .col-auto:nth-child(2) > .d-flex:hover { background: #f3f4f6; } /* Ocultar todo el bloque de texto en carrito/lista */ .tp-account-info .col-auto:nth-child(1) .flex-grow-1.ms-3, .tp-account-info .col-auto:nth-child(2) .flex-grow-1.ms-3 { display: none !important; } /* Iconos (carrito y lista): más grandes y visibles */ .tp-account-info .col-auto:nth-child(1) .dri.tp-light-bg.rounded-circle, .tp-account-info .col-auto:nth-child(2) .dri.tp-light-bg.rounded-circle { width: 48px !important; height: 48px !important; font-size: 26px !important; line-height: 48px !important; background: transparent !important; color: #4b5563 !important; border-radius: 11px !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .tp-account-info .col-auto:nth-child(1) > .d-flex:hover .dri, .tp-account-info .col-auto:nth-child(2) > .d-flex:hover .dri { color: #111827 !important; } /* Badges numéricos: visibles en la esquina superior derecha */ .tp-account-info sup.my_cart_quantity, .tp-account-info sup.my_wish_quantity { top: 5px !important; right: 5px !important; min-width: 21px !important; height: 21px !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 6px !important; border: 2px solid #fff !important; border-radius: 999px !important; line-height: 17px !important; background-color: #f97316 !important; color: #fff !important; } /* DIVISOR sutil entre lista y cuenta */ .tp-account-info .col-auto:nth-child(2) { position: relative; } .tp-account-info .col-auto:nth-child(2)::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 32px; background: #e5e7eb; } .tp-account-info .col-auto:nth-child(3) { margin-left: 12px !important; } /* CUENTA: pill horizontal con avatar + nombre + chevron */ .tp-account-info .col-auto:nth-child(3) > .d-flex { position: relative; padding: 6px 14px 6px 6px; border-radius: 999px; transition: background 0.15s ease; cursor: pointer; } .tp-account-info .col-auto:nth-child(3) > .d-flex:hover { background: #f3f4f6; } /* Avatar circular naranja */ .tp-account-info .col-auto:nth-child(3) .dri.dri-user.tp-light-bg.rounded-circle { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff !important; width: 38px !important; height: 38px !important; font-size: 16px !important; line-height: 38px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Texto del nombre */ .tp-account-info .col-auto:nth-child(3) .flex-grow-1.ms-3 { margin-left: 8px !important; line-height: 1 !important; } .tp-account-info .col-auto:nth-child(3) .flex-grow-1.ms-3 > a > h6.mb-0, .tp-account-info .col-auto:nth-child(3) .flex-grow-1.ms-3 > a:has(h6.mb-0) { display: none !important; } .tp-account-info .col-auto:nth-child(3) .flex-grow-1.ms-3 > .mb-1 { margin-bottom: 0 !important; font-size: 15px !important; font-weight: 500 !important; color: #374151 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1 !important; white-space: nowrap !important; max-width: 130px !important; } .tp-account-info .col-auto:nth-child(3) > .d-flex:hover .flex-grow-1.ms-3 > .mb-1 { color: #111827 !important; } /* Chevron al final del chip de cuenta */ .tp-account-info .col-auto:nth-child(3) > .d-flex::after { content: '\f078'; font-family: 'FontAwesome'; font-size: 11px; color: #9ca3af; margin-left: 10px; align-self: center; } /* Hacer todo el chip clickeable */ .tp-account-info .col-auto > .d-flex .flex-shrink-0 { position: static !important; } .tp-account-info .col-auto > .d-flex .flex-shrink-0 > a, .tp-account-info .col-auto > .d-flex .flex-shrink-0 > div > a { position: static !important; } .tp-account-info .col-auto > .d-flex .flex-shrink-0 > a::after, .tp-account-info .col-auto > .d-flex .flex-shrink-0 > div > a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* Móvil */ @media (max-width: 1199px) { .tp-account-info .col-auto:nth-child(3) .flex-grow-1.ms-3 { display: none !important; } .tp-account-info .col-auto:nth-child(3) > .d-flex { padding: 4px; } .tp-account-info .col-auto:nth-child(3) > .d-flex::after { display: none; } } /* ============================================================ MENÚ PRINCIPAL · Pill naranja activo (Opción 4 naranja) - Texto sentence case (sin uppercase del tema) - Item activo: pill naranja con texto blanco - Hover: chip blanco con sombra sutil - Respiro vertical alrededor de la barra ============================================================ */ /* Respiro vertical alrededor del menú (barra blanca) */ header.o_header_standard nav.navbar { padding-top: 10px !important; padding-bottom: 10px !important; } @media (max-width: 991px) { header.o_header_standard nav.navbar { padding-top: 6px !important; padding-bottom: 6px !important; } } ul#top_menu { gap: 2px !important; align-items: center !important; } ul#top_menu .nav-item { margin: 0 !important; } ul#top_menu .nav-link { padding: 10px 18px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 500 !important; color: #4b5563 !important; text-transform: none !important; letter-spacing: -0.005em !important; line-height: 1.2 !important; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important; background: transparent !important; border: 0 !important; } ul#top_menu .nav-link span { text-transform: none !important; letter-spacing: inherit !important; } ul#top_menu .nav-link:hover { background: #fff !important; color: #111827 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; } ul#top_menu .nav-link.active, ul#top_menu .nav-item.active > .nav-link { background: #E17726 !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; } ul#top_menu .nav-link.active:hover, ul#top_menu .nav-item.active > .nav-link:hover { background: #d56a1e !important; color: #fff !important; box-shadow: none !important; } /* ============================================================ GRID DE PRODUCTOS · 5 columnas en desktop (era 6) ============================================================ */ @media (min-width: 992px) { #products_grid > .o_not_editable > .row.row-cols-lg-6, #products_grid .row.row-cols-lg-6 { --bs-gutter-x: 1.25rem !important; } #products_grid > .o_not_editable > .row.row-cols-lg-6 > .col, #products_grid .row.row-cols-lg-6 > .col { flex: 0 0 auto !important; width: 20% !important; max-width: 20% !important; } } /* ============================================================ TOOLBAR TIENDA · Filtros + Título + Ordenar + Vista Mismo lenguaje del header: radius 10px, naranja #E17726 ============================================================ */ .tp-shop-topbar { padding-top: 18px !important; padding-bottom: 18px !important; margin-bottom: 8px !important; } /* Botón "Mostrar Filtros" — pill naranja sólido */ .tp-shop-topbar a.tp-open-filter-sidebar.btn, a.tp-open-filter-sidebar.btn-primary-soft { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 16px !important; border-radius: 10px !important; background: #E17726 !important; background-color: #E17726 !important; color: #fff !important; font-size: 13.5px !important; font-weight: 600 !important; text-decoration: none !important; border: 0 !important; box-shadow: none !important; transition: background 0.15s ease !important; line-height: 1 !important; } .tp-shop-topbar a.tp-open-filter-sidebar.btn:hover { background: #d56a1e !important; background-color: #d56a1e !important; color: #fff !important; } /* Reset del span interno con bg/padding propio */ .tp-shop-topbar a.tp-open-filter-sidebar .text-bg-primary { background: transparent !important; background-color: transparent !important; color: #fff !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; } .tp-shop-topbar a.tp-open-filter-sidebar .text-bg-primary i { font-size: 13px !important; color: #fff !important; } .tp-shop-topbar a.tp-open-filter-sidebar strong { padding: 0 !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1 !important; } /* Título + contador ("Todos los productos - 2 352 items") */ .tp-shop-topbar .col-auto > .d-flex.align-items-lg-center > .d-flex { align-items: baseline !important; gap: 8px !important; color: var(--bs-body-color, #6b7280) !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; font-variant: normal !important; font-variant-caps: normal !important; } .tp-shop-topbar h6.mb-0 { font-size: 14px !important; font-weight: 600 !important; color: #0f1115 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; font-variant: normal !important; font-variant-caps: normal !important; } /* Dropdown "Ordenar por" — pill blanco con borde */ .tp-shop-topbar .o_sortby_dropdown.dropdown { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; transition: border-color 0.15s ease !important; margin-left: 0 !important; } .tp-shop-topbar .o_sortby_dropdown.dropdown:hover { border-color: #d1d5db !important; } .tp-shop-topbar .o_sortby_dropdown > span.h6 { font-size: 12px !important; color: #6b7280 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; font-variant: normal !important; font-variant-caps: normal !important; } .tp-shop-topbar .o_sortby_dropdown > a.dropdown-toggle { padding: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; color: #0f1115 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; background: transparent !important; border: 0 !important; line-height: 1 !important; } .tp-shop-topbar .o_sortby_dropdown > a.dropdown-toggle::after { border: 0 !important; content: '\f078' !important; font-family: 'FontAwesome' !important; font-size: 10px !important; color: #9ca3af !important; margin-left: 6px !important; vertical-align: middle !important; } .tp-shop-topbar .o_sortby_dropdown .dropdown-menu { border: 1px solid #e5e7eb !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; padding: 6px !important; margin-top: 6px !important; min-width: 220px !important; } .tp-shop-topbar .o_sortby_dropdown .dropdown-menu .dropdown-item { padding: 8px 12px !important; border-radius: 7px !important; font-size: 13.5px !important; color: #374151 !important; } .tp-shop-topbar .o_sortby_dropdown .dropdown-menu .dropdown-item:hover { background: #fff4ec !important; color: #E17726 !important; } /* Botones grid / lista — grupo con borde, activo en naranja claro */ .tp-shop-topbar .btn-group[aria-label="View"] { border: 1px solid #e5e7eb !important; border-radius: 10px !important; overflow: hidden !important; background: #fff !important; margin-left: 12px !important; } .tp-shop-topbar .btn-group[aria-label="View"] > a.btn { width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #6b7280 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; transition: background 0.15s ease, color 0.15s ease !important; } .tp-shop-topbar .btn-group[aria-label="View"] > a.btn + a.btn { border-left: 1px solid #e5e7eb !important; } .tp-shop-topbar .btn-group[aria-label="View"] > a.btn:hover { background: #f9fafb !important; color: #0f1115 !important; } .tp-shop-topbar .btn-group[aria-label="View"] > a.btn.active, .tp-shop-topbar .btn-group[aria-label="View"] > a.btn.active.text-primary { background: #fff4ec !important; color: #E17726 !important; } .tp-shop-topbar .btn-group[aria-label="View"] > a.btn i { font-size: 14px !important; } /* Espaciado de la columna derecha */ .tp-shop-topbar .d-flex.flex-wrap.justify-content-end { gap: 12px !important; align-items: center !important; } .tp-shop-topbar .o_sortby_dropdown.dropdown.ms-3 { margin-left: 0 !important; } /* Forzar visibilidad del grupo grid/lista (algunos temas lo ocultan) */ .tp-shop-topbar .btn-group[aria-label="View"] { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; } /* ============================================================ BARRA DE BÚSQUEDA · Igualar radios izq/der Input lado izq tenía 32px (pill) vs botón con 7px (casi recto) Solución: ambos a 10px para que sean coherentes con el header ============================================================ */ .o_searchbar_form .search-query.oe_search_box, .o_searchbar_form input.search-query { border-radius: 10px 0 0 10px !important; } .o_searchbar_form .oe_search_button, .o_searchbar_form button.oe_search_button { border-radius: 0 10px 10px 0 !important; } /* Botón Descargar ficha técnica */ .op-pf-datasheet { display: flex !important; align-items: center !important; gap: 14px !important; background: #1f2937 !important; color: #f9fafb !important; border-radius: 10px !important; padding: 14px 16px !important; margin-top: 14px !important; text-decoration: none !important; transition: background 0.18s ease, transform 0.18s ease !important; border: 1px solid #374151 !important; } .op-pf-datasheet:hover { background: #111827 !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-1px) !important; } .op-pf-datasheet-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; background: rgba(220, 38, 38, 0.15) !important; color: #ef4444 !important; font-size: 20px !important; flex-shrink: 0 !important; } .op-pf-datasheet-text { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; line-height: 1.25 !important; } .op-pf-datasheet-title { font-size: 14px !important; font-weight: 600 !important; color: #f9fafb !important; } .op-pf-datasheet-sub { font-size: 11px !important; font-weight: 600 !important; color: #9ca3af !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; margin-top: 2px !important; } .op-pf-datasheet-dl { color: #9ca3af !important; font-size: 16px !important; flex-shrink: 0 !important; transition: color 0.18s ease !important; } .op-pf-datasheet:hover .op-pf-datasheet-dl { color: #f9fafb !important; } .op-pf-datasheet-extra { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 8px !important; padding-left: 4px !important; } .op-pf-datasheet-extra-link { font-size: 13px !important; color: #6b7280 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .op-pf-datasheet-extra-link:hover { color: #f97316 !important; text-decoration: underline !important; } /* Asegura que los textos naturales del piloto NO heredan small-caps del tema */ .op-pf-pilot-active .op-pf-title, .op-pf-pilot-active .op-pf-current, .op-pf-pilot-active .op-pf-breadcrumb, .op-pf-pilot-active .op-pf-card-body h6, .op-pf-pilot-active .op-pf-card-body h6 a { font-variant: normal !important; font-variant-caps: normal !important; font-feature-settings: normal !important; text-transform: none !important; } .op-pf-meta { display: flex; justify-content: space-between; align-items: center; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; color: #4b5563; padding: 8px 0; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; } .op-pf-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; } .op-pf-stars { color: #fbbf24; font-size: 16px; letter-spacing: 1px; } .op-pf-reviews-link { color: #6b7280; text-decoration: none; } .op-pf-reviews-link:hover { color: #f97316; } /* Bloque precio */ .op-pf-price-block { background: #fff7ed; padding: 16px 18px; border-radius: 10px; border: 1px solid #fed7aa; } .op-pf-price-row { display: flex; align-items: baseline; gap: 10px; } .op-pf-price { font-size: 36px; font-weight: 800; color: #ea580c; line-height: 1; } .op-pf-iva-badge { background: #fff; color: #ea580c; border: 1px solid #fed7aa; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .op-pf-price-tax { font-size: 12px; color: #6b7280; margin-top: 6px; } /* Stock chip */ .op-pf-stock-row { display: flex; } .op-pf-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; } .op-pf-stock-ok { background: #dcfce7; color: #16a34a; } .op-pf-stock-low { background: #fef3c7; color: #d97706; } .op-pf-stock-out { background: #fee2e2; color: #dc2626; } /* Action row */ .op-pf-cart-form { margin: 0 !important; } .op-pf-action-row { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; } .op-pf-qty { display: inline-flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; } .op-pf-qty-btn { border: 0; background: #fff !important; width: 38px; height: 46px; font-size: 18px; color: #4b5563 !important; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none !important; line-height: 1; } .op-pf-qty-btn:hover { background: #f3f4f6 !important; color: #f97316 !important; } .op-pf-qty-input { width: 50px !important; height: 46px !important; border: 0 !important; border-left: 1px solid #e5e7eb !important; border-right: 1px solid #e5e7eb !important; border-radius: 0 !important; text-align: center; font-size: 15px !important; font-weight: 600 !important; color: #111827 !important; outline: none; padding: 0 !important; -moz-appearance: textfield; } .op-pf-qty-input::-webkit-outer-spin-button, .op-pf-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .op-pf-btn-add { flex: 1; background: #f97316 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 0 22px !important; font-size: 15px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px; height: 46px !important; transition: background 0.15s; text-decoration: none !important; } .op-pf-btn-add:hover { background: #ea580c !important; } .op-pf-btn-add i { font-size: 17px; } .op-pf-btn-wish { width: 46px; height: 46px; border: 1px solid #e5e7eb !important; background: #fff !important; border-radius: 10px !important; font-size: 18px; color: #4b5563 !important; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; } .op-pf-btn-wish:hover { border-color: #dc2626 !important; color: #dc2626 !important; } .op-pf-btn-wish.o_added i.fa-heart-o::before { content: "\f004"; /* solid heart */ color: #dc2626; } /* Trust banner */ .op-pf-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; padding: 14px; background: #f9fafb; border-radius: 10px; border: 1px solid #e5e7eb; } .op-pf-trust-item { display: flex; gap: 10px; align-items: center; font-size: 12px; color: #4b5563; line-height: 1.35; } .op-pf-trust-item b { color: #111827; font-size: 13px; font-weight: 600; } .op-pf-trust-icon { font-size: 22px; flex-shrink: 0; color: #f97316; } /* Compartir */ .op-pf-share { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6b7280; padding-top: 4px; } .op-pf-share a { width: 32px; height: 32px; border: 1px solid #e5e7eb; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; font-size: 13px; color: #4b5563; text-decoration: none; } .op-pf-share a:hover { background: #f97316; color: #fff; border-color: #f97316; } /* ============ TABS ============ */ .op-pf-tabs-section { padding: 0 20px 32px !important; max-width: 1280px !important; } .op-pf-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; } .op-pf-tab { background: transparent !important; border: 0 !important; padding: 14px 22px !important; font-size: 14px !important; font-weight: 600 !important; color: #4b5563 !important; border-bottom: 3px solid transparent !important; margin-bottom: -2px; transition: all 0.15s; cursor: pointer; } .op-pf-tab:hover { color: #111827 !important; } .op-pf-tab.active { color: #f97316 !important; border-bottom-color: #f97316 !important; } .op-pf-tab-panel { padding: 24px 4px; font-size: 14px; color: #4b5563; line-height: 1.7; } .op-pf-tab-panel h2, .op-pf-tab-panel h3 { font-size: 17px; font-weight: 700; color: #111827; margin: 0 0 12px; } .op-pf-tab-panel img { max-width: 100%; height: auto; } .op-pf-specs { width: 100%; border-collapse: collapse; } .op-pf-specs th, .op-pf-specs td { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; text-align: left; font-size: 13.5px; } .op-pf-specs th { background: #f9fafb; color: #111827; font-weight: 600; width: 30%; } /* ============ RELATED ============ */ .op-pf-related { padding: 24px 20px 48px !important; border-top: 1px solid #e5e7eb; max-width: 1280px !important; } .op-pf-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .op-pf-section-head h2 { font-size: 20px !important; font-weight: 700 !important; margin: 0 !important; color: #111827 !important; } .op-pf-see-all { font-size: 13px; font-weight: 600; color: #f97316; text-decoration: none; } .op-pf-see-all:hover { color: #ea580c; } .op-pf-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .op-pf-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s, border-color 0.15s; } .op-pf-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #d1d5db; } .op-pf-card-top { background: #fff; aspect-ratio: 1/1; padding: 16px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f9fafb; text-decoration: none; } .op-pf-card-top img { max-width: 80%; max-height: 80%; object-fit: contain; } .op-pf-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .op-pf-card-brand { font-size: 10px; font-weight: 700; color: #6b7280; letter-spacing: 0.06em; } .op-pf-card-body h6 { font-size: 13.5px !important; font-weight: 600 !important; margin: 0 !important; line-height: 1.4 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; } .op-pf-card-body h6 a { color: #111827 !important; text-decoration: none !important; } .op-pf-card-body .op-pf-meta { font-size: 11px; padding: 6px 0; font-weight: 600; } .op-pf-card-sep { height: 1px; background: #e5e7eb; margin: 2px 0; } .op-pf-price-sm { font-size: 20px; font-weight: 800; color: #ea580c; } .op-pf-card .op-pf-iva-badge { font-size: 10px; padding: 2px 6px; } .op-pf-card .op-pf-stock { font-size: 11px; padding: 4px 8px; align-self: flex-start; } /* ============ RESPONSIVE ============ */ @media (max-width: 960px) { .op-pf-page { grid-template-columns: 1fr !important; gap: 24px !important; } .op-pf-related-grid { grid-template-columns: repeat(2, 1fr) !important; } .op-pf-title { font-size: 17px !important; } .op-pf-price { font-size: 28px !important; } .op-pf-trust { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .op-pf-related-grid { grid-template-columns: 1fr !important; } .op-pf-action-row { flex-wrap: wrap; } .op-pf-btn-add { flex: 1 1 calc(100% - 60px); } } /* Defensa contra interceptaciones del tema en la nueva ficha */ .op-pf-gallery .op-pf-main, .op-pf-gallery .carousel-item, #op-pf-carousel, #op-pf-carousel .carousel-item { position: relative !important; top: auto !important; min-height: 0 !important; } .op-pf-gallery .op-pf-main { position: relative !important; }