:root {
    --color-primary: #1F3D2B;
    --color-accent: #b2b97b;
    
    --color-discounted-price: #b2b97b;

    --color-success: 190, 251, 224;
    --color-alert-bg: 253, 164, 175;
    --color-alert: 142, 44, 45;

    --color-text: #505050;
    --color-foreground: #505050;
    --color-background: #f9f7f4;

    --text-footer: #ffffff;

    --bg-body: #f9f7f4;
    --bg-header: #ffffff;
    --bg-card: #ffffff;
    --bg-footer: #000000;
    --bg-overlay: 146, 146, 146;

    --gap: 1rem;

    --button-py: calc(1rem * 0.5);
    --button-px: calc(2rem * 0.5);
    --button-rounding: 0.375rem;
    --button-text: var(--color-text);
    --button-text-primary: #ffffff;

    --input-bg: #ffffff;

    --input-border: 1px solid rgb(209 213 219);
    --input-color: var(--color-text);
    --input-rounding: 0.25rem;
    --input-px: 1rem;
    --input-py: 0.75rem;

    /* Swiper */
    --swiper-navigation-color: var(--color-text);
    --swiper-pagination-color: var(--color-accent);
    --swiper-navigation-size: 2rem;
    --swiper-theme-color: var(--color-primary);
}















body {
    font-family: 'Asap',sans-serif !important;
    overflow: overlay;
}

.font-body {
    font-family: 'Asap',sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Asap',
sans, ui-sans-serif, system-ui, -apple-system, sans-serif-serif;
    font-weight: bold;
    line-height: 120%;
}

/**
 * Colors
 */

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

/**
 * Primary color
 */ 
.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);
}
.bg-primary {
    background-color: var(--color-primary) !important;
}
.hover\:bg-primary:hover {
    background-color: var(--color-primary);
}
.border-primary {
    border-color: var(--color-primary);
}

/**
 * Secondary color
 */ 
.text-secondary {
    color: var(--color-accent);
}
.hover\:text-secondary:hover {
    color: var(--color-accent);
}
.ring-secondary {
    --tw-ring-color: var(--color-accent);
}
.bg-secondary {
    background-color: var(--color-accent);
}
.hover\:bg-secondary:hover {
    background-color: var(--color-accent);
}
.border-secondary,
.focus\:border-secondary:focus {
    border-color: var(--color-accent);
}

/**
 * Accent color
 */ 
.text-accent {
    color: var(--color-accent);
}
.hover\:text-accent:hover {
    color: var(--color-accent);
}
.ring-accent {
    --tw-ring-color: var(--color-accent);
}
.bg-accent {
    background-color: var(--color-accent) !important;
}
.hover\:bg-accent:hover {
    background-color: var(--color-accent);
}

/**
 * Discounted price color
 */ 
.text-discounted-price {
    color: var(--color-discounted-price, var(--color-accent));
}

/**
 * Foreground color
 */ 
.text-body {
    color: var(--color-text);
}
.text-inverted {
    color: var(--color-background);
}
.hover\:text-body:hover {
    color: var(--color-text);
}
.divide-foreground>:not([hidden])~:not([hidden]),
.border-foreground {
    border-color: var(--color-foreground);
}
.hover\:border-foreground:hover {
    border-color: var(--color-foreground);
}
.bg-foreground {
    background-color: var(--color-foreground) !important;
}
.hover\:bg-foreground:hover {
    background-color: var(--color-foreground);
}


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

.text-alert {
    color: rgb(var(--color-alert));
}
.bg-alert {
    background-color: rgba(var(--color-alert-bg), .2)
}

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

.to-body {
    --tw-gradient-to: var(--bg-body) var(--tw-gradient-to-position) !important;
}

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

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

.text-footer {
    color: var(--text-footer);
}

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

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

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

.gap-default-2 {
    gap: calc(var(--gap) * 2);
}

