/* ===== De Brow Vrouw — 2.0 (Vanity concept) ===== */
:root{
  --cream:#FBF3EE; --blush:#F4DDD4; --blush-soft:#F8E8E1;
  --rose:#C4897B; --rose-deep:#A96C5D; --rosewood:#7C4B3D;
  --espresso:#4A362C; --espresso-soft:#7A6155; --paper:#FFFDFB;
}
*{margin:0;padding:0;box-sizing:border-box; font-optical-sizing:none;}
html{scroll-behavior:smooth;}
body{background:var(--cream); color:var(--espresso); font-family:'Work Sans',sans-serif; line-height:1.6;}
h1,h2,h3{font-family:'Lora',serif; font-weight:500; color:var(--rosewood); line-height:1.15;}
em{font-style:italic; font-weight:400; color:var(--rose-deep);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1080px; margin:0 auto; padding:0 40px;}
.eyebrow{font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-deep); font-weight:600;}
.anchor{display:block; position:relative; top:-90px; visibility:hidden;}

/* promo announcement bar */
.promo{
  position:sticky; top:0; z-index:250; background:var(--rosewood); color:var(--paper);
  text-align:center; font-size:13px; padding:10px 44px; font-weight:500;
}
.promo a{text-decoration:underline; font-weight:600;}

.social-fixed{position:fixed; top:64px; right:32px; z-index:200; display:flex; gap:14px; align-items:center;}
.social-fixed a{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--rosewood);
  background:var(--paper); border-radius:50%;
  box-shadow:0 12px 26px -14px rgba(124,75,61,.4);
}
.social-fixed svg{width:20px; height:20px;}

.whatsapp-float{
  position:fixed; bottom:96px; right:26px; z-index:200;
  background:var(--rosewood); color:var(--paper);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(124,75,61,.5); font-size:22px;
}
.whatsapp-float svg{width:26px; height:26px;}

/* floating bottom dock nav — replaces top navbar */
.dock{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; gap:4px; background:var(--paper); padding:8px; border-radius:100px;
  box-shadow:0 20px 40px -18px rgba(124,75,61,.4);
}
.dock a{padding:10px 18px; border-radius:100px; font-size:12.5px; font-weight:600; color:var(--espresso-soft);}
.dock a:hover{background:var(--blush-soft); color:var(--rosewood);}
.dock a.cta{background:var(--rosewood); color:var(--paper);}

/* ===== HERO — vanity mirror ===== */
.hero{padding:190px 0 40px; text-align:center;}
.mirror{
  width:300px; height:300px; border-radius:50%; margin:0 auto;
  position:relative; overflow:hidden;
  border:10px solid var(--paper);
  box-shadow:0 0 0 2px var(--blush), 0 30px 60px -20px rgba(124,75,61,.4);
}
.mirror img{width:100%; height:100%; object-fit:cover;}
.hero h1{font-size:44px; margin-top:40px; -webkit-user-select:none; user-select:none;}
.hero p.lead{max-width:380px; margin:18px auto 0; color:var(--espresso-soft); font-size:15.5px;}
.hero-meta{margin-top:14px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-deep); font-weight:600;}

/* ===== ABOUT — magazine wrap ===== */
.about{padding:130px 0 90px;}
.about-col{max-width:880px; margin:0 auto; text-align:left;}
.about-col .eyebrow{text-align:center; display:block;}
.about-col h2{text-align:center; font-size:34px; margin-top:12px;}
.about-body{margin-top:40px; display:flex; gap:36px; align-items:flex-start;}
.float-img{
  flex:0 0 300px; width:300px;
  border-radius:6px 60px 6px 6px; overflow:hidden; aspect-ratio:4/5;
}
.float-img img{width:100%; height:100%; object-fit:cover;}
.about-text{flex:1; font-size:15.5px; color:var(--espresso-soft); padding-top:4px;}
.about-text strong{color:var(--rosewood);}

