/* ==========================================================================
   NINO HAARTJES — Huisstijl CSS
   Overschrijft Storefront's standaardstijlen met de Nino Haartjes-branding.
   ========================================================================== */

:root{
  --cream:   #FFFBF6;
  --blush:   #F7C6C7;
  --rose:    #E8A0A4;
  --apricot: #F2A878;
  --cognac:  #8B5E3C;
  --cognac-dark: #6B4226;
  --berry:   #C9667A;
  --taupe:   #B9A89C;
  --white:   #FFFFFF;
  --line:    rgba(139,94,60,0.12);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
body{
  background-color: var(--cream);
  color: var(--cognac-dark);
  font-family: 'Nunito', sans-serif;
}

a{
  color: var(--berry);
}
a:hover,
a:focus{
  color: var(--rose);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.storefront-handheld-footer-bar a span{
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  color: var(--cognac-dark);
}

/* Decoratief accent-lettertype voor taglines/quotes — gebruik via shortcode/class "nino-script" */
.nino-script{
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--berry);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
}

/* Header zo compact mogelijk maken. Storefront bouwt de header op uit twee
   gestapelde rijen — (1) logo/titel + zoekbalk, (2) menu + winkelwagen —
   en gebruikt op meerdere niveaus eigen padding/margin (op .col-full, op
   .site-branding, op de menu-links zelf). We zetten die nu allemaal naar
   een klein, vast minimum met !important, zodat het zeker werkt ongeacht
   de exacte uitgangswaarden. */
.site-header .col-full{
  padding-top: 0.4em !important;
  padding-bottom: 0.4em !important;
}

.site-header .site-branding{
  margin: 0 !important;
  padding: 0 !important;
}

.site-header .site-branding .site-title{
  margin: 0 !important;
}

.storefront-primary-navigation{
  min-height: 0 !important;
}

.storefront-primary-navigation .col-full{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.main-navigation ul li a{
  padding-top: 0.6em !important;
  padding-bottom: 0.6em !important;
}

.site-header-cart{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.site-header-cart .cart-contents{
  padding: 5px 12px !important;
}

.site-branding .site-title a{
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  background: linear-gradient(180deg, var(--rose) 0%, var(--apricot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-branding .site-description{
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--cognac);
  font-size: 15px;
  margin: 0 !important;
  line-height: 1.2;
}

.main-navigation ul li a{
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: var(--cognac-dark);
  letter-spacing: 0.02em;
}

.main-navigation ul li a:hover{
  color: var(--berry);
}

/* Winkelwagen-icoon in header */
.site-header-cart .cart-contents{
  background-color: var(--rose);
  border-radius: 100px;
  color: #fff;
  padding: 6px 14px;
}
.site-header-cart .cart-contents:hover{
  background-color: var(--berry);
}

/* --------------------------------------------------------------------------
   Knoppen (algemeen + WooCommerce)
   -------------------------------------------------------------------------- */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-message a.button{
  background-color: var(--rose);
  border: none;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  border-radius: 100px;
  padding: 12px 28px;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover{
  background-color: var(--berry);
  color: #fff;
  transform: translateY(-1px);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background-color: var(--cognac);
}
.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background-color: var(--cognac-dark);
}

/* --------------------------------------------------------------------------
   Kaarten / vlakken (rounded, zacht, met schaduw)
   -------------------------------------------------------------------------- */
.storefront-product-section,
.widget,
.comment-form,
.woocommerce-tabs,
#content .entry-content,
.entry-card{
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(139,94,60,0.08);
}

/* --------------------------------------------------------------------------
   Hero-sectie op de homepage (template-home.php)
   -------------------------------------------------------------------------- */
.nino-hero{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  /* Boven-ruimte gehalveerd t.o.v. de vorige versie (was 90px). */
  padding: 45px 24px 70px;
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.nino-hero-text{
  flex: 1 1 420px;
  text-align: left;
}

.nino-hero-image{
  flex: 1 1 360px;
  display: flex;
  justify-content: center;
}

.nino-hero-image img{
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(139,94,60,0.18));
}

.nino-hero .nino-eyebrow{
  font-family: 'Caveat', cursive;
  font-size: 26px;
  color: var(--berry);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.nino-hero h1{
  font-size: clamp(42px, 7vw, 76px);
  color: var(--rose);
  margin: 0;
  line-height: 1;
}

.nino-hero h1 .nino-hero-sub{
  display: block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 38px);
  color: var(--cognac);
  margin-top: -4px;
}

.nino-hero p{
  max-width: 460px;
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cognac);
  opacity: 0.85;
  line-height: 1.6;
}

.nino-hero .nino-hero-cta{
  margin-top: 30px;
  display: inline-block;
}

@media (max-width: 880px){
  .nino-hero{
    flex-direction: column;
    text-align: center;
  }
  .nino-hero-text{
    text-align: center;
  }
  .nino-hero p{
    margin: 20px auto 0;
  }
}

/* --------------------------------------------------------------------------
   Categorie-tegels op de homepage
   -------------------------------------------------------------------------- */
.nino-category-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.nino-category-tile{
  background-color: var(--white);
  border-radius: 26px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(139,94,60,0.08);
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease;
}
.nino-category-tile:hover{
  transform: translateY(-4px);
}

.nino-category-tile img{
  width: 70px;
  height: auto;
  margin: 0 auto 14px;
  display: block;
}

.nino-category-tile h3{
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--cognac-dark);
}

.nino-category-tile span.nino-cat-sub{
  font-size: 13px;
  color: var(--cognac);
  opacity: 0.75;
}

@media (max-width: 880px){
  .nino-category-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Signature banner (gebruikt op homepage en eventueel andere pagina's)
   -------------------------------------------------------------------------- */
.nino-signature-banner{
  background: linear-gradient(135deg, var(--rose) 0%, var(--apricot) 100%);
  border-radius: 30px;
  padding: 56px 40px;
  text-align: center;
  max-width: 1140px;
  margin: 0 auto 80px;
}
.nino-signature-banner h2{
  color: #fff;
  font-size: clamp(24px, 4vw, 32px);
  margin: 0 0 12px;
}
.nino-signature-banner p{
  color: #FFF3EE;
  font-size: 16px;
  font-weight: 600;
  max-width: 520px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   WooCommerce: shop-pagina, productgrid, productpagina

   We gebruiken CSS Grid voor de productenlijst. De eerdere versie van deze
   fix gebruikte flexbox met een calc()-berekende breedte per product, maar
   dat combineert in sommige browsers onvoorspelbaar met "gap" waardoor er
   te weinig ruimte per item overblijft en er minder kolommen per rij passen
   dan bedoeld. CSS Grid met repeat(4, 1fr) laat de browser zelf de breedte
   per kolom berekenen, zonder dat wij een calc()-expressie moeten schrijven
   die in elke browser exact gelijk wordt geïnterpreteerd — dat maakt deze
   aanpak betrouwbaarder cross-browser.

   Daarnaast: Storefront/WooCommerce gebruiken van oorsprong een FLOAT-
   gebaseerd systeem (breedte in % + "float: left"), en WooCommerce Blocks
   voegt daar binnen een @media (min-width: 768px) blok nog een keer eigen
   width/float-regels aan toe. We zetten dit hieronder volledig opzij met
   !important, EN we zetten box-sizing op border-box — dat laatste was de
   daadwerkelijke oorzaak van een eerdere versie van dit probleem (padding
   werd toegevoegd aan de breedte in plaats van verrekend, waardoor de 4e
   kolom niet meer paste). */

.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce ul.products.columns-2,
.woocommerce-page ul.products.columns-2,
ul.products.columns-2{ grid-template-columns: repeat(2, 1fr) !important; }
.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3,
ul.products.columns-3{ grid-template-columns: repeat(3, 1fr) !important; }
.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4,
ul.products.columns-4{ grid-template-columns: repeat(4, 1fr) !important; }

/* Sommige WooCommerce/Storefront-versies voegen een extra <li> toe die geen
   .product-class heeft. Die verbergen we, zodat alleen echte productkaarten
   de grid vullen. */
.woocommerce ul.products > li:not(.product){
  display: none !important;
}

/* DE DEFINITIEVE FIX: WooCommerce/Storefront zet een ::before pseudo-element
   op ul.products als "clearfix" (een truc om floats netjes te laten
   beginnen). Dat pseudo-element heeft zelf geen zichtbare inhoud, maar wordt
   WEL meegeteld als grid-item omdat het een direct child-equivalent is van
   de ul.products grid-container. Daardoor verschuift de telling: met 4
   zichtbare producten + dit onzichtbare 5e "item" erbij, past het 4e
   product niet meer op de eerste rij en springt het naar een nieuwe regel.
   Door dit pseudo-element uit te schakelen, telt het grid weer correct. */
.woocommerce ul.products::before,
.woocommerce-page ul.products::before,
ul.products::before{
  display: none !important;
  content: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product{
  background-color: var(--white);
  border-radius: 22px;
  padding: 18px 18px 24px;
  box-shadow: 0 8px 20px rgba(139,94,60,0.07);
  transition: transform 0.2s ease;

  /* box-sizing: border-box is cruciaal — zonder dit wordt de padding
     (36px links+rechts samen) BOVENOP de kolombreedte van het grid gezet
     in plaats van daarbinnen verrekend, waardoor de kaart te breed wordt
     en niet meer in de kolom past. */
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

/* Responsief: alleen op telefoon-formaat (≤600px) altijd 2 kolommen,
   ongeacht of de shortcode zelf "columns-2", "columns-3" of "columns-4"
   meegeeft. Tablet en desktop blijven ongemoeid (die toonden al een goed
   aantal kolommen). Deze media-query-regels zijn met opzet even specifiek
   als de columns-N regels hierboven — anders verliezen ze de CSS-
   specificiteitsstrijd en blijft bijvoorbeeld "columns-4" ook op een
   telefoon 4 kolommen tonen. */
@media (max-width: 600px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  .woocommerce ul.products.columns-2,
  .woocommerce-page ul.products.columns-2,
  ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3,
  ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4,
  ul.products.columns-4{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Op productkaarten (in de webshop-grid en op de homepage) wordt de
     "Toevoegen aan winkelwagen"/"Opties"-knop op mobiel een rond
     icoon-knopje met een winkelmandje, in plaats van de volledige tekst.
     Bij smalle, 2-koloms kaarten was er te weinig breedte voor de tekst,
     waardoor de knop ging overlappen met de prijs ernaast. De tekst blijft
     wel aanwezig voor schermlezers (via text-indent, niet via display:none —
     dat zou de tekst ook voor screen readers verbergen). */
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.add_to_cart_button{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 200%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    /* Knop loskoppelen van de tekstflow eronder, en netjes centreren
       binnen de beschikbare ruimte op de kaart. */
    margin: 12px auto 0 !important;
    position: static;
  }

  /* Bij variabele producten ("Opties"-knop) een ander icoon: drie puntjes,
     om visueel te onderscheiden dat dit naar de productpagina doorlinkt
     in plaats van direct iets toe te voegen aan de winkelwagen. */
  .woocommerce ul.products li.product a.product_type_variable.add_to_cart_button{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
    background-size: 22px 22px;
  }

  /* Dezelfde winkelmandje-icoon-knop, maar dan voor de "Toevoegen aan
     winkelwagen"-knop op de LOSSE PRODUCTPAGINA (niet de productkaarten in
     een grid — die worden hierboven al afgehandeld). Dit is de knop die
     verschijnt nadat iemand bij een variabel product een optie (kleur/maat)
     heeft gekozen. Op desktop/tablet blijft hier gewoon de tekst
     "Toevoegen aan winkelwagen" staan; alleen op mobiel wordt dit een
     icoon, consistent met de knoppen in de productgrid. */
  .woocommerce div.product form.cart .single_add_to_cart_button,
  .woocommerce-page div.product form.cart .single_add_to_cart_button,
  div.product form.cart .single_add_to_cart_button{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 200%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }
}

.woocommerce ul.products li.product:hover{
  transform: translateY(-3px);
}

.woocommerce ul.products li.product img{
  border-radius: 16px;
}

.woocommerce ul.products li.product .price{
  color: var(--berry);
  font-weight: 700;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3{
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  color: var(--cognac-dark);
}

.woocommerce span.onsale{
  background-color: var(--berry);
  border-radius: 100px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.woocommerce-page .woocommerce-breadcrumb{
  color: var(--cognac);
  opacity: 0.7;
}

/* Productpagina */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--berry);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
  font-family: 'Fredoka', sans-serif;
}

/* Winkelwagen & checkout tabellen */
.woocommerce table.shop_table{
  border-radius: 16px;
  border: 1px solid var(--line);
}
.woocommerce table.shop_table th{
  font-family: 'Fredoka', sans-serif;
  color: var(--cognac-dark);
}

/* --------------------------------------------------------------------------
   Blog / artikelen
   -------------------------------------------------------------------------- */
.entry-title a{
  color: var(--cognac-dark);
}
.entry-title a:hover{
  color: var(--berry);
}

.entry-meta{
  font-family: 'Nunito', sans-serif;
  color: var(--cognac);
  opacity: 0.7;
  font-size: 14px;
}

.entry-content blockquote{
  border-left: 4px solid var(--rose);
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--berry);
  padding-left: 20px;
}

/* --------------------------------------------------------------------------
   Contactpagina (formulier-styling, werkt met de meeste form-plugins
   zoals Contact Form 7 of WPForms — class-namen zijn algemeen gehouden)
   -------------------------------------------------------------------------- */
.nino-contact-wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 90px;
}

.nino-contact-wrap input[type="text"],
.nino-contact-wrap input[type="email"],
.nino-contact-wrap textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea{
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  font-family: 'Nunito', sans-serif;
  margin-bottom: 18px;
  background-color: var(--white);
}

.nino-contact-wrap input:focus,
.nino-contact-wrap textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus{
  outline: none;
  border-color: var(--rose);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#colophon,
.site-footer{
  background-color: var(--cognac);
  color: #FFE7DC;
}

.site-footer h2,
.site-footer h3,
.site-footer .widget-title{
  color: #fff;
}

.site-footer a{
  color: #FFE7DC;
}
.site-footer a:hover{
  color: var(--blush);
}

.site-footer .nino-footer-bow{
  width: 46px;
  margin: 0 auto 14px;
  display: block;
}

/* --------------------------------------------------------------------------
   Decoratieve achtergrond-confetti (zachte vervaagde vormpjes)
   -------------------------------------------------------------------------- */
.nino-confetti-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.nino-confetti-bg img{
  position: absolute;
  filter: blur(0.5px);
}

/* --------------------------------------------------------------------------
   Responsief: mobiele aanpassingen
   -------------------------------------------------------------------------- */
@media (max-width: 600px){
  .nino-hero{ padding: 45px 20px 50px; }
  .nino-signature-banner{ padding: 40px 24px; margin-bottom: 50px; }
}