/** Shopify CDN: Minification failed Line 446:2 Unexpected "{" Line 448:30 Expected identifier but found whitespace Line 448:32 Unexpected "{" Line 448:41 Expected ":" Line 448:82 Expected ":" Line 450:33 Expected identifier but found whitespace Line 450:35 Unexpected "{" Line 450:44 Expected ":" Line 450:88 Expected ":" Line 531:2 Unexpected "{" ... and 194 more hidden warnings **/ /* ========================================================= SANSARITA PRODUCT CARD — SHARED STYLES Extracted from the existing Sansarita Products card. ========================================================= */ /* ========================================================= CARD ========================================================= */ .sansarita-product-card { min-width: 0; } /* ========================================================= MEDIA SOLO ESTA ÁREA TIENE LA ANIMACIÓN. ========================================================= */ .sansarita-product-card__media { position: relative; width: 100%; overflow: hidden; border-radius: var(--spc-image-radius); isolation: isolate; /* * Evita pequeños artefactos de composición/antialiasing * en los bordes cuando termina la animación. */ contain: paint; background: #fff; } /* ========================================================= PRIMARY IMAGE ========================================================= */ .sansarita-product-card__image-link { position: relative; z-index: 1; display: block; width: 100%; overflow: hidden; } .sansarita-product-card__image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transform: scale(var(--spc-product-scale)); transform-origin: center center; } /* ========================================================= HOVER LAYER MUY IMPORTANTE: NO SE MUEVE. La imagen 2 está siempre exactamente en su lugar. El JS solamente cambia la máscara. ========================================================= */ .sansarita-product-card__hover-layer { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ========================================================= HOVER IMAGE La imagen ocupa TODO el cuadro. ========================================================= */ .sansarita-product-card__hover-image { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; /* * Composición en GPU para evitar líneas de 1px * provocadas por subpíxeles al terminar el clip-path. */ backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: clip-path, transform; transform: translate3d(0, 0, 0) scaleX(var(--spc-hover-width)) scaleY(var(--spc-hover-height)); transform-origin: center center; } .sansarita-product-card__hover-image-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= BUTTON CONTAINER Está encima de la imagen y NO está recortado. ========================================================= */ .sansarita-product-card__hover-content { position: absolute; left: var(--spc-button-margin-x); right: var(--spc-button-margin-x); bottom: var(--spc-button-margin-y); z-index: 10; display: flex; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 250ms cubic-bezier(.22, .61, .36, 1); } /* ========================================================= BUTTON APPEARS ON HOVER ========================================================= */ .sansarita-product-card:hover .sansarita-product-card__hover-content { opacity: 1; transform: translateY(0); } /* ========================================================= PRODUCT FORM ========================================================= */ .sansarita-product-card__product-form { display: block; width: var(--spc-button-width); max-width: calc( 100% - (var(--spc-button-margin-x) * 2) ); } .sansarita-product-card__product-form form { display: block; width: 100%; margin: 0; } /* ========================================================= BUTTON ========================================================= */ .sansarita-product-card__button { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: var(--spc-button-padding-y) var(--spc-button-padding-x); border: 0; border-radius: var(--spc-button-radius); background: var(--spc-button-bg); color: var(--spc-button-text); font: inherit; font-size: var(--spc-button-font-size); font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, .12); transition: transform 180ms ease, opacity 180ms ease; pointer-events: auto; } .sansarita-product-card__button:hover { transform: translateY(-2px); background: var(--spc-button-hover-bg); color: var(--spc-button-hover-text); } .sansarita-product-card__button:disabled { cursor: not-allowed; opacity: .6; } /* ========================================================= LOADING ========================================================= */ /* ========================================================= PRODUCT INFO FUERA DE LA ANIMACIÓN ========================================================= */ .sansarita-product-card__info { padding-top: 14px; } .sansarita-product-card__title { display: block; color: inherit; text-decoration: none; font-size: 16px; line-height: 1.3; } .sansarita-product-card__price { margin-top: 6px; font-size: 14px; opacity: .7; } /* ========================================================= MOBILE / TABLET ADD TO CART ========================================================= */ .sansarita-product-card__mobile-add { display: none; } @media screen and (max-width: 989px) { .sansarita-product-card__mobile-add .sansarita-product-card__button { box-shadow: none; } .sansarita-product-card__mobile-add { display: block; width: 100%; margin-top: 14px; } .sansarita-product-card__mobile-add .sansarita-product-card__product-form { width: var(--spc-button-width); max-width: calc( 100% - (var(--spc-button-margin-x) * 2) ); margin-left: auto; margin-right: auto; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { { --spc-section-padding-top: {{ section.settings.section_padding_top_mobile }}px; --spc-section-padding-bottom: {{ section.settings.section_padding_bottom_mobile }}px; } .sansarita-product-collection__grid { grid-template-columns: repeat( var(--spc-columns-mobile), minmax(0, 1fr) ); } /* ======================================================= MOBILE CAROUSEL ======================================================= */ .sansarita-product-collection__grid--carousel { display: flex; overflow-x: auto; overflow-y: hidden; gap: var(--spc-gap); scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sansarita-product-collection__grid--carousel::-webkit-scrollbar { display: none; } .sansarita-product-collection__grid--carousel .sansarita-product-card { flex: 0 0 calc( ( 100% - var(--spc-gap) * (var(--spc-columns-mobile) - 1) ) / var(--spc-columns-mobile) ); scroll-snap-align: start; } } /* ========================================================= BUTTON VARIABLES — RESPONSIVE / TABLET ========================================================= */ @media screen and (min-width: 750px) and (max-width: 989px) { { --spc-button-width: {{ section.settings.button_width_responsive | divided_by: 100.0 }}; --spc-button-radius: {{ section.settings.button_radius_responsive }}px; --spc-button-margin-x: {{ section.settings.button_margin_x_responsive }}px; --spc-button-margin-y: {{ section.settings.button_margin_y_responsive }}px; --spc-button-padding-x: {{ section.settings.button_padding_x_responsive }}px; --spc-button-padding-y: {{ section.settings.button_padding_y_responsive }}px; --spc-button-font-size: {{ section.settings.button_font_size_responsive }}px; --spc-button-bg: {{ section.settings.button_bg_responsive }}; --spc-button-text: {{ section.settings.button_text_color_responsive }}; --spc-button-hover-bg: {{ section.settings.button_hover_bg_responsive }}; --spc-button-hover-text: {{ section.settings.button_hover_text_responsive }}; } } /* ========================================================= BUTTON VARIABLES — MOBILE PORTRAIT ========================================================= */ @media screen and (max-width: 749px) and (orientation: portrait) { { --spc-heading-font-size: {{ section.settings.heading_font_size_portrait }}px; --spc-heading-margin-bottom: {{ section.settings.heading_margin_bottom_portrait }}px; --spc-heading-letter-spacing: {{ section.settings.heading_letter_spacing_portrait }}px; --spc-heading-line-height: {{ section.settings.heading_line_height_portrait }}px; /* El valor del editor se aplica directamente al título y al header. */ .sansarita-product-collection__heading { font-size: {{ section.settings.heading_font_size_portrait }}px !important; line-height: {{ section.settings.heading_line_height_portrait }}px !important; letter-spacing: {{ section.settings.heading_letter_spacing_portrait }}px !important; } .sansarita-product-collection__header { margin-bottom: {{ section.settings.heading_margin_bottom_portrait }}px !important; } /* Tamaño visual del frasco sólo en Portrait. No modifica Desktop ni Landscape. */ --spc-product-scale: {{ section.settings.product_scale_mobile_portrait | divided_by: 100.0 }}; --spc-button-width: {{ section.settings.button_width_mobile_portrait | divided_by: 100.0 }}; --spc-button-radius: {{ section.settings.button_radius_mobile_portrait }}px; --spc-button-margin-x: {{ section.settings.button_margin_x_mobile_portrait }}px; --spc-button-margin-y: {{ section.settings.button_margin_y_mobile_portrait }}px; --spc-button-padding-x: {{ section.settings.button_padding_x_mobile_portrait }}px; --spc-button-padding-y: {{ section.settings.button_padding_y_mobile_portrait }}px; --spc-button-font-size: {{ section.settings.button_font_size_mobile_portrait }}px; --spc-button-bg: {{ section.settings.button_bg_mobile_portrait }}; --spc-button-text: {{ section.settings.button_text_color_mobile_portrait }}; --spc-button-hover-bg: {{ section.settings.button_hover_bg_mobile_portrait }}; --spc-button-hover-text: {{ section.settings.button_hover_text_mobile_portrait }}; } /* * PORTRAIT — aplicar el valor directamente al elemento IMG. * Esto evita que otra regla del tema reemplace la variable * y garantiza que el control del editor tenga efecto real. */ .sansarita-product-card__image { transform: scale({{ section.settings.product_scale_mobile_portrait | divided_by: 100.0 }}) !important; transform-origin: center center; } } /* ========================================================= BUTTON VARIABLES — MOBILE LANDSCAPE ========================================================= */ @media (orientation: landscape) and (hover: none), (orientation: landscape) and (pointer: coarse) { { /* * LANDSCAPE * * La tarjeta conserva el flujo natural de Dawn: * imagen 1:1 → nombre → precio → botón. * * El tamaño del frasco se controla únicamente mediante * el mismo mecanismo de scale, sin cambiar el tamaño * del contenedor ni mover la información. */ --spc-product-scale: {{ section.settings.product_scale_mobile_landscape | divided_by: 100.0 }}; --spc-button-width: {{ section.settings.button_width_mobile_landscape | divided_by: 100.0 }}; --spc-button-radius: {{ section.settings.button_radius_mobile_landscape }}px; --spc-button-margin-x: {{ section.settings.button_margin_x_mobile_landscape }}px; --spc-button-margin-y: {{ section.settings.button_margin_y_mobile_landscape }}px; --spc-button-padding-x: {{ section.settings.button_padding_x_mobile_landscape }}px; --spc-button-padding-y: {{ section.settings.button_padding_y_mobile_landscape }}px; --spc-button-font-size: {{ section.settings.button_font_size_mobile_landscape }}px; --spc-button-bg: {{ section.settings.button_bg_mobile_landscape }}; --spc-button-text: {{ section.settings.button_text_color_mobile_landscape }}; --spc-button-hover-bg: {{ section.settings.button_hover_bg_mobile_landscape }}; --spc-button-hover-text: {{ section.settings.button_hover_text_mobile_landscape }}; } } /* ========================================================= LANDSCAPE — DAWN-LIKE PRODUCT / INFO FLOW El espacio no se corrige moviendo el bloque de información hacia arriba, porque eso puede ocultar el título detrás del área de imagen. En su lugar: 1. El producto se escala desde la parte inferior. 2. La base visual del producto queda alineada con la base del área de imagen. 3. El título permanece dentro del flujo normal. 4. El espacio final se controla con padding-top. ========================================================= */ @media (orientation: landscape) and (hover: none), (orientation: landscape) and (pointer: coarse) { { --spc-heading-font-size: {{ section.settings.heading_font_size_landscape }}px; --spc-heading-margin-bottom: {{ section.settings.heading_margin_bottom_landscape }}px; --spc-heading-letter-spacing: {{ section.settings.heading_letter_spacing_landscape }}px; --spc-heading-line-height: {{ section.settings.heading_line_height_landscape }}px; .sansarita-product-collection__heading { font-size: {{ section.settings.heading_font_size_landscape }}px !important; line-height: {{ section.settings.heading_line_height_landscape }}px !important; letter-spacing: {{ section.settings.heading_letter_spacing_landscape }}px !important; } .sansarita-product-collection__header { margin-bottom: {{ section.settings.heading_margin_bottom_landscape }}px !important; } } .sansarita-product-card__image { transform-origin: center bottom; } .sansarita-product-card__info { margin-top: 0; padding-top: {{ section.settings.landscape_info_padding }}px; } } /* ========================================================= BUTTON RESPONSIVE BEHAVIOR ========================================================= */ /* * Los valores de width, radio, márgenes, padding y tipografía * se cambian mediante variables CSS por breakpoint. */ /* ========================================================= TOUCH DEVICES ========================================================= */ @media (hover: none) and (pointer: coarse) { .sansarita-product-card__mobile-add .sansarita-product-card__button:hover { transform: none; background: var(--spc-button-bg); color: var(--spc-button-text); } .sansarita-product-card__hover-layer { display: none; } .sansarita-product-card__hover-content { display: none; opacity: 0; pointer-events: none; } .sansarita-product-card:hover .sansarita-product-card__hover-content { opacity: 0; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .sansarita-product-card__hover-content, .sansarita-product-card__button { transition: none !important; } }