/* =============================================================
   Highland Cabinetry — Global Stylesheet
   Loaded after Bootstrap 5 (CDN). This file contains only what
   Bootstrap does not cover: HC design tokens, brand typography
   overrides, navbar, footer, section headings, category nav,
   and HC-specific components.
   ============================================================= */

/* ─── 1. Design Tokens ────────────────────────────────────────
   Single source of truth for brand colours, radii, shadows.
   Bootstrap variables are set via CDN so these CSS custom props
   coexist — templates may use either var(--hc-*) or BS utilities.
   ──────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --hc-bg: #fafaf8;
  --hc-warm: #f7f4ee;
  --hc-white: #ffffff;
  /* Card/input surface and heading/body text colour — also set via
     Customizer → Brand Colors (HC_COLOR_TOKENS in functions.php), which
     only prints an inline override when a value differs from these same
     defaults. Without a base value here, any card sitting on a dark
     ancestor background (e.g. .hc-styles--dark) would fall through to
     transparent instead of white on a default, un-customized install. */
  --hc-surface: #ffffff;
  --hc-heading: #143d2e;
  --hc-dark: #143d2e;
  --hc-dark2: #101f17;
  --hc-body: #1c1c1e;
  --hc-muted: #6b6b6b;
  --hc-accent: #b8892e;
  --hc-accent-d: #8e6a21;
  /* Gold for small text on LIGHT backgrounds. The brand gold (--hc-accent) is
     2.75:1 on --hc-warm, which fails AA for body-size text; this darker step
     clears 4.5:1 on both light grounds. Fills, and gold on the dark bands,
     keep using --hc-accent. */
  --hc-accent-text: color-mix(in srgb, var(--hc-accent) 74%, #000);
  --hc-border: #e2d8c7;

  /* Semantic status colours — deliberately NOT tied to --hc-accent. On the
     'sage' palette preset --hc-accent IS green, but on every other preset
     (default amber, charcoal brass, porcelain blue) it isn't, so success
     tinted with the brand accent doesn't read as "success" — it reads the
     same as any other accent-coloured UI element, and worse, sits too close
     to the red error tone for users to tell the two apart at a glance. Fixed
     hex rather than a token per preset: success/error are universal signals,
     not brand expression, so they should look the same regardless of which
     palette is active. #2e7d32 matches the green already used for ATC
     success states (see product.css, lead-form.css); the red trio matches
     the existing .woocommerce-error treatment already used elsewhere. */
  --hc-success: #2e7d32;
  --hc-success-bg: #edf7ed;
  --hc-success-border: #a5d6a7;
  --hc-error: #991b1b;
  --hc-error-bg: #fef2f2;
  --hc-error-border: #fca5a5;

  /* Radii */
  --hc-r: 6px;
  --hc-r-lg: 14px;
  --hc-r-xl: 18px;
  --hc-btn-r: 8px; /* every button, site-wide */

  /* Shadows */
  --hc-sh: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --hc-sh-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --hc-sh-lg: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.05);

  /* Typography scale */
  --hc-text-xs: 11px;
  --hc-text-sm: 13px;
  --hc-text-md: 15px;
  --hc-text-lg: 17px;
  --hc-text-xl: 20px;

  /* Spacing */
  --hc-section-py: 88px;
}

/* ─── 2. Bootstrap Base Overrides ─────────────────────────────
   Bring Bootstrap's defaults in line with HC's brand.
   ──────────────────────────────────────────────────────────── */
/* No overflow-x:hidden on html/body. It computes overflow-y to `auto`, which
   turns the body into a scroll container — and a position:sticky header then
   sticks to that container instead of the viewport, so it scrolls away. Runaway
   width is contained at the source instead (see §2b). */
body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hc-heading);
  background: var(--hc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── 2b. Horizontal overflow containment ─────────────────────
   Replaces the old html/body overflow-x:hidden, which broke the
   sticky header. Third-party checkout markup (Stripe's payment
   iframes, Select2's hidden selects) renders wider than the
   viewport on small screens; cap it where it happens instead. */
iframe,
img,
video,
canvas,
table {
  max-width: 100%;
}

/* Stripe and hCaptcha append hidden, fixed-position iframes directly to <body>,
   wider than a phone viewport. They carry inline width styles that beat an
   external stylesheet, so clamp the scrollable area at the root instead:
   overflow-x:clip contains them WITHOUT creating a scroll container, which is
   what overflow-x:hidden did — and what broke the sticky header. */
html {
  overflow-x: clip;
}

/* Select2 keeps the original <select> for screen readers, absolutely positioned
   at the field's full width — which overhangs the viewport by its left offset.
   It is off-screen by design, so clamping the width changes nothing visually. */
.select2-hidden-accessible {
  max-width: 100%;
}

/* A long unbroken string (URL, SKU, email address, a hyphen-less product
   name) in body copy has no natural break point and can push its container
   wider than the viewport on mobile — the rules above only cover replaced
   elements (iframe/img/table) and Select2's specific overhang, not plain
   text. Scoped to text-content containers rather than * so it doesn't
   affect elements that intentionally rely on nowrap (qty steppers, nav
   pills, etc.). */
p,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
.entry-content,
.woocommerce {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--hc-heading);
  line-height: 1.2;
  letter-spacing: -0.3px;
}

/* Bootstrap Reboot resets list-style — restore only when lists are inside
   content areas, not nav/UI lists where we want no bullets. */
.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}
.entry-content ul {
  list-style: disc;
}
.entry-content ol {
  list-style: decimal;
}

/* Bootstrap sets a:color to the primary/link colour — align to HC brand. */
a {
  color: inherit;
}
a:hover {
  color: inherit;
}

/* ─── 3. Bootstrap Component Overrides ───────────────────────
   Fine-tune Bootstrap components to match HC brand identity.
   ──────────────────────────────────────────────────────────── */

