/*
Theme Name: Tonda Child
Theme URI: https://tonda.qodeinteractive.com/
Description: A child theme of Tonda Theme
Author: Select Themes
Author URI: http://themeforest.net/user/select-themes
Version: 1.0.1
Text Domain: tonda
Template: tonda
*/
/* Groter gecentreerd logo, zonder layoutverschuiving */
.qodef-logo-area .qodef-logo-wrapper > a {
  transform: scale(1.5);
  transform-origin: center center;
}

/* Prices across the website */
body .woocommerce-Price-amount,
body .woocommerce-Price-currencySymbol {
  color: #214034 !important;
  font-weight: 600 !important;
}

/* Main price on individual product pages */
body.single-product
.qodef-single-product-summary
.price {
  font-family: "Raleway", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  margin-left: 15%;
}

/* Main product-page price color */
body.single-product
.qodef-single-product-summary
.price .woocommerce-Price-amount,
body.single-product
.qodef-single-product-summary
.price .woocommerce-Price-currencySymbol {
  color: #E76F51 !important;
  font-size: inherit;
  line-height: inherit;
}

/* Feature-list text on product pages */
body.single-product
.woocommerce-Tabs-panel--description
h3 + ul li {
  font-weight: 400;
  color: #214034;
}

/* SKU, Category and Tags labels */
body.single-product
.qodef-single-product-summary
.product_meta > span {
  color: #214034;
}

/* WooCommerce Cart Totals beter leesbaar */
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-wrapper *,
.wc-block-components-totals-item,
.wc-block-components-totals-item *,
.wc-block-components-panel__button,
.wc-block-components-panel__button *,
.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon *,
.wc-block-components-totals-shipping,
.wc-block-components-totals-shipping *,
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item * {
    color: #214034 !important;
}

/* Subtiele scheidingslijnen iets donkerder */
.wc-block-components-totals-wrapper,
.wc-block-components-totals-footer-item {
    border-color: rgba(31, 61, 52, 0.25) !important;
}

/* OR tekst tussen betaalopties */
.wc-block-components-express-payment__event-buttons,
.wc-block-components-express-payment__separator,
.wc-block-components-express-payment__separator * {
    color: #214034 !important;
}

/* ADD TO CART - White text */
.single-product .summary form.cart .single_add_to_cart_button,
.single-product .summary form.cart .single_add_to_cart_button span {
  color: #F5F2EB !important;
  font-size: 13.7px;
  font-weight: 600;
}

.single-product .summary form.cart {
  display: block !important;
  width: 100%;
}

