/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ---------------------------------------------------------------------------
   SIZE GUIDE-knop op de productpagina (07-08-2026)

   Het thema geeft deze knop een lichtgrijze vulling, gemeten rgb(243,243,243)
   met donkergrijze tekst. Op onze donkere productpagina was dat het lichtste
   vlak van de hele pagina, feller dan de gouden ADD TO CART-knop er vlak boven,
   waardoor het oog eerst naar het opzoeken van een maat ging in plaats van naar
   het kopen. Nu alleen een dunne rand, zodat het herkenbaar een knop blijft
   maar de koopknop weer wint.

   Gekozen door Martijn uit vier getoonde varianten (wit omlijnd, goud omlijnd,
   tekstlink, of laten staan). Goud viel af omdat ADD TO CART ook goud is.
   --------------------------------------------------------------------------- */
.wd-size-guide-trigger.button {
    background-color: transparent;
    background-image: none;
    color: #e8e8e8;
    border: 1px solid rgba(255, 255, 255, .28);
}

.wd-size-guide-trigger.button:hover,
.wd-size-guide-trigger.button:focus {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .55);
}

/* ---------------------------------------------------------------------------
   ONLY FANS (product 44079): DE TWEE KEUZEKNOPPEN IN DE PRODUCTLIJST (07-08-2026)

   Alleen dit product gebruikt het kenmerk "Option", en dat kenmerk staat in het
   thema op swatch-stijl 1: platte tekst met een streepje eronder zodra je kiest.
   Op onze donkere kaarten is dat streepje onzichtbaar, dus stonden er in de
   productlijst twee kale regels vette tekst waar bij alle andere producten een
   echte knop staat. Hier worden het twee blokken met het aantal foto's boven en
   de prijs eronder, gratis links, want dit product bestaat om adressen te
   verzamelen en het woord FREE moet in beeld staan.

   Gekozen door Martijn uit drie getoonde richtingen (ronde pil zoals de patches,
   blokken met de prijs erin, of naam links met prijs rechts).

   LET OP, drie dingen die je nodig hebt als je hier iets verandert:
   1. !important is nodig. Het thema laadt woo-mod-swatches-style-1.css MIDDEN IN
      de productkaart, dus na dit bestand, en in wp-custom-css staat bovendien
      .wd-swatch{font-size:22px}.
   2. De tabelketen moet op display:block, anders krimpt de knoppenrij tot de
      breedte van de tekst in plaats van de breedte van de kaart.
   3. De ::before van een swatch is bij het thema de doorhaalstreep voor een
      uitverkochte optie: absoluut gepositioneerd, opacity 0 en met een rode
      achtergrond. Vandaar position:static, opacity:1 en background:none.

   Raakt alleen de kaarten in een productlijst (.wd-product). De productpagina
   zelf gebruikt andere opmaak en blijft ongemoeid.
   --------------------------------------------------------------------------- */
.wd-product.post-44079 form.variations_form table.variations,
.wd-product.post-44079 form.variations_form table.variations tbody,
.wd-product.post-44079 form.variations_form table.variations tr,
.wd-product.post-44079 form.variations_form table.variations td.value {
    display: block !important;
    width: 100% !important;
}

.wd-product.post-44079 form.variations_form table.variations {
    flex: 0 0 100% !important;
}

.wd-product.post-44079 .wd-swatches-product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 6px !important;
    box-sizing: border-box !important;
}

.wd-product.post-44079 .wd-swatch[data-value="5-free-pictures"] { order: 1 !important; }
.wd-product.post-44079 .wd-swatch[data-value="cqb-series-8-photos"] { order: 2 !important; }

.wd-product.post-44079 .wd-swatch.wd-text {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 6px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 4px !important;
    background: #151515 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
}

.wd-product.post-44079 .wd-swatch.wd-text .wd-swatch-text { display: none !important; }

