/* ==========================================================================
   bi-produkt.css — Badrumsinspiration.se
   Produktkort på stengrön botten + två-nivåers meny.
   Tillägg till bi.css. Skriver medvetet inte över något som redan finns där.
   2026-08-21
   ========================================================================== */

:root{
  --p-gron:#0E1917;
  --p-gron-ljus:#16241f;
  --p-gron-mork:#0a1210;
  --p-porslin:#F2EFE9;
  --p-brons:#9C7A4E;
  --p-linje:rgba(242,239,233,.14);
}

/* --------------------------------------------------------------- MENY ---- */
.menu .mnu{position:relative;display:inline-flex}

.menu .mnu-t{position:relative;display:inline-flex;align-items:center;gap:.42em}

.menu .mnu-t::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:currentColor;opacity:0;transform:scaleX(.4);transform-origin:left;
  transition:opacity .28s ease,transform .28s ease;
}
.menu .mnu-t:hover::after,.menu .mnu.open .mnu-t::after{opacity:.55;transform:scaleX(1)}

.menu .mnu-pil{
  width:.42em;height:.42em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-.12em);
  transition:transform .28s ease;
}
.menu .mnu.open .mnu-pil{transform:rotate(-135deg) translateY(-.12em)}

/* sekundära poster – tonade så de två primära leder blicken */
.menu .mnu-s{opacity:.62}
.menu .mnu-s:hover{opacity:1}

.menu .mnu-d{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,-6px);
  min-width:270px;padding:10px;border-radius:14px;
  background:rgba(10,18,16,.92);backdrop-filter:blur(18px);
  border:1px solid var(--p-linje);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,transform .26s ease,visibility .26s;
  z-index:60;
}
.menu .mnu:hover .mnu-d,.menu .mnu:focus-within .mnu-d,.menu .mnu.open .mnu-d{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.menu .mnu-d::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}

.menu .mnu-d a{
  display:block;padding:10px 14px;border-radius:9px;
  font-size:.9rem;line-height:1.3;white-space:nowrap;
  color:var(--p-porslin);opacity:.8;
  transition:background .2s ease,opacity .2s ease;
}
.menu .mnu-d a:hover{background:rgba(242,239,233,.08);opacity:1}

@media (max-width:900px){
  .menu .mnu-d{position:static;transform:none;min-width:0;width:100%;
    background:none;border:0;box-shadow:none;backdrop-filter:none;padding:4px 0 10px}
  .menu .mnu{display:block;width:100%}
  .menu .mnu-d a{white-space:normal;padding:8px 0;opacity:.72}
}

/* ------------------------------------------------------- PRODUKTKORT ---- */
.pgrid{
  display:grid;gap:20px;margin:34px 0 56px;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
}
@media (max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr);gap:12px}}

.pkort{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:16px;text-decoration:none;
  border:1px solid var(--p-linje);
  background:var(--p-gron-mork);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s ease,box-shadow .4s ease;
}
.pkort:hover{
  transform:translateY(-4px);
  border-color:rgba(156,122,78,.42);
  box-shadow:0 22px 46px rgba(0,0,0,.34);
}

/* Den gröna bottnen med produkten centrerad — samma idé som heron. */
.pkort-bild{
  position:relative;aspect-ratio:1/1;
  display:grid;place-items:center;
  padding:15%;
  background:
    radial-gradient(120% 96% at 50% 26%, var(--p-gron-ljus) 0%, var(--p-gron) 58%, var(--p-gron-mork) 100%);
  overflow:hidden;
}
/* mjukt ljus uppifrån, som studiobelysning */
.pkort-bild::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 42% at 50% 8%, rgba(242,239,233,.10) 0%, transparent 70%);
  pointer-events:none;
}
/* golvskugga under produkten */
.pkort-bild::after{
  content:"";position:absolute;left:22%;right:22%;bottom:11%;height:9%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5) 0%, transparent 72%);
  filter:blur(5px);pointer-events:none;
}
.pkort-bild img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;
  mix-blend-mode:normal;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.pkort:hover .pkort-bild img{transform:scale(1.045)}

