/* ============================================================
   WATEC DESIGN SYSTEM — Block 4 (v1.0.0)
   Single source of truth for design tokens.
   Loaded AFTER watec-b2b-commerce/assets/frontend.css so these
   :root redefinitions win for the legacy --watec-* variables.

   Palette approved by George 2026-08-06 (see
   reports/block4-palette-proposal.html). All text-on-white
   colors verified >= 4.5:1 WCAG AA.
   ============================================================ */

/* ============================================================
   4.2 — COLOR TOKENS
   ============================================================ */
:root {
    /* Brand */
    --w-navy: #1A365D;          /* primary surfaces, headers, footer */
    --w-aqua-dark: #0E7490;     /* text-safe aqua: headings, links (5.36:1) */
    --w-aqua: #51BDE6;          /* decorative ONLY: icons, fills on navy */
    --w-aqua-pale: #C1E6FA;     /* background washes, badges */
    --w-cta: #EB3D0A;           /* the ONE accent — primary buttons only */
    --w-cta-hover: #C2340A;     /* 5.54:1 */

    /* Semantic */
    --w-success: #059669;
    --w-warning: #B45309;       /* 5.9:1 — "Na objednávku", pending */
    --w-error: #B91C1C;         /* 7.0:1 — form errors, failed states */

    /* Neutral ramp */
    --w-ink: #1E293B;           /* high-emphasis text */
    --w-body: #333333;          /* default paragraph text */
    --w-slate: #64748B;         /* secondary text, meta, SKUs */
    --w-line: #E2E8F0;          /* 1px borders, dividers */
    --w-line-light: #F1F5F9;
    --w-bg-soft: #F8FAFC;       /* alternating sections */
    --w-white: #FFFFFF;

    /* Elevation */
    --w-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --w-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --w-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    /* Radii */
    --w-radius-sm: 4px;
    --w-radius: 8px;            /* buttons, inputs */
    --w-radius-card: 12px;      /* cards (4.5) */

    /* Type (4.3) */
    --w-font: 'Geologica', sans-serif;
    --w-h1-size: 40px;  --w-h1-lh: 1.2;
    --w-h2-size: 30px;  --w-h2-lh: 1.25;
    --w-h3-size: 22px;  --w-h3-lh: 1.3;
    --w-body-size: 16.5px; --w-body-lh: 1.6;
    --w-small-size: 14px;

    /* Layout (4.1) */
    --w-container: 1320px;
    --w-gutter: 24px;

    /* Spacing scale (4.6): 4/8/12/16/24/32/48/64/96 */
    --w-space-1: 4px;
    --w-space-2: 8px;
    --w-space-3: 12px;
    --w-space-4: 16px;
    --w-space-5: 24px;
    --w-space-6: 32px;
    --w-space-7: 48px;
    --w-space-8: 64px;
    --w-space-9: 96px;

    --w-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   LEGACY VARIABLE REMAP
   frontend.css (B2B plugin) consumes --watec-*. Pointing those
   at the new tokens upgrades the whole existing stylesheet
   without touching its 1500 lines.
   ------------------------------------------------------------ */
:root {
    --watec-primary: var(--w-navy);
    --watec-accent: var(--w-aqua-dark);        /* was #51BDE6 — now text-safe */
    --watec-accent-decor: var(--w-aqua);       /* decorative uses only */
    --watec-cta: var(--w-cta);
    --watec-cta-hover: var(--w-cta-hover);     /* was #C41E00 */
    --watec-success: var(--w-success);
    --watec-warning: var(--w-warning);         /* was #D97706 (fails AA) */
    --watec-danger: var(--w-error);            /* was #DC2626 */
    --watec-bg: var(--w-bg-soft);
    --watec-white: var(--w-white);
    --watec-text: var(--w-ink);
    --watec-text-muted: var(--w-slate);
    --watec-border: var(--w-line);
    --watec-border-light: var(--w-line-light);
    --watec-shadow-sm: var(--w-shadow-sm);
    --watec-shadow: var(--w-shadow);
    --watec-shadow-lg: var(--w-shadow-lg);
    --watec-radius-sm: var(--w-radius-sm);
    --watec-radius: var(--w-radius);
    --watec-radius-lg: var(--w-radius-card);
    --watec-transition: var(--w-transition);
}

/* ============================================================
   4.1 — LAYOUT: container 1320px, gutters 24px
   ============================================================ */
.w-container {
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--w-gutter);
}

/* Full-width background band with contained content */
.w-band {
    width: 100%;
    background: var(--w-bg-soft);
}
.w-band > .w-container {
    padding-block: var(--w-space-8);
}

/*
 * .site-main width alignment with the Elementor header (2026-09-29).
 * hello-elementor's theme.min.css caps
 * `body:not([class*=elementor-page-]) .site-main` at 1140px @≥1200px
 * while the header's flex containers run at the kit's
 * --container-max-width: 1320px — shop archives (/obchod/, category,
 * search) rendered 180px narrower than the header. Mirror the theme's
 * exact selector (same specificity; this sheet enqueues later at
 * priority 30, so it wins) inside the same breakpoint so the
 * 576/768/992px caps stay intact.
 */
@media (min-width: 1200px) {
    body:not([class*="elementor-page-"]) .site-main {
        max-width: var(--w-container); /* 1320px */
    }
}

/* ============================================================
   4.3 — TYPE: Geologica scale, sentence case
   Plain element selectors = fallback defaults. Elementor kit
   typography (set to the same values) wins wherever configured.
   ============================================================ */
body {
    font-family: var(--w-font);
    font-size: var(--w-body-size);
    line-height: var(--w-body-lh);
    color: var(--w-body);
}

h1, .w-h1 { font-size: var(--w-h1-size); line-height: var(--w-h1-lh); }
h2, .w-h2 { font-size: var(--w-h2-size); line-height: var(--w-h2-lh); }
h3, .w-h3 { font-size: var(--w-h3-size); line-height: var(--w-h3-lh); }
.w-small, small { font-size: var(--w-small-size); }

h1, h2, h3, h4, h5, h6 {
    color: var(--w-navy);
    text-transform: none;       /* sentence case, never ALL CAPS */
}

a { color: var(--w-aqua-dark); }
a:hover { color: var(--w-navy); }

/* ============================================================
   4.4 — BUTTONS: 44px min height, radius 8,
   one primary CTA per card/section
   ============================================================ */
.w-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--w-space-2);
    min-height: 44px;
    padding: 0 var(--w-space-5);
    border-radius: var(--w-radius);
    font-family: var(--w-font);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--w-transition);
    border: 2px solid transparent;
}

/* Every variant is duplicated with an `a.` prefix on purpose. The Elementor
   kit ships `.elementor-kit-6 a { color: #0E7490 }` — specificity (0,1,1),
   which outranks a bare `.w-btn--primary` (0,1,0). Without the anchor form,
   every button rendered as a LINK came out aqua: #0E7490 text on the #EB3D0A
   CTA, which is both wrong and far below AA. `a.w-btn--primary` ties the kit
   at (0,1,1) and design-system.css is enqueued after post-6.css, so the tie
   resolves here. Buttons rendered as <button> never had the problem, which is
   why it only showed up once the product card started emitting <a> CTAs. */
.w-btn--primary,
a.w-btn--primary {
    background: var(--w-cta);
    color: var(--w-white);
}
.w-btn--primary:hover,
.w-btn--primary:focus,
a.w-btn--primary:hover,
a.w-btn--primary:focus {
    background: var(--w-cta-hover);
    color: var(--w-white);
}

.w-btn--secondary,
a.w-btn--secondary {
    background: transparent;
    border-color: var(--w-navy);
    color: var(--w-navy);
}
.w-btn--secondary:hover,
.w-btn--secondary:focus,
a.w-btn--secondary:hover,
a.w-btn--secondary:focus {
    background: var(--w-navy);
    color: var(--w-white);
}

.w-btn--tertiary,
a.w-btn--tertiary {
    background: transparent;
    color: var(--w-aqua-dark);
    padding-inline: var(--w-space-2);
}
.w-btn--tertiary:hover,
.w-btn--tertiary:focus,
a.w-btn--tertiary:hover,
a.w-btn--tertiary:focus {
    color: var(--w-navy);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   4.4.1 — MINI-CART FOOTER BUTTONS (Elementor Menu Cart widget)

   George, 2026-09-04: "Zobraziť košík" and "Pokladňa" rendered as
   two cramped 108px grid columns in the default Elementor gray
   (#69727D) with mismatched heights (the Slovak label wrapped to
   two lines on one button only). Unified on the design-system
   button language: Pokladňa = w-btn--primary (the ONE accent),
   Zobraziť košík = w-btn--secondary (navy outline). Stacked
   full-width so the two labels can never misalign again.

   Loaded last in the cascade (design-system > Elementor sheets),
   so this widget-prefixed specificity (0,3,0)/(0,4,1) out-ranks
   the widget's (0,2,0) without !important.
   ------------------------------------------------------------ */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--w-space-3);
    grid-template-columns: none;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 12px var(--w-space-4);
    border: 2px solid transparent;
    border-radius: var(--w-radius);
    font-family: var(--w-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: var(--w-transition);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
    background: var(--w-white);
    border-color: var(--w-navy);
    color: var(--w-navy);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:focus {
    background: var(--w-navy);
    color: var(--w-white);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout {
    background: var(--w-cta);
    color: var(--w-white);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout:focus {
    background: var(--w-cta-hover);
    color: var(--w-white);
}

/* ============================================================
   4.5 — CARDS: radius 12, 1px border, hover shadow,
   equal height, 1:1 media, object-fit contain
   ============================================================ */
.w-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--w-white);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius-card);
    box-shadow: var(--w-shadow-sm);
    overflow: hidden;
    transition: var(--w-transition);
}
.w-card:hover {
    box-shadow: var(--w-shadow-lg);
}
.w-card__media {
    aspect-ratio: 1 / 1;
    background: var(--w-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--w-space-4);
}
.w-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.w-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--w-space-2);
    padding: var(--w-space-4);
}
.w-card__footer {
    margin-top: auto;           /* equal-height cards align CTAs */
    padding-top: var(--w-space-3);
}

/* Block 5.2: the !important arms race here is over. frontend.css no longer
   declares the card (that block moved to watec-b2b-commerce/assets/
   product-card.css, without !important), and loop items now carry .w-card
   directly via ProductCard::card_class(), so the radius comes from the
   .w-card rule above. Nothing to override. */

/* ============================================================
   4.6 — SPACING SCALE utilities (4/8/12/16/24/32/48/64/96)
   ============================================================ */
.w-mt-1 { margin-top: var(--w-space-1); } .w-mb-1 { margin-bottom: var(--w-space-1); }
.w-mt-2 { margin-top: var(--w-space-2); } .w-mb-2 { margin-bottom: var(--w-space-2); }
.w-mt-3 { margin-top: var(--w-space-3); } .w-mb-3 { margin-bottom: var(--w-space-3); }
.w-mt-4 { margin-top: var(--w-space-4); } .w-mb-4 { margin-bottom: var(--w-space-4); }
.w-mt-5 { margin-top: var(--w-space-5); } .w-mb-5 { margin-bottom: var(--w-space-5); }
.w-mt-6 { margin-top: var(--w-space-6); } .w-mb-6 { margin-bottom: var(--w-space-6); }
.w-mt-7 { margin-top: var(--w-space-7); } .w-mb-7 { margin-bottom: var(--w-space-7); }
.w-mt-8 { margin-top: var(--w-space-8); } .w-mb-8 { margin-bottom: var(--w-space-8); }
.w-mt-9 { margin-top: var(--w-space-9); } .w-mb-9 { margin-bottom: var(--w-space-9); }
.w-stack    > * + * { margin-top: var(--w-space-4); }
.w-stack-sm > * + * { margin-top: var(--w-space-2); }
.w-stack-lg > * + * { margin-top: var(--w-space-6); }