.wd-product.post-44079 .wd-swatch.wd-text::before {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    background: none !important;
    background-image: none !important;
    transform: none !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .72) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.wd-product.post-44079 .wd-swatch.wd-text::after {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    border: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.wd-product.post-44079 .wd-swatch[data-value="5-free-pictures"]::before { content: "5 photos" !important; }
.wd-product.post-44079 .wd-swatch[data-value="5-free-pictures"]::after { content: "FREE" !important; color: #CB9500 !important; }
.wd-product.post-44079 .wd-swatch[data-value="cqb-series-8-photos"]::before { content: "8 photos" !important; }
.wd-product.post-44079 .wd-swatch[data-value="cqb-series-8-photos"]::after { content: "\20AC 2,90" !important; }

.wd-product.post-44079 .wd-swatch.wd-text:hover { border-color: #CB9500 !important; }

.wd-product.post-44079 .wd-swatch.wd-text.wd-active {
    border-color: #CB9500 !important;
    background: rgba(203, 149, 0, .14) !important;
}

@media (max-width: 768px) {
    .wd-product.post-44079 .wd-swatch.wd-text {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 4px !important;
    }

    .wd-product.post-44079 .wd-swatch.wd-text::before {
        font-size: 9.5px !important;
        letter-spacing: .05em !important;
    }

    .wd-product.post-44079 .wd-swatch.wd-text::after { font-size: 14px !important; }
}


/* ---------------------------------------------------------------------------
   TELEFOONMENU: EEN LIJST IN PLAATS VAN TWEE TABBLADEN (14-08-2026)

   Het uitklapmenu op de telefoon had bovenin twee tabbladen, MENU en
   CATEGORIES. De zes categorieen stonden daardoor twee keer in hetzelfde
   menu: een keer achter het pijltje bij Shop, en een keer in het tweede
   tabblad. Wie bij een categorie wilde komen moest drie keer tikken.

   De menu-items zelf zijn platgeslagen in menu 65 (Mobile navigation), zodat
   alles nu in een lijst staat en elke regel een tik is. Deze regels halen de
   tabbladstrook en het nu overbodige tweede paneel uit beeld.

   Terugdraaien: dit blok weghalen en in menu 65 de categorieen weer onder
   Shop hangen. De oude stand staat in de back-up van 14-08-2026.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* de strook met MENU / CATEGORIES */
    .mobile-nav .wd-nav-mob-tab { display: none; }

    /* het tweede paneel, dezelfde categorieen als in de lijst zelf */
    .mobile-nav .mobile-categories-menu { display: none; }

    /* De vijf informatiepagina's kleiner en rustiger, zodat ze niet meer
       even hard meedingen als de categorieen erboven. Op menu-item-id
       gericht en niet op volgorde, want een volgorde schuift een keer op. */
    .mobile-nav #menu-item-31223 > a,
    .mobile-nav #menu-item-31224 > a,
    .mobile-nav #menu-item-66332 > a,
    .mobile-nav #menu-item-15547 > a {
        font-size: 12px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: .2px;
        color: rgba(255, 255, 255, .55);
        padding-top: 9px;
        padding-bottom: 9px;
    }

    /* Een streepje boven het informatieblok, zodat de scheiding te zien is.
       Stond tot 17-08-2026 op 31225 (About us). Die regel is weg omdat About us
       is opgeslokt door de missiepagina, dus het streepje zit nu op FAQ's, de
       nieuwe eerste informatieregel. */
    .mobile-nav #menu-item-31223 {
        border-top: 1px solid rgba(255, 255, 255, .16);
        margin-top: 8px;
    }
}


/* ---------------------------------------------------------------------------
   DE VIER BELOFTES ONDER DE HOMEPAGEFOTO (16-08-2026)
   Homepage 1887, blok 3c93442, de vakjes Veteran owned / 60,000+ customers
   worldwide / Responsive customer service / Free shipping worldwide from 75.

   WAT ER MIS WAS, GEMETEN EN NIET GESCHAT.
   De vier iconen zijn vierkante PNG's van 200 bij 200. Drie van de vier
   plaatjeswidgets hadden nog de instelling hoogte 50px staan, een restant van
   de oude brede iconen, en met object-fit fill wordt een vierkant plaatje dan
   vier keer platgedrukt. De medaille, de mensen en de koptelefoon zagen er
   daardoor uit als een pannenkoek. Het vierde vakje had die instelling juist
   niet maar wel eigen CSS met height 40vh (32vh op de telefoon) en object-fit
   cover, dus het vliegtuig stond op 288 punten hoog en dat vakje was bijna
   drie keer zo hoog als de rest. Op de computer werden alle vier de vakjes
   daardoor 456 punten hoog met een groot leeg gat eronder.

   WAAROM HET HIER STAAT EN NIET IN ELEMENTOR.
   Bewust in het child theme opgelost en niet in de pagina zelf. Een wijziging
   in _elementor_data vraagt om het legen van de Elementor-rendercache, en dat
   is op 15-08-2026 misgegaan met een HTTP 500 op de hele site. CSS kan de site
   niet plat leggen. De selectors staan een stap specifieker dan die van
   Elementor (body ervoor), zodat een herberekening van de paginastijl deze
   regels niet alsnog overstemt.

   OP DE TELEFOON STAAN ZE TWEE NAAST TWEE, gekozen door Martijn uit drie
   getoonde richtingen (onder elkaar, twee naast elkaar, of regels met het
   icoon links). Zo staan alle vier de beloftes in een oogopslag op het scherm
   in plaats van dat er drie schermen voor gescrold moet worden.

   Het raster is grid met minmax(0, 1fr) en niet flex met een breedte in
   procenten. Dat is met opzet: bij flex moet de breedte van de vakjes precies
   kloppen met de tussenruimte, en klopt dat niet dan loopt de pagina rechts
   uit beeld. Grid rekent die tussenruimte zelf mee. De nul in minmax voorkomt
   de automatische ondergrens van 1fr, precies de valkuil die de tegels op
   /designs/ op 14-08-2026 van het scherm liet lopen.

   Terugdraaien: dit hele blok weghalen. De vorige versie van dit bestand staat
   als "_backup style.css 16-08-2026.css" in dezelfde map.
   --------------------------------------------------------------------------- */

/* De iconen: vierkant, heel in beeld, gecentreerd. object-fit contain zorgt dat
   er nooit meer iets uitgerekt of afgesneden wordt, ongeacht wat de widget zegt. */
body .elementor-1887 .elementor-element.elementor-element-3c93442 .elementor-widget-image img {
    width: 64px;
    height: 64px;
    max-width: 64px;
    object-fit: contain;
    border-radius: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* De tekst: regelafstand los van de letterhoogte. Stond op 18px bij een letter
   van 18px, waardoor twee regels elkaar bijna raakten. */
body .elementor-1887 .elementor-element.elementor-element-3c93442 .elementor-widget-heading .elementor-heading-title {
    line-height: 1.35;
}

/* Tablet: vier naast elkaar blijft, maar de vakjes zijn daar nog maar circa 162
   punten breed. Iconen en tekst dus een maat kleiner, anders valt "free shipping
   worldwide from 75" daar in vier regels uiteen. */
@media (max-width: 1024px) {
    body .elementor-1887 .elementor-element.elementor-element-3c93442 .elementor-widget-image img {
        width: 56px;
        height: 56px;
        max-width: 56px;
    }

    body .elementor-1887 .elementor-element.elementor-element-3c93442 .elementor-widget-heading .elementor-heading-title {
        font-size: 15px;
        line-height: 1.35;
    }
}

/* Telefoon: twee naast twee. */
@media (max-width: 767px) {
    body .elementor-1887 .elementor-element.elementor-element-3c93442 > .e-con-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }

    /* De vakjes vullen hun vak in het raster. Elementor zet op de telefoon zelf
       --width op 100%, vandaar dat die hier terug moet naar auto. */
    body .elementor-1887 .elementor-element.elementor-element-3c93442 .e-con.e-child {
        --width: auto;
        width: auto;
        max-width: none;
        --padding-left: 12px;
        --padding-right: 12px;
        --padding-top: 20px;
        --padding-bottom: 20px;
        --row-gap: 12px;
        --column-gap: 12px;
    }

    body .elementor-1887 .elementor-element.elementor-element-3c93442 .elementor-widget-image img {
        width: 44px;
        height: 44px;
        max-width: 44px;
    }

    /* Kleiner, want een vakje is op de telefoon nog maar circa 135 punten breed. */
    body .elementor-1887 .elementor-element.elementor-element-3c93442 .elementor-widget-heading .elementor-heading-title {
        font-size: 13px;
        line-height: 1.35;
    }
}


/* ---------------------------------------------------------------------------
   DE SITE OP TABLET (27-08-2026)

   Twee dingen, allebei alleen in de band die een tablet gebruikt. Boven 769
   pixels en onder 650 pixels verandert er niets, dus computer en telefoon
   blijven exact zoals ze stonden. Nagemeten op twaalf breedtes.

   1. DE ONTBREKENDE PIXEL

   Op precies 768 pixels breed, de maat van een iPad rechtop, klapte het
   categorieblok op de homepage in elkaar: tegels van 115 pixels in plaats van
   354, de labels T-Shirts, Sweaters, Flags en Misc afgekapt, en de SHOP NOW
   knoppen over de tekst heen. Op 767 stond het goed en op 769 ook.

   De oorzaak zit in Elementor zelf. Die zet de telefoon-uitlijning aan met

       @media (max-width: 767px) { .e-con.e-flex { flex-wrap: var(--flex-wrap-mobile); } }

   terwijl de telefoon-BREEDTES van dit blok uit een regel komen die tot en met
   768 loopt. Op die ene tussenliggende pixel gelden de brede maten van de
   telefoon wel, maar mag het blok niet meer afbreken naar een volgende regel.
   Alle vijf de tegels werden dan op een rij geperst.

   De regel hieronder plakt die ene pixel erbij en gebruikt daarvoor Elementors
   EIGEN waarde. Er wordt dus geen nieuwe vormgeving neergezet: 768 ziet er na
   deze regel precies zo uit als 767, en dat is een stand die al maanden goed
   staat. Staat er op een blok geen mobiele waarde, dan verandert er niets,
   want dan valt de eigenschap terug op wat hij nu al is.

   Dit geldt voor ELK Elementor-blok op de site, niet alleen de homepage, want
   de fout van Elementor zit overal.

   2. OP TABLET DE TABLETWAARDE VAN HET THEMA GEBRUIKEN

   Woodmart kent per raster drie waarden: --wd-col-lg voor de computer,
   --wd-col-md voor de tablet en --wd-col-sm voor de telefoon. De grens van
   het thema ligt op 768.98 pixels, dus alles tot en met 768 kreeg de
   TELEFOON-waarde. Gevolg: op een tablet stonden er twee producten naast
   elkaar in kaarten van 364 pixels, ruim twee keer zo groot als op een
   telefoon, en was de shoppagina 22.008 pixels lang.

   De regel hieronder laat de band van 650 tot 768 pixels de tabletwaarde van
   het thema gebruiken. Er staat bewust GEEN vast getal in: elk raster pakt
   zijn eigen bedoelde tabletwaarde, dus de productlijst gaat naar drie, de
   productcarrousel naar vier, de reviews naar drie, en de fotogalerij van een
   product blijft gewoon op een. Een tablet van 768 ziet er daarmee hetzelfde
   uit als een tablet van 769, en dat was al goed.

   De ondergrens van 650 is met opzet gekozen: daaronder zitten telefoons en
   die blijven op twee kaarten staan.

   TERUGDRAAIEN: dit hele blok weghalen. De vorige versie staat als
   "_backup style.css 27-08-2026.css" in de map Webshop/child-theme.
   --------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 768.98px) {
    .e-con.e-flex { flex-wrap: var(--flex-wrap-mobile); }
}

@media (min-width: 650px) and (max-width: 768.98px) {
    body [class*="wd-grid"] { --wd-col: var(--wd-col-md, var(--wd-col-sm)); }
}


/* ---------------------------------------------------------------------------
   DE VIER BELOFTES OP TABLET: TWEE BIJ TWEE (27-08-2026)

   Vervolg op het blok "DE VIER BELOFTES ONDER DE HOMEPAGEFOTO (16-08-2026)"
   hierboven. Daar is de telefoon op twee bij twee gezet, gekozen door Martijn
   uit drie richtingen. De tablet bleef daarbij op vier naast elkaar staan.

   WAT ER MIS WAS, GEMETEN EN NIET GESCHAT.
   Tussen 768 en 1024 pixels stonden de vier vakjes in een rij van 162 tot 226
   punten breed. Drie van de vier labels vielen daardoor in DRIE regels uiteen:
   "60,000+ / CUSTOMERS / WORLDWIDE", "RESPONSIVE / CUSTOMER / SERVICE" en
   "FREE SHIPPING / WORLDWIDE / FROM 75". Zelfs "VETERAN OWNED" brak in tweeen.
   Op 767 pixels, een pixel smaller, stond alles keurig twee bij twee met elk
   label op een regel.

   Deze regels trekken die twee-bij-twee door tot en met 1024 pixels, dus over
   de hele tabletband. Gemeten na afloop: op 768, 834, 900 en 1024 staan alle
   vier de labels op EEN regel en zijn alle vier de vakjes even hoog (132).

   De opmaak is bewust gelijk gehouden aan het telefoonblok hierboven: grid met
   minmax(0, 1fr) en niet flex met procenten, want bij flex moet de breedte van
   de vakjes precies kloppen met de tussenruimte en loopt de pagina anders
   rechts uit beeld. Grid rekent die tussenruimte zelf mee.

   De iconen blijven op 56 en de letter op 15, want dat zijn de tabletwaarden
   die al in het blok hierboven staan. Alleen de indeling verandert.

   BOVEN 1024 PIXELS VERANDERT ER NIETS. Daar staan de vier vakjes naast elkaar
   op 266 tot 283 punten, en dat is de stand die op 16-08-2026 is goedgekeurd.

   TERUGDRAAIEN: dit blok weghalen.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    body .elementor-1887 .elementor-element.elementor-element-3c93442 > .e-con-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-items: stretch;
    }

    body .elementor-1887 .elementor-element.elementor-element-3c93442 .e-con.e-child {
        --width: auto;
        width: auto;
        max-width: none;
        --padding-left: 14px;
        --padding-right: 14px;
        --padding-top: 22px;
        --padding-bottom: 22px;
        --row-gap: 12px;
        --column-gap: 12px;
    }
}

/* TT bovenbalk hoogte 28-08-2026 */
:root { --wd-hb-opt-h: 88px; }
@media (max-width: 1024px) { :root { --wd-hb-opt-h: 110px; } }

