/*
Theme Name: ABL Bootstrap Block Boilerplate
Theme URI: https://leadstart.org/
Author: Leadstart Media, Inc.
Author URI: https://leadstart.org/
Description: Block theme for Accentuating Beauty & Lifestyle. Full-site-editing theme built from the ABL static site, with the original design system preserved as CSS custom properties and exposed to the block editor through theme.json.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.22.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abl
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu
*/

/* ===== from index.html ===== */

/* ==========================================================================
        THEME SYSTEM - Light/Dark Mode with Brown & Teal
        ========================================================================== */
      :root {
        /* Light Mode (default) */
        --bg-primary: #ffffff;
        --bg-secondary: #f8f6f3;
        --bg-card: #ffffff;
        --text-main: #2c2c2c;
        --text-muted: #6b6b6b;
        --border-color: #e0e0e0;
        --accent-brown: #8B4513;
        --accent-brown-light: #a0522d;
        --accent-teal: #1ca3a8;
        --accent-teal-hover: #17878b;
        --font-heading: 'Cinzel', serif;
        --font-body: 'Plus Jakarta Sans', sans-serif;
        --shadow-light: 0 4px 20px rgba(0,0,0,0.08);
        --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
      }
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
body {
        background-color: var(--bg-primary);
        color: var(--text-main);
        font-family: var(--font-body);
        line-height: 1.6;
        overflow-x: hidden;
        transition: background-color 0.3s ease, color 0.3s ease;
      }
a {
        color: inherit;
        text-decoration: none;
        transition: all 0.3s ease;
      }
ul {
        list-style: none;
      }
img {
        max-width: 100%;
        height: auto;
        display: block;
      }
.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        width: 100%;
      }
.section-title {
        font-family: var(--font-heading);
        font-size: clamp(1.8rem, 4vw, 2.2rem);
        letter-spacing: 1px;
        margin-bottom: 2rem;
        color: var(--accent-brown);
      }
/* ==========================================================================
        HEADER
        ========================================================================== */
      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border-color);
        transition: all 0.3s ease;
      }
.header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
      }
.hero-logo-img {
        margin: auto;
        max-width: 150px;
      }
.logo {
        font-family: var(--font-heading);
        font-size: clamp(1rem, 2.5vw, 1.3rem);
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--text-main);
        display: flex;
        flex-direction: row;
        line-height: 1.2;
        visibility: visible;
        align-items: center;
      }
.logo img {
          display: inline-flex;
          margin-right: 15px;
      }
.logo-text {
        display: none;
      }
@media all and (min-width: 768px) {
        .logo-text {
          display: inline-flex;
          flex-direction: column;
        }
      }
.logo .logo-main {
        color: var(--accent-brown);
        font-size: clamp(1.2rem, 3vw, 1.5rem);
      }
.logo .logo-subtitle {
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        font-family: var(--font-body);
        color: var(--accent-teal);
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 400;
        margin-top: 5px;
        display: block;
      }
.header-right {
        display: flex;
        align-items: center;
        gap: 20px;
      }
.icon-btn {
        background: none;
        border: none;
        color: var(--text-main);
        font-size: 1.3rem;
        cursor: pointer;
        position: relative;
        transition: color 0.3s;
        padding: 8px;
      }
.icon-btn:hover {
        color: var(--accent-teal);
      }
.theme-toggle {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.3rem;
        color: var(--text-main);
        transition: all 0.3s;
        padding: 8px;
      }
.theme-toggle:hover {
        color: var(--accent-teal);
      }
.cart-count {
        position: absolute;
        top: -8px;
        right: -10px;
        background: var(--accent-teal);
        color: #000;
        font-size: 0.7rem;
        font-weight: bold;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
/* Mobile Menu Drawer */
      .mobile-menu {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--bg-card);
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-light);
      }
.mobile-menu.active {
        display: block;
      }
.mobile-menu ul li {
        margin: 15px 0;
      }
.mobile-menu a {
        font-weight: 500;
      }
/* ==========================================================================
        SECTION 1: HERO SLIDER & BOOKLY ENGINE
        ========================================================================== */
      .hero-section {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 25% !important;
		padding-bottom: 10%;
        background: linear-gradient(var(--hero-scrim-a), var(--hero-scrim-b)), 
                    var(--hero-image) center/cover no-repeat;
      }
.hero-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 60px 20px;
      }
.hero-logo-text {
        font-family: var(--font-heading);
        font-size: clamp(2.5rem, 8vw, 4rem);
        font-weight: 700;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--accent-teal);
        text-shadow: 0 4px 20px rgba(0,0,0,0.3);
        opacity: 100%;
        visibility: hidden;
      }
.hero-logo-text span {
        display: block;
        font-size: clamp(1rem, 2.5vw, 1.3rem);
        font-family: var(--font-body);
        color: var(--accent-main);
        letter-spacing: 6px;
        margin-top: 15px;
        text-transform: uppercase;
        font-weight: 500;
      }
/* Bookly Appointment Bar Styles */
      .booking-wrapper {
        background: var(--bg-card);
        border-top: 2px solid var(--accent-teal);
        padding: 30px 20px;
        backdrop-filter: blur(10px);
        box-shadow: 0 -5px 30px rgba(0,0,0,0.1);
        margin: -5% 15% -30px;
      }
@media (max-width: 1200px) {
        .booking-wrapper {
          margin: 0 -20px;
          padding: 30px;
        }
      }/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-steps {
   display: flex;
   gap: 10px;
   margin-bottom: 25px;
   border-bottom: 1px solid var(--border-color);
   padding-bottom: 15px;
   overflow-x: auto;
   flex-wrap: wrap;
   }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step {
   font-size: clamp(0.75rem, 1.5vw, 0.85rem);
   font-weight: 600;
   color: var(--text-muted);
   display: flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
   }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step.active {
   color: var(--accent-teal);
   }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step-bar {
   height: 3px;
   width: 100%;
   background: var(--border-color);
   margin-top: 5px;
   border-radius: 2px;
   }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step.active .bookly-step-bar {
   background: var(--accent-teal);
   }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 15px;
   align-items: end;
   }
*/
.form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
.form-group label {
        font-size: clamp(0.7rem, 1.2vw, 0.8rem);
        font-weight: 600;
        color: var(--accent-teal);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
.form-control {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        color: var(--text-main);
        padding: 12px 15px;
        border-radius: 4px;
        font-family: var(--font-body);
        font-size: 0.9rem;
        outline: none;
        transition: border-color 0.3s;
      }
.form-control:focus {
        border-color: var(--accent-teal);
      }
.btn-book {
        background: var(--accent-teal);
        color: #000;
        font-weight: 700;
        border: none;
        padding: 13px 20px;
        border-radius: 4px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        height: 46px;
      }
.btn-book:hover {
        background: var(--accent-teal-hover);
        color: #fff;
      }
/* ==========================================================================
        SECTION 2: SERVICES
        ========================================================================== */
      .services-section {
        padding: clamp(60px, 10vw, 100px) 0;
        background: var(--bg-primary);
      }
.services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: clamp(20px, 3vw, 30px);
      }
.service-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        padding: 40px 30px;
        border-top: 3px solid var(--accent-teal);
        transition: all 0.3s;
        box-shadow: var(--shadow-light);
      }
.service-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
      }
.service-card-image {
        height: 200px;
        overflow: hidden;
        margin-bottom: 20px;
        border: 1px solid var(--border-color);
      }
.service-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
.service-card:hover .service-card-image img {
        transform: scale(1.05);
      }
.service-card h3 {
        font-family: var(--font-heading);
        font-size: clamp(1.3rem, 2.5vw, 1.5rem);
        color: var(--accent-brown);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
      }
.service-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }
.service-item h4 {
        font-size: 1.05rem;
        font-weight: 600;
        text-transform: capitalize;
        color: var(--text-main);
      }
.service-item p {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-top: 3px;
        line-height: 1.6;
      }
/* ==========================================================================
        SECTION 3: CTA & HOURS
        ========================================================================== */
      .cta-hours-section {
        padding: clamp(60px, 8vw, 80px) 0;
        background: var(--bg-secondary);
      }
.cta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: clamp(30px, 5vw, 50px);
        align-items: center;
      }
.cta-image img {
        border-radius: 8px;
        box-shadow: var(--shadow-medium);
        border: 1px solid var(--border-color);
        width: 100%;
      }
.hours-box h2 {
        margin-bottom: 15px;
        color: var(--accent-brown);
      }
.hours-box p {
        color: var(--text-muted);
        margin-bottom: 30px;
        font-size: 1.1rem;
      }
.hours-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 30px;
      }
.hours-table tr {
        border-bottom: 1px solid var(--border-color);
      }
.hours-table td {
        padding: 12px 0;
        font-size: clamp(0.85rem, 1.5vw, 0.95rem);
      }
.hours-table td:last-child {
        text-align: right;
        color: var(--accent-teal);
        font-weight: 600;
      }
/* ==========================================================================
        SECTION 4: GALLERY
        ========================================================================== */
      .gallery-section {
        padding: clamp(60px, 10vw, 100px) 0;
        background: var(--bg-primary);
      }
.gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: clamp(15px, 2vw, 20px);
      }
.gallery-item {
        position: relative;
        overflow: hidden;
        aspect-ratio: 3/4;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-light);
        transition: all 0.3s;
      }
.gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
      }
.gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
.gallery-item:hover img {
        transform: scale(1.05);
      }
.gallery-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(transparent, rgba(0,0,0,0.8));
      }
.gallery-overlay h4 {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        color: #ffffff; /* [ABL] was var(--bg-primary) — #0a0a0a in dark mode, on a permanently dark overlay */
      }
.gallery-overlay span {
        font-size: 0.75rem;
        color: var(--accent-teal);
        text-transform: uppercase;
        letter-spacing: 1px;
      }
/* ==========================================================================
        SECTION 5: BLOG
        ========================================================================== */
      .blog-section {
        padding: clamp(60px, 10vw, 100px) 0;
        background: var(--bg-secondary);
      }
.blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: clamp(20px, 3vw, 30px);
      }
.blog-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-light);
        transition: all 0.3s;
      }
.blog-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
      }
.blog-img {
        height: 200px;
        overflow: hidden;
      }
.blog-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
.blog-card:hover .blog-img img {
        transform: scale(1.05);
      }
