/*
Theme Name: VelesDC Shop
Theme URI: https://velesdc.com
Template: astra
Author: VelesDC
Author URI: https://velesdc.com
Version: 1.0.12
Text Domain: velesdc-child
*/
.page.ast-plain-container.ast-no-sidebar #primary {
margin-top: 0;
margin-bottom: 0;
}
/* Design Tokens */
:root {
--ast-global-color-0: #FCA004;
--ast-global-color-1: #0D0D0D;
--ast-global-color-2: #E0E0E0;
--ast-global-color-3: #A0A0A0;
--ast-global-color-4: #1A1A1A;
--ast-global-color-5: #0D0D0D;
--ast-global-color-6: #E8E8E8;
--ast-global-color-7: #FFFFFF;
--ast-global-color-8: #000000;
--ast-border-color: rgba(255, 255, 255, 0.08);
--eb-global-primary-color: #FFFFFF;
--eb-global-secondary-color: #A0A0A0;
--eb-global-text-color: #C0C0C0;
--eb-global-heading-color: #FFFFFF;
--eb-global-background-color: #0D0D0D;
--eb-global-button-text-color: #0D0D0D;
--eb-global-button-background-color: #FCA004;
--veles-bg-primary: #0D0D0D;
--veles-bg-card: #1A1A1A;
--veles-bg-card-hover: #222222;
--veles-accent: #FCA004;
--veles-accent-hover: #FFB52E;
--veles-text-primary: #FFFFFF;
--veles-text-secondary: #C0C0C0;
--veles-text-muted: #808080;
--veles-border: rgba(255, 255, 255, 0.08);
--veles-border-hover: rgba(252, 160, 4, 0.3);
--veles-glass-bg: rgba(26, 26, 26, 0.7);
--veles-glass-border: rgba(255, 255, 255, 0.06);
--veles-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* Global Base */
html {
color-scheme: dark;
}
/* Force Gutenberg inline colors to override Astra/EB heading globals */
h1.has-text-color[style*="color"],
h2.has-text-color[style*="color"],
h3.has-text-color[style*="color"],
h4.has-text-color[style*="color"],
h5.has-text-color[style*="color"],
h6.has-text-color[style*="color"] {
color: unset !important;
}
body,
body.home,
body.page,
body.single,
body.archive,
body.search,
body.woocommerce-page {
background-color: var(--veles-bg-primary) !important;
color: var(--veles-text-secondary) !important;
background-image: none !important;
}
#page,
.hfeed.site {
background-color: var(--veles-bg-primary);
}
.site-content,
#content {
background-color: var(--veles-bg-primary);
}
.ast-container {
background-color: transparent;
}
#primary,
.content-area {
background-color: transparent;
}
.site-main,
main#main {
background-color: transparent;
}
a {
color: var(--veles-accent) !important;
transition: color 0.3s ease;
}
a:hover,
a:focus {
color: var(--veles-accent-hover) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.entry-content :where(h1, h2, h3, h4, h5, h6) a {
color: var(--veles-text-primary) !important;
}
p,
.entry-content p {
color: var(--veles-text-secondary);
}
::selection {
background-color: rgba(252, 160, 4, 0.3);
color: #FFFFFF;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0D0D0D;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--veles-accent);
}
/* Above Header Bar */
.ast-above-header-bar,
.ast-above-header-bar.ast-above-header,
.ast-above-header.ast-above-header-bar {
background-color: #000000 !important;
border-bottom: 1px solid rgba(252, 160, 4, 0.15) !important;
}
/* Above Header — center trust text across all viewports */
.ast-above-header-bar .site-above-header-wrap,
.ast-above-header-bar .ast-builder-grid-row {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.ast-above-header-bar .ast-builder-grid-row .ast-grid-common-col {
display: flex !important;
align-items: center !important;
}
/* Trust text column — fill remaining space + center */
.ast-above-header-bar .site-above-header-wrap .ast-builder-grid-row>.site-header-above-section-left,
.ast-above-header-bar .site-above-header-wrap .ast-builder-grid-row>.site-header-above-section-center,
.ast-above-header-bar .site-above-header-wrap .ast-builder-grid-row>.site-header-above-section-right,
.ast-above-header-bar .ast-builder-grid-row>div:not(:first-child) {
flex: 1 !important;
text-align: center !important;
justify-content: center !important;
}
.ast-above-header-bar h4,
.ast-above-header-bar .wp-block-heading {
color: #E0E0E0 !important;
}
.ast-above-header-bar mark.has-inline-color {
color: #FCA004 !important;
}
.ast-above-header-bar .ast-custom-button-link .ast-custom-button,
.ast-builder-button-wrap .ast-custom-button {
background-color: rgba(252, 160, 4, 0.15) !important;
color: var(--veles-accent) !important;
border: 1px solid rgba(252, 160, 4, 0.3) !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
white-space: nowrap !important;
font-size: clamp(9px, 1.2vw, 14px) !important;
padding: clamp(2px, 0.4vw, 6px) clamp(8px, 1vw, 16px) !important;
line-height: 1.3 !important;
}
/* Trust bar text — fluid responsive */
.ast-above-header-bar h4,
.ast-above-header-bar .wp-block-heading,
.ast-above-header-bar .site-above-header-wrap h4 {
font-size: clamp(10px, 1.4vw, 16px) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.ast-above-header-bar .ast-custom-button-link:hover .ast-custom-button {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
}
/* Issue #196: on phones the trust text wraps instead of pushing the bar past both screen edges. */
@media (max-width: 544px) {
.ast-above-header-bar .site-above-header-wrap .ast-builder-grid-row {
justify-content: space-between !important;
gap: 10px;
}
.ast-above-header-bar .site-above-header-wrap .ast-builder-grid-row>div {
min-width: 0 !important;
}
.ast-above-header-bar .site-above-header-wrap .ast-builder-grid-row>.site-header-above-section-left {
flex: 0 0 auto !important;
}
.ast-above-header-bar .widget {
min-width: 0;
max-width: 100%;
}
.ast-above-header-bar h4,
.ast-above-header-bar .wp-block-heading,
.ast-above-header-bar .site-above-header-wrap h4 {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.35 !important;
}
}
/* Primary Header & Navigation */
.ast-primary-header-bar,
.ast-primary-header-bar.ast-primary-header,
.main-header-bar {
background-color: #0D0D0D !important;
border-bottom: 1px solid var(--veles-border) !important;
backdrop-filter: blur(10px);
}
.ast-builder-menu-1 .menu-item>.menu-link,
.ast-builder-menu-2 .menu-item>.menu-link,
.main-header-menu .menu-link {
color: #E0E0E0 !important;
transition: color 0.3s ease !important;
}
.ast-builder-menu-1 .menu-item:hover>.menu-link,
.ast-builder-menu-2 .menu-item:hover>.menu-link,
.main-header-menu .menu-item:hover>.menu-link {
color: var(--veles-accent) !important;
}
.ast-builder-menu-1 .menu-item.current-menu-item>.menu-link,
.ast-builder-menu-2 .menu-item.current-menu-item>.menu-link {
color: var(--veles-accent) !important;
}
.main-header-menu .sub-menu,
.ast-builder-menu-1 .main-header-menu .sub-menu,
.ast-builder-menu-2 .main-header-menu .sub-menu,
.ast-builder-menu-1 .main-header-menu,
.ast-builder-menu-2 .main-header-menu {
background-color: #141414 !important;
border-color: var(--veles-border) !important;
}
.main-header-menu .sub-menu .menu-link {
color: #C0C0C0 !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}
.main-header-menu .sub-menu .menu-item:hover>.menu-link {
color: var(--veles-accent) !important;
background-color: rgba(252, 160, 4, 0.08) !important;
}
.ast-desktop .main-header-menu.ast-menu-shadow .sub-menu {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}
.ast-icon.icon-arrow svg,
.ast-header-navigation-arrow .icon-arrow svg {
fill: #808080 !important;
}
.menu-item:hover>.menu-link .ast-icon.icon-arrow svg {
fill: var(--veles-accent) !important;
}
.ast-header-search .astra-search-icon,
.ast-header-search .ast-icon,
.ast-search-icon .astra-search-icon {
color: #C0C0C0 !important;
}
.ast-search-menu-icon .search-form {
background-color: #1A1A1A !important;
border-color: var(--veles-border) !important;
}
.ast-search-menu-icon .search-field {
color: #E0E0E0 !important;
background-color: transparent !important;
}
.ast-site-header-cart .ast-addon-cart-wrap,
.ast-site-header-cart .ast-addon-cart-wrap i.astra-icon,
.ast-icon-shopping-cart .ast-icon svg {
color: #E0E0E0 !important;
fill: #E0E0E0 !important;
}
.ast-site-header-cart .ast-addon-cart-wrap i.astra-icon:after {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border-color: var(--veles-accent) !important;
}
.ast-menu-cart-outline .ast-addon-cart-wrap {
border-color: rgba(255, 255, 255, 0.15) !important;
}
.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg path:not(.ast-hf-account-unfill),
.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg circle {
fill: #E0E0E0 !important;
}
.astra-cart-drawer {
background-color: #141414 !important;
border-color: var(--veles-border) !important;
}
.astra-cart-drawer .astra-cart-drawer-header {
border-bottom-color: var(--veles-border) !important;
}
.astra-cart-drawer .astra-cart-drawer-header .astra-cart-drawer-title {
color: var(--veles-text-primary) !important;
}
/* Mobile Header */
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-header-content {
background-color: #0D0D0D !important;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill {
background: rgba(252, 160, 4, 0.15) !important;
color: var(--veles-accent) !important;
border: 1px solid rgba(252, 160, 4, 0.3) !important;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
fill: var(--veles-accent) !important;
}
@media (max-width: 921px) {
/* ============================================
MOBILE MENU — DARK MODE OVERRIDE
Uses body-level prefix for maximum specificity
============================================ */
/* Reset all wrappers inside mobile header */
body.ast-header-break-point .ast-mobile-header-content,
body.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content,
body.ast-header-break-point .ast-builder-menu-1,
body.ast-header-break-point .ast-builder-menu-2,
body.ast-header-break-point .ast-builder-menu-1 .main-header-menu,
body.ast-header-break-point .ast-builder-menu-2 .main-header-menu,
body.ast-header-break-point .ast-builder-menu-1 .main-header-menu .sub-menu,
body.ast-header-break-point .ast-builder-menu-2 .main-header-menu .sub-menu {
background-color: #0D0D0D !important;
background: #0D0D0D !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Reset ALL list items — remove borders and outlines */
body.ast-header-break-point .ast-builder-menu-1 .menu-item,
body.ast-header-break-point .ast-builder-menu-2 .menu-item,
body.ast-header-break-point .ast-builder-menu-1 .menu-item-has-children,
body.ast-header-break-point .ast-builder-menu-2 .menu-item-has-children {
background-color: #0D0D0D !important;
background: #0D0D0D !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* ALL menu links — uniform dark styling */
body.ast-header-break-point .ast-builder-menu-1 .menu-item>.menu-link,
body.ast-header-break-point .ast-builder-menu-2 .menu-item>.menu-link,
body.ast-header-break-point .ast-builder-menu-1 .sub-menu .menu-item>.menu-link,
body.ast-header-break-point .ast-builder-menu-2 .sub-menu .menu-item>.menu-link {
color: #E0E0E0 !important;
background-color: #0D0D0D !important;
background: #0D0D0D !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 15px 20px !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
display: block !important;
}
/* Sub-menu items: indented */
body.ast-header-break-point .ast-builder-menu-1 .sub-menu .menu-item>.menu-link,
body.ast-header-break-point .ast-builder-menu-2 .sub-menu .menu-item>.menu-link {
padding-left: 40px !important;
font-size: 13px !important;
color: #B0B0B0 !important;
}
/* Current/active menu item */
body.ast-header-break-point .ast-builder-menu-1 .menu-item.current-menu-item>.menu-link,
body.ast-header-break-point .ast-builder-menu-2 .menu-item.current-menu-item>.menu-link {
color: var(--veles-accent) !important;
background-color: rgba(252, 160, 4, 0.08) !important;
background: rgba(252, 160, 4, 0.08) !important;
}
/* Hover state — amber tint */
body.ast-header-break-point .ast-builder-menu-1 .menu-item:hover>.menu-link,
body.ast-header-break-point .ast-builder-menu-2 .menu-item:hover>.menu-link,
body.ast-header-break-point .ast-builder-menu-1 .sub-menu .menu-item:hover>.menu-link,
body.ast-header-break-point .ast-builder-menu-2 .sub-menu .menu-item:hover>.menu-link {
color: var(--veles-accent) !important;
background-color: rgba(252, 160, 4, 0.08) !important;
background: rgba(252, 160, 4, 0.08) !important;
}
/* ============================================
DROPDOWN TOGGLE — reset button styling
============================================ */
body.ast-header-break-point .ast-menu-toggle,
body.ast-header-break-point button.ast-menu-toggle,
body.ast-header-break-point .ast-builder-menu-1 .ast-menu-toggle,
body.ast-header-break-point .ast-builder-menu-2 .ast-menu-toggle,
body.ast-header-break-point .main-header-menu .ast-menu-toggle {
background-color: transparent !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
color: #808080 !important;
padding: 0 15px !important;
transform: none !important;
}
body.ast-header-break-point .ast-menu-toggle:hover,
body.ast-header-break-point button.ast-menu-toggle:hover {
background-color: transparent !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
color: var(--veles-accent) !important;
transform: none !important;
}
body.ast-header-break-point .ast-menu-toggle svg,
body.ast-header-break-point button.ast-menu-toggle svg {
fill: #808080 !important;
width: 12px !important;
height: 12px !important;
}
body.ast-header-break-point .ast-menu-toggle:hover svg {
fill: var(--veles-accent) !important;
}
/* ============================================
USER ACCOUNT ICON — center alignment
============================================ */
body.ast-header-break-point .ast-mobile-header-content .ast-header-account-wrap,
body.ast-header-break-point .ast-mobile-header-content [data-section="section-header-account"] {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding: 12px 20px !important;
}
/* ============================================
HERO: Single-column layout on mobile
(Old two-column random product rule removed)
============================================ */
.veles-hero-section .wp-block-columns .wp-block-column {
flex-basis: 100% !important;
text-align: center !important;
}
/* ============================================
ABOVE HEADER BAR — responsive overrides
============================================ */
.ast-above-header-bar .ast-custom-button-link .ast-custom-button,
.ast-above-header-bar a.ast-custom-button-link {
font-size: 10px !important;
padding: 3px 10px !important;
white-space: nowrap !important;
}
.ast-above-header-bar a.ast-custom-button-link div,
.ast-above-header a.ast-custom-button-link div {
font-size: 10px !important;
}
.ast-above-header-bar h4,
.ast-above-header-bar .wp-block-heading {
font-size: 11px !important;
}
}
/* ============================================
GLOBAL: ALL Mobile Menu Dark Mode
Ultra-broad selectors — no dependency on
.ast-builder-menu-2 class existing
============================================ */
/* All wrappers, navs and UL containers inside mobile header */
.ast-mobile-header-content,
.ast-mobile-header-content nav,
.ast-mobile-header-content .main-navigation,
.ast-mobile-header-content .main-header-menu,
.ast-mobile-header-content .ast-nav-menu,
.ast-mobile-header-content .sub-menu,
.ast-mobile-header-content div[class*="menu"],
.ast-builder-menu-2,
.ast-builder-menu-2 .main-header-menu,
.ast-builder-menu-mobile,
.ast-builder-menu-mobile .main-header-menu {
background-color: #0D0D0D !important;
background: #0D0D0D !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* All menu list items inside mobile header */
.ast-mobile-header-content .menu-item,
.ast-mobile-header-content .menu-item-has-children,
.ast-mobile-header-content .sub-menu .menu-item,
.ast-builder-menu-2 .menu-item,
.ast-builder-menu-mobile .menu-item,
#menu-item-3832,
#menu-item-3833 {
background-color: #0D0D0D !important;
background: #0D0D0D !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* All menu links inside mobile header */
.ast-mobile-header-content .menu-item>.menu-link,
.ast-mobile-header-content .sub-menu .menu-item>.menu-link,
.ast-builder-menu-2 .menu-item>.menu-link,
.ast-builder-menu-mobile .menu-item>.menu-link,
#menu-item-3832>.menu-link,
#menu-item-3833>.menu-link,
#menu-item-3832 .sub-menu .menu-link,
#menu-item-3833 .sub-menu .menu-link {
color: #E0E0E0 !important;
background-color: #0D0D0D !important;
background: #0D0D0D !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 15px 20px !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* Sub-menu links — indented */
.ast-mobile-header-content .sub-menu .menu-item>.menu-link {
padding-left: 40px !important;
font-size: 13px !important;
color: #B0B0B0 !important;
}
/* Hover — amber tint */
.ast-mobile-header-content .menu-item:hover>.menu-link,
.ast-mobile-header-content .sub-menu .menu-item:hover>.menu-link {
color: var(--veles-accent) !important;
background-color: rgba(252, 160, 4, 0.08) !important;
background: rgba(252, 160, 4, 0.08) !important;
}
/* Active/current — amber tint */
.ast-mobile-header-content .menu-item.current-menu-item>.menu-link {
color: var(--veles-accent) !important;
background-color: rgba(252, 160, 4, 0.08) !important;
background: rgba(252, 160, 4, 0.08) !important;
}
/* Toggle buttons — transparent, no borders */
.ast-menu-toggle,
button.ast-menu-toggle,
.main-header-menu .ast-menu-toggle,
.ast-mobile-header-content .ast-menu-toggle {
background-color: transparent !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
color: #808080 !important;
transform: none !important;
}
.ast-menu-toggle:hover,
button.ast-menu-toggle:hover {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--veles-accent) !important;
transform: none !important;
}
.ast-menu-toggle svg,
button.ast-menu-toggle svg {
fill: #808080 !important;
}
.ast-menu-toggle:hover svg {
fill: var(--veles-accent) !important;
}
/* User account icon — center */
.ast-mobile-header-content .ast-header-account-wrap {
display: flex !important;
justify-content: center !important;
width: 100% !important;
padding: 12px 20px !important;
}
/* Depicter Slider */
.depicter,
.depicter-document,
#depicter-18 {
background-color: #0D0D0D !important;
}
.wp-block-uagb-container.uagb-block-ada6f505 {
background-color: #0D0D0D !important;
}
/* Spectra Containers */
.wp-block-uagb-container {
background-color: transparent !important;
}
.wp-block-uagb-container.uagb-block-9eb70316 {
background-color: var(--veles-bg-primary) !important;
}
.uagb-ifb-title {
color: var(--veles-text-primary) !important;
}
.uagb-ifb-title a {
color: var(--veles-text-primary) !important;
}
.uagb-ifb-title a:hover {
color: var(--veles-accent) !important;
}
.uagb-ifb-separator {
border-top-color: var(--veles-accent) !important;
opacity: 0.5;
}
/* WooCommerce Product Grid */
ul.products {
background-color: transparent !important;
}
ul.products li.product {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 12px !important;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
ul.products li.product:hover {
border-color: var(--veles-border-hover) !important;
box-shadow: 0 12px 40px rgba(252, 160, 4, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
transform: translateY(-4px);
}
.astra-shop-thumbnail-wrap {
background-color: #111 !important;
overflow: hidden;
border-radius: 12px 12px 0 0 !important;
}
.astra-shop-thumbnail-wrap img {
transition: transform 0.5s ease !important;
}
ul.products li.product:hover .astra-shop-thumbnail-wrap img {
transform: scale(1.05);
}
.astra-shop-summary-wrap {
padding: 16px !important;
background-color: var(--veles-bg-card) !important;
}
.woocommerce-loop-product__title {
color: var(--veles-text-primary) !important;
font-size: 0.9em !important;
line-height: 1.4 !important;
}
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount {
color: var(--veles-accent) !important;
font-weight: 700 !important;
}
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.ast-loop-product__link {
color: inherit !important;
}
/* Essential Blocks Product Grid */
.eb-woo-products-wrapper {
background-color: transparent !important;
}
.eb-woo-product {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 12px !important;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.eb-woo-product:hover {
border-color: var(--veles-border-hover) !important;
box-shadow: 0 12px 40px rgba(252, 160, 4, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
transform: translateY(-4px);
}
.eb-woo-product-image {
background-color: #111 !important;
overflow: hidden;
}
.eb-woo-product-image img {
transition: transform 0.5s ease !important;
}
.eb-woo-product:hover .eb-woo-product-image img {
transform: scale(1.05);
}
.eb-woo-product-overlay {
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%) !important;
}
.eb-woo-product:hover .eb-woo-product-overlay {
opacity: 1 !important;
visibility: visible !important;
}
.eb-woo-product-overlay .button,
.eb-woo-product-overlay a.button,
.eb-woo-product-button-list a {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border: none !important;
border-radius: 6px !important;
padding: 8px 16px !important;
font-weight: 700 !important;
font-size: 0.8em !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all 0.3s ease !important;
margin: 4px !important;
}
.eb-woo-product-overlay .button:hover,
.eb-woo-product-button-list a:hover {
background-color: var(--veles-accent-hover) !important;
transform: scale(1.05);
}
.eb-woo-product-detail.button {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.eb-woo-product-detail.button:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
}
.eb-woo-product-content-wrapper,
.eb-woo-product-content {
background-color: var(--veles-bg-card) !important;
padding: 12px 16px !important;
}
.eb-woo-product-title,
.eb-woo-product-title a {
color: var(--veles-text-primary) !important;
font-size: 0.9em !important;
line-height: 1.4 !important;
}
.eb-woo-product-title a:hover {
color: var(--veles-accent) !important;
}
.eb-woo-product-price,
.eb-woo-product-price .woocommerce-Price-amount {
color: var(--veles-accent) !important;
font-weight: 700 !important;
}
.eb-button-anchor,
.eb-button .eb-button-anchor {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border: none !important;
border-radius: 6px !important;
padding: 12px 32px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
transition: all 0.3s ease !important;
}
.eb-button-anchor:hover {
background-color: var(--veles-accent-hover) !important;
box-shadow: 0 4px 20px rgba(252, 160, 4, 0.3) !important;
transform: translateY(-2px);
}
/* InfoBox Sections */
.uagb-ifb-content {
color: var(--veles-text-secondary) !important;
}
.uagb-infobox__content-wrap {
background-color: transparent !important;
}
/* MailPoet Newsletter */
#mailpoet_form_3,
.mailpoet_form,
[class*="mailpoet"] {
background-color: var(--veles-bg-card) !important;
}
#mailpoet_form_3 input[type="email"],
.mailpoet_text_label+input {
background-color: #111 !important;
border: 1px solid var(--veles-border) !important;
color: #E0E0E0 !important;
border-radius: 6px !important;
padding: 12px 16px !important;
}
#mailpoet_form_3 input[type="email"]:focus {
border-color: var(--veles-accent) !important;
box-shadow: 0 0 0 2px rgba(252, 160, 4, 0.2) !important;
outline: none !important;
}
#mailpoet_form_3 input[type="submit"],
.mailpoet_submit button,
.mailpoet_submit input[type="submit"] {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border: none !important;
border-radius: 6px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
#mailpoet_form_3 input[type="submit"]:hover {
background-color: var(--veles-accent-hover) !important;
box-shadow: 0 4px 15px rgba(252, 160, 4, 0.3) !important;
}
.mailpoet_form h1,
.mailpoet_form h2,
.mailpoet_form h3 {
color: var(--veles-text-primary) !important;
}
.mailpoet_form p {
color: var(--veles-text-secondary) !important;
}
/* Spectra FAQ */
.wp-block-uagb-faq,
.uagb-faq__outer-wrap {
background-color: transparent !important;
}
.uagb-faq-child__outer-wrap,
.wp-block-uagb-faq-child {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
margin-bottom: 8px !important;
overflow: hidden;
transition: border-color 0.3s ease !important;
}
.uagb-faq-child__outer-wrap:hover {
border-color: var(--veles-border-hover) !important;
}
.uagb-faq-questions-button,
.uagb-question,
.uagb-faq-item .uagb-question {
color: var(--veles-text-primary) !important;
background-color: var(--veles-bg-card) !important;
}
.uagb-faq-content,
.uagb-faq-item .uagb-faq-content {
color: var(--veles-text-secondary) !important;
background-color: var(--veles-bg-card) !important;
}
.uagb-faq-icon-row svg,
.uagb-icon svg {
fill: var(--veles-accent) !important;
}
/* Buttons */
button:not(.ast-menu-toggle),
.button,
input[type="submit"],
.wp-block-button__link,
.ast-custom-button,
/* WooCommerce Block Components */
.wc-block-components-button,
.woocommerce .button {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border: none !important;
border-radius: 6px !important;
font-weight: 700 !important;
transition: all 0.3s ease !important;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce .button:hover {
background-color: #e69200 !important;
color: #0D0D0D !important;
box-shadow: 0 4px 15px rgba(252, 160, 4, 0.3) !important;
transform: translateY(-1px);
}
.woocommerce a.button.alt,
.checkout-button,
.single_add_to_cart_button {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
}
.ast-menu-toggle,
button.ast-menu-toggle {
background-color: transparent !important;
border: none !important;
color: #C0C0C0 !important;
}
.search-submit.ast-search-submit {
background-color: transparent !important;
box-shadow: none !important;
}
/* Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
background-color: #111 !important;
border: 1px solid var(--veles-border) !important;
color: #E0E0E0 !important;
border-radius: 6px !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--veles-accent) !important;
box-shadow: 0 0 0 2px rgba(252, 160, 4, 0.2) !important;
outline: none !important;
}
::placeholder {
color: #8C8C8C !important;
}
/* WooCommerce Single Product */
.woocommerce div.product,
.single-product .entry-content {
color: var(--veles-text-secondary) !important;
}
.woocommerce div.product .product_title {
color: var(--veles-text-primary) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--veles-accent) !important;
font-weight: 700 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--veles-text-secondary) !important;
}
.woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
background-color: var(--veles-bg-card) !important;
border-color: var(--veles-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background-color: var(--veles-bg-card) !important;
border-color: var(--veles-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background-color: var(--veles-bg-primary) !important;
border-bottom-color: var(--veles-bg-primary) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: var(--veles-text-secondary) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--veles-accent) !important;
}
.related.products h2,
.upsells.products h2 {
color: var(--veles-text-primary) !important;
}
/* Astra Sticky Add-to-Cart Bar */
.ast-sticky-add-to-cart {
background-color: #0D0D0D !important;
border-bottom: 1px solid rgba(252, 160, 4, 0.2) !important;
}
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-title,
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-title-wrap,
.ast-sticky-add-to-cart span:not(.amount) {
color: #E0E0E0 !important;
}
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-price,
.ast-sticky-add-to-cart .price,
.ast-sticky-add-to-cart .amount,
.ast-sticky-add-to-cart .woocommerce-Price-amount {
color: var(--veles-accent, #FCA004) !important;
}
.ast-sticky-add-to-cart .wc-price-history {
display: none !important;
}
/* WooCommerce Cart */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
color: var(--veles-text-secondary) !important;
}
.woocommerce table.shop_table {
background-color: var(--veles-bg-card) !important;
border-color: var(--veles-border) !important;
}
.woocommerce table.shop_table th {
color: var(--veles-text-primary) !important;
background-color: rgba(255, 255, 255, 0.03) !important;
border-color: var(--veles-border) !important;
}
.woocommerce table.shop_table td {
color: var(--veles-text-secondary) !important;
border-color: var(--veles-border) !important;
}
.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
padding: 20px !important;
}
.woocommerce .quantity .qty {
background-color: #111 !important;
color: #E0E0E0 !important;
border-color: var(--veles-border) !important;
}
.woocommerce-cart .coupon input {
background-color: #111 !important;
border-color: var(--veles-border) !important;
color: #E0E0E0 !important;
}
.woocommerce-MyAccount-navigation {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
}
.woocommerce-MyAccount-navigation ul li a {
color: var(--veles-text-secondary) !important;
border-bottom-color: var(--veles-border) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
color: var(--veles-accent) !important;
}
.woocommerce-MyAccount-content {
color: var(--veles-text-secondary) !important;
}
.woocommerce-result-count,
.woocommerce-ordering select {
color: var(--veles-text-secondary) !important;
background-color: #111 !important;
border-color: var(--veles-border) !important;
}
.woocommerce .woocommerce-breadcrumb,
.ast-breadcrumbs .trail-items,
nav.woocommerce-breadcrumb {
color: var(--veles-text-muted) !important;
}
.woocommerce .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a {
color: var(--veles-text-secondary) !important;
}
.woocommerce span.onsale {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border-radius: 4px !important;
}
.woocommerce .star-rating span::before,
.star-rating::before {
color: var(--veles-accent) !important;
}
.ast-article-single,
article.post,
article.page {
background-color: transparent !important;
}
.entry-title,
.entry-title a {
color: var(--veles-text-primary) !important;
}
.entry-meta,
.entry-meta a {
color: var(--veles-text-muted) !important;
}
.ast-separate-container .ast-article-post {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
}
.veles-product-description-wrapper,
.product-description-wrapper {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
padding: 24px !important;
color: var(--veles-text-secondary) !important;
}
details.faq-item,
.faq-item {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
margin-bottom: 8px !important;
transition: border-color 0.3s ease !important;
}
details.faq-item:hover {
border-color: var(--veles-border-hover) !important;
}
details.faq-item summary,
.faq-item summary {
color: var(--veles-text-primary) !important;
padding: 16px 20px !important;
cursor: pointer;
font-weight: 600;
}
details.faq-item summary::marker {
color: var(--veles-accent) !important;
}
details.faq-item[open] summary {
border-bottom: 1px solid var(--veles-border) !important;
}
details.faq-item .faq-answer,
.faq-item .faq-answer {
color: var(--veles-text-secondary) !important;
padding: 16px 20px !important;
}
.pro-tip,
.pro-tip-alert {
background-color: rgba(252, 160, 4, 0.08) !important;
border-left: 4px solid var(--veles-accent) !important;
border-radius: 0 8px 8px 0 !important;
padding: 16px 20px !important;
color: var(--veles-text-secondary) !important;
}
.pro-tip strong,
.pro-tip-alert strong {
color: var(--veles-accent) !important;
}
.veles-button,
a.veles-button {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border-radius: 6px !important;
padding: 12px 24px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: inline-block !important;
transition: all 0.3s ease !important;
}
.veles-button:hover {
background-color: var(--veles-accent-hover) !important;
box-shadow: 0 4px 20px rgba(252, 160, 4, 0.3) !important;
}
.veles-tutorial,
.tutorial-content {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
padding: 24px !important;
color: var(--veles-text-secondary) !important;
}
pre,
code {
background-color: #111 !important;
color: #E0E0E0 !important;
border: 1px solid var(--veles-border) !important;
border-radius: 4px !important;
}
.site-footer,
footer,
/* Footer */
.ast-footer-overlay,
.ast-small-footer {
background-color: #000000 !important;
border-top: 1px solid rgba(252, 160, 4, 0.1) !important;
}
.site-footer h4,
.site-footer h6,
footer h4,
footer h6 {
color: var(--veles-text-primary) !important;
}
.site-footer p,
.site-footer li,
.site-footer a,
footer p,
footer a {
color: var(--veles-text-muted) !important;
}
.site-footer a:hover,
footer a:hover {
color: var(--veles-accent) !important;
}
.ast-builder-social-element svg {
fill: var(--veles-text-muted) !important;
transition: fill 0.3s ease !important;
}
.ast-builder-social-element:hover svg {
fill: var(--veles-accent) !important;
}
#ast-scroll-top {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border-radius: 50% !important;
box-shadow: 0 4px 15px rgba(252, 160, 4, 0.3) !important;
}
#ast-scroll-top:hover {
background-color: var(--veles-accent-hover) !important;
}
#ast-scroll-top .ast-icon.icon-arrow svg {
fill: #0D0D0D !important;
}
.woocommerce-message,
.woocommerce-info {
background-color: var(--veles-bg-card) !important;
border-top-color: var(--veles-accent) !important;
color: var(--veles-text-secondary) !important;
}
.woocommerce-error {
background-color: var(--veles-bg-card) !important;
border-top-color: #e74c3c !important;
color: var(--veles-text-secondary) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
color: var(--veles-accent) !important;
}
.widget {
background-color: transparent !important;
color: var(--veles-text-secondary) !important;
}
.widget-title,
.widget .widget-title {
color: var(--veles-text-primary) !important;
}
.widget a {
color: var(--veles-text-secondary) !important;
}
.widget a:hover {
color: var(--veles-accent) !important;
}
.ast-pagination a,
.woocommerce nav.woocommerce-pagination ul li a {
background-color: var(--veles-bg-card) !important;
color: var(--veles-text-secondary) !important;
border-color: var(--veles-border) !important;
}
.ast-pagination .current,
.woocommerce nav.woocommerce-pagination ul li span.current {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border-color: var(--veles-accent) !important;
}
.cky-consent-container,
.cky-consent-bar {
background-color: #1A1A1A !important;
border: 1px solid var(--veles-border) !important;
}
.cky-consent-bar .cky-title {
color: var(--veles-text-primary) !important;
}
.cky-consent-bar .cky-notice-des {
color: var(--veles-text-secondary) !important;
}
.cky-btn-accept {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
}
img {
border-radius: 4px;
}
img[src*="data:image/svg+xml"] {
background-color: #1A1A1A !important;
}
.ast-above-header-bar .site-above-header-wrap {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Print Styles */
@media print {
body {
background-color: #fff !important;
color: #000 !important;
}
}
/* Platform Logos */
.wp-block-image.size-thumbnail img[alt="Twitch"],
.wp-block-image.size-thumbnail img[alt="OBS Studio"],
.wp-block-image.size-thumbnail img[alt="Streamlabs"],
.wp-block-image.size-thumbnail img[alt="StreamElements"] {
filter: brightness(1.8) contrast(1.1) !important;
opacity: 0.85 !important;
transition: all 0.3s ease !important;
}
.wp-block-image.size-thumbnail img[alt="Twitch"]:hover,
.wp-block-image.size-thumbnail img[alt="OBS Studio"]:hover,
.wp-block-image.size-thumbnail img[alt="Streamlabs"]:hover,
.wp-block-image.size-thumbnail img[alt="StreamElements"]:hover {
filter: brightness(2.2) contrast(1.2) !important;
opacity: 1 !important;
}
/* FAQ Details Blocks */
.wp-block-details {
background-color: var(--veles-bg-card) !important;
border: 1px solid var(--veles-border) !important;
border-radius: 8px !important;
margin-bottom: 6px !important;
transition: border-color 0.3s ease !important;
}
.wp-block-details:hover {
border-color: var(--veles-border-hover) !important;
}
.wp-block-details summary {
color: var(--veles-text-primary) !important;
font-weight: 600 !important;
padding: 14px 18px !important;
cursor: pointer !important;
font-size: 15px !important;
list-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.wp-block-details summary::-webkit-details-marker {
display: none !important;
}
.wp-block-details summary::after {
content: url("data:image/svg+xml;utf8,") !important;
display: inline-block !important;
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
margin-left: 12px !important;
transition: transform 0.3s ease !important;
}
.wp-block-details[open] summary::after {
transform: rotate(45deg) !important;
/* The SVG is a +, so rotating it 45deg makes it an x (close icon). */
}
.wp-block-details p {
padding: 0 18px 14px !important;
margin: 0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--veles-text-secondary) !important;
}
/* FAQ Master Accordion */
.veles-faq-accordion>summary {
text-align: center !important;
justify-content: center !important;
font-size: clamp(24px, 3.5vw, 36px) !important;
font-weight: 700 !important;
padding: 24px 32px !important;
color: #FFFFFF !important;
gap: 16px !important;
}
.veles-faq-accordion>summary::after {
/* Hidden to prevent encoding mojibake such as →' */
display: none !important;
content: none !important;
}
/* WooCommerce Archive & Category Pages */
body.tax-product_cat,
body.post-type-archive-product,
body.woocommerce-page.archive,
body.woocommerce-page .site-content,
body.tax-product_cat .site-content,
body.post-type-archive-product .site-content,
body.tax-product_cat .content-area,
body.post-type-archive-product .content-area {
background-color: var(--veles-bg-primary) !important;
color: var(--veles-text-secondary) !important;
}
body.tax-product_cat .ast-container,
body.post-type-archive-product .ast-container {
background-color: transparent !important;
}
body.tax-product_cat .woocommerce-products-header .woocommerce-products-header__title,
body.post-type-archive-product .woocommerce-products-header .woocommerce-products-header__title {
color: var(--veles-text-primary) !important;
}
body.tax-product_cat .woocommerce-result-count,
body.post-type-archive-product .woocommerce-result-count,
body.tax-product_cat .woocommerce-ordering select,
body.post-type-archive-product .woocommerce-ordering select {
color: var(--veles-text-secondary) !important;
}
body.tax-product_cat .woocommerce-ordering select,
body.post-type-archive-product .woocommerce-ordering select {
background-color: #1A1A1A !important;
border-color: var(--veles-border) !important;
}
body.tax-product_cat .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb {
color: var(--veles-text-muted) !important;
}
body.tax-product_cat .woocommerce-breadcrumb a,
body.post-type-archive-product .woocommerce-breadcrumb a {
color: var(--veles-accent) !important;
}
body.tax-product_cat .woocommerce-pagination a,
body.post-type-archive-product .woocommerce-pagination a {
color: var(--veles-text-secondary) !important;
background-color: #1A1A1A !important;
border-color: var(--veles-border) !important;
}
body.tax-product_cat .woocommerce-pagination .current,
body.post-type-archive-product .woocommerce-pagination .current {
background-color: var(--veles-accent) !important;
color: #0D0D0D !important;
border-color: var(--veles-accent) !important;
}
/* Hero Random Product Showcase */
.veles-hero-section ul.products {
margin: 0 !important;
padding: 0 !important;
}
.veles-hero-section ul.products li.product {
border: none !important;
background: transparent !important;
box-shadow: none !important;
width: 100% !important;
margin: 0 !important;
float: none !important;
padding: 0 !important;
}
.veles-hero-section ul.products li.product:hover {
transform: none !important;
box-shadow: none !important;
}
.veles-hero-section ul.products li.product .astra-shop-thumbnail-wrap {
border-radius: 12px !important;
overflow: hidden !important;
border: 1px solid rgba(252, 160, 4, 0.2) !important;
box-shadow: 0 0 30px rgba(252, 160, 4, 0.08) !important;
}
.veles-hero-section ul.products li.product .astra-shop-summary-wrap,
.veles-hero-section ul.products li.product .woocommerce-loop-product__title,
.veles-hero-section ul.products li.product .price,
.veles-hero-section ul.products li.product .star-rating,
.veles-hero-section ul.products li.product .button,
.veles-hero-section ul.products li.product .add_to_cart_button,
.veles-hero-section ul.products li.product .ast-on-card-button,
.veles-hero-section ul.products li.product .woocommerce-loop-category__title,
.veles-hero-section ul.products li.product .count {
display: none !important;
}
/* ============================================
OVERRIDES: Remove cyan/blue glow from page
(legacy from old dark-mode CSS)
============================================ */
body,
#page,
.hfeed.site,
.site {
box-shadow: none !important;
}
/* ============================================
ASTRA CONTAINER OVERRIDES
============================================ */
.ast-container {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.site::before,
.site::after,
body::before,
body::after,
#page::before,
#page::after {
box-shadow: none !important;
background-image: none !important;
}
/* ============================================
MAILPOET — Footer Newsletter Widget
Compact vertical layout for narrow widget
============================================ */
/* Form wrapper — remove all default spacing */
.site-footer .mailpoet_form,
.site-footer .widget_block .mailpoet_form {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
overflow: hidden !important;
}
/* MailPoet heading — force transparent bg on ALL wrappers */
.site-footer .mailpoet_form *,
.site-footer .mailpoet_form div,
.site-footer .mailpoet_form span {
background-color: transparent !important;
background: transparent !important;
}
/* MailPoet heading */
.site-footer .mailpoet_form .mailpoet-heading,
.site-footer .mailpoet_form h1,
.site-footer .mailpoet_form h2,
.site-footer .mailpoet_form h3 {
color: #E0E0E0 !important;
background-color: transparent !important;
background: transparent !important;
font-size: 15px !important;
font-weight: 700 !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.3 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Description text */
.site-footer .mailpoet_form p,
.site-footer .mailpoet_form .mailpoet_paragraph {
color: #A0A0A0 !important;
font-size: 12px !important;
line-height: 1.4 !important;
margin-bottom: 8px !important;
}
/* Force single column layout */
.site-footer .mailpoet_form .mailpoet_form_columns,
.site-footer .mailpoet_form .mailpoet-form-columns {
display: block !important;
flex-direction: column !important;
}
.site-footer .mailpoet_form .mailpoet_column_with_background,
.site-footer .mailpoet_form .mailpoet_form_column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
margin-left: 0 !important;
padding: 0 !important;
}
/* Labels */
.site-footer .mailpoet_form .mailpoet_text_label,
.site-footer .mailpoet_form .mailpoet_segment_label,
.site-footer .mailpoet_form label {
color: #B0B0B0 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
margin-bottom: 4px !important;
display: block !important;
}
/* Input fields — full width, dark style */
.site-footer .mailpoet_form .mailpoet_text,
.site-footer .mailpoet_form input[type="text"],
.site-footer .mailpoet_form input[type="email"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background-color: #1A1A1A !important;
color: #E0E0E0 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 4px !important;
padding: 8px 10px !important;
font-size: 13px !important;
margin-bottom: 8px !important;
outline: none !important;
}
.site-footer .mailpoet_form input:focus {
border-color: var(--veles-accent, #FCA004) !important;
box-shadow: 0 0 0 1px var(--veles-accent, #FCA004) !important;
}
.site-footer .mailpoet_form input::placeholder {
color: #8C8C8C !important;
}
/* Subscribe button — amber */
.site-footer .mailpoet_form .mailpoet_submit,
.site-footer .mailpoet_form input[type="submit"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background-color: var(--veles-accent, #FCA004) !important;
color: #0D0D0D !important;
border: none !important;
border-radius: 4px !important;
padding: 10px 15px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-top: 4px !important;
}
.site-footer .mailpoet_form .mailpoet_submit:hover,
.site-footer .mailpoet_form input[type="submit"]:hover {
background-color: #e69200 !important;
transform: translateY(-1px) !important;
}
/* Success/error messages */
.site-footer .mailpoet_form .mailpoet_message {
font-size: 12px !important;
margin-top: 8px !important;
}
.site-footer .mailpoet_form .mailpoet_validate_success {
color: #4CAF50 !important;
}
.site-footer .mailpoet_form .mailpoet_validate_error {
color: #ff5252 !important;
}
/* Hide images and unnecessary elements in footer form */
.site-footer .mailpoet_form img,
.site-footer .mailpoet_form .mailpoet_divider {
display: none !important;
}
/* Loading spinner */
.site-footer .mailpoet_form .mailpoet_form_loading>span {
background-color: var(--veles-accent, #FCA004) !important;
}
/* ============================================
WOOCOMMERCE CART & CHECKOUT DARK MODE FIXES
============================================ */
/* 1. Cart Table Headers */
.woocommerce table.shop_table th {
background-color: #1A1A1A !important;
color: #FCA004 !important;
border-bottom: 2px solid #333 !important;
}
/* 2. Cart Totals & Cross-Sells Backgrounds */
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce .cross-sells h2 {
background-color: transparent !important;
color: #FCA004 !important;
border-bottom: 1px solid #333 !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .cross-sells {
background-color: transparent !important;
}
/* 3. Checkout - Select2 Dropdown Country/Region */
.select2-container--default .select2-selection--single {
background-color: #1A1A1A !important;
border: 1px solid #333 !important;
color: #E0E0E0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #E0E0E0 !important;
}
.select2-dropdown {
background-color: #1A1A1A !important;
border: 1px solid #333 !important;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #333 !important;
color: #FCA004 !important;
}
/* 4. Checkout - PayPal Express & Payment Boxes */
.woocommerce-checkout #payment {
background: #1A1A1A !important;
}
.woocommerce-checkout #payment div.payment_box {
color: #E0E0E0 !important;
}
/* Hide Astra payment method pseudo-element artifacts */
.woocommerce-checkout #payment ul.payment_methods li::before,
.woocommerce-checkout #payment ul.payment_methods li::after,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* 5. Product Page Tabs (Description, Additional Info, Reviews) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
background-color: transparent !important;
border-bottom: 1px solid #333 !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background-color: #1A1A1A !important;
border: 1px solid #333 !important;
border-bottom: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background-color: #0D0D0D !important;
border-top: 2px solid #FCA004 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: #E0E0E0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #FCA004 !important;
}
/* ============================================
WooCommerce & Astra Dark Mode Overrides
============================================ */
/* Payment methods — hide Astra pseudo-element artifacts */
#add_payment_method #payment ul.payment_methods li,
.woocommerce-cart #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li {
background-color: transparent !important;
}
#add_payment_method #payment ul.payment_methods li::before,
#add_payment_method #payment ul.payment_methods li::after,
.woocommerce-cart #payment ul.payment_methods li::before,
.woocommerce-cart #payment ul.payment_methods li::after,
.woocommerce-checkout #payment ul.payment_methods li::before,
.woocommerce-checkout #payment ul.payment_methods li::after {
display: none !important;
content: none !important;
background: transparent !important;
background-color: transparent !important;
}
/* Checkout Select2 dropdowns — dark mode */
.select2-container--default .select2-search--dropdown .select2-search__field {
background-color: #0D0D0D !important;
color: #E0E0E0 !important;
border: 1px solid #333 !important;
}
.select2-container--default .select2-results__option {
color: #E0E0E0 !important;
background-color: #1A1A1A !important;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
background-color: #333 !important;
color: #FCA004 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
background-color: #2a2a2a !important;
color: #FCA004 !important;
}
/* Stripe & PayPal form fields — dark background */
.wc-stripe-elements-field,
.wc-stripe-iban-element-field {
background-color: #1A1A1A !important;
border: 1px solid #333 !important;
color: #E0E0E0 !important;
}
/* PayPal payment box text color */
.woocommerce-checkout #payment div.payment_box.payment_method_ppcp-gateway {
color: #E0E0E0 !important;
}
.woocommerce-checkout #payment div.payment_box.payment_method_ppcp-gateway p {
color: #E0E0E0 !important;
}
/* Stripe payment box text color */
.payment_box.payment_method_stripe {
color: #E0E0E0 !important;
}
/* Additional Information table — dark mode */
.woocommerce table.shop_attributes {
border: none !important;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
background-color: transparent !important;
border-bottom: 1px solid #333 !important;
color: #E0E0E0 !important;
}
.woocommerce table.shop_attributes th {
color: #FCA004 !important;
}
/* ============================================
Checkout & Product Tabs — Final Overrides
============================================ */
/* Product tab panels — transparent background with padding */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel h2,
#tab-description,
#tab-additional_information {
background-color: transparent !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 20px 15px !important;
color: #E0E0E0 !important;
}
/* Checkout form fields — dark background */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
background-color: #0D0D0D !important;
border: 1px solid #333 !important;
color: #E0E0E0 !important;
}
/* Payment method labels — hide pseudo-element artifacts */
/* Payment plugins attach pseudo-elements to labels instead of list items */
#payment ul.payment_methods li label::before,
#payment ul.payment_methods li label::after,
.woocommerce-checkout #payment ul.payment_methods li label::before,
.woocommerce-checkout #payment ul.payment_methods li label::after,
.payment_methods .wc_payment_method label::before,
.payment_methods .wc_payment_method label::after {
display: none !important;
content: none !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.payment_method_stripe,
.payment_method_ppcp-gateway {
background-color: transparent !important;
}
/* ============================================
CHECKOUT AND PRODUCT TAB CONSISTENCY
============================================ */
/* Product tab wrapper cleanup */
.veles-product-description-wrapper,
.product-description-wrapper,
.woocommerce-Tabs-panel {
background-color: transparent !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Payment labels (PayPal / Credit Cards) — amber bold styling */
#payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>label,
#payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
background-color: transparent !important;
background: transparent !important;
color: #FCA004 !important;
font-weight: 700 !important;
}
/* Payment box panels — transparent background */
.woocommerce-checkout #payment div.payment_box.payment_method_ppcp-gateway,
.woocommerce-checkout #payment div.payment_box.payment_method_stripe,
.woocommerce-checkout #payment div.payment_box {
background-color: transparent !important;
background: transparent !important;
}
/* ============================================
PRODUCT PAGE FAQ — Master Accordion
Uses custom HTML details/summary pattern
from faq-templates.txt
============================================ */
/* FAQ Section Wrapper */
.faq-section-wrapper {
margin-top: 2rem !important;
}
/* Master container — the outer collapsible wrapper */
.faq-master-container {
background-color: var(--veles-bg-card, #1A1A1A) !important;
border: 1px solid var(--veles-border, rgba(255, 255, 255, 0.08)) !important;
border-radius: 10px !important;
overflow: hidden !important;
margin-bottom: 1.5rem !important;
}
/* Master summary — "FREQUENTLY ASKED QUESTIONS (CLICK TO EXPAND)" */
.faq-master-summary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px 24px !important;
font-size: clamp(14px, 2vw, 18px) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #FFFFFF !important;
background-color: rgba(255, 255, 255, 0.04) !important;
cursor: pointer !important;
list-style: none !important;
transition: background-color 0.3s ease !important;
text-align: center !important;
}
.faq-master-summary:hover {
background-color: rgba(252, 160, 4, 0.08) !important;
}
.faq-master-summary::-webkit-details-marker,
.faq-master-summary::marker {
display: none !important;
content: "" !important;
}
/* Master content wrapper */
.faq-master-content {
padding: 8px !important;
}
/* FAQ container — holds all individual FAQ items */
.faq-container {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
/* Individual FAQ item */
.faq-item {
background-color: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: border-color 0.3s ease, background-color 0.3s ease !important;
}
.faq-item:hover {
border-color: var(--veles-border-hover, rgba(252, 160, 4, 0.3)) !important;
}
/* FAQ question (summary) — flexbox with icon on the right */
.faq-question {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 18px !important;
color: #FFFFFF !important;
font-weight: 600 !important;
font-size: 15px !important;
cursor: pointer !important;
list-style: none !important;
transition: color 0.3s ease, background-color 0.3s ease !important;
gap: 12px !important;
}
.faq-question::-webkit-details-marker,
.faq-question::marker {
display: none !important;
content: "" !important;
}
.faq-question:hover {
color: var(--veles-accent, #FCA004) !important;
}
/* FAQ icon (+/x) — positioned on the right */
.faq-icon {
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--veles-accent, #FCA004) !important;
border: 1px solid rgba(252, 160, 4, 0.3) !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
line-height: 1 !important;
}
/* When FAQ item is open — active state */
.faq-item[open] {
background-color: rgba(252, 160, 4, 0.06) !important;
border-color: rgba(252, 160, 4, 0.2) !important;
}
.faq-item[open] .faq-question {
color: var(--veles-accent, #FCA004) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.faq-item[open] .faq-icon {
background-color: var(--veles-accent, #FCA004) !important;
color: #0D0D0D !important;
border-color: var(--veles-accent, #FCA004) !important;
transform: rotate(45deg) !important;
}
/* FAQ answer */
.faq-answer {
padding: 14px 18px !important;
color: var(--veles-text-secondary, #C0C0C0) !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
.faq-answer p {
margin: 0 0 10px 0 !important;
color: var(--veles-text-secondary, #C0C0C0) !important;
}
.faq-answer p:last-child {
margin-bottom: 0 !important;
}
/* Mobile responsiveness for FAQ */
@media (max-width: 768px) {
.faq-master-summary {
font-size: 13px !important;
padding: 14px 16px !important;
letter-spacing: 0.5px !important;
}
.faq-question {
font-size: 14px !important;
padding: 12px 14px !important;
}
.faq-answer {
padding: 12px 14px !important;
font-size: 13px !important;
}
.faq-icon {
width: 24px !important;
height: 24px !important;
font-size: 16px !important;
}
}
/* ============================================
CLS FIX — Cumulative Layout Shift Prevention
Target: PageSpeed CLS < 0.1
Source: LiteSpeed Cache defers Astra's header CSS,
causing #masthead to collapse and push content down.
============================================ */
/* Force #masthead to reserve the current measured desktop header height */
#masthead {
min-height: 178px !important;
display: block !important;
contain: layout !important;
}
/* Match live desktop header layers measured on 2026-06-11 */
.ast-above-header-wrap,
.ast-above-header-bar,
.site-above-header-wrap {
min-height: 58px !important;
display: block !important;
}
.ast-primary-header-bar {
min-height: 120px !important;
display: block !important;
}
.ast-main-header-wrap,
.site-primary-header-wrap {
min-height: 85px !important;
display: block !important;
}
@media (max-width: 921px) {
#masthead {
min-height: 105px !important;
}
.ast-main-header-wrap,
.ast-primary-header-bar,
.site-primary-header-wrap {
min-height: 65px !important;
}
}
/* Prevent homepage product-card image reflows */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap,
ul.products li.product .astra-shop-thumbnail-wrap {
aspect-ratio: 1 / 1 !important;
display: block !important;
width: 100% !important;
overflow: hidden !important;
position: relative !important;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap > a,
ul.products li.product .astra-shop-thumbnail-wrap > a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce-page ul.products li.product img.attachment-woocommerce_thumbnail,
.astra-shop-thumbnail-wrap img,
ul.products li.product .astra-shop-thumbnail-wrap img {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
}
/* ============================================
PRODUCT PAGE: SETUP & HELP
Reusable support component outside post_content
============================================ */
.woocommerce div.product .velesdc-setup-help {
box-sizing: border-box;
clear: both;
width: 100%;
margin: 48px 0 56px;
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--veles-border, rgba(255, 255, 255, 0.08));
border-left: 3px solid var(--veles-accent, #FCA004);
border-radius: 12px;
background: linear-gradient(135deg, rgba(252, 160, 4, 0.08), rgba(26, 26, 26, 0.96) 42%);
}
.woocommerce div.product .velesdc-setup-help__eyebrow {
margin: 0 0 4px;
color: var(--veles-accent, #FCA004);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.woocommerce div.product .velesdc-setup-help__title {
margin: 0 0 10px;
color: var(--veles-text-primary, #FFFFFF);
font-size: clamp(21px, 2.2vw, 26px);
line-height: 1.25;
}
.woocommerce div.product .velesdc-setup-help__intro,
.woocommerce div.product .velesdc-setup-help__support {
margin: 0;
color: var(--veles-text-secondary, #C0C0C0);
font-size: 14px;
line-height: 1.65;
}
.woocommerce div.product .velesdc-setup-help__guides {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 16px 0 14px;
}
.woocommerce div.product a.velesdc-setup-help__guide {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
min-height: 44px;
padding: 10px 14px;
border: 1px solid rgba(252, 160, 4, 0.45);
border-radius: 8px;
background: rgba(13, 13, 13, 0.72);
color: var(--veles-text-primary, #FFFFFF) !important;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.woocommerce div.product a.velesdc-setup-help__guide::after {
content: "\2192";
flex: 0 0 auto;
margin-left: 12px;
color: var(--veles-accent, #FCA004);
font-size: 18px;
line-height: 1;
}
.woocommerce div.product a.velesdc-setup-help__guide:hover {
border-color: var(--veles-accent, #FCA004);
background: rgba(252, 160, 4, 0.12);
color: #FFFFFF !important;
}
.woocommerce div.product a.velesdc-setup-help__guide:focus-visible,
.woocommerce div.product .velesdc-setup-help__support a:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
}
.woocommerce div.product .velesdc-setup-help__support a {
color: var(--veles-accent, #FCA004) !important;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 544px) {
.woocommerce div.product .velesdc-setup-help {
margin: 32px 0 40px;
padding: 20px;
border-radius: 10px;
}
.woocommerce div.product .velesdc-setup-help__title {
font-size: 22px;
}
.woocommerce div.product .velesdc-setup-help__guides {
grid-template-columns: 1fr;
}
}
/* ============================================
PRODUCT PAGE LAYOUT: GUTENBERG MEDIA & TEXT
Styles the native "Media & Text" WP block
============================================ */
.veles-product-description .wp-block-media-text,
.woocommerce-Tabs-panel--description .wp-block-media-text {
background-color: var(--veles-bg-card, #1A1A1A) !important;
border: 1px solid var(--veles-border, rgba(255, 255, 255, 0.08)) !important;
border-radius: 12px !important;
overflow: hidden !important;
margin: 32px 0 48px 0 !important;
transition: border-color 0.3s ease, transform 0.3s ease !important;
}
.veles-product-description .wp-block-media-text:hover,
.woocommerce-Tabs-panel--description .wp-block-media-text:hover {
border-color: var(--veles-border-hover, rgba(252, 160, 4, 0.3)) !important;
transform: translateY(-2px) !important;
}
.veles-product-description .wp-block-media-text .wp-block-media-text__content,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__content {
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.veles-product-description .wp-block-media-text .wp-block-media-text__content h2,
.veles-product-description .wp-block-media-text .wp-block-media-text__content h3,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__content h2,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__content h3 {
color: #FFFFFF !important;
font-size: clamp(20px, 2vw, 24px) !important;
font-weight: 700 !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
line-height: 1.3 !important;
}
.veles-product-description .wp-block-media-text .wp-block-media-text__content p,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__content p {
color: var(--veles-text-secondary, #C0C0C0) !important;
font-size: 15px !important;
line-height: 1.7 !important;
margin-bottom: 0 !important;
}
.veles-product-description .wp-block-media-text .wp-block-media-text__media,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__media {
margin: 0 !important;
border-radius: 0 !important;
}
.veles-product-description .wp-block-media-text .wp-block-media-text__media img,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__media img,
.veles-product-description .wp-block-media-text .wp-block-media-text__media video,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__media video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.veles-product-description .wp-block-media-text,
.woocommerce-Tabs-panel--description .wp-block-media-text {
margin: 24px 0 32px 0 !important;
grid-template-columns: 1fr !important;
}
.veles-product-description .wp-block-media-text .wp-block-media-text__content,
.woocommerce-Tabs-panel--description .wp-block-media-text .wp-block-media-text__content {
padding: 24px 20px !important;
}
/* Ensure media is always on top for stacked blocks */
.veles-product-description .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
.woocommerce-Tabs-panel--description .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
grid-column: 1 !important;
grid-row: 1 !important;
}
.veles-product-description .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content,
.woocommerce-Tabs-panel--description .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
grid-column: 1 !important;
grid-row: 2 !important;
}
}
/* ============================================
CATEGORY LANDING PAGES — SEO Content Styling
Styles for WooCommerce category archive pages:
header title, description block, breadcrumbs.
============================================ */
/* Category page header title */
body.tax-product_cat .woocommerce-products-header__title.page-title,
body.tax-product_cat .ast-archive-title {
color: var(--veles-accent, #FCA004) !important;
font-size: clamp(28px, 4vw, 42px) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
margin-bottom: 8px !important;
line-height: 1.2 !important;
}
/* Category description wrapper — dark card with subtle border */
body.tax-product_cat .term-description,
body.tax-product_cat .woocommerce-products-header .term-description {
background-color: var(--veles-bg-card, #1A1A1A) !important;
border: 1px solid var(--veles-border, rgba(255, 255, 255, 0.08)) !important;
border-left: 3px solid var(--veles-accent, #FCA004) !important;
border-radius: 10px !important;
padding: 24px 28px !important;
margin-bottom: 32px !important;
margin-top: 12px !important;
max-width: 100% !important;
}
/* Category description text */
body.tax-product_cat .term-description p {
color: var(--veles-text-secondary, #C0C0C0) !important;
font-size: 15px !important;
line-height: 1.75 !important;
margin-bottom: 12px !important;
}
body.tax-product_cat .term-description p:last-child {
margin-bottom: 0 !important;
}
/* Category description headings (h2, h3 inside description) */
body.tax-product_cat .term-description h2,
body.tax-product_cat .term-description h3 {
color: #FFFFFF !important;
font-weight: 700 !important;
margin-top: 16px !important;
margin-bottom: 8px !important;
font-size: 18px !important;
}
body.tax-product_cat .term-description h2:first-child,
body.tax-product_cat .term-description h3:first-child {
margin-top: 0 !important;
}
/* Category description links */
body.tax-product_cat .term-description a {
color: var(--veles-accent, #FCA004) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
transition: color 0.3s ease !important;
}
body.tax-product_cat .term-description a:hover {
color: #e69200 !important;
}
/* Category description lists (for feature bullets) */
body.tax-product_cat .term-description ul,
body.tax-product_cat .term-description ol {
padding-left: 20px !important;
margin-bottom: 12px !important;
}
body.tax-product_cat .term-description li {
color: var(--veles-text-secondary, #C0C0C0) !important;
font-size: 14px !important;
line-height: 1.7 !important;
margin-bottom: 6px !important;
}
/* Category description bold/strong text — amber highlight */
body.tax-product_cat .term-description strong {
color: #FFFFFF !important;
font-weight: 600 !important;
}
/* Category description separator */
body.tax-product_cat .term-description hr {
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
margin: 16px 0 !important;
}
/* Results count and sorting — spacing below description */
body.tax-product_cat .woocommerce-result-count,
body.tax-product_cat .woocommerce-ordering {
margin-top: 8px !important;
}
/* Mobile adjustments for category description */
@media (max-width: 768px) {
body.tax-product_cat .woocommerce-products-header__title.page-title,
body.tax-product_cat .ast-archive-title {
font-size: 24px !important;
letter-spacing: 1px !important;
}
body.tax-product_cat .term-description,
body.tax-product_cat .woocommerce-products-header .term-description {
padding: 18px 20px !important;
margin-bottom: 24px !important;
border-radius: 8px !important;
}
body.tax-product_cat .term-description p {
font-size: 14px !important;
}
}
/* Category SEO Collapsible Details ("READ MORE" pattern) */
body.tax-product_cat .term-description details.veles-category-details {
margin-top: 16px !important;
}
body.tax-product_cat .term-description details.veles-category-details summary {
display: inline-flex !important;
align-items: center !important;
color: var(--veles-accent, #FCA004) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
list-style: none !important;
padding: 8px 0 !important;
transition: color 0.3s ease, opacity 0.3s ease !important;
}
body.tax-product_cat .term-description details.veles-category-details summary:hover {
color: #e69200 !important;
opacity: 0.9 !important;
}
body.tax-product_cat .term-description details.veles-category-details summary::-webkit-details-marker {
display: none !important;
}
body.tax-product_cat .term-description details.veles-category-details summary::after {
/* Downward arrow unicode */
content: "\25BC" !important;
font-size: 10px !important;
margin-left: 8px !important;
transition: transform 0.3s ease !important;
}
body.tax-product_cat .term-description details.veles-category-details[open] summary::after {
transform: rotate(180deg) !important;
}
body.tax-product_cat .term-description details.veles-category-details .veles-category-details-content {
margin-top: 16px !important;
padding-top: 16px !important;
border-top: 1px dashed var(--veles-border, rgba(255, 255, 255, 0.08)) !important;
animation: fadeInCategoryContent 0.4s ease forwards !important;
}
@keyframes fadeInCategoryContent {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Product description: Media & Text blocks — no background, border only */
.woocommerce-Tabs-panel .wp-block-media-text.has-background,
.veles-product-description .wp-block-media-text.has-background,
.wp-block-media-text.has-background {
background-color: transparent !important;
}
/* Force orange color on Zig-Zag template headings (overriding Astra) */
.veles-product-description h3.wp-block-heading {
color: #FCA004 !important;
}
/* Issue #48: local blog navigation. Colors override existing global link rules. */
.veles-cat-nav {
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0.5rem 0 2rem;
box-sizing: border-box;
}
.veles-cat-nav .veles-cat-nav__current {
margin: 0 0 0.375rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--veles-text-secondary, #C0C0C0);
}
.veles-cat-nav .veles-cat-nav__list {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
margin: 0;
padding: 0.25rem 0.25rem 0.625rem;
list-style: none;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--veles-accent, #FCA004) var(--veles-bg-card, #1A1A1A);
}
.veles-cat-nav .veles-cat-nav__item {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.veles-cat-nav a.veles-cat-nav__link {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 44px;
padding: 0.5rem 1rem;
border: 1px solid var(--veles-border, rgba(255, 255, 255, 0.08));
border-radius: 9999px;
background: var(--veles-bg-card, #1A1A1A);
color: var(--veles-text-secondary, #C0C0C0) !important;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.veles-cat-nav a.veles-cat-nav__link:hover {
background: var(--veles-bg-card-hover, #222222);
border-color: var(--veles-accent, #FCA004);
color: var(--veles-text-primary, #FFFFFF) !important;
}
.veles-cat-nav a.veles-cat-nav__link.is-active {
background: var(--veles-accent, #FCA004);
border-color: var(--veles-accent, #FCA004);
color: #0D0D0D !important;
font-weight: 600;
}
.veles-cat-nav a.veles-cat-nav__link:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
}
@media (min-width: 922px) {
.veles-cat-nav .veles-cat-nav__current {
display: none;
}
.veles-cat-nav .veles-cat-nav__list {
flex-wrap: wrap;
overflow: visible;
gap: 0.625rem;
}
}
/* ============================================
Issue #199: visible keyboard focus
:focus-visible only, so mouse/touch clicks keep
their current look. Overrides earlier
outline:none rules on buttons and menus.
============================================ */
html body button:focus-visible,
html body .button:focus-visible,
html body input[type="submit"]:focus-visible,
html body .wp-block-button__link:focus-visible,
html body.woocommerce .button:focus-visible,
html body .single_add_to_cart_button:focus-visible,
html body #place_order:focus-visible {
outline: 2px solid #FFFFFF !important;
outline-offset: 3px !important;
}
html body .ast-builder-menu-1 .menu-item>.menu-link:focus-visible,
html body .ast-builder-menu-2 .menu-item>.menu-link:focus-visible,
html body .ast-mobile-header-content .menu-item>.menu-link:focus-visible,
html body .ast-builder-menu-mobile .menu-item>.menu-link:focus-visible,
html body.ast-header-break-point .ast-builder-menu-1 .menu-item>.menu-link:focus-visible,
html body.ast-header-break-point .ast-builder-menu-2 .menu-item>.menu-link:focus-visible,
html body.ast-header-break-point .ast-menu-toggle:focus-visible,
html body .ast-menu-toggle:focus-visible {
outline: 2px solid var(--veles-accent, #FCA004) !important;
outline-offset: -2px !important;
}
/* ============================================
Issue #207: style and colour buttons above
the shop product list
============================================ */
.velesdc-chips {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin: 0 0 24px;
}
.velesdc-chips__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.velesdc-chips__label {
min-width: 56px;
color: #9A9A9A;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html body .velesdc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border: 1px solid #FCA004;
border-radius: 999px;
background: #1E1E1E;
color: #EBEBEB !important; /* the theme forces a { color: accent !important } */
font-size: 14px;
line-height: 1.4;
text-decoration: none;
}
html body .velesdc-chip:hover {
background: #2A2A2A;
color: #FFFFFF !important;
}
html body .velesdc-chip:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
}
html body .velesdc-chip.is-active {
background: #FCA004;
color: #000000 !important;
font-weight: 700;
}
.velesdc-chip__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #EBEBEB;
flex-shrink: 0;
}
.velesdc-chip--color-black-white .velesdc-chip__dot { background: linear-gradient(90deg, #111111 50%, #EBEBEB 50%); border: 1px solid #EBEBEB; }
.velesdc-chip--color-red .velesdc-chip__dot { background: #E33333; }
.velesdc-chip--color-orange .velesdc-chip__dot { background: #F08A1E; }
.velesdc-chip--color-yellow .velesdc-chip__dot { background: #F0D228; }
.velesdc-chip--color-green .velesdc-chip__dot { background: #3CC850; }
.velesdc-chip--color-blue .velesdc-chip__dot { background: #3278F0; }
.velesdc-chip--color-pink-purple .velesdc-chip__dot { background: #DC46C8; }
@media (max-width: 544px) {
.velesdc-chips__label {
width: 100%;
}
html body .velesdc-chip {
padding: 4px 12px;
font-size: 13px;
}
}
/* ============================================
Issue #211: product description on mobile —
tighter layout and collapsible detail sections
(server-rendered , no JavaScript)
============================================ */
.veles-collapse__summary {
list-style: none;
}
.veles-collapse__summary::-webkit-details-marker {
display: none;
}
@media (max-width: 768px) {
.woocommerce div.product #tab-description {
padding-left: 0 !important;
padding-right: 0 !important;
}
#tab-description .veles-product-description {
padding-left: 14px !important;
padding-right: 14px !important;
}
#tab-description h2 {
margin-top: 8px !important;
padding-left: 0 !important;
padding-right: 0 !important;
font-size: 22px !important;
line-height: 1.25 !important;
}
#tab-description p,
#tab-description li {
line-height: 1.6 !important;
}
#tab-description ul {
margin-left: 0 !important;
padding-left: 18px !important;
}
.veles-collapse {
margin: 12px 0;
border: 1px solid #333333;
border-radius: 10px;
background: #161616;
}
.veles-collapse__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
cursor: pointer;
}
.veles-collapse__summary > * {
margin: 0 !important;
padding: 0 !important;
}
.veles-collapse__summary::after {
content: "\25BE";
color: #FCA004;
font-size: 18px;
line-height: 1;
}
.veles-collapse[open] > .veles-collapse__summary::after {
content: "\25B4";
}
.veles-collapse__summary:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: -2px;
border-radius: 10px;
}
.veles-collapse__body {
padding: 0 14px 12px;
}
}
/* Desktop keeps every section expanded and the summary looks like the original heading. */
@media (min-width: 769px) {
.veles-collapse::details-content {
display: block;
content-visibility: visible;
}
}
/* ============================================
Issue #214: YouTube video in the product short
description keeps 16:9 at any width. The embeds
carry fixed width/height attributes (560x315 or
oEmbed 1200x675); max-width alone shrank only the
width, so phones showed a tall, cropped frame.
============================================ */
.woocommerce div.product .woocommerce-product-details__short-description iframe {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}