/* ---------------------------------------------------------------------------
   TT BOVENBALK TELLER 25-09-2026  (tt-bovenbalk-teller)

   WAT ER MIS WAS. In het bannerblok 42268 staat voor telefoon en tablet een harde
   breedte van 233px op de countdown (post-42268.css, @media max-width:768px). De vier
   vakjes hebben in het ongunstigste geval 236,07px nodig, dus er is drie pixel te
   weinig en dan valt 00 Sc naar een tweede regel. Gemeten met de dagen en uren van
   25-09-2026 gebeurde dat bij 2.520 van de 3.600 minuut- en secondecombinaties, dus
   zeventig procent van de tijd. Of het net past hangt af van de breedte van de cijfers,
   want Poppins heeft geen cijfers van gelijke breedte, en daarom flapperde het.

   WAT DAAR UIT VOLGDE, en dat waren de twee klachten van Martijn. De teller werd door
   die tweede regel 60px hoog in plaats van 28, de inhoud van de balk daarmee 132px in
   plaats van 100, en de balk staat hierboven op 110px vast met overflow hidden. Die
   22px te veel werd gelijk verdeeld, dus de kop verloor 11px aan de bovenkant en de
   knop SEE THE PRIZE 5px aan de onderkant.

   WAT HIER STAAT. De vaste breedte gaat eraf zodat de teller de ruimte krijgt die hij
   nodig heeft. Gemeten na de reparatie op 320, 360, 390, 430 en 768 pixels: teller op
   een regel, inhoud 100px in een balk van 110, kop en knop heel, nergens horizontaal
   schuiven. De kleinste telefoon houdt 12px over, dus het past ruim.

   ER VERANDERT VERDER NIETS. De balk blijft 110px, de knop blijft 108 bij 29, en op
   desktop geldt deze regel niet; die weergave is na de wijziging tot op de byte gelijk
   aan wat er stond. Variant 1 van drie, gekozen door Martijn op 25-09-2026.

   DE body ERVOOR IS NODIG. post-42268.css wordt pas in de body ingeladen en staat dus
   later in het document dan dit bestand, waardoor hij bij gelijke specificiteit wint.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body .elementor-42268 .elementor-element.elementor-element-efff610 {
        --container-widget-width: auto;
        width: auto;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   TT BOVENBALK OP EEN STAANDE TABLET 25-09-2026  (tt-bovenbalk-tablet)

   WAAROM DIT NAAST tt-bovenbalk-teller STAAT. Dat blok repareerde de teller onder de
   768 pixels. Dezelfde teller viel ook uit elkaar tussen 769 en circa 855 pixels, en dat
   is precies de staande iPad. Dat was er al en is niet door die reparatie veroorzaakt.

   WAAROM DE VOOR DE HAND LIGGENDE REPARATIE DAAR NIET WERKT, en dat is gemeten en niet
   vermoed. Op die band staan de kop, de teller en de knop NAAST elkaar en is er domweg
   te weinig ruimte: de teller krijgt 232 tot 252 pixels en heeft er in het ongunstigste
   geval 267 nodig. Zet je flex-shrink op 0 zodat hij zijn ruimte houdt, dan wordt de
   lange kop EVERY EUR 20 IS A TICKET TO WIN OUR APNVG vijf regels en wordt DIE met 53
   pixels afgesneden. Verklein je daarbij de tussenruimte van 50 naar 24 pixels, dan is
   het vier regels en 41 pixels. Toon je daar alleen de korte kop, dan komt de teller wel
   op een regel maar staat die korte kop op 800 tot 834 pixels nog steeds op vier regels
   en vult hij 96 van de 110 pixels van de balk.

   WAT HIER STAAT. De kolomindeling van de telefoon loopt door tot 900 pixels, dus kop,
   teller en knop onder elkaar met de korte kop en de teller in de maat van de telefoon.
   Gemeten op 769, 800, 820, 834, 853, 880 en 900: teller op een regel, inhoud 100 in een
   balk van 110, niets afgesneden, nergens horizontaal schuiven.

   DE GRENS LIGT BEWUST OP 900 EN NIET OP 860. Vanaf 860 werkt de rijindeling weer, maar
   met 1,14 pixel marge, en dat is exact hetzelfde mes op de snede als de fout die hier
   net is weggehaald. Op 901 pixels is de marge 17 pixels en die groeit daarboven door.
   --------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 900px) {
    body .elementor-42268 .elementor-element.elementor-element-507eb01 {
        --flex-direction: column;
        --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
        --container-widget-height: initial;
        --container-widget-flex-grow: 0;
        --container-widget-align-self: initial;
        --justify-content: center;
        --align-items: center;
        --gap: 6px 6px;
        --row-gap: 6px;
        --column-gap: 6px;
        --padding-top: 6px;
        --padding-bottom: 6px;
        --padding-left: 6px;
        --padding-right: 6px;
    }
    body .elementor-42268 .elementor-element.elementor-element-fff268c { display: none; }
    body .elementor-42268 .elementor-element.elementor-element-25b744e { display: block; text-align: center; }
    body .elementor-42268 .elementor-element.elementor-element-25b744e .elementor-heading-title { font-size: 19px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 {
        --container-widget-width: auto;
        width: auto;
        max-width: 100%;
        align-self: center;
    }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-timer { gap: 4px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-timer-value { font-size: 18px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-timer-text { font-size: 10px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-item { min-height: 24px; }
    body .elementor-42268 .elementor-element.elementor-element-9c727d0 .elementor-button { padding: 8px 8px 8px 8px; }
    body .elementor-42268 .elementor-element.elementor-element-9c727d0 .elementor-button .elementor-button-content-wrapper { justify-content: center; }
}

/* TT bovenbalk vangnet leeg blok 28-08-2026 */
.wd-hb-wrapp.wd-display:not(:has(.elementor)) { height: 0 !important; }
.wd-hb-wrapp.wd-display:not(:has(.elementor)),
.wd-hb-wrapp.wd-display:not(:has(.elementor)) ~ .wd-page-wrapper { --wd-hb-h: 0.001px; }
.wd-hb-wrapp.wd-display:not(:has(.elementor)) .wd-hb-close { display: none; }

