/* ==========================================================================
   Corporate Gift — master stylesheet
   Palette: Black · White · Gold — Jet Black #0A0A0A dominant, White #FFFFFF
   ground, Gold #C9A24B the sole accent. Montserrat (geometric sans) throughout.
   The logo lives on WHITE, so the header is white and the footer logo sits in a
   white chip. Pill buttons, rounded cards with hover-lift, black footer.
   Single source of truth for both the public site and the admin area.
   ========================================================================== */

@font-face {
  font-family: 'Aptos';
  src: local('Aptos'), local('Aptos Display'), local('Calibri'), local('Segoe UI');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Aptos';
  src: local('Aptos Bold'), local('Aptos Display Bold'), local('Calibri Bold'), local('Segoe UI Bold');
  font-weight: 600 700; font-style: normal;
}

:root {
  /* Editorial & Luxury palette. Variable names (--ng-navy* / --ng-gold*) are kept
     because they're referenced throughout; only their VALUES changed:
     "navy" now means jet black, "navy-light" means deep burgundy, "navy-dark"
     means plum noir, and "gold" means champagne gold.
     Usage: black ~60% (dominant surfaces, headers, buttons, type),
     plum/burgundy ~25% (supporting), champagne gold ~15% (accents & CTAs). */
  --ng-navy: #0A0A0A;        /* black — dominant surfaces, footer, buttons, type */
  --ng-navy-light: #2B2B2B;  /* charcoal — supporting / raised / hovers */
  --ng-navy-dark: #000000;   /* pure black — darkest bars */
  --ng-charcoal: #1A1A1A;    /* near-black */
  --ng-gold: #C9A24B;        /* gold — the sole accent */
  --ng-gold-light: #E0C77E;  /* light gold */
  --ng-silver: #E6E6E6;      /* light on dark surfaces */
  --ng-white: #ffffff;
  --ng-off-white: #FFFFFF;   /* white ground (the logo lives on white) */
  --ng-bg: #FFFFFF;
  --ng-ink: #141414;         /* near-black ink */
  --ng-grey: #6A6A6A;        /* neutral grey body text */
  --ng-line: #E6E6E6;        /* neutral hairline */
  --ng-success: #2e7d32;
  --ng-danger: #c0392b;

  /* Back-compat aliases (older class code referenced these) */
  --ng-yellow: var(--ng-gold);

  --ng-radius: 12px;
  --ng-radius-lg: 20px;
  --ng-shadow: 0 12px 44px rgba(10, 8, 8, 0.12);
  --ng-shadow-sm: 0 2px 20px rgba(10, 8, 8, 0.08);
  --ng-maxw: 1400px;
  --ng-serif: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ng-font: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--ng-font);
  background: var(--ng-off-white);
  color: var(--ng-navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
a:hover { color: var(--ng-gold); }

h1, h2, h3 { font-family: var(--ng-serif); color: var(--ng-navy); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; letter-spacing: .015em; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }

/* Monogram mark opens content titles. Scoped to .site-main so the header,
   footer and admin chrome are untouched. Add .no-mark to opt a title out. */
.site-main h1::before,
.site-main h2::before {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-right: .4em;
  vertical-align: -.06em;
  background: url('../images/corp-trans-box.png') center / contain no-repeat;
}
.site-main h1.no-mark::before,
.site-main h2.no-mark::before { content: none; }

.wrap { width: 100%; max-width: var(--ng-maxw); margin: 0 auto; padding: 0 5%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 12px 28px; border-radius: 50px;
  font-family: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  border: none; transition: all .3s; text-align: center; line-height: 1.2;
  background: var(--ng-navy); color: var(--ng-white);
}
.btn:hover { color: var(--ng-white); text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--ng-navy); color: var(--ng-white); }
.btn--primary:hover { background: var(--ng-navy-light); }
.btn--yellow, .btn--gold { background: var(--ng-gold); color: var(--ng-navy); }
.btn--yellow:hover, .btn--gold:hover { background: var(--ng-gold-light); color: var(--ng-navy); }
.btn--ghost, .btn--outline {
  background: transparent; border: 2px solid var(--ng-navy); color: var(--ng-navy); padding: 10px 26px;
}
.btn--ghost:hover, .btn--outline:hover { background: var(--ng-navy); color: var(--ng-white); }
.btn--block { display: block; width: 100%; }
.btn--sm { padding: 7px 16px; font-size: .85rem; }
.btn--danger { background: var(--ng-danger); color: #fff; }
.btn--danger:hover { background: #b52a37; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* On dark sections (hero / corporate band) recolour buttons for contrast. */
.hero .btn--primary, .home-corporate .btn--primary { background: var(--ng-gold); color: var(--ng-navy); }
.hero .btn--primary:hover, .home-corporate .btn--primary:hover { background: var(--ng-gold-light); color: var(--ng-navy); }
.hero .btn--ghost, .home-corporate .btn--ghost { border-color: #fff; color: #fff; }
.hero .btn--ghost:hover, .home-corporate .btn--ghost:hover { background: #fff; color: var(--ng-navy); }

/* ---------- Header ---------- */
.site-header { background: var(--ng-white); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--ng-line); box-shadow: 0 2px 18px rgba(0,0,0,.05); }
.site-header__top { background: var(--ng-navy-dark); color: var(--ng-silver); text-align: center; font-size: .85rem; padding: 8px 5%; }
/* Desktop: 3-column grid keeps the logo centred regardless of side content. */
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav brand right"; align-items: center; gap: 1.5rem; padding: 1rem 5%; max-width: var(--ng-maxw); margin: 0 auto; }
.site-nav { grid-area: nav; justify-self: start; }
.site-header__brand { grid-area: brand; justify-self: center; display: inline-flex; align-items: center; color: var(--ng-navy); }
.site-header__brand:hover { color: var(--ng-navy); }
.site-header__right { grid-area: right; justify-self: end; display: flex; align-items: center; gap: 1.5rem; }
/* Inline SVG logo: wordmark = currentColor (white here), tagline keeps its tan. */
.site-logo { height: 42px; width: auto; display: block; }
.site-header__brand .site-logo { height: 56px; }
.site-header__actions { display: flex; align-items: center; gap: 1.5rem; }
.site-header__actions a { color: var(--ng-navy); font-size: 1.2rem; }
.site-header__actions a:hover { color: var(--ng-gold); }

.site-nav { display: flex; gap: 2rem; list-style: none; align-items: center; }
.site-nav a { color: var(--ng-navy); font-weight: 600; letter-spacing: .02em; }
.site-nav a:hover { color: var(--ng-gold); }
.site-nav__basket { position: relative; font-weight: 600; }

/* "Shop" dropdown holding the categories */
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  flex-direction: column; padding: .5rem 0; background: var(--ng-gold);
  box-shadow: 0 10px 24px rgba(0,0,0,.25); border-radius: 0 0 8px 8px; z-index: 1001;
}
.site-nav__item--has-dropdown:hover .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within .site-nav__dropdown { display: flex; }
.site-nav__dropdown a { padding: .55rem 1.25rem; white-space: nowrap; font-weight: 500; color: #1a1a1a; }
.site-nav__dropdown a:hover { background: rgba(0,0,0,.12); color: #000; }
.badge {
  position: absolute; top: -8px; right: -12px; background: var(--ng-gold); color: var(--ng-navy);
  font-size: .7rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}

.site-search { display: flex; background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: 50px; overflow: hidden; width: 280px; }
.site-search input { flex: 1; border: none; padding: 10px 18px; font-family: inherit; outline: none; }
.site-search button { background: var(--ng-gold); border: none; padding: 10px 18px; cursor: pointer; color: var(--ng-navy); }

.nav-toggle { display: none; background: none; border: none; color: var(--ng-navy); font-size: 1.5rem; cursor: pointer; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; max-width: var(--ng-maxw); margin: 0 auto; padding: 1rem 5%; font-size: .9rem; color: var(--ng-grey); }
.breadcrumbs a { color: var(--ng-grey); }
.breadcrumbs a:hover { color: var(--ng-gold); }
.breadcrumbs span:last-child { color: var(--ng-navy); font-weight: 500; }

/* ---------- Layout ---------- */
.site-main { display: block; min-height: 55vh; }
.section, .shop-section, .home-shop, .home-articles { padding: 3rem 5%; max-width: var(--ng-maxw); margin: 0 auto; }
.section--tint { background: var(--ng-white); max-width: none; }
.lead, .lede, .hero__lede { font-size: 1.15rem; color: var(--ng-grey); }
.section-title, .home-shop > h2, .home-articles > h2 { text-align: center; }
h2.section-title, .section-title h2 { font-size: 2.5rem; margin-bottom: .5rem; }

.grid, .card-grid { display: grid; gap: 1.6rem; }
.grid--cards, .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }

/* ---------- Cards ---------- */
.card {
  background: var(--ng-white); border-radius: var(--ng-radius-lg); overflow: hidden;
  box-shadow: var(--ng-shadow-sm); display: flex; flex-direction: column; transition: all .3s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--ng-shadow); }
.card__media, .card__img { aspect-ratio: 4 / 3; background: var(--ng-bg); overflow: hidden; }
.card__media img, .card__img img, img.card__img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card__title { font-family: var(--ng-serif); margin: 0; font-size: 1.15rem; }
.card__sub, .card__subtitle { color: var(--ng-grey); font-size: .92rem; margin: 0; }
.card__price { font-weight: 700; color: var(--ng-navy); font-size: 1.1rem; }
.card__cta, .card__link { margin-top: auto; }
/* Cards that place text directly in .card (no .card__body) still need padding. */
.card > .card__title, .card > .card__subtitle, .card > .card__price { display: block; padding: 0 1.2rem; }
.card > .card__title { padding-top: 1rem; }
.card > .card__price { padding-bottom: 1.2rem; margin-top: .3rem; }
.card > .card__subtitle:last-child { padding-bottom: 1.2rem; }

/* Category page header: dropped-down, rounded hero image, centred name + logo. */
.category-header-image { margin-top: 2rem; border-radius: var(--ng-radius-lg); overflow: hidden; }
.category-header-image img { display: block; width: 100%; height: auto; }
.category-page h1 { text-align: center; }
.category-page__logo { display: flex; justify-content: center; margin: .5rem 0 1.5rem; color: var(--ng-navy); }
.category-page__logo .site-logo { height: 54px; width: auto; }
.category-page__logo svg { height: 54px; width: auto; display: block; margin: 0 auto; }

/* Monogram corner watermark (CSS overlay — original images untouched).
   Wrap an image in .img-frame and add --sm (thumbnails) or --lg (main images).
   The monogram file lives at assets/images/monogram.svg; until it exists this
   simply renders nothing (no broken-image icon). */
.img-frame { position: relative; display: block; line-height: 0; }
.img-frame::after {
  content: ""; position: absolute; left: 10px; bottom: 10px; pointer-events: none;
  background: url('../images/corp-trans-box.png') no-repeat center / contain;
  opacity: .5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.img-frame--sm::after { width: 30px; height: 30px; left: 8px; bottom: 8px; }
.img-frame--lg::after { width: 70px; height: 70px; }

/* Category / collection card: centre the category name (and subtitle). */
.card--category .card__title,
.card--category .card__subtitle { text-align: center; }

/* Homepage "Shop our gifts" — centred logo + gold/black category cards. */
.home-shop__logo { display: flex; justify-content: center; margin: .5rem 0 1.75rem; color: var(--ng-navy); }
.home-shop__logo .site-logo { height: 54px; width: auto; }
.home-shop .card--category { background: var(--ng-gold); }
.home-shop .card--category .card__title,
.home-shop .card--category .card__subtitle { color: #000; }

/* Homepage auto-scrolling product carousel (dark — contrasts the section above). */
.home-carousel { background: var(--ng-navy); color: var(--ng-white); padding: 3.25rem 0; overflow: hidden; }
.home-carousel h2 { text-align: center; color: var(--ng-white); margin: 0 0 1.75rem; }
.marquee { overflow: hidden; width: 100%; }
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 150s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; width: 240px; margin-right: 1.5rem; color: var(--ng-white); }
.marquee__item img { width: 240px; height: 240px; object-fit: cover; border-radius: var(--ng-radius-lg); display: block; }
.marquee__title { display: block; text-align: center; margin-top: .65rem; font-weight: 600; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Homepage single featured product (light — contrasts the carousel above). */
.home-feature { background: var(--ng-bg); color: var(--ng-navy); }
.home-feature__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: 3.5rem 5%; }
.home-feature__media { display: block; }
.home-feature__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ng-radius-lg); display: block; }
.home-feature__eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--ng-gold); font-weight: 700; font-size: .85rem; margin: 0 0 .5rem; }
.home-feature__body h2 { margin: 0 0 .5rem; }
.home-feature__subtitle { color: var(--ng-grey); font-size: 1.1rem; margin: 0 0 1rem; }
.home-feature__desc { color: var(--ng-grey); margin: 0 0 1.5rem; line-height: 1.7; }
.home-article { background: var(--ng-white); }
@media (max-width: 768px) { .home-feature__inner { grid-template-columns: 1fr; } }

