:root {
--green: #204f35;
--green-dark: #163927;
--yellow: #f5c400;
--yellow-dark: #d7ab00;
--text: #172019;
--muted: #667085;
--bg: #f8f7f2;
--white: #ffffff;
--border: #e6e3d8;
--shadow: 0 10px 30px rgba(0,0,0,.08);
--radius: 18px;
--container: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: Arial, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(100% - 32px, var(--container)); margin: 0 auto; }
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,.96);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(10px);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 0;
}
.site-logo img { max-height: 52px; width: auto; }
.header-right {
display: flex;
align-items: center;
gap: 14px;
}
.header-cart {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--green);
color: #fff;
padding: 12px 16px;
border-radius: 999px;
font-weight: 700;
}
.cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--yellow);
color: #111;
}
.hero {
padding: 56px 0 40px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 36px;
align-items: center;
}
.hero-badge {
display: inline-block;
background: #ebf5ee;
color: var(--green);
border: 1px solid #cfe4d6;
border-radius: 999px;
padding: 8px 14px;
font-weight: 700;
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(40px, 6vw, 68px);
line-height: .98;
margin: 0 0 16px;
}
.hero-subtitle {
font-size: 20px;
color: #394742;
max-width: 600px;
margin-bottom: 18px;
}
.hero-trust-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 20px 0 26px;
}
.hero-trust-row span,
.product-benefits li,
.product-extra-trust div {
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
padding: 10px 14px;
box-shadow: var(--shadow);
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-image img {
border-radius: 28px;
box-shadow: var(--shadow);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 28px;
border-radius: 14px;
font-size: 18px;
font-weight: 800;
transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--yellow);
color: #111;
box-shadow: 0 8px 24px rgba(245,196,0,.25);
}
.btn-primary:hover { background: var(--yellow-dark); }
.btn-secondary {
background: #fff;
border: 1px solid var(--border);
}
.btn-full { width: 100%; }
.section-heading {
text-align: center;
margin-bottom: 28px;
}
.section-heading h2,
.top-products h2,
.single-product-description h2,
.related-products-section h2 {
font-size: clamp(30px, 4vw, 46px);
margin: 0 0 12px;
}
.top-products,
.why-us,
.related-products-section,
.single-product-description,
.page-default,
.shop-archive,
.shop-layout,
.single-product-page,
.content-default {
padding: 24px 0 56px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.product-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow);
}
.product-card-content {
padding: 18px;
}
.product-card h3,
.product-card h2 {
margin: 0 0 10px;
font-size: 28px;
}
.price-row,
.single-price {
font-size: 38px;
font-weight: 800;
color: #b42318;
margin-bottom: 14px;
}
.product-benefits {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.product-benefits li {
border-radius: 12px;
box-shadow: none;
}
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.why-card,
.tab-box,
.page-content {
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
padding: 24px;
box-shadow: var(--shadow);
}
.single-product-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.product-badge {
display: inline-block;
background: #ebf5ee;
color: var(--green);
padding: 8px 14px;
border-radius: 999px;
font-weight: 700;
margin-bottom: 12px;
}
.product-title {
font-size: clamp(34px, 5vw, 54px);
line-height: 1.05;
margin: 0 0 12px;
}
.single-product-cart-box {
margin: 24px 0;
padding: 20px;
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
box-shadow: var(--shadow);
}
.product-extra-trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tabs-like {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.site-footer {
background: var(--green-dark);
color: #fff;
padding-top: 46px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 28px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 24px;
padding: 18px 0;
}
.site-footer a { color: #fff; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.search-form input[type="search"] {
width: 100%;
min-height: 52px;
border: 1px solid var(--border);
border-radius: 12px;
padding: 0 14px;
font-size: 16px;
}
.search-form {
display: flex;
gap: 8px;
}
.search-form button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
#place_order {
background: var(--yellow) !important;
color: #111 !important;
border-radius: 12px !important;
min-height: 52px;
font-weight: 800 !important;
border: 0 !important;
}
.woocommerce .quantity .qty {
min-height: 48px;
border-radius: 10px;
border: 1px solid var(--border);
}
.kk-b2b-box {
margin-top: 24px;
padding: 20px;
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
}
@media (max-width: 1024px) {
.hero-grid,
.single-product-grid,
.tabs-like,
.footer-grid,
.why-grid,
.product-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.header-inner,
.header-right,
.hero-actions,
.hero-trust-row,
.product-extra-trust {
flex-direction: column;
align-items: stretch;
}
.hero-grid,
.single-product-grid,
.tabs-like,
.footer-grid,
.why-grid,
.product-grid {
grid-template-columns: 1fr;
}
.hero {
padding-top: 28px;
}
.hero h1,
.product-title {
font-size: 36px;
}
.price-row,
.single-price {
font-size: 32px;
}
.header-cart {
width: 100%;
justify-content: center;
}
}
}
.sticky-add-to-cart {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
border-top: 1px solid #ddd;
padding: 10px;
z-index: 9999;
}
.sticky-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.sticky-price {
font-size: 20px;
font-weight: bold;
color: #b42318;
}
}
.urgency-box {
background: #fff3cd;
border: 1px solid #ffeeba;
padding: 12px;
border-radius: 8px;
margin: 15px 0;
font-weight: 600;
}
}