/* ============================================================
   4.7 — REUSABLE STATES
   ============================================================ */

/* Loading skeleton */
.w-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--w-line-light);
    border-radius: var(--w-radius-sm);
    min-height: 1em;
}
.w-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: w-skeleton-shimmer 1.4s infinite;
}
@keyframes w-skeleton-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .w-skeleton::after { animation: none; }
}

/* Generic state panel (empty result / error base) */
.w-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-7) var(--w-space-5);
    background: var(--w-bg-soft);
    border: 1px solid var(--w-line);   /* solid — dashed reads as a form error */
    border-radius: var(--w-radius-card);
    text-align: center;
}
.w-state__icon { font-size: 32px; line-height: 1; }
.w-state__title { font-size: var(--w-h3-size); line-height: var(--w-h3-lh); color: var(--w-ink); font-weight: 600; }
.w-state__text { font-size: var(--w-small-size); color: var(--w-slate); max-width: 46ch; }

.w-state--error {
    background: #FEF2F2;
    border-color: var(--w-error);
}
.w-state--error .w-state__title { color: var(--w-error); }

/* Pending approval */
.w-pending {
    display: flex;
    align-items: flex-start;
    gap: var(--w-space-3);
    padding: var(--w-space-4) var(--w-space-5);
    background: #FFFBEB;
    border: 1px solid var(--w-warning);
    border-left-width: 4px;
    border-radius: var(--w-radius);
}
.w-pending__title { color: var(--w-warning); font-weight: 600; }
.w-pending__text { font-size: var(--w-small-size); color: var(--w-body); }

/* Price hidden (guest) — canonical class; .pohoda-price-hidden
   in frontend.css is patched to the same solid-border treatment. */
.w-price-hidden {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-5);
    background: var(--w-bg-soft);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius-card);
    text-align: center;
}
.w-price-hidden__message {
    font-size: var(--w-small-size);
    color: var(--w-slate);
    line-height: 1.5;
}

/* ============================================================
   STYLE GUIDE PAGE scaffolding (page-style-guide.php)
   ============================================================ */
.w-sg-section { padding-block: var(--w-space-7); border-bottom: 1px solid var(--w-line); }
.w-sg-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-slate); margin-bottom: var(--w-space-4); }
.w-sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--w-space-3); }
.w-sg-swatch { border: 1px solid var(--w-line); border-radius: var(--w-radius); overflow: hidden; }
.w-sg-chip { height: 64px; }
.w-sg-meta { padding: var(--w-space-2) var(--w-space-3); font-size: 12px; color: var(--w-slate); }
.w-sg-meta b { display: block; color: var(--w-ink); font-size: 13px; }
.w-sg-spacebar { background: var(--w-aqua-pale); border-radius: var(--w-radius-sm); height: 16px; }
.w-sg-row { display: flex; flex-wrap: wrap; gap: var(--w-space-3); align-items: center; }

/* Homepage: the Robot PROWLER / Pentair carousel is discontinued. Its parent
   contains only this banner, so removing it from layout leaves no empty hero
   space and does not affect the service-benefit strip below. */
body.home .elementor-8 .elementor-element.elementor-element-1104602 {
    /*display: none;*/
}

/* ------------------------------------------------------------
   PRICE SUFFIX (VAT display, 2026-08-19)
   Main price is gross (s DPH); the suffix carries the net figure
   (bez DPH) on its own line. Woo wraps the option text in
   <small class="woocommerce-price-suffix">; our spans inside it:
   .w-suffix-vat = "s DPH", .w-net-price = "(x € bez DPH)".
   ------------------------------------------------------------ */
.woocommerce-price-suffix {
    font-weight: 400;
    color: var(--w-slate);
}

.woocommerce-price-suffix .w-net-price {
    display: block;
}

