/* TUOHAI styles 3/4: about page blocks, catalog cards, comparison table, filter rail, pagination and category notes. */

/* ---------- Compact page intro (list and utility pages) ---------- */
.page-intro--compact { padding-block: 0 clamp(14px, 1.8vw, 22px); }
.page-intro--compact .page-intro-head { max-width: 960px; margin: 6px 0 12px; }
.page-intro--compact h1 { font-size: clamp(25px, 2.5vw, 33px); }
.page-intro--compact .section-lead { font-size: 15.5px; }
.page-intro--compact .eyebrow { margin-bottom: 6px; }

/* ---------- About: page intro ---------- */
/* The company profile is long and the factory photograph is a wide one. The photograph therefore sits
   on the right and the profile flows down its left side; once past the photograph the remaining
   paragraphs run the full width of the block. The float is what does this: the lines level with the
   picture shorten to make room for it, and the lines below it are free to use the whole row. This
   page carries the full profile, so the block starts closer to the breadcrumb. */
.page-intro { padding-block: 0 clamp(36px, 5vw, 64px); }
.page-intro--about .breadcrumb { padding-top: 10px; }
.page-intro-head { max-width: 840px; margin: 12px 0 clamp(24px, 3vw, 40px); }
.page-intro h1 { font-size: clamp(25px, 2.5vw, 33px); }
.page-intro .section-lead { font-size: 15.5px; }
.page-intro .eyebrow { margin-bottom: 6px; }
/* flow-root keeps the floated photograph inside this block, so it cannot spill over the section below
   and the block still measures its own height. */
.page-intro-split { display: flow-root; margin-top: clamp(10px, 1.4vw, 18px); }
.page-intro-split .page-intro-head { max-width: none; margin: 0 0 14px; }
/* The photograph keeps its own proportions — nothing is cropped — and the width and height on the
   element tell the browser its shape up front, so the profile beside it does not jump once the
   picture arrives. Its share of the row leaves the profile a readable column on the left. */
.page-intro-media { float: right; width: min(55%, 660px); margin: 0 0 clamp(18px, 2.4vw, 30px) clamp(28px, 3.4vw, 46px); overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary-light); }
.page-intro-media img { display: block; width: 100%; height: auto; }
/* The summary and the profile paragraphs share the column left of the photograph. */
.page-intro-split .section-lead { max-width: none; margin: 0 0 16px; }
.page-intro-copy p { margin: 0 0 14px; color: var(--color-text-secondary); font-size: 15.5px; }
.page-intro-copy p:last-child { margin-bottom: 0; }
/* Below this width the column beside the photograph would be too narrow to read, so the photograph
   takes its own full-width row and the profile runs in one column under it. */
@media (max-width: 900px) {
    .page-intro-media { float: none; width: 100%; margin: 0 0 clamp(20px, 3vw, 30px); }
}
/* On a narrow screen the heading block is laid out by its own children so the copy keeps its
   spacing. This rule is shared with the other intro pages, which are built the same way. */
@media (max-width: 900px) {
    .page-intro-head { display: contents; }
}

/* ---------- About: factory tour ---------- */
/* The factory photographs sit above the production flow. The pictures arrive in different shapes,
   so none is forced into a fixed frame: the columns of each row follow the pictures' own
   proportions, so every picture in a row shares one height — nothing is cropped and no empty strip
   is left beside a picture. */
.tour-block { margin-bottom: clamp(28px, 3.6vw, 46px); }
.tour-block-title { margin: 0 0 16px; font-size: 20px; }
.photo-grid { display: grid; gap: clamp(12px, 1.6vw, 18px); }
/* Six pictures run as two rows of three. The whole block stays inside the text column, so it keeps
   the same left and right edges as the heading above it and the production flow below it, and no
   row ever reaches out past them. */
.photo-grid--3 { grid-template-columns: minmax(0, 1fr); }
.photo-row { display: grid; gap: clamp(12px, 1.6vw, 18px); align-items: start; }
/* Row one: two wide views — the factory photograph (1.77) and the plant overview (1.99) — sit beside
   one 4:3 site picture (1.33). Each column keeps its picture's own proportion, so the three share one
   height and the row closes exactly. Swap a picture for one of a different shape and only this line
   needs to follow it. */
.photo-row--a { grid-template-columns: 1.771fr 1.989fr 1.333fr; }
/* Row two: the two upright site pictures (about 3:4) flank one very wide view (1.94), so the middle
   column takes the width its own shape needs and the outer two stay narrow. */
.photo-row--b { grid-template-columns: 0.757fr 1.935fr 0.753fr; }
.photo-card { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary-light); }
.photo-card img { display: block; width: 100%; height: auto; }

