/*
Theme Name: Salient Child Theme
Description: C&R Outdoor Lighting — native-first pixel-perfect rebuild (Salient + WPBakery + WooCommerce)
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* ==================================================================
   C&R OUTDOOR LIGHTING — single scoped stylesheet
   Organisation: tokens → base → layout helpers → sections → responsive
   CSS is used ONLY for: brand tokens for gradients/shadows, full-bleed
   structure, exact radii, complex hovers, dynamic-Woo styling, and the
   responsive reflow the source design lacks. Everything that can be a
   Salient/WPBakery native option is set there, not here.
   Scope: .cr-site (all pages) / .cr-home (homepage).
   ================================================================== */

/* ----- 1. Design tokens (mirror of Theme Options palette; for
   gradients/shadows/borders that a single colour can't express) ----- */
:root {
  --cr-navy:        #181A33;  /* hero / dark sections bg            */
  --cr-ink:         #16182B;  /* near-black: headings, dark buttons */
  --cr-ink-deep:    #0c0d1a;  /* darkest hover                      */
  --cr-blue:        #2E3192;  /* accent links / Click & Collect     */
  --cr-blue-tint:   #F4F1FF;  /* light-blue chip bg                 */
  --cr-orange:      #F7941E;  /* primary brand / CTA                */
  --cr-orange-dk:   #E07B00;  /* orange hover                       */
  --cr-amber:       #FFB454;  /* amber text on dark                 */
  --cr-light:       #F5F6F9;  /* light section bg                   */
  --cr-line:        #ECEEF4;  /* hairline border                   */
  --cr-line-2:      #F1F2F6;  /* inner hairline                    */
  --cr-line-3:      #E2E5EE;  /* input border                      */
  --cr-body:        #5A6072;  /* body text                          */
  --cr-muted:       #8A8FA0;  /* muted text                         */
  --cr-muted-2:     #9398A8;  /* muted label                        */
  --cr-on-dark:     #B9BDD0;  /* body text on dark                  */
  --cr-on-dark-2:   #C7CAD8;  /* secondary text on dark             */
  --cr-green:       #1F8A5B;
  --cr-green-lt:    #5BD49B;
  --cr-red:         #C0392B;
  --cr-coupon-bg:   #FFF7EE;
  --cr-coupon-bd:   #F3E2CB;

  --cr-maxw: 1280px;          /* content width  */
  --cr-gut:  28px;            /* horizontal gutter */
  --cr-radius-card: 16px;
  --cr-radius-btn:  11px;
  --cr-pad-sec: 64px;         /* standard section vertical padding */

  --cr-shadow-card:    0 20px 40px -20px rgba(20,24,43,.25);
  --cr-shadow-product: 0 20px 40px -22px rgba(20,24,43,.28);
  --cr-shadow-mega:    0 26px 50px -18px rgba(20,24,43,.25);
  --cr-ease: .18s ease;       /* added: source snaps; tasteful hover ease */
}

