:root{
  --bg:#fafafa;
  --ink:#121212;
  --muted:#6b6b6b;
  --sage:#cfd7cf; --sage-strong:#bfcabf;
  --accent:#1e1e1e;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --header-h:68px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p{ line-height:1.75; color:var(--muted); }
body{ font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-size:17px; }

h1,h2,h3{ font-family:"Playfair Display",serif; color:var(--ink); margin:0 0 .5rem; }
h1{ font-size:clamp(30px,4.2vw,52px); }
h2{ font-size:clamp(28px,3.6vw,44px); }
h3{ font-size:22px; }

.container{ width:min(1080px,92vw); margin-inline:auto; }

/* Header / nav */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:rgba(250,250,250,.8); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #ececec;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0;
}
.brand img{ height:56px; width:auto; }

.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ font-weight:500; }
.nav .btn{ margin-left:8px; }

.menu-toggle{ display:none; background:#fff; border:1px solid #e7e7e7; border-radius:10px; padding:8px 12px; font-size:18px; }

.btn{
  display:inline-block; padding:12px 20px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:600; box-shadow:var(--shadow);
  transition:.15s transform ease, .25s box-shadow ease, background-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }
.btn-lg{ padding:14px 28px; font-size:18px; }
.btn.outline{ background:transparent; color:var(--ink); border:1px solid #d9d9d9; }

/* HERO (används även på produktsidan) */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 600px at 80% -10%, #ffffff 0%, #f4f6f4 50%, #eef1ee 100%);
  border-bottom:1px solid #ececec;
}
.hero-inner{ padding:90px 0 70px; display:flex; align-items:center; min-height:46vh; }
.hero-text{ max-width:960px; }
.hero-banner { width: 100%; max-width: 2760px; height: auto; display:block; margin:0 auto 20px; }
.hero-sub{ font-size:18px; margin:6px 0 26px; }

/* blad-dekor (startsida) */
.leaf{
  position:absolute; width:36vw; max-width:520px; aspect-ratio:1.1/1;
  opacity:.28; background:
    radial-gradient(ellipse at 30% 40%, var(--sage) 0 40%, transparent 43%),
    radial-gradient(ellipse at 55% 55%, var(--sage-strong) 0 38%, transparent 41%);
  filter: blur(8px) saturate(90%); border-radius:50%;
}
.leaf-tl{ top:-14vw; left:-10vw; transform:rotate(-8deg); }
.leaf-br{ bottom:-16vw; right:-10vw; transform:rotate(12deg); }

.section{ padding:84px 0; scroll-margin-top: calc(var(--header-h) + 12px); }
.section.alt{ background:linear-gradient(180deg,#f8faf8 0%,#f3f6f3 100%); }

.grid-2{ display:grid; gap:32px; align-items:center; grid-template-columns: 1.2fr 1fr; }
@media (max-width:880px){
  .grid-2{ grid-template-columns:1fr; }
  .brand img{ height:48px; }
  .hero-inner{ padding:70px 0 56px; min-height:38vh; }
  .hero-banner{ width:min(640px,94vw); }
  .menu-toggle{ display:inline-block; }
  .nav{
    position:absolute; top:calc(var(--header-h) - 6px); right:4vw; left:4vw;
    background:#fff; border:1px solid #ececec; border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.1); padding:14px;
    display:none; flex-direction:column; gap:10px;
  }
  .nav.show{ display:flex; }
  .nav .btn{ width:100%; text-align:center; }
}

/* kort & micro-anims */
.card, .price-list li, .services li, .prod{ transition:transform .18s ease, box-shadow .2s ease; }
.card:hover, .price-list li:hover, .services li:hover, .prod:hover{
  transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12);
}
.card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card img{ width:100%; height:auto; }
.card.pad{ padding:16px; }

/* tjänster (startsida) */
.services{
  list-style:none; padding:0; margin:22px 0 10px;
  display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:980px){ .services{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .services{ grid-template-columns:1fr; } }
.services li{ background:#fff; border-radius:var(--radius); padding:20px; min-height:150px; }
.services h3{ margin-bottom:6px; }
.center{ text-align:center; }

/* prislista (startsida) */
.price-group{ margin-bottom:18px; }
.price-group details{ background:#fff; border:1px solid #ececec; border-radius:14px; overflow:hidden; }
.price-group summary{ cursor:pointer; padding:16px 18px; font-weight:700; list-style:none; }
.price-group summary::-webkit-details-marker{ display:none; }
.price-list{ list-style:none; padding:0; margin:0; border-top:1px solid #f0f0f0; }
.price-list li{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px; background:#fff; border-bottom:1px solid #f0f0f0; }
.price-list li:last-child{ border-bottom:none; }
.price-list span{ color:#444; }
.price-list strong{ color:#111; font-weight:700; }
.muted{ color:#7a7a7a; font-size:14px; }

/* mobil CTA-bar (startsida) */
.cta-bar{ display:none; }
@media (max-width:860px){
  .cta-bar{
    position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.92);
    backdrop-filter: blur(10px); border-top:1px solid #ececec; padding:10px 16px; z-index:60; display:block;
  }
  .cta-bar .btn{ width:100%; }
  body{ padding-bottom:72px; }
}

/* footer */
.site-footer{ border-top:1px solid #ececec; background:#fff; padding:28px 0; margin-top:20px; }
.footer-flex{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; }
.site-footer p{ margin:0; color:#8a8a8a; font-size:14px; }
.footer-links a{ color:#686868; }

/* ===================== */
/*   PRODUKTSIDA CSS     */
/* ===================== */

.prod-hero { padding:60px 0 16px; text-align:center; }

/* Grid */
.prod-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:980px){ .prod-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .prod-grid{ grid-template-columns:1fr; } }

.prod{
  background:#fff; border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}

/* Bildhuvud – nu styrs höjd av aspect-ratio, inte px */
.prod figure{
  margin:0; padding:0;
  background:#f6f6f6; border-bottom:1px solid #eee;
  aspect-ratio: 16 / 10;         /* default: lite “wide” för gruppbilder */
}

/* Porträtt-läge för stående flaskor */
.prod--tall figure{
  aspect-ratio: 3 / 4;           /* PORTRÄTT! */
}

/* Kompakt läge (om du vill) */
.prod--short figure{
  aspect-ratio: 4 / 3;
}

/* Bilden fyller rutan */
.prod figure img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
}

/* Visa hela bilden utan beskärning när du verkligen behöver */
.prod figure img.ph--contain{
  object-fit:contain; background:#f6f6f6;
}

.prod .txt{ padding:18px; }
.prod h3{ margin:0 0 8px; line-height:1.25; }
.prod p{ margin:0; }

.group{ margin:36px 0 10px; }
.group h2{ margin-bottom:6px; }
.tag{
  display:inline-block; font-size:12px; padding:4px 10px;
  border:1px solid #e8e8e8; border-radius:999px; color:#575757; margin-right:6px;
}