/* Products page.
*
* Loaded by sales.html after site.css, assets/vx.css and assets/catalog.css.
* vx.css carries the design system this page shares with the homepage --
* the tokens, .vx-section, .vx-rail, .vx-card, .vx-grad -- so nothing here
* redefines a colour or re-invents a card. What is here is the part of the
* products page that has no equivalent on the homepage: manufacturer rows, a
* catalogue split by manufacturer and category, product cards that show a
* photographed object rather than a scene, and the search bar above them.
*
* Prefixed .px- so it cannot reach another page, except where it deliberately
* modifies a .vx- component, which is written as .vx-card--product and the
* like so the relationship is visible from the class name.
*
* site.css sets h1-h5 with !important; where this file has to override one it
* says !important back rather than trying to out-specify it, because
* specificity does not beat !important.
*/
/* Nine photographs instead of one. A catalogue's hero image is a claim about
range, and one hero shot of a thruster makes the wrong claim on a page that
also sells autopilots and propellers. */
.px-mosaic {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
padding: 1px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--line);
overflow: hidden;
}
.px-mosaic img {
display: block;
width: 100%;
/* vx.css gives .vx-hero__media img a fixed height and crops to fill,
which is right for the one photograph the homepage puts there and wrong
for nine square product shots -- it stretched each cell to 489px tall
and pushed the mosaic off the bottom of the hero. Reset to the square
the photographs actually are. */
height: auto;
aspect-ratio: 1 / 1;
padding: 9%;
object-fit: contain;
background: var(--c-plate);
}
@media (max-width: 900px) {
.px-mosaic img { padding: 7%; }
}
/* --- Manufacturers ---------------------------------------------------------
A row each, not a card grid. A row has width for what the company makes,
how much of its range we carry and four photographs out of it, so a visitor
deciding whether we stock their kind of hardware gets all three without
opening anything. */
.px-partners { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.px-partner {
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem);
gap: clamp(1.25rem, 3vw, 2.5rem);
align-items: center;
padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
border-bottom: 1px solid var(--line);
}
.px-partner__id { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.px-partner__logo { width: 34px; height: 34px; object-fit: contain; }
/* Stand-in for a manufacturer with no artwork on file. A single initial in
the heading face reads as a mark rather than as a missing image. */
.px-partner__wordmark {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border: 1px solid var(--line); border-radius: 10px;
background: var(--mist);
font: 600 1.05rem 'Space Grotesk', Arial, sans-serif;
color: var(--sub);
}
.px-partner__id h3 { margin: 0; font-size: 1.35rem !important; line-height: 1.2 !important; }
.px-partner__id h3 a { color: inherit; text-decoration: none; }
.px-partner__id h3 a:hover { color: var(--accent) !important; }
.px-partner__count { margin: 0; color: var(--sub); font: 500 .68rem 'IBM Plex Mono', monospace; letter-spacing: .09em; text-transform: uppercase; }
.px-partner__body p { margin: 0; color: var(--sub); font-size: 1rem; line-height: 1.7; }
.px-partner__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.1rem !important; }
.px-partner__go, .px-partner__site { font: 600 .72rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.px-partner__go { color: var(--accent); }
.px-partner__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-partner__site { color: var(--sub); }
.px-partner__site:hover { color: var(--ink); }
/* Two by two rather than four in a row: at this column width four cells
are 59 px across, which is a swatch rather than a photograph. */
.px-partner__shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); overflow: hidden; }
/* height:auto or the width/height attributes on the ![]()
count as a
definite height and aspect-ratio is ignored -- which stretched each
59 px cell to the 240 px of the attribute. */
.px-partner__shots img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 9%; object-fit: contain; background: var(--c-plate); }
/* The partner with no catalogue behind it: same row, no photographs, and no
count where a count would be untrue. */
.px-partner--quiet { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
@media (max-width: 900px) {
.px-partner, .px-partner--quiet { grid-template-columns: 1fr; gap: 1.1rem; }
.px-partner__id { flex-direction: row; align-items: center; gap: .85rem; flex-wrap: wrap; }
.px-partner__id h3 { font-size: 1.2rem !important; }
.px-partner__count { width: 100%; }
}
/* --- Reading rail ----------------------------------------------------------
Selection guides and calculators, in one rail rather than two shelves. Both
answer the question a catalogue cannot -- which of these do I need -- so
they are labelled by kind and left in one row to scroll through. */
.vx-card--read { width: min(21rem, 78vw); background: var(--c-surface); }
.vx-card--read .vx-card__body { padding: 1.75rem 1.5rem 1.5rem; }
.vx-card--read h3 { margin: 0 0 .7rem; font-size: 1.15rem !important; line-height: 1.3 !important; }
.vx-card--read p { margin: 0; color: var(--sub); font-size: .92rem; line-height: 1.7; }
/* A calculator is a different kind of thing from a guide -- it takes input
and returns a number -- so it is marked as one rather than left to be told
apart by its title alone. */
.vx-card--tool { background: var(--mist); }
.vx-card--tool .vx-card__label { color: var(--accent-dark); }
.px-notes { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.px-notes__label { margin: 0; flex-shrink: 0; color: var(--sub); font: 600 .68rem 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.px-notes__list { display: flex; flex-wrap: wrap; gap: .6rem .75rem; }
.px-notes__list a { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .85rem; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.px-notes__list a:hover { border-color: var(--accent); color: var(--accent); }
.px-notes__all { border-color: var(--c-accent-line) !important; color: var(--accent) !important; font-weight: 600; }
/* Small print throughout this file uses --sub, not the lighter --muted.
--muted is #6e6e73: 3.62:1 on white and 3.33:1 on the mist background,
where every one of these labels is normal-size text needing 4.5:1. --sub
clears it on both. The lighter grey is only safe at display sizes.
--- The catalogue ---------------------------------------------------------
One section per manufacturer, one rail per category inside it. Alternating
backgrounds so the boundary between two manufacturers reads without having
to be announced. */
.px-brand { padding: clamp(4rem, 8vw, 6.5rem) 8%; background: var(--c-surface); }
.px-brand--mist { background: var(--mist); }
.px-brand[hidden] { display: none; }
.px-brand__head { max-width: 46rem; }
.px-brand__meta { margin: 1.5rem 0 0; color: var(--sub); font: 500 .78rem 'IBM Plex Mono', monospace; letter-spacing: .05em; }
.px-brand__meta a { color: var(--accent); font-weight: 600; text-decoration: none; }
.px-brand__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-brand__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.px-brand__chips a { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--c-surface); color: var(--sub); font-size: .82rem; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.px-brand__chips a:hover { border-color: var(--accent); color: var(--accent); }
/* Header (84px) plus the sub-nav, so a chip jump leaves the heading in view. */
.px-cat { margin-top: clamp(2.75rem, 5vw, 4rem); scroll-margin-top: 9.5rem; }
/* Held to the intro's measure. Spanning the full 1,180 px wrap put the count
900 px from the heading it counts, which reads as two unrelated things. */
.px-cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 44rem; }
.px-cat__head h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important; line-height: 1.15 !important; }
.px-cat__count { flex-shrink: 0; color: var(--sub); font: 500 .68rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.px-cat__intro { max-width: 44rem; margin: .8rem 0 0; color: var(--sub); font-size: .98rem; line-height: 1.7; }
.px-cat__links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1rem 0 0; }
.px-cat__all, .px-cat__guide { font: 600 .7rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.px-cat__all { color: var(--accent); }
.px-cat__guide { color: var(--sub); }
.px-cat__all:hover, .px-cat__guide:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-cat .vx-rail { margin-top: 1.5rem; }
/* --- Product card ----------------------------------------------------------
The homepage card frames a photograph of a scene and crops it to fill.
These are photographs of an object on a white sweep: cropping one cuts the
object, so they are fitted inside a square frame instead. */
.vx-card--product { width: min(17rem, 64vw); }
.vx-card--product .vx-card__media { background: var(--c-plate); }
/* The image's own padding box, which .vx-card__media img sets to --mist for
the project cards. A product photograph is on white and has to stay there,
so it gets the plate's quiet grey rather than the section's. */
.vx-card--product .vx-card__media img { background: var(--c-plate-soft); }
.vx-card--product .vx-card__media { border-bottom: 1px solid var(--line); }
.vx-card--product .vx-card__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 9%; object-fit: contain; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.vx-card--product:hover .vx-card__media img { transform: scale(1.04); }
.vx-card--product .vx-card__body { padding: 1.15rem 1.25rem 1.25rem; }
.vx-card--product h4 { margin: 0; font-size: .98rem !important; line-height: 1.35 !important; letter-spacing: -.02em; }
.vx-card--product .vx-card__cue { padding-top: 1.1rem; font-size: .64rem; }
/* Two specifications, as a definition list rather than a sentence: they are
the figures that separate one item in a category from the next, and a
visitor comparing across a rail reads down the column. Values are printed
exactly as recorded -- the generator drops a spec it cannot print whole
rather than trimming one to fit. */
/* Label over value, not label beside value. Beside it, a long label
("Thrust (24V, no guard)") left the value about 90 px to wrap into, and
"Forward 4 kgf / Reverse 3.7 kgf" came out as three ragged right-aligned
lines. Stacked, every value gets the full card width and the column of
labels stays scannable down a rail. */
.px-spec { margin: .85rem 0 0; display: grid; gap: .6rem; }
.px-spec div { display: grid; gap: .15rem; }
.px-spec dt { color: var(--sub); font: 500 .6rem 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }
.px-spec dd { margin: 0; color: var(--ink); font-size: .82rem; line-height: 1.45; }
/* The card a capped rail ends on. Says how many are not on the rail, so the
twelve shown never read as the whole category. */
.vx-card--all { width: min(15rem, 60vw); justify-content: center; background: var(--mist); border-style: dashed; }
.px-brand--mist .vx-card--all { background: var(--c-surface); }
.vx-card--all .vx-card__body { justify-content: center; padding: 1.75rem 1.5rem; }
.px-all__count { display: block; margin-bottom: .6rem; color: var(--accent); font: 600 1.6rem 'Space Grotesk', Arial, sans-serif; letter-spacing: -.03em; }
.vx-card--all h4 { margin: 0; font-size: .98rem !important; line-height: 1.35 !important; }
/* vx.css bottom-anchors the cue with margin-top:auto, which is right for a
product card whose title may run to four lines and wrong here: it stranded
the link at the foot of a card that is only as tall as its tallest
neighbour, with the count floating alone at the top. */
.vx-card--all .vx-card__cue { margin-top: 0; padding-top: 1rem; font-size: .64rem; }
/* --- The two routes in --------------------------------------------------- */
.shop-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.shop-route { padding: clamp(1.6rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--c-surface); }
.shop-route h3 { margin: 0 0 .7rem; font-size: 1.25rem !important; line-height: 1.3 !important; }
.shop-route p { margin: 0; color: var(--sub); font-size: .98rem; line-height: 1.7; }
.shop-route__links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
.shop-route__links a { padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--c-surface); color: var(--ink); font-size: .86rem; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.shop-route__links a:hover { border-color: var(--accent); color: var(--accent); }
.shop-route__links a.is-all { border-color: var(--c-accent-line); color: var(--accent); font-weight: 600; }
.shop-route__hint { margin-top: 1.35rem !important; color: var(--muted); font: 500 .72rem 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
/* --- Search bar ------------------------------------------------------------
Sticky within its own section, which is short until somebody searches and
tall the moment they do -- so the box and the manufacturer filter stay on
screen exactly while there is a long results list to scroll, and give the
top of the screen back as soon as the search is cleared.
Not sticky on a phone at all: the masthead and the sub-nav already hold the
top there, and a third bar would spend a third of a small viewport on
chrome. */
.catalog-tools { margin: clamp(2rem, 4vw, 3rem) 0 .5rem; padding: 1.25rem 0 1rem; background: var(--mist); border-bottom: 1px solid var(--line); }
@media (min-width: 861px) {
.catalog-tools { position: sticky; top: 135px; z-index: 5; }
}
.catalog-brands { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.catalog-brand { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; background: var(--c-surface); color: var(--ink); font: 600 .82rem 'Space Grotesk', Arial, sans-serif; letter-spacing: -.01em; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.catalog-brand:hover { border-color: var(--accent); transform: translateY(-1px); }
.catalog-brand__logo { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; }
/* The pressed state is what the button is for. It used to be styled on an
.is-active class that nothing ever added -- the script sets aria-pressed --
so choosing a manufacturer changed the listing with no sign of which button
had done it. Keyed off the attribute the script actually writes, and the
filled shape does not rely on colour alone to read as pressed. */
.catalog-brand[aria-pressed="true"] { border-color: var(--c-accent-fill); background: var(--c-accent-fill); color: var(--c-on-accent); }
.catalog-brand[aria-pressed="true"]:hover { background: var(--c-accent-fill-hover); border-color: var(--accent-dark); transform: none; }
.catalog-brand[aria-pressed="true"] .catalog-brand__logo { filter: brightness(0) invert(1); }
.catalog-search { position: relative; max-width: 520px; }
.catalog-search__icon { position: absolute; top: 50%; left: 1rem; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; }
.catalog-search input { width: 100%; padding: .85rem 2.75rem; border: 1px solid var(--c-line-mid); border-radius: 999px; background: var(--c-surface); color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: .95rem; transition: border-color .2s ease, box-shadow .2s ease; }
.catalog-search input::placeholder { color: var(--c-placeholder); }
.catalog-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--c-accent-ring); }
.catalog-search input::-webkit-search-cancel-button { display: none; }
.catalog-search__clear { position: absolute; top: 50%; right: .75rem; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 0; border-radius: 50%; background: var(--c-wash); color: var(--sub); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.catalog-search__clear:hover { background: var(--c-wash-strong); color: var(--ink); }
/* display:flex above beats the hidden attribute's UA display:none, so the
clear button sat in an empty search box offering to clear nothing. */
.catalog-search__clear[hidden] { display: none; }
.catalog-status { margin: .9rem 0 0; color: var(--sub); font: 500 .72rem 'IBM Plex Mono', monospace; letter-spacing: .06em; }
#catalog-results { padding-bottom: clamp(3rem, 6vw, 5rem); }
.catalog-more { display: block; margin: 2rem auto 0; padding: .85rem 1.75rem; border: 1px solid var(--c-line-firm); border-radius: 999px; background: var(--c-surface); color: var(--ink); font: 500 .72rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.catalog-more:hover { border-color: var(--accent); color: var(--accent); }
.catalog-more[hidden] { display: none; }
/* --- Questions ------------------------------------------------------------ */
.px-faq { max-width: 56rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.px-faq__item { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.px-faq__item:last-child { border-bottom: 1px solid var(--line); }
.px-faq__item h3 { margin: 0 0 .75rem; font-size: 1.2rem !important; line-height: 1.35 !important; }
.px-faq__item p { margin: 0; color: var(--sub); font-size: 1rem; line-height: 1.8; }
.px-faq__item a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
/* Shopping comes before the corporate story: search, filter, choose, enquire. */
.sales-page .vx-hero { padding-top:clamp(7rem,10vw,8rem); padding-bottom:3rem; }
.sales-page .vx-title { font-size:clamp(2.1rem,3.7vw,3.5rem) !important; }
.sales-page .vx-hero__sub { font-size:1rem; margin-top:1.25rem; }
.sales-page .vx-hero__media { max-width:420px; justify-self:end; box-shadow:none; transform:rotate(2deg); }
.sales-page .vx-actions { margin-top:1.25rem; gap:1rem; }
.shop-quick { margin-top:1.6rem; }
.shop-quick[hidden] { display:none; }
/* With JavaScript the form is about to be revealed, so its space is
reserved before first paint and the reveal shifts nothing. Without
JavaScript the form never appears and the rule above leaves no gap. */
.js .shop-quick[hidden] { display:block; visibility:hidden; }
.shop-quick label { display:block; margin-bottom:.6rem; font-size:.9rem; font-weight:600; color:var(--ink); }
.shop-quick__field { display:flex; gap:.5rem; padding:.4rem; background:var(--c-surface); border:1px solid var(--c-line-firm); border-radius:14px; }
.shop-quick__field:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.shop-quick input { flex:1; min-width:0; padding:.65rem .55rem; border:0; background:transparent; color:var(--ink); font:400 1rem Inter,Arial,sans-serif; outline:none; }
.shop-quick button { padding:.8rem 1rem; border:0; border-radius:9px; background:var(--c-accent-fill); color:var(--c-on-accent); font:600 .9rem Inter,Arial,sans-serif; cursor:pointer; }
.shop-quick button:hover { background:var(--c-accent-fill-hover); }
.shop-shortcuts { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1rem; }
.shop-shortcuts a, .shop-quote-link { color:var(--accent); font-size:.85rem; text-decoration:none; padding:.4rem 0; }
.shop-shortcuts a:hover, .shop-quote-link:hover { text-decoration:underline; text-underline-offset:4px; }
.sales-page #browse { padding-top:3.5rem; padding-bottom:3.5rem; }
.sales-page #browse .vx-h2 { font-size:clamp(1.7rem,3vw,2.5rem) !important; }
.sales-page #browse .vx-lead { font-size:1rem; }
.sales-page #browse, .shop-anchor { scroll-margin-top:155px; }
.sales-page .catalog-tools { position:relative; top:auto; padding:1.5rem; margin-top:1.75rem; border:1px solid var(--line); border-radius:16px; background:var(--c-surface); }
.sales-page .catalog-tools[hidden] { display:none; }
.sales-page .catalog-brands { gap:.5rem; }
.sales-page .catalog-brand { padding:.7rem 1rem; min-height:44px; font-size:.82rem; }
.sales-page .catalog-search { max-width:none; }
.sales-page .catalog-search input { border-radius:10px; padding-right:3.25rem; }
.sales-page .catalog-search__clear { width:44px; height:44px; margin-top:-22px; right:.25rem; background:transparent; }
.catalog-filter-row { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:1rem; }
.catalog-filter-row label { font-size:.85rem; font-weight:600; }
.catalog-filter-row select { min-width:0; max-width:100%; padding:.7rem; background:var(--c-surface); color:var(--ink); border:1px solid var(--c-line-firm); border-radius:8px; font-size:1rem; }
.catalog-filter-row button, .catalog-retry { padding:.7rem; border:0; background:none; color:var(--accent); font:600 .85rem Inter,Arial,sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.catalog-status { font-family:Inter,Arial,sans-serif; letter-spacing:0; font-size:.88rem; line-height:1.6; }
.catalog-empty { padding:2rem; margin-top:1.25rem; background:var(--c-surface); border:1px dashed var(--c-line-firm); border-radius:16px; }
.catalog-empty h3 { margin:0 0 .75rem; font-size:1.25rem !important; }
.catalog-empty p { color:var(--sub); line-height:1.7; }
.catalog-empty a { color:var(--accent); font-weight:600; }
.sales-page .shop-routes { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); margin-top:2rem; }
.sales-page .shop-route { padding:1.5rem; }
.sales-page .shop-route p { font-size:.95rem !important; }
.sales-page .px-brand { padding-top:3.5rem; padding-bottom:3.5rem; }
.sales-page .px-cat { margin-top:2.5rem; }
@media (max-width:900px) {
.sales-page .vx-hero__grid { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
.sales-page .vx-hero__media { display:none; }
.sales-page .shop-routes { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
.sales-page .vx-hero { padding-bottom:2rem; }
.sales-page .vx-title { font-size:2.2rem !important; }
.sales-page .catalog-brands { flex-direction:row; }
.sales-page .catalog-tools { padding:1rem; }
.sales-page .catalog-brand { flex:1 1 auto; font-size:.75rem; }
.catalog-filter-row select { width:100%; }
.shop-shortcuts { gap:.25rem .8rem; }
.shop-quick input { font-size:16px; width:0; }
.shop-quick button { padding:.75rem; }
.sales-page #browse { scroll-margin-top:135px; }
}
@media (max-width: 768px) {
.px-brand { padding-left: 20px; padding-right: 20px; }
.px-cat__head { align-items: flex-end; }
.px-cat__head h3 { max-width: 72%; font-size: 1.3rem !important; }
.catalog-brands { flex-direction: column; }
.catalog-brand { justify-content: center; }
.catalog-search { max-width: 100%; }
}