/* The checkout page sits on white, not the sitewide beige background. */
body.woocommerce-checkout {
    background-color: var(--color-cream);
}

/* Alternate compact header — swapped in for the "Choose additional copies"
   screen only; hidden otherwise, in favor of the normal site header. */
.sk-checkout-alt-header {
    display: none;
}

body.sk-show-alt-header #masthead {
    display: none;
}

body.sk-show-alt-header .sk-checkout-alt-header {
    display: block;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-beige-2);
}

.sk-checkout-alt-header__inner {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding: 16px 60px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
}

.sk-checkout-alt-header__brand {
    justify-self: start;
}

.sk-checkout-alt-header__secure {
    justify-self: end;
    grid-column: 3;
}

/* The steps list always sits in the true center column — reserved via the
   grid's 3-column track even when Back (column 3) is hidden on the first
   screen, so it doesn't get pulled toward one side the way flex
   justify-content: space-between would with only 2 visible children. */
.sk-checkout-alt-header__steps {
    grid-column: 2;
    justify-self: center;
}

.sk-checkout-alt-header__back {
    grid-column: 3;
    justify-self: end;
}

.sk-checkout-alt-header__brand,
.sk-checkout-alt-header__secure {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.sk-checkout-alt-header__brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.sk-checkout-alt-header__secure {
    font-size: 16px;
    font-weight: 400;
}

.sk-checkout-alt-header__brand-icon,
.sk-checkout-alt-header__secure-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.sk-checkout-alt-header__brand-icon svg,
.sk-checkout-alt-header__secure-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Step progress + Back — shown on steps 2/3 instead of the plain "Secure checkout" text. */

/* Hidden per request: the mobile "<Step name> · Step N of 6" caption and the
   header Log In button (markup stays in inc/checkout.php for easy re-enable). */
.sk-checkout-alt-header__inner .sk-checkout-alt-header__current-label,
.sk-checkout-alt-header__inner .sk-checkout-alt-header__login {
    display: none !important;
}

.sk-checkout-alt-header__steps,
.sk-checkout-alt-header__back {
    display: none;
}

body.sk-show-alt-header-steps .sk-checkout-alt-header__secure {
    display: none;
}

body.sk-show-alt-header-steps .sk-checkout-alt-header__steps,
body.sk-show-alt-header-steps .sk-checkout-alt-header__back {
    display: flex;
}

/* JS hides the Back button on the pre-"Book Type" screens via the native
   `hidden` attribute — needs !important to win over the display:flex rule
   above, which otherwise has higher specificity than the UA [hidden] rule. */
.sk-checkout-alt-header__back[hidden] {
    display: none !important;
}

.sk-checkout-alt-header__steps {
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sk-checkout-alt-header__steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    border-radius: 6px;
    background-color: var(--color-beige-2);
    font-size: 16px;
    color: var(--color-grey-3);
    border: 1px solid var(--color-beige-1);
    font-font: var(--font-family-base);
    font-weight: 600;
}

.sk-checkout-alt-header__step-check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background-color: var(--color-beige-1);
    flex-shrink: 0;
}

.sk-checkout-alt-header__step-check svg {
    display: block;
    width: 14px;
    height: 14px;
}

.sk-checkout-alt-header__step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background-color: var(--color-beige-1);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.sk-checkout-alt-header__step-label {
    white-space: nowrap;
}

.sk-checkout-alt-header__steps li.is-current {
    background-color: var(--color-cream);
    color: var(--color-grey-1);
    font-weight: 600;
    border: 1px solid var(--color-grey-4);
}

.sk-checkout-alt-header__steps li.is-current .sk-checkout-alt-header__step-index {
    background-color: var(--color-grey-1);
    color: var(--color-cream);
    border-radius: 4px;
}

.sk-checkout-alt-header__steps li.is-done .sk-checkout-alt-header__step-check {
    display: inline-flex;
}

.sk-checkout-alt-header__steps li.is-done .sk-checkout-alt-header__step-index {
    display: none;
}

body.sk-show-alt-header-steps .sk-checkout-alt-header__back {
    align-items: center;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    background-color: var(--color-beige-1);
    border: none;
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--color-text);
    cursor: pointer;
    appearance: none;
    box-shadow: none;
}



/* WooCommerce wraps the whole [woocommerce_checkout] shortcode output in a
   ".woocommerce" div, whose own stylesheet re-styles ".button" with its own
   (higher-specificity) colors — override it back to the theme's palette. Applies
   to both the checkout flow itself (.sk-checkout) and the thank-you page
   (.sk-thankyou), which is a separate template/root and not a descendant of it. */
.sk-checkout .button,
.sk-checkout button.button,
.sk-thankyou .button,
.sk-thankyou button.button {
    background-color: var(--color-grey-1) !important;
    color: var(--color-beige-2) !important;
    border-radius: 8px;
    font-family: var(--font-family-base) !important;
    font-weight: 600 !important;
    padding: 1rem 1.75rem !important;
}

.sk-checkout .button:hover,
.sk-checkout button.button:hover,
.sk-thankyou .button:hover,
.sk-thankyou button.button:hover {
    background-color: color-mix(in srgb, var(--color-primary) 82%, black) !important;
    color: #fff !important;
}

.sk-checkout-step {
    display: none;
}

.sk-checkout-step.is-active {
    display: block;
}

.sk-checkout-screen {
    display: none;
}

.sk-checkout-screen.is-active {
    display: block;
}

.sk-gift-recipients[hidden] {
    display: none;
}

/* Step 1, screen: "Who are we celebrating?" */

.sk-celebrating {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding: 70px 60px;
}

.sk-celebrating__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 20rem;
    margin-bottom: 24px;
}

.sk-celebrating__ornament-line {
    width: 96px;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.sk-celebrating__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.sk-celebrating__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-celebrating__heading {
    margin: 0 0 32px;
    color: var(--color-grey-1);
    font-weight: 400;
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2%;
}

.sk-celebrating__grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: start;
    gap: 16px;
    margin-bottom: var(--space-5);
}

.sk-celebrating-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: max-content;
    max-width: 100%;
    padding: 12px 16px;
    border: 1px solid #fae0c0;
    border-radius: 12px;
    background: #F9F3EA;
    font-family: var(--font-family-base);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sk-celebrating-option:hover,
.sk-celebrating-option:focus-visible {
    border-color: var(--color-orange-dark);
    box-shadow: inset 0 0 0 1px var(--color-orange-dark);
}

.sk-celebrating-option.is-selected {
    border-color: var(--color-grey-2);
    background: var(--color-grey-2);
    box-shadow: none;
}

.sk-celebrating-option.is-selected .sk-celebrating-option__label {
    color: var(--color-beige-2);
}

.sk-celebrating-option.is-selected .sk-celebrating-option__icon {
    border-color: var(--color-beige-2);
}

.sk-celebrating-option.is-selected .sk-celebrating-option__icon svg path {
    stroke: var(--color-beige-2);
}

.sk-celebrating-option__badge {
    position: absolute;
    top: 0;
    right: 9px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: #FAE0C0;
    border-radius: 4px;
    color: var(--color-grey-1);
    white-space: nowrap;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -1%;
}

.sk-celebrating-option__badge-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 14px;
}

.sk-celebrating-option__badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-celebrating-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.sk-celebrating-option__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.sk-celebrating-option__icon svg path {
    stroke: var(--color-orange-dark);
}

.sk-celebrating-option__label {
    color: var(--color-grey-1);
    font-family: Lato;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    white-space: nowrap;
}

.sk-celebrating__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sk-celebrating__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 14px 65px;
    border: none;
    border-radius: 8px;
    background-color: var(--color-beige-1);
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.sk-celebrating__back:hover,
.sk-celebrating__back:focus-visible {
    opacity: 0.85;
}

.sk-celebrating__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 14px 49px;
    border: none;
    border-radius: 8px;
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

/* Overrides the generic .sk-checkout button.button:hover rule (which tints
   toward the orange primary color — meant for orange CTAs, not this dark
   grey-1 button) with the same "lighten toward white" treatment used by the
   other grey-1 buttons on the site (e.g. .sk-choose-access-card__button). */
button.sk-celebrating__continue.button:hover,
button.sk-celebrating__continue.button:focus-visible {
    background-color: color-mix(in srgb, var(--color-grey-1) 85%, white) !important;
    color: var(--color-beige-2) !important;
}

@media (min-width: 700px) {
    .sk-celebrating__grid {
        grid-template-columns: repeat(3, max-content);
    }
}

