/*
Theme Name: SoundPollution
Theme URI: https://balonka.se/
Description: Ett tema för SoundPollution
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sp
Author: Balonka AB
*/

body {
    background: fixed url('https://www.soundpollution.se/wp-content/uploads/2023/04/sp_bg.jpg') no-repeat center top/contain #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.6;

    --o-wrap-hpad: 1rem;
    --o-wrap-vpad: 4rem;
    --o-wrap-vpad-sm: 2rem;
    --header-grid-logo-width: clamp(8em, 14vw, 16em);
    --header-grid-gap: clamp(1em, 4.5vw, 6em);
    --content-box-hpad: 1.5em;
    --content-box-vpad: 1.5em;
}

@media (min-width: 782px) {
    body {
        --header-grid-logo-width: clamp(12em, 14vw, 16em);
    }
}

.o-wrap {
    padding-left: var(--o-wrap-hpad);
    padding-right: var(--o-wrap-hpad);
}

.o-wrap.vpad {
    padding-top: var(--o-wrap-vpad);
    padding-bottom: var(--o-wrap-vpad)
}

.o-wrap.vpad-sm {
    padding-top: var(--o-wrap-vpad-sm);
    padding-bottom: var(--o-wrap-vpad-sm)
}

.o-wrap > .i-wrap,
.wp-block-group.o-wrap > .wp-block-group__inner-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.site-header .i-wrap {
    display: grid;
    grid-template-columns: var(--header-grid-logo-width) 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--header-grid-gap);
    row-gap: 1.5em;
    margin-bottom: 4em;
}

.site-header .logo,
.site-header .widgets {
    grid-row: 1/2;
}

.site-header .logo {
    line-height: 0;
}

.site-header .top-menu,
.site-header .main-menu {
    border: .1em solid var(--yellow);
    background: var(--darkgreen);
    color: var(--yellow);
    display: flex;
    justify-content: center;
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.site-header .top-menu {
    border-top: none;
    margin-bottom: auto;
    font-size: clamp(.8em, 1.2vw, 1em);
}

.site-header .main-menu {
    grid-row: 2/3;
    margin-top: auto;
    font-size: clamp(1.1em, 1.2vw, 1.3em);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.site-header ul,
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;    
}

.site-header ul.menu,
.site-header ul.icons,
.site-footer ul.menu,
.site-footer ul.icons {
    display: flex;
}

.site-header ul.menu li:not(:last-child)::after,
.site-footer ul.menu li:not(:last-child)::after {
    content: '//';
    margin: 0 .6em;
}

.site-header ul.menu a,
.site-footer ul.menu a {
    color: inherit;
    text-transform: uppercase;
    text-decoration: none;
}

.site-header ul.icons {
    gap: 1em;
}

.site-header ul.icons img {
    max-width: 2.8em;
}


.site-header .widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: clamp(.8em, 1.2vw, 1em);
    align-items: center;
}

.site-header .widgets .widget_product_search {
    grid-column: 1/3;
}

.site-header .widgets .mobile-toggle {
    background: none;
    border-radius: 0;
    border: 0;
    color: var(--yellow);
    padding: 0;
    position: relative;
}

.site-header .widgets .mobile-toggle .line {
    display: block;
    border-top: .2em solid;
    width: 2.9em;
    background: var(--yellow);
}

.site-header .widgets .mobile-toggle .line:not(:last-child) {
    margin-bottom: .6em;
}


@media (min-width: 782px) {
    .site-header .i-wrap {
        grid-template-columns: var(--header-grid-logo-width) clamp(30%, 35vw, 44%) 1fr;
    }

    .site-header .logo,
    .site-header .widgets {
        grid-row: 1/3;
    }

    .site-header .widgets .mobile-toggle {
        display: none;
    }

    .site-header .widgets {
        align-items: end;
        grid-auto-rows: max-content;
        align-self: end;
    }
}

@media (max-width: 781px) {
    .site-header .top-menu {
        display: none;
    }

    .site-header .main-menu {
        grid-column: 1/3;
    }

    .site-header .widgets {
        grid-row: 1/2;
    }

    .site-header .widgets {
        justify-items: end;
        justify-self: end;
    }

    .site-header .widgets > :first-child {
        display: none;
    }

    .site-header .widgets .widget_product_search {
        grid-row: 1/2;
    }
}






