/* ===================================================================== * ZARO — HOMEPAGE / GENERIC PRODUCT CAROUSEL (zaro_carousel shortcode) * Extracted from theme style.css into its own file so this feature can * be edited on its own without touching the rest of the site. * * All sizes/colors below fall back to sane defaults but are overridden * live by CSS variables printed in from * Appearance → Zaro Carousel (see carousel.php). Nothing here needs to * be hand-edited — use the settings page. * * NOTE: .zaro-carousel-wrap / .zaro-carousel-btn / .zaro-carousel-prev / * .zaro-carousel-next / .zaro-carousel-track base rules are SHARED with * the single-product "related products" carousel and intentionally stay * in the main theme style.css — do not duplicate them here. * ===================================================================== */ .zaro-generic-carousel-section { max-width: 1300px; margin: 24px auto 40px; padding: 0 20px; } .zaro-generic-carousel-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .zaro-generic-carousel-title { font-size: var(--zaro-carousel-title-size, 32px) !important; font-weight: 700; line-height: 1; text-transform: none; color: var(--zaro-carousel-title-from, #1a1a1a); text-align: left; margin: 0 !important; } /* Single divider only — lives on .zaro-generic-carousel-divider below. (Previously the title also drew its own ::after bar, which produced the double-line-under-heading bug. Fixed by removing that duplicate.) */ .zaro-carousel-see-all { flex-shrink: 0; color: var(--zaro-carousel-seeall-text, #1a1a1a); font-weight: 700; font-size: 13px; text-decoration: none; border: 1.5px solid var(--zaro-carousel-seeall-border, #1a1a1a); padding: 8px 18px; border-radius: 20px; white-space: nowrap; transform: translateY(-8px); transition: background 0.2s ease, color 0.2s ease; } .zaro-carousel-see-all:hover { background: var(--zaro-carousel-seeall-hover-bg, #1a1a1a); color: var(--zaro-carousel-seeall-hover-text, #fff); } .zaro-generic-carousel-divider { width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--zaro-carousel-divider-from, #1a1a1a), var(--zaro-carousel-divider-to, #000000)); margin: 10px 2px 40px; } /* Track layout inside this section only */ .zaro-generic-carousel-section .zaro-carousel-track { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--zaro-carousel-gap-desktop, 20px) !important; padding-bottom: 8px !important; scrollbar-width: none; } .zaro-generic-carousel-section .zaro-carousel-track::-webkit-scrollbar { display: none; } .zaro-generic-carousel-section .zaro-carousel-track li.product { flex: 0 0 var(--zaro-carousel-card-desktop, calc(20% - 16px)) !important; scroll-snap-align: start; } @media (max-width: 600px) { .zaro-generic-carousel-section .zaro-carousel-track li.product { flex: 0 0 var(--zaro-carousel-card-mobile, calc(50% - 6px)) !important; } } /* Autoplay disables native scroll-snap — JS drives position via transform */ .zaro-generic-carousel-section .zaro-carousel-track { scroll-snap-type: none !important; scroll-behavior: auto !important; } .zaro-generic-carousel-section .zaro-carousel-track li.product { scroll-snap-align: none !important; } /* CSS-transform autoplay loop (mobile-reliable) */ .zaro-generic-carousel-section .zaro-carousel-wrap { overflow: hidden !important; } .zaro-generic-carousel-section .zaro-carousel-track { overflow: visible !important; display: flex !important; animation-name: zaro-generic-carousel-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; } .zaro-generic-carousel-section .zaro-carousel-track.zaro-paused { animation-play-state: paused !important; } @keyframes zaro-generic-carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Mobile fine-tuning (also nudges the shared wrap/btn — matches original behaviour, since this block always shipped together with the rest of the generic-carousel feature) */ @media (max-width: 480px) { .zaro-generic-carousel-section { padding: 0 10px !important; margin: 30px auto !important; } .zaro-generic-carousel-section .zaro-carousel-wrap { padding: 0 !important; } .zaro-generic-carousel-section .zaro-carousel-track { gap: var(--zaro-carousel-gap-mobile, 10px) !important; } .zaro-generic-carousel-section .zaro-carousel-track li.product { flex: 0 0 var(--zaro-carousel-card-mobile, calc(50% - 5px)) !important; box-sizing: border-box !important; } .zaro-generic-carousel-section .zaro-carousel-btn { width: 30px !important; height: 30px !important; font-size: 14px !important; } .zaro-generic-carousel-section .zaro-carousel-prev { left: -2px !important; } .zaro-generic-carousel-section .zaro-carousel-next { right: -2px !important; } .zaro-carousel-see-all { font-size: 12px; padding: 6px 14px; } } /* ===================================================================== * TILES VARIANT — [zaro_carousel_tiles] — image + title overlay only. * Reuses .zaro-carousel-wrap/track/btn base + .zaro-generic-carousel-* * header/divider rules above. Card-level style scoped to .zaro-tile. * ===================================================================== */ .zaro-tiles-track li.zaro-tile { padding: 0 !important; border: none !important; background: transparent !important; overflow: hidden; border-radius: 14px; } .zaro-tiles-track li.zaro-tile:hover { transform: translateY(-4px); } .zaro-tile-link { display: block; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; } .zaro-tile-link img { width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; display: block; transition: transform 0.3s ease; } .zaro-tile-link:hover img { transform: scale(1.06); } .zaro-tile-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%); } .zaro-tile-title { color: #fff; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }