/* mobile.css — touch and small-screen refinements.
 *
 * Enqueued LAST so it wins on equal specificity without needing !important
 * everywhere. Everything here is scoped inside a media query, so desktop is
 * untouched by design rather than by accident.
 *
 * Two rules drive most of what follows:
 *
 *   44px minimum touch target. Apple's HIG and Material both land near this,
 *   and an audit of the live site found the size selector at 21px, the COA
 *   link at 18px, and every footer link at 18px.
 *
 *   16px minimum font on form controls. iOS Safari zooms the viewport when a
 *   focused input is smaller than that, which throws the layout sideways
 *   mid-checkout. The size dropdown and quantity box were both at 14px.
 */

@media (max-width: 860px) {

  /* ── Form controls ─────────────────────────────────────────────────────
     The variation dropdown is the control between a visitor and a purchase,
     and it was the worst offender on the site: 21px tall, no padding, and a
     14px font that triggered zoom-on-focus.                                */
  .woocommerce div.product form.cart .variations select,
  .woocommerce-page div.product form.cart .variations select,
  .hlc-page-bg select,
  select.qty {
    min-height: 48px;
    font-size: 16px;                /* below this, iOS zooms on focus */
    font-family: var(--font-body);
    padding: 10px 38px 10px 14px;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid #ddd9cc;
    border-radius: 3px;
    color: var(--color-black);
    line-height: 1.3;

    /* A native select on iOS ignores most styling but keeps the arrow. Drawing
       our own keeps the control consistent once the border and padding land. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
  }

  .woocommerce div.product form.cart .variations select:focus-visible,
  .hlc-page-bg select:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
  }

  /* Each attribute row gets room to breathe; the label was colliding with the
     control on narrow screens. */
  .woocommerce div.product form.cart .variations td,
  .woocommerce div.product form.cart .variations th {
    display: block;
    width: 100%;
    padding: 0 0 6px;
    text-align: left;
  }
  .woocommerce div.product form.cart .variations tr + tr { margin-top: 12px; }

  /* "Clear options" was a 26px target sitting immediately under the select. */
  .woocommerce div.product form.cart .reset_variations {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: 12px;
  }

  /* Quantity box: 14px font meant zoom-on-focus, same as the select. */
  .woocommerce .quantity .qty,
  input[type="number"].qty {
    min-height: 48px;
    font-size: 16px;
    width: 72px;
    text-align: center;
    border-radius: 3px;
  }

  /* ── Primary purchase action ───────────────────────────────────────────
     The add-to-cart button was 163px wide in a 375px viewport. On mobile the
     primary action takes the full remaining width beside the quantity box.  */
  .woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }
  .woocommerce div.product form.cart .variations,
  .woocommerce div.product form.cart .woocommerce-variation-description,
  .woocommerce div.product form.cart .woocommerce-variation-price,
  .woocommerce div.product form.cart .woocommerce-variation-availability {
    flex: 1 0 100%;
  }
  .woocommerce div.product form.cart .quantity { flex: 0 0 auto; }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-height: 48px;
    min-width: 0;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding-inline: 16px;
  }

  /* ── Certificates ──────────────────────────────────────────────────────
     The COA link is the trust asset that differentiates this store, and it
     was an 18px tap target.                                                */
  .hlc-coa-view,
  .hlc-coa-link,
  .hlc-batch-coa-link,
  .hlc-lib-coa {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 2px;
  }

  /* ── Header icons ──────────────────────────────────────────────────────
     38px circles read fine but sit under the touch minimum. The circle stays
     38px visually; the hit area is extended past it so the design is
     unchanged while the target is not.                                      */
  .hlc-nav .hlc-icon-btn,
  .hlc-nav .hlc-cart-btn {
    position: relative;
  }
  .hlc-nav .hlc-icon-btn::after,
  .hlc-nav .hlc-cart-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* ── Search overlay chips ──────────────────────────────────────────────  */
  .hlc-search-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Footer links ──────────────────────────────────────────────────────
     Until the drawer shipped these were the only navigation on mobile, and
     every one of them was an 18px target stacked tightly against the next.  */
  .hlc-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hlc-footer-disclaimer,
  .hlc-footer-legal { min-height: 0; }

  /* ── Product cards ─────────────────────────────────────────────────────
     Title links were 27px. Making the title a block target also widens the
     tap area to the full card width.                                       */
  .hlc-product-card .woocommerce-loop-product__title,
  .hlc-product-card h2 a,
  ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ── Category filter pills ─────────────────────────────────────────────  */
  .hlc-filter-btn,
  .hlc-cat-filter button,
  .hlc-cat-filter a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Very narrow phones: the size dropdown and quantity box should not compete
   for the same row. */
@media (max-width: 400px) {
  .woocommerce div.product form.cart .quantity,
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 0 100%;
  }
  .woocommerce .quantity .qty,
  input[type="number"].qty { width: 100%; }
}