.example-note{
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  background: color-mix(in oklab, var(--heelit-rose) 70%, white);
  border: 1px solid var(--heelit-red);
  color: var(--heelit-black);
  font-size: .8rem;
  line-height: 1.5;
}
.example-note strong{font-weight:600}
details.faq-item{border-bottom:1px solid var(--border)}
details.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  font-size:var(--text-sm, .875rem);
  font-weight:500;
  text-align:left;
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{
  content:"";
  width:.65rem;height:.65rem;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s;
  flex:none;
  margin-top:-.25rem;
}
details.faq-item[open] summary::after{transform:rotate(225deg);margin-top:.15rem}
details.faq-item .faq-answer{padding:0 0 1rem;font-size:.875rem;color:var(--foreground)}
.qty-box{display:flex;align-items:center;border:1px solid var(--input);height:3.25rem}
.qty-box button{padding:0 1rem;background:transparent;color:inherit;cursor:pointer;border:0;height:100%}
.qty-box span{min-width:2rem;text-align:center}
.preview-toast{
  position:fixed;left:50%;top:1.25rem;transform:translateX(-50%) translateY(-1rem);
  background:var(--background);color:var(--foreground);border:1px solid var(--border);
  padding:.75rem 1rem;font-size:.875rem;z-index:60;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;box-shadow:0 8px 24px #0002;
}
.preview-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.preview-toast a{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
.hp-website{
  position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;
}
.admin-table{width:100%;border-collapse:collapse;font-size:.875rem}
.admin-table th,.admin-table td{border-bottom:1px solid var(--border, #E6D8CB);padding:.75rem .5rem;text-align:left;vertical-align:top}
.admin-table th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.admin-status{appearance:none;border:1px solid var(--input,#ccc);background:transparent;padding:.35rem .5rem;font:inherit}
.admin-badge{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--primary,#561616);color:var(--primary,#561616);padding:.15rem .4rem;margin-left:.4rem}

.discount-ok { color: #1f5a32; }
.discount-err { color: #561616; }


/* Admin: alltid synlig meny + kort, även på mobil */
.admin-nav{display:flex;flex-wrap:wrap;gap:.5rem;position:sticky;top:0;z-index:30;background:var(--background,#F5EDE6);padding:.75rem 0;margin:0 -0.25rem .5rem;border-bottom:1px solid var(--border,#E6D8CB)}
.admin-nav a,.admin-nav .admin-nav-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.5rem 1rem;border:1px solid var(--primary,#561616);color:var(--primary,#561616);background:#fff;text-decoration:none;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.admin-nav a:hover,.admin-nav .admin-nav-btn:hover,.admin-nav a[aria-current="true"]{background:var(--primary,#561616);color:#fff}
.admin-cards{display:grid;gap:1rem;margin:1rem 0 1.5rem}
@media (min-width:640px){.admin-cards{grid-template-columns:1fr 1fr}}
.admin-card{display:block;border:1px solid var(--border,#E6D8CB);background:#fff;padding:1.25rem 1.5rem;text-decoration:none;color:inherit}
.admin-card:hover{border-color:var(--primary,#561616)}
.admin-card h3{font-family:Georgia,serif;font-size:1.5rem;margin:0 0 .35rem;color:var(--primary,#561616)}
#rabattkoder,#ordrar,#installningar{scroll-margin-top:8rem}

/* Rabattfält på kundsidan: synligt utan extra klick */
.discount-box{margin-top:1rem;padding:1rem;border:1px solid var(--primary,#561616);background:#fff}
.discount-box legend,.discount-box .discount-heading{font-size:.95rem;font-weight:600;margin:0 0 .5rem}