:root { --primary-green: #7CAC32;
--secondary-green: #8db741;
--accent-orange: #DB5D31;
--dark-teal: #247390;
--light-green: #f0f7e8; --dark: #1a1a1a;
--dark-gray: #2d2d2d;
--medium-gray: #6b6b6b;
--light-gray: #e8e8e8;
--white: #ffffff; --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Bebas Neue', 'Oswald', sans-serif;
--font-accent: 'Oswald', sans-serif; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s ease;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.12);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
--shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
} * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
overflow-x: hidden;
}
body {
font-family: var(--font-primary);
color: var(--dark);
line-height: 1.6;
background: linear-gradient(to bottom, #ffffff 0%, #f8faf7 100%);
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(122,172,50,0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(36,115,144,0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
body > * {
position: relative;
z-index: 1;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
} .container {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
.container-fluid {
max-width: 100%;
margin: 0 auto;
padding: 0 24px;
}
.svg-icon {
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
} .top-bar-expanded {
background: var(--dark);
color: var(--white);
padding: 12px 0;
font-size: 14px;
border-bottom: 2px solid var(--primary-green);
}
.top-bar-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.top-bar-social,
.top-bar-info,
.top-bar-contact {
display: flex;
align-items: center;
gap: 20px;
}
.top-label {
font-weight: 500;
margin-right: 8px;
color: var(--light-gray);
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: var(--transition);
}
.social-link:hover {
background: var(--primary-green);
transform: translateY(-2px);
}
.social-link .svg-icon {
width: 18px;
height: 18px;
}
.info-item {
display: flex;
align-items: center;
gap: 8px;
}
.info-item .svg-icon {
width: 18px;
height: 18px;
color: var(--primary-green);
}
.contact-link {
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
.contact-link:hover {
color: var(--primary-green);
}
.contact-link .svg-icon {
width: 18px;
height: 18px;
} .header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--white);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.header.scrolled {
box-shadow: var(--shadow-md);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 16px 0;
} .logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 24px;
color: var(--dark);
transition: var(--transition);
}
.logo:hover {
transform: scale(1.05);
}
.logo-icon {
width: 48px;
height: 48px;
color: var(--primary-green);
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-main {
font-family: var(--font-display);
font-size: 32px;
letter-spacing: 2px;
color: var(--primary-green);
}
.logo-sub {
font-family: var(--font-accent);
font-size: 16px;
letter-spacing: 4px;
color: var(--accent-orange);
font-weight: 500;
} .nav-menu {
flex: 1;
} .nav-search {
display: none;
}
.nav-list {
display: flex;
align-items: center;
gap: 32px;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
}
.nav-link {
font-family: var(--font-accent);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 0;
color: var(--dark);
transition: var(--transition);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-green);
transition: var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-green);
} .has-dropdown {
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--white);
box-shadow: var(--shadow-lg);
border-radius: var(--radius-md);
padding: 12px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
display: none;
}
.has-dropdown:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown li {
padding: 0;
}
.dropdown a {
display: block;
padding: 12px 24px;
color: var(--dark);
transition: var(--transition);
font-family: var(--font-primary);
text-transform: none;
letter-spacing: 0;
}
.dropdown a:hover {
background: var(--light-green);
color: var(--primary-green);
padding-left: 32px;
} .header-content {
position: relative;
}
.has-mega-menu {
position: static !important;
}
.has-mega-menu > .nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.has-mega-menu:hover .nav-arrow {
transform: rotate(180deg);
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100vw;
margin-left: calc(-50vw + 50%);
background: var(--white);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
z-index: 9999;
border-top: 3px solid var(--primary-green);
}
.has-mega-menu:hover .mega-menu,
.mega-menu:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
} .mega-menu::before {
content: '';
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 20px;
background: transparent;
}
.mega-menu-container {
max-width: 1300px;
margin: 0 auto;
padding: 6px 30px 18px;
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.mega-menu-column {
min-width: 0;
}
.mega-menu-title {
display: block;
font-family: var(--font-accent);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary-green);
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 14px !important;
border-bottom: 2px solid var(--light-green);
transition: color 0.3s ease;
}
.mega-menu-title:hover {
color: var(--primary-green-dark);
}
.mega-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.mega-menu-list li {
margin-bottom: 2px;
}
.mega-menu-list a {
display: block;
font-size: 14px;
color: var(--text-secondary);
padding: 5px 0;
transition: all 0.2s ease;
position: relative;
padding-left: 0;
}
.mega-menu-list a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: var(--primary-green);
transition: width 0.2s ease;
}
.mega-menu-list a:hover {
color: var(--primary-green);
padding-left: 10px;
}
.mega-menu-list a:hover::before {
width: 5px;
}
.mega-menu-footer {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-color);
text-align: center;
}
.mega-menu-all-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--primary-green);
padding: 10px 20px;
background: var(--light-green);
border-radius: var(--radius-md);
transition: all 0.3s ease;
}
.mega-menu-all-link:hover {
background: var(--primary-green);
color: var(--white);
}
.mega-menu-all-link .svg-icon {
width: 14px;
height: 14px;
transition: transform 0.3s ease;
}
.mega-menu-all-link:hover .svg-icon {
transform: translateX(4px);
} .header-actions {
display: flex;
align-items: center;
gap: 20px;
}
.search-box {
position: relative;
width: 280px;
}
.search-input {
width: 100%;
padding: 12px 48px 12px 16px;
border: 2px solid var(--light-gray);
border-radius: 50px;
font-size: 14px;
font-family: var(--font-primary);
transition: var(--transition);
}
.search-input:focus {
outline: none;
border-color: var(--primary-green);
}
.search-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-green);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.search-btn:hover {
background: var(--secondary-green);
transform: translateY(-50%) scale(1.05);
} .search-suggestions {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--white);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.25s ease;
max-height: 400px;
overflow: hidden;
}
.search-suggestions.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.suggestions-content {
max-height: 350px;
overflow-y: auto;
}
.suggestions-list {
padding: 8px;
}
.suggestion-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease;
}
.suggestion-item:hover,
.suggestion-item.selected {
background: var(--light-gray);
}
.suggestion-image {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 6px;
overflow: hidden;
background: #f5f5f5;
}
.suggestion-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.suggestion-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.suggestion-name {
font-size: 14px;
font-weight: 500;
color: var(--dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestion-name mark {
background: rgba(124,172,50,0.2);
color: var(--primary-green);
padding: 0 2px;
border-radius: 2px;
}
.suggestion-price {
font-size: 14px;
font-weight: 700;
color: var(--primary-green);
}
.suggestions-view-all {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
border-top: 1px solid var(--light-gray);
font-size: 14px;
font-weight: 600;
color: var(--primary-green);
transition: background 0.2s ease;
}
.suggestions-view-all:hover {
background: var(--light-gray);
}
.suggestions-view-all .svg-icon {
width: 16px;
height: 16px;
}
.suggestions-empty {
padding: 30px 20px;
text-align: center;
color: #6b6b6b;
font-size: 14px;
}
.suggestions-loading {
padding: 30px 20px;
text-align: center;
}
.suggestions-loading .loading-spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid var(--light-gray);
border-top-color: var(--primary-green);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
} .action-buttons {
display: flex;
gap: 12px;
}
.action-btn {
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--light-gray);
color: var(--dark);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.action-btn:hover {
background: var(--primary-green);
color: var(--white);
transform: translateY(-2px);
} .account-btn.is-logged-in {
background: rgba(124, 172, 50, 0.15);
color: var(--primary-green);
}
.account-btn.is-logged-in::after {
content: '';
position: absolute;
bottom: 2px;
right: 2px;
width: 10px;
height: 10px;
background: var(--primary-green);
border-radius: 50%;
border: 2px solid #fff;
}
.account-btn.is-logged-in:hover {
background: var(--primary-green);
color: #fff;
}
.action-badge {
position: absolute;
top: -4px;
right: -4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-orange);
color: var(--white);
font-size: 12px;
font-weight: 700;
display: none;
align-items: center;
justify-content: center;
} .sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sidebar-overlay.active {
opacity: 1;
visibility: visible;
} .cart-dropdown {
position: fixed;
top: 0;
right: -480px;
width: 480px;
height: 100vh;
background: var(--white);
box-shadow: -5px 0 30px rgba(0,0,0,0.15);
z-index: 10000;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.cart-dropdown.active {
right: 0;
}
.cart-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 32px;
border-bottom: 2px solid var(--light-gray);
background: linear-gradient(135deg, var(--light-green) 0%, var(--white) 100%);
}
.cart-dropdown-header h3 {
font-family: var(--font-display);
font-size: 28px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primary-green);
}
.cart-close {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--light-gray);
color: var(--dark);
font-size: 32px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
cursor: pointer;
}
.cart-close:hover {
background: var(--accent-orange);
color: var(--white);
transform: rotate(90deg);
}
.cart-dropdown-content {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.cart-item {
display: flex;
gap: 16px;
padding: 20px;
background: var(--white);
border: 2px solid var(--light-gray);
border-radius: var(--radius-md);
margin-bottom: 16px;
transition: var(--transition);
}
.cart-item:hover {
border-color: var(--primary-green);
box-shadow: var(--shadow-md);
transform: translateX(-4px);
}
.cart-item-image {
width: 80px;
height: 80px;
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item-details {
flex: 1;
}
.cart-item-name {
font-family: var(--font-accent);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
color: var(--dark);
}
.cart-item-price {
font-family: var(--font-accent);
font-size: 18px;
font-weight: 700;
color: var(--primary-green);
margin-bottom: 8px;
}
.cart-item-quantity {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--medium-gray);
}
.cart-item-remove {
align-self: flex-start;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--light-gray);
color: var(--dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: var(--transition);
}
.cart-item-remove:hover {
background: var(--accent-orange);
color: var(--white);
transform: scale(1.1);
}
.cart-dropdown-footer {
padding: 24px 32px;
border-top: 2px solid var(--light-gray);
background: var(--light-green);
} .cart-dropdown.is-empty .cart-dropdown-footer {
display: none;
}
.cart-total {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
font-weight: 600;
color: var(--dark);
}
.cart-total-price {
font-family: var(--font-display);
font-size: 28px;
color: var(--primary-green);
font-weight: 700;
}
.cart-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.cart-buttons .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.cart-buttons .btn .svg-icon {
width: 18px;
height: 18px;
}
.btn-outline-dark {
background: transparent;
border: 2px solid var(--dark);
color: var(--dark);
}
.btn-outline-dark:hover {
background: var(--dark);
color: var(--white);
}
.btn-block {
width: 100%;
justify-content: center;
} .account-dropdown {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100vh;
background: var(--white);
box-shadow: -5px 0 30px rgba(0,0,0,0.15);
z-index: 10000;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.account-dropdown.active {
right: 0;
}
.account-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
border-bottom: 2px solid var(--light-gray);
background: linear-gradient(135deg, var(--light-green) 0%, var(--white) 100%);
}
.account-dropdown-header h3 {
font-family: var(--font-display);
font-size: 24px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primary-green);
}
.account-close {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--light-gray);
color: var(--dark);
font-size: 32px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
cursor: pointer;
border: none;
}
.account-close:hover {
background: var(--accent-orange);
color: var(--white);
transform: rotate(90deg);
}
.account-dropdown-content {
flex: 1;
overflow-y: auto;
padding: 0;
} .account-user-preview {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 28px;
background: linear-gradient(135deg, var(--primary-green), #5a8c28);
color: #fff;
}
.user-avatar-small img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
}
.user-info-small {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-name-small {
font-size: 18px;
font-weight: 600;
}
.user-email-small {
font-size: 13px;
opacity: 0.85;
} .account-quick-links {
padding: 16px 0;
}
.account-quick-links a {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 28px;
color: var(--text-primary);
font-size: 15px;
font-weight: 500;
transition: all 0.2s ease;
border-bottom: 1px solid #f0f0f0;
}
.account-quick-links a:hover {
background: #f8f9fa;
color: var(--primary-green);
padding-left: 34px;
}
.account-quick-links a .svg-icon {
width: 20px;
height: 20px;
color: var(--primary-green);
} .account-login-prompt {
text-align: center;
padding: 50px 28px;
}
.account-login-prompt .login-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--primary-green), #5a8c28);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.account-login-prompt .login-icon .svg-icon {
width: 40px;
height: 40px;
color: #fff;
}
.account-login-prompt p {
color: var(--text-secondary);
font-size: 15px;
line-height: 1.6;
} .account-dropdown-footer {
padding: 24px 28px;
border-top: 1px solid #eee;
background: #f8f9fa;
}
.account-dropdown-footer .btn-full {
width: 100%;
justify-content: center;
}
.account-dropdown-footer .btn-logout {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
background: transparent;
border: 2px solid #dc3545;
color: #dc3545;
font-size: 15px;
font-weight: 600;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.account-dropdown-footer .btn-logout:hover {
background: #dc3545;
color: #fff;
}
.account-dropdown-footer .btn-logout .svg-icon {
width: 18px;
height: 18px;
}
.account-dropdown-footer .register-link {
text-align: center;
margin-top: 16px;
font-size: 14px;
color: var(--text-secondary);
}
.account-dropdown-footer .register-link a {
color: var(--primary-green);
font-weight: 600;
}
@media (max-width: 480px) {
.account-dropdown {
width: 100%;
right: -100%;
}
} .woocommerce-mini-cart {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-mini-cart .cart-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: var(--white);
border: 1px solid var(--light-gray);
border-radius: var(--radius-md);
margin-bottom: 12px;
transition: var(--transition);
position: relative;
}
.woocommerce-mini-cart .cart-item:hover {
border-color: var(--primary-green);
box-shadow: var(--shadow-sm);
}
.woocommerce-mini-cart .cart-item-image {
width: 70px;
height: 70px;
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
background: #f8f8f8;
}
.woocommerce-mini-cart .cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.woocommerce-mini-cart .cart-item-info {
flex: 1;
min-width: 0;
}
.woocommerce-mini-cart .cart-item-name {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--dark);
margin-bottom: 6px;
line-height: 1.3;
}
.woocommerce-mini-cart .cart-item-name a {
color: inherit;
transition: var(--transition);
}
.woocommerce-mini-cart .cart-item-name a:hover {
color: var(--primary-green);
}
.woocommerce-mini-cart .cart-item-qty-price {
font-size: 14px;
color: var(--medium-gray);
}
.woocommerce-mini-cart .cart-item-qty-price .quantity {
color: var(--primary-green);
font-weight: 600;
}
.woocommerce-mini-cart .cart-item-remove {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f5f5f5;
color: #999;
font-size: 16px;
font-weight: 400;
line-height: 1;
text-decoration: none;
transition: var(--transition);
}
.woocommerce-mini-cart .cart-item-remove:hover {
background: var(--accent-orange);
color: var(--white);
}
.cart-empty,
.cart-empty-message {
text-align: center;
padding: 60px 20px;
color: var(--medium-gray);
}
.cart-empty svg,
.cart-empty-message svg {
width: 80px;
height: 80px;
margin: 0 auto 24px;
opacity: 0.3;
}
.cart-empty p,
.cart-empty-message p {
font-size: 16px;
margin-bottom: 24px;
} .mobile-toggle {
display: none;
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
background: var(--light-gray);
color: var(--dark);
align-items: center;
justify-content: center;
transition: var(--transition);
}
.mobile-toggle .icon-close {
display: none;
}
.mobile-toggle.active .icon-open {
display: none;
}
.mobile-toggle.active .icon-close {
display: block;
} .hero {
color: var(--white);
padding: 200px 0 150px;
position: relative;
overflow: hidden;
min-height: 85vh;
display: flex;
align-items: center;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-cover {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0.6) 50%, rgba(122,172,50,0.3) 100%);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 750px;
animation: fadeInUp 0.8s ease-out;
text-align: left;
}
.hero-title {
font-family: var(--font-display);
font-size: 82px;
font-weight: 400;
line-height: 1;
margin-bottom: 32px;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.3);
}
.hero-title .highlight {
color: var(--accent-orange);
display: block;
text-shadow: 0 4px 20px rgba(219,93,49,0.6), 0 2px 10px rgba(0,0,0,0.4);
}
.hero-subtitle {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 16px;
opacity: 0.9;
font-weight: 600;
color: var(--primary-green);
}
.hero-description {
font-size: 18px;
line-height: 1.7;
margin-bottom: 40px;
opacity: 0.9;
max-width: 500px;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.hero-cta {
display: flex;
gap: 20px;
flex-wrap: wrap;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 40px;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
font-family: var(--font-accent);
text-transform: uppercase;
letter-spacing: 1.5px;
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
color: var(--white);
box-shadow: 0 4px 15px rgba(122,172,50,0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--secondary-green) 0%, var(--primary-green) 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(122,172,50,0.4);
}
.btn-outline {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-outline:hover {
background: var(--white);
color: var(--primary-green);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255,255,255,0.3);
}
.btn-white {
background: var(--white);
color: var(--primary-green);
box-shadow: 0 4px 15px rgba(255,255,255,0.3);
}
.btn-white:hover {
background: var(--light-green);
color: var(--primary-green);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255,255,255,0.4);
} .features {
padding: 100px 0;
background: linear-gradient(180deg, #ffffff 0%, #f8faf7 100%);
position: relative;
}
.features .container {
position: relative;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1100px;
margin: 0 auto;
}
.feature-card {
text-align: center;
padding: 50px 30px;
border-radius: var(--radius-lg);
background: var(--white);
transition: var(--transition);
border: 1px solid var(--light-gray);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary-green), var(--accent-orange), var(--dark-teal));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
border-color: var(--primary-green);
}
.feature-icon {
width: 70px;
height: 70px;
margin: 0 auto 24px;
background: linear-gradient(135deg, var(--light-green), rgba(122,172,50,0.15));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-green);
transition: var(--transition);
}
.feature-card:hover .feature-icon {
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
color: var(--white);
transform: scale(1.1);
}
.feature-icon .svg-icon {
width: 36px;
height: 36px;
}
.feature-title {
font-family: var(--font-accent);
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--dark);
}
.feature-text {
color: var(--medium-gray);
font-size: 15px;
line-height: 1.5;
} .section-header {
text-align: center;
margin-bottom: 64px;
position: relative;
padding: 40px 0;
}
.section-header::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 200px;
background: radial-gradient(ellipse, rgba(122,172,50,0.08) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
}
.section-label {
font-family: var(--font-accent);
font-size: 14px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--primary-green);
margin-bottom: 16px;
position: relative;
display: inline-block;
padding: 12px 32px;
background: linear-gradient(135deg, rgba(122,172,50,0.1), rgba(122,172,50,0.05));
border-radius: 50px;
border: 2px solid rgba(122,172,50,0.2);
z-index: 1;
}
.section-label::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 6px;
height: 6px;
background: var(--primary-green);
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px var(--primary-green);
}
.section-label::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 6px;
height: 6px;
background: var(--accent-orange);
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px var(--accent-orange);
}
.section-title {
font-family: var(--font-display);
font-size: 56px;
font-weight: 400;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(135deg, var(--dark) 0%, var(--dark-gray) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 1;
}
.section-title .highlight {
background: linear-gradient(135deg, var(--accent-orange) 0%, #ff7b4d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
} .about-section {
padding: 100px 0;
background: var(--light-green);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-text {
animation: fadeInLeft 0.8s ease-out;
}
.about-description {
font-size: 18px;
line-height: 1.8;
color: var(--dark-gray);
margin-bottom: 40px;
}
.about-features {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 40px;
}
.about-feature {
display: flex;
gap: 20px;
}
.about-feature .svg-icon {
width: 32px;
height: 32px;
color: var(--primary-green);
flex-shrink: 0;
}
.about-feature h4 {
font-family: var(--font-accent);
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 1px;
}
.about-feature p {
color: var(--medium-gray);
font-size: 15px;
}
.about-images {
position: relative;
animation: fadeInRight 0.8s ease-out;
}
.about-image-main {
position: relative;
margin-bottom: 24px;
}
.about-image-main img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
}
.about-image-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.about-image-grid img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.about-image-grid img:hover {
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
.about-badge {
position: absolute;
bottom: 32px;
right: 32px;
background: var(--white);
padding: 24px 32px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
text-align: center;
}
.badge-number {
display: block;
font-family: var(--font-display);
font-size: 48px;
color: var(--primary-green);
line-height: 1;
margin-bottom: 8px;
}
.badge-text {
font-size: 14px;
color: var(--medium-gray);
font-weight: 500;
} .categories-section {
padding: 100px 0;
position: relative;
overflow: hidden;
} .categories-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1a1a1a;
z-index: 0;
} .categories-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.88) 50%, rgba(122,172,50,0.85) 100%),
radial-gradient(circle at 20% 30%, rgba(122,172,50,0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(36,115,144,0.15) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.categories-section .container {
position: relative;
z-index: 2;
} .categories-section .section-label {
background: linear-gradient(135deg, rgba(122,172,50,0.25), rgba(122,172,50,0.15));
border: 2px solid rgba(122,172,50,0.4);
color: var(--white);
}
.categories-section .section-title {
background: linear-gradient(135deg, var(--white) 0%, rgba(255,255,255,0.9) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.categories-section .section-title .highlight {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.category-card {
position: relative;
border-radius: var(--radius-lg);
padding: 60px 40px;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 340px;
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: var(--transition);
z-index: 0;
} .category-carp {
position: relative;
color: var(--white);
overflow: hidden;
}
.category-carp::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5e8c1a;
z-index: 0;
transition: var(--transition);
}
.category-carp::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(122,172,50,0.3) 0%, rgba(0,0,0,0.5) 100%);
z-index: 1;
transition: var(--transition);
}
.category-carp:hover::before {
transform: scale(1.1);
}
.category-carp:hover::after {
background: linear-gradient(135deg, rgba(122,172,50,0.2) 0%, rgba(0,0,0,0.4) 100%);
} .category-feeder {
position: relative;
color: var(--white);
overflow: hidden;
}
.category-feeder::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #b8451d;
z-index: 0;
transition: var(--transition);
}
.category-feeder::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(219,93,49,0.3) 0%, rgba(0,0,0,0.5) 100%);
z-index: 1;
transition: var(--transition);
}
.category-feeder:hover::before {
transform: scale(1.1);
}
.category-feeder:hover::after {
background: linear-gradient(135deg, rgba(219,93,49,0.2) 0%, rgba(0,0,0,0.4) 100%);
} .category-spinning {
position: relative;
color: var(--white);
overflow: hidden;
}
.category-spinning::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1a5a72;
z-index: 0;
transition: var(--transition);
}
.category-spinning::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(36,115,144,0.3) 0%, rgba(0,0,0,0.5) 100%);
z-index: 1;
transition: var(--transition);
}
.category-spinning:hover::before {
transform: scale(1.1);
}
.category-spinning:hover::after {
background: linear-gradient(135deg, rgba(36,115,144,0.2) 0%, rgba(0,0,0,0.4) 100%);
} .category-match {
position: relative;
color: var(--white);
overflow: hidden;
}
.category-match::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2d2d2d;
z-index: 0;
transition: var(--transition);
}
.category-match::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(45,45,45,0.3) 0%, rgba(0,0,0,0.5) 100%);
z-index: 1;
transition: var(--transition);
}
.category-match:hover::before {
transform: scale(1.1);
}
.category-match:hover::after {
background: linear-gradient(135deg, rgba(45,45,45,0.2) 0%, rgba(0,0,0,0.4) 100%);
}
.category-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.category-icon-wrapper {
width: 100px;
height: 100px;
background: rgba(255,255,255,0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: var(--transition);
position: relative;
z-index: 2;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.category-card:hover .category-icon-wrapper {
background: rgba(255,255,255,0.35);
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.category-icon {
width: 50px;
height: 50px;
color: var(--white);
}
.category-name {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
letter-spacing: 2px;
margin-bottom: 12px;
position: relative;
z-index: 2;
text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
}
.category-description {
font-size: 16px;
opacity: 0.95;
margin-bottom: 16px;
position: relative;
z-index: 2;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.category-count {
font-size: 15px;
opacity: 0.9;
font-weight: 500;
position: relative;
z-index: 2;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.category-arrow {
position: absolute;
bottom: 30px;
right: 30px;
width: 48px;
height: 48px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
opacity: 0;
transform: translateX(-20px);
z-index: 2;
}
.category-card:hover .category-arrow {
opacity: 1;
transform: translateX(0);
}
.category-arrow .svg-icon {
width: 24px;
height: 24px;
color: var(--white);
} .products-section {
padding: 100px 0;
position: relative;
overflow: hidden;
} .products-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f8faf7;
z-index: 0;
} .products-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(248,250,247,0.94) 50%, rgba(255,255,255,0.96) 100%),
radial-gradient(circle at 30% 40%, rgba(122,172,50,0.06) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(36,115,144,0.06) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.products-section .container {
position: relative;
z-index: 2;
}
.products-filters {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 48px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 28px;
border-radius: 50px;
border: 2px solid var(--light-gray);
font-family: var(--font-accent);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--dark);
transition: var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
border-color: var(--primary-green);
background: var(--primary-green);
color: var(--white);
}
.section-filters {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 20px;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 32px;
margin-bottom: 64px;
} .product-card {
position: relative;
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
animation: fadeInUp 0.6s ease-out;
border: 1px solid transparent;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-teal) 100%);
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.product-card:hover {
box-shadow: 0 20px 50px rgba(122,172,50,0.25);
transform: translateY(-12px);
border-color: var(--primary-green);
}
.product-card:hover::before {
opacity: 0.03;
}
.product-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 16px;
border-radius: 50px;
background: var(--primary-green);
color: var(--white);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 2;
}
.product-badge.badge-sale {
background: var(--accent-orange);
}
.product-wishlist {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--white);
color: var(--accent-orange);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
transition: var(--transition);
z-index: 15;
}
.product-wishlist:hover {
background: var(--accent-orange);
color: var(--white);
transform: scale(1.1);
}
.product-image {
position: relative;
padding-top: 100%;
overflow: hidden;
background: var(--light-gray);
}
.product-image > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10;
}
.product-card:hover .product-overlay {
opacity: 1;
visibility: visible;
} @media (hover: none) {
.product-overlay {
opacity: 1;
visibility: visible;
background: transparent;
top: auto;
left: auto;
right: 10px;
bottom: 10px;
width: auto;
height: auto;
pointer-events: none;
}
.product-overlay .quick-view {
pointer-events: auto;
padding: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
font-size: 0;
gap: 0;
}
.product-overlay .quick-view .svg-icon {
width: 18px;
height: 18px;
margin: 0;
}
}
.product-overlay .quick-view {
padding: 12px 24px;
background: var(--white);
color: var(--dark);
border: none;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
transform: translateY(20px);
}
.product-card:hover .product-overlay .quick-view {
transform: translateY(0);
}
.product-overlay .quick-view:hover {
background: var(--primary-green);
color: var(--white);
}
.product-overlay .quick-view .svg-icon {
width: 18px;
height: 18px;
} .product-card.is-out-of-stock .product-image img {
filter: grayscale(0.55);
opacity: 0.6;
transition: opacity 0.2s ease, filter 0.2s ease;
}
.product-card.is-out-of-stock:hover .product-image img {
opacity: 0.7;
}
.out-of-stock-ribbon {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: rgba(31, 38, 47, 0.92);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 50px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 3;
pointer-events: none;
}
.out-of-stock-ribbon .svg-icon {
width: 13px;
height: 13px;
color: #ff8c80;
}
.btn-out-of-stock {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 20px;
border-radius: var(--radius-sm, 10px);
background: #f3f4f6;
color: #6b7280;
border: 1px dashed #d1d5db;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: not-allowed;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-out-of-stock:hover {
background: #eef2f5;
border-color: #b5bcc4;
color: #4b5563;
}
.btn-out-of-stock .svg-icon {
width: 16px;
height: 16px;
}
.product-info {
padding: 24px;
}
.product-name {
font-family: var(--font-accent);
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-rating {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 12px;
}
.rating-count {
font-size: 13px;
color: var(--medium-gray);
margin-left: 4px;
}
.product-price {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.price-current {
font-family: var(--font-accent);
font-size: 24px;
font-weight: 700;
color: var(--primary-green);
}
.price-old {
font-size: 18px;
color: var(--medium-gray);
text-decoration: line-through;
}
.product-actions {
display: flex;
gap: 12px;
}
.btn-cart {
flex: 1;
padding: 12px 24px;
border-radius: 50px;
background: var(--primary-green);
color: var(--white);
font-family: var(--font-accent);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
}
.btn-cart:hover {
background: var(--secondary-green);
}
.btn-quick {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--light-gray);
color: var(--dark);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.btn-quick:hover {
background: var(--dark-teal);
color: var(--white);
}
.section-cta {
text-align: center;
} .testimonials-section {
padding: 100px 0;
position: relative;
overflow: hidden;
} .testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #eef5e6;
z-index: 0;
} .testimonials-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(240,247,232,0.95) 0%, rgba(255,255,255,0.92) 50%, rgba(240,247,232,0.95) 100%),
radial-gradient(circle at 20% 30%, rgba(122,172,50,0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(36,115,144,0.08) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.testimonials-section .container {
position: relative;
z-index: 2;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
}
.testimonial-card {
background: var(--white);
padding: 40px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
position: relative;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.quote-icon {
width: 48px;
height: 48px;
background: var(--light-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-green);
margin-bottom: 20px;
}
.quote-icon .svg-icon {
width: 28px;
height: 28px;
}
.testimonial-rating {
display: flex;
gap: 4px;
margin-bottom: 20px;
}
.testimonial-rating .svg-icon {
width: 20px;
height: 20px;
}
.testimonial-text {
font-size: 16px;
line-height: 1.8;
color: var(--dark-gray);
margin-bottom: 24px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 16px;
}
.author-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary-green);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
}
.author-name {
font-family: var(--font-accent);
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.author-role {
font-size: 14px;
color: var(--medium-gray);
} .cta-banner {
color: var(--white);
padding: 120px 0;
text-align: center;
position: relative;
overflow: hidden;
min-height: 400px;
display: flex;
align-items: center;
}
.cta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.cta-cover {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.cta-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(122,172,50,0.92) 0%, rgba(36,115,144,0.88) 100%);
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-title {
font-family: var(--font-display);
font-size: 56px;
font-weight: 400;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 0 4px 15px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}
.cta-text {
font-size: 22px;
margin-bottom: 40px;
opacity: 0.98;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
font-weight: 400;
} .blog-section {
padding: 100px 0;
background: var(--white);
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
}
.blog-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.blog-image {
position: relative;
padding-top: 60%;
overflow: hidden;
}
.blog-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.blog-card:hover .blog-image img {
transform: scale(1.1);
}
.blog-category {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 16px;
border-radius: 50px;
background: var(--accent-orange);
color: var(--white);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.blog-content {
padding: 32px;
}
.blog-meta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
color: var(--medium-gray);
font-size: 14px;
}
.blog-date {
display: flex;
align-items: center;
gap: 6px;
}
.blog-date .svg-icon {
width: 16px;
height: 16px;
}
.blog-title {
font-family: var(--font-accent);
font-size: 22px;
font-weight: 600;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}
.blog-excerpt {
color: var(--dark-gray);
font-size: 15px;
line-height: 1.7;
margin-bottom: 20px;
}
.blog-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-green);
font-family: var(--font-accent);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
}
.blog-link:hover {
gap: 12px;
color: var(--accent-orange);
}
.blog-link .svg-icon {
width: 20px;
height: 20px;
} .newsletter {
padding: 80px 0;
color: var(--white);
position: relative;
overflow: hidden;
} .newsletter::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1a1a1a;
z-index: 0;
} .newsletter::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(45,45,45,0.88) 50%, rgba(122,172,50,0.85) 100%),
radial-gradient(circle at 50% 50%, rgba(122,172,50,0.15) 0%, transparent 60%);
pointer-events: none;
z-index: 1;
}
.newsletter .container {
position: relative;
z-index: 2;
}
.newsletter-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.newsletter-title {
font-family: var(--font-display);
font-size: 42px;
font-weight: 400;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 2px;
}
.newsletter-subtitle {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.9;
}
.newsletter-form {
display: flex;
gap: 16px;
max-width: 600px;
margin: 0 auto;
}
.newsletter-input {
flex: 1;
padding: 16px 24px;
border-radius: 50px;
border: 2px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.1);
color: var(--white);
font-size: 15px;
font-family: var(--font-primary);
transition: var(--transition);
}
.newsletter-input::placeholder {
color: rgba(255,255,255,0.6);
}
.newsletter-input:focus {
outline: none;
border-color: var(--primary-green);
background: rgba(255,255,255,0.15);
} .footer {
background: var(--dark-gray);
color: var(--white);
padding: 80px 0 32px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 48px;
margin-bottom: 48px;
}
.footer-title {
font-family: var(--font-accent);
font-size: 20px;
font-weight: 600;
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary-green);
}
.footer-text {
font-size: 15px;
line-height: 1.8;
color: var(--light-gray);
margin-bottom: 24px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social .social-link {
width: 40px;
height: 40px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
color: var(--light-gray);
font-size: 15px;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--primary-green);
padding-left: 8px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-contact li {
display: flex;
align-items: center;
gap: 12px;
color: var(--light-gray);
font-size: 15px;
}
.footer-contact .svg-icon {
width: 20px;
height: 20px;
color: var(--primary-green);
flex-shrink: 0;
}
.footer-bottom {
text-align: center;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.1);
color: var(--light-gray);
font-size: 14px;
}
.footer-bottom p {
margin: 0;
}
.footer-credit {
margin-top: 6px !important;
font-size: 12px;
opacity: 0.65;
letter-spacing: 0.04em;
}
.footer-credit a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,0.3);
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.footer-credit a:hover {
opacity: 1;
border-bottom-color: var(--primary-green);
color: var(--primary-green);
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
} @media (max-width: 1024px) {
.hero-title {
font-size: 56px;
}
.hero-description {
font-size: 16px;
}
.hero {
min-height: 70vh;
padding: 150px 0 120px;
}
.section-title {
font-size: 42px;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.about-content {
grid-template-columns: 1fr;
gap: 48px;
}
.about-image-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) { .top-bar-expanded {
display: none !important;
}
.top-bar-content {
flex-direction: column;
text-align: center;
}
.top-bar-social,
.top-bar-info,
.top-bar-contact {
flex-wrap: wrap;
justify-content: center;
} .header-content {
display: flex !important;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap !important;
padding: 10px 0;
gap: 12px;
}
.header-content .logo {
flex: 0 0 auto;
}
.header-content .header-actions {
display: flex !important;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
margin-left: auto;
} .header-actions .search-box,
.header-actions #accountBtn {
display: none !important;
}
.nav-menu {
position: fixed;
top: 80px;
left: 0;
width: 100%;
background: var(--white);
box-shadow: var(--shadow-lg);
padding: 24px;
transform: translateX(-100%);
transition: var(--transition);
}
.nav-menu.active {
transform: translateX(0);
}
.nav-list {
flex-direction: column;
gap: 8px;
}
.nav-list .nav-item {
width: 100%;
}
.nav-list .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 4px;
border-bottom: 1px solid #f0f0f0;
width: 100%;
} #megaMenu,
.has-mega-menu .mega-menu,
.has-mega-menu:hover .mega-menu {
position: static !important;
display: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 0 12px !important;
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
pointer-events: auto !important;
z-index: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
border-top: 0 !important;
}
.has-mega-menu.is-open #megaMenu,
.has-mega-menu.is-open .mega-menu {
display: block !important;
}
#megaMenu::before,
.has-mega-menu .mega-menu::before {
display: none !important;
}
.has-mega-menu .nav-arrow {
transition: transform 0.2s ease;
}
.has-mega-menu.is-open .nav-arrow {
transform: rotate(180deg);
}
.mega-menu-container,
.mega-menu-content {
padding: 0;
}
.mega-menu-grid {
display: block;
grid-template-columns: 1fr;
gap: 0;
}
.mega-menu-column {
margin-bottom: 14px;
padding: 10px 0 4px;
border-bottom: 1px solid #f0f0f0;
}
.mega-menu-column:last-child {
border-bottom: 0;
}
.mega-menu-title {
font-size: 13px;
margin-bottom: 6px;
}
.mega-menu-list {
padding-left: 8px;
}
.mega-menu-list li {
margin: 0;
}
.mega-menu-list a {
font-size: 14px;
padding: 6px 0;
}
.mega-menu-footer {
padding: 8px 0 0;
}
.search-box {
width: 100%;
order: 4;
}
.mobile-toggle {
display: flex;
}
.hero {
min-height: 60vh;
padding: 120px 0 80px;
}
.hero-title {
font-size: 42px;
}
.hero-description {
font-size: 15px;
margin-bottom: 30px;
}
.section-title {
font-size: 36px;
}
.features-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.categories-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.category-card {
min-height: 280px;
padding: 40px 30px;
}
.cta-title {
font-size: 36px;
}
.newsletter-form {
flex-direction: column;
}
.hero-cta {
flex-direction: column;
}
}
@media (max-width: 480px) {
.container,
.container-fluid {
padding: 0 16px;
}
.hero {
padding: 80px 0 60px;
}
.hero-title {
font-size: 32px;
}
.hero-subtitle {
font-size: 12px;
letter-spacing: 2px;
}
.hero-description {
font-size: 14px;
margin-bottom: 24px;
}
.section-title {
font-size: 28px;
}
.logo-main {
font-size: 24px;
}
.logo-sub {
font-size: 12px;
}
.categories-grid,
.testimonials-grid,
.blog-grid {
grid-template-columns: 1fr;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
} .products-grid .product-info {
padding: 14px 12px;
}
.products-grid .product-brand {
font-size: 10px;
}
.products-grid .product-name {
font-size: 13px;
margin-bottom: 8px;
letter-spacing: 0.3px;
}
.products-grid .product-price {
gap: 6px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.products-grid .price-current {
font-size: 17px;
}
.products-grid .price-old {
font-size: 13px;
}
.products-grid .product-info .btn {
width: 100%;
padding: 10px 8px;
font-size: 11px;
letter-spacing: 0.4px;
gap: 6px;
}
.products-grid .product-info .btn .svg-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
}  .header {
transition: all 0.3s ease;
}
.header.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
animation: slideDown 0.3s ease;
}
.header.sticky.compact {
padding: 8px 0 !important;
}
.header.sticky.compact .header-content {
padding: 8px 0;
}
.header.sticky.compact .logo-main {
font-size: 28px;
}
.header.sticky.compact .logo-sub {
font-size: 11px;
}
.header.sticky.compact .search-box {
max-width: 350px;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} .header.sticky ~ .top-bar-expanded {
display: none;
} .quick-view-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.85);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease;
}
.quick-view-modal.active {
display: flex;
}
.quick-view-content {
background: white;
border-radius: var(--radius-lg);
max-width: 1000px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalSlideUp {
from {
transform: translateY(50px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.quick-view-close {
position: absolute;
top: 20px;
right: 20px;
width: 45px;
height: 45px;
background: var(--accent-orange);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
z-index: 10;
transition: var(--transition);
box-shadow: var(--shadow-md);
}
.quick-view-close:hover {
background: var(--primary-green);
transform: rotate(90deg) scale(1.1);
}
.quick-view-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 50px;
}
.quick-view-gallery {
position: relative;
}
.quick-view-main-image {
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
background: #f8f8f8;
margin-bottom: 20px;
}
.quick-view-main-image img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.quick-view-main-image:hover img {
transform: scale(1.1);
}
.quick-view-thumbnails {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.quick-view-thumb {
border: 2px solid transparent;
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
transition: var(--transition);
background: #f8f8f8;
}
.quick-view-thumb:hover,
.quick-view-thumb.active {
border-color: var(--primary-green);
transform: translateY(-2px);
}
.quick-view-thumb img {
width: 100%;
height: auto;
}
.quick-view-details {
display: flex;
flex-direction: column;
}
.quick-view-brand {
color: var(--primary-green);
font-weight: 700;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.quick-view-title {
font-family: var(--font-accent);
font-size: 32px;
font-weight: 600;
color: var(--dark);
margin-bottom: 15px;
line-height: 1.2;
}
.quick-view-rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.quick-view-price {
display: flex;
align-items: baseline;
gap: 15px;
margin-bottom: 25px;
padding: 20px 0;
border-top: 1px solid var(--light-gray);
border-bottom: 1px solid var(--light-gray);
}
.quick-view-price-current {
font-size: 42px;
font-weight: 700;
color: var(--accent-orange);
font-family: var(--font-display);
}
.quick-view-price-old {
font-size: 24px;
color: var(--medium-gray);
text-decoration: line-through;
}
.quick-view-description {
margin-bottom: 25px;
line-height: 1.8;
color: var(--medium-gray);
}
.quick-view-specs {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 25px;
border-radius: var(--radius-md);
margin-bottom: 25px;
}
.quick-view-specs h4 {
color: var(--primary-green);
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.quick-view-specs ul {
display: grid;
gap: 10px;
}
.quick-view-specs li {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.quick-view-specs li:last-child {
border-bottom: none;
}
.spec-label {
font-weight: 600;
color: var(--dark);
}
.spec-value {
color: var(--medium-gray);
}
.quick-view-stock {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 20px;
background: #d4edda;
border-radius: var(--radius-sm);
margin-bottom: 25px;
color: #155724;
font-weight: 600;
}
.quick-view-stock.out-of-stock {
background: #f8d7da;
color: #721c24;
}
.quick-view-actions {
display: flex;
gap: 15px;
margin-top: auto;
}
.quick-view-actions .btn {
flex: 1;
padding: 18px 30px;
font-size: 16px;
font-weight: 700;
} .product-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 8px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 5;
box-shadow: var(--shadow-md);
animation: badgePulse 2s ease infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.product-badge.badge-new {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
}
.product-badge.badge-sale {
background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
color: white;
}
.product-badge.badge-top {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color: white;
}
.product-badge.badge-shipping {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
color: white;
} .free-shipping-badge {
position: absolute;
bottom: 15px;
left: 15px;
background: white;
padding: 8px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
color: var(--primary-green);
display: flex;
align-items: center;
gap: 6px;
box-shadow: var(--shadow-md);
z-index: 5;
}
.free-shipping-badge .svg-icon {
width: 16px;
height: 16px;
} .countdown-timer {
display: flex;
gap: 10px;
justify-content: center;
margin: 15px 0;
padding: 15px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border-radius: var(--radius-md);
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
}
.countdown-value {
font-size: 32px;
font-weight: 700;
font-family: var(--font-display);
color: var(--accent-orange);
line-height: 1;
}
.countdown-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #999;
margin-top: 5px;
} .filters-sidebar {
position: sticky;
top: 100px;
background: white;
border-radius: var(--radius-lg);
padding: 30px;
box-shadow: var(--shadow-md);
}
.filter-section {
margin-bottom: 35px;
padding-bottom: 35px;
border-bottom: 1px solid var(--light-gray);
}
.filter-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.filter-title {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
color: var(--dark);
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-clear {
font-size: 12px;
color: var(--accent-orange);
text-transform: none;
letter-spacing: 0;
cursor: pointer;
font-weight: 500;
}
.filter-clear:hover {
text-decoration: underline;
} .price-ranges {
display: flex;
flex-direction: column;
gap: 12px;
}
.price-range-item {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 10px;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.price-range-item:hover {
background: var(--light-green);
}
.price-range-item input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary-green);
}
.price-range-label {
flex: 1;
font-size: 14px;
color: var(--dark);
cursor: pointer;
}
.price-range-count {
font-size: 12px;
color: var(--medium-gray);
background: var(--light-gray);
padding: 2px 8px;
border-radius: 10px;
} .brand-filters {
display: grid;
gap: 12px;
}
.brand-filter-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 2px solid var(--light-gray);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
}
.brand-filter-item:hover {
border-color: var(--primary-green);
background: var(--light-green);
}
.brand-filter-item.active {
border-color: var(--primary-green);
background: var(--light-green);
}
.brand-filter-item input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary-green);
}
.brand-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
.brand-name {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--dark);
}
.brand-count {
font-size: 12px;
color: var(--medium-gray);
} .product-card {
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-orange) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.product-card:hover::before {
opacity: 0.05;
}
.product-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.product-image {
position: relative;
overflow: hidden;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.product-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.product-card:hover .product-image::after {
opacity: 1;
}
.product-image img {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover .product-image img {
transform: scale(1.15) rotate(2deg);
} .product-quick-actions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(20px);
opacity: 0;
display: flex;
gap: 10px;
z-index: 10;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card:hover .product-quick-actions {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.quick-action-btn {
width: 45px;
height: 45px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.quick-action-btn:hover {
background: var(--primary-green);
transform: scale(1.1);
}
.quick-action-btn:hover .svg-icon {
color: white;
}
.quick-action-btn .svg-icon {
width: 20px;
height: 20px;
color: var(--primary-green);
transition: var(--transition);
} @media (max-width: 1024px) {
.quick-view-body {
grid-template-columns: 1fr;
padding: 30px;
}
.mega-menu-content {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 30px;
}
.filters-sidebar {
position: static;
}
}
@media (max-width: 768px) {
.mega-menu-content {
grid-template-columns: 1fr;
}
.quick-view-body {
padding: 20px;
}
.quick-view-title {
font-size: 24px;
}
.quick-view-price-current {
font-size: 32px;
}
.countdown-value {
font-size: 24px;
}
.countdown-item {
min-width: 50px;
}
} .global-remove-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
align-items: center;
justify-content: center;
}
.global-remove-modal.active {
display: flex;
}
.global-remove-modal .modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.global-remove-modal .modal-content {
position: relative;
background: var(--white);
border-radius: 16px;
padding: 32px;
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: modalFadeIn 0.25s ease-out forwards;
}
@keyframes modalFadeIn {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.global-remove-modal .modal-overlay {
animation: overlayFadeIn 0.2s ease-out forwards;
}
@keyframes overlayFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.global-remove-modal .modal-icon {
width: 72px;
height: 72px;
margin: 0 auto 20px;
background: #fff3cd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #856404;
}
.global-remove-modal .modal-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--dark);
margin: 0 0 12px 0;
}
.global-remove-modal .modal-message {
font-size: 15px;
color: var(--medium-gray);
margin: 0 0 24px 0;
line-height: 1.5;
}
.global-remove-modal .modal-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.global-remove-modal .modal-actions .btn {
min-width: 120px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.global-remove-modal .btn-outline {
background: transparent;
border: 2px solid var(--light-gray);
color: var(--dark);
}
.global-remove-modal .btn-outline:hover {
border-color: var(--primary-green);
color: var(--primary-green);
}
.global-remove-modal .btn-danger {
background: #dc3545;
border: none;
color: var(--white);
}
.global-remove-modal .btn-danger:hover {
background: #c82333;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
@media (max-width: 480px) {
.global-remove-modal .modal-content {
padding: 24px;
}
.global-remove-modal .modal-actions {
flex-direction: column;
}
.global-remove-modal .modal-actions .btn {
width: 100%;
}
}  .woocommerce-account .woocommerce {
max-width: 1400px;
margin: 0 auto;
padding: 40px 0 60px;
} .myaccount-page-header {
margin-bottom: 24px;
} .woocommerce-notices-wrapper:empty {
display: none;
} .woocommerce-message.woocommerce-message--info,
.woocommerce-Message.woocommerce-Message--info,
.woocommerce-info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 24px !important;
background: #f8f9fa !important;
border-radius: var(--radius-lg);
border-left: none !important;
}
.woocommerce-message.woocommerce-message--info a.button,
.woocommerce-Message.woocommerce-Message--info a.button,
.woocommerce-Message.woocommerce-Message--info .woocommerce-Button,
.woocommerce-info a.button {
margin-top: 16px;
} .woocommerce-EditAccountForm .form-row {
margin-bottom: 20px;
}
.woocommerce-EditAccountForm label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 14px;
color: #333;
}
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
width: 100%;
padding: 14px 16px;
border: 2px solid #e5e5e5;
border-radius: var(--radius-sm);
font-size: 15px;
transition: all 0.2s ease;
}
.woocommerce-EditAccountForm input:focus {
outline: none;
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(124, 172, 50, 0.1);
}
.woocommerce-EditAccountForm em {
display: block;
margin-top: 6px;
font-size: 13px;
color: #666;
}
.woocommerce-EditAccountForm fieldset {
margin-top: 30px;
padding: 24px;
border: 2px solid #e5e5e5;
border-radius: var(--radius-lg);
}
.woocommerce-EditAccountForm legend {
padding: 0 12px;
font-weight: 600;
font-size: 16px;
}
.woocommerce-EditAccountForm button[type="submit"] {
margin-top: 30px;
padding: 16px 32px;
background: var(--primary-green);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.woocommerce-EditAccountForm button[type="submit"]:hover {
background: var(--primary-green-dark);
transform: translateY(-1px);
}
.myaccount-page-header .page-title {
font-family: var(--font-display);
font-size: 48px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0;
text-align: left;
color: var(--text-primary);
}
.myaccount-page-header .page-title .highlight {
color: var(--primary-green);
} .myaccount-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
} .woocommerce-MyAccount-navigation {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
position: sticky;
top: 120px;
height: fit-content;
} .account-user-info {
padding: 30px;
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
color: var(--white);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.user-avatar {
margin-bottom: 16px;
}
.user-avatar img {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.3);
object-fit: cover;
}
.user-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-greeting {
font-size: 14px;
opacity: 0.9;
}
.user-name {
font-size: 20px;
font-weight: 700;
font-family: var(--font-accent);
}
.user-email {
font-size: 13px;
opacity: 0.8;
} .account-menu-list {
list-style: none;
padding: 12px;
margin: 0;
}
.account-menu-list li {
margin-bottom: 4px;
}
.account-menu-list li a {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: var(--radius-md);
color: var(--text-primary);
font-weight: 500;
transition: all 0.2s ease;
}
.account-menu-list li a:hover {
background: var(--light-gray);
color: var(--primary-green);
}
.account-menu-list li.is-active a {
background: rgba(124, 172, 50, 0.1);
color: var(--primary-green);
font-weight: 600;
}
.account-menu-list .menu-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
} .woocommerce-MyAccount-content {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 40px;
min-height: 500px;
} .account-dashboard {}
.dashboard-welcome {
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid var(--light-gray);
}
.dashboard-welcome h2 {
font-family: var(--font-accent);
font-size: 28px;
color: var(--text-primary);
margin-bottom: 12px;
}
.dashboard-welcome p {
color: var(--text-secondary);
font-size: 15px;
line-height: 1.7;
}
.dashboard-welcome a {
color: var(--primary-green);
font-weight: 500;
}
.dashboard-welcome a:hover {
text-decoration: underline;
} .dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.dashboard-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.dashboard-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.dashboard-card .card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: linear-gradient(135deg, var(--primary-green), #5a8c28);
border-bottom: none;
}
.dashboard-card .card-header .svg-icon {
width: 24px;
height: 24px;
color: #fff;
}
.dashboard-card .card-header h3 {
font-size: 16px;
font-weight: 600;
color: #fff;
margin: 0;
}
.dashboard-card .card-content {
padding: 20px;
}
.dashboard-card .no-data {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 16px;
}
.dashboard-card .card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-green);
font-weight: 500;
font-size: 14px;
margin-top: 16px;
}
.dashboard-card .card-link:hover {
gap: 12px;
}
.dashboard-card .card-link .svg-icon {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
} .recent-orders-list {
list-style: none;
padding: 0;
margin: 0;
}
.recent-orders-list .order-item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: #f8f9fa;
border-radius: var(--radius-sm);
margin-bottom: 10px;
border: 1px solid #eee;
}
.recent-orders-list .order-info {
flex: 1;
}
.recent-orders-list .order-number {
display: block;
font-weight: 600;
color: var(--text-primary);
font-size: 14px;
}
.recent-orders-list .order-date {
font-size: 12px;
color: var(--text-secondary);
}
.recent-orders-list .order-total {
font-weight: 700;
color: var(--primary-green);
font-size: 14px;
} .status-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.status-pending,
.status-on-hold {
background: #fff3cd;
color: #856404;
}
.status-processing {
background: #cce5ff;
color: #004085;
}
.status-completed {
background: #d4edda;
color: #155724;
}
.status-cancelled,
.status-failed,
.status-refunded {
background: #f8d7da;
color: #721c24;
} .addresses-preview address {
font-style: normal;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-top: 8px;
} .dashboard-card .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.dashboard-card .btn-primary {
background: var(--primary-green);
color: #fff;
}
.dashboard-card .btn-primary:hover {
background: var(--primary-green-dark);
}
.dashboard-card .btn-outline {
background: transparent;
color: var(--primary-green);
border: 2px solid var(--primary-green);
}
.dashboard-card .btn-outline:hover {
background: var(--primary-green);
color: #fff;
}
.dashboard-card .btn-sm {
padding: 10px 20px;
font-size: 13px;
}
.address-block strong {
color: var(--text-primary);
font-size: 13px;
} .account-details-preview p {
font-size: 14px;
margin-bottom: 8px;
color: var(--text-secondary);
}
.account-details-preview strong {
color: var(--text-primary);
} .woocommerce-orders-table {
width: 100%;
border-collapse: collapse;
}
.woocommerce-orders-table th {
text-align: left;
padding: 16px;
background: var(--light-gray);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
color: var(--text-secondary);
border-bottom: 2px solid var(--primary-green);
}
.woocommerce-orders-table td {
padding: 16px;
border-bottom: 1px solid var(--light-gray);
vertical-align: middle;
}
.woocommerce-orders-table tbody tr:hover {
background: rgba(124, 172, 50, 0.05);
}
.woocommerce-orders-table .woocommerce-button {
display: inline-block;
padding: 8px 16px;
background: var(--primary-green);
color: var(--white);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
}
.woocommerce-orders-table .woocommerce-button:hover {
background: var(--secondary-green);
} .maver-orders {
width: 100%;
}
.maver-orders-table {
background: #fff;
border: 1px solid #eee;
border-radius: var(--radius-md, 14px);
overflow: hidden;
}
.maver-orders-head,
.maver-orders-row {
display: grid;
grid-template-columns: 1.1fr 1.3fr 1.3fr 1.5fr 2fr;
gap: 16px;
align-items: center;
padding: 18px 22px;
}
.maver-orders-head {
background: #f3f7ea;
border-bottom: 1px solid #e3ebd0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.maver-orders-row {
border-bottom: 1px solid #f0f0f0;
transition: background 0.15s ease;
}
.maver-orders-row:last-child {
border-bottom: 0;
}
.maver-orders-row:hover {
background: #fafbf5;
}
.maver-orders .col-number .order-number-link {
font-weight: 700;
color: var(--text-primary);
font-size: 15px;
text-decoration: none;
}
.maver-orders .col-number .order-number-link:hover {
color: var(--primary-green);
}
.maver-orders .col-date time {
color: var(--text-secondary);
font-size: 14px;
}
.maver-orders .col-total .total-amount {
display: block;
font-weight: 700;
color: var(--primary-green);
font-size: 15px;
}
.maver-orders .col-total .total-items {
display: block;
color: var(--text-secondary);
font-size: 12px;
margin-top: 2px;
}
.maver-orders .order-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.maver-orders .order-action {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: var(--radius-sm, 10px);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.15s ease;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.2;
}
.maver-orders .order-action.btn-pay {
background: var(--primary-green);
color: #fff;
}
.maver-orders .order-action.btn-pay:hover {
background: var(--primary-green-dark, #5f8c26);
}
.maver-orders .order-action.btn-view {
background: #fff;
color: var(--primary-green);
border-color: var(--primary-green);
}
.maver-orders .order-action.btn-view:hover {
background: var(--primary-green);
color: #fff;
}
.maver-orders .order-action.btn-cancel {
background: #fff;
color: #b42318;
border-color: #fecdca;
}
.maver-orders .order-action.btn-cancel:hover {
background: #fef3f2;
border-color: #f97066;
}
.maver-orders .no-actions {
color: var(--text-secondary);
font-size: 14px;
}
.maver-orders-pagination {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 20px;
}
.maver-orders-empty {
text-align: center;
padding: 60px 20px;
background: #fff;
border: 1px dashed #e3ebd0;
border-radius: var(--radius-md, 14px);
}
.maver-orders-empty .empty-icon {
width: 64px;
height: 64px;
color: #bbb;
margin-bottom: 16px;
}
.maver-orders-empty h3 {
font-size: 20px;
color: var(--text-primary);
margin: 0 0 8px;
}
.maver-orders-empty p {
color: var(--text-secondary);
font-size: 14px;
margin: 0 0 24px;
} @media (max-width: 768px) {
.maver-orders-head {
display: none;
}
.maver-orders-row {
display: block;
padding: 16px 18px;
}
.maver-orders-row > div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px 0;
}
.maver-orders-row > div::before {
content: attr(data-label);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.maver-orders-row .col-actions {
display: block;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
margin-top: 4px;
}
.maver-orders-row .col-actions::before {
display: block;
margin-bottom: 8px;
}
.maver-orders .order-actions {
justify-content: flex-start;
}
} .woocommerce-EditAccountForm {
max-width: 600px;
}
.woocommerce-EditAccountForm .form-row {
margin-bottom: 24px;
}
.woocommerce-EditAccountForm label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-primary);
}
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--light-gray);
border-radius: var(--radius-sm);
font-size: 15px;
transition: border-color 0.2s ease;
}
.woocommerce-EditAccountForm input:focus {
outline: none;
border-color: var(--primary-green);
}
.woocommerce-EditAccountForm fieldset {
border: 2px solid var(--light-gray);
border-radius: var(--radius-md);
padding: 24px;
margin-top: 30px;
}
.woocommerce-EditAccountForm legend {
font-weight: 700;
padding: 0 12px;
color: var(--text-primary);
}
.woocommerce-EditAccountForm .woocommerce-Button {
padding: 16px 32px;
background: var(--primary-green);
color: var(--white);
border: none;
border-radius: var(--radius-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.woocommerce-EditAccountForm .woocommerce-Button:hover {
background: var(--secondary-green);
transform: translateY(-2px);
} .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.woocommerce-Addresses .woocommerce-Address {
background: var(--light-gray);
padding: 24px;
border-radius: var(--radius-md);
}
.woocommerce-Addresses .woocommerce-Address-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #ddd;
}
.woocommerce-Addresses .woocommerce-Address-title h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.woocommerce-Addresses .woocommerce-Address-title .edit {
color: var(--primary-green);
font-size: 14px;
font-weight: 500;
}
.woocommerce-Addresses address {
font-style: normal;
line-height: 1.7;
color: var(--text-secondary);
} .woocommerce-address-fields .form-row {
margin-bottom: 20px;
}
.woocommerce-address-fields label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-primary);
}
.woocommerce-address-fields input,
.woocommerce-address-fields select {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--light-gray);
border-radius: var(--radius-sm);
font-size: 15px;
}
.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
outline: none;
border-color: var(--primary-green);
} .woocommerce-message,
.woocommerce-info {
padding: 20px 24px;
background: rgba(124, 172, 50, 0.1);
border-left: 4px solid var(--primary-green);
border-radius: var(--radius-sm);
margin-bottom: 24px;
}
.woocommerce-message a,
.woocommerce-info a {
color: var(--primary-green);
font-weight: 600;
} @media (max-width: 992px) {
.woocommerce-account .woocommerce {
padding: 30px 20px;
}
.myaccount-layout {
grid-template-columns: 1fr;
}
.myaccount-page-header .page-title {
font-size: 36px;
text-align: center;
}
.woocommerce-MyAccount-navigation {
position: static;
}
.account-user-info {
padding: 20px;
}
.user-avatar img {
width: 60px;
height: 60px;
}
.woocommerce-MyAccount-content {
padding: 24px;
}
}
@media (max-width: 576px) {
.myaccount-page-header .page-title {
font-size: 28px;
}
.dashboard-cards {
grid-template-columns: 1fr;
}
.recent-orders-list .order-item {
flex-wrap: wrap;
}
.woocommerce-orders-table {
display: block;
overflow-x: auto;
}
.woocommerce-Addresses {
grid-template-columns: 1fr;
}
} .woocommerce-account .account-section > .container > .page-title,
.woocommerce-account .woocommerce > .page-title,
.woocommerce-account .entry-title,
.woocommerce-account article > header {
display: none !important;
} .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 10px;
}
.woocommerce-Addresses .woocommerce-Address {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: all 0.3s ease;
}
.woocommerce-Addresses .woocommerce-Address:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.woocommerce-Address header.woocommerce-Address-title,
.woocommerce-Address-title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 20px 24px;
background: linear-gradient(135deg, var(--primary-green), #5a8c28);
border-bottom: none;
margin: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.woocommerce-Address-title h2 {
margin: 0 !important;
margin-right: auto !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #fff !important;
display: flex;
align-items: center;
gap: 10px;
}
.woocommerce-Address-title h2::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.woocommerce-Address header.woocommerce-Address-title a.edit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.woocommerce-Address header.woocommerce-Address-title a.edit:hover {
background: rgba(255, 255, 255, 0.3);
}
.woocommerce-Address header.woocommerce-Address-title a.edit::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.woocommerce-Address address {
padding: 24px;
font-style: normal;
line-height: 1.8;
color: var(--text-color);
font-size: 15px;
min-height: 140px;
}
.woocommerce-Address address:empty::before,
.woocommerce-Address .u-no-address-message {
content: 'Niste još uneli ovu adresu.';
color: #999;
font-style: italic;
}
.u-column1.woocommerce-Address address:empty::before {
content: 'Niste još uneli adresu za naplatu.';
}
.u-column2.woocommerce-Address address:empty::before {
content: 'Niste još uneli adresu za dostavu.';
} .woocommerce-Addresses + p,
.woocommerce-MyAccount-content > p:first-of-type {
color: #666;
font-size: 15px;
margin-bottom: 25px;
padding: 16px 20px;
background: #f8f9fa;
border-radius: var(--radius-sm);
border-left: 3px solid var(--primary-green);
} .woocommerce-Address a.add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 20px;
background: var(--primary-green);
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
margin-top: 10px;
}
.woocommerce-Address a.add:hover {
background: var(--primary-green-dark);
} .woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.woocommerce-address-fields .form-row {
margin-bottom: 0;
}
.woocommerce-address-fields .form-row-wide {
grid-column: 1 / -1;
}
.woocommerce-address-fields .form-row-first {
grid-column: 1;
}
.woocommerce-address-fields .form-row-last {
grid-column: 2;
}
.woocommerce-address-fields label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 14px;
color: #333;
}
.woocommerce-address-fields label .required {
color: var(--primary-green);
}
.woocommerce-address-fields label .optional {
color: #999;
font-weight: 400;
font-size: 12px;
}
.woocommerce-address-fields .woocommerce-input-wrapper {
display: block;
}
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields select,
.woocommerce-address-fields .select2-container {
width: 100% !important;
max-width: 100%;
}
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields select {
padding: 14px 16px;
border: 2px solid #e5e5e5;
border-radius: var(--radius-sm);
font-size: 15px;
transition: all 0.2s ease;
background: #fff;
box-sizing: border-box;
}
.woocommerce-address-fields .select2-container .select2-selection--single {
height: auto;
padding: 14px 16px;
border: 2px solid #e5e5e5;
border-radius: var(--radius-sm);
font-size: 15px;
background: #fff;
}
.woocommerce-address-fields .select2-container .select2-selection--single .select2-selection__rendered {
padding: 0;
line-height: 1.4;
color: #333;
}
.woocommerce-address-fields .select2-container .select2-selection--single .select2-selection__arrow {
height: 100%;
top: 0;
right: 10px;
}
.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
outline: none;
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(124, 172, 50, 0.1);
}
.woocommerce-address-fields button[type="submit"] {
margin-top: 24px;
padding: 16px 32px;
background: var(--primary-green);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.woocommerce-address-fields button[type="submit"]:hover {
background: var(--primary-green-dark);
transform: translateY(-1px);
} @media (max-width: 768px) {
.woocommerce-Addresses {
grid-template-columns: 1fr;
}
.woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr;
}
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last {
grid-column: 1;
}
}  .woocommerce-MyAccount-content > p:first-of-type mark,
.woocommerce-MyAccount-content .woocommerce-notice mark {
background: transparent;
color: var(--primary-green);
font-weight: 600;
}
.woocommerce-MyAccount-content > p:first-of-type {
padding: 20px 24px;
background: #f8f9fa;
border-left: 4px solid var(--primary-green);
border-radius: var(--radius-sm);
margin-bottom: 30px;
font-size: 15px;
line-height: 1.6;
}
.woocommerce-order-details {
margin-bottom: 30px;
}
.woocommerce-order-details__title,
.woocommerce-column__title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--primary-green);
} .woocommerce-MyAccount-content .order-again {
margin: 30px 0;
}
.woocommerce-MyAccount-content .order-again .button {
display: inline-flex;
align-items: center;
padding: 14px 28px;
background: var(--primary-green);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
text-transform: none;
cursor: pointer;
transition: all 0.2s ease;
}
.woocommerce-MyAccount-content .order-again .button:hover {
background: var(--primary-green-dark);
}
.woocommerce-table--order-details {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid #eee;
}
.woocommerce-table--order-details thead th {
background: linear-gradient(135deg, var(--primary-green), #5a8c28);
color: #fff;
font-weight: 600;
font-size: 14px;
}
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
background: #f8f9fa;
font-weight: 600;
}
.woocommerce-table--order-details .product-name a {
color: var(--primary-green);
font-weight: 500;
}
.woocommerce-customer-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 10px;
padding-top: 30px;
border-top: 1px solid #eee;
}
.woocommerce-customer-details .woocommerce-column__title {
font-size: 18px;
margin-bottom: 16px;
padding-bottom: 0;
border-bottom: none;
}
.woocommerce-column {
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.woocommerce-column address {
font-style: normal;
line-height: 1.8;
color: var(--text-secondary);
font-size: 15px;
}
@media (max-width: 768px) {
.woocommerce-customer-details {
grid-template-columns: 1fr;
}
}  .woocommerce-account:not(.logged-in) .account-section .page-title {
font-family: var(--font-display);
font-size: 48px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 40px;
color: var(--text-primary);
text-align: center;
}
.woocommerce-account .account-section .page-title .highlight {
color: var(--primary-green);
} .auth-container {
max-width: 480px;
margin: 0 auto;
} .auth-tabs {
display: flex;
background: #fff;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
overflow: hidden;
box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}
.auth-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px;
background: #f5f5f5;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: var(--text-secondary);
transition: all 0.3s ease;
}
.auth-tab .svg-icon {
width: 20px;
height: 20px;
}
.auth-tab:hover {
background: #eee;
}
.auth-tab.active {
background: #fff;
color: var(--primary-green);
} .auth-panel {
display: none;
background: #fff;
padding: 40px;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.auth-panel.active {
display: block;
}
.auth-panel-header {
text-align: center;
margin-bottom: 32px;
}
.auth-panel-header h2 {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.auth-panel-header p {
color: var(--text-secondary);
font-size: 15px;
} .auth-panel .form-group {
margin-bottom: 20px;
}
.auth-panel label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
font-size: 14px;
}
.auth-panel label .required {
color: #e53935;
}
.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
width: 100%;
padding: 14px 16px;
border: 2px solid #e5e5e5;
border-radius: var(--radius-md);
font-size: 15px;
transition: all 0.3s ease;
background: #fafafa;
}
.auth-panel input:focus {
outline: none;
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
background: #fff;
} .form-row-flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.auth-panel .woocommerce-form-login__rememberme {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
margin: 0;
}
.auth-panel .woocommerce-form-login__rememberme input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary-green);
}
.auth-panel .woocommerce-form-login__rememberme span {
font-size: 14px;
color: var(--text-secondary);
}
.lost-password-link {
font-size: 14px;
color: var(--primary-green);
text-decoration: none;
transition: color 0.3s ease;
}
.lost-password-link:hover {
color: var(--primary-green-dark);
text-decoration: underline;
} .auth-panel .btn-full {
width: 100%;
padding: 16px 24px;
background: var(--primary-green);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.auth-panel .btn-full:hover {
background: var(--primary-green-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(45, 106, 79, 0.3);
} .privacy-checkbox {
margin-top: 10px;
}
.privacy-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 14px;
color: var(--text-secondary);
}
.privacy-label input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--primary-green);
flex-shrink: 0;
}
.privacy-label a {
color: var(--primary-green);
text-decoration: none;
}
.privacy-label a:hover {
text-decoration: underline;
} .auth-panel .woocommerce-privacy-policy-text,
.auth-container .woocommerce-privacy-policy-text {
display: none !important;
} .woocommerce-error a[href*="lost-password"],
.woocommerce-error a[href*="lostpassword"],
.auth-container .woocommerce-error a {
display: none !important;
} .auth-switch {
text-align: center;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--border-color);
}
.auth-switch p {
color: var(--text-secondary);
font-size: 14px;
margin: 0;
}
.auth-switch a {
color: var(--primary-green);
font-weight: 600;
text-decoration: none;
}
.auth-switch a:hover {
text-decoration: underline;
} @media (max-width: 576px) {
.auth-container {
margin: 0 15px;
}
.auth-panel {
padding: 30px 20px;
}
.auth-tab {
padding: 16px 12px;
font-size: 14px;
}
.form-row-flex {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.woocommerce-account:not(.logged-in) .account-section .page-title {
font-size: 28px;
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.woocommerce-account:not(.logged-in) .account-section .page-title {
font-size: 36px;
}
} .u-columns.col2-set {
display: none; grid-template-columns: repeat(2, 1fr);
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}
.u-columns.col2-set .u-column1,
.u-columns.col2-set .u-column2 {
background: #fff;
padding: 40px;
border-radius: var(--radius-lg);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.u-columns.col2-set h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 24px;
color: var(--text-primary);
} .lost-password-container {
max-width: 420px;
}
.lost-password-container .auth-panel {
border-radius: var(--radius-lg);
}
.auth-icon {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.auth-icon svg {
width: 56px;
height: 56px;
padding: 12px;
background: linear-gradient(135deg, rgba(45, 106, 79, 0.1), rgba(45, 106, 79, 0.05));
border-radius: 50%;
color: var(--primary-green);
}
.lost-password-container .auth-panel-header p {
font-size: 14px;
} .lost-password-container .woocommerce-ResetPassword {
background: transparent;
padding: 0;
box-shadow: none;
max-width: 100%;
}
.lost-password-container input[type="text"] {
width: 100%;
padding: 14px 16px;
border: 2px solid #e5e5e5;
border-radius: var(--radius-md);
font-size: 15px;
background: #fafafa;
transition: all 0.3s ease;
}
.lost-password-container input:focus {
outline: none;
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
background: #fff;
} .search-results .page-title {
font-size: 36px;
margin-bottom: 30px;
}
.search-results .page-title span {
color: var(--primary-green);
}
.woocommerce-result-count {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 20px;
} .woocommerce-info.woocommerce-no-products-found {
text-align: center;
padding: 60px 40px;
background: #f8f9fa;
border-radius: var(--radius-lg);
border-left: none;
} .woocommerce-order-received .woocommerce-notice--success {
background: linear-gradient(135deg, var(--primary-green), #5a8c28);
color: #fff;
padding: 30px;
border-radius: var(--radius-lg);
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
}
.woocommerce-order-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
list-style: none;
padding: 30px;
margin: 0 0 40px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.woocommerce-order-overview li {
text-align: center;
padding: 15px;
border-right: 1px solid #eee;
}
.woocommerce-order-overview li:last-child {
border-right: none;
}
.woocommerce-order-overview li strong {
display: block;
font-size: 18px;
color: var(--primary-green);
margin-top: 8px;
}
@media (max-width: 768px) {
.woocommerce-order-overview li {
border-right: none;
border-bottom: 1px solid #eee;
}
.woocommerce-order-overview li:last-child {
border-bottom: none;
}
} .footer-company-info {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
margin-top: 15px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px;
}
.footer-company-info strong {
color: var(--white);
font-weight: 600;
} .footer-contact a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: var(--transition-fast);
}
.footer-contact a:hover {
color: var(--primary-green);
} .footer-map-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 15px;
padding: 10px 16px;
background: var(--primary-green);
color: var(--white);
text-decoration: none;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
transition: var(--transition);
}
.footer-map-link:hover {
background: var(--secondary-green);
transform: translateY(-2px);
}
.footer-map-link .svg-icon {
width: 16px;
height: 16px;
} @media (max-width: 1024px) { #mobileToggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
border: 0;
color: var(--dark);
cursor: pointer;
position: relative;
z-index: 9999;
}
#mobileToggle .svg-icon {
width: 24px;
height: 24px;
transition: transform 0.2s ease, opacity 0.2s ease;
} #mobileToggle .icon-close { display: none !important; }
#mobileToggle .icon-open { display: block; } body.menu-open #mobileToggle {
opacity: 0;
pointer-events: none;
} #sidebarOverlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999998;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
pointer-events: none;
display: block;
}
body.menu-open #sidebarOverlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.25s ease;
} body.menu-open .products-page-section,
body.menu-open .products-hero,
body.menu-open main,
body.menu-open .hero,
body.sidebar-open .products-page-section,
body.sidebar-open .products-hero,
body.sidebar-open main,
body.sidebar-open .hero {
z-index: auto !important;
} body.menu-open .header,
body.menu-open .header.sticky,
body.sidebar-open .header,
body.sidebar-open .header.sticky {
z-index: 100 !important;
} .nav-menu#navMenu,
nav#navMenu.nav-menu {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: min(360px, 88vw) !important;
max-width: 360px !important;
height: 100vh !important;
max-height: 100vh !important;
background: #fff !important;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;
padding: 88px 0 32px !important;
margin: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
transform: translateX(110%) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 999999 !important;
-webkit-overflow-scrolling: touch;
}
.nav-menu#navMenu.active,
nav#navMenu.nav-menu.active {
transform: translateX(0) !important;
}
body.menu-open {
overflow: hidden;
} .nav-menu#navMenu::before {
content: 'MENI';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 64px;
display: flex;
align-items: center;
padding: 0 24px;
font-family: var(--font-accent);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--primary-green);
background: #fff;
border-bottom: 1px solid #f0f0f0;
z-index: 1;
} .nav-menu .nav-search {
display: block !important;
position: relative;
padding: 12px 18px 6px;
margin-bottom: 4px;
border-bottom: 1px solid #f0f0f0;
background: #fafbf6;
} .nav-menu .nav-search-suggestions {
top: calc(100% - 2px);
left: 14px;
right: 14px;
z-index: 10;
max-height: 60vh;
}
.nav-menu .nav-search-suggestions .suggestions-content {
max-height: calc(60vh - 50px);
}
.nav-menu .nav-search form {
position: relative;
display: flex;
align-items: center;
}
.nav-menu .nav-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #888;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.nav-menu .nav-search-icon .svg-icon {
width: 16px;
height: 16px;
}
.nav-menu .nav-search-input {
width: 100%;
height: 40px;
padding: 0 16px 0 38px;
border: 1px solid #e6e6e6;
border-radius: 10px;
font-size: 14px;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-menu .nav-search-input:focus {
outline: none;
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(124, 172, 50, 0.12);
} #navClose {
display: flex !important;
position: absolute;
top: 12px;
right: 14px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: #f0f7e8;
color: var(--primary-green);
border: 0;
border-radius: 50%;
cursor: pointer;
z-index: 2;
transition: background 0.15s ease, color 0.15s ease;
padding: 0;
}
#navClose:hover,
#navClose:active {
background: var(--primary-green);
color: #fff;
}
#navClose .svg-icon {
width: 18px;
height: 18px;
} .nav-menu .nav-list {
list-style: none;
margin: 0;
padding: 0;
display: block !important;
flex-direction: column;
}
.nav-menu .nav-item {
display: block;
width: 100%;
margin: 0;
border-bottom: 1px solid #f3f4f3;
}
.nav-menu .nav-link {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 18px 24px !important;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dark);
text-decoration: none;
background: transparent;
transition: background 0.15s ease, color 0.15s ease;
line-height: 1;
}
.nav-menu .nav-link:hover,
.nav-menu .nav-link:active {
background: #f0f7e8;
color: var(--primary-green);
}
.nav-menu .nav-link .nav-arrow {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.nav-menu .has-mega-menu.is-open > .nav-link .nav-arrow {
transform: rotate(180deg);
} .nav-menu .has-mega-menu .mega-menu,
.nav-menu .has-mega-menu:hover .mega-menu,
#navMenu .mega-menu,
#megaMenu {
position: static !important;
display: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
background: #fafbf6 !important;
box-shadow: none !important;
border: 0 !important;
border-top: 1px solid #f0f0f0 !important;
padding: 8px 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
top: auto !important;
left: auto !important;
right: auto !important;
z-index: auto !important;
}
.nav-menu .has-mega-menu.is-open > .mega-menu,
.nav-menu .has-mega-menu.is-open #megaMenu {
display: block !important;
}
.nav-menu .mega-menu::before {
display: none !important;
}
.nav-menu .mega-menu-container {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nav-menu .mega-menu-grid {
display: block !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.nav-menu .mega-menu-column {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid #ececec !important;
}
.nav-menu .mega-menu-column:last-child {
border-bottom: 0 !important;
} .nav-menu .mega-menu-title {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 14px 24px 14px 36px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--dark) !important;
background: transparent;
margin: 0 !important;
position: relative;
text-decoration: none;
}
.nav-menu .mega-menu-title::after {
content: '+';
font-size: 18px;
font-weight: 400;
color: var(--primary-green);
line-height: 1;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.nav-menu .mega-menu-column.is-open > .mega-menu-title::after {
content: '−';
}
.nav-menu .mega-menu-title::before {
display: none !important;
} .nav-menu .mega-menu-list {
list-style: none !important;
margin: 0 !important;
padding: 0 0 8px 0 !important;
display: none !important;
}
.nav-menu .mega-menu-column.is-open > .mega-menu-list {
display: block !important;
}
.nav-menu .mega-menu-list li {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.nav-menu .mega-menu-list a {
display: block !important;
padding: 10px 24px 10px 48px !important;
font-size: 14px !important;
font-weight: 400 !important;
text-transform: none !important;
color: var(--text-secondary, #555) !important;
background: transparent !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
.nav-menu .mega-menu-list a::before {
display: none !important;
}
.nav-menu .mega-menu-list a:hover,
.nav-menu .mega-menu-list a:active {
background: #f0f7e8 !important;
color: var(--primary-green) !important;
} .nav-menu .mega-menu-footer {
padding: 14px 24px !important;
border-top: 1px solid #ececec !important;
background: transparent;
margin: 0 !important;
}
.nav-menu .mega-menu-all-link {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 10px 18px !important;
background: var(--primary-green);
color: #fff !important;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
}
} @media (min-width: 1025px) {
#mobileToggle,
#navClose {
display: none !important;
}
#sidebarOverlay {
display: none !important;
}
} @media (max-width: 768px) {
#cart-dropdown,
.cart-dropdown {
width: 100% !important;
max-width: 100% !important;
right: -100% !important;
}
#cart-dropdown.active,
.cart-dropdown.active {
right: 0 !important;
} #account-dropdown,
#wishlist-dropdown,
.account-dropdown,
.wishlist-dropdown {
width: 100% !important;
max-width: 100% !important;
right: -100% !important;
}
#account-dropdown.active,
#wishlist-dropdown.active,
.account-dropdown.active,
.wishlist-dropdown.active {
right: 0 !important;
}
} @media (max-width: 768px) { .hero {
min-height: 420px !important;
height: auto !important;
padding: 0 !important;
}
.hero-content {
display: flex;
align-items: center;
padding: 24px 0;
}
.hero-text {
padding: 0 4px;
}
.hero-title {
font-size: 32px !important;
letter-spacing: 2px;
margin-bottom: 14px !important;
}
.hero-subtitle {
font-size: 11px !important;
letter-spacing: 2px;
margin-bottom: 10px !important;
}
.hero-description {
font-size: 14px !important;
line-height: 1.55;
margin-bottom: 20px !important;
}
.hero-cta .btn {
padding: 12px 24px;
font-size: 13px;
letter-spacing: 1px;
}
.hero-nav,
.hero-nav-btn {
display: none !important;
}
.hero-dots {
bottom: 16px;
}
.features {
padding: 48px 0 !important;
}
.features-grid {
gap: 16px !important;
}
.products-section {
padding: 48px 0 !important;
}
.section-header {
padding: 0 !important;
margin-bottom: 18px !important;
text-align: center;
}
.section-header::before {
display: none !important;
}
.section-title {
font-size: 22px !important;
margin-bottom: 6px;
}
.section-label {
font-size: 11px;
margin-bottom: 8px;
padding: 8px 18px;
}
.section-cta {
margin-top: 24px !important;
} .products-section {
overflow-x: hidden;
} .section-filters {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin: 12px -16px 0 !important;
padding: 2px 16px 8px !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: flex-start !important;
white-space: nowrap;
text-align: left;
}
.section-filters::-webkit-scrollbar {
display: none;
}
.section-filters .filter-btn {
flex: 0 0 auto;
padding: 7px 14px !important;
font-size: 11px !important;
letter-spacing: 0.5px !important;
border-width: 1px !important;
white-space: nowrap;
line-height: 1.2;
}
}
@media (max-width: 480px) {
.hero {
min-height: 360px !important;
}
.hero-title {
font-size: 26px !important;
letter-spacing: 1.5px;
}
.hero-description {
font-size: 13px !important;
}
.features,
.products-section {
padding: 36px 0 !important;
}
.section-title {
font-size: 22px !important;
}
} .entry-content iframe,
.post-content iframe,
.single-product iframe,
.woocommerce-product-details__short-description iframe,
.woocommerce-Tabs-panel iframe,
article iframe,
.tab-pane iframe {
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: 12px;
}
.entry-content img,
.post-content img,
.woocommerce-product-details__short-description img,
.woocommerce-Tabs-panel img,
article img {
max-width: 100%;
height: auto;
} .wp-block-embed,
.wp-block-embed__wrapper,
.wp-embed-aspect-16-9 {
max-width: 100%;
}
.wp-block-embed iframe,
.wp-block-embed__wrapper iframe {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9;
height: auto !important;
} @media (max-width: 768px) {
.about-text,
.about-images,
[class*="fadeInLeft"],
[class*="fadeInRight"] {
animation-name: fadeIn !important;
} html,
body {
overflow-x: hidden;
max-width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-content,
.about-text,
.about-images,
.products-section,
[class*="fadeIn"] {
animation: none !important;
}
}