.main-menu {
    gap: 5px !important;
}
.service__area-2 {
    background-color: #ffcb8d45;
}
.portfolio__area {
    background-color: #ffcb8d45;
}
.pt-50 {
    padding-top: 50px;
}
.pb-50 {
    padding-bottom: 50px;
}
.mb-50 {
    margin-bottom: 50px;
}

/* Modal Size - 65% of screen */
.modal-dialog {
    max-width: 65%;
    height: 65%;
}

@media (max-width: 767px) {
    .modal-dialog {
        max-width: 98%;
        margin-left: auto;
        margin-right: auto;
    }
}

.modal-content {
    height: 10%;
}


.footer__logo img {
    max-width: 320px;
}

.blog__body img {
    border-radius: 10px;
}

.blog__body > ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0 0 1rem 0;
}

.blog__body > ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin: 0 0 1rem 0;
}

.blog__body > ul > li {
    list-style-type: disc !important;
}

.blog__body > ol > li {
    list-style-type: decimal !important;
}

.breadcrumb__area {
    text-align: center;
    background-image: url(/assets/imgs/thumb/natural-beautyr-aesthetics-blog-page-header-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 185px 0px;
    background-position: center center;
}


/* ==========================================================================
   about.php
   ========================================================================== */

.doctor__detail {
    padding-bottom: 10px;
}

.about-lisa__area h2.section-title { margin-bottom: 0.25rem; }
.about-lisa__area .eyebrow { color: #00335a; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; margin-bottom: 1.5rem; }
.about-lisa__area h3 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.about-lisa__area ul.service-list { list-style: none; padding-left: 0; columns: 2; column-gap: 2rem; margin: 1.25rem 0; }
.about-lisa__area ul.service-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; break-inside: avoid; }
.about-lisa__area ul.service-list li::before { content: "\2714"; position: absolute; left: 0; color: #00335a; font-weight: bold; }


/* ==========================================================================
   blog.php
   ========================================================================== */

.blog-page-header-text {
    padding: 0 12rem;
}
@media screen and (max-width: 992px) {
    .blog-page-header-text {
        padding: 1rem;
    }
}


/* ==========================================================================
   contact.php
   ========================================================================== */

.contact__info ul li span.hours-row {
    display: flex !important;
    justify-content: space-between !important;
    width: 100%;
    gap: 1.5rem;
}
.contact__info ul li span.hours-day {
    white-space: nowrap;
}
.contact__info ul li span.hours-time {
    white-space: nowrap;
    text-align: right;
}

.contact__form .form-check-input {
    width: 1.15em !important;
    height: 1.15em !important;
    flex-shrink: 0;
    margin-top: 0.2em;
}
.contact__form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}


/* ==========================================================================
   index.php
   ========================================================================== */

.hero_area {
    padding: 220px 0 140px;
    position: relative;
    background-color: var(--white-2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right -60px;
}
@media (max-width: 1200px) {
    .hero_area {
        padding: 180px 0 160px;
    }
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px !important;
    }
}

.blog__img img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.service-blog__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--secondary);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.service-blog__title:hover {
    color: var(--primary);
}

.why-choose-us {
    padding-left: 15%;
    padding-right: 15%;
}
.list-disk {
    list-style-type: disc !important;
    padding-left: 10px !important;
}

.btn-theme {
    background-color: #00335a;
    color: #ffffff;
}
.btn-theme:hover {
    background-color: #15619c;
    color: #ffffff;
}

.testimonial__item p {
    font-size: 20px !important;
}


/* ==========================================================================
   lifewave.php
   ========================================================================== */

/* NOTE: .service__tagline below is shared by lifewave.php and
   includes/service-template.php — both used this identical rule, now
   consolidated to this single copy. */