/* ===== SERVICES — shelves ===== */
.services{padding:90px 0 60px; background:var(--blush-soft);}
.services-head{text-align:center; margin-bottom:60px;}
.services-head .eyebrow{justify-content:center; display:block;}
.services-head h2{font-size:34px; margin-top:12px;}
.swipe-hint{display:none;}
.shelf{margin-bottom:56px; position:relative;}
.shelf-label{font-family:'Lora',serif; font-style:italic; color:var(--rose-deep); font-size:15px; margin-bottom:20px;}
.shelf-items{display:flex; gap:18px; overflow-x:auto; padding-bottom:24px; position:relative; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.shelf-items::after{
  content:""; position:absolute; bottom:16px; left:0; right:0; height:3px; background:var(--rose); border-radius:2px; opacity:.5;
}
/* Let op: er stond hier eerder een fade-gradient als swipe-hint aan de rechterrand.
   Die overlay lag over ALLE kaarten heen, dus ook over de omgedraaide (donkere)
   achterkant — waardoor de lichte kleur er lelijk overheen mengde. Verwijderd;
   de tekst-hint ("Swipe voor meer") en de deels zichtbare volgende kaart geven
   al genoeg signaal dat er meer te scrollen valt, zonder dit visuele risico. */
.jar{
  flex:0 0 auto; width:170px; height:252px;
  position:relative; z-index:1; scroll-snap-align:start;
  perspective:1200px; cursor:pointer;
}
.jar-inner{
  position:relative; width:100%; height:100%;
  transition:transform .55s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.jar.flipped .jar-inner{transform:rotateY(180deg);}
.jar-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:16px 16px 8px 8px; padding:18px 15px;
  box-shadow:0 16px 26px -18px rgba(124,75,61,.3);
  display:flex; flex-direction:column; text-align:center;
}
.jar-front{background:var(--paper);}
.jar-back{background:var(--rosewood); color:var(--blush-soft); transform:rotateY(180deg); text-align:left; padding:20px 16px;}
.jar .j-icon{width:34px; height:34px; border-radius:50%; background:var(--blush-soft); margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
.jar .j-name{font-size:13.5px; line-height:1.25; min-height:2.5em; font-weight:600; display:flex; align-items:center; justify-content:center;}
.jar-back .j-back-name{font-size:13px; font-weight:600; color:var(--paper); font-family:'Lora',serif;}
.jar-back .j-back-desc{font-size:12px; line-height:1.55; margin-top:8px; color:var(--blush-soft); flex:1; overflow:hidden;}
/* Op de achterkant tonen we alleen de volledige beschrijving — geen prijs/duur,
   zodat de tekst in één oogopslag leesbaar is. */
.jar-back .j-bottom{display:none;}
.jar-back .flip-hint{margin-top:auto; padding-top:10px; border-top:1px dashed rgba(255,253,251,.3);}
/* Prijs + duur worden altijd onderaan de kaart geduwd — zo staan alle prijzen
   op precies dezelfde hoogte, ongeacht hoe lang de naam of tekst erboven is. */
.j-bottom{margin-top:auto; padding-top:10px;}
.jar-front .j-bottom{border-top:1px dashed var(--blush);}
.jar .j-price{font-family:'Work Sans',sans-serif; color:var(--rosewood); font-weight:700; font-size:15px;}
.jar .j-was{text-decoration:line-through; color:var(--espresso-soft); font-weight:400; font-size:11px; margin-right:4px;}
.jar .j-time{font-size:10px; color:var(--rose-deep); font-weight:600;}
/* Duidelijke "klik voor meer info"-hint */
.flip-hint{
  display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:10px; font-weight:600; letter-spacing:.02em; margin-top:8px;
}
.jar-front .flip-hint{color:var(--rose-deep);}
.jar-back .flip-hint{color:var(--blush);}
.flip-hint svg{width:11px; height:11px;}
.jar:hover{transform:translateY(-2px);}
.jar{transition:transform .2s ease;}

/* ===== PORTFOLIO — large standing frames on a shelf ===== */
.portfolio{padding:110px 0 100px;}
.portfolio-head{text-align:center; margin-bottom:60px;}
.portfolio-head .eyebrow{justify-content:center; display:block;}
.portfolio-head h2{font-size:34px; margin-top:12px;}
.gallery-grid{display:flex; flex-direction:column; gap:14px;}
/* Elk blok: 4 kolommen, 2 rijen, vaste hoogte — 1 grote (2x2) + 4 kleine (1x1) */
.gallery-block{display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(2, 200px); gap:14px;}
.g-item{
  border-radius:16px; overflow:hidden; position:relative; cursor:pointer;
  background:var(--blush); border:none; padding:0;
  box-shadow:0 16px 30px -20px rgba(124,75,61,.35);
}
.g-item.large{grid-column:span 2; grid-row:span 2;}
.g-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.25,.46,.45,.94);}
.g-item:hover img{transform:scale(1.06);}
.g-cap{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px;
  background:linear-gradient(to top, rgba(74,54,44,.72) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.g-item:hover .g-cap{opacity:1;}
.g-cap span{font-family:'Lora',serif; font-style:italic; font-size:13.5px; color:var(--paper);}

/* ===== LIGHTBOX ===== */
.lightbox{
  display:none; position:fixed; inset:0; z-index:500; background:rgba(74,54,44,.92);
  align-items:center; justify-content:center; padding:40px;
}
.lightbox.show{display:flex;}
.lb-inner{max-width:640px; width:100%; text-align:center;}
.lb-inner img{border-radius:16px; max-height:78vh; width:100%; object-fit:contain; background:#000;}
.lb-label{color:var(--paper); margin-top:16px; font-family:'Lora',serif; font-style:italic; font-size:16px;}
.lb-close, .lb-prev, .lb-next{
  position:absolute; background:var(--paper); color:var(--rosewood); border:none;
  width:44px; height:44px; border-radius:50%; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lb-close{top:24px; right:24px;}
.lb-prev{left:24px; top:50%; transform:translateY(-50%);}
.lb-next{right:24px; top:50%; transform:translateY(-50%);}

/* ===== HOURS + REVIEWS ===== */
.info{padding:100px 0; background:var(--blush-soft);}
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:900px; margin:0 auto;}
.pin-card{
  background:var(--paper); padding:28px 30px; border-radius:8px; position:relative;
  box-shadow:0 18px 30px -20px rgba(124,75,61,.3); transform:rotate(-1.5deg);
}
.pin-card::before{
  content:""; position:absolute; top:-8px; left:24px; width:34px; height:14px;
  background:rgba(196,137,123,.5); transform:rotate(-8deg);
}
.pin-card h3{font-size:20px;}
.row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dotted rgba(124,75,61,.25); font-size:14px;}
.row .d{font-weight:600; color:var(--rosewood);}
.row .t{color:var(--espresso-soft);}
.reviews-wrap{display:flex; flex-direction:column; gap:16px; min-height:280px;}
.reviews-wrap .review{animation:review-fade-in .4s ease both;}
.reviews-wrap .review:nth-child(2){animation-delay:.08s;}
.reviews-wrap .review:nth-child(3){animation-delay:.16s;}
@keyframes review-fade-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.review{background:var(--paper); padding:22px 24px; border-radius:8px; box-shadow:0 18px 30px -20px rgba(124,75,61,.3);}
.review .stars{color:var(--rose); font-size:12.5px; letter-spacing:2px;}
.review p{font-family:'Lora',serif; font-style:italic; margin-top:8px; font-size:14px;}
.review .review-author{display:flex; align-items:center; gap:10px; margin-top:14px;}
.review .r-avatar{width:30px; height:30px; border-radius:50%; background:var(--blush-soft); color:var(--rosewood); font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; font-family:'Lora',serif;}
.review .r-name{font-size:12px; font-weight:600; color:var(--rosewood);}
.review .r-meta{font-size:10.5px; color:var(--espresso-soft);}
.google-link{font-size:12.5px; font-weight:600; color:var(--rosewood); text-decoration:underline; align-self:flex-start;}

/* ===== BOOKING ===== */
.booking{padding:110px 0 150px; text-align:center;}
.booking-head{max-width:480px; margin:0 auto 40px;}
.booking-head .eyebrow{justify-content:center; display:block;}
.booking-head h2{font-size:34px; margin-top:12px;}
.submit-pre-note{
  max-width:440px; margin:36px auto 16px; font-size:13px; color:var(--rose-deep);
  background:var(--blush-soft); border-radius:12px; padding:12px 18px; text-align:left;
}
.loc-note{
  max-width:440px; margin:20px auto 0; background:var(--paper); border-radius:14px; padding:20px 24px;
  text-align:left; box-shadow:0 14px 26px -18px rgba(124,75,61,.3);
}
.loc-kicker{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--rose-deep); margin-bottom:6px;
}
.loc-address{display:block; font-family:'Lora',serif; font-size:17px; color:var(--rosewood); font-weight:600;}
.loc-desc{font-size:13.5px; color:var(--espresso-soft); margin-top:6px;}
.loc-entrance{
  display:flex; align-items:flex-start; gap:10px; margin-top:14px;
  padding:12px 14px; background:var(--blush-soft); border-radius:12px;
  font-size:13px; color:var(--espresso);
}
.loc-entrance-icon{flex-shrink:0; font-size:16px; line-height:1.4;}
.loc-entrance strong{color:var(--rosewood);}

.booking-steps{max-width:440px; margin:32px auto 0; display:flex; flex-direction:column; gap:20px; text-align:left;}
.booking-step{display:flex; gap:16px; align-items:flex-start;}
.step-number{
  width:38px; height:38px; flex-shrink:0; border-radius:50%; background:var(--rosewood); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;
}
.step-title{font-family:'Lora',serif; font-size:16px; color:var(--rosewood); margin-bottom:3px;}
.step-desc{font-size:13px; color:var(--espresso-soft);}

.organizer{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:640px; margin:0 auto; text-align:left;}
.cell{background:var(--paper); border-radius:10px; padding:16px; box-shadow:0 12px 22px -16px rgba(124,75,61,.25);}
.cell.wide{grid-column:span 3;}
.cell label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--rose-deep); font-weight:600;}
.cell input, .cell select, .cell textarea{
  width:100%; border:none; background:transparent; margin-top:6px;
  font-family:'Work Sans',sans-serif; font-size:14px; color:var(--espresso);
}
.cell input:focus, .cell select:focus, .cell textarea:focus{outline:2px solid var(--rose); outline-offset:2px; border-radius:4px;}

.book-submit{margin-top:26px; background:var(--rosewood); color:var(--paper); padding:15px 34px; border-radius:100px; font-weight:600; font-size:14.5px; border:none; display:inline-block; cursor:pointer;}
.book-submit:disabled{opacity:.45; cursor:not-allowed;}

/* Real calendar + time slots, driven by kalender-api.php */
.agenda{
  max-width:640px; margin:30px auto 0; background:var(--paper); border-radius:20px;
  padding:32px 34px; box-shadow:0 24px 50px -26px rgba(124,75,61,.35); text-align:left;
  position:relative;
}
.agenda.loading .mini-cal{opacity:.4; pointer-events:none; transition:opacity .2s;}
.agenda-loading-note{
  display:none; align-items:center; gap:8px; font-size:12px; color:var(--rose-deep); font-weight:600;
  margin:-4px 0 14px;
}
.agenda.loading .agenda-loading-note{display:flex;}
.agenda-spinner{
  width:13px; height:13px; border:2px solid var(--blush); border-top-color:var(--rose-deep);
  border-radius:50%; animation:agenda-spin .7s linear infinite; flex-shrink:0;
}
@keyframes agenda-spin{ to { transform:rotate(360deg); } }
.agenda-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.agenda-top .eyebrow{margin:0;}
.agenda-nav{display:flex; gap:6px;}
.agenda-nav button{width:30px; height:30px; border-radius:50%; border:1px solid var(--blush); background:var(--cream); color:var(--rosewood); font-size:14px; cursor:pointer;}
.agenda-nav button:hover{background:var(--blush-soft);}
.cal-month-label{font-family:'Lora',serif; font-size:19px; color:var(--rosewood);}
.cal-header{display:flex; align-items:center; justify-content:space-between; margin:0 0 16px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center;}
.cal-weekday{font-size:10.5px; color:var(--espresso-soft); text-transform:uppercase; letter-spacing:.05em; padding-bottom:6px;}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:10px;
  font-size:13.5px; cursor:pointer; position:relative; color:var(--espresso); background:var(--cream);
}
.cal-day.empty{visibility:hidden; cursor:default;}
.cal-day.past{color:#C8BBB1; cursor:not-allowed; background:transparent;}
.cal-day:not(.past):not(.empty):hover{background:var(--blush-soft);}
.cal-day.today{border:1.5px solid var(--rose);}
.cal-day.selected{background:var(--rosewood); color:var(--paper);}
.time-group{margin-top:26px;}
.time-group .slots-label{font-size:11.5px; color:var(--espresso-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-bottom:12px;}
.time-slots{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
.time-slot{padding:10px 6px; border-radius:10px; border:1.5px solid var(--blush); font-size:12.5px; text-align:center; color:var(--rosewood); cursor:pointer; background:var(--cream);}
.time-slot:focus-visible{outline:2px solid var(--rose); outline-offset:2px;}
.cal-day:focus-visible{outline:2px solid var(--rose); outline-offset:1px;}
.slots-hint-top{
  background:var(--blush-soft); color:var(--rose-deep); font-weight:600;
  font-size:12.5px; padding:12px 14px; border-radius:10px; margin-bottom:14px;
}
.time-slot:hover{background:var(--blush-soft);}
.time-slot.selected{background:var(--rosewood); color:var(--paper); border-color:var(--rosewood);}
.time-slot.unavailable{opacity:.35; text-decoration:line-through; cursor:not-allowed; background:transparent;}
.time-slot.pending{opacity:.5; cursor:not-allowed; background:transparent;}
.slots-hint{margin-top:14px; font-size:12.5px; color:var(--espresso-soft);}
.slots-hint.warn{color:var(--rose-deep); font-weight:600;}

/* success + cookie + privacy */
.success-overlay{display:none; position:fixed; inset:0; z-index:600; background:rgba(74,54,44,.85); align-items:center; justify-content:center; padding:24px;}
.success-overlay.show{display:flex;}
.success-box{background:var(--paper); border-radius:24px; padding:44px 38px; max-width:420px; text-align:center;}
.success-box .emoji{font-size:34px;}
.success-box h3{font-size:24px; margin-top:14px;}
.success-box p{margin-top:12px; font-size:14px; color:var(--espresso-soft);}
.success-box button{margin-top:24px;}

#cookieBanner{
  position:fixed; bottom:0; left:0; right:0; z-index:400; background:var(--paper);
  padding:16px 24px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  box-shadow:0 -10px 30px -14px rgba(124,75,61,.3); font-size:12.5px; color:var(--espresso-soft);
}
#cookieBanner.hidden{display:none;}
#cookieBanner button{border:none; padding:9px 18px; border-radius:100px; font-size:12.5px; font-weight:600; cursor:pointer;}
#cookieBanner .accept{background:var(--rosewood); color:var(--paper);}
#cookieBanner .decline{background:transparent; border:1px solid var(--blush); color:var(--rosewood);}

.privacy-modal{display:none; position:fixed; inset:0; z-index:550; background:rgba(74,54,44,.6); align-items:center; justify-content:center; padding:24px;}
.privacy-modal.show{display:flex;}
.privacy-box{background:var(--paper); border-radius:20px; padding:36px; max-width:560px; max-height:80vh; overflow-y:auto;}
.privacy-box h3{font-size:22px;}
.privacy-box h4{font-size:14px; margin-top:18px; color:var(--rosewood);}
.privacy-box p, .privacy-box li{font-size:13.5px; color:var(--espresso-soft); margin-top:8px;}
.privacy-box .close-btn{margin-top:22px;}

footer{padding:70px 0 100px; text-align:center;}
footer .flogo{font-family:'Lora',serif; font-style:italic; font-size:22px; color:var(--rosewood);}
footer nav{margin-top:22px; display:flex; justify-content:center; gap:26px; flex-wrap:wrap;}
footer nav a{font-size:13px; color:var(--rosewood); font-weight:600;}
footer .fservice{max-width:520px; margin:26px auto 0; font-size:12px; color:var(--espresso-soft); line-height:1.7;}
footer .flegal{margin-top:22px; font-size:11.5px; color:#9c8477;}
footer .flegal button{background:none; border:none; text-decoration:underline; color:#9c8477; font-size:11.5px; cursor:pointer;}

@media (max-width:820px){
  .about-body{flex-direction:column;}
  .float-img{width:100%; flex:none;}
  .info-grid{grid-template-columns:1fr;}
  .organizer{grid-template-columns:1fr 1fr;}
  .cell.wide{grid-column:span 2;}
  /* dock is fully replaced by a bottom bar below 600px, see next media query */
}
@media (max-width:900px){
  .gallery-block{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,150px);}
  .g-item{grid-column:unset !important; grid-row:unset !important; order:1;}
  .g-item.large{grid-column:span 2 !important; grid-row:span 2 !important; order:0; min-height:220px;}
}
@media (max-width:560px){
  .organizer{grid-template-columns:1fr;}
  .cell.wide{grid-column:span 1;}
}
@media (max-width:700px){
  .social-fixed{display:none;}
  .promo{font-size:11.5px; padding:9px 36px;}
  .swipe-hint{
    display:inline-flex; align-items:center; gap:6px; margin-top:14px;
    font-size:12px; color:var(--rose-deep); font-weight:600;
  }
  .swipe-hint svg{width:14px; height:14px; animation:swipe-nudge 1.6s ease-in-out infinite;}
}
@keyframes swipe-nudge{
  0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);}
}
@media (max-width:600px){
  .time-slots{grid-template-columns:repeat(3, 1fr);}
  /* De pil-navigatie wordt op smalle schermen een volle-breedte balk onderaan,
     zodat hij nooit meer naar meerdere regels wrapt en een "bol" vormt. */
  .dock{
    left:0; right:0; bottom:0; transform:none;
    width:100%; max-width:none; border-radius:20px 20px 0 0;
    padding:10px max(10px, env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-bottom));
    display:flex; flex-wrap:nowrap; gap:2px; justify-content:space-between;
    box-shadow:0 -10px 30px -14px rgba(124,75,61,.4);
  }
  .dock a{
    flex:1; text-align:center; padding:9px 4px; font-size:10.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .whatsapp-float{ bottom:76px; }
}