/* Buttons — one tier in use, per the design:
     .btn-gold     → gold gradient, dark-green text. Every primary submit
                     action site-wide (header CTA, checkout Place Order, My
                     Account forms, marketing CTAs) — one consistent
                     button system rather than a different style per page.
                     8px radius (--hc-btn-r) across the board.
   Gold never carries white text: white on this gold is 2.31:1 and fails AA,
   so every gold fill uses --hc-dark for its label. .btn-outline-primary
   (gold outline, used for secondary actions like Register) matches.
   .btn-primary (solid --hc-dark, white text) is kept defined below but no
   longer used in any template — --hc-dark reads as near-black on every
   palette preset (it also backs the announcement bar and other bands that
   must stay dark regardless of theme), so it read as an unstyled black
   button rather than a themed one. Left here rather than deleted in case a
   future design intentionally wants that solid-dark tier back. */
.btn-primary {
  --bs-btn-bg: var(--hc-dark);
  --bs-btn-border-color: var(--hc-dark);
  --bs-btn-hover-bg: var(--hc-dark2);
  --bs-btn-hover-border-color: var(--hc-dark2);
  --bs-btn-active-bg: var(--hc-dark2);
  --bs-btn-active-border-color: var(--hc-dark2);
  --bs-btn-disabled-bg: var(--hc-dark);
  --bs-btn-disabled-border-color: var(--hc-dark);
  color: var(--hc-white);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
  color: var(--hc-white);
}

/* Gold gradient CTA — no Bootstrap equivalent. Gradient endpoints are derived
   from --hc-accent so a palette swap carries the whole button with it. Lighter
   mix than a straight --hc-accent -> --hc-accent-d run: that combination drifts
   into a muddy olive/brown at the 100% stop, which does not match the design's
   consistently warm gold. */
.btn-gold {
  --bs-btn-color: var(--hc-dark);
  --bs-btn-hover-color: var(--hc-dark);
  --bs-btn-active-color: var(--hc-dark);
  --bs-btn-border-radius: var(--hc-btn-r);
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hc-accent) 55%, #fff) 0%,
    color-mix(in srgb, var(--hc-accent) 88%, #fff) 55%,
    var(--hc-accent) 100%
  );
  border: none;
  border-radius: var(--hc-btn-r);
  color: var(--hc-dark);
  font-weight: 600;
}
.btn-gold:hover,
.btn-gold:active {
  color: var(--hc-dark);
  filter: brightness(1.05);
}

.btn-outline-primary {
  --bs-btn-color: var(--hc-accent);
  --bs-btn-border-color: var(--hc-accent);
  --bs-btn-hover-bg: var(--hc-accent);
  --bs-btn-hover-border-color: var(--hc-accent);
  --bs-btn-active-bg: var(--hc-accent);
  --bs-btn-active-border-color: var(--hc-accent);
  --bs-btn-border-radius: var(--hc-btn-r);
  border-radius: var(--hc-btn-r);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  color: var(--hc-bg);
}

/* Ghost button — no Bootstrap equivalent */
.btn-ghost {
  background: transparent;
  color: var(--hc-accent);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost:hover {
  color: var(--hc-accent-d);
}

/* General button sizing to match HC spec */
.btn {
  padding: 13px 26px;
  font-size: var(--hc-text-md);
  font-weight: 500;
  border-width: 1.5px;
  border-radius: var(--hc-btn-r);
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.btn-sm {
  padding: 9px 18px;
  font-size: var(--hc-text-sm);
}

/* Card — lift on hover, HC border/radius */
.card {
  border-color: var(--hc-border);
  border-radius: var(--hc-r-lg);
  background: var(--hc-surface);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hc-sh-lg);
}

/* Forms */
.form-control,
.form-select {
  border-width: 1.5px;
  border-color: var(--hc-border);
  border-radius: var(--hc-r);
  font-size: 15px;
  padding: 10px 14px;
  color: var(--hc-heading);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--hc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 12%, transparent);
}
.form-label {
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-body);
}

/* Dropdown */
.dropdown-menu {
  border-color: var(--hc-border);
  border-radius: var(--hc-r-lg);
  box-shadow: var(--hc-sh-lg);
  padding: 8px;
}
.dropdown-item {
  border-radius: var(--hc-r);
  font-size: 14px;
  color: var(--hc-body);
  padding: 8px 10px;
  transition:
    background 0.15s,
    color 0.15s;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--hc-warm);
  color: var(--hc-heading);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--hc-warm);
  color: var(--hc-heading);
}
.dropdown-divider {
  border-color: var(--hc-border);
}

/* ─── 4. Layout Utilities ─────────────────────────────────────
   .section / .section-sm — vertical section padding.
   Use Bootstrap's .container for horizontal centering.
   ──────────────────────────────────────────────────────────── */
.section {
  padding: var(--hc-section-py) 0;
}
.section-sm {
  padding: 52px 0;
}

/* Warm vertical wash — light at the top, base bg through the middle, a hair
   darker at the bottom edge. Used by the front-page "Collections" section.
   All --hc-* tokens, so a palette swap carries through. */
.hc-bg-wash {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hc-warm) 55%, var(--hc-white)) 0%,
      var(--hc-bg) 40%,
      color-mix(in srgb, var(--hc-bg) 78%, var(--hc-border)) 100%);
}

/* ─── Customer stories / testimonials ────────────────────────
   "Loved by Homeowners & Professionals" — used on the front page
   and the About page, so it lives here rather than in front-page.css.
   ──────────────────────────────────────────────────────────── */
.hc-stories { background: var(--hc-bg); }
.hc-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hc-story {
  display: flex;
  flex-direction: column;
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  overflow: hidden;
}
.hc-story__media {
  aspect-ratio: 16 / 9.6;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--hc-dark) 20%, var(--hc-warm)) 0%,
    color-mix(in srgb, var(--hc-dark) 48%, var(--hc-warm)) 100%);
}
.hc-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-story__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.hc-story__stars {
  display: flex;
  gap: 2px;
  margin: 0 0 12px;
  color: var(--hc-accent);
}
.hc-story__quote {
  margin: 0 0 20px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--hc-heading);
}
/* Footer pinned to the bottom so the avatar rows align across cards whose
   quotes differ in length. */
