/**
 * ShopFluxx storefront cards — flat product cards, hover-revealed actions,
 * and uniform image sizing everywhere cards appear.
 *
 * Card bottoms carry title + price only. The add-to-cart button is moved into
 * the image by storefront-cards.js and revealed on hover, so grids read as a
 * clean, even wall of product photos.
 */

/* ------------------------------------------------- uniform square imagery */

/* Every product thumbnail is a square, cropped to fill — no section renders
   a taller or shorter card than its neighbours. */
.wd-product .wd-product-thumb,
.wd-product .product-element-top {
  position: relative;
}

.wd-product .product-image-link,
.wd-product .wd-product-grid-slider,
.wd-product .wd-product-img-link {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wd-product .product-image-link img,
.wd-product .wd-product-grid-slide img,
.wd-product .wd-product-img-link img,
.wd-product .attachment-woocommerce_thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Category cards get the same treatment so the two rows agree visually. */
.wd-cat .wd-entities-cat-image,
.wd-cat .category-image-link,
.wd-cat .wd-cat-image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wd-cat .wd-entities-cat-image img,
.wd-cat .category-image-link img,
.wd-cat .wd-cat-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Woodmart's "default" category design lays the label straight over the photo
   in dark grey, which is unreadable on a busy image (shop archive). Anchor it
   to the bottom on a gradient scrim so it reads on any artwork. */
.wd-cat.cat-design-default .wd-cat-inner {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

/* Woodmart's "default" category design absolutely positions the label so it
   lands on top of the photo in dark grey — unreadable over busy artwork on the
   shop archive. Returning it to normal flow puts it under the image as a clean
   caption, matching the `cat-design-alt` cards used on the homepage.

   !important is needed here: Elementor emits per-page rules such as
   `.elementor-1239 .elementor-element.elementor-element-1ad6cc9 div.product-category`
   which outrank any practical selector we can write from a stylesheet. */
.wd-cat.wd-cat.cat-design-default .wd-cat-content {
  position: static !important;
  padding: 8px 6px 0 !important;
  background: none;
}

.wd-cat.wd-cat.cat-design-default .wd-entities-title {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #22303f !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-transform: none !important;
}

.wd-cat.wd-cat.cat-design-default .wd-entities-title a {
  color: inherit;
}

/* Subcategory lists would make the caption block ragged across a row. */
.wd-cat.wd-cat.cat-design-default .wd-cat-subcats {
  display: none;
}

/* Subcategory links and counts would crowd the scrim — hide them there. */
.wd-cat.wd-cat.cat-design-default .wd-cat-subcats,
.wd-cat.wd-cat.cat-design-default .wd-cat-count {
  display: none;
}

/* --------------------------------------------------------- flat card body */

/* Woodmart's `products_with_background` option paints a filled panel behind
   every card — white, 10px radius, 15px padding — so a grid reads as a sheet
   of forms instead of a wall of product photos.

   The option is already forced off in bootstrap.php, but Woodmart also bakes
   these declarations into its generated static stylesheet, which is written at
   save time and does not re-read the filter. So the panel is stripped here as
   well. Doubling `.wd-product` clears Woodmart's own specificity, exactly as in
   the hover-button rules below. */
.wd-product.wd-product .wd-product-wrapper,
.wd-product.wd-product .product-wrapper {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}


/* The card footer is title + price only. Nothing that needs a border or a
   filled block, so the grid reads as photos rather than as a form. */
.wd-product .product-element-bottom {
  padding-top: 10px;
}

/* Price and rating share one row: price left, rating right.

   Woodmart stacks title -> rating -> price down a flex column. Nothing depends
   on that order, and the stacked rating pushed the price a line further from
   the image on every card. A two-column grid pairs them instead, and the title
   and the hover panel span the full width above and below. */
.wd-product.wd-product .product-element-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}

.wd-product.wd-product .product-element-bottom > .wd-entities-title,
.wd-product.wd-product .product-element-bottom > .wd-product-card-hover {
  grid-column: 1 / -1;
}

.wd-product.wd-product .product-element-bottom > .wrap-price,
.wd-product.wd-product .product-element-bottom > .price {
  grid-column: 1;
  margin: 0;
}

.wd-product.wd-product .product-element-bottom > .star-rating {
  grid-column: 2;
  margin: 0;
  justify-self: end;
}

/* Titles clamp to two lines so every card in a row lines up. */
.wd-product .wd-entities-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.3;
}

