/*
 * Sidbyggarens block. Följer temat (knockout): typsnittet från body (Jost), Foundations grid-container och .button.
 * Första versionen - designen gås igenom och justeras.
 */

.wan-pb { --wan-pb-gap: 16px; --wan-pb-grey: #f5f5f5; --wan-pb-text: #0a0a0a; --wan-pb-muted: #575757; }
.wan-pb--landing { padding-bottom: 32px; }

.wan-pb-block { position: relative; }
.wan-pb-space--none { margin: 0; }
.wan-pb-space--s { margin: 16px 0; }
.wan-pb-space--m { margin: 32px 0; }
.wan-pb-space--l { margin: 56px 0; }
/* Rubrikerna följer sidans typsnitt (temat sätter Gotham på h1-h6) */
.wan-pb h1, .wan-pb h2, .wan-pb h3, .wan-pb h4, .wan-pb .wan-pb-heading { font-family: inherit; }

/* Bakgrunder */
.wan-pb-bg { padding: 48px 0; background: var(--wan-pb-bg); }
.wan-pb-bg--white { --wan-pb-bg: #fff; }
.wan-pb-bg--grey { --wan-pb-bg: var(--wan-pb-grey); }
.wan-pb-bg--beige { --wan-pb-bg: #f5f2ec; }
.wan-pb-bg--dark { --wan-pb-bg: #0a0a0a; }

/* Textfärg: ljus på mörk bakgrund (automatiskt på svart) */
.wan-pb-ink--light { --wan-pb-text: #fff; --wan-pb-muted: rgba(255, 255, 255, .75); color: #fff; }
.wan-pb-ink--light a:not(.button) { color: #fff; }
.wan-pb-ink--dark { --wan-pb-text: #0a0a0a; --wan-pb-muted: #575757; color: #0a0a0a; }

/* Rubrik- och textstorlek */
.wan-pb-hsize--s .wan-pb-heading, .wan-pb-hsize--s .wan-pb-hero__heading { font-size: 1.25rem; }
.wan-pb-hsize--m .wan-pb-heading, .wan-pb-hsize--m .wan-pb-hero__heading { font-size: 1.75rem; }
.wan-pb-hsize--l .wan-pb-heading, .wan-pb-hsize--l .wan-pb-hero__heading { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.wan-pb-hsize--xl .wan-pb-heading, .wan-pb-hsize--xl .wan-pb-hero__heading { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -.02em; }
.wan-pb-tsize--s .wan-pb-body, .wan-pb-tsize--s .wan-pb-hero__text { font-size: .875rem; }
.wan-pb-tsize--m .wan-pb-body, .wan-pb-tsize--m .wan-pb-hero__text { font-size: 1.0625rem; }
.wan-pb-tsize--l .wan-pb-body, .wan-pb-tsize--l .wan-pb-hero__text { font-size: 1.25rem; line-height: 1.5; }
.wan-pb-tsize--xl .wan-pb-body, .wan-pb-tsize--xl .wan-pb-hero__text { font-size: 1.5rem; line-height: 1.45; }

/* Rundade hörn på bilder och knappar */
.wan-pb-radius--s { --wan-pb-radius: 4px; }
.wan-pb-radius--m { --wan-pb-radius: 8px; }
.wan-pb-radius--l { --wan-pb-radius: 16px; }
.wan-pb-radius--xl { --wan-pb-radius: 28px; }
[class*="wan-pb-radius--"] .wan-pb-tile__media,
[class*="wan-pb-radius--"] .wan-pb-image__img,
[class*="wan-pb-radius--"] .wan-pb-image_text__media,
[class*="wan-pb-radius--"].wan-pb-hero .wan-pb-hero__media { border-radius: var(--wan-pb-radius); overflow: hidden; }
[class*="wan-pb-radius--"].wan-pb-hero { border-radius: var(--wan-pb-radius); }

.wan-pb-heading { font-size: 1.5rem; line-height: 1.2; font-weight: 700; margin: 0 0 16px; color: var(--wan-pb-text); }
h1.wan-pb-heading { font-size: 2rem; }
.wan-pb-body { font-size: 1rem; line-height: 1.6; color: var(--wan-pb-text); }
.wan-pb-body p:last-child { margin-bottom: 0; }
.wan-pb-page-title h1 { font-size: 2rem; margin: 24px 0 8px; }

.wan-pb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Temats .button (Foundation) är blå - sidbyggarens knappar får sina egna färger */
.wan-pb .button.wan-pb-cta { margin: 0; border: 1px solid transparent; padding: .85em 1.6em; border-radius: 0; }
.wan-pb .button.wan-pb-cta--dark { background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a; }
.wan-pb .button.wan-pb-cta--dark:hover, .wan-pb .button.wan-pb-cta--dark:focus { background: #333 !important; border-color: #333; }
.wan-pb .button.wan-pb-cta--light { background: #fff !important; color: #0a0a0a !important; border-color: #fff; }
.wan-pb .button.wan-pb-cta--light:hover, .wan-pb .button.wan-pb-cta--light:focus { background: #e8e8e8 !important; border-color: #e8e8e8; }
.wan-pb .button.wan-pb-cta--outline { background: transparent !important; color: var(--wan-pb-text) !important; border-color: currentColor; }
.wan-pb .button.wan-pb-cta--outline:hover, .wan-pb .button.wan-pb-cta--outline:focus { background: rgba(127, 127, 127, .12) !important; }
.wan-pb-hero .button.wan-pb-cta--outline { color: inherit !important; }
.wan-pb .button.wan-pb-cta--link { background: transparent !important; color: var(--wan-pb-text) !important; border: 0; padding: .25em 0; text-decoration: none; font-weight: 500; }
.wan-pb .button.wan-pb-cta--link::after { content: "\2192"; display: inline-block; margin-left: .5em; transition: transform .2s ease; }
.wan-pb .button.wan-pb-cta--link:hover::after, .wan-pb .button.wan-pb-cta--link:focus::after { transform: translateX(4px); }
.wan-pb .button.wan-pb-cta--link:hover, .wan-pb .button.wan-pb-cta--link:focus { background: transparent !important; text-decoration: underline; }
.wan-pb-hero .button.wan-pb-cta--link { color: inherit !important; }
.wan-pb .button.wan-pb-cta--rounded { border-radius: 8px; }
.wan-pb .button.wan-pb-cta--pill { border-radius: 999px; }

/* ---------- Hero ---------- */
.wan-pb-hero { margin-top: 0; overflow: hidden; color: #fff; }
.wan-pb-hero__media { position: absolute; inset: 0; }
.wan-pb-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wan-pb-hero__img--mobile { display: none; }
.wan-pb-hero__overlay { position: absolute; inset: 0; background: #000; pointer-events: none; }
.wan-pb-hero--dark { color: #0a0a0a; }
.wan-pb-hero--dark .wan-pb-hero__overlay { background: #fff; }
.wan-pb-hero__content { position: relative; height: 100%; display: flex; align-items: flex-end; padding-top: 32px; padding-bottom: 40px; }
.wan-pb-hero--s { min-height: 280px; }
.wan-pb-hero--m { min-height: 440px; }
.wan-pb-hero--l { min-height: 620px; }
.wan-pb-hero--s .wan-pb-hero__content { min-height: 280px; }
.wan-pb-hero--m .wan-pb-hero__content { min-height: 440px; }
.wan-pb-hero--l .wan-pb-hero__content { min-height: 620px; }
.wan-pb-hero--xl, .wan-pb-hero--xl .wan-pb-hero__content { min-height: 820px; }
/* Bildens format: hela bilden syns, texten ligger ovanpå */
.wan-pb-hero { position: relative; }
.wan-pb-hero--auto .wan-pb-hero__media { position: relative; }
.wan-pb-hero--auto .wan-pb-hero__img { height: auto; }
.wan-pb-hero--auto .wan-pb-hero__content { position: absolute; inset: 0; margin: 0 auto; }
.wan-pb-hero__inner { max-width: 640px; }
.wan-pb-hero--center .wan-pb-hero__content { justify-content: center; text-align: center; }
.wan-pb-hero--center .wan-pb-ctas { justify-content: center; }
.wan-pb-hero--right .wan-pb-hero__content { justify-content: flex-end; text-align: right; }
.wan-pb-hero--right .wan-pb-ctas { justify-content: flex-end; }
.wan-pb-hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0 0 8px; }
.wan-pb-hero__heading { font-size: 2.75rem; line-height: 1.05; font-weight: 700; margin: 0 0 12px; color: inherit; }
.wan-pb-hero__text { font-size: 1.1rem; line-height: 1.5; margin: 0; }

/* ---------- Text ---------- */
.wan-pb-text--center { text-align: center; }
.wan-pb-text--center .wan-pb-ctas { justify-content: center; }
.wan-pb-width--narrow { max-width: 640px; }
.wan-pb-width--normal { max-width: 860px; }
.wan-pb-width--wide { max-width: none; }
.wan-pb-text--center .wan-pb-text__inner { margin: 0 auto; }

/* ---------- Bild ---------- */
.wan-pb-image__figure { margin: 0; }
.wan-pb-image__img { width: 100%; height: auto; display: block; }
.wan-pb-image__figure figcaption { font-size: .85rem; color: var(--wan-pb-muted); margin-top: 8px; }

/* ---------- Bild + text ---------- */
.wan-pb-image_text__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.wan-pb-image_text--right .wan-pb-image_text__media { order: 2; }
.wan-pb-image_text__img { width: 100%; height: auto; display: block; }
.wan-pb-image_text__media[class*="wan-pb-aspect--"] { overflow: hidden; }
.wan-pb-image_text__media[class*="wan-pb-aspect--"] .wan-pb-image_text__img { height: 100%; object-fit: cover; }
/* Bildens andel av bredden (bilden till vänster; till höger byts kolumnerna) */
.wan-pb-imgw--60 .wan-pb-image_text__grid { grid-template-columns: 3fr 2fr; }
.wan-pb-imgw--67 .wan-pb-image_text__grid { grid-template-columns: 2fr 1fr; }
.wan-pb-imgw--75 .wan-pb-image_text__grid { grid-template-columns: 3fr 1fr; }
.wan-pb-image_text--right.wan-pb-imgw--60 .wan-pb-image_text__grid { grid-template-columns: 2fr 3fr; }
.wan-pb-image_text--right.wan-pb-imgw--67 .wan-pb-image_text__grid { grid-template-columns: 1fr 2fr; }
.wan-pb-image_text--right.wan-pb-imgw--75 .wan-pb-image_text__grid { grid-template-columns: 1fr 3fr; }
/* Kant till kant: bilden fyller sin del hela vägen ut, texten centreras i bakgrundsfärgen */
.wan-pb-image_text--bleed.wan-pb-bg { padding: 0; }
.wan-pb-image_text--bleed .wan-pb-image_text__grid { gap: 0; align-items: stretch; }
.wan-pb-image_text--bleed .wan-pb-image_text__media { min-height: 360px; overflow: hidden; }
.wan-pb-image_text--bleed .wan-pb-image_text__img { height: 100%; object-fit: cover; }
.wan-pb-image_text--bleed .wan-pb-image_text__content { padding: 48px clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }

/* ---------- Rutnät (bildgrid, kategorikort) ---------- */
.wan-pb-grid { display: grid; gap: var(--wan-pb-gap); }
.wan-pb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wan-pb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wan-pb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.wan-pb-cols-5 { grid-template-columns: repeat(5, 1fr); }
.wan-pb-cols-6 { grid-template-columns: repeat(6, 1fr); }
.wan-pb-tile { display: block; color: var(--wan-pb-text); text-decoration: none; }
.wan-pb-tile:hover .wan-pb-tile__label { text-decoration: underline; }
.wan-pb-tile__media { display: block; overflow: hidden; background: var(--wan-pb-grey); }
.wan-pb-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.wan-pb-tile:hover .wan-pb-tile__img { transform: scale(1.03); }
.wan-pb-aspect--square { aspect-ratio: 1 / 1; }
.wan-pb-aspect--portrait { aspect-ratio: 3 / 4; }
.wan-pb-aspect--landscape { aspect-ratio: 4 / 3; }
/* Bildens eget format: hela bilden, ingen beskärning */
.wan-pb-aspect--auto { aspect-ratio: auto; }
.wan-pb-aspect--auto .wan-pb-tile__img { height: auto; }
.wan-pb-tile__label { display: block; margin-top: 8px; font-weight: 600; }
.wan-pb-tile__count { font-weight: 400; color: var(--wan-pb-muted); }
.wan-pb-tile--noimg { border: 1px solid #e8e8e8; padding: 16px; text-align: center; }
.wan-pb-tile--noimg .wan-pb-tile__label { margin: 0; }

/* ---------- Produkter ---------- */
.wan-pb-products__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.wan-pb-products__head .wan-pb-heading { margin: 0; }
.wan-pb-products ul.products { display: grid; gap: var(--wan-pb-gap); margin: 0; padding: 0; list-style: none; }
/* Samma specificitet som WooCommerce clearfix (.woocommerce ul.products::before), som laddas senare - därför .wan-pb framför. Annars blir ::before en tom ruta i gridden. */
.wan-pb .wan-pb-products ul.products::before, .wan-pb .wan-pb-products ul.products::after { content: none; display: none; }
.wan-pb-products ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
.wan-pb-products--cols-2 ul.products { grid-template-columns: repeat(2, 1fr); }
.wan-pb-products--cols-3 ul.products { grid-template-columns: repeat(3, 1fr); }
.wan-pb-products--cols-4 ul.products { grid-template-columns: repeat(4, 1fr); }
.wan-pb-products--cols-5 ul.products { grid-template-columns: repeat(5, 1fr); }
.wan-pb-products--cols-6 ul.products { grid-template-columns: repeat(6, 1fr); }
/* Karusell: horisontell rad med snäpp, utan JavaScript */
.wan-pb-products--carousel ul.products { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
.wan-pb-products--carousel ul.products li.product { flex: 0 0 calc((100% - 3 * var(--wan-pb-gap)) / 4); scroll-snap-align: start; }

/* ---------- Arkivrubrik, spacer, avdelare ---------- */
.wan-pb-archive { margin: 24px 0 8px; }
.wan-pb-archive__anchor { position: relative; top: -120px; }
.wan-pb-spacer--xs { height: 8px; }
.wan-pb-spacer--s { height: 16px; }
.wan-pb-spacer--m { height: 32px; }
.wan-pb-spacer--l { height: 56px; }
.wan-pb-spacer--xl { height: 96px; }
.wan-pb-divider hr { border: 0; border-top: 1px solid #e8e8e8; margin: 24px 0; }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
    .wan-pb-space--m { margin: 24px 0; }
    .wan-pb-space--l { margin: 40px 0; }
    .wan-pb-hero--has-mobile .wan-pb-hero__img--desktop { display: none; }
    /* Ingen egen mobilbild: datorbilden får mobilplaceringen */
    .wan-pb-hero__img--desktop[style*="--wan-pb-focus-m"] { object-position: var(--wan-pb-focus-m) !important; }
    .wan-pb-hero--has-mobile .wan-pb-hero__img--mobile { display: block; }
    .wan-pb-hero--s, .wan-pb-hero--s .wan-pb-hero__content { min-height: 220px; }
    .wan-pb-hero--m, .wan-pb-hero--m .wan-pb-hero__content { min-height: 360px; }
    .wan-pb-hero--l, .wan-pb-hero--l .wan-pb-hero__content { min-height: 480px; }
    .wan-pb-hero--xl, .wan-pb-hero--xl .wan-pb-hero__content { min-height: 620px; }
    .wan-pb-hero__heading { font-size: 2rem; }
    .wan-pb-image_text__grid, [class*="wan-pb-imgw--"] .wan-pb-image_text__grid { grid-template-columns: 1fr !important; gap: 20px; }
    .wan-pb-image_text--bleed .wan-pb-image_text__grid { gap: 0; }
    .wan-pb-image_text--bleed .wan-pb-image_text__media { min-height: 240px; }
    .wan-pb-image_text--right .wan-pb-image_text__media { order: 0; }
    .wan-pb-grid[class*="wan-pb-cols-"] { grid-template-columns: repeat(2, 1fr); }
    .wan-pb-grid.wan-pb-mcols-1 { grid-template-columns: 1fr; }
    .wan-pb-grid.wan-pb-mcols-3 { grid-template-columns: repeat(3, 1fr); }
    .wan-pb-products[class*="wan-pb-products--cols-"] ul.products { grid-template-columns: repeat(2, 1fr); }
    .wan-pb-products--mcols-1 ul.products { grid-template-columns: 1fr; }
    .wan-pb-products--carousel ul.products li.product { flex-basis: 70%; }
}

/* Visa bara på dator / mobil (block och bilder i bildgalleriet) */
@media (min-width: 768px) {
    .wan-pb-hide-desktop { display: none !important; }
}
@media (max-width: 767px) {
    .wan-pb-hide-mobile { display: none !important; }
}

/* Kategori-/varumärkessida med egna block överst: temats rubrik döljs (brödsmulor, filterknapp och beskrivning står kvar) */
/* Hela temats rubrikrad (brödsmulor, rubrik, filterknapp, beskrivning) döljs - filterknappen och beskrivningen finns vid Produktarkiv-blocket */
body.wan-pb-term-has-blocks .knockout-archive-header,
body.wan-pb-term-has-blocks .shop-breadcrumbs { display: none; }
/* Utan Produktarkiv-block (t.ex. varumärkessida med utvalda block): ingen produktlista - "allt" finns på /{varumärke}/ */
body.wan-pb-no-archive .category-main-content { display: none; }
@media (min-width: 1024px) {
    .wan-pb-archive__filter { display: none !important; }
}
.wan-pb-archive__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wan-pb-archive__row .wan-pb-archive__heading { margin: 0; }
.wan-pb-archive__desc { margin-top: 8px; max-width: 760px; font-size: .9rem; color: var(--wan-pb-muted); }
.wan-pb-archive__desc p:last-child { margin-bottom: 0; }

/* Sidinställningar: dölj hela sidhuvudet (logga, sök, meny, ikoner) och nyhetsbrevet i sidfoten ("Följ oss" står kvar) */
body.wan-pb-hide-menu header.header,
body.wan-pb-hide-menu .rmp-container,
body.wan-pb-hide-menu #rmp-container-195,
body.wan-pb-hide-menu .rmp-menu-wrap { display: none !important; }
body.wan-pb-hide-newsletter .grid-container:has(> .grid-x > .cell > [class*="klaviyo-form-"]) { display: none; }