/* =====================================================================
   MENSCLUB homepage redesign — dark + wood, booking-first
   Scoped to body.mc-home so no other page is affected.
   Loaded AFTER app_min.css, so it overrides. Fonts: Anton + Archivo.
   ===================================================================== */
body.mc-home{
  --mc-bg:#0c0b0a; --mc-bg2:#141210; --mc-bg3:#1c1916; --mc-line:#2a2521;
  --mc-ink:#f3ede2; --mc-mut:#a49a8c; --mc-wood:#c9985c; --mc-r:8px;
  --mc-header-h:76px;
  background:var(--mc-bg)!important;color:var(--mc-ink);
  font-family:"Archivo",system-ui,sans-serif;
  padding-top:0!important; /* override legacy body padding so the hero video is full-bleed under the transparent header */
}
body.mc-home ::selection{background:var(--mc-wood);color:#1a120a}
body.mc-home .container{max-width:1240px;width:100%;margin:0 auto;padding:0 clamp(20px,4vw,48px);float:none}
body.mc-home h1,body.mc-home h2,body.mc-home h3,body.mc-home .mc-anton{
  font-family:"Anton",Impact,sans-serif!important;font-weight:400!important;
  letter-spacing:.01em;line-height:1.05;text-transform:uppercase;color:var(--mc-ink)!important}
/* accent words stay wood even after the light !important above */
body.mc-home .mc-hero h1 em,body.mc-home h2 em,body.mc-home h3 em,
body.mc-home .mc-sechead h2 .wd,body.mc-home #instagram .section-headline a{color:var(--mc-wood)!important;font-style:normal}
body.mc-home a{color:inherit}
body.mc-home img{max-width:100%}

/* grain */
body.mc-home::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ---- hide legacy decorations on homepage ---- */
body.mc-home .top.homepage,
body.mc-home #barber-seat,
body.mc-home #barber-scissor,
body.mc-home #barber-pole,
body.mc-home .big-reservation-wrapper{display:none!important}

/* ================= NAV / TOP BAR ================= */
/* transparent over the hero video; #main-header turns into a solid bar only once scrolled past the video-overlay. .up-bar is neutralised (was legacy position:fixed;#1a1a1a) so the solid bar actually shows. */
body.mc-home #main-header{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:transparent!important;border-bottom:1px solid transparent!important;box-shadow:none;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
body.mc-home #main-header .up-bar{position:static!important}
/* over the video: keep the menu legible without a bar (button keeps its solid wood pill) */
body.mc-home:not(.mc-scrolled) #main-header #main-nav ul li a,
body.mc-home:not(.mc-scrolled) #main-header .nav-account__item:not(.header-reserver) a{
  text-shadow:0 1px 14px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.6)}
