/* ---- Cart newsletter popup --------------------------------------------
   The cart page's "Subscribe for ₱100 off your first order" dialog and the
   one-line reminder strip a subscriber sees on later visits. Loaded only by
   the cart page (cart.html links it; the Shopify section loads it with
   asset_url), so it is NOT part of styles.css — page-scoped CSS lives in
   its own asset, like page-promo.css (see theme/README.md, Layout contract).
   theme/assets/cart-newsletter.css is a byte-identical copy kept by
   theme/scripts/sync-assets.sh (no images or fonts to rewrite).

   The dialog is a native <dialog> opened with showModal(): the browser
   gives us the top layer (above the sticky header's z-index 30 and the
   toast's 60), the focus trap, Escape and an inert page. Two rules follow
   from that: it is only ever toggled with showModal()/close(), never with
   the hidden attribute (styles.css makes [hidden] display:none !important,
   which would beat the open state), and its UA box is reset below because
   the site's body colours do not reach a dialog.                           */

/* ---- Reminder strip: shown instead of the dialog once subscribed ------- */
.cart-popup-reminder {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.cart-popup-reminder-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  background: var(--surface-card);
  border: 1px dashed var(--matcha-deep);
  border-radius: var(--radius-md);
}
.cart-popup-reminder-text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}
.cart-popup-reminder-code {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--forest);
  -webkit-user-select: all;
  user-select: all;
}
.cart-popup-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- The dialog -------------------------------------------------------- */
/* A browser without <dialog> treats it as an unknown inline element and
   would print the whole form after the footer. */
.cart-popup:not([open]) { display: none; }
.cart-popup {
  /* reset the UA dialog box: border, padding, grey Canvas background */
  border: 0;
  padding: 0;
  margin: auto;
  background: transparent;
  color: var(--forest);
  width: min(100% - 32px, 440px);
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
}
.cart-popup::backdrop { background: rgba(47, 58, 44, 0.55); }
/* Set by cart-newsletter.js while the dialog is open. The lock goes on
   <body>, whose overflow propagates to the viewport while <html> stays
   visible: locking <html> itself would make <body> (overflow-x: hidden in
   styles.css) a scroll container and detach the sticky header from the
   viewport. The script pads <html> by the scrollbar's width while locked,
   so a classic scrollbar vanishing does not shift the page. */
html.cart-popup-open body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .cart-popup[open] { animation: cart-popup-in var(--dur-base) var(--ease-out); }
  @keyframes cart-popup-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
.cart-popup-panel {
  position: relative;
  padding: 30px 28px 26px;
  background: var(--surface-card);   /* white: .eyebrow (matcha-deep) and
                                        .cart-continue (text-muted) only pass
                                        AA on the white card, not cream-deep */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* no box-shadow: the dialog is overflow:auto, so it would be clipped */
}
.cart-popup-eyebrow {
  display: block;
  margin-bottom: 10px;
  padding-right: 44px;   /* clear of the close button */
}
.cart-popup-title {
  margin: 0 0 18px;
  padding-right: 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--forest);
  text-wrap: balance;
}
/* showModal() lands focus here (autofocus + tabindex=-1) so the offer is
   read first and the phone keyboard stays down; no ring on a heading. */
.cart-popup-title:focus { outline: none; }
.cart-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--forest);
  cursor: pointer;
}
.cart-popup-close svg { width: 14px; height: 14px; display: block; }
@media (hover: hover) {
  .cart-popup-close:hover { background: var(--cream-deep); }
}
.cart-popup-close:focus-visible { outline: 2px solid var(--matcha); outline-offset: 2px; }

/* Form state. Margins rather than flex gap, so the always-rendered error
   line takes no room while it is empty (a live region that is display:none
   when its text changes announces nothing). */
.cart-popup-form .field { margin: 0; }
/* :where() keeps this at (0,1,0) so styles.css's .field-input:focus border
   still wins while the field is focused; the dialog's outline then replaces
   the soft box-shadow ring, so there is one focus indicator, not three. */
:where(.cart-popup) .field-input { border-color: var(--stone); }
.cart-popup .field-input:focus { box-shadow: none; }
.cart-popup .field-input:focus-visible { outline: 2px solid var(--matcha-deep); outline-offset: 2px; }
.cart-popup .field-input[aria-invalid="true"] { border-color: #b3261e; }
/* Honeypot: off-screen, never display:none (some bots check), not for people */
.cart-popup-hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cart-popup-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b3261e;
}
.cart-popup-error:not(:empty) { margin-top: 10px; }
.cart-popup-submit {
  margin-top: 14px;
  background: var(--forest);   /* cream on forest 11:1; .btn-primary's cream
                                  on matcha is 3.5:1, under AA at 13px */
  color: var(--cream);
  white-space: normal;
  height: auto;
  min-height: 52px;
  padding: 12px 20px;
  line-height: 1.3;
}
@media (hover: hover) {
  .cart-popup-submit:hover { background: var(--forest-700); }
}
.cart-popup-submit[aria-disabled="true"] { background: var(--forest-700); cursor: progress; }  /* "Sending…" stays 8.8:1 */
.cart-popup-consent {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-body);
}
.cart-popup-consent a { color: var(--matcha-deep); text-underline-offset: 2px; }
.cart-popup-consent a:focus-visible { outline: 2px solid var(--matcha); outline-offset: 2px; border-radius: 2px; }
/* "No thanks" / "Done": .cart-continue's text style on a <button> */
.cart-popup-dismiss {
  width: 100%;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1.5;   /* a <button> does not inherit it; the coarse-pointer
                         overlay in styles.css assumes the <a>'s 16.5px box */
}
.cart-popup-dismiss:focus-visible { outline: 2px solid var(--matcha); outline-offset: 2px; }

/* Success state */
.cart-popup-lede {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
}
.cart-popup-code {
  padding: 22px 16px;
  text-align: center;
  border: 2px dashed var(--matcha-deep);
  border-radius: var(--radius-lg);
  background: var(--cream-deep);
  container-type: inline-size;
}
/* FIRSTORDERPROMO1574 is 19 characters; at 0.12em tracking each one costs
   about 0.72em, so the size is capped at 7% of the box's width (7cqi) and
   the code holds one line down to a 320px phone. clamp() is the fallback
   for browsers without container units. */
.cart-popup-code-value {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 4.2vw, 1.4rem);
  font-size: min(1.4rem, 7cqi);
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--forest);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.cart-popup-code-value:focus-visible { outline: 2px solid var(--matcha-deep); outline-offset: 6px; border-radius: 4px; }
.cart-popup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.cart-popup-actions .cart-popup-submit { margin-top: 0; }
.cart-popup-terms {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-body);
}

@media (max-width: 560px) {
  /* Anchor to the top so the email field and button stay above the
     keyboard once it opens (neither iOS nor Android recentres a dialog). */
  .cart-popup {
    width: calc(100% - 32px);
    margin: max(16px, env(safe-area-inset-top)) auto 16px;
  }
  .cart-popup-panel { padding: 26px 20px 22px; }
  .cart-popup-title { font-size: 22px; }
  .cart-popup-reminder { padding-top: 16px; }   /* sides stay on the 24px gutter */
}