/* CR Outdoor Lighting — native-rebuild bridge CSS.
   Each block maps the design styling onto native WPBakery/Salient element markup
   so the homepage sections are built from standard editable elements. */

/* ===== GLOBAL native-element fixes (apply to every rebuilt section) ===== */
/* vc_custom_heading emits an inline font-family:Abril Fatface;font-weight:400 that beats the
   design CSS. Force the design heading font family for all custom headings on the homepage; the
   per-section .cr-*__title / .cr-*__h rules still control size — re-assert their weight with the
   weight utility classes below where the inline 400 would otherwise win. */
.cr-home .vc_custom_heading { font-family: 'Archivo', sans-serif !important; }
.cr-home .vc_custom_heading.cr-w900 { font-weight: 900 !important; }
.cr-home .vc_custom_heading.cr-w800 { font-weight: 800 !important; }
.cr-home .vc_custom_heading.cr-w700 { font-weight: 700 !important; }
/* Salient nectar_btn adds a translateY(-3px) lift + opacity:0.87 fade on hover/focus that the design
   does NOT use (design transitions background/colour only). Neutralise globally for all rebuilt buttons. */
.cr-home a.nectar-button:hover, .cr-home a.nectar-button:focus,
.cr-home a.nectar-button:active { transform: none !important; opacity: 1 !important; }
/* Salient's .row_col_wrap_12_inner has a clearfix ::before/::after that becomes a PHANTOM grid/flex
   item in our rebuilt sections (mis-positions columns, inflates height). Kill it on all rebuilt rows. */
.cr-home .cr-section .row_col_wrap_12_inner::before,
.cr-home .cr-section .row_col_wrap_12_inner::after { display: none !important; content: none !important; }
/* Inner-row columns: when a section flexes the .row_col_wrap_12_inner bar, neutralise Salient's
   span-based percentage widths so content sizes naturally. Scope per-section via the bar class. */

/* ===== cr_cta native-bridge CSS (add to style.css) =====
   Native markup differs from the original cr_cta in 3 ways that need bridging:
   1) .cr-cta__in must become the flex bar -> it now lands on the inner-row wrapper .row_col_wrap_12_inner
   2) nectar_btn outputs a.nectar-button with Salient's own padding/radius/shadow -> reset to .cr-btn base
   3) the phone SVG icon was inline cr_icon('phone') -> recreate as a ::before CSS mask (same path) */

/* 1. Inner row: .cr-inner (also on the row_inner) provides the max-width container; the
   .row_col_wrap_12_inner wrapper becomes the flex bar. Neutralise the design's .cr-cta__in
   flex on the row_inner itself (it would shrink-wrap its single wrapper child). */
.cr-cta .cr-cta__in { display: block; }
.cr-cta .cr-cta__in > .row_col_wrap_12_inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  max-width: var(--cr-maxw); margin: 0 auto;
  padding-left: var(--cr-gut); padding-right: var(--cr-gut);
}
/* Salient .row_col_wrap_12_inner has a clearfix ::before/::after that becomes a phantom flex item
   (splits the space-between free space, pushing the buttons in from the right edge). Remove them. */
.cr-cta .cr-cta__in > .row_col_wrap_12_inner::before,
.cr-cta .cr-cta__in > .row_col_wrap_12_inner::after { display: none !important; content: none !important; }
.cr-cta .cr-cta__in .row-bg-wrap, .cr-cta .cr-cta__in .row-bg { display: none !important; }
.cr-cta .cr-cta__in > .row_col_wrap_12_inner > .wpb_column { flex: 0 0 auto; }
/* neutralise Salient inner-column default width/margins so flex controls layout */
.cr-cta .cr-cta__in .vc_col-sm-8,
.cr-cta .cr-cta__in .vc_col-sm-4 { width: auto; padding: 0; margin: 0; }
.cr-cta .cr-cta__in .wpb_wrapper { margin: 0; }

/* 2. Heading + paragraph (el_class lands on .wpb_heading wrapper / vc_column_text wrapper) */
.cr-cta .cr-cta__h, .cr-cta .cr-cta__h h2 {
  font-family: 'Archivo', sans-serif !important; font-weight: 900 !important; font-size: 30px !important;
  color: #fff; line-height: 1.1; margin: 0 0 8px;
}
/* columns: neutralise Salient span-% widths so space-between pushes the buttons to the right edge */
.cr-cta .cr-cta__in .row_col_wrap_12_inner > .wpb_column { width: auto !important; }
.cr-cta .cr-cta__btns { justify-content: flex-end; }
.cr-cta .cr-cta__p, .cr-cta .cr-cta__p p {
  font-size: 16px; color: #fff; opacity: .92; margin: 0;
}

/* 3. Button group + nectar_btn base reset (el_class lands ON a.nectar-button).
   The two buttons live inside .cr-cta__btns > .wpb_wrapper, so flex THAT (not the column) for an
   exact 14px gap; align-items:stretch makes both buttons equal height despite the phone icon. */
