/*
 Theme Name:   Vazhi Child
 Theme URI:    https://vazhi.wpengine.com/
 Description:  Vazhi Child Theme
 Author:       the WeDesignTech team
 Author URI:   https://wedesignthemes.com/
 Template:     vazhi
 Text Domain:  vazhi-child
 Version:      1.0.0
 Tested up to: 6.7
 Requires PHP: 7.4
 Tags: Blog, e-commerce, portfolio
 License: GNU General Public License v2 or later 
 License URI: https: //www.gnu.org/licenses/gpl-2.0.html
 Copyright (C) 2025 buddhathemes. All rights reserved.
*/

/* =============================================================
   Search Category — icon_image support for wdt-custom-category-icon layout
   The parent theme hides the icon area unless it contains a
   .dtdr-listing-taxonomy-icon span (SVG inline mode). These rules
   un-hide it when an <img> is present (Icon Image mode) and apply
   the same circle styling used by the SVG span.
   ============================================================= */

   .wdt-custom-category-icon[class*="-df-listings-taxonomy"]
   .dtdr-listing-taxonomy-item
   .dtdr-listing-taxonomy-icon-image:not(:has(.dtdr-listing-taxonomy-icon)):has(img) {
       display: inline-flex !important;
       align-items: center;
       justify-content: center;
       width: 80px;
       height: 80px;
       border-radius: var(--wdtRadius_Full);
       margin-right: 12px;
       flex-shrink: 0;
       box-shadow: 0 0 7px var(--wdtPrimaryColor) inset;
   }
   
   .wdt-custom-category-icon[class*="-df-listings-taxonomy"]
   .dtdr-listing-taxonomy-item
   .dtdr-listing-taxonomy-icon-image:not(:has(.dtdr-listing-taxonomy-icon)):has(img) img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       padding: 7px;
   }
   
   /* =============================================================
      Products widget (vazhi-pro) — card design matching Products Listing
      Scoped to .wdt-products-container so no other WooCommerce loop is affected.
      ============================================================= */
   
   /* Card wrapper: white card with border + radius matching category pages */
   .wdt-products-container ul.products li.product .product-wrapper {
       display: flex !important;
       flex-direction: column !important;
       float: none !important;
       align-items: stretch !important;
       margin: 0 !important;
       height: 100%;
       background: #fff !important;
       border: 1px solid var(--wdtBorderColor, #e5e5e5) !important;
       border-radius: var(--wdtRadius, 8px) !important;
       overflow: hidden !important;
   }
   
   /* Image area: 350px fixed height, flex-centered */
   .wdt-products-container ul.products li.product .product-thumb {
       flex: 0 0 auto !important;
       width: 100% !important;
       height: 350px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       position: static !important;
       overflow: hidden !important;
   }
   .wdt-products-container ul.products li.product .product-thumb::before,
   .wdt-products-container ul.products li.product .product-thumb::after {
       content: none !important;
       display: none !important;
       padding: 0 !important;
   }
   .wdt-products-container ul.products li.product .product-thumb a.image {
       display: flex !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       align-items: center !important;
       justify-content: center !important;
   }
   .wdt-products-container ul.products li.product .product-thumb .product-thumb-overlay {
       display: none !important;
   }
   .wdt-products-container ul.products li.product .product-thumb .primary-image {
       display: flex !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       align-items: center !important;
       justify-content: center !important;
   }
   .wdt-products-container ul.products li.product .product-thumb .primary-image img {
       display: block !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       object-fit: contain !important;
       float: none !important;
       background-color: #fff !important;
       padding: 12px !important;
       box-sizing: border-box !important;
   }
   
   /* Content area */
   .wdt-products-container ul.products li.product .wdt-product-card-content {
       flex: 1 !important;
       display: flex !important;
       flex-direction: column !important;
       justify-content: space-between !important;
       padding: 15px 20px !important;
       min-width: 0 !important;
   }
   
   /* Title: strictly 2 lines then ellipsis */
   .wdt-products-container ul.products li.product .wdt-product-card-content .woocommerce-loop-product__title {
       display: -webkit-box !important;
       -webkit-line-clamp: 2 !important;
       -webkit-box-orient: vertical !important;
       overflow: hidden !important;
       line-height: 1.5 !important;
       max-height: 3.2em !important;
       padding: 0 !important;
       font-size: inherit;
       margin: 0 0 8px;
   }
   .wdt-products-container ul.products li.product .wdt-product-card-content .woocommerce-loop-product__title a {
       display: inline !important;
   }
   
   /* Bottom row: price left, button right, separator line */
.wdt-products-container ul.products li.product .wdt-product-card-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
       gap: 12px;
       margin-top: 20px;
       padding-top: 15px !important;
       padding-bottom: 15px !important;
       border-top: 1px solid var(--wdtBorderColor, #e5e5e5);
   }
   
   /* Reset Vazhi block-button defaults and apply underline animation */
   .wdt-products-container ul.products li.product .wdt-product-card-bottom a.custom-button-style.dtdr-listing-view-details {
       display: inline !important;
       margin: 0 !important;
       padding: 0 !important;
       color: var(--wdtHeadAltColor);
       background-image: linear-gradient(0deg, currentColor, currentColor);
       background-repeat: no-repeat;
       background-size: 100% 1px;
       background-position: bottom left;
       transition: background-size 0.3s ease;
   }
   .wdt-products-container ul.products li.product .wdt-product-card-bottom a.custom-button-style.dtdr-listing-view-details:hover {
       color: var(--wdtHeadAltColor) !important;
       background-size: 0 1px;
       background-position: bottom right;
   }
   
   /* Switch ul.products from Isotope absolute-positioning to flex rows so
      all cards in a row stretch to equal height without a fixed pixel value.
      height:auto overrides Isotope's inline height style. */
   .wdt-products-container ul.products {
       display: flex !important;
       flex-wrap: wrap !important;
       gap: 20px !important;
       height: auto !important;
       align-items: stretch !important;
       position: relative !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   /* Isotope sizer — keep it invisible and out of flex flow */
   .wdt-products-container ul.products li.product.isotope-grid-sizer {
       position: absolute !important;
       width: calc((100% - 60px) / 4) !important;
       height: 0 !important;
       overflow: hidden !important;
       visibility: hidden !important;
       pointer-events: none !important;
   }
   /* Real cards: override Isotope's absolute inline styles, flex column for equal height */
   .wdt-products-container ul.products li.product:not(.isotope-grid-sizer) {
       position: static !important;
       top: auto !important;
       left: auto !important;
       width: calc((100% - 60px) / 4) !important;
       display: flex !important;
       flex-direction: column !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   /* .wdt-col: override Isotope's absolute inline style, stretch to fill li */
   .wdt-products-container ul.products li.product:not(.isotope-grid-sizer) .wdt-col {
       position: static !important;
       top: auto !important;
       left: auto !important;
       width: 100% !important;
       height: auto !important;
       display: flex !important;
       flex-direction: column !important;
       flex: 1 !important;
       padding: 8px !important;
       box-sizing: border-box !important;
       overflow: hidden !important;
   }
   /* Card wrapper stretches to fill .wdt-col */
   .wdt-products-container ul.products li.product:not(.isotope-grid-sizer) .wdt-col .product-wrapper {
       flex: 1 !important;
       height: auto !important;
   }
   
   /* Force 4-column layout on wdt-shop-product-cat widget, equal card heights */
   .elementor-widget-wdt-shop-product-cat .elementor-widget-container {
       display: flex !important;
       flex-wrap: wrap !important;
       align-items: stretch !important;
   }
   .elementor-widget-wdt-shop-product-cat .wdt-shop-category-listing-item.wdt-one-third {
       width: 25% !important;
       float: none !important;
       clear: none !important;
       display: flex !important;
       flex-direction: column !important;
   }
   /* Inner card wrapper must also stretch to fill the item height */
   .elementor-widget-wdt-shop-product-cat .wdt-shop-category-listing-item.wdt-one-third .wdt-shop-category-item-wrapper,
   .elementor-widget-wdt-shop-product-cat .wdt-shop-category-listing-item.wdt-one-third > * {
       display: flex !important;
       flex-direction: column !important;
       flex: 1 !important;
       height: 100% !important;
   }
   
   /* =============================================================
      WooCommerce Category Archive — card design matching Products widget
      Scoped to .tax-product_cat (body class on all product category pages)
      so no other WooCommerce loop is affected.
      ============================================================= */
   
   /* 3-column flex grid — overrides the columns-4 class Vazhi outputs.
      position:relative makes it the containing block for the absolute sizer. */
   .tax-product_cat ul.products {
       display: flex !important;
       flex-wrap: wrap !important;
       gap: 20px !important;
       margin: 0 !important;
       padding: 0 !important;
       list-style: none !important;
       position: relative !important;
   }
   /* Isotope sizer: pull out of flex flow so it takes no column slot,
      but keep a width so Isotope.js can still read the column size */
   .tax-product_cat ul.products li.product.isotope-grid-sizer {
       position: absolute !important;
       width: calc((100% - 40px) / 3) !important;
       height: 0 !important;
       padding: 0 !important;
       margin: 0 !important;
       overflow: hidden !important;
       visibility: hidden !important;
       pointer-events: none !important;
   }
   
   /* Real product items: flex column so the inner wdt-col can stretch to fill
      the row height — Vazhi renders li > .wdt-col > .product-wrapper */
   .tax-product_cat ul.products li.product:not(.isotope-grid-sizer) {
       float: none !important;
       clear: none !important;
       width: calc((100% - 40px) / 3) !important;
       margin: 0 !important;
       padding: 0 !important;
       display: flex !important;
       flex-direction: column !important;
   }
   /* .wdt-col is the direct child of li — it must also stretch */
   .tax-product_cat ul.products li.product:not(.isotope-grid-sizer) > .wdt-col {
       display: flex !important;
       flex-direction: column !important;
       flex: 1 !important;
       padding: 0 !important;
   }
   
   /* Card wrapper: grows to fill the li so every card in a row is the same height */
   .tax-product_cat ul.products li.product .product-wrapper {
       display: flex !important;
       flex-direction: column !important;
       float: none !important;
       align-items: stretch !important;
       margin: 0 !important;
       flex: 1 !important;
       background: #fff !important;
       border: 1px solid var(--wdtBorderColor, #e5e5e5) !important;
       border-radius: var(--wdtRadius, 8px) !important;
       overflow: hidden !important;
   }
   
   /* Image area: 230px for 3-column category layout (shorter than the 4-column
      homepage cards so cards feel proportional at the smaller column width).
      Reset the parent's absolute-positioning system so flex-centering works. */
   .tax-product_cat ul.products li.product .product-thumb {
       flex: 0 0 auto !important;
       width: 100% !important;
       height: 230px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       position: static !important;
       overflow: hidden !important;
   }
   .tax-product_cat ul.products li.product .product-thumb::before,
   .tax-product_cat ul.products li.product .product-thumb::after {
       content: none !important;
       display: none !important;
       padding: 0 !important;
   }
   .tax-product_cat ul.products li.product .product-thumb a.image {
       display: flex !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       align-items: center !important;
       justify-content: center !important;
   }
   .tax-product_cat ul.products li.product .product-thumb .product-thumb-overlay {
       display: none !important;
   }
   .tax-product_cat ul.products li.product .product-thumb .primary-image {
       display: flex !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       align-items: center !important;
       justify-content: center !important;
   }
   .tax-product_cat ul.products li.product .product-thumb .primary-image img {
       display: block !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       object-fit: contain !important;
       float: none !important;
       background-color: #fff !important;
       padding: 12px !important;
       box-sizing: border-box !important;
   }
   
   /* Content area: grows to fill remaining card space; space-between pushes
      the price/button row to the bottom regardless of title length */
   .tax-product_cat ul.products li.product .wdt-product-card-content {
       flex: 1 !important;
       display: flex !important;
       flex-direction: column !important;
       justify-content: space-between !important;
       padding: 15px 20px !important;
       min-width: 0 !important;
   }
   
   /* Title: strictly 2 lines then ellipsis.
      The <a> inside <h2> is display:block in Vazhi's base CSS — that breaks
      -webkit-line-clamp because the clamp only clips inline text flow.
      Force the <a> back to inline so the h2 can clamp the text correctly.
      max-height = 2 × line-height gives overflow:hidden a hard boundary so
      a partial third line cannot bleed through the rendering gap. */
   .tax-product_cat ul.products li.product .wdt-product-card-content .woocommerce-loop-product__title {
       display: -webkit-box !important;
       -webkit-line-clamp: 2 !important;
       -webkit-box-orient: vertical !important;
       overflow: hidden !important;
       line-height: 1.5 !important;
       max-height: 3.2em !important;
       padding: 0 !important;
       font-size: inherit;
       margin: 0 0 8px;
   }
   .tax-product_cat ul.products li.product .wdt-product-card-content .woocommerce-loop-product__title a {
       display: inline !important;
   }
   
   /* Bottom row: price left, button right, separator line */
.tax-product_cat ul.products li.product .wdt-product-card-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
       gap: 12px;
       margin-top: 20px;
       padding-top: 15px !important;
       padding-bottom: 15px !important;
       border-top: 1px solid var(--wdtBorderColor, #e5e5e5);
   }
   
   /* Reset Vazhi block-button defaults and apply underline animation */
   .tax-product_cat ul.products li.product .wdt-product-card-bottom a.custom-button-style.dtdr-listing-view-details {
       display: inline !important;
       margin: 0 !important;
       padding: 0 !important;
       color: var(--wdtHeadAltColor);
       background-image: linear-gradient(0deg, currentColor, currentColor);
       background-repeat: no-repeat;
       background-size: 100% 1px;
       background-position: bottom left;
       transition: background-size 0.3s ease;
   }
   .tax-product_cat ul.products li.product .wdt-product-card-bottom a.custom-button-style.dtdr-listing-view-details:hover {
       color: var(--wdtHeadAltColor) !important;
       background-size: 0 1px;
       background-position: bottom right;
   }
   
   /* Hide the default WooCommerce title/price that appear outside the card
      content block — the injected .wdt-product-card-content replaces them */
   .tax-product_cat ul.products li.product .product-wrapper > .woocommerce-loop-product__title,
   .tax-product_cat ul.products li.product .product-wrapper > .price,
   .tax-product_cat ul.products li.product .product-wrapper > .button {
       display: none !important;
   }
   
   /* =============================================================
      Migrated from WP Customizer — safe to clear those rules there
      ============================================================= */
   
   /* Recent posts widget — hide entry meta */
   .widget .recent-posts-widget li .entry-meta {
       display: none;
   }
   
   /* =============================================================
      Single product — related products cards matching category page design
      ============================================================= */
   
   /* Switch the ul from Isotope absolute-positioning to flex so the
      container height is driven by content, not Isotope's inline style */
   .single-product .related.products ul.products {
       display: flex !important;
       flex-wrap: wrap !important;
       gap: 20px !important;
       height: auto !important;       /* override Isotope's inline height */
       align-items: stretch !important; /* equal-height row */
       margin: 0 !important;
       padding: 0 !important;
       list-style: none !important;
       position: relative !important;
   }
   /* Isotope sizer: pull out of flex flow */
   .single-product .related.products ul.products li.product.isotope-grid-sizer {
       position: absolute !important;
       width: calc((100% - 60px) / 4) !important;
       height: 0 !important;
       overflow: hidden !important;
       visibility: hidden !important;
       pointer-events: none !important;
   }
   /* Real product items: 4-column flex layout, equal height */
   .single-product .related.products ul.products li.product:not(.isotope-grid-sizer) {
       float: none !important;
       clear: none !important;
       width: calc((100% - 60px) / 4) !important;
       margin: 0 !important;
       padding: 0 !important;
       display: flex !important;
       flex-direction: column !important;
       position: static !important;   /* override Isotope's absolute */
       top: auto !important;
       left: auto !important;
   }
   .single-product .related.products ul.products li.product:not(.isotope-grid-sizer) > .wdt-col {
       display: flex !important;
       flex-direction: column !important;
       flex: 1 !important;
       padding: 0 !important;
   }
   
   /* Card wrapper */
   .single-product .related.products ul.products li.product .product-wrapper {
       display: flex !important;
       flex-direction: column !important;
       float: none !important;
       align-items: stretch !important;
       margin: 0 !important;
       flex: 1 !important;            /* stretch to fill li so all cards match height */
       background: #fff !important;
       border: 1px solid var(--wdtBorderColor, #e5e5e5) !important;
       border-radius: var(--wdtRadius, 8px) !important;
       overflow: hidden !important;
   }
   
   /* Image area */
   .single-product .related.products ul.products li.product .product-thumb {
       flex: 0 0 auto !important;
       width: 100% !important;
       height: 300px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       position: static !important;
       overflow: hidden !important;
   }
   .single-product .related.products ul.products li.product .product-thumb::before,
   .single-product .related.products ul.products li.product .product-thumb::after {
       content: none !important;
       display: none !important;
       padding: 0 !important;
   }
   .single-product .related.products ul.products li.product .product-thumb a.image {
       display: flex !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       align-items: center !important;
       justify-content: center !important;
   }
   .single-product .related.products ul.products li.product .product-thumb .product-thumb-overlay {
       display: none !important;
   }
   .single-product .related.products ul.products li.product .product-thumb .primary-image {
       display: flex !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       align-items: center !important;
       justify-content: center !important;
   }
   .single-product .related.products ul.products li.product .product-thumb .primary-image img {
       display: block !important;
       position: static !important;
       width: 100% !important;
       height: 100% !important;
       object-fit: contain !important;
       float: none !important;
       background-color: #fff !important;
       padding: 12px !important;
       box-sizing: border-box !important;
   }
   
   /* Content area */
   .single-product .related.products ul.products li.product .wdt-product-card-content {
       flex: 1 !important;
       display: flex !important;
       flex-direction: column !important;
       justify-content: space-between !important;
       padding: 15px 20px !important;
       min-width: 0 !important;
   }
   
   /* Title: 2-line clamp */
   .single-product .related.products ul.products li.product .wdt-product-card-content .woocommerce-loop-product__title {
       display: -webkit-box !important;
       -webkit-line-clamp: 2 !important;
       -webkit-box-orient: vertical !important;
       overflow: hidden !important;
       line-height: 1.5 !important;
       max-height: 3.2em !important;
       padding: 0 !important;
       font-size: inherit;
       margin: 0 0 8px;
   }
   .single-product .related.products ul.products li.product .wdt-product-card-content .woocommerce-loop-product__title a {
       display: inline !important;
   }
   
   /* Bottom row: price left, button right */
.single-product .related.products ul.products li.product .wdt-product-card-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
       gap: 12px;
       margin-top: 20px;
       padding-top: 15px !important;
       padding-bottom: 15px !important;
       border-top: 1px solid var(--wdtBorderColor, #e5e5e5);
   }
   .single-product .related.products ul.products li.product .wdt-product-card-bottom a.custom-button-style.dtdr-listing-view-details {
       display: inline !important;
       margin: 0 !important;
       padding: 0 !important;
       color: var(--wdtHeadAltColor);
       background-image: linear-gradient(0deg, currentColor, currentColor);
       background-repeat: no-repeat;
       background-size: 100% 1px;
       background-position: bottom left;
       transition: background-size 0.3s ease;
   }
   .single-product .related.products ul.products li.product .wdt-product-card-bottom a.custom-button-style.dtdr-listing-view-details:hover {
       color: var(--wdtHeadAltColor) !important;
       background-size: 0 1px;
       background-position: bottom right;
   }
   
   /* Single product — hide the entire sidebar element so its float
      doesn't create a blank gap below the related products */
   .single-product #secondary {
       display: none !important;
   }
   
   /* Single product — full-width primary column, no float, no overflow clipping */
   .single-product #primary {
       width: 100% !important;
       float: none !important;
       overflow: visible !important;
   }
   
   /* Category archive — hide WooCommerce sort/order dropdown */
   .tax-product_cat .woocommerce-ordering {
       display: none !important;
   }
   
   /* Category archive — hide the top sorter bar (grid/list switcher).
      The bottom sorter bar that contains pagination is kept by targeting
      only .product-loop-sorting elements that have no pagination inside. */
   .tax-product_cat .product-loop-sorting:not(:has(.woocommerce-pagination)) {
       display: none !important;
   }
   
   /* Category archive — sidebar base styles.
      Sticky behaviour is handled by JS (transform:translateY) in wp_footer
      because CSS position:sticky silently fails when Vazhi's float:right or
      parent overflow settings interfere. */
   .tax-product_cat #secondary {
       height: fit-content !important;
       overflow: visible !important;
       will-change: transform; /* promote to GPU layer for jank-free translateY */
   }
   
   /* Sidebar accordion — flex header row so the chevron sits inline */
   .tax-product_cat #secondary .cat-parent-header {
       display: flex !important;
       align-items: center !important;
       justify-content: space-between !important;
       gap: 6px;
   }
   .tax-product_cat #secondary .cat-toggle {
       flex-shrink: 0;
       display: inline-flex !important;
       align-items: center;
       justify-content: center;
       width: 20px;
       height: 20px;
       background: none;
       border: none;
       cursor: pointer;
       padding: 0;
       line-height: 1;
   }
   /* Chevron arrow using CSS borders, in the site's primary (red) colour */
   .tax-product_cat #secondary .cat-toggle::after {
       content: '';
       display: block;
       width: 7px;
       height: 7px;
       border-right: 2px solid var(--wdtPrimaryColor, #c0392b);
       border-bottom: 2px solid var(--wdtPrimaryColor, #c0392b);
       transform: rotate(45deg) translate(-1px, -2px);
       transition: transform 0.2s ease;
   }
   .tax-product_cat #secondary li.is-open > .cat-parent-header > .cat-toggle::after {
       transform: rotate(-135deg) translate(-1px, 2px);
   }
   
   /* ── Shop archive page: 2-column category grid ─────────────────────── */
   .post-type-archive-product ul.products {
       display: flex !important;
       flex-wrap: wrap !important;
       gap: 20px !important;
   }
   .post-type-archive-product ul.products li.product:not(.isotope-grid-sizer) {
       width: calc((100% - 20px) / 2) !important;
       float: none !important;
   }
   .post-type-archive-product ul.products li.product.isotope-grid-sizer {
       position: absolute !important;
       height: 0 !important;
       overflow: hidden !important;
       visibility: hidden !important;
       pointer-events: none !important;
       width: calc((100% - 20px) / 2) !important;
   }
   
