* {
  box-sizing: border-box
}
body {
  margin: 0;
  background: #fffaf2;
  color: #222;
  font-family: system-ui, -apple-system, Segoe UI, Arial
}
.wrap {
  max-width: 850px;
  margin: auto;
  padding: 12px
}
.hero {
  text-align: center;
  padding: 18px
}
.hero img {
    width: auto;
    max-width: 180px;
    max-height: 85px;
    height: auto;
}
.hero h1 {
  font-size: clamp(2rem, 9vw, 3.6rem);
  margin: 8px
}
.card {
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 18px;
  box-shadow: 0 5px 22px #00000010;
  margin-bottom: 16px;
  padding: 18px
}
.product {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: center
}
.photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px
}
.price {
  font-size: 1.7rem;
  font-weight: 800
}
.pickup {
  display: block;
  border: 2px solid #ddd5ca;
  border-radius: 13px;
  padding: 13px;
  margin: 9px 0
}
.pickup:has(input:checked) {
  border-color: #2f6b48;
  background: #f1faf5
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px
}
.field {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 13px;
  border: 1px solid #c9c2b8;
  border-radius: 10px
}
.label {
  display: block;
  font-weight: 700;
  margin: 8px 0 5px
}
.qty {
  display: flex;
  gap: 10px;
  align-items: center
}
.qty button, .qty input {
  height: 48px;
  border: 1px solid #ccc;
  border-radius: 11px;
  background: #fff;
  font-size: 1.3rem
}
.qty button {
  width: 48px
}
.qty input {
  width: 70px;
  text-align: center
}
.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 13px;
  background: #2f6b48;
  color: #fff;
  padding: 16px;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
    opacity: .9;
}
.alert {
  padding: 13px;
  border-radius: 11px;
  background: #fdeaea;
  color: #752020;
  margin-bottom: 14px
}
.info {
  background: #edf6ff;
  color: #174b75
}
.logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px
}
.logos img {
  max-height: 55px;
  max-width: 145px
}
@media(max-width:600px) {
  .product {
    grid-template-columns: 95px 1fr;
    gap: 12px
  }
  .grid {
    grid-template-columns: 1fr
  }
  .card {
    padding: 15px
  }
  .wrap {
    padding: 9px
  }
  .hero img {
    max-width: 150px;
    max-height: 70px;
}
}



/* Header: Liempdsen Herd-logo links, titel rechts */
.hero.hero-columns{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:28px;
    align-items:center;
    text-align:left;
}
.hero.hero-columns .hero-logo{
    display:flex;
    justify-content:center;
    align-items:center;
}
.hero.hero-columns .hero-logo img{
    display:block;
    width:auto;
    height:auto;
    max-width:150px;
    max-height:150px;
}
.hero.hero-columns .hero-text h1{
    margin:0 0 6px;
}
.hero.hero-columns .hero-text p{
    margin:0;
}
@media(max-width:600px){
    .hero.hero-columns{
        grid-template-columns:105px 1fr;
        gap:14px;
        padding:14px 8px;
    }
    .hero.hero-columns .hero-logo img{
        max-width:90px;
        max-height:105px;
    }
    .hero.hero-columns .hero-text h1{
        font-size:clamp(1.7rem,8vw,2.4rem);
    }
}