.button-py {
    padding-top: var(--button-py);
    padding-bottom: var(--button-py);
}
.button-px {
    padding-left: var(--button-px);
    padding-right: var(--button-px);
}
.button-rounding {
    border-radius: var(--button-rounding);
}
.button-text-primary {
    color: var(--button-text-primary);
}

.input-bg {
    background-color: var(--input-bg);
}
.input-border {
    border: var(--input-border);
}
.input-rounding {
    border-radius: 0.25rem;
}
.input-py {
    padding-top: var(--input-py);
    padding-bottom: var(--input-py);
}
.input-px {
    padding-left: var(--input-px);
    padding-right: var(--input-px);
}
.input-text {
    color: var(--color-text);
}

/**
 * Transition duration
 */
.duration-default {
    transition-duration: 200ms !important;
}

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

/**
 * 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;
}

/**
 * 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) !important;
    outline: none;
    border-color: var(--color-primary) !important;
}

/**
 * PhotoSwipe
 */
.pswp {
    --pswp-icon-color-secondary: var(--color-text);
    --pswp-icon-color: var(--color-text);
    --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.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    display: none
}

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

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

/**
 * Hero Slider
 */
.hero-slider {
    transition: height 0.3s ease;
    /*min-height: 500px;*/
}

@media (min-width: 768px) {
    .hero-slider {
        /*min-height: 700px;*/
    }
}

.hero-slider .swiper-slide {
    height: 100%;
}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    color: white;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

/* Remove Swiper's default arrow pseudo-elements */
.hero-slider .swiper-button-next:after,
.hero-slider .swiper-button-prev:after {
    content: none;
}

/* Style the SVG icons inside the arrow buttons */
.hero-slider .swiper-button-next svg,
.hero-slider .swiper-button-prev svg {
    stroke: white;
    stroke-width: 2.5;
}

.hero-slider .swiper-pagination {
    bottom: 20px;
}

.hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: white;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.hero-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: white;
    width: 32px;
    border-radius: 6px;
}

.product-slider .swiper-pagination {
    margin-top: 2rem;
    position: relative;
}

.bg-dark-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.bg-light-overlay {
    background: rgba(255, 255, 255, 0.4);
}

.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-5\/3 {
    aspect-ratio: 5 / 3;
}

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

.cursor-zoom-in {
    cursor: zoom-in;
}

.scale-75 {
    transform: scaleX(0.75) scaleY(0.75);
}

@media (min-width: 768px) {
    .md\:scale-100 {
        transform: scaleX(1) scaleY(1);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1480px) {
    .container {
        max-width: 1480px;
    }
}

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;
}

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

.hidden-empty:empty {
    display: none;
}

/**
 * Browser scrollbar (Webkit)
 */
body::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: transparent;
}
body::-webkit-scrollbar-thumb {
    width: 4px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 0.5rem;
}

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

.wishlist-alert i {
    display: none;
}

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

.product [data-qb-selector="product-item"] > a {
    height: inherit !important;
    width: inherit !important;
}

.wishlist-form-save {
    margin-top: 2rem;
}

.wishlist-form-save .btn-primary {
}

.wishlist-sharebox {
    max-width: 100% !important;
    background: rgba(0,0,0,0.1) !important;
    border: none !important;
}

.wishlist-sharebox hr {
    margin: 1rem 0 1.5rem 0;
}

.wishlist-sharebox label {
    display: block;
    margin: 1rem 0 0.2rem 0;
}

.wishlist-sharebox input {
    margin-bottom: 0.5rem;
}

.wishlist-sharebox .share-facebook {
    border-radius: var(--button-rounding);
}

/**
 * Form elements
 */
button.btn {
    background: transparen;
    color: var(--color-text);
    padding: var(--button-py) var(--button-px);
    border-radius: var(--button-rounding);
}

button.btn-primary {
    color: var(--button-text-primary);
    background: var(--color-primary);
}

input.form-control {
    display: block;
    width: 100%;

    padding: var(--input-py) var(--input-px);
    background: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--input-rounding);
    color: var(--color-text);
}

label + input.form-control {
    margin-bottom: 1rem;
}


/**
 * Rating
 */
.reviews-total svg {
    width: 2rem;
    height: 2rem;
}


/**
 * 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"] {
    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: var(--input-py) var(--input-px);
    border: none;
    cursor: pointer;
    border-radius: var(--button-rounding);
    width: 100%;
}

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

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

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

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

.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-text);
}

.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);
    border-radius: var(--button-rounding);
}

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

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

/**
 * Bugfix for theme previewer events
 */
.selected-content .pointer-events-none {
    pointer-events: auto;
} 

/**
 * 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;
}

/**
* Anpassning av produktpresentationer
*/
.k-subversive{
  --bg: #0b0f0e;
  --card: rgba(255,255,255,.04);
  --text: #eef5f2;
  --muted: rgba(238,245,242,.78);
  --line: rgba(238,245,242,.14);
  --accent: #79d7b6;
  /*color: var(--text);*/
  border-radius: 22px;
  overflow: hidden;

  /* Nödbroms: om tema råkar sätta opacity på wrapper */
  opacity: 1 !important;
}

/* Nödbroms: om något ärver opacity från tema */
.k-subversive *{
  opacity: 1;
}

.k-subversive .kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(238,245,242,.72);
  margin-bottom: 10px;
}
.k-subversive .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #b6f3dd 0%, #6ad8b6 55%, #2e7b64 100%);
  box-shadow: 0 0 0 3px rgba(121,215,182,.14);
}

.k-subversive .title{
  margin: 0 0 10px 0;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -.02em;
  line-height: 1.12;
}
.k-subversive .subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 72ch;
  line-height: 1.6;
}

/* HERO */
.k-subversive__hero{
  position: relative;
  background: linear-gradient(180deg, rgba(11,15,14,1) 0%, rgba(7,10,10,1) 100%);
  padding: clamp(18px, 3.2vw, 34px);
  min-height: 220px;
  overflow: hidden;

  /* Viktigt i teman som bråkar med z-index */
  isolation: isolate;
}

.k-subversive__heroInner{
  position: relative;
  z-index: 2;
}

/* Bakgrundsvideo (bulletproof) */
.k-subversive__bgvideo{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.k-subversive[data-bgvideo="1"] .k-subversive__bgvideo{
  display: block;
}

/* Videon: INGEN opacity här */
.k-subversive__bgvideo iframe{
  position: absolute;
  inset: -35%;            /* “zoomar” så kanter aldrig syns */
  width: 170%;
  height: 170%;
  border: 0;
  filter: saturate(1.05) contrast(1.08);
}

/* Overlay: ALL mörkning görs här */
.k-subversive__bgvideo::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(121,215,182,.18), transparent 60%),
    linear-gradient(180deg, rgba(11,15,14,.35), rgba(11,15,14,.75));
}

/* Badges */
.k-subversive .badge-row{
  margin-top: 14px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.k-subversive .badge{
  display:inline-flex; gap:8px; align-items:center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: rgba(238,245,242,.86);
  font-size: 12px;
}
.k-subversive .badge i{
  width:8px; height:8px; border-radius:999px;
  background: rgba(121,215,182,.85);
  box-shadow: 0 0 0 3px rgba(121,215,182,.14);
}

/* Textblock */
.k-subversive__block{
  padding: clamp(16px, 2.6vw, 28px);
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--line);

  /* Nödbroms: säkerställ att tema-overlay aldrig “dimma” blocken */
  position: relative;
  z-index: 1;
  opacity: 1 !important;
}
.k-subversive__block h3{
  margin: 0 0 10px 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
}
.k-subversive__block p{
  margin: 0 0 10px 0;
  color: var(--muted);
  line-height: 1.65;
}
.k-subversive__block p:last-child{ margin-bottom: 0; }

/* Grid med “kort” */
.k-subversive__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: clamp(16px, 2.6vw, 28px);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.015);

  position: relative;
  z-index: 1;
  opacity: 1 !important;
}
@media (max-width: 860px){
  .k-subversive__grid{ grid-template-columns: 1fr; }
}

