/* 444 Nutrition huisstijl voor de WooCommerce-pagina's */

:root{
  --n444-kobalt:#1B4FE0;
  --n444-kobalt-d:#0B2A80;
  --n444-kobalt-l:#EDF2FF;
  --n444-inkt:#12141A;
  --n444-tekst:#3D444F;
  --n444-zacht:#6B7280;
  --n444-rand:#E4E7EB;
  --n444-tegel:#F1F2F4;
  --n444-groen:#1E9E5A;
}

body.woocommerce, body.woocommerce-page, body.woocommerce-cart,
body.woocommerce-checkout, body.woocommerce-account, body.post-type-archive-product,
body.single-product, body.tax-product_cat{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--n444-tekst);
  background:#fff;
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3,
.single-product .product_title{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--n444-inkt);
  letter-spacing:-.02em;
  font-weight:800;
}
.single-product .product_title{font-size:clamp(28px,3.2vw,40px);line-height:1.12;margin-bottom:10px}

/* Knoppen */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wc-block-components-button, .wp-element-button, .wc-block-cart__submit-button{
  background:var(--n444-kobalt)!important;
  color:#fff!important;
  border:none!important;
  border-radius:10px!important;
  font-weight:700!important;
  letter-spacing:-.01em;
  padding:14px 22px!important;
  font-size:15px!important;
  line-height:1.2!important;
  transition:background .15s ease, transform .15s ease;
  box-shadow:none!important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wc-block-components-button:hover, .wc-block-cart__submit-button:hover{
  background:var(--n444-kobalt-d)!important;
  transform:translateY(-1px);
}
.woocommerce a.button.disabled, .woocommerce button.button:disabled{
  background:var(--n444-tegel)!important;color:var(--n444-zacht)!important;
}

/* Prijs */
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price{
  color:var(--n444-inkt);font-weight:800;font-size:24px;
}
.woocommerce div.product p.price small,
.woocommerce ul.products li.product .price small{
  font-weight:500;font-size:13px;color:var(--n444-zacht);
}
.woocommerce ul.products li.product .price{font-size:17px}

/* Productkaarten in de winkel */
.woocommerce ul.products li.product{
  background:#fff;border:1px solid var(--n444-rand);border-radius:16px;
  padding:16px;transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:#C9D3E8;box-shadow:0 6px 22px rgba(18,20,26,.06);
}
.woocommerce ul.products li.product a img{
  background:var(--n444-tegel);border-radius:12px;margin-bottom:12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px!important;font-weight:700;color:var(--n444-inkt);padding-top:0!important;
}
.woocommerce span.onsale{
  background:var(--n444-kobalt);border-radius:999px;font-weight:700;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;min-height:auto;
  padding:6px 12px;line-height:1;
}

/* Productpagina */
.single-product div.product .woocommerce-product-gallery img{
  border-radius:16px;background:var(--n444-tegel);
}
.single-product div.product .woocommerce-product-details__short-description{
  font-size:17px;line-height:1.65;color:var(--n444-tekst);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin-bottom:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:var(--n444-rand)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:none;border-radius:0;padding:0 18px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-weight:600;color:var(--n444-zacht);padding:12px 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--n444-inkt);box-shadow:inset 0 -2px 0 var(--n444-kobalt);
}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:22px;margin-bottom:12px}
.woocommerce div.product .woocommerce-tabs .panel h3{font-size:17px;margin:22px 0 6px}
.woocommerce div.product .product_meta{
  font-size:13px;color:var(--n444-zacht);border-top:1px solid var(--n444-rand);
  padding-top:16px;margin-top:20px;
}

/* Onze eigen beloftes onder de knop */
.n444-beloftes{
  list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--n444-rand);
  display:grid;gap:10px;
}
.n444-beloftes li{
  display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--n444-tekst);margin:0;
}
.n444-beloftes svg{flex:0 0 auto;margin-top:2px}
.n444-waarschuwing{
  margin-top:18px;padding:14px 16px;background:var(--n444-tegel);border-radius:12px;
  font-size:12.5px;line-height:1.6;color:var(--n444-zacht);
}
.woocommerce div.product p.stock.out-of-stock{
  color:var(--n444-tekst);background:var(--n444-kobalt-l);border-radius:10px;
  padding:12px 14px;font-size:14.5px;font-weight:500;
}

