/* DS Quick Add Plus — reusable plus button and variation overlay */

/* Ensure product tiles can host an absolute-positioned button */
.ds-archive-product ul.products > li.product,
ul.products > li.product { position: relative; }

/* Wrapper spans the tile width at the bottom so the overlay can size correctly */
.ds-qap-wrap {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0; /* span full tile to allow full-height overlay */
  z-index: 5;
  width: 100%;
  display: block;
  box-sizing: border-box;
  pointer-events: none; /* do not block underlying links; children re-enable */
}

/* Plus button styling */
.ds-aov-plus-btn {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  background-color: rgba(255,255,255, 0.8) !important;
  color: black;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  pointer-events: auto; /* clickable over wrapper */
}
.ds-aov-plus-btn.is-loading { opacity: .7; pointer-events: none; }
.ds-aov-plus-btn.is-added { background: #2e7d32; }

/* If placed inside upsell thumb wrapper, ensure the thumb is positioned */
.ds-aov-thumb { position: relative; }
.ds-aov-thumb .ds-qap-wrap {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0; /* span full thumb for full-height overlay */
  z-index: 5;
  width: 100%;
  display: block;
}

/* Attribute overlay for variables (global) */
.ds-aov-attr-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0; /* cover tile for slide container */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  background: transparent; /* panel provides white bg */
  z-index: 20; /* above images */
  pointer-events: auto;
}
.ds-aov-attr-overlay[hidden] { display: none !important; }
/* Slide panel full-width; start off-canvas and slide in when overlay has .is-open */
.ds-aov-attr-panel {
  width: 100%;
  max-height: 85%;
  overflow: auto;
  background: #fff;
  border: 0; /* use upsell look (no border) */
  border-radius: 0;
  padding: 8px; /* match upsell panel padding */
  box-shadow: none; /* use upsell look (no drop shadow) */
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform .24s ease;
  will-change: transform;
}
.ds-aov-attr-overlay.is-open .ds-aov-attr-panel { transform: translateY(0); }

.ds-aov-attr-group { margin-bottom: 10px; }
.ds-aov-attr-label { font-weight: 400; margin-bottom: 6px; font-size: 11px; }
.ds-aov-attr-options { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-aov-attr-option { border: 1px solid #ddd; background: #fafafa; padding: 6px 10px; cursor: pointer; }
.ds-aov-attr-option.is-active { border-color: #111; background: #fff; }
.ds-aov-attr-option.is-disabled { opacity: .45; cursor: not-allowed; }

/* Loading state on the attribute panel (shows dim + spinner while adding via AJAX) */
.ds-aov-attr-panel.is-loading { position: relative; }
.ds-aov-attr-panel.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  z-index: 2;
}
.ds-aov-attr-panel.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-qap-spin .8s linear infinite;
  z-index: 3;
}

@keyframes ds-qap-spin { to { transform: rotate(360deg); } }

/* --- Make archive overlay match the upsell look (text-only vertical options) --- */
.ds-aov-attr-options { flex-direction: column; }
.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-attr-option:hover { background: transparent; }
.ds-aov-attr-option.is-selected,
.ds-aov-attr-option.is-selected .ds-swatch-label { font-weight: 700; }

/* Hide the + button while overlay is open on upsell thumbs (and any context that toggles the class) */
.ds-aov-thumb.is-overlay-open .ds-aov-plus-btn { opacity: 0; visibility: hidden; }


/* Ensure product slider is positioned to contain absolute Quick Add elements */
.product-image-slider { position: relative; }

/* Archive-only: hide Swiper UI when Quick Add overlay is open */
.ds-archive-product .product-image-slider.ds-qap-hide-swiper-ui .swiper-button-next,
.ds-archive-product .product-image-slider.ds-qap-hide-swiper-ui .swiper-button-prev {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.ds-archive-product .product-image-slider.ds-qap-hide-swiper-ui .swiper-scrollbar,
.ds-archive-product .product-image-slider.ds-qap-hide-swiper-ui .swiper-horizontal>.swiper-scrollbar,
.ds-archive-product .product-image-slider.ds-qap-hide-swiper-ui .swiper-scrollbar-horizontal {
  display: none !important;
}

/* === Quick Add overlay: natural-width swatches that pack to fill and wrap to next line (single-product unaffected) === */
.ds-aov-attr-overlay .ds-attribute-swatches { width: 100%; }
.ds-aov-attr-overlay .ds-swatches-list {
  /* Overlay: keep intrinsic swatch width and pack rows; wrap when needed */
  --ds-swatch-gap: clamp(4px, 1.6vw, 8px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* align swatch items to the right */
  align-items: center;
  gap: var(--ds-swatch-gap);
}
/* Ensure swatches do not stretch in overlay on all viewports
   and make them ~30% smaller than the default single-product swatches */
.ds-aov-attr-overlay .ds-swatches-list > .ds-swatch {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  display: inline-flex;
  /* Default single-product swatches are 42x42px; shrink to ~30px only in Quick Add */
  min-width: 30px;
  height: 30px;
  padding: 2px 6px;
  font-size: 10px;
}
.ds-aov-attr-overlay .ds-swatches-list > .ds-swatch .ds-swatch-label {
    font-size: 10px;
}

/* Overlay swatches UL should not render any pseudo-elements that could take up space */
.ds-aov-attr-overlay .ds-swatches-list::before,
.ds-aov-attr-overlay .ds-swatches-list::after {
  content: none !important;
  display: none !important;
}

/* Desktop-only fix: prevent swatch <li> from occupying full width inside Quick Add overlays */
@media (min-width: 1024px) {
  .ds-aov-attr-overlay .ds-swatches-list > .ds-swatch {
    width: auto !important;
    max-width: none !important;
    justify-self: end; /* grid alignment when using overlay grid layout */
    flex: 0 0 auto;   /* safety if any flex context applies */
    display: inline-flex; /* ensure natural content sizing */
  }
}


/* === DS Quick Add (simple products) — turn plus button into a loader during AJAX === */
/* Hide the plus icon while loading and show a full-size spinner that matches the button size */
.ds-aov-plus-btn.is-loading i { visibility: hidden; }
.ds-aov-plus-btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0; /* center by insetting to all sides and using auto margins */
  height: 100%; /* square sized by button height */
  aspect-ratio: 1 / 1; /* ensure perfect circle even if button width != height */
  width: auto;
  margin: auto;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(0,0,0,.25);
  border-top-color: rgba(0,0,0,.85);
  animation: ds-qap-spin .8s linear infinite;
  z-index: 2; /* above icon */
}


/* Override: prevent green background on plus button when .is-added is present */
.ds-aov-plus-btn.is-added {
  background: inherit !important;
  background-color: inherit !important;
  color: inherit !important;
}

/* Mobile-only: vertical align swatches to right if only one attribute exists */
@media (max-width: 767.98px) {
  /* 
   * If the form does NOT have a 2nd attribute field (meaning single attribute),
   * switch the swatches list to column layout aligned to the right.
   */
  .ds-aov-variable-form:not(:has(.ds-attribute-field:nth-of-type(2))) .ds-swatches-list {
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
  }
  
  .ds-aov-variable-form:not(:has(.ds-attribute-field:nth-of-type(2))) .ds-swatches-list .ds-swatch {
    width: auto;
  }
}