/* DeluxHomes: styles for the listing and facets package (WP3). Linked on every page by the core; keep DH's own look (serif headings, muted palette, --brass accent). */

/* ---------- home hero: the phone image sits in a <picture> ---------- */
.hero-bg picture { display: block; width: 100%; height: 100%; }

/* ---------- category intro ---------- */
.cat-intro { max-width: 680px; font-size: 15px; margin: 6px 0 0; }

/* ---------- filters: collapsed long lists ---------- */
.fgroup .fmore { display: none; }
.fgroup.expanded .fmore { display: flex; }
.fgroup-brands.expanded a.fmore { display: block; }
.fmore-btn {
  display: inline-block; margin-top: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-dark);
  border-bottom: 1px solid currentColor;
}
.fmore-btn:hover { color: var(--brass); }
.fgroup-brands a i { font-style: normal; font-size: 11px; color: var(--grey); margin-left: 4px; }
.fgroup-brands a.on i { color: inherit; }
.fclear {
  display: inline-block; margin: 14px 0 4px; font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.fclear:hover { color: var(--brass); border-color: var(--brass); }

/* mobile filter panel header with close button (inserted by listing.js) */
.filters-head { display: none; }
@media (max-width: 1080px) {
  .filters.open .filters-head {
    display: flex; align-items: center; justify-content: space-between; flex: 0 0 100%;
    padding: 12px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
  }
  .filters-head strong { font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
  .filters-close {
    width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
    background: var(--paper); color: var(--ink); cursor: pointer; padding: 0;
  }
  .filters-close:hover { border-color: var(--brass); color: var(--brass); }
  .filters-close svg { width: 16px; height: 16px; }
  .filters .fclear { flex: 0 0 100%; }
}
@media (max-width: 560px) {
  .filters.open { gap: 0 18px; }
  .filters.open .fgroup { flex: 1 1 100%; }
}

/* ---------- product cards ---------- */
.pcard-img picture { display: block; width: 100%; height: 100%; }
.pcard-badge.out { background: var(--grey); }
.pcard-badge.outlet { background: var(--ink); }
.pcard.is-sold-out .pcard-img img { opacity: .72; }
.pcard-price .pct, .pdp-price .pct { color: var(--brass-dark); font-weight: 600; margin-left: 6px; }
.pcard-price .pct { font-size: 12.5px; }
.pdp-price .pct { font-size: 15px; }
.pcard-lowest, .pdp-lowest { font-size: 11.5px; color: var(--grey); margin: 3px 0 0; line-height: 1.4; }
.pdp-lowest { font-size: 12.5px; margin: 0 0 6px; }

/* ---------- pagination ---------- */
.pagination { flex-wrap: wrap; }
.pagination .pg-gap { border-color: transparent; background: none; }

/* ---------- product page ---------- */
.gallery-main picture { display: block; width: 100%; height: 100%; }
.gallery-thumbs picture { display: block; width: 100%; height: 100%; }
.pdp-outlet {
  display: inline-block; margin: -4px 0 10px; padding: 4px 10px; border-radius: 3px; background: var(--ink); color: #fff;
  font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.stock.sold-out { color: var(--ink-soft); }
.stock.sold-out::before { background: var(--grey); }
.pdp-usps {
  display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 22px 0 6px; padding: 16px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pdp-usps .usp { white-space: normal; }

/* ---------- buying guide / rest of the intro / brand story, below the products ---------- */
.cat-guide { padding: 10px 0 80px; }
.cat-guide .wrap > * { max-width: 760px; }
.cat-guide .guide-body { border-top: 1px solid var(--line); padding-top: 34px; color: var(--ink-soft); font-size: 15px; }
.cat-guide h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 26px 0 10px; color: var(--ink); }
.cat-guide .guide-body > h2:first-child, .brand-story h2 { margin-top: 0; }
.brand-story h2 { padding-top: 34px; border-top: 1px solid var(--line); }
.brand-story .guide-body { border-top: 0; padding-top: 6px; }
.cat-guide p { margin: 0 0 14px; }
.cat-guide a { color: var(--brass-dark); border-bottom: 1px solid rgba(176, 141, 87, .35); }
.cat-guide a:hover { color: var(--brass); }
.guide-faq { margin-top: 10px; }
.guide-faq h3 { font-size: 19px; margin: 20px 0 6px; color: var(--ink); }
.guide-more { margin-top: 22px; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; }