/*
Theme Name: Drogeria4U
Theme URI: https://drogeria-4u.pl
Author: Scalova
Author URI: https://scalova.pl
Description: Autorski motyw dla Drogeria For U, zbudowany dla pełnej kontroli nad WooCommerce (strony kategorii/sklepu) bez ograniczeń motywu komercyjnego. Wymaga WooCommerce.
Version: 3.14.0
Requires at least: 6.5
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drogeria4u
Tags: e-commerce, woocommerce, custom
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
    --d4u-green: #05642D;
    --d4u-green-dark: #03471F;
    --d4u-green-pale: #E7F2EB;
    --d4u-ink: #1C1D22;
    --d4u-muted: #6B7280;
    --d4u-border: #E7E9E6;
    --d4u-bg: #FFFFFF;
    --d4u-bg-alt: #F7F9F7;
    --d4u-bg-cream: #FAF8F4;
    --d4u-accent: #C8102E;
    --d4u-badge-new: #05642D;
    --d4u-badge-promo: #C8102E;
    --d4u-star: #F5A623;

    --d4u-radius-xl: 20px;
    --d4u-radius: 16px;
    --d4u-radius-sm: 10px;
    --d4u-radius-xs: 6px;
    --d4u-radius-pill: 999px;

    --d4u-shadow-xs: 0 1px 2px rgba(20, 30, 24, 0.04);
    --d4u-shadow: 0 4px 6px rgba(20, 30, 24, 0.07), 0 1px 2px rgba(20, 30, 24, 0.04);
    --d4u-shadow-md: 0 12px 28px rgba(20, 30, 24, 0.10), 0 2px 8px rgba(20, 30, 24, 0.05);
    --d4u-shadow-glow: 0 6px 18px rgba(5, 100, 45, 0.22);
    /* Same cart glyph as the header cart icon, inlined for use as a CSS
       background-image (currentColor doesn't apply in that context, hence
       the hardcoded white stroke/fill). */
    --d4u-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 4h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 8H6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.4' fill='white'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='white'/%3E%3C/svg%3E");
    --d4u-outline-dark: rgba(0, 0, 0, 0.08);

    --d4u-container: 1280px;
    --d4u-ease: cubic-bezier(0.2, 0, 0, 1);
    --d4u-dur-fast: 140ms;
    --d4u-dur: 220ms;
    --d4u-dur-slow: 420ms;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    color: var(--d4u-ink);
    background: var(--d4u-bg);
    line-height: 1.55;
    font-size: 15.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 700; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

*:focus-visible {
    outline: 2px solid var(--d4u-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Same padding-stacks-with-centering issue as .d4u-section above, and the
   same calc() fix — otherwise the header/footer/topbar content (this class)
   sits 20px further in than the homepage shelf rows on any viewport wider
   than --d4u-container, even though both are meant to share one edge. */
.d4u-container {
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
    padding: 0 20px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Enter animations
   ========================================================================== */
@keyframes d4uFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.d4u-animate-in {
    animation: d4uFadeUp var(--d4u-dur-slow) var(--d4u-ease) both;
}

.d4u-stagger > * {
    animation: d4uFadeUp var(--d4u-dur-slow) var(--d4u-ease) both;
}
.d4u-stagger > *:nth-child(1) { animation-delay: 0ms; }
.d4u-stagger > *:nth-child(2) { animation-delay: 45ms; }
.d4u-stagger > *:nth-child(3) { animation-delay: 90ms; }
.d4u-stagger > *:nth-child(4) { animation-delay: 135ms; }
.d4u-stagger > *:nth-child(5) { animation-delay: 180ms; }
.d4u-stagger > *:nth-child(6) { animation-delay: 225ms; }
.d4u-stagger > *:nth-child(7) { animation-delay: 270ms; }
.d4u-stagger > *:nth-child(8) { animation-delay: 315ms; }
.d4u-stagger > *:nth-child(n+9) { animation-delay: 340ms; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.d4u-topbar {
    background: var(--d4u-green);
    color: #fff;
    font-size: 0.8125rem;
}

.d4u-topbar .d4u-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px 20px;
    text-align: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Header
   ========================================================================== */
.d4u-header {
    border-bottom: 1px solid var(--d4u-border);
    position: sticky;
    top: 0;
    background: var(--d4u-bg-cream);
    z-index: 100;
    transition: box-shadow var(--d4u-dur) var(--d4u-ease);
}

.d4u-header-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
    position: relative;
}

.d4u-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--d4u-green);
    white-space: nowrap;
    letter-spacing: -0.01em;
    /* Fixed to the row's natural (pre-logo-image) content height so the logo
       image can be much bigger than the bar without stretching the bar
       itself — the row's cross-axis height is still driven by the search
       input / icon links (~44px), not by this box. */
    height: 44px;
    width: 260px;
    flex-shrink: 0;
    position: relative;
}

.d4u-logo a {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-logo a:hover { opacity: 0.85; }
.d4u-logo img { height: 118px; width: auto; display: block; }

.d4u-search-wrap {
    position: relative;
    flex: 1;
    max-width: 640px;
    margin: 0 auto;
}

.d4u-search-form {
    display: flex;
    background: #fff;
    border: 1.5px solid var(--d4u-border);
    border-radius: var(--d4u-radius-pill);
    overflow: hidden;
    transition: border-color var(--d4u-dur) var(--d4u-ease), box-shadow var(--d4u-dur) var(--d4u-ease);
}

.d4u-search-form:focus-within {
    border-color: var(--d4u-green);
    box-shadow: 0 0 0 3px var(--d4u-green-pale);
}

.d4u-search-form input[type="search"] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 11px 18px;
    font-size: 0.9375rem;
    outline: none;
    min-width: 0;
}

.d4u-search-form button {
    background: var(--d4u-green);
    border: 0;
    color: #fff;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--d4u-dur-fast) var(--d4u-ease);
}

.d4u-search-form button:hover { background: var(--d4u-green-dark); }
.d4u-search-form svg { width: 18px; height: 18px; }

.d4u-header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.d4u-header-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.6875rem;
    color: var(--d4u-ink);
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--d4u-radius-sm);
    transition: background var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease);
}

.d4u-header-icons a:hover { background: var(--d4u-green-pale); color: var(--d4u-green-dark); }
.d4u-header-icons svg { width: 21px; height: 21px; }

.d4u-cart-icon { position: relative; }

.d4u-cart-count {
    position: absolute;
    top: 2px;
    right: 6px;
    background: var(--d4u-accent);
    color: #fff;
    border-radius: 50%;
    min-width: 17px;
    height: 17px;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 0 2px var(--d4u-bg-cream);
}

.d4u-menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--d4u-radius-sm);
}
.d4u-menu-toggle:hover { background: var(--d4u-green-pale); }

/* ==========================================================================
   Main navigation
   ========================================================================== */
.d4u-nav {
    position: relative;
    background: rgba(231, 242, 235, 0.62);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(5, 100, 45, 0.08);
}

.d4u-nav-row {
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
    padding: 0 20px;
}

.d4u-nav-links {
    display: flex;
    gap: 2px;
}

.d4u-nav-links > li { position: relative; }

.d4u-nav-links > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--d4u-green-dark);
    background: none;
    border: 0;
    border-radius: var(--d4u-radius-xs) var(--d4u-radius-xs) 0 0;
    cursor: pointer;
    transition: background var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease);
}

.d4u-nav-links > li > a:hover,
.d4u-nav-categories-toggle[aria-expanded="true"] {
    background: var(--d4u-green);
    color: #fff;
}

.d4u-nav-chevron { transition: transform var(--d4u-dur) var(--d4u-ease); }
.d4u-nav-categories-toggle[aria-expanded="true"] .d4u-nav-chevron { transform: rotate(180deg); }

.d4u-categories-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    box-shadow: var(--d4u-shadow-md);
    border-top: 1px solid var(--d4u-border);
    border-radius: 0 0 var(--d4u-radius) var(--d4u-radius);
    z-index: 60;
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--d4u-dur) var(--d4u-ease), transform var(--d4u-dur) var(--d4u-ease), visibility var(--d4u-dur);
}

.d4u-categories-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* A CSS grid here would size every row to its tallest cell — a childless
   category (e.g. "Dziecko", just a heading with no subcategory list) sitting
   next to a category with 4-5 children left a tall blank gap under the
   short one. Multi-column instead flows each block top-to-bottom and only
   wraps to the next column when it runs out of vertical room, so a short
   block is simply followed immediately by the next one — no gap. */
.d4u-categories-panel__inner {
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
    padding: 28px 20px;
    column-count: 5;
    column-gap: 20px;
}

.d4u-categories-panel__col {
    min-width: 0;
    break-inside: avoid;
    margin-bottom: 24px;
}

.d4u-categories-panel__heading {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--d4u-green-dark);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--d4u-green-pale);
    transition: color var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-categories-panel__heading:hover { color: var(--d4u-green); }

