/*
Theme Name: Oorlogsboek
Theme URI: https://www.oorlogsboek.com/
Description: Kindthema van Storefront voor Oorlogsboek.com. Houtskool en legergroen uit het logo,
             Poppins lokaal geserveerd, mobiel eerst. Alle maatwerk staat hier en in functions.php,
             zodat Storefront zelf bij te werken blijft.
Author: Oorlogsboek.com
Template: storefront
Version: 1.0
Text Domain: oorlogsboek
*/

/* ---------------------------------------------------------------------------
   Lettertype — lokaal geserveerd, dus geen verbinding met Google vanaf de bezoeker
   --------------------------------------------------------------------------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/poppins-700.woff2) format("woff2")}

:root{
  --ob-inkt:#23282D;
  --ob-inkt-zacht:#4a5158;
  --ob-groen:#6E9255;
  --ob-groen-donker:#5a7a43;
  --ob-papier:#F6F4F1;
  --ob-lijn:#e3ded7;
  --ob-wit:#fff;
}

/* ---------------------------------------------------------------------------
   Basis
   --------------------------------------------------------------------------- */
body,button,input,select,textarea,.site-title,.widget h1,.widget h2,.widget h3{
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
body{color:var(--ob-inkt);background:var(--ob-wit);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ob-inkt);font-weight:700;line-height:1.22;letter-spacing:-.01em}
a{color:var(--ob-groen-donker);text-decoration:none}
a:hover{color:var(--ob-inkt);text-decoration:underline}
.site-content{padding-top:0}

/* Breder dan Storefront standaard: de catalogus mag ademen */
.col-full{max-width:1240px}

/* ---------------------------------------------------------------------------
   Koptekst
   --------------------------------------------------------------------------- */
.site-header{background:var(--ob-wit);border-bottom:1px solid var(--ob-lijn);padding:0;
  box-shadow:0 1px 3px rgba(35,40,45,.05)}
.site-header .col-full{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
/* .col-full draagt een clearfix via ::before/::after. In een flex-container worden
   dat echte flex-items, elk met de gap ernaast — het logo stond daardoor 20px te
   ver naar binnen en de winkelmand 20px te ver naar links. */
.site-header .col-full::before,.site-header .col-full::after,
.storefront-primary-navigation .col-full::before,
.storefront-primary-navigation .col-full::after{display:none}
.site-branding{margin:0;flex:0 0 auto;width:auto;max-width:280px}
.site-branding img,.custom-logo-link img{max-height:42px;width:auto;display:block}
.site-header .ob-kop-rechts{margin-left:auto;display:flex;align-items:center;gap:22px}

.ob-kop-contact{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ob-inkt)}
.ob-kop-contact span{color:var(--ob-inkt-zacht);font-weight:400}
.ob-kop-contact a{color:var(--ob-inkt)}
.ob-kop-contact a:hover{color:var(--ob-groen-donker);text-decoration:none}

.site-header .site-search{flex:1 1 240px;max-width:380px;margin:0}
.site-header .widget_product_search form{margin:0}
.site-header .widget_product_search input[type=search]{width:100%;padding:9px 14px;font-size:14px;
  border:1px solid var(--ob-lijn);border-radius:3px;background:var(--ob-papier)}
.site-header .widget_product_search button[type=submit]{display:none}