/* scrolled past the video -> solid, defined dark bar */
body.mc-home.mc-scrolled #main-header{background:var(--mc-bg2)!important;border-bottom:1px solid var(--mc-line)!important;box-shadow:0 12px 40px rgba(0,0,0,.5)}
/* kill EVERY legacy border / underline / shadow / stray bg INSIDE the bar; inner elements stay transparent so #main-header's bar shows through */
body.mc-home #main-header .up-bar,
body.mc-home #main-header .up-bar .container,
body.mc-home #main-header .up-bar-container,
body.mc-home #main-header .left,
body.mc-home #main-header #main-nav,
body.mc-home #main-header #main-nav ul,
body.mc-home #main-header #main-nav ul li,
body.mc-home #main-header .nav-account,
body.mc-home #main-header .nav-account__item{border:0!important;box-shadow:none!important;background:transparent!important;text-decoration:none!important}
/* never italic, never blue — uniform header typography */
body.mc-home #main-header a,body.mc-home #main-header span{font-style:normal!important}
body.mc-home #main-header .up-bar .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--mc-header-h);min-height:var(--mc-header-h);padding-top:0;padding-bottom:0}
body.mc-home #mobile-logo-bar{display:inline-flex;align-items:center;flex-shrink:0}
body.mc-home #mobile-logo-bar svg{height:24px;width:auto;max-width:none}
body.mc-home #main-header .up-bar-container{display:flex;align-items:center;gap:26px;margin-left:auto}
/* menu links */
body.mc-home #main-nav .sep{display:none!important}
body.mc-home #main-nav ul{display:flex;gap:24px;margin:0;padding:0;list-style:none;align-items:center}
body.mc-home #main-nav ul li{margin:0}
body.mc-home #main-nav ul li a{font-family:"Archivo"!important;font-size:13px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mc-mut)!important;padding:6px 0!important;border:0!important;transition:color .2s}
body.mc-home #main-nav ul li a:hover{color:var(--mc-ink)!important}
body.mc-home #main-nav ul li.active a{color:var(--mc-wood)!important}
/* account links — uniform, wood hover only; logged-in name truncated cleanly */
body.mc-home .nav-account{display:flex;align-items:center;gap:18px;margin:0;padding:0;list-style:none}
body.mc-home .nav-account__item{margin:0;display:flex;align-items:center}
body.mc-home .nav-account__item a{font-family:"Archivo"!important;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mc-mut)!important;border:0!important;transition:color .2s}
body.mc-home .nav-account__item a:hover{color:var(--mc-wood)!important}
body.mc-home .nav-account__item.logout a{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* bulletproof: override legacy !important blue (#38a9ff) hover/active with matching-or-higher specificity */
body.mc-home #main-header .up-bar .up-bar-container .nav-account__item a:hover{color:var(--mc-wood)!important}
body.mc-home #main-header .up-bar .up-bar-container #main-nav ul li a:hover{color:var(--mc-ink)!important}
body.mc-home #main-header .up-bar .up-bar-container #main-nav ul li.active a{color:var(--mc-wood)!important}
body.mc-home #main-header .nav-account__item a#reserve-btn-header:hover{background:#dcac6d!important;color:#1a120a!important}
body.mc-home #main-header .header-reserver a,body.mc-home #main-header a#reserve-btn-header{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  height:40px!important;padding:0 22px!important;line-height:1!important;box-sizing:border-box!important;
  background:var(--mc-wood)!important;color:#1a120a!important;border:0!important;box-shadow:none!important;outline:none!important;
  border-radius:999px!important;font-size:12.5px;font-weight:700;letter-spacing:.05em;white-space:nowrap!important;
  transition:background .2s,transform .18s}
body.mc-home #main-header .header-reserver a:hover{background:#dcac6d!important;transform:translateY(-1px)}
body.mc-home #main-header .header-reserver{display:flex;align-items:center}
body.mc-home .menu-burger .burger-menu-icon__line,
body.mc-home .menu-burger .burger-menu-icon__line::before,
body.mc-home .menu-burger .burger-menu-icon__line::after{background:var(--mc-ink)!important}

/* ================= HERO (video block) ================= */
body.mc-home #video-section{position:relative;min-height:100dvh;margin:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
body.mc-home #video-section #video{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;z-index:0}
body.mc-home #video-section .video-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,11,10,.6) 0%,rgba(12,11,10,.18) 34%,rgba(12,11,10,.82) 82%,var(--mc-bg) 100%)}
body.mc-home .mc-hero{position:relative;z-index:2;padding-top:120px;padding-bottom:clamp(30px,5vw,54px)}
body.mc-home .mc-hero__logo{height:34px;width:auto;margin-bottom:26px;opacity:.96}
body.mc-home .mc-hero h1{font-size:clamp(52px,10vw,124px);max-width:14ch;margin:0}
body.mc-home .mc-hero h1 em{font-style:normal;color:var(--mc-wood)}
body.mc-home .mc-hero__sub{margin:20px 0 30px;max-width:46ch;font-size:clamp(16px,1.6vw,19px);color:#d9d1c4;line-height:1.55}
body.mc-home .mc-hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* buttons */
body.mc-home .mc-btn{display:inline-flex;align-items:center;gap:.6em;font-family:"Archivo";font-weight:700;font-size:14px;
  letter-spacing:.045em;text-transform:uppercase;padding:15px 30px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s,background .2s,color .2s,border-color .2s;text-decoration:none;white-space:nowrap}
body.mc-home .mc-btn:active{transform:translateY(1px)}
body.mc-home .mc-btn-wood{background:var(--mc-wood);color:#1a120a}
body.mc-home .mc-btn-wood:hover{background:#dcac6d;color:#1a120a}
body.mc-home .mc-btn-ghost{background:rgba(20,18,16,.55);color:var(--mc-ink);border-color:rgba(201,152,92,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.mc-home .mc-btn-ghost:hover{background:rgba(20,18,16,.72);border-color:var(--mc-wood);color:var(--mc-wood)}
/* ASAP: ghost body with a wood edge — reads between the filled primary and the
   plain ghost, so it neither competes with "Rezervovať termín" nor disappears */
body.mc-home .mc-btn-asap{background:rgba(20,18,16,.55);color:var(--mc-ink);border-color:var(--mc-wood);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.mc-home .mc-btn-asap:hover{background:rgba(20,18,16,.72);color:var(--mc-wood)}
body.mc-home .mc-btn-asap svg{width:16px;height:16px;color:var(--mc-wood);flex:0 0 auto}
body.mc-home .mc-btn-asap span{color:var(--mc-mut);font-weight:500;text-transform:none;letter-spacing:.02em}
body.mc-home .mc-btn-asap:hover span{color:var(--mc-ink)}

/* quick-book bar */
body.mc-home .mc-quickbook{position:relative;z-index:2;margin-top:36px;background:var(--mc-bg3);border:1px solid var(--mc-line);
  border-radius:var(--mc-r);padding:20px 24px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;box-shadow:0 30px 70px rgba(0,0,0,.45)}
body.mc-home .mc-quickbook__label{display:flex;flex-direction:column;gap:3px;min-width:140px}
body.mc-home .mc-quickbook__label b{font-family:"Anton";font-size:21px;letter-spacing:.02em;text-transform:uppercase}
body.mc-home .mc-quickbook__label small{color:var(--mc-mut);font-size:12px;letter-spacing:.07em;text-transform:uppercase}
body.mc-home .mc-slots{display:flex;gap:9px;flex-wrap:wrap;flex:1}
body.mc-home .mc-slot{display:flex;flex-direction:column;align-items:center;gap:1px;font-weight:700;font-size:14px;
  padding:9px 15px;border-radius:999px;border:1px solid #3a332b;color:var(--mc-ink);background:var(--mc-bg2);
  text-decoration:none;transition:.18s;line-height:1.15}
body.mc-home .mc-slot small{font-size:9.5px;font-weight:600;letter-spacing:.09em;color:var(--mc-mut);text-transform:uppercase}
body.mc-home .mc-slot:hover{border-color:var(--mc-wood);color:var(--mc-wood);transform:translateY(-2px)}
body.mc-home .mc-slot:hover small{color:var(--mc-wood)}

/* ================= sections generic ================= */
body.mc-home section.section{background:transparent!important;padding:clamp(70px,9vw,120px) 0!important;border:0!important}
body.mc-home .mc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--mc-wood);font-family:"Archivo"}
body.mc-home .mc-rule{height:3px;width:64px;background:var(--mc-wood);border-radius:2px;margin-bottom:22px}
body.mc-home .mc-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:50px}
body.mc-home .mc-sechead h2{font-size:clamp(34px,5.4vw,66px);margin:0}
body.mc-home .mc-sechead p{max-width:42ch;color:var(--mc-mut);margin:12px 0 0;font-size:16px}

/* ---- steps ---- */
body.mc-home .mc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--mc-line);border:1px solid var(--mc-line);border-radius:var(--mc-r);overflow:hidden}
body.mc-home .mc-step{background:var(--mc-bg2);padding:34px 30px;display:flex;flex-direction:column;gap:12px;min-height:210px}
body.mc-home .mc-step__n{font-family:"Anton";font-size:14px;color:var(--mc-wood);letter-spacing:.14em}
body.mc-home .mc-step h3{font-size:23px}
body.mc-home .mc-step p{color:var(--mc-mut);font-size:14.5px;margin:0}
body.mc-home .mc-step svg{width:36px;height:36px;color:var(--mc-wood);stroke:var(--mc-wood);margin-top:auto}

/* ---- barbers ---- */
body.mc-home .mc-barbers{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
body.mc-home .mc-barber{position:relative;border-radius:var(--mc-r);overflow:hidden;background:var(--mc-bg3);aspect-ratio:3/4;text-decoration:none}
body.mc-home .mc-barber.wide{grid-column:span 6}
body.mc-home .mc-barber.tall{grid-column:span 3}
body.mc-home .mc-barber img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.02);transition:transform .5s,filter .4s}
body.mc-home .mc-barber:hover img{transform:scale(1.05);filter:grayscale(0) contrast(1.05)}
body.mc-home .mc-barber__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 42%,rgba(10,8,6,.9))}
body.mc-home .mc-barber__body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
body.mc-home .mc-barber__name{font-family:"Anton";font-size:clamp(22px,2.3vw,30px);text-transform:uppercase;letter-spacing:.02em}
body.mc-home .mc-barber__role{color:var(--mc-mut);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
body.mc-home .mc-barber__book{flex-shrink:0;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;color:var(--mc-ink);background:rgba(20,16,12,.4);transition:.2s}
body.mc-home .mc-barber:hover .mc-barber__book{background:var(--mc-wood);color:#1a120a;border-color:var(--mc-wood)}
body.mc-home .mc-barber__book svg{width:18px;height:18px}

/* ---- services ---- */
body.mc-home .mc-services{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
body.mc-home .mc-svc{display:flex;align-items:center;gap:22px;padding:24px 4px;border-bottom:1px solid var(--mc-line);transition:.2s}
body.mc-home .mc-svc:first-child{border-top:1px solid var(--mc-line)}
body.mc-home .mc-svc:hover{padding-left:12px}
body.mc-home .mc-svc__ico{width:38px;height:38px;flex-shrink:0;color:var(--mc-wood)}
body.mc-home .mc-svc__ico svg{width:100%;height:100%;fill:var(--mc-wood)}
body.mc-home .mc-svc__main{flex:1}
body.mc-home .mc-svc__main b{font-family:"Anton";font-size:22px;letter-spacing:.01em;text-transform:uppercase;font-weight:400;display:block}
body.mc-home .mc-svc__main span{color:var(--mc-mut);font-size:13.5px}
body.mc-home .mc-svc__price{font-family:"Anton";font-size:29px;color:var(--mc-wood);letter-spacing:.02em;white-space:nowrap}
body.mc-home .mc-svc-note{background:var(--mc-bg3);border:1px solid var(--mc-line);border-radius:var(--mc-r);padding:34px;
  background-image:repeating-linear-gradient(105deg,rgba(201,152,92,.05) 0 2px,transparent 2px 9px)}
body.mc-home .mc-svc-note h3{font-size:25px;margin:0 0 12px}
body.mc-home .mc-svc-note p{color:var(--mc-mut);font-size:15px;margin:0 0 22px;line-height:1.55}

/* ---- space ---- */
body.mc-home .mc-mood{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:16px}
body.mc-home .mc-mood figure{margin:0;position:relative;border-radius:var(--mc-r);overflow:hidden;background:var(--mc-bg3)}
body.mc-home .mc-mood figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.03)}
body.mc-home .mc-mood .m1{grid-row:span 2;min-height:440px}
body.mc-home .mc-mood .m2{min-height:212px}
body.mc-home .mc-mood .m3{min-height:212px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(135deg,#1c1712,#0f0c09);padding:26px}
body.mc-home .mc-mood .m3 b{font-family:"Anton";font-size:28px;text-transform:uppercase;line-height:1}
body.mc-home .mc-mood .m3 span{color:var(--mc-mut);font-size:13px;margin-top:8px}
body.mc-home .mc-ph{position:absolute;left:14px;bottom:14px;z-index:2;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#e9dfce;background:rgba(12,10,8,.6);border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:6px}

/* ---- instagram ---- */
body.mc-home #instagram .section-headline{font-family:"Anton"!important;font-size:clamp(30px,4.4vw,52px)!important;color:var(--mc-ink)!important;text-transform:uppercase;margin-bottom:36px}
body.mc-home #instagram .section-headline a{color:var(--mc-wood)!important}
body.mc-home .mc-ig{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
body.mc-home .mc-ig a{position:relative;aspect-ratio:1;border-radius:var(--mc-r);overflow:hidden;background:var(--mc-bg3);display:block;background-size:cover;background-position:center}
body.mc-home .mc-ig a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,8,6,.75));opacity:0;transition:.25s}
body.mc-home .mc-ig a:hover::after{opacity:1}
body.mc-home .mc-ig svg{position:absolute;top:14px;right:14px;width:22px;height:22px;fill:#fff;opacity:0;transition:.25s;z-index:2}
body.mc-home .mc-ig a:hover svg{opacity:1}
body.mc-home .mc-ig-empty{border:1px dashed var(--mc-line);border-radius:var(--mc-r);padding:40px;text-align:center;color:var(--mc-mut)}
/* Instagram placeholders — shown until a token is added, then auto-replaced by real posts */
body.mc-home .mc-ig-ph{position:relative;aspect-ratio:1;border-radius:var(--mc-r);overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-decoration:none;border:1px solid var(--mc-line);
  background:linear-gradient(150deg,var(--mc-bg3),var(--mc-bg2));transition:transform .2s,border-color .2s}
body.mc-home .mc-ig-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(125deg,rgba(201,152,92,.05) 0 2px,transparent 2px 11px)}
body.mc-home .mc-ig-ph:nth-child(2n){background:linear-gradient(150deg,#1b1611,var(--mc-bg))}
body.mc-home .mc-ig-ph:nth-child(3n){background:linear-gradient(150deg,var(--mc-bg2),#191510)}
body.mc-home .mc-ig-ph:hover{border-color:var(--mc-wood);transform:translateY(-3px)}
body.mc-home .mc-ig-ph svg{position:static!important;top:auto!important;right:auto!important;width:30px!important;height:30px!important;opacity:.9!important;fill:var(--mc-wood)!important;z-index:1}
body.mc-home .mc-ig-ph span{position:relative;z-index:1;font-family:"Archivo";font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mc-mut)}
body.mc-home .mc-ig-follow{margin-top:24px;text-align:center}

/* ---- account CTA ---- */
body.mc-home .mc-account{background:linear-gradient(135deg,#191410,#0d0b09 70%);border:1px solid var(--mc-line);border-radius:var(--mc-r);
  padding:clamp(38px,6vw,68px);display:grid;grid-template-columns:1.2fr 1fr;gap:46px;align-items:center;
  background-image:repeating-linear-gradient(100deg,rgba(201,152,92,.045) 0 3px,transparent 3px 12px)}
body.mc-home .mc-account h2{font-size:clamp(32px,4.2vw,52px);margin:0}
body.mc-home .mc-account p{color:var(--mc-mut);max-width:40ch;margin:16px 0 28px;line-height:1.55}
body.mc-home .mc-account__cta{display:flex;gap:14px;flex-wrap:wrap}
body.mc-home .mc-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
body.mc-home .mc-perks li{display:flex;gap:13px;align-items:flex-start;font-size:15px}
body.mc-home .mc-perks svg{width:21px;height:21px;color:var(--mc-wood);stroke:var(--mc-wood);flex-shrink:0;margin-top:1px}
body.mc-home .mc-perks b{color:var(--mc-ink)}

/* ================= CONTACT + FOOTER reskin ================= */
body.mc-home #contact .section-headline,body.mc-home #contact h2{font-family:"Anton"!important;color:var(--mc-ink)!important;font-size:clamp(30px,4.4vw,52px)!important;text-transform:uppercase}
/* labels: kill the legacy white "notch" box, make them clean uppercase captions above the field */
body.mc-home #contact .form-group{display:block!important;margin-bottom:30px!important}
body.mc-home #contact .form-group input,body.mc-home #contact .form-group textarea{width:100%!important;padding:13px 16px!important}
body.mc-home #contact .form-group label{background:transparent!important;position:static!important;top:auto!important;left:auto!important;
  flex:none!important;display:block!important;padding:0 0 8px!important;margin:0!important;color:var(--mc-mut)!important;
  font-family:"Archivo"!important;font-size:12px!important;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase}
body.mc-home #contact input,body.mc-home #contact textarea{background:var(--mc-bg3)!important;border:1px solid var(--mc-line)!important;color:var(--mc-ink)!important;border-radius:var(--mc-r)!important}
body.mc-home #contact input::placeholder,body.mc-home #contact textarea::placeholder{color:#7d7466!important}
body.mc-home #contact input:focus,body.mc-home #contact textarea:focus{border-color:var(--mc-wood)!important;outline:none!important}
/* contact aside — replaces the empty envelope icon with real, on-brand contact content */
body.mc-home #contact .contact-row{align-items:center}
body.mc-home #contact .contact-aside{max-width:430px;padding-right:20px}
body.mc-home #contact .contact-aside h3{font-family:"Anton"!important;font-size:clamp(26px,2.8vw,38px);line-height:1.02;
  text-transform:uppercase;margin:14px 0 16px;color:var(--mc-ink)}
body.mc-home #contact .contact-aside p{color:var(--mc-mut);font-size:15px;line-height:1.6;margin:0 0 28px;max-width:36ch}
body.mc-home #contact .contact-aside__list{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:15px}
body.mc-home #contact .contact-aside__list li{display:flex;align-items:center;gap:15px;font-size:15px;color:var(--mc-ink)}
body.mc-home #contact .contact-aside__list i{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
  background:var(--mc-bg3);border:1px solid var(--mc-line);color:var(--mc-wood);font-size:15px}
body.mc-home #contact .contact-aside__list a{color:var(--mc-ink)!important;text-decoration:none}
body.mc-home #contact .contact-aside__list a:hover{color:var(--mc-wood)!important}
body.mc-home #contact .contact-aside .mc-btn{margin-top:2px}
/* OpenStreetMap frame */
body.mc-home #contact-map.osm-wrap{position:relative;border:1px solid var(--mc-line);border-radius:var(--mc-r);overflow:hidden;margin-bottom:34px}
/* dark-map treatment: invert + hue-rotate turns bright OSM tiles into a dark, muted map that fits the theme */
body.mc-home #contact-map .osm-map{filter:invert(.9) hue-rotate(180deg) brightness(.92) contrast(.86) saturate(.55)}
/* warm wood veil so the map reads black+wood, not cold blue; pointer-events off so the map stays draggable */
body.mc-home #contact-map.osm-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(201,152,92,.06),rgba(12,11,10,.10));mix-blend-mode:overlay}
body.mc-home #contact-map .osm-open{display:inline-block;margin-top:12px;color:var(--mc-wood);font-family:"Archivo";font-weight:600;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
body.mc-home #contact-map .osm-open:hover{color:#dcac6d}
body.mc-home #contact .contact-send input,body.mc-home #contact button{background:var(--mc-wood)!important;color:#1a120a!important;border:0!important;border-radius:999px!important;font-weight:700!important;text-transform:uppercase}
body.mc-home #main-footer{background:var(--mc-bg2)!important;border-top:1px solid var(--mc-line);color:var(--mc-ink)}
body.mc-home #main-footer th{color:var(--mc-mut)!important;font-family:"Archivo"!important;letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:700}
body.mc-home #main-footer td,body.mc-home #main-footer a{color:var(--mc-ink)!important}
body.mc-home #main-footer a:hover{color:var(--mc-wood)!important}
/* copyright strip had a cool blue-grey bg — unify it with the footer */
body.mc-home #main-footer .footer-bottom{background:transparent!important;border-top:1px solid var(--mc-line)}
body.mc-home #main-footer .footer-bottom .copy-rights{color:var(--mc-mut)!important}
body.mc-home .cd-top{background:var(--mc-wood)!important}

/* ---- reveal ---- */
body.mc-home .mc-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
body.mc-home .mc-reveal.in{opacity:1;transform:none}

/* ================= responsive ================= */
/* ---- header: strip legacy white borders/shadows/separators (clean redesign header) ---- */
body.mc-home #main-header .up-bar,
body.mc-home #main-header .up-bar-container,
body.mc-home #main-header .up-bar .container,
body.mc-home #main-header .nav-account,
body.mc-home #main-header .nav-account__item,
body.mc-home #main-header .left{border:0!important;box-shadow:none!important;background:transparent!important}
body.mc-home #main-header .nav-account .sep,
body.mc-home #main-header .nav-account__item::before,
body.mc-home #main-header .nav-account__item::after{display:none!important;content:none!important}
body.mc-home #main-header .header-reserver a{border:0!important}

/* ================= mobile drawer — refreshed (homepage only) ================= */
body.mc-home #mobile-side-bar{background:var(--mc-bg)!important;width:min(88vw,360px)!important;box-shadow:0 0 80px rgba(0,0,0,.72);transform:translateX(-101%)!important;z-index:1200!important}
body.mc-home.menu-open #mobile-side-bar{transform:translateX(0)!important}
/* hide the fixed page header while the drawer is open (avoids doubled logo / floating button) */
body.mc-home.menu-open #main-header{opacity:0!important;pointer-events:none!important}
body.mc-home #mobile-side-bar .inner{background:var(--mc-bg)!important;display:flex!important;flex-direction:column;min-height:100%}
/* header: just logo + close, one hairline — no heavy bar */
body.mc-home #mobile-side-bar .header{background:transparent!important;border:0!important;border-bottom:1px solid var(--mc-line)!important;
  justify-content:flex-start!important;padding:24px 28px!important}
body.mc-home #mobile-side-bar .header .inner-logo svg{filter:brightness(0) invert(1);height:38px!important;width:auto!important}
body.mc-home #mobile-side-bar .header .back{background:transparent!important}
body.mc-home #mobile-side-bar .header .back svg path{fill:var(--mc-wood)!important}
/* menu: big heading-font items, NO dividers, wood on hover/active (clean, like the desktop nav — just larger) */
body.mc-home #mobile-side-bar .menu{margin:24px 0 0!important;padding:0!important;width:100%}
body.mc-home #mobile-side-bar .menu li{border:0!important;margin:0}
body.mc-home #mobile-side-bar .menu li a,body.mc-home #mobile-side-bar .menu li .sep{
  border:0!important;background:transparent!important;font-family:"Anton",Impact,sans-serif!important;font-weight:400!important;
  font-size:30px!important;line-height:1.05!important;letter-spacing:.01em;text-transform:uppercase;color:var(--mc-ink)!important;
  padding:11px 28px!important;transition:color .2s}
body.mc-home #mobile-side-bar .menu li a:hover,body.mc-home #mobile-side-bar .menu li.active>a{color:var(--mc-wood)!important;background:transparent!important}
body.mc-home #mobile-side-bar .menu li.active{border:0!important}
body.mc-home #mobile-side-bar .menu .caret{border-top-color:var(--mc-wood)!important}
/* buttons: pinned to the bottom, clean */
body.mc-home #mobile-side-bar .btns{margin-top:auto!important;padding:26px 28px 32px!important;display:flex;flex-direction:column;gap:12px}
body.mc-home #mobile-side-bar .btns .btn{border-radius:999px!important;font-family:"Archivo"!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.06em;font-size:13px!important;padding:15px 20px!important;text-align:center;border:0}
body.mc-home #mobile-side-bar .btns #login-btn-mobile{background:var(--mc-wood)!important;color:#1a120a!important}
body.mc-home #mobile-side-bar .btns #register-btn-mobile{background:transparent!important;color:var(--mc-ink)!important;border:1px solid var(--mc-line)!important}
body.mc-home #site-overlay{background:rgba(6,5,4,.66)!important}

/* ================= responsive ================= */
/* ---- flash / info modal (#modal-flash, shared Bootstrap modal) ---- */
body.mc-home #modal-flash .modal-content{background:var(--mc-bg2)!important;border:1px solid var(--mc-line)!important;
  border-radius:var(--mc-r)!important;color:var(--mc-ink)!important;box-shadow:0 40px 120px rgba(0,0,0,.62)!important;overflow:hidden}