/* Winkelwagen en afrekenen */
.woocommerce table.shop_table{border-radius:14px;border-color:var(--n444-rand)}
.woocommerce table.shop_table th{color:var(--n444-inkt);font-weight:700}
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3, .woocommerce-checkout h3#order_review_heading{
  font-size:20px;color:var(--n444-inkt);
}
.woocommerce form .form-row label{font-weight:600;color:var(--n444-inkt);font-size:14px}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  border:1px solid var(--n444-rand)!important;border-radius:10px!important;
  padding:12px 14px!important;font-size:15px!important;height:auto!important;
  background:#fff;color:var(--n444-inkt);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  outline:none;border-color:var(--n444-kobalt)!important;
  box-shadow:0 0 0 3px rgba(27,79,224,.14)!important;
}
.woocommerce-checkout #payment{background:var(--n444-tegel);border-radius:16px}
.woocommerce-checkout #payment div.payment_box{background:#fff;border-radius:10px;font-size:13.5px}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#fff}
.n444-afreken-note{
  font-size:12.5px;color:var(--n444-zacht);line-height:1.55;margin:0 0 14px;
}
.woocommerce-info, .woocommerce-message{
  border-top-color:var(--n444-kobalt);background:var(--n444-kobalt-l);border-radius:12px;
}
.woocommerce-info::before, .woocommerce-message::before{color:var(--n444-kobalt)}
.woocommerce-error{border-top-color:#C0392B;border-radius:12px}

/* Kruimelpad */
.woocommerce .woocommerce-breadcrumb{
  font-size:13px;color:var(--n444-zacht);margin-bottom:22px;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--n444-zacht);text-decoration:none}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--n444-kobalt)}

/* Kop- en voetbalk van het thema iets rustiger op winkelpagina's */
.woocommerce-page .wp-block-navigation, .single-product .wp-block-navigation{
  font-size:15px;
}
.woocommerce-page .wp-block-navigation a:hover, .single-product .wp-block-navigation a:hover{
  color:var(--n444-kobalt);
}

@media(max-width:600px){
  .single-product .product_title{font-size:26px}
  .woocommerce div.product p.price{font-size:21px}
}

/* ------------------------------------------------------------------ */
/* Blokgebaseerde productrasters (Product Collection)                  */
/* ------------------------------------------------------------------ */

.wp-block-woocommerce-product-collection .wc-block-product-template__responsive,
.wp-block-post-template.products-block-post-template,
.wc-block-product-template{
  gap:22px!important;
}
.wc-block-product-template li.product,
.products-block-post-template li,
.wp-block-post-template li.product{
  background:#fff;border:1px solid var(--n444-rand);border-radius:16px;
  padding:16px;transition:border-color .15s ease, box-shadow .15s ease;
  display:flex;flex-direction:column;
}
.wc-block-product-template li.product:hover,
.products-block-post-template li:hover{
  border-color:#C9D3E8;box-shadow:0 6px 22px rgba(18,20,26,.06);
}
.wc-block-product-template li.product img,
.products-block-post-template li img,
.wp-block-woocommerce-product-image img{
  background:var(--n444-tegel);border-radius:12px;
}
.wc-block-product-template .wp-block-post-title,
.products-block-post-template .wp-block-post-title{
  font-size:16px!important;font-weight:700!important;line-height:1.3;
  margin:14px 0 6px!important;
}
.wc-block-product-template .wp-block-post-title a,
.products-block-post-template .wp-block-post-title a{
  color:var(--n444-inkt);text-decoration:none;
}
.wc-block-components-product-price{
  color:var(--n444-inkt)!important;font-weight:800!important;font-size:17px!important;
}
.wc-block-components-product-price small,
.wc-block-components-product-price .woocommerce-price-suffix{
  font-weight:500;font-size:12.5px;color:var(--n444-zacht);
}
.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-button .wp-block-button__link{
  background:var(--n444-kobalt)!important;color:#fff!important;border-radius:10px!important;
  font-weight:700!important;padding:12px 18px!important;font-size:14.5px!important;
  border:none!important;width:100%;justify-content:center;
}
.wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover{
  background:var(--n444-kobalt-d)!important;
}
.wc-block-components-product-sort-select select,
.woocommerce-ordering select{
  border:1px solid var(--n444-rand);border-radius:10px;padding:10px 14px;
  font-size:14px;background:#fff;color:var(--n444-inkt);
}
.woocommerce-result-count{color:var(--n444-zacht);font-size:14px}
.woocommerce-products-header__title, .wp-block-query-title{
  font-weight:800;letter-spacing:-.02em;color:var(--n444-inkt);
}