.blog-content {
        padding: 25px;
      }
.blog-meta {
        font-size: 0.75rem;
        color: var(--accent-teal);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
      }
.blog-title {
        font-family: var(--font-heading);
        font-size: clamp(1.1rem, 2vw, 1.2rem);
        margin-bottom: 15px;
        line-height: 1.4;
        color: var(--text-main);
      }
.read-more {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-main);
        border-bottom: 2px solid var(--accent-teal);
        padding-bottom: 2px;
        margin-top: 10px;
        transition: all 0.3s;
      }
.read-more:hover {
        color: var(--accent-teal);
      }
/* ==========================================================================
        SECTION 6: SHOP
        ========================================================================== */
      .shop-section {
        padding: clamp(60px, 10vw, 100px) 0;
        background: var(--bg-primary);
      }
.shop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        flex-wrap: wrap;
        gap: 20px;
      }
.view-toggle {
        display: flex;
        gap: 10px;
        background: var(--bg-secondary);
        padding: 5px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
      }
.view-toggle button {
        background: none;
        border: none;
        padding: 8px 15px;
        cursor: pointer;
        color: var(--text-muted);
        transition: all 0.3s;
        border-radius: 4px;
      }
.view-toggle button.active {
        background: var(--accent-teal);
        color: #000;
      }
.shop-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: clamp(20px, 3vw, 30px);
      }
.product-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        padding: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        box-shadow: var(--shadow-light);
        transition: all 0.3s;
      }
.product-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
      }
.product-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 50px;
        height: 50px;
        background: var(--accent-brown);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
.product-badge.sale {
        background: var(--accent-teal);
        color: #000;
      }
.product-img {
        height: 300px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        overflow: hidden;
      }
.product-img img {
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.5s ease;
      }
.product-card:hover .product-img img {
        transform: scale(1.05);
      }
.product-title {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        margin-bottom: 10px;
        color: var(--text-main);
      }
.product-price {
        font-size: 1.2rem;
        color: var(--accent-brown);
        font-weight: 700;
        margin-bottom: 15px;
      }
.product-price .original {
        text-decoration: line-through;
        color: var(--text-muted);
        font-size: 0.9rem;
        margin-right: 8px;
      }
.btn-add-cart {
        background: transparent;
        border: 1px solid var(--accent-teal);
        color: var(--accent-teal);
        padding: 10px 15px;
        width: 100%;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        border-radius: 4px;
      }
.btn-add-cart:hover {
        background: var(--accent-teal);
        color: #000;
      }
/* ==========================================================================
        SECTION 7: REVIEWS
        ========================================================================== */
      .reviews-section {
        padding: clamp(60px, 10vw, 100px) 0;
        background: var(--bg-secondary);
      }
.reviews-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 40px;
        flex-wrap: wrap;
      }
.google-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 0.85rem;
      }
.google-badge i.fa-google {
        color: #4285F4;
      }
.stars {
        color: #FFD700;
        font-size: 0.9rem;
      }
.reviews-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: clamp(20px, 3vw, 30px);
      }
.review-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        padding: 30px;
        position: relative;
        box-shadow: var(--shadow-light);
        transition: all 0.3s;
      }
.review-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
      }
.review-quote {
        font-size: 1.1rem;
        font-style: italic;
        margin-bottom: 20px;
        color: var(--text-main);
        line-height: 1.6;
      }
.review-author {
        display: flex;
        align-items: center;
        gap: 15px;
      }
.author-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: var(--accent-teal);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: #000;
        flex-shrink: 0;
      }
.author-info h5 {
        font-size: 1rem;
        color: var(--text-main);
      }
.author-info span {
        font-size: 0.8rem;
        color: var(--text-muted);
      }
/* ==========================================================================
        FOOTER
        ========================================================================== */
      footer {
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        padding: clamp(60px, 10vw, 80px) 0 30px 0;
      }
.footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: clamp(30px, 5vw, 40px);
        margin-bottom: 60px;
      }
.footer-col h4 {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        color: var(--accent-brown);
        margin-bottom: 20px;
      }
.footer-col p, .footer-col li {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-bottom: 10px;
      }
.footer-col a {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-bottom: 10px;
        transition: color 0.3s;
      }
.footer-col a:hover {
        color: var(--accent-teal);
      }
.footer-socials {
        display: flex;
        gap: 15px;
        margin-top: 15px;
      }
.footer-socials a {
        width: 35px;
        height: 35px;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-main);
        transition: all 0.3s;
      }
.footer-socials a:hover {
        border-color: var(--accent-teal);
        color: var(--accent-teal);
      }
.newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
.newsletter-form input {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        padding: 12px;
        color: var(--text-main);
        outline: none;
        border-radius: 4px;
      }
.newsletter-form button {
        background: var(--accent-brown);
        color: #fff;
        font-weight: 700;
        border: none;
        padding: 12px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 4px;
        transition: background 0.3s;
      }
.newsletter-form button:hover {
        background: var(--accent-brown-light);
      }
.footer-bottom {
        text-align: center;
        border-top: 1px solid var(--border-color);
        padding-top: 30px;
        font-size: 0.8rem;
        color: var(--text-muted);
      }
/* ==========================================================================
        RESPONSIVE BREAKPOINTS
        ========================================================================== */
      @media (max-width: 768px) {
        .shop-grid {
          grid-template-columns: 1fr;
        }
        .cta-grid {
          grid-template-columns: 1fr;
        }
        .hero-logo-text {
          font-size: 2rem;
        }
        .booking-wrapper {
          margin: 0 -20px;
          padding: 20px;
        }
        /* [ABL 1.6.0] commented out — see the Bookly note at the end of this file.
        .bookly-form {
          grid-template-columns: 1fr 1fr;
        }
        */
        .header-right {
          gap: 15px;
        }
		  
		  .hero-section {
    padding-top: 25% !important;
    padding-bottom: 10%;
    background: linear-gradient(rgb(10 10 10 / 75%), rgb(10 10 10 / 75%)), var(--hero-image) center / cover no-repeat;
}
      }
@media (max-width: 480px) {/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form {
   grid-template-columns: 1fr;
   }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-steps {
   justify-content: space-between;
   }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step {
   font-size: 0.7rem;
   }
*/
      }

/* ===== from about.html ===== */

:root {
  --bg-primary: #ffffff; --bg-secondary: #f8f6f3; --bg-card: #ffffff;
  --text-main: #2c2c2c; --text-muted: #6b6b6b; --border-color: #e0e0e0;
  --accent-brown: #8B4513; --accent-brown-light: #a0522d;
  --accent-teal: #1ca3a8; --accent-teal-hover: #17878b;
  --font-heading: 'Cinzel', serif; --font-body: 'Plus Jakarta Sans', sans-serif;
  --shadow-light: 0 4px 20px rgba(0,0,0,0.08); --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
}
body { background-color: var(--bg-primary); color: var(--text-main); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; transition: all 0.3s ease; }
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); transition: all 0.3s ease; }
.logo { font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 700; letter-spacing: 2px; color: var(--text-main); display: flex; align-items: center; }
@media (min-width: 768px) { .logo-text { display: inline-flex; flex-direction: column; } }
/* [ABL 1.13.0] header .logo .logo-subtitle {margin-top: -5px} — removed.
   Cancelled the +5px in the base stylesheet by out-specifying it, and
   compensated for line-height 1.6 leading on the old <span> markup.
   core/site-title now sets line-height 1.2 and margin 0, so this was
   pulling the tagline into the title's descenders. */
.icon-btn { background: none; border: none; color: var(--text-main); font-size: 1.3rem; cursor: pointer; position: relative; padding: 8px; transition: color 0.3s; }
.mobile-menu { display: none; position: fixed; top: 80px; left: 0; width: 100%; background: var(--bg-card); padding: 20px; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-light); }
.page-hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; background: linear-gradient(var(--hero-scrim-a), var(--hero-scrim-b)), var(--page-hero-image) center/cover no-repeat; }
.page-hero h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: 3px; color: #ffffff; text-shadow: 0 4px 20px rgba(0,0,0,0.5); } /* [ABL] was var(--bg-primary) — #0a0a0a in dark mode, on a permanently dark banner */
.breadcrumb { background: var(--bg-secondary); padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.breadcrumb .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.breadcrumb a { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.breadcrumb a:hover { color: var(--accent-teal); }
.breadcrumb span { color: var(--accent-brown); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.main-content { padding: 60px 0; background: var(--bg-primary); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 992px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.about-content h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.2rem); color: var(--accent-brown); margin-bottom: 20px; letter-spacing: 1px; }
.about-content .lead { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 25px; line-height: 1.8; }
.about-content p { margin-bottom: 25px; line-height: 1.8; }
.signature { font-family: var(--font-heading); font-size: 2rem; color: var(--accent-brown); margin: 30px 0 20px; font-style: italic; }
.about-socials { display: flex; gap: 15px; margin-top: 20px; }
.about-socials a { width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); transition: all 0.3s; }
.about-socials a:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.about-image img { width: 100%; border-radius: 8px; box-shadow: var(--shadow-medium); border: 1px solid var(--border-color); }
.booking-popup { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1200px; background: var(--bg-card); border-top: 2px solid var(--accent-teal); padding: 30px 20px; backdrop-filter: blur(10px); box-shadow: 0 -5px 30px rgba(0,0,0,0.1); z-index: 999; border-radius: 8px 8px 0 0; }
@media (max-width: 1200px) { .booking-popup { width: 100%; left: 0; transform: none; margin: 0 -20px; } }
footer { background: var(--bg-primary); border-top: 1px solid var(--border-color); padding: clamp(60px, 10vw, 80px) 0 30px 0; }
@media (max-width: 768px) { .booking-popup { margin: 0 -20px; padding: 20px; }/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form { grid-template-columns: 1fr 1fr; }
*/ .header-right { gap: 15px; } }

/* ===== from services.html ===== */

.page-hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; background: linear-gradient(var(--hero-scrim-a), var(--hero-scrim-b)), var(--page-hero-image) center/cover no-repeat; }
.services-intro { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.services-intro p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; }

/* ===== from services-new.html ===== */