/* plattor och tvättställ vill fylla ytan mer än en smal kran */
.pgrid--yta .pkort-bild{padding:0}
.pgrid--yta .pkort-bild img{object-fit:cover}
.pgrid--yta .pkort-bild::after{display:none}

.pkort-txt{padding:16px 16px 18px;display:flex;flex-direction:column;gap:5px;flex:1}

.pkort-kod{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--p-brons);opacity:.9;
}
.pkort-txt h3{
  font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:1.06rem;line-height:1.24;color:var(--p-porslin);margin:0;
}
.pkort-txt p{font-size:.83rem;line-height:1.45;color:var(--p-porslin);opacity:.6;margin:0}

.pkort-meta{
  font-size:.7rem;line-height:1.5;letter-spacing:.02em;
  color:var(--p-porslin);opacity:.42;margin-top:2px;
}
.pkort-las{
  margin-top:auto;padding-top:12px;
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--p-porslin);opacity:.55;transition:opacity .3s ease,gap .3s ease;
}
.pkort-las i{
  width:1.1em;height:1px;background:currentColor;display:inline-block;
  transition:width .3s ease;
}
.pkort:hover .pkort-las{opacity:.95;gap:.75em}
.pkort:hover .pkort-las i{width:1.7em}

.pkort--hub .pkort-bild{padding:13%}

/* ------------------------------------------------------------ SERIER ---- */
.pserie{margin:0 0 18px}
.pserie-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  padding-bottom:12px;margin-top:52px;
  border-bottom:1px solid var(--p-linje);
}
.pserie-h h2{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:0}
.pserie-h p{font-size:.86rem;opacity:.55;margin:0}
.pserie .pgrid{margin-top:22px}

/* ------------------------------------------------------ TEXT & FAQ ------ */
.pintro{
  max-width:70ch;font-size:1.02rem;line-height:1.72;
  opacity:.76;margin:0 0 18px;
}
.pintro strong{opacity:1;font-weight:500}

.pnote{
  margin:56px 0 0;padding:30px 32px;border-radius:18px;
  border:1px solid var(--p-linje);background:rgba(242,239,233,.03);
}
.pnote h2{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:0 0 12px}
.pnote p{max-width:70ch;font-size:.95rem;line-height:1.7;opacity:.72;margin:0 0 10px}
.pnote p:last-child{margin-bottom:0}

.plinks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.plinks a{
  display:inline-block;padding:7px 15px;border-radius:999px;
  border:1px solid var(--p-linje);font-size:.83rem;
  text-decoration:none;opacity:.8;transition:border-color .25s,opacity .25s;
}
.plinks a:hover{border-color:rgba(156,122,78,.5);opacity:1}

.pfaq-wrap{margin:64px 0 0}
.pfaq{
  margin-top:24px;
  columns:2;column-gap:38px;
}
@media (max-width:820px){.pfaq{columns:1}}
.pfaq-i{break-inside:avoid;margin:0 0 26px}
.pfaq-i h3{
  font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:1.06rem;line-height:1.3;margin:0 0 7px;
}
.pfaq-i p{font-size:.92rem;line-height:1.68;opacity:.7;margin:0;max-width:56ch}

/* --------------------------------------------------------------- CTA ---- */
.pcta{
  margin:70px 0 20px;padding:44px 40px;border-radius:20px;text-align:center;
  border:1px solid var(--p-linje);
  background:radial-gradient(120% 140% at 50% 0%, var(--p-gron-ljus) 0%, var(--p-gron-mork) 72%);
}
.pcta h2{font-size:clamp(1.35rem,2.8vw,2.1rem);margin:0 0 12px}
.pcta p{max-width:56ch;margin:0 auto 24px;font-size:.95rem;line-height:1.7;opacity:.7}
@media (max-width:560px){.pcta{padding:34px 22px}}