/* ---------------------------------------------------------------------------
   The Spirit Shoppe – custom fixes
   This file exists because logs showed it was being requested but 404'ing:
   /wp-content/themes/fastest-store/custom-fixes.css
   --------------------------------------------------------------------------- */

/* Scope to WPMobile.App:
   WPMobile injects: <span class="wpappninja wpmobileapp" style="display:none"></span> */
body:has(.wpappninja.wpmobileapp) {
  -webkit-text-size-adjust: 100%;
}

/* WooCommerce Blocks cart quantity selector (app-only):
   Fix "+" clipping in iOS WebView by forcing a stable square button box */
body:has(.wpappninja.wpmobileapp) .wc-block-components-quantity-selector__button {
  min-width: 44px;
  width: 44px;
  height: 44px;

  padding: 0;
  line-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
  text-indent: 0;
  letter-spacing: 0;

  font-family: inherit;
  font-weight: 600;
  font-size: 20px;

  -webkit-font-smoothing: antialiased;
}

/* Nudge the plus slightly left to avoid right-edge clipping in WebView */
body:has(.wpappninja.wpmobileapp) .wc-block-components-quantity-selector__button--plus {
  position: relative;
  left: -1px;
}

/* Classic WooCommerce quantity buttons fallback */
body:has(.wpappninja.wpmobileapp) .quantity .plus,
body:has(.wpappninja.wpmobileapp) .quantity .minus {
  min-width: 44px;
  width: 44px;
  height: 44px;

  padding: 0;
  line-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
  font-family: inherit;
  font-weight: 600;
  font-size: 20px;
}

/* Neuter any leftover canary styling in the app */
body:has(.wpappninja.wpmobileapp) .tss-canary,
body:has(.wpappninja.wpmobileapp) .canary,
body:has(.wpappninja.wpmobileapp) [data-canary="1"] {
  background: unset !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
   WKWebView (WPMobile.app) — clamp quantity pill so + can't overflow
   (Desktop doesn’t reproduce; this is a WebKit-in-app layout guard.)
   ------------------------------------------------------------------ */

/* Scope to app: prefer :has() when available, plus a few fallbacks */
@supports selector(:has(*)) {
  body:has(.wpappninja.wpmobileapp) .wc-block-components-quantity-selector {
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;        /* KEY: prevents right-edge bleed */
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  body:has(.wpappninja.wpmobileapp) .wc-block-components-quantity-selector__button {
    flex: 0 0 44px !important;          /* true fixed-width button */
    width: 44px !important;
    min-width: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;        /* avoid rounding math weirdness */
  }

  body:has(.wpappninja.wpmobileapp) .wc-block-components-quantity-selector__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;            /* allow shrink; prevents pushing + off */
  }

  body:has(.wpappninja.wpmobileapp) .wc-block-components-quantity-selector__button--plus {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
}

/* Fallback scopes if :has() is not applied for any reason */
html.wpappninja .wc-block-components-quantity-selector,
body.wpappninja .wc-block-components-quantity-selector {
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
html.wpappninja .wc-block-components-quantity-selector__button,
body.wpappninja .wc-block-components-quantity-selector__button {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
html.wpappninja .wc-block-components-quantity-selector__input,
body.wpappninja .wc-block-components-quantity-selector__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ==================================================================
   WPMobile.app (WKWebView) — Quantity pill overflow fix (v2)
   Scope to body classes that ACTUALLY exist:
   body.theme-wpappninja.wpmobileapp.wpappninja ...
   ================================================================== */

/* Prefer the most specific app scope first */
body.wpmobileapp.wpappninja .wc-block-components-quantity-selector,
body.wpmobileapp.wpapp-ios .wc-block-components-quantity-selector,
body.theme-wpappninja .wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: stretch !important;

  /* Hard clamp: prevents + from bleeding outside rounded pill in WKWebView */
  overflow: hidden !important;
  border-radius: 9999px !important;

  box-sizing: border-box !important;
  max-width: 100% !important;

  /* iOS/WebKit clipping reliability */
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  transform: translateZ(0) !important;
}

/* Buttons: fixed width, no weird margins/padding */
body.wpmobileapp.wpappninja .wc-block-components-quantity-selector__button,
body.wpmobileapp.wpapp-ios .wc-block-components-quantity-selector__button,
body.theme-wpappninja .wc-block-components-quantity-selector__button {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important; /* extra safety if icon itself overflows */
}

/* Input: allow shrink so it can’t push + out */
body.wpmobileapp.wpappninja .wc-block-components-quantity-selector__input,
body.wpmobileapp.wpapp-ios .wc-block-components-quantity-selector__input,
body.theme-wpappninja .wc-block-components-quantity-selector__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* If the plus/minus icons are SVGs, keep them centered and bounded */
body.wpmobileapp.wpappninja .wc-block-components-quantity-selector__button svg,
body.wpmobileapp.wpapp-ios .wc-block-components-quantity-selector__button svg,
body.theme-wpappninja .wc-block-components-quantity-selector__button svg {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ==================================================================
   WKWebView / WPMobile.App — force quantity “pill” to keep + inside
   We cannot scrape the injected markup server-side (rendered by JS),
   so we target robust patterns inside the cart page in-app.
   ================================================================== */

body.wpmobileapp.wpappninja.woocommerce-cart,
body.theme-wpappninja.wpmobileapp.woocommerce-cart {

  /* Make sizing predictable in the app WebView */
  --tss-qty-btn: 44px;
}

/* Guard rail: any likely quantity/stepper wrapper cannot overflow */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-cart-item__quantity,
  .wc-block-components-quantity-selector,
  .wc-block-components-quantity-selector__controls,
  .quantity,
  [class*="quantity"][class*="selector"],
  [class*="quantity"][class*="stepper"],
  [class*="stepper"]
) {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* The pill/container: force flex and clamp overflow */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector,
  [class*="quantity"][class*="selector"],
  [class*="quantity"][class*="stepper"]
) {
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;        /* KEY: stops right-edge bleed */
  border-radius: 999px !important;    /* keep “pill” shape */
  min-width: 0 !important;
}

/* Buttons: fixed width, never translate/offset out of pill */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector__button,
  .quantity button,
  button[class*="quantity"],
  button[aria-label*="Increase"],
  button[aria-label*="Decrease"]
) {
  flex: 0 0 var(--tss-qty-btn) !important;
  width: var(--tss-qty-btn) !important;
  min-width: var(--tss-qty-btn) !important;
  max-width: var(--tss-qty-btn) !important;

  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* If any implementation absolutely positions the +, pin it inside */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector__button--plus,
  button[aria-label*="Increase"]
) {
  right: 0 !important;
  inset-inline-end: 0 !important;
}

/* Input: allow shrinking so it can’t push the + out */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector__input,
  input[type="number"],
  input.input-text.qty
) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* Last resort: if some inner element is wider, clip it */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-cart-item__quantity,
  .wc-block-components-quantity-selector
) * {
  box-sizing: border-box !important;
}


