/* Motus category page, shop front and product search results (2026 design). Sits on product-page.css
   (same gutters, headings, buttons). Colours and sizes come from motus-tokens.css. */

.motus-cat__banner { position: relative; display: flex; align-items: flex-end; min-height: clamp(300px, 30vw, 440px); background: var(--motus-black); }
.motus-cat__banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.motus-cat__banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--motus-black) 95%, transparent) 0%, color-mix(in srgb, var(--motus-black) 75%, transparent) 45%, color-mix(in srgb, var(--motus-black) 15%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--motus-black) 60%, transparent), transparent 50%); }
.motus-cat__banner-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: calc(820px + 2 * var(--pp-gutter)); padding: clamp(28px, 4vw, 64px) var(--pp-gutter); }
.motus-cat .motus-cat__banner .motus-pp__crumb a, .motus-cat__banner .motus-pp__crumb { color: var(--motus-grey-20); }
/* !important: the old child theme sets .woocommerce h1 with !important */
.motus-pp.motus-cat .motus-cat__banner h1 { font-size: clamp(37px, 5.1vw, 78px) !important; overflow-wrap: break-word; }
.motus-cat__banner h1 em { display: inline-block; font-style: normal; color: var(--motus-yellow); transform: skewX(-10deg); }
.motus-cat__banner p { max-width: 600px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--motus-grey-20); }

/* the shop front: one card a product group */
.motus-cat__ranges { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); padding: clamp(32px, 4vw, 56px) var(--pp-gutter) clamp(56px, 6vw, 88px); }
.motus-cat__range { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 130px; }
.motus-cat__range > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; padding-bottom: 16px; border-bottom: 1px solid var(--motus-grey-70); }
.motus-cat__range > header div { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.motus-cat__range > header p { font-size: 16px; line-height: 1.5; color: var(--motus-grey-20); }
.motus-pp a.motus-cat__range-more { display: inline-flex; align-items: center; min-height: 44px; color: var(--motus-yellow); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.motus-pp a.motus-cat__range-more:hover { color: var(--motus-white); }
.motus-cat__range .motus-cat__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 250px), 1fr)); gap: 16px; }
.motus-pp a.motus-cat__card { display: flex; flex-direction: column; border: 1px solid var(--motus-grey-70); border-radius: 10px; overflow: hidden; color: var(--motus-white); text-decoration: none; }
.motus-pp a.motus-cat__card:hover { border-color: var(--motus-yellow); }
.motus-cat__card-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--motus-black); }
.motus-cat__card-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }   /* over the box, so a square picture cannot stretch it */
.motus-cat__card-text { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.motus-cat__card-text b { font-size: clamp(15px, 1.3vw, 18px); overflow-wrap: anywhere; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.motus-cat__card-text small { font-size: 13px; color: var(--motus-grey-35); }
.motus-cat__card-text i { padding-top: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--motus-yellow); }

/* filters beside the list; above it on a phone */
.motus-cat__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; padding: clamp(28px, 3.4vw, 48px) var(--pp-gutter) clamp(56px, 6vw, 88px); }
@media (min-width: 1000px) { .motus-cat__list { grid-template-columns: 260px minmax(0, 1fr); } .motus-cat__list--one { grid-template-columns: minmax(0, 1fr); } }
.motus-cat__filters { display: flex; flex-direction: column; gap: 28px; }
.motus-cat__facet { margin: 0; padding: 0; border: 0; min-width: 0; }
.motus-cat__facet legend { margin: 0 0 12px; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--motus-yellow); }
.motus-cat__facet div { display: flex; flex-wrap: wrap; gap: 8px; }
.motus-pp .motus-cat__facet button { min-height: 44px; padding: 0 16px; border: 1px solid var(--motus-grey-70); border-radius: 999px; background: transparent; color: var(--motus-white); font: 600 14px var(--motus-font); text-transform: none; cursor: pointer; }
.motus-pp .motus-cat__facet button:hover { border-color: var(--motus-white); background: transparent; color: var(--motus-white); }
.motus-pp .motus-cat__facet button[aria-pressed="true"] { border-color: var(--motus-yellow); background: var(--motus-yellow); color: var(--motus-black); }

