/* =================== hc-cat-sections.css =================== */
/* Category section cards on /catalog (root only). Isolated block:
 * .hc-cat-sections-* — LIGHT framed style, consistent with the home
 * category cards (.hc-cat-sm): white card, framed media panel (contained
 * animated SVG cover) on top, body (title + desc) below. */

.hc-cat-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
}

.hc-cat-sections-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  text-decoration: none;
  color: #1a1714;
  background: #fff;
  border: 1px solid rgba(139, 115, 85, 0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px -20px rgba(24, 18, 12, 0.5);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hc-cat-sections-card:hover,
.hc-cat-sections-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(185, 154, 111, 0.62);
  box-shadow: 0 28px 52px -24px rgba(24, 18, 12, 0.55), 0 0 0 1px rgba(185, 154, 111, 0.16);
}

.hc-cat-sections-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(196, 158, 103, 0.14), transparent 42%),
    linear-gradient(160deg, #fbf6ec 0%, #ece0cc 100%);
  border-bottom: 1px solid rgba(139, 115, 85, 0.12);
  transition: background 0.3s ease;
}

.hc-cat-sections-card:hover .hc-cat-sections-card__media,
.hc-cat-sections-card:focus-visible .hc-cat-sections-card__media {
  background:
    radial-gradient(circle at 70% 18%, rgba(196, 158, 103, 0.28), transparent 48%),
    linear-gradient(160deg, #fdf9f0 0%, #e6d6bc 100%);
}

.hc-cat-sections-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(4px, 0.6vw, 10px);
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hc-cat-sections-card:hover .hc-cat-sections-card__img,
.hc-cat-sections-card:focus-visible .hc-cat-sections-card__img {
  transform: scale(1.08);
}

.hc-cat-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hc-cat-scene__bg {
  fill: #f4e3c2;
  opacity: 0.2;
}

.hc-cat-scene__orb {
  fill: rgba(185, 154, 111, 0.2);
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-orb 7s ease-in-out infinite;
}

.hc-cat-scene__orb--b {
  animation-delay: -2.5s;
}

.hc-cat-scene__shadow {
  fill: rgba(51, 39, 27, 0.14);
}

.hc-cat-scene__panel {
  stroke: rgba(85, 62, 36, 0.42);
  stroke-width: 2;
}

.hc-cat-scene__panel--one { fill: #f4dfb7; }
.hc-cat-scene__panel--two { fill: #e4c48f; }
.hc-cat-scene__panel--three { fill: #c99b5a; }

.hc-cat-scene__board-stack {
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-float 5s ease-in-out infinite;
}

.hc-cat-scene__edge,
.hc-cat-scene__grain,
.hc-cat-scene__measure {
  fill: none;
  stroke: rgba(69, 48, 27, 0.58);
  stroke-width: 2;
  stroke-linecap: round;
}

.hc-cat-scene__grain {
  stroke-dasharray: 22 12;
  animation: hc-cat-dash 5.5s linear infinite;
}

.hc-cat-scene__measure {
  stroke: rgba(69, 48, 27, 0.42);
}

.hc-cat-scene__rail,
.hc-cat-scene__drawer,
.hc-cat-scene__sample,
.hc-cat-scene__shelf {
  fill: rgba(61, 51, 40, 0.86);
}

.hc-cat-scene__blade {
  fill: #efe4d0;
  stroke: rgba(61, 51, 40, 0.86);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-spin 9s linear infinite;
}

.hc-cat-scene__blade-hole {
  fill: #c99b5a;
  stroke: none;
}

.hc-cat-scene__spark {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  animation: hc-cat-spark 2.4s ease-in-out infinite;
}

.hc-cat-scene__spark--b { animation-delay: 0.35s; }
.hc-cat-scene__spark--c { animation-delay: 0.7s; }

.hc-cat-scene__drawer-front,
.hc-cat-scene__box {
  fill: #ead6b4;
  stroke: rgba(61, 51, 40, 0.34);
  stroke-width: 2;
}

.hc-cat-scene__runner,
.hc-cat-scene__hinge path {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 8;
  stroke-linecap: round;
}

.hc-cat-scene__runner--one {
  animation: hc-cat-runner 3.8s ease-in-out infinite;
}

.hc-cat-scene__runner--two {
  animation: hc-cat-runner 3.8s ease-in-out infinite;
  animation-delay: -1.1s;
}

.hc-cat-scene__hinge circle {
  fill: #efe4d0;
  stroke: rgba(61, 51, 40, 0.78);
  stroke-width: 3;
}

.hc-cat-scene__hinge {
  transform-box: fill-box;
  transform-origin: 242px 70px;
  animation: hc-cat-hinge 4.5s ease-in-out infinite;
}

.hc-cat-scene__sample {
  fill: #efe4d0;
}

.hc-cat-scene__coating {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: hc-cat-coat 4s ease-in-out infinite;
}

.hc-cat-scene__brush {
  fill: #3d3328;
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-brush 4s ease-in-out infinite;
}

.hc-cat-scene__brush path {
  fill: #d9b06e;
}

.hc-cat-scene__drop {
  fill: rgba(185, 154, 111, 0.52);
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-drop 4s ease-in-out infinite;
}

.hc-cat-scene__route {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 14 12;
  animation: hc-cat-dash 5s linear infinite;
}

@keyframes hc-cat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes hc-cat-orb {
  0%, 100% { transform: scale(1); opacity: 0.22; }
  50% { transform: scale(1.18); opacity: 0.34; }
}

@keyframes hc-cat-dash {
  to { stroke-dashoffset: -68; }
}

@keyframes hc-cat-spin {
  to { transform: rotate(360deg); }
}

@keyframes hc-cat-spark {
  0%, 100% { opacity: 0; transform: translateX(0); }
  45% { opacity: 1; transform: translateX(6px); }
}

@keyframes hc-cat-runner {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(18px); }
}

@keyframes hc-cat-hinge {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(8deg); }
}

@keyframes hc-cat-coat {
  0% { stroke-dashoffset: 260; }
  50%, 100% { stroke-dashoffset: 0; }
}

@keyframes hc-cat-brush {
  0%, 100% { transform: translate(-8px, -6px) rotate(-5deg); }
  50% { transform: translate(16px, 8px) rotate(4deg); }
}

@keyframes hc-cat-drop {
  0%, 100% { transform: translateY(-4px) scale(0.92); opacity: 0.45; }
  50% { transform: translateY(8px) scale(1.05); opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-cat-scene *,
  .hc-cat-scene {
    animation: none !important;
  }
}

.hc-cat-sections-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 11px 12px 13px;
}

.hc-cat-sections-card__title {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0;
  color: #1a1714;
}

.hc-cat-sections-card__desc {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: rgba(94, 75, 48, 0.72);
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 1280px) {
  .hc-cat-sections-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .hc-cat-sections-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .hc-cat-sections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .hc-cat-sections-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── hardware sub-scenes (runners / hinges / handles / fasteners) ─── */
.hc-cat-scene__roller,
.hc-cat-scene__bolt-head {
  fill: #efe4d0;
  stroke: rgba(61, 51, 40, 0.78);
  stroke-width: 3;
}
.hc-cat-scene__bolt-pin { fill: #c99b5a; stroke: none; }
.hc-cat-scene__bolt-slot {
  fill: none;
  stroke: rgba(61, 51, 40, 0.7);
  stroke-width: 5;
  stroke-linecap: round;
}
.hc-cat-scene__handle-bar { fill: rgba(61, 51, 40, 0.86); }
.hc-cat-scene__handle-foot { fill: rgba(61, 51, 40, 0.55); }

/* Hinge rotation pivots — moved off inline style= (per-instance transform-origin). */
.hc-cat-scene__hinge--p1 { transform-origin: 176px 84px; }
.hc-cat-scene__hinge--p2 { transform-origin: 188px 150px; }