/* =====================================================================
   Léonie Items SE – startsidans sektioner, Inspiration och typografiroller.
   Proportioner och rytm följer new.leonieitems.de; färger, innehåll och
   komponenter är svenska. Laddas efter style.css och kan tas bort utan
   att något annat på sajten påverkas.
   ===================================================================== */

:root {
  --sans: "Assistant", "Helvetica Neue", Arial, sans-serif;
  --se-wrap: 1140px;
  --se-narrow: 860px;
  --se-rimg: var(--product-image-radius, 14px);
  --se-sale: #b8574f;
}

/* ---------- Typografiroller (accent = Assistant, bas = Cormorant) ---------- */
.se-sec-title,
.se-hero h1,
.se-hl-label,
.se-salebar,
.se-sf-a { font-family: var(--sans); }

/* ---------- Layout ---------- */
.se-wrap { max-width: var(--se-wrap); margin: 0 auto; padding: 0 20px; }
.se-wrap-narrow { max-width: var(--se-narrow); }
.se-sec { padding: 26px 0 6px; }
.se-sec:last-child { padding-bottom: 26px; }

.se-sec-head { margin-top: 10px; }   /* samma block som .sec-head (style.css); bara rubrikstilen är startsidans */
.sec-head .se-sec-title {
  font-family: var(--sans); font-size: 20px; font-weight: 300; text-transform: uppercase; letter-spacing: .14em;
  margin: 0; padding: 0 8px; color: var(--ink, #1c1c1c);
}
.se-sec-sub, .sec-head .sec-sub { text-align: center; font-size: 14px; color: var(--muted, #6b6b6b); }
.se-sec-sub { margin: 0 0 20px; }

/* ---------- Bildplatshållare (tom bildplats, ingen trasig bild) ---------- */
.se-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, #f3efeb, #f3efeb 12px, #eee8e2 12px, #eee8e2 24px);
  color: #8c8177; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--sans); padding: 12px; width: 100%; height: 100%;
}
.se-ph span { max-width: 90%; }

/* ---------- Kampanjrad ---------- */
.se-salebar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--se-sale); color: #fff; padding: 11px 16px;
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none;
}
.se-salebar:hover { background: #a44a43; color: #fff; }
.se-salebar-tag { font-weight: 700; letter-spacing: .18em; }
.se-salebar-txt { font-weight: 400; }
.se-salebar-arrow { font-size: 16px; }

/* ---------- Hero ----------
   Tre bilder kant i kant på dator (mått från new.leonieitems.de:
   .l-hero-v2 33.34vw hög, textboxen 33.34vw bred = exakt mittenbilden,
   bottenjusterad med 3.2vw luft, ingen overlay). På mobil en stående bild
   (v5m: aspect 1080/1230, texten nedtill med 22 % luft under). */
.se-hero { position: relative; overflow: hidden; background: #e2dbd3; }
/* Enbildsheron (används fortfarande på /inspiration) – oförändrad */
.se-hero:not(.se-hero3) { min-height: 30vw; }
.se-hero:not(.se-hero3) picture, .se-hero:not(.se-hero3) > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.se-hero:not(.se-hero3) picture img { width: 100%; height: 100%; object-fit: cover; }
.se-hero:not(.se-hero3)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%);
}
.se-hero:not(.se-hero3) .se-hero-txt {
  position: relative; z-index: 2; min-height: 30vw;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 4vw 4%;
}
.se-hero:not(.se-hero3) .se-hero-box { display: flex; flex-direction: column; align-items: center; width: min(760px, 40vw); }
.se-hero:not(.se-hero3) h1 {
  font-weight: 700; text-transform: none; letter-spacing: -.005em;
  font-size: clamp(22px, 2.2vw, 42px); line-height: 1.1; color: #fff; margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.35);
}
.se-hero-quote {
  color: #fff; font-size: clamp(12px, .9vw, 16px); line-height: 1.5; margin: .9em 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.se-hero:not(.se-hero3) .se-ph { position: absolute; inset: 0; }
/* Trebildsheron (startsidan) */
.se-hero3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; }
.se-hero3-tile { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #d9cfc4; margin: 0; }
.se-hero3-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.se-hero3-l img { object-position: 50% 40%; }
.se-hero3-c img { object-position: 50% 50%; }
.se-hero3-r img { object-position: 50% 50%; }
.se-hero3-tile .se-ph { position: absolute; inset: 0; }
/* Text och knapp över mittenbilden: boxen är exakt en tredjedel bred och centrerad */
.se-hero3-txt {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center; padding: 0 4% 3.2vw;
}
.se-hero3-txt .se-hero-box { display: flex; flex-direction: column; align-items: center; width: 33.34vw; max-width: none; pointer-events: auto; }
.se-hero3 h1 {
  font-family: var(--sans); font-weight: 400; text-transform: none; letter-spacing: .02em;
  font-size: clamp(18px, 1.5vw, 29px); line-height: 1.2; color: #fff; margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.45); white-space: nowrap;
}
.se-btn-hero {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .9vw; background: #fff; color: #111; border: 1px solid #fff; border-radius: var(--r-pill, 999px);
  text-transform: none; letter-spacing: 0; font-family: var(--sans);
  font-size: clamp(13px, .9vw, 17px); font-weight: 400; line-height: 1.4; padding: .6em 1.9em;
  text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.se-btn-hero:hover { background: #f1f1f1; color: #000; text-decoration: none; }
@media (max-width: 767px) {
  .se-hero3-grid { grid-template-columns: 1fr; }
  .se-hero3-l, .se-hero3-r { display: none; }
  .se-hero3-c { aspect-ratio: 1080 / 1230; }
  .se-hero3-txt { padding: 0 6% 22%; }
  .se-hero3-txt .se-hero-box { width: 100%; }
  .se-hero3 h1 { font-size: clamp(22px, 6.4vw, 30px); white-space: normal; }
  .se-btn-hero { margin-top: 14px; font-size: 15px; padding: 10px 28px; }
}

/* ---------- Highlights (kategorivägar) ---------- */
.se-hl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: var(--se-wrap); margin: 0 auto; }
.se-hl-grid.se-hl-3 { grid-template-columns: repeat(3, 1fr); }
.se-hl-tile {
  position: relative; display: block; aspect-ratio: 1; border-radius: var(--se-rimg);
  overflow: hidden; background: #f2f2f2; isolation: isolate; text-decoration: none;
}
.se-hl-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.se-hl-tile:hover img { transform: scale(1.03); }
.se-hl-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.34) 100%);
}
.se-hl-label {
  position: absolute; left: 0; right: 0; bottom: 7%; z-index: 2; text-align: center;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.1vw, 34px); letter-spacing: .12em;
}

