/* =================================================================
   GUARIP CHECKOUT SKIN - STAGE 1: FOUNDATION
   Tokens hand-copied from the main site theme (taylor):
   assets/g-tokens.css. The two themes are NOT linked. If the main
   site's tokens change, this block must be updated BY HAND.
   Scope: everything below (except the token definitions) hangs on
   html[lang="en"][dir="ltr"], same as the existing style layer.
   Safety: nothing here may ever set display, visibility, opacity,
   position, height, max-height, overflow, pointer-events or
   transform on .kjb-embedded-checkout or anything inside it.
   ================================================================= */

/* Brand tokens moved to assets/g-tokens-checkout.css (2026-08-26).
   That file loads BEFORE this one in global_head.liquid and is the
   single authoritative :root definition for this theme. */

/* ---- Stage 1 base layer: page ground and typography ----------------------
   Ported from the Arabic theme with the scope swapped to en/ltr.
   Font, color and background only: no layout.                     */

[lang="en"][dir="ltr"] body {
  background: var(--g-paper);
  color: var(--g-ink);
  font-family: var(--g-font-body-en);
  line-height: var(--g-lh-body);
}

/* The Kajabi site locale is Arabic, so Kajabi's own core.css serves a
   locale-RTL layout rule (main { direction: rtl }) to every page of the
   site, including this English offer; it is what made labels and
   checkboxes right-aligned despite html dir="ltr". Neutralize it here:
   this page is English, left to right. */
[lang="en"][dir="ltr"] main {
  direction: ltr;
}

/* Body face on every form-adjacent element, mirroring the Arabic theme */
[lang="en"][dir="ltr"] body,
[lang="en"][dir="ltr"] .checkout-page,
[lang="en"][dir="ltr"] form,
[lang="en"][dir="ltr"] .form-group,
[lang="en"][dir="ltr"] label,
[lang="en"][dir="ltr"] input,
[lang="en"][dir="ltr"] textarea,
[lang="en"][dir="ltr"] select,
[lang="en"][dir="ltr"] .form-control {
  font-family: var(--g-font-body-en);
}

/* Latin display face for headings: Cormorant Garamond, always
   italic, weight 500 (the main site's Latin display convention,
   replacing the Arabic theme's Reem Kufi 700) */
[lang="en"][dir="ltr"] h1,
[lang="en"][dir="ltr"] h2,
[lang="en"][dir="ltr"] h3,
[lang="en"][dir="ltr"] h4,
[lang="en"][dir="ltr"] h5,
[lang="en"][dir="ltr"] h6 {
  font-family: var(--g-font-display-en);
  font-style: italic;
  font-weight: 500;
  color: var(--g-ink);
}

/* Page-level links: ink text with a quiet brass underline (main site
   recipe adapted for checkout contrast). Links inside the payment
   wrapper are deliberately left alone until Stage 2. */
[lang="en"][dir="ltr"] a:where(:not(.kjb-embedded-checkout a)) {
  color: var(--g-ink);
  text-decoration-color: rgba(184, 152, 96, 0.40);
  text-underline-offset: 3px;
}

[lang="en"][dir="ltr"] a:where(:not(.kjb-embedded-checkout a)):hover {
  text-decoration-color: var(--g-brass);
}

/* =================================================================
   STAGE 2: CHECKOUT PANEL, LIGHT DOM TYPOGRAPHY, PINE VARIABLES
   Everything below is paint-level only (color, background, border,
   radius, shadow, font, letter-spacing), plus padding and
   position: relative on the wrapper itself, which is the single
   sanctioned exception (Stage 5 hangs decorative pseudo-elements
   on it). No rule below may ever set display, visibility, opacity,
   height, max-height, overflow, pointer-events or transform on
   anything inside .kjb-embedded-checkout.
   ================================================================= */

