/* IslandOrder homepage-only UI styles — Stage 1 Release B (2026-11-01)
 * Loaded only on index.php marketplace homepage, AFTER the shared storefront CSS.
 * Keep this file focused on business listings, nearby results, filters and discovery.
 * Storefront product, hero, cart and gallery styles belong to their own existing files.
 * Preserves existing approved 2 / 3 / 4 column layout.
 */
/* Modern homepage cards, filters and listing sections */
.marketplace-categories{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 24px}
.marketplace-categories .market-category{display:inline-flex;align-items:center;gap:7px;border:1px solid #dce8df;background:#fff;border-radius:999px;padding:9px 13px;color:#345440;font-size:12px;font-weight:850;text-decoration:none;box-shadow:0 2px 6px rgba(17,62,34,.025);transition:all .16s ease}
.marketplace-categories .market-category:hover{border-color:#a9d3b5;transform:translateY(-1px)}
.marketplace-categories .market-category.active{background:var(--io-deep);color:#fff;border-color:var(--io-deep)}
.store-card{display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;border:1px solid #e0e9e2;background:#fff;box-shadow:0 7px 24px rgba(18,59,38,.055);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;min-width:0}
.store-card:hover{transform:translateY(-4px);box-shadow:0 15px 36px rgba(18,59,38,.11);border-color:#bfd9c5}
.store-cover{height:auto;aspect-ratio:1.62/1;min-height:150px;position:relative;background:linear-gradient(135deg,#edf7ef,#d6e9d9);overflow:hidden}
.store-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.store-card:hover .store-cover img{transform:scale(1.035)}
.store-info{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:16px}
.store-card-topline{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.store-card-topline .pill{max-width:100%;background:#edf7ef;color:#23633a;border:1px solid #dceee0;font-size:10px;font-weight:850}
.store-info h3{font-size:17px;line-height:1.25;letter-spacing:-.025em;color:#153b27;margin:0!important;overflow-wrap:anywhere}
.store-info p{font-size:12px;line-height:1.55;color:#617267;min-height:0;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.store-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:9px;flex-wrap:wrap;color:#66766b;font-size:11px}
.store-meta strong{color:#176534;font-weight:900;white-space:nowrap}
.starting-price{color:#66756a;font-size:10px}.starting-price strong{color:#176534;font-size:12px}
.popular-section,.category-section-head,.listing-grid{scroll-margin-top:22px}
.category-section-head{margin-top:26px}
.io-map-panel,.io-nearby-results{border-radius:22px;border:1px solid #dfe9e2;box-shadow:var(--io-card-shadow);overflow:hidden}

/* Legacy homepage-only small-screen declarations formerly mixed into the
 * shared storefront mobile media rules. These are retained as fallback values
 * before the higher-priority discovery refresh rules below. */
@media (max-width: 600px) {
.marketplace-categories .market-category{font-size:10px;padding:7px 10px}
.marketplace-categories{gap:6px}
.store-meta strong{display:block;margin-top:6px}
.store-info h3{font-size:15px!important}
.store-info p{font-size:11px}
.store-cover{min-height:0}
.store-info{padding:12px;gap:7px}
.store-meta{display:block}
}

/* === Homepage discovery refresh (2026-10-28): business card order, nearby results, mobile filters === */
/* These selectors target the marketplace homepage only; product and vendor storefront cards stay untouched. */
.io-category-strip{min-width:0;max-width:100%}
.io-category-swipe-hint{display:none}
.marketplace-categories .market-category{min-width:0;justify-content:center;white-space:nowrap}
.marketplace-categories .market-category:focus-visible,.store-card:focus-visible{outline:3px solid #2e9953;outline-offset:3px}

/* Shared homepage cards: category > name > description > price > address > distance > link. */
.popular-grid>.store-card,.listing-grid .store-card,#io-nearby-grid>.store-card{min-width:0;width:100%;height:100%;text-align:left}
.store-card .store-cover{flex:0 0 auto;min-height:0;aspect-ratio:1.75 / 1;max-height:240px}
.store-card .store-info{display:flex;flex:1;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:17px;min-width:0;text-align:left}
.store-card .store-card-topline{display:block;width:100%;margin:0;min-width:0}
.store-card .store-card-topline .pill{display:inline-flex;font-size:11px;font-weight:850;padding:6px 11px;margin:0;max-width:100%;text-align:left}
.store-card .store-info h3{font-size:19px!important;line-height:1.24;margin:0!important;letter-spacing:-.025em;color:#153b27;text-align:left;overflow-wrap:anywhere}
.store-card .store-info p.store-description{font-size:12px;line-height:1.58;min-height:0;max-height:none;margin:0;color:#65756a;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-align:left}
.store-card .store-price{display:block;margin:0;font-size:12px;min-width:0;text-align:left}
.store-card .starting-price{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:4px;max-width:100%;border:1px solid #d4ecda;background:#f0faf2;color:#536d5b;border-radius:9px;padding:7px 9px;font-size:11px;line-height:1.35;text-align:left}
.store-card .starting-price strong{font-size:14px;font-weight:900;line-height:1.2;color:#176534;overflow-wrap:anywhere}
.store-card .io-price-enquiry{font-size:11px;color:#66796b;display:inline-flex;align-items:center;background:#f4f7f5;border:1px solid #e5ede7;padding:7px 9px;border-radius:9px}
.store-card .store-address{display:flex;align-items:flex-start;justify-content:flex-start;gap:7px;margin:0;color:#66776b;font-size:12px;line-height:1.5;min-width:0;text-align:left;overflow-wrap:anywhere}
.store-card .store-address-icon{flex:0 0 auto;line-height:1.5;font-size:12px}
.store-card .store-distance[hidden]{display:none!important}
.store-card .store-distance:not([hidden]){display:flex;align-items:center;justify-content:flex-start;gap:7px;min-width:0;color:#15633b;font-weight:850;font-size:12px;text-align:left}
.store-card .io-distance-badge{display:inline-flex;align-items:center;max-width:100%;background:#e4f7ea;color:#146037;border:1px solid #c4e7d0;border-radius:999px;padding:6px 11px;font-size:12px;line-height:1.3;white-space:normal}
.store-card .store-action{display:flex;justify-content:flex-end;align-items:center;margin-top:auto;padding-top:9px;border-top:1px solid #eaf0eb;width:100%}
.store-card .store-action strong{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-size:12px;color:#176534;font-weight:900;background:#eef8f0;padding:8px 12px;border-radius:9px;transition:background .15s}
.store-card:hover .store-action strong{background:#dcefe1}

/* Dedicated nearby container with consistent padding and a responsive header. */
#io-nearby-results{padding:clamp(14px,2.5vw,24px);background:linear-gradient(180deg,#f8fcf9,#fff 42%);overflow:visible;margin:22px 0 30px;min-width:0}
#io-nearby-results .io-nearby-heading{display:flex;align-items:center;justify-content:space-between;flex-direction:row;gap:14px;margin:0 0 18px;min-width:0}
#io-nearby-results .io-nearby-heading-copy{min-width:0;flex:1;text-align:left}
#io-nearby-results .io-nearby-eyebrow{display:block;color:#277447;font-size:10px;font-weight:900;letter-spacing:.09em;margin-bottom:6px}
#io-nearby-results .io-nearby-heading h2{font-size:clamp(20px,2.2vw,26px);line-height:1.2;color:#153b27;letter-spacing:-.04em}
#io-nearby-results .io-nearby-heading p{font-size:12px;line-height:1.5;color:#627267;margin:5px 0 0;overflow-wrap:anywhere}
#io-nearby-results #io-clear-nearby{flex:0 0 auto;white-space:nowrap;font-size:11px;padding:10px 12px}
/* Consistent homepage grid across featured, category and nearest-business sections. */
.popular-grid.grid,.listing-grid.grid,#io-nearby-grid.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px;min-width:0;align-items:stretch}
.listing-grid>.listing-grid-item{min-width:0;width:100%}
#io-nearby-grid .io-nearby-empty{grid-column:1/-1}

@media (min-width:681px) and (max-width:1023px){
 .popular-grid.grid,.listing-grid.grid,#io-nearby-grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:13px}
}
@media (max-width:680px){
 /* Native one-row swipe navigation, replacing the crowded 3-line chip layout. */
 .io-category-strip{position:relative;margin:0 0 18px;overflow:hidden}
 .io-category-strip .marketplace-categories{display:flex;flex-wrap:nowrap!important;gap:9px;overflow-x:auto;overflow-y:hidden;max-width:100%;width:100%;margin:0;padding:5px 2px 9px;scroll-snap-type:x proximity;scroll-padding:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .io-category-strip .marketplace-categories::-webkit-scrollbar{display:none}
 .io-category-strip .marketplace-categories .market-category{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;min-height:41px;border-radius:999px;padding:9px 13px;font-size:11px;gap:7px;box-shadow:0 3px 10px rgba(23,74,39,.04)}
 .io-category-strip .marketplace-categories .market-category span{font-size:15px;line-height:1}
 .io-category-swipe-hint{display:flex;justify-content:flex-end;align-items:center;gap:5px;color:#657c6d;font-size:10px;margin:1px 3px 0;line-height:1.25}
 .io-category-swipe-hint span{font-size:16px;color:#1b7042}
 /* Two compact business cards per row on phones, including nearby results. */
 #io-nearby-grid.grid,.popular-grid.grid,.listing-grid.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 .store-card .store-cover{aspect-ratio:1.26/1;max-height:none}
 .store-card .store-info{padding:11px;gap:8px}
 .store-card .store-card-topline .pill{font-size:9px;line-height:1.2;padding:5px 7px;white-space:normal}
 .store-card .store-info h3{font-size:15px!important;line-height:1.25}
 .store-card .store-info p.store-description{font-size:10.5px;line-height:1.4;-webkit-line-clamp:2}
 .store-card .store-price,.store-card .starting-price,.store-card .io-price-enquiry{font-size:10px}
 .store-card .starting-price{gap:3px;padding:5px 7px}
 .store-card .starting-price strong{font-size:12px}
 .store-card .io-price-enquiry{padding:5px 7px}
 .store-card .store-address{font-size:10px;line-height:1.4;gap:4px}
 .store-card .store-address>span:last-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .store-card .store-address-icon{font-size:10px;line-height:1.4}
 .store-card .store-distance:not([hidden]){font-size:10px}
 .store-card .io-distance-badge{font-size:10px;padding:5px 7px}
 .store-card .store-action{padding-top:7px}
 .store-card .store-action strong{font-size:10px;padding:7px 8px;gap:4px}
 #io-nearby-results{padding:14px;border-radius:20px}
 #io-nearby-results .io-nearby-heading{align-items:flex-start;flex-direction:column;gap:11px;margin-bottom:16px}
 #io-nearby-results #io-clear-nearby{align-self:flex-end;min-height:39px}
 #io-nearby-results .io-nearby-heading h2{font-size:21px}
}
@media (max-width:390px){
 .popular-grid.grid,.listing-grid.grid,#io-nearby-grid.grid{gap:8px}
 .store-card .store-cover{aspect-ratio:1.16/1}
 .store-card .store-info{padding:9px;gap:7px}
 .store-card .store-info h3{font-size:14px!important}
 .store-card .store-card-topline .pill{font-size:9px}
 .store-card .starting-price strong{font-size:11px}
 #io-nearby-results{padding:11px}
}