/* Product card — white, borderless, soft shadow; add-to-cart sits half over the
   media edge in a notch. No hover animation beyond the shadow lift. */
.hn-product{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow);overflow:visible}
.hn-product:hover{box-shadow:var(--hn-shadow-lift)}
.hn-product__media{position:relative;aspect-ratio:1;border-radius:var(--hn-radius) var(--hn-radius) 0 0;background:var(--hn-surface) url("../../assets/logo/logo.svg") center/38% no-repeat;opacity:1}
.hn-product__media img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.hn-product__flags{position:absolute;top:var(--hn-s3);left:var(--hn-s3);display:flex;flex-direction:column;align-items:flex-start;gap:var(--hn-s2)}
.hn-product__cta{position:absolute;right:var(--hn-s4);bottom:-1px;transform:translateY(50%);box-shadow:0 0 0 6px var(--surface-card);z-index:1}
/* De vier regels in de kaart zijn geen lijst maar drie groepen: het merk staat
   apart bovenaan, naam en ondertitel horen bij elkaar, en het bewijs (sterren)
   plus de prijs sluiten af. De ruimte ertussen zegt welke bij elkaar horen —
   4px binnen een groep, 14px ertussen. Vandaar geen gap maar marges per regel. */
.hn-product__body{display:flex;flex-direction:column;padding:var(--hn-s5) var(--hn-s4) var(--hn-s4)}
/* Op een telefoon is de kaart ~164px breed: de knop één stap smaller (padding s3,
   ring 4px) en de tekst begint 32px onder de fotorand, zodat knop en merknaam
   elkaar niet raken (Ruud, 2026-09-17). De hoogte blijft 44. */
@media (width < 560px){
  .hn-product__cta{padding-inline:var(--hn-s3);box-shadow:0 0 0 4px var(--surface-card)}
  .hn-product__body{padding-top:var(--hn-s6)}
}
/* Het merk boven de naam (hills_shop_merk()): een label, dus de labelmaat —
   kleiner dan de naam, zodat de naam het grootste op de kaart is. */
.hn-product__brand{display:block;font-size:var(--hn-label);font-weight:var(--hn-weight-bold);letter-spacing:var(--hn-tracking);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--hn-s2)}
/* De naam in Karla, niet in Spectral: op tekstmaat naast een sans-label leest
   een serif als toeval (zie tokens/typography.css). */
.hn-product__name{font-family:var(--font-body);font-size:var(--hn-text);line-height:1.25;font-weight:var(--hn-weight-semibold);margin:0 0 var(--hn-s1)}
.hn-product__name a{color:var(--text-heading);text-decoration:none}
.hn-product__name a:hover{color:var(--action-primary);text-decoration:underline}
/* Eén regel onder de naam die zegt waar het product voor is. De naam zelf blijft
   kort: het merk staat al in .hn-product__brand erboven en hoort er dus niet
   nog eens in. */
.hn-product__meta{font-size:var(--hn-ui);color:var(--text-muted);margin:0 0 var(--hn-s5);max-width:none}
.hn-product__theme{font-size:var(--hn-ui);color:var(--text-muted)}
/* De prijs staat onderaan de kaart, niet direct onder de tekst: zo liggen de
   prijzen van een rij op één lijn, ook als de ene kaart een beoordeling heeft
   en de andere niet. Sterren horen bij de prijs, niet bij de omschrijving —
   daarom staan ze er strak boven. */
.hn-product__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-s3);margin-top:auto}
.hn-product__body{flex:1}
.hn-product__body .hn-rating{margin-bottom:var(--hn-s2)}
.hn-product--row{flex-direction:row;align-items:center;gap:var(--hn-s4);padding:var(--hn-s3)}
.hn-product--row .hn-product__media{width:88px;flex:none;aspect-ratio:1;border-radius:var(--hn-radius)}
.hn-product--row .hn-product__body{padding:0}

/* Price */
.hn-price{display:inline-flex;align-items:baseline;gap:var(--hn-s2);font-family:var(--font-body);font-weight:var(--hn-weight-bold);color:var(--text-heading);font-variant-numeric:tabular-nums}
.hn-price__now{font-size:var(--hn-text)}
.hn-price__was{font-size:var(--hn-ui);font-weight:var(--hn-weight-regular);color:var(--text-muted);text-decoration:line-through}
.hn-price--lg .hn-price__now{font-size:var(--hn-title)}
.hn-afterpay{font-size:var(--hn-ui);color:var(--text-muted)}

