/* ==========================================================================
   Yator — home page discovery strips

   Layout only. Every colour, radius and font resolves to the theme's own
   variables, so changing `base_color` in the admin restyles all of this too.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Weekend offers
   -------------------------------------------------------------------------- */
.offer--card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.offer--card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.offer--card__thumb {
    height: 190px;
    overflow: hidden;
}

.offer--card__thumb img {
    transition: transform 0.4s ease;
}

.offer--card:hover .offer--card__thumb img {
    transform: scale(1.06);
}

.offer--card__tag {
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    /* --base holds HSL components, not a colour, so it must be wrapped. */
    background: hsl(var(--base));
    font-size: 13px;
}

/* Sits inside the image, not straddling its edge: the thumb clips its overflow
   so the zoom-on-hover stays contained, which would slice this badge in half. */
.offer--card__type {
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer--card__type .fa-star {
    font-size: 10px;
    color: #f5a623;
}

.offer--card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 18px;
}

.offer--card__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 8px;
    background: hsl(var(--base));
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

/* The title must reserve its own space, or a long name pushes the price row
   into the line above it on a narrow card. */
.offer--card__content h6 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    line-height: 1.35;
}

.offer--card__price {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* Price and its struck-through original each get their own line below ~1200px,
   where four cards leave too little width to sit them side by side. */
.offer--card__price h6 del {
    display: block;
    margin-bottom: 2px;
}

@media (min-width: 1400px) {
    .offer--card__price h6 del {
        display: inline;
        margin-bottom: 0;
        margin-right: 4px;
    }
}

/* --------------------------------------------------------------------------
   Trending destinations
   -------------------------------------------------------------------------- */
.trend--tile {
    height: 200px;
}

.trend--tile__wide {
    height: 260px;
}

.trend--tile img {
    transition: transform 0.5s ease;
}

.trend--tile:hover img {
    transform: scale(1.07);
}

.trend--tile__pill {
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 28px);
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Smart deals
   -------------------------------------------------------------------------- */
.smart--panel {
    padding: 48px 28px;
    background: hsl(var(--section-bg));
}

.deal--tile {
    height: 210px;
}

.deal--tile img {
    transition: transform 0.5s ease;
}

.deal--tile:hover img {
    transform: scale(1.07);
}

.deal--tile__pill {
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 28px);
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Crypto
   -------------------------------------------------------------------------- */
.crypto--chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.crypto--panel {
    padding: 36px 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.crypto--card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease;
}

.crypto--card:hover {
    transform: translateY(-4px);
}

.crypto--card img {
    height: 170px;
}

.crypto--card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
}

/* Single-line labels that shorten rather than break mid-word. */
.crypto--card__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crypto--card__content h6.fs--16 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Pins the price to the bottom so cards in a row align. */
.crypto--card__content > h6:last-child {
    margin-top: auto;
    padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .trend--tile,
    .trend--tile__wide,
    .deal--tile {
        height: 170px;
    }

    .smart--panel,
    .crypto--panel {
        padding: 28px 16px;
    }

    .offer--card__thumb {
        height: 170px;
    }
}

/* On one-per-row cards there is width to spare, so let the date and the price
   block each take a full line and put the struck price back inline. */
@media (max-width: 575px) {
    .offer--card__price {
        flex-direction: column;
        align-items: stretch !important;
    }

    .offer--card__price .text-end {
        text-align: left !important;
    }

    .offer--card__price h6 del {
        display: inline;
        margin-bottom: 0;
        margin-right: 4px;
    }
}

/* --------------------------------------------------------------------------
   Hero search card
   Heading and search share one raised panel, so the booking entry point reads
   as a single object rather than two stacked blocks.
   -------------------------------------------------------------------------- */
