/* =====================================================================
   LANDING PAGE THEME ENGINE — structural layout CSS
   Loaded AFTER style.css / kids-theme.css / landing.css, scoped to
   body.landing-page so nothing here ever touches the rest of the site
   (shop, product page, checkout, admin, etc).

   Color customizer variables (set inline per-page in landing.php via
   includes/landing-theme-engine.php::lp_theme_css_vars()):
     --lp-primary   --lp-secondary   --lp-button   --lp-text   --lp-bg
   plus derived: --lp-button-text, --lp-primary-text, and *-rgb triplets.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Color customizer -> actual buy/CTA buttons on the landing page.
   product_hero.php's buttons are shared with product.php and normally
   pull from the site-wide --color-primary / --color-accent theme vars;
   on landing pages we override them (scoped, !important-free where
   possible) so the admin's Button color customizer has a real, visible
   effect without touching style.css / kids-theme.css themselves.
   --------------------------------------------------------------------- */
body.landing-page .btn-order-now-solid,
body.landing-page .btn-add-cart-solid,
body.landing-page .mobile-sticky-actions .btn--primary,
body.landing-page .lp-btn--primary,
body.landing-page .lp-sticky-bar .lp-btn--primary {
    background: var(--lp-button);
    background-image: none;
    color: var(--lp-button-text);
    box-shadow: 0 4px 15px rgba(var(--lp-button-rgb), 0.35);
}
body.landing-page .btn-order-now-solid:hover,
body.landing-page .btn-add-cart-solid:hover,
body.landing-page .lp-btn--primary:hover {
    box-shadow: 0 8px 25px rgba(var(--lp-button-rgb), 0.45);
}
body.landing-page .price-now-blue {
    color: var(--lp-primary);
}
body.landing-page .size-option-label input:checked + .size-box {
    border-color: var(--lp-primary);
    background: rgba(var(--lp-primary-rgb), 0.08);
    color: var(--lp-primary);
}
body.landing-page .lp-sticky-bar__info .price {
    color: var(--lp-primary);
}

/* =====================================================================
   1) CLASSIC STACK — no extra structural CSS needed, it's the baseline
      landing.css already provides (full-width stacked .lp-block sections).
   ===================================================================== */


/* =====================================================================
   2) STICKY SIDEBAR
   ===================================================================== */
.lp-sidebar-layout {
    display: grid;
    grid-template-columns: minmax(320px, 440px) 1fr;
    gap: 48px;
    align-items: start;
    max-width: 1360px;
    margin: 0 auto;
    padding: 32px 24px 0;
}
.lp-sidebar-layout__buybox {
    position: sticky;
    top: 24px;
    background: var(--lp-secondary);
    border-radius: var(--lp-radius);
    padding: 20px;
    box-shadow: var(--lp-shadow);
}
.lp-sidebar-layout__buybox .product-detail {
    grid-template-columns: 1fr;
}
.lp-sidebar-layout__content .lp-sidebar-layout__block {
    padding: 36px 0;
    border-bottom: 1px solid rgba(var(--lp-text-rgb), 0.08);
}
.lp-sidebar-layout__content .lp-sidebar-layout__block:last-child {
    border-bottom: none;
}
@media (max-width: 960px) {
    .lp-sidebar-layout {
        grid-template-columns: 1fr;
        padding: 16px 16px 0;
        gap: 8px;
    }
    .lp-sidebar-layout__buybox {
        position: static;
        top: auto;
    }
}

/* =====================================================================
   3) TABBED DETAILS
   ===================================================================== */
.lp-tabs-layout__hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0;
}
.lp-tabs {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 20px 40px;
}
.lp-tabs .lp-tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lp-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid rgba(var(--lp-text-rgb), 0.1);
    margin-bottom: 24px;
    position: sticky;
    top: 0;
    background: var(--lp-bg);
    z-index: 5;
    padding-top: 8px;
}
.lp-tabs__tab {
    display: inline-block;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lp-text);
    opacity: 0.6;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: var(--lp-transition);
    user-select: none;
}
.lp-tabs__tab:hover {
    opacity: 1;
}
.lp-tab-panel {
    display: none;
}
.lp-tab-panel .lp-block {
    padding: 20px 0;
}
.lp-tab-panel .lp-container {
    padding: 0;
}
/* Radio-driven visibility: each #lp-tab-<key> radio, when checked, reveals
   its matching label + panel via the general sibling combinator. */
