/* ════════════════════════════════════════════════════════════════════════
   catalog.css — product listing + detail pages (Isler revamp2)
   Reuses revamp2 palette (navy #0B1A3D / yellow #F28C28) and footer system.
   Typeface: set centrally in type.css (Sora display / Inter body), 2026-08-12.
   Montserrat was pulled here per the Phase 2 brief and is no longer used —
   its @import was downloading 25 unused faces on all 182 catalogue pages.
   ════════════════════════════════════════════════════════════════════════ */

.cat-page {
  /* font-family comes from type.css, which loads after this file */
  color: var(--charcoal);
  background: var(--white);
}
.cat-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px); }
/* Listing/category pages get a wider — but still bounded & centered — container so wide
   desktops aren't mostly empty margin. Detail (.pd) pages keep the 1200px cap above. */
.cat-section .cat-wrap { max-width: 1480px; }

/* ─────────────────────────────  NAVBAR (pill, 5 category boxes)  ───────────────────────────── */
.cat-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 14px 12px 24px;
  background: var(--navy);
  border-radius: 100px;
  box-shadow: 0 10px 34px rgba(11, 26, 61, 0.22);
  min-width: min(1180px, calc(100vw - 32px));
}
.cat-nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.cat-nav__logo img { height: 30px; width: auto; display: block; }

.cat-nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  list-style: none;
}
.cat-nav__item { position: relative; }
.cat-nav__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  background: none;
  border-radius: 100px;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
}
.cat-nav__top:hover,
.cat-nav__item:hover .cat-nav__top,
.cat-nav__item.is-open .cat-nav__top { color: #fff; background: rgba(255, 255, 255, 0.10); }
.cat-nav__chev { transition: transform 200ms ease; opacity: 0.8; }
.cat-nav__item:hover .cat-nav__chev,
.cat-nav__item.is-open .cat-nav__chev { transform: rotate(180deg); }

/* dropdown */
.cat-nav__drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(11, 26, 61, 0.18);
  border: 1px solid rgba(11, 26, 61, 0.06);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
/* hover bridge so the gap doesn't close the menu */
.cat-nav__item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.cat-nav__item:hover .cat-nav__drop,
.cat-nav__item.is-open .cat-nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cat-nav__drop a,
.cat-nav__soon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  font-size: 13.5px; font-weight: 500;
  color: var(--navy);
  border-radius: 9px;
  white-space: nowrap;
}
.cat-nav__drop a:hover { background: var(--gray-light); color: var(--navy); }
.cat-nav__drop a:hover::after { content: '→'; color: var(--yellow); font-weight: 700; }

/* disabled / coming-soon items — greyed, non-clickable */
.cat-nav__soon {
  color: var(--gray-mid);
  cursor: not-allowed;
  opacity: 0.7;
}
.cat-nav__soon em {
  font-style: normal;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
  background: var(--yellow);
  border-radius: 100px;
  padding: 2px 7px;
}

.cat-nav__enquire {
  flex-shrink: 0;
  padding: 11px 24px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--navy);
  background: var(--yellow);
  border-radius: 100px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.cat-nav__enquire:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(242, 140, 40, 0.4); }
.cat-nav__burger { display: none; }

/* ─────────────────────────────  PAGE HERO / HEADER  ───────────────────────────── */
.cat-hero {
  position: relative;
  margin-top: 0;
  padding: 168px clamp(20px, 5vw, 64px) 72px;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.cat-hero--photo::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.30;
}
.cat-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,15,36,0.55) 0%, rgba(11,26,61,0.85) 100%);
  pointer-events: none;
}
.cat-hero__inner { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto; }
.cat-breadcrumb { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-bottom: 18px; letter-spacing: 0.02em; }
.cat-breadcrumb a { color: rgba(255,255,255,0.78); }
.cat-breadcrumb a:hover { color: var(--yellow); }
.cat-breadcrumb span { margin: 0 8px; opacity: 0.5; }
.cat-hero__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 14px;
}
.cat-hero__title { font-size: clamp(30px, 5vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.cat-hero__intro { margin-top: 16px; max-width: 620px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.72); font-weight: 400; }

/* ─────────────────────────────  LISTING  ───────────────────────────── */
.cat-section { padding: clamp(48px, 6vw, 88px) 0; }
.cat-section--alt { background: var(--off-white); }
.cat-tier-head { margin-bottom: 30px; }
.cat-tier-head__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); }
.cat-tier-head__title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--navy); margin-top: 6px; letter-spacing: -0.01em; }
.cat-tier-head__sub { color: var(--gray-mid); margin-top: 8px; font-size: 14.5px; max-width: 640px; line-height: 1.6; }