/* ---------------------------------------------------------------------------
   TT BOVENBALK LIJN 25-09-2026  (tt-bovenbalk-lijn)

   WAT ER MIS WAS. In Theme Settings, Custom CSS staat de regel
   .admin-bar .header-banner { border-bottom: 1px solid lightgray; }. Die geldt alleen
   voor wie ingelogd is, dus een klant zag onder de bovenbalk helemaal geen lijn en
   Martijn zag een felle lijn met een gat erin. Fel omdat lichtgrijs een helderheid van
   211 geeft tegen 60 voor de andere lijnen, en onderbroken omdat het donkere vlak van
   blok 42268 (element 507eb01) 3 pixels over de onderrand van de balk steekt en het
   middenstuk afdekt. Op 1920 breed bleef er zo 36,8 procent van de lijn over.

   WAT HIER STAAT. De felle rand gaat eraf, voor iedereen, en er komt een lijn van 1
   pixel in dezelfde kleur als de rand onder de andere rijen van de kop, van rand tot
   rand. Hij ligt als ::after BOVEN het donkere vlak, anders dekt dat vlak hem net zo
   af als de oude lijn. Hij ligt over de onderste pixel van de balk heen en neemt dus
   geen ruimte in: nagemeten op 390, 820, 1024, 1440 en 1920 staat alles op dezelfde
   pixel als ervoor. Variant A van twee, gekozen door Martijn op 25-09-2026.

   WAAROM body .wd-hb-wrapp ERVOOR. De regel uit Theme Settings heeft specificiteit
   0,2,0 en deze 0,2,1, dus deze wint ongeacht de volgorde waarin ze geladen worden.

   DE LIJN GAAT VANZELF MEE UIT. Hij hangt aan de balk zelf, dus sluit een klant de
   balk met het kruisje of gaat de actie uit, dan verdwijnt de lijn mee. Het vangnet
   hierboven zet een leeg blok op hoogte 0 met overflow hidden en knipt hem dan weg.
   --------------------------------------------------------------------------- */
body .wd-hb-wrapp .header-banner { border-bottom: 0; }
body .wd-hb-wrapp .header-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    z-index: 12;
}