/* The Guarip paper panel (recipe: taylor contact page form panel).
   Wrapper div is theme markup, confirmed. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout {
  position: relative;
  background: var(--g-paper);
  border: 1px solid rgba(184, 152, 96, 0.30);
  border-radius: var(--g-radius-card);
  box-shadow:
    0 1px 2px rgba(44, 42, 38, 0.04),
    0 24px 56px -24px rgba(44, 42, 38, 0.12);
  padding: clamp(16px, 2.2vh, 26px) clamp(18px, 2.4vw, 30px);

  /* The three confirmed Pine variables: the only channel into the
     shadow DOM form internals. Deep green replaces teal for
     accents; ink replaces teal for the grey-dark role. Wins over
     the old block in styles.scss.liquid by source order at equal
     specificity. */
  --pine-color-primary: var(--g-deep);
  --pine-color-brand: var(--g-deep);
  --embedded-checkout-color-grey-dark: var(--g-ink);
}

/* Inner-card neutralization. GUESSED selectors (carried over from
   the old style layer). Background and shadow only: if the guess
   is wrong this is a no-op or a cosmetic double border, never a
   broken field. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout .panel,
[lang="en"][dir="ltr"] .kjb-embedded-checkout .checkout-section {
  background: transparent;
  box-shadow: none;
}

/* Field labels. Main site label recipe: the body face,
   deliberately not the Inter eyebrow face. legend is a guess and
   a no-op if absent. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout label,
[lang="en"][dir="ltr"] .kjb-embedded-checkout legend {
  font-family: var(--g-font-body-en);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(44, 42, 38, 0.78);
}

/* Light DOM inputs, if any respond (Pine shadow components will
   not; they take the variables above instead). Paint plus
   font-size only. 16px stays: anything smaller makes iOS zoom
   the page on focus. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout input[type="text"],
[lang="en"][dir="ltr"] .kjb-embedded-checkout input[type="email"],
[lang="en"][dir="ltr"] .kjb-embedded-checkout input[type="tel"],
[lang="en"][dir="ltr"] .kjb-embedded-checkout textarea,
[lang="en"][dir="ltr"] .kjb-embedded-checkout select,
[lang="en"][dir="ltr"] .kjb-embedded-checkout .form-control {
  background-color: var(--g-paper);
  color: var(--g-ink);
  border: 1px solid rgba(184, 152, 96, 0.42);
  border-radius: var(--g-radius-input);
  font-family: var(--g-font-body-en);
  font-size: 16px;
  transition:
    border-color 240ms cubic-bezier(0.65, 0, 0.35, 1),
    box-shadow   240ms cubic-bezier(0.65, 0, 0.35, 1),
    background-color 240ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Input focus: the site recipe replaces the default outline with
   a brass border plus a soft brass glow, so focus remains clearly
   visible (no a11y regression). */
[lang="en"][dir="ltr"] .kjb-embedded-checkout input[type="text"]:focus,
[lang="en"][dir="ltr"] .kjb-embedded-checkout input[type="email"]:focus,
[lang="en"][dir="ltr"] .kjb-embedded-checkout input[type="tel"]:focus,
[lang="en"][dir="ltr"] .kjb-embedded-checkout textarea:focus,
[lang="en"][dir="ltr"] .kjb-embedded-checkout select:focus,
[lang="en"][dir="ltr"] .kjb-embedded-checkout .form-control:focus {
  outline: none;
  border-color: var(--g-brass);
  box-shadow: 0 0 0 3px rgba(184, 152, 96, 0.18);
  background-color: #ffffff;
}

[lang="en"][dir="ltr"] .kjb-embedded-checkout input::placeholder,
[lang="en"][dir="ltr"] .kjb-embedded-checkout textarea::placeholder {
  color: rgba(44, 42, 38, 0.40);
  font-family: var(--g-font-body-en);
}