/* Long-form SEO content sections (alternating tone between page sections). */
.seo-section { background: var(--ng-white); padding: 3.5rem 5%; }
.seo-section--alt { background: var(--ng-bg); }
.seo-section__inner { max-width: 920px; margin: 0 auto; }
.seo-section__inner h2 { margin: 0 0 1.25rem; text-align: center; }
.seo-section__inner p { color: var(--ng-grey); line-height: 1.8; margin: 0 0 1rem; }
.seo-section__inner p:last-child { margin-bottom: 0; }

/* Product card: a smaller square thumbnail joined directly to a gold name bar
   (replaces the old "View" button). Image rounds the top corners, the gold bar
   rounds the bottom corners, and their straight sides line up. */
.card--product { background: transparent; box-shadow: none; overflow: visible; }
.card--product:hover { transform: none; box-shadow: none; }
.card--product .card__link {
  display: block; width: 100%; margin: 0; transition: transform .3s;
}
.card--product .card__link:hover { transform: translateY(-5px); }
.card--product .card__media {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ng-bg);
  border-radius: var(--ng-radius-lg) var(--ng-radius-lg) 0 0;
}
.card--product .card__namebar {
  display: block; background: var(--ng-gold); color: #1a1a1a; text-align: center;
  font-weight: 600; padding: .6rem .75rem; line-height: 1.25;
  border-radius: 0 0 var(--ng-radius-lg) var(--ng-radius-lg);
}

