/* ==========================================================================
   Fursys Theme — Page-specific sections (Home, Category, Product, Quote
   form, Thank you, Projects, About, Contact).
   ========================================================================== */

/* ---------- Hero (Home) ---------- */
.hero {
  position: relative; height: 680px; overflow: hidden; background: var(--color-header);
}
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.1) 55%, transparent);
}
.hero__content {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 64px; color: #fff;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 60px;
}
.hero__copy { max-width: 760px; }
.hero__rule { width: 56px; height: 3px; background: var(--color-red); margin-bottom: 26px; }
.hero__copy h1 { margin: 0 0 20px; font-size: var(--fs-h1-max); line-height: 1.04; font-weight: 700; }
.hero__copy p { margin: 0; font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); max-width: 560px; }
.hero__ctas { display: grid; gap: 14px; flex: none; }
.hero__ctas .btn { padding: 17px 40px; font-size: 16px; }

/* ---------- Stats strip ---------- */
.stats-strip {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding: 30px var(--gutter); background: var(--color-header); color: #fff;
  border-top: 1px solid var(--color-border-onDark-strong);
}
.stats-strip__group { display: flex; gap: 64px; flex-wrap: wrap; }
.stats-strip__stat b { font-size: 26px; font-weight: 700; }
.stats-strip__stat span { font-size: 14px; color: var(--color-text-secondary); margin-left: 10px; }
.stats-strip__tag { font-size: 14px; color: var(--color-text-secondary); align-self: center; }

/* ---------- Category rows ("Every space, covered.") ---------- */
/* "Browse by category" band. Was a .container with an inline padding shorthand,
   which overrode the class's left/right gutters and pushed the grid to the
   window edge — the gutters live here now, matching every sibling section. */
.collections-section { padding: 96px var(--gutter) 72px; }