@media (max-width: 899px) {
    .sk-celebrating {
        padding: 40px 16px;
    }

    .sk-celebrating__ornament-line {
        width: 32px;
    }

    .sk-celebrating__heading {
        font-size: 40px;
        line-height: 36px;
    }
}

@media (max-width: 699px) {
    .sk-celebrating-option {
        width: 100% !important;
    }

    .sk-celebrating__actions {
        flex-direction: column-reverse;
    }

    .sk-celebrating__back,
    .sk-celebrating__continue {
        width: 100% !important;
    }
}

/* Step: "Two ways to create your life story book" — background/ornament
   match the rest of the checkout flow, not the homepage "Two Ways" block
   anymore (no beige background, no leaf decoration). */

.sk-ways-to-create {
    position: relative;
}

.sk-ways-to-create__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: 60px;
    padding-block: 70px;
}

.sk-ways-to-create__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-inline: auto;
    margin-bottom: 33.5px;
    text-align: center;
}

.sk-ways-to-create__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
}

.sk-ways-to-create__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.sk-ways-to-create__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.sk-ways-to-create__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-ways-to-create__heading {
    margin: 0;
    color: var(--color-grey-1);
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2%;
    font-weight: 400;
}

.sk-ways-to-create__subheading {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 1.6;
}

.sk-ways-to-create__subheading p {
    margin: 0;
}

.sk-ways-to-create__options {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--space-5), 6vw, 7.5rem);
    margin-bottom: 33.5px;
}

.sk-ways-to-create-option {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: #F9F3EA;
    border: 1px solid #fae0c0;
}

.sk-ways-to-create-option__image {
    aspect-ratio: 21 / 8;
    overflow: hidden;
    border-radius: 12px;
}

.sk-ways-to-create-option__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sk-ways-to-create-option__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: 24px;
    text-align: center;
}

.sk-ways-to-create-option__heading {
    margin: 0;
    color: var(--color-grey-1);
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -2%;
    font-weight: 400;
}

.sk-ways-to-create-option__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 8rem;
}

.sk-ways-to-create-option__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.sk-ways-to-create-option__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.sk-ways-to-create-option__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-ways-to-create-option__description {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 32px;
}

.sk-ways-to-create-option__description p {
    margin: 0;
}

.sk-ways-to-create-option__button {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: var(--space-4);
    border: none;
    border-radius: 8px;
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    margin-bottom: 24px;
}

.sk-ways-to-create-option__button:hover,
.sk-ways-to-create-option__button:focus-visible {
    opacity: 0.85;
}

.sk-ways-to-create-option__caption {
    color: #6B6E62;
    font-family: var(--font-family-base);
    font-size: 14px;
}

.sk-ways-to-create__banner {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    align-items: center;
    justify-content: flex-start;
    gap: 55px;
    border-radius: 12px;
    background: #42462F;
    color: var(--color-cream);
    padding: 16px 32px;
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
}

.sk-ways-to-create__banner-text {
    margin: 0;
    color: var(--color-cream);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
}

.sk-ways-to-create__banner-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: var(--space-4);
    border: none;
    border-radius: 8px;
    background-color: #FAE0C0;
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    padding: 1rem 1.75rem !important;
}

.sk-ways-to-create__banner-button:hover,
.sk-ways-to-create__banner-button:focus-visible {
    opacity: 0.85;
}

@media (max-width: 899px) {
    .sk-ways-to-create__inner{
        padding: 40px 16px;
    }
    .sk-ways-to-create__banner {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: var(--space-3);
    }

    .sk-ways-to-create__banner-text {
        font-size: 14px;
    }

    .sk-ways-to-create__banner-button {
        width: 100%;
    }
}

.sk-ways-to-create__or {
    display: none;
}

.sk-ways-to-create__trust {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: clamp(var(--space-4), 4vw, 2rem);
    border-top: 1px solid var(--color-border);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    cursor: grab;
    scrollbar-width: none;
    margin-inline-end: calc(clamp(var(--space-3), 4vw, 3.75rem) * -1);
    padding-inline-end: clamp(var(--space-3), 4vw, 3.75rem);
}

.sk-ways-to-create__trust::-webkit-scrollbar {
    display: none;
}

.sk-ways-to-create__trust-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.sk-ways-to-create__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.sk-ways-to-create__trust-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.sk-ways-to-create__trust-icon svg path {
    stroke: var(--color-orange-dark);
}

.sk-ways-to-create__trust-text {
    display: flex;
    flex-direction: column;
}

.sk-ways-to-create__trust-heading {
    color: var(--color-grey-1);
    font-family: var(--font-family-heading);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -2%;
}

.sk-ways-to-create__trust-description {
    color: var(--color-grey-2);
    font-family: var(--font-family-base);
    font-size: 16px;
}

.sk-ways-to-create__trust-item:not(:first-of-type) {
    padding-inline-start: clamp(var(--space-5), 5vw, 4rem);
    border-left: 1px solid #9B9C8F;
}

@media (max-width: 699px) {
    .sk-ways-to-create::before {
        width: 150px;
        height: 125px;
    }
}

@media (max-width: 899px) {
    .sk-ways-to-create__ornament-icon {
        width: 24px;
        height: 24px;
    }

    .sk-ways-to-create__heading {
        font-size: 40px;
        line-height: 36px;
    }

    .sk-ways-to-create__subheading {
        font-size: 16px;
        line-height: 24px;
    }

    .sk-ways-to-create-option__body {
        padding: 24px 16px;
    }

    .sk-ways-to-create-option__heading {
        font-size: 28px;
        line-height: 26px;
    }

    .sk-ways-to-create-option__description {
        font-size: 16px;
        line-height: 24px;
    }

    .sk-ways-to-create-option__button {
        width: 100%;
    }

    .sk-ways-to-create__trust-heading {
        font-size: 18px;
        line-height: 18px;
    }

    .sk-ways-to-create__trust-description {
        font-size: 12px;
        line-height: 16px;
    }
}

@media (min-width: 900px) {
    .sk-ways-to-create__options {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .sk-ways-to-create__or {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        color: var(--color-grey-1);
        font-family: var(--font-family-heading);
        font-size: 30px;
    }

    /* The circle lives in ::before, decoupled from the "OR" text — same split
       as .two-ways__or (blocks/two-ways/style.css) — so the macOS text-nudge
       below can move the glyph without dragging the circle along with it. */
    .sk-ways-to-create__or::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid #9B9C8F;
        pointer-events: none;
    }

    /* Same macOS Core Text metrics mismatch as .two-ways__or (blocks/two-ways/style.css)
       and the FAQ digit bug — "OR" lands visibly above true center in the circle on
       Mac (any browser, not just Safari; see .is-mac in assets/js/global.js). Same
       nudge value as the homepage circle (identical 80px/30px sizing). */
    html.is-mac .sk-ways-to-create__or {
        padding-top: 8px;
    }

    .sk-ways-to-create__trust {
        justify-content: center;
        gap: clamp(var(--space-5), 5vw, 4rem);
        border-top: none;
        padding-top: 0;
        overflow-x: visible;
        scroll-snap-type: none;
        cursor: auto;
        margin-inline-end: 0;
        padding-inline-end: 0;
    }

    .sk-ways-to-create__trust-item:first-child {
        padding-inline-start: 0;
        border-left: none;
    }

    /* Desktop pass for the "Two ways to create your book" screen: the goal
       is the banner ("Not sure which path...") landing inside the first
       screen, with the trust row structurally excluded from it (see the
       flex/min-height mechanism on .sk-ways-to-create__inner below) — not
       shrinking the section itself. Went through a too-compact pass first
       (21/5 image ratio read as squashed; then once trust was pushed off via
       min-height, the leftover gap between the banner and the pushed-down
       trust row read as a dead blank strip) — sizing here is back close to
       the original values (images ~21/8, comfortable card padding) so the
       content actually fills the reserved first-screen height instead of
       leaving empty space above where trust got pushed to. Mobile/tablet
       (<900px) is untouched — the single-column stack already scrolls
       naturally there. */
    .sk-ways-to-create__inner {
        padding-top: 40px;
        /* The trust row must not be reachable without scrolling, on any
           screen tall enough to otherwise fit it — spacing values alone
           can't guarantee that (a tall enough monitor always wins). Turning
           this into a flex column that reserves a full viewport (+ a buffer
           covering the header's ~73px and this element's own 70px bottom
           padding, so the arithmetic holds even if either changes) forces
           .sk-ways-to-create__trust off the first screen structurally: below
           this height the trust row already overflows and needs a scroll
           like normal; above it, margin-top: auto below pushes trust down to
           fill the reserved space instead of letting it float up into view.
           With the sizing restored above, real content now runs close to
           that reserved height on its own, so this margin-push is mostly a
           safety net for unusually tall screens rather than the main effect. */
        display: flex;
        flex-direction: column;
        min-height: calc(100vh + 80px);
    }

    .sk-ways-to-create__intro {
        gap: 16px;
        margin-bottom: 24px;
    }

    .sk-ways-to-create__heading {
        font-size: 56px;
        line-height: 52px;
    }

    .sk-ways-to-create__options {
        margin-bottom: 24px;
    }

    .sk-ways-to-create-option__image {
        aspect-ratio: 21 / 8;
    }

    .sk-ways-to-create-option__body {
        padding: 22px 24px;
    }

    .sk-ways-to-create-option__description {
        margin-bottom: 24px;
    }

    .sk-ways-to-create-option__button {
        margin-bottom: 16px;
    }

    .sk-ways-to-create__banner {
        padding: 16px 32px;
        margin-bottom: 16px;
    }

    .sk-ways-to-create__trust {
        margin-top: auto;
    }
}

