@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..600&family=Newsreader:opsz,wght@6..72,300..500&display=swap');

/* ==========================================================================
   THE HR AGENCY - PRECISE BUTTON FIXES (NO OVERLAP)
   ========================================================================== */

/* --- 1. BRAND IDENTITY VARIABLES --- */
:root {
    --hr-white: #FFFFFF;
    --hr-ivory: #DDD4C8;
    --hr-taupe: #8F8072;
    --hr-walnut: #5A4A40;
    --hr-espresso: #3E3634;
    --hr-font-headings: 'Die Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --hr-font-body: 'Inter', sans-serif;
}

/* --- 2. BASE STYLES --- */
body {
    font-family: var(--hr-font-body) !important;
    color: var(--hr-espresso) !important;
    background-color: var(--hr-white) !important;
}
h1, h2, h3, h4, .theme-heading {
    font-family: var(--hr-font-headings) !important;
    color: var(--hr-espresso) !important;
    font-weight: 700 !important;
}

/* --- 3. NAVIGATIE (GEEN HOOFDLETTERS, GEEN STREPEN) --- */
.theme-nav-link, .menu-link, .nav-item a, .zs-menu-item a, header a, #header a {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
    color: var(--hr-espresso) !important;
    font-family: var(--hr-font-body) !important;
    font-weight: 500 !important;
}
.theme-nav-link:hover, .menu-link:hover, .nav-item a:hover, header a:hover {
    color: var(--hr-walnut) !important;
}

/* --- 4. HOMEPAGE & OVERZICHT KNOPPEN (ESPRESSO) --- */
/* Dit richt zich specifiek op de grote knop op de homepage en in de secties */
.theme-primary-button,
a.theme-primary-button,
.theme-button-container a,
.theme-section-body a.theme-primary-button,
[class*="zs-product-card"] .zs-add-to-cart-btn {
    background-color: #3E3634 !important;
    color: #FFFFFF !important;
    border: 1px solid #3E3634 !important;
    border-radius: 4px !important;
    font-family: var(--hr-font-headings) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 14px 30px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* --- 5. PRODUCTPAGINA (PDP) KNOPPEN FIX --- */
/* We stylen alleen de specifieke winkelwagen- en offerteknop, ZONDER het aantal-blok te raken */
.zs-product-details .zs-add-to-cart-btn,
.zs-product-details-btn-buy,
[id*="product"] button[id*="quote"],
[id*="product"] input[value*="Offerte"],
[id*="product"] input[value*="Quote"] {
    background-color: #3E3634 !important;
    color: #FFFFFF !important;
    border: 1px solid #3E3634 !important;
    border-radius: 4px !important;
    font-family: var(--hr-font-headings) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 14px 30px !important;
    display: inline-block !important;
    width: 100% !important; /* Netjes onder elkaar */
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
}

/* HOVER VOOR ALLE GESELECTEERDE KNOPPEN */
.theme-primary-button:hover,
a.theme-primary-button:hover,
.zs-add-to-cart-btn:hover,
[id*="product"] button[id*="quote"]:hover,
[id*="product"] input[type="submit"]:hover {
    background-color: #5A4A40 !important; /* Walnut */
    border-color: #5A4A40 !important;
    color: #FFFFFF !important;
}

/* --- 6. PRODUCT DETAIL PAGINA (PDP) INTERFACES --- */
.zs-product-details-price {
    font-family: var(--hr-font-body) !important;
    color: var(--hr-espresso) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
}

/* Verberg de 'Bekijk details' knop */
.zs-product-details-btn-secondary,
[id*="product"] button[class*="secondary"],
[id*="product"] a[class*="secondary"] {
    display: none !important;
}

/* Product Accordeon strakke lijnen */
.zs-product-details-accordion-title, [id*="product"] [class*="accordion"] {
    border-top: 1px solid var(--hr-ivory) !important;
    border-bottom: 1px solid var(--hr-ivory) !important;
    color: var(--hr-espresso) !important;
}

/* =====================================================================
   HUISSTIJL GELIJK AAN WEBFLOW (okt 2026) - staat onderaan zodat deze regels voorgaan
   ===================================================================== */
/* The HR Agency – webshop-stijl gelijk aan Webflow-site */
:root{
  --hr-bg:#DDD4C8;      /* beige achtergrond */
  --hr-light:#F4F0EC;   /* lichte kaarten */
  --hr-dark:#3E3634;    /* donkerbruin, koppen */
  --hr-text:#5A4A40;    /* lopende tekst */
  --hr-taupe:#8F8072;   /* accent, randen */
  --hr-serif:'Newsreader', Georgia, serif;
  --hr-sans:'Inter', Arial, sans-serif;
}

/* Basis */
body, body *:not(svg):not(path):not(polygon){
  font-family:var(--hr-sans) !important;
}
body{ background:var(--hr-bg) !important; color:var(--hr-dark); }
p, .theme-product-short-description, .theme-product-short-description *, .theme-product-desc, .theme-product-description,
.zptext, .zptext p{
  font-size:17px !important; line-height:1.5 !important; color:var(--hr-text) !important;
}

/* Koppen in serif, zoals Recife Display op de site */
html body :is(h1, h2, h3, h4, h5, .zpheading, .zpheading *, .zpfilmstrip-title, .theme-section-heading){
  font-family:var(--hr-serif) !important;
  font-weight:400 !important;
  color:var(--hr-dark) !important;
  letter-spacing:-0.01em !important;
}
.theme-product-name h1{ font-size:clamp(34px,4vw,48px) !important; line-height:1.1 !important; }
.zphero .zpheading{ font-size:clamp(40px,6vw,76px) !important; line-height:1.05 !important; }
.theme-footer-area .zpheading, .theme-footer-area .zpheading *{ font-size:22px !important; line-height:1.3 !important; color:#F4F0EC !important; }
.zpfilmstrip-title, .theme-section-heading{ font-size:clamp(32px,4vw,44px) !important; line-height:1.1 !important; }

/* Header: vaste beige balk, geen doorzichtige overlap meer */
.theme-header-fixed, .theme-header-fixed .theme-header,
.theme-topbar-contact-info{ background:var(--hr-bg) !important; }
.theme-header-fixed{ border-bottom:1px solid rgba(143,128,114,.25); }
.theme-menu-name{ font-size:16px !important; color:var(--hr-dark) !important; }
.theme-topbar-info-icon-text{ font-size:14px !important; color:var(--hr-dark) !important; }

/* Knoppen: pill met rond pijltje, zoals "KIES DIT PAKKET" */
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2), html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2){
  position:relative !important;
  background:rgba(143,128,114,.10) !important;
  border:1px solid var(--hr-taupe) !important;
  border-radius:160px !important;
  color:var(--hr-dark) !important;
  font-size:14px !important; font-weight:500 !important;
  text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
  padding:10px 52px 10px 20px !important; justify-content:flex-start;
  min-height:44px; box-shadow:none !important;
  transition:background .2s ease, color .2s ease;
}
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2) *, html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2) *{ color:inherit !important; font-weight:500 !important; }
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2)::after, html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2)::after{
  content:"\2192"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:var(--hr-taupe); color:#fff; font-size:15px; line-height:28px; text-align:center;
  text-transform:none;
}
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2):hover, html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2):hover{
  background:var(--hr-dark) !important; color:#fff !important; border-color:var(--hr-dark) !important;
}