.d4u-categories-panel__col ul li { margin-bottom: 2px; }
.d4u-categories-panel__col ul a {
    display: block;
    padding: 5px 0;
    font-size: 0.875rem;
    color: var(--d4u-muted);
    transition: color var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-categories-panel__col ul a:hover { color: var(--d4u-green); }

/* ==========================================================================
   Hero
   ========================================================================== */
.d4u-hero {
    position: relative;
    background: linear-gradient(120deg, var(--d4u-green) 0%, var(--d4u-green-dark) 100%);
    color: #fff;
    padding: 64px 20px;
    overflow: hidden;
}

.d4u-hero::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.d4u-hero-inner {
    position: relative;
    max-width: var(--d4u-container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.d4u-hero-text { max-width: 560px; }
.d4u-hero-text h1 { font-size: 2.5rem; line-height: 1.15; margin: 0 0 16px; }
.d4u-hero-text p { font-size: 1.125rem; opacity: 0.92; margin: 0 0 28px; }

.d4u-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--d4u-green-dark);
    font-weight: 700;
    padding: 14px 30px;
    border-radius: var(--d4u-radius-pill);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform var(--d4u-dur-fast) var(--d4u-ease), box-shadow var(--d4u-dur) var(--d4u-ease), background var(--d4u-dur-fast) var(--d4u-ease);
}

.d4u-hero-cta:hover { background: var(--d4u-bg-alt); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.d4u-hero-cta:active { transform: scale(0.96); }

.d4u-hero-badge {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.d4u-hero-badge svg { width: 84px; height: 84px; }

/* ==========================================================================
   Hero image slider — only rendered once the client uploads at least one
   banner image (Personalizuj > Strona główna > Banery graficzne). Falls
   back to .d4u-hero above otherwise.
   ========================================================================== */
.d4u-hero-slider {
    position: relative;
    aspect-ratio: 3.5 / 1;
    overflow: hidden;
    background: var(--d4u-bg-alt);
    max-width: 1600px;
    margin: 24px auto;
    border-radius: var(--d4u-radius-xl);
    box-shadow: var(--d4u-shadow-md);
}

.d4u-hero-slider__track { position: relative; width: 100%; height: 100%; }

.d4u-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d4u-dur) var(--d4u-ease);
}
.d4u-hero-slide.is-active { opacity: 1; visibility: visible; }

.d4u-hero-slide > a,
.d4u-hero-slide img { display: block; width: 100%; height: 100%; }
.d4u-hero-slide img { object-fit: cover; }

/* Real HTML heading/subheading/CTA panel layered over the slide's photo
   (see d4u_get_hero_slides()/customizer.php) — a flat gradient panel in a
   color the admin picks to match THAT slide's own packshot (never a fixed
   brand color; see d4u-hero-slide__panel below), holding actual text, plus
   the recurring "leaf" cutout shape as either a plain divider or — when a
   sale price is set — a price-tag badge. Dark ink text works here because
   this panel is always kept light-toned by convention (the product photo
   itself carries whatever mood/darkness the packshot needs). */
.d4u-hero-slide__panel {
    position: absolute;
    top: 0;
    height: 100%;
    width: 38%;
    max-width: 480px;
    z-index: 2;
    background: linear-gradient(135deg, var(--d4u-panel-color, var(--d4u-green-pale)) 0%, #ffffff 115%);
}
.d4u-hero-slide__panel--left { left: 0; }
.d4u-hero-slide__panel--right { right: 0; }

.d4u-hero-slide__text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 4% 5% 6%;
    color: var(--d4u-ink);
}
.d4u-hero-slide__panel--right .d4u-hero-slide__text { padding: 5% 6% 5% 4%; align-items: flex-end; text-align: right; }
.d4u-hero-slide__text h2 {
    font-size: clamp(1.375rem, 2.6vw, 2.125rem);
    line-height: 1.15;
    margin: 0 0 12px;
}
.d4u-hero-slide__text p {
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    color: var(--d4u-muted);
    margin: 0 0 22px;
    max-width: 32ch;
}
.d4u-hero-slide__text .d4u-hero-cta {
    align-self: flex-start;
    background: var(--d4u-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(200, 16, 46, 0.3);
}
.d4u-hero-slide__text .d4u-hero-cta:hover { background: #a30d25; }
.d4u-hero-slide__panel--right .d4u-hero-slide__text .d4u-hero-cta { align-self: flex-end; }

/* The recurring "leaf" shape — plain seam divider by default, or (with a
   sale price set on the slide) the price-tag badge. Always positioned at
   the panel/photo seam for the plain divider; moved to the far OUTER edge
   of the photo, away from the panel, when it's carrying a price — matching
   the two real template layouts (BANNERY_TEMPLATE_01.pdf pages 1 vs 2-3). */
.d4u-hero-slide__leaf-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    z-index: 3;
    filter: drop-shadow(0 10px 20px rgba(20, 30, 24, 0.18));
}
.d4u-hero-slide__leaf-wrap--panel-left { left: calc(38% - 45px); }
.d4u-hero-slide__leaf-wrap--panel-right { right: calc(38% - 45px); }
/* 6% (not 4%) so the badge clears the slider's own prev/next arrows,
   which sit at the same vertical center at a fixed 16px from each edge. */
.d4u-hero-slide__leaf-wrap--panel-left.d4u-hero-slide__leaf-wrap--outer { left: auto; right: 6%; }
.d4u-hero-slide__leaf-wrap--panel-right.d4u-hero-slide__leaf-wrap--outer { right: auto; left: 6%; }

.d4u-leaf-shape { display: block; width: 100%; height: auto; aspect-ratio: 90 / 260; }

.d4u-hero-slide__price {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}
.d4u-hero-slide__price-old {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--d4u-muted);
    text-decoration: line-through;
}
.d4u-hero-slide__price-new {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--d4u-accent);
    line-height: 1;
}

/* Mobile-only compact stand-in for the price badge above — hidden on
   desktop/tablet, shown under the 640px breakpoint below. */
.d4u-hero-slide__price-mobile {
    display: none;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    padding: 6px 12px;
    border-radius: var(--d4u-radius-sm);
    box-shadow: var(--d4u-shadow-md);
}
.d4u-hero-slide__price-mobile-old {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--d4u-muted);
    text-decoration: line-through;
}
.d4u-hero-slide__price-mobile-new {
    font-size: 1rem;
    font-weight: 800;
    color: var(--d4u-accent);
    line-height: 1.1;
}

.d4u-hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: var(--d4u-ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--d4u-shadow-xs);
    transition: background var(--d4u-dur-fast) var(--d4u-ease), transform var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-hero-slider__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.d4u-hero-slider__arrow--prev { left: 16px; }
.d4u-hero-slider__arrow--next { right: 16px; }

.d4u-hero-slider__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.d4u-hero-slider__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(28, 35, 29, 0.25);
    cursor: pointer;
    transition: background var(--d4u-dur-fast) var(--d4u-ease), transform var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-hero-slider__dot.is-active { background: var(--d4u-green); transform: scale(1.3); }

@media (max-width: 640px) {
    .d4u-hero-slider { aspect-ratio: 4 / 3; margin: 12px; border-radius: var(--d4u-radius); }
    .d4u-hero-slider__arrow { width: 32px; height: 32px; font-size: 1.25rem; }
    .d4u-hero-slider__arrow--prev { left: 10px; }
    .d4u-hero-slider__arrow--next { right: 10px; }
    .d4u-hero-slide__panel {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: 55%;
        top: auto;
        bottom: 0;
        background: linear-gradient(180deg, var(--d4u-panel-color, var(--d4u-green-pale)) 0%, #ffffff 100%);
    }
    .d4u-hero-slide__panel--right .d4u-hero-slide__text { align-items: flex-start; text-align: left; }
    .d4u-hero-slide__text { padding: 6% 8%; }
    /* The leaf shape assumes room beside a side panel — on the stacked
       mobile layout (panel now sits along the bottom) there's no equivalent
       seam to anchor it to, so it's hidden rather than forced into an
       arbitrary spot. Its price (when set) isn't lost, though — see
       .d4u-hero-slide__price-mobile below. */
    .d4u-hero-slide__leaf-wrap { display: none; }
    .d4u-hero-slide__price-mobile { display: flex; }
}

/* ==========================================================================
   USP row
   ========================================================================== */
.d4u-usp {
    background: var(--d4u-bg-alt);
    border-bottom: 1px solid var(--d4u-border);
}

.d4u-usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 26px 20px;
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
}

.d4u-usp-item { display: flex; align-items: center; gap: 12px; }
.d4u-usp-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--d4u-radius-sm);
    box-shadow: var(--d4u-shadow-xs);
    color: var(--d4u-green);
}
.d4u-usp-icon svg { width: 22px; height: 22px; }
.d4u-usp-item strong { display: block; font-size: 0.9375rem; }
.d4u-usp-item span { font-size: 0.8125rem; color: var(--d4u-muted); }

/* ==========================================================================
   Generic sections
   ========================================================================== */
/* max-width is the container width PLUS the two horizontal paddings
   (2 × 20px), not the container width alone — otherwise, on any viewport
   wider than --d4u-container, this box gets centered first and the 20px
   padding is added on top of that, landing its content 20px further in
   than .d4u-shelf-inner's content below (that one centers a max-width box
   INSIDE an already-padded full-bleed parent, so its padding doesn't stack
   with the centering — see .d4u-shelf/.d4u-shelf-inner further down). This
   calc() reproduces that same math without needing the extra wrapper
   element: the padding then lands exactly on the (V-C)/2 line the shelf
   rows use, instead of (V-C)/2 + 20px. On narrow viewports, where this
   max-width doesn't bind anyway, nothing changes. */
