.elementor-2170 .elementor-element.elementor-element-908918a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}.elementor-2170 .elementor-element.elementor-element-6fe7c1b{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--gap:20px 20px;--row-gap:20px;--column-gap:20px;--grid-auto-flow:row;--margin-top:0px;--margin-bottom:64px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:32px;--padding-right:32px;--z-index:10;}.elementor-2170 .elementor-element.elementor-element-6fe7c1b:not(.elementor-motion-effects-element-type-background), .elementor-2170 .elementor-element.elementor-element-6fe7c1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ac54a31 );}.elementor-2170 .elementor-element.elementor-element-71aa525{--display:flex;}.elementor-2170 .elementor-element.elementor-element-69cf6cc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-2170 .elementor-element.elementor-element-e709038{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:020px;--margin-left:0px;--margin-right:0px;}.elementor-2170 .elementor-element.elementor-element-1044c90{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:16px 16px 0px 0px;--padding-top:24px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-2170 .elementor-element.elementor-element-47252b2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -10px) 0px;}.elementor-2170 .elementor-element.elementor-element-47252b2 .jet-listing-dynamic-field__content{font-size:36px;line-height:40px;text-align:left;}.elementor-2170 .elementor-element.elementor-element-c8f8fac{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:4px 4px;--row-gap:4px;--column-gap:4px;}.elementor-2170 .elementor-element.elementor-element-6a7a929 .jet-listing-dynamic-field__content{color:var( --e-global-color-primary );font-size:13px;font-weight:600;letter-spacing:-0.5px;text-align:left;}.elementor-2170 .elementor-element.elementor-element-d338594 .jet-listing-dynamic-field__content{color:var( --e-global-color-primary );font-size:13px;font-weight:400;letter-spacing:-0.5px;text-align:left;}.elementor-2170 .elementor-element.elementor-element-cbc8db3{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.elementor-2170 .elementor-element.elementor-element-cbc8db3 .jet-listing-dynamic-field__content{color:var( --e-global-color-primary );font-family:"Google Sans Flex", Sans-serif;font-size:32px;font-weight:600;text-align:left;}.elementor-2170 .elementor-element.elementor-element-d150012{margin:-8px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-6a934cd > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-2170 .elementor-element.elementor-element-6a934cd .jet-listing-dynamic-repeater__items{flex-direction:column;justify-content:flex-start;}.elementor-2170 .elementor-element.elementor-element-6a934cd .jet-listing-dynamic-repeater__item > *{justify-content:flex-start;font-family:"Google Sans Flex", Sans-serif;font-size:15px;font-weight:400;}.elementor-2170 .elementor-element.elementor-element-00d5f09{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-2170 .elementor-element.elementor-element-27d6c61{margin:12px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-d4d8d7f .cart button, .elementor-2170 .elementor-element.elementor-element-d4d8d7f .cart .button{border-style:none;background-color:var( --e-global-color-accent );transition:all 0.2s;}.elementor-2170 .elementor-element.elementor-element-d4d8d7f .quantity .qty{transition:all 0.2s;}.elementor-2170 .elementor-element.elementor-element-f2b4221{--display:flex;--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2170 .elementor-element.elementor-element-cfd21ba{--display:flex;}.elementor-2170 .elementor-element.elementor-element-197013a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--flex-wrap:wrap;}.elementor-2170 .elementor-element.elementor-element-af404d1{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--gap:8px 8px;--row-gap:8px;--column-gap:8px;--grid-auto-flow:row;}.elementor-2170 .elementor-element.elementor-element-64ea622{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2170 .elementor-element.elementor-element-208b067{--display:flex;--justify-content:center;}.elementor-2170 .elementor-element.elementor-element-2700a5b{padding:7px 0px 0px 0px;}.elementor-2170 .elementor-element.elementor-element-2700a5b .elementor-icon-wrapper{text-align:center;}.elementor-2170 .elementor-element.elementor-element-2700a5b .elementor-icon{font-size:36px;}.elementor-2170 .elementor-element.elementor-element-2700a5b .elementor-icon svg{height:36px;}.elementor-2170 .elementor-element.elementor-element-2700a5b .elementor-icon-wrapper svg{width:auto;}.elementor-2170 .elementor-element.elementor-element-8c8f23f{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2170 .elementor-element.elementor-element-2790f99{margin:4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-2790f99 .elementor-heading-title{font-family:"Google Sans Flex", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-primary );}.elementor-2170 .elementor-element.elementor-element-9e82228 .jet-listing-dynamic-terms{text-align:left;}.elementor-2170 .elementor-element.elementor-element-9e82228 .jet-listing-dynamic-terms__link{font-family:"Domine", Sans-serif;font-size:13px;color:var( --e-global-color-text );}.elementor-2170 .elementor-element.elementor-element-b1bd0dc{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2170 .elementor-element.elementor-element-6d67d9f{--display:flex;--justify-content:center;}.elementor-2170 .elementor-element.elementor-element-48693e8{padding:7px 0px 0px 0px;}.elementor-2170 .elementor-element.elementor-element-48693e8 .elementor-icon-wrapper{text-align:center;}.elementor-2170 .elementor-element.elementor-element-48693e8 .elementor-icon{font-size:36px;}.elementor-2170 .elementor-element.elementor-element-48693e8 .elementor-icon svg{height:36px;}.elementor-2170 .elementor-element.elementor-element-48693e8 .elementor-icon-wrapper svg{width:auto;}.elementor-2170 .elementor-element.elementor-element-98d9b80{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2170 .elementor-element.elementor-element-1a24a5b{margin:4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-1a24a5b .elementor-heading-title{font-family:"Google Sans Flex", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-primary );}.elementor-2170 .elementor-element.elementor-element-7af2660 .jet-listing-dynamic-terms{text-align:left;}.elementor-2170 .elementor-element.elementor-element-7af2660 .jet-listing-dynamic-terms__link{font-family:"Domine", Sans-serif;font-size:13px;color:var( --e-global-color-text );}.elementor-2170 .elementor-element.elementor-element-8cb1c65{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2170 .elementor-element.elementor-element-0efefdd{--display:flex;--justify-content:center;}.elementor-2170 .elementor-element.elementor-element-0284cc7{padding:7px 0px 0px 0px;}.elementor-2170 .elementor-element.elementor-element-0284cc7 .elementor-icon-wrapper{text-align:center;}.elementor-2170 .elementor-element.elementor-element-0284cc7 .elementor-icon{font-size:36px;}.elementor-2170 .elementor-element.elementor-element-0284cc7 .elementor-icon svg{height:36px;}.elementor-2170 .elementor-element.elementor-element-0284cc7 .elementor-icon-wrapper svg{width:auto;}.elementor-2170 .elementor-element.elementor-element-cfd891a{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2170 .elementor-element.elementor-element-f4f123d{margin:4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-f4f123d .elementor-heading-title{font-family:"Google Sans Flex", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-primary );}.elementor-2170 .elementor-element.elementor-element-5a840a6 .jet-listing-dynamic-terms{text-align:left;}.elementor-2170 .elementor-element.elementor-element-5a840a6 .jet-listing-dynamic-terms__link{font-family:"Domine", Sans-serif;font-size:13px;color:var( --e-global-color-text );}.elementor-2170 .elementor-element.elementor-element-76d0fb5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2170 .elementor-element.elementor-element-d60ef45{--display:flex;--justify-content:center;}.elementor-2170 .elementor-element.elementor-element-195adb2{padding:7px 0px 0px 0px;}.elementor-2170 .elementor-element.elementor-element-195adb2 .elementor-icon-wrapper{text-align:center;}.elementor-2170 .elementor-element.elementor-element-195adb2 .elementor-icon{font-size:36px;}.elementor-2170 .elementor-element.elementor-element-195adb2 .elementor-icon svg{height:36px;}.elementor-2170 .elementor-element.elementor-element-195adb2 .elementor-icon-wrapper svg{width:auto;}.elementor-2170 .elementor-element.elementor-element-febbfda{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2170 .elementor-element.elementor-element-5d5e9be{margin:4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-5d5e9be .elementor-heading-title{font-family:"Google Sans Flex", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-primary );}.elementor-2170 .elementor-element.elementor-element-36941ac .jet-listing-dynamic-terms{text-align:left;}.elementor-2170 .elementor-element.elementor-element-36941ac .jet-listing-dynamic-terms__link{font-family:"Domine", Sans-serif;font-size:13px;color:var( --e-global-color-text );}.elementor-2170 .elementor-element.elementor-element-c9726cd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2170 .elementor-element.elementor-element-35abce8{--display:flex;--justify-content:center;}.elementor-2170 .elementor-element.elementor-element-b280b95{padding:7px 0px 0px 0px;}.elementor-2170 .elementor-element.elementor-element-b280b95 .elementor-icon-wrapper{text-align:center;}.elementor-2170 .elementor-element.elementor-element-b280b95 .elementor-icon{font-size:36px;}.elementor-2170 .elementor-element.elementor-element-b280b95 .elementor-icon svg{height:36px;}.elementor-2170 .elementor-element.elementor-element-b280b95 .elementor-icon-wrapper svg{width:auto;}.elementor-2170 .elementor-element.elementor-element-84695e0{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2170 .elementor-element.elementor-element-809d196{margin:4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-809d196 .elementor-heading-title{font-family:"Google Sans Flex", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-primary );}.elementor-2170 .elementor-element.elementor-element-fd9ea00 .jet-listing-dynamic-terms{text-align:left;}.elementor-2170 .elementor-element.elementor-element-fd9ea00 .jet-listing-dynamic-terms__link{font-family:"Domine", Sans-serif;font-size:13px;color:var( --e-global-color-text );}.elementor-2170 .elementor-element.elementor-element-d00f27e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2170 .elementor-element.elementor-element-cfe703a{--display:flex;--justify-content:center;}.elementor-2170 .elementor-element.elementor-element-f3b2ac0{padding:7px 0px 0px 0px;}.elementor-2170 .elementor-element.elementor-element-f3b2ac0 .elementor-icon-wrapper{text-align:center;}.elementor-2170 .elementor-element.elementor-element-f3b2ac0 .elementor-icon{font-size:36px;}.elementor-2170 .elementor-element.elementor-element-f3b2ac0 .elementor-icon svg{height:36px;}.elementor-2170 .elementor-element.elementor-element-f3b2ac0 .elementor-icon-wrapper svg{width:auto;}.elementor-2170 .elementor-element.elementor-element-2c98026{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2170 .elementor-element.elementor-element-5754394{margin:4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2170 .elementor-element.elementor-element-5754394 .elementor-heading-title{font-family:"Google Sans Flex", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-primary );}.elementor-2170 .elementor-element.elementor-element-5704dd9 .jet-listing-dynamic-terms{text-align:left;}.elementor-2170 .elementor-element.elementor-element-5704dd9 .jet-listing-dynamic-terms__link{font-family:"Domine", Sans-serif;font-size:13px;color:var( --e-global-color-text );}.elementor-2170 .elementor-element.elementor-element-976a19a{--display:flex;}.elementor-2170 .elementor-element.elementor-element-c8c7b36 .jet-listing-dynamic-field__content{font-family:"Domine", Sans-serif;font-size:14px;line-height:24px;text-align:left;}.elementor-2170 .elementor-element.elementor-element-18a4e85{--display:flex;}.elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__items{--columns:4;}:is( .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .swiper-lib > .swiper-wrapper, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__items, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__slider > .jet-listing-grid__items > .slick-list > .slick-track, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__scroll-slider > .jet-listing-grid__items ) > .jet-listing-grid__item{padding-left:calc(6px / 2);padding-right:calc(6px / 2);}:is( .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__slider.slick-lib, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__scroll-slider ) > .jet-listing-grid__items{margin-left:calc( 6px / -2);margin-right:calc( 6px / -2);width:calc(100% + 6px);}.elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid:has( > .jet-listing-grid__slider.swiper-lib ){margin-left:calc( 6px / -2);margin-right:calc( 6px / -2);}:is( .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__slider.swiper-lib > .jet-listing-grid__items, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__items, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__slider > .jet-listing-grid__items > .slick-list > .slick-track, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__scroll-slider > .jet-listing-grid__items ) > .jet-listing-grid__item{padding-top:calc(8px / 2);padding-bottom:calc(8px / 2);}:is( .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__slider, .elementor-2170 .elementor-element.elementor-element-19c7793 > .jet-listing-grid > .jet-listing-grid__scroll-slider ) > .jet-listing-grid__items.grid-collapse-gap{margin-top:calc( 8px / -2);margin-bottom:calc( 8px / -2);}.elementor-2170 .elementor-element.elementor-element-43927b7{--display:flex;}.elementor-2170 .elementor-element.elementor-element-52c1be0{--n-accordion-title-font-size:19px;--n-accordion-title-justify-content:initial;--n-accordion-title-flex-grow:initial;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;}.elementor-2170 .elementor-element.elementor-element-52c1be0 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:1px 0px 0px 0px;border-color:#E6E4DF;}.elementor-2170 .elementor-element.elementor-element-52c1be0 {--n-accordion-padding:20px 0px 20px 0px;}:where( .elementor-2170 .elementor-element.elementor-element-52c1be0 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Google Sans Flex", Sans-serif;font-weight:500;}:where( .elementor-2170 .elementor-element.elementor-element-52c1be0 > .e-n-accordion > .e-n-accordion-item ) > .e-con{border-style:none;--padding-top:0px;--padding-right:0px;--padding-bottom:20px;--padding-left:0px;}@media(min-width:768px){.elementor-2170 .elementor-element.elementor-element-e709038{--width:100%;}.elementor-2170 .elementor-element.elementor-element-208b067{--width:60px;}.elementor-2170 .elementor-element.elementor-element-6d67d9f{--width:60px;}.elementor-2170 .elementor-element.elementor-element-0efefdd{--width:60px;}.elementor-2170 .elementor-element.elementor-element-d60ef45{--width:60px;}.elementor-2170 .elementor-element.elementor-element-35abce8{--width:60px;}.elementor-2170 .elementor-element.elementor-element-cfe703a{--width:60px;}}@media(max-width:1024px){.elementor-2170 .elementor-element.elementor-element-6fe7c1b{--grid-auto-flow:row;}.elementor-2170 .elementor-element.elementor-element-af404d1{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-2170 .elementor-element.elementor-element-6fe7c1b{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2170 .elementor-element.elementor-element-71aa525{--padding-top:0px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-2170 .elementor-element.elementor-element-69cf6cc{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2170 .elementor-element.elementor-element-e709038{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2170 .elementor-element.elementor-element-1044c90{--border-radius:0px 0px 0px 0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2170 .elementor-element.elementor-element-47252b2 .jet-listing-dynamic-field__content{font-size:19px;}.elementor-2170 .elementor-element.elementor-element-00d5f09{--padding-top:20px;--padding-bottom:32px;--padding-left:16px;--padding-right:16px;}.elementor-2170 .elementor-element.elementor-element-f2b4221{--padding-top:0px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-2170 .elementor-element.elementor-element-af404d1{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for jet-listing-dynamic-field, class: .elementor-element-cbc8db3 */.elementor-2170 .elementor-element.elementor-element-cbc8db3 span:first-child { font-weight: 500!important; font-size: 17px!important; margin-right: 8px; margin-left: 0px; } .elementor-2170 .elementor-element.elementor-element-cbc8db3 span { font-weight: 500!important; font-size: 13px!important; margin-left: 4px; }/* End custom CSS */ /* Start custom CSS for jet-listing-dynamic-repeater, class: .elementor-element-6a934cd */.elementor-2170 .elementor-element.elementor-element-6a934cd .jet-listing-dynamic-repeater__item { display: flex; gap: 8px; } .jet-listing-dynamic-repeater__item img { width: 14px; height: 14px; margin-top: 7px; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6fe7c1b */:is(.elementor-2170 .elementor-element.elementor-element-6fe7c1b, .elementor-2170 .elementor-element.elementor-element-6fe7c1b > .e-con-inner):has(> .pp-rechts) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto) 1fr; column-gap: 64px; row-gap: 0; align-items: start; } :is(.elementor-2170 .elementor-element.elementor-element-6fe7c1b, .elementor-2170 .elementor-element.elementor-element-6fe7c1b > .e-con-inner):has(> .pp-rechts) > * { grid-column: 1; width: auto; max-width: none; } :is(.elementor-2170 .elementor-element.elementor-element-6fe7c1b, .elementor-2170 .elementor-element.elementor-element-6fe7c1b > .e-con-inner):has(> .pp-rechts) > .pp-rechts { grid-column: 2; grid-row: 1 / -1; } @media (max-width: 991px) { :is(.elementor-2170 .elementor-element.elementor-element-6fe7c1b, .elementor-2170 .elementor-element.elementor-element-6fe7c1b > .e-con-inner):has(> .pp-rechts) { grid-template-columns: 1fr; grid-template-rows: none; } :is(.elementor-2170 .elementor-element.elementor-element-6fe7c1b, .elementor-2170 .elementor-element.elementor-element-6fe7c1b > .e-con-inner):has(> .pp-rechts) > * { grid-column: auto; grid-row: auto; } :is(.elementor-2170 .elementor-element.elementor-element-6fe7c1b, .elementor-2170 .elementor-element.elementor-element-6fe7c1b > .e-con-inner):has(> .pp-rechts) > .pp-rechts { display: contents; } }/* End custom CSS */ /* Start custom CSS */.woocommerce-product-attributes { border: 1px solid #ddd; border-collapse: collapse; width: 100%; } .woocommerce-product-attributes th, .woocommerce-product-attributes td { text-align: left; border: 1px solid #ddd; padding: 8px 12px; font-size: 15px; font-family: 'Domine'; } .woocommerce-product-attributes td p { margin: 0; } .eigenschap { width: 100%; border-radius: 0px; padding: 16px 16px; border: 0px solid var( --e-global-color-e8f8c2e ); background: white; } .eigenschappen-icon path { stroke: var( --e-global-color-primary )!important } summary.e-n-accordion-item-title { display: flex; flex-direction: row !important; justify-content: space-between !important; } .eigenschappen-icon { width: 40px; height: 40px; display: flex; flex-direction: row; justify-content: center; align-items: center ; background: var( --e-global-color-44d7d68 ); border: 0px solid var( --e-global-color-e8f8c2e ); } .specification-dynamic-term .jet-listing-dynamic-terms { line-height: 1.2; margin-top: 4px!important; } .specification-dynamic-term .jet-listing-dynamic-terms__link { display: inline; /* of inline-block, zie hieronder */ line-height: 1.2; margin: 0; padding: 0; } .specification-dynamic-term .jet-listing-dynamic-terms__delimiter { line-height: 1.2; } .omschrijving td:before { content: "-"; } /* ========================================================== Mattigo – productformulier (TM Extra Product Options) Stap 02: afmetingen | Stap 03: opvulmat ========================================================== */ /* Fonts: laad ze bij voorkeur via je thema/Elementor. Lukt dat niet, haal dan de comment weg (moet bovenaan de stylesheet staan): @import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600&family=Google+Sans+Flex:wght@400;500;600;700&display=swap'); */ #tm-extra-product-options { --mg-text: #1a1512; --mg-muted: #2f2a26; --mg-accent: #8c6d4f; /* bruine stapnummers */ --mg-line: #d6d4d1; /* randen + scheidingslijnen */ --mg-line-hover: #a9a5a0; --mg-field: #f7f7f7; /* achtergrond velden */ --mg-selected: #ede5da; /* gekozen opvulmat */ --mg-head: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, sans-serif; --mg-body: 'Domine', Georgia, serif; counter-reset: mg-stap 1; /* eerste genummerde stap wordt 02 */ color: var(--mg-text); font-family: var(--mg-body); } /* ---------- Basis reset van de plugin-grid ---------- */ #tm-extra-product-options .tc-row, #tm-extra-product-options .tc-cell { margin: 0; padding: 0; } #tm-extra-product-options ul.tmcp-ul-wrap, #tm-extra-product-options li.tmcp-field-wrap { margin: 0; padding: 0; list-style: none; } /* ---------- Secties + scheidingslijnen ---------- */ #tm-extra-product-options .cpf-section.kies-je-afmeting, #tm-extra-product-options .cpf-section.checkbox { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--mg-line); } /* ---------- Koppen met stapnummer ---------- */ #tm-extra-product-options .kies-je-afmeting .tm-section-label { margin-bottom: 0px; } #tm-extra-product-options .kies-je-afmeting .tc-section-label-text, #tm-extra-product-options .heading-product-page-div .tc-epo-element-label-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; font-family: var(--mg-head); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--mg-text); } /* Info-icoon bij afmetingen staat niet in het ontwerp */ #tm-extra-product-options .kies-je-afmeting .tc-section-label-text a { display: none; } /* Stap 03: sectielabel "Filler mat" verbergen, de header-tekst wordt de kop */ #tm-extra-product-options .cpf-section.checkbox .tm-section-label { display: none; } #tm-extra-product-options .heading-product-page-div { margin-bottom: 0px; } #tm-extra-product-options .heading-product-page-div .tc-epo-element-label-text a { order: 2; display: inline-flex; align-self: center; margin-left: 6px; line-height: 0; } #tm-extra-product-options .heading-product-page-div .tc-epo-element-label-text a img { width: 26px; height: 26px; } /* ========================================================== STAP 02 – Afmetingen ========================================================== */ #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; /* vakken altijd op één lijn, ook als een label afbreekt */ gap: 24px; } #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row::before { content: none; } #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row > .cpf-element { width: auto; max-width: none; flex: none; } /* Breedte links, lengte rechts */ #tm-extra-product-options .product-decimals-width-div { order: 1; } #tm-extra-product-options .product-decimals-length-div { order: 2; } /* Rekenveld onzichtbaar maken (blijft wel werken) */ #tm-extra-product-options #berekeningveld { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Label links, min/max rechts, veld eronder */ #tm-extra-product-options .kies-je-afmeting .cpf-type-textfield .tc-element-inner-wrap > .tc-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; row-gap: 14px; } #tm-extra-product-options .kies-je-afmeting .tm-epo-element-label { grid-column: 1; grid-row: 1; width: auto; font-family: var(--mg-head); font-size: 14px; font-weight: 700; color: var(--mg-text); } #tm-extra-product-options .kies-je-afmeting .tm-epo-required { display: none; } #tm-extra-product-options .kies-je-afmeting .tm-element-description { grid-column: 2; grid-row: 1; width: auto; text-align: right; } #tm-extra-product-options .kies-je-afmeting .tm-element-description p, #tm-extra-product-options .kies-je-afmeting .tm-element-description small { margin: 0; font-family: var(--mg-head); font-size: 13px; font-weight: 400; color: var(--mg-muted); } #tm-extra-product-options .kies-je-afmeting .tc-element-container { grid-column: 1 / -1; grid-row: 2; width: auto; } /* Het invoerveld */ #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner { display: flex; align-items: center; height: 56px; padding: 0 10px; border: 1px solid var(--mg-line); background: var(--mg-field); transition: border-color .15s ease; } #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner:hover { border-color: var(--mg-line-hover); } #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner:focus-within { border-color: var(--mg-text); } #tm-extra-product-options .kies-je-afmeting label.tm-epo-field-label { flex: 1; display: flex; align-items: center; min-width: 0; margin: 0; padding: 0 10px; cursor: text; } /* Eenheid "cm" in het veld */ #tm-extra-product-options .kies-je-afmeting label.tm-epo-field-label::after { content: "cm"; flex: none; font-family: var(--mg-head); font-size: 15px; font-weight: 400; color: var(--mg-muted); } #tm-extra-product-options .kies-je-afmeting input.tmcp-textfield { flex: 1; width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; text-align: center; font-family: var(--mg-head); font-size: 19px; font-weight: 600; color: var(--mg-text); -moz-appearance: textfield; appearance: textfield; } #tm-extra-product-options .kies-je-afmeting input.tmcp-textfield::-webkit-inner-spin-button, #tm-extra-product-options .kies-je-afmeting input.tmcp-textfield::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* − / + knoppen (worden door mattigo-stepper.js toegevoegd) */ #tm-extra-product-options .mg-stepper { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0 0 3px; border: 0; border-radius: 4px; background: transparent; box-shadow: none; color: var(--mg-text); font-family: var(--mg-head); font-size: 32px; font-weight: 400; line-height: 1; cursor: pointer; } /* Geen achtergrond bij hover/klik (overschrijft ook knopstijlen van het thema) */ #tm-extra-product-options .mg-stepper:hover, #tm-extra-product-options .mg-stepper:focus, #tm-extra-product-options .mg-stepper:active { background: transparent; box-shadow: none; color: var(--mg-text); } #tm-extra-product-options .mg-stepper:focus-visible { outline: 2px solid var(--mg-text); outline-offset: 2px; } #tm-extra-product-options .mg-stepper:disabled { opacity: .3; cursor: default; } /* Foutmeldingen van de plugin – zweven onder het veld, zonder het ernaastliggende veld te verschuiven */ #tm-extra-product-options .kies-je-afmeting .cpf-element { position: relative; } #tm-extra-product-options .kies-je-afmeting :is(label, div, span).tm-error, #tm-extra-product-options .kies-je-afmeting :is(label, div, span).error { position: absolute; top: 100%; left: 0; right: 0; display: block; margin: 6px 0 0; padding: 0; font-family: var(--mg-body); font-size: 11px; line-height: 1.4; color: #b3261e; } /* Rode rand om het veld bij een fout */ #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner:has(input.tm-error, input.error) { border-color: #b3261e; } /* ========================================================== STAP 03 – Opvulmat (tegels) ========================================================== */ #tm-extra-product-options .cpf-section.checkbox ul.tm-element-ul-checkbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox > li.tmcp-field-wrap { width: auto; max-width: none; flex: none; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox .tmcp-field-wrap-inner, #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox .tc-field-label-wrap { width: 100%; max-width: none; margin: 0; padding: 0; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label { position: relative; display: flex; align-items: center; justify-content: center; height:56px; margin: 0; padding: 0 12px; border: 1px solid var(--mg-line); background: var(--mg-field); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label:hover { border-color: var(--mg-line-hover); } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label:has(input:checked) { border-color: var(--mg-text); background: var(--mg-selected); } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label:has(input:focus-visible) { outline: 2px solid var(--mg-text); outline-offset: 3px; } /* Vinkje zelf verbergen (blijft toegankelijk) */ #tm-extra-product-options .cpf-section.checkbox .tc-input-wrap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } #tm-extra-product-options .cpf-section.checkbox .tc-label-wrap, #tm-extra-product-options .cpf-section.checkbox .tc-label, #tm-extra-product-options .cpf-section.checkbox .tc-label-inner { display: block; width: auto; max-width: none; margin: 0; padding: 0; text-align: center; } #tm-extra-product-options .cpf-section.checkbox .tc-label-text { font-family: var(--mg-head); font-size: 15px; font-weight: 600; color: var(--mg-text); } /* Melding over levertijd */ #tm-extra-product-options .melding2-div { margin-top: 20px; margin-bottom: -20px; } #tm-extra-product-options .melding2-div .tc-epo-element-label-text { font-family: var(--mg-body); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--mg-muted); } /* ========================================================== Mobiel ========================================================== */ @media (max-width: 600px) { #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row { grid-template-columns: 1fr; gap: 20px; } #tm-extra-product-options .kies-je-afmeting .tm-epo-element-label, #tm-extra-product-options .kies-je-afmeting .tm-element-description small { font-size: 17px; } #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner, #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label { height: 64px; } #tm-extra-product-options .cpf-section.checkbox ul.tm-element-ul-checkbox { gap: 10px; } #tm-extra-product-options .cpf-section.checkbox .tc-label-text { font-size: 18px; } } .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell { margin-top: -32px !important; } .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell .product-price, .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell .tm-options-totals, .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell .tm-options-totals { display: none!important; } /* ========================================================== Totaalregels upsell – label en prijs op één grijze rij Alleen binnen .rubbermatten-upsell ========================================================== */ .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals { display: grid !important; grid-template-columns: 1fr auto; row-gap: 8px; column-gap: 0; width: 100%; margin: 0; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dt, .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dd { display: flex; align-items: center; align-self: stretch; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 14px 16px; background: #ECE5DD; font-family: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, sans-serif; font-size: 15px !important; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dt { padding-right: 8px; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dd { justify-content: flex-end; padding-left: 8px; text-align: right; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dd * { margin: 0; font-family: inherit; font-size: 15px; } /* Upsell: totaal boven de scheidingslijn */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .cpf-section.kies-je-afmeting { border-bottom: 0; margin-bottom: 0; padding-bottom: 24px; /* ruimte tussen velden en totaalbalk */ } /* Upsell: geen lijn meer onder de prijs… */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .tc-totals-form { padding-bottom: 0; margin-bottom: 16px; /* ruimte tussen prijsbalk en aantal-kiezer */ border-bottom: 0; } /* …maar onder de aantal-kiezer */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .tm-quantity-alt { display: block; width: 100%; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--mg-line); } .cpf-section.rubbermatten-upsell .tm-epo-totals { margin-top: -20px!important; margin-bottom: -20px!important; padding: 0!important; } #tm-extra-product-options .cpf-section.rubbermatten-upsell .kies-je-afmeting .tc-section-label-text { font-size: 17px!important; } .berekeningveld { display: none!important; } /* ========================================================== Upsell – aantal-kiezer als pil met rand ========================================================== */ .cpf-section.rubbermatten-upsell .tm-quantity-alt .quantity.mg-qty { display: inline-flex !important; align-items: center; justify-content: space-between; gap: 4px; height: 48px; min-width: 146px; width: 146px; margin: 0; padding: 0 6px; border: 1px solid #d6d4d1; border-radius: 999px; background: transparent; } .cpf-section.rubbermatten-upsell .tm-quantity-alt .quantity.mg-qty:focus-within { border-color: #1a1512; } /* Het getal */ .cpf-section.rubbermatten-upsell .tm-quantity-alt .mg-qty input.tm-qty-alt { width: 36px; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; text-align: center; font-family: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, sans-serif; font-size: 18px; font-weight: 600; color: #1a1512; -moz-appearance: textfield; appearance: textfield; } .cpf-section.rubbermatten-upsell .tm-quantity-alt .mg-qty input.tm-qty-alt::-webkit-inner-spin-button, .cpf-section.rubbermatten-upsell .tm-quantity-alt .mg-qty input.tm-qty-alt::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* − en + */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .mg-stepper--qty { width: 36px; height: 36px; padding: 0 0 2px; border-radius: 999px; font-size: 22px; } /* Aantal-kiezer upsell: −, getal en + naast elkaar (overschrijft de plugin) */ .woocommerce div.product .tm-extra-product-options .cpf-section.rubbermatten-upsell .tm-quantity-alt .quantity.mg-qty { display: inline-flex !important; align-items: center; } .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell button.single_add_to_cart_product.button { display: none!important; } /* ========================================================= Kleurkeuze – Iconic WLV variaties in "01 Choose your colour"-stijl (!important waar nodig om de plugin-CSS te overrulen) ========================================================= */ /* Tabel-layout uitschakelen */ table.iconic-wlv-variations { width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse; counter-reset: wlv-step; } table.iconic-wlv-variations tbody, table.iconic-wlv-variations tr, table.iconic-wlv-variations td { display: block !important; width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; } /* Rij = één stap, met scheidingslijnen */ table.iconic-wlv-variations tr.iconic-wlv-variations__row { counter-increment: wlv-step; padding: 40px 0 40px !important; border-top: 1px solid #e2e2e2 !important; border-bottom: 1px solid #e2e2e2 !important; margin-bottom: 32px; } table.iconic-wlv-variations tr.iconic-wlv-variations__row + tr.iconic-wlv-variations__row { border-top: 0 !important; } /* Kop: stapnummer + titel */ table.iconic-wlv-variations td.iconic-wlv-variations__label { display: flex !important; align-items: baseline; gap: 14px; margin-bottom: 26px !important; } table.iconic-wlv-variations td.iconic-wlv-variations__label::before { content: counter(wlv-step, decimal-leading-zero); font-size: 18px; font-weight: 500; color: #8b6a4a; } table.iconic-wlv-variations strong.iconic-wlv-variations__label { font-size: 24px; font-weight: 500; line-height: 1.1; color: #141414; } table.iconic-wlv-variations .iconic-wlv-variations__colon, table.iconic-wlv-variations .iconic-wlv-variations__selection { display: none !important; } /* ---------- Swatches ---------- */ table.iconic-wlv-variations ul.iconic-wlv-terms { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; overflow: visible !important; } table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; min-width: 64px !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: none !important; overflow: visible !important; opacity: 1; } /* Eventuele plugin-indicatoren weghalen */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term::before, table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content::before, table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content::after { content: none !important; display: none !important; } /* Het vierkant zelf */ table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content { position: static !important; display: block !important; box-sizing: border-box !important; flex: 0 0 64px !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; margin: 0 !important; padding: 4px !important; border: 2px solid transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: hidden !important; transition: border-color .2s ease; } table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content img { position: static !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; transform: none !important; } /* Hover, focus, actief */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term:hover .iconic-wlv-terms__term-content { border-color: #c4c4c4 !important; } table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content--link:focus-visible { outline: none !important; border-color: #8b6a4a !important; } table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term--current .iconic-wlv-terms__term-content, table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term--current:hover .iconic-wlv-terms__term-content { border-color: #141414 !important; } /* Kleurnaam onder de swatch */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term::after { content: attr(data-iconic-wlv-term-label) !important; position: static !important; display: block !important; width: auto !important; height: auto !important; margin-top: 12px !important; border: 0 !important; background: none !important; font-size: 15px; line-height: 1.2; text-align: center; color: #141414; white-space: nowrap; transform: none !important; } /* Niet op voorraad */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term--outofstock { opacity: .4; } /* Mobiel */ @media (max-width: 600px) { table.iconic-wlv-variations strong.iconic-wlv-variations__label { font-size: 28px; } table.iconic-wlv-variations ul.iconic-wlv-terms { gap: 14px !important; } table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term { flex-basis: 80px !important; width: 80px !important; } table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content { width: 80px !important; height: 80px !important; } } /* ========================================================= Upsells – "04 Maak je bestelling compleet" kaarten Werkt samen met upsells.js (die de kaart-markup opbouwt) ========================================================= */ /* Originele EPO-weergave verbergen (inputs blijven in het formulier) */ .cpf-section.upsell-rij.mg-upsell-ready > .tc-section-inner-wrap { display: none !important; } /* Lijst-items van de upsells netjes onder elkaar */ li.tm-extra-product-options-field:has(> .upsell-rij.mg-upsell-ready) { margin: 0 0 12px !important; padding: 0 !important; } /* Lettertype voor kop en kaarten */ li.mg-upsell-heading, .mg-upsell-card, .mg-upsell-card * { font-family: "Google Sans Flex", "Google Sans", sans-serif !important; } /* ---------- Kop ---------- */ li.mg-upsell-heading { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 12px; width: 100%; margin: 0 0 20px !important; padding: 0 !important; list-style: none !important; } .mg-upsell-heading__step { font-size: 16px; font-weight: 500; color: #8b6a4a; } .mg-upsell-heading__title { margin: 0 !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.1 !important; color: #141414; } .mg-upsell-heading__suffix { margin-left: 2px; font-size: 15px; font-weight: 400; } /* ---------- Kaart ---------- */ .mg-upsell-card { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid #d9d9d9; background: transparent; transition: border-color .2s ease; } .mg-upsell-card.is-active { border-color: #141414; } .mg-upsell-card__media { flex: 0 0 96px; width: 96px; max-width: 96px; aspect-ratio: 3 / 2; overflow: hidden; background: #e7e0da; } .mg-upsell-card__media img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; } .mg-upsell-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .mg-upsell-card__title { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #141414; } .mg-upsell-card__info { display: inline-flex; vertical-align: -3px; margin-left: 4px; color: #141414 !important; line-height: 0; } .mg-upsell-card__info svg { width: 16px; height: 16px; } .mg-upsell-card__price { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #141414; } /* ---------- Aantal-stepper ---------- */ .mg-upsell-qty { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: space-between; box-sizing: border-box; width: 112px; height: 40px; padding: 0 6px; border: 1px solid #d4d4d4; border-radius: 999px; } .mg-upsell-qty__btn { display: grid !important; place-items: center; width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: none !important; color: #141414 !important; cursor: pointer; -webkit-appearance: none; appearance: none; } .mg-upsell-qty__btn svg { width: 16px; height: 16px; } .mg-upsell-qty__btn:disabled { color: #a6a6a6 !important; cursor: default; } .mg-upsell-qty__btn:focus-visible { outline: 2px solid #8b6a4a; outline-offset: 1px; } .mg-upsell-qty__value { min-width: 2ch; font-size: 16px; font-weight: 500; text-align: center; color: #141414; } /* ---------- Smalle schermen ---------- */ @media (max-width: 480px) { .mg-upsell-heading__title { font-size: 24px !important; } .mg-upsell-card { gap: 12px; padding: 12px; } .mg-upsell-card__media { flex-basis: 72px; width: 72px; } .mg-upsell-card__title { font-size: 15px !important; } .mg-upsell-card__price { font-size: 14px !important; } .mg-upsell-qty { width: 96px; height: 36px; } } .woocommerce-product-attributes { border: 1px solid #ddd; border-collapse: collapse; width: 100%; } .woocommerce-product-attributes th, .woocommerce-product-attributes td { text-align: left; border: 1px solid #ddd; padding: 8px 12px; font-size: 15px; font-family: 'Domine'; } .woocommerce-product-attributes td p { margin: 0; } .eigenschap { width: 100%; border-radius: 0px; padding: 16px 16px; border: 0px solid var( --e-global-color-e8f8c2e ); background: white; } .eigenschappen-icon path { stroke: var( --e-global-color-primary )!important } summary.e-n-accordion-item-title { display: flex; flex-direction: row !important; justify-content: space-between !important; } .eigenschappen-icon { width: 40px; height: 40px; display: flex; flex-direction: row; justify-content: center; align-items: center ; background: var( --e-global-color-44d7d68 ); border: 0px solid var( --e-global-color-e8f8c2e ); } .specification-dynamic-term .jet-listing-dynamic-terms { line-height: 1.2; margin-top: 4px!important; } .specification-dynamic-term .jet-listing-dynamic-terms__link { display: inline; /* of inline-block, zie hieronder */ line-height: 1.2; margin: 0; padding: 0; } .specification-dynamic-term .jet-listing-dynamic-terms__delimiter { line-height: 1.2; } .omschrijving td:before { content: "-"; } /* ========================================================== Mattigo – productformulier (TM Extra Product Options) Stap 02: afmetingen | Stap 03: opvulmat ========================================================== */ /* Fonts: laad ze bij voorkeur via je thema/Elementor. Lukt dat niet, haal dan de comment weg (moet bovenaan de stylesheet staan): @import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600&family=Google+Sans+Flex:wght@400;500;600;700&display=swap'); */ #tm-extra-product-options { --mg-text: #1a1512; --mg-muted: #2f2a26; --mg-accent: #8c6d4f; /* bruine stapnummers */ --mg-line: #d6d4d1; /* randen + scheidingslijnen */ --mg-line-hover: #a9a5a0; --mg-field: #f7f7f7; /* achtergrond velden */ --mg-selected: #ede5da; /* gekozen opvulmat */ --mg-head: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, sans-serif; --mg-body: 'Domine', Georgia, serif; counter-reset: mg-stap 1; /* eerste genummerde stap wordt 02 */ color: var(--mg-text); font-family: var(--mg-body); } /* ---------- Basis reset van de plugin-grid ---------- */ #tm-extra-product-options .tc-row, #tm-extra-product-options .tc-cell { margin: 0; padding: 0; } #tm-extra-product-options ul.tmcp-ul-wrap, #tm-extra-product-options li.tmcp-field-wrap { margin: 0; padding: 0; list-style: none; } /* ---------- Secties + scheidingslijnen ---------- */ #tm-extra-product-options .cpf-section.kies-je-afmeting, #tm-extra-product-options .cpf-section.checkbox { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--mg-line); } /* ---------- Koppen met stapnummer ---------- */ #tm-extra-product-options .kies-je-afmeting .tm-section-label { margin-bottom: 0px; } #tm-extra-product-options .kies-je-afmeting .tc-section-label-text, #tm-extra-product-options .heading-product-page-div .tc-epo-element-label-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; font-family: var(--mg-head); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--mg-text); } /* Info-icoon bij afmetingen staat niet in het ontwerp */ #tm-extra-product-options .kies-je-afmeting .tc-section-label-text a { display: none; } /* Stap 03: sectielabel "Filler mat" verbergen, de header-tekst wordt de kop */ #tm-extra-product-options .cpf-section.checkbox .tm-section-label { display: none; } #tm-extra-product-options .heading-product-page-div { margin-bottom: 0px; } #tm-extra-product-options .heading-product-page-div .tc-epo-element-label-text a { order: 2; display: inline-flex; align-self: center; margin-left: 6px; line-height: 0; } #tm-extra-product-options .heading-product-page-div .tc-epo-element-label-text a img { width: 26px; height: 26px; } /* ========================================================== STAP 02 – Afmetingen ========================================================== */ #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; /* vakken altijd op één lijn, ook als een label afbreekt */ gap: 24px; } #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row::before { content: none; } #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row > .cpf-element { width: auto; max-width: none; flex: none; } /* Breedte links, lengte rechts */ #tm-extra-product-options .product-decimals-width-div { order: 1; } #tm-extra-product-options .product-decimals-length-div { order: 2; } /* Rekenveld onzichtbaar maken (blijft wel werken) */ #tm-extra-product-options #berekeningveld { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Label links, min/max rechts, veld eronder */ #tm-extra-product-options .kies-je-afmeting .cpf-type-textfield .tc-element-inner-wrap > .tc-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; row-gap: 14px; } #tm-extra-product-options .kies-je-afmeting .tm-epo-element-label { grid-column: 1; grid-row: 1; width: auto; font-family: var(--mg-head); font-size: 14px; font-weight: 700; color: var(--mg-text); } #tm-extra-product-options .kies-je-afmeting .tm-epo-required { display: none; } #tm-extra-product-options .kies-je-afmeting .tm-element-description { grid-column: 2; grid-row: 1; width: auto; text-align: right; } #tm-extra-product-options .kies-je-afmeting .tm-element-description p, #tm-extra-product-options .kies-je-afmeting .tm-element-description small { margin: 0; font-family: var(--mg-head); font-size: 13px; font-weight: 400; color: var(--mg-muted); } #tm-extra-product-options .kies-je-afmeting .tc-element-container { grid-column: 1 / -1; grid-row: 2; width: auto; } /* Het invoerveld */ #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner { display: flex; align-items: center; height: 56px; padding: 0 10px; border: 1px solid var(--mg-line); background: var(--mg-field); transition: border-color .15s ease; } #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner:hover { border-color: var(--mg-line-hover); } #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner:focus-within { border-color: var(--mg-text); } #tm-extra-product-options .kies-je-afmeting label.tm-epo-field-label { flex: 1; display: flex; align-items: center; min-width: 0; margin: 0; padding: 0 10px; cursor: text; } /* Eenheid "cm" in het veld */ #tm-extra-product-options .kies-je-afmeting label.tm-epo-field-label::after { content: "cm"; flex: none; font-family: var(--mg-head); font-size: 15px; font-weight: 400; color: var(--mg-muted); } #tm-extra-product-options .kies-je-afmeting input.tmcp-textfield { flex: 1; width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; text-align: center; font-family: var(--mg-head); font-size: 19px; font-weight: 600; color: var(--mg-text); -moz-appearance: textfield; appearance: textfield; } #tm-extra-product-options .kies-je-afmeting input.tmcp-textfield::-webkit-inner-spin-button, #tm-extra-product-options .kies-je-afmeting input.tmcp-textfield::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* − / + knoppen (worden door mattigo-stepper.js toegevoegd) */ #tm-extra-product-options .mg-stepper { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0 0 3px; border: 0; border-radius: 4px; background: transparent; box-shadow: none; color: var(--mg-text); font-family: var(--mg-head); font-size: 32px; font-weight: 400; line-height: 1; cursor: pointer; } /* Geen achtergrond bij hover/klik (overschrijft ook knopstijlen van het thema) */ #tm-extra-product-options .mg-stepper:hover, #tm-extra-product-options .mg-stepper:focus, #tm-extra-product-options .mg-stepper:active { background: transparent; box-shadow: none; color: var(--mg-text); } #tm-extra-product-options .mg-stepper:focus-visible { outline: 2px solid var(--mg-text); outline-offset: 2px; } #tm-extra-product-options .mg-stepper:disabled { opacity: .3; cursor: default; } /* Foutmeldingen van de plugin – zweven onder het veld, zonder het ernaastliggende veld te verschuiven */ #tm-extra-product-options .kies-je-afmeting .cpf-element { position: relative; } #tm-extra-product-options .kies-je-afmeting :is(label, div, span).tm-error, #tm-extra-product-options .kies-je-afmeting :is(label, div, span).error { position: absolute; top: 100%; left: 0; right: 0; display: block; margin: 6px 0 0; padding: 0; font-family: var(--mg-body); font-size: 11px; line-height: 1.4; color: #b3261e; } /* Rode rand om het veld bij een fout */ #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner:has(input.tm-error, input.error) { border-color: #b3261e; } /* ========================================================== STAP 03 – Opvulmat (tegels) ========================================================== */ #tm-extra-product-options .cpf-section.checkbox ul.tm-element-ul-checkbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox > li.tmcp-field-wrap { width: auto; max-width: none; flex: none; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox .tmcp-field-wrap-inner, #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox .tc-field-label-wrap { width: 100%; max-width: none; margin: 0; padding: 0; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label { position: relative; display: flex; align-items: center; justify-content: center; height:56px; margin: 0; padding: 0 12px; border: 1px solid var(--mg-line); background: var(--mg-field); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label:hover { border-color: var(--mg-line-hover); } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label:has(input:checked) { border-color: var(--mg-text); background: var(--mg-selected); } #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label:has(input:focus-visible) { outline: 2px solid var(--mg-text); outline-offset: 3px; } /* Vinkje zelf verbergen (blijft toegankelijk) */ #tm-extra-product-options .cpf-section.checkbox .tc-input-wrap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } #tm-extra-product-options .cpf-section.checkbox .tc-label-wrap, #tm-extra-product-options .cpf-section.checkbox .tc-label, #tm-extra-product-options .cpf-section.checkbox .tc-label-inner { display: block; width: auto; max-width: none; margin: 0; padding: 0; text-align: center; } #tm-extra-product-options .cpf-section.checkbox .tc-label-text { font-family: var(--mg-head); font-size: 15px; font-weight: 600; color: var(--mg-text); } /* Melding over levertijd */ #tm-extra-product-options .melding2-div { margin-top: 20px; margin-bottom: -20px; } #tm-extra-product-options .melding2-div .tc-epo-element-label-text { font-family: var(--mg-body); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--mg-muted); } /* ========================================================== Mobiel ========================================================== */ @media (max-width: 600px) { #tm-extra-product-options .kies-je-afmeting .tc-section-fields > .tc-row { grid-template-columns: 1fr; gap: 20px; } #tm-extra-product-options .kies-je-afmeting .tm-epo-element-label, #tm-extra-product-options .kies-je-afmeting .tm-element-description small { font-size: 17px; } #tm-extra-product-options .kies-je-afmeting .tmcp-field-wrap-inner, #tm-extra-product-options .cpf-section.checkbox .tm-element-ul-checkbox label.tm-epo-field-label { height: 64px; } #tm-extra-product-options .cpf-section.checkbox ul.tm-element-ul-checkbox { gap: 10px; } #tm-extra-product-options .cpf-section.checkbox .tc-label-text { font-size: 18px; } } .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell { margin-top: -32px !important; } .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell .product-price, .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell .tm-options-totals, .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell .tm-options-totals { display: none!important; } /* ========================================================== Totaalregels upsell – label en prijs op één grijze rij Alleen binnen .rubbermatten-upsell ========================================================== */ .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals { display: grid !important; grid-template-columns: 1fr auto; row-gap: 8px; column-gap: 0; width: 100%; margin: 0; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dt, .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dd { display: flex; align-items: center; align-self: stretch; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 14px 16px; background: #ECE5DD; font-family: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, sans-serif; font-size: 15px !important; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dt { padding-right: 8px; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dd { justify-content: flex-end; padding-left: 8px; text-align: right; } .cpf-section.rubbermatten-upsell .tc-totals-form dl.tm-extra-product-options-totals dd * { margin: 0; font-family: inherit; font-size: 15px; } /* Upsell: totaal boven de scheidingslijn */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .cpf-section.kies-je-afmeting { border-bottom: 0; margin-bottom: 0; padding-bottom: 24px; /* ruimte tussen velden en totaalbalk */ } /* Upsell: geen lijn meer onder de prijs… */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .tc-totals-form { padding-bottom: 0; margin-bottom: 16px; /* ruimte tussen prijsbalk en aantal-kiezer */ border-bottom: 0; } /* …maar onder de aantal-kiezer */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .tm-quantity-alt { display: block; width: 100%; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--mg-line); } .cpf-section.rubbermatten-upsell .tm-epo-totals { margin-top: -20px!important; margin-bottom: -20px!important; padding: 0!important; } #tm-extra-product-options .cpf-section.rubbermatten-upsell .kies-je-afmeting .tc-section-label-text { font-size: 17px!important; } .berekeningveld { display: none!important; } /* ========================================================== Upsell – aantal-kiezer als pil met rand ========================================================== */ .cpf-section.rubbermatten-upsell .tm-quantity-alt .quantity.mg-qty { display: inline-flex !important; align-items: center; justify-content: space-between; gap: 4px; height: 48px; min-width: 146px; width: 146px; margin: 0; padding: 0 6px; border: 1px solid #d6d4d1; border-radius: 999px; background: transparent; } .cpf-section.rubbermatten-upsell .tm-quantity-alt .quantity.mg-qty:focus-within { border-color: #1a1512; } /* Het getal */ .cpf-section.rubbermatten-upsell .tm-quantity-alt .mg-qty input.tm-qty-alt { width: 36px; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; text-align: center; font-family: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, sans-serif; font-size: 18px; font-weight: 600; color: #1a1512; -moz-appearance: textfield; appearance: textfield; } .cpf-section.rubbermatten-upsell .tm-quantity-alt .mg-qty input.tm-qty-alt::-webkit-inner-spin-button, .cpf-section.rubbermatten-upsell .tm-quantity-alt .mg-qty input.tm-qty-alt::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* − en + */ #tm-extra-product-options .cpf-section.rubbermatten-upsell .mg-stepper--qty { width: 36px; height: 36px; padding: 0 0 2px; border-radius: 999px; font-size: 22px; } /* Aantal-kiezer upsell: −, getal en + naast elkaar (overschrijft de plugin) */ .woocommerce div.product .tm-extra-product-options .cpf-section.rubbermatten-upsell .tm-quantity-alt .quantity.mg-qty { display: inline-flex !important; align-items: center; } .cpf-section.tc-cell.tcwidth.tcwidth-100.rubbermatten-upsell button.single_add_to_cart_product.button { display: none!important; } /* ========================================================= Kleurkeuze – Iconic WLV variaties in "01 Choose your colour"-stijl (!important waar nodig om de plugin-CSS te overrulen) ========================================================= */ /* Tabel-layout uitschakelen */ table.iconic-wlv-variations { width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse; counter-reset: wlv-step; } table.iconic-wlv-variations tbody, table.iconic-wlv-variations tr, table.iconic-wlv-variations td { display: block !important; width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; } /* Rij = één stap, met scheidingslijnen */ table.iconic-wlv-variations tr.iconic-wlv-variations__row { counter-increment: wlv-step; padding: 40px 0 40px !important; border-top: 1px solid #e2e2e2 !important; border-bottom: 1px solid #e2e2e2 !important; margin-bottom: 32px; } table.iconic-wlv-variations tr.iconic-wlv-variations__row + tr.iconic-wlv-variations__row { border-top: 0 !important; } /* Kop: stapnummer + titel */ table.iconic-wlv-variations td.iconic-wlv-variations__label { display: flex !important; align-items: baseline; gap: 14px; margin-bottom: 26px !important; } table.iconic-wlv-variations td.iconic-wlv-variations__label::before { content: counter(wlv-step, decimal-leading-zero); font-size: 18px; font-weight: 500; color: #8b6a4a; } table.iconic-wlv-variations strong.iconic-wlv-variations__label { font-size: 24px; font-weight: 500; line-height: 1.1; color: #141414; } table.iconic-wlv-variations .iconic-wlv-variations__colon, table.iconic-wlv-variations .iconic-wlv-variations__selection { display: none !important; } /* ---------- Swatches ---------- */ table.iconic-wlv-variations ul.iconic-wlv-terms { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; overflow: visible !important; } table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; min-width: 64px !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: none !important; overflow: visible !important; opacity: 1; } /* Eventuele plugin-indicatoren weghalen */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term::before, table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content::before, table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content::after { content: none !important; display: none !important; } /* Het vierkant zelf */ table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content { position: static !important; display: block !important; box-sizing: border-box !important; flex: 0 0 64px !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; margin: 0 !important; padding: 4px !important; border: 2px solid transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: hidden !important; transition: border-color .2s ease; } table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content img { position: static !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; transform: none !important; } /* Hover, focus, actief */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term:hover .iconic-wlv-terms__term-content { border-color: #c4c4c4 !important; } table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content--link:focus-visible { outline: none !important; border-color: #8b6a4a !important; } table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term--current .iconic-wlv-terms__term-content, table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term--current:hover .iconic-wlv-terms__term-content { border-color: #141414 !important; } /* Kleurnaam onder de swatch */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term::after { content: attr(data-iconic-wlv-term-label) !important; position: static !important; display: block !important; width: auto !important; height: auto !important; margin-top: 12px !important; border: 0 !important; background: none !important; font-size: 15px; line-height: 1.2; text-align: center; color: #141414; white-space: nowrap; transform: none !important; } /* Niet op voorraad */ table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term--outofstock { opacity: .4; } /* Mobiel */ @media (max-width: 600px) { table.iconic-wlv-variations strong.iconic-wlv-variations__label { font-size: 28px; } table.iconic-wlv-variations ul.iconic-wlv-terms { gap: 14px !important; } table.iconic-wlv-variations ul.iconic-wlv-terms li.iconic-wlv-terms__term { flex-basis: 80px !important; width: 80px !important; } table.iconic-wlv-variations ul.iconic-wlv-terms .iconic-wlv-terms__term-content { width: 80px !important; height: 80px !important; } } /* ========================================================= Upsells – "04 Maak je bestelling compleet" kaarten Werkt samen met upsells.js (die de kaart-markup opbouwt) ========================================================= */ /* Originele EPO-weergave verbergen (inputs blijven in het formulier) */ .cpf-section.upsell-rij.mg-upsell-ready > .tc-section-inner-wrap { display: none !important; } /* Lijst-items van de upsells netjes onder elkaar */ li.tm-extra-product-options-field:has(> .upsell-rij.mg-upsell-ready) { margin: 0 0 12px !important; padding: 0 !important; } /* Lettertype voor kop en kaarten */ li.mg-upsell-heading, .mg-upsell-card, .mg-upsell-card * { font-family: "Google Sans Flex", "Google Sans", sans-serif !important; } /* ---------- Kop ---------- */ li.mg-upsell-heading { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 12px; width: 100%; margin: 0 0 20px !important; padding: 0 !important; list-style: none !important; } .mg-upsell-heading__step { font-size: 16px; font-weight: 500; color: #8b6a4a; } .mg-upsell-heading__title { margin: 0 !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.1 !important; color: #141414; } .mg-upsell-heading__suffix { margin-left: 2px; font-size: 15px; font-weight: 400; } /* ---------- Kaart ---------- */ .mg-upsell-card { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid #d9d9d9; background: transparent; transition: border-color .2s ease; } .mg-upsell-card.is-active { border-color: #141414; } .mg-upsell-card__media { flex: 0 0 96px; width: 96px; max-width: 96px; aspect-ratio: 3 / 2; overflow: hidden; background: #e7e0da; } .mg-upsell-card__media img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; } .mg-upsell-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .mg-upsell-card__title { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #141414; } .mg-upsell-card__info { display: inline-flex; vertical-align: -3px; margin-left: 4px; color: #141414 !important; line-height: 0; } .mg-upsell-card__info svg { width: 16px; height: 16px; } .mg-upsell-card__price { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #141414; } /* ---------- Aantal-stepper ---------- */ .mg-upsell-qty { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: space-between; box-sizing: border-box; width: 112px; height: 40px; padding: 0 6px; border: 1px solid #d4d4d4; border-radius: 999px; } .mg-upsell-qty__btn { display: grid !important; place-items: center; width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: none !important; color: #141414 !important; cursor: pointer; -webkit-appearance: none; appearance: none; } .mg-upsell-qty__btn svg { width: 16px; height: 16px; } .mg-upsell-qty__btn:disabled { color: #a6a6a6 !important; cursor: default; } .mg-upsell-qty__btn:focus-visible { outline: 2px solid #8b6a4a; outline-offset: 1px; } .mg-upsell-qty__value { min-width: 2ch; font-size: 16px; font-weight: 500; text-align: center; color: #141414; } /* ---------- Smalle schermen ---------- */ @media (max-width: 480px) { .mg-upsell-heading__title { font-size: 24px !important; } .mg-upsell-card { gap: 12px; padding: 12px; } .mg-upsell-card__media { flex-basis: 72px; width: 72px; } .mg-upsell-card__title { font-size: 15px !important; } .mg-upsell-card__price { font-size: 14px !important; } .mg-upsell-qty { width: 96px; height: 36px; } } /* ========================================================= Bestelblok – "Jouw mat" samenvatting + aantal + bestelknop Werkt samen met bestelblok.js ========================================================= */ /* Originele EPO-totalen verbergen (blijven werken op de achtergrond) */ form.cart.mg-buybox-ready > .tm-totals-form-main { display: none !important; } .mg-buybox, .mg-buybox * { font-family: "Google Sans Flex", "Google Sans", sans-serif !important; } .mg-buybox { box-sizing: border-box; width: 100%; margin: 24px 0 0; padding: 24px 28px 22px; background: #e8e1d9; color: #141414; } .mg-buybox__heading { margin: 0 0 14px !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #141414 !important; } /* Regels */ .mg-buybox__lines { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid rgba(20, 20, 20, .12); } .mg-buybox__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; line-height: 1.4; } .mg-buybox__line-label { min-width: 0; } .mg-buybox__line-price { flex: 0 0 auto; white-space: nowrap; } /* Totaal */ .mg-buybox__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 14px 0 18px; } .mg-buybox__total-label { font-size: 16px; font-weight: 600; } .mg-buybox__total-value { font-size: 30px; font-weight: 700; line-height: 1; white-space: nowrap; } /* Aantal + knop */ .mg-buybox__actions { display: flex; align-items: stretch; gap: 12px; } form.cart .mg-buybox .quantity.mg-buybox__qty { display: inline-flex !important; flex: 0 0 auto; align-items: center; justify-content: space-between; box-sizing: border-box; width: 124px; height: 56px; margin: 0 !important; padding: 0 10px; border: 0; border-radius: 999px; background: #f7f7f7; } form.cart .mg-buybox .mg-buybox__qty input.qty { width: 32px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 17px !important; font-weight: 500 !important; text-align: center; color: #141414 !important; -moz-appearance: textfield; appearance: textfield; } form.cart .mg-buybox .mg-buybox__qty input.qty::-webkit-outer-spin-button, form.cart .mg-buybox .mg-buybox__qty input.qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .mg-buybox__qty-btn { display: grid !important; place-items: center; width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: none !important; color: #141414 !important; cursor: pointer; -webkit-appearance: none; appearance: none; } .mg-buybox__qty-btn svg { width: 18px; height: 18px; } .mg-buybox__qty-btn:disabled { color: #a6a6a6 !important; cursor: default; } .mg-buybox__qty-btn:focus-visible { outline: 2px solid #8b6a4a; outline-offset: 1px; } form.cart .mg-buybox button.single_add_to_cart_button.mg-buybox__button { flex: 1 1 auto; float: none !important; height: 56px; min-height: 0 !important; margin: 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; background: #1c1a19 !important; box-shadow: none !important; color: #fff !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: background-color .2s ease; } form.cart .mg-buybox button.single_add_to_cart_button.mg-buybox__button:hover { background: #3a3533 !important; } form.cart .mg-buybox button.single_add_to_cart_button.mg-buybox__button:focus-visible { outline: 2px solid #8b6a4a; outline-offset: 2px; } form.cart .mg-buybox button.single_add_to_cart_button.mg-buybox__button.disabled, form.cart .mg-buybox button.single_add_to_cart_button.mg-buybox__button:disabled { opacity: .5; cursor: not-allowed; } /* Levertijd-notitie */ .mg-buybox__note { display: flex; align-items: center; gap: 10px; margin: 16px 0 0 !important; font-size: 14px !important; line-height: 1.4 !important; color: #141414 !important; } .mg-buybox__note::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #4a8a4f; } /* Smalle schermen */ @media (max-width: 480px) { .mg-buybox { padding: 20px 16px 18px; } .mg-buybox__heading { font-size: 21px !important; } .mg-buybox__line { font-size: 14px; } .mg-buybox__total-value { font-size: 26px; } form.cart .mg-buybox .quantity.mg-buybox__qty { width: 108px; height: 52px; } form.cart .mg-buybox button.single_add_to_cart_button.mg-buybox__button { height: 52px; font-size: 15px !important; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 100; font-display: auto; src: url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-100-normal.woff2') format('woff2'), url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-100-normal.woff') format('woff'); } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-300-normal.woff2') format('woff2'), url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-300-normal.woff') format('woff'); } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-500-normal.woff2') format('woff2'), url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-500-normal.woff') format('woff'); } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-700-normal.woff2') format('woff2'), url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-700-normal.woff') format('woff'); } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 900; font-display: auto; src: url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-900-normal.woff2') format('woff2'), url('https://dev.mattigo.com/wp-content/uploads/2026/10/google-sans-flex-latin-900-normal.woff') format('woff'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Domine'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://dev.mattigo.com/wp-content/uploads/2026/10/domine-latin-400-normal.woff2') format('woff2'), url('https://dev.mattigo.com/wp-content/uploads/2026/10/domine-latin-400-normal.woff') format('woff'); } @font-face { font-family: 'Domine'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://dev.mattigo.com/wp-content/uploads/2026/10/domine-latin-700-normal.woff2') format('woff2'), url('https://dev.mattigo.com/wp-content/uploads/2026/10/domine-latin-700-normal.woff') format('woff'); } /* End Custom Fonts CSS */