/* ================================================================
   HARD FORCE (WPMobile.app / WKWebView)
   If the + is still bleeding, lock the qty control into a 3-col grid
   so the + cannot overflow regardless of WebKit layout quirks.
   ================================================================ */

body.wpmobileapp.wpappninja.woocommerce-cart,
body.theme-wpappninja.wpmobileapp.woocommerce-cart {
  --tss-qty-btn: 44px;
  --tss-qty-mid: 56px;   /* middle input area; increase if you want */
}

/* Target the WC Blocks quantity selector (and robust pattern fallbacks) */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector,
  [class*="quantity"][class*="selector"],
  [class*="quantity"][class*="stepper"]
) {
  display: grid !important;
  grid-template-columns: var(--tss-qty-btn) minmax(var(--tss-qty-mid), 1fr) var(--tss-qty-btn) !important;
  align-items: stretch !important;

  overflow: hidden !important;        /* clamp anything trying to spill */
  box-sizing: border-box !important;

  width: calc(var(--tss-qty-btn) * 2 + var(--tss-qty-mid)) !important; /* fixed, since you have space */
  max-width: 100% !important;

  border-radius: 999px !important;
}

/* Buttons occupy their grid cells exactly */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector__button,
  button[aria-label*="Increase"],
  button[aria-label*="Decrease"]
) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  box-sizing: border-box !important;
  line-height: var(--tss-qty-btn) !important;
}

/* Middle input stays inside and can shrink */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector__input,
  input[type="number"],
  input.input-text.qty
) {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* If icons/pseudo-elements are the thing bleeding, keep them boxed */
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector__button,
  button[aria-label*="Increase"],
  button[aria-label*="Decrease"]
)::before,
body.wpmobileapp.wpappninja.woocommerce-cart :is(
  .wc-block-components-quantity-selector__button,
  button[aria-label*="Increase"],
  button[aria-label*="Decrease"]
)::after {
  max-width: 100% !important;
}


/* ================================================================
   Basket (/basket/) — Coupon section styling (DESKTOP + APP)
   Scope: cart page only
   ================================================================ */

body.woocommerce-cart {
  --tss-row-h: 44px;
  --tss-radius: 999px;
  --tss-border: rgba(0,0,0,.18);
  --tss-gap: 10px;
}

