/* Glo Little Luxury — bag, checkout, order confirmed and sign in, v2 (duplicate).
 *
 * Loaded with ?design=v2 on those pages, after their live stylesheets and
 * glo-v2-base.css. Scoped to body.glo-commerce-v2 (plus glo-cart-v2,
 * glo-checkout-v2, glo-account-v2). Bag and checkout keep their live markup,
 * because WooCommerce redraws parts of both over AJAX; everything here is CSS.
 * The fixes come from the phone screenshots of 17 Sep. Written up in
 * STYLE-GUIDE.md.
 */

/* ==========================================================================
   1. Progress steps (bag, checkout, order confirmed)
   Left as they are. An earlier version of this file hid the label of every
   step that was not the current one, so the row fitted one line on a phone.
   On the confirmation page no step is "current", so "Bag" and
   "Delivery & payment" vanished and the page stopped showing the journey
   (owner, 18 Sep). All three labels stay; the row wraps on narrow phones, and
   the wrapped line gets a little breathing room.
   ========================================================================== */
@media (max-width: 600px) {
  .glo-commerce-v2 .glo-steps { row-gap: 6px; }
}

/* The band lost its top and bottom padding on phones: glo-responsive.css sets
   `.glo-wrap { padding: 0 16px }` as a shorthand, later in the cascade than
   `.glo-commerce-head__inner`, so the title sat against the header and the
   second row of steps ran into the card below it (owner, 18 Sep: "the 1, 2, 3
   got clipped"). */
@media (max-width: 720px) {
  .glo-commerce-v2 .glo-commerce-head__inner.glo-wrap { padding-top: 24px; padding-bottom: 24px; }
}
.glo-commerce-v2 .glo-checkoutwrap,
.glo-commerce-v2 .glo-cartwrap,
.glo-commerce-v2 .glo-thanks { padding-top: clamp(16px, 3vw, 28px); }

/* ==========================================================================
   2. Bag items: the quantity row (audit #1, critical)
   At 390px the controls sat in the 234px text column: a 180px stepper beside
   a 67px line total, so "Remove" landed on the quantity and the total on the
   + button. The parent theme also widened the stepper buttons to 56px and the
   input to 50px tall. On phones the controls take the full item width: the
   stepper on the left, the line total on the right, Remove under the total.
   ========================================================================== */
.glo-cart-v2 .glo-qty { height: 44px; padding: 0 2px; gap: 0; }
.glo-cart-v2 .glo-qty .glo-qty__btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.glo-cart-v2 .glo-qty .quantity { display: flex; align-items: center; height: 40px; }
.glo-cart-v2 .glo-qty input.qty {
  width: 36px;
  min-width: 36px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  line-height: 40px;
  font-variant-numeric: tabular-nums;
}
.glo-cart-v2 .glo-bag__line { align-items: flex-end; }

@media (max-width: 600px) {
  .glo-cart-v2 .glo-bag__controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }
  .glo-cart-v2 .glo-bag__line {
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    gap: 0;
    min-width: 0;
  }
  .glo-cart-v2 .glo-bag__line .product-remove { line-height: 1; }
  .woocommerce .glo-cart-v2 .glo-bag a.remove.glo-bag__remove,
  .glo-cart-v2 .glo-bag a.glo-bag__remove { min-height: 32px; font-size: 13px; color: var(--glo-ink-soft) !important; }
}

/* Item data such as "Size: 400 ml" under the product name. */
.glo-cart-v2 .glo-bag__info dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 2px 0 6px;
  font-size: 13px;
  color: var(--glo-ink-soft);
}
.glo-cart-v2 .glo-bag__info dl.variation dt { font-weight: 500; margin: 0; }
.glo-cart-v2 .glo-bag__info dl.variation dd { margin: 0; }
.glo-cart-v2 .glo-bag__info dl.variation dd p { margin: 0; }

/* ==========================================================================
   3. "Added to your bag" notice (audit #7)
   WooCommerce adds a block-level "Continue shopping" button that points back
   to the bag itself: 48px of empty height, and the same link again under the
   items. On the bag page it goes.
   ========================================================================== */
.glo-cart-v2 .wc-block-components-notice-banner .wc-forward { display: none; }
.glo-cart-v2 .wc-block-components-notice-banner {
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--glo-radius-md);
}
.glo-cart-v2 .wc-block-components-notice-banner__content { font-size: 14px; line-height: 1.45; }

/* ==========================================================================
   4. Order summary (audit #11)
   "Subtotal (1 item)" wrapped under a 50/50 table split.
   ========================================================================== */
