/*******WEBSHOP-V3********/ :root { --boradius: 0px; --border:rgba(0,0,0,0.1); --opac:#9dbecd; --primary: #2C80A7; --light: #ffffff; --dark: #262332; --white: #eeeeee; --black: #000000; --bodycolor: #ffffff; --fonticon: 600 1em "Font Awesome 5 Free","Font Awesome 5 Brands"; --trans: .3s; --slow: 1s; } /*webshop-v2-240919*/ html:has(.navbar.scrolled.bx) {--navh:0px !important;} /*html:has(.webshop) main {margin-top:calc(-1 * var(--navh)) !important;}*/ /*html:has(.webshop) main > .block-section:first-child:not(.hero,.page-cover) {padding-top:calc(var(--navh) + 1em);}*/ .webshop .box-loader, .webshop #shop-loader-bg {background-color:transparent; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);} .webshop {font-size:25px; color:var(--dark); min-height:100vh;} .webshop a:before, .webshop a:after, .webshop .row:before, .webshop .row:after {display:none;} .webshop a {border:none; text-decoration:none;} .webshop .btn, .webshop .btn:after {font-size:1em;} :is(html:has(.webshop) .popover,.webshop) :is(input,.form-control) {padding-inline:1em; height:unset; font-size:1em; border-radius:var(--boradius); border-color:var(--border); box-shadow:none !important; outline:none !important;} .webshop .shop-container {display: flex; flex-direction: row; gap:2em; align-items: flex-start; position:relative;} .webshop.img-contain :is(#product-list .product-item img, .product-view-images ul.image-container li img, #checkout-cart table tbody td:nth-child(1) img) {object-fit:contain !important; background-color:white !important;} .webshop .description ul {margin-top:0;} .webshop .shop-container .shop-menu { width:100%; max-width:20vw; max-height:100%; border:1px solid var(--border); padding:1em; border-radius:var(--boradius); overflow:hidden; transition:var(--trans); flex:1; .shop-menu-title {align-items: center; text-transform:uppercase; font-size:1.25em !important; display: flex; justify-content: space-between;} .shop-menu-toggler {display:none; height:2.3em; width:2.3em; align-items: center; justify-content: center; border:1px solid var(--border); border-radius:var(--boradius); background-color:var(--opac)} .shop-menu-toggler:before {display:flex; content:"\f066"; font:var(--fonticon);} } /*css-category*/ .webshop .shop-container .shop-menu .shop-menu-list { max-width:100%; max-height:100%; transition:var(--trans); li:before {display:none;} li:last-child {margin-bottom:0;} li a {letter-spacing:normal; margin:0; font-size:1em; line-height:normal; display:flex; width:100%; padding-block:.5em !important;} li a:hover {color:var(--primary);} li.active > a {font-weight:600; color:var(--primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0;} > li:first-child {border-top:1px solid var(--border);} > li:last-child {border-bottom:none !important;} > li {margin-block:0; border-left:1px solid transparent; border-bottom:1px solid var(--border); border-radius:0; } > li.active {border-color:var(--border); border-radius:0;} /*> li:not(:last-child) {margin-bottom:.5em;}*/ > li > a {border-radius:inherit; padding:.5em 1em;} > li > ul {margin-right:1em;} li.has_children ul {transition:var(--trans); height: 100%; margin-left:1.2em; max-height:0px; overflow:hidden; padding-block:0 !important; } li.has_children.active > ul {padding-block:.5em !important;} li.has_children ul li {margin:0;} li.has_children li a {font-size:1.1em; padding-block:.5em !important;} li.has_children li ul.children {padding-block:0 !important;} li.has_children > a {position:relative; padding-right:3em;} li.has_children > a > span {transition:var(--trans); z-index:2; font-size:.8em; width: 2em; height: 100%; display:flex; align-items: center; justify-content: center; position: absolute; right: .5em; top: 50%; transform: translateY(-50%); border-left:1px solid var(--border);} li.has_children > a > span:after {content:"\f067"; font:var(--fonticon); font-size:inherit;} li.has_children > a[data-href="#"]:active > span, li.has_children > a > span:hover {} li.has_children.active > a > span:after {content:"\f068";} li.has_children.active > a:not(:last-child) {border-bottom:1px solid var(--border);} li.active.has_children > ul {max-height: 100vh !important;} ul.level1 > li > a > span {right:-.4em;} ul.level2 {margin-left:0 !important; border-left:1px solid var(--border);} ul.level2 li {} ul.level2 li a {border-bottom:1px solid var(--border); padding-left:1em;} ul.level2:last-child {padding-bottom:0 !important;} } /*css-main*/ .webshop .shop-container .shop-main { width:100%; /*border:1px solid var(--border); padding:1em; */ border-radius:var(--boradius); transition:var(--trans); flex:1; .shop-main-filter {position::relative;} #shop-menu-top {padding:0; display: flex !important; flex-direction: row; flex-wrap: nowrap !important; margin-bottom:1em; align-items: flex-end !important;} #shop-menu-top .topnav-menu-left {font-family:var(--font2); flex:1 50%; margin:0 !important; font-size:1.65em; line-height:1.5; width:50%; text-align:left !important; font-weight:600; padding-right:1em; margin-block:auto !important;} #shop-menu-top .topnav-menu-right {flex:1 50%; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap:0;} #shop-menu-top .topnav-menu-right li {min-width:unset; margin:0;} #shop-menu-top .topnav-menu-right li:before {display:none;} #shop-menu-top .nav-link {border:1px solid var(--border); border-radius:var(--boradius); } #shop-menu-top .nav-link:is(:active,:focus) {background:var(--opac) !important; color:var(--primary) !important; opacity:1;} #shop-menu-top #shop-search-container .nav-link {border-top-right-radius:0; border-bottom-right-radius:0; border-right-color:transparent !important;} #shop-menu-top #shop-cart .nav-link {border-top-left-radius:0; border-bottom-left-radius:0;} #shop-menu-top:has(#shop-cart.show) #shop-search-container .nav-link {border-bottom-left-radius:0;} #shop-menu-top .nav-link, #shop-toolbar .toolbar-left button.toolbar-view-entry {font-size:1.3em; padding:.25em 1em; min-height: 2.5em; align-content: center; } /*css-search*/ #shop-menu-top .topnav-menu-right li.topmenu-search { width:100%; #shop-search-container {display: flex; align-items: center; width: 100%; justify-content: flex-end; align-items: stretch;} #shop-search-container:has(+#shop-search-results.show.open) :is(#shop-search-field.open + .nav-link, #shop-search-field.open > input) {border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important;} #shop-search-field {max-width:0px; width:100%; transition:var(--trans); display:block !important;} #shop-search-field.open {max-width:100vw;} #shop-search-field.open input {border-bottom-right-radius:0;border-top-right-radius:0;} #shop-search-field.open + .nav-link {border-bottom-left-radius:0;border-top-left-radius:0; background-color:var(--opac);} input {max-width:100%; box-shadow:unset !important; border-radius:var(--boradius); border:1px solid var(--border); border-right:none !important; height:100%; transition:var(--trans);} #shop-search-results {font-size:.8em; overflow-y: auto; max-height: 50vh; border:1px solid var(--border); padding-block:0; overflow-x:hidden; border-radius:var(--boradius) 0 var(--boradius) var(--boradius);} #shop-search-results.show.open:empty {display: flex; justify-content: center; align-items: center; width: 100%; border-top-left-radius: 0 !important;} #shop-search-results.show.open:empty:before {content:"Inga sökresultat"; opacity:.5;} #shop-search-results > .row:first-child {padding-block:.75em; align-items:center; padding-right:.5em;} #shop-search-results > .row:first-child h6 {margin:0; font-weight:600; font-size: 1em; letter-spacing: 1px; margin-left: 5px;} #shop-search-results #shop-search-all {border-bottom: 1px dashed; line-height: normal; text-transform: uppercase; font-size: .9em;} #shop-search-results .quick-search-entry {border-right:none !important; border-left:none !important; background-color:transparent; line-height:normal; padding-right:1em;} #shop-search-results .quick-search-entry .row {align-content: center; align-items: center;} #shop-search-results .quick-search-entry [class*="col-"]:has(img) {padding-right:0;} #shop-search-results .quick-search-entry img {height: 5em; width:100%; max-width:unset; object-fit: contain; object-position: center;} #shop-search-results .quick-search-entry br {display:none;} #shop-search-results .quick-search-entry [class*="col-"]:nth-child(2) > strong {display:block;} #shop-search-results .quick-search-entry:hover .product-stock {font-size:1em; } #shop-search-results .quick-search-entry .product-stock {font-size:0px; letter-spacing:0; transition:var(--trans);} #shop-search-results .quick-search-entry .product-stock:before {content:"\f00c"; font:var(--fonticon); font-size:small; color:inherit; margin-right:5px;} #shop-search-results .quick-search-entry .product-stock.out_of_stock:before {content:"\f00d";} #shop-search-results .quick-search-entry [class*="col-"]:last-child {padding-left:0; text-align:right;} #shop-search-results .quick-search-entry [class*="col-"]:last-child .product-price {display: flex; flex-direction: column; letter-spacing:0; color:var(--primary);} #shop-search-results .quick-search-entry [class*="col-"]:last-child span.number {font-size:1.2em; font-weight:600;} #shop-search-results .quick-search-entry [class*="col-"]:last-child span.currency {font-size:.9em; margin-top:-2px;} } /*css-cart*/ #shop-menu-top .topnav-menu-right li.topmenu-cart { #shop-cart {} #shop-cart.show > .nav-link {background-color:var(--opac); border-bottom-left-radius:0; border-bottom-right-radius:0;} #shop-cart > .nav-link .badge {background:var(--primary);} #shop-cart .dropdown-menu.show {} #shop-cart .dropdown-menu:not(:has(>.text-center)) {width:40vw; } #shop-cart .dropdown-menu:has(>.text-center) {min-width:15em; } #shop-cart .dropdown-menu { background-color:var(--light); color:var(--dark); font-size:inherit; padding:0; margin:-1px 0 0 0 !important; border:1px solid var(--border); overflow-x:hidden; overflow-y:auto; max-height:60vh; border-radius:var(--boradius); border-top-right-radius:0; > .text-center {opacity:.5; font-size: .8em; line-height:normal; padding: 1em;} > .row {margin:0;} > .row:nth-child(1) > div {padding:0;} > .row:nth-child(2) {position: -webkit-sticky; position: sticky; inset: auto 0 0 0;} .cart-footer {margin:0; padding:1em 2em; background-color:var(--opac); display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;} .cart-footer > p {margin:0; font-size:1.3em; font-weight:600; line-height:normal;} .cart-footer > p :is(strong,span) {font-weight:300; font-size:.8em;} .cart-footer > p span {display:block; line-height:normal; font-style:italic; font-size:.6em;} .cart-footer .btn.cart-button {margin:0; padding:.7em 1.2em;} .cart-footer .btn.cart-button:after {content:"\f061"; font:var(--fonticon); color:inherit; margin-left:1em; display:flex;} :is(.cart-list, .cart-list > li, .cart-list li .row) {margin:0;} .cart-list {padding-bottom:0 !important;} .cart-list > li {line-height:normal; width:100%; padding-right:1em;} .cart-list > li:last-child {border-bottom:none !important;} .cart-list .cart-item-row-1 {display: flex; align-items: flex-end;} .cart-list .cart-item-row-1 > [class*='col']:first-child {padding-right:0;} .cart-list .cart-item-row-1 > [class*='col']:nth-child(2) {padding-inline:0;} .cart-list .cart-item-row-1 > [class*='col']:nth-child(2) [class*='col']:has(*:empty) {display:none;} .cart-list .cart-item-row-1 > [class*='col']:last-child {padding-left:0; text-align:right;} .cart-list .cart-item-row-1 > [class*='col']:last-child [class*='col'] {padding-inline:0;} .cart-list .cart-item-row-1 img {height: 5em; width:100%; object-fit: contain; object-position: center; background:#efefef; border-radius:calc(var(--boradius) / 2);} .cart-list .cart-item-row-1 a {margin:0 !important;} .cart-list .cart-item-row-2 {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;} .cart-list .cart-item-row-2 > div {flex: 1 !important; max-width: unset; margin:0;} .cart-list .cart-item-row-2 .btn {margin:0;} .cart-list .cart-item-row-2 .input-group {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;} .cart-list .cart-item-row-2 .input-group input {width:100%; border-radius:var(--boradius) 0 0 var(--boradius); border:1px solid var(--dark); box-shadow:none !important; outline:none !important;} .cart-list .cart-item-row-2 .input-group .btn {height:100%; border-radius:0 var(--boradius) var(--boradius) 0; background-color:var(--dark); color:var(--light) !important;} .cart-list .cart-item-row-2 .input-group .btn:after {display:none;} .cart-list .cart-item-row-2 .btn.control-cart-item-delete {border-radius:calc(var(--boradius) / 1); background: var(--danger); height: 100%; width: 4em; display: flex; align-items: center; justify-content: center;} .cart-list .cart-item-row-2 > div:nth-child(2) {display:flex; justify-content: flex-end;} } } /*cart-fixed*/ #shop-cart .dropdown-menu:not(:has(> .text-center)) { padding-top:1.5em !important; position: fixed !important; max-height: calc(100vh - var(--navh) - 4em) !important; min-height: calc(100vh - var(--navh) - 8em) !important; inset: calc(var(--navh) + 2em) -1px auto auto !important; transform: none !important; z-index: 300000; border-radius: var(--boradius) 0 0 var(--boradius); > .row:nth-child(1) {min-height:inherit;} > .row:nth-child(1) > div {padding-inline:0;} > .row:nth-child(1) ul.cart-list {height: 100%; max-height: unset;} > a.close {position:absolute; inset:0 auto auto 0; font-size:1.2em; height:2em; width:2em; display:flex; align-items:center; justify-content:center; border-radius:var(--boradius) 0 var(--boradius) 0; border:1px solid var(--border); border-top:none !important; border-left:none !important; background-color:var(--opac); color:var(--dark); opacity:1;} } /*css-filter*/ .shop-main-cards { #shop-toolbar {border-bottom: 1px solid var(--border); padding-bottom: 2em; margin-bottom:0; background:transparent;} #shop-toolbar:has(.topmenu-tax) {padding-bottom:3em;} #shop-toolbar .btn {font-size:.9em;} #shop-toolbar .toolbar-left {width:100%;} #shop-toolbar .toolbar-left button {border-radius:var(--boradius); border:1px solid var(--border) !important; color:var(--dark);} #shop-toolbar .toolbar-left button:is(:active,:focus) {background:var(--opac) !important; color:var(--primary) !important; opacity:1;} #shop-toolbar .toolbar-left button:after {display:none;} #shop-toolbar .toolbar-left button.toolbar-view-entry {display: flex; align-items: center; justify-content: center;} #shop-toolbar .toolbar-left button.toolbar-view-entry.active {background-color:var(--opac);} #shop-toolbar .toolbar-left button.toolbar-view-entry > i:before {content:"\f009"; font:var(--fonticon);} #shop-toolbar .toolbar-left:has(button.toolbar-view-entry#shop-gallery-view.active) #shop-list-view {border-left:none !important;} #shop-toolbar .toolbar-left:has(button.toolbar-view-entry#shop-list-view.active) #shop-gallery-view {border-right:none !important;} #shop-toolbar .toolbar-left button.toolbar-view-entry#shop-list-view > i:before {content:"\f00b";} #shop-toolbar .toolbar-left button.toolbar-view-entry#shop-gallery-view {border-top-right-radius:0; border-bottom-right-radius:0;} #shop-toolbar .toolbar-left button.toolbar-view-entry#shop-list-view {border-top-left-radius:0; border-bottom-left-radius:0;} #shop-toolbar .toolbar-left :is(button.toolbar-sort-btn, button.toolbar-sort-btn + .dropdown-menu) {width:15em; max-width:unset !important;} #shop-toolbar .toolbar-left button.toolbar-sort-btn {margin-left:auto; padding:1em 2em;} #shop-toolbar .toolbar-left button.toolbar-sort-btn[aria-expanded="true"] {background-color:var(--opac); border-bottom-left-radius:0; border-bottom-right-radius:0;} #shop-toolbar .toolbar-left button.toolbar-sort-btn span {margin-left:auto;} #shop-toolbar .toolbar-left button.toolbar-sort-btn span.caret:after {content:"\f0d7"; font:var(--fonticon);} #shop-toolbar .toolbar-left button.toolbar-sort-btn + .dropdown-menu {font-size:.9em; overflow:hidden; background:var(--light); border:1px solid var(--border); border-radius:0 0 var(--boradius) var(--boradius); } #shop-toolbar .toolbar-left button.toolbar-sort-btn + .dropdown-menu li {padding:0; margin:0; background:transparent;} #shop-toolbar .toolbar-left button.toolbar-sort-btn + .dropdown-menu li.active {background:var(--opac); color:var(--primary);} #shop-toolbar .toolbar-left button.toolbar-sort-btn + .dropdown-menu li:before {display:none;} #shop-toolbar .toolbar-left button.toolbar-sort-btn + .dropdown-menu li a {padding:.2em 1.9em !important; width: 100%; display: inline-block;} #shop-toolbar .toolbar-left button.toolbar-sort-btn + .dropdown-menu li:not(:last-child) a {border-bottom:1px dashed var(--border);} #shop-toolbar .toolbar-right:has(.topmenu-tax) {position:absolute;} } /*css-product-gallery*/ #product-list {font-size:.9em;} #product-list[data-search-query] > hr {opacity:0;} #product-list .product-list-container .product-item .product-price {color:var(--dark); opacity:.9;} #product-list[data-view="0"] { padding-top:2em; .product-list-container {margin:0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2em;} .product-list-container > p.text-center {text-align:left !important;} .product-list-container > div {padding:0; flex:unset; max-width:unset;} .product-list-container .product-item {display: flex; flex-direction: column; justify-content: flex-end; position:relative; padding:1em; height:100%; min-height:20em; margin:0 !important; transition:var(--trans); box-shadow:none !important; background:var(--white); border:1px solid var(--border); border-radius:var(--boradius); overflow:hidden;} .product-list-container .product-item .label-discount {color:white; position: absolute; inset:auto 1em 0 auto; margin-top:-1em; z-index:2; border-radius: 50%; overflow: hidden; height: 3em; width: 3em; font-size: .9em; padding: 0; display: flex; align-items: center; justify-content: center; letter-spacing: 0px;} .product-list-container .product-item .image {height:100% !important; margin:0 0 1em 0; overflow:hidden; border-radius:var(--boradius); border:1px solid var(--border); } .product-list-container .product-item .image img {margin:0 !important; height:100% !important; transition:var(--slow) all, var(--trans) transform 1s; border-radius:inherit; background-color:var(--light);} .product-list-container .product-item:has(.product-stock.out_of_stock):not(:hover) .image img {filter:saturate(0) brightness(0.8);} .product-list-container .product-item:hover .image {padding-inline:0;} .product-list-container .product-item:hover .image img {transform-origin:left; transform:scale(1.5); animation:pan 10s linear infinite;} .product-list-container .product-item .product-label {margin:0;} .product-list-container .product-item .product-title {margin-top:auto; height: unset; line-height: normal; padding: 0;} .product-list-container .product-item:has(.price-ordinary) .product-title {padding-right:4em;} .product-list-container .product-item .product-price {line-height: 1; padding: 0; font-size: 1.5em; font-weight: 600; letter-spacing:0px;} .product-list-container .product-item .product-price + .price-ordinary {padding: 0; line-height: normal; display: block;} .product-list-container .product-item .product-price + .price-ordinary .currency {font-size:inherit;} .product-list-container .product-item .product-stock {position: absolute; inset: auto .8em .2em auto; line-height:2; font-size:0px; letter-spacing:0; transition:var(--trans); display: flex; flex-direction: row-reverse; align-items: center;} .product-list-container .product-item .product-stock:before {content:"\f00c"; font:var(--fonticon); font-size:small; color:inherit; margin-left:5px; line-height:inherit;} .product-list-container .product-item .product-stock.out_of_stock:before {content:"\f00d";} .product-list-container .product-item:hover .product-stock {font-size:.8em;} } /*css-product-list*/ #product-list[data-view="1"] { .product-list-container {} .product-list-container > div {} .product-list-container .product-item {height:unset;} .product-list-container .product-item > .row {height:100%; display: grid; grid-template-columns: 20% 1.2fr 0.5fr; grid-template-rows: auto auto auto; gap: 0px 0px; grid-template-areas: "image title button" "image stock button" "image price button"; } .product-list-container .product-item > .row > div {flex:unset; max-width:100%;} .product-list-container .product-item > .row > div:nth-child(1) {grid-area: image;} .product-list-container .product-item > .row > div:nth-child(2) {grid-area: title; position:unset;} .product-list-container .product-item > .row > div:nth-child(3) {grid-area: stock;} .product-list-container .product-item > .row > div:nth-child(4) {grid-area: price; flex-direction: row !important;} .product-list-container .product-item > .row > div:nth-child(5) {grid-area: button; display: flex; justify-content: flex-end; align-content: center; align-items: center;} .product-list-container .product-item > .row > div:nth-child(n+2):nth-child(-n+4) {display: flex; align-items: flex-start; align-content: center; justify-content: flex-start; flex-direction: column;} .product-list-container .product-item .image {height:100% !important; margin:0; overflow:hidden; border-radius:calc(var(--boradius) / 2); border:1px solid var(--border); } .product-list-container .product-item .image img {margin:0 !important; max-width:unset; max-height: 8em; height:100% !important; transition:var(--slow) all, var(--trans) transform; border-radius:inherit; background-color:var(--light); width: 100%;} .product-list-container .product-item:has(.product-stock.out_of_stock):not(:hover) .image img {filter:saturate(0) brightness(0.8);} .product-list-container .product-item:hover .image img {transform-origin:left; transform:scale(1.5); animation:pan 10s linear infinite;} .product-list-container .product-item .product-label {margin:0;} .product-list-container .product-item .product-title {font-size:1.1em; margin-top:auto; height: unset; line-height: normal; padding: 0;} .product-list-container .product-item .product-price {line-height: 1; padding: 0; font-size: 1.5em; font-weight: 600; letter-spacing:0px;} .product-list-container .product-item .product-price + .price-ordinary {margin:.4em 0 0 .5em; padding: 0; line-height: normal; display: block;} .product-list-container .product-item .product-price + .price-ordinary .currency {font-size:inherit;} .product-list-container .product-item .product-stock {display: flex; flex-direction: row; align-items: center; transition:var(--trans); font-size:.9em;} .product-list-container .product-item .product-stock i {display:none;} .product-list-container .product-item .product-stock:after {content: attr(title);} .product-list-container .product-item .product-stock:before {content:"\f00c"; font:var(--fonticon); font-size:small; color:inherit; margin-right:5px; line-height:inherit;} .product-list-container .product-item .product-stock.out_of_stock:before {content:"\f00d";} /*.product-list-container .product-item .btn.control-productlist-add-cart-pop {font-size: 0 !important; margin:0; display: flex; align-items: center; align-content: center; height: 4em; width: 4em; padding: 0 !important; border-radius:var(--boradius); justify-content: center; letter-spacing:0;}*/ .product-list-container .product-item .btn.control-productlist-add-cart-pop {padding:.5em 1em; position:relative; font-size:1em; margin:0; display: flex; flex-direction: row-reverse; align-items: center; align-content: center; border-radius:var(--boradius); justify-content: center;} .product-list-container .product-item .btn.control-productlist-add-cart-pop:after {display:none;} .product-list-container .product-item .btn.control-productlist-add-cart-pop i {font-size: inherit; margin-left:5px;} } /*css-preview*/ #product-view { > .row {margin-inline:0;} .product-view-header {font-size:.8em; line-height:normal;} .product-view-header a {margin:0;} .product-view-images {flex: unset; max-width: 40%;} .product-view-images > .row {transition:var(--trans); position:sticky; position:-webkit-sticky; top:calc(var(--navh) + 2rem);} .product-view-images > .row > ul.image-container {width:100%; height: 50vh; scroll-snap-type: y mandatory; overflow-y:auto; overflow-x:hidden; border: 1px solid var(--border); border-radius: var(--boradius); display: flex; gap: 1em; background: var(--light); flex-direction: column; flex-wrap: nowrap;} .product-view-images > .row > ul.image-container::-webkit-scrollbar {width: 6px; height: 3px; transition:var(--trans);} .product-view-images > .row > ul.image-container::-webkit-scrollbar-track {background: transparent;} .product-view-images > .row > ul.image-container::-webkit-scrollbar-thumb {background: var(--opac); border-radius:10px; cursor:pointer;} .product-view-images > .row > ul.image-container::-webkit-scrollbar-thumb:hover {background: var(--dark);} .product-view-images > .row > ul.image-container:has(li:nth-child(n+2)) > li:first-child:after {content:""; transition:var(--trans); background:url('../../../../assets/images/scroll-down.gif') 50% 50% / contain no-repeat scroll transparent; height:3em; width:3em; position:absolute; right:1em; bottom:1em;} .product-view-images > .row > ul.image-container:hover:has(li:nth-child(n+2)) > li:first-child:after {opacity:0;} .product-view-images ul.image-container :is(li:first-child, li:first-child .image-container) {height:inherit;} .product-view-images ul.image-container li:first-child img {object-fit:cover;} .product-view-images ul.image-container li {scroll-snap-align: start; margin:0; max-width:100%; background-color:white;} .product-view-images ul.image-container li:before {display:none;} .product-view-images ul.image-container :is(li, .image-container) {overflow:hidden; height:100%; padding:0;} .product-view-images ul.image-container li img {background-color:var(--light); width:100%; height: 100%; object-fit: contain; object-position: center; transition:var(--trans) transform;} .product-view-images ul.image-container li:hover img {transform-origin:left; transform:scale(1.2); animation:pan 10s linear infinite;} .product-view-images + div {flex: unset; max-width: 60%; padding-inline:2em 0;} #product_form .product-view-content { /*display:flex; flex-direction:column; flex-wrap: nowrap; gap:1em;*/ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto auto auto; gap: 1em; grid-template-areas:"c1 c1" "c2 c3" "c4 c4" "c5 c5"; .title {order:1; grid-area: c1;} .title > * {font-size:2em; margin-block:1em 0em; line-height:1.35em;} .addition {grid-area: c2;} .additions, .product-view-variations, .menu {margin:0; height:100%; font-size:.8em; order:2; float:none !important; padding:1em; border-radius:var(--boradius); border:1px solid var(--border); display: flex; flex-direction: column; gap: .5em;} .additions, .product-view-variations, .menu {box-shadow:0 0 1.5em rgba(0,0,0,0.08) inset;} .additions * {float:none !important;} .additions ul {color:#181818; border:1px solid var(--border); background-color:white; border-radius:var(--boradius); gap:1em; padding:.75em 1em; margin:0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; transition:var(--trans);} .additions ul:has(#control-addition-check.addition-checked) {background-color:var(--opac); color:var(--dark);} .additions ul li {padding:0 !important; margin:0 !important; line-height:normal;} .additions ul li:first-child {margin-right:auto !important; flex:1;} .additions ul li:before {display:none;} .additions ul li.addition-button #control-addition-check {display: flex; flex-direction: row-reverse; align-items: center; gap: 5px;} .additions ul li.addition-button #control-addition-check.addition-unchecked i {display:none;} .additions ul li.addition-button #control-addition-check.addition-checked {color:var(--success); font-weight:600;} .product-view-variations {order:3; grid-area: c3;} .product-view-variations .form-group {margin:0; padding:0; position:relative;} .product-view-variations .form-group:not(:last-child) {} .product-view-variations .form-select:before {display:none;} /*version 1*/ .product-view-variations .form-select > label {color:#181818; display: block; position:absolute; font-size:.9em; letter-spacing:0; inset:.75em auto auto 1.2em; width:calc(100% - 3em); pointer-events:none; display: flex; justify-content: space-between; align-items: flex-end; line-height:normal;} .product-view-variations .form-select > label:after {content:"\f0d7"; font:var(--fonticon); font-size: 1.2em; margin-bottom: -1em;} .product-view-variations .form-select > select {appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 2em 1em .5em 1em; height: unset; } /*version 2*/ /*.product-view-variations .form-select > label {margin:0 0 0 1.5em;} */ /*.product-view-variations .form-select > select {padding: .5em 1em .5em 1em; height: unset; }*/ :is(.additions +:not(.product-view-variations), .additions:has(+:not(.product-view-variations)), .product-view-variations:not(.additions ~ .product-view-variations)) {grid-column: 1 / span 2;} .menu {order:4; grid-area: c4; display: flex; flex-direction: row; flex-wrap: nowrap; padding-inline:1em; margin:0 !important; align-items: flex-end;} .menu * {float:none;} .menu .product-stock {display:block;} .menu > .row {margin:0;} .menu > .row > div {padding:0;} .menu br {display:none;} .menu .price {display:block; letter-spacing:0; font-size:2em; align-items: flex-end; margin-top:5px; line-height:1.2;} .menu .price .number {font-size:1.5em; line-height:1;} .menu .price .currency {font-size: .8em; line-height: normal; width:2em;} .menu > .row:nth-child(1) {width:100%;} .menu > .row:nth-child(2) {width:100%;} .menu > .row:nth-child(2) > div {flex:unset; max-width:100%;} .menu > .row:nth-child(2) .product-buttons {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;} .menu > .row:nth-child(2) .product-buttons input {min-width:6em; height: unset; max-width: unset; border-radius:var(--boradius) 0 0 var(--boradius);} .menu > .row:nth-child(2) .product-buttons .btn {margin:0 0 0 -1px; border-radius:0 var(--boradius) var(--boradius) 0; padding: 1em; font-size: 1em; text-wrap: nowrap;} .description {order:5; grid-area: c5; padding:0;} } } } @keyframes pan { 0% {transform-origin:left;} 50% {transform-origin:right;} } html:has(.webshop) .popover {z-index:100; border-radius:var(--boradius); padding:2%;} html:has(.webshop) .popover .btn {margin-top:0; font-size:.8em; border-radius:var(--boradius);} html:has(.webshop) .popover .btn:before {display:none;} html:has(.webshop) .popover .btn:after {content:"\f101"; font:var(--fonticon); margin-left:1em;} html:has(.webshop) .popover .form-control {box-shadow:none !important; border-color: var(--border) !important;} #shop-images-modal {inset:0 !important; height:100vh !important; overflow:hidden !important;} #shop-images-modal .modal-content {height:100%; background:transparent;} #shop-images-modal .modal-body {height: 100%; background:transparent; border:none;} #shop-images-modal .modal-dialog {height: 100%; width: 100%; max-height: 90vh; max-width: 90vw; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) !important; margin: 0;} #shop-images-modal .modal-dialog img {height: 100%; object-fit: contain; width: 90vw; height: 90vh; object-position: center; margin: 0; display: block;} #shop-images-modal .caption-container {z-index:100; text-align:left; font-size:0; inset:auto 0 -1px 0; display: flex; align-items: flex-start; padding: 2em; background: var(--dark); flex-direction: column; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);} #shop-images-modal .caption-container h3 {font-size:1.5em !important; margin-bottom:5px;} #shop-images-modal .caption-container.hidden {display:none;} #shop-images-modal .control-close { height: 4rem; width: 4rem; font-size:1.2rem; border-radius:50%; background-color:var(--dark); color:var(--light) !important; align-items: center; justify-content: center; display: flex; transition:var(--trans);} #shop-images-modal .control-close:before {transition:.3s all; content: "\f00d"; font: var(--fonticon);} #shop-images-modal a.controls span:before {transition:.3s all; content: "\f054"; font: var(--fonticon);} #shop-images-modal a.controls span.glyphicon-chevron-left:before {content: "\f053";} html:has(body.modal-open):has(#shop-images-modal.show) .modal-backdrop.show {opacity:.9;} html:has(body.modal-open), html:has(.webshop) body.modal-open {overflow:hidden auto !important;} html:has(.webshop) .modal-backdrop:has(+.modal.shop-modal:not(#modal-confirm)) {display:none;} html:has(.webshop) .modal.shop-modal.show {display: flex !important;} html:has(.webshop) .modal.shop-modal.show.load .modal-header:after {animation:maxwidth 8s linear 1 forwards; content: ""; height: 3px; width: 100%; background: var(--opac); position: absolute; inset: auto auto 0 0; transition: var(--trans); max-width: 0px;} html:has(.webshop) .modal:not(#modal-cc) { margin:0; align-items: center; transform:none !important; position: fixed; inset: auto auto 2em 0; height: unset; width: unset; background:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; .modal-dialog {margin:0; min-width:30em;} .modal-content {border-radius:0 var(--boradius) var(--boradius) 0; border-color:var(--border);} .modal-header {position:relative; display: flex; flex-direction: row; align-content: center; align-items: center; height:unset;} .modal-header:is(:has(> :is(a.close, .btn-close):only-child), :has(> :is(h3:empty, h4:empty, h5:empty))) {display:none;} .modal-header :is(a.close,.btn-close) {cursor:pointer; font-size:0; border:1px solid var(--border); color:var(--dark); border-radius:50%; background:rgba(0,0,0,0.1); height:3em; width:3em; display:flex; align-items: center; justify-content: center; opacity:1; float:none; margin:0; transition:var(--trans);} .modal-header :is(a.close,.btn-close):hover {opacity:.6;} .modal-header :is(a.close,.btn-close):before {display:none;} .modal-header :is(a.close,.btn-close):after {content:"\f00d"; font:var(--fonticon); font-size:medium;} .modal-header h3 {font-family: var(--font1); line-height:normal; padding-right:1em;} .modal-footer {padding-bottom:1em !important; border:none; display: flex; flex-direction: row; justify-content: space-between;} .modal-footer .btn {margin:0; border:1px solid var(--border); color:var(--dark) !important; padding:.7em 1.5em !important; border-radius:var(--boradius); font-size:.8em;} .modal-footer .btn:before {display:none !important;} .modal-footer .btn:after {content:""; font:var(--fonticon); color:inherit;} .modal-footer .btn#modal_submit {background:var(--primary);color:var(--light) !important;} .modal-footer .btn#modal_dismiss {flex-direction: row-reverse;} .modal-footer .btn#modal_dismiss:after {content:"\f060"; margin-inline:0 1em !important;} .modal-footer .btn#modal_submit:after {content:"\f061";} .modal-body .row {display: flex; flex-direction: row; flex-wrap: nowrap;} .modal-body .row img {height:100%; width:100%; border-radius:calc(var(--boradius) / 2);} .modal-body .row p br {display:none;} .modal-body .row p > strong {font-weight:300; display: block; padding-bottom: .3em; margin-bottom: .2em;} .modal-body .row p > strong a {cursor:default; pointer-events:none; color:inherit;} .modal-body .row p > strong ~ i {font-size:.6em !important; font-weight:300;} .modal-body .row > div:nth-child(1) {flex: 1 50%; max-width: 50%;} .modal-body .row > div:nth-child(2) {margin-block:auto; line-height:1.3; padding-left:0 !important;} .modal-body .row > div:nth-child(2) > p {margin-bottom:.5em;} .modal-body .row > div:nth-child(2) > p ~ div {font-size:.7em;} } /*html:has(.webshop) .modal-backdrop {opacity:1; background-color:rgba(0,0,0,0.3); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}*/ html:has(.webshop):has(#checkout-toc) .modal.shop-modal {background:rgba(0,0,0,0.2) !important; inset:0; height:100%; width:100%; align-items: center; justify-content: center; max-width:100% !important;} html:has(.webshop):has(#checkout-toc) .modal.shop-modal .modal-dialog {width:100%;} html:has(.webshop):has(#shop-checkout) .modal:is(#modal-ajax,#modal-confirm) {inset:50% auto auto 50% !important; transform:translateX(-50%) translateY(-50%) !important;} html:has(.webshop):has(#shop-checkout) .modal:is(#modal-ajax,#modal-confirm) .modal-content {border-radius:var(--boradius);} html:has(.webshop):has(#shop-checkout) .modal:is(#modal-ajax,#modal-confirm) .modal-header > :is(h5, h4,h3) {font-size: 2em; font-family:var(--font2);} /*checkout*/ .webshop #shop-checkout { padding-top:3em; .btn {border-radius:var(--boradius); margin-top:0;} .btn:after {display:none;} .btn.keep-shopping {color:var(--dark) !important; flex-direction:row-reverse; background:transparent !important;} .btn.keep-shopping:after {content:"\f060"; font:var(--fonticon); color:inherit; margin-inline:0 1em; display:flex;} .checkout-section-header {margin-block:0; border-bottom:none !important; padding-bottom:0;} #checkout-form {display:block; position:relative;} .checkout-overlay {background-color:var(--bodycolor); opacity:.5;} .checkout-section#checkout-section-top { width:100%; margin:0; .btn.keep-shopping {float: none; background: transparent; color: var(--dark); padding: 0; margin-top: -3em !important; position: absolute;} .checkout-voucher .row > div {flex: unset; max-width: 100%; display: flex; flex-direction: column;} .checkout-voucher .row > div .input-group {} .checkout-voucher .row > div .input-group input {height:100%; border-radius:var(--boradius) 0 0 var(--boradius);} .checkout-voucher .row > div .input-group .btn {border-radius:0 var(--boradius) var(--boradius) 0;} .checkout-voucher .row > div .voucher-error {padding-inline:1em;} > div:nth-child(1) {float:left; width: calc(60% - 2em); padding-top:2em; border-right: 1px solid var(--border); padding-right: 2em;} > div:nth-child(1) {display:flex; flex-direction: column;} > div:nth-child(1) > .row {order:1;} > div:nth-child(1) > #checkout-cart {order:3;} > div:nth-child(1) > .checkout-voucher {order:2; margin-top:1em;} > :is(div:nth-child(2),div:nth-child(3)) {float:right; width:40%; margin:0;} #checkout-cart {margin-top:1em;} #checkout-cart table {border:none !important; border-radius:0;} #checkout-cart table a {margin:0;} #checkout-cart table td {padding:0; border:none;} #checkout-cart table thead {display:none; background:transparent; border-bottom:1px solid var(--border) !important;} #checkout-cart table thead th {color:var(--dark); padding:0; border-bottom:1px solid var(--border) !important; border-top:none !important;} #checkout-cart table thead th strong {font-size:.7em; font-weight:600; text-transform:uppercase;} #checkout-cart table tbody {line-height:normal;} #checkout-cart table tbody tr {border-bottom:1px solid var(--border) !important; padding-block:.5em; position:relative; display: grid; grid-template-columns: auto 1fr 10em; grid-template-rows: auto auto; gap: 0; grid-template-areas: "d1 d2 d3" "d1 d4 d5"; } #checkout-cart table tbody td {width:unset; padding-block:.5em; } #checkout-cart table tbody td:not(:last-child) {} #checkout-cart table tbody td:nth-child(1) {grid-area:d1; display: flex; flex-direction: column; justify-content: center; padding-right:1em;} #checkout-cart table tbody td:nth-child(2) {grid-area:d2; display: flex; flex-direction: column; justify-content: center; padding-bottom:0;} #checkout-cart table tbody td:nth-child(3) {grid-area:d3; padding-bottom:0;} #checkout-cart table tbody td:nth-child(4) {grid-area:d4; padding-top:0;} #checkout-cart table tbody td:nth-child(5) {grid-area:d5; padding-top:0;} #checkout-cart table tbody td:nth-child(6) {grid-area:d6;} #checkout-cart table tbody :is(td:nth-child(3),td:nth-child(5)) {text-align:center;} #checkout-cart table tbody :is(td:nth-child(2),td:nth-child(4)) {} #checkout-cart table tbody td:nth-child(1) img {border:1px solid var(--border); height:8em !important; width:8em !important; object-fit:cover; border-radius:calc(var(--boradius));} #checkout-cart table tbody td:nth-child(2) strong {font-weight:400; font-size:1em;} #checkout-cart table tbody td:nth-child(2) > strong:first-child + .property {margin-top:.5em;} #checkout-cart table tbody td:nth-child(2) > strong:first-child ~ .property:last-child {margin-bottom:.5em;} #checkout-cart table tbody td:nth-child(2) .property {display:inline-flex; margin-block:-1px;} #checkout-cart table tbody td:nth-child(4) {font-weight:700; font-size:1.1em; letter-spacing:0px;} #checkout-cart table tbody td:nth-child(4) span:nth-child(2) {font-weight:400; font-size:.8em; letter-spacing:0px;} #checkout-cart table tbody td:nth-child(3) {display: inline-flex; justify-content: center; align-items: flex-end;} #checkout-cart table tbody td:nth-child(3) > * {background: transparent; font-size:1em; margin:0 !important; color: var(--dark) !important; height: 3em; width: 3em; display: inline-flex; padding: 0; align-items: center; justify-content: center;} #checkout-cart table tbody td:nth-child(3) > .btn {font-size:.7em !important; border: 1px solid var(--border); border-radius: 50%; margin-bottom:.7em !important;} #checkout-cart table tbody td:nth-child(5) {font-weight: 700; letter-spacing: 0px; font-size: 1.5em;} #checkout-cart table tbody td:nth-child(6) {position:absolute; left:0; bottom:.5em;} #checkout-cart table tbody td:nth-child(6) > .btn {opacity:.7; background-color: var(--danger); color:var(--light); border:1px solid var(--danger); width: 2em; height: 2em; padding: 0; display: flex; align-items: center; justify-content: center;} #checkout-cart table tbody tr:hover td:nth-child(6) > .btn {opacity:1; width: 3em; height: 3em;} #checkout-cart table tbody tr:not(tr[id]):has(+tr[id]) {border-bottom:none !important; padding-bottom:0;} #checkout-cart table tbody tr[id]:has(+tr:not([id])) {/*padding-bottom:1em;*/} #checkout-cart table tbody tr[id] {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding-block:0; padding-bottom:.5em; border-bottom:1px solid var(--border);} #checkout-cart table tbody tr[id] :is(td:nth-child(1),td:nth-child(3),td:nth-child(4),td:nth-child(6)) {display:none;} #checkout-cart table tbody tr[id] td:nth-child(2) {display: flex; flex-direction: row; padding:0;} #checkout-cart table tbody tr[id] td:nth-child(5) {width:10em; padding:0; font-size:1em; color:var(--danger); font-weight:300;} #checkout-cart table tbody :is(tr[id]+tr[id]) {display:none;} #checkout-cart table tbody tr:has(+tr.addition) {border-bottom:none !important;} #checkout-cart table tbody tr:last-child {background:var(--opac); border-radius:0 0 var(--boradius) var(--boradius);} #checkout-cart table tbody tr:last-child td:nth-child(1) {display:none;} #checkout-cart table tbody tr:last-child td:nth-child(4) {text-align:right;} #checkout-cart table tbody tr:last-child td:nth-child(4) strong {font-weight:300; line-height: 2; display: block;} #checkout-cart table tbody tr:last-child td:nth-child(5) {line-height:2.2rem;} } .checkout-section:has(+.checkout-section:empty):after {content:""; display:block; clear:both;} .checkout-section { width: 40%; margin-left: auto; #control-checkout-open-login {border-bottom:1px dashed var(--dark);} .checkout-section-inner:nth-child(2) { padding-bottom:0 !important; margin-top:2em !important; .row > .col-md-6:has(+.col-md-6):nth-child(1) {padding-right:.4em;} .row > .col-md-6+.col-md-6:nth-child(2) {padding-left:.4em;} .form-group label {margin-bottom:0;} .form-group input {height:3em;} } .checkout-section-inner:nth-child(2)+.checkout-section-control {margin:0 !important; border:1px solid var(--border); border-top:none !important; padding:0 2em 2em 2em; border-radius:0 0 var(--boradius) var(--boradius);} .checkout-section-inner:nth-child(2)+.checkout-section-control > div {padding-inline:0;} .checkout-section-inner:nth-child(2)+.checkout-section-control .btn {width:100%; display: flex; justify-content: space-between;} .checkout-section-inner .form-group {margin-bottom:.8em;} .checkout-section-inner .checkout-option {line-height:normal; background-color: var(--border); display:flex; align-items: center; flex-direction: row; justify-content: flex-start; gap:1em; border-radius:var(--boradius); margin-bottom:.8em;} .checkout-section-inner .checkout-option .checkout-option-logo {padding: 0 0px 0 10px; flex:none; display: flex; align-items: center; justify-content: center;} .checkout-section-inner .checkout-option .checkout-price {margin-left:auto;} .checkout-section-inner .checkout-option.selected {background:var(--opac) !important;} } .checkout-section#checkout-section-top { .checkout-section-inner:nth-child(2) .row {margin:0 !important; border:1px solid var(--border); border-bottom:none !important; padding:1em 1em 0 1em; border-radius:var(--boradius) var(--boradius) 0 0;} ~ .checkout-section {transform: translateY(3em); margin-top:3em; display: flex; flex-direction: column;} ~ .checkout-section .checkout-section-inner {margin:1em 0 0 0 !important; border:1px solid var(--border); border-bottom:none; padding:2em 2em 0 2em; border-radius:var(--boradius) var(--boradius) 0 0;} } .checkout-section#checkout-section-final .checkout-section-inner { border-bottom:1px solid var(--border) !important; overflow:hidden; border-bottom-left-radius:var(--boradius) !important; border-bottom-right-radius:var(--boradius) !important; h4 {margin-block:0 .5em;} textarea {height:120px;} .form-group:has(.form-group) {margin-bottom:0;} :is(input[type=checkbox], input[type=radio]) {height:1.5em !important; width:1.5em !important; accent-color:var(--primary); margin-right:.5em; cursor:pointer;} div:has(>:is(input[type=checkbox], input[type=radio])) {display: flex; align-content: center; align-items: center; flex-direction: row; flex-wrap: wrap;} .checkout-shipping-info-container {border-top:1px solid var(--border); margin-top:2em;} .checkout-shipping-info-container h2 {margin-bottom:.5em; padding-right: 35%; font-size: 1.5em;} .checkout-shipping-info-container h2 small {position: absolute; right: 0;} .checkout-shipping-info-container h2 small button {font-size:.5em; margin-bottom:-1em; font-family:var(--font1); background: transparent !important; outline:none !important; color:var(--dark) !important; box-shadow:none !important; padding: 0; border:none !important; border-bottom: 1px dashed !important; border-radius: 0;} .checkout-shipping-info-container + .row { background: var(--opac); margin: 2em -2em 0 -2em !important; padding:2em; .checkout-shipping-info-container + .row > div:has(.checkout-error-msg:empty) {display:none;} hr {margin-top:0;} #checkout-sum {padding: 1em 0; line-height: normal; font-size: 1em; text-align: left;} #checkout-sum span {font-weight:700; font-size:1.3em;} #checkout-toc {margin-top:1em; line-height:normal; text-align:left;} #checkout-toc #control-open-toc {border: 1px solid var(--border); margin-inline: 5px; border-radius: var(--boradius); padding: .1em 1em; background: var(--primary); color: var(--light);} #input_checkout_submit {width:100%; display:flex; margin-top:1em; justify-content: space-between;} #input_checkout_submit:after {display:flex;content:"\f00c"; font:var(--fonticon); color:inherit; margin-left:1em;} #input_checkout_submit i {margin-left:auto;} #input_checkout_submit:has(i):after {display:none;} } } #checkout-receipt { a {margin:0;} hr {display:none;} table {border-radius:0;} table thead {background:var(--opac) !important; color:var(--dark) !important;} table tbody {font-size:1em;} table strong {line-height: normal; display: inline-block;} table tr {background:transparent !important;} table td {border:none; border-bottom:1px solid var(--border); padding-block:.2em; vertical-align:top; padding-inline:0;} table .form-group, table .form-group label {margin:0;} table .form-group label {line-height: normal; display: block; margin-top: .5em;} table td[valign="top"] table tbody td:first-child {padding-left: 0 !important;} table td[valign="top"] > .row {display: flex; flex-direction: column;} table:not(.table) > tbody > tr > td > strong {font-size:1.2em;} table td img {width: 5em; max-height: 5em !important; object-fit: contain;} table thead tr th {padding-inline:0 !important;} } } @keyframes maxwidth { 100% {max-width:100%;} } /*dark-shop*/ .dark-shop.webshop { --border:rgba(255,255,255,0.1); --opac: #1D1F21; --light: #181818; --dark: #fff9f5; --white: #1D1F21; --black: #eeeeee; --bodycolor: #2F3035; a:hover {color:var(--black);} } /*html:has(.webshop):has(.modal.shop-modal.show) .popover:has(.pop-product-price).show {opacity:0;}*/ @media (max-width: 2060px) { .webshop {font-size: 18px;} } @media (max-width: 1920px) { .webshop {font-size: 16px;} .webshop .shop-container .shop-main #product-list[data-view="0"] .product-list-container {grid-template-columns: 1fr 1fr 1fr;} } @media (max-width: 1440px) { .webshop {font-size: 14px;} } @media (max-width: 1280px) { :root { --boradius: 0px; } .webshop {font-size: 12px;} .webshop .shop-container .shop-main #product-list[data-view="0"] .product-list-container {grid-template-columns: 1fr 1fr;} } @media (max-width: 992px) { .webshop {padding-inline:7.5px;} .webshop .shop-container .shop-menu { max-width:calc(100vw - 2.5em); position: absolute; z-index: 100; background: var(--light); .shop-menu-title {font-size:1em !important; transition:var(--trans);} .shop-menu-toggler {display:flex; font-size:medium !important;} } .webshop .shop-container .shop-menu.collapsed {max-height:5em; max-width:12em; padding-left:0; padding-block:0;} .webshop .shop-container .shop-menu.collapsed .shop-menu-title .shop-menu-toggler {border-bottom-left-radius:0; border-top-left-radius:0; border-left-color:var(--opac); border-top-color:var(--opac); border-bottom-color:var(--opac);} .webshop .shop-container .shop-menu.collapsed .shop-menu-list {opacity:0; max-height:0px; margin:0;} .webshop:has(.shop-main #shop-search-field.open) .shop-container .shop-menu.collapsed {max-width: 3em; padding-right: 0 !important;} .webshop:has(.shop-main #shop-search-field.open) .shop-container .shop-menu.collapsed .shop-menu-title {font-size:0px !important; letter-spacing:0;} .webshop:has(.shop-main #shop-search-field.open) .shop-container .shop-menu.collapsed .shop-menu-title .shop-menu-toggler {border-right-color:var(--opac); border-radius:0;} .webshop .shop-container .shop-main:has(.cart-dropdown.show):not(:has(.dropdown-menu > .text-center)) {z-index:100 !important;} html:has(.webshop .shop-container .shop-main .cart-dropdown.show):not(:has(.dropdown-menu > .text-center)) #cc-settings-container {z-index:-1;} .webshop .shop-container:has(.shop-main .cart-dropdown.show):not(:has(.dropdown-menu > .text-center)) .shop-menu {opacity:0;} .webshop .shop-container .shop-main { position:relative; z-index:1; #shop-menu-top .topnav-menu-left {flex:1 20%; font-size:0;} #shop-menu-top .topnav-menu-right li.topmenu-cart { #shop-cart .dropdown-menu {min-width:50vw; width:calc(100vw - 2.5em) !important;} #shop-cart .dropdown-menu:has( > .text-center) {min-width:15em; width:15em !important;} /*cart-fixed*/ #shop-cart .dropdown-menu {width:101vw !important; max-height:calc(100vh - var(--navh) - 1.8em) !important; border-radius:var(--boradius) var(--boradius) 0 0 !important;} } #shop-menu-top .topnav-menu-right li.topmenu-search #shop-search-results {margin: 0 -5.5em 0 0; max-width: calc(90vw + 1em); border-radius:var(--boradius);} #shop-menu-top .topnav-menu-right li.topmenu-search #shop-search-results.show.open:empty {margin:0 !important;} #shop-cart .dropdown-menu:not(:has(> .text-center)) > a.close {font-size:1.5em !important; left: auto !important; right: 0 !important; transform: scale(-1, 1);} } html:has(.webshop) .tooltip {display:none;} html:has(.webshop) .modal.shop-modal {inset:auto -1px -1px -1px;} html:has(.webshop) .modal.shop-modal .modal-content {border-radius:var(--boradius) var(--boradius) 0 0;} .webshop #shop-checkout .checkout-section#checkout-section-top > div:nth-child(1) {border:none !important; padding-right:0 !important;} .webshop #shop-checkout .checkout-section#checkout-section-top ~ .checkout-section:empty {display:none;} .webshop #shop-checkout .checkout-section, .webshop #shop-checkout .checkout-section#checkout-section-top > div {float: none !important; width: 100% !important; padding-top: 0 !important; margin-inline:0 !important;} .webshop #shop-checkout .checkout-section#checkout-section-top #checkout-cart table tbody tr td:nth-child(6) > .btn {opacity:.3;} .webshop #shop-checkout .checkout-section#checkout-section-top .checkout-section-inner:nth-child(2) .row {padding-inline:0 !important;} .webshop #shop-checkout .checkout-section#checkout-section-top ~ .checkout-section {transform:none !important;} .webshop #shop-checkout .checkout-section .checkout-section-inner:nth-child(2) .row > .col-md-6, .webshop #shop-checkout .checkout-section#checkout-section-top ~ .checkout-section .checkout-section-inner, .webshop #shop-checkout .checkout-section .checkout-section-inner:nth-child(2)+.checkout-section-control {padding-inline:15px !important;} .webshop #shop-checkout .checkout-section .checkout-section-inner .checkout-option {min-height:3em;} .webshop #shop-checkout .checkout-section .checkout-section-inner .checkout-option .checkout-option-logo img {max-height:2em;} html:has(.webshop):has(#shop-checkout) .modal:is(#modal-ajax,#modal-confirm) .modal-dialog {min-width:60vw; width:90vw !important;} /*.webshop #checkout-receipt table {overflow-x:auto; display:block;}*/ /*.webshop #checkout-receipt :is(table:not(.table) > tbody) {display:block;}*/ /*.webshop #checkout-receipt :is(.table-responsive table) {width:150vw !important;}*/ .webshop .shop-container .shop-main #product-view { > .row {flex-direction: column; flex-wrap: nowrap;} .product-view-images, .product-view-images + div {max-width:100%;} .product-view-images + div {padding-inline:0;} .product-view-images > .row > ul.image-container {height:40vh;} #product_form .product-view-content {grid-template-columns:1fr; grid-template-areas: "c1" "c2" "c3" "c4" "c5";} } .webshop .shop-container .shop-main #product-view .product-view-images ul.image-container li {display:block !important;} .webshop .shop-container .shop-main #product-view .product-view-images ul.image-container :is(li, .image-container) {overflow:unset; height:inherit;} .webshop .shop-container .shop-main #product-list[data-view="1"] { .product-list-container .product-item > .row {grid-template-columns: 20% 1.5fr 0.5fr;} .product-list-container .product-item .btn.control-productlist-add-cart-pop {font-size:0; letter-spacing:0; width:36px; height:36px;} .product-list-container .product-item .btn.control-productlist-add-cart-pop i {font-size:12px; margin:0;} } } #checkout-section-middle .checkout-section-inner .checkout-option-disabled.delivery_special1 .checkout-option-logo {flex:1} /*******WEBSHOP-V3********/