/* Hoofdmenu */
.storefront-primary-navigation{background:var(--ob-inkt);clear:both}
.main-navigation ul.menu>li>a,.main-navigation ul.nav-menu>li>a{
  color:#e8e6e2;font-size:14.5px;font-weight:600;letter-spacing:.02em;padding:14px 18px;text-transform:uppercase}
.main-navigation ul.menu>li>a:hover,.main-navigation ul.nav-menu>li>a:hover{color:var(--ob-wit);background:rgba(255,255,255,.07)}
.main-navigation ul.menu>li.current-menu-item>a,.main-navigation ul.nav-menu>li.current-menu-item>a{
  color:var(--ob-wit);box-shadow:inset 0 -3px 0 var(--ob-groen)}
/* Storefront compenseert de linkpadding met margin-left:-16px op het menu. Wij
   gebruiken 18px padding, dus die compensatie moet mee, anders begint het eerste
   menu-item 2px naast de rest van de pagina. Alleen op de horizontale balk. */
@media (min-width:768px){
  .storefront-primary-navigation ul.menu,
  .storefront-primary-navigation ul.nav-menu{margin-left:-18px}
}
.main-navigation ul li ul{background:var(--ob-inkt)}
.main-navigation ul li ul li a{color:#d7d4cf;padding:10px 18px}

/* Winkelmand in de kop */
.site-header-cart{position:relative;list-style:none;margin:0;padding:0}
.site-header-cart .cart-contents{color:var(--ob-wit);background:var(--ob-groen);padding:9px 15px;border-radius:3px;
  font-size:14px;font-weight:600;display:inline-block;white-space:nowrap}
.site-header-cart .cart-contents:hover{background:var(--ob-groen-donker);color:var(--ob-wit);text-decoration:none}
/* Alleen het bedrag op de knop zelf is wit; in het uitklapmenu staat het op wit. */
.site-header-cart .cart-contents .amount{color:var(--ob-wit)}
.site-header-cart .count{opacity:.85;font-weight:400}

/* Het uitklapmenu van de mand.
   Storefront geeft dit de volle breedte van zijn houder. In onze kop is die houder
   maar zo breed als de knop, waardoor het menu tot één letter per regel samenkneep.
   Let op: Storefront verbergt het menu met left:-999em en zet bij hover left:0.
   Die truc laten we met rust — alleen de breedte en vormgeving zijn van ons. */
.site-header-cart .widget_shopping_cart{
  top:calc(100% + 9px);
  width:330px;max-width:calc(100vw - 30px);
  background:var(--ob-wit);color:var(--ob-inkt);text-align:left;
  border:1px solid var(--ob-lijn);border-radius:3px;
  box-shadow:0 14px 34px rgba(35,40,45,.2);
  padding:16px;max-height:72vh;overflow-y:auto}
/* Zichtbare staat: rechts uitlijnen onder de knop in plaats van links, anders
   steekt een menu van 330px buiten de rechterrand van het scherm. */
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart,
.site-header-cart .widget_shopping_cart.sub-menu--is-touch-device{left:auto;right:0}
.site-header-cart .widget_shopping_cart .widget_shopping_cart_content{width:100%}
.site-header-cart .widget_shopping_cart ul.cart_list{margin:0;padding:0;list-style:none}
.site-header-cart .widget_shopping_cart ul.cart_list li{
  position:relative;padding:0 0 12px 2.3em;margin:0 0 12px;border-bottom:1px solid var(--ob-lijn);
  font-size:13.5px;line-height:1.45;overflow:hidden}
.site-header-cart .widget_shopping_cart ul.cart_list li:last-child{border-bottom:0;margin-bottom:6px}
.site-header-cart .widget_shopping_cart ul.cart_list li a{display:block;font-weight:600;color:var(--ob-inkt)}
.site-header-cart .widget_shopping_cart ul.cart_list li img{
  float:right;width:52px;height:auto;margin:0 0 0 10px;border:1px solid var(--ob-lijn)}
.site-header-cart .widget_shopping_cart ul.cart_list li a.remove{
  position:absolute;left:0;top:0;margin:0;font-size:16px;line-height:1.2}
.site-header-cart .widget_shopping_cart .quantity{display:block;color:var(--ob-inkt-zacht);font-size:13px}
.site-header-cart .widget_shopping_cart .total{
  margin:0 0 12px;padding:10px 0 0;border-top:1px solid var(--ob-lijn);font-size:15px;
  color:var(--ob-inkt);background:transparent;text-align:left}
.site-header-cart .widget_shopping_cart .total strong{font-weight:600}
.site-header-cart .widget_shopping_cart .total .amount{color:var(--ob-inkt);font-weight:700}
.site-header-cart .widget_shopping_cart .buttons{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.site-header-cart .widget_shopping_cart .buttons .button{
  flex:1 1 130px;text-align:center;padding:10px 12px;font-size:13.5px;margin:0;white-space:nowrap}
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message{
  margin:0;font-size:14px;color:var(--ob-inkt-zacht)}

/* ---------------------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------------------- */
button,input[type=button],input[type=submit],.button,.added_to_cart,
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  background:var(--ob-groen);color:var(--ob-wit);font-weight:600;font-size:15px;border-radius:3px;
  padding:12px 22px;border:0;text-shadow:none;box-shadow:none;transition:background .15s ease}
button:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover{
  background:var(--ob-groen-donker);color:var(--ob-wit)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{background:var(--ob-inkt);color:var(--ob-wit)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{
  background:#11151a;color:var(--ob-wit)}
.ob-knop-lijn{background:transparent;color:var(--ob-inkt);border:2px solid var(--ob-inkt);padding:11px 22px;
  display:inline-block;font-weight:600;border-radius:3px}
.ob-knop-lijn:hover{background:var(--ob-inkt);color:var(--ob-wit);text-decoration:none}

/* ---------------------------------------------------------------------------
   Homepage
   --------------------------------------------------------------------------- */
.ob-hero{position:relative;background:var(--ob-inkt);overflow:hidden}
.ob-hero img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55;position:absolute;inset:0}
/* Verloop van links: houdt de kop leesbaar, ook op het drukste deel van de foto. */
.ob-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(23,27,32,.88) 0%,rgba(23,27,32,.68) 38%,rgba(23,27,32,.18) 72%,rgba(23,27,32,.05) 100%)}
.ob-hero-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:78px 20px 84px;color:var(--ob-wit)}
.ob-hero h1{color:var(--ob-wit);font-size:40px;margin:0 0 16px;max-width:17ch;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.ob-hero p{font-size:17.5px;line-height:1.6;max-width:56ch;margin:0 0 26px;color:#ece9e4;
  text-shadow:0 1px 10px rgba(0,0,0,.45)}
.ob-hero .button{font-size:16px;padding:14px 28px}
.ob-hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.ob-hero-knoppen .ob-knop-lijn{border-color:var(--ob-wit);color:var(--ob-wit)}
.ob-hero-knoppen .ob-knop-lijn:hover{background:var(--ob-wit);color:var(--ob-inkt)}

.ob-sectie{max-width:none;margin:0;padding:54px 0}
.ob-sectie-kop{margin:0 0 26px}
.ob-sectie-kop h2{font-size:27px;margin:0 0 6px}
.ob-sectie-kop p{margin:0;color:var(--ob-inkt-zacht);font-size:15.5px}
/* Een sectie mét achtergrondvlak heeft binnenruimte nodig: de inhoud mag niet
   tegen de rand van het vlak plakken, ook al loopt het vlak zelf netjes mee met
   de rest van de pagina. */
.ob-sectie--papier{background:var(--ob-papier);max-width:none;border:1px solid var(--ob-lijn);
  border-radius:3px;padding:40px 30px}
.ob-sectie--papier>.ob-binnen{max-width:none;margin:0}

/* Categorietegels met de woordmerken */
.ob-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.ob-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--ob-wit);border:1px solid var(--ob-lijn);border-radius:4px;padding:22px 14px;
  text-align:center;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.ob-cat:hover{border-color:var(--ob-groen);transform:translateY(-2px);text-decoration:none;
  box-shadow:0 6px 18px rgba(35,40,45,.09)}
.ob-cat img{max-width:148px;height:auto;display:block}
.ob-cat .ob-cat-n{font-size:13px;color:var(--ob-inkt-zacht);font-weight:500}
.ob-cat .ob-cat-t{font-size:15px;font-weight:600;color:var(--ob-inkt)}

/* USP-balk */
.ob-usps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.ob-usp-item{display:flex;gap:12px;align-items:flex-start}
.ob-usp-item .ob-vink{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ob-groen);
  color:var(--ob-wit);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.ob-usp-item strong{display:block;font-size:15px;margin-bottom:2px}
.ob-usp-item span{font-size:14px;color:var(--ob-inkt-zacht);line-height:1.5}

.ob-midden{text-align:center;margin-top:34px}

/* ---------------------------------------------------------------------------
   Producten

   Storefront zet zijn rasterregels alleen binnen .site-main, dus op de homepage
   (eigen secties) vielen de producten onder elkaar. Een eigen raster lost dat
   overal in één keer op en is meteen netter op kleine schermen.
   --------------------------------------------------------------------------- */
ul.products{display:grid;gap:26px 22px;margin:0 0 10px;padding:0;list-style:none;float:none;clear:both}
ul.products::before,ul.products::after{display:none}
ul.products.columns-1{grid-template-columns:1fr}
ul.products.columns-2{grid-template-columns:repeat(2,1fr)}
ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
ul.products.columns-4,ul.products{grid-template-columns:repeat(4,1fr)}
ul.products.columns-5{grid-template-columns:repeat(5,1fr)}
ul.products.columns-6{grid-template-columns:repeat(6,1fr)}
ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important;
  display:flex;flex-direction:column}
