.ds-aov-boost .ds-aov-threshold-notice {
    margin-bottom: 20px;
    border-radius: 5px;
}
.ds-aov-boost .ds-aov-threshold-notice p {
    margin: 0 0 10px 0;
}
.ds-aov-boost .ds-aov-progress-bar {
    background: #eee;
    border-radius: 10px;
    height: 5px;
    overflow: hidden;
}
.ds-aov-boost .ds-aov-progress {
    background: black;
    height: 100%;
    transition: width 0.5s ease-in-out;
}
.ds-aov-boost .ds-aov-upsell-offer {
    padding: 20px 0 100px;
}
/* Hide original selects inside variable upsell forms; use swatches UI */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-variable-form .ds-hidden-original-select {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-add-to-cart-simple,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-add-to-cart-variable {
    margin-top: 10px;
    width: 100%;
    text-align: center;
}
/* Optionally hide the variable add button since selection auto-adds to cart */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-add-to-cart-variable { display: none; }
.ds-aov-boost .ds-aov-upsell-offer .button.loading { opacity: 0.5; }

/* Variable attribute UI overlay in upsell cards */
.ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb { position: relative; overflow: hidden; }
.ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb img { display: block; width: 100%; height: auto; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-plus-btn { position: absolute; left: 8px; bottom: 8px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 4px !important; background: #fff; background-color: rgba(255,255,255,0.8) !important; color:#111; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; text-align: center; cursor: pointer; z-index: 3; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-plus-btn i { font-size: 10px; line-height: 1; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-plus-btn:hover { border-color: #111; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-plus-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-overlay { position: absolute; inset: 0; background: transparent; z-index: 2; display: flex; align-items: flex-end; padding: 0; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-overlay[hidden] { display: none !important; }
/* Slide panel full-width inside image with slide-up/down animation */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-panel { width: 100%; max-height: 85%; overflow: auto; background: white; border: 0; border-radius: 0; padding: 8px; box-shadow: none; transform: translateY(100%); transition: transform .24s ease; will-change: transform; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-overlay.is-open .ds-aov-attr-panel { transform: translateY(0); }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-group + .ds-aov-attr-group { margin-top: 8px; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-label { font-size: 11px; font-weight: 400; margin-bottom: 6px; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options { display: flex; flex-direction: column; gap: 6px; }
/* Text-only options: remove all boxes/backgrounds/borders */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option { display: block; width: 100%; text-align: left; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: inherit; font: inherit; line-height: 1.3; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option:hover { background: transparent; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option:last-child { }
/* Selected attribute text appears bold for text-only options (not swatches) */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option.is-selected,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option.is-selected .ds-swatch-label { font-weight: 700; }


.ds-aov-boost .ds-aov-upsell-offer .products > li.product.is-loading .ds-aov-attr-overlay { pointer-events: none; }

/* === DS AOV Upsell — Responsive grid for offer products (3/4/5 columns) === */
.ds-aov-boost .ds-aov-upsell-offer ul.products,
.ds-aov-boost .ds-aov-upsell-offer ul.products[class*="columns-"],
.ds-aov-boost .ds-aov-upsell-offer .products,
.ds-aov-boost .ds-aov-upsell-offer .products[class*="columns-"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* mobile: 3 per row */
  gap: var(--ds-gap, 12px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-aov-boost .ds-aov-upsell-offer .products > li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  display: block !important;
}
.ds-aov-boost .ds-aov-upsell-offer .products > li.product a img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 768px) {
  .ds-aov-boost .ds-aov-upsell-offer ul.products,
  .ds-aov-boost .ds-aov-upsell-offer ul.products[class*="columns-"],
  .ds-aov-boost .ds-aov-upsell-offer .products,
  .ds-aov-boost .ds-aov-upsell-offer .products[class*="columns-"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* tablet: 4 per row */
  }
}
@media (min-width: 1024px) {
  .ds-aov-boost .ds-aov-upsell-offer ul.products,
  .ds-aov-boost .ds-aov-upsell-offer ul.products[class*="columns-"],
  .ds-aov-boost .ds-aov-upsell-offer .products,
  .ds-aov-boost .ds-aov-upsell-offer .products[class*="columns-"] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* desktop: 5 per row */
  }
}


/* === DS AOV Upsell — Remove WooCommerce clearfix pseudo-elements inside upsell offer ===
   Prevent ::before/::after blocks from occupying space in the upsell grid. Scoped narrowly
   to the upsell offer so other product lists retain default Woo behavior. */
.ds-aov-boost .ds-aov-upsell-offer ul.products::before,
.ds-aov-boost .ds-aov-upsell-offer ul.products::after,
.ds-aov-boost .ds-aov-upsell-offer .products::before,
.ds-aov-boost .ds-aov-upsell-offer .products::after,
.ds-aov-boost .ds-aov-upsell-offer .products ul::before,
.ds-aov-boost .ds-aov-upsell-offer .products ul::after {
  content: none !important;
  display: none !important;
}

/* Loader state for upsell items when adding variable product via AJAX */
.ds-aov-boost .ds-aov-upsell-offer .products > li.product.is-loading {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}
.ds-aov-boost .ds-aov-upsell-offer .products > li.product.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: ds-aov-spin 0.8s linear infinite;
  z-index: 2;
}
@keyframes ds-aov-spin { to { transform: rotate(360deg); } }

/* During upsell AJAX, hide YITH rewards message inside Woo notices to prevent brief flash */
body.ds-upsell-adding .woocommerce-notices-wrapper #yith-par-message-reward-cart,
body.ds-upsell-adding #yith-par-message-reward-cart {
  display: none !important;
}

/* --- DS AOV Upsell: additional refinements (2025-11-02) --- */
/* Hide plus button when overlay panel is open */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-thumb.is-overlay-open .ds-aov-plus-btn { opacity: 0; visibility: hidden; pointer-events: none; }

/* Remove any residual borders/backgrounds/outlines on text-only attribute options in all states */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option:hover,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option:focus,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option:active,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-options .ds-aov-attr-option:focus-visible {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}


/* Fix image shift when attribute panel opens: stabilize thumb box and pin image */
.ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb {
  aspect-ratio: 5 / 7;            /* keep a constant box height in the grid */
  contain: layout paint;           /* isolate layout/paint to prevent reflow outside */
}
.ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb img {
  position: absolute;              /* pin image so overlay animations don't move it */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* cover the box without distortion */
  -webkit-backface-visibility: hidden; /* reduce flicker on iOS */
  backface-visibility: hidden;
}


/* === DS AOV Upsell — Prevent jump when opening attribute overlay === */
/* Disable scroll anchoring so the page doesn't shift as overlay appears */
.ds-aov-boost .ds-aov-upsell-offer { overflow-anchor: none; }
.ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb { overflow-anchor: none; isolation: isolate; }
/* Promote image/panel to their own layers to avoid reflow jank */
.ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb img { will-change: transform; transform: translateZ(0); }
/* Ensure the sliding panel uses GPU compositing */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-panel { transform: translateY(100%) translateZ(0); will-change: transform; }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-overlay.is-open .ds-aov-attr-panel { transform: translateY(0) translateZ(0); }

/* Fallback for browsers without aspect-ratio support: lock thumb height */
@supports not (aspect-ratio: 1 / 1) {
  .ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb { position: relative; }
  .ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb::before {
    content: '';
    display: block;
    padding-top: 125%; /* 4:5 width:height ratio */
  }
  .ds-aov-boost .ds-aov-upsell-offer .products > li.product .ds-aov-thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}




/* === AOV Upsell: Match ds-variation-swatches.css styles for pa_color and pa_shape === */
/* Swatches list layout */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: row; /* enforce horizontal series */
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* Ensure shape swatches line up horizontally (override text-option defaults) */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-aov-attr-option {
  display: inline-flex; /* override .ds-aov-attr-option { display:block } */
  width: auto;         /* override .ds-aov-attr-option { width:100% } */
  flex: 0 0 auto;
}

/* Base swatch box (copied from ds-variation-swatches.css) */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 3px 8px;
  border: 1px solid #d5d5d5;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
  outline: none;
}
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch .ds-swatch-label,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch .ds-swatch-label {
  text-align: center;
  line-height: 1.1;
}

/* Hover effect */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch:hover,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch:hover {
  border-color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Selected (clicked) effect */
/* For pa_color: ring-style selection (transparent bg with 2px #111 border) */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch.is-selected {
  background-color: transparent !important;
  border-color: #111 !important;
  border-width: 2px !important;
  color: inherit !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
}
/* For pa_shape: filled dark selection */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch.is-selected {
  border-color: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
}

/* Disabled (temporarily unavailable given current selections) */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch.is-disabled,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(30%);
}
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch.is-disabled:hover,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch.is-disabled:hover {
  border-color: #d5d5d5;
  box-shadow: none;
}
/* Permanently unavailable options (no in-stock variations) */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch.is-out-of-stock,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch.is-out-of-stock,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-attr-option.is-out-of-stock { display: none !important; }

/* Focus-visible for keyboard users */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch:focus-visible,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch:focus-visible {
  outline: 3px solid #3b82f6; /* blue focus ring */
  outline-offset: 2px;
}

/* Small screens */
@media (max-width: 480px) {
  .ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch,
  .ds-aov-boost .ds-aov-upsell-offer .ds-aov-shape-swatches .ds-swatch {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
    padding: 4px 8px;
  }
}

/* Circular color swatches (exact match to variation swatches) */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="beige"],
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="black"],
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="caramel"],
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="cream"],
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="peach"] {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  background-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* inner color fill */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="beige"]::before,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="black"]::before,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="caramel"]::before,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="cream"]::before,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="peach"]::before {
  content: "";
  position: absolute;
  inset: 4px; /* gap between color and outline */
  border-radius: 50%;
  pointer-events: none;
}
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="beige"]::before { background-color: rgb(240, 218, 194); }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="black"]::before { background-color: rgb(0, 0, 0); }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="caramel"]::before { background-color: rgb(133, 70, 30); }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="cream"]::before { background-color: rgb(255, 253, 208); }
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="peach"]::before { background-color: rgb(255, 203, 164); }

