.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}:root { --border-width: 2px;
--box-shadow: 1px 1px 18px rgba(27, 23, 23, 0.05);
--grayscale: var(--borderColor); --depth-2: 0 0 2px rgba(17, 34, 68, .12), 0 1px 2px rgba(17, 34, 68, .14);
--depth-4: 0 0 2px rgba(17, 34, 68, .12), 0 1px 4px rgba(17, 34, 68, .14);
--depth-8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
--depth-16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
--depth-28: 0 0 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.14);
--depth-64: 0 0 8px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.14); --spacing: var(--padding); --ideal-touch-size: 48px; --wc-stars-color: #FFC723; --small-font-size: .8rem;
--intermediate-font-size: .9rem;
--default-font-size: 1rem;
--medium-font-size: 1.3rem;
--large-font-size: 2.25rem;
--x-large-font-size: 2.62rem; --smallWrapperWidth: 750px;
}
* {
box-sizing: border-box;
}
html, 
body {
padding: 0;
margin: 0;
font-family: var(--textFont);
background: var(--backgroundColor);
color: var(--textColor);
scroll-behavior: smooth;
interpolate-size: allow-keywords;
color-scheme: light dark;
} .has-no-spacing {
--spacing:  0;
}
.has-small-spacing {
--spacing: calc( var(--padding) / 1.5 );
}
.has-intermediate-spacing {
--spacing: calc( var(--padding) / 1.3 );
}
.has-default-spacing {
--spacing: var(--padding);
}
.has-medium-spacing {
--spacing: calc( var(--padding) * 1.5 );
}
.has-large-spacing {
--spacing: calc( var(--padding) * 2 );
}
.has-x-large-spacing {
--spacing: calc( var(--padding) * 2.5 );
}
@media screen and (max-width: 724px) {
.mob-has-no-spacing {
--spacing:  0;
}
.mob-has-small-spacing {
--spacing: calc( var(--padding) / 1.5 );
}
.mob-has-intermediate-spacing {
--spacing: calc( var(--padding) / 1.3 );
}
.mob-has-default-spacing {
--spacing: var(--padding);
}
.mob-has-medium-spacing {
--spacing: calc( var(--padding) * 1.5 );
}
.mob-has-large-spacing {
--spacing: calc( var(--padding) * 2 );
}
.mob-has-x-large-spacing {
--spacing: calc( var(--padding) * 2.5 );
}
}
@media screen and (min-width: 725px) {
.has-2-columns {
--_columns: 2;
grid-template-columns: repeat(2, 1fr);
}
.has-3-columns {
--_columns: 3;
grid-template-columns: repeat(3, 1fr);
}
.has-4-columns {
--_columns: 4;
grid-template-columns: repeat(4, 1fr);
}
.has-5-columns {
--_columns: 5;
grid-template-columns: repeat(5, 1fr);
}
.has-6-columns {
--_columns: 6;
grid-template-columns: repeat(6, 1fr);
}
.has-7-columns {
--_columns: 7;
grid-template-columns: repeat(7, 1fr);
}
}
.has-font-family-paragraph {
font-family: var(--textFont);
}
.has-font-family-heading {
font-family: var(--headingFont);
} .home .hide-on-front,
.woocommerce-checkout .hide-on-checkout {
display: none!important;
} label {
display: block;
position: relative;
}
fieldset {
margin: 0;
border: 0;
padding: 0;
}
legend {
font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--headingFont);
margin: 0;
}
img, svg {
vertical-align: middle;
max-width: 100%;
height: auto;
}
mark {
background: transparent;
color: inherit;
}
::selection {
background-color: var(--main);
color: #FFF;
}
.wrap, 
.is-style-wrap {
--_wrapperWidth: var(--wrapperWidth);
}
.is-style-small-wrap {
--_wrapperWidth: var(--smallWrapperWidth);
}
.wrap, 
#wp-toolbar, 
.is-style-wrap,
.is-style-small-wrap {
width: min( 100%, var(--_wrapperWidth) );
margin-inline: auto;
position: relative;
padding-inline: var(--padding);
}
a {
color: inherit;
text-decoration: none;
}
figure {
margin: 0;
}
pre {
background: #282C34;
color: #FFF;
padding: var(--padding);
overflow-y: auto;
border-radius: var(--border-radius);
} ::placeholder {
color: var(--textColorAlt);
}
input, 
select, 
textarea,
button,
.button {
display: inline-block;
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: inherit;
border: var(--border-width) solid var(--borderColor);
padding: 10px 15px;
border-radius: var(--border-radius);
width: 100%;
font-size: inherit;
&:hover {
border-color: var(--textColor);
}
&:checked {
accent-color: var(--main);
}
&[type="submit"],
&[type="checkbox"],
&[type="radio"] {
width: auto;
position: relative;
}
&[type="submit"] {
font-weight: bold;
background-color: var(--main);
border-color: var(--main);
&:hover {
filter: brightness(80%);
}
}
}
button, 
.button {
cursor: pointer;
}
select {
appearance: none;
background-image: url(/wp-content/themes/basetheme/assets/down.svg);
background-position: right 15px top 50%;
background-repeat: no-repeat;
background-size: auto 1lh;
} .wp-block-button {
position: relative;
font-family: var(--headingFont);
font-weight: bold;
--_background: var(--main);
--_color: #FFF;
a,
.wp-block-button__link {
border-radius: var(--border-radius);
padding: calc( var(--spacing) / 2 ) var(--spacing);
position: relative;
&:not(.has-background) {
background-color: var(--_background);
border: var(--border-width) solid var(--_background);
}
&:not(.has-text-color) {
color: var(--_color);
}
&:hover {
text-decoration: none!important;
filter: brightness(80%);
}
& > span {
color: var(--_background);
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
}
&.has-span-overflow {
.wp-block-button__link {
display: flex;
span {
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
&:not([class*="-spacing"]) {
--spacing: var(--padding);
}
&[class*="wp-block-button__width"] {
.wp-block-button__link {
width: 100%;
}
}
&[class*="alternative"] {
--_background: var(--second);
--_color: #FFF;
}
&[class*="accent"] {
--_background: var(--accent);
--_color: #FFF;
}
&[class*="grey"] {
--_background: var(--grayscale);
--_color: var(--textColor);
}
&[class*="woocommerce"] {
--_background: var(--wc-primary);
.wp-block-button__link {
display: inline-flex;
gap: 10px;
align-items: center;
justify-content: center;
font-weight: bold;
&:before {
content: '';
display: inline-block;
mask: url(/wp-content/themes/basetheme/assets/add-to-cart.svg) no-repeat 50% 50%;
mask-size: cover;
height: 1lh;
aspect-ratio: 1;
background-color: currentColor;
}
&.select_options:before {
mask: url(/wp-content/themes/basetheme/assets/select-options.svg) no-repeat 50% 50%;
}
&.added:before {
mask: url(/wp-content/themes/basetheme/assets/check.svg) no-repeat 50% 50%;
}
&.loading:before {
mask: unset;
background-color: transparent;
border: 4px solid transparent;
height: calc(1lh - 8px); border-top-color: currentColor;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
&.proceed-to-checkout:before {
mask: url(/wp-content/themes/basetheme/assets/payment.svg) no-repeat 50% 50%;
}
}
span {
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--wc-primary);
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
}
&[class*="outline"] {
--_color: var(--_background);
.wp-block-button__link {
background-color: transparent;
}
}
&[class*="active"] {
.wp-block-button__link {
border-color: var(--accent);
border-width: var(--border-width);
}
}
} body.page-layout-boxed {
--contentBackground: var(--bodyBackground);
}
body:not(.page-layout-boxed ) {
--contentBackground: var(--backgroundColor);
}
@media screen and (min-width: 725px) {
#page.is-style-left-sidebar {
margin-left: 250px;
}
}
#page.is-style-boxed {
--_bodywidth: calc( var(--wrapperWidth) + calc( var(--padding) * 2 ) );
background: var(--bodyBackground);
width: min( 100%, var(--_bodywidth) );
margin-inline: auto;
position: relative;
@media screen and (min-width: 725px) { 
border-left: 1px solid var(--borderColor);
border-right: 1px solid var(--borderColor);
}
}
.woocommerce-store-notice, p.demo_store {
position: fixed;
font-size: 1em;
padding: 10px;
background-color: var(--footerBackground);
color: var(--footerColor);
box-shadow: none;
}
#top {
background: var(--topBackground);
color: var(--topColor);
padding: calc( var(--spacing) / 4 ) 0;
position: relative;
z-index: 10;
&.has-second-menu > div {
display: flex;
& > ul {
flex: 1;
&:last-child {
text-align: right;
}
}
}
}
header {
position: relative;
.inner {
display: flex;
gap: min( var(--spacing), 10px );
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-block: var(--spacing);
}
.site_info {
display: flex;
align-items: center;
gap: min( var(--spacing), 10px );
width: max-content;
}
.search_block {
width: min( 100%, 450px );
}
.header-inline-nav {
min-width: 252px; flex-grow: 1;
}
.account-icons {
text-align: right;
ul {
container-type: normal;
}
}
.seperate-nav {
padding: var(--spacing);
background-color: var(--navBackground);
color: var(--navColor);
}
&.transparent_header:not(.scroll) {
.seperate-nav {
background-color: transparent;
}
} > .site_info {
padding-top: var(--spacing);
margin-inline: auto;
} .scroll {
box-shadow: var(--depth-4);
}
}
#header {
background: var(--headerBackground);
color: var(--headerColor);
top:  0;
left:  0;
right:  0;
z-index: 6000;
&.transparent_header:not(.scroll) {
background: transparent;
color: var(--bannerColor);
position: absolute;
}
}
@media screen and (min-width: 725px) {
#header.left-sidebar {
right: auto;
bottom: 0;
width: 250px;
padding: var(--spacing);
.inner {
display: grid;
grid-template-columns: 100%;
width: 100%;
padding-inline: 0;
}
.site_info {
display: block;
width: 100%;
text-align: center;
img, svg {
width: var(--logo_size);
}
}
.account-icons, 
.header-inline-nav {
min-width: 0;
text-align: inherit;
}
.account-icons {
ul.show_labels {
container-type: inline-size;
}
ul:not(.show_labels) {
text-align: center;
}
}
}
}
#inline_search {
display: flex;
align-items: center;
position: relative;
input {
background: var(--subBackground);
color: var(--subColor);
}
button {
background-color: transparent;
color: inherit;
position: absolute;
padding: 0;
right: 15px;
border: 0;
}
.search_results_popup {
position: absolute;
z-index: 1000;
background: var(--subBackground);
color: var(--subColor);
padding: 15px;
transition: .3s;
top: 100%;
width: 100%;
border-radius: var(--border-radius);
border: var(--border-width) solid var(--borderColor);
box-shadow: var(--box-shadow);
}
}
.show_search_results {
.search-results-output {
padding: var(--spacing);
h3 {
}
.single-search-result {
padding-block: var(--spacing);
border-bottom: var(--border-width) solid var(--borderColor);
&:has(img) {
display: grid;
grid-template-columns: 50px 1fr;
gap: 10px;
align-items: center;
}
img {
border-radius: var(--border-radius);
}
.single-search-results__link {
display: block;
&:hover {
text-decoration: underline;
text-decoration-thickness: var(--border-width);
}
}
.single-search-results__meta {
color: var(--textColorAlt);
}
}
}
}
#subheader {
background: var(--contentBackground);
color: var(--textColor);
z-index: 5001;
content-visibility: auto;
&.product-header {
bottom: 0;
@media screen and (max-width: 724px) {
border-top: 1px solid var(--borderColor);
}
.inner {
flex-wrap: nowrap;
.header_block {
overflow: hidden;
min-width: 48px;
}
}
h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media screen and (max-width: 724px) {
--_sizing: .8rem;
}
}
@media screen and (max-width: 724px) {
.wp-block-button.is-style-woocommerce {
.wp-block-button__link {
height: 48px;
aspect-ratio: 1;
border-radius: 100px;
padding: 0;
display: grid;
place-content: center;
&:before {
height: 30px;
}
span {
display: none;
}
}
}
}
}
} nav {
--_active_menu_background: transparent;
--_active_menu_color: var(--navColorHover);
--_spacing: var(--spacing);
--_border-radius: var(--border-radius);
--_padding-block: calc( var(--_spacing) / 1.5 );
--_padding-inline: var(--_spacing);
&.nav-style-buttons-pills {
--_border-radius: 100vw;
--_padding-block: calc( var(--_spacing) / 2.5 );
}
&.inline-nav {
ul {
white-space: nowrap;
overflow: auto;
}
}
&.pagination {
text-align: center;
ul {
li {
& > * {
aspect-ratio: 1;
text-align: center;
}
}
}
}
ul {
list-style: none;
padding: 0;
margin: 0;
container-type: inline-size;
container-name: navigation-list;
font-size: inherit;
li {
border-radius: var(--_border-radius);
margin: 2px;
position: relative;
display: inline-block;
svg {
height: 1lh;
aspect-ratio: 1;
}
.menu_item_subtext {
display: block;
font-size: small;
opacity: .8;
}
& > *:not( ul )  {
position: relative;
display: grid;
align-items: center;
grid-template-columns: 1fr;
gap: 0;
padding-block: var(--_padding-block);
padding-inline: var(--_padding-inline);
border-radius: inherit;
min-width: 32px;
&:has( .menu_item_label ) {
grid-template-columns: auto 1fr auto;
grid-template-areas: "icon text arrow";
.menu_item_icon {
grid-area: icon;
}
.menu_item_dropdown {
grid-area: arrow; padding: 10px;
margin: -10px;
transform: translateY(-2px);
div {
display: inline-block;
width: 7px;
aspect-ratio: 1;
border-width: 0 2px 2px 0;
border-style: solid;
border-color: currentColor;
border-bottom-right-radius: 2px;
rotate: 45deg;
transform: scale(0.8);
}
}
.menu_item_label {
grid-area: text;
margin-inline: calc( var(--_spacing) / 5 );
}
}
}
&.cat-item-none {
display: none;
}
}
}
}
nav [class*="current"] > *, 
nav [class*="active"] > *, 
nav ul li > *[class*="current"],
nav ul li:hover > * {
background: var(--_active_menu_background);
color: var(--_active_menu_color);
} nav.nav-style-underlined ul li > *:after {
content: "";
display: block;
position: absolute;
bottom: -3px;
height: 3px;
left: 45%;
right: 45%;
background: transparent;
border-radius: 10px;
transition: .3s;
z-index: 0;
}
nav.nav-style-underlined [class*="current"] > *:after, 
nav.nav-style-underlined [class*="active"]  > *:after, 
nav ul li > *[class*="current"]:after,
nav.nav-style-underlined ul li > *:hover:after {
background: currentColor;
left: 25%;
right: 25%;
}
nav.nav-style-underlined ul li ul li > *:after {
display: none!important;
} nav.nav-style-buttons [class*="current"] > *:not( ul ), 
nav.nav-style-buttons [class*="active"] > *:not( ul ), 
nav ul li > *:not( ul )[class*="current"],
nav.nav-style-buttons ul li:hover > *:not( ul ) {
--_active_menu_background: var(--navColorHover);
--_active_menu_color: var(--navColor);
} nav.nav-style-buttons-pills [class*="current"] > *:not( ul ), 
nav.nav-style-buttons-oills [class*="active"] > *:not( ul ), 
nav ul li > *:not( ul )[class*="current"],
nav.nav-style-buttons-pills ul li:hover > *:not( ul ) {
--_active_menu_background: var(--navColorHover);
--_active_menu_color: var(--navColor);
} nav ul li ul.sub-menu {
--_active_menu_color: var(--navColorHover);
display: none;
background: var(--subBackground);
color: var(--subColor);
padding: var(--_sub_padding);
li {
display: block;
text-align: left;
width: 100%;
margin-block: 2px;
margin-inline: 0;
padding: 0;
a {
font-weight: normal;
}
.menu_item_dropdown {
transform: rotate(-90deg);
float: right;
}
}
}
nav ul li.menu-item-has-children {
--_display-type: block;
--_sub_padding: 15px;
--_width: 250px;
}
nav ul li.menu-item-has-children.has-big-sub {
--_display-type: grid;
--_sub_padding: 20px; --_width: 100%;
position: initial;
}
nav ul li ul.sub-menu.submenu-is-opened {
display: var(--_display-type);
} @container navigation-list (max-width: 250px) {
nav ul li {
display: block;
}
nav ul li.menu-item-has-children,
nav ul li.menu-item-has-children.has-big-sub {
--_sub_padding: 0;
--_display-type: block;
}
} @container navigation-list (min-width: 251px) {
nav ul li:hover > ul.sub-menu {
display: var(--_display-type);
animation: showsub 300ms;
}
nav ul li ul.sub-menu {
container-type: initial;
position: absolute;
z-index: 1000; left: 0;
width: var(--_width);
border-radius: var(--border-radius);
border: var(--border-width) solid var(--borderColor);
box-shadow: var(--box-shadow); grid-template-columns: repeat( 3, 1fr );
gap: var(--spacing);
align-items: start; li:hover > ul {
animation: none;
top: 0;
left: 100%;
}
}
nav ul li.has-big-sub ul.sub-menu {
li.menu-item-has-children > a {
font-weight: bold;
}
.menu_item_dropdown {
display: none;
}
ul {
display: block;
position: relative;
border: 0;
box-shadow: none;
width: auto;
margin: 0;
padding-block: 5px;
padding-inline: 0;
}
li:hover > ul {
left: 0;
}
}
} .parallax {
position: relative;
z-index: 0;
display: grid;
grid-template-areas: "stack";
> * {
animation: parallax linear;
animation-timeline: scroll();
grid-area: "stack";
}
div[class*="inner"] {
--parallax-speed: 5;
z-index: 5;
}
img[class*="background"] {
--parallax-speed: -5;
z-index: 2;
}
}
#banner {
--textColorAlt: var(--bannerColor);
display: grid;
background: var(--bannerBackground);
color: var(--bannerColor);
justify-content: initial;
padding: 0;
position: relative;
div[class*="inner"] {
position: relative;
z-index: 6;
padding-block: var(--spacing);
display: grid;
gap: 10px;
grid-template-columns: 1fr;
@media screen and (min-width: 725px) {
grid-template-columns: 1fr auto auto;
}
}
h1 {
margin: 10px 0;
font-weight: inherit;
line-height: 1;
}
ul, ol {
font-weight: normal;
}
select {
font-size: 1rem;
}
img[class*="background"] {
position: absolute;
z-index: 2;
top:  50%;
left:  0;
right: 0;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
object-fit: cover;
transform: translateY(-50%);
}
.wp-block-cover__background.has-background-dim {
z-index: 4;
}
&:not(.parallax) {
overflow: hidden;
}
&.is-style-wrap {
overflow: hidden;
div[class*="inner"] {
padding-inline: var(--spacing);
}
@media screen and (min-width: 725px) { 
border-radius: var(--border-radius);
}
}
}
#breadcrumbsbar {
padding-block: var(--padding);
.is-style-wrap,
.is-style-small-wrap {
&:has(.back_button) {
display: flex;
gap: calc( var(--spacing) * 2 );
.back_button {
a {
font-weight: bold;
}
}
}
}
}
ol.breadcrumbs {
list-style: none;
padding: 0;
margin: 0;
li {
display: inline-flex;
&.breadcrumbs_divider {
padding-inline: 10px;
opacity: .3;
}
}
a {
display: inline-flex;
color: var(--textColorAlt);
border-bottom: 1px solid transparent;
&:hover {
border-bottom-color: currentColor;
}
}
svg {
width: var(--_sizing);
}
span.item-name {
display: inline-block;
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} .single_post_header {
padding-inline: 0;
}
.single_post_image {
text-align: center;
margin-block: calc( var(--spacing) / 1.5 );
aspect-ratio: 16 / 9;
overflow: hidden;
img {
width: 100%;
margin: 0;
}
@media screen and (max-width: 724px) {
margin-inline: calc( var(--padding) * -1 );
}
@media screen and (min-width: 725px) {
border-radius: var(--border-radius);
}
}
.single_post_body {
margin-block: calc( var(--spacing) / 1.5 );
margin-inline: auto;
@media screen and (min-width: 725px) {
&:has(#post-sidebar) {
display: grid;
grid-template-columns: 1fr 250px;
gap: 20px;
width: min(100%, calc( var(--smallWrapperWidth) + 250px ));
}
&:not(:has(#post-sidebar)) {
width: min(100%, var(--smallWrapperWidth) );
}
}
.wp-block-heading {
line-height: 1.3;
padding-top: 1em;
}
.single_post_content {
a {
text-decoration: underline;
}
}
.single_post_sidebar {
}
} #content {
background: inherit;
position: relative;
z-index: 10;
gap: var(--padding);
padding-block: var(--spacing);
grid-template-areas: "column-1 column-2";
container-type: inline-size;
container-name: main-content;
content-visibility: auto;
}
#content.sidebar-show-left {
display: grid;
grid-template-columns: 250px 1fr;
#sidebar {
grid-area: column-1;
}
}
#content.sidebar-show-right {
display: grid;
grid-template-columns: 1fr 250px;
#sidebar {
grid-area: column-2;
}
}
main a:not([class]) {
color: var(--linkColor);
}
main a:not([class]):hover {
text-decoration: underline;
}
.widget ul {
padding:  0;
list-style: none;
li {
display: block;
padding: 10px 0;
a:hover {
text-decoration: underline;
}
ul {
padding-top: 10px;
padding-left: 10px;
opacity: .8;
}
}
}
#html_sitemap {
ul {
list-style: none;
li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.html-sitemap-column > ul {
padding: 0;
}
}
footer {
background: var(--footerBackground);
color: var(--footerColor);
margin: 0;
clear: both;
content-visibility: auto;
contain: content;
.is-style-wrap {
padding: var(--spacing) var(--padding);
}
}
footer#copy {
background: var(--copyBackground);
color: var(--copyColor);
.inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.copy_siteinfo:has(.show_logo) {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
}
}
ol.commentlist,
ol.commentlist li.comment ul.children {
list-style: none;
padding: 0;
}
ol.commentlist li.comment {
--_spacing: 20px;
padding: var(--_spacing);
border-radius: var(--border-radius);
border: var(--border-width) solid var(--borderColor);
margin: var(--_spacing) 0;
.comment-author {
display: inline-block;
vertical-align: middle;
width: 50%;
img {
border-radius: var(--border-radius);
margin-right: 10px;
}
cite {
font-style: normal;
}
.says {
display: none;
}
}
.comment-meta {
display: inline-block;
vertical-align: middle;
width: 50%;	
text-align: right;
}
}
ol.commentlist li.comment ul.children li.comment {
--_spacing: 10px;
}
body:not(.single-product) #respond {
display: grid;
grid-template-columns: 150px 1fr;
gap: 10px;
padding: 20px;
border-radius: var(--border-radius);
border: var(--border-width) solid var(--borderColor);
width: 100%;
}
.next-and-previous-posts-columns {
padding-top: 50px;
}
.woocommerce-products-header {
margin-bottom: var(--spacing);
.term-description {
p {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&.term-description__bottom {
margin-top: var(--spacing);
}
&[content-state="collapsed"] {
-webkit-line-clamp: 3;
}
}
.term-description-toggle {
color: var(--linkColor);
text-decoration: underline;
}
}
.archive-grid {
grid-template-rows: repeat( 5, auto );
.blogitem {
position: relative;
background-color: var(--blog_backgroundColor);
transition:  .3s;
display: grid;
grid-template-rows: subgrid;
grid-row: span 5;
gap: 20px;
padding: var(--spacing);
@media screen and (min-width: 725px) {
&.latest-post {
grid-column: span var(--_columns);
grid-template-columns: 1fr 1fr;
.inline-post-img {
grid-row: 1 / 5; 
}
> *:not(.inline-post-img) {
grid-column: 2;
}
h3 {
zoom: 130%;
}
p {
zoom: 115%;
&[content-state="collapsed"] {
-webkit-line-clamp: 6!important;
}
}
}
}
small {
color: var(--main);
text-transform: uppercase;
font-size: var(--small-font-size)
}
.inline-post-img {
width: 100%;
a {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--border-radius);
}
img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%; 
}
}
.blogitem-author {
color: var(--textColorAlt);
}
&.border:hover {
border-color: var(--main);
}
&.depth-2:hover {
box-shadow: var(--depth-4);
}
&.item-aside {
outline: 2px solid var(--second);
}
}
} .layout-2 .blogitem {
.inline-post-img {
aspect-ratio: 1;
}
} .layout-3 .blogitem {
.inline-post-img {
position: absolute;
height: 100%;
aspect-ratio: initial;
z-index: 1;
opacity: .2;
}
.article-content-coloring {
color: var(--blog_backgroundColor);
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
.blogitem-title {
grid-row: span 2; }
div:not( .inline-post-img ) {
position: relative;
z-index: 2;
}
} dialog {
--_maxwidth: 600px;
--_spacing: 15px;
background: var(--contentBackground);
color: var(--textColor);
border-radius: var(--border-radius);
border: var(--border-width) solid var(--borderColor);
width: min( 100%, var(--_maxwidth) );
padding: 0;
transition-property: display opacity;
transition-duration: 300ms;
transition-behavior: allow-discrete;
opacity: 0;
translate: 0 -50px;
@media screen and (max-width: 725px) {
max-height: 90%;
}
header {
padding: var(--_spacing);
position: sticky;
top: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr 50px;
gap: 10px;
align-items: center;
background: inherit;
border-bottom: 1px solid var(--borderColor);
button.closebutton {
background: var(--grayscale);
color: var(--textColor);
padding: 10px;
aspect-ratio: 1;
font-size: 0;
mix-blend-mode: multiply;
}
> div > * {
margin: 0;
}
}
&#search-dialog header {
background-color: var(--grayscale);
}
section {
padding: calc( var(--_spacing) / 2 ) var(--_spacing);
h2, h3 {
font-size: 1em;
}
}
}
dialog[open] {
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 -50px;
}
}
dialog.wc_gallery_dialog {
--_maxwidth: 1000px;
header {
background: transparent;
border: 0;
position: fixed;
right: 0;
}
section {
text-align: center;
}
img {
max-height: 90vh;
}
} details {
background-color: var(--grayscale);
border-radius: var(--border-radius);
padding: calc( var(--padding) / 2 );
summary {
cursor: pointer;
list-style-type: none;
padding: calc(var(--spacing) / 2) var(--spacing);
position: relative;
::marker,
::-webkit-details-marker {
display: none;
font-size: 0rem;
}
&:after {
content: "\23F7";
display: block;
position: absolute;
top: 50%;
right: var(--spacing);
transform: translateY(-50%);
}
}
}
footer details {
--spacing: 0;
border-radius: 0;
}  .woocommerce-info, 
.woocommerce-message, 
.woocommerce-error,
.wc-block-components-notice-banner {
background-color: transparent;
padding: 5px 0;
border: 0;
position: relative;
display: flex;
align-items: center;
gap: 5px;
svg {
fill: currentColor;
min-width: 24px; }
a:not(.button) {
text-decoration: underline;
}
a.button {
order: 4; 
width: auto;
}
.wc-block-components-button.wc-block-components-notice-banner__dismiss {
width: 30px;
padding: 0;
border: 0;
color: currentColor;
margin-left: auto;
}
&::before,
&::after {
display: none!important;
}
}
[data-notice="getcarttotals"],
[data-notice="getfreeshipping"],
[data-notice="combideal_savings"] {
grid-template-columns: 0 1fr;
}
.woocommerce-info, 
.wc-block-components-notice-banner.is-info {
color: var(--wc-primary);
}
.woocommerce-message, 
.wc-block-components-notice-banner.is-success {
color: var(--wc-green);
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
color: var(--wc-red);
}
[data-notice="getcarttotals"] {
color: var(--textColor);
}
.wc-block-components-notice-banner__content:has( a.button ) {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.woocommerce div.product div.summary {
.price-wrapper,
p.woocommerce-product-details__short-description,
div.stock,
#product-families,
.bulkdiscount {
margin-block: var(--padding);
padding: 0;
}
.price-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
p {
margin: 0;
}
.savings {
color: var(--wc-green);
}
}
.product-family__single {
margin-block: calc( var(--padding) / 1.5 );
label {
margin-bottom: .2lh;
font-weight: 700;
span {
font-weight: normal;
}
}
.no-stock {
img {
filter: grayscale(1);
}
.product-families-price {
color: var(--wc-red);
}
}
.product-families-product-attributes {
overflow: hidden;
white-space: nowrap;
p {
margin: 0;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
.product_family__dropdown {
summary {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} &.family-style-3 {
--_width: 75px;
a {
font-size: .8em;
text-align: center;
line-height: 1.2;
padding: 10px;
}
img {
width: var(--_width);
}
.product-families-product-attributes {
width: calc( var(--_width) + var(--padding) );
margin-top: 3px;
}
}
}
.woocommerce-review-link {
margin: 0;
color: var(--textColorAlt);
}
.woocommerce-product-details__short-description {
color: var(--textColorAlt);
font-size: var(--intermediate-font-size);
}
.woosb-wrap {
margin-top: var(--spacing);
.woosb-product {
display: grid;
grid-template-columns: 1fr auto;
padding-block: 10px;
border-bottom: 1px solid var(--borderColor);
}
.woosb-availability {
display: none;
}
}
#mollie-applepayDirect-button {
padding-top: 10px;
}
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
width: auto;
float: none;
}
.woocommerce div.product div.wc-product-page-columns {
gap: var(--padding);
}
.woocommerce div.product .woocommerce-product-rating:before,
.woocommerce div.product .woocommerce-product-rating:after {
display: none;
}
.woocommerce div.product .woocommerce-product-rating {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
.woocommerce div.product .single_product_brandimage {
max-height: 60px;
float: right;
margin: 0 0 10px 10px;
}
.woocommerce div.product .summary .stock,
.stock {
display: flex;
flex-direction: column;
color: inherit;
}
.stock.in-stock strong {
color: var(--wc-green);
}
.stock.low-in-stock strong {
color: var(--wc-orange);
}
.stock.on-backorder strong {
color: var(--wc-orange);
}
.stock.out-of-stock strong {
color: var(--wc-red);
}
main div.product section.products {
padding: var(--padding) 0;
content-visibility: auto;
}
.woocommerce-product-details__short-description p:first-child {
margin-top: 0;
}
.woocommerce-product-details__short-description p:last-child {
margin-bottom: 0;
}
._shipping_class_description,
._sale_price_dates_to {
border-radius: var(--border-radius);
padding: calc( var(--padding) / 2 );
}
._shipping_class_description {
background: var(--grayscale);
}
._shipping_class_description p:before {
display: inline-block;
content: "";
mask: url(/wp-content/themes/basetheme/assets/truck.svg) no-repeat 50% 50%;
-webkit-mask: url(/wp-content/themes/basetheme/assets/truck.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
aspect-ratio: 1;
width: 1lh;
}
._sale_price_dates_to {
background: #F0F6FF;
color: #3578E5;
}
._sale_price_dates_to p:before {
display: inline-block;
content: "";
mask: url(/wp-content/themes/basetheme/assets/calendar.svg) no-repeat 50% 50%;
-webkit-mask: url(/wp-content/themes/basetheme/assets/calendar.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
aspect-ratio: 1;
width: 1lh;
}
._shipping_class_description p,
._sale_price_dates_to p {
display: flex;
align-items: center;
gap: 5px;
padding: 0;
margin: 0;
}
.woocommerce .product form.cart { .cart-button-wrapper {
&[data-hasquantity='true'] {
display: grid;
grid-template-columns: 150px 1fr;
gap: 5px;
}
&[data-hasquantity='false'] {
.quantity, 
.quantity-block {
display: none;
}
}
} .quantity-block {
display: grid;
grid-template-columns: repeat( 3, 1fr );
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: inherit;
border: var(--border-width) solid var(--borderColor);
border-radius: var(--border-radius);
button, input {
border: 0;
padding-inline: 0;
text-align: center;
}
button {
background-color: transparent;
&:hover {
background-color: var(--grayscale);
cursor: pointer;
}
}
} div.quantity .qty {
height: 100%;
width: min( 150px, 100% );
text-align: center;
appearance: none;
-moz-appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
} .woocommerce-variation-add-to-cart.variations_button { &.woocommerce-variation-add-to-cart-disabled {
filter: grayscale(100%);
cursor: not-allowed;
position: relative;
&:after {
content: "";
display: block;
position: absolute;
inset: 0;
background: rgba(255,255,255,0.5);
}
}
}
} .woocommerce div.product form.cart table.variations {
width: 100%;
padding-block: 10px;
tbody, tr, th, td {
display: block;
width: 100%;
font-weight: normal;
}
tr {
position: relative;
}
label {
position: absolute;
top: 4px;
left: 15px;
right: 15px;
font-size: .6rem;
transition: .3s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--textColorAlt);
}
select,
input {
padding-block: 14px;
padding-inline: 16px;
width: 100%;
}
} .woocommerce div.product form.cart table.woocommerce-grouped-product-list {
width: 100%;
padding-block: 10px;
tr {
display: grid;
grid-template-columns: 100px 1fr;
gap: 5px;
align-items: center;
padding-block: 5px;
td {
&.woocommerce-grouped-product-list-item__quantity {
grid-row: span 2;
.button.product_type_simple {
font-size: 0;
text-align: center;
&:before {
content: '';
display: inline-block;
mask: url(/wp-content/themes/basetheme/assets/view.svg) no-repeat 50% 50%;
mask-size: cover;
height: var(--medium-font-size);
aspect-ratio: 1;
background-color: currentColor;
}
}
}
&.woocommerce-grouped-product-list-item__label {
}
&.woocommerce-grouped-product-list-item__price {
grid-column: 2;
display: flex;
gap: 5px;
.stock {
margin-block: 0;
flex-direction: row;
gap: 5px;
}			
}
}
}
tr.outofstock {
}
} .woocommerce a.added_to_cart {
display: none!important;
} #review_form p.stars {
font-size: 2rem;
margin: 0;
a {
position: relative;
height: 1em;
width: 1em;
text-indent: -999em;
display: inline-block;
text-decoration: none;
}
a::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 1em;
aspect-ratio: 1;
mask: url(/wp-content/themes/basetheme/assets/star.svg);
mask-size: contain;
-webkit-mask: url(/wp-content/themes/basetheme/assets/star.svg);
-webkit-mask-size: contain;
background: currentColor;
}
a:hover {
color: var(--wc-stars-color);
}
a.active::before {
color: var(--wc-stars-color);
}
}
#review_form span#reply-title {
display: none;
}
#review_form input, #review_form textarea, #review_form select {
width: 100%;
} #reviews .commentlist,
.wc-block-review-list {
--columns: 1;
list-style: none;
padding: 0;
margin: var(--spacing) 0;
display: grid;
grid-template-columns: repeat( var(--columns), 1fr );
gap: var(--spacing);
@media screen and (min-width: 725px) {
&.wc-block-components-review-list {
--columns: 4;
}
}
li {
padding-block: 10px;
border-bottom: 1px solid var(--grayscale);
.wc-block-review-list-item__meta,
.meta {
margin-block: 0;
}
.rating-stars,
.wc-block-review-list-item__rating__stars {
overflow: hidden;
margin-block: 0;
}
.woocommerce-review__author,
.wc-block-review-list-item__author {
display: block;
font-weight: bold;
}
.woocommerce-review__dash {
display: none;
}
.woocommerce-review__published-date,
.wc-block-review-list-item__published-date {
display: block;
color: var(--textColorAlt);
font-size: var(--small-font-size);
}
.description,
.wc-block-review-list-item__text {
font-size: 1.1em;
padding-top: 5px;
margin-top: 5px;
border-top: 1px solid var(--grayscale);
p {
margin-block: 0;
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
}
}
} #meter {
--meter-color: var(--wc-green);
display: block;
width: 100%;
height: 15px;
background-color: var(--grayscale);
border: 1px solid rgba(0,0,0,0.05);
border-radius: 100vw;
.meter-bar {
display: block;
height: inherit;
border-radius: inherit;
background-color: var(--meter-color);
}
&.shipping-meter {
margin-block: 5px;
}
&.rating-meter {
--meter-color: var(--wc-stars-color);
}
} .wc-count-sorting {
margin-bottom: var(--spacing);
@media screen and (min-width: 725px) {
display: grid;
grid-template-columns: 1fr 350px;
align-items: center;
}
@media screen and (max-width: 724px) {
text-align: center;
}
}
.wc-block-grid {
text-align: left;
}
ul.wc-block-grid__products,
.woocommerce ul.products {  --_columns: 4; @media screen and (min-width: 1101px) {
&.columns-1 {
--_columns: 1;
}
&.columns-2 {
--_columns: 2;
}
&.columns-3 {
--_columns: 3;
}
&.columns-4 {
--_columns: 4;
}
&.columns-5 {
--_columns: 5;
}
&.columns-6 {
--_columns: 6;
}
&.columns-7 {
--_columns: 7;
}
&.columns-8 {
--_columns: 8;
}
&.columns-9 {
--_columns: 9;
}
&.columns-10 {
--_columns: 10;
}
} @media screen and (min-width: 725px) and (max-width: 1100px) {
&.columns-1 {
--_columns: 1;
}
&.columns-2 {
--_columns: 2;
}
&.columns-3 {
--_columns: 3;
}
&.columns-4,
&.columns-5,
&.columns-6,
&.columns-7,
&.columns-8,
&.columns-9,
&.columns-10 {
--_columns: 4;
}
} @media screen and (max-width: 724px) {
--_columns: 1;
}
list-style: none;
display: grid;
gap: 10px;
padding: 0;
container-type: inline-size;
container-name: productlist;
grid-template-columns: repeat( var(--_columns), 1fr );
grid-template-rows: repeat( 4, auto );;
font-size: 1rem;
&::after, &::before {
display: none;
}
li {
--_spacing: 15px;
--_border-radius: var(--border-radius);  background-color: var(--product_backgroundColor);
gap: calc( var(--_spacing) * .7 );
overflow: hidden;
position: relative;
border-width: var(--border-width);
padding: var(--_spacing);
border-radius: var(--_border-radius);
display: grid;
grid-template-rows: subgrid;
grid-row: span 4; @media screen and (max-width: 724px) { 
--_border-radius: 0;
grid-template-columns: 100px 1fr auto;
grid-template-rows: auto;
row-gap: 0;
box-shadow: none;
border-width: 0px;
border-bottom-width: var(--border-width);
padding-block: 5px;
.btt_image_wrapper {
grid-column: 1;
grid-row: 1 / span 2;
height: 100%;
aspect-ratio: initial;
}
.btt_price_wrapper {
grid-column: 2;
}
.btt_product_buttons {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
.view_product {
display: none;
}
}
} &.list-has-1-columns {
grid-template-columns: 100px 1fr auto;
grid-template-rows: auto;
row-gap: 0;
.btt_image_wrapper {
grid-column: 1;
grid-row: 1 / span 2;
height: 100%;
aspect-ratio: initial;
}
.btt_price_wrapper {
grid-column: 2;
}
.btt_product_buttons {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
.view_product {
display: none;
}
}
}  a {
display: block;
height: 100%;
}
.wc-block-grid__product-title,
h2,
.price {
font-size: inherit;
font-weight: normal;
font-family: var(--headingFont);
line-height: 1.2;
}
.btt_image_wrapper {
position: relative;
}
.wc-block-grid__product-image,
.basetheme_product_thumbnail {
aspect-ratio: 1;
display: grid;
place-items: center;
img {
width: auto;
max-height: 100%;
max-width: 100%;
margin: 0;
}
}
.wc-block-grid__product-price,
.btt_price_wrapper {
.stock {
font-size: var(--small-font-size);
@media screen and (min-width: 725px) {
padding-top: var(--_spacing);
}
@media screen and (max-width: 724px) {
color: var(--textColorAlt);
.stock-string {
display: none;
}
}
}
}
.btt_rating_wrapper {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
gap: 5px;
@media screen and (max-width: 724px) {
.rating-stars {
margin-block: 0;
height: 1.5ch;
}
}
.rating-counter {
color: var(--textColorAlt);
font-size: .8em;
}
}
.wc-block-grid__product-add-to-cart,
.btt_product_buttons {
display: flex;
gap: 5px;
a {
background: var(--grayscale);
color: var(--textColor);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
padding: 7px;
height: 48px; line-height: 1;
&:has(span) {
gap: 5px;
}
&:before {
content: '';
display: inline-block;
mask: url(/wp-content/themes/basetheme/assets/view.svg) no-repeat 50% 50%;
mask-size: cover;
height: max( 16px, 1.3lh );
aspect-ratio: 1;
background-color: currentColor;
}
&.product_type_variable,
&.ajax_add_to_cart {
background: var(--wc-primary);
border-color: var(--wc-primary);
aspect-ratio: 1;
font-size: 0;
width: auto;
&:before {
background-color: var(--wc-primary);
mask: url(/wp-content/themes/basetheme/assets/add-to-cart.svg) no-repeat 50% 50%;
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
&.product_type_variable:before {
mask: url(/wp-content/themes/basetheme/assets/select-options.svg) no-repeat 50% 50%;
}
&.added:before {
mask: url(/wp-content/themes/basetheme/assets/check.svg) no-repeat 50% 50%;
}
&.loading:before {
mask: unset;
background-color: transparent;
border: 4px solid transparent;
height: 16px; border-top-color: var(--wc-primary);
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
}
&:hover {
filter: brightness(90%);
}
}
}
}
li:hover {
border-color: var(--main);
} 
} .wc-block-grid__product-onsale,
.woocommerce .btt_badges {
position: absolute;
top: var(--padding);
z-index: 10;
@media screen and (min-width: 725px) {
left: var(--padding);
} 
span:not(.badge, .badge_inner),
.badge {
--_background: var(--second);
font-weight: bold;
padding: 5px 10px;
border-radius: var(--border-radius);
background: var(--_background);
margin: 1px;
.badge_inner {
color: var(--_background);
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
&.new {
--_background: var(--wc-orange);
}
&.sale {
--_background: var(--wc-green);
}
&.aanrader {
--_background: var(--main);
}
&.lowstock {
--_background: var(--grayscale);
}
&.bulkdiscount {
--_background: var(--headerBackground);
}
&.custom_badge {
--_background: var(--wc-primary);
}
}
}
.price {
font-size: 1.3rem;
font-family: var(--headingFont);
color: var(--textColor);
margin: 0;
&:has(del) {
display: flex;
gap: .75em;
}
.woocommerce-Price-amount {
font-weight: normal;
}
del {
color: var(--textColorAlt);
}
ins {
text-decoration: none;
color: var(--wc-red);
}
}
.wc-block-review-list-item__rating__stars,
.wc-block-components-product-rating-stars__stars,
.rating-stars {
display: inline-block;
height: 24px;
aspect-ratio: 5 / 1;
mask: url(/wp-content/themes/basetheme/assets/star.svg);
mask-size: contain;
-webkit-mask: url(/wp-content/themes/basetheme/assets/star.svg);
-webkit-mask-size: contain;
background: var(--grayscale);
margin-block: 5px;
span,
.bar {
display: block;
background: var(--wc-stars-color);
height: inherit;
font-size: 0;
}
}
.has-large-font-size .rating-stars {
height: 36px;
}
.has-x-large-font-size .rating-stars {
height: 42px;
}
body.single-product {
[id*="product-"].product.type-product {
border-width: 0;
box-shadow: none;
}
} @media screen and (min-width:  725px) {
.wc-product-column-layout-switched .wc-product-page-column.product-summary {
order: 0;
}
.wc-product-column-layout-switched .wc-product-page-column.product-image {
order: 1;
position: relative;
}
} .woocommerce-product-gallery {
color: var(--textColor);
position: relative;
img {
margin: 0 auto;
border-radius: var(--border-radius);
&.zoomImg {
background: var(--contentBackground);
}
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
}
.woocommerce-product-gallery__image {
text-align: center; img {
max-height: 500px;
object-fit: contain;
}
}
ul.flex-direction-nav {
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: var(--padding);
right: var(--padding);
li a {
--_sizing: 40px;
display: block;
font-size: 0;
width: var(--_sizing);
aspect-ratio: 1;
border-radius: 100px;
}
a:before {
display: block;
width: 100%;
aspect-ratio: 1;
font-size: 2rem;
color: currentColor;
}
li.flex-nav-prev a:before {
content: '←';
}
li.flex-nav-next a:before {
content: '→';
}
} .woocommerce div.product div.images {
.flex-control-thumbs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
padding-block: 10px;
li {
width: 60px;
margin: 0;
padding: 0;
float: none;
border-radius: var(--border-radius);
transition: .3s;
img {
border: var(--border-width) solid transparent;
&.flex-active {
border-color: var(--textColor);
}
}
}
}
} .wc-product-gallery-layout-bullets.woocommerce div.product div.images {
.flex-control-thumbs li {
height: 10px;
background-color: currentColor;
li {
&:hover,
&:has( img.flex-active ) {
background: var(--main);
}
img {
opacity: 0;
}
}
}
} @media screen and (min-width: 725px) {
.wc-product-gallery-layout-leftside .woocommerce-product-gallery {
display: grid;
grid-template-columns: 60px 1fr;
gap: 10px;
}
.wc-product-gallery-layout-leftside.woocommerce div.product div.images .flex-viewport {
order: 2;
}
.wc-product-gallery-layout-leftside.woocommerce div.product div.images .flex-control-thumbs {
order: 1;
flex-direction: column;
overflow-y: auto;
}
.wc-product-gallery-layout-leftside.woocommerce div.product div.images .flex-control-thumbs li {
width: 100%;
}
.wc-product-gallery-layout-leftside.woocommerce div.product div.images ul.flex-direction-nav {
display: none;
}
} .wc-product-gallery-layout-no-images.woocommerce div.product div.images .flex-control-thumbs {
display: none;
} .woocommerce div.product {
.woocommerce-tabs {
ul.tabs {
list-style: none;
padding: 0;
margin: 0;
li {
background: transparent;
color: inherit;
border: 0;
&:after, &:before {
display: none;
}
a {
display: block;
color: inherit;
padding-block: calc( var(--spacing) / 2 );
}
}
}
.panel {
content-visibility: auto;
padding-block: var(--spacing);
margin-block: var(--spacing);
}
}
} .woocommerce-page.wc-product-layout-tabbed .woocommerce-tabs ul.tabs {
display: flex;
gap: var(--spacing);
border-top: var(--border-width) solid var(--borderColor);
margin-bottom: var(--spacing);
li {
border-top: 4px solid transparent;
&:hover {
border-color: var(--borderColor);
}
&.active {
border-color: var(--main);
font-weight: bold;
}
}
} .woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs {
display: grid;
grid-template-columns: 250px 1fr;
gap: var(--padding);
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs {
display: flex;
flex-direction: column;
gap: 5px;
border-right: var(--border-width) solid var(--borderColor);
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs li {
border-right: 4px solid transparent;
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs li:hover {
border-color: var(--borderColor);
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs li.active {
border-color: var(--main);
font-weight: bold;
} .woocommerce-page.wc-product-layout-rows .woocommerce-tabs ul.tabs {
display: none;
}
.woocommerce-page.wc-product-layout-rows .woocommerce-tabs .panel {
display: grid!important;
grid-template-columns: 350px 1fr;
gap: var(--spacing);
padding-block: var(--spacing);
margin-block: var(--spacing);
} .woocommerce-page.wc-product-layout-small-rows .woocommerce-tabs ul.tabs {
display: none;
}
.woocommerce-page.wc-product-layout-small-rows .woocommerce-tabs .panel {
display: block!important;
width: min( 100%, var(--smallWrapperWidth) );
margin-inline: auto;
padding-block: var(--spacing);
margin-block: var(--spacing);
border-top: var(--border-width) solid var(--borderColor);
}
.woocommerce-page.wc-product-layout-small-rows .woocommerce-tabs .panel #tab-header h2 {
text-transform: uppercase;
} .u-columns {
display: grid;
gap: var(--padding);
grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr) );
} p.form-row:has( label.woocommerce-form-login__rememberme ) {
display: grid;
gap: var(--padding);
grid-template-columns: 1fr 1fr;
align-items: center;
} .woocommerce-account {
*:before, *:after {
display: none!important;
}
.woocommerce-MyAccount-content {
padding-block: var(--padding);
section {
margin-block: var(--padding);
h2 {
margin-block: 10px;
}
}
}
header.title {
display: flex;
align-items: center;
justify-content: space-between;
margin-block: var(--spacing);
h2 {
font-size: 1.17em; }
a {
color: var(--linkColor);
text-decoration: underline;
}
}
.wp-block-table table {
border: var(--border-width) solid var(--borderColor);
a.button {
width: auto;
background-color: transparent;
border: 0;
text-decoration: underline;
font-weight: bold;
padding-left: 0;
}
}
}
@container main-content (min-width: 725px) {
.woocommerce-account.wc-account-layout-v-tabbed:not(.wc-account-loginform) {
main .woocommerce {
display: grid;
grid-template-columns: 250px 1fr;
gap: var(--padding);
}
}
}
ul.wc-item-meta {
list-style: none;
padding: 0;
margin: 0;
font-size: var(--small-font-size);
li {
display: flex;
gap: 5px;
p {
margin: 0;
}
}
} .wc-block-cart,
.wc-block-checkout { @media screen and (min-width: 725px) {
&.wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout {
display: grid;
grid-template-columns: 1fr 350px;
gap: 20px;
}
} h2 {
font-size: 1.1rem;
margin-bottom: .2rem;
}
button,
.wp-element-button {
display: block;
border-radius: var(--border-radius);
font-weight: bold;
&.wc-block-cart__submit-button,
&.wc-block-components-checkout-place-order-button {
background: var(--wc-primary);
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding-block: 15px;
&:before {
content: '';
display: inline-block;
mask: url(/wp-content/themes/basetheme/assets/payment.svg) no-repeat 50% 50%;
mask-size: cover;
height: 24px;
aspect-ratio: 1;
background-color: currentColor;
}
}
}
svg {
fill: currentColor;
width: 20px;
&.wc-block-components-checkbox__mark {
display: none;
}
}
.wc-block-components-panel__button {
width: 100%;
display: flex;
align-items: center;
text-align: left;
svg {
order: 2;
}
span {
display: inline-block;
order: 1;
}
} .wc-block-components-express-payment {
.wc-block-components-express-payment__event-buttons {
list-style-type: none;
padding: 0;
margin: 0;
}
.wc-block-components-express-payment-continue-rule {
text-align: center;
text-transform: uppercase;
font-size: var(--small-font-size);
}
&.wc-block-components-express-payment--checkout {
border: var(--border-width) solid var(--wc-primary);
padding: 12px 16px;
border-radius: var(--border-radius);
margin-bottom: var(--padding);
background-color: var(--bodyBackground);
}
} .wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
.wc-block-components-panel__button {
color: var(--wc-green);
&:before {
content: '';
display: inline-block;
mask: url(/wp-content/themes/basetheme/assets/coupon.svg) no-repeat 50% 50%;
mask-size: cover;
height: 24px;
aspect-ratio: 1;
background-color: currentColor;
margin-right: 5px;
}
}
.wc-block-components-totals-coupon__form {
display: grid;
grid-template-columns: 1fr auto;
gap: 5px;
padding-top: 10px;
button {
background: var(--wc-primary);
color: #FFF;
border: 0;
aspect-ratio: 1;
height: 100%;
&:after {
content: "+";
display: block;
}
.wc-block-components-button__text {
display: none;
}
&[disabled] {
filter: grayscale(100%);
}
}
}
} .wc-blocks-components-select,
.wc-block-components-text-input {
position: relative;
--_label-size: 1rem;
--_top: 10px;
--_labelColor: var(--textColorAlt);
select,
input {
padding: 12px 16px;
}
label {
position: absolute;
top: var(--_top);
left: 15px;
right: 15px;
font-size: var(--_label-size);
color: var(--_labelColor);
transition: .3s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.is-active {
--_label-size: .6rem;
--_top: 2px;
}
&.has-error {
--_labelColor: var(--wc-red);
}
}
.wc-blocks-components-select {
--_top: 2px; --_label-size: .6rem;
}
.wc-block-components-checkbox {
padding-block: 5px;
label {
display: flex;
align-items: flex-start;
gap: 5px;
line-height: 1.3;
}
}
.wc-blocks-components-select__container {
svg {
display: none;
}
} .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
border: var(--border-width) solid var(--borderColor);
padding: 12px 16px;
border-radius: var(--border-radius);
margin-bottom: var(--padding); .wc-block-components-panel {
padding-bottom: 10px;
margin-bottom: 10px;
} .wc-block-components-order-summary-item {
.wc-block-components-product-low-stock-badge,
.wc-block-components-order-summary-item__image,
.wc-block-components-product-metadata__description {
display: none;
}
.wc-block-components-product-details {
list-style: none;
padding: 0;
margin: 0;
font-size: var(--intermediate-font-size);
color: var(--textColorAlt);
li {
&.wc-block-components-product-details__voorraad {
.wc-block-components-product-details__name {
display: none;
}
}
}
}
.wc-block-components-order-summary-item__total-price {
.price {
font-size: 1rem;
}
}
} .wc-block-components-totals-item {
display: grid;
grid-template-columns: 1fr auto;
padding-block: 8px;
.wc-block-components-totals-item__description {
color: var(--textColorAlt);
font-size: var(--intermediate-font-size);
}
}
.wc-block-components-totals-footer-item-tax {
margin: 0;
}
} .wc-block-checkout__shipping-method-container,
.wc-block-components-radio-control {
display: grid;
gap: 5px;
@media screen and (min-width: 725px) {
grid-template-columns: repeat(2, 1fr);
}
input[type="radio"] {
display: none;
}
.wc-block-checkout__shipping-method-option,
label {
background-color: var(--backgroundColor);
border: var(--border-width) solid var(--textColor);
border-radius: var(--border-radius);
padding: 12px 16px;
cursor: pointer;
.wc-block-checkout__shipping-method-option-price,
.wc-block-components-radio-control__secondary-label {
display: block;
color: var(--textColorAlt);
font-size: .8rem;
}
&.wc-block-checkout__shipping-method-option--selected,
&.wc-block-components-radio-control__option-checked {
border-color: var(--accent);
color: var(--accent);
}
&:hover {
filter: brightness(90%)
}
.wc-block-components-radio-control__description-group {
font-size: .8rem;
}
}
.wc-block-components-radio-control-accordion-content {
display: none;
}
} .wp-block-woocommerce-cart-totals-block .wc-block-components-shipping-rates-control__package {
.wc-block-components-radio-control {
grid-template-columns: 1fr;
}
}
} .woocommerce-cart-page {
@media screen and (min-width: 725px) {
display: grid;
grid-template-columns: 1fr 350px;
gap: var(--padding);
}
}
.woocommerce-cart {
.cart-header {
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
padding: 0;
margin: 0;
background: transparent;
}
.woocommerce-info:has( .showcoupon ) {
display: none!important;
}
.woocommerce-notices-wrapper {
width: min(350px, 100%);
}
}
main {
&:has( .wc-empty-cart-message ) {
text-align: center;
.wc-empty-cart-message {
font-size: var(--medium-font-size);
}
}
}
table.wc-block-cart-items,
table.shop_table {
border: 0;
width: 100%;
thead,
td.product-remove,
.product-price,
.product-subtotal,
.wc-block-cart-item__total {
display: none;
}
tr {
position: relative;
}
td {
padding: 0;
margin: 0;
border: 0;
background: transparent!important; }
tr.cart_item {
grid-template-columns: var(--image_column) 1fr var(--qty_column); }
tr.wc-block-cart-items__row {
grid-template-columns: var(--image_column) 1fr; }
tr.wc-block-cart-items__row,
tr.cart_item {
display: grid;
align-items: center;
gap: var(--padding);
padding-block: var(--padding); @media screen and (min-width: 725px) {
--image_column: 100px;
--qty_column: 100px;
padding-inline: var(--padding);
border: var(--border-width) solid var(--borderColor);
border-radius: var(--border-radius);
margin-bottom: var(--padding);
} @media screen and (max-width: 724px) {
--image_column: 75px;
--qty_column: 0;
border-bottom: var(--border-width) solid var(--borderColor);
}
}
.wc-block-cart-item__image,
.product-thumbnail {
padding-inline: 0;
a {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1;
background: var(--grayscale);
border-radius: var(--border-radius);
}
img {
border-radius: var(--border-radius);
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
object-fit: contain;
}
}
.wc-block-cart-item__product {
a {
color: var(--textColor);
font-family: var(--headingFont);
font-weight: bold;
}
.price {
display: flex;
font-size: var(--medium-font-size);
padding-block: 5px;
}
p {
margin: 0;
}
.wc-block-components-product-low-stock-badge,
p.backorder_notification {
font-size: var(--small-font-size);
color: var(--wc-orange);
@media screen and (min-width: 725px) {
display: inline-block;
position: absolute;
top: 5px;
right: 5px;
padding: 3px 6px;
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--border-radius);
background-color: currentColor;
opacity: .05;
}
}
@media screen and (max-width: 724px) {
display: block;
}	
}
.wc-block-components-product-badge.wc-block-components-sale-badge {
display: none;
}
.wc-block-components-product-metadata__description {
display: none;
font-size: var(--small-font-size);
padding-block: 5px;
}
ul.wc-block-components-product-details,
dl.variation {
font-size: var(--small-font-size);
margin: 0;
padding: 0;
display: flex;
gap: 5px;
list-style: none;
dt, dd {
margin-left: 0;
float: none;
}
dd.variation-delivery {
color: var(--wc-green);
}
}
.wc-block-cart-item__quantity {
display: flex;
gap: 5px;
align-items: center;
padding-top: 10px;
.wc-block-components-quantity-selector {
display: grid;
grid-template-columns: 36px 1fr 36px;
grid-template-areas: "minus input plus";
align-items: center;
width: min(100%, 150px);
border: 1px solid var(--borderColor);
border-radius: var(--border-radius);
input.wc-block-components-quantity-selector__input,
button {
text-align: center;
background-color: transparent;
color: var(--textColor);
border: 0;
padding: 0;
border-radius: 0;
}
input.wc-block-components-quantity-selector__input {
grid-area: input;
width: max(100%, 50px);
}
button {
aspect-ratio: 1;
&.wc-block-components-quantity-selector__button--minus {
grid-area: minus;
}
&.wc-block-components-quantity-selector__button--plus {
grid-area: plus;
}
}
}
button.wc-block-cart-item__remove-link {
display: inline-block;
width: auto;
font-size: 0;
background-color: transparent;
color: var(--wc-red);
border-color: transparent;
padding: 10px;
overflow: clip;
&:before {
content: '';
display: inline-block;
mask: url(/wp-content/themes/basetheme/assets/trash.svg) no-repeat 50% 50%;
mask-size: cover;
height: var(--small-font-size);
aspect-ratio: 1;
background-color: currentColor;
}
&:hover {
border-color: currentColor;
}
}
}
}
}
.wp-block-woocommerce-cart-cross-sells-block {
padding-block: var(--padding);
& > div {
display: flex;
gap: 20px;
margin-top: calc( var(--padding) / 2 );
.cross-sells-product {
flex: 1;
max-width: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
& > div {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
.wc-block-components-product-rating-stars {
position: absolute;
top: 5px;
left: 10px;
}
.wc-block-components-product-image {
display: grid;
place-content: center;
aspect-ratio: 1;
border-radius: var(--border-radius);
padding: 10px;
background-color: var(--grayscale);
}
.wc-block-components-product-name {
font-size: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;  
overflow: hidden;
}
}
}
.add_to_cart_button {
display: flex;
align-items: center;
gap: 5px;
font-size: var(--small-font-size);
width: max-content;
&:before {
content: '';
display: inline-block;
mask: url(/wp-content/themes/basetheme/assets/add-to-cart.svg) no-repeat 50% 50%;
mask-size: cover;
height: 1lh;
aspect-ratio: 1;
background-color: var(--wc-primary);
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
&.loading:before {
mask: unset;
background-color: transparent;
border: 4px solid transparent;
height: calc(1lh - 8px); border-top-color: var(--wc-primary);
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
}
}
}
}
.woocommerce .cart-collaterals {
.cart_totals {
float: none;
width: 100%;
border: var(--border-width) solid var(--borderColor);
border-radius: var(--border-radius);
padding: var(--spacing);
}
.wp-block-woocommerce-cart-order-summary-block,
table.shop_table {
tr, th, td {
display: block;
padding: 0;
border: 0;
width: 100%;
font-weight: normal;
}
.wc-block-components-totals-wrapper,
tr {
padding-block: 10px;
}
.wc-block-components-totals-item__label,
th {
font-size: var(--small-font-size);
}
.wp-block-woocommerce-cart-order-summary-discount-block,
tr.cart-discount td {
color: var(--wc-green);
}
.wc-block-components-totals-wrapper:empty {
display: none;
}
.wc-block-components-totals-shipping {
.wc-block-components-totals-item__description {
display: none;
}
fieldset {
margin: 0;
}
}
.woocommerce-shipping-destination {
font-size: var(--small-font-size);
line-height: 1.3;
}
}
.wc-block-components-order-summary-item {
padding-block: 10px;
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__image,
.wc-block-components-product-details,
.wc-block-components-product-metadata__description {
display: none;
}
}
} .wc_mini_cart {
.woocommerce-mini-cart {
list-style: none;
padding: 0;
margin: 0;
.woocommerce-mini-cart-item {
padding-block: var(--spacing);
--_imagesize: 50px;
--_gap: 10px;
border-bottom: 1px solid var(--borderColor);
.remove_from_cart_button {
display: none;
}
.variation-Voorraad {
display: none;
}
.variation-backorder {
color: var(--wc-orange);
}
dl {
display: flex;
gap: 5px;
font-size: var(--small-font-size);
dd, p {
margin: 0;
}
}
span.quantity {
display: block;
margin-top: 10px;
font-size: var(--intermediate-font-size);
}
img {
max-width: var(--_imagesize);
max-height: var(--_imagesize);
width: auto;
height: auto;
border-radius: var(--border-radius);
float: right;
margin-left: var(--_gap);
}
}
}
} .wc-block-checkout {
.wc-block-components-checkout-step__heading {
display: flex;
justify-content: space-between;
}
.wc-block-checkout__actions {
position: sticky;
bottom: 0;
margin-top: 15px;
padding-block: 15px;
}
a {
text-decoration: underline;
} &:not([data-show-form-step-numbers="true"]) {
fieldset {
background-color: var(--grayscale);
padding: 15px;
border-radius: var(--border-radius);
border: var(--border-width) solid var(--borderColor);
}
} @media screen and (min-width: 725px) { &[data-show-form-step-numbers="true"] {
counter-reset: section;
--_counter-width: 25px;
.wc-block-components-checkout-step__heading {
margin-block: 1.5em 0.6em;
}
.wc-block-checkout__terms,
.wc-block-components-checkout-step__container {
border-left: var(--border-width) solid var(--grayscale);
padding-left: var(--_counter-width);
}
.wc-block-components-checkout-step h2:before {
display: inline-block;
counter-increment: section;
content: counter(section) ". ";
width: calc( var(--_counter-width) + var(--border-width) );
}
} .wc-block-components-main {
order: 1;
}
.wc-block-components-sidebar {
order: 2;
}
} @media screen and (max-width: 724px) {
.wp-block-woocommerce-checkout-order-summary-shipping-block,
.wp-block-woocommerce-checkout-order-summary-subtotal-block {
display: none;
}
} .wc-block-checkout__form fieldset,
#customer_details div[class*="col"] {
width: auto;
float: none;
margin-bottom: var(--spacing);
.wc-block-components-checkout-step__description {
margin-top: 0;
color: var(--textColorAlt);
}
} .wc-block-checkout__guest-checkout-notice {
color: var(--textColorAlt);
margin-top: 0;
}
.wc-block-components-password-strength {
meter {
width: 100%;
}
} .components-button-group.wc-block-checkout__shipping-method-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
button {
.wc-block-checkout__shipping-method-option-price {
display: block;
font-size: var(--small-font-size);
}
&.wc-block-checkout__shipping-method-option--selected {
outline: var(--border-width) solid var(--wc-primary);
}
}
} .wc-block-components-address-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: start;
border: var(--border-width) solid var(--borderColor);
padding: 12px 16px;
border-radius: var(--border-radius);
margin-bottom: var(--padding);
address {
font-style: normal;
span {
display: block;
}
.wc-block-components-address-card__address-section:first-child {
font-weight: bold;
}
}
.wc-block-components-address-card__edit {
cursor: pointer;
text-decoration: underline;
}
} .wc-block-components-address-address-wrapper {
.wc-block-components-address-form-wrapper {
transition: all .3s ease-in-out;
width: 100%;
}
&:not(.is-editing) {
.wc-block-components-address-form-wrapper {
height: 0;
opacity: 0;
visibility: hidden;
}
}
&.is-editing {
.wc-block-components-address-card-wrapper {
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
}
.wc-block-components-address-form-wrapper {
opacity: 1;
}
}
} .wc-block-components-validation-error {
color: var(--wc-red);
font-size: .8rem;
padding-inline: var(--border-radius);
padding-block: 3px;
p {
margin: 0;
}
} .wc-block-components-order-summary-item {
padding-block: 10px;
.wc-block-components-product-name {
font-weight: bold;
}
.wc-block-components-order-summary-item__individual-prices {
display: none;
}
} .wc-block-components-address-form {
&:not(#additional-information):not(#contact) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
&:not(:has(.wc-block-components-address-form__address_2)) {
.wc-block-components-address-form__address_1 {
grid-column: span 2;
}
}
.wc-block-components-address-form__email,
.wc-block-components-address-form__company,
.wc-block-components-address-form__phone,
.wc-block-components-address-form__country {
grid-column: span 2;
} .wc-block-components-address-form__address_2-toggle {
grid-column: span 2;
cursor: pointer;
position: relative;
top: -5px;
}
.wc-block-components-address-form__address_2-hidden-input {
display: none;
}
}
} form.woocommerce-checkout {
display: grid;
gap: var(--spacing);
@media screen and (min-width: 725px) {
grid-template-columns: 1fr 1fr;
}
div[class^='col-'] {
width: 100%!important;
float: none!important;
margin-bottom: var(--spacing);
}
#order_review_heading {
display: none;
}
} #add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment {
border-radius: var(--border-radius);
background: var(--grayscale);
padding: var(--padding);
} ul.order_details {
list-style: none;
padding: 0!important;
margin: 10px 0!important;
display: flex;
gap: 20px;
li {
margin: 0!important;
padding: 0!important;
border: 0!important;
}
&:before {
display: none!important;
}
} .woocommerce-order {
h2 {
margin: 10px 0;
font-size: 1.17em;
}
}
.woocommerce address, 
.woocommerce .woocommerce-customer-details address {
font-style: normal;
border: 0;
padding: 0;
font-size: .9em;
line-height: 1.2;
} .wc-block-featured-product {
.wc-block-featured-product__wrapper {
padding: var(--padding);
}
.wc-block-featured-product__background-image {
transition: .3s;
}
&:hover .wc-block-featured-product__background-image {
transform: scale(1.2);
}
.wc-block-featured-product__description, 
.wc-block-featured-product__link, 
.wc-block-featured-product__price, 
.wc-block-featured-product__title, 
.wc-block-featured-product__variation {
padding: 8px 0!important;
}
} .schema-faq {
display: grid;
gap: var(--padding);
.schema-faq-section {
border-bottom: 1px solid var(--borderColor);
}
.schema-faq-section:last-child {
border-bottom: 0;
}
.schema-faq-question {
font-family: var(--headingFont);
font-size: 1.2rem;
}
}  @media screen and (min-width: 725px ) {
.hideThisOnDesktop {
display: none!important;
}
} @media screen and (max-width: 1000px) {
.hideThisOnTablet {
display: none;
}
} @media screen and (max-width: 724px) { 
.hideThisOnMobile {
display: none!important;
}
.padding .wrap, 
.padding .is-style-wrap {
padding: 0;
}
#header ul li .menu_item_icon svg {
width: 24px;
height: 24px;
}
nav.responsive-nav-menu {
position: fixed;
z-index: 5002;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: min( 100%, 250px );
background: var(--mobNavBackground);
color: var(--mobNavColor);
padding: var(--spacing);
transition: .2s;
&.mob-nav-position-right {
left: auto;
right: -100%;
&[mobile-state="show"] {
right: 0;
box-shadow: 0px 0 450px #000;
}
}
&.mob-nav-position-left {
left: -100%;
right: auto;
&[mobile-state="show"] {
left: 0;
box-shadow: 0px 0 450px #000;
}
}
&.mob-nav-position-wide {
top: 100%;
bottom: -100%;
width: 100%;
&[mobile-state="show"] {
top: 0;
bottom: 0;
}
}
header {
padding-block: var(--spacing);
position: sticky;
top: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr 40px;
gap: 10px;
align-items: center;
background: inherit;
border-bottom: 1px solid var(--borderColor);
margin-bottom: var(--spacing);
div {
line-height: 1;
small {
display: block;
}
}
button.closebutton {
background: var(--grayscale);
color: var(--textColor);
padding: 5px;
aspect-ratio: 1;
font-size: 0;
mix-blend-mode: multiply;
}
}
ul {
width: min( 100%, 250px );
margin-inline: auto;
li {
a {
padding: var(--spacing);
}
.menu_item_icon {
width: 0;
}
}
}
}
.mobmenuoverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5001;
display: none;
}
#content[class*='sidebar-show'] {
grid-template-columns: 1fr;
grid-template-areas: "column-1" "column-2";
#sidebar {
grid-area: column-2;
}
} body.single-product {
#content {
padding-top: 0;
}
div.images.woocommerce-product-gallery {
background: var(--grayscale);
margin: 0 calc( var(--padding) * -1 );
border-radius: 0;
.flex-viewport,
.flex-viewport img {
height: 300px!important;
width: auto!important;
}
}
.product_title,
.price {
font-size: 1.1rem;
}
} .woocommerce div.product .woocommerce-tabs ul.tabs {
display: none;
}
.woocommerce div.product .woocommerce-tabs .panel {
grid-template-columns: 1fr;
grid-auto-flow: row;
margin: 0;
}
.woocommerce div.product .woocommerce-tabs .panel .panel-title h2 {
display: grid;
grid-template-columns: 1fr 25px;
align-items: center;
font-size: 1.2em;
margin: 0;
} .cart-header {
.inner {
display: block;
}
.wp-block-button.is-style-woocommerce .wp-block-button__link {
width: 100%;
margin-top: var(--padding);
height: 50px;
}
} .woocommerce-cart {
table.shop_table {
td:before {
display: none;
}
tr.cart_item {
display: grid!important;
padding: 10px;
}
.product-thumbnail {
display: block!important;
}
.product-name {
grid-column: span 2;
text-align: left!important;
}
.product-quantity {
grid-column: span 3;
}
}
}
} #wpadminbar {
background-color: var(--headerBackground);
ul:not(.ab-submenu) {
& > li:not(#wp-admin-bar-query-monitor) {
color: var(--headerColor);
& > a {
max-width: 125px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:not(:hover) {
* {
color: inherit!important;
}
}
}
.ab-icon:before, .ab-item:before {
color: inherit!important;
}
}
#wp-admin-bar-wp-logo,
#wp-admin-bar-my-account .username,
#wp-admin-bar-search,
#wp-admin-bar-updates,
#wp-admin-bar-comments,
#wp-admin-bar-woocommerce-site-visibility-badge {
display: none!important;
}
} .aligncenter {
margin-inline: auto!important;
} .wp-block-media-text {
gap: var(--padding);
.wp-block-media-text__content {
padding: 0;
}
} .wp-block-latest-posts.wp-block-latest-posts__list li {
.wp-block-latest-posts__featured-image {
overflow: hidden;
border-radius: var(--border-radius);
margin-bottom: 1rem;
a {
display: block;
}
img {
width: 100%;
transition: .3s;
}
}
.wp-block-latest-posts__post-title {
display: block;
margin-bottom: .2rem;
}
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date {
opacity: .8;
}
&:hover {
.wp-block-latest-posts__featured-image {
img {
transform: scale(1.2);
}
}
}
} .wp-block-separator {
color: var(--borderColor);
&:not(.is-style-wide):not(.is-style-dots) {
width: 100px;
}
&.is-style-wide {
width: 100%;
}
&.is-style-dots {
color: var(--main);
}
} .wp-block-table {
&.is-style-stripes {
tbody tr:nth-child(odd) {
background-color: var(--grayscale);
}
}
} .wp-block-quote {
border-left: 0;
position: relative;
padding: 0;
margin: 0;
p {
font-style: normal;
margin: 0;
}
&:before {
content: open-quote;
position: absolute;
font-size:  3em;
top: -15px;
left: 0;
transform: translateX( -100% );
}
&:after {
content: no-close-quote;
}
&.is-style-large:before {
font-size: 6em;
}
cite {
font-style: normal;
opacity: .5;
font-size:  .7em;
}
} .is-style-rounded,
.is-style-rounded img {
border-radius: var(--border-radius);
}
.is-style-circle,
.is-style-circle img {
border-radius: 999px;
} .grid {
display: grid;
}
.block {
display: block!important;
}
.inline-block {
display: inline-block!important;
}
.hidden {
display: none!important;
}
.float-none {
float: none!important;
}
.gap {
gap: var(--padding);
}
.nogap {
gap: 0!important;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.sticky {
position: sticky;
}
.fixed {
position: fixed;
}
.nomargin {
margin: 0;
> figure, > img, > svg {
margin: 0!important;
}
}
.nomargintop {
margin-top: 0!important;
}
.nomarginleft {
margin-left: 0!important;
}
.nomarginright {
margin-right: 0!important;
}
.nomarginbottom {
margin-bottom: 0!important;
}
.margin-block {
margin-block: var(--padding);
}
.margin-inline {
margin-inline: var(--padding);
}
.wp-block-columns.nogap > .wp-block-column,
.wp-block-columns.nomargin > .wp-block-column,
.wp-block-columns > .wp-block-column.nomargin {
margin: 0!important;
}
.nopadding {
padding: 0!important;
}
.nopaddingtop {
padding-top: 0!important;
}
.nopaddingleft {
padding-left: 0!important;
}
.nopaddingright {
padding-right: 0!important;
}
.nopaddingbottom {
padding-bottom: 0!important;
}
.padding {
padding: var(--padding);
}
.use-spacing {
padding: var(--spacing);
}
.padding-block {
padding-block: var(--padding);
}
.padding-inline {
padding-inline: var(--padding);
}
.padding-top {
padding-top: var(--padding);
}
.padding-left {
padding-left: var(--padding);
}
.padding-right {
padding-right: var(--padding);
}
.padding-bottom {
padding-bottom: var(--padding);
}
.depth-2 {
box-shadow: var(--depth-2);
}
.depth-4 {
box-shadow: var(--depth-4);
}
.depth-8 {
box-shadow: var(--depth-8);
}
.depth-16 {
box-shadow: var(--depth-16);
}
.depth-28 {
box-shadow: var(--depth-28);
}
.depth-64 {
box-shadow: var(--depth-64);
}
.border {
border: var(--border-width) solid var(--borderColor);
}
.border-radius {
border-radius: var(--border-radius);
overflow: hidden;
}
.no-border-radius {
border-radius: 0!important;
img {
border-radius: 0!important;
}
}
.uppercase {
text-transform: uppercase;
}
.regular {
text-transform: initial;
}
.lowercase {
text-transform: lowercase;
}
@media screen and (max-width: 725px) {
.mob-uppercase {
text-transform: uppercase;
}
.mob-regular {
text-transform: initial;
}
.mob-lowercase {
text-transform: lowercase;
}
}
.align_top {
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
}
.align_middle,
.align_center {
align-content: center;
justify-content: center;
align-items: center;
}
.align_bottom {
align-content: flex-end;
justify-content: flex-end;
align-items: flex-end;
}
.t-left {
text-align: left;
}
.t-center {
text-align: center;
}
.t-right {
text-align: right;
}
@media screen and (max-width: 725px) {
.mob-t-left {
text-align: left;
}
.mob-t-center {
text-align: center;
}
.mob-t-right {
text-align: right;
}
}
.wide {
width: 100%!important;
}
.text-100 {
font-weight: 100;
}
.text-300 {
font-weight: 300;
}
.text-400 {
font-weight: 400;
}
.text-500 {
font-weight: 500;
}
.text-600 {
font-weight: 600;
}
.text-700 {
font-weight: 700;
}
.text-800 {
font-weight: 800;
}
.text-900 {
font-weight: 900;
}
@media screen and (max-width: 725px) {
.mob-text-100 {
font-weight: 100;
}
.mob-text-300 {
font-weight: 300;
}
.mob-text-400 {
font-weight: 400;
}
.mob-text-500 {
font-weight: 500;
}
.mob-text-600 {
font-weight: 600;
}
.mob-text-700 {
font-weight: 700;
}
.mob-text-800 {
font-weight: 800;
}
.mob-text-900 {
font-weight: 900;
}
}
.has-black-color {
color: #000;
}
.has-white-color {
color: #FFF;
}
.has-cyan-bluish-gray-color {
color: #abb8c3;
}
.has-vivid-red-color {
color: #cf2e2e;
}
.has-vivid-orange-color {
color: #ff6900;
}
.has-luminous-vivid-amber-color {
color: #fcb900;
}
.has-light-green-cyan-color {
color: #7bdcb5;
}
.has-vivid-green-cyan-color {
color: #00d084;
}
.has-pale-cyan-blue-color {
color: #8ed1fc;
}
.has-vivid-cyan-blue-color {
color: #0693e3;
}
.has-vivid-cyan-purple {
color: #9b51e0;
}
.has-primary-color {
color: var(--main);
}
.has-primary-background-color {
background-color: var(--main);
}
.has-secondary-color {
color: var(--second);
}
.has-secondary-background-color {
background-color: var(--second);
}
.has-accent-color {
color: var(--accent);
}
.has-accent-background-color {
background-color: var(--accent);
}
.has-border-color-color {
color: var(--borderColor);
}
.has-border-color-background-color {
background-color: var(--borderColor);
}
[class*="-font-size"] {
font-size: var(--_sizing)!important;
line-height: var(--_line-height)!important;
}
.has-small-font-size {
--_sizing: var(--small-font-size);
--_line-height: 1.7;
}
.has-intermediate-font-size {
--_sizing: var(--intermediate-font-size);
--_line-height: 1.6;
}
.has-default-font-size {
--_sizing: var(--default-font-size);
--_line-height: 1.5;
}
.has-medium-font-size {
--_sizing: var(--medium-font-size);
--_line-height: 1.4;
}
.has-large-font-size {
--_sizing: var(--large-font-size);
--_line-height: 1.2;
}
.has-huge-font-size,
.has-x-large-font-size {
--_sizing: var(--x-large-font-size);
--_line-height: 1.1;
}
.has-parent-font-size {
font-size: inherit!important;
line-height: inherit!important;
}
@media screen and (ma-width: 724px) {
.mob-has-small-font-size {
--_sizing: var(--small-font-size);
--_line-height: 1.7;
}
.mob-has-intermediate-font-size {
--_sizing: var(--intermediate-font-size);
--_line-height: 1.6;
}
.mob-has-default-font-size {
--_sizing: var(--default-font-size);
--_line-height: 1.5;
}
.mob-has-medium-font-size {
--_sizing: var(--medium-font-size);
--_line-height: 1.4;
}
.mob-has-large-font-size {
--_sizing: var(--large-font-size);
--_line-height: 1.2;
}
.mob-has-huge-font-size,
.mob-has-x-large-font-size {
--_sizing: var(--x-large-font-size);
--_line-height: 1.1;
}
} @media (prefers-reduced-motion: reduce) {
* {
animation-duration: .01ms!important;
animation-iteration-count: 1!important;
transition-duration: .01ms!important;
scroll-behavior: auto!important;
}
} [hidden] {
display: none!important;
}
[disabled] {
opacity: .5;
}
[content-state="collapsed"] {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;  
overflow: hidden;
} @keyframes parallax {
to { transform: translateY( calc( var(--parallax-speed) * 200px ) ); }
}
@keyframes showsub {
from { margin-top: -20px; }
to { margin-top: 0px; }
}
@keyframes button-loading-spinner {
to { transform: rotate(1turn); }
}#header {
.inner {
background-color: var(--headerBackground);
color: var(--headerColor);
position: relative;
@media screen and (max-width: 724px) {
padding-block: calc( var(--padding) * 1.5 );
}
.site_info {
width: min(200px, 100%);
@media screen and (max-width: 724px) {
width: min(100px, 100%);
}
}
}
&.transparent_header:not(.scroll) {
.inner {
@media screen and (min-width: 725px) {
&:after {
content: "";
display: block;
background: url(/wp-content/themes/basetheme-child/header.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
right: 0;
height: 150px;
top: 100%;
}
}
}
}
&.scroll {
box-shadow: var(--depth-2);
}
}
#banner {
background-image: url(/wp-content/themes/basetheme-child/banner.jpg);
.woocommerce-ordering {
display: none;
}
h1 {
-webkit-text-stroke: 6px var(--main);
paint-order: stroke fill;
@media screen and (min-width: 725px) {
margin-top: 125px;
}
}
ol {
-webkit-text-stroke: 2px var(--main);
paint-order: stroke fill;
}
}
#sidebar {
.widget {
padding-bottom: var(--spacing);
margin-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--borderColor);
h2 {
color: var(--main);
margin-bottom: var(--spacing);
}
ul {
margin: 0;
&.sub-menu {
display: none;
}
li {
padding-block: 5px;
border-bottom: var(--border-width) solid var(--borderColor);
}
}
button {
margin-top: 5px;
color: #FFF;
}
}
}
#sidebar .widget .inner_widget ul li .menu_item_dropdown {
display: none;
}
.woocommerce div.product {
.product_title {
font-size: 3em;
line-height: 1;
color: #FFF;
-webkit-text-stroke: 6px var(--main);
paint-order: stroke fill;
}
.summary .price {
font-size: 2rem;
}
}
#footer {
background-image: url(/wp-content/themes/basetheme-child/banner.jpg);
position: relative;
h2 {
color: var(--main);
margin-block: 0 var(--spacing);    
}
.wp-block-column {
background: var(--backgroundColor);
color: var(--textColor);
padding: var(--spacing);
border-radius: var(--border-radius);
}
.product_list_widget {
a {
display: grid;
grid-template-columns: 50px 1fr;
gap: 5px;
align-items: center;
}
}
}
.woocommerce table.cart p.price, 
.woocommerce div.product p.price, 
.woocommerce div.product span.price, 
.woocommerce ul.products li.product .price {
color: var(--main);
}
#above_footer .wc-block-product-categories-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#above_footer .wc-block-product-categories-list .wc-block-product-categories-list.wc-block-product-categories-list--depth-1 {
display: none;
}
@media screen and (min-width: 725px) {
#footer {
padding-top: 150px;
}
#footer:before {
content: "";
display: block;
background: url(/wp-content/themes/basetheme-child/footer-top.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
right: 0;
height: 150px;
top: 0%;
}
}