ul.products li.product .button,ul.products li.product .added_to_cart{margin-top:auto;align-self:flex-start}

/* Elk boek als tegel. Titels lopen van één tot drie regels; zonder vaste hoogte
   zakken prijs en knop mee omlaag en staat een rij scheef. De titel krijgt daarom
   ruimte voor twee regels, de prijs wordt onderaan vastgezet en de knop sluit af. */
ul.products li.product{text-align:left;background:var(--ob-wit);border:1px solid var(--ob-lijn);
  border-radius:4px;padding:14px 14px 16px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
ul.products li.product:hover{border-color:var(--ob-groen);transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(35,40,45,.1)}

ul.products li.product>a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;
  flex:1 1 auto;text-decoration:none}

/* Alle covers staan op een vierkant canvas. Niet bijsnijden: WooCommerce maakt
   zijn miniaturen met een harde uitsnede naar bijna-vierkant, dus bij staande
   beelden valt de boven- en onderkant weg. */
ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:contain;
  background:var(--ob-wit);border:0;border-radius:0;margin:0 0 12px;display:block}

ul.products li.product .woocommerce-loop-product__title{font-size:14.5px;font-weight:600;
  line-height:1.35;padding:0;margin:0 0 10px;color:var(--ob-inkt);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em}
ul.products li.product .price{color:var(--ob-inkt);font-weight:700;font-size:16px;
  margin:auto 0 0;display:block}