body.mc-home #modal-flash .modal-header{border-bottom:1px solid var(--mc-line)!important;background:transparent!important;
  padding:20px 26px!important;display:flex!important;align-items:center;justify-content:space-between}
body.mc-home #modal-flash .modal-title{font-family:"Anton"!important;font-size:22px!important;text-transform:uppercase;letter-spacing:.02em;color:var(--mc-ink)!important;margin:0}
body.mc-home #modal-flash .modal-header .close{position:static!important;margin:0!important;opacity:1!important;text-shadow:none!important;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--mc-line)!important;
  background:transparent!important;color:var(--mc-mut)!important;font-size:22px;line-height:1;transition:.2s;float:none!important}
body.mc-home #modal-flash .modal-header .close:hover{color:var(--mc-wood)!important;border-color:var(--mc-wood)!important}
body.mc-home #modal-flash .modal-body{background:transparent!important;padding:34px 26px!important;text-align:center;color:var(--mc-ink)!important;font-size:16px}
body.mc-home #modal-flash .modal-body .flash{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;text-align:left;background:transparent!important;border:0!important;padding:0!important;color:var(--mc-ink)!important}
body.mc-home #modal-flash .modal-body .flash .ico svg{width:34px;height:34px;fill:var(--mc-wood)!important}
body.mc-home #modal-flash .modal-footer{border-top:1px solid var(--mc-line)!important;background:transparent!important;padding:18px 26px!important;display:flex;justify-content:flex-end}
body.mc-home #modal-flash .modal-footer .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--mc-wood)!important;color:#1a120a!important;
  border:0!important;border-radius:999px!important;font-family:"Archivo"!important;font-weight:700!important;font-size:13px!important;letter-spacing:.05em;
  text-transform:uppercase;padding:12px 26px!important;box-shadow:none!important;text-shadow:none!important;transition:background .2s}
