/* =========================================================
   PINNACLE COMFORTCARE — MASTER GLOBAL CSS
   (Shared across index + category pages + many product pages)
   ========================================================= */

/* ------------------------------
   Root Design System
------------------------------ */
:root{
  --bg:#ffffff;
  --surface:#f6f7f9;
  --ink:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --border:#d9dee6;
  --hairline:#e9edf3;

  --teal:#0f6e73;
  --teal-dark:#0b5b5f;
  --teal-weak:rgba(15,110,115,.10);
  --teal-border:rgba(15,110,115,.35);

  --max:1240px;
  --gutter:24px;

  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.imageWrap {
  position: relative;
}

.variantLabel {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* ------------------------------
   Base / Reset
------------------------------ */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ------------------------------
   Utilities
------------------------------ */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
/* 12-column helper (used on index + category pages) */
.grid-12{
  grid-template-columns: repeat(12, 1fr);
}
.grid-12 > *{
  grid-column: span 12;
}

/* ComfortCare category image panel sizing + placeholder (used on comfortCare.html) */
.media .img::after{

  position:absolute;
  left:16px; right:16px; bottom:16px;
  color:rgba(255,255,255,.75);
  font-size:12px;
  line-height:1.35;
  letter-spacing:.02em;
}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:16px}

.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.rule{border-top:1px solid var(--hairline)}

.section{
  padding:72px 0;
  border-top:1px solid var(--hairline);
}
.section:first-of-type{border-top:none}

.eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
  font-weight:700;
}

/* ------------------------------
   Buttons (shared)
------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--surface);border-color:#cfd6e0}

.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-dark);border-color:var(--teal-dark)}

.btn.outline{background:#fff;border-color:var(--teal-border);color:var(--teal)}
.btn.outline:hover{background:var(--teal-weak);border-color:rgba(15,110,115,.45)}

/* ------------------------------
   Header / Topbar / Nav (shared)
------------------------------ */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}

.topbar{
  border-bottom:1px solid var(--hairline);
  background:var(--surface);
  font-size:13px;
  color:var(--muted);
}

.topbar .inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  flex-wrap:wrap;
}

.topbar .meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
}
.topbar .meta a{
  text-decoration:underline;
  text-underline-offset:3px;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:260px;
}
.brand img{width:170px;height:auto}

nav.primary{
  display:flex;
  gap:18px;
  align-items:center;
  font-weight:650;
  color:rgba(15,23,42,.86);
}
nav.primary a{
  padding:10px 10px;
  border:1px solid transparent;
}
nav.primary a:hover{
  border-bottom:1px solid var(--border);
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  min-width:320px;
}

/* ------------------------------
   Hero (index) + PageHead (category/product)
------------------------------ */
.hero{
  padding:84px 0 56px;
  background:linear-gradient(180deg,#fff 0%,#fff 55%,#f7f8fa 100%);
  border-bottom:1px solid var(--hairline);
}
.heroGrid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:42px;
  align-items:start;
}
.heroCtas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.pageHead{
  padding:54px 0 24px;
  background:linear-gradient(180deg,#fff 0%,#fff 55%,#f7f8fa 100%);
  border-bottom:1px solid var(--hairline);
}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:var(--muted2);
  margin-bottom:14px;
}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.slash{opacity:.6}

h1{
  margin:14px 0 10px;
  font-size:48px;
  line-height:1.06;
  letter-spacing:-0.03em;
}
.pageHead h1{margin:0;font-size:44px;line-height:1.08}

.lead{
  margin:0 0 16px;
  font-size:18px;
  color:var(--muted);
  max-width:72ch;
}
.pageHead .lead{
  margin:12px 0 0;
  font-size:16px;
  max-width:90ch;
}
.headCtas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ------------------------------
   Tiles (category grids)
------------------------------ */
.tile{
  border:1px solid var(--border);
  background:#fff;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:210px;
}
.tile h3{margin:0 0 8px;font-size:16px}
.tile p{margin:0;color:var(--muted);font-size:14px;max-width:70ch}
.tile .meta{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--muted2);
  font-size:12px;
  font-family:var(--mono);
}

/* ------------------------------
   Media panels + KPI list (shared)
------------------------------ */
.media{
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
}
.media .img{
  aspect-ratio: 16/9;
width:100%;
  position:relative;
  background:linear-gradient(180deg,#0b1220 0%,#1f2937 100%);
}
.media .body{
  padding:18px;
  border-top:1px solid var(--hairline);
}

.kpiList{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.kpiList li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--muted);
  font-size:14px;
}
.kpiDot{
  width:10px;
  height:10px;
  margin-top:6px;
  background:var(--teal);
  flex:0 0 auto;
}

/* ------------------------------
   Capability blocks (index)
------------------------------ */
.capGrid{gap:16px}
.cap{
  border:1px solid var(--border);
  background:#fff;
  padding:18px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.cap h3{margin:0 0 6px;font-size:16px}
.cap p{margin:0;color:var(--muted);font-size:14px;max-width:65ch}
.cap .meta{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--muted2);
  font-size:12px;
  font-family:var(--mono);
}

