/* ================= Landing page (single-product funnel) =================
   Deliberately NOT the storefront shell — no nav, no search, no cart icons.
   Everything lives inside ONE continuous frame: hero → price → trust →
   features → description → reviews → the actual order form. One product,
   one scroll, one job: get an order without leaving the page.

   Color themes are admin-selectable (Design tab) — each `.lp-theme-*` class
   just redefines these custom properties, every rule below reads from them
   so a theme swap re-colors the whole page instantly. */

* { box-sizing: border-box; }
.landing-body { background: #EFEAE3; }

.lp-theme-rose   { --lp-accent: #4B2E59; --lp-accent-dark: #34203E; --lp-tint-1: #FBEAF0; --lp-tint-2: #F7EFE9; --lp-tint-3: #FDF3E7; }
.lp-theme-sunset { --lp-accent: #E2673B; --lp-accent-dark: #B8471F; --lp-tint-1: #FFE9DD; --lp-tint-2: #FFF1E0; --lp-tint-3: #FFF6E5; }
.lp-theme-ocean  { --lp-accent: #147A8C; --lp-accent-dark: #0D5A68; --lp-tint-1: #DFF3F5; --lp-tint-2: #E4F6EF; --lp-tint-3: #EAF7FB; }
.lp-theme-forest { --lp-accent: #2F7D4F; --lp-accent-dark: #1F5A38; --lp-tint-1: #E4F5E8; --lp-tint-2: #F0F6E3; --lp-tint-3: #E9F7EF; }
.lp-theme-royal  { --lp-accent: #6C3FA3; --lp-accent-dark: #4C2C77; --lp-tint-1: #F0E6FA; --lp-tint-2: #FBEAF5; --lp-tint-3: #EEE9FC; }

/* ---- Ticker ---- */
.landing-ticker {
    background: var(--rose-deep); color: #fff; text-align: center;
    font-size: .78rem; font-weight: 600; letter-spacing: .02em;
    padding: 8px 14px;
}

/* ---- Minimal header ---- */
.landing-header {
    display: flex; justify-content: center; padding: 14px;
    background: var(--header-footer-bg); border-bottom: 1px solid var(--line);
}
.landing-header__logo { display: inline-flex; align-items: center; gap: 8px; }

/* ---- The one continuous frame ---- */
.lp-frame {
    max-width: 640px; margin: 18px auto; background: #fff;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 50px -28px rgba(0,0,0,.35);
}
.lp-block { padding: 26px 22px; }
.lp-block--center { text-align: center; }
.lp-block__title { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin: 0 0 16px; text-align: center; color: var(--ink); }
.lp-block__title--onaccent { color: #fff; }

/* Per-theme button + link accents, scoped to the frame so it never leaks to the rest of the site */
.lp-frame .btn--primary { background: linear-gradient(120deg, var(--lp-accent) 0%, var(--lp-accent-dark) 100%); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--lp-accent) 60%, transparent); }
.lp-frame a { color: var(--lp-accent); }

/* ---- Hero ---- */
.lp-hero { padding: 16px 16px 0; background: linear-gradient(180deg, var(--lp-tint-1) 0%, #fff 100%); }
.lp-hero__frame { background: var(--lp-tint-1); border-radius: 16px; padding: 10px; }
.lp-hero__main {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 12px;
    background-size: cover; background-position: center; background-color: #f2ece6;
    position: relative;
}
@media (min-width: 500px) { .lp-hero__main { aspect-ratio: 4 / 3; } }
.lp-hero__badge {
    position: absolute; top: 12px; left: 12px; background: rgba(20,20,20,.7); color: #fff;
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
}
.lp-hero__discount {
    position: absolute; top: 12px; right: 12px; background: var(--lp-accent); color: #fff;
    font-size: .8rem; font-weight: 700; padding: 7px 12px; border-radius: 999px;
}
.lp-hero__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 2px 2px 4px; }
.lp-hero__thumb {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 8px; border: 2px solid transparent;
    background-size: cover; background-position: center; cursor: pointer; padding: 0;
    opacity: .6; transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.lp-hero__thumb.is-active { opacity: 1; border-color: var(--lp-accent); transform: scale(1.05); }
.lp-hero__thumb:hover { opacity: 1; }

/* ---- Title / price block ---- */
.lp-block--price { background: linear-gradient(180deg, #fff 0%, var(--lp-tint-2) 100%); }
.lp-order__title { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin: 0 0 6px; color: var(--ink); }
.lp-order__subheadline { color: var(--lp-accent); font-weight: 600; font-size: .9rem; margin: 0 0 8px; }
.lp-order__stars { font-size: .85rem; color: var(--gold); margin-bottom: 10px; }
.lp-order__stars span { color: var(--muted); font-size: .8rem; }

.lp-social-proof {
    display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600;
    color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 10%, #fff);
    padding: 6px 14px; border-radius: 999px; margin: 0 0 14px;
}
.lp-social-proof::before { content: "●"; color: #2ecc71; font-size: .6rem; }

/* ---- Variant selector ---- */
.lp-variants { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.lp-variant {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px;
    background: #fff; border: 2px solid var(--line); border-radius: 12px; cursor: pointer;
    font: inherit; min-width: 64px;
}
.lp-variant.is-active { border-color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 8%, #fff); }
.lp-variant__thumb { width: 44px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; background-color: #f2ece6; }
.lp-variant__name { font-size: .72rem; font-weight: 600; color: var(--ink); text-align: center; max-width: 80px; }

/* ---- Combo bundle contents ---- */
.lp-combo-items { margin: 4px 0 18px; }
.lp-combo-items__label { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.lp-combo-items__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lp-combo-item { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 90px; }
.lp-combo-item__link { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.lp-combo-item__link:hover .lp-combo-item__name { color: var(--lp-accent); text-decoration: underline; }
.lp-combo-item__thumb { width: 56px; height: 56px; border-radius: 12px; background-size: cover; background-position: center; background-color: #f2ece6; border: 2px solid var(--line); }
.lp-combo-item__name { font-size: .72rem; font-weight: 600; color: var(--ink); text-align: center; }
.lp-combo-item__variant { font-size: .72rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); max-width: 110px; }

.lp-order__price { font-size: 1.5rem; margin-bottom: 10px; }
.lp-order__price .price-old { font-size: .95rem; color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.lp-order__price .price-now { color: var(--lp-accent); font-weight: 700; }
.lp-order__price .save-tag { font-size: .72rem; background: var(--lp-accent); color: #fff; padding: 3px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }

.lp-order__short { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.lp-order__cta { display: inline-block; padding: 14px 34px; font-size: 1rem; border-radius: 999px; margin-bottom: 20px; text-decoration: none !important; }
/* .lp-frame a { color: var(--lp-accent) } (generic link color) otherwise wins
   here by specificity, since it's an <a> — making the button text the same
   purple as its own gradient background and invisible. */
.lp-frame .lp-order__cta { color: #fff; }

.lp-payments { margin-top: 4px; }
.lp-payments__label { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
.lp-payments__row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.lp-payments__row svg, .lp-payments__row img { border-radius: 4px; }
.lp-payments__cod { font-size: .72rem; font-weight: 600; color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 12%, #fff); padding: 4px 10px; border-radius: 999px; }

/* ---- Trust strip — colored icon chips ---- */
.lp-block--trust { background: var(--lp-tint-3); display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.lp-trust__item { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--ink); }
.lp-trust__icon {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lp-accent) 16%, #fff); flex-shrink: 0;
}
.lp-trust__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--lp-accent); stroke-width: 1.8; }

/* ---- Features — colored bullet chips ---- */
.lp-block--features { background: #fff; }
.lp-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.lp-features li { display: flex; align-items: center; gap: 12px; font-size: .93rem; color: var(--ink); }
.lp-features__icon {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--lp-accent); flex-shrink: 0;
}
.lp-features__icon svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; }

/* ---- Description ---- */
.lp-block--description { background: var(--lp-tint-2); }
.lp-description { color: var(--ink); opacity: .8; line-height: 1.85; font-size: .93rem; }

/* ---- Reviews ---- */
.lp-block--reviews { background: #fff; }
.lp-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.lp-reviews .review-card { width: auto; flex-basis: auto; border-color: color-mix(in srgb, var(--lp-accent) 25%, var(--line)); }

/* ---- Embedded checkout — the actual order form ---- */
.lp-block--checkout { background: var(--lp-tint-1); }
/* Neutralize the site-wide .checkout-form card chrome — this form already
   lives inside a .lp-block, it doesn't need its own nested border/box. */
.lp-checkout .checkout-form { background: transparent; border: none; padding: 0; }
.lp-checkout__errors { background: #FEE2E2; color: #991B1B; padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin-bottom: 16px; }
.lp-checkout__summary { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 18px; box-shadow: 0 8px 20px -14px rgba(0,0,0,.3); }
.lp-checkout__summary-row { display: flex; align-items: center; gap: 12px; }
.lp-checkout__summary-row img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.lp-checkout__summary-row > div { flex: 1; min-width: 0; }
.lp-checkout__summary-name { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink); }
.lp-checkout__summary-price { font-size: .78rem; color: var(--muted); }
.lp-checkout__summary-total {
    display: flex; justify-content: space-between; align-items: center; margin-top: 12px;
    padding-top: 12px; border-top: 1px dashed var(--line); font-size: .95rem;
}
.lp-checkout__summary-total strong { color: var(--lp-accent); font-size: 1.1rem; }
.lp-checkout__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* The site-wide checkout form uses a warm tan input background (--paper)
   that reads fine on the plain storefront page, but clashes against the
   landing page's colored tint blocks — force clean white here instead. */
.lp-checkout .checkout-form input:not([type="radio"]):not([type="checkbox"]),
.lp-checkout .checkout-form select,
.lp-checkout .checkout-form textarea { background: #fff; border-color: var(--line); }
.lp-checkout .checkout-form input:focus, .lp-checkout .checkout-form select:focus, .lp-checkout .checkout-form textarea:focus { border-color: var(--lp-accent); }
.lp-checkout .checkout-form label.checkout-payment__option { background: #fff; }

/* ---- Final CTA — bold colored banner ---- */
.lp-block--final-cta {
    background: linear-gradient(135deg, var(--lp-accent) 0%, var(--lp-accent-dark) 100%);
    color: #fff;
}
.lp-block--final-cta .lp-block__title { color: #fff; }
.lp-block--final-cta p { color: rgba(255,255,255,.85); margin: 0 0 20px; }
.lp-block--final-cta .btn--primary { background: #fff; color: var(--lp-accent); box-shadow: none; }

/* ---- Floating order bar ---- */
.lp-floating-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: #fff; border-top: 3px solid var(--lp-accent);
    padding: 12px 18px; box-shadow: 0 -6px 20px rgba(0,0,0,.12);
    transform: translateY(100%); transition: transform .25s ease;
    text-decoration: none !important;
}
.lp-floating-bar.is-visible { transform: translateY(0); }
.lp-floating-bar__price { font-weight: 700; font-size: 1.02rem; color: var(--lp-accent); }
.lp-floating-bar .btn { white-space: nowrap; padding: 10px 24px; pointer-events: none; }

/* ---- Minimal footer ---- */
.landing-footer { text-align: center; padding: 20px; background: var(--rose-deep); color: rgba(255,255,255,.85); font-size: .78rem; }
.landing-footer__contact { margin: 0 0 6px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.landing-footer__contact a { color: #fff; font-weight: 600; }
.landing-footer__copy { margin: 0; opacity: .7; }

/* ---- Mobile hardening — every section fluid down to ~320px ---- */
@media (max-width: 680px) {
    .lp-frame { margin: 0; border-radius: 0; }
}
@media (max-width: 640px) {
    .landing-ticker { font-size: .72rem; padding: 7px 10px; }
    .lp-block { padding: 20px 16px; }
    .lp-hero { padding: 12px 12px 0; }
    .lp-hero__frame { border-radius: 12px; padding: 8px; }
    .lp-hero__main { border-radius: 10px; }
    .lp-hero__thumb { width: 44px; height: 44px; }
    .lp-order__title { font-size: 1.15rem; }
    .lp-order__price { font-size: 1.25rem; }
    .lp-order__cta { width: 100%; padding: 13px 20px; font-size: .95rem; }
    .lp-payments__row { gap: 8px; }
    .lp-block--trust { gap: 14px; padding: 18px 16px; }
    .lp-trust__item { font-size: .74rem; }
    .lp-trust__icon { width: 28px; height: 28px; }
    .lp-trust__icon svg { width: 15px; height: 15px; }
    .lp-block__title { font-size: 1.05rem; }
    .lp-checkout__row { grid-template-columns: 1fr; gap: 0; }
    .lp-block--checkout { padding-bottom: 76px; }
    .lp-floating-bar { padding: 10px 14px; gap: 10px; }
    .lp-floating-bar__price { font-size: .9rem; }
    .lp-floating-bar .btn { padding: 9px 18px; font-size: .86rem; }
}

@media (max-width: 360px) {
    .qty-box { justify-content: center; }
}