/** * Wooptima minicart — Bionela brand theming. * * The React minicart is themed entirely through CSS custom properties that its * theme.json references (--primary, --accent, --shade-*, --radius-m, …). They * are defined here on :root (globally) so the drawer — which renders through a * Chakra portal on , outside #wooptima-minicart — picks them up. * * Brand mapping: teal chrome (header, prices, progress) + green CTA buttons, * matching the rest of the Bionela storefront. * * @package Bionela_New */ :root { /* Action / accent — cart & checkout buttons in the drawer (green CTA). */ --accent: var(--green); --accent-hover: var(--green-600); /* Primary — drawer header, prices, progress bar, totals (brand teal). */ --primary: var(--teal); --primary-hover: var(--teal-600); --primary-light: rgba(255, 255, 255, .72); /* Secondary (used by a few labels). */ --secondary: var(--ink); /* Neutrals. */ --base: var(--ink); --white: #ffffff; --shade-white: #ffffff; --shade-light: var(--line); --shade-medium: var(--muted); --shade-ultra-light: var(--page-bg); /* Radius. */ --radius-m: var(--radius-md); } /* The drawer/popup lives in a Chakra portal on — align its typography * with the theme. */ .wooptima-minicart-sidebar, [class*="wooptima-cart"], [class*="wooptima-minicart"], #wooptima-minicart { font-family: var(--font-body); } /* The app root sits in the header actions row and renders the plugin's own cart * button (CartHeader). The shortcode stamps an inline `width: 100%` on the root * — meant for a full-width container — which would push "Môj účet" out of the * row, so it is overridden here. The button styles themselves come from the * plugin's theme.json via the custom properties above. */ #wooptima-minicart { width: auto !important; display: flex; align-items: center; flex: none; } /* Hide WooCommerce's "View cart" link that appears after a loop/archive add — * the minicart drawer is the cart entry point. */ a.added_to_cart, a.added_to_cart.wc-forward { display: none !important; } /* Hide the notices block in the drawer footer (free-shipping progress + shipping * icons) — kept off by request; the React app is compiled so CSS is the clean way. */ .wooptima-minicart-sidebar-footer__notices { display: none !important; } /* The drawer's CTAs render as , so the global `a:hover { text-decoration: * underline }` underlines their label. Hover colour is left alone — only the * underline goes. * * Scoping is awkward: `wooptima-minicart-sidebar` is never put on an element, * the app only uses it as a prefix for the -header / -items / -footer children, * and the empty-cart block drops its className entirely (so the "Zobraziť * produkty" link carries nothing but a styled-components hash). The drawer is * therefore matched through its header child, which covers every link inside it. * !important beats the styles injected at runtime. */ :has(> .wooptima-minicart-sidebar-header) a, :has(> .wooptima-minicart-sidebar-header) a:hover, :has(> .wooptima-minicart-sidebar-header) a:focus, a.chakra-button, a.chakra-button:hover, a.chakra-button:focus, a.chakra-button:active, a.chakra-button span, [class*="wooptima-minicart"] a, [class*="wooptima-minicart"] a:hover, [class*="wooptima-minicart"] a:focus, .wooptima-button, .wooptima-button:hover, .wooptima-button:focus { text-decoration: none !important; } /* Product rows: no hover feedback. The app paints a #f9f9f9 wash on hover * (cartItem.background.hover); the base is `transparent`, so resetting hover to * the same value removes the effect. The row element itself carries only the * product type as a class ("simple" / "variation") plus a styled-components * hash — `wooptima-cart-item` is only the prefix of its children's classes — so * the row is matched through the image child. Runtime-injected styles, hence * !important. */ *:has(> .wooptima-cart-item__image):hover, .wooptima-minicart-sidebar-items__wrapper > *:hover { background: transparent !important; background-color: transparent !important; } /* The product name is a link — keep it inert on hover. */ .wooptima-cart-item__name, .wooptima-cart-item__name:hover, .wooptima-cart-item__name:focus { color: inherit; text-decoration: none; } /* The remove "×" fades in on row hover — hold it at one opacity instead. */ .wooptima-cart-item__remove { opacity: .5 !important; }