.single-product .summary form.cart .single_add_to_cart_button {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Category logo product page */
.single-product .summary .bb-category-title-logo {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 5px;
}

.single-product .summary .bb-category-title-logo__image {
  display: block;
  width: 125px;
  max-width: 42%;
  height: auto;
}

@media (max-width: 768px) {
  .single-product .summary .bb-category-title-logo {
    margin-bottom: 16px;
  }

  .single-product .summary .bb-category-title-logo__image {
    width: 95px;
    max-width: 48%;
  }
}

/*** Woocommerce sold individually no quantity field ***/
.single-product .summary form.cart .quantity,
.single-product .summary form.cart .qodef-quantity-buttons {
  display: none !important;
}

.single-product .summary form.cart .single_add_to_cart_button {
  margin-left: 0 !important;
}

/* =========================================================
   BOOZE BAG - CUSTOM 404 PAGE
   Add this to the child theme stylesheet or Additional CSS.
   ========================================================= */

.error404 {
  background: #e8dcc6;
}

.bb-404-page,
.bb-404-page * {
  box-sizing: border-box;
}

.bb-404-page {
  --bb-sand: #e8dcc6;
  --bb-cream: #f5f2eb;
  --bb-forest: #214034;
  --bb-green: #356f55;
  --bb-coral: #e76f51;
  --bb-mustard: #e2823c;

  width: min(100%, 1536px);
  margin: 0 auto;
  color: var(--bb-forest);
  background: var(--bb-sand);
  font-family: Raleway, Avenir, Montserrat, Helvetica, Arial, sans-serif;
}

.bb-404-hero {
  display: grid;
  grid-template-columns: minmax(380px, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  min-height: 650px;
  overflow: visible;
  background:
    radial-gradient(circle at 23% 32%, rgba(231, 111, 81, 0.08), transparent 24%),
    linear-gradient(90deg, #f7f0e4 0%, #f4ead8 47%, #eadcc3 100%);
}

.bb-404-copy {
  max-width: 620px;
  padding: clamp(68px, 6vw, 94px) clamp(36px, 5vw, 74px) clamp(68px, 6vw, 94px);
  text-align: center;
}

.bb-404-thread {
  display: none !important;
}

.bb-404-copy::before {
  display: inline-flex;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  justify-content: center;
  margin: 0 0 26px;
  color: var(--bb-coral);
  content: "404";
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(72px, 7.4vw, 118px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: none !important;
  text-shadow: 0 2px 0 rgba(245, 242, 235, 0.85);
}

.bb-404-thread span {
  position: relative;
  display: inline-block;
  text-shadow: 0 2px 0 rgba(245, 242, 235, 0.85);
}

.bb-404-thread span::after {
  position: absolute;
  right: -20%;
  bottom: 10%;
  width: 44%;
  height: 2px;
  border-bottom: 3px dashed rgba(231, 111, 81, 0.68);
  content: "";
  transform: rotate(-8deg);
}

.bb-404-thread span:last-child::after {
  display: none;
}

.bb-404-copy h1,
.error404 .bb-404-page .bb-404-copy h1#bb-404-title {
  margin: 0;
  color: var(--bb-forest);
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: none !important;
}

.bb-404-copy p,
.error404 .bb-404-page .bb-404-copy p {
  max-width: 420px;
  margin: 22px auto 0;
  color: rgba(33, 64, 52, 0.88);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  text-transform: none !important;
}

.bb-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.bb-404-button,
.bb-404-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  color: var(--bb-green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.bb-404-button {
  min-width: 206px;
  padding: 0 28px;
  background: var(--bb-green);
  color: #fffaf0 !important;
  box-shadow: 0 10px 24px rgba(33, 64, 52, 0.16);
}

.bb-404-button::after {
  margin-left: 12px;
  content: "→";
  font-size: 18px;
  line-height: 1;
}

.bb-404-button:hover,
.bb-404-button:focus {
  background: var(--bb-forest);
}

.bb-404-link {
  border-bottom: 1px solid var(--bb-coral);
}

.bb-404-link:hover,
.bb-404-link:focus {
  color: var(--bb-coral);
}

.bb-404-visual {
  position: relative;
  min-height: 650px;
  margin: 0;
  overflow: hidden;
  background: #eadcc3;
}

.bb-404-visual::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: clamp(42px, 6vw, 92px);
  background: linear-gradient(90deg, #eadcc3 0%, rgba(234, 220, 195, 0) 100%);
  content: "";
  pointer-events: none;
}

.bb-404-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: cover;
  object-position: 54% 42%;
}

.bb-404-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(33, 64, 52, 0.08);
  background: rgba(245, 242, 235, 0.88);
}

.bb-404-guides a {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 22px;
  gap: 18px;
  align-items: center;
  min-height: 124px;
  padding: 24px clamp(24px, 3.4vw, 48px);
  color: var(--bb-forest);
  text-decoration: none;
}

.bb-404-guides a + a {
  border-left: 1px dashed rgba(226, 130, 60, 0.34);
}

.bb-404-guide-icon {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(226, 130, 60, 0.54);
  border-radius: 50%;
  color: var(--bb-green);
}

.bb-404-guide-icon::before,
.bb-404-guide-icon::after {
  position: absolute;
  content: "";
}

.bb-404-guide-icon--bag::before {
  left: 19px;
  top: 20px;
  width: 24px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 3px 3px 8px 8px;
}

.bb-404-guide-icon--bag::after {
  left: 22px;
  top: 13px;
  width: 18px;
  height: 16px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

.bb-404-guide-icon--flower::before {
  left: 29px;
  top: 15px;
  width: 2px;
  height: 34px;
  background: currentColor;
  transform: rotate(10deg);
}

.bb-404-guide-icon--flower::after {
  left: 22px;
  top: 20px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--bb-coral);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-28deg);
}

.bb-404-guide-icon--heart::before {
  left: 0;
  top: 14px;
  width: 100%;
  color: var(--bb-coral);
  content: "♥";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
  text-align: center;
}

.bb-404-guide-text strong {
  display: block;
  margin-bottom: 6px;
  color: var(--bb-forest);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
}

.bb-404-guide-text small {
  display: block;
  max-width: 250px;
  color: rgba(33, 64, 52, 0.78);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.bb-404-guide-arrow {
  color: var(--bb-coral);
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 1024px) {
  .bb-404-hero {
    grid-template-columns: 1fr;
  }

  .bb-404-copy {
    max-width: none;
    padding-top: 58px;
    padding-bottom: 36px;
  }

  .bb-404-visual,
  .bb-404-visual img {
    min-height: 420px;
  }

  .bb-404-guides {
    grid-template-columns: 1fr;
  }

  .bb-404-guides a + a {
    border-top: 1px dashed rgba(226, 130, 60, 0.34);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .bb-404-copy {
    padding: 46px 22px 34px;
  }

  .bb-404-copy::before {
    gap: 12px;
    font-size: clamp(64px, 22vw, 96px);
  }

  .bb-404-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .bb-404-button,
  .bb-404-link {
    width: 100%;
  }

  .bb-404-visual,
  .bb-404-visual img {
    min-height: 340px;
  }

  .bb-404-guides a {
    grid-template-columns: 58px minmax(0, 1fr) 20px;
    gap: 14px;
    padding: 22px;
  }

  .bb-404-guide-icon {
    width: 52px;
    height: 52px;
  }
}

/* Live theme correction: keep the approved mockup from being clipped by Tonda wrappers. */
.error404 .bb-404-page .bb-404-hero {
  align-items: stretch !important;
  min-height: 760px !important;
  overflow: visible !important;
}

.error404 .bb-404-page .bb-404-copy {
  align-self: start !important;
  max-width: 620px !important;
  padding-top: 150px !important;
  padding-bottom: 86px !important;
}

.error404 .bb-404-page .bb-404-copy::before {
  display: block !important;
  margin: 0 auto 30px !important;
  color: var(--bb-coral) !important;
  content: "404" !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(74px, 6.8vw, 112px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.error404 .bb-404-page .bb-404-copy h1#bb-404-title {
  margin-top: 0 !important;
}

.error404 .bb-404-page .bb-404-visual {
  min-height: 760px !important;
  background: #f4ead8 !important;
}

.error404 .bb-404-page .bb-404-visual::before {
  width: clamp(150px, 16vw, 260px) !important;
  background:
    linear-gradient(
      90deg,
      #f4ead8 0%,
      rgba(244, 234, 216, 0.96) 20%,
      rgba(244, 234, 216, 0.62) 54%,
      rgba(244, 234, 216, 0) 100%
    ) !important;
}

.error404 .bb-404-page .bb-404-visual img {
  min-height: 760px !important;
  object-fit: cover !important;
  object-position: 54% 34% !important;
}

@media (max-width: 1024px) {
  .error404 .bb-404-page .bb-404-hero,
  .error404 .bb-404-page .bb-404-visual,
  .error404 .bb-404-page .bb-404-visual img {
    min-height: 0 !important;
  }

  .error404 .bb-404-page .bb-404-copy {
    padding-top: 72px !important;
  }

  .error404 .bb-404-page .bb-404-visual img {
    height: auto !important;
    min-height: 420px !important;
  }
}

/* Final placement override for the live Tonda 404 render. */
.bb-404-page .bb-404-hero {
  min-height: 860px !important;
  overflow: visible !important;
}

.bb-404-page .bb-404-copy {
  align-self: start !important;
  padding-top: 245px !important;
  padding-bottom: 110px !important;
}

.bb-404-page .bb-404-thread,
.bb-404-page .bb-404-thread * {
  display: none !important;
  visibility: hidden !important;
}

.bb-404-page .bb-404-copy::before {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 34px !important;
  color: var(--bb-coral) !important;
  content: "404" !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(82px, 7vw, 122px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  visibility: visible !important;
}

.bb-404-page .bb-404-visual {
  min-height: 860px !important;
  margin-left: clamp(-150px, -7vw, -80px) !important;
  background: #f7f0e4 !important;
}

.bb-404-page .bb-404-visual::before {
  width: clamp(240px, 22vw, 390px) !important;
  background:
    linear-gradient(
      90deg,
      #f7f0e4 0%,
      rgba(247, 240, 228, 0.98) 24%,
      rgba(247, 240, 228, 0.76) 54%,
      rgba(247, 240, 228, 0) 100%
    ) !important;
}

.bb-404-page .bb-404-visual img {
  min-height: 860px !important;
  object-position: 54% 30% !important;
}

@media (max-width: 1024px) {
  .bb-404-page .bb-404-hero,
  .bb-404-page .bb-404-visual,
  .bb-404-page .bb-404-visual img {
    min-height: 0 !important;
  }

  .bb-404-page .bb-404-copy {
    padding-top: 86px !important;
    padding-bottom: 44px !important;
  }

  .bb-404-page .bb-404-visual {
    margin-left: 0 !important;
  }

  .bb-404-page .bb-404-visual img {
    min-height: 420px !important;
  }
}

/* Tonda adds an inline negative margin on 404 pages. This keeps the custom
   404 content below the normal site header instead of hiding it underneath. */
.error404 .qodef-content {
  margin-top: 0 !important;
}

/* Keep the product image out of the text column and let the page background
   show through behind the copy. */
.error404 .bb-404-page .bb-404-hero {
  background: transparent !important;
  grid-template-columns: minmax(430px, 0.92fr) minmax(520px, 1.08fr) !important;
}

.error404 .bb-404-page .bb-404-copy {
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
}

.error404 .bb-404-page .bb-404-visual {
  z-index: 1 !important;
  margin-left: 0 !important;
}

.error404 .bb-404-page .bb-404-visual::before {
  width: clamp(150px, 14vw, 250px) !important;
  background:
    linear-gradient(
      90deg,
      rgba(232, 220, 198, 0.98) 0%,
      rgba(232, 220, 198, 0.74) 48%,
      rgba(232, 220, 198, 0) 100%
    ) !important;
}

/* witte border rond menu weg */
.qodef-drop-down .wide .second .inner {
  border: none !important;
}

.qodef-drop-down .wide .second .inner {
  border: none !important;
  box-shadow: 0px 26px 24px rgba(33, 64, 52, 0.22) !important;
}