/* Inner amount must not inherit the hero price's size/weight/color. */
.woocommerce-price-suffix .woocommerce-Price-amount,
.woocommerce-price-suffix .woocommerce-Price-amount bdi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Desktop/loop cards: "s DPH" stays inline with the gross price,
   only the net figure wraps to its own quiet line. The mobile card
   rules below (same specificity, later in file) override this. */
.woocommerce ul.products li.w-card .w-card__price .woocommerce-price-suffix {
    display: inline;
    font-size: 12px;
}

/* Single product page: gross is the hero figure, "s DPH" sits on its
   baseline, net is a muted caption on the next line — one left edge.
   p.price is display:flex (Elementor widget styles), which blockifies
   the suffix into a right-hand column; restore normal inline flow. */
.single-product .elementor-widget-woocommerce-product-price p.price {
    display: block;
}
.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix {
    font-size: 14px;
    color: var(--w-slate);
}

/* Clamp EVERY descendant of the suffix — size, weight, color — so no
   Woo/Elementor/kit rule can make the net figure bold or large. */
.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix,
.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix span,
.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix bdi {
    font-size: 14px;
    font-weight: 400;
    color: var(--w-slate);
}

.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix .w-suffix-vat {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-left: 2px;
}

.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix .w-net-price {
    margin-top: 2px;
}

/* Single-product breadcrumb: centered above the product (George, 2026-08-19).
   The base flex styles live in the Elementor Custom Code snippet
   "Watec Phase 1 Fixes" (left-aligned); we only override alignment. */
.single-product .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb {
    justify-content: center;
    text-align: center;
}

/* ============================================================
   Mobile catalogue — title-led single-product cards

   Modelled on the reference shop's information hierarchy, not its visual
   styling: product name, generous image, purchase controls, price, then
   stock. One product per row gives commercial information enough room to be
   read and touched without turning each card into a cramped desktop tile.
   ============================================================ */
