/** Shopify CDN: Minification failed

Line 1171:0 Unexpected "}"

**/
.quick-add {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card--card .quick-add {
  margin: 0 1.3rem 1rem;
}

.quick-add-modal {
  box-sizing: border-box;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  height: 100%;
}

.quick-add-modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}

.quick-add-modal .scroll-trigger.scroll-trigger {
  animation: none;
  opacity: 1;
  transform: none;
}

.quick-add-modal .quick-order-list__container {
  padding-bottom: 1.5rem;
}

.quick-add-modal__content.quick-add-modal__content--bulk {
  width: 90%;
}

.quick-add-modal__content {
  --modal-height-offset: 3.2rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: var(--modal-height-offset) auto 0;
  width: 100%;
  background-color: rgb(var(--color-background));
  overflow: hidden;
  max-width: var(--page-width);
  width: calc(100% - 3rem);
}

@media screen and (min-width: 769px) {
  .quick-add-modal__content {
    --modal-height-offset: 10rem;
    margin-top: var(--modal-height-offset);
    width: 560px !important;
    max-width: 560px !important;
    max-height: calc(100% - var(--modal-height-offset) * 2);
    overflow-y: auto;
  }

  quick-add-modal .quick-add-modal__toggle {
    top: 2rem;
    right: 2rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content {
    width: 560px !important;
    max-width: 560px !important;
  }
}

.quick-add-modal__content img {
  max-width: 100%;
}

.quick-add-modal__content-info.quick-add-modal__content-info--bulk {
  padding-bottom: 0;
}

.quick-add-modal__content-info--bulk h3 {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.quick-add-modal__content-info--bulk .price,
.quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
  display: inline-block;
}

.section-bulk-quick-order-list-padding {
  padding-top: 2.7rem;
  padding-bottom: 2.7rem;
}

@media screen and (min-width: 769px) {
  .section-bulk-quick-order-list-padding {
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  .quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
    padding-left: 1.6rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    overflow-y: initial;
  }

  .quick-add-modal__content-info--bulk .quick-order-list__table th {
    padding-top: 2.5rem;
  }

  .quick-add-modal__content-info--bulk thead {
    position: sticky;
    z-index: 3;
    top: 0;
    background-color: rgb(var(--color-background));
  }
}

.quick-add-modal__content-info--bulk .quick-add__product-media,
.quick-add-modal__content-info--bulk .quick-add__product-container,
.quick-add-modal__content-info--bulk .quick-add__info {
  width: 4.8rem;
  height: 7rem;
}

.quick-add-modal__content-info--bulk-details {
  padding-left: 1rem;
}

.quick-add-modal__content-info--bulk-details > a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info--bulk .quick-add__product-media,
  .quick-add-modal__content-info--bulk .quick-add__product-container,
  .quick-add-modal__content-info--bulk .quick-add__info {
    width: 17rem;
    height: 22rem;
  }

  .quick-add-modal__content-info--bulk-details,
  .quick-add-modal__content-info--bulk quick-order-list {
    padding: 0 2.5rem;
  }
}

.quick-add__product-media {
  margin-bottom: 1rem;
}

.quick-add-modal__content-info--bulk .quick-add__product-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-add-modal__content-info--bulk .quick-add__info {
  display: flex;
}

.quick-add-modal__content-info--bulk .quick-add__content-info__media {
  width: auto;
}

@media screen and (max-width: 989px) {
  .quick-add-modal__content-info--bulk .quick-add__content-info__media {
    display: flex;
    margin: 0;
  }

  .quick-add-modal__content-info--bulk quick-order-list {
    padding-left: 0;
    padding-right: 0;
  }

  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    --modal-padding: 1.5rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info--bulk .quick-add__info {
    flex-direction: column;
    position: sticky;
    top: 0;
    margin-top: -2.5rem;
    padding-top: 2.5rem;
  }
}

@media screen and (max-width: 989px) {
  .quick-add-modal__content-info--bulk {
    flex-direction: column;
  }
}

.quick-add-modal__content-info {
  --modal-padding: 1.5rem;
  padding-right: 4.4rem;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--modal-padding);
  height: 100%;
}

.quick-add-modal__content-info > * {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.quick-add-modal__content-info > product-info {
  padding: 0;
}

@media screen and (max-width: 749px) {
  quick-add-modal .slider .product__media-item.grid__item {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .quick-add-modal__content {
    bottom: var(--modal-height-offset);
  }

  .quick-add-modal__content-info > * {
    max-height: 100%;
  }

  quick-add-modal .product--mobile-columns .product__media-item {
    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
  }
}

.quick-add-modal__toggle {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1.2rem;
  z-index: 5;
  width: 4rem;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
}

.quick-add-modal__toggle:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.quick-add-modal__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

quick-add-modal .product:not(.featured-product) .product__view-details {
  display: block;
}

.quick-add-modal__content--bulk .product__view-details .icon {
  margin-left: 1.2rem;
}

quick-add-modal .quick-add-hidden,
quick-add-modal .product__modal-opener:not(.product__modal-opener--image),
quick-add-modal .product__media-item:not(:first-child) {
  display: none !important;
}

quick-add-modal .slider.slider--mobile {
  overflow: visible;
}

quick-add-modal .product__column-sticky .product__media-list {
  margin-bottom: 0;
}

quick-add-modal .product__media-list .deferred-media {
  display: block;
  width: 100%;
}

quick-add-modal .product__column-sticky {
  top: 0;
  position: relative;
}

@media screen and (min-width: 769px) {
  /* Ultra-specific selectors to override any conflicting CSS */
  .quick-add-modal .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media),
  .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media),
  quick-add-modal .quick-add-modal__content-info .product:not(.product--no-media),
  quick-add-modal .product:not(.product--no-media) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    justify-content: flex-start !important;
  }

  /* Position image absolutely at top left */
  .quick-add-modal .product:not(.product--no-media) .product__media-wrapper {
    position: absolute !important;
    top: 200px !important;
    left: -95px !important;
    width: 150px !important;
    height: 200px !important;
    z-index: 2 !important;
    margin-top: -190px !important;
  }

  /* Create a container for image + title/price */
  .quick-add-modal .product:not(.product--no-media)::before {
    content: '';
    order: 1;
    display: flex;
    width: 100%;
  }

  /* Only adjust title and price to avoid image overlap */
  .quick-add-modal .product:not(.product--no-media) .product__title {
    margin-left: 40px !important;
    margin-top: 5px !important;
  }
  
  .quick-add-modal .product:not(.product--no-media) .price {
    margin-left: 80px !important;
    margin-top: -20px !important;
  }

  /* Badge positioning */
  .quick-add-modal .product:not(.product--no-media) .badge {
    margin-top: 8px !important;
  }

  /* Ultra-specific media wrapper selectors */
  .quick-add-modal .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media) .product__media-wrapper,
  .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media) .product__media-wrapper,
  quick-add-modal .quick-add-modal__content-info .product:not(.product--no-media) .product__media-wrapper,
  quick-add-modal .product:not(.product--no-media) .product__media-wrapper {
    max-width: 200px !important;
    width: 200px !important;
    flex-shrink: 0 !important;
    flex-basis: 200px !important;
    flex-grow: 0 !important;
  }

  /* Ultra-specific info wrapper selectors */
  .quick-add-modal .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media) .product__info-wrapper,
  .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media) .product__info-wrapper,
  quick-add-modal .quick-add-modal__content-info .product:not(.product--no-media) .product__info-wrapper,
  quick-add-modal .product:not(.product--no-media) .product__info-wrapper {
    padding-top: 0 !important;
    padding-left: 0.5rem !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    flex-grow: 1 !important;
    position: relative !important;
    float: none !important;
  }

  /* Ensure no conflicting positioning with maximum specificity */
  .quick-add-modal .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media) .product__media-wrapper,
  .quick-add-modal .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media) .product__info-wrapper,
  quick-add-modal .quick-add-modal__content-info .product:not(.product--no-media) .product__media-wrapper,
  quick-add-modal .quick-add-modal__content-info .product:not(.product--no-media) .product__info-wrapper {
    position: relative !important;
    float: none !important;
    clear: none !important;
    display: block !important;
  }

  /* Override any grid layout that might be applied */
  .quick-add-modal .quick-add-modal__content .quick-add-modal__content-info .product:not(.product--no-media),
  quick-add-modal .quick-add-modal__content-info .product:not(.product--no-media) {
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
  }

  /* Force the flexbox layout with even higher specificity */
  .quick-add-modal__content .quick-add-modal__content-info > .product:not(.product--no-media) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  /* Override the base .grid class that's causing flex-wrap */
  quick-add-modal .product.grid:not(.product--no-media),
  .quick-add-modal .product.grid:not(.product--no-media),
  .quick-add-modal__content .product.grid:not(.product--no-media),
  .quick-add-modal__content-info .product.grid:not(.product--no-media) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    column-gap: 0.5rem !important;
    row-gap: 0 !important;
  }

  quick-add-modal .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
    max-width: 100%;
    width: 100%;
  }

  quick-add-modal .thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: none;
  }
}

quick-add-modal .page-width {
  padding: 0;
}

quick-add-modal .product__title > h1 {
  display: none;
}

quick-add-modal .product__title > a {
  display: block;
  text-decoration: none;
}

quick-add-modal .product__title > a:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.3rem;
}

quick-add-modal .product-form__buttons {
  max-width: initial;
}

.quick-add__submit {
  padding: 0.8rem;
  min-width: 100%;
  box-sizing: border-box;
}

quick-add-modal .product-media-container.constrain-height {
  --viewport-offset: calc((var(--modal-height-offset) + var(--modal-padding) + var(--popup-border-width)) * 2);
}

@media screen and (min-width: 769px) {
  quick-add-modal .product-media-container.constrain-height {
    --constrained-min-height: 400px;
  }
}

quick-add-bulk {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card__content quick-add-bulk .quantity {
  width: 100%;
}

quick-add-bulk .progress-bar-container {
  position: absolute;
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: var(--inputs-radius-outset);
  border: var(--inputs-border-width) solid transparent;
  z-index: -1;
}

quick-add-bulk quantity-input {
  justify-content: space-between;
}

quick-add-bulk .quantity__input {
  max-width: calc(6.5rem / var(--font-body-scale));
  flex-grow: 0;
}

.quantity__input-disabled {
  pointer-events: none;
}

/* ===== CLOSE BUTTON POSITIONING ===== */
/* Hide the duplicate X button but keep the circular one */
.quick-add-modal [id^="QuickAddInfo-"] .modal__close,
.quick-add-modal .modal__close {
  display: none !important;
}

/* ===== MOBILE RESPONSIVE FIX ===== */
/* Override conflicting base.css mobile styles */

@media screen and (max-width: 768px) {
  /* Mobile price container positioning - move entire price section to right */
  .quick-add-modal [id^="QuickAddInfo-"] .price,
  .quick-add-modal__content-info .price {
    text-align: right !important;
    justify-content: flex-end !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-left: auto !important;
  }

  /* Override base.css mobile side-by-side layout with higher specificity */
wwhen.quick-add-modal [id^="QuickAddInfo-"],
  .quick-add-modal .quick-add-modal__content-info,
  .quick-add-modal [id^="QuickAddInfo-"],
  .quick-add-modal .quick-add-modal__content-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 3rem 1.5rem 1.5rem 1.5rem !important;
    width: 100% !important;
  }
  
  /* Mobile modal sizing */
  .quick-add-modal,
  modal-dialog[id^="QuickAdd-"] {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    max-height: 80vh !important;
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  /* Mobile image - centered above content - override base.css flex rules */
  .quick-add-modal [id^="QuickAddInfo-"] .product__media-wrapper,
  .quick-add-modal .quick-add-modal__content-info .product__media-wrapper,
  .quick-add-modal [id^="QuickAddInfo-"] .product__media-wrapper,
  .quick-add-modal .quick-add-modal__content-info .product__media-wrapper {
    flex: none !important;
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto 1rem auto !important;
    text-align: center !important;
    order: 1 !important;
  }
  
  .quick-add-modal [id^="QuickAddInfo-"] .product__media-wrapper img,
  .quick-add-modal .quick-add-modal__content-info .product__media-wrapper img,
  .quick-add-modal [id^="QuickAddInfo-"] .product__media-wrapper img,
  .quick-add-modal .quick-add-modal__content-info .product__media-wrapper img {
    width: 80px !important;
    height: 106px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    position: static !important;
    margin: 0 !important;
    transform: none !important;
  }
  
  /* Mobile title and price - centered */
  [id^="QuickAddInfo-"] .product__title,
  .quick-add-modal__content-info .product__title {
    text-align: center !important;
    margin: 0 0 0.5rem 0 !important;
    order: 2 !important;
  }
  
  [id^="QuickAddInfo-"] .price,
  .quick-add-modal__content-info .price {
    text-align: center !important;
    margin: 0 0 1rem 0 !important;
    order: 3 !important;
  }
  
  /* Mobile swatches - horizontal centered */
  [id^="QuickAddInfo-"] .product-form__input--swatch,
  .quick-add-modal__content-info .product-form__input--swatch {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
    order: 4 !important;
  }
  
  [id^="QuickAddInfo-"] .product-form__input--swatch label,
  .quick-add-modal__content-info .product-form__input--swatch label {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  
  /* Mobile size buttons - horizontal centered */
  [id^="QuickAddInfo-"] .product-form__input:not(.product-form__input--swatch),
  .quick-add-modal__content-info .product-form__input:not(.product-form__input--swatch) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
    order: 5 !important;
  }
  
  [id^="QuickAddInfo-"] .product-form__input:not(.product-form__input--swatch) label,
  .quick-add-modal__content-info .product-form__input:not(.product-form__input--swatch) label {
    width: 50px !important;
    height: 40px !important;
    min-width: 50px !important;
    min-height: 40px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Mobile ADD TO CART button */
  [id^="QuickAddInfo-"] .product-form__buttons,
  .quick-add-modal__content-info .product-form__buttons {
    order: 6 !important;
  }
  
  [id^="QuickAddInfo-"] .product-form__buttons .button,
  .quick-add-modal__content-info .product-form__buttons .button {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
  }

  /* Override conflicting styles for mobile submit button */
  [id^="QuickAddInfo-"] .product-form__buttons .product-form__submit,
  .quick-add-modal__content-info .product-form__buttons .product-form__submit,
  [id^="QuickAddInfo-"] .product-form__buttons #ProductSubmitButton-quickadd-template--25754719846787__main,
  .quick-add-modal__content-info .product-form__buttons #ProductSubmitButton-quickadd-template--25754719846787__main {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 20px 0 !important;
  }
  
  /* Mobile payment icons - wrap to multiple lines */
  [id^="QuickAddInfo-"] .list-payment,
  .quick-add-modal__content-info .list-payment {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow-x: visible !important;
    padding: 0.5rem 0 !important;
    order: 7 !important;
  }
  
  [id^="QuickAddInfo-"] .list-payment__item,
  .quick-add-modal__content-info .list-payment__item {
    flex-shrink: 0 !important;
    min-width: 40px !important;
  }
  
  [id^="QuickAddInfo-"] .list-payment__item img,
  .quick-add-modal__content-info .list-payment__item img {
    max-width: 40px !important;
    height: auto !important;
  }
}

/* ===== BUTTON BACKGROUND COLOR FIX ===== */
/* Keep button background black when swatches/sizes are changed */

/* Desktop - Force black background */
@media screen and (min-width: 769px) {
  .quick-add-modal .product-form__buttons .button,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons .button,
  .quick-add-modal .product-form__buttons button,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons button {
    background-color: #000000 !important;
    color: #ffffff !important;
  }
  
  /* Override any disabled/gray states */
  .quick-add-modal .product-form__buttons .button:disabled,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons .button:disabled,
  .quick-add-modal .product-form__buttons .button[aria-disabled='true'],
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons .button[aria-disabled='true'] {
    background-color: #000000 !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
}

/* Mobile - Force black background */
@media screen and (max-width: 749px) {
  .quick-add-modal .product-form__buttons .button,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons .button,
  .quick-add-modal .product-form__buttons button,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons button {
    background-color: #000000 !important;
    color: #ffffff !important;
  }
  
  /* Override any disabled/gray states */
  .quick-add-modal .product-form__buttons .button:disabled,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons .button:disabled,
  .quick-add-modal .product-form__buttons .button[aria-disabled='true'],
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__buttons .button[aria-disabled='true'] {
    background-color: #000000 !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
}


/* ===== REMOVE INNER GRAY LINES ===== */
/* Hide separator lines within quick add modal */

.quick-add-modal hr,
.quick-add-modal [id^="QuickAddInfo-"] hr,
.quick-add-modal .divider,
.quick-add-modal [id^="QuickAddInfo-"] .divider,
.quick-add-modal .separator,
.quick-add-modal [id^="QuickAddInfo-"] .separator,
.quick-add-modal *[style*="border-top"],
.quick-add-modal [id^="QuickAddInfo-"] *[style*="border-top"],
.quick-add-modal *[style*="border-bottom"],
.quick-add-modal [id^="QuickAddInfo-"] *[style*="border-bottom"] {
  display: none !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== CRITICAL: Override main product page image styles ===== */
/* This fixes image stretching from section-main-product.css */
.quick-add-modal img,
.modal-dialog[id^="QuickAdd-"] img,
[id^="QuickAddInfo-"] img {
  object-fit: cover !important;
  object-position: center !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
}

/* ===== MOBILE QUICK-ADD STYLES ===== */
/* Simple mobile layout without conflicts */

@media screen and (max-width: 768px) {
  /* Mobile modal sizing - full width with reduced height */
  .quick-add-modal,
  modal-dialog[id^="QuickAdd-"] {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    max-height: 80vh !important;
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Mobile content layout - vertical stack, no inner section */
  [id^="QuickAddInfo-"],
  .quick-add-modal__content-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Remove any gray borders from modal elements */
  .quick-add-modal *,
  modal-dialog[id^="QuickAdd-"] * {
    border-color: transparent !important;
  }

  /* Mobile image - centered above content */
  [id^="QuickAddInfo-"] .product__media-wrapper,
  .quick-add-modal__content-info .product__media-wrapper {
    flex: none !important;
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto 1rem auto !important;
    text-align: center !important;
    order: 1 !important;
  }

  [id^="QuickAddInfo-"] .product__media-wrapper img,
  .quick-add-modal__content-info .product__media-wrapper img {
    width: 80px !important;
    height: 106px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    position: static !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Mobile title and price - centered */
  [id^="QuickAddInfo-"] .product__title,
  .quick-add-modal__content-info .product__title {
    text-align: center !important;
    margin: 0 0 0.5rem 0 !important;
    order: 2 !important;
  }

  [id^="QuickAddInfo-"] .price,
  .quick-add-modal__content-info .price {
    text-align: center !important;
    margin: 0 0 1rem 0 !important;
    order: 3 !important;
  }

  /* Mobile swatches - horizontal left aligned */
  [id^="QuickAddInfo-"] .product-form__input--swatch,
  .quick-add-modal__content-info .product-form__input--swatch {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0px !important;
    justify-content: flex-start !important;
    order: 4 !important;
  }

  [id^="QuickAddInfo-"] .product-form__input--swatch label,
  .quick-add-modal__content-info .product-form__input--swatch label {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    margin: 0 5px !important;
    padding: 0 !important;
  }

  /* Force swatch image size - override base.css conflicting rules */
  [id^="QuickAddInfo-"] .product-form__input--swatch label img,
  .quick-add-modal__content-info .product-form__input--swatch label img,
  [id^="QuickAddInfo-"] .product-form__input--swatch img,
  .quick-add-modal__content-info .product-form__input--swatch img,
  quick-add-modal [id^="QuickAddInfo-"] .product-form__input--swatch label,
  quick-add-modal [id^="QuickAddInfo-"] .product-form__input--swatch .swatch-input__label,
  quick-add-modal [id^="QuickAddInfo-"] .product-form__input--swatch .swatch,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__input--swatch label,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__input--swatch .swatch-input__label,
  .quick-add-modal [id^="QuickAddInfo-"] .product-form__input--swatch .swatch {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: cover !important;
  }

  /* Mobile size buttons - horizontal left aligned */
  [id^="QuickAddInfo-"] .product-form__input:not(.product-form__input--swatch),
  .quick-add-modal__content-info .product-form__input:not(.product-form__input--swatch) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin-bottom: 1rem !important;
    order: 5 !important;
  }

  [id^="QuickAddInfo-"] .product-form__input:not(.product-form__input--swatch) label,
  .quick-add-modal__content-info .product-form__input:not(.product-form__input--swatch) label {
    width: 50px !important;
    height: 40px !important;
    min-width: 50px !important;
    min-height: 40px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mobile ADD TO CART button */
  [id^="QuickAddInfo-"] .product-form__buttons,
  .quick-add-modal__content-info .product-form__buttons {
    order: 6 !important;
  }

  [id^="QuickAddInfo-"] .product-form__buttons .button,
  .quick-add-modal__content-info .product-form__buttons .button {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
  }

  /* Mobile X button positioning - move up slightly */
  .quick-add-modal [id^="QuickAddInfo-"] .quick-add-modal__toggle,
  .quick-add-modal .quick-add-modal__toggle {
    top: 0.1rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 10000 !important;
    position: fixed !important;
  }

  /* Create header area with image and title side by side */
  .quick-add-modal [id^="QuickAddInfo-"]::before {
    content: '';
    display: block;
    clear: both;
  }
  
  /* Mobile display image positioning - float to left of title */
  .quick-add-modal [id^="QuickAddInfo-"] .product__media-wrapper,
  .quick-add-modal__content-info .product__media-wrapper {
    float: left !important;
    width: 60px !important;
    height: 80px !important;
    margin: 0 12px 12px 0 !important;
    background: transparent !important;
    padding: 0 !important;
    order: -1 !important;
  }

  /* Target the actual image inside the wrapper - override main product page styles with highest specificity */
  .quick-add-modal [id^="QuickAddInfo-"] .product__media-wrapper img,
  .quick-add-modal__content-info .product__media-wrapper img,
  .quick-add-modal [id^="QuickAddInfo-"] .product__media-item img,
  .quick-add-modal__content-info .product__media-item img,
  .quick-add-modal [id^="QuickAddInfo-"] .product__media img,
  .quick-add-modal__content-info .product__media img,
  .quick-add-modal [id^="QuickAddInfo-"] .product-media-container img,
  .quick-add-modal__content-info .product-media-container img,
  .quick-add-modal .product__media-item img,
  .quick-add-modal .product__media img,
  .quick-add-modal .product-media-container img {
    width: 60px !important;
    height: 80px !important;
    max-width: 60px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 8px !important;
    min-height: 80px !important;
    flex-shrink: 0 !important;
  }

  /* Mobile heading - ensure it doesn't overlap with image */
  .quick-add-modal [id^="QuickAddInfo-"] .product__title,
  .quick-add-modal__content-info .product__title {
    margin-top: -80px !important;
    margin-left: 35px !important; /* Add left margin to account for image width (60px) + gap (12px) */
    margin-bottom: 0.5rem !important;
    text-align: left !important;
    line-height: 1.3 !important;
    padding-top: 0 !important;
    overflow: visible !important; /* Allow text to wrap naturally */
    min-height: auto !important; /* Remove fixed height */
    display: block !important; /* Use block for natural text flow */
    padding-left: 0 !important;
  }
  
  /* Ensure title text doesn't overlap with image */
  .quick-add-modal [id^="QuickAddInfo-"] .product__title h1,
  .quick-add-modal [id^="QuickAddInfo-"] .product__title h2,
  .quick-add-modal__content-info .product__title h1,
  .quick-add-modal__content-info .product__title h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Mobile price section - clear float and position properly */
  .quick-add-modal [id^="QuickAddInfo-"] .price,
  .quick-add-modal__content-info .price {
    clear: both !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  /* Mobile discount badge - center with price text */
  .quick-add-modal [id^="QuickAddInfo-"] .price__badge-sale,
  .quick-add-modal__content-info .price__badge-sale,
  .quick-add-modal [id^="QuickAddInfo-"] [class*="badge"],
  .quick-add-modal__content-info [class*="badge"] {
    transform: translateY(-5px) !important;
  }

  /* Mobile slashed price - make same size as main price */
  .quick-add-modal [id^="QuickAddInfo-"] .price-item--regular,
  .quick-add-modal__content-info .price-item--regular,
  .quick-add-modal [id^="QuickAddInfo-"] s,
  .quick-add-modal__content-info s {
    font-size: 15px !important;
    margin-right: 0.1rem !important;
  }

  /* Mobile price for products without discount - ensure 15px font size */
  .quick-add-modal [id^="QuickAddInfo-"] .price:not(.price--on-sale) .price-item,
  .quick-add-modal__content-info .price:not(.price--on-sale) .price-item,
  .quick-add-modal [id^="QuickAddInfo-"] .price:not(.price--on-sale) .price__regular,
  .quick-add-modal__content-info .price:not(.price--on-sale) .price__regular,
  .quick-add-modal [id^="QuickAddInfo-"] .price:not(.price--on-sale) .price__current,
  .quick-add-modal__content-info .price:not(.price--on-sale) .price__current {
    font-size: 15px !important;
  }

  /* More specific targeting for price-item and price-item--regular classes */
  .quick-add-modal [id^="QuickAddInfo-"] .price-item,
  .quick-add-modal__content-info .price-item,
  .quick-add-modal [id^="QuickAddInfo-"] .price-item--regular,
  .quick-add-modal__content-info .price-item--regular,
  .quick-add-modal [id^="QuickAddInfo-"] .price .price-item,
  .quick-add-modal__content-info .price .price-item,
  .quick-add-modal [id^="QuickAddInfo-"] .price .price-item--regular,
  .quick-add-modal__content-info .price .price-item--regular {
    font-size: 15px !important;
  }
}

/* Override base.css price-item--regular rule for small phones */
@media screen and (max-width: 480px) {
  .quick-add-modal [id^="QuickAddInfo-"] .price-item--regular,
  .quick-add-modal__content-info .price-item--regular,
  .quick-add-modal [id^="QuickAddInfo-"] .price .price-item--regular,
  .quick-add-modal__content-info .price .price-item--regular {
    font-size: 15px !important;
  }
}

/* Ultra-specific override for all screen sizes - target the exact conflicting rule */
body .quick-add-modal [id^="QuickAddInfo-"] .price .price-item--regular,
body .quick-add-modal [id^="QuickAddInfo-"] .price-item--regular,
body .quick-add-modal__content-info .price .price-item--regular,
body .quick-add-modal__content-info .price-item--regular,
.quick-add-modal [id^="QuickAddInfo-"] .price.price--large .price__regular .price-item.price-item--regular,
.quick-add-modal [id^="QuickAddInfo-"] .price .price__regular span.price-item--regular,
.quick-add-modal [id^="QuickAddInfo-"] .price span.price-item--regular,
.quick-add-modal [id^="QuickAddInfo-"] span.price-item--regular {
  font-size: 15px !important;
  font-family: Questrial, sans-serif !important;
  color: #000000 !important;
}


  /* Override conflicting styles for mobile submit button */
  [id^="QuickAddInfo-"] .product-form__buttons .product-form__submit,
  .quick-add-modal__content-info .product-form__buttons .product-form__submit,
  [id^="QuickAddInfo-"] .product-form__buttons #ProductSubmitButton-quickadd-template--25754719846787__main,
  .quick-add-modal__content-info .product-form__buttons #ProductSubmitButton-quickadd-template--25754719846787__main {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 20px 0 !important;
  }

  /* Mobile payment icons - wrap to multiple lines */
  [id^="QuickAddInfo-"] .list-payment,
  .quick-add-modal__content-info .list-payment {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow-x: visible !important;
    padding: 0.5rem 0 !important;
    order: 7 !important;
    margin-top: -1.5rem !important;
  }

  [id^="QuickAddInfo-"] .list-payment__item,
  .quick-add-modal__content-info .list-payment__item {
    flex-shrink: 0 !important;
    min-width: 40px !important;
  }

  [id^="QuickAddInfo-"] .list-payment__item img,
  .quick-add-modal__content-info .list-payment__item img {
    max-width: 40px !important;
    height: auto !important;
  }

  /* Mobile blur effect */
  body:has(quick-add-modal[open]),
  body:has(.quick-add-modal.is-open),
  body:has(modal-dialog[id^="QuickAdd-"][open]) {
    overflow: hidden;
  }

  body:has(quick-add-modal[open])::before,
  body:has(.quick-add-modal.is-open)::before,
  body:has(modal-dialog[id^="QuickAdd-"][open])::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(2px) saturate(90%);
    -webkit-backdrop-filter: blur(2px) saturate(90%);
    z-index: 9998;
    pointer-events: auto;
  }

  /* Force remove overlay when modal is closed */
  body.force-remove-overlay::before {
    display: none !important;
  }

  /* Ensure modal backdrop captures clicks to close modal */
  .quick-add-modal[open],
  quick-add-modal[open],
  modal-dialog[id^="QuickAdd-"][open] {
    pointer-events: auto !important;
  }

  /* Allow clicks on modal content */
  .quick-add-modal[open] .quick-add-modal__content,
  quick-add-modal[open] .quick-add-modal__content-info,
  modal-dialog[id^="QuickAdd-"][open] [id^="QuickAddInfo-"] {
    pointer-events: auto !important;
  }
}