/*
 Theme Name:   Lab Series Child
 Theme URI:    https://thelabseries.com.au
 Description:  Child theme for Lab Series. All subscription membership customisations go here.
 Author:       The Lab Series
 Author URI:   https://thelabseries.com.au
 Template:     LabSeries-Theme
 Version:      0.2.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  lab-series-child
*/

/*
 * Brand Palette (from branding PDF):
 * Primary:     Burnt Orange #C16632, Rich Black #000000, Off-White #EDE8D8
 * Accent:      Cassia #B59275, Sage #8C9086, Eucalyptus #5C7474, Sand #E6CEB5
 * Actual site: Buttons #000 bg + #ede3ca text, Hover #5d7575
 * Font:        TWK Lausanne 400 (body), 600 (sub), 800 (heading)
 * Mono:        Commit Mono Regular
 */

/* ============================================================
   Global Variables
   ============================================================ */
:root {
    --lsc-burnt-orange: #C16632;
    --lsc-black: #000000;
    --lsc-off-white: #EDE8D8;
    --lsc-cassia: #B59275;
    --lsc-sage: #8C9086;
    --lsc-eucalyptus: #5C7474;
    --lsc-sand: #E6CEB5;
    --lsc-cream-text: #ede3ca;
    --lsc-body-text: #1A1818;
    --lsc-warm-neutral: #e4e1d1;
}

/* ============================================================
   Homepage — Focus Cards (Build Your Own / Basic / VIP)
   ============================================================ */
/* --lsc-stretch-pl is set by homepage.js — retained in case needed later */
:root { --lsc-stretch-pl: 836px; }

/* Focus cards: vertical stack within their SiteOrigin column.
   The beige section has 2 cols (rotating reel left, cards right) —
   fighting full-width would overlap the reel. Stack vertically instead. */
.lsc-focus-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 0 !important;
}

/* Hide any leftover featuredLinks_item elements when our focus cards are present */
.lsc-focus-cards ~ .featuredLinks_item,
.lsc-focus-cards ~ .featuredLinks {
    display: none !important;
}

.lsc-focus-card {
    /* Cards sit on the beige (#EDE8D8) section — use white so they stand out */
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.2s ease;
    border-left: 3px solid var(--lsc-burnt-orange, #C16632);
}

.lsc-focus-card:hover {
    transform: translateY(-4px);
}

.lsc-focus-card-inner {
    padding: 35px 30px;
}

.lsc-focus-card h5 {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-weight: 600;
    letter-spacing: -0.6px;
    font-size: 22px;
    margin-bottom: 12px;
    color: var(--lsc-black);
}

.lsc-focus-card p {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lsc-body-text);
    margin-bottom: 20px;
}

.lsc-focus-card .button {
    display: inline-block;
    background: var(--lsc-black);
    color: var(--lsc-cream-text);
    padding: 12px 24px;
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.3s;
}

.lsc-focus-card .button:hover {
    background: var(--lsc-eucalyptus);
}

@media (max-width: 768px) {
    .lsc-focus-cards {
        gap: 12px !important;
    }
    .lsc-focus-card-inner {
        padding: 24px 20px;
    }
}

/* ============================================================
   Homepage — Popular Memberships Cards
   ============================================================ */
.lsc-membership-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 20px 0;
}

.lsc-membership-card {
    display: flex;
    flex-direction: column;
    background: var(--lsc-off-white);
    border-radius: 15px;
    padding: 35px 30px;
}

.lsc-membership-card .button {
    margin-top: auto;
    align-self: flex-start;
}

.lsc-membership-card h4 {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-weight: 600;
    letter-spacing: -0.6px;
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--lsc-black);
}

.lsc-membership-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.lsc-membership-card li {
    list-style: none;       /* override parent theme ul li { list-style-type: disc } */
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--lsc-body-text);
    padding: 0 0 0 20px;    /* override parent theme ul li { padding: 6px 0 } */
    position: relative;
}

.lsc-membership-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--lsc-burnt-orange);
}

.lsc-membership-card li.lsc-no::before {
    content: '✗';
    color: #aaa;
}