/* ---------- Nyhet (Smaragd): Kategoriväg-designen i helbredd ---------- */
.se-nyhet .se-wrap { max-width: var(--se-wrap); }
.se-nyhet-tile { aspect-ratio: 1920 / 820; }
.se-nyhet-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-nyhet-box { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 4% 5%; gap: 10px; }
.se-nyhet-box .se-hl-label { position: static; }
.se-nyhet-txt { color: #fff; font-family: var(--sans); font-size: clamp(14px, 1.2vw, 17px); max-width: 52ch; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.se-nyhet-cta { margin-top: 2px; }
/* ---------- Upptäck sortimentet: luftiga rader ---------- */
.se-discover .se-disc-row { margin-bottom: 30px; }
.se-discover .se-disc-row:last-child { margin-bottom: 0; }
.se-disc-grid { padding-bottom: 8px; }
.se-disc-cta { text-align: center; margin: 10px 0 6px; }
.se-paths .disc-grid { max-width: var(--se-wrap); margin: 0 auto; }

/* ---------- Karusell ---------- */
.se-car { position: relative; max-width: var(--se-wrap); margin: 4px auto 26px; padding: 0 44px; }
.se-car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 60px; font-size: 40px; line-height: 1; color: #555;
  font-family: Georgia, serif; background: none; border: 0; cursor: pointer; padding: 0;
}
.se-car-btn:hover { color: #000; }
.se-car-btn[disabled] { opacity: .25; cursor: default; }
.se-car-prev { left: 0; }
.se-car-next { right: 0; }
.se-track {
  display: flex; flex-wrap: nowrap; gap: 22px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px; margin: 0;
}
.se-track::-webkit-scrollbar { display: none; }

/* ---------- Produktkort i bestsellern ---------- */
.se-card { flex: 0 0 236px; max-width: 236px; scroll-snap-align: start; text-align: center; position: relative; display: flex; flex-direction: column; }
.se-card-img {
  display: block; position: relative; aspect-ratio: 1; background: #f2f2f2;
  overflow: hidden; border-radius: var(--se-rimg); isolation: isolate;
}
.se-card-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.se-card-rot img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.se-card-rot img.on { opacity: 1; }
.se-card-name { font-size: 15px; font-weight: 400; margin: 12px 0 2px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; }
.se-card-name a { text-decoration: none; color: inherit; }
.se-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.se-card-color { font-size: 13.5px; color: var(--muted, #6b6b6b); margin: 0 0 6px; min-height: 1.2em; line-height: 1.2; }
.se-price { font-size: 15.5px; font-weight: 300; color: #000; margin: 0 0 10px; line-height: 1.3; }
.se-price del { margin-right: 5px; color: var(--muted, #6b6b6b); }
.se-price ins { text-decoration: none; color: var(--sale, #cc3366); }
.se-card .btn { margin-top: auto; align-self: center; }

/* ---------- Social proof ---------- */
.se-fb-track { align-items: flex-start; gap: 16px; }
.se-fb-shot {
  flex: 0 0 320px; scroll-snap-align: start; margin: 0; background: #fff;
  border: 1px solid #ececec; border-radius: var(--se-rimg); overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.se-fb-shot img { width: 100%; height: auto; display: block; }
.se-quote { padding: 22px 22px 20px; text-align: left; }
.se-quote-stars { color: #c9a227; font-size: 14px; letter-spacing: .12em; margin: 0 0 10px; }
.se-quote-body { font-size: 15px; line-height: 1.6; margin: 0 0 14px; color: var(--text, #333); }
.se-quote-by { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b6b6b); margin: 0; font-family: var(--sans); }
.se-quote-prod { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.se-quote-prod a { color: inherit; }

/* ---------- Storleksguideteaser ---------- */
.se-sf { text-align: center; }
.se-sf-title { font-size: clamp(16px, 1.8vw, 24px); font-weight: 400; line-height: 1.4; margin: 0 auto; max-width: 960px; color: #000; }
.se-sf-q { display: block; }
.se-sf-a {
  display: inline-block; margin-top: 12px; font-style: normal; font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: #333;
  text-decoration: underline; text-underline-offset: 4px; background: none; border: 0; cursor: pointer; padding: 0;
}
.se-sf-a:hover { color: #666; }

/* ---------- Behind the Scenes ---------- */
.se-bts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 780px; margin: 0 auto; }
.se-bts-tile {
  position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--se-rimg);
  overflow: hidden; background: #f2f2f2; isolation: isolate; text-decoration: none;
}
.se-bts-tile img, .se-bts-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-bts-badge {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #000; display: inline-flex;
  align-items: center; justify-content: center; z-index: 2;
}
.se-bts-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s; }
.se-bts-tile:hover::after { background: rgba(0,0,0,.08); }
.se-bts-handle { text-align: center; margin: -6px 0 22px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--sans); }
.se-bts-handle a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid transparent; text-decoration: none; color: inherit; }
.se-bts-handle a:hover { border-bottom-color: currentColor; }

/* ---------- Nyhetsbrev ---------- */
.se-nl { padding: 30px 0 40px; }
.se-nl-txt { text-align: center; max-width: 560px; margin: -4px auto 18px; font-size: 15px; line-height: 1.6; color: #444; }
.se-nl-form { max-width: 460px; margin: 0 auto; }

/* ---------- Inspiration ---------- */
.se-insp-intro { text-align: center; max-width: 720px; margin: 0 auto 10px; font-size: 16px; line-height: 1.7; color: var(--text, #333); }
.se-insp-list { display: grid; gap: clamp(28px, 5vw, 64px); padding: 10px 0 30px; }
.se-insp-item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 52px); align-items: center; }
.se-insp-item:nth-child(even) .se-insp-media { order: 2; }
.se-insp-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--se-rimg); overflow: hidden; background: #f2f2f2; }
.se-insp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-insp-body h3 { font-size: clamp(20px, 2vw, 30px); font-weight: 400; margin: 0 0 12px; line-height: 1.25; }
.se-insp-body p { font-size: 15.5px; line-height: 1.75; margin: 0 0 16px; color: var(--text, #333); }
.se-insp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 auto 30px; max-width: var(--se-wrap); }
.se-insp-tile { position: relative; display: block; aspect-ratio: 1; border-radius: var(--se-rimg); overflow: hidden; background: #f2f2f2; text-decoration: none; }
.se-insp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.se-insp-tile:hover img { transform: scale(1.03); }
.se-insp-tile span {
  position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; color: #fff; z-index: 2;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(13px, 1.3vw, 18px);
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.se-insp-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.34) 100%); }

/* ---------- Fokus och tillgänglighet ---------- */
.se-hl-tile:focus-visible, .se-bts-tile:focus-visible, .se-card-img:focus-visible,
.se-insp-tile:focus-visible, .se-car-btn:focus-visible, .se-btn-hero:focus-visible,
.se-sf-a:focus-visible, .se-salebar:focus-visible {
  outline: 2px solid var(--ink, #1c1c1c); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .se-hl-tile img, .se-insp-tile img, .se-card-rot img { transition: none; }
  .se-track { scroll-behavior: auto; }
}

/* ---------- Surfplatta ---------- */
@media (max-width: 1024px) {
  .se-hl-grid.se-hl-3 { grid-template-columns: repeat(3, 1fr); }
  .se-insp-item { gap: 24px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  /* Enbildsheron (/inspiration) på mobil – trebildsheron har egna regler ovan */
  .se-hero:not(.se-hero3), .se-hero:not(.se-hero3) .se-hero-txt { min-height: 0; }
  .se-hero:not(.se-hero3) { aspect-ratio: 4 / 5; }
  .se-hero:not(.se-hero3) .se-hero-txt { position: absolute; inset: 0; justify-content: flex-end; padding: 0 6% 12%; }
  .se-hero:not(.se-hero3) .se-hero-box { width: 100%; }
  .se-hero:not(.se-hero3) h1 { font-size: clamp(22px, 6.4vw, 30px); }
  .se-hero-quote { font-size: clamp(13px, 3.6vw, 16px); }
  .se-btn-hero { margin-top: 14px; font-size: 15px; }
  .se-salebar { font-size: 12px; gap: 8px; padding: 10px 12px; }
  .sec-head .se-sec-title { font-size: 16px; padding: 0 12px; letter-spacing: .12em; }
  .se-hl-grid, .se-hl-grid.se-hl-3 { grid-template-columns: 1fr; gap: 12px; }
  .se-hl-label { font-size: 24px; }
  .se-car { padding: 0 8px; }
  .se-car-btn { display: none; }
  .se-track { gap: 12px; }
  .se-card { flex-basis: 62vw; max-width: 62vw; }
  /* Centrerad karusell med "peek": aktiv recension i mitten, en skymt av föregående och nästa */
  .se-fb-track { box-sizing: border-box; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 12vw; padding-right: 12vw; scroll-padding: 0 12vw; scroll-snap-type: x mandatory; }
  .se-fb-shot { flex: 0 0 76vw; scroll-snap-align: center; }
  .se-nyhet-tile { aspect-ratio: 1; }
  .se-nyhet-box { padding: 0 6% 9%; }
  .se-nyhet-txt { font-size: 14px; }
  .se-disc-cta { margin: 6px 0 4px; }
  .se-disc-row { margin-bottom: 26px; }
  .se-bts-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .se-bts-badge { width: 22px; height: 22px; top: 6px; right: 6px; }
  .se-insp-item, .se-insp-item:nth-child(even) .se-insp-media { grid-template-columns: 1fr; order: 0; }
  .se-insp-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Rubrik som bara skärmläsare ser – håller rubrikordningen h1 → h2 → h3 hel */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Startsidan har en egen nyhetsbrevssektion – dölj sidfotens formulär där så
   samma anmälan inte finns två gånger på sidan (samma lösning som referenssidan). */
body.home .foot-col.foot-nl .nl-form { display: none; }

/* ---------- Andrasortering: informationsruta på hubb och produktsida ---------- */
.se-andra-box { margin: 4px 0 22px; }
.se-andra-info {
  background: var(--sand, #f5f2ef); border: 1px solid var(--line, #d9d4cf);
  border-radius: var(--se-rimg); padding: 18px 20px;
}
.se-andra-h { font-family: var(--sans); font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; margin: 0 0 10px; color: var(--ink, #1c1c1c); }
.se-andra-intro { font-size: 15px; line-height: 1.65; margin: 0 0 10px; color: var(--text, #333); }
.se-andra-list { margin: 0 0 10px; padding-left: 18px; font-size: 14.5px; line-height: 1.7; color: var(--text, #333); }
.se-andra-list li { margin: 0 0 3px; }
.se-andra-foot { font-size: 13.5px; line-height: 1.6; margin: 0; color: var(--muted, #6b6b6b); }
@media (max-width: 767px) { .se-andra-info { padding: 15px 16px; } .se-andra-intro { font-size: 14.5px; } }

/* ---------- Bästsäljare som rutnät: 4×2 desktop, 2×4 mobil, ingen swipe ---------- */
.se-bs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px 22px; padding: 6px 0 26px; max-width: var(--se-wrap); margin: 0 auto;
}
.se-bs-grid .se-card { flex: none; max-width: none; scroll-snap-align: none; }
@media (max-width: 1024px) { .se-bs-grid { grid-template-columns: repeat(4, 1fr); gap: 24px 16px; } }
@media (max-width: 767px) {
  .se-bs-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  /* Två kort i bredd ska fortfarande rymma bild, namn, färg och pris utan att klämmas */
  .se-bs-grid .se-card-name { font-size: 14.5px; line-height: 1.35; }
  .se-bs-grid .se-card-color { font-size: 13px; }
  .se-bs-grid .se-price { font-size: 15px; }
  .se-bs-grid .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
}

/* ---------- Produktsida: färgpluttar (§4) ----------
   Samma visuella princip som new.leonieitems.de: rund plutt med tunn kantlinje
   och vit innerring, tydligt valt läge och en ljusreflex som skiljer glansig
   finish från matt. Saknar färgen en säker färgkod visas produktbilden i
   pluttens form – en osäker färg får aldrig visas som en säker färgplutt.
   Länken är större än själva pluttet så att träffytan blir minst 44 px på
   mobil (§19–§20) utan att den visuella pluttet växer. */
.pgsw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 -4px 2px; }
.pgsw {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; background: none; border-radius: 50%;
}
.pgsw:hover { text-decoration: none; }
.pgsw:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
.pgsw-i {
  display: block; width: 28px; height: 28px; border-radius: 50%; position: relative;
  border: 1px solid rgba(0, 0, 0, .2); background: var(--sw, #ddd);
  box-shadow: inset 0 0 0 2px #fff; transition: transform .12s, box-shadow .12s;
}
.pgsw:hover .pgsw-i { transform: scale(1.12); }
.pgsw.on .pgsw-i { border-color: #000; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #000; }
/* Glansig finish */
.pgsw-gloss .pgsw-i::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0, rgba(255,255,255,.2) 32%, transparent 58%);
}
/* Färg utan säker färgkod: produktbilden i pluttens form */
.pgsw-photo .pgsw-i { background-image: var(--sw-img); background-size: cover; background-position: center; }
/* Central swatch-modell (cat_swatch): mönstrad och tvåfärgad plutt.
   Mönstret ligger i pluttens egen bakgrund så att glans (::after), slut-
   streck (::before), valt läge och hover fungerar exakt som för solida. */
.pgsw-pattern-spots .pgsw-i {
  background:
    radial-gradient(ellipse 5px 3.5px at 30% 28%, var(--sw2) 97%, transparent 100%),
    radial-gradient(ellipse 4px 5px at 68% 40%, var(--sw2) 97%, transparent 100%),
    radial-gradient(ellipse 3.5px 3px at 45% 70%, var(--sw2) 97%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 76% 74%, var(--sw2) 97%, transparent 100%),
    radial-gradient(ellipse 2.5px 2px at 22% 62%, var(--sw2) 97%, transparent 100%),
    radial-gradient(ellipse 2.5px 3.5px at 56% 16%, var(--sw2) 97%, transparent 100%),
    radial-gradient(ellipse 2px 2.5px at 82% 24%, var(--sw2) 97%, transparent 100%),
    var(--sw);
}
.pgsw-pattern-check .pgsw-i {
  background-color: var(--sw);
  background-image: repeating-conic-gradient(var(--sw2) 0 25%, var(--sw) 0 50%);
  background-size: 4px 4px;
}
.pgsw-split .pgsw-i { background: linear-gradient(135deg, var(--sw) 0 50%, var(--sw2) 50% 100%); }
/* Pearl Cherry: pärlemorvit botten med lyster, små röda körsbär (två per klase) och pyttesmå gröna blad */
.pgsw-pattern-cherries .pgsw-i {
  background:
    radial-gradient(circle 1.1px at 41% 33%, #3d7a3b 99%, transparent 100%),
    radial-gradient(circle 1.1px at 66% 62%, #3d7a3b 99%, transparent 100%),
    radial-gradient(circle 2px at 34% 42%, var(--sw2) 99%, transparent 100%),
    radial-gradient(circle 2px at 45% 44%, var(--sw2) 99%, transparent 100%),
    radial-gradient(circle 2px at 62% 72%, var(--sw2) 99%, transparent 100%),
    radial-gradient(circle 2px at 72% 68%, var(--sw2) 99%, transparent 100%),
    radial-gradient(circle 1.6px at 70% 26%, var(--sw2) 99%, transparent 100%),
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0, rgba(255,255,255,.35) 38%, transparent 62%),
    var(--sw);
}
/* Slut i lager: dämpad plutt med streck – fortfarande valbar */
.pgsw.is-out .pgsw-i { opacity: .55; }
.pgsw.is-out .pgsw-i::before { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: #000; transform: rotate(45deg); z-index: 1; }
.pg-sel-color .pg-sel-cur { color: var(--ink, #1c1c1c); }
@media (max-width: 640px) { .pgsw { width: 44px; height: 44px; } .pgsw-row { gap: 2px; margin-left: -8px; margin-right: -8px; } .pgsw-i { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .pgsw-i { transition: none; } .pgsw:hover .pgsw-i { transform: none; } }

/* ---------- Produktsida: nytt formspråk ---------- */
/* Hela den övre köpsektionen vänsterställs – produktnamn, recensioner, pris
   och allt därunder ligger i samma vänsterkant. */
.pg-info { text-align: left; justify-items: stretch; gap: 12px; }
.pg-info > * { justify-self: stretch; }
.pg-info h1 { text-align: left; }
.pg-sub { text-align: left; margin-top: -4px; }
.pg-rating { justify-content: flex-start; }
.pg-price, .pg-info .price { text-align: left; }
.pg-sel, .pg-buybox, .pg-why, .pg-acc-wrap { max-width: 520px; margin-left: 0; margin-right: 0; }
.pg-buybox { justify-items: stretch; }
.pg-trust { justify-content: flex-start; }
.pg-freeship { text-align: left; }
.pg-why { text-align: left; }
.pg-bundle { max-width: 520px; text-align: left; }

/* Storleksknappar med samma rundade formspråk som övriga knappar */
.size-row { gap: 8px; }
.size-opt {
  font-family: var(--sans); border: 1px solid var(--line, #d9d4cf); border-radius: var(--r-pill, 999px);
  padding: 10px 18px; min-width: 78px; background: #fff; color: var(--ink, #1c1c1c);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.size-opt b { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.size-opt small { font-family: var(--sans); font-size: 11.5px; letter-spacing: .03em; color: var(--muted, #6b6b6b); margin-top: 1px; }
.size-opt:hover { border-color: var(--ink, #1c1c1c); background: var(--sand, #f5f2ef); }
.size-opt:focus-visible { outline: 2px solid var(--ink, #1c1c1c); outline-offset: 2px; }
/* Vald storlek syns på fyllning och kontrast, inte bara på färg */
.size-opt.on { border-color: var(--ink, #1c1c1c); background: var(--ink, #1c1c1c); color: #fff; box-shadow: none; }
.size-opt.on small { color: rgba(255, 255, 255, .78); }
.size-opt.is-out { border-style: dashed; color: var(--muted, #6b6b6b); }

/* §8 Fri frakt-räknaren */
.pg-freeship {
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .05em;
  margin: 2px 0 0; color: var(--ink, #1c1c1c);
}
.pg-freeship b { font-weight: 600; }
.pg-freeship.is-done { color: #2f6b46; }

/* §7 Trygghetsrad */
.pg-trust { font-family: var(--sans); font-size: 12.5px; letter-spacing: .05em; }
.pg-trust-pay { gap: 10px; }

/* Labels på produktbilder: gemensam komponent .plabel i style.css */

/* §9 Dragspel – ligger i högerspalten direkt under punktlistan */
.pg-acc-wrap { margin: 14px 0 0; }
.acc { border-top: 1px solid var(--line, #d9d4cf); }
.acc-item { border-bottom: 1px solid var(--line, #d9d4cf); }
.acc-h { margin: 0; font-size: inherit; font-weight: 400; }
.acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 15px 2px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink, #1c1c1c);
}
.acc-btn:focus-visible { outline: 2px solid var(--ink, #1c1c1c); outline-offset: -2px; }
.acc-i { position: relative; width: 13px; height: 13px; flex: none; }
.acc-i::before, .acc-i::after { content: ""; position: absolute; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.acc-i::before { left: 0; right: 0; top: 6px; height: 1px; }
.acc-i::after { top: 0; bottom: 0; left: 6px; width: 1px; }
.acc-item.is-open .acc-i::after { transform: scaleY(0); opacity: 0; }
.acc-body { padding: 0 2px 20px; font-size: 15px; line-height: 1.68; color: var(--text, #333); }
.acc-body > *:first-child { margin-top: 0; }
.acc-body .se-andra-info { margin: 0; }

/* §9.4 Produktdetaljer som faktalista */
.pg-facts { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 7px 18px; margin: 0; font-size: 15px; }
.pg-facts dt { font-family: var(--sans); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.pg-facts dd { margin: 0; }

/* ---------- Recensioner på produktsidan ----------
   Formspråket följer den tyska produktsidan: inga kort, ingen bakgrund och
   ingen ram – bara en tunn avdelare mellan omdömena. Recensionstexten har
   mest visuell vikt, kundnamnet ligger diskret under och varianten ännu
   diskretare. Stjärnorna är guldiga, som på den tyska sidan. */
.pgr-head { margin: 0 0 6px; font-size: 17px; font-weight: 400; line-height: 1.4; color: var(--ink, #1c1c1c); }
.pgr-head span { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: var(--muted, #8c8177); white-space: nowrap; }
.pgr-list { display: block; }
.pgr { padding: 14px 0; border-bottom: 1px solid #e3e3e3; }
.pgr:last-child { border-bottom: 0; padding-bottom: 4px; }
.pgr-stars i { width: 14px; height: 14px; background: #e6ded1; }
.pgr-stars i.on { background: #d4a017; }
.pgr-body { margin: 6px 0; font-size: 15.5px; line-height: 1.7; color: var(--ink, #1c1c1c); }
.pgr-by { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink, #1c1c1c); }
.pgr-variant { margin: 2px 0 0; font-family: var(--sans); font-size: 11.5px; letter-spacing: .05em; color: var(--muted, #8c8177); }
.pgr-more { margin: 14px 0 2px; }
.pgr-more .btn { width: 100%; }
/* Betygsväljaren i formuläret ligger i samma sektion och använder samma
   guldton, så att stjärnorna betyder samma sak var man än ser dem. */
body.pdp .rstars input:checked ~ label i,
body.pdp .rstars label:hover i,
body.pdp .rstars label:hover ~ label i { background: #d4a017; }

@media (max-width: 860px) {
  .pg-info { gap: 12px; }
  .pg-sel, .pg-buybox, .pg-why, .pg-acc-wrap, .pg-bundle { max-width: none; }
}
@media (max-width: 767px) {
  .size-opt { min-width: 70px; padding: 10px 14px; }
  .acc-btn { padding: 14px 0; font-size: 12px; letter-spacing: .11em; }
  .acc-body { font-size: 15px; padding-bottom: 18px; }
  .pg-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .pg-facts dd { margin: 0 0 10px; }
  /* Recensionerna ska använda nästan hela bredden på mobil – inga extra
     marginaler eller boxar som gör dem onödigt långa. */
  .pgr-head { font-size: 16px; }
  .pgr { padding: 13px 0; }
  .pgr-body { font-size: 15px; line-height: 1.65; margin: 5px 0; }
  .pgr-list, .pgr { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .size-opt, .acc-i::before, .acc-i::after { transition: none; } }

/* Recensionslänken högst upp ska vara lätt att träffa även på mobil (§19–§20) */
.pg-rating { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; }
.pg-rating:focus-visible { outline: 2px solid var(--ink, #1c1c1c); outline-offset: 2px; }

/* =====================================================================
   Produktsida – mobil-UX, trygghetsrad, rubriker, sticky CTA,
   "Andra har också köpt" (8 st) och "Upptäck mer från Léonie" (2026-09-11)
   ===================================================================== */
/* Rubriken i punktlistan följer dragspelsrubrikernas stil exakt */
.pg-why { margin-top: 16px; }
.pg-why h3, .pg-why .pg-h {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink, #1c1c1c); font-style: normal; text-align: left; margin: 0 0 10px;
}
.pg-why ul { padding-left: 20px; }
.pg-why li { margin: 5px 0; }

/* Trygghet under köpknappen: rad 1 ikoner, rad 2 en textrad */
.pg-trust-wrap { display: grid; gap: 9px; justify-items: start; margin-top: 2px; }
.pg-trust-wrap .pg-trust-pay { margin: 0; gap: 12px; }
.pg-trust-wrap .pg-trust-pay li { display: inline-flex; }
.pg-trust-line {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 0 7px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .03em; color: var(--muted, #6b6b6b); line-height: 1.5;
}
.pg-trust-line i { font-style: normal; color: var(--line, #c9c2ba); }
.pg-trust-line span { white-space: nowrap; }

/* Fler färger – samma formspråk som övriga små rubriker */
.pg-sel-color { margin-top: 2px; }

/* Sticky köp-list: rymligare, tål Safaris verktygsfält och home indicator */
.stickybar {
  gap: 14px; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--gut) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gut) + env(safe-area-inset-right, 0px));
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .45);
}
.stickybar-txt { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.25; }
.stickybar-txt b { font-family: var(--sans); font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybar-txt span { font-family: var(--sans); color: var(--muted, #6b6b6b); }
.stickybar-btn { flex: 0 0 auto; height: 46px; padding: 0 26px; font-size: 14px; }
/* När listen syns får sidan extra luft nedtill så den inte täcker fotens innehåll */
body.has-sticky { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 861px) { body.has-sticky { padding-bottom: 0; } }

/* Andra har också köpt: 4 × 2 på dator, 2 × 4 på mobil – vanlig scroll */
.also-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .also-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; } }
@media (max-width: 640px) { .also-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }

/* Upptäck mer från Léonie */
.discover { padding: 0 0 var(--sect); }
.disc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.disc-card { position: relative; display: grid; gap: 8px; text-decoration: none; color: var(--ink, #1c1c1c); }
.disc-card:hover { text-decoration: none; }
.disc-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--product-image-radius, 14px); background: var(--sand, #f5f2ef); }
.disc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.disc-card:hover .disc-img img { transform: scale(1.03); }
.disc-name { font-family: var(--font-display, var(--font-sans)); font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; margin-top: 4px; }
.disc-cta { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.disc-cta::after { content: " →"; }
.disc-card:hover .disc-cta, .disc-card.is-self .disc-cta { color: var(--ink, #1c1c1c); }
@media (prefers-reduced-motion: reduce) { .disc-img img { transition: none; } }
@media (max-width: 640px) {
  .disc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .disc-name { font-size: 16px; letter-spacing: .08em; }
  .disc-cta { font-size: 11px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  /* Alla fem storlekar på en rad: Mini 2-pack · Small · Medium · Large · XL.
     Knapparna delar bredden (mer till längre etiketter), min 44 px höga. */
  .size-row { display: flex; flex-wrap: nowrap; gap: 6px; }
  .size-opt { flex: 1 1 auto; min-width: 0; padding: 9px 4px; min-height: 46px; }
  .size-opt b { font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
  .size-opt small { font-size: 10.5px; letter-spacing: 0; white-space: nowrap; }
  /* Mer luft i köpsektionen */
  .pg-buybox { gap: 14px; }
  .pg-trust-wrap { justify-items: center; gap: 10px; margin-top: 4px; }
  .pg-trust-wrap .pg-trust-pay { justify-content: center; }
  .pg-trust-line { justify-content: center; font-size: 11.5px; letter-spacing: .02em; gap: 0 6px; }
  .pg-sel-color { margin-top: 6px; }
  .pg-why { margin-top: 18px; }
  .pg-why h3, .pg-why .pg-h { font-size: 12px; letter-spacing: .11em; }
}
@media (max-width: 400px) {
  .size-opt { padding: 9px 3px; }
  .size-opt b { font-size: 10.5px; letter-spacing: .03em; }
  .size-opt small { font-size: 10px; }
  .pg-trust-line { font-size: 11.5px; letter-spacing: 0; gap: 0 5px; }
}

/* =====================================================================
   Produktsida – korrigeringar 2026-09-11 (omgång 3)
   ===================================================================== */
/* Mer luft runt storleksvalet: rubrik → knappar → köpknapp */
.pg-sel { gap: 12px; }
.pg-sel-head { margin-bottom: 2px; }
.pg-buybox { margin-top: 6px; }
/* B2C: ingen antalsväljare – KÖP NU tar hela bredden */
.pg-buy-single .btn { flex: 1 1 100%; width: 100%; }
/* Trygghet: textrad först, ikoner under, centrerat */
.pg-trust-wrap { justify-items: center; gap: 10px; margin-top: 6px; }
.pg-trust-line { justify-content: center; }
.pg-trust-wrap .pg-trust-pay { justify-content: center; }
/* "Finns även som" – kompakt rad under storleksvalet */
.pg-formats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; max-width: 520px; margin-top: 2px; }
.pg-formats-h { margin: 0; color: var(--muted, #6b6b6b); font-size: 11.5px; letter-spacing: .12em; }
.pg-formats-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-format { flex-direction: row; gap: 7px; min-width: 0; padding: 7px 14px; min-height: 0; }
.pg-format b { font-size: 12px; }
.pg-format small { margin: 0; font-size: 11px; }
/* Sticky köp-list på iPhone: knappen ska ligga tydligt ovanför Safaris
   nedre verktygsfält och home indicator. safe-area-inset-bottom räcker inte
   när verktygsfältet är minimerat (tapp-ytan för att expandera det ligger
   ovanför safe area), därför alltid minst 20 px "safe" + 24 px extra. */
.stickybar {
  --sticky-safe: max(env(safe-area-inset-bottom, 0px), 20px);
  padding-top: 12px;
  padding-bottom: calc(24px + var(--sticky-safe));
}
body.has-sticky { padding-bottom: calc(100px + max(env(safe-area-inset-bottom, 0px), 20px)); }
@media (max-width: 767px) {
  .pg-sel { gap: 12px; }
  .pg-buybox { gap: 14px; margin-top: 8px; }
  .pg-formats { gap: 8px 10px; }
}

/* =====================================================================
   Varukorg (cart drawer) 2026-09-11: radlayout, progress bars, CTA över
   Safaris nedre kontroller. Matematiken för staplarna är oförändrad
   (delsumma / gräns) – bara det visuella.
   ===================================================================== */
.ci { grid-template-columns: 62px 1fr; gap: 12px; }
.ci img { border-radius: var(--product-image-radius-sm, 8px); }
.ci-body { display: grid; gap: 4px; min-width: 0; }
.ci-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ci-name { font-family: var(--sans); font-size: 15px; }
.ci-line { font-family: var(--sans); font-size: 15px; white-space: nowrap; }
.ci-label { font-family: var(--sans); font-size: 13.5px; color: var(--muted, #6b6b6b); }
.ci-remove { margin: 0; font-family: var(--sans); font-size: 12.5px; color: var(--muted, #6b6b6b); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.ci-remove:hover { color: var(--ink, #1c1c1c); }
.ci-qty { margin-top: 4px; height: 30px; justify-self: start; }
.ship-meter { font-family: var(--sans); }
.ship-meter-text { margin-bottom: 8px; font-size: 14px; }
.ship-meter-bar { height: 8px; background: var(--beige, #ede9e6); border-radius: 99px; overflow: hidden; }
.ship-meter-bar span { background: var(--ink, #1c1c1c); border-radius: 99px; }
.gift-meter .ship-meter-bar span { background: var(--color-accent-brown, #4b3b34); }
.ship-meter.meter-done .ship-meter-bar span { background: var(--ink, #1c1c1c); }
.gift-meter.meter-done .ship-meter-bar span { background: var(--color-accent-brown, #4b3b34); }
.ship-meter.meter-done .ship-meter-text strong { color: var(--ink, #1c1c1c); }
.gift-meter { padding-bottom: 10px; }
/* CTA-området: knappen ligger tydligt ovanför Safaris nedre verktygsfält och
   home indicator – trygghetstexten (ej klickbar) får ligga längst ned. */
.drawer-foot { padding-bottom: calc(14px + max(env(safe-area-inset-bottom, 0px), 20px)); gap: 12px; }
.drawer-foot .btn-block { min-height: 52px; }
.drawer-trust { font-family: var(--sans); margin-top: 6px; padding-bottom: 6px; }
@media (max-width: 767px) {
  .drawer-foot { padding-bottom: calc(24px + max(env(safe-area-inset-bottom, 0px), 20px)); }
  .drawer-trust { margin-top: 10px; }
}
/* Produkttyp/kategori som diskret andrarad under produktnamnet (produktkort) */
.pc-type { margin: 2px 0 0; font-family: var(--sans); font-size: 13px; color: var(--muted, #6b6b6b); line-height: 1.3; letter-spacing: .01em; }
.pc-type + .pc-price, .pc-type + .b2b-price { margin-top: 6px; }

/* =====================================================================
   Kategorilandningssidor – allt scopat under .lp (2026-09-11).
   Återanvänder designsystemet: trebildsheron (se-hero3), sec-head,
   product_card, disc-card, pgr-recensioner, pgsw-färgpluttar, dragspel,
   knappar, --product-image-radius, --color-accent-brown.
   ===================================================================== */
.lp { --lp-max: 1140px; }
.lp .wrap { max-width: var(--lp-max); }
.lp-center { text-align: center; }
/* Hero: samma komponent som startsidan, med överrad och undertext.
   Tablet (768–1023 px): två stående bilder (mitten + höger) i stället för tre
   kvadrater – ger höjd åt motivet och plats åt texten. */
.lp-hero3 .se-hero-box { gap: 0; }
.lp-hero3 .se-hero-eyebrow { margin: 0 0 8px; font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.lp-hero3 h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.3vw, 40px); line-height: 1.1; letter-spacing: .03em; white-space: normal; }
.lp-hero3 .se-hero-sub { margin: 10px 0 0; max-width: 34ch; font-family: var(--sans); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.5; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.lp-hero3 .se-btn-hero { margin-top: 14px; }
.lp-hero3 .se-hero3-txt { padding-bottom: 2.6vw; }
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-hero3 .se-hero3-grid { grid-template-columns: 1fr 1fr; }
  .lp-hero3 .se-hero3-l { display: none; }
  .lp-hero3 .se-hero3-tile { aspect-ratio: 4 / 5; }
  .lp-hero3 .se-hero3-txt { justify-content: flex-end; align-items: flex-start; text-align: left; padding: 0 0 4vw 4vw; }
  .lp-hero3 .se-hero3-txt .se-hero-box { width: 42vw; align-items: flex-start; }
  .lp-hero3 h1 { font-size: clamp(26px, 3.6vw, 36px); }
  .lp-hero3 .se-hero-sub { font-size: 15px; }
}
@media (max-width: 767px) {
  .lp-hero3 .se-hero3-txt { padding: 0 6% 9%; }
  .lp-hero3 h1 { font-size: clamp(26px, 7.4vw, 32px); }
  .lp-hero3 .se-hero-sub { font-size: 14.5px; max-width: none; }
}
/* Intro */
.lp-intro { padding: clamp(24px, 3.4vw, 40px) 0 4px; text-align: center; }
.lp-intro-text { margin: 0 auto; max-width: 640px; font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; font-weight: 300; }
.lp-pills { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.lp-pills li { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink, #1c1c1c); border: 1px solid var(--line, #d9d4cf); border-radius: 999px; padding: 7px 14px; }
/* USP-pills på mobil (2026-09-12): kompakt 2×2-grid i stället för fyra höga rader – generell regel för alla kategorilandningssidor */
@media (max-width: 767px) {
  .lp-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; max-width: 420px; margin-left: auto; margin-right: auto; }
  /* Informativa pills, inte knappar: samma pillform som desktop, tunn ljus ram, dämpad text, max två rader (2 × 2) */
  .lp-pills li { font-size: 10.5px; letter-spacing: .06em; font-weight: 400; color: var(--muted, #6b6b6b); border: 1px solid var(--line, #e3ded8); background: transparent; padding: 6px 10px; border-radius: 999px; line-height: 1.25; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 34px; }
}
/* Produkter */
.lp-products { padding: 4px 0 var(--sect); }
.lp-grid-few { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Produktval – färg först */
.lp-pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "media colors" "media body"; grid-template-rows: auto 1fr; column-gap: clamp(20px, 4vw, 56px); row-gap: 14px; align-items: start; max-width: 1040px; margin: 0 auto; }
.lp-pick-media { grid-area: media; display: block; border-radius: var(--product-image-radius, 14px); overflow: hidden; aspect-ratio: 1; background: var(--sand, #f5f2ef); }
.lp-pick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-pick-colors { grid-area: colors; display: grid; gap: 6px; }
.lp-pick-colors-h { font-family: var(--sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.lp-pick-colors-h b { font-weight: 600; color: var(--ink, #1c1c1c); }
.lp-pick-outnote { color: var(--muted, #6b6b6b); text-transform: none; letter-spacing: 0; }
.lp-pick-sw { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -4px; }
.lp-pick-body { grid-area: body; display: grid; gap: 12px; align-content: start; }
.lp-pick-type { margin: 0; font-family: var(--sans); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.lp-pick-opts { display: grid; gap: 10px; }
.lp-opt { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--line, #d9d4cf); border-radius: 12px; background: #fff; }
.lp-opt.is-best { border-color: var(--color-accent-brown, #4b3b34); background: var(--sand, #f5f2ef); }
.lp-opt.is-out { border-style: dashed; }
.lp-opt.is-out .lp-opt-l, .lp-opt.is-out .lp-opt-price { color: var(--muted, #6b6b6b); }
.lp-opt-main { display: grid; gap: 3px; min-width: 0; }
.lp-opt-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.lp-opt-l a { color: inherit; text-decoration: none; }
.lp-opt-l a:hover { text-decoration: underline; }
.lp-opt-sub { font-family: var(--sans); font-size: 13.5px; color: var(--muted, #6b6b6b); line-height: 1.4; }
.lp-opt-tag { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--beige, #ede9e6); color: var(--ink, #1c1c1c); }
.lp-opt-best { background: var(--color-accent-brown, #4b3b34); color: #fff; }
.lp-opt-out { background: transparent; border: 1px solid var(--line, #d9d4cf); color: var(--muted, #6b6b6b); }
.lp-opt-price { font-size: 19px; white-space: nowrap; text-align: right; }
.lp-opt-price s { color: var(--muted, #6b6b6b); font-size: 15px; margin-right: 4px; }
.lp-opt .btn-sm { min-width: 104px; width: auto; max-width: none; }
.lp-pick-more { margin: 2px 0 0; font-size: 14.5px; }
.lp-pick-more a { color: var(--ink, #1c1c1c); text-decoration: underline; text-underline-offset: 3px; }
/* Modellväljare */
.lp-modelsec { padding: 0 0 8px; }
.lp-models { display: grid; gap: clamp(12px, 2vw, 22px); }
.lp-models-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-models-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-models-4, .lp-models-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-model { display: grid; gap: 10px; padding: 0; margin: 0; border: 0; background: none; text-align: left; color: var(--ink, #1c1c1c); cursor: pointer; font: inherit; border-radius: var(--product-image-radius, 14px); }
.lp-model-img { display: block; aspect-ratio: 1; border-radius: var(--product-image-radius, 14px); overflow: hidden; background: var(--sand, #f5f2ef); box-shadow: 0 0 0 1px transparent; transition: box-shadow .15s; }
.lp-model-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.lp-model:hover .lp-model-img img { transform: scale(1.03); }
.lp-model.on .lp-model-img { box-shadow: 0 0 0 2px var(--ink, #1c1c1c); }
.lp-model:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.lp-model-body { display: grid; gap: 4px; padding: 0 2px; }
.lp-model-l { font-family: var(--sans); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.lp-model.on .lp-model-l::after { content: "✓"; font-size: 12px; }
.lp-model-t { font-size: 14.5px; line-height: 1.5; color: var(--text, #333); }
.lp-model-meta { font-family: var(--sans); font-size: 12px; color: var(--muted, #6b6b6b); }
.lp-model.is-out .lp-model-img { opacity: .7; }
/* Diadem: stora lifestylebilder i modellväljaren (inspiration först) */
.lp-modelsec-big .lp-model-img { aspect-ratio: 4 / 5; }
.lp-modelsec-big .lp-model-l { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); letter-spacing: .06em; font-weight: 300; }
.lp-modelsec-big .lp-model-t { font-size: 15.5px; max-width: 46ch; }
.lp-modelsec-big .lp-models { max-width: 900px; margin: 0 auto; }
/* Statiska produktvägar (diadem): ingen state, ingen bock, knapp KÖP NU */
.lp-model-static { cursor: default; }
.lp-model-static .lp-model-img { box-shadow: none; }
.lp-model-static .lp-model-l::after { content: none; }
.lp-model-btn { justify-self: start; margin-top: 8px; }
.lp-modelsec-static { padding-bottom: 28px; }
/* Vårdblock (sekundärt) */
.lp-care { padding: 0 0 var(--sect); }
.lp-care-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.lp-care-media { border-radius: var(--product-image-radius, 14px); overflow: hidden; aspect-ratio: 1; background: var(--sand, #f5f2ef); }
.lp-care-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-care-body h2 { margin: 6px 0 10px; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .04em; text-transform: none; line-height: 1.15; }
.lp-care-body > p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: var(--text, #333); max-width: 60ch; }
.lp-care-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-care-grid .pc-name { font-size: 15px; }
.lp-care-grid .pc-type { display: none; }
/* Övriga produkter (t.ex. scrunchie med kantsöm) */
.lp-extra { padding: 0 0 var(--sect); }
/* Redaktionella block */
.lp-editorial { padding: 0 0 var(--sect); }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: clamp(28px, 4vw, 56px); }
.lp-split:last-child { margin-bottom: 0; }
.lp-split-rev .lp-split-media { order: 2; }
.lp-split-media { border-radius: var(--product-image-radius, 14px); overflow: hidden; aspect-ratio: 1; background: var(--sand, #f5f2ef); }
.lp-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-split-body { max-width: 440px; margin: 0 auto; }
.lp-split-body h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; }
.lp-split-body p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text, #333); }
/* USP-block */
.lp-usps { padding: 0 0 var(--sect); }
.lp-usp-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.lp-usp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-usp-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-usp-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lp-usp { text-align: center; display: grid; gap: 8px; justify-items: center; }
.lp-usp-img { width: 100%; aspect-ratio: 1; border-radius: var(--product-image-radius, 14px); overflow: hidden; background: var(--sand, #f5f2ef); margin-bottom: 6px; }
.lp-usp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* (dekorstrecken över fördelarna är borttagna 2026-09-11) */
.lp-usp h3 { margin: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink, #1c1c1c); }
.lp-usp p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text, #333); max-width: 280px; }
/* Lifestyle */
.lp-life { display: grid; grid-template-columns: 58fr 42fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: 0 0 var(--sect); }
.lp-life-media { border-radius: var(--product-image-radius, 14px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand, #f5f2ef); }
.lp-life-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-life-body { display: grid; gap: 14px; justify-items: start; max-width: 420px; }
.lp-life-body h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: .04em; text-transform: none; line-height: 1.15; }
.lp-life-body p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text, #333); }
/* Recensioner */
.lp-reviews { padding: 0 0 var(--sect); }
.lp-reviews .sec-sub { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 14px; color: var(--muted, #6b6b6b); }
.lp-reviews .sec-sub .stars i.on { background: #d4a017; }
.lp-rev-list { max-width: 720px; margin: 0 auto; }
.lp-rev-more { text-align: center; margin: 22px 0 0; }
/* Info-kolumner */
.lp-info { padding: 0 0 var(--sect); }
.lp-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.lp-info-img { aspect-ratio: 1; border-radius: var(--product-image-radius, 14px); overflow: hidden; background: var(--sand, #f5f2ef); margin-bottom: 14px; }
.lp-info-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-info-col h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.lp-info-col p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text, #333); }
/* Dragspel */
.lp-faq { padding: 0 0 var(--sect); }
.lp-faq-in { max-width: 760px; margin: 0 auto; }
.lp-faq .acc-body p { margin: 0 0 8px; }
/* Kvällsrutin (ögonmask) */
.lp-routine { padding: 0 0 var(--sect); }
.lp-routine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-bottom: 22px; }
.lp-routine-card { display: grid; gap: 10px; text-decoration: none; color: var(--ink, #1c1c1c); }
.lp-routine-card:hover { text-decoration: none; }
.lp-routine-img { display: block; aspect-ratio: 1; border-radius: var(--product-image-radius, 14px); overflow: hidden; background: var(--sand, #f5f2ef); }
.lp-routine-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.lp-routine-card:hover .lp-routine-img img { transform: scale(1.03); }
.lp-routine-label { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
/* Vidare */
.lp-next.discover { padding-bottom: var(--sect); }
.lp-next-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-next-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tablet */
@media (max-width: 1024px) {
  .lp-usp-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-usp-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .lp-opt { grid-template-columns: 1fr auto; }
  .lp-opt .btn-sm { grid-column: 1 / -1; width: 100%; max-width: none; }
  .lp-care-in { grid-template-columns: 1fr; }
  .lp-care-media { max-width: 420px; }
  .lp-grid-few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lp-models-4, .lp-models-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .lp-split, .lp-life { grid-template-columns: 1fr; gap: 16px; }
  .lp-split-rev .lp-split-media { order: 0; }
  .lp-split-body, .lp-life-body { max-width: none; }
  .lp-usp-3, .lp-usp-4, .lp-usp-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-usps:not(.lp-usps-img) .lp-usp { text-align: left; justify-items: start; }
  .lp-usps:not(.lp-usps-img) .lp-usp p { max-width: none; }
  .lp-info-grid { grid-template-columns: 1fr; }
  .lp-routine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lp-routine-card { min-width: 0; }
  .lp-routine-label { font-size: 11.5px; letter-spacing: .05em; overflow-wrap: anywhere; }
  .lp-next-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Produktval på mobil: färg → bild → köpval, i en kolumn */
  .lp-pick { grid-template-columns: 1fr; grid-template-areas: "colors" "media" "body"; row-gap: 14px; }
  .lp-pick-sw { gap: 2px; margin: 0 -8px; }
  .lp-opt { grid-template-columns: 1fr auto; padding: 12px 14px; }
  .lp-opt .btn-sm { grid-column: 1 / -1; width: 100%; max-width: none; min-height: 40px; }
  .lp-opt-price { font-size: 18px; }
  .lp-models-2, .lp-models-3, .lp-models-4, .lp-models-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-model-t { font-size: 13.5px; }
  .lp-modelsec-big .lp-models { grid-template-columns: 1fr 1fr; }
  .lp-modelsec-big .lp-model-l { font-size: 18px; }
  .lp-modelsec-big .lp-model-t { font-size: 13.5px; }
  .lp-care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-grid-few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .lp-routine-img img, .lp-model-img img { transition: none; } }
/* ---------- Hitta din hårklämma: storleks- och modellkort (2026-09-11) ---------- */
.lp-sizes, .lp-lines { padding: 0 0 var(--sect); }
.lp-size-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.lp-size, .lp-line { display: grid; gap: 6px; text-decoration: none; color: var(--ink, #1c1c1c); align-content: start; }
.lp-size:hover, .lp-line:hover { text-decoration: none; }
.lp-size-img, .lp-line-img { display: block; aspect-ratio: 1; border-radius: var(--product-image-radius, 14px); overflow: hidden; background: var(--sand, #f5f2ef); margin-bottom: 6px; }
.lp-size-img img, .lp-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.lp-size:hover img, .lp-line:hover img { transform: scale(1.03); }
.lp-size-l, .lp-line-l { font-family: var(--sans); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; }
.lp-size-m { font-family: var(--sans); font-size: 12.5px; color: var(--muted, #6b6b6b); }
.lp-size-t, .lp-line-t { font-size: 14px; line-height: 1.55; color: var(--text, #333); }
.lp-size-cta { font-family: var(--sans); font-size: 12.5px; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.lp-sizes-cta { margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lp-line-grid { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Fem storlekar: på tablet fem smala kolumner (ingen tom plats), på mobil 2 + 2 + ett brett XL-kort som fyller sista raden */
@media (max-width: 1024px) { .lp-size-grid { gap: 10px; } .lp-size-l { font-size: 12px; letter-spacing: .08em; } .lp-size-t { font-size: 12.5px; } .lp-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .lp-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .lp-size-t { font-size: 13.5px; }
  .lp-size-grid > .lp-size:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lp-size-grid > .lp-size:last-child:nth-child(odd) .lp-size-img { aspect-ratio: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) { .lp-size img, .lp-line img { transition: none; } }

/* =====================================================================
   Varukorg + kassa 2026-09-12: renare, mer premium, mer konverterande.
   Prioritering i korgen: produkter → delsumma/rabatt → TILL KASSAN →
   progress/mervärde → trygghet. Ingen grön/orange "rea"-färg.
   ===================================================================== */
/* Rabatt: samma mörka skala som resten av Léonie */
.drawer-save, .drawer-save span:last-child, .save-line, .ko-save span, .ko-save span:last-child, .ko-disc span, .ko-disc span:last-child, .drawer-disc, .ko-coupon-active b { color: var(--ink, #1c1c1c); font-weight: 500; }
.drawer-save { font-family: var(--sans); font-size: 14.5px; padding: 0; }
.drawer-disc { font-family: var(--sans); font-size: 14px; }
.drawer-foot { gap: 10px; }
.drawer-total { font-family: var(--sans); }
.drawer-foot .btn-block { margin-top: 4px; }
/* Ordinarie pris överstruket på rader med verklig besparing */
.ci-ord, .ko-ord { display: block; color: var(--muted, #6b6b6b); font-size: 12.5px; font-weight: 400; text-decoration: line-through; line-height: 1.2; }
.ci-label .ci-ord { display: inline; margin-right: 6px; }
.ko-summary .ko-row > span { text-align: right; }
/* Progress under TILL KASSAN */
.drawer-meters { display: grid; gap: 8px; margin-top: 2px; }
.drawer-meters .ship-meter { padding: 0; font-size: 13.5px; }
.drawer-meters .ship-meter[hidden] { display: none; }
.drawer-meters .ship-meter-text { margin-bottom: 6px; font-size: 13.5px; color: var(--ink, #1c1c1c); }
.drawer-meters .ship-meter-bar { height: 6px; }
.drawer-meters .gift-meter { margin-top: 0; padding-bottom: 0; }
.drawer-meters .gift-meter .ship-meter-bar span, .drawer-meters .gift-meter.meter-done .ship-meter-bar span { background: var(--color-accent-brown, #4b3b34); }
/* Målet nått: ingen stor full stapel – en kompakt bekräftelse med bock */
.drawer-meters .meter-done .ship-meter-bar { display: none; }
.drawer-meters .meter-done .ship-meter-text { margin: 0; color: var(--muted, #6b6b6b); }
.drawer-meters .meter-done .ship-meter-text::before { content: "✓"; margin-right: 6px; color: var(--ink, #1c1c1c); }
.drawer-trust { margin-top: 2px; padding-bottom: 0; }
/* Nederdelen: CTA:n ligger högt nog att alltid vara klickbar (progress + trygghet + safe area under den),
   men ytan under knappen används – ingen tom "död" zon. */
.drawer-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 767px) {
  .drawer-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .drawer-foot .btn-block { min-height: 50px; }
  .drawer-trust { margin-top: 0; }
  .ci-gift { display: none; }
}

/* Kassa */
.ko-line:has(+ .ko-total) { border-bottom: 0; }           /* inget tunt streck precis ovanför det tjocka */
.ko-total { border-top: 2px solid var(--ink, #1c1c1c); font-weight: 600; }
.ko-summary .ko-row:last-of-type { border-bottom: 0; }
.ko-coupon { padding: 4px 0 6px; border-bottom: 1px solid var(--border, #e7e3db); }
.ko-coupon-toggle { background: none; border: 0; padding: 6px 0; font: inherit; font-family: var(--sans); font-size: 13px; color: var(--muted, #6b6b6b); cursor: pointer; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; }
.ko-coupon-toggle::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.ko-coupon-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.ko-coupon-toggle:hover { color: var(--ink, #1c1c1c); }
.ko-coupon-active { font-size: 13.5px; }
.ko-coupon-form { margin-top: 6px; margin-bottom: 4px; }
.ko-coupon-in { border-radius: 0; border-width: 1px; padding: 9px 12px; }
.ko-trust { text-align: center; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--muted, #6b6b6b); margin: 12px 0 0; }
.ko-note { margin-top: 6px; font-size: 12.5px; }
.ko-newsletter { color: var(--ink, #1c1c1c); margin: 4px 0 6px; }
.ko-newsletter input { accent-color: #000; }
.ko-newsletter a { color: var(--muted, #6b6b6b); }
.ko-submit { margin-top: 18px; }
.ko-form h2 { margin-top: 22px; }
.ko-form h2.ko-gap { margin-top: 24px; margin-bottom: 12px; }
.ko-form .ko-section { margin: 12px 0 6px; }
.ko-form .choice-group { gap: 10px; }
.choice { padding: 12px 14px; }
.ko-summary h2 { margin-bottom: 8px; }
.ko-summary .ko-row { padding: 9px 0; }
.ko-line { padding: 9px 0; }
/* Tablet/mobil: mindre luft före DIN ORDER och mellan blocken – luftigt men kompakt */
@media (max-width: 860px) {
  .checkout { padding-top: 14px; gap: 14px; }
  .ko-form, .ko-summary { padding: 18px 16px 20px; }
  .checkout h1 { margin: 0 0 12px; font-size: 22px; }
  .ko-summary h2 { margin-bottom: 4px; }
  .ko-form h2 { margin-top: 18px; }
  .ko-form h2.ko-gap { margin-top: 20px; margin-bottom: 10px; }
  .ko-submit { margin-top: 16px; }
  .frow input, .frow textarea { padding: 11px 12px; }
  .frow label { gap: 5px; }
  .ko-form { gap: 11px; }
}


/* =====================================================================
   Kategorisidor del 2 (2026-09-14): Fjärilar · Alla sidenprodukter · Presentpåsar
   ===================================================================== */
/* Bildsektion med text på bilden – samma bild som startsidans "Upptäck mer"-kort, hela ytan klickbar */
.lp-banner-sec { padding: clamp(18px, 3vw, 34px) 0 8px; }
.lp-banner { position: relative; display: block; overflow: hidden; border-radius: var(--product-image-radius, 14px); background: var(--sand, #f5f2ef); aspect-ratio: 16 / 7; margin-bottom: clamp(18px, 2.4vw, 30px); text-decoration: none; color: #fff; }
.lp-banner-img, .lp-banner-img picture, .lp-banner-img img { display: block; width: 100%; height: 100%; }
.lp-banner-img { position: absolute; inset: 0; }
.lp-banner-img img { object-fit: cover; transition: transform .7s ease; }
.lp-banner:hover .lp-banner-img img { transform: scale(1.03); }
.lp-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.02) 30%, rgba(0,0,0,.42) 100%); }
.lp-banner-txt { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: clamp(18px, 3vw, 36px); }
.lp-banner-h { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4.2vw, 54px); line-height: 1; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.lp-banner-cta { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 3px; white-space: nowrap; }
.lp-banner:hover .lp-banner-cta { border-bottom-color: #fff; }
@media (max-width: 767px) {
  .lp-banner { aspect-ratio: 4 / 3; border-radius: 10px; }
  .lp-banner-txt { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.lp2-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .lp2-grid-2 { max-width: none; } }

/* Fjärilar: färggrupper i samma grid, liten etikett mellan grupperna */
.lp-fj-group { margin: clamp(14px, 2vw, 24px) 0 12px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #6b6b6b); display: flex; align-items: center; gap: 14px; }
.lp-fj-group::after { content: ""; flex: 1; height: 1px; background: var(--line, #d9d4cf); }
.lp-fj-group + .lp-grid { margin-top: 0; }
.lp-fj-bundle-grid { display: grid; gap: clamp(18px, 3vw, 36px) clamp(14px, 2vw, 26px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-fj-bundle-1, .lp-fj-bundle-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }
.lp-fj-bundle-colors { margin: -6px 0 0; font-family: var(--sans); font-size: 12.5px; color: var(--muted, #6b6b6b); text-align: center; }
@media (max-width: 640px) { .lp-fj-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } }

/* Presentpåsar: storlekskort sida vid sida – lätta att jämföra, fler storlekar får plats i samma grid */
.lp-gift-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.lp-gift-3, .lp-gift-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
.lp-gift { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line, #d9d4cf); border-radius: var(--product-image-radius, 14px); overflow: hidden; background: #fff; }
.lp-gift.is-out { opacity: .72; }
.lp-gift-img { display: block; aspect-ratio: 1; background: var(--sand, #f5f2ef); }
.lp-gift-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-gift-body { padding: clamp(16px, 2vw, 24px); display: grid; gap: 8px; align-content: start; }
.lp-gift-eyebrow { margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.lp-gift-body h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }
.lp-gift-short { margin: 0; font-family: var(--sans); font-size: 14.5px; color: var(--ink, #1c1c1c); }
.lp-gift-fits { margin: 8px 0 0; font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.lp-gift-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lp-gift-list li { font-family: var(--sans); font-size: 14px; padding: 8px 12px; background: var(--color-accent-beige); color: var(--on-accent-beige); border-radius: var(--r-s, 6px); }
.lp-gift-price { margin: 8px 0 0; font-family: var(--sans); font-size: 16px; font-weight: 600; }
.lp-gift-price s { font-weight: 400; color: var(--muted, #6b6b6b); }
.lp-gift-cta { margin: 0; }
.lp-gift-out { font-family: var(--sans); font-size: 13px; color: var(--muted, #6b6b6b); }
.lp-gift-note { text-align: center; margin: clamp(16px, 2vw, 26px) 0 0; font-family: var(--sans); font-size: 14px; color: var(--muted, #6b6b6b); }
@media (max-width: 640px) {
  .lp-gift-grid, .lp-gift-3, .lp-gift-4 { grid-template-columns: 1fr; }
  .lp-gift { grid-template-columns: 120px 1fr; grid-template-rows: none; }
  .lp-gift-img { aspect-ratio: auto; height: 100%; }
  .lp-gift-body { padding: 14px; }
}

/* Produktväljare (2026-09-14): modellval som textval, bildgalleri, hela köpvalsrutan är en länk */
.lp-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 clamp(18px, 2.4vw, 28px); }
.lp-tabs .size-opt { min-width: 92px; }
@media (max-width: 640px) { .lp-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; } .lp-tabs::-webkit-scrollbar { display: none; } }
.lp-gal { position: relative; }
.lp-gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; height: 100%; cursor: grab; }
.lp-gal-track::-webkit-scrollbar { display: none; }
.lp-gal-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.lp-gal-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 1; }
.lp-gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.lp-gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--ink, #1c1c1c); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: opacity .2s; }
.lp-gal-prev { left: 10px; } .lp-gal-next { right: 10px; }
.lp-gal-arrow:disabled { opacity: .25; cursor: default; }
.lp-gal-arrow:hover:not(:disabled) { background: #fff; }
.lp-gal.has-many .lp-gal-arrow { display: inline-flex; }
@media (hover: none) { .lp-gal-arrow { display: none !important; } }
.lp-gal-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.lp-gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lp-gal-dots i.on { background: #fff; }
a.lp-opt { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
a.lp-opt:hover { border-color: var(--ink, #1c1c1c); text-decoration: none; }
a.lp-opt .btn { pointer-events: none; }
.lp-models-4 .lp-model-static .lp-model-btn { justify-self: start; margin-top: 6px; }

/* Sektionsavstånd på kategorisidorna (global regel 2026-09-14): sektionerna slutar med
   --space-section minus sec-heads egen övre marginal, så avståndet sektion → nästa rubrik blir exakt --space-section. */
.lp .lp-intro { padding-bottom: calc(var(--space-section) - var(--section-before)); }
.lp .lp-modelsec, .lp .lp-modelsec-static, .lp .lp-products, .lp .lp-banner-sec, .lp .lp-editorial, .lp .lp-usps, .lp .lp-reviews, .lp .lp-faq, .lp .lp-care, .lp .lp-life, .lp .lp-info, .lp .lp-routine, .lp .lp-extra, .lp .lp-sizes, .lp .lp-lines { padding-top: 0; padding-bottom: calc(var(--space-section) - var(--section-before)); }
.lp .lp-editorial:not(:has(> .sec-head)), .lp .lp-life, .lp .lp-care, .lp .lp-banner-sec .lp-banner { margin-top: var(--section-before); }
.lp .lp-banner-sec + .lp-banner-sec { padding-top: 0; }
.lp .lp-next.discover { padding-bottom: var(--space-section); }
.lp .lp-modelsec-static { padding-bottom: calc(var(--space-section) - var(--section-before)); }
.lp .lp-products-pick .lp-tabs { margin-bottom: clamp(18px, 2.4vw, 28px); }

/* ===== Startsidan: global sektionsluft (2026-09-14) =====
   Tidigare 6 + 26 + 10 px mellan sektionerna – nu --space-section från sista innehåll till nästa rubrikblock. */
.se-sec { padding: calc(var(--space-section) - var(--section-before)) 0 0; }
.se-sec:last-child, .se-sec:last-of-type { padding-bottom: var(--space-section); }
.se-sec-head { margin-top: var(--section-before); }
.se-discover .se-disc-row { margin-bottom: 0; }
.se-discover .se-disc-row + .se-disc-row { padding-top: calc(var(--space-section) - var(--section-before)); }   /* padding – margin skulle kollapsa med rubrikblockets egen topmarginal */
.se-feedback .se-car { margin-bottom: 0; }   /* sektionsluften styrs av sektionen, inte av karusellen */
.se-disc-cta { margin: 14px 0 0; }
/* Sektioner utan rubrikblock överst (t.ex. Nyhet, Upptäck mer-korten) får hela avståndet */
.se-sec.se-nyhet, .se-sec.se-hero-after { padding-top: var(--space-section); }