/* Responsive product grid: columns reflow to the grid's OWN available width (which
   already excludes the filter sidebar), so it fills the space instead of stretching cards.
   min 320px → 1 col (mobile) · 2 cols (tablet/laptop) · 3 cols (large desktop ~1418px+).
   The 1480px container cap keeps it at a max of 3 columns (never 4 / full-bleed). */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}

/* ─────────────────────────  REUSABLE CATEGORY FILTER  ─────────────────────────
   Sidebar on desktop, collapsible on mobile. Inherits the page font,
   navy/yellow palette. Markup is category-agnostic; assets/js/filter.js fills the
   groups from each card's data-* attributes. */
.cat-filter-layout {
  display: grid;
  /* categories | products | filters  (client 2026-08-06: the filter moved to
     the right, and the column it used to occupy now holds the category nav so
     you can jump categories without leaving the product view) */
  grid-template-columns: 232px minmax(0, 1fr) 246px;
  gap: 32px;
  align-items: start;
}
.cat-filter-layout > .catnav      { grid-column: 1; grid-row: 1; }
.cat-filter-layout > .cat-results { grid-column: 2; grid-row: 1; }
.cat-filter-layout > .cat-filter  { grid-column: 3; grid-row: 1; }

/* ── Category rail (left) ─────────────────────────────────────────────
   Flat list of the four groups; hovering or keyboard-focusing one opens a
   flyout with its sub-categories. Structure mirrors the header mega-menu,
   which is the site's source of truth for the category tree. */
.catnav {
  position: sticky; top: 100px;
  /* sticky makes this a stacking context, so the flyout's own z-index is
     scoped inside it — the rail itself has to outrank the product grid or the
     cards paint over the flyout. */
  z-index: 30;
  background: #fff;
  border: 1px solid rgba(11, 26, 61, 0.08);
  border-radius: 16px;
  padding: 20px 0 12px;
}
.catnav__title {
  display: block; padding: 0 20px 14px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy);
}
.catnav__list { list-style: none; margin: 0; padding: 0; }
.catnav__item { position: relative; }
.catnav__group {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 20px;
  background: none; border: none; cursor: default;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--navy);
  border-left: 3px solid transparent;
  transition: background 140ms ease, border-color 140ms ease;
}
.catnav__group svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }
.catnav__item:hover > .catnav__group,
.catnav__item:focus-within > .catnav__group {
  background: rgba(242, 140, 40, 0.10);
  border-left-color: var(--yellow);
}
.catnav__item--current > .catnav__group { border-left-color: var(--yellow); }

/* the sub-list
   Client 2026-08-06: this used to fly OUT TO THE SIDE of the rail as a
   floating panel (position:absolute; left:calc(100% + 8px)). It now opens
   INLINE, directly under the group it belongs to, so the rail reads as one
   column that expands in place — the same shape the narrow-screen layout at
   the bottom of this file already used.
   Collapsed with max-height rather than display:none so it animates open and
   keeps its place in the DOM/accessibility order. 640px clears the longest
   group (Small Domestic Appliances, 12 children); it is a ceiling for the
   transition, not a visible cap. */
.catnav__flyout {
  list-style: none; margin: 0;
  padding: 0 8px 0 30px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms ease, opacity 160ms ease, padding 260ms ease;
}
.catnav__item:hover > .catnav__flyout,
.catnav__item:focus-within > .catnav__flyout {
  max-height: 640px;
  opacity: 1;
  padding-top: 2px;
  padding-bottom: 8px;
}
/* the chevron points right while closed and turns down as the list opens */
.catnav__group svg { transition: transform 200ms ease; }
.catnav__item:hover > .catnav__group svg,
.catnav__item:focus-within > .catnav__group svg { transform: rotate(90deg); }

.catnav__sub {
  display: block; padding: 7px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--navy); text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.catnav__sub:hover { background: rgba(11, 26, 61, 0.06); }
.catnav__sub[aria-current="page"] { background: rgba(242, 140, 40, 0.18); font-weight: 700; }
/* Feedback 3 (2026-11-02): "coming soon" categories in the sidebar */
.catnav__soon {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #F28C28; background: rgba(242, 140, 40, 0.14); vertical-align: 1px;
}

