:root {
    --color-primary: #8d836b;
    --color-accent: #8d836b;

    --color-success: rgba(190 251 224);
    --color-alert: rgba(253 164 175);

    --color-foreground: rgb(50,50,50);

    --bg-body: #fdfaf5;
    --bg-header: rgb(255, 255, 255);
    --bg-footer: #8d836b;
    --color-footer: #fdfaf5;
    --bg-overlay: 146, 146, 146;

    --gap: 1rem;
}











body {
    background-color: var(--bg-body, #ffffff);
    overflow: overlay;
}

.font-body {
    font-family: 'Karla', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Karla',
sans-serif;
    line-height: 120%;
}

/**
 * Colors
 */

.text-primary {
    color: var(--color-primary);
}
.hover\:text-primary:hover {
    color: var(--color-primary);
}
.ring-primary,
.ring-primary:focus {
    --tw-ring-color: var(--color-primary);
}

.text-highlight {
    color: var(--color-accent);
}
.hover\:text-highlight:hover {
    color: var(--color-accent);
}
.ring-highlight {
    --tw-ring-color: var(--color-highlight);
}

.text-body {
    color: var(--color-foreground);
}
.hover\:text-body:hover {
    color: var(--color-foreground);
}
.border-text-body {
    border-color: var(--color-foreground);
}
.hover\:border-text-body:hover {
    border-color: var(--color-foreground);
}

.bg-primary {
    background-color: var(--color-primary) !important;
}
.hover\:bg-primary:hover {
    color: var(--color-primary);
}
.border-primary {
    border-color: var(--color-primary);
}


.bg-secondary {
    background-color: rgba(50,50,50, 0.05);
}

.bg-highlight {
    background-color: var(--color-accent) !important;
}
.hover\:bg-highlight:hover {
    color: var(--color-accent);
}

.bg-success {
    background: var(--color-success);
}

.bg-alert {
    background: var(--color-alert);
}

.bg-body {
    background-color: var(--bg-body);
}

.bg-header {
    background-color: var(--bg-header);
}

.bg-footer {
    background-color: var(--bg-footer);
    color: var(--color-footer);
}

.bg-overlay {
    background-color: rgba(var(--bg-overlay), var(--tw-bg-opacity));
}

.border-highlight {
    border-color: var(--color-accent) !important;
}

.decoration-primary {
    text-decoration-color: var(--color-primary);
}

.gap-default {
    gap: var(--gap);
}

/**
 * Disable spinner arrows on number inputs
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

**
 * Cart bubble tweaks
 */
.cart-bubble.text-xs {
    font-size: 0.7rem;
    line-height: 1;
}

/**
 * Tailwind
 */
[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
    --tw-ring-color: var(--color-primary);
    outline: none;
    border-color: var(--color-primary);
}

/**
 * PhotoSwipe
 */
.pswp {
    --pswp-icon-color-secondary: var(--color-foreground);
    --pswp-icon-color: var(--color-foreground);
    --pswp-bg: var(--bg-body);
    --pswp-icon-stroke-color: var(--pswp-bg);
}

.pswp img {
    max-width: none;
    object-fit: contain;
}

.pswp__img--placeholder {
    display: none !important;
}

.pswp__counter {
    font-weight: bold;
    text-shadow: 0 0 2px var(--pswp-bg)
}

/**
 * Swiper
 */


/** Fix for pinch zoom on main product image */
.swiper.swiper-horizontal {
    touch-action: auto;
}

.swiper-button-next,
.swiper-button-prev {
    width: auto;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: '';
}

.products-swiper-main {
    min-height: 200px;
}

.products-swiper-thumbs {
    --swiper-navigation-size: 30px;
}

.swiper-slide-thumb-active {
    opacity: 100 !important;
}

@media (max-width: 767px) {
    .products-swiper-main .swiper-slide img {
        max-height: 50vh;
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .products-swiper-main .swiper-slide img {
        max-height: 700px;
    }
}
@media (min-width: 1280px) {
    .products-swiper-main .swiper-slide img {
        max-height: 800px;
    }
}

/**
 * Tailwind 
 */

.aspect-1\/1 {
    aspect-ratio: 1 / 1;
}

.aspect-4\/3 {
    aspect-ratio: 4 / 3;
}

.aspect-3\/2 {
    aspect-ratio: 3 / 2;
}

.aspect-3\/4 {
    aspect-ratio: 3 / 4;
}

select:not([size]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.focus\:outline-none:focus {
    --tw-ring-color: transparent;
}

.break-words {
    overflow-wrap: anywhere !important;
}

/* "Polyfill" for Tailwind */
.group:hover .group-hover\:scale-105{
    transform: scale(1.05);
}

/**
 * Fix for modal max-height in desktop
 */
@media (min-width: 640px) {
    div[modal='search'] {
        max-height: calc(80vh)
    }
}

/**
 * Wishlist
 */
.wishlist-alert {
    background: var(--color-success);
    font-size: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.wishlist-alert i {
    display: none;
}

.wishlist-alert .wishlist-addok {
    background: #f00;
}

/**
 * Login
 */

.login,
.register {
    max-width: 24rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.login div,
.register div {
    width: 100% !important;
}

.login form,
.register form {
    margin-top: 3rem;
    text-align: left;
}

.login label,
.register label {
    display: block;
    margin-bottom: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
}

.login label.cursor,
.register label.cursor {
    padding: 1rem 0;
}

.login label.cursor + label.cursor,
.register label.cursor + label.cursor {
    margin-left: 1rem;
}

.login label.cursor,
.register label.cursor,
.login label.cursor > input[type="radio"],
.register label.cursor > input[type="radio"] {
    display: inline-block;
    width: auto;
    cursor: pointer;
}

.login label.cursor > input[type="radio"],
.register label.cursor > input[type="radio"] {
    margin-right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
    --tw-ring-color: var(--color-primary);
}

.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
.register input[type="text"],
.register input[type="email"],
.register input[type="password"] {
    border: 1px solid #e5e7eb;
    padding: 0.4rem 0.8rem;
    display: block;
    border-radius: 0.25rem;
    width: 100%;
    margin-bottom: 1rem;
}

.login .btn-inverse,
.register .btn-inverse,
.register hr + div > a[href] {
    margin: 1rem 0 2rem 0;
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border: none;
    cursor: pointer;
    border-radius: 0.25rem;
    width: 100%;
}

.register hr + div a[href] {
    padding: 0.75rem 2rem;
}

.login .btn-inverse :hover,
.register .btn-inverse :hover {
    background-color: var(--color-foreground);
}

.login br,
.register br {
    display: none;
}

.login .btn-inverse:hover,
.register .btn-inverse:hover {
    background-color: var(--color-foreground);
}

.login hr,
.register hr {
    margin-bottom: 2rem;
}

.login hr + div,
.register hr + div {
    display: block;
}

.login hr + div > a,
.register hr + div > a[href] {
    display: block;
    margin-bottom: 1rem;
    font-size: 1rem !important;
    color: var(--color-primary);
}

.login hr + div > a:hover,
.register hr + div > a:hover {
    color: var(--color-foreground);
}

.login hr + div a.btn,
.register hr + div a[href] {
    display: block;
    background: transparent;
    font-size: 1rem !important;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.login hr + div a.btn:hover,
.register hr + div a:hover {
    background: transparent;
    color: var(--color-foreground);
    border-color: var(--color-foreground);
}

.customerarea_login_message {
    margin-bottom: 2rem !important;
}

/**
 * Fix for image alignment
 */
img.fr-dib {
    margin: 5px auto
}

img.fr-dib.fr-fil {
    margin-left: 0;
}

img.fr-dib.fr-fir {
    margin-right: 0;
}

/* Airlectra */

.h-14 {
    height:3.5rem;
}

.var-opt {
    display:flex;
    flex-wrap:wrap;
}

.variant-label {
    display:flex;
    flex-wrap:wrap;
    width:100%;
}

@media (min-width: 992px) {
    .lg-w-16 {
        width:4rem!important;
    }
    .lg-h-16 {
        height:4rem!important;
    }
    .var-opt {
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .variant-label {
        flex-wrap:nowrap;
        justify-content:space;
        width:unset;
    }
    .lg-text-5 {
        font-size: 3.5rem!important;
        line-height: 3.625rem!important;
    }
    .lg-max-80pc {
        max-width:80%;
    }
}

.bg-gray-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(187 187 187/var(--tw-bg-opacity))
}

.hover\:bg-gray-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(221 221 221/var(--tw-bg-opacity))
}

.hover\:opacity-6:hover, .opacity-6 {
    opacity:0.6;
}

.border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128/var(--tw-border-opacity))
}

@media (min-width: 992px) {
    .lg-text-4 {
        font-size: 2.8rem !important;
        line-height: 2.925rem !important;
    }
    #ProductPropertiesForm .grid-cols-2 {
        grid-template-columns: 250px 200px auto;
        gap:0;
    }
    .var-opt {
        grid-template-columns: 250px auto;
    }
    .img-first {
        grid-area: 1/ 1;
    }
    .img-second {
        grid-area: 1 / 2;
    }
    .cont-first {
        grid-area: 1/ 1;
    }
    .cont-second {
        grid-area: 1 / 2;
    }
    .cont-first.lg\:px-16, .cont-second.lg\:px-16 {
        padding-left:4rem;
        padding-right:4rem;
    }
}

.flex-basis-100 {
    flex-basis:100%;
}

.sample-link a {
    text-decoration:underline;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#prod-info tr:first-child {
    border-top:1px solid;
}

#prod-info tr {
    border-bottom:1px solid;
}

#prod-info tr td {
    border-bottom:1px solid;
    padding:8px 0;
}

