/* Concept 03 — The Salon. Warm, WhatsApp-first boutique with a bento hero. */
.salon{
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --bg:#faf5f0;--surface:#ffffff;--blush:#f1e4da;--blush-deep:#e6d2c4;--ink:#3a2a22;--muted:#7a6a60;
  --navy:#262161;--accent:#262161;--on-accent:#ffffff;--gold:#c9a64b;--green:#1f8a55;--green-soft:#e6f4ec;
  --line:#ead9cd;--line-strong:#d6bfae;
  --btn-bg:#262161;--btn-ink:#ffffff;--btn-bg-hover:#1b1740;
  --price:#3a2a22;--badge-bg:#ffffff;--badge-ink:#3a2a22;--sold-bg:#3a2a22;--sold-ink:#fff;
  --gallery-bg:#f6ece4;--radius-btn:99px;--radius-card:20px;--radius-dialog:24px;--radius-badge:99px;
  --grid-gap:22px;--gutter:20px;--max:1280px;--header-offset:92px;
  --shadow:0 10px 30px rgba(58,42,34,.08);--shadow-lg:0 24px 60px rgba(58,42,34,.14);
}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.1}
h1 em,h2 em{font-style:italic;color:var(--navy)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.section-head h2{font-size:clamp(30px,4vw,48px)}
.section-head.center{flex-direction:column;align-items:center;gap:0;text-align:center}
.section-head p[id]{font-size:14px;color:var(--muted)}
.text-link{color:var(--navy);font-weight:600;text-decoration-color:var(--gold)}
.btn{font-weight:600;font-size:15px}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* header */
.site-header{position:sticky;top:12px;z-index:100;padding:0 var(--gutter);margin-top:12px;pointer-events:none}
.header-pill{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,var(--max));margin:0 auto;padding:8px 8px 8px 12px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:99px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-size:19px}
.brand img{width:40px;height:40px;border-radius:50%}
.header-nav{display:flex;gap:4px}
.header-nav a{padding:10px 14px;border-radius:99px;font-weight:500;text-decoration:none;font-size:15px;transition:background .2s}
.header-nav a:hover{background:var(--blush)}
.header-actions{display:flex;align-items:center;gap:6px}
.bag-trigger,.header-wa,.menu-trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;transition:background .2s,border-color .2s}
.bag-trigger svg,.header-wa svg,.menu-trigger svg{width:18px;height:18px}
.bag-trigger:hover{border-color:var(--ink)}
.bag-count{background:var(--navy);color:#fff}
.header-wa{background:var(--green);color:#fff;border-color:var(--green)}
.header-wa:hover{background:#176d43}
.menu-trigger{width:44px;justify-content:center;padding:0}
#mobile-nav{background:var(--bg)}
#mobile-nav a{font-family:var(--font-display);font-size:26px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:14px;padding:24px 0 48px}
.tile{position:relative;border-radius:var(--radius-card);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);text-align:left}
.tile-intro{grid-column:span 6;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:40px;background:linear-gradient(140deg,#fff 0%,var(--blush) 100%)}
.tile-intro h1{font-size:clamp(32px,3.6vw,52px);max-width:16ch}
.lead{color:var(--muted);font-size:17px;max-width:46ch;line-height:1.6}
.tile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.label-short{display:none}
.tile-photo{grid-column:span 3;padding:0;border:1px solid var(--line);cursor:pointer;min-height:240px}
.tile-tall{grid-row:span 2}
.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile-photo:hover img{transform:scale(1.04)}
.photo-caption{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:2px;padding:12px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:14px}
.photo-caption em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.photo-caption b{font-family:var(--font-display);font-size:17px;font-weight:500}
.photo-caption i{font-style:normal;font-size:13px;color:var(--muted)}
.tile-promise{grid-column:span 3;display:grid;gap:8px;align-content:center;padding:24px;background:var(--navy);color:#fff;border-color:var(--navy)}
.tile-promise svg{width:32px;height:32px;color:#e0c868}
.tile-promise b{font-family:var(--font-display);font-size:20px;font-weight:500}
.tile-promise span{font-size:13px;color:#d8d4ea;line-height:1.5}
.tile-instagram{grid-column:span 5;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px;text-decoration:none;color:var(--ink)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ig-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.ig-copy{display:grid;gap:2px;min-width:140px}
.ig-copy b{font-weight:600}
.ig-copy i{font-style:normal;font-size:13px;color:var(--muted)}
.tile-visit{grid-column:span 7;display:grid;gap:4px;align-content:center;padding:22px 26px;background:var(--blush)}
.tile-visit em{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.tile-visit b{font-family:var(--font-display);font-size:22px;font-weight:500}

/* picks scroller */
.picks{padding:24px 0 48px;overflow:hidden}
.picks-scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);padding:6px var(--gutter) 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.picks-scroller::-webkit-scrollbar{display:none}
.pick{flex:0 0 240px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-start;padding:0;border:1px solid var(--line);border-radius:var(--radius-card);background:#fff;overflow:hidden;text-align:left;box-shadow:var(--shadow);transition:transform .25s}
.pick:hover{transform:translateY(-4px)}
.pick img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pick span{display:grid;gap:2px;padding:12px 14px 14px}
.pick b{font-family:var(--font-display);font-size:16px;font-weight:500;line-height:1.25}
.pick i{font-style:normal;font-size:13px;color:var(--muted)}
@media (min-width:1320px){.picks-scroller{padding-inline:calc((100% - var(--max)) / 2);overflow:visible}.pick{flex:1 1 0;min-width:0}}

/* catalog */
.catalog{padding:24px 0 80px}
.chips-row{display:grid;gap:10px;margin-bottom:16px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border:1px solid var(--line-strong);border-radius:99px;background:#fff;font-weight:500;font-size:14px;transition:background .2s,color .2s,border-color .2s}
.chips button:hover{border-color:var(--ink)}
.chips button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips-brands button{background:var(--blush);border-color:transparent}
.chips-brands button.active{background:var(--navy);border-color:var(--navy)}
.chips-brands em{font-style:normal;font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.tools .search{position:relative;flex:1 1 220px}
.tools .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.tools input[type=search],.tools select{min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:99px;background:#fff;font-size:14px}
.tools input[type=search]{width:100%;padding-left:42px}
.tools .toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;font-size:14px;font-weight:500;cursor:pointer}
.tools .toggle input{width:18px;height:18px;accent-color:var(--navy)}
.tools .clear{min-height:44px;padding:8px 16px;border:1px solid var(--line-strong);border-radius:99px;background:#fff;font-weight:600;font-size:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-media{border-radius:0}
.card-badge{box-shadow:0 1px 4px rgba(0,0,0,.12)}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px;flex:1}
.card-brand{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.card-name{font-family:var(--font-display);font-size:17px;font-weight:500;line-height:1.25}
.card-meta{display:none}
.card-condition{font-size:13px;color:var(--muted)}
.card-price{font-size:17px;font-weight:700;margin-top:6px}
.card-actions{margin-top:auto;padding-top:12px}
.card-save{flex:1;justify-content:center;border-color:var(--line-strong)}
.card-ask{flex:1;justify-content:center;background:var(--green-soft);color:var(--green);border-color:transparent}
.card-ask:hover{background:#d5ecdd}
.empty-state{background:#fff}

/* how */
.how{padding:24px 0 64px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{display:grid;gap:10px;justify-items:center;text-align:center;padding:32px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card)}
.step-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--blush);color:var(--navy)}
.step-icon svg{width:26px;height:26px}
.steps h3{font-size:22px}
.steps p{font-size:14px;color:var(--muted);max-width:30ch}

/* services */
.services{padding:0 0 64px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .25s}
.service:hover{transform:translateY(-3px)}
.service img{width:72px;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.service span{display:grid;gap:4px}
.service b{font-family:var(--font-display);font-size:18px;font-weight:500}
.service i{font-style:normal;font-size:13px;color:var(--muted);line-height:1.4}

/* visit */
.visit{padding:0 0 72px}
.visit-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center;padding:36px;background:linear-gradient(140deg,#fff,var(--blush));border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.visit h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
address{font-style:normal;font-weight:500;line-height:1.5;margin-bottom:10px}
.visit-copy p:not(.eyebrow){color:var(--muted)}
.visit-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.visit-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px}
.visit-photos img:last-child{margin-top:28px}

/* footer */
.site-footer{padding:0 0 110px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--line)}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:19px}
.footer-brand img{width:40px;height:40px;border-radius:50%}
.site-footer nav{display:flex;gap:6px;flex-wrap:wrap}
.site-footer nav a{padding:8px 12px;border-radius:99px;text-decoration:none;font-size:14px;font-weight:500}
.site-footer nav a:hover{background:var(--blush)}
.disclosure{font-size:12px;color:var(--muted);line-height:1.6;max-width:90ch}

/* mobile sticky bar */
.sticky-bar{display:none}

/* responsive */
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .tile-intro{grid-column:span 6;grid-row:auto;min-height:0}
  .tile-photo{grid-column:span 3}
  .tile-tall{grid-row:auto}
  .tile-promise{grid-column:span 3}
  .tile-instagram{grid-column:span 3}
  .tile-visit{grid-column:span 6}
  .service-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .header-nav,.header-wa span{display:none}
  .header-wa{width:44px;justify-content:center;padding:0}
  .menu-trigger{display:inline-flex}
  .visit-card{grid-template-columns:1fr;padding:24px}
  .steps{grid-template-columns:1fr}
  .steps li{grid-template-columns:auto 1fr;justify-items:start;text-align:left;padding:20px;column-gap:16px}
  .step-icon{grid-row:span 2}
  .steps p{max-width:none}
  .sticky-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:200;display:grid;grid-template-columns:auto 1fr;gap:8px;padding:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:99px;box-shadow:var(--shadow-lg)}
  .sticky-bar button,.sticky-bar a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 14px;border:0;border-radius:99px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
  .sticky-bar{transform:translateY(120%);transition:transform .3s}
  .sticky-bar.is-visible{transform:none}
  .sticky-bar button{background:var(--blush);color:var(--ink)}
  .sticky-bar a{background:var(--green);color:#fff}
  .sticky-bar svg{width:18px;height:18px}
  .toast{bottom:84px}
}
@media (max-width:600px){
  .site-header{top:8px;margin-top:8px;padding:0 12px}
  .header-pill{padding:6px 6px 6px 10px}
  .brand span{display:none}
  .bento{grid-template-columns:1fr 1fr;gap:10px;padding-top:16px}
  .tile-intro{grid-column:span 2;padding:26px 22px}
  .tile-intro h1{font-size:clamp(30px,8.5vw,38px)}
  .tile-actions{flex-wrap:nowrap}
  .tile-actions .btn{flex:1 1 0;min-width:0;padding:12px 10px;white-space:nowrap;font-size:14px}
  .tile-intro .label-full{display:none}
  .tile-intro .label-short{display:inline}
  .lead{font-size:15px}
  /* photo tiles become small cards: photo on top, caption underneath */
  .tile-photo{grid-column:span 1;min-height:0;display:flex;flex-direction:column;background:#fff}
  .tile-photo img{position:static;aspect-ratio:3/4;height:auto}
  .photo-caption{position:static;padding:10px 12px 12px;border-radius:0;background:#fff;backdrop-filter:none}
  .photo-caption em{font-size:10px}
  .photo-caption b{font-size:14px;line-height:1.2}
  .photo-caption i{font-size:12px}
  .tile-promise,.tile-instagram,.tile-visit{grid-column:span 2}
  .tile-instagram{grid-template-columns:1fr}
  .pick{flex-basis:200px}
  .service-grid{grid-template-columns:1fr}
  .card-body{padding:10px 12px 12px}
  .card-name{font-size:15px}
  .card-save span,.card-ask span{display:none}
  .card-save,.card-ask{padding:6px}
  .tools .select{flex:1 1 40%}
  .tools select{width:100%}
  .visit-photos img:last-child{margin-top:16px}
}