/* Productkaarten */
.theme-product-name a, .theme-product-name{
  font-size:18px !important; color:var(--hr-dark) !important; font-weight:500 !important;
}
.theme-product-price{ font-size:18px !important; color:var(--hr-dark) !important; font-weight:500 !important; }
.theme-product-list-addcart, .theme-product-button-area{ margin-top:12px; }

/* Footer blijft donker met lichte tekst */
.theme-footer-area, .theme-footer-area *{ color:#F4F0EC !important; }
.theme-footer-area p{ font-size:16px !important; }
.theme-footer-area .zpbutton-type-link .zpbutton-content{ text-transform:none; font-size:16px !important; }

/* Aantal-kiezer in dezelfde stijl */
.theme-product-quantity-spinner{ border:1px solid var(--hr-taupe) !important; border-radius:160px !important; background:rgba(143,128,114,.10) !important; }


/* Geen donkere verloop-laag over productafbeeldingen */
.theme-product-image-area::after{ display:none !important; }

/* Aanbieding-label in huisstijl */
.theme-product-sale-ribbon{ background:var(--hr-dark) !important; border-radius:160px !important; padding:4px 12px !important; }
.theme-sale-message{ color:#fff !important; font-size:12px !important; font-weight:500 !important; text-transform:uppercase; letter-spacing:.04em; }

.theme-product-sale-ribbon *{ background:transparent !important; padding:0 !important; }
.theme-product-sale-ribbon::before, .theme-product-sale-ribbon::after{ display:none !important; }

/* ---------- Logo iets kleiner ---------- */
.theme-logo-parent img{ max-height:52px !important; width:auto !important; }

/* ---------- Hero: geen template-foto/donkere laag (vooral mobiel) ---------- */
.zphero, .zphero-slide, .zphero .zprow, .zphero .zpcontainer{ background-color:var(--hr-bg) !important; background-image:none !important; }
.zphero .zprow::before, .zphero .zprow::after, .zphero-slide::before, .zphero-slide::after{ display:none !important; }

/* ---------- Header-topbar beige i.p.v. wit ---------- */
.theme-header-topbar{ background:var(--hr-bg) !important; border-bottom:1px solid rgba(143,128,114,.25); }

/* ---------- Footer-logo niet vervormen ---------- */
.theme-footer-area img.zpimage{ width:180px !important; height:60px !important; max-width:none !important; object-fit:cover !important; }
.theme-footer-area figure.zpimage-data-ref{ width:auto !important; height:auto !important; }
@media (max-width:991px){ .theme-menu li, .theme-menu ul{ background:var(--hr-light) !important; } }

/* ---------- Tablet en mobiel ---------- */
@media (max-width:991px){
  .theme-logo-parent.theme-disable-logo-mobile{ display:flex !important; }
  .theme-logo-parent img{ max-height:40px !important; }
  .zphero .zpheading{ font-size:clamp(34px,8vw,52px) !important; }
  html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2),
  html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2){
    white-space:normal !important; font-size:12px !important; line-height:1.3 !important;
    padding:9px 44px 9px 14px !important; min-height:40px; text-align:left;
  }
  html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2)::after,
  html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2)::after{
    width:24px; height:24px; line-height:24px; font-size:13px; right:8px;
  }
  .theme-product-name a, .theme-product-name{ font-size:16px !important; }
  .theme-product-price{ font-size:16px !important; }
}