/* Terms checkbox (light DOM, confirmed: the localizer rewrites its
   label). Paint-only accent color. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout input[type="checkbox"] {
  accent-color: var(--g-deep);
}

/* Links inside the checkout (terms and privacy, confirmed by the
   localizer). Deep green is contrast-safe on paper and white;
   brass stays in the underline. Completes the Stage 1 exclusion. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout a {
  color: var(--g-deep);
  text-decoration: underline;
  text-decoration-color: rgba(184, 152, 96, 0.40);
  text-underline-offset: 3px;
}

[lang="en"][dir="ltr"] .kjb-embedded-checkout a:hover {
  color: var(--g-ink);
  text-decoration-color: var(--g-brass);
}

/* Small print, including the secure-transactions line. GUESSED
   tags; paint-only, no-op if the line uses another element. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout small,
[lang="en"][dir="ltr"] .kjb-embedded-checkout .small {
  font-family: var(--g-font-body-en);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(44, 42, 38, 0.70);
}

/* =================================================================
   STAGE 2.5: ONE-SCREEN FIT
   Tightens OUR chrome only (header content, section sizer, footer
   content). Designed against a 740px desktop viewport. Deliberately
   contains NO height, max-height, overflow, or display rules: when
   Kajabi's form grows (validation, coupon message, more pricing
   options, order bumps) the page simply gets taller and scrolls
   normally. That is correct behaviour.
   ================================================================= */

/* Section vertical padding. The theme emits
   #section-1744906803654 .sizer { padding: 100px top and bottom }
   on desktop (section_styles.liquid defaults; this section has no
   padding settings of its own). The id selector below must include
   the section id to win at equal source strength. The id comes
   from settings_data content_for_index and is stable unless the
   checkout section is ever deleted and recreated in the editor;
   if that happens, update the id here (or set the section's own
   padding in the Kajabi editor instead). */
[lang="en"][dir="ltr"] #section-1744906803654 .sizer {
  padding-top: 20px;
  padding-bottom: 24px;
}

@media (min-width: 768px) {
  [lang="en"][dir="ltr"] #section-1744906803654 .sizer {
    /* tightened again in Stage 2.6: the two-column composition
       fills the width, so the frame can sit closer */
    padding-top: 20px;
    padding-bottom: 24px;
  }
}

/* Header, shortened (Stage 4 skin brought forward: paper ground
   and a brass hairline under it, both paint-only). The header
   stays hidden on mobile via its existing section setting. */
[lang="en"][dir="ltr"] .header {
  background-color: var(--g-paper);
  border-bottom: 1px solid var(--g-rule);
}

[lang="en"][dir="ltr"] .header__content--desktop {
  padding: 10px 0;
}

/* Footer rules removed in Stage 2.7: the footer section is no longer
   rendered by templates/index.liquid. */

/* =================================================================
   STAGE 2.6: TWO-COLUMN COMPOSITION + ASIDE CONTENT
   Route A: the section's Kajabi-native two-column mode activates
   when a block is added in the editor (blocks column col-7 beside
   checkout column col-5). Everything below styles OUR content in
   the blocks column (the .g-aside markup pasted into a Custom Code
   block) and touches nothing inside .kjb-embedded-checkout.
   ================================================================= */

/* Header hidden on desktop, from code (mirrors the theme's own
   hidden--desktop convention at styles.scss:3802-3805, which is
   all the editor toggle would have added). Purely presentational;
   delete this rule to bring the header back. The brand mark lives
   in the aside column instead. Mobile is already hidden via the
   header's own hidden--mobile setting class. */
@media (min-width: 768px) {
  [lang="en"][dir="ltr"] .header {
    display: none;
  }
}

/* Stage 2.7 composition: the checkout spans the full content width
   (Kajabi's own container-responsive wide mode lays the form out
   horizontally, see the STAGE 2.7 block below) and our aside is a
   slim full-width band beneath it. Below 1023px the stock grid
   makes every column 100% and everything stacks, checkout first. */
@media (min-width: 1023px) {
  [lang="en"][dir="ltr"] .checkout-standalone-column,
  [lang="en"][dir="ltr"] .g-aside-column {
    width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
  }
}

/* Brand mark (Stage 2.9): on desktop it is absolutely positioned in
   the top inline-start corner, out of the normal flow, so it adds
   zero height by itself; the section's sizer top padding (38px, set
   in the STAGE 2.9 block) is its clearance lane, so it never
   overlaps the panel. On small screens it stays in flow, smaller. */