.lsc-membership-card li.lsc-no {
    color: #999;
}

.lsc-membership-card .button {
    display: inline-block;
    background: var(--lsc-black);
    color: var(--lsc-cream-text);
    padding: 12px 30px;
    border-radius: 50px;
    font-family: 'TWK Lausanne 600', sans-serif;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.3s;
}

.lsc-membership-card .button:hover {
    background: var(--lsc-eucalyptus);
}

@media (max-width: 768px) {
    .lsc-membership-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Membership Page — minimal additions only.
   Typography, headings, buttons, and colours are all inherited
   from the parent theme. Only the card border, checklist
   markers, and labs list need custom styles here.
   To edit sections: update templates/membership.php directly.
   ============================================================ */

/* Card: flex column so button always pins to the bottom regardless of list length */
.lsc-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #d0c9bc;
    border-radius: 15px;
    padding: 40px 35px;
    box-sizing: border-box;
    background: #fff;
    height: 100%;
}

/* Push the CTA button to the bottom of the card */
.lsc-card > .button {
    margin-top: auto;
    align-self: flex-start;
}



/* Checklist: ✓ tick and ✗ cross markers for membership comparison.
   Note: parent theme sets ul li { list-style-type: disc } globally,
   so we must explicitly override on li (inherited none is not enough). */
.lsc-checklist {
    list-style: none;
    padding: 0;
    margin: 25px 0 30px;
}

.lsc-checklist li {
    list-style: none;       /* override parent theme ul li { list-style-type: disc } */
    padding: 0 0 0 24px;    /* override parent theme ul li { padding: 6px 0 } */
    position: relative;
    line-height: 1.8;
}

.lsc-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #C16632;
}

.lsc-checklist li.lsc-no {
    color: #999;
}

.lsc-checklist li.lsc-no::before {
    content: '✗';
    color: #aaa;
}

/* Available labs list (legacy flat style — kept for safety) */
.lsc-labs-grid {
    margin: 25px 0;
}

.lsc-lab-item {
    padding: 10px 0;
    border-bottom: 1px solid #e4e1d1;
    line-height: 1.6;
}

.lsc-lab-item:last-child {
    border-bottom: none;
}

/* ============================================================
   Membership Page — Lab Accordion (redesigned)
   ============================================================ */
.lsc-labs-accordion-list {
    margin: 30px 0;
}

/* Category block */
.lsc-lab-category {
    margin-bottom: 40px;
}
.lsc-lab-category:last-child {
    margin-bottom: 0;
}

/* Category heading */
.lsc-cat-heading {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lsc-burnt-orange) !important;
    margin: 0 0 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--lsc-burnt-orange);
}

/* Each accordion row */
.lsc-lab-accordion {
    border-bottom: 1px solid #e8e3da;
    overflow: visible;
}

/* Trigger row — div[role=button] avoids all <button> CSS inheritance */
.lsc-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 16px;
    color: var(--lsc-body-text);
    transition: background 0.15s;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}
.lsc-acc-header:hover {
    background: #faf8f5;
}

/* Left column: block layout avoids flex-column gap/clipping quirks in <button> */
.lsc-acc-main {
    display: block;
    flex: 1;
    min-width: 0;
}
.lsc-acc-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    font-family: 'TWK Lausanne 600', sans-serif;
    letter-spacing: -0.2px;
    color: var(--lsc-black);
    line-height: 1.3;
    margin: 0;
    padding: 0;
}
.lsc-acc-tagline {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #777;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-transform: none !important;
    margin-bottom: 0;
    padding: 0;
}