.wp-block-columns.sidebar-content, .woocommerce .shop-area > .i-wrap {
    --col-gap: clamp(1em, 2vw, 2.5em);
    --sidebar-max-width: calc(var(
    --header-grid-logo-width) + var(--header-grid-gap) - var(--col-gap));
    --sidebar-width: clamp(17em, 17vw, var(
    --sidebar-max-width));
    display: grid;
    column-gap: var(--col-gap);
    font-size: clamp(.8em, 1vw, 1em);
}

.wp-block-columns.sidebar-content > .sidebar,
.woocommerce .shop-area .shop-sidebar {
    grid-row: 2/3;
}

@media (min-width: 782px) {
    .wp-block-columns.sidebar-content,
    .woocommerce .shop-area > .i-wrap {
        grid-template-columns: var(--sidebar-width) 1fr;
    }

    .wp-block-columns.sidebar-content > .sidebar,
    .woocommerce .shop-area .shop-sidebar {
        grid-column: 1/2;
        grid-row: 1/2;
    }
}



.wp-block-columns.sidebar-content > .sidebar,
.woocommerce .shop-area .shop-sidebar,
.woocommerce .shop-area .content-area,
.content-box {
    background: rgba(255,255,255,.85);
}

.wp-block-columns.sidebar-content > .sidebar:not(.hpad-none),
.woocommerce .shop-area .shop-sidebar,
.woocommerce .shop-area .content-area,
.content-box:not(.hpad-none) {
    padding-left: var(--content-box-hpad);
    padding-right: var(--content-box-hpad);
}

.wp-block-columns.sidebar-content > .sidebar:not(.hpad-none),
.woocommerce .shop-area .shop-sidebar,
.woocommerce .shop-area .content-area,
.content-box:not(.vpad-none) {
    padding-top: var(--content-box-vpad);
    padding-bottom: var(--content-box-vpad);
}

.content-box > .wp-block-heading:first-child {
    margin-top: 0;
}

.sidebar .widgettitle,
.bapf_head h3 {
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: .5em;
}

.sidebar .widget:first-child .widgettitle,
.sidebar > :first-child .bapf_head h3 {
    margin-top: 0;
}