/* Feedbackronde september 2026 */
body{background:#f4f1eb;background-image:none!important}
.hero-simple{text-align:center;padding:22px 18px 12px}
.hero-simple img{max-width:270px;max-height:125px}
.more-link{display:block;width:max-content;max-width:100%;margin:10px auto 0;color:#2f6b48;font-weight:700;text-decoration:none}
.more-link:hover{text-decoration:underline}
.product-title{font-size:clamp(1.7rem,5vw,2.5rem);margin:0 0 8px}
.variant-summary{display:grid;gap:7px;margin-top:12px}
.practical ul{margin:8px 0 0;padding-left:22px}.practical li{margin:8px 0;line-height:1.45}

.variant-order{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid #eadfce}
.variant-order:last-of-type{border-bottom:0}.order-total{font-size:1.2rem;margin-top:18px}.muted{color:#666}
.logos a{display:flex;align-items:center}.logos img{max-height:70px;max-width:190px}
@media(max-width:600px){.hero-simple img{max-width:220px;max-height:105px}.variant-order{align-items:flex-start}.variant-order .qty{gap:5px}.variant-order .qty button{width:42px}.variant-order .qty input{width:58px}}


/* Grote Liempdsen Herd branding links van de shop - september 2026 */
.wrap.wrap-wide{max-width:1120px}
.shop-layout{display:grid;grid-template-columns:2fr 10fr;gap:28px;align-items:start}
.shop-logo-column{position:sticky;top:24px;text-align:center;padding:24px 4px}
.shop-logo-column>a:first-child{display:block}
.shop-logo-column img{display:block;height:auto;margin:0 auto}
.shop-logo-column .more-link{width:auto;margin:18px auto 0;font-size:.95rem;line-height:1.35}
.shop-content{min-width:0}
.thankyou-hero{text-align:left;padding:18px 18px 10px}
.thankyou-hero h1{margin-left:0}
@media(max-width:760px){
 .wrap.wrap-wide{width:100%;max-width:none;padding-left:8px;padding-right:8px}
 .shop-layout{grid-template-columns:minmax(78px,2fr) minmax(0,10fr);gap:10px;align-items:start}
 .shop-logo-column{position:sticky;top:10px;padding:12px 0}
 .shop-logo-column img{max-width:65px;height:auto}
 .shop-logo-column .more-link{margin-top:10px;font-size:.72rem;line-height:1.25;overflow-wrap:anywhere}
 .shop-content{min-width:0}
 .thankyou-hero{text-align:left}
}
@media(max-width:420px){
 .shop-layout{grid-template-columns:minmax(68px,2fr) minmax(0,10fr);gap:7px}
 .shop-logo-column img{max-width:65px}
 .shop-logo-column .more-link{font-size:.68rem}
 .shop-content .card{padding-left:12px;padding-right:12px}
}

/* SPPiLL-logo onderaan de bestelpagina */
.sppill-footer{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:22px 10px 28px;
    clear:both;
}
.sppill-footer a{
    display:inline-block;
    line-height:0;
}
.sppill-footer img{
    display:block !important;
    width:180px !important;
    max-width:70vw !important;
    height:auto !important;
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
}
@media(max-width:600px){
    .sppill-footer img{
        width:145px !important;
    }
}


.qty-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.qty-warning{display:none;max-width:230px;padding:6px 9px;border-radius:8px;background:#fff3cd;border:1px solid #ffe69c;color:#664d03;font-size:.82rem;line-height:1.25}.qty-warning.show{display:block}

/* Mobiel: bestelaantallen altijd volledig binnen de kaart */
@media(max-width:600px){
  .variant-order{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
  }
  .variant-order > div:first-child{
    min-width:0;
    padding-right:2px;
  }
  .variant-order .qty-wrap{
    min-width:0;
    max-width:100%;
    align-items:flex-end;
  }
  .variant-order .qty{
    gap:4px;
    flex-wrap:nowrap;
  }
  .variant-order .qty button{
    width:36px;
    min-width:36px;
    height:42px;
    padding:0;
    font-size:1.15rem;
  }
  .variant-order .qty input{
    width:48px;
    min-width:48px;
    height:42px;
    padding:0 3px;
    font-size:1.1rem;
  }
  .qty-warning{
    max-width:168px;
    text-align:left;
  }
}

@media(max-width:420px){
  .variant-order{
    grid-template-columns:minmax(0,1fr) 128px;
    gap:6px;
  }
  .variant-order .qty{
    width:128px;
    justify-content:flex-end;
  }
  .variant-order .qty button{
    width:34px;
    min-width:34px;
  }
  .variant-order .qty input{
    width:52px;
    min-width:52px;
  }
}