/* :root-variablerna ligger i storefront-extras/tokens.css */
.sfx-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sfx-gap)}
.sfx-card{display:flex;flex-direction:column;gap:16px;background:var(--sf-bg);border:1px solid var(--sf-line);border-radius:var(--sfx-card-radius);padding:var(--sfx-card-space);box-shadow:none;min-width:0}
.sfx-card h3{font-size:23px;margin:0}.sfx-card p{font-size:16px;margin:0}.sfx-card>.sfs-eyebrow{font-size:var(--sf-text-eyebrow)}.sfx-card small{font-size:13px;color:var(--sf-muted)}.sfx-card>a:last-child{margin-top:auto}
.sfx-guide-image{display:flex;align-items:center;justify-content:center;aspect-ratio:16/7;background:var(--sfx-surface);border-radius:var(--sfx-card-radius);overflow:hidden}.sfx-guide-image img{width:100%;height:100%;object-fit:cover}.sfx-guide-image .sfs-icon{width:44px;height:44px;color:var(--sf-muted)}
body.home .entry-content>.sfx-fullwidth{width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw;padding:0;background:var(--sfx-surface)}
.sfx-fullwidth>.wp-block-group__inner-container{display:contents}
.sfs-section.sfx-newsletter{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:center;background:transparent;padding-block:var(--sf-section-space);max-width:var(--sf-container);margin:auto}
.sfx-newsletter-image{width:260px;height:auto}.sfx-newsletter h2{font-size:36px}.sfx-newsletter p{font-size:var(--sf-text-body)}.sfs-newsletter-form label{display:block;font-size:14px;margin-bottom:8px}.sfs-newsletter-form>div{display:flex;gap:12px}.sfs-newsletter-form input[type=email]{min-width:0;flex:1;border:1px solid var(--sf-line);border-radius:var(--sf-radius-button);background:var(--sf-bg);padding:14px;font:inherit}
body .sfx-newsletter button.sfs-button{background:var(--sf-hero-cta)!important;color:var(--sf-on-accent)!important;font:var(--sf-weight-medium) var(--sf-text-button)/1.5 var(--sf-font);border:0;border-radius:var(--sf-radius-button);padding:14px 28px;min-height:var(--sf-button-height);cursor:pointer;transition:filter .2s,transform .2s}
body .sfx-newsletter button.sfs-button:hover{filter:brightness(.92);transform:translateY(-2px)}.sfs-newsletter-form .sfs-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;line-height:1.5}.sfs-consent input{margin-top:4px}.sfs-newsletter-form small{display:block;font-size:13px;color:var(--sf-muted)}.sfs-newsletter-form input:focus-visible,.sfs-newsletter-form button:focus-visible{outline:2px solid var(--sf-primary);outline-offset:4px}.sfs-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:800px){.sfx-guide-grid{grid-template-columns:1fr}.sfs-section.sfx-newsletter{grid-template-columns:1fr 160px;gap:24px}.sfx-newsletter-image{width:160px}}
@media(max-width:600px){.sfs-section.sfx-newsletter{display:flex;flex-direction:column;padding:40px 20px}.sfx-newsletter-image{width:120px;order:-1}.sfx-newsletter h2{font-size:30px}.sfs-newsletter-form>div{flex-direction:column}.sfx-card{padding:22px}.sfx-guide-image{aspect-ratio:16/6}}
@media(prefers-reduced-motion:reduce){body .sfx-newsletter button.sfs-button{transition:none;transform:none}}
.sfs-consent a{color:var(--sf-primary);text-decoration:underline;text-underline-offset:3px}.sfs-consent a:hover{text-decoration-thickness:2px}
/* The same quiet interaction for article and existing WooCommerce cards. */
/* :root-variablerna ligger i storefront-extras/tokens.css */
body.home .entry-content .wc-block-grid__product,.sfx-card{transition:border-color var(--sf-card-motion) ease,box-shadow var(--sf-card-motion) ease,transform var(--sf-card-motion) ease}
body.home .entry-content .wc-block-grid__product img,.sfx-guide-image img{transition:transform var(--sf-card-motion) ease}
@media(hover:hover){body.home .entry-content .wc-block-grid__product:hover,.sfx-card:hover{border-color:var(--sf-card-hover-border);box-shadow:var(--sf-card-hover-shadow);transform:translateY(-3px)}body.home .entry-content .wc-block-grid__product:hover img,.sfx-card:hover .sfx-guide-image img{transform:scale(var(--sf-card-image-zoom))}body.home .entry-content .wc-block-grid__product .wp-block-button__link:hover{filter:brightness(.88)!important;transform:translateY(-2px)!important}body.home .wc-block-grid__product-link:hover .wc-block-grid__product-title,.sfx-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}}
body.home .entry-content .wc-block-grid__product:focus-within,.sfx-card:focus-within{border-color:var(--sf-primary);box-shadow:var(--sf-card-hover-shadow)}
.sfx-card a:focus-visible{outline:2px solid var(--sf-primary);outline-offset:4px}.sfx-guide-more{text-align:center;margin-top:32px!important}
.sfx-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sfx-gap)}.sfx-info-grid h3{font-size:22px}.sfx-info-grid .sfs-icon{width:36px;height:36px}.sfx-prose{max-width:850px;margin:auto}.sfx-group-card a{margin-top:auto}.sfx-info-grid .sfx-card{transform:none;box-shadow:none}
@media(max-width:900px){.sfx-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sfx-info-grid{grid-template-columns:1fr}.sfx-info-grid h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){body.home .entry-content .wc-block-grid__product,.sfx-card,body.home .entry-content .wc-block-grid__product img,.sfx-guide-image img{transition:none!important;transform:none!important}}
.sfx-topbar{background:var(--sf-primary);color:var(--sf-on-primary)}.sfx-topbar-inner{max-width:var(--sf-container);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 28px;min-height:var(--sf-control-height);box-sizing:border-box}.sfx-topbar-item{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.4}.sfx-topbar .sfs-icon{width:22px;height:22px;flex:0 0 22px;color:var(--sf-on-primary)!important}.sfx-topbar-item[hidden]{display:none}
@media(max-width:700px){.sfx-topbar-inner{height:48px;justify-content:center;padding:8px 16px}.sfx-topbar-item{font-size:12px;text-align:center}.sfx-topbar-item:not(:first-child){display:none}.sfx-topbar-item.is-current:not([hidden]){display:flex}.sfx-topbar-item[hidden]{display:none}}

.sfx-topbar:focus-visible{outline:2px solid var(--sf-on-primary);outline-offset:-4px}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){.sfx-topbar-item.is-current{animation:sfx-fact-in .2s ease-out}@keyframes sfx-fact-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}}
.sfs-steps-four .sfs-steps-list{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:800px){.sfs-steps-four .sfs-steps-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sfs-steps-four .sfs-steps-list{grid-template-columns:1fr}}

/* === Claude: trust-etiketter utan h3 + sekundär hero-knapp === */
.sfs-trust-item .sfs-trust-label{font-size:16px;white-space:nowrap;margin:0 0 5px;font-weight:var(--sf-weight-ui);color:var(--sf-primary)}
@media(max-width:1100px){.sfs-trust-item .sfs-trust-label{font-size:14px;white-space:normal}}
@media(max-width:600px){.sfs-trust-item .sfs-trust-label{font-size:14px}}
.sfs-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sfs-hero-actions p{margin:0}
a.sfs-hero-cta-secondary{display:inline-flex;align-items:center;gap:8px;min-height:var(--sf-control-height);padding:0 22px;border:1px solid color-mix(in srgb,var(--sf-on-primary) 70%,transparent);border-radius:var(--sf-radius-button);color:var(--sf-on-primary);font-weight:var(--sf-weight-ui);text-decoration:none;white-space:nowrap;transition:background .2s ease,border-color .2s ease}
a.sfs-hero-cta-secondary:hover{background:color-mix(in srgb,var(--sf-on-primary) 12%,transparent);border-color:var(--sf-on-primary);color:var(--sf-on-primary)}
a.sfs-hero-cta-secondary:focus-visible{outline:3px solid var(--sf-on-primary);outline-offset:4px}
@media(prefers-reduced-motion:reduce){a.sfs-hero-cta-secondary{transition:none}}

/* === Claude: produktrutnät === */
.sfx-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sfx-gap)}
.sfx-product-grid .sfx-card{gap:12px}
.sfx-card-image{display:block;background:var(--sf-surface-tint);border-radius:var(--sf-radius-button);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sfx-card-image img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;transition:transform .35s ease}
.sfx-card:hover .sfx-card-image img{transform:scale(1.05)}
.sfx-product h3{font-size:19px;margin:0}
.sfx-product h3 a{text-decoration:none;color:inherit}
.sfx-card-price{font-size:19px;font-weight:var(--sf-weight-bold);margin:0}
.sfx-card-cta{margin-top:auto;text-align:center}
.sfx-product-placeholder .sfx-card-image .sfs-icon{width:42px;height:42px;opacity:.35}
@media(max-width:1000px){.sfx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sfx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sfx-product-grid .sfx-card{padding:16px}.sfx-product h3{font-size:16px}}

/* === Claude: rytm, djup och radbrytning === */
/* topbar: inget ord ska brytas i kanten */
.sfx-topbar-inner{padding-inline:32px;gap:24px}
.sfx-topbar-item{white-space:nowrap}
@media(max-width:1200px){.sfx-topbar-item{font-size:11.5px}.sfx-topbar-inner{gap:16px;padding-inline:20px}}

/* tonade sektioner får luft och ingen vit inre bakgrund */
body.home .entry-content>.sfx-fullwidth>.wp-block-group__inner-container>.sfs-section{background:transparent}

/* kort: mer djup, tydligare hover */
.sfx-card{box-shadow:0 1px 2px color-mix(in srgb,var(--sf-shadow-color) 4%,transparent)}
.sfx-card:hover{border-color:color-mix(in srgb,var(--sf-primary) 28%,transparent);box-shadow:0 10px 24px color-mix(in srgb,var(--sf-shadow-color) 10%,transparent);transform:translateY(-2px)}
.sfx-product-grid .sfx-card{background:var(--sf-bg)}
.sfx-product .sfx-card-cta{background:var(--sf-primary);color:var(--sf-on-primary);border-radius:var(--sf-radius-button);padding:12px 16px;text-decoration:none;font-weight:var(--sf-weight-ui);transition:background .2s ease}
.sfx-product .sfx-card-cta:hover{background:var(--sf-hero-cta)}
@media(prefers-reduced-motion:reduce){.sfx-card:hover{transform:none}.sfx-card-image img{transition:none}}

/* === Claude: rensat hover, vita produktbilder, kompaktare infokort === */
/* inga skuggor eller lyft någonstans */
.sfx-card,.sfx-card:hover{box-shadow:none!important;transform:none!important}
body.home .entry-content .wc-block-grid__product:hover{box-shadow:none!important;transform:none!important}
/* hover endast på klickbara kort: diskret kantfärg */
.sfx-product:hover,.sfx-guide-card:hover,.sfx-group-card:hover{border-color:color-mix(in srgb,var(--sf-primary) 30%,transparent)}
.sfx-info-grid .sfx-card:hover{border-color:var(--sf-line)}
/* produktbild: vit yta, ingen blå platta */
.sfx-card-image{background:var(--sf-bg)}
.sfx-card-image img{padding:6px}
.sfx-product-grid .sfx-card{border:1px solid var(--sf-line)}
/* preparatgrupper */
.sfx-group-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sfx-gap)}
.sfx-group-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--sfx-surface)}
.sfx-group-icon .sfs-icon{width:24px;height:24px}
.sfx-group-card h3{margin:0;font-size:20px}
.sfx-group-card h3 a{text-decoration:none;color:inherit}
.sfx-group-card h3 a:hover{text-decoration:underline}
.sfx-group-card p{margin:0;font-size:15px}
.sfx-group-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sfx-group-list a{font-size:15px;text-decoration:none}
.sfx-group-list a:hover{text-decoration:underline}
@media(max-width:1000px){.sfx-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sfx-group-grid{grid-template-columns:1fr}}
/* betalning/leverans: kompaktare kort */
.sfx-info-grid .sfx-card{padding:22px;gap:10px}
.sfx-info-grid .sfx-card h3{font-size:18px;margin:0}
.sfx-info-grid .sfx-card p{font-size:15px;margin:0}
.sfx-info-grid .sfs-icon{width:26px;height:26px}
/* topbar: centrerad, aldrig i kanten */
.sfx-topbar-inner{justify-content:center;gap:48px;padding-inline:40px}
@media(max-width:1200px){.sfx-topbar-inner{gap:28px}}

/* === Claude: hero med produkttrio === */
.sfs-hero{position:relative;overflow:hidden}
.sfx-hero-products{position:absolute;right:4%;top:50%;transform:translateY(-50%);display:flex;align-items:flex-end;gap:0;pointer-events:none;z-index:1}
.sfx-hero-product img{display:block;height:auto;filter:drop-shadow(0 18px 30px rgba(3,18,40,.35))}
.sfx-hero-product-1 img{width:200px}
.sfx-hero-product-2 img{width:250px;position:relative;z-index:2;margin-inline:-26px}
.sfx-hero-product-3 img{width:200px}
.sfs-hero .sfs-hero-inner{position:relative;z-index:2}
@media(max-width:1300px){.sfx-hero-product-1 img,.sfx-hero-product-3 img{width:160px}.sfx-hero-product-2 img{width:200px}}
@media(max-width:1000px){.sfx-hero-products{display:none}}

/* === Claude: mobilregler === */
/* klickytor minst 44px */
.wp-block-button__link,.sfx-card-cta,.sfs-hero-cta,.sfs-newsletter-form button,.sfx-group-list a,.sfs-faq summary{min-height:var(--sf-touch-target)}
.sfx-card-cta,.sfs-hero-cta{display:inline-flex;align-items:center;justify-content:center}
.sfx-group-list a{display:inline-flex;align-items:center}
@media(max-width:900px){
  /* fyrkolumn blir två */
  .sfx-product-grid,.sfx-group-grid,.sfx-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* tvåkolumn blir en */
  .sfs-guide,.sfs-safety{grid-template-columns:1fr}
}
@media(max-width:600px){
  /* fyrkolumn blir en, produktkort två kompakta */
  .sfx-group-grid,.sfx-info-grid{grid-template-columns:1fr}
  .sfx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sfx-product-grid .sfx-card{padding:14px;gap:10px}
  .sfx-product h3{font-size:15px}
  .sfx-card-price{font-size:17px}
  .sfx-card-cta{width:100%;padding-inline:10px;font-size:15px}
  /* formulär staplas */
  .sfs-newsletter-form,.sfs-newsletter-form>div{display:flex;flex-direction:column;gap:10px}
  .sfs-newsletter-form input,.sfs-newsletter-form button{width:100%}
  /* processlinjen blir vertikal */
  .sfs-steps-list .sfs-step:not(:last-child):after{display:block;content:'';position:absolute;top:auto;bottom:-22px;left:50%;right:auto;width:0;height:26px;border-top:0;border-left:1px solid var(--sf-line)}
  .sfs-steps-list{gap:48px}
}
@media(max-width:380px){.sfx-product-grid{grid-template-columns:1fr}}