/* Step 1, screen: "Choose your access" */

.sk-choose-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding: 70px 60px;
    text-align: center;
}

.sk-choose-access__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 250px;
    margin-inline: auto;
}

.sk-choose-access__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.sk-choose-access__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.sk-choose-access__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-choose-access__rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: 14px;
    font-size: 13px;
    line-height: 14px;
    letter-spacing: 0%;
    /* Now conditionally an <a> (see form-checkout.php) when a Trustpilot URL
       is configured — same reset .sk-rating (the shared version used on the
       other screens) already applies, so it doesn't render as a normal blue
       underlined link. */
    color: inherit;
    text-decoration: none;
}


.sk-choose-access__rating-label {
    font-weight: 700;
}

.sk-choose-access__rating-stars {
    display: inline-flex;
    align-items: center;
}

.sk-choose-access__rating-stars svg {
    display: block;
    width: 90px;
    height: 17px;
}

.sk-choose-access__rating-trustpilot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 700;
}

.sk-choose-access__rating-trustpilot-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.sk-choose-access__rating-trustpilot-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-choose-access__heading {
    margin-top: var(--space-3);
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2%;
}

.sk-choose-access__subheading {
    margin-top: var(--space-3);
    color: var(--color-grey-1);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
}

.sk-choose-access__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 490px));
    justify-content: center;
    align-items: stretch;
    gap: var(--space-5);
    margin-top: 76px;
    text-align: left;
}

@media (max-width: 782px) {
    .sk-choose-access__cards {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

.sk-choose-access-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #F9F3EA;
    border-radius: 12px;
    padding: 40px 32px;
    overflow: visible;
    height: 100%;
    border: 1px solid #FAE0C0;
}

/* Positioning/sizing/transform/filter all live on the wrapper, not the
   <img> — see the comment on this markup in
   woocommerce/checkout/form-checkout.php for why (an iOS/iPadOS Safari
   filter: drop-shadow() + transform + object-fit bug on a single element). */
.sk-choose-access-card__image-wrap {
    position: absolute;
    top: -40px;
    right: 0px;
    width: 75px;
    height: 60px;
    transform: scale(3);
}

.sk-choose-access-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-choose-access-card__image-wrap--tilt-1 {
    transform: scale(1.8) rotate(5deg);
    transform-origin: top right;
    /* Ground shadow, same recipe as the site's card shadow
       (rgba(44,48,31,...), see line ~1680) — drop-shadow (not box-shadow)
       because the image is a plain rectangular book-cover photo with no
       transparency, so it traces the book's own rotated/scaled edges
       instead of an unrotated box. Tighter blur + darker than the original
       "soft" version so the shadow reads as more defined. */
    filter: drop-shadow(0 8px 8px rgba(44, 48, 31, 0.4));
}

.sk-choose-access-card__image-wrap--tilt-2 {
    transform: scale(1.8) rotate(6deg);
    transform-origin: top right;
    z-index: 1;
    /* No shadow of its own on purpose: this is the front book in the
       one-time plan's two-book stack, sitting almost fully over .--ghost.
       Giving it a shadow too would draw a second, competing shadow shape
       that (given the two books' different rotation/offset) partly falls
       across the back book's face instead of only around the stack's outer
       edge. The single shadow on .--ghost below — the back-most layer —
       reads as one shared shadow under the whole stack instead. */
}

.sk-choose-access-card__image-wrap--ghost {
    transform: scale(1.8) rotate(2deg) translate(-15px, -4px);
    transform-origin: top right;
    z-index: 0;
    opacity: 0.9;
    filter: drop-shadow(0 8px 8px rgba(44, 48, 31, 0.4));
}

@media (max-width: 782px) {
    .sk-choose-access {
        padding: 40px 16px;
    }
    .sk-choose-access-card__image-wrap {
        top: -24px;
    }

    .sk-choose-access-card__image-wrap--tilt-1 {
        transform: scale(1.4) rotate(5deg);
    }

    .sk-choose-access-card__image-wrap--tilt-2 {
        transform: scale(1.4) rotate(6deg);
    }

    .sk-choose-access-card__image-wrap--ghost {
        transform: scale(1.4) rotate(2deg) translate(-15px, -4px);
    }
}

.sk-choose-access-card__badge-slot {
    display: block;
    min-height: 26px;
    margin-bottom: var(--space-3);
}

.sk-choose-access-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 12px;
    background-color: #FAE0C0;
    border-radius: 4px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.sk-choose-access-card__badge-icon {
    display: inline-flex;
    width: 20px;
    height: 17px;
}

.sk-choose-access-card__badge-icon svg {
    width: 100%;
    height: 100%;
}

.sk-choose-access-card__label {
    display: block;
    color: var(--color-grey-1);
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -2%;
}

.sk-choose-access-card__price {
    font-family: var(--font-family-heading);
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2%;
}

.sk-choose-access-card__price .woocommerce-Price-amount {
    font-family: var(--font-family-heading);
}

.sk-choose-access-card__price-suffix {
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    color: var(--color-grey-1);
    margin-left: var(--space-1);
}

.sk-choose-access-card__copies {
    color: var(--color-grey-1);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
}

.sk-choose-access-card__read-more {
    display: none;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-grey-1);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
    appearance: none;
}

@media (max-width: 782px) {
    .sk-choose-access-card__read-more {
        display: block;
        margin-top: var(--space-2);
        margin-bottom: var(--space-3);
        text-align: center;
    }

    .sk-choose-access-card__features-panel {
        display: none;
    }

    .sk-choose-access-card__features-panel.is-expanded {
        display: block;
        margin-bottom: var(--space-3);
    }
}

.sk-choose-access-card__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.sk-choose-access-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.sk-choose-access-card__features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--color-text);
}

