/** Shopify CDN: Minification failed Line 151:0 All "@import" rules must come first **/ /* ================================================================= ARTURO — Galatea custom overrides ----------------------------------------------------------------- Hoja de estilos custom para Galatea sobre tema Prestige. Cargada al final del via theme.liquid (asegura prioridad sobre theme.css sin necesidad de !important salvo overrides muy específicos del propio Prestige). No modificar archivos base de Prestige. Todo override va aquí. ================================================================= */ /* ----------------------------------------------------------------- 1. STICKY ATC BAR → posición inferior en desktop ----------------------------------------------------------------- En Prestige, la sticky ATC bar se pega al header en desktop (theme.css ~L6617: inset-block: var(--sticky-area-height) auto). En móvil ya está al bottom. Queremos bottom en TODAS las resoluciones. ----------------------------------------------------------------- */ @media screen and (min-width: 700px) { .product-sticky-bar { inset-block: auto 0; /* top auto, bottom 0 */ border-block-start-width: 1px; /* línea separadora arriba (antes estaba abajo) */ border-block-end-width: 0; } } /* ----------------------------------------------------------------- 2. STICKY ATC BUTTON → mismo color/estilo que ATC principal PDP ----------------------------------------------------------------- Colores tomados de templates/product.json block "buy_buttons": atc_button_background = #610027 (rgb 97 0 39) atc_button_text_color = #fffcef (rgb 255 252 239) Prestige aplica colores via custom properties con formato "R G B" (sin coma, consumidas con rgb(var(--...))). ----------------------------------------------------------------- */ .product-sticky-bar buy-buttons .button { --button-background: 97 0 39; --button-outline-color: 97 0 39; --button-text-color: 255 252 239; } /* ----------------------------------------------------------------- 3. OCULTAR "Más opciones de pago" ----------------------------------------------------------------- Link que Shopify añade automáticamente debajo del dynamic payment button (Shop Pay / express checkout) para abrir el checkout normal. El cliente quiere que no aparezca. ----------------------------------------------------------------- */ .shopify-payment-button__more-options { display: none !important; } /* ----------------------------------------------------------------- 4. WIDGET KLARNA → sin bordes ni fondo ----------------------------------------------------------------- El widget de Klarna On-Site Messaging es un app block. Prestige lo envuelve en `.product-info__block-item`. Quitamos border y background de ambos niveles (wrapper + custom element). ----------------------------------------------------------------- */ .product-info__block-item:has(klarna-placement) { border: none !important; background: transparent !important; padding: 0 !important; } klarna-placement { border: none !important; background: transparent !important; } /* ----------------------------------------------------------------- 5. SPACING botones de compra → 8px entre ATC, Shop Pay y Klarna ----------------------------------------------------------------- Pedido cliente: los tres elementos (ATC, Shop Pay, Klarna widget) con exactamente 8px de separación entre ellos. - Gap interno de : theme.css define row-gap: 1rem. - Gap entre block-items en product-info: cada block-item declara --product-info-gap; el margin se aplica como margin-block-start en el siguiente bloque. ----------------------------------------------------------------- */ /* ATC ↔ Shop Pay (mismo wrapper ) */ .buy-buttons { row-gap: 12px !important; } /* buy-buttons block-item ↔ Klarna block-item */ .product-info__block-item[data-block-type="buy-buttons"], .product-info__block-item:has(klarna-placement) { --product-info-gap: 6px !important; } /* ----------------------------------------------------------------- 6. PRODUCT CARD — botón quick add ("+" con esquinas redondeadas) ----------------------------------------------------------------- Solo se mantiene el border-radius 5px sobre el botón del theme base. El icono vuelve al "+" original del snippet product-card (decisión Arturo 2026-05-19, revierte el icono bolsa anterior). ----------------------------------------------------------------- */ .product-card__quick-add-button { border-radius: 5px; } /* ============================================================ BLOQUE 7 — Layout "Vertical — Arturo" (referencia style) Scoped a .product[data-arturo-layout="arturo_olivia"] Aplica solo cuando el cliente elige esa opción en el editor. Sin esto, el layout sigue exactamente como Prestige default. ============================================================ */ /* --- Desktop arturo_olivia: REVERTIDO a Prestige default (decisión Arturo 2026-05-14 iter 20.5). El layout desktop referencia rompía en ciertos viewports estrechos. Mobile sigue pixel-perfect. Para volver al look referencia desktop en el futuro, restaurar bloques de container override + grid + title. */ /* Bloques eliminados: - container--lg :has() override (padding/margin/maxwidth) - defensive min-width:0 + max-width:100% en grid children - --product-grid override (55/45 ratio) - column-gap: 0 - thumbnails hide en desktop - title font-size 26px desktop */ /* ============================================================ BLOQUE 7b — Layout "Vertical — Arturo" MOBILE pixel-perfect (estilo referencia) Scoped a .product[data-arturo-layout="arturo_olivia"] Aplica <1000px (mobile + tablet portrait) ============================================================ */ /* Cargar Bricolage Grotesque para el título (free Google Font) */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400&display=swap'); @media screen and (max-width: 999px) { /* Product grid mobile: gap 16px (vs Prestige 30px), padding 0 0 32px. Padding-top:0 porque el breadcrumb (con su padding-bottom:14px) ya genera el espacio arriba de la imagen — así arriba y abajo del breadcrumb queda balanceado (14/14). */ .product[data-arturo-layout="arturo_olivia"] { gap: 16px !important; padding: 0 0 32px !important; } /* Gallery wrapper: gap 4px entre carousel y thumbs (más pegado). Decisión Arturo iter 9: 8px era mucho, lo reducimos a 4px. */ .product[data-arturo-layout="arturo_olivia"] product-gallery { gap: 4px !important; } /* Carousel mobile: slides 90% width para peek visible de segunda imagen (estilo referencia). Slide se reduce proporcionalmente (393→354 ancho, 581→523 alto, aspect ratio 1:1.48 preservado). */ .product[data-arturo-layout="arturo_olivia"] .product-gallery__carousel { grid-auto-columns: 90% !important; gap: 4px !important; } /* Slide: ancho 90% (peek), pero altura natural de la imagen Galatea (NO forzar 1:1 — las imágenes Galatea son más alargadas/portrait). Decisión Arturo 2026-05-14: respetar aspect natural. */ .product[data-arturo-layout="arturo_olivia"] .product-gallery__media { width: 100% !important; scroll-snap-align: start !important; } /* La imagen dentro del slide: object-fit contain para que se vea entera respetando aspect natural sin recortar. */ .product[data-arturo-layout="arturo_olivia"] .product-gallery__media img, .product[data-arturo-layout="arturo_olivia"] .product-gallery__media picture { width: 100% !important; height: auto !important; } /* Thumbnail strip mobile: gap 4px, bleed full edges, padding-bottom 6px */ .product[data-arturo-layout="arturo_olivia"] carousel-navigation.scroll-marker-group--thumbnails { gap: 4px !important; padding: 0 20px 6px !important; margin: 0 -20px -6px !important; } /* Thumb buttons: 58×58 square, no border */ .product[data-arturo-layout="arturo_olivia"] carousel-navigation.scroll-marker-group--thumbnails > button, .product[data-arturo-layout="arturo_olivia"] carousel-navigation.scroll-marker-group--thumbnails > .scroll-marker { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; border-radius: 0 !important; } .product[data-arturo-layout="arturo_olivia"] carousel-navigation.scroll-marker-group--thumbnails img { width: 58px !important; height: 58px !important; object-fit: cover !important; } /* TÍTULO H1 — Bricolage Grotesque uppercase, match referencia exacto. Specs referencia mobile: 19.9px / 400 / lh 0.9 (de --heading-line-height) / ls 0.005em / #333. */ .product[data-arturo-layout="arturo_olivia"] h1.product-title, .product[data-arturo-layout="arturo_olivia"] .product-title.h3 { font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 19.9px !important; font-weight: 400 !important; line-height: 0.9 !important; letter-spacing: 0.005em !important; color: rgb(51, 51, 51) !important; text-transform: uppercase !important; margin: 0 !important; } } /* BLOQUE 7c REVERTIDO 2026-05-14 — Desktop arturo_olivia vuelve a Prestige default (decisión Arturo tras break de overflow). Mobile sigue pixel-perfect. */ /* ============================================================ BLOQUE 7d — Thumbnails mobile Prestige (selector corregido) Prestige usa + (NO carousel-navigation como referencia) ============================================================ */ @media screen and (max-width: 999px) { /* Container del strip: gap 4px, thumb 48×70 (aspect 353:521 Galatea natural). Padding asimétrico: 20px izquierda (inset normal), 4px derecha (igual que gap entre thumbs — decisión Arturo iter 11: que el último thumb no tenga gap extra a la derecha). */ .product[data-arturo-layout="arturo_olivia"] product-gallery-navigation.product-gallery__thumbnail-scroller { gap: 4px !important; grid-auto-columns: 48px !important; padding: 0 4px 6px 4px !important; margin: 0 -20px -6px !important; } /* Cada thumb: 68×100 portrait (aspect 353:521 Galatea natural escalado) */ .product[data-arturo-layout="arturo_olivia"] button.product-gallery__thumbnail { width: 48px !important; height: 70px !important; aspect-ratio: 353 / 521 !important; padding: 0 !important; border-width: 0 !important; } /* Imagen interior del thumb: object-cover llena el 68×100 */ .product[data-arturo-layout="arturo_olivia"] button.product-gallery__thumbnail img { width: 48px !important; height: 70px !important; object-fit: cover !important; } /* Thumb base: todas iluminadas a opacity 1 (estado original cliente). La atenuación de inactivas se aplica SOLO cuando el toggle "Atenuar miniaturas inactivas" está ON (data-arturo-thumbs-dim="on"). */ .product[data-arturo-layout="arturo_olivia"] button.product-gallery__thumbnail { opacity: 1 !important; filter: none !important; transition: opacity 0.2s, filter 0.2s !important; outline: none !important; border: none !important; } .product[data-arturo-layout="arturo_olivia"] button.product-gallery__thumbnail[aria-current="true"], .product[data-arturo-layout="arturo_olivia"] button.product-gallery__thumbnail.is-active { filter: brightness(1.08) !important; } /* Toggle ON: atenuar inactivas a opacity 0.45 (estilo referencia). */ .product[data-arturo-layout="arturo_olivia"][data-arturo-thumbs-dim="on"] button.product-gallery__thumbnail { opacity: 0.45 !important; } .product[data-arturo-layout="arturo_olivia"][data-arturo-thumbs-dim="on"] button.product-gallery__thumbnail[aria-current="true"], .product[data-arturo-layout="arturo_olivia"][data-arturo-thumbs-dim="on"] button.product-gallery__thumbnail.is-active { opacity: 1 !important; } /* Toggle ON: borde negro alrededor de la miniatura activa (estilo Prestige). Usa outline + outline-offset negativo para no afectar el layout 48×70. */ .product[data-arturo-layout="arturo_olivia"][data-arturo-thumb-border="on"] button.product-gallery__thumbnail[aria-current="true"], .product[data-arturo-layout="arturo_olivia"][data-arturo-thumb-border="on"] button.product-gallery__thumbnail.is-active { outline: 1px solid #000 !important; outline-offset: -1px !important; } } /* ============================================================ BLOQUE 7e — Zoom button bottom-right (estilo referencia) En Prestige el botón zoom va top-right por defecto. referencia lo pone bottom-right. Solo aplica en modo arturo_olivia. ============================================================ */ /* El zoom button en Prestige es position:absolute respecto a (que incluye carousel + thumbs). Para ponerlo bottom-right del slide (no del contenedor entero) calculamos top dinámicamente. En mobile: slide width = 90vw (grid-auto-columns: 90% del carousel que ocupa 100vw bleeded). slide height = slide width (1:1). Button height ~36px + 12px margin = 48px desde el bottom del slide. */ @media screen and (max-width: 999px) { /* SELECT: si data-arturo-zoom-mobile-style="off", ocultar TODOS los zoom buttons + OPB en mobile (sirve para los 3 layouts arturo_olivia). */ .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="off"] button.product-gallery__zoom-button, .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="off"] open-lightbox-button { display: none !important; } /* === BASE COMÚN: arturo_plus + prestige_lupa === Slide pasa a position:relative para que el botón clonado ancle al slide. OPB display:contents para que el botón hijo se posicione dentro del slide. Oculta el OPB ORIGINAL (suelto a nivel gallery). Las copias dentro de los slides son las visibles. Necesario para que el botón se deslice con la imagen (sin esto el botón queda flotando sobre el gallery wrapper). */ .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="arturo_plus"] .product-gallery__media, .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="prestige_lupa"] .product-gallery__media { position: relative !important; } .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="arturo_plus"] open-lightbox-button, .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="prestige_lupa"] open-lightbox-button { display: contents !important; } .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="arturo_plus"] open-lightbox-button[data-arturo-original], .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="prestige_lupa"] open-lightbox-button[data-arturo-original] { display: none !important; } /* === ESTILO "prestige_lupa" (lupa Prestige top-right, anclada al slide) === Prestige base pone el botón a inset-inline-end: 0 (pegado al borde). Le damos 6px de aire respecto al borde derecho del slide. */ .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="prestige_lupa"] button.product-gallery__zoom-button { inset-inline-end: 6px !important; } /* === ESTILO "arturo_plus" (referencia: "+" bottom-right por slide) === */ /* Zoom button "+" estilo referencia EXACTO. 40×40 transparente, SVG "+" 16×16 centrado, color #333, position absolute bottom-right del slide, 8px inset. */ .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="arturo_plus"] button.product-gallery__zoom-button { display: grid !important; place-items: center !important; position: absolute !important; /* El botón está clonado DENTRO de cada .product-gallery__media (vía JS en main-product.liquid). Como el slide tiene position:relative, insets simples 8px bottom-right anclan al slide directamente (estilo referencia). */ top: auto !important; right: 8px !important; bottom: 8px !important; left: auto !important; inset-block-start: auto !important; inset-block-end: 8px !important; inset-inline-end: 8px !important; inset-inline-start: auto !important; width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: rgb(51, 51, 51) !important; cursor: pointer !important; z-index: 2 !important; } /* Ocultar la SVG original de Prestige (magnificador con círculo) — solo arturo_plus */ .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="arturo_plus"] button.product-gallery__zoom-button > svg { display: none !important; } /* Inyectar el "+" exacto de referencia via ::before con SVG inline — solo arturo_plus */ .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="arturo_plus"] button.product-gallery__zoom-button::before { content: ''; display: block; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } } @media screen and (min-width: 1000px) { /* Desktop: el slide ocupa toda la columna gallery (55% del grid), height se ajusta al ratio natural de la imagen. Dejar el botón floating en bottom-right del primer slide — solo aplica al estilo arturo_plus. */ .product[data-arturo-layout="arturo_olivia"][data-arturo-zoom-mobile-style="arturo_plus"] button.product-gallery__zoom-button { inset-block-start: auto !important; inset-block-end: 12px !important; inset-inline-end: 12px !important; } } /* ============================================================ BLOQUE 7f — Lightbox PhotoSwipe overrides estilo referencia ------------------------------------------------------------ Galatea Prestige ya usa PhotoSwipe (mismo lib que referencia). Diff: Prestige pone close/prev/next abajo centrados. referencia los reposiciona: close top-right, prev mid-left, next mid-right. Scoped vía :has() a páginas con arturo_olivia layout, para no afectar el lightbox cuando el cliente usa otro layout. Specs medidos Playwright referencia mobile iPhone 14 Pro 2026-05-14. ============================================================ */ @media screen and (max-width: 999px) { /* Galatea Prestige PSWP usa aria-label en vez de BEM modifiers para identificar buttons. Se selecciona por aria-label (español + inglés). */ /* Reset top-bar para que no constraint los buttons */ body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp__top-bar { position: absolute !important; inset: 0 !important; background: transparent !important; pointer-events: none !important; display: block !important; height: 100% !important; width: 100% !important; } body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp__top-bar > * { pointer-events: auto !important; } /* CLOSE: aria-label "Cerrar"/"Close" — top-right 28px */ body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="lose" i], body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="rrar" i] { position: absolute !important; top: 28px !important; right: 28px !important; bottom: auto !important; left: auto !important; width: 40px !important; height: 40px !important; border-radius: 100% !important; border: 0 !important; background: transparent !important; color: rgb(0, 0, 0) !important; z-index: 10 !important; } /* PREVIOUS: aria-label "Anterior"/"Previous" — mid-left 20px */ body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="rev" i], body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="nterior" i] { position: absolute !important; top: 50% !important; left: 20px !important; right: auto !important; bottom: auto !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; border-radius: 100% !important; border: 0 !important; background: transparent !important; color: rgb(0, 0, 0) !important; z-index: 10 !important; } /* NEXT: aria-label "Siguiente"/"Next" — mid-right 20px */ body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="ext" i], body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="iguiente" i] { position: absolute !important; top: 50% !important; right: 20px !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; border-radius: 100% !important; border: 0 !important; background: transparent !important; color: rgb(0, 0, 0) !important; z-index: 10 !important; } /* CIRCLE BACKGROUND — match exacto referencia. referencia tiene ::before con bg gris #EFEFEF (color-mix srgb 8% text/92% bg). Galatea Prestige tiene el ::before pero con bg casi blanco — sobreescribir. También quita cualquier sombra del theme Prestige. */ body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button { box-shadow: none !important; } body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button::before { content: '' !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: rgb(239, 239, 239) !important; border-radius: 100% !important; z-index: -1 !important; box-shadow: none !important; } /* SVG REPLACEMENT — match exacto referencia. Ocultar SVG original Prestige (chevrons) e inyectar el SVG referencia via ::after con background-image data URI URL-encoded. - Close: X cross thin (viewBox 16, stroke 1) - Prev: arrow-left with long line (viewBox 36, stroke 2) - Next: arrow-right with long line (viewBox 36, stroke 2) */ body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button svg { display: none !important; } body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="lose" i]::after, body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="rrar" i]::after { content: ''; display: block; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="rev" i]::after, body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="nterior" i]::after { content: ''; display: block; width: 12px; height: 12px; background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="ext" i]::after, body:has(.product[data-arturo-layout="arturo_olivia"]) .pswp .pswp__button[aria-label*="iguiente" i]::after { content: ''; display: block; width: 12px; height: 12px; background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } } /* ============================================================ BLOQUE 8 — Free Shipping Bar app (ninety9 / fsb) — opacidad ------------------------------------------------------------ Root cause real (verificado live con Playwright/Claude-in-Chrome 2026-05-15): el problema NO era el header. La barra "envío gratis" inyectada por la app FSB renderiza un #fsb_bar con background-color: rgba(99, 0, 31, 0.9) (alpha 0.9 = 10% translúcido). Como #fsb_background es position: fixed top: 0 height: 38px, al scrollear la imagen del producto pasa por DETRÁS y se ve a través del granate semi-translúcido. Forzamos alpha 1 (color sólido). ============================================================ */ #fsb_background, #fsb_bar { background-color: rgb(99, 0, 31) !important; } /* BLOQUE 9 (Filtro Custom Arturo, estilo referencia) ELIMINADO 2026-05-15 por decisión Arturo. No le gustó. Si en el futuro se quiere recuperar, ver git history de este archivo o el archivo `feedback_galatea_main_collection_excepcion.md` (también obsoleto). */ /* ============================================================ BLOQUE 10 — PDP "Combina bien con" pixel-clone referencia ------------------------------------------------------------ Aplica SOLO al block complementary_products dentro de product-info (no a la sección related-products del final). Decisión fija de Arturo: BORDES RECTOS. v2: flex 3-col (thumb | text-stack | botón AGREGAR pill). NO tocar price-list internals (rompe shadow DOM). ============================================================ */ /* 1. Forzar layout flex row en info (sobreescribe grid del theme) */ .product-info__block-item product-recommendations .horizontal-product-card__info { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; row-gap: 16px !important; column-gap: 16px !important; min-width: 0; } .product-info__block-item product-recommendations .horizontal-product-card__info > .v-stack { flex: 1 1 auto; min-width: 0; } .product-info__block-item product-recommendations .horizontal-product-card__info > product-form, .product-info__block-item product-recommendations .horizontal-product-card__info > quick-buy-modal, .product-info__block-item product-recommendations .horizontal-product-card__info > button { flex: 0 0 auto; } /* 2. Ocultar el botón duplicado del theme (renderiza dos para container queries narrow/large). Sirve para ambos casos: (a) producto 1 variant donde van dentro de
; (b) producto >1 variant donde van como siblings del info. Atacamos por class del segundo botón (.button.button--outline) y como fallback sibling. */ .product-info__block-item product-recommendations .horizontal-product-card__info button.button, .product-info__block-item product-recommendations .horizontal-product-card__info button + button { display: none !important; } /* 3. Botón AÑADIR — mismo estilo que ATC principal del PDP (granate #610027 sobre fondo granate, border-radius 4px, texto crema) */ .product-info__block-item product-recommendations .horizontal-product-card__info button { position: relative; display: inline-flex !important; align-items: center; justify-content: center; height: 36px; min-width: 96px; padding: 0 18px !important; background: rgb(97, 0, 39) !important; color: rgb(255, 252, 239) !important; border: 1px solid rgb(97, 0, 39) !important; border-radius: 4px !important; font-size: 0 !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; line-height: 1; box-shadow: none !important; overflow: hidden; } .product-info__block-item product-recommendations .horizontal-product-card__info button::after { display: none !important; content: none !important; } .product-info__block-item product-recommendations .horizontal-product-card__info button::before { content: 'AÑADIR' !important; display: inline-block !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 2px !important; color: rgb(255, 252, 239) !important; text-transform: uppercase; font-family: Assistant, sans-serif; } .product-info__block-item product-recommendations .horizontal-product-card__info button:hover { background: rgb(77, 0, 31) !important; border-color: rgb(77, 0, 31) !important; } /* 4. Title clamp a 2 líneas para que no rompa el layout */ .product-info__block-item product-recommendations .horizontal-product-card__info .product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; word-break: normal; } .product-info__block-item product-recommendations .complementary-products__header { justify-content: flex-start; margin-bottom: 12px; } .product-info__block-item product-recommendations .complementary-products__header .h5 { text-align: left !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 500 !important; font-size: 12px !important; line-height: 1.4 !important; } .product-info__block-item product-recommendations .horizontal-product-card { padding: 10px; border: 1px solid rgb(243, 243, 243); border-radius: 0; column-gap: 16px; margin-bottom: 0; } .product-info__block-item product-recommendations .horizontal-product-card__figure { flex: 0 0 64px; width: 64px !important; height: 77px !important; border-radius: 0; overflow: hidden; } .product-info__block-item product-recommendations .horizontal-product-card__image { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } @media (min-width: 1000px) { .product-info__block-item product-recommendations .horizontal-product-card__figure { flex: 0 0 68px; width: 68px !important; height: 82px !important; } .product-info__block-item product-recommendations .horizontal-product-card { column-gap: 24px; } } .product-info__block-item product-recommendations .horizontal-product-card__info .product-title { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.25; text-decoration: none; } .product-info__block-item product-recommendations .horizontal-product-card__info price-list, .product-info__block-item product-recommendations .horizontal-product-card__info .price-list { font-size: 12px; line-height: 1.5; margin: 0; } .product-info__block-item product-recommendations .complementary-products__product-list { display: flex; flex-direction: column; gap: 10px; } /* ============================================================ BLOQUE 11 — ATC button: uppercase + letra más grande Mismo registro visual que los chips de colección (CRUCES): uppercase + letter-spacing. Tamaño de letra subido a ~16px para que sea más prominente que el default Prestige. ============================================================ */ .buy-buttons .button { text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; }