/* [ABL 1.13.0] header .logo .logo-subtitle {margin-top: -5px} — removed.
   Cancelled the +5px in the base stylesheet by out-specifying it, and
   compensated for line-height 1.6 leading on the old <span> markup.
   core/site-title now sets line-height 1.2 and margin 0, so this was
   pulling the tagline into the title's descenders. */
.pricing-intro { text-align: center; max-width: 800px; margin: 60px auto 40px; }
.pricing-intro p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 5vw, 40px); }
@media (max-width: 992px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-column { background: var(--bg-card); border: 1px solid var(--border-color); padding: 30px; border-top: 3px solid var(--accent-teal); box-shadow: var(--shadow-light); transition: all 0.3s; }
.pricing-column:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.pricing-column h3 { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 1.6rem); color: var(--accent-brown); margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); text-transform: uppercase; letter-spacing: 1px; }
.pricing-list { display: flex; flex-direction: column; gap: 20px; }
.pricing-item { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.pricing-item:last-child { border-bottom: none; }
.pricing-item-info h4 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin-bottom: 5px; text-transform: capitalize; }
.pricing-item-info p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.pricing-item-price { font-family: var(--font-heading); font-size: 1.2rem; color: var(--accent-brown); font-weight: 700; white-space: nowrap; }
.discount-cta { text-align: center; margin-top: 60px; padding: 40px; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.discount-cta h3 { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 1.8rem); color: var(--accent-brown); margin-bottom: 15px; }
.discount-cta p { font-size: 1rem; color: var(--text-muted); margin-bottom: 25px; max-width: 600px; margin-left: auto; margin-right: auto; }
.btn-cta { display: inline-block; background: var(--accent-teal); color: #000; font-weight: 700; border: none; padding: 15px 35px; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; font-family: var(--font-body); }
.btn-cta:hover { background: var(--accent-teal-hover); color: #fff; }
@media (max-width: 768px) { .booking-popup { margin: 0 -20px; padding: 20px; }/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form { grid-template-columns: 1fr 1fr; }
*/ .header-right { gap: 15px; } .pricing-grid { grid-template-columns: 1fr; } }

/* ===== from pricing.html ===== */

.page-hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; background: linear-gradient(var(--hero-scrim-a), var(--hero-scrim-b)), var(--page-hero-image) center/cover no-repeat; }
.pricing-intro { text-align: center; max-width: 800px; margin: 0 auto 60px; }

/* ===== from gallery.html ===== */

.gallery-intro { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.gallery-intro p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(15px, 2vw, 20px); }
@media (max-width: 992px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ===== from testimonials.html ===== */

/* ===== THEME & BASE STYLES ===== */
:root {
  --bg-primary: #ffffff; --bg-secondary: #f8f6f3; --bg-card: #ffffff;
  --text-main: #2c2c2c; --text-muted: #6b6b6b; --border-color: #e0e0e0;
  --accent-brown: #8B4513; --accent-brown-light: #a0522d;
  --accent-teal: #1ca3a8; --accent-teal-hover: #17878b;
  --font-heading: 'Cinzel', serif; --font-body: 'Plus Jakarta Sans', sans-serif;
  --shadow-light: 0 4px 20px rgba(0,0,0,0.08); --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
}
/* ===== HEADER ===== */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); transition: all 0.3s ease; }
/* ===== PAGE LAYOUT ===== */
.page-hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; background: linear-gradient(var(--hero-scrim-a), var(--hero-scrim-b)), var(--page-hero-image) center/cover no-repeat; }
.testimonials-intro { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.testimonials-intro p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; }
.reviews-header { display: flex; align-items: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }
.leave-review { text-align: center; margin-top: 60px; }
.btn-review { display: inline-block; background: var(--accent-brown); color: #fff; font-weight: 700; border: none; padding: 15px 35px; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; font-family: var(--font-body); font-size: 1rem; }
.btn-review:hover { background: var(--accent-brown-light); }
/* ===== BOOKING POPUP ===== */
.booking-popup { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1200px; background: var(--bg-card); border-top: 2px solid var(--accent-teal); padding: 30px 20px; backdrop-filter: blur(10px); box-shadow: 0 -5px 30px rgba(0,0,0,0.1); z-index: 999; border-radius: 8px 8px 0 0; }
/* ===== FOOTER ===== */
footer { background: var(--bg-primary); border-top: 1px solid var(--border-color); padding: clamp(60px, 10vw, 80px) 0 30px 0; }

/* ===== from shop.html ===== */

.shop-intro { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.shop-intro p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; }
.shop-container { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
@media (max-width: 992px) { .shop-container { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .shop-container { gap: 30px; } }
/* ===== SIDEBAR ===== */
.shop-sidebar { background: var(--bg-card); border: 1px solid var(--border-color); padding: 30px; box-shadow: var(--shadow-light); height: fit-content; }
.sidebar-section { margin-bottom: 30px; }
.sidebar-section:last-child { margin-bottom: 0; }
.sidebar-title { font-family: var(--font-heading); font-size: 1.1rem; color: var(--accent-brown); margin-bottom: 15px; letter-spacing: 1px; }
.search-box { display: flex; gap: 10px; }
.search-box input { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-color); padding: 10px 15px; border-radius: 4px; color: var(--text-main); outline: none; }
.search-box button { background: var(--accent-brown); color: #fff; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; transition: background 0.3s; }
.search-box button:hover { background: var(--accent-brown-light); }
.categories-list { display: flex; flex-direction: column; gap: 10px; }
.categories-list a { font-size: 0.9rem; color: var(--text-muted); padding: 8px 0; border-bottom: 1px solid var(--border-color); transition: color 0.3s; }
.categories-list a:hover { color: var(--accent-teal); }
.ad-container { text-align: center; }
.ad-container img { width: 100%; border-radius: 8px; }
.social-sidebar { display: flex; flex-direction: column; gap: 10px; }
.social-sidebar a { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-muted); transition: color 0.3s; }
.social-sidebar a:hover { color: var(--accent-teal); }
/* ===== PRODUCTS GRID ===== */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 30px); }
@media (max-width: 768px) { .booking-popup { margin: 0 -20px; padding: 20px; }/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form { grid-template-columns: 1fr 1fr; }
*/ .header-right { gap: 15px; } .shop-container { grid-template-columns: 1fr; } }

/* ===== from contact.html ===== */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-info { background: var(--bg-card); border: 1px solid var(--border-color); padding: 40px; box-shadow: var(--shadow-light); }
.contact-info h3 { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 1.6rem); color: var(--accent-brown); margin-bottom: 25px; letter-spacing: 1px; }
.contact-details { display: flex; flex-direction: column; gap: 20px; }
.contact-item { display: flex; align-items: flex-start; gap: 15px; }
.contact-item i { font-size: 1.2rem; color: var(--accent-teal); margin-top: 3px; }
.contact-item-content h4 { font-size: 1rem; color: var(--text-main); margin-bottom: 5px; }
.contact-item-content p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.contact-socials { display: flex; gap: 15px; margin-top: 30px; }
.contact-socials a { width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); transition: all 0.3s; }
.contact-socials a:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.contact-image img { width: 100%; border-radius: 8px; box-shadow: var(--shadow-medium); border: 1px solid var(--border-color); }
.map-container { margin-top: 30px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--shadow-medium); }
.map-container iframe { width: 100%; height: 300px; border: none; display: block; }
@media (max-width: 768px) { .booking-popup { margin: 0 -20px; padding: 20px; }/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form { grid-template-columns: 1fr 1fr; }
*/ .header-right { gap: 15px; } .contact-grid { grid-template-columns: 1fr; } }

/* ===== from book-appointment.html ===== */

.booking-intro { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.booking-intro p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; }
.booking-section {background: none; padding: 0 0 3rem;}

.booking-wrapper { background: var(--bg-card); border: 1px solid var(--border-color); padding: 40px; box-shadow: var(--shadow-light); border-radius: 8px; }/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-steps { display: flex; gap: 10px; margin-bottom: 30px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; flex-wrap: wrap; }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step { font-size: clamp(0.75rem, 1.5vw, 0.9rem); font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: 1; min-width: 120px; }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; align-items: end; }
*/
.form-group label { font-size: clamp(0.75rem, 1.2vw, 0.85rem); font-weight: 600; color: var(--accent-teal); text-transform: uppercase; letter-spacing: 0.5px; }
.form-control { background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-main); padding: 14px 15px; border-radius: 4px; font-family: var(--font-body); font-size: 0.95rem; outline: none; transition: border-color 0.3s; }
.btn-book { background: var(--accent-teal); color: #000; font-weight: 700; border: none; padding: 15px 25px; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; height: 50px; font-family: var(--font-body); }
.booking-notes { margin-top: 40px; padding: 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }
.booking-notes h4 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--accent-brown); margin-bottom: 15px; }
.booking-notes ul { display: flex; flex-direction: column; gap: 10px; }
.booking-notes li { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; }
.booking-notes li i { color: var(--accent-teal); margin-top: 2px; }
@media (max-width: 768px) {/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-form { grid-template-columns: 1fr; }
*/ .header-right { gap: 15px; } .booking-wrapper { padding: 30px 20px; }/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-steps { justify-content: space-between; }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step { font-size: 0.75rem; }
*/ }
@media (max-width: 480px) {/* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-steps { justify-content: space-between; }
*//* [ABL 1.6.0] commented out — styled the static booking mock, and the mock
   reused the real Bookly plugin's class names, so this was reshaping the
   live form. Colours only are re-applied at the end of this file.
   .bookly-step { font-size: 0.7rem; }
*/ }

/* ===== from privacy.html ===== */

body { background-color: var(--bg-primary); color: var(--text-main); font-family: var(--font-body); line-height: 1.8; overflow-x: hidden; transition: all 0.3s ease; }
.page-hero { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; background: linear-gradient(var(--hero-scrim-a), var(--hero-scrim-b)), var(--page-hero-image) center/cover no-repeat; }
.privacy-container { max-width: 800px; margin: 0 auto; }
.privacy-section { margin-bottom: 40px; }
.privacy-section h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--accent-brown); margin-bottom: 15px; letter-spacing: 1px; }
.privacy-section p { margin-bottom: 15px; color: var(--text-muted); line-height: 1.8; }
.privacy-section ul { margin-left: 20px; margin-bottom: 15px; }
.privacy-section li { margin-bottom: 8px; color: var(--text-muted); line-height: 1.8; }
.privacy-section a { color: var(--accent-teal); }
.last-updated { font-style: italic; color: var(--text-muted); text-align: right; margin-top: 20px; }