.cat-filter {
  position: sticky; top: 100px;
  background: #fff;
  border: 1px solid rgba(11, 26, 61, 0.08);
  border-radius: 16px;
  padding: 20px 20px 10px;
}
.cat-filter__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cat-filter__title { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.cat-filter__clear { font-size: 12px; font-weight: 600; color: var(--gray-mid); background: none; border: none; cursor: pointer; padding: 4px 2px; }
.cat-filter__clear:hover { color: var(--navy); text-decoration: underline; }
.cat-filter__group { padding: 16px 0; border-top: 1px solid rgba(11, 26, 61, 0.07); }
.cat-filter__group:first-child { border-top: none; }
.cat-filter__group-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-mid); margin: 0 0 12px; }
.cat-filter__options { display: flex; flex-direction: column; gap: 11px; }
.cat-filter__option { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--navy); user-select: none; }
.cat-filter__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.cat-filter__box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid rgba(11, 26, 61, 0.28); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease, border-color 140ms ease;
}
.cat-filter__option:hover .cat-filter__box { border-color: var(--navy); }
.cat-filter__option input:checked + .cat-filter__box { background: var(--yellow); border-color: var(--yellow); }
.cat-filter__option input:checked + .cat-filter__box::after {
  content: ''; width: 5px; height: 9px; margin-top: -2px;
  border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cat-filter__option input:focus-visible + .cat-filter__box { outline: 2px solid var(--navy); outline-offset: 2px; }

.cat-results__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; min-height: 30px; }
.cat-results__count { font-size: 14px; font-weight: 700; color: var(--navy); }

.cat-empty { text-align: center; padding: 64px 20px; color: var(--gray-mid); font-size: 15px; }
.cat-empty__clear { margin-left: 4px; background: none; border: none; color: var(--navy); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 15px; font-family: inherit; }

/* Mobile toggle — hidden on desktop */
.cat-filter-toggle { display: none; }

/* Stack the filter (collapsible) below ~1080px, so the sidebar only takes the left
   column when there's still room for ≥2 product columns beside it. */
@media (max-width: 1080px) {
  .cat-filter-layout { grid-template-columns: 1fr; gap: 0; }
  /* single column: products first, then filters, then the category rail */
  .cat-filter-layout > .catnav      { grid-column: 1; grid-row: auto; order: 3; margin-top: 28px; }
  .cat-filter-layout > .cat-results { grid-column: 1; grid-row: auto; order: 2; }
  .cat-filter-layout > .cat-filter  { grid-column: 1; grid-row: auto; order: 1; }
  /* no hover on touch — show every sub-list inline instead of as a flyout */
  .catnav { position: static; }
  .catnav__group { cursor: default; }
  .catnav__group svg { display: none; }
  .catnav__flyout {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: none; box-shadow: none; border-radius: 0;
    max-height: none; overflow: visible;
    padding: 0 0 6px 20px;
  }
  .cat-filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 18px; padding: 11px 20px;
    background: var(--navy); color: #fff; border: none; border-radius: 100px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; font-family: inherit;
  }
  .cat-filter-toggle__count { color: var(--yellow); font-weight: 700; }
  .cat-filter { display: none; position: static; margin-bottom: 24px; }
  .cat-filter.is-open { display: block; }
}
.cat-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(11, 26, 61, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 220ms var(--ease-out, ease), box-shadow 220ms ease, border-color 220ms ease;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(11, 26, 61, 0.13); border-color: rgba(242, 140, 40,0.5); }
.cat-card__media {
  position: relative;
  height: 230px;               /* FIXED, uniform image area on every card — not aspect-ratio,
                                  which let tall images stretch the box to uneven heights */
  flex: 0 0 auto;              /* never grow or shrink within the card's flex column */
  background: var(--gray-light);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
}
/* Whole product stays visible, scaled DOWN to fit the fixed box, centered — never cropped/stretched */
.cat-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.cat-card__tier {
  position: absolute; top: 12px; left: 12px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); background: var(--yellow);
  padding: 4px 10px; border-radius: 100px;
}
.cat-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
/* min-height reserves 2 lines so 1-line vs 2-line titles keep the spec/price rows aligned */
.cat-card__name { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.25; min-height: 2.5em; }
/* flex:1 pushes the foot (price + View) to the bottom, so it aligns across cards regardless of spec length */
.cat-card__spec { margin-top: 6px; font-size: 13px; color: var(--gray-mid); line-height: 1.5; flex: 1; }
.cat-card__foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-card__price { font-size: 17px; font-weight: 800; color: var(--navy); }
.cat-card__price small { display: block; font-size: 10px; font-weight: 600; color: var(--gray-mid); letter-spacing: 0.04em; }
.cat-card__view {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--navy); background: var(--gray-light);
  padding: 10px 18px; border-radius: 100px;
  transition: background 160ms ease, color 160ms ease;
}
.cat-card:hover .cat-card__view { background: var(--navy); color: #fff; }

/* ─────────────────────────────  PRODUCT DETAIL  ───────────────────────────── */
.pd { padding: 132px 0 0; }
.pd__layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.pd__gallery {
  position: sticky; top: 110px;
  background: var(--gray-light);
  border-radius: 20px;
  padding: 40px;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
}
.pd__gallery img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity 200ms ease; }

