/* Hero with interactive SVG scene */
.cab-hero-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
@media(max-width:880px){.cab-hero-grid{grid-template-columns:1fr;gap:20px}}

/* Inverted color scheme for this page's hero title */
.cab-hero-grid h1{color:rgba(255,255,255,.6)}
.cab-hero-grid h1 em{color:#fff;font-style:italic}

.scene{
  position:relative;width:100%;aspect-ratio:5/4;
  max-width:560px;margin-left:auto;
}
.scene svg{width:100%;height:100%;display:block}

/* Door panels — gentle hover lift */
.scene .door-frame{
  cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  transform-origin:center center;
  transform-box:fill-box;
}
.scene .door-frame:hover{transform:translateY(-4px)}

/* Stickman head looks at hovered door */
.scene .stickman{
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  transform-origin:center;
  transform-box:fill-box;
}

/* Thought bubble pulse */
@keyframes thinkPulse{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
.scene .thought{
  animation:thinkPulse 2.4s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}

/* Stickman head bob */
@keyframes thinkBob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-2px) rotate(3deg)}
}
.scene .head-group{
  animation:thinkBob 4s ease-in-out infinite;
  transform-origin:center bottom;
  transform-box:fill-box;
}

/* Filters */
.toolbar-band{background:var(--bg);padding:18px 0}
.filters{
  width:calc(100% - clamp(40px,7vw,96px));
  max-width:var(--container);
  margin:0 auto;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border:1px solid rgba(10,13,18,.08);
  border-radius:14px;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.18);
  padding:12px 18px;
}
.filters .row{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  max-width:none;margin:0;padding:0;
}
.filters .label{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-right:8px;
}
.filters button{
  padding:9px 16px;border-radius:10px;font-size:13px;font-weight:500;
  border:1px solid var(--line-2);background:#fff;
  transition:all .2s var(--ease);
}
.filters button:hover{border-color:var(--ink)}
.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters .count{margin-left:auto;font-size:12px;color:var(--muted)}
.filters .filter-sep{
  width:1px;height:20px;background:var(--line-2);
  margin:0 4px;flex-shrink:0;
}

/* Cabinet Material Gallery — split background, info bottom-right */
.cab-mood{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:64px 0;
}

.mood-tile{
  position:relative;overflow:hidden;
  aspect-ratio:5/4;
  cursor:pointer;text-decoration:none;color:inherit;
  border-radius:10px;
  transition:transform .5s var(--ease);
  background:#fafafa;
  isolation:isolate;
  display:flex;align-items:center;
  border:1px solid var(--line);
}
.mood-tile:hover{transform:translateY(-6px);box-shadow:0 30px 60px -25px rgba(0,0,0,.18)}

/* Color block — covers LEFT HALF, fades to transparent toward right */
.mood-tile .swatch{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg,
      var(--tile-color) 0%,
      var(--tile-color) 35%,
      transparent 75%
    );
  transition:filter .6s var(--ease);
}
.mood-tile:hover .swatch{filter:brightness(1.05) saturate(1.05)}

/* LEFT — door image */
.mood-tile .door{
  position:relative;z-index:1;
  width:48%;aspect-ratio:4/5;
  margin-left:6%;
  display:grid;place-items:center;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.3)) drop-shadow(0 8px 16px rgba(0,0,0,.22));
  transition:transform .8s var(--ease);
  flex-shrink:0;
}
.mood-tile .door img{
  width:100%;height:100%;object-fit:contain;display:block;
}
.mood-tile:hover .door{transform:translateY(-4px) scale(1.03)}

/* RIGHT — info column, content pushed to BOTTOM */
.mood-tile .info{
  position:relative;z-index:2;
  flex:1;min-width:0;align-self:stretch;
  padding:24px 28px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  color:#1a1a1a;
}
.mood-tile .num{
  font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
}
.mood-tile h2{
  font-family:var(--serif);font-size:26px;font-weight:400;
  line-height:1.05;letter-spacing:-.01em;color:#1a1a1a;
}
.mood-tile h2 em{
  display:block;font-style:italic;font-weight:400;
  font-size:.85em;color:var(--muted);margin-top:2px;
}

/* Glassmorphism "Order Sample" button — pale tint of door color (white + color blend) */
.mood-tile .sample-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:10px;
  background:color-mix(in srgb, var(--tile-color) 18%, rgba(255,255,255,.7));
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(0,0,0,.06);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#1a1a1a;
  width:fit-content;margin-top:4px;
  white-space:nowrap;
  transition:all .3s var(--ease);
}
.mood-tile .sample-btn:hover{
  background:color-mix(in srgb, var(--tile-color) 30%, rgba(255,255,255,.85));
  transform:translateX(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 20px rgba(0,0,0,.1);
}
.mood-tile .sample-btn svg{transition:transform .3s var(--ease);flex-shrink:0}
.mood-tile .sample-btn:hover svg{transform:translateX(2px)}

/* Stock dot — top-right of tile (light side) */
.mood-tile .stock{
  position:absolute;top:18px;right:22px;z-index:3;
  display:flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#2d8e5a;
}
.mood-tile .stock .dot{
  width:6px;height:6px;border-radius:99px;background:#5fd388;
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(95,211,136,.5)}
  50%{box-shadow:0 0 0 6px rgba(95,211,136,0)}
}

/* Responsive */
@media(max-width:1100px){
  .cab-mood{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:680px){
  .cab-mood{grid-template-columns:1fr;gap:12px;padding:40px 0}
  .mood-tile{aspect-ratio:5/3}
  .mood-tile h2{font-size:24px}
}
@media(max-width:420px){
  .mood-tile{aspect-ratio:5/4}
  .mood-tile h2{font-size:20px}
}

/* Sample CTA */
.sample-cta{
  background:var(--ink);color:#fff;
  border-radius:var(--r-lg);
  padding:48px;
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  margin:48px 0;position:relative;overflow:hidden;
}
.sample-cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 90% 20%,rgba(176,134,84,.2),transparent 60%);
}
.sample-cta h2{color:#fff;font-size:36px;margin-bottom:8px;position:relative}
.sample-cta h2 em{font-style:italic;color:var(--gold-2)}
.sample-cta p{color:rgba(255,255,255,.7);font-size:14px;position:relative}
.sample-cta .a{display:flex;gap:10px;flex-wrap:wrap;position:relative}
@media(max-width:780px){.sample-cta{grid-template-columns:1fr;padding:32px}}