/**
 * WooTweaks Storefront Theme Tweak - Custom Frontend Styles
 *
 * USER-EDITABLE: This file is preserved during plugin updates
 * SAFE TO EDIT: Customize your site-specific styles here
 *
 * This file contains ONLY site-specific customizations:
 * - Color schemes and branding
 * - Custom fonts and typography
 * - Site-specific icons and images
 * - Background colors and borders with colors
 *
 * All structural/functional CSS is in frontend-base.css (update-safe)
 * Edit this file through the admin panel (Settings > Storefront Theme Tweak)
 */

/* ==========================================================================
   Color Scheme & Variables
   ========================================================================== */

/* COLORS: rgb(0, 128, 55) 100%: #008037 50%: #80c09b 25%: #f2f9f5 10%: #e6f2eb
   #bcd8c7, #dee9e2 */

body.woocommerce {
  background-color: var(--wt-primary-2);
}

:root {
  color-scheme: only light;
}

/* ==========================================================================
   Typography & Custom Fonts
   ========================================================================== */

.blog .entry-title {
  font-family: "The Nautigal";
  font-size: 3.8em;
  margin-bottom: 0;
}

/* ==========================================================================
   Header Colors
   ========================================================================== */

.site-header {
  background-color: var(--wt-primary-2);
}

/* ==========================================================================
   Widget Area Colors
   ========================================================================== */

.right-sidebar .widget-area {
  border: solid #f0b022 1px;
  border-radius: 5px;
  background-color: rgba(240, 176, 34, 0.2);
}

.right-sidebar .widget-area .wp-block-buttons .wp-block-button .wp-element-button {
  border-color: rgb(0, 128, 55);
  border-width: 1px;
  border-style: solid;
  color: var(--wt-secondary-100);
}

/* ==========================================================================
   Footer Menu Colors & Icons
   ========================================================================== */

.woocommerce-page .storefront-handheld-footer-bar ul li > a {
  background-color: var(--wt-primary-2);
}

.woocommerce-page .storefront-handheld-footer-bar ul li > a:focus,
.woocommerce-page .storefront-handheld-footer-bar ul li > a:active,
.woocommerce-page .storefront-handheld-footer-bar ul li > a:target {
  background-color: var(--wt-primary-25);
  border-color: var(--wt-primary-25);
}

.header-menu-sidebar .nav-ul a {
  background-color: var(--wt-primary-25);
}

/* ==========================================================================
   Page Header Icons (Font Awesome - Site Specific)
   ========================================================================== */

/* Custom indoor plants icon using image */
.term-indoor-plants .site-main h1:before,
.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.indoor-plants > a:before {
  background-image: url("https://theplantlady.co.za/wp-content/uploads/cat-indoor-plant-333-e1697877091462.png");
}

/* Menu icon colors */
.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.wt_fa-menu-icons a svg,
.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.wt_fa-menu-icons a img {
  fill: var(--wt-primary-100);
}

.wt-fa-menu-wa svg {
  fill: var(--wt-primary-100);
}

/* ==========================================================================
   Form Input Colors
   ========================================================================== */

.woocommerce-page input.input-text,
.woocommerce-page input.input-text.qty,
textarea.input-text,
.woocommerce-page input.search-field {
  background-color: var(--wt-primary-10);
  border: 1px solid var(--wt-primary-25);
}

.woocommerce-page input.input-text:focus,
.woocommerce-page input.input-text.qty:focus,
textarea.input-text:focus,
.woocommerce-page input.search-field:focus {
  background-color: var(--wt-primary-2);
}

/* ==========================================================================
   Table Colors
   ========================================================================== */

table,
.wc_payment_methods,
.place-order {
  border: 1px solid var(--wt-primary-25);
}

.woocommerce-info {
  background-color: var(--wt-primary-50);
}

table.cart thead tr th {
  background-color: var(--wt-primary-10);
}

/* ==========================================================================
   Product Display Colors
   ========================================================================== */

.woocommerce div.content-area .site-main ul.products li.product,
ul.wc-block-product-template__responsive.columns-6 li.product {
  background-color: #ffffff;
  border: 1px solid var(--wt-primary-25);
}

.woocommerce div.content-area .site-main ul.products li.product:hover {
  background-color: var(--wt-primary-10);
}

.woocommerce div.content-area .site-main ul.products li.product:focus {
  background-color: var(--wt-primary-10);
}

.product-categories,
.product-categories .category-value {
  background-color: rgba(255, 255, 255, 0.5);
}

ul.products li.product .woocommerce-LoopProduct-link:focus {
  background-color: var(--wt-primary-10);
}

.product-short-description {
  color: var(--wt-secondary-80);
}

/* ==========================================================================
   Button Colors
   ========================================================================== */

