/* Banneret med Mia og Teo og kategorikortene med ekte produktbilder, felles
   for LME Butikk (/butikk) og den engelske LME Shop (/shop). Renate
   21. oktober 2026: "Lag banner med Mia & Teo til nettbutikken og engelsk
   shop. Gjør butikkene mer fristende å besøke og mer profesjonelt."
   Bildet er laget med Nano Banana 2.1 i OpenArt, med det offisielle bildet
   images/mia-og-teo.jpg som forbilde. Fargene er LMEs egne, og hver
   overgang holder seg i en fargefamilie (ingen rosa mot gul). */

.lb-banner {
  position: relative;
  max-width: 1200px;
  margin: 24px auto 22px;
  border-radius: 28px;
  overflow: hidden;
  background: #FBF3E6;
  box-shadow: 0 18px 50px -24px rgba(61, 36, 56, .45);
  min-height: 420px;
  display: flex;
  align-items: center;
}
.lb-banner picture,
.lb-banner .lb-banner-bilde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lb-banner .lb-banner-bilde {
  object-fit: cover;
  object-position: right center;
}
.lb-banner-tekst {
  position: relative;
  z-index: 1;
  width: 54%;
  padding: 44px 32px 44px 52px;
}
.lb-banner-merke {
  display: inline-block;
  background: #fff;
  color: #E91E89;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px -8px rgba(233, 30, 137, .6);
  margin-bottom: 16px;
}
.lb-banner h1 {
  font-family: 'Playpen Sans', system-ui, sans-serif;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #3d2438;
  margin: 0 0 14px;
}
.lb-banner h1 em { font-style: normal; color: #E91E89; }
.lb-banner p {
  font-size: 17px;
  line-height: 1.55;
  color: #5b4054;
  margin: 0 0 22px;
  max-width: 480px;
}
.lb-banner-knapper { display: flex; gap: 12px; flex-wrap: wrap; }
.lb-banner-knapper a {
  text-decoration: none;
  font-family: 'Playpen Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lb-banner-knapper a:hover { transform: translateY(-2px); }
.lb-banner-knapper .hoved {
  background: #E91E89;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(233, 30, 137, .9);
}
.lb-banner-knapper .andre {
  background: #fff;
  color: #3d2438;
  border: 1.5px solid #f0dde6;
}
.lb-banner-tillit {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
  color: #5b4054;
}
.lb-banner-tillit li { display: flex; align-items: center; gap: 6px; }

@media (max-width: 820px) {
  .lb-banner {
    flex-direction: column;
    min-height: 0;
    margin: 16px 0 18px;
    border-radius: 22px;
  }
  .lb-banner picture,
  .lb-banner .lb-banner-bilde {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 900 / 806;
  }
  .lb-banner .lb-banner-bilde { object-position: center; }
  .lb-banner-tekst { width: 100%; padding: 22px 20px 26px; }
  .lb-banner p { font-size: 16px; }
}

/* Kategorikortene: et ekte produktbilde øverst, og navnet og teksten under.
   Bildene er produktenes egne, ikke nye illustrasjoner. */
.lb-kat {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1080px) { .lb-kat { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .lb-kat { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.lb-kat a {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f0dde6;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #3d2438;
  box-shadow: 0 10px 28px -20px rgba(61, 36, 56, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lb-kat a:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(61, 36, 56, .6); }
.lb-kat .lb-kat-bilde {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #FBF3E6;
}
.lb-kat .lb-kat-bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.lb-kat a:hover .lb-kat-bilde img { transform: scale(1.05); }
.lb-kat .lb-kat-tekst { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lb-kat .lb-kat-navn {
  font-family: 'Playpen Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.lb-kat .lb-kat-om { font-size: 13.5px; line-height: 1.4; color: #6b4760; flex: 1; }
.lb-kat .lb-kat-se { font-size: 13.5px; font-weight: 700; color: #E91E89; margin-top: 6px; }
@media (max-width: 700px) {
  .lb-kat .lb-kat-navn { font-size: 16px; }
  .lb-kat .lb-kat-om { font-size: 12.5px; }
}