.d4u-section {
    padding: 44px 20px;
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
}

.d4u-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 16px;
}

.d4u-section-head h2 { font-size: 1.625rem; margin: 0; }
.d4u-section-head a {
    color: var(--d4u-green);
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-section-head a:hover { color: var(--d4u-green-dark); gap: 8px; }

.d4u-section--alt { background: var(--d4u-bg-alt); max-width: none; }
.d4u-section--alt .d4u-section { padding-top: 44px; padding-bottom: 44px; }

/* ==========================================================================
   Promo banner tiles — navigate to real destinations (bestsellers, on-sale,
   newest), not fabricated campaigns.
   ========================================================================== */
.d4u-promo-banners {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.d4u-promo-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 28px 24px;
    border-radius: var(--d4u-radius);
    color: #fff;
    overflow: hidden;
    position: relative;
    transition: transform var(--d4u-dur) var(--d4u-ease), box-shadow var(--d4u-dur) var(--d4u-ease);
}
.d4u-promo-banner:hover { transform: translateY(-3px); box-shadow: var(--d4u-shadow-md); }
.d4u-promo-banner:active { transform: translateY(-3px) scale(0.98); }

.d4u-promo-banner::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -15%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.d4u-promo-banner--green { background: linear-gradient(135deg, var(--d4u-green) 0%, var(--d4u-green-dark) 100%); }
.d4u-promo-banner--accent { background: linear-gradient(135deg, var(--d4u-accent) 0%, #8a0c22 100%); }
.d4u-promo-banner--gold { background: linear-gradient(135deg, #d9a028 0%, #9c6e0f 100%); }
.d4u-promo-banner--dark { background: linear-gradient(135deg, #253830 0%, #12241a 100%); }

.d4u-promo-banner__icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.d4u-promo-banner__icon svg { width: 22px; height: 22px; }

.d4u-promo-banner__title { position: relative; font-size: 1.125rem; font-weight: 700; }
.d4u-promo-banner__desc { position: relative; font-size: 0.8125rem; opacity: 0.85; }

/* Background image + overlay is set inline (per-tile theme_mod value — see
   d4u_render_promo_banners()); this just makes it cover/center properly and
   gives the tile enough height for the photo to actually read. The inline
   background-image replaces the gradient from the --green/--accent/etc.
   rules above, and the ::after highlight circle is hidden since it reads as
   a stray artifact over a photo instead of over a flat gradient. */
.d4u-promo-banner--has-image {
    background-size: cover;
    background-position: center top;
    min-height: 320px;
    justify-content: flex-end;
}
.d4u-promo-banner--has-image::after { display: none; }

/* ==========================================================================
   Split banner — rounded tile dropped between two homepage shelf rows,
   same width as the surrounding sections (not full-bleed), same visual
   language as the hero (gradient + circular icon badge).
   ========================================================================== */
.d4u-split-banner {
    display: block;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(135deg, var(--d4u-green) 0%, var(--d4u-green-dark) 100%);
    border-radius: var(--d4u-radius);
    overflow: hidden;
    box-shadow: var(--d4u-shadow);
    transition: transform var(--d4u-dur) var(--d4u-ease), box-shadow var(--d4u-dur) var(--d4u-ease);
}
/* The whole tile is now a real link (see d4u_render_split_banner()) rather
   than just the small CTA inside it, so it needs its own hover/active
   affordance matching the other clickable tiles (.d4u-promo-banner). */
.d4u-split-banner:hover { transform: translateY(-3px); box-shadow: var(--d4u-shadow-md); }
.d4u-split-banner:active { transform: translateY(-3px) scale(0.98); }

/* Background image + overlay is set inline (per-request theme_mod value —
   see d4u_render_split_banner()); this just makes it cover/center properly.
   The inline background-image replaces the gradient from the rule above. */
.d4u-split-banner--has-image {
    background-size: cover;
    background-position: center;
}
.d4u-split-banner--has-image .d4u-split-banner__inner {
    min-height: 260px;
}

@media (max-width: 640px) {
    .d4u-split-banner--has-image .d4u-split-banner__inner {
        min-height: 200px;
    }
}

.d4u-split-banner__inner {
    padding: 40px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.d4u-split-banner__text h2 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0 8px;
}
.d4u-split-banner__text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    margin: 0 0 18px;
    max-width: 46ch;
}
.d4u-split-banner__text .d4u-hero-cta {
    background: #fff;
    color: var(--d4u-green-dark);
}
.d4u-split-banner__text .d4u-hero-cta:hover { background: var(--d4u-bg-cream); }

.d4u-split-banner__badge {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.d4u-split-banner__badge svg { width: 40px; height: 40px; }

@media (max-width: 640px) {
    .d4u-split-banner__inner { flex-direction: column; text-align: center; padding: 32px 20px; }
    .d4u-split-banner__text p { max-width: none; }
}

/* ==========================================================================
   Deals zone ("Strefa okazji") tile — bordered card, real on-sale products
   next to an optional client-uploaded graphic (falls back to a plain icon).
   ========================================================================== */
.d4u-deals-tile {
    display: flex;
    gap: 28px;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    box-shadow: var(--d4u-shadow);
    padding: 32px;
}

.d4u-deals-tile__media {
    flex: 0 0 380px;
    border-radius: var(--d4u-radius-sm);
    overflow: hidden;
    background: var(--d4u-green-pale);
    box-shadow: inset 0 0 0 1px var(--d4u-outline-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.d4u-deals-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.d4u-deals-tile__media-icon { color: var(--d4u-green); }
.d4u-deals-tile__media-icon svg { width: 88px; height: 88px; }

.d4u-deals-tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.d4u-deals-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.d4u-deals-tile__head h2 { font-size: 1.375rem; margin: 0 0 4px; }
.d4u-deals-tile__head a { color: var(--d4u-green); font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
.d4u-deals-tile__head a:hover { color: var(--d4u-green-dark); }

.d4u-deals-tile__products {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: auto;
}
.d4u-deals-tile__products > li {
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
}

@media (max-width: 960px) {
    .d4u-deals-tile { flex-direction: column; padding: 24px; }
    .d4u-deals-tile__media { flex-basis: auto; height: 160px; }
    .d4u-deals-tile__products > li { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
}
@media (max-width: 640px) {
    .d4u-deals-tile__products > li { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
}
@media (max-width: 460px) {
    .d4u-deals-tile__products > li { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ==========================================================================
   Countdown — only ever rendered server-side against a real WooCommerce
   scheduled sale-end date (see d4u_get_next_sale_end_timestamp()).
   ========================================================================== */
.d4u-countdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    color: var(--d4u-muted);
    font-size: 0.8125rem;
}
.d4u-countdown__icon { display: flex; color: var(--d4u-accent); }
.d4u-countdown__icon svg { width: 16px; height: 16px; }
.d4u-countdown__digits { display: flex; gap: 6px; }
.d4u-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-xs);
    padding: 4px 8px;
    min-width: 40px;
}
.d4u-countdown__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--d4u-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.d4u-countdown__suffix { font-size: 0.625rem; color: var(--d4u-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* ==========================================================================
   Product cards (WooCommerce loop — content-product.php override)
   ========================================================================== */
/*
 * Flexbox-wrap instead of CSS Grid on purpose: WooCommerce core CSS still
 * ships a percentage `width` on li.product for its legacy float-based
 * columns-N grid, and getting every one of those old rules cleanly
 * neutralized against a `display:grid` parent (tracks, auto-placement,
 * implicit columns) turned out to be fragile across contexts. flex-wrap
 * with an explicit flex-basis per card is just as capable of equal-width
 * wrapping columns and is far more predictable here.
 */
.d4u-product-grid,
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 !important;
    padding: 0 !important;
}

/* WooCommerce core CSS puts a `content:" "; display:table;` clearfix on
   ul.products::before/::after for its old float-based layout. That's not
   display:none, so the browser treats it as a real (if invisible) flex
   item — silently consuming the first/last slot in the row and shifting
   every real card over by one. This is what was actually behind cards
   wrapping one short of a full row. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

.woocommerce ul.products li.product,
.d4u-product-card {
    /* WooCommerce core CSS ships a percentage `width` + `float` on
       li.product for its legacy columns-N grid — neutralize both and size
       the card purely through flex-basis below. !important is needed since
       WC's own selector specificity (.woocommerce ul.products[class*=
       columns-] li.product) is high. */
    width: auto !important;
    float: none !important;
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    padding: 14px;
    margin: 0 !important;
    list-style: none;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: box-shadow var(--d4u-dur) var(--d4u-ease), transform var(--d4u-dur) var(--d4u-ease), border-color var(--d4u-dur) var(--d4u-ease);
}

.woocommerce ul.products li.product:hover,
.d4u-product-card:hover {
    box-shadow: var(--d4u-shadow-md);
    transform: translateY(-3px);
    border-color: transparent;
    z-index: 1;
}

.d4u-product-card__link {
    display: block;
    color: inherit;
}

.d4u-product-card__media {
    position: relative;
    border-radius: var(--d4u-radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--d4u-bg-alt);
    aspect-ratio: 1 / 1;
    box-shadow: inset 0 0 0 1px var(--d4u-outline-dark);
}

.d4u-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--d4u-dur-slow) var(--d4u-ease);
}
.d4u-product-card:hover .d4u-product-card__media img { transform: scale(1.05); }

.d4u-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    padding: 4px 9px;
    border-radius: var(--d4u-radius-xs);
    line-height: 1.4;
}

.d4u-badge--new { background: var(--d4u-badge-new); }
.d4u-badge--promo { background: var(--d4u-badge-promo); }

/* WooCommerce's own diagonal "Sale!" flash is replaced by the badge ribbon above. */
.woocommerce span.onsale { display: none; }

.d4u-product-card__rating { margin-bottom: 6px; min-height: 18px; }
.d4u-product-card__rating .star-rating { font-size: 0.8125rem; color: var(--d4u-star); }

/* Keyed off .d4u-product-card itself, not the parent <ul>'s class — the
   shop/category grid's <ul> has class="products", but the homepage/category
   "shelf" rows use <ul class="d4u-shelf-row"> instead. A selector scoped to
   ul.products silently never matched shelf cards, leaving their titles at
   the browser's default (much larger) h2 size with no line-clamp. */
.d4u-product-card h2,
.d4u-product-card .woocommerce-loop-product__title {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--d4u-dur-fast) var(--d4u-ease);
}

.d4u-product-card a:hover h2 { color: var(--d4u-green); }

.d4u-product-card__size {
    font-size: 0.75rem;
    color: var(--d4u-muted);
    margin: 0 0 10px;
}

.d4u-product-card__footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.d4u-product-card__price-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.d4u-product-card__unit-price {
    font-size: 0.6875rem;
    color: var(--d4u-muted);
}

.d4u-product-card__stock {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--d4u-muted);
}
.d4u-product-card__stock .d4u-status-dot { margin-top: 0; }

/* Add-to-cart shrinks to a circular icon button (Rossmann-style card
   footer) — the visible text is removed via font-size:0, not display:none,
   because the accessible name comes from the aria-label set in
   d4u_loop_add_to_cart_args() (functions.php), so this stays screen-reader
   friendly without needing visible text. */
/* .woocommerce-prefixed to out-specificity the global .woocommerce a.button
   rule below (same specificity otherwise, and that one comes later in the
   cascade, so it would win the tie and this circular icon button would lose
   to the default green pill). */
.woocommerce .d4u-product-card__footer a.button,
.woocommerce .d4u-product-card__footer button.button,
.woocommerce .d4u-product-card__footer .button {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--d4u-accent);
    background-image: var(--d4u-icon-cart);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    box-shadow: var(--d4u-shadow-xs);
    transition: transform var(--d4u-dur-fast) var(--d4u-ease), box-shadow var(--d4u-dur-fast) var(--d4u-ease);
}
.woocommerce .d4u-product-card__footer .button:hover {
    background-color: var(--d4u-accent);
    transform: scale(1.07);
    box-shadow: var(--d4u-shadow-md);
}
/* WooCommerce's own .loading::after spinner is sized in em against the
   button's font-size and positioned assuming a normal text button with
   right-padding — both wrong for a 0-font-size circular icon button, so
   both are pinned back to sane absolute values here. */
.woocommerce .d4u-product-card__footer .button.loading {
    background-image: none;
    padding-right: 0;
}
.woocommerce .d4u-product-card__footer .button.loading::after {
    font-size: 16px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

.woocommerce span.price {
    color: var(--d4u-ink);
    font-weight: 700;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}

.woocommerce span.price del {
    color: var(--d4u-muted);
    font-weight: 400;
    font-size: 0.8125rem;
    text-decoration: line-through;
    margin-right: 4px;
}

.woocommerce span.price ins {
    text-decoration: none;
    color: var(--d4u-accent);
}

.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.d4u-btn {
    background: var(--d4u-green);
    color: #fff;
    border: 0;
    border-radius: var(--d4u-radius-pill);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    box-shadow: var(--d4u-shadow-glow);
    transition: background var(--d4u-dur-fast) var(--d4u-ease), transform var(--d4u-dur-fast) var(--d4u-ease), box-shadow var(--d4u-dur) var(--d4u-ease);
    white-space: nowrap;
}

.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover,
.d4u-btn:hover {
    background: var(--d4u-green-dark);
    color: #fff;
    box-shadow: 0 8px 22px rgba(5, 100, 45, 0.3);
}
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce .button:active,
.d4u-btn:active { transform: scale(0.96); }

/* WooCommerce marks its real "buying" actions — single-product Add to
   Cart, Proceed to Checkout, Place Order, Pay for Order — with an extra
   .alt class carrying its own default purple (#7f54b3) at higher
   specificity than the plain .button rule above, so it wins the cascade
   even though this stylesheet loads after WooCommerce's own CSS. Targeting
   .alt directly (rather than each individual button ID/class) covers every
   real purchase action with the brand's red accent in one place, while
   leaving ordinary green .button actions (view more, apply coupon, filter)
   untouched. */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button {
    background: var(--d4u-accent);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
    background: #8a0c22;
    color: #fff;
    box-shadow: 0 8px 22px rgba(200, 16, 46, 0.3);
}

.woocommerce a.added_to_cart { display: none; }

.woocommerce-breadcrumb {
    margin-bottom: 18px;
    font-size: 0.8125rem;
    color: var(--d4u-muted);
}
.woocommerce-breadcrumb a {
    color: var(--d4u-muted);
    transition: color var(--d4u-dur-fast) var(--d4u-ease);
}
.woocommerce-breadcrumb a:hover { color: var(--d4u-green-dark); }

/* ==========================================================================
   Result toolbar (sorting / count)
   ========================================================================== */
.d4u-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--d4u-border);
}

.d4u-toolbar .woocommerce-result-count { margin: 0; font-size: 0.875rem; color: var(--d4u-muted); }

.d4u-toolbar .woocommerce-ordering select {
    border: 1.5px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    padding: 9px 14px;
    font-size: 0.875rem;
    background: #fff;
    transition: border-color var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-toolbar .woocommerce-ordering select:hover { border-color: var(--d4u-green); }

/* Custom sort dropdown — the closed <select> above already looked fine, but
   the OPENED options list is rendered natively by the OS/browser and can't
   be styled at all, which is what looked out of place against the rest of
   the site. This wraps the real select with a styled trigger + panel built
   from its own <option> list (see initSortDropdown() in theme.js); the
   select itself stays in the DOM and still carries the real value/submits
   the form, so sorting still works with JS disabled — .d4u-sort-enhanced is
   only added once the custom UI has actually taken over. */
.d4u-toolbar .woocommerce-ordering { position: relative; }
.d4u-sort-enhanced select.orderby {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.d4u-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    padding: 9px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    background: #fff;
    color: var(--d4u-ink);
    cursor: pointer;
    transition: border-color var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-sort-trigger:hover { border-color: var(--d4u-green); }
.d4u-sort-trigger__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-sort-trigger[aria-expanded="true"] .d4u-sort-trigger__chevron { transform: rotate(180deg); }

.d4u-sort-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    box-shadow: var(--d4u-shadow-md);
    padding: 8px;
}
.d4u-sort-panel[hidden] { display: none; }

.d4u-sort-panel__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--d4u-radius-xs);
    background: none;
    color: var(--d4u-ink);
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-sort-panel__item:hover { background: var(--d4u-bg-alt); }
.d4u-sort-panel__item.is-active { background: var(--d4u-green-pale); color: var(--d4u-green-dark); font-weight: 700; }

@media (max-width: 460px) {
    .d4u-sort-panel { left: 0; right: auto; min-width: 220px; }
}

.woocommerce-pagination { margin-top: 32px; }
.woocommerce-pagination ul.page-numbers {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.woocommerce-pagination .page-numbers li { display: inline-flex; }
.woocommerce-pagination .page-numbers .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--d4u-radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--d4u-ink);
    border: 1.5px solid var(--d4u-border);
    transition: background var(--d4u-dur-fast) var(--d4u-ease), border-color var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease);
}
.woocommerce-pagination .page-numbers .page-numbers:hover { border-color: var(--d4u-green); color: var(--d4u-green-dark); }
.woocommerce-pagination .page-numbers .page-numbers.current { background: var(--d4u-green); border-color: var(--d4u-green); color: #fff; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.d4u-newsletter {
    background: linear-gradient(120deg, var(--d4u-green) 0%, var(--d4u-green-dark) 100%);
    color: #fff;
    border-radius: var(--d4u-radius-xl);
    padding: 44px;
    text-align: center;
}

.d4u-newsletter h2 { margin: 0 0 8px; font-size: 1.5rem; }
.d4u-newsletter p { margin: 0 0 22px; opacity: 0.92; }

.d4u-newsletter-form {
    display: flex;
    max-width: 420px;
    margin: 0 auto;
    gap: 8px;
}

.d4u-newsletter-form input {
    flex: 1;
    padding: 13px 18px;
    border-radius: var(--d4u-radius-pill);
    border: 0;
    min-width: 0;
    font-size: 0.9375rem;
}
.d4u-newsletter-form input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.d4u-newsletter-form button {
    background: #fff;
    color: var(--d4u-green-dark);
    font-weight: 700;
    padding: 13px 24px;
    border-radius: var(--d4u-radius-pill);
    border: 0;
    transition: transform var(--d4u-dur-fast) var(--d4u-ease), background var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-newsletter-form button:hover { background: var(--d4u-bg-alt); }
.d4u-newsletter-form button:active { transform: scale(0.96); }

/* ==========================================================================
   Shop / category archive layout
   ========================================================================== */
.d4u-shop-layout {
    display: flex;
    gap: 32px;
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
    padding: 28px 20px 56px;
    align-items: flex-start;
}

.d4u-shop-sidebar {
    width: 268px;
    flex-shrink: 0;
    background: var(--d4u-bg-alt);
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    padding: 20px;
    position: sticky;
    top: 90px;
}

.d4u-shop-sidebar h3 {
    margin: 0 0 14px;
    font-size: 1.0625rem;
    color: var(--d4u-green-dark);
}

.d4u-subcategory-list li { margin-bottom: 3px; }

.d4u-subcategory-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--d4u-radius-xs);
    font-size: 0.9375rem;
    transition: background var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease), padding-left var(--d4u-dur-fast) var(--d4u-ease);
}