#prod-info tr td:first-child {
    padding-right:12px;
    width:40%;
}

#care img {
    width:25px;
    height:auto;
    display:inline-block;
    margin-right:16px;
}

a[data-qb-setting="use_footer_logo"] img {
    filter:brightness(100);
}

.gap-2rem {
    gap:2rem;
}

.flex-100 {
    flex:1 0 100%
}

@media (min-width:992px) {
    .flex-100.flex-40 {
        flex:1 1 40%;
    }
    .flex-100.flex-60 {
        flex:1 1 60%;
    }
    .flex-100.flex-lg-1 {
        flex:1 1 0%;
        padding-left: 2rem;
    }
}

@media (min-width: 992px) {
    .lg\:flex {
        display:flex;
    }
    .lg\:w-full {
        width:100%;
    }
}

div[data-qb-setting="show_footer_socialicons"] svg {
    color: var(--color-footer);
}

.w-30 {
    width:30%;
}

.font-normal .font-semibold {
    font-weight: 400;
}

.buy-cover {
    inset:0;
    background:rgba(255,255,255,0.5);
}

.ml-3 {
    margin-left:1rem;
}

.m-n1 {
    margin: -.25rem!important
}

.mt-n1,.my-n1 {
    margin-top: -.25rem!important
}

.mr-n1,.mx-n1 {
    margin-right: -.25rem!important
}

