/* ============================================================
   Lorea – kujundussüsteem v3 (professionaalne, rosa-kuldne)
   ============================================================ */
/* Google Fonts laetakse HTML-i kaudu (mitte-blokeerivalt) – vaata layoutide <head> */

:root {
  --rose-deep: #a84a68;
  --rose: #d9688d;
  --rose-soft: #e98aa6;
  --blush: #f7e3e8;
  --blush-soft: #fdf4f6;
  --cream: #faf6f4;
  --gold: #c6a664;
  --gold-dark: #a8861c;
  --gold-soft: #f3ead2;
  --ink: #33282b;
  --ink-soft: #7d6b70;
  --line: #eedfe3;
  --line-gold: #e7d9b5;
  --white: #ffffff;
  --success: #4d9e6f;
  --danger: #cf5252;
  --warning: #cf9a3d;
  --info: #5b7fb5;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(51,40,43,.04), 0 10px 30px rgba(217,104,141,.08);
  --shadow-lg: 0 2px 6px rgba(51,40,43,.06), 0 24px 60px rgba(217,104,141,.14);
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* ============================================================
   HORISONTAALSE ÜLEVOOLU KAITSE
   ============================================================
   Üksainus liiga lai element (tabel, pilt, pikk sõna, negatiivne veeris)
   teeb KOGU lehe laiemaks kui ekraan – tulemuseks külgsuunas kerimine ja
   päis, mis ei ulatu üle ekraani. Telefonis paistab see nii, nagu oleks
   leht „välja suumitud".

   Kaks kaitset:
     1. overflow-x: clip hoiab lehe ekraani laiuses. `clip` (mitte `hidden`)
        sellepärast, et `hidden` lõhub position: sticky päise.
     2. Meedia ja tabelid ei tohi kunagi oma kastist välja ulatuda.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}
img, svg, video, canvas, iframe, table, pre {
  max-width: 100%;
}
img, svg, video { height: auto; }
body {
  overflow-x: clip;          /* vt. selgitust ülal */
  max-width: 100%;
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--rose); text-decoration: none; transition: color .15s; }
a:hover { color: var(--rose-deep); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; margin: 0 0 .45em; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 .85em; }
code { background: var(--blush-soft); padding: 2px 7px; border-radius: 6px; font-size: 13px; color: var(--rose-deep); }
hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 540px; margin: 0 auto; padding: 0 20px; }

/* ============ Nupud ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all .18s ease; line-height: 1.2; white-space: nowrap;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; box-shadow: 0 6px 18px rgba(217,104,141,.3);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(217,104,141,.38); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-outline { background: transparent; color: var(--rose-deep); border: 1.5px solid var(--rose-deep); box-shadow: none; }
.btn-outline:hover { background: var(--blush-soft); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.btn-ghost:hover { color: var(--ink); background: #fff; box-shadow: none; transform: none; }
.btn-gold { background: linear-gradient(135deg, #e2c98a, var(--gold)); color: #3f2f0a; box-shadow: 0 6px 18px rgba(198,166,100,.35); }
.btn-gold:hover { box-shadow: 0 10px 26px rgba(198,166,100,.45); }
.btn-white { background: #fff; color: var(--rose-deep); box-shadow: 0 6px 18px rgba(51,40,43,.16); }
.btn-white:hover { box-shadow: 0 10px 26px rgba(51,40,43,.22); }
.btn-success { background: linear-gradient(135deg, #58b07c, #3e8a5f); }
.btn-danger { background: linear-gradient(135deg, #e05b5b, #b83c3c); }
.btn-warning { background: linear-gradient(135deg, #e0a950, #b97f2c); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============ Vormid ============ */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--ink-soft); letter-spacing: .2px; }
.form-group .hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.form-control {
  width: 100%; padding: 12px 15px; border: 1.5px solid var(--line);
  border-radius: 12px; font-size: 14.5px; font-family: var(--font-body); background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(217,104,141,.12); }
textarea.form-control { min-height: 96px; resize: vertical; }
select.form-control { appearance: auto; }
.form-error { color: var(--danger); font-size: 12.5px; display: block; margin-top: 4px; }
.form-check { display: flex; gap: 9px; align-items: center; font-size: 14px; margin: 8px 0; cursor: pointer; }
.form-check input { width: 18px; height: 18px; accent-color: var(--rose); }