/* On-page shop search with the exact/any-word toggle. */
.shop-search { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.25rem 0 2rem; }
.shop-search input[type="text"] {
  flex: 1; min-width: 220px; padding: 10px 16px; border: 1px solid var(--ng-silver);
  border-radius: 50px; font-family: inherit; outline: none;
}
.shop-search__exact { display: inline-flex; align-items: center; gap: .4rem; color: var(--ng-grey); font-size: .92rem; white-space: nowrap; }

.chip, .subcategory-links a {
  display: inline-block; padding: .35rem .9rem; border-radius: 50px; background: var(--ng-white);
  border: 1px solid var(--ng-line); color: var(--ng-navy); font-size: .88rem; margin: .2rem .3rem .2rem 0;
}
.chip:hover, .subcategory-links a:hover { border-color: var(--ng-gold); color: var(--ng-gold); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(135deg, var(--ng-navy), var(--ng-navy-light)); color: var(--ng-white); padding: 4.5rem 5%; }
.hero__inner, .hero-content { max-width: var(--ng-maxw); margin: 0 auto; display: grid; gap: 2rem; align-items: center; }
.hero h1, .hero__title, .hero-text h1 { color: var(--ng-white); font-size: clamp(2.2rem, 5vw, 3.4rem); }
.hero .highlight, .hero__title .highlight {
  background: linear-gradient(135deg, var(--ng-gold), var(--ng-gold-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .lead, .hero__lede, .hero p { color: rgba(255,255,255,.82); }
.hero__cta, .hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero--split .hero__inner, .hero--split { grid-template-columns: 1fr; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--ng-navy); }
.input,
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field input[type=password], .field textarea, .field select,
.field__input, .checkout-form input, .contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--ng-line); border-radius: var(--ng-radius);
  font: inherit; background: var(--ng-white); color: var(--ng-ink);
}
.field input:focus, .field textarea:focus, .field select:focus,
.field__input:focus { outline: none; border-color: var(--ng-gold); box-shadow: 0 0 0 3px rgba(212,168,83,.18); }
.field textarea, .contact-form textarea { min-height: 130px; resize: vertical; }
.field .hint, .field-note, .char-counter { color: var(--ng-grey); font-size: .85rem; }