.mb-n1,.my-n1 {
    margin-bottom: -.25rem!important
}

.ml-n1,.mx-n1 {
    margin-left: -.25rem!important
}

.m-n2 {
    margin: -.5rem!important
}

.mt-n2,.my-n2 {
    margin-top: -.5rem!important
}

.mr-n2,.mx-n2 {
    margin-right: -.5rem!important
}

.mb-n2,.my-n2 {
    margin-bottom: -.5rem!important
}

.ml-n2,.mx-n2 {
    margin-left: -.5rem!important
}

.m-n3 {
    margin: -1rem!important
}

.mt-n3,.my-n3 {
    margin-top: -1rem!important
}

.mr-n3,.mx-n3 {
    margin-right: -1rem!important
}

.mb-n3,.my-n3 {
    margin-bottom: -1rem!important
}

.ml-n3,.mx-n3 {
    margin-left: -1rem!important
}

.m-n4 {
    margin: -1.5rem!important
}

.mt-n4,.my-n4 {
    margin-top: -1.5rem!important
}

.mr-n4,.mx-n4 {
    margin-right: -1.5rem!important
}

.mb-n4,.my-n4 {
    margin-bottom: -1.5rem!important
}

.ml-n4,.mx-n4 {
    margin-left: -1.5rem!important
}

