arrow) */
#page-home.wa-home .newsletter-row button::after,
#page-products .products-newsletter-section .newsletter-row button::after,
#productsNewsletterSection .newsletter-row button::after,
.products-newsletter-section .newsletter-row button::after,
#page-product .product-newsletter-section .newsletter-row button::after,
.product-newsletter-section .newsletter-row button::after,
.newsletter-popup-section .newsletter-row button::after {
content: none !important;
display: none !important;
}
@media (max-width: 768px) {
#page-home.wa-home .newsletter-row,
#page-products .products-newsletter-section .newsletter-row,
#productsNewsletterSection .newsletter-row,
.products-newsletter-section .newsletter-row,
#page-product .product-newsletter-section .newsletter-row,
.product-newsletter-section .newsletter-row,
.newsletter-popup-section .newsletter-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
min-height: 0 !important;
gap: 10px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
#page-home.wa-home .newsletter-row input,
#page-products .products-newsletter-section .newsletter-row input,
#productsNewsletterSection .newsletter-row input,
.products-newsletter-section .newsletter-row input,
#page-product .product-newsletter-section .newsletter-row input,
.product-newsletter-section .newsletter-row input,
.newsletter-popup-section .newsletter-row input {
display: block !important;
box-sizing: border-box !important;
flex: none !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 56px !important;
margin: 0 !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: 14px !important;
background: #fff !important;
color: #222 !important;
font-size: 16px !important;
text-align: left !important;
box-shadow: 0 10px 26px rgba(0,0,0,.16) !important;
}
#page-home.wa-home .newsletter-row button,
#page-products .products-newsletter-section .newsletter-row button,
#productsNewsletterSection .newsletter-row button,
.products-newsletter-section .newsletter-row button,
#page-product .product-newsletter-section .newsletter-row button,
.product-newsletter-section .newsletter-row button,
.newsletter-popup-section .newsletter-row button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
box-sizing: border-box !important;
flex: none !important;
width: 100% !important;
grid-column: auto !important;
height: 54px !important;
min-height: 54px !important;
margin: 0 !important;
padding: 0 22px !important;
border: 0 !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #050505, #181818) !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 800 !important;
}
}
/* === Newsletter submit button visibility (2026-07-06) ===
The dark button blended into the dark card and rendered as an almost
invisible outline. Keep it dark/elegant but give it a clear light border,
a solid fill and a shadow so it reads clearly on the dark card.
NOTE: intentionally NOT orange (orange is off-limits without approval). */
#page-home.wa-home .newsletter-row button,
#page-products .products-newsletter-section .newsletter-row button,
#productsNewsletterSection .newsletter-row button,
.products-newsletter-section .newsletter-row button,
#page-product .product-newsletter-section .newsletter-row button,
.product-newsletter-section .newsletter-row button,
.newsletter-popup-section .newsletter-row button {
background: linear-gradient(135deg, #2a2a2a, #111) !important;
color: #fff !important;
border: 1.6px solid rgba(255, 255, 255, .78) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, .45) !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3) !important;
font-weight: 800 !important;
}
#page-home.wa-home .newsletter-row button:hover,
#page-products .products-newsletter-section .newsletter-row button:hover,
#productsNewsletterSection .newsletter-row button:hover,
.products-newsletter-section .newsletter-row button:hover,
#page-product .product-newsletter-section .newsletter-row button:hover,
.product-newsletter-section .newsletter-row button:hover,
.newsletter-popup-section .newsletter-row button:hover {
background: linear-gradient(135deg, #3a3a3a, #1a1a1a) !important;
border-color: #fff !important;
}
/* === Mobile hero CTA placement fix (2026-07-06) === */
@media (max-width: 768px) {
#page-home.wa-home .wa-home-hero .hero-badge {
display: none !important;
}
#page-home.wa-home .wa-home-hero .hero-content {
height: auto !important;
padding-bottom: 132px !important;
}
#page-home.wa-home .wa-home-hero .wa-dark-button {
position: static !important;
inset: auto !important;
width: 100% !important;
min-height: 54px !important;
margin: 18px 0 0 !important;
border-radius: 14px !important;
}
#page-home.wa-home .wa-hero-points {
margin-bottom: 0 !important;
}
}
/* === WohlAura design system polish v1 (2026-07-06) ===
A shared visual layer for homepage, category pages and product pages.
It keeps the current warm/dark/orange identity and standardizes spacing,
cards, buttons, forms, FAQ, product cards and mobile rhythm. */
:root {
--wa-brand-orange: #f05a1a;
--wa-brand-orange-2: #ff7a2a;
--wa-ink: #15110d;
--wa-muted: #6f655c;
--wa-soft: #fff8ef;
--wa-surface: rgba(255, 255, 255, .94);
--wa-line: rgba(43, 31, 22, .10);
--wa-shadow-sm: 0 10px 24px rgba(31, 22, 13, .08);
--wa-shadow-md: 0 18px 48px rgba(31, 22, 13, .12);
--wa-shadow-lg: 0 26px 70px rgba(31, 22, 13, .16);
--wa-radius-sm: 14px;
--wa-radius-md: 20px;
--wa-radius-lg: 28px;
--wa-section-gap: clamp(42px, 5vw, 76px);
}
body {
color: var(--wa-ink);
background:
radial-gradient(circle at 12% 4%, rgba(240, 90, 26, .055), transparent 34%),
linear-gradient(180deg, #fffaf4 0%, #fff8f0 48%, #fffaf6 100%);
}
.page .container {
max-width: 1200px;
}
#page-home.wa-home .section,
#page-products .section,
#page-product .pd-section,
#page-product .product-newsletter-section {
margin-block: var(--wa-section-gap);
}
.section-header,
.wa-section-heading,
#page-products .products-toolbar,
#page-products .products-faq-block,
#page-products .products-reviews-block,
#page-product .pd-section,
#page-product .product-detail,
#page-product .related-products {
color: var(--wa-ink);
}
.section-title,
.wa-section-heading .section-title,
.home-faq-panel h2,
.products-faq-block h2,
.products-reviews-block h2,
.pd-h2 {
letter-spacing: -.035em;
line-height: 1.04;
}
.section-sub,
.product-card .product-stock,
.wa-home-product-info p,
.products-count,
.pd-text,
.pd-faq-answer,
.home-faq-panel details p,
.products-faq-block details p {
color: var(--wa-muted);
}
.section-kicker {
color: var(--wa-brand-orange) !important;
font-weight: 900 !important;
letter-spacing: .06em !important;
}
.wa-dark-button,
.section-more,
.wa-product-cart,
.wa-product-details,
.product-buy-now-btn,
.product-add-btn,
.pd-bundle-btn,
.product-cta-actions .btn,
.newsletter-row button,
.footer-newsletter form button {
min-height: 46px;
border-radius: 13px !important;
font-weight: 850 !important;
letter-spacing: -.01em;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.wa-dark-button:hover,
.section-more:hover,
.wa-product-cart:hover,
.wa-product-details:hover,
.product-buy-now-btn:hover,
.product-add-btn:hover,
.pd-bundle-btn:hover,
.product-cta-actions .btn:hover,
.newsletter-row button:hover,
.footer-newsletter form button:hover {
transform: translateY(-1px);
}
#page-home.wa-home .wa-home-hero {
border-radius: var(--wa-radius-lg);
box-shadow: var(--wa-shadow-lg);
}
#page-home.wa-home .wa-home-hero .wa-dark-button {
justify-content: center !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
#page-home.wa-home .wa-hero-points li {
gap: 10px;
}
#page-home.wa-home .wa-hero-points li::before {
box-shadow: 0 0 0 4px rgba(240, 90, 26, .10);
}
#page-home.wa-home .wa-hero-trust,
#page-home.wa-home .wa-service-strip,
#page-products .products-hero-rating,
#page-products .products-toolbar,
#page-products .products-faq-block,
#page-products .products-reviews-block,
#page-product .product-buy-box,
#page-product .pd-section,
#page-product .pd-section-bg,
.home-faq-panel,
.newsletter-box {
border: 1px solid var(--wa-line) !important;
box-shadow: var(--wa-shadow-sm) !important;
}
#page-home.wa-home .home-product-showcase {
padding-top: clamp(42px, 5vw, 76px);
}
.home-product-tiles {
gap: clamp(12px, 2vw, 20px) !important;
}
.home-product-tile {
border-radius: 20px !important;
overflow: hidden;
box-shadow: var(--wa-shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.home-product-tile:hover {
transform: translateY(-3px);
box-shadow: var(--wa-shadow-md);
}
.home-product-tile::after {
background: linear-gradient(180deg, transparent 22%, rgba(0,0,0,.24) 48%, rgba(0,0,0,.78) 100%) !important;
}
.home-product-tile .wa-tile-icon {
display: none !important;
}
#featuredGrid,
#productsGrid,
#pdRelatedGrid {
align-items: stretch;
}
.wa-home-product-card,
.product-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
border: 1px solid rgba(43, 31, 22, .10) !important;
border-radius: 18px !important;
background: var(--wa-surface) !important;
box-shadow: 0 10px 24px rgba(31, 22, 13, .06) !important;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wa-home-product-card:hover,
.product-card:hover {
transform: translateY(-3px);
border-color: rgba(240, 90, 26, .24) !important;
box-shadow: var(--wa-shadow-md) !important;
}
.wa-home-product-image,
.product-img {
background: #f7efe6 !important;
}
.wa-home-product-image img,
.product-img img {
transition: transform .28s ease;
}
.wa-home-product-card:hover .wa-home-product-image img,
.product-card:hover .product-img img {
transform: scale(1.035);
}
.wa-home-product-info,
.product-info {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
gap: 9px;
}
.wa-home-product-info h3,
.product-name {
line-height: 1.18 !important;
letter-spacing: -.02em;
}
.wa-home-product-info p {
display: -webkit-box !important;
min-height: 2.8em;
overflow: hidden;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
}
.wa-home-product-info > strong,
.product-card-buy-row {
margin-top: auto !important;
}
.wa-product-cart span {
display: none !important;
}
.wa-product-cart,
.product-buy-now-btn,
.product-add-btn,
.product-cta-actions .btn-primary {
background: linear-gradient(135deg, #060606, #171717) !important;
color: #fff !important;
box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}
.wa-product-details,
.product-cta-actions .btn-outline,
.section-more {
border: 1px solid rgba(21, 17, 13, .18) !important;
background: rgba(255,255,255,.88) !important;
color: var(--wa-ink) !important;
}
#page-products .page-header.products-hero-slider {
border-radius: var(--wa-radius-lg) !important;
overflow: hidden;
box-shadow: var(--wa-shadow-lg);
}
#page-products .products-toolbar {
padding: 14px 16px !important;
border-radius: 18px !important;
background: rgba(255,255,255,.88) !important;
backdrop-filter: blur(12px);
}
#page-products .sort-select,
#page-products .view-btn {
border-radius: 12px !important;
border-color: rgba(43,31,22,.14) !important;
}
#page-products .products-grid {
gap: clamp(14px, 2vw, 22px) !important;
}
.home-faq-panel,
#page-products .products-faq-block {
border-radius: var(--wa-radius-lg) !important;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,239,.92)) !important;
}
.home-faq-panel details,
.products-faq-block details,
.pd-faq-item {
margin-bottom: 10px !important;
border: 1px solid rgba(43,31,22,.10) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.78) !important;
overflow: hidden;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.home-faq-panel details[open],
.products-faq-block details[open],
.pd-faq-item[open] {
border-color: rgba(240,90,26,.24) !important;
background: #fff !important;
box-shadow: 0 12px 30px rgba(31, 22, 13, .07);
}
.home-faq-panel summary,
.products-faq-block summary,
.pd-faq-summary {
min-height: 56px;
padding: 16px 18px !important;
font-weight: 850 !important;
letter-spacing: -.015em;
}
.home-faq-panel details p,
.products-faq-block details p,
.pd-faq-answer {
padding: 0 18px 18px !important;
line-height: 1.6 !important;
}
.newsletter-section {
padding-block: clamp(34px, 4vw, 58px) !important;
}
.newsletter-box {
border-radius: var(--wa-radius-lg) !important;
overflow: hidden;
}
.newsletter-box h2 {
letter-spacing: -.04em !important;
line-height: 1.05 !important;
}
.newsletter-row input,
.footer-newsletter form input {
border-radius: 14px !important;
border: 1px solid rgba(43,31,22,.12) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}
#page-product .product-detail {
gap: clamp(20px, 3vw, 36px) !important;
}
#page-product .product-buy-box {
border-radius: 22px !important;
background: linear-gradient(180deg, #fff, #fffaf4) !important;
}
#page-product .product-price-row strong {
letter-spacing: -.045em;
}
#page-product .product-benefit-card,
#page-product .pd-whofor-item,
#page-product .pd-safety-item,
#page-product .pd-detail-block,
#page-product .product-trust-item {
border-radius: 16px !important;
}
#page-product .product-cta-actions {
gap: 10px !important;
}
#page-product .pd-section {
border-radius: var(--wa-radius-lg) !important;
background: rgba(255,255,255,.72);
}
#page-product .pd-selling-split,
#page-product .pd-cycle-grid {
gap: clamp(18px, 3vw, 34px) !important;
align-items: center;
}
#page-product .pd-promo-video,
#page-product .pd-cycle-img-wrap img {
border-radius: 22px !important;
box-shadow: var(--wa-shadow-md);
}
.reviews-summary,
.review-card,
.pd-review-card,
#productsRevSummary,
#pdRevSummary {
border-radius: 18px !important;
}
.footer {
border-top-left-radius: 28px;
border-top-right-radius: 28px;
box-shadow: 0 -18px 60px rgba(0,0,0,.10);
}
.footer a {
transition: color .18s ease, opacity .18s ease;
}
.footer a:hover {
color: var(--wa-brand-orange) !important;
}
@media (max-width: 768px) {
:root {
--wa-section-gap: 34px;
}
.page .container {
padding-inline: 14px !important;
}
#page-home.wa-home .section,
#page-products .section,
#page-product .pd-section {
margin-block: 34px !important;
}
.section-title,
.wa-section-heading .section-title,
.home-faq-panel h2,
.products-faq-block h2,
.products-reviews-block h2,
.pd-h2 {
font-size: clamp(27px, 8vw, 38px) !important;
line-height: 1.04 !important;
}
#page-home.wa-home .wa-home-hero {
border-radius: 0 0 24px 24px !important;
}
#page-home.wa-home .wa-home-hero .hero-badge {
display: none !important;
}
#page-home.wa-home .wa-home-hero .hero-content {
height: auto !important;
padding-bottom: 132px !important;
}
#page-home.wa-home .wa-home-hero .wa-dark-button {
position: static !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 54px !important;
margin: 18px 0 0 !important;
}
#page-home.wa-home .wa-hero-points {
margin-bottom: 0 !important;
}
#page-home.wa-home .wa-hero-trust {
border-radius: 18px !important;
}
.home-product-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.wa-home-products,
#productsGrid,
#pdRelatedGrid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
.wa-home-product-card,
.product-card {
border-radius: 15px !important;
}
.wa-home-product-info,
.product-info {
padding: 12px !important;
}
.wa-home-product-info h3,
.product-name {
font-size: 14.5px !important;
}
.wa-home-product-info p {
min-height: 2.65em;
font-size: 12.5px !important;
}
.wa-product-cart,
.product-buy-now-btn,
.product-add-btn {
min-height: 42px !important;
font-size: 13px !important;
}
#page-products .page-header.products-hero-slider {
margin-inline: 0 !important;
border-radius: 22px !important;
}
#page-products .products-toolbar {
gap: 10px;
align-items: stretch !important;
}
#page-products .toolbar-right {
width: 100%;
}
#page-products .sort-select {
width: 100%;
min-height: 46px;
}
#page-product .product-buy-box,
#page-product .pd-section,
.home-faq-panel,
#page-products .products-faq-block,
.newsletter-box {
border-radius: 20px !important;
}
#page-product .product-cta-actions {
display: grid !important;
grid-template-columns: 1fr !important;
}
#page-product .product-trust-strip {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#page-product .pd-selling-split,
#page-product .pd-cycle-grid {
grid-template-columns: 1fr !important;
}
.newsletter-box {
padding: 22px 18px !important;
text-align: center;
}
.newsletter-box h2 {
font-size: var(--nl-title-mobile-size, 25px) !important;
}
.newsletter-box p {
margin-inline: auto;
max-width: 32em;
}
.footer {
border-radius: 24px 24px 0 0;
}
}
/* ============================================================
MOBILE CHAT ANTI-OVERLAP (chat stays position:fixed)
Compact circular FAB + content safe-space so the fixed chat
never hides buy buttons, prices or headings.
============================================================ */
@media (max-width: 768px) {
/* Compact icon-only FAB — much smaller footprint, tucked into the corner */
#chatToggleBtn.chat-toggle-btn {
min-width: 0 !important;
width: 52px !important;
height: 52px !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 50% !important;
}
#chatToggleBtn .chat-toggle-label { display: none !important; }
#chatToggleBtn .chat-unread { top: -2px !important; right: -2px !important; }
.chat-widget {
right: 12px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
}
/* Product detail: lift the chat above the sticky buy bar when it is open */
body.pdsticky-open .chat-widget {
bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
}
/* Reserve space at the end of every SPA page so the last row / CTA /
footer content is never trapped under the fixed chat button */
#page-home,
#page-products,
#page-product,
#page-checkout {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
}
/* Proactive promo teaser: hidden by default on mobile, but when it fires
(.show) it appears as a compact bubble tucked into the bottom-right corner
just above the chat button — small enough not to cover page headings. */
.chat-promo-bubble {
display: none !important;
}
.chat-promo-bubble.show {
display: flex !important;
width: min(74vw, 244px) !important;
right: 0 !important;
bottom: 64px !important;
padding: 13px 12px 12px !important;
}
}
/* ============================================================
UNIFIED TYPOGRAPHY — one pair for the whole site
Headings: Calistoga (warm, cozy, premium display serif)
Body / UI: Manrope (already the base font)
Calistoga ships a single 400 weight, so we normalise heading
weights to 400 to avoid faux-bold artefacts.
============================================================ */
.hero-title,
#page-home .hero-title,
.wa-home .hero-title,
.section-title,
.wa-home .section-title,
.wa-section-heading h2,
.wa-bio-benefits h2,
.reviews-head .section-title,
.footer .logo-name,
.footer-brand em {
font-family: Manrope, system-ui, -apple-system, sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
/* Footer tagline: same display font as the rest of the site, no italic */
.footer-brand em {
font-style: normal !important;
}
/* ============================================================
CATEGORY TILE SUBTITLE — legible over photos (WCAG AA)
Pure white + medium weight + text-shadow, sitting on a
stronger bottom scrim so contrast holds on any photo.
============================================================ */
#page-home .home-product-tile p,
#page-home.wa-home .home-product-tile p {
color: #ffffff !important;
font-weight: 500 !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, .6) !important;
}
.home-product-tile::after,
.fire-banner::after {
background: linear-gradient(180deg, transparent 16%, rgba(10, 10, 10, .55) 52%, rgba(10, 10, 10, .9) 100%) !important;
}
/* ============================================================
PRODUCTS PAGE POLISH — mobile cards, full-width hero, compact newsletter
Keeps the current WohlAura style, but fixes the category-page layout:
rounded product photos, stable price/cart row, centered reviews title.
============================================================ */
#page-products .page-header.products-hero-slider {
border-radius: 0 !important;
}
#page-products .products-hero-media,
#page-products .products-hero-media img,
#page-products .products-hero-slide {
border-radius: 0 !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card {
padding: 10px !important;
border-radius: 24px !important;
overflow: visible !important;
background: #fffaf3 !important;
box-shadow: 0 14px 34px rgba(41, 31, 20, .10) !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img {
overflow: hidden !important;
border-radius: 20px !important;
background: #f5eadc !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img img,
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img > picture,
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img > picture img {
border-radius: 20px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-info {
padding: 13px 4px 2px !important;
min-height: 188px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-name {
min-height: 0;
font-weight: 900 !important;
letter-spacing: -.035em;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-swatches {
min-height: 28px;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-buy-row {
display: grid !important;
grid-template-columns: minmax(0, auto) minmax(108px, max-content) !important;
align-items: center !important;
gap: 8px !important;
margin-top: auto !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-price {
min-width: 0 !important;
flex: 0 1 auto !important;
white-space: nowrap !important;
}
/* Preis etwas kleiner: seit der Umstellung auf 2 Nachkommastellen (€334,00)
sind Preise breiter — bei 34px kollidierten sie mit dem Kauf-Button. */
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .price-current {
font-size: clamp(20px, 2.1vw, 26px) !important;
letter-spacing: -.03em;
white-space: nowrap;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-actions {
justify-content: flex-end !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn {
min-width: 108px !important;
min-height: 42px !important;
padding: 0 13px !important;
border-radius: 14px !important;
background: linear-gradient(145deg, #090909, #171717) !important;
color: #fff !important;
font-size: 13.5px !important;
font-weight: 800 !important;
gap: 8px !important;
white-space: nowrap !important;
box-shadow: 0 16px 28px rgba(20, 16, 12, .18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn svg {
display: none !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background: url("/assets/wa-cart-wagen.png") center / contain no-repeat;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn:hover {
background: linear-gradient(145deg, #151515, #020202) !important;
color: #fff !important;
transform: translateY(-1px);
}
#productsNewsletterSection.products-newsletter-section {
padding-block: 22px !important;
margin-block: 28px !important;
}
#productsNewsletterSection.products-newsletter-section .newsletter-box {
padding-block: 22px !important;
}
#productsReviewsSection > h2,
#productsReviewsSection .section-title {
text-align: center !important;
margin-inline: auto !important;
}
@media (max-width: 768px) {
#page-products .page-header.products-hero-slider {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
border-radius: 0 !important;
}
#page-products .products-hero-content {
border-radius: 0 !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card {
padding: 8px !important;
border-radius: 20px !important;
box-shadow: none !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img,
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img img,
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img > picture,
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-img > picture img {
border-radius: 16px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-info {
padding: 11px 2px 2px !important;
min-height: 178px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-name {
min-height: 0;
font-size: 15px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-buy-row {
grid-template-columns: minmax(46px, auto) minmax(104px, max-content) !important;
gap: 5px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .price-current {
font-size: 24px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn {
min-width: 104px !important;
min-height: 42px !important;
padding: 0 11px !important;
border-radius: 14px !important;
gap: 7px !important;
font-size: 12.5px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn::before {
width: 18px;
height: 18px;
flex-basis: 18px;
}
#productsNewsletterSection.products-newsletter-section {
padding-block: 10px !important;
margin-block: 20px !important;
}
#productsNewsletterSection.products-newsletter-section .newsletter-box {
padding: 18px 16px !important;
}
#productsReviewsSection > h2,
#productsReviewsSection .section-title {
text-align: center !important;
}
}
@media (max-width: 380px) {
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn {
min-width: 96px !important;
padding-inline: 9px !important;
font-size: 12px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn .product-add-label {
display: inline !important;
}
}
/* ============================================================
MOBILE FAQ — clean row style (per on-page annotation)
Removes heavy cards/borders/shadows on mobile only.
Desktop card style (defined earlier, outside @media) is untouched.
Applies to home FAQ (.home-faq-panel) and product FAQ (.pd-faq-*).
============================================================ */
@media (max-width: 768px) {
#page-home.wa-home .home-faq-panel details,
#page-product .pd-faq-item {
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(43, 31, 22, .12) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
}
#page-home.wa-home .home-faq-panel details[open],
#page-product .pd-faq-item[open] {
border-color: rgba(43, 31, 22, .12) !important;
background: transparent !important;
box-shadow: none !important;
}
#page-home.wa-home .home-faq-panel details:first-of-type,
#page-product .pd-faq-list .pd-faq-item:first-child {
border-top: 1px solid rgba(43, 31, 22, .12) !important;
border-radius: 0 !important;
}
#page-home.wa-home .home-faq-panel details:last-of-type {
border-radius: 0 !important;
}
/* Question row: single line, chevron on the right, finger-friendly */
#page-home.wa-home .home-faq-panel summary,
#page-product .pd-faq-item .pd-faq-summary {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 52px !important;
padding: 14px 4px 14px 2px !important;
font-size: 15px !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
line-height: 1.4 !important;
color: #1c140d !important;
list-style: none !important;
}
#page-home.wa-home .home-faq-panel summary::-webkit-details-marker,
#page-product .pd-faq-item .pd-faq-summary::-webkit-details-marker { display: none !important; }
/* Down chevron → rotates up when open (overrides the pre-existing orange chevron) */
#page-home.wa-home .home-faq-panel summary::after,
#page-product .pd-faq-item .pd-faq-summary::after {
content: "" !important;
position: static !important;
right: auto !important;
flex-shrink: 0 !important;
width: 9px !important; height: 9px !important;
margin: -3px 0 0 0 !important;
border: 2px solid #6b5a49 !important;
border-left: 0 !important;
border-top: 0 !important;
border-radius: 1px !important;
background: none !important;
color: transparent !important;
transform: rotate(45deg) !important;
transition: transform .25s ease, margin-top .25s ease !important;
}
#page-home.wa-home .home-faq-panel details[open] summary::after,
#page-product .pd-faq-item[open] .pd-faq-summary::after {
transform: rotate(-135deg) !important;
margin-top: 3px !important;
}
/* Answer: readable contrast, smooth reveal */
#page-home.wa-home .home-faq-panel details p,
#page-product .pd-faq-item .pd-faq-answer {
padding: 0 2px 16px !important;
margin: 0 !important;
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #4b4238 !important;
}
#page-home.wa-home .home-faq-panel details[open] p,
#page-product .pd-faq-item[open] .pd-faq-answer {
animation: faqRevealMob .28s ease both;
}
}
@keyframes faqRevealMob {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
MOBILE CATALOG CARD (per on-page annotations)
- Warenkorb button sits BELOW the price, full card width.
- No forced empty space: card height equalises via grid stretch +
flex-grow + margin-top:auto, so the gap only appears to align a
card whose row-neighbour has variations. Desktop untouched.
============================================================ */
@media (max-width: 768px) {
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-info {
min-height: 0 !important;
flex: 1 1 auto !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-swatches {
min-height: 0 !important;
gap: 9px !important;
margin: 2px 0 8px !important; /* sit closer to the product name above */
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .pcard-swatch {
width: 36px !important;
height: 36px !important;
background-size: cover !important;
background-position: center !important;
}
/* Price on its own line, full-width button below it */
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-buy-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
margin-top: auto !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-price {
min-width: 0 !important;
justify-content: flex-start !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .price-current {
font-size: 23px !important;
white-space: nowrap !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-actions {
width: 100% !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn {
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
padding: 0 14px !important;
border-radius: 14px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
gap: 8px !important;
white-space: nowrap !important;
box-shadow: 0 10px 20px rgba(20, 16, 12, .16) !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn .product-add-label {
display: inline !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn::before {
width: 18px !important;
height: 18px !important;
flex-basis: 18px !important;
}
}
/* ============================================================
UNIFIED CORNER RADII — product cards 20px, product images 16px
(all four corners). Scope: product grids only (home bestsellers,
category link tiles, product-page "similar products" grid).
The main product gallery image is intentionally NOT changed.
============================================================ */
/* Home — category link tiles (full-bleed image cards) */
#page-home.wa-home .home-product-tile {
border-radius: 20px !important;
overflow: hidden !important;
}
/* Home — bestseller cards + their images */
#page-home.wa-home .wa-home-product-card {
border-radius: 20px !important;
}
#page-home.wa-home .wa-home-product-image,
#page-home.wa-home .wa-home-product-image img {
border-radius: 16px !important;
overflow: hidden !important;
}
/* Product page — "similar / recommended products" grid cards (two columns) */
#page-product .product-card {
border-radius: 20px !important;
}
#page-product .product-card .product-img,
#page-product .product-card .product-img img {
border-radius: 16px !important;
overflow: hidden !important;
}
/* ============================================================
PRODUCT INFO ACCORDION ("Technische Daten" etc.) → matches the
clean FAQ row style (per annotation). Mobile, same as the FAQ.
============================================================ */
@media (max-width: 768px) {
#page-product .product-info-accordion .info-accordion-item {
border: 0 !important;
border-bottom: 1px solid rgba(43, 31, 22, .12) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#page-product .product-info-accordion .info-accordion-item:first-child {
border-top: 1px solid rgba(43, 31, 22, .12) !important;
}
#page-product .info-accordion-title {
min-height: 52px !important;
padding: 14px 4px 14px 2px !important;
font-size: 15px !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
color: #1c140d !important;
gap: 14px !important;
}
/* Replace the grey circle + svg with the same minimal caret as the FAQ */
#page-product .info-accordion-title .info-accordion-icon-wrap {
display: none !important;
}
#page-product .info-accordion-title::after {
content: "" !important;
flex-shrink: 0;
width: 9px; height: 9px;
margin-top: -3px;
border: 2px solid #6b5a49;
border-left: 0;
border-top: 0;
border-radius: 1px;
transform: rotate(45deg);
transition: transform .25s ease, margin-top .25s ease;
}
#page-product .info-accordion-item[open] .info-accordion-title::after {
transform: rotate(-135deg);
margin-top: 3px;
}
#page-product .info-accordion-body {
padding: 0 2px 16px !important;
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #4b4238 !important;
}
}
/* ============================================================
UNIFIED QUESTION / ACCORDION STYLE — ALL VIEWPORTS
One consistent clean-row look for every "questions" block so none
differs from the others: home FAQ, product FAQ, and the product
info-accordion ("Technische Daten"). Applies on desktop AND mobile.
============================================================ */
/* Home FAQ: drop the heavy white card wrapper so it matches the others */
#page-home.wa-home .home-faq-panel {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Items → clean rows with a single thin divider */
#page-home.wa-home .home-faq-panel details,
#page-faq .home-faq-panel details,
#page-product .pd-faq-item,
#page-product .product-info-accordion .info-accordion-item {
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(43, 31, 22, .12) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden;
}
#page-home.wa-home .home-faq-panel details[open],
#page-product .pd-faq-item[open],
#page-product .product-info-accordion .info-accordion-item[open] {
border-color: rgba(43, 31, 22, .12) !important;
background: transparent !important;
box-shadow: none !important;
}
#page-home.wa-home .home-faq-panel details:first-of-type,
#page-faq .home-faq-panel details:first-of-type,
#page-product .pd-faq-list .pd-faq-item:first-child,
#page-product .product-info-accordion .info-accordion-item:first-child {
border-top: 1px solid rgba(43, 31, 22, .12) !important;
border-radius: 0 !important;
}
/* Neutralise the rounded first/last corners so every row is identical */
#page-home.wa-home .home-faq-panel details:first-of-type,
#page-home.wa-home .home-faq-panel details:last-of-type {
border-radius: 0 !important;
}
/* Question row → single line, caret on the right */
#page-home.wa-home .home-faq-panel summary,
#page-faq .home-faq-panel summary,
#page-product .pd-faq-item .pd-faq-summary,
#page-product .info-accordion-title {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 52px !important;
padding: 14px 4px 14px 2px !important;
font-size: 15px !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
line-height: 1.4 !important;
color: #1c140d !important;
list-style: none !important;
}
#page-home.wa-home .home-faq-panel summary::-webkit-details-marker,
#page-faq .home-faq-panel summary::-webkit-details-marker,
#page-product .pd-faq-item .pd-faq-summary::-webkit-details-marker { display: none !important; }
/* Hide the info-accordion's grey circle icon; use the shared caret instead */
#page-product .info-accordion-title .info-accordion-icon-wrap { display: none !important; }
/* Shared down-caret → rotates up when open */
#page-home.wa-home .home-faq-panel summary::after,
#page-product .pd-faq-item .pd-faq-summary::after,
#page-product .info-accordion-title::after {
content: "" !important;
position: static !important;
right: auto !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
width: 10px !important; height: 10px !important;
min-width: 0 !important;
margin: -3px 0 0 0 !important;
border: 0 solid #6b5a49 !important;
border-right: 2px solid #6b5a49 !important;
border-bottom: 2px solid #6b5a49 !important;
border-radius: 0 !important;
background: none !important;
background-image: none !important;
color: transparent !important;
transform: rotate(45deg) !important;
transition: transform .25s ease, margin-top .25s ease !important;
}
#page-home.wa-home .home-faq-panel details[open] summary::after,
#page-product .pd-faq-item[open] .pd-faq-summary::after,
#page-product .info-accordion-item[open] .info-accordion-title::after {
transform: rotate(-135deg) !important;
margin-top: 3px !important;
}
/* Answer / body */
#page-home.wa-home .home-faq-panel details p,
#page-faq .home-faq-panel details p,
#page-product .pd-faq-item .pd-faq-answer,
#page-product .info-accordion-body {
padding: 0 2px 16px !important;
margin: 0 !important;
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #4b4238 !important;
}
/* ============================================================
FAQ / accordion caret — full control of BOTH states so that
opening ONLY rotates the same chevron (no shape/icon change).
Home FAQ is qualified by #homeFaqSection (2 IDs) to outrank the
legacy circular SVG-icon rules that reappeared on [open].
============================================================ */
#page-home.wa-home #homeFaqSection .home-faq-panel details summary::after,
#page-faq .home-faq-panel details summary::after,
#page-product .pd-faq-item .pd-faq-summary::after,
#page-product .info-accordion-title::after {
content: "" !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
width: 10px !important; height: 10px !important;
min-width: 0 !important;
margin: -3px 0 0 0 !important;
border: 0 solid #6b5a49 !important;
border-right: 2px solid #6b5a49 !important;
border-bottom: 2px solid #6b5a49 !important;
border-radius: 0 !important;
background: none !important;
background-image: none !important;
color: transparent !important;
transform: rotate(45deg) !important;
transition: transform .25s ease, margin-top .25s ease !important;
}
#page-home.wa-home #homeFaqSection .home-faq-panel details[open] summary::after,
#page-faq .home-faq-panel details[open] summary::after,
#page-product .pd-faq-item[open] .pd-faq-summary::after,
#page-product .info-accordion-item[open] .info-accordion-title::after {
/* identical chevron — ONLY the rotation changes */
border: 0 solid #6b5a49 !important;
border-right: 2px solid #6b5a49 !important;
border-bottom: 2px solid #6b5a49 !important;
width: 10px !important; height: 10px !important;
background: none !important;
background-image: none !important;
transform: rotate(-135deg) !important;
margin-top: 3px !important;
}
/* Single bundle block — neutralise the wrapper card at any specificity/order
(the inner .pd-bundle-offer is the only visible card) */
#page-product .product-marketing .pd-bundle-section.pd-section,
#page-product .pd-bundle-section.pd-section,
.pd-bundle-section.pd-section {
background: none !important;
border: 0 !important;
border-top: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 18px !important;
}
/* Product-page section cards had 0 horizontal padding → text touched the edges.
Give them comfortable inner padding; keep full-bleed video and the bundle at 0. */
#page-product .product-marketing .pd-section {
padding-left: clamp(20px, 3vw, 32px) !important;
padding-right: clamp(20px, 3vw, 32px) !important;
}
#page-product .product-marketing .pd-section:has(.pd-selling-split),
#page-product .product-marketing .pd-bundle-section.pd-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Reduce the large vertical gaps between product-page sections */
#page-product .product-marketing .pd-section {
margin-block: clamp(16px, 2vw, 28px) !important;
}
/* Tighter vertical rhythm on home & category pages (sections had 56–82px padding + 64px margin) */
#page-home.wa-home .section,
#page-products .section {
margin-block: clamp(12px, 1.4vw, 22px) !important;
padding-block: clamp(30px, 3.4vw, 46px) !important;
}
/* keep comfortable breathing room right below the hero on the home page */
#page-home.wa-home .home-product-showcase {
padding-top: clamp(52px, 6vw, 100px) !important;
}
/* Product gallery: keep a fixed square so images AND the video slide never change
the container height (video with a different aspect was making the block jump
while swiping). Any media fills the square via object-fit. */
.product-gallery .product-carousel {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.product-gallery .product-carousel .carousel-slide {
height: 100% !important;
}
.product-gallery .product-carousel .carousel-slide img,
.product-gallery .product-carousel .carousel-slide video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* ── Header alignment + nav hover fixes (desktop) ───────────────────── */
/* Header content must have the SAME width as the content blocks below (.container).
Base .container = 1180px; product/products pages use 1200px. Match both. */
.header-main-inner {
width: 100% !important;
max-width: 1180px !important;
margin-inline: auto !important;
padding-inline: 20px !important;
box-sizing: border-box !important;
}
body.product-active .header-main-inner,
body.products-active .header-main-inner,
body.checkout-active .header-main-inner {
max-width: 1200px !important;
}
/* (First hero block width is aligned to the sections at its source rule
#page-home.wa-home .wa-home-hero → 1180px.) */
/* The product sticky buy bar is a mobile-only element; on desktop it rendered as
a stray full-width "In den Warenkorb" block at the bottom of the page. Hide it. */
@media (min-width: 769px) {
#pdStickyBar { display: none !important; }
}
/* Flat desktop nav links: keep consistent padding (no hover jump) and make the
hover/active state a dark pill with WHITE text (was black-on-black = invisible) */
.nav-desktop-flat .nav-cat-link {
padding: 7px 13px !important;
border-radius: 999px !important;
white-space: nowrap !important;
transition: background .15s ease, color .15s ease !important;
}
.nav-desktop-flat .nav-cat-link:hover,
.nav-desktop-flat .nav-cat-link.active {
background: #0a0a0a !important;
color: #ffffff !important;
}
/* ── Header nav fit (desktop) ───────────────────────────────────────────
With 6 categories the flat nav no longer fit at ~1180px inner width and
its links overflowed onto the logo (left) and the action icons (right).
1) Tighten the inter-item gap and link padding so all categories fit on
wide screens (font size unchanged — text looks identical).
2) Keep the original mobile breakpoint: the full navigation remains
available on tablet/desktop widths and collapses only on mobile. ───── */
.nav-desktop-flat {
gap: clamp(2px, 0.5vw, 12px) !important;
}
.nav-desktop-flat .nav-cat-link {
padding: 7px 8px !important;
}
@media (max-width: 768px) {
.nav-desktop,
.nav-desktop.nav-desktop-flat { display: none !important; }
.mobile-menu-btn { display: flex !important; }
}
/* ── Home category tiles: no solid black band — full-bleed photo + a scrim
that fades to fully transparent by the middle (per annotation). Desktop only;
the description was removed from the markup. ──────────────────────── */
@media (min-width: 769px) {
#page-home .home-product-tile img {
height: 100% !important;
}
#page-home .home-product-tile::after {
inset: 0 !important;
background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .35) 68%, rgba(0, 0, 0, .82) 100%) !important;
}
}
/* ── Catalog card buy-row: the "Warenkorb" button was oversized (151×48, weight
900) and crowded the price. Make it a compact, tidy CTA and give the price
clear breathing room. Desktop/tablet only. ──────────────────────────────── */
@media (min-width: 769px) {
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-buy-row {
grid-template-columns: 1fr auto !important;
gap: 10px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn {
min-width: 0 !important;
min-height: 40px !important;
height: 40px !important;
padding: 0 14px !important;
border-radius: 12px !important;
font-size: 13px !important;
font-weight: 800 !important;
gap: 7px !important;
box-shadow: 0 6px 14px rgba(20, 16, 12, .16) !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn::before {
width: 17px !important;
height: 17px !important;
flex-basis: 17px !important;
}
}
/* ── Catalog card price: the sale price keeps the SAME baseline position as on
every other card; the crossed-out old price floats ABOVE it (absolute, so it
doesn't push the sale price down) and is LEFT-aligned with the sale price. The
block shrinks to the sale price and is centred in the left zone. Desktop. */
@media (min-width: 769px) {
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-price {
position: relative !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
justify-self: center !important;
line-height: 1.02 !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .price-old {
position: absolute !important;
bottom: 100% !important;
left: 12px !important; /* start around the middle of the sale price's € sign */
transform: none !important;
margin: 0 0 1px !important;
font-size: 16px !important;
white-space: nowrap !important;
}
}
/* ── Catalog cards: within a row all cards match the tallest card's height, so
their prices align on one baseline (the price sits at the bottom). The height
is content-driven — a row with a colour-variation (or longer-name) card is
taller and everything in it lines up under that card; a row of plain cards
stays compact (no arbitrary min-height). Bigger colour swatches that show the
variant's first photo. Desktop/tablet only. ─────────────────────────────── */
@media (min-width: 769px) {
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) { align-items: stretch !important; }
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card { align-self: stretch !important; }
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-info {
flex: 1 1 auto !important;
min-height: 0 !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-name { margin-bottom: 8px !important; }
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-buy-row { margin-top: auto !important; }
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-swatches {
gap: 8px !important;
margin: 2px 0 0 !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .pcard-swatch {
width: 34px !important;
height: 34px !important;
background-size: cover !important;
background-position: center !important;
}
}
/* ── Testimonials: show the review as a small caption on the TOP-LEFT with only
a faint darkening, so the photo behind stays clearly visible. Smaller text,
and the quote is capped to a few lines so a long review can never grow to
cover the whole image. ──────────────────────────────────────────────────── */
#page-home #homeTestimonialSlides .wa-testimonial-overlay {
inset: 22px auto auto 22px !important;
width: min(58%, 380px) !important;
padding: 15px 18px !important;
background: rgba(0, 0, 0, .30) !important;
-webkit-backdrop-filter: blur(3px) !important;
backdrop-filter: blur(3px) !important;
border-color: rgba(255, 255, 255, .14) !important;
}
#page-home #homeTestimonialSlides .wa-testimonial-overlay blockquote {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: clamp(13px, 1vw, 15px) !important;
line-height: 1.32 !important;
margin: 0 0 10px !important;
}
#page-home #homeTestimonialSlides .wa-testimonial-overlay .wa-testimonial-meta {
font-size: 12.5px !important;
}
/* Long review → a single centered down-chevron hints it can be opened; click to
expand and read the full text in place. */
#page-home #homeTestimonialSlides .wa-testimonial-overlay.is-truncated { cursor: pointer; }
#page-home #homeTestimonialSlides .wa-testimonial-overlay.expanded {
inset: 16px auto auto 22px !important; /* top-left; grows only as tall as the text */
width: min(62%, 420px) !important;
max-height: calc(100% - 32px) !important; /* …but never past the image; then it scrolls */
display: flex !important;
flex-direction: column !important;
background: rgba(0, 0, 0, .55) !important;
cursor: default;
}
#page-home #homeTestimonialSlides .wa-testimonial-overlay.expanded blockquote {
display: block !important;
-webkit-line-clamp: unset !important;
overflow-y: auto !important;
flex: 1 1 auto !important;
min-height: 0 !important;
scrollbar-width: none;
}
#page-home #homeTestimonialSlides .wa-testimonial-overlay.expanded blockquote::-webkit-scrollbar { display: none; }
/* Reserve room for whichever chevron is visible so it never covers the text. */
#page-home #homeTestimonialSlides .wa-testimonial-overlay.show-down { padding-bottom: 32px !important; }
#page-home #homeTestimonialSlides .wa-testimonial-overlay.show-up { padding-top: 32px !important; }
/* Centered chevrons (top = scroll up, bottom = open / scroll down). A clean thin
chevron (no circle/border), clearly visible via a soft shadow on any photo. */
#page-home #homeTestimonialSlides .wa-review-arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 3;
padding: 5px 18px;
border: 0;
background: transparent;
color: #fff;
line-height: 0;
cursor: pointer;
display: none;
opacity: .95;
transition: opacity .15s ease;
}
#page-home #homeTestimonialSlides .wa-review-arrow svg {
display: block;
width: 30px;
height: 13px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .95));
}
#page-home #homeTestimonialSlides .wa-review-arrow:hover { opacity: 1; }
#page-home #homeTestimonialSlides .wa-review-down { bottom: 4px; }
#page-home #homeTestimonialSlides .wa-review-up { top: 4px; }
#page-home #homeTestimonialSlides .wa-testimonial-overlay.show-down .wa-review-down { display: block; }
#page-home #homeTestimonialSlides .wa-testimonial-overlay.show-up .wa-review-up { display: block; }
/* Gentle opacity pulse on the collapsed "open" chevron to draw the eye — no
movement, so it stays an easy, reliable click target. */
#page-home #homeTestimonialSlides .wa-testimonial-overlay:not(.expanded).show-down .wa-review-down {
animation: waReviewPulse 1.8s ease-in-out infinite;
}
@keyframes waReviewPulse {
0%, 100% { opacity: .78; }
50% { opacity: 1; }
}
@media (max-width: 768px) {
#page-home #homeTestimonialSlides .wa-testimonial-overlay.expanded {
inset: 14px 14px 14px 14px !important;
width: auto !important;
}
}
@media (max-width: 768px) {
#page-home #homeTestimonialSlides .wa-testimonial-overlay {
width: auto !important;
inset: 16px 16px auto 16px !important;
}
#page-home #homeTestimonialSlides .wa-testimonial-overlay blockquote {
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
}
/* ── Testimonials: manual prev/next arrows — plain chevrons (no circle/border),
kept clearly visible with a soft shadow. ───────────────────────────────── */
#page-home #homeTestimonialPanel .wa-testimonial-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: auto;
height: auto;
padding: 6px 10px;
border: 0;
background: transparent;
color: #fff;
font-size: 46px;
line-height: 1;
cursor: pointer;
opacity: .92;
text-shadow: 0 1px 6px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .6);
transition: opacity .15s ease, transform .15s ease;
}
#page-home #homeTestimonialPanel .wa-testimonial-nav:hover { opacity: 1; }
#page-home #homeTestimonialPanel .wa-testimonial-prev { left: 12px; }
#page-home #homeTestimonialPanel .wa-testimonial-next { right: 12px; }
@media (max-width: 768px) {
#page-home #homeTestimonialPanel .wa-testimonial-nav { font-size: 38px; padding: 4px 8px; }
#page-home #homeTestimonialPanel .wa-testimonial-prev { left: 6px; }
#page-home #homeTestimonialPanel .wa-testimonial-next { right: 6px; }
}
/* ── Newsletter promo: it had oversized top/bottom spacing everywhere it appears
— home, category (products) and the product page (which had a 76px margin).
Tighten it uniformly so it sits close to the neighbouring sections. ──────── */
#page-home .section.newsletter-section,
#page-products #productsNewsletterSection.products-newsletter-section,
#page-product .section.newsletter-section.product-newsletter-section {
padding-block: 14px !important;
margin-block: 10px !important;
}
/* On the category page, also pull the reviews block up under the newsletter. */
#page-products #productsNewsletterSection.products-newsletter-section + .products-reviews-block {
margin-top: 16px !important;
}
/* ── Footer newsletter form: the submit button's rounded left corners left an
ugly notch where it meets the input. Square it so it sits flush (the form's
overflow:hidden still rounds the outer right corners). ─────────────────── */
.footer-newsletter form button { border-radius: 0 !important; }
/* The email input inherits the storefront's light-theme input style (14px
radius + white inset top highlight), which shows as odd white rounded corners
at the top over the dark footer. Flatten it to sit flush inside the form. */
.footer-newsletter form input {
border-radius: 8px 0 0 8px !important;
box-shadow: none !important;
}
/* Apple Pay badge: white card with the Apple mark + "Pay". */
.footer-newsletter .payment-logo-apple {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
background: #fff !important;
color: #111 !important;
font-size: 13px !important;
font-weight: 800 !important;
}
.footer-newsletter .payment-logo-apple .pay-ico {
width: 14px;
height: 14px;
margin-top: -1px;
}
/* ── Footer payments: real payment logos as uniform rounded-rect badges
(like Apple Pay / Klarna). Every logo sits centered on an identically-sized
rounded card so the row reads as a set of matching chips. ───────────────── */
.footer-newsletter .footer-payments {
gap: 10px !important;
}
.footer-newsletter .footer-payments .pay-img {
height: 38px !important;
width: 62px !important;
object-fit: contain !important;
background: #fff !important;
border-radius: 8px !important;
padding: 5px 8px !important;
box-sizing: border-box !important;
display: block !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, .14) !important;
}
.footer-newsletter .footer-payments .pay-img[alt="Klarna"] {
background: #ffb3c7 !important;
}
/* PayPal & Apple Pay source images carry extra internal whitespace, so their
logos read smaller under object-fit:contain — trim their padding to match. */
.footer-newsletter .footer-payments .pay-img[alt="PayPal"] {
padding: 2px 5px !important;
}
.footer-newsletter .footer-payments .pay-img[alt="Apple Pay"] {
padding: 2px 6px !important;
}
/* === Hero mobile refinements (2026-07-10): legible white text, custom line
breaks, CTA pinned to the bottom of the hero. Appended last so it wins. === */
@media (max-width: 768px) {
/* Taller hero so the copy sits at the top and the CTA at the bottom, with the
fireplace clearly visible between them. The darkening is top-weighted (under
the text) and fades to clear by the mid-lower area so the bioethanol
fireplace reads clearly; no dark band is left at the bottom. */
#page-home.wa-home .wa-home-hero {
height: 512px !important;
min-height: 512px !important;
background:
linear-gradient(90deg, rgba(6,4,3,.82) 0%, rgba(6,4,3,.66) 30%, rgba(6,4,3,.30) 50%, rgba(6,4,3,0) 62%),
url("/assets/home-template-hero.webp?v=4") center center / cover no-repeat !important;
}
/* Soft dark halo under EACH glyph so every line of hero copy stays legible
over bright parts of the photo — no background panel, just per-letter
shadow (tight dark drop + wider soft glow). */
#page-home.wa-home .wa-home-hero .hero-badge,
#page-home.wa-home .wa-home-hero .hero-title,
#page-home.wa-home .wa-home-hero .hero-title span,
#page-home.wa-home .wa-home-hero .hero-desc,
#page-home.wa-home .wa-hero-points li {
text-shadow: 0 1px 2px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,.98), 0 2px 24px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.85) !important;
}
/* Mobile-only line breaks in the description; hide the desktop break. */
#page-home.wa-home .wa-home-hero .hero-desc br.hd-d { display: none !important; }
#page-home.wa-home .wa-home-hero .hero-desc br.hd-m { display: inline !important; }
/* Push the CTA to the bottom of the hero, kept in normal flow (so it can
never overlap the copy) via auto top-margin in the flex column. */
#page-home.wa-home .wa-home-hero > .container {
padding-bottom: 0 !important;
}
#page-home.wa-home .wa-home-hero .hero-content {
height: 100% !important;
padding-bottom: 66px !important;
justify-content: flex-start !important;
}
#page-home.wa-home .wa-home-hero .wa-dark-button {
position: static !important;
inset: auto !important;
margin-top: auto !important;
width: 100% !important;
}
}
/* === Home FAQ answer alignment (2026-07-10) === */
/* The answer paragraph was flush to the panel edge (padding 0 2px), so it ran
further left than the question title and further right under the caret. Match
the title's inset (left) and the caret reservation (right) so every answer
lines up inside the same column as its question. Scoped to the home FAQ so
the product-page accordions keep their own spacing. */
#page-home.wa-home .home-faq-panel details p {
padding: 0 54px 16px 24px !important;
}
@media (max-width: 768px) {
#page-home.wa-home .home-faq-panel details p {
padding: 0 46px 16px 18px !important;
}
}
/* === Mobile category menu: full-height side drawer (was a small content-sized
box that read as "tiny / floating off to the side"). Appended last. === */
@media (max-width: 768px) {
.mobile-menu {
bottom: 0 !important;
max-height: none !important;
border-radius: 0 16px 16px 0 !important;
}
.mobile-menu-inner {
min-height: 100% !important;
box-sizing: border-box !important;
padding: 14px 0 24px !important;
background: #fffaf3 !important;
}
.mobile-menu-label {
display: block !important;
padding: 4px 20px 10px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #9a8a78 !important;
}
.mobile-cat-link {
font-size: 16px !important;
font-weight: 650 !important;
padding: 14px 20px !important;
}
}
/* Extra category tiles (Bioethanol, Zubehör).
Desktop: two wide tiles, each spanning 2 of the 4 columns (2 per row).
Mobile: normal size like every other tile — the 2-col grid puts them 2 per
row automatically, so no override is needed. */
@media (min-width: 769px) {
#page-home.wa-home .home-product-tile--wide {
grid-column: span 2 !important;
}
}
/* === Desktop hero: white halo under each glyph so the dark copy stays legible
over the photo (cream gradient now fades out around the middle). === */
@media (min-width: 769px) {
#page-home.wa-home .wa-home-hero .hero-badge,
#page-home.wa-home .wa-home-hero .hero-title,
#page-home.wa-home .wa-home-hero .hero-title span,
#page-home.wa-home .wa-home-hero .hero-desc,
#page-home.wa-home .wa-hero-points li {
text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.85), 0 0 22px rgba(255,255,255,.65) !important;
}
}
/* Payment icons directly under the product CTA buttons — reassurance at the
moment of decision (mirrors the footer logos, compact). */
.pd-pay-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 12px;
flex-wrap: wrap;
margin: 10px 0 2px;
}
.pd-pay-lock {
display: inline-flex;
align-items: center;
gap: 5px;
color: #6b7280;
font-size: 12px;
font-weight: 650;
}
.pd-pay-icons {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.pd-pay-icons img {
height: 23px;
width: auto;
border-radius: 4px;
background: #fff;
border: 1px solid #ececec;
padding: 2px 4px;
box-sizing: border-box;
}
/* Desktop product page: extra photos (2nd, 3rd…) fill the space under the
gallery in the left column, two per row. Photos only (videos skipped in JS).
Hidden on mobile, where the layout is single-column. */
.pd-side-photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px;
}
.pd-side-photo {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 14px;
background: #f3efe9;
cursor: pointer;
}
.pd-side-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.pd-side-photo:hover img { transform: scale(1.04); }
@media (max-width: 768px) {
.pd-side-photos { display: none !important; }
}
/* Amazon-style magnifier: left image unchanged (lens box shows the zoom area),
magnified view in a panel to the right. Desktop only (JS gates on hover). */
#page-product .product-gallery { position: relative; }
/* keep the left image itself unchanged on hover */
#page-product .carousel-slide img:hover { transform: none; }
#page-product .carousel-slide img { cursor: crosshair; }
.pd-zoom-lens {
position: absolute;
z-index: 25;
border: 1px solid rgba(0, 0, 0, .35);
background: rgba(255, 255, 255, .35);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
pointer-events: none;
}
.pd-zoom-panel {
position: absolute;
top: 0;
left: calc(100% + 16px);
z-index: 60;
overflow: hidden;
border: 1px solid #ece5dd;
border-radius: 14px;
background: #fff;
box-shadow: 0 16px 48px rgba(0, 0, 0, .24);
pointer-events: none;
}
.pd-zoom-img {
position: absolute;
max-width: none;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.pd-zoom-lens, .pd-zoom-panel { display: none !important; }
}
/* --- Warenkorb-Zusammenfassung (Cart drawer summary, PAngV) --- */
.wa-csum{border:1px solid var(--lux-line);background:rgba(255,252,247,.85);border-radius:12px;box-shadow:0 8px 30px rgba(47,34,24,.05);padding:13px 15px;margin:4px 0 10px}
.wa-csum-row{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px;color:#5a6069;padding:4px 0}
.wa-csum-row > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-csum-row > span:last-child{flex:0 0 auto;white-space:nowrap;font-weight:600;color:#2a2f36}
.wa-csum-row-disc > span:last-child{color:#1a7f37}
.wa-csum-free{flex:0 0 auto;white-space:nowrap;color:#1a7f37;font-weight:700}
.wa-csum-del{flex:0 0 auto;white-space:nowrap;text-decoration:line-through;color:#a2a8b0;font-weight:600}
.wa-csum-grand{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-top:1px solid #ececf0;margin-top:8px;padding-top:11px;font-size:18px;font-weight:800;color:#15171c}
.wa-csum-grand > span:last-child{flex:0 0 auto;white-space:nowrap}
.wa-csum-grand small{font-size:11px;font-weight:600;color:#9099a5;margin-right:6px;letter-spacing:.3px;text-transform:uppercase}
.wa-csum-vat{font-size:12px;color:#9099a5;margin-top:4px}
/* Breadcrumb im Seitenkopf: volle Breite, eine Zeile (kein Umbruch in 3 Zeilen). */
.page-header .breadcrumb {
width: 100%;
flex-wrap: nowrap;
margin-bottom: 6px;
}
/* Seitenkopf an der Textspalte ausrichten: .legal-content ist 800px breit und
zentriert — H1 und Breadcrumb sollen exakt darüber stehen, nicht am Rand. */
.page:has(.legal-content) .page-header {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* FAQ-Seite: Frage/Antwort mit angenehmem Innenabstand statt bündig am Rand.
(Die kanonische Regel setzt horizontal nur 2–4px, weil das Panel auf der
Startseite in einer bereits gepolsterten Karte sitzt.) */
#page-faq .home-faq-panel details summary {
padding: 15px 24px !important;
}
#page-faq .home-faq-panel details p {
padding: 0 24px 18px !important;
margin: 0 !important;
}
/* Katalog-Hero: die Überschrift liegt ÜBER dem Hero-Bild — dort muss sie hell
bleiben (die globale dunkle .page-header-h1-Farbe gilt nur für Textseiten). */
#page-products .products-hero-content h1,
#page-products #productsTitle {
color: #fff8ee !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
}
#page-products .products-hero-content .breadcrumb,
#page-products .products-hero-content .breadcrumb a,
#page-products .products-hero-content .breadcrumb span {
color: rgba(255, 248, 238, .85) !important;
}
/* ============================================================================
E · KOMPAKTER FOOTER (2026-07-25) — 2 dichte Reihen, deutlich geringere Höhe.
Ganz am Ende + .footer-compact-Präfix, damit es die vielen älteren Footer-Layer gewinnt.
Rechtspflichten bleiben: Rechtstexte, Widerrufsbutton, §36-VSBG (in Impressum).
============================================================================ */
.footer-compact { padding-top: 34px !important; padding-bottom: 18px !important; }
.footer-compact .footer-grid { grid-template-columns: 1.5fr 1fr 1.3fr !important; gap: 0 40px !important; padding-bottom: 18px !important; border-bottom: 0 !important; }
.footer-compact .footer-grid > div { min-height: 0 !important; padding: 0 30px !important; }
.footer-compact .footer-grid > div:first-child { padding-left: 0 !important; }
.footer-compact .footer-grid > div:last-child { padding-right: 0 !important; border-right: 0 !important; }
.footer-compact .footer-brand p { margin-top: 8px !important; font-size: 13px !important; line-height: 1.5 !important; }
/* E-Mail als sauberer Inline-Link (kein Kreis mehr — der alte 48px-Kreis quetschte den Text). */
.footer-compact .footer-socials { margin-top: 12px !important; }
.footer-compact .footer-socials a { display: inline-flex !important; align-items: center !important; gap: 7px !important;
width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
font-size: 13px !important; color: rgba(255,255,255,.72) !important; }
.footer-compact .footer-socials a:hover { color: #fff !important; text-decoration: underline !important; }
.footer-compact .footer-col h4 { margin-bottom: 10px !important; font-size: 13.5px !important; }
.footer-compact .footer-col ul { gap: 6px !important; }
/* Information-Links 2-spaltig (auch Desktop) → niedriger, breiter genutzt. */
.footer-compact .footer-col:not(.footer-newsletter) ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 18px !important; }
.footer-compact .footer-col li a { font-size: 12.5px !important; }
.footer-compact .footer-newsletter p { margin-bottom: 8px !important; font-size: 12.5px !important; }
/* Anmeldefeld: breites Eingabefeld zum Tippen, kompakter Button daneben (Button ≈ ⅓, nicht ½). */
.footer-compact .footer-newsletter form { display: flex !important; gap: 8px !important; max-width: 100% !important; align-items: stretch !important; }
.footer-compact .footer-newsletter input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 42px !important; padding: 8px 14px !important; border-radius: 8px !important; font-size: 14px !important; }
.footer-compact .footer-newsletter button { flex: 0 0 auto !important; height: 42px !important; width: auto !important; min-width: 0 !important; padding: 0 16px !important; white-space: nowrap !important; border-radius: 8px !important; font-size: 13.5px !important; }
.footer-compact .footer-newsletter small { margin-top: 8px !important; font-size: 11px !important; }
/* Reihe 2: dichte Leiste — Zahlung · Widerruf · Recht · Copyright */
.footer-bottom-compact { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px 22px !important; padding: 14px 0 0 !important; margin: 0 !important; border: 0 !important; }
.footer-bottom-compact .footer-payments { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; flex-wrap: wrap !important; }
.footer-bottom-compact .footer-payments .pay-img { height: 22px !important; width: auto !important; padding: 0 !important; }
.footer-bottom-compact .footer-widerruf { margin: 0 !important; padding: 7px 14px !important; font-size: 12.5px !important; }
.footer-bottom-compact .footer-legal { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; }
.footer-bottom-compact .footer-legal a { font-size: 12px !important; color: rgba(255,255,255,.66) !important; text-decoration: none !important; }
.footer-bottom-compact .footer-legal a:hover { color: #fff !important; }
.footer-bottom-compact .footer-legal span { color: rgba(255,255,255,.28) !important; }
.footer-bottom-compact .footer-copy { font-size: 12px !important; color: rgba(255,255,255,.42) !important; margin: 0 0 0 auto !important; }
@media (max-width: 768px) {
.footer-compact { padding-top: 22px !important; padding-bottom: 14px !important; }
.footer-compact .footer-grid { grid-template-columns: 1fr !important; gap: 14px 0 !important; padding-bottom: 14px !important; }
.footer-compact .footer-grid > div { padding: 0 !important; border-right: 0 !important; }
.footer-compact .footer-brand p { margin-top: 6px !important; }
.footer-compact .footer-socials { margin-top: 6px !important; }
.footer-compact .footer-col h4 { margin-bottom: 7px !important; }
/* Info-Links 2-spaltig auf Mobil → geringere Höhe, weiter gut tippbar. */
.footer-compact .footer-col:not(.footer-newsletter) ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 16px !important; }
.footer-compact .footer-newsletter form { max-width: none !important; }
.footer-bottom-compact { justify-content: center !important; text-align: center !important; gap: 10px 16px !important; padding-top: 12px !important; }
.footer-bottom-compact .footer-payments { justify-content: center !important; width: 100% !important; }
.footer-bottom-compact .footer-copy { margin: 2px auto 0 !important; width: 100% !important; text-align: center !important; }
}
/* ═══ Прогрес до безкоштовної доставки (кошик + checkout) — 2026-07-25 ═══
Стиль строго сайту: темний акцент (#141414), без нових кольорів, оранжевого немає.
Заповнення анімується при зміні кошика; prefers-reduced-motion вимикає рух. */
.wa-fsp { margin: 6px 0 10px; }
.wa-fsp-text { font-size: 12.5px; line-height: 1.45; color: #555; margin-bottom: 6px; }
.wa-fsp-text strong { color: #141414; font-weight: 700; }
.wa-fsp-done { color: #141414; font-weight: 700; }
.wa-fsp-track { height: 5px; border-radius: 999px; background: rgba(20,20,20,.10); overflow: hidden; }
.wa-fsp-fill { height: 100%; border-radius: 999px; background: #141414; width: 0;
transition: width .55s cubic-bezier(.22,.61,.36,1); }
.wa-fsp.is-done .wa-fsp-fill { background: #141414; animation: waFspPop .5s ease-out 1; }
@keyframes waFspPop { 0% { opacity: .55; } 60% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.wa-fsp-fill { transition: none !important; }
.wa-fsp.is-done .wa-fsp-fill { animation: none !important; }
}
@media (prefers-color-scheme: dark) {
.wa-fsp-text { color: #b9b9b9; }
.wa-fsp-text strong, .wa-fsp-done { color: #f2f2f2; }
.wa-fsp-track { background: rgba(255,255,255,.14); }
.wa-fsp-fill { background: #f2f2f2; }
}
/* Керовані блоки доставки: `hidden` на inline-елементі перебивається будь-яким правилом
display, тому ховаємо явно й з !important — інакше при вимкненій безкоштовній доставці
на юр-сторінці лишалося б речення «ab … übernehmen wir den Versand» (неправда клієнту). */
[data-ship-if-free][hidden], [data-ship-if-paid][hidden] { display: none !important; }
/* ═══ Фаза 4b: hero-фон під розмір екрана ═══
Hero вантажиться як CSS `background`, а не ![]()
, тому srcset до нього не застосовний —
потрібна медіа-заміна джерела. Виміряно: оригінал `home-template-hero.webp` = 1122px,
161 252 б; похідна `.w400.webp` = 400px, 24 108 б. На екрані 390px hero показується
на всю ширину вікна, тобто 400px джерела достатньо (навіть із запасом на DPR ~1 у
бюджетних Android). Економія на мобільному: 137 КБ — найбільший одиничний виграш
на головній після конвертації.
Ставимо в КІНЦІ файлу з тією ж специфічністю (#page-home.wa-home) і !important,
бо наявні мобільні правила hero (рядки ~16177/18594/20740) уже використовують !important.
Градієнт-накладка дублюється дослівно з правила, яке перекриваємо, щоб не втратити
затемнення під текстом. */
@media (max-width: 480px) {
#page-home.wa-home .wa-home-hero {
background:
linear-gradient(90deg, rgba(6,4,3,.82) 0%, rgba(6,4,3,.66) 30%, rgba(6,4,3,.30) 50%, rgba(6,4,3,0) 62%),
url("/assets/home-template-hero.webp.w400.webp") center center / cover no-repeat !important;
}
}
/* 481-900px: середні екрани отримують 800px-варіант (77 762 б) замість 161 252 б. */
@media (min-width: 481px) and (max-width: 900px) {
#page-home.wa-home .wa-home-hero {
background:
linear-gradient(90deg, rgba(6,4,3,.82) 0%, rgba(6,4,3,.66) 30%, rgba(6,4,3,.30) 50%, rgba(6,4,3,0) 62%),
url("/assets/home-template-hero.webp.w800.webp") center center / cover no-repeat !important;
}
}
/* ═══ Фаза 4c: ФІКС РЕГРЕСІЇ ГЕОМЕТРІЇ ЛОГО ═══
Регресія з Фази 4b: я обгорнув лого в . `.logo-icon` — це flex-контейнер
45×45 з `border-radius:50%` і `overflow:hidden`, а `![]()
` усередині розрахований на
те, що ПЕРЕПОВНЮЄ коло і обрізається (`object-fit:cover`).
Виміряно в браузері:
простий ![]()
→ 45×68 (переповнює коло, полум'я заповнює його)
![]()
→ 45×30 (обгортка стала flex-елементом, img перестав
розтягуватись; полум'я стало дрібним у великому
чорному колі — саме на це поскаржилась власниця)
`display:contents` робить обгортку прозорою для верстки: flex-елементом знову стає
сам ![]()
, геометрія повертається до 45×68 — перевірено живцем, значення збіглося.
ФАЗА 4d: правило зроблено ГЛОБАЛЬНИМ, а не привʼязаним до `.logo-icon`. Причина —
наступний (srcset для карток, hero, динамічні зображення) зламав би
геометрію так само й МОВЧКИ. — обгортка без власної семантики й без
власного вигляду; вона не повинна брати участь у верстці взагалі.
Перевірено перед заміною: єдині наявні CSS-правила для picture — це
`.product-img > picture { border-radius }` (рядки ~19741, ~19856). Вони ставлять
лише радіус, а той самий селектор окремо покриває `> picture img`, тож нічого не
ламається; до того ж у картках товару зараз немає (app.js: 0 входжень). */
picture { display: contents; }
/* Product and general reviews are separate, ordered groups on the product page. */
#product-reviews .pd-review-group { min-width: 0; }
#product-reviews .pd-general-review-group { margin-top: 32px; padding-top: 28px; border-top: 1px solid #e8e5e1; }
#product-reviews .pd-general-reviews-note { max-width: 760px; margin: -4px 0 18px; color: #687385; font-size: 14px; line-height: 1.6; }
#product-reviews .pd-no-product-reviews { margin: 0 0 14px; color: #687385; line-height: 1.6; }
#product-reviews .reviews-grid { min-width: 0; }
#product-reviews .review-card { min-width: 0; overflow-wrap: anywhere; }
#product-reviews .review-verified-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; background: #edf7f0; color: #247446; font-size: 11px; font-weight: 650; letter-spacing: 0; white-space: nowrap; }
#product-reviews .pd-reviews-more { display: block; margin: 18px auto 0; max-width: 100%; padding: 11px 20px; border: 1px solid #dedbd5; border-radius: 999px; background: #fff; color: #25211d; font: inherit; font-weight: 650; cursor: pointer; }
#product-reviews .pd-reviews-more:hover { border-color: #e8531d; color: #c74617; }
@media (max-width: 480px) {
#product-reviews .pd-general-review-group { margin-top: 24px; padding-top: 22px; }
#product-reviews .pd-general-reviews-note { font-size: 13px; }
#product-reviews .reviews-grid { grid-template-columns: minmax(0,1fr) !important; }
#product-reviews .review-card { padding: 16px !important; }
#product-reviews .pd-reviews-more { width: 100%; }
}
/* Product reviews stay readable on tablet-sized product pages. The three-column
desktop grid becomes too narrow when the product content column is compressed,
so use one flexible card per row until the full desktop width is available. */
@media (max-width: 900px) {
#product-reviews .reviews-grid { grid-template-columns: minmax(0, 1fr) !important; }
#product-reviews .review-card { width: 100%; }
}
/* Production header geometry: compact tablet row with a measured category
overflow button, matching the live WohlAura header. */
@media (min-width: 769px) and (max-width: 1200px) {
.header-main-inner .header-actions { margin-left: auto !important; }
.header-main-inner {
position: relative !important;
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
gap: 0 !important;
}
.header-main-inner > .logo { grid-column: 2 !important; justify-self: center !important; margin: 0 !important; }
.header-main-inner > .header-actions { grid-column: 3 !important; justify-self: end !important; margin: 0 !important; gap: 8px !important; }
.header-main-inner .mobile-menu-btn { position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; }
}
#tabletCatMore[hidden] { display: none !important; }
@media (min-width: 769px) and (max-width: 1024px) {
.header-main-inner { grid-template-rows: 50px 28px !important; }
.header-main-inner > .logo,
.header-main-inner > .header-actions { grid-row: 1 !important; }
.header-main-inner .mobile-menu-btn { top: 25px !important; }
.header-main-inner #navCatLinks {
display: flex !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 2px 0 3px !important;
box-sizing: border-box !important;
overflow: hidden !important;
border-top: 1px solid rgba(20,20,20,.08) !important;
}
.header-main-inner #navCatLinks .nav-cat-link {
flex: 0 0 auto !important;
padding: 3px 6px !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
.header-main-inner #navCatLinks .nav-cat-link[hidden] { display: none !important; }
.header-main-inner.tablet-nav-overflow #navCatLinks { padding-right: 78px !important; }
.header-main-inner #tabletCatMore {
display: inline-flex !important;
grid-column: 3 !important;
grid-row: 2 !important;
justify-self: end !important;
align-self: center !important;
z-index: 1 !important;
margin-bottom: 0 !important;
padding: 3px 10px !important;
border: 1px solid rgba(20,20,20,.16) !important;
border-radius: 999px !important;
background: #fff !important;
color: #171411 !important;
font: inherit !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
cursor: pointer !important;
}
}
/* Final QA: prevent intrinsic grid widths from overflowing the smallest product-page viewports. */
@media (max-width: 768px) {
#page-product .pd-whofor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-product .pd-whofor-item { min-width: 0; }
#page-product .pd-whofor-item > span { min-width: 0; overflow-wrap: anywhere; }
.footer-compact .footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
.footer-compact .footer-grid > div { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.footer-compact .footer-brand,
.footer-compact .footer-col { min-width: 0; max-width: 100%; }
}
/* Tablet navigation drawer: the menu button appears through 1200px, so give
its drawer and backdrop viewport positioning above the tablet breakpoint too. */
@media (min-width: 769px) and (max-width: 1200px) {
.mobile-menu {
position: fixed !important;
top: 98px;
right: auto;
bottom: 0 !important;
left: 0;
width: min(82vw, 330px);
max-height: calc(100dvh - 98px);
overflow-y: auto;
z-index: 3000;
border-top: 0 !important;
border-radius: 0 14px 14px 0 !important;
background: #fffaf3 !important;
box-shadow: 0 24px 80px rgba(0,0,0,.28) !important;
}
.mobile-menu-backdrop {
position: fixed !important;
top: 98px;
right: 0;
bottom: 0;
left: 0;
z-index: 2999;
display: block !important;
background: rgba(17,16,14,.38);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .22s ease, visibility 0s linear .22s !important;
}
.mobile-menu-backdrop.open {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transition: opacity .22s ease, visibility 0s !important;
}
}
.wa3 {
--ink: #15110d; --muted: #4b5563; --paper: #fafaf7;
--cream: #f4f1eb; --line: #e8e5de; --accent: #ed5b19;
width: min(1160px, calc(100% - 48px)); margin: 36px auto 42px;
color: var(--ink); background: transparent;
font: 400 15px/1.6 Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
.wa3, .wa3 * { box-sizing: border-box; }
.wa3 h1, .wa3 h2, .wa3 h3, .wa3 p, .wa3 figure, .wa3 ul, .wa3 dl { margin: 0; }
.wa3 img { display: block; max-width: 100%; }
.wa3 .wrap { width: min(100% - 48px, 1080px); margin-inline: auto; }
.wa3 .eyebrow { color: #d84b0d; font-size: 11px; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }
.wa3 h1, .wa3 h2 { font-family: inherit; color: var(--ink); font-weight: 800; letter-spacing: -.045em; line-height: 1.13; text-wrap: balance; }
.wa3 h1 { font-size: clamp(32px, 3.4vw, 44px); max-width: 520px; }
.wa3 h2 { font-size: clamp(28px, 3vw, 38px); max-width: 560px; }
.wa3 .lede { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 540px; }
.wa3 .small { color: var(--muted); font-size: 14px; line-height: 1.65; }
.wa3 .hero { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.wa3 .hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; }
.wa3 .hero-copy { padding: clamp(38px, 5vw, 62px); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.wa3 .hero h1 { margin-top: 14px; }
.wa3 .hero .lede { margin-top: 18px; }
.wa3 .hero-image { min-height: 470px; background: var(--cream); }
.wa3 .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.wa3 .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); margin-top: 27px; padding-top: 17px; }
.wa3 .hero-facts strong { display: block; font-size: clamp(14px, 1.55vw, 19px); font-weight: 800; letter-spacing: -.025em; }
.wa3 .hero-facts span { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: 4px; }
.wa3 .promise { border-block: 1px solid var(--line); margin-top: 20px; background: #fff; border-radius: 16px; }
.wa3 .promise-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 19px 24px; }
.wa3 .promise-item { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.wa3 .promise-item b { font-weight: 800; }
.wa3 .promise-item span:last-child { color: var(--muted); display: block; margin-top: 3px; font-size: 12px; }
.wa3 .mark { color: var(--accent); font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1.3; flex: 0 0 auto; }
.wa3 .story { padding-block: 54px; }
.wa3 .story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.wa3 .story-photo { aspect-ratio: 1.27; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--cream); }
.wa3 .story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.wa3 .story-copy h2, .wa3 .detail-copy h2, .wa3 .spec-copy h2 { margin-top: 12px; }
.wa3 .story-copy .lede, .wa3 .detail-copy .lede, .wa3 .spec-copy .lede { margin-top: 17px; }
.wa3 .text-rule { width: 40px; height: 3px; border-radius: 5px; background: var(--accent); margin-top: 23px; }
.wa3 .story-copy .small { margin-top: 16px; max-width: 440px; }
.wa3 .detail { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding-block: 42px; }
.wa3 .detail-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.wa3 .detail-copy { max-width: 485px; }
.wa3 .features { list-style: none; padding: 0; margin-top: 23px !important; border-top: 1px solid var(--line); }
.wa3 .features li { display: grid; grid-template-columns: 25px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 650; }
.wa3 .features li span { color: var(--accent); font-size: 17px; }
.wa3 .detail-image { width: 100%; aspect-ratio: 1.08; background: var(--cream); border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; }
.wa3 .detail-image img { width: 100%; height: 100%; object-fit: cover; }
.wa3 .spec { padding-block: 58px; }
.wa3 .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.wa3 .spec-image { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; aspect-ratio: 1.18; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.wa3 .spec-image img { width: 100%; height: 100%; object-fit: contain; }
.wa3 .spec-list { margin-top: 21px; border-top: 1px solid var(--line); }
.wa3 .spec-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wa3 .spec-row dt { color: var(--muted); }
.wa3 .spec-row dd { margin: 0; font-weight: 750; }
.wa3 .spec-foot { color: var(--muted); font-size: 11px; margin-top: 12px; line-height: 1.55; }
.wa3 .colors { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding-block: 40px; }
.wa3 .colors-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.wa3 .colors-heading h2 { margin-top: 10px; }
.wa3 .colors-heading .small { max-width: 300px; font-size: 13px; }
.wa3 .colors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wa3 .color-image { background: var(--cream); border: 1px solid var(--line); border-radius: 15px; aspect-ratio: 1.32; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wa3 .color-image img { height: 100%; width: 100%; object-fit: contain; }
.wa3 .color-name { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px 0; margin-top: 2px; font-size: 14px; font-weight: 750; }
.wa3 .swatch { width: 15px; height: 15px; border: 1px solid #aaa69d; border-radius: 50%; background: #161616; }
.wa3 .swatch.white { background: #f8f8f6; }
.wa3 .closing { background: var(--cream); border: 1px solid var(--line); border-radius: 20px; margin-top: 24px; padding: 28px; }
.wa3 .closing-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; align-items: center; }
.wa3 .closing h2 { font-size: clamp(25px, 2.5vw, 33px); }
.wa3 .closing p { color: #38332d; font-size: 13px; line-height: 1.65; max-width: 660px; }
.wa3 .closing p + p { margin-top: 7px; color: var(--muted); font-size: 11px; }
.wa3 .ap-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 15px; padding: 11px 18px; border-radius: 12px; color: #fff; background: #151515; text-decoration: none; font-size: 13px; font-weight: 800; }
.wa3 .ap-cta:hover { background: #38332d; }
.wa3 .ap-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
.wa3 { width: min(100% - 32px, 600px); margin: 22px auto 30px; font-size: 14px; }
.wa3 .wrap { width: min(100% - 32px, 600px); }
.wa3 h1 { font-size: clamp(30px, 8.4vw, 38px); }
.wa3 h2 { font-size: clamp(26px, 7.4vw, 33px); }
.wa3 .hero-grid, .wa3 .story-grid, .wa3 .detail-grid, .wa3 .spec-grid { grid-template-columns: 1fr; }
.wa3 .hero { border-radius: 18px; }
.wa3 .hero-copy { padding: 27px 22px 22px; }
.wa3 .hero h1 { margin-top: 10px; }
.wa3 .hero .lede { margin-top: 12px; font-size: 14px; line-height: 1.65; }
.wa3 .hero-image { min-height: 0; aspect-ratio: 1.12; }
.wa3 .hero-image img { object-position: 50% center; }
.wa3 .hero-facts { gap: 6px; margin-top: 18px; padding-top: 13px; }
.wa3 .hero-facts strong { font-size: clamp(12px, 3.65vw, 16px); letter-spacing: -.035em; }
.wa3 .hero-facts span { font-size: 10px; }
.wa3 .promise { margin-top: 12px; border-radius: 14px; }
.wa3 .promise-inner { grid-template-columns: 1fr; gap: 0; padding: 5px 16px; }
.wa3 .promise-item { align-items: center; gap: 10px; padding: 10px 0; font-size: 12px; }
.wa3 .promise-item:not(:last-child) { border-bottom: 1px solid var(--line); }
.wa3 .promise-item span:last-child { font-size: 11px; margin-top: 1px; }
.wa3 .mark { font-size: 14px; }
.wa3 .story { padding-block: 31px; }
.wa3 .story-grid, .wa3 .detail-grid, .wa3 .spec-grid { gap: 19px; }
.wa3 .story-photo { aspect-ratio: 1.2; border-radius: 16px; }
.wa3 .story-copy .lede, .wa3 .detail-copy .lede, .wa3 .spec-copy .lede { margin-top: 11px; font-size: 14px; }
.wa3 .text-rule { margin-top: 17px; }
.wa3 .story-copy .small { margin-top: 12px; font-size: 12px; }
.wa3 .detail { border-radius: 18px; padding-block: 18px; }
.wa3 .detail-image { order: -1; aspect-ratio: 1.13; border-radius: 14px; }
.wa3 .features { margin-top: 14px !important; }
.wa3 .features li { font-size: 13px; padding: 10px 0; }
.wa3 .spec { padding-block: 32px; }
.wa3 .spec-image { order: -1; aspect-ratio: 1.12; border-radius: 15px; }
.wa3 .spec-list { margin-top: 14px; }
.wa3 .spec-row { font-size: 12px; gap: 10px; padding: 8px 0; }
.wa3 .spec-foot { font-size: 10px; margin-top: 10px; }
.wa3 .colors { border-radius: 18px; padding-block: 20px; }
.wa3 .colors-heading { display: block; margin-bottom: 14px; }
.wa3 .colors-heading h2 { margin-top: 8px; }
.wa3 .colors-heading .small { margin-top: 8px; font-size: 12px; }
.wa3 .colors-grid { gap: 10px; }
.wa3 .color-image { aspect-ratio: 1; border-radius: 12px; }
.wa3 .color-name { padding-top: 9px; font-size: 12px; }
.wa3 .swatch { width: 12px; height: 12px; }
.wa3 .closing { margin-top: 14px; padding: 20px 18px; border-radius: 16px; }
.wa3 .closing-inner { grid-template-columns: 1fr; gap: 9px; }
.wa3 .closing h2 { font-size: 25px; }
.wa3 .closing p { font-size: 12px; }
.wa3 .closing p + p { font-size: 10px; }
.wa3 .ap-cta { width: 100%; min-height: 50px; margin-top: 12px; }
}
@media (max-width: 359px) {
.wa3 { width: calc(100% - 24px); }
.wa3 .wrap { width: calc(100% - 24px); }
.wa3 .hero-facts strong { font-size: 11px; }
.wa3 .hero-facts span { font-size: 9px; }
.wa3 .colors-grid { gap: 7px; }
}
/* The product page already has its own H1; use an H2 for this inserted A+ hero. */
.wa3 .hero .hero-title { font-size: clamp(32px, 3.4vw, 44px); max-width: 520px; margin-top: 14px; }
@media (max-width: 760px) { .wa3 .hero .hero-title { font-size: clamp(30px, 8.4vw, 38px); margin-top: 10px; } }
/* The shop has global hero styles; restore the A+ image and dark copy inside its white card. */
.wa3 .hero { color: var(--ink); }
.wa3 .hero { min-height: 0; max-height: none; padding: 0; }
.wa3 .hero-facts strong { color: var(--ink); }
.wa3 .hero-image { display: block; }
/* The support chat button can be dragged without losing its original styling. */
.chat-widget.chat-widget--custom-position {
left: var(--chat-position-left) !important;
top: var(--chat-position-top) !important;
right: auto !important;
bottom: auto !important;
}
#chatToggleBtn.chat-toggle-btn { cursor: grab; touch-action: none; user-select: none; }
#chatToggleBtn.chat-toggle-btn.is-dragging {
cursor: grabbing !important;
transform: none !important;
transition: none !important;
}
@media (min-width: 769px) {
.chat-widget.chat-widget--custom-position .chat-panel {
position: fixed !important;
width: min(440px, calc(100vw - 24px)) !important;
max-height: var(--chat-panel-max-height, min(620px, calc(100vh - var(--header-h) - 110px))) !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
.chat-widget.chat-widget--custom-position.chat-panel-below .chat-panel {
top: calc(var(--chat-position-top) + var(--chat-button-height) + 12px) !important;
}
.chat-widget.chat-widget--custom-position:not(.chat-panel-below) .chat-panel {
bottom: calc(100vh - var(--chat-position-top) + 12px) !important;
}
.chat-widget.chat-widget--custom-position.chat-panel-align-left .chat-panel {
left: var(--chat-position-left) !important;
}
.chat-widget.chat-widget--custom-position:not(.chat-panel-align-left) .chat-panel {
right: var(--chat-position-right) !important;
}
}
/* Contact follow-up inside the support chat */
.chat-followup-card {
box-sizing: border-box; align-self: flex-start; flex-shrink: 0; width: 100%; max-width: 360px;
padding: 12px; margin: 8px 0 4px; border: 1px solid #eddccf; border-radius: 14px;
background: linear-gradient(145deg, #fffaf5, #fff 65%); color: #322820;
box-shadow: 0 5px 18px rgba(88, 48, 19, .06); font-size: 14px; line-height: 1.55;
animation: chat-followup-enter .28s ease-out both;
}
.chat-followup-card * { box-sizing: border-box; }
.chat-followup-card h3 { margin: 0 0 4px; color: #322820; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.3px; }
.chat-followup-card p { margin: 0 0 10px; color: #74665c; font-size: 13px; line-height: 1.4; }
.chat-followup-card p strong { color: #46372c; font-weight: 600; }
.chat-followup-card form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.chat-followup-card input, .chat-followup-card textarea { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 10px; border: 1px solid #e5d8cd; border-radius: 10px; background: #fff; color: #322820; font: inherit; font-size: 16px; line-height: 1.4; transition: border-color .18s, box-shadow .18s; }
.chat-followup-card textarea { height: 56px; min-height: 56px; max-height: 160px; resize: vertical; }
.chat-followup-card input::placeholder, .chat-followup-card textarea::placeholder { color: #88796e; font-size: 14px; }
.chat-followup-card input:focus, .chat-followup-card textarea:focus { outline: none; border-color: var(--primary, #e85d04); box-shadow: 0 0 0 3px rgba(232, 93, 4, .12); }
.chat-followup-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; border: 0; border-radius: 11px; background: var(--primary, #e85d04); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .18s, transform .18s; }
.chat-followup-submit svg { width: 19px; height: 19px; transition: transform .18s; }
.chat-followup-submit:hover:not(:disabled) { background: var(--primary-dark, #c44b00); }
.chat-followup-submit:hover:not(:disabled) svg { transform: translateX(3px); }
.chat-followup-submit:active:not(:disabled) { transform: translateY(1px); }
.chat-followup-submit:focus-visible { outline: 3px solid #f7b47c; outline-offset: 3px; }
.chat-followup-submit:disabled { opacity: .75; cursor: wait; }
.chat-followup-card .chat-followup-error { margin: 0 0 4px; padding: 9px 11px; border-radius: 8px; background: #fff0ec; color: #a33021; font-size: 13px; }
.chat-followup-error[hidden] { display: none; }
.chat-followup-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: chat-followup-spin .7s linear infinite; }
.chat-followup-card.is-saved { display: flex; align-items: center; gap: 10px; }
.chat-followup-card.is-saved p { margin: 0; }
.chat-followup-success-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: #e9f3e9; color: #397246; animation: chat-followup-enter .35s ease-out both; }
.chat-followup-success-icon svg { width: 18px; height: 18px; }
.chat-followup-success-icon path { stroke-dasharray: 25; stroke-dashoffset: 0; animation: chat-followup-check .45s ease-out; }
@keyframes chat-followup-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chat-followup-spin { to { transform: rotate(360deg); } }
@keyframes chat-followup-check { from { stroke-dashoffset: 25; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .chat-followup-card, .chat-followup-card *, .chat-followup-success-icon path { animation: none !important; transition: none !important; } }
.chat-place-quick-replies { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; max-width: 360px; }
.chat-place-choice { min-height: 36px; padding: 7px 11px; border: 1px solid #e6d3c1; border-radius: 999px; background: #fff; color: #5b3f2b; font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; transition: background .16s, border-color .16s, color .16s, transform .16s; }
.chat-place-choice:hover:not(:disabled) { border-color: var(--primary, #e85d04); background: #fff7f0; color: #9c3c08; transform: translateY(-1px); }
.chat-place-choice:focus-visible { outline: 3px solid rgba(232, 93, 4, .3); outline-offset: 2px; }
.chat-place-choice:disabled { opacity: .55; cursor: default; }
.chat-place-hint { flex-basis: 100%; color: #7d746e; font-size: 11px; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .chat-place-choice { transition: none; } }
/* Chat composer: text first, all controls in one bottom row. */
#chatInputArea.chat-input-area { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:9px 10px 11px !important; border-top:1px solid var(--border); }
.chat-compose-card { display:flex; flex-direction:column; gap:4px; padding:7px 8px 6px; border:1px solid #e4e1dc; border-radius:16px; background:#fff; box-shadow:0 3px 12px rgba(35,25,16,.06); transition:border-color .18s ease, box-shadow .18s ease; }
.chat-compose-card:focus-within { border-color:#e9a171; box-shadow:0 0 0 3px rgba(234,91,13,.07),0 3px 12px rgba(35,25,16,.06); }
.chat-compose-field { position:relative; display:flex; align-items:stretch; width:100%; min-width:0; min-height:40px; }
.chat-compose-field > textarea#chatInput { width:100% !important; min-height:40px !important; max-height:112px !important; padding:7px 6px !important; border:0 !important; border-radius:10px !important; background:transparent !important; box-shadow:none !important; outline:0 !important; }
.chat-compose-field.is-voice-recording > textarea#chatInput { opacity:0; pointer-events:none; }
.chat-compose-actions { display:flex; align-items:center; gap:7px; min-height:38px; padding-top:5px; border-top:1px solid #f0eeeb; }
.chat-compose-spacer { flex:1 1 auto; }
.chat-compose-icon, .chat-end-inline { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:34px; border:0; border-radius:10px; background:transparent; color:#707780; cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; }
.chat-compose-icon { width:36px; padding:0; }
.chat-compose-icon svg { width:19px; height:19px; }
.chat-compose-icon:hover, .chat-end-inline:hover { color:var(--primary); background:#fff5ed; }
.chat-end-inline { padding:0 8px; font-size:11px; font-weight:600; }
.chat-compose-actions .chat-voice-btn { position:static; top:auto; right:auto; z-index:auto; width:36px; height:36px; flex:0 0 36px; transform:none; }
.chat-compose-actions .chat-voice-btn:active { transform:scale(.94); }
.chat-compose-actions .chat-send-btn { width:36px; height:36px; flex:0 0 36px; border-radius:12px; }
.chat-voice-visualizer, .chat-voice-processing { position:absolute; inset:0; z-index:2; display:flex; align-items:center; border:0; border-radius:10px; background:linear-gradient(110deg,#fff 0%,#fffaf6 100%); }
.chat-voice-visualizer[hidden], .chat-voice-processing[hidden] { display:none !important; }
.chat-voice-visualizer { gap:11px; padding:0 10px; animation:chatVoiceFieldIn .2s ease-out both; }
.chat-voice-orb { position:relative; width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(234,91,13,.1); }
.chat-voice-orb::after { content:''; position:absolute; inset:-5px; border:1px solid rgba(234,91,13,.35); border-radius:50%; animation:chatVoiceOrb 1.6s ease-out infinite; }
.chat-voice-wave { display:flex; align-items:center; justify-content:center; gap:3px; width:100%; height:28px; overflow:hidden; }
.chat-voice-wave i { display:block; width:3px; height:24px; flex:0 0 3px; border-radius:4px; background:linear-gradient(180deg,#f7a45b,var(--primary) 65%,#c94808); transform:scaleY(var(--voice-level,.12)); transform-origin:center; transition:transform 75ms linear; }
.chat-voice-processing { justify-content:center; gap:5px; animation:chatVoiceFieldIn .18s ease-out both; }
.chat-voice-processing span { width:5px; height:5px; border-radius:50%; background:var(--primary); animation:chatVoiceLoading 1s ease-in-out infinite; }
.chat-voice-processing span:nth-child(2) { animation-delay:.14s; }
.chat-voice-processing span:nth-child(3) { animation-delay:.28s; }
.chat-voice-btn.is-recording { color:#fff; background:var(--primary); border-color:var(--primary); animation:chatVoicePulse 1.8s ease-in-out infinite; }
.chat-voice-status { display:flex; align-items:center; gap:8px; margin:0 10px 8px; padding:8px 11px; border:1px solid #f2c4c1; border-radius:12px; background:#fff4f3; color:#a52a24; font-size:12px; line-height:1.4; }
@keyframes chatVoicePulse { 50% { box-shadow:0 0 0 5px rgba(216,59,50,.15); } }
@keyframes chatVoiceOrb { 0% { transform:scale(.72); opacity:.7; } 100% { transform:scale(1.8); opacity:0; } }
@keyframes chatVoiceFieldIn { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
@keyframes chatVoiceLoading { 0%,60%,100% { transform:translateY(0); opacity:.38; } 30% { transform:translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .chat-voice-btn.is-recording,.chat-voice-visualizer,.chat-voice-orb::after,.chat-voice-processing span { animation:none; transition:none; } }
/* WohlAura customer chat: warm support header, quick topics, compact composer. */
.chat-panel {
width: min(440px, calc(100vw - 28px)) !important;
max-height: min(640px, calc(100vh - var(--header-h, 72px) - 110px)) !important;
border: 1px solid #eee6df !important;
border-radius: 22px !important;
background: #fff !important;
box-shadow: 0 22px 64px rgba(42, 25, 14, .22) !important;
}
.chat-panel-header {
display: flex !important;
min-height: 86px;
gap: 12px;
padding: 16px 18px !important;
background: linear-gradient(112deg, #f4772c 0%, #ef5b19 58%, #e94a0b 100%) !important;
color: #fff;
}
.chat-agent { min-width: 0; gap: 13px; }
.agent-avatar {
width: 52px;
height: 52px;
flex: 0 0 52px;
overflow: hidden;
border: 2px solid rgba(255,255,255,.75);
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 12px rgba(122, 47, 12, .18);
}
.agent-avatar img, .chat-promo-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.agent-name { color: #fff; font-size: 16px; font-weight: 800; line-height: 1.25; }
.chat-header-tagline { margin-top: 3px; color: rgba(255,255,255,.94); font-size: 12px; line-height: 1.3; }
.chat-panel-header .agent-status { margin-top: 3px; color: #fff; font-size: 11px; }
.chat-panel-header .admin-online-dot { width: 7px; height: 7px; background: #49e078; }
.chat-header-actions { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 9px; }
.chat-minimize-btn, .chat-close-btn {
display: grid;
width: 34px;
height: 34px;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #fff;
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.chat-minimize-btn { font-size: 27px; line-height: 1; }
.chat-close-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; }
.chat-minimize-btn:hover, .chat-close-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.chat-start-screen {
display: flex !important;
flex: 1 1 auto;
min-height: 0;
gap: 0 !important;
overflow-y: auto;
background: #fff;
}
.chat-start-hero { padding: 18px 18px 6px !important; background: #fff !important; color: #20242a !important; }
.chat-start-message { padding: 16px 17px 13px; border: 1px solid #eceef1; border-radius: 19px 19px 19px 6px; background: #f3f4f6; }
.chat-start-message h3 { margin: 0 0 7px !important; color: #252a32 !important; font-size: 17px !important; font-weight: 750 !important; line-height: 1.3 !important; }
.chat-start-message p { margin: 0 !important; color: #363b44 !important; font-size: 14px !important; line-height: 1.55 !important; }
.chat-start-time { display: block; margin-top: 7px; color: #89909b; font-size: 11px; }
.quick-replies { padding: 12px 18px 17px !important; }
.quick-replies h4 { margin: 0 0 10px !important; color: #68717c !important; font-size: 12px !important; font-weight: 700 !important; text-align: left !important; }
.chat-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-replies .chat-topic-grid button {
display: flex;
min-width: 0;
min-height: 54px;
align-items: center;
gap: 9px;
margin: 0;
padding: 9px 11px;
border: 1px solid #ffd5c0;
border-radius: 999px;
background: linear-gradient(120deg, #fffaf7, #fff);
color: #d84b12;
font: inherit;
font-size: 12px;
font-weight: 650;
line-height: 1.25;
text-align: left;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.quick-replies .chat-topic-grid button:hover { transform: translateY(-1px); border-color: #f47b43; background: #fff5ee; box-shadow: 0 4px 12px rgba(220, 81, 23, .08); }
.quick-replies .chat-topic-grid button:focus-visible, .chat-start-btn:focus-visible { outline: 3px solid rgba(238, 91, 25, .24); outline-offset: 2px; }
.chat-topic-grid img { width: 29px; height: 29px; flex: 0 0 29px; object-fit: contain; }
.chat-start-btn {
width: 100%;
min-height: 44px;
margin-top: 12px;
border: 0;
border-radius: 12px;
background: linear-gradient(110deg, #f4772c, #e94d0c);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 750;
cursor: pointer;
box-shadow: 0 5px 14px rgba(226, 77, 13, .2);
transition: transform .18s ease, box-shadow .18s ease;
}
.chat-start-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(226, 77, 13, .26); }
.chat-messages {
min-height: 180px !important;
padding: 16px !important;
gap: 11px !important;
background: #fff !important;
}
.chat-msg { font-size: 13px; }
.chat-msg.admin { border-color: #eceef1; border-radius: 17px 17px 17px 5px; background: #f3f4f6; color: #29313b; }
.chat-msg.customer { border-radius: 17px 17px 5px 17px; background: linear-gradient(115deg, #ed5b1c, #d9470d); }
#chatInputArea.chat-input-area { gap: 0; padding: 10px 14px 0 !important; border-top: 1px solid #f0eeeb; background: #fff; }
.chat-compose-card { padding: 8px 10px 7px; border: 1px solid #d9dde3; border-radius: 20px; box-shadow: none; }
.chat-compose-card:focus-within { border-color: #ee7b48; box-shadow: 0 0 0 3px rgba(238, 91, 25, .08); }
.chat-compose-field > textarea#chatInput { min-height: 42px !important; padding: 8px 5px !important; color: #252a32; font-size: 14px; }
.chat-compose-actions { min-height: 42px; gap: 8px; padding-top: 6px; }
.chat-compose-icon, .chat-end-inline, .chat-compose-actions .chat-voice-btn { min-height: 36px; border-radius: 11px; }
.chat-compose-icon img { display: block; width: 23px; height: 23px; object-fit: contain; }
.chat-compose-icon:hover, .chat-end-inline:hover { background: #fff4ed; }
.chat-end-inline { gap: 4px; padding: 0 6px; color: #8a9099; font-size: 10px; font-weight: 650; }
.chat-end-inline img { width: 17px; height: 17px; object-fit: contain; }
.chat-compose-actions .chat-voice-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-basis: 38px; border: 0; background: #f3f4f6; }
.chat-compose-actions .chat-voice-btn img { display: block; width: 23px; height: 23px; object-fit: contain; }
.chat-compose-actions .chat-voice-btn:hover { background: #fff1e7; }
.chat-compose-actions .chat-voice-btn.is-recording img { filter: brightness(0) invert(1); }
.chat-compose-actions .chat-send-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #f87831, #eb4c0d); box-shadow: 0 4px 12px rgba(224, 76, 13, .22); }
.chat-compose-actions .chat-send-btn:hover { background: linear-gradient(135deg, #f87831, #d83f08); transform: translateY(-1px); }
.chat-compose-actions .chat-send-btn img { display: block; width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.chat-response-note { display: flex; align-items: center; gap: 8px; padding: 10px 8px 11px; color: #718097; font-size: 11px; line-height: 1.35; }
.chat-response-note > span { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #28bf5b; box-shadow: 0 0 0 3px rgba(40,191,91,.12); }
/* Shipping wording beside the product price (same presentation as the backup). */
.product-detail-price-note { display: block; }
.product-shipping-trigger {
display: inline;
appearance: none;
border: 0;
margin: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
line-height: inherit;
text-align: left;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
cursor: pointer;
}
.product-shipping-trigger:hover { color: var(--primary, #e8531d); }
.product-shipping-trigger:focus-visible { outline: 2px solid var(--primary, #e8531d); outline-offset: 3px; border-radius: 2px; }
#chatToggleBtn.chat-toggle-btn { min-width: 126px; height: 58px; padding: 0 20px; border-radius: 999px; background: linear-gradient(115deg, #f87831, #e94b0d); box-shadow: 0 8px 24px rgba(212, 72, 12, .3); }
#chatToggleBtn.chat-toggle-btn:hover { background: linear-gradient(115deg, #fa8746, #e94b0d); transform: translateY(-2px); }
#chatToggleBtn.chat-toggle-btn::after { position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #29c35a; content: ''; }
.chat-toggle-label { font-size: 15px; }
.chat-promo-avatar { overflow: hidden; background: #fff2e9; }
.chat-promo-avatar img { object-fit: contain; }
.chat-promo-bubble { border: 1px solid #f2ddd0; border-radius: 18px; box-shadow: 0 16px 38px rgba(48, 30, 18, .15); }
@media (max-width: 600px) {
.chat-panel-header { min-height: 76px; padding: 13px 14px !important; }
.agent-avatar { width: 46px; height: 46px; flex-basis: 46px; }
.agent-name { font-size: 15px; }
.chat-start-hero { padding: 14px 13px 4px !important; }
.quick-replies { padding: 10px 13px 14px !important; }
.chat-topic-grid { gap: 7px; }
.quick-replies .chat-topic-grid button { min-height: 50px; gap: 7px; padding: 7px 9px; font-size: 11px; }
.chat-topic-grid img { width: 25px; height: 25px; flex-basis: 25px; }
#chatInputArea.chat-input-area { padding-inline: 10px !important; }
.chat-compose-actions { gap: 5px; }
.chat-end-inline { padding-inline: 3px; font-size: 9px; }
.chat-response-note { padding-inline: 5px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.chat-topic-grid button, .chat-start-btn, .chat-minimize-btn, .chat-close-btn, #chatToggleBtn.chat-toggle-btn { transition: none !important; }
}
/* Keep the expanded chat aligned to the mobile viewport and avoid a second floating chat control. */
#chatPanel.open ~ #chatToggleBtn { display: none !important; }
@media (max-width: 768px) {
#chatPanel.chat-panel {
left: 10px !important;
right: 10px !important;
width: auto !important;
}
}
#chatInitForm.chat-start-screen[style*="display: none"] { display: none !important; }
#chatPanel .agent-avatar img,
#chatPromoBubble .chat-promo-avatar img { width: 84%; height: 84%; margin: auto; }
.chat-panel-header .admin-online-dot { animation: chatOnlinePulse 1.6s ease-out infinite; }
@keyframes chatOnlinePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(73, 224, 120, .55); }
70% { box-shadow: 0 0 0 6px rgba(73, 224, 120, 0); }
}
@media (prefers-reduced-motion: reduce) {
.chat-panel-header .admin-online-dot { animation: none; }
}
/* Expandable support chat: half-width desktop workspace and full-screen mobile mode. */
body.chat-expanded-open { overflow: hidden !important; overscroll-behavior: none; }
body.chat-expanded-open #chatWidget { z-index: 15000 !important; }
.chat-header-actions .chat-expand-btn {
display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center;
padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.chat-header-actions .chat-expand-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.chat-expand-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat-expand-btn .chat-collapse-icon { display: none; }
#chatPanel.is-expanded .chat-expand-btn .chat-expand-icon { display: none; }
#chatPanel.is-expanded .chat-expand-btn .chat-collapse-icon { display: block; }
@media (min-width: 769px) {
#chatPanel.chat-panel.is-expanded {
position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
width: min(50vw, 760px) !important; min-width: min(520px, calc(100vw - 32px)) !important;
height: min(78vh, 820px) !important; max-height: calc(100vh - 32px) !important;
transform: translate(-50%, -48%) scale(.97); transform-origin: center;
z-index: 15000 !important; animation: chatExpandDesktop .32s cubic-bezier(.2,.75,.25,1) forwards;
}
}
@media (max-width: 768px) {
#chatPanel.chat-panel.is-expanded {
position: fixed !important; inset: 0 !important; width: 100vw !important;
height: 100vh !important; height: 100dvh !important; max-height: none !important;
transform: none; border-radius: 0 !important; z-index: 15000 !important;
animation: chatExpandMobile .3s cubic-bezier(.2,.75,.25,1) both;
}
#chatPanel.is-expanded .chat-panel-header { padding-top: calc(13px + env(safe-area-inset-top, 0px)) !important; }
#chatPanel.is-expanded #chatInputArea { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
}
@keyframes chatExpandDesktop {
from { opacity: .82; transform: translate(-50%, -47%) scale(.96); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes chatExpandMobile {
from { opacity: .82; transform: scale(.98); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.chat-header-actions .chat-expand-btn { transition: none; }
#chatPanel.chat-panel.is-expanded { animation: none !important; transform: none !important; }
}
/* Product review cards: match production layout and keep every review readable. */
#product-reviews .reviews-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px !important;
width: 100% !important;
min-width: 0 !important;
}
#product-reviews .review-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: anywhere;
}
#product-reviews .review-card__main { min-width: 0 !important; }
#product-reviews .review-card__author-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
#product-reviews .review-card__author-row strong { min-width: 0 !important; overflow-wrap: anywhere !important; }
#product-reviews .review-card__date { flex: 0 0 auto !important; white-space: nowrap !important; }
#product-reviews .review-card__text {
margin: 0 !important;
color: #374151 !important;
font-size: 14px !important;
line-height: 1.65 !important;
overflow-wrap: anywhere !important;
}
#product-reviews .review-card__rating-line {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 9px !important;
margin-top: 5px !important;
}
#product-reviews .review-card__stars { display: flex !important; align-items: center !important; gap: 1px !important; line-height: 1 !important; }
#product-reviews .review-product-panel {
min-width: 0 !important;
margin-top: 14px !important;
padding: 12px 0 0 !important;
border-top: 1px solid #eee5dc !important;
}
#product-reviews .review-product-panel__content {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
align-items: center !important;
gap: 12px !important;
}
#product-reviews .review-product-panel__image,
#product-reviews .review-product-panel__placeholder {
display: block !important;
width: 72px !important;
aspect-ratio: 1 !important;
border-radius: 10px !important;
background: #f4eee8 !important;
object-fit: cover !important;
}
#product-reviews .review-product-panel__info { display: grid !important; gap: 4px !important; min-width: 0 !important; }
#product-reviews .review-product-panel__info strong { overflow-wrap: anywhere !important; }
@media (max-width: 700px) {
#product-reviews .review-card { padding: 16px !important; }
#product-reviews .review-product-panel { margin-top: 12px !important; padding-top: 11px !important; }
#product-reviews .review-product-panel__content { grid-template-columns: 64px minmax(0, 1fr) !important; gap: 10px !important; }
#product-reviews .review-product-panel__image,
#product-reviews .review-product-panel__placeholder { width: 64px !important; }
}
/* Final product-page responsive polish: related cards stay readable around tablet width. */
@media (max-width: 900px) {
/* Related cards use a higher-specificity desktop grid rule; override it here so
the price and CTA have their own vertical rows at tablet/mobile widths. */
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-buy-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
grid-template-columns: none !important;
gap: 8px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-price {
width: 100% !important;
justify-content: flex-start !important;
min-height: 30px !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-card-actions,
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn {
width: 100% !important;
}
:is(#page-products #productsGrid,#featuredGrid,#pdRelatedGrid) .product-add-btn {
justify-content: center !important;
}
#pdRelatedGrid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
#pdRelatedGrid .product-card-buy-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
#pdRelatedGrid .product-price {
width: 100% !important;
justify-content: flex-start !important;
min-height: 30px !important;
}
#pdRelatedGrid .product-card-actions,
#pdRelatedGrid .product-add-btn {
width: 100% !important;
}
#pdRelatedGrid .product-add-btn {
justify-content: center !important;
}
}
/* The green online indicator is the only status marker on the floating chat button. */
#chatToggleBtn #chatUnread {
display: none !important;
}
/* Product detail related cards: keep the tablet layout stable even when the
catalog grid rules are also present on the page. */
@media (max-width: 900px) {
#page-product #pdRelatedGrid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
#page-product #pdRelatedGrid .product-card-buy-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
grid-template-columns: none !important;
gap: 8px !important;
}
#page-product #pdRelatedGrid .product-price {
width: 100% !important;
justify-content: flex-start !important;
min-height: 30px !important;
}
#page-product #pdRelatedGrid .product-card-actions,
#page-product #pdRelatedGrid .product-add-btn {
width: 100% !important;
}
#page-product #pdRelatedGrid .product-add-btn {
justify-content: center !important;
}
}
/* Tablet header: keep the three-line menu control visible while the logo stays
centered and the category links remain on the second row. */
@media (min-width: 769px) and (max-width: 1024px) {
.header-main-inner .mobile-menu-btn {
display: flex !important;
}
}
/* The compact tablet header also applies to narrow desktop widths up to 1200px;
this keeps the logo/actions on the first row and the categories on the second. */
@media (min-width: 769px) and (max-width: 1200px) {
.header-main-inner {
grid-template-rows: 50px 30px !important;
}
.header-main-inner > .logo,
.header-main-inner > .header-actions {
grid-row: 1 !important;
}
.header-main-inner .mobile-menu-btn {
display: flex !important;
top: 25px !important;
}
.header-main-inner #navCatLinks {
display: flex !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 2px 0 3px !important;
box-sizing: border-box !important;
overflow: hidden !important;
border-top: 1px solid rgba(20,20,20,.08) !important;
}
.header-main-inner #navCatLinks .nav-cat-link {
flex: 0 0 auto !important;
padding: 3px 6px !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
}
/* =====================================================
PRODUCT LABEL SYSTEM — six reusable icon assets
===================================================== */
.product-info-above-purchase {
position: relative;
overflow: hidden;
padding: 28px 26px 0 !important;
border-radius: 24px;
background: #F5EDE2;
box-shadow: 0 16px 36px rgba(67, 36, 20, .08);
}
#page-product .product-detail-name { position:relative;z-index:1;margin:0 0 10px!important;color:#111!important;font-size:clamp(28px,3vw,40px)!important;font-weight:850!important;letter-spacing:-.045em!important;line-height:1.03!important; }
#page-product .product-info-copy { position:relative;z-index:1;margin:0 0 22px!important;padding:0!important;border:0!important; }
#page-product .product-info-copy p { max-width:760px;margin:0!important;color:#626a75!important;font-size:19px!important;line-height:1.55!important; }
.product-label-system { position:relative;z-index:1;isolation:isolate;overflow:hidden;margin:0 0 18px;padding:0 0 12px;border-radius:20px;background:#F5EDE2; }
.product-label-top,.product-label-bottom { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative;z-index:1; }
.product-label-top { padding:0 0 10px; }
.product-label-top-card { min-width:0;min-height:148px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 8px 12px;border-radius:15px;background:#F9F4EE;text-align:center; }
.product-label-top-card img { display:block;width:72px;height:72px;margin:0 auto 7px;padding:14px;box-sizing:border-box;object-fit:contain;border-radius:50%;background:#F6E1CE; }
.product-label-top-card strong { display:block;color:#101010;font-size:15px;line-height:1.15;font-weight:850; }
.product-label-top-card small { display:block;max-width:150px;margin-top:4px;color:#69717b;font-size:13px;line-height:1.18; }
.product-label-bottom { align-items:stretch;gap:0;padding:0 10px;border-radius:14px;background:#F9F4EE; }
.product-label-bottom-card { container-type:inline-size;display:flex;align-items:center;min-width:0;min-height:74px;gap:10px;padding:11px 10px; }
.product-label-bottom-card + .product-label-bottom-card { border-left:1px solid rgba(93,70,48,.2); }
.product-label-bottom-card img { flex:0 0 42px;width:42px;height:42px;object-fit:contain; }
.product-label-bottom-card strong { display:block;color:#1b1b1b;font-size:14px;line-height:1.18;font-weight:800; }
.product-label-bottom-card small { display:block;margin-top:3px;color:#69717b;font-size:13px;line-height:1.2; }
@container (max-width:175px) {
.product-label-bottom-card { flex-direction:column;justify-content:center;gap:4px;text-align:center; }
.product-label-bottom-card > div { min-width:0;width:100%; }
}
.product-label-caption { position:relative;z-index:2;display:block;width:min(100%,650px);max-height:180px;margin:4px auto 0;object-fit:contain;object-position:center; }
.product-label-leaf { position:absolute;z-index:1;right:-48px;bottom:-48px;width:260px;height:260px;object-fit:contain;opacity:.58;pointer-events:none; }
#page-product .product-info-above-purchase + .product-buy-box { position:relative;z-index:2;margin-top:16px!important; }
@media (max-width:760px) {
.product-info-above-purchase { margin-top:14px;padding:24px 16px 0!important;border-radius:22px;box-shadow:0 -8px 26px rgba(67,36,20,.08); }
#page-product .product-detail-name { font-size:30px!important; }
#page-product .product-info-copy p { font-size:17px!important;line-height:1.5!important; }
.product-label-system { margin-right:-2px;margin-left:-2px;padding-bottom:10px;border-radius:16px; }
.product-label-top,.product-label-bottom { gap:6px; }
.product-label-top { padding-bottom:6px; }
.product-label-top-card { min-height:116px;padding:9px 4px 8px;border-radius:12px; }
.product-label-top-card img { width:52px;height:52px;margin-bottom:5px;padding:10px; }
.product-label-top-card strong { font-size:10.5px; }
.product-label-top-card small { font-size:9.5px;line-height:1.12; }
.product-label-bottom { padding:0 5px;border-radius:11px; }
.product-label-bottom-card { flex-direction:column;justify-content:center;min-height:70px;gap:4px;padding:7px 5px;text-align:center; }
.product-label-bottom-card > div { min-width:0;width:100%; }
.product-label-bottom-card img { flex-basis:27px;width:27px;height:27px; }
.product-label-bottom-card strong { font-size:9.5px; }
.product-label-bottom-card small { font-size:9px;line-height:1.1; }
.product-label-caption { width:100%;max-height:105px;margin-top:3px; }
.product-label-leaf { right:-36px;bottom:-34px;width:190px;height:190px;opacity:.52; }
}
@media (max-width:1000px) {
.product-label-bottom-card { flex-direction:column;justify-content:center;gap:4px;text-align:center; }
.product-label-bottom-card > div { min-width:0;width:100%; }
}
/* Global WohlAura page background */
html, body { background:#FBF6F2 !important; }