/* TYPE VOICE - read off their own logo
   EB Garamond display - Source Sans 3 body - Source Sans 3 caps labels.
   Their logo sets 'Craft Stove' in a warm calligraphic oldstyle serif in orange over navy. EB Garamond is that lineage. Source Sans 3 is the quiet companion.
   The shared Fraunces/Figtree/DM Mono house stack was pulled on Aug 13 2026: it was
   running on fourteen of these builds and was the reason they read as one template.
   Structure, spacing and palette stay house. The TYPE is this company's alone. */

/* ==========================================================================
   Craft Stove Store & Patio — Taylors, SC
   Palette sampled directly from their own logo file (Craft Stove RGB Version):
     #001822 ground · #F6821F flame · #FDB73B amber · #CFD0D2 silver
   Deliberately unlike the warm-paper hearth builds. This one is ember-lit.
   ========================================================================== */

:root{
  --ground:#001822;          /* sampled: logo background */
  --ground-2:#03222E;
  --ground-3:#062B39;
  --line:#0E3B4B;
  --line-2:#15506410;

  --flame:#F6821F;           /* sampled: wordmark orange */
  --amber:#FDB73B;           /* sampled: flame highlight */
  --ember:#D9541B;           /* accents/rules on paper — NOT for text */
  /* --ember on paper is only 3.65:1 and --flame is 2.35:1, so neither can
     carry text in a .pale section. This is the same hue held down far enough
     to pass AA on both light grounds: 5.00:1 on --paper, 5.49:1 on #fff. */
  --ember-ink:#B8420E;
  --silver:#CFD0D2;          /* sampled: "Store & Patio" */

  --paper:#F7F4EE;
  --paper-2:#EFEAE0;

  --ink:#FFFFFF;
  --body:#B9C6CC;
  --muted:#8397A0;

  --shell:min(1180px,100% - 2.5rem);
  --r:14px;

  --display: "EB Garamond",Georgia,"Times New Roman",serif;
  --text: "Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;

  --tab-h:0px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;   /* iOS Safari/Chrome inflates text without this */
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font:400 17px/1.7 var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--tab-h);
}

h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:1.1}
/* A heading followed straight by a paragraph had zero space between them,
   because the reset above zeroes every margin and only .split-body h2 put one
   back. Give h2 a default and let the specific rules keep overriding it. */
h2{margin-bottom:.72rem}
/* The whitespace around the + is REQUIRED. CSS math needs it to tell an
   operator from a signed number, so clamp(2.5rem,1.7rem+3.4vw,4.5rem) is
   invalid and the whole declaration is dropped — which is why every heading
   on the site was rendering at browser-default size (h1 at 34px, not 71px). */
h1{font-size:clamp(2.5rem,1.7rem + 3.4vw,4.5rem)}
h2{font-size:clamp(1.9rem,1.4rem + 2vw,3rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
p{margin:0 0 1.05rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-underline-offset:3px}
a:hover{color:var(--flame)}

.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--flame);color:#0B0B0B;
  padding:.7rem 1.1rem;z-index:200;font-weight:600;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:3px}

.eyebrow{font:600 .72rem/1.5 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--flame);margin:0 0 .9rem}
.lede{font-size:1.15rem;color:var(--silver);max-width:40em}
.ital{font-style:italic;color:var(--amber)}   /* the single italic beat */

/* ---------- buttons ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 1rem/1 var(--text);padding:1.05rem 1.7rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;transition:.18s ease}
/* The doubled class is load-bearing. A single .btn-primary (0-1-0) loses to any
   container rule of the form .something a (0-1-1) — .pale a was repainting the
   button label ember-on-orange at 1.55:1, and .drawer-panel a was painting the
   mobile drawer's call button white-on-orange at 2.58:1. Doubling to 0-2-0 puts
   the component above that whole class of rule instead of patching each
   container as it turns up. Every instance already carries both classes. */