.m-n5 {
    margin: -3rem!important
}

.mt-n5,.my-n5 {
    margin-top: -3rem!important
}

.mr-n5,.mx-n5 {
    margin-right: -3rem!important
}

.mb-n5,.my-n5 {
    margin-bottom: -3rem!important
}

.ml-n5,.mx-n5 {
    margin-left: -3rem!important
}

.m-n6 {
    margin: -6rem!important
}

.mt-n6,.my-n6 {
    margin-top: -6rem!important
}

.mr-n6,.mx-n6 {
    margin-right: -6rem!important
}

.mb-n6,.my-n6 {
    margin-bottom: -6rem!important
}

.ml-n6,.mx-n6 {
    margin-left: -6rem!important
}

.m-n7 {
    margin: -8rem!important
}

.mt-n7,.my-n7 {
    margin-top: -8rem!important
}

.mr-n7,.mx-n7 {
    margin-right: -8rem!important
}

.mb-n7,.my-n7 {
    margin-bottom: -8rem!important
}

.ml-n7,.mx-n7 {
    margin-left: -8rem!important
}

.m-0 {
    margin: 0!important
}

.mt-0,.my-0 {
    margin-top: 0!important
}

.mr-0,.mx-0 {
    margin-right: 0!important
}

.mb-0,.my-0 {
    margin-bottom: 0!important
}

.ml-0,.mx-0 {
    margin-left: 0!important
}

.m-1 {
    margin: .25rem!important
}

.mt-1,.my-1 {
    margin-top: .25rem!important
}

.mr-1,.mx-1 {
    margin-right: .25rem!important
}

.mb-1,.my-1 {
    margin-bottom: .25rem!important
}

.ml-1,.mx-1 {
    margin-left: .25rem!important
}

.m-2 {
    margin: .5rem!important
}

.mt-2,.my-2 {
    margin-top: .5rem!important
}

.mr-2,.mx-2 {
    margin-right: .5rem!important
}

.mb-2,.my-2 {
    margin-bottom: .5rem!important
}

.ml-2,.mx-2 {
    margin-left: .5rem!important
}

.m-3 {
    margin: 1rem!important
}

.mt-3,.my-3 {
    margin-top: 1rem!important
}

.mr-3,.mx-3 {
    margin-right: 1rem!important
}

.mb-3,.my-3 {
    margin-bottom: 1rem!important
}

.ml-3,.mx-3 {
    margin-left: 1rem!important
}

.m-4 {
    margin: 1.5rem!important
}

.mt-4,.my-4 {
    margin-top: 1.5rem!important
}

.mr-4,.mx-4 {
    margin-right: 1.5rem!important
}

.mb-4,.my-4 {
    margin-bottom: 1.5rem!important
}

.ml-4,.mx-4 {
    margin-left: 1.5rem!important
}

.m-5 {
    margin: 3rem!important
}

.mt-5,.my-5 {
    margin-top: 3rem!important
}

.mr-5,.mx-5 {
    margin-right: 3rem!important
}

.mb-5,.my-5 {
    margin-bottom: 3rem!important
}

.ml-5,.mx-5 {
    margin-left: 3rem!important
}

.m-6 {
    margin: 6rem!important
}

.mt-6,.my-6 {
    margin-top: 6rem!important
}

