/* Gail's Skin & Beauty Care v2. Tokens = Elementor globale farver/fonte. Sektion = container. */
:root{
  --paper:#FBF8F2; --sand:#F0E7D6; --mist:#E4F0E8; --ink:#1F2B24; --ink-soft:#4C5B52;
  --clay:#8A5319; --clay-deep:#6E3F10; --dune:#E3AE6A; --sage:#A0D1B3; --forest:#2A4535; --line:#D9DDD0;
  --f-head:"Urbanist",system-ui,sans-serif; --f-body:"Hanken Grotesk",system-ui,sans-serif;
  --wrap:1200px; --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--f-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0 0 .5em;overflow-wrap:break-word;min-width:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.2rem;letter-spacing:-.01em;line-height:1.2}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.lead{font-size:1.25rem;line-height:1.5;max-width:46ch}
.soft{color:var(--ink-soft)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

/* knapper: firkantede, ikke piller */
.btn{display:inline-block;font:600 1rem/1 var(--f-body);padding:1.05rem 1.6rem;border-radius:var(--r);text-decoration:none;border:1.5px solid var(--ink);transition:background-color .18s,color .18s}
.btn-primary{background:var(--clay);border-color:var(--clay);color:#fff}
.btn-primary:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-paper:hover{background:var(--sand);border-color:var(--sand)}
.btn-sm{padding:.75rem 1.1rem;font-size:.92rem}
.textlink{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--clay)}
.textlink:hover{text-decoration-color:var(--ink)}

/* header */
.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:80px}
.logo img{height:56px;width:auto}
.nav{display:flex;gap:2.2rem;align-items:center}
.nav a{text-decoration:none;font-weight:500;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--clay)}
.header-cta{display:flex;gap:.8rem;align-items:center}
.menu-toggle{display:none;background:none;border:1.5px solid var(--ink);border-radius:var(--r);padding:.65rem 1rem;font:600 .92rem var(--f-body);color:var(--ink);cursor:pointer}

/* hero */
.hero{padding:64px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px;align-items:center}
.hero h1{margin-bottom:.4em}
.hero .lead{margin-bottom:2rem}
.hero .actions{display:flex;gap:.9rem;flex-wrap:wrap}
.hero figure{margin:0}
.hero img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--r);animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:.7rem}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* sektioner */
.section{padding:104px 0}
.section-sand{background:var(--sand)}
.section-ink{background:var(--forest);color:var(--paper)}
.section-ink .soft{color:#d8c6b3}
.section-sage{background:var(--sage)}
.head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.4rem;flex-wrap:wrap}
.head h2{margin:0}

/* behandlingskortet */
.menu-group{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:48px;padding:34px 0;border-top:1.5px solid var(--ink)}
.menu-group h3{font-size:1.5rem;margin:0}
.menu-group .sub{font-size:.95rem;color:var(--ink-soft);margin:.35rem 0 0}
.menu{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.menu li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.8rem}
.menu li::after{content:none}
.menu .dots{border-bottom:1.5px dotted var(--ink);opacity:.3;transform:translateY(-.3em);min-width:1rem}
.menu .p{font:600 1.05rem var(--f-head);white-space:nowrap}
.menu .n{font-size:1.08rem}
.menu .d{grid-column:1 / -1;font-size:.92rem;color:var(--ink-soft);max-width:68ch;margin:0 0 .85rem}
.menu-full li{padding-top:.4rem}
.note{border-left:3px solid var(--clay);padding:.2rem 0 .2rem 1.1rem;margin:1.4rem 0 0;font-size:.98rem;color:var(--ink-soft);max-width:62ch}

/* split-felter */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.split.rev>:first-child{order:2}
.split img{width:100%;border-radius:var(--r);object-fit:cover}
.bigprice{font:600 clamp(3.4rem,8vw,6.5rem)/.95 var(--f-head);letter-spacing:-.04em;margin:1.2rem 0 .3rem;color:var(--dune)}
.pull{font:500 clamp(1.5rem,2.8vw,2.3rem)/1.22 var(--f-head);letter-spacing:-.02em;max-width:24ch;margin:0 0 1.4rem}
.cols2{columns:2;column-gap:56px}
.cols2 p{break-inside:avoid}