.hc-story__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hc-border);
}
.hc-story__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--hc-dark) 10%, var(--hc-bg));
  color: var(--hc-heading);
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--hc-text-md);
}
.hc-story__who {
  flex: 1;
  min-width: 0;
}
.hc-story__who b {
  display: block;
  font-size: var(--hc-text-sm);
  font-weight: 600;
  color: var(--hc-heading);
}
.hc-story__who small {
  display: block;
  font-size: var(--hc-text-xs);
  line-height: 1.45;
  color: var(--hc-muted);
}
.hc-story__tag {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--hc-dark) 8%, transparent);
  font-size: 10px;
  font-weight: 600;
  color: var(--hc-heading);
}
@media (max-width: 991.98px) {
  .hc-stories__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ─── Browser-chrome frame ───────────────────────────────────
   A screenshot inside a faux browser window. Used by the homepage
   "3D Design Studio" band and the DIY Design Studio page hero.
   ──────────────────────────────────────────────────────────── */
.hc-browser {
  margin: 0 auto;
  max-width: 1040px;
  border-radius: var(--hc-r-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--hc-dark2) 72%, var(--hc-white) 4%);
  border: 1px solid color-mix(in srgb, var(--hc-white) 12%, transparent);
  box-shadow: var(--hc-sh-lg);
}
.hc-browser__screen {
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--hc-dark2) 85%, var(--hc-dark));
}
/* Until a real screenshot is set, keep the empty frame short so it does not
   dominate the section. The 16/10 ratio returns once an image is in. */
.hc-browser__screen:has(.hc-browser__placeholder) {
  aspect-ratio: auto;
  min-height: 260px;
}
.hc-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-browser__placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: color-mix(in srgb, var(--hc-white) 34%, transparent);
}
.hc-browser__placeholder p {
  margin: 0;
  font-size: var(--hc-text-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .hc-browser__screen { aspect-ratio: 4 / 3; }
}

/* Max-width cap matching Bootstrap's xl container (1200 px) */
.container,
.container-xl,
.container-xxl {
  max-width: 1200px;
}

/* ─── 5. Section Headings ─────────────────────────────────────
   .sec-label  — eyebrow text above a section heading
   .sec-title  — main h2 of a section
   .sec-sub    — subtitle paragraph
   .sec-head   — wrapper; add .center for centred layout
   ──────────────────────────────────────────────────────────── */
.sec-label {
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 600;
  color: var(--hc-accent-text);
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: 14px;
}
/* On the dark bands the light-text gold is too dim; use the brand gold there,
   which is 5.41:1 on --hc-dark2 and reads as intended. */
.hc-studio .sec-label,
.hc-styles--dark .sec-label,
.cta-band .sec-label,
.hero .sec-label {
  color: var(--hc-accent);
}

.sec-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--hc-heading);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.sec-sub {
  font-size: 16px;
  color: var(--hc-muted);
  margin-top: 10px;
  max-width: 520px;
  line-height: 1.65;
}
.sec-head {
  margin-bottom: 52px;
}
.sec-head.center {
  text-align: center;
}
.sec-head.center .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ─── 6. HC Feature Chips ─────────────────────────────────────
   Small pill tags used in hero and other sections.
   Named .hc-chip to avoid collision with Bootstrap's .badge.
   ──────────────────────────────────────────────────────────── */
.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: 100px;
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-body);
  box-shadow: var(--hc-sh);
}
.hc-chip svg {
  color: var(--hc-accent);
  flex-shrink: 0;
}

/* Compact, flat variant — dense read-only tag lists (e.g. single-product
   available colours) where the hero chip's padding and shadow are too heavy. */
.hc-chip--sm {
  padding: 4px 12px;
  font-size: var(--hc-text-xs);
  background: var(--hc-bg);
  box-shadow: none;
}

/* ─── 6b. Announcement Bar ────────────────────────────────────
   Deep-green strip above the navbar. Sits outside .hc-navbar so it
   scrolls away while the navbar stays sticky. */
.hc-announce {
  background: var(--hc-dark);
  color: var(--hc-white);
}
.hc-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}
.hc-announce__text {
  margin: 0;
  padding: 9px 0;
  font-size: var(--hc-text-sm);
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  color: inherit;
}
@media (max-width: 575.98px) {
  .hc-announce__text { font-size: var(--hc-text-xs); }
}

/* ─── 7. Navigation ───────────────────────────────────────────
   Bootstrap .navbar base + HC sticky/blur/brand overrides.
   ──────────────────────────────────────────────────────────── */

/* Stacked wordmark: "Highland" over letter-spaced "CABINETRY".
   .hc-logo-mark is still used by the footer, so it is kept below. */
.hc-navbar .hc-brand.navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.hc-brand__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hc-dark);
}
.hc-brand__sub {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--hc-accent);
}

.hc-navbar {
  background: color-mix(in srgb, var(--hc-white) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hc-border);
  min-height: 68px;
  padding-top: 0;
  padding-bottom: 0;
}

.hc-navbar .navbar-brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--hc-dark);
  gap: 10px;
}
.hc-navbar .navbar-brand:hover {
  color: var(--hc-dark);
}

.hc-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.hc-navbar .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-body);
  border-radius: var(--hc-r);
  padding: 8px 13px;
  transition:
    background 0.15s,
    color 0.15s;
}
.hc-navbar .nav-link:hover,
.hc-navbar .nav-link:focus {
  background: var(--hc-warm);
  color: var(--hc-dark);
}
.hc-navbar .nav-link.show {
  color: var(--hc-dark);
}
/* Current-page indicator (header.php's hc_is_nav_active()) — bold weight +
   warm background rather than just the hover color: color alone matches
   :hover exactly, so it reads as "cursor happens to be here" rather than
   "this is where you are" once the mouse moves away. */