/* Right column: badge + arrow */
.lsc-acc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Collection method badge */
.lsc-acc-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1.5px solid currentColor;
    line-height: 1.5;
    white-space: nowrap;
}
.lsc-badge--swab   { color: var(--lsc-eucalyptus); }
.lsc-badge--stool  { color: var(--lsc-sage); }
.lsc-badge--urine  { color: #7c6fa0; }
.lsc-badge--saliva { color: var(--lsc-burnt-orange); }
.lsc-badge--breath { color: #5a8a6a; }
.lsc-badge--hair   { color: var(--lsc-cassia); }
.lsc-badge--blood  { color: #b05050; }

/* Rotating arrow */
.lsc-acc-arrow {
    font-size: 16px;
    color: #aaa;
    transition: transform 0.2s ease, color 0.15s;
    line-height: 1;
}
.lsc-acc-header[aria-expanded="true"] .lsc-acc-arrow {
    transform: rotate(180deg);
    color: var(--lsc-burnt-orange);
}

/* Body panel */
.lsc-acc-body {
    padding: 0 0 20px 0;
}
.lsc-acc-body[hidden] {
    display: none;
}

/* Detail definition list */
.lsc-acc-details {
    margin: 0;
    background: #faf8f5;
    border-left: 3px solid var(--lsc-burnt-orange);
    padding: 18px 22px;
    border-radius: 0 6px 6px 0;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 20px;
    align-items: start;
}
.lsc-acc-details dt {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #999;
    padding-top: 2px;
    margin: 0;
}
.lsc-acc-details dd {
    margin: 0;
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #333;
}

@media (max-width: 600px) {
    .lsc-acc-details {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .lsc-acc-details dt {
        margin-top: 12px;
    }
    .lsc-acc-details dt:first-child {
        margin-top: 0;
    }
    .lsc-acc-tagline {
        white-space: normal;
    }
    .lsc-acc-badge {
        display: none; /* avoid crowding on mobile — method shown in expanded body */
    }
}

/* ============================================================
   Membership Page — Maths Stats Strip
   ============================================================ */
.lsc-maths-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 36px 0 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.lsc-maths-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    text-align: center;
    background: #fff;
}
.lsc-maths-col--highlight {
    background: var(--lsc-black);
}
.lsc-maths-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    padding: 0 8px;
    flex-shrink: 0;
}
.lsc-maths-num {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--lsc-black);
    line-height: 1;
    margin-bottom: 6px;
}
.lsc-maths-col--highlight .lsc-maths-num {
    color: var(--lsc-cream-text);
}
.lsc-maths-unit {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.7;
}
.lsc-maths-label {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 12px;
    color: #666;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.lsc-maths-col--highlight .lsc-maths-label {
    color: rgba(237, 227, 202, 0.7);
}

@media (max-width: 680px) {
    .lsc-maths-stats {
        flex-direction: column;
        gap: 0;
    }
    .lsc-maths-col {
        width: 100%;
        padding: 20px;
    }
    .lsc-maths-vs {
        padding: 6px 0;
        writing-mode: horizontal-tb;
    }
}

/* ============================================================
   Membership Page — Why + Maths two-column row
   Uses CSS Grid so h3 row height is shared across both columns —
   paragraphs start at the same vertical position regardless of
   how many lines each heading wraps to.
   ============================================================ */

.lsc-why-maths-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 60px;
    width: 100%;
}

/* Flatten column wrappers so h3 + .lsc-col-body are direct grid items */
.lsc-why-col,
.lsc-maths-col-wrap {
    display: contents;
}

/* h3s share row 1 — tallest h3 sets the row height for both */
.lsc-why-col > h3        { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: 20px; }
.lsc-maths-col-wrap > h3 { grid-column: 2; grid-row: 1; align-self: start; margin-bottom: 20px; }

/* Body content shares row 2 — both start at the same horizontal line */
.lsc-why-col > .lsc-col-body        { grid-column: 1; grid-row: 2; }
.lsc-maths-col-wrap > .lsc-col-body { grid-column: 2; grid-row: 2; }

/* Stack below 700px — undo display:contents so columns are normal blocks */
@media (max-width: 700px) {
    .lsc-why-maths-inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .lsc-why-col,
    .lsc-maths-col-wrap {
        display: block;
    }
    .lsc-why-col > h3,
    .lsc-maths-col-wrap > h3,
    .lsc-why-col > .lsc-col-body,
    .lsc-maths-col-wrap > .lsc-col-body {
        grid-column: unset;
        grid-row: unset;
    }
}

/* ============================================================
   Membership Page — spacing + alignment fixes
   ============================================================ */

