/*
Theme Name: The Beauty Lounge
Author: The Beauty Lounge
Description: Custom nail salon theme matching the approved demo, with 35 editable prices and a three-image gallery.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-beauty-lounge
*/

    :root {
      --bg: #fbf7f4;
      --bg-soft: #f4ece6;
      --card: rgba(255, 255, 255, 0.92);
      --text: #2b2420;
      --muted: #6b5d55;
      --line: #e8ddd3;
      --primary: #b88655;
      --primary-dark: #9f7042;
      --shadow: 0 20px 45px rgba(33, 22, 14, 0.08);
      --radius: 24px;
      --radius-sm: 18px;
      --container: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top right, rgba(184, 134, 85, 0.10), transparent 20%),
        linear-gradient(180deg, #fffdfb 0%, var(--bg) 100%);
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    .container {
      width: min(100% - 32px, var(--container));
      margin: 0 auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(184, 134, 85, 0.12);
      color: var(--primary-dark);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .section-heading {
      margin-bottom: 20px;
      text-align: center;
    }

    .section-heading h2,
    .section-heading h3,
    h1,
    h2,
    h3 {
      font-family: 'Playfair Display', serif;
      line-height: 1.15;
      margin: 0;
    }

    .section-heading h2 {
      font-size: 2rem;
      margin-top: 14px;
      margin-bottom: 10px;
    }

    .section-heading p {
      margin: 0 auto;
      max-width: 680px;
      color: var(--muted);
      font-size: 0.98rem;
    }

    .btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .btn-primary {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 12px 26px rgba(184, 134, 85, 0.26);
    }

    .btn-primary:hover {
      background: var(--primary-dark);
    }

    .btn-secondary {
      border-color: var(--line);
      background: rgba(255, 255, 255, 0.8);
      color: var(--text);
    }

    .btn-secondary:hover {
      border-color: var(--primary);
      color: var(--primary-dark);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(251, 247, 244, 0.88);
      border-bottom: 1px solid rgba(232, 221, 211, 0.8);
    }

    .nav {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .brand-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.45rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .brand-title span {
      color: var(--primary-dark);
      font-style: italic;
    }

    .brand-sub {
      font-size: 0.78rem;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .menu-toggle {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .nav-links {
      position: absolute;
      left: 16px;
      right: 16px;
      top: calc(100% + 8px);
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 14px;
      box-shadow: var(--shadow);
      display: none;
      flex-direction: column;
      gap: 8px;
    }

    .nav-links.open {
      display: flex;
    }

    .nav-links a {
      padding: 12px 14px;
      border-radius: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      background: var(--bg-soft);
      outline: none;
    }

    .nav-links .nav-book {
      background: var(--primary);
      color: #fff;
      text-align: center;
    }

    main section {
      padding: 64px 0;
    }

    .hero {
      padding-top: 24px;
    }

    .hero-shell {
      display: grid;
      gap: 24px;
    }

    .hero-visual {
      order: -1;
      position: relative;
    }

    .hero-visual img {
      width: 100%;
      aspect-ratio: 4 / 4.6;
      object-fit: cover;
      border-radius: 28px;
      box-shadow: var(--shadow);
    }

    .floating-card {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.65);
      border-radius: 18px;
      padding: 14px;
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .floating-card div {
      background: rgba(244, 236, 230, 0.9);
      border-radius: 14px;
      padding: 10px 12px;
    }

    .floating-card strong {
      display: block;
      font-size: 0.92rem;
    }

    .floating-card span {
      color: var(--muted);
      font-size: 0.8rem;
    }

    .hero-copy h1 {
      font-size: clamp(2.2rem, 5vw, 4.8rem);
      margin: 16px 0 14px;
    }

    .hero-copy p {
      margin: 0 0 22px;
      color: var(--muted);
      font-size: 1rem;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }

    .hero-points .point,
    .feature,
    .service-card,
    .price-card,
    .gallery-card,
    .testimonial,
    .contact-card,
    .booking-panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow);
    }

    .point {
      padding: 16px;
    }

    .point strong {
      display: block;
      margin-bottom: 6px;
      font-size: 1.05rem;
    }

    .point span {
      color: var(--muted);
      font-size: 0.92rem;
    }

    .trust-strip {
      padding-top: 0;
    }

    .trust-grid {
      display: grid;
      gap: 14px;
    }

    .feature {
      padding: 18px;
    }

    .feature i {
      font-size: 1.2rem;
      color: var(--primary-dark);
      margin-bottom: 12px;
    }

    .feature h3 {
      font-size: 1.1rem;
      margin-bottom: 8px;
    }

    .feature p {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .about-grid,
    .contact-grid {
      display: grid;
      gap: 22px;
    }

    .about-photo img,
    .contact-map iframe {
      width: 100%;
      border: 0;
      border-radius: 28px;
      box-shadow: var(--shadow);
      min-height: 320px;
    }

    .about-copy p {
      color: var(--muted);
      margin: 0 0 16px;
    }

    .bullet-list {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .bullet-list div {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.68);
      border: 1px solid var(--line);
      border-radius: 16px;
    }

    .bullet-list i {
      color: var(--primary-dark);
      margin-top: 4px;
    }

    .services-grid,
    .price-grid,
    .gallery-grid,
    .testimonial-grid,
    .info-list {
      display: grid;
      gap: 16px;
    }

    .service-card {
      overflow: hidden;
    }

    .service-card img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .service-body {
      padding: 18px;
    }

    .service-body h3 {
      font-size: 1.28rem;
      margin-bottom: 10px;
    }

    .service-body p {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .service-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.84rem;
      font-weight: 700;
      color: var(--primary-dark);
      background: rgba(184, 134, 85, 0.12);
      border-radius: 999px;
      padding: 8px 12px;
    }

    .price-card {
      padding: 18px;
    }

    .price-card h3 {
      font-size: 1.35rem;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    .price-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px dashed var(--line);
      font-size: 0.95rem;
    }

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

    .price-item strong {
      white-space: nowrap;
      color: var(--primary-dark);
      font-size: 0.92rem;
    }

    .gallery-card {
      overflow: hidden;
    }

    .gallery-card img {
      width: 100%;
      aspect-ratio: 1 / 1.1;
      object-fit: cover;
    }

    .gallery-caption {
      padding: 12px 14px 14px;
      font-size: 0.92rem;
      color: var(--muted);
    }

    .testimonial {
      padding: 20px;
    }

    .testimonial .stars {
      color: var(--primary-dark);
      letter-spacing: 2px;
      margin-bottom: 10px;
    }

    .testimonial p {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 0.96rem;
    }

    .testimonial strong {
      font-family: 'Playfair Display', serif;
      font-size: 1.04rem;
    }

    .contact-card,
    .booking-panel {
      padding: 22px;
    }

    .contact-card h3,
    .booking-panel h3 {
      font-size: 1.45rem;
      margin-bottom: 16px;
    }

    .info-list {
      margin-top: 10px;
    }

    .info-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--muted);
      padding: 12px 0;
      border-bottom: 1px dashed var(--line);
    }

    .info-row:last-child {
      border-bottom: none;
    }

    .info-row i {
      color: var(--primary-dark);
      width: 20px;
      margin-top: 4px;
      text-align: center;
    }

    .notice {
      margin-top: 16px;
      padding: 14px 16px;
      background: rgba(184, 134, 85, 0.10);
      border-radius: 16px;
      color: var(--primary-dark);
      font-size: 0.92rem;
      border: 1px solid rgba(184, 134, 85, 0.16);
    }

    .booking-panel form {
      display: grid;
      gap: 12px;
    }

    .booking-panel input,
    .booking-panel textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.86);
      border-radius: 14px;
      padding: 14px 15px;
      outline: none;
    }

    .booking-panel textarea {
      min-height: 140px;
      resize: vertical;
    }

    .booking-panel input:focus,
    .booking-panel textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(184, 134, 85, 0.12);
    }

    footer {
      padding: 34px 0 120px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.45);
    }

    .footer-inner {
      display: grid;
      gap: 16px;
      text-align: center;
    }

    .footer-inner p {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 14px;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .mobile-bookbar {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 60;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 10px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--line);
      box-shadow: 0 16px 34px rgba(25, 18, 13, 0.12);
      backdrop-filter: blur(10px);
    }

    .mobile-bookbar .btn {
      min-height: 46px;
      padding: 0 14px;
      font-size: 0.94rem;
    }

    @media (min-width: 680px) {

      .trust-grid,
      .services-grid,
      .testimonial-grid,
      .gallery-grid,
      .price-grid,
      .info-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero-points {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .gallery-card img {
        aspect-ratio: 4 / 4.2;
      }

      .about-photo img {
        min-height: 420px;
      }
    }

    @media (min-width: 860px) {
      .menu-toggle {
        display: none;
      }

      .nav-links {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      .nav-links a {
        padding: 10px 14px;
      }

      .nav-links .nav-book {
        padding-inline: 18px;
      }

      .hero-shell,
      .about-grid,
      .contact-grid {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
      }

      .hero-visual {
        order: 2;
      }

      .hero-copy {
        order: 1;
      }

      .hero-visual img {
        aspect-ratio: 4 / 4.8;
      }

      .floating-card {
        left: auto;
        right: -24px;
        bottom: 20px;
        max-width: 340px;
      }

      .trust-grid,
      .services-grid,
      .testimonial-grid,
      .gallery-grid,
      .price-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .contact-grid {
        grid-template-columns: 0.95fr 1.05fr;
      }

      .footer-inner {
        grid-template-columns: 1.3fr 1fr 1fr;
        align-items: center;
        text-align: left;
      }

      .footer-links {
        justify-content: flex-start;
      }
    }

    @media (min-width: 1100px) {
      main section {
        padding: 88px 0;
      }

      .hero {
        padding-top: 38px;
      }

      .section-heading h2 {
        font-size: 2.6rem;
      }

      .services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .price-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .testimonial-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (min-width: 861px) {
      .mobile-bookbar {
        display: none;
      }

      footer {
        padding-bottom: 44px;
      }
    }
  
:root{--primary:#a77c50;--primary-dark:#89613c}body{font-size:14px}button{cursor:pointer}header{position:sticky}.nav-brand{display:flex;align-items:center;gap:12px}.nav-brand img{width:54px;height:54px;border-radius:50%}.hero-copy h1{font-size:clamp(42px,4.7vw,65px);font-weight:500;letter-spacing:-1.5px}.hero-copy h1 em{color:var(--primary-dark);font-weight:400}.hero-points{grid-template-columns:1fr 1fr}.hero-points .point{padding:13px 16px;box-shadow:none}.hero-points .point strong{font-size:13px}.hero-points .point span{font-size:11px}.hero-visual img{height:590px;aspect-ratio:auto;object-position:center}.floating-card{max-width:310px}.feature{box-shadow:none}.feature span{color:var(--primary);font-size:21px}.section-heading p{font-size:14px}.about-copy h2{font-size:40px;margin:18px 0}.about-photo img{height:470px;object-fit:cover}.services-grid{grid-template-columns:repeat(4,1fr)}.service-body h3{font-size:24px}.service-body p{font-size:12px;min-height:58px}.service-card img{height:220px}.service-body button{border:0;background:transparent;padding:0;color:var(--primary-dark);font-weight:600;font-size:12px}.tinted{background:#f4ece6}.filters{display:flex;justify-content:center;gap:10px;margin:26px 0;flex-wrap:wrap}.filters button{border:1px solid var(--line);border-radius:30px;padding:10px 20px;background:white;color:var(--text)}.filters button.active{background:var(--primary);color:white;border-color:var(--primary)}.look{padding:0;text-align:left;color:inherit;cursor:pointer}.gallery-card img{height:340px}.gallery-caption{display:flex;justify-content:space-between;align-items:center}.gallery-caption strong{font:22px 'Playfair Display',Georgia,serif}.gallery-caption span{font-size:10px;color:var(--primary-dark)}.gallery-note{font-size:11px;color:var(--muted);text-align:center;margin-top:22px}.price-item button{border:0;background:none;color:var(--primary-dark);font-size:12px}.booking-banner{padding:32px;border-radius:24px;background:#e9dccd}.booking-banner h2{font-size:38px}.booking-banner p{color:var(--muted)}.booking-photo{width:100%;height:330px;object-fit:cover;border-radius:18px;margin-top:22px}.booking-panel h3{font-size:30px}.booking-panel label{display:block;font-size:12px;margin:12px 0 6px}.booking-panel select,.booking-panel input{width:100%;border:1px solid var(--line);padding:13px;background:white;border-radius:12px}.booking-panel .btn{margin-top:18px;width:100%}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.notice{font-size:12px}.mobile-bookbar{grid-template-columns:1fr 1fr}dialog{border:1px solid var(--line);border-radius:22px;padding:30px;width:min(500px,92vw);max-height:90vh;overflow:auto;background:var(--bg);color:var(--text)}dialog::backdrop{background:#2b242099;backdrop-filter:blur(5px)}dialog h2{font-size:35px;margin:20px 0}dialog .close{float:right;border:0;background:none;font-size:24px}dialog label{display:block;margin:15px 0 6px}dialog input,dialog select{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dark,.book{border:0;background:var(--primary);color:white;padding:15px 22px;border-radius:30px;margin-top:20px}.note{font-size:12px;color:var(--muted)}.success{line-height:1.8;padding:15px 0}.success b{font-size:23px}#lightbox img{width:100%;max-height:55vh;object-fit:cover;border-radius:15px}[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:2px solid var(--primary-dark);outline-offset:4px}@media(max-width:1000px){.services-grid{grid-template-columns:repeat(2,1fr)}.floating-card{right:10px}}@media(max-width:859px){.hero-visual{order:2}.hero-copy{order:1}.hero-visual img{height:480px}.floating-card{max-width:none}.hero-copy h1{font-size:48px}.hero-copy{padding-top:15px}.about-copy h2{font-size:34px}.contact-grid{align-items:start}.nav-links{top:70px}.nav-brand img{width:44px;height:44px}.brand-title{font-size:20px}.brand-sub{font-size:9px}}@media(max-width:500px){.services-grid{grid-template-columns:1fr}.hero-copy h1{font-size:42px}.hero-visual img{height:440px}.gallery-card img{height:350px}.service-card img{height:260px}.row{grid-template-columns:1fr}.about-photo img{height:360px;min-height:0}.booking-banner{padding:23px}.booking-banner h2{font-size:32px}.btn{font-size:12px}}
.full-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.full-price-grid>div{display:grid;gap:24px}.full-price-grid .price-card{padding:28px;box-shadow:0 12px 32px #35291d06}.price-card dl{margin:0}.price-item dt{font-size:13px}.price-item dd{margin:0;white-space:nowrap;font-size:13px;font-weight:600;color:var(--primary-dark)}.price-bottom{text-align:center;margin-top:25px}.price-bottom p{font-size:12px;color:var(--muted)}.original-prices{margin-top:28px;border:1px solid var(--line);padding:18px 22px;border-radius:16px;background:#ffffff90}.original-prices summary{cursor:pointer;font-size:13px;color:var(--primary-dark)}.original-prices img{width:100%;margin-top:20px;border-radius:10px}@media(max-width:650px){.full-price-grid{grid-template-columns:1fr;gap:18px}.full-price-grid>div{gap:18px}.full-price-grid .price-card{padding:20px}.price-item{gap:14px}.price-item dt,.price-item dd{font-size:12px}}
html{scroll-padding-top:85px}body.admin-bar header{top:32px}@media(max-width:782px){body.admin-bar header{top:46px}}.wp-content-wrap{max-width:1180px;margin:50px auto;padding:20px}.wp-content-wrap img{height:auto}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

.contact-panel h3{margin-top:20px}.contact-detail{padding:18px 0;border-bottom:1px solid var(--line)}.contact-detail h4{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--primary-dark);margin:0 0 10px}.contact-detail p{margin:7px 0;color:var(--muted);font-size:14px}.contact-detail p strong{display:block;color:var(--text);font-weight:500}.contact-link{color:var(--primary-dark);font-size:13px;text-decoration:underline}.phone-link{font-size:25px;color:var(--text)}a.book{display:inline-block}