/* KeramikByDagmar Webshop — fælles stylesheet */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --biskuit:#E8DCC8;
  --terra:#A8531F;
  --terra-dark:#7E3D14;
  --ovnsort:#1F1A16;
  --blaagroen:#3D5C56;
  --kridt:#FAF7F0;
  --ryger:#6B5D4F;
  --ryger-light:#8C7F70;
  --linje:rgba(31,26,22,0.1);
}
body{
  font-family:'Public Sans',sans-serif;
  background:var(--kridt);
  color:var(--ovnsort);
  line-height:1.5;
}
h1,h2,h3,.serif{font-family:'Fraunces',serif}
img{display:block;max-width:100%}
a{color:inherit}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,240,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linje);
  padding:1.1rem 4vw;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:500;letter-spacing:-0.01em;color:var(--ovnsort);text-decoration:none}
.nav{display:flex;gap:2.2rem;align-items:center}
.nav a{color:var(--ryger);text-decoration:none;font-size:0.92rem;letter-spacing:0.01em;transition:color .2s}
.nav a:hover{color:var(--terra)}
.cart-pill{
  background:var(--ovnsort);color:var(--kridt);
  padding:0.5rem 1.1rem;border-radius:100px;
  font-size:0.85rem;display:flex;align-items:center;gap:0.4rem;
  cursor:pointer;border:none;
}
@media (max-width:900px){ .nav{display:none} }

/* ===== Lagerstatus-prikker (signaturelement) ===== */
.lager-prikker{display:flex;gap:4px}
.prik{width:7px;height:7px;border-radius:50%;background:var(--terra);flex-shrink:0}
.prik.tom{background:transparent;border:1.3px solid var(--ryger-light)}

/* ===== Tom-tilstand / fejl ===== */
.tom-tilstand{
  text-align:center;padding:5rem 4vw;color:var(--ryger);
}
.tom-tilstand h3{font-size:1.4rem;font-weight:400;margin-bottom:0.6rem;color:var(--ovnsort)}

/* ===== Loader ===== */
.shop-loader{
  display:flex;align-items:center;justify-content:center;
  min-height:50vh;
}
.spinner{
  width:36px;height:36px;border:3px solid var(--biskuit);
  border-top-color:var(--terra);border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

footer{background:var(--ovnsort);color:rgba(250,247,240,0.6);padding:3.5rem 4vw 2rem}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem}
.footer-logo{font-family:'Fraunces',serif;color:var(--kridt);font-size:1.3rem;margin-bottom:0.8rem}
footer h4{color:var(--kridt);font-size:0.85rem;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:1rem;font-weight:500}
footer a{color:rgba(250,247,240,0.6);text-decoration:none;display:block;margin-bottom:0.6rem;font-size:0.9rem}
footer a:hover{color:var(--kridt)}
.footer-bottom{max-width:1200px;margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(250,247,240,0.12);font-size:0.8rem;color:rgba(250,247,240,0.4)}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }