/**
 * Sticky add to cart (sections/sticky-atc.liquid).
 *
 * Fixed to the bottom of the viewport, revealed by assets/sticky-atc.js once
 * the real Add to cart has scrolled above the fold.
 */
.sticky-atc {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  /* Above the sticky header (30, section-header.css) so it is not tucked
     underneath, and below the header's own overlays (50/51).

     It cannot collide with the cart drawer at any value: that is a native
     <dialog> opened modally (section-cart.css, note its ::backdrop), which
     puts it in the browser's TOP LAYER - above every z-index on the page
     regardless of number. Worth knowing before anyone raises this to "make
     sure" it stays on top of something. */
  z-index: 40;
  padding: var(--space-4);
  /* The card is what is seen; the wrapper is only a positioner, so it must not
     intercept clicks across the whole width of the page. */
  pointer-events: none;
}

.sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  /* Opaque rather than frosted: this sits over arbitrary product photography
     and a translucent panel makes the price hard to read against a busy
     image. Same call as the shoppable slide card. */
  background-color: var(--color-bg);
  color: var(--color-ink);
  box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
  pointer-events: auto;
}

.sticky-atc__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

.sticky-atc__image {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-s);
  object-fit: cover;
}

.sticky-atc__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Shrinks below its content so the title and price ellipsis instead of
     forcing the bar wider than the viewport. */
  min-width: 0;
  overflow: hidden;
}

.sticky-atc__title {
  font-weight: 600;
  /* One line then ellipsis. Titles on this store run long, and a wrapping
     title would grow the bar's height as the visitor scrolls - which shifts
     the page under their finger. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-atc__variant {
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty on a single-variant product. Collapsed so it takes no vertical space
   rather than leaving a gap the merchant cannot explain. */
.sticky-atc__variant:empty {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Price inside the bar                                                 */
/* ------------------------------------------------------------------ */
/* The price snippet wraps by default, which is right everywhere else it
   is used - a product card has the width to spare. In here it does not:
   on a discounted product the current price, the strikethrough and the
   sale badge broke onto three lines, the bar grew to fit them, and the
   Add to cart button - which cannot shrink - ended up sitting on top of
   the price.

   Fixed here rather than in component-price.css, because every other
   surface that renders a price wants the wrapping. */
.sticky-atc__price .price {
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-width: 0;
}

.sticky-atc__price .price__current {
  white-space: nowrap;
  font-size: 15px;
}

/* The strikethrough and the sale badge do not appear in the bar at all, at
   any width. There is only ever room for one price beside a 48px thumbnail
   and a button that cannot shrink, and the two ways of fitting three are
   both worse than dropping two: letting them wrap grew the bar until the
   button sat on top of the price, and forcing one line clipped the compare
   figure mid-number - "Rs. 25,4" reads as a rendering fault, not a saving.

   Nothing is lost. The bar only appears once the real buy box has scrolled
   away, and that buy box states the compare price and the percentage in
   full. This is the follow-me reminder of what you were looking at, not a
   second place to make the offer. */
.sticky-atc__price .price__compare,
.sticky-atc__price .price__badge {
  display: none;
}

@media screen and (max-width: 749px) {
  .sticky-atc {
    padding: var(--space-3);
  }

  .sticky-atc__image {
    width: 40px;
    height: 40px;
  }

  /* The button keeps its full label but gives back the padding, because
     the price losing digits is the worse failure of the two - "Rs. 24,499.C"
     is not a price, and a visitor cannot tell whether it is a rendering
     fault or a number they misread. */
  .sticky-atc__submit {
    padding-inline: var(--space-3);
    font-size: 13px;
  }

  .sticky-atc__inner {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }

  .sticky-atc__link {
    gap: var(--space-3);
  }
}

.sticky-atc__form {
  margin: 0;
  flex: none;
}

.sticky-atc__submit {
  flex: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Desktop: corner card, or full-width bar                              */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 750px) {
  .sticky-atc {
    padding: var(--space-5);
  }

  .sticky-atc--corner .sticky-atc__inner {
    /* Pinned to the trailing edge and only as wide as it needs to be, so it
       covers as little of the page as possible. */
    max-width: 460px;
    margin-inline-start: auto;
  }

  .sticky-atc--bar .sticky-atc__inner {
    max-width: var(--page-width, 1440px);
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Reveal                                                               */
/* ------------------------------------------------------------------ */
/* Slides up from below rather than fading in. A fade makes a fixed element
   look like it was always there and the visitor missed it; travel says it has
   just arrived, which is the truth. */
.sticky-atc {
  translate: 0 100%;
  opacity: 0;
}

.sticky-atc.is-visible {
  translate: 0 0;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .sticky-atc {
    transition: translate 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
  }
}

/* Motion unwanted: it simply appears. [hidden] still controls whether it is
   there at all, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
  .sticky-atc {
    translate: none;
    opacity: 1;
  }
}

/* Hidden while any overlay is open. Adding to cart opens the drawer, and the
   sticky bar carried on sitting behind it offering to add the same product
   again - a second Add to cart competing with the Checkout button the visitor
   was just handed.

   Keyed off the body classes the overlays already set (section-cart.css,
   component-quick-view.css) rather than a new hook, so anything that opens a
   modal gets this for free. */
/* html.overlay-open is the real hook. .cart-drawer-open and .quick-view-open
   were replaced by that single class (overlay-motion.js) - writing the old
   names would have failed silently, which is exactly the sort of thing that
   ships. */
html.overlay-open .sticky-atc {
  opacity: 0;
  pointer-events: none;
  translate: 0 100%;
}