/*
Theme Name: Tahe NL
Author: GratiseenWebsite.nl
Description: Officiele webshop van Tahe Nederland
Version: 1.0.0
Text Domain: tahe-nl
WooCommerce: true
*/

:root{
  --tahe-black:#0b0b0c;
  --tahe-white:#ffffff;
  --tahe-gray-1:#f6f6f7;
  --tahe-gray-2:#eeeeef;
  --tahe-accent:#b10000;
  --tahe-focus:rgba(177,0,0,.35);
  --tahe-max:1220px;

  --tahe-card-radius:22px;
  --tahe-card-shadow:0 14px 30px rgba(0,0,0,.06);
  --tahe-card-shadow-hover:0 18px 40px rgba(0,0,0,.09);
  --tahe-card-border:rgba(0,0,0,.06);
  --tahe-img-bg:#f6f6f7;

  --tahe-btn-h:52px;
  --tahe-btn-radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--tahe-black);
  background:linear-gradient(180deg,#ffffff 0%,var(--tahe-gray-1) 60%,#ffffff 100%);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

:focus-visible{
  outline:2px solid var(--tahe-accent);
  outline-offset:2px;
}

/* =========================
   SVG BEVEILIGING
   ========================= */

svg{max-width:100%;height:auto}

.tahe-topbar svg,
.tahe-header svg,
.tahe-ico svg,
.tahe-cart svg,
.tahe-menu svg,
svg.tahe-soc-ico{
  width:22px !important;
  height:22px !important;
}

/* =========================
   HAMBURGERMENU NORMAAL TONEN
   ========================= */

.tahe-menu button,
.tahe-menu .menu-toggle,
.tahe-menu .tahe-burger,
.tahe-header button.menu-toggle,
.tahe-header .menu-toggle,
.tahe-header .tahe-burger,
button.menu-toggle,
button.tahe-burger,
button.hamburger,
.navbar-toggler{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:auto !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-weight:inherit !important;
  transform:none !important;
}

.tahe-menu button:hover,
.tahe-menu .menu-toggle:hover,
.tahe-menu .tahe-burger:hover,
.tahe-header button.menu-toggle:hover,
.tahe-header .menu-toggle:hover,
.tahe-header .tahe-burger:hover,
button.menu-toggle:hover,
button.tahe-burger:hover,
button.hamburger:hover,
.navbar-toggler:hover{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

.tahe-menu button span,
.tahe-menu .menu-toggle span,
.tahe-menu .tahe-burger span,
.tahe-header button.menu-toggle span,
.tahe-header .menu-toggle span,
.tahe-header .tahe-burger span,
button.menu-toggle span,
button.tahe-burger span,
button.hamburger span,
.navbar-toggler span{
  background:currentColor !important;
}

/* =========================
   PRODUCT GRID
   ========================= */

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

@media(max-width:1200px){
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:1000px){
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:640px){
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* =========================
   PRODUCTKAART PERFECT
   ========================= */

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;

  background:var(--tahe-white) !important;
  border:1px solid var(--tahe-card-border) !important;
  border-radius:var(--tahe-card-radius) !important;
  box-shadow:var(--tahe-card-shadow) !important;

  padding:18px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  text-align:center !important;

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  position:relative !important;
  overflow:hidden !important;
}

body.woocommerce ul.products li.product:hover,
body.woocommerce-page ul.products li.product:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--tahe-card-shadow-hover) !important;
  border-color:rgba(196,0,0,.18) !important;
}

/* Klikgebied strak */
.woocommerce ul.products li.product a,
.woocommerce-page ul.products li.product a{
  text-decoration:none !important;
  color:inherit !important;
}

/* =========================
   PRODUCT AFBEELDING
   ========================= */

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:18px !important;
  margin:0 0 14px 0 !important;
}