.d4u-subcategory-list a:hover { background: var(--d4u-green-pale); color: var(--d4u-green-dark); padding-left: 14px; }
.d4u-subcategory-list a.is-current { background: var(--d4u-green); color: #fff; font-weight: 600; }
.d4u-subcategory-list a.is-current .d4u-count { color: rgba(255,255,255,0.75); }
.d4u-count { color: var(--d4u-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.d4u-shop-main { flex: 1; min-width: 0; }

.d4u-department-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.d4u-department-head__all {
    flex-shrink: 0;
    color: var(--d4u-green);
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}
.d4u-department-head__all:hover { color: var(--d4u-green-dark); }
@media (max-width: 480px) {
    .d4u-department-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* The persistent 268px sidebar leaves noticeably less width than the
   full-bleed grids elsewhere (homepage sections, category-overview shelf),
   so 4 columns here is too cramped — 3 fits comfortably at this width.
   Scoped to where the sidebar actually sits beside the grid (>960px) —
   below that it stacks above and the generic responsive rules apply. */
@media (min-width: 961px) {
    .d4u-shop-layout .d4u-shop-main ul.products > li {
        flex-basis: calc(33.333% - 13.334px) !important;
        max-width: calc(33.333% - 13.334px) !important;
    }
    /* No sidebar to make room for (a flat category with no subcategories,
       or a category/brand list that came back empty) — the grid gets the
       full row back, so 4 columns fits as comfortably as everywhere else
       on the site instead of staying cramped into 3. */
    .d4u-shop-layout--full .d4u-shop-main ul.products > li {
        flex-basis: calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
    }
}

.d4u-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--d4u-muted);
}

/* ==========================================================================
   Single product
   ========================================================================== */
.d4u-product-page {
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
    padding: 24px 20px 56px;
}

.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 460px) 1fr;
    gap: 44px;
    margin-bottom: 40px;
}

