/* Webshop template 2: complete webshop. Colors, font, corners and product images come from the layout settings (theme.php) */

/* Base */
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{ margin: 0; background-color: var(--background); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; }
*, *::before, *::after{ box-sizing: border-box; }
body *{ font-family: inherit; color: inherit; }
img{ max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4{ margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1{ font-size: clamp(26px, 4vw, 36px); }
h2{ font-size: clamp(20px, 2.6vw, 26px); }
h3{ font-size: 18px; }
p{ margin: 0 0 1em; }
ul, ol{ margin: 0; padding: 0; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.container{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px){ .container{ padding: 0 24px; } }
.section{ margin-top: 48px; margin-bottom: 48px; }
.section-heading{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-heading a{ font-weight: 600; white-space: nowrap; }
.section-title{ margin-bottom: 20px; }
.skip-link{ position: absolute; left: 8px; top: -60px; z-index: 300; padding: 8px 16px; background: var(--accent); color: var(--accent-text); border-radius: var(--radius); }
.skip-link:focus{ top: 8px; }
.site-main{ display: block; min-height: 50vh; outline: none; }
.page-message{ padding: 48px 0; }
.webshop-hint{ font-size: 14px; opacity: .75; }
.webshop-message.error, span.error, p.error{ color: #b42318; font-weight: 600; }

/* Forms and buttons */
input[type="text"], input[type="search"], input[type="email"], input[type="number"], select, textarea{ width: 100%; max-width: 100%; height: 44px; padding: 0 14px; border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--radius); background-color: #ffffff; color: #1f2328; font-size: 16px; line-height: normal; }
textarea{ height: 110px; padding: 10px 14px; }
input:focus, select:focus, textarea:focus{ border-color: var(--accent); outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.button, input[type="submit"], button.product-card-add, .catalog-filters-open{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border: 1px solid var(--accent); border-radius: var(--radius); background-color: transparent; color: var(--accent); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none !important; transition: background-color .15s, color .15s, opacity .15s; }
.button:hover, button.product-card-add:hover{ background-color: var(--accent); color: var(--accent-text); }
.button.active, .button-primary, input[type="submit"]{ background-color: var(--accent); color: var(--accent-text); }
.button.active:hover, .button-primary:hover, input[type="submit"]:hover{ opacity: .88; }
.button *, .button-primary *{ color: inherit; }

/* Announcement and header */
.announcement-bar{ padding: 8px 16px; background-color: var(--accent); color: var(--accent-text); font-size: 14px; text-align: center; }
.site-header{ position: relative; z-index: 100; background-color: var(--background); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.site-header.is-sticky{ position: sticky; top: 0; }
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.site-header.style-dark{ background-color: #111111; color: #ffffff; border-bottom-color: rgba(255, 255, 255, .1); }
.site-header.style-accent{ background-color: var(--accent); color: var(--accent-text); border-bottom-color: transparent; }
.header-inner{ display: flex; align-items: center; gap: 12px; min-height: 68px; }
.site-logo{ display: inline-flex; align-items: center; margin-right: auto; font-size: 20px; font-weight: 700; text-decoration: none !important; }
.site-logo img{ display: block; width: auto; height: var(--logo-height); max-width: 200px; object-fit: contain; }
.header-button{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: var(--radius); background: none; cursor: pointer; text-decoration: none !important; }
.header-button:hover{ background-color: rgba(127, 127, 127, .12); }
.header-button .icon{ width: 24px; height: 24px; fill: currentColor; }
.header-badge{ position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background-color: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.style-accent .header-badge{ background-color: var(--accent-text); color: var(--accent); }
.header-badge:empty, .header-badge.webshop-shopping-cart-amount:not(.has-items){ display: none; }
.header-actions{ display: flex; align-items: center; gap: 2px; }
.header-back{ font-weight: 600; }
.site-search{ order: 10; display: flex; flex: 1 1 100%; margin-bottom: 12px; }
.site-search input{ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.site-search button{ flex: 0 0 auto; width: 48px; border: 1px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background-color: var(--accent); color: var(--accent-text); cursor: pointer; }
.site-search button .icon{ width: 22px; height: 22px; fill: currentColor; }
.header-inner{ flex-wrap: wrap; }
@media (min-width: 900px){
	.header-inner{ flex-wrap: nowrap; gap: 24px; min-height: 80px; }
	.site-logo{ margin-right: 0; }
	.site-search{ order: 0; flex: 1 1 auto; max-width: 560px; margin: 0 auto; }
	.menu-toggle{ display: none; }
}

/* Language switch */
.language-switch{ position: relative; }
.language-switch summary{ display: flex; align-items: center; height: 44px; padding: 0 10px; border-radius: var(--radius); font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.language-switch summary::-webkit-details-marker{ display: none; }
.language-switch ul{ position: absolute; right: 0; top: 100%; z-index: 120; min-width: 160px; padding: 6px; border-radius: var(--radius); background-color: #ffffff; color: #1f2328; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); list-style: none; }
.language-switch a, .site-nav-languages a{ display: block; padding: 8px 12px; border-radius: var(--radius); }
.language-switch a[aria-current], .site-nav-languages a[aria-current]{ font-weight: 700; }
.site-nav-languages{ display: none; }

/* Category navigation: a menu bar with drop down sub categories, on small screens a panel from the left */
.site-nav{ border-top: 1px solid rgba(127, 127, 127, .15); }
.site-nav-list{ display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; }
.site-nav-list > li{ position: relative; }
.site-nav-list > li > a{ display: block; padding: 12px 14px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.site-nav-list > li:first-child > a{ padding-left: 0; }
.site-nav-sub{ position: absolute; left: 0; top: 100%; z-index: 110; display: none; min-width: 240px; padding: 8px; border-radius: var(--radius); background-color: #ffffff; color: #1f2328; box-shadow: 0 16px 40px rgba(0, 0, 0, .14); list-style: none; }
.site-nav-sub a{ display: block; padding: 8px 12px; border-radius: var(--radius); }
.site-nav-sub a:hover{ background-color: var(--surface); text-decoration: none; }
.site-nav-list > li.has-children:hover > .site-nav-sub, .site-nav-list > li.has-children:focus-within > .site-nav-sub{ display: block; }
.site-nav-heading{ display: none; }
.nav-backdrop{ position: fixed; inset: 0; z-index: 140; background-color: rgba(0, 0, 0, .4); }
/* The side menu is inside the header, so the header goes above the backdrop while the menu is open */
.site-header:has(.site-nav.is-open){ z-index: 160; }
@media (max-width: 899px){
	.site-nav{ position: fixed; top: 0; bottom: 0; left: 0; z-index: 150; width: min(86vw, 360px); overflow-y: auto; border: none; background-color: var(--background); color: var(--text); box-shadow: 0 0 40px rgba(0, 0, 0, .2); transform: translateX(-105%); transition: transform .2s ease; visibility: hidden; }
	.site-nav.is-open{ transform: none; visibility: visible; }
	.site-nav .container{ padding: 0 0 24px; }
	.site-nav-heading{ display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 12px 20px; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgba(127, 127, 127, .15); }
	.site-nav-list{ display: block; }
	.site-nav-list > li > a, .site-nav-list > li:first-child > a{ padding: 14px 20px; border-bottom: 1px solid rgba(127, 127, 127, .1); }
	.site-nav-sub{ position: static; display: block; min-width: 0; padding: 0 0 8px 20px; background: none; box-shadow: none; color: inherit; }
	.site-nav-languages{ display: flex; flex-wrap: wrap; gap: 4px; padding: 16px 12px; list-style: none; }
	body.nav-open{ overflow: hidden; }
}

/* Breadcrumb and page heading */
.breadcrumb{ padding: 16px 0 8px; font-size: 14px; }
.breadcrumb ol{ display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.breadcrumb li:not(:last-child)::after{ content: "\203A"; margin-left: 6px; opacity: .5; }
.breadcrumb a{ opacity: .75; }
.page-heading{ margin: 8px 0 24px; }
.page-intro{ max-width: 760px; font-size: 18px; opacity: .8; }

/* Hero */
.hero{ position: relative; display: flex; align-items: flex-end; min-height: 380px; overflow: hidden; background-color: var(--surface); }
.hero-small{ min-height: 280px; }
.hero-large{ min-height: min(640px, 80vh); }
.hero-image{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after{ content: ""; position: absolute; inset: 0; }
.hero-overlay-dark::after{ background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, .1) 70%); }
.hero-overlay-light::after{ background: linear-gradient(to top, rgba(255, 255, 255, .85), rgba(255, 255, 255, .2) 70%); }
.hero-noimage::after{ background: none; }
.hero-content{ position: relative; z-index: 1; padding-top: 48px; padding-bottom: 48px; }
.hero-content h1{ max-width: 760px; font-size: clamp(32px, 5.5vw, 60px); }
.hero-subtitle{ max-width: 640px; font-size: clamp(17px, 2vw, 20px); }
.hero-overlay-dark:not(.hero-noimage) .hero-content{ color: #ffffff; }
.hero-overlay-dark:not(.hero-noimage) .button-primary{ background-color: #ffffff; border-color: #ffffff; color: #111111; }

/* Selling points */
.usp-bar{ background-color: var(--surface); }
.usp-list{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; padding: 12px 0; list-style: none; font-size: 14px; font-weight: 600; }
.usp-list li{ display: flex; align-items: center; gap: 8px; }
.usp-list svg{ flex: 0 0 auto; width: 18px; height: 18px; fill: var(--accent); }
.product-usps{ justify-content: flex-start; flex-direction: column; gap: 6px; margin-top: 20px; padding: 16px; border-radius: var(--radius); background-color: var(--surface); }

/* Category tiles and sub categories */
.category-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px){ .category-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.category-card{ position: relative; display: block; overflow: hidden; border-radius: var(--radius); background-color: var(--surface); aspect-ratio: 4 / 3; text-decoration: none !important; }
.category-card img, .category-card-noimage{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.category-card:hover img{ transform: scale(1.04); }
.category-card-name{ position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); color: #ffffff; font-size: 17px; font-weight: 700; }
.subcategories ul{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; list-style: none; }
.subcategories a{ display: inline-block; padding: 8px 16px; border: 1px solid rgba(127, 127, 127, .3); border-radius: 999px; font-size: 14px; font-weight: 600; }
.subcategories a:hover{ border-color: var(--accent); text-decoration: none; }

/* Product cards */
.product-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 768px){ .product-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1100px){ .product-grid{ grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); } .catalog.has-filters .product-grid{ grid-template-columns: repeat(max(2, calc(var(--columns) - 1)), minmax(0, 1fr)); } }
.product-card{ position: relative; display: flex; flex-direction: column; min-width: 0; }
.product-card-image{ display: block; overflow: hidden; border-radius: var(--radius); background-color: var(--surface); aspect-ratio: var(--image-ratio); }
.product-card-image img, .product-card-noimage{ display: block; width: 100%; height: 100%; object-fit: var(--image-fit); transition: transform .3s ease; }
.product-card:hover .product-card-image img{ transform: scale(1.03); }
.product-card-body{ display: flex; flex: 1; flex-direction: column; gap: 4px; padding-top: 12px; }
.product-card-title{ margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.product-card-title a{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-title a::after{ content: ""; position: absolute; inset: 0; z-index: 1; }
/* Price and add button at the bottom of the card, so they line up in a row also with a title of two lines */
.product-card-price{ margin-top: auto; font-size: 16px; font-weight: 700; }
button.product-card-add{ position: relative; z-index: 2; width: 100%; height: 40px; margin-top: auto; padding: 0 12px; font-size: 14px; }
.product-card-price + button.product-card-add{ margin-top: 8px; }
.wishlist-toggle{ position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); cursor: pointer; }
.wishlist-toggle svg{ width: 20px; height: 20px; fill: none; stroke: #1f2328; stroke-width: 2; }
.wishlist-toggle.active svg{ fill: #e5484d; stroke: #e5484d; }

/* Catalog: filters next to the products, on small screens in a panel */
.catalog{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.catalog-form{ display: contents; }
.catalog-toolbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.catalog-count{ margin-right: auto; font-size: 14px; opacity: .75; }
.catalog-sort{ display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.catalog-sort select{ width: auto; }
.catalog-filters{ position: fixed; top: 0; bottom: 0; left: 0; z-index: 150; width: min(86vw, 360px); padding: 0 20px 24px; overflow-y: auto; background-color: var(--background); box-shadow: 0 0 40px rgba(0, 0, 0, .2); transform: translateX(-105%); transition: transform .2s ease; visibility: hidden; }
.catalog-filters.is-open{ transform: none; visibility: visible; }
.catalog-filters-heading{ display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.catalog-filters-heading h2{ margin: 0; font-size: 18px; }
.catalog-filters-close{ width: 44px; height: 44px; border: none; background: none; cursor: pointer; }
.catalog-filters-close .icon{ width: 24px; height: 24px; fill: currentColor; }
.catalog-filter{ margin: 0 0 20px; padding: 0; border: none; }
.catalog-filter legend{ margin-bottom: 8px; font-weight: 700; }
.catalog-filter label{ display: flex; align-items: center; gap: 4px; padding: 4px 0; font-size: 15px; cursor: pointer; }
.catalog-filter-count{ opacity: .55; font-size: 13px; }
.catalog-filters-clear{ font-weight: 600; text-decoration: underline; }
@media (min-width: 1000px){
	.catalog.has-filters{ grid-template-columns: 240px minmax(0, 1fr); column-gap: 40px; }
	.catalog.has-filters .catalog-filters{ grid-row: 1 / span 2; position: static; z-index: auto; width: auto; padding: 0; overflow: visible; background: none; box-shadow: none; transform: none; visibility: visible; }
	.catalog-filters-heading{ padding-top: 0; }
	.catalog-filters-close, .catalog-filters-open{ display: none; }
}
.category-description{ max-width: 860px; margin: 56px 0; }

/* Pagination */
.pagination ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 40px 0 0; list-style: none; }
.pagination a, .pagination span{ display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 8px; border: 1px solid rgba(127, 127, 127, .25); border-radius: var(--radius); font-weight: 600; }
.pagination span[aria-current]{ border-color: var(--accent); background-color: var(--accent); color: var(--accent-text); }
.pagination .pagination-gap{ display: inline-flex; align-items: center; padding: 0 4px; }

/* Product page (webshop module) */
.product-page .webshop{ padding-bottom: 24px; }
.product-page .product-container{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 48px; }
.product-page .product-container > *{ flex: 1 1 100%; min-width: 0; }
.product-page .product-container > br, .product-page .product-container > .c{ display: none; }
.product-page .product-container div.product-left, .product-page .product-container div.product-right{ float: none; width: auto; padding: 0; }
.product-page .product-container div.product-left{ text-align: center; }
.product-page .product-container div.product-left:empty{ display: none; }
.product-page .product-container div.product-left > img{ width: 100%; max-height: 560px; border-radius: var(--radius); background-color: var(--surface); object-fit: var(--image-fit); aspect-ratio: var(--image-ratio); }
.product-page .product-container div.image-slider div.thumbnails{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.product-page .product-container div.image-slider div.thumbnails a{ width: 72px; height: 72px; margin: 0 !important; border: 1px solid rgba(127, 127, 127, .25); border-radius: var(--radius); background-color: var(--surface); }
.product-page .product-container h1{ margin-bottom: 8px; font-size: clamp(26px, 3.4vw, 34px) !important; line-height: 1.2; }
.product-page .product-container .productprice{ display: block; font-size: 26px !important; font-weight: 700; }
.product-page .product-container .productprice-invat{ display: block; font-size: 14px; opacity: .7; }
.product-page .product-container .productdescription{ margin-top: 20px; line-height: 1.7; }
.product-page .product-container form.addtocart{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.product-page .product-container form.addtocart *{ height: 48px; line-height: normal; }
.product-page .product-container form.addtocart select{ width: 84px; margin: 0; font-size: 16px; }
.product-page .product-container form.addtocart input[type="submit"]{ flex: 1 1 220px; max-width: 360px; height: 48px; font-size: 16px; }
.product-actions{ margin-top: 12px; }
.product-actions .wishlist-toggle{ position: static; width: 48px; height: 48px; box-shadow: none; border: 1px solid rgba(127, 127, 127, .3); }
.product-page .product-container .tabs ul.tabs-header{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; border-bottom: 1px solid rgba(127, 127, 127, .2); list-style: none; }
.product-page .product-container .tabs ul.tabs-header li{ margin: 0 0 -1px; padding: 10px 16px; border: none; border-bottom: 2px solid transparent; background: none; font-weight: 600; cursor: pointer; }
.product-page .product-container .tabs ul.tabs-header li.tabs-active{ border-bottom-color: var(--accent); }
.product-specifications th, .product-specifications td{ padding: 10px 12px 10px 0 !important; }
@media (min-width: 900px){
	.product-page .product-container div.product-left{ flex: 1 1 calc(55% - 48px); }
	.product-page .product-container div.product-right{ flex: 1 1 calc(45% - 48px); }
}

/* Cart: side panel and page, filled by webshopHelperShowCart() */
.cart-drawer{ position: fixed; inset: 0; z-index: 200; }
.cart-drawer[hidden]{ display: none; }
.cart-drawer-backdrop{ position: absolute; inset: 0; background-color: rgba(0, 0, 0, .45); }
.cart-drawer-panel{ position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(100vw, 440px); padding: 20px; background-color: var(--background); box-shadow: -10px 0 40px rgba(0, 0, 0, .2); }
/* Above the cart container, which is positioned and comes later in the panel */
.cart-drawer-close{ position: absolute; top: 12px; right: 12px; z-index: 1; }
.cart-drawer-page{ margin-top: 12px; font-size: 14px; text-align: center; text-decoration: underline; }
.cart-container{ position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.cart-container h2{ margin: 4px 48px 12px 0; font-size: 22px; }
.cart-container div.cart-fixedmessage{ padding: 32px 0; text-align: center; opacity: .75; }
.cart-container div.shipping-method select{ margin-bottom: 12px; }
.cart-container div.cart-items{ flex: 1; overflow-y: auto; border-top: 1px solid rgba(127, 127, 127, .2); }
.cart-container div.cart-items > div{ padding: 14px 0; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.cart-container div.cart-items div.row{ display: flex; gap: 12px; }
.cart-container div.cart-items div.row div.col:first-child{ flex: 1; font-size: 14px; }
.cart-container div.cart-items div.row div.col:last-child{ text-align: right; white-space: nowrap; font-weight: 600; }
.cart-container .product-title{ font-size: 15px; font-weight: 700; }
.cart-container .amount-box{ display: inline-flex; align-items: center; margin-bottom: 6px; border: 1px solid rgba(127, 127, 127, .3); border-radius: var(--radius); }
.cart-container .amount-box a{ display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; text-decoration: none !important; }
.cart-container .amount-box a.subtract-amount, .cart-container .amount-box a.add-amount{ font-size: 20px; }
.cart-container div.cart-items > div > br{ display: none; }
.cart-container div.cart-totals{ padding-top: 12px; }
.cart-container div.cart-totals > div{ display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.cart-container div.cart-totals > div.total-row{ font-size: 18px; font-weight: 700; }
.cart-container div.cart-totals .checkout-button{ width: 100%; height: 52px; margin-top: 12px; background-color: var(--accent); color: var(--accent-text); font-size: 16px; }
.cart-page-layout{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cart-page-layout .cart-container div.cart-items{ overflow: visible; }
@media (min-width: 900px){ .cart-page-layout{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

/* Checkout and the other module pages */
.module-page{ padding-top: 24px; padding-bottom: 48px; }
form.orderform{ max-width: 760px; }
form.orderform table{ width: 100%; border-collapse: collapse; }
form.orderform table tr td{ display: block; padding: 4px 0; }
form.orderform table tr td:first-child{ padding-top: 12px; font-weight: 600; }
/* The colon follows the label, which the application layout makes a block */
form.orderform table tr td:first-child > label{ display: inline; }
form.orderform input[type="submit"]{ width: 100%; max-width: 360px; height: 52px; margin-top: 16px; }
@media (min-width: 700px){
	form.orderform table tr td{ display: table-cell; padding: 6px 0; vertical-align: middle; }
	form.orderform table tr td:first-child{ width: 1%; padding: 6px 24px 6px 0; white-space: nowrap; }
}
.webshop-prices-exvat{ margin: 16px 0; font-size: 14px; opacity: .75; }
/* The module adds the notice after the page; after a page with its own container it gets the width of one */
.container + .webshop-prices-exvat{ max-width: 1280px; margin: 16px auto; padding: 0 16px; }
@media (min-width: 768px){ .container + .webshop-prices-exvat{ padding: 0 24px; } }
.webshop-account section{ margin-bottom: 32px; }
.webshop-account-order{ margin-bottom: 8px; border: 1px solid rgba(127, 127, 127, .25); border-radius: var(--radius); }
.webshop-account-order summary{ display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 16px; cursor: pointer; }
.webshop-account-order summary .order-number{ font-weight: 700; }
.webshop-account-order summary .order-status{ margin-left: auto; }
.webshop-account-order ul, .webshop-account-order p{ padding: 0 16px 12px 32px; }
.search-page-form{ display: flex; gap: 8px; max-width: 640px; margin-bottom: 32px; }
.search-page-form button{ flex: 0 0 auto; }
.cms-page{ max-width: 860px; padding-bottom: 48px; }
.home-text{ max-width: 860px; }

/* Footer */
.site-footer{ margin-top: 64px; background-color: var(--surface); font-size: 15px; }
.site-footer.style-dark{ background-color: #111111; color: #e8e8e8; }
.site-footer.style-accent{ background-color: var(--accent); color: var(--accent-text); }
.footer-columns{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; padding-bottom: 32px; }
@media (min-width: 768px){ .footer-columns{ grid-template-columns: 2fr 1fr 1fr; } }
.footer-name, .footer-heading{ margin-bottom: 12px; font-size: 16px; font-weight: 700; }
.footer-column ul{ list-style: none; }
.footer-column li{ padding: 3px 0; }
.footer-text{ line-height: 1.7; opacity: .85; }
.footer-social{ display: flex; gap: 8px; margin-top: 16px; list-style: none; }
.footer-social a{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; opacity: .85; }
.footer-social a:hover{ opacity: 1; }
.footer-social .icon{ width: 18px; height: 18px; fill: currentColor; }
.footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 16px; padding-bottom: 24px; border-top: 1px solid rgba(127, 127, 127, .25); font-size: 13px; opacity: .8; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ transition: none !important; scroll-behavior: auto !important; }
}