/* ============================================================
   Commercial Connection — Archive Styles v6
   Modern, refined. Two pin colors. Clean cards.
   ============================================================ */

:root {
  --cc-navy:    #0f1e35;
  --cc-blue:    #1a3a6b;
  --cc-accent:  #2251b8;
  --cc-sale:    #1a5c3a;
  --cc-lease:   #0f1e35;
  --cc-white:   #ffffff;
  --cc-off:     #f7f8fb;
  --cc-light:   #edf0f5;
  --cc-mid:     #505f6e;
  --cc-text:    #1c2b3a;
  --cc-text-lt: #5a6a7e;
  --cc-border:  #e4e8f0;
  --cc-font-d:  'Playfair Display', Georgia, serif;
  --cc-font-b:  'DM Sans', system-ui, sans-serif;
  --cc-radius:  12px;
  --cc-radius-sm: 8px;
  --cc-shadow:  0 2px 2px 0 rgba(0,0,0,.12);
  --cc-shadow-h: 0 6px 16px 0 rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.10);
  --cc-ease:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cc-archive{font-family:var(--cc-font-b);color:var(--cc-text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;width:100%}

/* Filter Bar */
.cc-filter-bar{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:0 20px;min-height:56px;background:var(--cc-white);border-bottom:1px solid var(--cc-border);overflow-x:auto;overflow-y:visible;position:sticky;top:0;z-index:200;flex-shrink:0;-ms-overflow-style:none;scrollbar-width:none;box-shadow:0 2px 8px rgba(15,30,53,0);transition:box-shadow .2s}
.cc-filter-bar.is-stuck{box-shadow:0 2px 8px rgba(15,30,53,.1)}
.cc-filter-bar::-webkit-scrollbar{display:none}
.cc-filter-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:transparent;border:1.5px solid var(--cc-border);border-radius:100px;font-family:var(--cc-font-b);font-size:13px;font-weight:600;color:var(--cc-text);white-space:nowrap;flex-shrink:0;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;outline:none}
.cc-filter-pill:hover{background:var(--cc-off);border-color:#b8c2d4}
.cc-filter-pill:focus-visible{border-color:var(--cc-accent);box-shadow:0 0 0 3px rgba(34,81,184,.12)}
.cc-filter-pill svg{flex-shrink:0;color:var(--cc-accent)}
.cc-filter-pill--loc{padding:0 16px;min-width:160px}
.cc-filter-loc{border:none;outline:none;font-family:var(--cc-font-b);font-size:13px;font-weight:500;padding:12px 0;width:100%;background:transparent;color:var(--cc-text)}
.cc-filter-loc::placeholder{color:var(--cc-mid);font-weight:400}
.cc-filter-pill--select{padding:0;overflow:hidden}
.cc-filter-select{padding:11px 36px 11px 16px;border:none;background:transparent;font-family:var(--cc-font-b);font-size:13px;font-weight:600;color:var(--cc-text);cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238595ae' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;width:100%;height:100%}
.cc-filter-btn{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238595ae' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.cc-filter-dropdown-wrap{position:relative;flex-shrink:0}
.cc-filter-drawer{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--cc-white);border:1px solid var(--cc-border);border-radius:var(--cc-radius);padding:16px;box-shadow:var(--cc-shadow-h);z-index:500;flex-direction:column;gap:10px;min-width:240px}
.cc-filter-drawer.is-open{display:flex}
.cc-filter-drawer label{font-size:13px;font-weight:500;display:flex;flex-direction:column;gap:5px}
.cc-filter-drawer input{padding:9px 12px;border:1.5px solid var(--cc-border);border-radius:var(--cc-radius-sm);font-size:14px;font-family:var(--cc-font-b);outline:none;transition:border-color .15s}
.cc-filter-drawer input:focus{border-color:var(--cc-accent)}
.cc-drawer-apply{padding:10px;background:var(--cc-accent);color:#fff;border:none;border-radius:var(--cc-radius-sm);font-size:14px;font-weight:600;font-family:var(--cc-font-b);cursor:pointer;margin-top:4px;transition:background .15s}
.cc-drawer-apply:hover{background:#1a3a8f}
.cc-filter-bar-right{margin-left:auto;display:flex;align-items:center;gap:16px;padding-left:12px;white-space:nowrap;flex-shrink:0}
.cc-results-count{font-size:13px;color:var(--cc-mid)}
.cc-filter-clear{font-size:13px;font-weight:600;color:var(--cc-mid);background:none;border:none;cursor:pointer;font-family:var(--cc-font-b);padding:0;transition:color .15s}
.cc-filter-clear:hover{color:var(--cc-text)}

/* Archive Body — sticky map, cards scroll naturally with page */
.cc-archive-body{display:flex;overflow:visible}
.cc-archive-body--split{flex-direction:row;align-items:flex-start}
.cc-archive-body--map-right{flex-direction:row-reverse}
/* Sticky map pane:
   - Safari needs -webkit-sticky alongside sticky inside flex containers.
   - Use max-height only, not height — combining height: calc(100vh - X) with
     a sticky+flex parent triggers a Safari bug where the document scrollHeight
     is clipped before the calc resolves, and the page can't scroll to the
     bottom on past-transactions/active-listings (Chrome is unaffected). */
.cc-archive-map-pane{flex:0 0 50%;max-width:50%;position:-webkit-sticky;position:sticky;top:80px;max-height:calc(100vh - 80px);padding:10px 6px 10px 10px;align-self:flex-start;display:flex;flex-direction:column}
.cc-archive-map{width:100%;flex:1 1 auto;min-height:480px;z-index:1;border-radius:var(--cc-radius);overflow:hidden;box-shadow:0 4px 2px rgba(0,0,0,.35),0 0 0 1px rgba(15,30,53,.12)}
.cc-archive-map--full{width:100%;height:100%}
.cc-archive-list-pane{flex:1;min-width:0;overflow:visible;background:var(--cc-off);padding:8px 8px 40px}
.cc-archive-list-pane::-webkit-scrollbar{width:4px}
.cc-archive-list-pane::-webkit-scrollbar-track{background:transparent}
.cc-archive-list-pane::-webkit-scrollbar-thumb{background:#d0d8e8;border-radius:2px}
.cc-archive-body--cards{display:block;overflow:visible}

/* Loading / Empty */
.cc-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 24px;font-size:14px;color:var(--cc-mid)}
.cc-spinner{width:20px;height:20px;border:2px solid var(--cc-border);border-top-color:var(--cc-accent);border-radius:50%;animation:cc-spin .7s linear infinite;flex-shrink:0}
@keyframes cc-spin{to{transform:rotate(360deg)}}
.cc-no-results{display:none;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;gap:12px;color:var(--cc-mid)}

/* Tier Label */
.cc-tier-label{padding:8px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cc-mid);border-top:1px solid var(--cc-border);background:var(--cc-off);position:sticky;top:0;z-index:5}
.cc-tier-label:first-child{border-top:none}

/* Cards List */
.cc-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}
.cc-cards-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;padding:12px}
.cc-cards-list--grid .cc-tier-label{grid-column:1/-1;margin:0}

/* Property Card — entrance animation */
.cc-prop-card{display:flex;background:var(--cc-white);border-radius:var(--cc-radius);cursor:pointer;position:relative;overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--cc-border);box-shadow:var(--cc-shadow);transition:box-shadow .3s var(--cc-ease),transform .3s var(--cc-ease),border-color .3s var(--cc-ease);margin-bottom:8px;opacity:0;transform:translateY(10px);animation:cc-card-in .4s var(--cc-ease) forwards;scroll-margin-top:80px}
.cc-prop-card.is-promoted{
  border:2px solid var(--cc-accent,#2251b8);
  /* Tighter blur (5px) and darker — per user feedback. */
  box-shadow:0 3px 5px rgba(15,30,53,.45);
  outline:0;
  position:relative;
  background:linear-gradient(180deg,#f4f8ff 0%,#ffffff 60%);
}
/* The "On the map" pill */
.cc-prop-card.is-promoted::after{
  content:'On the map';
  position:absolute;
  top:10px;right:10px;
  background:var(--cc-accent,#2251b8);
  color:#fff;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:100px;
  z-index:3;
  pointer-events:none;
}
@keyframes cc-card-in{to{opacity:1;transform:translateY(0)}}
.cc-prop-card:nth-child(1){animation-delay:.03s}.cc-prop-card:nth-child(2){animation-delay:.07s}.cc-prop-card:nth-child(3){animation-delay:.11s}.cc-prop-card:nth-child(4){animation-delay:.15s}.cc-prop-card:nth-child(5){animation-delay:.19s}.cc-prop-card:nth-child(6){animation-delay:.23s}.cc-prop-card:nth-child(7){animation-delay:.27s}.cc-prop-card:nth-child(8){animation-delay:.31s}.cc-prop-card:nth-child(9){animation-delay:.35s}.cc-prop-card:nth-child(10){animation-delay:.39s}.cc-prop-card:nth-child(n+11){animation-delay:.43s}
.cc-prop-card:hover{box-shadow:var(--cc-shadow-h);transform:translateY(-2px);border-color:#c8d0e0}

/* Left accent bar on hover */
.cc-prop-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cc-lease);border-radius:var(--cc-radius) 0 0 var(--cc-radius);opacity:0;transition:opacity .3s ease}
.cc-prop-card:hover::before{opacity:1}
.cc-prop-card[data-tx="for-sale"]::before,
.cc-prop-card[data-tx="business-for-sale"]::before,
.cc-prop-card[data-tx="investment"]::before{background:var(--cc-sale)}

/* Promoted stripe — placed AFTER the for-sale/lease/investment rules so it
   wins source order regardless of transaction type. Always visible (no hover). */
.cc-prop-card.is-promoted::before,
.cc-prop-card[data-tx="for-sale"].is-promoted::before,
.cc-prop-card[data-tx="business-for-sale"].is-promoted::before,
.cc-prop-card[data-tx="investment"].is-promoted::before{
  background:var(--cc-accent,#2251b8);
  width:4px;
  opacity:1;
}

.cc-prop-card--img-left{flex-direction:row}
.cc-prop-card--img-right{flex-direction:row-reverse}
.cc-prop-card--img-top{flex-direction:column}
.cc-prop-card--img-none .cc-card-img-wrap{display:none}
.cc-cards-list--grid .cc-prop-card{flex-direction:column;margin-bottom:0}
.cc-cards-list--grid .cc-card-img-wrap{flex:none!important;width:100%!important;height:210px;min-height:210px}

/* Origin pin */
.cc-map-origin{background:none!important;border:none!important}
.cc-origin-pin{animation:cc-origin-pulse 2s ease-in-out infinite}
@keyframes cc-origin-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}

/* Image Badge — TWO COLORS ONLY */
.cc-img-badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:100px;line-height:1;z-index:2;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cc-img-badge--for-lease{background:var(--cc-lease);color:#fff}
.cc-img-badge--for-sale,.cc-img-badge--business-for-sale,.cc-img-badge--investment{background:var(--cc-sale);color:#fff}

/* Card Image */
/* Card image area:
   The Elementor archive widget injects an inline `width: <SIZE>px` rule via its
   `image_width` control (default 260, saved value on live page is 150). That
   inline rule beat our 38% target and produced thin postage-stamp thumbnails.
   `!important` here forces the image area to a sane minimum without requiring
   the broker to remember to update Elementor. The widget control still works
   as an override above this floor. */
.cc-card-img-wrap{flex:0 0 38%!important;width:38%!important;min-width:240px!important;overflow:hidden;background:var(--cc-light);display:flex;position:relative;text-decoration:none;align-self:stretch;min-height:170px}
.cc-prop-card--img-top .cc-card-img-wrap{flex:none!important;width:100%!important;min-width:0!important;height:210px;align-self:auto}
/* Force object-fit:cover with high specificity — theme/Elementor globals
   override the simple selector and leave object-fit defaulting to `fill`,
   which stretches photos into the narrow card slot (the "fisheye" look). */
.cc-prop-card .cc-card-img-wrap > img,
.cc-card-img-wrap img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center;display:block;flex:1 1 auto;min-height:0;transition:transform .55s var(--cc-ease)}
.cc-prop-card:hover .cc-card-img-wrap img{transform:scale(1.04)}
.cc-card-img-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#1c2b3a 0%,#0f1e35 100%);color:rgba(255,255,255,.35);text-align:center;padding:12px}
.cc-card-img-placeholder svg{width:44px!important;height:44px!important;flex-shrink:0;stroke:currentColor;fill:none;opacity:.6}
.cc-card-img-placeholder::after{content:"Photo coming soon";font-family:var(--cc-font-b);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* Card Body */
.cc-card-body{flex:1;padding:16px 18px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:3px 12px;min-width:0;position:relative}
.cc-card-body>*{flex-shrink:0;min-width:0;box-sizing:border-box}

/* Badges — TWO COLORS ONLY */
.cc-card-badges{display:flex;flex-wrap:wrap;gap:5px;width:100%;margin-bottom:2px}
.cc-badge{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:100px;display:inline-block;line-height:1}
.cc-badge--for-lease{background:var(--cc-lease);color:#fff}
.cc-badge--for-sale,.cc-badge--business-for-sale,.cc-badge--investment{background:var(--cc-sale);color:#fff}
[class*="cc-badge--type-"]{background:var(--cc-light);color:var(--cc-text-lt)}

/* Title */
.cc-card-title{font-size:16px;font-weight:700;line-height:1.3;margin:0;font-family:var(--cc-font-d);width:100%}
.cc-card-title a{color:var(--cc-navy);text-decoration:none;transition:color .2s}
.cc-card-title a:hover{color:var(--cc-accent)}

/* Address */
.cc-card-address{font-size:12px;color:var(--cc-text-lt);margin:0;width:100%}

/* Stats */
.cc-card-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;width:100%;margin-top:3px}
.cc-card-price{font-size:18px;font-weight:700;color:var(--cc-accent);line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cc-card-sqft,.cc-card-meta{font-size:13px;color:var(--cc-text-lt)}
.cc-card-stats>*:not(:first-child)::before{content:'·';margin-right:8px;color:var(--cc-mid);font-weight:700}

/* Highlights */
.cc-card-highlights{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:2px 14px;width:100%}
.cc-card-highlights li{font-size:12px;color:var(--cc-text-lt);display:flex;align-items:center;gap:5px;line-height:1.5}
.cc-card-highlights li::before{content:'✓';color:var(--cc-sale);font-weight:700;font-size:10px;flex-shrink:0}

/* Distance */
.cc-card-distance{font-size:12px;color:var(--cc-mid);width:100%;margin-top:2px}

/* CTA */
.cc-card-cta-wrap{padding-top:8px;width:100%}
.cc-card-cta{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;font-size:12px;font-weight:600;font-family:var(--cc-font-b);color:var(--cc-accent);border:1.5px solid currentColor;border-radius:100px;text-decoration:none;transition:background .2s,color .2s;cursor:pointer}
.cc-card-cta:hover{background:var(--cc-accent);color:#fff}

/* Load More */
.cc-load-more-wrap{padding:24px;text-align:center}
.cc-load-more{padding:14px 40px;border:2px solid var(--cc-accent);border-radius:100px;font-size:14px;font-weight:700;font-family:var(--cc-font-b);color:var(--cc-accent);background:var(--cc-white);cursor:pointer;transition:all .2s;letter-spacing:.02em}
.cc-load-more:hover{background:var(--cc-accent);color:#fff;box-shadow:0 4px 12px rgba(34,81,184,.25)}

/* Map Popup */
.cc-leaflet-popup .leaflet-popup-content-wrapper{border-radius:var(--cc-radius);padding:0;overflow:hidden;box-shadow:0 8px 32px rgba(15,30,53,.22);border:none;max-height:80vh}
.cc-leaflet-popup .leaflet-popup-content{margin:0;width:272px!important;max-height:calc(80vh - 8px);overflow-y:auto}

/* Split popup — one location with both lease and sale listings */
.cc-leaflet-popup--split .leaflet-popup-content{width:300px!important;max-height:none}
.cc-map-popup--split{font-family:var(--cc-font-b)}
.cc-map-popup--split .cc-popup-body{padding:14px 16px 16px}
.cc-map-popup--split .cc-popup-address{font-size:12px;color:var(--cc-text-lt);margin:0 0 10px;font-weight:600}
.cc-split-listings{display:flex;flex-direction:column;gap:8px}
.cc-split-listing{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--cc-off);
  border:1px solid var(--cc-border);
  border-radius:8px;
  text-decoration:none;color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.cc-split-listing:hover{border-color:var(--cc-accent,#2251b8);transform:translateY(-1px)}
.cc-split-listing__body{flex:1;min-width:0}
.cc-split-listing__title{
  font-family:var(--cc-font-d);
  font-size:13px;font-weight:700;
  margin:0 0 3px;line-height:1.3;
  color:var(--cc-navy,#0f1e35);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.cc-split-listing__stats{display:flex;gap:8px;align-items:baseline;font-size:12px}
.cc-split-listing__price{font-weight:700;color:var(--cc-accent,#2251b8);font-variant-numeric:tabular-nums}
.cc-split-listing__sqft{color:var(--cc-text-lt)}
.cc-split-listing__arrow{font-size:16px;color:var(--cc-accent,#2251b8);flex-shrink:0;transition:transform .15s ease}
.cc-split-listing:hover .cc-split-listing__arrow{transform:translateX(3px)}

/* When the popup opens BELOW the pin (smart placement when pin is near top
   of the map), flip the tail so it points up at the pin instead of down. */
.cc-leaflet-popup--below .leaflet-popup-tip-container{
  top:-22px;bottom:auto;
  transform:rotate(180deg);
}
.cc-leaflet-popup--below{
  margin-top:0;
}
.cc-map-popup{font-family:var(--cc-font-b)}
.cc-popup-body{padding:14px 16px 16px}
.cc-popup-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.cc-popup-title{font-size:15px;font-weight:700;font-family:var(--cc-font-d);margin:0 0 4px;line-height:1.3}
.cc-popup-title a{color:var(--cc-navy);text-decoration:none}
.cc-popup-address{font-size:12px;color:var(--cc-text-lt);margin:0 0 8px}
.cc-popup-stats{display:flex;gap:10px;align-items:baseline;margin-bottom:10px}
.cc-popup-price{font-size:17px;font-weight:700;color:var(--cc-accent);font-variant-numeric:tabular-nums}
.cc-popup-sqft{font-size:12px;color:var(--cc-text-lt)}
.cc-popup-cta{display:block;text-align:center;padding:10px;background:var(--cc-accent);color:#fff!important;font-size:13px;font-weight:600;text-decoration:none;border-radius:var(--cc-radius-sm);transition:background .15s}
.cc-popup-cta:hover{background:#1a3a8f}
.cc-map-pin{background:none!important;border:none!important}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){.cc-prop-card{animation:none;opacity:1;transform:none}}

/* Mobile filter toggle (hamburger) — desktop hides it */
.cc-filter-mobile-toggle{display:none;align-items:center;gap:8px;width:100%;padding:14px 18px;background:var(--cc-white);border:none;border-bottom:1px solid var(--cc-border);font-family:var(--cc-font-b);font-size:14px;font-weight:600;color:var(--cc-text);cursor:pointer;text-align:left;position:sticky;top:0;z-index:201;-webkit-tap-highlight-color:transparent}
.cc-filter-mobile-toggle svg{flex-shrink:0;color:var(--cc-accent)}
.cc-filter-mobile-toggle__label{flex:1}
.cc-filter-mobile-toggle__count{display:none;background:var(--cc-accent);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px;min-width:22px;text-align:center}
.cc-filter-mobile-toggle__count.is-active{display:inline-block}
.cc-filter-mobile-toggle[aria-expanded="true"] svg{transform:rotate(90deg);transition:transform .2s}

/* Responsive */
@media(max-width:960px){
  .cc-archive-body--split{flex-direction:column!important}
  .cc-archive-map-pane{flex:none!important;max-width:100%!important;width:100%;height:360px!important;position:relative!important;top:0!important;padding:10px 10px 6px 10px}
  .cc-archive-list-pane{overflow:visible}

  /* Hamburger filter pattern */
  .cc-filter-mobile-toggle{display:flex}
  .cc-filter-bar{display:none;position:static;flex-direction:column;align-items:stretch;flex-wrap:nowrap;overflow:visible;padding:14px 16px;gap:10px;background:var(--cc-white);border-bottom:1px solid var(--cc-border)}
  .cc-filter-bar.is-open{display:flex}
  .cc-filter-bar .cc-filter-pill{width:100%;justify-content:space-between;font-size:14px;padding:12px 16px}
  .cc-filter-bar .cc-filter-pill--loc{min-width:0;width:100%}
  .cc-filter-bar .cc-filter-pill--select{padding:0}
  .cc-filter-bar .cc-filter-select{padding:14px 36px 14px 16px;font-size:14px}
  .cc-filter-bar .cc-view-toggle{align-self:flex-end}
  .cc-filter-bar-right{margin-left:0;width:100%;justify-content:space-between;padding-left:0;padding-top:10px;margin-top:2px;border-top:1px solid var(--cc-border)}
}
@media(max-width:640px){
  .cc-filter-mobile-toggle{padding:12px 14px;font-size:13px}
  .cc-prop-card--img-left,.cc-prop-card--img-right{flex-direction:column}
  .cc-card-img-wrap{flex:none!important;width:100%!important;height:180px;align-self:auto}
  .cc-cards-list--grid{grid-template-columns:1fr}
}

/* Leaflet container inherits border-radius from parent */
.cc-archive-map .leaflet-container{border-radius:var(--cc-radius)}

/* ─── Photo protection ───────────────────────────────────────
   Visible watermark on archive card photos + disabled drag.
   Right-click is blocked via JS in search.js. Note: this is a
   deterrent layer only — it does not survive screenshots. For
   true screenshot protection, watermarks must be burned into the
   image file server-side. */
.cc-card-img-wrap{user-select:none;-webkit-user-select:none}
.cc-card-img-wrap img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;pointer-events:none}
.cc-card-img-wrap::after{content:"© Commercial Connection";position:absolute;bottom:6px;right:6px;background:rgba(15,30,53,.55);color:rgba(255,255,255,.92);font-family:var(--cc-font-b);font-size:9px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:3px;pointer-events:none;z-index:3;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.cc-card-img-placeholder::after{display:none}

/* Dynamic type badge — highlighted when it's the search-matched type */
.cc-badge--type-match {
  background: #e8f0fe;
  color: var(--cc-accent);
  border: 1px solid rgba(34,81,184,.25);
  font-weight: 700;
}

/* ─── Sort & View Toggle ────────────────────────────────────── */
.cc-filter-pill--sort { flex-shrink: 0; }
.cc-view-toggle { display: flex; gap: 2px; flex-shrink: 0; }
.cc-view-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius); background: transparent;
  color: var(--cc-mid); cursor: pointer; transition: all .15s;
}
.cc-view-btn:hover { color: var(--cc-text); border-color: var(--cc-accent); }
.cc-view-btn.is-active { color: var(--cc-accent); background: #eef2fb; border-color: var(--cc-accent); }
/* Theme/Elementor css-globals can squash SVG width to ~4px (svg{width:auto}+
   flex parent). Force explicit dimensions and stroke so the icons render. */
.cc-view-btn svg{width:16px!important;height:16px!important;flex-shrink:0;display:block;stroke:currentColor;fill:none}
.cc-view-btn svg line,.cc-view-btn svg rect{stroke:currentColor;fill:none;vector-effect:non-scaling-stroke}
.cc-filter-pill svg{flex-shrink:0;width:15px;height:15px}
.cc-filter-mobile-toggle svg{flex-shrink:0;width:18px;height:18px}

/* Grid view for cards */
.cc-cards-list--grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
}
.cc-cards-list--grid .cc-prop-card {
  flex-direction: column;
  border-bottom: none;
  border-radius: var(--cc-radius);
  box-shadow: 0 2px 8px rgba(15,30,53,.08);
  overflow: hidden;
}
.cc-cards-list--grid .cc-card-img-wrap {
  flex: none !important;
  width: 100% !important;
  height: 180px;
}
.cc-cards-list--grid .cc-tier-label { display: none; }

/* ─── Active Filter Pills ───────────────────────────────────── */
.cc-active-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 20px;
  background: var(--cc-off);
  border-bottom: 1px solid var(--cc-border);
}
.cc-active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 14px;
  background: var(--cc-accent);
  color: #fff;
  font-size: 12px; font-weight: 600;
  border-radius: 20px;
  font-family: var(--cc-font-b);
}
.cc-active-pill button {
  background: rgba(255,255,255,.25);
  border: none; color: #fff;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cc-active-pill button:hover { background: rgba(255,255,255,.4); }

/* ─── Location Autocomplete ─────────────────────────────────── */
.cc-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cc-white);
  border: 1px solid var(--cc-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(15,30,53,.15);
  z-index: 200;
  max-height: 300px;
  overflow-y: auto;
}
.cc-ac-item {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-text);
  cursor: pointer;
  transition: background .1s;
  font-family: var(--cc-font-b);
}
.cc-ac-item:hover { background: var(--cc-off); }

@media (max-width: 640px) {
  .cc-view-toggle { display: none; }
  .cc-active-filters { padding: 8px 12px; }
}