/** Shopify CDN: Minification failed Line 942:3 Unexpected "=" **/ /* ============================================================ ROLLERMAG · REFACTOR RESPONSIVE PREMIUM Sobrescribe limitaciones del theme Tinker con tokens fluidos. Cargar SIEMPRE al final del para que tenga prioridad. ============================================================ */ /* ============================================================ 1. DESIGN TOKENS FLUIDOS ============================================================ */ :root { /* Marca */ --rm-orange: #E85C00; --rm-orange-bright: #F05A00; --rm-orange-soft: #FF7A1F; --rm-black: #0A0A0A; --rm-gray-950: #111111; --rm-gray-900: #171717; --rm-gray-800: #262626; --rm-gray-700: #404040; --rm-gray-500: #737373; --rm-gray-300: #d4d4d4; --rm-gray-100: #f5f5f5; --rm-gray-50: #fafafa; --rm-white: #ffffff; /* Containers fluidos — aprovecha pantallas grandes */ --rm-container-wide: min(1800px, 94vw); --rm-container: min(1440px, 92vw); --rm-container-narrow: min(1200px, 88vw); --rm-container-text: min(720px, 88vw); /* Spacing fluido — escala orgánicamente entre mobile y desktop */ --rm-space-3xs: clamp(0.25rem, 0.5vw, 0.375rem); --rm-space-2xs: clamp(0.375rem, 0.8vw, 0.625rem); --rm-space-xs: clamp(0.5rem, 1vw, 0.875rem); --rm-space-sm: clamp(0.875rem, 1.6vw, 1.25rem); --rm-space-md: clamp(1.25rem, 2.5vw, 2rem); --rm-space-lg: clamp(2rem, 4vw, 3.5rem); --rm-space-xl: clamp(3rem, 6vw, 5.5rem); --rm-space-2xl: clamp(4rem, 8vw, 8rem); --rm-space-3xl: clamp(5rem, 10vw, 10rem); /* Tipografía fluida (mobile-first, escala con viewport) */ --rm-text-xs: clamp(0.75rem, 0.5vw + 0.65rem, 0.875rem); --rm-text-sm: clamp(0.875rem, 0.6vw + 0.75rem, 1rem); --rm-text-base: clamp(1rem, 0.5vw + 0.9rem, 1.125rem); --rm-text-lg: clamp(1.125rem, 0.8vw + 0.95rem, 1.375rem); --rm-text-xl: clamp(1.25rem, 1vw + 1rem, 1.625rem); --rm-text-2xl: clamp(1.5rem, 1.5vw + 1.1rem, 2.125rem); --rm-text-3xl: clamp(1.875rem, 2.5vw + 1.2rem, 3rem); --rm-text-4xl: clamp(2.25rem, 4vw + 1.2rem, 4rem); --rm-text-5xl: clamp(2.75rem, 6vw + 1rem, 5.5rem); --rm-text-hero: clamp(2.5rem, 7vw + 0.5rem, 6.5rem); /* Line-heights premium */ --rm-lh-tight: 1.05; --rm-lh-snug: 1.2; --rm-lh-normal: 1.5; --rm-lh-relaxed: 1.7; /* Letter spacing */ --rm-ls-tight: -0.02em; --rm-ls-tighter: -0.035em; --rm-ls-wide: 0.05em; --rm-ls-wider: 0.12em; /* Bordes y radios */ --rm-radius-sm: 0.375rem; --rm-radius-md: 0.625rem; --rm-radius-lg: 1rem; --rm-radius-xl: 1.5rem; --rm-radius-2xl: 2rem; /* Sombras premium (sutiles, capa única) */ --rm-shadow-sm: 0 1px 2px rgba(10,10,10,0.04), 0 1px 3px rgba(10,10,10,0.06); --rm-shadow-md: 0 4px 12px rgba(10,10,10,0.06), 0 2px 4px rgba(10,10,10,0.04); --rm-shadow-lg: 0 12px 32px rgba(10,10,10,0.08), 0 4px 8px rgba(10,10,10,0.04); --rm-shadow-xl: 0 24px 48px rgba(10,10,10,0.12), 0 8px 16px rgba(10,10,10,0.06); --rm-shadow-glow: 0 0 0 1px rgba(232,92,0,0.1), 0 8px 24px rgba(232,92,0,0.18); /* Transitions */ --rm-ease: cubic-bezier(0.22, 1, 0.36, 1); --rm-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rm-duration: 280ms; --rm-duration-slow: 480ms; /* Heights de banner responsivos (clave para resolver banners cortados) */ --rm-hero-height: clamp(28rem, 75vh, 52rem); --rm-hero-height-tall: clamp(32rem, 90vh, 60rem); --rm-banner-height: clamp(20rem, 50vh, 36rem); --rm-banner-height-sm: clamp(14rem, 36vh, 24rem); } /* ============================================================ 2. RESET DE CONTENEDORES RÍGIDOS DEL THEME Sobrescribe max-widths fijos de Tinker para usar fluidos ============================================================ */ /* Page width override para aprovechar pantallas grandes */ .page-width, .page-width--narrow, .page-width--medium, .shopify-section .page-width, .container, .shopify-section > .container { max-width: var(--rm-container) !important; padding-inline: clamp(1rem, 4vw, 2.5rem) !important; margin-inline: auto !important; width: 100%; } /* Sections que deben ir full-width (banners, hero) */ .rm-full, .shopify-section--full-width, .section--full-width { max-width: 100% !important; width: 100%; padding-inline: 0 !important; } /* Spacing vertical fluido entre secciones (sobrescribe paddings rígidos) */ .shopify-section { padding-block: 0; } .shopify-section + .shopify-section { /* margen orgánico entre secciones */ } /* ============================================================ 3. TIPOGRAFÍA RESPONSIVE PREMIUM ============================================================ */ body { font-feature-settings: 'ss01', 'cv01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, .h1, h1 *, .shopify-section h1 { font-size: var(--rm-text-5xl) !important; line-height: var(--rm-lh-tight) !important; letter-spacing: var(--rm-ls-tighter) !important; font-weight: 700; } h2, .h2, .shopify-section h2 { font-size: var(--rm-text-4xl) !important; line-height: var(--rm-lh-snug) !important; letter-spacing: var(--rm-ls-tight) !important; font-weight: 600; } h3, .h3, .shopify-section h3 { font-size: var(--rm-text-2xl) !important; line-height: var(--rm-lh-snug) !important; letter-spacing: var(--rm-ls-tight) !important; } h4, .h4 { font-size: var(--rm-text-xl) !important; line-height: var(--rm-lh-snug) !important; } p, li, .body, [class*="rte"] p { font-size: var(--rm-text-base); line-height: var(--rm-lh-relaxed); color: var(--rm-gray-700); } /* Eyebrow/caps premium */ .rm-eyebrow { font-size: var(--rm-text-xs); font-weight: 600; letter-spacing: var(--rm-ls-wider); text-transform: uppercase; color: var(--rm-orange); display: inline-flex; align-items: center; gap: 0.5em; } .rm-eyebrow::before { content: ''; width: 1.5em; height: 1px; background: currentColor; } /* ============================================================ 4. HERO BANNER — FULL-WIDTH FLUIDO Resuelve: banners cortados, sin escalado proporcional, sin foco ============================================================ */ .rm-hero { position: relative; width: 100%; min-height: var(--rm-hero-height); display: grid; place-items: center; overflow: hidden; isolation: isolate; background: var(--rm-black); } .rm-hero__media { position: absolute; inset: 0; z-index: -2; } .rm-hero__media img, .rm-hero__media picture, .rm-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Overlay gradient premium (no plano, con dirección) */ .rm-hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 105deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.25) 70%, rgba(10,10,10,0.45) 100% ), radial-gradient( ellipse at 20% 50%, rgba(232,92,0,0.15) 0%, transparent 50% ); } .rm-hero__inner { position: relative; width: 100%; max-width: var(--rm-container); padding-inline: clamp(1.25rem, 5vw, 3rem); padding-block: clamp(3rem, 10vh, 6rem); display: grid; gap: var(--rm-space-md); color: var(--rm-white); } .rm-hero__eyebrow { font-size: var(--rm-text-xs); font-weight: 600; letter-spacing: var(--rm-ls-wider); text-transform: uppercase; color: var(--rm-orange-soft); display: inline-flex; align-items: center; gap: 0.6em; margin: 0; } .rm-hero__eyebrow::before { content: '●'; font-size: 0.6em; color: var(--rm-orange); filter: drop-shadow(0 0 8px var(--rm-orange)); } .rm-hero__title { font-size: var(--rm-text-hero) !important; line-height: 0.98 !important; letter-spacing: -0.04em !important; font-weight: 700; max-width: 18ch; margin: 0; } .rm-hero__title em { font-style: italic; font-weight: 300; color: var(--rm-orange-soft); } .rm-hero__description { font-size: var(--rm-text-lg); line-height: var(--rm-lh-normal); max-width: 52ch; color: rgba(255,255,255,0.85); margin: 0; } .rm-hero__cta { display: flex; flex-wrap: wrap; gap: var(--rm-space-sm); margin-top: var(--rm-space-sm); } /* Stats en el hero (los +6 / 2 / <2h / 32+) */ .rm-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--rm-space-md); margin-top: var(--rm-space-lg); padding-top: var(--rm-space-lg); border-top: 1px solid rgba(255,255,255,0.15); } .rm-hero__stat { display: grid; gap: 0.25rem; } .rm-hero__stat-number { font-size: var(--rm-text-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--rm-orange-soft); } .rm-hero__stat-label { font-size: var(--rm-text-xs); letter-spacing: var(--rm-ls-wide); text-transform: uppercase; color: rgba(255,255,255,0.7); } /* ============================================================ 5. BOTONES PREMIUM ============================================================ */ .rm-btn, .shopify-section .button, .shopify-section .btn, .shopify-section button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: clamp(0.75rem, 1.5vw, 1.05rem) clamp(1.5rem, 3vw, 2.25rem); font-size: var(--rm-text-sm); font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--rm-duration) var(--rm-ease); white-space: nowrap; } .rm-btn--primary { background: var(--rm-orange); color: var(--rm-white); box-shadow: var(--rm-shadow-glow); } .rm-btn--primary:hover { background: var(--rm-orange-bright); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(232,92,0,0.2), 0 16px 32px rgba(232,92,0,0.3); } .rm-btn--ghost { background: rgba(255,255,255,0.08); color: var(--rm-white); border-color: rgba(255,255,255,0.25); backdrop-filter: blur(8px); } .rm-btn--ghost:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); } .rm-btn--dark { background: var(--rm-black); color: var(--rm-white); } .rm-btn--dark:hover { background: var(--rm-gray-800); transform: translateY(-2px); } /* ============================================================ 6. GRIDS DE PRODUCTOS — FLUIDOS Resuelve: cards estrechas, columnas fijas, mal aprovechamiento ============================================================ */ .rm-product-grid, .shopify-section .product-grid, .shopify-section .collection-grid, .shopify-section [class*="grid--"] { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important; gap: clamp(1rem, 2.5vw, 2rem) !important; width: 100%; } /* En pantallas chicas, 2 columnas mínimo para no perder densidad */ @media (max-width: 640px) { .rm-product-grid, .shopify-section .product-grid, .shopify-section .collection-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem !important; } } /* Cards de producto premium */ .rm-product-card, .product-card, .card-wrapper, .shopify-section .card { position: relative; display: grid; gap: var(--rm-space-xs); background: var(--rm-white); border-radius: var(--rm-radius-lg); overflow: hidden; transition: transform var(--rm-duration) var(--rm-ease), box-shadow var(--rm-duration) var(--rm-ease); } .rm-product-card:hover, .product-card:hover, .card-wrapper:hover { transform: translateY(-4px); box-shadow: var(--rm-shadow-lg); } .rm-product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rm-gray-100); } .rm-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rm-duration-slow) var(--rm-ease); } .rm-product-card:hover .rm-product-card__media img { transform: scale(1.05); } .rm-product-card__body { padding: var(--rm-space-sm); display: grid; gap: 0.375rem; } .rm-product-card__title { font-size: var(--rm-text-base); font-weight: 600; color: var(--rm-black); line-height: 1.3; margin: 0; } .rm-product-card__price { font-size: var(--rm-text-base); font-weight: 700; color: var(--rm-orange); } /* ============================================================ 7. SECCIONES TIPO "PROCESO" / "VENTAJAS" — Grids fluidos ============================================================ */ .rm-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); width: 100%; } .rm-feature-card { padding: var(--rm-space-md); border-radius: var(--rm-radius-lg); background: var(--rm-white); border: 1px solid var(--rm-gray-100); display: grid; gap: var(--rm-space-xs); transition: all var(--rm-duration) var(--rm-ease); } .rm-feature-card:hover { border-color: var(--rm-orange); transform: translateY(-3px); box-shadow: var(--rm-shadow-md); } .rm-feature-card__step { font-size: var(--rm-text-xs); font-weight: 700; color: var(--rm-orange); letter-spacing: var(--rm-ls-wider); } .rm-feature-card__icon { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--rm-space-2xs); line-height: 1; } .rm-feature-card__title { font-size: var(--rm-text-lg); font-weight: 600; color: var(--rm-black); margin: 0; } .rm-feature-card__description { font-size: var(--rm-text-sm); line-height: var(--rm-lh-normal); color: var(--rm-gray-700); margin: 0; } /* ============================================================ 8. SECCIÓN GENÉRICA (wrappers que dan padding consistente) ============================================================ */ .rm-section { padding-block: var(--rm-space-2xl); width: 100%; } .rm-section--sm { padding-block: var(--rm-space-xl); } .rm-section--lg { padding-block: var(--rm-space-3xl); } .rm-section--dark { background: var(--rm-black); color: var(--rm-white); } .rm-section--dark h1, .rm-section--dark h2, .rm-section--dark h3 { color: var(--rm-white); } .rm-section--dark p { color: rgba(255,255,255,0.75); } .rm-section__inner { max-width: var(--rm-container); padding-inline: clamp(1rem, 4vw, 2.5rem); margin-inline: auto; width: 100%; } .rm-section__header { display: grid; gap: var(--rm-space-sm); margin-bottom: var(--rm-space-lg); max-width: 60ch; } .rm-section__title { font-size: var(--rm-text-4xl); line-height: var(--rm-lh-tight); letter-spacing: var(--rm-ls-tight); font-weight: 700; color: var(--rm-black); margin: 0; } .rm-section__title em { font-style: italic; font-weight: 300; color: var(--rm-orange); } .rm-section__lead { font-size: var(--rm-text-lg); line-height: var(--rm-lh-normal); color: var(--rm-gray-700); max-width: 56ch; margin: 0; } /* ============================================================ 9. BANNER PROMOCIONAL — Imagen separada mobile/desktop Resuelve la queja documentada del theme Tinker ============================================================ */ .rm-promo-banner { position: relative; width: 100%; min-height: var(--rm-banner-height); display: grid; place-items: center; overflow: hidden; isolation: isolate; border-radius: 0; } .rm-promo-banner picture, .rm-promo-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .rm-promo-banner__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.4) 60%, rgba(10,10,10,0.2) 100% ); } .rm-promo-banner__content { position: relative; max-width: var(--rm-container); width: 100%; padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem); color: var(--rm-white); display: grid; gap: var(--rm-space-sm); } .rm-promo-banner__title { font-size: var(--rm-text-4xl) !important; line-height: var(--rm-lh-tight) !important; font-weight: 700; margin: 0; max-width: 16ch; } /* ============================================================ 10. HEADER — Sticky premium, logo responsive, navegación ============================================================ */ .shopify-section-header, .section-header, header.header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(0,0,0,0.06); transition: background var(--rm-duration) var(--rm-ease); } /* Logo: que escale, no que sea fijo a 800px */ .header__heading-logo, .header__logo img, .shopify-section-header img.logo { width: auto !important; height: clamp(2rem, 4vw, 3rem) !important; max-width: 100%; object-fit: contain; } /* ============================================================ 11. MENÚ MOBILE — Tamaño táctil, spacing, jerarquía ============================================================ */ @media (max-width: 990px) { /* Items del menú: tamaño táctil mínimo 48px */ .menu-drawer__menu-item, .mobile-nav__link, .header__menu-item, nav.mobile-menu a { min-height: 48px !important; display: flex !important; align-items: center; padding: var(--rm-space-sm) var(--rm-space-md) !important; font-size: var(--rm-text-base) !important; font-weight: 500; letter-spacing: -0.01em; border-bottom: 1px solid var(--rm-gray-100); transition: background var(--rm-duration) var(--rm-ease); } .menu-drawer__menu-item:active, .mobile-nav__link:active { background: var(--rm-gray-50); } /* Menú drawer fluido */ .menu-drawer, .mobile-nav-wrapper { width: min(380px, 92vw) !important; max-width: 100%; } } /* ============================================================ 12. FOOTER — Spacing y grid responsivos ============================================================ */ .shopify-section-footer, footer.footer, .footer { padding-block: var(--rm-space-2xl) var(--rm-space-lg) !important; } .footer__content, .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--rm-space-lg) !important; max-width: var(--rm-container); padding-inline: clamp(1rem, 4vw, 2.5rem); margin-inline: auto; } .footer h4, .footer__heading { font-size: var(--rm-text-sm) !important; letter-spacing: var(--rm-ls-wider); text-transform: uppercase; color: var(--rm-gray-500); margin-bottom: var(--rm-space-sm); } /* ============================================================ 13. IMÁGENES RESPONSIVE — Lazy + CLS prevention ============================================================ */ img { max-width: 100%; height: auto; display: block; } /* Reservar espacio para imágenes con aspect-ratio (anti-CLS) */ .rm-image-wrap { position: relative; width: 100%; overflow: hidden; } .rm-image-wrap img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .rm-aspect-square { aspect-ratio: 1 / 1; } .rm-aspect-4-5 { aspect-ratio: 4 / 5; } .rm-aspect-3-2 { aspect-ratio: 3 / 2; } .rm-aspect-16-9 { aspect-ratio: 16 / 9; } .rm-aspect-21-9 { aspect-ratio: 21 / 9; } /* ============================================================ 14. UTILIDADES PREMIUM ============================================================ */ .rm-stack { display: grid; gap: var(--rm-space-md); } .rm-stack--sm { gap: var(--rm-space-sm); } .rm-stack--lg { gap: var(--rm-space-lg); } .rm-cluster { display: flex; flex-wrap: wrap; gap: var(--rm-space-sm); align-items: center; } .rm-center { display: grid; place-items: center; } /* Texto que se pone en italic + naranja como en el sitio */ .rm-accent { font-style: italic; font-weight: 300; color: var(--rm-orange); } /* Ocultar visualmente pero mantener accesible */ .rm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Show/hide responsive */ @media (max-width: 749px) { .rm-hide-mobile { display: none !important; } } @media (min-width: 750px) { .rm-hide-desktop { display: none !important; } } /* ============================================================ 15. PERFORMANCE — Reducir motion para usuarios sensibles ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 16. BREAKPOINTS PROFESIONALES — Ajustes finos por dispositivo ============================================================ */ /* Mobile pequeño (iPhone SE, etc) */ @media (max-width: 374px) { :root { --rm-container: 96vw; } .rm-hero__title { font-size: clamp(2rem, 9vw, 2.75rem) !important; } } /* Tablet portrait (iPad) — el rango que hoy "parece desktop encogido" */ @media (min-width: 750px) and (max-width: 1024px) { :root { --rm-container: 92vw; } .rm-hero { min-height: clamp(32rem, 70vh, 44rem); } .rm-product-grid { grid-template-columns: repeat(3, 1fr) !important; } .rm-feature-grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop estándar */ @media (min-width: 1025px) and (max-width: 1599px) { :root { --rm-container: min(1440px, 90vw); } } /* Pantallas grandes (2K) */ @media (min-width: 1600px) and (max-width: 2199px) { :root { --rm-container: min(1680px, 88vw); --rm-container-wide: min(1920px, 92vw); } } /* Ultrawide / 4K */ @media (min-width: 2200px) { :root { --rm-container: min(1920px, 80vw); --rm-container-wide: min(2200px, 85vw); --rm-text-hero: clamp(5rem, 7vw, 8rem); } .rm-product-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)) !important; } } /* ============================================================ 17. FIX ESPECÍFICOS DETECTADOS EN ROLLERMAG.CL ============================================================ */ /* Marquee de productos duplicado: limitar height y mejorar scroll */ .rm-marquee, [class*="marquee"], [class*="ticker"] { overflow: hidden; width: 100%; padding-block: var(--rm-space-sm); } /* Bloques custom-liquid del home: forzar fluid */ .shopify-section [class*="custom-liquid"] > *, .shopify-section .rich-text__wrapper { max-width: var(--rm-container) !important; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); width: 100%; } /* Mapa embebido: que sea responsive y mantenga aspecto */ .rm-map-wrap, iframe[src*="google.com/maps"] { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; min-height: 320px; border-radius: var(--rm-radius-lg); border: 0; } /* Botón flotante de WhatsApp (si existe) */ .rm-whatsapp-float, a[href*="wa.me"].floating { position: fixed; bottom: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 90; width: clamp(3.25rem, 5vw, 4rem); height: clamp(3.25rem, 5vw, 4rem); border-radius: 50%; background: #25D366; color: white; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37,211,102,0.4); transition: transform var(--rm-duration) var(--rm-ease); } .rm-whatsapp-float:hover { transform: scale(1.08); } Si necesitas más overrides, agregar al FINAL del archivo ============================================================ */ /* ===================================================== ROLLERMAG CART - RESTYLING COMPLETO ===================================================== */ /* --- 1. Ocultar elementos del producto fantasma --- */ .quantity-selector, .cart-items__unit-price-wrapper, .section-resource-list, .cart-title span:not(:first-child) { display: none !important; } /* --- 2. Fondo y tipografía general --- */ body:has(.cart-page) { background: var(--rm-black) !important; color: var(--rm-white) !important; font-family: 'Inter', -apple-system, sans-serif !important; } .cart-page, .cart-page * { font-family: 'Inter', -apple-system, sans-serif !important; } /* --- 3. Layout principal --- */ .cart-page { background: var(--rm-black); color: var(--rm-white); max-width: 1200px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 900px) { .cart-page { grid-template-columns: 2fr 1fr; align-items: start; } .cart-page__title { grid-column: 1 / -1; } } /* --- 4. Título "Cart" → "Mi carrito" naranja --- */ .cart-page__title, .cart-title { color: var(--rm-orange) !important; font-weight: 900 !important; font-size: clamp(2rem, 5vw, 3rem) !important; letter-spacing: -0.02em !important; margin-bottom: 1.5rem !important; text-transform: uppercase !important; } .cart-title { font-size: 0 !important; } .cart-title::before { content: "Mi carrito"; color: var(--rm-orange); font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; text-transform: uppercase; } /* --- 5. Tarjeta del producto --- */ .cart-page__items, .cart-items { background: #171717; border: 1px solid #262626; border-radius: 16px; padding: clamp(1rem, 3vw, 2rem); } .cart-items__table-row, tr.cart-items__table-row { background: transparent !important; } .cart-items__details { color: var(--rm-white) !important; } .cart-items__details a, .cart-items__details .h5, .cart-items__details h3 { color: var(--rm-white) !important; font-weight: 700 !important; font-size: 1.125rem !important; } /* --- 6. Properties (Tipo, Ancho, etc.) --- */ .cart-items__properties { margin-top: 0.75rem !important; padding-top: 0.75rem !important; border-top: 1px solid #262626; } .cart-items__property { color: #d4d4d4 !important; font-size: 0.875rem !important; padding: 0.125rem 0 !important; } .cart-items__property dt { color: var(--rm-orange) !important; font-weight: 600 !important; } /* --- 7. Precio del item --- */ .cart-items__price, .cart-items__details .price, .cart-items__details [class*="price"] { color: var(--rm-orange) !important; font-weight: 800 !important; font-size: 1.25rem !important; } /* --- 8. Panel resumen --- */ .cart-page__summary { background: #171717 !important; border: 1px solid var(--rm-orange) !important; border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem) !important; position: sticky; top: 100px; } .cart-page__summary, .cart-page__summary * { color: var(--rm-white) !important; } .cart-page__summary [class*="total"], .cart-page__summary [class*="subtotal"] { font-weight: 700 !important; } .cart-page__summary .price, .cart-page__summary [class*="price"] { color: var(--rm-orange) !important; font-size: 1.5rem !important; font-weight: 900 !important; } /* --- 9. Botón Check out estilo Rollermag --- */ .cart__checkout-button, button[name="checkout"] { background: linear-gradient(135deg, #FF6B1A 0%, #E85C00 50%, #FF8C42 100%) !important; color: white !important; border: 2px solid #FFB890 !important; border-radius: 10px !important; padding: 16px 24px !important; font-size: 16px !important; font-weight: 900 !important; letter-spacing: 3px !important; text-transform: uppercase !important; width: 100% !important; margin-top: 1rem !important; cursor: pointer !important; box-shadow: 0 6px 20px rgba(232, 92, 0, 0.5) !important; transition: transform 0.15s, box-shadow 0.3s !important; } .cart__checkout-button:hover, button[name="checkout"]:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 12px 32px rgba(232, 92, 0, 0.6) !important; } /* --- 10. Input de descuento --- */ .cart-page__summary input { background: var(--rm-black) !important; color: var(--rm-white) !important; border: 1px solid #404040 !important; border-radius: 8px !important; padding: 10px 14px !important; } /* --- 11. Notas pequeñas del summary --- */ .cart-page__summary small, .cart-page__summary [class*="note"], .cart-page__summary [class*="caption"] { color: #a3a3a3 !important; font-size: 0.75rem !important; } /* === FIXES POST-IMPLEMENTACION === */ .cart-page { max-width: 1200px !important; width: 100% !important; min-width: 0 !important; padding: 2rem 1rem !important; box-sizing: border-box !important; } .cart-page__title { font-size: 0 !important; line-height: 0 !important; margin-bottom: 1.5rem !important; } .cart-page__title::before { content: "" !important; display: block !important; color: var(--rm-orange) !important; font-weight: 900 !important; font-size: clamp(2rem, 5vw, 3rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; } .cart-title { display: none !important; } .cart-page__summary { grid-row: auto !important; grid-column: 2 !important; } .cart-page__title { grid-column: 1 !important; grid-row: 1 !important; } .cart-page__items { grid-column: 1 !important; grid-row: 1 !important; } .cart-items__details > div:has(> .price__regular), .price__regular, [class*="product-price"]:not(.cart-items__price) { display: none !important; } .quantity-selector-wrapper, .quantity-selector, cart-quantity-selector-component, input[name="updates[]"] { display: none !important; } .cart-items__unit-price-wrapper { display: none !important; visibility: hidden !important; } product-price { display: none !important; } /* ============================================ ROLLERMAG CART v2 — Override final ============================================ */ /* Reset del título viejo + nuevo "TU CARRITO" con ícono */ body.template-cart .cart-page__title { font-size: 0 !important; display: flex !important; align-items: center !important; gap: 16px !important; padding-left: 0 !important; } body.template-cart .cart-page__title::before { content: "" !important; display: inline-block !important; width: 44px !important; height: 44px !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; flex-shrink: 0 !important; font-size: 0 !important; color: transparent !important; } body.template-cart .cart-page__title::after { content: "TU CARRITO" !important; font-size: clamp(2rem, 5vw, 3rem) !important; font-weight: 900 !important; color: var(--rm-orange) !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; line-height: 1.1 !important; } /* Fondo negro full página */ body.template-cart { background: var(--rm-black) !important; } body.template-cart #MainContent, body.template-cart main, body.template-cart .shopify-section, body.template-cart .page, body.template-cart .page-width, body.template-cart .cart-page, body.template-cart .cart-page__wrapper { background: var(--rm-black) !important; } /* Header negro */ body.template-cart .header, body.template-cart .shopify-section--header, body.template-cart header, body.template-cart .header-wrapper, body.template-cart #shopify-section-header { background: var(--rm-black) !important; border-bottom: 1px solid rgba(232, 92, 0, 0.15) !important; } body.template-cart .header a, body.template-cart .header__menu a, body.template-cart .header nav a { color: var(--rm-white) !important; } body.template-cart .header a:hover { color: var(--rm-orange) !important; } body.template-cart .header svg, body.template-cart .header button svg { color: var(--rm-white) !important; stroke: var(--rm-white) !important; } /* Footer negro */ body.template-cart .footer, body.template-cart .shopify-section--footer, body.template-cart footer, body.template-cart #shopify-section-footer { background: var(--rm-black) !important; border-top: 1px solid rgba(232, 92, 0, 0.15) !important; } body.template-cart .footer, body.template-cart .footer * { color: var(--rm-white) !important; } body.template-cart .footer a:hover { color: var(--rm-orange) !important; } /* Título TU CARRITO con ícono - HTML estático desde main-cart.liquid */ body.template-cart .cart-page__title { font-size: 0 !important; display: flex !important; align-items: center !important; gap: 16px !important; padding: 0 !important; margin-bottom: 1.5rem !important; } body.template-cart .cart-page__title svg { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; display: block !important; } body.template-cart .cart-page__title span { font-size: clamp(2rem, 5vw, 3rem) !important; font-weight: 900 !important; color: var(--rm-orange) !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; line-height: 1.1 !important; display: inline-block !important; } /* FIX: boton eliminar item del carrito (icono basurero visible) */ .cart-items__remove, body.template-cart .cart-items__remove, body.template-cart button.cart-items__remove { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; flex: 0 0 auto !important; cursor: pointer !important; color: var(--rm-gray-700) !important; opacity: 1 !important; } .cart-items__remove svg, body.template-cart .cart-items__remove svg { width: 20px !important; height: 20px !important; min-width: 20px !important; flex: 0 0 auto !important; display: block !important; } .cart-items__remove:hover, body.template-cart .cart-items__remove:hover { color: var(--rm-orange) !important; background: transparent !important; } .cart-items__quantity-controls { display: flex !important; align-items: center !important; gap: 8px !important; } /* FIX 2: icono eliminar mas grande */ .cart-items__remove, body.template-cart .cart-items__remove { width: 52px !important; min-width: 52px !important; height: 52px !important; color: var(--rm-gray-900) !important; } .cart-items__remove svg, body.template-cart .cart-items__remove svg { width: 32px !important; height: 32px !important; min-width: 32px !important; --icon-stroke-width: 2px !important; }