/* ========================================================================== CC Header Actions Widget Style presets: minimal, outlined, filled, pill, ghost Search panels: slide-down, inline-expand, fullscreen, dropdown Full light / dark mode via [data-theme] on . ========================================================================== */ /* ── Fix Elementor container overflow clipping dropdown panels ── */ .elementor-widget-cc-header-actions, .elementor-widget-cc-header-actions > .elementor-widget-container { overflow: visible !important; } /* Flexbox containers & legacy columns that directly wrap this widget */ .e-con:has(> .elementor-widget-cc-header-actions), .e-con:has(> .e-con > .elementor-widget-cc-header-actions), .elementor-column:has(.elementor-widget-cc-header-actions), .elementor-widget-wrap:has(> .elementor-widget-cc-header-actions) { overflow: visible !important; } /* Also fix the Elementor section / container one more level up */ .elementor-section:has(.elementor-widget-cc-header-actions), .e-con:has(.elementor-widget-cc-header-actions) { overflow: visible !important; } /* ── CSS Custom Properties ── */ .cc-ha { --cc-ha-icon-size: 20px; --cc-ha-item-size: 40px; --cc-ha-icon-color: var(--cc-icon-color, var(--cc-heading)); --cc-ha-icon-hover: var(--cc-icon-hover, var(--cc-accent)); --cc-ha-item-bg: transparent; --cc-ha-item-hover-bg: transparent; --cc-ha-item-border: transparent; --cc-ha-badge-bg: var(--cc-accent); --cc-ha-badge-color: var(--cc-btn-text); --cc-ha-badge-size: 18px; --cc-ha-panel-bg: var(--cc-surface); --cc-ha-panel-border: var(--cc-border); --cc-ha-overlay-bg: rgba(0, 0, 0, 0.5); display: flex; align-items: center; position: relative; font-family: inherit; } /* ── Items Row ── */ .cc-ha__items { display: flex; align-items: center; gap: 4px; } /* ── Individual Item ── */ .cc-ha__item { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--cc-ha-item-size); height: var(--cc-ha-item-size); border: none; background: none; color: var(--cc-ha-icon-color); cursor: pointer; padding: 0; line-height: 1; text-decoration: none; border-radius: 50%; transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.15s; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .cc-ha__item svg { width: var(--cc-ha-icon-size); height: var(--cc-ha-icon-size); flex-shrink: 0; pointer-events: none; } .cc-ha__item:hover { color: var(--cc-ha-icon-hover); } .cc-ha__item:active { transform: scale(0.92); } .cc-ha__item:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; } /* ── Separator ── */ .cc-ha__sep { display: block; width: 1px; height: 20px; background-color: var(--cc-ha-item-border, var(--cc-border)); flex-shrink: 0; margin: 0 2px; } /* ========================================================================== Style Presets ========================================================================== */ /* -- Minimal: no bg, no border, just icons -- */ .cc-ha--minimal .cc-ha__item { background: transparent; border: none; } /* -- Outlined: border ring + transparent bg -- */ .cc-ha--outlined .cc-ha__item { background: transparent; border: 1px solid var(--cc-ha-item-border, var(--cc-border)); } .cc-ha--outlined .cc-ha__item:hover { border-color: var(--cc-ha-icon-hover); background: var(--cc-ha-item-hover-bg, rgba(0, 0, 0, 0.03)); } [data-theme="dark"] .cc-ha--outlined .cc-ha__item { border-color: var(--cc-ha-item-border, var(--cc-border)); } [data-theme="dark"] .cc-ha--outlined .cc-ha__item:hover { background: var(--cc-ha-item-hover-bg, rgba(255, 255, 255, 0.08)); } /* -- Filled: solid bg circle -- */ .cc-ha--filled .cc-ha__item { background: var(--cc-ha-item-bg, var(--cc-surface)); border: 1px solid var(--cc-ha-item-border, transparent); } .cc-ha--filled .cc-ha__item:hover { background: var(--cc-ha-item-hover-bg, var(--cc-accent)); color: var(--cc-ha-badge-color); } [data-theme="dark"] .cc-ha--filled .cc-ha__item { background: var(--cc-ha-item-bg, var(--cc-surface)); } /* -- Pill: rounded-rect bg -- */ .cc-ha--pill .cc-ha__item { border-radius: 8px; background: var(--cc-ha-item-bg, var(--cc-surface)); border: 1px solid var(--cc-ha-item-border, transparent); } .cc-ha--pill .cc-ha__item:hover { background: var(--cc-ha-item-hover-bg, rgba(0, 0, 0, 0.06)); } [data-theme="dark"] .cc-ha--pill .cc-ha__item { background: var(--cc-ha-item-bg, var(--cc-surface)); } [data-theme="dark"] .cc-ha--pill .cc-ha__item:hover { background: var(--cc-ha-item-hover-bg, rgba(255, 255, 255, 0.08)); } /* -- Ghost: bg on hover only -- */ .cc-ha--ghost .cc-ha__item { background: transparent; border: 1px solid transparent; } .cc-ha--ghost .cc-ha__item:hover { background: var(--cc-ha-item-hover-bg, rgba(0, 0, 0, 0.06)); border-color: var(--cc-ha-item-border, transparent); } [data-theme="dark"] .cc-ha--ghost .cc-ha__item:hover { background: var(--cc-ha-item-hover-bg, rgba(255, 255, 255, 0.08)); } /* ========================================================================== Dark / Light Toggle — embedded (reuses .cc-toggle--icon from toggle.css) Override: no hover background in any preset. ========================================================================== */ .cc-ha .cc-ha__toggle.cc-toggle--icon { background: transparent !important; border-color: transparent; } .cc-ha--outlined .cc-ha__toggle.cc-toggle--icon { border: 1px solid var(--cc-ha-item-border, var(--cc-border)); background: transparent !important; } .cc-ha--outlined .cc-ha__toggle.cc-toggle--icon:hover { border-color: var(--cc-ha-icon-hover); background: transparent !important; } .cc-ha .cc-ha__toggle.cc-toggle--icon:hover { background: transparent !important; } /* Inherit icon colour from the header actions system */ .cc-ha .cc-ha__toggle .cc-toggle__icon--sun { color: currentColor; } .cc-ha .cc-ha__toggle .cc-toggle__icon--moon { color: currentColor; } .cc-ha .cc-ha__toggle .cc-toggle__icon-btn { color: var(--cc-ha-icon-color); } [data-theme="dark"] .cc-ha .cc-ha__toggle.cc-toggle--icon .cc-toggle__icon--sun, [data-theme="dark"] .cc-ha .cc-ha__toggle.cc-toggle--icon .cc-toggle__icon--moon { color: currentColor; } .cc-ha .cc-ha__toggle:hover .cc-toggle__icon--sun, .cc-ha .cc-ha__toggle:hover .cc-toggle__icon--moon { color: var(--cc-ha-icon-hover); } .cc-ha .cc-ha__item:not(:hover) .cc-toggle__icon--sun, .cc-ha .cc-ha__item:not(:hover) .cc-toggle__icon--moon { color: var(--cc-ha-icon-color); } /* Ensure the toggle SVGs match the icon size */ .cc-ha .cc-toggle__icon svg { width: var(--cc-ha-icon-size); height: var(--cc-ha-icon-size); } /* ========================================================================== Badge ========================================================================== */ .cc-ha__badge { position: absolute; top: 0; right: 0; min-width: var(--cc-ha-badge-size); height: var(--cc-ha-badge-size); background: var(--cc-ha-badge-bg); color: var(--cc-ha-badge-color); font-size: 10px; font-weight: 700; line-height: var(--cc-ha-badge-size); text-align: center; border-radius: 9px; padding: 0 4px; pointer-events: none; transform: translate(40%, -30%); z-index: 5; box-sizing: border-box; } .cc-ha__badge--pulse { animation: cc-ha-badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes cc-ha-badge-pulse { 0%, 100% { transform: translate(40%, -30%) scale(1); } 50% { transform: translate(40%, -30%) scale(1.15); } } /* ========================================================================== Search Panels ========================================================================== */ /* -- Overlay (for slide-down & fullscreen) -- */ .cc-ha__search-overlay { position: fixed; inset: 0; background: var(--cc-ha-overlay-bg); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .cc-ha__search-overlay.is-active { opacity: 1; visibility: visible; } /* -- Shared panel base -- */ .cc-ha__search-panel { display: none; z-index: 9999; } .cc-ha__search-panel.is-active { display: block; } .cc-ha__search-form { display: flex; align-items: center; gap: 10px; width: 100%; } .cc-ha__search-form-icon { flex-shrink: 0; color: var(--cc-muted); } .cc-ha__search-form-icon svg { width: 20px; height: 20px; } .cc-ha__search-input { flex: 1; border: none; outline: none; background: transparent; color: var(--cc-text); font-size: 1rem; font-family: inherit; padding: 0; min-width: 0; } .cc-ha__search-input::placeholder { color: var(--cc-muted); } .cc-ha__search-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--cc-muted); cursor: pointer; border-radius: 50%; padding: 0; flex-shrink: 0; transition: color 0.2s, background 0.2s; } .cc-ha__search-close svg { width: 18px; height: 18px; } .cc-ha__search-close:hover { color: var(--cc-heading); background: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .cc-ha__search-close:hover { background: rgba(255, 255, 255, 0.1); } /* -- Slide-Down -- */ .cc-ha__search--slide-down { position: fixed; top: 0; left: 0; right: 0; background: var(--cc-surface); border-bottom: 1px solid var(--cc-border); padding: 20px 24px; transform: translateY(-100%); transition: transform 0.3s ease; } .cc-ha__search--slide-down.is-active { display: block; transform: translateY(0); } [data-theme="dark"] .cc-ha__search--slide-down { background: var(--cc-surface); border-bottom-color: var(--cc-border); } /* -- Inline Expand -- */ .cc-ha__search--inline-expand { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0; overflow: hidden; background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: 24px; padding: 0; transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s; opacity: 0; } .cc-ha__search--inline-expand.is-active { display: block; width: 280px; padding: 6px 14px; opacity: 1; } [data-theme="dark"] .cc-ha__search--inline-expand { background: var(--cc-surface); border-color: var(--cc-border); } /* -- Fullscreen -- */ .cc-ha__search--fullscreen { position: fixed; inset: 0; background: var(--cc-bg); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .cc-ha__search--fullscreen.is-active { display: flex; opacity: 1; visibility: visible; } .cc-ha__search--fullscreen .cc-ha__search-form { max-width: 600px; width: 90%; } .cc-ha__search--fullscreen .cc-ha__search-input { font-size: 1.5rem; border-bottom: 2px solid var(--cc-border); padding: 12px 0; } .cc-ha__search--fullscreen .cc-ha__search-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; } .cc-ha__search--fullscreen .cc-ha__search-close svg { width: 24px; height: 24px; } [data-theme="dark"] .cc-ha__search--fullscreen { background: var(--cc-bg); } /* -- Dropdown -- */ .cc-ha__search--dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: 8px; padding: 10px 14px; width: 300px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; } .cc-ha__search--dropdown.is-active { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; } [data-theme="dark"] .cc-ha__search--dropdown { background: var(--cc-surface); border-color: var(--cc-border); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4); } /* ========================================================================== Cart Panel ========================================================================== */ .cc-ha__cart-overlay { position: fixed; inset: 0; background: var(--cc-ha-overlay-bg); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .cc-ha__cart-overlay.is-active { opacity: 1; visibility: visible; } /* -- Dropdown variant -- */ .cc-ha__cart-panel--dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-height: 460px; background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: 12px; box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15); z-index: 9999; display: flex; flex-direction: column; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; } .cc-ha__cart-panel--dropdown.is-active { opacity: 1; transform: translateY(0); visibility: visible; } [data-theme="dark"] .cc-ha__cart-panel--dropdown { background: var(--cc-surface); border-color: var(--cc-border); box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5); } /* -- Off-canvas variant -- */ .cc-ha__cart-panel--offcanvas-right { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw; background: var(--cc-surface); border-left: 1px solid var(--cc-border); z-index: 9999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s ease; } .cc-ha__cart-panel--offcanvas-right.is-active { transform: translateX(0); } [data-theme="dark"] .cc-ha__cart-panel--offcanvas-right { background: var(--cc-surface); border-left-color: var(--cc-border); } /* -- Cart Panel Inner -- */ .cc-ha__cart-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--cc-border); flex-shrink: 0; } [data-theme="dark"] .cc-ha__cart-panel-header { border-bottom-color: var(--cc-border); } .cc-ha__cart-panel-title { font-size: 1rem; font-weight: 600; color: var(--cc-heading); } [data-theme="dark"] .cc-ha__cart-panel-title { color: var(--cc-heading); } .cc-ha__cart-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--cc-muted); cursor: pointer; border-radius: 50%; padding: 0; transition: color 0.2s, background 0.2s; } .cc-ha__cart-close svg { width: 18px; height: 18px; } .cc-ha__cart-close:hover { color: var(--cc-heading); background: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .cc-ha__cart-close:hover { background: rgba(255, 255, 255, 0.1); } /* Cart body */ .cc-ha__cart-panel-body { flex: 1; overflow-y: auto; padding: 16px 20px; scrollbar-width: thin; } /* Style WooCommerce mini-cart contents */ .cc-ha__mini-cart-contents .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } /* Hide WooCommerce's built-in mini-cart subtotal and buttons — the theme renders its own footer with subtotal + View Cart / Checkout. */ .cc-ha__mini-cart-contents .woocommerce-mini-cart__total, .cc-ha__mini-cart-contents .woocommerce-mini-cart__buttons, .cc-ha__mini-cart-contents p.woocommerce-mini-cart__buttons, .cc-ha__mini-cart-contents p.total { display: none !important; } .cc-ha__mini-cart-contents .woocommerce-mini-cart-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cc-border); } [data-theme="dark"] .cc-ha__mini-cart-contents .woocommerce-mini-cart-item { border-bottom-color: var(--cc-border); } .cc-ha__mini-cart-contents .woocommerce-mini-cart-item:last-child { border-bottom: none; } .cc-ha__mini-cart-contents .woocommerce-mini-cart-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .cc-ha__mini-cart-contents .woocommerce-mini-cart-item a:not(.remove) { color: var(--cc-heading); text-decoration: none; font-size: 0.875rem; font-weight: 500; line-height: 1.3; } [data-theme="dark"] .cc-ha__mini-cart-contents .woocommerce-mini-cart-item a:not(.remove) { color: var(--cc-heading); } .cc-ha__mini-cart-contents .woocommerce-mini-cart-item .remove { font-size: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-left: auto; color: var(--cc-muted) !important; border-radius: 50%; flex-shrink: 0; } .cc-ha__mini-cart-contents .woocommerce-mini-cart-item .remove::before { content: '×'; font-size: 16px; } .cc-ha__mini-cart-contents .woocommerce-mini-cart-item .remove:hover { color: #ef4444 !important; background: rgba(239, 68, 68, 0.1); } .cc-ha__mini-cart-contents .quantity { font-size: 0.75rem; color: var(--cc-muted); display: block; } .cc-ha__mini-cart-contents .woocommerce-mini-cart__empty-message { text-align: center; color: var(--cc-muted); padding: 24px 0; font-size: 0.875rem; } /* Cart footer */ .cc-ha__cart-panel-footer { padding: 16px 20px; border-top: 1px solid var(--cc-border); flex-shrink: 0; } [data-theme="dark"] .cc-ha__cart-panel-footer { border-top-color: var(--cc-border); } .cc-ha__cart-subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 0.875rem; color: var(--cc-text); } [data-theme="dark"] .cc-ha__cart-subtotal { color: var(--cc-text); } .cc-ha__cart-subtotal-amount { font-weight: 700; color: var(--cc-accent); } .cc-ha__cart-panel-buttons { display: flex; gap: 8px; } .cc-ha__cart-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; text-align: center; transition: opacity 0.2s, transform 0.15s; cursor: pointer; border: none; } .cc-ha__cart-btn:hover { opacity: 0.9; text-decoration: none; } .cc-ha__cart-btn:active { transform: scale(0.97); } .cc-ha__cart-btn--view { background: transparent; border: 1px solid var(--cc-border); color: var(--cc-heading); } [data-theme="dark"] .cc-ha__cart-btn--view { border-color: var(--cc-border); color: var(--cc-heading); } .cc-ha__cart-btn--checkout { background: var(--cc-btn-bg); color: var(--cc-btn-text); } /* ========================================================================== Mobile / Responsive ========================================================================== */ @media (max-width: 767px) { .cc-ha--compact-mobile { --cc-ha-icon-size: 18px; --cc-ha-item-size: 34px; } .cc-ha--compact-mobile .cc-ha__items { gap: 2px; } .cc-ha--hide-search-mobile .cc-ha__search-trigger { display: none; } .cc-ha--hide-wishlist-mobile .cc-ha__wishlist { display: none; } /* Cart off-canvas full width on mobile */ .cc-ha__cart-panel--offcanvas-right { width: 100%; max-width: 100vw; } .cc-ha__cart-panel--dropdown { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 100%; max-width: 100vw; max-height: 100vh; border-radius: 0; transform: translateX(100%); transition: transform 0.35s ease, opacity 0.35s, visibility 0.35s; } .cc-ha__cart-panel--dropdown.is-active { transform: translateX(0); } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .cc-ha__item, .cc-ha__search-panel, .cc-ha__search-overlay, .cc-ha__cart-panel, .cc-ha__cart-overlay, .cc-ha__badge--pulse { transition: none !important; animation: none !important; } }