/* =========================================================================
   Produktkategorier - [rubber_produkter]
   Ljusa kort for den ljusa produktsektionen. Ingen egen bakgrund, allt
   ligger direkt pa sidans sektion.
   ====================================================================== */
.rc-prodwrap,
.rc-prod{
  --rc-ink:#082234;
  --rc-ink-soft:rgba(8,34,52,.68);
  --rc-line:rgba(8,34,52,.12);
  --rc-line-strong:rgba(8,34,52,.28);
  --rc-accent:#CCE4FF;
  --rc-card:#ffffff;
  --rc-media-light:#eef3f8;
  --rc-prod-cols:3;
  --rc-prod-gap:.875em;
  --rc-prod-radius:4px;
  --rc-prod-ratio:3 / 2;
  --rc-ease-out:cubic-bezier(.22,1,.36,1);
  --rc-font:"Google Sans Flex","Google Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--rc-font);
  font-weight:400;
  color:var(--rc-ink);
}
.rc-prodwrap{
  display:block;
  width:100%;
  font-size:16px;
}
.rc-prodwrap *,.rc-prodwrap *::before,.rc-prodwrap *::after,
.rc-prod *,.rc-prod *::before,.rc-prod *::after{box-sizing:border-box;}

/* ---------- Filterknappar ---------- */
.rc-prodfilter{
  display:flex;
  gap:.5em;
  margin:0 -3px 1.5em;
  padding:3px;                       /* plats for fokusringen */
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rc-prodfilter::-webkit-scrollbar{display:none;}

/* Overskriver temats button-stil och :hover (rod) - all farg last har */
.rc-prodfilter button.rc-prodfilter__btn,
.rc-prodfilter button.rc-prodfilter__btn:hover,
.rc-prodfilter button.rc-prodfilter__btn:focus,
.rc-prodfilter button.rc-prodfilter__btn:active{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  flex:none;
  align-items:center;
  min-height:2.75em;
  margin:0;
  padding:0 1.25em;
  font-family:inherit;
  font-size:.9375em;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  color:var(--rc-ink) !important;
  background-color:transparent !important;
  background-image:none !important;
  border:1px solid var(--rc-line-strong) !important;
  border-radius:32px !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
.rc-prodfilter button.rc-prodfilter__btn:hover{border-color:var(--rc-ink) !important;}
.rc-prodfilter button.rc-prodfilter__btn[aria-pressed="true"],
.rc-prodfilter button.rc-prodfilter__btn[aria-pressed="true"]:hover{
  color:#fff !important;
  background-color:var(--rc-ink) !important;
  border-color:var(--rc-ink) !important;
  cursor:default;
}
.rc-prodfilter button.rc-prodfilter__btn:focus{outline:none;}
.rc-prodfilter button.rc-prodfilter__btn:focus-visible{
  outline:2px solid var(--rc-ink);
  outline-offset:2px;
}

/* ---------- Rutnatet ---------- */
.rc-prod{
  display:grid;
  grid-template-columns:repeat(var(--rc-prod-cols),minmax(0,1fr));
  gap:var(--rc-prod-gap);
  width:100%;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  font-size:16px;
}
.rc-prod--c1{--rc-prod-cols:1;}
.rc-prod--c2{--rc-prod-cols:2;}
.rc-prod--c4{--rc-prod-cols:4;}

/* Overskriver temats/Elementors listmarginaler och punkter */
.rc-prod > li.rc-prod__item{
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.rc-prodwrap .rc-prod > li.rc-prod__item[hidden]{display:none !important;}
.rc-prod > li.rc-prod__item::before,
.rc-prod ul.rc-prod__subs > li::before{content:none;}

/* Korten glider in nar filtret byts - svarar pa klicket, inget annat */
@keyframes rc-prod-in{
  from{opacity:0;transform:translateY(.75em);}
  to{opacity:1;transform:none;}
}
.rc-prod > li.rc-prod__item.is-entering{
  animation:rc-prod-in .55s var(--rc-ease-out) both;
  animation-delay:calc(var(--rc-i,0) * 60ms);
}

/* ---------- Kortet ---------- */
.rc-prod__card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  background-color:var(--rc-card);
  border:1px solid var(--rc-line);
  border-radius:var(--rc-prod-radius);
  isolation:isolate;                 /* Safari: rundade horn klipper skalad bild */
  transition:border-color .35s ease;
}
.rc-prod__card:hover{border-color:var(--rc-line-strong);}

/* ---------- Bilden ---------- */
.rc-prod__media{
  position:relative;
  flex:none;
  aspect-ratio:var(--rc-prod-ratio);
  overflow:hidden;
  background-image:linear-gradient(145deg,#10405f,#082234 72%);
}
.rc-prod--contain .rc-prod__media:not(.is-empty){
  background-image:none;
  background-color:var(--rc-media-light);
}

/* Overskriver Elementors .elementor img{height:auto} */
.rc-prod .rc-prod__media img.rc-prod__img{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0;
  padding:0;
  border-radius:0;
  object-fit:cover;
  object-position:center;
  transform:scale(1.001);
  transition:transform .9s var(--rc-ease-out);
  pointer-events:none;
}
.rc-prod.rc-prod--contain .rc-prod__media img.rc-prod__img{
  object-fit:contain;
  padding:8%;
}
.rc-prod .rc-prod__card:hover .rc-prod__media img.rc-prod__img{transform:scale(1.04);}

/* ---------- Texten ---------- */
.rc-prod__body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  padding:clamp(1.25em,2vw,2em);
}
.rc-prod h2.rc-prod__title,
.rc-prod h3.rc-prod__title,
.rc-prod h4.rc-prod__title{
  margin:0;
  font-family:inherit;
  font-size:clamp(22px,1.75vw,30px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--rc-ink) !important;
}

/* Rubriklanken tacker hela kortet (::after). Underkategorierna och
   "Se alla" ligger ovanpa med z-index 2. */
.rc-prod a.rc-prod__link,
.rc-prod a.rc-prod__link:link,
.rc-prod a.rc-prod__link:visited,
.rc-prod a.rc-prod__link:hover,
.rc-prod a.rc-prod__link:focus,
.rc-prod a.rc-prod__link:active{
  color:inherit !important;
  text-decoration:none !important;
  border:0;
  box-shadow:none !important;
  outline:none;
}
.rc-prod a.rc-prod__link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}
/* Tvafargad fokusram inuti kortet: navy + ljusbla */
.rc-prod a.rc-prod__link:focus-visible::after{
  box-shadow:inset 0 0 0 2px var(--rc-ink),inset 0 0 0 4px var(--rc-accent);
}
/* Understruken rubrik nar kortet hovras - men inte nar pekaren star pa en
   underkategori, da ar det den lanken som galler. */
.rc-prod .rc-prod__card:hover:not(:has(.rc-prod__subs:hover,.rc-prod__all:hover)) a.rc-prod__link,
.rc-prod a.rc-prod__link:focus-visible{
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:.18em;
}

.rc-prod p.rc-prod__text{
  margin:.7em 0 0;
  max-width:34em;
  font-family:inherit;
  font-size:.9375em;
  font-weight:400;
  line-height:1.5;
  color:var(--rc-ink-soft) !important;
}

/* ---------- Underkategorier ---------- */
.rc-prod ul.rc-prod__subs{
  position:relative;
  z-index:2;
  margin:1.4em 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  border-top:1px solid var(--rc-line);
}
.rc-prod ul.rc-prod__subs > li{
  margin:0;
  padding:0;
  list-style:none;
  border-bottom:1px solid var(--rc-line);
}
.rc-prod a.rc-prod__sub,
.rc-prod a.rc-prod__sub:link,
.rc-prod a.rc-prod__sub:visited,
.rc-prod a.rc-prod__sub:hover,
.rc-prod a.rc-prod__sub:focus,
.rc-prod a.rc-prod__sub:active{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  min-height:2.75em;                 /* 44 px tryckyta */
  padding:.55em 0;
  font-family:inherit;
  font-size:.9375em;
  font-weight:400;
  line-height:1.35;
  color:var(--rc-ink) !important;
  text-decoration:none !important;
  border:0;
  box-shadow:none !important;
}
.rc-prod a.rc-prod__sub .rc-prod__arrow{
  opacity:.3;
  transform:translateX(-.3em);
  transition:opacity .3s ease,transform .45s var(--rc-ease-out);
}
.rc-prod a.rc-prod__sub:hover .rc-prod__arrow,
.rc-prod a.rc-prod__sub:focus-visible .rc-prod__arrow{
  opacity:1;
  transform:none;
}
.rc-prod a.rc-prod__sub:focus-visible{
  outline:2px solid var(--rc-ink);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- Se alla ---------- */
.rc-prod a.rc-prod__all,
.rc-prod a.rc-prod__all:link,
.rc-prod a.rc-prod__all:visited,
.rc-prod a.rc-prod__all:hover,
.rc-prod a.rc-prod__all:focus,
.rc-prod a.rc-prod__all:active{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.75em;
  align-self:flex-start;
  margin-top:auto;                   /* samma hojd i alla kort */
  padding-top:1.4em;
  font-family:inherit;
  font-size:.9375em;
  font-weight:400;
  line-height:1.2;
  color:var(--rc-ink) !important;
  text-decoration:none !important;
  border:0;
  box-shadow:none !important;
}
.rc-prod__all-icon{
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:2.5em;
  height:2.5em;
  color:var(--rc-ink);
  border:1px solid var(--rc-line-strong);
  border-radius:50%;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
/* Ikonen fylls nar kortet eller lanken hovras - visar att hela kortet leder dit */
.rc-prod .rc-prod__card:hover:not(:has(.rc-prod__subs:hover)) .rc-prod__all-icon,
.rc-prod a.rc-prod__all:hover .rc-prod__all-icon,
.rc-prod a.rc-prod__all:focus-visible .rc-prod__all-icon{
  color:#fff;
  background-color:var(--rc-ink);
  border-color:var(--rc-ink);
}
.rc-prod a.rc-prod__all:focus-visible{
  outline:2px solid var(--rc-ink);
  outline-offset:3px;
  border-radius:2em;
}

.rc-prod__arrow{flex:none;width:1em;height:.75em;}

/* Skarmlasartext */
.rc-prod__sr{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Responsivt ---------- */
@media screen and (max-width:1199px){
  .rc-prod.rc-prod--c4{--rc-prod-cols:2;}
}

/* Liggande kort: bild till vanster, text till hoger. Alltid for en
   kolumn, och for alla varianter mellan 600 och 991 px. */
.rc-prod--c1 .rc-prod__card{flex-direction:row;}
.rc-prod--c1 .rc-prod__media{width:40%;aspect-ratio:auto;min-height:18em;}

@media screen and (max-width:991px){
  .rc-prod.rc-prod--c2,
  .rc-prod.rc-prod--c3,
  .rc-prod.rc-prod--c4{--rc-prod-cols:1;}
  .rc-prod .rc-prod__card{flex-direction:row;}
  .rc-prod .rc-prod__media{width:38%;aspect-ratio:auto;min-height:16em;}
}
@media screen and (max-width:599px){
  .rc-prodfilter{margin-bottom:1.125em;}
  .rc-prod{--rc-prod-gap:.625em;}
  .rc-prod .rc-prod__card{flex-direction:column;}
  .rc-prod .rc-prod__media{width:100%;aspect-ratio:16 / 9;min-height:0;}
}

@media (prefers-reduced-motion:reduce){
  .rc-prodwrap *,.rc-prod *{transition-duration:.01ms !important;}
  .rc-prod > li.rc-prod__item.is-entering{animation:none;}
  .rc-prod .rc-prod__card:hover .rc-prod__media img.rc-prod__img{transform:scale(1.001);}
}