.sk-choose-access-card__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sk-choose-access-card__feature-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-choose-access-card button.sk-choose-access-card__button {
    align-self: flex-start;
    justify-content: center;
    margin-top: auto;
    background-color: #2C301F !important;
    color: var(--color-beige-2) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.sk-choose-access-card button.sk-choose-access-card__button:hover,
.sk-choose-access-card button.sk-choose-access-card__button:focus-visible {
    background-color: color-mix(in srgb, #2C301F 85%, white) !important;
    color: var(--color-beige-2) !important;
}

@media (max-width: 782px) {
    .sk-choose-access-card .sk-choose-access-card__button {
        align-self: stretch;
        width: 100%;
    }
}

/* Screen 1 ("Choose your access") — mobile typography overrides. Fill in below. */
@media (max-width: 782px) {
    .sk-choose-access__heading {
        font-size: 40px;
        line-height: 36px;
        letter-spacing: -2%;
    }

    .sk-choose-access__subheading {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
    }

    /* Desktop shows Trustpilot right under the subheading (DOM order); mobile
       keeps it at the very bottom, after the pricing cards, same as before
       the "Restore purchase"/"View terms" links (now removed) used to sit. */
    .sk-choose-access__rating {
        order: 2;
    }

    .sk-choose-access__cards {
        order: 1;
        width: 100%;
    }

    .sk-choose-access-card{
        /* More top clearance than the 24px sides/bottom — the floating book
           cover image (.sk-choose-access-card__image-wrap, anchored
           top-right with a negative top offset) dips further down into the
           card at
           this narrow width than there was room for, especially on the
           one-time plan's two-book stack (--ghost + --tilt-2), which reached
           down over the label/price text. */
        padding: 56px 16px 24px;
    }

    .sk-choose-access-card__badge-slot{
        display: none;
    }

    .sk-choose-access-card__badge-slot:has(.sk-choose-access-card__badge){
        display: block;
    }

    .sk-choose-access-card__label {
        margin-bottom: var(--space-1);
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -2%;
    }

    /* Was a flat copy-paste of the desktop 64px/58px — on a 268px-wide mobile
       card (16px padding either side) that read as way too large relative
       to everything around it, with zero margin above/below it against the
       label and copies lines right next to it: the "bunched up/overlapping"
       text this was fixing. */
    .sk-choose-access-card__price {
        margin-top: var(--space-1);
        margin-bottom: var(--space-1);
        font-size: 64px;
        line-height: 1.1;
        letter-spacing: -2%;
    }

    /* Was empty (no mobile override at all) — the base rule's
       margin-left: var(--space-1) (4px) sat right against the price's own
       64px digits, reading as the $ sign almost touching the suffix text.
       Bumped up now that the price itself is much smaller too. */
    .sk-choose-access-card__price-suffix {
        margin-left: var(--space-2);
    }

    .sk-choose-access-card__copies {
        margin-top: var(--space-1);
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
    }

    .sk-choose-access-card__badge {
    }

    .sk-choose-access-card__features li {
    }

    .sk-choose-access-card__read-more {
    }

    .sk-choose-access-card button.sk-choose-access-card__button {
        padding: 1rem 1.75rem !important;
    }

    .sk-choose-access__links {
    }

    .sk-choose-access__rating {
    }
}

/* Shared compact Trustpilot rating row (screens 2 & 3) */

.sk-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: inherit;
    text-decoration: none;
}

.sk-rating__label {
    font-weight: 700;
}

.sk-rating__stars {
    display: inline-flex;
    align-items: center;
}

.sk-rating__stars svg {
    display: block;
    width: 90px;
    height: 17px;
}

.sk-rating__trustpilot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.sk-rating__trustpilot-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.sk-rating__trustpilot-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Step 1, screen: "Choose additional copies" */

.sk-extra-copies {
    position: relative;
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding: 70px 60px;
    text-align: center;
}

.sk-extra-copies__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 250px;
    margin-inline: auto;
}

.sk-extra-copies__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.sk-extra-copies__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.sk-extra-copies__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-extra-copies .sk-rating {
    margin-top: var(--space-5);
}

.sk-extra-copies__heading {
    margin-top: var(--space-3);
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2%;
}

.sk-extra-copies__subheading {
    margin-top: var(--space-3);
    max-width: 40rem;
    margin-inline: auto;
    color: var(--color-grey-1);
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
}

.sk-extra-copies__panel {
    display: grid;
    grid-template-columns: 509px 1fr;
    margin-top: var(--space-6);
    background-color: #F9F3EA;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}

@media (max-width: 782px) {
    .sk-extra-copies__panel {
        grid-template-columns: 1fr;
    }
}

.sk-extra-copies__image {
    display: block;
    width: 100%;
    height: 392px !important;
    object-fit: cover;
    border-radius: 0;
}

@media (max-width: 782px) {
    .sk-extra-copies__image {
        height: 220px !important;
    }
}

.sk-extra-copies__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) 127px var(--space-4) var(--space-4);
}

@media (max-width: 782px) {
    .sk-extra-copies__form {
        padding-right: var(--space-4);
    }
}

.sk-extra-copies__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (max-width: 782px) {
    .sk-extra-copies__bottom {
        margin-top: var(--space-5);
    }
}

.sk-extra-copies__select-label {
    font-family: var(--font-family-heading);
    font-size: 30px;
    line-height: 32px;
    letter-spacing: -2%;
    margin-top:40px;
}

.sk-extra-copies__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.sk-extra-copies__select-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 1;
}

.sk-extra-copies__select-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Select2 skin — reuses the theme's field styling instead of the library default. */

.sk-extra-copies__select-wrap .select2-container {
    width: 100% !important;
}

.sk-extra-copies__select-wrap .select2-selection--single {
    height: auto;
    padding: 12px 16px 12px calc(32px + var(--space-3) * 2);
    border: 1px solid #9B9C8F;
    border-radius: 8px;
    background-color:  #F9F3EA;
}

.sk-extra-copies__select-wrap .select2-selection__rendered {
    padding: 0;
    font-family: var(--font-family-base);
    font-weight: 700!important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--color-grey-1) !important;
}

.sk-extra-copies__select-wrap .select2-selection__arrow {
    height: 100%;
    right: var(--space-3)!important;
}

/* Select2 dropdown (results panel) — rendered as a sibling of <body>, not nested
   under .sk-extra-copies__select-wrap, so it can't be scoped to this component;
   safe to style globally since this is the only select2 instance in the theme. */

.select2-dropdown {
    border: 1px solid #9B9C8F !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-family: var(--font-family-base);
    overflow: hidden;
    box-shadow: 0px 8px 24px rgba(44, 48, 31, 0.12);
}

.select2-results__options {
    padding: var(--space-2);
}

.select2-results__option {
    padding: var(--space-2) var(--space-3);
    border-radius: calc(var(--radius) - 4px);
    color: var(--color-text);
    font-size: 0.9375rem;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-beige-2) !important;
    color: var(--color-text) !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--color-cream);
    font-weight: 600;
}

.sk-option-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
}

.sk-extra-copies__tip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-grey-1);
}

.sk-extra-copies__tip-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--color-primary);
}

.sk-extra-copies__tip-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-extra-copies__divider {
    border: none;
    border-top: 1px solid var(--color-grey-4);
    margin: 0;
}

.sk-extra-copies__badges {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
}

@media (max-width: 782px) {
    .sk-extra-copies__badges {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
    }
}

.sk-extra-copies__badges li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    border: 1px solid var(--color-grey-4);
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: var(--color-grey-2);
}

.sk-extra-copies__badge-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.sk-extra-copies__badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-extra-copies button.sk-extra-copies__continue {
    margin-top: 32px;
    background-color: #2C301F !important;
    color: var(--color-beige-2) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    padding:14px 49px!important;
}

.sk-extra-copies button.sk-extra-copies__continue:hover,
.sk-extra-copies button.sk-extra-copies__continue:focus-visible {
    background-color: color-mix(in srgb, #2C301F 85%, white) !important;
    color: var(--color-beige-2) !important;
}

@media (max-width: 782px) {
    .sk-extra-copies__continue {
        margin-top: var(--space-5);
    }
}

.sk-extra-copies__skip {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text);
}

/* Screen 2 ("Choose additional copies") — mobile typography overrides. Fill in below. */
@media (max-width: 782px) {
    .sk-extra-copies {
        padding:40px 16px;
    }
    .sk-extra-copies__heading {
        font-size: 40px;
        line-height: 36px;
        letter-spacing: -2%;
    }

    .sk-extra-copies__subheading {
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0%;
    }

    .sk-extra-copies__form{
        padding: 0 var(--space-3) var(--space-4);
    }

    .sk-extra-copies__select-label {
        font-size: 22px;
        line-height: 20px;
        letter-spacing: -2%;
    }

    .sk-extra-copies__select-wrap .select2-selection__rendered {
    }

    .sk-extra-copies__tip {
        font-size: 14px;
        line-height: 130%;
        letter-spacing: 0%;
    }

    .sk-extra-copies__badges li {
    }

    .sk-extra-copies button.sk-extra-copies__continue {
        width: 100%;
        margin-top:32px;
    }

    .sk-extra-copies__skip {
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0%;
    }
}

/* Step 2: "Personal Details" */

.sk-step2 {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding: 70px 60px;
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: var(--space-6) calc(var(--space-6) * 2);
    align-items: start;
    text-align: left;
}

.sk-step2 .sk-step2__progress-label--mobile {
    display: none;
}

@media (max-width: 1024px) {
    .sk-step2 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding:40px 16px;
    }

    .sk-step2__aside {
        order: -1;
    }

    .sk-step2 .sk-step2__progress-label--mobile {
        display: block;
        order: -2;
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0%;
    }

    .sk-step2 .sk-step2__progress-label--desktop {
        display: none;
    }

    .sk-step2__aside {
        padding: var(--space-3);
    }
}

.sk-step-progress-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sk-step2__section {
    position: relative;
    margin-bottom: var(--space-6);
}

.sk-step2__heading {
    font-size: 32px;
    margin-bottom: var(--space-4);
}