/* ---------- About: showroom and OEM galleries ---------- */
/* The pictures arrive in every shape, so none is forced into a frame: each one keeps its own
   proportions and nothing is trimmed. The showroom packs nine pictures into three columns; the OEM
   block instead lays its eleven out as full rows, which is what keeps that block level. */
.showroom-gallery { columns: 3; column-gap: clamp(12px, 1.6vw, 18px); }
.showroom-gallery figure { margin: 0 0 clamp(12px, 1.6vw, 18px); break-inside: avoid; }
.showroom-gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--color-primary-light); }
/* The OEM block runs as rows rather than columns. A column layout balances by height, so pictures of
   different shapes leave a ragged edge and, with an odd count, a hole at the end of the last column.
   Growing every card by its own --r makes the cards in a row share one height and lets the row span
   the container exactly, so each band stays level and the block ends flush. */
.oem-gallery { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); }
.oem-row { display: flex; gap: clamp(12px, 1.6vw, 18px); }
/* --r is the picture's own width ÷ height. It is the only number that has to follow a picture when
   one is swapped; the shape itself still comes from the file. */
.oem-row figure { margin: 0; min-width: 0; flex-grow: var(--r, 1); flex-shrink: 1; flex-basis: 0; }
.oem-row img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--color-primary-light); }
/* Below the container's full width the rows can no longer hold four pictures level, so they wrap to
   two per line and then to one. The cap keeps a single leftover picture from stretching to the full
   width of the page. */
@media (max-width: 980px) {
    .oem-row { flex-wrap: wrap; }
    .oem-row figure { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 560px) {
    .oem-row figure { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 880px) { .showroom-gallery { columns: 2; } }
@media (max-width: 560px) { .showroom-gallery { columns: 1; } }
.tour-flow { margin-top: clamp(30px, 4vw, 54px); }
.tour-flow-title { margin: 0 0 18px; font-size: 20px; }
/* Every row keeps the same size — the height comes from the media height below plus the card
   padding, never from the file — so the list reads as one column of equal cards. */
.flow-list { display: grid; gap: clamp(18px, 2.2vw, 26px); margin: 0; padding: 0; list-style: none; }
.flow-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 46px); align-items: center; min-height: calc(clamp(200px, 21vw, 300px) + 2 * clamp(16px, 2vw, 24px)); padding: clamp(16px, 2vw, 24px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
/* The photograph swaps to the other side on alternating rows, so the eye keeps moving down. */
.flow-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) auto; }
.flow-item:nth-child(even) .flow-media { order: 2; }
/* The media column is sized by the photograph itself, so the picture runs straight into the step text
   and no empty frame is left beside it. The height is set on the photograph directly, in viewport
   units rather than as a percentage: a percentage height resolves against the row and would collapse
   to the file's own height, which is exactly what used to push the picture out of the card. Every
   photograph is only scaled — nothing is cropped — so a portrait file and a wide file end up
   different widths. */
.flow-media { display: grid; grid-template-columns: auto; gap: 8px; align-items: center; margin: 0; }
/* Two photographs can share one row at a slightly smaller height so the step text still has room
   beside them. No row uses this today; the rule stays available for a step with two views. */
.flow-media--pair { grid-template-columns: auto auto; }
.flow-media img { display: block; height: clamp(200px, 21vw, 300px); width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-md); }
.flow-media--pair img { height: clamp(165px, 17vw, 245px); }
/* An upright photograph can be given a taller size, so its width follows its height and it sits
   comfortably beside the step text. No row uses this today; the rule stays available for a
   portrait view. */
