.stowly-archive {
background: var(--stowly-color-page);
min-height: calc(100vh - var(--stowly-header-height));
}
.stowly-archive__inner {
max-width: var(--stowly-container);
margin: 0 auto;
padding: 24px 24px 80px;
box-sizing: border-box;
width: 100%;
} body.stowly-archive-layout .stowly-archive__inner {
max-width: var(--stowly-container-archive);
margin: 0 auto;
padding: 0 24px;
}
body.stowly-archive-layout .stowly-archive {
padding-bottom: 0;
} body.stowly-archive-layout #page,
body.stowly-archive-layout #content,
body.stowly-archive-layout #primary,
body.stowly-archive-layout .site-content,
body.stowly-archive-layout .site-main,
body.stowly-archive-layout .ast-container,
body.stowly-archive-layout .ast-container-fluid,
body.stowly-archive-layout .entry-content,
body.stowly-archive-layout .ast-page-header-section,
body.stowly-archive-layout .ast-archive-description,
body.stowly-archive-layout main.site-main,
body.stowly-archive-layout main.stowly-archive,
body.stowly-archive-layout .stowly-archive,
body.stowly-archive-layout .stowly-archive__inner {
padding-top: 0 !important;
margin-top: 0 !important;
} body.stowly-archive-layout .ast-archive-title,
body.stowly-archive-layout .ast-page-header-section,
body.stowly-archive-layout .ast-archive-description {
display: none !important;
} body.stowly-archive-layout .stowly-site-header__inner {
max-width: var(--stowly-container-archive);
margin: 0 auto;
padding: 10px 24px;
gap: 16px;
}
@media (min-width: 901px) {
body.stowly-archive-layout .stowly-site-header__inner {
padding: 10px 24px;
}
body.stowly-archive-layout .stowly-site-header {
height: auto;
min-height: 0;
padding: 0;
background: var(--stowly-color-surface);
border-bottom: 1px solid var(--stowly-color-line);
box-shadow: none;
overflow: visible;
}
body.stowly-archive-layout .stowly-site-header.is-scrolled {
box-shadow: var(--stowly-shadow-sm);
}
body.stowly-archive-layout .stowly-site-header.is-scrolled .stowly-site-header__inner {
box-shadow: none;
border-color: transparent;
}
body.stowly-archive-layout .stowly-site-header__inner {
height: auto;
min-height: 0;
overflow: visible;
border-radius: 0;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
box-shadow: none;
}
} @media (min-width: 769px) {
body.stowly-archive-layout .stowly-site-header {
overflow: visible;
} body.stowly-archive-layout .stowly-site-header.is-header-search-expanded {
height: var(--stowly-header-collapsed-height, var(--stowly-header-height, 76px));
min-height: 0;
overflow: visible;
margin-bottom: 0;
border-bottom-color: transparent;
}
body.stowly-archive-layout .stowly-site-header.is-header-search-expanded::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: var(--stowly-header-expanded-extra, 0px);
background: var(--stowly-color-surface);
border-bottom: 1px solid var(--stowly-color-line);
pointer-events: none;
transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
body.stowly-archive-layout .stowly-site-header.is-header-search-expanded .stowly-site-header__inner {
height: auto;
overflow: visible;
}
body.stowly-archive-layout .stowly-archive-header-toolbar {
overflow: visible;
position: relative;
z-index: 2;
} body.stowly-archive-layout .stowly-site-header__inner {
grid-template-rows: 44px;
overflow: visible;
}
body.stowly-archive-layout .stowly-site-header__right {
min-height: 44px;
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header {
justify-self: center;
width: 100%;
max-width: min(520px, 100%);
padding: 3px;
min-height: 44px;
align-items: center;
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header.is-search-expanded {
max-width: min(780px, 100%);
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header .stowly-header-search__segment {
min-height: 36px;
padding-top: 4px;
padding-bottom: 4px;
} .stowly-site-header--archive form.stowly-header-search--archive-header:not(.is-search-expanded) .stowly-header-search__submit {
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 3px 0 4px;
border-radius: 50% !important;
flex: 0 0 34px;
gap: 0;
}
.stowly-site-header--archive form.stowly-header-search--archive-header.is-search-expanded .stowly-header-search__submit {
min-height: 48px !important;
padding: 0 18px !important;
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header.is-search-expanded .stowly-header-search__segment {
height: 56px;
min-height: 56px;
max-height: 56px;
padding: 8px 30px 8px 18px;
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header.is-search-expanded {
height: 66px;
min-height: 66px;
max-height: 66px;
padding: 3px;
}
} body.stowly-archive-layout .stowly-site-header .stowly-header-search__inline-input {
height: auto;
min-height: 1.5em !important;
overflow: visible;
} body.stowly-archive-layout .stowly-site-header .stowly-header-search__inline-input,
body.stowly-archive-layout .stowly-site-header .stowly-header-search__toggle,
body.stowly-archive-layout .stowly-site-header .stowly-header-search__value {
font-size: 14px;
line-height: 1.25;
}
@media (max-width: 768px) {
body.stowly-archive-layout .stowly-site-header .stowly-header-search__inline-input,
body.stowly-archive-layout .stowly-site-header .stowly-header-search__toggle,
body.stowly-archive-layout .stowly-site-header .stowly-header-search__value {
font-size: 16px;
}
} .stowly-filters {
display: grid;
gap: 14px;
margin: 20px 0 28px;
} body.stowly-archive-layout .stowly-filters {
position: sticky;
top: var(--stowly-header-height);
z-index: 30;
margin: 0 !important;
gap: 0;
background: var(--stowly-color-page);
border-top: 0;
border-bottom: 1px solid var(--stowly-color-line);
}
body.stowly-archive-layout .stowly-filters-header-row {
padding: 8px 0;
margin: 0;
flex-wrap: nowrap;
align-items: center;
min-width: 0;
gap: 12px;
}
body.stowly-archive-layout .stowly-filter-panels {
position: relative;
height: 0;
}
body.stowly-archive-layout .stowly-filter-panel {
top: 6px;
left: 0;
} .stowly-filter-panel__footer {
display: none;
} @media (min-width: 769px) {
body.stowly-archive-layout.stowly-filter-open .stowly-filters {
z-index: 40 !important;
}
body.stowly-archive-layout.stowly-filter-open .stowly-filter-overlay.is-active {
z-index: 24 !important;
background: transparent !important;
}
} .stowly-search-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
align-items: stretch;
position: relative;
background: var(--stowly-color-surface);
border: 1px solid var(--stowly-color-line-strong);
border-radius: var(--stowly-radius-pill);
padding: 6px;
box-shadow: var(--stowly-shadow-sm);
margin: 26px 0 0;
}
.stowly-toolbar-address,
.stowly-toolbar-what {
position: relative;
display: flex;
align-items: center;
padding: 0 20px;
min-width: 0;
margin: 0;
min-height: 52px;
border: 0;
background: transparent;
box-shadow: none;
filter: none;
border-radius: var(--stowly-radius-pill);
transition: background var(--stowly-transition);
}
.stowly-toolbar-address + .stowly-toolbar-what::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 55%;
background: var(--stowly-color-line);
transition: opacity var(--stowly-transition);
}
.stowly-toolbar-address:hover,
.stowly-toolbar-what:hover,
.stowly-toolbar-address:focus-within,
.stowly-toolbar-what:focus-within {
background: var(--stowly-color-surface-soft);
}
.stowly-toolbar-address:hover + .stowly-toolbar-what::before,
.stowly-toolbar-what:hover::before,
.stowly-toolbar-address:focus-within + .stowly-toolbar-what::before,
.stowly-toolbar-what:focus-within::before {
opacity: 0;
}
.stowly-toolbar-address select,
.stowly-toolbar-select-trigger {
box-shadow: none !important;
filter: none;
}
.stowly-toolbar-address select:hover,
.stowly-toolbar-address select:focus,
.stowly-toolbar-select-trigger:hover,
.stowly-toolbar-select-trigger:focus {
background: transparent;
box-shadow: none;
}
.stowly-toolbar-label {
position: absolute;
top: -22px;
left: 20px;
font-size: 11px;
font-weight: 700;
color: var(--stowly-color-ink-soft);
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
}
.stowly-toolbar-address select,
.stowly-toolbar-select-trigger {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0;
font-size: 14px;
font-weight: 500;
color: var(--stowly-color-ink);
cursor: pointer;
width: 100%;
min-width: 0;
min-height: 0;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.stowly-toolbar-address select:focus,
.stowly-toolbar-select-trigger:focus {
outline: 0;
box-shadow: none;
}
.stowly-toolbar-submit {
align-self: stretch;
justify-self: end;
padding: 0 22px;
border: 0;
border-radius: var(--stowly-radius-pill);
background: var(--stowly-color-primary);
color: #fff;
font-family: inherit;
font-weight: 600;
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background-color var(--stowly-transition), box-shadow var(--stowly-transition);
}
.stowly-toolbar-submit:hover {
background: var(--stowly-color-primary-hover);
box-shadow: var(--stowly-shadow-sm);
color: #fff;
}
.stowly-toolbar-submit::before {
content: "";
width: 16px;
height: 16px;
flex: 0 0 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
} .stowly-filter-toggle {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 10px;
white-space: nowrap;
border: 1px solid var(--stowly-color-line-strong, #d8d5d2);
border-radius: var(--stowly-radius-pill, 999px);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink, #1b1b1f);
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
user-select: none;
transition: border-color var(--stowly-transition), background var(--stowly-transition), color var(--stowly-transition), box-shadow var(--stowly-transition);
}
.stowly-filter-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.stowly-filter-toggle__switch {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--stowly-color-ink-soft, #8a8780);
transition: color var(--stowly-transition), transform var(--stowly-transition);
}
.stowly-filter-toggle__switch svg {
display: block;
}
.stowly-filter-toggle__switch svg rect {
transition: fill var(--stowly-transition);
}
.stowly-filter-toggle__switch svg circle {
transition: transform var(--stowly-transition), fill var(--stowly-transition);
transform-origin: center;
transform-box: fill-box;
}
.stowly-filter-toggle:hover {
border-color: var(--stowly-color-ink, #1b1b1f);
background: var(--stowly-color-surface-soft, #faf8f5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
} .stowly-filter-toggle:has(input[type="checkbox"]:checked) {
border-color: var(--stowly-color-ink, #1b1b1f);
}
.stowly-filter-toggle:has(input[type="checkbox"]:checked) .stowly-filter-toggle__switch {
color: var(--stowly-color-ink, #1b1b1f);
} .stowly-filter-toggle:has(input[type="checkbox"]:checked) .stowly-filter-toggle__switch svg rect {
fill: var(--stowly-color-ink, #1b1b1f);
}
.stowly-filter-toggle:has(input[type="checkbox"]:checked) .stowly-filter-toggle__switch svg circle {
fill: #fff;
transform: translateX(8px);
} .stowly-filter-toggle:focus-within:has(input:focus-visible) {
outline: 2px solid var(--stowly-color-ink, #1b1b1f);
outline-offset: 2px;
} .stowly-filter-divider {
flex: 0 0 auto;
display: inline-block;
width: 1px;
height: 22px;
margin: 0 4px;
background: var(--stowly-color-line, #e9e6e4);
align-self: center;
} .stowly-filters-header-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
margin-top: 8px;
min-width: 0;
}
.stowly-filter-tabs {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--stowly-color-line-strong) transparent;
}
.stowly-filter-tabs::-webkit-scrollbar {
height: 4px;
}
.stowly-filter-tabs::-webkit-scrollbar-thumb {
background: var(--stowly-color-line-strong);
border-radius: 999px;
}
.stowly-filter-tab {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
white-space: nowrap;
gap: 6px;
padding: 8px 12px;
border: 1px solid var(--stowly-color-line-strong);
border-radius: var(--stowly-radius-pill);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink);
font-family: inherit;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
cursor: pointer;
transition: border-color var(--stowly-transition),
background var(--stowly-transition),
color var(--stowly-transition),
box-shadow var(--stowly-transition);
}
.stowly-filter-tab:hover,
.stowly-filter-tab:focus {
border-color: var(--stowly-color-ink);
background: var(--stowly-color-surface-soft);
color: var(--stowly-color-ink);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.stowly-filter-tab:focus-visible {
outline: 2px solid var(--stowly-color-ink);
outline-offset: 2px;
}
.stowly-filter-tab.is-active {
border-color: var(--stowly-color-ink);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink);
box-shadow: inset 0 0 0 1px var(--stowly-color-ink);
transform: none;
}
.stowly-filter-tab.is-has-active {
border-color: var(--stowly-color-ink);
padding-right: 10px;
}
.stowly-filter-tab__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #111;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.stowly-filter-actions {
display: flex;
flex: 0 0 auto;
min-width: 0;
justify-content: flex-end;
align-items: center;
gap: 14px;
}
.stowly-reset-link {
color: var(--stowly-color-ink);
text-decoration: underline;
font-weight: 600;
font-size: 14px;
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
.stowly-reset-link:hover {
color: var(--stowly-color-ink);
opacity: 0.75;
} .stowly-filter-panels {
position: relative;
min-height: 0;
}
.stowly-flyout-panel,
.stowly-filter-panel {
display: none;
position: absolute;
top: calc(100% + 12px);
left: 0;
z-index: 40;
width: min(560px, 92vw);
padding: 20px;
border: 1px solid var(--stowly-color-line);
border-radius: var(--stowly-radius-lg);
background: var(--stowly-color-surface);
box-shadow: var(--stowly-shadow-lg);
overscroll-behavior: contain;
}
.stowly-flyout-panel.is-open,
.stowly-filter-panel.is-active {
display: block;
animation: stowlyFlyoutFade 160ms ease-out;
}
@keyframes stowlyFlyoutFade {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (min-width: 769px) {
body.stowly-archive-layout .stowly-filter-panel.is-active.stowly-filter-flyout-exit {
animation: none !important;
opacity: 0;
transform: translateY(-10px) scale(0.97);
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
transition:
opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.26s ease;
pointer-events: none;
}
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
body.stowly-archive-layout .stowly-filter-panel.is-active.stowly-filter-flyout-exit {
transition-duration: 0.05s;
transform: none;
}
}
@media (min-width: 769px) { body.stowly-archive-layout .stowly-filter-panel__scroll {
flex: none;
min-height: 0;
overflow-x: visible;
overflow-y: visible;
-webkit-overflow-scrolling: auto;
scroll-padding: unset;
padding: 0;
}
body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-price"] .stowly-filter-panel__scroll,
body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
padding: 6px 2px 12px;
}
.stowly-header-search__menu-scroll {
flex: none;
min-height: 0;
overflow: visible;
overflow-y: visible;
-webkit-overflow-scrolling: auto;
padding-bottom: 0;
scroll-padding-bottom: unset;
}
}
.stowly-type-selector-panel {
left: auto;
right: 0;
} .stowly-filter-panel .stowly-form-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.stowly-filter-panel .stowly-form-field__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--stowly-color-muted);
}
.stowly-filter-select {
position: relative;
width: 100%;
}
.stowly-filter-select__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: 1px solid var(--stowly-color-line);
border-radius: var(--stowly-radius-md);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink);
font-size: 15px;
font-weight: 500;
line-height: 1.3;
text-align: left;
cursor: pointer;
transition: border-color var(--stowly-transition), box-shadow var(--stowly-transition), background var(--stowly-transition);
}
.stowly-filter-select__toggle:hover {
border-color: var(--stowly-color-ink);
}
.stowly-filter-select__toggle:focus-visible {
outline: none;
border-color: var(--stowly-color-ink);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.stowly-filter-select.is-open .stowly-filter-select__toggle {
border-color: var(--stowly-color-ink);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.stowly-filter-select__value {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stowly-filter-select__chev {
flex: 0 0 auto;
color: var(--stowly-color-muted);
transition: transform var(--stowly-transition), color var(--stowly-transition);
}
.stowly-filter-select.is-open .stowly-filter-select__chev {
transform: rotate(180deg);
color: var(--stowly-color-ink);
}
.stowly-filter-select__menu {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 60;
padding: 6px;
border: 1px solid var(--stowly-color-line);
border-radius: var(--stowly-radius-md);
background: var(--stowly-color-surface);
box-shadow: var(--stowly-shadow-lg);
max-height: 280px;
overflow-y: auto;
}
.stowly-filter-select.is-open .stowly-filter-select__menu {
display: block;
animation: stowlyFlyoutFade 140ms ease-out;
}
.stowly-filter-select__option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 0;
border-radius: var(--stowly-radius-sm, 8px);
background: transparent;
color: var(--stowly-color-ink);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
text-align: left;
cursor: pointer;
transition: background var(--stowly-transition), color var(--stowly-transition);
}
.stowly-filter-select__option:hover,
.stowly-filter-select__option:focus-visible {
background: var(--stowly-color-surface-muted, rgba(15, 23, 42, 0.05));
color: var(--stowly-color-ink);
outline: none;
}
.stowly-filter-select__option.is-selected {
background: var(--stowly-color-ink);
color: #fff;
}
.stowly-filter-select__option.is-selected:hover,
.stowly-filter-select__option.is-selected:focus-visible {
background: var(--stowly-color-ink);
color: #fff;
}
.stowly-filter-select__option-label {
flex: 1 1 auto;
min-width: 0;
}
.stowly-filter-select__option-check {
flex: 0 0 auto;
opacity: 0;
transition: opacity var(--stowly-transition);
}
.stowly-filter-select__option.is-selected .stowly-filter-select__option-check {
opacity: 1;
} .stowly-filter-select--inline {
width: auto;
min-width: 0;
}
.stowly-filter-select--inline .stowly-filter-select__toggle {
width: auto;
padding: 9px 16px;
gap: 6px;
border: 1px solid var(--stowly-color-line-strong);
border-radius: var(--stowly-radius-pill);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
box-shadow: none;
transition: border-color var(--stowly-transition),
background var(--stowly-transition),
color var(--stowly-transition),
box-shadow var(--stowly-transition),
transform var(--stowly-transition);
}
.stowly-filter-select--inline .stowly-filter-select__toggle:hover,
.stowly-filter-select--inline .stowly-filter-select__toggle:focus {
border-color: var(--stowly-color-ink);
background: var(--stowly-color-surface-soft);
color: var(--stowly-color-ink);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.stowly-filter-select--inline .stowly-filter-select__toggle:focus-visible {
outline: 2px solid var(--stowly-color-ink);
outline-offset: 2px;
box-shadow: none;
}
.stowly-filter-select--inline.is-open .stowly-filter-select__toggle {
border-color: var(--stowly-color-ink);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink);
box-shadow: inset 0 0 0 1px var(--stowly-color-ink);
transform: none;
}
.stowly-filter-select--inline .stowly-filter-select__prefix {
color: var(--stowly-color-muted);
font-weight: 500;
flex: 0 0 auto;
white-space: nowrap;
}
.stowly-filter-select--inline .stowly-filter-select__value {
flex: 0 1 auto;
color: var(--stowly-color-ink);
font-weight: 600;
white-space: nowrap;
}
.stowly-filter-select--inline .stowly-filter-select__chev {
color: var(--stowly-color-ink);
} .stowly-filter-select--inline .stowly-filter-select__icon {
display: none;
flex: 0 0 auto;
color: var(--stowly-color-ink);
}
.stowly-filter-select--inline .stowly-filter-select__menu {
left: auto;
right: 0;
min-width: 240px;
}
@media (max-width: 800px) {
.stowly-filter-select--inline .stowly-filter-select__menu {
left: 0;
right: auto;
}
} @media (max-width: 640px) {
.stowly-filter-select--inline .stowly-filter-select__toggle {
width: 40px;
height: 40px;
padding: 0;
gap: 0;
border-radius: 50%;
justify-content: center;
}
.stowly-filter-select--inline .stowly-filter-select__prefix,
.stowly-filter-select--inline .stowly-filter-select__value,
.stowly-filter-select--inline .stowly-filter-select__chev {
display: none;
}
.stowly-filter-select--inline .stowly-filter-select__icon {
display: block;
}
.stowly-filter-select--inline .stowly-filter-select__menu {
right: 0;
left: auto;
min-width: 220px;
}
}
.stowly-flyout-panel h4 {
font-size: 14px;
font-weight: 700;
margin: 0 0 12px;
color: var(--stowly-color-ink);
}
.stowly-filter-dropdown {
grid-column: 1 / -1;
border: 1px solid var(--stowly-color-line);
border-radius: var(--stowly-radius-md);
background: var(--stowly-color-surface);
}
.stowly-filter-dropdown > summary {
cursor: pointer;
padding: 12px 40px 12px 14px;
font-weight: 400;
font-size: 15px;
line-height: 1.4;
color: var(--stowly-color-ink);
list-style: none;
display: block;
background-image: var(--stowly-chevron);
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px;
transition: transform var(--stowly-transition);
}
.stowly-filter-dropdown > summary::-webkit-details-marker,
.stowly-filter-dropdown > summary::marker {
display: none;
content: "";
}
.stowly-filter-dropdown[open] > summary {
border-bottom: 1px solid var(--stowly-color-line);
background-image: var(--stowly-chevron-up);
}
.stowly-filter-dropdown > .stowly-chips,
.stowly-filter-dropdown > .stowly-filters__features,
.stowly-filter-dropdown > .stowly-provider-listing-types,
.stowly-filter-dropdown > .stowly-filter-grid {
padding: 14px;
}
.stowly-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}  .stowly-filter-panel .stowly-filter-chip-group__label {
margin: 0 0 8px;
padding: 0;
color: var(--stowly-color-ink-soft);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.2;
}
.stowly-filter-panel .stowly-filter-chip-group--separated {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--stowly-color-line);
} .stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-grid {
gap: 14px;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 14px 12px;
border: 1px solid var(--stowly-color-line);
border-radius: var(--stowly-radius-md);
background: var(--stowly-color-surface-soft);
box-shadow: var(--stowly-shadow-xs);
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] > span {
margin: 0;
padding: 0;
color: var(--stowly-color-ink-soft);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.2;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input[type="number"] {
width: 100%;
margin: 0;
padding: 7px 12px;
min-height: 0;
border: 1px solid var(--stowly-color-line);
border-radius: var(--stowly-radius-sm);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink);
font-size: 14px;
font-weight: 500;
font-variant-numeric: tabular-nums;
line-height: 1.25;
transition: border-color var(--stowly-transition), box-shadow var(--stowly-transition);
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input[type="number"]:hover {
border-color: var(--stowly-color-line-strong);
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input[type="number"]:focus {
outline: none;
border-color: var(--stowly-color-ink);
box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.08);
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range {
gap: 0;
padding: 4px 0 0;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__slider {
margin: 0 10px;
height: 40px;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__track,
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__fill {
height: 6px;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__track {
left: -8px;
right: -8px;
background: var(--stowly-color-line);
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__fill {
background: var(--stowly-color-primary);
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"] {
accent-color: var(--stowly-color-primary);
height: 40px !important;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-webkit-slider-runnable-track {
height: 6px !important;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-moz-range-track {
height: 6px !important;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-webkit-slider-thumb {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
background: #fff !important;
border: 2px solid #fff !important;
box-shadow:
0 0 0 1px var(--stowly-color-line-strong),
0 2px 8px rgba(0, 0, 0, 0.12) !important;
margin-top: -8px !important;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-moz-range-thumb {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
background: #fff !important;
border: 2px solid #fff !important;
box-shadow:
0 0 0 1px var(--stowly-color-line-strong),
0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.08);
box-shadow:
0 0 0 1px var(--stowly-color-ink-soft),
0 3px 12px rgba(0, 0, 0, 0.14) !important;
}
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.08);
box-shadow:
0 0 0 1px var(--stowly-color-ink-soft),
0 3px 12px rgba(0, 0, 0, 0.14) !important;
} .stowly-range {
display: flex;
flex-direction: column;
gap: 18px;
padding: 10px 4px 12px;
}
.stowly-range__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.stowly-range__label {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 14px;
color: var(--stowly-color-ink);
font-variant-numeric: tabular-nums;
}
.stowly-range__label-key {
color: var(--stowly-color-ink-soft);
font-weight: 500;
}
.stowly-range__label-value {
font-weight: 700;
color: var(--stowly-color-ink);
}
.stowly-range__slider {
position: relative;
height: 44px;
margin: 0 16px;
}
.stowly-range__track,
.stowly-range__fill {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 4px;
border-radius: 999px;
pointer-events: none;
}
.stowly-range__track {
left: -10px;
right: -10px;
background: var(--stowly-color-line);
}
.stowly-range__fill {
left: 0;
right: 0;
background: #111;
} input.stowly-range__input[type="range"] {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
pointer-events: none !important;
outline: none !important;
accent-color: #111;
touch-action: none;
}
input.stowly-range__input[type="range"]::-webkit-slider-runnable-track {
height: 4px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
input.stowly-range__input[type="range"]::-moz-range-track {
height: 4px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
input.stowly-range__input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: #fff !important;
border: 2px solid #111 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
cursor: grab;
pointer-events: auto !important; margin-top: -12px !important;
transition: transform 120ms ease, box-shadow 120ms ease;
}
input.stowly-range__input[type="range"]::-moz-range-thumb {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: #fff !important;
border: 2px solid #111 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
cursor: grab;
pointer-events: auto !important;
transition: transform 120ms ease, box-shadow 120ms ease;
}
input.stowly-range__input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important;
}
input.stowly-range__input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important;
}
input.stowly-range__input[type="range"]::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.05);
}
input.stowly-range__input[type="range"]::-moz-range-thumb:active {
cursor: grabbing;
transform: scale(1.05);
} .stowly-filter-panel[data-panel-id="panel-price"] .stowly-range--heatmap,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap {
padding: 0;
gap: 18px;
}
.stowly-filter-panel[data-panel-id="panel-price"] .stowly-filter-panel__scroll,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
padding: 6px 2px 12px;
}
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap {
grid-column: 1 / -1;
}
.stowly-filter-panel[data-panel-id="panel-price"] .stowly-range--heatmap .stowly-range__label-key,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap .stowly-range__label-key {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--stowly-color-ink-soft);
line-height: 1.2;
}
.stowly-filter-panel[data-panel-id="panel-price"] .stowly-range--heatmap .stowly-range__header,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap .stowly-range__header {
padding: 0 4px;
}
.stowly-range--heatmap .stowly-range__slider--heatmap {
--stowly-heatmap-thumb-inset: 12px;
--stowly-heatmap-thumb-size: 24px;
--stowly-heatmap-baseline-pct: calc(100% - (var(--stowly-heatmap-thumb-size) / 2));
margin: 0 2px;
height: 76px;
}
.stowly-range--heatmap .stowly-range__track {
display: block;
position: absolute;
left: 0;
right: 0;
top: var(--stowly-heatmap-baseline-pct);
transform: translateY(-50%);
height: 2px;
border-radius: 999px;
background: var(--stowly-color-line);
pointer-events: none;
z-index: 0;
}
.stowly-range--heatmap .stowly-range__fill {
display: block;
position: absolute;
top: var(--stowly-heatmap-baseline-pct);
transform: translateY(-50%);
height: 2px;
border-radius: 999px;
background: var(--stowly-color-primary);
pointer-events: none;
z-index: 1;
left: 0;
right: 0;
}
.stowly-range--heatmap .stowly-range__histogram {
position: absolute;
left: var(--stowly-heatmap-thumb-inset);
right: var(--stowly-heatmap-thumb-inset);
top: 0;
height: var(--stowly-heatmap-baseline-pct);
display: flex;
align-items: flex-end;
gap: 2px;
pointer-events: none;
z-index: 2;
}
.stowly-range--heatmap .stowly-range__histogram-bar {
flex: 1 1 0;
min-width: 0;
border-radius: 2px 2px 0 0;
background: var(--stowly-color-primary);
height: 0;
transition: background 0.12s ease;
}
.stowly-range--heatmap .stowly-range__histogram-bar.is-out-range {
background: var(--stowly-color-line);
}
.stowly-range--heatmap input.stowly-range__input[type="range"] {
accent-color: var(--stowly-color-primary);
inset: auto 0 auto 0 !important;
top: calc(100% - var(--stowly-heatmap-thumb-size)) !important;
height: var(--stowly-heatmap-thumb-size) !important;
z-index: 3;
}
.stowly-range--heatmap input.stowly-range__input[type="range"]::-webkit-slider-runnable-track {
height: 4px !important;
background: transparent !important;
}
.stowly-range--heatmap input.stowly-range__input[type="range"]::-moz-range-track {
height: 4px !important;
background: transparent !important;
}
.stowly-range--heatmap input.stowly-range__input[type="range"]::-webkit-slider-thumb {
width: 24px !important;
height: 24px !important;
border: 2px solid #fff !important;
background: #fff !important;
box-shadow:
0 0 0 1px var(--stowly-color-line-strong),
0 2px 8px rgba(0, 0, 0, 0.14) !important;
margin-top: -10px !important;
}
.stowly-range--heatmap input.stowly-range__input[type="range"]::-moz-range-thumb {
width: 24px !important;
height: 24px !important;
border: 2px solid #fff !important;
background: #fff !important;
box-shadow:
0 0 0 1px var(--stowly-color-line-strong),
0 2px 8px rgba(0, 0, 0, 0.14) !important;
}
.stowly-range--heatmap input.stowly-range__input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.08);
box-shadow:
0 0 0 1px var(--stowly-color-ink-soft),
0 3px 12px rgba(0, 0, 0, 0.16) !important;
}
.stowly-range--heatmap input.stowly-range__input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.08);
box-shadow:
0 0 0 1px var(--stowly-color-ink-soft),
0 3px 12px rgba(0, 0, 0, 0.16) !important;
}
.stowly-range--heatmap input.stowly-range__input[data-range="max"] {
z-index: 4;
} input.stowly-range__input[data-range="max"] {
z-index: 2;
}
input.stowly-range__input[data-range="min"] {
z-index: 1;
} .stowly-archive-hero {
position: relative;
padding: 56px 0 24px;
margin-bottom: 24px;
}
.stowly-archive-hero__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.stowly-archive-hero__eyebrow {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stowly-color-primary);
}
.stowly-archive-hero__title {
position: relative;
margin: 0;
padding-bottom: 18px;
font-family: var(--stowly-font-heading);
font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.025em;
color: var(--stowly-color-ink);
text-wrap: balance;
}
.stowly-archive-hero__title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 4px;
border-radius: 999px;
background: var(--stowly-color-primary);
}
.stowly-archive-hero__lede {
margin: 4px 0 8px;
color: var(--stowly-color-ink-soft);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.6;
max-width: 60ch;
}
.stowly-archive-hero__helper {
margin: 18px 0 0;
font-size: 14px;
color: var(--stowly-color-ink-soft);
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
justify-content: center;
}
.stowly-archive-hero .stowly-front-search {
width: 100%;
max-width: 880px;
} @media (max-width: 768px) {
.stowly-archive-hero {
padding: 32px 0 16px;
}
} .stowly-archive-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 16px;
margin: 28px 0 18px;
}
.stowly-archive-header__actions {
display: inline-flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
flex-wrap: wrap;
}
.stowly-archive-header__text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 520px;
min-width: 0;
}
.stowly-archive-header__title {
margin: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--stowly-color-ink);
}
.stowly-archive-header__count {
color: var(--stowly-color-ink-soft);
font-size: 14px;
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.stowly-archive-header__description {
display: grid;
gap: 8px;
max-width: 760px;
margin-top: 8px;
color: var(--stowly-color-ink-soft);
font-size: 15px;
line-height: 1.6;
}
.stowly-archive-header__description p {
margin: 0;
}
.stowly-archive-results-intro {
margin: 6px 0 0;
}
.stowly-archive-results-intro .stowly-archive-header,
body.stowly-archive-layout .stowly-archive-results-intro .stowly-archive-header {
margin-top: 0;
margin-bottom: 18px;
}
.stowly-archive-results-intro .stowly-breadcrumbs {
margin-bottom: 0;
}
.stowly-archive-results-intro .stowly-archive-results-intro__main {
display: flex;
flex-direction: column;
gap: 4px;
} .stowly-results-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 28px;
align-items: start;
}  body.stowly-archive-layout .stowly-results-layout {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 20px;
} @media (min-width: 1101px) {
.stowly-results-layout.is-map-expanded,
body.stowly-archive-layout .stowly-results-layout.is-map-expanded {
grid-template-columns: minmax(0, 1fr);
}
.stowly-results-layout.is-map-expanded .stowly-results-main {
display: none;
}
}
body.stowly-archive-layout .stowly-results-main {
padding: 4px 0 64px;
}
body.stowly-archive-layout .stowly-archive-header {
margin: 0 0 14px;
}
.stowly-results-main {
min-width: 0;
} .stowly-archive-results-swap.is-stowly-fetching {
pointer-events: none;
}
.stowly-archive-results-swap.is-stowly-fetching .stowly-archive-results-intro,
.stowly-archive-results-swap.is-stowly-fetching .stowly-load-more,
.stowly-archive-results-swap.is-stowly-fetching .stowly-recently-viewed {
opacity: 0.55;
transition: opacity 0.2s ease;
} @keyframes stowly-skeleton-shimmer {
0% { background-position: -200px 0; }
100% { background-position: 200px 0; }
} .stowly-listing-grid.is-stowly-list-skeleton > article.stowly-listing-card:not(.stowly-listing-card--skeleton),
.stowly-listing-grid.is-stowly-list-skeleton > [data-stowly-empty-bounds] {
display: none !important;
} .stowly-listing-grid.is-stowly-list-skeleton > article.stowly-listing-card.is-stowly-card-swapin {
display: flex !important;
animation: stowly-card-swapin 260ms ease both;
}
@keyframes stowly-card-swapin {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.stowly-listing-grid.is-stowly-list-skeleton > article.stowly-listing-card.is-stowly-card-swapin {
animation: none;
}
} .stowly-listing-card--skeleton,
article.stowly-listing-card--skeleton,
.stowly-listing-grid > article.stowly-listing-card.stowly-listing-card--skeleton {
display: flex !important;
align-items: stretch;
gap: 0;
height: var(--stowly-archive-card-h, 150px);
padding: 0 !important;
background: var(--stowly-color-surface) !important;
border: 1px solid var(--stowly-color-line) !important;
border-radius: var(--stowly-radius-lg);
overflow: hidden;
pointer-events: none;
}
.stowly-listing-card--skeleton .stowly-skeleton-img,
.stowly-listing-card--skeleton .stowly-skeleton-line {
background: linear-gradient(
90deg,
var(--stowly-color-surface-muted) 0%,
var(--stowly-color-surface-soft) 50%,
var(--stowly-color-surface-muted) 100%
);
background-size: 400px 100%;
animation: stowly-skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: var(--stowly-radius-sm);
}
.stowly-listing-card--skeleton .stowly-skeleton-img {
flex: 0 0 225px;
width: 225px;
height: auto;
align-self: stretch;
border-radius: 0;
}
.stowly-listing-card--skeleton .stowly-skeleton-body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
padding: 16px 18px;
}
.stowly-listing-card--skeleton .stowly-skeleton-line {
height: 12px;
border-radius: 6px;
}
.stowly-listing-card--skeleton .stowly-skeleton-line--title { width: 70%; height: 16px; }
.stowly-listing-card--skeleton .stowly-skeleton-line--meta  { width: 45%; }
.stowly-listing-card--skeleton .stowly-skeleton-line--text  { width: 90%; } .stowly-listing-card--skeleton .stowly-skeleton-line--price { width: 35%; height: 14px; margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
.stowly-listing-card--skeleton .stowly-skeleton-img,
.stowly-listing-card--skeleton .stowly-skeleton-line {
animation: none;
}
}
@keyframes stowly-archive-card-enter {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stowly-archive-results-swap.is-stowly-results-reveal
.stowly-listing-grid
> article.stowly-listing-card.is-stowly-card-entering {
animation: stowly-archive-card-enter 0.4s cubic-bezier(0.2, 0.9, 0.2, 1) both;
animation-delay: var(--stowly-enter-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
.stowly-archive-results-swap.is-stowly-results-reveal
.stowly-listing-grid
> article.stowly-listing-card.is-stowly-card-entering {
animation: none;
}
}
.stowly-listing-grid {
display: grid;
gap: 14px;
grid-template-columns: 1fr;
} body.stowly-archive-layout {
--stowly-archive-card-h: 150px;
} .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card,
.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-article-post,
.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-grid-common-col,
.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-full-width {
position: relative;
display: flex !important;
align-items: stretch;
gap: 0;
height: var(--stowly-archive-card-h, 150px);
background: var(--stowly-color-surface) !important;
border: 1px solid var(--stowly-color-line) !important;
border-radius: var(--stowly-radius-lg);
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03) !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
transition:
border-color var(--stowly-transition),
box-shadow var(--stowly-transition),
transform var(--stowly-transition);
} .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.is-hidden,
.stowly-listing-grid article.stowly-listing-card.is-hidden,
article.stowly-listing-card.is-hidden,
article.stowly-listing-card.ast-article-post.is-hidden,
article.stowly-listing-card.ast-grid-common-col.is-hidden,
article.stowly-listing-card.ast-full-width.is-hidden {
display: none !important;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card:hover {
border-color: var(--stowly-color-line-strong) !important;
background: var(--stowly-color-surface) !important;
box-shadow: 0 14px 32px -16px rgba(17, 17, 17, 0.18), 0 2px 6px rgba(17, 17, 17, 0.04) !important;
transform: translateY(-1px);
} .stowly-listing-card.stowly-listing-card--empty,
article.stowly-listing-card.stowly-listing-card--empty {
cursor: default; height: auto !important;
background: var(--stowly-color-surface) !important;
border-style: dashed !important;
grid-column: 1 / -1; flex-direction: column;
align-items: stretch;
padding: 8px !important;
}
.stowly-listing-card.stowly-listing-card--empty:hover,
article.stowly-listing-card.stowly-listing-card--empty:hover {
border-color: var(--stowly-color-line) !important;
background: var(--stowly-color-surface) !important;
transform: none !important;
}
.stowly-listing-card__body--empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
}
.stowly-listing-card__empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--stowly-color-surface-soft, #f4f4f0);
color: var(--stowly-color-ink-soft);
margin-bottom: 4px;
}
.stowly-listing-card__body--empty .stowly-listing-card__title {
margin: 0;
font-size: 1.1rem;
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
-webkit-box-orient: unset;
}
.stowly-listing-card__body--empty .stowly-listing-card__meta {
margin: 0;
color: var(--stowly-color-ink-soft);
max-width: 380px;
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
-webkit-box-orient: unset;
}
.stowly-listing-card__body--empty .stowly-btn {
margin-top: 6px;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link {
display: flex;
align-items: stretch;
gap: 0;
flex: 1 1 auto;
min-width: 0;
color: inherit;
text-decoration: none;
padding: 0;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link:hover {
text-decoration: none;
color: inherit;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image {
position: relative;
flex: 0 0 auto;
align-self: stretch;
width: 225px;
aspect-ratio: 3 / 2;
border-radius: 0;
overflow: hidden;
background: #fff;
margin: 0;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f7f7f7 0%, #eee 100%);
} .stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__overlays {
top: 8px;
left: 8px;
right: 8px;
gap: 4px;
}
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--entity,
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--intro,
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--distance {
font-size: 10px;
padding: 3px 8px 3px 7px;
}
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--intro svg,
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--distance svg {
width: 11px;
height: 11px;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 150ms ease, background 150ms ease;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn:hover {
transform: scale(1.1);
background: var(--stowly-color-surface-soft);
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: #222;
stroke-width: 2;
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn.is-favorited svg {
fill: var(--stowly-color-primary);
stroke: var(--stowly-color-primary);
}
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
flex: 1 1 auto;
min-height: 0;
padding: 14px 16px 16px;
} .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body.stowly-listing-card__body--empty {
padding: 48px 24px !important;
flex: 1 1 auto;
width: 100%;
min-width: 0;
align-items: center;
justify-content: center;
text-align: center;
} .stowly-listing-card__footer {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: auto;
min-width: 0;
}
.stowly-listing-card__top {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.stowly-listing-card__title,
.stowly-listing-card__body h2,
.stowly-listing-card__body h3 {
font-size: 16px;
font-weight: 700;
margin: 0;
color: var(--stowly-color-ink);
line-height: 1.3;
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.stowly-listing-card__meta,
.stowly-listing-card__city {
margin: 0;
color: var(--stowly-color-ink-soft);
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stowly-listing-card__features {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.stowly-listing-card__features li {
font-size: 11.5px;
font-weight: 600;
color: var(--stowly-color-ink-soft);
background: var(--stowly-color-surface-soft);
border: 1px solid var(--stowly-color-line);
padding: 3px 9px;
border-radius: 999px;
line-height: 1.4;
letter-spacing: 0.01em;
}
.stowly-listing-card__bottom {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-top: auto;
}
.stowly-listing-card__size {
color: var(--stowly-color-ink-soft);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
} .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__title {
padding-right: 26px;
}
.stowly-listing-card__price {
margin: 0;
font-size: 15px;
color: var(--stowly-color-ink);
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.stowly-listing-card__price strong {
font-weight: 800;
font-size: 18px;
letter-spacing: -0.01em;
}
.stowly-listing-card__price span {
font-weight: 500;
font-size: 13px;
color: var(--stowly-color-ink-soft);
}
.stowly-listing-card__book {
position: absolute;
bottom: 16px;
right: 16px;
padding: 9px 18px !important;
min-height: 0 !important;
font-size: 13.5px;
width: auto;
margin: 0;
z-index: 2;
box-shadow: 0 6px 16px -6px rgba(var(--stowly-color-primary-rgb), 0.45) !important;
} .stowly-map-aside {
position: sticky;
top: calc(var(--stowly-header-height) + 56px);
height: calc(100vh - var(--stowly-header-height) - 56px);
min-height: 520px;
} @media (min-width: 1101px) {
body.stowly-archive-layout .stowly-map-aside {
padding-top: 20px;
padding-bottom: 20px;
}
}
.stowly-map {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
border-radius: var(--stowly-radius-lg); background-color: var(--stowly-color-map-water, #c8dcf0);
background-image:
radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 55%);
} .stowly-map::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 400;
background: linear-gradient(
110deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 45%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.35) 55%,
rgba(255, 255, 255, 0) 100%
);
background-size: 220% 100%;
background-position: 200% 0;
opacity: 0;
transition: opacity 260ms ease;
}
.stowly-map.stowly-map--loading::after {
opacity: 1;
animation: stowlyMapShimmer 1.6s ease-in-out infinite;
}
@keyframes stowlyMapShimmer {
0%   { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.stowly-map.stowly-map--loading::after {
animation: none;
}
}
body.stowly-archive-layout .stowly-map {
border: 1px solid var(--stowly-color-line);
}
.stowly-map-aside__close {
display: none;
} .stowly-map-marker {
display: flex !important;
align-items: center;
justify-content: center;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
overflow: visible;
transform: translateY(50%);
}
.stowly-map-marker__inner--same-site {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
padding: 2px 10px 3px;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.stowly-map-marker__same-site-plus {
display: block;
margin: 0;
font-size: 14px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
color: var(--stowly-color-primary);
}
.stowly-map-marker__same-site-from {
display: block;
margin: 0;
padding-top: 1px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: var(--stowly-color-ink-soft, #555);
}
.stowly-map-marker__inner {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
background: #fff;
border: 1px solid var(--stowly-color-line-strong);
border-radius: 999px;
font-weight: 700;
font-size: 12px;
line-height: 1;
color: #111;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transition:
background-color 120ms ease,
color 120ms ease,
border-color 120ms ease,
box-shadow 120ms ease;
}
.stowly-map-marker:hover .stowly-map-marker__inner,
.stowly-map-marker.is-card-hover .stowly-map-marker__inner {
background: #111;
color: #fff;
border-color: #111;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
} .stowly-map-marker.is-card-hover {
z-index: 1000 !important;
} .stowly-map-marker:hover .stowly-map-marker__inner span,
.stowly-map-marker.is-card-hover .stowly-map-marker__inner span {
color: #fff !important;
}
.stowly-map-marker:hover .stowly-map-marker__same-site-from,
.stowly-map-marker.is-card-hover .stowly-map-marker__same-site-from {
color: rgba(255, 255, 255, 0.92) !important;
}
.stowly-map-marker:hover .stowly-map-marker__same-site-plus,
.stowly-map-marker.is-card-hover .stowly-map-marker__same-site-plus {
color: rgba(255, 255, 255, 0.95) !important;
}
.stowly-map-marker:hover .stowly-map-marker__inner .stowly-map-marker__empty,
.stowly-map-marker.is-card-hover .stowly-map-marker__inner .stowly-map-marker__empty {
color: rgba(255, 255, 255, 0.5) !important;
}
.stowly-map-marker__empty {
display: inline-block;
min-width: 1.25em;
text-align: center;
color: var(--stowly-color-ink-muted);
font-weight: 700;
} .stowly-map-cluster {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible;
transform: translateY(50%);
}
.stowly-map-cluster__inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--stowly-gradient-primary);
color: #fff;
font-weight: 700;
font-size: 16px;
line-height: 1;
border: 3px solid #fff;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
box-sizing: border-box;
}
.stowly-map-cluster .stowly-map-cluster__n {
font-variant-numeric: tabular-nums;
pointer-events: none;
} .stowly-map-cluster:hover .stowly-map-cluster__inner,
.stowly-map-cluster.is-card-hover .stowly-map-cluster__inner {
background: #111;
color: #fff;
border-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
.stowly-map-cluster.is-card-hover {
z-index: 1000 !important;
} .gm-style .gm-style-iw.gm-style-iw-c {
padding: 0 !important;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--stowly-color-line, #e8e4e0);
box-shadow:
0 16px 48px rgba(17, 17, 17, 0.12),
0 4px 14px rgba(17, 17, 17, 0.06);
background: var(--stowly-color-surface);
max-width: min(440px, calc(100vw - 20px)) !important;
}
.gm-style .gm-style-iw-d {
overflow: hidden !important;
padding: 0 !important;
max-height: none !important;
} .gm-style .gm-style-iw-ch {
display: none !important;
padding: 0 !important;
height: 0 !important;
} .gm-style .gm-style-iw-tc,
.gm-style .gm-style-iw-tc::after {
display: none !important;
} .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
display: none !important;
} .stowly-map-zoom {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 44px;
margin: 14px 14px 0 0;
border-radius: 12px;
overflow: hidden;
background: #fff;
border: 1px solid var(--stowly-color-line, #e8e4e0);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.stowly-map-zoom__btn {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 42px;
padding: 0;
border: 0;
background: #fff;
color: #111;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.stowly-map-zoom__btn svg {
width: 18px;
height: 18px;
}
.stowly-map-zoom__btn--in {
border-bottom: 1px solid var(--stowly-color-line, #e8e4e0);
border-radius: 12px 12px 0 0;
}
.stowly-map-zoom__btn--out {
border-radius: 0 0 12px 12px;
} .stowly-map-zoom__btn:hover,
.stowly-map-zoom__btn:focus,
.stowly-map-zoom__btn:focus-visible {
background: var(--stowly-color-surface-soft, #f5f3f0);
color: #111;
}
.stowly-map-zoom__btn:active {
background: #ececec;
color: #111;
}
.stowly-map-zoom__btn:focus-visible {
outline: 2px solid var(--stowly-color-primary, #006a69);
outline-offset: -2px;
} .stowly-map-expand-toggle {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 14px 14px 0 0;
padding: 0;
border: 1px solid var(--stowly-color-line, #e8e4e0);
border-radius: 12px;
background: #fff;
color: #111;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
transition: background 120ms ease, box-shadow 120ms ease;
}
.stowly-map-expand-toggle svg {
width: 18px;
height: 18px;
} .stowly-map-expand-toggle:hover,
.stowly-map-expand-toggle:focus-visible {
background: var(--stowly-color-surface-soft, #f5f3f0);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
color: #111;
}
.stowly-map-expand-toggle:focus-visible {
outline: 2px solid var(--stowly-color-primary, #006a69);
outline-offset: 2px;
} .stowly-map-expand-toggle[aria-pressed="true"],
.stowly-map-expand-toggle:active,
.stowly-map-expand-toggle:focus {
color: #111;
}
.stowly-map-expand-toggle[aria-pressed="true"] svg,
.stowly-map-expand-toggle:active svg,
.stowly-map-expand-toggle:focus svg {
stroke: #111;
}
@media (max-width: 1100px) {
.stowly-map-expand-toggle {
display: none !important;
}
} .stowly-gmap-popup-wrap {
position: absolute;
z-index: 5; font-family: var(--stowly-font);
} .stowly-gmap-popup-wrap:not(.stowly-gmap-popup-wrap--stack) {
touch-action: none;
}
.stowly-gmap-popup-inner {
position: relative;
border-radius: 16px;
overflow: hidden;
background: var(--stowly-color-surface, #fff);
border: 1px solid var(--stowly-color-line, #e8e4e0);
box-shadow:
0 16px 48px rgba(17, 17, 17, 0.12),
0 4px 14px rgba(17, 17, 17, 0.06);
} .stowly-gmap-popup__close {
position: absolute;
top: 8px;
right: 8px;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #111;
cursor: pointer;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
transition: background 120ms ease;
}
.stowly-gmap-popup__close svg {
width: 16px;
height: 16px;
}
.stowly-gmap-popup__close:hover,
.stowly-gmap-popup__close:focus,
.stowly-gmap-popup__close:focus-visible {
background: #fff;
color: #111;
}
.stowly-gmap-popup__close:focus-visible {
outline: 2px solid var(--stowly-color-primary, #006a69);
outline-offset: 2px;
}
.stowly-gmap-popup {
line-height: 1.35;
}
.stowly-gmap-popup--stack {
min-width: min(390px, calc(100vw - 28px));
}
.stowly-map-popup-stack {
margin: 0;
padding: 0;
color: var(--stowly-color-ink, #111);
}
.stowly-map-popup-stack__intro {
margin: 0;
box-sizing: border-box;
min-height: var(--stowly-stack-popup-head, 57px);
height: var(--stowly-stack-popup-head, 57px);
display: flex;
align-items: center;
padding: 0 calc(var(--stowly-stack-popup-close, 30px) + 16px) 0 14px;
font-family: var(--stowly-font-heading);
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: var(--stowly-color-ink);
border-bottom: 1px solid var(--stowly-color-line, #e8e4e0);
}
.stowly-map-popup-stack__list {
list-style: none;
margin: 0;
padding: 0;
max-height: min(32vh, 260px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
touch-action: pan-y;
}
.stowly-map-popup-stack__scroll-hint {
display: none;
margin: 0;
}
.stowly-map-popup-stack__li {
margin: 0;
border-bottom: 1px solid var(--stowly-color-line, #e8e4e0);
}
.stowly-map-popup-stack__li:last-child {
border-bottom: 0;
}
.stowly-map-popup-stack__item,
.stowly-map-popup-stack__item:visited {
display: flex;
flex-direction: row;
align-items: center;
gap: 13px;
padding: 13px 16px;
text-decoration: none !important;
color: var(--stowly-color-ink);
transition: background-color 0.12s ease;
}
.stowly-map-popup-stack__item:hover,
.stowly-map-popup-stack__item:focus-visible {
background: var(--stowly-color-surface-soft, #faf7f4);
outline: none;
}
.stowly-map-popup-stack__thumb {
flex: 0 0 68px;
width: 68px;
height: 68px;
border-radius: 10px;
overflow: hidden;
background: var(--stowly-color-surface-soft, #faf7f4);
border: 1px solid var(--stowly-color-line, #e8e4e0);
}
.stowly-map-popup-stack__thumb--empty {
background-image: linear-gradient(
145deg,
var(--stowly-color-primary-soft, #e6f2f1) 0%,
var(--stowly-color-surface-soft, #faf7f4) 100%
);
}
.stowly-map-popup-stack__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.stowly-map-popup-stack__item-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.stowly-map-popup-stack__title {
font-family: var(--stowly-font-heading);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.005em;
line-height: 1.3;
color: var(--stowly-color-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stowly-map-popup-stack__meta {
font-size: 13.5px;
color: var(--stowly-color-ink-soft, #555);
}
.stowly-map-popup-stack__price {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--stowly-color-ink);
}
.stowly-map-popup-stack__price-suffix {
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
color: var(--stowly-color-ink-soft, #555);
} .stowly-map-popup,
a.stowly-map-popup {
display: block;
width: min(280px, calc(100vw - 40px));
overflow: hidden;
border-radius: 14px;
background: var(--stowly-color-surface);
color: var(--stowly-color-ink, #111);
text-decoration: none !important;
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
will-change: transform;
}
a.stowly-map-popup:hover,
a.stowly-map-popup:focus-visible {
transform: translateY(-1px);
outline: none;
text-decoration: none !important;
color: var(--stowly-color-ink, #111);
}
.stowly-map-popup--no-image {
width: min(260px, calc(100vw - 40px));
}
.stowly-map-popup__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--stowly-color-surface-soft, #faf7f4);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.stowly-map-popup__media--placeholder {
background-image: linear-gradient(
155deg,
var(--stowly-color-primary-soft, #e6f2f1) 0%,
var(--stowly-color-surface-soft, #faf7f4) 55%,
#f2ebe4 100%
);
position: relative;
}
.stowly-map-popup__media--placeholder::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 40px;
height: 40px;
opacity: 0.35;
background: no-repeat center / contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}
.stowly-map-popup__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
a.stowly-map-popup:hover .stowly-map-popup__img,
a.stowly-map-popup:focus-visible .stowly-map-popup__img {
transform: scale(1.04);
}
.stowly-map-popup__chip {
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
box-shadow:
0 1px 2px rgba(17, 17, 17, 0.1),
0 4px 10px rgba(17, 17, 17, 0.08);
}
.stowly-map-popup__chip svg {
width: 16px;
height: 16px;
fill: var(--stowly-color-primary);
}
.stowly-map-popup__body {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 2px;
} .stowly-map-popup p,
.stowly-gmap-popup .stowly-map-popup p {
margin: 0;
}
.stowly-map-popup__title {
margin: 0;
font-family: var(--stowly-font-heading);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.3;
color: var(--stowly-color-ink, #111);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stowly-map-popup__meta {
margin: 0;
font-size: 13.5px;
font-weight: 500;
line-height: 1.25;
color: var(--stowly-color-ink-soft, #555);
}
.stowly-map-popup__footer {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
}
.stowly-map-popup__size {
font-size: 14px;
font-weight: 600;
color: var(--stowly-color-ink-soft, #555);
white-space: nowrap;
}
.stowly-map-popup__price-row {
display: inline-flex;
flex-wrap: nowrap;
align-items: baseline;
gap: 4px;
margin-left: auto;
}
.stowly-map-popup__price {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--stowly-color-ink, #111);
font-variant-numeric: tabular-nums;
}
.stowly-map-popup__suffix {
font-size: 13px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--stowly-color-ink-soft, #555);
}
.stowly-map-popup__cta {
display: none;
margin-top: 6px;
align-items: center;
justify-content: center;
gap: 5px;
align-self: flex-start;
padding: 6px 11px 6px 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none !important;
color: #fff !important;
background: var(--stowly-gradient-primary);
box-shadow: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.24);
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.stowly-map-popup__cta svg {
width: 12px;
height: 12px;
transition: transform 0.15s ease;
}
a.stowly-map-popup:hover .stowly-map-popup__cta,
a.stowly-map-popup:focus-visible .stowly-map-popup__cta {
box-shadow: 0 6px 16px rgba(var(--stowly-color-primary-rgb), 0.32);
}
a.stowly-map-popup:hover .stowly-map-popup__cta svg,
a.stowly-map-popup:focus-visible .stowly-map-popup__cta svg {
transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
.stowly-map-popup,
a.stowly-map-popup,
.stowly-map-popup__img,
.stowly-map-popup__cta,
.stowly-map-popup__cta svg {
transition: none !important;
transform: none !important;
}
}
@media (max-width: 380px) {
.stowly-map-popup,
a.stowly-map-popup {
width: min(312px, calc(100vw - 32px));
}
} .stowly-map .gm-style {
font-family: inherit;
} .stowly-filter-overlay {
position: fixed;
inset: 0;
z-index: 25;
background: transparent;
cursor: default;
display: none;
}
.stowly-filter-overlay.is-active {
display: block;
} .stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
background: rgba(0, 0, 0, 0.45) !important;
transition: background 0.35s ease;
}
@media (min-width: 769px) {
.stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
z-index: 40 !important;
}
}
@media (max-width: 768px) {
body.stowly-search-overlay-active .stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
z-index: 2100 !important;
}
} .stowly-header-search {
display: flex;
align-items: center;
gap: 0;
padding: 3px;
border: 1px solid var(--stowly-color-line-strong);
border-radius: 999px;
background: var(--stowly-color-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: box-shadow var(--stowly-transition);
width: 100%;
max-width: 780px;
min-width: 0;
flex: 1 1 auto;
justify-content: stretch;
margin: 0 auto;
box-sizing: border-box;
overscroll-behavior: contain;
}
.stowly-header-search:hover,
.stowly-header-search:focus-within {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.stowly-header-search__chev {
display: none !important;
}
.stowly-header-search__segment {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 8px 18px 8px 18px;
min-width: 0;
min-height: 40px;
flex: 1 1 0;
border-radius: 999px;
cursor: pointer;
transition: background var(--stowly-transition);
}
.stowly-header-search__segment:hover:not(.is-open):not(.is-where-active),
.stowly-header-search:not(.is-search-expanded) .stowly-header-search__segment.is-open {
background: var(--stowly-color-surface-soft);
}
form.stowly-header-search.is-search-expanded:not(.has-tab-slider) .stowly-header-search__segment.is-open,
form.stowly-header-search.is-search-expanded:not(.has-tab-slider) .stowly-header-search__segment--where-inline.is-where-active {
background: var(--stowly-color-surface) !important;
}
.stowly-header-search__label {
font-size: 11px;
font-weight: 700;
color: var(--stowly-color-ink);
line-height: 1.1;
letter-spacing: 0;
pointer-events: none;
} .stowly-header-search__toggle {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: inherit;
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-width: 0;
min-height: 0 !important;
font-size: 13px;
font-weight: 400;
line-height: 1.2;
color: var(--stowly-color-ink);
cursor: pointer;
text-align: left;
outline: none !important;
filter: none !important;
}
.stowly-header-search__toggle:hover,
.stowly-header-search__toggle:focus,
.stowly-header-search__toggle:focus-visible,
.stowly-header-search__toggle:active {
background: transparent !important;
color: var(--stowly-color-ink) !important;
box-shadow: none !important;
outline: none !important;
border: 0 !important;
filter: none !important;
}
.stowly-header-search__value {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--stowly-color-ink);
}
.stowly-header-search__value.is-placeholder {
color: var(--stowly-color-ink-soft);
}
.stowly-header-search__segment.is-open,
.stowly-header-search__segment--where-inline:focus-within,
.stowly-header-search__segment--where-inline.is-where-active {
padding-right: 30px;
}
.stowly-header-search__divider {
width: 1px;
height: 22px;
background: var(--stowly-color-line);
flex: 0 0 1px;
align-self: center;
} .stowly-header-search__menu {
display: none;
position: absolute;
top: calc(100% + 12px);
left: 0;
z-index: 50;
min-width: 100%;
width: max-content;
max-width: min(360px, 90vw);
max-height: 320px;
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px;
background: var(--stowly-color-surface);
border: 1px solid var(--stowly-color-line);
border-radius: var(--stowly-radius-lg);
box-shadow: var(--stowly-shadow-lg);
}
.stowly-header-search__menu--right {
left: auto;
right: 0;
}
.stowly-header-search__segment.is-open .stowly-header-search__menu {
display: block;
animation: stowlyFlyoutFade 160ms ease-out;
} @media (min-width: 769px) {
body.stowly-archive-layout .stowly-site-header .stowly-header-search .stowly-header-search__segment.is-open > .stowly-header-search__menu {
position: fixed !important;
left: var(--stowly-header-dropdown-left, auto) !important;
right: auto !important;
top: var(--stowly-header-dropdown-top, auto) !important;
width: var(--stowly-header-dropdown-width, auto) !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box;
z-index: 60;
max-height: min(560px, calc(100vh - 120px));
animation: none !important;
transform: none !important;
padding-top: 4px;
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search .stowly-header-search__segment.is-open > .stowly-header-search__menu.stowly-header-search__menu--right {
left: var(--stowly-header-dropdown-left, auto) !important;
right: auto !important;
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded .stowly-header-search__inline-suggestions:not([hidden]) {
position: fixed !important;
left: var(--stowly-header-dropdown-left, auto) !important;
right: auto !important;
top: var(--stowly-header-dropdown-top, auto) !important;
width: var(--stowly-header-dropdown-width, auto) !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box;
z-index: 60;
animation: none !important;
transform: none !important;
}
} @media (min-width: 769px) {
body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded {
border-radius: 999px !important;
}
body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded .stowly-header-search__inline-suggestions:not([hidden]),
body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded .stowly-header-search__segment.is-open > .stowly-header-search__menu {
border-top: 1px solid var(--stowly-color-line) !important;
border-radius: var(--stowly-radius-lg) !important;
}
}
.stowly-header-search__menu-footer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 8px;
padding-top: 12px;
box-sizing: border-box;
border-top: 1px solid var(--stowly-color-line);
}
.stowly-header-search__option {
appearance: none !important;
-webkit-appearance: none !important;
display: block;
width: 100%;
padding: 10px 12px;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: var(--stowly-radius-md) !important;
box-shadow: none !important;
text-align: left;
font-size: 14px;
line-height: 1.3;
color: var(--stowly-color-ink);
cursor: pointer;
transition: background-color 120ms ease;
min-height: 0 !important;
outline: none !important;
filter: none !important;
}
.stowly-header-search__option + .stowly-header-search__option {
margin-top: 2px;
}
.stowly-header-search__option:hover,
.stowly-header-search__option:focus-visible {
background: var(--stowly-color-surface-soft) !important;
color: var(--stowly-color-ink) !important;
}
.stowly-header-search__option.is-selected {
background: var(--stowly-color-primary-soft) !important;
color: var(--stowly-color-primary) !important;
font-weight: 600;
}
.stowly-header-search__option.is-selected:hover,
.stowly-header-search__option.is-selected:focus-visible {
background: var(--stowly-color-primary-soft) !important;
color: var(--stowly-color-primary) !important;
}
label.stowly-header-search__option {
display: flex;
align-items: center;
gap: 10px;
}
label.stowly-header-search__option input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
flex: 0 0 16px;
accent-color: var(--stowly-color-primary);
}
label.stowly-header-search__option span {
line-height: 1.3;
} .stowly-header-search__submit {
appearance: none !important;
-webkit-appearance: none !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 2px 0 4px;
border: 0;
border-radius: 999px !important;
aspect-ratio: auto;
background: var(--stowly-color-primary);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 0 0 auto;
line-height: 1;
font-family: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
transition: background-color var(--stowly-transition), box-shadow var(--stowly-transition), transform var(--stowly-transition);
box-shadow: 0 2px 8px rgba(var(--stowly-color-primary-rgb), 0.28);
}
.stowly-header-search__submit:hover,
.stowly-header-search__submit:focus {
background: var(--stowly-color-primary-hover);
color: #fff;
box-shadow: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.35);
}
.stowly-header-search__submit:focus-visible {
outline: 2px solid var(--stowly-color-primary);
outline-offset: 2px;
}
.stowly-header-search__submit-icon {
display: block;
flex-shrink: 0;
}
.stowly-header-search__submit svg {
stroke: currentColor;
}
.stowly-header-search__submit-text {
white-space: nowrap;
} body.stowly-archive-layout .stowly-site-header__inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "brand search right";
align-items: center;
}
body.stowly-archive-layout .stowly-site-brand {
grid-area: brand;
align-self: center;
display: inline-flex;
align-items: center;
min-height: 44px;
}
body.stowly-archive-layout .stowly-site-brand__logo {
height: 34px;
max-width: 170px;
}
body.stowly-archive-layout .stowly-archive-header-toolbar {
grid-area: search;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
width: 100%;
}
body.stowly-archive-layout .stowly-header-search {
grid-area: unset;
width: 100%;
}
body.stowly-archive-layout .stowly-site-header__right {
grid-area: right;
justify-self: end;
align-self: center;
} body.stowly-archive-layout .stowly-site-header__inner > .stowly-site-nav {
display: none !important;
} .stowly-map-toggle {
display: none;
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 45;
padding: 12px 22px;
gap: 8px;
align-items: center;
border: 0;
border-radius: 999px;
background: #111;
color: #fff;
font-family: inherit;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
transition: transform var(--stowly-transition), box-shadow var(--stowly-transition);
}
.stowly-map-toggle:hover,
.stowly-map-toggle:focus {
background: #111;
color: #fff;
transform: translateX(-50%) translateY(-1px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.stowly-map-toggle svg {
stroke: currentColor;
} .stowly-map-toggle .stowly-map-toggle__icon--close {
display: none;
}
.stowly-map-toggle.is-open .stowly-map-toggle__icon--map {
display: none;
}
.stowly-map-toggle.is-open .stowly-map-toggle__icon--close {
display: inline-block;
}
.stowly-map-toggle.is-hidden {
display: none !important;
} @media (max-width: 1100px) {
.stowly-results-layout,
body.stowly-archive-layout .stowly-results-layout {
grid-template-columns: 1fr;
}
.stowly-map-aside {
position: fixed;
inset: var(--stowly-header-height) 0 0 0;
top: var(--stowly-header-height);
height: calc(100vh - var(--stowly-header-height));
min-height: 0;
z-index: 90;
background: var(--stowly-color-surface);
transform: translateY(100%);
transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
pointer-events: none;
}
.stowly-map-aside.is-open {
transform: translateY(0);
pointer-events: auto;
}
body.stowly-archive-layout .stowly-map {
border: 0;
border-radius: 0;
} .stowly-map-aside__close {
display: none !important;
}
body.stowly-archive-layout .stowly-map-toggle {
display: inline-flex;
z-index: 1001;
}
}
@media (max-width: 980px) {
.stowly-search-toolbar {
grid-template-columns: 1fr;
border-radius: var(--stowly-radius-lg);
padding: 12px;
gap: 10px;
margin-top: 8px;
}
.stowly-toolbar-address,
.stowly-toolbar-what {
padding: 10px 14px;
background: var(--stowly-color-surface-soft);
}
.stowly-toolbar-address,
.stowly-toolbar-what {
flex-wrap: wrap;
}
.stowly-toolbar-label {
position: static;
display: block;
width: 100%;
margin-bottom: 2px;
}
.stowly-toolbar-address + .stowly-toolbar-what::before {
display: none;
}
.stowly-toolbar-submit {
justify-self: stretch;
width: 100%;
min-height: 48px;
border-radius: var(--stowly-radius-sm);
justify-content: center;
}
.stowly-type-selector-panel {
left: 0;
right: 0;
width: 100%;
}
.stowly-filter-panel {
position: static;
width: 100%;
box-shadow: none;
margin-top: 8px;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) {
grid-template-columns: 1fr;
gap: 10px;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image {
width: 195px;
aspect-ratio: 3 / 2;
}
body.stowly-archive-layout .stowly-listing-card--skeleton .stowly-skeleton-img {
flex: 0 0 195px;
width: 195px;
}
}
@media (max-width: 640px) {
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card,
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link {
flex-wrap: wrap;
}
}
@media (max-width: 640px) {
.stowly-archive__inner {
padding: 16px 16px 48px;
}
.stowly-archive-header__title {
font-size: 20px;
}
.stowly-filter-tabs {
gap: 6px;
}
.stowly-filter-tab {
padding: 8px 12px;
font-size: 13px;
}
} @media (max-width: 768px) { body.stowly-archive-layout .stowly-site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"brand . right"
"search search search";
gap: 10px 8px;
padding: 12px 16px;
align-items: center;
}
body.stowly-archive-layout .stowly-site-brand,
body.stowly-archive-layout .stowly-site-header__right,
body.stowly-archive-layout .stowly-archive-header-toolbar {
margin-top: 0;
} body.stowly-archive-layout .stowly-site-header {
top: calc(8px - var(--stowly-header-top-height, 56px));
}
body.stowly-archive-layout .stowly-site-brand {
grid-area: brand;
justify-self: start;
}
body.stowly-archive-layout .stowly-site-header__right {
grid-area: right;
justify-self: end;
}
body.stowly-archive-layout .stowly-header-search {
grid-area: search;
width: 100%;
max-width: none;
margin: 0;
} body.stowly-archive-layout .stowly-header-search__segment {
padding: 4px 30px 4px 14px;
min-height: 44px;
}
body.stowly-archive-layout .stowly-header-search__submit {
flex: 0 0 auto;
} body.stowly-archive-layout .stowly-archive__inner {
padding-left: 0 !important;
padding-right: 0 !important;
} body.stowly-archive-layout main.stowly-archive {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.stowly-archive-layout .stowly-results-layout {
padding-left: 16px;
padding-right: 16px;
} body.stowly-archive-layout .stowly-filters-header-row {
padding: 8px 16px;
} body.stowly-archive-layout .stowly-archive-header {
align-items: center;
flex-wrap: nowrap;
gap: 8px;
padding: 4px 8px 6px;
margin-bottom: 8px;
}
body.stowly-archive-layout .stowly-archive-results-intro {
margin: 0;
}
body.stowly-archive-layout .stowly-archive-results-intro__main {
gap: 0;
} body.stowly-archive-layout .stowly-archive-results-intro .stowly-breadcrumbs {
display: none;
}
body.stowly-archive-layout .stowly-archive-results-intro .stowly-archive-header {
margin-bottom: 8px;
}
body.stowly-archive-layout .stowly-archive-header__text {
flex: 1 1 auto;
min-width: 0;
}
body.stowly-archive-layout .stowly-archive-header__count {
font-size: 13px;
line-height: 1.25;
}
body.stowly-archive-layout .stowly-archive-header__actions {
flex: 0 0 auto;
gap: 6px;
flex-wrap: nowrap;
}
body.stowly-archive-layout .stowly-reset-link {
font-size: 12px;
font-weight: 500;
white-space: nowrap;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
body.stowly-archive-layout .stowly-save-search[data-stowly-save-search] {
padding: 5px 9px;
min-height: 30px;
font-size: 12px;
font-weight: 500;
gap: 4px;
box-shadow: none;
}
body.stowly-archive-layout .stowly-save-search[data-stowly-save-search] svg {
width: 13px;
height: 13px;
}
body.stowly-archive-layout .stowly-save-search [data-stowly-save-search-label] {
display: none;
}
body.stowly-archive-layout .stowly-save-search .stowly-save-search__label-short {
display: inline;
}  body.stowly-archive-layout {
--stowly-archive-card-h: auto;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 0 8px;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card,
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-article-post,
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-grid-common-col,
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-full-width {
flex-direction: column !important;
align-items: stretch !important;
border-radius: var(--stowly-radius-lg) !important;
width: 100%;
max-width: none;
padding: 10px !important;
padding-right: 10px !important;
gap: 10px !important;
} body.stowly-archive-layout .stowly-listing-card--skeleton {
flex-direction: column !important;
padding: 10px !important;
gap: 10px !important;
}
body.stowly-archive-layout .stowly-listing-card--skeleton .stowly-skeleton-img {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 10;
height: auto;
border-radius: var(--stowly-radius-md);
}
body.stowly-archive-layout .stowly-listing-card--skeleton .stowly-skeleton-body {
padding: 0;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link {
width: 100%;
gap: 10px;
padding: 0;
flex-direction: column;
align-items: stretch;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 10;
border-radius: var(--stowly-radius-md);
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__title,
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body h2,
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body h3 {
font-size: 15px;
-webkit-line-clamp: 2;
line-clamp: 2;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__meta {
font-size: 12.5px;
}
body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body { padding-right: 0;
gap: 4px;
} body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__book {
position: static !important;
align-self: flex-end;
padding: 8px 16px;
font-size: 13px;
margin-top: 4px;
} body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn {
top: 18px;
right: 18px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
} .stowly-map-aside {
inset: 0 !important;
top: 0 !important;
height: 100vh !important;
height: 100dvh !important;
z-index: 1000 !important;
} .stowly-map-zoom {
display: none !important;
} .stowly-map-aside__close {
display: none !important;
} body.stowly-map-open {
overflow: hidden;
} body.stowly-archive-layout .stowly-map-toggle {
display: inline-flex !important;
bottom: max(20px, env(safe-area-inset-bottom));
z-index: 1001;
}
body.stowly-archive-layout .stowly-map-toggle.is-hidden {
display: none !important;
} body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock {
z-index: 1010 !important;
pointer-events: auto;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-gmap-popup-inner {
border-radius: 12px;
box-shadow: 0 4px 20px rgb(17 17 17 / 14%);
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-gmap-popup__close {
top: 6px;
right: 6px;
width: 32px;
height: 32px;
background: rgb(255 255 255 / 96%);
box-shadow: 0 1px 6px rgb(17 17 17 / 16%);
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-gmap-popup__close svg {
width: 18px;
height: 18px;
} body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup,
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) a.stowly-map-popup {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
max-width: none;
min-height: 5.85rem;
border-radius: 12px;
transform: none !important;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__media {
flex: 0 0 5.85rem;
width: 5.85rem;
aspect-ratio: 1;
border-bottom: 0;
border-right: 1px solid var(--stowly-color-line, #e8e4e0);
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 0.8125rem 2.75rem 0.8125rem 0.975rem;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__title {
font-size: 15px;
line-height: 1.3;
-webkit-line-clamp: 2;
line-clamp: 2;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__meta {
font-size: 12.5px;
margin: 0;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__footer {
margin: 0;
padding: 0;
border: 0;
gap: 0.65rem;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__price {
font-size: 18px;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__suffix {
font-size: 13px;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__chip {
top: 5px;
right: 5px;
width: 1.75rem;
height: 1.75rem;
} body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock.stowly-gmap-popup-wrap--stack .stowly-gmap-popup--stack {
min-width: 0;
width: 100%;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__intro {
min-height: 3.25rem;
height: auto;
padding: 0.8125rem 3rem 0.5rem 0.975rem;
font-size: 15px;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__scroll-hint {
display: block;
margin: 0;
padding: 0 0.975rem 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--stowly-color-ink-soft, #64748b);
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__list {
max-height: min(36vh, 286px);
position: relative;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
overscroll-behavior: contain;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__list.is-scrollable {
padding-bottom: 0.25rem;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.25rem), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.25rem), transparent 100%);
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__list.is-scrollable::after {
content: "";
position: sticky;
bottom: 0;
display: block;
height: 1.25rem;
margin-top: -1.25rem;
pointer-events: none;
background: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(255 255 255 / 92%));
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__item {
padding: 0.8125rem 0.975rem;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__thumb {
width: 3.575rem;
height: 3.575rem;
flex: 0 0 3.575rem;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__title {
font-size: 15px;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__meta {
font-size: 12.5px;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__price {
font-size: 18px;
}
body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__price-suffix {
font-size: 13px;
} body.stowly-archive-layout .stowly-results-main {
padding-left: 0 !important;
padding-right: 0 !important;
} body.stowly-filter-open {
overflow: hidden;
} html:has(body.stowly-archive-scroll-lock),
html.stowly-archive-scroll-lock,
body.stowly-archive-scroll-lock {
overflow: hidden !important;
overscroll-behavior: none;
}
html.stowly-archive-scroll-lock {
padding-inline-end: var(--stowly-scrollbar-gap, 0);
box-sizing: border-box;
}
body.stowly-archive-layout form.stowly-filters {
overscroll-behavior: contain;
}
body.stowly-filter-open.stowly-archive-layout .stowly-filters { z-index: 2600 !important;
} body.stowly-archive-layout:not(.stowly-filter-open) .stowly-filter-overlay.is-active {
z-index: 24 !important;
background: transparent !important;
}
body.stowly-archive-layout:not(.stowly-filter-open) .stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
background: rgba(0, 0, 0, 0.45) !important;
}
body.stowly-archive-layout.stowly-filter-open .stowly-filter-overlay.is-active {
background: transparent !important;
z-index: 1500 !important;
} body.stowly-filter-open.stowly-archive-layout .stowly-map-toggle {
display: none !important;
} body.stowly-archive-layout .stowly-filter-panels {
position: static;
} body.stowly-archive-layout .stowly-filter-panel {
position: fixed !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: none !important;
max-height: min(
96dvh,
calc(
100dvh - var(--stowly-archive-sticky-sheet-top-inset, 148px) - env(safe-area-inset-bottom, 0px) - 8px
)
) !important; min-height: 0 !important;
display: flex !important;
flex-direction: column;
align-items: stretch;
overflow: hidden;
overflow-x: hidden;
overscroll-behavior: contain;
margin: 0 !important;
padding-top: max(42px, calc(env(safe-area-inset-top, 0px) + 28px));
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
border: 0 !important;
border-radius: var(--stowly-radius-lg) var(--stowly-radius-lg) 0 0 !important;
box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, 0.18) !important;
background: var(--stowly-color-surface);
z-index: 10;
transform: translateY(100%);
transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
visibility: hidden;
animation: none !important;
}
body.stowly-archive-layout .stowly-filter-panel__scroll {
flex: 1 1 0%;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scroll-padding-top: 10px;
scroll-padding-bottom: 24px;
padding: 10px 16px 28px;
}
body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-price"] .stowly-filter-panel__scroll,
body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
padding: 8px 12px 24px;
} body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
min-height: clamp(260px, 54dvh, 520px);
} body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-location-type"] .stowly-filter-panel__scroll,
body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-security"] .stowly-filter-panel__scroll,
body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-provider"] .stowly-filter-panel__scroll {
min-height: clamp(180px, 38dvh, 480px);
} body.stowly-archive-layout .stowly-filter-panel::before {
content: "";
position: absolute;
top: 14px;
left: 50%;
width: 40px;
height: 4px;
border-radius: 999px;
background: #d9d9d9;
transform: translateX(-50%);
pointer-events: none;
}
body.stowly-archive-layout .stowly-filter-panel.is-active {
transform: translateY(0);
visibility: visible;
}
body.stowly-archive-layout .stowly-filter-panel.is-active.stowly-sheet-exit {
transform: translateY(100%);
visibility: visible;
transition: transform 0.32s cubic-bezier(0.36, 0, 0.2, 1);
} body.stowly-archive-layout .stowly-filter-panel__footer {
display: flex;
justify-content: stretch;
gap: 12px;
position: relative;
flex: 0 0 auto;
flex-shrink: 0;
margin: 0;
padding: 20px 16px calc(26px + max(env(safe-area-inset-bottom), 14px));
background: var(--stowly-color-surface);
border-top: 1px solid var(--stowly-color-line);
box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.18);
z-index: 1;
}
body.stowly-archive-layout .stowly-filter-panel__apply {
flex: 1 1 auto;
min-height: 48px;
} .stowly-header-search__menu {
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: none !important;
} body.stowly-archive-layout .stowly-header-search__segment > .stowly-header-search__menu,
.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment > .stowly-header-search__menu,
body > .stowly-header-search__menu[data-stowly-front-what-portal] {
display: flex !important;
flex-direction: column;
align-items: stretch;
position: fixed !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: none !important;
max-height: min(
96dvh,
calc(
100dvh - var(--stowly-archive-sticky-sheet-top-inset, 148px) - env(safe-area-inset-bottom, 0px) - 8px
)
) !important;
min-height: 0 !important;
margin: 0 !important;
padding:
max(38px, calc(env(safe-area-inset-top, 0px) + 24px))
16px
0
16px;
border: 0 !important;
border-radius: var(--stowly-radius-lg) var(--stowly-radius-lg) 0 0 !important;
box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, 0.18) !important;
background: var(--stowly-color-surface);
z-index: 2200 !important;
visibility: hidden;
transform: translateY(100%);
transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 260ms;
animation: none !important;
overflow-x: hidden;
overflow-y: hidden;
overscroll-behavior: contain;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
body.stowly-archive-layout .stowly-header-search__segment > .stowly-header-search__menu > .stowly-header-search__menu-scroll,
.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment > .stowly-header-search__menu > .stowly-header-search__menu-scroll,
body > .stowly-header-search__menu[data-stowly-front-what-portal] > .stowly-header-search__menu-scroll {
flex: 0 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
scroll-padding-bottom: 20px;
} body.stowly-archive-layout .stowly-header-search__segment--where-inline {
position: relative;
} body.stowly-archive-layout .stowly-header-search .stowly-location-search__suggestion {
min-height: 44px;
padding-top: 12px;
padding-bottom: 12px;
}
body.stowly-archive-layout .stowly-header-search__segment.is-open > .stowly-header-search__menu,
.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment.is-open > .stowly-header-search__menu,
body > .stowly-header-search__menu[data-stowly-front-what-sheet-open] {
visibility: visible;
transform: translateY(0);
transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}
body.stowly-archive-layout .stowly-header-search__segment.is-open > .stowly-header-search__menu.stowly-sheet-exit,
.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment.is-open > .stowly-header-search__menu.stowly-sheet-exit,
body > .stowly-header-search__menu[data-stowly-front-what-sheet-open].stowly-sheet-exit {
transform: translateY(100%);
} body.stowly-archive-layout .stowly-header-search__segment > .stowly-header-search__menu::before,
.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment > .stowly-header-search__menu::before,
body > .stowly-header-search__menu[data-stowly-front-what-portal]::before {
content: "";
position: absolute;
top: 14px;
left: 50%;
width: 40px;
height: 4px;
border-radius: 999px;
background: #d9d9d9;
transform: translateX(-50%);
pointer-events: none;
z-index: 1;
}
body.stowly-archive-layout .stowly-header-search__menu-footer,
.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__menu-footer,
body > .stowly-header-search__menu[data-stowly-front-what-portal] .stowly-header-search__menu-footer {
display: flex;
justify-content: center;
position: relative;
flex-shrink: 0;
margin: 0 !important;
margin-top: 8px;
padding: 20px 0 calc(22px + max(env(safe-area-inset-bottom), 14px)) !important;
border-top: 1px solid var(--stowly-color-line);
background: var(--stowly-color-surface);
z-index: 2;
}
body.stowly-archive-layout .stowly-site-header {
position: sticky;
z-index: 2300 !important;
box-shadow: 0 1px 0 var(--stowly-color-line);
} body.stowly-archive-layout .stowly-filters,
body.stowly-archive-layout .stowly-listing-filters {
max-width: 100%;
overflow-x: clip;
} body.stowly-archive-layout .stowly-filters {
border-bottom: 0 !important;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0 0 12px !important;
background: var(--stowly-color-surface); top: calc(8px + var(--stowly-header-search-height, var(--stowly-header-height))) !important;
box-sizing: border-box;
}
body.stowly-filter-open.stowly-archive-layout .stowly-filters {
background: transparent !important;
}
body.stowly-archive-layout .stowly-filters-header-row {
flex-wrap: nowrap !important;
min-width: 0;
max-width: none;
width: 100%;
padding: 8px 16px !important;
margin: 0 !important;
background: var(--stowly-color-surface);
border: 0;
border-bottom: 1px solid var(--stowly-color-line);
border-radius: 0;
box-shadow: none;
}
body.stowly-archive-layout .stowly-filter-actions {
flex: 0 0 auto;
padding-left: 8px;
} body.stowly-archive-layout .stowly-filter-tabs {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
max-width: 100%;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
-webkit-mask-image: linear-gradient(
to right,
#000 0,
#000 calc(100% - 28px),
transparent 100%
);
mask-image: linear-gradient(
to right,
#000 0,
#000 calc(100% - 28px),
transparent 100%
);
}
body.stowly-archive-layout .stowly-filter-tabs::-webkit-scrollbar {
display: none;
}
.stowly-filter-tab,
.stowly-filter-toggle,
.stowly-filter-divider {
flex: 0 0 auto;
white-space: nowrap;
}
} .stowly-save-search[data-stowly-save-search] {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.stowly-save-search__label-short {
display: none;
} .stowly-toast {
position: fixed;
left: 50%;
bottom: 32px;
transform: translateX(-50%) translateY(20px);
padding: 12px 18px;
border-radius: 999px;
background: var(--stowly-color-ink, #1b1b1b);
color: #fff;
font-size: 14px;
font-weight: 500;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: stowlyToastIn 200ms ease-out forwards;
z-index: 10000;
}
.stowly-toast--success { background: #1f8a70; }
.stowly-toast--error { background: #dc2626; }
.stowly-toast.is-leaving {
animation: stowlyToastOut 380ms ease-in forwards;
}
@keyframes stowlyToastIn {
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes stowlyToastOut {
to { opacity: 0; transform: translateX(-50%) translateY(12px); }
} .stowly-load-more {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 28px auto 8px;
padding: 8px 0 0;
}
.stowly-load-more[hidden] {
display: none;
}
.stowly-load-more__status {
margin: 0;
font-size: 13px;
color: var(--stowly-color-ink-soft, #555);
text-align: center;
}
.stowly-load-more__btn {
min-width: 220px;
background-color: var(--stowly-color-surface);
background-image: none;
border-width: 1.5px;
border-style: solid;
border-color: var(--stowly-color-line-strong, #cfd4dc);
box-shadow: none;
}
.stowly-load-more__btn:hover,
.stowly-load-more__btn:focus-visible {
background-color: var(--stowly-color-surface-soft, #f4f1ed);
background-image: none;
border-color: var(--stowly-color-ink-muted, #6b7280);
}
.stowly-load-more__btn[aria-busy="true"] {
opacity: 0.6;
cursor: progress;
}
@media (min-width: 901px) {
.stowly-load-more {
width: 100%;
max-width: var(--stowly-floating-ribbon-width);
gap: 14px;
margin-top: 36px;
margin-bottom: 12px;
}
.stowly-load-more__status {
font-size: 15px;
}
.stowly-load-more__btn {
width: 100%;
min-width: 0;
padding-top: 14px;
padding-bottom: 14px;
font-size: 16px;
}
}
@media (min-width: 1600px) {
.stowly-load-more {
max-width: min(1760px, calc(100vw - 48px));
}
}