/* ------------------------------------------------------------------ */
/* Landingspagina's: themakader eromheen volledig weg                  */
/* Werkt via de body-class die de plugin zet, dus ook op nieuwe        */
/* pagina's die we later toevoegen.                                    */
/* ------------------------------------------------------------------ */

body.n444-landing header.wp-block-template-part,
body.n444-landing footer.wp-block-template-part,
body.n444-landing .wp-block-post-title{
  display:none!important;
}
body.n444-landing .wp-site-blocks > .wp-block-group,
body.n444-landing main.wp-block-group,
body.n444-landing main > .wp-block-group,
body.n444-landing .entry-content{
  margin:0!important;
  padding:0!important;
  max-width:none!important;
}
body.n444-landing .entry-content > *{
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.n444-landing{
  margin:0!important;
  padding:0!important;
}
body.n444-landing #n444{
  max-width:none!important;
}

/* Pre-order */
.woocommerce div.product p.stock.n444-preorder{
  color:var(--n444-inkt);background:var(--n444-kobalt-l);border-radius:10px;
  padding:12px 14px;font-size:14.5px;font-weight:500;line-height:1.55;
}
.n444-badge{
  display:inline-block;background:var(--n444-kobalt);color:#fff;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;margin-bottom:10px;
}

/* Tabbladen op de productpagina rustiger: kleinere koppen */
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:-.005em;
}
.woocommerce div.product .woocommerce-tabs .panel > h2{
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--n444-zacht)!important;
  margin-bottom:14px!important;
}
.woocommerce div.product .woocommerce-tabs .panel h3{
  font-size:15.5px!important;
  font-weight:700!important;
  margin:20px 0 4px!important;
  color:var(--n444-inkt)!important;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel td,
.woocommerce div.product .woocommerce-tabs .panel th{
  font-size:15px!important;
  line-height:1.65;
}
.woocommerce div.product .woocommerce-tabs #reviews h2,
.woocommerce div.product .woocommerce-tabs #reviews h3{
  font-size:15px!important;
}

/* ------------------------------------------------------------------ */
/* Kopbalk op de winkelpagina's gelijk aan de landingspagina's         */
/* ------------------------------------------------------------------ */

.n444-announce{
  background:var(--n444-kobalt);
  color:#fff;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.n444-announce-in{
  max-width:1220px;margin:0 auto;padding:10px 22px;
  text-align:center;font-size:13.5px;font-weight:600;letter-spacing:-.005em;
}

