/* ==========================================================================
   Fursys Theme — Responsive breakpoints.
   Desktop design width: 1440px. Mobile design width: 390px.
   Tablet (768–1099px) interpolates sensibly between the two per handoff notes.
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
  :root { --gutter: 40px; --section-pad: 64px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cat-rows-section,
  .how-we-work,
  .about-intro,
  .about-dealer,
  .contact-layout,
  .quote-form-layout { grid-template-columns: 1fr; }
  .collections-section { padding: var(--section-pad) var(--gutter); }
  .cat-feature__image { height: 320px; }
  .hero { height: 560px; }
  .hero__copy h1 { font-size: 48px; }
  .product-detail { grid-template-columns: 1fr; }
}

/* ---------- Mobile (matches Fursys Mobile Prototype, 390px design width) ---------- */
@media (max-width: 767px) {
  :root { --gutter: var(--gutter-mobile); --section-pad: var(--section-pad-mobile); --grid-gap: var(--grid-gap-mobile); }

  .utility-bar { display: none; }

  .site-header { padding: 14px 18px; }
  .brand-lockup { gap: 10px; }
  .brand-lockup__word { font-size: 15px; }
  .brand-lockup__dealer { font-size: 15px; }
  .brand-lockup__sub { font-size: 8px; }
  .brand-lockup__sep { font-size: 15px; }
  .primary-nav { display: none; }
  .mobile-header { display: flex; align-items: center; gap: 6px; }

  .quote-btn { position: relative; width: 44px; height: 44px; padding: 0; border: none; display: grid; place-items: center; }
  .quote-btn span:first-child { display: none; }
  .quote-btn__icon { font-size: 17px; color: #fff; }
  .quote-btn__badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; font-size: 10.5px; }

  .hero { height: 520px; }
  .hero__content { left: 20px; right: 20px; bottom: 28px; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { max-width: none; }
  .hero__copy h1 { font-size: 36px; line-height: 1.08; margin-bottom: 12px; }
  .hero__copy p { font-size: 15.5px; max-width: none; margin-bottom: 22px; }
  .hero__rule { width: 44px; margin-bottom: 18px; }
  .hero__ctas .btn { padding: 15px; font-size: 15.5px; }

  .stats-strip { grid-template-columns: repeat(3, 1fr); display: grid; padding: 18px 20px; text-align: center; gap: 8px; }
  .stats-strip__group { display: contents; }
  .stats-strip__stat { display: grid; }
  .stats-strip__stat b { font-size: 19px; }
  .stats-strip__stat span { font-size: 11.5px; margin-left: 0; display: block; }
  .stats-strip__tag { display: none; }

  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .featured-band .grid-4 { grid-template-columns: 1fr 1fr; }

  .cat-rows-section { padding: 44px 20px; gap: 0; }
  .cat-rows-section .cat-feature { display: none; } /* feature image card collapses on mobile per prototype */
  .cat-rows a.cat-row { font-size: 17px; padding: 16px 0; }

  .how-we-work { padding: 44px 20px; }
  .how-we-work h2 { font-size: 28px; }

  .showroom-band { height: auto; padding: 52px 20px; text-align: center; }
  .showroom-band__content h2 { font-size: 26px; }

  .page-hero, .page-hero--wide { padding: 32px 20px 0; }
  .page-hero h1 { font-size: 32px; }
  .page-body { padding: 0 20px var(--section-pad); }

  .category-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .chip-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; margin-bottom: 24px; }
  .chip { flex: none; }

  .empty-state { padding: 40px 24px; }

  .product-detail { grid-template-columns: 1fr; gap: 0; }
  .product-gallery__main { height: 300px; }
  .product-actions { display: none; } /* replaced by sticky-add-bar on mobile */
  .sticky-add-bar { display: flex; }
  .single-product-content { padding-bottom: 88px; }

  .related-section .grid-4 { grid-template-columns: 1fr 1fr; }

  .quote-form-layout { gap: 0; }
  .quote-form-card { padding: 28px 20px; }
  .field-row-2 { grid-template-columns: 1fr; }
  .quote-summary { padding: 28px 20px; margin-top: 24px; }

  .thanks-page { padding: 64px 20px; }
  .thanks-page h1 { font-size: 32px; }

  .about-intro { padding: 32px 20px; grid-template-columns: 1fr; gap: 20px; }
  .about-intro h1 { font-size: 30px; }
  .about-intro__photo { height: 220px; order: -1; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-stats > div { border-right: 1px solid var(--color-border-card); border-bottom: 1px solid var(--color-border-card); padding: 20px; }
  .about-stats > div:nth-child(2n) { border-right: none; }
  .about-dealer { padding: 32px 20px; grid-template-columns: 1fr; }

  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .contact-form-card { padding: 28px 20px; }

  .site-footer { padding: 44px 20px 24px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }

  .quote-drawer { width: 100%; }

  .projects-cta-band { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
  .mobile-menu__links a { font-size: 22px; }
}


/* ===== THEME-B-TOF (staging brand differentiation) ===== */
:root{
  --color-red:#C8102E;      /* TOF red (deeper crimson vs Fursys #E60012) */
  --color-red-dark:#A50D24;
  --tof-charcoal:#3A3A3A;
}
.hero__copy h1, main h1, main h2, .section-head h2, .section-head h3,
h1.section-title, h2.section-title{
  font-family:Georgia,"Times New Roman",serif !important;
  letter-spacing:-.01em;
}
.site-header{ border-top:4px solid var(--color-red); }
.hero__copy h1{ position:relative; padding-bottom:18px; }
.hero__copy h1::after{ content:""; position:absolute; left:0; bottom:0; width:88px; height:5px; background:var(--color-red); }
.stats-strip{ background:var(--color-red) !important; }
.stats-strip *{ color:#fff !important; }
.site-footer{ border-top:4px solid var(--color-red); }
/* ===== END THEME-B-TOF ===== */


/* ===== THEME-B-PRODUCT (Gate-1 product page enrichment) ===== */
.product-info .tof-lead{ font-size:1.14rem; line-height:1.6; color:var(--tof-charcoal,#3A3A3A); margin:0 0 1.4rem; }
.product-info .tof-block{ margin:1.6rem 0; }
.product-info .tof-h{ font-family:Georgia,"Times New Roman",serif; font-size:1.15rem; letter-spacing:-.01em; color:var(--tof-charcoal,#3A3A3A); position:relative; padding-left:14px; margin:0 0 .7rem; }
.product-info .tof-h::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; background:var(--color-red,#C8102E); }
.tof-spec{ width:100%; border-collapse:collapse; font-size:.95rem; margin:0; }
.tof-spec th, .tof-spec td{ text-align:left; vertical-align:top; padding:9px 14px; border-bottom:1px solid #EAE8E5; }
.tof-spec th{ width:38%; font-weight:600; color:#6E6A63; background:#FAFAF8; white-space:nowrap; }
.tof-spec td{ color:var(--tof-charcoal,#3A3A3A); }
.tof-list{ margin:0; padding-left:1.1rem; }
.tof-list li{ margin:.32rem 0; line-height:1.5; }
.tof-fin{ line-height:1.6; color:var(--tof-charcoal,#3A3A3A); margin:0; }
.tof-specnote{ font-size:.82rem; color:#8A867E; margin:1.4rem 0 0; font-style:italic; }
body.postid-232 .product-info .product-block,
body.postid-123 .product-info .product-block,
body.postid-278 .product-info .product-block,
body.postid-53 .product-info .product-block,
body.postid-167 .product-info .product-block{ display:none !important; }
/* ===== END THEME-B-PRODUCT ===== */

/* THEME-B-PRODUCT-B1 (batch 1 enriched: storage + lounge/booth flagships) */
body.postid-173 .product-info .product-block,
body.postid-171 .product-info .product-block,
body.postid-169 .product-info .product-block,
body.postid-316 .product-info .product-block,
body.postid-155 .product-info .product-block{ display:none !important; }

/* THEME-B-PRODUCT-GLOBAL: full catalog enriched via post_content; hide generic hardcoded blocks on all product pages */
body.single-product .product-info .product-block{ display:none !important; }

/* ===== THEME-B-IDENTITY-R1 (rebuild: TOF company logo, menu, header, home title) ===== */
/* red top bar on header */
.site-header{ border-top:6px solid #C8102E !important; }
/* replace FURSYS brand-lockup with Total Office Furniture + red bar mark */
.brand-lockup{ gap:10px !important; align-items:center !important; }
.brand-lockup__mark, .brand-lockup__sep, .brand-lockup__dealer{ display:none !important; }
.brand-lockup::before{ content:none; width:13px; height:26px; background:#C8102E; border-radius:2px; display:inline-block; flex:0 0 auto; }
.brand-lockup::after{ content:none; font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:18px; letter-spacing:.3px; color:#3A3A3A; white-space:nowrap; }
/* hide the WP page-title 'Home' printed by page.php above the homepage content */
body.home .page-body > h1{ display:none !important; }
body.home .page-body{ padding-top:0 !important; }
/* ===== END THEME-B-IDENTITY-R1 ===== */


/* ===== THEME-B-LANDING-FULLBLEED (fix: landing pages full-width so calc(50%-50vw) sections align) ===== */
body.home .page-body,
body.page-id-690 .page-body,
body.page-id-691 .page-body,
body.page-id-692 .page-body{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.home .page-body > div[style*="100vw"],
body.page-id-690 .page-body > div[style*="100vw"],
body.page-id-691 .page-body > div[style*="100vw"],
body.page-id-692 .page-body > div[style*="100vw"]{
  margin-left:0 !important;
  width:100% !important;
}


/* ===== THEME-B-LANDING-HIDEH1 (hide theme page-title H1 on landing pages; hero carries the title) ===== */
body.page-id-690 .page-body > h1,
body.page-id-691 .page-body > h1,
body.page-id-692 .page-body > h1{ display:none !important; }


/* ==========================================================================
   Full-width page body — generalised 2026-08-14
   The rules above only released the 900px cap for four hardcoded page IDs
   (home, 690 rooms, 691 brands, 692 services). Every other page using the
   same hero layout stayed pinned to a 900px column on the left, and printed
   its title twice. Key off the layout class instead of the ID list so all
   pages that use it behave the same. Delete this block to revert.
   ========================================================================== */
.page-body.page-hero--wide {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.page-body.page-hero--wide > div[style*="100vw"] {
	margin-left: 0;
	width: 100%;
}

/* Hide the theme's page-title H1 only where the content supplies its own
   heading, so pages without one keep an H1 for SEO. */
.page-body.page-hero--wide:has(section h1, div h1) > h1 {
	display: none;
}


/* ---- SQUARE PRODUCT TILES — fit whole image, no cropping (2026-08-14) ---- */
.js-product-grid .card__image-well,
.single-product .product-hero__media.card__image-well {
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  height: auto !important;
  padding: 16px;
  box-sizing: border-box;
}
.js-product-grid .card__image-well img,
.single-product .product-hero__media.card__image-well img {
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
/* Safety net: any image well with an inline pixel height keeps its image inside the box */
.card__image-well { position: relative; }
.card__image-well img { max-width: 92%; max-height: 100%; object-fit: contain; }

/* ---- HEADER SOCIAL + SEARCH (2026-08-14) ---- */
.utility-bar > *:first-child { flex: 1 1 auto; min-width: 0; }
.utility-bar__right { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: nowrap; }

.utility-bar__social { display: inline-flex; align-items: center; gap: 13px; margin-right: 18px; }
.utility-bar__social a.social-ico { display: inline-flex; align-items: center; justify-content: center; color: inherit; transition: color .15s ease, transform .15s ease; }
.utility-bar__social a.social-ico:hover { color: #fff; transform: translateY(-1px); }
.utility-bar__social svg { display: block; }

.header-search {
  display: flex; align-items: center;
  flex: 0 0 auto; width: 230px; max-width: 230px;
  height: 32px; margin: 0 16px 0 0; padding: 0 3px 0 13px;
  border: 1px solid #3a3833; border-radius: 999px; background: #1b1b1b;
}
.header-search:focus-within { border-color: #C8102E; background: #202020; }
.header-search__input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; font-size: 13px; line-height: 1; color: #e8e5e0; }
.header-search__input::placeholder { color: #8a867e; }
.header-search__btn { flex: none; border: 0; background: transparent; cursor: pointer; color: #d5d2cd; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; padding: 0; }
.header-search__btn:hover { color: #fff; background: #C8102E; }

/* ---- HEADER FIT: logo must never collapse; 9+ menu items need an earlier mobile switch ---- */
.brand-lockup { flex: 0 0 auto !important; }
.brand-lockup__logo { width: auto !important; max-width: none; }
@media (max-width: 1500px) { .primary-nav { gap: 24px; } .primary-nav ul { gap: 24px; } }
@media (max-width: 1400px) { .primary-nav { gap: 16px; font-size: 14px; } .primary-nav ul { gap: 16px; } }
@media (max-width: 1219px) {
  .primary-nav { display: none !important; }
  .mobile-header { display: flex !important; align-items: center; gap: 10px; }
}
@media (max-width: 900px) { .utility-bar__social { gap: 11px; margin-right: 12px; } }
@media (max-width: 820px) { .header-search { display: none; } }

/* ---- MOBILE LAYOUT PASS (2026-08-14) ----
   Fixes: no side gutter on phones, hardcoded column grids overflowing the
   viewport, and the calc(50% - 50vw) full-bleed trick creating sideways scroll.
   This block must stay LAST in this file so it wins the cascade. */
@media (max-width: 900px) {
  body { overflow-x: clip; }

  .site-header { padding-left: 16px !important; padding-right: 16px !important; }
  .brand-lockup__logo { height: 30px !important; }

  /* One consistent 20px gutter on every page, including the full-bleed ones */
  .page-body,
  .page-body.page-hero--wide,
  body.home .page-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: none !important;
  }

  /* Full-bleed blocks fill the column instead of 100vw (100vw includes the
     scrollbar, which is what pushed content off-screen) */
  .page-body [style*="100vw"] { margin-left: 0 !important; width: 100% !important; }

  /* Inner wrappers already carrying their own 20px must not double up */
  .page-body [style*="padding:0 20px"],
  .page-body [style*="padding: 0 20px"] { padding-left: 0 !important; padding-right: 0 !important; }
  .page-body section { padding-left: 0 !important; padding-right: 0 !important; }

  /* Hardcoded column counts collapse instead of running off the screen */
  .page-body [style*="repeat(4,1fr)"], .page-body [style*="repeat(4, 1fr)"],
  .page-body [style*="repeat(3,1fr)"], .page-body [style*="repeat(3, 1fr)"],
  .page-body [style*="repeat(2,1fr)"], .page-body [style*="repeat(2, 1fr)"],
  .page-body [style*="1.1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Decorative panels positioned off the right edge */
  .page-body [style*="right:-"] { display: none !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .page-body [style*="repeat(4,1fr)"], .page-body [style*="repeat(4, 1fr)"],
  .page-body [style*="repeat(3,1fr)"], .page-body [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- GUTTER SPECIFICITY GUARD (2026-08-14) ----
   Some pages carry per-page-id rules (body.page-id-NNN .page-body { padding:0 !important })
   that outrank a plain .page-body selector. html body[class] raises specificity above
   those without having to enumerate every page id. */
@media (max-width: 900px) {
  html body[class] .page-body,
  html body[class] .page-body.page-hero--wide,
  html body[class] main > div,
  html body[class] main > article {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: none !important;
  }
  html body[class] .page-body [style*="100vw"] { margin-left: 0 !important; width: 100% !important; }
  html body[class] .page-body [style*="padding:0 20px"],
  html body[class] .page-body [style*="padding: 0 20px"],
  html body[class] .page-body section { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- CARD GRID + CHIP ROW ON MOBILE (2026-08-14) ----
   .grid-4 tracks have a min width that overflows a 335px content column, which
   dragged the whole document 16px wide on category archives. minmax(0,1fr) lets
   the tracks shrink. The filter chip row keeps its horizontal swipe but is
   bounded so it scrolls instead of widening the page. */
@media (max-width: 900px) {
  .grid-4,
  .js-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chip-row { max-width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 420px) {
  .grid-4,
  .js-product-grid { gap: 12px !important; }
}

/* ---- NO SIDEWAYS SCROLL, ALL WIDTHS (2026-08-14) ----
   Full-bleed blocks use width:100vw, and 100vw includes the scrollbar, so on
   desktop the document sat ~8px wider than the viewport and could be nudged
   sideways. overflow-x:clip removes that without creating a scroll container,
   so the homepage's position:sticky panels keep working (overflow:hidden would
   break them). Verified: sticky still pins at scrollY 1200. */
html { overflow-x: clip; }

/* ---- FULL-BLEED WITHOUT 100VW (2026-08-14) ----
   .page-body is already the full width of the body on hero pages, so the
   margin-left:calc(50% - 50vw) + width:100vw trick added nothing except an
   overflow equal to the scrollbar width (measured: block was 1440px at left
   -7px inside a 1425px body). width:100% gives the identical visual result
   with zero horizontal scroll. Applies at every width. */
.page-body [style*="100vw"] { margin-left: 0 !important; width: 100% !important; }

/* ---- PLACEHOLDER FOR PRODUCTS WITHOUT A PHOTO (2026-08-14) ----
   42 of 503 products have no image yet. Without this they render as a bare grey
   box with raw fallback text, which reads as a broken page. This makes the gap
   look deliberate and tells the customer what to do instead. */
.card__image-well:not(:has(img)),
.product-gallery__main:not(:has(img)) {
  position: relative;
  background: #F4F3F1;
  font-size: 0 !important;
  color: transparent !important;
}
.card__image-well:not(:has(img))::before,
.product-gallery__main:not(:has(img))::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -30px);
  background: no-repeat center/contain url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c4bb' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.5' y='5.5' width='19' height='14' rx='2.5'/%3E%3Ccircle cx='12' cy='12.5' r='3.5'/%3E%3Cpath d='M7 5.5l1.2-2h7.6l1.2 2'/%3E%3C/svg%3E");
  opacity: .9;
}
.card__image-well:not(:has(img))::after,
.product-gallery__main:not(:has(img))::after {
  content: "Photo coming soon";
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(6px);
  text-align: center;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: #a9a49b;
}
.product-gallery__main:not(:has(img))::after {
  content: "Photo coming soon \2014 call (714) 736-5400";
  font-size: 13px; letter-spacing: .04em; text-transform: none; font-weight: 600;
}