.wd-product .price {
  font-size: 15px;
  font-weight: 600;
}

/* Woodmart's full-width button hover adds a reserved strip under the card.
   With the button overlaid we no longer need that space. */
.wd-product.wd-hover-fw-button .wd-product-footer,
.wd-product .wd-product-footer:empty {
  display: none;
}

/* ------------------------------------------ hover-revealed add-to-cart CTA */

/* Once JS has moved the button inside the thumbnail it becomes an overlay.
   The doubled `.wd-product.wd-product` raises specificity above Woodmart's own
   `.wd-product.wd-hover-fw-button .wd-add-btn { position: relative }`, which
   otherwise ties on specificity and wins on stylesheet order. */
.wd-product.wd-product .wd-product-thumb > .wd-add-btn,
.wd-product.wd-product .wd-product-thumb > .sf-card-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  width: auto;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  /* Woodmart's fw-button mode zeroes this to show an icon instead of a label. */
  font-size: 13px;
}

.wd-product.wd-product:hover .wd-product-thumb > .wd-add-btn,
.wd-product.wd-product:focus-within .wd-product-thumb > .wd-add-btn,
.wd-product.wd-product:hover .wd-product-thumb > .sf-card-actions,
.wd-product.wd-product:focus-within .wd-product-thumb > .sf-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Suppress the icon-replacement pseudo elements so the text label reads. */
.wd-product.wd-product .wd-product-thumb > .wd-add-btn-replace > a::before,
.wd-product.wd-product .wd-product-thumb > .wd-add-btn-replace > a::after {
  content: none;
}

/* Woodmart sizes buttons from --wd-form-height (42px) plus padding, which
   rendered a 60px slab. Height is pinned explicitly instead. */
.wd-product.wd-product .wd-product-thumb > .wd-add-btn > a,
.wd-product.wd-product .wd-product-thumb > .wd-add-btn .button,
.wd-product.wd-product .wd-product-thumb > .sf-card-actions .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  min-height: 0;
  padding: 0 12px;
  border-radius: 4px;
  background: #0a3d91;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 3px 10px rgba(10, 61, 145, 0.22);
}

/* The label lives in a span that fw-button mode hides in favour of an icon. */
.wd-product.wd-product .wd-product-thumb > .wd-add-btn > a span,
.wd-product.wd-product .wd-product-thumb > .sf-card-actions .button span {
  display: inline-block;
  min-height: 0;
  line-height: 1;
}

/* Woodmart's replace animation slides the label up out of view on hover and
   slides its icon in behind it (`.wd-add-btn-replace > a:hover span {
   transform: translateY(-100%) }`). We suppress that icon, so without this the
   button would go blank on hover. Hold the label still instead. */
.wd-product.wd-product .wd-product-thumb > .wd-add-btn > a:hover span,
.wd-product.wd-product .wd-product-thumb > .wd-add-btn > a:focus span,
.wd-product.wd-product .wd-product-thumb > .sf-card-actions .button:hover span {
  transform: none;
}

/* Hover stays within the brand navy — a shade lift, not a colour change. */
.wd-product.wd-product .wd-product-thumb > .wd-add-btn > a:hover,
.wd-product.wd-product .wd-product-thumb > .wd-add-btn .button:hover,
.wd-product.wd-product .wd-product-thumb > .sf-card-actions .button:hover {
  background: #0d4aad;
  color: #fff;
}

/* Touch devices have no hover — show the action so the card stays usable. */
@media (hover: none) {
  .wd-product.wd-product .wd-product-thumb > .wd-add-btn,
  .wd-product.wd-product .wd-product-thumb > .sf-card-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ------------------------------------------------------------ hero tidy-up */

/* The homepage H1 duplicates the hero banner headline. Kept in the DOM for
   SEO and screen readers, hidden from sighted layout. */
.home .elementor-element-home-h1 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}