/* ===== from terms.html ===== */

.page-hero { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; background: linear-gradient(var(--hero-scrim-a), var(--hero-scrim-b)), var(--page-hero-image) center/cover no-repeat; }
.terms-container { max-width: 800px; margin: 0 auto; }
.terms-section { margin-bottom: 40px; }
.terms-section h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--accent-brown); margin-bottom: 15px; letter-spacing: 1px; }
.terms-section p { margin-bottom: 15px; color: var(--text-muted); line-height: 1.8; }
.terms-section ul { margin-left: 20px; margin-bottom: 15px; }
.terms-section li { margin-bottom: 8px; color: var(--text-muted); line-height: 1.8; }
.terms-section a { color: var(--accent-teal); }
/* ==========================================================================
   GUTENBERG COMPATIBILITY
   Added during the WordPress conversion. The static CSS above is unmodified.
   Everything in this block exists because the block editor wraps content in
   extra elements that the original selectors did not anticipate.
   ========================================================================== */

/* The global reset above sets `ul { list-style: none }` and
   `a { color: inherit; text-decoration: none }`. That is right for the chrome,
   but it silently strips bullets and link styling from anything the client
   writes in the editor. Restore normal behaviour inside post content only. */
.wp-block-post-content ul.wp-block-list,
.wp-block-post-content ol.wp-block-list,
.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list {
  list-style: revert;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.wp-block-post-content p > a,
.wp-block-post-content li > a,
.entry-content p > a,
.entry-content li > a {
  color: var(--accent-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-block-post-content p > a:hover,
.entry-content p > a:hover {
  color: var(--accent-teal-hover);
}

/* core/image renders <figure class="wp-block-image"><img></figure>. The original
   CSS sized the <img> directly inside a fixed-height parent, so the figure needs
   to inherit that box or the crop breaks. */
.service-card-image .wp-block-image,
.blog-img .wp-block-image,
.product-img .wp-block-image,
.gallery-item .wp-block-image,
.cta-image .wp-block-image,
.contact-image .wp-block-image,
.about-image .wp-block-image {
  margin: 0;
  height: 100%;
  width: 100%;
}

.service-card-image .wp-block-image img,
.blog-img .wp-block-image img,
.product-img .wp-block-image img,
.gallery-item .wp-block-image img,
.cta-image .wp-block-image img,
.contact-image .wp-block-image img,
.about-image .wp-block-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* core/group emits .wp-block-group with its own margin rules. Neutralise them
   where a layout class is already handling spacing. */
.wp-block-group.container,
.wp-block-group.services-grid,
.wp-block-group.gallery-grid,
.wp-block-group.blog-grid,
.wp-block-group.shop-grid,
.wp-block-group.reviews-grid,
.wp-block-group.footer-grid,
.wp-block-group.cta-grid,
.wp-block-group.contact-grid,
.wp-block-group.pricing-grid,
.wp-block-group.about-grid {
  margin-block-start: 0;
}

/* Headings: core/heading adds .wp-block-heading, which carries no styling of its
   own, but the reset removes margins. Restore the rhythm the static pages had. */
.wp-block-post-content > .wp-block-heading {
  margin-block: 1.5rem 0.75rem;
}

/* Button block styles registered in functions.php.
   Reuses the original .btn-book / .btn-cta declarations. */
.wp-block-button.is-style-abl-book .wp-block-button__link,
.wp-block-button.is-style-abl-cta .wp-block-button__link {
  font-family: var(--font-body);
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wp-block-button.is-style-abl-book .wp-block-button__link {
  background: var(--accent-teal);
  color: #fff;
  padding: 12px 30px;
  font-weight: 600;
}

.wp-block-button.is-style-abl-book .wp-block-button__link:hover {
  background: var(--accent-teal-hover);
}

.wp-block-button.is-style-abl-cta .wp-block-button__link {
  background: var(--accent-brown);
  color: #fff;
  padding: 14px 34px;
  font-weight: 600;
}

.wp-block-button.is-style-abl-cta .wp-block-button__link:hover {
  background: var(--accent-brown-light);
}

/* core/navigation replaces the hand-written mobile menu list. Inherit the
   original .mobile-menu link styling so the markup swap is invisible. */
.mobile-menu .wp-block-navigation__container {
  display: block;
}

.mobile-menu .wp-block-navigation-item__content {
  display: block;
  padding: 12px 0;
  font-family: var(--font-body);
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}

/* WordPress admin bar offsets the fixed header when an editor is logged in. */
.admin-bar header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar header {
    top: 46px;
  }
}

/* The Bookly and Contact Form 7 shortcodes render inside a core/shortcode block.
   Give them the same container the static placeholders had. */
.booking-wrapper .wp-block-shortcode,
.contact-form-wrap .wp-block-shortcode {
  width: 100%;
}

/* Editor canvas: the fixed header does not exist inside the editor iframe,
   so remove the body offset that compensates for it on the front end. */
.editor-styles-wrapper .hero-section {
  padding-top: 0;
}

/* Font Awesome via CSS, so contact lines stay plain Paragraph blocks.
   The client edits the text; the icon is attached by the class. */
.abl-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
  color: var(--accent-teal);
  display: inline-block;
}

.abl-icon-location::before { content: "\f3c5"; }
.abl-icon-email::before    { content: "\f0e0"; }
.abl-icon-phone::before    { content: "\f095"; }
.abl-icon-calendar::before { content: "\f274"; }
.abl-icon-clock::before    { content: "\f017"; }
.abl-icon-check::before    { content: "\f00c"; }

.footer-book-link a {
  color: var(--accent-teal);
  font-weight: 600;
}

/* core/social-links inside the footer, matched to the original .footer-socials look. */
.footer-socials.wp-block-social-links {
  margin-top: 20px;
  gap: 12px;
}

.footer-socials .wp-social-link {
  background: transparent;
  color: var(--text-muted);
}

.footer-socials .wp-social-link:hover {
  color: var(--accent-teal);
  transform: none;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Book Appointment link in the mobile menu keeps its accent colour. */
.mobile-menu .nav-book .wp-block-navigation-item__content,
.mobile-menu .nav-book a {
  color: var(--accent-teal);
  font-weight: 600;
}

/* Sale price strike-through. The block editor's inline strikethrough format
   serialises as a bare <s>, so target the element rather than a class. */
.product-price s,
.product-price .original {
  color: var(--text-muted);
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 400;
}


/* ==========================================================================
   DARK MODE OVERRIDES — hoisted
   Every [data-theme="dark"] rule was collected from the page stylesheets and
   moved here, at the very end of the cascade.

   Why: merging thirteen pages left three separate :root blocks. The last one
   sat at line ~1018, AFTER the final dark block at ~935. :root and
   [data-theme="dark"] have identical specificity (0,1,0), so the later rule
   won and every variable was reset to its light value. The toggle flipped the
   attribute correctly and nothing changed on screen.

   Same problem for `header`, declared three times with only one dark variant
   ahead of the last two.

   Nothing below is edited — the rules are byte-for-byte what the static pages
   had. Only their position changed.
   ========================================================================== */

[data-theme="dark"] {
        /* Dark Mode */
        --bg-primary: #0a0a0a;
        --bg-secondary: #141414;
        --bg-card: #1a1a1a;
        --text-main: #ffffff;
        --text-muted: #999999;
        --border-color: #262626;
        --accent-brown: #c4845c;
        --accent-brown-light: #d4946c;
        --accent-teal: #1ca3a8;
        --accent-teal-hover: #17878b;
        --shadow-light: 0 4px 20px rgba(0,0,0,0.4);
        --shadow-medium: 0 8px 30px rgba(0,0,0,0.6);
      }

[data-theme="dark"] header {
        background: rgba(10, 10, 10, 0.95);
      }

/* [ABL 1.15.0] [data-theme="dark"] .hero-section removed: it re-declared the
   same background shorthand the light rule now carries, token for token.
   Keeping a duplicate shorthand around is how the .page-hero image went
   missing in the first place. */

[data-theme="dark"] {
  --bg-primary: #0a0a0a; --bg-secondary: #141414; --bg-card: #1a1a1a;
  --text-main: #ffffff; --text-muted: #999999; --border-color: #262626;
  --accent-brown: #c4845c; --accent-brown-light: #d4946c;
  --shadow-light: 0 4px 20px rgba(0,0,0,0.4); --shadow-medium: 0 8px 30px rgba(0,0,0,0.6);
}

/* --------------------------------------------------------------------------
   Dark variants the static pages never had.
   These are additions, not edits — the inner pages hard-coded near-white
   surfaces with no dark counterpart, so they stayed light when the rest of the
   page flipped.
   -------------------------------------------------------------------------- */

/* Fixed header: declared three times across the merged pages, only one of them
   had a dark variant. Re-asserted here so it wins regardless of source order. */
[data-theme="dark"] header {
  background: rgba(10, 10, 10, 0.95);
  border-bottom-color: var(--border-color);
}

/* Inner-page hero band: nothing needed here any more. It used to carry
   `background: linear-gradient(...)` — a SHORTHAND, which resets every
   background longhand it does not mention, including the photo layer. Dark mode
   therefore lost var(--page-hero-image) entirely. The scrim is now two
   variables (see the end of this file) and .page-hero has a single background
   declaration, so there is nothing left to override. */

/* Surfaces that read from --bg-card / --bg-secondary in light mode but were
   written as literals on some pages. */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .booking-wrapper,
[data-theme="dark"] .booking-popup {
  background: var(--bg-secondary);
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .privacy-section,
[data-theme="dark"] .terms-section,
[data-theme="dark"] .pricing-column,
[data-theme="dark"] .service-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .hours-box,
[data-theme="dark"] .contact-info {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* Buttons that hard-code #000 text on a teal fill — fine on light teal,
   unreadable on the dark surface behind it. */
[data-theme="dark"] .btn-book,
[data-theme="dark"] .btn-cta,
[data-theme="dark"] .btn-add-cart:hover,
[data-theme="dark"] .view-toggle button.active,
[data-theme="dark"] .author-avatar,
[data-theme="dark"] .product-badge.sale {
  color: #0a0a0a;
}

/* Block-editor surfaces */
[data-theme="dark"] .wp-block-table td,
[data-theme="dark"] .wp-block-table th {
  border-color: var(--border-color);
}

[data-theme="dark"] .wp-block-search__input,
[data-theme="dark"] .newsletter-form input,
[data-theme="dark"] .search-box input {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* Jetpack's subscribe form inherits its own light defaults. */
[data-theme="dark"] .wp-block-jetpack-subscriptions input[type="email"] {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* Respect a reduced-motion preference — the body colour transition is
   decorative and can be uncomfortable when the whole page flips. */
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Fixed-header clearance on templates with no hero band.

   The static pages never put top padding on <body>. Each page cleared the
   80px fixed header with whatever came first:
       .hero-section { padding-top: 80px }      (home)
       .page-hero    { padding: 120px 20px 60px }  (inner pages)
   and .main-content only carries 60px, which is less than the header height.

   The Full Width and front-page templates render post-content directly, so a
   page whose content does not open with one of those two heroes has its first
   80px hidden behind the header. It renders — you just cannot see it.
   -------------------------------------------------------------------------- */
.wp-block-post-content > :first-child:not(.hero-section):not(.page-hero) {
  padding-top: 140px;
}

/* The admin bar pushes the fixed header down by its own height. */
.admin-bar .wp-block-post-content > :first-child:not(.hero-section):not(.page-hero) {
  padding-top: 172px;
}

@media screen and (max-width: 782px) {
  .admin-bar .wp-block-post-content > :first-child:not(.hero-section):not(.page-hero) {
    padding-top: 186px;
  }
}

/* --------------------------------------------------------------------------
   Query Loop inside page content.

   core/post-template renders a real <ul> of <li> items. Three things follow
   from that, none of which the static blog markup had to deal with:

   1. The bullet-restore rule above used to read `.wp-block-post-content ul`,
      which matched this <ul> and put list markers and 1.5rem of indent back on
      the post grid. It is now scoped to `.wp-block-list`, the class core's List
      block actually emits, so only real List blocks are affected.
   2. The <li> is the grid item, and .blog-card sits inside it — so the card
      needs to be told to fill its cell or the columns come out ragged.
   3. core/post-featured-image renders nothing when a post has no featured
      image, leaving .blog-img as an empty 200px box.
   -------------------------------------------------------------------------- */

.wp-block-post-template {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.blog-grid > .wp-block-post,
.wp-block-post-template > li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* WordPress's flow layout adds margin between siblings. The grid gap already
   handles spacing, so this would double it. */
.wp-block-post-template-is-layout-flow > * + * {
  margin-block-start: 0;
}

.blog-grid > .wp-block-post > .blog-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card .blog-content {
  flex: 1;
}

/* Collapse the image band when there is no featured image. */
.blog-img:empty,
.blog-img:not(:has(img)) {
  display: none;
}

/* core/post-title and core/post-date bring their own wrappers. */
.blog-title.wp-block-post-title {
  margin: 0 0 15px;
}

.blog-title.wp-block-post-title a {
  color: var(--text-main);
}

.blog-title.wp-block-post-title a:hover {
  color: var(--accent-teal);
}

.blog-meta .wp-block-post-date,
.blog-meta .wp-block-post-terms {
  font-size: inherit;
  color: inherit;
}

.blog-meta .wp-block-post-terms a {
  color: inherit;
}

.read-more.wp-block-read-more {
  text-decoration: none;
}

/* ==========================================================================
   OFFCANVAS NAVIGATION

   Bootstrap's offcanvas markup and API — same class names, same
   data-bs-toggle / data-bs-dismiss attributes, same .showing/.show/.hiding
   state classes. If ABL_USE_BOOTSTRAP is switched on and the real
   bootstrap.bundle.min.js loads, theme.js detects window.bootstrap and steps
   aside; Bootstrap drives the identical markup and its own CSS wins.

   The rules below exist so the component works without pulling in ~230KB of
   Bootstrap CSS, whose Reboot would override this theme's own reset.
   ========================================================================== */

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background-color: var(--bg-primary);
  background-clip: padding-box;
  outline: 0;
  transition: transform 0.3s ease-in-out;
}

.offcanvas-end {
  top: 0;
  right: 0;
  width: 320px;
  border-left: 1px solid var(--border-color);
  transform: translateX(100%);
}

.offcanvas.showing,
.offcanvas.show:not(.hiding) {
  transform: none;
}

.offcanvas.showing,
.offcanvas.hiding,
.offcanvas.show {
  visibility: visible;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.offcanvas-backdrop.show {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .offcanvas,
  .offcanvas-backdrop {
    transition: none;
  }
}

/* --- ABL styling on top of the Bootstrap skeleton ------------------------ */

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.offcanvas-title.wp-block-site-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-brown);
  margin: 0;
}

.btn-close-offcanvas {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-main);
  padding: 4px 8px;
  transition: color 0.3s ease;
}

.btn-close-offcanvas:hover {
  color: var(--accent-teal);
}

.offcanvas-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}

.offcanvas-body .wp-block-navigation {
  display: block;
  margin-bottom: 28px;
}

.offcanvas-body .wp-block-navigation__container {
  display: block;
  gap: 0;
}

.offcanvas-body .wp-block-navigation-item {
  display: block;
}

.offcanvas-body .wp-block-navigation-item__content {
  display: block;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.offcanvas-body .wp-block-navigation-item__content:hover,
.offcanvas-body .current-menu-item .wp-block-navigation-item__content {
  color: var(--accent-teal);
  padding-left: 8px;
}

/* Submenus, for whenever the client nests a menu item. */
.offcanvas-body .wp-block-navigation__submenu-container {
  position: static;
  width: 100%;
  border: none;
  background: transparent;
  padding-left: 16px;
  opacity: 1;
  visibility: visible;
}

/* The margin has to sit on the .wp-block-buttons wrapper. Putting it on the
   button itself loses to WordPress's `.is-layout-flex > :is(*, div) { margin: 0 }`,
   which is (0,1,1) against a single class's (0,1,0). */
.offcanvas-body .wp-block-buttons {
  margin: 0 0 28px;
}

.offcanvas-cta {
  margin-bottom: 0;
}

.offcanvas-contact p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.admin-bar .offcanvas-end {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .offcanvas-end {
    top: 46px;
  }
}

@media (max-width: 400px) {
  .offcanvas-end {
    width: 85vw;
  }
}

/* ==========================================================================
   LOGO + SITE TITLE RESPONSIVENESS
   ========================================================================== */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.logo .wp-block-site-logo {
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}

.logo .wp-block-site-logo img {
  display: block;
  height: auto;
  max-height: 50px;
  width: auto;
}

.logo-text {
  min-width: 0;
}

.logo-main.wp-block-site-title {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2px;
  color: var(--accent-brown);
  margin: 0;
}

.logo-main.wp-block-site-title a {
  color: inherit;
}

/* The strapline's original treatment: teal, uppercase, 3px tracking. My 1.3.0
   "responsive" rule declared the same properties at the same specificity but
   later in the file, which quietly flattened it to small muted grey. Restored
   here with the original values; only the fluid range is new. */
.logo-subtitle.wp-block-site-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.62rem, 1.5vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-teal);
  display: block;
  /* Replaces the old -5px hack: with line-height 1.2 on the title above, 2px is
     a real gap rather than a correction for leading that no longer exists. */
  margin: 2px 0 0;
  line-height: 1.3;
}

/* The original hid the whole title block below 768px, leaving just the mark.
   With the offcanvas menu freeing up the header there is room for the salon
   name on a phone, so the block stays visible and only the strapline drops. */
.logo-text {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 600px) {
  .logo-subtitle.wp-block-site-tagline {
    display: none;
  }
}

@media (max-width: 480px) {
  .logo {
    gap: 8px;
  }

  .logo .wp-block-site-logo img {
    max-height: 40px;
  }
}

/* ==========================================================================
   BREADCRUMB SEPARATOR
   The static markup was <a>Home</a><span>Page</span> with nothing between them,
   so the two ran together.
   ========================================================================== */

.breadcrumb p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}

.breadcrumb span::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.6em;
  padding: 0 10px;
  color: var(--text-muted);
  opacity: 0.7;
  vertical-align: middle;
}

.breadcrumb a {
  color: var(--accent-teal);
}

.breadcrumb a:hover {
  color: var(--accent-teal-hover);
}

/* Utility: keep a line from wrapping — used on the footer opening hours. */
.abl-nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   FORMS — Contact Form 7 and Mailchimp for WordPress

   Neither plugin knows anything about this design system, so both ship their
   own defaults. Everything below reads from the theme's CSS custom properties,
   which means dark mode follows automatically and there is nothing extra to
   maintain for it.

   Selector weight is deliberate: the plugins' own stylesheets are enqueued from
   the plugin, and load order is not something a theme should have to rely on.
   ========================================================================== */

/* --- shared field skeleton ------------------------------------------------ */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea,
.mc4wp-form input[type="email"],
.mc4wp-form input[type="text"] {
  width: 100%;
  max-width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
.mc4wp-form input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.mc4wp-form input[type="email"]:focus,
.mc4wp-form input[type="text"]:focus {
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-teal) 22%, transparent);
}

.wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

.wpcf7-form select {
  /* Native arrow is removed by appearance:none above, so draw one back. */
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* --- Contact Form 7 ------------------------------------------------------- */

/* CF7 wraps its hidden inputs in a real <fieldset>, which browsers render with
   a border and padding even when every child is type="hidden". */
.wpcf7-form .hidden-fields-container,
.wpcf7-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.wpcf7 form.wpcf7-form > p {
  margin: 0 0 20px;
}

/* Each field is: <label>Text<br><span class="...-wrap"><input></span></label> */
.wpcf7-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0;
}

.wpcf7-form label br {
  line-height: 2.2;
}

/* The wrap is a <span>, so it needs to be told to behave like a row. */
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

/* Submit button — same treatment as .btn-book. */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
  background: var(--accent-teal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  padding: 14px 34px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
  background: var(--accent-teal-hover);
}

.wpcf7-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinner sits inline after the button while the request is in flight. */
.wpcf7-form .wpcf7-spinner {
  display: none;
  width: 18px;
  height: 18px;
  margin: 0 0 0 14px;
  background: none;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-teal);
  border-radius: 50%;
  vertical-align: middle;
  animation: abl-spin 0.7s linear infinite;
}

.wpcf7-form.submitting .wpcf7-spinner {
  display: inline-block;
}

