/* ====================================================================================== Agadir Stays — homepage 2026 (loaded by agadir-stays-homepage*.html only, after design.css) Structure built by _home_2026.py. Discover -> Search -> Explore -> Trust -> Book. ====================================================================================== */ body.hp{background:#fff;} /* ------------------------------------------------------------------ hero: search first */ body.hp .hero:has(.hslides){padding-bottom:clamp(6.5rem,10vw,8.5rem);} body.hp .hero h1{text-shadow:0 2px 30px rgba(0,0,0,.3);} body.hp .hero .hsub{max-width:44rem;white-space:normal;} @media (min-width:1100px){body.hp .hero .hsub{max-width:none;}} /* quick picks under the search */ .hq{display:flex;align-items:center;flex-wrap:nowrap;gap:.45rem;margin-top:1rem;position:relative;z-index:2; overflow-x:auto;scrollbar-width:none;} .hq::-webkit-scrollbar{display:none;} .hq > *{flex:0 0 auto;} .hq-l{font:600 var(--fs-sm)/1 var(--font-ui);color:rgba(255,255,255,.85);margin-inline-end:.2rem;} .hq-c{display:inline-flex;align-items:center;min-height:36px;padding:.4rem .85rem;border-radius:999px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);color:#fff;text-decoration:none; font:600 var(--fs-sm)/1.2 var(--font-ui);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:background-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease);} .hq-c:hover{background:#fff;color:var(--head);} .hq-c:active{transform:scale(.97);} .hq-c:focus-visible{outline:2.5px solid #fff;outline-offset:2px;} html[lang="ar"] .hq-c,html[lang="ar"] .hq-l{font-family:'Tajawal',sans-serif;} @media (max-width:760px){ .hq{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(1.25rem,4vw,3rem)); padding-inline:clamp(1.25rem,4vw,3rem);margin-top:.85rem;} .hq::-webkit-scrollbar{display:none;} .hq-c,.hq-l{flex:0 0 auto;} body.hp .hero:has(.hslides){padding-bottom:1.5rem;} } /* ------------------------------------------------------------------ benefits card over the photo */ body.hp .hp-benefits{position:relative;z-index:5;margin-top:calc(-1 * clamp(4.5rem,7vw,5.75rem));} body.hp .hp-benefits .trust.trust--pro{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:0 30px 60px -34px rgba(15,61,68,.45),0 2px 6px rgba(20,20,20,.04); padding:clamp(1rem,2vw,1.5rem) clamp(.5rem,1.5vw,1rem);gap:0;grid-template-columns:repeat(4,minmax(0,1fr));} body.hp .hp-benefits .trust--pro .ti{background:none;box-shadow:none;border-radius:0;padding:.35rem clamp(.8rem,1.6vw,1.3rem); flex-direction:column;gap:.75rem;} body.hp .hp-benefits .trust--pro .ti + .ti{border-inline-start:1px solid var(--line);} body.hp .hp-benefits .trust--pro .ti-ic{width:3rem;height:3rem;background:var(--clay-tint);color:var(--clay);} body.hp .hp-benefits .trust--pro .ti:nth-child(even) .ti-ic{background:var(--ocean-tint);color:var(--ocean-2);} body.hp .hp-benefits .trust--pro .ti .icon{width:1.4rem;height:1.4rem;} body.hp .hp-benefits .trust--pro .ti-t{font:700 var(--fs-base)/1.3 var(--font-ui);color:var(--head);} body.hp .hp-benefits .trust--pro .ti-d{font-size:var(--fs-sm);line-height:1.5;margin-top:.25rem;} @media (max-width:860px){ body.hp .hp-benefits .trust.trust--pro{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.75rem;} body.hp .hp-benefits .trust--pro .ti:nth-child(3){border-inline-start:0;} } @media (max-width:760px){ body.hp .hp-benefits{margin-top:1rem;} body.hp .hp-benefits .trust.trust--pro{padding:.75rem .25rem;} body.hp .hp-benefits .trust--pro .ti{padding:.5rem .75rem;gap:.5rem;} body.hp .hp-benefits .trust--pro .ti-ic{width:2.4rem;height:2.4rem;} body.hp .hp-benefits .trust--pro .ti-t{font-size:var(--fs-md);} } /* ------------------------------------------------------------------ section rhythm on the homepage */ body.hp .section{padding-block:clamp(2.5rem,5vw,4.25rem);} body.hp #explore{padding-top:clamp(2.75rem,5vw,4.5rem);} /* ------------------------------------------------------------------ "What are you looking for?" tiles */ .cat-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;height:clamp(440px,44vw,580px);} .cat--big{grid-row:1 / span 2;} .cat{position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);color:#fff; text-decoration:none;background:var(--ocean);box-shadow:var(--shadow-1); transition:box-shadow .3s var(--ease),transform .3s var(--ease-out);} .cat img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease-out);} .cat::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(8,22,26,.05) 30%,rgba(8,22,26,.78) 100%);} .cat:hover{box-shadow:var(--shadow-3);transform:translateY(-3px);} .cat:hover img{transform:scale(1.06);} .cat:focus-visible{outline:3px solid var(--clay);outline-offset:3px;} .cat-n{position:absolute;top:14px;inset-inline-start:14px;display:inline-flex;align-items:center;gap:.3rem; padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.94);color:var(--head); font:600 var(--fs-xs)/1 var(--font-ui);box-shadow:0 4px 14px -6px rgba(0,0,0,.35);} .cat-n b{font-weight:800;} .cat-t{position:absolute;inset-inline:20px;bottom:20px;padding-inline-end:3.4rem;display:flex;flex-direction:column;gap:.2rem;} .cat-t > b{font:600 clamp(1.35rem,2vw,1.7rem)/1.1 var(--font-display);font-variation-settings:"SOFT" 30,"WONK" 0; letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.35);} .cat--big .cat-t > b{font-size:clamp(1.8rem,3.2vw,2.6rem);} .cat-d{font:500 var(--fs-sm)/1.35 var(--font-ui);color:rgba(255,255,255,.9);} .cat-p{margin-top:.35rem;font:500 var(--fs-sm)/1 var(--font-ui);color:rgba(255,255,255,.85);} .cat-p b{font:800 var(--fs-lg)/1 var(--font-ui);color:#fff;} .cat-go{position:absolute;bottom:20px;inset-inline-end:20px;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;background:#fff;color:var(--head);transition:transform .25s var(--ease-out),background-color .2s;} .cat-go .icon{width:1.15rem;height:1.15rem;} .cat:hover .cat-go{background:var(--clay);color:#fff;transform:translateX(3px);} html[dir="rtl"] .cat-go .icon{transform:scaleX(-1);} html[dir="rtl"] .cat:hover .cat-go{transform:translateX(-3px);} html[lang="ar"] .cat-t > b{font-family:'Tajawal',sans-serif;font-weight:700;} @media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;height:auto;gap:10px;} .cat{aspect-ratio:4/5;} .cat--big{grid-row:auto;grid-column:1 / -1;aspect-ratio:16/10;} .cat-t{inset-inline:14px;bottom:14px;padding-inline-end:0;} .cat-go{display:none;} .cat-t > b{font-size:1.25rem;} .cat--big .cat-t > b{font-size:1.8rem;} .cat-d{font-size:var(--fs-xs);} .cat-n{top:10px;inset-inline-start:10px;} } @media (max-width:900px) and (min-width:601px){.cat{aspect-ratio:4/3;}.cat--big{aspect-ratio:21/9;}} @media (prefers-reduced-motion:reduce){.cat,.cat img,.cat-go{transition:none;}.cat:hover{transform:none;}.cat:hover img{transform:none;}} /* ------------------------------------------------------------------ day trips: dark "destinations" band (homepage) */ body.hp #villages.hp-dark{background:radial-gradient(120% 90% at 0% 0%,#0E5A63 0%,#0F3D44 55%,#0A2C33 100%);color:#fff;} body.hp #villages .kicker--xl{color:#FFC58A;} body.hp #villages .kicker--xl .k-ic{background:rgba(255,255,255,.12);color:#FFC58A;} body.hp #villages h2{color:#fff;} body.hp #villages .sub,body.hp #villages .vmore{color:rgba(255,255,255,.78);} body.hp #villages .see-all{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;} body.hp #villages .see-all:hover{background:#fff;color:var(--head);border-color:#fff;} /* ------------------------------------------------------------------ motion (hero quick picks join the entrance) */ @media (prefers-reduced-motion:no-preference){ html.mo-ready body.hp .hq{animation:moUp .6s cubic-bezier(.16,1,.3,1) .5s both;} } /* ------------------------------------------------------------------ display titles on photo tiles + side cards */ body.hp :is(.xtile.has-ph h3,[data-i18n="faq_help_h"],.wa h3){font-family:var(--font-display);font-weight:600; font-variation-settings:"SOFT" 30,"WONK" 0;letter-spacing:-.01em;} body.hp .xtile.has-ph h3{font-size:1.4rem;} html[lang="ar"] body.hp :is(.xtile.has-ph h3,[data-i18n="faq_help_h"],.wa h3){font-family:'Tajawal',sans-serif;font-weight:700;} /* ------------------------------------------------------------------ Transfer tab: 'Driver by the hour' gets a clock (trip keeps the default pin) */ .booker .bk-plist:not(.rp-list) .pl[data-id="driver"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");} /* ================================================================== compact spacing (2026-09-28) Measured section by section at 1366 / 820 / 390px: 136px of empty space between every section on desktop, 200-300px section titles on phones, a 1,086px reviews block and 1,100px of category tiles on tablets. Tightened per section, not with one global value. */ /* section rhythm: ~96px between sections on desktop (was 136), ~64px on phones (was 80) */ body.hp .section{padding-block:clamp(2rem,3.4vw,3rem);} body.hp #explore{padding-top:clamp(1.75rem,3vw,2.5rem);} /* the benefits card above already separates it */ body.hp .section .wrap > .head{margin-top:0;} /* section titles: eyebrow -> title -> subtitle closer together */ body.hp .kicker--xl{margin-bottom:.4rem;} body.hp .kicker--xl ~ .sub{margin-top:.3rem;} body.hp .head{margin-bottom:clamp(.9rem,1.6vw,1.15rem);} body.hp .head-row .head{margin-bottom:0;} body.hp .head-row{margin-bottom:clamp(.9rem,1.6vw,1.15rem);align-items:flex-end;} body.hp .head-acts{margin-bottom:0!important;} /* hero -> benefits: keep the overlap, lose the dead band under the quick picks */ @media (min-width:761px){ body.hp .hero:has(.hslides){padding-bottom:clamp(5.25rem,8vw,6.75rem);} body.hp .hp-benefits{margin-top:calc(-1 * clamp(4rem,6vw,5rem));} } body.hp .hp-benefits .trust.trust--pro{padding:clamp(.85rem,1.6vw,1.2rem) clamp(.5rem,1.4vw,.9rem);} /* explore tiles: shorter bento (desktop; tablets + phones have their own rules below) */ @media (min-width:901px){.cat-grid{height:clamp(380px,36vw,500px);gap:12px;}} /* transport: the airport banner no longer forces extra height */ body.hp #transport .tcard{min-height:0;padding:clamp(1.25rem,2.4vw,1.9rem);margin-bottom:clamp(1rem,2vw,1.4rem);} /* reviews: one swipeable row (3 visible on desktop) instead of two tall rows - same 6 reviews */ body.hp #reviews .rv-sum{margin-bottom:1rem;} @media (min-width:761px){ body.hp #reviews .rgrid--real{display:flex!important;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; grid-template-columns:none!important;padding:4px 2px 10px;margin:-4px -2px -10px;} body.hp #reviews .rgrid--real::-webkit-scrollbar{display:none;} body.hp #reviews .rgrid--real > .rcard{flex:0 0 calc((100% - 2rem) / 3);scroll-snap-align:start;box-shadow:0 1px 2px rgba(23,37,42,.05),0 6px 16px -12px rgba(23,37,42,.25)!important;} body.hp #reviews .rgrid--real{padding:6px 2px 14px;margin:-6px -2px -14px;} /* the < > arrows (site.js, .cnav--solo) sit on the title line instead of a row of their own */ body.hp #reviews .wrap{position:relative;} body.hp #reviews .cnav--solo{position:absolute;top:4.1rem;inset-inline-end:clamp(1.25rem,4vw,3rem);margin:0;} } @media (min-width:761px) and (max-width:1023px){body.hp #reviews .rgrid--real > .rcard{flex-basis:calc((100% - 1rem) / 2);}} /* contact: location block closer to the form */ body.hp #contact .location{margin-top:clamp(1.5rem,3vw,2.25rem);padding-top:clamp(1.25rem,2.4vw,1.75rem);} /* ---- tablets (601-1023px): keep the 3-column bento instead of stacking 2 per row */ @media (max-width:900px) and (min-width:601px){ .cat-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));height:clamp(360px,52vw,440px);gap:10px;} .cat,.cat--big{aspect-ratio:auto!important;} .cat--big{grid-row:1 / span 2;grid-column:auto;} .cat-t{inset-inline:12px;bottom:12px;} .cat-t > b{font-size:1.15rem;} .cat--big .cat-t > b{font-size:1.6rem;} .cat-p b{font-size:var(--fs-base);} } /* ---- phones */ @media (max-width:600px){ body.hp .section{padding-block:2rem;} body.hp #explore{padding-top:1.75rem;} body.hp .kicker--xl + h2{font-size:1.6rem!important;line-height:1.12;} body.hp .kicker--xl ~ .sub{font-size:var(--fs-md);line-height:1.45;margin-bottom:.9rem!important;} body.hp .head-row{margin-bottom:.9rem;gap:.35rem .6rem;} body.hp .head-acts{gap:.3rem!important;} body.hp .head-acts .see-all{min-height:34px;padding:.35rem .7rem;font-size:.78rem;} body.hp .cnav{gap:.3rem;} body.hp .cnav-b{width:34px!important;height:34px!important;} /* benefits: icon beside the title, 2 x 2 */ body.hp .hp-benefits .trust--pro .ti{flex-direction:row;align-items:flex-start;gap:.55rem;padding:.45rem .5rem;} body.hp .hp-benefits .trust--pro .ti-ic{width:2rem;height:2rem;flex:none;} body.hp .hp-benefits .trust--pro .ti .icon{width:1.05rem;height:1.05rem;} body.hp .hp-benefits .trust--pro .ti-t{font-size:var(--fs-sm);} body.hp .hp-benefits .trust--pro .ti-d{font-size:.75rem;line-height:1.4;margin-top:.1rem;} /* explore: square small tiles */ .cat{aspect-ratio:1 / 1;} .cat--big{aspect-ratio:16 / 10;} .cat-grid{gap:8px;} /* reviews summary: the two scores side by side */ body.hp #reviews .rv-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;} body.hp #reviews .rv-sum .rv-src{grid-column:1 / -1;} body.hp #reviews .rv-score{padding:.7rem .75rem;gap:.55rem;} body.hp #reviews .rv-score b{font-size:1.6rem;} body.hp #reviews .rv-score .rv-name{font-size:.75rem;line-height:1.25;} body.hp #transport .tcard p{font-size:var(--fs-sm);} body.hp #transport .tcard > .icon{display:none;} body.hp #contact .loc-map{height:210px;} body.hp #contact .location{margin-top:1.25rem;padding-top:1.25rem;} } /* tablets: contact form beside the WhatsApp box, address beside the map */ @media (min-width:700px) and (max-width:1023px){ body.hp #contact .cg{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.25rem;align-items:start;} body.hp #contact .location{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;align-items:center;} body.hp #contact .loc-map{height:230px;} } /* ---------- phones: section name + "See all" + < > always on one line (2026-09-28) ---------- */ /* was a wrapping flex row: on 360px phones "ADVENTURES" + the buttons didn't fit, so the buttons dropped to a line of their own. Grid: name left (may wrap to 2 lines), buttons right, same row. */ @media (max-width:600px){ body.hp .section .head-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.5rem;row-gap:0;} body.hp .head-row > .head{display:contents;} body.hp .head-row .head > *{grid-column:1 / -1;} body.hp .head-row .head > .kicker--xl{grid-column:1;grid-row:1;min-width:0;margin:0;justify-self:start;} body.hp .head-row .kicker--xl > span:not(.k-ic):not(.k-go){min-width:0;-webkit-hyphens:auto;hyphens:auto;} body.hp .head-row .kicker--xl .k-go{display:none;} body.hp .head-row > .head-acts{grid-column:2;grid-row:1;margin:0!important;align-self:center;} body.hp .head-row .head > h2{margin-top:.55rem;} } @media (max-width:380px){ body.hp .head-row .kicker--xl{letter-spacing:.03em;gap:.4rem;font-size:.72rem;} body.hp .head-acts .see-all{padding:.35rem .6rem;} body.hp .cnav-b{width:32px!important;height:32px!important;} } /* ---------- header links appear once the search tabs scroll away (2026-09-29) ---------- site.js adds html.hn-js (homepage) and toggles html.hn-on; the flight itself is a Web Animation. The links keep their place while hidden (opacity/visibility), so the header never moves. Phones (<700px) keep the burger menu unchanged. */ @media (min-width:700px){ html.hn-js header.top .tnav > li:not(.tnav-wa):not(.tnav-acct){transition:opacity .3s ease,visibility .3s;} html.hn-js:not(.hn-on) header.top .tnav > li:not(.tnav-wa):not(.tnav-acct){opacity:0;visibility:hidden;pointer-events:none;} html.hn-fly header.top .tnav > li{transition:none!important;} html.hn-fly header.top .tnav > li > a{transform-origin:50% 100%;will-change:transform,opacity;} } /* ================================================================== gaps v3 (2026-10-02) Owner (screenshots of the bands Wellness → Transport, Transport → Guests, Day trips → Stays): "still a lot of gaps and empty spaces". Measured at 1366px: ~38px under the last card + 46px above the next title = ~84px of empty band between every section. Now ~20px + ~24px; the alternating white / stone / sand backgrounds keep the sections apart. Phones: ~18px + 20px. */ body.hp .section{padding-block:clamp(1.25rem,2vw,1.5rem);} body.hp #explore{padding-top:clamp(1.25rem,2vw,1.5rem);} html body.hp section#tpRecent{padding-block:clamp(1.25rem,2vw,1.5rem)!important;} /* card rows: keep only the room the card shadow needs (was 26px padding / -18px margin = 8px extra) */ body.hp .sgrid.hscroll{padding-bottom:16px;margin-bottom:-14px;} body.hp #villages .vmore{margin-top:.6rem;margin-bottom:0;} body.hp #transport .tcard{margin-bottom:clamp(.75rem,1.5vw,1rem);} body.hp #reviews .rv-sum{margin-bottom:.75rem;} @media (max-width:600px){ body.hp .section{padding-block:1.25rem;} body.hp #explore{padding-top:1.25rem;} html body.hp section#tpRecent{padding-block:1.25rem!important;} } /* ==== search like Airbnb (2026-10-02) ==== */ /* Owner: the homepage search should look like Airbnb's top search, same structure. One white search card on the photo: illustrated tabs (icon + label, underline under the active one), then Airbnb's white pill bar. */ html body.hp .hero .booker{background:#fff!important;border:0!important;border-radius:32px;max-width:940px; box-shadow:0 24px 60px -24px rgba(8,30,34,.55),0 2px 8px rgba(8,30,34,.10)!important;padding:8px clamp(12px,2vw,20px) 18px!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important;} /* tabs */ html body.hp .hero .btabs{display:flex!important;justify-content:center;flex-wrap:nowrap;gap:clamp(.75rem,3.2vw,2.6rem)!important; margin:0 0 14px!important;padding:0 4px!important;background:none!important;border:0!important;box-shadow:none!important; overflow-x:auto;scrollbar-width:none;} html body.hp .hero .btabs::-webkit-scrollbar{display:none;} html body.hp .hero .btab{position:relative;display:inline-flex!important;align-items:center;gap:8px;flex:0 0 auto; min-height:0!important;height:auto!important;padding:8px 2px 13px!important;margin:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important; color:#6A6A6A!important;font:500 .9375rem/1.2 'Plus Jakarta Sans',system-ui,sans-serif!important;letter-spacing:0!important; text-transform:none!important;cursor:pointer;transition:color .2s;} html body.hp .hero .btab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:transparent;transition:background .2s;} html body.hp .hero .btab:hover{color:#222!important;} html body.hp .hero .btab:hover::after{background:#DDDDDD;} html body.hp .hero .btab.active{color:#222!important;font-weight:600!important;} html body.hp .hero .btab.active::after{background:#222;} html body.hp .hero .btab:focus-visible{outline:2px solid #222;outline-offset:4px;border-radius:8px!important;} html body.hp .hero .b-ic3{display:grid!important;place-items:center;width:40px;height:40px;flex:0 0 40px;margin:0!important;padding:0!important; background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important; transition:transform .3s cubic-bezier(.34,1.56,.64,1);} html body.hp .hero .b-ic3 svg{width:100%!important;height:100%!important;max-width:none!important;stroke:none!important;display:block;} html body.hp .hero .btab:hover .b-ic3{transform:translateY(-2px) scale(1.06);} html body.hp .hero .btab.active .b-ic3{animation:ic3Pop .5s cubic-bezier(.34,1.56,.64,1);} @keyframes ic3Pop{0%{transform:scale(1)}35%{transform:scale(.86) rotate(-6deg)}70%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1)}} /* the bar */ html body.hp .hero .bf{background:#fff!important;border:1px solid #DDDDDD!important;border-radius:40px!important; box-shadow:0 3px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08)!important;} html body.hp .hero .bfd-l{color:#222!important;font:600 .75rem/1.2 'Plus Jakarta Sans',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;} html body.hp .hero .bfd-v{font:400 .875rem/1.3 'Plus Jakarta Sans',system-ui,sans-serif!important;color:#222!important;} html body.hp .hero .bfd-v.is-empty{color:#6A6A6A!important;} html[lang="ar"] body.hp .hero :is(.btab,.bfd-l,.bfd-v){font-family:'Tajawal',sans-serif!important;} @media (min-width:761px){ html body.hp .hero .bf{min-height:66px;padding:0 8px 0 0!important;} html body.hp .hero .bfd-ic{display:none!important;} html body.hp .hero .bfd{padding-inline:32px 20px!important;} /* round coral search button that widens to "Search" while a field is open (Airbnb) */ html body.hp .hero .chk-btn{width:48px;min-width:48px!important;height:48px!important;min-height:48px!important;padding:0!important; border-radius:999px!important;justify-content:center;gap:0!important;align-self:center;margin-inline-start:8px; transition:width .25s ease,padding .25s ease,background .2s,transform .15s!important;} html body.hp .hero .chk-btn > span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .25s ease,opacity .2s;} html body.hp .hero .chk-btn svg{width:18px!important;height:18px!important;min-width:18px;min-height:18px;margin:0!important;flex:0 0 18px;transform:none!important;} html body.hp .hero .bf:has([aria-expanded="true"]) .chk-btn{width:auto;padding:0 20px 0 16px!important;gap:8px!important;} html body.hp .hero .bf:has([aria-expanded="true"]) .chk-btn > span{max-width:8rem;opacity:1;} } /* phones: Airbnb app layout - icons above their labels, the bar stacked inside the card */ @media (max-width:760px){ html body.hp .hero .booker{border-radius:24px;padding:6px 10px 12px!important;} html body.hp .hero .btabs{justify-content:space-between;gap:2px!important;margin-bottom:10px!important;} html body.hp .hero .btab{flex-direction:column;gap:3px;flex:1 1 0;min-width:58px;padding:6px 2px 9px!important;font-size:.75rem!important;text-align:center;} html body.hp .hero .b-ic3{width:34px;height:34px;flex-basis:34px;} html body.hp .hero .bf{border-radius:20px!important;} } @media (prefers-reduced-motion:reduce){html body.hp .hero .btab.active .b-ic3{animation:none;} html body.hp .hero .b-ic3{transition:none;}} /* ==== /search like Airbnb ==== */ /* ==== wider homepage search (2026-10-04) ==== */ /* owner: only wider, so it lines up with the white benefits box below it. Everything else is the "search like Airbnb" block above, unchanged (a first, larger version was rejected: "it looks huge"). */ @media (min-width:761px){ html body.hp .hero .booker{max-width:none!important;width:100%;} }/* ==== /wider homepage search ==== */ /* ==== stays row: first 8 + See all card (2026-10-04) ==== */ html body.hp #stays-scroll > article.scard:nth-of-type(n+9){display:none!important;} html body.hp .sa-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;flex:0 0 auto; width:min(60vw,220px);min-height:260px;align-self:stretch;padding:1.4rem 1rem;border:1px solid var(--line,#E5E8E6);border-radius:20px; background:#fff;box-shadow:0 10px 30px -18px rgba(23,37,42,.35);color:var(--head,#17252A);text-decoration:none;scroll-snap-align:start; transition:transform .2s ease,box-shadow .2s ease;} html body.hp .sa-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(23,37,42,.45);} html body.hp .sa-card:focus-visible{outline:2.5px solid var(--clay-deep,#066570);outline-offset:3px;} html body.hp .sa-stack{position:relative;width:132px;height:96px;margin-bottom:.9rem;} html body.hp .sa-stack img{position:absolute;top:8px;width:64px;height:64px;object-fit:cover;border-radius:12px;border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(23,37,42,.45);transition:transform .25s ease;} html body.hp .sa-stack img:nth-child(1){left:2px;transform:rotate(-9deg);} html body.hp .sa-stack img:nth-child(2){right:2px;transform:rotate(9deg);} html body.hp .sa-stack img:nth-child(3){left:31px;top:20px;width:70px;height:70px;z-index:2;transform:rotate(-2deg);} html body.hp .sa-card:hover .sa-stack img:nth-child(1){transform:rotate(-14deg) translateX(-4px);} html body.hp .sa-card:hover .sa-stack img:nth-child(2){transform:rotate(14deg) translateX(4px);} html body.hp .sa-t{font:700 1rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html body.hp .sa-n{font:500 .85rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);} html body.hp .sa-n:empty{display:none;} @media (prefers-reduced-motion:reduce){html body.hp .sa-card,html body.hp .sa-stack img{transition:none;}} /* ==== /stays row: first 8 + See all card ==== */ /* ==== compact homepage cards (2026-10-04) ==== */ /* owner: homepage cards as small as the "Recently viewed" ones (trip.js .tp-card): ~230px wide, 4:3 photo, place line, name (2 lines max), one detail line, price. The longer details (distances, free cancellation, pay on arrival) stay on the section pages and the detail pages. Day trips keep their photo-tile look, at the same width. */ html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll).hscroll{gap:14px!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll).hscroll > .scard, html body.hp #stays-scroll.hscroll > .sa-card{width:clamp(200px,22vw,250px)!important;border-radius:16px!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll > .scard .scover{aspect-ratio:4/3!important;height:auto!important;border-radius:0!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll > .scard .sbody{padding:.7rem .8rem .8rem!important;gap:.15rem!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .srow{margin:0!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll :is(.sloc,.srate){font:600 .75rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;letter-spacing:0!important;text-transform:none!important;margin:0!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .rw{display:none!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .srow{min-height:1.15rem;align-items:center!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .srate--new{padding:.1rem .45rem!important;font-size:.68rem!important;line-height:1.2!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .scard h3{font:700 .98rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;margin:0!important;-webkit-line-clamp:2;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll :is(.sspec,.sdesc){font:400 .8rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;margin:0!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important;-webkit-line-clamp:unset!important;min-height:0!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll :is(.sdist,.sfree,.spay){display:none!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .sprice{margin-top:auto!important;padding-top:.35rem!important;border:0!important;flex-direction:row!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .sprice b{font:700 .92rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;} html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll).hscroll .sprice b span{font:500 .8rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;} html body.hp #stays-scroll.hscroll > .sa-card{min-height:0;padding:1rem .8rem;} /* day-trip photo tiles: same width, a little shorter, one-line description */ /* the tile is 4:5 and its photo fills it (2026-10-09: the photo was 4:5 inside a 3:4 tile, leaving a dark strip under it) */ html body.hp #villages-scroll.hscroll > .scard{aspect-ratio:4/5!important;} html body.hp #villages-scroll.hscroll > .scard .scover{aspect-ratio:auto!important;height:100%!important;} html body.hp #villages-scroll.hscroll .scard h3{font-size:1.1rem!important;} html body.hp #villages-scroll.hscroll .sdesc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important;-webkit-line-clamp:unset!important;} html body.hp #villages-scroll.hscroll .sfree{display:none!important;} @media (max-width:760px){ html body.hp :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll).hscroll > .scard, html body.hp #stays-scroll.hscroll > .sa-card{width:min(64vw,250px)!important;} } /* ==== /compact homepage cards ==== */ /* ==== homepage polish (2026-10-04): fixes inside the current design, not a redesign ==== */ /* 1. Wellness has one card (the spa menu): a wide feature card instead of a small card beside empty space */ html body.hp #wellness-scroll.hscroll > .scard:only-of-type{width:min(100%,780px)!important;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .scover{aspect-ratio:auto!important;height:100%!important;min-height:230px;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sbody{padding:1.4rem 1.5rem!important;justify-content:center;gap:.35rem!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sloc{font-size:.8rem!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type h3{font-size:1.35rem!important;-webkit-line-clamp:3;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sdesc{white-space:normal!important;font-size:.92rem!important;line-height:1.45!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sfree{display:flex!important;margin-top:.35rem!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sprice{margin-top:.25rem!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sprice b{font-size:1.15rem!important;} @media (max-width:760px){ html body.hp #wellness-scroll.hscroll > .scard:only-of-type{grid-template-columns:minmax(0,1fr);} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .scover{aspect-ratio:16/10!important;height:auto!important;min-height:0;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sbody{padding:1rem 1.1rem 1.1rem!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type h3{font-size:1.2rem!important;} } /* 2. review scores on phones: one full-width row each (score | stars, rating word, home, count) — names no longer wrap over four lines in half-width boxes */ @media (max-width:760px){ html body.hp .rv-sum{grid-template-columns:minmax(0,1fr)!important;gap:.55rem!important;} html body.hp .rv-sum .rv-score{display:flex!important;flex-direction:row!important;align-items:center;gap:.9rem!important;padding:.75rem 1rem!important;text-align:start;} html body.hp .rv-sum .rv-score b{flex:none;font-size:1.9rem!important;} html body.hp .rv-sum .rv-meta{flex:1;min-width:0;} html body.hp .rv-sum .rv-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.85rem!important;} } /* 3. end of the page on phones: no duplicate "Still have a question?" WhatsApp card (WhatsApp is in the bottom bar and in Contact just below), and the WhatsApp box comes before the enquiry form — most guests use WhatsApp */ @media (max-width:760px){ html body.hp .faq-help{display:none!important;} html body.hp #contact .cg{display:flex!important;flex-direction:column;gap:1.1rem;} html body.hp #contact .cg > .wa{order:-1;} html body.hp #contact .cg > *{width:100%;max-width:none;} } /* ==== /homepage polish ==== */ /* ==== homepage transfer tool (2026-10-08) ==== */ /* owner: put the private trip and the private driver into the airport banner, like the best booking platforms. transfer-widget.js builds #trWidget and adds html.trw-on, which hides the old banner and the 3 service cards (still in the markup: catalog.js reads them, and they are the no-JavaScript fallback). */ html.trw-on body.hp #transport .tcard,html.trw-on body.hp #transport-scroll,html.trw-on body.hp #transport .cnav, html.trw-on body.hp #transport .hs-arrow{display:none!important;} html body.hp #trWidget:empty{display:none;} html body.hp .trw{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25.5rem);gap:clamp(1.5rem,4vw,3.5rem);align-items:center; padding:clamp(1.25rem,3vw,2.5rem);border-radius:24px;overflow:visible;isolation:isolate;color:#fff; background:#0F3D44 url("images/webp/transport/airport-transfer/photo-1-1080.webp") center 60%/cover no-repeat;box-shadow:0 24px 50px -30px rgba(8,30,34,.7);} html body.hp .trw::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:linear-gradient(100deg,rgba(9,33,38,.94) 0%,rgba(9,33,38,.84) 45%,rgba(9,33,38,.45) 100%);} html[dir="rtl"] body.hp .trw::before{background:linear-gradient(260deg,rgba(9,33,38,.94) 0%,rgba(9,33,38,.84) 45%,rgba(9,33,38,.45) 100%);} /* left: what this service is */ html body.hp .trw-eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .8rem;border-radius:999px;background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);font:700 .78rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);letter-spacing:.02em;} html body.hp .trw-eyebrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} html body.hp .trw-h{margin:.85rem 0 .55rem;color:#fff;font:600 clamp(1.5rem,2.5vw,2.15rem)/1.15 'Fraunces',Georgia,serif;text-wrap:balance;} html[lang="ar"] body.hp .trw-h{font-family:'Tajawal',sans-serif;font-weight:800;} html body.hp .trw-p{margin:0 0 1.1rem;max-width:34rem;color:rgba(255,255,255,.86);font-size:.98rem;line-height:1.55;} html body.hp .trw-pts{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;} html body.hp .trw-pts li{display:flex;align-items:center;gap:.55rem;font:600 .9rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html body.hp .trw-pts svg{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(126,226,168,.18);fill:none;stroke:#7EE2A8;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round;} /* right: the booking card */ html body.hp .trw-card{position:relative;background:#fff;color:var(--ink,#17252A);border-radius:20px;padding:1rem;box-shadow:0 20px 50px -24px rgba(0,0,0,.55);} html body.hp .trw-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;padding:.25rem;margin-bottom:.85rem;border-radius:14px;background:#F1F5F5;} html body.hp .trw-tabs button{display:flex;align-items:center;justify-content:center;gap:.4rem;min-width:0;min-height:44px;padding:.4rem .45rem;border:0;border-radius:11px; background:transparent;color:var(--ink-soft,#5C6B6E);font:700 .84rem/1.15 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;} html body.hp .trw-tabs button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} html body.hp .trw-tabs svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} html body.hp .trw-tabs button[aria-selected="true"]{background:#fff;color:var(--clay-deep,#066570);box-shadow:0 1px 3px rgba(23,37,42,.12),0 6px 14px -8px rgba(23,37,42,.3);} html body.hp .trw-tabs button:focus-visible{outline:2.5px solid var(--clay,#087E8B);outline-offset:1px;} html body.hp .trw-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 0 .7rem;padding:3px;border:1.5px solid var(--line,#E5E8E6);border-radius:999px;} html body.hp .trw-seg button{min-height:38px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft,#5C6B6E);font:600 .84rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .trw-seg button[aria-checked="true"]{background:var(--ink,#17252A);color:#fff;} /* route box: two rows joined by a dotted line, swap button on the side */ html body.hp .trw-route{position:relative;display:flex;flex-direction:column;border:1.5px solid var(--line,#E5E8E6);border-radius:14px;margin-bottom:.7rem;} html body.hp .trw-rt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:.7rem; padding:.6rem 3.4rem .6rem .85rem;cursor:text;} html[dir="rtl"] body.hp .trw-rt{padding:.6rem .85rem .6rem 3.4rem;} html body.hp .trw-rt--fixed{cursor:default;} html body.hp .trw-dot{grid-row:1 / span 2;align-self:center;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--clay,#087E8B);background:#fff;} html body.hp .trw-dot--end{border-radius:3px;border-color:var(--cta,#D4432A);} html body.hp .trw-rt-l{font:700 .72rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);} html body.hp .trw-rt-v{display:flex;align-items:center;gap:.4rem;font:600 .95rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);min-width:0;} html body.hp .trw-rt-v svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--clay,#087E8B);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} html body.hp .trw-in{width:100%;min-width:0;padding:.1rem 0;border:0!important;outline:0;background:transparent;box-shadow:none!important;border-radius:0!important; font:500 .95rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);} html body.hp .trw-in::placeholder{color:#7A8789;} html body.hp .trw-rt:focus-within{background:#F7FAFA;border-radius:12px;} html body.hp .trw-line{display:block;height:1px;margin:0 .85rem 0 2.4rem;border-top:1.5px dashed #CFD8D9;} html[dir="rtl"] body.hp .trw-line{margin:0 2.4rem 0 .85rem;} html body.hp .trw-swap{position:absolute;top:50%;inset-inline-end:.6rem;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%; border:1.5px solid var(--line,#E5E8E6);background:#fff;color:var(--clay-deep,#066570);cursor:pointer;box-shadow:0 2px 8px -4px rgba(23,37,42,.3);transition:transform .2s,border-color .15s;} html body.hp .trw-swap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} html body.hp .trw-swap:hover{border-color:var(--clay,#087E8B);transform:translateY(-50%) rotate(180deg);} html body.hp .trw-swap:focus-visible{outline:2.5px solid var(--clay,#087E8B);outline-offset:2px;} /* driver: 6 h / 12 h / full day chips */ html body.hp .trw-lab{margin:0 0 .45rem;font:700 .8rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);} html body.hp .trw-durs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-bottom:.7rem;} html body.hp .trw-durs button{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-height:58px;padding:.5rem .3rem;border:1.5px solid var(--line,#E5E8E6); border-radius:12px;background:#fff;color:var(--head,#17252A);cursor:pointer;font-family:var(--font-ui,'Plus Jakarta Sans',sans-serif);transition:border-color .15s,background .15s;} html body.hp .trw-durs b{font-size:.86rem;font-weight:700;line-height:1.15;text-align:center;} html body.hp .trw-durs span{font-size:.8rem;color:var(--ink-soft,#5C6B6E);font-weight:600;} html body.hp .trw-durs button[aria-checked="true"]{border-color:var(--clay,#087E8B);background:var(--clay-tint,#E4F2F3);box-shadow:inset 0 0 0 1px var(--clay,#087E8B);} html body.hp .trw-durs button[aria-checked="true"] span{color:var(--clay-deep,#066570);} /* passengers */ html body.hp .trw-pax{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem .15rem .75rem;border-bottom:1px solid var(--line,#E5E8E6);} html body.hp .trw-pax b{display:block;font:700 .92rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);} html body.hp .trw-pax small{font-size:.78rem;color:var(--ink-soft,#5C6B6E);} html body.hp .trw-step{display:flex;align-items:center;gap:.6rem;} html body.hp .trw-step button{width:38px;height:38px;border-radius:50%;border:1.5px solid #B9C4C5;background:#fff;color:var(--head,#17252A);font:500 1.15rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .trw-step button:disabled{opacity:.35;cursor:default;} html body.hp .trw-step button:not(:disabled):hover{border-color:var(--head,#17252A);} html body.hp .trw-step output{min-width:1.6rem;text-align:center;font:700 1rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);} /* price + call to action */ html body.hp .trw-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .55rem;padding:.8rem .15rem .75rem;} html body.hp .trw-sum b{font:800 1.55rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);} html body.hp .trw-sum span{font-size:.85rem;color:var(--ink-soft,#5C6B6E);} html body.hp .trw-sum--q b{font-size:1.15rem;} html body.hp .trw-go{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;border-radius:999px;background:var(--cta,#D4432A);color:#fff; text-decoration:none;font:700 1rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);box-shadow:0 10px 22px -12px rgba(212,67,42,.8);transition:background .15s,transform .15s;} html body.hp .trw-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} html[dir="rtl"] body.hp .trw-go svg{transform:scaleX(-1);} html body.hp .trw-go:hover{background:var(--cta-hover,#B8361F);} html body.hp .trw-go:active{transform:scale(.98);} html body.hp .trw-go:focus-visible{outline:2.5px solid var(--clay-deep,#066570);outline-offset:3px;} html body.hp .trw-more{margin:.6rem 0 0;text-align:center;font-size:.78rem;line-height:1.35;color:var(--ink-soft,#5C6B6E);} html body.hp .trw-card .ac-pop{z-index:30;} /* tablets and phones: copy on top, card full width */ @media (max-width:900px){ html body.hp .trw{grid-template-columns:minmax(0,1fr);gap:1.1rem;} html body.hp .trw-copy .trw-pts{grid-template-columns:repeat(3,auto);justify-content:start;gap:.45rem 1rem;} } @media (max-width:640px){ html body.hp .trw{padding:1.1rem .85rem .85rem;border-radius:20px;} html body.hp .trw-h{font-size:1.4rem;margin:.7rem 0 .4rem;} html body.hp .trw-p{font-size:.9rem;margin-bottom:.75rem;} html body.hp .trw-copy .trw-pts{grid-template-columns:minmax(0,1fr);} html body.hp .trw-pts li{font-size:.84rem;} html body.hp .trw-card{padding:.8rem;} html body.hp .trw-tabs button{flex-direction:column;gap:.2rem;font-size:.76rem;min-height:52px;} } @media (prefers-reduced-motion:reduce){html body.hp .trw-swap,html body.hp .trw-go{transition:none;}html body.hp .trw-swap:hover{transform:translateY(-50%);}} /* ==== /homepage transfer tool ==== */ /* ==== homepage header links always visible (2026-10-08) ==== */ /* owner: bring the Stays / Activities / Wellness / Day trips / Transfers / Contact buttons back on the homepage (they were hidden until the search tabs scrolled away; site.js HN_PAGE is now off). Over the photo, a soft dark fade at the top of the hero and a light text shadow keep the white labels readable on bright sky (Airbnb / Booking.com). */ html body.hp .hero::after{content:"";display:block;opacity:1;background-size:auto;position:absolute;inset:0 0 auto 0;height:170px;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(6,24,28,.42) 0%,rgba(6,24,28,.18) 55%,rgba(6,24,28,0) 100%);} html body.hp .hero > .wrap{z-index:20;} html header.top.hdr-clear .tnav a > span:not(.nav-ic){text-shadow:0 1px 3px rgba(0,0,0,.35);} @media (min-width:1241px){ html header.top.hdr-clear .tnav a:hover > span:not(.nav-ic){text-shadow:none;} } /* ==== /homepage header links always visible ==== */ /* ==== calmer first screen (2026-10-08) ==== */ /* owner: "very full and distracting, make it simple, professional and easy to book". One message, one action: headline + search. Removed from the first screen: the subtitle, the quick-pick chips, the icon circles in the header links (the search tabs right below show the same icons) and the header WhatsApp button (the round WhatsApp button at the bottom right stays). The 4-box benefits card becomes one slim line of ticks under the photo. Markup unchanged: delete this block to get the previous look back. */ html body.hp .hero .hsub,html body.hp .hero .hq{display:none!important;} @media (min-width:701px){ html body.hp .hero h1 span{font-size:min(3rem,max(1.15rem,calc(97cqi / var(--hl))))!important;} html body.hp .hero h1{margin-bottom:clamp(1.4rem,2.6vw,2rem)!important;} html body.hp .hero:has(.hslides){min-height:calc(min(66vh,600px) + var(--hdr-h,76px))!important; padding-bottom:clamp(2.5rem,5vw,3.75rem)!important;} } @media (min-width:1241px){ html body.hp header.top .tnav a > .nav-ic{display:none!important;} html body.hp header.top .tnav a{padding:.55rem .95rem!important;} } @media (min-width:881px){ html body.hp header.top .tin-ctas{display:none!important;} } /* phones: without the subtitle the content no longer needs a full screen; start it under the header so the whole search card (and its Search button) sits above the bottom bar */ @media (max-width:700px){ html body.hp .hero:has(.hslides){min-height:0!important;justify-content:flex-start!important; padding-top:calc(var(--hdr-h,76px) + clamp(2rem,9vw,3rem))!important;padding-bottom:1.75rem!important;} html body.hp .hero h1{margin-bottom:1.1rem!important;} } /* benefits: one slim line, ticks + titles, no card, no descriptions */ html body.hp .hp-benefits{margin-top:0!important;max-width:none;padding-block:0;border-bottom:1px solid var(--line,#E5E8E6);} html body.hp .hp-benefits .trust.trust--pro{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem clamp(1.4rem,3.2vw,3rem); max-width:1140px;margin-inline:auto;padding:1rem 0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;} html body.hp .hp-benefits .trust--pro .ti{display:flex!important;flex-direction:row!important;align-items:center!important;gap:.5rem!important;padding:0!important; border:0!important;flex:0 0 auto;} html body.hp .hp-benefits .trust--pro .ti + .ti{border-inline-start:0!important;} html body.hp .hp-benefits .trust--pro .ti-ic{width:1.75rem!important;height:1.75rem!important;flex:none;background:var(--ok-tint,#E6F4EC)!important;color:var(--ok,#1B7A4B)!important;} html body.hp .hp-benefits .trust--pro .ti .icon{width:.95rem!important;height:.95rem!important;} html body.hp .hp-benefits .trust--pro .ti-t{font:600 .9rem/1.25 var(--font-ui)!important;color:var(--head)!important;white-space:nowrap;} html body.hp .hp-benefits .trust--pro .ti-d{display:none!important;} @media (max-width:700px){ html body.hp .hp-benefits .trust.trust--pro{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem .9rem;padding:.9rem 0!important;} html body.hp .hp-benefits .trust--pro .ti-t{font-size:.8rem!important;white-space:normal;} html body.hp .hp-benefits .trust--pro .ti-ic{width:1.6rem!important;height:1.6rem!important;} } /* ==== /calmer first screen ==== */ /* ==== hero: apartment composition (2026-10-08) ==== */ /* owner: "design a good picture to match the website and focus on apartments". No full-bleed photo any more: a deep teal brand background with a warm sun glow, the headline on the left and, on the right, 3 real homes - an arch-shaped main photo (the arch of the logo) and two rounded photos overlapping it, each a link with "area · €price / night". Markup + photos: _hero_apts_2026.py. Phones/tablets: the same 3 photos as one compact row above the search. */ html body.hp .hero{background: radial-gradient(42rem 30rem at 86% 12%, rgba(255,181,71,.17), transparent 62%), radial-gradient(40rem 26rem at 0% 100%, rgba(27,176,186,.20), transparent 70%), linear-gradient(140deg,#082A31 0%,#0D424B 50%,#0B5A63 100%)!important;} html body.hp .hslides,html body.hp .hshade,html body.hp .hero::after{display:none!important;} html body.hp .hero:has(.hslides){min-height:0!important;padding-top:calc(var(--hdr-h,76px) + clamp(1.5rem,3.2vw,3rem))!important;padding-bottom:clamp(2rem,4vw,3rem)!important;} html body.hp .heyebrow{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;color:#FFD69B; font:700 .78rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);letter-spacing:.09em;text-transform:uppercase;} html body.hp .heyebrow::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:#FFB547;box-shadow:0 0 0 4px rgba(255,181,71,.2);} html body.hp .hstays{position:relative;} html body.hp .hs{display:block;overflow:hidden;color:var(--head,#17252A);text-decoration:none;background:#123f47; box-shadow:0 26px 50px -22px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;} html body.hp .hs img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);} html body.hp .hs:hover{transform:translateY(-4px);box-shadow:0 32px 60px -22px rgba(0,0,0,.7);} html body.hp .hs:hover img{transform:scale(1.04);} html body.hp .hs:focus-visible{outline:3px solid #fff;outline-offset:3px;} html body.hp .hs-tag{position:absolute;inset-inline-start:.65rem;bottom:.65rem;display:inline-flex;align-items:baseline;gap:.25rem;max-width:calc(100% - 1.3rem); padding:.45rem .7rem;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 6px 16px -6px rgba(0,0,0,.35); font:600 .76rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body.hp .hs-tag b{font-weight:800;} html body.hp .hs-tag small{font-size:.68rem;font-weight:500;color:var(--ink-soft,#5C6B6E);} html:is([lang="ar"]) body.hp .hs-tag{font-family:'Tajawal',sans-serif;} @media (min-width:901px){ html body.hp .hero .hgrid{grid-template-columns:minmax(0,1fr) minmax(0,500px)!important;column-gap:clamp(2rem,4vw,4.5rem);align-items:center; margin-bottom:clamp(1.6rem,2.6vw,2.2rem);} html body.hp .hero h1{margin-bottom:0!important;} html body.hp .hstays{--mw:clamp(205px,18.5vw,255px);height:calc(var(--mw) * 1.42);} /* a large faint arch behind the photos, echoing the logo */ html body.hp .hstays::before{content:"";position:absolute;inset-inline-start:50%;top:-6%;width:calc(var(--mw) * 1.55);height:112%; transform:translateX(-50%);border:1.5px solid rgba(255,255,255,.12);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none;} html[dir="rtl"] body.hp .hstays::before{transform:translateX(50%);} html body.hp .hs{position:absolute;} html body.hp .hs-main{inset-inline-start:calc(50% - var(--mw) / 2);top:0;width:var(--mw);height:100%; border-radius:calc(var(--mw) / 2) calc(var(--mw) / 2) 22px 22px;z-index:1;} html body.hp .hs-main .hs-tag{inset-inline-start:50%;transform:translateX(-50%);bottom:.9rem;} html[dir="rtl"] body.hp .hs-main .hs-tag{transform:translateX(50%);} html body.hp .hs-a,html body.hp .hs-b{width:42%;aspect-ratio:4/3;border-radius:20px;border:4px solid rgba(255,255,255,.92);z-index:2;} html body.hp .hs-a{inset-inline-start:0;top:5%;} html body.hp .hs-b{inset-inline-end:0;top:33%;} } @media (min-width:901px) and (max-width:1180px){ html body.hp .hs-a,html body.hp .hs-b{width:38%;} } @media (max-width:900px){ html body.hp .hstays{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:.6rem;height:clamp(96px,26vw,190px);margin:0 0 1.1rem;} html body.hp .hs{position:relative;height:100%;border-radius:16px;} html body.hp .hs-main{order:2;border-radius:999px 999px 16px 16px;} html body.hp .hs-a{order:1;} html body.hp .hs-b{order:3;} html body.hp .hero h1{margin-bottom:1rem!important;} html body.hp .hs-tag{inset-inline-start:.4rem;bottom:.4rem;padding:.32rem .5rem;font-size:.68rem;} html body.hp .hs-loc,html body.hp .hs-tag small{display:none;} } @media (max-width:700px){ html body.hp .hero:has(.hslides){padding-top:calc(var(--hdr-h,76px) + 1.25rem)!important;padding-bottom:1.5rem!important;} html body.hp .heyebrow{display:none;} html body.hp .hstays{height:96px;gap:.5rem;margin-bottom:1rem;} } @media (prefers-reduced-motion:reduce){html body.hp .hs,html body.hp .hs img{transition:none;}} /* ==== /hero: apartment composition ==== */ /* ==== phone home: organised first screen (2026-10-08) ==== */ /* owner (phone screenshot): "very full and not organised". Phones only: headline beside ONE arch photo (the logo shape) instead of a row of 3, and a tighter search card - Where on its own row, When | Who side by side, smaller tabs, slimmer Search button. Same fields and flow, nothing removed. */ @media (max-width:700px){ html body.hp .hero .hgrid{display:grid!important;grid-template-columns:minmax(0,1fr) 104px!important;column-gap:14px!important; align-items:center!important;margin-bottom:1.1rem!important;} html body.hp .hero .htext{display:block!important;grid-column:1!important;grid-row:1!important;min-width:0;} html body.hp .hero h1{margin:0!important;font-size:1.36rem!important;line-height:1.18!important;} html body.hp .hero h1 span{font-size:1.36rem!important;line-height:1.18!important;} html body.hp .hstays{display:block!important;grid-column:2!important;grid-row:1!important;height:138px!important;margin:0!important;} /* owner 2026-10-09: on phones the arch shows the Agadir Bay apartment (hs-a); computers keep Marina in the arch */ html body.hp .hs-main,html body.hp .hs-b{display:none!important;} html body.hp .hs-a{display:block!important;height:100%;border:0!important;aspect-ratio:auto!important;border-radius:52px 52px 14px 14px!important; box-shadow:0 18px 34px -16px rgba(0,0,0,.65);} html body.hp .hs-a img{object-position:44% 50%;} html body.hp .hs-a .hs-tag{inset-inline-start:50%;transform:translateX(-50%);bottom:.45rem;} html[dir="rtl"] body.hp .hs-a .hs-tag{transform:translateX(50%);} /* search card */ html body.hp .hero .booker{padding:.5rem .6rem .7rem!important;border-radius:22px!important;} html body.hp .hero .btabs{padding-bottom:.15rem!important;margin-bottom:.45rem!important;} html body.hp .hero .btab{padding:.35rem .1rem .55rem!important;gap:.15rem!important;font-size:.72rem!important;} html body.hp .hero .btab .b-ic3{width:26px!important;height:26px!important;} html body.hp .hero .bf{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:0!important;padding:0 0 .55rem!important; border:1px solid var(--line,#E5E8E6)!important;border-radius:18px!important;background:#fff!important;box-shadow:none!important;overflow:hidden;} html body.hp .hero .bf > .bfd{min-width:0;padding:.6rem .85rem!important;min-height:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;} html body.hp .hero .bf > .bfd:first-child{grid-column:1 / -1;border-bottom:1px solid var(--line,#E5E8E6)!important;} html body.hp .hero .bf > .bfd:nth-child(3){border-inline-start:1px solid var(--line,#E5E8E6)!important;} html body.hp .hero .bf > .bfd + .bfd::before{display:none!important;} html body.hp .hero .bf .bfd-v{font-size:.88rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body.hp .hero .bf .chk-btn{grid-column:1 / -1;min-height:48px!important;height:48px!important;margin:.55rem .45rem 0!important;font-size:.98rem!important;} } /* ==== /phone home ==== */ /* ==== hero title (2026-10-09) ==== */ /* owner: the 3-sentence slogan was unattractive and took 5 lines on phones. One short line now (hero_title, _hero_title_2026.py), white, no italic accent, no line-by-line width fitting. */ html body.hp .hero h1.htitle{margin:0!important;color:#fff;text-wrap:balance;} html body.hp .hero h1.htitle span{display:inline!important;font-size:clamp(2.3rem,3.6vw,3.25rem)!important;line-height:1.08!important; letter-spacing:-.01em;font-style:normal!important;color:#fff!important;font-variation-settings:"SOFT" 30,"WONK" 0;} @media (max-width:900px){ html body.hp .hero h1.htitle span{font-size:clamp(1.9rem,5vw,2.4rem)!important;} } @media (max-width:700px){ html body.hp .hero h1.htitle,html body.hp .hero h1.htitle span{font-size:1.72rem!important;line-height:1.12!important;} } @media (max-width:360px){ html body.hp .hero h1.htitle,html body.hp .hero h1.htitle span{font-size:1.5rem!important;} } html[lang="ar"] body.hp .hero h1.htitle span{letter-spacing:0;} /* ==== /hero title ==== */ /* ==== phone home: app style, option B (2026-10-09) ==== */ /* owner chose option B: on phones the homepage starts like the Airbnb app - white header, one search pill, the category tabs under it, then large apartment cards straight away. The pill (site.js "homepage search pill on phones") opens the usual search card and its Where / When / Who sheets. Computers unchanged. Delete this block to undo. */ html body.hp .hp-pill,html body.hp .hp-sclose{display:none;} @media (max-width:700px){ html body.hp .hero{background:#fff!important;} html body.hp .hero:has(.hslides){padding-top:calc(var(--hdr-h,76px) - 20px)!important;padding-bottom:.4rem!important;} html body.hp .hero .hgrid{display:block!important;margin:0!important;} html body.hp .hero .htext{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;} html body.hp .hstays{display:none!important;} html body.hp .hero .booker{display:flex!important;flex-direction:column;background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;} html body.hp .hero .booker > .btabs{order:2;margin:.8rem 0 0!important;border-bottom:1px solid #EEF1F0!important;} html body.hp .hero .booker > .hp-pill{order:1;} html body.hp .hero .booker:not(.hp-sopen) > :not(.btabs):not(.hp-pill){display:none!important;} html body.hp .hero .booker.hp-sopen > .bpanel.active{order:3;margin-top:.8rem;} html body.hp .hero .booker.hp-sopen > .hp-pill{display:none!important;} html body.hp .hero .booker.hp-sopen > .btabs{order:1;margin-top:0!important;} html body.hp .hero .booker > :not(.btabs):not(.hp-pill):not(.bpanel):not(.hp-sclose){order:4;} html body.hp .hp-pill{display:flex;align-items:center;gap:.8rem;width:100%;min-height:3.8rem;padding:.45rem 1.1rem .45rem .5rem; border:0;border-radius:999px;background:#fff;cursor:pointer;text-align:start;color:#17252A; box-shadow:0 10px 28px -10px rgba(10,40,45,.35),0 0 0 1px rgba(23,37,42,.07);font-family:'Plus Jakarta Sans',system-ui,sans-serif;} html body.hp .hp-pill:active{transform:scale(.985);} html body.hp .hp-pill:focus-visible{outline:2.5px solid #066570;outline-offset:2px;} html body.hp .hp-pill-ic{flex:0 0 2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;background:var(--cta,#D4432A);color:#fff;} html body.hp .hp-pill-ic svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;} html body.hp .hp-pill-tx{display:flex;flex-direction:column;gap:.12rem;min-width:0;} html body.hp .hp-pill-t{font-size:.98rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body.hp .hp-pill-s{font-size:.8rem;line-height:1.25;color:#5C6B6E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body.hp .hp-pill-s:empty{display:none;} html body.hp .hero .booker.hp-sopen .hp-sclose{display:block;order:5;margin:.4rem auto 0;padding:.6rem 1.2rem;min-height:44px;border:0;background:none; font:600 .9rem/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#17252A;text-decoration:underline;text-underline-offset:3px;cursor:pointer;} html body.hp .hero .booker.hp-sopen .bf{box-shadow:0 10px 28px -12px rgba(10,40,45,.3)!important;} /* stays right after the search (a swipe row like the other sections, owner 2026-10-09) */ html body.hp main#main{display:flex;flex-direction:column;} html body.hp main#main > *{order:3;} html body.hp main#main > .hero{order:0;} html body.hp main#main > #stays{order:1;background:#fff!important;padding-top:1.1rem!important;} html body.hp main#main > .hp-benefits{order:2;} } /* ==== /phone home: app style ==== */ /* ==== phone home: postcard + zellij (F + W), 2026-10-09 ==== */ /* owner: "mix F with W". Phones only. Zellij band behind the (clear again) header, MARHABA + a tilted postcard ("Greetings from AGADIR", letters filled with a real pool photo, price stamp), the option-B search pill + tabs, then three Moroccan arch windows (Taghazout / Agadir Bay / The Marina, real lowest prices). Markup: _home_mix_2026.py */ html body.hp .hp-zl,html body.hp .hp-pc,html body.hp .hp-arch{display:none;} @media (max-width:700px){ html body.hp .hero{position:relative;background:#F6EEDF!important; background-image:radial-gradient(circle at 15% 55%,rgba(255,255,255,.55),transparent 40%),radial-gradient(circle at 90% 95%,rgba(212,67,42,.07),transparent 45%)!important;} html body.hp .hero:has(.hslides){padding-top:calc(var(--hdr-h,76px) - 6px)!important;padding-bottom:.6rem!important;} html body.hp .hp-zl{display:block;position:absolute;left:0;right:0;top:0;height:250px;z-index:0;background-color:#0B5A63; background-image:conic-gradient(from 45deg at 50% 50%,#0F6B75 0 25%,#0B5A63 0 50%,#0F6B75 0 75%,#0B5A63 0), radial-gradient(circle at 50% 50%,#FFB547 0 2.5px,transparent 3.5px);background-size:26px 26px,26px 26px;} html body.hp .hp-zl::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,42,49,.72),rgba(8,42,49,.45) 70%,rgba(8,42,49,.25));} html body.hp .hp-zl::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:18px;z-index:1; background:radial-gradient(circle at 9px 0,transparent 8.5px,#F6EEDF 9px) 0 0/18px 18px repeat-x;} html body.hp .hero > .wrap{position:relative;z-index:20;} html body.hp .hp-pc{display:block;} html body.hp .hp-mh{margin:.2rem .4rem .8rem;text-align:start;color:#FFD69B;font:700 .72rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);letter-spacing:.22em;text-transform:uppercase;} html body.hp .hp-card{position:relative;margin:0 .35rem;background:#FFFDF8;border-radius:6px;padding:1.15rem 1.05rem 1.1rem;transform:rotate(-2deg); box-shadow:0 22px 40px -22px rgba(60,40,10,.6),0 0 0 1px rgba(60,40,10,.06);} html body.hp .hp-greet{display:block;font:italic 500 1.3rem/1.1 'Fraunces',serif;color:#B8361F;} html body.hp .hp-word{display:block;font:900 3.55rem/.95 'Fraunces',serif;letter-spacing:-.02em;margin:.2rem 0 .55rem; background-size:cover;background-position:50% 58%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:saturate(1.2) contrast(1.1);} html[dir="rtl"] body.hp .hp-word{direction:ltr;text-align:right;} html body.hp .hp-stamp{position:absolute;top:-.8rem;inset-inline-end:-.4rem;width:5.1rem;padding:.3rem;background:#fff;transform:rotate(8deg); box-shadow:0 6px 14px -6px rgba(0,0,0,.35);outline:2px dashed #E3D3B8;outline-offset:-3px;} html body.hp .hp-stamp img{display:block;width:100%;height:3.9rem;object-fit:cover;} html body.hp .hp-stamp b{display:block;text-align:center;font:700 .68rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#B8361F;margin-top:.2rem;} html body.hp .hp-note{margin:0;max-width:15.5rem;font:italic 400 .98rem/1.4 'Fraunces',serif;color:#3E4B4E;} html:is([lang="ar"]) body.hp .hp-note,html:is([lang="ar"]) body.hp .hp-greet{font-family:'Tajawal',sans-serif;font-style:normal;} html body.hp .hp-lines{position:absolute;inset-inline-end:1.1rem;bottom:1.3rem;display:flex;flex-direction:column;gap:.5rem;} html body.hp .hp-lines i{display:block;width:4.2rem;height:1px;background:#C9B79A;} html body.hp .hero .booker{margin-top:1.4rem;} html body.hp .hero .booker > .btabs{border-bottom-color:#E3D3B8!important;} html body.hp .hp-arch{display:block;margin-top:1.1rem;} html body.hp .hp-ah{margin:0 0 .7rem;font:600 1.25rem/1.15 'Fraunces',serif;color:var(--head,#17252A);} html body.hp .hp-ar{display:flex;gap:.55rem;} html body.hp .hp-a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--head,#17252A);text-decoration:none;} html body.hp .hp-a img{display:block;width:100%;height:9.4rem;object-fit:cover;border-radius:60px 60px 10px 10px;border:4px solid #fff; box-shadow:0 14px 26px -14px rgba(10,40,45,.6);transition:transform .2s;} html body.hp .hp-a:active img{transform:scale(.97);} html body.hp .hp-a b{margin-top:.4rem;font:600 .95rem/1.15 'Fraunces',serif;} html body.hp .hp-a small{font:700 .72rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#D4432A;} html body.hp .hp-a:focus-visible{outline:2.5px solid #066570;outline-offset:3px;border-radius:12px;} } @media (max-width:360px){ html body.hp .hp-word{font-size:3.1rem;} } /* ==== /phone home: postcard + zellij ==== */ /* ==== mobile homepage v2 (owner brief 2026-10-09) ==== */ /* Markup + data: _home_mix_2026.py (stamp link, 7 area arches, hero trust row, static map pins, stays sorted by price, reviews total, Wellness chip) and transfer-widget.js (data-compact). Phones: postcard -> trust row -> search pill (no category tabs) -> Pick your corner -> What are you looking for? -> Stays -> Activities -> Day trips -> Wellness -> Transfers (compact) -> Reviews -> FAQ -> Enquire -> Based in Agadir. "The city is part of the stay" is hidden on phones (Pick your corner replaces it there). Computers keep their layout. */ html body.hp .hp-trust{display:none;} html body.hp a.hp-stamp{display:block;text-decoration:none;color:inherit;} html body.hp a.hp-stamp:focus-visible{outline:2.5px solid #066570;outline-offset:3px;} html body.hp a.hp-stamp:active{transform:rotate(8deg) scale(.96);} @media (max-width:700px){ html body.hp .hero .booker > .btabs{display:none!important;} html body.hp .hp-trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem .7rem;margin:1.15rem .3rem 0;} html body.hp .hp-trust .ti{display:flex;align-items:center;gap:.45rem;min-width:0;} html body.hp .hp-trust .ti-ic{flex:none;display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%; background:var(--ok-tint,#E6F4EC);color:var(--ok,#1B7A4B);} html body.hp .hp-trust .ti-ic svg{width:.9rem;height:.9rem;} html body.hp .hp-trust .ti-t{margin:0;font:700 .78rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);} html body.hp .hp-trust .ti-d{display:none;} html:is([lang="ar"]) body.hp .hp-trust .ti-t{font-family:'Tajawal',sans-serif;} html body.hp .hero .booker{margin-top:.95rem!important;} /* 7 areas: one swipe row */ html body.hp .hp-ar{gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; margin-inline:-16px;padding:0 16px .5rem;scroll-padding-inline:16px;} html body.hp .hp-ar::-webkit-scrollbar{display:none;} html body.hp .hp-a{flex:0 0 30%;scroll-snap-align:start;} html body.hp .hp-a small{text-wrap:balance;} /* section order */ html body.hp main#main > #explore{order:1;} html body.hp main#main > #stays{order:2;} html body.hp main#main > .hp-benefits,html body.hp main#main > #discover{display:none!important;} } /* static map of Agadir (replaces the Google embed): image + translatable pins, all widths */ html body.hp .loc-map--static{position:relative;margin:0;height:auto!important;aspect-ratio:769/669;overflow:hidden; border:1px solid var(--line,#E5E8E6);border-radius:1.25rem;background:#E8E4DC;} html body.hp .loc-map--static img{display:block;width:100%;height:100%;object-fit:cover;} html body.hp .lm-pin{position:absolute;width:0;height:0;z-index:2;text-decoration:none;color:var(--head,#17252A);} html body.hp .lm-pin i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--cta,#D4432A); border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);} html body.hp .lm-pin span{position:absolute;top:-.62rem;white-space:nowrap;padding:.2rem .5rem;border-radius:999px;background:#fff; font:700 .7rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);box-shadow:0 2px 8px rgba(0,0,0,.2);} html body.hp .lm-pin--r span{left:12px;} html body.hp .lm-pin--l span{right:12px;} html body.hp .lm-pin--b span{top:12px;left:0;transform:translateX(-50%);} html body.hp .lm-pin:hover span,html body.hp .lm-pin:focus-visible span{background:var(--clay,#087E8B);color:#fff;} html body.hp .lm-pin:focus-visible{outline:none;} html body.hp .lm-tg,html body.hp .lm-open{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .75rem;border-radius:999px; background:#fff;color:var(--clay-deep,#066570);text-decoration:none;font:700 .74rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif); box-shadow:0 3px 10px rgba(0,0,0,.18);} html body.hp .lm-tg{left:.6rem;top:.6rem;} html body.hp .lm-open{left:.6rem;bottom:.6rem;} html body.hp .lm-attr{position:absolute;z-index:3;right:0;bottom:0;padding:.15rem .4rem;background:rgba(255,255,255,.85);color:#4A5659; font:500 .6rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);text-decoration:none;border-top-left-radius:6px;} html:is([lang="ar"]) body.hp :is(.lm-pin span,.lm-tg,.lm-open){font-family:'Tajawal',sans-serif;} /* reviews: combined line above the rating cards */ html body.hp .rv-total{grid-column:1 / -1;flex:1 1 100%;margin:0;font:600 .95rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);} html body.hp .rv-total b{font-size:1.15rem;color:var(--head,#17252A);} html body.hp .rv-total b span{color:var(--star,#BD8110);} /* compact transfer widget (homepage) */ html body.hp .trw--compact .trw-h{margin-bottom:0;} html body.hp .trw-more--link{display:flex;justify-content:center;align-items:center;gap:.35rem;margin:.7rem 0 0;font:700 .82rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif); color:var(--clay-deep,#066570);text-decoration:none;} html body.hp .trw-more--link svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} html[dir="rtl"] body.hp .trw-more--link svg{transform:scaleX(-1);} html body.hp .trw-more--link:hover{text-decoration:underline;} /* ==== /mobile homepage v2 ==== */ /* ==== desktop home (2026-10-09) ==== */ /* owner brief, desktop only unless stated; phones keep the postcard hero (no subheading there). 1. hero: service subheading (.hsub) + smaller line (.hsub2) fill the empty space under the headline. */ html body.hp .hero .hsub2{display:none;} @media (min-width:701px){ html body.hp .hero .htext .hsub{display:block!important;white-space:normal!important;max-width:31rem;margin:1.15rem 0 0; font:600 clamp(1.08rem,1.45vw,1.3rem)/1.4 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#fff;text-wrap:balance;} html body.hp .hero .htext .hsub2{display:block;max-width:29rem;margin:.65rem 0 0; font:400 clamp(.92rem,1.05vw,1.02rem)/1.55 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:rgba(255,255,255,.8);text-wrap:pretty;} html.mo-ready body.hp .hero .hsub2{animation:moUp .6s cubic-bezier(.16,1,.3,1) .34s both;} } @media (prefers-reduced-motion:reduce){html body.hp .hero .hsub2{animation:none!important;}} /* ==== /desktop home ==== */ /* ==== desktop home: wellness card + treatments (2026-10-09) ==== */ /* 6. one full-width card on desktop (photo left, text right) with treatments + prices from the spa menu data (_home_desktop_2026.py). The list links sit above the card's stretched link (z-index 3). Phones keep the stacked card and get the same list, one per row. */ html body.hp #wellness .wl-pop{position:relative;z-index:4;margin:.55rem 0 .2rem;} html body.hp #wellness .wl-h{margin:0 0 .45rem;font:700 .72rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft,#5C6B6E);} html[lang="ar"] body.hp #wellness .wl-h{letter-spacing:0;} html body.hp #wellness .wl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem;} html body.hp #wellness .wl-i{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem .75rem;border:1px solid var(--line,#E5E8E6); border-radius:12px;background:#fff;color:var(--head,#17252A);text-decoration:none;transition:border-color .2s,background .2s,transform .15s;} html body.hp #wellness .wl-i:hover{border-color:var(--clay,#087E8B);background:var(--clay-tint,#E4F2F3);} html body.hp #wellness .wl-i:focus-visible{outline:2.5px solid var(--clay-deep,#066570);outline-offset:2px;} html body.hp #wellness .wl-n{flex:1;min-width:0;font:600 .88rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html body.hp #wellness .wl-p{font:700 .92rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);white-space:nowrap;} html body.hp #wellness .wl-i .icon{width:1rem;height:1rem;flex:0 0 auto;color:var(--clay,#087E8B);} html[dir="rtl"] body.hp #wellness .wl-i .icon,html[dir="rtl"] body.hp #wellness .wl-all .icon{transform:scaleX(-1);} html body.hp #wellness .wl-all{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;min-height:32px; font:700 .88rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--clay-deep,#066570);text-decoration:underline;text-underline-offset:3px;} html body.hp #wellness .wl-all .icon{width:1rem;height:1rem;} @media (min-width:701px){ html body.hp #wellness-scroll.hscroll > .scard:only-of-type{width:100%!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .scover{min-height:100%!important;} html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sbody{padding:1.6rem 2rem 1.5rem!important;justify-content:flex-start!important;} html body.hp #wellness .wl-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;} html body.hp #wellness .wl-pop{margin:.8rem 0 .3rem;} } @media (min-width:1100px){ html body.hp #wellness-scroll.hscroll > .scard:only-of-type .sbody{padding:1.9rem 2.4rem 1.7rem!important;} } @media (prefers-reduced-motion:reduce){html body.hp #wellness .wl-i{transition:none;}} html body.hp #wellness .wl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;} html body.hp #wellness .wl-d{font:500 .76rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);}/* ==== /desktop home: wellness ==== */ /* ==== desktop home: reviews (2026-10-09) ==== */ /* 7. quotes clamped to 6 lines with a "Read more" toggle (site.js "reviews: Read more"); cards equal height while collapsed; an open card shows its whole text and the others keep the collapsed height (--rc-h). */ html body.hp .rgrid--real .rc{display:flex!important;flex-direction:column;} html body.hp .rgrid--real .rc .rquote{-webkit-line-clamp:6!important;} html body.hp .rgrid--real .rc.is-open .rquote{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;} html body.hp .rgrid--real .rc-more{align-self:flex-start;margin:.45rem 0 0;padding:.2rem 0;min-height:28px;border:0;background:none;cursor:pointer; font:700 .88rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--clay-deep,#066570);text-decoration:underline;text-underline-offset:3px;} html body.hp .rgrid--real .rc-more[hidden]{display:none!important;} html body.hp .rgrid--real .rc-more:hover{color:var(--clay,#087E8B);} html body.hp .rgrid--real .rc-more:focus-visible{outline:2.5px solid var(--clay-deep,#066570);outline-offset:2px;border-radius:4px;} html body.hp .rgrid--real .rc-foot{margin-top:auto!important;} html body.hp .rgrid--real.rv-open{align-items:flex-start!important;} html body.hp .rgrid--real.rv-open > .rc:not(.is-open){min-height:var(--rc-h);} /* ==== /desktop home: reviews ==== */ /* ==== map corner chips: Taghazout + Aourir stacked (2026-10-10) ==== */ html body.hp .lm-tg + .lm-tg{top:2.95rem;} /* ==== "Plan the rest of your trip": slim strip of 4 tiles after the Stays row (2026-10-10) ==== Was a full-screen bento above the Stays row; the owner chose apartments first + a compact cross-sell. */ html body.hp #explore .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;height:clamp(170px,15vw,210px);gap:12px;} html body.hp #explore .cat{aspect-ratio:auto!important;grid-row:auto;grid-column:auto;} html body.hp #explore .cat-t{inset-inline:16px;bottom:14px;padding-inline-end:2.8rem;gap:.12rem;} html body.hp #explore .cat-t > b{font-size:clamp(1.15rem,1.5vw,1.4rem);} html body.hp #explore .cat-d{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;} html body.hp #explore .cat-p{margin-top:.2rem;} html body.hp #explore .cat-p b{font-size:var(--fs-base);} html body.hp #explore .cat-go{width:36px;height:36px;bottom:14px;inset-inline-end:14px;} html body.hp #explore .cat-n{top:10px;inset-inline-start:10px;} html body.hp #explore{padding-top:clamp(1.25rem,2vw,1.5rem);} @media (min-width:701px){ html body.hp #stays{padding-top:clamp(1.75rem,3vw,2.5rem);} } @media (max-width:900px){ html body.hp #explore .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;gap:10px;} html body.hp #explore .cat{aspect-ratio:16 / 9!important;} } @media (max-width:600px){ html body.hp #explore .cat{aspect-ratio:4 / 3!important;} html body.hp #explore .cat-t{inset-inline:10px;bottom:10px;padding-inline-end:0;} html body.hp #explore .cat-t > b{font-size:1.05rem;} html body.hp #explore .cat-d{display:none;} html body.hp #explore .cat-go{display:none;} html body.hp #explore .cat-n{display:none;} } @media (max-width:700px){ html body.hp main#main > #stays{order:1;} html body.hp main#main > #explore{order:2;} } /* ==== phone homepage, owner mockup (2026-10-13) ==== */ /* Markup: _home_mix_2026.py + _home_mobile_2026_10.py (quote, See deals, arch reasons/counts, See map, banner, how it works, host card) and site.js "phone homepage, owner mockup" (quick search row, rotating quotes, More menu). Phones only (<=700px); .hp-more is hidden on computers like the rest of the phone hero. */ html body.hp .hp-more,html body.hp .hp-quick{display:none;} @media (max-width:700px){ /* 2 - AGADIR readable: a dark teal outline + soft shadow around the photo letters (fill unchanged) */ html body.hp .hp-word{-webkit-text-stroke:1.4px #0B4B53;filter:saturate(1.15) contrast(1.1) drop-shadow(0 2px 0 rgba(11,75,83,.28));} /* 5 - stamp: "See deals" */ html body.hp .hp-stamp{width:5.4rem;} html body.hp .hp-deals{display:block;margin-top:.1rem;text-align:center;font:700 .62rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif); color:#0B4B53;text-decoration:underline;text-underline-offset:2px;} /* 6 - a real guest quote on the postcard */ html body.hp .hp-q{margin:0;max-width:15.5rem;min-height:5.2rem;} html body.hp .hp-qi{margin:0;} html body.hp .hp-qi[hidden]{display:none!important;} html body.hp .hp-qi p{margin:0;font:italic 500 1rem/1.35 'Fraunces',serif;color:#2B3739;text-wrap:balance;} html body.hp .hp-qs{display:block;margin:.25rem 0 .1rem;color:#BD8110;font-size:1rem;letter-spacing:.08em;line-height:1;} html body.hp .hp-qi cite{font:italic 500 .8rem/1.3 'Fraunces',serif;color:#4A585B;} html:is([lang="ar"]) body.hp .hp-qi cite{font-family:'Tajawal',sans-serif;font-style:normal;} html body.hp .hp-qi p{direction:ltr;unicode-bidi:isolate;} html[dir="rtl"] body.hp .hp-qi p{text-align:right;} /* 7 - trust: one swipeable row of chips */ html body.hp .hp-trust{display:flex!important;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin:1.1rem -16px 0!important;padding:0 16px .2rem;} html body.hp .hp-trust::-webkit-scrollbar{display:none;} html body.hp .hp-trust .ti{flex:none;padding:.5rem .85rem .5rem .6rem;background:#fff;border:1px solid #E3D3B8;border-radius:999px;} html body.hp .hp-trust .ti-ic{width:1.3rem;height:1.3rem;background:transparent;color:#1B7A4B;} html body.hp .hp-trust .ti-ic svg{width:1rem;height:1rem;stroke-width:2.2;} html body.hp .hp-trust .ti-t{white-space:nowrap;font-size:.82rem;} /* 4 - the search as one white card: "Where to?" + date chips + guests + Search */ html body.hp .hero .booker:not(.hp-sopen){background:#fff!important;border-radius:24px!important;padding:.3rem .3rem .75rem!important; box-shadow:0 14px 34px -14px rgba(10,40,45,.4),0 0 0 1px rgba(23,37,42,.06)!important;} html body.hp .hero .booker:not(.hp-sopen) > .hp-pill{box-shadow:none;background:transparent;} html body.hp .hp-pill-s{color:#4A585B;} html body.hp .hero .booker:not(.hp-sopen) > .hp-quick:not(.x):not(.y){display:block!important;order:1;} html body.hp .hero .booker.hp-sopen > .hp-quick{display:none!important;} html body.hp .hp-qd{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding:.15rem .7rem .7rem;} html body.hp .hp-qd::-webkit-scrollbar{display:none;} html body.hp .hp-qd button{flex:none;min-height:44px;padding:0 1rem;border:1.5px solid #E3D3B8;border-radius:999px;background:#fff;color:#17252A; font:600 .88rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hp-qd button[aria-pressed="true"]{background:#0B4B53;border-color:#0B4B53;color:#fff;} html body.hp .hp-qg{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 .7rem;padding:.55rem 0;border-top:1px solid #EEF1F0;} html body.hp .hp-qg-l{font:700 .92rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#17252A;} html body.hp .hp-qg-s{display:flex;align-items:center;gap:.55rem;} html body.hp .hp-qg-v{min-width:5.2rem;text-align:center;font:600 .9rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#17252A;} html body.hp .hp-qg-b{width:44px;height:44px;border-radius:50%;border:1.5px solid #CBB894;background:#fff;color:#17252A;font:600 1.2rem/1 sans-serif;cursor:pointer;} html body.hp .hp-qg-b:disabled{opacity:.35;cursor:default;} html body.hp .hp-qgo{display:flex;align-items:center;justify-content:center;gap:.5rem;width:calc(100% - 1.4rem);margin:.2rem .7rem 0;min-height:48px;border:0; border-radius:999px;background:var(--cta,#D4432A);color:#fff;font:700 .98rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hp-qgo svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;} html body.hp .hp-qgo:active,html body.hp .hp-qd button:active,html body.hp .hp-qg-b:active{transform:scale(.97);} html body.hp :is(.hp-qd button,.hp-qg-b,.hp-qgo):focus-visible{outline:2.5px solid #066570;outline-offset:2px;} html:is([lang="ar"]) body.hp :is(.hp-qd button,.hp-qg-l,.hp-qg-v,.hp-qgo){font-family:'Tajawal',sans-serif;} /* 8-10 - Pick your corner: See map, white arch cards with a reason + number of homes, teal prices, next card peeks */ html body.hp .hp-ahr{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.6rem;} html body.hp .hp-ahr .hp-ah{margin:0;} html body.hp .hp-amap{flex:none;display:inline-flex;align-items:center;min-height:44px;gap:.25rem;color:#066570;text-decoration:none; font:700 .86rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html[dir="rtl"] body.hp .hp-amap span[aria-hidden]{display:inline-block;transform:scaleX(-1);} html body.hp .hp-a{flex:0 0 42%;align-items:stretch;text-align:start;padding:.35rem .35rem .75rem;background:#fff;border-radius:70px 70px 16px 16px; box-shadow:0 12px 24px -16px rgba(10,40,45,.5),0 0 0 1px rgba(23,37,42,.05);overflow:hidden;} html body.hp .hp-a img{height:8.6rem;border:0;box-shadow:none;border-radius:64px 64px 10px 10px;} html body.hp .hp-a b{margin:.5rem .35rem 0;font-size:1.02rem;} html body.hp .hp-why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:.15rem .35rem 0; font:500 .74rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#4A585B;min-height:1.92rem;} html body.hp .hp-a small{margin:.35rem .35rem 0;color:#066570!important;font-size:.76rem;overflow-wrap:anywhere;text-wrap:pretty;} html:is([lang="ar"]) body.hp .hp-why{font-family:'Tajawal',sans-serif;font-size:.8rem;} html body.hp .hp-ar{padding-bottom:.9rem!important;} /* 14 / 17 / 16 - new sections under the cards */ html body.hp .hp-more{display:block;margin-top:.6rem;} html body.hp .hp-sea{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-radius:20px;color:#fff;text-decoration:none; background:linear-gradient(120deg,#A93516,#C9481F 70%,#B83C18);box-shadow:0 14px 28px -16px rgba(169,53,22,.7);} html body.hp .hp-sea-tx{display:flex;flex-direction:column;gap:.2rem;min-width:0;} html body.hp .hp-sea-tx b{font:700 1.2rem/1.2 'Fraunces',serif;} html body.hp .hp-sea-tx > span{font:500 .84rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html body.hp .hp-sea-sun svg{display:inline-block;width:1.1rem;height:1.1rem;vertical-align:-.12em;fill:none;stroke:#FFD69B;stroke-width:2.2;stroke-linecap:round;} html body.hp .hp-sea-t{flex:none;font:700 2.2rem/1 'Fraunces',serif;} html body.hp .hp-mh2{margin:1.4rem 0 .7rem;font:600 1.25rem/1.15 'Fraunces',serif;color:var(--head,#17252A);} html body.hp .hp-how-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none;} html body.hp .hp-how-l li{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.85rem .45rem .9rem;text-align:center;background:#fff; border-radius:16px;box-shadow:0 0 0 1px rgba(23,37,42,.06);} html body.hp .hp-how-ic{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:#E4F2F3;color:#066570;} html body.hp .hp-how-ic svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} html body.hp .hp-how-l b{font:700 .8rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#17252A;} html body.hp .hp-how-l small{font:500 .72rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#4A585B;} html body.hp .hp-host{display:flex;align-items:center;gap:.9rem;margin-top:.9rem;padding:1rem;background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(23,37,42,.06);} html body.hp .hp-host-av{flex:none;display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:50%;background:linear-gradient(135deg,#0B5A63,#087E8B);} html body.hp .hp-host-av svg{width:2rem;height:2rem;} html body.hp .hp-host-tx{display:flex;flex-direction:column;gap:.25rem;min-width:0;} html body.hp .hp-host-tx b{font:600 1.02rem/1.25 'Fraunces',serif;color:#17252A;} html body.hp .hp-host-tx > span{font:500 .78rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#4A585B;} html body.hp .hp-host-b{align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;background:#E6F4EC; color:#14603A;font:700 .74rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);font-style:normal;} html body.hp .hp-host-b i{width:.45rem;height:.45rem;border-radius:50%;background:#1B7A4B;} html:is([lang="ar"]) body.hp :is(.hp-sea-tx b,.hp-mh2,.hp-host-tx b){font-family:'Tajawal',sans-serif;font-weight:700;} } @media (max-width:700px) and (prefers-reduced-motion:no-preference){ html body.hp .hp-qi:not([hidden]){animation:hpq .5s ease both;} @keyframes hpq{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} } /* ==== /phone homepage, owner mockup ==== */ /* ==== phone homepage: compact search, live temperature, how it works before the FAQ (2026-10-13) ==== */ /* Owner, 2026-10-13: the search card covered almost half the phone screen (~250px). Now ~160px: "Where to?" (48px) / date chips (38px) / guests stepper + Search on one row. Same buttons, same ASTBooker wiring (site.js "phone homepage, owner mockup"). How it works + the host card moved to the top of the FAQ section. */ html body.hp .hp-howw{display:none;} html body.hp .hp-sea-w[hidden]{display:none!important;} @media (max-width:700px){ html body.hp .hero .booker:not(.hp-sopen){padding:.35rem .35rem .6rem!important;border-radius:22px!important;} html body.hp .hero .booker:not(.hp-sopen) > .hp-pill{min-height:0!important;padding:.3rem .75rem .3rem .3rem!important;gap:.65rem!important;} html body.hp .hero .booker:not(.hp-sopen) > .hp-pill .hp-pill-ic{flex:0 0 2.4rem!important;width:2.4rem;height:2.4rem!important; background:#E4F2F3!important;color:#066570!important;} html body.hp .hero .booker:not(.hp-sopen) > .hp-pill .hp-pill-ic svg{width:1.05rem;height:1.05rem;} html body.hp .hero .booker:not(.hp-sopen) > .hp-pill .hp-pill-t{font-size:.95rem;} html body.hp .hero .booker:not(.hp-sopen) > .hp-pill .hp-pill-s{font-size:.76rem;} html body.hp .hero .booker:not(.hp-sopen) > .hp-quick:not(.x):not(.y):not(.z){display:grid!important; grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.5rem;padding:0 .4rem;} html body.hp .hp-quick .hp-qd{grid-column:1 / -1;gap:.35rem;margin:0 -.4rem .5rem;padding:.25rem .4rem .55rem;border-bottom:1px solid #EEF1F0;} html body.hp .hp-quick .hp-qd button{min-height:38px;padding:0 .85rem;font-size:.8rem;} html body.hp .hp-quick .hp-qg{min-width:0;margin:0;padding:0;border-top:0;justify-content:flex-start;} html body.hp .hp-quick .hp-qg-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} html body.hp .hp-quick .hp-qg-s{gap:.3rem;min-width:0;} html body.hp .hp-quick .hp-qg-b{width:38px;height:38px;font-size:1.05rem;} html body.hp .hp-quick .hp-qg-v{min-width:4.9rem;font-size:.82rem;white-space:nowrap;text-align:center;} /* fixed: + stays under the thumb */ @media (max-width:380px){html body.hp .hp-quick .hp-qgo svg{display:none;} html body.hp .hp-quick .hp-qgo{padding:0 .95rem;}} html body.hp .hp-quick .hp-qgo{width:auto;margin:0;min-height:44px;padding:0 1.1rem;font-size:.92rem;border-radius:999px;} html body.hp .hp-quick .hp-qgo svg{width:1rem;height:1rem;} /* the banner's live forecast high */ html body.hp .hp-sea-w{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;text-align:end;} html body.hp .hp-sea-w .hp-sea-t{font:700 2rem/1 'Fraunces',serif;} html body.hp .hp-sea-l{font:600 .68rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);letter-spacing:.02em;opacity:.92;white-space:nowrap;} html body.hp .hp-sea-src{font:500 .58rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);opacity:.75;} /* How it works + host card, at the top of the FAQ section */ html body.hp .hp-howw{display:block;margin:0 0 1.6rem;} html body.hp .hp-howw .hp-mh2{margin-top:0;} } /* ==== /phone homepage: compact search ==== */ /* ==== phone UX pass (2026-10-13): homepage first screen ==== */ /* A1: the search card leads; the postcard is a slim greeting strip above it, the trust chips sit under it. C3 / A6 / C1: "Pick your corner" (half height) and the slim weather banner live in #corner, a phone-only section after "Plan the rest of your trip" (built by _home_mix_2026.py). Computers: #corner hidden, nothing else changes. */ html body.hp #corner{display:none;} @media (max-width:700px){ html body.hp .hero > .wrap{display:flex;flex-direction:column;} html body.hp .hero > .wrap > .hp-pc{order:1;} html body.hp .hero > .wrap > .booker{order:2;} html body.hp .hero > .wrap > .hp-trust{order:3;margin-top:.7rem!important;} html body.hp .hero > .wrap > nav.hq{order:4;} html body.hp .hero{padding-bottom:.9rem!important;min-height:0!important;} /* slim greeting strip */ html body.hp .hp-mh,html body.hp .hp-q{display:none!important;} html body.hp .hp-pc{margin:0 0 .7rem;} html body.hp .hp-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.6rem;margin:0!important; padding:.5rem .55rem .5rem .9rem!important;transform:none!important;border-radius:16px!important;} html body.hp .hp-card::before,html body.hp .hp-card::after{display:none!important;} html body.hp .hp-greet{grid-column:1;font-size:.88rem!important;line-height:1.1!important;} html body.hp .hp-word{grid-column:1;font-size:2.1rem!important;line-height:1!important;margin:.05rem 0 0!important;-webkit-text-stroke:1px #0B4B53;} html body.hp .hp-stamp{position:static!important;grid-column:2;grid-row:1 / span 2;transform:none!important;width:auto!important; display:grid!important;grid-template-columns:auto auto;align-items:center;column-gap:.5rem;padding:.3rem .65rem .3rem .3rem!important; border-radius:12px!important;background:#fff;box-shadow:0 2px 10px -4px rgba(23,37,42,.35);text-decoration:none;} html body.hp .hp-stamp::before,html body.hp .hp-stamp::after{display:none!important;} html body.hp .hp-stamp img{grid-row:1 / span 2;width:3.1rem!important;height:2.5rem!important;border-radius:8px;} html body.hp .hp-stamp b{margin:0!important;text-align:start!important;font-size:.82rem!important;} html body.hp .hp-stamp .hp-deals{font-size:.72rem;white-space:nowrap;} /* #corner: compact arches + slim weather banner */ html body.hp #corner{display:block;padding-block:1.1rem .4rem!important;} html body.hp #corner .hp-arch{display:block;margin:0;} html body.hp #corner .hp-a{flex:0 0 34%!important;} html body.hp #corner .hp-a img{height:4.6rem!important;border-radius:40px 40px 8px 8px!important;} html body.hp #corner .hp-a b{font-size:.92rem!important;} html body.hp #corner .hp-why{display:block!important;-webkit-line-clamp:unset!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem!important;} html body.hp #corner .hp-a small{display:block;font-size:.7rem!important;line-height:1.3!important;} html body.hp #corner .hp-more{margin-top:.9rem!important;} html body.hp .hp-sea:has(.hp-sea-w[hidden]),html body.hp .hp-sea:has(.hp-sea-w[hidden]) + .hp-sea-cr{display:none!important;} html body.hp .hp-sea{padding:.65rem 1rem!important;border-radius:14px!important;min-height:0!important;gap:.6rem!important;} html body.hp .hp-sea-tx > span{display:none!important;} html body.hp .hp-sea-tx b{font-size:1rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body.hp .hp-sea-tx{min-width:0;} html body.hp .hp-sea-w{flex-direction:row!important;align-items:baseline!important;gap:.4rem!important;} html body.hp .hp-sea-w .hp-sea-t{font-size:1.2rem!important;} html body.hp .hp-sea-cr{margin:.3rem .3rem 0;text-align:end;font:500 .62rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);} @media (max-width:380px){html body.hp .hp-sea-l{display:none;}} } /* ==== /phone UX pass: homepage first screen ==== */ /* ==== phone UX pass (2026-10-13): Filters sheet (B1) ==== */ html body.hp .hp-qf{display:none;} html body.hp :is(.hpf,.hpf-back)[hidden]{display:none!important;} @media (max-width:700px){ html body.hp .hp-quick .hp-qd .hp-qf{display:inline-flex;align-items:center;gap:.35rem;flex:none;min-height:38px;padding:0 .8rem;border-radius:999px; border:1.5px solid #0B4B53;background:#fff;color:#0B4B53;font:700 .8rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hp-qf svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;} html body.hp .hp-qf b{display:grid;place-items:center;min-width:1.2rem;height:1.2rem;padding:0 .25rem;border-radius:999px;background:#0B4B53;color:#fff;font-size:.7rem;} html body.hp .hp-qf[aria-pressed="true"]{background:#E4F2F3;} html body.hp .hp-qf:focus-visible{outline:2.5px solid #066570;outline-offset:2px;} html body.hp .hpf-back{position:fixed;inset:0;z-index:1290;background:rgba(12,34,38,.45);} html body.hp .hpf{position:fixed;inset:auto 0 0 0;z-index:1300;display:flex;flex-direction:column;max-height:88vh;max-height:88dvh;background:#fff; border-radius:22px 22px 0 0;box-shadow:0 -14px 40px rgba(15,61,68,.28);animation:pbSheet .28s cubic-bezier(.16,1,.3,1);} html.hpf-open{overflow:hidden;} html.hpf-open .mtab{display:none!important;} html body.hp .hpf-h{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .6rem;border-bottom:1px solid #EEF1F0;} html body.hp .hpf-h b{font:600 1.2rem/1.2 'Fraunces',serif;color:var(--head,#17252A);} html body.hp .hpf-x{width:40px;height:40px;border:0;border-radius:50%;background:#F4EFE9;color:var(--head,#17252A);font:400 1.5rem/1 sans-serif;cursor:pointer;} html body.hp .hpf-b{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:.4rem 1.1rem 1rem;} html body.hp .hpf-g{padding:.85rem 0;border-bottom:1px solid #EEF1F0;} html body.hp .hpf-g:last-child{border-bottom:0;} html body.hp .hpf-l{margin:0 0 .6rem;font:700 .92rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);} html body.hp .hpf-c{display:flex;flex-wrap:wrap;gap:.45rem;} html body.hp .hpf-c button{min-height:40px;padding:0 .95rem;border:1.5px solid #D6DCDB;border-radius:999px;background:#fff;color:var(--head,#17252A); font:600 .84rem/1.15 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hpf-c button[aria-pressed="true"]{background:#0B4B53;border-color:#0B4B53;color:#fff;} html body.hp .hpf-f{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom));border-top:1px solid #EEF1F0;} html body.hp .hpf-clear{min-height:44px;padding:0 .4rem;border:0;background:none;color:var(--head,#17252A);text-decoration:underline;text-underline-offset:3px; font:600 .88rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hpf-clear:disabled{opacity:.4;cursor:default;} html body.hp .hpf-go{min-height:48px;padding:0 1.4rem;border:0;border-radius:999px;background:var(--cta,#D4432A);color:#fff; font:700 .95rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hpf-go:disabled{background:#B9C4C5;cursor:default;} } @media (prefers-reduced-motion:reduce){html body.hp .hpf{animation:none;}} /* ==== /phone UX pass: Filters sheet ==== */ @media (max-width:700px){html body.hp #adventures-scroll.hscroll .scard .sfree{display:flex!important;margin-top:.2rem!important;}} /* B2: activity cards show their 24 h free cancellation on phones */ /* ==== phone UX pass (2026-10-13): no layout shift on the phone search card ==== */ /* The quick-date row is built by site.js once the search script is ready (~2 s on a slow phone); until then the card keeps its final height (167px at every phone width / language, measured), and the chips stay invisible until the Filters chip has joined them, so nothing below moves. */ @media (max-width:700px){ html body.hp .hero .booker:not(.hp-sopen):not(:has(.hp-quick)){min-height:167px;} /* (2026-10-15) the chips no longer wait for the Filters button: it is an overlay now, so it can't push them */ } /* ==== homepage transfers: 4 choices instead of the form (owner, 2026-10-13) ==== */ /* transfer-widget.js renderMenu(): copy on the van photo ("Your ride in Agadir, sorted") + a white card listing From the airport / To the airport / Private trip / Driver by the hour, each opening transport.html on that option. */ html body.hp .trw--menu .trw-p{display:block;max-width:34rem;margin:.55rem 0 0;color:rgba(255,255,255,.9);font:500 1rem/1.5 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html body.hp .trw--menu .trw-card{padding:1.1rem 1rem .9rem;} html body.hp .trw-ml{margin:0 .4rem .45rem;font:700 .8rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft,#5C6B6E);} html body.hp .trw-menu{list-style:none;margin:0;padding:0;} html body.hp .trw-menu li + li{border-top:1px solid #EEF1F0;} html body.hp .trw-opt{display:flex;align-items:center;gap:.9rem;min-height:64px;padding:.6rem .5rem;border-radius:14px;color:var(--head,#17252A);text-decoration:none;transition:background .15s;} html body.hp .trw-opt:hover{background:#F4F7F7;} html body.hp .trw-opt:focus-visible{outline:2.5px solid #066570;outline-offset:2px;} html body.hp .trw-opt:active{transform:scale(.985);} html body.hp .trw-opt-ic{flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:12px;background:#F1F4F4;color:#087E8B;} html body.hp .trw-opt-ic svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} html body.hp .trw-opt-tx{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 auto;} html body.hp .trw-opt-tx b{font:700 1rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html body.hp .trw-opt-tx small{font:500 .82rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);} html body.hp .trw-opt-go{flex:none;color:#9AA7A9;} html body.hp .trw-opt-go svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} html[dir="rtl"] body.hp .trw-opt-go svg{transform:scaleX(-1);} html body.hp .trw-opt:hover .trw-opt-go{color:#087E8B;} html body.hp .trw-pts--card{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.7rem .4rem 0;padding:.7rem 0 0;border-top:1px solid #EEF1F0;list-style:none;} html body.hp .trw-pts--card li{display:flex;align-items:center;gap:.35rem;font:600 .78rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ok,#1B7A4B);} html body.hp .trw-pts--card svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} @media (max-width:700px){ html body.hp .trw--menu .trw-p{font-size:.92rem;} html body.hp .trw-opt{min-height:58px;gap:.75rem;} html body.hp .trw-opt-ic{width:2.6rem;height:2.6rem;} } /* ==== /homepage transfers: 4 choices ==== */ /* ==== phone homepage polish (2026-10-15) ==== */ /* Phones only (<=700px); computers unchanged. Builders: _home_mobile_2026_10.py + _home_mix_2026.py (weather templates, .hp-wel-sub, .hp-wel-l); site.js: weather headline, Filters icon (.hp-qf--ic), "2 guests" default, day-trip trims. */ html body.hp .hp-wel-sub,html body.hp .hp-wel-l,html body.hp .hp-sea-tpl{display:none!important;} @media (max-width:700px){ /* 2. Filters = a round icon at the end of the "Where to?" line; the chip row is for dates only */ html body.hp .hero .booker{position:relative;} html body.hp .hero .booker:not(.hp-sopen) > .hp-pill{padding-inline-end:3.6rem!important;} html body.hp .hero .booker:not(.hp-sopen) > .hp-qf.hp-qf--ic{display:grid!important;place-items:center;position:absolute;z-index:2; top:calc(.35rem + 4px);inset-inline-end:calc(.35rem + .5rem);width:40px;height:40px;padding:0;border-radius:50%; border:1.5px solid #CFD8D7;background:#fff;color:#0B4B53;cursor:pointer;} html body.hp .hero .booker > .hp-qf.hp-qf--ic svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;} html body.hp .hero .booker > .hp-qf.hp-qf--ic[aria-pressed="true"]{border-color:#0B4B53;background:#E4F2F3;} html body.hp .hero .booker > .hp-qf.hp-qf--ic b{position:absolute;top:-4px;inset-inline-end:-4px;display:grid;place-items:center;min-width:1.15rem;height:1.15rem; padding:0 .25rem;border-radius:999px;background:#0B4B53;color:#fff;font:700 .68rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);} html body.hp .hero .booker > .hp-qf.hp-qf--ic:focus-visible{outline:2.5px solid #066570;outline-offset:2px;} html body.hp .hp-quick .hp-qd{gap:.25rem!important;} html body.hp .hp-quick .hp-qd button{padding:0 .56rem!important;font-size:.76rem!important;} @media (max-width:370px){html body.hp .hp-quick .hp-qd button{padding:0 .44rem!important;font-size:.73rem!important;}} /* 3. the guest value never moves the + (fixed width) */ html body.hp .hp-quick .hp-qg-v{min-width:5.4rem;} /* 4. Stays row: 4:3 photo (homepage only) */ html body.hp #stays-scroll.hscroll > .scard .scover{aspect-ratio:4/3!important;height:auto!important;} html body.hp #stays-scroll.hscroll > .scard .scover img{width:100%;height:100%;object-fit:cover;} /* 5. Day trips: site.js trims each description to whole words (2 lines when there is room, else 1, else hidden) */ html body.hp #villages-scroll .scard .sdesc{display:block!important;white-space:normal!important;-webkit-line-clamp:unset!important; line-clamp:none;overflow:visible!important;text-overflow:clip!important;max-height:none!important;} html body.hp #villages-scroll .scard .sdesc[data-fit="0"]{display:none!important;} html body.hp #villages-scroll .scard .sdesc:not([data-fit]){visibility:hidden;} /* 6. Wellness: one-line subtitle + one slim card (photo · name · "21 treatments · From €15" · arrow) */ html body.hp #wellness .head h2{font-size:1.4rem!important;} html body.hp #wellness .sub[data-i18n="wel_sub"]:has(+ .hp-wel-sub){display:none!important;} html body.hp #wellness .hp-wel-sub{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} html body.hp #wellness #wellness-scroll > .scard:only-of-type{display:grid!important;grid-template-columns:84px minmax(0,1fr) 1.4rem;align-items:center; gap:.85rem;width:100%!important;flex:1 1 100%!important;max-width:none!important;min-height:0!important;padding:.6rem .9rem .6rem .6rem!important; border-radius:18px!important;} html body.hp #wellness #wellness-scroll > .scard:only-of-type .scover{width:84px!important;height:84px!important;aspect-ratio:1/1!important;margin:0!important; border-radius:12px!important;overflow:hidden;} html body.hp #wellness #wellness-scroll > .scard:only-of-type .scover img{width:100%;height:100%;object-fit:cover;} html body.hp #wellness #wellness-scroll > .scard:only-of-type .sbody{padding:0!important;display:flex!important;flex-direction:column;gap:.2rem;min-width:0;} html body.hp #wellness #wellness-scroll > .scard:only-of-type :is(.sloc,.sdesc,.wl-pop,.sfree,.sprice,.spay,.sv-heart){display:none!important;} html body.hp #wellness #wellness-scroll > .scard:only-of-type h3{margin:0!important;font-size:1rem!important;line-height:1.25!important; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;} html body.hp #wellness #wellness-scroll > .scard:only-of-type .hp-wel-l{display:block!important;margin:0;font:600 .82rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif); color:var(--ink-soft,#5C6B6E);} html body.hp #wellness #wellness-scroll > .scard:only-of-type::after{content:"";width:1.1rem;height:1.1rem;justify-self:end;background:#087E8B; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;} html[dir="rtl"] body.hp #wellness #wellness-scroll > .scard:only-of-type::after{transform:scaleX(-1);} /* 1. weather banner: the headline carries the number; the separate number is hidden */ html body.hp .hp-sea-w .hp-sea-t{display:none!important;} html body.hp .hp-sea-tx b{display:flex!important;align-items:center;gap:.45rem;white-space:normal!important;} html body.hp .hp-sea-hl{font-size:.98rem;line-height:1.25;} } /* ==== /phone homepage polish ==== */ /* ==== phone "Pick your corner" cards: no empty space (2026-10-17) ==== Owner: too many gaps. The description kept a 2-line reserved height while showing 1 cut line, and at 113px wide the price wrapped onto 2 lines. Wider cards (2.4 visible), description up to 2 lines with no reserved space, price on one line, tighter padding. */ @media (max-width:700px){ html body.hp #corner .hp-a{flex:0 0 47%!important;padding:.3rem .3rem .6rem!important;} html body.hp #corner .hp-a img{height:5.4rem!important;border-radius:50px 50px 10px 10px!important;} html body.hp #corner .hp-a b{margin:.45rem .4rem 0!important;font-size:.98rem!important;} html body.hp #corner .hp-why{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical; white-space:normal!important;min-height:0!important;margin:.15rem .4rem 0!important;font-size:.74rem!important;line-height:1.3!important;} html body.hp #corner .hp-a small{margin:.35rem .4rem 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; overflow-wrap:normal!important;font-size:.72rem!important;letter-spacing:-.005em;} html body.hp #corner .hp-ar{padding-bottom:.6rem!important;} html[lang="es"] body.hp #corner .hp-a small{font-size:.64rem!important;letter-spacing:-.01em;} } @media (max-width:380px){html body.hp #corner .hp-a small{white-space:normal!important;text-wrap:balance;}} /* very narrow phones: wrap rather than cut */ /* ==== /phone "Pick your corner" cards ==== */ /* ==== "Pick your corner": option 1, classic photo card (owner, 2026-10-17) ==== Replaces the arch. Rounded 4:3 photo, text underneath, no white box (like Airbnb / Booking.com). Phones only (the section only shows on phones). Undo: delete this block. */ @media (max-width:700px){ html body.hp #corner .hp-ar{gap:12px!important;padding-bottom:.4rem!important;} html body.hp #corner .hp-a{flex:0 0 44%!important;max-width:200px;padding:0!important;background:none!important;border:0!important; border-radius:0!important;box-shadow:none!important;overflow:visible!important;align-items:stretch!important;text-align:start!important;} html body.hp #corner .hp-a img{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;border:0!important; border-radius:14px!important;box-shadow:0 4px 14px rgba(23,37,42,.10)!important;} html body.hp #corner .hp-a b{margin:.55rem 0 0!important;font:700 .95rem/1.25 'Plus Jakarta Sans',system-ui,sans-serif!important;color:var(--ink,#17252A);} html body.hp #corner .hp-why{margin:.15rem 0 0!important;font-size:.78rem!important;line-height:1.35!important;color:var(--ink-soft,#5C6B6E);} html body.hp #corner .hp-a small{margin:.35rem 0 0!important;font-size:.8rem!important;font-weight:800;color:#087E8B!important;} html body.hp #corner .hp-a:active img{transform:scale(.98);} html[lang="ar"] body.hp #corner .hp-a b{font-family:'Tajawal',sans-serif!important;} } /* ==== /option 1 ==== */ /* ==== compact day trips band on phones (owner, 2026-10-17) ==== The dark band stays (accent + brand teal), but it no longer fills the screen: tiles the size of the "Pick your corner" cards (2.3 visible), photo 3:4 with the name + price on it, one-line subtitle, short "more on request". Computers unchanged. Undo: delete this block. */ .hp-vil-sub,.hp-vil-more{display:none;} @media (max-width:700px){ html body.hp #villages{padding-block:1.6rem 1.4rem!important;} html body.hp #villages .sub[data-i18n="vil_sub"],html body.hp #villages .vmore{display:none!important;} html body.hp #villages .hp-vil-sub{display:block;margin-top:.3rem;font-size:.9rem;line-height:1.4;} html body.hp #villages .hp-vil-more{display:block;margin:.5rem 0 0;font-size:.85rem;font-style:italic;color:rgba(255,255,255,.82);} html body.hp #villages .head-row{margin-bottom:.8rem!important;} html body.hp #villages-scroll{gap:12px!important;} html body.hp #villages-scroll > .scard{flex:0 0 44%!important;width:auto!important;max-width:200px;aspect-ratio:3/4!important;height:auto!important; min-height:0!important;border-radius:14px!important;} html body.hp #villages-scroll > .scard .scover{position:absolute!important;inset:0!important;height:100%!important;aspect-ratio:auto!important;border-radius:14px!important;} html body.hp #villages-scroll > .scard .scover img{width:100%!important;height:100%!important;object-fit:cover;} html body.hp #villages-scroll > .scard .sbody{position:absolute!important;inset:auto 0 0 0!important;padding:2.4rem .7rem .7rem!important; background:linear-gradient(transparent,rgba(8,20,24,.86))!important;} html body.hp #villages-scroll > .scard .sloc{font-size:.64rem!important;padding:.15rem .45rem!important;margin-bottom:.3rem!important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;} html body.hp #villages-scroll > .scard h3{font-size:1rem!important;line-height:1.15!important;margin:0!important;} html body.hp #villages-scroll > .scard .sdesc,html body.hp #villages-scroll > .scard .sfree{display:none!important;} html body.hp #villages-scroll > .scard .sprice{margin-top:.3rem!important;padding:0!important;border:0!important;} html body.hp #villages-scroll > .scard .sprice b{font-size:.95rem!important;} html body.hp #villages-scroll > .scard .sprice b span{font-size:.7rem!important;} html body.hp #villages-scroll > .scard .sv-heart{width:1.8rem;height:1.8rem;top:.4rem;inset-inline-end:.4rem;} } /* ==== /compact day trips ==== */ /* ==== phone UX pass 2 (2026-10-17): homepage phones only. Delete this block to undo. ==== */ @media (max-width:700px){ /* 1. trust chips: the 2 strongest, side by side, never cut */ html body.hp .hp-trust{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:visible;margin:1rem 0 0!important;padding:0!important;gap:.5rem;} html body.hp .hp-trust .ti:nth-child(n+3){display:none!important;} html body.hp .hp-trust .ti{flex:1 1 auto;justify-content:center;min-width:0;padding:.5rem .6rem!important;} html body.hp .hp-trust .ti-t{font-size:.8rem!important;line-height:1.2;white-space:normal!important;overflow-wrap:anywhere;} html body.hp .hp-trust .ti > div{min-width:0;} html body.hp .hp-trust .ti{white-space:normal!important;} /* 3. weather bar: sand + teal, not an alert colour */ html body.hp .hp-sea{background:#FAF4EA!important;color:var(--head,#17252A)!important;border:1px solid #EADBC2;box-shadow:none!important;} html body.hp .hp-sea *{color:inherit;} html body.hp .hp-sea-sun svg{stroke:#087E8B!important;} html body.hp .hp-sea-cr{font-size:.75rem!important;} /* 4. nothing under 12px */ html body.hp #villages-scroll .sloc,html body.hp #villages-scroll .sloc *{font-size:.75rem!important;} html body.hp .scard .sprice b span,html body.hp .scard .sprice small,html body.hp .scard .sprice > span{font-size:.75rem!important;} html body.hp .srate--new{font-size:.75rem!important;} html body.hp .hp-deals{font-size:.75rem!important;} html body.hp .hp-how small{font-size:.78rem!important;} html body.hp .hp-host-tx :is(span,em,i,small){font-size:.8rem!important;} html body.hp #contact .ff label{font-size:.8rem!important;} /* 5. tap areas (layout unchanged: extra padding is cancelled by negative margin) */ html body.hp .see-all{padding-block:.6rem!important;margin-block:-.25rem!important;} html body.hp .kicker--link{padding-block:.55rem!important;margin-block:-.55rem!important;} /* 4b. small text, more specific rules */ html body.hp main :is(#villages-scroll,#adventures-scroll,#stays-scroll,#wellness-scroll) .scard .sprice b span{font-size:.75rem!important;} html body.hp main .scard .srate--new,html body.hp main .scard .srate--new span{font-size:.75rem!important;} html body.hp .lm-pin span{font-size:.75rem!important;} html body.hp :is(.lm-tg,.lm-open){font-size:.78rem!important;} html body.hp .lm-attr{font-size:.7rem!important;} html body.hp .rc-more{padding-block:.6rem!important;margin-block:-.4rem!important;} html body.hp .see-all{padding-block:.75rem!important;margin-block:-.4rem!important;} /* 6. no < > arrows on phones (people swipe) */ html body.hp .cnav,html body.hp .hs-arrow{display:none!important;} /* 7. one Transfers title: the box's "Your ride in Agadir, sorted" */ html body.hp #transport .head :is(h2,.sub){display:none!important;} /* 8. reviews: the one-line total, then the reviews */ html body.hp .rv-sum .rv-score{display:none!important;} html body.hp .rv-sum{margin-bottom:1rem!important;} /* 9. no "List your property" box between the FAQ and the form (it is in the menu and footer) */ html body.hp .hp-listband{display:none!important;} /* 11. one type scale */ html body.hp main section .head :is(h2,h1):not(.htitle){font-size:1.5rem!important;line-height:1.2!important;} html body.hp #wellness .head h2{font-size:1.5rem!important;} html body.hp main section .head .sub{font-size:.875rem!important;line-height:1.45!important;} html body.hp main .scard h3{font-size:.9375rem!important;line-height:1.3!important;} html body.hp #villages-scroll .scard h3{font-size:1rem!important;} html body.hp main .scard .sbody p:not(.sprice){font-size:.78rem!important;} html body.hp main .scard .sprice b{font-size:.9375rem!important;} html body.hp .rquote{font-size:.875rem!important;line-height:1.55!important;} html body.hp .trw-panel h3,html body.hp #trWidget h3{font-size:1.5rem!important;} /* 12. Activities: one-line subtitle */ html body.hp #adventures .head .sub[data-i18n="adv_sub"]{display:none!important;} /* 15. stay price on the photo */ html body.hp #stays-scroll .scover{position:relative;} html body.hp #stays-scroll .sc-pp{position:absolute;inset-inline-start:.6rem;bottom:.6rem;z-index:2;padding:.32rem .65rem;border-radius:999px;background:#fff; box-shadow:0 2px 10px rgba(23,37,42,.18);font:700 .875rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);white-space:nowrap;} html body.hp #stays-scroll .sc-pp b{font:inherit;} html body.hp #stays-scroll .sc-pp span{font-weight:500;font-size:.75rem;color:var(--ink-soft,#5C6B6E);} html body.hp #stays-scroll .scard:has(.sc-pp) .sbody .sprice{display:none!important;} /* 16. shorter enquiry form: name, contact, message */ html body.hp #contact .ff:has(.chks){display:none!important;} } @media (min-width:701px){html body.hp .hp-act-sub,html body.hp .sc-pp{display:none!important;}} /* ==== /phone UX pass 2 ==== */ /* ==== static map labels (2026-10-17): label above the pin, corner chips in one row ==== */ html body.hp .lm-pin--t span{top:auto;bottom:12px;left:0;transform:translateX(-50%);} html body.hp .lm-tgs{position:absolute;z-index:3;left:.6rem;top:.6rem;right:.6rem;display:flex;flex-wrap:wrap;gap:.4rem;pointer-events:none;} html body.hp .lm-tgs .lm-tg{position:static!important;pointer-events:auto;} html[dir="rtl"] body.hp .lm-tgs{direction:ltr;} html[dir="rtl"] body.hp .lm-tgs .lm-tg{direction:rtl;} /* ==== /static map labels ==== */ /* ==== desktop UX pass (2026-10-17): homepage, computers + tablets (>=701px). Delete this block to undo. ==== */ @media (min-width:701px){ /* 3. nothing under 12px */ html body.hp main .scard .sprice :is(small,b span){font-size:.75rem!important;} html body.hp main .scard .srate--new,html body.hp main .scard .srate--new span{font-size:.75rem!important;} html body.hp .wl-h{font-size:.75rem!important;} html body.hp .hs-tag small{font-size:.75rem!important;} html body.hp #contact .ff label{font-size:.8125rem!important;} html body.hp #contact .chk span{font-size:.8125rem!important;} html body.hp .lm-pin span{font-size:.78rem!important;} html body.hp :is(.lm-tg,.lm-open){font-size:.8rem!important;} html body.hp .lm-attr{font-size:.72rem!important;} /* 4. bigger click areas, same look (padding cancelled by negative margin) */ html body.hp .kicker--link{padding-block:.55rem!important;margin-block:-.55rem!important;} html body.hp .rc-more{padding-block:.55rem!important;margin-block:-.4rem!important;} html body.hp .rc-stay a{display:inline-block;padding-block:.35rem;margin-block:-.35rem;} html body.hp .loc-line a{display:inline-block;padding-block:.5rem;margin-block:-.5rem;} /* 5. one hero subtitle (the bold one) */ html body.hp .hero .htext .hsub2{display:none!important;} /* 6. one Transfers title: the box's "Your ride in Agadir, sorted" */ html body.hp #transport .head :is(h2,.sub){display:none!important;} /* 7. reviews: the one-line total + the "copied from Airbnb" note, no score cards */ html body.hp .rv-sum .rv-score{display:none!important;} /* 8. Day trips: the short subtitle (the "+ many more on request" line stays under the tiles) */ html body.hp #villages .head .sub[data-i18n="vil_sub"]{display:none!important;} html body.hp #villages .head .hp-vil-sub{display:block!important;} /* 9 + 10. type scale: section titles 34px max, subtitles 16px, card names 16px, details 13px, prices 16px */ html body.hp main section .head h2{font-size:clamp(1.75rem,2.35vw,2.125rem)!important;line-height:1.18!important;} html body.hp main section .head .sub{font-size:1rem!important;line-height:1.5!important;} html body.hp main .scard h3{font-size:1rem!important;line-height:1.3!important;} html body.hp main .scard .sbody p:not(.sprice){font-size:.8125rem!important;} html body.hp main .scard .sprice b{font-size:1rem!important;} html body.hp #villages-scroll .scard h3{font-size:1.125rem!important;} html body.hp .rquote{font-size:.9375rem!important;} /* 11. activity cards: no empty band above the price */ html body.hp #adventures-scroll .scard .sprice{margin-top:.5rem!important;} /* 12. "Based in Agadir": text starts at the top of the map */ html body.hp .location{align-items:start!important;} html body.hp .location .loc-info{padding-top:.4rem;} /* 13. "Own a home in Agadir?" now sits just above the footer */ html body.hp #contact .hp-listband{margin-top:2.2rem!important;} } /* 1. small laptops + tablets: wider side margins so the round WhatsApp button never sits on cards or buttons */ @media (min-width:701px) and (max-width:1279px){ html body.hp main .wrap{padding-inline:76px!important;} html body.hp .fab{width:50px!important;height:50px!important;right:14px!important;bottom:14px!important;} html body.hp .fab svg{width:24px!important;height:24px!important;} } @media (min-width:701px) and (max-width:900px){ html body.hp main .wrap{padding-inline:66px!important;} html body.hp .fab{width:46px!important;height:46px!important;right:12px!important;bottom:12px!important;} /* 15. tablet: area name back on the 3 hero photos */ html body.hp .hs-loc{display:inline!important;} } /* 14. large monitors: wider page, 5 cards per row */ @media (min-width:1600px){ html body.hp main .wrap{max-width:1320px!important;} html body.hp .wrap > :is(#stays-scroll,#adventures-scroll,#villages-scroll,#discover-scroll).hscroll{--cn:5!important;} } /* ==== /desktop UX pass ==== */ /* ==== desktop: phone ideas (2026-10-18): "Pick your corner" + live weather, "How it works" + host card on computers ==== */ @media (min-width:701px){ /* Pick your corner: own section after "Plan the rest of your trip", 3 columns of compact area cards */ html body.hp #corner{display:block!important;padding-block:clamp(2rem,3.4vw,3rem)!important;} html body.hp #corner > .wrap{display:flex;flex-direction:column;} html body.hp #corner .hp-arch{display:contents!important;} html body.hp #corner .hp-ahr{order:1;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:0 0 .5rem;} html body.hp #corner .hp-ah{margin:0!important;font:600 clamp(1.75rem,2.35vw,2.125rem)/1.18 'Fraunces',Georgia,serif!important;color:var(--head,#17252A);letter-spacing:-.01em;} html[lang="ar"] body.hp #corner .hp-ah{font-family:'Tajawal',sans-serif!important;font-weight:700!important;} html body.hp #corner .hp-amap{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line,#E5E8E6); background:#fff;font:600 .9rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);text-decoration:none;white-space:nowrap;} html body.hp #corner .hp-amap:hover{border-color:var(--clay,#087E8B);color:var(--clay,#087E8B);} /* the live weather line, right under the title (hidden until the forecast arrives, like on phones) */ html body.hp #corner .hp-more{order:2;display:block!important;margin:0 0 1.3rem!important;} html body.hp #corner .hp-sea{display:inline-flex!important;width:auto!important;max-width:100%;padding:.45rem .9rem!important;border-radius:999px!important; background:#FAF4EA!important;border:1px solid #EADBC2!important;color:var(--head,#17252A)!important;box-shadow:none!important;min-height:0!important;gap:.5rem!important;} html body.hp #corner .hp-sea *{color:inherit;} html body.hp #corner .hp-sea-tx > span{display:none!important;} html body.hp #corner .hp-sea-tx b{display:flex!important;align-items:center;gap:.45rem;font:600 .95rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;white-space:nowrap;} html body.hp #corner .hp-sea-sun svg{stroke:#087E8B!important;width:1.05rem!important;height:1.05rem!important;} html body.hp #corner .hp-sea-w{display:none!important;} html body.hp #corner .hp-sea:has(.hp-sea-w[hidden]),html body.hp #corner .hp-sea:has(.hp-sea-w[hidden]) + .hp-sea-cr{display:none!important;} html body.hp #corner .hp-more:has(.hp-sea-w[hidden]){margin:0 0 .8rem!important;} html body.hp #corner .hp-sea-cr{display:inline-block;margin:0 0 0 .7rem!important;font:500 .75rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--ink-soft,#5C6B6E);} html body.hp #corner .hp-sea-tpl{display:none!important;} /* the area cards */ html body.hp #corner .hp-ar{order:3;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;overflow:visible!important;padding:0!important;margin:0!important;} html body.hp #corner .hp-a{display:grid!important;grid-template-columns:7.5rem minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:1rem;align-items:start; max-width:none!important;flex:none!important;padding:.6rem!important;background:#fff!important;border:1px solid var(--line,#E5E8E6)!important;border-radius:16px!important; box-shadow:0 1px 2px rgba(23,37,42,.04)!important;text-align:start!important;transition:box-shadow .2s,transform .2s,border-color .2s;} html body.hp #corner .hp-a:hover{box-shadow:0 10px 26px -14px rgba(23,37,42,.35)!important;border-color:transparent!important;transform:translateY(-2px);} html body.hp #corner .hp-a img{grid-row:1 / span 3;width:7.5rem!important;height:5.6rem!important;aspect-ratio:auto!important;object-fit:cover;border:0!important;border-radius:11px!important;box-shadow:none!important;margin:0!important;} html body.hp #corner .hp-a b{margin:.15rem 0 0!important;font:700 1rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--head,#17252A);} html[lang="ar"] body.hp #corner .hp-a b{font-family:'Tajawal',sans-serif!important;} html body.hp #corner .hp-why{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical;overflow:hidden;white-space:normal!important; margin:.2rem 0 0!important;font:500 .8125rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--ink-soft,#5C6B6E);} html body.hp #corner .hp-a small{display:block;align-self:end;margin:.35rem 0 0!important;font:800 .8125rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:#087E8B!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* How it works + host card: one row above the FAQ */ html body.hp .hp-howw{display:grid!important;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:1.1rem 1.4rem;align-items:stretch; margin:0 0 2.6rem!important;padding:1.4rem;background:#F7F8F6;border:1px solid var(--line,#E5E8E6);border-radius:22px;} html body.hp .hp-how{min-width:0;} html body.hp .hp-howw .hp-mh2{margin:0 0 .9rem!important;font:600 1.5rem/1.2 'Fraunces',Georgia,serif!important;color:var(--head,#17252A);} html[lang="ar"] body.hp .hp-howw .hp-mh2{font-family:'Tajawal',sans-serif!important;font-weight:700!important;} html body.hp .hp-how-l{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem!important;margin:0!important;padding:0!important;list-style:none;} html body.hp .hp-how-l li{display:flex!important;flex-direction:column;align-items:flex-start!important;text-align:start!important;gap:.35rem!important; padding:1rem!important;background:#fff!important;border:1px solid var(--line,#E5E8E6);border-radius:16px!important;counter-increment:how;position:relative;} html body.hp .hp-how-l{counter-reset:how;} html body.hp .hp-how-l li::after{content:counter(how);position:absolute;inset-inline-end:1rem;top:1rem;font:700 .8rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#9AA6A8;} html body.hp .hp-how-ic{display:grid!important;place-items:center;width:2.6rem!important;height:2.6rem!important;border-radius:50%;background:#E4F2F3!important;color:#066570!important;} html body.hp .hp-how-l b{font:700 1rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--head,#17252A);margin-top:.25rem;} html body.hp .hp-how-l small{font:500 .875rem/1.4 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--ink-soft,#5C6B6E);} html body.hp .hp-host{display:flex!important;align-items:center;gap:1rem;margin:0!important;padding:1.3rem!important;background:#fff!important;border:1px solid var(--line,#E5E8E6);border-radius:18px!important;box-shadow:none!important;} html body.hp .hp-host-tx b{font:600 1.15rem/1.25 'Fraunces',Georgia,serif!important;} html[lang="ar"] body.hp .hp-host-tx b{font-family:'Tajawal',sans-serif!important;font-weight:700!important;} html[lang="ar"] body.hp .hp-how-l :is(b,small){font-family:'Tajawal',sans-serif!important;} html body.hp .hp-host-tx > span{font-size:.875rem!important;line-height:1.45!important;} html body.hp .hp-host-b span{font-size:.8125rem!important;} /* host card pieces (the phone rules live in a phone-only block) + steps and host card in the same row */ html body.hp .hp-howw{grid-template-rows:auto 1fr;} html body.hp .hp-how{display:contents!important;} html body.hp .hp-howw .hp-mh2{grid-column:1 / -1;} html body.hp .hp-how-l{grid-column:1;grid-row:2;} html body.hp .hp-host{grid-column:2;grid-row:2;} html body.hp .hp-host-av{flex:none;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:linear-gradient(135deg,#0B5A63,#087E8B);} html body.hp .hp-host-av svg{width:2rem;height:2rem;} html body.hp .hp-host-tx{display:flex!important;flex-direction:column;gap:.35rem;min-width:0;} html body.hp .hp-host-tx > span{font-family:var(--font-ui,'Plus Jakarta Sans',sans-serif);font-weight:500;color:var(--ink-soft,#5C6B6E);} html body.hp .hp-host-b{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;background:#E6F4EC;color:#1B7A4B; font:700 .8125rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);font-style:normal;} html body.hp .hp-host-b i{width:.5rem;height:.5rem;border-radius:50%;background:#1B7A4B;} } @media (min-width:701px) and (max-width:1023px){ html body.hp .hp-how-l,html body.hp .hp-host{grid-column:1 / -1;} html body.hp .hp-host{grid-row:3;} } @media (min-width:701px) and (max-width:1023px){ html body.hp #corner .hp-ar{grid-template-columns:repeat(2,minmax(0,1fr));} html body.hp .hp-howw{grid-template-columns:1fr;} } /* ==== /desktop: phone ideas ==== */ /* ==== airport-transfer photo on phones (2026-10-21): show the airport sign, not the palm trees ==== */ @media (max-width:700px){html body.hp .trw{background-position:20% 22%;}} /* ==== homepage audit 2026-10-21: order, one type scale, palette colours, buttons, tap targets ==== The homepage reads: homes -> areas -> guest reviews -> how booking works -> the rest of the trip (services) -> FAQ -> contact. Type scale on the homepage: 12 / 13 / 14 / 15 / 16 / 18 / 20 / 22 / 24 / 34 px (the odd sizes 12.16 ... 25.6 px left over from earlier passes are snapped to it). "body:is(.hp,#hz#hz#hz)" only raises specificity (no element has id "hz") so this block wins over the older layers. Delete the block to undo. */ /* order: phones follow the page order after Stays (the old rule pulled "Plan the rest of your trip" up to 2nd) */ @media (max-width:700px){ html body.hp main#main > #explore{order:3!important;} html body.hp main#main > #corner{padding-block:1.1rem 1.25rem!important;} html body:is(.hp,#hz#hz#hz) .hp-howsec .hp-howw{margin:0!important;} html body:is(.hp,#hz#hz#hz) .hp-howsec .hp-mh2{margin:0 0 .8rem!important;font-size:1.5rem!important;} } @media (min-width:701px){ html body.hp main#main > #corner{padding-block:clamp(1.5rem,2.4vw,2rem)!important;} html body:is(.hp,#hz#hz#hz) .hp-howsec .hp-howw{margin:0!important;} } /* search card: the palette's ink and soft ink instead of the off-palette greys #222 / #6A6A6A */ html body:is(.hp,#hz#hz#hz) .hero .btab{color:var(--ink-soft,#5C6B6E)!important;} html body:is(.hp,#hz#hz#hz) .hero .btab:hover,html body:is(.hp,#hz#hz#hz) .hero .btab.active{color:var(--head,#17252A)!important;} html body:is(.hp,#hz#hz#hz) .hero .btab.active::after{background:var(--head,#17252A)!important;} html body:is(.hp,#hz#hz#hz) .hero .btab:focus-visible{outline-color:var(--head,#17252A)!important;} html body:is(.hp,#hz#hz#hz) .hero .bfd-l,html body:is(.hp,#hz#hz#hz) .hero .bfd-v{color:var(--head,#17252A)!important;} html body:is(.hp,#hz#hz#hz) .hero .bfd-v.is-empty{color:var(--ink-soft,#5C6B6E)!important;} /* buttons: one secondary style (white pill / white circle with a hairline), WhatsApp always WhatsApp green */ @media (min-width:701px){ html body:is(.hp,#hz#hz#hz) main .see-all{min-height:40px!important;padding:0 1.05rem!important;font-size:.8125rem!important;font-weight:600!important;} } html body:is(.hp,#hz#hz#hz) section:not(.hp-dark) .cnav-b{width:40px;height:40px;background:#fff!important;border:1px solid var(--line,#E5E8E6)!important; color:var(--head,#17252A)!important;box-shadow:0 1px 2px rgba(23,37,42,.06);} html body:is(.hp,#hz#hz#hz) section:not(.hp-dark) .cnav-b:hover:not(:disabled){border-color:var(--head,#17252A)!important;background:#fff!important;} html body:is(.hp,#hz#hz#hz) section:not(.hp-dark) .cnav-b:disabled{opacity:.35;box-shadow:none;} html body:is(.hp,#hz#hz#hz) #faq .faq-help .btn{background:#128C4A!important;border-color:#128C4A!important;color:#fff!important;} html body:is(.hp,#hz#hz#hz) #faq .faq-help .btn:hover{background:#0E733C!important;border-color:#0E733C!important;} html body:is(.hp,#hz#hz#hz) #contact .btn--out{font-weight:600!important;} html body:is(.hp,#hz#hz#hz) #contact .btn--out > span{font-size:inherit!important;font-weight:inherit!important;} /* tap targets: 36-44 px for the map chips, the phone number and the footer legal links */ html body:is(.hp,#hz#hz#hz) #contact :is(.lm-tg,.lm-open){display:inline-flex!important;align-items:center;min-height:36px!important;padding-block:.4rem!important;box-sizing:border-box;} html body:is(.hp,#hz#hz#hz) #contact .loc-line a{display:inline-block;padding-block:.5rem;margin-block:-.5rem;} html body:is(.hp,#hz#hz#hz) footer .flegal a{display:inline-block;padding-block:.45rem;} /* type scale, computers */ @media (min-width:701px){ html body:is(.hp,#hz#hz#hz) .hero .heyebrow{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hsub{font-size:1.25rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hs-tag :is(.hs-loc,.hs-loc > span,b){font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) .hp-benefits .ti-t{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) main#main section .head h2,html body:is(.hp,#hz#hz#hz) #corner .hp-ah,html body:is(.hp,#hz#hz#hz) .trw-h{font-size:clamp(1.75rem,2.6vw,2.125rem)!important;} html body:is(.hp,#hz#hz#hz) :is(#stays,#adventures,#transport) .scard .sbody h3{font-size:1rem!important;} html body:is(.hp,#hz#hz#hz) :is(#stays,#adventures,#transport) .sbody :is(.sspec,.sdesc){font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) :is(#stays,#adventures,#transport) .sprice > b{font-size:1rem!important;} html body:is(.hp,#hz#hz#hz) :is(#stays,#adventures,#villages,#transport) .sprice > b > span[data-i18n]{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #stays .srate small{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) #stays .sa-n{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #villages .scard .sbody h3{font-size:1.125rem!important;} html body:is(.hp,#hz#hz#hz) #villages .vmore{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .scard .sbody h3{font-size:1.375rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .sbody .sdesc{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .sbody .sloc{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .sprice > b{font-size:1.125rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .wl-n{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .wl-d{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .wl-p{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .wl-all,html body:is(.hp,#hz#hz#hz) #wellness .wl-all > span{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #explore .cat-t > b{font-size:1.375rem!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-amap,html body:is(.hp,#hz#hz#hz) #corner .hp-amap > span{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) .hp-host-tx > b{font-size:1.125rem!important;} html body:is(.hp,#hz#hz#hz) #faq .faqi summary > span{font-size:1rem!important;} html body:is(.hp,#hz#hz#hz) #faq .faqi > p{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #faq .faq-help > h3{font-size:1.5rem!important;} html body:is(.hp,#hz#hz#hz) #faq .faq-help > p{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #faq .faq-help > p.faq-help-note{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #contact .wa > h3{font-size:1.5rem!important;} html body:is(.hp,#hz#hz#hz) #contact .wa > p,html body:is(.hp,#hz#hz#hz) #contact .loc-line > span{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #contact .lm-pin > span{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) #contact :is(.lm-tg,.lm-open) > span{font-size:.8125rem!important;} } /* type scale, phones */ @media (max-width:700px){ html body:is(.hp,#hz#hz#hz) .hero .hp-stamp b{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-greet{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-t{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-pill-t{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-pill-s,html body:is(.hp,#hz#hz#hz) .hero .hp-qd button{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-qg-l,html body:is(.hp,#hz#hz#hz) .hero .hp-qgo > span{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-qg-v{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) main .see-all,html body:is(.hp,#hz#hz#hz) main .see-all > span{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) :is(#stays,#adventures,#transport) .scard .sbody h3{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) :is(#stays,#adventures,#transport) .sbody :is(.sspec,.sdesc){font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) :is(#stays,#adventures,#transport) .sprice > b{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #adventures :is(.sfree,.spick) > span{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) #stays .sa-n{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-a > b{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-a > small{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-why{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-amap,html body:is(.hp,#hz#hz#hz) #corner .hp-amap > span{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-sea-hl{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #explore .cat-t > b{font-size:1.125rem!important;} html body:is(.hp,#hz#hz#hz) #villages .scard .sbody h3{font-size:1rem!important;} html body:is(.hp,#hz#hz#hz) #villages .sprice > b{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #villages .hp-vil-more{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #wellness .hp-wel-l{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) .hp-how-l li > b{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) .hp-how-l li > small{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) .hp-host-tx > b{font-size:1rem!important;} html body:is(.hp,#hz#hz#hz) .hp-host-tx > span,html body:is(.hp,#hz#hz#hz) .hp-host-b > span{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #faq .faqi summary > span,html body:is(.hp,#hz#hz#hz) #faq .faqi > p{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #contact .ff > label{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #contact :is(.lm-tg,.lm-open) > span{font-size:.75rem!important;} } /* both: reviews, transfers box, map credit */ html body:is(.hp,#hz#hz#hz) #reviews .rv-total{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #reviews .rv-total > span{font-size:inherit!important;} html body:is(.hp,#hz#hz#hz) #reviews .rv-total > b{font-size:1.125rem!important;} html body:is(.hp,#hz#hz#hz) #reviews .rv-src > span{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #reviews .rc-who{font-size:1rem!important;} html body:is(.hp,#hz#hz#hz) #reviews .rc-av{font-size:1rem!important;} html body:is(.hp,#hz#hz#hz) #reviews .rc-when{font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #reviews .rc-stars,html body:is(.hp,#hz#hz#hz) #reviews .rc-more{font-size:.875rem!important;} html body:is(.hp,#hz#hz#hz) #reviews .rc-stay,html body:is(.hp,#hz#hz#hz) #reviews .rc-stay > :is(a,span){font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #transport .trw-eyebrow{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) #transport :is(.trw-ml,.trw-opt-tx > small,.trw-pts > li){font-size:.8125rem!important;} html body:is(.hp,#hz#hz#hz) #transport .trw-p{font-size:.9375rem!important;} html body:is(.hp,#hz#hz#hz) #contact .lm-attr{font-size:.75rem!important;} html body:is(.hp,#hz#hz#hz) .hp-listband span[data-i18n="hp_list_p"]{font-size:.875rem!important;} @media (min-width:701px){html body:is(.hp,#hz#hz#hz) #corner .hp-sea-hl{font-size:.9375rem!important;}} /* arrows point the reading way in Arabic at every width (the old rule was phones only) */ html[dir="rtl"] body.hp :is(.hp-amap,.hp-deals) > span[aria-hidden]{display:inline-block;transform:scaleX(-1);} /* ==== /homepage audit 2026-10-21 ==== */ /* ==== link to the Agadir guide under "Pick your corner" (2026-10-23) ==== */ html body.hp .hp-aguide{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;margin:.6rem 0 0;color:var(--clay-deep,#066570); font:700 .875rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);text-decoration:none;} html body.hp .hp-aguide:hover{text-decoration:underline;text-underline-offset:3px;} html[dir="rtl"] body.hp .hp-aguide > span[aria-hidden]{display:inline-block;transform:scaleX(-1);} @media (min-width:701px){html body.hp #corner .hp-aguide{order:4;align-self:flex-start;margin-top:.9rem;}} /* ==== hero photo tags never cut off (2026-10-25) ==== */ /* owner (FR screenshot "Baie d'Agadir · 800 MAD / nui"): longer prices (dirhams, pounds) and longer area names were cut with "...". The tag now keeps the place and the price each on one piece and moves the price to a second line when both don't fit. */ html body.hp .hs-tag{flex-wrap:wrap;justify-content:center;column-gap:.25rem;row-gap:.1rem;white-space:normal;overflow:visible;text-overflow:clip; text-align:center;width:max-content;} html body.hp .hs-tag > *{white-space:nowrap;} html body.hp .hs-pr{display:inline-flex;align-items:baseline;gap:.25rem;} /* the two small photos on computers: place on top, price below, no separating dot (same look in every language) */ @media (min-width:901px){ html body:is(.hp,#hz#hz#hz) .hero .hstays :is(.hs-a,.hs-b) .hs-tag{flex-direction:column;align-items:center;row-gap:.12rem;padding:.42rem .8rem;border-radius:16px;} html body:is(.hp,#hz#hz#hz) .hero .hstays :is(.hs-a,.hs-b) .hs-tag .hs-loc{font-size:0!important;} } /* ==== /hero photo tags never cut off ==== */ /* ==== mobile homepage refine (2026-10-27) ==== */ /* Owner brief: less crowded phone homepage, apartments higher, cleaner welcome banner. Phones only (<=700px); computers unchanged. Markup: _home_mix_2026.py (postcard moved from the hero to the top of #corner, rating link in the trust line), _hero_apts_2026.py (hidden collage photos no longer download on phones), site.js (data-more on the date chips). */ html body.hp .hs picture{display:contents;} @media (max-width:700px){ /* header: the compact height at the top too (it already shrinks to this once the page scrolls) */ html body:is(.hp,#hz#hz#hz) header.top .tin{padding-top:10px!important;padding-bottom:10px!important;} html body:is(.hp,#hz#hz#hz) .hero:has(.hslides){padding-top:calc(var(--hdr-h,81px) - 16px + .7rem)!important;padding-bottom:.85rem!important;} html body:is(.hp,#hz#hz#hz) .hero .booker{margin-top:0!important;} html body:is(.hp,#hz#hz#hz) .hp-zl{height:150px;} /* date chips: a soft fade at the far edge while there is more to swipe to (data-more, site.js), snapping per chip */ html body:is(.hp,#hz#hz#hz) .hp-quick .hp-qd{scroll-snap-type:x proximity;scroll-padding-inline:.4rem;} html body:is(.hp,#hz#hz#hz) .hp-quick .hp-qd button{scroll-snap-align:start;} html body:is(.hp,#hz#hz#hz) .hp-quick .hp-qd[data-more]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.6rem),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 2.6rem),transparent);} html[dir="rtl"] body:is(.hp,#hz#hz#hz) .hp-quick .hp-qd[data-more]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 2.6rem),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 2.6rem),transparent);} /* trust line under the search: plain text with icons (no boxes), + the real combined guest rating -> #reviews */ html body:is(.hp,#hz#hz#hz) .hero > .wrap > .hp-trust{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center; gap:.1rem 1rem;margin:.65rem 0 0!important;padding:0!important;overflow:visible!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti{display:none!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust :is(.ti:nth-child(-n+2),.ti-rev){display:inline-flex!important;align-items:center;gap:.3rem; flex:none!important;min-height:30px;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-ic{width:auto!important;height:auto!important;background:none!important;color:#1B7A4B!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-ic svg{width:.95rem!important;height:.95rem!important;stroke-width:2.2;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-t{font:600 .8125rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important; white-space:nowrap!important;color:#17252A!important;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-rev{color:#17252A;text-decoration:none;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-rev .ti-ic{color:#BD8110!important;font-size:.95rem;line-height:1;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-rev .ti-t{text-decoration:underline;text-decoration-color:rgba(23,37,42,.35);text-underline-offset:3px;} html body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-rev:focus-visible{outline:2.5px solid #066570;outline-offset:2px;border-radius:6px!important;} html:is([lang="ar"]) body:is(.hp,#hz#hz#hz) .hero .hp-trust .ti-t{font-family:'Tajawal',sans-serif!important;} /* the Stays row is on the first phone screen: never hidden waiting for the scroll-reveal script (it runs ~1.5 s after load, which held the first apartment photo, the page's largest element, invisible that long) */ html.mo-ready body:is(.hp,#hz#hz#hz) #stays :is(.head,.head-acts,.scard):not(.mo-done){opacity:1!important;transform:none!important;transition:none!important;} /* stays row: one card readable in full, the next one clearly peeking (~55px) */ html body:is(.hp,#hz#hz#hz) #stays-scroll.hscroll > .scard{width:min(calc(100vw - 88px),340px)!important;} /* welcome banner, now after the Stays row: one slim, clean line (no tilt, no dashed stamp, no photo thumbnail) */ html body:is(.hp,#hz#hz#hz) #corner .hp-pc{display:block;margin:0 0 1.4rem;} html body:is(.hp,#hz#hz#hz) #corner .hp-card{display:flex!important;align-items:center;justify-content:space-between;gap:.75rem; margin:0!important;padding:.45rem .5rem .45rem .95rem!important;transform:none!important;border-radius:16px!important; background:#FFFDF8!important;border:1px solid #EADBC2;box-shadow:0 8px 22px -16px rgba(60,40,10,.45)!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-card > .hp-greet,html body:is(.hp,#hz#hz#hz) #corner .hp-card > .hp-word{flex:none;} html body:is(.hp,#hz#hz#hz) #corner .hp-card{flex-wrap:wrap;row-gap:0;} html body:is(.hp,#hz#hz#hz) #corner .hp-greet{width:100%;margin:0 0 -.15rem;font-size:.75rem!important;line-height:1.15!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-word{font-size:1.5rem!important;line-height:1!important;margin:0!important;-webkit-text-stroke:.6px #0B4B53;} html body:is(.hp,#hz#hz#hz) #corner .hp-stamp{margin-inline-start:auto;display:flex!important;flex-direction:column;align-items:flex-end;gap:.1rem; padding:.4rem .8rem!important;border-radius:12px!important;background:#E4F2F3!important;box-shadow:none!important;outline:0!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-stamp img{display:none!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-stamp b{font:700 .9375rem/1.15 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:#17252A!important;} html body:is(.hp,#hz#hz#hz) #corner .hp-stamp .hp-deals{font:700 .8125rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:#066570;} html:is([lang="ar"]) body:is(.hp,#hz#hz#hz) #corner :is(.hp-stamp b,.hp-deals){font-family:'Tajawal',sans-serif!important;} } /* ==== /mobile homepage refine ==== */ /* ==== homepage audit 2026-10-28 ==== */ /* Phones: the Transfers box was the tallest section of the page (760px) although transfers are an add-on to the stays. Its intro paragraph repeated what the 5 rows and the 2 ticks under them already say, and the rows had extra height. */ @media (max-width:700px){ html body:is(.hp,#hz#hz#hz) .trw--menu .trw-p{display:none!important;} html body:is(.hp,#hz#hz#hz) .trw--menu .trw-opt{min-height:52px!important;padding-block:.45rem!important;} } /* ==== /homepage audit 2026-10-28 ==== */ /* ==== stay cards: option A (phones, 2026-10-28), built by _home_staycard_2026.py ==== */ @media (max-width:700px){ html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll{gap:12px!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard{flex:0 0 min(calc((100vw - 44px) / 1.7), 240px)!important;width:min(calc((100vw - 44px) / 1.7), 240px)!important;max-width:240px!important;min-width:0!important; display:flex!important;flex-direction:column!important;border:1px solid #E5E8E6!important;border-radius:18px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 6px 18px -14px rgba(15,31,35,.35)!important;padding:0!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .scover{height:150px!important;aspect-ratio:auto!important;border-radius:0!important;margin:0!important;box-shadow:none!important;flex:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .scover img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sbody{padding:10px 12px 12px!important;display:flex!important;flex-direction:column!important;gap:2px!important;flex:1!important;background:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .srow{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:6px!important;margin:0!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sloc{font-size:12px!important;line-height:1.3!important;color:#5C6B6E!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .srate{font-size:12px!important;flex:none!important;margin:0!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .srate .rw{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .srate small{display:inline!important;color:#5C6B6E;font-size:12px} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard h3{font:700 14.5px/1.25 'Plus Jakarta Sans',sans-serif!important;letter-spacing:-.01em!important;margin:2px 0 0!important; display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:2.5em} html[lang="ar"] body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard h3{font-family:'Tajawal',sans-serif!important;font-size:15px!important;line-height:1.35!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sspec{display:block!important;font-size:12.5px!important;line-height:1.3!important;color:#5C6B6E!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard :is(.sdist,.spay,.sdesc,.p3-cxl,.p3c,.sr-avail){display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sc-pp{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sprice{display:block!important;margin:auto 0 0!important;padding:6px 0 0!important;border:0!important;font-size:13px!important;color:#5C6B6E!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sprice b{font:800 15px 'Plus Jakarta Sans',sans-serif!important;color:#17252A!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sprice b span{font-weight:500!important;font-size:13px!important;color:#5C6B6E!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sfav{top:8px!important;inset-inline-start:8px!important;font-size:10px!important;letter-spacing:-.01em;padding:3px 7px!important;max-width:calc(100% - 50px)} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sfav svg{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sfav span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .sv-heart{top:8px!important;inset-inline-end:8px!important;width:32px!important;height:32px!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .scard .snew{font-size:10.5px!important} html body:is(.hp,#lz#lz#lz#lz#lz) #stays-scroll > .sa-card{flex:0 0 min(calc((100vw - 44px) / 1.7), 240px)!important;width:min(calc((100vw - 44px) / 1.7), 240px)!important;min-width:0!important} } /* ==== /stay cards: option A ==== */ /* ==== guide link before the FAQ (owner 2026-10-28) ==== */ html body:is(.hp,#lz#lz#lz) #faq .hp-aguide--faq{display:flex;justify-content:space-between;gap:12px;width:100%;margin:0 0 18px;padding:14px 16px;border-radius:16px;background:#E4F2F3;text-decoration:none} html body:is(.hp,#lz#lz#lz) #faq .hp-aguide--faq:hover{text-decoration:none;background:#d6ecee} /* ==== /guide link before the FAQ ==== */ /* ==== desktop homepage search: Search label, quick dates, Filters (owner 2026-10-30, items 1 2 3 of the comparison) ==== */ @media (min-width:761px){ /* 1. the search button always says "Search" (it used to be a round icon until a field opened) */ html body:is(.hp,#dz#dz#dz) .hero .chk-btn{width:auto!important;padding:0 22px 0 18px!important;gap:8px!important;} html body:is(.hp,#dz#dz#dz) .hero .chk-btn > span{max-width:8rem!important;opacity:1!important;} } @media (min-width:701px){ /* 2. quick dates under the bar (Stay tab only) + 3. Filters at the end of that row - the phone row's own buttons */ html body:is(.hp,#dz#dz#dz) .hero .booker{display:flex;flex-direction:column;} html body:is(.hp,#dz#dz#dz) .hero .booker > .hp-quick{display:none!important;} html body:is(.hp,#dz#dz#dz) .hero .booker:has(.btab.active[data-tab="stay"]):not(.hp-sopen) > .hp-quick{display:flex!important;order:5;align-items:center;gap:10px; margin:14px 6px 0;padding:0;border:0;background:none;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick :is(.hp-qg,.hp-qgo,[data-q="dates"]){display:none!important;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick .hp-qd{display:flex;gap:10px;margin:0;padding:0;border:0;overflow:visible;-webkit-mask-image:none;mask-image:none;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick .hp-qd button{min-height:38px;height:38px;padding:0 16px!important;border:1px solid #E5E8E6;border-radius:999px;background:#fff;color:#17252A; font:600 13.5px/1 'Plus Jakarta Sans',sans-serif!important;cursor:pointer;transition:border-color .15s,background .15s;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick .hp-qd button:hover{border-color:#9AA8AA;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick .hp-qd button[aria-pressed="true"]{border-color:#087E8B;background:#E4F2F3;color:#066570;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick .hp-qd button:focus-visible{outline:2.5px solid #066570;outline-offset:2px;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick > .hp-qf{display:inline-flex!important;position:static!important;margin-inline-start:auto;align-items:center;gap:7px;height:38px;min-height:38px;width:auto!important; padding:0 16px;border:1px solid #E5E8E6;border-radius:999px;background:#fff;color:#17252A;font:600 13.5px/1 'Plus Jakarta Sans',sans-serif;cursor:pointer;box-shadow:none;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick > .hp-qf:hover{border-color:#9AA8AA;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick > .hp-qf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick > .hp-qf b{display:grid;place-items:center;min-width:1.2rem;height:1.2rem;padding:0 .25rem;border-radius:999px;background:#0B4B53;color:#fff;font-size:.7rem;} html body:is(.hp,#dz#dz#dz) .hero .hp-quick > .hp-qf[aria-pressed="true"]{border-color:#087E8B;background:#E4F2F3;} html[lang="ar"] body.hp .hero .hp-quick :is(.hp-qd button,.hp-qf){font-family:'Tajawal',sans-serif!important;font-size:14px!important;} /* the Filters window: the phone sheet, centred on the screen */ html body.hp .hpf-back{position:fixed;inset:0;z-index:1290;background:rgba(12,34,38,.45);} html body.hp .hpf{position:fixed;inset:auto 0 0 0;z-index:1300;display:flex;flex-direction:column;max-height:88vh;max-height:88dvh;background:#fff; border-radius:22px 22px 0 0;box-shadow:0 -14px 40px rgba(15,61,68,.28);animation:pbSheet .28s cubic-bezier(.16,1,.3,1);} html.hpf-open{overflow:hidden;} html body.hp .hpf-h{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .6rem;border-bottom:1px solid #EEF1F0;} html body.hp .hpf-h b{font:600 1.2rem/1.2 'Fraunces',serif;color:var(--head,#17252A);} html body.hp .hpf-x{width:40px;height:40px;border:0;border-radius:50%;background:#F4EFE9;color:var(--head,#17252A);font:400 1.5rem/1 sans-serif;cursor:pointer;} html body.hp .hpf-b{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:.4rem 1.1rem 1rem;} html body.hp .hpf-g{padding:.85rem 0;border-bottom:1px solid #EEF1F0;} html body.hp .hpf-g:last-child{border-bottom:0;} html body.hp .hpf-l{margin:0 0 .6rem;font:700 .92rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);} html body.hp .hpf-c{display:flex;flex-wrap:wrap;gap:.45rem;} html body.hp .hpf-c button{min-height:40px;padding:0 .95rem;border:1.5px solid #D6DCDB;border-radius:999px;background:#fff;color:var(--head,#17252A); font:600 .84rem/1.15 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hpf-c button[aria-pressed="true"]{background:#0B4B53;border-color:#0B4B53;color:#fff;} html body.hp .hpf-f{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom));border-top:1px solid #EEF1F0;} html body.hp .hpf-clear{min-height:44px;padding:0 .4rem;border:0;background:none;color:var(--head,#17252A);text-decoration:underline;text-underline-offset:3px; font:600 .88rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hpf-clear:disabled{opacity:.4;cursor:default;} html body.hp .hpf-go{min-height:48px;padding:0 1.4rem;border:0;border-radius:999px;background:var(--cta,#D4432A);color:#fff; font:700 .95rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;} html body.hp .hpf-go:disabled{background:#B9C4C5;cursor:default;} html body:is(.hp,#dz#dz#dz) .hpf{inset:50% auto auto 50%!important;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:84vh;border-radius:22px!important; box-shadow:0 30px 80px rgba(15,61,68,.35)!important;animation:none!important;} } html body.hp .hp-qf-t{display:none;} @media (min-width:701px){html body.hp .hero .hp-quick > .hp-qf .hp-qf-t{display:inline;}} /* ==== /desktop homepage search ==== */ /* ==== phone hero trust pills: one line, "Real 5★" (owner 2026-11-01) ==== The three pills (pay on arrival, no fees, real 5-star reviews) always sit on one line: they share the row, the text shrinks a little on narrow phones instead of wrapping to a second row. */ @media (max-width:700px){ html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust{flex-wrap:nowrap!important;justify-content:center!important;gap:5px!important;margin-inline:-6px!important} html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust > :is(.ti:nth-child(1),.ti:nth-child(2),.ti-rev){flex:0 1 auto!important;min-width:0!important;padding:6px 9px!important;gap:4px!important} html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust :is(.ti-s,.ti-rev .ti-t){font-size:clamp(10.5px,3.05vw,12.5px)!important;white-space:nowrap!important} html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust .ti-ic,html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust .ti-ic svg{width:13px!important;height:13px!important} html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust .ti-st{color:#D9A21B;margin-inline-start:1px} html[lang="ar"] body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust :is(.ti-s,.ti-rev .ti-t){font-size:clamp(11px,3.2vw,13px)!important} } @media (max-width:700px){ html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust{margin-inline:-8px!important;overflow:hidden} html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust :is(.ti-s,.ti-rev .ti-t){font-size:var(--tp-fs,12px)!important} html[lang="ar"] body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust :is(.ti-s,.ti-rev .ti-t){font-size:calc(var(--tp-fs,12px) + .5px)!important} html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust.tp-tight > :is(.ti:nth-child(1),.ti:nth-child(2),.ti-rev){padding:6px 7px!important;gap:3px!important} html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust.tp-tight .ti-ic,html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust.tp-tight .ti-ic svg{width:11px!important;height:11px!important} } @media (max-width:700px){ html body:is(.hp,#lz#lz#lz#lz#lz#lz) .hero .hp-trust > :is(.ti:nth-child(1),.ti:nth-child(2),.ti-rev){flex:none!important} } /* ==== typing hint, trust pills, review cards (phones, 2026-10-28), built by _home_live_2026.py ==== */ @media (max-width:700px){ html body:is(.hp,#lz#lz#lz#lz#lz) .hp-pill.lm-typing .hp-pill-s{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hp-pill-ty{display:block;min-height:1.3em;font:inherit;color:#5C6B6E;font-size:12px;line-height:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body:is(.hp,#lz#lz#lz#lz#lz) .hp-pill:not(.lm-typing) .hp-pill-ty{display:none} html body:is(.hp,#lz#lz#lz#lz#lz) .hp-pill-ty::after{content:"|";margin-inline-start:1px;color:#087E8B;animation:lmBl 1s steps(1) infinite} @keyframes lmBl{50%{opacity:0}} /* hero trust line = 3 white pills (owner picked option 1, 2026-10-28) */ html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:6px 5px!important;margin:10px 0 2px!important;padding:0!important;grid-template-columns:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust > .ti{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust > .ti:nth-child(1),html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust > .ti:nth-child(2),html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust > .ti-rev{display:flex!important;align-items:center!important;gap:5px!important;flex:none!important;min-width:0!important; margin:0!important;padding:7px 9px!important;border:0!important;border-radius:999px!important;background:#fff!important;box-shadow:0 2px 8px -4px rgba(15,31,35,.25)!important;text-decoration:none!important;white-space:nowrap!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti > div{display:block!important;min-width:0;overflow:visible!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti-t:not(.ti-rev .ti-t),html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti-d{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti-s{display:block!important;margin:0!important;font:700 12px/1.2 'Plus Jakarta Sans',sans-serif!important;color:#17252A!important;white-space:nowrap} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti-rev .ti-t{font:700 12px/1.2 'Plus Jakarta Sans',sans-serif!important;color:#17252A!important;text-decoration:none!important;border:0!important} html[lang="ar"] body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust :is(.ti-s,.ti-rev .ti-t){font-family:'Tajawal',sans-serif!important;font-size:13px!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti-ic{display:inline-grid!important;place-items:center;width:15px!important;height:15px!important;min-width:0!important;margin:0!important;padding:0!important;background:none!important;color:#087E8B!important;font-size:13px;line-height:1} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti-ic svg{width:15px!important;height:15px!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust .ti-rev .ti-ic{color:#BD8110!important} @media (max-width:370px){ html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust > :is(.ti,.ti-rev){padding:7px 7px!important} html body:is(.hp,#lz#lz#lz#lz#lz) .hero .hp-trust :is(.ti-s,.ti-rev .ti-t){font-size:11.5px!important} } html body:is(.hp,#lz#lz#lz#lz#lz) .ti-s{display:none} /* reviews = option 2 of _reports/review-options (owner 2026-10-28): big score, then swipe cards */ html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rv-sum{display:flex!important;align-items:center;gap:8px;margin:0 0 12px!important;padding:0!important;background:none!important;border:0!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rv-total{display:flex!important;align-items:baseline;gap:8px;margin:0!important;font-size:13.5px!important;color:#5C6B6E!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rv-total b{font:800 24px/1 'Plus Jakarta Sans',sans-serif!important;color:#17252A!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rv-total b span{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rv-total b::after{content:" ★★★★★";font-size:15px;letter-spacing:1px;color:#BD8110;font-weight:400} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rv-total [data-i18n="rev_total"]{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews :is(.rv-score,.rv-src){display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rgrid{display:flex!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto!important;margin:0 -16px!important;padding:2px 16px 10px!important; scroll-snap-type:x mandatory!important;scroll-padding-inline:16px;scrollbar-width:none;grid-template-columns:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rgrid::-webkit-scrollbar{display:none} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rgrid > .rcard{flex:0 0 78%!important;width:78%!important;max-width:320px!important;min-width:0!important;scroll-snap-align:start;display:flex!important;flex-direction:column!important; margin:0!important;padding:16px!important;border:0!important;border-radius:20px!important;background:#fff!important;box-shadow:0 10px 24px -20px rgba(15,31,35,.4)!important;opacity:1!important;transform:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-top{order:3;display:flex!important;align-items:center;gap:10px;margin:12px 0 0!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-stars{order:-1;margin-inline-start:auto;font-size:12px;color:#BD8110} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-av{width:40px!important;height:40px!important;flex:none;border-radius:50%!important;background:linear-gradient(135deg,#12A0AC,#066570)!important;color:#fff!important;display:grid!important;place-items:center;font-weight:800} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-who{font-weight:700;font-size:14px;margin:0} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-when{font-size:12px;color:#5C6B6E;margin:0} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard::before{content:"★★★★★";order:0;color:#BD8110;letter-spacing:1px;font-size:14px} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-top .rc-stars{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rquote{order:1;margin:6px 0 0!important;font-size:14.5px!important;line-height:1.45!important;color:#17252A!important;flex:1} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-foot{order:4;margin:8px 0 0!important;font-size:12px} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-note{display:none!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-more{order:2;align-self:flex-start;margin:6px 0 0!important;padding:4px 0!important;min-height:0!important;font-size:13px!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rc-foot{padding-top:8px!important} html body:is(.hp,#lz#lz#lz#lz#lz) #reviews .rcard .rquote{unicode-bidi:plaintext;text-align:start} } /* ==== /live review card + typing hint ==== */ /* ==== homepage review 2026-11-03 (owner: "apply all 7 changes") ==== Order / titles / "How it works" are in the builders (_home_2026.py ORDER, _home_review_2026_11.py, _home_mobile_2026_10.py). Here: (4) Wellness = one compact strip on computers, (6) Transfers has no separate label + "See all" above its box (the box is the section; title kept for screen readers), and the Day trips label arrow readable on the dark band. "#hy" ids exist nowhere: they only raise specificity. Delete to undo. */ @media (min-width:701px){ html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type{grid-template-columns:minmax(0,30%) minmax(0,1fr)!important;height:auto!important;max-width:none!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .scover{height:100%!important;min-height:0!important;aspect-ratio:auto!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .scover img{height:100%!important;width:100%!important;aspect-ratio:auto!important;object-fit:cover} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .sbody{height:auto!important;padding:20px 26px!important;gap:0!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .sdesc{display:none!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .wl-pop{margin:10px 0 0!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .wl-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .wl-i{min-height:44px!important;padding:.45rem .7rem!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .sfree{margin-top:10px!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #wellness-scroll > .scard:only-of-type .sprice{margin-top:4px!important;padding-top:0!important} } html body:is(.hp,#hy#hy#hy#hy#hy#hy) #transport .head-row .kicker, html body:is(.hp,#hy#hy#hy#hy#hy#hy) #transport .head-row .head-acts{display:none!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #transport .head-row{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} html body:is(.hp,#hy#hy#hy#hy#hy#hy) #villages .kicker .k-go{color:rgba(255,255,255,.8)!important;opacity:1!important}