body.mc-home #modal-flash .modal-footer .btn:hover{background:#dcac6d!important}

@media(max-width:1000px){
  body.mc-home .mc-services{grid-template-columns:1fr;gap:34px}
  body.mc-home .mc-account{grid-template-columns:1fr;gap:30px}
  body.mc-home .mc-mood{grid-template-columns:1fr}
  body.mc-home .mc-mood .m1{grid-row:auto;min-height:300px}
  body.mc-home .mc-barber.wide{grid-column:span 12}
  body.mc-home .mc-barber.tall{grid-column:span 6}
  body.mc-home .mc-ig{grid-template-columns:repeat(2,1fr)}
}

/* ---- tablet / phone: nav collapses into the burger drawer ---- */
@media(max-width:760px){
  body.mc-home #main-nav,
  body.mc-home .nav-account__item.hidden-sm,
  body.mc-home .nav-account__item.logout{display:none!important}
  /* smaller header on mobile (variable keeps padding-top + video height in sync) */
  /* push page content below the fixed header on mobile (video no longer full-bleed under it) */
  body.mc-home{--mc-header-h:62px;padding-top:66px!important}
  body.mc-home #main-header .up-bar .container{gap:12px}
  /* legacy sets #mobile-logo-bar height:30px + svg height:100%; resize the container (higher specificity) so the logo grows */
  body.mc-home #main-header #mobile-logo-bar{width:auto!important;height:32px!important;padding-right:0!important;flex-shrink:0}
  body.mc-home #main-header #mobile-logo-bar svg{height:100%!important;width:auto!important}
  /* reserve button: compact wood pill (high specificity to beat the base padding:0 22px) */
  body.mc-home #main-header a#reserve-btn-header{padding:0 15px!important;height:38px!important;font-size:11px!important;letter-spacing:.03em}
  /* hero */
  body.mc-home .mc-hero{padding-top:24px;padding-bottom:30px}
  /* the header already carries the MENSCLUB mark on mobile — drop the duplicate above the h1 */
  body.mc-home .mc-hero__logo{display:none}
  body.mc-home .mc-hero h1{font-size:clamp(42px,13vw,62px);max-width:100%}
  body.mc-home .mc-hero__sub{font-size:16px;margin:16px 0 24px}
  body.mc-home .mc-hero__cta{gap:10px}
  body.mc-home .mc-hero__cta .mc-btn{flex:1 1 0;justify-content:center;min-width:0;padding:15px 14px}
  /* ASAP carries the longest label and .mc-btn never wraps; give it its own row
     rather than squeezing three nowrap pills into a tablet width */
  body.mc-home .mc-hero__cta .mc-btn-asap{flex:1 0 100%}
  /* quick-book stacks vertically */
  body.mc-home .mc-quickbook{flex-direction:column;align-items:stretch;gap:14px;padding:16px;margin-top:26px}
  body.mc-home .mc-quickbook__label{min-width:0;flex-direction:row;justify-content:space-between;align-items:baseline}
  body.mc-home .mc-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  body.mc-home .mc-slot{padding:12px 4px;min-height:48px;justify-content:center}
  body.mc-home .mc-quickbook>.mc-btn{width:100%;justify-content:center}
  /* section rhythm on mobile */
  body.mc-home section.section{padding:52px 0!important}
  body.mc-home .container.mc-reveal[style]{margin-top:52px!important}
  body.mc-home .mc-sechead{margin-bottom:28px;gap:12px}
  body.mc-home .mc-sechead h2{font-size:clamp(30px,8vw,42px)}
  /* steps stack; drop the forced line break + let the icon sit right under the text */
  body.mc-home .mc-steps{grid-template-columns:1fr}
  /* mobile: number + icon + title on ONE line, description below → compact cards */
  body.mc-home .mc-step{min-height:0;padding:20px 22px;display:grid;align-items:center;gap:8px 9px;
    grid-template-columns:auto auto 1fr;grid-template-areas:"num icon title" "desc desc desc"}
  body.mc-home .mc-step h3 br{display:none!important}
  body.mc-home .mc-step__n{grid-area:num}
  body.mc-home .mc-step svg{grid-area:icon;width:20px;height:20px;margin:0!important}
  body.mc-home .mc-step h3{grid-area:title;font-size:20px;line-height:1.05}
  body.mc-home .mc-step p{grid-area:desc;margin:0}
  /* services stack */
  body.mc-home .mc-svc{gap:14px;padding:18px 2px}
  body.mc-home .mc-svc__price{font-size:24px}
  /* barbers: tidy 2-up grid */
  body.mc-home .mc-barber.wide,body.mc-home .mc-barber.tall{grid-column:span 6}
  body.mc-home .mc-barber__body{padding:14px}
  body.mc-home .mc-barber__name{font-size:18px}
  body.mc-home .mc-barber__book{width:38px;height:38px}
  /* account CTA buttons full width */
  body.mc-home .mc-account{padding:32px 24px}
  body.mc-home .mc-account__cta{flex-direction:column}
  body.mc-home .mc-account__cta .mc-btn{width:100%;justify-content:center}
  /* contact: stack aside above form cleanly (was overlapping via flex align-items:center) */
  body.mc-home #contact .contact-row{display:block!important;align-items:stretch!important}
  body.mc-home #contact .contact-row .col-md-4,body.mc-home #contact .contact-row .col-md-8{width:100%!important;max-width:100%!important;flex:none!important}
  body.mc-home #contact .contact-aside{max-width:none;padding-right:0;margin-bottom:40px}
  body.mc-home #contact .contact-aside .mc-btn{width:100%;justify-content:center}
}

