/* 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; }
/* "← All categories" link shown on a subcategory page (sidebar scoped to the branch) */
.cr-catnav__back { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 6px; padding: 5px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--cr-blue); text-decoration: none; background: var(--cr-light); transition: background .15s ease, color .15s ease; }
.cr-catnav__back:hover { background: #FFF3E9; color: var(--cr-orange); }
.cr-catnav__back svg { flex: 0 0 auto; }
.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; }
}

/* ============================================================================
 * SINGLE PRODUCT PAGE  (woocommerce/single-product.php → cr_render_single_product)
 * Native WooCommerce data arranged into the approved Product.dc.html design,
 * reusing the homepage --cr-* tokens. Unique .cr-pdp* namespace; .cr-also slider
 * + .cr-scard cards are the shared globals reused for "You may also like".
 * ============================================================================ */
.cr-pdp { background: #fff; }
.cr-pdp__in { max-width: var(--cr-maxw); margin: 0 auto; padding-left: var(--cr-gut); padding-right: var(--cr-gut); }
.cr-pdp .cr-i18 { width: 18px; height: 18px; }

/* ---- breadcrumb band ---- */
.cr-pdp__crumbwrap { background: var(--cr-light); border-bottom: 1px solid var(--cr-line); }
.cr-pdp__crumbwrap .cr-pdp__in { padding-top: 14px; padding-bottom: 14px; }
.cr-pdp__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--cr-muted); font-weight: 600; }
.cr-pdp__crumb a { color: var(--cr-muted); }
.cr-pdp__crumb a:hover { color: var(--cr-orange); }
.cr-pdp__crumb .cr-pdp__crumb-sep { color: var(--cr-line-3); }
.cr-pdp__crumb > *:last-child { color: var(--cr-ink); }

/* ---- notices bar ---- */
.cr-pdp__noticebar.is-empty { display: none; }
.cr-pdp__noticebar .cr-pdp__in { padding-top: 18px; }
.cr-pdp__noticebar .woocommerce-message,
.cr-pdp__noticebar .woocommerce-info,
.cr-pdp__noticebar .woocommerce-error { border-top-color: var(--cr-orange); }

/* ---- main: gallery + summary ---- */
.cr-pdp__main { padding: 34px 0 50px; }
.cr-pdp__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }

/* gallery (custom thumb-swap; degrades to a single image) */
.cr-pdp__gallery { display: flex; gap: 18px; }
.cr-pdp__thumbs { display: flex; flex-direction: column; gap: 12px; flex: none; }
.cr-pdp__thumb { width: 78px; height: 78px; border-radius: 11px; background: #fff; border: 1.5px solid var(--cr-line); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 9px; transition: border-color var(--cr-ease); }
.cr-pdp__thumb:hover { border-color: var(--cr-line-3); }
.cr-pdp__thumb.is-active { border: 2px solid var(--cr-orange); }
.cr-pdp__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; }
.cr-pdp__stage { flex: 1; position: relative; background: var(--cr-light); border: 1px solid var(--cr-line); border-radius: 18px; min-height: 520px; display: flex; align-items: center; justify-content: center; padding: 40px; }
.cr-pdp__stage .cr-pdp__main-img { max-width: 100%; max-height: 440px; width: auto; height: auto; object-fit: contain; margin: 0; cursor: zoom-in; transition: opacity .25s ease; filter: drop-shadow(0 24px 34px rgba(20, 24, 43, .18)); }
.cr-pdp__stage .cr-pdp__main-img.is-fading { opacity: 0; }
.cr-pdp__badge { position: absolute; top: 18px; left: 18px; background: #FFF3E3; color: var(--cr-orange-dk); font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 6px 12px; border-radius: 99px; text-transform: uppercase; z-index: 2; }
/* zoom affordance (top-right of the stage) */
.cr-pdp__zoom { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--cr-ink); display: flex; align-items: center; justify-content: center; cursor: zoom-in; box-shadow: 0 6px 16px -8px rgba(20,24,43,.4); opacity: 0; transition: opacity var(--cr-ease), background var(--cr-ease); }
.cr-pdp__stage:hover .cr-pdp__zoom { opacity: 1; }
.cr-pdp__zoom:hover { background: #fff; color: var(--cr-orange); }
/* prev/next on the stage (multi-image) */
.cr-pdp__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--cr-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(20,24,43,.45); opacity: 0; transition: opacity var(--cr-ease), background var(--cr-ease); }
.cr-pdp__nav--prev { left: 14px; } .cr-pdp__nav--next { right: 14px; }
.cr-pdp__stage:hover .cr-pdp__nav { opacity: 1; }
.cr-pdp__nav:hover { background: #fff; color: var(--cr-orange); }
@media (hover: none) { .cr-pdp__zoom, .cr-pdp__nav { opacity: 1; } }   /* always visible on touch devices */
/* reveal on keyboard focus too (otherwise focus lands on an invisible control) */
.cr-pdp__stage:focus-within .cr-pdp__zoom, .cr-pdp__stage:focus-within .cr-pdp__nav,
.cr-pdp__zoom:focus-visible, .cr-pdp__nav:focus-visible { opacity: 1; }

/* ---- lightbox (modern image viewer) ---- */
.cr-pdp-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(12, 13, 26, .92); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; }
.cr-pdp-lb.is-open { opacity: 1; visibility: visible; }
.cr-pdp-lb__fig { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.cr-pdp-lb__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); transform: scale(.98); transition: transform .28s ease; }
.cr-pdp-lb.is-open .cr-pdp-lb__img { transform: scale(1); }
.cr-pdp-lb__close { position: absolute; top: 18px; right: 20px; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--cr-ease); }
.cr-pdp-lb__close:hover { background: rgba(255,255,255,.25); }
.cr-pdp-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--cr-ease); }
.cr-pdp-lb__prev { left: 18px; } .cr-pdp-lb__next { right: 18px; }
.cr-pdp-lb__nav:hover { background: rgba(255,255,255,.25); }
.cr-pdp-lb__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.1); padding: 6px 14px; border-radius: 99px; }
.cr-pdp-lb--single .cr-pdp-lb__nav, .cr-pdp-lb--single .cr-pdp-lb__count { display: none; }
@media (max-width: 600px) { .cr-pdp-lb__nav { width: 42px; height: 42px; font-size: 24px; } .cr-pdp-lb__prev { left: 8px; } .cr-pdp-lb__next { right: 8px; } }

/* summary */
.cr-pdp__summary { min-width: 0; }
.cr-pdp__eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cr-pdp__eyebrow { font-size: 12px; color: var(--cr-muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cr-pdp__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; }
.cr-pdp__stock .cr-pdp__dot { width: 7px; height: 7px; border-radius: 50%; }
.cr-pdp__stock.is-in { background: #EAF6EF; color: var(--cr-green); }
.cr-pdp__stock.is-in .cr-pdp__dot { background: var(--cr-green); }
.cr-pdp__stock.is-out { background: #FBECEC; color: var(--cr-red); }
.cr-pdp__stock.is-out .cr-pdp__dot { background: var(--cr-red); }
.cr-pdp__title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 33px; line-height: 1.1; letter-spacing: -.01em; color: var(--cr-ink); margin: 0 0 12px; }
.cr-pdp__metarow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--cr-body); font-weight: 600; }
.cr-pdp__metarow .cr-pdp__sku strong { color: var(--cr-ink); }
.cr-pdp__metasep { color: var(--cr-line); }
.cr-pdp__stars .star-rating { color: var(--cr-orange); font-size: 15px; margin: 0; }
.cr-pdp__short { font-size: 15px; line-height: 1.6; color: var(--cr-body); margin-bottom: 22px; }
.cr-pdp__short p { margin: 0 0 8px; }
.cr-pdp__short p:last-child { margin-bottom: 0; }

/* price */
.cr-pdp__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.cr-pdp__price-from { font-size: 14px; color: var(--cr-muted-2); font-weight: 700; align-self: center; }
.cr-pdp__price-now { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 38px; color: var(--cr-ink); line-height: 1; }
.cr-pdp__price-ex { font-size: 14px; color: var(--cr-muted-2); font-weight: 600; }
.cr-pdp__price-incl { font-size: 14px; color: var(--cr-body); font-weight: 600; }