.cat-rows-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gutter); padding: 24px var(--gutter) var(--section-pad); align-items: start; }
.cat-rows a.cat-row {
  display: flex; justify-content: space-between; align-items: center; padding: 20px 0;
  border-top: 1px solid var(--color-border-rule); font-size: 22px; font-weight: 500;
}
.cat-rows a.cat-row span:last-child { color: var(--color-text-faint); font-size: 15px; }
.cat-rows-more { display: inline-block; margin-top: 32px; font-size: 15px; font-weight: 500; color: var(--color-red); }
.cat-feature { display: grid; grid-template-rows: 1fr auto; background: var(--color-header); }
.cat-feature__image { height: 480px; overflow: hidden; }
.cat-feature__image img { width: 100%; height: 100%; object-fit: cover; }
.cat-feature__foot { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; color: #fff; }
.cat-feature__foot p:first-child { margin: 0; font-size: 17px; font-weight: 700; }
.cat-feature__foot p:last-child { margin: 3px 0 0; font-size: 13.5px; color: var(--color-text-secondary); }
.cat-feature__foot a { color: var(--color-red); font-size: 14px; font-weight: 500; }

/* ---------- Featured series band ---------- */
.featured-band { background: #fff; border-top: 1px solid var(--color-border-card); border-bottom: 1px solid var(--color-border-card); padding: var(--section-pad) var(--gutter); }
.featured-card__image { height: 250px; background: var(--color-well); display: grid; place-items: center; }
.featured-card__image img { max-width: 85%; max-height: 85%; object-fit: contain; }
.featured-card__row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 2px 0; }
.featured-card__row a.name { font-size: 17px; font-weight: 700; }
.featured-card__row a.add { font-size: 13.5px; color: var(--color-red); font-weight: 500; }
.featured-card p.tag { margin: 4px 0 0; padding: 0 2px; font-size: 13.5px; color: var(--color-text-secondary); }

/* ---------- How we work ---------- */
.how-we-work { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: var(--section-pad) var(--gutter); align-items: center; }
.how-we-work h2 { margin: 0 0 22px; font-size: var(--fs-h2-max); font-weight: 700; }
.how-we-work p { margin: 0 0 32px; font-size: 17px; line-height: 1.65; color: var(--color-text-muted); }

/* ---------- Showroom band ---------- */
.showroom-band { position: relative; height: 400px; overflow: hidden; background: var(--color-header); }
.showroom-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.showroom-band__content { position: relative; height: 100%; display: grid; place-items: center; text-align: center; color: #fff; }
.showroom-band__content h2 { margin: 0 0 14px; font-size: var(--fs-h2-max); font-weight: 700; }
.showroom-band__content p { margin: 0 0 28px; font-size: 16.5px; color: rgba(255, 255, 255, 0.85); }

/* ---------- Generic page hero (Products / Category / Projects / Contact / Form) ---------- */
.page-hero { padding: 56px var(--gutter) 0; }
.page-hero--wide { padding: var(--section-pad) var(--gutter) 0; }
.page-hero h1 { margin: 0 0 12px; font-size: 48px; font-weight: 700; }
.page-hero p.lede { max-width: 640px; margin: 0 0 44px; }
.page-body { padding: 0 var(--gutter) var(--section-pad); }

/* ---------- Category page ---------- */
.category-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 24px; flex-wrap: wrap; }
.category-head p.lede { max-width: 560px; margin: 0; font-size: 16.5px; }
.category-count { font-size: 14px; color: var(--color-text-tertiary); }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
.product-gallery__main { background: var(--color-well); height: 520px; display: grid; place-items: center; }
.product-gallery__main img { max-width: 86%; max-height: 86%; object-fit: contain; }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.product-gallery__thumbs > * { height: 110px; }
.product-gallery__thumbs img { max-width: 78%; max-height: 78%; object-fit: contain; margin: auto; }
.product-info .eyebrow { letter-spacing: 0.2em; margin-bottom: 8px; }
.product-info h1 { margin: 0 0 12px; font-size: 44px; font-weight: 700; }
.product-info > p.desc { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--color-text-muted); }
.product-block { border-top: 1px solid var(--color-border-rule); padding: 20px 0; }
.product-block > p.block-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.product-actions { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.product-actions .btn { flex: 1; padding: 16px; font-size: 16px; }
.product-note { margin: 14px 0 0; font-size: 13.5px; color: var(--color-text-secondary); }
.related-section { margin-top: 88px; }
.related-section h2 { margin: 0 0 28px; font-size: 28px; font-weight: 700; }
.related-card__image { height: 200px; display: grid; place-items: center; background: var(--color-well); }
.related-card__image img { max-width: 80%; max-height: 80%; object-fit: contain; }
.related-card__row { display: flex; justify-content: space-between; padding: 14px 18px; }
.related-card__row span:first-child { font-size: 15.5px; font-weight: 500; }
.related-card__row span:last-child { color: var(--color-red); }

/* Mobile sticky add-to-quote bar */
.sticky-add-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  background: #fff; border-top: 1px solid var(--color-border-card); padding: 12px 16px;
  gap: 12px; align-items: center;
}
.sticky-add-bar .btn { flex: 1; padding: 15px; font-size: 15px; }

