/* ======================================================================== NOVVIA Theme - Custom CSS Tailwind handles utility classes via CDN in dev / compiled in production. This file covers CSS custom properties, animations, WooCommerce overrides, and anything Tailwind utility classes cannot express. ======================================================================== */ /* ----- Design Tokens / CSS Variables ----------------------------------- */ /* Color variables are set by PHP via inline style in . The values below are fallbacks if PHP does not set them. */ :root { --novvia-primary: #0f172a; --novvia-accent: currentColor; /* wird von functions.php ueberschrieben */ --novvia-accent-hover: currentColor; --novvia-success: #16a34a; --novvia-warning: #d97706; --novvia-danger: #dc2626; --novvia-text: #1e293b; --novvia-muted: #64748b; --novvia-bg: #f8fafc; --novvia-card: #ffffff; --novvia-border: #e2e8f0; /* Font - overridden by PHP when a custom font is chosen */ --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Non-color tokens (not set by PHP) */ --header-height: 72px; --header-height-sticky: 56px; --topbar-height: 36px; --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; } /* ----- Base ------------------------------------------------------------- */ html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100vw; } html { overflow-x: hidden; } body { font-family: var(--font-family); color: var(--novvia-text); background-color: var(--novvia-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; width: 100%; } /* ----- Sticky Header ---------------------------------------------------- */ .novvia-header { transition: box-shadow var(--transition-base), height var(--transition-base), padding var(--transition-base); } .novvia-header.is-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: var(--shadow-md); background: var(--novvia-card); } /* Admin-Bar aktiv: Header 32px nach unten schieben */ .admin-bar .novvia-header.is-sticky { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .novvia-header.is-sticky { top: 46px; /* Mobile Admin-Bar ist 46px */ } } /* NWC Kundegruppenwechsler Panel über allem */ #nwc-gs-panel { z-index: 1000001 !important; } .novvia-header.is-sticky .header-main-inner { height: var(--header-height-sticky); } .novvia-header.is-sticky .header-logo img { max-height: var(--header-logo-sticky, none); } /* ----- Top Bar ---------------------------------------------------------- */ .novvia-topbar { height: var(--topbar-height); font-size: 0.8125rem; line-height: var(--topbar-height); } /* ----- Search Bar ------------------------------------------------------- */ .novvia-search-overlay { opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .novvia-search-overlay.is-open { opacity: 1; visibility: visible; } .novvia-search-results { max-height: 400px; overflow-y: auto; } .novvia-search-results::-webkit-scrollbar { width: 6px; } .novvia-search-results::-webkit-scrollbar-thumb { background: var(--novvia-border); border-radius: 3px; } /* ========================================================================== MEGA MENU — Apple-benchmark navigation system ========================================================================== */ /* --- Nav items (top-level) --- */ .novvia-nav-item { position: relative; } /* Invisible hover bridge: prevents mouse gap between nav item and panel */ .novvia-nav-item.has-dropdown::after { content: ''; position: absolute; left: -20px; right: -20px; bottom: -12px; height: 12px; background: transparent; } .novvia-nav-link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--novvia-text); text-decoration: none; transition: color var(--transition-fast); white-space: nowrap; } .novvia-nav-link:hover, .novvia-nav-item.is-active > .novvia-nav-link { color: var(--novvia-accent); } .novvia-nav-label { position: relative; } /* Active indicator line */ .novvia-nav-item.is-active > .novvia-nav-link .novvia-nav-label::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.75rem; height: 2px; background: var(--novvia-accent); border-radius: 1px; } /* Badge */ .novvia-nav-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; color: #fff; background: var(--novvia-accent); border-radius: 9999px; line-height: 1.4; } /* Chevron */ .novvia-nav-chevron { width: 0.875rem; height: 0.875rem; transition: transform var(--transition-base); opacity: 0.5; } .novvia-nav-item:hover > .novvia-nav-link .novvia-nav-chevron, .novvia-nav-item.is-open > .novvia-nav-link .novvia-nav-chevron { transform: rotate(180deg); opacity: 1; } /* --- Mega Panel (full-width dropdown) --- */ .novvia-mega-panel { position: absolute; top: 100%; left: 50%; width: 100vw; background: var(--novvia-card); box-shadow: var(--shadow-xl); border-top: 2px solid var(--novvia-accent); z-index: 999; opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base); pointer-events: none; } .novvia-nav-item.is-open > .novvia-mega-panel, .novvia-nav-item.has-dropdown:hover > .novvia-mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } .novvia-mega-panel__inner { max-width: 80rem; margin: 0 auto; padding: 2rem 1.5rem; } /* --- Mega Grid --- */ .novvia-mega-grid { display: grid; gap: 1.5rem; } .novvia-mega-grid--2 { grid-template-columns: repeat(2, 1fr); } .novvia-mega-grid--3 { grid-template-columns: repeat(3, 1fr); } .novvia-mega-grid--4 { grid-template-columns: repeat(4, 1fr); } .novvia-mega-grid--5 { grid-template-columns: repeat(5, 1fr); } .novvia-mega-grid--6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1024px) { .novvia-mega-grid--5, .novvia-mega-grid--6 { grid-template-columns: repeat(3, 1fr); } } /* --- Category Card --- */ .novvia-mega-cat { min-width: 0; } .novvia-mega-cat__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--novvia-bg, #f1f5f9); margin-bottom: 0.75rem; } .novvia-mega-cat__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .novvia-mega-cat:hover .novvia-mega-cat__image img { transform: scale(1.06); } /* Placeholder icon */ .novvia-mega-cat__image--placeholder { display: flex; align-items: center; justify-content: center; } .novvia-mega-cat__icon { width: 2rem; height: 2rem; color: var(--novvia-muted, #94a3b8); } /* Category name */ .novvia-mega-cat__name { display: flex; align-items: baseline; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--novvia-text); text-decoration: none; transition: color var(--transition-fast); } .novvia-mega-cat__name:hover { color: var(--novvia-accent); } .novvia-mega-cat__count { font-size: 0.6875rem; font-weight: 400; color: var(--novvia-muted); } .novvia-mega-cat__desc { display: block; font-size: 0.75rem; color: var(--novvia-muted); margin-top: 0.125rem; } /* Sub-categories list */ .novvia-mega-cat__subs { list-style: none; margin: 0.5rem 0 0; padding: 0; } .novvia-mega-cat__subs li { padding: 0; } .novvia-mega-cat__subs a { display: block; padding: 0.25rem 0; font-size: 0.8125rem; color: var(--novvia-muted); text-decoration: none; transition: color var(--transition-fast), padding-left var(--transition-fast); } .novvia-mega-cat__subs a:hover { color: var(--novvia-accent); padding-left: 0.25rem; } .novvia-mega-cat__more a { color: var(--novvia-accent); font-weight: 500; font-size: 0.75rem; } /* --- Mega Footer --- */ .novvia-mega-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--novvia-border); } .novvia-mega-footer__link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--novvia-accent); text-decoration: none; transition: gap var(--transition-fast); } .novvia-mega-footer__link:hover { gap: 0.625rem; } .novvia-mega-footer__arrow { width: 1rem; height: 1rem; } .novvia-mega-footer__count { font-size: 0.75rem; color: var(--novvia-muted); } /* --- Loader / Spinner --- */ .novvia-mega-loader { display: flex; align-items: center; justify-content: center; min-height: 200px; } .novvia-mega-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid var(--novvia-border); border-top-color: var(--novvia-accent); border-radius: 50%; animation: novvia-spin 0.6s linear infinite; } @keyframes novvia-spin { to { transform: rotate(360deg); } } /* Hidden swallowed sub-menus */ .novvia-mega-hidden { display: none !important; } /* --- Standard Dropdown (non-mega) --- */ .novvia-dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--novvia-card); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); z-index: 999; padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast); pointer-events: none; } .novvia-nav-item.is-open > .novvia-dropdown, .novvia-nav-item.has-dropdown:hover > .novvia-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .novvia-dropdown__link { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--novvia-text); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .novvia-dropdown__link:hover, .novvia-dropdown__link.is-active { background: var(--novvia-bg, #f1f5f9); color: var(--novvia-accent); } /* --- Mobile Menu Items --- */ .novvia-mobile-item { list-style: none; } .novvia-mobile-item.has-children > .novvia-mobile-sub { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); } .novvia-mobile-link { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; font-size: 1rem; color: var(--novvia-text); text-decoration: none; } .novvia-mobile-link--top { font-weight: 500; color: var(--novvia-primary); } .novvia-mobile-count { font-size: 0.75rem; color: var(--novvia-muted); } .novvia-mobile-sub { list-style: none; padding: 0 0 0 1rem; margin: 0; } /* ----- Mini Cart -------------------------------------------------------- */ .novvia-mini-cart { opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition-base); } .novvia-mini-cart.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .novvia-mini-cart-item + .novvia-mini-cart-item { border-top: 1px solid var(--novvia-border); } /* ----- Mobile Menu Drawer ----------------------------------------------- */ .novvia-mobile-drawer { transform: translateX(-100%); transition: transform var(--transition-base); } .novvia-mobile-drawer.is-open { transform: translateX(0); } .novvia-mobile-overlay { opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .novvia-mobile-overlay.is-open { opacity: 1; visibility: visible; } /* ----- Product Card ----------------------------------------------------- */ .novvia-product-card { background: var(--novvia-card, #ffffff); border: var(--nv-card-border-width, 1px) solid var(--nv-card-border-color, #f1f5f9); border-radius: var(--nv-card-radius, 12px); padding: var(--nv-card-padding, 0); box-sizing: border-box; transition: box-shadow var(--transition-base), transform var(--transition-base); } .novvia-product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .novvia-product-card .product-image-wrapper { position: relative; overflow: hidden; background-color: #ffffff; background-color: var(--novvia-card, #ffffff); aspect-ratio: var(--nv-card-ratio, 1 / 1); } /* Bilder: Edge zeigt grauen Placeholder bei loading=lazy → explizit weisser BG */ .novvia-product-card .product-image-wrapper img { background-color: #ffffff; background-color: var(--novvia-card, #ffffff); } .novvia-product-card .product-image-hover { position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition-base); } .novvia-product-card:hover .product-image-hover { opacity: 1; } .novvia-product-card .product-actions-overlay { position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(100%); transition: transform var(--transition-base); } .novvia-product-card:hover .product-actions-overlay { transform: translateY(0); } .novvia-product-badge { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); line-height: 1; } /* ----- Quick View Modal ------------------------------------------------- */ .novvia-quick-view-modal { opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .novvia-quick-view-modal.is-open { opacity: 1; visibility: visible; } .novvia-quick-view-content { transform: scale(0.95); transition: transform var(--transition-base); } /* ═══════════════════════════════════════════════════════════════ WOOCOMMERCE GLOBAL: Dark-Mode / iOS-Invert-Safety Force color-scheme=light überall wo WC rendert, Inputs + Notices sicher. ═══════════════════════════════════════════════════════════════ */ .woocommerce, .woocommerce-page, .woocommerce-account, .woocommerce-cart, .woocommerce-checkout, .single-product, .woocommerce-order-received, .nv-empty-cart, .nv-quick-view-modal { color-scheme: light } .nv-empty-cart, .nv-empty-cart__heading, .nv-empty-cart__sub, .nv-empty-cart p{ color:#0f172a!important } .nv-empty-cart__heading{ color:#0f172a!important } .woocommerce .cart-empty, .woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner{ color:#0f172a!important;background:#f1f5f9!important;border:1px solid #e2e8f0!important; padding:1rem 1.25rem!important;border-radius:10px!important; } .woocommerce-info a,.woocommerce-message a{ color:var(--novvia-accent,#2bbcc4)!important;font-weight:700 } /* Quick-View: Mengen-Input lesbar (Dark-Mode-safe) */ .novvia-quick-view-content{color-scheme:light} .novvia-quick-view-content input[type=number], .novvia-quick-view-content input.qty, .novvia-quick-view-content .quantity input{ background:#fff!important;color:#0f172a!important; border:1.5px solid #e2e8f0!important;border-radius:8px!important; padding:.5rem .65rem!important;font-weight:700!important;text-align:center!important; -webkit-text-fill-color:#0f172a;-webkit-appearance:none;appearance:none; min-width:56px; } .novvia-quick-view-content input:focus{border-color:#2bbcc4!important;outline:0!important;box-shadow:0 0 0 3px rgba(43,188,196,.15)!important} .novvia-quick-view-modal.is-open .novvia-quick-view-content { transform: scale(1); } /* ----- WooCommerce Overrides -------------------------------------------- */ /* Remove default WC styling remnants */ .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count { margin: 0; } /* Star rating */ .woocommerce .star-rating { font-size: 0.875rem; color: var(--nv-star, #f59e0b); } .woocommerce .star-rating span { color: var(--nv-star, #f59e0b); } /* Price */ .woocommerce ins { text-decoration: none; color: var(--novvia-danger, #dc2626); font-weight: 700; } .woocommerce del { text-decoration: line-through; text-decoration-color: var(--novvia-muted, #94a3b8); color: var(--novvia-muted, #94a3b8); font-size: 0.85em; font-weight: 400; margin-right: 6px; } .novvia-price del + ins { font-size: 1.1em; } .novvia-price .woocommerce-Price-amount { white-space: nowrap; } /* Quantity input */ .novvia-quantity { display: inline-flex; align-items: center; border: 1px solid var(--novvia-border); border-radius: var(--radius-md); overflow: hidden; background: #ffffff; color-scheme: light; } .novvia-quantity button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: none; cursor: pointer; color: #0f172a; font-size: 1rem; font-weight: 700; transition: background var(--transition-fast); } .novvia-quantity button:hover { background: #f1f5f9; color: var(--novvia-accent); } .novvia-quantity input[type="number"] { width: 48px; text-align: center; border: none; border-left: 1px solid var(--novvia-border); border-right: 1px solid var(--novvia-border); height: 36px; font-size: 0.875rem; background: #ffffff; color: #0f172a; -webkit-text-fill-color: #0f172a; -moz-appearance: textfield; appearance: textfield; } /* iOS Dark-Mode Quirk absichern */ @media (prefers-color-scheme: dark) { .novvia-quantity, .novvia-quantity button, .novvia-quantity input[type="number"] { background: #ffffff !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } } .novvia-quantity input[type="number"]::-webkit-inner-spin-button, .novvia-quantity input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Form fields */ .woocommerce form .form-row label { font-weight: 500; font-size: 0.875rem; color: var(--novvia-text); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 0.625rem 0.875rem; border: 1px solid var(--novvia-border); border-radius: var(--radius-md); font-size: 0.875rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: none; border-color: var(--novvia-accent); box-shadow: 0 0 0 3px rgb(43 188 196 / .15); } /* Buttons */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background: var(--novvia-accent); color: #fff; border: none; border-radius: var(--radius-md); padding: 0.625rem 1.5rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); text-transform: none; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--novvia-accent-hover); transform: translateY(-1px); } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background: var(--novvia-primary); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover { background: var(--novvia-text, #1e293b); } /* Tabs on single product */ .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; gap: 0; border-bottom: 2px solid var(--novvia-border); } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: none; background: transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0.75rem 1.25rem; color: var(--novvia-muted); font-weight: 500; text-decoration: none; display: block; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--transition-fast), border-color var(--transition-fast); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--novvia-accent); border-bottom-color: var(--novvia-accent); } /* Notices */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--novvia-accent); background: var(--nv-bg-alt, #f0fdfa); } .woocommerce .woocommerce-error { border-top-color: var(--novvia-danger); background: #fef2f2; } /* Pagination */ .woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 0.25rem; justify-content: center; } .woocommerce nav.woocommerce-pagination ul li { border: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { padding: 0.5rem 0.875rem; border: 1px solid var(--novvia-border); border-radius: var(--radius-md); color: var(--novvia-text); text-decoration: none; font-size: 0.875rem; transition: all var(--transition-fast); } .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--novvia-accent); border-color: var(--novvia-accent); color: #fff; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--novvia-accent); border-color: var(--novvia-accent); color: #fff; } /* Cart table */ .woocommerce table.shop_table { border: none; border-collapse: separate; border-spacing: 0; } .woocommerce table.shop_table th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--novvia-muted); border-bottom: 2px solid var(--novvia-border); padding: 1rem; } .woocommerce table.shop_table td { padding: 1rem; border-bottom: 1px solid var(--novvia-border); vertical-align: middle; } /* My Account */ .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 0.75rem 1rem; color: var(--novvia-text); text-decoration: none; border-radius: var(--radius-md); transition: background var(--transition-fast); } .woocommerce-MyAccount-navigation ul li a:hover, .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--nv-bg-alt, #f0fdfa); color: var(--novvia-accent); } /* ----- Animations ------------------------------------------------------- */ @keyframes novvia-fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes novvia-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes novvia-slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes novvia-spin { to { transform: rotate(360deg); } } .novvia-spinner { width: 24px; height: 24px; border: 2px solid var(--novvia-border); border-top-color: var(--novvia-accent); border-radius: 50%; animation: novvia-spin 0.6s linear infinite; } /* ----- Back to Top ------------------------------------------------------ */ .novvia-back-to-top { opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition-base); } .novvia-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } /* ----- Accessibility ---------------------------------------------------- */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--novvia-card); clip: auto; clip-path: none; color: var(--novvia-text); display: block; font-size: 1rem; height: auto; left: 5px; padding: 1rem; top: 5px; width: auto; z-index: 100000; box-shadow: var(--shadow-md); } /* ----- Grid / List Toggle ----------------------------------------------- */ .novvia-products-grid { display: grid; gap: 1.5rem; /* Default: auto-fill basierend auf Karten-Min-Breite. Wird von functions.php mit fester Spaltenzahl ueberschrieben wenn dort nicht "auto" gewaehlt. */ grid-template-columns: repeat(auto-fill, minmax(var(--nv-card-min, 220px), 1fr)); } /* Produkt-Karten: einheitliche Hoehe durch feste Bildverhaeltnisse */ .novvia-product-card { min-width: 0; /* Grid overflow verhindern */ } /* min-height/max-height entfernt — aspect-ratio steuert die Hoehe */ /* Listen-Ansicht */ .novvia-products-grid.is-list { grid-template-columns: 1fr; } .novvia-products-grid.is-list .novvia-product-card { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; } @media (max-width: 768px) { .novvia-products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .novvia-products-grid.is-list .novvia-product-card { grid-template-columns: 140px 1fr; } } @media (max-width: 480px) { .novvia-products-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* ----- Focus Visible ---------------------------------------------------- */ *:focus-visible { outline: 2px solid var(--novvia-accent); outline-offset: 2px; } /* ----- AJAX Filter Panel (Phase 4) -------------------------------------- */ .novvia-filter-panel { animation: novvia-fadeIn var(--transition-base) forwards; } .novvia-scrollbar::-webkit-scrollbar { width: 4px; } .novvia-scrollbar::-webkit-scrollbar-thumb { background: var(--novvia-border); border-radius: 2px; } .novvia-scrollbar::-webkit-scrollbar-track { background: transparent; } /* Preis-Slider Akzentfarbe */ input[type="range"].accent-novvia-500 { accent-color: var(--novvia-accent); } /* Aktive Filter Chips */ #novvia-active-filters button { transition: background var(--transition-fast); } /* Mobile Filter Drawer */ #novvia-mobile-filter-drawer { transition: transform var(--transition-base); } /* ----- Quick View Modal (Phase 4, erweitert) ---------------------------- */ .novvia-qv-thumb.is-active, .novvia-qv-thumb:hover { border-color: var(--novvia-accent) !important; } /* ----- Product Swatches (Phase 4) --------------------------------------- */ .novvia-swatch { cursor: pointer; position: relative; } .novvia-swatch-active::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--novvia-accent); border-radius: inherit; pointer-events: none; } .novvia-swatch-color.novvia-swatch-active::after { border-radius: 50%; } .novvia-swatch-button.novvia-swatch-active { border-color: var(--novvia-accent); color: var(--novvia-accent); background: var(--nv-bg-alt, #f0fdfa); } /* Loop Swatches: Kleiner Hover-Effekt */ .novvia-loop-swatches .novvia-swatch:hover { transform: scale(1.2); transition: transform var(--transition-fast); } /* ----- Compare Bar (Phase 4) -------------------------------------------- */ #novvia-compare-bar { transition: transform var(--transition-base); } .novvia-compare-item { animation: novvia-fadeIn var(--transition-fast) forwards; } .novvia-compare-table table { border: 1px solid var(--novvia-border); border-radius: var(--radius-lg); overflow: hidden; } .novvia-compare-table th { position: sticky; left: 0; background: var(--novvia-card); z-index: 1; } /* ----- Wishlist (Phase 4) ----------------------------------------------- */ .novvia-wishlist-item { transition: all var(--transition-base); } .novvia-wishlist-item:hover { box-shadow: var(--shadow-md); } /* Herz-Animation beim Toggle */ .novvia-wishlist-btn.text-red-500 svg { animation: novvia-heartbeat 0.4s ease-in-out; } @keyframes novvia-heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.3); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } /* ----- Produkt-Card Overlay-Buttons (Phase 4) --------------------------- */ .novvia-product-card .novvia-quick-view-btn, .novvia-product-card .novvia-compare-btn, .novvia-product-card .novvia-wishlist-btn { z-index: 5; } /* Sicherstellen dass Overlay-Buttons sichtbar werden */ .novvia-product-card:hover .novvia-quick-view-btn, .novvia-product-card:hover .novvia-compare-btn, .novvia-product-card:hover .novvia-wishlist-btn, .novvia-product-card:focus-within .novvia-quick-view-btn, .novvia-product-card:focus-within .novvia-compare-btn, .novvia-product-card:focus-within .novvia-wishlist-btn { opacity: 1; } /* ----- Front Page Sections (Phase 5) ------------------------------------ */ .novvia-section-categories a:hover img { transform: scale(1.05); } .novvia-section-categories a img { transition: transform 0.5s ease; } .novvia-hero-fallback { min-height: 400px; display: flex; align-items: center; } /* RevSlider Container Override */ .novvia-slider-wrapper { width: 100%; overflow: hidden; } .novvia-slider-lazy { min-height: 400px; display: flex; align-items: center; justify-content: center; } /* ----- Skeleton Loading Animation --------------------------------------- */ @keyframes novvia-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .novvia-skeleton { background: linear-gradient( 90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75% ); background-size: 200% 100%; animation: novvia-skeleton 1.5s ease infinite; border-radius: var(--radius-md); } /* ----- Custom Scrollbar (Mega Menu, Filter) ----------------------------- */ .novvia-mega-menu::-webkit-scrollbar, .novvia-filter-panel::-webkit-scrollbar { width: 6px; } .novvia-mega-menu::-webkit-scrollbar-thumb, .novvia-filter-panel::-webkit-scrollbar-thumb { background: var(--novvia-border); border-radius: 3px; } /* ----- Slide-Right Animation (Mobile Filter) ----------------------------- */ @keyframes novvia-slideRight { from { transform: translateX(100%); } to { transform: translateX(0); } } /* ----- Brands Section (grayscale to color) ------------------------------- */ .novvia-section-brands a { transition: filter 0.3s ease, opacity 0.3s ease; } /* ----- Newsletter Section ------------------------------------------------ */ .novvia-section-newsletter form { max-width: 28rem; margin: 0 auto; } /* ======================================================================== SINGLE PRODUCT PAGE - Description Right Layout ======================================================================== */ /* Breadcrumb */ .novvia-sp-breadcrumb { font-size: var(--nv-breadcrumb-size, 0.8125rem); color: var(--nv-breadcrumb-color, var(--novvia-muted)); margin-bottom: 1.5rem; } .novvia-sp-breadcrumb-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .novvia-sp-breadcrumb-sep { margin: 0 0.375rem; color: var(--nv-breadcrumb-sep-color, var(--novvia-border)); } .novvia-sp-breadcrumb a { color: var(--nv-breadcrumb-link-color, var(--novvia-muted)); text-decoration: none; transition: color var(--transition-fast); } .novvia-sp-breadcrumb a:hover { color: var(--nv-breadcrumb-hover-color, var(--novvia-accent)); } /* WC Standard-Breadcrumb gleich stylen */ .woocommerce-breadcrumb { font-size: var(--nv-breadcrumb-size, 0.8125rem); color: var(--nv-breadcrumb-color, var(--novvia-muted)); margin-bottom: 1.5rem; } .woocommerce-breadcrumb a { color: var(--nv-breadcrumb-link-color, var(--novvia-muted)); text-decoration: none; } .woocommerce-breadcrumb a:hover { color: var(--nv-breadcrumb-hover-color, var(--novvia-accent)); } /* Layout: 55/45 split */ .novvia-sp-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; } @media (min-width: 1024px) { .novvia-sp-layout { grid-template-columns: 55fr 45fr; gap: 3rem; } } /* Gallery */ .novvia-sp-gallery { display: flex; flex-direction: column; gap: 0.75rem; } .novvia-sp-main-image { position: relative; aspect-ratio: 1 / 1; background: var(--nv-product-image-bg, #ffffff); color-scheme: light; border-radius: var(--nv-product-image-radius, var(--radius-xl)); overflow: hidden; border: var(--nv-product-image-border-width, 1px) solid var(--nv-product-image-border-color, var(--novvia-border)); padding: var(--nv-product-image-padding, 0); box-sizing: border-box; } /* iOS prefers-color-scheme: dark + transparente PNGs — Hintergrund bleibt der gesetzte Wert, nicht dunkel */ @media (prefers-color-scheme: dark) { .novvia-sp-main-image, .novvia-sp-thumb, .novvia-sp-gallery img { background: var(--nv-product-image-bg, #ffffff) !important; } } .novvia-sp-main-image .novvia-gallery-main { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--transition-base); } .novvia-sp-badge { position: absolute; top: 0.75rem; left: 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.025em; padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); z-index: 10; line-height: 1.2; } .novvia-sp-badge-sale { background: var(--novvia-danger); color: #fff; } /* Thumbnails */ .novvia-sp-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; } .novvia-gallery-thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; cursor: pointer; background: transparent; padding: 0; transition: border-color var(--transition-fast); } .novvia-gallery-thumb:hover, .novvia-gallery-thumb:focus-visible { border-color: var(--novvia-accent); } .novvia-gallery-thumb.is-active { border-color: var(--novvia-accent); } .novvia-sp-thumb-img { width: 100%; height: 100%; object-fit: cover; } /* Info Panel (Right Side) */ .novvia-sp-info { display: flex; flex-direction: column; gap: 0; } @media (min-width: 1024px) { .novvia-sp-info { position: sticky; top: calc(var(--header-height-sticky, 56px) + 1.5rem); align-self: start; max-height: calc(100vh - var(--header-height-sticky, 56px) - 3rem); overflow-y: auto; padding-right: 0.5rem; } } .novvia-sp-title { font-size: 1.5rem; font-weight: 700; color: var(--novvia-text); line-height: 1.3; margin: 0 0 0.75rem; } @media (min-width: 768px) { .novvia-sp-title { font-size: 1.75rem; } } /* Rating */ .novvia-sp-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .novvia-sp-stars { display: flex; align-items: center; color: var(--nv-star, #f59e0b); } .novvia-sp-star { width: 1rem; height: 1rem; } .novvia-sp-star-empty { color: var(--novvia-border); } .novvia-sp-rating-link { font-size: 0.8125rem; color: var(--novvia-muted); text-decoration: none; transition: color var(--transition-fast); } .novvia-sp-rating-link:hover { color: var(--novvia-accent); } /* Price */ .novvia-sp-price { font-size: 1.5rem; font-weight: 700; color: var(--novvia-text); margin-bottom: 1rem; } /* Short Description */ .novvia-sp-short-desc { font-size: 0.875rem; color: var(--novvia-muted); line-height: 1.7; margin-bottom: 1.25rem; } /* Full Description */ .novvia-sp-full-desc { margin-bottom: 1.25rem; background: transparent !important; padding: 0 !important; } /* Drawer-Titel fuer Beschreibung und Tabs ausblenden (Close-Button bleibt) */ #drawer-long-desc .novvia-drawer-title, [id^="drawer-tab-"] .novvia-drawer-title { display: none !important; } /* ========================================================================= Produkt-Karten-Klassen (statt hardcoded Tailwind) Alle Farben kommen aus den globalen Theme-Settings (Tab "Farben") ========================================================================= */ /* Badges (Sale / Neu / Ausverkauft) */ .nv-badge--sale { background: var(--novvia-sale, #dc2626); color: #fff; } .nv-badge--new { background: var(--novvia-accent); color: #fff; } .nv-badge--unavailable { background: var(--novvia-muted, #64748b); color: #fff; } /* Karten-Texte */ .nv-card-meta { color: var(--novvia-muted, #64748b); } .nv-card-title { color: var(--novvia-text, #1e293b); } .nv-card-title a { color: inherit; text-decoration: none; transition: color .15s ease; } .nv-card-title a:hover { color: var(--novvia-accent); } .nv-card-price { color: var(--novvia-text, #1e293b); } /* Bewertungssterne */ .nv-card-stars { color: var(--novvia-star, #f59e0b); } .nv-card-star-empty { color: var(--novvia-border, #e2e8f0); } /* Sold-Out Pill */ .nv-card-soldout-pill { background: var(--novvia-bg-alt, #f1f5f9); color: var(--novvia-muted, #64748b); cursor: not-allowed; } /* ========================================================================= HEADER (Topbar + Main) — alle Farben aus Theme-Settings ========================================================================= */ /* Topbar (oberer schmaler Streifen) */ .novvia-topbar { background: var(--nv-header-bg, var(--novvia-primary, #0f172a)); color: var(--nv-header-text, #ffffff); } .novvia-topbar a { color: var(--nv-header-text-muted, rgba(255,255,255,.7)); transition: color .15s ease; } .novvia-topbar a:hover { color: var(--nv-header-text, #ffffff); } .novvia-topbar .nv-topbar-promo { color: var(--nv-header-accent, var(--novvia-accent)); } .novvia-topbar .nv-topbar-right { color: var(--nv-header-text-muted, rgba(255,255,255,.6)); } /* Header Main */ .header-main-inner .nv-search-trigger-bar { background: var(--novvia-bg-alt, #f1f5f9); color: var(--novvia-muted, #64748b); transition: color .15s ease; } .header-main-inner .nv-search-trigger-bar:hover { color: var(--novvia-text, #1e293b); } .header-main-inner .nv-header-icon { color: var(--novvia-text, #1e293b); transition: color .15s ease; } .header-main-inner .nv-header-icon:hover { color: var(--novvia-accent); } .header-main-inner .nv-cart-count-badge { background: var(--novvia-accent); color: #fff; } .header-main-inner .nv-site-title { color: var(--novvia-text, #1e293b); transition: color .15s ease; } .header-main-inner .nv-site-title:hover { color: var(--novvia-accent); } /* ========================================================================= MINI CART ========================================================================= */ .novvia-mini-cart { background: var(--novvia-card, #ffffff); border: 1px solid var(--novvia-border, #e2e8f0); width: var(--nv-minicart-width, 320px); } .novvia-mini-cart .nv-mc-empty { color: var(--novvia-muted, #64748b); } .novvia-mini-cart .nv-mc-item-name { color: var(--novvia-text, #1e293b); } .novvia-mini-cart .nv-mc-item-meta { color: var(--novvia-muted, #64748b); } .novvia-mini-cart .nv-mc-remove { color: var(--novvia-muted, #64748b); transition: color .15s ease; } .novvia-mini-cart .nv-mc-remove:hover { color: var(--novvia-danger, #dc2626); } .novvia-mini-cart .nv-mc-divider { border-top-color: var(--novvia-border, #e2e8f0); } .novvia-mini-cart .nv-mc-subtotal { color: var(--novvia-text, #1e293b); } .novvia-mini-cart .nv-mc-btn-secondary { border: 1px solid var(--novvia-border, #e2e8f0); color: var(--novvia-text, #1e293b); background: var(--novvia-card, #fff); transition: background .15s ease; } .novvia-mini-cart .nv-mc-btn-secondary:hover { background: var(--novvia-bg-alt, #f8fafc); } .novvia-mini-cart .nv-mc-btn-primary { background: var(--novvia-accent); color: #fff; transition: background .15s ease; } .novvia-mini-cart .nv-mc-btn-primary:hover { background: var(--novvia-accent-hover); } /* ========================================================================= FOOTER — alle Farben aus Theme-Settings ========================================================================= */ footer[role="contentinfo"], .nv-footer { background: var(--nv-footer-bg, var(--novvia-primary, #0f172a)); color: var(--nv-footer-text, #ffffff); } /* Gedaempfte Farbe NUR im Legacy-Footer (kein Builder-Layout gespeichert) + Bottom-Bar. Im Footer-Builder-Row schlaegt die per-Row konfigurierte Textfarbe durch. */ .nv-footer .nv-footer-widgets p, .nv-footer .nv-footer-text-muted, .nv-footer .nv-footer-bottom { color: var(--nv-footer-text-muted, #9ca3af); } .nv-footer .nv-footer-widgets h4, .nv-footer .nv-footer-heading { color: var(--nv-footer-text, #ffffff); } /* Builder-Rows: ALLES erbt die Row-Farbe (color wird inline am .nv-footer-row gesetzt). */ .nv-footer .nv-footer-row, .nv-footer .nv-footer-row h1, .nv-footer .nv-footer-row h2, .nv-footer .nv-footer-row h3, .nv-footer .nv-footer-row h4, .nv-footer .nv-footer-row h5, .nv-footer .nv-footer-row h6, .nv-footer .nv-footer-row p, .nv-footer .nv-footer-row li, .nv-footer .nv-footer-row span, .nv-footer .nv-footer-row strong, .nv-footer .nv-footer-row em, .nv-footer .nv-footer-row .nv-fb-heading, .nv-footer .nv-footer-row .nv-fb-content, .nv-footer .nv-footer-row .nv-fb-content * { color: inherit; } .nv-footer a { color: var(--nv-footer-text-muted, #9ca3af); transition: color .15s ease; } .nv-footer a:hover { color: var(--nv-footer-text, #ffffff); } .nv-footer .nv-footer-social { background: rgba(255,255,255,.1); color: var(--nv-footer-text-muted, #9ca3af); transition: background .15s ease, color .15s ease; } .nv-footer .nv-footer-social:hover { background: var(--nv-footer-accent, var(--novvia-accent)); color: #fff; } .nv-footer .nv-footer-newsletter-input { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--nv-footer-text, #fff); } .nv-footer .nv-footer-newsletter-input::placeholder { color: var(--nv-footer-text-muted, #9ca3af); } .nv-footer .nv-footer-newsletter-input:focus { border-color: var(--nv-footer-accent, var(--novvia-accent)); outline: none; } .nv-footer .nv-footer-newsletter-btn { background: var(--nv-footer-accent, var(--novvia-accent)); color: #fff; transition: background .15s ease; } .nv-footer .nv-footer-newsletter-btn:hover { background: var(--novvia-accent-hover); } .nv-footer .nv-footer-bottom-bar { border-top: 1px solid rgba(255,255,255,.1); } .nv-footer .nv-footer-payment-pill { background: rgba(255,255,255,.1); color: var(--nv-footer-text-muted, #9ca3af); } /* Back-to-Top Button */ .novvia-back-to-top { background: var(--novvia-accent) !important; color: #fff !important; transition: background .15s ease; } .novvia-back-to-top:hover { background: var(--novvia-accent-hover) !important; } /* ========================================================================= NV-Color-Utilities — kompakte Klassen die nutzen Theme-Settings ========================================================================= */ .nv-text { color: var(--novvia-text, #1e293b); } .nv-text-muted { color: var(--novvia-muted, #64748b); } .nv-text-accent { color: var(--novvia-accent); } .nv-text-danger { color: var(--novvia-danger, #dc2626); } .nv-bg-card { background: var(--novvia-card, #ffffff); } .nv-bg-alt { background: var(--novvia-bg-alt, #f1f5f9); } .nv-bg-accent { background: var(--novvia-accent); color: #fff; } .nv-bg-accent:hover { background: var(--novvia-accent-hover); color: #fff; } .nv-border { border-color: var(--novvia-border, #e2e8f0); } .nv-border-strong { border-color: var(--novvia-border-strong, #cbd5e1); } .nv-hover-accent { transition: color .15s ease; } .nv-hover-accent:hover { color: var(--novvia-accent); } .nv-hover-bg-alt:hover { background: var(--novvia-bg-alt, #f1f5f9); } /* 404-Spezial */ .nv-404-number { color: var(--novvia-border, #e2e8f0); font-size: 8rem; font-weight: 700; line-height: 1; } .nv-divider-top { border-top: 1px solid var(--novvia-border, #e2e8f0); } /* ========================================================================= My Account - Adress-Bearbeitung Form (kompakt) ========================================================================= */ .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; } @media (max-width: 600px) { .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } } /* Volle Breite fuer bestimmte Felder */ .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-wide, .woocommerce-MyAccount-content .woocommerce-address-fields p#billing_company_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#shipping_company_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#billing_address_1_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#billing_address_2_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#shipping_address_1_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#shipping_address_2_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#billing_email_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#billing_country_field, .woocommerce-MyAccount-content .woocommerce-address-fields p#shipping_country_field { grid-column: 1 / -1; } /* Form-Row Reset (kompakt) */ .woocommerce-MyAccount-content .woocommerce-address-fields .form-row, .woocommerce-MyAccount-content .woocommerce-address-fields p.form-row { margin: 0 !important; padding: 0 !important; width: 100% !important; float: none !important; display: flex; flex-direction: column; } /* Labels */ .woocommerce-MyAccount-content .woocommerce-address-fields label { display: block; font-size: 12px !important; font-weight: 600 !important; color: var(--novvia-muted, #64748b) !important; margin: 0 0 4px !important; text-transform: uppercase; letter-spacing: .03em; } .woocommerce-MyAccount-content .woocommerce-address-fields label .required { color: var(--novvia-danger, #dc2626); text-decoration: none; margin-left: 2px; } .woocommerce-MyAccount-content .woocommerce-address-fields label .optional { color: var(--novvia-muted, #94a3b8); font-weight: 400; text-transform: none; font-size: 11px; } /* Inputs - kompakt */ .woocommerce-MyAccount-content .woocommerce-address-fields input[type="text"], .woocommerce-MyAccount-content .woocommerce-address-fields input[type="email"], .woocommerce-MyAccount-content .woocommerce-address-fields input[type="tel"], .woocommerce-MyAccount-content .woocommerce-address-fields input[type="number"], .woocommerce-MyAccount-content .woocommerce-address-fields select, .woocommerce-MyAccount-content .woocommerce-address-fields .input-text, .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection--single { width: 100% !important; height: 36px !important; min-height: 36px !important; padding: 6px 12px !important; font-size: 14px !important; line-height: 1.4 !important; border: 1px solid var(--novvia-border, #e2e8f0) !important; border-radius: 8px !important; background: var(--novvia-card, #fff) !important; color: var(--novvia-text, #1e293b) !important; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box !important; box-shadow: none !important; } .woocommerce-MyAccount-content .woocommerce-address-fields input:focus, .woocommerce-MyAccount-content .woocommerce-address-fields select:focus, .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--focus .select2-selection { outline: none !important; border-color: var(--novvia-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--novvia-accent) 12%, transparent) !important; } /* Select2 spezielle Anpassung */ .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection--single { display: flex !important; align-items: center !important; } .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; color: var(--novvia-text, #1e293b) !important; } .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection__arrow { height: 34px !important; top: 0 !important; } /* Form Header - Adresse bearbeiten */ .woocommerce-MyAccount-content > h3, .woocommerce-MyAccount-content .woocommerce-address-fields > h3 { font-size: 18px !important; font-weight: 700 !important; color: var(--novvia-text, #1e293b) !important; margin: 0 0 18px !important; padding: 0 0 12px !important; border-bottom: 2px solid var(--novvia-accent); } /* Submit Button */ .woocommerce-MyAccount-content .woocommerce-address-fields button[type="submit"], .woocommerce-MyAccount-content .woocommerce-address-fields .button { background: var(--novvia-accent) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 24px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .15s ease, transform .1s ease !important; text-shadow: none !important; box-shadow: none !important; margin-top: 8px !important; height: auto !important; line-height: 1.4 !important; } .woocommerce-MyAccount-content .woocommerce-address-fields button[type="submit"]:hover, .woocommerce-MyAccount-content .woocommerce-address-fields .button:hover { background: var(--novvia-accent-hover) !important; transform: translateY(-1px); } /* Notices innerhalb */ .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-error { padding: 10px 14px !important; border-radius: 8px !important; font-size: 13px !important; margin: 0 0 16px !important; border-left-width: 3px !important; } /* ========================================================================= My Account - Gast-Ansicht (Login + Register als Cards, zentriert) ========================================================================= */ .novvia-account-guest { max-width: 960px; margin: 0 auto; padding: 1rem 0 3rem; } .novvia-account-guest-inner .u-columns, .novvia-account-guest-inner .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; margin: 0; } @media (max-width: 768px) { .novvia-account-guest-inner .u-columns, .novvia-account-guest-inner .col2-set { grid-template-columns: 1fr; } } .novvia-account-guest-inner .u-column1, .novvia-account-guest-inner .u-column2, .novvia-account-guest-inner .col-1, .novvia-account-guest-inner .col-2 { width: 100%; max-width: none; padding: 0; float: none; } .novvia-account-guest-inner h2 { font-size: 1.25rem; font-weight: 700; color: var(--novvia-text, #1e293b); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--novvia-accent); } .novvia-account-guest-inner .woocommerce-form-login, .novvia-account-guest-inner .woocommerce-form-register { background: var(--novvia-card, #ffffff); border: 1px solid var(--novvia-border, #e2e8f0); border-radius: 14px; padding: 28px 28px 22px; box-shadow: 0 4px 16px rgba(15,23,42,.06); margin: 0; } .novvia-account-guest-inner .form-row, .novvia-account-guest-inner p.form-row { margin: 0 0 16px; padding: 0; } .novvia-account-guest-inner label { display: block; font-size: 13px; font-weight: 600; color: var(--novvia-text, #1e293b); margin-bottom: 6px; } .novvia-account-guest-inner label .required { color: var(--novvia-danger, #dc2626); text-decoration: none; } .novvia-account-guest-inner input[type="text"], .novvia-account-guest-inner input[type="email"], .novvia-account-guest-inner input[type="tel"], .novvia-account-guest-inner input[type="password"], .novvia-account-guest-inner input[type="url"], .novvia-account-guest-inner select, .novvia-account-guest-inner textarea, .novvia-account-guest-inner .input-text { width: 100% !important; padding: 10px 14px !important; font-size: 14px !important; border: 1.5px solid var(--novvia-border, #e2e8f0) !important; border-radius: 8px !important; background: #fff !important; color: var(--novvia-text, #1e293b) !important; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; line-height: 1.4; } .novvia-account-guest-inner input:focus, .novvia-account-guest-inner select:focus, .novvia-account-guest-inner textarea:focus { outline: none !important; border-color: var(--novvia-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--novvia-accent) 15%, transparent) !important; } .novvia-account-guest-inner input[type="file"] { width: 100%; padding: 8px 0; font-size: 13px; color: var(--novvia-muted, #64748b); } .novvia-account-guest-inner textarea { min-height: 80px; resize: vertical; } /* Buttons */ .novvia-account-guest-inner .button, .novvia-account-guest-inner button[type="submit"] { background: var(--novvia-accent) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 12px 28px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; transition: background .15s ease, transform .1s ease; width: auto; display: inline-block; text-shadow: none !important; box-shadow: none !important; letter-spacing: 0.01em; } .novvia-account-guest-inner .button:hover, .novvia-account-guest-inner button[type="submit"]:hover { background: var(--novvia-accent-hover) !important; transform: translateY(-1px); } /* Lost password Link */ .novvia-account-guest-inner .lost_password { margin-top: 12px; font-size: 13px; } .novvia-account-guest-inner .lost_password a { color: var(--novvia-accent); text-decoration: none; } .novvia-account-guest-inner .lost_password a:hover { text-decoration: underline; } /* "Angemeldet bleiben" Checkbox */ .novvia-account-guest-inner .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; color: var(--novvia-muted, #64748b); cursor: pointer; } .novvia-account-guest-inner .woocommerce-form-login__rememberme input { width: auto !important; margin: 0; } /* NWC Reg-Felder Container — der eingebettete Wrapper */ .novvia-account-guest-inner .nwc-reg-fields { margin: 18px 0 !important; padding: 18px !important; background: var(--novvia-bg, #f8fafc) !important; border: 1px solid var(--novvia-border, #e2e8f0) !important; border-radius: 10px !important; } .novvia-account-guest-inner .nwc-reg-fields h3 { font-size: 14px; font-weight: 700; color: var(--novvia-text, #1e293b); margin: 0 0 14px; } /* Privacy/AGB Texte */ .novvia-account-guest-inner .woocommerce-privacy-policy-text, .novvia-account-guest-inner .woocommerce-form__label-for-checkbox { font-size: 12px; color: var(--novvia-muted, #64748b); line-height: 1.5; } .novvia-account-guest-inner .woocommerce-privacy-policy-text a { color: var(--novvia-accent); } /* Notice messages (z.B. Login-Fehler) */ .novvia-account-guest .woocommerce-notices-wrapper, .novvia-account-guest-inner .woocommerce-error, .novvia-account-guest-inner .woocommerce-message, .novvia-account-guest-inner .woocommerce-info { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; font-size: 13px; list-style: none; } .novvia-account-guest-inner .woocommerce-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .novvia-account-guest-inner .woocommerce-message, .novvia-account-guest-inner .woocommerce-info { background: #f0fdfa; border: 1px solid #99f6e4; color: #115e59; } .novvia-sp-desc-heading { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--novvia-muted); margin: 0 0 0.5rem; } .novvia-sp-desc-content { font-size: 0.875rem; color: var(--novvia-text); line-height: 1.7; background: transparent !important; padding: 0 !important; max-height: none !important; overflow: visible !important; } .novvia-sp-desc-content p:last-child { margin-bottom: 0; } /* Stock Status */ .novvia-sp-stock { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; margin-bottom: 1rem; } /* Stock-Farbe nutzt currentColor — damit Inline-Style aus Layout-Builder gewinnt */ /* :not() stellt sicher dass Layout-Builder Inline-Color IMMER gewinnt */ .novvia-sp-stock--in:not([style*="color"]) { color: var(--novvia-success); } .novvia-sp-stock--out:not([style*="color"]) { color: var(--novvia-danger); } .novvia-sp-stock-dot { background: currentColor; } /* Versandkosten-Hinweis-Block */ .novvia-sp-shipping-costs { font-size: 0.8125rem; color: var(--novvia-muted); margin: 0.25rem 0 0.5rem; } .novvia-sp-shipping-costs a, .novvia-sp-shipping-trigger { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; background: none; border-top: none; border-left: none; border-right: none; padding: 0; font: inherit; cursor: pointer; transition: color .15s ease; } .novvia-sp-shipping-costs a:hover, .novvia-sp-shipping-trigger:hover { color: var(--novvia-accent); } /* MwSt-Hinweis-Block */ .novvia-sp-tax-hint { font-size: 0.75rem; color: var(--novvia-muted); margin: 0.25rem 0; line-height: 1.4; } /* Grundpreis-Block */ .novvia-sp-unit-price { font-size: 0.8125rem; color: var(--novvia-muted); margin: 0.25rem 0; line-height: 1.4; } .novvia-sp-unit-price .nwc-grundpreis { font-size: inherit !important; color: inherit !important; margin: 0 !important; } /* ========================================================================= Layout-Builder Row-Wrapper Mehrere Bloecke nebeneinander wenn "Inline mit naechstem" aktiv ========================================================================= */ .nv-sp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 0.5rem; } /* Innerhalb einer Row haben Bloecke keinen eigenen margin-bottom mehr */ .nv-sp-row > .novvia-sp-price, .nv-sp-row > .novvia-sp-tax-hint, .nv-sp-row > .novvia-sp-shipping-costs, .nv-sp-row > .novvia-sp-stock, .nv-sp-row > .novvia-sp-rating, .nv-sp-row > .novvia-sp-short-desc, .nv-sp-row > .novvia-sp-meta, .nv-sp-row > .novvia-sp-full-desc, .nv-sp-row > * { margin-top: 0; margin-bottom: 0; } /* ========================================================================= NV-SP Modal (direkt im Template, kein Footer-Buffer) Wird vom shipping_costs Block verwendet wenn eine Page gewaehlt ist ========================================================================= */ .nv-sp-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; } .nv-sp-modal.is-open { display: flex; animation: nvSpModalFade .25s ease; } @keyframes nvSpModalFade { from { opacity: 0; } to { opacity: 1; } } .nv-sp-modal-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.65); backdrop-filter: blur(4px); cursor: pointer; } .nv-sp-modal-panel { position: relative; background: var(--novvia-card, #fff); border-radius: 16px; width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(15,23,42,.4); padding: 32px; animation: nvSpModalSlide .3s cubic-bezier(.4,0,.2,1); } @keyframes nvSpModalSlide { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .nv-sp-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: none; background: var(--novvia-bg-alt, #f1f5f9); color: var(--novvia-text, #1e293b); border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease; z-index: 2; } .nv-sp-modal-close:hover { background: var(--novvia-danger, #dc2626); color: #fff; transform: rotate(90deg); } .nv-sp-modal-title { margin: 0 0 20px; padding-right: 40px; font-size: 22px; font-weight: 700; color: var(--novvia-text, #1e293b); letter-spacing: -.01em; border-bottom: 2px solid var(--novvia-accent); padding-bottom: 12px; } .nv-sp-modal-body { color: var(--novvia-text, #1e293b); font-size: 15px; line-height: 1.65; } .nv-sp-modal-body p { margin: 0 0 14px; } .nv-sp-modal-body a { color: var(--novvia-accent); } .nv-sp-modal-body h2, .nv-sp-modal-body h3, .nv-sp-modal-body h4 { margin: 18px 0 10px; color: var(--novvia-text, #1e293b); } .nv-sp-modal-body ul, .nv-sp-modal-body ol { margin: 0 0 14px 20px; } .nv-sp-modal-body img { max-width: 100%; height: auto; border-radius: 8px; } @media (max-width: 600px) { .nv-sp-modal-panel { padding: 24px 20px; } .nv-sp-modal-title { font-size: 18px; } } .novvia-sp-stock-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; } /* novvia-sp-stock-dot--in/--out: background kommt jetzt aus currentColor */ /* Add to Cart */ .novvia-sp-add-to-cart { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .novvia-sp-cart-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--novvia-accent); color: #fff; border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .novvia-sp-cart-btn:hover { background: var(--novvia-accent-hover); transform: translateY(-1px); } .novvia-sp-cart-btn.is-loading { opacity: 0.7; pointer-events: none; } .novvia-sp-cart-btn.is-added { background: var(--novvia-success); } /* Actions (Wishlist, Share) */ .novvia-sp-actions { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--novvia-border); } .novvia-sp-action-btn { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--novvia-muted); background: transparent; border: none; cursor: pointer; transition: color var(--transition-fast); padding: 0; } .novvia-sp-action-btn:hover { color: var(--novvia-danger); } /* Meta */ .novvia-sp-meta { display: flex; flex-direction: column; gap: 0.375rem; } .novvia-sp-meta-item { font-size: 0.8125rem; color: var(--novvia-muted); } .novvia-sp-meta-item a { color: var(--novvia-muted); text-decoration: none; transition: color var(--transition-fast); } .novvia-sp-meta-item a:hover { color: var(--novvia-accent); } .novvia-sp-meta-label { font-weight: 600; color: var(--novvia-text); } /* ======================================================================== ACCORDION TABS ======================================================================== */ .novvia-sp-accordions { margin-bottom: 3rem; } .novvia-sp-accordion { border: 1px solid var(--novvia-border); border-radius: var(--radius-md); margin-bottom: 0.5rem; overflow: hidden; transition: box-shadow var(--transition-base); } .novvia-sp-accordion:hover { box-shadow: var(--shadow-sm); } .novvia-sp-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: transparent; border: none; cursor: pointer; text-align: left; font-size: 0.9375rem; font-weight: 600; color: var(--novvia-text); transition: background var(--transition-fast); } .novvia-sp-accordion-trigger:hover { background: var(--novvia-bg); } .novvia-sp-accordion-icon { transition: transform var(--transition-base); flex-shrink: 0; color: var(--novvia-muted); } .novvia-sp-accordion.is-open .novvia-sp-accordion-icon { transform: rotate(180deg); } .novvia-sp-accordion-panel { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .novvia-sp-accordion.is-open .novvia-sp-accordion-panel { max-height: 2000px; overflow: visible; } .novvia-sp-accordion-content { padding: 0 1.25rem 1.25rem; font-size: 0.875rem; line-height: 1.7; color: var(--novvia-text); } .novvia-sp-accordion-content p:last-child { margin-bottom: 0; } /* Related Products */ .novvia-sp-related { margin-top: 3rem; } .novvia-sp-related-title { font-size: 1.25rem; font-weight: 700; color: var(--novvia-text); margin: 0 0 1.5rem; } .novvia-sp-related-grid { display: grid; grid-template-columns: repeat(var(--nv-grid-cols, 4), 1fr); gap: 1.5rem; } @media (max-width: 1024px) { .novvia-sp-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .novvia-sp-related-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } /* ======================================================================== STICKY ADD TO CART (Mobile) ======================================================================== */ .novvia-sp-sticky-atc { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--novvia-card); border-top: 1px solid var(--novvia-border); box-shadow: 0 -4px 12px rgb(0 0 0 / 0.08); padding: 0.75rem 1rem; align-items: center; gap: 0.75rem; } @media (max-width: 1023px) { .novvia-sp-sticky-atc { display: flex; } } .novvia-sp-sticky-info { flex: 1; min-width: 0; } .novvia-sp-sticky-name { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--novvia-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .novvia-sp-sticky-price { font-size: 0.875rem; font-weight: 700; color: var(--novvia-accent); } .novvia-sp-sticky-btn { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.625rem 1.25rem; background: var(--novvia-accent); color: #fff; border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 0.875rem; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--transition-fast); } .novvia-sp-sticky-btn:hover { background: var(--novvia-accent-hover); } /* Dark Mode overrides for single product */ [data-theme="dark"] .novvia-sp-main-image { background: var(--nv-surface-raised, #1e293b); border-color: var(--nv-border, #334155); } [data-theme="dark"] .novvia-sp-full-desc { background: var(--nv-surface-raised, #1e293b); border-color: var(--nv-border, #334155); } [data-theme="dark"] .novvia-sp-accordion { border-color: var(--nv-border, #334155); } [data-theme="dark"] .novvia-sp-accordion-trigger { color: var(--nv-text, #e2e8f0); } [data-theme="dark"] .novvia-sp-accordion-trigger:hover { background: var(--nv-surface-raised, #1e293b); } [data-theme="dark"] .novvia-sp-sticky-atc { background: var(--nv-surface, #0f172a); border-top-color: var(--nv-border, #334155); } /* ----- Print ------------------------------------------------------------ */ @media print { .novvia-header, .novvia-topbar, .novvia-footer, .novvia-back-to-top, .novvia-mobile-drawer, .novvia-mobile-overlay, #novvia-compare-bar, #novvia-mobile-filter-overlay, .novvia-quick-view-modal, .novvia-filter-panel, #novvia-filter-bar, #novvia-mobile-filter-btn { display: none !important; } } /* ================================================================ ARCHIVE HEADER + BREADCRUMBS ================================================================ */ .nv-archive-header { margin-bottom: 20px; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 20px; } .nv-archive-breadcrumb { margin-bottom: 12px; } .nv-breadcrumb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: #64748b; } .nv-breadcrumb-inner a { color: #64748b; text-decoration: none; transition: color 0.15s; } .nv-breadcrumb-inner a:hover { color: var(--novvia-accent); } .nv-breadcrumb-sep { color: #cbd5e1; margin: 0 2px; } .nv-archive-title { font-size: 1.5rem; font-weight: 700; color: var(--novvia-text, #0f172a); margin: 0 0 4px; } /* ================================================================ ARCHIVE TOOLBAR (above sidebar+grid) ================================================================ */ .nv-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 20px; } .nv-archive-count-row { display: flex; align-items: center; gap: 12px; } .nv-archive-controls { display: flex; align-items: center; gap: 8px; } .nv-view-toggle { display: flex; gap: 2px; } .nv-sort-wrapper select, .nv-sort-wrapper .woocommerce-ordering select { font-size: 13px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; } /* Mobile filter toggle button - hidden on desktop */ .nv-mobile-filter-toggle { display: none; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; font-weight: 600; color: #0f172a; background: #fff; cursor: pointer; transition: border-color 0.15s; } .nv-mobile-filter-toggle:hover { border-color: var(--novvia-accent); } @media (max-width: 960px) { .nv-mobile-filter-toggle { display: flex; } } /* ================================================================ SHOP SIDEBAR + GRID LAYOUT (permanent sidebar 260px) ================================================================ */ .nv-archive-layout { display: grid; grid-template-columns: 260px 1fr; gap: 30px; max-width: 1400px; margin: 0 auto; padding: 0 20px; } /* Sidebar: ALWAYS visible on desktop, sticky */ .nv-shop-sidebar, .nv-page-sidebar, .nv-layout-sidebar { position: sticky; top: calc(var(--header-height, 72px) + 20px); align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 10px; } .nv-shop-sidebar::-webkit-scrollbar { width: 3px; } .nv-shop-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } /* Sidebar sections */ .nv-sidebar-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; } .nv-sidebar-section:last-child { border-bottom: none; } .nv-sidebar-reset { border-bottom: none; padding-bottom: 0; } .nv-sidebar-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #0f172a; margin-bottom: 12px; } /* Category tree */ .nv-category-list { list-style: none; padding: 0; margin: 0; } .nv-category-list li { margin-bottom: 2px; } .nv-category-list li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #475569; text-decoration: none; transition: all 0.15s; } .nv-category-list li a:hover { background: var(--novvia-bg, #f1f5f9); color: #0f172a; } .nv-category-list li.active > a { background: #eff6ff; color: #2563eb; font-weight: 600; } .nv-category-list li.parent-active > a { color: #2563eb; font-weight: 600; } .nv-cat-count { font-size: 11px; color: var(--novvia-muted, #94a3b8); background: var(--novvia-bg, #f1f5f9); padding: 1px 8px; border-radius: 10px; font-weight: 500; } .nv-category-list li.active .nv-cat-count, .nv-category-list li.parent-active .nv-cat-count { background: #dbeafe; color: #2563eb; } /* Subcategory list */ .nv-subcategory-list { list-style: none; padding: 0 0 0 16px; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nv-subcategory-list.open { max-height: 500px; } .nv-subcategory-list li a { padding: 6px 12px; font-size: 12px; } /* Show subcategories on hover or when parent/self is active */ .nv-category-list li:hover > .nv-subcategory-list, .nv-category-list li.active > .nv-subcategory-list, .nv-category-list li.parent-active > .nv-subcategory-list { max-height: 500px; } /* Price filter inputs */ .nv-price-inputs { display: flex; gap: 8px; align-items: center; } .nv-price-input { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; width: 80px; outline: none; transition: border-color 0.15s; } .nv-price-input:focus { border-color: var(--novvia-accent); } .nv-price-dash { color: var(--novvia-muted, #94a3b8); } .nv-price-currency { color: var(--novvia-muted, #94a3b8); font-size: 12px; } /* Availability checkboxes */ .nv-filter-checkbox { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: #475569; cursor: pointer; } .nv-filter-checkbox input { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; } /* Filter reset link in sidebar */ .nv-filter-reset-link { font-size: 13px; color: #dc2626; text-decoration: none; transition: color 0.15s; } .nv-filter-reset-link:hover { text-decoration: underline; } /* Attribut-Filter: Pills (Standard) */ .nv-attr-pills { display: flex; flex-wrap: wrap; gap: 6px; } .nv-attr-pill { padding: 5px 12px; border: 1.5px solid #e2e8f0; border-radius: 99px; background: #fff; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; } .nv-attr-pill:hover { border-color: var(--novvia-accent, #2bbcc4); color: var(--novvia-accent, #2bbcc4); } .nv-attr-pill.is-active { background: var(--novvia-accent, #2bbcc4); border-color: var(--novvia-accent, #2bbcc4); color: #fff; } .nv-attr-pill-count { font-size: 10px; opacity: 0.7; } .nv-attr-pill.is-active .nv-attr-pill-count { opacity: 0.9; } /* Attribut-Filter: Swatches (Farbfelder) */ .nv-attr-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .nv-attr-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #e2e8f0; cursor: pointer; padding: 0; transition: all 0.15s; } .nv-attr-swatch:hover { transform: scale(1.1); border-color: var(--novvia-accent, #2bbcc4); } .nv-attr-swatch.is-active { border-color: var(--novvia-accent, #2bbcc4); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--novvia-accent, #2bbcc4); } /* Attribut-Filter: Liste */ .nv-attr-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; } .nv-attr-list .nv-cat-count { margin-left: auto; font-size: 11px; color: #94a3b8; } /* Attribut-Filter: Dropdown */ .nv-attr-select { width: 100%; padding: 8px 12px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #1e293b; cursor: pointer; } .nv-attr-select:focus { outline: none; border-color: var(--novvia-accent, #2bbcc4); } /* ================================================================ ACTIVE FILTER CHIPS (above product grid) ================================================================ */ .nv-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .nv-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 500; background: #eff6ff; color: #2563eb; border: none; border-radius: 20px; cursor: pointer; transition: background 0.15s; } .nv-filter-chip:hover { background: #dbeafe; } .nv-filter-chip svg { flex-shrink: 0; } .nv-filter-reset-all { font-size: 12px; color: #dc2626; text-decoration: none; margin-left: 4px; } .nv-filter-reset-all:hover { text-decoration: underline; } /* ================================================================ MOBILE: Sidebar hidden, drawer slides in (< 960px) ================================================================ */ @media (max-width: 960px) { .nv-archive-layout { grid-template-columns: 1fr; } .nv-shop-sidebar { display: none; } } .nv-mobile-filter-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } .nv-mobile-filter-overlay.is-open { opacity: 1; visibility: visible; } .nv-mobile-filter-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 9991; width: 300px; max-width: 85vw; background: #fff; box-shadow: 4px 0 20px rgba(0,0,0,0.15); transform: translateX(-100%); transition: transform 0.3s ease; display: flex; flex-direction: column; overflow: hidden; } .nv-mobile-filter-drawer.is-open { transform: translateX(0); } .nv-mobile-filter-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; } .nv-mobile-filter-title { font-size: 16px; font-weight: 700; color: #0f172a; } .nv-mobile-filter-close { background: none; border: none; cursor: pointer; padding: 4px; color: #64748b; } .nv-mobile-filter-close:hover { color: #0f172a; } .nv-mobile-filter-body { flex: 1; overflow-y: auto; padding: 16px; } /* ================================================================ HOMEPAGE SCROLL SECTION (horizontal product scroller) ================================================================ */ .nv-scroll-section-wrapper { overflow: hidden; position: relative; } .nv-scroll-section { display: flex; gap: var(--nv-space-lg, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; } .nv-scroll-section::-webkit-scrollbar { display: none; } .nv-scroll-section > div { scroll-snap-align: start; flex-shrink: 0; } /* Subgrid-Override: Im horizontalen Scroller ist .nv-product-card per modern.css als CSS-Subgrid definiert (grid-template-rows: subgrid, grid-row: span 4). Das funktioniert aber nur mit einem Grid-Parent mit 4 Reihen. In der Flex- Scroll-Section fehlt der → untere Card-Teile (Preis, Button) werden abgeschnitten. Hier zurueck auf normales Flex-Layout. */ .nv-scroll-section .nv-product-card-container { display: block; width: 100%; } .nv-scroll-section .nv-product-card { display: flex !important; flex-direction: column; grid-template-rows: none !important; grid-row: auto !important; height: auto; } /* Fade-Edges (zeigen dass man scrollen kann) */ .nv-product-scroll-section .nv-scroll-section-wrapper::before, .nv-product-scroll-section .nv-scroll-section-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 2; transition: opacity .2s ease; } .nv-product-scroll-section .nv-scroll-section-wrapper::before { left: 0; background: linear-gradient(to right, var(--nv-bg, #fff), transparent); } .nv-product-scroll-section .nv-scroll-section-wrapper::after { right: 0; background: linear-gradient(to left, var(--nv-bg, #fff), transparent); } /* Bestseller hat bg-alt — Fade passt dort entsprechend */ .nv-product-scroll-section[style*="bg-alt"] .nv-scroll-section-wrapper::before { background: linear-gradient(to right, var(--nv-bg-alt, #f1f5f9), transparent); } .nv-product-scroll-section[style*="bg-alt"] .nv-scroll-section-wrapper::after { background: linear-gradient(to left, var(--nv-bg-alt, #f1f5f9), transparent); } /* Produktbilder in Scroll-Cards: einheitliche Hoehe damit Karten gleich wirken */ .nv-product-scroll-section .novvia-product-image, .nv-product-scroll-section .nv-card-image-wrap, .nv-product-scroll-section .nv-product-card__image { aspect-ratio: 1 / 1; overflow: hidden; } .nv-product-scroll-section .novvia-product-image img, .nv-product-scroll-section .nv-card-image-wrap img, .nv-product-scroll-section .nv-product-card__image img { width: 100%; height: 100%; object-fit: contain; } /* Mobile: Scroll-Buttons verstecken (Swipe reicht) */ @media (max-width: 640px) { .nv-product-scroll-section .nv-scroll-prev, .nv-product-scroll-section .nv-scroll-next { display: none; } .nv-product-scroll-section .nv-scroll-section-wrapper::before, .nv-product-scroll-section .nv-scroll-section-wrapper::after { width: 20px; } } /* ================================================================ HP Custom Text-/HTML-Bloecke (aus HP-Designer) ================================================================ */ .nv-hp-block .nv-hp-block-content { font-size: var(--nv-text-base, 1rem); line-height: 1.65; color: inherit; } .nv-hp-block .nv-hp-block-content > *:first-child { margin-top: 0; } .nv-hp-block .nv-hp-block-content > *:last-child { margin-bottom: 0; } .nv-hp-block .nv-hp-block-content p { margin: 0 0 var(--nv-space-md, 1rem); } .nv-hp-block .nv-hp-block-content ul, .nv-hp-block .nv-hp-block-content ol { padding-left: 1.4em; margin: 0 0 var(--nv-space-md, 1rem); } .nv-hp-block .nv-hp-block-content ul { list-style: disc; } .nv-hp-block .nv-hp-block-content ol { list-style: decimal; } .nv-hp-block .nv-hp-block-content li { margin: 0 0 0.4em; } .nv-hp-block .nv-hp-block-content strong { font-weight: 700; } .nv-hp-block .nv-hp-block-content em { font-style: italic; } .nv-hp-block .nv-hp-block-content a { color: var(--nv-accent, #2bbcc4); text-decoration: underline; } .nv-hp-block .nv-hp-block-content h1, .nv-hp-block .nv-hp-block-content h2, .nv-hp-block .nv-hp-block-content h3, .nv-hp-block .nv-hp-block-content h4 { margin: var(--nv-space-lg, 1.5rem) 0 var(--nv-space-sm, 0.5rem); font-weight: 700; line-height: 1.25; } .nv-hp-block .nv-hp-block-content img { max-width: 100%; height: auto; border-radius: var(--nv-radius-md, 10px); } /* Mobile-Anpassungen */ @media (max-width: 768px) { /* Split-Grid auf eine Spalte reduzieren */ .nv-hp-block-split { grid-template-columns: 1fr !important; gap: var(--nv-space-lg, 1.5rem) !important; } /* Ueberschrift + Subtitle kleiner */ .nv-hp-block .nv-hp-block-heading { font-size: clamp(1.35rem, 5vw, 1.75rem) !important; line-height: 1.25 !important; } .nv-hp-block .nv-hp-block-subtitle { font-size: var(--nv-text-base, 1rem) !important; } /* Content-Text */ .nv-hp-block .nv-hp-block-content { font-size: 0.95rem; line-height: 1.6; } /* Padding kompakter */ .nv-hp-block { padding: var(--nv-space-xl, 2rem) 0 !important; } .nv-hp-block .nv-container { padding-left: var(--nv-space-md, 1rem); padding-right: var(--nv-space-md, 1rem); } /* Bild darf nicht zu groß werden */ .nv-hp-block-media { min-height: 180px !important; aspect-ratio: 16 / 10; } } @media (max-width: 480px) { .nv-hp-block .nv-hp-block-heading { font-size: clamp(1.2rem, 6vw, 1.5rem) !important; } .nv-hp-block .nv-hp-block-content { font-size: 0.9rem; } } /* ================================================================ HOMEPAGE RESPONSIVE GRIDS ================================================================ */ @media (max-width: 1024px) { .nv-products-grid.nv-homepage-scroll { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .nv-products-grid.nv-homepage-scroll { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .nv-products-grid.nv-homepage-scroll { grid-template-columns: 1fr !important; } } /* ================================================================ LOAD MORE ENTER ANIMATION ================================================================ */ @keyframes nv-load-more-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .nv-load-more-enter { animation: nv-load-more-enter 0.4s ease forwards; } /* ================================================================ NV-PAGINATION (Load More) ================================================================ */ .nv-pagination { text-align: center; padding: 2rem 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .nv-pagination-count { font-size: 13px; color: #64748b; } .nv-pagination-progress { width: 200px; height: 3px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-top: 6px; } .nv-pagination-progress-bar { height: 100%; background: var(--novvia-accent); border-radius: 3px; transition: width 0.3s ease; } .nv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; font-size: 14px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; } .nv-btn-primary { background: var(--novvia-accent); color: #fff; } .nv-btn-primary:hover { background: var(--novvia-accent-hover); } .nv-btn-primary.is-loading { opacity: 0.6; pointer-events: none; } .nv-btn-ghost { background: transparent; color: #64748b; border: 1px solid #e2e8f0; } .nv-btn-ghost:hover { background: #f8fafc; color: #0f172a; } .nv-btn-lg { padding: 14px 32px; font-size: 16px; } /* View toggle buttons */ .novvia-view-toggle { padding: 6px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: var(--novvia-muted, #94a3b8); cursor: pointer; transition: all 0.15s; } .novvia-view-toggle:hover { border-color: var(--novvia-accent); color: #0f172a; } .novvia-view-toggle.is-active { background: var(--novvia-accent); color: #fff; border-color: var(--novvia-accent); } /* ================================================================ SLIDER WIDTH Default: Container-Breite (--nv-content-width), zentriert. Fuer Vollbreite .novvia-section-slider--bleed nutzen. ================================================================ */ .novvia-section-slider { width: 100%; max-width: var(--nv-content-width); margin-inline: auto; padding-inline: var(--nv-space-lg); position: relative; box-sizing: border-box; } .novvia-section-slider--bleed { max-width: none; padding-inline: 0; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .novvia-slider { width: 100% !important; max-width: none !important; } .novvia-slider .novvia-slide-bg { position: absolute; inset: 0; } .novvia-slider .novvia-slide-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ================================================================ WOOCOMMERCE PRODUCT LOOP (ul.products) - KRITISCH Wird von [products], [sale_products], [best_selling_products], [novvia_products], Related Products etc. verwendet. ================================================================ */ /* Standard WooCommerce product loop container */ ul.products, .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(var(--nv-card-min, 220px), var(--nv-card-max, 320px))); gap: 1.5rem; list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Product card inside WC loop */ ul.products li.product, ul.products .novvia-product-card { width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 !important; float: none !important; list-style: none; } /* WC adds inline width via columns class - override */ ul.products.columns-1 { grid-template-columns: 1fr; } ul.products.columns-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } ul.products.columns-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } ul.products.columns-4 { grid-template-columns: repeat(auto-fill, minmax(var(--nv-card-min, 220px), var(--nv-card-max, 320px))); } ul.products.columns-5 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } ul.products.columns-6 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* Product card image - ensure proper size */ ul.products .novvia-product-card .product-image-wrapper, ul.products li.product .product-image-wrapper { width: 100%; min-height: 180px; } ul.products .novvia-product-card .product-image-wrapper img, ul.products li.product img { width: 100%; height: 100%; object-fit: cover; } /* Related products & upsells */ .related.products ul.products, .upsells ul.products, .cross-sells ul.products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* WPBakery context: products inside vc_column */ .wpb_column ul.products, .vc_column_container ul.products { grid-template-columns: repeat(auto-fill, minmax(var(--nv-card-min, 220px), var(--nv-card-max, 320px))); } /* Reset WC default float/width styles that conflict with grid */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: none !important; width: 100% !important; margin: 0 !important; clear: none !important; } /* Product card consistent styling in all contexts */ .novvia-product-card { background: var(--novvia-card, #ffffff); border-radius: var(--nv-card-radius, 12px); border: var(--nv-card-border-width, 1px) solid var(--nv-card-border-color, #f1f5f9); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; } .novvia-product-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-2px); } /* Product image hover effect */ /* product-image-wrapper: konsolidiert oben in der Haupt-Card-Sektion */ .novvia-product-card .product-image-wrapper img { transition: transform 0.4s ease; } .novvia-product-card:hover .product-image-wrapper img:first-child { transform: scale(1.05); } /* Hover image (second gallery image) */ .novvia-product-card .product-image-hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } .novvia-product-card:hover .product-image-hover { opacity: 1; } /* Quick action overlay */ .novvia-product-card .product-actions-overlay { position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(100%); transition: transform 0.3s ease; } .novvia-product-card:hover .product-actions-overlay { transform: translateY(0); } /* Product badge styling */ .novvia-product-badge { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 6px; line-height: 1.4; letter-spacing: 0.02em; } /* Price styling */ .novvia-product-card .novvia-price del { color: var(--novvia-muted, #94a3b8); font-weight: 400; font-size: 0.85em; } .novvia-product-card .novvia-price ins { text-decoration: none; color: var(--novvia-sale, #dc2626); font-weight: 700; } /* Wishlist heart animation */ .novvia-product-card .absolute.top-3.right-3:hover { transform: scale(1.2); } @media (max-width: 768px) { ul.products, .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 0.75rem; } } @media (max-width: 480px) { ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; } } /* ================================================================ WOOCOMMERCE FORM STYLING (Cart, Checkout, My Account) ================================================================ */ /* Form fields */ .woocommerce-checkout .form-row input[type="text"], .woocommerce-checkout .form-row input[type="email"], .woocommerce-checkout .form-row input[type="tel"], .woocommerce-checkout .form-row input[type="number"], .woocommerce-checkout .form-row input[type="password"], .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-cart .form-row input, .woocommerce-cart .form-row select, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #0f172a; background: #fff; transition: border-color 0.15s; } .woocommerce form .form-row input:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--novvia-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--novvia-accent) 15%, transparent); } .woocommerce form .form-row label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 4px; } .woocommerce form .form-row { margin-bottom: 16px; } /* Checkout order review table */ .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 14px; } .woocommerce-checkout-review-order-table th { text-align: left; padding: 10px 0; font-weight: 600; color: #475569; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e2e8f0; } .woocommerce-checkout-review-order-table td { padding: 10px 0; border-bottom: 1px solid #f1f5f9; color: #0f172a; } .woocommerce-checkout-review-order-table .order-total td { font-weight: 700; font-size: 16px; border-bottom: none; padding-top: 14px; } .woocommerce-checkout-review-order-table .order-total th { font-weight: 700; font-size: 16px; border-bottom: none; padding-top: 14px; color: #0f172a; } /* Payment methods */ .woocommerce-checkout-payment { margin-top: 20px; } .wc_payment_methods { list-style: none; padding: 0; margin: 0; } .wc_payment_methods li { margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; transition: border-color 0.15s; } .wc_payment_methods li:has(input:checked) { border-color: var(--novvia-accent); background: color-mix(in srgb, var(--novvia-accent) 6%, #ffffff); } .wc_payment_methods label { font-size: 14px; font-weight: 500; color: #0f172a; cursor: pointer; } .wc_payment_methods .payment_box { margin-top: 10px; padding: 10px 0 0; font-size: 13px; color: #64748b; } /* Place order button */ #place_order { display: block; width: 100%; padding: 14px 24px; background: var(--novvia-accent); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s; margin-top: 16px; } #place_order:hover { background: var(--novvia-accent-hover); } /* Cart table styling */ .woocommerce-cart-form .shop_table { border-collapse: collapse; } .woocommerce-cart-form .shop_table td, .woocommerce-cart-form .shop_table th { vertical-align: middle; } /* Cart quantity input */ .novvia-quantity { display: inline-flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; } .novvia-qty-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #f8fafc; border: none; cursor: pointer; color: #475569; transition: background 0.15s; } .novvia-qty-btn:hover { background: #e2e8f0; } .novvia-quantity input[type="number"] { width: 40px; text-align: center; border: none; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; font-size: 14px; font-weight: 500; padding: 6px 0; -moz-appearance: textfield; } .novvia-quantity input::-webkit-outer-spin-button, .novvia-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* WooCommerce notices */ .woocommerce-message, .woocommerce-info { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .woocommerce-message { background: #f0fdfa; border: 1px solid #99f6e4; color: #134e51; } .woocommerce-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; } .woocommerce-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; list-style: none; } /* My Account */ .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; } .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 16px; font-size: 14px; color: #475569; text-decoration: none; border-radius: 8px; transition: all 0.15s; } .woocommerce-MyAccount-navigation li a:hover { background: #f1f5f9; color: #0f172a; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a { background: color-mix(in srgb, var(--novvia-accent) 8%, #ffffff); color: var(--novvia-accent); font-weight: 600; } /* ================================================================ NOVVIA PRICING PLUGIN (nvp-*) COMPATIBILITY ================================================================ */ /* Loop badge (on product cards) */ .nvp-loop-badge { position: absolute !important; z-index: 11; } /* Price display in cards/product pages */ .nvp-old-price { text-decoration: line-through; color: var(--novvia-muted, #94a3b8); font-weight: 400; margin-right: 6px; } .nvp-new-price { color: var(--novvia-accent); font-weight: 700; } .nvp-price-hint { display: block; font-size: 12px; color: var(--novvia-accent); font-weight: 600; margin-top: 2px; } .nvp-savings { display: inline-block; font-size: 11px; color: #16a34a; font-weight: 600; margin-left: 6px; } /* BOGO label in cart */ .nvp-bogo-label { display: inline-block; padding: 2px 8px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 600; border-radius: 4px; margin-left: 8px; } /* Cart tier hint */ .nvp-cart-hint { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 10px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; } /* Staffel/Tier table on product page */ .nvp-tier-table { margin: 16px 0; } .nvp-tier-header { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 8px; } .nvp-tier-cards { display: flex; gap: 8px; flex-wrap: wrap; } .nvp-tier-card { flex: 1; min-width: 100px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; text-align: center; font-size: 13px; transition: border-color 0.15s; } .nvp-tier-card:hover { border-color: var(--novvia-accent); } .nvp-tier-highlight { border-color: var(--novvia-accent); background: color-mix(in srgb, var(--novvia-accent) 8%, #ffffff); } .nvp-tier-qty { font-weight: 700; color: #0f172a; } .nvp-tier-discount { color: #dc2626; font-weight: 600; } .nvp-tier-price { color: #475569; font-size: 12px; } .nvp-tier-save { color: #16a34a; font-size: 11px; } /* Product page badge */ .nvp-badge-container { margin: 8px 0; } .nvp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; } /* ================================================================ NWC PLUGIN COMPATIBILITY (Kundegruppenwechsler etc.) ================================================================ */ /* Ensure group switcher panel is above everything */ #nwc-gs-panel { z-index: 999999 !important; } /* NWC B2B pricing table */ .nwc-price-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; } .nwc-price-table th, .nwc-price-table td { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; } .nwc-price-table th { background: #f8fafc; font-weight: 600; color: #475569; font-size: 11px; text-transform: uppercase; } /* Select2 styling (used by WooCommerce for country/state dropdowns) */ .select2-container .select2-selection--single { height: 42px !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px !important; padding-left: 14px !important; font-size: 14px; color: #0f172a; } .select2-container .select2-selection--single .select2-selection__arrow { height: 42px !important; } .select2-dropdown { border-color: #e2e8f0 !important; border-radius: 8px !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1) !important; } .select2-results__option--highlighted { background-color: var(--novvia-accent) !important; } /* ========================================================================= NOVVIA Drawer (Seitenpanel für Beschreibung / Zusätzliche Informationen) ========================================================================= */ /* Overlay — über ALLEM (Header z-index: 1000) */ .novvia-drawer-overlay { position: fixed; inset: 0; z-index: 1000010; opacity: 0; visibility: hidden; transition: opacity var(--drawer-speed, .35s) ease, visibility 0s var(--drawer-speed, .35s); } .novvia-drawer-overlay.is-open { opacity: 1; visibility: visible; transition: opacity var(--drawer-speed, .35s) ease, visibility 0s 0s; } /* Drawer Panel — über Header + Overlay */ .novvia-drawer { position: fixed; top: 0; right: 0; z-index: 1000020; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform var(--drawer-speed, .35s) cubic-bezier(.4, 0, .2, 1); box-shadow: -8px 0 30px rgba(0,0,0,.15); -webkit-overflow-scrolling: touch; } .novvia-drawer.is-open { transform: translateX(0); } /* Close button — oben rechts, sticky */ .novvia-drawer-close { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--drawer-pad, 40px) 12px; z-index: 2; background: inherit; } .novvia-drawer-close .novvia-drawer-title { font-size: 1.2em; font-weight: 700; margin: 0; padding: 0; border: none; } .novvia-drawer-close button { background: none; border: none; width: 40px; height: 40px; font-size: 28px; line-height: 1; cursor: pointer; color: inherit; opacity: .4; transition: opacity .2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .novvia-drawer-close button:hover { opacity: 1; } /* Drawer body content */ .novvia-drawer-body { padding: 0 var(--drawer-pad, 40px) var(--drawer-pad, 40px); line-height: 1.75; } .novvia-drawer-body p { margin: 0 0 1em; } .novvia-drawer-body h1 { font-size: 1.8em; font-weight: 700; margin: 1.4em 0 .5em; line-height: 1.3; } .novvia-drawer-body h2 { font-size: 1.5em; font-weight: 700; margin: 1.3em 0 .5em; line-height: 1.3; } .novvia-drawer-body h3 { font-size: 1.25em; font-weight: 600; margin: 1.2em 0 .5em; line-height: 1.4; } .novvia-drawer-body h4 { font-size: 1.1em; font-weight: 600; margin: 1.1em 0 .4em; } .novvia-drawer-body h5, .novvia-drawer-body h6 { font-size: 1em; font-weight: 600; margin: 1em 0 .4em; } .novvia-drawer-body strong, .novvia-drawer-body b { font-weight: 700; } .novvia-drawer-body em, .novvia-drawer-body i { font-style: italic; } .novvia-drawer-body u { text-decoration: underline; } .novvia-drawer-body a { color: var(--novvia-accent); text-decoration: underline; } .novvia-drawer-body a:hover { color: var(--novvia-accent-hover); } .novvia-drawer-body ul, .novvia-drawer-body ol { margin: 0 0 1em; padding-left: 1.5em; } .novvia-drawer-body ul { list-style: disc; } .novvia-drawer-body ol { list-style: decimal; } .novvia-drawer-body li { margin: 0 0 .4em; } .novvia-drawer-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; } .novvia-drawer-body blockquote { margin: 1em 0; padding: 12px 20px; border-left: 3px solid var(--novvia-accent); background: rgba(128,128,128,.05); font-style: italic; } .novvia-drawer-body table { width: 100%; border-collapse: collapse; margin: 1em 0; } .novvia-drawer-body th, .novvia-drawer-body td { padding: 8px 12px; border: 1px solid rgba(128,128,128,.2); text-align: left; } .novvia-drawer-body th { font-weight: 600; background: rgba(128,128,128,.05); } .novvia-drawer-body hr { border: none; border-top: 1px solid rgba(128,128,128,.2); margin: 1.5em 0; } .novvia-drawer-body code { background: rgba(128,128,128,.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: .9em; } /* Divider zwischen Titel und Content */ .novvia-drawer-divider { margin: 0 var(--drawer-pad, 40px) 20px; border: none; border-top: 1px solid rgba(128,128,128,.15); } /* ---- Trigger Varianten ---- */ /* Basis: Alle Trigger */ .novvia-drawer-trigger { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: var(--novvia-accent); font-size: inherit; font-weight: 500; cursor: pointer; padding: 6px 0; text-decoration: none; transition: all .2s; font-family: inherit; } .novvia-drawer-trigger svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; } /* Variante: Text only */ .novvia-drawer-trigger--text { text-decoration: underline; text-underline-offset: 3px; } .novvia-drawer-trigger--text:hover { color: var(--novvia-accent-hover); } /* Variante: Text + Pfeil */ .novvia-drawer-trigger--arrow:hover { color: var(--novvia-accent-hover); } .novvia-drawer-trigger--arrow:hover svg { transform: translateX(4px); } /* Variante: Text + Chevron */ .novvia-drawer-trigger--chevron:hover { color: var(--novvia-accent-hover); } .novvia-drawer-trigger--chevron:hover svg { transform: translateX(3px); } .novvia-drawer-trigger--chevron svg { width: 16px; height: 16px; } /* Variante: Text + Plus */ .novvia-drawer-trigger--plus:hover { color: var(--novvia-accent-hover); } .novvia-drawer-trigger--plus:hover svg { transform: rotate(90deg); } /* Variante: Button (gefüllt) */ .novvia-drawer-trigger--button { background: var(--novvia-accent); color: #fff; border-radius: var(--radius-md, 8px); padding: 12px 24px; font-weight: 600; font-size: 14px; } .novvia-drawer-trigger--button:hover { background: var(--novvia-accent-hover); transform: translateY(-1px); color: #fff; } .novvia-drawer-trigger--button svg { width: 16px; height: 16px; } .novvia-drawer-trigger--button:hover svg { transform: translateX(3px); } /* Variante: Button (Outline) */ .novvia-drawer-trigger--button-outline { background: transparent; color: var(--novvia-accent); border: 2px solid var(--novvia-accent); border-radius: var(--radius-md, 8px); padding: 10px 22px; font-weight: 600; font-size: 14px; } .novvia-drawer-trigger--button-outline:hover { background: var(--novvia-accent); color: #fff; } .novvia-drawer-trigger--button-outline svg { width: 16px; height: 16px; } .novvia-drawer-trigger--button-outline:hover svg { transform: translateX(3px); } /* Variante: Underline (gestrichelt) */ .novvia-drawer-trigger--underline { border-bottom: 1px dashed var(--novvia-accent); color: var(--novvia-text, #1e293b); padding: 2px 0; border-radius: 0; } .novvia-drawer-trigger--underline:hover { border-bottom-color: var(--novvia-accent-hover); color: var(--novvia-accent); } .novvia-drawer-trigger--underline svg { width: 14px; height: 14px; } /* Variante: Nur Icon (rund) */ .novvia-drawer-trigger--icon-only { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--novvia-border, #e2e8f0); background: var(--novvia-card, #fff); padding: 0; justify-content: center; } .novvia-drawer-trigger--icon-only:hover { background: var(--novvia-accent); color: #fff; border-color: var(--novvia-accent); transform: scale(1.05); } .novvia-drawer-trigger--icon-only svg { width: 20px; height: 20px; } /* Scroll lock on body */ body.novvia-drawer-open { overflow: hidden; } /* Mobile: Drawer immer 100% breit */ @media (max-width: 768px) { .novvia-drawer { width: 100% !important; } } /* ======================================================================== ANNOUNCEMENT / COUNTDOWN BAR ======================================================================== */ .novvia-announcement-bar { font-size: 0.8125rem; line-height: 1.4; z-index: 1001; position: relative; } .novvia-announcement-text { letter-spacing: 0.02em; } .novvia-announcement-countdown { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.05em; padding: 2px 8px; background: rgba(0, 0, 0, 0.15); border-radius: var(--radius-sm); font-size: 0.75rem; } .novvia-announcement-close:hover { opacity: 1 !important; } /* ======================================================================== FREE SHIPPING TOPBAR HINT ======================================================================== */ .nv-topbar-freeship { display: inline-flex; align-items: center; gap: 0.25rem; } .nv-topbar-freeship .woocommerce-Price-amount { font-weight: 700; } /* ======================================================================== FAQ ACCORDION (Layout Builder Block) ======================================================================== */ .novvia-sp-faq { margin-top: 2rem; } .novvia-sp-faq-title { font-size: 1.25rem; font-weight: 700; color: var(--novvia-text); margin: 0 0 1rem; } .novvia-sp-faq-list { display: flex; flex-direction: column; gap: 0; } .novvia-sp-faq-item { border: 1px solid var(--novvia-border); border-radius: var(--radius-md); margin-bottom: 0.5rem; overflow: hidden; } .novvia-sp-faq-item .novvia-sp-accordion-trigger { padding: 1rem 1.25rem; background: var(--novvia-card, #fff); } .novvia-sp-faq-item .novvia-sp-accordion-trigger:hover { background: var(--novvia-bg, #f8fafc); } .novvia-sp-faq-item .novvia-sp-accordion-content { padding: 0 1.25rem 1rem; color: var(--novvia-muted); font-size: 0.9375rem; line-height: 1.6; } /* ======================================================================== SALE COUNTDOWN TIMER ======================================================================== */ .novvia-sp-sale-countdown { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: color-mix(in srgb, var(--novvia-sale, #dc2626) 10%, transparent); border: 1px solid color-mix(in srgb, var(--novvia-sale, #dc2626) 25%, transparent); border-radius: var(--radius-md); margin-top: 1rem; font-size: 0.875rem; } .novvia-sp-sale-countdown-label { color: var(--novvia-sale, #dc2626); font-weight: 600; } .novvia-sp-sale-countdown-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--novvia-sale, #dc2626); letter-spacing: 0.03em; } /* Fallback for browsers that don't support color-mix */ @supports not (background: color-mix(in srgb, red 10%, transparent)) { .novvia-sp-sale-countdown { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.25); } } /* ======================================================================== RECENTLY VIEWED PRODUCTS ======================================================================== */ .novvia-sp-recently-viewed { margin-top: 2.5rem; } .novvia-sp-recently-viewed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--nv-card-min, 180px), 1fr)); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--novvia-border) transparent; padding-bottom: 0.5rem; } .novvia-sp-recently-viewed-grid > * { scroll-snap-align: start; min-width: 0; } @media (max-width: 768px) { .novvia-sp-recently-viewed-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* Dark mode overrides for new features */ [data-theme="dark"] .novvia-sp-faq-item { border-color: var(--nv-border, #334155); } [data-theme="dark"] .novvia-sp-faq-item .novvia-sp-accordion-trigger { background: var(--nv-surface, #0f172a); } [data-theme="dark"] .novvia-sp-sale-countdown { background: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.3); } [data-theme="dark"] .novvia-announcement-bar { /* Announcement bar uses inline styles, so no override needed */ } /* ===================================================================== CAMPAIGN SYSTEM - Badges & Banners ===================================================================== */ /* Campaign Badge (on product cards) */ .nv-campaign-badge { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; pointer-events: none; } .nv-campaign-badge--top-left { top: 8px; left: 8px; } .nv-campaign-badge--top-right { top: 8px; right: 8px; } .nv-campaign-badge--bottom-left { bottom: 8px; left: 8px; } .nv-campaign-badge--bottom-right { bottom: 8px; right: 8px; } .nv-campaign-badge-icon { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } .nv-campaign-badge-label { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } /* Campaign Banner */ .nv-campaign-banner { padding: 14px 0; text-align: center; font-size: 15px; font-weight: 600; color: #fff; position: relative; z-index: 10; } .nv-campaign-banner-inner { max-width: var(--nv-content-width, 1400px); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .nv-campaign-banner-image { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); flex-shrink: 0; } .nv-campaign-banner-text { font-size: 15px; line-height: 1.4; } .nv-campaign-banner-countdown { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; background: rgba(255, 255, 255, .2); padding: 4px 12px; border-radius: 8px; white-space: nowrap; } /* Responsive */ @media (max-width: 640px) { .nv-campaign-badge-icon { width: 28px; height: 28px; border-radius: 6px; } .nv-campaign-badge-label { font-size: 10px; padding: 2px 6px; } .nv-campaign-banner { font-size: 13px; padding: 10px 0; } .nv-campaign-banner-image { width: 36px; height: 36px; border-radius: 8px; } .nv-campaign-banner-countdown { font-size: 12px; padding: 3px 8px; } } /* Dark mode */ [data-theme="dark"] .nv-campaign-badge-icon { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); } [data-theme="dark"] .nv-campaign-badge-label { box-shadow: 0 2px 6px rgba(0, 0, 0, .3); } [data-theme="dark"] .nv-campaign-banner { border-bottom: 1px solid rgba(255, 255, 255, .1); } /* ═══════════════════════════════════════════════════════════════════════ CART PAGE — Mobile Cards, CTA Button, Trust Badges, Payment Icons ═══════════════════════════════════════════════════════════════════════ */ /* CTA (Checkout) Button */ .nv-cta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: var(--novvia-accent, #2bbcc4); color: #fff; font-size: 1rem; font-weight: 700; text-decoration: none; border-radius: 12px; transition: background .2s, transform .15s; cursor: pointer; border: none; letter-spacing: 0.01em; } .nv-cta-btn:hover { background: var(--novvia-accent-hover, #249ea5); transform: translateY(-1px); color: #fff; text-decoration: none; } .nv-cta-btn svg { flex-shrink: 0; } /* Trust badges */ .nv-trust { display: flex; justify-content: center; gap: 16px; margin-top: 1.25rem; font-size: 11px; color: var(--novvia-muted, #64748b); } .nv-trust__item { display: flex; align-items: center; gap: 5px; } .nv-trust__icon { width: 14px; height: 14px; stroke: var(--novvia-accent, #2bbcc4); } /* Payment icons row */ .nv-payment-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 1rem; } .nv-payment-icon { width: 40px; height: 26px; border-radius: 4px; background: var(--novvia-bg-alt, #f1f5f9); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--novvia-muted, #64748b); } /* ── Mobile Cart Cards (Swipeable) ────────────────────────────────────── */ .nv-cart-mobile-wrap { position: relative; overflow: hidden; border-radius: 12px; } .nv-cart-mobile-delete { position: absolute; top: 0; right: 0; bottom: 0; width: 64px; background: #ef4444; color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 0 12px 12px 0; z-index: 1; } .nv-cart-mobile-delete svg { width: 20px; height: 20px; } .nv-cart-mobile-card { position: relative; z-index: 2; display: flex; gap: 12px; padding: 12px; background: var(--novvia-card-bg, #fff); border: 1px solid var(--novvia-border, #e2e8f0); border-radius: 12px; transition: transform .25s cubic-bezier(.4,0,.2,1); } .nv-cart-mobile-card img { width: 100%; height: 100%; object-fit: cover; } /* Swipe-to-reveal: Wenn per JS nach links geschoben */ .nv-cart-mobile-wrap.is-swiped .nv-cart-mobile-card { transform: translateX(-64px); } /* ── Responsive: Cart Mobile ──────────────────────────────────────────── */ @media (max-width: 767px) { .nv-cta-btn { padding: 14px 20px; font-size: .9375rem; border-radius: 10px; } .nv-trust { flex-wrap: wrap; gap: 10px; } } /* ================================================================ SLIDER-CAP — finale Override Spezifitaet body + .class und !important, schlaegt alles vorhandene. Wenn doch noch 100vw: DevTools "Computed Styles" pruefen. ================================================================ */ body .novvia-section-slider { width: 100% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; left: auto !important; right: auto !important; } body .novvia-section-slider.novvia-section-slider--bleed { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; width: 100vw !important; margin-left: -50vw !important; margin-right: -50vw !important; left: 50% !important; right: 50% !important; }