[lang="en"][dir="ltr"] .g-brandline {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

[lang="en"][dir="ltr"] .g-brandline img {
  display: block;
  height: 32px;
  width: auto;
}

@media (min-width: 1023px) {
  [lang="en"][dir="ltr"] #section-1744906803654 .sizer {
    position: relative;
  }

  [lang="en"][dir="ltr"] .g-brandline {
    position: absolute;
    top: 4px;
    inset-inline-start: clamp(16px, 3vw, 50px);
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }
}

/* The .g-latin bidi utility from the Arabic theme is intentionally
   NOT ported: the whole page is Latin LTR, no isolation needed. */

/* The aside band: a slim full-width strip below the checkout.
   Lead (heading + inline reassurance list + support line) beside
   the compact PayMe block. Collapses to a stack below 1023px. */
[lang="en"][dir="ltr"] .g-aside {
  font-family: var(--g-font-body-en);
  color: var(--g-ink);
  text-align: start;
  border-top: 1px solid var(--g-rule);
  padding-block-start: 14px;
}

@media (min-width: 1023px) {
  /* Stage 2.9: the strip collapses to a single line. The lead
     wrapper dissolves (display: contents) so heading, list and
     support line sit in one flex row. If the PayMe block is still
     here (relocation fallback), it wraps to its own full-width row
     below: degrade to the previous band, never a broken area. */
  [lang="en"][dir="ltr"] .g-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 28px;
    row-gap: 8px;
    padding-block-start: 8px;
  }

  [lang="en"][dir="ltr"] .g-aside__lead {
    display: contents;
  }

  [lang="en"][dir="ltr"] .g-aside > .g-aside__payme,
  [lang="en"][dir="ltr"] .g-aside .g-aside__payme {
    flex: 1 0 100%;
  }

  [lang="en"][dir="ltr"] .g-aside__support {
    margin-inline-start: auto;
  }
}

[lang="en"][dir="ltr"] .g-aside__h {
  margin: 0 0 8px;
  font-family: var(--g-font-display-en);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  color: var(--g-ink);
}

@media (min-width: 1023px) {
  [lang="en"][dir="ltr"] .g-aside__h {
    margin: 0;
    font-size: 14px;
  }

  [lang="en"][dir="ltr"] .g-aside__list {
    margin: 0;
  }

  [lang="en"][dir="ltr"] .g-aside__list li {
    font-size: 12.5px;
  }
}

/* Reassurance list, inline with gem bullets */
[lang="en"][dir="ltr"] .g-aside__list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

[lang="en"][dir="ltr"] .g-aside__list li {
  position: relative;
  margin: 0;
  padding-inline-start: 14px;
  font-size: 13px;
  line-height: 1.6;
}

[lang="en"][dir="ltr"] .g-aside__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--g-brass);
  transform: rotate(45deg);
}

/* Support line */
[lang="en"][dir="ltr"] .g-aside__support {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(44, 42, 38, 0.70);
}

[lang="en"][dir="ltr"] .g-aside__support a {
  color: var(--g-deep);
  text-decoration: underline;
  text-decoration-color: rgba(184, 152, 96, 0.40);
  text-underline-offset: 3px;
}

[lang="en"][dir="ltr"] .g-aside__support a:hover {
  color: var(--g-ink);
  text-decoration-color: var(--g-brass);
}

/* PayMe secondary payment option: a compact quiet bordered block in
   the band, clearly an alternative. The 24-hour manual-access
   sentence stays readable body text, never fine print. */
[lang="en"][dir="ltr"] .g-aside__payme {
  margin-block-start: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(184, 152, 96, 0.30);
  border-radius: var(--g-radius-card);
}

@media (min-width: 1023px) {
  /* Button beside the text, vertically centred, filling the band's
     empty middle. Logical grid columns mirror per direction. */
  [lang="en"][dir="ltr"] .g-aside__payme {
    margin-block-start: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 18px;
    align-items: center;
  }

  [lang="en"][dir="ltr"] .g-aside__payme-h,
  [lang="en"][dir="ltr"] .g-aside__payme-p {
    grid-column: 1;
  }

  [lang="en"][dir="ltr"] .g-aside__payme-p {
    margin-bottom: 0;
  }

  [lang="en"][dir="ltr"] .g-aside__payme-cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

[lang="en"][dir="ltr"] .g-aside__payme-h {
  margin: 0 0 4px;
  font-family: var(--g-font-display-en);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--g-ink);
}

