/*
Theme Name: Blije Beesten
Theme URI: https://blijebeesten.nl
Author: Blije Beesten
Description: Het originele Blije Beesten ontwerp, geschikt gemaakt voor WooCommerce.
Version: 1.0.0
Text Domain: blije-beesten
*/

:root{--ink:#17352d;--green:#0f7a5c;--mint:#dff5e9;--lime:#dff166;--coral:#ff765f;--paper:#fffdfa;--white:#fff;--line:#dbe8e2;--shadow:0 18px 50px rgba(22,74,59,.12)}

/* Kleding: compacte subcategoriekaarten zonder lege afbeeldingsvakken */
body.tax-product_cat.woocommerce-page.term-kleding .woocommerce ul.products li.product-category img{
  display:none!important;
}
body.tax-product_cat.woocommerce-page.term-kleding .woocommerce ul.products li.product-category a{
  width:100%!important;
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-size:16px;line-height:1.5}button,input{font:inherit}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.topbar{background:var(--ink);color:white;text-align:center;padding:9px 16px;font-weight:700;font-size:.9rem}.site-header{background:rgba(255,253,250,.96);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.nav{height:78px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:11px;font-size:1.45rem;font-weight:900;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--coral);color:white;border-radius:15px;transform:rotate(-3deg);font-size:1.55rem}.links{display:flex;gap:24px;margin-right:auto;font-weight:700}.links a:hover{color:var(--green)}.header-actions{display:flex;align-items:center;gap:10px}.icon-btn{border:1px solid var(--line);background:white;border-radius:14px;padding:11px 14px;font-weight:800;color:var(--ink);cursor:pointer}.cart{background:var(--green);color:white;border-color:var(--green)}
.hero{padding:34px 0 24px}.hero-grid{min-height:510px;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.03fr .97fr;background:var(--mint);box-shadow:var(--shadow)}.hero-copy{padding:68px 34px 58px 64px;display:flex;flex-direction:column;justify-content:center}.eyebrow{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;background:white;border:1px solid #cde4d8;border-radius:999px;padding:8px 12px;font-weight:800;color:var(--green);font-size:.88rem}.hero h1{font-size:clamp(2.65rem,5vw,5.2rem);line-height:.94;letter-spacing:-.055em;margin:22px 0 20px;max-width:650px}.hero h1 span{color:var(--green)}.hero p{font-size:1.12rem;max-width:540px;margin:0 0 28px;color:#416159}.search{display:flex;background:white;border:2px solid white;border-radius:17px;padding:6px;max-width:535px;box-shadow:0 10px 28px rgba(32,88,71,.1)}.search input{border:0;outline:0;min-width:0;flex:1;padding:12px 14px;color:var(--ink);font-size:1rem}.search button{border:0;border-radius:12px;padding:12px 19px;background:var(--coral);color:white;font-weight:900;cursor:pointer}.hero-photo{position:relative;background:#bde6cf center/cover no-repeat;background-image:url('https://blijebeesten.nl/wp-content/uploads/2026/10/bb-hero-pets-optimized.webp')}.photo-label{position:absolute;left:28px;bottom:28px;background:white;padding:13px 17px;border-radius:15px;box-shadow:var(--shadow);font-weight:900}.photo-label small{display:block;color:var(--green);font-weight:700}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:20px 0 36px}.trust-item{display:flex;gap:13px;align-items:center;padding:16px 18px;border:1px solid var(--line);background:white;border-radius:18px}.trust-icon{font-size:1.5rem}.trust strong{display:block}.trust span{display:block;color:#5b736c;font-size:.87rem}section{padding:48px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-head h2{font-size:clamp(2rem,3vw,3rem);line-height:1;margin:0;letter-spacing:-.04em}.section-head p{margin:0;color:#5d746d;max-width:510px}.categories{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.category{border:1px solid var(--line);background:white;border-radius:23px;padding:25px 18px;min-height:170px;transition:.2s ease}.category:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}.cat-icon{font-size:2.25rem;margin-bottom:22px}.category h3{margin:0 0 5px;font-size:1.15rem}.category p{margin:0;color:#6b7e79;font-size:.9rem}
.catalog{background:var(--ink);color:white}.catalog .section-head p{color:#bfd1cb}.coming{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.coming-card{background:#21483e;border:1px solid #315c50;border-radius:26px;padding:34px}.coming-card h3{font-size:1.8rem;margin:0 0 10px}.coming-card p{color:#c7d8d2;margin:0 0 22px}.steps{display:grid;gap:12px}.step{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);border-radius:15px;padding:14px}.step b{display:grid;place-items:center;flex:0 0 34px;height:34px;background:var(--lime);color:var(--ink);border-radius:50%}.notify{background:var(--lime);color:var(--ink);display:flex;flex-direction:column;justify-content:center}.notify p{color:#47645c}.notify .icon-btn{align-self:flex-start;background:var(--green);color:white;border-color:var(--green)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.about-card{border-radius:28px;background:#fff0ec;padding:42px}.about h2{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.045em;margin:0 0 18px}.about p{color:#526b64}.checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.check{background:white;border-radius:14px;padding:14px;font-weight:800}.big-paw{min-height:360px;border-radius:28px;background:var(--green);color:white;display:grid;place-items:center;text-align:center;padding:35px}.big-paw .paw{font-size:6.5rem;line-height:1}.big-paw strong{font-size:1.55rem;display:block;margin-top:12px}.big-paw span{color:#d2ebe1}
.site-footer{background:#0b2821;color:white;padding:44px 0 24px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:35px}.footer-brand p{color:#b9cbc5;max-width:390px}.footer-title{font-weight:900;margin-bottom:12px}.footer-links{display:grid;gap:8px;color:#c3d2cd}.footer-bottom{border-top:1px solid #315047;margin-top:34px;padding-top:20px;color:#98afa8;font-size:.88rem}.page-content,.woocommerce{width:min(1180px,calc(100% - 40px));margin:50px auto;min-height:50vh}
@media(max-width:900px){.links{display:none}.nav{height:68px}.hero-grid{grid-template-columns:1fr}.hero-copy{padding:48px 30px}.hero-photo{min-height:380px;order:-1}.categories{grid-template-columns:repeat(3,1fr)}.coming,.about{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:620px){.wrap{width:min(100% - 24px,1180px)}.topbar{font-size:.78rem}.brand{font-size:1.14rem}.brand-mark{width:40px;height:40px}.icon-btn{padding:9px 11px}.hero{padding-top:16px}.hero-grid{border-radius:23px}.hero-copy{padding:36px 22px 32px}.hero-photo{min-height:285px}.hero h1{font-size:2.75rem}.search{display:grid}.trust{grid-template-columns:1fr;padding-top:12px}.categories{grid-template-columns:1fr 1fr}.category{min-height:150px;padding:20px 16px}.coming-card,.about-card{padding:28px 22px}.checklist{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.section-head{display:block}.section-head p{margin-top:12px}.hide-mobile{display:none}}


/* Mobiel: productsubcategorieën onder elkaar */
@media (max-width:620px){
  .woocommerce ul.products li.product-category{
    float:none!important;
    width:100%!important;
    margin-right:0!important;
  }
}
/* Afgeronde kaarten voor Riemen, halsbanden & tuigen */
body.term-riemen-halsbanden-tuigen .woocommerce-per-page{display:none}
body.term-riemen-halsbanden-tuigen .woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:28px 0 0!important}
body.term-riemen-halsbanden-tuigen .woocommerce ul.products li.product-category{float:none!important;width:auto!important;margin:0!important;min-height:145px;padding:28px 18px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:0 10px 28px rgba(32,88,71,.08);transition:.2s ease}
body.term-riemen-halsbanden-tuigen .woocommerce ul.products li.product-category:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
body.term-riemen-halsbanden-tuigen .woocommerce ul.products li.product-category img{display:none!important}
body.term-riemen-halsbanden-tuigen .woocommerce ul.products li.product-category h2{margin:0!important;font-size:1.18rem!important;line-height:1.3}
body.term-riemen-halsbanden-tuigen .woocommerce ul.products li.product-category mark.count{background:transparent;color:var(--green);font-weight:800}
@media(max-width:900px){body.term-riemen-halsbanden-tuigen .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body.term-riemen-halsbanden-tuigen .woocommerce ul.products{grid-template-columns:1fr}}

/* Productsubcategorieën als nette kaarten */
body.tax-product_cat .woocommerce ul.products li.product-category{float:none!important;width:auto!important;margin:0!important;min-height:145px;padding:28px 18px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:0 10px 28px rgba(32,88,71,.08);transition:.2s ease}
body.tax-product_cat .woocommerce ul.products:has(li.product-category){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:28px 0 0!important}
body.tax-product_cat .woocommerce ul.products li.product-category:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
body.tax-product_cat .woocommerce ul.products li.product-category img{display:none!important}
body.tax-product_cat .woocommerce ul.products li.product-category h2{margin:0!important;font-size:1.18rem!important;line-height:1.3}
body.tax-product_cat .woocommerce ul.products li.product-category mark.count{background:transparent;color:var(--green);font-weight:800}
@media(max-width:900px){body.tax-product_cat .woocommerce ul.products:has(li.product-category){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body.tax-product_cat .woocommerce ul.products:has(li.product-category){grid-template-columns:1fr}}
/* Definitieve opmaak productsubcategorieën */
.woocommerce:has(li.product-category) .woocommerce-per-page{display:none!important}
.woocommerce ul.products:has(li.product-category){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:28px 0!important}
.woocommerce ul.products li.product-category{float:none!important;width:auto!important;margin:0!important;min-height:145px;padding:28px 18px;display:flex!important;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:0 10px 28px rgba(32,88,71,.08);transition:.2s ease}
.woocommerce ul.products li.product-category:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.woocommerce ul.products li.product-category img{display:none!important}
.woocommerce ul.products li.product-category h2{margin:0!important;font-size:1.18rem!important;line-height:1.3}
.woocommerce ul.products li.product-category mark.count{background:transparent;color:var(--green);font-weight:800}
@media(max-width:900px){.woocommerce ul.products:has(li.product-category){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.woocommerce ul.products:has(li.product-category){grid-template-columns:1fr}}


/* Productfoto's overal gelijk en nooit uitgerekt */
.woocommerce ul.products li.product:not(.product-category) a img,
.woocommerce-page ul.products li.product:not(.product-category) a img{
  display:block!important;
  width:100%!important;
  height:260px!important;
  max-height:260px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff;
}
.woocommerce ul.products li.product:not(.product-category){overflow:hidden}
@media(max-width:620px){
  .woocommerce ul.products li.product:not(.product-category) a img,
  .woocommerce-page ul.products li.product:not(.product-category) a img{height:210px!important;max-height:210px!important}
}

/* WooCommerce clearfix mag geen lege cel in het categorieraster maken. */
.woocommerce ul.products:has(li.product-category)::before,
.woocommerce ul.products:has(li.product-category)::after{content:none!important;display:none!important}

/* Mobiele navigatie: zoeken en belangrijke links blijven zichtbaar. */
@media(max-width:900px){
.site-header .nav{height:auto;min-height:68px;flex-wrap:wrap;gap:10px 12px;padding:12px 0}
.site-header .brand{margin-right:auto}
.site-header .links{display:flex;order:3;flex:0 0 100%;margin:0;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;font-size:.9rem;border-top:1px solid var(--line);padding-top:10px}
.site-header .header-actions .hide-mobile{display:inline-flex!important;align-items:center}
}
@media(max-width:620px){
.site-header .nav{column-gap:7px}
.site-header .brand{font-size:1rem;gap:7px}
.site-header .brand-mark{width:30px;height:30px;font-size:1.2rem;border-radius:10px;flex-shrink:0}
.site-header .header-actions{gap:5px}
.site-header .header-actions .icon-btn{font-size:.8rem;padding:8px 7px;white-space:nowrap;border-radius:10px}
}

/* Heldere productbeschikbaarheid en rustige bestelknoppen */
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:transparent!important}
.woocommerce div.product form.cart .quantity{margin:0!important}
.woocommerce div.product form.cart .single_add_to_cart_button{background:#0f7a5c!important;color:#fff!important;border:0!important;border-radius:12px!important;padding:13px 20px!important;line-height:1.4!important;font-weight:700!important}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{background:#0b6149!important}
.bb-stock-status{display:block;margin:8px 0;font-size:.9rem;font-weight:700;color:#53665f}