.motus-cat__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.motus-cat__count { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.motus-cat__count b { color: var(--motus-yellow); }
.motus-cat__count small { font-size: 14px; font-weight: 500; color: var(--motus-grey-35); }
/* each product a card: its picture, its name, a line about it, how many sizes, and where the click goes */
.motus-cat__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.motus-pp a.motus-cat__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "img img" "text text" "num go"; align-items: end; border: 1px solid var(--motus-grey-70); border-radius: 10px; overflow: hidden; color: var(--motus-white); text-decoration: none; transition: border-color 0.2s; }
.motus-pp a.motus-cat__row:hover, .motus-pp a.motus-cat__row:focus-visible { border-color: var(--motus-yellow); }
.motus-pp a.motus-cat__row:hover .motus-cat__text b, .motus-pp a.motus-cat__row:focus-visible .motus-cat__text b { color: var(--motus-yellow); }
.motus-cat__row[hidden] { display: none !important; }
.motus-cat__img { grid-area: img; display: block; aspect-ratio: 4 / 3; padding: 12px; background: var(--motus-black); }
.motus-cat__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.motus-cat__text { grid-area: text; align-self: start; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 16px 12px; }
.motus-cat__text b { font-size: clamp(16px, 1.3vw, 19px); font-weight: 900; line-height: 1.1; text-transform: uppercase; overflow-wrap: break-word; }
.motus-cat__text small { font-size: 14px; line-height: 1.45; color: var(--motus-grey-20); }
.motus-cat__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.motus-cat__tags span { padding: 3px 10px; border: 1px solid var(--motus-grey-70); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--motus-grey-20); }
.motus-cat__num { grid-area: num; display: flex; flex-direction: row; align-items: baseline; gap: 6px; min-height: 24px; padding: 0 16px 16px; white-space: nowrap; }
.motus-cat__num b { font-size: 24px; font-weight: 900; line-height: 1; color: var(--motus-yellow); }
.motus-cat__num small { font-size: 13px; color: var(--motus-grey-35); }
/* A card's price is one colour, the brand yellow, as prices are in the size tables. The old theme painted the figures its own
   yellow (#FFEF00) and left the dollar sign to this rule, which said white: a white $ before yellow figures (Jacques, 6 Oct 2026). */
.motus-cat__num--price b, .motus-cat__num--price b * { font-size: 20px !important; font-weight: 900 !important; }
.motus-cat__num.motus-cat__num--price b, .motus-cat__num.motus-cat__num--price b span.woocommerce-Price-amount.amount,
.motus-cat__num.motus-cat__num--price b span.woocommerce-Price-amount.amount bdi,
.motus-cat__num.motus-cat__num--price b span.woocommerce-Price-amount.amount span.woocommerce-Price-currencySymbol { color: var(--motus-yellow) !important; }
.motus-cat__go { grid-area: go; padding: 0 16px 16px; font-size: 14px; font-weight: 700; color: var(--motus-yellow); white-space: nowrap; }
.motus-cat__none { padding: 16px; border: 1px solid var(--motus-grey-70); color: var(--motus-grey-20); }
.motus-pp button.motus-cat__more { align-self: flex-start; background: transparent; border-color: var(--motus-white); color: var(--motus-white); font-size: 15px; min-height: 52px; }
.motus-pp button.motus-cat__more:hover { background: var(--motus-white); color: var(--motus-black); }
.motus-cat__more[hidden] { display: none; }
@media (max-width: 640px) {
  .motus-cat__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .motus-cat__text { padding: 12px 12px 10px; }
  .motus-cat__text small { display: none; }
  .motus-cat__num, .motus-cat__go { padding: 0 12px 12px; }
  .motus-cat__go { font-size: 13px; }
  .motus-cat__num b { font-size: 20px; }
}