[lang="en"][dir="ltr"] .g-aside__payme-p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(44, 42, 38, 0.85);
}

[lang="en"][dir="ltr"] .g-aside__payme-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 18px;
  /* Ink fill, matching .g-modal__primary below and the site's ink button.
     Uses --g-ink and --g-cream-text rather than --g-deep on purpose: both of
     those are remapped by the high-contrast block in site_accessibility,
     while --g-deep is not, so the button now recolours correctly there. */
  background: var(--g-ink);
  color: var(--g-cream-text);
  border: 1px solid var(--g-ink);
  border-radius: var(--g-radius-button);
  box-shadow: 0 6px 18px rgba(44, 42, 38, 0.14);
  font-family: var(--g-font-body-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background var(--g-dur-base) var(--g-ease-out),
    color      var(--g-dur-base) var(--g-ease-out),
    box-shadow var(--g-dur-base) var(--g-ease-out);
}

[lang="en"][dir="ltr"] .g-aside__payme-cta:hover {
  background: #1f1d19;
  color: var(--g-cream-text);
  box-shadow:
    0 10px 26px rgba(44, 42, 38, 0.24),
    inset 0 0 0 1px rgba(184, 152, 96, 0.55);
}

[lang="en"][dir="ltr"] .g-aside__payme-cta:focus-visible {
  outline: 2px solid var(--g-brass);
  outline-offset: 3px;
}

/* LTR: the arrow SVG already points forward, so the Arabic theme's
   rotate(180deg) flip is dropped; only the hover nudge remains. */
[lang="en"][dir="ltr"] .g-aside__payme-cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--g-dur-base) var(--g-ease-out);
}

[lang="en"][dir="ltr"] .g-aside__payme-cta:hover svg {
  transform: translateX(2px);
}

/* Stage 2.9: appearance of the PayMe block once the relocation
   script has moved it inside the white column (below the PayPal
   button). Ivory tint over the white card, brass hairline, ink
   text; the base .g-aside__payme rules still supply border, radius
   and the button-beside-text grid. Secondary treatment: it never
   competes with PayPal. Margins align it with Kajabi's own inner
   padding. If the script falls back, this rule never matches and
   the band styling applies unchanged. */
[lang="en"][dir="ltr"] .kjb-embedded-checkout #g-payme {
  margin: 12px 24px 8px;
  background: rgba(245, 238, 224, 0.45);
}

/* =================================================================
   STAGE 2.7: HORIZONTAL FORM LAYOUT (live-verified on the real DOM)
   Kajabi's embedded checkout is container-responsive: when its
   wrapper is wide it adds `embedded-checkout__body--wide` and lays
   itself out as a grid with named areas ("summary form" over
   "footer footer"), moving pricing into the desktop summary. Since
   the checkout column is now full width and this stylesheet is
   render-blocking, the real page boots straight into that mode.
   Every rule below is scoped to that Kajabi wide-mode class, so if
   Kajabi ever renames it or restructures, everything degrades to
   their own stacked layout: never overlap, never hidden content.
   No display:none, no visibility, no overflow clipping, no fixed
   heights on Kajabi content (single sanctioned exception: the terms
   scrollbox height, which keeps its own internal scroll).
   ================================================================= */