#lp-tab-overview:checked ~ .lp-tabs__nav label[for="lp-tab-overview"],
#lp-tab-media:checked ~ .lp-tabs__nav label[for="lp-tab-media"],
#lp-tab-reviews:checked ~ .lp-tabs__nav label[for="lp-tab-reviews"],
#lp-tab-offers:checked ~ .lp-tabs__nav label[for="lp-tab-offers"] {
    opacity: 1;
    color: var(--lp-primary);
    border-bottom-color: var(--lp-button);
}
#lp-tab-overview:checked ~ .lp-tabs__panels .lp-tab-panel--overview,
#lp-tab-media:checked ~ .lp-tabs__panels .lp-tab-panel--media,
#lp-tab-reviews:checked ~ .lp-tabs__panels .lp-tab-panel--reviews,
#lp-tab-offers:checked ~ .lp-tabs__panels .lp-tab-panel--offers {
    display: block;
}
@media (max-width: 600px) {
    .lp-tabs__nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .lp-tabs__tab {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* =====================================================================
   4) FULL-BLEED STORY
   ===================================================================== */
.lp-story__hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0;
}
.lp-story__feed .lp-story__panel {
    padding: 70px 0;
}
.lp-story__feed .lp-story__panel:nth-child(even) {
    background: rgba(var(--lp-primary-rgb), 0.035);
}
.lp-story__feed .lp-story__panel .lp-section-title,
.lp-story__feed .lp-story__panel h2 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -0.02em;
}
.lp-story__feed .lp-story__panel .lp-container {
    max-width: 980px;
}
@media (max-width: 768px) {
    .lp-story__feed .lp-story__panel {
        padding: 44px 0;
    }
}

/* =====================================================================
   5) MAGAZINE GRID
   ===================================================================== */
.lp-magazine__masthead {
    background: var(--lp-primary);
    color: var(--lp-primary-text);
    padding: 30px 0 40px;
}
.lp-magazine__masthead .lp-container,
.lp-magazine__masthead .product-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.lp-magazine__masthead .product-detail {
    background: var(--lp-secondary);
    border-radius: var(--lp-radius);
    padding: 24px;
    box-shadow: var(--lp-shadow);
}
.lp-magazine__grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    column-count: 2;
    column-gap: 28px;
}
.lp-magazine__grid .lp-magazine__card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 28px;
    background: var(--lp-secondary);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
    padding: 8px 0 24px;
    display: inline-block;
    width: 100%;
}
.lp-magazine__grid .lp-magazine__card .lp-container {
    padding: 0 24px;
}
.lp-magazine__grid .lp-magazine__card .lp-section-title {
    text-align: left;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
    .lp-magazine__grid {
        column-count: 1;
    }
}

/* =====================================================================
   6) MINIMAL CENTERED
   ===================================================================== */
.lp-minimal__hero,
.lp-minimal__feed .lp-minimal__block .lp-container {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.lp-minimal__hero {
    padding-top: 48px;
}
.lp-minimal .product-detail {
    grid-template-columns: 1fr;
    text-align: center;
}
.lp-minimal .product-gallery,
.lp-minimal .thumbnail-row {
    display: flex;
    justify-content: center;
}
.lp-minimal .product-info-redesign {
    align-items: center;
    text-align: center;
}
.lp-minimal .product-action-row-inline,
.lp-minimal .contact-actions-row,
.lp-minimal .product-share-block {
    justify-content: center;
}
.lp-minimal__feed .lp-minimal__block {
    padding: 50px 0;
    border-top: 1px solid rgba(var(--lp-text-rgb), 0.07);
}
.lp-minimal__feed .lp-minimal__block:first-child {
    border-top: none;
}
.lp-minimal__feed .lp-section-title {
    font-size: 1.9rem;
}
@media (max-width: 600px) {
    .lp-minimal__feed .lp-minimal__block {
        padding: 34px 0;
    }
}