.k-subversive__card{
  padding: 14px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
}
.k-subversive__card h4{
  margin: 0 0 6px 0;
  font-size: 15px;
  line-height: 1.25;
}
.k-subversive__card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* Media */
.k-subversive__mediaGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  position: relative;
  z-index: 1;
  opacity: 1 !important;
}
@media (max-width: 860px){
  .k-subversive__mediaGrid{ grid-template-columns: 1fr; }
}
.k-subversive__media{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  margin: 0;
}
.k-subversive__media img{
  width: 100%;
  height: auto;
  display: block;
}
.k-subversive__media figcaption{
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(238,245,242,.7);
  border-top: 1px solid var(--line);
}
.k-subversive__video{
  position: relative;
  padding-top: 56.25%;
}
.k-subversive__video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

.k-subversive__footnote{
  margin: 0;
  padding: 12px 18px;
  font-size: 12px;
  color: rgba(238,245,242,.62);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.02);

  position: relative;
  z-index: 1;
  opacity: 1 !important;
}
/* Allt content UNDER heron */
.k-subversive__block,
.k-subversive__grid,
.k-subversive__mediaGrid,
.k-subversive__footnote{
  color: var(--text-dark);
  background: transparent;
}

/* Brödtext */
.k-subversive__block p,
.k-subversive__card p{
  color: var(--muted-dark);
}

/* Rubriker */
.k-subversive__block h3,
.k-subversive__card h4{
  color: var(--text-dark);
}

/* Linjer */
.k-subversive__block,
.k-subversive__grid{
  border-top: 1px solid var(--line-light);
}

/* Fullviddsmedia (för bilder med text/diagram) */
.k-subversive__media--full{
  grid-column: 1 / -1;
}

.k-subversive__media--full img{
  width: 100%;
  height: auto;
}
/* HERO ska vara ljus text på mörk bakgrund */
.k-subversive__hero{
  color: var(--color-background);
}

.k-subversive__hero .subtitle{
  color: var(--color-background);
}

.k-subversive__featureList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  text-align:center;
}

.k-subversive__featureList li{
  padding-left: 18px;
  position: relative;
  list-style: none;
}

.k-subversive__featureList li::before{
  /*content: "•";*/
  position: absolute;
  left: 0;
  top: 0;
  color: #1f6f55;
  font-weight: 700;
}

/* Video i garanti-sektionen – mjuk, diskret */
.k-subversive__video--soft{
  background: #0b0f0e;
}

.k-subversive__video--soft iframe{
  filter: saturate(1.05) contrast(1.05);
}

/* Valfritt: subtil overlay för bättre textläsbarhet runtom */
.k-subversive__video--soft::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11,15,14,.35),
    rgba(11,15,14,.15)
  );
}

/* Bakgrundsvideo-container */
.k-subversive__videoBg{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0b0f0e;
  pointer-events: none; /* 👈 detta stoppar ALL hover/interaktion */
}

/* Själva videon */
.k-subversive__videoBg iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  border: 0;
  filter: saturate(1.05) contrast(1.05);
}

/* Overlay för att dämpa och ge premium-känsla */
.k-subversive__videoBg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11,15,14,.35),
    rgba(11,15,14,.55)
  );
}
/* Säkerställ att figcaption alltid syns i hela k-subversive */
.k-subversive figcaption{
  display: block !important;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
  border-top: 1px solid var(--line-light);
  background: rgba(0,0,0,.02);
  font-weight:bold;
}

/* ===== Vertigo / statisk tabell – ljus och läsbar ===== */

.k-subversive__tableWrap{
  margin-top: 12px;
  border: 1px solid var(--line-light);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* Grundtabell */
.k-subversive__table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
}

/* Rubriker */
.k-subversive__table thead th{
  text-align: left;
  font-weight: 600;
  padding: 12px;
  background: #f2f4f3;
  color: #1f2a26;
  border-bottom: 1px solid var(--line-light);
  position: sticky;
  top: 0;
  z-index: 2;
}

