/* Let's Toko homepage hero: full-bleed looping video background.
   Video is muted + playsinline so it autoplays on iOS/Android.
   Under prefers-reduced-motion the video is hidden and the poster frame shows.

   Scrim values are measured, not guessed: the footage reaches 0.81 relative
   luminance in the text area on its brightest frames, which leaves plain white
   text at 1.2:1 contrast. Two stacked layers (uniform tint + left-anchored
   gradient) bring the text area to ~9:1 while leaving the right side of the
   frame bright enough to still read as video. */

.elementor-element-heroNew1 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 600px;
    padding: 72px 64px;
    background-color: #131010 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    /* Forced: the Container's own justify-content setting is silently dropped
       in this install, which was centring the text block instead of anchoring
       it left. */
    justify-content: flex-start !important;
}

/* Video layer */
.elementor-element-heroVideo1 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
}

.elementor-element-heroVideo1 > .elementor-widget-container {
    width: 100%;
    height: 100%;
}

.lt-hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Layer 1: very light global tint. Just takes the edge off the highlights so
   the footage does not blow out. Deliberately minimal - the video should read
   as bright and clear across most of the frame. */
.elementor-element-heroNew1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 7, 0.12);
    z-index: 1;
    pointer-events: none;
}

/* Layer 2: contained scrim. The footage is bright everywhere (p90 ~0.80), so
   text needs ~77% local darkening to stay legible. Rather than dimming half
   the frame, the darkness is held in a soft-edged pool behind the text only
   and falls away to nothing well before the right side. */
.elementor-element-heroNew1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 48% 64% at 26% 50%,
        rgba(6, 5, 5, 0.82) 0%,
        rgba(6, 5, 5, 0.78) 46%,
        rgba(6, 5, 5, 0.46) 70%,
        rgba(6, 5, 5, 0.16) 86%,
        rgba(6, 5, 5, 0.00) 100%);
    z-index: 1;
    pointer-events: none;
}

.elementor-element-heroNew1 > .e-con-inner,
.elementor-element-heroContent1 {
    position: relative;
    z-index: 2;
}

/* Text column stays left of centre. Forced with !important because the
   Container width control does not reliably apply in this Elementor install. */
