/* Landing page sections: fixed style presets chosen per section in the admin (see Infrastructure/SectionStyles.cs). */
.lp-section { overflow-wrap: break-word; }
.lp-section img { max-width: 100%; height: auto; }

.lp-bg-white { background-color: #fff; color: #262626; }
.lp-bg-light { background-color: #f7f3ee; color: #262626; }
.lp-bg-brand { background-color: #6f1236; color: #fff; }
.lp-bg-dark { background-color: #262626; color: #fff; }
.lp-bg-brand a, .lp-bg-dark a { color: #fff; text-decoration: underline; }

.lp-pt-small { padding-top: 16px; }
.lp-pt-medium { padding-top: 40px; }
.lp-pt-large { padding-top: 80px; }
.lp-pb-small { padding-bottom: 16px; }
.lp-pb-medium { padding-bottom: 40px; }
.lp-pb-large { padding-bottom: 80px; }

@media (max-width: 767.98px) {
    .lp-pt-medium { padding-top: 24px; }
    .lp-pt-large { padding-top: 48px; }
    .lp-pb-medium { padding-bottom: 24px; }
    .lp-pb-large { padding-bottom: 48px; }
}

/* FAQ: a <details>/<summary> accordion, so it works without JavaScript. */
.lp-faq { max-width: 800px; margin: 0 auto; }
.lp-faq-title { margin-bottom: 16px; }
.lp-faq-item { border-bottom: 1px solid rgba(0, 0, 0, .15); text-align: left; }
.lp-bg-brand .lp-faq-item, .lp-bg-dark .lp-faq-item { border-color: rgba(255, 255, 255, .3); }
.lp-faq-question { position: relative; padding: 14px 36px 14px 0; font-weight: 600; cursor: pointer; list-style: none; }
.lp-faq-question::-webkit-details-marker { display: none; }
.lp-faq-question::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.4em; line-height: 1; }
.lp-faq-item[open] > .lp-faq-question::after { content: "\2212"; }
.lp-faq-answer { padding-bottom: 16px; white-space: pre-line; }

/* Product list: the legacy OurMenu markup (Site.css), with its brand colours following dark backgrounds. */
.lp-product-list-grid { margin-top: 1rem; }
.lp-bg-brand .lp-product-list .offer-title, .lp-bg-dark .lp-product-list .offer-title,
.lp-bg-brand .lp-product-list .subscription-product-price, .lp-bg-dark .lp-product-list .subscription-product-price { color: inherit; }

/* Hero */
.lp-hero { position: relative; }
.lp-hero-picture img { display: block; width: 100%; height: auto; }
.lp-hero-text { padding-top: 16px; }
.lp-hero-title { font-size: 1.75rem; margin-bottom: 8px; }
.lp-hero-subtitle { font-size: 1.1rem; }
@media (min-width: 768px) {
    .lp-hero-title { font-size: 2.5rem; }
}

/* Shared section button: a large tap target on mobile */
.lp-button-wrap { margin: 16px 0 0; }
.lp-button { display: inline-block; min-height: 44px; padding: 10px 24px; }
@media (max-width: 767.98px) {
    .lp-button { display: block; width: 100%; text-align: center; }
}

/* Video facade (click to load) */
.lp-video { margin-top: 16px; }
.lp-video-play { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #6f1236; color: #fff !important; font-size: 28px; text-decoration: none !important; }
.lp-video-play:hover, .lp-video-play:focus { background: #8e1a47; }
.lp-video-playing { position: relative; width: 100%; padding-top: 56.25%; }
.lp-video-playing iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Image + text: stacked (image first) on mobile; side by side or image above on desktop */
.lp-image-text { display: flex; flex-direction: column; gap: 16px; }
.lp-image-text-media img { display: block; width: 100%; height: auto; }
.lp-image-text-title { margin-bottom: 8px; }
.lp-image-text-subtitle { font-size: 1.1rem; margin-bottom: 8px; }
@media (min-width: 768px) {
    .lp-image-text-left, .lp-image-text-right { flex-direction: row; align-items: center; gap: 32px; }
    .lp-image-text-right { flex-direction: row-reverse; }
    .lp-image-text-left > *, .lp-image-text-right > * { flex: 1 1 0; min-width: 0; }
}
/* On white and light backgrounds Image + text keeps the legacy text/image block look: brand title, brand button */
.lp-image-text-title { font-size: 1.5rem; }
.lp-bg-white .lp-image-text-title, .lp-bg-light .lp-image-text-title { color: #6f1236; margin-bottom: 1rem; }
.lp-bg-white :is(.lp-image-text, .lp-card) .lp-button, .lp-bg-light :is(.lp-image-text, .lp-card) .lp-button {
    padding: 19px 35px; background-color: #6f1236; color: #fff; font-size: 12px; font-weight: 600;
    letter-spacing: .15em; line-height: 1.15em; text-transform: uppercase; text-decoration: none;
}
.lp-bg-white :is(.lp-image-text, .lp-card) .lp-button:hover, .lp-bg-light :is(.lp-image-text, .lp-card) .lp-button:hover { background-color: #000; color: #fff; }
@media (max-width: 767.98px) {
    .lp-bg-white .lp-image-text-title, .lp-bg-light .lp-image-text-title { font-size: 15px; font-weight: bold; }
    .lp-bg-white :is(.lp-image-text, .lp-card) .lp-button, .lp-bg-light :is(.lp-image-text, .lp-card) .lp-button { padding: 19px 10px; font-size: 10px; }
}

/* The Hero on the background video sits directly under the header, as the legacy banner did */
.lp-section.lp-top-banner { padding-top: 0; padding-bottom: 0; }

/* CTA banner: a background image (if any) under a dark scrim, so the text stays readable */
.lp-cta { position: relative; }
.lp-cta-has-background { overflow: hidden; padding: 48px 16px; color: #fff; }
.lp-section .lp-cta-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lp-cta-has-background::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .45); }
.lp-cta-text { position: relative; z-index: 1; }
.lp-cta-title { margin-bottom: 8px; }
.lp-cta-body { white-space: pre-line; }

/* Video: the click-to-load facade as a 16:9 frame with the play button in the middle */
.lp-video-block .lp-video { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.lp-video-block .lp-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Spacer: preset heights, with an optional divider line in the middle */
.lp-spacer { display: flex; align-items: center; }
.lp-spacer-small { height: 16px; }
.lp-spacer-medium { height: 48px; }
.lp-spacer-large { height: 96px; }
.lp-spacer-divider { width: 100%; margin: 0; border: 0; border-top: 1px solid rgba(0, 0, 0, .15); }
.lp-bg-brand .lp-spacer-divider, .lp-bg-dark .lp-spacer-divider { border-top-color: rgba(255, 255, 255, .3); }
@media (max-width: 767.98px) {
    .lp-spacer-medium { height: 32px; }
    .lp-spacer-large { height: 56px; }
}

/* Carousel (gallery, customer reviews): a scroll-snap row to swipe on mobile, a grid on desktop whose columns each section sets. */
.lp-carousel { display: flex; gap: 12px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lp-carousel-item { flex: 0 0 85%; scroll-snap-align: start; }
@media (min-width: 768px) {
    .lp-carousel { display: grid; gap: 24px; overflow: visible; }
}

/* Gallery: the carousel bleeds to the screen edges on mobile; three columns on desktop. */
.lp-gallery-title { margin-bottom: 16px; }
.lp-gallery-track { margin: 0 -15px; padding: 0 15px 8px; scroll-padding: 0 15px; }
.lp-gallery-figure { margin: 0; }
.lp-gallery-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.lp-gallery-caption { padding-top: 8px; font-size: .95rem; }
@media (min-width: 768px) {
    .lp-gallery-track { grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; }
}

/* Feature list: one column on mobile, 2–4 on desktop by item count (FeFeatureListSection.Columns). */
.lp-features-title { margin-bottom: 24px; }
.lp-features-grid { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -12px; }
.lp-feature { flex: 0 0 100%; max-width: 100%; padding: 0 12px 24px; }
.lp-feature-image { display: block; max-height: 240px; margin: 0 auto 12px; }
.lp-feature-title { font-size: 1.25rem; margin-bottom: 8px; }
.lp-feature-text { margin-bottom: 0; white-space: pre-line; }
@media (min-width: 768px) {
    .lp-features-cols-2 .lp-feature, .lp-features-cols-4 .lp-feature { flex-basis: 50%; max-width: 50%; }
    .lp-features-cols-3 .lp-feature { flex-basis: 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 992px) {
    .lp-features-cols-4 .lp-feature { flex-basis: 25%; max-width: 25%; }
}

/* Customer reviews: cards in the carousel; on desktop as many columns of at least 240px as fit. */
.lp-reviews-title { margin-bottom: 16px; }
.lp-reviews-list { gap: 16px; }
.lp-review { padding: 20px; border-radius: 8px; background: rgba(0, 0, 0, .04); text-align: center; }
.lp-bg-brand .lp-review, .lp-bg-dark .lp-review { background: rgba(255, 255, 255, .1); }
.lp-review-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.lp-review-name { margin-bottom: 4px; font-weight: 600; }
.lp-review-stars { margin-bottom: 8px; color: #e0a100; font-size: 1.2rem; letter-spacing: 2px; }
.lp-review-comment { margin: 0; white-space: pre-line; }
@media (min-width: 768px) {
    .lp-reviews-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
}

/* Order form */
html { scroll-behavior: smooth; }
.lp-order-form { max-width: 640px; margin: 0 auto; }
.lp-order-form-title { margin-bottom: 8px; }
.lp-order-options { border: 0; padding: 0; margin: 16px 0; }
.lp-order-options legend { font-size: 1rem; font-weight: bold; }
.lp-order-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-height: 44px; padding: 10px 0; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, .1); cursor: pointer; }
.lp-order-option input { width: 20px; height: 20px; align-self: center; }
.lp-order-label { flex: 1 1 50%; }
.lp-order-original-price { opacity: .6; }
.lp-order-price { font-weight: bold; }
.lp-order-field { margin-bottom: 12px; }
.lp-order-field .form-control { min-height: 44px; }
.lp-order-error { display: block; color: #c0392b; }
.lp-order-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lp-order-thanks { font-size: 1.2rem; padding: 16px 0; white-space: pre-line; }

/* Sticky order bar: a button fixed to the bottom of the screen on mobile only. The body gets bottom padding while
   it shows, so the bar never covers the end of the page or the footer. */
.lp-sticky-bar { display: none; }
@media (max-width: 767.98px) {
    .lp-sticky-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, .15); }
    .lp-sticky-bar .lp-button-wrap { margin: 0; }
    body.lp-has-sticky-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}