/* ============================================================================
   Cascais Routes — Rentals page (72). Phase 3c-7.
   Approved impeccable mockup: gold-standard hero + editorial intro + bento of
   cover-photo cards + dark Lokki booking band. Light Phase-2 system, brand-yellow
   accent only (no element-color rainbow). Scoped to body.cr-rentals + _element_id.
   Photos stay editable: hero + each card use a NATIVE container background-image.
   Text/affordances ride in html widgets (literal classes) over the photo.
   Hooks: #cr-rentals-hero #cr-rentals-intro #cr-rentals-intro-grid
          #cr-rentals-grid (> .e-con = cards) #cr-rentals-lokki
   ============================================================================ */

body.cr-rentals{
  --yellow:#ffde01; --yellow-deep:#e6c400;
  --cr-ink:#0a0a0a; --cr-soft:#404040;
  --warm:#faf7f2; --warm-2:#f3ece1; --line:#e7e0d4;
  --fh:var(--font-heading); --fb:var(--font-body);
  --maxw:1240px; --pad:clamp(1.25rem,5vw,4rem);
  background-color:var(--warm) !important;
  background-image:none !important;
  overflow-x:hidden;
}

/* neutralise legacy dark section backgrounds / overlays — PAGE CONTENT ONLY,
   keep header/footer chrome + the hero / lokki bands + the card photos (nested). */
body.cr-rentals .elementor:not(.elementor-144):not(.elementor-189) > .e-con.e-parent:not(#cr-rentals-hero):not(#cr-rentals-lokki):not(#cr-rentals-intro){
  background-color:transparent !important; background-image:none !important;
}
body.cr-rentals .elementor:not(.elementor-144):not(.elementor-189) > .e-con.e-parent:not(#cr-rentals-hero):not(#cr-rentals-lokki):not(#cr-rentals-intro) > .elementor-background-overlay{
  opacity:0 !important;
}
body.cr-rentals .elementor-heading-title{ font-family:var(--fh); }

/* ════════════════════════ buttons (literal .btn) ════════════════════════ */
body.cr-rentals .btn{
  font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.95rem; display:inline-flex; align-items:center; gap:.6em; padding:.95em 1.6em;
  border-radius:999px; border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,color .25s,box-shadow .25s;
  white-space:nowrap;
}
body.cr-rentals .btn--primary{ background:var(--yellow); color:var(--cr-ink); }
body.cr-rentals .btn--primary:hover{ background:var(--cr-ink); color:var(--yellow); transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(0,0,0,.4); }
body.cr-rentals .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
body.cr-rentals .btn--ghost:hover{ background:#fff; color:var(--cr-ink); }
body.cr-rentals .btn .arr{ transition:transform .25s; }
body.cr-rentals .btn:hover .arr{ transform:translateX(4px); }

/* ════════════════════════ HERO (#cr-rentals-hero) ════════════════════════
   container background-image = the editable base-camp photo. */
body.cr-rentals #cr-rentals-hero{
  position:relative; overflow:hidden; padding:0 !important;
  min-height:100vh; min-height:100dvh;   /* fill viewport below the 80px sticky header */
  display:flex; align-items:flex-end;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
}
body.cr-rentals #cr-rentals-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,13,.18) 0%,rgba(12,12,13,.40) 46%,rgba(12,12,13,.74) 100%);
}
body.cr-rentals #cr-rentals-hero > .e-con-inner{
  position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(2.5rem,5vw,4.5rem);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  min-height:100vh; min-height:100dvh;
}
body.cr-rentals #cr-rentals-hero .elementor-widget{ width:100%; }
body.cr-rentals #cr-rentals-hero .hero__eyebrow{
  font-family:var(--fh); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-size:.8rem; color:var(--yellow); display:inline-block; margin-bottom:.7rem;
}
body.cr-rentals #cr-rentals-hero .elementor-heading-title{
  color:#fff !important; font-weight:800; letter-spacing:-.02em; line-height:.96;
  text-transform:uppercase; font-size:clamp(2.6rem,6.4vw,5.6rem); max-width:15ch;
  text-align:left !important; text-shadow:0 2px 10px rgba(0,0,0,.7); text-wrap:balance; margin:0;
}
/* Gold Standard: yellow underline */
body.cr-rentals #cr-rentals-hero .elementor-heading-title::after{
  content:""; display:block; width:clamp(60px,9vw,100px); height:5px; border-radius:2px;
  background:var(--yellow); margin-top:clamp(.8rem,1.5vw,1.2rem);
}
body.cr-rentals #cr-rentals-hero .elementor-widget-text-editor,
body.cr-rentals #cr-rentals-hero .elementor-widget-text-editor p{
  color:#fff !important; font-family:var(--fb); text-align:left !important;
  font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.6; max-width:54ch; margin-top:1.1rem;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