/* ---------- Knoppen v2: effen donkerbruin, zonder rand ---------- */
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2), html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2){
  background:var(--hr-dark) !important; border:none !important; color:#fff !important;
}
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2)::after, html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2)::after{
  background:transparent !important; color:#fff !important; font-size:16px !important;
}
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2):hover, html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2):hover{
  background:var(--hr-taupe) !important;
}

/* Offerte-knop in productoverzichten (toegevoegd via footer-script) */
.hr-quote-cta{
  position:relative; display:flex; align-items:center; justify-content:flex-start; text-align:left;
  min-height:44px; padding:10px 52px 10px 20px; border-radius:160px;
  background:var(--hr-dark); color:#fff !important; text-decoration:none !important;
  font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.02em;
  transition:background .2s ease;
}
.hr-quote-cta::after{ content:"\2192"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:16px; }
.hr-quote-cta:hover{ background:var(--hr-taupe); }

/* Header blijft beige, ook tijdens scrollen */
.theme-header{ background:var(--hr-bg) !important; }

@media (max-width:991px){
  .hr-quote-cta{ font-size:12px; padding:9px 40px 9px 14px; min-height:40px; }
  .hr-quote-cta::after{ right:14px; font-size:13px; }
}

html body a.hr-quote-cta{ border-radius:160px !important; justify-content:flex-start !important; text-align:left !important; padding:10px 52px 10px 20px !important; }
@media (max-width:991px){ html body a.hr-quote-cta{ padding:9px 40px 9px 14px !important; } }

/* ---------- v3: witte achtergrond, geen aanbieding-label, strakkere knoppen ---------- */
:root{ --hr-bg:#FFFFFF; }
body, .theme-header, .theme-header-fixed, .theme-header-topbar, .theme-topbar-contact-info,
.zphero, .zphero-slide, .zphero .zprow, .zphero .zpcontainer{ background-color:#FFFFFF !important; }
.zpsection.zpdefault-section-bg{ background-image:none !important; }
.theme-product-sale-ribbon{ display:none !important; }

html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2),
html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2),
html body a.hr-quote-cta:not(#hr1):not(#hr2){
  font-size:13px !important; line-height:20px !important; padding:10px 44px 10px 18px !important; min-height:40px !important;
  border-radius:160px !important; justify-content:flex-start !important; align-items:center !important;
  text-align:left !important; letter-spacing:.03em !important;
}
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2) *,
html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2) *{ line-height:20px !important; }
html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2)::after,
html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2)::after,
html body a.hr-quote-cta:not(#hr1):not(#hr2)::after{
  right:18px !important; width:auto !important; height:auto !important; line-height:20px !important; font-size:14px !important;
}
@media (max-width:991px){
  html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2),
  html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2),
  html body a.hr-quote-cta:not(#hr1):not(#hr2){
    font-size:12px !important; line-height:16px !important; padding:9px 36px 9px 14px !important;
  }
  html body .zpbutton.zpbutton-type-primary:not(.zpbutton-icon-align-left):not(#hr1):not(#hr2)::after,
  html body a.theme-cart-button.zpbutton:not(#hr1):not(#hr2)::after,
  html body a.hr-quote-cta:not(#hr1):not(#hr2)::after{ right:14px !important; }
}