/* === Claude: sektion om erektil dysfunktion === */
.sfx-ed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.sfx-ed-copy{display:flex;flex-direction:column;gap:14px;max-width:520px}
.sfx-ed-copy h2{margin:0}
.sfx-ed-copy p{margin:0}
.sfx-ed-media img{display:block;width:100%;height:auto;border-radius:var(--sfx-card-radius);object-fit:cover;aspect-ratio:4/3}
@media(max-width:900px){.sfx-ed{grid-template-columns:1fr;gap:28px}.sfx-ed-copy{max-width:none}.sfx-ed-media{order:-1}}

/* === Claude: supportrad + omdömen i tre kolumner === */
.sfx-support{background:var(--sf-primary);color:var(--sf-on-primary)}
.sfx-support-inner{max-width:1200px;margin:auto;padding:22px 32px;display:flex;align-items:center;gap:12px 32px;flex-wrap:wrap}
.sfx-support-title{margin:0;font-size:20px;font-weight:var(--sf-weight-bold)}
.sfx-support-hours{margin:0;font-size:15px;opacity:.85;flex:1 1 auto}
.sfx-support-links{margin:0;display:flex;gap:24px;flex-wrap:wrap}
.sfx-support-links a{display:inline-flex;align-items:center;gap:8px;min-height:var(--sf-touch-target);color:var(--sf-on-primary);text-decoration:none;font-size:15px}
.sfx-support-links a:hover{text-decoration:underline}
.sfx-support .sfs-icon{width:20px;height:20px}
@media(max-width:700px){.sfx-support-inner{flex-direction:column;align-items:flex-start;gap:8px;padding:20px}.sfx-support-links{gap:6px;flex-direction:column}}

/* omdömen: tre hela kort på desktop, ingen avklippning */


/* === Claude: visa bara första omdömesgruppen på desktop === */


/* === Claude: topbar 2.0, jämn meny, ingen tonad bakgrund === */
.sfx-topbar-inner{justify-content:space-between;gap:24px;padding-inline:32px;max-width:var(--sf-container)}
.sfx-topbar-facts{display:flex;align-items:center;gap:28px}
.sfx-topbar-links{display:flex;align-items:center;gap:22px}
.sfx-topbar-links a{color:var(--sf-on-primary);text-decoration:none;font-size:12.5px;opacity:.9;min-height:32px;display:inline-flex;align-items:center}
.sfx-topbar-links a:hover{opacity:1;text-decoration:underline}
@media(max-width:900px){.sfx-topbar-links{gap:16px}.sfx-topbar-links a{font-size:12px}}
@media(max-width:700px){.sfx-topbar-links{display:none}.sfx-topbar-inner{justify-content:center}}
@media(max-width:700px){.sfx-topbar-facts{width:100%;justify-content:center}}

/* meny: samma storlek och vikt på alla poster */
.main-navigation .main-nav ul li a,.main-navigation .menu-toggle{font-size:16px;font-weight:var(--sf-weight-ui);letter-spacing:0}
.main-navigation .main-nav ul li.menu-item-has-children>a{font-weight:var(--sf-weight-ui)}

/* trust-raden: texten ska aldrig gå in i avdelaren */
.sfs-trust-item{min-width:0}
.sfs-trust-item .sfs-trust-label{white-space:normal;overflow-wrap:anywhere}
@media(min-width:901px){.sfs-trust-list{gap:0}.sfs-trust-item{padding-inline:26px}}

/* ta bort den tonade bakgrunden på tre sektioner */
body.home .entry-content>.sfx-fullwidth.sfx-plain{background:transparent}

/* === Claude: jämn meny + betygsrad i hero === */
.sf-nav-link,.sf-nav-trigger{font-size:16px;font-weight:var(--sf-weight-ui)}
.sf-menu .current-menu-item > .sf-nav-link{font-weight:var(--sf-weight-ui)}
.sfx-hero-rating{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:var(--sf-on-primary);font-size:15px;flex-wrap:wrap}
.sfx-hero-rating .sfx-star{color:var(--sf-color-star-off-dark);font-size:18px;line-height:1}
.sfx-hero-rating .sfx-star.is-on{color:var(--sf-color-star)}
.sfx-hero-rating strong{font-weight:var(--sf-weight-bold)}
.sfx-hero-rating span{opacity:.85}

/* === Claude: produktkort 2.0, klickbara kort, kategorirad === */
.sfx-product-grid .sfx-card{position:relative;border:1px solid var(--sf-line);background:var(--sf-bg);transition:border-color .2s ease,transform .2s ease}
.sfx-product-grid .sfx-card:hover{border-color:var(--sf-primary);transform:translateY(-3px)}
.sfx-product .sfx-card-image{display:flex;align-items:center;justify-content:center;background:var(--sf-bg);aspect-ratio:1/1;overflow:hidden}
.sfx-product .sfx-card-image img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box;transition:transform .3s ease}
.sfx-product:hover .sfx-card-image img{transform:scale(1.06)}
.sfx-product h3{margin:0;font-size:19px}
.sfx-product h3 a{text-decoration:none;color:inherit}
.sfx-product h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.sfx-card-fact{margin:0;font-size:14px;color:var(--sf-muted)}
.sfx-card-rating{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--sf-muted)}
.sfx-stars{display:inline-flex;gap:1px}
.sfx-star{color:var(--sf-color-star-off);font-size:15px;line-height:1}
.sfx-star.is-on{color:var(--sf-color-star)}
.sfx-card-rating.is-example span{font-style:italic;opacity:.75}
.sfx-card-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;background:var(--sf-hero-cta);color:var(--sf-on-accent);border-radius:var(--sf-radius-button);padding:12px 14px;font-weight:var(--sf-weight-ui);min-height:var(--sf-touch-target)}
.sfx-product:hover .sfx-card-cta{background:var(--sf-color-accent-hover)}

/* kategorirad under produkterna */
.sfx-group-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:34px;font-size:15px}
.sfx-group-row>span{color:var(--sf-muted)}
.sfx-group-row a{display:inline-flex;align-items:center;gap:6px;min-height:var(--sf-touch-target);padding:0 14px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-pill);text-decoration:none;color:var(--sf-primary);font-weight:var(--sf-weight-ui);transition:border-color .2s ease,background .2s ease}
.sfx-group-row a:hover{border-color:var(--sf-primary);background:var(--sfx-surface)}
@media(max-width:600px){.sfx-group-row{justify-content:flex-start}.sfx-group-row>span{width:100%}}

/* === Claude: tillbaka till rullande omdömen, men med hela kort === */


/* === Claude: mjukare hover, inga hårda kanter === */
.sfx-product-grid .sfx-card{border:1px solid var(--sf-line-soft);box-shadow:none;transition:border-color .2s ease,transform .2s ease}
.sfx-product-grid .sfx-card:hover{border-color:var(--sf-line-hover);transform:translateY(-3px)}
.sfx-product .sfx-card-image{background:var(--sf-bg);aspect-ratio:1/1}
.sfx-product .sfx-card-image img{padding:4px}

/* === Claude: spegelvänd bild-text-sektion === */
.sfx-ed-reverse .sfx-ed-media{order:0}
.sfx-ed-reverse .sfx-ed-copy{order:1}
@media(max-width:900px){.sfx-ed-reverse .sfx-ed-media{order:-1}}

/* === Claude: tre infokort + sektionslänk === */
.sfx-info-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sfx-info-grid-three .sfx-card h3{font-size:18px;margin:0}
.sfx-info-grid-three .sfx-card p{margin:0;font-size:15px}
.sfx-section-link{margin-top:26px;text-align:center}
.sfx-section-link a{display:inline-flex;align-items:center;gap:8px;min-height:var(--sf-touch-target);font-weight:var(--sf-weight-ui);text-decoration:none;border-bottom:1px solid currentColor}
@media(max-width:900px){.sfx-info-grid-three{grid-template-columns:1fr}}

/* === Claude: megameny med produktbilder i fyra kolumner === */
.sf-header .sf-nav-link,.sf-header .sf-nav-trigger{font-weight:var(--sf-weight-ui);font-size:16px}
.sf-header .sf-panel-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 28px}
.sf-header .sf-panel-links > li{padding:0}
.sf-header .sf-panel-link{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sf-muted);font-weight:var(--sf-weight-ui);margin-bottom:12px;pointer-events:none}
.sf-header .sf-third-level{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sf-header .sf-third-link{display:flex;align-items:center;gap:12px;padding:6px;border-radius:var(--sf-radius-field);min-height:var(--sf-button-height);color:var(--sf-primary);font-size:15px;font-weight:var(--sf-weight-ui);text-decoration:none;transition:background .15s ease}
.sf-header .sf-third-link:hover{background:var(--sfx-surface);text-decoration:none}
.sf-header .sf-menu-thumb{width:44px;height:44px;object-fit:contain;flex:0 0 44px;background:var(--sf-bg);border-radius:var(--sf-radius-button)}
@media(max-width:980px){
  .sf-header .sf-panel-links{grid-template-columns:1fr;gap:18px}
  .sf-header .sf-third-link{min-height:var(--sf-control-height)}
}

/* === Claude: rubrikstil bara för grupper med produkter, annars vanliga länkar === */
.sf-header .sf-panel-links > li:has(.sf-third-level) > .sf-panel-link{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sf-muted);font-weight:var(--sf-weight-ui);
  margin-bottom:12px;pointer-events:none;display:block}
.sf-header .sf-panel-links > li:not(:has(.sf-third-level)) > .sf-panel-link{
  font-size:16px;letter-spacing:0;text-transform:none;color:var(--sf-primary);font-weight:var(--sf-weight-ui);
  margin-bottom:0;pointer-events:auto;display:flex;align-items:center;min-height:var(--sf-touch-target)}
.sf-header .sf-navigation .sf-menu > li > .sf-nav-trigger,
.sf-header .sf-navigation .sf-menu > li > .sf-nav-link{font-weight:var(--sf-weight-ui);font-size:16px}

/* === Claude: samma vikt på alla menypunkter (knapp och länk) === */
nav.sf-navigation ul.sf-menu > li > button.sf-nav-trigger,
nav.sf-navigation ul.sf-menu > li > a.sf-nav-link{font-weight:var(--sf-weight-ui);font-size:16px;font-family:inherit}

/* === Claude: megameny – jämna bilder, fyra kolumner, kompaktare === */
.sf-header .sf-panel{padding:28px 32px 32px}
.sf-header .sf-panel-intro{display:none}
.sf-header .sf-panel-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px;align-items:start}
.sf-header .sf-panel-links > li:has(.sf-third-level) > .sf-panel-link{margin-bottom:8px}
.sf-header .sf-third-level{gap:2px}
.sf-header .sf-third-link{gap:10px;padding:6px 8px;min-height:56px;font-size:14px;line-height:1.3}
.sf-header .sf-menu-thumb{width:48px;height:48px;flex:0 0 48px;object-fit:contain;background:var(--sf-surface);border-radius:var(--sf-radius-field);padding:4px;box-sizing:border-box}
.sf-header .sf-panel-links > li:not(:has(.sf-third-level)){grid-column:1/-1;border-top:1px solid var(--sf-line);padding-top:12px;margin-top:4px}
@media(max-width:1100px){.sf-header .sf-panel-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.sf-header .sf-panel-links{grid-template-columns:1fr}}

/* === Claude: tydligare sektionslänkar === */
.sfx-section-link a,.sfx-guide-more a,.sfs-section .wp-block-paragraph > a[href$="/butik/"]{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;
  border:1px solid var(--sf-primary);border-radius:var(--sf-radius-pill);color:var(--sf-primary);
  font-weight:var(--sf-weight-ui);text-decoration:none;transition:background .18s ease,color .18s ease}
.sfx-section-link a:hover,.sfx-guide-more a:hover,.sfs-section .wp-block-paragraph > a[href$="/butik/"]:hover{
  background:var(--sf-primary);color:var(--sf-on-primary);text-decoration:none}
.sfx-guide-more{text-align:center;margin-top:30px}

/* === Claude: slutlig override för panelen (högre specificitet än temat) === */
body .sf-header .sf-panel .sf-panel-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px}
body .sf-header .sf-panel .sf-panel-intro{display:none}
body .sf-header .sf-panel{padding:26px 30px 30px}
body nav.sf-navigation ul.sf-menu > li > button.sf-nav-trigger,
body nav.sf-navigation ul.sf-menu > li > a.sf-nav-link{font-weight:var(--sf-weight-ui);font-size:16px}
@media(max-width:1100px){body .sf-header .sf-panel .sf-panel-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){body .sf-header .sf-panel .sf-panel-links{grid-template-columns:1fr}}

/* === Claude: guidekort med inzoomning, fade på omdömen, tydliga textlänkar === */
.sfx-guide-grid .sfx-card{overflow:hidden;padding:0;border:1px solid var(--sf-line-soft);transition:border-color .2s ease,transform .2s ease}
.sfx-guide-grid .sfx-card:hover{border-color:var(--sf-line-hover);transform:translateY(-3px)}
.sfx-guide-image{display:block;overflow:hidden;aspect-ratio:16/10;margin:0}
.sfx-guide-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.sfx-guide-grid .sfx-card:hover .sfx-guide-image img{transform:scale(1.08)}
.sfx-guide-grid .sfx-card > :not(.sfx-guide-image){padding-inline:24px}
.sfx-guide-grid .sfx-card > .sfs-eyebrow{padding-top:20px;margin:0 0 6px}
.sfx-guide-grid .sfx-card h3{margin:0 0 10px;font-size:20px;line-height:1.3}
.sfx-guide-grid .sfx-card h3 a{text-decoration:none;color:inherit}
.sfx-guide-grid .sfx-card p{margin:0 0 12px;font-size:15px}
.sfx-guide-grid .sfx-card small{display:block;margin-bottom:14px;color:var(--sf-color-text-subtle);font-size:13px}
.sfx-guide-grid .sfx-card > a:last-child{display:inline-flex;align-items:center;gap:8px;min-height:var(--sf-touch-target);margin-bottom:8px;font-weight:var(--sf-weight-ui);color:var(--sf-hero-cta);text-decoration:none}
.sfx-guide-grid .sfx-card:hover > a:last-child{text-decoration:underline}

/* omdömen: mjuk uttoning i kanterna */

/* textlänkar i sektioner */
.sfx-inline-link a{display:inline-flex;align-items:center;gap:8px;min-height:var(--sf-touch-target);font-weight:var(--sf-weight-ui);color:var(--sf-primary);text-decoration:none;border-bottom:2px solid var(--sf-hero-cta);padding-bottom:2px}
.sfx-inline-link a:hover{color:var(--sf-hero-cta)}