/* ---- small phones ---- */
@media(max-width:430px){
  body.mc-home .container{padding:0 18px}
  body.mc-home #main-header a#reserve-btn-header{padding:0 12px!important;height:36px!important;font-size:9.5px!important;letter-spacing:.02em}
  body.mc-home .mc-hero__cta{flex-direction:column;align-items:stretch}
  body.mc-home .mc-hero__cta .mc-btn{width:100%}
  body.mc-home .mc-slots{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  body.mc-home .mc-reveal{opacity:1;transform:none;transition:none}
  body.mc-home .mc-barber img{transition:none}
}

/* ===================================================================== */
/* ===== AUTH SIDE PANELS (login / register / forgotten) on the HOMEPAGE  */
/* The panels live in @layout.latte and open on every page, but the home  */
/* page loads only redesign.css (app pages load redesign-app.css). Mirror  */
/* the dark panel styling here so it isn't left white/legacy on the home.  */
/* ===================================================================== */
body.mc-home .side-panel{position:fixed;top:0;height:100vh;width:min(94vw,440px)!important;max-width:440px!important;z-index:1300!important;
  background:var(--mc-bg2)!important;border-left:1px solid var(--mc-line);box-shadow:-30px 0 90px rgba(0,0,0,.62);
  display:flex;flex-direction:column;overflow-y:auto;color:var(--mc-ink)}
body.mc-home .side-panel .headline{display:flex!important;align-items:center;justify-content:space-between;flex-shrink:0;margin:0;
  padding:22px 26px!important;border-bottom:1px solid var(--mc-line)!important;background:transparent!important}
body.mc-home .side-panel .headline h3{position:static!important;left:auto!important;transform:none!important;text-align:left!important;
  font-family:"Anton"!important;font-size:23px!important;text-transform:uppercase;margin:0;letter-spacing:.02em;color:var(--mc-ink)!important}
/* transform:none matters as much as the position reset — legacy centres this button
   with position:absolute;top:50%;transform:translateY(-50%), and an unreset transform
   still lifts it half its own height (20px) above the flex-centred headline row */
body.mc-home .side-panel .headline .close{position:static!important;top:auto!important;right:auto!important;left:auto!important;transform:none!important;order:2;
  cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:999px;color:var(--mc-mut)!important;border:1px solid var(--mc-line);background:transparent!important;transition:.2s}
body.mc-home .side-panel .headline .close:hover{color:var(--mc-wood)!important;border-color:var(--mc-wood)}
body.mc-home .side-panel .headline .close i{font-size:16px}
body.mc-home .side-panel .content{display:block!important;padding:26px!important;text-align:left!important;flex:1;background:transparent!important}
body.mc-home .side-panel .content.center{align-items:stretch!important;justify-content:flex-start!important}
body.mc-home .side-panel .content>div{width:100%}
body.mc-home .side-panel .form-group{margin-bottom:22px!important;display:block!important;position:static!important}
body.mc-home .side-panel .form-group label,
body.mc-home .side-panel label{position:static!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;
  display:block!important;width:auto!important;height:auto!important;margin:0 0 12px!important;padding:0!important;background:transparent!important;
  color:var(--mc-mut)!important;font-family:"Archivo"!important;font-size:12px!important;font-weight:700!important;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
body.mc-home .side-panel input[type=text],body.mc-home .side-panel input[type=email],body.mc-home .side-panel input[type=tel],
body.mc-home .side-panel input[type=password],body.mc-home .side-panel input[type=number]{
  width:100%;background:var(--mc-bg3)!important;border:1px solid var(--mc-line)!important;color:var(--mc-ink)!important;
  border-radius:var(--mc-r)!important;padding:14px 16px!important;height:auto!important;min-height:0!important;
  font-family:"Archivo"!important;font-size:15px!important;box-shadow:none!important;transition:border-color .2s}
body.mc-home .side-panel input::placeholder{color:#7d7466!important}
body.mc-home .side-panel input:focus{border-color:var(--mc-wood)!important;outline:none!important}
body.mc-home .side-panel input[type=submit],body.mc-home .side-panel button[type=submit]{width:100%;margin:0;
  display:inline-flex;align-items:center;justify-content:center;background:var(--mc-wood)!important;color:#1a120a!important;
  border:0!important;border-radius:999px!important;font-family:"Archivo"!important;font-weight:700!important;font-size:13.5px!important;
  letter-spacing:.05em;text-transform:uppercase;padding:15px 28px!important;cursor:pointer;box-shadow:none!important;transition:background .2s}
body.mc-home .side-panel input[type=submit]:hover,body.mc-home .side-panel button[type=submit]:hover{background:#dcac6d!important}
body.mc-home .side-panel .hidden-fb-form,body.mc-home .side-panel .hide{display:none!important}
body.mc-home .side-panel .forgotten-pass{margin-top:20px;color:var(--mc-mut);font-size:14px;line-height:1.5}
body.mc-home .side-panel .forgotten-pass .link{color:var(--mc-wood)!important;cursor:pointer;font-weight:600;text-decoration:none}
body.mc-home .side-panel .forgotten-pass .link:hover{text-decoration:underline}
body.mc-home .side-panel .form-group-checkbox-out{text-align:left!important;margin-bottom:16px!important}
body.mc-home .side-panel .form-group-checkbox-out label{display:flex!important;align-items:flex-start;justify-content:flex-start;gap:11px;cursor:pointer;margin:0;
  color:var(--mc-mut)!important;font-family:"Archivo"!important;font-size:13px!important;font-weight:500!important;letter-spacing:0;text-transform:none;line-height:1.4}
body.mc-home .side-panel .form-group-checkbox-out input[type=checkbox]{-webkit-appearance:none!important;appearance:none!important;display:inline-block!important;
  position:static!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  width:20px!important;height:20px!important;min-width:20px;flex-shrink:0;margin:1px 0 0!important;cursor:pointer;
  background:var(--mc-bg3)!important;border:1.5px solid rgba(201,152,92,.4)!important;border-radius:6px!important;transition:background .15s,border-color .15s}
body.mc-home .side-panel .form-group-checkbox-out input[type=checkbox]:hover{border-color:var(--mc-wood)!important}
body.mc-home .side-panel .form-group-checkbox-out input[type=checkbox]:checked{border-color:var(--mc-wood)!important;
  background:var(--mc-wood) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231a120a'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center/13px 13px no-repeat!important}
body.mc-home .side-panel .form-group-checkbox-out .check{display:none!important}
@media(max-width:600px){
  body.mc-home .side-panel{width:100vw!important;max-width:100vw!important}
}