/* =============================================================
   Single product — main image & description
   ============================================================= */

/* Main product image: fixed 400px height, image contained inside */
.single-product div.product .woocommerce-product-gallery {
    position: relative !important;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px !important;
    max-height: 500px !important;
    overflow: hidden !important;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 500px !important;
    object-fit: contain !important;
}

/* Description: clamp to 6 lines then ellipsis.
   Covers both the short-description div and the full post_content
   that some themes render directly inside .summary. */
.single-product .summary .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-details__short-description p,
.single-product .entry-summary .woocommerce-product-details__short-description,
.single-product .summary > .entry-content,
.single-product .summary > .entry-content p {
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(1.6em * 6) !important; /* fallback for non-webkit browsers */
}

/* =============================================================
   Prices — hidden site-wide on all cards and product pages
   ============================================================= */
   
   /* Hide price in all card bottom rows — covers all known price elements
      across the wdt-product-card, wdt-products-listing, and dtdr widgets */
   .wdt-product-card-bottom .price,
   .wdt-product-card-bottom .woocommerce-Price-amount,
   .dtdr-sp-price-holder,
   .dtdr-listings-item-bottom-pricing-holder .price,
   .dtdr-listings-item-bottom-pricing-holder .woocommerce-Price-amount,
   .dtdr-listings-item-bottom-pricing-holder > div:not(:has(a)),
   .dtdr-listings-item-bottom-content .price,
   .dtdr-listings-item-bottom-content .woocommerce-Price-amount,
   .dtdr-listing-price,
   .dtdr-listing-item-price,
   .dtdr-sp-price {
       display: none !important;
   }
   
