:root { --zy-bamboo: #2D5A27;
--zy-bamboo-light: #4A7C43;
--zy-bamboo-dark: #1E3D1A;
--zy-leaf: #7CB342;
--zy-leaf-light: #9CCC65;
--zy-mint: #E8F5E9;
--zy-sage: #A5D6A7; --zy-ink: #212121;
--zy-carbon: #424242;
--zy-stone: #757575;
--zy-pebble: #BDBDBD;
--zy-cloud: #E0E0E0;
--zy-mist: #F5F5F5;
--zy-snow: #FAFAFA;
--zy-pure: #FFFFFF; --zy-success: #43A047;
--zy-warning: #FB8C00;
--zy-error: #E53935;
--zy-info: #1E88E5; --zy-font: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
--zy-font-mono: 'SF Mono', Consolas, monospace; --zy-xs: 0.75rem;
--zy-sm: 0.875rem;
--zy-base: 1rem;
--zy-lg: 1.125rem;
--zy-xl: 1.25rem;
--zy-2xl: 1.5rem;
--zy-3xl: 2rem;
--zy-4xl: 2.5rem;
--zy-5xl: 3rem; --zy-1: 0.25rem;
--zy-2: 0.5rem;
--zy-3: 0.75rem;
--zy-4: 1rem;
--zy-5: 1.25rem;
--zy-6: 1.5rem;
--zy-8: 2rem;
--zy-10: 2.5rem;
--zy-12: 3rem;
--zy-16: 4rem;
--zy-20: 5rem; --zy-round-sm: 4px;
--zy-round: 8px;
--zy-round-lg: 12px;
--zy-round-xl: 20px;
--zy-round-full: 9999px; --zy-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--zy-shadow: 0 2px 8px rgba(0,0,0,0.08);
--zy-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--zy-shadow-xl: 0 16px 48px rgba(0,0,0,0.16); --zy-ease: cubic-bezier(0.4, 0, 0.2, 1);
--zy-duration: 0.2s;
--zy-duration-slow: 0.4s; --zy-nav-height: 64px;
--zy-content-max: 1280px;
} *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--zy-font);
font-size: var(--zy-base);
line-height: 1.6;
color: var(--zy-ink);
background: var(--zy-snow);
min-height: 100vh;
padding-bottom: var(--zy-nav-height);
}
a {
color: inherit;
text-decoration: none;
transition: color var(--zy-duration) var(--zy-ease);
}
a:hover {
color: var(--zy-bamboo);
}
img {
max-width: 100%;
height: auto;
display: block;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
ul, ol {
list-style: none;
} .zy-wrap {
width: 100%;
max-width: var(--zy-content-max);
margin: 0 auto;
padding: 0 var(--zy-4);
}
.zy-section {
padding: var(--zy-10) 0;
} .zy-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--zy-pure);
border-bottom: 1px solid var(--zy-cloud);
}
.zy-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--zy-nav-height);
gap: var(--zy-4);
}
.zy-logo {
flex-shrink: 0;
}
.zy-logo img {
height: 36px;
width: auto;
}
.zy-logo-text {
font-size: var(--zy-xl);
font-weight: 700;
color: var(--zy-bamboo);
letter-spacing: 0.05em;
} .zy-search {
flex: 1;
max-width: 480px;
position: relative;
}
.zy-search input {
width: 100%;
height: 44px;
padding: 0 var(--zy-12) 0 var(--zy-4);
border: 2px solid var(--zy-cloud);
border-radius: var(--zy-round-full);
font-size: var(--zy-sm);
background: var(--zy-mist);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-search input:focus {
outline: none;
border-color: var(--zy-bamboo);
background: var(--zy-pure);
}
.zy-search button {
position: absolute;
right: var(--zy-3);
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--zy-stone);
transition: color var(--zy-duration) var(--zy-ease);
}
.zy-search button:hover {
color: var(--zy-bamboo);
} .zy-header-actions {
display: flex;
align-items: center;
gap: var(--zy-2);
}
.zy-action-btn {
position: relative;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--zy-round);
color: var(--zy-carbon);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-action-btn:hover {
background: var(--zy-mint);
color: var(--zy-bamboo);
}
.zy-action-btn .zy-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--zy-leaf);
color: var(--zy-pure);
font-size: 11px;
font-weight: 600;
border-radius: var(--zy-round-full);
display: flex;
align-items: center;
justify-content: center;
} .zy-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--zy-pure);
border-top: 1px solid var(--zy-cloud);
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.zy-bottom-nav-inner {
display: flex;
align-items: center;
justify-content: space-around;
height: var(--zy-nav-height);
max-width: 600px;
margin: 0 auto;
}
.zy-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--zy-1);
padding: var(--zy-2);
color: var(--zy-stone);
font-size: var(--zy-xs);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-nav-item svg {
width: 24px;
height: 24px;
}
.zy-nav-item.active,
.zy-nav-item:hover {
color: var(--zy-bamboo);
}
.zy-nav-item.active svg {
fill: var(--zy-mint);
}
.zy-nav-item .zy-badge {
position: absolute;
top: 0;
right: calc(50% - 20px);
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--zy-error);
color: var(--zy-pure);
font-size: 10px;
font-weight: 600;
border-radius: var(--zy-round-full);
} .zy-categories {
padding: var(--zy-4) 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.zy-categories::-webkit-scrollbar {
display: none;
}
.zy-category-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--zy-2);
padding: 0 var(--zy-4);
}
.zy-category-pill {
flex-shrink: 0;
padding: var(--zy-2) var(--zy-4);
background: var(--zy-pure);
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round-full);
font-size: var(--zy-sm);
color: var(--zy-carbon);
white-space: nowrap;
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-category-pill:hover,
.zy-category-pill.active {
background: var(--zy-bamboo);
border-color: var(--zy-bamboo);
color: var(--zy-pure);
} .zy-products {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--zy-4);
}
@media (min-width: 640px) {
.zy-products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.zy-products {
grid-template-columns: repeat(4, 1fr);
gap: var(--zy-6);
}
} .zy-product-card {
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
overflow: hidden;
transition: all var(--zy-duration-slow) var(--zy-ease);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
}
.zy-product-card:hover {
box-shadow: var(--zy-shadow-lg);
transform: translateY(-4px);
}
.zy-product-thumb {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--zy-mist);
flex-shrink: 0;
}
.zy-product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--zy-duration-slow) var(--zy-ease);
}
.zy-product-card:hover .zy-product-thumb img {
transform: scale(1.05);
}
.zy-product-tag {
position: absolute;
top: var(--zy-2);
left: var(--zy-2);
padding: var(--zy-1) var(--zy-2);
background: var(--zy-leaf);
color: var(--zy-pure);
font-size: var(--zy-xs);
font-weight: 600;
border-radius: var(--zy-round-sm);
}
.zy-product-tag.sale {
background: var(--zy-error);
}
.zy-product-wishlist {
position: absolute;
top: var(--zy-2);
right: var(--zy-2);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--zy-pure);
border-radius: var(--zy-round-full);
color: var(--zy-pebble);
box-shadow: var(--zy-shadow);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-product-wishlist:hover {
color: var(--zy-error);
transform: scale(1.1);
}
.zy-product-info {
padding: var(--zy-4);
flex: 1;
display: flex;
flex-direction: column;
min-height: 100px;
}
.zy-product-name {
font-size: var(--zy-base);
font-weight: 600;
color: var(--zy-ink);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: var(--zy-2);
flex: 1;
}
.zy-product-name a {
color: inherit;
text-decoration: none;
}
.zy-product-name a:hover {
color: var(--zy-bamboo);
}
.zy-product-price {
display: flex;
align-items: baseline;
gap: var(--zy-2);
flex-wrap: wrap;
}
.zy-price-current {
font-size: var(--zy-lg);
font-weight: 700;
color: var(--zy-bamboo);
}
.zy-price-original {
font-size: var(--zy-sm);
color: var(--zy-pebble);
text-decoration: line-through;
} .zy-product-actions {
padding: 0 var(--zy-4) var(--zy-4);
margin-top: auto;
}
.zy-quick-add {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--zy-2);
background: var(--zy-mint);
color: var(--zy-bamboo);
font-size: var(--zy-sm);
font-weight: 600;
border-radius: var(--zy-round);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-quick-add:hover {
background: var(--zy-bamboo);
color: var(--zy-pure);
} .zy-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--zy-6);
}
.zy-section-title {
font-size: var(--zy-2xl);
font-weight: 700;
color: var(--zy-ink);
position: relative;
padding-left: var(--zy-4);
}
.zy-section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 24px;
background: linear-gradient(180deg, var(--zy-bamboo), var(--zy-leaf));
border-radius: 2px;
}
.zy-section-link {
font-size: var(--zy-sm);
color: var(--zy-bamboo);
font-weight: 500;
display: flex;
align-items: center;
gap: var(--zy-1);
}
.zy-section-link:hover {
text-decoration: underline;
} .zy-slider-section {
background: linear-gradient(135deg, #1E3D1A 0%, #0f1f0d 100%);
padding: 0;
}
.zy-slider-wrap {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.zy-slider {
position: relative;
}
.zy-slide {
display: none;
background: transparent;
}
.zy-slide.active {
display: grid;
grid-template-columns: 1fr 1.2fr;
align-items: center;
gap: var(--zy-8);
padding: var(--zy-8) var(--zy-6);
animation: zyFadeIn 0.5s ease;
}
@keyframes zyFadeIn {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.zy-slide-image {
position: relative;
border-radius: var(--zy-round-lg);
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.zy-slide-image img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.zy-slide-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #2D5A27 0%, #1E3D1A 100%);
}
.zy-slide-content {
color: #fff;
padding: var(--zy-4) 0;
}
.zy-slide-title {
font-size: var(--zy-2xl);
font-weight: 700;
margin-bottom: var(--zy-4);
color: #9CCC65;
line-height: 1.3;
}
.zy-slide-desc {
font-size: var(--zy-base);
line-height: 1.8;
color: rgba(255,255,255,0.85);
margin-bottom: var(--zy-6);
}
.zy-slide-btn {
display: inline-flex;
align-items: center;
gap: var(--zy-2);
padding: var(--zy-3) var(--zy-6);
background: var(--zy-leaf);
color: #fff;
font-weight: 600;
border-radius: var(--zy-round);
transition: all var(--zy-duration) var(--zy-ease);
text-decoration: none;
}
.zy-slide-btn:hover {
background: var(--zy-leaf-light);
transform: translateX(4px);
color: #fff;
}
.zy-slider-dots {
display: flex;
justify-content: center;
gap: var(--zy-2);
padding-bottom: var(--zy-6);
}
.zy-slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.zy-slider-dot.active,
.zy-slider-dot:hover {
background: var(--zy-leaf);
transform: scale(1.2);
} @media (max-width: 768px) {
.zy-slide.active {
grid-template-columns: 1fr;
gap: var(--zy-4);
padding: var(--zy-4);
}
.zy-slide-image {
order: -1;
}
.zy-slide-title {
font-size: var(--zy-xl);
}
.zy-slide-desc {
font-size: var(--zy-sm);
}
} .zy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--zy-2);
padding: var(--zy-3) var(--zy-6);
font-size: var(--zy-sm);
font-weight: 600;
border-radius: var(--zy-round);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-btn-primary {
background: var(--zy-bamboo);
color: var(--zy-pure);
}
.zy-btn-primary:hover {
background: var(--zy-bamboo-dark);
color: var(--zy-pure);
}
.zy-btn-secondary {
background: var(--zy-mint);
color: var(--zy-bamboo);
}
.zy-btn-secondary:hover {
background: var(--zy-sage);
}
.zy-btn-outline {
background: transparent;
border: 2px solid var(--zy-bamboo);
color: var(--zy-bamboo);
}
.zy-btn-outline:hover {
background: var(--zy-bamboo);
color: var(--zy-pure);
}
.zy-btn-lg {
padding: var(--zy-4) var(--zy-8);
font-size: var(--zy-base);
}
.zy-btn-block {
width: 100%;
} .zy-card {
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
box-shadow: var(--zy-shadow-xs);
overflow: hidden;
}
.zy-card-header {
padding: var(--zy-4);
border-bottom: 1px solid var(--zy-cloud);
}
.zy-card-body {
padding: var(--zy-4);
}
.zy-card-footer {
padding: var(--zy-4);
border-top: 1px solid var(--zy-cloud);
background: var(--zy-mist);
} .zy-input {
width: 100%;
height: 48px;
padding: 0 var(--zy-4);
border: 2px solid var(--zy-cloud);
border-radius: var(--zy-round);
font-size: var(--zy-base);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-input:focus {
outline: none;
border-color: var(--zy-bamboo);
box-shadow: 0 0 0 3px var(--zy-mint);
}
.zy-input::placeholder {
color: var(--zy-pebble);
}
.zy-label {
display: block;
margin-bottom: var(--zy-2);
font-size: var(--zy-sm);
font-weight: 500;
color: var(--zy-carbon);
}
.zy-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
} .zy-footer {
background: var(--zy-ink);
color: var(--zy-pure);
padding: var(--zy-12) 0 calc(var(--zy-nav-height) + var(--zy-8));
}
.zy-footer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--zy-8);
}
@media (min-width: 768px) {
.zy-footer-grid {
grid-template-columns: 2fr repeat(3, 1fr);
}
}
.zy-footer-brand {
grid-column: span 2;
}
@media (min-width: 768px) {
.zy-footer-brand {
grid-column: span 1;
}
}
.zy-footer-logo {
font-size: var(--zy-xl);
font-weight: 700;
color: var(--zy-leaf);
margin-bottom: var(--zy-4);
}
.zy-footer-desc {
font-size: var(--zy-sm);
color: var(--zy-pebble);
line-height: 1.7;
}
.zy-footer-title {
font-size: var(--zy-base);
font-weight: 600;
margin-bottom: var(--zy-4);
color: var(--zy-pure);
}
.zy-footer-links {
display: flex;
flex-direction: column;
gap: var(--zy-3);
}
.zy-footer-links a {
font-size: var(--zy-sm);
color: var(--zy-pebble);
transition: color var(--zy-duration) var(--zy-ease);
}
.zy-footer-links a:hover {
color: var(--zy-leaf);
}
.zy-footer-bottom {
margin-top: var(--zy-8);
padding-top: var(--zy-6);
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
font-size: var(--zy-sm);
color: var(--zy-stone);
} .woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: var(--zy-4);
list-style: none;
margin: 0;
padding: 0;
} .woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none !important;
}
@media (min-width: 640px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(4, 1fr);
gap: var(--zy-6);
}
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
overflow: hidden;
transition: all var(--zy-duration-slow) var(--zy-ease);
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: auto !important;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.woocommerce ul.products li.product:hover {
box-shadow: var(--zy-shadow-lg);
transform: translateY(-4px);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
display: block;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
margin: 0 !important;
border-radius: 0;
aspect-ratio: 1;
object-fit: cover;
width: 100%;
height: auto;
background: var(--zy-mist);
} .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img.wp-post-image,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
min-height: 200px;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
font-size: var(--zy-base) !important;
font-weight: 600;
padding: var(--zy-4);
padding-bottom: var(--zy-2);
color: var(--zy-ink);
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.woocommerce ul.products li.product .price {
padding: 0 var(--zy-4) var(--zy-3);
color: var(--zy-bamboo);
font-weight: 700;
font-size: var(--zy-lg);
}
.woocommerce ul.products li.product .price del {
color: var(--zy-pebble);
font-weight: 400;
font-size: var(--zy-sm);
}
.woocommerce ul.products li.product .price ins {
text-decoration: none;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
margin: 0 var(--zy-4) var(--zy-4) !important;
width: calc(100% - var(--zy-8)) !important;
background: var(--zy-mint);
color: var(--zy-bamboo);
border-radius: var(--zy-round);
font-weight: 600;
text-align: center;
padding: var(--zy-3);
display: block;
text-decoration: none;
}
.woocommerce ul.products li.product .button:hover {
background: var(--zy-bamboo);
color: var(--zy-pure);
} .woocommerce span.onsale {
background: var(--zy-error) !important;
color: var(--zy-pure);
font-weight: 600;
border-radius: var(--zy-round-sm);
padding: var(--zy-1) var(--zy-2);
min-height: auto;
min-width: auto;
line-height: 1.4;
top: var(--zy-2);
left: var(--zy-2);
right: auto;
} .woocommerce ul.products li.product-category,
.woocommerce ul.products li.product.product-category {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
} .woocommerce ul.products li.product .woocommerce-placeholder,
.woocommerce ul.products li.product img[src*="placeholder"] {
aspect-ratio: 1;
object-fit: contain;
background: var(--zy-mist);
padding: 20%;
} .woocommerce .woocommerce-breadcrumb {
padding: var(--zy-4);
font-size: var(--zy-sm);
color: var(--zy-stone);
margin-bottom: var(--zy-4);
}
.woocommerce .woocommerce-breadcrumb a {
color: var(--zy-bamboo);
} .woocommerce .woocommerce-result-count {
margin-bottom: var(--zy-4);
color: var(--zy-stone);
}
.woocommerce .woocommerce-ordering {
margin-bottom: var(--zy-4);
}
.woocommerce .woocommerce-ordering select {
padding: var(--zy-2) var(--zy-3);
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
background: var(--zy-pure);
} .woocommerce .woocommerce-products-header__title {
font-size: var(--zy-2xl);
font-weight: 700;
color: var(--zy-ink);
margin-bottom: var(--zy-2);
} @media (max-width: 768px) { .woocommerce .woocommerce-breadcrumb {
padding: var(--zy-3);
font-size: var(--zy-sm);
margin-bottom: var(--zy-3);
} .woocommerce .woocommerce-products-header__title {
display: none;
} .woocommerce .woocommerce-result-count {
float: left !important;
width: auto !important;
margin: 0 0 var(--zy-3) var(--zy-3) !important;
font-size: var(--zy-sm);
line-height: 36px;
}
.woocommerce .woocommerce-ordering {
float: right !important;
width: auto !important;
margin: 0 var(--zy-3) var(--zy-3) 0 !important;
}
.woocommerce .woocommerce-ordering select {
padding: var(--zy-2) var(--zy-3);
font-size: var(--zy-sm);
}
.woocommerce ul.products {
clear: both;
} .woocommerce ul.products {
padding: 0 var(--zy-2);
}
.woocommerce ul.products li.product {
margin-bottom: var(--zy-3) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: var(--zy-sm);
padding: var(--zy-2);
}
.woocommerce ul.products li.product .price {
font-size: var(--zy-sm);
padding: 0 var(--zy-2) var(--zy-2);
}
.woocommerce ul.products li.product .button {
font-size: var(--zy-xs);
padding: var(--zy-2);
margin: 0 var(--zy-2) var(--zy-2);
} .woocommerce nav.woocommerce-pagination {
padding: var(--zy-4) var(--zy-3);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
padding: var(--zy-2) var(--zy-3);
font-size: var(--zy-sm);
}
} .woocommerce div.product {
padding: var(--zy-2) 0 var(--zy-6);
}
.woocommerce div.product div.images {
margin-bottom: var(--zy-4);
}
.woocommerce div.product div.images .flex-control-thumbs {
margin-top: var(--zy-4);
display: flex;
gap: var(--zy-2);
}
.woocommerce div.product div.images .flex-control-thumbs li {
margin: 0;
padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
border-radius: var(--zy-round);
border: 2px solid transparent;
transition: border-color 0.2s;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
border-color: var(--zy-bamboo);
} .woocommerce .woocommerce-breadcrumb {
margin-bottom: var(--zy-2);
padding-bottom: 0;
}
.woocommerce div.product div.images img {
border-radius: var(--zy-round-lg);
} .woocommerce div.product .summary {
padding: var(--zy-6);
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.woocommerce div.product .product_title {
font-size: var(--zy-2xl);
font-weight: 700;
color: var(--zy-ink);
margin-bottom: var(--zy-3);
padding-bottom: var(--zy-3);
border-bottom: 1px solid var(--zy-cloud);
}
.woocommerce div.product p.price {
font-size: var(--zy-2xl);
color: var(--zy-bamboo);
font-weight: 700;
margin-bottom: var(--zy-4);
padding: var(--zy-3);
background: var(--zy-mint);
border-radius: var(--zy-round);
display: inline-block;
}
.woocommerce div.product p.price del {
color: var(--zy-pebble);
font-size: var(--zy-lg);
}
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--zy-carbon);
line-height: 1.8;
margin-bottom: var(--zy-4);
padding: var(--zy-4);
background: var(--zy-snow);
border-radius: var(--zy-round);
border-left: 3px solid var(--zy-bamboo);
} .woocommerce div.product form.cart .variations {
margin-bottom: var(--zy-4);
}
.woocommerce div.product form.cart .variations tr {
display: flex;
align-items: center;
gap: var(--zy-3);
margin-bottom: var(--zy-2);
}
.woocommerce div.product form.cart .variations label {
font-weight: 600;
color: var(--zy-ink);
min-width: 80px;
}
.woocommerce div.product form.cart .variations select {
flex: 1;
padding: var(--zy-3);
border: 2px solid var(--zy-cloud);
border-radius: var(--zy-round);
background: var(--zy-pure);
font-size: var(--zy-base);
}
.woocommerce div.product form.cart .variations select:focus {
border-color: var(--zy-bamboo);
outline: none;
}
.woocommerce div.product form.cart .reset_variations {
color: var(--zy-stone);
font-size: var(--zy-sm);
} .woocommerce div.product form.cart .woocommerce-variation-price {
margin-bottom: var(--zy-4);
}
.woocommerce div.product form.cart .woocommerce-variation-price .price {
font-size: var(--zy-xl);
color: var(--zy-bamboo);
font-weight: 700;
} .woocommerce div.product form.cart {
margin-bottom: var(--zy-4);
display: flex;
align-items: center;
gap: var(--zy-3);
flex-wrap: wrap;
}
.woocommerce div.product form.cart .quantity {
margin-right: 0;
}
.woocommerce div.product form.cart .quantity .qty {
width: 70px;
height: 48px;
border: 2px solid var(--zy-cloud);
border-radius: var(--zy-round);
text-align: center;
font-size: var(--zy-base);
font-weight: 600;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
background: var(--zy-bamboo);
color: var(--zy-pure);
padding: var(--zy-4) var(--zy-8);
font-size: var(--zy-base);
font-weight: 600;
border-radius: var(--zy-round);
transition: all var(--zy-duration) var(--zy-ease);
flex: 1;
min-width: 150px;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
background: var(--zy-bamboo-dark);
transform: translateY(-2px);
} .woocommerce div.product .product_meta {
padding-top: var(--zy-4);
border-top: 1px solid var(--zy-cloud);
font-size: var(--zy-sm);
color: var(--zy-stone);
}
.woocommerce div.product .product_meta > span {
display: block;
margin-bottom: var(--zy-2);
}
.woocommerce div.product .product_meta a {
color: var(--zy-bamboo);
font-weight: 500;
}
.woocommerce div.product .product_meta a:hover {
text-decoration: underline;
} .woocommerce div.product .woocommerce-tabs {
margin-top: var(--zy-8);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0;
margin: 0 0 var(--zy-4) 0;
display: flex;
gap: var(--zy-2);
border-bottom: 2px solid var(--zy-cloud);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: none;
background: none;
padding: 0;
margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: var(--zy-3) var(--zy-4);
font-weight: 500;
color: var(--zy-stone);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--zy-bamboo);
border-bottom-color: var(--zy-bamboo);
}
.woocommerce div.product .woocommerce-tabs .panel {
background: var(--zy-pure);
padding: var(--zy-6);
border-radius: var(--zy-round-lg);
box-shadow: var(--zy-shadow-xs);
} .woocommerce-cart .zy-page-content {
max-width: 100%;
margin: 0 auto;
padding: var(--zy-6);
} @media (min-width: 1100px) {
.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: var(--zy-5);
align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper {
grid-column: 1 / -1;
}
.woocommerce-cart .woocommerce-cart-form {
grid-column: 1;
}
.woocommerce-cart .cart-collaterals {
grid-column: 2;
grid-row: 2;
position: sticky;
top: 100px;
}
}
@media (max-width: 991px) {
.woocommerce-cart .woocommerce-cart-form {
margin-bottom: var(--zy-6);
}
} .woocommerce table.shop_table {
border: none;
border-radius: var(--zy-round-lg);
overflow: hidden;
background: var(--zy-pure);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
width: 100%;
}
.woocommerce table.shop_table th {
background: var(--zy-bamboo);
color: var(--zy-pure);
font-weight: 600;
padding: var(--zy-4);
border: none;
font-size: var(--zy-sm);
text-align: left;
}
.woocommerce table.shop_table td {
padding: var(--zy-4);
border: none;
border-bottom: 1px solid var(--zy-cloud);
vertical-align: middle;
background: var(--zy-pure);
}
.woocommerce table.shop_table tr:last-child td {
border-bottom: none;
}
.woocommerce table.shop_table td.product-remove {
width: 40px;
text-align: center;
}
.woocommerce table.shop_table td.product-remove a {
color: var(--zy-pebble);
font-size: var(--zy-lg);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--zy-mist);
transition: all 0.2s;
}
.woocommerce table.shop_table td.product-remove a:hover {
color: var(--zy-pure);
background: var(--zy-error);
}
.woocommerce table.shop_table td.product-thumbnail {
width: 80px;
}
.woocommerce table.shop_table td.product-thumbnail img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: var(--zy-round);
border: 1px solid var(--zy-cloud);
}
.woocommerce table.shop_table td.product-name {
font-weight: 500;
}
.woocommerce table.shop_table td.product-name a {
color: var(--zy-ink);
}
.woocommerce table.shop_table td.product-name a:hover {
color: var(--zy-bamboo);
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
font-weight: 600;
color: var(--zy-bamboo);
} .woocommerce table.shop_table .quantity {
display: inline-flex;
align-items: center;
gap: var(--zy-1);
}
.woocommerce table.shop_table .quantity .qty {
width: 50px;
height: 36px;
text-align: center;
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
font-weight: 600;
} .woocommerce .coupon {
display: flex;
gap: var(--zy-2);
align-items: center;
flex-wrap: wrap;
}
.woocommerce .coupon input[type="text"] {
flex: 1;
min-width: 150px;
padding: var(--zy-3);
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
}
.woocommerce .coupon button {
padding: var(--zy-3) var(--zy-4);
background: var(--zy-ink);
color: var(--zy-pure);
border-radius: var(--zy-round);
font-weight: 600;
white-space: nowrap;
}
.woocommerce .coupon button:hover {
background: var(--zy-carbon);
} .woocommerce table.shop_table .actions {
padding: var(--zy-4);
background: var(--zy-snow);
}
.woocommerce table.shop_table .actions button[name="update_cart"] {
float: right;
padding: var(--zy-3) var(--zy-5);
background: var(--zy-mist);
color: var(--zy-carbon);
border-radius: var(--zy-round);
font-weight: 500;
}
.woocommerce table.shop_table .actions button[name="update_cart"]:hover {
background: var(--zy-bamboo);
color: var(--zy-pure);
} .woocommerce .cart_totals {
background: var(--zy-pure);
padding: var(--zy-6);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
width: 100%;
min-width: 350px;
}
.woocommerce .cart_totals h2 {
font-size: var(--zy-xl);
font-weight: 700;
margin-bottom: var(--zy-5);
padding-bottom: var(--zy-3);
border-bottom: 2px solid var(--zy-bamboo);
color: var(--zy-ink);
}
.woocommerce .cart_totals table {
width: 100%;
margin-bottom: var(--zy-4);
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
padding: var(--zy-4) var(--zy-2);
border-bottom: 1px solid var(--zy-cloud);
}
.woocommerce .cart_totals table th {
font-weight: 600;
color: var(--zy-carbon);
text-align: left;
width: 35%;
white-space: nowrap;
background: var(--zy-bamboo);
color: var(--zy-pure);
}
.woocommerce .cart_totals table td {
text-align: left;
font-weight: 500;
background: var(--zy-snow);
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
border-bottom: none;
padding-top: var(--zy-4);
font-size: var(--zy-lg);
}
.woocommerce .cart_totals .order-total td {
color: var(--zy-bamboo);
font-weight: 700;
} .woocommerce .cart_totals .woocommerce-shipping-methods {
list-style: none;
margin: 0;
padding: var(--zy-2) 0;
}
.woocommerce .cart_totals .woocommerce-shipping-methods li {
margin-bottom: var(--zy-3);
}
.woocommerce .cart_totals .woocommerce-shipping-methods label {
display: flex;
align-items: flex-start;
gap: var(--zy-2);
cursor: pointer;
font-size: var(--zy-sm);
line-height: 1.4;
}
.woocommerce .cart_totals .woocommerce-shipping-methods input[type="radio"] {
margin-top: 3px;
flex-shrink: 0;
}
.woocommerce .cart_totals .shipping-destination {
margin-top: var(--zy-3);
font-size: var(--zy-sm);
color: var(--zy-bamboo);
}
.woocommerce .cart_totals .shipping-calculator-button {
display: inline-block;
margin-top: var(--zy-2);
color: var(--zy-bamboo);
font-size: var(--zy-sm);
text-decoration: underline;
} .woocommerce .cart_totals td > br:first-child,
.woocommerce .cart_totals td::before {
display: none !important;
} .woocommerce .cart_totals .store-picker-section,
.woocommerce .cart_totals #shipping_method + div,
.woocommerce .cart_totals .cvs-info {
margin-top: var(--zy-4);
padding: var(--zy-4);
background: var(--zy-snow);
border-radius: var(--zy-round-lg);
border: 1px solid var(--zy-cloud);
}
.woocommerce .cart_totals .store-picker-section .store-picker-title {
display: flex;
align-items: center;
gap: var(--zy-2);
font-weight: 600;
color: var(--zy-ink);
margin-bottom: var(--zy-3);
}
.woocommerce .cart_totals .store-picker-section .store-picker-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--zy-2);
padding: var(--zy-3) var(--zy-4);
background: var(--zy-pure);
border: 2px dashed var(--zy-bamboo);
border-radius: var(--zy-round);
color: var(--zy-bamboo);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.woocommerce .cart_totals .store-picker-section .store-picker-btn:hover {
background: var(--zy-mint);
border-style: solid;
}
.woocommerce .cart_totals .store-picker-section .store-picker-hint {
margin-top: var(--zy-3);
font-size: var(--zy-xs);
color: var(--zy-stone);
text-align: center;
} .woocommerce .wc-proceed-to-checkout {
padding-top: var(--zy-4);
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
display: block;
background: var(--zy-bamboo);
color: var(--zy-pure);
border-radius: var(--zy-round);
font-weight: 600;
padding: var(--zy-4);
text-align: center;
font-size: var(--zy-base);
transition: all 0.2s;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
background: var(--zy-bamboo-dark);
transform: translateY(-2px);
} .woocommerce-cart .cart-empty {
text-align: center;
padding: var(--zy-12);
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
}
.woocommerce-cart .return-to-shop a {
display: inline-block;
background: var(--zy-bamboo);
color: var(--zy-pure);
padding: var(--zy-3) var(--zy-6);
border-radius: var(--zy-round);
font-weight: 600;
} @media (max-width: 768px) {
.woocommerce table.shop_table {
display: block;
}
.woocommerce table.shop_table thead {
display: none;
}
.woocommerce table.shop_table tbody,
.woocommerce table.shop_table tr,
.woocommerce table.shop_table td {
display: block;
}
.woocommerce table.shop_table tr {
padding: var(--zy-4);
border-bottom: 1px solid var(--zy-cloud);
position: relative;
}
.woocommerce table.shop_table td {
padding: var(--zy-2) 0;
border: none;
}
.woocommerce table.shop_table td.product-remove {
position: absolute;
top: var(--zy-4);
right: var(--zy-4);
width: auto;
}
.woocommerce table.shop_table td::before {
content: attr(data-title) ": ";
font-weight: 600;
margin-right: var(--zy-2);
}
.woocommerce table.shop_table td.product-thumbnail::before,
.woocommerce table.shop_table td.product-remove::before {
display: none;
}
} .woocommerce-checkout .zy-page-content {
max-width: 100%;
padding: var(--zy-4);
}
.woocommerce-checkout .woocommerce {
padding: var(--zy-4) 0;
} .woocommerce form.checkout {
display: grid;
gap: var(--zy-5);
}
@media (min-width: 992px) {
.woocommerce form.checkout {
grid-template-columns: 1fr 420px;
align-items: start;
} .woocommerce form.checkout .col2-set {
grid-column: 1;
grid-row: 1;
} #order_review {
grid-column: 2;
grid-row: 1 / span 2;
}
} .woocommerce-checkout .woocommerce-form-coupon-toggle {
margin-bottom: var(--zy-4);
}
.woocommerce-checkout .woocommerce-info {
background: var(--zy-mint);
border: none;
border-left: 4px solid var(--zy-bamboo);
padding: var(--zy-4);
padding-left: var(--zy-10);
border-radius: var(--zy-round);
color: var(--zy-bamboo-dark);
position: relative;
}
.woocommerce-checkout .woocommerce-info::before {
color: var(--zy-bamboo);
position: absolute;
left: var(--zy-4);
top: 50%;
transform: translateY(-50%);
} .woocommerce form.checkout .col2-set {
display: block;
}
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2 {
width: 100%;
float: none;
} .woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
background: var(--zy-pure);
padding: var(--zy-5);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
margin-bottom: var(--zy-4);
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
font-size: var(--zy-lg);
font-weight: 700;
margin-bottom: var(--zy-4);
padding-bottom: var(--zy-3);
border-bottom: 2px solid var(--zy-bamboo);
color: var(--zy-ink);
}
.woocommerce form .form-row {
margin-bottom: var(--zy-3);
}
.woocommerce form .form-row label {
font-size: var(--zy-sm);
font-weight: 600;
color: var(--zy-carbon);
margin-bottom: var(--zy-1);
display: block;
} #billing_country_field,
#shipping_country_field {
display: flex;
align-items: center;
gap: var(--zy-3);
flex-wrap: wrap;
}
#billing_country_field > label,
#shipping_country_field > label {
margin-bottom: 0;
white-space: nowrap;
}
#billing_country_field strong,
#shipping_country_field strong {
font-weight: 500;
color: var(--zy-ink);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
width: 100%;
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
padding: var(--zy-3) var(--zy-3);
font-size: var(--zy-sm);
background: var(--zy-pure);
transition: all 0.2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-color: var(--zy-bamboo);
box-shadow: 0 0 0 3px var(--zy-mint);
outline: none;
} .woocommerce-checkout,
.woocommerce-checkout .woocommerce,
.woocommerce form.checkout {
overflow-x: hidden;
}
.select2-container,
.select2-dropdown {
max-width: 100%;
}
.select2-container .select2-selection--single {
height: auto;
min-height: 44px;
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding: var(--zy-3);
line-height: 1.4;
}
.select2-dropdown {
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--zy-bamboo);
} #order_review_heading {
display: none;
}
#order_review {
background: var(--zy-pure);
padding: var(--zy-5);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
position: sticky;
top: 100px;
} .woocommerce-checkout-review-order-table {
width: 100%;
margin-bottom: var(--zy-4);
}
.woocommerce-checkout-review-order-table th {
background: var(--zy-bamboo);
color: var(--zy-pure);
padding: var(--zy-3);
font-weight: 600;
font-size: var(--zy-sm);
text-align: left;
}
.woocommerce-checkout-review-order-table td {
padding: var(--zy-3);
border-bottom: 1px solid var(--zy-cloud);
font-size: var(--zy-sm);
}
.woocommerce-checkout-review-order-table .cart_item td {
background: var(--zy-snow);
}
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .shipping th,
.woocommerce-checkout-review-order-table .shipping td {
background: var(--zy-pure);
}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
font-size: var(--zy-lg);
font-weight: 700;
color: var(--zy-bamboo);
background: var(--zy-mint);
} .woocommerce-checkout-review-order-table .shipping td {
min-width: 200px;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods label {
white-space: nowrap;
} .woocommerce #payment {
background: none;
border-radius: 0;
margin-top: var(--zy-4);
}
.woocommerce #payment ul.payment_methods {
border: none;
padding: 0;
margin-bottom: var(--zy-4);
}
.woocommerce #payment ul.payment_methods li {
background: var(--zy-snow);
margin-bottom: var(--zy-2);
padding: var(--zy-3);
border-radius: var(--zy-round);
border: 1px solid var(--zy-cloud);
}
.woocommerce #payment ul.payment_methods li.wc_payment_method > label {
font-weight: 600;
cursor: pointer;
}
.woocommerce #payment .payment_box {
background: var(--zy-mist);
padding: var(--zy-3);
margin-top: var(--zy-2);
border-radius: var(--zy-round);
font-size: var(--zy-sm);
} .woocommerce #payment #place_order {
background: var(--zy-bamboo);
color: var(--zy-pure);
border-radius: var(--zy-round);
font-weight: 600;
font-size: var(--zy-base);
padding: var(--zy-4);
width: 100%;
transition: all 0.2s;
}
.woocommerce #payment #place_order:hover {
background: var(--zy-bamboo-dark);
transform: translateY(-2px);
} @media (max-width: 991px) {
.woocommerce form.checkout {
gap: var(--zy-4);
}
#order_review {
position: static;
}
} @media (max-width: 768px) { .woocommerce-checkout .woocommerce {
padding: var(--zy-3);
} .woocommerce form.checkout {
display: block;
}
.woocommerce-checkout .col2-set {
margin-bottom: var(--zy-4);
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
width: 100%;
padding: 0;
} .woocommerce-checkout .woocommerce-additional-fields {
margin-bottom: var(--zy-4);
}
.woocommerce-checkout .woocommerce-additional-fields h3 {
font-size: var(--zy-sm);
font-weight: 600;
margin-bottom: var(--zy-2);
}
.woocommerce-checkout .woocommerce-additional-fields textarea {
width: 100%;
min-height: 80px;
padding: var(--zy-3);
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
font-size: var(--zy-sm);
resize: vertical;
} #order_review {
padding: var(--zy-4);
margin-top: var(--zy-4);
border-radius: var(--zy-round-lg);
} .woocommerce-checkout-review-order-table {
display: block;
border: none;
}
.woocommerce-checkout-review-order-table thead {
display: none;
}
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
display: block;
} .woocommerce-checkout-review-order-table td::before,
.woocommerce-checkout-review-order-table th::before {
display: none !important;
} .woocommerce-checkout-review-order-table tbody tr {
display: block;
padding: var(--zy-3);
margin-bottom: var(--zy-3);
background: var(--zy-snow);
border-radius: var(--zy-round);
}
.woocommerce-checkout-review-order-table tbody td {
padding: 0;
border: none;
background: transparent !important;
}
.woocommerce-checkout-review-order-table tbody td.product-name {
font-weight: 600;
font-size: var(--zy-sm);
line-height: 1.5;
margin-bottom: var(--zy-2);
}
.woocommerce-checkout-review-order-table tbody td.product-total {
color: var(--zy-bamboo);
font-weight: 700;
font-size: var(--zy-base);
} .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
display: none;
} .woocommerce-checkout-review-order-table tfoot tr.shipping {
display: block;
padding: var(--zy-3) 0;
border-bottom: 1px solid var(--zy-cloud);
}
.woocommerce-checkout-review-order-table tfoot tr.shipping th {
display: block;
padding: 0;
margin-bottom: var(--zy-2);
font-size: var(--zy-sm);
font-weight: 600;
color: var(--zy-carbon);
background: transparent !important;
}
.woocommerce-checkout-review-order-table tfoot tr.shipping td {
display: block;
padding: 0;
background: transparent !important;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods {
list-style: none;
margin: 0;
padding: 0;
} .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li {
display: flex;
align-items: center;
gap: var(--zy-2);
margin-bottom: var(--zy-3);
padding: var(--zy-3) var(--zy-4);
background: var(--zy-pure);
border-radius: var(--zy-round);
border: 1px solid var(--zy-cloud);
cursor: pointer;
transition: all 0.2s;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li:last-child {
margin-bottom: 0;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li:has(input:checked) {
border-color: var(--zy-bamboo);
background: var(--zy-mint);
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li input[type="radio"] {
accent-color: var(--zy-bamboo);
margin: 0;
flex-shrink: 0;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li label {
font-size: var(--zy-sm);
cursor: pointer;
margin: 0;
padding: 0;
background: none;
border: none;
} .woocommerce-checkout-review-order-table tfoot tr.order-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--zy-4) 0;
border-top: 1px solid var(--zy-cloud);
margin-top: var(--zy-4);
}
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
padding: 0;
font-size: var(--zy-base);
font-weight: 700;
background: transparent !important;
width: auto;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
color: var(--zy-bamboo);
font-size: var(--zy-xl);
} .woocommerce-checkout .store-picker-section {
margin-top: var(--zy-4);
padding: var(--zy-4);
background: var(--zy-snow);
border-radius: var(--zy-round-lg);
border: 1px solid var(--zy-cloud);
}
.woocommerce-checkout .store-picker-section .store-picker-title {
display: flex;
align-items: center;
gap: var(--zy-2);
font-weight: 600;
color: var(--zy-bamboo);
margin-bottom: var(--zy-3);
}
.woocommerce-checkout .store-picker-section .store-picker-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--zy-2);
width: 100%;
padding: var(--zy-3) var(--zy-4);
background: var(--zy-pure);
border: 2px dashed var(--zy-bamboo);
border-radius: var(--zy-round);
color: var(--zy-bamboo);
font-weight: 600;
cursor: pointer;
}
.woocommerce-checkout .store-picker-section .store-picker-hint {
margin-top: var(--zy-3);
font-size: var(--zy-xs);
color: var(--zy-stone);
text-align: center;
} .woocommerce #payment {
margin-top: var(--zy-4);
}
.woocommerce #payment ul.payment_methods li {
padding: var(--zy-3);
margin-bottom: var(--zy-2);
background: var(--zy-snow);
border-radius: var(--zy-round);
}
.woocommerce #payment .payment_box {
padding: var(--zy-3);
font-size: var(--zy-sm);
} .woocommerce #payment #place_order {
padding: var(--zy-4);
font-size: var(--zy-base);
}
} .woocommerce-order-received .zy-page-content {
max-width: 900px;
margin: 0 auto;
}
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
background: linear-gradient(135deg, var(--zy-bamboo) 0%, var(--zy-bamboo-dark) 100%);
color: var(--zy-pure);
padding: var(--zy-6);
border-radius: var(--zy-round-lg);
text-align: center;
font-size: var(--zy-lg);
font-weight: 600;
margin-bottom: var(--zy-6);
} .woocommerce-order-received .woocommerce-order-overview {
display: flex;
flex-wrap: wrap;
background: var(--zy-pure);
padding: var(--zy-4);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
margin-bottom: var(--zy-6);
list-style: none;
}
.woocommerce-order-received .woocommerce-order-overview li {
flex: 1;
min-width: 120px;
text-align: center;
padding: var(--zy-4);
border-right: 1px solid var(--zy-cloud);
font-size: var(--zy-base);
color: var(--zy-carbon);
}
.woocommerce-order-received .woocommerce-order-overview li:last-child {
border-right: none;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
display: block;
font-size: var(--zy-xl);
color: var(--zy-bamboo);
margin-top: var(--zy-2);
font-weight: 700;
} .woocommerce-order-received section {
background: var(--zy-pure);
padding: var(--zy-5);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
margin-bottom: var(--zy-5);
}
.woocommerce-order-received section h2 {
font-size: var(--zy-lg);
font-weight: 700;
margin-bottom: var(--zy-4);
padding-bottom: var(--zy-3);
border-bottom: 2px solid var(--zy-bamboo);
color: var(--zy-ink);
} .woocommerce-order-received .woocommerce-table--order-details {
width: 100%;
border-collapse: collapse;
}
.woocommerce-order-received .woocommerce-table--order-details th {
background: var(--zy-bamboo);
color: var(--zy-pure);
padding: var(--zy-3) var(--zy-4);
text-align: left;
font-weight: 600;
}
.woocommerce-order-received .woocommerce-table--order-details td {
padding: var(--zy-3) var(--zy-4);
border-bottom: 1px solid var(--zy-cloud);
width: 150px;
min-width: 150px;
}
.woocommerce-order-received .woocommerce-table--order-details td.product-name {
width: auto;
min-width: auto;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
text-align: right;
}
.woocommerce-order-received .woocommerce-table--order-details tbody tr:nth-child(odd) td {
background: var(--zy-snow);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th {
background: var(--zy-mist);
color: var(--zy-carbon);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
background: var(--zy-snow);
font-weight: 600;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td {
background: var(--zy-mint);
color: var(--zy-bamboo);
font-size: var(--zy-lg);
font-weight: 700;
} .woocommerce-order-received .woocommerce-columns--addresses {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--zy-5);
}
.woocommerce-order-received .woocommerce-column--billing-address,
.woocommerce-order-received .woocommerce-column--shipping-address {
background: var(--zy-pure);
padding: var(--zy-5);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.woocommerce-order-received .woocommerce-column--billing-address h2,
.woocommerce-order-received .woocommerce-column--shipping-address h2 {
font-size: var(--zy-base);
font-weight: 700;
margin-bottom: var(--zy-3);
padding-bottom: var(--zy-2);
border-bottom: 2px solid var(--zy-bamboo);
}
.woocommerce-order-received .woocommerce-column--billing-address address,
.woocommerce-order-received .woocommerce-column--shipping-address address {
font-style: normal;
line-height: 1.8;
color: var(--zy-carbon);
} @media (max-width: 768px) { .woocommerce-order-received .zy-page-content {
padding: var(--zy-3);
} .woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
padding: var(--zy-4);
font-size: var(--zy-base);
margin-bottom: var(--zy-4);
} .woocommerce-order-received .woocommerce-order-overview {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
.woocommerce-order-received .woocommerce-order-overview li {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--zy-3) var(--zy-4);
border-right: none;
border-bottom: 1px solid var(--zy-cloud);
font-size: var(--zy-sm);
color: var(--zy-carbon);
}
.woocommerce-order-received .woocommerce-order-overview li:last-child {
border-bottom: none;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
font-size: var(--zy-base);
margin-top: 0;
color: var(--zy-ink);
} .woocommerce-order-received section {
padding: var(--zy-4);
margin-bottom: var(--zy-4);
}
.woocommerce-order-received section h2 {
font-size: var(--zy-base);
margin-bottom: var(--zy-3);
padding-bottom: var(--zy-2);
} .woocommerce-order-received .woocommerce-table--order-details {
display: block;
border: none;
}
.woocommerce-order-received .woocommerce-table--order-details thead {
display: none;
}
.woocommerce-order-received .woocommerce-table--order-details tbody,
.woocommerce-order-received .woocommerce-table--order-details tfoot {
display: block;
} .woocommerce-order-received .woocommerce-table--order-details tbody tr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
background: var(--zy-snow);
padding: var(--zy-4);
margin-bottom: var(--zy-3);
border-radius: var(--zy-round-lg);
}
.woocommerce-order-received .woocommerce-table--order-details tbody td {
min-width: 0;
padding: 0;
border: none;
background: transparent !important;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td.product-name {
flex: 1;
font-weight: 600;
font-size: var(--zy-sm);
line-height: 1.5;
padding-right: var(--zy-3);
} .woocommerce-order-received .woocommerce-table--order-details td::before {
display: none !important;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td.product-total {
color: var(--zy-bamboo);
font-weight: 700;
font-size: var(--zy-base);
white-space: nowrap;
} .woocommerce-order-received .woocommerce-table--order-details tfoot tr {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--zy-3) 0;
border-bottom: 1px solid var(--zy-cloud);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child {
border-bottom: none;
padding-top: var(--zy-4);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th,
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
display: block;
width: auto;
min-width: 0;
padding: 0;
background: transparent !important;
font-size: var(--zy-sm);
color: var(--zy-carbon);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
font-weight: 600;
color: var(--zy-ink);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td {
font-size: var(--zy-lg);
font-weight: 700;
color: var(--zy-bamboo);
} .woocommerce-order-received .woocommerce-columns--addresses {
grid-template-columns: 1fr;
gap: var(--zy-3);
}
.woocommerce-order-received .woocommerce-column--billing-address,
.woocommerce-order-received .woocommerce-column--shipping-address {
padding: var(--zy-4);
}
.woocommerce-order-received .woocommerce-column--billing-address h2,
.woocommerce-order-received .woocommerce-column--shipping-address h2 {
font-size: var(--zy-sm);
}
} .woocommerce-account .woocommerce {
padding: var(--zy-6) 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
overflow: hidden;
box-shadow: var(--zy-shadow-xs);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
margin: 0;
padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: var(--zy-4);
border-bottom: 1px solid var(--zy-cloud);
color: var(--zy-carbon);
font-weight: 500;
transition: all var(--zy-duration) var(--zy-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
background: var(--zy-mint);
color: var(--zy-bamboo);
}
.woocommerce-account .woocommerce-MyAccount-content {
background: var(--zy-pure);
padding: var(--zy-6);
border-radius: var(--zy-round-lg);
box-shadow: var(--zy-shadow-xs);
} .woocommerce-message,
.woocommerce-info {
background: var(--zy-mint);
border: none;
border-left: 4px solid var(--zy-bamboo);
color: var(--zy-bamboo-dark);
padding: var(--zy-4);
border-radius: var(--zy-round);
margin-bottom: var(--zy-4);
}
.woocommerce-message::before,
.woocommerce-info::before {
color: var(--zy-bamboo);
}
.woocommerce-error {
background: #FFEBEE;
border: none;
border-left: 4px solid var(--zy-error);
color: var(--zy-error);
padding: var(--zy-4);
border-radius: var(--zy-round);
} .woocommerce-breadcrumb {
padding: var(--zy-4) 0;
font-size: var(--zy-sm);
color: var(--zy-stone);
}
.woocommerce-breadcrumb a {
color: var(--zy-bamboo);
} .woocommerce nav.woocommerce-pagination {
margin-top: var(--zy-8);
}
.woocommerce nav.woocommerce-pagination ul {
display: flex;
justify-content: center;
gap: var(--zy-2);
border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--zy-pure);
border-radius: var(--zy-round);
color: var(--zy-carbon);
font-weight: 500;
transition: all var(--zy-duration) var(--zy-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--zy-mint);
color: var(--zy-bamboo);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--zy-bamboo);
color: var(--zy-pure);
} .zy-qty-wrap {
display: inline-flex;
align-items: center;
border: 2px solid var(--zy-cloud);
border-radius: var(--zy-round);
overflow: hidden;
}
.zy-qty-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--zy-mist);
color: var(--zy-carbon);
font-size: var(--zy-lg);
transition: all var(--zy-duration) var(--zy-ease);
}
.zy-qty-btn:hover {
background: var(--zy-mint);
color: var(--zy-bamboo);
}
.zy-qty-wrap input {
width: 50px;
height: 36px;
border: none;
text-align: center;
font-size: var(--zy-base);
font-weight: 500;
} .cart-empty,
.woocommerce-info.empty {
text-align: center;
padding: var(--zy-12);
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
}
.cart-empty::before {
content: '🛒';
display: block;
font-size: 64px;
margin-bottom: var(--zy-4);
opacity: 0.5;
}
.return-to-shop a {
display: inline-block;
margin-top: var(--zy-4);
padding: var(--zy-3) var(--zy-6);
background: var(--zy-bamboo);
color: var(--zy-pure);
border-radius: var(--zy-round);
font-weight: 600;
} @media (min-width: 992px) {
body {
padding-bottom: 0;
}
.zy-bottom-nav {
display: none;
}
.zy-header-inner {
height: 80px;
}
.zy-logo img {
height: 44px;
}
.zy-search {
max-width: 560px;
}
.zy-search input {
height: 48px;
font-size: var(--zy-base);
}
} .zy-text-center { text-align: center; }
.zy-text-left { text-align: left; }
.zy-text-right { text-align: right; }
.zy-mt-4 { margin-top: var(--zy-4); }
.zy-mt-6 { margin-top: var(--zy-6); }
.zy-mt-8 { margin-top: var(--zy-8); }
.zy-mb-4 { margin-bottom: var(--zy-4); }
.zy-mb-6 { margin-bottom: var(--zy-6); }
.zy-mb-8 { margin-bottom: var(--zy-8); }
.zy-hidden { display: none; }
.zy-block { display: block; }
.zy-flex { display: flex; }
.zy-grid { display: grid; }
@media (min-width: 768px) {
.zy-md-hidden { display: none; }
.zy-md-block { display: block; }
}
@media (min-width: 992px) {
.zy-lg-hidden { display: none; }
.zy-lg-block { display: block; }
} .zy-auto-link {
color: var(--zy-bamboo);
text-decoration: none;
border-bottom: 1px dashed var(--zy-bamboo);
transition: all 0.2s;
}
.zy-auto-link:hover {
border-bottom-style: solid;
color: var(--zy-bamboo-dark);
}
.zy-auto-link strong {
font-weight: 600;
} .zy-features-section {
background: var(--zy-mint);
padding: var(--zy-8) 0;
}
.zy-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--zy-4);
}
.zy-feature-item {
display: flex;
align-items: center;
gap: var(--zy-3);
padding: var(--zy-4);
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.zy-feature-icon {
font-size: 2rem;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--zy-mint);
border-radius: var(--zy-round);
}
.zy-feature-text h4 {
font-size: var(--zy-base);
font-weight: 600;
color: var(--zy-ink);
margin-bottom: 2px;
}
.zy-feature-text p {
font-size: var(--zy-sm);
color: var(--zy-stone);
margin: 0;
} .zy-posts-section {
background: var(--zy-snow);
}
.zy-posts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--zy-4);
}
.zy-post-card {
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.zy-post-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.zy-post-thumb {
display: block;
overflow: hidden;
}
.zy-post-thumb img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
transition: transform 0.3s ease;
}
.zy-post-card:hover .zy-post-thumb img {
transform: scale(1.05);
}
.zy-post-content {
padding: var(--zy-4);
}
.zy-post-date {
font-size: var(--zy-xs);
color: var(--zy-stone);
}
.zy-post-title {
font-size: var(--zy-base);
font-weight: 600;
margin: var(--zy-2) 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zy-post-title a {
color: var(--zy-ink);
}
.zy-post-title a:hover {
color: var(--zy-bamboo);
}
.zy-post-excerpt {
font-size: var(--zy-sm);
color: var(--zy-stone);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
} .zy-category-showcase {
background: var(--zy-mint);
}
.zy-cat-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--zy-4);
}
.zy-cat-card {
display: block;
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
overflow: hidden;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.zy-cat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.zy-cat-thumb {
aspect-ratio: 1;
overflow: hidden;
}
.zy-cat-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.zy-cat-card:hover .zy-cat-thumb img {
transform: scale(1.08);
}
.zy-cat-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--zy-mint) 0%, var(--zy-sage) 100%);
}
.zy-cat-info {
padding: var(--zy-3);
}
.zy-cat-info h4 {
font-size: var(--zy-sm);
font-weight: 600;
color: var(--zy-ink);
margin-bottom: 4px;
}
.zy-cat-info span {
font-size: var(--zy-xs);
color: var(--zy-stone);
} .zy-product-tag.hot {
background: linear-gradient(135deg, #ff6b35 0%, #f7c94b 100%);
} @media (max-width: 768px) {
.zy-features-grid {
grid-template-columns: repeat(2, 1fr);
}
.zy-posts-grid {
grid-template-columns: 1fr;
} .zy-cat-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--zy-3);
}
.zy-cat-card {
border-radius: var(--zy-round);
}
.zy-cat-thumb {
aspect-ratio: 4/3;
}
.zy-cat-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.zy-cat-placeholder::after {
content: "📦";
}
.zy-cat-info {
padding: var(--zy-2);
}
.zy-cat-info h4 {
font-size: var(--zy-xs);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zy-cat-info span {
font-size: 10px;
}
.zy-feature-item {
padding: var(--zy-3);
}
.zy-feature-icon {
font-size: 1.5rem;
width: 40px;
height: 40px;
}
}  .zy-breadcrumb {
background: var(--zy-snow);
padding: var(--zy-3) 0;
}
.zy-breadcrumb-list {
display: flex;
align-items: center;
gap: var(--zy-2);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--zy-sm);
}
.zy-breadcrumb-list li {
display: flex;
align-items: center;
}
.zy-breadcrumb-list li::after {
content: '›';
margin-left: var(--zy-2);
color: var(--zy-pebble);
}
.zy-breadcrumb-list li:last-child::after {
display: none;
}
.zy-breadcrumb-list a {
color: var(--zy-bamboo);
}
.zy-breadcrumb-list li.current span {
color: var(--zy-stone);
} .zy-page-banner {
background: linear-gradient(135deg, var(--zy-bamboo) 0%, var(--zy-bamboo-dark) 100%);
padding: var(--zy-10) 0;
color: var(--zy-pure);
text-align: center;
}
.zy-page-title {
font-size: var(--zy-3xl);
font-weight: 700;
margin-bottom: var(--zy-2);
}
.zy-page-desc {
font-size: var(--zy-base);
opacity: 0.9;
max-width: 600px;
margin: 0 auto var(--zy-2);
}
.zy-page-count {
font-size: var(--zy-sm);
opacity: 0.8;
} .zy-article-section {
padding: var(--zy-10) 0;
background: var(--zy-snow);
}
.zy-article-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--zy-6);
}
@media (min-width: 768px) {
.zy-article-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.zy-article-grid {
grid-template-columns: repeat(4, 1fr);
}
} .zy-article-card {
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.zy-article-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.zy-article-thumb {
display: block;
aspect-ratio: 16/10;
overflow: hidden;
}
.zy-article-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.zy-article-card:hover .zy-article-thumb img {
transform: scale(1.05);
}
.zy-article-thumb.zy-no-thumb {
background: linear-gradient(135deg, var(--zy-mint) 0%, var(--zy-sage) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.zy-article-content {
padding: var(--zy-4);
}
.zy-article-cat {
display: inline-block;
padding: var(--zy-1) var(--zy-2);
background: var(--zy-mint);
color: var(--zy-bamboo);
font-size: var(--zy-xs);
font-weight: 600;
border-radius: var(--zy-round-sm);
margin-bottom: var(--zy-2);
}
.zy-article-title {
font-size: var(--zy-base);
font-weight: 600;
line-height: 1.4;
margin-bottom: var(--zy-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zy-article-title a {
color: var(--zy-ink);
}
.zy-article-title a:hover {
color: var(--zy-bamboo);
}
.zy-article-excerpt {
font-size: var(--zy-sm);
color: var(--zy-stone);
line-height: 1.6;
margin-bottom: var(--zy-3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zy-article-meta {
display: flex;
align-items: center;
gap: var(--zy-3);
font-size: var(--zy-xs);
color: var(--zy-pebble);
}
.zy-article-meta span {
display: flex;
align-items: center;
gap: var(--zy-1);
}
.zy-article-meta svg {
flex-shrink: 0;
} .zy-pagination {
margin-top: var(--zy-8);
text-align: center;
}
.zy-pagination .nav-links {
display: inline-flex;
gap: var(--zy-2);
}
.zy-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--zy-3);
background: var(--zy-pure);
color: var(--zy-carbon);
border-radius: var(--zy-round);
font-weight: 500;
transition: all 0.2s ease;
}
.zy-pagination .page-numbers:hover,
.zy-pagination .page-numbers.current {
background: var(--zy-bamboo);
color: var(--zy-pure);
}
.zy-no-content {
text-align: center;
padding: var(--zy-12);
color: var(--zy-stone);
} @media (max-width: 768px) {
.zy-page-banner {
padding: var(--zy-6) 0;
}
.zy-page-title {
font-size: var(--zy-2xl);
}
.zy-article-grid {
grid-template-columns: 1fr;
gap: var(--zy-4);
}
} @media (max-width: 768px) { .woocommerce-cart .woocommerce {
padding: var(--zy-3);
} .woocommerce-cart table.shop_table {
display: block;
border: none;
box-shadow: none;
background: transparent;
}
.woocommerce-cart table.shop_table thead {
display: none;
}
.woocommerce-cart table.shop_table tbody {
display: block;
} .woocommerce-cart table.shop_table tbody tr.cart_item {
display: grid;
grid-template-columns: 70px 1fr auto;
grid-template-rows: auto auto;
gap: var(--zy-2) var(--zy-3);
align-items: center;
background: var(--zy-pure);
border-radius: var(--zy-round-lg);
padding: var(--zy-3);
margin-bottom: var(--zy-3);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
position: relative;
}
.woocommerce-cart table.shop_table tbody td {
padding: 0;
border: none;
background: transparent !important;
}
.woocommerce-cart table.shop_table tbody td::before {
display: none !important;
} .woocommerce-cart table.shop_table td.product-remove {
position: absolute;
top: var(--zy-2);
right: var(--zy-2);
grid-column: auto;
}
.woocommerce-cart table.shop_table td.product-remove a {
font-size: var(--zy-base);
color: var(--zy-pebble);
} .woocommerce-cart table.shop_table td.product-thumbnail {
display: block !important;
grid-column: 1;
grid-row: 1 / 3;
}
.woocommerce-cart table.shop_table td.product-thumbnail img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: var(--zy-round);
border: 1px solid var(--zy-cloud);
} .woocommerce-cart table.shop_table td.product-name {
grid-column: 2 / 4;
grid-row: 1;
font-weight: 600;
font-size: var(--zy-sm);
line-height: 1.4;
padding-right: var(--zy-5);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .woocommerce-cart table.shop_table td.product-price {
display: none !important;
} .woocommerce-cart table.shop_table td.product-quantity {
grid-column: 2;
grid-row: 2;
}
.woocommerce-cart table.shop_table td.product-quantity .qty {
width: 50px;
height: 32px;
text-align: center;
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round-sm);
font-size: var(--zy-sm);
} .woocommerce-cart table.shop_table td.product-subtotal {
grid-column: 3;
grid-row: 2;
font-weight: 700;
color: var(--zy-bamboo);
font-size: var(--zy-base);
text-align: right;
} .woocommerce-cart table.shop_table td.actions {
display: block !important;
padding: 0;
background: transparent !important;
margin-top: var(--zy-3);
}
.woocommerce-cart table.shop_table td.actions .coupon {
display: flex;
gap: var(--zy-2);
margin-bottom: var(--zy-3);
}
.woocommerce-cart table.shop_table td.actions .coupon input {
flex: 1;
padding: var(--zy-3);
border: 1px solid var(--zy-cloud);
border-radius: var(--zy-round);
font-size: var(--zy-sm);
}
.woocommerce-cart table.shop_table td.actions .coupon button {
padding: var(--zy-3) var(--zy-4);
background: var(--zy-bamboo);
color: var(--zy-pure);
border: none;
border-radius: var(--zy-round);
font-weight: 600;
font-size: var(--zy-sm);
white-space: nowrap;
}
.woocommerce-cart table.shop_table td.actions button[name="update_cart"] {
width: 100%;
padding: var(--zy-3);
background: var(--zy-mist);
border: none;
border-radius: var(--zy-round);
color: var(--zy-carbon);
font-size: var(--zy-sm);
} .woocommerce-cart .cart_totals {
margin-top: var(--zy-4);
padding: var(--zy-4);
min-width: auto;
}
.woocommerce-cart .cart_totals h2 {
font-size: var(--zy-base);
background: var(--zy-bamboo);
color: var(--zy-pure);
padding: var(--zy-3);
margin: calc(-1 * var(--zy-4));
margin-bottom: var(--zy-4);
border-radius: var(--zy-round-lg) var(--zy-round-lg) 0 0;
}
} .zy-product-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 56px;
background: var(--zy-pure);
border-top: 1px solid var(--zy-cloud);
z-index: 1001;
padding: 8px 12px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
align-items: center;
gap: 10px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}
@media (max-width: 768px) { body.single-product .zy-bottom-nav {
display: none !important;
}
body.single-product .zy-product-bar {
display: flex;
}
body.single-product .zy-main {
padding-bottom: 70px;
} .woocommerce div.product {
padding: 0;
}
.woocommerce div.product .woocommerce-product-gallery {
margin-bottom: var(--zy-3);
}
.woocommerce div.product .summary {
padding: 0 var(--zy-2);
} .woocommerce .woocommerce-breadcrumb {
padding: var(--zy-2);
font-size: var(--zy-xs);
margin-bottom: 0;
} .woocommerce div.product p.price,
.woocommerce div.product span.price {
font-size: var(--zy-xl);
} .woocommerce div.product .woocommerce-product-details__short-description {
font-size: var(--zy-sm);
padding: var(--zy-2);
margin-bottom: var(--zy-2);
} .woocommerce div.product form.cart .variations {
width: 100%;
margin-bottom: var(--zy-2);
}
.woocommerce div.product form.cart .variations table {
width: 100%;
}
.woocommerce div.product form.cart .variations tr {
display: flex;
align-items: center;
gap: var(--zy-2);
margin-bottom: var(--zy-2);
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
padding: 0;
}
.woocommerce div.product form.cart .variations label {
min-width: 60px;
font-size: var(--zy-sm);
white-space: nowrap;
}
.woocommerce div.product form.cart .variations td.value {
flex: 1;
display: flex;
align-items: center;
gap: var(--zy-2);
}
.woocommerce div.product form.cart .variations select {
flex: 1;
padding: var(--zy-2) var(--zy-3);
font-size: var(--zy-sm);
min-width: 0;
}
.woocommerce div.product form.cart .reset_variations {
font-size: var(--zy-xs);
white-space: nowrap;
} .woocommerce div.product form.cart .woocommerce-variation-price {
width: 100%;
margin: 0;
padding: var(--zy-1) 0;
}
.woocommerce div.product form.cart .woocommerce-variation-price .price {
font-size: var(--zy-lg);
margin: 0;
} .woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .single_variation,
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
margin: 0 !important;
padding: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation-description,
.woocommerce div.product form.cart .woocommerce-variation-availability {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation:empty,
.woocommerce div.product form.cart .single_variation:empty,
.woocommerce div.product form.cart .woocommerce-variation-description:empty,
.woocommerce div.product form.cart .woocommerce-variation-availability:empty {
display: none !important;
height: 0 !important;
} .woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
gap: var(--zy-2);
margin-bottom: var(--zy-2);
}
.woocommerce div.product form.cart > .quantity {
width: auto;
}
.woocommerce div.product form.cart .quantity .qty {
width: 60px;
height: 44px;
font-size: var(--zy-sm);
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
flex: 1;
padding: var(--zy-3) var(--zy-4);
font-size: var(--zy-sm);
min-width: 120px;
} .woocommerce div.product .product_meta {
font-size: var(--zy-sm);
padding: var(--zy-3) 0;
}
.woocommerce div.product .product_meta > span {
display: block;
margin-bottom: var(--zy-2);
}
}
.zy-pbar-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50px;
color: var(--zy-stone);
text-decoration: none;
font-size: 10px;
gap: 2px;
}
.zy-pbar-icon svg {
width: 22px;
height: 22px;
}
.zy-pbar-icon img {
height: 22px;
}
.zy-pbar-btn {
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.zy-pbar-cart {
background: linear-gradient(135deg, #F59E0B, #FBBF24);
color: #fff;
}
.zy-pbar-cart:hover {
background: linear-gradient(135deg, #D97706, #F59E0B);
color: #fff;
}
.zy-pbar-buy {
background: linear-gradient(135deg, var(--zy-bamboo), var(--zy-bamboo-dark));
color: #fff;
}
.zy-pbar-buy:hover {
background: linear-gradient(135deg, var(--zy-bamboo-dark), var(--zy-bamboo));
color: #fff;
}