/* Variables */
html {
--margin: 10px; /* Consistent troughout application */
--padding: 10px;
--menucolor: #999;
--iconcolor: #999;
}
/* General objects */
svg, svg path { width: 28px; height: 28px; }
a img { border: none; outline: none; }
label { cursor: pointer; padding: 0 0 0 8px; }
hr { border-style: solid; border-width: 1px 0 0 0; border-color: #ccc; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
.error { color: #333; background: #f8f8f8; border-width: 0 0 2px 0; border-style: solid; border-color: #ff6347; padding: 10px; font-size: 1.1em; margin: 16px 0; }
.error ul { list-style: none; }
.info { width: 100%; font-size: 1.2em; margin-bottom: 12px; color: #5fc331; font-weight: bold; }
.info svg { vertical-align: middle; margin-right: 8px; width: 20px; height: 20px; fill: #5fc331; }
.info svg path { fill: #5fc331; }
.info span { width: 100%; vertical-align: middle; }
span.ewloader { display: none; animation: fadein 0.4s ease-in; } /* Form loader */
div.ewloader { margin: 0; padding: 0; text-align: center; animation: fadein 0.4s ease-in; } /* AJAX loader */
.ewloader svg,
.ewloader svg path { fill: #999; width: 80px; height: 30px; }
main div.ewloader { margin: 100px auto; }
#addtocart_result div.ewloader { margin: 0 auto; }
#ewloading { display: none; }
svg.caret, svg.caret path { vertical-align: middle; width: 16px; height: 16px; margin-left: 4px; } /* Caret */
/* Forms, Buttons */
input, select, textarea { border: 1px solid #ccc; border-radius: 3px; margin: 0px 0 8px 0; padding: 10px; }
select { padding: 9px; }
input:focus, textarea:focus { background: #eee; }
input[type="checkbox"],
input[type="radio"] { border: 0; outline: none; cursor: pointer; }
td.double input:first-child { margin-right: 16px; }
td.double input[size="10"] { width: 100px }
.tr_submit td { padding-top: 20px; }
.leftbuttons a { margin-right: 10px }
.rightbuttons { text-align: right; }
.rightbuttons a { margin-left: 10px; }
.cp { display: inline-block; margin: 0 0 0 4px; vertical-align: middle; }
.cp svg { width: 16px; height: 16px; margin: 0 0 3px 0; animation: fadein .2s ease-in forwards; }
.cpwarn { display: inline; vertical-align: top; font-size: 0.8em; color: #f60; font-weight: bold; }
svg path[fill="#5FC331"] { fill: #5fc331; } /* Make sure icons keep their color */
svg path[fill="#F60"] { fill: #f60; }
svg path[fill="#FF5632"] { fill: #ff5632; }
svg.ic { width: 24px; height: 24px; margin: 0 6px 0 0; vertical-align: middle; }
.pw-eye { position: absolute; cursor: pointer; fill: #666; transform: translateX(-33px) translateY(3px); }
/* Tables */
table { border: 0; margin: 0 auto; width: 100%; border-spacing: 0; }
th { padding: 12px 0; text-align: left; }
tr.hover:hover { background: #f6f6f6; cursor: pointer; }
.formtable { border-spacing: 6px; margin: 0 -3px 0 -3px; }
.formtable td:first-of-type { width: 30%; }
/* Mobile navigation */
#mnav { display: none; } /* Hide mobile menu hamburger on wide screens */
/* Cart logo, Language selection */
#cart,
#lang { white-space: nowrap; }
#lang span, #lang svg { vertical-align: middle; }
/* Payment logos */
div[class^='pay-'] { border: 1px solid #CCC; margin: 4px; opacity: 0.85; transition: opacity 0.3s; }
div[class^='pay-']:hover { opacity: 1; }
/* Search box */
#search_form { margin: 40px 0 20px 0; text-align: center }
#search_form input[type="search"] {
width: 160px; padding: 6px 4px; margin-right: 10px;
border-radius: 0; border-width: 0 0 1px 0;
font-size: 1.1em; background: #fff;
}
/* Breadcrumb navigation */
.webshop_breadcrumb { color: #888; font-size: 0.9rem; }
.webshop_breadcrumb a { margin: 0 6px; color: #888; text-decoration: none; }
.webshop_breadcrumb a:hover { text-decoration: underline; }
.webshop_breadcrumb a:first-child { margin-left: 0; } /* first item */
.webshop_breadcrumb span { margin-left: 6px; } /* last item */
/* 2, 3, 4 responsive columns */
div.columns { display: flex; flex-flow: row wrap; justify-content: space-around; }
div.columns > div { flex-grow: 1; flex-basis: 0; min-width: 140px; min-height: 24px; }
#prodhead { text-align: right; margin-bottom: var(--margin); }
/* Panel (used for filters, view and sort) */
.panel { display: inline-block; padding: 0 12px; text-align: left; cursor: pointer; }
.panel > svg,
.panel > svg path { margin: 0 6px 4px 0; vertical-align: middle; fill: #999; transition: 0.3s fill; }
.panel > span { font-weight: bold; color: #999; transition: 0.3s color; }
.panel:hover span { color: #f90; }
.panel:hover svg,
.panel:hover svg path { fill: #f90; }
.panel > div { display: none; }
#panelpop {
position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 12; text-align: center;
background: rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.3s;
}
#panelpop > div { display: inline-block; max-width: 400px; color: #fff; font-size: 1.8em; text-align: left; }
#panelpop > div > h1 { font-size: 1.4em; padding-left: 24px; }
#panelpop > div div { width: 100%; padding: 6px 24px 8px 24px; cursor: pointer; border-radius: 8px; }
#panelpop > div svg { margin-right: 12px; vertical-align: middle; }
#panelpop > div svg,
#panelpop > div svg path { fill: #fff; }
#panelpop > div div:hover:not(.active) { background: rgba(255,255,255,0.1); }
#panelpop > div div.active { color: #999; cursor: default; }
#panelpop > div div.active svg,
#panelpop > div div.active svg path { fill: #999; }
/* Category and Productlist display
contains
instances which are added by lazy loading
*/
#catlist { width: 100%; font-weight: bold; }
#noproductsfound { color: #f60; font-size: 1.4em; text-align: center; font-weight: bold; opacity: 0; transition: opacity 0.3s; }
#prodbody { display: flex; }
#filtersform {
position: sticky; align-self: flex-start; top: 0; margin: 0; padding: 0; width: 200px; min-width: 200px;
height: 100vh; overflow: auto;
transition: opacity 0.3s, min-width 0.5s ease-out;
}
#prodbody > ul { flex-grow: 2; }
#prodlist, #catlist {
display: inline-flex; flex-wrap: wrap; align-content: flex-start; /* move content up the list */
justify-content: space-evenly; /* chagne to left for last items keep left */
gap: 10px; /* preserve template left and right margin */
margin: 0; padding: 0; list-style: none; text-align: center;
overflow: hidden; transition: opacity 0.2s linear, max-height 0.5s ease-out;
}
#prodlist > li, #catlist > li {
flex-grow 1; /* Prevent whitespace left & right in productlist */
width: 260px; /* 1180 / 4 = 295, -30px gap = 265 */
max-width: 512px; /* don't stretch photos */
/*overflow: hidden;*/ transition: max-height 3s ease, height 3s ease, opacity 0.5s linear;
}
#catlist.hqphoto li,
#productlist.hqphoto li { width: calc(33% - 30px); margin: 0 12px; } /* 1180 / 3 = 393 */
#prodlist > li > a, #catlist > li > a { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; text-decoration: none; outline: none; color: #666; }
#catlist > li > a > div:nth-of-type(1), /* div around cat photo */
#prodlist > li > a > div:nth-of-type(1) { display: flex; align-items: center; height: 100%; overflow: hidden; } /* div around cat and prod photo */
#catlist > li > a > div:nth-of-type(2) { } /* cat name */
#prodlist > li > a > div:nth-of-type(2) { } /* div around prod name and price */
#catlist > li > a > div > img,
#prodlist > li > a > div > img { margin: 10px auto; max-width: 100%; } /* photo */
#catlist div > div, #prodlist div > div { padding: 2px 0; } /* name, price */
#prodlist .webshop_subphotos { display: flex; align-items: flex-start; gap: 1%; } /* subphotos */
#catlist.uniform_photos > li > a > div:nth-of-type(1),
#productlist.uniform_photos #prodlist > li > a > div:nth-of-type(1) {
width: 230px; height: 230px; margin: 20px 0; /* align-items: flex-start; */
background-position: center; background-size: cover; background-repeat: no-repeat;
} /* div around cat and prod photo */
#catlist.hqphoto.uniform_photos > li > a > div:nth-of-type(1),
#productlist.hqphoto.uniform_photos #prodlist > li > a > div:nth-of-type(1) { min-width: 230px; width: auto; }
/* Productlist view: Detailed */
#prodlist.view-2 > li { min-width: 310px; display: flex; flex-direction: column; justify-content: space-between; }
#prodlist.view-2 > li > a { height: auto; }
#prodlist.view-2 > li > .webshop_prodlist_addtocart { min-height: 60px; } /* make room for add to cart button */
#prodlist.view-2 > li > .webshop_prodlist_addtocart .webshop_stylebutton{ margin-top: 8px; } /* don't stick "added to cart" text */
/* Productlist view: Photo only */
#prodlist.view-3 > li > a > div:nth-of-type(2),
#catlist.view-3 > li > a > div:nth-of-type(2) { display: none; }
/* Productlist view: List */
#prodlist.view-4 > li { min-width: calc(100% - 20px); text-align: left; }
#prodlist.view-4 > li > a { height: auto; }
#prodlist.view-4 > li > a > div { display: inline-block; vertical-align: top; }
#prodlist.view-4 > li > a > div:nth-of-type(1) { width: 28%; margin-right: 2%; max-width: 260px; } /* div around photo */
#productlist.hqphoto.uniform_photos #prodlist.view-4 > li > a > div:nth-of-type(1) { max-width: 360px; }
#prodlist.view-4 > li > a > div:nth-of-type(2) { width: 70%; }
#prodlist.view-4 > li > a > div:nth-of-type(2) > div{ margin: 5px 10px; } /* name, price, stock, description */
#prodlist.view-4 > li > a > div:nth-of-type(2) > div:first-of-type { font-weight: bold; } /* product name */
#prodlist.view-4 .webshop_prodlist_addtocart { text-align: right; }
#prodlist.view-4 a.webshop_stylebutton { margin: 5px 0 10px 10px; }
/* Productlist view: List without photos */
#catlist.view-5 > li > a > div:nth-of-type(1) { display: none; }
#catlist.view-5 > li > a > div:nth-of-type(2) { padding: 30px 0 25px 0; }
#prodlist.view-5 { gap: 0; }
#prodlist.view-5 > li {
display: flex;
width: 100%; align-items: center; gap: 8px; max-width: 100%;
border-width: 0 0 1px 0; border-style: solid; border-color: #eee; transition: background 0.3s;
}
#prodlist.view-5 > li > a { flex-grow: 3; outline: none; }
#prodlist.view-5 > li > a > div { display: flex; align-items: flex-start; min-width: 80%; height: auto; min-height: 0; }
#prodlist.view-5 > li > a > div > div { flex-grow: 1; text-align: left; width: 30%; }
#prodlist.view-5 .webshop_old_price { padding-left: 0; display: block; line-height: 0.5em; position: absolute; } /* Old price */
#prodlist.view-5 .webshop_units { padding-left: 0; display: inline-block; } /* Old price */
#prodlist.view-5 > li > a > div > div:first-of-type { width: 40% }
#prodlist.view-5 > li > div { height: auto; min-height: auto; min-width: 234px; text-align: right; white-space: nowrap; } /* Buttons */
#prodlist.view-5 a.webshop_stylebutton { margin: 2px 0 2px 10px; }
#prodlist.view-5 li:hover { background: rgba(204,204,204,0.4) }
#prodlist.view-5 > li > a > div:nth-of-type(1) { max-height: 50px; line-height: 50px; }
/* Add a few products at the end of the product list to keep the last row on the left */
#catlist > li.hidden,
#prodlist > li.hidden { margin: 0; border: none; } /*margin: 0 12px; */
/* Labels */
span[class^=label] { position: absolute; }
/* Price and stock display */
.webshop_price { font-weight: bold; }
.webshop_price > div { display: inline-block; }
.webshop_old_price { text-decoration: line-through; margin-right: 6px; }
.webshop_units { vertical-align: super; font-size: 0.9em; font-weight: normal; margin-left: 5px; }
.webshop_status_ok,
.webshop_status_warning,
.webshop_status_error { font-weight: bold; }
.webshop_status_ok { color: #5fc331; }
.webshop_status_warning { color: #f30; }
.webshop_status_error { color: #c00; }
/* Fullscreen image */
#photo-div { position: fixed; top: 0; left; 0; width: 100%; height: 100%; background: #fff; z-index: 2001; }
#photo-div > svg {
position: fixed; top: 40vh; left: 5vw;
width: 10vw; height: 10vw; min-width: 50px; min-height: 50px; max-width: 90px; max-height: 90px;
z-index: 2004; fill: #ccc; cursor: pointer;
}
#photo-div > svg:last-child { left: auto; right: 5vw; }
#photo-div > svg path { fill: #ccc; }
#photo-div > img {
position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;
max-width: 100%; max-height: 100%;
object-fit: scale-down; cursor: pointer;
}
#photo-div > svg:hover,
#photo-div > svg:hover path { fill: #999; }
/* Slideout div from top */
#slidedivcont { position: fixed; width: 100%; left: 0; top: 0; margin: 0; padding: 0; text-align: center; z-index: 50; }
#slidedivcont > div {
display: inline-block; width: 1130px; max-width: 90vw; vertical-align: top; text-align: left;
box-shadow: 0px 0px 25px 0px rgba(165, 165, 165, 0.7); background: #fff;
max-height: 0; transition: max-height 1s; overflow-y: hidden;
}
#slideup { text-align: right; opacity: 0; transition: opacity .5s; }
#slideup svg { position: absolute; width: 32px; height: 32px; margin: -5px 0 0 -52px; cursor: pointer; fill: #999; color: #999; }
#slideup svg { fill: #999; color: #999; }
#slideup svg:hover,
#slideup svg:hover path { fill: #ccc; color: #ccc; }
#slidediv { height: calc(100% - 70px); padding: 10px 30px; opacity: 0; transition: opacity 0.5s; margin-bottom: 40px; }
#slidediv .ewloader { margin-top: 40px; }
.slidelang a { display: inline-block; width: 194px; color: #333; text-decoration: none; padding: 10px; border-radius: 4px; }
.slidelang a:hover { background: #eee; }
/* Product detail page */
#prodlist #prod-detail { width: 100%; margin: 16px; text-align: left; opacity: 0; transition: min-height 0.1s, max-height 0.1s, opacity 0.5s; }
#prod-detail > div { padding: 0; }
.webshop_detail { display: flex; gap: 10px; margin-bottom: 10px; }
.webshop_detail_left { text-align: left; flex-grow: 1; width: 19%; /* golden ratio / 2 */ }
.webshop_detail_right { flex-grow: 2; }
.webshop_detail_photos a { display: inline-block; width: 107px; text-align: center; margin: 0 16px 16px 0; }
.webshop_detail_photos a:first-of-type { display: block; width: 100%; text-align: left; margin: 0; } /* first photo is a special case for the labels */
.webshop_detail_photos a > div { } /* align 1st product photo with title and sub photos */
.webshop_detail_photos a img { max-width: 100%; } /* prevent photo from entering .webshop_detail_right */
p.webshop_price { margin: 0 0 12px 0; font-size: 1.3em; }
.prod-color { display: inline-block; vertical-align: top; margin: 3px 0 0 10px; width: 44px; height: 26px; border: 1px solid #ccc; border-radius: 3px; }
.webshop_addtocart label { padding-left: 0; }
.webshop_addtocart input[name="amount"]{ margin: 10px; }
#addtocart_result { min-height: 40px; } /* prevent from making window larger when new content comes in */
#addtocart_result .info { display: inline-block; margin: 0 8px 8px 0; }
.webshop_properties { width: 100%; }
.webshop_properties tr td { padding: 8px 0 0 0; }
.webshop_properties tr th,
.webshop_properties tr:not(:last-child) td { padding: 8px 0 0 0; border-style: dashed; border-color: #ccc; border-width: 0 0 1px 0; }
.webshop_paramstable td { vertical-align: top; width: 50%; min-width: 280px }
.obligatedfield { color: #c00; margin-left: 3px; font-weight: bold }
.paramerror { color: #c00; font-weight: bold; }
.webshop_addtocart { margin: 20px 0; }
.webshop_detail th,
.webshop_detail td { padding-left: 0; } /* align left without padding */
table.webshop_tierprices { width: 100%; text-align: left; margin: 10px 0 30px 0; }
.webshop_addtowishlist svg { vertical-align: top; margin: 10px 0 0 10px; width: 36px; height: 36px; cursor: pointer; }
.webshop_addtowishlist svg path { fill: #ff4c4c; }
.webshop_addtowishlist svg:hover path { fill:#f00; }
.wishlist-tooltip { font-weight: bold; color: #666; }
/* Photozoom */
#zp { position: absolute; width: 400px; height: 400px; border: 1px solid #999; z-index: 10; }
/* Product colors */
#detail_colors { margin: 0 0 12px 0; display: flex; gap: 12px; flex-wrap: wrap; }
#detail_colors > a {
width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative;
min-width: 44px; min-height: 44px;
font-size: 0; color: transparent; display: block; text-decoration: none; /* Hide text inside tag */
}
#detail_colors > a:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
#detail_colors > a:active { transform: scale(0.95); }
#detail_colors > a.selected { border-color: #333; border-width: 4px; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.3); }
#detail_colors > a::after { /* Tooltip text */
content: attr(data-name); position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%) translateY(-5px); background-color: #666; color: #fff;
padding: 6px 12px; border-radius: 4px; font-size: 14px; white-space: nowrap; opacity: 0;
pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 2;
}
#detail_colors > a::before { /* Tooltip arrow */
content: ''; position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%) translateY(1px); border: 6px solid transparent; border-top-color: #666;
opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 2;
}
#detail_colors > a:hover::after { opacity: 1; transform: translateX(-50%) translateY(-10px); } /* Show tooltip on hover */
#detail_colors > a:hover::before{ opacity: 1; transform: translateX(-50%) translateY(1px); }
#detail_colors > a:focus { outline: 2px solid #ccc; } /* Focus state for keyboard navigation */
@media (hover: none) { /* Touch device support */
#detail_colors > a:active::after { opacity: 1; transform: translateX(-50%) translateY(-10px); }
#detail_colors > a:active::before { opacity: 1; transform: translateX(-50%) translateY(-1px); }
}
/* Numeric navigation */
.numnav { text-align: center; }
.numnav a, .numnav span { display: inline-block; margin: 6px; padding: 6px 12px; border-radius: 3px; text-decoration: none; }
.numnav a { border: 1px solid #eee; }
.numnav a:hover { text-decoration: none; background: #f6f6f6; }
/* Up arrow when scrolling down */
#uparrow { display: none; position: fixed; bottom: 20px; right: 25px; z-index: 10; }
#uparrow a { display: block; width: 40px; height: 40px; outline: none; }
#uparrow svg,
#uparrow svg path { width: 36px; height: 36px; fill: #999; color: #999; }
#uparrow a:hover svg,
#uparrow a:hover svg path { fill: #ccc; color: #ccc; }
/* Shopping cart page */
#shipping_estimation { max-height: 200px; overflow: auto; margin-bottom: 20px; }
#shipping_estimation table { width: 100%; }
.pm svg { width: 64px; height: 64px; margin-right: 8px; }
/* Login page */
.webshop_login { display: inline-block; width: 50%; vertical-align: top; }
.webshop_login p { padding: 10px 10px 10px 0; }
.webshop_login .tr_submit td { padding-top: 5px; }
/* Checkout page */
#orderlist { width: 100%; border-spacing: 6px; margin: 0 -3px 0 -3px; } /* remove outside border */
#orderlist th { text-align: left; border-style: dashed; border-width: 0 0 1px 0; border-color: #ddd; padding: 0 0 6px 0; }
#orderlist td { vertical-align: middle; padding: 2px 0; }
#orderlist tr.separator td { border-style: dashed; border-width: 1px 0 0 0; border-color: #ccc; padding-top: 8px; }
#orderlist td.orderlist_img { height: 62px; width: 62px; }
#orderlist td.orderlist_img a { float: left; width: 60px; height: 60px; border: 1px solid #ccc; background-repeat: no-repeat; background-position: center center; background-size: cover; } /* photo */
#orderlist td.orderlist_img a:hover { filter: brightness(110%); }
#orderlist td:nth-child(2) { vertical-align: top; } /* description */
#orderlist td:nth-child(2) a { text-decoration: none; color: #333; font-weight: bold; }
#orderlist tbody td:nth-child(4) input { margin-right: 5px; color: #666; padding: 4px; vertical-align: top; height: 18px; }
#orderlist tbody td:nth-child(4) a { display: inline-block; height: 20px; border: 1px solid #ccc; border-radius: 3px; padding: 3px; margin-right: 5px; outline: 0; vertical-align: top; }
#orderlist tbody td:nth-child(4) a:hover { background: #eee; }
#enter_couponcode { text-align: right; }
ul.checkoutprogress { list-style: none; margin: 30px 0; padding: 0; text-align: right; color: #333; }
ul.checkoutprogress li {
display: inline-block; position: relative; width: 200px; margin: 0 6px 6px 0;
line-height: 40px; text-align: center; background: #eee;
}
ul.checkoutprogress li:before{
content: ""; position: absolute; height: 0; width: 0; left: 0; top: 0;
border: 20px solid transparent; border-left: 8px solid #fff;
}
ul.checkoutprogress li:after{
content: ""; position: absolute; height: 0; width: 0; left: 100%; top: 0;
border: 20px solid transparent; border-left: 8px solid #eee; z-index: 2;
}
ul.checkoutprogress li:hover { background: #f3f3f3; }
ul.checkoutprogress li:hover:after { border-left: 8px solid #f3f3f3; }
ul.checkoutprogress li.active { background: #d6ebad; }
ul.checkoutprogress li.active:after { border-left: 8px solid #d6ebad; }
ul.checkoutprogress li a { display: block; text-decoration: none; color: #333; outline: none; }
div.paymentdescription,
div.shippingdescription { margin: 8px 3px 8px 3px; color: #090; font-size: 0.8em; font-weight: bold; }
/* Webshop popup - used for delivery services */
#wepopcontainer {
display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 12; text-align: center;
background: rgba(0,0,0,0.7);
}
#wepop {
display: inline-block; width: 100%; height: 100%; max-width: 960px; max-height: 550px; margin: 1% 0;
background: #fff; border: 1px solid #333;
-moz-box-shadow: 0 0 5px #000; -webkit-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000;
overflow: hidden;
}
#weinner { width: 100%; height: 100%; overflow:auto; -webkit-overflow-scrolling: touch; }
/* Customer account page */
.cust_order table { width: 100%; margin-bottom: 50px; }
.cust_order table table { width: 100%; margin: 20px 0; padding: 0; }
.cust_order th { text-align: left; background: #eee; padding: 4px; }
.cust_order td { vertical-align: top; }
/* Slideshow */
.webshop_slideshow { width: 100%; margin: 0; padding: 0; }
.webshop_slide { display: none; position: absolute; text-align: center; filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; margin: 0; padding: 0;
background-repeat: no-repeat; background-position: center center; background-size: cover;
justify-content: center; cursor: pointer;
}
.webshop_slide a { display: inherit; justify-content: inherit; width: 100%; height: 100%; text-decoration: none; color: #fff; }
.webshop_slide div {
padding: 6px 12px;
color: #fff; background: #000; font-weight: bold; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6;
}
.sprev, .snext { position: absolute; width: 64px; height: 64px; filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; outline: none; }
.sprev:hover, .snext:hover { background-position: 0 -64px }
.sprev { background-image: url(/img/icons/prev.png); }
.snext { background-image: url(/img/icons/next.png); }
.slideshow_bullets { position: absolute; text-align: center; }
.slideshow_bullets > div {
display: inline-block; width: 15px; height: 15px; border-radius: 1px;
border: 1px solid #999; margin: 0 8px 0 8px; cursor: pointer;
box-shadow: 0 1px 3px #999;
}
.slideshow_bullets_active { background: #ccc; }
.slideshow_progressbar { height: 2px; position: absolute; background: #ccc; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; }
/* Blog */
h1.blog, h2.blog { margin-bottom: 0; }
img.blog {
float: left; max-width: 200px; margin: 0 12px 5px 0;
border-style: solid; border-color: #ccc; border-width: 0 1px 0 0; padding: 0 12px 0 0;
}
p.blog_date { color: #999; font-size: 0.9em; margin-top: 0; padding-top: 0; }
p.blog_more { text-align: right; }
/* Social icons */
a.social { outline: none; }
a.social svg { vertical-align: bottom; width: 36px; height: 36px; margin: 6px; }
a.social use[href$="facebook"] { fill: #1977f3; }
a.social use[href$="instagram"] { fill: #e03967; }
a.social use[href$="mastodon"] { fill: #3088d4; }
a.social use[href$="nostr"] { fill: #8d45dd; }
a.social use[href$="twitter"] { fill: #333; }
a.social:hover { filter: brightness(150%); }
p.rss { text-align: right; }
p.rss svg,
p.rss svg path { width: 48px; height: 48px; fill: #f36f23; }
p.rss svg:hover,
p.rss svg:hover path { fill: #f90; }
/* Chat */
#webshop_chat {
position: fixed; bottom: 0; right: 20px; max-width: 300px; z-index: 10;
color: #333; background: #eee;
border-radius: 10px 10px 0 0;
-webkit-box-shadow: 0 -1px 1px 1px #666; -moz-box-shadow: 0 -1px 1px 1px #666; box-shadow: 0px 1px 2px 1px #666;
}
#chat_titlebar {
display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between;
vertical-align: middle; text-align: center; font-weight: bold; white-space: nowrap;
border-radius: inherit;
color: #ccc; background: #222;
}
#chat_titlebar > div { margin: 8px 10px; cursor: pointer; }
#chat_titlebar > div:first-child:hover { color: #fff; }
#chat_close { display: inline-block; width: 14px; height: 14px; margin: 2px 8px 0 0; background-image: url(/img/icons/window.png); background-position: -28px 0; }
#chat_close:hover { background-position: -28px -14px; }
#chat_inner { max-height: 0; text-align: center; -webkit-transition: max-height 1.5s linear; transition: max-height 1.5s linear; }
#chat_nameform label { display: block; padding-top: 20px; font-weight: bold; }
#chat_nameform input { display: inline-block; width: 80%; margin: 0 0 20px 0; }
#chatwindow { height: 160px; overflow-y: auto; text-align: left; background: #fff; padding: 3px; }
.chat_statusmsg { color: #666; }
#webshop_chat textarea { width: 95%; }
#chatbuttons { padding: 5px; text-align: right; }
/* Customer reviews */
.userrating { display: inline-block; padding: 5px; max-width: 180px; }
.userrating .webshop_stylebutton{ float: right; }
.userrating svg { fill: #fa0; width: 24px; height: 24px; margin-right: 2px; }
.userrating svg path { fill: #fa0; }
.userrating svg.disabled path { fill: #ccc; }
/* GDPR */
div.legalmsg { display: inline-block; margin: 20px 0; padding: 0 12px; border-width: 1px 0 1px 0; border-style: solid; border-color: #eee; font-size: 0.9em; }
div.legalmsg strong { font-size: 1.1em; }
/* EW Reseller */
p.ewr { display: flex; justify-content: center; padding: 10px; border: 1px solid #ddd; }
p.ewr > img { min-width: 200px; margin-right: 16px; }
/* Sprites */
.soc-facebook, .soc-instagram, .soc-linkedin, .soc-pinterest, .soc-twitter, .soc-youtube {
display: inline-block; background: url('/img/sprite.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left;
}
.soc-facebook { background-position: -48px -712px; width: 48px; height: 48px; }
.soc-instagram { background-position: -48px -760px; width: 48px; height: 48px; }
.soc-linkedin { background-position: -0px -808px; width: 48px; height: 48px; }
.soc-pinterest { background-position: -48px -808px; width: 48px; height: 48px; }
.soc-twitter { background-position: -0px -856px; width: 48px; height: 48px; }
.soc-youtube { background-position: -0px -904px; width: 48px; height: 48px; }
/* Animation */
.fadein { animation: fadein 0.4s ease-in; }
.fadeout { animation: fadeout 0.4s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; }}
/* Responsive */
@media all and (max-width: 1200px) {
/* Product lists */
/* TODO */
/*#prodlist,
ul[class*='webshop_catlist'] { margin: 0; }*/
#catlist.hqphoto li,
#productlist.hqphoto li { width: calc(50% - 10px); }
#productlist.hqphoto #prodlist.view-5 li{ width: 100%; }
/* Slideshow */
.sprev { left: 3vw }
.snext { right: 3vw; }
}
@media all and (max-width: 1000px) {
/* Images, frames */
body img, body iframe { max-width: 100%; height: auto !important; }
/* Product list */
#prodlist.view-4 .webshop_description { display: none; }
/* Product detail */
.webshop_detail { flex-wrap: wrap; }
.webshop_detail_left { width: auto; }
/* Slideshow */
.webshop_slideprogress { display: none; }
/* Checkout page */
.webshop_login { display: block; width: 100%; }
ul.checkoutprogress { text-align: center; }
/* Slideout div from top */
#slidedivcont > div { width: 100%; max-width: none; }
.slidelang a { width: 133px; }
}
@media all and (max-width: 800px) {
/* Forms */
.formtable td { display: block; }
.formtable td:first-of-type { width: auto; }
.formtable input, .formtable textarea { max-width: 80vw; }
#summary_form td { display: table-cell; width: 50%; }
#filtersform {
position: fixed; left: 0; top: 0; width: 0; min-width: 0; height: 100%;
background: rgba(0,0,0,0.8); color: #fff;
opacity: 0; transition: opacity 0.3s; z-index: 12; overflow: auto;
}
.plineimg { max-width: 48px; max-height: 48px; }
#prodlist > li { width: 180px; }
#prodlist.view-5 > li { display: block !important; }
#prodlist.view-5 > li > a > div { display: block; text-align: left; }
#prodlist.view-5 > li > a > div > div { display: inline-block; width: auto; margin: 0 4px 0 0; vertical-align: top; }
/* On small screens, make the slideshow smaller */
.webshop_slideshow { max-height: 240px; }
.slideshow_bullets { margin-top: 210px !important; }
.slideshow_progressbar { margin-top: 238px !important; }
}
@media all and (max-width: 600px) {
/* Productlist view: Detailed */
#prodlist.view-2 div { text-align: center; }
/* Order list **/
#orderlist tr { display: grid; grid-template-columns: 72px auto 130px; grid-template-rows: 34px minmax(36px, auto);
grid-template-areas: "photo desc amount"; "photo desc price"; }
#orderlist thead tr { grid-template-rows: auto auto; } /* table headers */
#orderlist tfoot tr { grid-template-columns: auto 130px; grid-template-rows: auto; grid-template-areas: "numproducts total" } /* totals */
#orderlist tbody td:nth-child(1) { grid-row: span 2; } /* photo */
#orderlist tbody td:nth-child(2) { grid-row: span 2; } /* description */
#orderlist thead th:nth-child(2),
#orderlist tbody td:nth-child(3) { display: none; } /* single price (include header) */
#orderlist tbody td:nth-child(5) { align-self: start; } /* price */
/* Customer account page */
.cust_order table table th,
.cust_order table table tbody td { display: inline-block !important; }
/* Photozoom */
#zp { display: none; }
/* EW Reseller */
p.ewr { flex-wrap: wrap; }
p.ewr a { display: block; margin-left: auto; margin-right: auto; max-width: fit-content; } /* Center button */
}
/* Big smartphones */
@media all and (max-width: 460px) {
/* Checkout */
ul.checkoutprogress { margin: 0; }
ul.checkoutprogress li { width: auto; padding: 0 10px 0 20px; }
/* Productlist */
#prodhead > div { padding: 0 6px }
#prodlist > li { width: calc(50% - 6px); } /* 2 photos per row */
#productlist.hqphoto #prodlist > li > a > div:nth-of-type(2) { margin-left: 8px; margin-right: 8px; } /* full photo width product list (JS): add margins for description */
#catlist.hqphoto li,
#productlist.hqphoto li { width: 100%; }
/* Customer account page */
.cust_order td { display: inline-block; margin-left: 4px; }
}
/* Most common mobile resolution */
@media all and (max-width: 420px) {
/* Forms */
td.double input:first-child { margin-right: 12px; }
td.double input[size="10"] { width: 90px }
td.double input[size="20"] { width: 160px } /* leave space to the right for field check */
}
/* Most common mobile resolution */
@media all and (max-width: 360px) {
/* Forms */
td.double input:first-child { margin-right: 12px; }
td.double input[size="10"] { width: 80px }
td.double input[size="20"] { width: 150px } /* leave space to the right for field check */
}