.sidebar .product-categories {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar .product-categories li {
    margin-bottom: .8em;
}

.sidebar .product-categories li a {
    font-size: 1.1em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
}







.mini-cart-wrap,
.wpml-ls-item .wpml-ls-link {
	position: relative;
}

@media (min-width: 782px) {
    .mini-cart-wrap,
    .wpml-ls-item .wpml-ls-link {
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
}

.mini-cart-wrap .basket-link,
.wpml-ls-item .wpml-ls-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.mini-cart-wrap .basket-link::before,
.wpml-ls-item .wpml-ls-link::before {
	width: 2.5em;
    height: 2.5em;
    content: '';
    margin-right: 1.2em
}

.mini-cart-wrap .basket-link::before {
    background: url(images/cart_yellow.png) no-repeat top left/100% auto;
}

.wpml-ls-item-en .wpml-ls-link::before {
    background: url(images/flag_eng.png) no-repeat top left/100% auto;
}

.wpml-ls-item-sv .wpml-ls-link::before {
    background: url(images/flag_swe.png) no-repeat top left/100% auto;
}

.mini-cart-wrap .basket-link .counter,
.wpml-ls-item .wpml-ls-link .wpml-ls-display,
.wpml-ls-item .wpml-ls-link .wpml-ls-native {
    color: var(--yellow) !important;
    text-transform: uppercase;
    font-size: .8em;
}

.mini-cart-wrap .mini-cart-contents-wrap {
	position: absolute;
	right: 0;
    top: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility 0s .2s, transform .2s;
	background: var(--darkgreen);
    border: .1em solid var(--yellow);
    padding: 1em;
    color: var(--yellow);
	z-index: 999;
	min-width: 22em;
	max-width: 100vw;
	transform: translate(.5em, .5em);
}

.mini-cart-wrap .mini-cart-contents-wrap a:not(.button) {
	color: inherit;
    font-weight: 500;
    color: var(--yellow) !important;
}

.mini-cart-wrap .mini-cart-contents-wrap .remove {
    position: static !important;
}

.mini-cart-wrap:hover .mini-cart-contents-wrap {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
	transform: none;
}

ul.woocommerce-mini-cart {
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
}

.woocommerce-mini-cart li {
    display: flex;
    border-bottom: .1em solid #383535;
    padding-bottom: 1em;
	padding-top: 1em;
    padding-left: 0 !important
}

.woocommerce-mini-cart li > :not(:last-child) {
    margin-right: .8em;
}

.mini-cart-thumbnail img {
    width: 4em !important;
    height: 4em !important;
    max-width: none;
    object-fit: cover;
    display: block;
    margin: 0 !important
}

.mini-cart-product-name {
    flex-basis: 10em;
    line-height: 1.1;
    font-size: .95em;
}

.mini-cart-quantity {
	white-space: nowrap;
    font-size: .95em;
    flex-basis: 3.5em;
}

.mini-cart-product-remove {
    margin-left: auto;
}

.woocommerce-mini-cart__total {
	border: none !important
}

.woocommerce-mini-cart__total * {
	display: inline-block;
}

.woocommerce-mini-cart__total strong {
    width: 14.2em;
}

.woocommerce-mini-cart__total .amount {
	text-align: right;
    width: 3.5em;
}

.amount{
	white-space: nowrap;
}

.woocommerce-mini-cart__buttons {
	text-align: center;
    margin-bottom: 1em;
    display: grid;
    row-gap: .5em;
}

.woocommerce-mini-cart__buttons .button {
	font-size: 1.1em;
}

.woocommerce-mini-cart__buttons .button {
    padding: .75em 1em !important;
    display: block !important;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 1em !important;
    color: var(--darkgreen) !important;
    background: var(--yellow) !important;
    border-radius: 2em !important;
}

.woocommerce-mini-cart__buttons .button::after {
    font-size: 2em !important;
    top: 50%;
    transform: translateY(-50%);
}

.main-header-row {
    display: flex;
    /* align-items: flex-end; */
}

.main-header-row.et_pb_row > .et_pb_column:last-child > .et_pb_module {
    margin-bottom: 2em;
}

.main-header-row .site-logo {
    max-width: 18em
}

.main-header-row a {
    text-decoration: none;
}




form.woocommerce-product-search {
    display: flex;
    gap: 1em;
}

form.woocommerce-product-search input,
form.woocommerce-product-search button {
    border-radius: 2em;
    border: none;
    padding: .6em 1.5em;
    outline: none;
}

form.woocommerce-product-search button {
    background: var(--yellow);
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}




.wc-block-cart__submit-button {
    border: .1em solid #b6b6b6;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--darkgreen);
    font-weight: 500;
    transition: color .3s, background-color .3s, border-color .3s !important;
}

.wc-block-cart__submit-button:hover {
    background: var(--darkgreen);
    color: #fff;
    border-color: var(--yellow);
}

.wc-block-cart__submit-container--sticky .wc-block-cart__submit-button {
    color: #fff;
}








html.mobile-menu-open {
    overflow: hidden;
}

.mobile-menu-wrap {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s;
    flex-wrap: wrap;
    overflow: auto;
    color: var(--yellow);
    background: var(--darkgreen);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.admin-bar .mobile-menu-wrap {
    top: 46px
}

html.mobile-menu-open .mobile-menu-wrap {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.mobile-menu-wrap ul.menu {
    flex-direction: column;
}

.site-header .mobile-menu-wrap .menu li::after {
    content: none !important;
}

.mobile-menu-wrap .close-menu {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    width: 2.5em;
    height: 2.5em;
    margin-left: auto;
}

.mobile-menu-wrap .close-menu::before, 
.mobile-menu-wrap .close-menu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    border-top: .1em solid var(--yellow);
    top: 50%;
}

.mobile-menu-wrap .close-menu::before {
    transform: rotate(45deg);
}

.mobile-menu-wrap .close-menu::after {
    transform: rotate(-45deg);
}

.mobile-menu-wrap .mobile-menu-row {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
}

.mobile-menu-wrap .mobile-menu-center {
    margin-top: auto;
    margin-bottom: auto;
}

.mobile-menu-wrap a {
    color: inherit !important
}

.mobile-menu-wrap .menu a {
    font-size: 1.7em;
    font-weight: 200;
    line-height: 1.5;
}



.site-footer {
    background: var(--darkgreen);
    color: var(--yellow);
    padding-top: .6em;
    padding-bottom: .6em;
    text-transform: uppercase;
    font-size: .8em;
}

.site-footer ul.icons {
    gap: .4em;
}

.site-footer ul.icons,
.site-footer .widget.icon {
    line-height: 0;
}

.site-footer img {
    max-width: 2.4em;
}

.site-footer .i-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8em;
}

.site-footer ul.menu,
.site-footer .i-wrap {
    flex-wrap: wrap;
}

.site-footer .i-wrap .widget.copyright {
    order: 1
}



.kommande-products-block .archive-link {
    display: flex;
    justify-content: center;
    margin: 2em 0;
}