.hc-navbar .nav-link.active {
  color: var(--hc-dark);
  font-weight: 700;
  background: var(--hc-warm);
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* ─── 7b. Shop dropdown ───────────────────────────────────────
   A compact three-level cascading dropdown under "Collections":
     1  the top-level collections
     2  each collection's facet groups (Type / Color / Size / …)
     3  the collection links in each group
   Levels 2 + 3 are flyouts that open to the right on hover / focus;
   a parent item carries a › arrow. On mobile the whole thing is an
   in-flow, tap-to-expand accordion inside the collapsed navbar.
   ──────────────────────────────────────────────────────────── */
.hc-drop__caret {
  margin-left: 5px;
  vertical-align: -1px;
  transition: transform 0.18s ease;
}

/* Shared row look for every level. */
.hc-drop__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.hc-drop__arrow {
  flex-shrink: 0;
  color: var(--hc-muted);
  transition: color 0.12s, transform 0.15s ease;
}

/* "View All …" and "All Collections" — a quieter, gold accent so they read as
   the escape hatch from a list rather than another sibling. */
.hc-drop__item--all .hc-drop__link {
  color: var(--hc-accent-text);
  font-weight: 600;
}

@media (min-width: 992px) {
  .hc-drop {
    position: relative;
  }

  /* Every dropdown list — level 1 and the level 2/3 flyouts — is the same card. */
  .hc-drop__menu,
  .hc-drop__submenu {
    position: absolute;
    min-width: 236px;
    max-width: 280px;
    padding: 6px;
    background: var(--hc-white);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: var(--hc-sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    z-index: 1030;
  }

  /* Rounded rows inside the padded card. */
  .hc-drop__link {
    border-radius: var(--hc-r);
  }

  /* Level 1 hangs below the toggle, with an invisible bridge across the gap so
     the pointer can travel from the toggle into the menu without it closing. */
  .hc-drop__menu {
    top: 100%;
    left: 0;
    margin-top: 8px;
  }
  .hc-drop__menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
  }
  .hc-drop:hover > .hc-drop__menu,
  .hc-drop:focus-within > .hc-drop__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .hc-drop:hover > .hc-drop__toggle .hc-drop__caret,
  .hc-drop:focus-within > .hc-drop__toggle .hc-drop__caret {
    transform: rotate(180deg);
  }

  /* Level 2 + 3 fly out to the right of their parent row, first item aligned
     with it (6px card padding cancels the row's own offset). */
  .hc-drop__submenu {
    top: -6px;
    left: 100%;
    margin-left: 6px;
  }
  .hc-drop__item--parent {
    position: relative;
  }
  .hc-drop__item--parent:hover > .hc-drop__submenu,
  .hc-drop__item--parent:focus-within > .hc-drop__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Invisible bridge over the 6px gap so the pointer can cross into the flyout. */
  .hc-drop__item--parent > .hc-drop__submenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
  }

  /* Long level-3 lists (Size has 10) scroll inside the flyout rather than
     running off the bottom of the viewport. */
  .hc-drop__submenu .hc-drop__submenu {
    max-height: min(70vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* One hover treatment for every row at every level, whether it's a leaf link
     or a parent that owns a flyout. */
  .hc-drop__item:hover > .hc-drop__link,
  .hc-drop__item:focus-within > .hc-drop__link {
    background: var(--hc-warm);
    color: var(--hc-dark);
  }
  .hc-drop__item:hover > .hc-drop__link .hc-drop__arrow,
  .hc-drop__item:focus-within > .hc-drop__link .hc-drop__arrow {
    color: var(--hc-dark);
  }
  .hc-drop__item--all:hover > .hc-drop__link,
  .hc-drop__item--all:focus-within > .hc-drop__link {
    color: var(--hc-accent-d);
  }

  .hc-drop__sep {
    height: 1px;
    margin: 6px 10px;
    background: var(--hc-border);
  }

  /* Flip level 2/3 to open leftward if they'd overflow the viewport's right
     edge (deep chains near the screen edge). */
  .hc-drop__submenu.is-flip {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
  }
  .hc-drop__submenu.is-flip::before {
    left: auto;
    right: -10px;
  }
}

/* Mobile: an in-flow accordion inside the collapsed navbar. "Collections" is a
   collapsed row that opens the list; each parent row inside opens its own child
   list. Nothing is shown until tapped. */
@media (max-width: 991.98px) {
  /* "Collections" toggle row — same look as every other accordion row. */
  .hc-drop__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .hc-drop__caret {
    margin-left: auto;
    transition: transform 0.15s ease;
  }
  .hc-drop.is-open > .hc-drop__toggle .hc-drop__caret {
    transform: rotate(180deg);
  }

  /* Level 1 list — collapsed until "Collections" is tapped. */
  .hc-drop__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .hc-drop.is-open > .hc-drop__menu {
    max-height: 2200px;
    margin: 2px 0 6px;
  }

  /* Levels 2 + 3 — collapsed until their parent row is tapped. */
  .hc-drop__submenu {
    list-style: none;
    margin: 0 0 4px;
    padding-left: 14px;
    border-left: 2px solid var(--hc-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .hc-drop__item--parent.is-open > .hc-drop__submenu {
    max-height: 2000px;
  }

  /* Every row: consistent height, padding, and a rotating arrow. */
  .hc-drop__link {
    padding: 11px 8px;
    font-size: 14px;
    color: var(--hc-body);
  }
  .hc-drop__submenu .hc-drop__link {
    font-size: 13px;
    color: var(--hc-muted);
  }
  .hc-drop__arrow {
    transition: transform 0.15s ease;
  }
  .hc-drop__item--parent.is-open > .hc-drop__link .hc-drop__arrow {
    transform: rotate(90deg);
  }

  .hc-drop__sep {
    height: 1px;
    margin: 8px 8px;
    background: var(--hc-border);
  }

  /* sticky (not relative) so .sticky-top still works — it establishes a
     containing block just the same. */
  .hc-navbar {
    position: sticky;
  }
  .hc-navbar .navbar-collapse {
    position: static;
  }
}

/* Desktop: truly centre the nav links on the page using absolute positioning.
   The .container is the positioning context; the nav sits at 50% left so it
   is centred regardless of the brand or CTA button widths. */
@media (min-width: 992px) {
  .hc-navbar .container {
    position: relative;
  }
  .hc-navbar .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 992–1119px: the true-centred nav (absolutely positioned at 50%) is wide
   enough with 5 top-level items that its own box can reach into the
   search/account/cart icon cluster on the right before there's room to
   grow past it — no amount of link padding reliably closes that gap at
   the narrow end of this range. Rather than keep shaving padding, drop
   the absolute-centering trick just in this band: the nav goes back to
   sitting in normal flex flow (still after the brand, before the
   ms-auto-pushed icon cluster), so it's guaranteed not to overlap
   anything, at the cost of not being pixel-centred on the page until
   there's room for that again at 1120px+. Also tighten padding a little
   so the tab order still reads comfortably at this width. */
@media (min-width: 992px) and (max-width: 1119.98px) {
  .hc-navbar .navbar-nav {
    position: static;
    left: auto;
    transform: none;
    gap: 0;
  }
  .hc-navbar .nav-link {
    padding: 8px 8px;
    font-size: 13px;
  }
}

/* Mobile collapse styling */
@media (max-width: 991.98px) {
  .hc-navbar .navbar-collapse {
    background: var(--hc-white);
    border-top: 1px solid var(--hc-border);
    padding: 8px 16px 16px;
    box-shadow: var(--hc-sh-md);
  }
  .hc-navbar .dropdown-menu {
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--hc-border);
    border-radius: 0;
    background: transparent;
    padding: 4px 0 4px 0;
    margin-top: 0;
    position: static;
    transform: none;
  }
  .hc-dd-sub {
    margin-left: 8px;
  }
}


/* ─── 8. Footer ───────────────────────────────────────────────
   Bootstrap .row/.col grid + HC dark brand colours.
   ──────────────────────────────────────────────────────────── */
.hc-footer {
  background: var(--hc-dark2);
  color: rgba(255, 255, 255, 0.7);
  padding: 64px 0 36px;
}

.hc-footer .hc-footer-brand .navbar-brand {
  color: var(--hc-white);
  padding: 0;
  margin-bottom: 14px;
}
/* Footer wordmark: gold "H" tile beside the serif name, per the design. */
.hc-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.hc-footer-logo__text {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--hc-white);
}
.hc-footer .hc-footer-logo .hc-logo-mark {
  background: var(--hc-accent);
  border: 0;
  color: var(--hc-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
}
.hc-footer .hc-logo-mark {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hc-footer-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  max-width: 210px;
}

/* Decorative icon row under the brand column, matching the design's four
   abstract glyph tiles. Non-interactive (no linked accounts configured). */
.hc-footer-social {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.hc-footer-social li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--hc-accent);
}

.hc-footer-contact {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hc-footer-contact a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--hc-text-sm);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.hc-footer-contact a:hover {
  color: #fff;
}

.hc-footer-col h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 700;
  /* Gold column headings, per the design — and tokenised so they follow a
     palette swap rather than staying white. */
  color: var(--hc-accent);
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 16px;
}
.hc-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hc-footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.hc-footer-col a:hover {
  color: #fff;
}

.hc-footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 28px;
}
.hc-footer-bar p,
.hc-footer-bar a {
  font-size: var(--hc-text-sm);
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  text-decoration: none;
}
.hc-footer-bar a:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* ─── 9. Shop Category Navigation ────────────────────────────
   Pill-button row above product grid — no Bootstrap equivalent.
   ──────────────────────────────────────────────────────────── */
.hc-cat-nav {
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--hc-border);
  border-bottom: 1px solid var(--hc-border);
}
.hc-cat-nav__row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-cat-nav__row--sub {
  margin-top: 14px;
  gap: 8px;
}