/* Collapse the theme's default bottom margin between the
   combined why/maths section and "labs available" */
.lsc-cost-section {
    margin-bottom: 0 !important;
}

/* Labs section: maths (beige) transitions to labs (white) —
   keep standard top padding for a clean visual entry */
.lsc-cost-section + .panel-grid .siteorigin-panels-stretch {
    padding-top: 60px !important;
}

/* Vertically align mixed <button> and <a> CTA elements on the
   same line (bottom of the straight-talk section) */
.lsc-cta-row .button,
.lsc-cta-row button.button,
.lsc-cta-row a.button {
    vertical-align: middle;
}

/* ============================================================
   Build Your Own — Lab Cards
   ============================================================ */
.lsc-byo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.lsc-byo-card {
    background: #fff;
    border: 1px solid #e4e1d1;
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.lsc-byo-card h4 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0 0 10px;
}

.lsc-byo-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 15px;
    flex: 1;
}

.lsc-byo-price {
    display: inline-block;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.4px;
    color: var(--lsc-black);
}

/* Stack card columns on mobile */
@media (max-width: 767px) {
    .lsc-cards-row {
        flex-wrap: wrap !important;
    }
    .lsc-cards-row .panel-grid-cell {
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin-bottom: 30px;
    }
}

/* ============================================================
   My Labs Dashboard (existing + enhancements)
   ============================================================ */
.lsc-my-labs {
    font-family: 'TWK Lausanne 400', sans-serif;
}

.lsc-my-labs h2 {
    font-weight: 800;
    letter-spacing: -0.6px;
    font-size: 32px;
    margin-bottom: 25px;
}

.lsc-my-labs h3 {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.6px;
    margin: 30px 0 15px;
}

.lsc-empty-state {
    background: var(--lsc-off-white);
    padding: 40px;
    text-align: center;
    margin: 20px 0;
}

.lsc-empty-state .button {
    margin-top: 15px;
    display: inline-block;
    background: var(--lsc-black);
    color: var(--lsc-cream-text);
    padding: 12px 24px;
    text-decoration: none;
}

.lsc-no-credits {
    background: #fff8f0;
    border: 1px solid var(--lsc-sand);
    padding: 20px;
    margin: 20px 0;
}

.lsm-redeem-confirmation {
    background: #f0f8f0;
    border: 1px solid #8C9086;
    padding: 15px 20px;
    margin-top: 15px;
}

/* Subscription Toggle (Product Pages) */
.lsm-purchase-toggle {
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid var(--lsc-warm-neutral);
    border-bottom: 1px solid var(--lsc-warm-neutral);
}

.lsm-toggle-label {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 14px;
    color: var(--lsc-body-text);
    margin-bottom: 10px;
}

.lsm-toggle-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.lsm-toggle-option input[type="radio"] {
    margin-top: 3px;
    accent-color: #1e1e1e;
}

.lsm-option-text {
    font-family: 'TWK Lausanne 400', sans-serif;
    font-size: 15px;
    color: var(--lsc-body-text);
}

.lsm-option-price {
    font-weight: 700;
}

.lsm-option-sub {
    display: block;
    font-size: 13px;
    color: var(--lsc-eucalyptus);
    margin-top: 2px;
}


/* ============================================================
   How It Works — align CTAs to the bottom of each column.
   Targets the specific nested panel layout (pl-w68af7a8c113a5).
   If Holly reorganises this section in SiteOrigin PB the ID may change.
   Chain: panel-grid-cell → panel-cell-style → last so-panel
          → panel-widget-style → textwidget → last <p> (the button).
   ============================================================ */
#pg-w68af7a8c113a5-0.panel-no-style {
    align-items: stretch !important; /* SiteOrigin generates flex-start inline after our stylesheet — !important required */
}
#pl-w68af7a8c113a5 .panel-grid-cell {
    display: flex;
    flex-direction: column;
}
#pl-w68af7a8c113a5 .panel-cell-style {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#pl-w68af7a8c113a5 .panel-cell-style .so-panel:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#pl-w68af7a8c113a5 .panel-cell-style .so-panel:last-child .panel-widget-style,
#pl-w68af7a8c113a5 .panel-cell-style .so-panel:last-child .textwidget {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#pl-w68af7a8c113a5 .textwidget > p:last-child {
    margin-top: auto;
}