/* ------------------------------
   Section headings (shared)
------------------------------ */
.sectionHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.sectionHead h2{
  margin:8px 0 0;
  font-size:28px;
  letter-spacing:-0.02em;
}
.sectionHead p{
  margin:0;
  color:var(--muted);
  max-width:80ch;
}

/* ------------------------------
   Blocks / lists (ComfortCare + shared content)
------------------------------ */
.block{
  border:1px solid var(--border);
  background:#fff;
  padding:18px;
}
.block h2{margin:0 0 10px;font-size:18px}
.block p{margin:0;color:var(--muted);font-size:14px;max-width:95ch}

.list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
  display:grid;
  gap:8px;
  font-size:14px;
}

/* ------------------------------
   “Why partner” (index)
------------------------------ */
.why{
  border:1px solid var(--border);
  background:#fff;
  padding:22px;
}
.why h3{margin:0 0 8px;font-size:16px}
.why ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  display:grid;
  gap:8px;
}

/* ------------------------------
   Process steps (index)
------------------------------ */
.step{
  border:1px solid var(--border);
  background:#fff;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:140px;
}
.step .num{
  width:34px;
  height:34px;
  border:1px solid var(--teal-border);
  color:var(--teal);
  display:grid;
  place-items:center;
  font-weight:800;
  font-family:var(--mono);
}
.step h3{margin:0;font-size:16px}
.step p{margin:0;color:var(--muted);font-size:14px}

/* ------------------------------
   Trust stats (index)
------------------------------ */
.trustGrid{gap:16px}
.stat{
  border:1px solid var(--border);
  background:#fff;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:120px;
}
.stat .value{
  font-size:26px;
  letter-spacing:-0.02em;
  font-weight:800;
}
.stat .label{
  color:var(--muted);
  font-size:14px;
  max-width:60ch;
}

/* ------------------------------
   CTA band (shared)
------------------------------ */
.ctaBand{
  background:#0b1220;
  color:#fff;
  padding:56px 0;
}
.ctaBand .inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:center;
}
.ctaBand h2{margin:0;font-size:30px;letter-spacing:-0.02em}
.ctaBand p{
  margin:10px 0 0;
  color:rgba(255,255,255,.78);
  max-width:80ch;
}
.ctaBand .actions{
  min-width:auto;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.ctaBand .btn{
  border-color:rgba(255,255,255,.20);
  background:transparent;
  color:#fff;
}
.ctaBand .btn:hover{background:rgba(255,255,255,.06)}
.ctaBand .btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.ctaBand .btn.primary:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.ctaBand .btn.outline{border-color:rgba(255,255,255,.35);color:#fff}
.ctaBand .btn.outline:hover{background:rgba(255,255,255,.08)}

/* =========================================================
   FOOTER — NEW (recommended)
   Use with: <footer class="site-footer">...</footer>
   ========================================================= */
.site-footer{
  border-top:1px solid var(--hairline);
  background:#fff;
  padding:32px 0 16px;
  font-size:14px;
}

.site-footer .footerTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding-bottom:16px;
  border-bottom:1px solid var(--hairline);
}

.site-footer .footerBrand{
  display:flex;
  align-items:center;
  gap:24px;
}

.site-footer .footerLogo{
  width:170px;
  height:auto;
  flex-shrink:0;
}

.site-footer .footerTagline{
  margin:0;
  color:var(--muted2);
  max-width:420px;
  line-height:1.6;
}

.site-footer .footerLinks{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  font-weight:700;
  color:rgba(15,23,42,.86);
}

.site-footer .footerLinks a{
  padding:6px 0;
  border-bottom:1px solid transparent;
}

.site-footer .footerLinks a:hover{
  border-bottom:1px solid var(--border);
}

.site-footer .footerBottom{
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--muted2);
}

.site-footer .footerLegal,
.site-footer .footerMeta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.site-footer .sep{opacity:.5}

/* =========================================================
   FOOTER — OLD (compat)
   If you still have <div class="foot"> etc on some pages,
   this keeps them presentable until swapped.
   ========================================================= */
footer .foot{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:start;
}
footer .foot small{color:var(--muted2)}
footer .footnav{
  display:grid;
  gap:10px;
  justify-content:end;
  text-align:right;
  font-weight:700;
  color:rgba(15,23,42,.86);
}
footer .footnav a{text-decoration:underline;text-underline-offset:3px}
footer .footnote{margin-top:14px;color:var(--muted2);font-size:12px}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width:1060px){
  .heroGrid{grid-template-columns:1fr}
  .ctaBand .inner{grid-template-columns:1fr}
  .ctaBand .actions{justify-content:flex-start}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
}

/* =========================================================
   Product Detail Layout (Base)
   Used on product pages like comfortCareDreameHeadboard.html
   ========================================================= */

.page{
  padding:32px 0 0;
}

.subhead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;

}

.productWrap{
  padding:28px 0 72px;
  border-top:1px solid var(--hairline);
}

.productGrid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:26px;
  align-items:start;
}

.content{
  display:grid;
  gap:16px;
  margin-top:18px;
}