body.cr-rentals #cr-rentals-hero .hero__cta{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
body.cr-rentals #cr-rentals-hero .hero__meta{
  display:flex; gap:2rem; margin-top:2.6rem; flex-wrap:wrap;
  font-family:var(--fh); text-transform:uppercase; color:#fff;
}
body.cr-rentals #cr-rentals-hero .hero__meta div{ border-left:3px solid var(--yellow); padding-left:.8rem; }
body.cr-rentals #cr-rentals-hero .hero__meta b{ display:block; font-size:1.5rem; font-weight:800; line-height:1; }
body.cr-rentals #cr-rentals-hero .hero__meta span{ font-size:.75rem; letter-spacing:.1em; opacity:.85; }

/* ════════════════════════ INTRO (#cr-rentals-intro) ════════════════════════ */
body.cr-rentals #cr-rentals-intro{
  background:var(--warm-2) !important; padding-block:clamp(3rem,7vw,5.5rem) !important;
}
body.cr-rentals #cr-rentals-intro > .e-con-inner,
body.cr-rentals #cr-rentals-intro-grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,5vw,4rem); align-items:start;
}
body.cr-rentals #cr-rentals-intro .elementor-heading-title{
  font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:.98;
  font-size:clamp(1.9rem,4vw,3rem); color:var(--cr-ink);
}
body.cr-rentals #cr-rentals-intro .elementor-heading-title::after{
  content:""; display:block; width:64px; height:5px; border-radius:2px;
  background:var(--yellow); margin-top:1.1rem;
}
body.cr-rentals #cr-rentals-intro .elementor-widget-text-editor,
body.cr-rentals #cr-rentals-intro .elementor-widget-text-editor p{
  color:var(--cr-soft); font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:1.75; max-width:62ch;
}
body.cr-rentals #cr-rentals-intro .intro__facts{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:1.4rem; }
body.cr-rentals #cr-rentals-intro .intro__facts div{ font-family:var(--fh); text-transform:uppercase; }
body.cr-rentals #cr-rentals-intro .intro__facts b{ display:block; font-size:1.25rem; font-weight:800; color:var(--cr-ink); }
body.cr-rentals #cr-rentals-intro .intro__facts span{ font-size:.72rem; letter-spacing:.1em; color:var(--cr-soft); }

/* ════════════════════════ RENTALS GRID (#cr-rentals-grid) ════════════════════════
   bento of cover-photo cards. Each card = a container whose background-image is the
   editable photo; a gradient ::before sits over it; an html body rides on top. */
body.cr-rentals #cr-rentals-grid-head{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(3rem,7vw,5.5rem) var(--pad) 0;
}
body.cr-rentals .rentals__head{ max-width:52ch; }
body.cr-rentals .rentals__head h2{
  font-family:var(--fh); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:.98;
  font-size:clamp(2rem,4.5vw,3.4rem); color:var(--cr-ink); margin:0;
}
body.cr-rentals .rentals__head p{ color:var(--cr-soft); font-size:1.1rem; margin:.7rem 0 0; max-width:50ch; }

body.cr-rentals #cr-rentals-grid{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(1.4rem,3vw,2.4rem) var(--pad) clamp(3rem,7vw,5.5rem);
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.9rem,1.6vw,1.3rem);
}

