/* THE LISTING CARD — one card for every listing (Chiran, 23 Oct 2026) Values from the Design System sheet "The listing card and the results bar (v2)" (pages/listing-card-v2.html). Markup: inc/rebrand/listing-card.php. The Traveler theme styles bare h3 / a / img / .service-add-wishlist, so every rule here is scoped to .lc2 and the theme's own parts are reset where they would leak in. */ .lc2 { position: relative; width: 300px; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--border, #E5E5E5); border-radius: 16px; box-shadow: var(--sh-1); display: flex; flex-direction: column; text-align: left; font-family: var(--font-label); color: var(--navy); transition: box-shadow .2s var(--ease-smooth), transform .2s var(--ease-smooth); } .lc2 *, .lc2 *::before, .lc2 *::after { box-sizing: border-box; } .lc2:hover { box-shadow: var(--sh-3); transform: translateY(-2px); } .lc2 a { text-decoration: none !important; } .lc2 svg { display: block; flex: 0 0 auto; } .lc2 .svgico { margin: 0 !important; vertical-align: 0 !important; } .lc2__media { position: relative; } .lc2 .lc2__img { display: block; aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; overflow: hidden; background: var(--surface-2, #F5F5F5); } .lc2 .lc2__img img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; border-radius: 0 !important; transition: transform .5s var(--ease-smooth); } .lc2:hover .lc2__img img { transform: scale(1.04); } .lc2__ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-tertiary); font-size: 12px; background: linear-gradient(160deg, var(--primary-ultra-light), var(--surface-2)); } .lc2__ph .svgico { color: var(--primary); opacity: .55; width: 30px !important; height: 30px !important; } .lc2__chip { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; background: rgba(255,255,255,.94); color: var(--navy); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; box-shadow: var(--sh-1); } .lc2__chip .svgico { color: var(--primary); width: 14px !important; height: 14px !important; } /* the heart: the theme's wishlist element, re-dressed */ .lc2 .lc2__heartlink { position: absolute; top: 10px; right: 10px; z-index: 3; } .lc2 .service-add-wishlist.lc2__heart { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; padding: 0; margin: 0; background: rgba(255,255,255,.94) !important; color: var(--navy); display: grid; place-items: center; box-shadow: var(--sh-1); cursor: pointer; border: 0; } .lc2 .lc2__heartlink .service-add-wishlist.lc2__heart { position: static; } .lc2 .service-add-wishlist.lc2__heart::before { content: ''; position: absolute; inset: -4px; } .lc2 .service-add-wishlist.lc2__heart .svgico { width: 18px !important; height: 18px !important; stroke: currentColor; } .lc2 .service-add-wishlist.lc2__heart.added { color: var(--primary, #7700FF); } /* saved = violet, like Save on the listing page; red is only for errors (25 Oct 2026) */ .lc2 .service-add-wishlist.lc2__heart.added svg { fill: currentColor; } .lc2 .service-add-wishlist.lc2__heart .lds-dual-ring { display: none; } .lc2 .service-add-wishlist.lc2__heart.loading { opacity: .6; } /* the round picture */ .lc2 .lc2__av { position: absolute; right: 16px; bottom: -22px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ring, var(--border)), var(--sh-2); background: var(--surface-2); display: block; } .lc2 .lc2__av img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 50%; padding: 2px; } .lc2 .lc2__av--in { display: grid; place-items: center; background: var(--tint, #F3ECFF); color: var(--ink, var(--primary)); font-size: 13px; font-weight: 700; letter-spacing: .02em; } .lc2 .lc2__av--ss { background: var(--primary); display: grid; place-items: center; box-shadow: var(--sh-2); } .lc2 .lc2__av--ss img { width: 31px !important; height: auto !important; object-fit: contain; padding: 0; border-radius: 0; } /* the type tab */ .lc2__tab { position: absolute; left: 16px; top: 100%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; padding: 6px 12px 7px 10px; border-radius: 0 0 10px 10px; pointer-events: none; } .lc2__tab span { color: #fff; } .lc2__tab .svgico { width: 14px !important; height: 14px !important; stroke: #fff; color: #fff; } .lc2__body { padding: 38px 18px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; } .lc2 p.lc2__where { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 12.5px !important; font-family: var(--font-label); line-height: 1.4; color: var(--text-secondary); white-space: nowrap; overflow: hidden; } .lc2__where .svgico { color: var(--primary); width: 14px !important; height: 14px !important; } .lc2__where > span { overflow: hidden; text-overflow: ellipsis; } .lc2__more { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--primary-light); color: var(--primary-dark); font-size: 11px; font-weight: 700; vertical-align: 1px; } .lc2 .lc2__title { margin: 0 !important; padding: 0; font-family: var(--font-heading); font-size: 17px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.01em; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; text-transform: none; } .lc2 .lc2__title a { color: var(--navy) !important; } .lc2 .lc2__title a:hover { color: var(--primary) !important; } .lc2__facts { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px 14px; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); } .lc2__f { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .lc2__f .svgico { color: var(--text-tertiary); width: 14px !important; height: 14px !important; } .lc2__f b { color: var(--navy); font-weight: 600; } .lc2__f--rate .svgico { color: var(--warning, #FFB700); fill: currentColor; } .lc2__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-soft, #E8E8E6); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lc2__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; } .lc2__price small { font-size: 12px; color: var(--text-tertiary); } .lc2__price b { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; } .lc2__price em { font-style: normal; font-size: 12.5px; color: var(--text-secondary); } .lc2__price--w { align-items: center; } .lc2__price--w .svgico { color: var(--success-dark, #228A00); width: 16px !important; height: 16px !important; } .lc2__price--w b { font-size: 14.5px; font-weight: 600; letter-spacing: 0; white-space: normal; } .lc2__price--trip { flex-direction: column; gap: 1px; align-items: flex-start; } .lc2__price--trip b { font-size: 14px; font-weight: 600; letter-spacing: 0; } .lc2__price--trip em { font-size: 12px; } .lc2 .lc2__btn, .lc2 .lc2__price, .lc2 .lc2__facts, .lc2 .lc2__chip, .lc2 .lc2__tab { font-family: var(--font-label) !important; } .lc2 .lc2__btn { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--primary); color: #fff !important; font-size: 13px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; transition: background-color .15s; } .lc2 .lc2__btn:hover { background: var(--primary-dark); } .lc2 .lc2__go { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-ultra-light); color: var(--primary); border: 1px solid var(--info-border, #DCC4FF); flex: 0 0 auto; transition: background-color .15s, color .15s; } .lc2 .lc2__go .svgico { width: 16px !important; height: 16px !important; stroke: currentColor; } .lc2:hover .lc2__go { background: var(--primary); color: #fff; border-color: var(--primary); } /* list view: the same card, photo on the left */ .lc2.lc2--list { flex-direction: row; width: 100%; } .lc2--list .lc2__media { flex: 0 0 300px; } .lc2.lc2--list .lc2__img { height: 100%; aspect-ratio: auto; min-height: 190px; border-radius: 16px 0 0 16px; } .lc2--list .lc2__tab { top: auto; bottom: 0; border-radius: 10px 10px 0 0; } .lc2.lc2--list .lc2__av { bottom: 12px; right: 12px; } .lc2--list .lc2__body { padding: 18px 20px 16px 22px; } .lc2.lc2--list .lc2__title { min-height: 0; } .lc2 p.lc2__ex { margin: 0 !important; font-size: 13.5px !important; line-height: 1.55; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 640px) { .lc2.lc2--list { flex-direction: column; } .lc2--list .lc2__media { flex: 0 0 auto; } .lc2.lc2--list .lc2__img { aspect-ratio: 16 / 9; min-height: 0; border-radius: 16px 16px 0 0; } .lc2--list .lc2__tab { top: 100%; bottom: auto; border-radius: 0 0 10px 10px; } .lc2.lc2--list .lc2__av { bottom: -22px; right: 16px; } .lc2--list .lc2__body { padding: 38px 18px 16px; } } /* ═══ THE RESULTS BAR + 4 CARDS IN A ROW (Chiran, 23 Oct 2026; design section 6) ═══════════════ body.rb-on is set by the server on Stays, Trips and Experiences, so the old filter column and toolbar are gone from the first paint; assets/js/sarisara-results-bar.js builds the bar and moves the theme's own filter controls into its panels. */ body.rb-on .st-results > .row > .sidebar-filter, body.rb-on #st-content-wrapper .toolbar, body.rb-on #st-content-wrapper .show-filter-mobile, body.rb-on #st-content-wrapper .toolbar-action-mobile { display: none !important; } body.rb-on .st-results > .row > [class*="col-lg-9"], body.rb-on .st-results > .row > [class*="col-md-9"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } body.rb-on #st-content-wrapper > .container { max-width: 1312px; padding-left: 0; padding-right: 0; } @media (max-width: 1375px) { body.rb-on #st-content-wrapper > .container { max-width: none; padding-left: 32px; padding-right: 32px; } } @media (max-width: 900px) { body.rb-on #st-content-wrapper > .container { padding-left: 24px; padding-right: 24px; } } body.rb-on .modern-search-result .service-list-wrapper { display: grid !important; grid-template-columns: repeat(auto-fill, 300px); justify-content: space-between; gap: 28px 24px; margin: 0 !important; } body.rb-on .modern-search-result .service-list-wrapper:has(.lc2--list) { grid-template-columns: 1fr; } body.rb-on .modern-search-result .service-list-wrapper > .item-service { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; } body.rb-on .modern-search-result .service-list-wrapper > .item-service > .lc2--list { width: 100%; } @media (max-width: 640px) { body.rb-on .modern-search-result .service-list-wrapper { grid-template-columns: 1fr; } body.rb-on .lc2 { width: 100%; } } .rb { position: relative; z-index: 20; margin: 0 0 28px; font-family: var(--font-label); color: var(--navy); } .rb button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; height: auto; width: auto; line-height: inherit; border-radius: 0; } /* the theme paints every button gold and in capitals: undo it for the bar (two classes + !important, rule 5.5) */ body .rb button.rb__pill, body .rb button.rb__sort, body .rb .rb__view button, body .rb button.rb__x, body .rb .rb__chip button, body .rb button.rb__clear, body .rb button.rbp__reset { text-transform: none !important; letter-spacing: normal !important; font-family: var(--font-label) !important; background-color: transparent; } body .rb button.rb__pill { background: #fff !important; color: var(--navy) !important; font-size: 13.5px !important; font-weight: 500 !important; } body .rb button.rb__pill.on, body .rb .rb__g.is-on > button.rb__pill { background: var(--primary-ultra-light) !important; color: var(--primary-dark) !important; } body .rb button.rb__sort { background: transparent !important; color: var(--text-secondary) !important; font-size: 13.5px !important; font-weight: 400 !important; } body .rb button.rb__sort:hover { background: var(--surface-2) !important; } body .rb .rb__view button { background: transparent !important; color: var(--text-tertiary) !important; } body .rb .rb__view button.on { background: #fff !important; color: var(--primary) !important; } body .rb button.rbp__go { background: var(--primary) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; } body .rb button.rbp__go:hover { background: var(--primary-dark) !important; } body .rb .rb__chip button { background: transparent !important; color: var(--primary-dark) !important; } .rb .svgico { display: block; flex: 0 0 auto; margin: 0 !important; } .rb__row { display: flex; align-items: center; gap: 14px; padding: 0 0 16px; border-bottom: 1px solid var(--border); } .rb__t { display: flex; align-items: baseline; gap: 10px; margin-right: 6px; white-space: nowrap; } .rb .rb__t h2 { margin: 0; font-family: var(--font-heading); font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); line-height: 1.2; text-transform: none; } .rb__count { font-size: 14px; color: var(--text-secondary); } .rb__pills { display: flex; gap: 8px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; } .rb__g { position: relative; } .rb .rb__pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 13px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 13.5px; font-weight: 500; color: var(--navy); white-space: nowrap; } .rb .rb__pill .svgico { width: 15px !important; height: 15px !important; color: var(--text-tertiary); } .rb .rb__pill:hover { border-color: #C9A5FF; } .rb .rb__pill.on, .rb .rb__g.is-on > .rb__pill { border-color: var(--primary); background: var(--primary-ultra-light); color: var(--primary-dark); } .rb .rb__pill.on .svgico { color: var(--primary); } .rb__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; } .rb__n[hidden] { display: none; } .rb__end { display: flex; align-items: center; gap: 10px; margin-left: auto; } .rb .rb__sort { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; color: var(--text-secondary); white-space: nowrap; } .rb .rb__sort:hover { background: var(--surface-2); } .rb__sort b { color: var(--navy); font-weight: 600; } .rb .rb__sort .svgico { width: 15px !important; height: 15px !important; color: var(--text-tertiary); } .rb__view { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); } .rb .rb__view button { width: 36px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--text-tertiary); } .rb .rb__view button.on { background: #fff; color: var(--primary); box-shadow: var(--sh-1); } .rb .rb__view .svgico { width: 16px !important; height: 16px !important; } .rb__phone { display: none; } .rb__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0 0; } .rb__chips[hidden] { display: none; } .rb__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--primary-light); color: var(--primary-dark); font-size: 12.5px; font-weight: 600; } .rb .rb__chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-dark); } .rb .rb__chip button:hover { background: rgba(119,0,255,.12); } .rb .rb__chip .svgico { width: 12px !important; height: 12px !important; } .rb .rb__clear { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; } /* the panels */ .rb .rbp { position: absolute; z-index: 40; top: calc(100% + 10px); left: 0; width: 300px; background: #fff; border: 1px solid #E4E4EC; border-radius: 12px; box-shadow: 0 12px 32px rgba(9,9,32,.16); padding: 14px 16px; color: var(--navy); text-align: left; } .rb .rbp[hidden] { display: none; } .rb .rbp.is-right, .rb .rb__g--sort .rbp { left: auto; right: 0; } .rb .rbp--sort { width: 240px; padding: 10px; } .rbp__h { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); } .rbp__in { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin: 0 0 8px; border: 1px solid #7700FF; box-shadow: 0 0 0 3px rgba(119,0,255,.10); border-radius: 8px; color: var(--text-tertiary); } .rbp__in .svgico { width: 15px !important; height: 15px !important; } .rb .rbp__in input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: none !important; padding: 0 !important; height: 36px; font: 400 14px var(--font-label); color: var(--navy); } .rbp__body { max-height: 340px; overflow-y: auto; } /* the theme's own checkboxes, re-dressed */ .rb .rbp__body ul { list-style: none; margin: 0; padding: 0; } .rb .rbp__body li { margin: 0; padding: 0; border-bottom: 1px solid #F2F2F5; } .rb .rbp__body li:last-child { border-bottom: 0; } .rb .rbp__body label { position: relative; display: flex !important; align-items: center; gap: 4px; padding: 9px 0 9px 30px !important; margin: 0 !important; font-size: 14px !important; font-weight: 400; color: var(--navy) !important; cursor: pointer; line-height: 1.4; } .rb .rbp__body label input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rb .rbp__body label .checkmark { position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%); width: 18px !important; height: 18px !important; border-radius: 5px !important; border: 1.5px solid #CFCFDB !important; background: #fff !important; margin: 0 !important; } .rb .rbp__body label input:checked ~ .checkmark { background: var(--primary) !important; border-color: var(--primary) !important; } .rb .rbp__body label .checkmark::after { border-color: #fff !important; } .rb .rbp__body label input:checked ~ .checkmark::after { display: block; } .rb .rbp__body label:has(input:checked) { font-weight: 600; } .rb .rbp__body .fa-star { color: var(--warning); font-size: 13px; } .rb .rbp__body .item-title, .rb .rbp__body .btn-more-item { display: none; } .rb .rbp__body li.rb-x, .rb .rbp__body .item-content ul li.rb-x, .rb .rbp__body .item-content ul li.hidden.rb-x { display: none !important; } .rb .rbp__body .item-content ul li.hidden { display: list-item !important; } /* the price slider (the theme's ionRangeSlider) */ .rb .rbp__body .range-slider { padding: 4px 4px 0; } .rb .rbp__body .irs--flat .irs-bar { background: var(--primary) !important; } .rb .rbp__body .irs--flat .irs-handle > i:first-child { background: var(--primary) !important; } .rb .rbp__body .irs--flat .irs-from, .rb .rbp__body .irs--flat .irs-to, .rb .rbp__body .irs--flat .irs-single { background: var(--primary) !important; } .rb .rbp__body .irs--flat .irs-from::before, .rb .rbp__body .irs--flat .irs-to::before { border-top-color: var(--primary) !important; } .rb .rbp__body .min-max-value { display: flex; gap: 10px; margin: 12px 0 0; } .rb .rbp__body .min-max-value .item-value { flex: 1 1 0; border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; font-size: 11px; color: var(--text-tertiary); } .rb .rbp__body .min-max-value .item-value span { display: block; font-size: 14px; font-weight: 600; color: var(--navy); } .rb .rbp__body .price-action { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFEFF4; } .rb .rbp__body .clear-price { font-size: 13px; color: var(--text-secondary); text-decoration: underline; } .rb .rbp__body .btn-apply-price-range { height: 38px; padding: 0 18px !important; border-radius: 999px !important; background: var(--primary) !important; color: #fff !important; font-size: 13px !important; font-weight: 600; text-transform: none !important; text-decoration: none !important; border: 0 !important; letter-spacing: 0; } .rbp__f { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFEFF4; } .rb .rbp__reset { font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } .rb .rbp__go { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; } .rb .rbp__go:hover { background: var(--primary-dark); } .rbp__sort { list-style: none; margin: 0; padding: 0; } .rbp__sort li { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; } .rbp__sort li:hover { background: var(--surface-2); } .rbp__sort li .svgico { display: none; width: 14px !important; height: 14px !important; } .rbp__sort li.on { background: #F5EEFF; color: #5C00CC; font-weight: 600; } .rbp__sort li.on .svgico { display: block; } /* phone: one Filters button, every filter in a full-screen sheet */ .rb.is-sheet { z-index: 100003; } .rb .rbp__body label.rb-words > :not(input):not(.checkmark) { display: none !important; } .rb__sheet { position: fixed; inset: 0; z-index: 100002; background: #fff; display: flex; flex-direction: column; } .rb__sheet[hidden] { display: none; } .rb__sh { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); } .rb__sh b { font-family: var(--font-heading); font-size: 20px; } .rb .rb__x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; } body .rb button.rb__x { background: #fff !important; color: var(--navy) !important; } .rb .rb__x .svgico { width: 18px !important; height: 18px !important; stroke: currentColor; } .rb__sb { flex: 1 1 auto; overflow-y: auto; padding: 6px 22px; } .rb .rb__sec { padding: 14px 0; border-bottom: 1px solid #F2F2F5; max-height: none; overflow: visible; } .rb .rb__sec .item-content { display: block !important; } .rb__sf { display: flex; gap: 12px; align-items: center; padding: 14px 22px 20px; border-top: 1px solid var(--border); } .rb .rb__sf .rbp__go { flex: 1 1 auto; height: 46px; font-size: 14px; } html.rb-lock, html.rb-lock body { overflow: hidden !important; } @media (max-width: 899px) { body.rb-on .ss-hero--search { margin-bottom: 64px; } } /* clear of the "Where to?" pill */ @media (max-width: 991px) { body.rb-on .rb button.rb__sort { border: 1px solid var(--border) !important; background: #fff !important; } .rb__row { flex-wrap: wrap; row-gap: 12px; } .rb__t { flex: 0 0 100%; } .rb__pills { display: none; } .rb__phone { display: flex; flex: 1 1 auto; } .rb .rb__phone .rb__pill { flex: 1 1 auto; justify-content: center; } .rb__end { margin-left: 0; } .rb .rb__map { display: none; } .rb .rb__sort > span { display: none; } .rb .rb__sort { border: 1px solid var(--border); background: #fff; } } /* Town pages, nearby blocks, the homepage (Chiran, 23 Oct 2026): the same card, 300px, as many per row as fit; gaps grow, cards never stretch. */ .sft-grid:has(> .lc2) { display: grid !important; grid-template-columns: repeat(auto-fill, 300px) !important; justify-content: space-between; gap: 28px 24px !important; } @media (max-width: 640px) { .sft-grid:has(> .lc2) { grid-template-columns: 1fr !important; } .sft-grid > .lc2 { width: 100%; } } .item-slide > .lc2 { margin: 2px auto 10px; } /* Facilities: one button, a small heading per kind (Pool, Food and drink…) */ .rb .rb-fac__h { margin: 12px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); } .rb .rb-fac__h:first-child { margin-top: 0; } .rb .rb-fac .item-content { display: block !important; } .rb .rb-fac:has(.rb-x) .rb-fac__h { display: none; } /* while searching, the headings step aside */ /* the grid / list switch: icons centred in their circles (the theme's button rules pushed them) */ body .rb .rb__view { align-items: center; gap: 2px; height: 40px; box-sizing: border-box; } body .rb .rb__view button { display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important; padding: 0 !important; margin: 0 !important; line-height: 0 !important; border: 0 !important; min-width: 0 !important; } body .rb .rb__view button svg { position: static !important; margin: 0 !important; } /* the row never runs into itself: the buttons may wrap to a second line; Map and Sort stay together on the right */ .rb__pills { flex-wrap: wrap !important; row-gap: 8px; } .rb__end { flex: 0 0 auto; } @media (max-width: 1365px) { .rb .rb__map > span { display: none; } body .rb button.rb__map { padding: 0 12px !important; } } .rb .rb-fac .item-content, .rb .rbp__body .item-content { border: 0 !important; padding: 0 !important; margin: 0 !important; } .rb .rbp__body .item-content ul { padding: 0 !important; margin: 0 !important; border: 0 !important; } /* the close button on the phone Filters sheet: the theme pads every