/* When price is hidden, center the View Details link in both layouts */
.wdt-product-card-bottom,
.dtdr-listings-item-bottom-pricing-holder {
    justify-content: center !important;
}
   
   /* Hide price on single product page summary */
   .single-product .summary .price,
   .single-product .summary .woocommerce-Price-amount {
       display: none !important;
   }
   
   /* Hide price in any other WooCommerce loop context (shop page category tiles etc.) */
   .woocommerce ul.products li.product .price {
       display: none !important;
   }
   
   /* Single product — product name subtitle replacing the price */
   .single-product .summary .single-product-name-subtitle {
       font-size: 1.6em;
       font-weight: 700;
       color: var(--wdtHeadAltColor, #222);
       margin: 0 0 1.2em;
       line-height: 1.3;
   }

/* =============================================================
   Product listing cards — image padding (dtdr widget)
   ============================================================= */

.dtdr-listings-feature-image-holder img {
    padding: 20px 0 !important;
    box-sizing: border-box !important;
}

/* =============================================================
   Responsive breakpoints
   ============================================================= */

/* -- Tablet (=1024px): 2 columns everywhere -------------------- */
@media (max-width: 1024px) {

    .dtdr-listings-feature-image-holder img {
        padding: 14px 0 !important;
    }

    /* Homepage category boxes */
    .elementor-widget-wdt-shop-product-cat .wdt-shop-category-listing-item.wdt-one-third {
        width: 50% !important;
    }

    /* Homepage product cards */
    .wdt-products-container ul.products li.product:not(.isotope-grid-sizer),
    .wdt-products-container ul.products li.product.isotope-grid-sizer {
        width: calc((100% - 20px) / 2) !important;
    }

    /* Category page product cards */
    .tax-product_cat ul.products li.product:not(.isotope-grid-sizer),
    .tax-product_cat ul.products li.product.isotope-grid-sizer {
        width: calc((100% - 20px) / 2) !important;
    }

    /* Related products */
    .single-product .related.products ul.products li.product:not(.isotope-grid-sizer),
    .single-product .related.products ul.products li.product.isotope-grid-sizer {
        width: calc((100% - 20px) / 2) !important;
    }

    /* dtdr listings widget (Equipment / Search Category sections) —
       inline flex shorthand must be overridden with !important */
    .dtdr-listings-container .dtdr-listings-item-wrapper {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }

    /* Category page: space between sidebar and footer on tablet */
    .tax-product_cat #main {
        padding-bottom: 60px !important;
        overflow: visible !important;
    }
}