/* the card container */
body.cr-rentals #cr-rentals-grid > .e-con{
  position:relative; min-height:clamp(240px,30vw,340px); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate;
  padding:0 !important; box-shadow:0 12px 30px rgba(10,10,10,.16);
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s cubic-bezier(.2,.7,.2,1);
}
body.cr-rentals #cr-rentals-grid > .e-con::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0) 18%,rgba(10,10,10,.34) 44%,rgba(10,10,10,.66) 68%,rgba(10,10,10,.92) 100%);
}
body.cr-rentals #cr-rentals-grid > .e-con > .elementor-widget-html{ position:relative; z-index:2; width:100%; height:100%; }
body.cr-rentals #cr-rentals-grid > .e-con > .elementor-widget-html > .elementor-widget-container{ height:100%; }
body.cr-rentals #cr-rentals-grid > .e-con:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(10,10,10,.3); }

/* whole-card link (literal <a> fills the card, content gravity-bottom) */
body.cr-rentals .card__link{
  display:flex; flex-direction:column; justify-content:flex-end; gap:.45rem;
  height:100%; padding:1.3rem 1.4rem 1.5rem; color:#fff; text-decoration:none;
}
body.cr-rentals .card__tag{
  font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--yellow); text-shadow:0 1px 6px rgba(0,0,0,.5);
}
body.cr-rentals .card__name{
  font-family:var(--fh); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.02;
  font-size:clamp(1.3rem,1.8vw,1.7rem); margin:0; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55);
}
body.cr-rentals .card__name::after{
  content:""; display:block; width:30px; height:4px; border-radius:2px; background:var(--yellow);
  margin-top:.55rem; transition:width .35s cubic-bezier(.2,.7,.2,1);
}
body.cr-rentals #cr-rentals-grid > .e-con:hover .card__name::after{ width:54px; }
body.cr-rentals .card__desc{
  font-family:var(--fb); color:#fff; font-size:.96rem; line-height:1.5; max-width:46ch; margin:.15rem 0 0;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
body.cr-rentals .card__cta{
  font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:.82rem; color:#fff; display:inline-flex; align-items:center; gap:.45em; margin-top:.5rem; text-decoration:none;
}
body.cr-rentals .card__cta .arr{ color:var(--yellow); transition:transform .25s; }
body.cr-rentals #cr-rentals-grid > .e-con:hover .card__cta .arr{ transform:translateX(4px); }

/* bento spans: 1=ebike (wide flagship), 2=surf, 3/4/5 standard */
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(1){ grid-column:span 4; }
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(2){ grid-column:span 2; }
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(3),
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(4),
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(5){ grid-column:span 2; }

/* ════════════════════════ LOKKI BAND (#cr-rentals-lokki) ════════════════════════ */
/* dark-texture band (Kit body bg) for coherence with the site's dark sections */
body.cr-rentals #cr-rentals-lokki{
  background:linear-gradient(rgba(10,10,10,.5),rgba(10,10,10,.66)),
    url('/wp-content/uploads/2024/01/Background-Site-Cascais-Routes.png') center/cover !important;
}
body.cr-rentals #cr-rentals-lokki > .e-con-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
body.cr-rentals .lokki__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-block:clamp(2.4rem,5vw,3.6rem); }
body.cr-rentals .lokki__in h2{ font-family:var(--fh); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1; font-size:clamp(1.7rem,3.4vw,2.6rem); color:#fff; margin:0; }
body.cr-rentals .lokki__in p{ font-family:var(--fb); margin:.6rem 0 0; color:rgba(255,255,255,.78); max-width:50ch; }
body.cr-rentals .lokki__in .accent{ color:var(--yellow); }

/* ════════════════════════ motion ════════════════════════ */
@keyframes cr-rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }
body.cr-rentals #cr-rentals-hero .elementor-widget{ animation:cr-rise .8s cubic-bezier(.2,.7,.2,1) both; }
body.cr-rentals #cr-rentals-grid > .e-con{ animation:cr-rise .7s cubic-bezier(.2,.7,.2,1) both; }
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(2){ animation-delay:.06s; }
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(3){ animation-delay:.12s; }
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(4){ animation-delay:.18s; }
body.cr-rentals #cr-rentals-grid > .e-con:nth-child(5){ animation-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  body.cr-rentals *, body.cr-rentals *::before, body.cr-rentals *::after{ animation:none !important; transition:none !important; }
}

