/* ============================================================
   everythingreps — Global theme system (WordPress / GeneratePress)
   Layout · type · buttons · header · mega · mobile drawer · footer
   Recreated from the everythingreps prototype design system.
   ============================================================ */

/* ---- GeneratePress base resets so our system shows through ---- */
body { background: hsl(var(--paper)); color: hsl(var(--ink)); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.generate-back-to-top, .nav-above-header, .main-navigation:not(.er-keep) { /* default GP nav hidden — we render our own */ }
.site-content { padding-top: 0; }
/* push content below the fixed topbar + header */
.site { padding-top: calc(var(--topbar-h) + var(--header-h)); }
/* Homepage: hero slides up UNDER the transparent header (only the announcement bar offsets). */
body.home .site { padding-top: var(--topbar-h); }

/* WordPress admin bar (logged-in): it's a fixed 32px bar (46px ≤782px) that
   our fixed topbar/header don't account for. WP already adds html{margin-top}
   which offsets the in-flow .site content, so ONLY the fixed bars need nudging. */
body.admin-bar .topbar { top: 32px; }
body.admin-bar .hdr { top: calc(var(--topbar-h) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
  body.admin-bar .hdr { top: calc(var(--topbar-h) + 46px); }
  body.admin-bar .appbar[data-er-appbar] { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* WP would switch the admin bar to position:absolute here, which let it slide
     UNDER our fixed app bar (header hidden) and left a ~46px dead band from the
     html{margin-top:46px} that the top:0 app bar didn't account for. Keep the
     admin bar pinned and keep the 46px offset so the two bars stack cleanly. */
  body.admin-bar #wpadminbar { position: fixed !important; }
  body.admin-bar .topbar { top: 46px; }
  body.admin-bar .hdr { top: calc(var(--topbar-h) + 46px); }
  body.admin-bar .appbar[data-er-appbar] { top: 46px; }
}
a { color: hsl(var(--ink)); text-decoration: none; }
h1,h2,h3,h4,h5 { font-family: var(--font-display); color: hsl(var(--ink)); }
img { max-width: 100%; height: auto; }

/* ---- layout helpers ---- */
.wrap, .er-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; box-sizing: border-box; }
.section { padding: clamp(40px, 5vw, 72px) 0; }
.section--tight { padding: clamp(28px, 4vw, 52px) 0; }
.eyebrow { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0 0 14px; }
.sec-head { max-width: 640px; margin: 0 0 clamp(28px, 4vw, 44px); }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.0; letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.sec-head p { color: hsl(var(--muted-foreground)); font-size: 1.02rem; line-height: 1.6; margin: 14px 0 0; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--duration-base) var(--ease-out-quart), border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-instant); font-family: var(--font-sans); line-height: 1; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: scale(0.985); }
.btn--solid { background: hsl(var(--ink)); color: #fff; box-shadow: var(--shadow-sm); }
.btn--solid:hover { background: hsl(var(--ink) / 0.88); box-shadow: var(--shadow-md); color: #fff; }
.btn--outline { background: transparent; color: hsl(var(--ink)); border-color: hsl(var(--ink) / 0.22); }
.btn--outline:hover { border-color: hsl(var(--ink) / 0.45); background: hsl(var(--ink) / 0.03); }
.btn--light { background: #fff; color: hsl(var(--cta-dark)); }
.btn--light:hover { background: hsl(0 0% 100% / 0.9); box-shadow: var(--shadow-md); }
.btn--block { width: 100%; }
.btn--sm { height: 42px; padding: 0 16px; font-size: 0.86rem; }

/* ====== TOP BAR ====== */
/* Hide GeneratePress's own top-bar widget area (we render our own .topbar). */
.top-bar { display: none !important; }
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: var(--topbar-h); display: flex; align-items: center; justify-content: center; gap: 9px; background: #000; color: #fff; border-bottom: 1px solid hsl(0 0% 100% / 0.08); }
.topbar span { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.topbar svg { width: 15px; height: 15px; flex: none; }

/* ====== HEADER ====== */
.hdr { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; }
.hdr .hdr__logo { height: 42px !important; width: auto !important; max-width: 200px; display: block; filter: brightness(0); }
.mnav__head img { height: 26px !important; width: auto !important; max-width: 130px; }
.hdr__inner { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
.hdr__brand { justify-self: center; grid-column: 2; color: inherit; text-decoration: none; flex: none; }
.hdr__nav { display: flex; gap: 22px; margin: 0; justify-self: start; grid-column: 1; align-items: center; }
.hdr__nav a { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 500; text-decoration: none; color: inherit; opacity: 0.72; transition: opacity var(--duration-fast) var(--ease-out-quart); position: relative; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out-quart); }
.hdr__nav a:hover { opacity: 1; }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__nav a .chev { width: 13px; height: 13px; margin-left: 3px; opacity: 0.6; vertical-align: middle; transition: transform var(--duration-fast) var(--ease-out-quart); }
.hdr__nav a[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 22px; min-width: 0; }
.hdr__nav--right { gap: 22px; align-items: center; }
.hdr__ext { opacity: 1 !important; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border: 1px solid currentColor; border-radius: var(--radius-full); font-weight: 600; letter-spacing: 0.1em; line-height: 1; font-size: 0.78rem; text-transform: uppercase; transition: background var(--duration-base) var(--ease-out-quart), color var(--duration-base), border-color var(--duration-base); }
.hdr__ext::after { content: none !important; }
.hdr__ext .hdr__ext-arrow { width: 12px; height: 12px; flex: none; }
.hdr--solid .hdr__ext { color: hsl(var(--ink)); border-color: hsl(var(--ink) / 0.28); }
.hdr--solid .hdr__ext:hover { background: hsl(var(--ink)); color: #fff; border-color: hsl(var(--ink)); }
.hdr__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: none; background: transparent; color: inherit; position: relative; cursor: pointer; transition: background var(--duration-fast) var(--ease-out-quart); }
.icon-btn:hover { background: hsl(var(--ink)); }
.icon-btn:hover svg { color: hsl(var(--paper)); }
.icon-btn svg { width: 20px; height: 20px; transition: color var(--duration-fast); }
.icon-btn.is-current { background: hsl(var(--ink)); }
.icon-btn.is-current svg { color: #fff; }
.icon-btn--solidhover:hover { background: hsl(var(--ink)); }
.cart-count { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); background: hsl(var(--ink)); color: #fff; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; border: 2px solid hsl(var(--surface)); }
.cart-count[hidden] { display: none; }
.hamburger { display: none; }
.hdr--solid { background: hsl(var(--surface) / 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: hsl(var(--line) / 0.7); box-shadow: var(--shadow-sm); color: hsl(var(--ink)); }

/* ---- transparent header over the dark hero (homepage), solid on scroll ---- */
.hdr--over { background: transparent; color: #fff; border-bottom-color: transparent; }
.hdr--over .hdr__logo { filter: brightness(0) invert(1); }
.hdr--over .cart-count { border-color: hsl(var(--cta-dark)); background: #fff; color: hsl(var(--cta-dark)); }
.hdr--over .icon-btn:hover { background: #fff; }
.hdr--over .icon-btn:hover svg { color: hsl(var(--cta-dark)); }
.hdr--over .hdr__ext { color: #fff; border-color: hsl(0 0% 100% / 0.55); }
.hdr--over .hdr__ext:hover { background: #fff; color: hsl(var(--ink)); border-color: #fff; }
.hdr--over .hdr__nav a::after { background: #fff; }

/* ---- mega menu ---- */
.mega { position: absolute; top: 100%; left: 0; right: 0; background: hsl(var(--surface)); border-top: 1px solid hsl(var(--line) / 0.55); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity var(--duration-base) var(--ease-out-quart), transform var(--duration-slow) var(--ease-out-quint); }
.mega.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mega[hidden] { display: block; } /* JS toggles .is-open; keep in flow for animation */
.mega__inner { display: flex; flex-wrap: wrap; gap: 30px; padding: 32px 0 22px; align-items: flex-start; }
.mega__col { flex: 1 1 0; min-width: 0; }
.mega__col h5 { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0 0 12px; }
.mega__col a { display: block; padding: 6px 0; color: hsl(var(--ink)); text-decoration: none; font-size: 0.92rem; opacity: 0.82; transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-out-quart); }
.mega__col a:hover { opacity: 1; transform: translateX(3px); }
.mega__all { margin-top: 9px; display: inline-flex !important; align-items: center; gap: 5px; font-weight: 600; font-size: 0.82rem !important; opacity: 1 !important; white-space: nowrap; color: hsl(var(--ink)); }
.mega__all svg { width: 13px; height: 13px; }
.mega__feat { position: relative; display: block; flex: 0 0 clamp(240px, 24%, 320px); padding: 16px; border-radius: var(--radius-lg); background: hsl(var(--section-alt)); border: 1px solid hsl(var(--line) / 0.6); text-decoration: none; color: hsl(var(--ink)); transition: border-color var(--duration-base), box-shadow var(--duration-base); }
.mega__feat:hover { border-color: hsl(var(--ink) / 0.25); box-shadow: var(--shadow-sm); }
.mega__feat-media { aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: var(--radius-md); overflow: hidden; }
.mega__feat-media .ph { height: 100%; width: 100%; background: linear-gradient(135deg, hsl(214 60% 90%), hsl(214 48% 82%)); }
.mega__feat-img { height: 100%; width: 100%; object-fit: cover; object-position: center; display: block; }
.mega__feat-tag { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: hsl(var(--muted-foreground)); }
.mega__feat-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; margin-top: 4px; }
.mega__feat-sub { color: hsl(var(--muted-foreground)); font-size: 0.82rem; margin-top: 2px; }
.mega__feat-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.86rem; margin-top: 14px; white-space: nowrap; }
.mega__feat-cta svg { width: 14px; height: 14px; }
.mega__foot { flex: 0 0 100%; display: flex; gap: 28px; margin-top: 12px; padding-top: 16px; border-top: 1px solid hsl(var(--line) / 0.55); flex-wrap: wrap; }
.mega__foot span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
.mega__foot svg { width: 15px; height: 15px; }

/* ---- mobile drawer ---- */
.overlay { position: fixed; inset: 0; z-index: 120; background: hsl(222 44% 8% / 0.5); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out-quart); }
.overlay.is-open { opacity: 1; pointer-events: auto; }
.mnav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 121; width: min(86vw, 380px); background: hsl(var(--surface)); padding: 20px 24px 40px; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out-expo); overflow-y: auto; display: flex; flex-direction: column; }
.mnav.is-open { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mnav > a, .mnav__list a { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.03em; color: hsl(var(--ink)); text-decoration: none; padding: 13px 0; border-bottom: 1px solid hsl(var(--line) / 0.5); }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__ext { color: hsl(var(--muted-foreground)) !important; font-size: 1.05rem !important; }

/* ====== FOOTER ====== */
.ft { background: #0d0f14; color: hsl(0 0% 100% / 0.6); padding: clamp(48px, 6vw, 76px) 0 36px; margin-top: clamp(48px, 7vw, 96px); }
.ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.ft__brand-col { max-width: 280px; }
.ft__tag { font-size: 0.92rem; line-height: 1.55; margin: 18px 0 0; color: hsl(0 0% 100% / 0.55); }
.ft__col h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.ft__col a { display: block; padding: 7px 0; color: hsl(0 0% 100% / 0.6); font-size: 0.92rem; text-decoration: none; transition: color var(--duration-fast); }
.ft__col a:hover { color: #fff; }
.ft__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid hsl(0 0% 100% / 0.1); font-size: 0.82rem; color: hsl(0 0% 100% / 0.45); }
.ft__pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft__pay .pay { width: 50px; height: 32px; border: 1px solid hsl(0 0% 100% / 0.4); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; box-sizing: border-box; }
.ft__pay .pay svg { width: 100%; height: 100%; display: block; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .hdr__nav, .hdr__nav--right { display: none; }
  .hamburger { display: inline-flex; }
  .hdr__inner { grid-template-columns: auto 1fr auto; }
  .hdr__brand { justify-self: start; grid-column: 2; padding-left: 8px; }
}
@media (max-width: 768px) {
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap, .er-shell { padding: 0 18px; }
  /* #5: keep the three link columns side by side (like the mockup) instead of
     stacking; the brand/logo block is dropped on phones to match the mockup. */
  .ft__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ft__brand-col { display: none; }
  .ft__col h4 { font-size: 0.72rem; margin-bottom: 12px; }
  .ft__col a { font-size: 0.82rem; padding: 6px 0; }
  .ft__bottom { flex-direction: column; align-items: flex-start; }
}

/* ====== CART DRAWER +/- and X ICONS ======
   The qty <button> is display:flex and its width can collapse, so the SVG
   (a flex item) shrank to 0 — invisible but still clickable. flex:none stops
   the shrink; stroke pins the colour since <button> ignores inherited color.
   (Icon sizes come from woocommerce.css.) */
.er-cdrawer .icon-btn svg,
.er-cdrawer .qty button svg { flex: none !important; stroke: hsl(var(--ink)) !important; }
.er-cdrawer .icon-btn:hover svg { stroke: #fff !important; }


/* ====== HEADER SEARCH SHEET (mirrors prototype SearchSheet) ====== */
.er-search-scrim { position: fixed; inset: 0; background: hsl(var(--cta-dark) / 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 205; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out-quart); }
.er-search-scrim.is-open { opacity: 1; pointer-events: auto; }
.search-sheet { position: fixed; top: 0; left: 0; right: 0; z-index: 210; background: hsl(var(--surface)); box-shadow: var(--shadow-lg); transform: translateY(-100%); transition: transform var(--duration-slow) var(--ease-out-quart); padding-bottom: 18px; display: flex; flex-direction: column; max-height: 100vh; max-height: 100dvh; }
.search-sheet.is-open { transform: translateY(0); }
/* The sheet is a fixed panel and body scroll is locked while it's open, so the
   result list must scroll INSIDE the sheet. Otherwise a long list sits below the
   fold and the scroll gesture does nothing (the reported "scrolls but nothing
   moves" on phones). Cap the sheet to the viewport, pin the bar, scroll the body. */
.search-sheet .wrap { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.search-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.admin-bar .search-sheet { top: 32px; max-height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) { body.admin-bar .search-sheet { top: 46px; max-height: calc(100dvh - 46px); } }
@media screen and (max-width: 600px) { body.admin-bar .search-sheet { top: 46px; } }
.search-sheet__bar { display: flex; align-items: center; gap: 14px; height: 78px; margin: 0; flex: none; }
.search-sheet__bar .s-ic { width: 22px; height: 22px; color: hsl(var(--muted-foreground)); flex: none; }
.search-input { flex: 1; min-width: 0; border: none !important; outline: none; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0; margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -0.03em; color: hsl(var(--ink)); }
.search-input:focus { outline: none; }
.search-input::placeholder { color: hsl(var(--ink) / 0.3); }
/* universal pagination (blog, archives, search) — matches the prototype .pager */
.nav-links, .wp-block-query-pagination, .pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.navigation.pagination, .paging-navigation, nav.pagination, .wp-block-query-pagination { margin: clamp(32px,5vw,52px) 0 0; }
.nav-links .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid hsl(var(--line) / 0.85); background: hsl(var(--card)); color: hsl(var(--ink)); font-weight: 600; font-size: 0.92rem; text-decoration: none; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast); }
.nav-links .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover { border-color: hsl(var(--ink)); }
.nav-links .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers.current { background: hsl(var(--ink)); border-color: hsl(var(--ink)); color: #fff; }
.nav-links .page-numbers.dots { border: none; background: none; min-width: 22px; color: hsl(var(--muted-foreground)); }
/* close (X) button — force size + stroke so GP's svg{max-width:100%} can't collapse it */
.search-sheet__bar .icon-btn { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: hsl(var(--ink)); background: transparent; border: none; cursor: pointer; }
.search-sheet__bar .icon-btn:hover { background: hsl(var(--ink)); }
.search-sheet__bar .icon-btn:hover svg { stroke: #fff !important; }
.search-sheet__bar .icon-btn svg { width: 20px !important; height: 20px !important; min-width: 20px; max-width: none !important; flex: none !important; stroke: hsl(var(--ink)) !important; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-body { padding-top: 2px; }
.search-hint { color: hsl(var(--muted-foreground)); font-size: 0.92rem; padding: 8px 0 16px; margin: 0; }
.search-hint--label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 4px 0 14px; }
.search-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 2px 0 18px; }
.search-chips__lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-right: 4px; }
.search-chip { height: 34px; padding: 0 15px; border-radius: var(--radius-full); border: 1px solid hsl(var(--line) / 0.8); background: hsl(var(--surface)); color: hsl(var(--ink)); font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast); }
.search-chip:hover { border-color: hsl(var(--ink)); background: hsl(var(--ink)); color: #fff; }
.search-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 14px; }
.sr { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--radius-lg); border: 1px solid hsl(var(--line) / 0.7); cursor: pointer; text-decoration: none; color: hsl(var(--ink)); transition: border-color var(--duration-fast), background var(--duration-fast); }
.sr:hover { border-color: hsl(var(--ink) / 0.3); background: hsl(var(--ink) / 0.02); }
.sr__media { width: 64px; height: 50px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: hsl(var(--surface-muted)); }
.sr__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr__name { font-weight: 700; font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.01em; }
.sr__price { font-size: 0.85rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; margin-top: 3px; }
@media (max-width: 768px) { .search-res { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .search-res { grid-template-columns: 1fr; } }

/* ---- floating WhatsApp button (site-wide) ---- */
.er-wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #25d366; color: #fff; box-shadow: 0 6px 20px hsl(145 63% 30% / 0.4), 0 2px 6px rgba(0,0,0,0.15); transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.er-wa-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px hsl(145 63% 30% / 0.5), 0 3px 8px rgba(0,0,0,0.18); color: #fff; }
.er-wa-fab svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.er-wa-fab__pulse { position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: 0; animation: er-wa-pulse 2.4s ease-out infinite; }
@keyframes er-wa-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .er-wa-fab__pulse { animation: none; display: none; } }
@media (max-width: 600px) { .er-wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; } }