/* hide text label visually but keep for screen readers */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="beige"] .ds-swatch-label,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="black"] .ds-swatch-label,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="caramel"] .ds-swatch-label,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="cream"] .ds-swatch-label,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="peach"] .ds-swatch-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* keep color on selected; accent border for selection without changing fill */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="beige"].is-selected,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="black"].is-selected,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="caramel"].is-selected,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="cream"].is-selected,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="peach"].is-selected {
  background-color: transparent !important; /* ensure gap stays visible and fill unaffected */
  border-color: #111 !important;
  border-width: 2px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
}

/* hover accent without changing color */
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="beige"]:hover,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="black"]:hover,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="caramel"]:hover,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="cream"]:hover,
.ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="peach"]:hover {
  border-color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Small screen sizing for circular chips */
@media (max-width: 480px) {
  .ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="beige"],
  .ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="black"],
  .ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="caramel"],
  .ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="cream"],
  .ds-aov-boost .ds-aov-upsell-offer .ds-aov-color-swatches .ds-swatch[data-value="peach"] {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

/* Utilities and icon swatches for shape attribute */
.ds-aov-boost .ds-aov-upsell-offer .ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ds-aov-boost .ds-aov-upsell-offer .ds-swatch--icon {
  font-size: 18px;
  line-height: 1;
}
.ds-aov-boost .ds-aov-upsell-offer .ds-swatch--icon i {
  display: inline-block;
  font-size: 18px;
  color: inherit;
  pointer-events: none;
}
@media (max-width: 480px) {
  .ds-aov-boost .ds-aov-upsell-offer .ds-swatch--icon,
  .ds-aov-boost .ds-aov-upsell-offer .ds-swatch--icon i {
    font-size: 17px;
  }
}