/* === Claude: modul – process i fyra steg med bild === */
.sfx-flow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.sfx-flow-copy{display:flex;flex-direction:column;gap:18px}
.sfx-flow-copy h2{margin:0;max-width:16ch}
.sfx-flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative;margin-top:8px}
.sfx-flow-step{position:relative;display:flex;flex-direction:column;gap:8px}
.sfx-flow-step h3{margin:0;font-size:16px}
.sfx-flow-step p{margin:0;font-size:14px;color:var(--sf-muted)}
.sfx-flow-num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 6px;
  border:1px solid var(--sf-primary);border-radius:50%;font-weight:var(--sf-weight-bold);color:var(--sf-primary);background:var(--sf-bg);position:relative;z-index:1}
.sfx-flow-step:not(:last-child)::after{content:"";position:absolute;top:20px;left:40px;right:-18px;border-top:1px solid var(--sf-line)}
.sfx-flow-cta{margin:10px 0 0}
.sfx-flow-cta a{display:inline-flex;align-items:center;min-height:var(--sf-control-height);padding:0 26px;border-radius:var(--sf-radius-button);
  background:var(--sf-hero-cta);color:var(--sf-on-accent);font-weight:var(--sf-weight-ui);text-decoration:none}
.sfx-flow-media img{display:block;width:100%;height:auto;border-radius:var(--sfx-card-radius);object-fit:cover;aspect-ratio:4/3}
@media(max-width:900px){
  .sfx-flow{grid-template-columns:1fr;gap:28px}
  .sfx-flow-media{order:-1}
  .sfx-flow-steps{grid-template-columns:1fr;gap:26px}
  .sfx-flow-step:not(:last-child)::after{top:40px;left:20px;right:auto;bottom:-26px;width:0;border-top:0;border-left:1px solid var(--sf-line)}
}

/* === Claude steg 1: sökfält i headern === */
.sfx-search{position:relative;display:flex;align-items:center;flex:0 1 320px;margin-left:auto;margin-right:18px}
.sfx-search-icon{position:absolute;left:14px;display:flex;width:18px;height:18px;color:var(--sf-color-text-soft);pointer-events:none}
.sfx-search-icon svg{width:18px;height:18px}
.sfx-search input[type=search]{width:100%;min-height:var(--sf-touch-target);padding:0 14px 0 42px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-pill);background:var(--sf-surface-field);font:inherit;font-size:14px;color:var(--sf-ink);appearance:none}
.sfx-search input[type=search]::placeholder{color:var(--sf-color-text-subtle)}
.sfx-search input[type=search]:focus{outline:none;border-color:var(--sf-primary);background:var(--sf-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-shadow-color) 10%,transparent)}
.sfx-search button{position:absolute;right:6px;min-height:34px;padding:0 14px;border:0;border-radius:var(--sf-radius-pill);background:var(--sf-primary);color:var(--sf-on-primary);font:inherit;font-size:13px;font-weight:var(--sf-weight-ui);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s ease}
.sfx-search:focus-within button{opacity:1;pointer-events:auto}
.sfx-search button:focus-visible{outline:2px solid var(--sf-primary);outline-offset:2px}
@media(max-width:1100px){.sfx-search{flex-basis:220px;margin-right:12px}}
@media(max-width:860px){
  .sfx-search{order:10;flex:1 1 100%;margin:10px 0 0}
  .sf-header .sf-header-inner{flex-wrap:wrap}
}
@media(max-width:600px){.sfx-search input[type=search]{font-size:16px}}

/* === Claude steg 2–5 === */
/* etikett med streck */
.sfx-eyebrow-bar{display:flex;align-items:center;gap:10px}
.sfx-eyebrow-bar::before{content:"";width:3px;height:16px;background:var(--sf-primary);border-radius:2px}

/* jämförelsetabell */
.sfx-compare-wrap{overflow-x:auto}
.sfx-compare-table{width:100%;border-collapse:collapse;font-size:16px}
.sfx-compare-table th,.sfx-compare-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--sf-line)}
.sfx-compare-table thead th{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sf-muted);border-bottom:2px solid var(--sf-primary)}
.sfx-compare-table tbody th{font-weight:var(--sf-weight-ui);color:var(--sf-primary);width:26%}
.sfx-compare-table tbody tr:last-child th,.sfx-compare-table tbody tr:last-child td{border-bottom:0}
@media(max-width:600px){.sfx-compare-table{font-size:14px}.sfx-compare-table th,.sfx-compare-table td{padding:12px}}

/* mängdrabatt på kort */
.sfx-card-volume{margin:0;font-size:13px;color:var(--sf-muted)}
.sfx-card-volume span{display:inline-block;padding:2px 8px;margin-right:6px;border-radius:var(--sf-radius-pill);background:var(--sf-color-accent-soft);color:var(--sf-color-accent-strong);font-weight:var(--sf-weight-bold)}

/* mängdrabatt i köprutan */
.sfx-volume{margin:0 0 22px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-field);overflow:hidden}
.sfx-volume-title{margin:0;padding:12px 16px;background:var(--sf-surface-field);font-weight:var(--sf-weight-bold);font-size:15px}
.sfx-volume-list{list-style:none;margin:0;padding:0}
.sfx-volume-list li{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--sf-line);font-size:15px}
.sfx-volume-qty{font-weight:var(--sf-weight-ui)}
.sfx-volume-unit{color:var(--sf-muted);font-size:13px}
.sfx-volume-save{min-width:52px;text-align:right;font-weight:var(--sf-weight-bold);color:var(--sf-color-accent-strong)}
@media(max-width:600px){.sfx-volume-list li{grid-template-columns:1fr auto;row-gap:2px}.sfx-volume-unit{grid-column:1}.sfx-volume-save{grid-column:2;text-align:right}}

/* betalsätt */
.sfx-payments{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.sfx-payments li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--sf-on-primary) 28%,transparent);border-radius:var(--sf-radius-field);font-size:13px}
.sfx-buybox-payments .sfx-payments li{border-color:var(--sf-line);color:var(--sf-primary)}
.sfx-buybox-payments{margin-top:16px}
.sfx-footer-payments{margin-top:22px}

/* kampanjblock */
.sfx-campaign{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;border:1px solid var(--sf-line);border-radius:var(--sf-radius-media);padding:34px}
.sfx-campaign-copy{display:flex;flex-direction:column;gap:14px}
.sfx-campaign h2{margin:0;font-size:32px}
.sfx-campaign p{margin:0}
.sfx-campaign-cta a{display:inline-flex;align-items:center;min-height:var(--sf-control-height);padding:0 26px;border-radius:var(--sf-radius-button);background:var(--sf-hero-cta);color:var(--sf-on-accent);font-weight:var(--sf-weight-ui);text-decoration:none}
.sfx-campaign-media img{display:block;width:100%;height:auto;border-radius:var(--sf-radius-field)}
@media(max-width:900px){.sfx-campaign{grid-template-columns:1fr;padding:24px}.sfx-campaign h2{font-size:26px}}

/* varför handla hos oss */
.sfx-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.sfx-why-item{display:flex;flex-direction:column;gap:10px}
.sfx-why-item .sfs-icon{width:34px;height:34px;color:var(--sf-primary)}
.sfx-why-item h3{margin:0;font-size:18px}
.sfx-why-item p{margin:0;font-size:15px;color:var(--sf-muted)}
@media(max-width:900px){.sfx-why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:600px){.sfx-why-grid{grid-template-columns:1fr}}

/* sticky köpknapp på mobil */
.sfx-sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--sf-bg);border-top:1px solid var(--sf-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none}
.sfx-sticky-inner{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto}
.sfx-sticky-info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.sfx-sticky-name{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfx-sticky-meta{font-size:13px;color:var(--sf-muted)}
.sfx-sticky-btn{min-height:var(--sf-control-height);padding:0 20px;border:0;border-radius:var(--sf-radius-field);background:var(--sf-hero-cta);color:var(--sf-on-accent);font:inherit;font-weight:var(--sf-weight-bold);cursor:pointer}
@media(max-width:860px){.sfx-sticky-buy:not([hidden]){display:block}body.single-product{padding-bottom:84px}}

/* === Claude: antalskort på produktsidan === */
.sfx-variations-hidden{display:none!important}
.sfx-qty-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.sfx-qty-card{display:flex;align-items:center;justify-content:center;min-height:56px;padding:10px 8px;
  border:1px solid var(--sf-line);border-radius:var(--sf-radius-field);background:var(--sf-bg);font:inherit;font-size:15px;font-weight:var(--sf-weight-ui);
  color:var(--sf-primary);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.sfx-qty-card:hover{border-color:var(--sf-line-hover)}
.sfx-qty-card.is-active{border-color:var(--sf-primary);background:var(--sf-surface-field);box-shadow:inset 0 0 0 1px var(--sf-primary)}
.sfx-qty-card:focus-visible{outline:2px solid var(--sf-primary);outline-offset:2px}
@media(max-width:600px){.sfx-qty-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* === Claude: produktsidans sektioner === */
.sfx-product-sections{max-width:1200px;margin:56px auto 0;padding-inline:20px}
.sfx-product-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;border-bottom:1px solid var(--sf-line);padding-bottom:12px}
.sfx-product-nav a{display:inline-flex;align-items:center;min-height:var(--sf-touch-target);padding:0 16px;border-radius:var(--sf-radius-pill);
  color:var(--sf-primary);font-weight:var(--sf-weight-ui);font-size:15px;text-decoration:none}
.sfx-product-nav a:hover{background:var(--sf-surface-field)}
.sfx-product-section{padding:34px 0;border-bottom:1px solid var(--sf-line)}
.sfx-product-section:last-child{border-bottom:0}
.sfx-product-section h2{margin:0 0 18px;font-size:28px}
.sfx-product-prose{max-width:760px}
.sfx-product-prose h2{font-size:22px;margin:26px 0 10px}
.sfx-product-prose h3{font-size:19px;margin:22px 0 8px}
.sfx-spec-table{width:100%;max-width:860px;border-collapse:collapse;font-size:16px}
.sfx-spec-table th,.sfx-spec-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--sf-line)}
.sfx-spec-table tbody tr:nth-child(odd){background:var(--sf-surface)}
.sfx-spec-table th{width:32%;font-weight:var(--sf-weight-ui);color:var(--sf-primary)}
.sfx-spec-note{margin:14px 0 0;font-size:13px;color:var(--sf-color-text-subtle)}
.sfx-product-faq details{border-bottom:1px solid var(--sf-line)}
.sfx-product-faq summary{cursor:pointer;padding:18px 0;font-weight:var(--sf-weight-ui);font-size:17px;list-style:none}
.sfx-product-faq summary::-webkit-details-marker{display:none}
.sfx-product-faq summary::after{content:"+";float:right;color:var(--sf-primary);font-weight:var(--sf-weight-body)}
.sfx-product-faq details[open] summary::after{content:"–"}
.sfx-product-faq p{margin:0 0 18px;max-width:760px}
@media(max-width:600px){.sfx-product-section h2{font-size:23px}.sfx-spec-table{font-size:14px}.sfx-spec-table th,.sfx-spec-table td{padding:11px 12px}}

/* === Claude: produktkort 1:1 enligt referensbild === */
.sfx-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.sfx-product-grid .sfx-card.sfx-product, .sfx-feed-track .sfx-card.sfx-product{
  display:flex;flex-direction:column;gap:0;background:var(--sf-bg);border:1px solid var(--sf-line-soft);border-radius:var(--sf-radius-card-shop);
  padding:14px 14px 16px;box-shadow:none;transition:border-color .18s ease,transform .18s ease}.sfx-product-grid .sfx-card.sfx-product:hover, .sfx-feed-track .sfx-card.sfx-product:hover{border-color:var(--sf-line-hover);transform:translateY(-3px)}
.sfx-card-media{position:relative;background:var(--sf-surface-tint);border-radius:14px;aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;overflow:hidden;margin-bottom:18px}
.sfx-card-media img{width:100%;height:100%;object-fit:contain;padding:18px;box-sizing:border-box;transition:transform .35s ease}
.sfx-product:hover .sfx-card-media img{transform:scale(1.05)}
.sfx-card-badge{position:absolute;top:14px;left:14px;padding:7px 16px;border-radius:var(--sf-radius-pill);
  background:var(--sf-hero-cta);color:var(--sf-on-accent);font-size:14px;font-weight:var(--sf-weight-ui);letter-spacing:.2px}
.sfx-product h3{margin:0 0 6px;font-size:24px;line-height:1.2;font-weight:var(--sf-weight-bold);letter-spacing:-.4px}
.sfx-product h3 a{color:var(--sf-primary);text-decoration:none}
.sfx-product h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.sfx-card-sub{margin:0 0 8px;font-size:16px;color:var(--sf-color-text-soft)}
.sfx-card-rating{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px}
.sfx-card-rating .sfx-stars{gap:2px}
.sfx-card-rating .sfx-star{font-size:17px}
.sfx-card-rating a{color:var(--sf-color-text-soft);text-decoration:underline;text-underline-offset:3px;position:relative;z-index:2}
.sfx-card-price{display:flex;align-items:baseline;gap:8px;margin:0 0 2px}
.sfx-card-from{font-size:18px;color:var(--sf-color-text-subtle)}
.sfx-card-price strong{font-size:30px;font-weight:var(--sf-weight-bold);color:var(--sf-primary);letter-spacing:-.6px}
.sfx-card-price .amount{font-size:30px;font-weight:var(--sf-weight-bold);color:var(--sf-primary)}
.sfx-card-unit{margin:0 0 16px;font-size:15px;color:var(--sf-color-text-subtle)}
.sfx-product .sfx-card-cta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;
  min-height:58px;border-radius:var(--sf-radius-media);background:var(--sf-primary);color:var(--sf-on-primary);font-size:18px;font-weight:var(--sf-weight-ui)}
.sfx-product:hover .sfx-card-cta{background:var(--sf-color-primary-hover)}
@media(max-width:1200px){.sfx-product h3{font-size:21px}.sfx-card-price strong,.sfx-card-price .amount{font-size:26px}}
@media(max-width:1000px){.sfx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .sfx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sfx-product-grid .sfx-card.sfx-product, .sfx-feed-track .sfx-card.sfx-product{padding:10px 10px 12px;border-radius:14px}
  .sfx-card-media{margin-bottom:12px;border-radius:var(--sf-radius-control)}
  .sfx-card-badge{top:8px;left:8px;padding:5px 11px;font-size:12px}
  .sfx-product h3{font-size:17px}
  .sfx-card-sub{font-size:13px}
  .sfx-card-rating{font-size:13px;margin-bottom:8px}
  .sfx-card-price strong,.sfx-card-price .amount{font-size:21px}
  .sfx-card-from{font-size:14px}
  .sfx-card-unit{font-size:12px;margin-bottom:10px}
  .sfx-product .sfx-card-cta{min-height:46px;font-size:15px;border-radius:9px}
}

/* === Claude: guidekort 1:1 enligt referensbild === */
.sfx-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.sfx-guide-grid .sfx-card.sfx-guide-card{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;
  background:var(--sf-bg);border:1px solid var(--sf-line-soft);border-radius:var(--sf-radius-card-shop);box-shadow:none;
  transition:border-color .18s ease,transform .18s ease}
