/* Triple Twist booking portal - visual style mirrors www.tripletwist.com */

html { color: #222; font-size: 1em; background: #fff; scroll-behavior: smooth; }
body { margin: 0; padding: 0; }

/* Typography baseline (mirrors marketing site) */
h1, h2, p, ul, li {
    line-height: 165%;
    color: #56483f;
}
h1 {
    font-family: "origins", 'Times New Roman', serif;
    width: 100%;
    font-weight: 700;
    padding: 0 0 .25em;
    margin: 0;
    line-height: 100%;
    font-size: 3.4em;
    text-align: center;
}
h2 {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: .5em;
    font-size: 1.2em;
    color: #423730;
}
p, figcaption, ul, li {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    padding-top: 0;
    margin-top: 0;
    font-size: 1em;
}
a {
    color: #8c1614;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Page container - matches narrow centered marketing layout */
section {
    margin: 0 auto;
    width: 90%;
    text-align: left;
    max-width: 475px;
    display: block;
    padding: 0;
    clear: both;
}
footer section {
    max-width: 600px;
}

/* Inline typography spacing inside sections (mirrors marketing styles.min.css) */
section h1 { margin: .5em 0 .2em; }
section h2 { margin: 0; padding: 0; }
section p  { margin: .1em 0 1.2em; }

/* .page padding-top + .site-nav* styles live in global-nav-v2.css
   (copied verbatim from www.tripletwist.com so the booking nav matches
   the marketing nav byte-for-byte). */
@media (max-width: 650px) {
    section h1 { font-size: 2.4em; line-height: 1.05; }
}


/* ── Footer ─────────────────────────────────────────────── */

footer {
    background: #f2e7d6;
    border-top: 1px solid #ddd4c4;
    margin-top: 3em;
    padding: 2.5em 0 2em;
}
footer ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.25em;
    justify-content: center;
}
footer ul li { display: inline; }
footer ul img { height: 22px; vertical-align: middle; }
footer ul a {
    color: #3c2415;
    text-decoration: none;
    font-size: 0.95em;
}
footer ul a:hover { opacity: 0.6; }
footer ul.address {
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    margin-top: 1.5em;
    color: #7a614f;
    font-size: 0.9em;
}
footer ul.address .name { font-weight: 600; color: #3c2415; }
footer ul.address .copy { color: #aaa; font-size: 0.85em; margin-top: 0.5em; }

/* ── Product detail / pricing card (mirrors makeup-lessons page) ── */

.tt-lesson-card-wrap {
    width: 90%;
    max-width: 475px;
    margin: 0 auto;
    padding-bottom: 2.5em;
}
.tt-pricing-card {
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 1.75em 1.65em 1.55em;
    background: #fff;
    transition: border-color 0.12s, background 0.12s;
}
.tt-card-label {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.74em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #73482e;
    margin: 0 0 1.05em;
    line-height: 1.4;
}
.tt-card-price {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 300;
    color: #423730;
    margin: 0 0 0.35em;
    line-height: 1.1;
}
.tt-card-duration {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.85em;
    color: #999;
    margin: 0 0 1.2em;
    line-height: 1.4;
}
.tt-card-details {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.88em;
    color: #56483f;
    line-height: 1.72;
    margin: 0; padding: 0;
    list-style: none;
    border-top: 1px solid #ece8e3;
    padding-top: 1.1em;
}
.tt-card-details li { padding-left: 1.1em; position: relative; }
.tt-card-details li::before { content: "\2013"; position: absolute; left: 0; color: #bbb; }

.tt-card-btn-wrap { text-align: center; margin: 1.5em 0 0; padding: 0; }

/* Small caption beneath the disabled CTA, while online checkout is not yet live */
.tt-card-note {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.82em;
    color: #999;
    text-align: center;
    line-height: 1.55;
    margin: 0.85em auto 0;
    max-width: 38ch;
}
.tt-card-note a { color: #8c1614; }

.tt-cta-btn {
    display: inline-block;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.88em;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #73482e;
    border: 1.5px solid #73482e;
    padding: 0.8em 2.25em;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    background: none;
    cursor: pointer;
}
.tt-cta-btn:hover { background: #73482e; color: #f2e7d6; text-decoration: none; }
.tt-cta-btn[disabled],
.tt-cta-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tt-cta-btn[disabled]:hover,
.tt-cta-btn.is-disabled:hover { background: none; color: #73482e; }

.tt-pricing-cta {
    width: 90%;
    max-width: 475px;
    margin: 0.25em auto 0;
    padding-bottom: 2.75em;
    text-align: center;
}
.tt-pricing-cta p.tt-cta-secondary {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.86em;
    color: #999;
    margin: 1.25em 0 0;
    line-height: 1.55;
}
.tt-pricing-cta p.tt-cta-secondary a { color: #8c1614; }

.tt-lower {
    border-top: 1px solid #ece8e3;
    padding-top: 2em;
    margin-top: 0;
}
.tt-lower + .tt-lower { margin-top: 1.75em; }
.tt-lower ul { padding-left: 1.25em; margin: 0.5em 0 0; }
.tt-lower ul li {
    line-height: 1.72;
    color: #56483f;
    font-size: 0.95em;
}

.tt-trust-line {
    font-size: 0.88em;
    color: #aaa;
    font-style: italic;
    margin-top: 1em;
    line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────
   Gift card detail page (luxury redesign)
   ───────────────────────────────────────────────────────── */

/* Warm cream hero band that breaks out behind the nav. */
.tt-gc-shell {
    background: #f7efe1;
    background-image:
        radial-gradient(ellipse at top, #fbf6ec 0%, #f5ecdb 60%, #efe4cf 100%);
    padding: 7em 0 4.5em;
    margin-top: -1px;
}
.tt-gc-wrap {
    max-width: 1080px;
    width: 92%;
    margin: 0 auto;
    /* Breathing room inside the content rail (separate from the 4% gutter
       provided by `width: 92%`). box-sizing: border-box so the padding
       sits inside the 92%/1080px box instead of overflowing it. */
    box-sizing: border-box;
    padding: 0 2em;
}

.tt-gc-hero {
    /* Simple two-column grid: pitch on the left, checkout on the right.
       On mobile this collapses to one column (.tt-gc-pitch first, then
       .tt-gc-checkout). Inside .tt-gc-pitch the DOM order on phones is
       intro -> photo -> [Purchase Makeup Lesson] anchor button -> bullets,
       and the actual form lives below — reached via the anchor. */
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: 3.5em;
    align-items: start;
}

.tt-gc-pitch {
    padding-top: 0;
}

.tt-gc-before-after {
    margin: 0 0 1.75rem;
    /* No max-width cap — the photo fills its column on both desktop
       (left pitch column) and mobile (full .tt-gc-pitch width). */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(60, 40, 20, 0.14);
    background: #fff;
}

.tt-gc-before-after img {
    display: block;
    width: 100%;
    height: auto;
}

/* "Purchase Makeup Lesson" mobile anchor CTA that scrolls down to the
   actual checkout card (#purchase). Hidden on desktop where the form is
   already visible on the right; revealed at <=860px (see responsive
   block below). Visually in-family with .tt-gc-buy-btn but a touch
   chunkier so it clearly reads as a CTA, not a link. */
.tt-gc-jump-btn {
    display: none;
    /* Use flex so the down-arrow indicator hugs the label and stays
       centered together as a single button row. */
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1.75rem;
    padding: 1.1em 1.6em;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    line-height: 1.1;
    color: #fbf6ec;
    background: #3c2415;
    border: 1px solid #3c2415;
    border-radius: 10px;
    /* Stronger lift than the form's submit button so the CTA reads as
       the primary action on the mobile first screen. */
    box-shadow:
        0 10px 22px -10px rgba(60, 36, 21, 0.55),
        0 2px 4px -2px rgba(60, 36, 21, 0.25);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
/* Down-arrow chevron indicator — pure CSS so we don't ship an icon
   font/SVG just for one glyph. Tells the user the button scrolls. */
.tt-gc-jump-btn::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
}
.tt-gc-jump-btn:hover,
.tt-gc-jump-btn:focus {
    background: #5a3a1f;
    border-color: #5a3a1f;
    color: #fbf6ec;
    box-shadow:
        0 14px 26px -10px rgba(60, 36, 21, 0.6),
        0 3px 6px -2px rgba(60, 36, 21, 0.3);
    transform: translateY(-1px);
}
.tt-gc-jump-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px -2px rgba(60, 36, 21, 0.4);
}
.tt-gc-jump-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(138, 102, 72, 0.4),
        0 10px 22px -10px rgba(60, 36, 21, 0.55);
}

/* ── Designed gift card preview ────────────────────────── */

.tt-gc-preview {
    background: linear-gradient(160deg, #fdf8ed 0%, #f4e7cf 100%);
    border: 1px solid #d8c39c;
    border-radius: 14px;
    padding: 2.1em 2.1em 1.9em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 18px 38px -16px rgba(70, 45, 20, 0.22),
        0 4px 10px -4px rgba(70, 45, 20, 0.10);
    margin-bottom: 2em;
    position: relative;
    overflow: hidden;
}
.tt-gc-preview::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(115, 72, 46, 0.18);
    border-radius: 10px;
    pointer-events: none;
}
.tt-gc-preview-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.tt-gc-preview-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    margin-bottom: 1.4em;
}
.tt-gc-preview-mark-name {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    color: #3c2415;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tt-gc-preview-mark-sub {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.68em;
    font-weight: 500;
    color: #8a6648;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.tt-gc-preview-title {
    font-family: "origins", 'Times New Roman', serif;
    font-size: 2.4em;
    font-weight: 400;
    color: #5a3a1a;
    line-height: 1;
    margin: 0;
}
.tt-gc-preview-divider {
    width: 56px;
    height: 1px;
    background: #b08c5e;
    margin: 0.9em auto 1em;
}
.tt-gc-preview-amount {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.4em;
    font-weight: 200;
    color: #3c2415;
    line-height: 1;
    margin: 0;
}
.tt-gc-preview-sub {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.92em;
    color: #6a4f3a;
    margin-top: 0.45em;
    letter-spacing: 0.02em;
}
.tt-gc-preview-code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78em;
    color: #8a6648;
    letter-spacing: 0.18em;
    margin-top: 1.6em;
    padding-top: 1.1em;
    border-top: 1px dashed rgba(138, 102, 72, 0.35);
}

/* ── Pitch copy ─────────────────────────────────────────── */

.tt-gc-eyebrow {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.74em;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a6648;
    margin: 0 0 0.55em;
    line-height: 1.4;
}
h1.tt-gc-heading {
    /* Skinny, elegant sans for the product H1 on both desktop and mobile.
       Deliberately NOT the "origins" Typekit script — that font reads as
       calligraphy and the page title needs to stay clean and legible.
       Origins can still live in the fake gift-card preview block if it
       comes back; the main product heading uses the site's regular UI
       font stack at thin weight. */
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    /* clamp() lets the title shrink on narrow viewports without media
       queries fighting each other. ~32px on iPhone, ~38px on desktop. */
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    color: #3c2415;
    text-align: left;
    margin: 0 0 0.45em;
    padding: 0;
    letter-spacing: -0.005em;
    /* Belt-and-suspenders against long words pushing past the column. */
    max-width: 100%;
    overflow-wrap: break-word;
}
.tt-gc-subtitle {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.05em;
    color: #6a4f3a;
    margin: 0 0 1em;
    line-height: 1.45;
    font-weight: 400;
}
.tt-gc-price-tag {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.45em;
    font-weight: 400;
    color: #3c2415;
    margin: 0 0 1.25em;
    line-height: 1;
    letter-spacing: 0.01em;
}
.tt-gc-desc {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1em;
    color: #56483f;
    line-height: 1.65;
    margin: 0 0 1.4em;
}
.tt-gc-list {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95em;
    color: #56483f;
    line-height: 1.7;
    margin: 0;
    padding: 1.1em 0 0;
    list-style: none;
    border-top: 1px solid rgba(115, 72, 46, 0.18);
}
.tt-gc-list li {
    padding: 0.2em 0 0.2em 1.4em;
    position: relative;
}
.tt-gc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 0.55em;
    height: 1px;
    background: #b08c5e;
}

/* ── Checkout card ──────────────────────────────────────── */

.tt-gc-checkout {
    position: sticky;
    top: 92px;
    align-self: start;
    /* When the mobile jump button anchors here, leave room for the fixed
       site header so the form heading doesn't tuck under the nav. */
    scroll-margin-top: 80px;
}
.tt-gc-checkout-form {
    background: #fdf6e8;
    border: 1px solid #e0d2b3;
    border-radius: 14px;
    padding: 1.65em 1.7em 1.55em;
    box-shadow:
        0 18px 44px -22px rgba(70, 45, 20, 0.25),
        0 4px 12px -6px rgba(70, 45, 20, 0.10);
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.tt-gc-checkout-heading {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a6648;
    margin: 0 0 0.85em;
    padding: 0;
    line-height: 1.4;
}

/* Compact purchase summary, sits right under the heading */
.tt-gc-summary {
    background: #faf3e6;
    border: 1px solid #e9d8b4;
    border-radius: 10px;
    padding: 0.85em 1em 0.8em;
    margin: 0 0 1.3em;
}
.tt-gc-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
}
.tt-gc-summary-name {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.98em;
    font-weight: 600;
    color: #3c2415;
    letter-spacing: 0.01em;
}
.tt-gc-summary-price {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    color: #3c2415;
    white-space: nowrap;
}
.tt-gc-summary-sub {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #8a6648;
    margin: 0.3em 0 0;
    line-height: 1.4;
}

.tt-gc-section {
    margin: 0 0 1.1em;
}
.tt-gc-section--secondary {
    margin-top: 1.5em;
    padding-top: 1.25em;
    border-top: 1px dashed #e5dac1;
}
.tt-gc-section-label {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a6648;
    margin: 0 0 0.65em;
    line-height: 1.4;
}
.tt-gc-section-hint {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.88em;
    color: #6a4f3a;
    line-height: 1.5;
    margin: -0.2em 0 0.7em;
}
.tt-gc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75em;
}
@media (max-width: 480px) {
    .tt-gc-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
.tt-gc-recipient-email {
    margin: 0 0 1.1em;
}
.tt-gc-recipient-email[hidden],
.tt-gc-gift-only[hidden],
.tt-gc-gift-only-message[hidden] {
    display: none;
}
.tt-gc-section-label .tt-gc-optional {
    font-weight: 500;
    color: #b09980;
    margin-left: 0.4em;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.95em;
}

.tt-gc-field {
    margin: 0 0 0.7em;
}
.tt-gc-field:last-child {
    margin-bottom: 0;
}
.tt-gc-field-row .tt-gc-field {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .tt-gc-field-row .tt-gc-field {
        margin-bottom: 0.7em;
    }
    .tt-gc-field-row .tt-gc-field:last-child {
        margin-bottom: 0;
    }
}
.tt-gc-field label {
    display: block;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.86em;
    color: #56483f;
    margin: 0 0 0.35em;
    font-weight: 500;
}
.tt-gc-checkout-form input[type="text"],
.tt-gc-checkout-form input[type="email"],
.tt-gc-checkout-form textarea {
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #2d231b;
    background-color: #fffdf9;
    border: 1px solid #d8cdb7;
    border-radius: 7px;
    padding: 0.72em 0.85em;
    min-height: 2.8em;
    box-sizing: border-box;
    width: 100%;
    line-height: 1.35;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    touch-action: manipulation;
}
.tt-gc-checkout-form input::placeholder,
.tt-gc-checkout-form textarea::placeholder {
    color: #b8a890;
}
.tt-gc-checkout-form textarea {
    min-height: 5.5em;
    resize: vertical;
    line-height: 1.5;
}
.tt-gc-checkout-form input:focus,
.tt-gc-checkout-form textarea:focus {
    outline: none;
    border-color: #8a6648;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(138, 102, 72, 0.15);
}

/* ── Radio cards for delivery mode ──────────────────────── */

.tt-gc-radio-cards {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}
.tt-gc-radio-cards--compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
}
@media (max-width: 420px) {
    .tt-gc-radio-cards--compact {
        grid-template-columns: 1fr;
    }
}
.tt-gc-radio-card {
    display: flex;
    align-items: center;
    gap: 0.65em;
    padding: 0.65em 0.8em;
    border: 1px solid #d8cdb7;
    border-radius: 8px;
    background: #fffdf9;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.tt-gc-radio-card:hover {
    border-color: #b89870;
    background-color: #fffaf0;
}
.tt-gc-radio-card input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.15em;
    height: 1.15em;
    border: 1.5px solid #c9b896;
    border-radius: 50%;
    background: #fff;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: border-color 0.12s ease;
}
.tt-gc-radio-card input[type="radio"]:checked {
    border-color: #73482e;
}
.tt-gc-radio-card input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #73482e;
}
.tt-gc-radio-card input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(138, 102, 72, 0.2);
}
.tt-gc-radio-card:has(input[type="radio"]:checked) {
    border-color: #73482e;
    background-color: #faf3e6;
    box-shadow: 0 0 0 1px #73482e inset;
}
.tt-gc-radio-card-title {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    color: #3c2415;
    font-weight: 500;
    line-height: 1.3;
}

/* ── Accept terms checkbox ──────────────────────────────── */

.tt-gc-accept {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    margin: 0.4em 0 0.95em;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.82em;
    color: #6a5a4a;
    line-height: 1.45;
    cursor: pointer;
}
.tt-gc-accept input[type="checkbox"] {
    margin-top: 0.2em;
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    accent-color: #73482e;
    cursor: pointer;
}

/* ── Total + Buy button ─────────────────────────────────── */

.tt-gc-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 0.9em;
    padding: 0.85em 0 0;
    border-top: 1px solid #ece8e3;
}
.tt-gc-total-label {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a6648;
}
.tt-gc-total-value {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.6em;
    font-weight: 300;
    color: #3c2415;
}