/* ════════════════════════ responsive ════════════════════════ */
@media (max-width:900px){
  body.cr-rentals #cr-rentals-intro > .e-con-inner,
  body.cr-rentals #cr-rentals-intro-grid{ grid-template-columns:1fr; gap:1.2rem; }
  body.cr-rentals #cr-rentals-grid{ grid-template-columns:repeat(2,1fr); }
  body.cr-rentals #cr-rentals-grid > .e-con{ grid-column:span 1; }
  body.cr-rentals #cr-rentals-grid > .e-con:nth-child(1){ grid-column:span 2; }
}
@media (max-width:560px){
  body.cr-rentals #cr-rentals-grid{ grid-template-columns:1fr; }
  body.cr-rentals #cr-rentals-grid > .e-con{ grid-column:span 1 !important; }
  body.cr-rentals #cr-rentals-hero .hero__meta{ gap:1.2rem; }
}

/* Kill Elementor gap in hero column */
body.cr-rentals #cr-rentals-hero > .e-con-inner { row-gap: 0 !important; }
body.cr-rentals #cr-rentals-hero .elementor-widget { margin-bottom: 0 !important; }

/* ═══════════════════════ BOOKING FORM (inside #cr-rentals-lokki) ═══════════════════ */
/* Scoped: body.cr-rentals #cr-rentals-lokki                                            */

body.cr-rentals #cr-rentals-lokki .rf-wrap{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(2.5rem,5vw,4rem) var(--pad);
}

/* Steps */
body.cr-rentals #cr-rentals-lokki .rf-step{
  padding-block:1.8rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
body.cr-rentals #cr-rentals-lokki .rf-step:last-of-type{ border-bottom:none; }
body.cr-rentals #cr-rentals-lokki .rf-step__label{
  font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  font-size:.78rem; color:rgba(255,255,255,.55); margin:0 0 1rem;
}

/* Category pills */
body.cr-rentals #cr-rentals-lokki .rf-pills{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.2rem;
}
body.cr-rentals #cr-rentals-lokki .rf-pill{
  font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.88rem; padding:.6em 1.3em; border-radius:999px; cursor:pointer;
  border:2px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  transition:background .2s,color .2s,border-color .2s;
}
body.cr-rentals #cr-rentals-lokki .rf-pill:hover{
  border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08);
}
body.cr-rentals #cr-rentals-lokki .rf-pill.active{
  background:var(--yellow); border-color:var(--yellow); color:var(--cr-ink);
}

/* Selects and inputs */
body.cr-rentals #cr-rentals-lokki .rf-select,
body.cr-rentals #cr-rentals-lokki .rf-datepick,
body.cr-rentals #cr-rentals-lokki .rf-timepick,
body.cr-rentals #cr-rentals-lokki .rf-input{
  font-family:var(--fb); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:8px; padding:.75em 1em; width:100%; box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s; outline:none; appearance:none;
}
body.cr-rentals #cr-rentals-lokki .rf-select:focus,
body.cr-rentals #cr-rentals-lokki .rf-datepick:focus,
body.cr-rentals #cr-rentals-lokki .rf-timepick:focus,
body.cr-rentals #cr-rentals-lokki .rf-input:focus{
  border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,222,1,.18);
}
body.cr-rentals #cr-rentals-lokki .rf-select option,
body.cr-rentals #cr-rentals-lokki .rf-timepick option{ background:#1a1a1a; color:#fff; }
body.cr-rentals #cr-rentals-lokki .rf-input::placeholder{ color:rgba(255,255,255,.38); }

/* Date rows */
body.cr-rentals #cr-rentals-lokki .rf-date-row{
  display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem;
}
body.cr-rentals #cr-rentals-lokki .rf-date-lbl{
  font-family:var(--fh); font-weight:700; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.08em; color:rgba(255,255,255,.6); width:3.2rem; flex-shrink:0;
}
body.cr-rentals #cr-rentals-lokki .rf-datepick{ flex:1; max-width:180px; }
body.cr-rentals #cr-rentals-lokki .rf-timepick{ width:100px; flex-shrink:0; }
body.cr-rentals #cr-rentals-lokki .rf-duration{
  font-family:var(--fh); font-weight:700; font-size:.95rem; color:var(--yellow);
  margin:.5rem 0 0; min-height:1.2em;
}