/* ---------------------------------------------------------------------------
   TT CONTRAST KNOPPEN 22-09-2026  (tt-contrast-knoppen)

   WAAROM. Witte tekst op ons themagoud #CB9500 haalt een contrast van 2,68 : 1
   terwijl de norm 4,5 is. Gemeten over 2.721 tekstblokken op vijf paginas en
   twee schermmaten zakten er 201 onder de norm, en 187 daarvan waren exact dit
   ene geval. Zwarte tekst op datzelfde goud haalt 7,25 en laat de merkkleur
   volledig ongemoeid.

   DE KLEUR VERANDERT NIET. Alleen de tekst erop.

   WAAROM DIT GEEN VARIABELE IS, want dat zou netter zijn. Het thema zet het
   goud via --btn-accented-bgcolor en de witte tekst via --btn-accented-color.
   Die variabele op :root zetten veranderde gemeten NUL van de 54 gouden
   elementen: Woodmart herdefinieert hem lager en zet color: #fff daarnaast op
   meerdere plekken hard. Vier aanpakken zijn naast elkaar op de echte pagina
   beproefd; deze pakt er 53 van de 54 met nul schade elders.

   WAT ER BEWUST BUITEN BLIJFT. De schuifbalk van het prijsfilter
   (.ui-slider-range) draagt hetzelfde goud maar is 276 bij 2 pixels zonder
   tekst, dus daar valt niets te lezen.

   TERUGDRAAIEN: dit hele blok weghalen.
   --------------------------------------------------------------------------- */
.single_add_to_cart_button,
.add-to-cart-loop,
.wd-add-btn > a,
.btn-accent,
.wd-sticky-add-to-cart,
.wc-backward,
.wd-product-filters button.button,
.widget button.button,
.checkout-button,
#place_order,
.woocommerce-checkout-payment .button.alt,
.wd-cart-number,
.wd-tools-count,
.onsale.product-label,
.page-numbers.current,
/* De twee gouden Elementor-knoppen op de homepage, op hun wrapper-id gepakt.
   Gemeten en met tegenproef: deze twee ids dragen geen andere knoppen, en de
   zes doorzichtige SHOP NOW-knoppen elders blijven dus ongemoeid. */
.elementor-element-8adf425 .elementor-button,
.elementor-element-9dce977 .elementor-button,
.elementor-element-8adf425 .elementor-button-text,
.elementor-element-9dce977 .elementor-button-text {
    color: #0d0d0d !important;
}

.single_add_to_cart_button *,
.add-to-cart-loop *,
.wd-add-btn > a *,
.btn-accent *,
.wd-sticky-add-to-cart *,
.wc-backward *,
.wd-product-filters button.button *,
.widget button.button *,
.checkout-button *,
#place_order *,
.woocommerce-checkout-payment .button.alt * {
    color: #0d0d0d !important;
}

/* ---------------------------------------------------------------------------
   TT SCHUINE SNEDE 22-09-2026  (tt-schuine-snede)

   Variant A, gekozen door Martijn uit drie gradaties die op de echte pagina
   gerenderd waren. De knop krijgt een parallellogramvorm in plaats van
   afgeronde hoeken.

   WAT HET KOST, en dat is gemeten met een raster van 1.440 punten per knop:
   een clip-path knipt ook de KLIKZONE weg, niet alleen het beeld. Variant A
   kost 3,9 procent van het aanklikbare oppervlak, B zou 6 procent kosten en
   C 8,9 procent. De knop wordt hier NIET hoger, dus dat verlies wordt nergens
   goedgemaakt.

   WAAROM min(10px, 4%): op een brede knop blijft de snede 10 px, op een smalle
   tegelknop van 153 px wordt hij ruim 6 px. Een vaste 10 px zou daar te veel
   van de tekst opeten.

   DIT LEVERT GEEN MEETBARE OMZET OP en is een merkkeuze. Zie
   [[reference_knopvorm_heeft_geen_bewezen_effect]].

   TERUGDRAAIEN: dit hele blok weghalen.
   --------------------------------------------------------------------------- */
.single_add_to_cart_button,
.add-to-cart-loop,
.wd-add-btn > a,
.checkout-button,
#place_order,
.woocommerce-checkout-payment .button.alt {
    border-radius: 0 !important;
    clip-path: polygon(min(10px, 4%) 0, 100% 0, calc(100% - min(10px, 4%)) 100%, 0 100%) !important;
}