.service__tagline {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #4a4a4a;
}
.lw-disclosure {
    background: #fff7ec;
    border: 1px solid #ffcb8d;
    border-radius: 10px;
    padding: 18px 22px;
    font-size: 0.92rem;
    color: #5a4a35;
    margin-top: 25px;
}
.lw-product-card {
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 28px;
    height: 100%;
    background: #fff;
    transition: box-shadow 0.2s ease;
}
.lw-product-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.lw-product-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 18px;
    object-fit: cover;
    aspect-ratio: 4/3;
}
.lw-product-card h3 {
    font-size: 1.25rem;
    margin-bottom: 6px;
    color: #00335a;
}
.lw-product-card .lw-tagline {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 14px;
}
.lw-product-card ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}
.lw-product-card ul li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #444;
}
.lw-product-card ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #ffcb8d;
    font-weight: bold;
}
.lw-btn {
    display: inline-block;
    background: #00335a;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 26px;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}
.lw-btn:hover {
    background: #002240;
    color: #fff;
}
.lw-cta-band {
    background: #ffcb8d;
    border-radius: 16px;
    padding: 50px 40px;
    text-align: center;
    margin-top: 40px;
}
.lw-cta-band h2 {
    color: #00335a;
}
.lw-footer-disclosure {
    font-size: 0.85rem;
    color: #777;
    border-top: 1px solid #eee;
    margin-top: 50px;
    padding-top: 25px;
}


/* ==========================================================================
   product.php
   ========================================================================== */

#gal1 a.gallery-thumb { display: inline-block; border: 2px solid transparent; border-radius: 6px; overflow: hidden; }
#gal1 a.gallery-thumb.active { border-color: #d9a566; }

.star-rating { color: #d9a566; letter-spacing: 1px; }
.review-item { border-bottom: 1px solid #eee; padding: 1rem 0; }
.review-item:last-child { border-bottom: none; }
.rating-input { display: inline-flex; flex-direction: row-reverse; }
.rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input label { font-size: 1.8rem; color: #ddd; cursor: pointer; padding: 0 2px; }
.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label { color: #d9a566; }
.review-honeypot { position: absolute; left: -9999px; top: -9999px; }


/* ==========================================================================
   special-offers.php
   ========================================================================== */

.text-primary {
    color: #00335a !important;
}


/* ==========================================================================
   includes/blog-cta.php
   ========================================================================== */

a.phone-no {
    color: #2d3d45;
    font-size: 24px;
}
a.phone-no:hover {
    color: #85b6fb;
}


/* ==========================================================================
   includes/footer.php
   ========================================================================== */

.footer__title {
    color: #777777 !important;
}

/* Without this, the 4 footer columns below (each flex:1) squeeze
   into equal-width slivers on narrow phone screens instead of
   stacking normally - this switches them to stack vertically
   below 768px. */
@media (max-width: 768px) {
    .footer__top-wrap {
        flex-direction: column !important;
    }
}


/* ==========================================================================
   includes/header.php
   ========================================================================== */
/* NOTE: the @media(min-width:1200px) .container rule that also appeared
   here is identical to the one already listed under index.php above —
   not duplicated. */

.header__logo img {
    max-width: 220px;
}

/* NOTE: not currently applied to any element in the markup as of this
   consolidation pass — kept as-is as requested, flagged for follow-up. */
.submenu-background {
    background-color: #ffe4c4;
}


/* ==========================================================================
   includes/modals-home.php
   ========================================================================== */

.modal-header {
    flex-direction: column !important;
}


/* ==========================================================================
   includes/post-template.php
   ========================================================================== */
/* NOTE: .blog__body img { border-radius: 10px; } already exists near the
   top of this file (from the original pre-consolidation custom-styles.css)
   — not duplicated here. */

.blog__lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 1.75rem;
}

.blog__thumb-2 {
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    width: 100%;
    aspect-ratio: 21 / 9; /* leaner than 16:9 so it doesn't dominate the page;
                              aspect-ratio (not a fixed height) keeps this
                              correct at every screen size, including mobile */
    object-fit: cover;
    margin-bottom: 2rem;
}

.blog__meta-row {
    color: #777;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* TODO: #d9a5a0 is an explicitly-marked placeholder color, not yet
   matched to the real brand palette. */
.blog__meta-row .badge {
    background-color: #d9a5a0;
    font-weight: 500;
}

.blog__body h2 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

.blog__body h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.blog__body blockquote {
    border-left: 4px solid #d9a5a0;
    padding-left: 1.25rem;
    font-style: italic;
    color: #555;
    margin: 1.75rem 0;
}

/* Bootstrap's .my-4 utility (1.5rem top/bottom margin) is too much
   space specifically on the Image + Text Block row. Rather than edit
   Bootstrap itself (which would affect spacing everywhere else it's
   used across the site), this rule targets only this specific block
   with higher specificity so it wins without touching Bootstrap. */
.blog__body .row.align-items-center.my-4 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* On mobile, Bootstrap correctly stacks the Image + Text Block's image
   and paragraph into one full-width column — but without this, the
   image would stay locked at whatever fixed pixel width it was set/
   resized to on desktop, leaving it small inside a now much wider
   column. This forces it to fill the full width below tablet size,
   overriding any inline width Lisa may have set by dragging to resize. */
@media (max-width: 767.98px) {
    .blog__body .row.align-items-center img {
        width: 100% !important;
        height: auto !important;
    }
}

.preview-banner {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    padding: 0.9rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}


/* ==========================================================================
   includes/service-template.php
   ========================================================================== */
/* Shared visual styling for every service page. Reuses the same
   editorial approach as the blog post template, for site-wide
   consistency. .service__tagline is shared with lifewave.php — see
   that entry above. */

.service__thumb {
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    margin-bottom: 2rem;
}

.service__body h2 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

.service__body h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* FAQ accordion, matching the site's brand colors instead of
   Bootstrap's default blue */
.service__accordion .accordion-button {
    font-weight: 600;
    font-size: 1.1rem;
    background-color: #ffcb8d45; /* closed state - stands out from white page background */
}
.service__accordion .accordion-button:not(.collapsed) {
    color: #00335a;
    background-color: #87694645; /* open/expanded state */
    box-shadow: none;
}
.service__accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.service__body img {
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Plain bulleted/numbered lists in the body content. Needed because
   the theme sets "li { list-style: none; }" directly on the <li>
   elements themselves (not just the <ul>) — a direct rule on li
   always wins over anything only inherited from the parent, so this
   has to target the <li> elements directly too, not just the list
   container. */
.service__body ul,
.service__body ol {
    margin: 1rem 0 1.5rem 0;
    padding-left: 1.5rem;
}
.service__body ul li {
    list-style: disc;
}
.service__body ol li {
    list-style: decimal;
}
.service__body li {
    margin-bottom: 0.4rem;
}

.service__gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Checkmark-style benefits list — higher specificity than the plain
   list rule above, so this correctly overrides it instead of showing
   both bullets and checkmarks. */
.service__body ul.service__checklist li {
    list-style: none;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.6rem;
}
.service__checklist li::before {
    content: "\2714";
    position: absolute;
    left: 0;
    color: #00335a;
    font-weight: bold;
}

/* Sidebar: Our Services nav list.
   Note: deliberately NOT using the theme's own .service__sidebar class
   here — that class appears to be wired to a GSAP ScrollTrigger "pin"
   behavior elsewhere in the theme's JS, tuned for the demo's short
   placeholder content. With our much longer real content, it was
   pushing the whole sidebar far down the page instead of behaving.
   This recreates the same visual look (chevron, size, hover color)
   without touching whatever JS is bound to that class name. */
.service__nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.service__nav li {
    border-bottom: 1px solid #eee;
}
.service__nav li:last-child {
    border-bottom: none;
}
.service__nav a {
    display: inline-block;
    padding: 0.6rem 0;
    font-size: 18px;
    line-height: 1.5;
    color: #00335a;
    text-transform: capitalize;
    transition: all 0.3s;
}
.service__nav a i {
    display: inline-block;
    transition: all 0.5s;
    margin-right: 0.5rem;
    font-size: 0.85em;
}
.service__nav a:hover {
    color: #ffcb8d;
}
.service__nav a:hover i {
    padding-right: 5px;
    color: #ffcb8d;
}
.service__nav a.active {
    font-weight: 700;
}


/* ==========================================================================
   includes/wishlist-compare-flyout.php
   ========================================================================== */
/* Included from footer.php, OUTSIDE #smooth-wrapper — GSAP ScrollSmoother
   breaks position:fixed elements placed inside that wrapper. This file's
   own PHP comment documents the same rule at the DOM level; this note
   just carries it forward to the CSS side. */

#wc-flyout-tab {
    position: fixed;
    top: 140px;
    right: 0;
    z-index: 9998;
    background: #ffcb8d;
    border: none;
    border-radius: 6px 0 0 6px;
    width: 32px;
    height: 60px;
    cursor: pointer;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease;
}
#wc-flyout-tab .wc-arrow { font-size: 1rem; color: #00335a; transition: transform 0.3s ease; display: inline-block; }
#wc-flyout-tab.open { right: 280px; }
#wc-flyout-tab.open .wc-arrow { transform: rotate(180deg); }

#wc-flyout-panel {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: #ffcb8d8c;
    z-index: 9997;
    box-shadow: -4px 0 12px rgba(0,0,0,0.15);
    padding: 90px 20px 20px;
    transition: right 0.3s ease;
    overflow-y: auto;
}
#wc-flyout-panel.open { right: 0; }

.wc-flyout-section h3 {
    font-size: 1.1rem;
    color: #00335a;
    margin-bottom: 0.75rem;
}
.wc-flyout-section ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.wc-flyout-section ul li { padding: 4px 0; border-bottom: 1px solid rgba(0,51,90,0.1); }
.wc-flyout-section ul li a { color: #00335a; text-decoration: none; font-size: 0.9rem; }
.wc-flyout-empty { font-size: 0.85rem; color: #6b5a45; margin-bottom: 1rem; }
.wc-flyout-cta {
    display: inline-block;
    background: #00335a;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.wc-flyout-divider { border: none; border-top: 1px solid rgba(0,51,90,0.2); margin: 1.5rem 0; }
#wc-flyout-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #00335a;
    cursor: pointer;
    line-height: 1;
}

@media (max-width: 480px) {
    #wc-flyout-panel { width: 85%; right: -85%; }
    #wc-flyout-tab.open { right: 85%; }
}