:root {
    --picabo-primary: #d6336c;
    --picabo-primary-dark: #a61e4d;
    --picabo-accent: #ffd43b;
}

body.landing-page {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #222;
    background: #fff;
}

img { max-width: 100%; height: auto; }

/* Shared chrome */
.landing-topbar {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.landing-brand img { max-height: 42px; }
.landing-brand { font-weight: 700; font-size: 1.25rem; color: var(--picabo-primary); text-decoration: none; }

.landing-footer {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: .85rem;
    border-top: 1px solid #eee;
    margin-top: 30px;
}

.landing-cta-btn {
    background: var(--picabo-primary);
    color: #fff;
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 1.1rem;
    display: inline-block;
    margin-top: 16px;
    border: none;
    text-decoration: none;
}
.landing-cta-btn:hover { background: var(--picabo-primary-dark); color: #fff; }

.landing-section-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.lp-section { max-width: 800px; margin-left: auto; margin-right: auto; }
.lp-section-gallery, .lp-section-testimonials { max-width: 960px; }

/* Order box (shared by all 3 styles) */
.landing-order-box {
    background: #fafafa;
    border: 2px solid var(--picabo-primary);
    border-radius: 12px;
    padding: 24px;
}
.landing-order-title { font-weight: 700; margin-bottom: 8px; text-align: center; }
.landing-order-price { font-size: 1.8rem; font-weight: 800; color: var(--picabo-primary); margin-bottom: 14px; text-align: center; }
.landing-order-price-old { font-size: 1rem; color: #999; text-decoration: line-through; margin-left: 10px; font-weight: 400; }
.landing-order-submit {
    background: var(--picabo-accent);
    color: #222;
    font-weight: 700;
    padding: 14px;
    border-radius: 8px;
    border: none;
    font-size: 1.05rem;
}
.landing-order-submit:hover { opacity: .9; }
.landing-order-note { font-size: .85rem; color: #777; margin-top: 10px; text-align: center; }
.landing-qty-input { max-width: 100px; }

/* Highlights (section) */
.lp-highlights-list { list-style: none; padding: 0; margin: 0; }
.lp-highlights-list li { padding: 8px 0; font-size: 1.05rem; }
.lp-highlights-list li i { color: #2f9e44; margin-right: 8px; }

/* Details (description + video) */
.lp-description { font-size: 1.02rem; line-height: 1.6; }
.lp-video { margin-top: 16px; }

/* Gallery */
.lp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.lp-gallery-grid img { border-radius: 8px; }

/* Testimonials */
.landing-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.landing-testimonial-card { background: #f8f9fa; border-radius: 10px; padding: 16px; }
.landing-testimonial-stars { color: #f5a623; margin-bottom: 8px; }
.landing-testimonial-comment { font-style: italic; }
.landing-testimonial-author { font-weight: 600; margin-top: 8px; margin-bottom: 0; }

/* === Style: Classic === */
.lp-classic-hero { background: #fff5f7; padding: 40px 0; }
.lp-classic-hero-img { max-height: 380px; border-radius: 12px; margin-bottom: 20px; }
.lp-classic-headline { font-size: 2rem; font-weight: 800; }
.lp-classic-subheadline { font-size: 1.1rem; color: #666; }
.lp-classic .lp-highlights-list { max-width: 600px; margin: 0 auto; }

/* === Style: Bold === */
.lp-bold-hero { background: linear-gradient(135deg, var(--picabo-primary), var(--picabo-primary-dark)); color: #fff; padding: 50px 0; text-align: center; }
.lp-bold-headline { font-size: 2.3rem; font-weight: 900; text-transform: uppercase; }
.lp-bold-subheadline { font-size: 1.15rem; opacity: .9; }
.lp-bold-hero-img { max-height: 340px; border-radius: 12px; margin: 20px 0; border: 4px solid #fff; }
.lp-bold-cta { background: var(--picabo-accent); color: #222; }
.lp-bold .lp-section-highlights { background: #fff8e1; max-width: 100%; padding-top: 30px; padding-bottom: 30px; }
.lp-bold .lp-section-highlights .lp-highlights-list { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.lp-bold .lp-section-highlights .lp-highlights-list li { background: #fff; border-radius: 10px; padding: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.lp-bold .lp-section-highlights .lp-highlights-list li i { display: block; font-size: 1.4rem; margin: 0 0 8px; }
.lp-bold .lp-section-testimonials { background: #f8f9fa; max-width: 100%; padding-top: 30px; padding-bottom: 30px; }
.lp-bold-order-band { background: #fafafa; padding: 40px 0; }
.lp-bold-sticky-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; padding: 10px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
    z-index: 1000;
}

/* === Style: Gallery === */
.lp-gallery-carousel img { border-radius: 12px; max-height: 420px; width: 100%; object-fit: cover; }
.lp-gallery-headline { font-size: 1.8rem; font-weight: 800; }
.lp-gallery-subheadline { color: #666; font-size: 1.05rem; }

/* Mobile */
@media (max-width: 767px) {
    .lp-bold-headline { font-size: 1.6rem; }
    .lp-classic-headline { font-size: 1.5rem; }
    body.landing-page { padding-bottom: 70px; } /* room for sticky bar on bold style */
}

/* === Admin builder === */
.lp-builder-toolbar {
    position: sticky; top: 0; z-index: 1100;
    background: #1f2937; color: #fff;
    padding: 10px 20px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.lp-builder-toolbar select, .lp-builder-toolbar input[type=text] {
    padding: 6px 10px; border-radius: 6px; border: none;
}
.lp-builder-toolbar .btn { margin-left: auto; }
.lp-section-draggable { position: relative; border: 2px dashed transparent; transition: border-color .15s; }
.lp-section-draggable:hover { border-color: #adb5bd; }
.lp-drag-handle {
    cursor: grab; display: inline-flex; align-items: center; gap: 6px;
    background: #343a40; color: #fff; font-size: .8rem;
    padding: 4px 10px; border-radius: 6px 6px 0 0;
    position: absolute; top: -26px; left: 0;
    opacity: 0; transition: opacity .15s;
}
.lp-section-draggable:hover .lp-drag-handle { opacity: 1; }
.lp-section-draggable.lp-sortable-ghost { opacity: .3; }
[contenteditable="true"] { outline: 1px dashed #adb5bd; outline-offset: 2px; cursor: text; }
[contenteditable="true"]:focus { outline: 2px solid var(--picabo-primary, #d6336c); }
.lp-repeater-item { position: relative; }
.lp-repeater-remove {
    position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #e03131; color: #fff; border: none; font-size: .75rem; line-height: 1;
    cursor: pointer;
}
.lp-add-item-btn { margin-top: 8px; }
.lp-hero-upload-trigger { cursor: pointer; position: relative; display: inline-block; }
.lp-hero-upload-trigger::after {
    content: "Click to change image"; position: absolute; inset: 0;
    background: rgba(0,0,0,.45); color: #fff; display: flex;
    align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
    border-radius: 12px; font-size: .9rem;
}
.lp-hero-upload-trigger:hover::after { opacity: 1; }
.lp-order-form-preview { pointer-events: none; opacity: .85; position: relative; }
.lp-order-form-preview::before {
    content: "Live order form — appears like this on the published page";
    display: block; text-align: center; font-size: .8rem; color: #777;
    margin-bottom: 8px; pointer-events: none;
}
.lp-inline-input {
    background: transparent; border: none; border-bottom: 1px dashed rgba(0,0,0,.2);
    text-align: center; width: 100%; max-width: 600px; margin: 0 auto;
    display: block; font: inherit; color: inherit;
}
.lp-inline-input:focus { outline: none; border-bottom-color: var(--picabo-primary, #d6336c); }
.lp-inline-input::placeholder { color: rgba(0,0,0,.35); }
.lp-bold .lp-inline-input::placeholder { color: rgba(255,255,255,.6); }
.lp-inline-h1 { font-size: 2rem; font-weight: 800; }
.lp-bold .lp-inline-h1 { font-size: 2.3rem; font-weight: 900; text-transform: uppercase; }
.lp-gallery .lp-inline-h1 { font-size: 1.8rem; font-weight: 800; }
a.lp-inline-btn, button.lp-inline-btn { max-width: 320px; }
.lp-readonly-note {
    background: #f1f3f5; border: 1px dashed #ced4da; border-radius: 8px;
    padding: 14px; text-align: center; color: #666; font-size: .85rem;
}
.lp-video-url-field { max-width: 500px; margin: 10px auto 0; }
.lp-section-label {
    text-transform: uppercase; font-size: .7rem; letter-spacing: .05em;
    color: #999; font-weight: 700; margin-bottom: 6px; text-align: center;
}

/* ===================== Advanced builder: blocks and page options ===================== */
/* design options (builder > ডিজাইন) */
.lp-has-heading-font h1, .lp-has-heading-font h2, .lp-has-heading-font h3, .lp-has-heading-font .lt-headline,
.lp-has-heading-font .lt-section-title, .lp-has-heading-font .landing-section-title, .lp-has-heading-font .landing-order-title { font-family: var(--lp-heading-font) !important; }
.lp-has-body-font, .lp-has-body-font .lp-theme, .lp-has-body-font .accordion-button { font-family: var(--lp-body-font) !important; }
.lp-btn-pill .lt-btn, .lp-btn-pill .landing-cta-btn, .lp-btn-pill .landing-order-submit { border-radius: 50px !important; }
.lp-btn-rounded .lt-btn, .lp-btn-rounded .landing-cta-btn, .lp-btn-rounded .landing-order-submit { border-radius: 12px !important; }
.lp-btn-square .lt-btn, .lp-btn-square .landing-cta-btn, .lp-btn-square .landing-order-submit { border-radius: 3px !important; }
.lp-btn-size-lg .lt-btn, .lp-btn-size-lg .landing-cta-btn { padding: 17px 44px !important; font-size: 1.2rem !important; }
.lp-btn-size-xl .lt-btn, .lp-btn-size-xl .landing-cta-btn { padding: 20px 54px !important; font-size: 1.35rem !important; }
.lp-btn-size-lg .landing-order-submit { padding: 15px !important; font-size: 1.15rem !important; }
.lp-btn-size-xl .landing-order-submit { padding: 18px !important; font-size: 1.3rem !important; }

.lp-block { max-width: 1000px; margin: 0 auto; }
.lp-block .landing-section-title, .lp-block .lt-section-title { margin-bottom: 22px; }

/* countdown */
.lp-countdown { text-align: center; background: var(--picabo-primary, #d6336c); color: #fff; border-radius: 18px; padding: 22px 16px; max-width: 640px; margin: 0 auto; box-shadow: 0 18px 40px -22px var(--picabo-primary, #d6336c); }
.lp-countdown-title { font-weight: 700; font-size: 1.15rem; margin-bottom: 12px; }
.lp-countdown-boxes { display: flex; justify-content: center; gap: 12px; }
.lp-countdown-boxes > div { background: rgba(255,255,255,.16); border-radius: 12px; min-width: 74px; padding: 10px 6px; }
.lp-countdown-boxes b { display: block; font-size: 2rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-countdown-boxes span { font-size: .8rem; opacity: .9; }
.lp-countdown-expired { font-weight: 600; }

/* stock and orders */
.lp-urgency { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin: 0 auto; }
.lp-urgency-line { background: #fff4e5; border: 1px solid #ffd8a8; color: #a14600; border-radius: 12px; padding: 11px 16px; font-weight: 600; text-align: center; animation: lpPulse 2.4s ease-in-out infinite; }
.lp-urgency-line i { margin-right: 6px; }
@keyframes lpPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,146,43,0); } 50% { box-shadow: 0 0 0 6px rgba(255,146,43,.12); } }

/* own reviews */
.lp-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.lp-review-card { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 8px 24px -16px rgba(0,0,0,.3); }
.lp-review-img { width: 100%; border-radius: 12px; margin-bottom: 12px; max-height: 320px; object-fit: cover; }
.lp-review-stars { color: #f59f00; margin-bottom: 8px; }
.lp-review-stars .is-off { color: #dee2e6; }
.lp-review-text { margin-bottom: 10px; }
.lp-review-name { font-weight: 700; font-size: .92rem; opacity: .85; }

/* before / after */
.lp-ba { position: relative; max-width: 720px; margin: 0 auto; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #f1f3f5; user-select: none; }
.lp-ba > img, .lp-ba-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.lp-ba-label { position: absolute; top: 12px; background: rgba(0,0,0,.6); color: #fff; font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 50px; z-index: 2; }
.lp-ba-label-before { left: 12px; }
.lp-ba-label-after { right: 12px; }
.lp-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.lp-ba-handle i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #333; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.lp-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3; margin: 0; }

/* guarantee */
.lp-guarantee { display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 2px solid var(--picabo-primary, #d6336c); border-radius: 20px; padding: 24px; max-width: 780px; margin: 0 auto; }
.lp-guarantee-icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--picabo-primary, #d6336c); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.lp-guarantee-title { font-weight: 800; font-size: 1.35rem; margin-bottom: 6px; }
.lp-guarantee-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; }
.lp-guarantee-list i { color: #2f9e44; margin-right: 6px; }

/* text + picture */
.lp-ti-title { font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 14px; }
.lp-ti-img { width: 100%; border-radius: 18px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.4); }
.lp-text-image p { font-size: 1.05rem; line-height: 1.75; }

/* comparison */
.lp-compare-wrap { max-width: 760px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); background: #fff; }
.lp-compare th, .lp-compare td { padding: 14px 16px; vertical-align: middle; text-align: center; }
.lp-compare td:first-child, .lp-compare th:first-child { text-align: left; font-weight: 600; }
.lp-compare thead th { background: #f8f9fa; font-weight: 700; }
.lp-compare .lp-compare-ours { background: rgba(47,158,68,.07); }
.lp-compare thead .lp-compare-ours { background: var(--picabo-primary, #d6336c); color: #fff; }
.lp-yes { color: #2f9e44; font-size: 1.3rem; }
.lp-no { color: #e03131; font-size: 1.3rem; }

/* steps */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lp-step { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 8px 24px -16px rgba(0,0,0,.3); }
.lp-step-num { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--picabo-primary, #d6336c); color: #fff; font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; }
.lp-step-title { font-weight: 700; margin-bottom: 4px; }
.lp-step-text { font-size: .95rem; opacity: .85; }

/* specifications */
.lp-specs { max-width: 680px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px -16px rgba(0,0,0,.3); }
.lp-specs th { width: 38%; background: #f8f9fa; font-weight: 600; padding: 12px 16px; }
.lp-specs td { padding: 12px 16px; }

/* videos */
.lp-videos { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
.lp-videos-many { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 1000px; }
.lp-videos .ratio { border-radius: 14px; overflow: hidden; }

/* contact */
.lp-contact-block { text-align: center; background: #fff; border-radius: 20px; padding: 26px 18px; max-width: 640px; margin: 0 auto; box-shadow: 0 10px 30px -20px rgba(0,0,0,.35); }
.lp-contact-title { font-weight: 800; font-size: 1.35rem; }
.lp-contact-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-contact-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 50px; color: #fff !important; font-weight: 700; text-decoration: none; }
.lp-contact-wa { background: #25d366; }
.lp-contact-call { background: #1c7ed6; }
.lp-contact-btn:hover { filter: brightness(.93); }

/* banner picture */
.lp-banner-img { width: 100%; border-radius: 18px; display: block; }

/* floating WhatsApp / call */
.lp-float-contact { position: fixed; right: 16px; bottom: 22px; z-index: 1035; display: flex; flex-direction: column; gap: 10px; }
.lp-float-btn { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff !important; font-size: 1.6rem; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); transition: transform .15s; }
.lp-float-btn:hover { transform: scale(1.07); }
.lp-float-wa { background: #25d366; }
.lp-float-call { background: #1c7ed6; font-size: 1.3rem; }
@media (max-width: 767.98px) { .lp-float-contact { bottom: 86px; right: 12px; } .lp-float-btn { width: 48px; height: 48px; } }

/* combo prices in the order form */
.lp-tiers { display: flex; flex-direction: column; gap: 8px; }
.lp-tier { display: flex; align-items: center; gap: 10px; border: 2px solid #e9ecef; border-radius: 12px; padding: 11px 14px; cursor: pointer; margin: 0; background: #fff; transition: border-color .15s, background .15s; }
.lp-tier:has(input:checked) { border-color: var(--picabo-primary, #d6336c); background: #fff8fa; }
.lp-tier input { accent-color: var(--picabo-primary, #d6336c); width: 18px; height: 18px; }
.lp-tier-qty { font-weight: 600; flex: 1; }
.lp-tier-price { font-weight: 800; color: var(--picabo-primary, #d6336c); text-align: right; }
.lp-tier-save { display: block; font-weight: 600; color: #2f9e44; font-size: .78rem; }

/* thank-you page */
.lp-thanks-card { background: #fff; border-radius: 22px; padding: 34px 26px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.35); }
.lp-thanks-icon { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: #2f9e44; color: #fff; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(47,158,68,.12); }
.lp-thanks-title { font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 10px; }
.lp-thanks-text { opacity: .85; }
.lp-thanks-order { background: #f8f9fa; border-radius: 14px; padding: 16px 18px; margin-top: 18px; }
.lp-upsell { margin-top: 22px; background: #fff; border: 2px dashed var(--picabo-primary, #d6336c); border-radius: 20px; padding: 20px; }
.lp-upsell-badge { display: inline-block; background: var(--picabo-primary, #d6336c); color: #fff; font-weight: 700; font-size: .85rem; padding: 4px 14px; border-radius: 50px; margin-bottom: 14px; }
.lp-upsell-img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; }
.lp-upsell-name { font-weight: 700; font-size: 1.08rem; }
.lp-upsell-price { font-weight: 800; font-size: 1.3rem; color: var(--picabo-primary, #d6336c); }

@media (max-width: 575.98px) {
    .lp-countdown-boxes { gap: 6px; }
    .lp-countdown-boxes > div { min-width: 62px; }
    .lp-countdown-boxes b { font-size: 1.6rem; }
    .lp-guarantee { flex-direction: column; align-items: center; text-align: center; }
    .lp-compare th, .lp-compare td { padding: 10px 8px; font-size: .9rem; }
}