.sk-step2__description {
    margin-top: calc(var(--space-4) * -1 + var(--space-1));
    margin-bottom: var(--space-4);
    color: var(--color-grey-3);
    font-size: 16px;
}

/* "Is this a gift?" cards */

.sk-gift-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 782px) {
    .sk-gift-toggle {
        grid-template-columns: 1fr;
    }
}

.sk-gift-toggle__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.sk-gift-toggle__card:has(input:checked) {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.sk-gift-toggle__card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sk-gift-toggle__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.sk-gift-toggle__card:has(input:checked) .sk-gift-toggle__icon {
    color: var(--color-primary);
}

.sk-gift-toggle__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.sk-gift-toggle__card:has(input:checked) .sk-gift-toggle__icon svg path{
    stroke:#D88C23;
}

.sk-gift-toggle__title {
    font-weight: 400;
    font-family: var(--font-family-heading);
    font-size:24px;
}

.sk-gift-toggle__description {
    font-size: 16px;
    color: var(--color-grey-3);
}

/* Billing fields — WooCommerce's own .form-row markup, restyled to plain
   placeholder-only inputs (no visible labels), matching the design. */

.sk-step2 .woocommerce-billing-fields > h3 {
    display: none;
}

.sk-step2 .woocommerce-billing-fields .form-row {
    padding: 0;
    margin: 0 0 var(--space-3);
}

.sk-step2 .woocommerce-billing-fields .form-row label {
    display: none;
}

/* Unlike first/last name and email (placeholder-only, no visible label), the
   mockup shows a visible "Language" label above that field specifically. */
.sk-step2 .woocommerce-billing-fields .form-row.sk-select2 label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-family-base);
    color: var(--color-text);
}

/* Marked required only to suppress WooCommerce's "(optional)" text (see
   storykeeper_simplify_checkout_fields()) — the mockup's label is plain
   "Language" with no required-asterisk either, so hide that too. */
.sk-step2 .woocommerce-billing-fields .form-row.sk-select2 label .required {
    display: none;
}

.sk-step2 .woocommerce-billing-fields .form-row.form-row-first,
.sk-step2 .woocommerce-billing-fields .form-row.form-row-last {
    width: calc(50% - var(--space-2));
}

.sk-step2 .woocommerce-billing-fields .form-row.form-row-first {
    float: left;
}

.sk-step2 .woocommerce-billing-fields .form-row.form-row-last {
    float: right;
}

.sk-step2 .woocommerce-billing-fields .form-row.form-row-wide {
    clear: both;
}

.sk-step2 .woocommerce-billing-fields input.input-text {
    width: 100%;
    padding: 9px 16px;
    border: 1px solid var(--color-grey-4);
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0%;
    color:var(--color-grey-2);
    background-color: unset;
}

/* "Language" field — select2-skinned to match the plain text billing fields above. */

.sk-select2 .select2-container {
    width: 100% !important;
}

.sk-select2 .select2-selection--single {
    height: auto;
    padding: 9px 16px;
    border: 1px solid var(--color-grey-4);
    border-radius: 8px;
    background-color: unset;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0%;
}

.sk-select2 .select2-selection__rendered {
    padding: 0!important;
    font-family: var(--font-family-base);
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.4;
}

.sk-select2 .select2-selection__arrow {
    height: 100%;
    right: var(--space-3)!important;
}

/* Its dropdown (appended into .sk-step2__section, not .sk-extra-copies) needs its
   own border/background reset — the global .select2-dropdown rule below is
   themed for the "Choose additional copies" field's beige palette instead. */
.sk-step2__section .select2-dropdown {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    background-color: #fff !important;
}

.sk-step2__section .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-beige-2) !important;
    color: var(--color-text) !important;
}

/* Gift recipient fields */

.sk-recipient {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}

.sk-recipient__legend {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-family-heading);
    font-size: 1.375rem;
    margin-bottom: var(--space-1);
}

.sk-recipient__legend span {
    order: 1;
}

.sk-recipient__legend::after {
    content: "";
    order: 2;
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-border);
}

.sk-recipient__remove {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted, #9B9C8F);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.sk-recipient__remove:hover {
    color: var(--color-text, #2C301F);
}

.sk-recipient__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 782px) {
    .sk-recipient__row {
        grid-template-columns: 1fr;
    }
}

.sk-recipient__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sk-recipient__field[hidden] {
    display: none;
}

/* Step 2 validation (billing fields + recipient fields, see checkout.js
   validateStep2()) — !important since it needs to win over both the billing
   input rule (multi-class selector) and the recipient input rule alike. */
.sk-field-invalid {
    border-color: #d63638 !important;
}

.sk-recipient__field label {
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-family-base);
}

.sk-recipient input[type="text"],
.sk-recipient input[type="email"],
.sk-recipient input[type="date"],
.sk-recipient textarea {
    width: 100%;
    padding: 9px 16px;
    border: 1px solid var(--color-grey-4);
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0%;
    background-color: unset;
}

.sk-recipient__date-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.sk-recipient__date-wrap input[type="date"] {
    padding-right: 2.5rem;
    /* iOS/iPadOS Safari renders a native <input type="date">'s internal
       value shorter than the shared text/email/textarea rule above resolves
       to — it doesn't grow to fill line-height:28px the way a plain text
       input does, so next to the first-name/email fields on the same step
       it reads as visibly flattened/squashed even though every other box
       model property here is identical. Pinning the box's own height to
       match what the shared rule computes for the others (padding 9px×2 +
       line-height 28px + border 1px×2, border-box) forces it to the same
       height regardless of how the browser sizes the native control
       internally. */
    height: 48px;
}

/* Hides the native calendar icon but keeps it clickable/functional, in the
   same spot our custom icon visually occupies — Chromium-only (no Firefox
   equivalent pseudo-element exists), so Firefox just shows both. */
.sk-recipient__date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: var(--space-3);
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.sk-recipient__date-icon {
    position: absolute;
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    pointer-events: none;
    color: var(--color-grey-3);
}

.sk-recipient__date-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Safari-only fix (see .is-safari in global.js): Safari renders an unset
   `<input type="date">`'s mm/dd/yyyy segments filled in with today's date at
   full opacity — indistinguishable from an actual selection — instead of the
   clearly-greyed "mm/dd/yyyy" Chrome/Firefox show for the same empty state.
   Chrome et al are left completely untouched; this whole block only ever
   applies under html.is-safari. */
html.is-safari .sk-recipient__date-wrap input[type="date"] {
    color: transparent;
}

html.is-safari .sk-recipient__date-wrap input[type="date"].has-value {
    color: var(--color-grey-1);
}

.sk-recipient__date-empty-label {
    display: none;
}

html.is-safari .sk-recipient__date-wrap input[type="date"]:not(.has-value) ~ .sk-recipient__date-empty-label {
    position: absolute;
    left: 16px;
    display: block;
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 28px;
    color: #757575;
    pointer-events: none;
}

.sk-recipient textarea {
    min-height: 120px;
    resize: vertical;
}

/* The message field starts pre-filled with real (submittable) default text
   rather than an HTML placeholder — see addRecipient() in checkout.js — so
   it needs its own color rule to still look like a placeholder until edited.
   #757575 matches the browser's default ::placeholder gray used everywhere
   else on this form, so the field reads identically either way. */
.sk-recipient textarea.sk-recipient__message--default {
    color: #757575;
}

.sk-recipient__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 16px;
    cursor: pointer;
    color:var(--color-grey-1);
}

.sk-recipient__checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 13px;
    height: 13px;
    margin: 0;
}

.sk-recipient__checkbox-box {
    position: relative;
    display: inline-flex;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: #fff;
}