a.hc-cat-nav__btn,
.hc-cat-nav__btn {
  display: inline-flex !important;
  align-items: center;
  padding: 10px 22px;
  border-radius: 100px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--hc-heading) !important;
  background: var(--hc-surface) !important;
  border: 1.5px solid var(--hc-border) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
a.hc-cat-nav__btn:hover,
.hc-cat-nav__btn:hover {
  border-color: var(--hc-accent) !important;
  color: var(--hc-accent) !important;
  background: var(--hc-surface) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--hc-accent) 15%, transparent);
}
/* Solid green with white text, same treatment as .hc-cat-nav__sub--active —
   this pill and that one are two different templates' active-filter state
   (archive-product.php vs template-collection.php) and need to look
   identical or switching between /collections/ and a specific collection
   reads as a broken/inconsistent page. */
a.hc-cat-nav__btn--active,
.hc-cat-nav__btn--active {
  background: var(--hc-dark) !important;
  border-color: var(--hc-dark) !important;
  color: var(--hc-white) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hc-dark) 30%, transparent);
}
a.hc-cat-nav__btn--active:hover,
.hc-cat-nav__btn--active:hover {
  background: var(--hc-dark2) !important;
  border-color: var(--hc-dark2) !important;
  color: var(--hc-white) !important;
}

a.hc-cat-nav__sub,
.hc-cat-nav__sub {
  display: inline-flex !important;
  align-items: center;
  padding: 7px 16px;
  border-radius: 100px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--hc-muted) !important;
  background: transparent !important;
  border: 1px solid var(--hc-border) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
a.hc-cat-nav__sub:hover,
.hc-cat-nav__sub:hover {
  border-color: var(--hc-accent) !important;
  color: var(--hc-accent) !important;
  background: color-mix(in srgb, var(--hc-accent) 5%, transparent) !important;
}
/* Active chip is solid green with white text, per the design — the outlined
   amber treatment read as another inactive option beside it. */