/* ── Mobile (≤767px): 1 column everywhere ────────────────────── */
@media (max-width: 767px) {

    .dtdr-listings-feature-image-holder img {
        padding: 10px 0 !important;
    }

    /* Prevent horizontal scroll — clamp the html element (safe: doesn't
       break position:fixed headers) and clip key content wrappers where
       Isotope or wide flex items might still overflow */
    html {
        overflow-x: hidden !important;
    }
    .wdt-products-container,
    .dtdr-listings-container,
    .elementor-section,
    .elementor-container,
    #page,
    .site-content,
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Homepage category boxes */
    .elementor-widget-wdt-shop-product-cat .wdt-shop-category-listing-item.wdt-one-third {
        width: 100% !important;
    }

    /* Homepage product cards */
    .wdt-products-container ul.products li.product:not(.isotope-grid-sizer) {
        width: 100% !important;
    }

    /* Category page product cards */
    .tax-product_cat ul.products li.product:not(.isotope-grid-sizer) {
        width: 100% !important;
    }

    /* Shop archive page */
    .post-type-archive-product ul.products li.product:not(.isotope-grid-sizer) {
        width: 100% !important;
    }

    /* Related products */
    .single-product .related.products ul.products li.product:not(.isotope-grid-sizer) {
        width: 100% !important;
    }

    /* dtdr listings widget: 1 column on mobile */
    .dtdr-listings-container .dtdr-listings-item-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Single product: stack image above content, both full width */
    .single-product div.product {
        display: flex !important;
        flex-direction: column !important;
    }
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary.entry-summary {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .single-product div.product .woocommerce-product-gallery {
        order: 1;
    }
    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
        height: 280px !important; /* shorter on mobile */
    }
    .single-product div.product .summary.entry-summary {
        order: 2;
        margin-top: 20px !important;
    }

    /* Category page: stack sidebar below products, full width, spacing from footer */
    .tax-product_cat #primary,
    .tax-product_cat #secondary {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    .tax-product_cat #secondary {
        margin-top: 30px !important;
        padding-bottom: 50px !important;
        box-sizing: border-box !important;
    }
    /* The theme's #main has overflow:hidden which clips any child padding.
       Add the spacing here so it is never clipped. */
    .tax-product_cat #main {
        padding-bottom: 60px !important;
        overflow: visible !important;
    }
    /* Ensure inner sidebar widget also fills full width */
    .tax-product_cat #secondary .wdt-sidebar-wrapper,
    .tax-product_cat #secondary .widget {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}