/* ============================================================
   CHECKOUT — Minimal header + focused purchase flow
   ============================================================ */

/* 1. Hide nav — logo only on checkout (NOT on order-received/thank-you page) */
body.woocommerce-checkout:not(.woocommerce-order-received) #PushMenuWrap,
body.woocommerce-checkout:not(.woocommerce-order-received) .headerMenuCell,
body.woocommerce-checkout:not(.woocommerce-order-received) .headerHamburgerCell {
    display: none !important;
}
body.woocommerce-checkout:not(.woocommerce-order-received) #header {
    box-shadow: none;
    border-bottom: 1px solid #e8e2d6;
}

/* 2. Checkout layout — clean, focused */
body.woocommerce-checkout .woocommerce {
    max-width: 1100px;
    margin: 0 auto;
}
body.woocommerce-checkout h3#order_review_heading {
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 16px;
}

/* 3. Membership summary card */
.lsc-checkout-summary {
    background: #EDE8D8;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.lsc-checkout-summary__name {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #C16632;
    font-weight: 600;
    margin-bottom: 6px;
}
.lsc-checkout-summary__price {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}
.lsc-checkout-summary__price span {
    font-size: 13px;
    font-weight: 400;
    color: #666;
}
.lsc-checkout-summary__perks {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lsc-checkout-summary__perks li {
    font-size: 14px;
    color: #333;
    padding: 3px 0;
}
.lsc-checkout-summary__perks li::before {
    content: '✓';
    color: #C16632;
    font-weight: 700;
    margin-right: 8px;
}

/* 4. Subscription recurring billing clarity */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .recurring-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .recurring-total th {
    font-weight: 700;
    font-size: 16px;
    border-top: 2px solid #000;
    padding-top: 10px;
}
body.woocommerce-checkout .subscription-details {
    font-size: 13px;
    color: #555;
    margin-top: 6px;
    line-height: 1.5;
}

/* 5. Trust strip */
.lsc-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    padding: 12px 0 16px;
    font-size: 12px;
    color: #555;
    border-top: 1px solid #e0dbd2;
    margin-top: 8px;
}

/* 6. What happens next */
.lsc-next-steps {
    margin-top: 24px;
    padding: 16px 20px;
    background: #f9f7f3;
    border-radius: 6px;
    border-left: 3px solid #C16632;
}
.lsc-next-steps__heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000;
    margin: 0 0 10px;
}
.lsc-next-steps__list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #444;
    line-height: 1.7;
}

/* 7. Cleaner form fields */
body.woocommerce-checkout .woocommerce-billing-fields h3 {
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
body.woocommerce-checkout .form-row input.input-text {
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 10px 12px;
    font-size: 15px;
}
body.woocommerce-checkout .form-row input.input-text:focus {
    border-color: #000;
    outline: none;
    box-shadow: none;
}
body.woocommerce-checkout #place_order {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 768px) {
    .lsc-trust-strip {
        font-size: 11px;
    }
    .lsc-checkout-summary__price {
        font-size: 18px;
    }
}

/* ============================================================
   CHECKOUT — Billing form UX/UI improvements
   ============================================================ */

/* Billing intro message */
.lsc-billing-intro {
    font-size: 14px;
    color: #555;
    margin: 0 0 24px;
    padding: 12px 16px;
    background: #f9f7f3;
    border-left: 3px solid #C16632;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}

/* Section headings */
.lsc-checkout-section-heading {
    width: 100% !important;
    clear: both;
    margin: 28px 0 4px !important;
    padding: 0 !important;
    float: none !important;
}
.lsc-section-heading__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000;
    margin: 0 0 3px;
    padding: 0;
}
.lsc-section-heading__desc {
    font-size: 12px;
    color: #777;
    margin: 0 0 10px;
    line-height: 1.4;
}