.cr-cta .cr-cta__btns .wpb_wrapper {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; justify-content: flex-end;
}
.cr-cta a.nectar-button.cr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 800; font-size: 16px; line-height: 1;
  padding: 16px 26px; margin: 0 !important; border-radius: var(--cr-radius-btn);
  border: none !important; box-shadow: none !important; text-shadow: none; letter-spacing: normal;
  transition: background var(--cr-ease), color var(--cr-ease);
}
/* kill Salient's hover-fill ::after layer only (NOT ::before — that carries our phone icon) */
.cr-cta a.nectar-button.cr-btn:after { display: none !important; }
.cr-cta a.nectar-button.cr-btn:not(.cr-cta__phone--ico):before { display: none; }
/* bg + hover need !important to beat nectar_btn's inline background-color (from color_override) */
.cr-cta a.nectar-button.cr-cta__phone   { background: var(--cr-ink) !important; color: #fff !important; }
.cr-cta a.nectar-button.cr-cta__phone:hover   { background: var(--cr-ink-deep) !important; color: #fff !important; }
.cr-cta a.nectar-button.cr-cta__contact { background: #fff !important; color: var(--cr-ink) !important; }
.cr-cta a.nectar-button.cr-cta__contact:hover { background: var(--cr-navy) !important; color: #fff !important; }
.cr-cta a.nectar-button.cr-cta__contact:hover .cr-i, .cr-cta a.nectar-button.cr-cta__contact:hover:before { color: #fff; }

/* 3b. Phone icon recreated from cr_icon('phone') as an orange mask before the label.
   SVG: viewBox 0 0 24 24, fill none, stroke currentColor, stroke-width 2, round caps/joins. */
.cr-cta a.nectar-button.cr-cta__phone--ico .nectar-button-text-wrap:before,
.cr-cta a.nectar-button.cr-cta__phone--ico:before {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 9px;
  flex: none; vertical-align: middle; background: var(--cr-orange);
  -webkit-mask: var(--cr-cta-phone-svg) center / contain no-repeat;
          mask: var(--cr-cta-phone-svg) center / contain no-repeat;
}
:root {
  --cr-cta-phone-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

/* Section band itself (.cr-cta already exists in style.css: background orange, padding 48px 0).
   Full-bleed + margin-bottom:0 already handled by generic .cr-home .cr-section rules. */

/* Responsive parity (original: stack at <=560px). The inner-row flex bar must restack. */
@media (max-width: 560px) {
  .cr-cta .cr-cta__in > .row_col_wrap_12_inner,
  .cr-cta .cr-cta__in.row_col_wrap_12_inner { flex-direction: column; align-items: flex-start; }
  .cr-cta .cr-cta__btns { justify-content: flex-start; }
}
/* ============================ HERO ============================ */
/* ===== cr_hero native-bridge CSS (add to style.css) ===== */

/* Decorative glows: were two child divs, now row pseudo-elements */
.cr-home .cr-hero { position: relative; }
.cr-home .cr-hero::before,
.cr-home .cr-hero::after { content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.cr-home .cr-hero::before { top:-180px; right:-120px; width:560px; height:560px; background:radial-gradient(circle, rgba(247,148,30,.22), transparent 65%); }
.cr-home .cr-hero::after  { bottom:-220px; left:-160px; width:520px; height:520px; background:radial-gradient(circle, rgba(46,49,146,.55), transparent 68%); }

/* Grid lives on the inner-row COLUMN WRAPPER (Salient wraps vc_column_inner in .row_col_wrap_12_inner) */
/* the design .cr-hero__grid{display:grid} now lands on the INNER ROW, double-gridding it; neutralise
   it so the grid lives only on the .row_col_wrap_12_inner wrapper (which holds the 2 columns). */
.cr-home .cr-hero__grid { display: block; padding-top: 0; padding-bottom: 0; }
.cr-home .cr-hero__grid > .row_col_wrap_12_inner {
  position:relative; z-index:1; width:100%;
  max-width:var(--cr-maxw); margin:0 auto;
  padding:64px var(--cr-gut);
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
}
.cr-home .cr-hero__grid > .row_col_wrap_12_inner > .wpb_column { width:100%!important; float:none!important; }
.cr-home .cr-hero__grid .vc_column-inner { padding:0!important; }
.cr-home .cr-hero__grid .wpb_wrapper { margin:0!important; }
.cr-home .cr-hero__col, .cr-home .cr-hero__media { min-width:0; }

/* vc_custom_heading: original rule targeted .cr-hero__title directly; cover wrapper + inner h1 */
.cr-home .cr-hero__title, .cr-home .cr-hero__title .wpb_heading,
.cr-home h1.cr-hero__title { font-family:'Archivo',sans-serif !important; font-weight:800 !important; font-size:46px !important; line-height:1.1; letter-spacing:-.02em; color:#fff; margin:0 0 22px; }
.cr-home .cr-hero__title span, .cr-home .cr-hero__title .wpb_heading span { color:var(--cr-orange) !important; }
/* Two-heading split (re-save-proof: orange comes from a class, not an inline <span> that
   WPBakery would strip on editor save). Line 1 white, line 2 orange, tight stacking. */
.cr-home .cr-hero__title--main { margin: 0 !important; }
.cr-home .cr-hero__title--accent, .cr-home .cr-hero__title--accent * { color: var(--cr-orange) !important; margin-top: 0 !important; }
.cr-home .cr-hero__title--accent { margin: 0 0 22px !important; }
.cr-home .cr-hero__title > h1 { font:inherit; color:inherit; margin:0; letter-spacing:inherit; }

/* Badge: re-add star icon (exact path from cr_icon('star'), fill) as ::before mask */
.cr-home .cr-hero__badge { margin-bottom:24px; }
.cr-home .cr-hero__badge::before {
  content:""; width:14px; height:14px; flex:none; background:var(--cr-orange);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.4 6.9H22l-6 4.3 2.3 6.9L12 16l-6.3 4 2.3-6.9-6-4.3h7.6z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.4 6.9H22l-6 4.3 2.3 6.9L12 16l-6.3 4 2.3-6.9-6-4.3h7.6z'/></svg>") center/contain no-repeat;
}

/* vc_column_text wraps content in .wpb_wrapper(>p); unwrap so design flex/inline layout survives */
.cr-home .cr-hero__badge .wpb_wrapper,
.cr-home .cr-hero__text .wpb_wrapper,
.cr-home .cr-hero__trust .wpb_wrapper,
.cr-home .cr-hero__chip .wpb_wrapper { display:contents; }
/* badge/text inner <p> reset (vc_column_text wraps text in a <p>) + restore design spacing */
.cr-home .cr-hero__badge p, .cr-home .cr-hero__text p { margin:0; }
.cr-home .cr-hero__text { margin-bottom: 34px !important; }
.cr-home .cr-hero__badge { margin-bottom: 24px !important; }

/* CTA row: reset nectar_btn, reapply .cr-btn look on the anchor (el_class lands on a.nectar-button) */
/* buttons sit directly in the content column (no nested row); space them as a group */
.cr-home .cr-hero__col a.nectar-button.cr-btn { margin: 0 0 38px; vertical-align: top; }
.cr-home .cr-hero__col a.nectar-button.cr-hero__btn1 { margin-right: 14px; }
.cr-home a.nectar-button.cr-btn {
  display:inline-flex; align-items:center; gap:9px; font-family:'Manrope',sans-serif;
  font-weight:800; font-size:15.5px; line-height:1; padding:16px 28px;
  border-radius:var(--cr-radius-btn); margin:0; box-shadow:none; text-transform:none; letter-spacing:0;
  transition:background var(--cr-ease), border-color var(--cr-ease), color var(--cr-ease);
}
.cr-home a.nectar-button.cr-btn:not(.cr-cta__phone--ico)::before { display:none; } /* kill Salient hover-fill ::before (keep ::after arrow + cta phone ::before icon) */
.cr-home a.nectar-button.cr-btn--primary { background:var(--cr-orange) !important; color:#fff !important; border:none !important; }
.cr-home a.nectar-button.cr-btn--primary:hover { background:var(--cr-orange-dk) !important; color:#fff !important; }
.cr-home a.nectar-button.cr-btn--ghost { background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.28) !important; }
.cr-home a.nectar-button.cr-btn--ghost:hover { border-color:#fff !important; background:rgba(255,255,255,.06) !important; color:#fff !important; }
/* Primary button trailing arrow icon (cr_icon('arrow','cr-i18'), stroke) as ::after mask */
.cr-home a.nectar-button.cr-hero__btn1::after {
  content:""; width:18px; height:18px; flex:none; background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
}

/* Media column: image_with_animation outputs .img-with-aniamtion-wrap img (Salient 'aniamtion' typo) */
.cr-home .cr-hero__media { position:relative; display:flex; align-items:center; justify-content:center; }
/* halo: was an empty <div> in a Text Block — now a pure-CSS pseudo-element */
.cr-home .cr-hero__media::before { content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.96), rgba(255,255,255,.7) 55%, transparent 72%); left:50%; top:50%; transform:translate(-50%,-50%); z-index:0; pointer-events:none; }
/* el_class lands ON the <img> (img.cr-hero__img-wrap), and image_with_animation wraps it in
   .img-with-aniamtion-wrap > .hover-wrap > .hover-wrap-inner */
.cr-home .cr-hero__media .img-with-aniamtion-wrap { position:relative; z-index:1; margin:0; max-width:none; }
.cr-home img.cr-hero__img-wrap { width:330px; height:auto; max-width:330px; filter:drop-shadow(0 30px 40px rgba(0,0,0,.35)); }

/* Floating chip + bulb icon (cr_icon('bulb','cr-i22 cr-i-orange'), stroke) as ::before mask */
.cr-home .cr-hero__chip { position:absolute; bottom:8px; right:8px; z-index:2; background:#fff; border-radius:14px; box-shadow:0 18px 40px -12px rgba(0,0,0,.4); padding:14px 18px; display:flex; align-items:center; gap:12px; }
.cr-home .cr-hero__chip-ic { width:42px; height:42px; border-radius:10px; background:#FFF3E3; display:flex; align-items:center; justify-content:center; flex:none; }
.cr-home .cr-hero__chip-ic::before {
  content:""; width:22px; height:22px; background:var(--cr-orange);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V18h6v-1.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V18h6v-1.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/></svg>") center/contain no-repeat;
}

/* Responsive parity with source @media (max-width:880px / 560px) */
@media (max-width:880px){
  .cr-home .cr-hero__grid > .row_col_wrap_12_inner { grid-template-columns:1fr; }
  .cr-home .cr-hero__media { order:-1; }
  .cr-home .cr-hero__title, .cr-home h1.cr-hero__title { font-size:44px; }
}
@media (max-width:560px){
  .cr-home .cr-hero__title, .cr-home h1.cr-hero__title { font-size:36px; }
  .cr-home .cr-hero__grid > .row_col_wrap_12_inner { padding-top:44px; padding-bottom:44px; }
}
/* ============================ TRUST BAR ============================ */
/* ============ cr_trust NATIVE BRIDGE ============
   Native WPBakery markup differs from the original hand-built section:
   - cr-trust__grid now sits on a vc_row_inner; its 5 columns are wrapped in
     .row_col_wrap_12_inner, so the grid must target THAT wrapper.
   - Salient injects per-column .vc_column-inner / .wpb_wrapper padding/margins
     that must be zeroed so the 22px band padding + 8px gap stay exact.
   - Custom inline SVG icons (shield/card/trophy/truck/pin) recreated as CSS ::before
     mask boxes using the EXACT path data from cr_icon(), 26px, painted --cr-orange
     to match .cr-i26.cr-i-orange.
*/

/* Grid lives on the inner-row column wrapper now */
.cr-home .cr-trust .cr-trust__grid > .row_col_wrap_12_inner {
  max-width: var(--cr-maxw); margin: 0 auto;
  padding-left: var(--cr-gut); padding-right: var(--cr-gut);
  padding-top: 22px; padding-bottom: 22px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.cr-home .cr-trust .cr-trust__grid { display: block !important; padding: 0 !important; margin: 0 !important; width: 100%; max-width: 100%; }

/* Each item is a vc_column_inner now: strip Salient column chrome, restore the flex row */
.cr-home .cr-trust .cr-trust__item { width: auto !important; padding: 0 !important; margin: 0 !important; }
.cr-home .cr-trust .cr-trust__item > .vc_column-inner { padding: 0 !important; }
.cr-home .cr-trust .cr-trust__item > .vc_column-inner > .wpb_wrapper {
  display: flex; align-items: center; gap: 13px; padding: 8px 14px; margin: 0 !important;
}
/* hairline divider between items (skip first) */
.cr-home .cr-trust .row_col_wrap_12_inner > .cr-trust__item + .cr-trust__item > .vc_column-inner > .wpb_wrapper {
  border-left: 1px solid var(--cr-line);
}

/* vc_column_text wrapper flatten — keep .cr-trust__txt typography intact */
.cr-home .cr-trust .cr-trust__txt { margin: 0 !important; }
.cr-home .cr-trust .cr-trust__txt .cr-trust__t { font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--cr-ink); }
.cr-home .cr-trust .cr-trust__txt .cr-trust__s { font-size: 12.5px; color: var(--cr-muted); line-height: 1.25; }
.cr-home .cr-trust .cr-trust__txt .cr-trust__s.is-accent { color: var(--cr-orange); font-weight: 700; }

/* --- Inline-SVG icons recreated as CSS mask boxes (replaces cr_icon('shield' etc, 'cr-i26 cr-i-orange')) --- */
.cr-home .cr-trust .cr-tb > .vc_column-inner > .wpb_wrapper::before {
  content: ""; flex: none; width: 26px; height: 26px;
  background-color: var(--cr-orange);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Paths copied verbatim from cr_icon(); icons are STROKED (fill=none, stroke-width 2,
   round caps/joins) so the masked silhouette equals the original line glyph. */
.cr-home .cr-trust .cr-tb--shield > .vc_column-inner > .wpb_wrapper::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.cr-home .cr-trust .cr-tb--card > .vc_column-inner > .wpb_wrapper::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}
.cr-home .cr-trust .cr-tb--trophy > .vc_column-inner > .wpb_wrapper::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M6 4h12v4a6 6 0 0 1-12 0z'/%3E%3Cpath d='M18 5h2.5a2 2 0 0 1 0 4H18M6 5H3.5a2 2 0 0 0 0 4H6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M6 4h12v4a6 6 0 0 1-12 0z'/%3E%3Cpath d='M18 5h2.5a2 2 0 0 1 0 4H18M6 5H3.5a2 2 0 0 0 0 4H6'/%3E%3C/svg%3E");
}
.cr-home .cr-trust .cr-tb--truck > .vc_column-inner > .wpb_wrapper::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17.5' cy='18' r='1.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17.5' cy='18' r='1.6'/%3E%3C/svg%3E");
}
.cr-home .cr-trust .cr-tb--pin > .vc_column-inner > .wpb_wrapper::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* --- Responsive: mirror original cr_trust breakpoints (style.css 486-499) on the new wrapper --- */
@media (max-width: 980px) {
  .cr-home .cr-trust .cr-trust__grid > .row_col_wrap_12_inner { grid-template-columns: repeat(2, 1fr); }
  .cr-home .cr-trust .row_col_wrap_12_inner > .cr-trust__item:nth-child(odd) > .vc_column-inner > .wpb_wrapper { border-left: none; }
  .cr-home .cr-trust .row_col_wrap_12_inner > .cr-trust__item > .vc_column-inner > .wpb_wrapper { border-left: 1px solid var(--cr-line); }
}
@media (max-width: 560px) {
  .cr-home .cr-trust .cr-trust__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
  .cr-home .cr-trust .row_col_wrap_12_inner > .cr-trust__item > .vc_column-inner > .wpb_wrapper { border-left: none !important; }
}
/* ============================ CATEGORIES ============================ */
/* ===== cr_categories native bridge (flattened: each card = 1 column, laid out by grid-areas) ===== */
/* container */
.cr-home .cr-cats > .col.span_12 > .vc_column-inner,
.cr-home .cr-cats .vc_column-inner { padding: 0 !important; }
.cr-home .cr-cats .wpb_wrapper { margin: 0; }
.cr-home .cr-cats .cr-sec-head, .cr-home .cr-cats .cr-cats__grid { max-width: var(--cr-maxw); margin: 0 auto; padding-left: var(--cr-gut); padding-right: var(--cr-gut); }
.cr-home .cr-cats .cr-sec-head { display: block; margin-bottom: 34px; }
.cr-home .cr-cats .cr-cats__grid { display: block; }

/* section head: eyebrow + h2 on the left, view-all link on the right */
.cr-home .cr-cats .cr-sec-head > .row_col_wrap_12_inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.cr-home .cr-cats .cr-sec-head > .row_col_wrap_12_inner > .wpb_column { width: auto !important; padding: 0 !important; }
/* el_class lands directly on the h2/div; force the design type over vc_custom_heading's inline font */
.cr-home .cr-cats .cr-eyebrow { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-orange) !important; margin: 0 0 8px !important; line-height: 1.2; }
.cr-home .cr-cats .cr-h2 { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 36px !important; letter-spacing: -.02em; color: var(--cr-ink) !important; margin: 0 !important; line-height: 1.1; }
.cr-home .cr-cats a.nectar-button.cr-viewall { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; line-height: 1; color: var(--cr-blue); }
.cr-home .cr-cats a.nectar-button.cr-viewall:hover { color: var(--cr-orange) !important; background: none !important; }
.cr-home .cr-cats a.nectar-button.cr-viewall::after { content: ""; width: 16px; height: 16px; flex: none; background-color: currentColor; -webkit-mask: var(--cr-arrow) center/contain no-repeat; mask: var(--cr-arrow) center/contain no-repeat; }
.cr-home .cr-cats a.nectar-button.cr-viewall::before { display: none; }

/* 3-col grid */
.cr-home .cr-cats .cr-cats__grid > .row_col_wrap_12_inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.cr-home .cr-cats .cr-cat { width: auto !important; padding: 0 !important; margin: 0 !important; height: 100%; }
.cr-home .cr-cats .cr-cat > .vc_column-inner { height: 100%; }

/* card = the column's .wpb_wrapper, a grid placing the 5 native elements into areas.
   list row = 1fr so it grows and pushes the "See all" footer to the bottom → all 3 align;
   the wrapper fills the (stretched) column height so the shorter cards have no empty "second box". */
.cr-home .cr-cats .cr-cat > .vc_column-inner > .wpb_wrapper {
  display: grid; grid-template-columns: 128px 1fr; column-gap: 28px;
  grid-template-areas: "ic title" "ic sub" "list list" "foot foot";
  grid-template-rows: 52px 52px 1fr auto;
  padding-top: 24px;
  background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; overflow: hidden; height: 100%;
  transition: border-color var(--cr-ease), box-shadow var(--cr-ease);
}
.cr-home .cr-cats .cr-cat > .vc_column-inner > .wpb_wrapper:hover { border-color: var(--cr-orange); box-shadow: var(--cr-shadow-card); }
.cr-home .cr-cats .cr-cat > .vc_column-inner { padding: 0 !important; }

/* icon box (image_with_animation -> .img-with-aniamtion-wrap img) */
.cr-home .cr-cats .cr-cat__ic { grid-area: ic; align-self: start; width: 104px; height: 104px; margin: 0 0 0 24px; background: var(--cr-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.cr-home .cr-cats .cr-cat__ic .img-with-aniamtion-wrap, .cr-home .cr-cats .cr-cat__ic .hover-wrap, .cr-home .cr-cats .cr-cat__ic .hover-wrap-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; }
.cr-home .cr-cats .cr-cat__ic img { max-width: 100%; max-height: 100%; width: auto !important; height: auto; object-fit: contain; }

/* title + sub */
.cr-home .cr-cats .cr-cat__title { grid-area: title; align-self: end; margin: 0 24px 0 0; font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 21px !important; color: var(--cr-ink) !important; line-height: 1.15; }
.cr-home .cr-cats .cr-cat__sub { grid-area: sub; align-self: start; margin: 4px 24px 0 0; }
.cr-home .cr-cats .cr-cat__sub, .cr-home .cr-cats .cr-cat__sub p { font-size: 13px; color: var(--cr-muted); font-weight: 600; margin: 0; }

/* child list */
.cr-home .cr-cats .cr-cat__list { grid-area: list; margin: 0; padding: 16px 24px 8px; }
.cr-home .cr-cats .cr-cat__list .cr-cat__li { display: block; font-size: 13.5px; color: var(--cr-text-dark, #2A2140); padding: 7px 0; border-top: 1px solid var(--cr-line-2); }

/* footer "See all" link */
.cr-home .cr-cats a.nectar-button.cr-cat__foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; width: auto; margin: 8px 0 0; background: none !important; border: 0 !important; border-top: 1px solid var(--cr-line-2) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 24px !important; font-weight: 800; font-size: 14px; color: var(--cr-blue) !important; line-height: 1; }
.cr-home .cr-cats a.nectar-button.cr-cat__foot:hover { color: var(--cr-orange) !important; background: none !important; }
.cr-home .cr-cats a.nectar-button.cr-cat__foot::after { content: ""; width: 18px; height: 18px; flex: none; background-color: var(--cr-orange); -webkit-mask: var(--cr-arrow) center/contain no-repeat; mask: var(--cr-arrow) center/contain no-repeat; }
.cr-home .cr-cats a.nectar-button.cr-cat__foot::before { display: none; }

:root { --cr-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

@media (max-width: 720px) {
  .cr-home .cr-cats .cr-cats__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
}

/* ============================ PROMO ============================ */
/* ===== cr_promo native bridge (2 cards: navy Click&Collect + light Feeder Pillars) ===== */
.cr-home .cr-promo { background: #fff; }
.cr-home .cr-promo .vc_column-inner { padding: 0 !important; }
.cr-home .cr-promo .cr-promo__grid { display: block; max-width: var(--cr-maxw); margin: 0 auto; padding-left: var(--cr-gut); padding-right: var(--cr-gut); }
.cr-home .cr-promo .cr-promo__grid > .row_col_wrap_12_inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.cr-home .cr-promo .cr-promo__cc, .cr-home .cr-promo .cr-promo__fp { width: auto !important; padding: 0 !important; margin: 0 !important; height: 100%; }
.cr-home .cr-promo .cr-promo__cc > .vc_column-inner, .cr-home .cr-promo .cr-promo__fp > .vc_column-inner { height: 100%; }

/* heading weight (vc_custom_heading inline font-weight:400 override) */
.cr-home .cr-promo .cr-promo__h { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 30px !important; line-height: 1.1; color: #fff !important; margin: 0 0 12px !important; }
.cr-home .cr-promo .cr-promo__h--dark { color: var(--cr-ink) !important; line-height: 1.05; margin-bottom: 10px !important; }
.cr-home .cr-promo .cr-promo__fp-eyebrow { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted-2) !important; margin: 0 0 8px !important; }

/* ---- Click & Collect (navy gradient card) ---- */
.cr-home .cr-promo .cr-promo__cc > .vc_column-inner > .wpb_wrapper {
  position: relative; overflow: hidden; border-radius: 18px;
  background: linear-gradient(120deg, var(--cr-blue), #1B1D3A);
  padding: 42px 44px; min-height: 240px; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.cr-home .cr-promo .cr-promo__cc > .vc_column-inner > .wpb_wrapper::before { content: ""; position: absolute; top: -60px; right: -40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(247,148,30,.16); }
.cr-home .cr-promo .cr-promo__badge { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--cr-orange); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; width: max-content; margin-bottom: 18px; }
.cr-home .cr-promo .cr-promo__badge p { margin: 0; }
.cr-home .cr-promo .cr-promo__p, .cr-home .cr-promo .cr-promo__p p { position: relative; font-size: 15.5px; color: #C7CADE; line-height: 1.55; max-width: 380px; margin: 0 0 24px; }

/* ---- Feeder Pillars (light card: text grid-area left, image right) ---- */
.cr-home .cr-promo .cr-promo__fp > .vc_column-inner > .wpb_wrapper {
  position: relative; overflow: hidden; border-radius: 18px; background: var(--cr-light); border: 1px solid var(--cr-line);
  padding: 38px 234px 38px 44px; min-height: 240px; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.cr-home .cr-promo .cr-promo__fp-eyebrow { grid-area: eyebrow; }
.cr-home .cr-promo .cr-promo__fp .cr-promo__h--dark { grid-area: heading; }
.cr-home .cr-promo .cr-promo__fp-desc { grid-area: desc; font-size: 15px; color: var(--cr-text-dark, #2A2140); margin: 0 0 6px; }
.cr-home .cr-promo .cr-promo__fp-desc p { margin: 0; }
.cr-home .cr-promo .cr-promo__fp-from { grid-area: from; font-size: 14px; color: var(--cr-muted); margin: 0 0 22px; }
.cr-home .cr-promo .cr-promo__fp-from p { margin: 0; }
.cr-home .cr-promo .cr-promo__fp-from span { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; color: var(--cr-blue); vertical-align: -2px; }
.cr-home .cr-promo a.nectar-button.cr-promo__btn--orange { grid-area: btn; }
/* image_with_animation el_class lands on the <img>; the .img-with-aniamtion-wrap is the box */
.cr-home .cr-promo .cr-promo__fp .img-with-aniamtion-wrap { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); width: 170px; height: 168px; background: #fff; border-radius: 14px; border: 1px solid var(--cr-line); display: flex; align-items: center; justify-content: center; padding: 14px; margin: 0; }
.cr-home .cr-promo .cr-promo__fp .hover-wrap, .cr-home .cr-promo .cr-promo__fp .hover-wrap-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; }
.cr-home .cr-promo img.cr-promo__fp-img { max-width: 100%; max-height: 140px; width: auto !important; height: auto; object-fit: contain; }

/* ---- buttons (nectar_btn reset to the design pill) ---- */
.cr-home .cr-promo a.nectar-button.cr-promo__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; font-size: 14.5px; line-height: 1; padding: 13px 22px !important; border-radius: 10px !important; width: max-content; margin: 0 !important; border: 0 !important; box-shadow: none !important; text-shadow: none; }
.cr-home .cr-promo a.nectar-button.cr-promo__btn::before, .cr-home .cr-promo a.nectar-button.cr-promo__btn::after { display: none; }
.cr-home .cr-promo a.nectar-button.cr-promo__btn--light { background: #fff !important; color: var(--cr-ink) !important; }
.cr-home .cr-promo a.nectar-button.cr-promo__btn--light:hover { background: var(--cr-orange) !important; color: #fff !important; }
.cr-home .cr-promo a.nectar-button.cr-promo__btn--orange { background: var(--cr-orange) !important; color: #fff !important; }
.cr-home .cr-promo a.nectar-button.cr-promo__btn--orange:hover { background: var(--cr-orange-dk) !important; color: #fff !important; }

@media (max-width: 720px) {
  .cr-home .cr-promo .cr-promo__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; }
}

/* Neutral builder row that only hosts a full-bleed CR product element: strip the
   row/column chrome so the element's own <section> sits flush like the other bands. */
.cr-home .cr-elsec.wpb_row { margin: 0 !important; padding: 0 !important; }
.cr-home .cr-elsec > .col, .cr-home .cr-elsec .vc_column-inner, .cr-home .cr-elsec > .col > .vc_column-inner > .wpb_wrapper { padding: 0 !important; margin: 0 !important; }

/* ===== CR Product Grid element — configurable column count (responsive-safe) ===== *
 * The [cr_product_grid] element sets --cr-pgrid-cols inline. These rules load after
 * style.css so they own the column count, while keeping the design's mobile collapse. */
.cr-pgrid { grid-template-columns: repeat(var(--cr-pgrid-cols, 4), 1fr); }
@media (max-width: 980px) { .cr-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cr-pgrid { grid-template-columns: 1fr; } }

/* ===== cr_madeinbritain — native WPBakery markup bridge (dark band + testimonials) ===== */
/* decorative glow (was a markup div) -> pseudo-element; keep content above it */
.cr-home .cr-mib::before { content: ""; position: absolute; top: -140px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(247,148,30,.16), transparent 65%); pointer-events: none; z-index: 0; }
.cr-home .cr-mib > .col, .cr-home .cr-mib > .col > .vc_column-inner { position: relative; z-index: 1; }

/* two-column layout on the inner row (design grid lives on .row_col_wrap_12_inner) */
.cr-home .cr-mib .cr-mib__grid { display: block; }
.cr-home .cr-mib .cr-mib__grid > .row_col_wrap_12_inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; max-width: var(--cr-maxw); margin: 0 auto; padding: 0 var(--cr-gut); }
.cr-home .cr-mib .cr-mib__left, .cr-home .cr-mib .cr-mib__right { width: auto !important; padding: 0 !important; margin: 0 !important; }
/* the column itself must NOT be a grid — the old style.css .cr-mib__right{display:grid}
   lands on the WPBakery column and squeezes .vc_column-inner; grid belongs on .wpb_wrapper */
.cr-home .cr-mib .cr-mib__right { display: block !important; }
.cr-home .cr-mib .cr-mib__left > .vc_column-inner, .cr-home .cr-mib .cr-mib__right > .vc_column-inner { padding: 0 !important; width: 100% !important; }

/* left: white MIB badge box (image_with_animation wrap is the box) + heading + copy.
   Force the whole image chain to shrink-to-fit so the logo keeps its natural 3.94:1
   ratio (Salient otherwise constrains the img width and squishes "MADE IN BRITAIN"). */
.cr-home .cr-mib .cr-mib__left .img-with-aniamtion-wrap { display: inline-block !important; background: #fff; border-radius: 14px; padding: 21px 26px; margin: 0 0 26px; width: auto !important; max-width: none !important; line-height: 0; }
.cr-home .cr-mib .cr-mib__left .inner, .cr-home .cr-mib .cr-mib__left .hover-wrap, .cr-home .cr-mib .cr-mib__left .hover-wrap-inner { display: block !important; margin: 0 !important; width: 205px !important; max-width: none !important; overflow: visible !important; }
/* explicit 205x52 keeps the logo's true 500:127 ratio (Salient forces width on .img-with-animation) */
.cr-home .cr-mib .cr-mib__left img.cr-mib__badge { display: block !important; height: 52px !important; width: 205px !important; max-width: none !important; margin: 0; }
.cr-home .cr-mib .cr-mib__h { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 34px !important; color: #fff !important; line-height: 1.1 !important; margin: 0 0 16px !important; }
.cr-home .cr-mib .cr-mib__p, .cr-home .cr-mib .cr-mib__p p { font-size: 16px; color: var(--cr-on-dark); line-height: 1.6; max-width: 440px; margin: 0; }

/* right: 3 testimonials -> big quote left (spans 2 rows), two stacked right */
.cr-home .cr-mib .cr-mib__right > .vc_column-inner > .wpb_wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; grid-template-areas: "big s1" "big s2"; }
.cr-home .cr-mib .cr-q-big { grid-area: big; }
.cr-home .cr-mib .cr-q-s1 { grid-area: s1; }
.cr-home .cr-mib .cr-q-s2 { grid-area: s2; }

/* quote card (Text Block); paragraph roles by order (no structural markup) */
.cr-home .cr-mib .cr-quote.wpb_text_column { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px; margin: 0; }
.cr-home .cr-mib .cr-quote--lg.wpb_text_column { padding: 26px; }
.cr-home .cr-mib .cr-quote .wpb_wrapper > p { margin: 0; }
.cr-home .cr-mib .cr-quote .wpb_wrapper > p:first-of-type { font-size: 14px; color: #E4E6F0; line-height: 1.5; margin: 0 0 12px; }
.cr-home .cr-mib .cr-quote--lg .wpb_wrapper > p:first-of-type { font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; }
.cr-home .cr-mib .cr-quote .wpb_wrapper > p:last-of-type { font-weight: 800; font-size: 13.5px; color: var(--cr-muted-2); }
.cr-home .cr-mib .cr-quote--lg .wpb_wrapper > p:last-of-type { font-size: 14px; }
.cr-home .cr-mib .cr-quote .wpb_wrapper > p:last-of-type strong { color: #fff; font-weight: 800; }
.cr-home .cr-mib .cr-quote--lg.wpb_text_column::before { content: ""; display: block; width: 30px; height: 30px; margin: 0 0 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='%23F7941E'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v-2H6V9h4zm10 0h-4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v-2h-2V9h4z'/%3E%3C/svg%3E") no-repeat left center/contain; }

@media (max-width: 980px) {
  .cr-home .cr-mib .cr-mib__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; gap: 28px; }
  .cr-home .cr-mib .cr-mib__right > .vc_column-inner > .wpb_wrapper { grid-template-columns: 1fr; grid-template-areas: "big" "s1" "s2"; }
}

/* ===== cr_delivery — native WPBakery markup bridge (white band: copy + UK-map card) ===== */
.cr-home .cr-deliv > .col > .vc_column-inner { padding: 0 !important; }
.cr-home .cr-deliv .cr-deliv__grid { display: block; }
.cr-home .cr-deliv .cr-deliv__grid > .row_col_wrap_12_inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: var(--cr-maxw); margin: 0 auto; padding: 0 var(--cr-gut); }
.cr-home .cr-deliv .cr-deliv__col, .cr-home .cr-deliv .cr-deliv__mapcol { width: auto !important; padding: 0 !important; margin: 0 !important; }
.cr-home .cr-deliv .cr-deliv__col > .vc_column-inner, .cr-home .cr-deliv .cr-deliv__mapcol > .vc_column-inner { padding: 0 !important; }

/* eyebrow + heading + copy */
.cr-home .cr-deliv .cr-eyebrow { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-orange) !important; margin: 0 0 10px !important; line-height: 1.2; }
.cr-home .cr-deliv .cr-h2 { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 34px !important; letter-spacing: -.02em; color: var(--cr-ink) !important; line-height: 1.1; margin: 0 0 16px !important; }
.cr-home .cr-deliv .cr-deliv__p, .cr-home .cr-deliv .cr-deliv__p p { font-size: 16px; color: var(--cr-body); line-height: 1.6; margin: 0 0 26px; max-width: 520px; }

/* covered / excluded rows — each a Text Block; icon drawn via ::before (SVG asset file,
   so it survives WPBakery editor re-saves that would strip inline SVG from content) */
.cr-home .cr-deliv .cr-deliv__row { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--cr-ink); line-height: 1.5; margin: 0 0 12px; }
.cr-home .cr-deliv .cr-deliv__row--no { margin-bottom: 28px; }
.cr-home .cr-deliv .cr-deliv__row > p, .cr-home .cr-deliv .cr-deliv__row .wpb_wrapper { flex: 1; margin: 0; }
.cr-home .cr-deliv .cr-deliv__row strong { font-weight: 800; }
.cr-home .cr-deliv .cr-deliv__row::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.cr-home .cr-deliv .cr-deliv__row--ok::before { background-image: url(assets/img/icon-check.svg); }
.cr-home .cr-deliv .cr-deliv__row--no::before { background-image: url(assets/img/icon-cross.svg); }

/* button */
.cr-home .cr-deliv a.nectar-button.cr-deliv__btn { display: inline-flex; align-items: center; gap: 9px; background: var(--cr-ink) !important; color: #fff !important; font-weight: 800; font-size: 14.5px; line-height: 1; padding: 14px 24px !important; border-radius: 10px !important; margin: 0; border: 0 !important; box-shadow: none !important; min-width: 0; }
.cr-home .cr-deliv a.nectar-button.cr-deliv__btn:hover { background: var(--cr-blue) !important; color: #fff !important; }
.cr-home .cr-deliv a.nectar-button.cr-deliv__btn::before { display: none; }
.cr-home .cr-deliv a.nectar-button.cr-deliv__btn::after { content: ""; width: 17px; height: 17px; flex: none; background-color: #fff; -webkit-mask: var(--cr-arrow) center/contain no-repeat; mask: var(--cr-arrow) center/contain no-repeat; }

/* bespoke map card — the Text Block IS the card; the dot pattern + UK map are pseudo-elements
   (CSS + SVG asset, never in content), and .wpb_wrapper is the editable location pill. */
.cr-home .cr-deliv .cr-deliv__map { position: relative; border-radius: 18px; background: var(--cr-light); border: 1px solid var(--cr-line); padding: 36px; min-height: 340px; overflow: hidden; margin: 0; }
.cr-home .cr-deliv .cr-deliv__map::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#dfe3ec 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: .7; z-index: 0; }
.cr-home .cr-deliv .cr-deliv__map::after { content: ""; position: absolute; inset: 0; background-image: url(assets/img/uk-map.svg); background-repeat: no-repeat; background-position: center; background-size: auto 300px; filter: drop-shadow(0 14px 26px rgba(46,49,146,.18)); z-index: 1; }
.cr-home .cr-deliv .cr-deliv__map > p, .cr-home .cr-deliv .cr-deliv__map .wpb_wrapper { position: absolute; bottom: 24px; left: 24px; z-index: 2; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px -12px rgba(20,24,43,.3); padding: 12px 16px; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--cr-ink); margin: 0; line-height: 1.2; max-width: calc(100% - 48px); }
.cr-home .cr-deliv .cr-deliv__map > p::before, .cr-home .cr-deliv .cr-deliv__map .wpb_wrapper::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cr-orange); flex: none; }

@media (max-width: 980px) {
  .cr-home .cr-deliv .cr-deliv__grid > .row_col_wrap_12_inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================================
 * RESPONSIVE REFINEMENTS — balanced typography + consistent vertical rhythm.
 * The section headings use px !important above, which beats style.css's media
 * rules, so the mobile scale must also be !important here.
 * ============================================================================ */
@media (max-width: 980px) {
  /* consistent section padding (full-bleed bands + product sections) */
  .cr-home .cr-section { padding-top: 54px !important; padding-bottom: 54px !important; }
  .cr-home .cr-tabs, .cr-home .cr-also { padding-top: 54px !important; padding-bottom: 54px !important; }
  /* headings step down */
  .cr-home .cr-cats .cr-h2, .cr-home .cr-deliv .cr-h2,
  .cr-home .cr-tabs .cr-h2, .cr-home .cr-also .cr-h2 { font-size: 30px !important; line-height: 1.18 !important; }
  .cr-home .cr-mib .cr-mib__h { font-size: 30px !important; }
}
@media (max-width: 600px) {
  .cr-home .cr-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .cr-home .cr-tabs, .cr-home .cr-also { padding-top: 40px !important; padding-bottom: 40px !important; }
  /* hero */
  .cr-home .cr-hero__title, .cr-home h1.cr-hero__title { font-size: 30px !important; line-height: 1.2 !important; }
  .cr-home .cr-hero__text { font-size: 14.5px !important; margin-bottom: 24px !important; }
  /* section headings */
  .cr-home .cr-cats .cr-h2, .cr-home .cr-deliv .cr-h2,
  .cr-home .cr-tabs .cr-h2, .cr-home .cr-also .cr-h2,
  .cr-home .cr-mib .cr-mib__h { font-size: 25px !important; line-height: 1.22 !important; }
  .cr-home .cr-promo .cr-promo__h { font-size: 23px !important; line-height: 1.2; }
  .cr-home .cr-promo .cr-promo__h--dark { font-size: 22px !important; }
  .cr-home .cr-cta .cr-cta__h, .cr-home .cr-cta .cr-cta__h h2 { font-size: 24px !important; line-height: 1.22 !important; }
  /* eyebrows + section heads tighter */
  .cr-home .cr-eyebrow { font-size: 11.5px !important; letter-spacing: .09em; }
  .cr-home .cr-sec-head { margin-bottom: 22px !important; }
  /* body copy a touch smaller for balance */
  .cr-home .cr-mib .cr-mib__p, .cr-home .cr-mib .cr-mib__p p,
  .cr-home .cr-deliv .cr-deliv__p, .cr-home .cr-deliv .cr-deliv__p p { font-size: 15px; }
}

/* ============================================================================
 * ADD-TO-CART CONFIRMATION — CR Product Grid + Slider
 * On WooCommerce AJAX success the JS adds .cr-added; a green tick overlay slides
 * up over the button, then reverts. Uses ::before so it never collides with WC's
 * loading spinner (::after). Not .cr-home-scoped — works wherever the elements run.
 * ============================================================================ */
.cr-btn-add, .cr-scard__add { position: relative; overflow: hidden; }
.cr-btn-add::before, .cr-scard__add::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #1F8A5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  opacity: 0; visibility: hidden; transform: translateY(100%);
  transition: opacity .26s ease, transform .26s ease, visibility .26s ease;
}
.cr-btn-add.cr-added::before, .cr-scard__add.cr-added::before { opacity: 1; visibility: visible; transform: translateY(0); }
.cr-btn-add.cr-added, .cr-scard__add.cr-added { color: transparent; }   /* hide the underlying icon/label while confirmed */
/* we show our own confirmation, so suppress WooCommerce's auto "View cart" link */
.cr-pcard .added_to_cart, .cr-scard .added_to_cart { display: none !important; }

/* =========================================================================
   ROBUSTNESS HARDENING — content de-fragilised. Class-based inner div/span
   HTML inside Text Blocks (which a WPBakery Visual-tab save strips) was
   replaced with plain-text paragraphs, styled HERE BY POSITION so they
   survive any edit / duplication.
   ========================================================================= */
/* Trust-bar items: "Title" + "Subtitle" as two paragraphs */
.cr-home .cr-trust .cr-trust__txt p { margin: 0; }
.cr-home .cr-trust .cr-trust__txt p:first-of-type { font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--cr-ink); }
.cr-home .cr-trust .cr-trust__txt p:last-of-type  { font-size: 12.5px; line-height: 1.25; color: var(--cr-muted); font-weight: 500; }
/* Category card lists: one paragraph per item, keeping the hairline divider */
.cr-home .cr-cats .cr-cat__list p { display: block; margin: 0; font-size: 13.5px; color: var(--cr-text-dark, #2A2140); padding: 7px 0; border-top: 1px solid var(--cr-line-2); }

/* Out-of-stock badge — product cards now show "View product" instead of a failing Add */
.cr-pcard__oos { position: absolute; top: 14px; right: 14px; z-index: 2; background: #16182B; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 5px 10px; border-radius: 99px; text-transform: uppercase; }

/* ============================================================================
 * CATEGORY / SHOP ARCHIVE — native WooCommerce archive (taxonomy-product_cat.php)
 * styled to the approved design, REUSING the homepage tokens (--cr-*) for full
 * visual consistency. Layout only; the cards are the shared .cr-pcard.
 * ============================================================================ */
/* NOTE: the archive uses a UNIQUE .cr-arch* namespace (NOT .cr-cat*, which is the
 * homepage "Top Categories" CARD component in style.css). Sharing names made the
 * homepage card's flex/overflow/border bleed onto this page; the distinct prefix
 * removes every collision so neither layout depends on stylesheet load order. */
.cr-arch { background: #fff; }
.cr-arch__in { max-width: var(--cr-maxw); margin: 0 auto; padding-left: var(--cr-gut); padding-right: var(--cr-gut); }

/* header band */
.cr-arch__head { background: var(--cr-light); border-bottom: 1px solid var(--cr-line); }
.cr-arch__head .cr-arch__in { padding-top: 22px; padding-bottom: 30px; }
.cr-arch__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--cr-muted); font-weight: 600; margin-bottom: 16px; }
.cr-arch__crumb a { color: var(--cr-muted); }
.cr-arch__crumb a:hover { color: var(--cr-orange); }
.cr-arch__crumb > :last-child, .cr-arch__crumb .breadcrumb_last { color: var(--cr-ink); }
.cr-arch__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cr-arch__head-text { max-width: 680px; }
.cr-arch__title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 38px; letter-spacing: -.02em; color: var(--cr-ink); margin: 0 0 10px; line-height: 1.1; }
.cr-arch__desc, .cr-arch__desc p { font-size: 15.5px; line-height: 1.6; color: var(--cr-body); margin: 0; }
.cr-arch__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-arch__badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--cr-line); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #3A3F52; }

/* picture sub-category tabs */
.cr-arch__subs { background: #fff; border-bottom: 1px solid var(--cr-line); }
.cr-arch__subs-row { display: flex; gap: 14px; overflow-x: auto; padding-top: 20px; padding-bottom: 20px; }
.cr-arch__sub { flex: none; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px; border: 1.5px solid var(--cr-line); border-radius: 14px; background: #fff; transition: border-color var(--cr-ease); }
.cr-arch__sub:hover { border-color: var(--cr-orange); }
.cr-arch__sub-ic { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; }
.cr-arch__sub-ic img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.cr-arch__sub-name { font-size: 13px; font-weight: 700; color: var(--cr-ink); text-align: center; line-height: 1.25; }

/* main: filter sidebar + results */
.cr-arch__grid { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: 34px; align-items: start; padding-top: 30px; padding-bottom: 64px; }
/* sidebar is static (not sticky): with 10 filter cards + the accordion it is taller
   than the paginated results column, so sticky has no room to engage — static is
   consistent across pages and needs no body{overflow} override against Salient. */
.cr-arch__filters-body { display: flex; flex-direction: column; gap: 18px; }
.cr-arch__filters-toggle { display: none; }  /* desktop: no toggle, sidebar always shown */
.cr-arch__results { min-width: 0; }
.cr-arch__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cr-arch .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--cr-body); font-weight: 600; }
.cr-arch .woocommerce-ordering { margin: 0; }
.cr-arch .woocommerce-ordering select { border: 1.5px solid var(--cr-line-3); border-radius: 9px; padding: 9px 12px; font-size: 13.5px; font-weight: 700; color: var(--cr-ink); font-family: 'Manrope', sans-serif; cursor: pointer; background: #fff; }

/* product grid — 3 columns of the shared .cr-pcard (override Salient's float/columns) */
/* Product grid: Salient renders the native 3-column layout (loop_shop_columns=3,
   set in functions.php) as a CSS grid for even rows/gaps; we only normalise spacing
   and make the shared .cr-pcard fill each cell. */
/* CSS grid = exactly 3 even columns that fill the results column. Salient's columns-3
   sizes via flex-basis (ignored under display:grid), so no width conflict here. */
.cr-arch .cr-arch__results ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 22px; margin: 0; padding: 0; list-style: none; }
.cr-arch .cr-arch__results ul.products::before, .cr-arch .cr-arch__results ul.products::after { content: none !important; display: none !important; }
body.cr-site .cr-arch .cr-arch__results ul.products li.product.cr-loop-card { display: block !important; justify-self: stretch !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.cr-arch .cr-arch__results ul.products li.product.cr-loop-card .cr-pcard { width: 100%; height: 100%; }
.cr-arch__none { padding: 40px 0; color: var(--cr-body); }

/* pagination */
.cr-arch .woocommerce-pagination { margin-top: 40px; text-align: center; border: 0; }
.cr-arch .woocommerce-pagination ul { display: inline-flex; gap: 8px; border: 0; margin: 0; padding: 0; }
.cr-arch .woocommerce-pagination ul li { border: 0; margin: 0; }
.cr-arch .woocommerce-pagination ul li a, .cr-arch .woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--cr-line-3); font-weight: 800; font-size: 14px; color: var(--cr-ink); background: #fff; float: none; }
.cr-arch .woocommerce-pagination ul li span.current { background: var(--cr-ink); color: #fff; border-color: var(--cr-ink); }
.cr-arch .woocommerce-pagination ul li a:hover { border-color: var(--cr-orange); }

/* filter cards (Active filters, Price, attribute filters) */
.cr-arch__filters .widget { border: 1px solid var(--cr-line); border-radius: 16px; padding: 16px 18px; margin: 0; }
.cr-arch__filters .widget-title, .cr-arch__filters .widgettitle, .cr-arch__filters .widget > h2, .cr-arch__filters .widget > h3, .cr-arch__filters .widget > h4 { font-weight: 800; font-size: 13.5px; color: var(--cr-ink); margin: 0 0 6px; font-family: 'Manrope', sans-serif; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.cr-arch__filters .widget ul { list-style: none; margin: 0; padding: 0; }
.cr-arch__filters li, .cr-arch__cats li { list-style: none !important; }  /* Salient sets list-style:disc on <li> — kill it sidebar-wide */
.cr-arch__filters .widget li a { color: #3A3F52; }
.cr-arch__filters .widget li a:hover { color: var(--cr-orange); }
.cr-arch__filters .widget .count { font-size: 11px; color: var(--cr-muted-2); font-weight: 700; }
.cr-arch__filters .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--cr-orange); }
.cr-arch__filters .price_slider_wrapper .ui-slider .ui-slider-handle { background: var(--cr-ink); border-color: var(--cr-ink); }
.cr-arch__filters .button { background: var(--cr-ink); color: #fff; border-radius: 9px; padding: 8px 14px; font-weight: 700; }
.cr-arch__filters-empty { font-size: 13px; color: var(--cr-muted); border: 1px dashed var(--cr-line-3); border-radius: 12px; padding: 16px; line-height: 1.5; }

/* checkbox filter rows — modern rows with hover highlight + count pills, matching the
   category accordion. !important on the checkbox + count beats Salient's own
   WooCommerce ::before / baseline rules. Flex layout (count as a real flex item, NOT
   absolute) means a long label and its value can never overlap. */
.cr-arch__filters ul.woocommerce-widget-layered-nav-list { display: flex !important; flex-direction: column; gap: 1px; margin: 4px -8px 0 !important; padding: 0 !important; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 3px 8px !important; border: 0 !important; border-radius: 9px; font-size: 13.5px; transition: background .15s ease; list-style: none !important; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li:hover { background: var(--cr-light); }
.cr-arch__filters .woocommerce-widget-layered-nav-list li a { flex: 1 1 auto; display: inline-flex !important; align-items: center; gap: 12px; min-width: 0; padding: 5px 0 !important; color: #3A3F52; line-height: 1.35 !important; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li:hover a { color: var(--cr-orange); }
.cr-arch__filters .woocommerce-widget-layered-nav-list li a::before { content: "" !important; position: static !important; left: auto !important; top: auto !important; width: 19px !important; height: 19px !important; flex: 0 0 19px !important; box-sizing: border-box !important; border: 1.7px solid var(--cr-line-3) !important; border-radius: 6px !important; background: #fff !important; transition: border-color .15s ease, background .15s ease; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li:hover a::before { border-color: var(--cr-orange) !important; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li.chosen a { color: var(--cr-ink); font-weight: 700; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li.chosen a::before { background: var(--cr-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat !important; border-color: var(--cr-orange) !important; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li .count { position: static !important; flex: 0 0 auto; margin-left: auto !important; font-size: 11px !important; font-weight: 700; color: var(--cr-muted-2); background: var(--cr-light); border-radius: 99px; padding: 2px 8px; min-width: 22px; text-align: center; line-height: 1.55 !important; }
.cr-arch__filters .woocommerce-widget-layered-nav-list li:hover .count { background: #fff; }
/* active-filters chips */
.cr-arch__filters .widget_layered_nav_filters ul { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-arch__filters .widget_layered_nav_filters li { padding: 0; }
.cr-arch__filters .widget_layered_nav_filters li a { display: inline-flex; align-items: center; gap: 7px; background: var(--cr-light); border-radius: 7px; padding: 6px 11px; font-size: 13px; font-weight: 700; color: var(--cr-ink); }
.cr-arch__filters .widget_layered_nav_filters li a:hover { background: #FDEAE0; color: var(--cr-orange); }

/* bulk-quote CTA (custom_html widget) — navy gradient promo box */
.cr-arch__filters .widget_custom_html { border: 0; padding: 0; }
.cr-arch__filters .widget_custom_html .widget-title, .cr-arch__filters .widget_custom_html .widgettitle { display: none; }
.cr-arch__quote { background: linear-gradient(120deg, #2E3192, #1B1D3A); border-radius: 14px; padding: 22px 20px; }
.cr-arch__quote-h { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px; margin: 0 0 8px; color: #fff; }
.cr-arch__quote-p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.82); margin: 0 0 16px; }
.cr-arch__quote-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--cr-orange); color: #fff; font-weight: 800; font-size: 13.5px; padding: 11px 18px; border-radius: 9px; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.cr-arch__quote-btn:hover { background: #fff; color: var(--cr-ink); transform: translateY(-1px); }

/* sidebar "Filters / Clear all" header */
.cr-arch__filters-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.cr-arch__filters-head h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 19px; color: var(--cr-ink); margin: 0; }
.cr-arch__filters-clear { font-size: 13px; font-weight: 700; color: var(--cr-muted); text-decoration: none; }
.cr-arch__filters-clear:hover { color: var(--cr-orange); }

/* ---- modern category accordion (cr_render_category_nav) ----------------- */
.cr-arch__cats { border: 1px solid var(--cr-line); border-radius: 16px; padding: 10px; background: #fff; }
.cr-catnav__head { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--cr-muted); padding: 6px 8px 8px; }
.cr-catnav__list, .cr-catnav__sub { margin: 0; padding: 0; }
/* kill the disc markers Salient sets directly on <li> (overflow left of the card) */
.cr-catnav__list, .cr-catnav__sub, .cr-catnav__list li, .cr-catnav__sub li { list-style: none !important; }
.cr-catnav__list > li, .cr-catnav__sub > li { display: block; }
.cr-catnav__row { display: flex; align-items: center; gap: 2px; border-radius: 11px; transition: background .15s ease; }
.cr-catnav__row:hover { background: var(--cr-light); }
.cr-catnav__item.is-current > .cr-catnav__row { background: #FFF3E9; }
.cr-catnav__link { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 6px 8px 8px; color: var(--cr-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.cr-catnav__ic { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--cr-light); color: var(--cr-blue); transition: background .15s ease, color .15s ease; }
.cr-catnav__row:hover .cr-catnav__ic,
.cr-catnav__item.is-current > .cr-catnav__row .cr-catnav__ic { background: var(--cr-orange); color: #fff; }
.cr-catnav__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-catnav__item.is-current > .cr-catnav__row .cr-catnav__link { color: var(--cr-orange); }
.cr-catnav__count { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--cr-muted-2); background: var(--cr-light); border-radius: 99px; padding: 2px 8px; min-width: 22px; text-align: center; }
.cr-catnav__toggle { flex: 0 0 auto; width: 32px; height: 32px; margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--cr-muted); cursor: pointer; border-radius: 8px; padding: 0; -webkit-appearance: none; }
.cr-catnav__toggle:hover { background: #fff; color: var(--cr-orange); }
.cr-catnav__toggle svg { transition: transform .25s ease; }
.cr-catnav__item.is-open > .cr-catnav__row .cr-catnav__toggle svg { transform: rotate(180deg); }
/* smooth expand/collapse via animatable grid-rows — no JS height measuring.
   visibility:hidden when collapsed makes the hidden sub-links programmatically inert
   (out of the keyboard tab order); it flips INSTANTLY (not in the transition list) so
   links never linger focusable after closing, while the height still animates. */
.cr-catnav__sub-wrap { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s ease; }
.cr-catnav__item.is-open > .cr-catnav__sub-wrap { grid-template-rows: 1fr; visibility: visible; }
.cr-catnav__sub { overflow: hidden; padding-left: 30px; }
.cr-catnav__subitem a { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; color: #565B72; font-size: 13px; text-decoration: none; border-radius: 9px; transition: background .15s ease, color .15s ease; }
.cr-catnav__subitem .cr-catnav__name { white-space: normal; overflow: visible; }  /* let full sub-category names show (no ellipsis) */
.cr-catnav__subitem a:hover { background: var(--cr-light); color: var(--cr-orange); }
.cr-catnav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-line-3); flex: 0 0 auto; transition: background .15s ease; }
.cr-catnav__subitem a:hover .cr-catnav__dot,
.cr-catnav__subitem.is-current .cr-catnav__dot { background: var(--cr-orange); }
.cr-catnav__subitem.is-current a { color: var(--cr-orange); font-weight: 700; }
.cr-catnav__subitem .cr-catnav__count { margin-left: auto; }

/* Price filter: auto-applies on slider release, so hide the manual "Filter" button. */
.cr-arch__filters .price_slider_amount .button { display: none !important; }
.cr-arch__filters .price_slider_amount { display: block; }
.cr-arch__filters .price_slider_amount .price_label { font-size: 13px; color: var(--cr-body); font-weight: 600; }
.cr-arch__filters .price_slider_wrapper { margin-top: 6px; }

/* responsive collapse — MUST match the base rule's selector + !important to win
   over the locked 3-up grid above (which is !important at 3-class specificity). */
@media (max-width: 980px) {
  .cr-arch__grid { grid-template-columns: 1fr; }
  .cr-arch .cr-arch__results ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .cr-arch__title { font-size: 30px; }

  /* mobile: collapse the whole sidebar behind a "Filters & categories" button */
  .cr-arch__filters-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 18px; border: 1px solid var(--cr-line-3); border-radius: 12px; background: #fff; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; color: var(--cr-ink); cursor: pointer; }
  .cr-arch__filters-toggle-l { display: inline-flex; align-items: center; gap: 9px; }
  .cr-arch__filters-toggle-l svg { color: var(--cr-orange); }
  .cr-arch__filters-toggle-chev { transition: transform .25s ease; color: var(--cr-muted); }
  .cr-arch__filters.is-open .cr-arch__filters-toggle-chev { transform: rotate(180deg); }
  .cr-arch__filters-body { display: none; margin-top: 16px; }
  .cr-arch__filters.is-open .cr-arch__filters-body { display: flex; }
}
@media (max-width: 600px) {
  .cr-arch .cr-arch__results ul.products { grid-template-columns: 1fr !important; }
}