.sfx-guide-grid .sfx-card.sfx-guide-card:hover{border-color:var(--sf-line-hover);transform:translateY(-3px)}
.sfx-guide-card .sfx-guide-image{position:relative;display:block;margin:0;overflow:hidden;aspect-ratio:16/11;border-radius:0}
.sfx-guide-card .sfx-guide-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.sfx-guide-card:hover .sfx-guide-image img{transform:scale(1.07)}
.sfx-guide-badge{position:absolute;top:22px;left:22px;padding:9px 18px;border-radius:var(--sf-radius-pill);
  background:var(--sf-primary);color:var(--sf-on-primary);font-size:13px;font-weight:var(--sf-weight-bold);letter-spacing:1.6px;text-transform:uppercase}
.sfx-guide-body{display:flex;flex-direction:column;padding:28px 28px 24px}
.sfx-guide-card h3{margin:0 0 14px;font-size:28px;line-height:1.18;font-weight:var(--sf-weight-bold);letter-spacing:-.5px}
.sfx-guide-card h3 a{color:var(--sf-primary);text-decoration:none}
.sfx-guide-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.sfx-guide-excerpt{margin:0 0 18px;font-size:18px;line-height:1.5;color:var(--sf-muted-strong)}
.sfx-guide-meta{margin:0 0 20px;font-size:16px;color:var(--sf-color-text-subtle)}
.sfx-guide-link{display:inline-flex;align-items:center;gap:10px;padding-top:18px;min-height:var(--sf-touch-target);
  border-top:1px solid var(--sf-line-soft);color:var(--sf-primary);font-size:18px;font-weight:var(--sf-weight-bold);text-decoration:none;position:relative;z-index:2}
.sfx-guide-card:hover .sfx-guide-link{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1000px){
  .sfx-guide-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .sfx-guide-card h3{font-size:24px}
}
@media(max-width:600px){
  .sfx-guide-body{padding:22px 20px 20px}
  .sfx-guide-card h3{font-size:22px}
  .sfx-guide-excerpt{font-size:16px}
  .sfx-guide-meta{font-size:14px}
  .sfx-guide-link{font-size:16px}
  .sfx-guide-badge{top:16px;left:16px;padding:7px 14px;font-size:12px}
}/* === Claude: lättare produktkort + badge över bilden === */
.sfx-product-grid .sfx-card.sfx-product, /* === Claude: lättare produktkort + badge över bilden === */
.sfx-feed-track .sfx-card.sfx-product{padding:12px 12px 14px;border-radius:var(--sf-radius-card)}
.sfx-card-media{margin-bottom:14px;border-radius:var(--sf-radius-media);isolation:isolate}
.sfx-card-media img{position:relative;z-index:1;padding:14px}
.sfx-card-badge{z-index:3;top:12px;left:12px;padding:6px 13px;font-size:12.5px;font-weight:var(--sf-weight-bold);letter-spacing:.2px}.sfx-product-grid .sfx-card.sfx-product h3, .sfx-feed-track .sfx-card.sfx-product h3{margin:0 0 4px;font-size:19px;line-height:1.25}
.sfx-card-sub{margin:0 0 6px;font-size:14px}
.sfx-card-rating{margin:0 0 10px;font-size:13px}
.sfx-card-rating .sfx-star{font-size:15px}
.sfx-card-price{margin:0 0 1px;gap:6px}
.sfx-card-from{font-size:15px}
.sfx-card-price strong,.sfx-card-price .amount{font-size:23px;letter-spacing:-.3px}
.sfx-card-unit{margin:0 0 12px;font-size:13px}
.sfx-product .sfx-card-cta{min-height:46px;border-radius:var(--sf-radius-control);font-size:15px;gap:10px}

/* guidekort: rätt rubrikstorlek trots temats regler */
.sfx-guide-grid .sfx-card.sfx-guide-card h3{font-size:24px;line-height:1.2;margin:0 0 12px}
.sfx-guide-grid .sfx-card.sfx-guide-card .sfx-guide-excerpt{font-size:var(--sf-text-body)}
@media(max-width:1200px){.sfx-guide-grid .sfx-card.sfx-guide-card h3{font-size:21px}}
@media(max-width:600px){
  .sfx-product-grid .sfx-card.sfx-product h3{font-size:16px}
  .sfx-card-price strong,.sfx-card-price .amount{font-size:20px}
  .sfx-product .sfx-card-cta{min-height:var(--sf-touch-target);font-size:14px}
}

/* === Claude: jämna guidekort, länken alltid i botten === */
.sfx-guide-grid{align-items:stretch}
.sfx-guide-grid .sfx-card.sfx-guide-card{height:100%}
.sfx-guide-card .sfx-guide-body{flex:1 1 auto}
.sfx-guide-grid .sfx-card.sfx-guide-card .sfx-guide-meta{margin-top:auto;margin-bottom:18px}
.sfx-guide-grid .sfx-card.sfx-guide-card .sfx-guide-link{margin-top:0}

/* === Claude: trust-rad utan klickkänsla, mindre luft === */
.sfs-trust{padding-top:15px!important;padding-bottom:26px!important}
.sfs-trust-item,.sfs-trust-item *{cursor:default;pointer-events:none}
.sfs-trust-item{transition:none;transform:none!important;box-shadow:none!important}
.sfs-trust + *,.sfs-trust{margin-block:0}
/* GeneratePress ger .entry-content 2em overmarginal eftersom den tomma entry-header ligger fore: hero ska ligga dikt mot headern */
body.home .entry-content{margin-top:0}
body.home .entry-content > .wp-block-group:has(.sfs-trust){margin-block:0}
body.home .entry-content > .wp-block-group:has(#utvalda-produkter){margin-top:0}
#utvalda-produkter{padding-top:34px}

/* === Claude: badge över bilden även vid hovring (guidekort) === */
.sfx-guide-card .sfx-guide-image{isolation:isolate}
.sfx-guide-card .sfx-guide-image img{position:relative;z-index:1}
.sfx-guide-badge{z-index:3}/* === Claude: omdömen – tydligare att flödet rullar === */


/* === Claude: visa karusellens pilar === */


/* === Claude: alla omdömen i flödet, inga dolda kort === */


/* === Claude: finjustering mot mockup (ljusare styckpris, mer luft) === */
.sfx-product-grid .sfx-card.sfx-product, mer luft) === */
.sfx-feed-track .sfx-card.sfx-product{padding:16px 16px 18px}
.sfx-card-media{margin-bottom:18px}.sfx-product-grid .sfx-card.sfx-product h3, .sfx-feed-track .sfx-card.sfx-product h3{font-size:22px;margin:0 0 7px;letter-spacing:-.4px}
.sfx-card-sub{font-size:15px;color:var(--sf-color-text-subtle);margin:0 0 12px}
.sfx-card-rating{margin:0 0 14px;font-size:14px}
.sfx-card-rating .sfx-star{font-size:16px}
.sfx-card-price{margin:0 0 5px;gap:7px}
.sfx-card-from{font-size:16px;color:var(--sf-color-text-faint)}
.sfx-card-price strong,.sfx-card-price .amount{font-size:26px}
.sfx-card-unit{font-size:14px;color:var(--sf-color-text-faint);margin:0 0 18px}
.sfx-product .sfx-card-cta{min-height:var(--sf-button-height);font-size:16px;border-radius:var(--sf-radius-media)}

/* === Claude: snap som inte blockerar mjuk autoscroll === */


/* === Claude: ingen snap på desktop, så autoscroll fungerar === */

/* === Claude: omdömeskarusell – mjuka kanter så flödet tonar ut === */
@media(min-width:900px){
  .sr-root.sr-carousel .sr-viewport{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}
}

/* === Claude: megameny === */
.sf-header .sf-panel.sf-mega{display:grid;grid-template-columns:288px minmax(0,1fr);gap:0;padding:0;overflow:hidden;
  border-radius:0 0 14px 14px;box-shadow:0 26px 48px -30px color-mix(in srgb,var(--sf-shadow-color) 34%,transparent);max-height:min(640px,calc(100dvh - 150px))}
.sf-header .sf-mega-rail{display:flex;flex-direction:column;background:var(--sf-surface);padding:30px 20px 26px;border-right:1px solid var(--sf-border)}
.sf-header .sf-mega-rail-title{margin:0 0 16px;padding:0 12px;color:var(--sf-primary);font-size:17px;font-weight:var(--sf-weight-heading);letter-spacing:-.2px}
.sf-header .sf-mega-tabs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.sf-header .sf-mega-tabs>li{margin:0;padding:0}
.sf-header .sf-mega-tab{display:flex;align-items:center;gap:12px;min-height:var(--sf-control-height);padding:10px 12px;border-radius:9px;
  color:var(--sf-primary);font-size:15px;font-weight:var(--sf-weight-medium);line-height:1.35;text-decoration:none}
.sf-header .sf-mega-tab>span{flex:1 1 auto;min-width:0}
.sf-header .sf-mega-tab .sf-mega-icon{flex:0 0 auto;color:var(--sf-color-text-soft)}
.sf-header .sf-mega-tab .sf-mega-icon:last-child{width:16px;height:16px;color:var(--sf-color-icon-faint)}
.sf-header .sf-mega-tab:hover,.sf-header .sf-mega-tab:focus-visible{background:var(--sf-bg);text-decoration:none}
.sf-header .sf-mega-tab.is-active{background:var(--sf-bg);font-weight:var(--sf-weight-ui);box-shadow:inset 3px 0 0 var(--sf-hero-cta)}
.sf-header .sf-mega-tab.is-active .sf-mega-icon{color:var(--sf-hero-cta)}
.sf-header .sf-mega-tab.is-active .sf-mega-icon:last-child{color:var(--sf-color-icon-faint)}
.sf-header .sf-mega-tabs-extra{margin-top:16px;padding-top:16px;border-top:1px solid var(--sf-border)}

.sf-header .sf-mega-panes{padding:30px 34px 34px;background:var(--sf-bg);min-width:0;overflow-y:auto}
.sf-header .sf-mega-pane{display:none}
.sf-header .sf-mega-pane.is-active{display:block}
.sf-header .sf-mega-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 20px}
.sf-header .sf-mega-head p.sf-mega-title{margin:0;font-family:inherit;font-size:22px;font-weight:var(--sf-weight-heading);letter-spacing:-.4px;line-height:1.25;color:var(--sf-primary)}
.sf-header .sf-mega-head p{margin:6px 0 0;color:var(--sf-muted);font-size:14px;line-height:1.6}
.sf-header .sf-mega-all{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:4px 0;
  color:var(--sf-primary);font-size:14px;font-weight:var(--sf-weight-ui);text-decoration:none;border-bottom:1px solid var(--sf-border)}
.sf-header .sf-mega-all .sf-mega-icon{width:15px;height:15px}
.sf-header .sf-mega-all:hover{border-bottom-color:var(--sf-primary);text-decoration:none}

.sf-header .sf-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.sf-header .sf-mega-grid>li{margin:0;padding:0}
.sf-header .sf-mega-card{display:flex;align-items:center;gap:14px;height:100%;padding:12px;border:1px solid var(--sf-border);
  border-radius:11px;background:var(--sf-bg);color:var(--sf-primary);text-decoration:none}
.sf-header .sf-mega-card:hover{border-color:var(--sf-line-field);background:var(--sf-surface);text-decoration:none}
.sf-header .sf-mega-card-media{display:flex;align-items:center;justify-content:center;flex:0 0 56px;width:56px;height:56px;
  border-radius:9px;background:var(--sf-surface-media);overflow:hidden}
.sf-header .sf-mega-card-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sf-header .sf-mega-card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.sf-header .sf-mega-card-name{font-size:15px;font-weight:var(--sf-weight-ui);line-height:1.3}
.sf-header .sf-mega-card-sub{color:var(--sf-muted);font-size:13px;line-height:1.35;font-weight:var(--sf-weight-body)}

@media(max-width:1150px){
  .sf-header .sf-panel.sf-mega{display:block;padding:4px 0 16px;box-shadow:none;border-radius:0;max-height:none;overflow:visible}
  .sf-header .sf-mega-rail{padding:0 0 12px;background:transparent;border-right:0;border-bottom:1px solid var(--sf-border)}
  .sf-header .sf-mega-rail-title{padding:0;font-size:14px}
  .sf-header .sf-mega-tab{min-height:var(--sf-touch-target);padding:8px 0}
  .sf-header .sf-mega-tab.is-active{background:transparent;box-shadow:none}
  .sf-header .sf-mega-panes{padding:16px 0 0;overflow:visible}
  .sf-header .sf-mega-pane,.sf-header .sf-mega-pane.is-active{display:block}
  .sf-header .sf-mega-pane+.sf-mega-pane{margin-top:22px;padding-top:20px;border-top:1px solid var(--sf-border)}
  .sf-header .sf-mega-head{display:block;margin-bottom:14px}
  .sf-header .sf-mega-head p.sf-mega-title{font-size:18px}
  .sf-header .sf-mega-all{margin-top:10px}
  .sf-header .sf-mega-grid{grid-template-columns:1fr;gap:8px}
  .sf-header .sf-mega-card{padding:10px}
  .sf-header .sf-mega-card-media{flex-basis:46px;width:46px;height:46px}
}

/* === Claude: footerns kolumnrubriker som paragrafer === */
.sfs-footer .sfs-footer-heading{color:var(--sf-on-primary);font-size:21px;font-weight:var(--sf-weight-ui);line-height:1.3;margin:0 0 25px;letter-spacing:-.015em}
@media(max-width:600px){.sfs-footer .sfs-footer-heading{font-size:18px;margin-bottom:16px}}

/* Megameny utan undergrupper, t.ex. guider */
.sf-header .sf-panel.sf-mega-flat{display:block;padding:0}
.sf-header .sf-mega-flat .sf-mega-panes{padding:30px 34px 34px}
.sf-header .sf-mega-flat .sf-mega-card{align-items:flex-start;min-height:74px;padding:14px 16px}
.sf-header .sf-mega-flat .sf-mega-card-sub{margin-top:2px}
@media(max-width:1150px){
  .sf-header .sf-panel.sf-mega-flat{padding:4px 0 16px}
  .sf-header .sf-mega-flat .sf-mega-panes{padding:8px 0 0}
}