/* WooCommerce hooks tabs/upsells/related onto woocommerce_after_single_product_summary,
   which makes them direct grid children of div.product alongside .images/.summary —
   without this they'd be squeezed into one of the two columns instead of spanning both. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .up-sells.upsells,
.woocommerce div.product > .related.products {
    grid-column: 1 / -1;
}

.woocommerce div.product div.images {
    position: sticky;
    top: 100px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    overflow: hidden;
    background: var(--d4u-bg-alt);
}

.woocommerce div.product div.images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--d4u-bg-alt);
}

.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li { list-style: none; }
.woocommerce div.product div.images .flex-control-thumbs img {
    width: 64px;
    height: 64px;
    aspect-ratio: 1/1;
    border-radius: var(--d4u-radius-sm);
    border: 1.5px solid var(--d4u-border);
    opacity: 0.75;
    transition: opacity var(--d4u-dur-fast) var(--d4u-ease), border-color var(--d4u-dur-fast) var(--d4u-ease);
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--d4u-green); }

.woocommerce div.product div.summary { max-width: none; }

.d4u-product-brand {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--d4u-green);
    margin-bottom: 6px;
}

.woocommerce div.product .product_title {
    font-size: 1.625rem;
    line-height: 1.25;
    margin: 0 0 4px;
}

/* Size line under the single-product title — same treatment as the card's
   .d4u-product-card__size (small, muted, clearly not part of the name),
   just with a touch more room since it follows a bigger heading here. */
.woocommerce div.product .d4u-single-product__size {
    font-size: 0.9375rem;
    margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.75rem;
    color: var(--d4u-ink);
    font-weight: 800;
    margin: 16px 0 4px;
}

.d4u-lowest-price-note {
    font-size: 0.8125rem;
    color: var(--d4u-muted);
    margin: 0 0 18px;
}

.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    flex-wrap: wrap;
}

.woocommerce div.product form.cart .quantity {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--d4u-border);
    border-radius: var(--d4u-radius-pill);
    overflow: hidden;
    height: 48px;
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 48px;
    border: 0;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    height: 100%;
    font-variant-numeric: tabular-nums;
}

.d4u-qty-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    font-size: 1.125rem;
    color: var(--d4u-green-dark);
    flex-shrink: 0;
    transition: background var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-qty-btn:hover { background: var(--d4u-green-pale); }
.d4u-qty-btn:active { transform: scale(0.96); }

.woocommerce div.product form.cart .button {
    flex: 1;
    min-width: 200px;
    padding: 14px 28px;
    font-size: 0.9375rem;
}

.d4u-delivery-box {
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    background: var(--d4u-bg-alt);
}

.d4u-delivery-box__row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.875rem; }
.d4u-delivery-box__row strong { font-weight: 600; }
.d4u-delivery-box__icon { flex-shrink: 0; color: var(--d4u-green); }
.d4u-delivery-box__icon svg { width: 20px; height: 20px; display: block; }

.d4u-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.d4u-status-dot--ok { background: var(--d4u-green); }
.d4u-status-dot--out { background: var(--d4u-star); }

/*
 * Accordion-style restyle of WooCommerce's native product data tabs.
 * Behavior (single panel open, click to switch) is WooCommerce's own
 * wc-single-product script toggling an "active" class on <li> + show/hide
 * on .panel — nothing reimplemented here, just restyled to look stacked
 * instead of side-by-side tabs.
 */
.woocommerce div.product .woocommerce-tabs { margin: 8px 0 48px; border-top: 1px solid var(--d4u-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    display: block;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--d4u-border);
    /* WooCommerce's own woocommerce.css sets a lavender background
       (#e9e6ed) on this exact selector — same specificity as this rule, so
       it survives untouched unless background is explicitly reset here. */
    background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--d4u-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--d4u-muted);
    border-bottom: 2px solid var(--d4u-muted);
    transform: rotate(45deg);
    transition: transform var(--d4u-dur) var(--d4u-ease);
    flex-shrink: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after { transform: rotate(-135deg); }
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 0 4px 22px;
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ==========================================================================
   Related / upsell carousels
   ========================================================================== */
.related.products,
.up-sells.upsells {
    margin-top: 8px;
}
.related.products > h2,
.up-sells.upsells > h2 {
    font-size: 1.375rem;
    margin: 0 0 20px;
}

/* ==========================================================================
   My Account (login/register/dashboard) — WooCommerce's own default
   templates render this page (no woocommerce/myaccount/*.php override in
   this theme), so everything below just restyles the existing markup/
   classes rather than rebuilding the page. Scoped to body.woocommerce-account,
   the body class WordPress adds automatically on this page.
   ========================================================================== */
body.woocommerce-account article > h1 {
    font-size: 1.75rem;
    margin: 0 0 24px;
    text-align: center;
}

/* Centers the whole login block on the page: heading + card share the same
   width/centering, so the heading doesn't stay pinned to the left edge
   while only the card centers independently. Widened from an earlier
   440px per client feedback ("poszerz cały panel"). max-width simply gets
   clamped by the narrower column when the register form sits beside this
   one (registration enabled), so this is harmless in the two-column case —
   no need to special-case it. */
body.woocommerce-account .woocommerce > h2,
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

body.woocommerce-account .woocommerce > h2 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 18px;
}

/* Login/Register side-by-side layout — only appears when the client turns
   on account registration in WooCommerce > Ustawienia > Konta i prywatność. */
body.woocommerce-account .u-columns.col2-set {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}
body.woocommerce-account .u-columns.col2-set .u-column1,
body.woocommerce-account .u-columns.col2-set .u-column2 {
    flex: 1 1 320px;
    min-width: 0;
}

body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register {
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    box-shadow: var(--d4u-shadow);
    padding: 32px;
}

body.woocommerce-account .woocommerce-form-row.woocommerce-form-row--wide {
    /* WooCommerce's own core CSS puts display:flex on .form-row (a class
       every row here shares, wide input rows included) — without this
       override, the label and input in each wide row sit side by side
       instead of stacked, since flex items ignore a child's own
       display:block. !important matches this codebase's established
       pattern for overriding WC core rules of equal/higher specificity.
       Scoped to the --wide variant specifically, not the bare
       .woocommerce-form-row class — the register form's submit-button row
       also carries plain .woocommerce-form-row (no --wide), and needs to
       stay display:contents (see the grid-reflow rules below) instead. */
    display: block !important;
    margin-bottom: 18px;
}
body.woocommerce-account .woocommerce-form-row label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--d4u-ink);
    margin-bottom: 6px;
}
body.woocommerce-account .woocommerce-form-row .required { color: var(--d4u-accent); }