.glo-commerce-v2 .glo-bag__totals th,
.glo-commerce-v2 .glo-summary__totals th { white-space: nowrap; }
.glo-commerce-v2 .glo-bag__totals td,
.glo-commerce-v2 .glo-summary__totals td { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5. Reassurance lists (audit #6)
   Bag: .glo-theme ul { margin: 0 } removed the 20px gap under the summary
   card, and the text sat 4px in from the card edge instead of lining up with
   the card's content. Checkout: the row sat directly under the form.
   ========================================================================== */
.glo-cart-v2 ul.glo-bag__trust {
  margin: 28px 0 0;
  padding: 0 26px;
  gap: 16px;
}
@media (max-width: 600px) {
  .glo-cart-v2 ul.glo-bag__trust { margin-top: 24px; padding: 0 18px; }
}
.glo-cart-v2 .glo-bag__trust-body { color: var(--glo-ink-soft); }

.glo-checkout-v2 .glo-trustwrap { padding-top: clamp(32px, 5vw, 56px); }

/* ==========================================================================
   6. Checkout: payment and terms (audit #12, #13)
   Cash on delivery is the only method, and the note under Place order already
   says how paying works, so WooCommerce's "Pay with cash upon delivery." box
   under the heading repeats it. The terms line wrapped its link away from the
   checkbox.
   ========================================================================== */
.glo-checkout-v2 #payment .wc_payment_methods:not(:has(li + li)) .payment_box { display: none !important; }

.glo-checkout-v2 .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { margin: 12px 0 0; }
.glo-checkout-v2 .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--glo-ink-mid);
}
.glo-checkout-v2 .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}
.glo-checkout-v2 .woocommerce-terms-and-conditions-checkbox-text a,
.glo-checkout-v2 .woocommerce-terms-and-conditions-checkbox-text + .required { white-space: nowrap; }
.glo-checkout-v2 .woocommerce-privacy-policy-text { font-size: 13px; color: var(--glo-ink-soft); }

/* ==========================================================================
   7. Order confirmed: "What happens next" (audit #14)
   The number circles sat above the first line of each step.
   ========================================================================== */
.glo-checkout-v2 .glo-next li { align-items: start; }
.glo-checkout-v2 .glo-next__num { margin-top: 0; }
.glo-checkout-v2 .glo-next__title {
  display: flex;
  align-items: center;
  min-height: 28px;
  line-height: 1.3;
}

/* ==========================================================================
   8. Sign in: "Create account" beside "Forgot password?" (owner, 17 Sep)
   The account form moves to its own view (?action=register) with the same
   one-card layout, and each view links to the other.
   ========================================================================== */
.glo-account-v2 .glo-login--v2 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.glo-account-v2 .glo-login__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.glo-account-v2 .glo-login__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; }
.glo-account-v2 .glo-login__links a,
.glo-account-v2 .glo-login__switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--glo-teal-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.glo-account-v2 .glo-login__links .glo-login__new { color: var(--glo-ink-mid); font-weight: 500; }
.glo-account-v2 .glo-login__switch { margin: 16px 0 0; font-size: 14px; color: var(--glo-ink-mid); }
.glo-account-v2 .glo-acard__title--gap { margin-bottom: 20px; }
@media (max-width: 600px) {
  .glo-account-v2 .glo-login__row { align-items: flex-start; flex-direction: column; gap: 0; }
}

/* ==========================================================================
   9. States
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .glo-commerce-v2 * { transition: none !important; }
}

/* ==========================================================================
   10. Phone: touch targets and the type floor on the commerce surfaces
   Measured at 390px on the bag with two items, the checkout and My Account.
   These three were built behind ?design=v2 and never audited once v2 became
   the design everyone sees.

   The stepper was pinned to 40px in section 2 above, when the controls were
   still sharing a 234px text column and 56px buttons were colliding with the
   line total. That section also gave the controls the full item width on
   phones, which left room the 40px was no longer paying for: 44 + 36 + 44 is
   124px in a 358px row. Remove is a destructive control and was 36px tall.

   The type floor: the page sub-line is a sentence a shopper reads, so it
   takes 16px. The notes beside the meter, the coupon and the pay line are
   annotations rather than prose, so they take 14px, which is the floor below
   which text stops being comfortable rather than merely small.
   ========================================================================== */
@media (max-width: 600px) {
  .glo-cart-v2 .glo-qty { height: 48px; }
  .glo-cart-v2 .glo-qty .glo-qty__btn,
  .glo-cart-v2 .glo-qty .glo-qty__btn:is(a, button) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .glo-cart-v2 .glo-qty .quantity { height: 44px; }

  /* (0,4,1), matching glo-cart.css's own `.woocommerce .glo-bag a.remove...`
     and winning on order. `.woocommerce .glo-v2 ...` does not work here: both
     classes are on <body>, so nothing is a descendant of anything. */
  .glo-v2 .glo-bag a.remove.glo-bag__remove,
  .glo-v2 .glo-bag a.glo-bag__remove {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
  }

  .glo-v2 .glo-commerce-head__sub { font-size: 16px; }
  .glo-v2 .glo-meter__text,
  .glo-v2 .glo-bag__note,
  .glo-v2 .glo-bag__coupon-note,
  .glo-v2 .glo-panel__sub,
  .glo-v2 .glo-summary__paynote,
  .glo-v2 .glo-acard__muted,
  /* Two of WooCommerce's own strings, both read at the moment of deciding:
     what happens to your data, and the terms you are agreeing to. The terms
     row is the label of a required checkbox, which makes 12.5px the smallest
     type on the page carrying the most consequence. */
  .glo-v2 .woocommerce-privacy-policy-text p,
  .glo-v2 .woocommerce-terms-and-conditions-wrapper .form-row,
  .glo-v2 .woocommerce-terms-and-conditions-wrapper .form-row label,
  /* "Delivery note (optional)" came through WooCommerce's additional-fields
     wrapper rather than the checkout's own field list, so it missed the label
     sizing every other field on the page gets and sat at 12.5px. A form label
     is not fine print. */
  .glo-v2 .form-row.notes label { font-size: 14px; }
}