/*
URL: https://kvartersmenyguiden.se/<slug>?theme=theme22-salon&theme_version=1.1
DIR: /home/objdevehl/public_html/node_js_dev/kvartersmenyguiden/kmg-test/public/start/restaurant_detail/themes/theme22-salon/
FILE: theme22_salon_V1.1.css
VERSION: V1.1
DESC: Styling för Tema 22 – premium svart/guld salongstema med sektioner, konverteringsfokuserad bokning och mobiloptimering.
*/
:root {
    --theme22-bg:#0c0b09;
    --theme22-bg-soft:#14120f;
    --theme22-card:#191611;
    --theme22-card-2:#211c15;
    --theme22-gold:#c9a227;
    --theme22-gold-light:#efd873;
    --theme22-gold-dark:#8d6e0d;
    --theme22-text:#f7f3ea;
    --theme22-muted:#c8c0b1;
    --theme22-line:rgba(201,162,39,.24);
    --theme22-max:1180px;
    --theme22-radius:20px;
    --theme22-shadow:0 24px 70px rgba(0,0,0,.28);
    --theme22-header:78px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--theme22-header) + 16px); }
body.theme22-body { margin:0; background:var(--theme22-bg); color:var(--theme22-text); font-family:'DM Sans',Arial,sans-serif; font-size:16px; line-height:1.72; overflow-x:hidden; }
body.theme22-body a { color:inherit; }
body.theme22-body img { max-width:100%; }
.theme22-skip { position:fixed; left:12px; top:-100px; z-index:9999; background:#fff; color:#111!important; padding:10px 14px; border-radius:8px; text-decoration:none; }
.theme22-skip:focus { top:12px; }
.theme22-container { width:min(calc(100% - 40px),var(--theme22-max)); margin:0 auto; position:relative; z-index:2; }
.theme22-narrow { max-width:860px; }
.theme22-center { text-align:center; margin-top:34px; }
.theme22-eyebrow { margin:0 0 10px; color:var(--theme22-gold-light); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.theme22-section { position:relative; padding:92px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.04); }
.theme22-section:nth-of-type(even) { background:linear-gradient(180deg,var(--theme22-bg-soft),var(--theme22-bg)); }
.theme22-section-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(9,8,6,.82),rgba(9,8,6,.93)),var(--theme22-section-bg); background-size:cover; background-position:center; opacity:.95; }
.theme22-section-heading { max-width:780px; margin:0 auto 40px; text-align:center; }
.theme22-section-heading h2,.theme22-intro h2,.theme22-contact-main h2 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:clamp(34px,5vw,56px); line-height:1.08; letter-spacing:-.02em; }
.theme22-section-subtitle { margin:16px auto 0; max-width:720px; color:var(--theme22-muted); font-size:18px; }
.theme22-header { position:fixed; top:0; left:0; right:0; height:var(--theme22-header); z-index:1000; background:rgba(9,8,6,.72); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.theme22-header-inner { width:min(calc(100% - 36px),var(--theme22-max)); height:100%; margin:0 auto; display:flex; align-items:center; gap:28px; }
.theme22-brand { display:inline-flex; align-items:center; min-width:150px; text-decoration:none; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:22px; letter-spacing:.02em; }
.theme22-brand img { width:auto; height:48px; object-fit:contain; }
.theme22-desktop-nav { display:flex; align-items:center; justify-content:flex-end; gap:24px; margin-left:auto; }
.theme22-desktop-nav a { color:var(--theme22-muted); text-decoration:none; font-size:14px; font-weight:600; transition:color .2s ease; }
.theme22-desktop-nav a:hover { color:var(--theme22-gold-light); }
.theme22-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border-radius:999px; border:1px solid transparent; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease; }
.theme22-btn:hover { transform:translateY(-2px); }
.theme22-btn-gold { background:linear-gradient(135deg,var(--theme22-gold-light),var(--theme22-gold)); color:#171208!important; border-color:#dfbf4f; box-shadow:0 12px 30px rgba(201,162,39,.22); }
.theme22-btn-gold:hover { box-shadow:0 15px 38px rgba(201,162,39,.36); }
.theme22-btn-ghost { background:rgba(0,0,0,.24); color:#fff!important; border-color:rgba(255,255,255,.35); backdrop-filter:blur(8px); }
.theme22-btn-outline { background:transparent; color:var(--theme22-gold-light)!important; border-color:var(--theme22-gold); }
.theme22-btn-large { min-height:56px; padding:16px 30px; font-size:17px; }
.theme22-header-book { flex:0 0 auto; min-height:42px; padding:10px 20px; font-size:14px; }
.theme22-menu-button { display:none; margin-left:auto; width:44px; height:44px; padding:10px; border:1px solid var(--theme22-line); border-radius:50%; background:rgba(0,0,0,.25); cursor:pointer; }
.theme22-menu-button span { display:block; height:2px; margin:5px 0; background:var(--theme22-gold-light); transition:.2s ease; }
.theme22-mobile-nav { position:fixed; top:var(--theme22-header); right:14px; z-index:999; width:min(340px,calc(100% - 28px)); display:none; flex-direction:column; padding:16px; border:1px solid var(--theme22-line); border-radius:18px; background:rgba(15,13,10,.98); box-shadow:var(--theme22-shadow); }
.theme22-mobile-nav.is-open { display:flex; }
.theme22-mobile-nav a { padding:13px 12px; border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; font-weight:600; }
.theme22-mobile-nav .theme22-mobile-book { margin-top:10px; border:0; border-radius:12px; background:var(--theme22-gold); color:#181208; text-align:center; }
.theme22-hero { position:relative; min-height:min(860px,88svh); display:flex; align-items:center; justify-content:center; padding:calc(var(--theme22-header) + 58px) 20px 80px; isolation:isolate; overflow:hidden; }
.theme22-hero-media,.theme22-hero-overlay { position:absolute; inset:0; }
.theme22-hero-media { z-index:-3; background:#15110b; }
.theme22-hero-overlay { z-index:-1; background:radial-gradient(circle at 50% 38%,rgba(0,0,0,.1),rgba(0,0,0,.62) 58%,rgba(0,0,0,.88)),linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.76)); }
.theme22-hero-fallback { position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(201,162,39,.25),transparent 32%),linear-gradient(135deg,#21190d,#0b0a09 70%); }
.theme22-hero-slider,.theme22-hero-slide { position:absolute; inset:0; }
.theme22-hero-slide { background-size:cover; background-position:center; opacity:0; transform:scale(1.04); transition:opacity 1.2s ease,transform 6.5s ease; }
.theme22-hero-slide.is-active { opacity:1; transform:scale(1.09); }
.theme22-hero-video { position:absolute; left:50%; top:50%; width:177.77777778vh; min-width:100%; height:56.25vw; min-height:100%; transform:translate(-50%,-50%); border:0; pointer-events:none; }
.theme22-hero-content { width:min(920px,100%); margin:0 auto; text-align:center; }
.theme22-hero h1 { margin:0 auto; max-width:900px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(44px,7vw,86px); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; text-shadow:0 8px 30px rgba(0,0,0,.4); }
.theme22-hero-subtitle { margin:22px auto 0; max-width:760px; color:#f0eadf; font-size:clamp(17px,2.2vw,22px); line-height:1.55; text-wrap:balance; }
.theme22-hero-actions { margin-top:32px; display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.theme22-rating { margin:24px auto 0; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; color:#eee5d2; font-size:14px; }
.theme22-rating-stars { color:var(--theme22-gold-light); letter-spacing:.08em; }
.theme22-scroll-cue { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:34px; height:52px; border:1px solid rgba(255,255,255,.35); border-radius:18px; }
.theme22-scroll-cue span { position:absolute; left:50%; top:10px; width:4px; height:8px; margin-left:-2px; border-radius:4px; background:var(--theme22-gold-light); animation:theme22-scroll 1.7s infinite; }
@keyframes theme22-scroll { 0%{transform:translateY(0);opacity:0} 25%{opacity:1} 75%{opacity:1} 100%{transform:translateY(18px);opacity:0} }
.theme22-intro { text-align:center; background:linear-gradient(180deg,#0d0b08,#13100c); }
.theme22-intro .theme22-richtext { margin-top:24px; color:#ded7cb; font-size:18px; }
.theme22-richtext { color:#ded7cb; }
.theme22-richtext h2,.theme22-richtext h3 { color:var(--theme22-text); font-family:'Playfair Display',Georgia,serif; line-height:1.18; }
.theme22-richtext h2 { font-size:clamp(30px,4vw,46px); margin:40px 0 14px; }
.theme22-richtext h3 { font-size:28px; margin:32px 0 12px; }
.theme22-richtext p { margin:0 0 18px; }
.theme22-richtext a:not(.theme22-btn) { color:var(--theme22-gold-light); text-decoration-thickness:1px; text-underline-offset:3px; }
.theme22-richtext ul,.theme22-richtext ol { padding-left:24px; margin:18px 0; }
.theme22-inline-cta { margin-top:30px!important; }
.theme22-services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.theme22-service-card { min-height:210px; padding:26px; border:1px solid var(--theme22-line); border-radius:var(--theme22-radius); background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(201,162,39,.035)); box-shadow:0 12px 36px rgba(0,0,0,.12); }
.theme22-service-card-top { display:flex; gap:18px; align-items:flex-start; justify-content:space-between; }
.theme22-service-card h3 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:25px; line-height:1.2; }
.theme22-service-card p { color:var(--theme22-muted); margin:16px 0; }
.theme22-price { color:var(--theme22-gold-light); white-space:nowrap; font-weight:700; font-size:14px; }
.theme22-text-link { color:var(--theme22-gold-light)!important; font-weight:700; text-decoration:none; }
.theme22-gallery { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:85px; gap:14px; }
.theme22-gallery-item { margin:0; overflow:hidden; border-radius:16px; background:#19140f; position:relative; border:1px solid rgba(255,255,255,.06); }
.theme22-gallery-item:nth-child(5n+1) { grid-column:span 7; grid-row:span 5; }
.theme22-gallery-item:nth-child(5n+2) { grid-column:span 5; grid-row:span 3; }
.theme22-gallery-item:nth-child(5n+3) { grid-column:span 5; grid-row:span 2; }
.theme22-gallery-item:nth-child(5n+4) { grid-column:span 5; grid-row:span 4; }
.theme22-gallery-item:nth-child(5n+5) { grid-column:span 7; grid-row:span 4; }
.theme22-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.theme22-gallery-item:hover img { transform:scale(1.035); }
.theme22-gallery-item figcaption { position:absolute; left:12px; right:12px; bottom:12px; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.58); font-size:13px; }
.theme22-staff-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.theme22-staff-card { overflow:hidden; border:1px solid var(--theme22-line); border-radius:var(--theme22-radius); background:var(--theme22-card); }
.theme22-staff-card img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.theme22-staff-body { padding:24px; }
.theme22-staff-body h3 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:28px; }
.theme22-staff-role { margin-top:4px; color:var(--theme22-gold-light); font-size:14px; font-weight:700; }
.theme22-staff-body p { color:var(--theme22-muted); }
.theme22-reviews-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.theme22-review-card { margin:0; padding:28px; border:1px solid var(--theme22-line); border-radius:var(--theme22-radius); background:var(--theme22-card); }
.theme22-stars { color:var(--theme22-gold-light); letter-spacing:.08em; }
.theme22-review-card blockquote { margin:18px 0; color:#eee8dc; font-family:'Playfair Display',Georgia,serif; font-size:21px; line-height:1.5; }
.theme22-review-card figcaption { color:var(--theme22-muted); font-weight:700; }
.theme22-contact-section { background:linear-gradient(135deg,#14100a,#080706 72%); }
.theme22-contact-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:48px; align-items:start; }
.theme22-contact-address { max-width:620px; margin:20px 0; color:var(--theme22-muted); font-size:18px; }
.theme22-contact-links { display:flex; flex-direction:column; gap:7px; margin:24px 0 30px; }
.theme22-contact-links a { color:#eee5d5; text-decoration:none; width:max-content; max-width:100%; }
.theme22-contact-links a:hover { color:var(--theme22-gold-light); }
.theme22-contact-side { padding:28px; border:1px solid var(--theme22-line); border-radius:var(--theme22-radius); background:rgba(255,255,255,.03); box-shadow:var(--theme22-shadow); }
.theme22-contact-side h3 { margin:0 0 16px; font-family:'Playfair Display',Georgia,serif; font-size:27px; }
.theme22-hours dl { margin:0; }
.theme22-hours dl>div { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.theme22-hours dt { color:var(--theme22-muted); }
.theme22-hours dd { margin:0; color:var(--theme22-gold-light); text-align:right; }
.theme22-hours-note { color:var(--theme22-muted); font-size:14px; }
.theme22-map { margin-top:24px; overflow:hidden; border-radius:14px; aspect-ratio:4/3; }
.theme22-map iframe { width:100%; height:100%; border:0; display:block; }
.theme22-footer { padding:42px 0 90px; background:#070605; border-top:1px solid var(--theme22-line); color:var(--theme22-muted); }
.theme22-footer-grid { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; }
.theme22-footer strong { color:var(--theme22-text); font-family:'Playfair Display',Georgia,serif; font-size:23px; }
.theme22-footer p { margin:6px 0 0; }
.theme22-footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.theme22-footer-links a { color:var(--theme22-muted); text-decoration:none; }
.theme22-footer-links a:hover { color:var(--theme22-gold-light); }
.theme22-mobile-sticky-book { display:none; position:fixed; z-index:1100; left:14px; right:14px; bottom:max(14px,env(safe-area-inset-bottom)); padding:15px 20px; border-radius:14px; background:linear-gradient(135deg,var(--theme22-gold-light),var(--theme22-gold)); color:#161108!important; text-align:center; text-decoration:none; font-weight:800; box-shadow:0 14px 45px rgba(0,0,0,.46); }
.theme22-owner-edit { position:fixed; z-index:1200; right:12px; bottom:12px; padding:8px 10px; border-radius:8px; background:#fff; color:#111!important; font-size:12px; font-weight:700; text-decoration:none; }
@media (max-width:980px) {
    .theme22-desktop-nav,.theme22-header-book { display:none; }
    .theme22-menu-button { display:block; }
    .theme22-services-grid,.theme22-staff-grid,.theme22-reviews-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .theme22-contact-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
    :root { --theme22-header:66px; }
    body.theme22-body { font-size:15px; }
    .theme22-container { width:min(calc(100% - 28px),var(--theme22-max)); }
    .theme22-header-inner { width:calc(100% - 28px); }
    .theme22-brand { min-width:0; max-width:240px; font-size:18px; }
    .theme22-brand img { height:40px; }
    .theme22-hero { min-height:78svh; padding-top:calc(var(--theme22-header) + 44px); padding-bottom:70px; }
    .theme22-hero h1 { font-size:clamp(39px,11vw,60px); }
    .theme22-hero-subtitle { font-size:16px; }
    .theme22-hero-actions .theme22-btn { width:min(300px,100%); }
    .theme22-scroll-cue { display:none; }
    .theme22-section { padding:68px 0; }
    .theme22-section-heading { margin-bottom:30px; }
    .theme22-services-grid,.theme22-staff-grid,.theme22-reviews-grid { grid-template-columns:1fr; }
    .theme22-gallery { grid-template-columns:1fr 1fr; grid-auto-rows:210px; gap:10px; }
    .theme22-gallery-item,.theme22-gallery-item:nth-child(n) { grid-column:auto; grid-row:auto; }
    .theme22-gallery-item:nth-child(3n+1) { grid-column:span 2; }
    .theme22-contact-side { padding:20px; }
    .theme22-footer { padding-bottom:100px; }
    .theme22-footer-grid { display:block; }
    .theme22-footer-links { margin-top:22px; }
    .theme22-mobile-sticky-book { display:block; }
    .theme22-owner-edit { bottom:76px; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    .theme22-hero-slide { transform:none!important; }
}