/* Devluxx Woo Elementor Widgets */

.devluxx-collections { display: grid; }
.devluxx-collections--grid { grid-template-columns: repeat(4, 1fr); }
.devluxx-collections--list { grid-template-columns: 1fr; }
.devluxx-collections--inline { display: flex; flex-wrap: wrap; }

.devluxx-collection { display: block; text-decoration: none; color: inherit; }
.devluxx-collection__media {
  display: block; overflow: hidden; aspect-ratio: 1; border-radius: 8px;
  box-sizing: border-box; position: relative;
}
/* Inherit the radius so the image corners follow the border, and respect padding */
.devluxx-collection__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
  transition: transform .35s ease;
}
.devluxx-collection:hover .devluxx-collection__media img { transform: scale(1.04); }
.devluxx-collection__title { display: block; margin-top: .65em; font-weight: 600; }
.devluxx-collection__count { display: block; font-size: .85em; opacity: .65; }

.devluxx-collections--list .devluxx-collection { display: flex; align-items: center; gap: 1rem; }
.devluxx-collections--list .devluxx-collection__media { width: 72px; flex: 0 0 72px; }
.devluxx-collections--list .devluxx-collection__title { margin-top: 0; }

.devluxx-collections--inline .devluxx-collection {
  padding: .5em 1.1em; border: 1px solid currentColor; border-radius: 999px;
}
.devluxx-collections--inline .devluxx-collection__media { display: none; }

/* Product grid: override theme float layout with grid */
.devluxx-product-grid ul.products {
  display: grid; gap: 24px; margin: 0; padding: 0; list-style: none;
}
.devluxx-product-grid ul.products::before,
.devluxx-product-grid ul.products::after { display: none; }
.devluxx-product-grid ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important; clear: none !important;
}

/* Featured product */
.devluxx-featured__product { display: grid; gap: 2.5rem; align-items: start; }
.devluxx-featured--left  .devluxx-featured__product { grid-template-columns: 50% minmax(0, 1fr); }
.devluxx-featured--right .devluxx-featured__product { grid-template-columns: 50% minmax(0, 1fr); }
.devluxx-featured--right .devluxx-featured__media { order: 2; }
.devluxx-featured--top   .devluxx-featured__product { grid-template-columns: 1fr; }

.devluxx-featured__media { position: relative; min-width: 0; }
.devluxx-featured__summary { min-width: 0; }
.devluxx-featured__description { grid-column: 1 / -1; }

.devluxx-featured__title { margin: 0 0 .4em; }
.devluxx-featured__title a { text-decoration: none; color: inherit; }
.devluxx-featured__summary .price { font-size: 1.5em; font-weight: 700; margin-bottom: .8em; display: block; }

/* Woo gallery is float-based — reset it so grid can take over */
.devluxx-featured .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.devluxx-featured .woocommerce-product-gallery__wrapper { margin: 0; }
.devluxx-featured .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }

/* The summary carries Woo's own `summary` class, which woocommerce.css styles
   as `float: right; width: 48%`. Inside a grid container the float is ignored
   but the width is not, so the column collapses to half and hugs the left. */
.devluxx-featured .devluxx-featured__media,
.devluxx-featured .devluxx-featured__summary,
.devluxx-featured .devluxx-featured__description {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  margin-left: 0;
  margin-right: 0;
}

/* Woo's template ships style="opacity:0" and reveals it from JS. If that script
   is blocked or deferred the entire gallery is invisible — never allow that. */
.devluxx-featured .woocommerce-product-gallery { opacity: 1 !important; }

/* Thumbnails below the main image */
.devluxx-featured .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.devluxx-featured .flex-control-thumbs::before,
.devluxx-featured .flex-control-thumbs::after { display: none; }
.devluxx-featured .flex-control-thumbs li { width: 100% !important; margin: 0 !important; float: none !important; }
.devluxx-featured .flex-control-thumbs img {
  width: 100%; height: auto; display: block; cursor: pointer;
  border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
  opacity: .7; transition: opacity .2s ease, border-color .2s ease;
}
.devluxx-featured .flex-control-thumbs img:hover,
.devluxx-featured .flex-control-thumbs img.flex-active { opacity: 1; border-color: rgba(0,0,0,.45); }

/* Thumbnail strip on the left, like the reference layout.
   Once flexslider runs it wraps the gallery in .flex-viewport, so *that*
   becomes the grid item — ordering the inner wrapper has no effect. */
.devluxx-featured--thumbs-left .woocommerce-product-gallery {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; align-items: start;
}
.devluxx-featured--thumbs-left .woocommerce-product-gallery > .flex-viewport,
.devluxx-featured--thumbs-left .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  order: 2; min-width: 0;
}
.devluxx-featured--thumbs-left .flex-control-thumbs {
  order: 1; grid-template-columns: 1fr; margin: 0;
  max-height: 100%; overflow-y: auto;
}

