/* "Remind me when back in stock" - button, form and confirmation notice. */

.basildon-bis {
  margin: 1rem 0;
}

/*
 * Auto-injected under the add to cart area, the element is one item in the theme's
 * `.w-hwrapper.valign_middle` row, alongside buttons like "Need installation". That wrapper
 * centres its items, so a taller item - ours is "Out of stock" text stacked above the button -
 * leaves its button sitting well below the sibling ones. Aligning that row to the bottom instead
 * puts the two buttons on the same line.
 *
 * The bottom margin then has to match the 0.3rem the theme puts on `.w-btn-wrapper`, because
 * flex-end aligns MARGIN boxes: without it the sibling button ends up sitting 0.3rem higher.
 */
.w-post-elm.add_to_cart .basildon-bis {
  margin: 0.5rem 0 0.3rem;
}

.w-hwrapper:has(.basildon-bis) {
  align-items: flex-end;
}

/* Opening the form hands it the whole row, so the sibling buttons wrap underneath it. */
.w-hwrapper > .w-post-elm.add_to_cart:has(.basildon-bis__form:not([hidden])) {
  flex: 1 1 100%;
}

.basildon-bis__form {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-content-border, #e1e5e8);
  border-radius: 3px;
  background: var(--color-content-bg-alt, #f2f3f5);
  max-width: 32rem;
}

/*
 * The browser's own `[hidden]` rule is a user agent style, so ANY author rule beats it - and the
 * theme sets `display:inline-block` on `.w-btn`, `flex` on the row, and so on. Every element this
 * feature hides with the `hidden` attribute therefore has to say so explicitly.
 */
.basildon-bis[hidden],
.basildon-bis__toggle[hidden],
.basildon-bis__form[hidden] {
  display: none;
}

.basildon-bis__intro {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.basildon-bis__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

/* Visible to screen readers only. */
.basildon-bis__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.basildon-bis__email {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  /* !important because the theme's `input:not([type=submit])` outranks a single class. */
  background: white !important;
}

.basildon-bis__submit {
  flex: 0 0 auto;
  margin: 0;
}

/* Honeypot - kept out of the layout and out of the accessibility tree. */
.basildon-bis__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.basildon-bis__note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
}

.basildon-bis__msg {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.basildon-bis__msg:empty {
  display: none;
}

.basildon-bis__msg.is_error {
  color: #b7241f;
}

.basildon-bis__msg.is_success {
  color: #3a8b34;
}

.basildon-bis.is_busy .basildon-bis__submit {
  opacity: 0.6;
  pointer-events: none;
}

/* Confirmation after a no-JS signup or an unsubscribe. */
.basildon-bis-notice {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 2rem);
  padding: 0.9rem 1.2rem;
  border-radius: 3px;
  background: #3a8b34;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.basildon-bis-notice.is_error {
  background: #b7241f;
}

.basildon-bis-notice__close {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/*
 * Product summary: show the stock line only when the product is OUT of stock.
 *
 * Impreza only ever adds `out-of-stock` to this element - there is no `in-stock` class - so the
 * in-stock case has to be matched with `:not(.out-of-stock)`. The `extra` class is the el_class on
 * the stock element in the product content template, and it scopes this to the summary: the
 * related-products carousel further down the same page renders its own `product_field stock`
 * elements that must keep their text.
 */
.single-product .w-post-elm.product_field.stock.extra:not(.out-of-stock) {
  display: none;
}

/* Listing button
   ========================================================================== */

/*
 * The button replaces WooCommerce's loop "Read more" link, so it arrives already carrying the
 * `button` class and inherits the grid layout's own sizing, colours and position - in "ACR
 * Products Grid" that is a full width bar pinned to the bottom of the tile.
 */

/*
 * That bar sits UNDER the tile's content wrapper, which is `z-index: 1` with a solid background
 * and whose bottom edge overlaps it. "Add to cart" gets away with it because one line of text
 * makes a 46px button and the overlap lands in its top padding; anything taller has its first
 * line painted over. The label is kept to one line for exactly that reason (see
 * basildon_bis_loop_button_label), but a narrow column or a translation can still wrap it, so
 * lift the button clear of the wrapper rather than trusting the text to stay short.
 */
.w-btn-wrapper:has(> .basildon-bis-loop__btn) {
  z-index: 2;
}

.basildon-bis-loop__btn {
  white-space: normal;
  line-height: 1.3;
}

/*
 * That bar is `opacity: 0` until the tile is hovered, which is a fine way to keep an "Add to cart"
 * out of the way - the product page has one too. The waiting list has no such second chance: this
 * button is the only thing that says a reminder is on offer. So on devices with no hover to give,
 * it stays visible. Desktop keeps the reveal exactly as the grid layout defines it.
 *
 * us-core puts `no-touch` on <html> for everything else, so this matches touch devices only.
 */
html:not(.no-touch) .w-btn-wrapper:has(> .basildon-bis-loop__btn) {
  opacity: 1;
}

/* Listing modal
   ========================================================================== */

.basildon-bis-modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* See the note above on `[hidden]` - any author rule outranks the user agent's. */
.basildon-bis-modal[hidden] {
  display: none;
}

/* Stop the listing scrolling away behind the dialog. */
body.basildon-bis-modal_open {
  overflow: hidden;
}

.basildon-bis-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.basildon-bis-modal__box {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.8rem;
  border-radius: 3px;
  background: var(--color-content-bg, #ffffff);
  color: var(--color-content-text, inherit);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.basildon-bis-modal__close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  padding: 0.2rem 0.4rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}

.basildon-bis-modal__close:hover,
.basildon-bis-modal__close:focus {
  opacity: 1;
}

.basildon-bis-modal__title {
  margin: 0;
  padding-right: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.basildon-bis-modal__product {
  margin: 0.4rem 0 0;
  font-weight: 700;
}

.basildon-bis-modal__product:empty {
  display: none;
}

/* The dialog is already a panel; the form inside it does not need to be a second one. */
.basildon-bis-modal .basildon-bis {
  margin: 0;
}

.basildon-bis-modal .basildon-bis__form {
  margin-top: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  max-width: none;
}