ul.products li.product .price del{color:#9a9a9a;font-weight:400}
ul.products li.product .price ins{text-decoration:none}

ul.products li.product .gridlist-buttonwrap{margin:12px 0 0}
/* Zonder die plugin hangt de knop rechtstreeks in de tegel. */
ul.products li.product>.button,ul.products li.product>.added_to_cart{margin-top:12px}
ul.products li.product .button,ul.products li.product .added_to_cart{font-size:14px;padding:10px 14px;
  margin:0;width:100%;text-align:center;align-self:stretch;box-sizing:border-box}
ul.products li.product .ob-uitverkocht{display:block;font-size:12px;font-weight:600;color:#8a1f1f;
  background:#fbeaea;border-radius:2px;padding:4px 8px;margin:10px 0 0;text-align:center}

/* Contactpagina: drie gelijkwaardige blokken naast elkaar in plaats van een formulier */
.ob-contactblokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;
  margin:26px 0 34px}
.ob-contactblok{background:var(--ob-papier);border:1px solid var(--ob-lijn);border-left:4px solid var(--ob-groen);
  border-radius:3px;padding:20px 22px}
.ob-contactblok h3{margin:0 0 8px;font-size:16px}
.ob-contactblok p{margin:0 0 6px;font-size:15px;line-height:1.55}
.ob-contactblok p:last-child{margin-bottom:0}
.ob-contactblok .ob-groot{font-size:17px;font-weight:600;display:block;margin-bottom:2px}
.ob-contactblok .ob-klein{font-size:13.5px;color:var(--ob-inkt-zacht)}
@media (max-width:600px){.ob-contactblokken{grid-template-columns:1fr;gap:14px}}

/* Verzendbalk boven de catalogus */
.ob-verzendbalk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 26px;
  padding:13px 18px;background:var(--ob-papier);border:1px solid var(--ob-lijn);border-left:4px solid var(--ob-groen);
  border-radius:3px;font-size:14.5px}
.ob-verzendbalk strong{color:var(--ob-inkt)}
.ob-verzendbalk span{color:var(--ob-inkt-zacht)}

.woocommerce-breadcrumb{font-size:13.5px;color:var(--ob-inkt-zacht);padding:16px 0 0}
.woocommerce-breadcrumb a{color:var(--ob-inkt-zacht)}
.storefront-sorting,.woocommerce-result-count{font-size:14px}