/* ---- search results and "not found" */
.motus-found__head { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4vw, 64px) var(--pp-gutter) clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--motus-grey-70); }
.motus-found__kicker { align-self: flex-start; padding: 7px 14px 6px; border-radius: 999px; background: var(--motus-yellow); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; color: var(--motus-black) !important; }
.motus-pp.motus-found .motus-found__head h1 { font-size: clamp(32px, 4vw, 60px) !important; overflow-wrap: anywhere; }
.motus-found h1 em { display: inline-block; font-style: normal; color: var(--motus-yellow); transform: skewX(-10deg); }
.motus-found__box { width: 100%; max-width: 720px; }
.motus-found__group { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.4vw, 48px) var(--pp-gutter) 0; }
.motus-found__group:last-child { padding-bottom: clamp(56px, 6vw, 88px); }
.motus-pp .motus-found__title { display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; color: var(--motus-yellow); }
.motus-found__title span { font-weight: 500; letter-spacing: 0; color: var(--motus-grey-35); }
.motus-found__parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 8px; }
.motus-pp a.motus-found__part { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-left: 4px solid var(--motus-yellow); background: var(--motus-black); color: var(--motus-white); text-decoration: none; }
.motus-pp a.motus-found__part:hover { box-shadow: inset 0 0 0 1px var(--motus-yellow); }
.motus-found__part span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.motus-found__part b { font-size: 18px; font-weight: 900; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.motus-found__part small { font-size: 13px; color: var(--motus-grey-20); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motus-found__part em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--motus-yellow); white-space: nowrap; }
.motus-found__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 32px; border-top: 1px solid var(--motus-grey-70); }
.motus-pp a.motus-found__link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--motus-grey-70); color: var(--motus-white); text-decoration: none; }
.motus-pp a.motus-found__link:hover b { color: var(--motus-yellow); }
.motus-found__link b { font-size: 17px; font-weight: 600; }
.motus-found__link small { font-size: 13px; color: var(--motus-grey-35); }
.motus-found .motus-cat__banner-text { max-width: calc(820px + 2 * var(--pp-gutter)); }

.motus-cat__help { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding: clamp(48px, 6vw, 80px) var(--pp-gutter); background: var(--motus-black); }
.motus-cat__help > div:first-child { display: flex; flex-direction: column; gap: 14px; flex: 1 1 520px; max-width: 760px; }
.motus-cat__help-search { width: 100%; padding-top: 6px; }
.motus-pp .motus-cat__help h2 { font-size: clamp(30px, 3.4vw, 48px); }
.motus-cat__help p { font-size: 17px; line-height: 1.5; color: var(--motus-grey-20); }
.motus-cat__phones { display: flex; flex-direction: column; gap: 6px; font-size: 17px; font-weight: 600; }
.motus-pp .motus-cat__phones a { color: var(--motus-white); text-decoration: none; }
.motus-pp .motus-cat__phones a:hover { color: var(--motus-yellow); }
/* the code of a one-part product, so four valves of the same name can be told apart */
.motus-cat__tags span.motus-cat__code { border-color: var(--motus-yellow); color: var(--motus-white); font-weight: 700; letter-spacing: 0.02em; }
/* "Made to order" on a cylinder's card: one of the tags, with its spanner */
.motus-pp .motus-cat__tags span.motus-mto { padding: 3px 10px; font-size: 12px; letter-spacing: 0.04em; }
.motus-pp .motus-cat__tags span.motus-mto svg { width: 11px; height: 11px; }
/* product cards placed on a page of their own ([motus_products]): no page frame of their own */
.motus-cat--inline { width: 100%; padding: 0; background: none; }
/* search results: a searched word is whatever was typed, so on a phone the heading is smaller and a long word stays whole */
@media (max-width: 480px) { .motus-pp.motus-found .motus-found__head h1 { font-size: 26px !important; } }