a.hc-cat-nav__sub--active,
.hc-cat-nav__sub--active {
  background: var(--hc-dark) !important;
  border-color: var(--hc-dark) !important;
  color: var(--hc-white) !important;
  font-weight: 600;
}
a.hc-cat-nav__sub--active:hover,
.hc-cat-nav__sub--active:hover {
  background: var(--hc-dark2) !important;
  border-color: var(--hc-dark2) !important;
  color: var(--hc-white) !important;
}

@media (max-width: 768px) {
  .hc-cat-nav__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .hc-cat-nav__row::-webkit-scrollbar {
    display: none;
  }
}

/* ─── 10. Misc ────────────────────────────────────────────────
   Sidebar widget titles and text utilities.
   ──────────────────────────────────────────────────────────── */
.widget-title {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--hc-heading);
  margin-bottom: 14px;
}

.text-accent {
  color: var(--hc-accent) !important;
}

/* ─── Predictive product search (header) ─────────────────────────────────── */
.hc-search-wrap {
  position: relative;
}
/* Search icon buttons — identical style for desktop toggle and mobile button */
.hc-search-toggle,
.hc-mob-search-btn,
.hc-account-btn,
.hc-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--hc-r);
  color: var(--hc-dark);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
  flex-shrink: 0;
}
.hc-search-toggle:hover,
.hc-search-toggle[aria-expanded="true"],
.hc-mob-search-btn:hover,
.hc-mob-search-btn[aria-expanded="true"],
.hc-account-btn:hover,
.hc-account-btn[aria-expanded="true"],
.hc-cart-btn:hover {
  color: var(--hc-accent);
}

/* Cart icon — position: relative so the count badge can anchor to it */
.hc-cart-btn {
  position: relative;
  text-decoration: none;
}
.hc-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--hc-accent);
  /* Dark green on gold, not white: white on this gold is 2.31:1 and fails AA.
     The mockup uses dark text on every gold fill for the same reason. */
  color: var(--hc-dark);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}
/* The design shows the badge at all times, including a "0" count, so the
   cart affordance never shifts position when the first item is added. Kept
   in the theme accent color at every count rather than greyed at 0, per
   request — the badge's presence/position already signals the cart icon,
   so it doesn't need a second empty/full color cue. */

/* Thin vertical rule between the cart icon and "Start Your Project",
   matching the design's header. */
.hc-header-divider {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--hc-border);
  flex-shrink: 0;
}

/* Legacy header-CTA hook — every button now shares the 8px --hc-btn-r,
   so this no longer needs its own radius. Kept as a no-op in case markup
   still references it. */
.hc-btn-pill {
  border-radius: var(--hc-btn-r);
}

.hc-search {
  position: relative;
  width: 100%;
  max-width: 320px;
}
/* Desktop: the field is a dropdown panel opened by the icon (no menu overlap). */
@media (min-width: 992px) {
  .hc-search {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    max-width: none;
    padding: 10px;
    background: var(--hc-white);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: var(--hc-sh-lg);
    z-index: 1;
    display: none;
  }
  .hc-search.is-open {
    display: block;
  }
}
.hc-search__box .hc-search__icon {
  background: var(--hc-white);
  border-right: 0;
  color: var(--hc-muted);
  padding-inline: 10px;
}
.hc-search__input.form-control {
  border-left: 0;
  box-shadow: none;
}
.hc-search__input.form-control:focus {
  border-color: var(--hc-border);
  box-shadow: none;
}
.hc-search__box:focus-within {
  outline: 2px solid var(--hc-accent);
  outline-offset: 1px;
  border-radius: var(--hc-r);
}

