/* Home resort collection: quiet surfaces, compact metadata and aligned actions. */
#stays { background: #fffdf9; }
#stays .st-filter-row { display: flex; justify-content: center; margin-bottom: 24px; }
#stays .st-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border: 1px solid #e5ddcf; border-radius: 28px; background: #f5f1e9; }
#stays .st-tab { min-height: 44px; padding: 10px 23px; border-radius: 22px; color: #6a594b; font-weight: 500; transition: background .2s, color .2s; }
#stays .st-tab:hover { background: #e8e0d3; }
#stays .st-tab.is-on { color: #fff8ec; background: #3b3028; }
#stays .st-count { font-size: 12px !important; color: #817568; margin: 0 0 16px; letter-spacing: .02em; }
#stays .st-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
#stays .st-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e9e2d7; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 7px 20px #35291c06; transition: transform .25s, box-shadow .25s, border-color .25s; }
#stays .st-card:hover { transform: translateY(-4px); border-color: #cdbb9f; box-shadow: 0 16px 30px #35291c12; }
#stays .st-card:focus-visible, #stays .st-tab:focus-visible { outline: 3px solid #a57131; outline-offset: 4px; }
#stays .st-photo { display: block; aspect-ratio: 16/10; overflow: hidden; background: #ede9df; }
#stays .st-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
#stays .st-card:hover img { transform: scale(1.035); }
#stays .st-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
#stays .st-location { display: flex; align-items: baseline; gap: 7px; color: #92713e; font-size: 11px !important; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
#stays .st-card h3 { margin: 10px 0 8px; font-size: 24px !important; line-height: 1.3 !important; text-wrap: pretty; }
#stays .st-card p { margin: 0 0 24px; color: #726b62; }
#stays .st-card-action { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid #eee8df; margin-top: auto; font-size: 13px !important; color: #4a3a2f; font-weight: 600; }
#stays .st-card-action i { font-size: 12px; transition: transform .25s; }
#stays .st-card:hover .st-card-action i { transform: translateX(3px); }
#stays .st-card[hidden] { display: none; }
@media (max-width: 1023px) { #stays .st-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; } }
@media (max-width: 599px) { #stays .st-grid { grid-template-columns: 1fr; gap: 24px; } #stays .st-tabs { width: 100%; border-radius: 16px; gap: 4px; } #stays .st-tab { padding: 10px 14px; } #stays .st-card h3 { min-height: 0; } #stays .st-card-body { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { #stays .st-card, #stays .st-photo img, #stays .st-card-action i { transition: none; } #stays .st-card:hover, #stays .st-card:hover img { transform: none; } }

/* Filter tabs: one clean underline row — scrolls sideways on small screens, centred when it fits */
#stays .st-filter-row { display: block; margin-bottom: 14px; border-bottom: 1px solid #e5ddcf; }
#stays .st-tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: clamp(18px, 3vw, 40px); padding: 0; border: 0; border-radius: 0; background: none; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
#stays .st-tabs::-webkit-scrollbar { display: none; }
#stays .st-tab:first-child { margin-left: auto; }
#stays .st-tab:last-child { margin-right: auto; }
#stays .st-tab { position: relative; flex: none; min-height: 48px; padding: 12px 2px; border-radius: 0; background: none; color: #85796a; font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; scroll-snap-align: center; }
#stays .st-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #bc8c3f; transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
#stays .st-tab:hover { background: none; color: #312b24; }
#stays .st-tab.is-on { background: none; color: #312b24; }
#stays .st-tab.is-on::after, #stays .st-tab:hover::after { transform: scaleX(1); }
#stays .st-count { text-align: center; margin-bottom: 18px; }
@media (max-width: 599px) { #stays .st-tabs { width: auto; border-radius: 0; gap: 22px; padding: 0 2px; } #stays .st-tab { padding: 12px 2px; } #stays .st-tab:first-child { margin-left: 0; } #stays .st-tab:last-child { margin-right: 0; } }
@media (max-width: 599px) { #stays .st-tabs { gap: 16px; } #stays .st-tab { font-size: 11px !important; letter-spacing: .08em; } }

/* Card footer: "View details" link and a "Book Now" button that opens the booking form */
#stays .st-card h3 a:hover { color: #a57131; }
#stays .st-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid #eee8df; }
#stays .st-details { font-size: 14px !important; font-weight: 600; color: #3b3028; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
#stays .st-details:hover { color: #a57131; border-bottom-color: currentColor; }
#stays .st-book { text-transform: none !important; letter-spacing: 0 !important; display: inline-flex; align-items: center; min-height: 36px; padding: 7px 16px; border-radius: 999px; background: #3b3028; color: #fff8ec; font-size: 13px !important; font-weight: 600; box-shadow: 0 8px 16px -12px rgba(59,48,40,.8); transition: background .2s, transform .2s; }
#stays .st-book:hover { background: #a57131; transform: translateY(-1px); }
#stays .st-details:focus-visible, #stays .st-book:focus-visible, #stays .st-card h3 a:focus-visible { outline: 3px solid #a57131; outline-offset: 3px; }
