/*
Theme Name: Hagmans Nordic 2024
Theme URI: http://www.vessinge.se
Description: Hagmans Nordic
Version: 1.0
Author: Oskar Pålsson
Author URI: http://www.vessinge.se
Tags:
License:
License URI:
*/
/*#################################*/
/*### Reset */
/*#################################*/
* { width:100%; }
html, body { height:100%; padding:0; margin:0; }
ul { margin:0; padding:0; }
h1, h2, h3, h4, h5 { margin:0; padding:0; }
p { margin:0; font-weight:500; }
a { color:#000; text-decoration:none; }
a, strong, em { width:auto; float:initial; }
th, td { width:auto; }
strong { font-weight:700; }
/*#################################*/
/*### Basic */
/*#################################*/
body { font-family:'Satoshi', sans-serif; display:flex; flex-direction:column; align-items:center; color:#1E1002; }
.overlay { width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); z-index:3; visibility:hidden; opacity:0; transition:visibility 0.3s, opacity 0.3s ease; }
.overlay.visible { visibility:visible; opacity:1; }
.is-root-container { margin-top:66px; }
header { background:#fff; width:100%; display:flex; justify-content:center; position:fixed; top:0; z-index:3; }
header > .inner { box-sizing:border-box; max-width:1280px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
header > .inner > nav { width:30%; display:flex; align-items:center; }
header > .inner > nav:last-child { justify-content:end; flex-direction:row; gap:1vw; }
header > .inner > nav:last-child .toggle-search { position:relative; padding:8px 8px 8px 30px; font-size:14px; line-height:14px; cursor:pointer; }
header > .inner > nav:last-child .toggle-search::before { content:""; mask-image:url(img/magnifying_glass.svg); background-color:#000; width:18px; height:18px; position:absolute; top:5px; left:5px; }
header > .inner > nav:last-child .language { position:relative; width:auto; }
header > .inner > nav:last-child .language .icon { width:18px; height:18px; position:absolute; top:7px; left:5px; mask-image:url(img/globe.svg); background-color:#000; }
header > .inner > nav:last-child .language select { cursor:pointer; appearance:none; border:none; background:none; font-family:'Satoshi', sans-serif; padding:8px 8px 8px 30px; font-size:14px; text-transform:uppercase; position:relative; z-index:1; outline:none; box-sizing:border-box; }
header > .inner > nav:last-child .language select:focus { background:#fff; color:#000; background-image:url(img/globe.svg); background-size:18px; background-repeat:no-repeat; background-position:5px 7px; }
header > .inner > nav:last-child .webshop { background:#A4D1E1; padding:11px 19px; font-size:14px; color:#000; }
header .logo { width:240px; position:relative; content:url(img/logo.svg); }
header .toggle-menu { width:28px; height:28px; display:block; margin-right:1vw; mask-image:url(img/menu.svg); background-color:#000; cursor:pointer; min-width:28px; min-height:28px; }
header.home .logo { content:url(img/logo_white.svg); }
header.home { background:rgba(0,0,0,0.3); backdrop-filter:blur(10px); }
header.home a { color:#fff; }
header.home > .inner > nav:last-child .toggle-search::before { background-color:#fff; }
header.home > .inner > nav:last-child select { color:#fff; }
header.home > .inner > nav:last-child .language .icon { background-color:#fff; }
header.home .toggle-menu { background-color:#fff; }
#top-menu { }
#top-menu > ul { list-style:none; display:flex; flex-direction:row; gap:1vw; padding:0; }
#top-menu > ul > li { width:auto; margin:0; }
#top-menu > ul > li::before { display:none; }
#top-menu > ul > li > a { font-size:14px; }
#side-menu { position:fixed; top:0; left:-288px; bottom:0; background:#fff; width:288px; padding:24px; transition:transform 0.5s ease; margin:0; z-index:4; box-sizing:border-box; }
#side-menu .webshop { display:none; }
#side-menu .close { display:none; }
#side-menu > span { font-size:11px; line-height:16px; font-weight:700; text-transform:uppercase; margin-bottom:13px; display:block; opacity:0.7; }
#side-menu.visible { transform:translateX(100%); }
#side-menu ul { padding:0; }
#side-menu ul li { margin-bottom:13px; position:relative; }
#side-menu ul li::before { display:none; }
#side-menu ul li a { font-size:16px; line-height:24px; color:#1D1206; }
#side-menu ul li a:hover { opacity:0.5; text-decoration:underline; }
#side-menu ul li.menu-item-has-children > a::after { content:""; mask-image:url(img/angle_right.svg); background-color:#000; width:14px; height:14px; position:absolute; top:6px; right:0; }
#side-menu ul li ul { overflow:visible; position:fixed; top:0; left:288px; bottom:0; background:#fff; width:288px; transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; margin:0; box-sizing:border-box; background:#e5e1de; z-index:0; }
#side-menu ul li ul li.menu-item-has-children > a::after { width:10px; height:10px; top:6px; }
#side-menu ul li ul .wrapper { padding:24px; box-sizing:border-box; height:100%; }
#side-menu ul li ul.visible { transform:scaleX(1); }
#side-menu ul li ul li:first-child a { font-size:18px; line-height:21px; padding-left:20px; box-sizing:border-box; cursor:pointer; font-weight:700; }
#side-menu ul li ul li:first-child a::before { content:""; mask-image:url(img/angle_right.svg); background-color:#000; position:absolute; right:0; transform:scaleX(-1); left:0; right:initial; width:8px; height:8px; top:6px; }
#side-menu ul li ul li { margin-bottom:4px; }
#side-menu ul li ul li:last-child { margin-bottom:0; }
#side-menu ul li ul li a { /*font-size:36px; line-height:42px; font-weight:700;*/ line-height:16px; font-size:14px; }
#side-menu ul li ul li ul { background:#D9D2CD; }
#side-menu ul li ul li ul li a { font-size:16px; line-height:24px; font-weight:500; }
#side-menu > ul:nth-child(2) { margin-bottom:26px; }
#side-menu > ul:nth-child(2) > li > a { font-size:22px; line-height:24px; font-weight:700; color:#000; }
/*
#side-menu { transform:translateX(-100%); overflow:hidden; }
#side-menu ul li ul { transform:translateX(200%); z-index:3; }
#side-menu ul li ul.visible { transform:translateX(100%); }
*/
#side-menu ul li ul .wrapper::-webkit-scrollbar { width:6px; position:absolute; top:0; right:0; }
#side-menu ul li ul .wrapper::-webkit-scrollbar-track { display:none; background:#fff; }
#side-menu ul li ul .wrapper::-webkit-scrollbar-track-piece:start { background:transparent repeat-y !important; }
#side-menu ul li ul .wrapper::-webkit-scrollbar-track-piece:end { background:transparent repeat-y !important; }
#side-menu ul li ul .wrapper::-webkit-scrollbar-track-piece { background:transparent repeat-y !important; }
#side-menu ul li ul .wrapper::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }
#search-form { position:fixed; z-index:4; transform:translateY(-100%); transition:transform 0.5s ease; background:#fff; }
#search-form.visible { transform:translateY(0); }
#search-form input { position:fixed; background:#F3F1F0; border:none; font-size:19px; line-height:30px; font-family:'Satoshi', sans-serif; padding:32px; box-sizing:border-box; outline:none; position:relative; }
/*#search-form input::-webkit-search-cancel-button { appearance:none; mask-image:url(img/cross.svg); background-color:#000; position:absolute; top:calc(50% - 7px); right:40px; width:14px; height:14px; }*/
#search-form #searchsubmit { display:none; }
#search-form #searchclose { mask-image:url(img/cross.svg); background-color:#000; position:absolute; top:38px; right:38px; width:16px; height:16px; margin:0; padding:0; cursor:pointer; }
#search-form article { display:flex; justify-content:center; flex-direction:column; align-items:center; margin:30px 0; }
#search-results { overflow:auto; }
#search-results div:not(.wp-block-button)[data-post_type] { display:none; }
#search-results div:not(.wp-block-button)[data-post_type].visible { display:block; }
#search-results > .no-results { max-width:1280px; }
#search-results ul.products.grid li .woocommerce-loop-product__link h2 { font-size:18px; line-height:21px; margin-top:3px; }
#search-results .wp-block-buttons.filter { max-width:1280px; width:100%; }
div.product { box-sizing:border-box; max-width:1280px; float:left; }
div.product .woocommerce-product-gallery { width:48%; float:left; margin-right:4%; }
div.product .woocommerce-product-gallery > div > div { position:relative; }
div.product .woocommerce-product-gallery img { object-fit:contain; height:auto; }
div.product .woocommerce-product-gallery .next { display:block; background-image:url(img/arrow_right.svg); width:19px; height:19px; position:absolute; top:50%; right:20px; margin-top:-8.5px; cursor:pointer; color:#1E1002; }
div.product .woocommerce-product-gallery .prev { display:block; background-image:url(img/arrow_right.svg); width:19px; height:19px; position:absolute; top:50%; left:20px; margin-top:-8.5px; cursor:pointer; color:#1E1002; transform: scaleX(-1); }
div.product .summary { width:48%; float:left; }
div.product .summary .vessinge-brand { font-size:18px; font-weight:700; }
div.product .summary .product_title { font-size:38px; line-height:46px; margin-top:16px; }
div.product .summary .price { display:none; }
div.product .summary .product_meta { margin-top:20px; display:flex; flex-direction:column; }
div.product .woocommerce-tabs { width:48%; float:left; }
div.product .woocommerce-tabs .wc-tabs { display:none; }
div.product .woocommerce-tabs > div { display:block !important; }
/*div.product #tab-description { margin-top:20px; }
div.product #tab-description p { font-size:20px; line-height:30px; }
div.product #tab-description h2,*/ div.product #tab-additional_information h2 { display:none; }
div.product .woocommerce-product-attributes {}
div.product .woocommerce-product-attributes th, div.product .woocommerce-product-attributes td { width:50%; text-align:left; }
div.product .woocommerce-product-attributes td:last-child { width:50%; text-align:right; }
div.product .wp-block-buttons { margin-top:20px; }
div.product #tab-custom_tab { margin-top:16px; }
div.product #tab-custom_tab p { font-size:16px; line-height:24px; margin-bottom:5px; }
div.product #tab-custom_tab ul { box-sizing:border-box; margin-top:16px; }
div.product #tab-custom_tab .wp-block-image { min-height:initial; justify-content:initial; }
.custom-product-attributes { margin-top:30px; }
.custom-product-attributes details { margin-top:16px; font-size:14px; line-height:18px; }
.custom-product-attributes details > summary { list-style-type:'+'; font-size:22px; line-height:26px; margin-bottom:16px; font-weight:bold; cursor:pointer; }
.custom-product-attributes details > summary span { margin-left:10px; }
.custom-product-attributes details[open] > summary span { margin-left:16px; }
.custom-product-attributes details[open] > summary { list-style-type: '-'; }
.custom-product-attributes ul { display:grid; grid-template-rows:1fr; gap:0; padding-left:28px; box-sizing:border-box; }
.custom-product-attributes ul.col-2 { grid-template-columns:repeat(2, 1fr); }
.custom-product-attributes ul li::before { display:none !important; list-style:none; }
.custom-product-attributes ul li .htmlBox { /*display:flex; gap:30px;*/ width:100%; float:left; opacity:0.8; color:#1E1002; }
.custom-product-attributes ul li .htmlBox > div.half { width:48%; margin-right:2%; float:left; }
.custom-product-attributes ul li .htmlBox img { max-width:49%; float:left; }
.related.products { float:left; margin-top:29px; }
.related.products > h2 { font-size:29px; line-height:34px; }
/*.variations { margin-top:20px; }
.variations div { width:120px; float:left; border:1px solid #A4D1E1; margin-right:10px; position:relative; }
.variations div a img { padding:10px; box-sizing:border-box; }
.variations div.selected { border:1px solid #000; }
.variations div::after { content:attr(data-label); font-weight:700; background:#EAF4F9; width:100%; float:left; font-size:14px; text-transform:uppercase; padding:10px; box-sizing:border-box; }*/
.variations { margin-top:20px; position:relative; }
.variations .openTable { cursor:pointer; margin-top:8px; float:left; }
.variations .openTable:hover { font-weight:bold; }
.variations.closed { max-height:400px; overflow:hidden; }
.variations.closed .openTable { position:absolute; bottom:0; left:0; width:100%; height:30%; background:linear-gradient(0deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%); display:flex; flex-direction:column-reverse; padding:10px; box-sizing:border-box; font-size:14px; }
.variations .wp-block-table img { width:40px; height:40px; border:1px solid #A4D1E1; }
.variations .wp-block-table tr td:first-child, .variations .wp-block-table tr th:first-child { padding-left:10px; }
.variations .wp-block-table tbody tr { cursor:pointer; }
.variations .wp-block-table tr.selected td { background:#EAF4F9; font-weight:bold; }
.variations .wp-block-table tr:hover td { background:#EAF4F9; }
.variations .wp-block-table tr td { vertical-align:middle; padding:10px; }
.variations .wp-block-table tr td a { text-decoration:underline; font-weight:bold; }
/*.wp-block-table.variations tr td:nth-child(1) { width:20%; }
.wp-block-table.variations tr td:nth-child(2) { width:30%; }
.wp-block-table.variations tr td:nth-child(3) { width:30%; }
.wp-block-table.variations tr td:nth-child(4) { width:20%; }*/
.product_cat_content > div > p:first-child { font-size:20px; line-height:30px; }
.filtering { float:left; width:auto; display:flex; gap:5px; }
.filtering select { width:auto; border:1px solid #A4D1E1; font-size:14px; font-weight:700; font-family:'Satoshi', sans-serif; padding:7px 24px 7px 10px; background-color:transparent; background-image:url(img/arrow_select.svg); background-repeat:no-repeat; background-position:right 8px center; appearance:none; position:relative; background-size:10px; }
.filtering select:first-child { margin-left:0; }
.custom-post { margin-bottom:32px; float:left; width:100%; }
.custom-post .wp-block-post-date { font-size:11px; font-weight:700; margin-bottom:13px; text-transform:uppercase; float:left; }
.pagination { margin-top:40px; float:left; }
.pagination > div { }
.pagination > div > * { background:#A4D1E1; font-size:14px; line-height:18px; color:#1E1002; font-weight:700; position:relative; padding:13px 19px; border-radius:0; border:1px solid #A4D1E1; }
.pagination > div > span { opacity:0.3; }
.woocommerce-pagination { width:100%; max-width:1280px; margin-top:40px; float:left; }
.woocommerce-pagination > ul { padding:0; }
.woocommerce-pagination > ul li { width:auto; float:left; margin-right:5px; }
.woocommerce-pagination > ul li:last-child { margin-right:0; }
.woocommerce-pagination > ul li::before { display:none !important; }
.woocommerce-pagination > ul li > * { background:#A4D1E1; font-size:14px; line-height:18px; color:#1E1002; font-weight:700; position:relative; padding:13px 19px; border-radius:0; border:1px solid #A4D1E1; float:left; width:auto; }
.woocommerce-pagination > ul li > span { opacity:0.3; }
footer { background:#D9D2CD; display:flex; justify-content:center; color:#1E1002; padding:32px 0; margin-top:32px; font-size:14px; }
footer p a { color:#1E1002; }
footer h4 { font-size:14px; opacity:0.5; margin-bottom:6px; }
footer p { font-weight:bold; }
footer p.copyright { font-size:14px; }
footer > div { box-sizing:border-box; max-width:1280px; padding:16px; }
footer .wp-block-columns { margin-bottom:56px; }
footer .wp-block-columns > .wp-block-column > .wp-block-columns { margin-bottom:0; }
footer .wp-block-columns:first-child { }
footer .wp-block-columns:nth-child(2) { }
footer #menu-footermeny { list-style:none; display:grid; grid-template-columns:20fr 30fr 50fr; gap:10px 30px; padding:0; }
footer #menu-footermeny li::before { display:none; }
footer .wp-block-social-links { display:flex; justify-content:end; gap:12px; }
footer .wp-block-social-links > li { background:none !important; width:auto; }
footer .wp-block-social-links > li::before { display:none; }
footer .wp-block-social-links > li svg { display:none; }
footer .wp-block-social-links > li a { width:19px; height:19px; padding:0 !important; }
footer .wp-block-social-links > li.wp-social-link-linkedin a { background-size:100%; background-repeat:no-repeat; background-image:url('data:image/svg+xml;utf8,'); }
footer .wp-block-social-links > li.wp-social-link-facebook a { background-size:100%; background-repeat:no-repeat; background-image:url('data:image/svg+xml;utf8,'); }
iframe { border:none; padding:0; overflow:hidden; }
.woocommerce-products-header { display:none; }
body.home .wp-block-woocommerce-product-categories { position:relative; }
body.home .wp-block-woocommerce-product-categories li { display:none; }
body.home .wp-block-woocommerce-product-categories li:nth-child(-n+3) { display:block; }
body.home .wp-block-woocommerce-product-categories .paging { width:100%; height:43px; margin-top:-41px; max-width:1280px; position:absolute; top:50%; z-index:1; pointer-events:none; }
body.home .wp-block-woocommerce-product-categories .paging .prev { display:block; background-image:url(img/arrow_right.svg); background-size:19px; background-position:center; background-repeat:no-repeat; width:43px; height:100%; cursor:pointer; background-color:#A4D1E1; color:#1E1002; border-radius:100px; position:absolute; left:20px; transform:scaleX(-1); pointer-events:auto; }
body.home .wp-block-woocommerce-product-categories .paging .next { display:block; background-image:url(img/arrow_right.svg); background-size:19px; background-position:center; background-repeat:no-repeat; width:43px; height:100%; cursor:pointer; background-color:#A4D1E1; color:#1E1002; border-radius:100px; position:absolute; right:20px; pointer-events:auto; }
/* Cookie popup */
#cc--main .cc-link, #cc--main .c-bn { width:auto; }
/* Glykolväljare */
#glykolSearch, #glykolFilter { width:100%; border:1px solid #A4D1E1; font-size:16px; font-weight:700; font-family:'Satoshi', sans-serif; padding:8px 12px 8px 12px; box-sizing:border-box; }
#glykolSearch { max-width:500px; }
#glykolFilter { padding:9px 30px 9px 12px; background-color:transparent; background-image:url(img/arrow_select.svg); background-repeat:no-repeat; background-position:right 12px center; appearance:none; position:relative; margin-left:5px; max-width:200px; }
@media screen and (max-width: 1324px){
#search-results .wp-block-buttons.filter { max-width:calc(100% - 22px); margin:0 11px; }
#search-results ul.products { max-width:calc(100% - 22px); margin:0 11px; }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1000px){
#top-menu > ul { display:none; }
header .logo { width:200px; }
header > .inner { }
header > .inner > nav:last-child { }
header > .inner > nav:last-child .language .icon { display:none; }
header > .inner > nav:last-child select { display:none; }
header > .inner > nav:last-child .webshop { display:none; }
header > .inner > nav:last-child .toggle-search { width:24px; height:24px; padding:0; }
header > .inner > nav:last-child .toggle-search::before { width:24px; height:24px; top:0; left:0; }
header > .inner > nav:last-child .toggle-search span { display:none; }
body.home .wp-block-woocommerce-product-categories .paging .prev { left:0; }
body.home .wp-block-woocommerce-product-categories .paging .next { right:0; }
body > .widget_block:first-child { padding:6px 0; }
body > .widget_block:first-child p { font-size:14px; }
header > nav:last-child .webshop { display:none; }
header > nav:last-child .language { display:none; }
header > nav:last-child .toggle-search { width:36px; height:32px; padding:0; }
header > nav:last-child .toggle-search::before { width:26px; height:26px; top:3px; }
header > nav:last-child .toggle-search span { display:none; }
h1 { font-size:48px; line-height:58px; }
h2 { font-size:36px; line-height:42px; margin-bottom:16px; }
h3 { font-size:28px; line-height:32px; margin-bottom:16px; }
h4 { font-size:22px; line-height:26px; margin-bottom:16px; }
h5 { font-size:16px; line-height:20px; margin-bottom:16px; }
h6 { font-size:16px; line-height:20px; margin-bottom:16px; }
p { font-size:16px; line-height:22px; margin-bottom:16px; }
.woocommerce-filtering { margin-top:16px; max-width:100%; white-space:nowrap; overflow-x:auto; padding-bottom:10px; }
footer #menu-footermeny { gap:10px; }
}
@media screen and (max-width: 781px){
#side-menu { width:100%; left:-100%; padding:16px; }
#side-menu > ul { width:100%; }
#side-menu ul li ul { width:100%; left:-100%; left:0px; z-index:1; }
#side-menu .webshop { background:#A4D1E1; padding:15px 19px; font-size:14px; color:#000; display:block; width:100%; box-sizing:border-box; margin-bottom:20px; text-align:center;}
#side-menu .close { background:#000; padding:15px 19px; font-size:14px; color:#fff; display:block; width:100%; box-sizing:border-box; text-align:center; position:absolute; bottom:0; left:0; }
#side-menu .close span { position:relative; padding-left:24px; }
#side-menu .close span::before { cursor:pointer; content:""; mask-image:url(img/cross.svg); width:12px; height:12px; background-color:#fff; position:absolute; top:3px; left:0; }
#search-form input { padding:16px 20px; font-size:14px; }
#search-form article { margin:0; justify-content:start; }
#search-form #searchclose { top:24px; right:24px; width:14px; height:14px; }
#search-results { box-sizing:border-box; }
#search-results ul.products { grid-template-columns:repeat(2, minmax(0, 1fr)); }
#search-results .wp-block-buttons.filter { padding-bottom:60px; }
footer { padding:20px 0; }
footer p { font-size:20px; }
footer .wp-block-columns:first-child .wp-block-column { margin-bottom:26px; }
footer #menu-footermeny { grid-template-columns:100%; }
footer .wp-block-columns { margin-bottom:0; }
footer .wp-block-social-links { justify-content:start; }
div.product .woocommerce-product-gallery { width:100%; margin-right:0; }
div.product .summary { width:calc(100% - 22px); margin:60px 11px 0 11px; }
div.product .woocommerce-tabs { width:calc(100% - 22px); margin:60px 11px 0 11px; }
.related.products { width:calc(100% - 22px); margin:60px 11px 0 11px; }
body.woocommerce .related.products ul.products { max-width:100%; }
.filtering { width:100%; flex-direction:column; }
.filtering select { width:100%; }
}