/* * HURIK PRODUCT PAGE * CSS migrado desde product.tpl al . * El contenido y las reglas visuales se conservan; cambia solo el lugar de carga. */ :root { --hurik-product-ink: #171512; --hurik-product-muted: #6f6a63; --hurik-product-line: #ded6ca; --hurik-product-soft: #f2eee7; --hurik-product-surface: #fbf9f5; --hurik-product-gold: #c9a96e; --hurik-product-radius: 16px; --hurik-header-offset: 82px; --hurik-product-media-ratio: 4 / 3; --hurik-mobile-action-height: 82px; } body#product #wrapper { padding-top: 0 !important; background: var(--hurik-product-surface); } /* * Una sola guía horizontal para HURIK: * header, ficha, categoría y productos similares. * Es la misma lógica visual usada por el index. */ body#product .hurik-header-inner, body#product #wrapper > .container { width: 96% !important; max-width: 1440px !important; margin-inline: auto !important; padding: 0 !important; box-sizing: border-box !important; } /* * El breadcrumb clásico de PrestaShop ya no forma parte * de la ficha. La navegación visible queda centrada en la subcategoría. */ body#product .breadcrumb, body#product #wrapper > .container > .breadcrumb, body#product #wrapper .breadcrumb { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body#product #wrapper > .container > .row { margin: 0 !important; } body#product #content-wrapper, body#product #content, body#product #main { width: 100%; min-width: 0; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body#product .hurik-product-container { width: 100%; max-width: none; margin: 0; padding: 8px 0 110px; } body#product .hurik-product-category-row { min-height: 30px; display: flex; align-items: center; margin: 0 0 8px; padding: 0; } body#product .hurik-product-category-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--hurik-product-muted); font-size: .78rem; line-height: 1.2; font-weight: 750; text-decoration: none; } body#product .hurik-product-category-link svg { width: 14px; height: 14px; flex: 0 0 14px; } body#product .hurik-product-focus-layout { display: block; min-width: 0; } body#product .hurik-product-form { margin: 0; min-width: 0; } body#product .hurik-product-main { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); align-items: start; gap: clamp(28px, 3vw, 52px); width: 100%; min-width: 0; } body#product .hurik-product-column-a, body#product .hurik-product-info { width: 100%; min-width: 0; } /* ----------------------------------------------------- Navegación flotante entre fichas de producto ----------------------------------------------------- */ body#product .hurik-edge-product-nav { position: fixed; top: 50%; z-index: 2147482860; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 64px; padding: 0; border: 1px solid rgba(23,21,18,.14); background: rgba(255,255,255,.82); color: var(--hurik-product-ink); box-shadow: 0 8px 24px rgba(23,21,18,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; cursor: pointer; opacity: .34; transform: translateY(-50%); transition: opacity .18s ease, background .18s ease, border-color .18s ease, transform .14s ease; } body#product .hurik-edge-product-nav--prev { left: 0; border-left: 0; border-radius: 0 10px 10px 0; } body#product .hurik-edge-product-nav--next { right: 0; border-right: 0; border-radius: 10px 0 0 10px; } body#product .hurik-edge-product-nav svg { width: 17px; height: 17px; pointer-events: none; } body#product .hurik-edge-product-nav.is-disabled { opacity: .10; pointer-events: none; cursor: default; } @media (hover:hover) and (pointer:fine) { body#product .hurik-edge-product-nav:not(.is-disabled) { opacity: .16; } body#product .hurik-edge-product-nav:not(.is-disabled):hover, body#product .hurik-edge-product-nav:not(.is-disabled):focus-visible { opacity: 1; background: #fff; border-color: var(--hurik-product-gold); outline: none; } body#product .hurik-edge-product-nav:not(.is-disabled):active { transform: translateY(-50%) scale(.95); } } @media (max-width: 768px) { body#product .hurik-edge-product-nav { top: 46%; width: 34px; height: 54px; opacity: .72; background: rgba(255,255,255,.88); box-shadow: 0 7px 20px rgba(23,21,18,.10); } body#product .hurik-edge-product-nav svg { width: 16px; height: 16px; } body#product .hurik-edge-product-nav.is-disabled { opacity: .12; } } /* ----------------------------------------------------- Galería 4:3 ----------------------------------------------------- */ body#product .hurik-gallery { width: 100%; min-width: 0; } body#product .hurik-gallery-nav { position: absolute; top: 50%; z-index: 11; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 64px; padding: 0; border: 1px solid rgba(23, 21, 18, .18); border-radius: 7px; background: rgba(255,255,255,.96); color: var(--hurik-product-ink); box-shadow: 0 7px 20px rgba(23,21,18,.10); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%); cursor: pointer; transition: opacity .16s ease, visibility .16s ease, background .18s ease, border-color .18s ease, transform .14s ease; } body#product .hurik-gallery-nav--prev { left: 10px; } body#product .hurik-gallery-nav--next { right: 10px; } body#product .hurik-gallery-nav svg { width: 16px; height: 16px; pointer-events: none; } body#product .hurik-gallery-nav.is-pointer-near:not(.is-hidden), body#product .hurik-gallery-nav:focus-visible:not(.is-hidden) { opacity: 1; visibility: visible; pointer-events: auto; } body#product .hurik-gallery-nav.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } @media (hover:hover) and (pointer:fine) { body#product .hurik-gallery-nav:hover, body#product .hurik-gallery-nav:focus-visible { background: var(--hurik-product-gold); border-color: var(--hurik-product-gold); color: var(--hurik-product-ink); outline: none; } } body#product .hurik-gallery-nav:active { background: var(--hurik-product-gold); border-color: var(--hurik-product-gold); transform: translateY(-50%) scale(.94); } body#product .hurik-main-image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--hurik-product-radius); background: #ebe7e0; isolation: isolate; } body#product .hurik-gallery-viewport { width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } body#product .hurik-gallery-viewport::-webkit-scrollbar { display: none; } body#product .hurik-gallery-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; } body#product .hurik-gallery-track { display: flex; flex-flow: row nowrap; width: 100%; height: 100%; } body#product .hurik-gallery-slide { flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; scroll-snap-align: center; overflow: hidden; } body#product .hurik-gallery-image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; cursor: grab; } body#product .hurik-gallery-viewport.is-dragging .hurik-gallery-image { cursor: grabbing; } body#product .hurik-main-image-wrap::after, body#product .hurik-zoom-stage::after, body#product .hurik-zoom-thumb::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(-125%) skewX(-18deg); background: linear-gradient( 105deg, transparent 38%, rgba(255,255,255,.43) 50%, transparent 62% ); transition: opacity .45s ease, transform .82s cubic-bezier(.25,.46,.45,.94); } @media (hover:hover) and (pointer:fine) { body#product .hurik-main-image-wrap:hover::after, body#product .hurik-zoom-stage:hover::after, body#product .hurik-zoom-thumb:hover::after { opacity: 1; transform: translateX(125%) skewX(-18deg); } } body#product .hurik-gallery-thumbnails-shell { position: relative; width: 100%; margin-top: 10px; min-width: 0; } body#product .hurik-gallery-thumbnails { display: flex; align-items: stretch; gap: 9px; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; overscroll-behavior-x: contain; } body#product .hurik-gallery-thumbnails::-webkit-scrollbar { display: none; } body#product .hurik-gallery-thumb { position: relative; flex: 0 0 74px; width: 74px; height: 58px; min-width: 74px; padding: 0; overflow: hidden; border: 1px solid #d8d0c5; border-radius: 9px; background: #fff; color: var(--hurik-product-ink); cursor: pointer; scroll-snap-align: start; opacity: .78; transition: border-color .16s ease, opacity .16s ease, box-shadow .16s ease, transform .16s ease; } body#product .hurik-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } body#product .hurik-gallery-thumb.is-active { opacity: 1; border-color: var(--hurik-product-ink); box-shadow: 0 0 0 1px var(--hurik-product-ink); } body#product .hurik-gallery-thumb--virtual { flex-basis: 104px; width: 104px; min-width: 104px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; background: #f3efe8; font-size: .68rem; font-weight: 790; line-height: 1.1; text-align: center; } body#product .hurik-gallery-thumb--virtual svg { width: 17px; height: 17px; flex: 0 0 17px; pointer-events: none; } @media (hover:hover) and (pointer:fine) { body#product .hurik-gallery-thumb:hover { opacity: 1; border-color: #9f968a; transform: translateY(-1px); } } /* ----------------------------------------------------- Última posición de galería: Realidad Aumentada ----------------------------------------------------- */ body#product .hurik-gallery-slide--ar { position: relative; background: #f4f0e9; color: #171512; } body#product .hurik-ar-gallery-card { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 18% 18%, rgba(201,169,110,.30), transparent 28%), radial-gradient(circle at 82% 76%, rgba(85,112,128,.16), transparent 32%), linear-gradient(145deg, #fbfaf7 0%, #eee8de 100%); } body#product .hurik-ar-gallery-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(23,21,18,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(23,21,18,.055) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%); } body#product .hurik-ar-gallery-card::after { content: ''; position: absolute; width: min(46vw, 420px); aspect-ratio: 1; left: 50%; top: 48%; z-index: 0; border: 1px solid rgba(23,21,18,.08); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 34px rgba(255,255,255,.18), 0 0 0 70px rgba(23,21,18,.025); pointer-events: none; } body#product .hurik-ar-gallery-intro { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: clamp(22px, 5vw, 52px); text-align: center; cursor: default; } body#product .hurik-ar-gallery-intro[hidden], body#product .hurik-ar-gallery-live[hidden] { display: none !important; } body#product .hurik-ar-gallery-mark { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 2px; border: 1px solid rgba(23,21,18,.13); border-radius: 18px; background: rgba(255,255,255,.72); color: #171512; box-shadow: 0 12px 34px rgba(50,42,32,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body#product .hurik-ar-gallery-mark svg { width: 31px; height: 31px; } body#product .hurik-ar-gallery-title { max-width: 650px; margin: 0; color: #171512; font-size: clamp(1.55rem, 3.2vw, 2.55rem); font-weight: 900; line-height: 1.02; letter-spacing: -.038em; text-wrap: balance; } body#product .hurik-ar-gallery-copy { max-width: 540px; margin: 0; color: #5f5a53; font-size: clamp(.9rem, 1.35vw, 1.05rem); line-height: 1.45; } body#product .hurik-ar-gallery-activate, body#product .hurik-ar-gallery-start { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 11px 24px; border: 1px solid #171512; border-radius: 999px; background: #171512; color: #fff; font: inherit; font-size: .82rem; font-weight: 870; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 28px rgba(23,21,18,.16); transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; } body#product .hurik-ar-gallery-activate:hover, body#product .hurik-ar-gallery-start:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(23,21,18,.20); } body#product .hurik-ar-gallery-activate:disabled { opacity: .58; cursor: wait; transform: none; } body#product .hurik-ar-gallery-permission { max-width: 470px; margin: -1px 0 0; color: #716a61; font-size: .75rem; line-height: 1.4; } body#product .hurik-ar-gallery-privacy { display: inline-flex; align-items: center; gap: 9px; max-width: 520px; margin-top: 2px; padding: 9px 12px; border: 1px solid rgba(23,21,18,.10); border-radius: 12px; background: rgba(255,255,255,.72); color: #39352f; font-size: .74rem; font-weight: 700; line-height: 1.35; text-align: left; box-shadow: 0 8px 24px rgba(50,42,32,.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body#product .hurik-ar-gallery-privacy svg { width: 20px; height: 20px; flex: 0 0 20px; color: #2f6a4d; } body#product .hurik-ar-gallery-copyright { max-width: 540px; margin: 0; color: #8b8379; font-size: .63rem; line-height: 1.35; } body#product .hurik-ar-gallery-status { min-height: 1.2em; margin: 0; color: #3a3732; font-size: .76rem; font-weight: 650; } body#product .hurik-ar-gallery-status.is-error { color: #a52f27; } body#product .hurik-ar-gallery-live { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; background: #050505; } body#product .hurik-ar-gallery-video { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; background: #050505; transform: scaleX(-1); } body#product .hurik-ar-gallery-start { position: absolute; left: 50%; bottom: clamp(22px, 5%, 38px); z-index: 5; transform: translateX(-50%); min-width: min(230px, calc(100% - 40px)); border-color: rgba(255,255,255,.96); background: rgba(255,255,255,.96); color: #171512; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body#product .hurik-ar-gallery-start:hover { transform: translateX(-50%) translateY(-1px); } body#product .hurik-gallery.is-ar-preview-live .hurik-gallery-nav, body#product .hurik-gallery.is-ar-preview-live .hurik-gallery-thumbnails-shell { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body#product .hurik-gallery.is-ar-slide-active .hurik-main-image-wrap::after, body#product .hurik-gallery.is-ar-preview-live .hurik-main-image-wrap::after { display: none !important; } @media (max-width: 768px) { body#product .hurik-ar-gallery-intro { gap: 9px; padding: 18px; } body#product .hurik-ar-gallery-mark { width: 50px; height: 50px; border-radius: 15px; } body#product .hurik-ar-gallery-mark svg { width: 27px; height: 27px; } body#product .hurik-ar-gallery-title { font-size: clamp(1.28rem, 7.2vw, 1.9rem); } body#product .hurik-ar-gallery-copy { max-width: 330px; font-size: .85rem; } body#product .hurik-ar-gallery-privacy { max-width: 330px; padding: 8px 10px; font-size: .69rem; } body#product .hurik-ar-gallery-copyright { max-width: 330px; font-size: .58rem; } body#product .hurik-ar-gallery-activate, body#product .hurik-ar-gallery-start { min-height: 48px; font-size: .76rem; } } @media (prefers-reduced-motion: reduce) { body#product .hurik-ar-gallery-activate, body#product .hurik-ar-gallery-start { transition: none; } } /* ----------------------------------------------------- Acciones de compra en la columna de decisión ----------------------------------------------------- */ body#product .hurik-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; margin: 18px 0 0; align-self: flex-start; } body#product .hurik-btn-tryon, body#product .hurik-btn-cart, body#product .hurik-btn-buy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 50px; padding: 10px 14px; border: 1px solid var(--hurik-product-ink); border-radius: 12px; font-family: inherit; font-size: .8rem; font-weight: 780; line-height: 1.15; text-align: center; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .14s ease, box-shadow .18s ease; } body#product .hurik-btn-tryon { grid-column: 1 / -1; justify-self: start; width: auto; min-height: 44px; padding: 9px 15px; border-color: #d8d0c5; border-radius: 999px; background: #f3efe8; color: var(--hurik-product-ink); box-shadow: none; } body#product .hurik-btn-buy { background: var(--hurik-product-ink); color: #fff; } body#product .hurik-btn-cart { background: #fff; color: var(--hurik-product-ink); } body#product .hurik-btn-tryon svg, body#product .hurik-btn-cart svg { width: 18px; height: 18px; flex: 0 0 18px; } @media (hover:hover) and (pointer:fine) { body#product .hurik-btn-tryon:hover { background: #ece5db; border-color: #bfb5a7; color: var(--hurik-product-ink); } body#product .hurik-btn-cart:hover, body#product .hurik-btn-buy:hover { background: var(--hurik-product-gold); border-color: var(--hurik-product-gold); color: var(--hurik-product-ink); } } body#product .hurik-btn-tryon:active, body#product .hurik-btn-cart:active, body#product .hurik-btn-buy:active { transform: scale(.985); } body#product .hurik-btn-cart:disabled, body#product .hurik-btn-buy:disabled, body#product .hurik-btn-cart[aria-disabled="true"], body#product .hurik-btn-buy[aria-disabled="true"] { opacity: .58; cursor: not-allowed; box-shadow: none; transform: none; } body#product .hurik-btn-tryon.is-active, body#product .hurik-btn-cart.is-active, body#product .hurik-btn-buy.is-active, body#product .hurik-btn-tryon[aria-pressed="true"], body#product .hurik-btn-cart[aria-pressed="true"], body#product .hurik-btn-buy[aria-pressed="true"] { background: var(--hurik-product-gold); border-color: var(--hurik-product-gold); color: var(--hurik-product-ink); transform: none; } /* ----------------------------------------------------- Columna B ----------------------------------------------------- */ body#product .hurik-product-info { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; } body#product .hurik-product-title { margin: 0 0 10px; color: var(--hurik-product-ink); font-size: clamp(1.8rem, 2.5vw, 2.35rem); line-height: 1.08; font-weight: 860; letter-spacing: -.035em; } body#product .hurik-product-summary { margin: 0 0 18px; color: #77716a; font-size: .98rem; line-height: 1.48; } body#product .hurik-product-summary p { margin: 0; } body#product .hurik-price-row { display: flex; align-items: baseline; gap: 12px; margin: 0 0 28px; } body#product .hurik-price-negotiated { color: var(--hurik-product-ink); font-size: clamp(2.45rem, 4.5vw, 3.35rem); line-height: 1; font-weight: 920; letter-spacing: -.05em; } body#product .hurik-price-row .old { color: #99928a; font-size: 1rem; text-decoration: line-through; } body#product .hurik-options-title { margin: 0 0 10px; color: var(--hurik-product-ink); font-size: .96rem; font-weight: 840; } body#product .hurik-choice-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, max-content)); justify-content: start; align-items: start; gap: 9px; width: 100%; margin: 0; padding: 0; } body#product .hurik-choice-attributes { display: contents; } body#product .hurik-choice-column { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; width: max-content; min-width: 132px; max-width: 240px; padding: 10px; border: 1px solid var(--hurik-product-line); border-radius: 12px; background: #fff; } body#product .hurik-choice-title { margin: 0; color: var(--hurik-product-muted); font-size: .72rem; line-height: 1.2; font-weight: 760; } body#product .hurik-choice-options { display: flex; flex-flow: row wrap; align-items: center; gap: 6px; width: auto; } body#product .hurik-choice-option { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; width: auto; padding: 7px 9px; border: 1px solid #ddd6cc; border-radius: 9px; background: #fff; color: var(--hurik-product-ink); font-size: .77rem; font-weight: 670; line-height: 1; white-space: nowrap; cursor: pointer; } body#product .hurik-choice-option input { position: absolute; opacity: 0; pointer-events: none; } body#product .hurik-choice-option:has(input:checked) { border-color: var(--hurik-product-ink); background: var(--hurik-product-ink); color: #fff; } body#product .hurik-choice-check { display: none; } body#product .hurik-choice-option:has(input:checked) .hurik-choice-check { display: inline; } body#product .hurik-choice-swatch { width: 17px; height: 17px; border: 1px solid rgba(0,0,0,.15); border-radius: 50%; } body#product .hurik-choice-quantity { width: 132px; min-width: 132px; max-width: 132px; } body#product .hurik-quantity-control { display: grid; grid-template-columns: 36px 44px 36px; width: 116px; overflow: hidden; border: 1px solid #ddd6cc; border-radius: 9px; background: #fff; } body#product .hurik-quantity-control button, body#product .hurik-quantity-control input { width: 100%; height: 36px; min-width: 0; margin: 0; padding: 0; border: 0; background: #fff; color: var(--hurik-product-ink); text-align: center; font: inherit; font-weight: 720; } body#product .hurik-quantity-control button { cursor: pointer; } body#product .hurik-quantity-control input { appearance: textfield; } body#product .hurik-quantity-control input::-webkit-inner-spin-button, body#product .hurik-quantity-control input::-webkit-outer-spin-button { appearance: none; margin: 0; } /* ----------------------------------------------------- Descripción / Especificaciones como pestañas reales ----------------------------------------------------- */ body#product .hurik-product-tabs { width: 100%; margin: 22px 0 0; } body#product .hurik-product-tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; border-bottom: 1px solid var(--hurik-product-line); } body#product .hurik-product-tab { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; width: 100%; margin: 0 0 -1px; padding: 10px 14px; border: 1px solid var(--hurik-product-line); border-bottom-color: var(--hurik-product-line); border-radius: 10px 10px 0 0; background: #fff; color: var(--hurik-product-muted); font-size: .82rem; line-height: 1.2; font-weight: 790; text-align: center; text-transform: none; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; } body#product .hurik-product-tab + .hurik-product-tab { margin-left: -1px; } body#product .hurik-product-tab::after { content: none; } body#product .hurik-product-tab.is-active, body#product .hurik-product-tab[aria-selected="true"] { z-index: 1; background: var(--hurik-product-soft); color: var(--hurik-product-ink); border-color: var(--hurik-product-line); border-bottom-color: var(--hurik-product-soft); } body#product .hurik-product-tab:focus-visible { z-index: 2; outline: 2px solid var(--hurik-product-ink); outline-offset: -2px; } body#product .hurik-product-tab-panel { width: 100%; margin: 0; padding: 16px 14px 14px; border: 1px solid var(--hurik-product-line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--hurik-product-soft); color: #4e4943; line-height: 1.58; } body#product .hurik-product-tab-panel[hidden] { display: none; } body#product .hurik-product-spec-table { width: 100%; border-collapse: collapse; background: transparent; } body#product .hurik-product-spec-table th, body#product .hurik-product-spec-table td { padding: 9px 6px; border-bottom: 1px solid #ded6ca; text-align: left; vertical-align: top; font-size: .84rem; } body#product .hurik-product-spec-table tr:last-child th, body#product .hurik-product-spec-table tr:last-child td { border-bottom: 0; } body#product .hurik-product-spec-table th { width: 34%; color: var(--hurik-product-muted); font-weight: 660; } /* ----------------------------------------------------- Información extensa en flujo vertical ----------------------------------------------------- */ body#product .hurik-product-details-sections { width: 100%; margin: clamp(30px, 4vw, 54px) 0 0; border-top: 1px solid var(--hurik-product-line); } body#product .hurik-product-detail-section { padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--hurik-product-line); } body#product .hurik-product-detail-section h2 { margin: 0 0 16px; color: var(--hurik-product-ink); font-size: clamp(1.08rem, 1.45vw, 1.32rem); line-height: 1.2; font-weight: 820; } body#product .hurik-product-detail-content { max-width: 980px; color: var(--hurik-product-ink); font-size: .96rem; line-height: 1.68; } body#product .hurik-product-detail-section .hurik-product-spec-table { max-width: 980px; } /* ----------------------------------------------------- Aviso de opciones de entrega: oculto por defecto. ----------------------------------------------------- */ body#product .hurik-delivery-alert-overlay { position: fixed; inset: 0; /* Debe quedar por encima de Pago Seguro, Probador Virtual y navegación. */ z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15,15,15,.38); opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity .18s ease, visibility .18s ease; } body#product .hurik-delivery-alert-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } body#product .hurik-delivery-alert-box { position: relative; width: min(390px, calc(100vw - 30px)); padding: 20px; border: 1px solid var(--hurik-product-ink); border-radius: 18px; background: var(--hurik-product-ink); color: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.30); transform: translateY(12px) scale(.985); transition: transform .2s ease; } body#product .hurik-delivery-alert-overlay.active .hurik-delivery-alert-box { transform: translateY(0) scale(1); } body#product .hurik-delivery-alert-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; color: #fff; font-size: 1rem; font-weight: 790; line-height: 1.2; } body#product .hurik-delivery-alert-title svg { width: 20px; height: 20px; flex: 0 0 20px; } body#product .hurik-delivery-alert-close { position: absolute; top: 8px; right: 10px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.55rem; line-height: 1; cursor: pointer; } body#product .hurik-delivery-alert-close:hover, body#product .hurik-delivery-alert-close:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.75); outline-offset: 1px; } body#product .hurik-delivery-alert-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body#product .hurik-delivery-alert-option { min-height: 58px; padding: 10px; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; background: var(--hurik-product-ink); color: #fff; font-size: .9rem; font-weight: 750; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .14s ease; } @media (hover:hover) and (pointer:fine) { body#product .hurik-delivery-alert-option:hover, body#product .hurik-delivery-alert-option:focus-visible { background: #fff; border-color: #fff; color: var(--hurik-product-ink); outline: none; } } body#product .hurik-delivery-alert-option:active, body#product .hurik-delivery-alert-option.is-active { background: var(--hurik-product-gold); border-color: var(--hurik-product-gold); color: var(--hurik-product-ink); transform: scale(.98); } /* ----------------------------------------------------- Pago Seguro: coordinación de visibilidad del panel lateral. El atributo hidden sigue siendo la fuente de verdad al cerrar; este bloque no mantiene abierto un panel que el módulo haya cerrado. ----------------------------------------------------- */ body#product.hurik-delivery-choice-open .hurik-delivery-alert-overlay.active { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body#product.hurik-external-flow-open [data-hkpay-overlay]:not([hidden]), body#product.hurik-external-flow-open [data-hkpay-overlay][data-hurik-force-visible="1"] { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body#product.hurik-external-flow-open [data-hkpay-overlay]:not([hidden]) .hkpay-modal, body#product.hurik-external-flow-open [data-hkpay-overlay][data-hurik-force-visible="1"] .hkpay-modal { visibility: visible !important; opacity: 1 !important; } /* ----------------------------------------------------- Visor ampliado: en escritorio la fotografía completa se ajusta sin recorte; las flechas anterior/siguiente aparecen sólo por proximidad del mouse. En móvil no se muestran controles direccionales ni control de rotación; la orientación física se adapta por CSS. ----------------------------------------------------- */ body#product .hurik-zoom-modal { position: fixed; inset: 0; z-index: 2147483200; display: none; align-items: center; justify-content: center; padding: 12px 72px; background: rgba(8,8,8,.96); } body#product .hurik-zoom-modal.active { display: flex; } body#product .hurik-zoom-dialog { position: relative; display: flex; flex-direction: column; align-items: center; width: min(82vw, 1260px); max-height: 96dvh; margin: auto; } body#product .hurik-zoom-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #e9e5de; touch-action: pan-y; isolation: isolate; } body#product .hurik-zoom-image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; } /* * Escritorio con mouse: la vista ampliada prioriza mostrar la fotografía * completa. El escenario usa la altura disponible del viewport y la imagen * se ajusta con contain, sin recortar ninguno de sus bordes. * El comportamiento móvil permanece sin cambios. */ @media (min-width: 769px) and (hover: hover) and (pointer: fine) { body#product .hurik-zoom-stage { height: calc(96dvh - 82px); max-height: 860px; aspect-ratio: auto; } body#product .hurik-zoom-image { object-fit: contain; cursor: pointer; } } body#product .hurik-zoom-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 2147483230; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid #d9d1c6; border-radius: 50%; background: #fff; color: var(--hurik-product-ink); font-size: 26px; line-height: 1; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .14s ease; } body#product .hurik-viewer-nav { position: fixed; top: 50%; z-index: 2147483220; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 62px; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 8px; background: #fff; color: var(--hurik-product-ink); box-shadow: 0 8px 24px rgba(0,0,0,.25); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%); transition: opacity .16s ease, visibility .16s ease, background .18s ease, border-color .18s ease, transform .14s ease; } body#product .hurik-viewer-nav.is-pointer-near, body#product .hurik-viewer-nav:focus-visible { opacity: 1; visibility: visible; pointer-events: auto; } body#product .hurik-viewer-nav--prev { left: 15px; } body#product .hurik-viewer-nav--next { right: 15px; } body#product .hurik-viewer-nav svg { width: 18px; height: 18px; pointer-events: none; } @media (hover:hover) and (pointer:fine) { body#product .hurik-zoom-close:hover, body#product .hurik-viewer-nav:hover, body#product .hurik-viewer-nav:focus-visible { background: var(--hurik-product-gold); border-color: var(--hurik-product-gold); color: var(--hurik-product-ink); outline: none; } } body#product .hurik-zoom-close:active { background: var(--hurik-product-gold); transform: scale(.94); } body#product .hurik-viewer-nav:active { background: var(--hurik-product-gold); transform: translateY(-50%) scale(.94); } body#product .hurik-zoom-thumbnails { display: flex; flex-flow: row nowrap; align-items: center; gap: 8px; width: 100%; margin: 9px 0 0; padding: 0 1px 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body#product .hurik-zoom-thumbnails::-webkit-scrollbar { display: none; } body#product .hurik-zoom-thumb { position: relative; flex: 0 0 76px; width: 76px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 1px solid #d9d1c6; border-radius: 8px; background: #fff; cursor: pointer; } body#product .hurik-zoom-thumb.active { border-color: var(--hurik-product-gold); box-shadow: 0 0 0 2px var(--hurik-product-gold) inset; } body#product .hurik-zoom-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ----------------------------------------------------- Productos similares ----------------------------------------------------- */ body#product .hurik-similar-products { margin: 34px 0 0; padding: 0 0 18px; overflow: visible; } body#product .hurik-similar-heading { margin: 0 0 12px; } body#product .hurik-similar-heading h2 { margin: 0; color: var(--hurik-product-ink); font-size: 1.1rem; font-weight: 860; } body#product .hurik-similar-carousel { position: relative; display: block; width: 100%; min-width: 0; } body#product .hurik-similar-arrow { position: absolute; top: 50%; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 42px; min-width: 30px; padding: 0; border: 1px solid var(--hurik-product-line); border-radius: 8px; background: #fff; color: var(--hurik-product-ink); box-shadow: 0 3px 12px rgba(23, 21, 18, .10); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%); transition: opacity .16s ease, visibility .16s ease, background .18s ease, border-color .18s ease, transform .14s ease; } body#product .hurik-similar-arrow[data-hurik-similar-prev] { left: -34px; } body#product .hurik-similar-arrow[data-hurik-similar-next] { right: -34px; } body#product .hurik-similar-arrow.is-pointer-near:not(.is-hidden), body#product .hurik-similar-arrow:focus-visible:not(.is-hidden) { opacity: 1; visibility: visible; pointer-events: auto; } body#product .hurik-similar-arrow.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body#product .hurik-similar-arrow svg { width: 13px; height: 13px; } @media (hover:hover) and (pointer:fine) { body#product .hurik-similar-arrow:hover { background: var(--hurik-product-gold); border-color: var(--hurik-product-gold); transform: translateY(-50%) scale(1.04); } } body#product .hurik-similar-category-hook { min-width: 0; overflow: hidden; } body#product .hurik-similar-category-hook .products, body#product .hurik-similar-category-hook .product-miniatures, body#product .hurik-similar-category-hook .hurik-similar-track-v8 { display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; gap: 14px !important; width: 100% !important; margin: 0 !important; padding: 2px 0 14px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: none !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x pan-y !important; } body#product .hurik-similar-category-hook .products::-webkit-scrollbar, body#product .hurik-similar-category-hook .product-miniatures::-webkit-scrollbar, body#product .hurik-similar-category-hook .hurik-similar-track-v8::-webkit-scrollbar { display: none !important; } body#product .hurik-similar-category-hook .product-miniature, body#product .hurik-similar-category-hook .hurik-similar-card-v8 { flex: 0 0 220px !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important; margin: 0 !important; } body#product .hurik-similar-products .wishlist-button-add, body#product .hurik-similar-products .wishlist-button, body#product .hurik-similar-products [class*="wishlist"], body#product .hurik-similar-products .quick-view, body#product .hurik-similar-products .product-flags, body#product .hurik-similar-products .product-availability, body#product .hurik-similar-products .hurik-listing-stock { display: none !important; } /* ----------------------------------------------------- KiruH / estados secundarios ----------------------------------------------------- */ body#product .hurik-kiruh-slot { display: none; min-width: 0; } body#product.hurik-product-kiruh-open .hurik-product-focus-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 29vw, 440px); align-items: start; gap: 24px; } body#product.hurik-product-kiruh-open .hurik-kiruh-slot { display: block; position: sticky; top: calc(var(--hurik-header-offset) + 12px); min-width: 360px; min-height: min(720px, calc(100dvh - 110px)); } body#product.hurik-product-kiruh-open .hurik-kiruh-slot #kiruh-v5-panel { width: 100% !important; height: min(720px, calc(100dvh - 110px)) !important; min-height: 560px !important; } body#product .hurik-action-buttons { opacity: 1; visibility: visible; } /* ----------------------------------------------------- Probador virtual: panel acoplado a pantalla completa y tercera columna a la derecha de Pago Seguro. ----------------------------------------------------- */ body#product { --hurik-tryon-dock-width: clamp(420px, 27vw, 520px); --hurik-tryon-live-width: var(--hurik-tryon-dock-width); --hurik-payflow-live-width: clamp(360px, 30vw, 440px); --hurik-layout-gutter: clamp(12px, 1.6vw, 26px); } body#product .hurik-tryon-slot { display: none; min-width: 0; } /* El probador deja de formar parte del grid de la ficha: se acopla al viewport. */ body#product.hurik-product-tryon-open .hurik-product-focus-layout { display: block; } body#product.hurik-product-tryon-open .hurik-tryon-slot { display: block; position: fixed; inset: 0 0 0 auto; z-index: 2147483600; width: var(--hurik-tryon-live-width); min-width: 0; height: 100vh; height: 100dvh; max-height: none; overflow: hidden; background: #fff; border-left: 1px solid var(--hurik-product-line); box-shadow: -14px 0 34px rgba(23,21,18,.10); box-sizing: border-box; } body#product .hurik-tryon-slot .pv-hurik-hook { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; max-height: none !important; margin: 0 !important; z-index: auto !important; } body#product .hurik-tryon-slot .pv-hurik-backdrop { display: none !important; } body#product.hurik-product-tryon-open .hurik-tryon-slot .pv-hurik-panel { position: relative !important; inset: auto !important; display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; transform: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } body#product.hurik-product-tryon-open .hurik-tryon-slot .pv-hurik-panel-body, body#product.hurik-product-tryon-open .hurik-tryon-slot #probador-app, body#product.hurik-product-tryon-open .hurik-tryon-slot .probador-workspace { min-height: 0 !important; max-height: none !important; } body#product.hurik-product-tryon-open .hurik-tryon-slot .pv-hurik-panel-body { flex: 1 1 auto !important; height: auto !important; overflow: auto !important; overscroll-behavior: contain; } /* * Cuando Pago Seguro está abierto, su ancho real se mide en JS. * La ficha reserva el espacio de Pago Seguro + Probador Virtual y * el probador ocupa la tercera columna, a la derecha del pago. */ /* * Escritorio: la ficha conserva un ancho físico explícito en lugar de * depender de márgenes automáticos de Bootstrap. Así no puede colapsar * a una columna de pocos píxeles cuando Pago Seguro + Probador están abiertos. */ /* * Modo táctil: * en teléfonos/tablets con entrada táctil primaria no se muestran * controles direccionales. La navegación permanece disponible por * gesto horizontal, miniaturas y desplazamiento táctil. */ body#product.hurik-touch-navigation .hurik-gallery-nav, body#product.hurik-touch-navigation .hurik-viewer-nav, body#product.hurik-touch-navigation .hurik-similar-arrow { display: none !important; } body#product.hurik-touch-navigation .hurik-similar-carousel { display: block; } @media (min-width: 1280px) { body#product.hurik-product-tryon-open #wrapper > .container { width: var(--hurik-main-live-width, calc(100vw - var(--hurik-tryon-live-width) - (2 * var(--hurik-layout-gutter)))) !important; max-width: none !important; min-width: 0 !important; margin-left: var(--hurik-layout-gutter) !important; margin-right: 0 !important; margin-inline: 0 !important; } body#product.hurik-product-tryon-open #content-wrapper, body#product.hurik-product-tryon-open #content, body#product.hurik-product-tryon-open #main, body#product.hurik-product-tryon-open .hurik-product-container, body#product.hurik-product-tryon-open .hurik-product-focus-layout, body#product.hurik-product-tryon-open .hurik-product-form, body#product.hurik-product-tryon-open .hurik-product-main, body#product.hurik-product-tryon-open .hurik-product-column-a, body#product.hurik-product-tryon-open .hurik-product-info { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } body#product.hurik-product-tryon-open .hurik-product-container, body#product.hurik-product-tryon-open .hurik-product-form, body#product.hurik-product-tryon-open .hurik-product-main { width: 100% !important; } body#product.hurik-product-tryon-open.hurik-tryon-with-payflow .hurik-product-main { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important; gap: clamp(18px, 2vw, 32px) !important; } /* El overlay de pago queda debajo del probador; el panel se desplaza por JS. */ body#product.hurik-product-tryon-open.hurik-tryon-with-payflow [data-hkpay-overlay] { z-index: 2147483500 !important; } } /* * Tablet horizontal / escritorio estrecho: Pago Seguro y Probador comparten * el viewport. La ficha queda detrás y no se comprime a un ancho ilegible. */ @media (min-width: 992px) and (max-width: 1279px) { body#product.hurik-product-tryon-open:not(.hurik-tryon-with-payflow) #wrapper > .container { width: calc(100vw - var(--hurik-tryon-live-width) - (2 * var(--hurik-layout-gutter))) !important; max-width: none !important; min-width: 0 !important; margin-left: var(--hurik-layout-gutter) !important; margin-right: 0 !important; margin-inline: 0 !important; } body#product.hurik-product-tryon-open.hurik-tryon-with-payflow #wrapper > .container { width: 96% !important; max-width: none !important; margin-inline: auto !important; } body#product.hurik-product-tryon-open.hurik-tryon-with-payflow .hurik-tryon-slot { width: 50vw !important; } body#product.hurik-product-tryon-open.hurik-tryon-with-payflow [data-hkpay-overlay] { z-index: 2147483500 !important; } body#product.hurik-product-tryon-open.hurik-tryon-with-payflow [data-hkpay-overlay] .hkpay-modal { width: 50vw !important; max-width: 50vw !important; } } /* ----------------------------------------------------- Toast ----------------------------------------------------- */ body#product .hurik-toast { position: fixed; left: 50%; bottom: 90px; z-index: 2147483400; max-width: min(420px, calc(100vw - 30px)); padding: 11px 15px; border-radius: 10px; background: #171512; color: #fff; font-size: .82rem; opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } body#product .hurik-toast.active { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* ----------------------------------------------------- Volver arriba ----------------------------------------------------- */ body#product .hurik-back-to-top { width: 36px !important; height: 36px !important; border: 1px solid var(--hurik-product-line) !important; border-radius: 8px !important; background: #fff !important; color: var(--hurik-product-ink) !important; box-shadow: 0 5px 16px rgba(0,0,0,.08) !important; } @media (hover:hover) and (pointer:fine) { body#product .hurik-back-to-top:hover { background: var(--hurik-product-gold) !important; border-color: var(--hurik-product-gold) !important; color: var(--hurik-product-ink) !important; } } /* ----------------------------------------------------- Indicador móvil de continuidad vertical ----------------------------------------------------- */ body#product .hurik-mobile-scroll-down { position: fixed; left: 50%; bottom: 22px; z-index: 2147483450; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; background: rgba(23,21,18,.88); color: #fff; box-shadow: 0 9px 28px rgba(23,21,18,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 7px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; } body#product .hurik-mobile-scroll-down.is-visible { opacity: .98; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } body#product .hurik-mobile-scroll-down svg { width: 27px; height: 27px; stroke-width: 2.35; animation: hurikMobileMoreCue 1.55s ease-in-out infinite; } @media (max-width: 768px) { body#product .hurik-mobile-scroll-down { bottom: calc(var(--hurik-mobile-action-height) + 16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; } } @keyframes hurikMobileMoreCue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { body#product .hurik-mobile-scroll-down svg { animation: none; } } /* ----------------------------------------------------- Mobile ----------------------------------------------------- */ @media (max-width: 991px) { :root { --hurik-header-offset: 112px; } body#product .hurik-product-main { grid-template-columns: 1fr; gap: 18px; } body#product .hurik-product-info { padding-top: 0; } body#product.hurik-product-kiruh-open .hurik-product-focus-layout { display: block; } body#product.hurik-product-kiruh-open .hurik-kiruh-slot { display: block; position: fixed; inset: var(--hurik-header-offset) 0 0; z-index: 2147482500; min-width: 0; min-height: 0; background: #fff; } body#product.hurik-product-kiruh-open .hurik-kiruh-slot #kiruh-v5-panel { width: 100% !important; height: 100% !important; min-height: 0 !important; } body#product.hurik-product-tryon-open .hurik-product-focus-layout { display: block; } /* En móvil el probador ocupa el viewport completo; Pago Seguro queda detrás hasta cerrar el probador. */ body#product.hurik-product-tryon-open .hurik-tryon-slot { display: block; position: fixed; inset: 0; z-index: 2147483600; width: 100vw; height: 100vh; height: 100dvh; max-height: none; background: #fff; border-left: 0; } body#product.hurik-product-tryon-open .hurik-tryon-slot .pv-hurik-panel { width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; } } @media (max-width: 768px) { body#product .hurik-header-inner, body#product #wrapper > .container { width: calc(100% - 24px) !important; max-width: none !important; } body#product .hurik-product-container { padding-top: 6px; } body#product .hurik-product-category-row { min-height: 26px; margin-bottom: 7px; } body#product .hurik-main-image-wrap { border-radius: 12px; } body#product .hurik-gallery-thumbnails-shell { margin-top: 8px; } body#product .hurik-gallery-thumbnails { gap: 7px; padding-bottom: 3px; } body#product .hurik-gallery-thumb { flex-basis: 66px; width: 66px; min-width: 66px; height: 52px; border-radius: 8px; } body#product .hurik-gallery-thumb--virtual { flex-basis: 96px; width: 96px; min-width: 96px; font-size: .64rem; } body#product .hurik-thumbnails { margin-top: 7px; } body#product .hurik-thumb { flex-basis: 58px; width: 58px; } /* En móvil las tres rutas de compra permanecen siempre accesibles. */ body#product .hurik-product-container { padding-bottom: calc(var(--hurik-mobile-action-height) + 34px + env(safe-area-inset-bottom)); } body#product .hurik-action-buttons { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 2147483000 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 7px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important; border-top: 1px solid rgba(23,21,18,.10); background: rgba(251,249,245,.94); box-shadow: 0 -8px 24px rgba(23,21,18,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; box-sizing: border-box; } body#product .hurik-btn-tryon, body#product .hurik-btn-cart, body#product .hurik-btn-buy { grid-column: auto !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; min-height: 64px !important; padding: 7px 6px !important; border-radius: 12px !important; font-size: clamp(.71rem, 3.2vw, .82rem) !important; font-weight: 820 !important; line-height: 1.05 !important; white-space: normal !important; box-shadow: none !important; pointer-events: auto; } body#product .hurik-btn-tryon { background: #f0ebe3 !important; border-color: #cfc5b7 !important; color: var(--hurik-product-ink) !important; } body#product .hurik-btn-buy { background: var(--hurik-product-ink) !important; border-color: var(--hurik-product-ink) !important; color: #fff !important; } body#product .hurik-btn-cart { background: #fff !important; border-color: var(--hurik-product-ink) !important; color: var(--hurik-product-ink) !important; } body#product .hurik-btn-tryon svg, body#product .hurik-btn-cart svg { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; } body#product .hurik-product-title { margin-bottom: 8px; font-size: 1.55rem; } body#product .hurik-product-summary { margin-bottom: 13px; font-size: .9rem; } body#product .hurik-price-row { margin-bottom: 20px; } body#product .hurik-price-negotiated { font-size: 2.35rem; } body#product .hurik-choice-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body#product .hurik-choice-column { width: 100%; min-width: 0; max-width: none; padding: 9px; } body#product .hurik-choice-quantity { width: 132px; max-width: 132px; } body#product .hurik-product-tab-list { gap: 0; } body#product .hurik-product-tab { min-height: 44px; padding: 8px 9px; font-size: .72rem; } body#product .hurik-delivery-alert-overlay { align-items: center; justify-content: center; padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); } body#product .hurik-delivery-alert-box { width: min(390px, calc(100vw - 20px)); padding: 17px; border-radius: 17px; } body#product .hurik-zoom-dialog, body#product .hurik-zoom-stage, body#product .hurik-zoom-thumbnails { width: calc(100vw - 12px); } body#product .hurik-zoom-close { width: 44px; height: 44px; } body#product .hurik-zoom-modal > .hurik-viewer-nav { display: none !important; } body#product .hurik-similar-carousel { display: block; } body#product .hurik-similar-arrow, body#product .hurik-gallery-nav { display: none !important; } body#product .hurik-similar-category-hook .product-miniature, body#product .hurik-similar-category-hook .hurik-similar-card-v8 { flex-basis: 170px !important; width: 170px !important; min-width: 170px !important; max-width: 170px !important; } /* * El footer clásico de módulos no debe renderizarse visualmente * en la ficha móvil. Se conservan dentro de #footer los nodos * funcionales no visuales (modales/scripts/hooks). */ body#product #footer { min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body#product #footer > .links, body#product #footer > #block_myaccount_infos, body#product #footer > .block-contact, body#product #footer > .footer-container { display: none !important; } /* Los controles globales flotantes quedan por encima de la barra CTA. */ body#product #kiruh-v5-avatar, body#product .hurik-back-to-top { bottom: calc(var(--hurik-mobile-action-height) + 24px + env(safe-area-inset-bottom)) !important; } } @media (max-width: 768px) and (orientation: landscape) { body#product .hurik-zoom-dialog { width: min(104dvh, calc(100vw - 24px)); max-width: calc(100vw - 24px); } body#product .hurik-zoom-stage { width: 100%; max-height: none; aspect-ratio: 4 / 3; } body#product .hurik-zoom-thumbnails { width: 100%; } } @media (prefers-reduced-motion: reduce) { body#product .hurik-main-image-wrap::after, body#product .hurik-zoom-stage::after, body#product .hurik-zoom-thumb::after { display: none; } } /* * Acoplamiento dinámico consolidado. * - Conserva el margen horizontal original de la ficha (96 % del área útil). * - Mantiene Carrito y Mis compras dentro del área visible del header. * - La flecha siguiente permanece en el borde real entre ficha y paneles. */ @media (min-width: 992px) { body#product.hurik-right-dock-active #wrapper > .container, body#product.hurik-right-dock-active.hurik-product-tryon-open #wrapper > .container, body#product.hurik-right-dock-active .hurik-header-inner { width: var(--hurik-right-main-width, calc(var(--hurik-right-dock-boundary, 100vw) - (2 * var(--hurik-main-inline-inset, 18px)))) !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; margin-left: var(--hurik-main-inline-inset, 18px) !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* El buscador cede ancho antes que los accesos rápidos. */ body#product.hurik-right-dock-active .hurik-header-inner { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) auto !important; align-items: center !important; gap: clamp(8px, 1vw, 18px) !important; } body#product.hurik-right-dock-active .hurik-header-search { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } body#product.hurik-right-dock-active .hurik-header-spacer { display: none !important; } body#product.hurik-right-dock-active .hurik-header-actions, body#product.hurik-right-dock-active .hurik-header-tools, body#product.hurik-right-dock-active .hurik-cart-link, body#product.hurik-right-dock-active .hurik-orders-link { display: flex !important; visibility: visible !important; opacity: 1 !important; } body#product.hurik-right-dock-active .hurik-header-actions, body#product.hurik-right-dock-active .hurik-header-tools { min-width: max-content !important; flex: 0 0 auto !important; } body#product.hurik-right-dock-active #wrapper > .container > .row, body#product.hurik-right-dock-active #content-wrapper, body#product.hurik-right-dock-active #content, body#product.hurik-right-dock-active #main, body#product.hurik-right-dock-active .hurik-product-container, body#product.hurik-right-dock-active .hurik-product-focus-layout, body#product.hurik-right-dock-active .hurik-product-form, body#product.hurik-right-dock-active .hurik-product-main, body#product.hurik-right-dock-active .hurik-product-column-a, body#product.hurik-right-dock-active .hurik-product-info { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } body#product.hurik-right-dock-active .hurik-product-main, body#product.hurik-right-dock-active.hurik-product-tryon-open .hurik-product-main { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important; gap: clamp(18px, 2vw, 34px) !important; align-items: start !important; } body#product.hurik-right-dock-active.hurik-main-pane-compact .hurik-product-main, body#product.hurik-right-dock-active.hurik-product-tryon-open.hurik-main-pane-compact .hurik-product-main { grid-template-columns: minmax(0, 1fr) !important; } body#product.hurik-right-dock-active .hurik-main-image-wrap, body#product.hurik-right-dock-active .hurik-gallery, body#product.hurik-right-dock-active .hurik-action-buttons, body#product.hurik-right-dock-active .hurik-product-tabs { max-width: 100% !important; min-width: 0 !important; } } body#product .hurik-btn-tryon, body#product .hurik-btn-cart, body#product .hurik-btn-buy, body#product .hurik-btn-tryon.is-active, body#product .hurik-btn-buy.is-active, body#product .hurik-btn-tryon[aria-pressed="true"], body#product .hurik-btn-buy[aria-pressed="true"] { pointer-events: auto !important; } body#product .hurik-btn-tryon.is-active, body#product .hurik-btn-buy.is-active { cursor: pointer !important; } /* El fondo de elección puede cubrir visualmente el viewport, pero sólo la caja de opciones captura clics. La ficha y el header siguen operables. */ body#product .hurik-delivery-alert-overlay, body#product .hurik-delivery-alert-overlay.active, body#product.hurik-delivery-choice-open .hurik-delivery-alert-overlay.active { pointer-events: none !important; } body#product .hurik-delivery-alert-overlay .hurik-delivery-alert-box, body#product .hurik-delivery-alert-overlay.active .hurik-delivery-alert-box { pointer-events: auto !important; } /* Pago Seguro es un dock lateral. El overlay exterior no debe convertirse en una lámina transparente que intercepte toda la página. */ body#product [data-hkpay-overlay], body#product.hurik-external-flow-open [data-hkpay-overlay], body#product.hurik-product-tryon-open.hurik-tryon-with-payflow [data-hkpay-overlay] { pointer-events: none !important; } body#product [data-hkpay-overlay] .hkpay-modal, body#product.hurik-external-flow-open [data-hkpay-overlay] .hkpay-modal, body#product.hurik-product-tryon-open.hurik-tryon-with-payflow [data-hkpay-overlay] .hkpay-modal { pointer-events: auto !important; } /* Los controles de la ficha nunca se deshabilitan por el estado de los docks. */ body#product .hurik-action-buttons, body#product .hurik-btn-tryon, body#product .hurik-btn-cart, body#product .hurik-btn-buy, body#product .hurik-header-inner, body#product .hurik-header-inner a, body#product .hurik-header-inner button { pointer-events: auto !important; } /* HURIK_EDGE_PRODUCT_NAV_V2_20260829 */ /* Flechas laterales más visibles */ body#product .hurik-edge-product-nav:not(.is-disabled) { width: 46px !important; height: 72px !important; opacity: .94 !important; background: rgba(255,255,255,.97) !important; border-color: #d9d1c6 !important; color: #171512 !important; box-shadow: 0 8px 24px rgba(23,21,18,.13), 0 1px 3px rgba(23,21,18,.08) !important; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease, opacity .16s ease !important; } body#product .hurik-edge-product-nav svg { width: 22px !important; height: 22px !important; stroke-width: 2.3 !important; } /* Patrón HURIK */ body#product .hurik-edge-product-nav:not(.is-disabled):hover, body#product .hurik-edge-product-nav:not(.is-disabled):focus-visible { opacity: 1 !important; background: var(--hurik-product-gold, #c9a96e) !important; border-color: var(--hurik-product-gold, #c9a96e) !important; color: #171512 !important; box-shadow: 0 10px 28px rgba(23,21,18,.18), 0 0 0 2px rgba(201,169,110,.16) !important; outline: none !important; } /* IMPORTANTE: fuera del media hover para que funcione en celular */ body#product .hurik-edge-product-nav:not(.is-disabled):active { opacity: 1 !important; background: var(--hurik-product-gold, #c9a96e) !important; border-color: var(--hurik-product-gold, #c9a96e) !important; color: #171512 !important; transform: translateY(-50%) scale(.94) !important; } /* Móvil */ @media (max-width: 768px) { body#product .hurik-edge-product-nav:not(.is-disabled) { width: 42px !important; height: 66px !important; opacity: .96 !important; background: rgba(255,255,255,.97) !important; } body#product .hurik-edge-product-nav svg { width: 22px !important; height: 22px !important; } } /* HURIK_PRODUCT_BREADCRUMB_VISIBLE_CSS_V1_BEGIN */ body#product .hurik-product-breadcrumb { width: 100%; margin: 0 0 10px; padding: 0; font-size: 0.8125rem; line-height: 1.35; } body#product .hurik-product-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } body#product .hurik-product-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; } body#product .hurik-product-breadcrumb li:not(:last-child)::after { content: "›"; margin: 0 0.45rem; color: #6c757d; } body#product .hurik-product-breadcrumb a, body#product .hurik-product-breadcrumb span { color: inherit; text-decoration: none; } body#product .hurik-product-breadcrumb a:hover, body#product .hurik-product-breadcrumb a:focus-visible { text-decoration: underline; } body#product .hurik-product-breadcrumb [aria-current="page"] { overflow: hidden; max-width: 42ch; text-overflow: ellipsis; white-space: nowrap; } /* HURIK_PRODUCT_BREADCRUMB_VISIBLE_CSS_V1_END */