.shop-header,
.shop-header-compact {
background: linear-gradient(135deg,
rgba(232, 245, 232, 0.9) 0%,
rgba(254, 254, 254, 0.95) 100%);
padding: var(--spacing-xxl) 0;
margin-top: 80px; }
.shop-header-compact {
padding: var(--spacing-lg) 0;
}
.shop-hero-compact {
margin-bottom: var(--spacing-md);
}
.shop-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.shop-title {
font-family: var(--font-primary);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--color-dark);
margin-bottom: var(--spacing-md);
}
.shop-description {
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.6;
} .shop-categories-nav {
background: white;
border-top: 1px solid var(--color-light);
border-bottom: 1px solid var(--color-light);
padding: var(--spacing-md) 0;
position: sticky;
top: 80px;
z-index: 100;
}
.categories-scroll {
display: flex;
gap: var(--spacing-md);
overflow-x: auto;
padding: 0 var(--spacing-md);
scrollbar-width: none;
-ms-overflow-style: none;
}
.categories-scroll::-webkit-scrollbar {
display: none;
}
.category-nav-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 25px;
text-decoration: none;
color: var(--color-text);
background: var(--color-light);
transition: var(--transition-smooth);
white-space: nowrap;
font-size: 0.9rem;
font-weight: 500;
}
.category-nav-item:hover {
background: var(--color-primary);
color: white;
transform: translateY(-2px);
}
.category-nav-item.active {
background: var(--color-accent);
color: white;
box-shadow: var(--shadow-soft);
}
.category-icon {
font-size: 1.1rem;
}
.category-count {
font-size: 0.8rem;
opacity: 0.8;
} .shop-content {
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--spacing-xl);
max-width: 1400px;
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-md);
}
.shop-sidebar {
background: var(--color-warm-white);
padding: var(--spacing-lg);
border-radius: var(--border-radius-large);
height: fit-content;
position: sticky;
top: 100px;
}
.shop-main {
min-width: 0; } .shop-filters {
margin-bottom: var(--spacing-xl);
}
.filters-title {
font-family: var(--font-primary);
font-size: 1.3rem;
color: var(--color-dark);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--color-primary);
}
.filter-group {
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--color-light);
}
.filter-group:last-child {
border-bottom: none;
}
.filter-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-dark);
margin-bottom: var(--spacing-sm);
}
.filter-options {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.filter-option {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs);
border-radius: var(--border-radius);
cursor: pointer;
transition: var(--transition-smooth);
}
.filter-option:hover {
background: var(--color-light);
}
.filter-option.active {
background: var(--color-light-green);
color: var(--color-primary);
}
.filter-option input[type="checkbox"] {
margin: 0;
}
.filter-label {
flex: 1;
font-size: 0.9rem;
}
.filter-count {
font-size: 0.8rem;
color: var(--color-text-light);
} .price-range-filter {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.price-inputs {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.price-inputs input {
flex: 1;
padding: var(--spacing-xs);
border: 1px solid var(--color-light);
border-radius: var(--border-radius);
font-size: 0.9rem;
}
.price-separator {
color: var(--color-text-light);
}
.apply-price-filter {
background: var(--color-primary);
color: white;
border: none;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.9rem;
transition: var(--transition-smooth);
}
.apply-price-filter:hover {
background: var(--color-secondary);
}
.clear-filters {
background: transparent;
color: var(--color-text-light);
border: 1px solid var(--color-light);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.9rem;
transition: var(--transition-smooth);
width: 100%;
}
.clear-filters:hover {
background: var(--color-light);
color: var(--color-text);
} .shop-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--color-warm-white);
border-radius: var(--border-radius);
}
.shop-controls {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.view-toggle {
display: flex;
background: var(--color-light);
border-radius: var(--border-radius);
overflow: hidden;
}
.view-btn {
background: transparent;
border: none;
padding: var(--spacing-xs);
cursor: pointer;
transition: var(--transition-smooth);
color: var(--color-text-light);
}
.view-btn.active {
background: var(--color-primary);
color: white;
}
.view-btn:hover:not(.active) {
background: var(--color-soft-gray);
} .shop-products {
position: relative;
}
.shop-products.loading::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 10;
}
.shop-products.loading::after {
content: 'Chargement...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
font-weight: 600;
color: var(--color-primary);
} .shop-products.grid-view .products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-lg);
} .shop-products.list-view .products {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.shop-products.list-view .product-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--spacing-md);
align-items: start;
} .linteas-product-card {
background: white;
border-radius: var(--border-radius-large);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
position: relative;
list-style: none;
}
.linteas-product-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.product-image-wrapper {
position: relative;
overflow: hidden;
}
.product-image-wrapper img {
width: 100%;
height: 250px;
object-fit: cover;
transition: var(--transition-smooth);
}
.linteas-product-card:hover .product-image-wrapper img {
transform: scale(1.05);
} .product-badges {
position: absolute;
top: var(--spacing-sm);
left: var(--spacing-sm);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
z-index: 2;
} .single-product-layout .product-badges {
position: static;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
justify-content: flex-start;
align-items: center;
}
.badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
flex-shrink: 0;
} .single-product-layout .badge {
padding: 6px 12px;
font-size: 0.8rem;
border-radius: 16px;
}
.badge-sale {
background: var(--color-red);
color: white;
}
.badge-featured {
background: var(--color-accent);
color: white;
}
.badge-out-of-stock {
background: var(--color-text-light);
color: white;
}
.badge-family {
background: var(--color-primary);
color: white;
}
.badge-origin {
background: var(--color-secondary);
color: white;
} .product-quick-actions {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
opacity: 0;
transform: translateX(10px);
transition: var(--transition-smooth);
z-index: 2;
}
.linteas-product-card:hover .product-quick-actions {
opacity: 1;
transform: translateX(0);
}
.quick-action {
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-smooth);
color: var(--color-text);
}
.quick-action:hover {
background: var(--color-primary);
color: white;
transform: scale(1.1);
}
.quick-action.in-wishlist,
.quick-action.in-compare {
background: var(--color-accent);
color: white;
} .product-chinese-name {
position: absolute;
bottom: var(--spacing-sm);
right: var(--spacing-sm);
background: rgba(255, 255, 255, 0.9);
padding: 4px 8px;
border-radius: 8px;
font-size: 0.8rem;
color: var(--color-accent);
opacity: 0;
transform: translateY(10px);
transition: var(--transition-smooth);
z-index: 2;
}
.linteas-product-card:hover .product-chinese-name {
opacity: 0.8;
transform: translateY(0);
} .product-info {
padding: var(--spacing-md);
}
.product-family {
margin-bottom: var(--spacing-xs);
}
.family-label {
background: var(--color-light-green);
color: var(--color-primary);
padding: 2px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.product-title {
margin-bottom: var(--spacing-xs);
}
.product-title-link {
color: var(--color-dark);
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
transition: var(--transition-smooth);
}
.product-title-link:hover {
color: var(--color-primary);
}
.product-excerpt {
font-size: 0.9rem;
color: var(--color-text-light);
line-height: 1.4;
margin-bottom: var(--spacing-sm);
}
.product-attributes {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.product-attribute {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
color: var(--color-text-light);
}
.product-attribute svg {
width: 14px;
height: 14px;
}
.product-price {
margin-bottom: var(--spacing-sm);
}
.product-price .price {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
}
.price-per-100g {
font-size: 0.8rem;
color: var(--color-text-light);
margin-left: var(--spacing-xs);
} .product-actions {
margin-top: var(--spacing-sm);
}
.product-actions .button {
width: 100%;
background: var(--color-primary);
color: white;
border: none;
padding: var(--spacing-sm);
border-radius: var(--border-radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition-smooth);
}
.product-actions .button:hover {
background: var(--color-secondary);
transform: translateY(-2px);
} .product-hover-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: var(--spacing-md);
transform: translateY(100%);
transition: var(--transition-smooth);
}
.linteas-product-card:hover .product-hover-overlay {
transform: translateY(0);
}
.hover-content h4 {
font-size: 0.9rem;
margin-bottom: var(--spacing-xs);
color: white;
}
.hover-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.hover-content li {
font-size: 0.8rem;
margin-bottom: 2px;
}
.hover-bienfaits {
margin-bottom: var(--spacing-sm);
} .single-product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxl);
margin-bottom: var(--spacing-xxl);
}
.product-gallery-section {
position: relative;
}
.product-summary-section {
padding: var(--spacing-lg);
} .product-header {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.product-breadcrumbs {
margin-bottom: var(--spacing-sm);
order: 1;
}
.product-breadcrumbs .woocommerce-breadcrumb {
font-size: 0.9rem;
color: var(--color-text-light);
}
.product-breadcrumbs a {
color: var(--color-primary);
text-decoration: none;
} .product-breadcrumbs .woocommerce-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.product-breadcrumbs .woocommerce-breadcrumb a,
.product-breadcrumbs .woocommerce-breadcrumb span {
display: inline-flex;
align-items: center;
} .linteas-dynamic-pricing {
background: var(--color-light-green);
padding: var(--spacing-md);
border-radius: var(--border-radius);
margin: var(--spacing-md) 0;
}
.pricing-calculator h4 {
color: var(--color-primary);
margin-bottom: var(--spacing-sm);
}
.weight-selector {
margin-bottom: var(--spacing-sm);
}
.weight-selector label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 600;
}
.weight-select {
width: 100%;
padding: var(--spacing-xs);
border: 1px solid var(--color-primary);
border-radius: var(--border-radius);
background: white;
}
.calculated-price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
}
.price-amount {
color: var(--color-primary);
font-size: 1.3rem;
transition: var(--transition-smooth);
}
.price-amount.price-updated {
transform: scale(1.1);
color: var(--color-accent);
} .tea-preparation-guide {
background: var(--color-soft-gray);
padding: var(--spacing-md);
border-radius: var(--border-radius);
margin: var(--spacing-md) 0;
}
.tea-preparation-guide h3 {
color: var(--color-primary);
margin-bottom: var(--spacing-sm);
}
.brewing-instructions {
display: flex;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.brewing-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.9rem;
color: var(--color-text);
}
.brewing-item svg {
color: var(--color-primary);
}
.tea-story h4 {
color: var(--color-dark);
margin-bottom: var(--spacing-xs);
}
.tea-story p {
font-size: 0.9rem;
line-height: 1.5;
color: var(--color-text-light);
} .product-trust-signals {
display: flex;
gap: var(--spacing-md);
margin: var(--spacing-md) 0;
padding: var(--spacing-md);
background: var(--color-light);
border-radius: var(--border-radius);
}
.trust-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.8rem;
color: var(--color-text);
}
.trust-item svg {
color: var(--color-primary);
}  .single-product-layout .cart .button,
.single-product-layout .single_add_to_cart_button {
background: var(--color-primary);
color: white;
border: none;
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--border-radius);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: var(--transition-smooth);
width: auto;
min-width: 200px;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
}
.single-product-layout .cart .button:hover,
.single-product-layout .single_add_to_cart_button:hover {
background: var(--color-secondary);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
} .single-product-layout .quantity {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
margin-right: var(--spacing-md);
}
.single-product-layout .quantity input[type="number"] {
width: 80px;
padding: var(--spacing-sm);
border: 2px solid var(--color-primary);
border-radius: var(--border-radius);
text-align: center;
font-weight: 600;
} .single-product-layout .cart {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
} .shop-cross-selling,
.product-cross-selling {
background: var(--color-soft-gray);
padding: var(--spacing-xxl) 0;
margin-top: var(--spacing-xxl);
}
.cross-selling-content {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-xl);
padding: 0 var(--spacing-md);
}
.cross-selling-content h2 {
font-family: var(--font-primary);
color: var(--color-dark);
margin-bottom: var(--spacing-md);
}
.ateliers-mini-grid,
.workshop-recommendations {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
max-width: 800px;
margin: 0 auto;
}
.atelier-mini-card,
.workshop-card {
background: white;
padding: var(--spacing-md);
border-radius: var(--border-radius-large);
text-align: center;
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
}
.atelier-mini-card:hover,
.workshop-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.atelier-mini-card img,
.workshop-card img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
margin-bottom: var(--spacing-sm);
}
.atelier-mini-card h3,
.workshop-card h3 {
color: var(--color-dark);
margin-bottom: var(--spacing-xs);
}
.atelier-mini-card p,
.workshop-card p {
color: var(--color-text-light);
font-size: 0.9rem;
margin-bottom: var(--spacing-sm);
}
.atelier-mini-card .price,
.workshop-details .price {
color: var(--color-accent);
font-weight: 700;
font-size: 1.1rem;
}
.workshop-details {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-sm);
}
.workshop-details .duration {
color: var(--color-text-light);
font-size: 0.9rem;
}
.btn-mini,
.btn-workshop {
background: var(--color-primary);
color: white;
padding: var(--spacing-xs) var(--spacing-md);
border: none;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
transition: var(--transition-smooth);
display: inline-block;
}
.btn-mini:hover,
.btn-workshop:hover {
background: var(--color-secondary);
color: white;
transform: translateY(-2px);
} @media (max-width: 768px) { .single-product-layout {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.product-summary-section {
padding: var(--spacing-md);
} .single-product-layout .product-badges {
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-sm);
}
.single-product-layout .badge {
padding: 4px 8px;
font-size: 0.7rem;
} .single-product-layout .cart {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-sm);
}
.single-product-layout .cart .button,
.single-product-layout .single_add_to_cart_button {
width: 100%;
min-width: auto;
padding: var(--spacing-md);
font-size: 1rem;
}
.single-product-layout .quantity {
justify-content: center;
margin-right: 0;
} .product-trust-signals {
flex-direction: column;
gap: var(--spacing-sm);
}
.trust-item {
justify-content: center;
} .product-breadcrumbs .woocommerce-breadcrumb {
font-size: 0.8rem;
justify-content: center;
text-align: center;
}
}
@media (max-width: 480px) { .single-product-layout .product-badges {
justify-content: center;
}
.product-breadcrumbs .woocommerce-breadcrumb {
flex-direction: column;
gap: 2px;
text-align: center;
}
} .woocommerce .woocommerce-breadcrumb{ display:flex; flex-wrap:wrap; gap:6px; font-size:.9rem; color: var(--color-text-light); margin: 8px 0 16px; }
.woocommerce .woocommerce-breadcrumb a{ color: var(--color-primary); text-decoration:none; font-weight:600; }
.woocommerce .woocommerce-breadcrumb a:hover{ color: var(--color-accent); text-decoration: underline; } .woocommerce-breadcrumb{ display:flex; flex-wrap:wrap; gap:6px; font-size:.9rem; color: var(--color-text-light); margin: 8px 0 16px; }
.woocommerce-breadcrumb a{ color: var(--color-primary); text-decoration:none; font-weight:600; }
.woocommerce-breadcrumb a:hover{ color: var(--color-accent); text-decoration: underline; }