.page-mini-slider {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
background-color: #20620c;
}
.mini-slider {
width: 100%;
height: 100%;
}
.mini-slide {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} .mini-slide-image-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.mini-slide-bg {
width: 100%;
height: 100%;
object-fit: cover;
animation: slowZoom 12s ease-in-out infinite alternate;
}
@keyframes slowZoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
} .mini-slide-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
} .mini-leaf {
position: absolute;
z-index: 2;
opacity: 0;
pointer-events: none;
animation: fadeInLeaf 1.5s ease 0.5s forwards;
}
@keyframes fadeInLeaf {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 0.7;
transform: translateY(0);
}
}
.mini-leaf-left {
left: 0;
bottom: 0;
height: 300px;
width: auto;
}
.mini-leaf-right {
right: 0;
bottom: 0;
height: 300px;
width: auto;
} .products-section {
padding: 80px 0;
background: #ffffff;
}
.archive-page-header {
text-align: center;
margin-bottom: 60px;
}
.archive-page-title {
font-size: 2.5rem;
font-weight: 600;
color: #333;
margin-bottom: 15px;
}
.archive-page-subtitle {
font-size: 1.1rem;
color: #666;
max-width: 700px;
margin: 0 auto;
} .products-grid {
display: grid;
grid-template-columns: repeat(3, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 50px;
} .product-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.product-card-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
} .product-card-image-wrapper {
position: relative;
width: 100%;
height: 240px;
overflow: visible;
background: #fff;
}
.product-card-image {
width: 100%;
height: 100%;
}
.product-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
border-radius: 16px 16px 0 0;
}
.product-card:hover .product-card-image img {
transform: scale(1.05);
} .product-card-icon {
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: 90px;
height: 90px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 3px solid rgba(255, 255, 255, 0.9);
}
.product-card-icon img {
width: 55px;
height: 55px;
object-fit: contain;
} .product-card-content {
padding: 65px 32px 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex-grow: 1;
background: #ffffff;
}
.product-card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 16px;
color: #333;
line-height: 1.3;
text-align: center;
width: 100%;
}
.product-card-subtitle {
font-size: 0.85rem;
color: #7cb342;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
text-align: center;
}
.product-card-excerpt {
font-size: 0.95rem;
line-height: 1.6;
color: #999;
margin-bottom: 24px;
text-align: center;
width: 100%;
} .product-card-content .product-card-cta {
width: 100%;
text-align: center;
padding: 14px 32px;
font-size: 1rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
text-decoration: none;
display: block;
} .product-card-cta {
width: 100%;
text-align: center;
padding: 14px 32px;
font-size: 1rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #7cb342;
color: #ffffff;
border: none;
}
.product-card-cta:hover {
background-color: #6da036;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 179, 66, 0.3);
gap: 12px;
}
.product-card-cta svg {
transition: transform 0.3s ease;
margin-bottom: -4px;
}
.product-card:hover .product-card-cta svg {
transform: translateX(3px);
}
.product-card-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}
.placeholder-content svg {
color: #bbb;
} .no-products {
text-align: center;
padding: 80px 20px;
}
.no-products svg {
color: #ddd;
margin-bottom: 20px;
}
.no-products h2 {
font-size: 1.8rem;
color: #333;
margin-bottom: 10px;
}
.no-products p {
font-size: 1.1rem;
color: #666;
} .pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 50px;
}
.pagination .page-numbers {
padding: 10px 16px;
background: #ffffff;
border: 2px solid #e0e0e0;
border-radius: 8px;
color: #333;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
background: linear-gradient(135deg, #7cb342 0%, #6da036 100%);
border-color: #7cb342;
color: #ffffff;
} .archive-cta-section {
padding: 80px 0;
background: linear-gradient(135deg, #7cb342 0%, #1e600a 100%);
}
.archive-cta-content {
text-align: center;
color: #ffffff;
}
.archive-cta-content h2 {
font-size: 2.2rem;
font-weight: 600;
margin-bottom: 15px;
}
.archive-cta-content p {
font-size: 1.15rem;
margin-bottom: 30px;
opacity: 0.95;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.archive-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: #ffffff;
color: #7cb342;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.05rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.archive-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
gap: 16px;
}
.archive-cta-button svg {
transition: transform 0.3s ease;
}
.archive-cta-button:hover svg {
transform: translateX(3px);
} @media (max-width: 1200px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
}
@media (max-width: 1024px) {
.products-section {
padding: 60px 0;
}
.archive-page-title {
font-size: 2rem;
}
.products-grid {
gap: 20px;
}
}
@media (max-width: 768px) {
.page-mini-slider {
height: 80px;
}
.mini-leaf-left {
height: 200px;
}
.mini-leaf-right {
height: 200px;
}
.products-section {
padding: 50px 0;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.archive-page-header {
margin-bottom: 40px;
}
.archive-page-title {
font-size: 1.75rem;
}
.archive-page-subtitle {
font-size: 1rem;
}
.product-card-content {
padding: 55px 24px 24px;
}
.product-card-icon {
width: 70px;
height: 70px;
bottom: -35px;
}
.product-card-icon img {
width: 45px;
height: 45px;
}
.archive-cta-section {
padding: 60px 0;
}
.archive-cta-content h2 {
font-size: 1.75rem;
}
.archive-cta-content p {
font-size: 1rem;
}
}
@media (max-width: 600px) {
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.archive-page-title {
font-size: 1.5rem;
}
.product-card-image-wrapper {
height: 200px;
}
}
@media (max-width: 480px) {
.page-mini-slider {
height: 60px;
}
.mini-leaf-left,
.mini-leaf-right {
display: none;
}
.products-section {
padding: 40px 0;
}
.archive-cta-button {
padding: 14px 24px;
font-size: 0.95rem;
}
}  .product-category-filters {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.category-filter-btn {
padding: 12px 28px;
background: #ffffff;
border: 2px solid #e0e0e0;
border-radius: 50px;
color: #333;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.category-filter-btn:hover {
border-color: #7cb342;
color: #7cb342;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 179, 66, 0.15);
}
.category-filter-btn.active {
background: linear-gradient(135deg, #7cb342 0%, #6da036 100%);
border-color: #7cb342;
color: #ffffff;
box-shadow: 0 4px 12px rgba(124, 179, 66, 0.3);
} .product-card.filtering-hide {
animation: fadeOut 0.3s ease forwards;
}
.product-card.filtering-show {
animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
} .products-section {
padding: 80px 0;
background: #ffffff;
} @media (max-width: 1200px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
}
@media (max-width: 1024px) {
.products-section {
padding: 60px 0;
}
.archive-page-title {
font-size: 2rem;
}
.products-grid {
gap: 20px;
}
}
@media (max-width: 768px) {
.page-mini-slider {
height: 80px;
}
.mini-leaf-left {
height: 200px;
}
.mini-leaf-right {
height: 200px;
}
.products-section {
padding: 50px 0;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.archive-page-header {
margin-bottom: 40px;
}
.archive-page-title {
font-size: 1.75rem;
}
.archive-page-subtitle {
font-size: 1rem;
}
.product-card-content {
padding: 55px 24px 24px;
}
.product-card-icon {
width: 70px;
height: 70px;
bottom: -35px;
}
.product-card-icon img {
width: 45px;
height: 45px;
}
.archive-cta-section {
padding: 60px 0;
}
.archive-cta-content h2 {
font-size: 1.75rem;
}
.archive-cta-content p {
font-size: 1rem;
} .product-category-filters {
gap: 8px;
margin-bottom: 40px;
}
.category-filter-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 600px) {
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.archive-page-title {
font-size: 1.5rem;
}
.product-card-image-wrapper {
height: 200px;
}
}
@media (max-width: 480px) {
.page-mini-slider {
height: 60px;
}
.mini-leaf-left,
.mini-leaf-right {
display: none;
}
.products-section {
padding: 40px 0;
}
.archive-cta-button {
padding: 14px 24px;
font-size: 0.95rem;
} .category-filter-btn {
padding: 8px 16px;
font-size: 0.85rem;
}
}