.pd__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); }
.pd__title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--navy); line-height: 1.1; letter-spacing: -0.02em; margin-top: 8px; }
.pd__code { margin-top: 10px; font-size: 13px; color: var(--gray-mid); letter-spacing: 0.02em; }
.pd__code b { color: var(--navy); font-weight: 600; }

.pd__price { margin-top: 20px; font-size: 30px; font-weight: 800; color: var(--navy); }
.pd__price-note { font-size: 12px; font-weight: 600; color: var(--gray-mid); margin-left: 8px; letter-spacing: 0.02em; }
.pd__price--enquire { font-size: 18px; font-weight: 700; color: var(--navy); }

.pd__variants { margin-top: 28px; }
.pd__variants-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.pd__variant-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pd__variant {
  padding: 12px 20px;
  font-size: 13.5px; font-weight: 600;
  color: var(--navy); background: #fff;
  border: 1.5px solid rgba(11, 26, 61, 0.18);
  border-radius: 12px; cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
}
.pd__variant:hover { border-color: var(--navy); }
.pd__variant.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }

.pd__highlights { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.pd__chip {
  display: inline-flex; flex-direction: column;
  padding: 12px 16px; background: var(--off-white);
  border: 1px solid rgba(11,26,61,0.07); border-radius: 12px;
  min-width: 120px;
}
.pd__chip span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-mid); }
.pd__chip b { font-size: 13.5px; font-weight: 600; color: var(--navy); margin-top: 3px; }

.pd__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.pd__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 34px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 100px; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}
.pd__btn--primary { background: var(--yellow); color: var(--navy); border: 2px solid var(--yellow); }
.pd__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(242, 140, 40,0.38); }
.pd__btn--secondary { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.pd__btn--secondary:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

.pd__b2b { margin-top: 16px; font-size: 12.5px; color: var(--gray-mid); line-height: 1.5; }

/* spec table */
.pd__specs { padding: clamp(48px, 6vw, 88px) 0; }
.pd__specs-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--navy); margin-bottom: 26px; letter-spacing: -0.01em; }
.pd__spec-table { width: 100%; border-collapse: collapse; max-width: 860px; }
.pd__spec-table tr { border-bottom: 1px solid rgba(11, 26, 61, 0.08); }
.pd__spec-table tr:nth-child(even) { background: var(--off-white); }
.pd__spec-table th {
  text-align: left; width: 40%;
  padding: 14px 18px; font-size: 13.5px; font-weight: 600; color: var(--gray-mid); vertical-align: top;
}
.pd__spec-table td { padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--navy); }

/* ─────────────────────────────  RESPONSIVE  ───────────────────────────── */
@media (max-width: 1023px) {
  .cat-nav { min-width: min(720px, calc(100vw - 24px)); gap: 12px; padding: 10px 12px 10px 18px; }
  .cat-nav__menu { display: none; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--navy); border-radius: 18px; padding: 12px; box-shadow: 0 18px 50px rgba(11,26,61,0.3); }
  .cat-nav.is-open .cat-nav__menu { display: flex; }
  .cat-nav__top { width: 100%; justify-content: space-between; }
  .cat-nav__drop { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: none; background: rgba(255,255,255,0.04); margin: 2px 0 6px; display: none; }
  .cat-nav__item.is-open .cat-nav__drop { display: flex; }
  .cat-nav__drop a { color: #fff; }
  .cat-nav__drop a:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .cat-nav__soon { color: rgba(255,255,255,0.55); }
  .cat-nav__item::after { display: none; }
  .cat-nav__burger { display: inline-flex; flex-direction: column; gap: 4px; margin-left: auto; padding: 8px; background: none; }
  .cat-nav__burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }
  .cat-nav__enquire { display: none; }
  .pd__layout { grid-template-columns: 1fr; }
  .pd__gallery { position: static; }
}
@media (max-width: 560px) {
  .cat-hero { padding-top: 140px; }
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .cat-card__body { padding: 14px; }
  .cat-card__name { font-size: 15px; }
}