body:not(.n444-landing) header.wp-block-template-part{
  background:var(--n444-inkt)!important;
  color:#fff;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
body:not(.n444-landing) header.wp-block-template-part > .wp-block-group{
  padding-top:0!important;padding-bottom:0!important;
}
body:not(.n444-landing) header.wp-block-template-part .wp-block-group.alignwide{
  max-width:1220px;margin-inline:auto;padding:16px 22px;
}

/* sitetitel wordt het logo */
body:not(.n444-landing) .wp-block-site-title{margin:0}
body:not(.n444-landing) .wp-block-site-title a{
  display:block;
  width:186px;height:37px;
  text-indent:-9999px;white-space:nowrap;overflow:hidden;
  background-image:var(--n444-logo-licht);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}
/* alleen de donkere balk bovenaan krijgt het witte woordmerk */
body:not(.n444-landing) header.wp-block-template-part .wp-block-site-title a{background-image:var(--n444-logo)}

/* navigatie wit */
body:not(.n444-landing) header.wp-block-template-part .wp-block-navigation a,
body:not(.n444-landing) header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__label{
  color:#fff!important;font-size:15px;font-weight:500;
}
body:not(.n444-landing) header.wp-block-template-part .wp-block-navigation a:hover,
body:not(.n444-landing) header.wp-block-template-part .wp-block-navigation a:focus{
  color:#7FA2FF!important;
}
body:not(.n444-landing) header.wp-block-template-part svg{fill:#fff;color:#fff}
body:not(.n444-landing) header.wp-block-template-part .wc-block-mini-cart__badge{
  background:var(--n444-kobalt);color:#fff;
}
body:not(.n444-landing) header.wp-block-template-part .wp-block-navigation__responsive-container-open svg,
body:not(.n444-landing) header.wp-block-template-part .wc-block-customer-account svg{fill:#fff}

/* het uitklapmenu op mobiel blijft leesbaar */
body:not(.n444-landing) .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--n444-inkt)!important;
}
body:not(.n444-landing) .wp-block-navigation__responsive-container.is-menu-open a{color:#fff!important}

@media(max-width:600px){
  body:not(.n444-landing) .wp-block-site-title a{width:150px;height:30px}
  .n444-announce-in{font-size:12.5px;padding:9px 16px}
}

/* Mijn account: rustiger en in dezelfde maat als de rest */
.woocommerce-account .entry-content > h1,
.woocommerce-account .wp-block-post-title{
  font-size:clamp(26px,3vw,34px)!important;font-weight:800;letter-spacing:-.02em;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;display:grid;gap:2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:10px 14px;border-radius:9px;
  font-size:15px;font-weight:500;color:var(--n444-tekst);text-decoration:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:var(--n444-tegel);color:var(--n444-inkt);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--n444-kobalt-l);color:var(--n444-kobalt-d);font-weight:700;
}
.woocommerce-account .woocommerce-MyAccount-content{font-size:15.5px;line-height:1.7}
.woocommerce-account .woocommerce-MyAccount-content a{color:var(--n444-kobalt)}
.woocommerce-account form.login,
.woocommerce-account form.register{
  border:1px solid var(--n444-rand)!important;border-radius:16px!important;padding:26px!important;
}
.woocommerce-account h2{font-size:19px!important;font-weight:800;letter-spacing:-.01em}
.woocommerce-account .woocommerce-privacy-policy-text p{
  font-size:12.5px;color:var(--n444-zacht);line-height:1.55;
}

/* Dode demolinks uit de themavoettekst op de winkelpagina's */
body:not(.n444-landing) footer.wp-block-template-part a[href="#"]{display:none!important}
body:not(.n444-landing) footer.wp-block-template-part .wp-block-navigation li:has(> a[href="#"]){display:none!important}

/* ================================================================== */
/* Telefoon en tablet                                                 */
/* ================================================================== */

@media (max-width: 782px) {

  /* Formuliervelden op 16px, anders zoomt iOS bij elke tik in         */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="url"], select, textarea {
    font-size: 16px;
    min-height: 46px;
  }

  /* Knoppen groot genoeg om met een duim te raken                     */
  .wp-block-button__link,
  .woocommerce .button,
  .woocommerce button.button,
  .woocommerce input[type="submit"],
  .wc-block-components-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Winkelpagina: aantal resultaten en sorteermenu onder elkaar       */
  .woocommerce .woocommerce-result-count,
  .woocommerce-page .woocommerce-result-count {
    float: none;
    width: 100%;
    margin: 0 0 10px;
  }
  .woocommerce .woocommerce-ordering,
  .woocommerce-page .woocommerce-ordering {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
  }
  .woocommerce .woocommerce-ordering select,
  .woocommerce-page .woocommerce-ordering select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Productpagina: formaatkeuze onder het label, over de volle breedte */
  .woocommerce div.product form.cart table.variations,
  .woocommerce div.product form.cart table.variations tbody,
  .woocommerce div.product form.cart table.variations tr,
  .woocommerce div.product form.cart table.variations th,
  .woocommerce div.product form.cart table.variations td {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  .woocommerce div.product form.cart table.variations th.label {
    margin-bottom: 6px;
  }
  .woocommerce div.product form.cart table.variations select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .woocommerce div.product form.cart div.quantity {
    width: 84px;
    flex: none;
    margin: 0;
  }
  .woocommerce div.product form.cart div.quantity input.qty {
    width: 100%;
    text-align: center;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 180px;
  }
  .woocommerce div.product form.cart table.variations,
  .woocommerce div.product form.cart .woocommerce-variation {
    flex: 1 1 100%;
  }
  .woocommerce div.product .woocommerce-variation-price { margin-bottom: 6px; }

  /* Producttabs onder elkaar in plaats van naast elkaar               */
  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    display: block;
    width: 100%;
    margin: 0;
  }
  .woocommerce div.product .product_meta {
    display: block;
    margin-top: 18px;
  }

  /* Zoomlaag over de productfoto heeft op een telefoon geen zin       */
  .woocommerce div.product .zoomImg { display: none !important; }

  /* Onze documentpagina's                                             */
  #n444-doc { padding: 0 18px 34px; font-size: 16px; }
  #n444-doc h1 { font-size: 27px; margin-top: 24px; }
  #n444-doc h2 { font-size: 20px; }
  #n444-doc h3 { font-size: 16.5px; }
  #n444-doc a { word-break: break-word; }
  #n444-doc table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #n444-doc th, #n444-doc td { min-width: 108px; }

  /* Aankondigingsbalk                                                 */
  .n444-announce-in { font-size: 13px; line-height: 1.35; padding: 9px 16px; }

  /* Winkelwagen en afrekenen                                          */
  .woocommerce table.shop_table_responsive,
  .wc-block-cart-items { font-size: 15px; }
  .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { width: 100%; }
  .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; }

  /* Niets mag horizontaal buiten beeld vallen                         */
  img, video, iframe, table { max-width: 100%; }
}