/* Megameny: två kolumner i surfplatteläge */
@media(min-width:700px) and (max-width:1150px){
  .sf-header .sf-mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* === Claude: korten måste vara positionerade, annars täcker deras klickyta halva sidan === */
.sfx-card,.sfx-product,.sfx-guide-card{position:relative}

/* === Claude: sökresultatsidan === */
.sfx-search-page{max-width:var(--sf-container);margin:0 auto;padding:56px 28px 72px}
.sfx-search-head{margin:0 0 40px}
.sfx-search-head h1{margin:0 0 8px;font-size:clamp(30px,3.4vw,44px);line-height:1.15;letter-spacing:-1px;color:var(--sf-primary)}
.sfx-search-count{margin:0 0 22px;color:var(--sf-muted);font-size:15px}
.sfx-search-form{display:flex;gap:10px;max-width:560px}
.sfx-search-form input{flex:1 1 auto;min-height:50px;padding:12px 18px;border:1px solid var(--sf-line);border-radius:26px;background:var(--sf-bg);font:inherit;font-size:16px}
.sfx-search-form input:focus{outline:2px solid var(--sf-primary);outline-offset:1px}
.sfx-search-form button{min-height:50px;padding:12px 26px;border:0;border-radius:26px;background:var(--sf-primary);color:var(--sf-on-primary);font:inherit;font-size:15px;font-weight:var(--sf-weight-ui);cursor:pointer}
.sfx-search-section{margin:0 0 52px}
.sfx-search-section>h2{margin:0 0 20px;font-size:22px;font-weight:var(--sf-weight-heading);letter-spacing:-.3px;color:var(--sf-primary)}
.sfx-search-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.sfx-search-list>li{margin:0;padding:18px 0;border-bottom:1px solid var(--sf-line)}
.sfx-search-list a{font-size:19px;font-weight:var(--sf-weight-ui);color:var(--sf-primary);text-decoration:none}
.sfx-search-list a:hover{text-decoration:underline;text-underline-offset:4px}
.sfx-search-list p{margin:6px 0 0;color:var(--sf-muted);font-size:15px;line-height:1.65}
.sfx-search-tom{padding:34px 0 10px;color:var(--sf-muted);font-size:var(--sf-text-body);line-height:1.7}
.sfx-search-alla{display:inline-flex;gap:8px;color:var(--sf-primary);font-weight:var(--sf-weight-ui);text-decoration:none;border-bottom:1px solid var(--sf-line);padding:4px 0}
@media(max-width:600px){
  .sfx-search-page{padding:36px 20px 52px}
  .sfx-search-form{flex-direction:column}
  .sfx-search-section{margin-bottom:38px}
}

/* === Claude: direktsök med mörk bakgrund === */
.sfx-search-overlay{position:fixed;inset:0;z-index:120;background:var(--sf-color-overlay);opacity:0;
  transition:opacity .18s ease;backdrop-filter:saturate(.9) blur(1px)}
.sfx-search-overlay.is-on{opacity:1}
body.sfx-sok-oppen .sf-header{z-index:130}
body.sfx-sok-oppen .sfx-search{z-index:131}
.sfx-search{position:relative}
.sfx-suggest{position:absolute;top:calc(100% + 10px);right:0;left:auto;width:min(460px,calc(100vw - 32px));z-index:132;max-height:min(70vh,560px);
  overflow-y:auto;padding:10px;border:1px solid var(--sf-line);border-radius:14px;background:var(--sf-bg);
  box-shadow:0 26px 54px -26px color-mix(in srgb,var(--sf-shadow-color) 45%,transparent)}
.sfx-suggest[hidden]{display:none}
.sfx-suggest ul{margin:0 0 6px;padding:0;list-style:none}
.sfx-suggest li{margin:0}
.sfx-suggest-rubrik{margin:8px 10px 6px;color:var(--sf-muted);font-size:11px;font-weight:var(--sf-weight-heading);
  letter-spacing:1.4px;text-transform:uppercase}
.sfx-suggest a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;
  color:var(--sf-primary);text-decoration:none}
.sfx-suggest a:hover,.sfx-suggest a.is-vald{background:var(--sf-surface)}
.sfx-suggest-bild{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;
  border-radius:var(--sf-radius-field);background:var(--sf-surface-media);overflow:hidden}
.sfx-suggest-bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sfx-suggest-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sfx-suggest-titel{font-size:15px;font-weight:var(--sf-weight-ui);line-height:1.3}
.sfx-suggest-under{color:var(--sf-muted);font-size:12.5px;line-height:1.3;font-weight:var(--sf-weight-body)}
.sfx-suggest-pris{flex:0 0 auto;font-size:14px;font-weight:var(--sf-weight-ui);white-space:nowrap}
.sfx-suggest-sida .sfx-suggest-titel{font-weight:var(--sf-weight-medium);font-size:14.5px}
.sfx-suggest-inget,.sfx-suggest-laddar{margin:0;padding:16px 12px;color:var(--sf-muted);font-size:14px;line-height:1.6}
.sfx-suggest-alla{justify-content:center;margin-top:4px;padding:12px 10px;border-top:1px solid var(--sf-line);
  border-radius:0 0 9px 9px;font-size:14px;font-weight:var(--sf-weight-ui)}
@media(max-width:768px){
  .sfx-suggest{width:100%;left:0;right:0;max-height:min(58vh,420px)}
  .sfx-suggest-bild{flex-basis:38px;width:38px;height:38px}
  .sfx-suggest a{padding:10px 8px}
  .sfx-suggest-titel{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){.sfx-search-overlay{transition:none}}/* === Claude: produktkortets typografi enligt mockup === */
.sfx-product-grid .sfx-card.sfx-product h3, /* === Claude: produktkortets typografi enligt mockup === */
.sfx-feed-track .sfx-card.sfx-product h3{font-size:18px;line-height:1.3;font-weight:var(--sf-weight-heading);letter-spacing:-.2px;margin:0 0 6px}.sfx-product-grid .sfx-card.sfx-product h3 a, .sfx-feed-track .sfx-card.sfx-product h3 a{font-weight:inherit}.sfx-product-grid .sfx-card.sfx-product .sfx-card-price, .sfx-feed-track .sfx-card.sfx-product .sfx-card-price{line-height:1.2;margin:0}.sfx-product-grid .sfx-card.sfx-product .sfx-card-price strong, .sfx-feed-track .sfx-card.sfx-product .sfx-card-price strong, .sfx-product-grid .sfx-card.sfx-product .sfx-card-price .amount, .sfx-feed-track .sfx-card.sfx-product .sfx-card-price .amount{font-size:22px;letter-spacing:-.3px}.sfx-product-grid .sfx-card.sfx-product .sfx-card-from, .sfx-feed-track .sfx-card.sfx-product .sfx-card-from{font-size:15px}.sfx-product-grid .sfx-card.sfx-product .sfx-card-unit, .sfx-feed-track .sfx-card.sfx-product .sfx-card-unit{margin:4px 0 24px;font-size:14px;line-height:1.4;color:var(--sf-color-text-faint)}.sfx-product-grid .sfx-card.sfx-product .sfx-card-unit .amount, .sfx-feed-track .sfx-card.sfx-product .sfx-card-unit .amount, .sfx-product-grid .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-currencySymbol, .sfx-feed-track .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-currencySymbol{
  color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit}
@media(max-width:600px){
  .sfx-product-grid .sfx-card.sfx-product h3{font-size:16px}.sfx-product-grid .sfx-card.sfx-product .sfx-card-price strong, .sfx-feed-track .sfx-card.sfx-product .sfx-card-price strong, .sfx-product-grid .sfx-card.sfx-product .sfx-card-price .amount, .sfx-feed-track .sfx-card.sfx-product .sfx-card-price .amount{font-size:20px}.sfx-product-grid .sfx-card.sfx-product .sfx-card-from, .sfx-feed-track .sfx-card.sfx-product .sfx-card-from{font-size:13px}.sfx-product-grid .sfx-card.sfx-product .sfx-card-unit, .sfx-feed-track .sfx-card.sfx-product .sfx-card-unit{font-size:13px;margin:3px 0 16px}
}/* Styckpriset ska vara helt ljust – temat tvingar annars fram mörk sifferfärg */
.sfx-product-grid .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-amount, /* Styckpriset ska vara helt ljust – temat tvingar annars fram mörk sifferfärg */
.sfx-feed-track .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-amount, .sfx-product-grid .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-currencySymbol, .sfx-feed-track .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-currencySymbol{
  color:var(--sf-color-text-faint)!important;font-weight:var(--sf-weight-body)!important}

/* Sökrutan: kantigare form som matchar övriga sajten */
.sfx-search input[type=search]{border-radius:var(--sf-radius-field)}
.sfx-search button{border-radius:var(--sf-radius-button)}
.sfx-suggest{border-radius:var(--sf-radius-control)}
.sfx-suggest-alla{border-radius:0 0 8px 8px}

/* === Claude: butikslistningen – samma rutnät som startsidan === */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sfx-gap);margin:0 0 40px;padding:0;list-style:none;float:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto !important;float:none !important;
  margin:0 !important;padding:0;display:flex;clear:none}
.woocommerce ul.products li.product .sfx-card{width:100%}
.woocommerce ul.products li.product::before,.woocommerce ul.products li.product::after{display:none}
.woocommerce-result-count,.woocommerce-ordering{margin-bottom:24px}
@media(max-width:1100px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.woocommerce ul.products,.woocommerce-page ul.products{gap:14px}}

/* Kortstilarna gäller även utanför startsidans rutnät */
.woocommerce ul.products .sfx-card.sfx-product h3{font-size:18px;line-height:1.3;font-weight:var(--sf-weight-heading);letter-spacing:-.2px;margin:0 0 6px}
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-price{line-height:1.2;margin:0}
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-price strong,
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-price .amount{font-size:22px;letter-spacing:-.3px}
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-from{font-size:15px}
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-unit{margin:4px 0 24px;font-size:14px;line-height:1.4}
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-amount,
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-unit .woocommerce-Price-currencySymbol{
  color:var(--sf-color-text-faint)!important;font-weight:var(--sf-weight-body)!important}

/* WooCommerce centrerar och understryker i slingan – korten ska se ut som på startsidan */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{text-align:left;border:0;background:none;box-shadow:none}
.woocommerce ul.products li.product:hover{box-shadow:none;transform:none}
.woocommerce ul.products .sfx-card.sfx-product,
.woocommerce ul.products .sfx-card.sfx-product h3,
.woocommerce ul.products .sfx-card.sfx-product p{text-align:left}
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-cta{text-align:center}
.woocommerce ul.products .sfx-card.sfx-product a,
.woocommerce ul.products .sfx-card.sfx-product h3 a{text-decoration:none}
.woocommerce ul.products .sfx-card.sfx-product h3 a:hover{text-decoration:none}
.woocommerce ul.products .sfx-card.sfx-product .sfx-card-rating a{text-decoration:underline;text-underline-offset:3px}
.woocommerce ul.products li.product .sfx-card-media img{width:100%;height:100%;max-width:none;object-fit:contain;margin:0;padding:0}

/* Temats brödtextlänkregel träffar korten i butiksslingan eftersom de ligger i en <li> */
body .entry-content li.product .sfx-card.sfx-card.sfx-product h3 a{color:var(--sf-primary)!important;text-decoration:none!important}
body .entry-content li.product .sfx-card.sfx-card.sfx-product .sfx-card-cta{color:var(--sf-on-primary)!important;text-decoration:none!important}
body .entry-content li.product .sfx-card.sfx-card.sfx-product .sfx-card-rating a{color:var(--sf-muted)!important}

/* Kortet och dess innehåll ska alltid räkna padding inuti höjden. I WooCommerce-
   sammanhanget ärvs annars content-box och knappen blir 24 px för hög. */
.sfx-card,.sfx-card *,.sfx-card *::before,.sfx-card *::after{box-sizing:border-box}

/* Kortet ska fylla hela li:n så knapparna hamnar i linje i varje rad */
.woocommerce ul.products.sfx-product-grid>li.product{align-items:stretch}
.woocommerce ul.products.sfx-product-grid>li.product>.sfx-card{width:100%;height:100%}

/* Knappen i produktkortet: håll texten på en rad i mobilens tvåkolumnsläge */
@media(max-width:600px){
  .sfx-product-grid .sfx-card.sfx-product .sfx-card-cta,
  .woocommerce ul.products .sfx-card.sfx-product .sfx-card-cta{
    min-height:var(--sf-control-height);padding:10px 12px;font-size:14px;gap:6px;white-space:nowrap;border-radius:var(--sf-radius-control)}
}

/* Relaterade produkter fick 50 px gap från WooCommerce – samma avstånd som butiken i stället */
.woocommerce .related ul.products.sfx-product-grid,
.woocommerce .up-sells ul.products.sfx-product-grid,
.woocommerce .cross-sells ul.products.sfx-product-grid{gap:var(--sfx-gap)}

/* === Claude: omdömessammanfattning på produktsidan === */
.sfx-review-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;
  margin:0 0 32px;padding:28px 30px;border:1px solid var(--sf-line);border-radius:14px;background:var(--sf-bg)}
.sfx-review-score{text-align:left}
.sfx-review-big{margin:0;font-size:44px;font-weight:var(--sf-weight-bold);line-height:1;letter-spacing:-1.5px;color:var(--sf-primary)}
.sfx-review-big span{font-size:18px;font-weight:var(--sf-weight-body);color:var(--sf-muted);letter-spacing:0}
.sfx-review-stars{margin:10px 0 6px;font-size:17px}
.sfx-review-count{margin:0;color:var(--sf-muted);font-size:14px}
.sfx-review-bars{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.sfx-review-bars li{display:flex;align-items:center;gap:12px;margin:0}
.sfx-review-level{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-width:34px;
  color:var(--sf-ink);font-size:13px;font-weight:var(--sf-weight-ui)}
.sfx-review-level .sfx-star{color:var(--sf-color-star-alt)}
.sfx-review-bar{flex:1 1 auto;height:8px;border-radius:99px;background:var(--sf-surface-track);overflow:hidden}
.sfx-review-bar>span{display:block;height:100%;border-radius:99px;background:var(--sf-color-star-alt)}
.sfx-review-num{flex:0 0 auto;min-width:26px;text-align:right;color:var(--sf-muted);font-size:13px}
.sfx-review-tom{margin:0 0 26px;padding:22px 24px;border:1px solid var(--sf-line);border-radius:14px;
  background:var(--sf-surface)}
.sfx-review-tom p{margin:0;color:var(--sf-muted);font-size:15px;line-height:1.7}
@media(max-width:700px){
  .sfx-review-summary{grid-template-columns:1fr;gap:24px;padding:22px}
  .sfx-review-big{font-size:36px}
}

/* === Claude: produktkort v2 – vit bildyta, löftesrad, pris och knapp på samma rad === */
.sfx-card.sfx-product{padding:16px 16px 16px;gap:0}
.sfx-card.sfx-product .sfx-card-media{background:var(--sf-bg);border:0;border-radius:var(--sf-radius-control);margin:0 0 14px;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:6px}
.sfx-card.sfx-product .sfx-card-media img{width:100%;height:100%;object-fit:contain}.sfx-product-grid .sfx-card.sfx-product h3, .sfx-feed-track .sfx-card.sfx-product h3, .woocommerce ul.products .sfx-card.sfx-product h3{margin:0 0 4px}
.sfx-card.sfx-product .sfx-card-sub{margin:0 0 8px}
.sfx-card.sfx-product .sfx-card-rating{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px}
.sfx-card-score{font-weight:var(--sf-weight-ui);color:var(--sf-ink)}
.sfx-card.sfx-product .sfx-card-rating a{color:var(--sf-muted);text-decoration:none}
.sfx-card.sfx-product .sfx-card-rating a:hover{text-decoration:underline;text-underline-offset:3px}

.sfx-card-perks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 14px;padding:0;list-style:none}
.sfx-card-perks li{display:flex;align-items:center;gap:6px;margin:0;color:var(--sf-muted);font-size:12.5px;line-height:1.3}
.sfx-card-perks .sfs-icon{width:15px;height:15px;flex:0 0 15px;color:var(--sf-color-text-faint)}