.wpcf7-form .wpcf7-spinner::before {
  display: none;
}

@keyframes abl-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpcf7-form .wpcf7-spinner {
    animation-duration: 2s;
  }
}

/* Inline validation */
.wpcf7-form .wpcf7-not-valid {
  border-color: #d63638;
}

.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #d63638;
}

/* Response banner. CF7 hides it in the init state and colours it per outcome;
   these override its default blue/red boxes. */
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-left-width: 4px;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
  background: var(--bg-card);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--accent-teal);
  border-left-color: var(--accent-teal);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #dba617;
  border-left-color: #dba617;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #d63638;
  border-left-color: #d63638;
}

/* Checkboxes, radios and the acceptance box */
.wpcf7-form .wpcf7-list-item {
  display: block;
  margin: 0 0 8px;
}

.wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-main);
  cursor: pointer;
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"],
.wpcf7-form .wpcf7-list-item input[type="radio"] {
  width: auto;
  margin-top: 3px;
  accent-color: var(--accent-teal);
}

/* The form panel itself, matching .contact-info opposite it. */
.contact-form-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 40px;
  box-shadow: var(--shadow-light);
}

.contact-form-wrap > h3 {
  margin-bottom: 24px;
}

/* Opt-in: put name and email side by side. Add "is-two-col" to the
   Contact Form Wrap group in the editor to switch it on. */
@media (min-width: 700px) {
  .contact-form-wrap.is-two-col form.wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  .contact-form-wrap.is-two-col form.wpcf7-form > .hidden-fields-container,
  .contact-form-wrap.is-two-col form.wpcf7-form > p:nth-of-type(3),
  .contact-form-wrap.is-two-col form.wpcf7-form > p:nth-of-type(4),
  .contact-form-wrap.is-two-col form.wpcf7-form > p:nth-of-type(5),
  .contact-form-wrap.is-two-col form.wpcf7-form > .wpcf7-response-output {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .contact-form-wrap {
    padding: 28px 22px;
  }
}

/* --- Mailchimp for WordPress ---------------------------------------------- */

.mc4wp-form .mc4wp-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc4wp-form .mc4wp-form-fields p {
  margin: 0;
}

.mc4wp-form label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.mc4wp-form input[type="submit"],
.mc4wp-form button[type="submit"] {
  width: 100%;
  background: var(--accent-brown);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.mc4wp-form input[type="submit"]:hover,
.mc4wp-form button[type="submit"]:hover {
  background: var(--accent-brown-light);
}

.mc4wp-form .mc4wp-response {
  margin-top: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.mc4wp-form .mc4wp-alert {
  padding: 10px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
}

.mc4wp-form .mc4wp-success {
  border-left-color: var(--accent-teal);
}

.mc4wp-form .mc4wp-error,
.mc4wp-form .mc4wp-notice {
  border-left-color: #d63638;
}

/* MC4WP's honeypot is a visible label until its inline style applies. */
.mc4wp-form input[name="_mc4wp_honeypot"] {
  display: none !important;
}

/* In the footer column the form is narrow — keep it stacked and full width. */
.footer-col .mc4wp-form input[type="email"],
.footer-col .mc4wp-form input[type="submit"],
.footer-col .mc4wp-form button {
  width: 100%;
}

.footer-col .mc4wp-form label {
  margin-bottom: 4px;
}

/* Jetpack's subscribe block, for whenever it is the active provider. */
.wp-block-jetpack-subscriptions__form input[type="email"] {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 12px;
  color: var(--text-main);
  font-family: var(--font-body);
}

.wp-block-jetpack-subscriptions__form button {
  width: 100%;
  background: var(--accent-brown);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

/* ==========================================================================
   TABLES

   Core gives every cell `border: 1px solid` with no colour, so it resolves to
   currentColor — near-black text colour, which is why the borders looked hard.
   The Stripes variation then hardcodes #f0f0f0 for the odd rows and the figure's
   bottom border, neither of which knows about dark mode.

   Separately, .hours-table td carried `padding: 12px 0`. With no stripes that
   read fine; once the stripe band is painted, the text sits flush against its
   left edge.
   ========================================================================== */

.wp-block-table {
  margin: 0 0 30px;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
  padding: 12px 16px;
  border-color: var(--border-color);
  color: var(--text-main);
}

.wp-block-table th {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--bg-secondary);
}

/* --- Stripes variation --------------------------------------------------- */

.wp-block-table.is-style-stripes {
  border-bottom: 1px solid var(--border-color);
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
  border-color: transparent;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  /* Fallback first for anything without color-mix. */
  background-color: var(--bg-secondary);
  background-color: color-mix(in srgb, var(--text-main) 6%, transparent);
}

/* --- Opening hours ------------------------------------------------------- */

.wp-block-table.hours-table {
  margin: 0 0 30px;
}

.wp-block-table.hours-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table.hours-table td,
.wp-block-table.hours-table th {
  padding: 14px 18px;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  border: none;
}

/* Day on the left, time on the right, in the accent colour. */
.wp-block-table.hours-table td:first-child {
  font-weight: 500;
  color: var(--text-main);
}

.wp-block-table.hours-table td:last-child {
  text-align: right;
  color: var(--accent-teal);
  white-space: nowrap;
}

/* Row rules and stripes together read as noise — pick one. Stripes win when the
   variation is applied, plain rules otherwise. */
.wp-block-table.hours-table:not(.is-style-stripes) tr {
  border-bottom: 1px solid var(--border-color);
}

.wp-block-table.hours-table.is-style-stripes tr {
  border-bottom: none;
}

@media (max-width: 480px) {
  .wp-block-table.hours-table td,
  .wp-block-table.hours-table th {
    padding: 12px 12px;
  }
}

/* ==========================================================================
   SOCIAL LINK LISTS

   core/social-links renders <li class="wp-social-link"><a>. The original CSS
   targeted a bare <a>, so the footer picked up styling from an override added
   earlier while About and Contact got Core's default coloured pills.
   All three now share one rule.
   ========================================================================== */

.footer-socials.wp-block-social-links,
.about-socials.wp-block-social-links,
.contact-socials.wp-block-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}

.footer-socials .wp-social-link,
.about-socials .wp-social-link,
.contact-socials .wp-social-link {
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.footer-socials .wp-social-link:hover,
.about-socials .wp-social-link:hover,
.contact-socials .wp-social-link:hover {
  color: var(--accent-teal);
  border-color: var(--accent-teal);
  transform: none;
}

.footer-socials .wp-social-link a,
.about-socials .wp-social-link a,
.contact-socials .wp-social-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  color: inherit;
}

.footer-socials .wp-social-link svg,
.about-socials .wp-social-link svg,
.contact-socials .wp-social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ==========================================================================
   RATING BADGE + REVIEW STARS
   Same shape as the old .google-badge, without the branding.
   ========================================================================== */

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text-main);
}

.rating-badge .stars,
.review-stars {
  display: inline-flex;
  gap: 3px;
  color: #f5a623;
  font-size: 0.85rem;
}

.review-stars {
  margin-bottom: 16px;
}

/* A review with a rating but no written text still needs to look deliberate. */
.review-card {
  display: flex;
  flex-direction: column;
}

.review-card .review-quote {
  flex: 1;
}

.review-card .review-author {
  margin-top: auto;
  padding-top: 20px;
}

/* ==========================================================================
   BLOCK GAP

   WordPress was emitting, from settings.spacing.blockGap in theme.json:

       :root :where(.is-layout-flow) > * { margin-block-start: 1.5rem; }

   applied to every child of every flow container on the site. That is 24px of
   margin injected into grids whose spacing is already handled by `gap`, and it
   fights the theme's own rhythm everywhere.

   `settings.spacing.blockGap` is now `null` in theme.json, which is the
   documented opt-out: wp_get_layout_style() checks that value and skips the
   margin declarations entirely when it is null. The rule is no longer output.

   What follows is a safety net, not the fix — if a plugin or a future core
   change reintroduces those margins, the theme's own grids stay intact.
   ========================================================================== */

.services-grid > *,
.gallery-grid > *,
.blog-grid > *,
.shop-grid > *,
.reviews-grid > *,
.pricing-grid > *,
.pricing-list > *,
.service-list > *,
.footer-grid > *,
.cta-grid > *,
.contact-grid > *,
.about-grid > *,
.header-container > *,
.header-right > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* NOTE: .offcanvas-body is deliberately NOT in that list. It is a vertical flow
   container whose children need their margins — zeroing them is what pushed the
   phone number up against the Book Appointment button. */

/* ==========================================================================
   BOOKLY — COLOURS ONLY

   Every structural rule that used to target .bookly-* is commented out earlier
   in this file. They belonged to the static booking mock, which reused the real
   plugin's class names, so they were reshaping the live form.

   Nothing below sets display, position, width, grid, flex or padding. Only
   colours, so Bookly keeps its own layout and still follows light/dark mode.
   ========================================================================== */

.bookly-form,
.bookly-form-wrapper,
.booking-wrapper .bookly-form {
  color: var(--text-main);
}

.bookly-form input[type="text"],
.bookly-form input[type="email"],
.bookly-form input[type="tel"],
.bookly-form input[type="number"],
.bookly-form select,
.bookly-form textarea {
  background-color: var(--bg-primary);
  color: var(--text-main);
  border-color: var(--border-color);
}

.bookly-form input::placeholder,
.bookly-form textarea::placeholder {
  color: var(--text-muted);
}

/* Bookly's own colour settings live in its admin screens. If the calendar or
   buttons still look wrong in dark mode, set them there rather than here —
   adding layout rules back into this file is what broke it the first time. */

/* ==========================================================================
   NAVIGATION: EMPTY MENU PROMPT
   Shown only to logged-in users who can edit the site. Visitors see nothing.
   ========================================================================== */

.abl-nav-empty {
  padding: 16px;
  border: 1px dashed var(--border-color);
  border-radius: 4px;
  text-align: center;
}