/* mærkeliste */
.brandlist{list-style:none;margin:0;padding:0}
.brandlist li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) 84px;gap:32px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.brandlist li:last-child{border-bottom:1px solid var(--line)}
.brandlist b{font:600 1.5rem/1.1 var(--f-head);letter-spacing:-.02em}
.brandlist p{margin:0;color:var(--ink-soft);font-size:.98rem}
.brandlist img{width:84px;height:84px;object-fit:cover;border-radius:var(--r)}

/* praktisk */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 72px;margin:0}
.facts div{padding:22px 0;border-top:1px solid var(--line)}
.facts dt{font:600 1.15rem var(--f-head);margin-bottom:.3rem}
.facts dd{margin:0;color:var(--ink-soft)}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;padding:.2rem 0;max-width:260px}
.hours .closed{color:var(--clay);font-weight:600}

/* underside-hoved */
.page-head{padding:56px 0 40px;border-bottom:1.5px solid var(--ink)}
.crumbs{font-size:.92rem;color:var(--ink-soft);margin-bottom:1.6rem}
.crumbs a{text-underline-offset:3px}
.page-head h1{font-size:clamp(2.4rem,5.4vw,4.6rem);max-width:16ch}
.page-head .lead{margin:0}
.page-head.has-img .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end}
.page-head img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}

/* prisside */
.pricepage{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:72px;padding:48px 28px 104px}
.index{position:sticky;top:110px;align-self:start;display:grid;gap:.15rem}
.index button{font:500 1.02rem var(--f-body);background:none;border:0;border-left:2px solid var(--line);text-align:left;padding:.55rem 0 .55rem 1rem;color:var(--ink-soft);cursor:pointer}
.index button:hover{color:var(--ink)}
.index button[aria-pressed="true"]{border-left-color:var(--clay);color:var(--ink);font-weight:600}
.pricepage .menu-group{grid-template-columns:1fr;gap:18px;padding:30px 0 40px;scroll-margin-top:100px}
.pricepage .menu-group:first-of-type{border-top:0;padding-top:0}
[hidden]{display:none !important}

/* behandlingsside */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:80px;align-items:start;padding:56px 28px 104px}
.detail h2{font-size:1.9rem;margin-top:3rem}
.detail h2:first-child{margin-top:0}
.dash{list-style:none;margin:0 0 1rem;padding:0}
.dash li{padding:.45rem 0 .45rem 1.4rem;position:relative;border-top:1px solid var(--line)}
.dash li::before{content:"";position:absolute;left:0;top:1.15em;width:.6rem;border-top:2px solid var(--clay)}
.dash li:last-child{border-bottom:1px solid var(--line)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:.7rem 0 .7rem 2.2rem;border-top:1px solid var(--line);position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;font:600 1rem var(--f-head);color:var(--clay)}
.answer{background:var(--sand);padding:1.5rem 1.7rem;margin:0 0 2.4rem;border-radius:var(--r);font-size:1.12rem}
.aside{position:sticky;top:110px;border:1.5px solid var(--ink);padding:28px;border-radius:var(--r)}
.aside .price{font:600 2.6rem/1 var(--f-head);letter-spacing:-.03em;margin-bottom:.3rem}
.aside .btn{display:block;text-align:center;margin-top:.6rem}
.aside h3{margin:1.6rem 0 .6rem}
.aside ul{list-style:none;margin:0;padding:0;font-size:.98rem}
.aside li{padding:.25rem 0}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:600 1.1rem var(--f-head);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--clay);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"-"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:.8rem 0 0;color:var(--ink-soft);max-width:60ch}