.sk-recipient__checkbox input[type="checkbox"]:checked + .sk-recipient__checkbox-box {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.sk-recipient__checkbox-box::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.sk-recipient__checkbox input[type="checkbox"]:checked + .sk-recipient__checkbox-box::after {
    opacity: 1;
}

.sk-add-recipient-card {
    /* iOS Safari gives a plain <button> (-webkit-appearance: button by
       default) native chrome that includes tinting its text the system
       accent blue, regardless of an author `color` set on a descendant —
       the child .sk-add-recipient-card__text color rule alone didn't
       override it. Stripping native appearance and setting color directly
       on the button itself (not just that descendant) removes the native
       styling that was causing it. */
    -webkit-appearance: none;
    appearance: none;
    color: var(--color-grey-1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
}

.sk-add-recipient-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.sk-add-recipient-card__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-add-recipient-card__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Explicit — without it this (the "Add another recipient" line itself,
       not the <small> below it, which already sets its own color) fell back
       to whatever default the browser gives a <button>'s text, which read
       as blue instead of the theme's usual dark text color. */
    color: var(--color-grey-1);
    font-weight: 400;
    font-family: var(--font-family-heading);
    font-size:24px;
}

.sk-add-recipient-card__text small {
    font-weight: 400;
    color: var(--color-grey-3);
    font-family:var(--font-family-base);
    font-size:14px;
}

.sk-add-recipient-card__arrow {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.sk-step2__continue {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-3);
}

@media (min-width: 783px) {
    .sk-step2__continue {
        width: auto;
    }
}

/* Order summary sidebar */

.sk-step2__aside {
    background-color: #F9F3EA;
    border-radius: 12px;
    padding: var(--space-5);
    border: 1px solid #FAE0C0;
}

.sk-order-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.sk-order-summary__heading {
    font-weight: 400;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: -2%;
}

.sk-checkout .sk-order-summary__clean.button {
    padding: var(--space-3) var(--space-4) !important;
    font-size: 0.875rem !important;
    background-color: #D88C23!important;
}

@media (max-width: 1024px) {
    .sk-order-summary__header {
        flex-wrap: wrap;
        margin-bottom:32px;
    }

    .sk-checkout .sk-order-summary__clean.button {
        flex-basis: 100%;
        justify-content: center;
    }
}

.sk-order-summary__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.sk-order-summary__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-grey-4);
    border-radius: 12px;
}

.sk-order-summary__item-top {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.sk-order-summary__item-image img {
    display: block;
    height:108px;
    width:83px;
    object-fit: cover;
    border-radius: 4px;
}

.sk-order-summary__item-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.sk-order-summary__item-name {
    font-family: var(--font-family-heading);
    font-weight: 400;
    font-size:22px;
}

.sk-order-summary__item-price {
    font-family: var(--font-family-heading);
    font-weight: 400;
    color: var(--color-grey-1);
    font-size:24px;
}

.sk-order-summary__item-meta {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    font-size: 16px;
    color: #6B6E62;
    white-space: nowrap;
}

.sk-order-summary__coupon {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-4);
}

.sk-order-summary__coupon-message:not(:empty) {
    margin-bottom: var(--space-2);
}

.sk-order-summary__coupon-field {
    position: relative;
    display: block;
    width: 100%;
}

.sk-order-summary__coupon input {
    width: 100%;
    padding: var(--space-3);
    padding-right: 100px;
    border: 1px solid var(--color-grey-4);
    border-radius: 6px;
    font-family: var(--font-family-base);
    box-sizing: border-box;
    color: var(--color-grey-2);
    font-size: 14px;
    letter-spacing: 0%;
    background:none;
}

.sk-checkout .sk-order-summary__coupon button.button {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 4px !important;
    padding: 0 var(--space-4) !important;
    background-color: var(--color-grey-1) !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
}

.sk-order-summary__totals {
    padding-top: var(--space-1);
}

.sk-order-summary__totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) 0;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
}

.sk-order-summary__totals-row--total {
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0%;
}

/* Step 2 ("Who is paying for this order?") — mobile typography overrides. Fill in below. */
@media (max-width: 782px) {
    .sk-step2__section {
        margin-bottom:32px;
    }
    /* First/last name stack full-width instead of sitting side by side. */
    .sk-step2 .woocommerce-billing-fields .form-row.form-row-first,
    .sk-step2 .woocommerce-billing-fields .form-row.form-row-last {
        width: 100%;
        float: none;
    }

    .sk-step2__heading {
        font-size: 29px;
        line-height: 20px;
        letter-spacing: -2%;
    }

    .sk-step2 .woocommerce-billing-fields input.input-text {
    }

    .sk-select2 .select2-selection__rendered {
    }

    .sk-step2__continue {
    }

    .sk-order-summary__heading {
        font-size: 22px;
        line-height: 20px;
        letter-spacing: -2%;
    }

    .sk-order-summary__item-name {
        font-size: 22px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .sk-order-summary__item-price {
        font-size: 24px;
        line-height: 100%;
        letter-spacing: -2%;
    }

    .sk-order-summary__item-meta {
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0%;
    }

    .sk-order-summary__coupon input {
        font-size: 14px;
        line-height: 28px;
        letter-spacing: 0%;
    }

    .sk-order-summary__totals-row {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
    }

    .sk-order-summary__totals-row--total {
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0%;
    }
}

/* Checkout footer override — the site-wide footer is dark; this one reuses
   the trustpilot plugin's light-themed carousel and needs a light surface. */

.site-footer.site-footer--checkout {
    background-color: #F9F3EA;
    color: var(--color-text);
    padding-block: var(--space-6);
}

.site-footer--checkout .tpt-slider-section {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

/* The plugin's arrow glyphs ('‹'/'›') are text characters rendered via
   :before — their line-box centers inside the circle, but the visible
   stroke doesn't, because guillemet glyphs aren't optically symmetric in
   most fonts. Swap for a pure-CSS chevron (a rotated border corner) so the
   centering is geometric, not font-dependent. */
.site-footer--checkout .tpt-slider-arrows .slick-prev:before,
.site-footer--checkout .tpt-slider-arrows .slick-next:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    font-size: 0;
    border-style: solid;
    border-color: #000;
    border-width: 0 1.5px 1.5px 0;
}

.site-footer--checkout .tpt-slider-arrows .slick-prev:before {
    transform: rotate(135deg) translate(-1px, -1px);
}

.site-footer--checkout .tpt-slider-arrows .slick-next:before {
    transform: rotate(-45deg) translate(-1px, -1px);
}

/* The alt-header's mobile presentation kicks in at 1330px (not the usual
   782px like the rest of the checkout) — with six labeled pills the header
   gets cramped well before the standard mobile breakpoint. Keep the JS
   pill-width equalizer in checkout.js (min-width: 1331px) in sync with this. */
@media (max-width: 1330px) {
    .sk-checkout-alt-header__steps {
        gap: var(--space-2);
    }

    /* Steps mode: brand + Back stay on their own row (Back's column just has
       nothing in it when hidden — brand stays put, no space-between shift);
       the steps row drops to a full-width second row below a divider
       matching the border color. */
    body.sk-show-alt-header-steps .sk-checkout-alt-header__inner {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }

    body.sk-show-alt-header-steps .sk-checkout-alt-header__back {
        grid-column: 2;
        grid-row: 1;
    }

    body.sk-show-alt-header-steps .sk-checkout-alt-header__steps {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        justify-content: space-between;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        overflow-x: hidden;
    }

    /* No step keeps its label on mobile — every step shows just the number
       (or checkmark, once done), including the active one, to save space.
       The <li> keeps its border/background (the little outlined square look)
       but loses its padding/gap, which used to make room for the label —
       otherwise that leftover space plus justify-content: space-between
       spread the pills out with big empty gaps. */
    .sk-checkout-alt-header__step-label {
        display: none;
    }
    .sk-checkout-alt-header__steps li {
        padding: 4px;
        gap: 0;
    }
}

@media (max-width: 782px) {
    /* Keep the checkout title and step pills visually grouped on phones. */
    body.sk-show-alt-header-steps .sk-checkout-alt-header__steps {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .sk-step2__aside{
        padding: var(--space-3);
    }
    .sk-checkout .sk-order-summary__clean.button{
        margin-top: 24px;
    }
}

/* Step 3: "Payment" — standard WooCommerce payment-methods block, restyled to
   match the rest of the flow (radio cards, bordered field boxes). */

#payment.woocommerce-checkout-payment {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

ul.wc_payment_methods.payment_methods.methods {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/*
 * WooCommerce's core template renders the radio as a sibling BEFORE the
 * label, not nested inside it — a plain flex row on the `<li>` didn't
 * reliably keep the radio aligned with the label (it depended on each
 * gateway's own label content/wrapping, which differs — e.g. "Credit/Debit
 * Cards"'s card icons vs. plain-text "Direct bank transfer"), and CSS alone
 * can't move a preceding sibling to be visually "inside" the label the way
 * the mockup wants. Overridden `woocommerce/checkout/payment-method.php` in
 * this theme to physically move the `<input>` inside the `<label>` (as its
 * first child), so it's now a normal flex child that sits on the left —
 * no special positioning trick needed here at all.
 */
.wc_payment_method {
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
}

/* The bordered row is the label (radio + title + icons), not the li — the li
   itself is just a plain wrapper around that row plus the fields below.
   Scoped to the direct child only — descendant labels further down (saved
   card tokens, the "save to account" checkbox) get their own rules below and
   must not inherit this card-row look. */
.wc_payment_method > label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 20px;
    background-color: unset;
    border-radius: 8px;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0%;
    cursor: pointer;
    border: 1px solid #E1DFD7
}
ul li[class*=payment_method_stripe_] ul.woocommerce-SavedPaymentMethods .wc-stripe-saved-method__title{
    font-size: 14px;
    letter-spacing: 0%;
}

.wc_payment_method input.input-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--color-grey-3);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.wc_payment_method input.input-radio:checked {
    border-color: var(--color-text);
}

.wc_payment_method input.input-radio:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--color-text);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 480px) {
    .wc_payment_method > label img {
        margin-left: 0 !important;
        flex-basis: 100%;
    }
}