@media (max-width: 480px) {
  #n444-doc h1 { font-size: 24px; }
  .woocommerce div.product form.cart .single_add_to_cart_button { min-width: 0; }
}

/* Winkelpagina: aantal resultaten en sorteren onder elkaar op smalle schermen */
@media (max-width: 782px) {
  .wp-block-group.is-content-justification-space-between:has(.wc-block-catalog-sorting) {
    flex-wrap: wrap;
    gap: 12px;
  }
  .wc-block-product-results-count,
  .wc-block-catalog-sorting {
    flex: 1 1 100%;
  }
  /* Wat lucht weghalen tussen de formaatkeuze en de bestelknop */
  .woocommerce div.product form.cart table.variations td.value { padding-bottom: 0; }
  .woocommerce div.product form.cart table.variations { margin-bottom: 12px; }
  .woocommerce div.product .product_meta > span { display: block; margin: 2px 0; }
}

/* De zwevende valutaknop van de plugin hoeft niet: de valuta volgt de taal.
   Kiest iemand hier los een valuta, dan staan de prijzen op de landingspagina
   in euro terwijl de winkel in kroner staat, en dat leest als een fout. */
.woo-multi-currency.wmc-sidebar { display: none !important; }


/* ------------------------------------------------------------------ */
/* Taalkiezer staat rechts van de winkelknop                           */
/* De koptekst is een flexrij, dus we verplaatsen hem met order.       */
/* ------------------------------------------------------------------ */

nav .wrap > details.taalkiezer {
	order: 1;
	margin-left: 14px;
}