/* ==========================================================================
   Amazon Variation Swatches - original "wd-perfect-variations" design
   ========================================================================== */

.wd-perfect-variations {
  margin-bottom: 15px !important;
  padding-bottom: 0 !important;
}

/* Hide the native WooCommerce dropdowns once cards are rendered */
.avs-has-cards .variations,
.avs-has-cards .reset_variations {
  display: none !important;
}

/* ============= VARIATION GROUP ============= */
.wd-var-group {
  margin-bottom: 14px;
}

/* The 5px on .wd-perfect-variations is the whole gap under the block. */
/* No dead space between the last option row and the quantity / add-to-cart row. */
/* The 5px on .wd-perfect-variations is the whole gap under the block. */
.wd-var-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.wd-perfect-variations .wd-var-options {
  margin-bottom: 0;
  padding-bottom: 0;
}

.avs-has-cards .woocommerce-variation.single_variation:empty {
  display: none !important;
}

.avs-has-cards .woocommerce-variation.single_variation {
  margin: 0 !important;
  padding: 0 !important;
}

.avs-has-cards form.variations_form,
.avs-has-cards form.variations_form > .variations {
  margin-bottom: 0 !important;
}

.avs-has-cards .woocommerce-variation-add-to-cart,
.avs-has-cards .single_variation_wrap {
  margin-top: 0;
}

.wd-var-title {
  font-size: 14px;
  margin-bottom: 12px;
  color: #333;
}

.wd-selected-value {
  font-weight: 700;
  color: #0F1111;
}

.wd-var-options {
  display: flex !important;
  flex-wrap: wrap;
  gap: 9px;
}

/* Text/size attribute: a real 4-column grid, so the cards are wider than the
   old fixed 108px and a 5th option simply starts the next row. */
.wd-var-options.size-options {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* ============= SIZE / TEXT ATTRIBUTE ============= */
.size-options .wd-var-option {
  width: auto;
  min-width: 0;
  min-height: 80px;
  padding: 0;
  border: 1px solid #D5D9D9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  /* visible so the promo badge can overhang the top-right corner; the header
     rounds its own corners now that the card no longer clips it */
  overflow: visible;
  position: relative;
  cursor: pointer;
  background: #fff;
}

.size-options .wd-var-option.active {
  border: 2px solid #007185;
  background: #F1F9FE;
}

.size-options .wd-var-option.active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

.size-options .wd-var-name {
  font-size: 14px;
  color: #0F1111;
  padding: 6px 8px;
  border-bottom: 1px solid #F0F2F2;
  border-radius: 7px 7px 0 0;
  margin: 0;
  background: #F7FAFA;
}

.size-options .wd-var-option.active .wd-var-name {
  border-radius: 6px 6px 0 0;
}

.size-options .wd-var-option.active .wd-var-name {
  background: #E6F2F9;
}

.size-options .wd-var-prices {
  padding: 6px 8px 7px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* The card is overflow:visible so the badge can overhang it, which means this
     white block is not clipped by the card's rounded corners. Rounding it here
     keeps the card's bottom-left and bottom-right corners intact. */
  border-radius: 0 0 7px 7px;
}

.size-options .wd-var-option.active .wd-var-prices {
  border-radius: 0 0 6px 6px;
}

.size-options .wd-sale-price {
  color: #B12704;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.2;
}

.size-options .wd-regular-price {
  font-size: 13px;
  text-decoration: line-through;
  color: #565959;
  line-height: 1.15;
}

/* ============= PROMO BADGES (2nd, 3rd, 4th option) ============= */
.wd-var-badge {
  position: absolute;
  top: -10px;
  /* Aligned to the card's own right edge: the pill can never spill past the
     card, and therefore never past the product summary. */
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: #6b7280;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  pointer-events: none;
  overflow: hidden;
}

/* Light wave sweeping across the badge. It lives in a pseudo element, so it adds
   no markup and no layout space, and it cannot receive pointer events.
   The sweep animates `transform` only (composited, no layout work per frame) and
   is marked !important so a theme reset such as `*::after { animation: none }`
   cannot silently kill it. */
.wd-var-badge::after {
  content: "" !important;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .75) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transform: translateX(-160%) skewX(-20deg);
  animation: avs-badge-shine 2.4s ease-in-out infinite !important;
}