.abl-nav-empty p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.abl-nav-empty__link {
  display: inline-block;
  background: var(--accent-teal);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.abl-nav-empty__link:hover {
  background: var(--accent-teal-hover);
  color: #fff;
}

/* ==========================================================================
   OFFCANVAS NAVIGATION — CORE BLOCK OVERRIDES

   core/navigation ships its own responsive machinery: a hamburger button, a
   close button, and a .wp-block-navigation__responsive-container that is
   display:none until .is-menu-open is added. Inside a panel that is already an
   overlay, all of that is redundant and it is what hides the links — you get
   the container in the DOM and almost nothing painted.

   The panel provides its own open and close controls, so the container is
   forced permanently visible and static here and Core's buttons are hidden.
   ========================================================================== */

.offcanvas .wp-block-navigation__responsive-container {
  display: block !important;
  position: static !important;
  width: auto;
  height: auto;
  padding: 0;
  background-color: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: auto;
  overflow: visible;
}

.offcanvas .wp-block-navigation__responsive-container-open,
.offcanvas .wp-block-navigation__responsive-container-close,
.offcanvas .wp-block-navigation__responsive-close,
.offcanvas .wp-block-navigation__responsive-dialog {
  display: none !important;
}

.offcanvas .wp-block-navigation__responsive-dialog {
  display: block !important;
}

/* Both the real menu and the Page List that Core falls back to when no menu
   exists yet. */
.offcanvas .wp-block-navigation__container,
.offcanvas .wp-block-page-list,
.offcanvas .wp-block-navigation ul {
  display: block !important;
  width: 100%;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0;
  gap: 0;
}

.offcanvas .wp-block-navigation li,
.offcanvas .wp-block-page-list li {
  display: block;
  width: 100%;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.offcanvas .wp-block-navigation-item__content,
.offcanvas .wp-block-pages-list__item__link,
.offcanvas .wp-block-navigation a {
  display: block;
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.offcanvas .wp-block-navigation-item__content:hover,
.offcanvas .wp-block-pages-list__item__link:hover,
.offcanvas .wp-block-navigation a:hover,
.offcanvas .current-menu-item > .wp-block-navigation-item__content {
  color: var(--accent-teal);
  padding-left: 8px;
}

/* Submenus open inline rather than as a floating dropdown. */
.offcanvas .wp-block-navigation__submenu-container {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  padding-left: 16px;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none;
}

.offcanvas .wp-block-navigation__submenu-icon {
  display: none;
}

/* The panel is reparented to <body> by theme.js, so it no longer inherits the
   header's font sizing. Restate what it needs. */
.offcanvas {
  font-family: var(--font-body);
  color: var(--text-main);
}

.offcanvas .wp-block-site-title a {
  color: var(--accent-brown);
  text-decoration: none;
}

/* ==========================================================================
   OFFCANVAS SPACING + HIDDEN MENU ITEMS
   ========================================================================== */

.offcanvas-body .wp-block-navigation {
  margin: 0 0 28px;
}

/* Contact details sit below the CTA with a rule between them, so the phone
   number reads as a separate block rather than as part of the button. */
.offcanvas-contact {
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}

.offcanvas-contact p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.offcanvas-contact p:last-child {
  margin-bottom: 0;
}

/* --- Shop and cart, hidden from the menu ---------------------------------
   Commerce is not live yet, so these are hidden wherever they turn up: in a
   menu you built, or in the page list Core falls back to when no menu exists.

   This is a display rule, not a delete. The permanent fix is one click in
   Appearance > Editor > Navigation — remove the item and this rule stops
   mattering. Anything hidden here is still in the DOM and still reachable by a
   screen reader, so do not rely on it for a page that must stay private.
   ------------------------------------------------------------------------ */

.offcanvas .wp-block-navigation li:has(> a[href*="/shop"]),
.offcanvas .wp-block-navigation li:has(> a[href*="/cart"]),
.offcanvas .wp-block-navigation li:has(> a[href*="/checkout"]),
.offcanvas .wp-block-navigation li:has(> a[href*="/my-account"]),
.offcanvas .wp-block-page-list li:has(> a[href*="/shop"]),
.offcanvas .wp-block-page-list li:has(> a[href*="/cart"]),
.offcanvas .wp-block-page-list li:has(> a[href*="/checkout"]),
.offcanvas .wp-block-page-list li:has(> a[href*="/my-account"]) {
  display: none !important;
}

/* Cart controls anywhere in the header, including WooCommerce's Mini-Cart
   block if it gets added later. */
.header-right .icon-btn[aria-label*="cart" i],
.header-right .cart-count,
.header-right .wc-block-mini-cart,
.offcanvas .wc-block-mini-cart {
  display: none !important;
}

/* ==========================================================================
   HERO IMAGE

   The merged static CSS carried `url('hero-image.jpg')` — a path relative to the
   page in the old site. In a theme, style.css sits at the theme root, so that
   resolved to /wp-content/themes/<theme>/hero-image.jpg, which does not exist.
   The hero has been rendering as a bare dark gradient the whole time.

   Both declarations now read var(--hero-image), defined here. Relative URLs in
   this file resolve against style.css, so the path below is correct.

   To swap the photo without touching the theme, put one line in
   Appearance > Editor > Styles > Additional CSS:

       :root { --hero-image: url('https://example.com/your-photo.jpg'); }
   ========================================================================== */

:root {
  --hero-image: url('wp-content/uploads/2026/09/hero-family-1.png');
  --page-hero-image: url('assets/images/page-hero.jpg');
}

/* .page-hero is declared six times across the merged page stylesheets, each
   with its own placeholdit URL — six live requests to an external service on
   every inner page. All six now read var(--page-hero-image). Override it in
   Additional CSS the same way as --hero-image. */

/* The photo is square and the hero is full-height, so `cover` on a wide screen
   crops hard top and bottom. Biasing the focal point upward keeps faces in
   frame rather than centring on torsos. */
/* The paired selector is no longer strictly needed — the dark rule that used to
   outrank this one has gone — but it costs nothing and keeps the bias safe if
   anyone reintroduces a dark override. */
.hero-section,
[data-theme="dark"] .hero-section {
  background-position: center 28%;
}

@media (max-width: 768px) {
  .hero-section,
  [data-theme="dark"] .hero-section {
    background-position: center 20%;
  }
}

/* ==========================================================================
   ACCOUNT CONTROLS — HIDDEN

   Commerce is not live, so nothing should offer a customer login. This covers
   the WooCommerce Customer Account block (which renders the person icon), the
   core Login/out block, account links in the menu, and any header or panel
   button carrying a user glyph.

   Display rules only — the markup is still present and still reachable by a
   screen reader. Removing the block in the editor is the permanent fix.
   ========================================================================== */

.wc-block-customer-account,
.wp-block-woocommerce-customer-account,
.wp-block-loginout,
.woocommerce-MyAccount-navigation,
.header-right .wc-block-customer-account,
.offcanvas .wc-block-customer-account {
  display: none !important;
}

/* Menu entries pointing at an account page, in a built menu or in the page list
   Core falls back to. */
.offcanvas .wp-block-navigation li:has(> a[href*="/my-account"]),
.offcanvas .wp-block-navigation li:has(> a[href*="/account"]),
.offcanvas .wp-block-navigation li:has(> a[href*="wp-login"]),
.offcanvas .wp-block-page-list li:has(> a[href*="/my-account"]),
.offcanvas .wp-block-page-list li:has(> a[href*="/account"]) {
  display: none !important;
}

/* Any header or panel control carrying a person glyph, however it is labelled. */
.header-right button:has(.fa-user),
.header-right button:has(.fa-user-circle),
.header-right button:has(.fa-circle-user),
.header-right a:has(.fa-user),
.header-right [aria-label*="account" i],
.header-right [aria-label*="my account" i],
.header-right [aria-label*="log in" i],
.header-right [aria-label*="login" i],
.header-right [aria-label*="sign in" i],
.offcanvas [aria-label*="account" i],
.offcanvas-header [aria-label*="account" i] {
  display: none !important;
}

/* Footer legal links. Two anchors in one paragraph, with a separator drawn
   between them rather than typed into the content — so removing one link does
   not leave an orphaned bullet behind. */
.footer-legal {
  margin-top: 10px;
  font-size: 0.8rem;
}

.footer-legal a {
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: var(--accent-teal);
}

.footer-legal a + a::before {
  content: "·";
  padding: 0 10px;
  color: var(--border-color);
}

/* Photos are theme files rather than Media Library attachments, so they carry
   no srcset. Give the browser a hint that they are not needed immediately. */
.service-card-image img,
.gallery-item img {
  background-color: var(--bg-secondary);
}

/* ==========================================================================
   GALLERY OVERLAY CAPTIONS

   The heading was `color: var(--bg-primary)` — white in light mode, near-black
   in dark. The overlay gradient is dark in BOTH modes, so half the time the
   caption was invisible. The subtitle had no rule at all and inherited
   --text-main, which is #2c2c2c in light mode: dark grey on a dark gradient.

   These sit on a permanently dark surface, so they take fixed colours that do
   not follow the theme. --overlay-teal is deliberately not redeclared under
   [data-theme="dark"].
   ========================================================================== */

:root {
  --overlay-teal: #45cdd2;
}

.gallery-overlay h4,
.gallery-overlay .wp-block-heading {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  margin: 0 0 2px;
}

.gallery-overlay p {
  color: var(--overlay-teal);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Clicks must reach the lightbox trigger underneath. */
.gallery-overlay {
  pointer-events: none;
}

/* ==========================================================================
   LIGHTBOX

   core/image with lightbox.enabled wraps the img in
   .wp-lightbox-container and adds a small trigger button at the top right.
   In a gallery tile the whole image should be the trigger, so the button is
   stretched over it and its icon hidden.
   ========================================================================== */

.gallery-item .wp-lightbox-container,
.abl-portfolio .wp-lightbox-container {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.gallery-item .wp-lightbox-container img,
.abl-portfolio .wp-lightbox-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item .wp-lightbox-container button,
.abl-portfolio .wp-lightbox-container button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: zoom-in;
  opacity: 1;
  z-index: 2;

  /* Core styles this trigger with `backdrop-filter: blur(16px) saturate(180%)`
     and a translucent grey fill, on the assumption it is a small badge in the
     corner. Stretching it over the whole image meant the whole tile was being
     blurred. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: transparent;
  filter: none;
}

.gallery-item .wp-lightbox-container button::before,
.gallery-item .wp-lightbox-container button svg,
.abl-portfolio .wp-lightbox-container button::before,
.abl-portfolio .wp-lightbox-container button svg {
  display: none;
}

/* The expanded overlay is appended near the end of the document. It has to
   clear the fixed header and the offcanvas panel. */
.wp-lightbox-overlay {
  z-index: 10000;
}

/* ==========================================================================
   FULL PORTFOLIO GRID

   core/gallery lays its children out with flex and percentage widths, which
   goes ragged across 43 photos of mixed orientation. A uniform square grid
   reads better and keeps the rows honest.
   ========================================================================== */

.abl-portfolio.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 200px), 1fr));
  gap: 12px;
  margin: 0;
}

.abl-portfolio.wp-block-gallery > figure.wp-block-image {
  position: relative;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.abl-portfolio.wp-block-gallery > figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.abl-portfolio.wp-block-gallery > figure.wp-block-image:hover img {
  transform: scale(1.06);
}

.portfolio-section {
  padding: 60px 0;
  /* --bg-secondary is #f8f6f3, a warm off-white that reads as beige next to the
     photos. The plain page background is cleaner behind a dense grid. */
  background: var(--bg-primary);
}

.portfolio-intro {
  color: var(--text-muted);
  margin-bottom: 30px;
  text-align: center;
}

/* Belt and braces on the lightbox trigger: Core's rule is
   `.wp-lightbox-container button` at (0,2,0) — matched here so neither the blur
   nor the fill can come back through a Core update. */
.gallery-item .wp-lightbox-container button.lightbox-trigger,
.abl-portfolio .wp-lightbox-container button.lightbox-trigger,
.gallery-item .wp-lightbox-container button:hover,
.abl-portfolio .wp-lightbox-container button:hover {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

/* ==========================================================================
   SERVICE ROWS (Vagaro layout)

   Added for the restructured services page: thumbnail, name, price,
   description, Book Now — the arrangement the client picked out of Vagaro.

   New classes only. Nothing here touches .service-card, .pricing-column or any
   other existing selector, so the previous services layout still renders
   exactly as before.
   ========================================================================== */

.svc-page .svc-intro {
  max-width: 70ch;
  padding-block: 40px 20px;
}

.svc-page .svc-intro p {
  color: var(--text-muted);
  margin: 0;
}

/* Jump links. Separator drawn rather than typed, so removing one leaves no
   orphan. */
.svc-jump {
  padding-bottom: 30px;
}

.svc-jump p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  font-size: 0.9rem;
}

.svc-jump a {
  color: var(--accent-teal);
  text-decoration: none;
  white-space: nowrap;
}

.svc-jump a:hover {
  color: var(--accent-teal-hover);
  text-decoration: underline;
}

.svc-jump a + a::before {
  content: "/";
  padding: 0 12px;
  color: var(--border-color);
}

/* --- section header image ------------------------------------------------- */

.svc-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 220px;
  margin-bottom: 40px;
  background-color: var(--bg-secondary);
  background-image: var(--svc-banner-image);
  background-size: cover;
  background-position: center 35%;
}

.svc-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 10, 0.78),
    rgba(10, 10, 10, 0.42)
  );
}