.btn.btn-primary{background:var(--flame);color:#12100C;border-color:var(--flame)}
.btn.btn-primary:hover{background:var(--amber);border-color:var(--amber);color:#12100C}
.btn.btn-ghost{background:transparent;color:var(--ink);border-color:#1D566B}
.btn.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-block{width:100%}

/* ---------- header ----------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(0,24,34,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:auto;height:46px}
.nav{display:flex;gap:1.7rem;align-items:center}
.nav a{color:var(--silver);text-decoration:none;font:500 .95rem/1 var(--text)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--amber)}
.hdr-cta{display:flex;align-items:center;gap:.9rem;flex:none}
.tel{color:var(--ink);text-decoration:none;font:600 1.02rem/1 var(--text);white-space:nowrap}
.tel:hover{color:var(--amber)}
.burger{display:none;background:none;border:1px solid #1D566B;border-radius:10px;
  width:46px;height:46px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- drawer (mobile) -------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.drawer[data-open="true"]{visibility:visible;pointer-events:auto}
.drawer-scrim{position:absolute;inset:0;background:rgba(0,10,15,.66);opacity:0;transition:opacity .25s}
.drawer[data-open="true"] .drawer-scrim{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(85vw,340px);
  background:var(--ground-2);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:1.1rem 1.3rem 2rem;overflow-y:auto}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-top{display:flex;justify-content:flex-end;margin-bottom:1rem}
.drawer-close{background:none;border:1px solid #1D566B;border-radius:10px;width:44px;height:44px;
  color:var(--ink);font-size:1.25rem;cursor:pointer;line-height:1}
.drawer-panel a{color:var(--ink);text-decoration:none;font:500 1.08rem/1 var(--text);
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.drawer-panel a:hover{color:var(--amber)}
.drawer-panel .btn{margin-top:1.3rem}

/* ---------- bottom tab bar (mobile, app-like) -------------------------- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:rgba(3,34,46,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar ul{display:flex;align-items:flex-end;margin:0;padding:0;list-style:none}
.tabbar li{flex:1;min-width:0}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:.22rem;
  padding:.6rem .15rem .55rem;color:var(--muted);text-decoration:none;
  font:500 .66rem/1.2 var(--text);text-align:center}
.tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar a[aria-current="page"],.tabbar a:hover{color:var(--amber)}
.tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}

/* Raised center action. Lifted clear of the bar so it reads as the one thing
   to press, and given a wider slot so "Get a quote" is not truncated. */
.tabbar .tab-cta{flex:0 0 auto}
.tabbar .tab-cta a{
  transform:translateY(-15px);
  margin:0 .3rem;padding:.6rem 1rem .55rem;
  background:var(--flame);color:#12100C;border-radius:999px;
  font-weight:700;font-size:.68rem;gap:.14rem;
  box-shadow:0 9px 22px -7px rgba(246,130,31,.7),0 0 0 4px var(--ground-2)}
.tabbar .tab-cta a svg{width:19px;height:19px;stroke-width:1.9}
.tabbar .tab-cta a:hover,.tabbar .tab-cta a[aria-current="page"]{
  background:var(--amber);color:#12100C}
/* The lift leaves a notch of bar showing behind it; keep the row tall enough
   that the outer four tabs still sit on their own baseline. */
.tabbar .tab-cta a span{overflow:visible}
/* Below ~360px the four outer labels start clipping to "Showro...". Tighten
   the type and the CTA's padding rather than shortening the words. */
@media (max-width:359px){
  .tabbar a{font-size:.6rem}
  .tabbar .tab-cta a{padding:.58rem .72rem .52rem;font-size:.62rem}
  .tabbar svg{width:19px;height:19px}
}

/* ---------- hero ------------------------------------------------------- */
.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
/* Layered top to bottom: ember glow, a scrim heavy enough to keep every
   text contrast ratio, then one of their own fire photographs. */
/* Each page sets its own --hero-bg (and --hero-pos where the subject sits
   off-center) on the .hero element, so a grill page does not sit on a picture
   of gas logs. The fallback is only reached by pages that set neither. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(58rem 34rem at 78% 8%,rgba(246,130,31,.20),transparent 62%),
    radial-gradient(40rem 28rem at 8% 92%,rgba(253,183,59,.10),transparent 60%),
    linear-gradient(92deg,var(--ground) 6%,rgba(0,24,34,.90) 46%,rgba(0,24,34,.95) 100%),
    var(--hero-bg,url("/images/gas-logs-brick.jpg")) var(--hero-pos,center 30%)/cover no-repeat}

/* Homepage only: a live fire behind the hero. The still is the backdrop, so
   it covers first paint, a failed load, and reduced-motion alike. The scrim
   above is lighter here because the footage is already mostly black. */
/* The scrim is shaped, not flat: opaque under the headline on the left so the
   type keeps its contrast, then falling away across the middle and right so
   the fire is actually legible as fire. The footage is already mostly black,
   which is why it can carry this little cover. */
.hero--video::before{
  background:
    radial-gradient(50rem 30rem at 66% 52%,rgba(246,130,31,.13),transparent 62%),
    linear-gradient(95deg,
      var(--ground) 2%,
      rgba(0,24,34,.94) 29%,
      rgba(0,24,34,.60) 56%,
      rgba(0,24,34,.68) 100%),
    linear-gradient(180deg,rgba(0,24,34,.55) 0%,transparent 22%,transparent 76%,rgba(0,24,34,.6) 100%)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--ground) url("/images/hearth-poster.jpg") center/cover no-repeat}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.14) contrast(1.06)}
@media (prefers-reduced-motion:reduce){ .hero-media video{display:none} }

/* EVERY direct child of the hero must clear the ::before scrim, not just the
   two-column grid. Thanks, privacy and 404 put a plain .shell in the hero, and
   when the scrim moved to z-index 1 (for the video layer) it painted straight
   over them — the whole Thank You page rendered blank. */
.hero > .shell{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero h1{margin-bottom:1.2rem}
.hero .lede{margin-bottom:1.7rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
/* Portrait phone photos were driving the hero past 600px, which left the copy
   floating in the middle with dead space above and below it. Cap them. */
.hero-grid > div > picture > img,
.hero-fig img{max-height:min(27rem,58vh);object-fit:cover;object-position:center 38%;
  width:100%;border-radius:var(--r)}
.hero-fig{margin:0}
.hero-fig figcaption{margin-top:.6rem;font-size:.82rem;color:var(--muted);line-height:1.45}

/* lead form, high on the page */
.leadcard{background:linear-gradient(180deg,var(--ground-3),var(--ground-2));
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,2.4vw,2rem);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85)}
.leadcard h2{font-size:1.5rem;margin-bottom:.35rem;color:var(--ink)}
.leadcard .sub{font-size:.93rem;color:var(--muted);margin-bottom:1.25rem}

/* The card keeps its dark panel wherever it is placed, including inside a
   .pale section. .pale restyles headings and links for a light background, so
   without these the heading renders #001822 on #03222E at 1.1:1 (invisible)
   and the phone link drops to 4.11:1. Restate every color the card owns
   rather than patching the heading alone. */
.pale .leadcard h2{color:var(--ink)}
.pale .leadcard .sub,.pale .leadcard .formnote{color:var(--muted)}
.pale .leadcard .field label{color:var(--silver)}
.pale .leadcard a{color:var(--amber)}
.pale .leadcard .field input,
.pale .leadcard .field select,
.pale .leadcard .field textarea{color:var(--ink)}
.field{margin-bottom:.85rem}
.field label{display:block;font:600 .76rem/1.4 var(--text);letter-spacing:.06em;
  text-transform:uppercase;color:var(--silver);margin-bottom:.35rem}
.field .req{color:var(--flame)}
.field input,.field select,.field textarea{
  width:100%;background:#001420;border:1px solid #14495C;border-radius:10px;
  padding:.85rem .9rem;color:var(--ink);font:400 1rem/1.4 var(--text)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--flame);outline:none}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238397A0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:17px;padding-right:2.4rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.formnote{font-size:.8rem;color:var(--muted);margin:.9rem 0 0;line-height:1.55}