.sfx-card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:8px}
.sfx-card-pricebox{display:flex;flex-direction:column;min-width:0}
.sfx-card.sfx-product .sfx-card-foot .sfx-card-price{margin:0;line-height:1.15}
.sfx-card.sfx-product .sfx-card-foot .sfx-card-unit{margin:3px 0 0;font-size:13px;line-height:1.3}
.sfx-product .sfx-card-cta{flex:0 0 auto;min-height:var(--sf-control-height);padding:12px 22px;font-size:15px;font-weight:var(--sf-weight-ui);
  border-radius:var(--sf-radius-control);gap:10px;white-space:nowrap;align-self:center}

@media(max-width:600px){
  .sfx-card.sfx-product{padding:14px}
  .sfx-card-perks{gap:4px 12px;margin-bottom:12px}
  .sfx-card-perks li{font-size:11.5px}
  .sfx-card-perks .sfs-icon{width:13px;height:13px;flex-basis:13px}
  .sfx-card-foot{flex-direction:column;align-items:stretch;gap:10px}
  .sfx-product .sfx-card-cta{width:100%;justify-content:center;min-height:var(--sf-touch-target)}.sfx-product-grid .sfx-card.sfx-product .sfx-card-unit, .sfx-feed-track .sfx-card.sfx-product .sfx-card-unit, .woocommerce ul.products .sfx-card.sfx-product .sfx-card-unit{margin:3px 0 0}
}

/* === Claude: Om Potenshuset === */
.sfx-about{max-width:760px;margin:0 auto;text-align:center}
.sfx-about-eyebrow{margin:0 0 12px;color:var(--sf-muted);font-size:var(--sf-text-eyebrow);font-weight:var(--sf-weight-ui);letter-spacing:3px;text-transform:uppercase}
.sfx-about-title{margin:0 0 18px;font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-1px;color:var(--sf-primary)}
.sfx-about-line{display:block;width:64px;height:2px;margin:0 auto 22px;background:var(--sf-hero-cta);border-radius:2px}
.sfx-about-text{margin:0;color:var(--sf-muted);font-size:var(--sf-text-body);line-height:1.8}
@media(max-width:600px){.sfx-about-text{font-size:16px}}

/* === Claude: sortimentssektion med flikar === */
.sfx-shoptabs{display:grid;grid-template-columns:266px minmax(0,1fr);gap:48px;align-items:start}
.sfx-shoptabs-eyebrow{margin:0 0 10px;color:var(--sf-muted);font-size:var(--sf-text-eyebrow);font-weight:var(--sf-weight-ui);letter-spacing:3px;text-transform:uppercase}
.sfx-shoptabs-title{margin:0 0 26px;font-size:var(--sf-text-h2-content);line-height:1.2;letter-spacing:-.8px;color:var(--sf-primary)}
.sfx-shoptabs-nav{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.sfx-shoptabs-nav li{margin:0}
.sfx-shoptab-btn{display:flex;align-items:center;width:100%;min-height:var(--sf-control-height);padding:11px 16px;border:0;
  border-left:3px solid transparent;border-radius:0 8px 8px 0;background:transparent;color:var(--sf-ink);
  font:inherit;font-size:16px;font-weight:var(--sf-weight-medium);text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease}
.sfx-shoptab-btn:hover{background:var(--sf-surface);color:var(--sf-primary)}
.sfx-shoptab-btn.is-active{background:var(--sf-surface);border-left-color:var(--sf-hero-cta);
  color:var(--sf-primary);font-weight:var(--sf-weight-ui)}
.sfx-shoptab-btn:focus-visible{outline:2px solid var(--sf-primary);outline-offset:2px}

.sfx-shoptab[hidden]{display:none}
.sfx-shoptab-title{margin:0 0 8px;font-size:24px;line-height:1.2;letter-spacing:-.5px;color:var(--sf-primary)}
.sfx-shoptab-intro{margin:0 0 24px;max-width:66ch;color:var(--sf-muted);font-size:16px;line-height:1.7}
.sfx-shoptab-more{margin:20px 0 0}
.sfx-shoptab-more a{color:var(--sf-primary);font-size:15px;font-weight:var(--sf-weight-ui);text-decoration:none;
  border-bottom:1px solid var(--sf-line);padding-bottom:3px}
.sfx-shoptab-more a:hover{border-bottom-color:var(--sf-primary)}

.sfx-feed{position:relative}
.sfx-feed-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;padding:2px}
.sfx-feed-viewport::-webkit-scrollbar{display:none}
.sfx-feed-viewport:focus-visible{outline:2px solid var(--sf-primary);outline-offset:3px}
.sfx-feed-track{display:flex;gap:20px;margin:0;padding:0;list-style:none}
.sfx-feed-track>li{margin:0;flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;display:flex}
.sfx-feed-track>li>.sfx-card{width:100%}
.sfx-feed-arrow{position:absolute;top:120px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:1px solid var(--sf-line);border-radius:50%;background:var(--sf-bg);
  color:var(--sf-primary);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 6px 18px -10px color-mix(in srgb,var(--sf-shadow-color) 40%,transparent)}
.sfx-feed-arrow:hover{background:var(--sf-surface)}
.sfx-feed-arrow[disabled]{opacity:.35;cursor:default}
.sfx-feed-arrow[hidden]{display:none}
.sfx-feed-prev{left:-18px}
.sfx-feed-next{right:-18px}

@media(max-width:1000px){
  .sfx-shoptabs{grid-template-columns:1fr;gap:26px}
  .sfx-shoptabs-nav{flex-direction:row;flex-wrap:wrap;gap:8px}
  .sfx-shoptab-btn{width:auto;min-height:var(--sf-touch-target);padding:9px 16px;border-left:0;border:1px solid var(--sf-line);border-radius:99px}
  .sfx-shoptab-btn.is-active{border-color:var(--sf-primary);background:var(--sf-primary);color:var(--sf-on-primary)}
  .sfx-shoptabs-title{margin-bottom:18px}
  .sfx-feed-track>li{flex-basis:calc((100% - 20px)/2)}
  .sfx-feed-prev{left:-6px}
  .sfx-feed-next{right:-6px}
}
@media(max-width:600px){
  .sfx-feed-track>li{flex-basis:min(72vw,260px)}
  .sfx-feed-arrow{top:96px;width:36px;height:36px}
  .sfx-shoptab-title{font-size:21px}
  .sfx-shoptab-intro{font-size:15px;margin-bottom:18px}
}

/* Korten i flödet ligger i <li>, så temats brödtextlänkregel träffar dem */
body .entry-content li .sfx-card.sfx-card.sfx-card.sfx-product h3 a{color:var(--sf-primary)!important;text-decoration:none!important}
body .entry-content li .sfx-card.sfx-card.sfx-card.sfx-product .sfx-card-cta{color:var(--sf-on-primary)!important;text-decoration:none!important}
body .entry-content li .sfx-card.sfx-card.sfx-card.sfx-product .sfx-card-rating a{color:var(--sf-muted)!important;text-decoration:none!important}
body .entry-content li .sfx-card.sfx-card.sfx-card.sfx-product .sfx-card-rating a:hover{text-decoration:underline!important}

/* Rubriken ligger över båda kolumnerna, flikarna ensamma i vänsterspalten */
.sfx-shoptabs{display:block}
.sfx-shoptabs-head{margin:0 0 30px}
.sfx-shoptabs-head .sfx-shoptabs-title{margin:0;font-size:clamp(28px,3.2vw,40px);letter-spacing:-1px}
.sfx-shoptabs-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px;align-items:start}
.sfx-shoptabs-rail{position:sticky;top:96px}
@media(max-width:1000px){
  .sfx-shoptabs-body{grid-template-columns:1fr;gap:24px}
  .sfx-shoptabs-rail{position:static}
  .sfx-shoptabs-head{margin-bottom:22px}
}

/* Korten i flödet använder h4 – samma utseende som h3 i rutnätet */
.sfx-feed-track .sfx-card.sfx-product h4{margin:0 0 4px;font-size:18px;line-height:1.3;font-weight:var(--sf-weight-heading);
  letter-spacing:-.2px;font-family:inherit;color:var(--sf-primary)}
.sfx-feed-track .sfx-card.sfx-product h4 a{color:inherit;text-decoration:none;font-weight:inherit}
.sfx-feed-track .sfx-card.sfx-product h4 a::after{content:"";position:absolute;inset:0;z-index:1}
body .entry-content li .sfx-card.sfx-card.sfx-card.sfx-product h4 a{color:var(--sf-primary)!important;text-decoration:none!important}
@media(max-width:600px){.sfx-feed-track .sfx-card.sfx-product h4{font-size:16px}}

/* === Claude: tydlig hovereffekt på kortets knapp (ingen skugga) === */
.sfx-card.sfx-product .sfx-card-cta{
  background:var(--sf-primary);color:var(--sf-on-primary);
  transition:background-color .18s ease,transform .18s ease}
.sfx-card.sfx-product .sfx-card-cta span[aria-hidden]{
  transition:transform .18s ease}
.sfx-card.sfx-product:hover .sfx-card-cta,
.sfx-card.sfx-product:focus-within .sfx-card-cta{
  background:var(--sfx-cta-hover,var(--sf-color-primary-hover))}
.sfx-card.sfx-product:hover .sfx-card-cta span[aria-hidden],
.sfx-card.sfx-product:focus-within .sfx-card-cta span[aria-hidden]{
  transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .sfx-card.sfx-product .sfx-card-cta,
  .sfx-card.sfx-product .sfx-card-cta span[aria-hidden]{transition:none}
  .sfx-card.sfx-product:hover .sfx-card-cta span[aria-hidden]{transform:none}
}

/* === Claude: menyknapparna ska ha samma vikt som menylänkarna ===
   Temats "body :is(button,…){font-weight:var(--sf-weight-ui)!important}" träffar
   knapparna men inte länkarna, därav 500 mot 600. */
body nav.sf-navigation ul.sf-menu > li > button.sf-nav-trigger{font-weight:var(--sf-weight-ui)!important}

/* === Claude: länkar mot mörk bakgrund ===
   Den globala hoverfärgen (--sf-hover) är mörkblå och försvinner mot mörka ytor. */
.sfx-topbar a,.sfx-topbar a:visited{color:var(--sf-on-primary)}
.sfx-topbar a:hover,.sfx-topbar a:focus{color:var(--sf-on-primary);opacity:1;text-decoration:underline;text-underline-offset:4px}
.sfx-topbar a:focus-visible{outline:2px solid var(--sf-on-primary);outline-offset:3px}
.sfs-hero a:not(.wp-block-button__link):not(.sfs-hero-cta),
.sfs-hero a:not(.wp-block-button__link):not(.sfs-hero-cta):visited{color:var(--sf-on-primary)}
.sfs-hero a:not(.wp-block-button__link):not(.sfs-hero-cta):hover{color:var(--sf-on-primary);text-decoration:underline;text-underline-offset:4px}
.sfs-footer a:hover,.sfs-footer a:focus{color:var(--sf-on-primary)!important}

/* ==========================================================================
   INTERAKTIONSLAGER — ett ställe för alla klickbara ytor
   Ändra här, inte per komponent. Fyra tillstånd definieras för varje typ:
   vila, hovring, tangentbordsfokus och aktiv.
   Regler: ingen skugga vid hovring, ingen hovringseffekt på ytor utan
   funktion, minst 44 px träffyta, alltid synlig fokusmarkering.
   ========================================================================== */
/* :root-variablerna ligger i storefront-extras/tokens.css */

/* --- 1. Fokus: identisk markering överallt ------------------------------ */
.entry-content a:focus-visible,.entry-content button:focus-visible,
.sf-header a:focus-visible,.sf-header button:focus-visible,
.sfx-topbar a:focus-visible,.sfs-footer a:focus-visible,
.sfx-feed-arrow:focus-visible,.sr-prev:focus-visible,.sr-next:focus-visible,
.sfx-shoptab-btn:focus-visible,.sfs-faq summary:focus-visible{
  outline:2px solid var(--sfx-focus);outline-offset:3px;border-radius:var(--sf-radius-tight)}
.sfx-topbar a:focus-visible,.sfs-footer a:focus-visible{outline-color:var(--sf-on-primary)}

/* --- 2. Textlänkar i löpande text --------------------------------------- */
/* Vila: marinblå med tunn understrykning. Hovring: ljusare blå, tjockare
   linje närmare texten – tydligt utan färgkrock. */
body .entry-content :is(p,li) > a:not(.button):not(.wp-block-button__link):not(.sfs-button):not(.sr-all-link):not(:where(.sfx-btn-outline,.sfx-link-arrow,.sfx-guide-more a,.sfx-section-link a,.sfx-inline-link a,.sfx-guide-link,.sfx-card-cta)):hover{
  color:var(--sfx-navy-hover)!important;text-decoration-thickness:2px;text-underline-offset:3px}

/* --- 3. Pilkantslänkar: "Läs artikeln →", "Visa alla produkter →" -------- */
.sfx-link-arrow,.sfx-guide-link,.sf-mega-all,.sr-all-link,.sfx-section-link > a{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--sf-touch-target);
  color:var(--sfx-navy);font-weight:var(--sf-weight-ui);text-decoration:none;
  transition:color var(--sfx-motion) ease}
.sfx-link-arrow:hover,.sfx-guide-link:hover,.sf-mega-all:hover,.sr-all-link:hover,
.sfx-section-link > a:hover{
  color:var(--sfx-navy-hover);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px}

/* --- 4. Fyllda knappar, marinblå ---------------------------------------- */
.sfx-card-cta,.sf-mobile-toggle,.sfx-search button,
.woocommerce .single_add_to_cart_button,.sfx-sticky-btn{
  background:var(--sfx-navy);color:var(--sf-on-primary);border:0;
  transition:background-color var(--sfx-motion) ease}
.sfx-card.sfx-product:hover .sfx-card-cta,
.sfx-card.sfx-product:focus-within .sfx-card-cta,
.sf-mobile-toggle:hover,.sfx-search button:hover,
.woocommerce .single_add_to_cart_button:hover,.sfx-sticky-btn:hover{
  background:var(--sfx-navy-hover);color:var(--sf-on-primary)}
.sf-mobile-toggle:active,.sfx-search button:active,
.woocommerce .single_add_to_cart_button:active{background:var(--sfx-navy-active)}

/* --- 5. Fyllda knappar, orange accent ----------------------------------- */
.sfs-hero-cta,.sfs-button,.wp-block-button__link:not(.is-style-outline){
  transition:background-color var(--sfx-motion) ease}
.sfs-hero-cta:hover,.sfs-button:hover,.wp-block-button__link:not(.is-style-outline):hover{
  background-color:var(--sfx-accent-hover)!important;color:var(--sf-on-primary)!important}