/* ---------- Request Quote form page ---------- */
.quote-form-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
.quote-form-card { background: #fff; border: 1px solid var(--color-border-card); padding: 44px; display: grid; gap: 20px; }
.quote-form-card .btn { padding: 16px; font-size: 16px; }
.quote-summary { background: var(--color-header); color: #fff; padding: 36px; }
.quote-summary > p.title { margin: 0 0 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.quote-summary__empty p { margin: 0 0 16px; font-size: 14.5px; color: var(--color-text-secondary); }
.quote-summary__empty a { color: var(--color-red); font-size: 14px; font-weight: 500; }
.quote-summary__items { display: grid; gap: 14px; }
.quote-summary__item { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--color-border-onDark-strong); padding-bottom: 14px; }
.quote-summary__item .thumb { width: 56px; height: 56px; background: #fff; display: grid; place-items: center; flex: none; }
.quote-summary__item .thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.quote-summary__item p:first-child { margin: 0; font-size: 15px; font-weight: 500; }
.quote-summary__item p:last-child { margin: 2px 0 0; font-size: 13px; color: var(--color-text-secondary); }

/* ---------- Thank you ---------- */
.thanks-page { min-height: 60vh; display: grid; place-items: center; padding: var(--section-pad) var(--gutter); text-align: center; }
.thanks-page__inner { max-width: 560px; }
.thanks-page .check-circle { width: 68px; height: 68px; font-size: 32px; }
.thanks-page h1 { margin: 0 0 16px; font-size: 44px; font-weight: 700; }
.thanks-page p.lede { margin: 0 0 12px; font-size: 17px; line-height: 1.6; }
.thanks-page p.phone-fallback { margin: 0 0 36px; font-size: 15px; color: var(--color-text-secondary); }
.thanks-page .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Projects ---------- */
/* display:block is load-bearing — this class is applied to an <a>, and an inline
   element ignores both height and overflow, which let the image render at its
   natural height and pushed the card body out past the card box and under the
   CTA band below the grid. */
.project-card__image { display: block; height: 280px; overflow: hidden; background: var(--color-well); }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body { padding: 18px 22px; }
.project-card__body p:first-child { margin: 0; font-size: 16.5px; font-weight: 700; }
.project-card__body p:last-child { margin: 4px 0 0; font-size: 13.5px; color: var(--color-text-secondary); }
.projects-cta-band {
  /* Uses the shared section rhythm so the gap scales down on tablet/mobile
     with --section-pad instead of holding a fixed 56px everywhere. */
  margin-top: var(--section-pad); background: var(--color-header); color: #fff; padding: 48px 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
}
.projects-cta-band h2 { margin: 0 0 8px; font-size: 28px; font-weight: 700; }
.projects-cta-band p { margin: 0; font-size: 15.5px; color: var(--color-text-onDark-secondary); }

/* ---------- About ---------- */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: 88px var(--gutter); align-items: center; }
.about-intro h1 { margin: 0 0 22px; font-size: 46px; font-weight: 700; }
.about-intro p { margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: var(--color-text-muted); }
.about-intro__photo { height: 460px; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border-card); border-bottom: 1px solid var(--color-border-card); background: #fff; }
.about-stats > div { padding: 36px; border-right: 1px solid var(--color-border-card); }
.about-stats > div:last-child { border-right: none; }
.about-stats p:first-child { margin: 0; font-size: 32px; font-weight: 700; }
.about-stats p:last-child { margin: 4px 0 0; font-size: 14px; color: var(--color-text-secondary); }
.about-dealer { padding: 88px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; }
.about-dealer h2 { margin: 0 0 18px; font-size: 32px; font-weight: 700; }
.about-dealer p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.65; color: var(--color-text-muted); }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact-info { display: grid; gap: 32px; }
.contact-info .block-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-info p.value { margin: 0; font-size: 16.5px; line-height: 1.6; }
.contact-info p.sub { margin: 6px 0 0; font-size: 14.5px; color: var(--color-text-secondary); }
.contact-map { height: 260px; border: 0; width: 100%; }
.contact-form-card { background: #fff; border: 1px solid var(--color-border-card); padding: 44px; }
.contact-form-card h2 { margin: 0 0 24px; font-size: 24px; font-weight: 700; }
.contact-sent { text-align: center; padding: 48px 0; }
.contact-sent .check-circle { width: 56px; height: 56px; font-size: 26px; }
.contact-sent h2 { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
.contact-sent p { margin: 0; font-size: 15.5px; color: var(--color-text-secondary); }

/* ---------- All-products page ---------- */
.all-cats-grid .card__body p { margin: 3px 0 0; font-size: 13.5px; color: var(--color-text-secondary); }