body.woocommerce-account .woocommerce-Input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color var(--d4u-dur-fast) var(--d4u-ease), box-shadow var(--d4u-dur-fast) var(--d4u-ease);
}
body.woocommerce-account .woocommerce-Input:focus {
    outline: none;
    border-color: var(--d4u-green);
    box-shadow: 0 0 0 3px var(--d4u-green-pale);
}

/* Reflows the bottom of the login form into: [remember-me] [lost-password]
   on one row, then the submit button full-width on its own row below —
   matching the client's reference layout. The wide username/password rows
   are left to auto-place into rows 1-2 (nothing precedes them in source
   order); the checkbox/link/button are pinned to explicit rows 3-4 so they
   land below regardless of auto-placement. display:contents on the
   checkbox+button row "unwraps" that <p> so its children (checkbox-label,
   submit button) become independent grid items that can be placed apart
   from each other — without it they'd be stuck sharing one grid cell.
   :not(.woocommerce-form-row) keeps this scoped to that row only, not the
   wide input rows, which share the plain "form-row" class too. */
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}
body.woocommerce-account form.woocommerce-form-login > p.form-row:not(.woocommerce-form-row) {
    display: contents;
}

body.woocommerce-account .woocommerce-form-row.woocommerce-form-row--wide {
    grid-column: 1 / -1;
}

body.woocommerce-account .woocommerce-form-login__rememberme {
    grid-row: 3;
    grid-column: 1;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--d4u-muted);
    cursor: pointer;
}

body.woocommerce-account .woocommerce-LostPassword {
    grid-row: 3;
    grid-column: 2;
    align-self: center;
    justify-self: end;
    font-size: 0.875rem;
    margin: 0;
}
body.woocommerce-account .woocommerce-LostPassword a {
    color: var(--d4u-green);
    font-weight: 600;
}
body.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--d4u-green-dark); }

body.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__submit,
body.woocommerce-account form.woocommerce-form-register .woocommerce-form-register__submit {
    grid-row: 4;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 20px;
}

/* Register's form has no remember-me/lost-password row, just its own
   form-row wrapping the submit button — unwrap that one too so the button
   still lands correctly via the same grid-row/column rule above. */
body.woocommerce-account form.woocommerce-form-register > p.form-row {
    display: contents;
}

/* Logged-in dashboard: nav sidebar beside the content area. :has() scopes
   this to the logged-in case only (nav is a sibling of .woocommerce-MyAccount-content) —
   browsers without :has() just stack nav above content instead, which still
   reads fine, so there's no broken fallback to worry about. */
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 220px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    overflow: hidden;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link {
    border-bottom: 1px solid var(--d4u-border);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child { border-bottom: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 12px 18px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--d4u-ink);
    transition: background var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
    background: var(--d4u-bg-alt);
    color: var(--d4u-green);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--d4u-green-pale);
    color: var(--d4u-green-dark);
    font-weight: 700;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--d4u-green); font-weight: 600; }
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover { color: var(--d4u-green-dark); }

/* Addresses page — card grid (icon + title + formatted address + pill
   action) instead of WooCommerce's plain heading/link/paragraph default. */
.d4u-addresses-intro { margin: 0 0 22px; color: var(--d4u-muted); }

.d4u-addresses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.d4u-address-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    background: var(--d4u-bg);
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    box-shadow: var(--d4u-shadow-xs);
}
.d4u-address-card--empty {
    background: var(--d4u-bg-alt);
    border-style: dashed;
}

.d4u-address-card__head { display: flex; align-items: center; gap: 12px; }
.d4u-address-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--d4u-radius-sm);
    background: var(--d4u-green-pale);
    color: var(--d4u-green);
}
.d4u-address-card__icon svg { width: 20px; height: 20px; display: block; }
.d4u-address-card__head h2 { font-size: 1rem; margin: 0; }

.d4u-address-card__body { flex: 1; font-size: 0.9375rem; line-height: 1.65; }
.d4u-address-card__body address { font-style: normal; }
.d4u-address-card__empty-text { margin: 0; color: var(--d4u-muted); font-style: italic; }

body.woocommerce-account .woocommerce-MyAccount-content a.d4u-address-card__action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-pill);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--d4u-green);
    transition: background var(--d4u-dur-fast) var(--d4u-ease), border-color var(--d4u-dur-fast) var(--d4u-ease), color var(--d4u-dur-fast) var(--d4u-ease);
}
body.woocommerce-account .woocommerce-MyAccount-content a.d4u-address-card__action svg { width: 14px; height: 14px; flex-shrink: 0; }
body.woocommerce-account .woocommerce-MyAccount-content a.d4u-address-card__action:hover {
    background: var(--d4u-green-pale);
    border-color: var(--d4u-green);
    color: var(--d4u-green-dark);
}
body.woocommerce-account .woocommerce-MyAccount-content .d4u-address-card--empty a.d4u-address-card__action {
    background: var(--d4u-green);
    border-color: var(--d4u-green);
    color: #fff;
}
body.woocommerce-account .woocommerce-MyAccount-content .d4u-address-card--empty a.d4u-address-card__action:hover {
    background: var(--d4u-green-dark);
    border-color: var(--d4u-green-dark);
    color: #fff;
}

@media (max-width: 640px) {
    .d4u-addresses-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
        flex-direction: column;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation { flex-basis: auto; width: 100%; }
    body.woocommerce-account form.woocommerce-form-login,
    body.woocommerce-account form.woocommerce-form-register {
        max-width: none;
        padding: 24px;
    }
    /* The two-column checkbox/lost-password row gets too narrow for "Nie
       wylogowuj mnie" to fit without wrapping — stack them full-width instead. */
    body.woocommerce-account .woocommerce-form-login__rememberme,
    body.woocommerce-account .woocommerce-LostPassword {
        grid-column: 1 / -1;
        justify-self: start;
        margin-bottom: 10px;
    }
    body.woocommerce-account .woocommerce-LostPassword { grid-row: 4; }
    body.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__submit,
    body.woocommerce-account form.woocommerce-form-register .woocommerce-form-register__submit {
        grid-row: 5;
    }
}

/* ==========================================================================
   SEO copy blocks (promotions page)
   ========================================================================== */
.d4u-seo-copy { max-width: 860px; margin: 40px auto 0; }
.d4u-seo-copy h2 { font-size: 1.25rem; margin: 28px 0 10px; }
.d4u-seo-copy p { color: var(--d4u-muted); margin: 0 0 12px; }

/* ==========================================================================
   Shelf (lifestyle image + horizontal product row) — the repeating
   department pattern from Rossmann's homepage and "all categories" page.
   ========================================================================== */
.d4u-shelf {
    display: flex;
    gap: 28px;
    align-items: stretch;
    padding: 44px 20px;
}
.d4u-shelf:nth-child(even) { background: var(--d4u-bg-alt); }

.d4u-shelf-inner {
    display: flex;
    gap: 28px;
    max-width: var(--d4u-container);
    margin: 0 auto;
    width: 100%;
    align-items: stretch;
}

.d4u-shelf-media {
    flex: 0 0 260px;
    border-radius: var(--d4u-radius);
    overflow: hidden;
    background: var(--d4u-green-pale);
    box-shadow: inset 0 0 0 1px var(--d4u-outline-dark);
}
.d4u-shelf-media img { width: 100%; height: 100%; object-fit: cover; }

.d4u-shelf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.d4u-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.d4u-shelf-head h2 { font-size: 1.375rem; }
.d4u-shelf-head a { color: var(--d4u-green); font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
.d4u-shelf-head a:hover { color: var(--d4u-green-dark); }

.d4u-shelf-desc {
    color: var(--d4u-muted);
    font-size: 0.875rem;
    margin: 0 0 18px;
    max-width: 70ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.d4u-shelf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: auto;
}
.d4u-shelf-row > li {
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
}

/* ==========================================================================
   Trust bar (sitewide strip above footer)
   ========================================================================== */
.d4u-trust-bar {
    border-top: 1px solid var(--d4u-border);
    background: var(--d4u-bg-alt);
}

.d4u-trust-bar-grid {
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
    padding: 20px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.d4u-trust-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--d4u-muted);
}
.d4u-trust-bar-item strong { color: var(--d4u-ink); font-weight: 600; }
.d4u-trust-bar-icon { flex-shrink: 0; color: var(--d4u-green); }
.d4u-trust-bar-icon svg { width: 20px; height: 20px; display: block; }

@media (max-width: 960px) {
    .d4u-trust-bar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .d4u-trust-bar-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.d4u-footer {
    background: #12241A;
    color: #cfe0d6;
    margin-top: 40px;
}

.d4u-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 48px 20px;
    max-width: calc(var(--d4u-container) + 40px);
    margin: 0 auto;
}

