/* The Wisp - mobile usability layer.
   Everything here is inside a max-width:767px query so desktop rendering is untouched.
   Findings from the 390px sweep, 18 Aug 2026. */

@media (max-width: 767px) {

  /* 1. Breadcrumbs. On fragrance-oil PDPs the last crumb (the full product name)
        ran ~133px past the viewport inside an overflow:auto wrapper, so it was
        invisible with no scroll affordance. Let it wrap instead. */
  .breakdance nav.woocommerce-breadcrumb,
  body nav.woocommerce-breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline;
    white-space: normal !important;
    row-gap: 2px;
  }
  .breakdance nav.woocommerce-breadcrumb .bde-woo-breadcrumb-item,
  body nav.woocommerce-breadcrumb .bde-woo-breadcrumb-item {
    white-space: normal !important;
  }

  /* 2. Checkboxes and radios measured 9-15px. On checkout a mis-tap picks the
        wrong shipping or payment method, so this is a conversion issue. */
  body.woocommerce-checkout input[type="checkbox"],
  body.woocommerce-checkout input[type="radio"],
  body.woocommerce-account input[type="checkbox"],
  body.woocommerce-account input[type="radio"],
  body.woocommerce-cart input[type="checkbox"],
  body.woocommerce-cart input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    vertical-align: middle;
    accent-color: #1b1815;
  }

  /* 3. Secondary checkout actions were 20-23px tall. */
  body.woocommerce-checkout a.showcoupon,
  body.woocommerce-cart a.showcoupon {
    display: inline-block;
    padding: 11px 0;
  }
  body.woocommerce-checkout form.checkout button.button,
  body.woocommerce-cart form.woocommerce-cart-form button.button {
    min-height: 44px;
  }

  /* 4. Scent Index note-group jump chips were 27px tall. */
  .wisp-index-jump .wisp-index-jump-link,
  body .wisp-index-jump-link {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  /* 5. Footer nav links were 21px tall with a 10px gap between them. */
  footer a.bde-text-link,
  body footer a.bde-text-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* 6. Cart / mini-cart "remove item" crosses were 20x10px - a destructive
        action smaller than a fingertip, and easy to hit by accident. */
  .breakdance a.remove.remove_from_cart_button,
  body a.remove.remove_from_cart_button,
  body .woocommerce a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
  }

  /* The homepage-specific rules that were here targeted post 2, which turned out to
     be the ARCHIVED homepage (private since 18 Aug). The live front page is post 4466.
     They matched nothing and have been removed. Re-do against 4466 when the homepage
     is next reviewed. Backup: mobile.css.bak-deadrules-20260819 */

  /* Homepage hero carousel indicators are 30x5px with no accessible name.
     Give them a real hit area without changing what is drawn. */
  .wisp-reel a[href="#"] { position: relative; }
  .wisp-reel a[href="#"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -12px; bottom: -12px;
  }
}