/* Wrapper spacing */
body.woocommerce-cart .wc-block-components-totals-coupon {
  margin-top: 12px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Toggle ("Add a coupon") */
body.woocommerce-cart .wc-block-components-totals-coupon__button,
body.woocommerce-cart .wc-block-components-totals-coupon__link {
  min-height: var(--tss-row-h) !important;
  height: var(--tss-row-h) !important;
  border-radius: var(--tss-radius) !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: var(--tss-row-h) !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Form layout */
body.woocommerce-cart .wc-block-components-totals-coupon__content {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.woocommerce-cart .wc-block-components-totals-coupon__form {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--tss-gap) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Input wrapper */
body.woocommerce-cart .wc-block-components-text-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Input */
body.woocommerce-cart .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-text-input__input {
  height: var(--tss-row-h) !important;
  min-height: var(--tss-row-h) !important;
  border-radius: var(--tss-radius) !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--tss-border) !important;
  outline: none !important;
}

/* Apply button (be conservative: only within coupon form) */
body.woocommerce-cart .wc-block-components-totals-coupon__form button,
body.woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-button,
body.woocommerce-cart .wc-block-components-totals-coupon__form .components-button {
  height: var(--tss-row-h) !important;
  min-height: var(--tss-row-h) !important;
  border-radius: var(--tss-radius) !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Prevent horizontal spill (helps iOS WebView and narrow desktops) */
body.woocommerce-cart .wc-block-components-totals-coupon,
body.woocommerce-cart .wc-block-components-totals-coupon__content,
body.woocommerce-cart .wc-block-components-totals-coupon__form {
  overflow-x: hidden !important;
}

/* Notices a bit softer */
body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-cart .wc-block-components-validation-error {
  border-radius: 14px !important;
}


/* ================================================================
   Basket coupon refinements
   - Put "Enter code" ABOVE the field (disable floating label)
   - Make Apply button match pill styling/height
   ================================================================ */

body.woocommerce-cart {
  --tss-row-h: 44px;
  --tss-radius: 999px;
  --tss-border: rgba(0,0,0,.18);
  --tss-accent: #7a1240; /* matches the site’s maroon header */
}

/* Align the Apply button with the bottom of the input (since label is above) */
body.woocommerce-cart .wc-block-components-totals-coupon__form {
  align-items: flex-end !important;
}

/* Make the coupon input stack as: label (top) + input (bottom) */
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-text-input {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Force label above the field (disable floating/absolute label behaviour) */
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-text-input__label,
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-text-input label {
  position: static !important;
  transform: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Coupon input (keep pill) */
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-text-input__input {
  height: var(--tss-row-h) !important;
  min-height: var(--tss-row-h) !important;
  border-radius: var(--tss-radius) !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid var(--tss-border) !important;
}

/* Apply button — match height + pill look */
body.woocommerce-cart .wc-block-components-totals-coupon__form button,
body.woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-button,
body.woocommerce-cart .wc-block-components-totals-coupon__form .components-button,
body.woocommerce-cart .wc-block-components-totals-coupon__content button,
body.woocommerce-cart .wc-block-components-totals-coupon__content .wc-block-components-button,
body.woocommerce-cart .wc-block-components-totals-coupon__content .components-button {
  height: var(--tss-row-h) !important;
  min-height: var(--tss-row-h) !important;
  line-height: var(--tss-row-h) !important;
  border-radius: var(--tss-radius) !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;

  background: var(--tss-accent) !important;
  color: #fff !important;
  border: 1px solid var(--tss-accent) !important;
}

/* Nicer focus without changing layout */
body.woocommerce-cart .wc-block-components-totals-coupon__form button:focus,
body.woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-button:focus,
body.woocommerce-cart .wc-block-components-totals-coupon__form .components-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(122,18,64,.25) !important;
}

/* TSS_COUPON_STYLES_BEGIN */
/* Mobile/app-webview: keep Coupon input + Apply button visible (no horizontal clip) */
@media (max-width: 782px) {
  .woocommerce-cart .wc-block-components-totals-coupon,
  .woocommerce-checkout .wc-block-components-totals-coupon {
    overflow: visible !important;
  }

  .wc-block-components-totals-coupon__content,
  .wc-block-components-totals-coupon__form {
    overflow: visible !important;
  }

  .wc-block-components-totals-coupon__form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .wc-block-components-totals-coupon__input,
  .wc-block-components-totals-coupon__form .wc-block-components-text-input {
    flex: 1 1 180px !important;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  .wc-block-components-totals-coupon__button,
  .wc-block-components-totals-coupon__form .wc-block-components-button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
}

/* Very narrow screens: let the button drop to its own line */
@media (max-width: 420px) {
  .wc-block-components-totals-coupon__button,
  .wc-block-components-totals-coupon__form .wc-block-components-button {
    width: 100% !important;
  }
}
/* TSS_COUPON_STYLES_END */



/* Woo Blocks coupon row: kill inner scroll + prevent flex overflow */
#wc-block-components-totals-coupon__form{
  overflow: visible !important; /* removes the scroll behaviour */
}

#wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input{
  flex: 1 1 auto;
  min-width: 0 !important; /* critical: allows input to shrink instead of forcing overflow/scroll */
}

#wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* TSS_FIX_RESTORE_AWS_BUTTON */
#global-aws-search .aws-search-btn,
#global-aws-search .aws-form-btn,
#global-aws-search button[type="submit"],
#global-aws-search input[type="submit"]{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}