.d4u-footer-col h3 { color: #fff; font-size: 1rem; margin: 0 0 14px; }
.d4u-footer-col ul li { margin-bottom: 8px; }

.d4u-footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.d4u-footer-logo img {
    height: 72px;
    width: auto;
    display: block;
    /* The source SVG is solid brand green; since it's loaded via <img> (not
       inlined), CSS can't reach its internal fill — this filter combo turns
       any opaque pixel white while preserving the shape/alpha, which is the
       standard trick for recoloring a raster-treated single-color SVG. */
    filter: brightness(0) invert(1);
}
.d4u-footer-col a { color: #cfe0d6; font-size: 0.875rem; transition: color var(--d4u-dur-fast) var(--d4u-ease); }
.d4u-footer-col a:hover { color: #fff; }
.d4u-footer-col p { font-size: 0.875rem; color: #cfe0d6; margin: 0 0 8px; }

.d4u-footer-stores-heading { color: #fff; font-size: 0.8125rem; font-weight: 600; margin: 18px 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.d4u-footer-stores { display: flex; flex-direction: column; gap: 10px; }
.d4u-footer-stores li { font-size: 0.875rem; color: #cfe0d6; line-height: 1.5; margin-bottom: 0; }
.d4u-footer-stores li strong { color: #fff; }

/* Footer store-locator map: click-to-load (see assets/js/footer-map.js for
   why) — the button and the map canvas occupy the same slot so revealing
   the map never shifts the footer's height by more than the map itself. */
.d4u-footer-map { margin-top: 16px; }
.d4u-footer-map__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--d4u-radius-pill);
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--d4u-dur-fast) var(--d4u-ease), border-color var(--d4u-dur-fast) var(--d4u-ease);
}
.d4u-footer-map__cta:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
.d4u-footer-map__cta[hidden] { display: none; }
.d4u-footer-map__cta-icon { display: inline-flex; width: 16px; height: 16px; }
.d4u-footer-map__cta-icon svg { width: 100%; height: 100%; }

.d4u-footer-map__canvas {
    width: 100%;
    height: 220px;
    border-radius: var(--d4u-radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Brand-green teardrop pin (Leaflet divIcon, not the library's default
   blue marker image) — plain CSS shape so it stays crisp at any zoom and
   needs no extra image asset. */
.d4u-map-pin { background: transparent; border: none; }
.d4u-map-pin__dot {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    background: var(--d4u-green);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transform: rotate(-45deg);
}

.d4u-footer-map .leaflet-popup-content-wrapper { border-radius: var(--d4u-radius-sm); }
.d4u-footer-map .leaflet-popup-content { font-size: 0.8125rem; color: var(--d4u-ink); line-height: 1.5; margin: 10px 12px; }

.d4u-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 20px;
    text-align: center;
    font-size: 0.8125rem;
    color: #9db3a5;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .woocommerce div.product { grid-template-columns: 1fr; }
    .woocommerce div.product div.images { position: static; }
}

@media (max-width: 960px) {
    .d4u-usp-grid, .d4u-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .d4u-product-grid > li, .woocommerce ul.products > li { flex-basis: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
    .d4u-shop-layout { flex-direction: column; }
    .d4u-shop-sidebar { width: 100%; position: static; }
    .d4u-shelf-inner { flex-direction: column; }
    .d4u-shelf-media { flex-basis: auto; height: 160px; }
    .d4u-shelf-row > li { flex-basis: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
    .d4u-categories-panel__inner { column-count: 3; }
    .d4u-promo-banners { grid-template-columns: repeat(2, 1fr); }
    .d4u-section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .d4u-header-row { flex-wrap: wrap; }
    .d4u-search-form { order: 3; max-width: none; width: 100%; }
    .d4u-menu-toggle { display: flex; }
    .d4u-nav { display: none; }
    .d4u-nav.is-open { display: block; }
    .d4u-nav-row { padding: 8px 12px; }
    .d4u-nav-links { flex-direction: column; gap: 0; }
    .d4u-nav-links > li > a { width: 100%; justify-content: space-between; }
    .d4u-categories-panel {
        position: static;
        box-shadow: none;
        border-radius: 0;
        max-height: none;
        transform: none;
    }
    .d4u-categories-panel__inner { column-count: 1; padding: 12px; }
    .d4u-usp-grid, .d4u-footer-grid { grid-template-columns: 1fr; }
    .d4u-shelf-row > li { flex-basis: 100% !important; max-width: 100% !important; }
    .d4u-product-grid > li, .woocommerce ul.products > li { flex-basis: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
    .d4u-hero-text h1 { font-size: 1.75rem; }
    .d4u-hero-badge { display: none; }
    .d4u-newsletter-form { flex-direction: column; }
    .woocommerce div.product form.cart .button { min-width: 0; }
}

/* ==========================================================================
   Loyalty tiers ("Mój poziom" — My Account tab). See inc/loyalty.php.
   ========================================================================== */
.d4u-loyalty {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.d4u-loyalty-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 24px;
    background: var(--d4u-green-pale);
    border-radius: var(--d4u-radius);
}
.d4u-loyalty-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.d4u-loyalty-block--spent {
    margin-left: auto;
    text-align: right;
}
.d4u-loyalty-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--d4u-muted);
}
.d4u-loyalty-tier-name {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--d4u-green-dark);
}
.d4u-loyalty-tier-name.is-none {
    font-size: 1rem;
    font-weight: 600;
    color: var(--d4u-muted);
}
.d4u-loyalty-spent-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--d4u-ink);
}

/* One-time reward coupon banner(s) — shown above the tier bar whenever the
   customer has an unused reward waiting. */
.d4u-loyalty-rewards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.d4u-loyalty-reward {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: #fff6e0;
    border: 1px solid #e0a92c;
    border-radius: var(--d4u-radius);
}
.d4u-loyalty-reward-badge {
    font-size: 1.75rem;
    line-height: 1;
}
.d4u-loyalty-reward-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.d4u-loyalty-reward-body strong {
    color: var(--d4u-green-dark);
    font-size: 1rem;
}
.d4u-loyalty-reward-code {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: var(--d4u-ink);
}
.d4u-loyalty-reward-hint {
    font-size: 0.8rem;
    color: var(--d4u-muted);
}

/* Tier bar: one horizontal track with a stop marked at every tier's
   threshold, so the whole ladder reads at a glance instead of living in a
   separate list below a plain fill bar. */
.d4u-loyalty-track-wrap {
    padding: 46px 14px 30px;
}
.d4u-loyalty-track {
    position: relative;
    height: 8px;
    border-radius: var(--d4u-radius-pill);
    background: var(--d4u-border);
}
.d4u-loyalty-track-fill {
    height: 100%;
    border-radius: var(--d4u-radius-pill);
    background: var(--d4u-green);
    transition: width var(--d4u-dur-slow) var(--d4u-ease);
}
.d4u-loyalty-stop {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.d4u-loyalty-stop-dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--d4u-border);
}
.d4u-loyalty-stop.is-reached .d4u-loyalty-stop-dot {
    background: var(--d4u-green);
    border-color: var(--d4u-green);
}
.d4u-loyalty-stop-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.d4u-loyalty-stop-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--d4u-muted);
}
.d4u-loyalty-stop.is-reached .d4u-loyalty-stop-name {
    color: var(--d4u-green-dark);
}
.d4u-loyalty-stop.is-current .d4u-loyalty-stop-name {
    color: var(--d4u-green-dark);
    font-weight: 700;
}
.d4u-loyalty-stop-threshold {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--d4u-muted);
}
.d4u-loyalty-you {
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid var(--d4u-ink);
}

.d4u-loyalty-progress-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--d4u-muted);
}
.d4u-loyalty-progress-note.is-max {
    color: var(--d4u-green-dark);
    font-weight: 600;
}

@media (max-width: 480px) {
    .d4u-loyalty-block--spent { margin-left: 0; text-align: left; }
    .d4u-loyalty-stop-label { white-space: normal; width: 70px; }
    .d4u-promo-banners { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Cart-value threshold bar. See inc/cart-bar.php. Rendered just before the
   Cart block (and via woocommerce_before_cart on the classic template).
   ========================================================================== */
.d4u-cart-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: var(--d4u-bg-cream);
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
}
.d4u-cart-bar-track {
    height: 8px;
    border-radius: var(--d4u-radius-pill);
    background: var(--d4u-border);
    overflow: hidden;
}
.d4u-cart-bar-fill {
    height: 100%;
    border-radius: var(--d4u-radius-pill);
    background: var(--d4u-green);
    transition: width var(--d4u-dur-slow) var(--d4u-ease);
}
.d4u-cart-bar-message {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--d4u-ink);
}

/* ==========================================================================
   Brand bar (homepage "Kupuj wg marki"). See inc/brands.php.
   ========================================================================== */
.d4u-brand-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.d4u-brand-bar-item {
    flex: 1 1 150px;
    max-width: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    transition: border-color var(--d4u-dur) var(--d4u-ease), box-shadow var(--d4u-dur) var(--d4u-ease);
}
.d4u-brand-bar-item:hover {
    border-color: var(--d4u-green);
    box-shadow: var(--d4u-shadow);
}
.d4u-brand-bar-item img {
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--d4u-dur) var(--d4u-ease), opacity var(--d4u-dur) var(--d4u-ease);
}
.d4u-brand-bar-item:hover img {
    filter: none;
    opacity: 1;
}
.d4u-brand-bar-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--d4u-ink);
    text-align: center;
}

@media (max-width: 640px) {
    .d4u-brand-bar-item { flex-basis: calc(50% - 8px); max-width: none; }
}

/* ==========================================================================
   Zestawy (bundles). See inc/bundles.php, page-zestawy.php, single-d4u_bundle.php.
   ========================================================================== */
.d4u-btn--large {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 1rem;
    width: 100%;
}