@media (max-width: 767px) {
    /* Homepage only: Elementor widget 36d63a4 is the main catalogue section.
       Elementor owns its grid on larger screens, but its two-column mobile
       layout cannot carry this card's full purchase row. Hand its PHONE
       layout to the same one-product presentation as category archives. */
    body.home .elementor-8 .elementor-element.elementor-element-36d63a4.elementor-wc-products ul.products.elementor-grid,
    body.home .elementor-8 .elementor-element.elementor-element-91832f2 ul.products {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    body.home .elementor-8 .elementor-element.elementor-element-36d63a4.elementor-wc-products ul.products.elementor-grid li.w-card,
    body.home .elementor-8 .elementor-element.elementor-element-91832f2 ul.products li.w-card {
        width: 100%;
        max-width: none;
        margin: 0;
        float: none;
    }

    .woocommerce ul.products:not(.elementor-grid) {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .woocommerce ul.products li.w-card {
        display: flex;
        flex-direction: column;
        border-color: var(--w-line);
        border-radius: 14px;
        box-shadow: 0 5px 18px rgba(26, 54, 93, 0.08);
        overflow: hidden;
    }

    /* Flatten the body only on phones so the title can lead the visual flow
       while preserving the accessible source order and desktop layout. */
    .woocommerce ul.products li.w-card .w-card__body {
        display: contents;
    }

    .woocommerce ul.products li.w-card .w-card__brand,
    .woocommerce ul.products li.w-card .w-card__sku {
        display: none;
    }

    .woocommerce ul.products li.w-card .w-card__title {
        order: 1;
        min-height: 0;
        margin: 0;
        padding: 18px 20px 8px;
        color: var(--w-navy);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        text-align: center;
    }

    .woocommerce ul.products li.w-card .w-card__media {
        order: 2;
        aspect-ratio: auto;
        height: 230px;
        padding: 14px 32px 20px;
        background: var(--w-white);
    }

    .woocommerce ul.products li.w-card .w-card__media img {
        max-height: 100%;
        object-fit: contain;
    }

    .woocommerce ul.products li.w-card .w-card__footer {
        order: 3;
        margin: 0;
        padding: 0 20px 16px;
    }

    .woocommerce ul.products li.w-card .w-card__buy {
        display: flex;
        flex-flow: row nowrap;
        gap: 10px;
    }

    .woocommerce ul.products li.w-card .w-card__buy .w-qty {
        display: inline-flex;
        flex: 0 0 104px;
        flex-flow: row nowrap;
        width: 104px;
        max-width: 104px;
        align-self: stretch;
    }

    .woocommerce ul.products li.w-card .w-card__buy .w-qty__btn {
        flex: 0 0 30px;
        width: 30px;
        min-width: 30px;
        padding: 0;
    }

    .woocommerce ul.products li.w-card .w-card__buy .w-qty__input {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        max-width: 42px;
        padding: 0;
    }

    .woocommerce ul.products li.w-card .w-card__buy .add_to_cart_button {
        min-height: 46px;
        padding: 0 18px;
        font-size: 14px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .woocommerce ul.products li.w-card .w-card__price {
        order: 4;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 16px;
        margin: 0;
        padding: 14px 20px 10px;
        border-top: 1px solid var(--w-line-light);
        color: var(--w-navy);
        font-size: 21px;
    }

    .woocommerce ul.products li.w-card .w-card__price::before {
        content: 'Cena s DPH';
        flex: none;
        color: var(--w-slate);
        font-size: 12px;
        font-weight: 500;
    }

    /* Net price on its own right-aligned row; the ::before label already
       says "Cena s DPH", so the redundant s-DPH span is dropped here. */
    .woocommerce ul.products li.w-card .w-card__price .woocommerce-price-suffix {
        display: block;
        flex: 1 1 100%;
        text-align: right;
        font-size: 12px;
        font-weight: 400;
        color: var(--w-slate);
    }

    .woocommerce ul.products li.w-card .w-card__price .woocommerce-price-suffix .w-suffix-vat {
        display: none;
    }

    .woocommerce ul.products li.w-card .w-card__stock {
        order: 5;
        display: flex;
        padding: 0 20px 16px;
        color: var(--w-success);
        font-size: 13px;
    }

    .woocommerce ul.products li.w-card .w-card__stock::before {
        width: 7px;
        height: 7px;
    }

    /* Header: preserve the brand but stop it consuming the first mobile
       viewport before a customer reaches the catalogue. */
    .elementor-105 .elementor-element.elementor-element-7b77376 {
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .elementor-105 .elementor-element.elementor-element-f672d8b img {
        max-width: 46%;
    }
}

/* ============================================================
   MOBILE NAV RESCUE (2026-09-04, D21)
   Symptom: on phones there was NO navigation at all — no hamburger,
   no cart. Root cause: the homepage hero promo text contains long
   &nbsp;-joined word runs (~445px unbreakable at 390px viewport);
   Elementor flex ancestors default to min-width:auto, so one paragraph
   stretched <body> to 485px and pushed the header's mobile row
   (jet-mobile-menu hamburger + phone number) off the right edge.
   Stacked bug 2: the hamburger icon was white on light aqua #51BDE6.
   Stacked bug 3: the cart widget carried hide_mobile in the template
   (fixed via _elementor_data edit, see DECISIONS.md D21).
   ============================================================ */
@media (max-width: 767px) {
    /* Allow flex descendants to shrink below their content width
       instead of stretching the whole page. .e-con-inner is the boxed
       container's inner flex wrapper — its token is NOT matched by
       .e-con, and it was the link that stretched at init (fallback
       font metrics), which the hero Swiper then froze as inline
       slide widths. */
    .elementor .e-con,
    .elementor .e-con-inner,
    .elementor .elementor-widget {
        min-width: 0;
    }

    /* Break otherwise-unbreakable nbsp runs in running text. */
    .elementor p,
    .elementor h1, .elementor h2, .elementor h3,
    .elementor h4, .elementor h5, .elementor h6,
    .w-card__title,
    .w-card__stock {
        overflow-wrap: break-word;
    }

    /* Card title/stock are <a>/<span> flex items — let them shrink
       below their content width (min-width:auto default held 463px
       unbroken runs and stretched the page past the viewport). */
    .w-card__title,
    .w-card__stock {
        min-width: 0;
    }

    /* Belt-and-braces: never allow horizontal page scroll
       (clip does not create a scroll container, unlike hidden). */
    body {
        overflow-x: clip;
    }

    /* Hamburger icon: navy on the aqua bar (white failed AA on #51BDE6). */
    .elementor-105 .elementor-element.elementor-element-e5d9ee2 .jet-mobile-menu__toggle-icon,
    .elementor-105 .elementor-element.elementor-element-e5d9ee2 .jet-mobile-menu__toggle-icon i,
    .elementor-105 .elementor-element.elementor-element-e5d9ee2 .jet-mobile-menu__toggle-icon svg {
        color: var(--w-navy);
        fill: var(--w-navy);
    }

    /* ------------------------------------------------------------
       HEADER BAR LAYOUT (2026-09-04, per watec-mobile-header-spec.md —
       Shoptet mobile-header-v1 pattern: one 50px bar = logo left,
       icon row right; search as its own always-visible row beneath).

       Template (post 105) state after the DB edit: the aqua bar
       90b3faf carries phone / cart / hamburger / account; the old
       mobile row 76edd78 keeps only the duplicate phone icon+number
       (dropped on mobile below); the cart widget in the LOGO ROW is
       a desktop/tablet-only clone.
       ------------------------------------------------------------ */
    /* The bar: phone alone left, cart + hamburger + account clustered
       right (George: cart belongs with menu/user on the right). */
    .elementor-105 .elementor-element.elementor-element-90b3faf {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        min-height: 50px;
        padding: 8px 12px;
    }
    .elementor-105 .elementor-element.elementor-element-423fff8 {
        margin-right: auto; /* phone cell pushes the icon cluster right */
    }
    /* The cart widget lacks Elementor's __width-auto modifier (icon and
       text cells have it) — as a plain block it grabs the bar's free
       width and lands mid-bar when logged in. Pin it to content width
       so it packs with the menu/account icons on the right. */
    .elementor-105 .elementor-element.elementor-element-542fa9d {
        width: auto;
        flex: 0 0 auto;
    }
    /* Even 10px packing: strip per-widget margins inside the bar (an
       Elementor default margin was wedging ~32px between cart and
       menu, floating the cart mid-bar). */
    .elementor-105 .elementor-element.elementor-element-90b3faf .elementor-widget {
        margin: 0;
    }
    .elementor-105 .elementor-element.elementor-element-90b3faf > .e-con-inner > .elementor-element {
        margin: 0;
    }
    /* ...but the phone cell's auto margin must survive the zeroing
       above — it IS the right-pushing force (0,6,0 beats the 0,5,0
       margin:0 rule). */
    .elementor-105 .elementor-element.elementor-element-90b3faf > .e-con-inner > .elementor-element-423fff8 {
        margin-right: auto;
    }
    .elementor-105 .elementor-element.elementor-element-90b3faf > .e-con-inner {
        flex-direction: inherit;
        flex-wrap: inherit;
        justify-content: inherit;
        align-items: inherit;
        /* Boxed container: its content cap (~271px) squeezed the row so
           the icon cluster sat mid-left. Full width = cluster pushes to
           the true right edge via the phone cell's margin-right:auto. */
        max-width: 100%;
        width: 100%;
    }
    /* Cell geometry: phone text compact, account icon-only. */
    .elementor-105 .elementor-element.elementor-element-423fff8,
    .elementor-105 .elementor-element.elementor-element-dc72454 {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: auto;
    }
    .elementor-105 .elementor-element.elementor-element-dc72454 .elementor-widget-text-editor {
        display: none; /* icon-only account, like the reference */
    }
    .elementor-105 .elementor-element.elementor-element-dc72454 a,
    .elementor-105 .elementor-element.elementor-element-423fff8 a {
        text-decoration: none;
    }
    .elementor-105 .elementor-element.elementor-element-90b3faf a {
        color: var(--w-navy);
    }
    .elementor-105 .elementor-element.elementor-element-90b3faf .elementor-icon {
        font-size: 20px;
        color: var(--w-navy);
    }
    /* Menu-cart in the bar: icon-only round button (count badge comes
       from the widget's own indicator bubble when the cart has items). */
    .elementor-105 .elementor-element.elementor-element-542fa9d .elementor-menu-cart__toggle_button .elementor-button-text {
        display: none;
    }
    .elementor-105 .elementor-element.elementor-element-542fa9d .elementor-menu-cart__toggle_button {
        padding: 8px;
        background: transparent;
        color: var(--w-navy);
    }
    .elementor-105 .elementor-element.elementor-element-542fa9d .elementor-button-icon {
        color: var(--w-navy);
    }
    /* Hamburger cell: drop JetMenu's default left margin, navy icon. */
    .elementor-105 .elementor-element.elementor-element-e5d9ee2 .jet-mobile-menu__toggle {
        min-height: 40px;
        min-width: 40px;
        justify-content: center;
        margin: 0;
    }

    /* Old mobile row: its phone icon+number now duplicate the bar —
       drop them on mobile, keep the row (it carries the tablet
       hamburger clone) for tablets. */
    .elementor-105 .elementor-element.elementor-element-76edd78 {
        display: none;
    }

    /* Logo row + search: search becomes an always-visible full-width
       row UNDER the logo (reference LAYER 2), instead of clipping
       inside the logo row. */
    .elementor-105 .elementor-element.elementor-element-7b77376 {
        flex-wrap: wrap;
        min-height: 0;
    }
    .elementor-105 .elementor-element.elementor-element-7babd34 {
        display: none; /* empty icon box, mobile only clutter */
    }
    .elementor-105 .elementor-element.elementor-element-f672d8b img {
        max-width: 42%;
    }
    .elementor-105 .elementor-element.elementor-element-aa1fbda {
        width: 100%;
    }
    /* The search lives inside the logo row's RIGHT CLUSTER (7a05a92) —
       give that cluster its own full-width wrapped line, else the
       widget is 100% of a ~55px box (the "collapsed circle" bug). */
    .elementor-105 .elementor-element.elementor-element-7a05a92 {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
    }
    .elementor-105 .elementor-element.elementor-element-912c2a0 {
        order: 10;
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
    }
    /* JetSearch collapses without an explicit flex chain: form ->
       fields-holder -> field-wrapper -> input, each full-width. */
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions__form,
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions__fields-holder,
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions__field-wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 100%;
    }
    /* JetSearch ships its own mobile rule that WRAPS the submit onto a
       second full-width line:
       [data-elementor-device-mode="mobile"] ... __form/__fields-holder { flex-wrap: wrap }
       Counter at higher specificity (0,5,0 vs 0,3,0) — field+button in
       ONE row, per George. */
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions .jet-search-suggestions__form,
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions .jet-search-suggestions__fields-holder {
        flex-wrap: nowrap;
    }
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions__field-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions__field {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
        height: 42px;
        border: 1px solid var(--w-line);
        border-right: none;
        border-radius: 21px 0 0 21px;
        padding: 0 16px;
        background: var(--w-white);
        font-family: var(--w-font);
        font-size: 14px;
        color: var(--w-ink);
        box-sizing: border-box;
        appearance: none;
    }
    /* Same counter for the submit: JetSearch's mobile rule sets
       width:100% at (0,4,0) — this (0,6,0) wins regardless of order. */
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions .jet-search-suggestions__submit[type="submit"] {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        margin: 0;
        background: var(--w-navy);
        border-radius: 0 21px 21px 0;
    }
    .elementor-105 .elementor-element.elementor-element-912c2a0 .jet-search-suggestions__submit .fas {
        color: var(--w-white);
    }
}