/*
 Theme Name:   Storefront Child
 Theme URI:    https://www.wplounge.nl/
 Description:  Storefront Child Theme
 Author:       Robert Tenback
 Author URI:   https://www.10dsgn.nl/
 Template:     storefront
 Version:      1.0.1
 Tags:         
 Text Domain:  storefront-child
*/

/* =Eigen CSS hier beneden plaatsen
-------------------------------------------------------------- */
.entry-header {
  display: none;
}

/* sidebar removed from Woo, oprekken */
.entry-content {
  float: none;
  width: 100%;
  max-width: 850px;
  margin: 0px auto 0;
}

.wp-block-cover {
  margin-bottom: 50px;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: 10px !important	;
}

/* login fileds */
#loginform {
  width: 80%;
}
#user_login,
#user_pass {
  font-size: 16px;
  min-height: 47px;
  padding: 6px 16px;
  border-radius: 4px;
  width: 100%;
  border: solid 1px gray;
  background-color: white;
}

.login-submit {
  float: right;
}

.login-submit .button {
  background-color: #23a455;
  color: white;
}

.login-msg {
  color: red;
}


/* Mijn Beeldoverleg - Sessie scherm */

.buttonflex {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  width: 100%;
  justify-content: space-around;
}

input[type="text"].sessienaam {
  width: 80%;
  color: green;
}
div.sessiefield {
  padding: 10px;
}
.sessiebuttons {
  display: flex;
}
.woocommerce-additional-fields {
  display: none;
}

/* disable focus box rondom links */
a:focus,
.focus a {
  outline: none !important;
}

/* ------------------------------------- 
	20220207 RT Navbar naast logo
*/
@media (min-width: 768px) {
  #masthead .col-full {
    display: flex;
    align-items: center;
  }

  #masthead .main-navigation {
    text-align: right;
  }

  .woocommerce-active .site-header div.site-branding {
    width: auto;
  }
}
/* ------------------------------------- 
20220207 Custom styles gebruikt
------------------------------------- */
.rounded {
  border-radius: 10px;
}

.shadow {
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}

.entry-summary {
  width: 62% !important;
}

.entry-summary h1 {
  font-size: 2em;
}

.single-product div.product .woocommerce-product-gallery {
  width: 30%;
  padding-top: 60px;
}

single-product div.product p.price {
  font-size: 1.3em;
}

.woocommerce-form-login-toggle {
  display: none;
}

.icon figure {
  max-width: 50px;
  width: 50px;
}

body,
p {
  font-family: "Raleway", sans-serif;
  font-display: swap;
}

div.menu {
  display: none !important;
}

.site-header .site-branding img {
  max-height: 150px;
  max-width: 150px;
}

.site-branding {
  display: block;
}

.site-header {
  padding: 0px;
  padding-bottom: 0.1em;

  z-index: 999;
  height: 160px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.site-content {
  padding-top: 170px;
  background-color: #f8f9fb;
}

/********
News
*******/
.nieuws{
  border-left: 6px solid blue;
  padding-left: 15px;;
}

.nieuws h4{
  font-size: 1.1em;
  font-weight: 700;
}

/*********
Contact form
**********/

.wpcf7{
  border: 2px solid lightgrey;
  padding: 10px;
  border-radius: 10px;
  
}

/*************
Collapsible FAQ 
*************/
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapscontent {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-ou
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/*************
Menu Navigation
*************/

#masthead .main-navigation {
  text-align: left;
}

.main-navigation ul {
	font-family: Raleway, sans-serif;
  font-display: swap;
	font-size: 16px;
	font-weight: 700;
  }
  
.primary-navigation .menubutton A {
	background-color: #4caf50; /* Green */
	border: none;
	color: white;
	padding: 5px 5px !important;
	text-decoration: none;
	display: inline-block;
	background-color: white;
	color: black;
	border: 3px solid #4caf50; /* Green */
	border-radius: 4px;
  }

.primary-navigation {
  float: right;
}

.primary-navigation ul{
	margin-top: 80px;
}

.primary-navigation .menu-item {
  padding-top: 9px;
  padding-bottom: 9px;
  /*	opacity: 0.6; */
  letter-spacing: 1px;
  /* text-transform: uppercase; */

  position: relative;
  line-height: 20px;
}

.menu-item:hover {
  opacity: 0.9;
}

.menu-item:active {
  opacity: 0.8;
}

.menu-item.w--current {
  opacity: 1;
  color: #1a1b1f;
  font-weight: 600;
}

.menu-item.w--current:hover {
  opacity: 0.8;
  color: #32343a;
}

.menu-item.w--current:active {
  opacity: 0.1;
  color: #32343a;
}

#site-navigation .handheld-navigation {
	background-color: white;
	position: relative;
	top: -100px;
}
#site-navigation .handheld-navigation ul{
	border: 3px solid lightgray; /* Green */
	border-radius: 4px; 
	padding: 10px; 
}