/* Productpagina — volle breedte, niets dat van de bestelknop afleidt */
.ob-geen-zijbalk .content-area{width:100%;float:none;margin-right:0}
.ob-geen-zijbalk .widget-area{display:none}
.single-product div.product .product_title{font-size:29px;margin-bottom:10px}
.single-product div.product p.price{font-size:25px;font-weight:700;color:var(--ob-inkt)}
.single-product div.product .woocommerce-product-details__short-description{font-size:15.5px;color:var(--ob-inkt-zacht)}
.single-product .woocommerce-tabs ul.tabs li.active a{color:var(--ob-inkt)}
.single-product .quantity .qty{padding:10px;border:1px solid var(--ob-lijn);border-radius:3px}
.product_meta{font-size:13.5px;color:var(--ob-inkt-zacht);border-top:1px solid var(--ob-lijn);padding-top:14px}
.woocommerce-product-gallery img{border:1px solid var(--ob-lijn);border-radius:3px}

/* Meldingen */
.woocommerce-message,.woocommerce-info{border-top-color:var(--ob-groen)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--ob-groen)}
.woocommerce-error{border-top-color:#8a1f1f}

/* ---------------------------------------------------------------------------
   Voettekst
   --------------------------------------------------------------------------- */
/* Let op: géén font-size op .site-footer. Storefront's .col-full rekent zijn
   marges en padding in em, dus een kleiner lettertype hier maakt de voettekst
   smaller dan de kop. De tekstgrootte zetten we op de inhoud zelf. */
.site-footer{background:var(--ob-inkt);color:#c9c6c1;padding:46px 0 0}
.site-footer a{color:#e2dfda}
.site-footer a:hover{color:var(--ob-wit)}
.site-footer h2,.site-footer h3,.site-footer .widget-title{color:var(--ob-wit);font-size:15px;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.site-footer .widget{margin-bottom:26px}
/* Kop, nieuwsbriefband en voettekst delen één container: Storefront's .col-full.
   Daarom hier géén eigen max-width of zijpadding — anders springen de drie
   onderdelen elk een andere kant op. */
.ob-voet{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;
  max-width:none;margin:0;padding:0;font-size:14.5px}
.ob-voet ul{list-style:none;margin:0;padding:0}
.ob-voet li{margin:0 0 8px}
.ob-voet-logo img{max-width:210px;height:auto;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.92}
.ob-voet-over p{margin:0 0 10px;line-height:1.6}
.ob-betaal{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.ob-betaal span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:3px;
  padding:5px 10px;font-size:12px;color:#e2dfda}
.ob-slot{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding:18px 0;text-align:center;
  font-size:13px;color:#9b9792}
.ob-slot a{color:#b9b5b0}

/* ---------------------------------------------------------------------------
   Mobiel
   --------------------------------------------------------------------------- */
@media (max-width:768px){
  .site-header .col-full{gap:12px;padding-top:11px;padding-bottom:11px}
  .site-branding{max-width:190px}
  .site-header .site-search{order:10;flex:1 1 100%;max-width:none}
  .ob-kop-contact{font-size:13px}
  .ob-kop-contact span{display:none}
  .site-header-cart .widget_shopping_cart{width:min(330px,calc(100vw - 24px));right:0}
  .ob-hero-in{padding:48px 18px 52px}
  .ob-hero h1{font-size:27px;max-width:none}
  .ob-hero p{font-size:15.5px}
  .ob-sectie{padding:38px 0}
  .ob-sectie--papier{padding:28px 20px}
  .ob-sectie-kop h2{font-size:22px}
  .ob-cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .ob-cat img{max-width:116px}
  ul.products li.product .woocommerce-loop-product__title{font-size:14px}
  .single-product div.product .product_title{font-size:23px}
}
@media (max-width:980px){
  ul.products,ul.products.columns-4,ul.products.columns-5,ul.products.columns-6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  ul.products,ul.products.columns-3,ul.products.columns-4,ul.products.columns-5,ul.products.columns-6{
    grid-template-columns:repeat(2,1fr);gap:20px 14px}
}
@media (max-width:360px){
  .ob-cats{grid-template-columns:1fr}
}
@media (max-width:420px){
  .ob-hero h1{font-size:23px}
}