/*
* FRONTPAGE
*/
    :root{
      --bg:#0b0f0e;
      --card:#ffffff;
      --muted:#6b7a75;
      --line:rgba(0,0,0,.10);
      --accent:#79d7b6;
      --ink:#101615;
      --soft:#f5f7f6;
      --shadow: 0 12px 30px rgba(0,0,0,.12);
      --r:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--ink);
      background:linear-gradient(180deg,#f4f6f5,#ffffff);
    }
    a{color:inherit}

    .topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--line);}
    .topbar-inner{max-width:1160px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:14px;}
    .brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:180px;}
    .logo{width:34px; height:34px; border-radius:10px; background: radial-gradient(circle at 30% 30%, #b6f3dd 0%, #79d7b6 55%, #2e7b64 100%);
      box-shadow: 0 0 0 4px rgba(121,215,182,.14); flex:0 0 auto;}
    .brand strong{display:block; font-size:14px; letter-spacing:.02em}
    .brand span{display:block; font-size:12px; color:var(--muted)}

    .nav{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
    .nav a{text-decoration:none; font-size:13px; padding:8px 10px; border-radius:999px; border:1px solid transparent; color:#1f2a26;}
    .nav a.active{border-color: rgba(121,215,182,.35); background: rgba(121,215,182,.16);}

    .spacer{flex:1}
    .actions{display:flex; gap:10px; align-items:center}
    .btn{appearance:none; border:1px solid var(--line); background:#fff; padding:9px 12px; border-radius:999px; font-size:13px; cursor:pointer;
      text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
    .btn.primary{border-color: rgba(121,215,182,.45); background: rgba(121,215,182,.18); font-weight:600;}

    .wrap{max-width:1160px; margin:0 auto; padding:18px 16px 48px; width:100%; display:grid; grid-template-columns: 1fr; gap:16px;}
    .grid-2{display:grid; gap:16px; grid-template-columns: 1.2fr .8fr;}
    @media (max-width: 980px){.grid-2{grid-template-columns:1fr} .brand{min-width:auto}}

    .card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow: var(--shadow); overflow:hidden;}
    .card.pad{padding:18px}

    .kicker{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(0,0,0,.55); display:flex; gap:8px; align-items:center;}
    .dot{width:8px; height:8px; border-radius:99px; background: radial-gradient(circle at 30% 30%, #b6f3dd 0%, #79d7b6 55%, #2e7b64 100%);
      box-shadow: 0 0 0 3px rgba(121,215,182,.14);}

    h1,h2,h3{margin:10px 0 8px}
    h1{font-size: clamp(26px, 3vw, 44px); line-height:1.06}
    h2{font-size: clamp(18px, 2vw, 28px)}
    h3{font-size:16px}
    p{margin:0 0 10px; color:#24312d; line-height:1.6}
    .muted{color:var(--muted)}

    .pillrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
    .pill{font-size:12px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#1f2a26;}

    .hero{position:relative; border-radius:24px; overflow:hidden; color:#eef5f2; background: linear-gradient(180deg, rgba(11,15,14,1) 0%, rgba(7,10,10,1) 100%);
      min-height: 340px; display:flex; align-items:stretch;}
    .hero::before{content:""; position:absolute; inset:0; background: radial-gradient(80% 70% at 18% 10%, rgba(121,215,182,.22), transparent 60%),
      radial-gradient(70% 70% at 75% 30%, rgba(255,255,255,.10), transparent 65%),
      linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.70));}
    .hero-inner{position:relative; padding: clamp(18px, 3.2vw, 34px); width:100%; display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:end;}
    @media (max-width: 980px){.hero-inner{grid-template-columns:1fr; align-items:start}}
    .hero p{color: rgba(238,245,242,.82)}
    .hero .kicker{color: rgba(238,245,242,.72)}
    .hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}

    .btn.on-dark{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(238,245,242,.92);}
    .btn.on-dark.primary{background: rgba(121,215,182,.22); border-color: rgba(121,215,182,.45); font-weight:700;}

    .hero-side{border:1px solid rgba(255,255,255,.14); border-radius: 18px; padding:16px; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); align-self:stretch;}
    .hero-side .row{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12);}
    .hero-side .row:last-child{border-bottom:0}
    .check{width:18px;height:18px;border-radius:6px; background: rgba(121,215,182,.22); border:1px solid rgba(121,215,182,.45);
      display:flex; align-items:center; justify-content:center; font-size:12px;}
    .hero-side .row b{display:block; font-size:13px; color:#eef5f2}
    .hero-side .row span{display:block; font-size:12px; color: rgba(238,245,242,.75); margin-top:2px}

    .section{display:none;}
    .section.active{display:block}

    .row-3{display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));}
    @media (max-width: 980px){ .row-3{grid-template-columns:1fr} }

    .steps{display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr));}
    @media (max-width: 980px){ .steps{grid-template-columns:1fr} }
    .step{border-radius: 16px; border:1px solid var(--line); background: var(--soft); padding:14px; position:relative; overflow:hidden;}
    .step::before{content:""; position:absolute; inset:0; background: radial-gradient(80% 70% at 20% 0%, rgba(121,215,182,.22), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); opacity:.7; pointer-events:none;}
    .step > *{position:relative}
    .step .tag{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(0,0,0,.55);}
    .step .links{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
    .link{font-size:13px; color:#1f2a26; text-decoration:none; border-bottom:1px solid rgba(121,215,182,.55);}
    .link:hover{border-bottom-color: rgba(121,215,182,1)}

    .prod{border:1px solid var(--line); border-radius: 16px; overflow:hidden; background:#fff;}
    .prod .img{height:120px; background: linear-gradient(135deg, rgba(121,215,182,.25), rgba(0,0,0,.05));}
    .prod .p{padding:12px}
    .prod .p b{display:block; font-size:13px}
    .prod .p span{display:block; font-size:12px; color:var(--muted); margin-top:3px}

    .brand-row{display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr));}
    @media (max-width: 980px){ .brand-row{grid-template-columns: repeat(2, minmax(0,1fr));} }
    .brandcard{border-radius: 16px; border:1px solid var(--line); background:#fff; padding:14px; display:flex; gap:12px; align-items:center; cursor:pointer; text-decoration:none;}
    .brandmark{width:44px; height:44px; border-radius:14px; background: rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.02em;}
    .brandcard b{display:block; font-size:13px}
    .brandcard span{display:block; font-size:12px; color:var(--muted); margin-top:2px}

    .callout{border:1px dashed rgba(0,0,0,.22); background: rgba(121,215,182,.08); border-radius: 16px; padding: 14px;}
    .split{display:grid; gap:16px; grid-template-columns: 1fr 1fr;}
    @media (max-width: 980px){ .split{grid-template-columns:1fr} }

/* Celler */
.k-subversive__table tbody td{
  padding: 10px 12px;
  color: #1f2a26;              /* 👈 mörk text */
  border-bottom: 1px solid var(--line-light);
  vertical-align: top;
}

/* Zebraränder */
.k-subversive__table tbody tr:nth-child(even) td{
  background: #f8faf9;
}

/* Hover (diskret) */
.k-subversive__table tbody tr:hover td{
  background: rgba(121,215,182,.12);
}

/* Numeriska kolumner */
.k-subversive__table .k-num{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* “Pill” för Ja/Nej */
.k-subversive__table .k-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #1f2a26;
  font-size: 12px;
}

.k-subversive__table .k-pill--yes{
  border-color: rgba(31,111,85,.35);
  background: rgba(121,215,182,.15);
}

/* Dämpad text (handsådd-raden) */
.k-subversive__table .k-muted{
  color: #6b7a75;
}

/* Mobil: horisontell scroll */
@media (max-width: 860px){
  .k-subversive__tableWrap{
    overflow-x: auto;
  }
  .k-subversive__table{
    min-width: 760px;
  }
}

/* ===== Bakgrundsvideo (idiotsäker) ===== */

.k-subversive__videoBg{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0b0f0e;
  min-height: 260px;   /* justera efter behov */
}

/* Själva videon */
.k-subversive__videoBg iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  border: 0;

  pointer-events: none;   /* 👈 VIKTIGAST: inga kontroller, ingen hover */
}

/* Overlay för läsbar text ovanpå */
.k-subversive__videoBg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(11,15,14,.35),
      rgba(11,15,14,.55)
    );
}