.woocommerce-page .button,
.woocommerce-page .checkout-button.button.alt,
.woocommerce-page ul.products li.product .button,
ul.wc-block-product-template__responsive.columns-6 li.product button,
.woocommerce #payment .place-order .button,
.woocommerce .site-header-cart .widget_shopping_cart a.button {
  background-color: var(--wt-primary-25);
  border: 1px solid var(--wt-primary-50);
  border-color: var(--wt-primary-50);
  color: var(--wt-secondary-100);
}

/* Variation button colors */
button.variation-option {
  border: 1px solid var(--wt-primary-50);
  border-color: var(--wt-primary-50);
}

.variation-option.selected {
  background-color: var(--wt-primary-50);
  border-color: var(--wt-primary-100);
}

.single_add_to_cart_button.disabled:hover::before {
  background-color: var(--wt-primary-25);
  color: #000;
}

/* ==========================================================================
   Checkout Colors
   ========================================================================== */

table.woocommerce-checkout-review-order-table .order-total > th {
  background-color: var(--wt-primary-10);
}

.pudo-shipping-items td {
  border: 1px solid #ddd;
  background-color: rgb(0, 128, 55, 0.05);
}

.pudo-shipping-items td:hover {
  background-color: var(--wt-primary-10);
}

tr.pudo-shipping-items td label strong {
  color: var(--wt-secondary-50);
}

/* ==========================================================================
   Footer Colors
   ========================================================================== */

.site-footer {
  background-color: var(--wt-primary-10);
  border-top: 1px solid var(--wt-primary-25);
}

/* ==========================================================================
   Mega Menu Colors
   ========================================================================== */

#mega-menu-wrap-primary ul#mega-menu-primary li.mega-menu-item {
  border-right: 1px solid var(--wt-primary-50);
  /* border-bottom: 1px solid var(--wt-primary-50); */
}

.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.wt_fa-menu-icons.support-local > a.mega-menu-link {
  background-color: orange;
}

/* .woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.wt_fa-menu-icons > a.mega-menu-link {
  background-color: rgba(0, 0, 0, 0);
} */

.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  background-color: var(--wt-primary-25);
}

.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
  background-color: var(--wt-primary-50);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
  background-color: var(--wt-primary-25);
}

.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
  border: solid 1px var(--wt-primary-50);
}

.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item {
  border-bottom: solid 1px var(--wt-primary-50);
}

.woocommerce-page #mega-menu-wrap-primary {
  background-color: var(--wt-primary-25);
  border: solid 1px var(--wt-primary-100);
}

/* .woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:first-of-type {
  border-right: solid 1px var(--wt-primary-50);
} */

.woocommerce-page #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item a:active {
  background-color: var(--wt-primary-50);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
  background-color: var(--wt-primary-25);
  font-weight: 600;
}

/* ==========================================================================
   Placeholder Ad Colors
   ========================================================================== */

.product_thumbnail_overlay {
  color: #000000;
  background: rgba(240, 176, 34, 0.9);
}

/* ==========================================================================
   DGWT Search Colors
   ========================================================================== */

.dgwt-wcas-style-pirx.woocommerce .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  border-color: var(--wt-primary-25);
}

.dgwt-wcas-style-pirx.woocommerce .dgwt-wcas-sf-wrapp {
  background-color: inherit;
}

.dgwt-wcas-open-pirx .dgwt-wcas-details-wrapp.woocommerce {
  border-color: var(--wt-primary-50);
}

.dgwt-wcas-open-pirx .dgwt-wcas-suggestions-wrapp.woocommerce {
  border-color: var(--wt-primary-50);
  border-right: solid 1px var(--wt-primary-10);
}

/* ==========================================================================
   Middle Navigation Colors
   ========================================================================== */

.site-header .middle-navigation {
  background-color: var(--wt-primary-25);
}

.middle-navigation li.menu_address {
  background-color: #ffffff;
  border: var(--wt-primary-5) solid 1px;
}

/* ==========================================================================
   Responsive: Tablet & Desktop Colors
   ========================================================================== */

@media (min-width: 767px) {
  .woocommerce-active .site-header ul.site-header-cart {
    background-color: var(--wt-primary-25);
    border: solid 1px var(--wt-primary-100);
  }

  /* #mega-menu-wrap-primary ul#mega-menu-primary li.mega-menu-item,
  #mega-menu-wrap-primary ul#mega-menu-primary li.mega-menu-item:nth-child(even) {
    border-right: 1px solid var(--wt-primary-50);
  } */

  /* .woocommerce-page .storefront-primary-navigation {
    background-color: var(--wt-primary-2);
  } */
}

/* ==========================================================================
   Dark Mode Override
   ========================================================================== */
/*
@media (prefers-color-scheme: dark) {
  .woocommerce-page.storefront-full-width-content header.site-header {
    background-color: #ffffff;
  }
}
  */