.wd-var-badge--2::after { animation-delay: .3s !important; }
.wd-var-badge--3::after { animation-delay: .6s !important; }

@keyframes avs-badge-shine {
  0%   { transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  8%   { opacity: 1; }
  42%  { transform: translateX(260%) skewX(-20deg); opacity: 0; }
  100% { transform: translateX(260%) skewX(-20deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-var-badge::after { animation: none !important; opacity: 0; }
}

.wd-var-badge__icon {
  display: inline-flex;
  align-items: center;
}

.wd-var-badge__icon svg {
  display: block;
  width: 9px;
  height: 9px;
}

.wd-var-badge--1 { background: #ef4444; }
.wd-var-badge--2 { background: #16a34a; }
.wd-var-badge--3 { background: #f59e0b; }

/* Badged cards need headroom so the pill is not cut off by the row above. */
.wd-var-options.has-badges {
  padding-top: 12px;
  margin-top: -12px;
}

/* ============= COLOR ATTRIBUTE (Swatch Only) ============= */
.color-options.swatches-only .wd-var-option {
  width: 75px;
  height: 75px;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #D5D9D9;
  cursor: pointer;
}

.color-options.swatches-only .wd-var-option.active {
  border: 2px solid #007185;
  box-shadow: 0 0 0 1px #007185;
}

.color-options.swatches-only .wd-color-swatch {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-options.swatches-only .wd-color-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* ============= COLOR ATTRIBUTE (with prices) ============= */
.color-options .wd-var-option {
  width: 100px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  background: white;
  padding-bottom: 10px;
  cursor: pointer;
}

.color-options .wd-color-swatch {
  height: 100px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
}

.color-options .wd-color-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.color-options.with-prices .wd-var-prices {
  padding: 8px 5px 0;
}

.price-row {
  margin: 3px 0;
  line-height: 1.2;
}

.color-options.with-prices .wd-sale-price {
  color: #B12704;
  font-weight: bold;
  font-size: 14px;
  display: block;
}

.color-options.with-prices .wd-regular-price {
  color: #565959;
  text-decoration: line-through;
  font-size: 13px;
  display: block;
}

/* Active state with border and dot */
.color-options .wd-var-option.active {
  border: 2px solid #007185;
  background: #F1F9FE;
  position: relative;
}

.color-options .wd-var-option.active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

/* ============= HIDE ON PRODUCT GRID (CATEGORY/RELATED) ============= */
.product-grid-item .wd-perfect-variations,
.related.products .wd-perfect-variations,
.woocommerce .products .product .wd-perfect-variations {
  display: none !important;
}

/* ============= MOBILE RESPONSIVE ============= */
@media (max-width: 768px) {
  /* Phone keeps a tighter gap under the variations than desktop. */
  .wd-perfect-variations {
    margin-bottom: 10px !important;
  }

  /* Exactly three options per view; anything beyond that scrolls sideways
     instead of wrapping onto a second row. */
  .wd-var-options,
  .wd-var-options.size-options {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 9px;
    padding-bottom: 0;
  }

  .wd-var-options::-webkit-scrollbar {
    display: none;
  }

  .wd-var-options.has-badges {
    padding-top: 12px;
    margin-top: -12px;
  }

  .wd-var-options > .wd-var-option {
    scroll-snap-align: start;
  }

  .color-options.with-prices .wd-var-option {
    flex: 0 0 calc((100% - 18px) / 3);
    width: calc((100% - 18px) / 3);
  }

  .color-options.swatches-only .wd-var-option {
    width: 77px;
    height: 77px;
  }

  .color-options.swatches-only .wd-color-swatch img {
    border-radius: 6px;
  }

  .color-options .wd-color-swatch {
    height: 80px;
  }

  .size-options .wd-var-option {
    flex: 0 0 calc((100% - 18px) / 3);
    width: calc((100% - 18px) / 3);
    min-width: 0;
  }

  /* Bigger, easier to read on a phone. */
  .wd-var-title {
    font-size: 15px;
  }

  .size-options .wd-var-name {
    font-size: 15px;
    padding: 6px 6px;
  }

  .size-options .wd-sale-price {
    font-size: 17px;
  }

  .size-options .wd-regular-price {
    font-size: 14px;
  }

  .size-options .wd-var-prices {
    padding: 6px 6px 7px;
  }

  .size-options .wd-var-option {
    min-height: 84px;
  }
}

/* ==========================================================================
   Main price sync helpers
   ========================================================================== */

.avs-hide-duplicate-price {
  display: none !important;
}

.avs-debug-price-target {
  position: relative !important;
  outline: 3px solid #e11d48 !important;
  outline-offset: 3px !important;
}

.avs-debug-price-target::after {
  content: attr(data-avs-debug-label);
  position: absolute;
  z-index: 999999;
  top: -25px;
  left: 0;
  padding: 3px 7px;
  border-radius: 3px;
  background: #e11d48;
  color: #fff;
  font: 700 11px/1.4 Arial, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

.avs-debug-panel {
  position: fixed;
  z-index: 999998;
  right: 12px;
  bottom: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  border: 2px solid #e11d48;
  border-radius: 4px;
  background: #fff;
  color: #18181b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font: 12px/1.45 Arial, sans-serif;
}

.avs-debug-panel strong {
  display: block;
  margin-bottom: 5px;
}

.avs-debug-panel ol {
  margin: 0;
  padding-left: 20px;
}

.avs-debug-panel li + li {
  margin-top: 3px;
}

/* Keep theme's own main-price typography when AVS mirrors variation price */
.avs-price-synced .price,
.avs-price-synced > span:not(.avs-rating),
.avs-price-synced .amount,
.avs-price-synced ins,
.avs-price-synced del,
.avs-price-synced bdi {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}

/* Nothing in the price area may resize the pill: it keeps one size whether a
   variation is selected or not. */
.avs-rating,
.avs-price-synced .avs-rating {
  font-size: var(--avs-rating-size, 14px) !important;
  line-height: 1.4 !important;
}

.avs-rating .avs-rating__value,
.avs-rating .avs-rating__count {
  font-size: var(--avs-rating-size, 14px) !important;
  line-height: 1.4 !important;
}

.avs-rating .avs-rating__stars,
.avs-price-synced .avs-rating .avs-rating__stars {
  font-size: calc(var(--avs-rating-size, 14px) + 2px) !important;
  line-height: 1 !important;
}

/* ==========================================================================
   Rating pill on the single product page
   Appended inside the price element by PHP, so it always sits on the price
   line, right after the amount.
   ========================================================================== */

.price > .avs-rating,
.summary .avs-rating,
.entry-summary .avs-rating {
  --avs-rating-size: 14px;
  --avs-rating-bg: #eaf7ee;
  --avs-rating-border: #cfe8d6;
  --avs-rating-star: #ffb400;
  --avs-rating-empty: #d7d7d7;
  --avs-rating-text: #1f1f1f;
  --avs-rating-count: #5b5b5b;
}

.avs-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-left: 10px;
  padding: 5px 11px;
  border: 1px solid var(--avs-rating-border);
  border-radius: 7px;
  background: var(--avs-rating-bg);
  font-size: var(--avs-rating-size);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.avs-rating__stars {
  position: relative;
  display: inline-block;
  color: var(--avs-rating-empty);
  font-size: calc(var(--avs-rating-size) + 2px);
  line-height: 1;
  letter-spacing: 2px;
}

.avs-rating__stars::before {
  content: "\2605\2605\2605\2605\2605";
}

.avs-rating__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--avs-rating-star);
  white-space: nowrap;
}

.avs-rating__fill::before {
  content: "\2605\2605\2605\2605\2605";
}

.avs-rating__value {
  color: var(--avs-rating-text);
  font-weight: 700;
}

.avs-rating__count {
  padding-left: 10px;
  border-left: 1px solid var(--avs-rating-border);
  color: var(--avs-rating-count);
  font-weight: 400;
  text-decoration: none;
}

a.avs-rating__count:hover {
  color: var(--avs-rating-text);
  text-decoration: underline;
}

/* ==========================================================================
   One rating on the single product page: the pill, on the price line.

   No theme class name is guessed at here. WooCommerce always renders its stars
   as .star-rating and the review link as .woocommerce-review-link, and the pill
   uses neither, so the theme's rating is hidden page-wide and then put back
   exactly where it still belongs: product listings and the reviews section.
   ========================================================================== */

body.single-product .star-rating,
body.single-product .woocommerce-review-link,
body.single-product .woocommerce-product-rating {
  display: none !important;
}

/* Listings on the page (related, upsells, cross-sells, carousels) keep theirs. */
body.single-product .products .star-rating,
body.single-product .related .star-rating,
body.single-product .upsells .star-rating,
body.single-product .cross-sells .star-rating,
body.single-product li.product .star-rating,
body.single-product .product-grid-item .star-rating,
body.single-product .wd-product .star-rating,
body.single-product .wc-block-grid__product .star-rating,
body.single-product .products .woocommerce-review-link,
body.single-product .products .woocommerce-product-rating,
body.single-product li.product .woocommerce-product-rating {
  display: inline-block !important;
}

/* The reviews section and its form keep theirs. */
body.single-product #reviews .star-rating,
body.single-product .woocommerce-Reviews .star-rating,
body.single-product .commentlist .star-rating,
body.single-product #review_form .star-rating,
body.single-product .comment .star-rating,
body.single-product #reviews .woocommerce-review-link {
  display: inline-block !important;
}

/* The pill's own stars use .avs-rating__stars, so the rule above never hides
   them. This makes that explicit. */
.avs-rating .avs-rating__stars {
  display: inline-block !important;
}

/* Themes that lay the price out as a column would drop the pill onto its own
   row. The :has() rule and the class the script adds both fix it; either one
   alone is enough. */
.price:has(.avs-rating),
.price.avs-price-has-rating {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.avs-native-rating-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Sticky add-to-cart bars repeat the price markup, so the pill would be
   duplicated inside them and break their tight layout. Only the bar itself is
   targeted here (never a wrapper that merely has "sticky" in its class name),
   so the theme's sticky bar keeps its own design and nothing else on the page
   is affected.
   -------------------------------------------------------------------------- */
.wd-sticky-btn .avs-rating,
.wd-sticky-add-to-cart .avs-rating,
.wd-buy-now-sticky .avs-rating,
.sticky-add-to-cart .avs-rating,
.woodmart-sticky-btn .avs-rating {
  display: none !important;
}

.wd-sticky-btn .price,
.wd-sticky-add-to-cart .price,
.wd-buy-now-sticky .price,
.sticky-add-to-cart .price,
.woodmart-sticky-btn .price {
  display: revert !important;
  flex-direction: revert !important;
  flex-wrap: revert !important;
  gap: revert !important;
  align-items: revert !important;
  justify-content: revert !important;
}

@media (max-width: 768px) {
  .price > .avs-rating,
  .summary .avs-rating,
  .entry-summary .avs-rating {
    --avs-rating-size: 13px;
  }

  .avs-rating {
    gap: 6px;
    margin-left: 8px;
    padding: 4px 9px;
  }

  .avs-rating__count {
    padding-left: 8px;
  }
}