/* ============ Teated ============ */
.flash-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 500; width: min(560px, 94vw); }
.flash { padding: 13px 18px; border-radius: 14px; margin-bottom: 8px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: slideDown .25s ease; }
.flash-success { background: #e9f6ee; color: #2c6b47; border: 1px solid #c2e6d0; }
.flash-error { background: #fdecec; color: #8f2626; border: 1px solid #f3c6c6; }
.flash-info { background: var(--gold-soft); color: #7a6213; border: 1px solid var(--line-gold); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============ Päis ============ */
.site-header { position: sticky; top: 0; z-index: 120; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: 22px; height: 70px; }
.brand { font-size: 21px; font-weight: 800; color: var(--rose-deep); letter-spacing: -.4px; display: flex; align-items: center; gap: 9px; font-family: var(--font-head); }
.brand:hover { text-decoration: none; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--gold)); display: inline-block; box-shadow: 0 0 0 3px var(--blush); }
.brand .dot-gold { background: linear-gradient(135deg, var(--gold), #ecd9a8); box-shadow: 0 0 0 3px var(--gold-soft); }
.brand small { font-family: var(--font-body); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-left: 2px; }
.header-search { flex: 1; max-width: 440px; }
.header-search form { display: flex; gap: 8px; }
.header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ============ Jalus ============ */
.site-footer { background: linear-gradient(180deg, #4a363b, #38272b); color: #e8d5d9; margin-top: 70px; padding: 48px 0 22px; font-size: 13.5px; }
.site-footer a { color: #f2c3cf; }
.site-footer a:hover { color: #fff; }
.site-footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.site-footer h4 { color: #fff; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; }
.site-footer .legal-row { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; align-items: center; }

/* ============ Hero ============ */
.hero { position: relative; color: #fff; overflow: hidden; padding: 0; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(50,20,28,.88) 8%, rgba(50,20,28,.55) 45%, rgba(50,20,28,.15) 80%); }
.hero .in { position: relative; z-index: 2; padding: 110px 0 130px; max-width: 640px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: #f2d9a4; margin-bottom: 18px; }
.hero .eyebrow::before, .hero .eyebrow::after { content: ''; width: 26px; height: 1px; background: rgba(242,217,164,.6); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; margin-bottom: 16px; text-shadow: 0 4px 30px rgba(0,0,0,.3); }
.hero p { font-size: 17px; color: rgba(255,255,255,.9); max-width: 520px; margin-bottom: 28px; }
.hero-search { display: grid; grid-template-columns: 2fr 1fr auto; gap: 6px; background: #fff; padding: 8px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-width: 620px; }
.hero-search input, .hero-search select { border: none; padding: 12px 14px; font-size: 15px; border-radius: 12px; font-family: var(--font-body); color: var(--ink); background: #fff; min-width: 0; width: 100%; }
.hero-search .btn { white-space: nowrap; align-self: stretch; }
@media (max-width: 560px) {
  .hero-search { grid-template-columns: 1fr 1fr; }
  .hero-search input { grid-column: 1 / -1; }
  .hero-search .btn { grid-column: 1 / -1; }
}
.hero-cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-trust { margin-top: 30px; display: flex; gap: 26px; flex-wrap: wrap; color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 500; }
.hero-trust span { display: flex; align-items: center; gap: 8px; }

/* ============ Sektsioonid ============ */
.section { padding: 56px 0; }
.section-title { text-align: center; margin-bottom: 34px; }
.section-title h2 { position: relative; display: inline-block; padding-bottom: 14px; }
.section-title h2::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 60px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--rose), var(--gold)); }
.section-title .sub { color: var(--ink-soft); max-width: 560px; margin: 10px auto 0; font-size: 15px; }
.section-title.left { text-align: left; }
.section-title.left h2::after { left: 0; transform: none; }

/* ============ Salongikaardid ============ */
.salon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.salon-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: all .22s ease; position: relative;
  box-shadow: 0 2px 10px rgba(51,40,43,.05);
}
.salon-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--line-gold); }
.salon-card .cover { height: 150px; background: linear-gradient(135deg, var(--blush), var(--gold-soft)); position: relative; overflow: hidden; }
.salon-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.salon-card:hover .cover img { transform: scale(1.05); }
.salon-card .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(51,40,43,.18)); }
.salon-card .body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.salon-card .logo-sm { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; margin-top: -40px; border: 3px solid #fff; background: #fff; box-shadow: 0 4px 14px rgba(51,40,43,.18); position: relative; z-index: 2; }
.salon-card h3 { margin: 12px 0 3px; font-size: 1.1rem; }
.salon-card .meta { color: var(--ink-soft); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.salon-card .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.rating { color: var(--gold-dark); font-weight: 700; }
.rating .count { color: var(--ink-soft); font-weight: 400; }
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.badge-featured { background: linear-gradient(135deg, #d9bd7c, var(--gold-dark)); color: #fff; box-shadow: 0 3px 10px rgba(168,134,28,.35); }
.badge-trial { background: var(--blush); color: var(--rose-deep); }
.badge-city { background: var(--blush-soft); color: var(--rose-deep); border: 1px solid var(--line); }
.badge-gold { background: var(--gold-soft); color: var(--gold-dark); border: 1px solid var(--line-gold); }

/* ============ Kaardid / tabelid ============ */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .18s; }
.card:hover { border-color: var(--line-gold); }
.card .card-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card .card-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; position: relative; padding-bottom: 4px; }
.card .card-head h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--rose-soft)); }
.card .card-body { padding: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rose), var(--gold)); }
.stat-card .num { font-size: 1.8rem; font-weight: 800; color: var(--rose-deep); line-height: 1.15; font-family: var(--font-body); }
.stat-card .lbl { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-top: 5px; }
.stat-card .ic { position: absolute; right: 16px; top: 16px; font-size: 24px; opacity: .85; }

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 12px 14px; color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; border-bottom: 2px solid var(--line-gold); white-space: nowrap; background: var(--blush-soft); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table .actions { white-space: nowrap; text-align: right; }
.table tbody tr:hover { background: #fdf9fa; }

/* ============ Staatused ============ */
.status { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-pending { background: #fbf0d8; color: #8a6414; }
.status-confirmed { background: #e2f4e9; color: #27603e; }
.status-cancelled { background: #fbe3e3; color: #8f2626; }
.status-completed { background: #e3ecf9; color: #2c4f7c; }
.status-no_show { background: #f3e6fa; color: #6a2c8f; }
.status-rescheduled { background: #fde8ef; color: #8f2f4d; }

/* ============ Salongi avalik leht ============ */
.salon-hero { position: relative; color: #fff; }
.salon-hero .cover-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.salon-hero .cover-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,18,24,.3), rgba(40,18,24,.72)); }
.salon-hero .content { position: relative; z-index: 2; padding: 130px 0 46px; }
.salon-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 12px 0 6px; text-shadow: 0 3px 20px rgba(0,0,0,.35); }
.salon-hero .tagline { opacity: .96; font-size: 17px; font-family: var(--font-head); font-style: italic; }
.salon-hero .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.chip { background: rgba(255,255,255,.18); backdrop-filter: blur(8px); padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,.3); }
.salon-nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 70px; z-index: 100; box-shadow: 0 4px 16px rgba(51,40,43,.05); }
.salon-nav .container { display: flex; gap: 6px; overflow-x: auto; }
.salon-nav a { padding: 15px 16px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; border-bottom: 3px solid transparent; font-size: 14px; }
.salon-nav a:hover { text-decoration: none; color: var(--ink); }
.salon-nav a.active { color: var(--rose); border-bottom-color: var(--rose); }

.service-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.service-row:last-child { border-bottom: none; }
.service-row .price { font-weight: 800; color: var(--rose-deep); white-space: nowrap; font-size: 15.5px; }
.employee-card { text-align: center; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .18s ease; }
.employee-card:hover { border-color: var(--line-gold); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.employee-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blush); margin: 0 auto; }
.employee-card h4 { margin: 12px 0 3px; }
.employee-card .role { color: var(--ink-soft); font-size: 13px; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.info-list li:last-child { border-bottom: none; }
.info-list .ic { color: var(--rose); width: 22px; text-align: center; }

/* ============ Mallid ============ */
.tpl-elegant { font-family: var(--font-head); }
.tpl-elegant .salon-hero .content { text-align: center; padding: 150px 0 60px; }
.tpl-elegant .salon-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.tpl-elegant .salon-hero .tagline { font-style: italic; font-size: 18px; }
.tpl-elegant .logo-ring { width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(242,217,164,.8); padding: 7px; background: rgba(255,255,255,.16); backdrop-filter: blur(5px); margin: 0 auto 6px; }
.tpl-elegant .logo-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tpl-elegant .section-title h2 { font-weight: 500; text-transform: uppercase; letter-spacing: 3px; }
.tpl-elegant .service-row .price { color: var(--gold-dark); }
.tpl-elegant h2, .tpl-elegant h3, .tpl-elegant h4 { font-weight: 500; }
.tpl-modern .salon-hero .content { padding: 140px 0 50px; }
.tpl-modern .salon-hero h1 { font-weight: 800; letter-spacing: -.5px; text-transform: uppercase; }
.tpl-modern .section-title h2 { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.tpl-modern .card { border-radius: 10px; }
.tpl-modern .btn { border-radius: 8px; }
.tpl-modern .service-row { padding: 12px 0; }

/* ============ Broneerimine ============ */
.book-wizard .steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.step-pill { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.step-pill.active { border-color: var(--rose); color: var(--rose); background: var(--blush-soft); }
.step-pill.done { border-color: var(--success); color: var(--success); }
.service-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pick-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 15px; cursor: pointer; background: #fff; transition: all .14s ease; }
.pick-card:hover { border-color: var(--rose); box-shadow: 0 4px 16px rgba(217,104,141,.14); transform: translateY(-1px); }
.pick-card.selected { border-color: var(--rose); background: var(--blush-soft); box-shadow: 0 0 0 4px rgba(217,104,141,.14); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot-btn { padding: 11px 6px; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); font-family: var(--font-body); transition: all .12s; }
.slot-btn:hover { border-color: var(--rose); color: var(--rose); }
.slot-btn.selected { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(217,104,141,.3); }
.emp-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.emp-pick .pick-card { padding: 10px 16px; border-radius: 999px; }
/* Step-by-step viisard */
.bk-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 10px 12px; background: var(--blush-soft); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.bk-steps span { padding: 4px 9px; border-radius: 8px; white-space: nowrap; }
.bk-steps span.active { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; box-shadow: 0 3px 10px rgba(217,104,141,.3); }
.bk-steps i { color: var(--line-strong, #d9c6cc); font-style: normal; }
.bk-step { display: none; }
/* Kategooria-samm on vaikimisi nähtav – leht ei ole kunagi tühi, isegi kui
   JS-i laadimine ebaõnnestub (teised sammud avab JS). */
.bk-step[data-step="1"] { display: block; }
.bk-step h3 { margin-bottom: 10px; }
.bk-summary .kv-box { border: 1px solid var(--line-gold); background: var(--gold-soft); }
@media (max-width: 600px) { .bk-steps { font-size: 12px; gap: 2px; } .bk-steps span { padding: 3px 6px; } .bk-steps i { display: none; } }
.date-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.date-pill { min-width: 78px; text-align: center; padding: 11px 8px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-size: 12.5px; font-family: var(--font-body); transition: all .12s; }
.date-pill .d { font-size: 17px; font-weight: 800; display: block; }
.date-pill.selected { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(217,104,141,.3); }

/* ============ Autentimine ============ */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 26px 16px; background: radial-gradient(800px 400px at 90% -10%, rgba(198,166,100,.25), transparent 60%), radial-gradient(700px 400px at -20px 110%, rgba(232,120,154,.2), transparent 55%), var(--cream); }
.auth-card { width: 100%; max-width: 460px; background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 34px; border: 1px solid var(--line-gold); }
.auth-card.wide { max-width: 640px; }
.auth-logo { text-align: center; margin-bottom: 20px; }
.auth-logo .brand { justify-content: center; font-size: 26px; }
.auth-sub { text-align: center; color: var(--ink-soft); margin: -8px 0 22px; font-size: 14.5px; }

/* ============ Dashboard ============ */
.dash { display: flex; min-height: 100vh; }
.dash-side { width: 248px; color: var(--rose-deep); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; background: linear-gradient(180deg, #fdeef4 0%, #fbd9e6 55%, #f8ccdd 100%); box-shadow: 4px 0 24px rgba(200,74,112,.10); border-right: 1px solid #f3c9d8; }
.dash-side .brand { padding: 16px 18px 8px; font-size: 17px; color: var(--rose-deep); }
.dash-side .side-label { padding: 10px 18px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--rose); font-weight: 800; font-family: var(--font-body); }
.dash-side a.side-link { display: flex; gap: 10px; align-items: center; padding: 7px 18px; color: var(--rose-deep); font-size: 13px; font-weight: 600; position: relative; transition: all .12s; margin: 0; border-radius: 0; min-height: 32px; }
.dash-side a.side-link:hover { background: rgba(255,255,255,.65); color: var(--rose-deep); text-decoration: none; }
.dash-side a.side-link.active { background: #fff; color: var(--rose-deep); font-weight: 800; box-shadow: 0 2px 10px rgba(200,74,112,.16); }
.dash-side a.side-link.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--gold), var(--rose-soft)); }
.dash-side .side-link .ic { width: 20px; text-align: center; font-size: 15px; }
.dash-side .side-user { margin-top: auto; padding: 10px 18px; border-top: 1px solid rgba(200,74,112,.18); font-size: 12px; color: var(--rose-deep); }
.dash-side .side-user a { color: var(--rose); }
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff7fa 0%, var(--cream) 220px); }
.dash-top { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid #f3c9d8; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 90; }
.dash-top .crumb { font-weight: 700; color: var(--ink); font-size: 15px; }
.dash-top .spacer { flex: 1; }
.dash-content { padding: 26px; max-width: 1340px; width: 100%; margin: 0 auto; }

.dash-welcome { background: linear-gradient(135deg, #fff 0%, var(--blush-soft) 55%, var(--gold-soft) 130%); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 26px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; position: relative; overflow: hidden; }
.dash-welcome::after { content: ''; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(198,166,100,.22), transparent 70%); }
.dash-welcome h2 { margin: 0 0 4px; font-size: 1.5rem; }
.dash-welcome .sub { color: var(--ink-soft); font-size: 14px; }
.dash-welcome .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.qa-btn { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13.5px; color: var(--ink); transition: all .15s; }
.qa-btn:hover { border-color: var(--rose); color: var(--rose); box-shadow: 0 5px 18px rgba(217,104,141,.14); transform: translateY(-1px); text-decoration: none; }
.qa-btn .qi { font-size: 21px; }
.qa-btn.gold { border-color: var(--line-gold); background: linear-gradient(135deg, var(--gold-soft), #fff); }
.qa-btn.gold:hover { border-color: var(--gold); color: var(--gold-dark); }

/* ============ Kalender ============ */
.cal-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.cal-grid { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; position: relative; }
.cal-timecol { width: 56px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--blush-soft); }
/* Nurgakast PEAB olema täpselt sama kõrge kui veerupäis, muidu nihkuvad
   kõik kellaajasildid vertikaalselt. Just see näitas 09:45 broneeringut
   10:45 kohal: päis oli kahe reaga (töötaja nimi + amet) ~52px, nurgakast
   26px, seega sildid olid ühe tunni võrra üleval. Fikseeritud kõrgus mõlemal
   tagab, et sisu pikkus ei saa joondust enam lõhkuda. */
.cal-corner { height: 44px; background: var(--blush-soft); border-bottom: 1px solid var(--line); }
.cal-cols { display: flex; flex: 1; min-width: 0; }
.cal-col { flex: 1 1 0; min-width: 150px; border-left: 1px solid var(--line); position: relative; }
.cal-cols > .cal-col:first-child { border-left: none; }
.cal-col-head {
  height: 44px; padding: 4px 8px; text-align: center; font-weight: 700; font-size: 13px;
  border-bottom: 1px solid var(--line); background: var(--blush-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; line-height: 1.25;
}
.cal-col-head .small { font-size: 10.5px; }
/* Silt tähistab oma rea ALGUST → tekst rea ülaservas, mitte keskel.
   Kõrgus peab olema täpselt sama, mis .cal-slot (26px). */
.cal-time {
  text-align: right; padding: 1px 8px 0 0; font-size: 10.5px; color: var(--ink-soft);
  position: relative; height: 26px; line-height: 1.1;
  border-bottom: 1px solid #f6eef0; background: var(--blush-soft);
}
.cal-body { position: relative; }
.cal-slot { height: 26px; border-bottom: 1px solid #fbf1f3; cursor: pointer; }
.cal-slot:hover { background: var(--blush-soft); }
.cal-event { position: absolute; left: 3px; right: 3px; border-radius: 9px; padding: 5px 9px; font-size: 12px; color: #fff; cursor: grab; overflow: hidden; z-index: 3; box-shadow: 0 3px 8px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.45); }
.cal-event:active { cursor: grabbing; }
.cal-event .t { font-weight: 700; }
.cal-event.dragging { opacity: .5; }

/* ============ Modaal ============ */
.modal-overlay { position: fixed; inset: 0; background: rgba(48,22,30,.55); z-index: 400; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: #fff; border-radius: 20px; width: 100%; max-width: 560px; box-shadow: 0 30px 70px rgba(48,22,30,.4); border: 1px solid var(--line-gold); animation: modalUp .22s ease; }
@keyframes modalUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal.wide { max-width: 800px; }
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, var(--blush-soft), transparent); }
.modal-head h3 { margin: 0; display: flex; align-items: center; gap: 9px; }
.modal-body { padding: 22px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; background: var(--blush-soft); border-radius: 0 0 20px 20px; }

/* ============ Küpsised ============ */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 600; max-width: 740px; margin: 0 auto; background: #fff; border: 1px solid var(--line-gold); border-radius: 18px; box-shadow: 0 24px 60px rgba(48,22,30,.35); padding: 18px 20px; display: none; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookie-banner.show { display: flex; animation: modalUp .28s ease; }
.cookie-banner .txt { flex: 1; min-width: 240px; font-size: 13.5px; }
.cookie-banner .txt strong { display: block; margin-bottom: 3px; }
.cookie-banner .acts { display: flex; gap: 9px; flex-wrap: wrap; }

/* ============ Misc ============ */
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 26px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--blush); }
.tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; overflow: visible; }
.tabs a { padding: 9px 13px; font-weight: 600; font-size: 14px; color: var(--ink-soft); border-bottom: 3px solid transparent; white-space: nowrap; border-radius: 10px 10px 0 0; }
.tabs a:hover { text-decoration: none; color: var(--ink); background: var(--blush-soft); }
.tabs a.active { color: var(--rose); border-bottom-color: var(--rose); background: linear-gradient(180deg, var(--blush-soft), transparent); }
/* Seadete menüü – kompaktne; mahub laial ekraanil ühele reale, kitsal mähitakse (EI keri) */
.tabs.tabs-single { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
.tabs.tabs-single a { padding: 8px 11px; font-size: 13px; }
/* Rikkalik tekstitoimetaja (uudiskiri jm) */
.rte { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.rte:focus-within { border-color: var(--rose); }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--blush-soft); }
.rte-toolbar button { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 10px; font-weight: 700; color: var(--ink); cursor: pointer; font-size: 13px; }
.rte-toolbar button:hover { background: #fff; border-color: var(--line-gold); }
.rte-sep { width: 1px; background: var(--line); margin: 2px 6px; }
.rte-area { min-height: 180px; max-height: 420px; overflow-y: auto; padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--ink); outline: none; }
.rte-area:empty::before { content: attr(data-placeholder); color: #b9a9ae; }
.rte-area ul, .rte-area ol { padding-left: 22px; margin: 8px 0; }
.rte-area a { color: var(--rose); }
.pill { display: inline-block; background: var(--blush); color: var(--rose-deep); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; }
.pill-gold { background: var(--gold-soft); color: var(--gold-dark); border: 1px solid var(--line-gold); }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; }
.pagination .cur { background: var(--rose); color: #fff; border-color: transparent; }
.empty { text-align: center; padding: 48px 16px; color: var(--ink-soft); }
.empty .big { font-size: 42px; margin-bottom: 10px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--ink-soft); }
.kv .v { font-weight: 600; text-align: right; }
progress { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; appearance: none; }
progress::-webkit-progress-bar { background: #f2e7ea; border-radius: 999px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--rose), var(--gold)); border-radius: 999px; }
.onboarding-progress { display: flex; gap: 6px; margin: 18px 0 26px; }
.onboarding-progress .op-step { flex: 1; height: 8px; border-radius: 999px; background: var(--line); }
.onboarding-progress .op-step.done { background: linear-gradient(90deg, var(--success), #7cc39a); }
.onboarding-progress .op-step.current { background: linear-gradient(90deg, var(--rose), var(--gold)); }

/* ============ Onboarding: nimeline edenemine ============
   Anonüümsed triibud ei öelnud, mitu sammu veel ees on ega mis neis tuleb.
   Nüüd: number + nimi, läbitud sammud klõpsitavad (tagasi parandama). */
.onb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.onb-count { font-size: 14px; color: var(--ink-soft); }
.onb-count strong { color: var(--rose-deep); font-size: 17px; }

/* Riba MAHUB alati ära – horisontaalset kerimist EI OLE.
   Kerimine oli halb lahendus: kasutaja ei näinud, mitu sammu veel ees on,
   ja telefonis polnud üldse aru saada, et riba liigub. Nüüd jagavad kaheksa
   sammu laiuse omavahel ära ja kahanevad koos ekraaniga. */
.onb-steps {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  width: 100%;
}
.onb-step {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1 1 0; min-width: 0;                 /* min-width:0 lubab kahaneda */
  padding: 8px 6px; border-radius: 10px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-soft); text-decoration: none;
  font-size: 12.5px; transition: all .15s;
}
a.onb-step:hover { border-color: var(--rose); color: var(--rose-deep); }
.onb-step .onb-num {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--line); color: var(--ink-soft); font-size: 12px; font-weight: 700;
}
.onb-step .onb-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onb-step.done { border-color: #bfe3cd; color: #3d7f5c; }
.onb-step.done .onb-num { background: var(--success); color: #fff; }
.onb-step.current, .onb-step.active {
  border-color: var(--gold); background: linear-gradient(135deg, var(--gold-soft), #fff);
  color: var(--ink); font-weight: 700;
}
.onb-step.current .onb-num { background: linear-gradient(135deg, var(--rose), var(--gold)); color: #fff; }
.onb-step.todo { opacity: .5; }

/* Keskmine ekraan: nimed ära, ainult numbrid – need mahuvad alati. */
@media (max-width: 900px) {
  .onb-step .onb-name { display: none; }
  .onb-step { padding: 9px 4px; }
}
/* Telefon: numbrid suuremad ja selgemad, sest muud infot ribal ei ole.
   Aktiivse sammu nime näitab pealkiri kohe riba all. */
@media (max-width: 560px) {
  .onb-steps { gap: 3px; }
  .onb-step { padding: 7px 2px; border-radius: 8px; }
  .onb-step .onb-num { width: 26px; height: 26px; font-size: 13px; }
}

.onb-title { margin-bottom: 16px; }
.onb-title h2 { margin: 0 0 4px; }
.onb-lead { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* Selgituskast sammu sees: MIKS seda küsitakse */
.onb-help {
  background: var(--blush-soft); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
}
.onb-note { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--ink); }
.onb-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }

@media (max-width: 700px) {
  /* Telefonis ei mahu 8 nimega sammu ära – jäävad ainult numbrid,
     aktiivne samm näitab ka nime. Riba on horisontaalselt keritav. */
  .onb-step .onb-name { display: none; }
  .onb-step { padding: 7px 8px; }
  .onb-step.current .onb-name, .onb-step.active .onb-name { display: inline; padding-right: 5px; }
}
.stars { color: var(--gold); letter-spacing: 2px; }
.stars .off { color: #e5d8da; }
.review-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.review-item:last-child { border-bottom: none; }
.review-item .who { font-weight: 700; }
.review-item .when { color: var(--ink-soft); font-size: 12.5px; }
.review-item .reply { background: var(--blush-soft); border-left: 3px solid var(--gold); padding: 11px 15px; border-radius: 0 11px 11px 0; margin-top: 9px; font-size: 13.5px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gallery-grid img { width: 100%; height: 150px; object-fit: cover; border-radius: 13px; border: 1px solid var(--line); }

/* Galerii avalikul lehel: hover näitab kategooriat, klõps avab lightboxi */
.gal-item { position: relative; display: block; border-radius: 13px; overflow: hidden; cursor: zoom-in; }
.gal-item img { display: block; transition: transform .25s ease; }
.gal-item:hover img { transform: scale(1.06); }
.gal-hover {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: linear-gradient(180deg, rgba(40,18,24,.15), rgba(40,18,24,.65));
  color: #fff; opacity: 0; transition: opacity .2s ease; padding: 8px;
}
.gal-item:hover .gal-hover { opacity: 1; }
.gal-hover .gal-cat { font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.gal-hover .gal-title { font-size: 12px; opacity: .9; }

/* Lightbox */
.gal-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; gap: 10px; background: rgba(20,10,14,.92); padding: 20px;
}
.gal-lightbox[hidden] { display: none; }
.gal-lightbox figure { margin: 0; max-width: min(92vw, 1100px); text-align: center; }
.gal-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; box-shadow: 0 10px 60px rgba(0,0,0,.6); }
.gal-lightbox figcaption { color: #fff; margin-top: 10px; font-size: 14px; }
.gal-lightbox .gal-lb-cat { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12.5px; color: #f2d9a4; }
.gal-lb-close, .gal-lb-prev, .gal-lb-next {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%; width: 44px; height: 44px; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s;
}
.gal-lb-close:hover, .gal-lb-prev:hover, .gal-lb-next:hover { background: rgba(255,255,255,.28); }
.gal-lb-close { position: absolute; top: 18px; right: 18px; }
@media (max-width: 640px) {
  .gal-lb-prev, .gal-lb-next { position: absolute; bottom: 16px; top: auto; }
  .gal-lb-prev { left: 22%; }
  .gal-lb-next { right: 22%; }
  .gal-lightbox img { max-height: 70vh; }
}
.kv-box { background: var(--blush-soft); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }
.notif-item { padding: 14px 17px; border-bottom: 1px solid var(--line); display: flex; gap: 11px; align-items: flex-start; }
.notif-item.unread { background: #fdf6f8; }
.notif-item:last-child { border-bottom: none; }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); margin-top: 6px; flex-shrink: 0; }
.text-center { text-align: center; }
.right { text-align: right; }
.danger-zone { border: 1px solid #f3c6c6; background: #fdf0f0; border-radius: var(--radius); padding: 16px; }

/* ============ Paketid ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; align-items: stretch; }
.plan-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; position: relative; transition: all .2s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-gold); }
.plan-card.popular { border: 2px solid var(--gold); box-shadow: var(--shadow-lg); }
.plan-card.popular .plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d9bd7c, var(--gold-dark)); color: #fff; padding: 6px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .8px; box-shadow: 0 5px 16px rgba(168,134,28,.4); font-family: var(--font-body); }
.plan-card h3 { font-size: 1.4rem; margin-bottom: 4px; }
.plan-card .plan-desc { color: var(--ink-soft); font-size: 13.5px; min-height: 42px; }
.plan-card .plan-price { margin: 16px 0; }
.plan-card .plan-price .amount { font-size: 2.3rem; font-weight: 800; color: var(--rose-deep); font-family: var(--font-body); }
.plan-card .plan-price .per { color: var(--ink-soft); font-size: 14px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.plan-card ul li { padding: 8px 0 8px 28px; position: relative; font-size: 14px; border-bottom: 1px dashed var(--line); }
.plan-card ul li:last-child { border-bottom: none; }
.plan-card ul li::before { content: '✓'; position: absolute; left: 4px; color: var(--gold-dark); font-weight: 800; }
.plan-card ul li.no::before { content: '✕'; color: #d8c9cb; }

/* ============ CTA ============ */
.salon-cta { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(135deg, #9c3a5c 0%, #b56b75 55%, #9c7a3c 140%); color: #fff; padding: 52px 44px; }
.salon-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 240px at 90% -30px, rgba(242,217,164,.4), transparent 60%); }
.salon-cta .in { position: relative; z-index: 2; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.salon-cta h2 { font-size: 1.9rem; margin: 0 0 8px; color: #fff; }
.salon-cta p { opacity: .93; max-width: 560px; }
.salon-cta .acts { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }

/* ============ Feature strip ============ */
.feature-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.feature-item { text-align: center; padding: 26px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .18s ease; }
.feature-item:hover { border-color: var(--line-gold); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.feature-item .fi { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 16px; background: linear-gradient(135deg, var(--blush), var(--gold-soft)); display: flex; align-items: center; justify-content: center; }
.feature-item .fi svg { width: 26px; height: 26px; stroke: var(--rose-deep); }
.feature-item h4 { margin: 0 0 5px; font-family: var(--font-body); font-weight: 700; }
.feature-item p { color: var(--ink-soft); font-size: 13.5px; margin: 0; }

/* ============ Tpl pick ============ */
.tpl-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.tpl-card { border: 2px solid var(--line); border-radius: 16px; padding: 15px; text-align: center; cursor: pointer; position: relative; transition: all .15s; background: #fff; }
.tpl-card:hover { border-color: var(--rose); }
.tpl-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,166,100,.2); }
.tpl-card .preview { height: 96px; border-radius: 11px; margin-bottom: 11px; border: 1px solid var(--line); overflow: hidden; position: relative; }
.tpl-card .preview .bar { height: 14px; background: rgba(217,104,141,.85); }
.tpl-card .preview .bar2 { height: 34px; background: linear-gradient(135deg, var(--blush), var(--blush-soft)); }
.tpl-card .preview .goldline { height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.tpl-card .lock { position: absolute; top: 9px; right: 9px; background: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.16); font-size: 14px; }
.tpl-card .upgrade { font-size: 11.5px; color: var(--gold-dark); font-weight: 700; }
.divider-gold { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); margin: 22px 0; }

/* ============ Registreerimise paketi valik ============ */
/* Makse sageduse segmenteeritud valik (registreerimine) – kompaktne,
   mitte kaks hiiglaslikku kaarti nagu varem. */
.cycle-switch { display: flex; gap: 0; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; max-width: 440px; }
.cycle-opt { flex: 1; text-align: center; padding: 10px 12px; cursor: pointer; background: #fff; transition: background .15s; display: flex; flex-direction: column; gap: 1px; }
.cycle-opt + .cycle-opt { border-left: 1.5px solid var(--line); }
.cycle-opt input { position: absolute; opacity: 0; }
.cycle-opt.selected { background: linear-gradient(135deg, var(--gold-soft), #fff); box-shadow: inset 0 0 0 2px var(--gold); }
.cycle-opt .cy-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.cycle-opt .cy-sub { font-size: 12px; color: var(--ink-soft); }
.cycle-opt .cy-badge { display: inline-block; background: linear-gradient(135deg, #d8b44a, #a8861c); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: 1px; }

/* ============ Paketikaardid ============
   Ruudustik oli `grid-3`, aga pakette on NELI – neljas kukkus üksi
   teisele reale ja nägi katkise moodi välja. Nüüd on neli võrdset veergu,
   mis lähevad kitsamal ekraanil kaks-kaks ja telefonis ühte ritta.

   Kaardid on flex-veerud, et hind ja kirjeldus oleksid KÕIGIL kaartidel
   samal kõrgusel ka siis, kui funktsioonide tekst on eri pikkusega. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 1080px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .plan-grid { grid-template-columns: 1fr; } }

.plan-radio {
  display: flex; flex-direction: column;
  border: 2px solid var(--line); border-radius: 16px;
  padding: 16px 15px; cursor: pointer; transition: all .15s;
  background: #fff; position: relative; height: 100%;
}
.plan-radio:hover { border-color: var(--rose); transform: translateY(-2px); }
.plan-radio.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,166,100,.2);
  background: linear-gradient(135deg, var(--gold-soft), #fff);
}
.plan-radio input { position: absolute; opacity: 0; }

.plan-radio .pr-name {
  font-weight: 800; font-size: 1.02rem; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: 24px;
}
.plan-radio .pr-name .pill { font-size: 10.5px; padding: 2px 8px; }

.plan-radio .pr-price {
  color: var(--rose-deep); font-weight: 800; font-size: 1.35rem;
  margin-top: 8px; line-height: 1.15; white-space: nowrap;
}
.plan-radio .pr-price .small { font-size: 12px; font-weight: 600; }

/* Aastahinna märkus hoiab oma koha ka siis, kui ta on peidetud –
   muidu hüppaksid kaardid makseperioodi vahetamisel eri kõrgusele. */
.plan-radio .pr-yearly-note { margin-top: 3px; font-size: 11.5px; line-height: 1.35; min-height: 16px; }

.plan-radio .pr-feat {
  font-size: 12px; color: var(--ink-soft); line-height: 1.5;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  flex: 1;                     /* lükkab kaardid ühekõrguseks */
}

@media (max-width: 900px) {
  .dash-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 250; transform: translateX(-100%); transition: .22s ease; box-shadow: none; }
  .dash-side.open { transform: none; box-shadow: 0 0 60px rgba(48,22,30,.5); }
  .dash-top .menu-btn { display: inline-flex; }
  .site-header .header-search { display: none; }
  .hero .in { padding: 80px 0 100px; }
  .salon-cta { padding: 36px 26px; }
}
.menu-btn { display: none; }

/* ============================================================
   MALLID – reaalsed disainierinevused (mitte ainult hero)
   ============================================================ */

/* ---------- ELEGANTNE: serif, kuld, luksus ---------- */
.tpl-elegant { font-family: var(--font-head); }
.tpl-elegant body, .tpl-elegant { background: #fbf8f3; }
.tpl-elegant .salon-nav { background: #fffdf9; }
.tpl-elegant .salon-nav a { font-family: var(--font-head); letter-spacing: 1px; text-transform: uppercase; font-size: 12.5px; }
.tpl-elegant .salon-hero .content { text-align: center; padding: 150px 0 64px; }
.tpl-elegant .salon-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; }
.tpl-elegant .salon-hero .tagline { font-style: italic; font-size: 18px; }
.tpl-elegant .logo-ring { width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(242,217,164,.85); padding: 7px; background: rgba(255,255,255,.16); backdrop-filter: blur(5px); margin: 0 auto 8px; }
.tpl-elegant .logo-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tpl-elegant .section { padding: 60px 0; }
.tpl-elegant .section-title h2 { font-weight: 500; text-transform: uppercase; letter-spacing: 3px; font-size: 1.6rem; }
.tpl-elegant .section-title h2::after { width: 80px; background: linear-gradient(90deg, var(--gold), transparent); }
.tpl-elegant .card { border: 1px solid var(--line-gold); border-radius: 22px; box-shadow: none; background: #fffdf9; }
.tpl-elegant .card-head { background: linear-gradient(180deg, var(--gold-soft), transparent); border-bottom: 1px solid var(--line-gold); }
.tpl-elegant .service-row { border-bottom: 1px dashed var(--line-gold); padding: 18px 4px; }
.tpl-elegant .service-row .price { color: var(--gold-dark); font-family: var(--font-head); font-size: 1.1rem; }
.tpl-elegant .employee-card { border: 1px solid var(--line-gold); border-radius: 50% 50% 18px 18px; padding-top: 26px; background: #fffdf9; }
.tpl-elegant .employee-card img { border: 3px solid var(--gold-soft); }
.tpl-elegant .info-list li { border-bottom: 1px dashed var(--line-gold); }
.tpl-elegant .info-list .ic { color: var(--gold-dark); }
.tpl-elegant .review-item { border-bottom: 1px dashed var(--line-gold); }
.tpl-elegant .review-item .reply { border-left-color: var(--gold); }
.tpl-elegant .gallery-grid img { border: 2px solid var(--gold-soft); border-radius: 16px; }
.tpl-elegant h2, .tpl-elegant h3, .tpl-elegant h4 { font-weight: 500; letter-spacing: .3px; }
.tpl-elegant .btn { border-radius: 2px 14px 2px 14px; font-family: var(--font-head); letter-spacing: 1px; }
.tpl-elegant .chip { border-radius: 2px 12px 2px 12px; }

/* ---------- KAASAEGNE: julge, tume, terav ---------- */
.tpl-modern { background: #f4f2f2; }
.tpl-modern .salon-hero .content { padding: 150px 0 56px; }
.tpl-modern .salon-hero h1 { font-weight: 900; letter-spacing: -1.5px; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
.tpl-modern .salon-nav { background: #1c1417; border-bottom: none; }
.tpl-modern .salon-nav a { color: rgba(255,255,255,.75); border-bottom: 3px solid transparent; }
.tpl-modern .salon-nav a:hover { color: #fff; }
.tpl-modern .salon-nav a.active { color: #fff; border-bottom-color: var(--rose-soft); }
.tpl-modern .section-title h2 { font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; }
.tpl-modern .section-title h2::after { width: 100%; height: 6px; background: var(--rose); }
.tpl-modern .card { border-radius: 8px; border: 1px solid #e3ddde; box-shadow: none; }
.tpl-modern .card-head { border-radius: 8px 8px 0 0; background: #faf8f8; }
.tpl-modern .service-row { padding: 14px 0; border-bottom: 1px solid #e8e2e3; }
.tpl-modern .service-row .price { font-weight: 900; color: var(--rose-deep); font-size: 1.05rem; }
.tpl-modern .employee-card { border-radius: 8px; border: 1px solid #e3ddde; }
.tpl-modern .employee-card img { border-radius: 8px; border: none; width: 100%; height: 130px; object-fit: cover; }
.tpl-modern .btn { border-radius: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; font-size: 13px; }
.tpl-modern .badge { border-radius: 4px; }
.tpl-modern .status { border-radius: 4px; }
.tpl-modern .gallery-grid img { border-radius: 6px; border: none; }
.tpl-modern .review-item { border-bottom: 1px solid #e8e2e3; }
.tpl-modern .info-list li { border-bottom: 1px solid #e8e2e3; }
.tpl-modern .info-list .ic { color: var(--rose); }
.tpl-modern .svc-group-head { background: #1c1417; color: #fff; border-radius: 4px; }
.tpl-modern h2 { font-weight: 900; text-transform: uppercase; letter-spacing: 1px; border-left: 6px solid var(--rose); padding-left: 12px; }
.tpl-modern .chip { border-radius: 4px; background: rgba(0,0,0,.45); border: none; }
.tpl-modern .salon-hero .cover-img::after { background: linear-gradient(180deg, rgba(15,10,12,.55), rgba(15,10,12,.85)); }

/* ---------- LUKSUSLIK (DELUXE): tume šokolaad + kuld ---------- */
.tpl-luxe { background: #171310; color: #e9e2d8; font-family: var(--font-head); }
.tpl-luxe .salon-hero .content { padding: 150px 0 70px; }
.tpl-luxe .salon-hero .cover-img::after { background: linear-gradient(180deg, rgba(18,12,8,.66), rgba(18,12,8,.92)); }
.tpl-luxe .luxe-frame { display: inline-block; border: 1px solid rgba(230,201,138,.55); padding: 38px 46px; background: rgba(18,12,8,.45); backdrop-filter: blur(4px); }
.tpl-luxe .luxe-logo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 2px solid #e6c98a; padding: 4px; background: rgba(0,0,0,.3); margin-bottom: 10px; }
.tpl-luxe .luxe-eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: #e6c98a; margin-bottom: 8px; }
.tpl-luxe .salon-hero h1 { font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: #f4ecdd; }
.tpl-luxe .salon-hero .tagline { color: #cdbfa5; font-style: italic; }
.tpl-luxe .salon-nav { background: #14100d; border-bottom: 1px solid rgba(230,201,138,.28); }
.tpl-luxe .salon-nav a { color: #cdbfa5; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.tpl-luxe .salon-nav a:hover { color: #e6c98a; }
.tpl-luxe h2, .tpl-luxe h3, .tpl-luxe h4 { color: #e6c98a; font-weight: 500; letter-spacing: 2px; }
.tpl-luxe .card { background: #201a15; border: 1px solid rgba(230,201,138,.3); border-radius: 6px; box-shadow: none; color: #e9e2d8; }
.tpl-luxe .card-head { background: linear-gradient(180deg, rgba(230,201,138,.12), transparent); border-bottom: 1px solid rgba(230,201,138,.25); }
.tpl-luxe .card-head h3 { color: #e6c98a; }
.tpl-luxe .service-row { border-bottom: 1px solid rgba(230,201,138,.2); padding: 16px 4px; }
.tpl-luxe .service-row strong { color: #f4ecdd; }
.tpl-luxe .service-row .price { color: #e6c98a; font-family: var(--font-head); font-size: 1.1rem; }
.tpl-luxe .muted, .tpl-luxe .small.muted, .tpl-luxe .service-row .small { color: #a3937c !important; }
.tpl-luxe .employee-card { background: #201a15; border: 1px solid rgba(230,201,138,.3); border-radius: 6px; color: #e9e2d8; }
.tpl-luxe .employee-card h4 { color: #f4ecdd; }
.tpl-luxe .employee-card img { border: 2px solid #e6c98a; }
.tpl-luxe .employee-card .role { color: #a3937c; }
.tpl-luxe .btn { border-radius: 0; background: linear-gradient(135deg, #b08d4f, #e6c98a); color: #201505; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; box-shadow: none; font-family: var(--font-head); }
.tpl-luxe .btn-ghost { background: transparent; border: 1px solid rgba(230,201,138,.5); color: #e6c98a; }
.tpl-luxe .chip { border-radius: 0; border: 1px solid rgba(230,201,138,.4); background: rgba(0,0,0,.35); }
.tpl-luxe .info-list li { border-bottom: 1px solid rgba(230,201,138,.2); }
.tpl-luxe .info-list .ic { color: #e6c98a; }
.tpl-luxe .info-list a { color: #e6c98a; }
.tpl-luxe .review-item { border-bottom: 1px solid rgba(230,201,138,.2); }
.tpl-luxe .review-item .stars { color: #e6c98a; }
.tpl-luxe .review-item .reply { border-left: 3px solid #e6c98a; background: rgba(230,201,138,.07); }
.tpl-luxe .gallery-grid img { border: 1px solid rgba(230,201,138,.4); border-radius: 2px; }
.tpl-luxe .kv-box { background: #201a15; border: 1px solid rgba(230,201,138,.25); color: #e9e2d8; }
.tpl-luxe .divider-gold { border-color: rgba(230,201,138,.3); }
.tpl-luxe .empty { color: #a3937c; }
.tpl-luxe .form-control { background: #171310; border: 1px solid rgba(230,201,138,.35); color: #e9e2d8; }
.tpl-luxe p { color: #cdbfa5; }

/* Külgriba: lühikestel ekraanidel tihenda, et menüü EI hakkaks scrollima */
@media (max-height: 720px) {
  .dash-side .brand { padding: 10px 18px 6px; font-size: 16px; }
  .dash-side .side-label { padding: 7px 18px 3px; }
  .dash-side a.side-link { padding: 5px 18px; font-size: 12.5px; min-height: 27px; }
  .dash-side .side-user { padding: 6px 18px; font-size: 11px; }
}

/* ============================================================
   PREMIUM ESILEHT (luksuslik beauty marketplace)
   ============================================================ */
/* Hero – full-bleed taustapilt + fade */
/* Hero – premium pilt paremal, fadeb sisse vasakult; vasakul kreemikas taust */
/* Hero.
   VAREM: taustapilt ulatus 140px ja fade-kiht 160px hero'st ALLA
   (bottom: -140px / -160px) ning overflow oli visible. Pilt valgus seetõttu
   järgmisele sektsioonile peale, tekitades lehele kummitusliku salongifoto ja
   terava horisontaalse serva – täpselt see, mis ekraanipildil näha oli.
   NÜÜD: pilt ja fade jäävad hero sisse (overflow: hidden), üleminek järgmisele
   sektsioonile tehakse hero enda alaservas. */
.prem-hero {
  position: relative; padding: 0; overflow: hidden; min-height: 640px;
  display: flex; align-items: center;
  background: linear-gradient(135deg, #faf3f0 0%, #fdf4f6 60%, #f7e8ec 100%);
}
/* Üleminek benefitsi taustavärvile (cream) – hero SEES, mitte alla ulatuv */
.prem-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1;
  background: linear-gradient(180deg, rgba(250,246,244,0) 0%, rgba(250,246,244,.65) 55%, rgba(250,246,244,1) 100%);
  pointer-events: none;
}
.prem-hero-bgimg {
  position: absolute; inset: 0;
  background-size: cover; background-position: right center;
}
.prem-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,243,240,1) 0%, rgba(250,243,240,.99) 30%, rgba(250,243,240,.95) 48%, rgba(250,243,240,.7) 62%, rgba(250,243,240,.35) 75%, rgba(250,243,240,0) 90%); }
.prem-hero-in { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 72px; }
.prem-hero-text { max-width: 640px; padding: 30px 0; }
.prem-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 3px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 18px; }
.prem-h1 { font-family: var(--font-head); font-weight: 600; font-size: clamp(42px, 5vw, 64px); line-height: 1.08; color: #3a2b30; margin: 0 0 18px; letter-spacing: -.5px; }
.prem-h1-accent { color: var(--rose); }
.prem-hero-sub { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 520px; margin: 0 0 30px; }
/* Otsingukast */
.prem-search { display: grid; grid-template-columns: 1fr 1px 1fr auto; align-items: stretch; background: #fff; border-radius: 22px; box-shadow: 0 18px 50px rgba(168,74,104,.14), 0 3px 10px rgba(168,74,104,.06); border: 1px solid rgba(217,104,141,.14); padding: 8px; max-width: 740px; gap: 0; }
.prem-search-field { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 14px; min-width: 0; }
.prem-search-inner { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.prem-search-field:focus-within { background: var(--blush-soft); }
.prem-search-ic { font-size: 18px; }
.prem-search-label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-dark); white-space: nowrap; }
.prem-search-field input, .prem-search-field select { border: 0; outline: 0; background: transparent; font-size: 13.5px; color: var(--ink); width: 100%; min-width: 0; max-width: 100%; font-family: var(--font-body); }
.prem-search-field input::placeholder, .prem-search-field select { color: #9b8b90; opacity: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.prem-search-field input::placeholder { color: #b9a9ae; }
.prem-search-sep { width: 1px; background: var(--line); }
.prem-search-btn { border: 0; cursor: pointer; background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff; font-weight: 700; font-size: 15px; border-radius: 16px; padding: 0 30px; font-family: var(--font-body); letter-spacing: .2px; transition: transform .15s ease, box-shadow .15s ease; }
.prem-search-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(198,166,100,.5); }
/* Usaldusriba */
.prem-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }
.prem-trust span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .prem-hero { min-height: 560px; }
  .prem-hero-bgimg { background-position: 70% center; }
  .prem-hero-fade { background: linear-gradient(180deg, rgba(250,243,240,.99) 0%, rgba(250,243,240,.94) 40%, rgba(250,243,240,.75) 65%, rgba(250,243,240,.4) 85%, rgba(250,243,240,.1) 100%); }
  .prem-search { grid-template-columns: 1fr; gap: 6px; }
  .prem-search-sep { display: none; }
  .prem-search-btn { padding: 15px; }
}

/* Benefits */
/* Ülemine polster oli 130px ainult selleks, et heroست väljavalgunud pilt ei kataks ikoone. Nüüd piisab tavalisest sektsioonivahest. */
.prem-benefits { padding: 64px 0 20px; position: relative; }
.prem-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.prem-benefit { text-align: center; padding: 8px 12px; }
.prem-benefit-ic { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-soft), #fff); border: 1px solid var(--line-gold); box-shadow: 0 6px 18px rgba(198,166,100,.16); }
.prem-benefit h4 { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: #3a2b30; margin: 0 0 8px; }
.prem-benefit p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
/* Sektsioonid */
.prem-section { padding: 64px 0 20px; }
.prem-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.prem-h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); color: #3a2b30; margin: 0; letter-spacing: -.3px; }
.prem-sec-sub { color: var(--ink-soft); margin: 8px 0 0; }
.prem-link { color: var(--gold-dark); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.prem-link:hover { color: var(--rose); }
/* Kategooriakaardid */
.prem-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prem-cat-card { position: relative; border-radius: 24px; overflow: hidden; height: 200px; display: block; text-decoration: none; box-shadow: 0 12px 30px rgba(168,74,104,.10); }
.prem-cat-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; }
.prem-cat-card:hover .prem-cat-img { transform: scale(1.06); }
.prem-cat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,20,25,.02), rgba(40,20,25,.55)); }
.prem-cat-body { position: absolute; left: 20px; bottom: 18px; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.prem-cat-name { font-family: var(--font-head); font-size: 22px; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.prem-cat-cnt { font-size: 13px; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
/* Salongikaardid */
.prem-salon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prem-salon-card { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(168,74,104,.07); transition: transform .18s ease, box-shadow .18s ease; position: relative; }
.prem-salon-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(168,74,104,.16); }
.prem-salon-img { display: block; height: 200px; overflow: hidden; }
.prem-salon-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prem-salon-card:hover .prem-salon-img img { transform: scale(1.05); }
.prem-fav { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 19px; color: var(--rose); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .15s ease; }
.prem-fav:hover { transform: scale(1.12); }
.prem-salon-body { padding: 18px 20px 20px; }
.prem-salon-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.prem-salon-body h3 a { color: #3a2b30; text-decoration: none; }
.prem-salon-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.prem-salon-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prem-rating { font-weight: 700; color: var(--gold-dark); font-size: 14px; }
.prem-rating em { font-style: normal; color: var(--ink-soft); font-weight: 500; }
.prem-book-btn { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff !important; border-radius: 999px; padding: 9px 20px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.prem-book-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(217,104,141,.35); }
.prem-empty { grid-column: 1/-1; text-align: center; color: var(--ink-soft); padding: 30px; }
/* Salongiomanike CTA */
.prem-owner { background: linear-gradient(135deg, #f3d9de 0%, #eec9d1 55%, #e8bcc6 100%); margin: 60px 0 20px; border-radius: 0; }
.prem-owner-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 70px 24px; }
.prem-owner-eyebrow { font-size: 12px; letter-spacing: 3px; font-weight: 700; color: var(--rose-deep); text-transform: uppercase; margin-bottom: 12px; display: inline-block; }
.prem-owner-h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(30px, 3.6vw, 42px); color: #4a2530; margin: 0 0 14px; }
.prem-owner-sub { font-size: 16px; color: #6d4a54; margin: 0 0 22px; }
.prem-owner-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 30px; font-size: 14.5px; color: #5d3a44; font-weight: 600; }
.prem-owner-btn { display: inline-block; background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff !important; border-radius: 999px; padding: 15px 40px; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 26px rgba(198,166,100,.4); transition: transform .15s ease, box-shadow .15s ease; }
.prem-owner-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(198,166,100,.5); }
.prem-owner-img img { width: 100%; max-width: 460px; aspect-ratio: 4/3; object-fit: cover; border-radius: 26px; box-shadow: 0 26px 60px rgba(120,50,70,.28); }
/* Paketid */
.prem-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.prem-plan { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; position: relative; box-shadow: 0 10px 30px rgba(168,74,104,.06); }
.prem-plan-popular { border: 2px solid var(--gold); box-shadow: 0 18px 46px rgba(198,166,100,.22); }
.prem-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 5px 14px; white-space: nowrap; }
.prem-plan h3 { font-family: var(--font-head); font-size: 22px; margin: 0 0 6px; color: #3a2b30; }
.prem-plan-desc { font-size: 13.5px; color: var(--ink-soft); min-height: 40px; margin-bottom: 14px; }
.prem-plan-price { font-size: 34px; font-weight: 800; color: var(--rose-deep); margin-bottom: 18px; }
.prem-plan-price em { font-size: 14px; font-style: normal; font-weight: 500; color: var(--ink-soft); }
.prem-plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.prem-plan ul li { font-size: 14px; color: var(--ink); padding-left: 26px; position: relative; }
.prem-plan ul li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-dark); font-weight: 700; }
.prem-plan-btn { width: 100%; border: 0; cursor: pointer; border-radius: 999px; padding: 13px; font-size: 15px; font-weight: 700; font-family: var(--font-body); background: var(--blush); color: var(--rose-deep); transition: all .15s ease; }
.prem-plan-popular .prem-plan-btn { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; }
.prem-plan-btn:hover { transform: translateY(-1px); }
/* Mobiil */
@media (max-width: 1000px) {
  .prem-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .prem-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .prem-salon-grid { grid-template-columns: repeat(2, 1fr); }
  .prem-owner-in { grid-template-columns: 1fr; padding: 48px 24px; }
  .prem-plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prem-search { grid-template-columns: 1fr; gap: 6px; }
  .prem-search-sep { display: none; }
  .prem-search-btn { padding: 15px; }
  .prem-benefits-grid, .prem-cat-grid, .prem-salon-grid { grid-template-columns: 1fr; }
  .prem-owner-checks { grid-template-columns: 1fr; }
  .prem-hero-in { padding-top: 28px; }
}

/* ============================================================
   PREMIUM HEADER + FOOTER
   ============================================================ */
.prem-header { position: sticky; top: 0; z-index: 200; background: rgba(250,243,240,.9); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(217,104,141,.10); }
.prem-header-in { display: flex; align-items: center; gap: 28px; height: 74px; }
.prem-brand { display: block; }
.prem-nav { display: flex; gap: 26px; margin: 0 auto; }
.prem-nav a { color: #5d4a50; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color .15s ease; position: relative; padding: 6px 0; }
.prem-nav a:hover { color: var(--rose-deep); }
.prem-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rose), var(--gold)); transform: scaleX(0); transition: transform .2s ease; }
.prem-nav a:hover::after { transform: scaleX(1); }
.prem-header-right { display: flex; align-items: center; gap: 14px; }
.prem-lang { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none; padding: 5px 9px; border-radius: 999px; }
.prem-lang.active { background: var(--blush); color: var(--rose-deep); }
.prem-fav-link { font-size: 21px; color: var(--rose-deep); text-decoration: none; transition: transform .15s ease; }
.prem-fav-link:hover { transform: scale(1.15); }
.prem-login-btn { border: 0; background: transparent; color: #5d4a50; font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--font-body); text-decoration: none; }
.prem-login-btn:hover { color: var(--rose-deep); }
.prem-gold-pill { display: inline-block; background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff !important; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(198,166,100,.35); transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; }
.prem-gold-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(198,166,100,.45); }
/* Footer */
.prem-footer { background: linear-gradient(180deg, #faf3f0, #f6e8ec); border-top: 1px solid rgba(217,104,141,.10); padding: 60px 0 0; margin-top: 70px; }
.prem-footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.prem-footer-brand .prem-footer-tag { font-family: var(--font-head); font-size: 17px; color: var(--rose-deep); margin: 0; }
.prem-footer-col h4 { font-family: var(--font-head); font-size: 16px; color: #3a2b30; margin: 0 0 14px; }
.prem-footer-col { display: flex; flex-direction: column; gap: 9px; }
.prem-footer-col a { color: var(--ink-soft); font-size: 14px; text-decoration: none; transition: color .15s ease; }
.prem-footer-col a:hover { color: var(--rose-deep); }
.prem-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(217,104,141,.10); padding: 20px 0 24px; font-size: 13px; color: var(--ink-soft); }
.prem-footer-bottom a { color: var(--ink-soft); text-decoration: none; margin-left: 14px; }
.prem-footer-bottom a:hover { color: var(--rose-deep); }
.prem-footer-legal { display: flex; flex-wrap: wrap; }
@media (max-width: 1000px) {
  /* NB! Selektor peab olema `.site-header .prem-header-in`, mitte lihtsalt
     `.prem-header-in`. Rida 113 seab `.site-header .container { height: 70px }`
     ja see on spetsiifilisem (kaks klassi vs. üks) – meediapäring
     spetsiifilisust ei lisa. Ühe klassiga reegel jäi seetõttu jõustumata,
     päis jäi 70px kõrguseks ja teisele reale murdunud sisu joonistus lehe
     sisu PEALE. Täpselt see oli ekraanipildil näha. */
  .site-header .prem-header-in { flex-wrap: wrap; height: auto; min-height: 70px; padding: 12px 16px; gap: 12px; }
  /* 900px ja allpool võtab menüü üle burger-plokk (vt. MOBIILIPÄIS allpool) */
  .prem-footer-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .prem-gold-pill { padding: 8px 14px; font-size: 13px; }
  .prem-footer-in { grid-template-columns: 1fr; }
}

/* Kontakt */
.prem-contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.prem-contact-info { display: flex; flex-direction: column; }
@media (max-width: 900px) { .prem-contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Ligipääsetavus (WCAG) – fookus, liikumine, kontrast, skip-link
   ============================================================ */
:root {
  /* Kontrastitokenid: tekstikasutuseks piisava kontrastsusega toonid
     (WCAG AA: 4.5:1 tavatekstile) – kaunistusvärvid jäävad muutumatuks */
  --gold-text: #8a6a12;   /* 5.1:1 valgel – kuldse teksti asemel */
  --rose-btn: #bf4a70;    /* 4.7:1 valge tekstiga – nuppude taust */
}

/* Klaviatuurifookus – nähtav rõngas ainult klaviatuuriga liikujale */
:focus-visible {
  outline: 3px solid var(--rose-btn);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.prem-nav a:focus-visible, .side-link:focus-visible, .card:focus-visible, .search-btn:focus-visible {
  outline: 3px solid var(--rose-btn);
  outline-offset: 2px;
}

/* Vähendatud liikumine */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* Liigu sisu juurde – link (klaviatuurikasutajale) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--rose-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  position: fixed;
}

/* Kontrasti parandused */
.prem-gold-pill { background: linear-gradient(135deg, #e2c98a, var(--gold)); color: #3f2f0a !important; }
a.prem-link, .prem-link { color: var(--rose-deep); }
.text-gold, .gold-text { color: var(--gold-text) !important; }

/* ============================================================
   MOBIILIPÄIS – päris avanev menüü
   ============================================================
   MIS OLI KATKI: laiusel ≤1000px pandi .prem-nav `order:3; width:100%`
   (eraldi reale), aga ≤700px reegel seadis .prem-header-in
   `flex-wrap: nowrap` – siis EI SAA nav eraldi reale minna. Logo, kogu
   menüü ja parem nuppude plokk surusid end ühele reale ja menüüst jäi
   pool ekraanist välja. Just see oli „menüü kaob pooleldi ära".

   NÜÜD: alla 900px on menüü burger-nupu taga avanev paneel.
   Ilma JS-ita jääb menüü tavapäraselt nähtavaks (paneel peidetakse ainult
   siis, kui app.js on lisanud <html class="js">), nii et menüü ei kao
   kunagi ligipääsmatuks.
   ============================================================ */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-header .prem-header-in { flex-wrap: wrap; height: auto; min-height: 64px; padding: 10px 16px; gap: 10px; }

  /* Burger-nupp */
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto; order: 2;
    min-height: 44px; padding: 8px 14px;
    background: #fff; border: 1px solid rgba(217,104,141,.25);
    border-radius: 999px; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 700;
    color: var(--rose-deep);
  }
  .nav-toggle-bars { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: ''; position: absolute; left: 0; width: 18px; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

  /* Menüü paneelina. Peidus AINULT siis, kui layouti inline-skript on
     nupu edukalt sidunud (see lisab <html class="js">). Kui skript ei jooksnud
     või nuppu lehel pole, jääb menüü tavapäraselt nähtavaks – kunagi ei teki
     olukorda, kus menüü on peidus ja avada ei saa. */
  .prem-nav { order: 3; width: 100%; margin: 0; }
  html.js .prem-nav { display: none; }
  html.js .prem-nav.open { display: flex; }
  .prem-nav {
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border: 1px solid rgba(217,104,141,.18);
    border-radius: 16px; padding: 6px;
    box-shadow: 0 14px 34px rgba(168,74,104,.14);
  }
  .prem-nav a {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 14px; font-size: 15.5px; border-radius: 12px;
  }
  .prem-nav a:hover, .prem-nav a:focus-visible { background: var(--blush-soft); }
  /* Allajoone-animatsioon ei sobi vertikaalsesse menüüsse */
  .prem-nav a::after { display: none; }

  /* Sisselogimine, halduspaneel ja väljalogimine on ALATI NÄHTAVAD.
     ────────────────────────────────────────────────────────────────
     Eelmises versioonis peitsin selle ploki menüü sisse
     (html.js .prem-header-right { display:none }). See oli viga: kui menüü
     mingil põhjusel ei avane – vana vahemälust JS, skriptiviga, aeglane
     võrk –, ei saa kasutaja enam sisse ega välja logida. Autentimisnupud
     ei tohi sõltuda JavaScriptist ega menüü olekust.
     Burgeri taha jäävad ainult tavalised menüülingid, mille kadumine on
     ebamugavus, mitte lukustus. */
  .prem-header-right {
    order: 4; width: 100%;
    justify-content: flex-start; flex-wrap: wrap;
    gap: 8px; padding-top: 2px;
  }
  .prem-header-right .prem-login-btn,
  .prem-header-right .prem-gold-pill { font-size: 13.5px; padding: 0 14px; }

  /* Avatud menüü ei tohi pikas nimekirjas ekraanist välja joosta */
  .prem-nav { max-height: calc(100vh - 150px); overflow-y: auto; }

  /* Puutealade miinimum 44×44px (WCAG 2.5.8) */
  .prem-login-btn, .prem-gold-pill, .prem-lang, .btn, .side-link {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

@media (max-width: 420px) {
  .prem-brand img { height: 38px !important; }
  .nav-toggle-label { display: none; }
  .nav-toggle { padding: 8px 12px; }
}

/* Menüü vahejooned (admini/dashboardi külgmenüü) */
.side-sep { height: 1px; background: rgba(216,104,141,.15); margin: 8px 10px; }

/* Esiletõstetud (soovitatud) salongi kuldne täht – väikese overlapiga pildi nurgal */
.prem-salon-img { position: relative; display: block; }
.prem-featured-star {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd76a, #d8a820);
  color: #5a4300; font-size: 17px; line-height: 30px; text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* Salongi lehe kuldne täht – väikese overlapiga logo nurgal */
.salon-star { top: -6px; left: -6px; width: 26px; height: 26px; line-height: 26px; font-size: 15px; }

/* Menüü lugemata-märge (badge) */
.menu-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: #e05b5b; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.side-link .menu-badge { float: right; margin-top: 2px; }

/* Paketid – paindlik paigutus (1–4 veergu olenevalt pakettide arvust) */
.prem-plans {
  display: grid;
  /* min(100%, 260px): kitsas konteineris kahaneb veerg alla 260px asemel
     sellest välja ulatumise. Ilma min()-ita tekitab auto-fit ülevoolu. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
@media (max-width: 1000px) {
  .prem-plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}
@media (max-width: 600px) {
  .prem-plans { grid-template-columns: 1fr; }
}

/* ============================================================
   PWA – installimisriba
   ============================================================
   Ilmub alt, alles 20 sekundi pärast ja ainult siis, kui rakendus ei ole
   juba avaekraanil. Jääb altpoolt turvaala (iPhone'i kodunupu riba) peale
   env(safe-area-inset-bottom) abil.
   ============================================================ */
.pwa-install {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid rgba(217,104,141,.18);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(168,74,104,.20);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.pwa-install.show { transform: translateY(0); opacity: 1; }
.pwa-install-icon { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; }
.pwa-install-text { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--ink); min-width: 0; }
.pwa-install-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pwa-install-btn {
  border: 0; cursor: pointer; min-height: 44px; padding: 0 18px;
  background: linear-gradient(135deg, var(--rose-btn, #bf4a70), var(--rose-deep));
  color: #fff; font-weight: 700; font-size: 14px; border-radius: 12px;
  font-family: var(--font-body);
}
.pwa-install-close {
  border: 0; background: transparent; cursor: pointer; min-height: 44px;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600;
  font-family: var(--font-body); padding: 0 6px;
}
@media (max-width: 480px) {
  .pwa-install { flex-wrap: wrap; }
  .pwa-install-text { flex: 1 1 100%; order: 2; }
  .pwa-install-actions { flex: 1 1 100%; order: 3; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-install { transition: none; }
}

/* Avaekraanilt avatud rakenduses on brauseririba puudu – anna päisele
   veidi rohkem ülemist ruumi (iPhone'i „notch"). */
@media (display-mode: standalone) {
  .prem-header { padding-top: env(safe-area-inset-top, 0px); }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Teenuste nimekirja kategooriapäis (dashboard/services) */
.svc-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 18px;
  background: linear-gradient(90deg, var(--blush-soft), rgba(255,255,255,0));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--rose-deep);
  position: sticky; top: 0; z-index: 2;   /* päis jääb pika listi kerimisel näha */
}
.svc-group-head:first-child { border-top: 0; }
.svc-group-count {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; font-size: 11px; letter-spacing: 0; color: var(--ink-soft);
}

/* Ekraanilugejale nähtav, visuaalselt peidetud (klaviatuurifookus töötab).
   display:none oleks raadionupu klaviatuurilt kättesaamatuks teinud. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Valitud kujundusmalli kaart – sama loogika nagu paketikaartidel */
.tpl-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,166,100,.2); }
.tpl-card input.sr-only:focus-visible + .preview { outline: 3px solid var(--rose-deep); outline-offset: 2px; }

/* ============================================================
   MOBIIL: iPhone'i alumine brauseririba
   ============================================================
   Safari (ja Chrome iOS-is) katab lehe alaosa ~90px kõrguse ribaga
   (tagasi/edasi/jaga/kaardid). Kui viimane element on täpselt lehe lõpus,
   jääb see riba alla ja seda ei saa vajutada – nii ei pääsenud telefonis
   „Seaded" menüüpunktini ega lehe lõpus olevate nuppudeni.

   Lahendus: alumine polster, mis arvestab ka seadme turvaala
   (env(safe-area-inset-bottom)). 100dvh/px asemel kasutame lihtsat polstrit,
   sest see töötab kõikjal ühtemoodi.
   ============================================================ */
@media (max-width: 900px) {
  /* Sisu lõpus alati ruumi, et brauseririba ei kataks midagi olulist */
  .dash-main,
  main#sisu {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* Külgmenüü on fixed ja kerib ise – ka selle lõpus peab ruumi olema,
     muidu jääb viimane punkt („Seaded", „Teavitused") riba taha. */
  .dash-side {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  /* Kasutajablokk menüü all ei tohi olla `margin-top:auto`-ga põhja surutud,
     muidu tekib keritavas menüüs tühi ala ja viimased lingid jäävad kaugele */
  .dash-side .side-user { margin-top: 16px; }
}

/* ============================================================
   ADMIN: PAKETTIDE LEHT MOBIILIS
   ============================================================
   Ekraanipildil oli näha, et kahe veeru paigutus surus paketikaardi ja
   „Uus pakett" vormi kõrvuti ~180px laiustesse tulpadesse: pealkiri murdus
   („Uus / pakett"), nupp kattis teksti ja funktsioonisildid olid üksteise peal.
   Alla 900px lähevad need üksteise alla.
   ============================================================ */
@media (max-width: 900px) {
  /* !important on siin VAJALIK: paljudes vaadetes on veergude arv määratud
     inline-stiiliga (style="grid-template-columns:1.4fr 1fr"), mis võidab
     tavalise meediapäringu. Ilma selleta jäid kaks-kolm veergu ka telefonis
     püsima ja leht läks ekraanist laiemaks. */
  .grid-2, .grid-3, .grid-4, .prem-plans, .prem-benefits-grid,
  .prem-owner-in, .prem-owner-checks, .prem-footer-in {
    grid-template-columns: 1fr !important;
  }

  /* Kaardi päis: pealkiri ja nupp ei tohi kattuda */
  .card-head {
    flex-wrap: wrap; gap: 8px;
    align-items: center;
  }
  .card-head h3 { font-size: 17px; line-height: 1.3; }

  /* Paketi funktsioonisildid ühtlaselt reas, mitte virnas */
  .plan-feat-tags, .pr-feat { display: flex; flex-wrap: wrap; gap: 6px; }
  .plan-feat-tags .tag, .pr-feat .tag { white-space: normal; }
}

/* ============================================================
   PAKETTIDE VÕRDLUSTABEL
   ============================================================
   Kaks paigutust ühest HTML-ist:
     • lauaarvutis – klassikaline tabel, populaarne veerg esile tõstetud
     • telefonis   – iga funktsioon kaardina, paketid kõrvuti selle all
                     (data-plan atribuut annab veerule nime)
   Nii ei pea kasutaja telefonis horisontaalselt kerima ega arvama, milline
   linnuke millisesse veergu kuulub.
   ============================================================ */
.plan-table-wrap {
  background: #fff;
  border: 1px solid rgba(217,104,141,.16);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(168,74,104,.10);
  /* NB! MITTE overflow: hidden. „Populaarseim" märgis on positsioneeritud
     päise ülemisele servale (translateY(-50%)) ja hidden lõikas selle ära –
     arvutis oli PRO märgis nähtamatu. Ümarad nurgad hoiab paigas see, et
     esimesel ja viimasel lahtril on oma raadius (allpool). */
  overflow: visible;
  /* Ruumi märgisele, mis ulatub kastist veidi välja */
  margin-top: 12px;
}
.plan-table thead th:first-child { border-top-left-radius: 20px; }
.plan-table thead th:last-child { border-top-right-radius: 20px; }
.plan-table tfoot td:first-child { border-bottom-left-radius: 20px; }
.plan-table tfoot td:last-child { border-bottom-right-radius: 20px; }
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

/* --- Päis --- */
.plan-table thead th {
  padding: 22px 16px 18px;
  text-align: center;
  vertical-align: bottom;
  background: linear-gradient(180deg, #fdf5f8, #fff);
  border-bottom: 1px solid rgba(217,104,141,.16);
  position: relative;
}
.plan-table thead th.plan-table-feat { background: #fff; }
.plan-table-name {
  display: block;
  font-family: var(--font-display, Georgia), serif;
  font-size: 19px; font-weight: 600; color: var(--ink);
  letter-spacing: .3px;
}
.plan-table-price {
  display: block; margin-top: 6px;
  font-size: 22px; font-weight: 800; color: var(--rose-deep);
}
.plan-table-price em { font-size: 12.5px; font-weight: 600; font-style: normal; color: var(--ink-soft); }
.plan-table-staff {
  display: block; margin-top: 4px;
  font-size: 12.5px; color: var(--ink-soft);
}
.plan-table-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%);
  z-index: 2;
  background: linear-gradient(135deg, #c6a664, #a8861c);
  color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(168,134,28,.3);
}

/* Populaarne veerg – peen kuldne raam, mitte kirev taust */
.plan-table th.is-popular,
.plan-table td.is-popular { background: #fffdf7; }
.plan-table th.is-popular { box-shadow: inset 0 3px 0 var(--gold); }

/* --- Read --- */
.plan-table tbody tr { border-bottom: 1px solid #f6eef1; }
.plan-table tbody tr:hover { background: #fefafb; }
.plan-table tbody tr:last-child { border-bottom: 0; }
.plan-table td { padding: 14px 16px; text-align: center; vertical-align: middle; }
.plan-table-feat { text-align: left !important; width: 38%; padding-left: 24px !important; }
.plan-table-feat strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.plan-table-hint { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

.plan-yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(77,158,111,.12); color: #3d7d58;
  font-size: 14px; font-weight: 800;
}
.plan-no { color: #d6c8cc; font-size: 16px; }

.plan-table tfoot td { padding: 18px 16px 22px; background: #fdf9fa; }
.plan-table-note {
  margin: 16px 0 0; text-align: center;
  font-size: 13px; color: var(--ink-soft);
}

/* --- Telefon: tabelist saavad kaardid --- */
@media (max-width: 820px) {
  .plan-table-wrap { border: 0; box-shadow: none; background: transparent; }
  .plan-table, .plan-table tbody, .plan-table tr, .plan-table td { display: block; width: 100%; }
  .plan-table thead, .plan-table tfoot { display: none; }

  .plan-table tbody tr {
    background: #fff;
    border: 1px solid rgba(217,104,141,.16);
    border-radius: 16px;
    margin-bottom: 12px;
    padding: 14px 16px;
    box-shadow: 0 8px 22px rgba(168,74,104,.07);
  }
  .plan-table tbody tr:hover { background: #fff; }

  .plan-table-feat {
    width: auto; padding: 0 0 10px !important;
    border-bottom: 1px solid #f6eef1; margin-bottom: 8px;
  }

  /* Iga linnuke saab paketi nime ette (data-plan) */
  .plan-table td:not(.plan-table-feat) {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; text-align: left; background: transparent !important;
  }
  .plan-table td:not(.plan-table-feat)::before {
    content: attr(data-plan);
    font-size: 13px; font-weight: 700; color: var(--ink-soft);
  }
  .plan-table td.is-popular::before { color: var(--gold-text); }
}

/* ============================================================
   SALONGI KOHANDATUD SISU – visuaalne isolatsioon
   ============================================================
   Isegi puhastatud HTML ei tohi lehe paigutust lõhkuda. Need reeglid
   hoiavad sisu oma kastis: pikad sõnad murtakse, pildid ja tabelid ei
   ulatu üle serva, ja miski ei saa lehte katta.
   ============================================================ */
.custom-section-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: auto;           /* lai tabel kerib oma kastis, mitte lehte laiaks */
  position: relative;         /* absoluutne sisu jääb siia sisse, mitte lehele */
  isolation: isolate;         /* oma z-index-kontekst – ei saa päisest üle */
  z-index: 0;
}
.custom-section-content img,
.custom-section-content table { max-width: 100%; height: auto; }
.custom-section-content * { max-width: 100%; }
/* Kindluse mõttes ka siin: ükski süstitud element ei saa lehte katta */
.custom-section-content [style*="position"] { position: static !important; }

/* Mobiilimenüü taustakiht. Nähtamatu, aga klõpsatav – iOS ei tekita
   klõpsusündmust tavalisel elemendil, seega ilma selleta ei saanud menüüd
   telefonis väljapoole vajutades sulgeda. z-index jääb päisest (200) allapoole,
   et menüü ise ja logo oleksid endiselt klõpsatavad. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(51, 40, 43, .18);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 901px) { .nav-backdrop { display: none; } }

/* ============================================================
   KALENDRI KUUVAADE
   ============================================================
   Kuuvaate lahtri päevanumber kasutas varem klassi .cal-col-head, millel on
   nädala- ja päevavaate joondamiseks fikseeritud 44px kõrgus ja
   flex-tsentreerimine. Kuuvaates lõhkus see lahtrid – number oli keskel,
   sündmused surutud ja lahtri kõrgus vale. Nüüd on oma klass.
   ============================================================ */
.cal-day-num {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 8px 4px;
  color: var(--ink);
  border-bottom: 1px solid #f6eef0;
  background: var(--blush-soft);
}
.cal-day-num .badge { font-size: 9.5px; padding: 1px 6px; margin-left: 4px; }

/* Kuuvaate ruudustik: 7 võrdset veergu, mis ei aja lehte laiaks.
   NB! .cal-grid on vaikimisi display:flex (nädala/päeva vaade) – kuuvaates
   PEAB olema display:grid, muidu lähevad kõik 42 päeva + 7 päist ühte ritta. */
.cal-grid[data-view="month"] { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.cal-grid[data-view="month"] .cal-col { min-width: 0; min-height: 110px; border-left: none; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.cal-grid[data-view="month"] .cal-col-head { height: auto; padding: 8px 6px; font-weight: 700; font-size: 12px; text-align: center; background: var(--blush-soft); border-right: 1px solid var(--line); }

@media (max-width: 720px) {
  /* Telefonis on 7 veergu loetamatud – päevanumber jääb, sündmustest
     näidatakse ainult arvu täpina, klõps viib päevavaatesse. */
  .cal-grid[data-view="month"] .cal-col { min-height: 64px; }
  .cal-grid[data-view="month"] .cal-month-chip {
    font-size: 0; padding: 0; height: 6px; width: 6px;
    border-radius: 50%; display: inline-block; margin: 1px;
  }
  .cal-grid[data-view="month"] .cal-month-evs {
    flex-direction: row !important; flex-wrap: wrap; padding: 2px 4px !important;
  }
  .cal-day-num { padding: 4px 5px 2px; font-size: 11px; }
  .cal-day-num .badge { display: none; }
}

/* ============================================================
   SUPERADMINI MÄRKMED
   ============================================================
   Kaardipõhine paigutus nagu iPhone'i Notesis: kinnitatud ees, värvid
   eristamiseks, tekst säilitab reavahetused.
   ============================================================ */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.note-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(168,74,104,.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note-card.pinned { border-color: var(--gold); box-shadow: 0 8px 22px rgba(198,166,100,.18); }
.note-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.note-head strong { font-size: 15px; line-height: 1.35; word-break: break-word; }
.note-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.note-actions .btn { padding: 2px 6px; min-height: 0; }
.note-body {
  font-size: 13.5px; line-height: 1.65; color: var(--ink-soft);
  word-break: break-word; max-height: 220px; overflow-y: auto;
}
.note-date { font-size: 11.5px; color: #b3a5a8; margin-top: auto; }

.note-rose   { background: #fdf5f8; border-color: rgba(217,104,141,.25); }
.note-gold   { background: #fdfaf1; border-color: rgba(198,166,100,.35); }
.note-green  { background: #f4faf6; border-color: rgba(77,158,111,.28); }
.note-blue   { background: #f4f7fd; border-color: rgba(90,120,190,.25); }

/* ══════════════════════════════════════════════════════════════════════
   AVALEHE TUME HERO
   ══════════════════════════════════════════════════════════════════════
   Vana .prem-hero jääb faili alles (teised lehed võivad seda kasutada),
   aga avaleht kasutab nüüd .hero-dark. Uued reeglid on faili LÕPUS, seega
   nad võidavad kaskaadis – vanu ridu ei ole vaja kustutada ega otsida.
   ══════════════════════════════════════════════════════════════════════ */

.hero-dark {
  position: relative;
  overflow: hidden;
  background: #2a0f1c;                 /* varuvärv, kui foto ei lae */
  isolation: isolate;
}
.hero-dark-img {
  position: absolute; inset: 0;
  background-size: cover;
  /* Kadreerimispunkt on MODELLI NÄGU, mõõdetuna fotolt: x ≈ 67–85%,
     y ≈ 4–37%. Kui brauser pilti kärbib, hoiab see punkti alati kaadris.
     `center` oleks nihutanud kaadri allapoole ja lõiganud näo ära. */
  background-position: 76% 26%;
}
/* Tume kile: vasakul peaaegu läbipaistmatu (tekst loetav), paremal
   läbipaistev (foto paistab). Kaks kihti – horisontaalne + üldine
   tumendus – annavad ühtlasema tulemuse kui üks gradient. */
.hero-dark-scrim {
  position: absolute; inset: 0;
  /* Häälestatud hero-foto järgi: modell on paremal, tühi roosa sein vasakul.
     Kile on tugev kuni ~42% (teksti ala) ja hääbub kiiresti, nii et
     modelli nägu ja õlad jäävad heledaks. Viimane peatus ei ole null –
     kerge ploomikas toon üle kogu pildi seob hele foto tumeda heroga kokku. */
  /* Kile lõpeb ENNE nägu. Nägu algab ~67% pealt, seega on kile 62% juures
     juba peaaegu läbipaistev. Varem oli seal veel .42 – sellest jäigi nägu
     hämaraks. Ülemine vertikaalne kiht on samuti eemaldatud, sest just seal
     nägu asub (y ≈ 4–37%). */
  background:
    linear-gradient(90deg,
      rgba(30,8,19,.95) 0%,
      rgba(32,9,20,.90) 30%,
      rgba(40,12,25,.66) 44%,
      rgba(58,16,35,.30) 56%,
      rgba(78,21,46,.10) 66%,
      rgba(90,25,54,.04) 100%),
    linear-gradient(180deg, rgba(22,6,14,0) 0%, rgba(22,6,14,.18) 78%, rgba(22,6,14,.28) 100%);
}
.hero-dark-in {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 32px;
  padding-top: 60px; padding-bottom: 68px;
  min-height: 420px;
}
.hero-dark-text { flex: 1 1 auto; max-width: 560px; }

.hero-dark-eyebrow {
  display: inline-block;
  font-size: 11px; letter-spacing: 2px; font-weight: 700;
  color: #e9c98a; margin-bottom: 16px;
}
.hero-dark-h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.1; font-weight: 600;
  color: #fff; margin: 0 0 14px;
}
.hero-dark-accent { display: block; color: var(--rose-soft); }
.hero-dark-sub {
  font-size: 15px; line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 430px; margin: 0 0 24px;
}

/* ---------- Otsinguriba ---------- */
.hero-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 16px;
  padding: 7px 7px 7px 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  max-width: 560px;
}
.hero-search-field {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 0; min-width: 0; padding: 0 6px;
}
.hero-search-ic { font-size: 15px; opacity: .75; flex-shrink: 0; }
.hero-search-field input,
.hero-search-field select {
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; color: var(--ink);
  width: 100%; min-width: 0; padding: 11px 0;
  appearance: none; cursor: pointer;
}
.hero-search-field input { cursor: text; }
.hero-search-field input::placeholder { color: #b4a8ac; }
.hero-search-sep { width: 1px; height: 26px; background: var(--line); flex-shrink: 0; }
.hero-search-btn {
  flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--rose-btn); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 13px 28px; border-radius: 12px;
  transition: background .15s;
}
.hero-search-btn:hover { background: var(--rose-deep); }

.hero-dark-trust {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 16px; font-size: 12.5px;
  color: rgba(255,255,255,.7);
}

/* ---------- Ujuv salongikaart ---------- */
.hero-card {
  flex: 0 0 300px;
  display: flex; gap: 12px; align-items: stretch;
  background: rgba(255,255,255,.97);
  border-radius: 16px; padding: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  text-decoration: none; color: var(--ink);
  transition: transform .18s;
}
.hero-card:hover { transform: translateY(-3px); }
.hero-card-img {
  flex: 0 0 84px; height: 96px; border-radius: 11px; overflow: hidden;
  background: var(--blush);
}
.hero-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-card-rate { font-size: 12px; color: var(--gold-text); font-weight: 700; }
.hero-card-rate .muted { color: var(--ink-soft); font-weight: 400; }
.hero-card-name {
  font-weight: 700; font-size: 14.5px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-card-city { font-size: 12px; color: var(--ink-soft); }
.hero-card-btn {
  margin-top: auto; align-self: flex-start;
  background: var(--rose-btn); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: 9px;
}

/* ---------- Kitsam ekraan ---------- */
@media (max-width: 900px) {
  /* Kaart läheks kitsaks ja kataks teksti – peidame ta ära.
     Sama salong on niikuinii allpool "Soovitatud" sektsioonis. */
  .hero-card { display: none; }
  .hero-dark-in { min-height: 0; padding-top: 46px; padding-bottom: 50px; }
  .hero-dark-img { background-position: 62% center; }
}
@media (max-width: 620px) {
  /* Telefonis ei mahu kolm asja ühele reale – otsing läheb virna.
     Nupp on täislaiuses, sest see on peamine tegevus. */
  .hero-search { flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; }
  .hero-search-sep { width: 100%; height: 1px; }
  .hero-search-btn { width: 100%; padding: 14px; }
  /* Telefonis on foto kitsas ja tekst läheb selle PEALE, mitte kõrvale.
     Ülemine osa jääb heledam (modell paistab), alumine tumeneb teksti alla. */
  .hero-dark-img { background-position: 74% 14%; }
  .hero-dark-scrim {
    background: linear-gradient(180deg,
      rgba(30,9,19,.42) 0%,
      rgba(32,10,20,.78) 34%,
      rgba(35,10,22,.94) 62%,
      rgba(35,10,22,.97) 100%);
  }
  .hero-dark-in { padding-top: 110px; }
  .hero-dark-trust { gap: 12px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   KATEGOORIAPLAADID (avaleht)
   ══════════════════════════════════════════════════════════════════════ */
.cat-section { padding-top: 40px; padding-bottom: 8px; }

/* auto-fit tähendab, et plaate mahub ridadele nii palju kui ekraanile sobib –
   kuus, neli või kaks. Ei ole vaja iga murdepunkti eraldi kirjeldada ega
   karta, et viimane plaat jääks üksinda ripakile nagu paketikaartidega juhtus. */
.cat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.cat-tile {
  display: block; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #fff;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--rose);
  box-shadow: 0 10px 26px rgba(217,104,141,.16);
}
.cat-tile-img {
  display: block; height: 104px;
  background-size: cover; background-position: center;
  background-color: var(--blush);
}
.cat-tile-body { display: block; padding: 10px 12px 12px; }
.cat-tile-name { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.cat-tile-cnt  { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

@media (max-width: 560px) {
  .cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-tile-img { height: 88px; }
}

/* ══════════════════════════════════════════════════════════════════════
   "MIKS BRONEERIDA LOREAS" – horisontaalne riba
   ══════════════════════════════════════════════════════════════════════
   Vana paigutus oli neli suurt kaarti vertikaalse ikooniga, mis võttis
   pool ekraani. See on tugiinfo, mitte peasisu – nüüd üks kompaktne riba. */
.why-band { background: var(--blush-soft); padding: 42px 0; margin-top: 20px; }
.why-title {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 600;
  color: var(--ink); margin: 0 0 24px; text-align: center;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px 26px;
}
.why-item { display: flex; gap: 12px; align-items: flex-start; }
.why-ic {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--rose-deep);
}
.why-item h4 { margin: 2px 0 3px; font-size: 14px; font-weight: 700; color: var(--ink); }
.why-item p  { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 620px) {
  .why-band { padding: 32px 0; }
  .why-grid { gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   AVALEHE REDISAIN v2 – tume hero, tumedad ribad, 4 paketti
   ══════════════════════════════════════════════════════════════════════
   Kõik reeglid on faili LÕPUS ja võidavad kaskaadis. Vanad .prem-* reeglid
   jäävad alles, sest neid kasutavad ka teised lehed (otsing, salongi leht).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --hp-pink: #ef5c79;
  --hp-pink-d: #df355f;
  --hp-pink-l: #ff93aa;
  --hp-dark: #080b1d;
  --hp-dark2: #160a19;
  --hp-gold: #f6c2a4;
}

/* ---------- Päis hero peal ----------
   Maketil on päis hero SEES, läbipaistev ja valge tekstiga. Layout renderdab
   päise enne sisu, seega kasutame :has() – see valib päise selle järgi, mis
   lehel ALLPOOL on. Kui brauser :has()-i ei toeta, jääb päis tavaliseks
   (leht töötab, ainult päis ei ole läbipaistev) – midagi ei lagune. */
body:has(.hp-hero) .site-header {
  position: absolute; top: 0; left: 0; right: 0;
  /* z-index PEAB olema üle .nav-backdrop (150) väärtuse.
     Varem oli siin 30 – mobiilimenüü taustakiht kattis päise ära ja
     sulgemisnuppu ei saanud klõpsata. Menüü jäi lahti ja lehte ei saanud
     enam kasutada. */
  z-index: 200;
  background: transparent; border-bottom: 0; box-shadow: none;
}
body:has(.hp-hero) .site-header a,
body:has(.hp-hero) .site-header .prem-nav a,
body:has(.hp-hero) .site-header .nav-toggle-label { color: #fff; }
body:has(.hp-hero) .site-header .nav-toggle-bars,
body:has(.hp-hero) .site-header .nav-toggle-bars::before,
body:has(.hp-hero) .site-header .nav-toggle-bars::after { background: #fff; }
/* ⚠️ SAMA VIGA UUESTI, AGA MENÜÜPANEELI "KINNI" OLEKUS.
   Ülal olev reegel muudab KÕIK .prem-nav lingid valgeks – vajalik
   töölaual, kus .prem-nav on läbipaistev ja istub otse tumeda foto peal.
   Mobiilis (≤900px) on .prem-nav aga KOKKU KUKKUV PANEEL, mille taust on
   VALGE (vt. .prem-nav baasstiil), välja arvatud .open korral (tume taust,
   vt. allpool). Kui paneel on nähtaval ilma .open klassita – see juhtub
   ALATI enne JS-i käivitumist ja JÄÄB NII, kui skript ei jookse (nt. vana
   vahemälust JS, CSP takistus) –, sai tekst ülalpoolt VALGE värvi valgel
   taustal: nähtamatu, näeb välja nagu tühi valge kast. Taastame siin
   loetava teksti IGA KORD, kui paneel POLE .open (nii JS-eelne "kinni
   nähtav" olek kui ka teoreetiline vaikimisi olek); .open puhul kehtib
   allpool olev kõrgema eelisjärjestusega valge-teksti reegel ikka. */
@media (max-width: 900px) {
  body:has(.hp-hero) .site-header .prem-nav:not(.open) a { color: #5d4a50; }
}
/* Avatud mobiilimenüü.
   ⚠️ Klass on `open`, MITTE `is-open` – seda lisab layouti inline-skript
   (`nav.classList.toggle('open', open)`). Vale klassinimega jäi see reegel
   rakendumata: menüü taust oli valge (mobiili meediapäringust), aga lingid
   said ülalt valge värvi → VALGE TEKST VALGEL TAUSTAL. */
body:has(.hp-hero) .site-header .prem-nav.open {
  background: var(--hp-dark);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
body:has(.hp-hero) .site-header .prem-nav.open a { color: #fff; }
body:has(.hp-hero) .site-header .prem-nav.open a:hover,
body:has(.hp-hero) .site-header .prem-nav.open a:focus-visible {
  background: rgba(255,255,255,.10);
}
/* Sisselogimise plokk on mobiilis samuti päise all – tumedal taustal
   vajab ta oma tausta, muidu on nupud pildi peal loetamatud. */
@media (max-width: 900px) {
  body:has(.hp-hero) .site-header .prem-header-right {
    background: var(--hp-dark); border-radius: 12px;
    padding: 8px; margin-top: 8px;
  }
}

/* ---------- HERO ---------- */
.hp-hero {
  position: relative; overflow: hidden;
  min-height: 560px; color: #fff; background: #0d0710;
  display: flex; align-items: center;
}
.hp-hero-photo {
  position: absolute; inset: 0;
  background-size: cover;
  /* Fookus modelli näol (mõõdetud fotolt: x≈67–85%, y≈4–37%) */
  background-position: 76% 22%;
}
/* Kile: vasakul läbipaistmatu, hääbub ENNE nägu (~66%) */
.hp-hero-scrim {
  position: absolute; inset: 0;
  background:
    /* PARANDUS: kile oli nii tugev, et fotost ei paistnud midagi – hero
       nägi välja nagu ühevärviline pruun ristkülik. Nüüd on tumendus
       koondatud VASAKULE POOLELE ja lõpeb 58% juures täielikult, nii et
       modell on täies ulatuses näha. Teksti loetavuse tagab see, et tekst
       ise ei ulatu üle 560px, ehk jääb tumedasse ossa. */
    linear-gradient(90deg,
      rgba(6,2,10,.94) 0%, rgba(9,4,13,.88) 22%, rgba(14,5,17,.66) 38%,
      rgba(22,7,20,.34) 48%, rgba(30,9,25,.10) 56%, rgba(30,9,25,0) 64%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, transparent 30%, rgba(0,0,0,.18) 100%);
}
.hp-hero-in { position: relative; z-index: 3; width: 100%; padding: 128px 0 74px; }
/* Tekst peab jääma kile TUMEDASSE ossa (kuni ~48% laiusest).
   640px oli laial ekraanil liiga lai – rida ulatus heledasse alasse. */
.hp-hero-copy { max-width: min(560px, 46%); }
@media (max-width: 1100px) { .hp-hero-copy { max-width: 560px; } }
.hp-eyebrow {
  display: inline-block; font-size: 10.5px; letter-spacing: 2.2px;
  font-weight: 800; color: var(--hp-gold); margin-bottom: 14px;
}
.hp-h1 {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(2.1rem, 5.2vw, 3.45rem); line-height: 1.02;
  letter-spacing: -1px; margin: 0 0 14px;
  text-shadow: 0 3px 24px rgba(0,0,0,.35);
}
.hp-h1 span { display: block; color: var(--hp-pink-l); }
.hp-hero-sub {
  font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92);
  max-width: 500px; margin: 0 0 20px;
}

/* Otsing */
.hp-search { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hp-field {
  height: 48px; background: #fff; border-radius: 13px;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.16);
}
.hp-field .hp-ic { font-size: 15px; opacity: .7; flex-shrink: 0; }
.hp-field input, .hp-field select {
  border: 0; outline: 0; background: transparent; font: inherit;
  font-size: 14px; color: var(--ink); width: 100%; min-width: 0;
  appearance: none; cursor: pointer;
}
.hp-field input { cursor: text; }
.hp-field input::placeholder { color: #9d9096; }
.hp-field-city { width: 232px; } .hp-field-svc { width: 268px; }
.hp-search-btn {
  height: 48px; padding: 0 30px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--hp-pink), var(--hp-pink-d));
  color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.hp-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.72); }

/* Ujuv salongikaart */
.hp-float {
  position: absolute; z-index: 4; right: 3.2%; bottom: 20px; width: 392px;
  background: rgba(255,249,247,.97); color: #2b1721; border-radius: 14px;
  padding: 11px; display: flex; gap: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.28); text-decoration: none;
}
.hp-float img { width: 122px; height: 152px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.hp-float-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hp-float h3 { font-size: 17px; margin: 4px 0 4px; }
.hp-float-meta { font-size: 12px; color: #776c72; }
.hp-float .hp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.hp-float .hp-tag { font-size: 11px; padding: 4px 8px; background: #f9e4e8; border-radius: 5px; color: #805b66; }
.hp-float-btn {
  margin-top: auto; align-self: flex-start; background: var(--hp-pink);
  color: #fff; border-radius: 7px; padding: 9px 15px; font-size: 12px; font-weight: 700;
}

/* ---------- KATEGOORIARIBA ---------- */
.hp-cats { background: #fffaf8; padding: 22px 0 26px; position: relative; z-index: 5; }
.hp-sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 13px; gap: 12px; }
.hp-sec-title { font-family: var(--font-head); font-weight: 500; font-size: 23px; margin: 0; }
.hp-view { font-size: 12px; color: #a23f60; white-space: nowrap; }
/* PARANDUS: `auto-fit` andis laial ekraanil viis plaati ritta ja kuuenda
   üksinda teisele reale. Kuus kategooriat vajavad KINDLAT veergude arvu,
   mis jaguneb kuuega täpselt: 6 → 3 → 2. */
.hp-cat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1180px) { .hp-cat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .hp-cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp-cat {
  height: 100px; border: 1px solid #eadfe1; border-radius: 14px;
  position: relative; overflow: hidden; background: #fff;
  display: block; text-decoration: none; color: var(--ink);
  transition: transform .18s, box-shadow .18s;
}
.hp-cat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(40,15,28,.12); }
.hp-cat-img { position: absolute; right: 0; top: 0; width: 52%; height: 100%; background-size: cover; background-position: center; }
.hp-cat-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, #fff 34%, rgba(255,255,255,.86) 52%, rgba(255,255,255,0) 88%); }
.hp-cat-ic {
  position: absolute; z-index: 2; left: 12px; top: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 16px;
}
/* Nimi algab ikooni ALT, mitte selle kõrvalt – varem kattusid need
   kitsal plaadil ja tekst läks ikoonimulli alla. */
.hp-cat-name { position: absolute; z-index: 2; left: 12px; right: 46%; bottom: 12px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.hp-cat-cnt { display: block; font-size: 11px; font-weight: 400; color: #8a7a7d; }

/* ---------- SOOVITATUD (tume riba) ---------- */
.hp-featured { background: linear-gradient(110deg, var(--hp-dark), var(--hp-dark2)); color: #fff; padding: 32px 0 36px; }
.hp-featured .hp-sec-title { color: #fff; }
.hp-featured .hp-view { color: rgba(255,255,255,.8); }
/* PARANDUS: `auto-fit ... 1fr` venitas ÜHE salongi üle terve ekraani laiuse –
   üks kaart nägi välja nagu katkine bänner. `auto-fill` + max-width hoiab
   kaardi normaalse suurusega ka siis, kui salonge on ainult üks või kaks. */
.hp-salon-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px; justify-content: start;
}
.hp-salon-row > * { max-width: 300px; }   /* üks kaart ei veni üle ekraani */
/* ⚠️ KASUTUSEST VÄLJAS: .hp-salon oli esimene kaardikuju (info foto peal).
   Asendatud .hp-card-iga (vt. faili lõpp). Jäetud alles ainult selleks, et
   vahemälust tulnud vana HTML ei jääks stiilita – võib eemaldada, kui
   avaleht on toodangus üle vaadatud. */
.hp-salon {
  min-height: 176px; border: 1px solid var(--hp-pink); border-radius: 13px;
  overflow: hidden; position: relative; background: #111; color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.32); text-decoration: none; display: block;
  transition: transform .18s;
}
.hp-salon:hover { transform: translateY(-3px); }
.hp-salon-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hp-salon-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.88)); }
.hp-salon-body { position: absolute; z-index: 2; left: 16px; right: 14px; bottom: 12px; }
.hp-salon-body h3 { font-size: 14px; margin: 0 0 3px; color: #fff; }
.hp-salon-meta { font-size: 11px; color: rgba(255,255,255,.85); }
.hp-salon-meta .hp-star { color: #ffc01d; }
.hp-salon .hp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 7px 0 9px; }
.hp-salon .hp-tag { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 10.5px; padding: 3px 7px; border-radius: 5px; }
.hp-book { display: inline-block; background: var(--hp-pink); color: #fff; border-radius: 6px; padding: 7px 14px; font-weight: 700; font-size: 11px; }

/* ---------- UUED SALONGID (hele) ---------- */
.hp-new { background: #fff; padding: 34px 0 30px; }
.hp-new-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 16px; justify-content: start;
}
.hp-new-grid > * { max-width: 320px; }
.hp-new-card {
  border: 1px solid #eadfe1; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 8px 25px rgba(40,15,28,.07); text-decoration: none; color: var(--ink);
  transition: transform .18s, box-shadow .18s; display: block;
}
.hp-new-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(40,15,28,.12); }
.hp-new-card > img { width: 100%; height: 146px; object-fit: cover; display: block; }
.hp-new-body { padding: 13px 14px 15px; position: relative; }
.hp-new-badge { position: absolute; right: 12px; top: 13px; background: #fce2e7; color: #e34d6d; border-radius: 5px; padding: 4px 7px; font-size: 9px; font-weight: 800; }
.hp-new-body h3 { font-size: 15px; margin: 0 0 4px; }
.hp-new-meta { font-size: 11px; color: #e69b18; font-weight: 600; }
.hp-new-svc { font-size: 11px; color: #766c72; margin: 7px 0 12px; }
.hp-outline { display: inline-block; background: #fff; border: 1px solid var(--hp-pink); color: var(--hp-pink-d); border-radius: 6px; padding: 7px 12px; font-size: 11px; font-weight: 700; }

/* Tühja turu plokk – näidatakse "Soovitatud"/"Uued" asemel */
.hp-empty {
  background: linear-gradient(110deg, var(--hp-dark), var(--hp-dark2)); color: #fff;
  border-radius: 16px; padding: 34px 28px; text-align: center; margin: 30px 0;
}
.hp-empty h2 { font-family: var(--font-head); font-weight: 500; font-size: 25px; margin: 0 0 8px; color: #fff; }
.hp-empty p { font-size: 13px; color: rgba(255,255,255,.8); max-width: 480px; margin: 0 auto 18px; line-height: 1.6; }
.hp-empty-btn { display: inline-block; background: linear-gradient(135deg, var(--hp-gold), #f18d7d); color: #28151d; border-radius: 9px; padding: 12px 26px; font-weight: 700; font-size: 13.5px; text-decoration: none; }

/* ---------- MIKS LOREAS ---------- */
.hp-why { background: linear-gradient(100deg, #fff8f7, #fff1f2); padding: 30px 0 26px; }
.hp-why-grid { display: grid; grid-template-columns: 210px repeat(4, 1fr); align-items: center; gap: 0; }
.hp-why-title { font-family: var(--font-head); font-weight: 500; font-size: 25px; line-height: 1.05; position: relative; padding-bottom: 14px; }
.hp-why-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 35px; height: 2px; background: var(--hp-pink); }
.hp-why-item { display: flex; gap: 13px; align-items: flex-start; padding: 6px 18px; border-left: 1px solid #eadde0; }
.hp-why-ic { min-width: 46px; height: 46px; border-radius: 50%; background: #fce0e5; color: #ef5272; display: grid; place-items: center; font-size: 20px; }
.hp-why-item h4 { margin: 2px 0 5px; font-size: 14px; }
.hp-why-item p { margin: 0; font-size: 11.5px; line-height: 1.4; color: #6b5f64; }

/* ---------- PAKETID (4 tk) ---------- */
.hp-pricing { background: #fff8f7; padding: 46px 0 52px; }
.hp-pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.hp-pricing-title { font-family: var(--font-head); font-weight: 500; font-size: 31px; margin: 0 0 5px; }
.hp-pricing-head p { margin: 0; color: #766c72; font-size: 13px; }
.hp-bill {
  display: flex; align-items: center; gap: 3px; border: 1px solid #eadfe1;
  background: #fff; border-radius: 30px; padding: 4px; font-size: 12px;
}
.hp-bill button { border: 0; background: transparent; padding: 8px 15px; border-radius: 22px; color: #766c72; font: inherit; }
.hp-bill button.is-on { background: #f8dfe4; color: #d94467; font-weight: 700; }
.hp-bill b { color: #5b946d; padding: 0 10px; font-size: 10px; }

/* NELI paketti – mitte kolm. auto-fit hoiab ära, et neljas jääks üksi ripakile. */
.hp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 16px; align-items: stretch; }
.hp-plan {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #eadfe1; border-radius: 16px;
  padding: 22px 20px; position: relative; box-shadow: 0 8px 25px rgba(40,15,28,.05);
}
.hp-plan.is-popular { border: 2px solid var(--hp-pink); box-shadow: 0 14px 35px rgba(222,76,105,.15); }
.hp-plan-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--hp-pink); color: #fff; padding: 5px 13px; border-radius: 20px;
  font-size: 9px; font-weight: 800; white-space: nowrap;
}
.hp-plan h3 { font-family: var(--font-head); font-weight: 500; font-size: 22px; margin: 0; }
.hp-plan-desc { font-size: 12px; color: #766c72; min-height: 42px; margin: 6px 0 0; line-height: 1.45; }
.hp-price { font-family: var(--font-head); font-weight: 500; font-size: 34px; margin: 12px 0 4px; line-height: 1; }
.hp-price em { font: 400 11px var(--font-body); color: #766c72; font-style: normal; }
.hp-price-note { font-size: 11px; color: #5b946d; min-height: 15px; margin-bottom: 12px; }
.hp-plan-btn { display: block; text-align: center; text-decoration: none; padding: 12px; border-radius: 8px; background: #2a1534; color: #fff; font-weight: 700; font-size: 12px; }
.hp-plan.is-popular .hp-plan-btn { background: linear-gradient(135deg, var(--hp-pink), var(--hp-pink-d)); }
/* Funktsioonide loend ENNE nuppu ja `order`-iga, mitte HTML-i ümber
   tõstes – nii jääb nupp alati kaardi alla ühele joonele, olenemata
   sellest, kui pikk on funktsioonide nimekiri. */
.hp-plan ul { list-style: none; padding: 12px 0 0; margin: 12px 0 0; border-top: 1px solid #eee1e4; flex: 1; order: 1; }
.hp-plan .hp-plan-btn { order: 2; margin-top: 14px; }
.hp-plan li { font-size: 11.5px; padding: 6px 0; color: #554950; }

/* ---------- SALONGIOMANIKU RIBA ---------- */
.hp-owner-wrap { padding: 0 24px; }
.hp-owner {
  background: linear-gradient(110deg, #0a102e, #24122e); color: #fff;
  border-radius: 14px; padding: 34px 40px; display: grid;
  grid-template-columns: 1.4fr .9fr; gap: 26px; align-items: center;
}
.hp-owner h2 { font-family: var(--font-head); font-weight: 500; font-size: 27px; margin: 0 0 6px; color: #fff; }
.hp-owner p { font-size: 12.5px; margin: 0 0 16px; color: rgba(255,255,255,.85); }
.hp-owner-feats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 11.5px; }
.hp-owner-feat { display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,.9); }
.hp-owner-feat i { color: var(--hp-gold); font-style: normal; font-size: 17px; }
.hp-owner-cta { text-align: right; }
.hp-owner-btn { display: inline-block; border: 0; background: linear-gradient(135deg, var(--hp-gold), #f18d7d); color: #28151d; border-radius: 9px; padding: 13px 24px; font-weight: 700; text-decoration: none; font-size: 13.5px; }

/* ---------- Kitsam ekraan ---------- */
@media (max-width: 1100px) {
  .hp-float { display: none; }
  .hp-why-grid { grid-template-columns: 180px repeat(2, 1fr); gap: 14px 0; }
  .hp-why-item:nth-child(4) { border-left: 0; }
}
@media (max-width: 760px) {
  .hp-hero { min-height: 0; }
  .hp-hero-in { padding: 104px 0 44px; }
  /* Telefonis läheb tekst pildi PEALE, seega kile on vertikaalne.
     Ülemine osa jääb heledam, et modell paistaks. */
  .hp-hero-photo { background-position: 74% 12%; }
  .hp-hero-scrim {
    background: linear-gradient(180deg,
      rgba(5,2,9,.46) 0%, rgba(7,3,11,.76) 34%, rgba(9,4,13,.93) 66%, rgba(9,4,13,.97) 100%);
  }
  .hp-search { display: block; max-width: 340px; }
  .hp-field, .hp-field-city, .hp-field-svc { width: 100%; margin-bottom: 8px; }
  .hp-search-btn { width: 100%; }
  .hp-why-grid { grid-template-columns: 1fr 1fr; }
  .hp-why-title { grid-column: 1 / -1; }
  .hp-why-item { border-left: 0; padding: 8px 0; }
  .hp-owner { grid-template-columns: 1fr; padding: 26px 22px; }
  .hp-owner-cta { text-align: left; }
  .hp-owner-wrap { padding: 0 14px; }
  .hp-pricing { padding: 34px 0 40px; }
}


/* ══════════════════════════════════════════════════════════════════════
   TUME JALUS
   ══════════════════════════════════════════════════════════════════════
   Kehtib KÕIGIL lehtedel, mitte ainult avalehel – jalus on ühine element
   ja hele jalus tumeda avalehe all nägi katki välja. */
.site-footer, .prem-footer {
  background: #130b1a !important;
  color: #e9dce7;
  border-top: 0;
}
.site-footer a, .prem-footer a { color: #bcaeba; }
.site-footer a:hover, .prem-footer a:hover { color: #fff; }
.site-footer h4, .prem-footer h4,
.site-footer strong, .prem-footer strong { color: #fff; }
.site-footer p, .prem-footer p,
.site-footer .muted, .prem-footer .muted,
.site-footer .small, .prem-footer .small { color: #bcaeba; }
/* Jaluse alumine riba: eraldusjoon peab olema hele, mitte tume */
.site-footer hr, .prem-footer hr,
.prem-footer-bottom, .site-footer-bottom {
  border-color: #342536 !important;
}
.prem-footer-bottom, .site-footer-bottom { color: #88778a; }
/* Logo jalusel: tume taust vajab heledat logo. Kui salongil on ainult tume
   logo, hoiab see selle vähemalt nähtavana. */
.site-footer img, .prem-footer img { max-height: 34px; width: auto; }

/* ══════════════════════════════════════════════════════════════════════
   TEISTE LEHTEDE PÄISED – sama tume ilme, mis avalehel
   ══════════════════════════════════════════════════════════════════════
   Puudutab: /teenused, /miks-meie, /kontakt.
   Inline-taustad on nendest failidest eemaldatud, muidu oleksid nad
   CSS-ist tugevamad ja jääks hele gradient alles. */
.prem-page-head {
  background: linear-gradient(115deg, #080b1d 0%, #160a19 60%, #2a0f22 100%);
  color: #fff;
  padding: 108px 0 46px;          /* ruumi läbipaistvale päisele */
  position: relative;
}
.prem-page-head .prem-eyebrow { color: var(--hp-gold); }
.prem-page-head .prem-h1,
.prem-page-head h1 { color: #fff; }
.prem-page-head .prem-hero-sub,
.prem-page-head p { color: rgba(255,255,255,.84); }

/* Päis on nendel lehtedel samuti läbipaistev ja hero peal.
   Kasutame sama :has() mustrit nagu avalehel. */
body:has(.prem-page-head) .site-header {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 200;                    /* üle .nav-backdrop (150) */
  background: transparent; border-bottom: 0; box-shadow: none;
}
body:has(.prem-page-head) .site-header a,
body:has(.prem-page-head) .site-header .prem-nav a,
body:has(.prem-page-head) .site-header .nav-toggle-label { color: #fff; }
body:has(.prem-page-head) .site-header .nav-toggle-bars,
body:has(.prem-page-head) .site-header .nav-toggle-bars::before,
body:has(.prem-page-head) .site-header .nav-toggle-bars::after { background: #fff; }
/* Sama parandus, mis avalehel (vt. .hp-hero blokis olevat pikka
   kommentaari): paneel ilma .open klassita on mobiilis ikka VALGE taustaga,
   nii et lingid ei tohi siin valged olla – muidu valge tekst valgel taustal. */
@media (max-width: 900px) {
  body:has(.prem-page-head) .site-header .prem-nav:not(.open) a { color: #5d4a50; }
}
body:has(.prem-page-head) .site-header .prem-nav.open {
  background: var(--hp-dark);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
body:has(.prem-page-head) .site-header .prem-nav.open a { color: #fff; }
body:has(.prem-page-head) .site-header .prem-nav.open a:hover { background: rgba(255,255,255,.10); }
@media (max-width: 900px) {
  body:has(.prem-page-head) .site-header .prem-header-right {
    background: var(--hp-dark); border-radius: 12px; padding: 8px; margin-top: 8px;
  }
  .prem-page-head { padding: 96px 0 36px; }
}

/* Otsingulehel EI OLE .prem-page-head, seega seal jääb päis tavaliseks
   (hele, kleepuv). See on tahtlik: otsingutulemused vajavad püsivat päist,
   mis kerimisel kaasa tuleb, mitte pildi peal hõljuvat. */

/* ══════════════════════════════════════════════════════════════════════
   PARANDUSED v4
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- 1) Mobiili menüünupp tumedal päisel ----------
   Nupp ise oli VALGE (põhistiilist) ja selle silt sai ülalt valge värvi →
   valge pill, millel teksti ei näe. Nüüd on nupp läbipaistev valge äärega. */
body:has(.hp-hero) .site-header .nav-toggle,
body:has(.prem-page-head) .site-header .nav-toggle {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body:has(.hp-hero) .site-header .nav-toggle .nav-toggle-label,
body:has(.prem-page-head) .site-header .nav-toggle .nav-toggle-label { color: #fff !important; }
/* Keelevalija ja nupud tumedal päisel */

/* ---------- 2) Kategooriaplaat: tekst EI tohi pildile ulatuda ----------
   Eelmine parandus jättis 6% kattuvust: pilt algas 48% pealt, nimi lõppes
   54% juures. Pikk nimi („Kehahooldus ja mähised") murdus pildi peale.
   Nüüd on pilt kitsam ja nime alale jäetud kindel varu. */
.hp-cat { height: 118px; }
.hp-cat-img { width: 42%; }
.hp-cat-fade {
  background: linear-gradient(90deg, #fff 0%, #fff 46%, rgba(255,255,255,.82) 62%, rgba(255,255,255,0) 92%);
}
.hp-cat-name {
  right: 44%;                     /* pilt algab 58% pealt → 14% varu */
  bottom: 11px; font-size: 12.5px; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-cat-cnt { font-size: 10.5px; }

/* ---------- 3) Tumedad päised ei tohi olla "tühi must" ----------
   Ühevärviline tume ristkülik nägi välja nagu laadimata pilt. Lisame
   sügavust: kaks pehmet valguslaiku ja peen diagonaalne tekstuur. */
.prem-page-head {
  background:
    radial-gradient(1100px 380px at 78% 12%, rgba(239,92,121,.30), transparent 62%),
    radial-gradient(700px 300px at 12% 92%, rgba(246,194,164,.16), transparent 66%),
    linear-gradient(115deg, #080b1d 0%, #160a19 58%, #2a0f22 100%);
}
.prem-page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px);
}
.prem-page-head > * { position: relative; z-index: 1; }

/* ---------- 4) Soovitatud salongid: keritav rida nooltega ----------
   Kui salonge on rohkem kui ekraanile mahub, keritakse horisontaalselt.
   Nooled on ÄÄRTES ja ilmuvad ainult siis, kui kerida on midagi (klassi
   lisab app.js pärast laiuse mõõtmist). */
.hp-scroller { position: relative; }
.hp-scroller .hp-salon-row {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  padding-bottom: 4px;
  /* Peida kerimisriba – nooled on juhtelement */
  scrollbar-width: none; -ms-overflow-style: none;
}
.hp-scroller .hp-salon-row::-webkit-scrollbar { display: none; }
.hp-scroller .hp-salon-row > * {
  flex: 0 0 268px; max-width: 268px; scroll-snap-align: start;
}
.hp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 38px; height: 38px; border-radius: 50%;
  background: var(--hp-dark); border: 1px solid var(--hp-pink);
  color: var(--hp-pink); font-size: 20px; line-height: 1;
  cursor: pointer; display: none;      /* nähtav ainult vajadusel */
  align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.hp-arrow:hover { background: var(--hp-pink); color: #fff; }
.hp-arrow-l { left: -14px; } .hp-arrow-r { right: -14px; }
/* Klassi `is-scrollable` lisab app.js ainult siis, kui sisu ei mahu ära */
.hp-scroller.is-scrollable .hp-arrow { display: flex; }
.hp-scroller.at-start .hp-arrow-l,
.hp-scroller.at-end   .hp-arrow-r { opacity: .35; cursor: default; }

@media (max-width: 760px) {
  /* Telefonis on sõrmega kerimine loomulik – nooled ainult segavad */
  .hp-arrow { display: none !important; }
  .hp-scroller .hp-salon-row > * { flex: 0 0 84%; max-width: 84%; }
}

/* ══════════════════════════════════════════════════════════════════════
   PARANDUSED v4
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- 1) Burgernupp tumedal päisel ----------
   Nupul oli hele taust (üldisest .nav-toggle stiilist) ja minu reegel muutis
   ainult teksti valgeks → VALGE TEKST VALGEL NUPUL. Tumedal päisel peab nupp
   ise olema läbipaistev ja heleda äärisega. */
body:has(.hp-hero) .nav-toggle,
body:has(.prem-page-head) .nav-toggle {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body:has(.hp-hero) .nav-toggle:hover,
body:has(.prem-page-head) .nav-toggle:hover {
  background: rgba(255,255,255,.18) !important;
}

/* ---------- 2) Kategooria nimi ei tohi pildile joosta ----------
   Eelmine parandus (right:46%) ei piisanud: pikad nimed nagu
   „Kehahooldus ja mähised" murdusid kolmele reale ja ulatusid ikka pildile.
   Nüüd: pilt kitsam (42%), nimi kuni 2 rida ja ülejäänu lõigatakse. */
.hp-cat { height: 118px; }
.hp-cat-img { width: 42%; }
.hp-cat-fade {
  background: linear-gradient(90deg, #fff 0%, #fff 44%, rgba(255,255,255,.88) 60%, rgba(255,255,255,0) 92%);
}
.hp-cat-name {
  right: 46%; bottom: 12px; font-size: 12.5px; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1180px) {
  /* Kolm veergu = laiem plaat, seega pilt võib olla suurem ja nimi mahub */
  .hp-cat-img { width: 46%; }
  .hp-cat-name { right: 50%; font-size: 13px; }
}

/* ---------- 3) Otsinguleht ----------
   Eraldi `.search-head` klassi EI OLE VAJA: otsinguleht kasutab juba
   `.prem-page-head`-i, seega tumeda päise ja läbipaistva menüü reeglid
   (vt. eespool) kehtivad seal automaatselt. Kirjutasin siia korra eraldi
   bloki ja võtsin selle kohe välja – dubleeriv CSS on täpselt see, mis
   ajapikku lahku triivib. */

/* ---------- 4) Teiste lehtede päis ei tohi olla lame must ----------
   Lame tume ristkülik nägi tühi välja. Lisame roosa hõõgu ja peene
   mustri – sama meeleolu nagu avalehe heros, aga ilma fotot nõudmata. */
.prem-page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 82% 18%, rgba(239,92,121,.28), transparent 58%),
    radial-gradient(ellipse at 12% 86%, rgba(246,194,164,.16), transparent 52%);
}
.prem-page-head::after {
  /* Peen diagonaalne triibustus – annab pinnale tekstuuri */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 22px);
}
.prem-page-head > * { position: relative; z-index: 2; }

/* ══════════════════════════════════════════════════════════════════════
   SALONGIKAART v2 – foto peal, sisu all
   ══════════════════════════════════════════════════════════════════════
   Vana .hp-salon pani kogu info foto PEALE tumeda gradiendi alla. Kaks
   probleemi: heledatel fotodel kadus tekst ära ja kaart nägi plank välja,
   sest infot mahtus vaid kaks rida.

   Sisupaneel EI OLE valge. Valge paneel tumeda riba peal nägi välja nagu
   auk lehes – nüüd on see tume ploomikas roosa, mis seob kaardi ribaga.
   ══════════════════════════════════════════════════════════════════════ */
.hp-card {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #2a1024 0%, #230d1e 100%);
  border: 1px solid rgba(239,92,121,.34);
  text-decoration: none; color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hp-card:hover {
  transform: translateY(-4px);
  border-color: var(--hp-pink);
  box-shadow: 0 16px 40px rgba(239,92,121,.24);
}

.hp-card-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #1a0812; }
.hp-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-card-badge {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, var(--hp-gold), #e0a163);
  color: #2a1420; font-size: 10.5px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.hp-card-info { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px 15px; }
.hp-card-name {
  font-family: var(--font-head); font-weight: 500; font-size: 18px;
  color: var(--hp-pink-l); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-card-row { font-size: 12px; color: rgba(255,255,255,.76); }
.hp-card-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hp-card-rate { color: #ffc01d; font-weight: 700; }
.hp-card-dim { color: rgba(255,255,255,.55); }
/* „Uus salong" asendab tühja hinnangut – ütleb sama asja positiivselt */
.hp-card-new {
  background: rgba(239,92,121,.18); border: 1px solid rgba(239,92,121,.4);
  color: var(--hp-pink-l); font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}
.hp-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.hp-card-tags .hp-tag {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85); font-size: 10.5px; padding: 3px 8px; border-radius: 5px;
}
.hp-card-btn {
  margin-top: 9px; text-align: center;
  background: linear-gradient(135deg, var(--hp-pink), var(--hp-pink-d));
  color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 10px; border-radius: 9px;
}

/* Sama kaardikuju ka „Uued salongid" plokis, aga heledal taustal:
   seal on sektsioon valge, seega kaart tohib olla hele. */
.hp-new-card {
  border-color: #eadfe1;
}

/* ══════════════════════════════════════════════════════════════════════
   KATEGOORIAPLAAT v3 – ikoon ja nimi ÜLEVAL, foto all
   ══════════════════════════════════════════════════════════════════════
   Varasemad katsed (pildi kitsendamine, teksti lõikamine) olid lappimine:
   nimi ja pilt olid KÕRVUTI ja pikk nimi jooksis alati pildile peale.
   Nüüd on nad ÜKSTEISE ALL – ülemine riba on alati sama laiune, seega
   kokkupõrge on struktuurselt võimatu, mitte "loodetavasti ei juhtu".
   ══════════════════════════════════════════════════════════════════════ */
.hp-cat {
  height: auto;                      /* sisu määrab kõrguse */
  display: flex; flex-direction: column;
}
.hp-cat-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px;
  /* position: static – ei ole enam absoluutne, seega ei saa üle joosta */
  position: static;
}
.hp-cat .hp-cat-ic {
  position: static; flex-shrink: 0;
  width: 34px; height: 34px; font-size: 16px;
}
.hp-cat .hp-cat-name {
  position: static; right: auto; bottom: auto;
  font-size: 13px; font-weight: 700; line-height: 1.25;
  min-width: 0;                      /* lubab kahaneda, mitte üle voolata */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-cat .hp-cat-cnt { font-weight: 400; }
/* Foto on nüüd täislaiuses riba plaadi all */
.hp-cat .hp-cat-img {
  position: static; width: 100%; height: 92px;
  border-radius: 0;
}
/* Valge gradient ei ole enam vajalik – tekst ei ole pildi peal */
.hp-cat .hp-cat-fade { display: none; }

@media (max-width: 640px) {
  .hp-cat-top { padding: 10px 11px; gap: 8px; }
  .hp-cat .hp-cat-ic { width: 30px; height: 30px; font-size: 14px; }
  .hp-cat .hp-cat-name { font-size: 12.5px; }
  .hp-cat .hp-cat-img { height: 78px; }
}


/* ══════════════════════════════════════════════════════════════════════
   KEELEVALIJA TUMEDAL PÄISEL
   ══════════════════════════════════════════════════════════════════════
   Klass on `.prem-lang`, MITTE `.lang-pill` – kirjutasin varem vale nime
   ja reeglid olid surnud kood. Seepärast oligi EST/ENG tumedal päisel
   loetamatu: tekst sai valge värvi üldreeglist, aga aktiivse keele taust
   jäi heleroosaks (var(--blush)) → hele taust + valge tekst.

   Nüüd on see selge segmentlüliti: raam ümber, aktiivne keel valge täidisega. */
body:has(.hp-hero) .prem-lang-wrap,
body:has(.prem-page-head) .prem-lang-wrap {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 2px;
  background: rgba(255,255,255,.08);
}
body:has(.hp-hero) .prem-lang,
body:has(.prem-page-head) .prem-lang {
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  padding: 5px 11px; border-radius: 999px;
}
body:has(.hp-hero) .prem-lang:hover,
body:has(.prem-page-head) .prem-lang:hover {
  color: #fff !important; background: rgba(255,255,255,.14) !important;
}
body:has(.hp-hero) .prem-lang.active,
body:has(.prem-page-head) .prem-lang.active {
  background: #fff !important; color: #1a0812 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   AUDITIST LEITUD PUUDUVAD KLASSID
   ══════════════════════════════════════════════════════════════════════
   Skript võrdles vaadetes kasutatud klassinimesid CSS-is defineeritutega.
   Need 12 olid kasutuses, aga stiilita – element renderdus, aga ilma
   kujunduseta. Kõige tähtsam neist on `.alert`: just seal näeb uus
   salongiomanik registreerimisel vea- ja edu-teateid, ja need olid
   sisuliselt nähtamatud (tavaline tekstilõik ilma raami ja värvita).
   ══════════════════════════════════════════════════════════════════════ */
.alert {
  border-radius: 12px; padding: 13px 16px; font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  margin-bottom: 14px;
}
.alert-success { background: #eaf6ef; border-color: #bfe3cd; color: #2f6b4a; }
.alert-warn    { background: #fdf6e3; border-color: #ecd9a0; color: #7a5f14; }
.alert-error, .alert-danger { background: #fdf0f3; border-color: #f0c2cf; color: #a8324a; }

/* Nupuvariandid, mida kasutati, aga polnud defineeritud */
.btn-primary { background: var(--rose-btn); color: #fff; border: 0; }
.btn-primary:hover { background: var(--rose-deep); }
.btn-book { background: var(--rose-btn); color: #fff; border: 0; font-weight: 700; }
.btn-book:hover { background: var(--rose-deep); }

/* Galerii lightboxi allkiri – tekst oli olemas, aga vormistamata */
.gal-lb-title { font-weight: 600; }
.gal-lb-count { opacity: .75; }

/* Kalendri broneeringu staatusemärgis modaalis */
.modal-status-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: var(--blush); color: var(--rose-deep);
}

/* Muud väiksemad */
.text-left { text-align: left; }
.social-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.prem-contact-form { max-width: 640px; }
.prem-owner-text { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.chat-box { display: flex; flex-direction: column; gap: 12px; }
.custom-sec { margin-bottom: 18px; }
.service-row-onb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
   SALONGI REGISTREERIMINE – laiem vorm, korralikud paketikaardid
   ══════════════════════════════════════════════════════════════════════
   Kaart oli `.wide` ehk 640px. Neli paketti pidid sinna ära mahtuma ja
   tulemus oli see, mida sa nägid: hind murdus („129,00 €/aasta" laiali),
   kirjeldused venisid viiele reale, kaardid eri kõrgusega. Külgedel oli
   samal ajal ekraan tühi.
   ══════════════════════════════════════════════════════════════════════ */
.auth-card.xwide { max-width: 1080px; }
@media (max-width: 1140px) { .auth-card.xwide { max-width: 720px; } }
@media (max-width: 760px)  { .auth-card.xwide { padding: 24px 18px; } }

/* Vormiväljad kahes veerus – laiem kaart annab selleks ruumi */
.auth-card.xwide .grid-2 { gap: 14px 18px; }

/* ---------- Makseperioodi valik ---------- */
.auth-card.xwide .cycle-switch { max-width: 560px; }
.cycle-opt {
  /* „Kogu aasta -2 kuud maksad 10 kuu eest" murdus kolmele reale.
     Nüüd on märgis ja alltekst eraldi ridadel, kindla struktuuriga. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  line-height: 1.3;
}
.cycle-opt .cy-name { font-weight: 700; font-size: 14px; }
.cycle-opt .cy-sub  { font-size: 11.5px; color: var(--ink-soft); font-weight: 400; }
.cycle-opt .cy-badge {
  display: inline-block; background: var(--gold); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}

/* ---------- Paketikaardid ---------- */
.auth-card.xwide .plan-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1140px) { .auth-card.xwide .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .auth-card.xwide .plan-grid { grid-template-columns: 1fr; } }

/* Hind ei tohi murduda. `white-space: nowrap` + väiksem ühik hoiavad
   „69,00 €/aasta" ühel real ka kitsas veerus. */
.plan-radio .pr-price { white-space: nowrap; font-size: 1.28rem; }
.plan-radio .pr-price .small { font-size: 11.5px; }
.plan-radio .pr-name { font-size: 15px; letter-spacing: .2px; }
.plan-radio .pr-feat { font-size: 11.5px; line-height: 1.45; }
/* „Populaarne" märgis läks nime kõrvale ja lükkas selle katki – nüüd
   asetseb ta nime ALL, oma real. */
.plan-radio .pr-name { display: block; }
.plan-radio .pr-name .pill { display: inline-block; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   TEKSTITOIMETAJA – uued juhtelemendid
   ══════════════════════════════════════════════════════════════════════ */
.rte-toolbar { flex-wrap: wrap; gap: 4px; align-items: center; }
.rte-toolbar select {
  font: inherit; font-size: 12px; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink); cursor: pointer; max-width: 130px;
}
/* Värvinupp: väike ruut, mille sees on peidetud süsteemne värvivalija.
   `<input type=color>` on toorelt kole ja eri brauserites eri suurusega –
   silt annab ühtse välimuse. */
.rte-color {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 7px; background: #fff; cursor: pointer; font-size: 12px;
}
.rte-color:hover { border-color: var(--rose); }
.rte-color input[type="color"] {
  width: 20px; height: 18px; padding: 0; border: 0; background: none;
  cursor: pointer;
}
.rte-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.rte-color input[type="color"]::-webkit-color-swatch { border: 1px solid var(--line); border-radius: 3px; }

/* Toimetaja sisu vormindus – et pealkirjad ja tsitaat oleksid nähtavad */
.rte-area h2 { font-size: 1.3rem; margin: 12px 0 6px; }
.rte-area h3 { font-size: 1.1rem; margin: 10px 0 5px; }
.rte-area blockquote {
  margin: 10px 0; padding: 8px 14px;
  border-left: 3px solid var(--rose); color: var(--ink-soft);
}
.rte-area ul, .rte-area ol { padding-left: 22px; margin: 8px 0; }

/* ══════════════════════════════════════════════════════════════════════
   SALONGI KUJUNDUSMALLID – taust ulatub kuni jaluseni
   ══════════════════════════════════════════════════════════════════════
   `.tpl-luxe` ja `.tpl-modern` seavad oma tausta, aga see klass katab
   AINULT salongi sisu. Kui sisu lõppes enne lehe põhja, paistis all
   `<body>` hele koorevärv – tumeda malli puhul tekkis sisu ja jaluse
   vahele silmatorkav valge riba.

   Lahendus: kui lehel ON malliga sisu, saab ka `body` ja `main` sama
   tausta. `:has()` valib selle järgi, mis lehel allpool on – sama muster
   nagu tumeda päisega avalehel. Kui brauser `:has()`-i ei toeta, jääb
   vana käitumine (valge riba), aga miski ei lagune.
   ══════════════════════════════════════════════════════════════════════ */
body:has(.tpl-luxe) { background: #171310; }
body:has(.tpl-luxe) main { background: #171310; }

body:has(.tpl-modern) { background: #f4f2f2; }
body:has(.tpl-modern) main { background: #f4f2f2; }

/* Jaluse ülemine serv ei tohi tumedas mallis järsku hüpata –
   õhuke kuldne joon seob need kokku, nagu mall mujal teeb. */
body:has(.tpl-luxe) .site-footer,
body:has(.tpl-luxe) .prem-footer {
  border-top: 1px solid rgba(230,201,138,.22);
}

/* ══════════════════════════════════════════════════════════════════════
   MAKSEPERIOODI VALIK (paketi vahetus töölaual)
   ══════════════════════════════════════════════════════════════════════ */
.bill-cycle {
  display: inline-flex; gap: 3px; padding: 4px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
}
.bill-opt {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-soft);
  padding: 8px 16px; border-radius: 999px; transition: all .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.bill-opt:hover { color: var(--ink); }
.bill-opt.is-on {
  background: linear-gradient(135deg, var(--rose), var(--gold));
  color: #fff; font-weight: 700;
}
.bill-badge {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: #eaf6ef; color: #2f6b4a;
}
.bill-opt.is-on .bill-badge { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 520px) {
  .bill-cycle { width: 100%; }
  .bill-opt { flex: 1; justify-content: center; padding: 9px 8px; font-size: 12.5px; }
}