/* ---------- Product page ---------- */
.product, .product-layout { display: grid; gap: 1.8rem; }
.gallery__main, .product-gallery__main { border-radius: var(--ng-radius-lg); overflow: hidden; border: 1px solid var(--ng-line); background: #fff; }
.gallery__thumbs, .product-gallery__thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery__thumbs img, .product-gallery__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; }
.gallery__thumbs img.is-active, .product-gallery__thumbs img.is-active { border-color: var(--ng-gold); }
.product-subtitle { color: var(--ng-grey); font-size: 1.05rem; margin-bottom: .8rem; }
.option-group { border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 1rem 1.1rem; margin-bottom: 1rem; background: #fff; }
.option-group legend { font-family: var(--ng-serif); font-weight: 700; padding: 0 .4rem; }
.option-value, .option-row { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; }
.price-display, .price-line .price-display { font-size: 2rem; font-weight: 700; color: var(--ng-navy); font-family: var(--ng-serif); }
.collapsible > summary, details.personalisation-card > summary, .per-box-delivery > summary, .seo-readmore > summary {
  cursor: pointer; font-weight: 600; padding: .7rem 0; color: var(--ng-navy);
}
details.personalisation-card, details.per-box-delivery, details.seo-readmore { border-top: 1px solid var(--ng-line); margin-top: 1rem; }
.product-description { margin-top: 1.5rem; }
.seo-readmore__body, .article-seo-block { color: var(--ng-grey); font-size: .92rem; }

/* ---------- Tables / basket / checkout ---------- */
.table, .basket-table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td, .basket-table th, .basket-table td { text-align: left; padding: .85rem .7rem; border-bottom: 1px solid var(--ng-line); vertical-align: top; }
.table th, .basket-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ng-grey); }
.totals, .basket-summary, .checkout-summary { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.totals__grand { font-size: 1.4rem; font-weight: 700; font-family: var(--ng-serif); }
.basket-summary, .checkout-summary { background: #fff; border-radius: var(--ng-radius-lg); padding: 1.3rem 1.4rem; box-shadow: var(--ng-shadow-sm); }
.basket-actions, .basket-qty-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.quantity-field input { max-width: 110px; }

/* ---------- Notices / alerts ---------- */
.notice, .alert { padding: 1rem 1.5rem; border-radius: var(--ng-radius); margin: 1rem 0; }
.notice--warn { background: #fff7d6; border: 1px solid #f0db7a; color: #6b5800; }
.notice--error, .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.notice--ok, .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
/* Neutral hand-off. Used when we are about to OFFER the shopper something
   (a later dispatch date, an enquiry) rather than refuse them — so it must not
   borrow the red of an error or the green of a success. */
.notice--info { background: #eaf1f8; border: 1px solid #c3d6e8; color: #1f3d5c; }

/* ---------- Modal (no native dialogs) ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,24,37,.55); display: none; align-items: center; justify-content: center; z-index: 9000; padding: 1rem; }
.modal-backdrop.is-open { display: flex; }
.modal { background: #fff; border-radius: var(--ng-radius-lg); max-width: 480px; width: 100%; padding: 1.6rem; box-shadow: var(--ng-shadow); }
.modal h3 { font-family: var(--ng-serif); }
.modal__actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem; }

/* ---------- Articles ---------- */
.article-body, .article__body { max-width: 760px; margin: 0 auto; font-size: 1.08rem; }
.article-body h1, .article__body h1 { font-size: clamp(2rem,4vw,2.6rem); }
.article-body h2 { margin-top: 1.6em; }
.article-body p { margin: 0 0 1.1em; }
.article-single__hero img, .article-single__hero { border-radius: var(--ng-radius-lg); overflow: hidden; margin-bottom: 1.5rem; }
/* Hero at half width/height — a quarter of its previous on-screen area. The
   source files are only 600px wide, so full-bleed was upscaling them anyway.
   Centred, and left full width on phones where half would be too small. */
.article-single .img-frame--lg { width: 50%; margin-inline: auto; }
@media (max-width: 768px) { .article-single .img-frame--lg { width: 100%; } }
.article-single__back { display: inline-block; margin-top: 2rem; }
.article-single__meta { color: var(--ng-grey); font-size: .95rem; margin: 0 0 1.5rem; }

/* ---------- Glossary ---------- */
/* Auto-linked terms inside article prose. Underlined rather than coloured so a
   paragraph with several of them still reads as prose, not as a link farm. */
.glossary-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--ng-gold);
  text-underline-offset: .18em;
  cursor: help;
}
.glossary-link:hover { color: var(--ng-gold); text-decoration-style: solid; }

.glossary-az { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2.5rem; }
.glossary-group { margin-bottom: 2.5rem; }
.glossary-group__letter {
  font-size: 1.5rem; color: var(--ng-gold); border-bottom: 1px solid var(--ng-line);
  padding-bottom: .4rem; margin-bottom: 1rem; scroll-margin-top: 6rem;
}
.glossary-list { margin: 0; }
.glossary-list__row { padding: .9rem 0; border-bottom: 1px solid var(--ng-line); }
.glossary-list__row dt { font-weight: 700; font-size: 1.05rem; }
.glossary-list__row dt a:hover { color: var(--ng-gold); }
.glossary-list__row dd { margin: .25rem 0 0; color: var(--ng-grey); line-height: 1.6; }

.glossary-single { max-width: 860px; }
.glossary-single__crumb { color: var(--ng-grey); font-size: .9rem; margin-bottom: .5rem; }
.glossary-single__crumb a:hover { color: var(--ng-gold); }
.glossary-single__short { margin-bottom: 1.5rem; }
.glossary-single__body { margin-left: 0; }
.glossary-single__back { display: inline-block; margin-top: 2rem; }

.glossary-mentions { margin-top: 3rem; }
.glossary-mentions__list { list-style: none; padding: 0; margin: 0; }
.glossary-mentions__list li { padding: .8rem 0; border-bottom: 1px solid var(--ng-line); }
.glossary-mentions__list a { font-weight: 600; }
.glossary-mentions__list a:hover { color: var(--ng-gold); }
.glossary-mentions__desc { display: block; color: var(--ng-grey); font-size: .92rem; margin-top: .2rem; }

/* Shared "related gifts" block — glossary entries and articles both use it. */
.related-gifts { margin-top: 3rem; }
.related-gifts__heading { font-size: 1.6rem; margin-bottom: .4rem; }
.related-gifts__intro { color: var(--ng-grey); margin-bottom: 1.4rem; }

/* ---------- Corporate / process ---------- */
.process-steps { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 2rem; }
.process-step { background: #fff; border-radius: var(--ng-radius-lg); padding: 1.6rem; box-shadow: var(--ng-shadow-sm); }
.process-step__num { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--ng-gold), var(--ng-gold-light)); color: var(--ng-navy); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1rem; }
.process-step__title { font-family: var(--ng-serif); }
.home-corporate { background: linear-gradient(135deg, var(--ng-navy), var(--ng-navy-light)); color: #fff; }
.home-corporate__inner { max-width: var(--ng-maxw); margin: 0 auto; padding: 3.5rem 5%; text-align: center; }
.home-corporate h2 { color: #fff; }

/* ---------- SEO footer text ---------- */
.seo-footer-text { color: var(--ng-grey); font-size: .92rem; max-width: var(--ng-maxw); margin: 0 auto; padding: 2rem 5%; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ng-navy); color: var(--ng-white); margin-top: 4rem; }
.site-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; padding: 4rem 5%; max-width: var(--ng-maxw); margin: 0 auto; }
/* Logo lives on white — the footer is black, so give it a white chip.
   Selector is scoped through .site-footer__col so it outranks the generic
   `.site-footer__col a` link rule below, which would otherwise force
   display:block and flatten the padding. */
.site-footer__col a.site-footer__brand { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; background: var(--ng-white); padding: 18px 16px; border-radius: 10px; }
.site-footer__col a.site-footer__brand .site-logo { height: 76px; width: auto; max-width: 100%; object-fit: contain; }
.site-footer__col h4 { color: var(--ng-gold); margin-bottom: 1.2rem; font-size: 1.1rem; }
.site-footer__col p { color: var(--ng-silver); margin-bottom: 1.2rem; line-height: 1.7; }
.site-footer__col a { color: var(--ng-silver); display: block; padding: .35rem 0; }
.site-footer__col a:hover { color: var(--ng-gold); }
.site-footer__social { display: flex; gap: 1rem; }
.site-footer__social a { width: 40px; height: 40px; background: var(--ng-navy-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.site-footer__social a:hover { background: var(--ng-gold); color: var(--ng-navy); }
.site-footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 5%; border-top: 1px solid var(--ng-navy-light); max-width: var(--ng-maxw); margin: 0 auto; color: var(--ng-silver); font-size: .9rem; }
.site-footer__legal a { color: var(--ng-silver); }
.site-footer__legal a:hover { color: var(--ng-gold); }

/* ==========================================================================
   ADMIN AREA (same tokens; navy/gold)
   ========================================================================== */
.admin-body { background: var(--ng-bg); color: var(--ng-ink); }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-side { background: var(--ng-navy); color: #fff; padding: 1rem .8rem; }
.admin-side__brand { font-family: var(--ng-serif); color: var(--ng-gold); font-weight: 700; font-size: 1.2rem; display: block; padding: .4rem .6rem 1rem; }
.admin-side nav a { display: block; color: rgba(255,255,255,.85); padding: .6rem .75rem; border-radius: 10px; font-size: .95rem; }
.admin-side nav a:hover, .admin-side nav a.is-active { background: var(--ng-navy-light); color: var(--ng-gold); text-decoration: none; }
.admin-main { padding: 1.6rem 1.8rem 3rem; min-width: 0; }
.admin-topbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.admin-topbar h1 { margin: 0; font-size: 1.6rem; }
.admin-topbar__user { margin-left: auto; color: var(--ng-grey); font-size: .9rem; }
.admin-card { background: #fff; border: 1px solid var(--ng-line); border-radius: var(--ng-radius-lg); box-shadow: var(--ng-shadow-sm); padding: 1.3rem 1.4rem; margin-bottom: 1.3rem; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 1rem; }
.stat { background: #fff; border: 1px solid var(--ng-line); border-radius: var(--ng-radius-lg); padding: 1.2rem 1.3rem; }
.stat__num { font-family: var(--ng-serif); font-size: 2.1rem; font-weight: 700; color: var(--ng-navy); }
.stat__label { color: var(--ng-grey); font-size: .9rem; }
.admin-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--ng-line); margin-bottom: 1.2rem; flex-wrap: wrap; }
.tabs a { padding: .6rem 1.1rem; border-radius: 12px 12px 0 0; color: var(--ng-grey); }
.tabs a.is-active { background: #fff; color: var(--ng-navy); font-weight: 700; border: 1px solid var(--ng-line); border-bottom-color: #fff; margin-bottom: -1px; }
.pill { display: inline-block; padding: .2rem .7rem; border-radius: 50px; font-size: .78rem; font-weight: 700; }
.pill--new { background: #e7f0ff; color: #14438a; }
.pill--paid, .pill--published, .pill--approved, .pill--complete { background: #d4edda; color: #155724; }
.pill--pending, .pill--processing { background: #fff7d6; color: #6b5800; }
.pill--failed, .pill--rejected, .pill--cancelled { background: #f8d7da; color: #721c24; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ng-navy), var(--ng-navy-light)); padding: 1rem; }
.login-card { background: #fff; border-radius: var(--ng-radius-lg); padding: 2.2rem; width: 100%; max-width: 390px; box-shadow: var(--ng-shadow); }
.login-card h1 { text-align: center; font-size: 1.8rem; }
.repeater-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.repeater-row input { flex: 1; min-width: 120px; }

/* Scrollable tick list for picking related gifts (glossary + article editors). */
.admin-checklist {
  max-height: 260px; overflow-y: auto; margin: .6rem 0 1rem;
  border: 1px solid var(--ng-line); border-radius: var(--ng-radius-sm, 8px); padding: .6rem .8rem;
}
.admin-checklist__item { display: block; padding: .3rem 0; font-weight: 400; }
.admin-checklist__item input { margin-right: .5rem; }

/* ---------- Responsive ---------- */
@media (min-width: 760px) {
  .hero__inner, .hero-content { grid-template-columns: 1fr 1fr; }
  .hero--split .hero__inner, .hero--split { grid-template-columns: 1fr 1fr; }
  .product, .product-layout { grid-template-columns: 1fr 1fr; align-items: start; }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .site-search { display: none; }
}
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-header__inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ng-white); border-bottom: 1px solid var(--ng-line); box-shadow: 0 12px 24px rgba(0,0,0,.08); flex-direction: column; align-items: flex-start; padding: 1rem 5%; gap: 1rem; }
  .site-nav.is-open { display: flex; }
  .site-nav__item { display: block; width: 100%; }
  .site-nav__dropdown { position: static; display: flex; min-width: 0; padding: .25rem 1rem; box-shadow: none; border-radius: 0; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { display: flex; flex-wrap: wrap; gap: .3rem; }
  .admin-side__brand { width: 100%; }
  .admin-side nav { display: flex; flex-wrap: wrap; gap: .2rem; width: 100%; }
}
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__legal { flex-direction: column; text-align: center; }
}

/* ---------- Searchable select (admin combobox) ---------- */
.combo { position: relative; flex: 1; min-width: 220px; }
.combo__select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.combo__input { width: 100%; padding: 11px 14px; border: 1px solid var(--ng-line); border-radius: var(--ng-radius); font: inherit; background: var(--ng-white); color: var(--ng-ink); }
.combo__input:focus { outline: none; border-color: var(--ng-gold); box-shadow: 0 0 0 3px rgba(212,168,83,.18); }
.combo__list { display: none; position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 2px); max-height: 260px; overflow-y: auto; background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.combo__list.is-open { display: block; }
.combo__item { padding: .55rem .8rem; cursor: pointer; }
.combo__item:hover, .combo__item.is-active { background: rgba(212,168,83,.15); }
.combo__empty { padding: .55rem .8rem; color: var(--ng-grey); }

/* ---------- Category checkbox grid (admin product edit) ---------- */
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: .35rem .75rem; padding: .6rem .8rem; border: 1px solid var(--ng-line); border-radius: var(--ng-radius); background: var(--ng-white); max-height: 260px; overflow-y: auto; }
.checkbox-grid__item { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.checkbox-grid__item small { color: var(--ng-grey); }

/* ---------- Dispatch date widget ---------- */
.dispatch-widget { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: 1rem; }
.dispatch-widget label { flex: 1 1 260px; }
.dispatch-widget label small { display: block; font-weight: 400; }
.dispatch-widget__controls { display: inline-flex; gap: .5rem; align-items: center; }
.dispatch-widget input[type="date"] { padding: 8px 10px; border: 1px solid var(--ng-line); border-radius: var(--ng-radius); font: inherit; background: var(--ng-white); }

/* ---------- Product brand words (multi-brand packs) ---------- */
.product-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1rem; }
.product-brands__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ng-grey); }
.product-brands__chip {
  display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: var(--ng-navy-light); background: rgba(110,20,35,.08); border: 1px solid rgba(110,20,35,.22); transition: .2s;
}
.product-brands__chip:hover { background: var(--ng-gold); border-color: var(--ng-gold); color: var(--ng-navy); }
.product-article { border-top: 3px solid var(--ng-gold); }

/* ===========================================================================
   MOBILE / RESPONSIVE HARDENING
   ---------------------------------------------------------------------------
   Audited at 390px (iPhone 12/13/14 class) with every page and every basket
   state. The rules below fix what that audit found; each one records the
   problem it solves so it is not "tidied away" later.
   ========================================================================= */

/* --- 1. Grid items must be allowed to shrink -------------------------------
   A CSS Grid/Flex child defaults to min-width:auto, so it refuses to go
   narrower than its own content — which made .product-layout resolve a 387px
   track inside a 338px container and pushed the whole product page sideways.
   min-width:0 lets the track honour the container instead.                  */
.product-layout > *,
.product > *,
.cg-product__layout > *,
.hb-layout > *,
.admin-shell > *,
.admin-main { min-width: 0; }

/* Long words, URLs and SKUs must not be able to widen a column either. */
.product-detail, .cg-product__detail, .admin-main, .basket-table td { overflow-wrap: break-word; }

/* The date + button pair in the dispatch widget could not wrap, leaving ~6px
   of horizontal overflow on a narrow screen. */
.dispatch-widget__controls { flex-wrap: wrap; }

/* --- 2. Images never widen their container -------------------------------- */
img, svg, video, canvas { max-width: 100%; }

/* Form controls likewise. An <input> with no width set falls back to its
   `size` attribute (about 20 characters), which is wider than a phone once
   any container padding is taken off — that is what pushed the admin
   analytics filter past the edge. */
input, select, textarea, button { max-width: 100%; }

@media (max-width: 768px) {

  /* --- 3. Touch targets -----------------------------------------------------
     Audited heights were 19–31px. Anything you tap with a thumb wants ~44px;
     these are the site's primary navigation and actions.                    */
  .site-nav a,
  .site-nav__dropdown a { display: flex; align-items: center; min-height: 44px; width: 100%; }
  .site-nav__item > a { min-height: 44px; }
  .nav-toggle,
  .site-nav__basket { display: inline-flex; align-items: center; justify-content: center;
                      min-width: 44px; min-height: 44px; }
  .site-header__actions { display: flex; align-items: center; gap: .25rem; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn--sm { min-height: 38px; }
  /* Checkboxes and radios are 13px by default — too small to hit reliably. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* The category dropdown sits inside the open menu, so it should read as an
     indented list rather than a floating panel. */
  .site-nav__dropdown { flex-direction: column; padding-left: 1rem; }

  /* --- 4. Dense admin tables scroll rather than break the page --------------
     Admin lists carry 6–8 columns of real data (783px wide at worst). For
     staff screens a horizontal scroller is the honest answer — the data stays
     legible and the PAGE itself no longer scrolls sideways.                 */
  .admin-main .table,
  .table:not(.basket-table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-main .table th,
  .admin-main .table td,
  .table:not(.basket-table) th,
  .table:not(.basket-table) td { white-space: nowrap; }

  /* --- 5. The basket becomes stacked cards ---------------------------------
     A customer's basket is not a spreadsheet, and six columns cannot be read
     at 390px. Each row becomes a card and every cell carries its own label
     (from the td's data-label), so nothing depends on a header row that is no
     longer on screen.                                                        */
  .basket-table { display: block; }
  .basket-table thead { display: none; }
  .basket-table tbody,
  .basket-table tr { display: block; width: 100%; }
  .basket-table tr {
    border: 1px solid var(--ng-line); border-radius: 12px;
    padding: .35rem .9rem .6rem; margin-bottom: 1rem; background: var(--ng-white);
  }
  .basket-table td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: .55rem 0; border-bottom: 1px dashed var(--ng-line); text-align: right;
  }
  .basket-table td:last-child { border-bottom: 0; }
  .basket-table td::before {
    content: attr(data-label);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ng-grey); font-weight: 700; text-align: left; flex: 0 0 40%;
  }
  /* The item name and the row's controls read better full width. */
  .basket-table td[data-label="Item"],
  .basket-table td[data-label="Details"] { display: block; text-align: left; }
  .basket-table td[data-label="Item"]::before,
  .basket-table td[data-label="Details"]::before { display: block; margin-bottom: .2rem; }
  .basket-table td[data-label="Item"] { font-weight: 700; }
  /* Keep the quantity field and its Update button on one line. The label
     column is a fixed 40% everywhere else, but here that squeezed the pair
     into a two-row stack, so this cell lets the label take only what it needs. */
  .basket-table td[data-label="Quantity"]::before { flex: 0 0 auto; }
  .basket-table .basket-qty-form { display: flex; gap: .4rem; justify-content: flex-end;
                                   flex-wrap: nowrap; align-items: center; }
  .basket-table .basket-qty-form input { width: 4rem !important; min-width: 0; }
  .basket-table .basket-qty-form .btn { white-space: nowrap; }

  /* --- 6. Buttons stack instead of spilling -------------------------------- */
  .basket-actions,
  .admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .basket-actions .btn,
  .basket-actions form { flex: 1 1 100%; }
  .basket-actions .btn { width: 100%; }

  /* --- 7. Trim the chrome so content starts sooner ------------------------- */
  .section, .shop-section, .home-shop, .home-articles { padding: 2rem 5%; }
  .site-header__top { font-size: .74rem; padding: .4rem .6rem; }
}

/* --- 8. Hover is not a thing on touch --------------------------------------
   These reveal content on :hover. On a touch screen the hover state can stick
   after a tap, leaving a card stuck mid-flip or a dropdown stuck open. Gate
   them behind an actual pointer; click/tap handlers already cover touch.    */
@media (hover: none) {
  .site-nav__item--has-dropdown:hover .site-nav__dropdown { display: none; }
  .site-nav__item--has-dropdown:focus-within .site-nav__dropdown { display: flex; }
}

/* The footer's 4rem top margin is generous on a desktop page and simply reads
   as empty space at the bottom of a phone screen. */
@media (max-width: 768px) {
  .site-footer { margin-top: 1.75rem; }
}

/* Which storefront an order came from. Both sites now share one gift_orders
   table, so the list has to make the split obvious at a glance. */
.pill--ng { background: rgba(10,10,10,.08); color: var(--ng-navy); }
.pill--cg { background: rgba(201,162,75,.22); color: #6B4E14; }
.pill--warn { background: #FFF3CD; color: #8B6A00; }
.chip.is-active { background: var(--ng-navy); color: var(--ng-white); border-color: var(--ng-navy); }

/* ==========================================================================
   PAGE SCROLLBAR
   --------------------------------------------------------------------------
   Wider than the browser default, because these are long pages — a catalogue
   of several hundred products, and a hamper builder you scroll through
   properly. A bigger target is easier to grab and easier to drag accurately.

   Tune it with one number: --ng-scrollbar-w. Chrome's default is around 15px,
   so 24px is roughly half again as wide; 30px would be a true double.

   NOTE: only the WebKit browsers (Chrome, Edge, Safari) can be widened. CSS
   offers no standard way to make a scrollbar THICKER — Firefox's
   scrollbar-width accepts only auto/thin/none — so Firefox keeps its default
   width and just takes the brand colours below.

   Scoped to html/body deliberately. A blanket rule would also inflate the
   scrollbars inside small components (the homepage drag rail, the admin table
   scrollers), where a 24px bar would swamp the thing it belongs to.
   ========================================================================== */
:root { --ng-scrollbar-w: 24px; }

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--ng-scrollbar-w);
  height: var(--ng-scrollbar-w);
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #F1F1F1;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: #9A9A9A;
  border-radius: 999px;
  /* Transparent border + background-clip insets the thumb inside the track,
     so a wide bar still reads as a slim grip rather than a solid slab. */
  border: 6px solid transparent;
  background-clip: content-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--ng-navy);
  background-clip: content-box;
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background: var(--ng-gold);
  background-clip: content-box;
}

/* Firefox: cannot be widened, but can at least match the colours.

   IMPORTANT — this is guarded, and must stay guarded. `scrollbar-color` is the
   standard property, and where a browser supports BOTH it and the WebKit
   pseudo-elements, the standard one wins and ::-webkit-scrollbar is ignored
   outright. Setting it unconditionally therefore silently cancelled the width
   above, and the bar stayed at its default. Applying it only where
   ::-webkit-scrollbar does not exist keeps the two approaches out of each
   other's way. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #9A9A9A #F1F1F1; }
}

/* Touch devices use overlay scrollbars that appear only while scrolling —
   forcing a permanent 24px gutter there would just steal screen width. */
@media (pointer: coarse) {
  :root { --ng-scrollbar-w: auto; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: auto; height: auto; }
}

/* ---------------------------------------------------------------------------
   Corporate Gift product strapline (migration 018).

   The one line under the product heading that says why the item works as a
   corporate gift. It sits between the <h1> and the price, so it has to read as
   a continuation of the heading rather than as the start of the body copy —
   hence larger than body text, lighter in weight, and no bottom rule.

   It lives here rather than in phase2.css only because the rest of the
   .cg-product__* block does: that file is being edited elsewhere this week and
   a one-rule addition is not worth a merge. Both files are loaded on every
   page, style.css first, and nothing in phase2.css targets this class, so the
   load order has no bearing on it.
   ------------------------------------------------------------------------- */
.cg-product__subtitle {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ng-navy-light);
  margin: -4px 0 14px;
  max-width: 46em;
}