/* ========================================================================== GBZ420 - card / carousel polish - v1, 2026-09-27 -------------------------------------------------------------------------- Local scope only: the three home `native-products` carousels and the listing cards that carry the real rating row. The file is deliberately separate from gbz-qa-media-v1.css and gbz-qa-listings-v1.css, which are owned by other corrections. Measured before this file: - the theme bundle declares `.swiper-slide > :not(.swiper-lazy-preloader) { padding: 0 !important }`, which removes the 12 px card inset on every home carousel card; - the home carousel shows 2 full cards at 390 px, with the third one only 4 px visible, and the arrows are the vendor's 25 px rgba(238,238,238,.9) glyphs; - a listing card with the real rating row has a 0 px gap between the end of `.product-price-and-shipping` and the start of `.product-add-cart` at 1440 and 390. This file does not change copy, product data, prices, stock, links or the rating provider. It only restores card geometry, gives the existing actions a visible black / lime treatment and adds vertical rhythm before the listing CTA. `!important` is used only where it has to beat the generated CCC bundle. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Home carousel cards: restore the card inset ----------------------------------------------------------------------- */ body .elementor-widget-product-carousel.native-products .swiper-slide > .product-card { padding: 12px !important; } @media (max-width: 767.98px) { body .elementor-widget-product-carousel.native-products .swiper-slide > .product-card { padding: 8px !important; } } /* -------------------------------------------------------------------------- 2. Home carousel cards: keep the price and the action on their own rhythm ----------------------------------------------------------------------- */ body .elementor-widget-product-carousel.native-products .product-card > .product-bottom { align-items: center !important; } @media (min-width: 768px) { body .elementor-widget-product-carousel.native-products .product-card .product-view { align-items: center; background: var(--gbz-black, #101010); border: 0; color: var(--gbz-accent, #d4fa0a) !important; display: inline-flex; font-size: 12px; font-weight: 700; justify-content: center; letter-spacing: .04em; line-height: 1; min-height: 24px; padding: 4px 4px; text-decoration: none; } body .elementor-widget-product-carousel.native-products .product-card .product-view:hover, body .elementor-widget-product-carousel.native-products .product-card .product-view:focus-visible { background: var(--gbz-black, #101010); color: var(--gbz-white, #fff) !important; outline: 2px solid var(--gbz-accent, #d4fa0a); outline-offset: 2px; } } /* -------------------------------------------------------------------------- 3. Category hero product rail: on mobile the three real hero cards (`.gbz-hero-feature` plus the two `.gbz-hero-mini` siblings) become one horizontal scroll-snap rail instead of one full-width card followed by two stacked rows. The JS moves the existing card nodes; this block paints the rail and keeps the price / VOIR readable at the narrower card width. ----------------------------------------------------------------------- */ .gbz-hero-card-rail { display: none; } @media (max-width: 767.98px) { .gbz-hero-card-rail-ready .gbz-hero-card-rail { display: block; flex: 0 0 100vw !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 20px; max-width: 100vw; order: 2; width: 100vw; } .gbz-hero-card-rail-source { display: none !important; } .gbz-hero-card-rail .gbz-hero-chip { margin: 0 0 12px; padding-inline: 16px; } body#category .gbz-hero-card-rail-ready .gbz-hero-lead .elementor-widget-container { margin-bottom: 0 !important; } .gbz-hero-card-rail__track { -webkit-overflow-scrolling: touch; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 0 16px 14px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; } .gbz-hero-card-rail__track::-webkit-scrollbar { display: none; } .gbz-hero .gbz-hero-card-rail__track > .product-card { align-content: stretch; align-self: stretch; background: var(--gbz-white, #fff); border: 1px solid rgba(16, 16, 16, .18) !important; box-sizing: border-box; display: grid !important; flex: 0 0 calc((100% - 24px) / 2.5); gap: 6px; grid-template-areas: "art" "label" "name" "price" "availability" !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto 1fr auto !important; min-width: 0; padding: 8px !important; scroll-snap-align: start; } .gbz-hero .gbz-hero-card-rail__track > .product-card .product-image { align-items: center; aspect-ratio: 1 / 1 !important; background: var(--gbz-white, #fff); display: flex; grid-area: art !important; justify-content: center; overflow: hidden; width: 100%; } .gbz-hero .gbz-hero-card-rail__track > .product-card .product-image img { height: 100% !important; max-height: none !important; max-width: none !important; object-fit: contain; width: 100%; } .gbz-hero .gbz-hero-card-rail__track > .product-card small { color: #535353; font-size: 9px !important; grid-area: label !important; line-height: 1.15; margin: 0; min-width: 0; overflow-wrap: anywhere; } .gbz-hero .gbz-hero-card-rail__track > .product-card h3 { font-family: var(--gbz-font-display, 'GBZ Display', Anton, Impact, sans-serif); font-size: 14px !important; grid-area: name !important; line-height: 1.15; margin: 0; min-height: 2.3em; min-width: 0; overflow-wrap: anywhere; } .gbz-hero .gbz-hero-card-rail__track > .product-card h3 a { color: inherit; text-decoration: none; } .gbz-hero .gbz-hero-card-rail__track > .product-card .product-bottom { align-items: center; align-self: end; display: flex; flex-wrap: wrap; gap: 4px; grid-area: price !important; justify-content: space-between; margin: 0; } .gbz-hero .gbz-hero-card-rail__track > .product-card .price { font-family: var(--gbz-font-display, 'GBZ Display', Anton, Impact, sans-serif); font-size: 16px !important; line-height: 1; white-space: nowrap; } .gbz-hero .gbz-hero-card-rail__track > .product-card .regular-price { font-size: 11px !important; } .gbz-hero .gbz-hero-card-rail__track > .product-card .product-view { align-items: center; background: var(--gbz-black, #101010) !important; border: 0 !important; color: var(--gbz-accent, #d4fa0a) !important; display: inline-flex; font-size: 10px !important; font-weight: 700; justify-content: center; letter-spacing: .02em; line-height: 1; min-height: 22px; padding: 3px 4px; text-decoration: none; } .gbz-hero .gbz-hero-card-rail__track > .product-card .availability { font-size: 10px !important; grid-area: availability !important; line-height: 1.2; margin: 0; min-height: 0; } } /* -------------------------------------------------------------------------- 4. Listing cards with the real rating row: the measured 0 px gap before the Add to cart button. The CTA is already pinned to the card bottom by the listing layer, so a bottom margin on the price block creates the rhythm without moving the button away from the card baseline. ----------------------------------------------------------------------- */ body#category:not(.category-id-45) .ce-products.ce-product-grid .product-miniature .product-price-and-shipping { margin-bottom: 12px; }