.tt-gc-buy-btn {
    display: block;
    width: 100%;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fbf6ec;
    background: #3c2415;
    border: 1px solid #3c2415;
    border-radius: 8px;
    padding: 1em 1.4em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 14px -6px rgba(60, 36, 21, 0.45);
}
.tt-gc-buy-btn:hover {
    background: #5a3a1f;
    border-color: #5a3a1f;
}
.tt-gc-buy-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px -2px rgba(60, 36, 21, 0.4);
}
.tt-gc-buy-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(138, 102, 72, 0.35),
        0 6px 14px -6px rgba(60, 36, 21, 0.45);
}

.tt-gc-note {
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #9a8978;
    text-align: center;
    margin: 0.9em 0 0;
    line-height: 1.55;
}

/* "Coming soon" variant when Stripe is not configured */
.tt-gc-checkout-form--soon .tt-gc-desc {
    font-size: 0.95em;
    margin: 0;
}

/* ── Errors ────────────────────────────────────────────── */

.tt-form-errors {
    background: #fbecec;
    border: 1px solid #e0bcbc;
    border-left: 4px solid #c0261f;
    color: #a31410;
    padding: 0.7em 0.9em;
    border-radius: 6px;
    margin: 0 0 1.1em;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.45;
}

/* Per-field error message: bold and clearly red so it's obvious what's wrong. */
.tt-gc-checkout-form .errorlist {
    list-style: none;
    padding: 0;
    margin: 0.4em 0 0;
    color: #c0261f;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.4;
}
.tt-gc-checkout-form .errorlist li {
    position: relative;
    padding-left: 1.25em;
}
.tt-gc-checkout-form .errorlist li::before {
    content: "\26A0";          /* ⚠ warning sign */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

/* ── Highlight the actual field that failed validation ──── */

/* A text/email field whose error message is rendered right after it. */
.tt-gc-field:has(.errorlist) input,
.tt-gc-field:has(.errorlist) textarea {
    border-color: #c0261f;
    background-color: #fdf3f2;
    box-shadow: 0 0 0 1px #c0261f;
}
/* Keep the red ring (not the default brown) while the user re-focuses it. */
.tt-gc-field:has(.errorlist) input:focus,
.tt-gc-field:has(.errorlist) textarea:focus {
    border-color: #c0261f;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(192, 38, 31, 0.18);
}
/* Tint the field's label so the eye lands on the right row. */
.tt-gc-field:has(.errorlist) label {
    color: #c0261f;
}

/* Radio-card group (e.g. "Who is this for?") that failed validation. */
.tt-gc-section:has(.errorlist) .tt-gc-radio-card {
    border-color: #e0a9a6;
}

/* The "accept terms" row, whose error is rendered just after the label. */
.tt-gc-accept:has(+ .errorlist) {
    color: #c0261f;
}
.tt-gc-accept:has(+ .errorlist) input[type="checkbox"] {
    outline: 2px solid #c0261f;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Terms link + panel (in-form) ───────────────────── */

.tt-gc-terms-link {
    color: #8a6648;
    text-decoration: underline;
    text-decoration-color: rgba(138, 102, 72, 0.4);
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.tt-gc-terms-link:hover,
.tt-gc-terms-link:focus-visible {
    color: #5a3a1f;
    text-decoration-color: #8a6648;
    outline: none;
}
.tt-gc-terms-panel {
    margin: 0.55em 0 1em;
}
.tt-gc-terms-panel[hidden] {
    display: none;
}

.tt-gc-terms-list {
    list-style: none;
    margin: 0.6em 0 0;
    padding: 0.85em 1em;
    background: #faf6ee;
    border: 1px solid #eadfc6;
    border-radius: 8px;
    font-size: 0.8em;
    color: #6a5a4a;
    line-height: 1.55;
}
.tt-gc-terms-list li {
    padding: 0.18em 0 0.18em 0.95em;
    position: relative;
}
.tt-gc-terms-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    width: 0.45em;
    height: 1px;
    background: #b08c5e;
}

/* Bottom-of-page terms: always open, centered, elegant */
section.tt-gc-terms-section {
    max-width: 720px;
    margin-top: 1.75em;
    padding-bottom: 3em;
    text-align: center;
}
.tt-gc-terms-heading {
    text-align: center;
    margin: 0 0 1.1em;
    padding: 0;
    font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.92em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a6648;
    line-height: 1.4;
}
.tt-gc-terms-section .tt-gc-terms-list {
    text-align: center;
    background: transparent;
    border: none;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 640px;
    font-size: 0.92em;
    color: #6a5a4a;
    line-height: 1.65;
}
.tt-gc-terms-section .tt-gc-terms-list li {
    padding: 0.28em 0;
    position: static;
    text-align: center;
    color: #6a5a4a;
    font-size: 1em;
    line-height: 1.6;
}
.tt-gc-terms-section .tt-gc-terms-list li::before {
    content: "• ";
    position: static;
    display: inline;
    width: auto;
    height: auto;
    background: transparent;
    color: #b08c5e;
    margin-right: 0.4em;
    top: auto;
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 860px) {
    .tt-gc-shell {
        padding: 6em 0 3.5em;
    }
    .tt-gc-hero {
        /* One column: .tt-gc-pitch stacks above .tt-gc-checkout. The form
           lives below; mobile users tap .tt-gc-jump-btn (revealed below)
           to anchor down to it. */
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 2em;
    }
    .tt-gc-checkout {
        position: static;
    }
    .tt-gc-jump-btn {
        /* flex so the chevron in ::after sits beside the label */
        display: flex;
    }
    /* Center the eyebrow on phones — on desktop it sits left-aligned
       above the title because the title itself is left-aligned. On a
       single-column mobile layout, centered reads cleaner. */
    .tt-gc-eyebrow {
        text-align: center;
    }
}
@media (max-width: 600px) {
    .tt-gc-shell {
        padding: 5.5em 0 3em;
    }
    /* Step the wrap padding down on phones so the content rail isn't
       too narrow — 2em on every side eats too many pixels at 375px wide. */
    .tt-gc-wrap {
        padding: 0 1.25em;
    }
    .tt-gc-preview {
        padding: 1.75em 1.5em 1.5em;
    }
    .tt-gc-preview-title {
        font-size: 2em;
    }
    .tt-gc-preview-amount {
        font-size: 2em;
    }
    h1.tt-gc-heading {
        /* Same skinny sans family as desktop; just trim the clamp range
           so the title fits comfortably on the smallest phones without
           wrapping to three lines. ~28-36px on iPhones. */
        font-size: clamp(1.75rem, 7vw, 2.25rem);
        line-height: 1.18;
    }
    .tt-gc-checkout-form {
        padding: 1.55em 1.4em 1.4em;
    }
}