.hp{position:absolute;left:-5000px}

/* ---------- sections --------------------------------------------------- */
.sec{padding:clamp(3.4rem,7vw,6rem) 0}
/* The header is sticky, so a hash jump (the Products tab points at /#shop)
   would otherwise land with the section heading tucked under it. */
section[id]{scroll-margin-top:5.5rem}
.sec-head{max-width:44em;margin-bottom:clamp(2rem,3.5vw,3rem)}
.sec-head p{color:var(--silver)}
.pale{background:var(--paper);color:#2B3338}
.pale h1,.pale h2,.pale h3,.pale h4{color:#001822}
.pale .lede,.pale .sec-head p{color:#4A575E}
.pale a{color:var(--ember-ink)}
.pale .eyebrow{color:var(--ember-ink)}
/* A ghost button in a light section inherited white text on paper with a navy
   border. Give it the paper-side treatment rather than leaving it invisible. */
.pale .btn.btn-ghost{color:#2B3338;border-color:#C9BFA9}
.pale .btn.btn-ghost:hover{border-color:var(--ember-ink);color:var(--ember-ink)}

/* ---------- cards / grids ---------------------------------------------- */
.grid{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.2s ease}
a.card:hover{border-color:#1E6480;transform:translateY(-3px)}
.card figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#03222E}
.card figure picture{display:block;width:100%;height:100%}
/* Most of these are portrait phone photos and the subject sits above center,
   so a straight center crop lands on the floor. Bias the crop upward. */
.card figure img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.card-body{padding:1.15rem 1.25rem 1.4rem;flex:1;display:flex;flex-direction:column}
.card-body h3{margin-bottom:.4rem}
.card-body p{font-size:.95rem;color:var(--muted);margin:0}
.card .more{margin-top:auto;padding-top:.9rem;font:600 .85rem/1 var(--text);
  letter-spacing:.05em;text-transform:uppercase;color:var(--flame)}

.pale .card{background:#fff;border-color:#E2DCD0}
.pale .card-body p{color:#5A666C}
.pale a.card:hover{border-color:#C9BFA9}
/* --flame is 2.58:1 on the card's white ground; the "read more" label needs to
   be readable, not just tinted. */
.pale .card .more{color:var(--ember-ink)}

/* ---------- feature rows ----------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
/* Two text columns of unequal height centered against each other read as a
   mistake. Top-align those (brand dealer strip, showroom hours). */
.split--top{align-items:start}
/* A reading column that lines up with the hero copy above it. The shell keeps
   its own centering; the children are what get capped, so the text starts at
   the shell's left edge instead of being centered in the viewport. */
.readable > *{max-width:46rem}
.split.flip .split-media{order:2}
.split-media picture{display:block}
/* Their portrait shots are 4:3 on the short edge, which at half-width runs
   taller than the copy beside it. Cap the height and crop rather than push
   the section to twice the length of its own text. */
.split-media img{border-radius:var(--r);width:100%;max-height:min(30rem,70vh);
  object-fit:cover;object-position:center 34%}
.split-body h2{margin-bottom:1rem}

/* ---------- proof strip ------------------------------------------------ */
.strip{border-block:1px solid var(--line);padding:2.2rem 0;background:var(--ground-2)}
/* Equal columns. space-between on variable-width items gave gaps of
   194/264/216px, which read as accidental rather than as a rhythm. */
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;align-items:start}
.fact b{display:block;font:500 2rem/1 var(--display);color:var(--amber);letter-spacing:-.02em}
.fact span{display:block;font-size:.85rem;color:var(--muted);margin-top:.32rem}

/* ---------- end-of-page CTA -------------------------------------------
   Replaces a second, field-for-field identical copy of the lead form that
   added roughly 700px to the homepage without asking anything new. */
.endcta{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:center;justify-content:space-between;
  background:var(--ground-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.4rem)}
.endcta h2{margin-bottom:.4rem}
.endcta p{margin:0;color:var(--silver);max-width:38em}
.endcta-actions{display:flex;gap:.7rem;flex-wrap:wrap;flex:none}

/* ---------- brand row -------------------------------------------------- */
.brands{display:flex;flex-wrap:wrap;gap:.65rem}
.chip{display:inline-flex;align-items:center;padding:.55rem 1.05rem;border-radius:999px;
  border:1px solid var(--line);background:var(--ground-2);color:var(--silver);
  font:500 .9rem/1 var(--text);text-decoration:none}
a.chip:hover{border-color:var(--amber);color:var(--amber)}
.pale .chip{background:#fff;border-color:#E2DCD0;color:#3A464C}

/* ---------- blog ------------------------------------------------------- */
/* auto-fit, not a fixed 3-up: the index starts life with one post and would
   otherwise show one card and two empty thirds. The container gets an inline
   max-width while the count is low, so a lone card stays card-sized instead
   of stretching the full shell. Collapses on its own at every width. */
.grid--posts{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.byline{color:var(--muted);font-size:.9rem;margin-top:.9rem}
.post h2{margin-top:2.1rem}
.post p{margin-bottom:1rem}
.post .list-tick{margin:1.2rem 0}

/* ---------- line-up (brands, grouped by department) --------------------- */
/* Column count varies by page: gas logs shows two groups, fireplaces four,
   the homepage nine, grills one. --cols is set inline to whichever count
   divides the groups evenly, so no card is left stranded alone on the last
   row. Without it, auto-fit. min(17rem,100%) rather than a bare 17rem, or a
   fixed --cols would push the grid wider than its shell on a small screen. */
.lineup{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
@media (min-width:1001px){
  .lineup{grid-template-columns:repeat(var(--cols,auto-fit),minmax(17rem,1fr))}
}
.lineup-grp{background:var(--ground-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.15rem 1.25rem 1.3rem}
.lineup-grp h3{margin:0 0 .85rem;font:600 .76rem/1.25 var(--text);
  letter-spacing:.09em;text-transform:uppercase;color:var(--amber)}
/* The chips inside sit on the card, not on the band, so they need the
   opposite background from .chip's default or they disappear into it. */
.lineup-grp .chip{background:transparent;border-color:var(--line)}
.lineup-grp a.chip:hover{border-color:var(--amber);color:var(--amber)}
.pale .lineup-grp{background:#fff;border-color:#E2DCD0}
.pale .lineup-grp h3{color:var(--ember-ink)}
.pale .lineup-grp .chip{background:transparent;border-color:#E2DCD0;color:#3A464C}
.pale .lineup-grp a.chip:hover{border-color:var(--ember-ink);color:var(--ember-ink)}

/* ---------- gallery ---------------------------------------------------- */
.masonry{columns:3;column-gap:1.2rem}
.masonry figure{margin:0 0 1.2rem;break-inside:avoid;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.masonry img{width:100%}

/* ---------- map embed (contact + showroom) ----------------------------- */
/* An iframe, so none of the .split-media img rules reach it; give it the
   same frame the masonry figures use. Fixed height, not aspect-ratio: at
   430px wide a 4:3 map is too short to pan without fighting the pin card. */
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--ground-2)}
.map iframe{display:block;width:100%;height:clamp(20rem,52vh,28rem);border:0}
.pale .map{border-color:#E2DCD0;background:#fff}

/* ---------- visit / hours ---------------------------------------------- */
.hours{width:100%;border-collapse:collapse;font-size:.98rem}
.hours th,.hours td{text-align:left;padding:.62rem 0;border-bottom:1px solid var(--line)}
.hours th{font-weight:500;color:var(--silver)}
.hours td{color:var(--ink);text-align:right}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:none}
.pale .hours th,.pale .hours td{border-color:#E2DCD0}
.pale .hours th{color:#5A666C}.pale .hours td{color:#001822}

/* ---------- footer ----------------------------------------------------- */
.ftr{background:#00131B;border-top:1px solid var(--line);padding:clamp(3rem,5vw,4.5rem) 0 2rem}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem}
.ftr h4{font-family:var(--text);font-size:.74rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flame);margin-bottom:1rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.55rem}
.ftr a{color:var(--body);text-decoration:none;font-size:.95rem}
.ftr a:hover{color:var(--amber)}
.ftr .brand img{height:42px;margin-bottom:1rem}
.ftr address{font-style:normal;font-size:.95rem;line-height:1.75}
.ftr-btm{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.85rem;color:var(--muted)}
.ftr-btm a{font-size:.85rem}

/* Website by Crutchfield Marketing — standard credit pill */
.credit{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;
  border:1px solid var(--line);border-radius:999px;color:inherit;text-decoration:none;font-size:.8rem}
.credit:hover{border-color:var(--amber);color:var(--amber)}
.credit svg{width:13px;height:13px;fill:currentColor;flex:none}

/* ---------- misc ------------------------------------------------------- */
.note{background:var(--ground-2);border:1px solid var(--line);border-left:3px solid var(--flame);
  border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.4rem;margin:1.6rem 0}
.note :last-child{margin-bottom:0}
.pale .note{background:#fff;border-color:#E2DCD0;border-left-color:var(--ember)}
.crumbs{font-size:.85rem;color:var(--muted);padding:1.2rem 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--amber)}
.list-tick{list-style:none;padding:0;margin:1.1rem 0}
.list-tick li{position:relative;padding-left:1.6rem;margin-bottom:.6rem}
.list-tick li::before{content:"";position:absolute;left:0;top:.62em;width:.44rem;height:.44rem;
  background:var(--flame);border-radius:1px;transform:rotate(45deg)}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .g4{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .masonry{columns:2}
}
@media (max-width:860px){
  :root{--tab-h:60px}
  /* The hero stacks on a phone and runs well over 1000px tall. Letting the
     media box cover all of it makes object-fit zoom a 16:9 clip to roughly
     6x, which turns the fire into an orange blur. Cap the box instead, then
     fade it out into the ground color before it ends. */
  .hero-media{height:min(78vh,560px);bottom:auto}
  .hero-media video{filter:saturate(1.14) contrast(1.06)}
  /* Scrim stacks too: left-to-right cover would bury the whole column. */
  .hero--video::before{
    background:
      radial-gradient(22rem 16rem at 66% 60%,rgba(246,130,31,.16),transparent 66%),
      linear-gradient(180deg,
        var(--ground) 4%,
        rgba(0,24,34,.93) 26%,
        rgba(0,24,34,.55) 52%,
        rgba(0,24,34,.92) 74%,
        var(--ground) 82%)}
  .nav,.hdr-cta .btn{display:none}
  .burger{display:inline-flex}
  .tabbar{display:block}
  .g3,.g2{grid-template-columns:1fr}
  .split,.split.flip .split-media{grid-template-columns:1fr;order:0}
  .strip-in{gap:1.6rem}
  .fact{flex:1 1 40%}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .lineup{grid-template-columns:1fr}
  :root{--shell:min(1180px,100% - 1.6rem)}
  /* Single-column galleries turned the showroom page into ~5,000px of stacked
     full-width photos. Two columns halves it and these shots read fine small. */
  .masonry{columns:2;column-gap:.7rem}
  .masonry figure{margin-bottom:.7rem}
  .two{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
  /* Shorter crop on the department cards: four full-height 4:3 images cost
     ~2,400px on the homepage for no extra information. */
  .card figure{aspect-ratio:16/10}
  .brand img{height:40px}
  .hero{padding-top:2.2rem}
  .hero-grid > div > picture > img,.hero-fig img{max-height:min(20rem,42vh)}
  .endcta{flex-direction:column;align-items:flex-start}
  .strip-in{grid-template-columns:repeat(2,1fr);gap:1.4rem}
}

@media print{
  .hdr,.tabbar,.drawer,.leadcard,.skip{display:none !important}
  body{background:#fff;color:#000}
  .ftr{background:#fff;border-color:#ccc}
  .ftr h4,.ftr a,.ftr address,.ftr-btm{color:#000}
  /* The page prints on white, where the silver "Store & Patio" in the
     dark-background logo disappears. Swap to the light-background version. */
  .ftr .brand img{content:url("/images/logo-light.png")}
}