/* =========================
   TITEL EN PRIJS GECENTREERD
   ========================= */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title{
  color:#111111 !important;
  font-weight:900 !important;
  font-size:17px !important;
  line-height:1.25 !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
  text-align:center !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price{
  color:#000000 !important;
  font-weight:900 !important;
  font-size:16px !important;
  margin:0 0 14px 0 !important;
  display:block !important;
  text-align:center !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del{
  opacity:.55 !important;
  font-weight:700 !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins{
  text-decoration:none !important;
}

/* Rating netjes in het midden */
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating{
  margin:0 auto 12px auto !important;
  float:none !important;
}

/* Sale badge netjes */
.woocommerce span.onsale{
  background:var(--tahe-black) !important;
  color:var(--tahe-white) !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
}

/* =========================
   KNOPPEN PERFECT GECENTREERD
   ========================= */

.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart{
  width:100% !important;
  margin-top:auto !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;

  min-height:var(--tahe-btn-h) !important;
  padding:0 18px !important;
  border-radius:var(--tahe-btn-radius) !important;

  font-weight:900 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;

  float:none !important;
  box-sizing:border-box !important;
  white-space:normal !important;
}

/* Voeg toe aan winkelwagen */
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button{
  background:#000000 !important;
  color:#ffffff !important;
  border:1px solid rgba(0,0,0,.12) !important;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.button:hover{
  background:#000000 !important;
  color:#ffffff !important;
  border-color:var(--tahe-accent) !important;
  box-shadow:0 0 14px rgba(196,0,0,.30) !important;
}

/* Bekijk winkelwagen link */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart{
  margin-top:10px !important;
  background:#ffffff !important;
  color:#000000 !important;
  border:1px solid rgba(0,0,0,.14) !important;
  text-decoration:none !important;
}

.woocommerce ul.products li.product .added_to_cart:hover,
.woocommerce-page ul.products li.product .added_to_cart:hover{
  border-color:var(--tahe-accent) !important;
  box-shadow:0 0 14px rgba(196,0,0,.16) !important;
}

/* =========================
   UNIVERSELE KNOPPEN
   ========================= */

button:not(.menu-toggle):not(.tahe-burger):not(.hamburger):not(.navbar-toggler),
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button{
  background-color:#000000 !important;
  color:#ffffff !important;
  border:2px solid #000000 !important;
  border-radius:var(--tahe-btn-radius) !important;
  min-height:var(--tahe-btn-h) !important;
  padding:0 22px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  font-size:13px !important;
  line-height:1 !important;
  box-shadow:none !important;
  transition:border-color .22s ease, box-shadow .22s ease, transform .12s ease !important;
  cursor:pointer !important;
}

button:not(.menu-toggle):not(.tahe-burger):not(.hamburger):not(.navbar-toggler):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover{
  background-color:#000000 !important;
  color:#ffffff !important;
  border-color:var(--tahe-accent) !important;
  box-shadow:0 0 0 2px var(--tahe-focus) !important;
  transform:translateY(-1px) !important;
}

button:not(.menu-toggle):not(.tahe-burger):not(.hamburger):not(.navbar-toggler):active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
a.button:active,
.wp-block-button__link:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.add_to_cart_button:active,
.woocommerce button.single_add_to_cart_button:active{
  transform:translateY(0) !important;
  box-shadow:0 0 0 2px var(--tahe-focus) !important;
}

/* =========================
   MOBIEL EXTRA NETJES
   ========================= */

@media(max-width:640px){
  body.woocommerce ul.products li.product,
  body.woocommerce-page ul.products li.product{
    padding:16px !important;
    border-radius:18px !important;
  }

  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img{
    border-radius:14px !important;
    margin-bottom:12px !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title{
    font-size:17px !important;
  }

  .woocommerce ul.products li.product a.button,
  .woocommerce-page ul.products li.product a.button,
  .woocommerce ul.products li.product .added_to_cart,
  .woocommerce-page ul.products li.product .added_to_cart{
    min-height:56px !important;
    border-radius:16px !important;
  }
}