.mr-6,.mx-6 {
    margin-right: 6rem!important
}

.mb-6,.my-6 {
    margin-bottom: 6rem!important
}

.ml-6,.mx-6 {
    margin-left: 6rem!important
}

.m-7 {
    margin: 8rem!important
}

.mt-7,.my-7 {
    margin-top: 8rem!important
}

.mr-7,.mx-7 {
    margin-right: 8rem!important
}

.mb-7,.my-7 {
    margin-bottom: 8rem!important
}

.ml-7,.mx-7 {
    margin-left: 8rem!important
}

.pr-2 {
    padding-right: .5rem;
}

.hr-text {
    position: relative;
    height: 2rem;
    border: 0;
    outline: 0;
    line-height: 1em;
}

.hr-text:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background: rgba(34, 34, 34, 0.1);
}

.hr-text:after {
    display: inline-block;
    position: relative;
    padding: 0 0.5em;
    content: attr(data-content);
    background-color: var(--bg-body);
    line-height: 1.5rem;
}

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

.title-element h1 {
    font-size: 3.5rem;
}

.title-element h2 {
    font-size: 2.5rem;
}

.title-element h3 {
    font-size: 2rem;
}

h1[data-qb-setting="list_show_cattitle"] {
    margin-bottom:4rem;
}

.opacity-7 {
    opacity: 0.7;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

.border-accent-100 {
    --tw-border-opacity: 1;
    border-color: var(--color-accent);
}


section[data-qb-area="page"] h5.mb-4, section[data-qb-area="page"] h5 ~ p.leading-relaxed.mb-4 {
    margin-bottom:0.75rem!important;
}

div[data-qb-selector="filter-container"] select.bg-white.border, .options-container select {
    background-color:#fdfaf5;
    border-bottom-color:inherit;
    border-top:none;
    border-left:none;
    border-right:none;
    padding-left:0.25rem;
}

div[data-qb-selector="filter-container"] select.bg-white.border {
    margin-right:2rem;
    margin-bottom:2rem;
}

div[data-qb-selector="filter-container"] select.bg-white.border option, .options-container select option {
    background-color:#fdfaf5;
}

@media (min-width: 1024px) {
    .lg\:w-auto, div[data-qb-selector="filter-container"] select.bg-white.border {
        width:auto!important;
        margin-bottom:0;
    }
    .lg\:flex-nowrap {
        flex-wrap:nowrap!important;
    }
}

form.cat-search {
    width:100%;
    max-width:420px;
    margin-bottom:2rem;
}

form.cat-search input {
    background-color:#fdfaf5;
    border-bottom-color:inherit;
    border-top:none;
    border-left:none;
    border-right:none;
    padding-left:0.25rem;
    width:100%;
}

.focus\:outline-none:focus, .focus\:outline-none:active {
    box-shadow:none!important;
    border-color:inherit!important;
}

div[data-qb-selector="filter-container"] select.bg-white.border:focus, div[data-qb-selector="filter-container"] select.bg-white.border:active {
    border-bottom-color:inherit;
}

.logo-swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
}
//* === CASE-bilder: minimalistisk highlight === */
[data-qb-area="category"] .applyTailwindClasses p {
  margin-bottom: 1.8rem !important;
  padding: 0; /* ingen extra luft runt */
  background: transparent; /* ingen bakgrund */
  border: none;
  box-shadow: none;
}

/* Bilderna */
[data-qb-area="category"] .applyTailwindClasses p img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px; /* väldigt lätt rundning */
  border: 1px solid rgba(0,0,0,0.06); /* supertunn “print-linje” */
  box-shadow: 0 1px 6px rgba(0,0,0,0.04); /* nästan osynlig skugga */
  transition: all 0.25s ease;
}

/* Hover: subtil detalj – lite mer djup, inte zoom */
[data-qb-area="category"] .applyTailwindClasses p img:hover {
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  transform: translateY(-2px); /* pytteliten “lyft”-känsla */
}