/* ---------------------------------------------------------------------------
   TT AANRAAKMATEN 28-09-2026  (tt-aanraakmaten)

   Gevonden door Webshop/_build/schermcheck.mjs op alle negen aanraakmaten, op
   elke pagina: het zoekveld heeft een letter van 14 pixels, en daaronder zoomt
   een iPhone vanzelf in zodra iemand erop tikt, waarna de klant zelf terug moet
   knijpen. Het zoekveld in de kop was bovendien 40 pixels hoog en de knop
   "Return To Shop" in de lege winkelwagenlade 36 pixels, onder de 44 die een
   duim nodig heeft. Alles van het thema Woodmart.

   Alleen op aanraakschermen (hover: none en pointer: coarse), dus de desktop
   blijft precies zoals hij is.

   TERUGDRAAIEN: dit hele blok weghalen.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .searchform input.s {
        font-size: 16px !important;
    }
    .wd-header-search-form-mobile .searchform input.s {
        height: 44px !important;
        min-height: 44px !important;
    }
    .wd-empty-mini-cart .wc-backward {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 44px !important;
        padding: 10px 20px !important;
    }
}

/* ---------------------------------------------------------------------------
   TT TABLETWEERGAVE 01-10-2026  (tt-tabletweergave)

   WAAROM. Debora zag dat de site er op een tablet nog steeds niet goed uitzag. Gemeten
   op 768, 820, 834, 912, 1024 en 1180 breed: nergens schuift of valt iets af, maar
   tussen 769 en 1024 gebruikt Elementor zijn tabletinstellingen en die waren op vijf
   plekken nooit afgemaakt. Martijn koos op 01-10-2026 na een voor-en-na op de echte
   pagina tegels C en voettekst F2, en gaf de vier reparaties vrij.

   WAT HIER STAAT, in vijf stukken:
   1. Achtergrondfoto's achter The Origins of The Trace (198f85b) en Get 10% off
      (d2ea9a0): in post-1887.css staan ze op tablet op background-size 0px auto, dus
      onzichtbaar. Hier op cover, zoals op telefoon en computer.
   2. Bovenbalk 42268 tussen 901 en 1024: dezelfde kolomindeling als tt-bovenbalk-tablet
      tot 900 al heeft. Daarboven stond de lange kop op twee regels en SEE THE PRIZE op
      drie. Die regels staan bewust HIER en niet in dat blok, zodat deze ronde in een
      keer terug te draaien is.
   3. De links onderaan (icon-list 0885a7c in voettekst 31092): Elementor laadt
      custom-widget-icon-list.min.css alleen op de homepage, dus overal anders kwam de
      kale lijst met bolletjes. Hier Elementors eigen regels, elk met .elementor-31092
      ervoor zodat ze alleen in de voettekst gelden en de regels uit post-31092.css
      (altijd een klasse meer) blijven winnen. Nagemeten op 390, 820, 1024, 1180 en
      1440: op een productpagina tot op de pixel gelijk aan de homepage.
   4. Kassakoopje bij afrekenen: tussen 769 en circa 870 stak de prijs 10 pixels uit
      zijn vak. Nu zakt hij naar een eigen regel als hij niet past.
   5. Tegels C (alleen 769 tot 959, want vanaf 960 past de knop in de bestaande vorm)
      en voettekst F2 (769 tot 1024).

   GEMETEN BUITEN DE BAND: op 360, 390, 768, 1025, 1280 en 1440 verschuift er niets,
   op de onderste voettekstrij van niet-homepagina's na, die korter wordt omdat de
   links weer op een regel staan.

   TERUGDRAAIEN: dit hele blok weghalen, of _build/deploy-tabletweergave-01-10-2026.mjs
   met --terug.
   --------------------------------------------------------------------------- */
