/* ==========================================================================
   Knot1 — homepage "Woo Product Grid" (Header Footer Elementor widget)
   visual parity with the shop/category archive redesign (woo-archive.css).

   Scope: .elementor-widget-hfe-woo-product-grid — this widget type is only
   used on the homepage (post 14) sitewide, but the widget-type class is
   used instead of the page/element ID so the styling travels if this
   widget is ever reused elsewhere.

   IMPORTANT structural note: unlike Astra's shop-loop archive template,
   this HFE widget renders each card from a single hardcoded PHP method
   (render_product_item() in the plugin) with NO WooCommerce/HFE action
   hooks available at all -- confirmed by reading the plugin source. That
   means the tag-on-image, wishlist icon, and color-swatch treatments from
   the archive redesign can't be added the same way (via functions.php
   hooks) here. This file gets as close as CSS alone can:
     - the existing .hfe-product-category text is repositioned into an
       overlay pill on the image (like .k1-tag), rather than adding new
       markup
     - the wishlist icon is a pure-CSS pseudo-element (no real interactive
       wishlist behaviour, same as the archive's decorative version)
     - color swatches are NOT reproduced here -- there's no product data
       available in this widget's markup to build them from without a
       custom REST/AJAX lookup, which felt like more than this ask called
       for. Flag if that's wanted and it can be added as a follow-up.

   Color/type tokens match woo-archive.css and the rest of the site.
   ========================================================================== */

.elementor-widget-hfe-woo-product-grid .hfe-product-item{
  position:relative;
  background-color:#FFFFFF !important;
  border:1px solid #E4DAC5;
  box-shadow:0 1px 2px rgba(30,27,22,.03);
}

/* ---------- image ---------- */
.elementor-widget-hfe-woo-product-grid .hfe-product-image{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#F1E9D8;
}
.elementor-widget-hfe-woo-product-grid .hfe-product-image > a{
  display:block;
  width:100%;
  height:100%;
}
.elementor-widget-hfe-woo-product-grid .hfe-product-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:26px;
  box-sizing:border-box;
  display:block;
}

/* District/category tag, moved from static text above the title into an
   overlay pill on the image -- same treatment as .k1-tag on the archive. */
.elementor-widget-hfe-woo-product-grid .hfe-product-category{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  margin:0 !important;
  background:#B8974E;
  color:#141414 !important;
  opacity:1 !important;
  font-family:'Jost','Helvetica Neue',Arial,sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:4px;
  max-width:calc(100% - 32px);
}

/* Decorative wishlist affordance -- pure CSS, matches .k1-wish on the
   archive (a heart icon in a white circle, top-right of the image). */
.elementor-widget-hfe-woo-product-grid .hfe-product-image::after{
  content:'';
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B16' stroke-width='1.6'%3E%3Cpath d='M12 20s-7.5-4.6-10-9.3C.5 7 2.3 3.6 5.6 3.1c2-.3 3.9.7 5 2.4l1.4 2.1 1.4-2.1c1.1-1.7 3-2.7 5-2.4 3.3.5 5.1 3.9 3.6 7.6C19.5 15.4 12 20 12 20Z'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

/* ---------- content ---------- */
.elementor-widget-hfe-woo-product-grid .hfe-product-rating{
  display:none !important;
}

.elementor-widget-hfe-woo-product-grid .hfe-product-title,
.elementor-widget-hfe-woo-product-grid .hfe-product-title a{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  color:#1E1B16 !important;
}

.elementor-widget-hfe-woo-product-grid .hfe-product-price,
.elementor-widget-hfe-woo-product-grid .hfe-product-price .price{
  font-family:'Jost','Helvetica Neue',Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:500 !important;
  color:#B8974E !important;
}
.elementor-widget-hfe-woo-product-grid .hfe-product-price .price del{
  color:#A69A83 !important;
  opacity:1 !important;
}
.elementor-widget-hfe-woo-product-grid .hfe-product-price .price ins{
  text-decoration:none;
  color:#B8974E !important;
}

/* ---------- add-to-cart button ---------- */
.elementor-widget-hfe-woo-product-grid .hfe-product-add-to-cart .button{
  background:#B8974E !important;
  color:#1E1B16 !important;
  border:none;
  border-radius:6px;
  padding:14px 18px;
  font-family:'Jost','Helvetica Neue',Arial,sans-serif !important;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .15s ease;
}
.elementor-widget-hfe-woo-product-grid .hfe-product-add-to-cart .button:hover,
.elementor-widget-hfe-woo-product-grid .hfe-product-add-to-cart .button:focus{
  background:#8F7237 !important;
  color:#1E1B16 !important;
}