/*   ---- Footer ---- */
.footer-widgets {
  padding-top: 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-widgets h3 {
  font-size: medium;
  font-weight: 700;
}

.widget {
  margin: 0 0 10px;
}

span.widget-title {
  margin-bottom: 0px !important;
}
/* ----- */
/* Lettergrootte van titels op de WooCommerce Mijn Account pagina */
.woocommerce-account h2 {
    font-size: 1.6em; 
}

/* Change WC Acct Page Column Widths */
@media only screen and (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 22%;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 70%;
  }
}
/* Style WC Account Endpoint Links */
nav.woocommerce-MyAccount-navigation ul {
  list-style-type: none;
  padding-left: 0;
  max-width: 200px;
  font-size: 17px;
  line-height: 26px;
}
nav.woocommerce-MyAccount-navigation ul li {
  padding: 8px 20px;
  background-color: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
nav.woocommerce-MyAccount-navigation ul li.is-active {
  background-color: rgba(0, 0, 0, 0.1);
}

li.woocommerce-MyAccount-navigation-link a {
  padding: 0px !important;
}

nav.woocommerce-MyAccount-navigation ul li.is-active a {
  color: rgba(0, 0, 0, 0.8);
  cursor: default;
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
  background-color: rgba(0, 0, 0, 0.07);
}

/* -- account -- */
table td,
table th {
  padding: 0.5em 0.41575em;
  vertical-align: top;
}

/*  hide message under display name: Je naam wordt op deze manier weergegeven in het accountgedeelte en in beoordelingen */
#account_display_name + span {
  display: none;
}

.woocommerce-EditAccountForm fieldset {
  border-radius: 6px;
  border: solid 1px gray;
}


/* checkout 20250915 */
:root {
  --bo-accent: #0066cc; /* Beeldoverleg blauw */
}

/* Rustige achtergrond */
.woocommerce-checkout {
  background:#f6f7f8;
  padding-top:12px;
  padding-bottom:24px;
}

/* Paginatitel + breadcrumbs verbergen */
.woocommerce-checkout .entry-title,
.woocommerce-checkout .storefront-breadcrumb {
  display:none !important;
}

/* Kaartenlook voor velden en order review */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #order_review {
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  padding:22px;
}

/* Sticky order review rechts op desktop */
@media (min-width: 992px) {
  .woocommerce-checkout #order_review {
    position:sticky;
    top:16px;
  }
}

/* Koppen en typografie */
.woocommerce-checkout h3 {
  font-size:22px;
  margin-top:0;
}

/* Formvelden */
.woocommerce form .form-row {
  margin-bottom:14px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background:#fff;
  border:1px solid #d8dde6;
  border-radius:10px;
  padding:10px 12px;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline:none;
  border-color: var(--bo-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bo-accent) 25%, transparent);
}

/* Tabel netter */
.woocommerce table.shop_table {
  border:0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-top:0;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  font-size:16px;
}
.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
  font-weight:700;
  font-size:18px;
}

/* Knoppen in blauw */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
#place_order {
  background: var(--bo-accent);
  border-color: var(--bo-accent);
  border-radius:12px;
  padding:12px 18px;
  font-weight:600;
  color:#fff;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
#place_order:hover {
  filter:brightness(0.95);
}

/* Info-/foutmeldingen */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.woocommerce-info {
  background:#e9f1ff;
  border-left:4px solid #6aa6ff;
  color:#244;
}

/* Couponbalk minder schreeuwerig */
.woocommerce-checkout .woocommerce-info {
  margin-bottom:16px;
}

/* Storefront spacing fix */
.storefront-full-width-content .content-area {
  padding-top:0;
}

/* Coupon/info melding beter leesbaar */
.woocommerce-info {
  background: #aaccff;           /* zacht blauw */
  border-left: 4px solid #0066cc;/* accentblauw */
  color: #222;                   /* donkere tekst */
}

.woocommerce-info a {
  color: #0066cc;                /* link in accentkleur */
  font-weight: 600;
  text-decoration: underline;
}