.svc-banner > .container {
  position: relative;
}

/* Fixed white, not a surface token. The scrim is dark in both themes, so
   var(--bg-primary) here would turn the title near-black in dark mode — the
   same trap that hid the page banner and the gallery captions. */
.svc-banner__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
  .svc-banner {
    min-height: 150px;
    background-position: center;
  }
}

/* --- rows ----------------------------------------------------------------- */

.svc-rows {
  margin-bottom: 60px;
}

.svc-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  align-items: start;
  padding-block: 28px;
  border-bottom: 1px solid var(--border-color);
}

.svc-rows > .svc-row:first-child {
  padding-top: 0;
}

.svc-rows > .svc-row:last-child {
  border-bottom: none;
}

/* --- two columns on desktop ----------------------------------------------
   Rows keep their own internal [thumb | body] grid; this only decides how many
   rows sit side by side. DOM order is preserved left-to-right, so the Vagaro
   ordering still reads correctly.

   The two rules above are single-stack niceties — trimming the first row's top
   padding and the last row's rule. Across two columns they apply to whichever
   row happens to land first and last, which looks like a mistake, so they are
   reverted here. */
@media (min-width: 900px) {
  .svc-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }

  .svc-rows > .svc-row:first-child {
    padding-top: 28px;
  }

  .svc-rows > .svc-row:last-child {
    border-bottom: 1px solid var(--border-color);
  }
}

/* Vagaro has no photo for many of the add-ons either, so a row without one
   simply spans the full width rather than leaving a gap. */
.svc-row--no-media {
  grid-template-columns: 1fr;
}

.svc-row__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--bg-secondary);
}

.svc-row__media .wp-block-image,
.svc-row__media figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.svc-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-name {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.15rem);
  letter-spacing: 0.5px;
  color: var(--text-main);
}

.svc-price {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-teal);
}

.svc-desc p {
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.svc-desc p:last-child {
  margin-bottom: 0;
}

.svc-book {
  margin-top: 16px;
}

.svc-book .wp-block-button__link {
  padding: 9px 22px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .svc-row {
    grid-template-columns: 92px 1fr;
    gap: 16px;
    padding-block: 22px;
  }

  .svc-book .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* The block-gap safety net covers the theme's other grids; these are new. */
.svc-rows > *,
.svc-row > * {
  margin-block: 0 !important;
}

/* ==========================================================================
   HERO SCRIM TOKENS  —  keep this pair at the end, light first, dark second

   The scrim over the hero and the inner-page banner used to be written into the
   `background` shorthand, with a separate [data-theme="dark"] rule re-declaring
   that shorthand. A shorthand resets every longhand it omits, so the dark rule
   silently dropped the photo layer and the banners went image-less in dark mode.

   Now the image is declared once and only these two colours change. :root and
   [data-theme="dark"] tie on specificity, so the dark block must stay AFTER the
   light one — do not move either.
   ========================================================================== */

:root {
  --hero-scrim-a: rgba(10, 10, 10, 0.45);
  --hero-scrim-b: rgba(10, 10, 10, 0.68);
}

[data-theme="dark"] {
  /* A touch heavier, because the white heading has less contrast against a
     photo when the surrounding page is dark. */
  --hero-scrim-a: rgba(8, 8, 8, 0.58);
  --hero-scrim-b: rgba(8, 8, 8, 0.8);
}

/* ==========================================================================
   SERVICE TABS

   Progressive enhancement. Without JavaScript every .svc-panel stays visible
   and the page reads as the long stacked list, which is the same content in the
   same order — so the no-JS case degrades to the other layout rather than to a
   blank page. theme.js adds the ARIA wiring and the hidden attribute.
   ========================================================================== */

.svc-tablist {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-color);
}

.svc-tab {
  flex: 0 0 auto;
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.svc-tab:hover {
  color: var(--text-main);
}

.svc-tab[aria-selected="true"] {
  color: var(--accent-teal);
  border-bottom-color: var(--accent-teal);
}

.svc-tab:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: -2px;
}

/* Only applies once theme.js has taken over; before that nothing is hidden. */
.svc-panel[hidden] {
  display: none;
}

/* The panel's own section already carries the banner and bottom spacing, so the
   panel itself adds none. */
.svc-panel > .svc-section {
  padding-top: 0;
}

@media (max-width: 600px) {
  .svc-tab {
    padding: 12px 14px;
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   COMPACT PRICE LIST

   The original price-list treatment — ledger rows, price aligned right — with a
   thumbnail added and the category header image above. Reuses .svc-banner and
   .svc-section so the header image has one implementation across all three
   services layouts.
   ========================================================================== */

.pl-grid {
  margin-bottom: 8px;
}

.pl-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding-block: 16px;
  border-bottom: 1px solid var(--border-color);
}

.pl-item--no-media {
  grid-template-columns: minmax(0, 1fr) auto;
}

.pl-item__media {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--bg-secondary);
}

.pl-item__media .wp-block-image,
.pl-item__media figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.pl-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-name {
  margin: 0 0 3px;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  letter-spacing: 0.3px;
  color: var(--text-main);
}

.pl-desc p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.pl-price {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-teal);
  white-space: nowrap;
  text-align: right;
}

/* One Book button per category rather than one per row — the whole point of a
   price list is scanning, and 27 buttons down a column fights that. */
.pl-cta {
  margin: 28px 0 60px;
}

.pl-section:last-child .pl-cta,
.pl-section .pl-grid:last-child {
  margin-bottom: 60px;
}

@media (min-width: 900px) {
  .pl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
}

/* Below 600px the price drops onto its own line under the description rather
   than squeezing the name into a narrow column. */
@media (max-width: 600px) {
  .pl-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  .pl-item__media {
    width: 56px;
    height: 56px;
  }

  .pl-item .pl-price {
    grid-column: 2;
    text-align: left;
    margin-top: 6px;
  }

  .pl-item--no-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-item--no-media .pl-price {
    grid-column: 1;
  }
}

/* Block-gap net for the new grids. */
.pl-grid > *,
.pl-item > * {
  margin-block: 0 !important;
}

/* ==========================================================================
   SECTION BANNER IMAGES

   These used to be an inline style on the group:
     style="--svc-banner-image:url('<?php echo esc_url( ... ) ?>')"

   Two problems with that. The URL was absolute and resolved at pattern-insert
   time, so it got frozen into post_content and broke on an import or a domain
   move. And an inline CSS custom property is at the mercy of KSES for anyone
   without unfiltered_html.

   Declared here instead. url() in a stylesheet resolves against the stylesheet,
   so these follow the theme wherever it lives, whatever the site is called, and
   nothing about them is stored in the page.
   ========================================================================== */

.svc-banner--locs {
  --svc-banner-image: url('assets/images/services/banner-locs.jpg?v=1788354024');
}

.svc-banner--natural {
  --svc-banner-image: url('assets/images/services/banner-natural.jpg?v=1788354024');
}

.svc-banner--addons {
  --svc-banner-image: url('assets/images/services/banner-addons.jpg?v=1788354024');
}

.svc-banner--products {
  --svc-banner-image: url('assets/images/services/banner-products.jpg?v=1788354024');
}

.svc-banner--consultations {
  --svc-banner-image: url('assets/images/services/banner-consultations.jpg?v=1788354025');
}