/* Stars — never colour alone: the numeric rating is always spelled out */
.hn-rating{display:inline-flex;align-items:center;gap:var(--hn-s2);font-size:var(--hn-ui);color:var(--text-muted)}
.hn-rating__stars{position:relative;display:inline-block;height:14px;width:78px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='14' viewBox='0 0 78 14'%3E%3Cg fill='none' stroke='%235A6F77' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M7 1.5 8.7 5.1l3.8.5-2.8 2.7.7 3.8L7 10.3l-3.4 1.8.7-3.8L1.5 5.6l3.8-.5z'/%3E%3Cpath d='M23 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L23 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3Cpath d='M39 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L39 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3Cpath d='M55 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L55 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3Cpath d='M71 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L71 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3C/g%3E%3C/svg%3E") left center/78px 14px no-repeat}
.hn-rating__fill{position:absolute;inset:0;overflow:hidden;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='14' viewBox='0 0 78 14'%3E%3Cg fill='%23E3A008'%3E%3Cpath d='M7 1.5 8.7 5.1l3.8.5-2.8 2.7.7 3.8L7 10.3l-3.4 1.8.7-3.8L1.5 5.6l3.8-.5z'/%3E%3Cpath d='M23 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L23 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3Cpath d='M39 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L39 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3Cpath d='M55 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L55 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3Cpath d='M71 1.5l1.7 3.6 3.8.5-2.8 2.7.7 3.8L71 10.3l-3.4 1.8.7-3.8-2.8-2.7 3.8-.5z'/%3E%3C/g%3E%3C/svg%3E") left center/78px 14px no-repeat}

/* Stock and status labels — pill radius is reserved for these */
.hn-status{display:inline-flex;align-items:center;gap:var(--hn-s2);padding:2px var(--hn-s3);border-radius:var(--hn-radius-pill);font-size:var(--hn-label);font-weight:var(--hn-weight-bold);letter-spacing:var(--hn-tracking);text-transform:uppercase}
.hn-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.hn-status--ok{background:var(--hn-ok-tint);color:#075523}
.hn-status--warn{background:var(--hn-warn-tint);color:#6E4200}
.hn-status--danger{background:var(--hn-danger-tint);color:#8A241C}
.hn-status--sale{background:var(--hn-brand-tint);color:#0A5B74}
.hn-status--sale::before{display:none}

/* Quantity */
.hn-qty{display:inline-flex;align-items:center;border:1px solid var(--border-field);border-radius:var(--hn-radius);background:var(--hn-white);overflow:hidden}
.hn-qty button{width:var(--hn-tap);height:var(--hn-tap);border:0;background:none;font-size:var(--hn-text);line-height:1;color:var(--hn-ink);cursor:pointer}
.hn-qty button:hover{background:var(--hn-surface)}
.hn-qty input{width:48px;height:var(--hn-tap);border:0;border-inline:1px solid var(--hn-line);text-align:center;font-size:var(--hn-ui);font-variant-numeric:tabular-nums}

/* Het hek: de plek waar een derde (een betaalplugin, een formulier) zijn eigen
   component print. Wij stylen de rand, nooit de inhoud — die verandert met hún
   updates. Een leeg hek neemt geen ruimte in. */
.hn-extern{display:block;max-width:none}
.hn-extern:empty{display:none}

/* Meldingen: WooCommerce levert de tekst, wij printen (hills_notices). */
/* Onder de walletknoppen: kleine maat, gedempt — een voetnoot, geen melding. */
.hn-voorwaarden{margin:var(--hn-s2) 0 var(--hn-s4);font-size:var(--hn-label);color:var(--text-muted);max-width:none}
.hn-voorwaarden a{color:inherit;text-decoration:underline}
.hn-notice{margin:0 0 var(--hn-s5);padding:var(--hn-s3) var(--hn-s4);border-radius:var(--hn-radius);font-size:var(--hn-ui);max-width:none}
.hn-notice--success{background:var(--hn-ok-tint);color:#075523}
.hn-notice--info{background:var(--hn-brand-tint);color:#0A5B74}
.hn-notice--error{background:var(--hn-danger-tint);color:#8A241C}
.hn-notice a{color:inherit;font-weight:var(--hn-weight-bold)}
.hn-notice ul{list-style:none;margin:0;padding:0}
.hn-notice li{margin:0}

/* Cart / checkout summary */
.hn-summary{background:var(--surface-card);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow);padding:var(--hn-s5)}
.hn-summary__row{display:flex;justify-content:space-between;gap:var(--hn-s3);padding:var(--hn-s2) 0;font-variant-numeric:tabular-nums}
.hn-summary__row{font-size:var(--hn-ui)}
/* De totaalregel: alles vet, en alleen het bedrag groter — dat is wat de klant betaalt. */
.hn-summary__row--total{align-items:baseline;border-top:var(--hn-border);margin-top:var(--hn-s3);padding-top:var(--hn-s3);font-weight:var(--hn-weight-bold);color:var(--text-heading)}
.hn-summary__row--total > span:last-child{font-size:var(--hn-h3);line-height:1}
.hn-shipbar{background:var(--hn-brand-tint);border-radius:var(--hn-radius);padding:var(--hn-s3) var(--hn-s4);font-size:var(--hn-ui);color:#0A5B74}
.hn-shipbar__track{height:6px;border-radius:var(--hn-radius-pill);background:#C7E3EE;margin-top:var(--hn-s2);overflow:hidden}
.hn-shipbar__fill{height:100%;background:var(--hn-brand)}