.hero--card {
    padding: 32px 28px 26px;
    background: linear-gradient(135deg, hsl(var(--base)) 0%, hsl(var(--base) / 0.86) 100%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.hero--card__head {
    margin-bottom: 22px;
}

/* The heading colours are set on the card, not the theme's global title rule. */
.hero--card .title {
    font-size: 40px;
    line-height: 1.2;
}

.hero--card .subtitle {
    opacity: 0.92;
}

/* The search bar keeps the theme's own pill styling, just seated on the card. */
.hero--card .banner--filter__wrap {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Resume booking card
   -------------------------------------------------------------------------- */
.resume--card {
    max-width: 420px;
    margin: -18px auto 0;
    padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 3;
}

.resume--card__thumb {
    width: 74px;
    height: 58px;
}

.resume--card__body {
    min-width: 0;
}

.resume--card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume--card__close {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    color: inherit;
    font-size: 12px;
    cursor: pointer;
}

.resume--card__close:hover {
    background: rgba(0, 0, 0, 0.14);
}

@media (max-width: 767px) {
    .hero--card {
        padding: 24px 16px 20px;
    }

    .hero--card .title {
        font-size: 28px;
    }

    .hero--card .subtitle {
        font-size: 15px !important;
    }

    .resume--card {
        max-width: 100%;
        margin-top: 14px;
    }
}

/* Labelled search fields, divided by hairlines like a booking-site search bar. */
.hero--field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 18px;
    min-width: 0;
}

.banner--filter__inputs .hero--field + .hero--field {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.hero--field__label {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.hero--field__input.form--control {
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
}

.hero--field__input.form--control:focus {
    border: 0;
    box-shadow: none;
}

@media (max-width: 767px) {
    .banner--filter__inputs .hero--field + .hero--field {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* The theme styles banner inputs through a four-class selector with an
   !important padding, so the borderless variant has to match that weight. */
.hero .banner--filter__wrap .banner--filter__inputs .hero--field__input.form--control {
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    height: auto;
    line-height: 24px;
}

.hero .banner--filter__wrap .banner--filter__inputs .hero--field__input.form--control:focus {
    border: 0;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Recently viewed strip (replaces the hero's stock gallery)
   -------------------------------------------------------------------------- */
.recent--strip {
    margin-top: 28px;
}

.recent--card {
    padding: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    color: inherit;
    min-width: 0;
}

.recent--card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.recent--card__thumb {
    width: 66px;
    height: 58px;
}

.recent--card__body {
    min-width: 0;
}

.recent--card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent--strip__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* --------------------------------------------------------------------------
   Horizontal card rails
   On phones these sections scroll sideways and deliberately leave the next
   card part-visible, which is what tells the user there is more to swipe to.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* :not(.d-none) matters — both this and Bootstrap's .d-none carry
       !important, and this file loads later, so it would otherwise force
       hidden tab panes back into view. */
    .scroll--row:not(.d-none) {
        display: flex !important;
    }

    .scroll--row {
        flex-wrap: nowrap !important;
        /* Centring an overflowing flex row clips both ends and makes the first
           card unreachable, so the rail must start-align on mobile. */
        justify-content: flex-start !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        margin-inline: 0;
        padding-bottom: 6px;
    }

    .scroll--row::-webkit-scrollbar {
        display: none;
    }

    .scroll--row > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
        max-width: none;
        padding-inline: 0;
    }

    /* One full card plus half of the next. */
    .scroll--row.rail--peek > * {
        width: 68%;
    }

    /* Two across, with a sliver of the third. */
    .scroll--row.rail--pair > * {
        width: 44%;
    }

    .recent--strip__row {
        grid-template-columns: none;
    }

    .recent--strip__row > * {
        width: 74%;
    }
}

/* --------------------------------------------------------------------------
   Destination search overlay
   Takes over the screen so the picker gets the full viewport on a phone.
   -------------------------------------------------------------------------- */
.search--overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.search--overlay[hidden] {
    display: none;
}

.search--overlay__bar {
    flex-shrink: 0;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.search--overlay__back {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}

.search--overlay__back:hover {
    background: rgba(0, 0, 0, 0.06);
}

.search--overlay__field input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 15px;
    outline: none;
}

.search--overlay__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.5;
}

.search--overlay__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 32px;
    -webkit-overflow-scrolling: touch;
}

.search--overlay__group {
    margin: 18px 0 4px;
    padding: 0 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.45;
}

.search--overlay__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.search--overlay__item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: inherit;
}

.search--overlay__item.is-busy {
    opacity: 0.5;
    pointer-events: none;
}

.search--overlay__pin {
    flex-shrink: 0;
    font-size: 20px;
    color: hsl(var(--base));
}

.search--overlay__pin--alt {
    opacity: 0.75;
}

/* Secondary line, so a landmark shows the town it sits in. */
.search--overlay__sub {
    display: block;
    font-size: 12.5px;
    font-style: normal;
    opacity: 0.5;
}

.search--overlay__empty {
    padding: 40px 20px;
    text-align: center;
    opacity: 0.6;
}

@media (min-width: 768px) {
    /* On desktop it becomes a centred panel rather than a full takeover. */
    .search--overlay {
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        align-items: flex-start;
        justify-content: center;
        padding-top: 6vh;
    }

    .search--overlay__bar,
    .search--overlay__body {
        width: min(560px, 92vw);
        background: #fff;
    }

    .search--overlay__bar {
        border-radius: 16px 16px 0 0;
    }

    .search--overlay__body {
        flex: 0 1 auto;
        max-height: 66vh;
        border-radius: 0 0 16px 16px;
    }
}

/* At two-across the pill cannot fit name and price on one line, so let the
   price drop beneath rather than truncating the thing the guest came for. */
@media (max-width: 767px) {

    /* inline-flex keeps the name and price on one axis and squeezes both, so
       the pill becomes a block and lets them stack as two readable lines. */
    .trend--tile__pill,
    .deal--tile__pill {
        display: block;
        right: 14px;
        max-width: none;
        padding: 7px 12px;
        font-size: 12.5px;
        line-height: 1.35;
        white-space: nowrap;
        text-overflow: clip;
    }

    .trend--tile__pill .text--base,
    .deal--tile__pill .text--base {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Footer
   Link groups read as plain columns on desktop and collapse into an accordion
   on phones, where four stacked lists would otherwise bury the copyright.
   -------------------------------------------------------------------------- */
.footer--group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: default;
}

.footer--group__chevron {
    display: none;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.footer--payments {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer--payments__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer--payments__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background: #fff;
    color: var(--chip-colour, currentColor);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.footer--payments__chip i {
    font-size: 22px;
}

@media (max-width: 767px) {
    .footer--group {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .footer--group__toggle {
        padding: 14px 0;
        cursor: pointer;
    }

    .footer--group__chevron {
        display: inline-block;
    }

    .footer--group__body {
        display: none;
        padding-bottom: 8px;
    }

    .footer--group.is-open .footer--group__body {
        display: block;
    }

    .footer--group.is-open .footer--group__chevron {
        transform: rotate(180deg);
    }
}

/* --------------------------------------------------------------------------
   Floating booking cart
   Sits over the page only once rooms are chosen, so browsing is uninterrupted.
   -------------------------------------------------------------------------- */
.book--cart {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    padding: 14px 0;
}

.book--cart[hidden] {
    display: none;
}

.book--cart__summary {
    min-width: 0;
}

/* Keeps the last section clear of the bar rather than hidden behind it. */
body.has-book-cart {
    padding-bottom: 104px;
}

@media (max-width: 575px) {
    .book--cart__inner {
        gap: 10px !important;
    }

    .book--cart__inner .btn {
        width: 100%;
    }

    body.has-book-cart {
        padding-bottom: 148px;
    }
}

/* --------------------------------------------------------------------------
   Header on small laptops
   The theme only swaps to the hamburger below 992px, so every screen from
   992px up gets the full desktop bar. Between there and about 1200px the
   72px menu gap, the 200px logo and the large pill button together overflow
   the row and the nav becomes unusable. This tightens the bar for that band
   only — nothing changes on a full-size desktop or on the phone layout.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-wrapper .menu--wrap {
        gap: 24px !important;
    }

    .header-wrapper .main-menu {
        gap: 6px;
        /* Wrapping would push the row to two lines and cover the hero. */
        flex-wrap: nowrap;
    }

    .header-wrapper .main-menu a {
        font-size: 15px;
        white-space: nowrap;
    }

    .header-wrapper .logo-wrapper img {
        max-width: 140px;
    }

    .header-wrapper .login-lng {
        gap: 12px !important;
    }

    /* The flag alone still identifies the language; the name is what does
       not fit. */
    .header-wrapper .language-box .dropdown-toggle {
        font-size: 0;
        padding-inline: 8px;
    }

    .header-wrapper .language-box .dropdown-toggle .flag--img {
        margin-right: 0;
    }

    .header-wrapper .loin-btn--wrap .btn {
        padding: 8px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* Below 992px the theme hides .main-menu and shows .ham__menu. Guard against
   the row still overflowing on the way down. */
@media (max-width: 991.98px) {
    .header-wrapper {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .header-wrapper .logo-wrapper img {
        max-width: 130px;
    }
}

/* --------------------------------------------------------------------------
   Card content that never breaks
   Applies to every `.tour-card` in the system — stays and vehicles both use
   it. The rules stop three specific failures: a long title reflowing onto a
   third line and shoving the price out of the card, the price and its button
   splitting onto separate lines, and the vehicle spec chips wrapping one item
   at a time into a ragged column.
   -------------------------------------------------------------------------- */

/* Cards in a row match height, so a two-line title never leaves a short
   neighbour with a floating footer. */
.tour-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tour-card__content {
    /* Without this a flex child refuses to shrink below its content width,
       which is what lets long text push the layout wider than the card. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Location and type sit on one line each and truncate rather than wrap. */
.tour-card__location p {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tour-card__location ul {
    min-width: 0;
}

.tour-card__location li {
    min-width: 0;
    overflow: hidden;
}

/* Titles get exactly two lines everywhere, then ellipsis. Fixed height keeps
   the price rows of neighbouring cards aligned. */
.tour-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 2 lines at the component's own line-height. */
    min-height: 2.6em;
    margin-bottom: 12px;
    word-break: break-word;
}

/* Price and action stay on one line: the price may not wrap, and the button
   may not shrink. */
.tour-card__price-wrap {
    flex-wrap: nowrap !important;
    gap: 10px;
    margin-top: auto;
}

.tour-card__price {
    min-width: 0;
}

.tour-card__price h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tour-card__price h6 span {
    white-space: nowrap;
}

.tour-card__btn-wrap {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Vehicle spec chips: one line, each chip atomic, anything that does not fit
   is clipped rather than wrapped. */
.vehicle-card__specs {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 10px;
}

.vehicle-card__specs > span {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Narrow cards — the mobile rail runs about 250px wide, and the four-column
   desktop grid gets tight too. Shrink the type rather than let it wrap. */
@media (max-width: 1199.98px) {
    .tour-card__price h6 {
        font-size: 18px;
    }

    .tour-card__price h6 span {
        font-size: 14px;
    }

    .vehicle-card__specs > span {
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .tour-card__title {
        font-size: 17px !important;
    }

    .tour-card__price h6 {
        font-size: 17px;
    }
}

/* --------------------------------------------------------------------------
   Hero search card on phones
   The theme pins the field row to `repeat(4, 1fr)`, which squeezes four
   controls into a 390px screen and makes them unusable. Below the tablet
   breakpoint the row becomes two columns: the destination and the guest count
   span the full width, and the two dates sit side by side — the pairing users
   expect, and one row shorter than a plain stack.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hero .banner--filter__wrap {
        flex-direction: column;
        gap: 12px !important;
    }

    .hero .banner--filter__wrap .banner--filter__inputs {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        width: 100%;
    }

    /* Destination and guests get the whole row; the dates share one. */
    .hero .banner--filter__inputs .hero--field:nth-child(1),
    .hero .banner--filter__inputs .hero--field:nth-child(4) {
        grid-column: 1 / -1;
    }

    /* The desktop dividers assume a single horizontal row, so they are
       redrawn here to match the two-column layout. */
    .banner--filter__inputs .hero--field + .hero--field {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .hero .banner--filter__inputs .hero--field:nth-child(3) {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }

    .hero .banner--filter__inputs .hero--field {
        padding: 10px 14px;
        min-width: 0;
    }

    /* A date input will not shrink below its intrinsic width on its own and
       is what pushes the card wider than the screen. */
    .hero .banner--filter__inputs .hero--field__input.form--control {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 14px;
    }

    .hero .banner--filter__inputs input[type="date"] {
        /* Safari/iOS ignores width on date inputs without this. */
        -webkit-appearance: none;
        appearance: none;
    }

    .hero .banner--filter__btn,
    .hero .banner--filter__btn .btn {
        width: 100%;
    }
}