/* ----- 2. Base (matches the design reset where it differs from Salient) ----- */
.cr-site ::selection { background: var(--cr-orange); color: #fff; }

/* Horizontal scroller (You may also like) custom scrollbar */
.cr-scroll { scrollbar-width: thin; scrollbar-color: #cfd3df #eef0f5; }
.cr-scroll::-webkit-scrollbar { height: 8px; }
.cr-scroll::-webkit-scrollbar-thumb { background: #cfd3df; border-radius: 99px; }
.cr-scroll::-webkit-scrollbar-track { background: #eef0f5; border-radius: 99px; }

/* ----- 3. Layout helpers ----- */
/* Full-width rows: kill Salient's default 21px row gap so dark/full-bleed
   sections butt together exactly as the design. */
.cr-home .wpb_row.cr-section { margin-bottom: 0 !important; }

/* Reusable centered inner wrapper (1280 / 28px gutter) for sections that
   need it inside a stretched full-width row. */
.cr-inner { max-width: var(--cr-maxw); margin: 0 auto; padding-left: var(--cr-gut); padding-right: var(--cr-gut); }

/* Kill the Salient front-page sidebar column so sections go edge-to-edge. */
.cr-home #content .container .row > .span_3,
.cr-home .main-content .row .span_3 { display: none !important; }
.cr-home #content .container .row > .span_9 { width: 100%; margin: 0; }

/* WPBakery full-width-stretched rows on the homepage: remove the default
   inner padding Salient adds, we control padding per section. */
.cr-home .wpb_row.vc_row-o-full-height,
.cr-home .container-wrap { padding: 0; }

/* ==================================================================
   SECTION STYLES — appended per section as the build progresses.
   ================================================================== */

/* ------------------------------------------------------------------ *
 * GLOBAL HEADER (replaces Salient's native header) — top bar, main
 * header, mega-nav, coupon bar. Suppress Salient's own header chrome.
 * ------------------------------------------------------------------ */
.cr-site #header-outer,
.cr-site #header-space,
.cr-site #search-outer,
.cr-site #header-secondary-outer { display: none !important; }

/* icon sizing (svgs carry viewBox only; size + colour via classes) */
.cr-chrome svg, .cr-mobile-nav svg { display: inline-block; vertical-align: middle; }
.cr-i12 { width: 12px; height: 12px; } .cr-i14 { width: 14px; height: 14px; }
.cr-i17 { width: 17px; height: 17px; } .cr-i20 { width: 20px; height: 20px; }
.cr-i24 { width: 24px; height: 24px; }
.cr-i-orange { stroke: var(--cr-orange); }

/* --- Top utility bar --- */
.cr-topbar { background: var(--cr-navy); color: var(--cr-on-dark-2); font-size: 13px; font-weight: 500; }
.cr-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
.cr-topbar__left { display: flex; align-items: center; gap: 9px; }
.cr-topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cr-orange); display: inline-block; flex: none; }
.cr-topbar__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cr-topbar__link { color: var(--cr-on-dark-2); display: inline-flex; align-items: center; gap: 7px; }
.cr-topbar__phone { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.cr-topbar a { transition: color var(--cr-ease); }
.cr-topbar a:hover { color: #fff; }

/* --- Main header --- */
.cr-main-header { background: #fff; border-bottom: 1px solid var(--cr-line); position: sticky; top: 0; z-index: 50; }
.cr-header-row { display: flex; align-items: center; gap: 32px; padding-top: 18px; padding-bottom: 18px; }
.cr-logo { flex: none; display: block; }
.cr-logo img { height: 54px; width: auto; display: block; border-radius: 6px; }

.cr-search { flex: 1; max-width: 680px; display: flex; align-items: stretch; border: 1.5px solid var(--cr-line-3); border-radius: 10px; overflow: hidden; background: #fff; height: 48px; }
.cr-search__input { flex: 1; border: none; outline: none; padding: 0 18px; font-size: 15px; font-family: 'Manrope', sans-serif; color: var(--cr-ink); background: transparent; }
.cr-search__sep { width: 1px; background: var(--cr-line-3); margin: 8px 0; flex: none; }
.cr-search__select { border: none; outline: none; background: transparent; padding: 0 12px; font-size: 14px; color: var(--cr-body); font-family: 'Manrope', sans-serif; cursor: pointer; max-width: 170px; }
.cr-search__btn { flex: none; width: 54px; background: var(--cr-orange); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--cr-ease); }
.cr-search__btn:hover { background: var(--cr-orange-dk); }
.cr-search__btn svg { stroke-width: 2.4; }

.cr-header-right { flex: none; display: flex; align-items: center; gap: 20px; margin-left: auto; }
.cr-cc { display: flex; align-items: center; gap: 10px; }
.cr-cc__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--cr-blue-tint); display: flex; align-items: center; justify-content: center; flex: none; color: var(--cr-blue); }
.cr-cc__txt { line-height: 1.25; display: flex; flex-direction: column; }
.cr-cc__label { font-size: 11px; color: var(--cr-muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cr-cc__sub { font-size: 14px; color: var(--cr-ink); font-weight: 700; }
.cr-divider { width: 1px; height: 34px; background: var(--cr-line); flex: none; }

.cr-basket { display: flex; align-items: center; gap: 11px; }
.cr-basket__icon { position: relative; width: 42px; height: 42px; border-radius: 10px; background: var(--cr-ink); display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.cr-basket__count { position: absolute; top: -6px; right: -6px; background: var(--cr-orange); 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 5px; border: 2px solid #fff; }
.cr-basket__txt { line-height: 1.25; display: flex; flex-direction: column; }
.cr-basket__label { font-size: 11px; color: var(--cr-muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cr-basket__total { font-size: 14px; color: var(--cr-ink); font-weight: 800; }
.cr-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--cr-line); border-radius: 10px; background: #fff; color: var(--cr-ink); cursor: pointer; flex: none; }

/* --- Primary nav + mega menus --- */
.cr-nav { background: #fff; border-bottom: 1px solid var(--cr-line); position: relative; z-index: 40; }
.cr-nav-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; }
.cr-allcats { display: flex; align-items: center; gap: 10px; background: var(--cr-orange); color: #fff; font-weight: 800; font-size: 14px; padding: 0 16px; border-radius: 0 0 4px 4px; cursor: pointer; flex: none; white-space: nowrap; transition: background var(--cr-ease); }
.cr-allcats:hover { background: var(--cr-orange-dk); color: #fff; }
.cr-nav__item { display: flex; align-items: center; }
.cr-nav__item--full { position: static; }
.cr-nav__item--drop { position: relative; }
.cr-nav__link { display: flex; align-items: center; gap: 5px; padding: 16px 13px; font-size: 14px; font-weight: 700; color: var(--cr-ink); border-bottom: 3px solid transparent; white-space: nowrap; transition: color var(--cr-ease), border-color var(--cr-ease); }
/* Design wraps the 8-item bar to 2 rows at 1440 (matched). On common laptop
   widths, trim density slightly so it stays a tidy single line. */
@media (max-width: 1366px) and (min-width: 1100px) { .cr-nav__link { padding-left: 10px; padding-right: 10px; } .cr-allcats { padding: 0 13px; } }
.cr-nav__link:hover { color: var(--cr-orange); border-bottom-color: var(--cr-orange); }
.cr-nav__chev { width: 12px; height: 12px; } .cr-nav__chev { stroke-width: 2.6; }

.cr-mega { position: absolute; top: 100%; background: #fff; border: 1px solid var(--cr-line); border-top: 3px solid var(--cr-orange); box-shadow: var(--cr-shadow-mega); z-index: 60; display: none; }
.cr-mega--grid, .cr-mega--wide { left: var(--cr-gut); right: var(--cr-gut); border-radius: 0 0 14px 14px; padding: 28px; gap: 28px; }
.cr-mega--grid { grid-template-columns: 1fr 1fr 1fr 1.1fr; }
.cr-mega--wide { grid-template-columns: 1fr 1fr 1.4fr; }
.cr-mega--simple { left: 0; border-radius: 0 0 14px 14px; padding: 18px 22px; min-width: 230px; }
.cr-nav__item--right .cr-mega--simple { left: auto; right: 0; }
.cr-nav__item--full:hover > .cr-mega,
.cr-nav__item--full:focus-within > .cr-mega { display: grid; }     /* :focus-within = keyboard-openable */
.cr-nav__item--drop:hover > .cr-mega,
.cr-nav__item--drop:focus-within > .cr-mega { display: block; }
.cr-mega__label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted-2); margin-bottom: 14px; }
.cr-mega__link { display: block; padding: 7px 0; font-size: 14.5px; font-weight: 600; color: #3A3F52; transition: color var(--cr-ease); }
.cr-mega--simple .cr-mega__link { padding: 8px 0; }
.cr-mega__link:hover { color: var(--cr-orange); }
.cr-mega__card { display: block; border-radius: 12px; overflow: hidden; background: var(--cr-light); border: 1px solid var(--cr-line); transition: border-color var(--cr-ease); }
.cr-mega__card:hover { border-color: var(--cr-orange); }
.cr-mega__card-img { height: 120px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px; }
.cr-mega__card-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.cr-mega__card-txt { display: block; padding: 12px 14px; }
.cr-mega__card-title { font-weight: 800; font-size: 14px; display: block; }
.cr-mega__card-sub { font-size: 12.5px; color: var(--cr-muted); margin-top: 2px; display: block; }
.cr-mega__card--wide { display: flex; gap: 16px; align-items: center; padding: 16px; }
.cr-mega__card--wide .cr-mega__card-img { width: 96px; height: 96px; border-radius: 10px; padding: 8px; flex: none; }
.cr-mega__card--wide .cr-mega__card-title { font-size: 15px; }
.cr-mega__card--wide .cr-mega__card-sub { font-size: 13px; line-height: 1.4; margin-top: 4px; }

/* --- Coupon / voucher bar --- */
.cr-coupon { background: var(--cr-coupon-bg); border-bottom: 1px solid var(--cr-coupon-bd); }
.cr-coupon__in { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; padding-top: 10px; padding-bottom: 10px; }
.cr-coupon svg { stroke: var(--cr-orange-dk); }
.cr-coupon__t { font-size: 13.5px; color: #7A4A12; font-weight: 600; }
.cr-coupon__t2 { color: #9A7142; }
.cr-coupon__code { display: inline-flex; align-items: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .05em; color: var(--cr-orange-dk); background: #fff; border: 1.5px dashed #E0A86A; border-radius: 7px; padding: 5px 12px; }

/* --- Mobile off-canvas nav (class-based; [hidden] is defeated by Salient's
       author styles on aside, so control display via .cr-nav-open) --- */
.cr-mobile-overlay, .cr-mobile-nav { display: none; }
body.cr-nav-open .cr-mobile-overlay { display: block; }
body.cr-nav-open .cr-mobile-nav { display: block; }
.cr-mobile-overlay { position: fixed; inset: 0; background: rgba(12,13,26,.45); z-index: 199; }
.cr-mobile-nav { position: fixed; top: 0; right: 0; width: 320px; max-width: 86vw; height: 100%; background: #fff; z-index: 200; box-shadow: -20px 0 50px -20px rgba(20,24,43,.4); overflow-y: auto; }
.cr-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--cr-line); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: var(--cr-ink); }
.cr-mobile-close { border: none; background: transparent; cursor: pointer; color: var(--cr-ink); display: flex; }
body.cr-nav-open { overflow: hidden; }

/* --- Header responsive --- */
@media (max-width: 1099px) {
  .cr-nav { display: none; }
  .cr-burger { display: flex; }
  .cr-cc { display: none; }
  .cr-header-row { gap: 16px; flex-wrap: wrap; }
  .cr-search { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 600px) {
  .cr-topbar__left span:last-child { display: none; }
  .cr-basket__txt { display: none; }
  .cr-header-row { padding-top: 14px; padding-bottom: 14px; }
}

/* ------------------------------------------------------------------ *
 * FOOTER — Salient NATIVE footer (widget areas + Theme Options),
 * styled to match the design. Brand = Custom HTML widget (.crf-*),
 * link columns = Nav Menu widgets, copyright = Theme Options.
 * ------------------------------------------------------------------ */
.cr-site #footer-outer { background: var(--cr-ink); color: var(--cr-on-dark); }
.cr-site #footer-outer .container { max-width: var(--cr-maxw); padding-left: var(--cr-gut); padding-right: var(--cr-gut); width: auto; }
.cr-site #footer-widgets { padding: 56px 0 0; }
.cr-site #footer-widgets .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin: 0; padding-top: 0; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.cr-site #footer-widgets .row::before, .cr-site #footer-widgets .row::after { display: none !important; content: none !important; }
.cr-site #footer-widgets .row .col { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.cr-site #footer-widgets .widget { margin: 0; padding: 0; border: none; }
.cr-site #footer-widgets .widget + .widget { margin-top: 18px; }
/* Brand block (Custom HTML widget) */
.cr-site #footer-widgets .crf-logo { height: 52px; width: auto; max-width: none; border-radius: 6px; margin-bottom: 20px; display: block; }
.crf-phone { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.crf-phone-ic { width: 44px; height: 44px; border-radius: 10px; background: rgba(247,148,30,.15); display: flex; align-items: center; justify-content: center; flex: none; }
.crf-phone-ic svg { width: 20px; height: 20px; stroke: var(--cr-orange); }
.crf-phone-txt { line-height: 1.3; display: flex; flex-direction: column; }
.crf-phone-lbl { font-size: 12px; color: var(--cr-muted-2); font-weight: 600; }
.crf-phone-num { font-family: 'Archivo', sans-serif; font-size: 20px; font-weight: 800; color: #fff; }
.crf-email { color: var(--cr-orange); font-weight: 700; font-size: 15px; display: block; margin-bottom: 20px; transition: color var(--cr-ease); }
.crf-email:hover { color: #fff; }
.crf-addr-lbl { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-muted-2); margin-bottom: 6px; }
.crf-addr { font-size: 14px; line-height: 1.5; color: var(--cr-on-dark); font-style: normal; }
/* Link columns (Nav Menu widgets) */
.cr-site #footer-widgets .widget .widgettitle, .cr-site #footer-widgets .widget h4 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: #fff; margin: 0 0 18px; }
.cr-site #footer-widgets .widget ul.menu, .cr-site #footer-widgets .widget ul { list-style: none; margin: 0; padding: 0; }
.cr-site #footer-widgets .widget ul.menu li { margin: 0; }
.cr-site #footer-widgets .widget ul.menu li a { display: block; font-size: 14px; padding: 6px 0; color: var(--cr-on-dark); transition: color var(--cr-ease); }
.cr-site #footer-widgets .widget ul.menu li a:hover { color: var(--cr-orange); }
.crf-chip { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; background: rgba(31,138,91,.15); border: 1px solid rgba(31,138,91,.35); color: var(--cr-green-lt); font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 8px; }
.crf-chip svg { width: 14px; height: 14px; stroke: var(--cr-green-lt); stroke-width: 2.4; }
/* Copyright bar (Theme Options copyright text) */
.cr-site #footer-outer #copyright { background: var(--cr-ink); border-top: none; padding: 24px 0 40px; }
.cr-site #footer-outer #copyright .col { width: 100% !important; margin: 0 !important; float: none !important; }
.cr-site #footer-outer #copyright p { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--cr-muted); line-height: 1.5; }
.cr-site #footer-outer #copyright .crf-pay { height: 30px; width: auto; max-width: none; background: #fff; padding: 5px 10px; border-radius: 7px; display: inline-block; }

@media (max-width: 900px) { .cr-site #footer-widgets .row { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .cr-site #footer-widgets .row { grid-template-columns: 1fr; } .cr-site #footer-outer #copyright p { flex-direction: column; align-items: flex-start; } }

/* ================================================================== *
 * HOMEPAGE SECTIONS (cr_* WPBakery elements)
 * ================================================================== */
.cr-home { overflow-x: hidden; }
/* Match the design's tight default line-height (Salient's body LH inflates labels).
   Elements with their own line-height keep it (higher specificity). */
.cr-home .cr-section { line-height: 1.25; }
/* Full-bleed: each section spans the viewport; .cr-inner re-centres content. */
.cr-home .cr-section { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; }
/* Neutralise Salient's content column padding/margins on the homepage. */
.cr-home .container-wrap, .cr-home #content { padding: 0 !important; }
.cr-home .post .entry-content, .cr-home .wpb_text_column { margin: 0; }
/* No row gaps / column padding between full-bleed homepage sections. */
.cr-home .wpb_row, .cr-home .vc_row { margin-bottom: 0 !important; }
.cr-home .wpb_column > .vc_column-inner, .cr-home .vc_col-sm-12 > .vc_column-inner { padding: 0 !important; }
.cr-home .wpb_wrapper { margin: 0 !important; }
/* Hide Salient page-title header on the homepage (the wrap carries an inline 350px height). */
.cr-home #page-header-wrap, .cr-home #page-header-bg, .cr-home .page-header-no-bg { display: none !important; height: 0 !important; }

/* extra icon sizes */
.cr-i15 { width: 15px; height: 15px; } .cr-i16 { width: 16px; height: 16px; }
.cr-i18 { width: 18px; height: 18px; } .cr-i22 { width: 22px; height: 22px; }
.cr-i26 { width: 26px; height: 26px; } .cr-i30 { width: 30px; height: 30px; }

/* shared section pieces */
.cr-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-orange); margin-bottom: 8px; }
.cr-eyebrow--muted { color: var(--cr-muted-2); letter-spacing: .08em; }
.cr-h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 36px; letter-spacing: -.02em; color: var(--cr-ink); margin: 0; }
.cr-h2--sm { font-size: 32px; } .cr-h2--tight { line-height: 1.1; }
.cr-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.cr-sec-head--wrap { flex-wrap: wrap; margin-bottom: 30px; }
.cr-sec-head--mid { align-items: center; margin-bottom: 26px; }
.cr-viewall { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--cr-blue); transition: color var(--cr-ease); }
.cr-viewall:hover { color: var(--cr-orange); }
.cr-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15.5px; padding: 16px 28px; border-radius: var(--cr-radius-btn); cursor: pointer; transition: background var(--cr-ease), border-color var(--cr-ease), color var(--cr-ease); }
.cr-btn--primary { background: var(--cr-orange); color: #fff; }
.cr-btn--primary:hover { background: var(--cr-orange-dk); color: #fff; }
.cr-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.cr-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; }
.cr-btn--ink { background: var(--cr-ink); color: #fff; padding: 14px 24px; border-radius: 10px; font-size: 14.5px; }
.cr-btn--ink:hover { background: var(--cr-blue); color: #fff; }

/* ----- HERO ----- */
.cr-hero { background: var(--cr-navy); overflow: hidden; }
.cr-hero__glow { position: absolute; border-radius: 50%; }
.cr-hero__glow--a { top: -180px; right: -120px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(247,148,30,.22), transparent 65%); }
.cr-hero__glow--b { bottom: -220px; left: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(46,49,146,.55), transparent 68%); }
.cr-hero__grid { position: relative; padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.cr-hero__badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(247,148,30,.14); border: 1px solid rgba(247,148,30,.35); color: var(--cr-amber); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 99px; margin-bottom: 24px; }
.cr-hero__badge svg { fill: var(--cr-orange); }
.cr-hero__title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 58px; line-height: 1.02; letter-spacing: -.02em; color: #fff; margin: 0 0 22px; }
.cr-hero__title span { color: var(--cr-orange); }
.cr-hero__text { font-size: 18px; line-height: 1.6; color: var(--cr-on-dark); max-width: 520px; margin: 0 0 34px; }
.cr-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; }
.cr-hero__trust { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cr-hero__mib { display: flex; align-items: center; gap: 11px; }
.cr-hero__mib-ic { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; padding: 5px; }
.cr-hero__mib-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cr-hero__mib-txt { font-size: 13.5px; color: var(--cr-on-dark); font-weight: 600; line-height: 1.3; }
.cr-hero__sep { width: 1px; height: 38px; background: rgba(255,255,255,.14); }
.cr-hero__stat-n { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; color: #fff; line-height: 1.2; }
.cr-hero__stat-l { font-size: 13px; color: var(--cr-muted-2); font-weight: 600; }
.cr-hero__media { position: relative; display: flex; align-items: center; justify-content: center; }
.cr-hero__halo { 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%); }
.cr-hero__img { position: relative; width: 330px; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.cr-hero__chip { position: absolute; bottom: 8px; right: 8px; 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-hero__chip-ic { width: 42px; height: 42px; border-radius: 10px; background: #FFF3E3; display: flex; align-items: center; justify-content: center; flex: none; }
.cr-hero__chip-t { font-weight: 800; font-size: 14.5px; color: var(--cr-ink); }
.cr-hero__chip-s { font-size: 13px; color: var(--cr-muted); font-weight: 600; }
.cr-hero__chip-s span { color: var(--cr-orange); font-weight: 800; }

/* ----- TRUST BAR ----- */
.cr-trust { background: #fff; border-bottom: 1px solid var(--cr-line); }
.cr-trust__grid { padding-top: 22px; padding-bottom: 22px; display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.cr-trust__item { display: flex; align-items: center; gap: 13px; padding: 8px 14px; }
.cr-trust__item + .cr-trust__item { border-left: 1px solid var(--cr-line); }
.cr-trust__t { font-weight: 800; font-size: 14px; line-height: 1.25; }
.cr-trust__s { font-size: 12.5px; color: var(--cr-muted); line-height: 1.25; }
.cr-trust__s.is-accent { color: var(--cr-orange); font-weight: 700; }

/* ----- TOP CATEGORIES ----- */
.cr-cats { background: var(--cr-light); padding: 64px 0; }
.cr-cats__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cr-cat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; overflow: hidden; transition: border-color var(--cr-ease), box-shadow var(--cr-ease); }
.cr-cat:hover { border-color: var(--cr-orange); box-shadow: var(--cr-shadow-card); }
.cr-cat__head { display: flex; align-items: center; gap: 20px; padding: 24px 24px 18px; }
.cr-cat__ic { width: 104px; height: 104px; flex: none; background: var(--cr-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.cr-cat__ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cr-cat__title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 21px; color: var(--cr-ink); margin: 0 0 4px; }
.cr-cat__sub { font-size: 13px; color: var(--cr-muted); font-weight: 600; }
.cr-cat__list { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.cr-cat__li { font-size: 13.5px; color: var(--cr-body); padding: 6px 0; border-top: 1px solid var(--cr-line-2); }
.cr-cat__li--spacer { visibility: hidden; }
.cr-cat__foot { padding: 16px 24px; border-top: 1px solid var(--cr-line-2); display: flex; align-items: center; justify-content: space-between; }
.cr-cat__foot span { font-weight: 800; font-size: 14px; color: var(--cr-blue); }

/* ----- PROMO SPLIT ----- */
.cr-promo { background: #fff; padding: 0 0 64px; }
.cr-promo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cr-promo__cc { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(120deg, var(--cr-blue), #1B1D3A); padding: 42px 44px; display: flex; flex-direction: column; justify-content: center; min-height: 240px; }
.cr-promo__cc-blob { position: absolute; top: -60px; right: -40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(247,148,30,.16); }
.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-promo__h { position: relative; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; color: #fff; line-height: 1.1; margin: 0 0 12px; }
.cr-promo__h--dark { color: var(--cr-ink); line-height: 1.05; margin-bottom: 10px; }
.cr-promo__p { position: relative; font-size: 15.5px; color: #C7CADE; line-height: 1.55; max-width: 380px; margin: 0 0 24px; }
.cr-promo__btn { position: relative; display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; padding: 13px 22px; border-radius: 10px; width: max-content; transition: background var(--cr-ease), color var(--cr-ease); }
.cr-promo__btn--light { background: #fff; color: var(--cr-ink); }
.cr-promo__btn--light:hover { background: var(--cr-orange); color: #fff; }
.cr-promo__btn--orange { background: var(--cr-orange); color: #fff; }
.cr-promo__btn--orange:hover { background: var(--cr-orange-dk); color: #fff; }
.cr-promo__fp { position: relative; overflow: hidden; border-radius: 18px; background: var(--cr-light); border: 1px solid var(--cr-line); padding: 38px 44px; display: flex; align-items: center; gap: 24px; min-height: 240px; }
.cr-promo__fp-txt { flex: 1; }
.cr-promo__fp-desc { font-size: 15px; color: var(--cr-body); margin-bottom: 6px; }
.cr-promo__fp-from { font-size: 14px; color: var(--cr-muted); margin-bottom: 22px; }
.cr-promo__fp-from span { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; color: var(--cr-blue); vertical-align: -2px; }
.cr-promo__fp-img { width: 170px; flex: none; align-self: stretch; background: #fff; border-radius: 14px; border: 1px solid var(--cr-line); display: flex; align-items: center; justify-content: center; padding: 14px; }
.cr-promo__fp-img img { max-width: 100%; max-height: 160px; object-fit: contain; }

/* ----- PRODUCT TABS ----- */
.cr-tabs { background: var(--cr-light); padding: 64px 0; }
.cr-tabs__nav { display: flex; gap: 6px; background: #fff; border: 1px solid var(--cr-line); padding: 6px; border-radius: 12px; }
.cr-tabs__btn { 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-tabs__btn.is-active { background: var(--cr-ink); color: #fff; }
.cr-tabs__panel { display: none; }
.cr-tabs__panel.is-active { display: block; }
.cr-pgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }

/* product card (grid) */
.cr-pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; overflow: hidden; transition: border-color var(--cr-ease), box-shadow var(--cr-ease); }
.cr-pcard:hover { border-color: var(--cr-orange); box-shadow: var(--cr-shadow-product); }
.cr-pcard__media { position: relative; padding: 22px; background: #fff; display: flex; align-items: center; justify-content: center; height: 200px; }
.cr-pcard__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; }
.cr-pcard__cat { position: absolute; top: 14px; left: 14px; background: var(--cr-blue-tint); color: var(--cr-blue); font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 5px 10px; border-radius: 99px; text-transform: uppercase; }
.cr-pcard__body { padding: 18px 20px 20px; border-top: 1px solid var(--cr-line-2); display: flex; flex-direction: column; flex: 1; }
.cr-pcard__title { font-weight: 800; font-size: 15.5px; color: var(--cr-ink); line-height: 1.3; margin-bottom: 6px; min-height: 40px; display: block; }
.cr-pcard__sku { font-size: 12px; color: var(--cr-muted-2); font-weight: 600; margin-bottom: 16px; }
.cr-pcard__foot { margin-top: auto; }
.cr-pcard__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cr-pcard__from { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; color: var(--cr-muted); align-self: baseline; margin-right: -4px; }
.cr-pcard__price-now { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; color: var(--cr-ink); }
.cr-pcard__price-ex { font-size: 12px; color: var(--cr-muted-2); font-weight: 600; }
.cr-pcard__incl { font-size: 12.5px; color: var(--cr-muted); margin-bottom: 14px; }
.cr-pcard__incl span { font-weight: 700; color: var(--cr-body); }
.cr-pcard__btns { display: flex; gap: 8px; }
.cr-btn-add { flex: 1; background: var(--cr-orange); color: #fff; border: none; font-weight: 800; font-size: 13.5px; padding: 11px 10px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--cr-ease); }
.cr-btn-add:hover { background: var(--cr-orange-dk); color: #fff; }
.cr-btn-buy { flex: 1; background: var(--cr-ink); color: #fff; border: none; font-weight: 800; font-size: 13.5px; padding: 11px 10px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--cr-ease); }
.cr-btn-buy:hover { background: var(--cr-blue); color: #fff; }

/* ----- YOU MAY ALSO LIKE (scroller) ----- */
.cr-also { background: #fff; padding: 60px 0; }
.cr-also__arrows { display: flex; gap: 10px; }
.cr-also__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--cr-line-3); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--cr-ink); transition: border-color var(--cr-ease); }
.cr-also__arrow:hover { border-color: var(--cr-orange); }
.cr-also__track { display: flex; gap: 20px; overflow-x: auto; padding: 6px 2px 18px; scroll-behavior: smooth; }
.cr-scard { flex: none; width: 260px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cr-line); border-radius: 16px; overflow: hidden; transition: border-color var(--cr-ease), box-shadow var(--cr-ease); }
.cr-scard:hover { border-color: var(--cr-orange); box-shadow: 0 18px 36px -22px rgba(20,24,43,.28); }
.cr-scard__media { padding: 20px; height: 180px; display: flex; align-items: center; justify-content: center; }
.cr-scard__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; }
.cr-scard__body { padding: 16px 18px 18px; border-top: 1px solid var(--cr-line-2); }
.cr-scard__cat { font-size: 11px; color: var(--cr-muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.cr-scard__title { font-weight: 800; font-size: 14.5px; color: var(--cr-ink); line-height: 1.3; margin-bottom: 12px; min-height: 38px; display: block; }
.cr-scard__foot { display: flex; align-items: center; justify-content: space-between; }
.cr-scard__price { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--cr-ink); }
.cr-scard__add { width: 40px; height: 40px; border-radius: 10px; background: var(--cr-orange); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--cr-ease); }
.cr-scard__add:hover { background: var(--cr-orange-dk); color: #fff; }

/* ----- MADE IN BRITAIN + TESTIMONIALS ----- */
.cr-mib { background: var(--cr-navy); padding: 64px 0; overflow: hidden; }
.cr-mib__glow { position: absolute; top: -140px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(247,148,30,.16), transparent 65%); }
.cr-mib__grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.cr-mib__badge { background: #fff; border-radius: 14px; padding: 22px 26px; display: inline-flex; align-items: center; margin-bottom: 26px; }
.cr-mib__badge img { height: 54px; width: auto; }
.cr-mib__h { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; color: #fff; line-height: 1.1; margin: 0 0 16px; }
.cr-mib__p { font-size: 16px; color: var(--cr-on-dark); line-height: 1.6; max-width: 440px; }
.cr-mib__right { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cr-mib__col { display: flex; flex-direction: column; gap: 18px; }
.cr-quote { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px; }
.cr-quote--lg { padding: 26px; }
.cr-quote__mark { display: block; margin-bottom: 14px; fill: var(--cr-orange); }
.cr-quote__t { font-size: 14px; color: #E4E6F0; line-height: 1.5; margin: 0 0 12px; }
.cr-quote--lg .cr-quote__t { font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; }
.cr-quote__by { font-weight: 800; font-size: 13.5px; color: #fff; }
.cr-quote--lg .cr-quote__by { font-size: 14px; }
.cr-quote__by span { color: var(--cr-muted-2); font-weight: 600; }

/* ----- UK DELIVERY ----- */
.cr-deliv { background: #fff; padding: 64px 0; }
.cr-deliv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cr-deliv .cr-eyebrow { margin-bottom: 10px; }
.cr-deliv .cr-h2 { font-size: 34px; line-height: 1.1; margin-bottom: 16px; }
.cr-deliv__p { font-size: 16px; color: var(--cr-body); line-height: 1.6; margin: 0 0 26px; max-width: 520px; }
.cr-deliv__rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.cr-deliv__row { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--cr-ink); }
.cr-deliv__ic { flex: none; margin-top: 1px; }
.cr-deliv__ic--ok { color: var(--cr-green); }
.cr-deliv__ic--no { color: var(--cr-red); }
.cr-deliv__map { position: relative; border-radius: 18px; background: var(--cr-light); border: 1px solid var(--cr-line); padding: 36px; min-height: 340px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cr-deliv__dots { position: absolute; inset: 0; background-image: radial-gradient(#dfe3ec 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: .7; }
.cr-deliv__uk { position: relative; height: 300px; width: auto; filter: drop-shadow(0 14px 26px rgba(46,49,146,.18)); }
.cr-deliv__pin { position: absolute; bottom: 24px; left: 24px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px -12px rgba(20,24,43,.3); padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--cr-ink); }
.cr-deliv__pin-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cr-orange); display: inline-block; flex: none; }

/* ----- CTA BAND ----- */
.cr-cta { background: var(--cr-orange); padding: 48px 0; }
.cr-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cr-cta__h { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 30px; color: #fff; line-height: 1.1; margin: 0 0 8px; }
.cr-cta__p { font-size: 16px; color: #fff; opacity: .92; margin: 0; }
.cr-cta__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.cr-cta__phone { background: var(--cr-ink); color: #fff; font-size: 16px; padding: 16px 26px; }
.cr-cta__phone:hover { background: var(--cr-ink-deep); color: #fff; }
.cr-cta__contact { background: #fff; color: var(--cr-ink); font-size: 16px; padding: 16px 26px; }
.cr-cta__contact:hover { background: var(--cr-navy); color: #fff; }

/* ----- homepage responsive ----- */
@media (max-width: 1080px) {
  .cr-hero__grid, .cr-mib__grid, .cr-deliv__grid { grid-template-columns: 1fr; }
  .cr-hero__media { order: -1; }
  .cr-pgrid { grid-template-columns: repeat(2,1fr); }
  .cr-cats__grid { grid-template-columns: 1fr; }
  .cr-promo__grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .cr-trust__grid { grid-template-columns: repeat(2,1fr); }
  .cr-trust__item:nth-child(odd) { border-left: none; }
  .cr-trust__item { border-left: 1px solid var(--cr-line); }
  .cr-mib__right { grid-template-columns: 1fr; }
  .cr-hero__title { font-size: 44px; }
  .cr-h2 { font-size: 30px; }
}
@media (max-width: 560px) {
  .cr-pgrid { grid-template-columns: 1fr; }
  .cr-hero__title { font-size: 36px; }
  .cr-hero__grid, .cr-cats, .cr-tabs, .cr-mib, .cr-deliv { padding-top: 44px; padding-bottom: 44px; }
  .cr-cta__in { flex-direction: column; align-items: flex-start; }
  .cr-trust__grid { grid-template-columns: 1fr; }
  .cr-trust__item { border-left: none !important; }
}