/* DIY-alarm steg – layout för flera produkter */
.diy-step { display: block; margin-bottom: 2rem; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; overflow: visible;}
.product-card { border:1px solid #ddd; border-radius:12px; padding:15px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05);
  display:flex; flex-direction:column; min-height:100%; overflow: visible;}
.product-card .thumb img { max-width:100%; height:auto; display:block; }
.product-card .name { font-size:1rem; margin:.5rem 0; min-height:3rem; }
.product-card .price { margin:.5rem 0; font-size:1.1rem; }
.product-card .price .old { text-decoration:line-through; opacity:.6; margin-right:.4rem; }
.product-card .price .special { font-weight:700; color:#c00; }
.product-card .actions { margin-top:auto; display:flex; gap:.5rem; }
.product-card .btn-view, .product-card .btn-cart { flex:1; text-align:center; padding:8px 12px; border-radius:6px; font-weight:500; text-decoration:none; cursor:pointer; }
.product-card .btn-view { background:#007bff; color:#fff; }
.product-card .btn-view:hover { background:#0056b3; }
.product-card .btn-cart { background:#28a745; color:#fff; border:0; }
.product-card .btn-cart:hover { background:#1e7e34; }

/* Gäller endast på DIY-sidan tack vare #diy-alarm */
#diy-alarm { padding-bottom: 220px; } /* justera till din footers faktiska höjd */

/* Tjockare ram + highlight */
#diy-alarm .product-card { position: relative; }
#diy-alarm .product-card.best {
  border: 2px solid #0d6efd;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.12);
}

/* Badge uppe till vänster */
#diy-alarm .best-badge {
  position: absolute;
  top: 10px;
  left: -6px;
  background: #0d6efd;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  pointer-events: none;
}

/* (valfritt) liten kron-emoji för extra flair */
/* #diy-alarm .best-badge::before { content: "👑 "; } */

/* Gråmarkera och gör otillgänglig */
#diy-alarm .btn-cart[disabled],
#diy-alarm .btn-cart:disabled {
  background: #b9b9b9;
  cursor: not-allowed;
  opacity: .8;
  box-shadow: none;
}

/* Centrera bilden i produktkorten (hor + vert) */
#diy-alarm .product-card .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;          /* gör en kvadratisk bildyta */
  overflow: hidden;             /* inget spill utanför kortet */
}

#diy-alarm .product-card .thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;          /* skala in utan att beskära */
}

/* ersätt tidigare #diy-alarm { padding-bottom: ... } */
#diy-alarm { padding-bottom: var(--footer-h, 220px); } /* 220px som fallback */

#diy-alarm { --diy-primary: var(--menu-blue, var(--bs-primary, #0d6efd)); }

/* Visa produkt-knappen (om du inte redan satt den) */
#diy-alarm .btn-view {
  background: var(--diy-primary);
  border-color: var(--diy-primary);
  color: #fff;
}
#diy-alarm .btn-view:hover {
  /* lätt mörkare på hover (stöds i moderna browsers) */
  background: color-mix(in srgb, var(--diy-primary) 85%, black);
  border-color: color-mix(in srgb, var(--diy-primary) 85%, black);
}

/* Bästa val – ram + badge i samma blå */
#diy-alarm .product-card.best {
  border: 2px solid var(--diy-primary);
  /* subtil gloria i samma ton; faller tillbaka tyst om color-mix saknas */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--diy-primary) 20%, transparent);
}
#diy-alarm .best-badge {
  background: var(--diy-primary);
  color: #fff;
}

/* Mer luft mellan "Exkl moms" och knapparna */
#diy-alarm .product-card .tax {
  display: block;
  margin-top: 0.2rem;      /* liten luft från priset */
  margin-bottom: 0.8rem;   /* öka avståndet till knapparna */
  line-height: 1.15;
  opacity: .9;                 /* valfritt: lite svagare */
}

/* Säkerställ ett minsta avstånd ovanför knapparna även med flex-auto */
#diy-alarm .product-card .actions {
  margin-top: auto;        /* behåll att knapparna hamnar längst ner i kortet */
  padding-top: 0.5rem;     /* minst detta avstånd från .tax */
}

/* Fetstil på priset */
#diy-alarm .product-card .price { 
  font-weight: 700;          /* gör ordinarie pris fetstil */
}

/* Men låt “ordinarie” (överstruket) i kampanj-pris vara normalvikt */
#diy-alarm .product-card .price .old {
  font-weight: 400;
}

/* (valfritt) gör kampanjpriset extra tydligt */
#diy-alarm .product-card .price .special {
  font-weight: 700;
}