/* ───── extracted block 1 ───── */
body.cat-elegant-1 { background: #f9f7f3; color: #1a1a1a; line-height: 1.5; font-family: var(--site-font, "Outfit", sans-serif) !important; }
  body.cat-elegant-1 .ce1-shell { max-width: 1280px; margin: 0 auto; padding: 60px 24px 60px; }
  /* ── Hero header (mirrors the project3.html "Our Projects" banner) ──
     90deg dark-to-transparent overlay on a per-category background
     image. Title + breadcrumb sit on the left, white text, padded to
     clear the fixed top header. If no image is configured the gradient
     alone provides a clean dark band. */
  /* The per-category hero photo is applied as an INLINE style on the section
     (build.mjs → {{HERO_STYLE}}), not here. This file is a single stylesheet
     shared by all 352 category pages and is copied verbatim — it is never
     token-processed — so a {{HERO_BG_IMAGE}} token here could never hold a
     per-category value. It also silently invalidated this whole declaration
     (leaving the hero a flat colour block with no gradient at all). */
  body.cat-elegant-1 .ce1-hero {
    background-color: #1a1a1a;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .88) 27.86%, rgba(0, 0, 0, 0) 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 220px 0 100px;
    color: #fff;
  }
  body.cat-elegant-1 .ce1-hero .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
  body.cat-elegant-1 .ce1-hero h1 {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;
    margin: 0;
  }
  /* "Wood Flooring" / "Flooring" suffix chip — when the post-render
     splitter detects either keyword at the end of the H1, it adds
     .ewf-h1-split to the <h1> and wraps the text in two spans. The
     main words stay on a line of their own at the full hero scale;
     the suffix sits below as a pale-orange chip that pops against
     the dark hero background. Self-contained — these rules only
     activate when the splitter found a match. */
  body.cat-elegant-1 .ce1-hero h1.ewf-h1-split {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 12px;
  }
  body.cat-elegant-1 .ce1-hero h1.ewf-h1-split .ewf-h1-main {
    /* Inherits the hero h1 font (64px / 700 / white). */
    line-height: 1;
  }
  /* Suffix chip: an orange gradient pill with white italic text. Sits on its
     own line under the main heading, popping against the dark hero. */
  body.cat-elegant-1 .ce1-hero h1.ewf-h1-split .ewf-h1-suffix {
      display: inline-block;
      font-size: 18px; font-weight: 600; font-style: italic;
      letter-spacing: .4px; line-height: 1;
      color: #fff;
      background: linear-gradient(135deg, #FE8500 0%, #E96C00 100%);
      padding: 9px 20px; border-radius: 999px;
      box-shadow: 0 6px 16px rgba(254, 133, 0, .35);
    }
  /* Breadcrumb trail. Sized as a small supporting link row (13px) rather than
     near-body-size — at 16px, white and bold it competed with the H1 above it.
     The trail is now quietly muted with the CURRENT page as the brightest item,
     which is the thing the visitor is actually looking for. Chevron separator
     matches the product page's trail so both read the same. */
  body.cat-elegant-1 .ce1-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
  }
  body.cat-elegant-1 .ce1-crumbs a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    /* Underline on hover only — signals "this is a link" without a permanent
       underline shouting over the hero. Transparent border reserves the space
       so nothing shifts by a pixel on hover. */
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
  }
  body.cat-elegant-1 .ce1-crumbs a:hover {
    color: #fff;
    border-bottom-color: #FE8500;
  }
  body.cat-elegant-1 .ce1-crumbs a:focus-visible {
    outline: 2px solid #FE8500;
    outline-offset: 3px;
    border-radius: 2px;
  }
  body.cat-elegant-1 .ce1-crumbs span.sep {
    color: rgba(255, 255, 255, .38);
    padding: 0;
    line-height: 1;
  }
  body.cat-elegant-1 .ce1-crumbs .current { color: #fff; }
  @media (max-width: 768px) {
    body.cat-elegant-1 .ce1-hero { padding: 160px 0 60px; }
    body.cat-elegant-1 .ce1-hero h1 { font-size: 40px; line-height: 48px; }
  }

  body.cat-elegant-1 .ce1-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid #d8d2c5; gap: 24px; flex-wrap: wrap; }
  body.cat-elegant-1 .ce1-head-text { min-width: 0; }
  body.cat-elegant-1 .ce1-title { font-weight: 500; font-size: 36px; letter-spacing: -.3px; color: #1a1a1a; line-height: 1.15; margin-top: 20px; }
  body.cat-elegant-1 .ce1-meta { font-size: 13px; letter-spacing: 0; text-transform: none; color: #777; margin-bottom: 8px; margin-top: 20px; }
  body.cat-elegant-1 .ce1-desc { font-size: 15px; color: #555; line-height: 1.7; margin-top: 14px; max-width: 720px; }
  body.cat-elegant-1 .ce1-desc p:last-child { margin-bottom: 0; }

  /* Brand filter chips — row of clickable pills under the category
     description. Each chip links off to a brand-compound category
     (/cat/oak gets a "Kährs" chip leading to /cat/kahrs-oak-wood-
     flooring). Empty containers are suppressed via :empty so
     categories with no compound siblings don't leave a blank gap. */
  body.cat-elegant-1 .cat-brand-chips {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
  }
  body.cat-elegant-1 .cat-brand-chips:empty { display: none; }
  body.cat-elegant-1 .cat-brand-chips-label {
    font-size: 12px; color: #888;
    margin-right: 4px;
  }
  body.cat-elegant-1 .cat-brand-chip {
    display: inline-flex; align-items: center;
    height: 32px;
    padding: 0 16px;
    border: 1px solid #ece6d8;
    border-radius: 999px;
    background: #fff;
    color: #1a1a1a;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
  }
  body.cat-elegant-1 .cat-brand-chip:hover {
    border-color: #a38c5f;
    color: #a38c5f;
    background: #fbf7ee;
    transform: translateY(-1px);
  }

  /* ── 9-at-a-time pagination ────────────────────────────────────────
     The build emits every product card. JS marks cards past index 9
     as `.is-hidden` (display: none) and reveals the next 9 each time
     the user clicks the "View more" button. The button disappears
     once there's nothing left to reveal. Keeps initial page paint
     fast for big categories. */
  body.cat-elegant-1 .grid > .card.is-hidden { display: none; }
  body.cat-elegant-1 .ce1-more {
    display: flex;
    justify-content: center;
    margin-top: 56px;
  }
  body.cat-elegant-1 .ce1-more .quote-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1.2; }
  body.cat-elegant-1 .ce1-more .quote-btn .arrow { margin: 0; vertical-align: middle; }
  body.cat-elegant-1 .ce1-more.is-empty { display: none; }
  /* Card grid — uses the build's emitted .grid / .card markup but
     restyles it for the editorial look. */
  body.cat-elegant-1 .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 22px; }
  body.cat-elegant-1 .grid > .card { background: transparent; border: 0; box-shadow: none; }
  /* Staggered reveal. The `cards-reveal` class is added by script.js — it is
     NEVER in the markup, so if the JS doesn't run the cards are simply visible
     rather than an invisible page. Short offset (not the theme's 100%) so the
     leftmost column can't push a horizontal scrollbar. */
  body.cat-elegant-1 .grid.cards-reveal > .card {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  }
  body.cat-elegant-1 .grid.cards-reveal > .card.is-in {
    opacity: 1;
    transform: none;
  }
  /* Belt-and-braces: the script already refuses to arm on reduce-motion. */
  @media (prefers-reduced-motion: reduce) {
    body.cat-elegant-1 .grid.cards-reveal > .card {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  body.cat-elegant-1 .card a { text-decoration: none; color: inherit; display: block; }
  body.cat-elegant-1 .card .card-img-wrap,
  body.cat-elegant-1 .card-img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #ece8de; }
  body.cat-elegant-1 .card-img,
  body.cat-elegant-1 .card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  body.cat-elegant-1 .card:hover .card-img,
  body.cat-elegant-1 .card:hover img { transform: scale(1.05); }
  body.cat-elegant-1 .card .card-info,
  body.cat-elegant-1 .card .body,
  body.cat-elegant-1 .card .card-body { padding: 18px 4px 6px; text-align: center; background: transparent; }
  body.cat-elegant-1 .card h3,
  body.cat-elegant-1 .card .name,
  body.cat-elegant-1 .card .card-title { font-size: 18px; font-weight: 500; margin-bottom: 6px; color: #1a1a1a; }
  /* Name + manufacturer chip. The card body is centred, but a right-aligned
     chip needs the pair justified — and with prices hidden and .short off in
     this layout, the name row is the only thing in the body, so nothing else
     falls out of alignment. Sized down for the 5-up grid. */
  body.cat-elegant-1 .card .card-name-row { text-align: left; gap: 8px; }
  body.cat-elegant-1 .card .card-name-row h3 { font-size: 15px; line-height: 1.35; margin-bottom: 0; }
  body.cat-elegant-1 .card .card-brand { margin-top: 3px; }
  body.cat-elegant-1 .card .price { color: #a38c5f; font-size: 16px; letter-spacing: 1px; font-weight: 500; }
  body.cat-elegant-1 .card .price del { color: #999; margin-right: 8px; font-size: 13px; }
  body.cat-elegant-1 .card .short { display: none; }
  body.cat-elegant-1 .card .creators-choice-badge { position: absolute; top: 14px; left: 14px; background: #1a1a1a; color: #fff; font-size: 10px; letter-spacing: 1.5px; padding: 5px 9px; text-transform: uppercase; z-index: 2; }
  /* Hover label — an orange pill that fades in over the bottom of the
     product photo on hover, signalling "view product". Acts as a soft
     orange-tinted overlay (gradient bottom-up) underneath so the label
     reads cleanly against any wood-tone image. */
  body.cat-elegant-1 .card-img-wrap::after {
    content: "View product";
    position: absolute;
    left: 50%; bottom: 18px;
    transform: translate(-50%, 8px);
    background: #FE8500;
    color: #fff;
    font-size: 11px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    /* Keep it on ONE line: at 5-up the card is ~229px, and with the letter-spacing
       "View product" wrapped to two lines. The pill is centred via translateX(-50%),
       so it can size past the card's own width without pushing the layout. */
    white-space: nowrap;
    padding: 9px 18px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    z-index: 3;
    box-shadow: 0 6px 14px rgba(254, 133, 0, .35);
  }
  body.cat-elegant-1 .card-img-wrap::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(254,133,0,.35) 0%, rgba(254,133,0,0) 60%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 2;
  }
  body.cat-elegant-1 .card:hover .card-img-wrap::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  body.cat-elegant-1 .card:hover .card-img-wrap::before { opacity: 1; }
  @media (hover: none) {
    body.cat-elegant-1 .card-img-wrap::after,
    body.cat-elegant-1 .card-img-wrap::before { display: none; }
  }
  body.cat-elegant-1 .grid + p { text-align: center; color: #888; padding: 60px 0; }
  /* 5-up needs a wider ladder than the old 3 → 2 → 1: the shell caps at 1280px,
     so below ~1280 five columns squeeze the cards under ~200px. Step down before
     that rather than letting them shrink. */
  @media (max-width: 1280px) {
    body.cat-elegant-1 .grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 1060px) {
    body.cat-elegant-1 .grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 900px) {
    body.cat-elegant-1 .grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    body.cat-elegant-1 .grid { grid-template-columns: 1fr; }
    body.cat-elegant-1 .ce1-head { flex-direction: column; align-items: flex-start; }
    body.cat-elegant-1 .ce1-title { font-size: 28px; }
  }