/* Tighten up label styling */
body.woocommerce-checkout .woocommerce-billing-fields label,
body.woocommerce-checkout .form-row label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #222;
    margin-bottom: 5px;
    display: block;
}

/* Input heights — consistent across all fields */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row select {
    height: 44px;
    border-radius: 6px;
    border: 1.5px solid #d4cfc8;
    padding: 0 12px;
    font-size: 15px;
    color: #111;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row select:focus {
    border-color: #C16632;
    outline: none;
    box-shadow: 0 0 0 3px rgba(193, 102, 50, 0.12);
}
body.woocommerce-checkout .form-row input[type="date"] {
    padding: 0 12px;
    line-height: 44px;
}

/* Select arrow */
body.woocommerce-checkout .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Form row spacing */
body.woocommerce-checkout .form-row {
    margin-bottom: 14px;
}

/* Two-column pair gaps */
body.woocommerce-checkout .form-row-first {
    padding-right: 8px;
}
body.woocommerce-checkout .form-row-last {
    padding-left: 8px;
}

/* State field narrower */
body.woocommerce-checkout .lsc-state-narrow {
    width: 40% !important;
}

/* Billing section heading override (WC default h3) */
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout .woocommerce-billing-fields h3 {
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0dbd2;
}

/* Validation error state */
body.woocommerce-checkout .woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce-invalid select {
    border-color: #c0392b !important;
}
body.woocommerce-checkout .woocommerce-invalid-required-field .required {
    color: #c0392b;
}

/* Mobile — stack two-column */
@media (max-width: 600px) {
    body.woocommerce-checkout .form-row-first,
    body.woocommerce-checkout .form-row-last,
    body.woocommerce-checkout .lsc-state-narrow {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        clear: both;
    }
}

/* ============================================================
   BUILD YOUR OWN — Card footer (price + Add to cart)
   ============================================================ */

.lsc-byo-card {
    display: flex;
    flex-direction: column;
}
.lsc-byo-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #e8e2d6;
    gap: 12px;
    flex-wrap: wrap;
}
.lsc-byo-price {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}
.lsc-byo-add {
    font-size: 13px !important;
    padding: 8px 16px !important;
    white-space: nowrap;
}

/* ============================================================
   BUILD YOUR OWN — Add to cart modal popup
   ============================================================ */

/* Backdrop overlay */
.lsc-cart-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.45);
    animation: lsc-fade-in 0.18s ease;
}
.lsc-cart-modal-backdrop.lsc-cart-modal-backdrop--visible {
    display: block;
}

/* Modal box */
.lsc-cart-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, -46%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    padding: 36px 32px 28px;
    width: 90%;
    max-width: 440px;
    border-top: 4px solid #C16632;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.lsc-cart-toast--visible {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.lsc-cart-toast__inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}
.lsc-cart-toast__check {
    font-size: 22px;
    color: #C16632;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.3;
}
.lsc-cart-toast__body {
    display: flex;
    flex-direction: column;
}
.lsc-cart-toast__title {
    font-size: 17px;
    font-weight: 700;
    color: #000;
    margin-bottom: 4px;
}
.lsc-cart-toast__lab {
    font-size: 14px;
    color: #555;
    margin-top: 2px;
}
.lsc-cart-toast__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lsc-cart-toast__checkout {
    display: block;
    text-align: center;
    font-size: 15px !important;
    padding: 13px 20px !important;
    width: 100%;
    box-sizing: border-box;
}
.lsc-cart-toast__continue {
    background: none;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    padding: 11px 20px;
    font-weight: 500;
    transition: border-color 0.15s, color 0.15s;
    width: 100%;
    text-align: center;
}
.lsc-cart-toast__continue:hover {
    border-color: #888;
    color: #000;
}
/* Close × button */
.lsc-cart-toast__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 2px 4px;
}
.lsc-cart-toast__close:hover { color: #333; }

@keyframes lsc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 480px) {
    .lsc-cart-toast {
        width: calc(100% - 32px);
        padding: 28px 20px 22px;
    }
}
/* Match focus section heading size to hero */
#panel-89-2-0-0 h3 {
    font-size: 52px !important;
    line-height: 1.15 !important;
}