@media (min-width: 1023px) {
  /* Rebalance Kajabi's wide-mode columns (columns only; the named
     areas and child placement stay Kajabi's own). Near-equal split:
     the summary column stacks its two groups full width, so the
     product title renders wide instead of a narrow word tower. */
  [lang="en"][dir="ltr"] .embedded-checkout__body--wide {
    /* summary side (column 1 in the named areas) gets more width so
       the stacked pricing group wraps less tall */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: 24px;
  }

  /* The summary column keeps Kajabi's stock block flow: the pricing
     group stacks above the order-summary group, each a full-width
     band. A Guarip hairline separates the two groups. Paint and
     spacing only, light DOM. */
  [lang="en"][dir="ltr"] .embedded-checkout__body--wide > .embedded-checkout__summary
    .embedded-checkout__section + .embedded-checkout__section {
    border-top: 1px solid var(--g-rule);
    margin-top: 4px;
    padding-top: 8px;
  }

  /* The form column keeps Kajabi's own vertical row flow (heading,
     email, name, terms, agreement, PayPal), which reads as orderly
     full-width rows at this column width. The PayPal button is
     rendered by PayPal at container width, so here it is wide. */

  /* Terms scrollbox: the sanctioned height exception. Tall enough
     to read, keeps its internal scroll, checkbox below untouched. */
  [lang="en"][dir="ltr"] .embedded-checkout__body--wide .service-agreement-text {
    height: 72px;
  }

  /* Light-DOM breathing trims, measured safe on the live page */
  [lang="en"][dir="ltr"] .kjb-embedded-checkout {
    padding: 8px 24px;
  }

  [lang="en"][dir="ltr"] .embedded-checkout__body--wide .embedded-checkout__footer {
    padding: 0;
  }

  [lang="en"][dir="ltr"] .embedded-checkout__body--wide .secure-checkout {
    margin: 4px 0;
  }

  [lang="en"][dir="ltr"] .embedded-checkout__body--wide > .embedded-checkout__summary .embedded-checkout__section {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Our chrome: tighter section frame on desktop (mobile keeps the
     Stage 2.5 values). Top padding 38px is the clearance lane for
     the absolutely positioned brand mark (Stage 2.9). */
  [lang="en"][dir="ltr"] #section-1744906803654 .sizer {
    padding-top: 32px;
    padding-bottom: 6px;
  }
}

/* =================================================================
   PAYME CONSENT MODAL
   Our own markup, outside the checkout wrapper and outside Kajabi's
   form. Tokens only, no new color values; logical properties so the
   same rules serve both directions.
   ================================================================= */

[lang="en"][dir="ltr"] .g-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

[lang="en"][dir="ltr"] .g-modal[hidden] {
  display: none;
}

[lang="en"][dir="ltr"] .g-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--g-ink-a55);
}

[lang="en"][dir="ltr"] .g-modal__panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 3vw, 26px);
  background: var(--g-paper);
  border: 1px solid rgba(184, 152, 96, 0.30);
  border-radius: var(--g-radius-card);
  box-shadow: var(--g-shadow-5);
  text-align: start;
}

[lang="en"][dir="ltr"] .g-modal__close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--g-radius-button);
  color: var(--g-ink);
  cursor: pointer;
}

[lang="en"][dir="ltr"] .g-modal__close svg {
  width: 16px;
  height: 16px;
}

[lang="en"][dir="ltr"] .g-modal__title {
  margin: 0;
  padding-inline-end: 44px;
  font-family: var(--g-font-display-en);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--g-ink);
}

[lang="en"][dir="ltr"] .g-modal__terms {
  max-height: min(38vh, 320px);
  overflow-y: auto;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(184, 152, 96, 0.42);
  border-radius: var(--g-radius-input);
  font-family: var(--g-font-body-en);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(44, 42, 38, 0.85);
}

[lang="en"][dir="ltr"] .g-modal__terms p {
  margin: 0 0 8px;
}

[lang="en"][dir="ltr"] .g-modal__terms p:last-child {
  margin-bottom: 0;
}

[lang="en"][dir="ltr"] .g-modal__terms a {
  color: var(--g-deep);
  text-decoration: underline;
  text-decoration-color: rgba(184, 152, 96, 0.40);
  text-underline-offset: 3px;
}

[lang="en"][dir="ltr"] .g-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  font-family: var(--g-font-body-en);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--g-ink);
  cursor: pointer;
}

[lang="en"][dir="ltr"] .g-modal__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-block-start: 2px;
  accent-color: var(--g-deep);
  cursor: pointer;
}

/* Email field: the existing Guarip field recipe, applied to our own
   input (the checkout recipe is scoped to the wrapper, which our modal
   deliberately sits outside of). */