/* produkter */
.brandrow{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.brandrow:nth-child(even)>:first-child{order:2}
.brandrow img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.brandrow .logo-box{background:#fff;padding:48px;border-radius:var(--r)}
.brandrow .logo-box img{object-fit:contain}
.brandrow h2{margin-bottom:.3em}
.brandrow .kind{color:var(--clay);font-weight:600;margin-bottom:1rem}

/* kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;padding:56px 28px 104px}
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-weight:600;font-size:.95rem}
.field input,.field textarea,.field select{font:inherit;padding:.9rem 1rem;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--clay);outline-offset:1px}

/* footer */
.footer{background:var(--forest);color:var(--paper);padding:88px 0 28px}
.footer .big{font:500 clamp(2.6rem,7vw,6rem)/1 var(--f-head);letter-spacing:-.04em;text-decoration:none;display:inline-block;border-bottom:4px solid var(--sage);padding-bottom:.15em;margin-bottom:64px}
.footer .big:hover{border-color:var(--dune)}
.footer .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px}
.footer h3{font-size:1rem;color:var(--sage);margin-bottom:.8rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
.footer .bottom{margin-top:56px;padding-top:20px;border-top:1px solid #4a3a30;font-size:.88rem;color:#cdb9a5;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mobile-book{display:none}

@media (prefers-reduced-motion:reduce){.hero img{animation:none}html{scroll-behavior:auto}}

@media (max-width:980px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:flex-start;padding:20px 28px 28px;border-bottom:1px solid var(--line);gap:1rem}
  .nav.open{display:flex}
  .menu-toggle{display:inline-block}
  .header-cta .btn{display:none}
  .hero .wrap,.split,.page-head.has-img .wrap,.detail,.brandrow,.contact,.pricepage,.menu-group,.facts{grid-template-columns:minmax(0,1fr);gap:36px}
  .split.rev>:first-child,.brandrow:nth-child(even)>:first-child{order:0}
  .section{padding:72px 0}
  .cols2{columns:1}
  .index{position:static;display:flex;flex-wrap:wrap;gap:.5rem}
  .index button{border:1.5px solid var(--line);border-radius:var(--r);padding:.55rem .9rem}
  .index button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .aside{position:static}
  .brandlist li{grid-template-columns:minmax(0,1fr) 72px}
  .brandlist li p{grid-column:1}
  .brandlist img{grid-column:2;grid-row:1 / span 2;width:72px;height:72px}
  .footer .grid{grid-template-columns:1fr 1fr}
  .pricepage .menu-group{padding-top:20px}
}
@media (max-width:620px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .hero{padding:36px 0 64px}
  .detail,.pricepage,.contact{padding-left:20px;padding-right:20px}
  .footer .grid{grid-template-columns:1fr}
  .mobile-book{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;text-align:center;box-shadow:0 12px 28px -10px rgba(35,23,18,.5)}
  body{padding-bottom:76px}
}

/* v3: booking-first layout efter mønstret fra Fresha m.fl. */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;max-width:var(--wrap);margin:0 auto;padding:40px 28px 104px;align-items:start}
.layout>main,.layout>div:first-child{min-width:0}
.bookcard{position:sticky;top:104px;background:#fff;border:1.5px solid var(--ink);border-radius:var(--r);padding:26px}
.bookcard h2{font-size:1.55rem;margin:0 0 .2rem}
.bookcard .price{font:600 2.3rem/1 var(--f-head);letter-spacing:-.03em;margin:.6rem 0 .2rem}
.bookcard .btn{display:block;text-align:center;width:100%;margin:1rem 0}
.bookcard dl{margin:0}
.bookcard dl div{display:flex;gap:.8rem;padding:.85rem 0;border-top:1px solid var(--line);font-size:.97rem}
.bookcard dt{font-weight:600;min-width:84px}
.bookcard dd{margin:0;color:var(--ink-soft)}
.status{font-weight:600}
.status.open{color:#2f6b3d}.status.closed{color:var(--clay)}
.mosaic{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:100%;min-height:440px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);aspect-ratio:auto}
.mosaic img:first-child{grid-row:1 / span 2;object-position:50% 20%}
.hero-v3{padding:48px 0 56px}
.hero-v3 .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:stretch}
.hero-v3 h1{font-size:clamp(2.4rem,5vw,4.4rem)}
.stack-sec{margin-bottom:72px;scroll-margin-top:100px}
.stack-sec>h2{font-size:2rem;margin-bottom:1.2rem}
.tabs{display:flex;gap:.5rem;overflow-x:auto;position:sticky;top:80px;z-index:10;background:var(--paper);padding:12px 0;margin-bottom:.5rem;border-bottom:1px solid var(--line)}
.tabs button,.tabs a{white-space:nowrap;font:500 .98rem var(--f-body);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.6rem 1.1rem;color:var(--ink);cursor:pointer;text-decoration:none}
.tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.menu-book li{grid-template-columns:minmax(0,1fr) auto auto;gap:1.2rem;align-items:center;padding:1rem 0;border-top:1px solid var(--line)}
.menu-book .nm .n{font-weight:600;font-size:1.05rem;display:block}
.menu-book .nm .d{margin:.25rem 0 0;font-size:.93rem;color:var(--ink-soft);max-width:60ch}
.menu-book .p{font:600 1.05rem var(--f-head)}
.rowbook{font:600 .9rem var(--f-body);border:1.5px solid var(--ink);border-radius:999px;padding:.5rem 1.1rem;text-decoration:none;color:var(--ink)}
.rowbook:hover{background:var(--ink);color:var(--paper)}
.panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--forest);color:var(--paper);border-radius:var(--r);overflow:hidden;margin-bottom:72px}
.panel img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;min-height:320px}
.panel>div{padding:36px}
.panel h2{font-size:1.9rem}
.panel .bigprice{font-size:3.4rem;margin:.6rem 0}
.chipinfo{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 0;padding:0;list-style:none}
.chipinfo li{background:var(--sand);border-radius:999px;padding:.45rem .95rem;font-size:.92rem}
@media (max-width:980px){
  .layout,.hero-v3 .wrap,.panel{grid-template-columns:minmax(0,1fr);gap:36px}
  .bookcard{position:static;order:-1}
  .mosaic{min-height:320px}
  .tabs{top:80px}
}
@media (max-width:620px){
  .layout{padding:24px 20px 80px}
  .menu-book li{grid-template-columns:minmax(0,1fr) auto}
  .menu-book .p{grid-column:2;grid-row:1}
  .menu-book .rowbook{grid-column:1;justify-self:start}
  .panel>div{padding:24px}
}.panel .soft{color:#d8c6b3}
.panel h2{color:var(--paper)}


/* v4: personligt, med Gails egne fotos og mærkets mintgrønne og kobber */
body{background:var(--paper)}
.header{background:var(--paper)}
.btn-primary{background:var(--clay);border-color:var(--clay)}
.btn-primary:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.status.open{color:#2D6B45}
.hero-room{position:relative;background:var(--mist);overflow:hidden}
.hero-room img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%}
.hero-room::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,rgba(251,248,242,.92) 30%,rgba(251,248,242,0) 62%)}
.hero-room .wrap{position:relative;z-index:2;min-height:620px;display:flex;align-items:center}
.hero-room .txt{max-width:560px;padding:56px 0}
.hero-room h1{font-size:clamp(2.6rem,5.2vw,4.6rem);color:var(--forest)}
.hero-room .actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.welcome{padding:96px 0}
.welcome .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:center}
.welcome img{width:100%;border-radius:var(--r);aspect-ratio:4/5;object-fit:cover}
.welcome h2{font-size:clamp(2rem,3.6vw,3rem);color:var(--forest)}
.hand{font:500 1.3rem var(--f-head);color:var(--clay);margin:1.4rem 0 1.6rem}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.tile{text-decoration:none;display:block}
.tile img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile .im{overflow:hidden;border-radius:var(--r)}
.tile:hover img{transform:scale(1.04)}
.tile h3{margin:.9rem 0 .15rem;font-size:1.25rem;color:var(--forest)}
.tile p{margin:0;color:var(--ink-soft);font-size:.95rem}
.sage-band{background:var(--sage);padding:88px 0}
.sage-band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.sage-band img{border-radius:var(--r);width:100%;object-fit:cover}
.sage-band h2{color:var(--forest)}
.mist-band{background:var(--mist);padding:96px 0}
@media (max-width:980px){
  .hero-room::after{background:linear-gradient(180deg,rgba(251,248,242,.95) 0%,rgba(251,248,242,.85) 55%,rgba(251,248,242,.2) 100%)}
  .hero-room .wrap{min-height:560px;align-items:flex-start}
  .welcome .wrap,.sage-band .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){.hero-room .wrap{min-height:520px}}