.d4u-bundle-grid {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.d4u-bundle-card {
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    overflow: hidden;
    transition: box-shadow var(--d4u-dur) var(--d4u-ease), transform var(--d4u-dur) var(--d4u-ease);
}
.d4u-bundle-card:hover {
    box-shadow: var(--d4u-shadow-md);
    transform: translateY(-2px);
}
.d4u-bundle-card-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    color: var(--d4u-ink);
}
.d4u-bundle-card-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d4u-bg-alt);
    border-radius: var(--d4u-radius-sm);
    overflow: hidden;
}
.d4u-bundle-card-image img { width: 100%; height: 100%; object-fit: contain; }
.d4u-bundle-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
}
.d4u-bundle-card-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--d4u-green-dark);
}
.d4u-bundle-card-was {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--d4u-muted);
    text-decoration: line-through;
}

/* Single bundle page */
.d4u-bundle-description { margin: 16px 0 24px; color: var(--d4u-ink); line-height: 1.7; }

.d4u-bundle-items {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--d4u-border);
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    overflow: hidden;
}
.d4u-bundle-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #fff;
}
.d4u-bundle-item--gratis { background: var(--d4u-green-pale); }
.d4u-bundle-item-image {
    flex: none;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d4u-bg-alt);
    border-radius: var(--d4u-radius-sm);
    overflow: hidden;
}
.d4u-bundle-item-image img { width: 100%; height: 100%; object-fit: contain; }
.d4u-bundle-item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.d4u-bundle-item-name {
    font-weight: 600;
    color: var(--d4u-ink);
}
.d4u-bundle-item-name:hover { color: var(--d4u-green); }
.d4u-bundle-item-meta {
    font-size: 0.875rem;
    color: var(--d4u-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.d4u-bundle-item-meta del { color: var(--d4u-muted); }
.d4u-bundle-item-meta ins { color: var(--d4u-green-dark); font-weight: 700; text-decoration: none; }
.d4u-bundle-gratis-badge {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--d4u-green-dark);
    background: #fff;
    border-radius: var(--d4u-radius-pill);
    padding: 3px 10px;
}

.d4u-bundle-summary {
    max-width: 420px;
    padding: 20px;
    background: var(--d4u-bg-alt);
    border-radius: var(--d4u-radius);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.d4u-bundle-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9375rem;
    color: var(--d4u-muted);
}
.d4u-bundle-summary-row del { color: var(--d4u-muted); }
.d4u-bundle-summary-row--total {
    font-size: 1.25rem;
    color: var(--d4u-ink);
}
.d4u-bundle-summary-row--total strong { color: var(--d4u-green-dark); }
.d4u-bundle-savings {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--d4u-accent);
}
.d4u-bundle-add-form { margin-top: 4px; }

@media (max-width: 480px) {
    .d4u-bundle-summary { max-width: none; }
    .d4u-bundle-item { flex-wrap: wrap; }
}

/* ==========================================================================
   Newsletter popup. See inc/newsletter-popup.php, assets/js/newsletter-popup.js.
   ========================================================================== */
.d4u-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.d4u-popup[hidden] {
    display: none;
}
.d4u-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 24, 0.55);
    animation: d4uFadeIn var(--d4u-dur-slow) var(--d4u-ease) both;
}
.d4u-popup-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--d4u-radius-xl);
    padding: 36px 32px 28px;
    text-align: center;
    box-shadow: var(--d4u-shadow-md);
    animation: d4uPopupIn var(--d4u-dur-slow) var(--d4u-ease) both;
}
@keyframes d4uFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes d4uPopupIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .d4u-popup-backdrop, .d4u-popup-panel { animation: none; }
}

.d4u-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--d4u-bg-alt);
    color: var(--d4u-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.d4u-popup-close:hover { background: var(--d4u-border); color: var(--d4u-ink); }

.d4u-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--d4u-green-pale);
    color: var(--d4u-green-dark);
}
.d4u-popup-icon svg { width: 28px; height: 28px; }

.d4u-popup-panel h2 {
    margin: 0 0 8px;
    font-size: 1.375rem;
    line-height: 1.3;
}
.d4u-popup-panel p { margin: 0 0 16px; color: var(--d4u-muted); font-size: 0.9375rem; }

.d4u-popup-panel form { display: flex; flex-direction: column; gap: 10px; }
.d4u-popup-panel input[type="email"] {
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-pill);
    font-size: 0.9375rem;
}
.d4u-popup-panel input[type="email"]:focus { outline: 2px solid var(--d4u-green); outline-offset: 1px; }
.d4u-popup-panel .d4u-btn { width: 100%; }

.d4u-popup-error {
    margin: 0;
    color: var(--d4u-accent);
    font-size: 0.85rem;
}

.d4u-popup-fineprint {
    margin: 14px 0 0;
    font-size: 0.75rem;
    color: var(--d4u-muted);
}

.d4u-popup-coupon {
    margin: 0 0 8px;
    padding: 12px;
    background: var(--d4u-bg-alt);
    border: 1px dashed var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--d4u-green-dark);
}

body.d4u-popup-open { overflow: hidden; }

/* ==========================================================================
   Search suggestions dropdown. See inc/search-suggestions.php,
   assets/js/search-suggestions.js.
   ========================================================================== */
.d4u-search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 90;
    background: #fff;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    box-shadow: var(--d4u-shadow-md);
    padding: 10px 0;
    max-height: 70vh;
    overflow-y: auto;
    text-align: left;
}

.d4u-search-suggestions-label {
    margin: 4px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--d4u-muted);
}

.d4u-search-suggestions-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.d4u-search-suggestions-list a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: var(--d4u-ink);
}
.d4u-search-suggestions-list a:hover,
.d4u-search-suggestions-list a.is-active {
    background: var(--d4u-bg-alt);
}

.d4u-search-suggestion-cat-count { color: var(--d4u-muted); font-size: 0.85rem; }

.d4u-search-suggestions-list--products a { gap: 12px; }
.d4u-search-suggestion-image {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d4u-bg-alt);
    border-radius: var(--d4u-radius-xs);
    overflow: hidden;
}
.d4u-search-suggestion-image img { width: 100%; height: 100%; object-fit: contain; }
.d4u-search-suggestion-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.d4u-search-suggestion-name {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d4u-search-suggestion-price {
    font-size: 0.8125rem;
    color: var(--d4u-green-dark);
    font-weight: 600;
}

.d4u-search-suggestions-viewall {
    display: block;
    margin-top: 4px;
    padding: 10px 16px;
    border-top: 1px solid var(--d4u-border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--d4u-green);
}
.d4u-search-suggestions-viewall:hover { color: var(--d4u-green-dark); }

.d4u-search-suggestions-empty {
    margin: 0;
    padding: 8px 16px;
    color: var(--d4u-muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   Cart & checkout (classic templates)
   ========================================================================== */
.woocommerce-cart .woocommerce-cart-form table.shop_table,
.woocommerce-checkout table.shop_table {
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.woocommerce-cart table.shop_table th, .woocommerce-checkout table.shop_table th { font-size: 0.875rem; }

.woocommerce-cart-form .product-thumbnail img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    background: var(--d4u-bg-alt);
}
.woocommerce-cart-form .product-remove a {
    color: var(--d4u-muted);
    font-size: 1.1em;
}
.woocommerce-cart-form .product-remove a:hover { color: var(--d4u-accent); }
.woocommerce-cart-form .quantity .qty {
    width: 64px;
    padding: 8px 10px;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    font-family: inherit;
}

.woocommerce-cart-form .coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.woocommerce-cart-form .coupon .input-text {
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
}
#payment .form-row .input-text,
.woocommerce-checkout .coupon .input-text {
    padding: 10px 14px;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
}

.cart_totals, .woocommerce-checkout-review-order {
    background: var(--d4u-bg-alt);
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius);
    padding: 4px 20px;
}
.cart_totals h2, .woocommerce-checkout-review-order-table + h3,
.woocommerce-checkout table.shop_table + h3 { font-size: 1.125rem; }

/* WooCommerce's own core CSS tints #payment / .payment_box with its default
   purple accent at low opacity — same leftover-brand-color issue as the
   .button.alt and product-tabs fixes elsewhere in this file. */
#payment { background: var(--d4u-bg-alt) !important; border-radius: var(--d4u-radius); }
.woocommerce-checkout #payment div.payment_box {
    background: #fff !important;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

body.woocommerce-checkout .woocommerce-Input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--d4u-border);
    border-radius: var(--d4u-radius-sm);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color var(--d4u-dur-fast) var(--d4u-ease), box-shadow var(--d4u-dur-fast) var(--d4u-ease);
}
body.woocommerce-checkout .woocommerce-Input:focus {
    outline: none;
    border-color: var(--d4u-green);
    box-shadow: 0 0 0 3px var(--d4u-green-pale);
}
body.woocommerce-checkout .form-row label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--d4u-ink); margin-bottom: 6px; }
body.woocommerce-checkout .form-row .required { color: var(--d4u-accent); }
body.woocommerce-checkout .form-row { margin-bottom: 18px; }
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout h3#order_review_heading { margin-top: 32px; }

@media (max-width: 460px) {
    .d4u-product-grid > li, .woocommerce ul.products > li { flex-basis: 100% !important; max-width: 100% !important; }
}