/* CATEGORY ITEM – gör den till “kort” i samma stil som din layout, utan att ändra markup */
[data-qb-element="categories"] .bg-gray-200{
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}

/* Tydligare overlay och mer “premium” */
[data-qb-element="categories"] .bg-gray-200 .pointer-events-none{
  position: relative;
}

/* Lägg en subtil gradient så texten alltid läses */
[data-qb-element="categories"] .bg-gray-200 .pointer-events-none::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 100%);
}

/* Titel ovanpå overlay – lite tightare och renare */
[data-qb-element="categories"] h2.font-heading{
  text-shadow: 0 10px 25px rgba(0,0,0,.35);
  letter-spacing: .01em;
}

/* Bild hover: lite mjukare än scale-105 i originalet */
[data-qb-element="categories"] img.hover\:scale-105:hover{
  transform: scale(1.03);
}

/* Gör hela category-kortet mer “klickbart” */
[data-qb-element="categories"] a[aria-label]{
  display:block;
}

/* Om du kör “title below” i vissa lägen – gör den matchad */
[data-qb-element="categories"] .text-body{
  color: var(--ink);
}
/* CATEGORY CARD */
.k-cat{
  border:1px solid var(--line);
  border-radius: var(--r);
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.k-cat:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

.k-cat__link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Media */
.k-cat__media{
  position:relative;
  background: linear-gradient(
    135deg,
    rgba(121,215,182,.25),
    rgba(0,0,0,.05)
  );
  overflow:hidden;
}

.k-cat__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .25s ease;
}
.k-cat:hover .k-cat__img{
  transform: scale(1.04);
}