.wc_payment_method > label img {
    height: 22px;
    width: auto;
    margin-left: auto !important;
}

#payment.woocommerce-checkout-payment .wc_payment_method .payment_box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: var(--space-3) 0 0 !important;
}

#payment.woocommerce-checkout-payment .wc_payment_method .payment_box::before {
    display: none !important;
}

.wc_payment_method .payment_box p {
    font-size: 0.9375rem;
    color: var(--color-grey-2);
    margin: 0 0 var(--space-3);
}

#wc-stripe-card-element {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: #fff;
}

.wc-payment-form.wc-stripe_cc-container.wc-stripe-gateway-container {
    margin-top: var(--space-3);
}

/* Stripe's "simple" custom card form (WooCommerce → Settings → Payments →
   Stripe → Card Form: Custom form) ships as floating labels over an
   underline — restyled here to match this theme's bordered, static-label
   inputs (see the billing fields above) instead of overriding the plugin's
   own template file, which would get clobbered on a plugin update. */
.wc-stripe-simple-form {
    background-color: transparent !important;
    padding: 0 !important;
}

.wc-stripe-simple-form .row {
    margin: 0 0 var(--space-3) !important;
    gap: var(--space-3);
}

.wc-stripe-simple-form .field {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    height: auto !important;
    margin: 0 !important;
}

.wc-stripe-simple-form .baseline {
    display: none !important;
}

.wc-stripe-simple-form label {
    /* DOM order is input, then label (see simple.php) — `order` renders the
       label first without needing to touch the plugin's own markup. */
    order: -1 !important;
    position: static !important;
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--color-grey-1) !important;
    font-family: var(--font-family-base) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transform: none !important;
}

.wc-stripe-simple-form label::after {
    content: ' *';
    color: #d3455b;
}

.wc-stripe-simple-form .input {
    box-sizing: border-box !important;
    /* `relative` (not `static`) — the card-brand icon Stripe injects inside
       this element positions itself absolutely against it; without a
       positioning context here it fell back to the whole .field (label +
       input stacked), landing near the label instead of centered in the
       input box. */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    /* Plain block layout, not flex — flex turned the mounted Stripe iframe
       into a flex item that could shrink instead of filling the box,
       making the field look fine but stop accepting clicks/typing.
       Symmetric top/bottom padding centers the placeholder instead (the
       original template had this pinned to the bottom via
       position:absolute + padding-bottom only); total height lands at
       ~46px per the mockup assuming the iframe's own natural line height. */
    display: block !important;
    padding: 13px 16px !important;
    opacity: 1 !important;
}

.wc-stripe-simple-form .input iframe {
    width: 100% !important;
    display: block !important;
}

/* High-specificity selector matching the plugin's own bundled stylesheet
   (which sets a white background + 4px radius on .StripeElement globally)
   so these actually win without needing !important everywhere. */
li.payment_method_stripe_cc #wc-stripe-cc-custom-form .StripeElement {
    background: none;
    border: 1px solid var(--color-grey-4);
    border-radius: 8px;
}

.wc-stripe-simple-form .input img {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    height: 24px !important;
    width: 24px !important;
    right: 16px !important;
}

li.payment_method_stripe_cc #wc-stripe-cc-custom-form .StripeElement.focused {
    border-color: var(--color-orange-dark);
}

li.payment_method_stripe_cc #wc-stripe-cc-custom-form .StripeElement.invalid {
    border-color: #d3455b;
}

.wc-stripe-simple-form label, .woocommerce-checkout .woocommerce-checkout #payment ul.payment_methods li .wc-stripe-simple-form label{
    font-family: var(--font-family-base) !important;
    font-weight: 400!important;
    font-size: 14px!important;
    line-height: 130% !important;
    letter-spacing: 0% !important;
    color:#2C301F!important;
}

.__PrivateStripeElement {
    top: -2px;
}

#stripe-exp, #stripe-card-number, #stripe-cvv{
    height:46px!important;
}

.woocommerce-SavedPaymentMethods-saveNew {
    display: flex;
    align-items: center;
    margin-top: var(--space-3) !important;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.woocommerce-SavedPaymentMethods-saveNew input {
    margin: 0;
}

.woocommerce-SavedPaymentMethods-saveNew label {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

/*
 * Saved-card rows (Stripe token list) and the "use a new payment method" row
 * come from the Payment Plugins for Stripe gateway, not our template — the
 * <li> itself carries the plugin's own boxed styling (border/background/
 * padding), which doubled up with our own card look on the nested <label>.
 * Reset the <li> to a plain wrapper and let the <label> be the single
 * visible row, matching the gateway-selection rows above it.
 */
.wc-saved-payment-methods {
    /* Always hidden — checkout always defaults to (and only offers) entering
       a new card, regardless of whether the customer has saved ones. See
       forceNewPaymentMethod() in checkout.js, which also auto-selects the
       gateway's "new" payment-token radio so the card form stays visible. */
    display: none !important;
}

.wc-stripe-saved-method,
.woocommerce-SavedPaymentMethods-new {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.wc-stripe-saved-method__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #E1DFD7;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/*
 * The input is moved inside the label via JS (global.js) since this markup
 * is rendered by the Stripe gateway plugin, not an overridable template.
 * The plugin also ships its own `position: absolute !important` on a much
 * more specific selector (compound ul/li/class chain), which otherwise beats
 * this rule despite both being !important — prefix with #payment to win on
 * specificity rather than relying on source order.
 */
#payment .wc-stripe-saved-method__input {
    position: relative !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1.5px solid var(--color-grey-3);
    border-radius: 50%;
    flex-shrink: 0;
    order: -1;
    cursor: pointer;
}

.wc-stripe-saved-method__input:checked {
    border-color: var(--color-text);
}

.wc-stripe-saved-method__input:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--color-text);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.wc-stripe-saved-method__icon {
    order: 1;
    margin-left: auto;
    height: 22px;
    width: auto;
}

.wc-stripe-saved-method__see-more {
    font-size: 0.8125rem;
}

.woocommerce-terms-and-conditions-wrapper {
    display: none;
    margin-bottom: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-grey-2);
}

.sk-checkout .button.alt#place_order {
    width: 100%;
    justify-content: center;
    float:left!important;
}
.woocommerce-checkout #payment div.form-row{
    padding:0!important;
}
@media (min-width: 783px) {
    .sk-checkout .button.alt#place_order {
        width: auto;
    }
}

/* Thank-you page */

.sk-thankyou {
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-3);
    text-align: center;
}

.sk-thankyou .sk-rating {
    margin-bottom: 0;
}

.sk-thankyou__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 20rem;
    margin: 0 auto var(--space-4);
}

.sk-thankyou__ornament-line {
    width: 96px;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.sk-thankyou__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.sk-thankyou__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-thankyou__heading {
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2%;
}

.sk-thankyou__subheading {
    max-width: 32rem;
    margin:24px auto 40px auto;
    color: var(--color-grey-1);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;

}

.sk-thankyou__rating {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

.sk-thankyou__rating--mobile {
    display: none;
}

.sk-thankyou__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
    text-align: left;
}

.sk-thankyou__help--mobile {
    display: none;
    text-align: left;
}

.sk-thankyou__main,
.sk-thankyou__aside {
    background-color: #F9F3EA;
    border: 1px solid #FAE0C0;
    border-radius: 8px;
    padding: 32px;
}

.sk-thankyou__aside {
    display: flex;
}

.sk-thankyou__aside .sk-order-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sk-thankyou__callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 12px;
    margin-bottom: 24px;
    background-color: #FDF1E0;
    border: 1px solid var(--color-orange-dark);
    border-radius: 12px;
}

.sk-thankyou__callout-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.sk-thankyou__callout-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-thankyou__callout p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-grey-3);
}