.hc-search__suggest {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 1080;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--hc-white);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  box-shadow: var(--hc-sh-lg);
  padding: 6px;
}
.hc-search__group {
  font-size: var(--hc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hc-muted);
  padding: 10px 10px 4px;
}
.hc-search__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--hc-r);
  color: var(--hc-dark);
  text-decoration: none;
  line-height: 1.3;
}
.hc-search__item:hover,
.hc-search__item.is-active {
  background: var(--hc-warm);
  color: var(--hc-dark);
}
.hc-search__thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: var(--hc-r);
  flex: 0 0 auto;
  background: var(--hc-bg);
}
.hc-search__label {
  flex: 1 1 auto;
  font-size: 14px;
}
.hc-search__price {
  font-size: var(--hc-text-sm);
  font-weight: 600;
  color: var(--hc-accent);
  white-space: nowrap;
}
.hc-search__count {
  font-size: 12px;
  color: var(--hc-muted);
  background: var(--hc-warm);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.hc-search__empty {
  padding: 14px 12px;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
}
.hc-search__viewall {
  display: block;
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid var(--hc-border);
  font-size: var(--hc-text-sm);
  font-weight: 600;
  text-align: center;
  color: var(--hc-accent);
  text-decoration: none;
  border-radius: 0 0 var(--hc-r-lg) var(--hc-r-lg);
}
.hc-search__viewall:hover,
.hc-search__viewall.is-active {
  background: var(--hc-warm);
}

/* Mobile: suggestions render in-flow inside the mobile panel */
@media (max-width: 991.98px) {
  .hc-search {
    max-width: 100%;
  }
  .hc-search__suggest {
    position: static;
    margin-top: 6px;
    box-shadow: none;
  }
}

/* Mobile search panel — full-width bar below the navbar */
.hc-mob-search {
  flex-basis: 100%; /* wrap to own row inside the navbar flex container */
  width: 100%;
  background: var(--hc-white);
  border-top: 1px solid var(--hc-border);
  box-shadow: var(--hc-sh-md);
}
.hc-mob-search .hc-search {
  max-width: 100%;
}
.hc-mob-search .hc-search__suggest {
  position: static;
  margin-top: 6px;
  box-shadow: none;
  border-color: var(--hc-border);
}

/* Mobile account panel — full-width below the navbar */
.hc-mob-account {
  flex-basis: 100%;
  width: 100%;
  background: var(--hc-white);
  border-top: 1px solid var(--hc-border);
  box-shadow: var(--hc-sh-md);
}
.hc-mob-account__inner {
  /* max-width: 480px; */
  padding: 8px 12px 12px;
}

/* ─── Product search results toolbar ─────────────────────────────────────── */
/* Layout is Bootstrap utilities in search.php (d-flex, justify-content-between,
   flex-wrap, gap-3, mb-4) — only the token-aware bits live here. */
.hc-search-toolbar__count {
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
}
.hc-search-toolbar__sort .form-select {
  min-width: 200px;
  border-color: var(--hc-border);
}

/* ─── Navbar Account Dropdown ─────────────────────────────────────────────── */
.hc-account-dd {
  min-width: 230px;
  padding: 8px;
}

/* Logged-in: user info header */
.hc-account-dd__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}
.hc-account-dd__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}
.hc-account-dd__info {
  min-width: 0;
}
.hc-account-dd__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-account-dd__email {
  font-size: 11px;
  color: var(--hc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logout item — red tint */
.hc-account-dd__logout {
  color: #dc2626 !important;
}
.hc-account-dd__logout:hover,
.hc-account-dd__logout:focus {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

/* Not-logged-in guest prompt */
.hc-account-dd__guest {
  padding: 10px 14px 4px;
}
.hc-account-dd__guest-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-dark);
  margin: 0 0 3px;
}
.hc-account-dd__guest-sub {
  font-size: 12px;
  color: var(--hc-muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

/* Active account menu item */
.hc-account-dd .dropdown-item.active {
  background: var(--hc-warm);
  color: var(--hc-accent);
  font-weight: 500;
}

/* ─── 11. Static Page Reading Width ────────────────────────────
   page.php centres its content with Bootstrap's .container; this
   caps it to a comfortable reading width (no Bootstrap container
   size lands on 860px, so a custom max-width is warranted here).
   ──────────────────────────────────────────────────────────── */
.wrap.container {
  max-width: 860px;
}

/* ─── 11b. Blog / generic post templates ──────────────────────
   single.php, archive.php, index.php, search.php (non-product),
   comments.php. Layout is Bootstrap utilities in the markup; only
   the bits Bootstrap has no token-aware equivalent for live here:
   the HC small type sizes and the muted-meta colour.
   ──────────────────────────────────────────────────────────── */
.hc-post__meta {
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
}
.hc-post__meta--sm {
  font-size: var(--hc-text-xs);
}
.hc-post-grid {
  /* auto-fill card grid — Bootstrap's row/col needs a fixed column
     count per breakpoint; this keeps a min card width and wraps freely. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}
.hc-post-card__eyebrow {
  font-size: var(--hc-text-xs);
  font-weight: 600;
  color: var(--hc-accent);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

/* ─── 12. Legal Pages (Privacy Policy / Terms of Service) ──────
   Rendered through the generic page.php template — scoped via
   the .hc-legal body class (see functions.php body_class filter)
   so About/Contact/etc. keep their current look untouched.
   ──────────────────────────────────────────────────────────── */
.hc-legal .entry-content {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 44px clamp(20px, 5vw, 56px);
}
.hc-legal .entry-content h2 {
  font-size: 1.35rem;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--hc-border);
}
.hc-legal .entry-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.hc-legal .entry-content p {
  margin-top: 14px;
  margin-bottom: 0;
}
.hc-legal .entry-content ul,
.hc-legal .entry-content ol {
  margin-top: 14px;
}
.hc-legal .entry-content a {
  color: var(--hc-accent);
  text-decoration: none;
  transition: color 0.15s;
}
.hc-legal .entry-content a:hover {
  color: var(--hc-accent-d);
  text-decoration: underline;
}
/* WP's privacy-policy generator prefixes suggested paragraphs with a bold
   "Suggested text:" tag meant for the editor preview — recast as a small
   eyebrow label on the front end instead of an inline bold run-in. */
.hc-legal .entry-content .privacy-policy-tutorial {
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 600;
  color: var(--hc-accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}

/* ─── 13. 404 Page ────────────────────────────────────────────
   Layout comes from Bootstrap utilities in 404.php; only the
   things Bootstrap has no equivalent for live here.
   ──────────────────────────────────────────────────────────── */
.hc-404 .sec-head {
  margin-bottom: 36px;
}

/* Search field capped to a comfortable measure — no Bootstrap
   utility lands on this width, and max-width:100% keeps it from
   overflowing on narrow screens. */
.hc-404-search {
  max-width: 460px;
  width: 100%;
}

/* Divider above the category suggestions. Bootstrap's border
   utilities can't express the token colour. */
.hc-404-cats {
  border-top: 1px solid var(--hc-border);
}
.hc-404-cats__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--hc-heading);
}

/* .hc-chip is a static tag elsewhere; on the 404 the chips are
   links, so they need an interactive state. */
.hc-404-cats .hc-chip {
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.hc-404-cats .hc-chip:hover,
.hc-404-cats .hc-chip:focus-visible {
  color: var(--hc-accent);
  border-color: var(--hc-accent);
}

/* Outline CTA that sits on a photo/dark band, used by both the hero
   (front-page.css) and the CTA band below — borrows white rather than the
   accent, since --hc-accent would disappear against the green. Lives here
   because the CTA band renders on pages that never load front-page.css. */
.btn-hero-ghost {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--hc-white) 45%, transparent);
  border-radius: var(--hc-btn-r);
  color: var(--hc-white);
  font-weight: 500;
}
.btn-hero-ghost:hover {
  background: color-mix(in srgb, var(--hc-white) 12%, transparent);
  border-color: var(--hc-white);
  color: var(--hc-white);
}

/* ─── CTA Banner ─────────────────────────────────────────────────
   Markup: template-parts/cta-band.php — shared between the homepage and
   collection pages, so it lives in global.css (loaded everywhere) rather
   than front-page.css (loaded only on is_front_page()). Same photo-plus-
   overlay construction as the hero, so an image can be set without the
   section depending on one.
   ──────────────────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--hc-dark) 76%, #fff) 0%, var(--hc-dark) 52%, var(--hc-dark2) 100%);
  padding: 92px 0 84px;
  text-align: center;
  overflow: hidden;
}
.cta-band--has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hc-cta-img);
  background-size: cover;
  background-position: center;
}
/* Video takes the same layer as the image ::before above; when both are
   present the <video> tag sits on top of it, so only the video is visible. */
.cta-band__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hc-dark2) 88%, transparent) 0%,
    color-mix(in srgb, var(--hc-dark) 80%, transparent) 50%,
    color-mix(in srgb, var(--hc-dark2) 92%, transparent) 100%);
}
.cta-band:not(.cta-band--has-img) .cta-band__overlay { display: none; }

.cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-band__label { margin-bottom: 16px; }

.cta-band__title {
  margin: 0 0 32px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--hc-white);
}
.cta-band__title em {
  display: block;
  font-style: italic;
  color: color-mix(in srgb, var(--hc-accent) 58%, #fff);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 38px;
}
.cta-band__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  font-size: var(--hc-text-md);
  border-radius: var(--hc-r);
}

/* Trust row: duplicated from .hero-trust (front-page.css) rather than
   sharing that class's rules directly — .hero-trust is hero-scoped and this
   file has to work on pages that never load front-page.css. */
.cta-band__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cta-band__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--hc-text-sm);
  color: color-mix(in srgb, var(--hc-white) 80%, transparent);
}
.cta-band__trust svg { color: var(--hc-accent); flex-shrink: 0; }

@media (max-width: 575.98px) {
  .cta-band { padding: 64px 0 58px; }
  .cta-band__actions { width: 100%; flex-direction: column; }
  .cta-band__actions .btn { width: 100%; justify-content: center; }
}

/* ─── Newsletter Strip ───────────────────────────────────────────
   "Stay Inspired" — site-wide, directly above the footer on every page
   (template-parts/newsletter.php, included from footer.php). Originally
   homepage-only; moved here from front-page.css when it became a global
   footer-band component instead of a homepage section.
   ──────────────────────────────────────────────────────────────── */
.hc-news {
  background: var(--hc-warm);
  padding: 40px 0;
}
.hc-news__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hc-news__copy { flex: 1 1 320px; }
.hc-news__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 500;
  color: var(--hc-heading);
}

/* Honeypot — visually hidden but present in the DOM. Duplicated from
   lead-form.css because that file is only enqueued on pages carrying the
   [hc_lead_form] shortcode, which this section doesn't use. */
.hc-news__form .hc-lead__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hc-news__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
}
.hc-news__input {
  width: min(320px, 60vw);
  padding: 13px 18px;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  background: var(--hc-surface);
  font: inherit;
  font-size: var(--hc-text-sm);
  color: var(--hc-heading);
}
.hc-news__input:focus {
  outline: none;
  border-color: var(--hc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 18%, transparent);
}
.hc-news__submit {
  padding: 13px 26px;
  font-size: var(--hc-text-sm);
  white-space: nowrap;
}
/* Absolute so the message never reflows the inline row when it appears. */
.hc-news__msg {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 6px 0 0;
  font-size: var(--hc-text-xs);
  min-height: 1em;
}
.hc-news__msg.is-success { color: #2e7d32; }
.hc-news__msg.is-error   { color: #c0392b; }

@media (max-width: 767.98px) {
  /* .hc-news__inner switches flex-direction to column here — flex-basis
     always sizes along the main axis, so .hc-news__copy's flex: 1 1 320px
     (a 320px WIDTH hint for the desktop row layout) becomes a 320px
     HEIGHT hint once the axis flips, leaving a large empty box under the
     heading with nothing to fill it. Reset the basis to auto (size to
     content) now that the main axis is vertical. */
  .hc-news__inner { flex-direction: column; align-items: stretch; }
  .hc-news__copy { flex-basis: auto; }
  .hc-news__form { flex-wrap: wrap; }
  .hc-news__input { width: 100%; flex: 1 1 200px; }
  .hc-news__msg { position: static; }
}

/* ─── Filter pill ────────────────────────────────────────────────
   Shared by the homepage's Kitchen Inspiration section (front-page.css
   wraps these in .hc-inspo__filters) and the Gallery page
   (gallery.css's .hc-gallery__toolbar) — moved here so both can use the
   same pill component without duplicating it or one page missing the
   other's stylesheet.
   ──────────────────────────────────────────────────────────────── */
.hc-pill {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--hc-border);
  background: var(--hc-surface);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-body);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hc-pill:hover { border-color: var(--hc-heading); }
.hc-pill.is-active {
  background: var(--hc-dark);
  border-color: var(--hc-dark);
  color: var(--hc-white);
}

/* ─── Dark mode surfaces ────────────────────────────────────────
   Applied via the .hc-theme-dark body class when one of the 3 dark v2
   palettes is active (see functions.php's HC_DARK_PALETTES / body_class
   filter / customize_preview_init). The token swap in HC_PALETTES
   already makes the page itself dark (hc_bg/hc_warm/hc_surface) with
   light text (hc_heading/hc_body/hc_muted) — everything below is the
   one deliberate exception: the header/nav cluster (<nav class=
   "hc-navbar">, which also contains the search panel, account dropdown,
   and mobile search/account panels — see header.php) stays a light
   surface even on an otherwise dark page, matching the source design.
   Re-pinning the tokens it reads, scoped to that one subtree, is far
   simpler than hunting down and overriding every individual selector
   inside it that reads var(--hc-heading)/var(--hc-body)/var(--hc-muted)/
   var(--hc-border)/var(--hc-surface)/var(--hc-bg). ──────────────────── */
.hc-theme-dark .hc-navbar {
  --hc-heading: #1B1712;
  --hc-body: #5C5346;
  --hc-muted: #7A6F5C;
  --hc-border: #E2D8C7;
  --hc-surface: #FFFFFF;
  --hc-bg: #FFFFFF;
  --hc-warm: #F7F4EE;
}