/* Variation form */
.devluxx-featured .variations { margin-bottom: 1em; }
.devluxx-featured .variations td,
.devluxx-featured .variations th { padding: .4em 0; }
.devluxx-featured .variations label { font-weight: 600; text-transform: uppercase; font-size: .82em; letter-spacing: .04em; }
.devluxx-featured .woocommerce-variation-price { margin-bottom: 1em; }

.devluxx-featured form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 1.2em; }
.devluxx-featured form.cart.variations_form { display: block; }
.devluxx-featured form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.devluxx-featured .quantity input { height: 46px; }
.devluxx-featured form.cart .button { height: 46px; }

.devluxx-featured .product_meta { font-size: .92em; line-height: 1.9; }
.devluxx-featured .product_meta > span { display: block; }

@media (max-width: 767px) {
  .devluxx-featured--left  .devluxx-featured__product,
  .devluxx-featured--right .devluxx-featured__product { grid-template-columns: 1fr !important; }
  .devluxx-featured--right .devluxx-featured__media { order: 0; }
  .devluxx-featured--thumbs-left .woocommerce-product-gallery { grid-template-columns: 1fr !important; }
  .devluxx-featured--thumbs-left .woocommerce-product-gallery > .flex-viewport,
  .devluxx-featured--thumbs-left .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { order: 1; }
  .devluxx-featured--thumbs-left .flex-control-thumbs { order: 2; grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
}

/* --- Gallery fallback ---
   If flexslider hasn't initialized yet (or the theme blocks it), the gallery
   wrapper stacks every image vertically. Clamp it until .flexslider lands. */
.devluxx-featured .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  max-height: none;
}
.devluxx-featured .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:not(:first-child) {
  display: none;
}

/* Flexslider viewport must clip, or slides show stacked */
.devluxx-featured .woocommerce-product-gallery .flex-viewport { overflow: hidden; }
.devluxx-featured .woocommerce-product-gallery.flexslider .woocommerce-product-gallery__wrapper {
  display: block;
}
.devluxx-featured .woocommerce-product-gallery__trigger { z-index: 5; }

/* --- Image with text --- */
.devluxx-imgtext__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
/* Media stays first in the DOM; only its grid track moves. */
.devluxx-imgtext--right .devluxx-imgtext__media { order: 2; }
.devluxx-imgtext__media { min-width: 0; }
.devluxx-imgtext__media img { width: 100%; height: auto; display: block; }
.devluxx-imgtext__content { min-width: 0; }

.devluxx-imgtext--no-media .devluxx-imgtext__inner { grid-template-columns: 1fr !important; }

.devluxx-imgtext--zoom .devluxx-imgtext__media { overflow: hidden; }
.devluxx-imgtext--zoom .devluxx-imgtext__media img { transition: transform .45s ease; }
.devluxx-imgtext--zoom .devluxx-imgtext__media:hover img { transform: scale(1.05); }

.devluxx-imgtext__subtitle { display: block; }
.devluxx-imgtext__title { margin: 0 0 18px; }
.devluxx-imgtext__title a { text-decoration: none; color: inherit; }
.devluxx-imgtext__description > *:first-child { margin-top: 0; }
.devluxx-imgtext__description > *:last-child { margin-bottom: 0; }

.devluxx-imgtext__buttons {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start;
}
.devluxx-imgtext__button {
  display: inline-flex; align-items: center; gap: .5em;
  text-decoration: none; border: 0 solid transparent; cursor: pointer;
  background-color: #d9541e; color: #fff; line-height: 1.2;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.devluxx-imgtext__button--secondary { background-color: transparent; color: inherit; border: 1px solid currentColor; }
.devluxx-imgtext__button-icon { display: inline-flex; align-items: center; }
.devluxx-imgtext__button-icon svg { width: 1em; height: 1em; fill: currentColor; }

@media (max-width: 1024px) {
  .devluxx-imgtext__inner { grid-template-columns: 1fr !important; }
  .devluxx-imgtext--stack-image .devluxx-imgtext__media { order: 0; }
  .devluxx-imgtext--stack-text .devluxx-imgtext__media { order: 2; }
}

/* --- Trust badges --- */
.devluxx-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.devluxx-badge-item {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: inherit; min-width: 0;
  transition: background-color .25s ease;
}
.devluxx-badge {
  display: flex; align-items: center; gap: 14px;
  justify-content: center; min-width: 0;
}
.devluxx-badges--stacked .devluxx-badge { flex-direction: column; text-align: center; }
.devluxx-badge__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.devluxx-badge__icon svg { width: 38px; height: 38px; display: block; transition: fill .25s ease; }
.devluxx-badge__icon i { transition: color .25s ease; }
.devluxx-badge__content { min-width: 0; }
.devluxx-badge__title { margin: 0; font-size: 1rem; line-height: 1.35; }
.devluxx-badge__subtitle { margin: .25em 0 0; font-size: .85em; opacity: .7; }

@media (max-width: 767px) {
  /* Two per row on mobile, and drop dividers that fall at row ends */
  .devluxx-badges--divided .devluxx-badge-item:nth-child(2n) { border-right: 0 !important; }
  .devluxx-badge { gap: 10px; }
  .devluxx-badge__title { font-size: .92rem; }
}