.sk-thankyou__callout p strong {
    color: var(--color-text);
}

.sk-thankyou__steps-heading {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0%;
    margin-bottom: var(--space-4);
}

.sk-thankyou__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.sk-thankyou__step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-grey-4);
    border-radius: 12px;
}

/* The box is a ::before (not border/background on this element directly) —
   same split used for .two-ways__or (blocks/two-ways/style.css) — so the
   macOS Core Text nudge below can shift the flex-centered digit without
   dragging the border box along with it (that same mismatch is the FAQ
   digit-centering bug — see blocks/faq/style.css — just also visible here). */
.sk-thankyou__step-index {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    color: var(--color-grey-1);
}

.sk-thankyou__step-index::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-grey-4);
    border-radius: 3.35px;
    pointer-events: none;
}


.sk-thankyou__step-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-style: Semibold;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
}

.sk-thankyou__step-text span {
    color: var(--color-grey-2);
    font-size: 0.9375rem;
}

.sk-thankyou__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: var(--space-5);
}

.sk-thankyou__button.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    border-radius: 8px !important;
    text-align: center;
}

.sk-thankyou__button--primary.button {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.sk-thankyou__button--primary.button:hover {
    background-color: color-mix(in srgb, var(--color-primary) 85%, black) !important;
    color: #fff !important;
}

.sk-thankyou__button--outline.button {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

.sk-thankyou__button--outline.button:hover {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    color: var(--color-primary) !important;
}

.sk-thankyou__safety {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid #9B9C8F;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    color: var(--color-grey-1);
    justify-content: center;
}

.sk-thankyou__safety-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sk-thankyou__safety-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sk-thankyou__aside .sk-order-summary__heading {
    font-size: 32px;
    margin-bottom: var(--space-4);
}

.sk-thankyou__summary-rows {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.sk-thankyou__summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color:var(--color-grey-2);
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0%;
    margin-bottom: 12px;
}

.sk-thankyou__summary-row:first-child {
    padding-top: 0;
}

.sk-thankyou__summary-row--total {
    border-bottom: none;
    padding-bottom: 0;
}

.sk-thankyou__summary-row span:first-child {
    color: var(--color-grey-2);
}

.sk-thankyou__summary-row span:last-child {
    font-weight: 400;
}

.sk-thankyou__summary-row--total span {
    font-size: 1.25rem;
    font-weight: 700;
}

.sk-thankyou__help {
    margin-top: auto;
}

.sk-thankyou__help h3 {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0%;
    margin-bottom: 12px;
    padding-top:20px;
    border-top: 1px solid #9B9C8F;
}

.sk-thankyou__help p {
    margin: 0 0 12px;
    color: var(--color-grey-1);
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
}

.sk-thankyou__help-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
}

.sk-thankyou__help-row:last-child {
    margin-bottom: 0;
}

.sk-thankyou__help-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-primary);
}

.sk-thankyou__help-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 782px) {
    .sk-thankyou__columns {
        grid-template-columns: 1fr;
    }

    .sk-thankyou__aside {
        order: -1;
    }

    .sk-thankyou__actions {
        flex-direction: column;
    }

    .sk-thankyou__button.button {
        width: 100%;
        justify-content: center;
    }

    .sk-thankyou__help--desktop {
        display: none;
    }

    .sk-thankyou__help--mobile {
        display: block;
        margin-top: var(--space-6)!important;
    }
    .sk-thankyou__main,
    .sk-thankyou__aside {
        padding: var(--space-3);
    }

    .sk-thankyou__rating--mobile {
        display: flex;
    }

    .sk-thankyou__rating--desktop {
        display: none;
    }
}
/* Checkout flow — two ways to create: preserve the full vertical image framing while keeping the first screen compact. */
@media (min-width: 900px) {
    .sk-ways-to-create-option__image {
        aspect-ratio: 16 / 9;
    }

    .sk-ways-to-create-option__body {
        gap: 6px;
        padding: 12px 24px;
    }

    .sk-ways-to-create-option__description {
        margin-bottom: 8px;
    }

    .sk-ways-to-create-option__button {
        margin-bottom: 8px;
    }

    .sk-ways-to-create__inner {
        padding-top: 24px;
    }

    .sk-ways-to-create__intro {
        margin-bottom: 16px;
    }

    .sk-ways-to-create__options {
        margin-bottom: 16px;
    }

    .sk-ways-to-create__banner {
        margin-bottom: 8px;
    }
}

/* Checkout plan cards — give the plan prices a small breather under their names. */
.sk-choose-access-card__price {
    margin-top: 8px;
}

/* Book Type is an explanatory step, not a method-selection screen. */
.sk-ways-to-create__options--informational {
    width: min(100%, 1080px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 auto 28px;
}

.sk-ways-to-create-info-card {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    align-items: center;
    padding: 46px 32px 36px;
    border: 1px solid #ead8bf;
    border-radius: 16px;
    background: rgba(255, 253, 249, 0.58);
    color: var(--color-grey-1);
    text-align: center;
}

.sk-ways-to-create-info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 28px;
    border-radius: 50%;
}

.sk-ways-to-create-info-card__icon svg {
    display: block;
    width: 39px;
    height: 39px;
}

.sk-ways-to-create-info-card__icon--record {
    position: relative;
    width: 168px;
    background: transparent;
}

.sk-ways-to-create-info-card__icon--record span {
    position: absolute;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ddefe3;
}

.sk-ways-to-create-info-card__icon--record span + span {
    right: 0;
    z-index: 2;
    background: #d4eadd;
}

.sk-ways-to-create-info-card__icon--record span:first-child {
    left: 0;
    z-index: 1;
}

.sk-ways-to-create-info-card__icon--record span svg {
    transform: none;
}

.sk-ways-to-create-info-card__icon--write {
    background: #e5dcf3;
}

.sk-ways-to-create-info-card__icon--talk {
    background: #faecc8;
}

.sk-ways-to-create-info-card h2 {
    margin: 0;
    color: var(--color-grey-1);
    font-family: var(--font-family-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
}

.sk-ways-to-create-info-card h2::after {
    display: block;
    width: 94px;
    height: 18px;
    margin: 16px auto 14px;
    background: center / contain no-repeat url('../icons/flourish.svg');
    content: '';
}

.sk-ways-to-create-info-card p {
    max-width: 260px;
    margin: 0;
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 17px;
    line-height: 1.48;
}

.sk-ways-to-create__banner--informational {
    width: min(100%, 1080px);
    margin: 0 auto 32px;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px 18px 32px;
    border-radius: 12px;
    box-sizing: border-box;
    border: 0;
    background: #fffaf3;
    color: var(--color-grey-1);
    box-shadow: inset 0 0 0 1px #d9d7cf;
}

.sk-ways-to-create__banner--informational .sk-ways-to-create__banner-text {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-grey-1);
    font-weight: 600;
}

.sk-ways-to-create__banner-heart {
    display: none;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.sk-ways-to-create__banner-heart svg {
    width: 100%;
    height: 100%;
}

.sk-ways-to-create__banner--informational .sk-ways-to-create__banner-button {
    min-width: 174px;
    background: #42462f;
    color: var(--color-cream);
}

@media (max-width: 899px) {
    .sk-ways-to-create__options--informational {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 20px;
    }

    .sk-ways-to-create-info-card {
        min-height: 0;
        padding: 30px 24px;
    }

    .sk-ways-to-create-info-card__icon {
        margin-bottom: 18px;
        transform: scale(0.82);
    }

    .sk-ways-to-create-info-card h2 {
        font-size: 32px;
    }

    .sk-ways-to-create-info-card p {
        max-width: 32rem;
        font-size: 16px;
    }

    .sk-ways-to-create__banner--informational {
        align-items: stretch;
        gap: 16px;
        padding: 20px;
    }

    .sk-ways-to-create__banner--informational .sk-ways-to-create__banner-text {
        justify-content: center;
        font-size: 16px;
        line-height: 1.4;
    }

    .sk-ways-to-create__banner--informational .sk-ways-to-create__banner-button {
        min-width: 0;
    }
}

@media (min-width: 900px) {
    .sk-ways-to-create__inner {
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .sk-ways-to-create__intro {
        margin-bottom: 28px;
    }

    .sk-ways-to-create__heading {
        font-size: clamp(48px, 4.15vw, 64px);
        line-height: 0.98;
    }

    .sk-ways-to-create__subheading {
        max-width: 720px;
    }

    .sk-ways-to-create__trust {
        margin-top: 0;
    }
}