.k-cat__placeholder{
  position:absolute;
  inset:0;
  background: rgba(121,215,182,.22);
}

/* Overlay-titel */
.k-cat__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:14px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,.55) 100%
  );
}

.k-cat__overlay .k-cat__title{
  color:#fff;
  font-size:15px;
  line-height:1.2;
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* Titel under bild */
.k-cat__body{
  padding:14px;
}
.k-cat__body .k-cat__title{
  font-size:14px;
  color:var(--ink);
  margin:0;
}
.hero-productslider{
  margin-top: 1.5rem;
}

.hero-stage{
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}

.hero-slide{
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: 32px;
  background-size: cover;
  background-position: center;
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  border-radius: 24px;
}

.hero-content{
  position: relative;
  max-width: 60ch;
}

.hero-content h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  margin-bottom: 12px;
}

.hero-content p{
  font-size: 16px;
  opacity: .9;
}

.hero-cta{
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.6);
}

/* OM OSS-KORT */
.hero-about{
  position: absolute;
  right: 24px;
  bottom: 24px;
  max-width: 320px;
}

.about-card{
  background: rgba(255,255,255,.92);
  color: #101615;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* Responsivt beteende */
@media (max-width: 980px){
  .hero-about{
    position: static;
    margin-top: 16px;
    max-width: none;
  }
}

/* HERO wrapper */
.k-hero {
    margin-top:0px !important;
    margin-bottom:0px !important;
}

.k-heroWrap{ position:relative; }

/* Herons “stage” (slider) */
.k-heroStage{
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Text i heron ska vara ljus */
.k-heroStage,
.k-heroStage h2,
.k-heroStage p{
  color: var(--color-background);
}

.k-heroStage p{
  color: var(--color-background);
}
.k-heroStage h2{
  letter-spacing: -0.02em;
}

.k-heroStage h2,
.k-heroStage p{
  text-shadow:
    0 2px 18px rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.35);
}
/* Primär CTA i hero */
.k-heroStage .k-heroCta{
  background: var(--color-primary);
  color: var(--color-background);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--color-primary);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: all .2s ease;
}