/* 1. achtergrondfoto's */
@media (min-width: 769px) and (max-width: 1024px) {
    body .elementor-1887 .elementor-element.elementor-element-198f85b:not(.elementor-motion-effects-element-type-background),
    body .elementor-1887 .elementor-element.elementor-element-198f85b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
    body .elementor-1887 .elementor-element.elementor-element-d2ea9a0:not(.elementor-motion-effects-element-type-background),
    body .elementor-1887 .elementor-element.elementor-element-d2ea9a0 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-size: cover;
    }
}
/* 2. bovenbalk 901 tot 1024 */
@media (min-width: 901px) and (max-width: 1024px) {
    body .elementor-42268 .elementor-element.elementor-element-507eb01 {
        --flex-direction: column;
        --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
        --container-widget-height: initial;
        --container-widget-flex-grow: 0;
        --container-widget-align-self: initial;
        --justify-content: center;
        --align-items: center;
        --gap: 6px 6px;
        --row-gap: 6px;
        --column-gap: 6px;
        --padding-top: 6px;
        --padding-bottom: 6px;
        --padding-left: 6px;
        --padding-right: 6px;
    }
    body .elementor-42268 .elementor-element.elementor-element-fff268c { display: none; }
    body .elementor-42268 .elementor-element.elementor-element-25b744e { display: block; text-align: center; }
    body .elementor-42268 .elementor-element.elementor-element-25b744e .elementor-heading-title { font-size: 19px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 {
        --container-widget-width: auto;
        width: auto;
        max-width: 100%;
        align-self: center;
    }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-timer { gap: 4px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-timer-value { font-size: 18px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-timer-text { font-size: 10px; }
    body .elementor-42268 .elementor-element.elementor-element-efff610 .wd-item { min-height: 24px; }
    body .elementor-42268 .elementor-element.elementor-element-9c727d0 .elementor-button { padding: 8px 8px 8px 8px; }
    body .elementor-42268 .elementor-element.elementor-element-9c727d0 .elementor-button .elementor-button-content-wrapper { justify-content: center; }
}
/* 3. links onderaan in de voettekst, Elementors eigen regels */
.elementor-31092 .elementor-widget.elementor-icon-list--layout-inline .elementor-widget-container,.elementor-31092 .elementor-widget:not(:has(.elementor-widget-container)) .elementor-widget-container{overflow:hidden}
.elementor-31092 .elementor-widget .elementor-icon-list-items.elementor-inline-items{display:flex;flex-wrap:wrap;margin-inline:-8px}
.elementor-31092 .elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-inline-item{word-break:break-word}
.elementor-31092 .elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:8px}
.elementor-31092 .elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{border-width:0;border-inline-start-width:1px;border-style:solid;height:100%;inset-inline-end:-8px;inset-inline-start:auto;position:relative;width:auto}
.elementor-31092 .elementor-widget .elementor-icon-list-items{list-style-type:none;margin:0;padding:0}
.elementor-31092 .elementor-widget .elementor-icon-list-item{margin:0;padding:0;position:relative}
.elementor-31092 .elementor-widget .elementor-icon-list-item:after{inset-block-end:0;position:absolute;width:100%}
.elementor-31092 .elementor-widget .elementor-icon-list-item,.elementor-31092 .elementor-widget .elementor-icon-list-item a{align-items:var(--icon-vertical-align,center);display:flex;font-size:inherit}
.elementor-31092 .elementor-widget .elementor-icon-list-icon+.elementor-icon-list-text{align-self:center;padding-inline-start:5px}
.elementor-31092 .elementor-widget .elementor-icon-list-icon{display:flex;inset-block-start:var(--icon-vertical-offset,initial);position:relative}
.elementor-31092 .elementor-widget .elementor-icon-list-icon svg{height:var(--e-icon-list-icon-size,1em);width:var(--e-icon-list-icon-size,1em)}
.elementor-31092 .elementor-widget .elementor-icon-list-icon i{font-size:var(--e-icon-list-icon-size);width:1.25em}
.elementor-31092 .elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon{text-align:var(--e-icon-list-icon-align)}
.elementor-31092 .elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg{margin:var(--e-icon-list-icon-margin,0 calc(var(--e-icon-list-icon-size, 1em) * .25) 0 0)}
.elementor-31092 .elementor-widget.elementor-list-item-link-full_width a{width:100%}
.elementor-31092 .elementor-widget.elementor-align-center .elementor-icon-list-item,.elementor-31092 .elementor-widget.elementor-align-center .elementor-icon-list-item a{justify-content:center}
.elementor-31092 .elementor-widget.elementor-align-center .elementor-icon-list-item:after{margin:auto}
.elementor-31092 .elementor-widget.elementor-align-center .elementor-inline-items{justify-content:center}
.elementor-31092 .elementor-widget.elementor-align-start .elementor-icon-list-item,.elementor-31092 .elementor-widget.elementor-align-start .elementor-icon-list-item a{justify-content:start;text-align:start}
.elementor-31092 .elementor-widget.elementor-align-start .elementor-inline-items{justify-content:start}
.elementor-31092 .elementor-widget.elementor-align-end .elementor-icon-list-item,.elementor-31092 .elementor-widget.elementor-align-end .elementor-icon-list-item a{justify-content:end;text-align:end}
.elementor-31092 .elementor-widget.elementor-align-end .elementor-icon-list-items{justify-content:end}
.elementor-31092 .elementor-widget:not(.elementor-align-end) .elementor-icon-list-item:after{inset-inline-start:0}
.elementor-31092 .elementor-widget:not(.elementor-align-start) .elementor-icon-list-item:after{inset-inline-end:0}
.elementor-31092 .elementor-element ul.elementor-icon-list-items{padding:0}
/* 4. kassakoopje */
@media (min-width: 769px) and (max-width: 1024px) {
    .order-bump-product-title { flex-wrap: wrap; row-gap: 8px; }
    .order-bump-product-title .order-bump-product-price { margin-left: auto; }
}
/* 5a. categorietegels, drie per rij (variant C) */
@media (min-width: 769px) and (max-width: 959px) {
    body .elementor-1887 .elementor-element.elementor-element-62b0eae { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    body .elementor-1887 .elementor-element.elementor-element-372cc04,
    body .elementor-1887 .elementor-element.elementor-element-370a84a,
    body .elementor-1887 .elementor-element.elementor-element-c0174ac,
    body .elementor-1887 .elementor-element.elementor-element-b18ec56,
    body .elementor-1887 .elementor-element.elementor-element-5939971,
    body .elementor-1887 .elementor-element.elementor-element-41b436d { display: contents !important; }
    body .elementor-1887 .elementor-element.elementor-element-0f33d76,
    body .elementor-1887 .elementor-element.elementor-element-e4bc96c,
    body .elementor-1887 .elementor-element.elementor-element-d5c9e46,
    body .elementor-1887 .elementor-element.elementor-element-6dadba4,
    body .elementor-1887 .elementor-element.elementor-element-0994bb4,
    body .elementor-1887 .elementor-element.elementor-element-f3a91c2 { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
    body .elementor-1887 .elementor-element.elementor-element-0f33d76 .elementor-cta__content,
    body .elementor-1887 .elementor-element.elementor-element-e4bc96c .elementor-cta__content,
    body .elementor-1887 .elementor-element.elementor-element-d5c9e46 .elementor-cta__content,
    body .elementor-1887 .elementor-element.elementor-element-6dadba4 .elementor-cta__content,
    body .elementor-1887 .elementor-element.elementor-element-0994bb4 .elementor-cta__content,
    body .elementor-1887 .elementor-element.elementor-element-f3a91c2 .elementor-cta__content { min-height: 300px !important; }
    body .elementor-1887 .elementor-element-62b0eae .elementor-cta__title { font-size: 22px !important; }
    body .elementor-1887 .elementor-element-62b0eae .elementor-cta__button { white-space: nowrap; }
    body .elementor-1887 .elementor-element-62b0eae .elementor-cta__bg { background-position: center top !important; }
}
/* 5b. voettekst, logo boven en drie kolommen (variant F2) */
@media (min-width: 769px) and (max-width: 1024px) {
    body .elementor-31092 .elementor-element.elementor-element-7e735b09 { width: 100%; }
    body .elementor-31092 .elementor-element.elementor-element-7e735b09 > .elementor-element-populated { margin: 0 0 30px 0; --e-column-margin-right: 0; }
    body .elementor-31092 .elementor-element.elementor-element-701f386c { max-width: 560px; }
    body .elementor-31092 .elementor-element.elementor-element-5583ac1a,
    body .elementor-31092 .elementor-element.elementor-element-5dccccbf,
    body .elementor-31092 .elementor-element.elementor-element-1024c13b { width: 33.333%; }
    body .elementor-31092 .elementor-element.elementor-element-5583ac1a > .elementor-element-populated { margin: 0; --e-column-margin-left: 0; }
}