/* Contact fields */
body.cr-rentals #cr-rentals-lokki .rf-fields{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:.8rem;
}

/* Summary */
body.cr-rentals #cr-rentals-lokki .rf-summary__line{
  font-family:var(--fh); font-weight:700; font-size:clamp(1rem,1.6vw,1.2rem);
  color:#fff; margin:0 0 1rem; min-height:1.4em;
}
body.cr-rentals #cr-rentals-lokki .rf-badges{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem;
}
body.cr-rentals #cr-rentals-lokki .rf-badge{
  font-family:var(--fh); font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:.35em .9em;
}
body.cr-rentals #cr-rentals-lokki .rf-error{
  font-family:var(--fb); font-size:.95rem; color:#ff6b6b;
  margin:0 0 1rem; padding:.7em 1em;
  background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.3); border-radius:6px;
}

/* Success state */
body.cr-rentals #cr-rentals-lokki .rf-success{
  text-align:center; padding:clamp(3rem,8vw,6rem) var(--pad);
}
body.cr-rentals #cr-rentals-lokki .rf-success__icon{
  font-size:3.5rem; color:var(--yellow); line-height:1; margin-bottom:1rem;
}
body.cr-rentals #cr-rentals-lokki .rf-success__msg{
  font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(1.1rem,2vw,1.4rem); color:#fff; margin:0;
}

/* Flatpickr dark theme overrides — scoped to body.cr-rentals (not #cr-rentals-lokki)
   because flatpickr appends .flatpickr-calendar directly to <body>. */
body.cr-rentals .flatpickr-calendar{
  background:#1a1a1a !important; border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.6) !important; border-radius:12px !important;
}
body.cr-rentals .flatpickr-months .flatpickr-month,
body.cr-rentals .flatpickr-weekdays,
body.cr-rentals span.flatpickr-weekday{ background:#1a1a1a !important; color:rgba(255,255,255,.7) !important; }
body.cr-rentals .flatpickr-day{ color:rgba(255,255,255,.8) !important; border-radius:6px !important; }
body.cr-rentals .flatpickr-day:hover{ background:rgba(255,222,1,.15) !important; border-color:transparent !important; }
body.cr-rentals .flatpickr-day.selected,
body.cr-rentals .flatpickr-day.selected:hover{
  background:var(--yellow) !important; border-color:var(--yellow) !important; color:var(--cr-ink) !important;
}
body.cr-rentals .flatpickr-day.inRange{
  background:rgba(255,222,1,.18) !important; border-color:transparent !important;
  box-shadow:none !important;
}
body.cr-rentals .flatpickr-day.flatpickr-disabled{ color:rgba(255,255,255,.2) !important; }
body.cr-rentals .numInputWrapper span.arrowUp:after{ border-bottom-color:rgba(255,255,255,.5) !important; }
body.cr-rentals .numInputWrapper span.arrowDown:after{ border-top-color:rgba(255,255,255,.5) !important; }
body.cr-rentals .flatpickr-prev-month svg path,
body.cr-rentals .flatpickr-next-month svg path{ fill:rgba(255,255,255,.7) !important; }
body.cr-rentals .flatpickr-current-month .flatpickr-monthDropdown-months,
body.cr-rentals .flatpickr-current-month input.cur-year{
  color:#fff !important; background:transparent !important;
}

/* Mobile ≤560px */
@media (max-width:560px){
  body.cr-rentals #cr-rentals-lokki .rf-pills{ flex-wrap:wrap; }
  body.cr-rentals #cr-rentals-lokki .rf-date-row{ flex-wrap:wrap; }
  body.cr-rentals #cr-rentals-lokki .rf-datepick{ max-width:100%; }
  body.cr-rentals #cr-rentals-lokki .rf-timepick{ width:100%; }
  body.cr-rentals #cr-rentals-lokki .rf-fields{ grid-template-columns:1fr; }
}

/* Tablet 561px–900px */
@media (min-width:561px) and (max-width:900px){
  body.cr-rentals #cr-rentals-lokki .rf-pills{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.3rem; }
  body.cr-rentals #cr-rentals-lokki .rf-fields{ grid-template-columns:1fr 1fr; }
}