/* Right sidebar card */
.side{
  position:sticky;
  top:94px;
  align-self:start;
  border:1px solid var(--border);
  background:#fff;
  padding:18px;
}

/* Key/value group inside sidebar */
.key{
  margin-top:14px;
  border-top:1px solid var(--hairline);
  padding-top:12px;
}

/* Sidebar CTAs */
.cta{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.note{
  margin-top:12px;
  line-height:1.5;
}

@media (max-width:1060px){
  .productGrid{grid-template-columns:1fr;}
  .side{position:relative;top:auto;}
}


@media (max-width:760px){
  nav.primary{display:none}
  h1{font-size:38px}
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .actions{min-width:auto}

  /* old footer fallback */
  footer .foot{grid-template-columns:1fr}
  footer .footnav{text-align:left;justify-content:start}

  /* new footer */
  .site-footer .footerTop{flex-direction:column;align-items:flex-start}
  .site-footer .footerBrand{flex-direction:column;align-items:flex-start}
  .site-footer .footerBottom{flex-direction:column;align-items:flex-start;gap:8px}

  /* Header mobile wrap + prevent horizontal overflow */
  .nav{flex-wrap:wrap;gap:12px;padding:14px 0}
  .brand{min-width:0;flex:1 1 auto}
  .actions{min-width:0;flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap}
  .brand img{height:44px;width:auto}
  .btn{white-space:normal}
}
/* =========================================================
   Product Listing Grid (ComfortCare + similar pages)
   ========================================================= */

.prodGrid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,1fr);
}

.prodCard{
  border:1px solid var(--border);
  background:#fff;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:220px;
}

.prodCard h3{
  margin:0 0 8px;
  font-size:16px;
}

.prodCard p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  max-width:70ch;
}

.prodMeta{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  row-gap:10px;
  color:var(--muted2);
  font-size:12px;
  font-family:var(--mono);
}
.prodMeta > span{
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.prodMeta .btn{
  width:auto;
  flex:0 0 auto;
}

.tagRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.tag{
  display:inline-flex;
  padding:8px 10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

/* Responsive */
@media (max-width:1060px){
  .prodGrid{
    grid-template-columns:1fr;
  }
}
/* Page-specific additions for product page (kept minimal to match template) */
.prodHeroGrid{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;align-items:start}
.gallery{border:1px solid var(--border);background:#fff}
.galleryMain{aspect-ratio:16/10;background:linear-gradient(180deg,#e8edf2 0%,#dfe5ec 100%);display:flex;align-items:center;justify-content:center;color:var(--muted2);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-top:1px solid var(--hairline);background:var(--hairline)}
.thumb{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;color:var(--muted2);font-size:12px;padding:8px;text-align:center;font-family:var(--mono)}
.sideSticky{position:sticky;top:94px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--hairline);font-size:13px}
.kv:first-child{border-top:none;padding-top:0}
.kv b{color:rgba(15,23,42,.92)}
.kv span{color:var(--muted)}
.backRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width:1060px){.prodHeroGrid{grid-template-columns:1fr} .thumbs{grid-template-columns:repeat(3,1fr)} .sideSticky{position:relative;top:auto}}

/* --- Product gallery image sizing (prevents huge images) --- */
.galleryMain{
  position: relative;
  overflow: hidden;
}

/* Main product image inside gallery */
.galleryMain img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* use cover if you want full-bleed cropping */
  display: block;
}

/* Thumbnails */
.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.thumb {
  aspect-ratio: 4 / 3;   /* Landscape */
  overflow: hidden;
  border-radius: 8px;    /* optional */
  cursor: pointer;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* keeps image nicely cropped */
  display: block;
}

.thumb.active{
  outline:2px solid var(--teal);
}

/* =========================
   PRODUCT SPEC TABLE
   ========================= */

.block table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}

.block table tr{
  border-top:1px solid var(--hairline);
}

.block table tr:first-child{
  border-top:none;
}

.block table th,
.block table td{
  padding:10px 0;
  font-size:13px;
  line-height:1.35;
  vertical-align:top;
}

.block table th{
  text-align:left;
  font-weight:700;
  color:rgba(15,23,42,.9);
  padding-right:12px;
  white-space:nowrap; /* keeps labels tight */
}

.block table td{
  text-align:left; /* key change */
  color:var(--muted);
}

/* Optional subtle spacing between columns */
.block table th + td{
  padding-left:16px;
}

.btn.full{
  width:100%;
  justify-content:center;
}

/* Overlay logo for product preview image */
.imageWrap {
  position: relative;
}

.imageWrap .overlayLogo {
  position: absolute;
  top: 16px;
  right: 16px;

  width: 200px;
  height: auto;

  max-width: none;
  border: none;

  box-shadow: none;
  filter: none;              /* ← THIS removes drop-shadow */
  -webkit-filter: none;      /* Safari safety */

  opacity: 0.9;
  pointer-events: none;
  z-index: 10;
}
.brand img {
  height: 50px;
  width: auto;
}

/* ------------------------------
   Responsive embeds (maps, videos)
------------------------------ */
iframe{max-width:100%}
#contact iframe{
  width:100% !important;
  height:280px;
  display:block;
  border-radius:12px;
}