/** * ═══════════════════════════════════════════════════════════════════════════ * @DOSYA menu-layouts-surfaces.css * @ETIKET MENU-YUZEY — banner, chip, kategori hero, eski ürün panelleri * @YUKLENME layouts/public.php (menu-layouts.css sonrası) * @ADMIN-GORUNUM Menü görünümü → * @HEDEF .qm-menu-hero, .qm-category-hero, .qm-soft-chip, * .qm-price-panel, .qm-sticky-actions, .qm-menu-badge * @PRESET-BLOKLAR [PRESET: card] … [PRESET: nexus] — Ctrl+F ile atla * @REHBER assets/css/CSS-REHBER.md * ═══════════════════════════════════════════════════════════════════════════ */ /** * [FIX: BODY-SCOPED PRESET] * Bu dosya, menu_layout sınıfını wrapper üzerinde değil public kökte bekler: * * Böylece public-app.css ile menu-layouts*.css aynı kaynak sınıftan çalışır. */ /* [ETIKET: ORTAK] Hero / ikon / panel geçişleri — tüm preset’ler */ .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-menu-hero { position: relative; isolation: isolate; contain: layout paint; overflow: hidden; } .public-qm[class*="menu-layout-"] .qm-category-modern .qm-category-hero { overflow: hidden; isolation: isolate; } .public-qm[class*="menu-layout-"] .qm-category-modern .qm-hero-icon { display: inline-flex; align-items: center; justify-content: center; } /* Hero token’ları — qm-preset-tokens.css */ .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-menu-hero, .public-qm[class*="menu-layout-"] .qm-category-modern .qm-category-hero { border: var(--qm-hero-border); background: var(--qm-hero-bg); box-shadow: var(--qm-hero-shadow); border-radius: var(--qm-radius); } .public-qm.menu-layout-bold .qm-menu-modern .qm-menu-hero, .public-qm.menu-layout-bold .qm-category-modern .qm-category-hero { border-left: var(--qm-hero-border-left, 5px solid var(--qm-primary)); } .public-qm[class*="menu-layout-"] .qm-product-modern .qm-price-panel, .public-qm[class*="menu-layout-"] .qm-product-modern .qm-sticky-actions, .public-qm[class*="menu-layout-"] .qm-product-modern .qm-info-tile, .public-qm[class*="menu-layout-"] .qm-product-modern .qm-detail-icon { transition: box-shadow 0.32s ease, border-color 0.32s ease, background 0.32s ease; } /* ── [PRESET: card] Kart — menü üst banner & chip’ler ── */ .public-qm.menu-layout-card .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 14%, var(--qm-border)); background: radial-gradient(circle at top left, color-mix(in srgb, var(--qm-primary) 16%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)), var(--qm-card-bg)); box-shadow: 0 14px 38px -12px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-card .qm-menu-modern .qm-menu-hero::after { background: color-mix(in srgb, var(--qm-primary) 10%, transparent); } .public-qm.menu-layout-card .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-card .qm-menu-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-body-color) 12%, transparent); background: color-mix(in srgb, var(--qm-card-bg) 88%, #fff);} .public-qm.menu-layout-card .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 14%, var(--qm-border)); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-primary) 9%, var(--qm-card-bg)), var(--qm-card-bg) ); box-shadow: 0 14px 38px -12px color-mix(in srgb, var(--qm-body-color) 11%, transparent); } .public-qm.menu-layout-card .qm-category-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-body-color) 12%, transparent); background: color-mix(in srgb, var(--qm-card-bg) 88%, #fff);} .public-qm.menu-layout-card .qm-category-modern .qm-hero-icon { border-radius: 1rem; background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); border: 1px solid color-mix(in srgb, var(--qm-primary) 18%, transparent); color: var(--qm-primary); } .public-qm.menu-layout-card .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: 1.05rem !important; border: 1px solid color-mix(in srgb, var(--qm-body-color) 9%, var(--qm-border)) !important; background: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 92%, #fff) 0%, var(--qm-card-bg) 100% ); box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } .public-qm.menu-layout-card .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-primary) 18%, var(--qm-border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-primary) 5%, var(--qm-card-bg)) ); } .public-qm.menu-layout-card .qm-product-modern .qm-detail-icon { background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); border: 1px solid color-mix(in srgb, var(--qm-primary) 14%, transparent); color: var(--qm-primary); } .public-qm.menu-layout-card .qm-product-modern .qm-detail-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 16%, var(--qm-border)); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); } .public-qm.menu-layout-card .qm-product-modern .qm-info-tile { border: 1px solid color-mix(in srgb, var(--qm-body-color) 9%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 96%, #fff);} .public-qm.menu-layout-card .qm-product-modern .qm-sticky-actions { border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 92%, #fff); box-shadow: 0 12px 36px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-card .qm-product-modern .qm-mobile-topbar .btn { box-shadow: 0 4px 14px color-mix(in srgb, var(--qm-body-color) 8%, transparent); } .public-qm.menu-layout-card .qm-product-modern .list-group-item { border-color: color-mix(in srgb, var(--qm-body-color) 10%, transparent) !important; } /* ── [PRESET: list] Liste ── */ .public-qm.menu-layout-list .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); background: var(--qm-card-bg); box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } .public-qm.menu-layout-list .qm-menu-modern .qm-menu-hero::after { opacity: 0.35; transform: scale(0.85); } .public-qm.menu-layout-list .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-list .qm-menu-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); background: var(--qm-card-bg); } .public-qm.menu-layout-list .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); background: var(--qm-card-bg); box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--qm-body-color) 11%, transparent); } .public-qm.menu-layout-list .qm-category-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); background: var(--qm-card-bg); } .public-qm.menu-layout-list .qm-category-modern .qm-hero-icon { border-radius: 0.9rem; background: color-mix(in srgb, var(--qm-body-color) 6%, var(--qm-card-bg)); border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); } .public-qm.menu-layout-list .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: 1rem !important; border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)) !important; box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } .public-qm.menu-layout-list .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); background: color-mix(in srgb, var(--qm-body-color) 5%, var(--qm-card-bg)); } .public-qm.menu-layout-list .qm-product-modern .qm-detail-icon { border-radius: 0.85rem; border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); background: color-mix(in srgb, var(--qm-body-color) 5%, var(--qm-card-bg)); } .public-qm.menu-layout-list .qm-product-modern .qm-sticky-actions { border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); box-shadow: 0 8px 24px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } /* ── [PRESET: minimal] Minimal — şeffaf / çizgisel yüzeyler ── */ .public-qm.menu-layout-minimal .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-body-color) 12%, var(--qm-border)); background: transparent; box-shadow: none; } .public-qm.menu-layout-minimal .qm-menu-modern .qm-menu-hero::after { display: none; } .public-qm.menu-layout-minimal .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-minimal .qm-menu-modern .qm-soft-chip { border: 1px solid var(--qm-border); background: transparent; box-shadow: none; } .public-qm.menu-layout-minimal .qm-menu-modern .qm-menu-hero::after { display: none; } .public-qm.menu-layout-minimal .qm-category-modern .qm-category-hero { border: 1px solid var(--qm-border); background: transparent; box-shadow: none; } .public-qm.menu-layout-minimal .qm-category-modern .qm-soft-chip { border: 1px solid var(--qm-border); background: transparent; } .public-qm.menu-layout-minimal .qm-category-modern .qm-hero-icon { border-radius: 0.65rem; background: transparent; border: 1px solid var(--qm-border); color: var(--qm-body-color); } .public-qm.menu-layout-minimal .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: 0.75rem !important; border: 1px solid var(--qm-border) !important; box-shadow: none !important; background: color-mix(in srgb, var(--qm-card-bg) 94%, transparent) !important; } .public-qm.menu-layout-minimal .qm-product-modern .qm-price-panel { border: 1px solid var(--qm-border); background: transparent; box-shadow: none; } .public-qm.menu-layout-minimal .qm-product-modern .qm-detail-icon { background: transparent; border: 1px solid var(--qm-border); color: var(--qm-body-color); } .public-qm.menu-layout-minimal .qm-product-modern .qm-detail-badge { border: 1px solid var(--qm-border); background: transparent; } .public-qm.menu-layout-minimal .qm-product-modern .qm-info-tile { border: 1px solid var(--qm-border); background: transparent; box-shadow: none; } .public-qm.menu-layout-minimal .qm-product-modern .qm-sticky-actions { border: 1px solid var(--qm-border); background: color-mix(in srgb, var(--qm-card-bg) 94%, transparent); box-shadow: none; } .public-qm.menu-layout-minimal .qm-product-modern .qm-mobile-topbar .btn { box-shadow: none; } /* ── [PRESET: premium] Premium — radial hero, gölgeli chip ── */ .public-qm.menu-layout-premium .qm-menu-modern .qm-menu-hero { border: none; background: radial-gradient( 120% 90% at 50% -20%, color-mix(in srgb, var(--qm-card-bg) 92%, #fff) 0%, var(--qm-card-bg) 55% ); box-shadow: 0 18px 48px -12px color-mix(in srgb, var(--qm-body-color) 16%, transparent), 0 8px 22px color-mix(in srgb, var(--qm-primary) 12%, transparent); } .public-qm.menu-layout-premium .qm-menu-modern .qm-menu-hero::after { width: 15rem; height: 15rem; background: color-mix(in srgb, var(--qm-primary) 14%, transparent); } .public-qm.menu-layout-premium .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-premium .qm-menu-modern .qm-soft-chip { border: none; background: color-mix(in srgb, var(--qm-card-bg) 94%, #fff); box-shadow: 0 10px 28px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } .public-qm.menu-layout-premium .qm-category-modern .qm-category-hero { border: none; background: radial-gradient( 110% 85% at 50% -15%, color-mix(in srgb, var(--qm-card-bg) 94%, #fff) 0%, var(--qm-card-bg) 60% ); box-shadow: 0 20px 50px -14px color-mix(in srgb, var(--qm-body-color) 15%, transparent); } .public-qm.menu-layout-premium .qm-category-modern .qm-soft-chip { border: none; background: color-mix(in srgb, var(--qm-card-bg) 94%, #fff); box-shadow: 0 10px 28px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } .public-qm.menu-layout-premium .qm-category-modern .qm-hero-icon { border-radius: 1.15rem; background: color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)); border: none; box-shadow: 0 10px 26px color-mix(in srgb, var(--qm-primary) 18%, transparent); color: var(--qm-primary); } .public-qm.menu-layout-premium .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border: none !important; border-radius: 1.15rem !important; background: radial-gradient( 100% 70% at 50% 0%, color-mix(in srgb, var(--qm-card-bg) 94%, #fff) 0%, var(--qm-card-bg) 70% ) !important; box-shadow: 0 18px 46px -12px color-mix(in srgb, var(--qm-body-color) 15%, transparent) !important; } .public-qm.menu-layout-premium .qm-product-modern .qm-price-panel { border: none; background: radial-gradient( 120% 80% at 50% 0%, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-primary) 6%, var(--qm-card-bg)) ); box-shadow: 0 14px 36px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-premium .qm-product-modern .qm-detail-icon { border: none; background: color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)); box-shadow: 0 10px 26px color-mix(in srgb, var(--qm-primary) 15%, transparent); color: var(--qm-primary); } .public-qm.menu-layout-premium .qm-product-modern .qm-info-tile { border: none; background: color-mix(in srgb, var(--qm-body-color) 5%, var(--qm-card-bg)); box-shadow: 0 10px 28px color-mix(in srgb, var(--qm-body-color) 9%, transparent); } .public-qm.menu-layout-premium .qm-product-modern .qm-sticky-actions { border: none; box-shadow: 0 18px 44px color-mix(in srgb, var(--qm-body-color) 14%, transparent); } .public-qm.menu-layout-premium .qm-product-modern .qm-mobile-topbar .btn { border: none; box-shadow: 0 12px 32px color-mix(in srgb, var(--qm-body-color) 14%, transparent); } /* ── [PRESET: modern] Modern — primary rim, kontrast chip ── */ .public-qm.menu-layout-modern .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, transparent); background: var(--qm-card-bg); box-shadow: 0 8px 28px color-mix(in srgb, var(--qm-body-color) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } .public-qm.menu-layout-modern .qm-menu-modern .qm-menu-hero::after { background: color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-modern .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-modern .qm-menu-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: var(--qm-card-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent); } .public-qm.menu-layout-modern .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, transparent); background: var(--qm-card-bg); box-shadow: 0 10px 32px color-mix(in srgb, var(--qm-body-color) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } .public-qm.menu-layout-modern .qm-category-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-primary) 28%, transparent); background: var(--qm-card-bg); } .public-qm.menu-layout-modern .qm-category-modern .qm-hero-icon { border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--qm-primary) 28%, transparent); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); color: var(--qm-primary); } .public-qm.menu-layout-modern .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: var(--qm-radius-sm) !important; border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, transparent) !important; box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--qm-body-color) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent) !important; } .public-qm.menu-layout-modern .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, transparent); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } .public-qm.menu-layout-modern .qm-product-modern .qm-detail-icon { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); color: var(--qm-primary); } .public-qm.menu-layout-modern .qm-product-modern .qm-sticky-actions { border: 1px solid color-mix(in srgb, var(--qm-primary) 18%, transparent); box-shadow: 0 8px 28px color-mix(in srgb, var(--qm-body-color) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 12%, transparent); } /* ── [PRESET: glass] Cam — küçük yüzeylerde blur (hero görselinde blur yok) ── */ .public-qm.menu-layout-glass .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 72%, #fff), var(--qm-card-bg) ); box-shadow: 0 16px 42px color-mix(in srgb, var(--qm-body-color) 11%, transparent); } .public-qm.menu-layout-glass .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-glass .qm-menu-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 65%, #fff); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 65%, #fff), color-mix(in srgb, var(--qm-card-bg) 82%, #fff) ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .public-qm.menu-layout-glass .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); background: linear-gradient( 160deg, color-mix(in srgb, var(--qm-card-bg) 88%, #fff), var(--qm-card-bg) ); box-shadow: 0 16px 42px color-mix(in srgb, var(--qm-body-color) 11%, transparent); } .public-qm.menu-layout-glass .qm-category-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 65%, #fff); background: color-mix(in srgb, var(--qm-card-bg) 78%, #fff); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .public-qm.menu-layout-glass .qm-category-modern .qm-hero-icon { border-radius: 1.05rem; border: 1px solid color-mix(in srgb, var(--qm-card-bg) 65%, #fff); background: color-mix(in srgb, var(--qm-primary) 16%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--qm-primary); } .public-qm.menu-layout-glass .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: 1.08rem !important; border: 1px solid color-mix(in srgb, var(--qm-card-bg) 72%, #fff) !important; background: linear-gradient( 160deg, color-mix(in srgb, var(--qm-card-bg) 82%, #fff), var(--qm-card-bg) ) !important; box-shadow: 0 16px 42px color-mix(in srgb, var(--qm-body-color) 11%, transparent) !important; } .public-qm.menu-layout-glass .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); background: linear-gradient( 165deg, color-mix(in srgb, var(--qm-primary) 14%, transparent), color-mix(in srgb, var(--qm-card-bg) 88%, #fff) ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .public-qm.menu-layout-glass .qm-product-modern .qm-detail-icon { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 65%, #fff); background: color-mix(in srgb, var(--qm-card-bg) 75%, #fff); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .public-qm.menu-layout-glass .qm-product-modern .qm-info-tile { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 72%, #fff); background: color-mix(in srgb, var(--qm-card-bg) 88%, #fff); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .public-qm.menu-layout-glass .qm-product-modern .qm-sticky-actions { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); background: color-mix(in srgb, var(--qm-card-bg) 88%, #fff); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ── [PRESET: bold] Vurgulu — kalın border, sol şerit hero ── */ .public-qm.menu-layout-bold .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); border-left: 5px solid var(--qm-primary); background: linear-gradient( 90deg, color-mix(in srgb, var(--qm-primary) 12%, transparent) 0%, var(--qm-card-bg) 36% ); box-shadow: 0 12px 32px color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-bold .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-bold .qm-menu-modern .qm-soft-chip { border: 2px solid color-mix(in srgb, var(--qm-primary) 35%, transparent); background: var(--qm-card-bg); } .public-qm.menu-layout-bold .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); border-left: 6px solid var(--qm-primary); background: linear-gradient( 90deg, color-mix(in srgb, var(--qm-primary) 14%, transparent) 0%, var(--qm-card-bg) 42% ); box-shadow: 0 12px 34px color-mix(in srgb, var(--qm-primary) 20%, transparent); } .public-qm.menu-layout-bold .qm-category-modern .qm-soft-chip { border: 2px solid color-mix(in srgb, var(--qm-primary) 30%, transparent); background: var(--qm-card-bg); } .public-qm.menu-layout-bold .qm-category-modern .qm-hero-icon { border-radius: 1rem; border: 2px solid color-mix(in srgb, var(--qm-primary) 35%, transparent); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); color: var(--qm-primary); } .public-qm.menu-layout-bold .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: 1rem !important; border: 2px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)) !important; border-left: 5px solid var(--qm-primary) !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--qm-body-color) 11%, transparent) !important; } .public-qm.menu-layout-bold .qm-product-modern .qm-price-panel { border: 2px solid color-mix(in srgb, var(--qm-primary) 35%, transparent); border-left-width: 5px; border-left-color: var(--qm-primary); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); } .public-qm.menu-layout-bold .qm-product-modern .qm-detail-icon { border: 2px solid color-mix(in srgb, var(--qm-primary) 28%, transparent); background: color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)); color: var(--qm-primary); } .public-qm.menu-layout-bold .qm-product-modern .qm-sticky-actions { border: 2px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); border-left: 5px solid var(--qm-primary); } /* ── [PRESET: soft] Yumuşak — pastel hero, pill chip ── */ .public-qm.menu-layout-soft .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, var(--qm-border)); background: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), var(--qm-card-bg) ); border-radius: 1.5rem !important; box-shadow: 0 8px 28px color-mix(in srgb, var(--qm-primary) 22%, transparent), 0 18px 46px color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-soft .qm-menu-modern .qm-menu-hero::after { background: color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-soft .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-soft .qm-menu-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); border-radius: 999px; } .public-qm.menu-layout-soft .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, var(--qm-border)); border-radius: 1.5rem !important; background: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)), var(--qm-card-bg) ); box-shadow: 0 10px 32px color-mix(in srgb, var(--qm-primary) 24%, transparent), 0 18px 44px color-mix(in srgb, var(--qm-primary) 16%, transparent); } .public-qm.menu-layout-soft .qm-category-modern .qm-soft-chip { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); } .public-qm.menu-layout-soft .qm-category-modern .qm-hero-icon { border-radius: 1.35rem; background: color-mix(in srgb, var(--qm-primary) 16%, var(--qm-card-bg)); border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, transparent); color: var(--qm-primary); } .public-qm.menu-layout-soft .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: 1.35rem !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, var(--qm-border)) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-card-bg) 93%, var(--qm-primary)), var(--qm-card-bg) ) !important; box-shadow: 0 18px 46px color-mix(in srgb, var(--qm-primary) 26%, transparent) !important; } .public-qm.menu-layout-soft .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, var(--qm-border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)) ); border-radius: 1.35rem !important; box-shadow: 0 14px 38px color-mix(in srgb, var(--qm-primary) 22%, transparent); } .public-qm.menu-layout-soft .qm-product-modern .qm-detail-icon { border-radius: 1.1rem; border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)); color: var(--qm-primary); } .public-qm.menu-layout-soft .qm-product-modern .qm-detail-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); } .public-qm.menu-layout-soft .qm-product-modern .qm-info-tile { border: 1px solid color-mix(in srgb, var(--qm-primary) 18%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); border-radius: 1.15rem; } .public-qm.menu-layout-soft .qm-product-modern .qm-sticky-actions { border-radius: 1.35rem !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--qm-primary) 22%, transparent); } /* ── [PRESET: neon] Cyber glow — menü, kategori, eski ürün detay ── */ .public-qm.menu-layout-neon .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 48%, var(--qm-border)); background: linear-gradient( 135deg, color-mix(in srgb, var(--qm-primary) 16%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-card-bg) 94%, #0a0f1a) ); box-shadow: 0 0 32px color-mix(in srgb, var(--qm-primary) 30%, transparent), 0 14px 38px -10px color-mix(in srgb, var(--qm-body-color) 18%, transparent); } .public-qm.menu-layout-neon .qm-menu-modern .qm-menu-hero::after { background: color-mix(in srgb, var(--qm-primary) 22%, transparent); } .public-qm.menu-layout-neon .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-neon .qm-menu-modern .qm-soft-chip { border: var(--qm-chip-border); background: var(--qm-chip-bg); box-shadow: 0 0 16px color-mix(in srgb, var(--qm-primary) 20%, transparent); } .public-qm.menu-layout-neon .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 42%, var(--qm-border)); background: linear-gradient( 135deg, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-card-bg) 95%, #0a0f1a) ); box-shadow: 0 0 28px color-mix(in srgb, var(--qm-primary) 26%, transparent), 0 14px 36px -10px color-mix(in srgb, var(--qm-body-color) 16%, transparent); } .public-qm.menu-layout-neon .qm-category-modern .qm-soft-chip { border: var(--qm-chip-border); background: var(--qm-chip-bg); } .public-qm.menu-layout-neon .qm-category-modern .qm-hero-icon { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-primary) 45%, transparent); background: color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)); color: var(--qm-primary); box-shadow: 0 0 18px color-mix(in srgb, var(--qm-primary) 28%, transparent); } .public-qm.menu-layout-neon .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: var(--qm-radius-sm) !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 38%, var(--qm-border)) !important; background: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 96%, #0a0f1a) ) !important; box-shadow: 0 0 24px color-mix(in srgb, var(--qm-primary) 22%, transparent), 0 12px 30px -8px color-mix(in srgb, var(--qm-body-color) 14%, transparent) !important; } .public-qm.menu-layout-neon .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-primary) 42%, var(--qm-border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-card-bg) 96%, #0a0f1a) ); box-shadow: 0 0 28px color-mix(in srgb, var(--qm-primary) 26%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-neon .qm-product-modern .qm-detail-icon { border: 1px solid color-mix(in srgb, var(--qm-primary) 40%, transparent); background: color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)); color: var(--qm-primary); box-shadow: 0 0 14px color-mix(in srgb, var(--qm-primary) 22%, transparent); } .public-qm.menu-layout-neon .qm-product-modern .qm-detail-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 38%, transparent); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); } .public-qm.menu-layout-neon .qm-product-modern .qm-info-tile { border: 1px solid color-mix(in srgb, var(--qm-primary) 32%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); } .public-qm.menu-layout-neon .qm-product-modern .qm-sticky-actions { border: 1px solid color-mix(in srgb, var(--qm-primary) 38%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--qm-primary) 24%, transparent); } /* ── [PRESET: aurora] Kuzey ışıkları — menü, kategori, eski ürün detay ── */ .public-qm.menu-layout-aurora .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, var(--qm-border)); border-radius: var(--qm-radius) !important; background: linear-gradient( 125deg, color-mix(in srgb, var(--qm-primary) 16%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 12%, var(--qm-card-bg)) 48%, var(--qm-card-bg) ); box-shadow: 0 16px 44px color-mix(in srgb, var(--qm-primary) 20%, transparent), 0 24px 56px -12px color-mix(in srgb, var(--qm-secondary) 16%, transparent); } .public-qm.menu-layout-aurora .qm-menu-modern .qm-menu-hero::after { background: linear-gradient( 90deg, color-mix(in srgb, var(--qm-primary) 20%, transparent), color-mix(in srgb, var(--qm-secondary) 16%, transparent) ); } .public-qm.menu-layout-aurora .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-aurora .qm-menu-modern .qm-soft-chip { border: var(--qm-chip-border); background: var(--qm-chip-bg); border-radius: 999px; } .public-qm.menu-layout-aurora .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, transparent); border-radius: var(--qm-radius) !important; background: linear-gradient( 130deg, color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 10%, var(--qm-card-bg)) 50%, var(--qm-card-bg) ); box-shadow: 0 20px 50px color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-aurora .qm-category-modern .qm-soft-chip { border: var(--qm-chip-border); background: var(--qm-chip-bg); border-radius: 999px; } .public-qm.menu-layout-aurora .qm-category-modern .qm-hero-icon { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, transparent); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 10%, var(--qm-card-bg)) ); color: var(--qm-primary); } .public-qm.menu-layout-aurora .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: var(--qm-radius) !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 18%, var(--qm-border)) !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-secondary)) ) !important; box-shadow: 0 14px 40px color-mix(in srgb, var(--qm-primary) 16%, transparent), 0 20px 48px -12px color-mix(in srgb, var(--qm-secondary) 12%, transparent) !important; } .public-qm.menu-layout-aurora .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); border-radius: var(--qm-radius) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 10%, var(--qm-card-bg)) ); box-shadow: 0 16px 40px color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-aurora .qm-product-modern .qm-detail-icon { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 8%, var(--qm-card-bg)) ); color: var(--qm-primary); } .public-qm.menu-layout-aurora .qm-product-modern .qm-detail-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, transparent); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); border-radius: 999px; } .public-qm.menu-layout-aurora .qm-product-modern .qm-info-tile { border: 1px solid color-mix(in srgb, var(--qm-primary) 16%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); border-radius: var(--qm-radius-sm); } .public-qm.menu-layout-aurora .qm-product-modern .qm-sticky-actions { border-radius: var(--qm-radius) !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--qm-primary) 16%, transparent); } /* ── [PRESET: nexus] Hologrid — menü, kategori, eski ürün detay ── */ .public-qm.menu-layout-nexus .qm-menu-modern .qm-menu-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 28%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 12%, transparent), 0 14px 36px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-nexus .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-nexus .qm-menu-modern .qm-soft-chip { border: var(--qm-chip-border); background: var(--qm-chip-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .public-qm.menu-layout-nexus .qm-category-modern .qm-category-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } .public-qm.menu-layout-nexus .qm-category-modern .qm-soft-chip { border: var(--qm-chip-border); background: var(--qm-chip-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .public-qm.menu-layout-nexus .qm-category-modern .qm-hero-icon { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-primary) 30%, transparent); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); color: var(--qm-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent); } .public-qm.menu-layout-nexus .qm-category-modern .qm-product-grid > .qm-card:not(.qm-menu-tile) { border-radius: var(--qm-radius-sm) !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, var(--qm-border)) !important; background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent), 0 12px 28px color-mix(in srgb, var(--qm-body-color) 11%, transparent) !important; } .public-qm.menu-layout-nexus .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-primary) 28%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 12%, transparent); } .public-qm.menu-layout-nexus .qm-product-modern .qm-detail-icon { border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, transparent); background: color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--qm-primary); } .public-qm.menu-layout-nexus .qm-product-modern .qm-detail-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, transparent); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); } .public-qm.menu-layout-nexus .qm-product-modern .qm-info-tile { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .public-qm.menu-layout-nexus .qm-product-modern .qm-sticky-actions { border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, transparent); background: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .public-qm.menu-layout-nexus .qm-menu-modern .qm-menu-hero, .public-qm.menu-layout-nexus .qm-category-modern .qm-category-hero, .public-qm.menu-layout-nexus .qm-product-modern .qm-price-panel, .public-qm.menu-layout-nexus .qm-product-modern .qm-sticky-actions { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* [ETIKET: ROZET] .qm-menu-badge / .qm-detail-badge — preset stili (içerik admin’den) */ .public-qm.menu-layout-minimal .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-minimal .qm-category-modern .qm-menu-badge { background: transparent !important; border: 1px solid var(--qm-border) !important; } .public-qm.menu-layout-list .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-list .qm-category-modern .qm-menu-badge { border-radius: 0.65rem !important; } .public-qm.menu-layout-premium .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-premium .qm-category-modern .qm-menu-badge { border: none !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } .public-qm.menu-layout-modern .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-modern .qm-category-modern .qm-menu-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, transparent) !important; background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)) !important; } .public-qm.menu-layout-glass .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-glass .qm-category-modern .qm-menu-badge { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 70%, #fff) !important; background: color-mix(in srgb, var(--qm-card-bg) 85%, #fff) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .public-qm.menu-layout-bold .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-bold .qm-category-modern .qm-menu-badge { border-left: 3px solid var(--qm-primary) !important; border-radius: 0.5rem !important; } .public-qm.menu-layout-soft .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-soft .qm-category-modern .qm-menu-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent) !important; background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)) !important; } .public-qm.menu-layout-neon .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-neon .qm-category-modern .qm-menu-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 45%, transparent) !important; background: color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--qm-primary) 24%, transparent); } .public-qm.menu-layout-aurora .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-aurora .qm-category-modern .qm-menu-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent) !important; background: linear-gradient( 135deg, color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 10%, var(--qm-card-bg)) ) !important; border-radius: 999px !important; } .public-qm.menu-layout-nexus .qm-menu-modern .qm-menu-badge, .public-qm.menu-layout-nexus .qm-category-modern .qm-menu-badge { border: 1px solid color-mix(in srgb, var(--qm-primary) 28%, transparent) !important; background: color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent); } .public-qm.menu-layout-neon .qm-product-modern .qm-detail-badge { box-shadow: 0 0 12px color-mix(in srgb, var(--qm-primary) 20%, transparent); } .public-qm.menu-layout-aurora .qm-product-modern .qm-detail-badge { border-radius: 999px; } .public-qm.menu-layout-nexus .qm-product-modern .qm-detail-badge { border-radius: var(--qm-radius-sm); } .public-qm.menu-layout-minimal .qm-product-modern .qm-detail-badge { border-radius: 0.65rem; } .public-qm.menu-layout-premium .qm-product-modern .qm-detail-badge { border: none; box-shadow: 0 8px 22px color-mix(in srgb, var(--qm-body-color) 9%, transparent); }