.flow-media--portrait img { height: clamp(320px, 34vw, 480px); }
.flow-body { display: grid; gap: 8px; align-content: center; }
.flow-num { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.flow-name { margin: 0; font-size: 20px; }
.flow-text { margin: 0; color: var(--color-text-secondary); font-size: 15px; }
@media (max-width: 900px) {
    /* Stacked rows: the photograph takes the full width and keeps its own height, so it is still
       complete and still fills the card edge to edge. */
    .flow-item, .flow-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .flow-item:nth-child(even) .flow-media { order: 0; }
    .flow-media, .flow-media--pair { grid-template-columns: minmax(0, 1fr); }
    .flow-media--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-media img, .flow-media--pair img { height: auto; width: 100%; }
}
/* The video block below stays available for when a real factory video exists (see site-detail.js). */
.tour-video { position: relative; aspect-ratio: 21 / 9; margin: clamp(28px, 3.5vw, 44px) 0 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-text); }
.tour-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.tour-play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--color-primary); cursor: pointer; transition: background-color 0.18s ease; }
.tour-play::after { content: ""; width: 0; height: 0; margin-left: 4px; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tour-play:hover:not(:disabled) { background: #fff; }
.tour-play:disabled { cursor: default; opacity: 0.65; }
.tour-video-note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 14px 20px; background: linear-gradient(180deg, rgba(10, 30, 62, 0) 0%, rgba(10, 30, 62, 0.78) 100%); color: #fff; font-size: 13.5px; }
.tour-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- About: why choose us ---------- */
/* Six advantages as numbered cards, three across on a wide screen and one on a phone. The visible
   number is decorative: the ordered list already carries the numbering for assistive technology, so
   the figure is hidden from it and the point is not announced twice. */
.why-grid { display: grid; gap: clamp(16px, 2vw, 22px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.why-card { display: grid; gap: 10px; align-content: start; margin: 0; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.why-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 2px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); font-size: 15px; font-weight: 700; line-height: 1; }
.why-card-title { margin: 0; font-size: 19px; }
.why-card-text { margin: 0; color: var(--color-text-secondary); font-size: 15px; }
@media (max-width: 1023px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }

/* Dot bullet list for feature copy blocks that list supporting points. */
.why-evidence { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.why-evidence li { position: relative; margin: 0; padding-left: 20px; color: var(--color-text-secondary); font-size: 15px; }
.why-evidence li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }

/* ---------- About: equipment and process showcase ---------- */
/* Four equipment photographs as cards with one media size for all of them: the frame keeps its own
   square ratio instead of following the file, so the cards match, and each photograph fills the frame
   edge to edge so no empty strip is left around it. */
.eq-grid { display: grid; gap: clamp(20px, 2.8vw, 34px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.eq-card { display: grid; align-content: start; margin: 0; }
.eq-media { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); }
.eq-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; }

/* ---------- About: cooperation process ---------- */
.flow-bar { display: grid; gap: 16px; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.flow-step { margin: 0; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.flow-step-num { display: block; margin-bottom: 8px; color: var(--color-primary); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.flow-step-name { margin: 0; font-size: 17px; }
.flow-step-note { margin: 8px 0 0; color: var(--color-text-secondary); font-size: 14px; }
.flow-note { margin: 20px 0 0; color: var(--color-text-secondary); font-size: 14.5px; }

/* ---------- About: next steps ---------- */
.next-split { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: stretch; }
.next-panel { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); }
.next-panel--media { background: var(--color-surface); border: 1px solid var(--color-border); }
.next-media { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary-light); }
/* The catalog picture keeps its own 3:2 shape, so the view is shown whole and still fills the frame
   edge to edge; swap the file and only this number moves. */
.next-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.next-body { display: grid; gap: 10px; margin-top: auto; }
.next-body h2 { margin: 0; }
.next-body p { margin: 0; color: var(--color-text-secondary); }
.next-panel--solid { justify-content: center; background: var(--color-primary); }
.next-panel--solid h2 { margin: 0; color: #fff; }
.next-panel--solid p { margin: 0; color: rgba(255, 255, 255, 0.86); }
.next-panel--solid .btn { align-self: flex-start; margin-top: 8px; }

@media (max-width: 980px) {
    .flow-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .eq-grid { grid-template-columns: 1fr; }
    .next-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .tour-video { aspect-ratio: 16 / 9; }
    .flow-bar { grid-template-columns: 1fr; }
    /* Both photographs of the first step stack as well: side by side each one is only about a third
       of the screen wide, so both now take the full card width. */
    .flow-media--pair { grid-template-columns: minmax(0, 1fr); }
    /* Every factory photograph takes the full width and the six stack, each at its own
       proportions. */
    .photo-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Catalog card specifications ---------- */
.card-specs { display: grid; gap: 6px; margin: 10px 0 0; }
.card-spec { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
.card-spec dt { margin: 0; color: var(--color-text-secondary); font-size: 12.5px; }
.card-spec dd { margin: 0; font-size: 13.5px; }

/* ---------- Series comparison table ---------- */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.cmp-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.cmp-table thead th { font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; }
.cmp-table thead th:first-child { color: var(--color-text-secondary); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp-table tbody th { width: 190px; font-size: 14.5px; font-weight: 600; }
.cmp-table tbody td { color: var(--color-text-secondary); font-size: 14.5px; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tr.cmp-cue th, .cmp-table tr.cmp-cue td { background: var(--color-primary-light); color: var(--color-text); }
.cmp-note { margin: 14px 0 0; color: var(--color-text-secondary); font-size: 14px; }

/* ---------- Series cross navigation ---------- */
.series-strip { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.series-strip li { margin: 0; }
.series-strip-link { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); transition: border-color 0.18s ease; }
.series-strip-link:hover { border-color: var(--color-primary); text-decoration: none; }
.series-strip-thumb { flex: none; width: 62px; height: 62px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-primary-light); }
.series-strip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.series-strip-name { display: block; font-size: 16px; font-weight: 600; }
.series-strip-note { display: block; margin-top: 2px; color: var(--color-text-secondary); font-size: 13.5px; }
@media (max-width: 760px) { .series-strip { grid-template-columns: 1fr; } }

/* ---------- Catalog template with filter rail ---------- */
.catalog-layout { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.catalog-results { min-width: 0; }
.catalog-rail { display: grid; gap: 26px; }
@media (min-width: 1024px) { .catalog-rail { position: sticky; top: 104px; } }
.rail-block { display: grid; gap: 12px; }
.rail-title { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.rail-cats { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rail-cats li { margin: 0; }
.rail-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); color: var(--color-text); font-size: 15px; }
.rail-cat:hover { background: var(--color-primary-light); color: var(--color-primary); text-decoration: none; }
.rail-cat[aria-current="page"] { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.rail-cat-count { color: var(--color-text-secondary); font-size: 13px; }
.rail-note { margin: 0; color: var(--color-text-secondary); font-size: 13px; }
.catalog-bar { display: none; }
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; }
.cat-chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.cat-chip[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(10, 30, 62, 0.42); }
.drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 82vh; overflow-y: auto; padding: 22px 20px 30px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.drawer-title { margin: 0; font-size: 18px; }
.drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: 20px; line-height: 1; cursor: pointer; }
.drawer-body { display: grid; gap: 16px; }
.results-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.results-count { margin: 0; color: var(--color-text-secondary); font-size: 14.5px; }
.results-clear { font-size: 14px; font-weight: 600; }

/* ---------- Catalog: search above the list, tighter gap under the page intro ---------- */
.catalog-section { padding-block: clamp(12px, 1.4vw, 20px) clamp(40px, 6.5vw, var(--spacing-lg)); }
.catalog-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 2.2vw, 28px); }
.catalog-search-input { flex: 1 1 260px; min-width: 0; }
.catalog-search .btn { flex: none; }

/* ---------- Catalog card ---------- */
/* The card picture keeps the definition in site-components.css: it fills the top of the card edge
   to edge, so no background strip shows around the image. */
.product-model { margin: 0; color: var(--color-text-secondary); font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------- Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.pager-info { margin: 0; color: var(--color-text-secondary); font-size: 14.5px; }
.pager-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pager-list li { margin: 0; }
.pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: 14.5px; font-weight: 600; }
.pager-link:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.pager-link[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pager-link[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---------- Category intro facts and buying notes ---------- */
.cat-facts { display: grid; gap: 14px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin: 24px 0 0; }
.cat-fact { display: grid; gap: 4px; }
.cat-fact dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.cat-fact dd { margin: 0; font-size: 15px; }
.notes-block { max-width: 920px; }
.notes-block p { color: var(--color-text-secondary); }
.cat-notes-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.cat-notes-list li { position: relative; margin: 0; padding-left: 20px; color: var(--color-text-secondary); font-size: 15px; }
.cat-notes-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
@media (max-width: 1023px) {
    .catalog-layout { grid-template-columns: 1fr; gap: 18px; }
    .catalog-bar { display: grid; gap: 12px; margin-bottom: 14px; }
    /* The category column becomes a horizontal strip, so the categories stay reachable without a
       side column and the list below starts on the same line as them. */
    .catalog-rail .rail-block--cats { gap: 0; }
    .catalog-rail .rail-title { display: none; }
    .catalog-rail .rail-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .catalog-rail .rail-cats::-webkit-scrollbar { display: none; }
    /* Each chip is a flex item of the strip, so it has to keep its natural width. Without this the
       items shrink to their longest word first, and a label such as "Toys & Play" breaks over three
       lines inside the pill before the strip is finally allowed to scroll. */
    .catalog-rail .rail-cats li { flex: none; }
    .catalog-rail .rail-cat { flex: none; min-height: 40px; padding: 0 15px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; white-space: nowrap; }
    .catalog-rail .rail-cat:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-surface); }
    .catalog-rail .rail-cat[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
    .catalog-rail .rail-cat-count { display: none; }
    /* The aside is not part of the filter strip, and the contact band already closes the page. */
    .catalog-rail .rail-block--aside { display: none; }
}
@media (max-width: 640px) {
    .cat-facts { grid-template-columns: 1fr; }
    /* Search and Reset split the row under the full-width field, so the search block closes on one
       even edge instead of two short buttons of different widths. */
    .catalog-search .btn { flex: 1 1 0; }
}