/* Hover */
.k-heroStage .k-heroCta:hover{
  background: var(--color-accent);
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.45);
}
/* Läsbarhets-overlay (mjuk, premium) */
.k-heroOverlay{
  background:
    radial-gradient(80% 70% at 18% 0%, rgba(121,215,182,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.10));
  pointer-events:none;
}

/* Typografi */
.k-heroTitle{
  margin: 0 0 10px 0;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #101615;
}
.k-heroLead{
  margin: 0 0 16px 0;
  max-width: 72ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(16,22,21,.78);
}
.k-heroCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(121,215,182,.18);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  color:#101615;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.k-heroCta:hover{
  transform: translateY(-1px);
  background: rgba(121,215,182,.26);
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
}

/* OM OSS-kort (default: under heron) */
.k-heroAbout{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
}
.k-heroAboutMedia{
  height: 217px;
  background:
    radial-gradient(70% 80% at 20% 20%, rgba(121,215,182,.22), transparent 55%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  /* Sätt din bild här när du har URL:*/
     background-image:url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/92421U/files/BPS6.jpg');
     background-size:cover;
     background-position: 50% 28%; 
}
.k-heroAboutBody{ padding: 14px; }

/* OM OSS – hero overlay-kort */
.k-heroAboutTitle {
  font-size: 1.05rem;              /* ca 16.8px */
  line-height: 1.35;
  color: var(--color-text);
   margin: 0; 
   letter-spacing:.02em;
}
/*.k-heroAboutText{ margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: rgba(16,22,21,.72); }*/
.k-heroAboutText {
  font-size: 0.95rem;              /* ca 15.2px */
  line-height: 1.55;
  color: var(--color-text);
  opacity: 0.9;
}
.k-heroAboutLink{
  display:inline-block;
  margin-top: 12px;
  font-size: 13px;
  text-decoration:none;
  border-bottom: 1px solid rgba(121,215,182,.65);
}
.k-heroBadge {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 88px;
  height: 88px;
  z-index: 3;
  opacity: 0.85;
  pointer-events: none;
}

.k-heroBadge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobil */
@media (max-width: 768px) {
  .k-heroBadge {
    width: 56px;
    height: 56px;
    top: 16px;
    right: 16px;
  }
}
/* Bred skärm: lägg kortet ovanpå heron, nere till höger */
@media (min-width: 1024px){
  .k-heroWrap{ padding-bottom: 0; }
  .k-heroAbout{
    position: absolute;
    right: 16px;
    bottom: 16px;
    margin-top: 0;
    z-index: 5;
    width: 320px;
  }
}
/* Tablet & nedåt – kortet under hero, full bredd */
@media (max-width: 1023px){
  .k-heroAbout{
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 1.5rem;
  }

}

/* Brand tiles (för kategorier som är logotyper) */
.k-brandGrid .bg-gray-200{
  background: var(--bg-card, #fff) !important;
}

.k-brandGrid .aspect-5/3{
  /* om din mall använder aspect-klasser, funkar ändå – vi styr internt */
}

.k-brandGrid a{
  text-decoration: none;
}

/* Själva bildytan */
.k-brandGrid .relative.bg-gray-200{
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loggan: inte crop */
.k-brandGrid img{
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 120px;            /* justera efter smak */
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;   /* stäng av hover-zoom */
}

/* Om du har hover-scale i category_item */
.k-brandGrid img:hover{
  transform: none !important;
}

/* Dölj overlay-titel på logokort (ser ofta rörigt ut) */
.k-brandGrid .text-body{
  display:none !important;
}

/* Lite “proffsig” känsla */
.k-brandGrid .relative.bg-gray-200{
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.k-brandGrid .relative.bg-gray-200:hover{
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

.k-products {
    padding-bottom: 2rem !important;
    padding-top: 2rem !important;
}