/* --- 6. Konturknapp: "Alla guider →" ------------------------------------ */
.sfx-guide-more a,.sfx-btn-outline{
  display:inline-flex;align-items:center;gap:10px;min-height:var(--sf-control-height);padding:12px 26px;
  border:1px solid var(--sfx-navy);border-radius:var(--sf-radius-pill);background:transparent;
  color:var(--sfx-navy);font-size:15px;font-weight:var(--sf-weight-ui);
  text-decoration:none!important;
  transition:background-color var(--sfx-motion) ease,color var(--sfx-motion) ease}
body .entry-content .sfx-guide-more a:hover,body .entry-content .sfx-btn-outline:hover,
.sfx-guide-more a:hover,.sfx-btn-outline:hover{
  background:var(--sfx-navy);color:var(--sf-on-primary)!important;text-decoration:none!important}
.sfx-guide-more a:active,.sfx-btn-outline:active{background:var(--sfx-navy-active)}

/* --- 7. Runda pilknappar i karuseller ----------------------------------- */
.sfx-feed-arrow,.sr-prev,.sr-next{transition:background-color var(--sfx-motion) ease,border-color var(--sfx-motion) ease}
.sfx-feed-arrow:hover,.sr-prev:hover,.sr-next:hover{
  background:var(--sf-surface);border-color:var(--sfx-navy);color:var(--sfx-navy)}

/* --- 8. Inga hovringsskuggor eller hopp någonstans ---------------------- */
.entry-content a:hover,.entry-content button:hover,
button:hover,.button:hover,.wp-block-button__link:hover{
  box-shadow:none!important;transform:none!important}

/* --- 9. Respektera reducerad rörelse ------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .sfx-card-cta,.sfs-hero-cta,.sfs-button,.sfx-guide-more a,.sfx-feed-arrow,
  .sr-prev,.sr-next,.sfx-link-arrow,.sfx-guide-link,.sf-mega-all{transition:none}
}

/* ==========================================================================
   TYPOGRAFI OCH RYTM — en skala för hela sidan
   Mätning före: 7 olika brödtextvarianter, 5 olika H2-storlekar och 4 olika
   ögonbrynsstilar. Här definieras skalan på ETT ställe. Komponenter med egen
   typografi (produktkort, omdömen, trustrad, flöden) är undantagna.
   ========================================================================== */

/* --- Sektionsrytm ------------------------------------------------------- */
body .entry-content .sfs-section{padding-block:var(--sf-section-space)}
body .entry-content > .wp-block-group{margin-block:0}
body .entry-content > .wp-block-group + .wp-block-group{margin-top:0}

/* --- Ögonbryn: identiska överallt -------------------------------------- */
body .entry-content .sfs-eyebrow,
body .entry-content .sfx-shoptabs-eyebrow,
body .entry-content .sfx-about-eyebrow,
body .entry-content .sr-eyebrow,
.sr-root .sr-eyebrow{
  margin:0 0 12px;padding:0;
  font-size:var(--sf-text-eyebrow);font-weight:var(--sf-weight-ui);letter-spacing:var(--sf-tracking-eyebrow);line-height:1.4;
  text-transform:uppercase;color:var(--sf-muted)}
/* stapeln framför "Behandling" var en engångsvariant – bort */
body .entry-content .sfx-eyebrow-bar{display:block}
body .entry-content .sfx-eyebrow-bar::before{content:none}

/* --- Rubriker ----------------------------------------------------------- */
body .entry-content .sfs-section h2,
body .entry-content .sfx-about-title,
body .entry-content .sfx-shoptabs-title{
  margin:0 0 14px;
  font-size:var(--sf-text-h2);font-weight:var(--sf-weight-heading);line-height:1.15;
  letter-spacing:-.02em;color:var(--sf-primary)}
body .entry-content .sfs-section h3{
  margin:0 0 10px;font-size:var(--sf-text-h3);font-weight:var(--sf-weight-heading);line-height:1.3;
  letter-spacing:-.01em;color:var(--sf-primary)}

/* --- Brödtext ----------------------------------------------------------- */
body .entry-content .sfs-section :is(p,li):not(:where(
  [class*=eyebrow],
  .sfx-card *, .sfx-card, .sfx-feed *, .sr-root *,
  .sfs-trust *, .sfx-trust *, .sfs-trust-item p, .sfx-topbar *,
  .sfx-search *, .sfs-newsletter-form *, .sfs-consent, .sfx-spec-note
)){
  font-size:var(--sf-text-body);font-weight:var(--sf-weight-body);line-height:var(--sf-leading-body);color:var(--sf-ink)}

/* Ingressen direkt under sektionsrubriken är dämpad, resten är brödtextfärg */
body .entry-content .sfs-section-heading p:not([class*=eyebrow]),
body .entry-content .sfx-shoptab-intro,
body .entry-content .sfx-about-text{
  font-size:var(--sf-text-body);line-height:var(--sf-leading-body);color:var(--sf-muted)}

/* Läsbar radlängd */
body .entry-content .sfs-section-heading{max-width:72ch}
body .entry-content .sfx-ed-copy p,body .entry-content .sfx-prose p{max-width:68ch}

@media(max-width:600px){
  body .entry-content .sfs-section{padding-block:var(--sf-section-space-mobile)}
  body .entry-content .sfs-section :is(p,li):not(:where([class*=eyebrow],.sfx-card *,.sfx-feed *,.sr-root *,.sfs-trust *,.sfx-trust *,.sfx-topbar *,.sfx-search *)){font-size:var(--sf-text-body-mobile)}
  body .entry-content .sfs-section-heading p:not([class*=eyebrow]),
  body .entry-content .sfx-shoptab-intro,body .entry-content .sfx-about-text{font-size:var(--sf-text-body-mobile)}
  body .entry-content .sfs-section h3{font-size:19px}
}

/* ==========================================================================
   STARTSIDAN – mobilrobusthet och kvarvarande layoutfel (2026-09-20)
   Grundregel: rutnät skrivs alltid minmax(0,1fr) så innehåll aldrig kan
   spränga sidbredden; det som inte får plats rullar i en egen sidledsrullare.
   ========================================================================== */
html,body{max-width:100%}
.sfx-shoptabs-body{grid-template-columns:230px minmax(0,1fr)}
.sfx-shoptabs-panes,.sfx-shoptab,.sfx-feed,.sfx-feed-viewport{min-width:0;max-width:100%}
@media(max-width:1000px){
  .sfx-shoptabs-body{grid-template-columns:minmax(0,1fr)}
  .sfx-shoptabs-nav{flex-wrap:wrap}
  .sfx-shoptabs-nav li{flex:0 0 auto}
}
@media(max-width:600px){
  .sfx-feed-track{gap:14px}
  .sfx-feed-track>li{flex-basis:min(78vw,280px)}
  .sfx-feed-arrow{top:calc(39vw + 10px)}
}

/* Trustraden: två kolumner som krymper, text som får radbrytas */
@media(max-width:800px){
  .sfs-trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sfs-trust-item{min-width:0}
  .sfs-trust-item h3{white-space:normal;overflow-wrap:anywhere}
  .sfs-trust-item p{overflow-wrap:anywhere}
}

/* Betygsraden i kortet får radbrytas i stället för att klippas */
.sfx-card.sfx-product .sfx-card-rating{flex-wrap:wrap;row-gap:2px}
@media(max-width:600px){
  .sfx-card.sfx-product .sfx-card-rating{font-size:12px;gap:5px}
  .sfx-card.sfx-product .sfx-card-rating .sfx-star{font-size:13px}
}

/* Stegsektionen: ingen tom yta ovanför ikonerna */
.sfs-step-art{height:auto;min-height:0;margin-bottom:18px;align-items:center}
.sfs-step-art .sfs-step-number{display:none}
.sfs-steps-list .sfs-step:not(:last-child):after{top:27px}
body .entry-content .sfs-section .sfs-section-heading{margin-bottom:36px}
@media(max-width:800px){
  .sfs-steps-list{grid-template-columns:minmax(0,1fr);gap:34px}
  .sfs-steps-list .sfs-step:after{display:none}
}

/* Sektionslänken ("Läs säkerhetsinformationen") är en konturknapp med luft ovanför */
body .entry-content .sfx-section-link{margin:36px 0 0;text-align:center;clear:both}
body .entry-content .sfx-section-link > a{
  display:inline-flex;align-items:center;gap:10px;min-height:var(--sf-control-height);padding:12px 26px;
  border:1px solid var(--sfx-navy);border-radius:var(--sf-radius-pill);border-bottom:1px solid var(--sfx-navy);
  background:transparent;color:var(--sfx-navy);font-size:15px;font-weight:var(--sf-weight-ui);
  text-decoration:none!important;transition:background-color var(--sfx-motion) ease,color var(--sfx-motion) ease}
body .entry-content .sfx-section-link > a:hover,
body .entry-content .sfx-section-link > a:focus-visible{
  background:var(--sfx-navy);color:var(--sf-on-primary)!important;text-decoration:none!important}

/* Nyhetsbrevets samtycke: rutan sitter ihop med sin text */
.sfs-newsletter-form .sfs-consent{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px;text-align:left}
.sfs-newsletter-form .sfs-consent input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;min-width:20px;margin:2px 0 0;padding:0}
.sfs-newsletter-form .sfs-consent > *:not(input){flex:1 1 auto;min-width:0}

/* Karusellpilar: samma utseende på båda, hovring bara på enheter som kan hovra */
.sr-root.sr-carousel .sr-controls .sr-prev,.sr-root.sr-carousel .sr-controls .sr-next,.sfx-feed-arrow{
  background:var(--sf-bg);border:1px solid var(--sf-line);color:var(--sfx-navy)}
@media(hover:none){
  .sfx-feed-arrow:hover,.sr-prev:hover,.sr-next:hover,
  .sr-root.sr-carousel .sr-controls button:hover{background:var(--sf-bg);border-color:var(--sf-line)}
}
@media(max-width:600px){
  .sr-root.sr-carousel .sr-controls{gap:14px;margin-top:20px}
  .sr-root.sr-carousel .sr-controls .sr-pause{display:none}
}

/* === Startsidan, omgång 2 === */
/* Pilkantslänk i löptext ("Läs om orsaker och utredning") – samma stil som övriga, ingen orange linje */
body .entry-content .sfx-inline-link{margin:18px 0 0}
body .entry-content .sfx-inline-link > a{display:inline-flex;align-items:center;gap:8px;min-height:var(--sf-touch-target);
  color:var(--sfx-navy)!important;font-weight:var(--sf-weight-ui);text-decoration:none!important;border:0;
  border-bottom:1px solid var(--sf-line);padding-bottom:2px;transition:color var(--sfx-motion) ease,border-color var(--sfx-motion) ease}
body .entry-content .sfx-inline-link > a:hover{color:var(--sfx-navy-hover)!important;border-bottom-color:var(--sfx-navy-hover)}

/* Jämförelsetabellen: sluten nederkant, läsbar i mobil */
.sfx-compare-table{border-collapse:collapse;width:100%}
.sfx-compare-table tr:last-child th,.sfx-compare-table tr:last-child td{border-bottom:1px solid var(--sf-line)}
@media(max-width:600px){.sfx-compare-table th,.sfx-compare-table td{padding:12px 10px;font-size:14px}}

/* Omdömeskarusellen: mindre luft i mobil, korten klipps inte i kanten */
@media(max-width:600px){
  .sr-root.sr-carousel{padding:40px 20px 32px}
  .sr-root.sr-carousel .sr-section-heading{margin-bottom:24px}
  .sr-root.sr-carousel .sr-viewport{padding:1px}
}
@media(min-width:601px){.sr-root.sr-carousel{padding-block:56px 48px}.sr-root.sr-carousel .sr-section-heading{margin-bottom:36px}}

/* Ikonerna i informationskorten: samma storlek */
.sfx-info-grid .sfx-card .sfs-icon{width:30px;height:30px}

/* === Startsidan, omgång 3 === */
.sfx-compare-wrap{border-bottom:1px solid var(--sf-line)}
.sr-root.sr-carousel .sr-section-heading h2{font-size:var(--sf-text-h2);letter-spacing:-.02em;font-weight:var(--sf-weight-heading);margin:0 0 14px}
.sr-root.sr-carousel .sr-section-heading p:not(.sr-eyebrow){font-size:var(--sf-text-body);line-height:var(--sf-leading-body)}
@media(max-width:600px){.sr-root.sr-carousel .sr-section-heading p:not(.sr-eyebrow){font-size:16px}}

/* === Startsidan, omgång 4 === */
body .entry-content .sfx-section-link > a.sfx-btn-outline:hover,
body .entry-content a.sfx-btn-outline:hover,body .entry-content a.sfx-btn-outline:focus-visible{background:var(--sfx-navy);color:var(--sf-on-primary)!important}
.sfx-compare-wrap .sfx-compare-table tbody tr:last-child > th,
.sfx-compare-wrap .sfx-compare-table tbody tr:last-child > td{border-bottom:1px solid var(--sf-line)}
/* Pilknapparna i flödet syns alltid i mobil när det finns mer att visa */
@media(max-width:600px){
  .sfx-feed-prev{left:-10px}.sfx-feed-next{right:-10px}
  .sfx-feed-arrow{width:40px;height:40px;box-shadow:0 4px 14px -8px color-mix(in srgb,var(--sf-shadow-color) 50%,transparent)}
}

/* === Megamenyn i mobil: dragspel i stället för en lång lista === */
@media(max-width:1150px){
  .sf-header .sf-mega-dragspel .sf-mega-panes{display:none}
  .sf-header .sf-mega-dragspel .sf-mega-rail{border-bottom:0;padding-bottom:4px}
  .sf-header .sf-mega-dragspel .sf-mega-pane,.sf-header .sf-mega-dragspel .sf-mega-pane.is-active{display:none;margin:0;padding:6px 0 14px;border:0}
  .sf-header .sf-mega-dragspel .sf-mega-pane.is-open{display:block}
  .sf-header .sf-mega-dragspel .sf-mega-pane .sf-mega-head{margin:0 0 10px}
  .sf-header .sf-mega-dragspel .sf-mega-pane .sf-mega-title{display:none}
  .sf-header .sf-mega-dragspel .sf-mega-pane .sf-mega-head p{margin:0 0 6px;font-size:13px}
  .sf-header .sf-mega-dragspel .sf-mega-tab{min-height:var(--sf-control-height);border-bottom:1px solid var(--sf-line);border-radius:0}
  .sf-header .sf-mega-dragspel .sf-mega-tab .sf-mega-icon:last-child{transition:transform var(--sf-motion) ease}
  .sf-header .sf-mega-dragspel .sf-mega-tab.is-open .sf-mega-icon:last-child{transform:rotate(90deg)}
  .sf-header .sf-mega-dragspel .sf-mega-tab.is-open{font-weight:var(--sf-weight-ui)}
  .sf-header .sf-navigation{max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain}
}

/* === Produktsidan: relaterade produkter följer samma rutnät som butiken även i mobil === */
@media(max-width:820px){
  .woocommerce .related ul.products.sfx-product-grid,
  .woocommerce .up-sells ul.products.sfx-product-grid,
  .single-product .related ul.products.sfx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px}
}
/* Utrymmet för den fasta köpraden ska ha sidfotens färg, inte en vit remsa */
body.ph-fastrad-synlig{background:var(--sf-primary)}
body.ph-fastrad-synlig .site,body.ph-fastrad-synlig #page{background:var(--sf-bg)}