[lang="en"][dir="ltr"] .g-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[lang="en"][dir="ltr"] .g-modal__label {
  font-family: var(--g-font-body-en);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(44, 42, 38, 0.78);
}

[lang="en"][dir="ltr"] .g-modal__input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  box-sizing: border-box;
  background: var(--g-paper);
  color: var(--g-ink);
  border: 1px solid rgba(184, 152, 96, 0.42);
  border-radius: var(--g-radius-input);
  font-family: var(--g-font-body-en);
  /* 16px stays: anything smaller makes iOS zoom the page on focus */
  font-size: 16px;
  line-height: 1.5;
  transition:
    border-color 240ms cubic-bezier(0.65, 0, 0.35, 1),
    box-shadow   240ms cubic-bezier(0.65, 0, 0.35, 1),
    background-color 240ms cubic-bezier(0.65, 0, 0.35, 1);
}

[lang="en"][dir="ltr"] .g-modal__input:focus {
  outline: none;
  border-color: var(--g-brass);
  box-shadow: 0 0 0 3px rgba(184, 152, 96, 0.18);
  background-color: #ffffff;
}

[lang="en"][dir="ltr"] .g-modal__input[aria-invalid="true"] {
  border-color: var(--g-terracotta);
}

[lang="en"][dir="ltr"] .g-modal__help {
  margin: 0;
  font-family: var(--g-font-body-en);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(44, 42, 38, 0.70);
}

[lang="en"][dir="ltr"] .g-modal__error {
  margin: 0;
  font-family: var(--g-font-body-en);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--g-terracotta);
}

[lang="en"][dir="ltr"] .g-modal__error[hidden] {
  display: none;
}

/* DOM order is primary then secondary so focus reaches the primary
   first; the row is reversed here to keep the visual arrangement. */
[lang="en"][dir="ltr"] .g-modal__actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: 10px;
  justify-content: flex-start;
}

[lang="en"][dir="ltr"] .g-modal__secondary,
[lang="en"][dir="ltr"] .g-modal__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--g-radius-button);
  font-family: var(--g-font-body-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--g-dur-base) var(--g-ease-out),
    color      var(--g-dur-base) var(--g-ease-out),
    box-shadow var(--g-dur-base) var(--g-ease-out);
}

[lang="en"][dir="ltr"] .g-modal__secondary {
  background: transparent;
  color: var(--g-deep);
  border: 1px solid var(--g-brass);
}

[lang="en"][dir="ltr"] .g-modal__secondary:hover {
  background: var(--g-deep);
  color: var(--g-cream-text);
}

[lang="en"][dir="ltr"] .g-modal__primary {
  background: var(--g-ink);
  color: var(--g-cream-text);
  border: 1px solid var(--g-ink);
  box-shadow: 0 6px 18px rgba(44, 42, 38, 0.14);
}

[lang="en"][dir="ltr"] .g-modal__primary:hover {
  background: #1f1d19;
  box-shadow:
    0 10px 26px rgba(44, 42, 38, 0.24),
    inset 0 0 0 1px rgba(184, 152, 96, 0.55);
}

/* Disabled until consent: not merely grey, the anchor has no href so it
   is neither focusable nor activatable. */
[lang="en"][dir="ltr"] .g-modal__primary[aria-disabled="true"] {
  background: var(--g-ink-a16);
  color: var(--g-ink-a40);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

[lang="en"][dir="ltr"] .g-modal__close:focus-visible,
[lang="en"][dir="ltr"] .g-modal__secondary:focus-visible,
[lang="en"][dir="ltr"] .g-modal__primary:focus-visible,
[lang="en"][dir="ltr"] .g-modal__terms:focus-visible,
[lang="en"][dir="ltr"] .g-modal__consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--g-brass);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  /* column (not column-reverse): the DOM order is already primary then
     secondary, so this keeps the primary on top as before. */
  [lang="en"][dir="ltr"] .g-modal__actions {
    flex-direction: column;
  }

  [lang="en"][dir="ltr"] .g-modal__secondary,
  [lang="en"][dir="ltr"] .g-modal__primary {
    width: 100%;
  }
}