.elementor-element-heroContent1 {
    width: 50% !important;
    max-width: 600px !important;
    flex: 0 0 auto !important;
    /* Auto margins were centring this block and beating justify-content. */
    margin-left: 0 !important;
    margin-right: auto !important;
    opacity: 0;
    transform: translateY(18px);
    animation: ltHeroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* The description's colour setting is silently dropped by this Elementor
   install (no colour rule is generated for it at all), so it fell back to the
   site's dark body colour and was invisible on the video. Forced here. */
.elementor-element-heroSub1,
.elementor-element-heroSub1 .wd-text-block,
.elementor-element-heroSub1 .wd-text-block p,
.elementor-element-heroSub1 p {
    color: #F1EEE9 !important;
}

/* Belt-and-braces legibility on the brightest frames. */
.elementor-element-heroTitle1 .title,
.elementor-element-heroSub1 .wd-text-block,
.elementor-element-heroSub1 p {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.elementor-element-heroTitle1 .title {
    text-wrap: balance;
}

@keyframes ltHeroFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Tablet: text column is wider (66%), so the scrim has to hold longer. */
@media (max-width: 1024px) {
    .elementor-element-heroNew1 {
        min-height: 480px;
        padding: 52px 36px;
    }
    .elementor-element-heroContent1 {
        width: 66% !important;
        max-width: 480px !important;
    }
    /* Same contained approach, ellipse widened for the wider text column. */
    .elementor-element-heroNew1::before {
        background: rgba(10, 8, 7, 0.14);
    }
    .elementor-element-heroNew1::after {
        background: radial-gradient(ellipse 62% 68% at 30% 50%,
            rgba(6, 5, 5, 0.82) 0%,
            rgba(6, 5, 5, 0.78) 50%,
            rgba(6, 5, 5, 0.46) 74%,
            rgba(6, 5, 5, 0.14) 90%,
            rgba(6, 5, 5, 0.00) 100%);
    }
}

/* Mobile: text runs full width. An even heavy scrim here crushed the video to
   near-black (measured 0.036 luminance - effectively invisible). Instead the
   frame stays clear at the top so the video actually reads as video, and the
   text sits in a darker bottom band. Measured: video area 0.197 luminance,
   text contrast 5.5:1. */
@media (max-width: 767px) {
    .elementor-element-heroNew1 {
        min-height: 460px;
        padding: 36px 22px 40px;
        /* Anchor the text into the dark lower band. */
        align-items: flex-end !important;
    }
    .elementor-element-heroContent1 {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Contained scrim, bottom-weighted: the top half of the frame stays clear
       so the video reads as video, darkness pools only under the text. */
    .elementor-element-heroNew1::before {
        background: rgba(10, 8, 7, 0.12);
    }
    .elementor-element-heroNew1::after {
        background: linear-gradient(180deg,
            rgba(6, 5, 5, 0.00) 0%,
            rgba(6, 5, 5, 0.06) 34%,
            rgba(6, 5, 5, 0.42) 54%,
            rgba(6, 5, 5, 0.76) 70%,
            rgba(6, 5, 5, 0.82) 100%);
    }
}

/* ---------------------------------------------------------------------------
   Product card buttons: one per line.

   Side by side, "Read More" and "Contact Us" had to share a narrow card
   (~85px each at the smallest grid size). With only ~65px of usable text
   width they were being clipped to ellipsis. Stacking them removes the
   squeeze entirely and lets both labels render in full.
   Applies everywhere product cards appear: shop, categories, search,
   related products, carousels and the homepage grids.
--------------------------------------------------------------------------- */
.wd-product .lt-cta-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.wd-product .lt-cta-row > a.button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    /* No ellipsis clipping now that each button owns its own line. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Accessibility: no autoplaying motion for users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lt-hero-video {
        display: none;
    }
    .elementor-element-heroVideo1 {
        background-image: url("https://letstoko.be/wp-content/uploads/2026/09/lets-toko-hero-poster.jpg");
        background-size: cover;
        background-position: center center;
    }
    .elementor-element-heroContent1 {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ===========================================================================
   QA ROUND - audit 12-09-2026
   Each rule below fixes a defect that was measured in the live DOM, not
   guessed at. Measurements are recorded in the comments so the reasoning
   survives the next person who reads this file.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Mobile search: first letter of the placeholder was hidden.

   Measured at 390px: the input starts at x=55 with padding-left:40px, so text
   began at x=95. The magnifier button occupies x=55 to x=101. The icon
   therefore covered the first 6px of the text, clipping the leading character
   ("S" of "Search for products", "P" of "Producten zoeken").
   Clearing the icon needs at least 46px of padding; 54px also leaves a normal
   gap between icon and text.
--------------------------------------------------------------------------- */
.searchform.wd-style-4 .s,
.wd-search-form .searchform.wd-style-4 input[type="text"] {
    padding-left: 54px !important;
}

/* The clear-search "x" sits on the right, so keep room for it too. */
.searchform.wd-style-4 .s {
    padding-right: 34px !important;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   2. Product titles were clamped to a single line.

   Measured: -webkit-line-clamp:1 with overflow:hidden. Because pack sizes live
   at the end of the title ("... Kippenbouillon Poeder 1 KG"), the clamp was
   hiding exactly the part a trade buyer needs. Two lines fit every title in
   the catalogue at the narrowest grid width. A fixed min-height keeps the
   price and CTA rows aligned across a row of cards.
--------------------------------------------------------------------------- */
.wd-product .wd-entities-title {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.8em !important;
    line-height: 1.4 !important;
}

/* Category line under the title was clipping mid-word; allow two lines. */
.wd-product .wd-product-cats {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   3. Hero secondary CTA had no visible affordance.

   "Register As A Business Customer" rendered as bare text over the video, so
   it did not read as a button next to the filled "View Products". Given an
   outline treatment with a translucent backdrop it stays legible over moving
   footage without competing with the primary action.
--------------------------------------------------------------------------- */
.elementor-element-heroBtnRow1 a.btn-style-link,
.elementor-element-heroBtnRow1 a.btn-style-bordered {
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(10, 8, 7, 0.35) !important;
    backdrop-filter: blur(2px);
    color: #FFFFFF !important;
    border-radius: 999px !important;
    padding: 14px 26px !important;
}

.elementor-element-heroBtnRow1 a.btn-style-link:hover,
.elementor-element-heroBtnRow1 a.btn-style-bordered:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #131010 !important;
}

/* Hero CTAs stack rather than crowd on narrow screens. */
@media (max-width: 480px) {
    .elementor-element-heroBtnRow1 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .elementor-element-heroBtnRow1 .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ---------------------------------------------------------------------------
   4. B2B specification block on the single product page.

   The product summary previously ended after the price and CTA, leaving a
   large empty area below the gallery. This styles the spec table injected by
   the "B2B product specifications" snippet.
--------------------------------------------------------------------------- */
.lt-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 8px;
    font-size: 15px;
}

.lt-spec-table th,
.lt-spec-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.lt-spec-table th {
    width: 42%;
    font-weight: 600;
    color: #5b5b5b;
    white-space: nowrap;
}

.lt-spec-table tr:last-child th,
.lt-spec-table tr:last-child td {
    border-bottom: 0;
}

.lt-stock-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

.lt-stock-in {
    background: #E7F5EA;
    color: #1B6B33;
}

.lt-stock-out {
    background: #FBEAEA;
    color: #9B2226;
}

@media (max-width: 480px) {
    .lt-spec-table th {
        width: 48%;
        white-space: normal;
    }
}
/* ---------------------------------------------------------------------------
   5. Language switcher (TranslatePress).

   Replaces the old GTranslate widget. The desktop switcher sits in the main
   header row; a second instance was added to the mobile bar, which previously
   had no language control at all.
--------------------------------------------------------------------------- */
.lt-lang-desktop,
.lt-lang-mobile {
    display: flex;
    align-items: center;
}

.lt-lang-desktop .trp-shortcode-switcher__wrapper,
.lt-lang-mobile .trp-shortcode-switcher__wrapper {
    --font-size: 14px;
    --flag-size: 18px;
}

/* In the mobile bar the switcher sits alongside burger / search / account,
   so it needs to match their touch target and not push them off the row. */
.lt-lang-mobile {
    justify-content: center;
}

.lt-lang-mobile .trp-shortcode-switcher__wrapper {
    --font-size: 13px;
    --flag-size: 16px;
}

.lt-lang-mobile .trp-shortcode-switcher__anchor,
.lt-lang-mobile .trp-shortcode-switcher__wrapper > * {
    min-height: 40px;
}

/* The dropdown must escape the header's stacking context or it renders
   clipped behind the page content. */
.whb-row .trp-shortcode-switcher__wrapper {
    position: relative;
    z-index: 500;
}
/* The primary CTA keeps its filled treatment; only the secondary is outlined.
   An earlier :nth-child(2) selector caught this button by mistake. */
.elementor-element-heroBtnRow1 a.btn-style-default {
    border: 0 !important;
    backdrop-filter: none !important;
}

/* Mobile switcher: flag + short code only.
   Measured at 390px: with the full "English" label the control is 119px
   wide. It now sits in the logo row rather than the search row, so the
   search input keeps its full width; the label is still trimmed on small
   screens so it never crowds the logo.
   The real label class is .trp-language-item-name (an earlier guess at the
   class name is why the first attempt clipped instead of shortening). */
@media (max-width: 1024px) {
    .lt-lang-mobile .trp-current-language-item__wrapper .trp-language-item-name {
        display: none;
    }
    .lt-lang-mobile .trp-shortcode-switcher__wrapper,
    .lt-lang-mobile .trp-language-switcher {
        max-width: none;
    }
    .lt-lang-mobile .trp-flag-image {
        width: 22px;
        height: auto;
    }
    /* Names stay visible inside the open dropdown. */
    .lt-lang-mobile .trp-language-switcher-container .trp-language-item-name,
    .lt-lang-mobile ul .trp-language-item-name {
        display: inline !important;
    }
}

/* ===========================================================================
   ROUND 2 - single CTA band, refined language switcher, lower-page colour
   =========================================================================== */

/* ---------------------------------------------------------------------------
   6. Single business-registration CTA.

   Replaces two side-by-side promo boxes that carried consumer stock
   photography (one of them still using "Banner-CTA-Image-Discount.webp", a
   leftover from the discount promo that was removed) and a blue panel that
   fought the brand red. One band, brand colours, no photography.
--------------------------------------------------------------------------- */
.lt-cta {
    --cta-ink: #FFF6F3;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 14px;
    margin: 8px 0 12px;
    /* Flat base colour on the element (this applies reliably); the gradient
       depth is painted by ::before, because a background-image set on this
       element was being discarded in this theme. */
    background-color: #2A1512 !important;
}

/* A faint wordmark-scale motif instead of a stock photo: concentric arcs
   suggesting a stacked catalogue, drawn in CSS so there is no image to load. */
.lt-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 54px);
    mask-image: linear-gradient(100deg, transparent 0%, transparent 46%, #000 100%);
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 46%, #000 100%);
}

.lt-cta__inner {
    position: relative;
    z-index: 1;
    padding: 58px 56px 56px;
    max-width: 760px;
}

.lt-cta__eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F0A79C;
}

.lt-cta__title {
    margin: 0 0 14px;
    color: var(--cta-ink);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.lt-cta__lead {
    margin: 0 0 22px;
    color: rgba(255, 246, 243, 0.86);
    font-size: 17px;
    line-height: 1.6;
    max-width: 58ch;
}

.lt-cta__points {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.lt-cta__points li {
    position: relative;
    padding-left: 24px;
    color: rgba(255, 246, 243, 0.78);
    font-size: 14.5px;
    line-height: 1.5;
}

/* Checkmark drawn with borders so no icon font is needed. */
.lt-cta__points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 6px;
    height: 11px;
    border: solid #F2C94C;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lt-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.lt-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}

.lt-cta__btn:active {
    transform: translateY(1px);
}

.lt-cta__btn--primary {
    background: #F2C94C;
    color: #2A1512 !important;
    border: 2px solid #F2C94C;
}

.lt-cta__btn--primary:hover {
    background: #FFD968;
    border-color: #FFD968;
    color: #2A1512 !important;
}

.lt-cta__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cta-ink) !important;
    border: 2px solid rgba(255, 246, 243, 0.55);
}

.lt-cta__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #2A1512 !important;
    border-color: rgba(255, 255, 255, 0.95);
}

.lt-cta__btn:focus-visible {
    outline: 3px solid #F2C94C;
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .lt-cta__inner { padding: 46px 40px 44px; }
}

@media (max-width: 767px) {
    .lt-cta { border-radius: 10px; }
    .lt-cta__inner { padding: 36px 24px 34px; }
    .lt-cta__points { flex-direction: column; gap: 9px; }
    .lt-cta__actions { flex-direction: column; align-items: stretch; }
    .lt-cta__btn { width: 100%; }
    /* The mask reveals the motif from the right, which is invisible on a
       narrow screen; fade it evenly instead. */
    .lt-cta::after {
        mask-image: linear-gradient(160deg, transparent 0%, #000 100%);
        -webkit-mask-image: linear-gradient(160deg, transparent 0%, #000 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lt-cta__btn { transition: none; }
}

/* ---------------------------------------------------------------------------
   7. Language switcher, refined.

   The default TranslatePress control is a boxed dropdown that reads as a form
   field sitting in the header. Restyled as a quiet pill that matches the
   header's other controls, with a proper hover and focus state.
--------------------------------------------------------------------------- */
.lt-lang-desktop .trp-shortcode-switcher__wrapper,
.lt-lang-mobile .trp-shortcode-switcher__wrapper {
    --bg: transparent;
    --bg-hover: rgba(216, 58, 46, 0.08);
    --border: 1px solid rgba(26, 21, 18, 0.14);
    --border-color: rgba(26, 21, 18, 0.14);
    --border-radius: 999px;
    --text: #2A1512;
    --text-hover: #D83A2E;
    --flag-radius: 50%;
    --font-size: 14px;
    --flag-size: 17px;
}

.lt-lang-desktop .trp-current-language-item__wrapper,
.lt-lang-mobile .trp-current-language-item__wrapper {
    border-radius: 999px;
}

.lt-lang-desktop .trp-language-item,
.lt-lang-mobile .trp-language-item {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Round flags read as part of the interface rather than as pasted images. */
.lt-lang-desktop .trp-flag-image,
.lt-lang-mobile .trp-flag-image {
    border-radius: 50%;
    object-fit: cover;
    width: 17px;
    height: 17px;
    box-shadow: 0 0 0 1px rgba(26, 21, 18, 0.12);
}

.lt-lang-desktop .trp-shortcode-arrow,
.lt-lang-mobile .trp-shortcode-arrow {
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.lt-lang-desktop .trp-shortcode-switcher__wrapper:hover .trp-shortcode-arrow {
    opacity: 1;
    transform: translateY(1px);
}

/* Keep the open list above the sticky header and give it real elevation. */
.whb-row .trp-shortcode-switcher__wrapper,
.lt-lang-desktop .trp-shortcode-switcher__wrapper,
.lt-lang-mobile .trp-shortcode-switcher__wrapper {
    position: relative;
    z-index: 600;
}

.trp-shortcode-switcher .trp-language-switcher-container,
.lt-lang-desktop ul,
.lt-lang-mobile ul {
    box-shadow: 0 10px 30px -10px rgba(26, 21, 18, 0.35);
    border-radius: 12px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   8. Lower page: spacing and colour.

   The "Recently Viewed" heading was crowded against the promise text, a band
   of dead white space sat between the carousel and the footer, and the footer
   was a single flat sheet of saturated brand red. The red now reads as an
   accent against a deep warm ground, which also lets the white logo and the
   yellow highlights carry.
--------------------------------------------------------------------------- */
.elementor-element-0b8aa7e {
    margin-top: 14px !important;
    padding: 40px 0 46px !important;
    background: transparent !important;
    border-top: 0 !important;
}

.elementor-element-0b8aa7e .wd-el-title,
.elementor-element-0b8aa7e .title {
    margin-bottom: 20px !important;
}

/* Footer: deep warm ground instead of a flat red sheet. */
.main-footer,
footer.footer-container {
    background-color: #241310 !important;
    background-image:
        radial-gradient(80% 120% at 8% 0%, rgba(216, 58, 46, 0.30) 0%, rgba(216, 58, 46, 0) 60%) !important;
}

.main-footer,
.main-footer p,
.main-footer li,
.main-footer a,
footer.footer-container a {
    color: rgba(255, 246, 243, 0.82) !important;
}

.main-footer h1, .main-footer h2, .main-footer h3,
.main-footer h4, .main-footer h5, .main-footer .wd-title-text,
.main-footer .widget-title {
    color: #FFFFFF !important;
}

.main-footer a:hover,
footer.footer-container a:hover {
    color: #F2C94C !important;
}

/* Social icons sat as pale circles on flat red; give them a subtle surface. */
.main-footer .wd-social-icon,
.main-footer .social-icons a {
    border-color: rgba(255, 246, 243, 0.28) !important;
    color: rgba(255, 246, 243, 0.9) !important;
}

.main-footer .wd-social-icon:hover,
.main-footer .social-icons a:hover {
    background-color: #F2C94C !important;
    border-color: #F2C94C !important;
    color: #241310 !important;
}

/* Copyright strip: one shade deeper so it separates from the footer body. */
.copyrights-wrapper {
    background-color: #1A0D0B !important;
    border-top: 1px solid rgba(255, 246, 243, 0.10) !important;
}

.copyrights-wrapper,
.copyrights-wrapper a,
.copyrights-wrapper p {
    color: rgba(255, 246, 243, 0.62) !important;
}

.copyrights-wrapper a:hover {
    color: #F2C94C !important;
}

/* The CTA sits in what used to be a two-column row, so as a flex item it was
   shrinking to its content width (measured 760px inside a 1380px row).
   Stretch the band across the row; the text column keeps its own max-width
   so line length stays readable. */
/* ltCtaBand1 stretch */
.elementor-element-ltCtaBand1 {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
}
.elementor-element-ltCtaBand1 > .elementor-widget-container {
    width: 100%;
}

/* lt-cta gradient layer */
.lt-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 120% 140% at 88% 18%, rgba(216, 58, 46, 0.55) 0%, rgba(216, 58, 46, 0) 58%),
        linear-gradient(135deg, #2A1512 0%, #451A14 42%, #6E2117 100%);
    background-repeat: no-repeat;
    border-radius: inherit;
}

/* recently-viewed tighten
   Measured: the carousel content ended 80px above the bottom of its widget,
   and the section then added 46px of padding under that - a ~126px band of
   empty colour above the footer. Trim the trailing space, and separate the
   block from the page with a rule rather than a near-identical tint. */
.elementor-element-0b8aa7e {
    background: transparent !important;
    border-top: 0 !important;
    margin-top: 40px !important;
    padding: 24px 0 10px !important;
}
.elementor-element-0b8aa7e .elementor-widget-wd_products {
    padding-bottom: 0 !important;
}
.elementor-element-0b8aa7e .wd-carousel-container {
    margin-bottom: 0 !important;
}
/* The drag scrollbar sat in its own empty strip under the row. */
.elementor-element-0b8aa7e .wd-nav-scroll,
.elementor-element-0b8aa7e .wd-scroll-content + * {
    margin-top: 6px !important;
}
/* Section heading: it was sitting tight under the paragraph above it. */
.elementor-element-0b8aa7e .wd-carousel-container > .title-wrapper,
.elementor-element-0b8aa7e .wd-el-title {
    margin-bottom: 18px !important;
}
/* Thumbnails render at 65x74 here, which looked accidental next to the
   full-size cards further up the page. Give the row a calmer, even height. */
.elementor-element-0b8aa7e .wd-product-thumb {
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.elementor-element-0b8aa7e .wd-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* recently-viewed trailing strip
   The carousel widget measured 278px tall while its content stopped at 198px:
   an 80px strip reserved for drag-scroll and pagination furniture that this
   single-row carousel does not use. Collapse it. */
.elementor-element-0b8aa7e .wd-nav-scroll,
.elementor-element-0b8aa7e .wd-carousel-pagination,
.elementor-element-0b8aa7e .wd-scroll-bar,
.elementor-element-0b8aa7e .wd-carousel-wrap + div:empty {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}
.elementor-element-0b8aa7e .wd-carousel {
    padding-bottom: 0 !important;
}
.elementor-element-0b8aa7e .elementor-widget-container,
.elementor-element-0b8aa7e .wd-products-element {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   9. Segmented language toggle.

   Both published languages sit side by side in one outer pill; the active
   one is a filled dark segment. Replaces the TranslatePress dropdown, which
   hid the alternative language behind a click and read as a form field.
--------------------------------------------------------------------------- */
/* segmented language toggle */
.lt-langtoggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(26, 21, 18, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

.lt-langtoggle__opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    color: rgba(26, 21, 18, 0.62) !important;
    transition: background-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.lt-langtoggle__opt:hover {
    color: #1A1512 !important;
    background-color: rgba(26, 21, 18, 0.06);
}

.lt-langtoggle__opt.is-active {
    background-color: #1E2B27;
    color: #FFFFFF !important;
}

.lt-langtoggle__opt.is-active:hover {
    background-color: #1E2B27;
    color: #FFFFFF !important;
}

.lt-langtoggle__opt:focus-visible {
    outline: 2px solid #D83A2E;
    outline-offset: 2px;
}

/* Round flags, cropped from the 4:3 source so they do not look squashed. */
.lt-langtoggle__flag {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px rgba(26, 21, 18, 0.14);
}

.lt-langtoggle__opt.is-active .lt-langtoggle__flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Mobile sits in the logo row, where width is tight. */
@media (max-width: 1024px) {
    .lt-lang-mobile .lt-langtoggle { padding: 2px; }
    .lt-lang-mobile .lt-langtoggle__opt {
        padding: 6px 11px 6px 7px;
        gap: 6px;
        font-size: 12.5px;
    }
    .lt-lang-mobile .lt-langtoggle__flag {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lt-langtoggle__opt { transition: none; }
}

/* ---------------------------------------------------------------------------
   10. Equal-height info boxes, site-wide.

   The grid cells already share a row height. What was ragged is the card
   inside each cell: it sized to its own text, so a box with two lines of copy
   sat visibly shallower than one with four, and the bottom edges never lined
   up. The earlier attempt here targeted `.wd-infobox`; the theme's class is
   `.wd-info-box`, so none of it ever applied.

   Every link in the chain from the grid cell to the card now stretches, and
   the body copy takes the slack, so the card edges align in any row - on the
   home page, the about page, and anywhere else these boxes are used.
--------------------------------------------------------------------------- */
.elementor-widget-wd_infobox {
    display: flex;
}

.elementor-widget-wd_infobox > .elementor-widget-container {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

.elementor-widget-wd_infobox .info-box-wrapper {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

.elementor-widget-wd_infobox .wd-info-box {
    flex: 1 1 auto;
    width: 100%;
}

/* Icon-above-text is the layout used across this site; stack it and let the
   content block absorb the height difference. Boxes with a side icon keep
   their own row layout. */
.elementor-widget-wd_infobox .wd-info-box.box-icon-align-top {
    display: flex;
    flex-direction: column;
}

.elementor-widget-wd_infobox .wd-info-box.box-icon-align-top .info-box-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.elementor-widget-wd_infobox .wd-info-box.box-icon-align-top .info-box-inner {
    flex: 1 1 auto;
}

/* Grid and flex containers hand their children the full row height. */
.e-con.e-grid > .elementor-widget-wd_infobox,
.e-con.e-flex > .elementor-widget-wd_infobox,
.elementor-widget-wrap > .elementor-widget-wd_infobox {
    height: 100%;
    align-self: stretch;
}

/* Woodmart's sticky navigation draws a fixed icon rail down the left edge. */
.wd-sticky-nav { display: none !important; }

/* ===========================================================================
   14. HEADER v3

   Row 1  36px dark : phone, language. Nothing else.
   Row 2  78px white: logo, Categories, search, navigation, account, register.

   The navigation moved down into the main bar where buyers actually look, the
   search is narrower to make room, and the wishlist and positioning line are
   gone. The register button hides itself once someone is signed in.
   =========================================================================== */

/* --- Row 1 -------------------------------------------------------------- */
.whb-top-bar {
    background-color: #241310 !important;
    border-bottom: 0 !important;
}

.whb-top-bar .whb-column,
.whb-top-bar a,
.whb-top-bar .wd-tools-text {
    color: rgba(255, 246, 243, 0.80) !important;
}

.whb-top-bar a:hover { color: #F2C94C !important; }

.whb-top-bar .wd-nav > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
}

/* --- Language toggle ----------------------------------------------------
   It was sitting too tall for a 36px strip and touching the row edges. Sized
   to 26px so there is clear space above and below, with the label kept at a
   readable 12.5px rather than shrinking it.
------------------------------------------------------------------------- */
.lt-langtoggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    line-height: 1;
    border: 1px solid rgba(255, 246, 243, 0.22);
    background: rgba(255, 255, 255, 0.07);
}

.lt-langtoggle__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 5px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    color: rgba(255, 246, 243, 0.78) !important;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.lt-langtoggle__opt:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF !important;
}

.lt-langtoggle__opt.is-active {
    background-color: #F2C94C;
    color: #241310 !important;
}

.lt-langtoggle__opt:focus-visible { outline: 2px solid #F2C94C; outline-offset: 2px; }

.lt-langtoggle__flag {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px rgba(255, 246, 243, 0.25);
}

.lt-langtoggle__opt.is-active .lt-langtoggle__flag {
    box-shadow: 0 0 0 1px rgba(36, 19, 16, 0.28);
}

/* --- Row 2 -------------------------------------------------------------- */
.whb-general-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid rgba(26, 21, 18, 0.08) !important;
}

.whb-general-header .whb-column-center,
.whb-general-header .whb-col-center {
    flex: 1 1 auto !important;
    max-width: none;
    gap: 14px;
    padding-inline: 24px;
    justify-content: flex-start;
}

/* Search is narrower now that the navigation shares this row. */
.whb-general-header .wd-search-form,
.whb-general-header .searchform {
    width: 260px !important;
    max-width: 260px !important;
}

.whb-general-header .searchform {
    border-radius: 999px !important;
    overflow: hidden;
    border: 1.5px solid rgba(26, 21, 18, 0.15) !important;
    background: #FBFAF9 !important;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.whb-general-header .searchform:focus-within {
    border-color: #D83A2E !important;
    background: #FFFFFF !important;
}

.whb-general-header .searchform .s {
    background: transparent !important;
    border: 0 !important;
    height: 42px !important;
    font-size: 14px !important;
}

/* Navigation, now in the main bar. */
.whb-general-header .wd-nav > li > a {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    padding: 8px 13px !important;
    border-radius: 999px;
    color: #2A1512 !important;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.whb-general-header .wd-nav > li > a:hover {
    background-color: rgba(216, 58, 46, 0.08);
    color: #D83A2E !important;
}

.whb-general-header .wd-nav > li.current-menu-item > a { color: #D83A2E !important; }

/* --- Account + register ------------------------------------------------- */
.lt-account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(26, 21, 18, 0.16);
    background: #FFFFFF;
    color: #2A1512 !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.lt-account i { font-size: 18px; line-height: 1; }
.lt-account:hover { border-color: #D83A2E; background: rgba(216, 58, 46, 0.05); color: #D83A2E !important; }
.lt-account:focus-visible { outline: 3px solid #F2C94C; outline-offset: 2px; }

.lt-headcta {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: #D83A2E;
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color 0.18s ease, transform 0.14s ease;
}

.lt-headcta:hover { background: #B72D23; color: #FFFFFF !important; }
.lt-headcta:active { transform: translateY(1px); }
.lt-headcta:focus-visible { outline: 3px solid #F2C94C; outline-offset: 2px; }

/* ===========================================================================
   15. CATEGORIES MEGA MENU - two panel

   A flat grid of 20 categories ran over 800px tall. This puts the category
   list on the left and the sub-categories of the active one on the right, so
   the panel is a fixed, predictable height whatever the catalogue does.
   =========================================================================== */
.lt-mm { position: relative; }

.lt-mm__trigger,
button.lt-mm__trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: #D83A2E !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-family: inherit;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s ease;
}

.lt-mm__trigger:hover { background-color: #B72D23 !important; }
.lt-mm__trigger:focus-visible { outline: 3px solid #F2C94C; outline-offset: 2px; }

.lt-mm__bars { display: inline-flex; flex-direction: column; gap: 3px; width: 15px; }
.lt-mm__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.lt-mm__bars i:nth-child(2) { width: 70%; }
.lt-mm__bars i:nth-child(3) { width: 86%; }

.lt-mm__chev { transition: transform 0.2s ease; }
.lt-mm.is-open .lt-mm__chev { transform: rotate(180deg); }

/* Panel */
.lt-mm__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 640;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    width: min(94vw, 820px);
    height: 430px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(26, 21, 18, 0.10);
    box-shadow: 0 26px 64px -20px rgba(36, 19, 16, 0.38);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.17s ease, transform 0.17s ease;
}

.lt-mm.is-open .lt-mm__panel { opacity: 1; transform: translateY(0); }

/* Left: the category list */
.lt-mm__nav {
    background: #FBFAF9;
    border-right: 1px solid rgba(26, 21, 18, 0.08);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
}

.lt-mm__item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #2A1512;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.lt-mm__item i {
    font-size: 21px;
    line-height: 1;
    flex: 0 0 auto;
    color: #D83A2E;
}

.lt-mm__name { flex: 1 1 auto; min-width: 0; }

.lt-mm__n {
    font-size: 12px;
    font-weight: 600;
    color: rgba(26, 21, 18, 0.40);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.lt-mm__item:hover,
.lt-mm__item.is-active {
    background: #FFFFFF;
    color: #D83A2E;
    box-shadow: 0 1px 2px rgba(36, 19, 16, 0.06);
}

.lt-mm__item.is-active .lt-mm__n { color: rgba(216, 58, 46, 0.65); }
.lt-mm__item:focus-visible { outline: 2px solid #D83A2E; outline-offset: -2px; }

/* Right: sub-categories of the active category */
.lt-mm__panes { position: relative; overflow: hidden; }

.lt-mm__pane {
    display: none;
    height: 100%;
    padding: 22px 24px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lt-mm__pane.is-active { display: block; }

.lt-mm__paneHead {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #2A1512 !important;
    text-decoration: none !important;
    margin-bottom: 16px;
}

.lt-mm__paneHead i { font-size: 24px; color: #D83A2E; }
.lt-mm__paneHead:hover { color: #D83A2E !important; }

.lt-mm__subs {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    columns: 2;
    column-gap: 26px;
}

.lt-mm__subs li { break-inside: avoid; margin: 0 0 2px; }

.lt-mm__subs a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(26, 21, 18, 0.74) !important;
    text-decoration: none !important;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.lt-mm__subs a:hover {
    background: rgba(216, 58, 46, 0.07);
    color: #D83A2E !important;
}

.lt-mm__empty {
    font-size: 14px;
    color: rgba(26, 21, 18, 0.58);
    margin: 0 0 18px;
}

.lt-mm__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #D83A2E !important;
    text-decoration: none !important;
}

.lt-mm__go::after {
    content: "";
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 1.6px 1.6px 0 0;
    transform: rotate(45deg);
}

.lt-mm__go:hover { color: #B72D23 !important; }

/* Footer link spans both columns */
.lt-mm__all {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-top: 1px solid rgba(26, 21, 18, 0.08);
    background: #FBFAF9;
    font-size: 14px;
    font-weight: 600;
    color: #2A1512 !important;
    text-decoration: none !important;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.lt-mm__all:hover { background: #F4F2EF; color: #D83A2E !important; }

/* A restrained scrollbar inside the two scroll regions. */
.lt-mm__nav::-webkit-scrollbar,
.lt-mm__pane::-webkit-scrollbar { width: 9px; }
.lt-mm__nav::-webkit-scrollbar-thumb,
.lt-mm__pane::-webkit-scrollbar-thumb {
    background: rgba(26, 21, 18, 0.16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
    .lt-mm__panel, .lt-mm__chev, .lt-mm__item, .lt-mm__subs a,
    .lt-headcta, .lt-account, .lt-langtoggle__opt { transition: none; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1400px) {
    .whb-general-header .wd-nav > li > a { padding: 8px 10px !important; font-size: 14px !important; }
    .whb-general-header .wd-search-form,
    .whb-general-header .searchform { width: 220px !important; max-width: 220px !important; }
}

@media (max-width: 1240px) {
    .lt-account__label { display: none; }
    .lt-account { padding: 8px 11px; }
    .whb-general-header .whb-column-center,
    .whb-general-header .whb-col-center { padding-inline: 14px; gap: 10px; }
    .whb-general-header .wd-search-form,
    .whb-general-header .searchform { width: 190px !important; max-width: 190px !important; }
}

@media (max-width: 1024px) {
    .whb-top-bar { background-color: #FFFFFF !important; }
    .lt-langtoggle {
        background: rgba(255, 255, 255, 0.6);
        border-color: rgba(26, 21, 18, 0.16);
    }
    .lt-langtoggle__opt { color: rgba(26, 21, 18, 0.64) !important; }
    .lt-langtoggle__opt:hover { background-color: rgba(26, 21, 18, 0.06); color: #1A1512 !important; }
    .lt-langtoggle__opt.is-active { background-color: #1E2B27; color: #FFFFFF !important; }
    .lt-langtoggle__flag { box-shadow: 0 0 0 1px rgba(26, 21, 18, 0.14); }
    .lt-reg-wrap { display: none; }
    /* The mega panel is a pointer affordance; the burger menu covers touch. */
    .lt-mm { display: none; }
}

/* Search gives up the width the navigation needs. */
.whb-general-header .wd-search-form,
.whb-general-header .searchform {
    width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
}

/* The centre column must not let its children wrap either. */
.whb-general-header .whb-column-center,
.whb-general-header .whb-col-center {
    flex-wrap: nowrap !important;
}

/* mega menu css-first open
   Opening is handled in CSS so the menu works even if the script does not
   run. JavaScript stays as enhancement: it switches the active category and
   adds click/Escape handling. Without it the panel still opens on hover and
   on keyboard focus, showing the first category. */
.lt-mm__panel[hidden] {
    display: grid !important;
}

.lt-mm__panel {
    visibility: hidden;
    pointer-events: none;
}

.lt-mm:hover > .lt-mm__panel,
.lt-mm:focus-within > .lt-mm__panel,
.lt-mm.is-open > .lt-mm__panel {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* A hover bridge so the pointer can travel from the button to the panel
   without crossing a dead gap and closing it. */
.lt-mm::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
    pointer-events: none;
}

.lt-mm:hover::after { pointer-events: auto; }

.lt-mm:hover .lt-mm__chev { transform: rotate(180deg); }

/* mega menu list legibility
   The theme centres and capitalises button text, which turned the category
   list into ragged three-line rows reading "Groenten & Fruit (Vers,
   Conserven)". Left-align, keep the real casing, and give the column enough
   width that most names sit on one line. */
.lt-mm__panel {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    width: min(94vw, 880px) !important;
}

.lt-mm__item,
button.lt-mm__item {
    text-align: left !important;
    text-transform: none !important;
    justify-content: flex-start !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 9px 11px !important;
    min-height: 0 !important;
    height: auto !important;
}

.lt-mm__name {
    text-align: left !important;
    text-transform: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sub-category rows and headings keep their real casing too. */
.lt-mm__subs a,
.lt-mm__paneHead,
.lt-mm__go,
.lt-mm__all {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.lt-mm__item i { font-size: 19px !important; }

/* Below this the account label steps aside before anything overflows. */
@media (max-width: 1240px) {
    .lt-account__label { display: none; }
    .lt-account { padding: 8px 10px; }
}

/* ===========================================================================
   16. HEADER single row

   The top strip held only a phone number and the language toggle once the
   positioning line came out, so it was 40px of empty space. Both moved into
   the main bar and the strip is retired.
   =========================================================================== */

/* Phone, now in the main bar. */
.whb-general-header .wd-nav[class*=header-top-bar-right] > li > a,
.whb-general-header .whb-col-right .wd-nav > li > a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2A1512 !important;
    padding: 8px 10px !important;
}

/* Language toggle: text only, sized for a light bar. */
.lt-langtoggle {
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(26, 21, 18, 0.16) !important;
    background: #FBFAF9 !important;
}

.lt-langtoggle__opt {
    gap: 0 !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.04em;
    color: rgba(26, 21, 18, 0.60) !important;
}

.lt-langtoggle__opt:hover {
    background-color: rgba(26, 21, 18, 0.06) !important;
    color: #1A1512 !important;
}

.lt-langtoggle__opt.is-active {
    background-color: #241310 !important;
    color: #FFFFFF !important;
}

/* Flags are off; hide any that a cached render still emits. */
.lt-langtoggle__flag { display: none !important; }

/* --- Navigation: more air between items, with icons ------------------- */
.whb-general-header .whb-col-center .wd-nav,
.whb-general-header .whb-column-center .wd-nav {
    gap: 6px;
}

.whb-general-header .whb-col-center .wd-nav > li > a,
.whb-general-header .whb-column-center .wd-nav > li > a {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
}

/* Icon colours follow the category menu: brand red, dimmed until hover. */
.lt-navicon {
    font-size: 18px;
    line-height: 1;
    color: #D83A2E;
    opacity: 0.85;
    transition: opacity 0.16s ease;
}

.wd-nav > li > a:hover .lt-navicon,
.wd-nav > li.current-menu-item > a .lt-navicon {
    opacity: 1;
}

/* The right-hand group keeps its own rhythm. */
.whb-general-header .whb-column-right,
.whb-general-header .whb-col-right {
    gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .lt-navicon { transition: none; }
}

/* A hairline marks where navigation ends and the account controls begin. */
.whb-general-header .whb-column-right::before,
.whb-general-header .whb-col-right::before {
    content: "";
    width: 1px;
    height: 22px;
    margin-right: 6px;
    background: rgba(26, 21, 18, 0.14);
    flex: 0 0 auto;
}

/* Woodmart hides its own label span when a menu image was set; the image is
   gone now, so make sure the text always shows. */
.whb-general-header .wd-nav .nav-link-text { display: inline !important; }
.whb-general-header .wd-nav .wd-nav-img { display: none !important; }

/* The account label steps aside before anything can collide. */
@media (max-width: 1240px) {
    .lt-account__label { display: none; }
    .lt-account { padding: 8px 10px; }
}

/* Below this the navigation labels would start to crowd, so the search
   field yields first rather than letting items overlap. */
@media (max-width: 1300px) {
    .whb-general-header .wd-search-form,
    .whb-general-header .searchform {
        width: 46px !important;
        max-width: 46px !important;
        flex: 0 0 46px !important;
    }
    .whb-general-header .searchform .s {
        padding-left: 40px !important;
        padding-right: 4px !important;
    }
}

/* Applied at every desktop width, not only below 1560: above that the
   Register button returns and Dutch labels met the toggle again at 1600. */
.whb-general-header .whb-col-center .wd-nav > li > a,
.whb-general-header .whb-column-center .wd-nav > li > a {
    padding: 9px 7px !important;
    gap: 5px;
}
.lt-navicon { font-size: 16px; }
.whb-general-header .wd-search-form,
.whb-general-header .searchform {
    width: 118px !important;
    max-width: 118px !important;
    flex: 0 0 118px !important;
}

/* Raised from 1340: Dutch at 1366 still met the toggle exactly. */
@media (max-width: 1410px) {
    .lt-reg-wrap { display: none !important; }
}

/* Grows into whatever the row has spare (English has ~97px) and shrinks
   back toward the minimum where Dutch labels need the space. */
.whb-general-header .wd-search-form,
.whb-general-header .searchform {
    flex: 0 0 132px !important;
    width: 132px !important;
    max-width: 132px !important;
}

.whb-general-header .whb-col-center,
.whb-general-header .whb-column-center {
    flex: 1 1 auto !important;
    min-width: 0;
}

/* The field is narrow, so the magnifier sits tight to the left edge. */
.whb-general-header .searchform .s {
    padding-left: 34px !important;
    padding-right: 8px !important;
}


/* ===========================================================================
   17. HEADER v4

   Three problems fixed together, because they are the same problem: the row
   was allocating its width badly.

     - the search field was squeezed to 98px and clipped its own placeholder
     - there was ~100px of dead space between the navigation and the controls
     - navigation hover pills were tight to the text, left and right

   The search now takes the slack instead of the gap holding it, the logo is
   smaller, and the hover pills get real horizontal padding.
   =========================================================================== */

/* Search absorbs whatever the row has spare, within bounds. */
.whb-general-header .wd-search-form,
.whb-general-header .searchform {
    flex: 1 1 200px !important;
    width: auto !important;
    min-width: 172px !important;
    max-width: 340px !important;
}

.whb-general-header .searchform .s {
    padding-left: 44px !important;
    padding-right: 14px !important;
    font-size: 14px !important;
    height: 44px !important;
}

.whb-general-header .searchform .searchsubmit {
    width: 44px !important;
    min-width: 44px !important;
}

.whb-general-header .searchform .wd-clear-search {
    display: none !important;
}

/* The centre column must be allowed to grow for the search to have anything
   to grow into. */
.whb-general-header .whb-col-center,
.whb-general-header .whb-column-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 12px !important;
}

/* --- Navigation: real breathing room in the hover pill ------------------ */
.whb-general-header .whb-col-center .wd-nav,
.whb-general-header .whb-column-center .wd-nav {
    gap: 2px !important;
    margin-right: 10px !important;
}

.whb-general-header .whb-col-center .wd-nav > li > a,
.whb-general-header .whb-column-center .wd-nav > li > a {
    padding: 10px 14px !important;
    gap: 7px !important;
    font-size: 13.5px !important;
    border-radius: 10px;
}

.lt-navicon { font-size: 16px !important; }

/* --- Right-hand controls ------------------------------------------------ */
.whb-general-header .whb-column-right,
.whb-general-header .whb-col-right {
    gap: 10px;
    flex: 0 0 auto;
}

.whb-general-header .whb-column-right::before,
.whb-general-header .whb-col-right::before {
    margin-right: 4px;
}

.lt-account {
    padding: 9px 15px 9px 12px;
    font-size: 13px;
}

.lt-headcta {
    padding: 10px 18px;
    font-size: 13px;
}

/* The account label is the first thing to go when width runs short. */


@media (max-width: 1180px) {
    .lt-reg-wrap { display: none !important; }
}

/* ===========================================================================
   18. MOBILE HEADER

   The language pill was being clipped at the right edge, the search sat in a
   cramped row, and the logo block had no rhythm. Rebuilt as two clean rows:
   the brand with the language control, then a full-width search flanked by
   the menu and account buttons.
   =========================================================================== */
@media (max-width: 1250px) {

    /* Row 1: logo and language, with room around both. */
    .whb-top-bar .whb-flex-row {
        min-height: 66px !important;
        padding-inline: 14px;
    }

    .lt-lang-mobile {
        flex: 0 0 auto;
        overflow: visible !important;
        max-width: none !important;
    }

    .lt-lang-mobile .lt-langtoggle {
        gap: 2px;
        padding: 3px;
        overflow: visible !important;
        max-width: none !important;
        border: 1px solid rgba(26, 21, 18, 0.16) !important;
        background: #FBFAF9 !important;
    }

    .lt-lang-mobile .lt-langtoggle__opt {
        padding: 7px 13px !important;
        font-size: 13px !important;
        letter-spacing: 0.04em;
        white-space: nowrap;
        color: rgba(26, 21, 18, 0.62) !important;
    }

    .lt-lang-mobile .lt-langtoggle__opt.is-active {
        background-color: #241310 !important;
        color: #FFFFFF !important;
    }

    /* Row 2: search takes the width it needs, controls sit either side. */
    .whb-header-bottom .whb-flex-row {
        min-height: 62px !important;
        gap: 10px;
        padding-inline: 14px;
    }

    .whb-header-bottom .wd-search-form,
    .whb-header-bottom .searchform,
    .whb-header-bottom .wd-header-search-form {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .whb-header-bottom .searchform {
        border-radius: 999px !important;
        border: 1.5px solid rgba(26, 21, 18, 0.14) !important;
        background: #FFFFFF !important;
    }

    .whb-header-bottom .searchform .s {
        height: 44px !important;
        font-size: 15px !important;
        padding-left: 46px !important;
        padding-right: 14px !important;
    }

    /* Touch targets for the burger and account. */
    .whb-header-bottom .wd-tools-element > a,
    .whb-header-bottom .wd-burger-icon > a {
        min-width: 42px;
        min-height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* The bottom toolbar was carrying a lone "Menu" button duplicating the
       burger directly above it. */
    .wd-toolbar .wd-toolbar-item:only-child {
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    .lt-lang-mobile .lt-langtoggle__opt {
        padding: 7px 11px !important;
        font-size: 12.5px !important;
    }
    .whb-header-bottom .searchform .s { font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .whb-general-header .wd-nav .wd-sub-menu li > a { transition: none; }
}

/* v4 single line guard
   The nowrap rule was removed with the old fit-tuning blocks, so the wider
   hover pills let "About Us" and "Contact Us" fall to a second line.
   Restored, with the widths rebalanced so both languages fit on one row
   while the search keeps a usable size. */
.whb-general-header .whb-col-center,
.whb-general-header .whb-column-center,
.whb-general-header .whb-col-center .wd-nav,
.whb-general-header .whb-column-center .wd-nav {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.whb-general-header .whb-col-center .wd-nav > li,
.whb-general-header .whb-column-center .wd-nav > li {
    flex: 0 0 auto;
}

.whb-general-header .whb-col-center .wd-nav > li > a,
.whb-general-header .whb-column-center .wd-nav > li > a {
    padding: 10px 11px !important;
    white-space: nowrap;
}

.lt-mm__trigger,
button.lt-mm__trigger {
    padding: 11px 13px !important;
    font-size: 13.5px !important;
}

.whb-general-header .wd-search-form,
.whb-general-header .searchform {
    flex: 1 1 180px !important;
    min-width: 160px !important;
    max-width: 300px !important;
}

/* Dutch labels are the widest case, so the account label steps aside a
   little earlier than English would need. */


/* ===========================================================================
   19. SEARCH AND DROPDOWNS

   Three separate faults, one visual family:

   1. Clicking search threw a full-screen white overlay over the page, with an
      unstyled "SELECT CATEGORY" box in the middle of it. The header already
      has a search field, so the overlay was a second, worse search on top of
      the first. It is gone: the header search is now an ordinary field that
      returns suggestions underneath itself.

   2. Hovering B2B / Restaurants drew two stacked white boxes. Woodmart wraps
      the <ul> in its own .wd-dropdown-menu panel; section 17 styled both, so
      both painted a card. The outer element is the panel now, the inner list
      is transparent.

   3. The suggestions panel inherited the width of the search field, so
      product names were cut off after one word.
   =========================================================================== */

/* --- Shared panel language ---------------------------------------------- */
:root {
    --lt-panel-bg: #FFFFFF;
    --lt-panel-brd: rgba(26, 21, 18, 0.10);
    --lt-panel-shadow: 0 22px 54px -18px rgba(36, 19, 16, 0.34);
    --lt-panel-radius: 14px;
    --lt-ink: rgba(26, 21, 18, 0.82);
    --lt-ink-soft: rgba(26, 21, 18, 0.55);
    --lt-accent: #D83A2E;
    --lt-accent-wash: rgba(216, 58, 46, 0.07);
}

/* --- 2. Navigation dropdown: one card, not two -------------------------- */
.whb-general-header .wd-nav .wd-dropdown-menu {
    min-width: 268px !important;
    padding: 8px !important;
    border: 1px solid var(--lt-panel-brd) !important;
    border-radius: var(--lt-panel-radius) !important;
    background: var(--lt-panel-bg) !important;
    box-shadow: var(--lt-panel-shadow) !important;
}

/* Woodmart's dropdown wraps its list in a .container, which carries the
   theme's page gutter. Inside a 268px panel that is just dead space. */
.whb-general-header .wd-nav .wd-dropdown-menu > .container {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The list is content inside the panel, not a panel of its own. */
.whb-general-header .wd-nav .wd-dropdown-menu .wd-sub-menu,
.whb-general-header .wd-nav .wd-dropdown-menu ul.sub-menu {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.whb-general-header .wd-nav .wd-dropdown-menu li {
    margin: 0 !important;
    border: 0 !important;
}

.whb-general-header .wd-nav .wd-dropdown-menu li > a {
    display: block !important;
    padding: 11px 14px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--lt-ink) !important;
    border: 0 !important;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.whb-general-header .wd-nav .wd-dropdown-menu li > a:hover,
.whb-general-header .wd-nav .wd-dropdown-menu li > a:focus-visible {
    background: var(--lt-accent-wash) !important;
    color: var(--lt-accent) !important;
}

/* --- 1 + 3. Header search field and its suggestions --------------------- */
.whb-general-header .wd-search-form {
    position: relative;
}

.whb-general-header .searchform {
    border-radius: 999px !important;
}

.whb-general-header .searchform .s {
    height: 44px !important;
    font-size: 14px !important;
    padding-left: 18px !important;
    padding-right: 46px !important;
}

.whb-general-header .searchform .searchsubmit {
    width: 44px !important;
    min-width: 44px !important;
}

/* The suggestions panel was sized to the field. Let it take the width the
   product names actually need, anchored to the field's left edge. */
.whb-general-header .wd-search-results-wrapper {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 400;
}

.whb-general-header .wd-search-results,
.wd-search-form .wd-search-results {
    min-width: 420px !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
    margin-top: 10px !important;
    padding: 8px !important;
    border: 1px solid var(--lt-panel-brd) !important;
    border-radius: var(--lt-panel-radius) !important;
    background: var(--lt-panel-bg) !important;
    box-shadow: var(--lt-panel-shadow) !important;
}

.wd-search-results .wd-suggestions-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wd-search-results .wd-suggestion {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border: 0 !important;
    border-radius: 10px;
    transition: background-color 0.14s ease;
}

.wd-search-results .wd-suggestion:hover {
    background: var(--lt-accent-wash);
}

.wd-search-results .wd-suggestion-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--lt-panel-brd);
    border-radius: 8px;
    background: #FBFAF9;
}

.wd-search-results .wd-suggestion-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wd-search-results .wd-suggestion-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Woodmart keeps suggestion titles on a single line, so a long product name
   ran off the edge of the panel instead of wrapping onto a second line. */
.wd-search-results .wd-entities-title {
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--lt-ink);
}

.wd-search-results .wd-entities-title strong {
    font-weight: 700;
    color: var(--lt-accent);
    text-decoration: none !important;
}

.wd-search-results .wd-suggestion .price,
.wd-search-results .wd-suggestion .price .amount {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--lt-accent) !important;
}

/* "View all results" reads as the panel's footer action. */
.wd-search-results .wd-all-results {
    display: block;
    margin-top: 6px;
    padding: 11px 10px 5px;
    border-top: 1px solid var(--lt-panel-brd);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: none;
    color: var(--lt-accent);
}

.wd-search-results .wd-all-results:hover {
    text-decoration: underline;
}

.wd-search-results .wd-search-no-results,
.wd-search-results .wd-search-loader ~ * {
    color: var(--lt-ink-soft);
}

/* --- Mobile: the panel spans the row rather than the field -------------- */
@media (max-width: 1024px) {
    .whb-header-bottom .wd-search-results-wrapper {
        position: absolute;
        inset-inline: 0;
        top: 100%;
    }

    .whb-header-bottom .wd-search-results {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wd-search-results .wd-suggestion,
    .whb-general-header .wd-nav .wd-dropdown-menu li > a { transition: none; }
}

/* ===========================================================================
   20. HEADER ROW FIT

   The row is capped at the theme container width, 1480px, so widening the
   browser past that changes nothing: a row that does not fit at 1480 is
   broken on every desktop. That is why Contact Us sat underneath the language
   toggle at 1920 just as it did at 1440.

   Two faults, measured at the cap:

   1. Woodmart sizes the search from --wd-search-form-width. The wrapper takes
      it as a max-width and the *input* takes it minus 20px as a MIN-width, so
      with the 310px default the form held itself 290px wide and overflowed
      whatever the wrapper was set to. Setting the variable moves both halves
      together; overriding the input's min-width stops it pushing out.

   2. Even with that fixed the row wanted 1527px in English and 1564px in
      Dutch against 1450px of usable width. Padding across the search, the
      navigation pills, the Categories button and the language toggle gives
      back about 90px; the last of it comes from the signed-out account
      control, which drops to its icon because Register sits right beside it
      carrying the same journey with a label on it. Signed in, where the
      control is the way back into the account and there is no Register
      button, it keeps the pill and the customer's name.
   =========================================================================== */

/* --- Search ------------------------------------------------------------- */
.whb-general-header [class*="wd-header-search-form"] {
    --wd-search-form-width: 210px;
    flex: 0 0 auto !important;
    width: var(--wd-search-form-width) !important;
    min-width: var(--wd-search-form-width) !important;
    max-width: var(--wd-search-form-width) !important;
    padding-inline: 0 !important;
}

.whb-general-header [class*="wd-header-search-form"] form.searchform {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.whb-general-header [class*="wd-header-search-form"] input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
}

/* --- Navigation --------------------------------------------------------- */
.whb-general-header .whb-col-center .wd-nav > li > a,
.whb-general-header .whb-column-center .wd-nav > li > a {
    padding: 10px 10px !important;
    gap: 6px !important;
}

/* --- Categories trigger ------------------------------------------------- */
.lt-mm__trigger {
    gap: 8px;
    padding: 11px 13px !important;
    font-size: 14px !important;
}

/* --- Language toggle: even padding, now that the flags are gone --------- */
.lt-langtoggle__opt {
    gap: 0;
    padding: 7px 11px !important;
}

/* --- Account ------------------------------------------------------------ */
.lt-account--guest {
    padding: 9px !important;
    gap: 0 !important;
}

.lt-account--guest .lt-account__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lt-account--user {
    padding: 8px 13px 8px 10px !important;
}

.whb-general-header .whb-column-right,
.whb-general-header .whb-col-right {
    gap: 8px !important;
}

/* The gap between the logo and the Categories button was the widest in the
   row and the least earned. */
.whb-general-header .whb-col-left,
.whb-general-header .whb-column-left {
    padding-right: 0 !important;
    margin-right: 6px !important;
}

/* --- Below the cap: shed the Register label, then the signed-in name ---- */
@media (max-width: 1300px) {
    .lt-reg-wrap { display: none !important; }
}

@media (max-width: 1180px) {
    .lt-account--user .lt-account__label { display: none; }
    .lt-account--user { padding: 9px !important; }
}

/* Between the mobile breakpoint and 1400px the row is tighter again: the
   search and the navigation pills each give back a few more pixels so the
   last menu item still clears the language toggle at 1280. */
@media (max-width: 1400px) {
    .whb-general-header [class*="wd-header-search-form"] { --wd-search-form-width: 176px; }

    .whb-general-header .whb-col-center .wd-nav > li > a,
    .whb-general-header .whb-column-center .wd-nav > li > a { padding: 10px 8px !important; }

    .lt-mm__trigger { padding: 11px 11px !important; }

    .lt-langtoggle__opt { padding: 7px 10px !important; }
}

/* ---------------------------------------------------------------------------
   21. TABLET HEADER BREAKPOINT

   Woodmart swaps to the mobile header at 1024px. Between there and about
   1250px the desktop row cannot hold the logo, Categories, search, four menu
   items, the language toggle and the account control at once - at 1100px it
   wanted 137px more than it had, and the last menu item ran under the
   language toggle.

   The theme decides this in five declarations, so the switch moves up to
   1250px rather than the row being shaved until nothing is readable. A
   tablet gets the burger menu, which is what a tablet should get.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1250px) {
    .whb-top-bar-inner {
        height: var(--wd-top-bar-sm-h);
        max-height: var(--wd-top-bar-sm-h);
    }

    .whb-general-header-inner {
        height: var(--wd-header-general-sm-h);
        max-height: var(--wd-header-general-sm-h);
    }

    .whb-header-bottom-inner {
        height: var(--wd-header-bottom-sm-h);
        max-height: var(--wd-header-bottom-sm-h);
    }

    .whb-visible-lg,
    .whb-hidden-mobile { display: none !important; }

    /* The row heights come from .whb-flex-row, not from the theme's inner
       wrapper, so they are set here rather than through the height vars. */
    .whb-top-bar .whb-flex-row { min-height: 66px !important; }

    .whb-header-bottom .whb-flex-row { min-height: 62px !important; }

    .whb-hidden-lg,
    .whb-hidden-desktop { display: block !important; }

    .whb-sticky-prepared { padding-top: var(--wd-header-sm-h); }
}

/* ---------------------------------------------------------------------------
   22. RESERVE SPACE FOR THE LOGO

   The theme prints the logo with neither width nor height attributes, so the
   browser gave it 20x26px until the file arrived and then re-laid the whole
   header row out around the real 148x62. That is the second half of the jump
   on load: the first was the font, this is the logo. Declaring the aspect
   ratio reserves the right box from the first paint.
--------------------------------------------------------------------------- */
.whb-general-header .site-logo img {
    width: 148px;
    height: auto;
    aspect-ratio: 697 / 292;
}

.whb-top-bar .site-logo img {
    width: 206px;
    height: auto;
    aspect-ratio: 698 / 357;
}

@media (max-width: 480px) {
    .whb-top-bar .site-logo img { width: 168px; }
}

/* ===========================================================================
   23. ACCOUNT AREA

   Signed out, this page was a login box alone in the middle of an empty page,
   with nothing to tell a restaurant that accounts here are opened by
   application. It is now two columns: sign in on the left, what an account is
   and how to apply on the right.

   Signed in, the dashboard leads with where the application stands and how to
   actually place an order, because in catalogue mode ordering happens by
   phone, WhatsApp or email rather than through a checkout.
   =========================================================================== */

/* --- Signed out: login beside the invitation to apply ------------------- */
.lt-login-split .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 400px);
    justify-content: center;
    align-items: start;
    gap: 44px;
    max-width: 1000px;
    margin-inline: auto;
}

.lt-login-split .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

/* The theme caps this wrapper at 450px and centres it; inside a grid column
   it should simply fill the column. */
.lt-login-split .wd-registration-page {
    max-width: none !important;
    margin: 0 !important;
}

.lt-login-split .wd-login-title {
    margin-bottom: 18px;
    font-size: 24px;
}

.lt-login-aside {
    padding: 26px;
    border: 1px solid rgba(26, 21, 18, 0.10);
    border-radius: 16px;
    background: #FBFAF9;
}

.lt-login-aside h2 {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.25;
    color: #241310;
}

.lt-login-aside p {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(26, 21, 18, 0.72);
}

.lt-login-aside__list {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.lt-login-aside__list li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(26, 21, 18, 0.82);
}

/* A check mark drawn in CSS rather than an icon font, so it is there on the
   first paint like the rest of this panel. */
.lt-login-aside__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #D83A2E;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (max-width: 860px) {
    .lt-login-split .woocommerce {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        max-width: 520px;
    }
}

/* --- Signed in: the dashboard panel ------------------------------------- */
.lt-acct {
    display: grid;
    gap: 16px;
    margin: 22px 0 6px;
}

.lt-acct__status {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    border: 1px solid rgba(26, 21, 18, 0.10);
    border-radius: 14px;
    background: #FFFFFF;
}

.lt-acct__status > div {
    display: grid;
    gap: 3px;
}

.lt-acct__status strong {
    font-size: 15px;
    font-weight: 700;
    color: #241310;
}

.lt-acct__status span {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(26, 21, 18, 0.66);
}

.lt-acct__dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: rgba(26, 21, 18, 0.32);
}

.lt-acct__status--ok .lt-acct__dot { background: #2E7D53; }
.lt-acct__status--waiting .lt-acct__dot { background: #C98A1B; }
.lt-acct__status--attention .lt-acct__dot { background: #D83A2E; }

.lt-acct__status--ok { border-color: rgba(46, 125, 83, 0.30); }
.lt-acct__status--waiting { border-color: rgba(201, 138, 27, 0.32); }
.lt-acct__status--attention { border-color: rgba(216, 58, 46, 0.30); }

.lt-acct__how {
    padding: 20px 22px;
    border: 1px solid rgba(26, 21, 18, 0.10);
    border-radius: 14px;
    background: #FBFAF9;
}

.lt-acct__how h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #241310;
}

.lt-acct__how p {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(26, 21, 18, 0.72);
}

.lt-acct__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lt-acct__btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    border: 1px solid rgba(26, 21, 18, 0.16);
    border-radius: 999px;
    background: #FFFFFF;
    color: #241310 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.lt-acct__btn:hover {
    border-color: rgba(216, 58, 46, 0.45);
    color: #D83A2E !important;
}

.lt-acct__btn--primary {
    border-color: #D83A2E;
    background: #D83A2E;
    color: #FFFFFF !important;
}

.lt-acct__btn--primary:hover {
    border-color: #B72D23;
    background: #B72D23;
    color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
    .lt-acct__btn { transition: none; }
}

/* ===========================================================================
   24. MEGA MENU, SHOP TOOLBAR, FOOTER

   The mega menu regression is worth recording, because it will happen again
   otherwise. Woodmart prints its component stylesheets as <link> tags inside
   the body, next to the markup that needs them. This file is enqueued in the
   head. So on an equal-specificity tie, Woodmart wins on source order.

   That is what emptied the categories panel: the theme's
   :is(.btn, .button, button, ...) { display: inline-flex } beat
   .lt-mm__item { display: flex } - same specificity, later in the document.
   The category buttons became inline, flowed onto one line, and the twentieth
   one ended up at x=5599 with only "Sauzen" visible.

   Custom components that are <button> or carry a .btn-ish class therefore need
   either !important or a compound selector. The nav is also given an explicit
   column direction so it no longer depends on its children being block-level.
   =========================================================================== */

.lt-mm__nav {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}

.lt-mm__panel button.lt-mm__item {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    white-space: normal;
}

/* ---------------------------------------------------------------------------
   Shop toolbar.

   "Show column" is the off-canvas sidebar opener, meant for narrow screens
   where the filter column is hidden. It was showing on desktop as well, next
   to the filter column it opens, and the ~100px it took pushed "Show 9 12 18
   24" onto two lines and the grid-view icons onto two rows.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .elementor-widget-wd_builder_off_canvas_column_btn {
        display: none !important;
    }
}

/* These two are single controls and should never break across lines. */
.wd-products-per-page,
.wd-products-shop-view {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.wd-products-per-page {
    align-items: center;
    gap: 2px;
}

.wd-products-shop-view {
    align-items: center;
}

/* The row itself: centre the controls on one baseline, and if it ever does run
   out of room, let it wrap as whole controls rather than shredding them. */
.wd-shop-result-count,
.wd-shop-prod-per-page,
.wd-shop-view,
.wd-shop-ordering {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.wd-shop-result-count {
    flex: 1 1 auto;
    min-width: 0;
}

.wd-shop-result-count .woocommerce-result-count {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-shop-ordering .woocommerce-ordering {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Footer.

   Four columns: the brand with its social links beneath, the site navigation,
   the trade pages, and the contact details.
--------------------------------------------------------------------------- */
.wd-footer .wd-social-icons,
.footer-container .wd-social-icons {
    justify-content: flex-start;
}

.footer-container .wd-social-icons .wd-social-icon {
    margin-inline: 0 8px;
}

@media (max-width: 1024px) {
    .footer-container .elementor-element-340a1c5 {
        row-gap: 34px;
    }
}

@media (max-width: 767px) {
    .footer-container .elementor-element-340a1c5 {
        row-gap: 30px;
    }
}

/* ===========================================================================
   25. CATALOGUE CARDS

   A wholesale buyer works from an order list, not from product names, so the
   article number sits on the card where they can read it off. Three additions:
   the article number, a marker on genuinely new listings, and an honest
   "Price on request" where a product has not been priced yet - previously an
   empty gap that read as a broken card.
   =========================================================================== */

.lt-loop-sku {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 5px;
    line-height: 1.2;
}

.lt-loop-sku__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(26, 21, 18, 0.42);
}

.lt-loop-sku__value {
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: rgba(26, 21, 18, 0.62);
}

/* --- New listings -------------------------------------------------------- */
.wd-product-thumb,
.wd-product .product-element-top {
    position: relative;
}

.lt-new-badge {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 999px;
    background: #2E7D53;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.5;
    text-transform: uppercase;
    pointer-events: none;
}

/* --- Unpriced products --------------------------------------------------- */
.lt-price-request {
    font-size: 14px;
    font-weight: 600;
    color: rgba(26, 21, 18, 0.52);
}

/* ===========================================================================
   26. HOME CAROUSEL SECTIONS

   New On The Shelves was querying reverse-alphabetically and showing 24
   products at 5.5 across, which cut every product name in half. It orders by
   date now and shows four at a time, which is the width a name like
   "Super Q Brand Kan Mian Dried Steamed Noodles 200 g" actually needs.
   =========================================================================== */

.elementor-element-3980729,
.elementor-element-3da56a9 {
    --lt-card-brd: rgba(26, 21, 18, 0.09);
}

/* Section header: title on the left, the escape hatch on the right, sharing
   one baseline instead of floating apart. */
.elementor-element-2ab2875,
.elementor-element-db98ead {
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 20px;
    margin-bottom: 22px !important;
}

.elementor-element-2ab2875 .liner-continer,
.elementor-element-db98ead .liner-continer {
    margin: 0;
}

/* Cards in these rows read as one object: same border, same radius, and a lift
   on hover that says the whole card is the target. */
.elementor-element-3980729 .wd-product,
.elementor-element-3da56a9 .wd-product,
.elementor-element-0b8aa7e .wd-product {
    border: 1px solid var(--lt-card-brd, rgba(26, 21, 18, 0.09));
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.elementor-element-3980729 .wd-product:hover,
.elementor-element-3da56a9 .wd-product:hover,
.elementor-element-0b8aa7e .wd-product:hover {
    border-color: rgba(216, 58, 46, 0.32);
    box-shadow: 0 16px 34px -20px rgba(36, 19, 16, 0.42);
    transform: translateY(-2px);
}

/* With four across there is room for the full name, so stop clamping it to a
   stub and give the two lines a fixed slot so card bottoms line up. */
.elementor-element-3980729 .wd-entities-title,
.elementor-element-3da56a9 .wd-entities-title,
.elementor-element-0b8aa7e .wd-entities-title {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    min-height: 2.8em !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
}

@media (prefers-reduced-motion: reduce) {
    .elementor-element-3980729 .wd-product,
    .elementor-element-3da56a9 .wd-product,
    .elementor-element-0b8aa7e .wd-product { transition: none; }

    .elementor-element-3980729 .wd-product:hover,
    .elementor-element-3da56a9 .wd-product:hover,
    .elementor-element-0b8aa7e .wd-product:hover { transform: none; }
}

/* ===========================================================================
   27. ABOUT US

   The page opened with a video beside a column of three stacked headings and
   three paragraphs, then a gallery, then the reasons to choose us - all of it
   the same weight, so nothing led. Two things are added: a band of figures
   right after the introduction, which answers "how big are you" before the
   prose does, and a closing invitation, because the page previously ended on
   a feature grid with nothing to do next.

   Every figure here is one the site can stand behind: the catalogue count, the
   number of categories, the delivery area, and the approval time already
   quoted on the home page.
   =========================================================================== */

.lt-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1180px;
    margin-inline: auto;
}

.lt-stats__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-inline-start: 18px;
    border-inline-start: 2px solid rgba(216, 58, 46, 0.30);
}

.lt-stats__figure {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #D83A2E;
    font-variant-numeric: tabular-nums;
}

.lt-stats__label {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(26, 21, 18, 0.68);
    text-wrap: balance;
}

@media (max-width: 900px) {
    .lt-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 20px;
    }

    .lt-stats__figure { font-size: 26px; }
}

@media (max-width: 460px) {
    .lt-stats { grid-template-columns: minmax(0, 1fr); }
}

/* --- The introduction reads better with a clear lead paragraph ----------- */
.elementor-element-cca9ce8 .elementor-widget-text-editor p:first-child,
.elementor-element-56ae891 p:first-child {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(26, 21, 18, 0.80);
}

.elementor-element-cca9ce8 .elementor-widget-heading .elementor-heading-title {
    margin-top: 6px;
    font-size: 21px;
}

.elementor-element-cca9ce8 p {
    max-width: 62ch;
}

/* The video column should not tower over the text on a narrow desktop. */
@media (min-width: 1025px) {
    .elementor-element-d96a18c {
        position: sticky;
        top: 110px;
        align-self: flex-start;
    }
}

/* --- Section rhythm ----------------------------------------------------- */
.elementor-element-c9fcf92 {
    padding-block: 44px 6px;
}

.elementor-element-b310fdb .woodmart-title-container {
    text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
    .elementor-element-d96a18c { position: static; }
}

/* ---------------------------------------------------------------------------
   28. CATEGORY GRID

   Replaces the About page's broken photo carousel. Each tile is a way into a
   real category, with the depth of that category stated on it, so the section
   answers "what do you actually stock" instead of showing stock photography.
--------------------------------------------------------------------------- */
.lt-catgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 1180px;
    margin-inline: auto;
}

.lt-catgrid__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(26, 21, 18, 0.10);
    border-radius: 14px;
    background: #FFFFFF;
    color: #241310 !important;
    text-decoration: none !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lt-catgrid__item:hover {
    border-color: rgba(216, 58, 46, 0.36);
    box-shadow: 0 16px 32px -20px rgba(36, 19, 16, 0.38);
    transform: translateY(-2px);
}

.lt-catgrid__item > i {
    margin-bottom: 6px;
    font-size: 26px;
    line-height: 1;
    color: #D83A2E;
}

.lt-catgrid__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.lt-catgrid__n {
    font-size: 13px;
    color: rgba(26, 21, 18, 0.55);
    font-variant-numeric: tabular-nums;
}

/* The catalogue link closes the grid rather than sitting in it as a tile. */
.lt-catgrid__all {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 6px;
    padding: 11px 20px;
    border: 1px solid rgba(26, 21, 18, 0.18);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #241310 !important;
    text-decoration: none !important;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.lt-catgrid__all:hover {
    border-color: rgba(216, 58, 46, 0.45);
    color: #D83A2E !important;
}

@media (max-width: 1024px) {
    .lt-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .lt-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .lt-catgrid { grid-template-columns: minmax(0, 1fr); }
    .lt-catgrid__all { justify-self: stretch; text-align: center; }
}

/* The section's own heading and lead: left-aligned like the rest of the page,
   with the lead held to a readable measure instead of centred at 400px in a
   1400px box. */
.elementor-element-01d4d5a .title-wrapper,
.elementor-element-01d4d5a .liner-continer {
    max-width: 1180px;
    margin-inline: auto;
    text-align: left;
}

.elementor-element-01d4d5a .title-after_title,
.elementor-element-01d4d5a .woodmart-title-container + * {
    max-width: 72ch;
    margin-inline: 0;
    text-align: left;
}

@media (prefers-reduced-motion: reduce) {
    .lt-catgrid__item { transition: none; }
    .lt-catgrid__item:hover { transform: none; }
}