/* === Flytande huvudmeny: göms vid skroll nedåt, visas vid skroll uppåt === */
.sf-header{position:sticky;top:0;transition:transform .26s ease,box-shadow .2s ease;will-change:transform}
.admin-bar .sf-header{top:32px}
@media(max-width:782px){.admin-bar .sf-header{top:46px}}
@media(max-width:600px){.admin-bar .sf-header{top:0}}
.sf-header.sfx-header-dold{transform:translateY(-101%)}
/* Mobil: jämn luft runt sökfältet, och sökraden viks undan när menyn flyter (nås via sökknappen) */
.sfx-sok-knapp{display:none}
@media(max-width:860px){
  .sfx-search{margin-top:6px}
  .sf-header .sf-header-inner{padding-bottom:13px}
  .sf-header{--sfx-sokrad:0px;clip-path:inset(0 -40px -200vh -40px);transition:transform .26s ease,box-shadow .2s ease,clip-path .22s ease}
  .sf-header.sfx-header-flyter:not(.sfx-sok-visa):not(:has(.sf-mobile-toggle[aria-expanded="true"])):not(:focus-within){clip-path:inset(0 -40px var(--sfx-sokrad) -40px)}
  .sf-header.sfx-header-flyter:not(.sfx-sok-visa):not(:has(.sf-mobile-toggle[aria-expanded="true"])):not(:focus-within)::after{content:"";position:absolute;left:0;right:0;bottom:var(--sfx-sokrad);height:1px;background:var(--sf-line)}
  .sf-header.sfx-header-flyter .sfx-sok-knapp{display:inline-flex;align-items:center;justify-content:center;width:var(--sf-touch-target);height:var(--sf-touch-target);margin-left:auto;padding:0;border:0;border-radius:var(--sf-radius-field);background:transparent;color:var(--sf-primary);cursor:pointer}
  .sf-header.sfx-header-flyter .sfx-sok-knapp + .sf-mobile-toggle{margin-left:0}
  .sf-header .sfx-sok-knapp:focus-visible{outline:2px solid var(--sf-color-primary-hover);outline-offset:2px}
  .sf-header.sfx-sok-visa .sfx-sok-knapp{background:var(--sf-surface)}
}
@media(prefers-reduced-motion:reduce){.sf-header{transition:none}}

.sf-header.sfx-header-flyter{box-shadow:0 1px 0 var(--sf-line),0 10px 24px -20px color-mix(in srgb,var(--sf-shadow-color) 35%,transparent)}
@media(prefers-reduced-motion:reduce){.sf-header{transition:none}}

/* ==========================================================================
   JÄMFÖRELSETABELLEN – tydlig hierarki i stället för kalkylark
   ========================================================================== */
body .entry-content .sfx-compare .sfs-section-heading{margin-bottom:32px}
.sfx-compare-wrap{overflow:visible;border:1px solid var(--sf-line);border-radius:var(--sf-radius-card);background:var(--sf-bg);border-bottom:1px solid var(--sf-line)}
.sfx-compare-wrap .sfx-compare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;table-layout:fixed;margin:0;border:0}
.sfx-compare-wrap .sfx-compare-table th,.sfx-compare-wrap .sfx-compare-table td{
  padding:18px 24px;text-align:left;vertical-align:middle;border:0;border-bottom:1px solid var(--sf-line)}
.sfx-compare-wrap .sfx-compare-table tbody tr:last-child > *{border-bottom:0}

/* första kolumnen: smalare, svagt grå */
.sfx-compare-wrap .sfx-compare-table tbody th,.sfx-compare-wrap .sfx-compare-table thead td{
  width:24%;background:var(--sf-surface-faint);color:var(--sf-primary);font-size:15px;font-weight:var(--sf-weight-ui);
  border-right:1px solid var(--sf-line)}
.sfx-compare-wrap .sfx-compare-table thead td{border-top-left-radius:15px}
.sfx-compare-wrap .sfx-compare-table tbody tr:last-child th{border-bottom-left-radius:15px}

/* diskreta kolumntoner som hjälper ögat följa rätt kolumn */
.sfx-compare-wrap .sfx-compare-col-1{background:var(--sf-surface)}
.sfx-compare-wrap .sfx-compare-col-2{background:var(--sf-surface-warm)}
.sfx-compare-wrap .sfx-compare-table td.sfx-compare-col-1,.sfx-compare-wrap .sfx-compare-table th.sfx-compare-col-1{border-right:1px solid var(--sf-line)}
.sfx-compare-wrap .sfx-compare-table thead th.sfx-compare-col-2{border-top-right-radius:15px}
.sfx-compare-wrap .sfx-compare-table tbody tr:last-child td.sfx-compare-col-2{border-bottom-right-radius:15px}

/* rubrikhuvud per alternativ */
.sfx-compare-wrap .sfx-compare-table thead th{padding:24px;letter-spacing:0;text-transform:none;border-bottom:2px solid var(--sf-primary)}
.sfx-compare-wrap .sfx-compare-table thead td{border-bottom:2px solid var(--sf-primary)}
.sfx-compare-ikon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 12px;
  border-radius:var(--sf-radius-control);background:var(--sf-bg);border:1px solid var(--sf-line);color:var(--sf-primary)}
.sfx-compare-ikon .sfs-icon{width:22px;height:22px}
.sfx-compare-namn{display:block;color:var(--sf-primary);font-size:20px;font-weight:var(--sf-weight-ui);letter-spacing:-.01em;line-height:1.2}
.sfx-compare-under{display:block;margin-top:4px;color:var(--sf-muted);font-size:14px;font-weight:var(--sf-weight-body);line-height:1.4}

/* värden: de viktiga skillnaderna lyfts */
.sfx-compare-varde{color:var(--sf-ink);font-size:16px;line-height:1.5}
.sfx-compare-rad-stor .sfx-compare-varde{color:var(--sf-primary);font-size:24px;font-weight:var(--sf-weight-bold);letter-spacing:-.02em;line-height:1.2}
.sfx-compare-rad-lank td{padding-block:14px}
.sfx-compare-rad-lank .sfx-link-arrow{font-size:15px}

/* slutsats och guide */
.sfx-compare-fot{max-width:var(--sf-container-text);margin:28px auto 0;text-align:center}
body .entry-content .sfs-section .sfx-compare-slutsats{margin:0 0 20px;color:var(--sf-muted);font-size:15px;line-height:1.7}
.sfx-compare-guide{margin:0}

/* Mobil: jämförelserad för jämförelserad i stället för tre hopklämda kolumner */
@media(max-width:700px){
  .sfx-compare-wrap{border:0;border-radius:0;background:transparent}
  .sfx-compare-wrap .sfx-compare-table,.sfx-compare-wrap .sfx-compare-table tbody{display:block}
  .sfx-compare-wrap .sfx-compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sfx-compare-wrap .sfx-compare-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    margin:0 0 12px;border:1px solid var(--sf-line);border-radius:14px;overflow:hidden;background:var(--sf-bg)}
  .sfx-compare-wrap .sfx-compare-table tbody tr:last-child{margin-bottom:0}
  .sfx-compare-wrap .sfx-compare-table tbody th{grid-column:1/-1;width:auto;padding:12px 16px;border:0;border-radius:0!important;
    border-bottom:1px solid var(--sf-line);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sf-muted)}
  .sfx-compare-wrap .sfx-compare-table tbody td{display:block;padding:14px 16px;border:0!important;border-radius:0!important}
  .sfx-compare-wrap .sfx-compare-table tbody td.sfx-compare-col-1{border-right:1px solid var(--sf-line)!important}
  .sfx-compare-wrap .sfx-compare-table tbody td::before{content:attr(data-kolumn);display:block;margin:0 0 4px;
    color:var(--sf-muted);font-size:12px;font-weight:var(--sf-weight-ui);letter-spacing:.04em}
  .sfx-compare-rad-stor .sfx-compare-varde{font-size:20px}
  .sfx-compare-rad-lank td::before{display:none!important}
  .sfx-compare-rad-lank .sfx-link-arrow{font-size:14px;min-height:40px}
  .sfx-compare-fot{margin-top:22px}
}

/* Filterrad i butiken */
.sfx-butik-filter{margin:0 0 22px;padding:12px 16px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-control);background:var(--sf-surface);font-size:15px}

/* Komponentlänkar har alltid sajtens marinblå – aldrig temats gamla länkfärg */
body .entry-content a.sfx-link-arrow,body .entry-content a.sfx-btn-outline,
body .site-content a.sfx-link-arrow,body .site-content a.sfx-btn-outline,
body .entry-content .sfx-guide-more a,body .entry-content .sfx-section-link > a,body .entry-content .sfx-inline-link > a{
  color:var(--sfx-navy)!important}
body .entry-content a.sfx-link-arrow:hover,body .site-content a.sfx-link-arrow:hover,
body .entry-content .sfx-inline-link > a:hover{color:var(--sfx-navy-hover)!important}
body .entry-content a.sfx-btn-outline:hover,body .entry-content a.sfx-btn-outline:focus-visible,
body .site-content a.sfx-btn-outline:hover,body .site-content a.sfx-btn-outline:focus-visible,
body .entry-content .sfx-guide-more a:hover,body .entry-content .sfx-section-link > a:hover{
  color:var(--sf-on-primary)!important;background:var(--sfx-navy)}

/* === Delade rättningar efter undersidesarbetet === */
/* Komponentlänkar ska vara marinblå även utanför .entry-content (temats gröna .inside-article a) */
body .inside-article a.sfx-link-arrow,body .inside-article a.sfx-btn-outline,body .inside-article a.sfx-guide-link,
body .site-main a.sfx-link-arrow,body .site-main a.sfx-btn-outline,body .site-main a.sfx-guide-link{color:var(--sfx-navy)!important}
body .inside-article a.sfx-link-arrow:hover,body .inside-article a.sfx-guide-link:hover,
body .site-main a.sfx-link-arrow:hover,body .site-main a.sfx-guide-link:hover{color:var(--sfx-navy-hover)!important}
body .inside-article a.sfx-btn-outline:hover,body .site-main a.sfx-btn-outline:hover,
body .inside-article a.sfx-btn-outline:focus-visible,body .site-main a.sfx-btn-outline:focus-visible{color:var(--sf-on-primary)!important;background:var(--sfx-navy)}
.inside-article a:focus-visible,.site-main a:focus-visible,.site-main button:focus-visible{outline:2px solid var(--sfx-focus);outline-offset:3px;border-radius:var(--sf-radius-tight)}
/* Jämförelsetabellens rubrikrad tas bort helt i mobil (etiketterna finns i varje cell) */
@media(max-width:700px){.sfx-compare-wrap .sfx-compare-table thead{display:none}}

/* === Delade rättningar efter butiksflödet === */
/* Fyllda knappar som är länkar ska aldrig få brödtextens understrykning */
body .entry-content a.bf-btn,body .site-main a.bf-btn,body .entry-content a.button,body .site-main a.button,
body .entry-content a.wp-block-button__link{text-decoration:none!important}

/* WooCommerce-notiser: ljus yta, mörk text, färgad vänsterkant – överallt */
body .woocommerce-message,body .woocommerce-info,body .woocommerce-error{
  background:var(--sf-surface)!important;background-color:var(--sf-surface)!important;color:var(--sf-ink)!important;
  border:1px solid var(--sf-line);border-left:3px solid var(--sf-primary);border-radius:var(--sf-radius-control);
  padding:14px 18px;font-size:15px;line-height:1.6;box-shadow:none}
body .woocommerce-message{border-left-color:var(--sf-color-success);background:var(--sf-color-success-bg)!important;background-color:var(--sf-color-success-bg)!important}
body .woocommerce-error{border-left-color:var(--sf-color-error);background:var(--sf-color-error-bg)!important;background-color:var(--sf-color-error-bg)!important}
body .woocommerce-message::before,body .woocommerce-info::before,body .woocommerce-error::before{display:none}
body .woocommerce-message a,body .woocommerce-info a,body .woocommerce-error a{color:var(--sf-primary)!important;font-weight:var(--sf-weight-ui);text-decoration:underline!important}
body .woocommerce-message a.button,body .woocommerce-info a.button{background:var(--sf-primary)!important;color:var(--sf-on-primary)!important;text-decoration:none!important;border-radius:var(--sf-radius-field);padding:8px 16px}
body .woocommerce-message a.button:hover,body .woocommerce-info a.button:hover{background:var(--sfx-navy-hover)!important}

/* Tillbaka-till-toppen: tydlig rund knapp som inte ligger över viktiga ytor */
a.generate-back-to-top{right:20px;bottom:20px;width:44px;height:44px;line-height:44px;border-radius:50%;
  background:var(--sf-bg)!important;color:var(--sf-primary)!important;border:1px solid var(--sf-line);
  box-shadow:0 6px 18px -10px color-mix(in srgb,var(--sf-shadow-color) 45%,transparent);font-size:18px;opacity:1;text-align:center}
/* Temats ikontypsnitt laddas inte: pilen ritas med kantlinjer i stallet */
a.generate-back-to-top{display:flex!important;align-items:center;justify-content:center}
a.generate-back-to-top::before{content:""!important;display:block;width:10px;height:10px;margin-top:5px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
a.generate-back-to-top > *{display:none}
a.generate-back-to-top:hover{background:var(--sf-surface)!important;color:var(--sf-primary)!important}
body.ph-fastrad-synlig a.generate-back-to-top{bottom:calc(88px + env(safe-area-inset-bottom))}
@media(max-width:600px){a.generate-back-to-top{right:14px;bottom:14px;width:40px;height:40px;line-height:40px}}


/* === Produkttiteln som paragraf på startsidan (Ralph 2026-09-21) ============
   Populära produkter och sortimentsflikarna renderar namnet som <p class="sfx-card-title">
   i stället för rubrik, så att startsidans rubrikstruktur inte fylls av produktnamn.
   Butik, sök och relaterade produkter är kvar som h3. Värdena speglar de uppmätta h3/h4. */
.sfx-product-grid .sfx-card.sfx-product p.sfx-card-title,
.sfx-feed-track .sfx-card.sfx-product p.sfx-card-title{
  margin:0 0 4px;font-size:18px;line-height:1.3;font-weight:var(--sf-weight-heading);
  letter-spacing:-.2px;color:var(--sf-primary);text-wrap:balance}
.sfx-product .sfx-card-title a{position:static;color:inherit;font-weight:inherit;text-decoration:none}
.sfx-product .sfx-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
/* Slår temats/Anpassa-CSS gröna länkfärg i .entry-content, samma !important-nivå som h3-varianten */
body .entry-content .sfx-card.sfx-card.sfx-product p.sfx-card-title a{color:var(--sf-primary)!important;text-decoration:none!important}
@media(max-width:600px){
  .sfx-product-grid .sfx-card.sfx-product p.sfx-card-title,
  .sfx-feed-track .sfx-card.sfx-product p.sfx-card-title{font-size:16px}
}