/* * Pizza Checker – style_patch.css (v2) * Add AFTER your existing style.css in : * * * Fixes: * 1. Remove "Unsere neue moderne Website" carousel section * 2. KI section: much lighter background so text is readable * 3. Stop buttons from pulsing/blinking * 4. Search bar: no flash on scroll * 5. Category carousel: smooth GPU transition * 6. Heading hierarchy fixes (h2/h3/h4 visual parity) * 7. Accessibility: focus rings */ /* ═══════════════════════════════════════════════════════════════════════════ 1. REMOVE BENEFITS CAROUSEL SECTION ═══════════════════════════════════════════════════════════════════════════ */ .benefits-section { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 0. HERO OPEN / CLOSED STATUS + MOBILE POLISH ═══════════════════════════════════════════════════════════════════════════ */ .hero-open-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0 0 0.85rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; line-height: 1.2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: 100%; } .hero-open-status.is-open { background: rgba(22, 163, 74, 0.92); color: #fff; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35); } .hero-open-status.is-closed { background: rgba(15, 23, 42, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); } .hero-open-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #86efac; box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.35); flex-shrink: 0; } .hero-open-status.is-closed .hero-open-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3); } .hero-open-sep { opacity: 0.65; } .hero-open-hours { font-weight: 500; opacity: 0.95; } .hero-open-note { font-weight: 500; opacity: 0.9; } .hero-cta-row .btn { min-height: 48px; } .category-nav { padding-top: 1rem !important; padding-bottom: 1rem !important; } .category-nav-head h2 { letter-spacing: 0.01em; } .category-card { min-height: 96px; border-radius: 16px !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .category-card:active { transform: scale(0.98); } .delivery-check-section .input-group-lg .form-control { min-height: 48px; font-size: 1rem; } .site-footer .footer-powered { font-size: 0.75rem; margin-top: 0.2rem; } @media (max-width: 576px) { .hero-section .hero-title { font-size: 1.65rem !important; line-height: 1.2 !important; } .hero-section .hero-subtitle { font-size: 0.95rem !important; margin-bottom: 0.5rem; } .hero-open-status { font-size: 0.75rem; padding: 0.35rem 0.7rem; } .delivery-check-section { padding-top: 1rem !important; padding-bottom: 1rem !important; } .category-item { flex: 0 0 42% !important; max-width: 42% !important; } .menu-grid { gap: 0.75rem !important; } .game-promo { margin: 0.75rem 1rem !important; border-radius: 16px !important; } .game-promo-actions { flex-direction: column; gap: 0.5rem; } .game-btn-main, .game-btn-hint { width: 100%; text-align: center; } .ki-controls { flex-direction: column !important; gap: 0.5rem; } .ki-controls .btn, .ki-controls #kiRecommendationBtn, .ki-controls #kiDislikeBtn { width: 100% !important; margin: 0 !important; min-height: 46px; } } /* ═══════════════════════════════════════════════════════════════════════════ 2. KI SECTION – polished light card + product media layout ═══════════════════════════════════════════════════════════════════════════ */ .ki-recommendation-section { background: linear-gradient(160deg, #fff9f5 0%, #fff1e8 45%, #f8fafc 100%) !important; position: relative; overflow: hidden; padding: 2.25rem 0 !important; } .ki-recommendation-section::after { display: none !important; } .ki-recommendation-section::before { background-image: none !important; } .ki-recommendation-card, .ki-recommendation-card.ki-card-v2 { background: #ffffff !important; border: 1px solid rgba(230, 57, 70, 0.12) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(230, 57, 70, 0.06) !important; border-radius: 24px !important; padding: 1.5rem 1.35rem !important; } .ki-recommendation-card::before { background: linear-gradient(90deg, #e63946, #ff9e1f, #e63946) !important; height: 4px !important; border-radius: 24px 24px 0 0 !important; } .ki-header { display: flex !important; align-items: flex-start !important; gap: 1rem !important; text-align: left !important; margin-bottom: 1.25rem !important; } .ki-icon-wrap { flex-shrink: 0; } .ki-icon { color: #fff !important; filter: none !important; width: 3.25rem; height: 3.25rem; border-radius: 16px; display: flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, #e63946, #ff7a3d) !important; box-shadow: 0 8px 20px rgba(230, 57, 70, 0.35); font-size: 1.35rem; } .ki-badge { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #e63946; background: rgba(230, 57, 70, 0.1); border-radius: 999px; padding: 0.2rem 0.65rem; margin-bottom: 0.4rem; } .ki-title h2, .ki-title h3 { color: #0f172a !important; text-shadow: none !important; font-size: 1.35rem !important; font-weight: 800 !important; margin: 0 0 0.35rem !important; line-height: 1.25 !important; } .ki-title p { color: #64748b !important; opacity: 1 !important; font-size: 0.92rem !important; margin: 0 !important; line-height: 1.45; } .ki-product-showcase { background: linear-gradient(135deg, #fff8f3, #ffffff) !important; border: 1px solid #f1e4d8 !important; box-shadow: none !important; border-radius: 18px !important; padding: 1rem !important; } .ki-product-showcase::after { display: none !important; } .ki-product-v2 { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 1rem !important; text-align: left !important; } .ki-product-media { flex: 0 0 112px; } .ki-product-img { width: 112px; height: 112px; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); background: #f8fafc; } .ki-product-body { flex: 1; min-width: 0; } .ki-product-name { color: #0f172a !important; text-shadow: none !important; font-size: 1.2rem !important; font-weight: 800 !important; margin-bottom: 0.35rem !important; } .ki-product-reason { color: #475569 !important; font-style: normal !important; font-size: 0.9rem !important; line-height: 1.5; opacity: 1 !important; margin-bottom: 0.65rem !important; } .ki-product-reason strong { color: #e63946; } .ki-product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .ki-product-price { background: #e63946 !important; color: #fff !important; box-shadow: 0 2px 10px rgba(230,57,70,.3) !important; border: none !important; border-radius: 999px !important; padding: 0.3rem 0.85rem !important; font-weight: 700 !important; } @media (max-width: 576px) { .ki-product-v2 { flex-direction: column !important; align-items: center !important; text-align: center !important; } .ki-product-media { flex: none; } .ki-product-img { width: 140px; height: 140px; } .ki-product-meta, .ki-trust-signals { justify-content: center !important; } .ki-header { flex-direction: column; align-items: center !important; text-align: center !important; } .ki-title h2 { font-size: 1.2rem !important; } } /* Rating chip */ .ki-rating, .ki-rating-chip { background: #fff3e8 !important; color: #c8780a !important; border: 1px solid #f5d5b8 !important; padding: 4px 12px; border-radius: 12px; font-size: .85rem; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .ki-rating small, .ki-rating-chip small { color: #888 !important; font-size: .8rem; } /* Trust signal chips */ .ki-trust-signals { gap: 8px; margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; } .ki-trust-chip, .ki-trust-signals .trust-badge { background: #f8f8f8 !important; border: 1px solid #e0d5c8 !important; color: #333 !important; padding: 5px 12px; border-radius: 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; cursor: default !important; } .ki-trust-chip strong, .ki-trust-signals .trust-badge strong { color: #e63946; } .ki-trust-chip:hover, .ki-trust-signals .trust-badge:hover { transform: none !important; box-shadow: none !important; } /* Loading skeleton on white bg */ .ki-loading-skeleton { background: #fff5ee !important; border: 1.5px solid #f5d5b8 !important; } .skeleton-animation { border-color: rgba(230,57,70,.15) !important; border-top-color: #e63946 !important; } .skeleton-line { background: rgba(0,0,0,.08) !important; } /* KI controls – dislike button readable on white */ #kiDislikeBtn { background: #f5f5f5 !important; color: #555 !important; border: 1.5px solid #ddd !important; backdrop-filter: none !important; } #kiDislikeBtn:hover { background: #ffeaea !important; color: #e63946 !important; border-color: #e63946 !important; } #kiRecommendationBtn { background: linear-gradient(135deg, #e63946, #ff6b35) !important; color: #fff !important; border: none !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(230,57,70,.35) !important; } #kiRecommendationBtn:hover { background: linear-gradient(135deg, #d62839, #e85d2a) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(230,57,70,.5) !important; } /* KI alternatives */ .ki-alternatives { background: #f9f5f0 !important; border: 1px solid #ede0d4 !important; } .ki-alternatives h6, .ki-alternatives h3 { color: #333 !important; } .alternative-item { background: #ffffff !important; border: 1px solid #eee !important; color: #1a1a1a !important; } .alternative-item:hover { border-color: #e63946 !important; } .alt-name { color: #1a1a1a !important; } .alt-price { color: #e63946 !important; } /* KI personality stats bar */ .ki-personality { background: #fff5ee !important; border: 1px solid #f5d5b8 !important; } .ki-stat i { color: #e63946 !important; } .ki-stat small { color: #555 !important; } .ki-stat strong { color: #1a1a1a; } /* KI fallback */ .ki-fallback h4, .fallback-content h4, .ki-fallback h3, .fallback-content h3 { color: #e63946 !important; } .ki-fallback p, .fallback-content p { color: #555 !important; } .fallback-price { color: #e63946 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 3. STOP BUTTONS FROM PULSING / BLINKING The original CSS has `animation: pulse` and `animation: subtle-pulse` on loyalty tab, signup fab, offer badges, etc. These look like flickering on certain devices. Kill them all, keep only the banner rotation which is intentional. ═══════════════════════════════════════════════════════════════════════════ */ /* Offer badge: was `animation: pulse 2s infinite` */ .offer-badge { animation: none !important; } /* Loyalty tab card pulse */ .loyalty-tab .card, .signup-cart-prompt .card, .signup-cart-prompt-fab .card { animation: none !important; } /* KI robot icon pulse */ .ki-icon { animation: none !important; } /* Hero badge pulse (the gold pill above title) */ .hero-wc-badge { animation: none !important; } .hero-wc-badge:hover { transform: scale(1.03); box-shadow: 0 0 20px rgba(255,215,0,.6); } /* Sticky cart – subtle-pulse off */ .sticky-cart { animation: none !important; } .sticky-cart:hover .card { transform: scale(1.1) !important; } /* Ingredient showcase: keep the dance bounce but reduce it */ .ingredient { animation: dance 3s ease-in-out infinite; } @keyframes dance { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(3deg); } } /* Benefit card icon bounce – reduce */ .benefit-icon { animation: none !important; } .benefit-card:hover .benefit-icon { animation: none !important; transform: scale(1.15); } /* ═══════════════════════════════════════════════════════════════════════════ 4. SEARCH BAR – NO FLASH ON SCROLL The mobile search bar should NEVER appear during scroll events. It is controlled exclusively by explicit button/focus. We also ensure the transition is instant so there's no ghost flash. ═══════════════════════════════════════════════════════════════════════════ */ .mobile-search-bar { transition: none !important; /* no fade-in/out */ } .mobile-search-bar.hidden { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* The JS only adds .visible when user explicitly opens it */ .mobile-search-bar.visible { display: block !important; opacity: 1 !important; visibility: visible !important; } /* ═══════════════════════════════════════════════════════════════════════════ 5. CATEGORY CAROUSEL – SMOOTH GPU TRANSITION Remove any existing transition so JS controls it cleanly. JS sets `transition: transform 0.35s cubic-bezier(...)` only when actually animating, and `transition: none` during resize. ═══════════════════════════════════════════════════════════════════════════ */ .category-carousel-inner { will-change: transform; /* Let JS set the transition dynamically */ } /* Ensure hidden arrows don't cause layout shift */ .category-nav-btn.hidden { opacity: 0; pointer-events: none; } .category-nav-btn { transition: opacity 0.2s ease, background 0.2s ease !important; } /* ═══════════════════════════════════════════════════════════════════════════ 6. HEADING HIERARCHY FIXES PHP now uses semantic h2/h3/h4; visually match original h5 sizing. ═══════════════════════════════════════════════════════════════════════════ */ .category-card h3.h6 { font-size: .85rem; font-weight: 700; color: var(--dark, #0d0d0d); margin: 0; line-height: 1.2; font-family: var(--font-heading, 'Oswald', sans-serif); position: relative; z-index: 2; } .menu-details h4.card-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--dark, #0d0d0d); font-family: var(--font-heading, 'Oswald', sans-serif); } .menu-details h3.card-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; color: var(--dark, #0d0d0d); font-family: var(--font-heading, 'Oswald', sans-serif); } .delivery-check-section h2.h5 { font-size: 1.25rem; font-weight: 700; font-family: var(--font-heading, 'Oswald', sans-serif); } .step-card h3.h5 { font-size: 1rem; font-weight: 700; margin-bottom: 15px; color: var(--dark, #0d0d0d); font-family: var(--font-heading, 'Oswald', sans-serif); } .reorder-card h3.h6 { font-size: 1rem; font-weight: 700; margin-bottom: 0; color: var(--dark, #0d0d0d); font-family: var(--font-heading, 'Oswald', sans-serif); } .ki-alternatives h3.h6 { color: #333; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-family: var(--font-heading, 'Oswald', sans-serif); font-size: 1rem; font-weight: 600; } .popular-section h2.display-6 { font-family: var(--font-display, 'Bebas Neue', sans-serif); letter-spacing: 1px; } /* ═══════════════════════════════════════════════════════════════════════════ 7. ACCESSIBILITY: FOCUS RINGS ═══════════════════════════════════════════════════════════════════════════ */ :focus-visible { outline: 3px solid #e63946 !important; outline-offset: 3px !important; } .loyalty-tab .card:focus, .signup-cart-prompt .card:focus { outline: 3px solid #FFD700; outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ 8. PHP ERROR SUPPRESSION (dev safety net) ═══════════════════════════════════════════════════════════════════════════ */ .xdebug-error, .phperror, pre.xdebug-var-dump { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 9. MOBILE TWEAKS ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .ki-title h2, .ki-title h3 { font-size: 1.3rem !important; } .ki-product-name { font-size: 1.2rem !important; } /* Reduce repaint cost on mobile */ .sticky-cart, .loyalty-tab, .call-btn, .whatsapp-btn { will-change: transform; transform: translateZ(0); } @media (prefers-reduced-motion: reduce) { .ki-recommendation-card, .ki-product-showcase { backdrop-filter: none !important; } } } /* ═══════════════════════════════════════════════════════════════════════════ 10. REORDER CARD on light bg (was inside dark KI section, needs its own styling) ═══════════════════════════════════════════════════════════════════════════ */ .reorder-card { background: #ffffff !important; border: 1px solid #f0e0cc !important; color: #1a1a1a !important; } .last-order-card { background: #fff !important; border: 1px solid #eee !important; } .left-panel-benefits { background: linear-gradient(135deg, #fff8f0, #fff5eb) !important; border: 1px solid #f5d5b8 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 11. HERO – overlay carousel (all slides in ONE frame; no stacking under) ═══════════════════════════════════════════════════════════════════════════ */ .hero-section { position: relative !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; min-height: 420px !important; height: 420px !important; max-height: 420px !important; overflow: hidden !important; background: #0f172a !important; display: block !important; } @media (max-width: 767.98px) { /* Mobile: fixed frame + cover (avoid contain letterboxing / empty bars) */ .hero-section { min-height: 280px !important; height: 280px !important; max-height: 320px !important; aspect-ratio: auto !important; } } .hero-section::before, .hero-section::after { display: none !important; } .hero-section > .container { position: absolute !important; inset: 0 !important; z-index: 5; max-width: 100% !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; } .banner-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; opacity: 0 !important; pointer-events: none !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 2rem 1rem !important; transition: opacity 0.8s ease-in-out !important; z-index: 3 !important; } .banner-container.active { opacity: 1 !important; z-index: 4 !important; pointer-events: auto !important; } .banner-container::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0.55) 100%) !important; z-index: 1; } .hero-content { position: relative !important; z-index: 6 !important; max-width: 40rem !important; margin: 0 auto !important; padding: 0.75rem 1rem !important; text-align: center !important; } .hero-content .hero-title { font-size: clamp(1.45rem, 4vw, 2.75rem) !important; line-height: 1.15 !important; margin-bottom: 0.5rem !important; } .hero-content .hero-subtitle { font-size: clamp(0.9rem, 2.2vw, 1.15rem) !important; line-height: 1.35 !important; margin-bottom: 0.75rem !important; color: rgba(255,255,255,0.92) !important; } @media (max-width: 767.98px) { .banner-container { padding: 1rem 0.75rem !important; /* cover fills the frame — contain left dark empty bars on phones */ background-size: cover !important; background-position: center center !important; background-color: #0f172a !important; min-height: 0 !important; } .hero-content .hero-title { font-size: 1.35rem !important; } .hero-content .hero-subtitle { font-size: 0.85rem !important; } } .hero-dots-container { position: absolute; left: 0; right: 0; bottom: 0.75rem; z-index: 8; } /* ═══════════════════════════════════════════════════════════════════════════ 12. CHEF KI v3 – clean product pick card ═══════════════════════════════════════════════════════════════════════════ */ .ki-section-v3.ki-recommendation-section { background: #f8fafc !important; padding: 2rem 0 2.5rem !important; } .ki-card-v3.ki-recommendation-card { max-width: 52rem; margin: 0 auto; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 22px !important; box-shadow: 0 10px 40px rgba(15, 39, 68, 0.07) !important; padding: 1.35rem 1.25rem 1.5rem !important; overflow: hidden; } .ki-card-v3.ki-recommendation-card::before { background: linear-gradient(90deg, #16a34a, #0f2744) !important; height: 3px !important; } .ki-header-v3 { display: flex !important; align-items: center !important; gap: 0.9rem !important; margin-bottom: 1.1rem !important; text-align: left !important; } .ki-header-v3 .ki-icon { width: 2.75rem !important; height: 2.75rem !important; border-radius: 14px !important; font-size: 1.15rem !important; background: linear-gradient(135deg, #16a34a, #0f2744) !important; box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3) !important; } .ki-header-v3 .ki-badge { background: rgba(22, 163, 74, 0.12) !important; color: #15803d !important; } .ki-header-v3 .ki-title h2 { font-size: 1.25rem !important; margin: 0.15rem 0 0.15rem !important; color: #0f172a !important; } .ki-header-v3 .ki-title p { font-size: 0.85rem !important; color: #64748b !important; } .ki-product-v3 { display: grid !important; grid-template-columns: 140px 1fr; gap: 1.15rem !important; align-items: center !important; text-align: left !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 0.85rem !important; } .ki-product-v3 .ki-product-media { position: relative; flex: none !important; } .ki-product-v3 .ki-product-img { width: 100% !important; height: 140px !important; object-fit: cover !important; border-radius: 14px !important; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important; display: block; } .ki-product-price-float { position: absolute; left: 0.5rem; bottom: 0.5rem; background: #0f2744; color: #fff; font-weight: 800; font-size: 0.85rem; padding: 0.25rem 0.6rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(15, 39, 68, 0.3); } .ki-pick-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #16a34a; margin: 0 0 0.25rem !important; } .ki-product-v3 .ki-product-name { font-size: 1.2rem !important; margin-bottom: 0.35rem !important; } .ki-product-v3 .ki-product-reason { font-size: 0.88rem !important; color: #475569 !important; margin-bottom: 0.65rem !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ki-product-v3 .ki-product-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; } .ki-cta-order { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.9rem; color: #fff !important; background: #16a34a; padding: 0.55rem 1rem; border-radius: 999px; text-decoration: none !important; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3); } .ki-cta-order:hover { background: #15803d; color: #fff !important; } .ki-section-v3 .ki-controls { display: flex !important; flex-wrap: wrap; gap: 0.55rem !important; justify-content: stretch; margin-top: 1rem !important; } .ki-btn-ghost, #kiDislikeBtn.ki-btn-ghost, .ki-section-v3 #kiDislikeBtn { flex: 1; min-width: 140px; background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; border-radius: 999px !important; font-weight: 600 !important; padding: 0.65rem 1rem !important; } .ki-btn-primary, #kiRecommendationBtn.ki-btn-primary, .ki-section-v3 #kiRecommendationBtn { flex: 1.2; min-width: 160px; background: linear-gradient(135deg, #16a34a, #0f2744) !important; color: #fff !important; border: none !important; border-radius: 999px !important; font-weight: 700 !important; padding: 0.65rem 1rem !important; box-shadow: 0 6px 18px rgba(15, 39, 68, 0.2) !important; } .ki-section-v3 .ki-alternatives { margin-top: 1rem !important; background: transparent !important; border: none !important; padding: 0 !important; } .ki-alt-title { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.5rem !important; } .ki-section-v3 .alternative-items { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ki-section-v3 .alternative-item { flex: 1 1 auto; min-width: 120px; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem !important; border-radius: 12px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; cursor: pointer; } .ki-section-v3 .ki-product-showcase { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; } @media (max-width: 576px) { /* Do NOT set min-height on absolute .banner-container — fights inset:0 / hero height */ .banner-container { padding: 1.25rem 0.85rem !important; min-height: 0 !important; } .hero-section { min-height: 260px !important; height: 260px !important; max-height: 300px !important; } .ki-product-v3 { grid-template-columns: 1fr !important; text-align: center !important; } .ki-product-v3 .ki-product-img { height: 180px !important; max-width: 220px; margin: 0 auto; } .ki-product-v3 .ki-product-meta, .ki-product-v3 .ki-product-body { justify-content: center; text-align: center; } .ki-header-v3 { flex-direction: column !important; text-align: center !important; } .ki-cta-order { width: 100%; justify-content: center; } }