/* add to basket (native WooCommerce form, restyled) */
.cr-pdp__buy { margin-bottom: 18px; }
.cr-pdp__buy form.cart { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin: 0; }
.cr-pdp__buy .quantity { display: flex; align-items: center; border: 1.5px solid var(--cr-line-3); border-radius: 11px; overflow: hidden; height: 54px; background: #fff; }
.cr-pdp__buy .quantity label { display: none; }
.cr-pdp__buy .quantity input.qty { width: 54px; height: 100%; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--cr-ink); border: none; background: #fff; padding: 0; margin: 0; -moz-appearance: textfield; box-shadow: none; }
.cr-pdp__buy .quantity input.qty::-webkit-outer-spin-button,
.cr-pdp__buy .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-pdp__qbtn { width: 46px; height: 100%; background: #fff; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--cr-ink); display: flex; align-items: center; justify-content: center; padding: 0; transition: background var(--cr-ease); font-family: inherit; }
.cr-pdp__qbtn:hover { background: var(--cr-light); }
/* hide any qty +/- the theme might inject (we provide our own) */
.cr-pdp__buy .quantity button:not(.cr-pdp__qbtn),
.cr-pdp__buy .quantity .plus, .cr-pdp__buy .quantity .minus { display: none !important; }

.cr-pdp .cr-pdp__buy .single_add_to_cart_button {
  flex: 1 1 0 !important; width: auto !important; min-width: 200px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--cr-orange) !important; color: #fff !important;
  font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; font-size: 16px !important;
  border: none !important; border-radius: 11px !important; box-shadow: none !important;
  padding: 0 22px !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
  transition: background var(--cr-ease) !important; cursor: pointer; line-height: 1.1; white-space: nowrap;
}
.cr-pdp .cr-pdp__buy .single_add_to_cart_button:hover,
.cr-pdp .cr-pdp__buy .single_add_to_cart_button:focus { background: var(--cr-orange-dk) !important; color: #fff !important; transform: none !important; opacity: 1 !important; }
.cr-pdp .cr-pdp__buy .single_add_to_cart_button::before {
  content: ""; width: 19px; height: 19px; flex: none; display: inline-block; background-color: currentColor;
  -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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M2 3h2.5l1.7 11.2a2 2 0 0 0 2 1.7h7.7a2 2 0 0 0 2-1.6L21 7H6'/></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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M2 3h2.5l1.7 11.2a2 2 0 0 0 2 1.7h7.7a2 2 0 0 0 2-1.6L21 7H6'/></svg>") center / contain no-repeat;
}
.cr-pdp__lt { font-weight: 800; }
/* !important on box props guards against Salient's .container-wrap button[type=submit]
   { padding:16px!important; border-radius:0!important } which otherwise squares the corners. */
.cr-pdp .cr-pdp__buynow {
  flex: none; height: 54px !important; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cr-ink) !important; color: #fff !important; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px;
  border: none !important; border-radius: 11px !important; padding: 0 26px !important; cursor: pointer; transition: background var(--cr-ease) !important;
}
.cr-pdp .cr-pdp__buynow:hover, .cr-pdp .cr-pdp__buynow:focus { background: var(--cr-blue) !important; color: #fff !important; transform: none !important; opacity: 1 !important; }
/* out-of-stock / POA fallback */
.cr-pdp__notice { font-size: 14.5px; color: var(--cr-body); margin: 0 0 12px; font-weight: 600; }
.cr-pdp__notice--oos { color: var(--cr-red); }
.cr-pdp .cr-pdp__enquire { display: inline-flex; align-items: center; height: 52px !important; padding: 0 24px !important; background: var(--cr-ink) !important; color: #fff !important; font-weight: 800; font-size: 15px; border-radius: 11px !important; transition: background var(--cr-ease); }
.cr-pdp .cr-pdp__enquire:hover { background: var(--cr-orange) !important; color: #fff !important; }

/* ---- variable products: native variations form, restyled to the design ---- */
.cr-pdp__buy form.variations_form { display: block; }
.cr-pdp__buy .variations { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.cr-pdp__buy .variations tbody, .cr-pdp__buy .variations tr { display: block; }
.cr-pdp__buy .variations tr { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; }
.cr-pdp__buy .variations th.label { width: 92px; flex: none; padding: 0; text-align: left; font-weight: 800; font-size: 13.5px; color: var(--cr-ink); }
.cr-pdp__buy .variations th.label label { margin: 0; font-weight: 800; }
.cr-pdp__buy .variations td.value { flex: 1 1 auto; min-width: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
.cr-pdp__buy .variations select {
  flex: 1 1 auto; min-width: 0; height: 48px; margin: 0;
  border: 1.5px solid var(--cr-line-3); border-radius: 10px; padding: 0 38px 0 14px;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--cr-ink);
  background: #fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8FA0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;
  cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.cr-pdp__buy .variations select:focus { border-color: var(--cr-orange); }
.cr-pdp__buy .variations select:focus-visible { outline: 2px solid var(--cr-blue); outline-offset: 2px; border-color: var(--cr-orange); }
.cr-pdp__buy .variations select:focus:not(:focus-visible) { outline: none; }
.cr-pdp__buy .reset_variations { font-size: 12.5px; font-weight: 700; color: var(--cr-muted); white-space: nowrap; }
.cr-pdp__buy .reset_variations:hover { color: var(--cr-orange); }
.cr-pdp__buy .single_variation_wrap { display: block; }
.cr-pdp__buy .woocommerce-variation { margin: 0 0 12px; }
.cr-pdp__buy .woocommerce-variation-description p { margin: 0 0 8px; font-size: 14px; color: var(--cr-body); }
/* the headline price (.cr-pdp__price) is piped from the selected variation, so hide the native one */
.cr-pdp__buy .woocommerce-variation-price { display: none; }
.cr-pdp__buy .woocommerce-variation-availability { font-size: 13px; font-weight: 700; color: var(--cr-green); margin: 0 0 4px; }
.cr-pdp__buy .woocommerce-variation-availability.out-of-stock { color: var(--cr-red); }
.cr-pdp__buy .woocommerce-variation-add-to-cart { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.cr-pdp__buy .single_add_to_cart_button.disabled,
.cr-pdp__buy .single_add_to_cart_button.wc-variation-selection-needed { opacity: .45 !important; cursor: not-allowed; }

/* fulfilment cards */
.cr-pdp__fulfil { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.cr-pdp__fcard { display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--cr-line); border-radius: 12px; padding: 14px 16px; }
.cr-pdp__ficon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.cr-pdp__ficon--green { background: #EAF6EF; color: var(--cr-green); }
.cr-pdp__ficon--blue { background: var(--cr-blue-tint); color: var(--cr-blue); }
.cr-pdp__ftxt { line-height: 1.35; }
.cr-pdp__ft { font-weight: 800; font-size: 13.5px; color: var(--cr-ink); }
.cr-pdp__fs { font-size: 12.5px; color: var(--cr-muted); }

/* shipping note */
.cr-pdp__shipnote { display: flex; align-items: flex-start; gap: 10px; background: var(--cr-coupon-bg); border: 1px solid var(--cr-coupon-bd); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: #7A4A12; line-height: 1.5; }
.cr-pdp__shipnote svg { flex: none; margin-top: 1px; }

/* ---- tabs band ---- */
.cr-pdp__tabs-sec { background: var(--cr-light); border-top: 1px solid var(--cr-line); padding: 48px 0; }
.cr-pdp__tabnav { display: flex; gap: 6px; background: #fff; border: 1px solid var(--cr-line); padding: 6px; border-radius: 12px; width: max-content; max-width: 100%; margin-bottom: 24px; flex-wrap: wrap; }
.cr-pdp__tabbtn { border: none; cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; padding: 10px 18px; border-radius: 8px; background: transparent; color: var(--cr-body); transition: background var(--cr-ease), color var(--cr-ease); }
.cr-pdp__tabbtn:hover { color: var(--cr-ink); }
.cr-pdp__tabbtn.is-active { background: var(--cr-ink); color: #fff; }
.cr-pdp__tabbox { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 34px; }
.cr-pdp__panel { display: none; }
.cr-pdp__panel.is-active { display: block; }
/* visible keyboard focus for the interactive PDP controls (panels are tabindex=0) */
.cr-pdp__tabbtn:focus-visible, .cr-pdp__panel:focus-visible,
.cr-pdp__thumb:focus-visible, .cr-pdp__qbtn:focus-visible,
.cr-pdp__zoom:focus-visible, .cr-pdp__nav:focus-visible { outline: 2px solid var(--cr-blue); outline-offset: 2px; }
/* respect reduced-motion: drop the gallery crossfade/zoom transitions */
@media (prefers-reduced-motion: reduce) {
  .cr-pdp__stage .cr-pdp__main-img, .cr-pdp-lb, .cr-pdp-lb__img { transition: none !important; }
}
.cr-pdp__panel:focus:not(:focus-visible) { outline: none; }

/* description panel */
.cr-pdp__desc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.cr-pdp__desc-main { font-size: 15px; line-height: 1.7; color: var(--cr-body); }
.cr-pdp__desc-main > :first-child { margin-top: 0; }
.cr-pdp__desc-main h1, .cr-pdp__desc-main h2, .cr-pdp__desc-main h3, .cr-pdp__desc-main h4 { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--cr-ink); line-height: 1.2; margin: 22px 0 12px; }
.cr-pdp__desc-main h2 { font-size: 22px; } .cr-pdp__desc-main h3 { font-size: 19px; } .cr-pdp__desc-main h4 { font-size: 16px; }
.cr-pdp__desc-main p { margin: 0 0 14px; }
.cr-pdp__desc-main ul, .cr-pdp__desc-main ol { margin: 0 0 14px; padding-left: 20px; }
.cr-pdp__desc-main li { margin: 0 0 7px; }
.cr-pdp__desc-main a { color: var(--cr-blue); font-weight: 600; }
.cr-pdp__desc-main a:hover { color: var(--cr-orange); }
.cr-pdp__glance { background: var(--cr-light); border: 1px solid var(--cr-line); border-radius: 14px; padding: 22px; }
.cr-pdp__glance-h { font-weight: 800; font-size: 14px; color: var(--cr-ink); margin-bottom: 8px; }
.cr-pdp__glance-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--cr-line); font-size: 13.5px; }
.cr-pdp__glance-row:last-child { border-bottom: none; }
.cr-pdp__glance-row span { color: var(--cr-muted); }
.cr-pdp__glance-row strong { color: var(--cr-ink); font-weight: 700; text-align: right; }

/* specifications panel */
.cr-pdp__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.cr-pdp__spec-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cr-line); font-size: 14px; }
.cr-pdp__spec-row span { color: var(--cr-muted); }
.cr-pdp__spec-row strong { color: var(--cr-ink); font-weight: 700; text-align: right; }

/* delivery panel */
.cr-pdp__ship { max-width: 760px; }
.cr-pdp__ship-h { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: var(--cr-ink); margin: 0 0 14px; }
.cr-pdp__ship-b { font-size: 15px; line-height: 1.7; color: var(--cr-body); margin: 0 0 18px; }
.cr-pdp__ship-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-pdp__ship-card { border-radius: 12px; padding: 18px; }
.cr-pdp__ship-card.is-yes { border: 1px solid #EAF6EF; background: #F6FBF8; }
.cr-pdp__ship-card.is-no { border: 1px solid #F6E2DF; background: #FCF6F5; }
.cr-pdp__ship-ct { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; color: var(--cr-ink); margin-bottom: 8px; }
.cr-pdp__ship-cb { font-size: 13.5px; color: var(--cr-body); line-height: 1.55; }

/* related ("You may also like") — top border to separate from the tabs band */
.cr-pdp__also { border-top: 1px solid var(--cr-line); padding: 56px 0; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .cr-pdp__grid { grid-template-columns: 1fr; gap: 30px; }
  .cr-pdp__stage { min-height: 420px; }
  .cr-pdp__stage .cr-pdp__main-img { max-height: 360px; }
  .cr-pdp__title { font-size: 29px; }
}
@media (max-width: 860px) {
  .cr-pdp__desc-grid { grid-template-columns: 1fr; gap: 26px; }
  .cr-pdp__specs { grid-template-columns: 1fr; }
  .cr-pdp__ship-cards { grid-template-columns: 1fr; }
  .cr-pdp__tabbox { padding: 24px; }
}
@media (max-width: 600px) {
  .cr-pdp__main { padding: 24px 0 38px; }
  /* multi-image gallery: stack thumbnails as a horizontal strip BELOW the stage */
  .cr-pdp__gallery.has-thumbs { flex-direction: column-reverse; gap: 12px; }
  .cr-pdp__gallery.has-thumbs .cr-pdp__thumbs { flex-direction: row; flex-wrap: wrap; }
  .cr-pdp__thumb { width: 62px; height: 62px; }
  .cr-pdp__stage { min-height: 320px; padding: 26px; border-radius: 14px; }
  .cr-pdp__stage .cr-pdp__main-img { max-height: 260px; }
  .cr-pdp__price-now { font-size: 32px; }
  .cr-pdp__title { font-size: 25px; }
  .cr-pdp__fulfil { grid-template-columns: 1fr; }
  .cr-pdp__buy form.cart { gap: 10px; }
  .cr-pdp .cr-pdp__buy .single_add_to_cart_button { flex: 1 1 100% !important; min-width: 0; order: 2; white-space: normal !important; line-height: 1.2; padding: 0 14px !important; }
  /* keep the appended £ total from breaking mid-number even when the label wraps */
  .cr-pdp .cr-pdp__buy .single_add_to_cart_button .cr-pdp__lt { white-space: nowrap; }
  .cr-pdp .cr-pdp__buynow { flex: 1 1 100%; order: 3; }
  .cr-pdp__buy .quantity { order: 1; }
}
@media (max-width: 380px) {
  .cr-pdp__thumbs { gap: 8px; }
  .cr-pdp__thumb { width: 54px; height: 54px; }
}

/* ============================================================================
 * CART PAGE  (woocommerce/cart/* overrides — classic [woocommerce_cart])
 * Native WooCommerce cart form/totals arranged into the approved Cart.dc.html
 * design. Full-bleed grey band inside the normal page; .cr-cart* namespace.
 * ============================================================================ */
.cr-cart { width: 100vw; margin-left: calc(50% - 50vw); background: var(--cr-light); padding: 34px 0 64px; }
.cr-cart__in { max-width: var(--cr-maxw); margin: 0 auto; padding: 0 var(--cr-gut); }
.cr-cart__crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cr-body); font-weight: 600; margin-bottom: 18px; }
.cr-cart__crumb a { color: var(--cr-body); }
.cr-cart__crumb a:hover { color: var(--cr-orange); }
.cr-cart__crumb-sep { color: var(--cr-line-3); }
.cr-cart__crumb > span:last-child { color: var(--cr-ink); }
.cr-cart__title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 34px; letter-spacing: -.02em; color: var(--cr-ink); margin: 0 0 6px; line-height: 1.1; }
.cr-cart__sub { font-size: 14.5px; color: var(--cr-body); margin: 0 0 26px; }

.cr-cart__grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; margin: 0; }
.cr-cart__items { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cr-cart--busy .cr-cart__items, .cr-cart--busy .cart_totals { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* fulfilment toggle */
.cr-cart__fulfil { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-cart__fbtn { position: relative; cursor: pointer; border-radius: 11px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; color: var(--cr-body); background: #fff; transition: background var(--cr-ease), color var(--cr-ease); }
.cr-cart__fbtn input { position: absolute; opacity: 0; width: 0; height: 0; }
.cr-cart__fbtn:has(input:checked) { background: var(--cr-navy); color: #fff; }
.cr-cart__fbtn:has(input:focus-visible) { outline: 2px solid var(--cr-blue); outline-offset: 2px; }
.cr-cart__fic { flex: none; display: flex; }
.cr-cart__ftxt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.cr-cart__ft { font-weight: 800; font-size: 14px; }
.cr-cart__fs { font-size: 12px; opacity: .7; }

/* line item card */
.cr-cart__item { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 18px; display: flex; gap: 18px; align-items: flex-start; }
.cr-cart__media { width: 104px; height: 104px; flex: none; background: var(--cr-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.cr-cart__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; }
.cr-cart__body { flex: 1; min-width: 0; }
.cr-cart__row1 { display: flex; justify-content: space-between; gap: 14px; }
.cr-cart__cat { font-size: 11px; color: var(--cr-muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.cr-cart__name { font-weight: 800; font-size: 16px; color: var(--cr-ink); line-height: 1.3; display: block; margin-bottom: 5px; }
a.cr-cart__name:hover { color: var(--cr-orange); }
.cr-cart__sku { font-size: 12.5px; color: var(--cr-body); font-weight: 600; }
.cr-cart__meta { margin-top: 8px; font-size: 12.5px; color: var(--cr-body); background: var(--cr-coupon-bg); border: 1px solid var(--cr-coupon-bd); border-radius: 8px; padding: 6px 10px; width: max-content; max-width: 100%; }
.cr-cart__meta p, .cr-cart__meta dl { margin: 0; }
.cr-cart__meta dt, .cr-cart__meta dd { display: inline; margin: 0; }
.cr-cart__row1 > .product-remove { flex: none; display: flex; }
.cr-cart__remove { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--cr-line); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--cr-muted-2); transition: border-color var(--cr-ease), color var(--cr-ease); }
.cr-cart__remove:hover { border-color: var(--cr-red); color: var(--cr-red); }
.cr-cart__row2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.cr-cart__qty .quantity { display: flex; align-items: center; border: 1.5px solid var(--cr-line-3); border-radius: 10px; overflow: hidden; height: 42px; background: #fff; }
.cr-cart__qty .quantity .qty { width: 42px; height: 100%; text-align: center; font-weight: 800; font-size: 15px; border: none; background: #fff; color: var(--cr-ink); padding: 0; margin: 0; -moz-appearance: textfield; box-shadow: none; }
.cr-cart__qty .quantity .qty::-webkit-outer-spin-button, .cr-cart__qty .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-cart__qty .quantity label { display: none; }
.cr-cart__qbtn { width: 38px; height: 100%; background: #fff; border: none; cursor: pointer; font-size: 19px; line-height: 1; color: var(--cr-ink); display: flex; align-items: center; justify-content: center; padding: 0; transition: background var(--cr-ease); }
.cr-cart__qbtn:hover { background: var(--cr-light); }
.cr-cart__qbtn:focus-visible { outline: 2px solid var(--cr-blue); outline-offset: -2px; }
.cr-cart__prices { text-align: right; }
.cr-cart__line { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 19px; color: var(--cr-ink); }
.cr-cart__line .amount { font-size: inherit; }
.cr-cart__unit { font-size: 12px; color: var(--cr-body); font-weight: 600; }
.cr-cart__backorder { font-size: 12px; color: var(--cr-orange-dk); margin: 6px 0 0; }
.cr-cart__continue { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; color: var(--cr-blue); padding: 6px 2px; }
.cr-cart__continue:hover { color: var(--cr-orange); }
.cr-cart__actions-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* summary */
.cr-cart__summary { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.cr-cart__card { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 24px; }
.cr-cart__card-h { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--cr-ink); margin-bottom: 18px; }
.cr-cart__coupon { margin-bottom: 18px; }
.cr-cart__coupon-lbl { display: block; font-size: 13px; font-weight: 700; color: var(--cr-body); margin-bottom: 8px; }
.cr-cart__coupon-row { display: flex; gap: 8px; }
.cr-cart__coupon-in { flex: 1; min-width: 0; border: 1.5px solid var(--cr-line-3); border-radius: 9px; padding: 11px 12px; font-size: 14px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--cr-ink); outline: none; text-transform: uppercase; }
.cr-cart__coupon-in:focus { border-color: var(--cr-orange); }
.cr-cart__coupon-in::placeholder { text-transform: none; color: #6B7080; font-weight: 600; }
.cr-cart__coupon-btn { flex: none; background: var(--cr-ink); color: #fff; border: none; font-weight: 800; font-size: 13.5px; padding: 0 16px; border-radius: 9px; cursor: pointer; transition: background var(--cr-ease); }
.cr-cart__coupon-btn:hover { background: var(--cr-blue); }
.cr-cart__coupon-ok { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; background: #EAF6EF; color: var(--cr-green); font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.cr-cart__coupon-rm { color: var(--cr-green); text-decoration: underline; margin-left: 2px; }
.cr-cart__coupon-rm:hover { color: var(--cr-red); }
.cr-cart__lines { border-top: 1px solid var(--cr-line); padding-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.cr-cart__lrow { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--cr-body); }
.cr-cart__lval { font-weight: 700; color: var(--cr-ink); }
.cr-cart__lrow--disc, .cr-cart__lrow--disc .cr-cart__lval { color: var(--cr-green); font-weight: 700; }
.cr-cart__lval--free { color: var(--cr-green); }
.cr-cart__total { border-top: 1px solid var(--cr-line); margin-top: 16px; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.cr-cart__total > span:first-child { font-weight: 800; font-size: 16px; color: var(--cr-ink); }
.cr-cart__total-val, .cr-cart__total-val .amount { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 26px; color: var(--cr-ink); }
.cr-cart__proceed { margin-top: 18px; }
.cr-cart .cr-cart__proceed .checkout-button, .cr-cart .cr-cart__proceed a.button {
  display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--cr-orange) !important; color: #fff !important; font-weight: 800 !important; font-size: 16px !important;
  padding: 16px !important; border-radius: 11px !important; border: none !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: 0 !important; transition: background var(--cr-ease) !important; margin: 0;
}
.cr-cart .cr-cart__proceed .checkout-button:hover, .cr-cart .cr-cart__proceed a.button:hover { background: var(--cr-orange-dk) !important; transform: none !important; opacity: 1 !important; }
.cr-cart__secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--cr-muted); font-weight: 600; }
.cr-cart__help { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 18px 20px; }
.cr-pay-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.cr-pay-badge { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--cr-body); background: var(--cr-light); border: 1px solid var(--cr-line); border-radius: 6px; padding: 5px 9px; }
.cr-cart__help-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--cr-body); font-weight: 600; }

/* empty cart */
.cr-cart--empty .cr-cart__empty-card { background: #fff; border: 1px solid var(--cr-line); border-radius: 18px; padding: 56px 28px; text-align: center; max-width: 560px; margin: 8px auto 0; }
.cr-cart__empty-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--cr-light); color: var(--cr-muted-2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cr-cart__empty-h { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 26px; color: var(--cr-ink); margin: 0 0 10px; }
.cr-cart__empty-p { font-size: 14.5px; color: var(--cr-body); line-height: 1.6; max-width: 420px; margin: 0 auto 22px; }
.cr-cart__empty-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--cr-orange); color: #fff; font-weight: 800; font-size: 15px; padding: 14px 26px; border-radius: 11px; transition: background var(--cr-ease); }
.cr-cart__empty-btn:hover { background: var(--cr-orange-dk); color: #fff; }

/* Salient page-title header is redundant on the cart (we render our own h1) */
.woocommerce-cart .page-header-no-bg, .woocommerce-cart #page-header-bg, .woocommerce-cart .title-container { display: none !important; }

/* WooCommerce notices (added-to-basket, coupon applied, errors) — cart/checkout/account */
.cr-site .woocommerce-notices-wrapper { max-width: var(--cr-maxw); margin: 0 auto; padding: 0 var(--cr-gut); }
.cr-site .woocommerce-message, .cr-site .woocommerce-info, .cr-site .woocommerce-error {
  border-radius: 12px; border: 1px solid; padding: 13px 16px; font-size: 13.5px; font-weight: 600; margin: 0 0 14px;
  list-style: none; display: flex; align-items: center; gap: 10px; line-height: 1.4;
}
.cr-site .woocommerce-message::before, .cr-site .woocommerce-info::before, .cr-site .woocommerce-error::before { display: none; }
.cr-site .woocommerce-message { background: #EAF6EF !important; border-color: #CDEBD9 !important; color: var(--cr-green) !important; }
.cr-site .woocommerce-info { background: var(--cr-blue-tint) !important; border-color: #DCD8FA !important; color: var(--cr-blue) !important; }
.cr-site .woocommerce-error { background: #FCECEC !important; border-color: #F5D6D6 !important; color: var(--cr-red) !important; }
.cr-site .woocommerce-message::before, .cr-site .woocommerce-info::before, .cr-site .woocommerce-error::before { content: none !important; }
.cr-site .woocommerce-message .button, .cr-site .woocommerce-error .button, .cr-site .woocommerce-info .button {
  margin-left: auto; background: var(--cr-ink) !important; color: #fff !important; border: none !important;
  border-radius: 8px !important; padding: 8px 14px !important; font-size: 12.5px !important; font-weight: 800 !important; box-shadow: none !important;
}
.cr-site .woocommerce-message .button:hover, .cr-site .woocommerce-error .button:hover { background: var(--cr-orange) !important; transform: none !important; }

/* responsive */
@media (max-width: 980px) {
  .cr-cart__grid { grid-template-columns: 1fr; }
  .cr-cart__summary { position: static; }
}
@media (max-width: 560px) {
  .cr-cart__title { font-size: 27px; }
  .cr-cart__fulfil { grid-template-columns: 1fr; }
  .cr-cart__item { padding: 14px; gap: 14px; }
  .cr-cart__media { width: 84px; height: 84px; }
}

/* ============================================================================
 * CHECKOUT PAGE  (woocommerce/checkout/* overrides — classic [woocommerce_checkout])
 * Slim header + guest 2-column layout (Checkout.dc.html). Native WC fields/payment.
 * ============================================================================ */
/* slim checkout header (replaces the full chrome on the checkout form) */
.cr-co-head { background: #fff; border-bottom: 1px solid var(--cr-line); }
.cr-co-head__in { max-width: 1180px; margin: 0 auto; padding: 16px var(--cr-gut); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cr-co-head__logo img { height: 46px; width: auto; border-radius: 6px; display: block; }
.cr-co-head__brand { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; color: var(--cr-ink); }
.cr-co-head__secure { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--cr-body); font-weight: 700; }
.cr-co-head__back { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--cr-blue); }
.cr-co-head__back:hover { color: var(--cr-orange); }
.cr-co-page #footer-outer, .cr-co-page .container-wrap + #footer-outer, body.cr-co-page footer#colophon, body.cr-co-page .page-submenu { display: none !important; }

/* page body */
.cr-co { width: 100vw; margin-left: calc(50% - 50vw); background: var(--cr-light); padding: 30px 0 64px; }
.cr-co__in { max-width: 1180px; margin: 0 auto; padding: 0 var(--cr-gut); }
.cr-co__title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 32px; letter-spacing: -.02em; color: var(--cr-ink); margin: 0 0 6px; line-height: 1.1; }
.cr-co__guest { display: inline-flex; align-items: center; gap: 8px; background: #EAF6EF; color: var(--cr-green); font-size: 13px; font-weight: 700; padding: 7px 13px; border-radius: 99px; margin-bottom: 26px; }
.cr-co__grid { display: grid; grid-template-columns: 1fr 392px; gap: 28px; align-items: start; margin: 0; }
.cr-co__form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cr-co__card { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 24px; }
.cr-co__card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--cr-ink); }
.cr-co__card-h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--cr-ink); margin-bottom: 18px; }
.cr-co__step { width: 30px; height: 30px; border-radius: 50%; background: var(--cr-navy); color: #fff; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }

/* WC form fields → the design's .fld / .lbl */
.cr-co__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cr-co .form-row { margin: 0; padding: 0; }
.cr-co .form-row-wide, .cr-co__fields > .form-row.form-row-wide { grid-column: 1 / -1; }
.cr-co .form-row-first { grid-column: 1; } .cr-co .form-row-last { grid-column: 2; }
.cr-co label { display: block; font-size: 13px; font-weight: 700; color: #3A3F52; margin-bottom: 7px; }
.cr-co label .required { color: var(--cr-red); border: none; text-decoration: none; }
.cr-co .woocommerce-input-wrapper { display: block; width: 100%; }
.cr-co .input-text, .cr-co input[type="text"], .cr-co input[type="email"], .cr-co input[type="tel"], .cr-co select, .cr-co textarea {
  width: 100%; border: 1.5px solid var(--cr-line-3); border-radius: 10px; padding: 12px 14px; font-size: 14.5px;
  font-family: 'Manrope', sans-serif; color: var(--cr-ink); outline: none; background: #fff; box-shadow: none; height: auto; margin: 0;
}
.cr-co .input-text:focus, .cr-co select:focus, .cr-co textarea:focus { border-color: var(--cr-orange); }
.cr-co .input-text::placeholder { color: #6B7080; }
.cr-co__reqhint { font-size: 12.5px; color: var(--cr-body); font-weight: 600; margin: 0 0 12px; }
.cr-co .woocommerce-invalid .input-text { border-color: var(--cr-red); }
#billing_country_field, #billing_state_field, .cr-co .cr-hide { display: none !important; }
/* address fields are required-for-delivery (enforced in validation) but field-level optional
   so Click & Collect can skip them — hide the misleading "(optional)" suffix on them. */
#billing_address_1_field .optional, #billing_city_field .optional, #billing_postcode_field .optional { display: none; }
/* coupon lives on the basket, not the checkout */
.cr-co-page .woocommerce-form-coupon-toggle, .cr-co-page .checkout_coupon { display: none !important; }

/* delivery toggle (reuses .cr-cart__fbtn markup, restyled to the checkout look) */
.cr-co__fulfil { margin-bottom: 18px; }
.cr-co__fulfil .cr-cart__fulfil { background: transparent; border: none; padding: 0; grid-template-columns: 1fr 1fr; gap: 12px; }
.cr-co .cr-cart__fbtn { flex-direction: column; align-items: flex-start; gap: 6px; border: 1.5px solid var(--cr-line-3); background: #fff; color: var(--cr-body); padding: 14px 16px; }
.cr-co .cr-cart__fbtn:has(input:checked) { border: 2px solid var(--cr-orange); background: var(--cr-coupon-bg); color: var(--cr-ink); }
.cr-co .cr-cart__fbtn .cr-cart__ft { font-size: 15px; }
.cr-co__address { margin-top: 4px; }
.cr-co__shipnote { display: flex; align-items: flex-start; gap: 10px; background: var(--cr-coupon-bg); border: 1px solid var(--cr-coupon-bd); border-radius: 10px; padding: 12px 14px; margin-top: 14px; font-size: 12.5px; color: #7A4A12; line-height: 1.5; }
.cr-co__shipnote svg { flex: none; margin-top: 1px; }
.cr-co__pickup { display: flex; gap: 14px; align-items: center; background: #F6FBF8; border: 1px solid #EAF6EF; border-radius: 12px; padding: 16px; }
.cr-co__pickup-ic { width: 42px; height: 42px; border-radius: 10px; background: #EAF6EF; display: flex; align-items: center; justify-content: center; flex: none; }
.cr-co__pickup-t { font-weight: 800; font-size: 14.5px; color: var(--cr-ink); }
.cr-co__pickup-s { font-size: 13px; color: var(--cr-body); line-height: 1.45; }

/* order summary */
.cr-co__summary { position: sticky; top: 20px; }
.cr-co__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.cr-co__oitem { display: flex; gap: 12px; align-items: center; }
.cr-co__othumb { position: relative; width: 54px; height: 54px; flex: none; background: var(--cr-light); border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 6px; }
.cr-co__othumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; }
.cr-co__oqty { position: absolute; top: -7px; right: -7px; background: var(--cr-ink); color: #fff; font-size: 11px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.cr-co__oinfo { flex: 1; min-width: 0; }
.cr-co__oname { font-weight: 700; font-size: 13.5px; color: var(--cr-ink); line-height: 1.3; }
.cr-co__osku { font-size: 12px; color: var(--cr-body); font-weight: 600; }
.cr-co__ometa { font-size: 11.5px; color: var(--cr-body); margin-top: 3px; }
.cr-co__ometa p, .cr-co__ometa dl, .cr-co__ometa dt, .cr-co__ometa dd { margin: 0; display: inline; }
.cr-co__oline { font-weight: 800; font-size: 13.5px; color: var(--cr-ink); white-space: nowrap; }
.cr-co__lines { border-top: 1px solid var(--cr-line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cr-co__lrow { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--cr-body); }
.cr-co__lval { font-weight: 700; color: var(--cr-ink); }
.cr-co__lrow--disc, .cr-co__lrow--disc .cr-co__lval { color: var(--cr-green); font-weight: 700; }
.cr-co__lval--free { color: var(--cr-green); }
.cr-co__total { border-top: 1px solid var(--cr-line); margin-top: 16px; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.cr-co__total > span:first-child { font-weight: 800; font-size: 16px; color: var(--cr-ink); }
.cr-co__total-val, .cr-co__total-val .amount { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 25px; color: var(--cr-ink); }

/* native payment + place order (rendered after review-order inside #order_review) */
.cr-co #payment { background: transparent; border: none; margin-top: 18px; }
.cr-co #payment .payment_methods { margin: 0 0 4px; padding: 0; border: none; list-style: none; }
.cr-co #payment .payment_methods li { list-style: none; background: var(--cr-light); border: 1px solid var(--cr-line); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; }
.cr-co #payment .payment_methods li input { margin-right: 8px; }
.cr-co #payment .payment_methods li label { display: inline; font-weight: 700; font-size: 14px; color: var(--cr-ink); margin: 0; }
.cr-co #payment .payment_box { background: #fff; border: 1px solid var(--cr-line); border-radius: 10px; padding: 12px 14px; margin: 8px 0 0; font-size: 13px; color: var(--cr-body); }
.cr-co #payment .payment_box::before { display: none; }
.cr-co #payment .woocommerce-terms-and-conditions-wrapper { margin: 10px 0; font-size: 12.5px; color: var(--cr-body); }
.cr-co #payment .place-order { padding: 0; margin: 0; }
.cr-co #place_order {
  display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 14px;
  background: var(--cr-orange) !important; color: #fff !important; font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; font-size: 16px !important;
  padding: 16px !important; border-radius: 11px !important; border: none !important; box-shadow: none !important; float: none !important;
  text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: background var(--cr-ease) !important;
}
.cr-co #place_order:hover { background: var(--cr-orange-dk) !important; transform: none !important; opacity: 1 !important; }
.cr-co__order .cr-co__terms-note { font-size: 11.5px; color: var(--cr-muted-2); text-align: center; margin-top: 12px; line-height: 1.5; }

/* responsive */
@media (max-width: 980px) {
  .cr-co__grid { grid-template-columns: 1fr; }
  .cr-co__summary { position: static; }
}
@media (max-width: 560px) {
  .cr-co__title { font-size: 26px; }
  .cr-co__fields { grid-template-columns: 1fr; }
  .cr-co .form-row-first, .cr-co .form-row-last { grid-column: 1 / -1; }
  .cr-co__fulfil .cr-cart__fulfil { grid-template-columns: 1fr; }
  .cr-co-head__secure { display: none; }
}

/* =========================================================================
   THANK YOU / ORDER RECEIVED (.cr-ty) — matches the checkout design language
   (white 16px-radius cards on --cr-line borders, Archivo 800/900 headings,
   green success accents, navy primary buttons). Also skins the NATIVE
   WooCommerce order-details table + customer addresses that the preserved
   woocommerce_thankyou hook prints, so gateway/plugin output stays styled.
   ========================================================================= */
.cr-ty { background: #F7F8FB; padding: 48px 20px 72px; }
.cr-ty__in { max-width: 860px; margin: 0 auto; }

/* hero */
.cr-ty__hero { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 44px 34px 36px; text-align: center; }
.cr-ty__icon { width: 68px; height: 68px; border-radius: 50%; background: rgba(31,138,91,.12); color: var(--cr-green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cr-ty__icon--failed { background: rgba(200,52,52,.1); color: #C83434; }
.cr-ty__title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 30px; letter-spacing: -.02em; color: var(--cr-ink); margin: 0 0 10px; line-height: 1.15; }
.cr-ty__sub { font-size: 16px; line-height: 1.6; color: var(--cr-muted); margin: 0 auto 26px; max-width: 560px; }
.cr-ty__sub strong { color: var(--cr-ink); font-weight: 700; }

/* meta chips (native .order_details list, unstyled) */
.cr-ty__meta { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 26px; padding: 0; }
.cr-ty__meta li { margin: 0; padding: 0; border: 0; float: none; }
.cr-ty__chip { background: #F7F8FB; border: 1px solid var(--cr-line-3); border-radius: 12px; padding: 12px 20px; text-align: left; min-width: 150px; }
.cr-ty__chip-l { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-muted); margin-bottom: 3px; }
.cr-ty__chip-v { display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: var(--cr-ink); }

/* what happens next strip */
.cr-ty__next { display: flex; align-items: flex-start; justify-content: center; gap: 10px; background: rgba(31,138,91,.07); border: 1px solid rgba(31,138,91,.22); color: #14563A; border-radius: 12px; padding: 14px 18px; font-size: 14.5px; line-height: 1.55; max-width: 620px; margin: 0 auto; text-align: left; }
.cr-ty__next-ic { flex: none; color: var(--cr-green); margin-top: 2px; }

/* native details table + addresses (rendered by woocommerce_thankyou) */
.cr-ty__details { margin-top: 22px; }
.cr-ty__details .woocommerce-order-details,
.cr-ty__details .woocommerce-customer-details { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 26px 28px; margin: 0 0 18px; }
.cr-ty__details .woocommerce-order-details__title,
.cr-ty__details .woocommerce-column__title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--cr-ink); margin: 0 0 14px; }
.cr-ty__details table.woocommerce-table--order-details { width: 100%; border-collapse: collapse; border: 0; }
.cr-ty__details table.woocommerce-table--order-details th,
.cr-ty__details table.woocommerce-table--order-details td { border: 0; border-bottom: 1px solid var(--cr-line-2); padding: 11px 4px; font-size: 14.5px; text-align: left; background: none; }
.cr-ty__details table.woocommerce-table--order-details tfoot tr:last-child th,
.cr-ty__details table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: var(--cr-ink); }
.cr-ty__details .wc-item-meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; color: var(--cr-muted); }
.cr-ty__details address { font-style: normal; line-height: 1.7; color: var(--cr-ink); }
.cr-ty__details .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cr-ty__details .woocommerce-columns--addresses .woocommerce-column { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 26px 28px; margin: 0; float: none; width: auto; }

/* CTAs */
.cr-ty__ctas, .cr-ty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.cr-ty__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14.5px; padding: 14px 26px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.cr-ty__btn--primary { background: var(--cr-navy); color: #fff !important; }
.cr-ty__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24,26,51,.25); color: #fff !important; }
.cr-ty__btn--ghost { background: #fff; border: 1.5px solid var(--cr-line-3); color: var(--cr-ink) !important; }
.cr-ty__btn--ghost:hover { border-color: var(--cr-navy); transform: translateY(-2px); }

/* responsive */
@media (max-width: 700px) {
  .cr-ty { padding: 28px 14px 48px; }
  .cr-ty__hero { padding: 32px 20px 28px; }
  .cr-ty__title { font-size: 24px; }
  .cr-ty__meta { gap: 8px; }
  .cr-ty__chip { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .cr-ty__details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
  .cr-ty__details .woocommerce-order-details,
  .cr-ty__details .woocommerce-customer-details { padding: 20px 16px; overflow-x: auto; }
}
/* gateway instruction line (e.g. COD "Pay with cash upon delivery.") — printed by
   the woocommerce_thankyou_<gateway> hook as a bare <p>; present it as a muted note */
.cr-ty__details > p { text-align: center; color: var(--cr-muted); font-size: 14.5px; margin: 0 0 18px; }

/* =========================================================================
   CONTACT PAGE (.cr-contact) — wrapper-class pattern (classes live on the
   vc_column_text el_class wrappers; bodies are plain text/CF7 so WPBakery
   edits can never strip the design). Matches the checkout/thank-you cards.
   ========================================================================= */
.cr-contact__head { max-width: 1180px; margin: 40px auto 6px; padding: 0 20px; }
.cr-contact__head h1 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 34px; letter-spacing: -.02em; color: var(--cr-ink); margin: 0 0 8px; }
.cr-contact__head p { color: var(--cr-muted); font-size: 16px; max-width: 640px; }

.cr-contact__grid { max-width: 1180px; margin: 18px auto 64px !important; padding: 0 20px; display: flex !important; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.cr-contact__grid > .wpb_column { float: none; margin: 0; min-width: 0; }
.cr-contact__grid > .wpb_column:first-child { flex: 1.4 1 380px; }
.cr-contact__grid > .wpb_column:last-child { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }

.cr-contact__formcard { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 30px 30px 34px; }
.cr-contact__formcard h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: var(--cr-ink); margin: 0 0 6px; }
.cr-contact__formcard > p { color: var(--cr-muted); font-size: 14.5px; margin: 0 0 18px; }
.cr-contact__formcard .wpcf7-form p { margin: 0 0 14px; }
.cr-contact__formcard .wpcf7-form-control:not([type=submit]) { width: 100%; background: #F7F8FB; border: 1.5px solid var(--cr-line-3); border-radius: 10px; padding: 13px 14px; font-size: 14.5px; color: var(--cr-ink); }
.cr-contact__formcard .wpcf7-form-control:focus { border-color: var(--cr-navy); outline: none; }
.cr-contact__formcard textarea.wpcf7-form-control { min-height: 130px; resize: vertical; }
.cr-contact__formcard .wpcf7-submit { background: var(--cr-navy); color: #fff; border: 0; border-radius: 999px; padding: 14px 30px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14.5px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.cr-contact__formcard .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24,26,51,.25); }

.cr-contact__card { background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; padding: 22px 24px; margin: 0 !important; }
.cr-contact__card h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: var(--cr-ink); margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.cr-contact__card h3::before { content: ""; width: 34px; height: 34px; border-radius: 10px; flex: none; background-color: rgba(31,138,91,.12); background-repeat: no-repeat; background-position: center; background-size: 17px; }
.cr-contact__card--phone h3::before { background-image: var(--cr-cta-phone-svg); }
.cr-contact__card--email h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5B' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 6L2 7'/%3E%3C/svg%3E"); }
.cr-contact__card--visit h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5B' stroke-width='2'%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"); }
.cr-contact__card--trade h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5B' stroke-width='2'%3E%3Cpath d='M20 7h-4V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); }
.cr-contact__card p { color: var(--cr-muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 4px; }
.cr-contact__card a { color: var(--cr-ink); font-weight: 700; text-decoration: none; }
.cr-contact__card a:hover { color: var(--cr-green); }

@media (max-width: 820px) {
  .cr-contact__grid { flex-direction: column; }
  .cr-contact__grid > .wpb_column { width: 100%; }
  .cr-contact__head h1 { font-size: 27px; }
}
/* CF7 submit: out-specify Salient's global input[type=submit] accent styling */
.cr-contact__formcard input.wpcf7-form-control.wpcf7-submit[type="submit"] { background: var(--cr-navy) !important; color: #fff !important; border-radius: 999px !important; border: 0 !important; padding: 14px 30px !important; font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 14.5px !important; }
.cr-contact__formcard input.wpcf7-form-control.wpcf7-submit[type="submit"]:hover { background: var(--cr-ink-deep) !important; }

/* =========================================================================
   CHECKOUT REFINEMENT (2026-07) — validation notice + input polish
   ========================================================================= */

/* --- Validation notice fix ---
   WooCommerce's checkout.js prepends <div class="woocommerce-NoticeGroup
   woocommerce-NoticeGroup-checkout"> INTO form.checkout — which here is the
   2-col CSS grid (.cr-co__grid). As a grid item it stole the first column and
   pushed the form/summary out of place. Force it to span the full grid width
   above both columns, and present it as a clean, readable alert. */
.cr-co__grid > .woocommerce-NoticeGroup { grid-column: 1 / -1; margin: 0 0 6px; }
.cr-co .woocommerce-NoticeGroup .woocommerce-error,
.cr-co .woocommerce-NoticeGroup .woocommerce-message,
.cr-co .woocommerce-NoticeGroup .woocommerce-info {
  list-style: none !important; margin: 0 !important; padding: 16px 20px !important;
  border-radius: 12px !important; box-shadow: none !important; float: none !important;
  font-family: 'Manrope', sans-serif; display: block !important;
}
.cr-co .woocommerce-NoticeGroup .woocommerce-error {
  background: #FCECEC !important; border: 1px solid #F1C9C9 !important;
  border-left: 4px solid var(--cr-red) !important; color: #8A2A2A !important;
}
/* content:!important — beat the existing ".cr-site .woocommerce-error::before{content:none!important}" reset */
.cr-co .woocommerce-NoticeGroup .woocommerce-error::before {
  content: "Please complete the required fields below to place your order" !important;
  display: block !important; padding-left: 28px; margin-bottom: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14.5px; color: #8A2A2A;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C83434' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") left 1px / 19px no-repeat !important;
}
.cr-co .woocommerce-NoticeGroup .woocommerce-error li {
  display: list-item !important; float: none !important; list-style: disc inside !important;
  width: auto !important; margin: 0 0 0 4px !important; padding: 3px 0 !important;
  font-size: 14px !important; line-height: 1.55 !important; color: #8A2A2A !important; font-weight: 500;
}
.cr-co .woocommerce-NoticeGroup .woocommerce-error li strong { color: #6E1F1F; font-weight: 800; }
.cr-co .woocommerce-NoticeGroup .woocommerce-error a.button { display: none; } /* stray WC buttons */

/* --- Input polish: uniform height, radius, focus ring across every control.
   !important is required to beat Salient's own WooCommerce input styling
   (higher-specificity theme rules were forcing 38px height / 4px radius —
   the reason the fields looked plain & inconsistent). --- */
.cr-co .input-text, .cr-co input[type="text"], .cr-co input[type="email"], .cr-co input[type="tel"],
.cr-co input[type="number"], .cr-co input[type="password"], .cr-co select {
  height: 50px !important; padding: 0 15px !important; border: 1.5px solid var(--cr-line-3) !important;
  border-radius: 11px !important; font-size: 15px !important; font-family: 'Manrope', sans-serif !important;
  color: var(--cr-ink) !important; background: #fff !important; box-shadow: none !important;
  line-height: normal !important; transition: border-color var(--cr-ease), box-shadow var(--cr-ease) !important;
}
.cr-co textarea, .cr-co textarea.input-text { min-height: 96px !important; height: auto !important; padding: 13px 15px !important; border-radius: 11px !important; line-height: 1.5 !important; }
.cr-co .input-text:hover, .cr-co select:hover, .cr-co textarea:hover { border-color: #C9CEDC; }
.cr-co .input-text:focus, .cr-co select:focus, .cr-co textarea:focus,
.cr-co input[type="text"]:focus, .cr-co input[type="email"]:focus, .cr-co input[type="tel"]:focus {
  border-color: var(--cr-orange) !important; box-shadow: 0 0 0 3px rgba(230,123,0,.15) !important; outline: none !important;
}
.cr-co .input-text::placeholder, .cr-co textarea::placeholder { color: #9AA0B0; }
.cr-co label { font-size: 13px; font-weight: 700; color: #3A3F52; margin-bottom: 8px; letter-spacing: 0; }
.cr-co label .required { color: var(--cr-red); margin-left: 2px; }

/* invalid field: red border + soft red ring (matches the notice) */
.cr-co .form-row.woocommerce-invalid .input-text,
.cr-co .form-row.woocommerce-invalid input.input-text,
.cr-co .form-row.woocommerce-invalid select { border-color: var(--cr-red) !important; }
.cr-co .form-row.woocommerce-invalid .input-text:focus { box-shadow: 0 0 0 3px rgba(200,52,52,.16) !important; }
.cr-co .form-row.woocommerce-validated .input-text { border-color: #BFE3CE; }

/* responsive: comfortable notice on small screens */
@media (max-width: 560px) {
  .cr-co .woocommerce-NoticeGroup .woocommerce-error { padding: 14px 16px !important; }
  .cr-co .woocommerce-NoticeGroup .woocommerce-error::before { font-size: 13.5px; }
  .cr-co .input-text, .cr-co input[type="text"], .cr-co input[type="email"], .cr-co input[type="tel"], .cr-co select { font-size: 16px !important; } /* 16px = no iOS zoom-on-focus */
}

/* ==========================================================================
   DATASHEET DOWNLOAD (single product) — inc/cr-datasheet.php
   Replaces the [vc_btn] the old site baked into product descriptions, which
   printed as literal text here because WPBakery does not register its
   shortcodes on WooCommerce templates.
   ========================================================================== */
.cr-site .cr-ds {
  display: inline-flex; align-items: center; gap: 13px;
  margin: 20px 0 22px; padding: 13px 20px 13px 16px;
  border-radius: 12px; text-decoration: none !important;
  border: 1.5px solid #D8DBE6; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cr-site .cr-ds:hover {
  border-color: #F7941E; transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(24,26,51,.45);
}
.cr-site .cr-ds:focus-visible { outline: 3px solid rgba(247,148,30,.45); outline-offset: 2px; }
.cr-site .cr-ds__ico {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  background-color: rgba(247,148,30,.12); position: relative;
}
.cr-site .cr-ds__ico::before {
  content: ""; position: absolute; inset: 0; background-color: #F7941E;
  -webkit-mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
}
.cr-site .cr-ds__txt { display: flex; flex-direction: column; gap: 2px; }
.cr-site .cr-ds__t { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: #181A33; }
.cr-site .cr-ds__s { font-size: 12.5px; color: #6B7085; letter-spacing: .02em; }
@media (max-width: 600px) {
  .cr-site .cr-ds { width: 100%; }
}

/* ==========================================================================
   CHECKOUT FIELD WIDTHS
   .cr-co__fields is a two-column GRID, so it already places First/Last name and
   Town/Postcode side by side. WooCommerce's own layout sheet then applies
   `.woocommerce form .form-row-first { width:47%; float:left }` — a rule written for
   its FLOAT layout — which shrank each of those rows to 47% OF ITS GRID CELL
   (151.6px inside a 309.5px column) while the full-width rows stayed 633px. That is
   why the name and postcode fields looked stunted next to Email and Address.
   The grid owns the columns; the rows just fill them.
   ========================================================================== */
.cr-site .cr-co .cr-co__fields > .form-row,
.cr-site .cr-co .cr-co__fields > p.form-row {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cr-site .cr-co .cr-co__fields > .form-row .input-text,
.cr-site .cr-co .cr-co__fields > .form-row select,
.cr-site .cr-co .cr-co__fields > .form-row textarea { width: 100% !important; }

/* ==========================================================================
   LAMP-COLUMN ADD-ONS (inc/cr-addons.php)
   The brief's six optional extras, chosen on the column's own page instead of
   hunting down six separate products.
   ========================================================================== */
.cr-site .cr-addons {
  margin: 22px 0; padding: 20px 22px; border-radius: 14px;
  border: 1.5px solid #E2E5EE; background: #FAFBFD;
}
.cr-site .cr-addons__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cr-site .cr-addons__title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: #16182B; }
.cr-site .cr-addons__note { font-size: 12.5px; color: #6B7085; }

.cr-site .cr-addon { padding: 13px 0; border-top: 1px solid #E8EAF1; }
.cr-site .cr-addon:first-of-type { border-top: 0; }
.cr-site .cr-addon__label {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 13px; color: #16182B; margin-bottom: 7px;
}
.cr-site .cr-addon__choices { display: flex; flex-direction: column; gap: 6px; }

/* one row = control + name + price, price pinned right */
.cr-site .cr-addon__choice,
.cr-site .cr-addon__toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 12px; border-radius: 10px; border: 1.5px solid transparent;
  background: #fff; transition: border-color .18s ease, background .18s ease;
}
.cr-site .cr-addon__choice:hover,
.cr-site .cr-addon__toggle:hover { border-color: #CFD5E4; }
.cr-site .cr-addon__choice input,
.cr-site .cr-addon__toggle input { position: absolute; opacity: 0; pointer-events: none; }

.cr-site .cr-addon__dot,
.cr-site .cr-addon__box {
  width: 18px; height: 18px; flex: none; border: 1.5px solid #C6CCDC; background: #fff;
  position: relative; transition: border-color .18s ease, background .18s ease;
}
.cr-site .cr-addon__dot { border-radius: 50%; }
.cr-site .cr-addon__box { border-radius: 5px; }
.cr-site .cr-addon__choice input:checked ~ .cr-addon__dot,
.cr-site .cr-addon__toggle input:checked ~ .cr-addon__box { border-color: #F7941E; background: #F7941E; }
.cr-site .cr-addon__choice input:checked ~ .cr-addon__dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
.cr-site .cr-addon__toggle input:checked ~ .cr-addon__box::after {
  content: ""; position: absolute; inset: 0; background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* the chosen row reads as chosen, not just its little control */
.cr-site .cr-addon__choice:has(input:checked),
.cr-site .cr-addon__toggle:has(input:checked) { border-color: #F7941E; background: #FFF8F0; }
.cr-site .cr-addon__choice input:focus-visible ~ .cr-addon__dot,
.cr-site .cr-addon__toggle input:focus-visible ~ .cr-addon__box { outline: 3px solid rgba(247,148,30,.45); outline-offset: 2px; }

.cr-site .cr-addon__opt { flex: 1 1 auto; font-size: 14px; color: #2B2F45; }
.cr-site .cr-addon__price { font-size: 13px; font-weight: 700; color: #6B7085; white-space: nowrap; }
.cr-site .cr-addon__choice:has(input:checked) .cr-addon__price,
.cr-site .cr-addon__toggle:has(input:checked) .cr-addon__price { color: #C2740A; }

.cr-site .cr-addons__sum {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 13px; border-top: 1.5px solid #E2E5EE;
  font-family: 'Archivo', sans-serif; font-size: 14px; color: #6B7085;
}
.cr-site .cr-addons__total { font-size: 17px; font-weight: 800; color: #16182B; }
.cr-site .cr-addons.has-extras .cr-addons__total { color: #C2740A; }

@media (max-width: 600px) {
  .cr-site .cr-addons { padding: 16px; }
  .cr-site .cr-addon__opt { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- collection only
   Products C&R will not ship. Green rather than red: this is a fact about the item,
   not an error the customer has made. */
.cr-collect-note {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 16px 0 18px; padding: 12px 14px;
	background: #F0F8F3; border: 1px solid #CBE5D6; border-radius: 8px;
	font-size: 14px; line-height: 1.5; color: var(--cr-body);
}
.cr-collect-note__ic { flex: 0 0 auto; color: var(--cr-green, #1F8A5B); margin-top: 1px; }
.cr-collect-note strong { color: var(--cr-head, #16182B); }

.cr-collect-bar {
	display: flex; align-items: flex-start; gap: 12px;
	margin: 0 0 22px; padding: 14px 16px;
	background: #F0F8F3; border: 1px solid #CBE5D6; border-radius: 10px;
	font-size: 14px; line-height: 1.55; color: var(--cr-body);
}
.cr-collect-bar__ic { flex: 0 0 auto; color: var(--cr-green, #1F8A5B); margin-top: 1px; }

@media (max-width: 690px) {
	.cr-collect-note, .cr-collect-bar { padding: 11px 12px; font-size: 13px; }
}

/* The basket and checkout bodies are two-column grids, so anything hooked into them
   becomes a grid ITEM and takes a cell — which pushed the items column into the narrow
   summary track. The banner has to span the full row instead. */
.cr-cart__grid > .cr-collect-bar,
.cr-co__grid > .cr-collect-bar { grid-column: 1 / -1; }