/*
Theme Name:   Noctura by EmergeScale
Theme URI:    https://emergescale.com/noctura
Author:       EmergeScale
Author URI:   https://emergescale.com
Description:  Noctura by EmergeScale is a fully custom, professional dark-theme WooCommerce theme for premium online stores. Built from scratch with a refined design system, responsive layouts, a fast vanilla-JS front end, mega-menu ready navigation, an AJAX-friendly cart, and deep WooCommerce integration. No page builder required.
Version:      1.7.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  noctura
Tags:         e-commerce, dark-mode, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, right-sidebar, footer-widgets, threaded-comments, translation-ready
*/

/* ==========================================================================
   NOCTURA — Design System
   1.  Design tokens (CSS custom properties)
   2.  Reset & base
   3.  Typography
   4.  Layout / containers / grid
   5.  Buttons & forms
   6.  Header & navigation
   7.  Hero & home sections
   8.  Cards & products
   9.  Footer
   10. Blog / single / comments
   11. Utilities
   12. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================= */

/* The header-panel tokens are REGISTERED, not just declared.
 *
 * An unregistered custom property that is defined but empty or malformed —
 * `--nc-header-text:;` from a stale cached inline style, a page builder, a
 * minifier that mangles it — makes every `color: var(--nc-header-text, …)`
 * declaration invalid at computed-value time. The literal fallback inside
 * var() does NOT save it: an empty token stream counts as "defined", so the
 * declaration computes to `inherit` instead. On a white dropdown hanging off a
 * white-text gradient bar that means white-on-white, and the menu reads blank.
 *
 * Registering them with a `<color>` syntax and an initial value makes a bad
 * value fall back to that initial value at the property level, so the panel can
 * never inherit the bar's ink. Browsers without @property keep today's
 * behaviour, which the !important guards further down still cover.
 */
@property --nc-header-bg     { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --nc-header-text   { syntax: "<color>"; inherits: true; initial-value: #241a2e; }
@property --nc-header-muted  { syntax: "<color>"; inherits: true; initial-value: #6b6377; }
@property --nc-header-border { syntax: "<color>"; inherits: true; initial-value: #ece7f1; }
@property --nc-header-hover  { syntax: "<color>"; inherits: true; initial-value: #f5f0f8; }
@property --nc-nav-fg        { syntax: "<color>"; inherits: true; initial-value: #241a2e; }
@property --nc-nav-hover-fg  { syntax: "<color>"; inherits: true; initial-value: #7a48b0; }
/* The cart/wishlist badge sits on the bar and would otherwise inherit its ink —
   an empty or malformed token here paints the digits into their own pill. */
@property --nc-accent-strong { syntax: "<color>"; inherits: true; initial-value: #7a48b0; }
@property --nc-nav-badge-bg  { syntax: "<color>"; inherits: true; initial-value: #7a48b0; }
@property --nc-nav-badge-fg  { syntax: "<color>"; inherits: true; initial-value: #ffffff; }

:root {
  /* Brand palette — Amethyst. Override in Customizer > Noctura Options > Brand Colors */
  --nc-accent:        #9966cc;
  --nc-accent-strong: #7a48b0;
  --nc-accent-light:  #b18be0;
  --nc-accent-2:      #b57edc;
  --nc-accent-soft:   rgba(153, 102, 204, 0.14);
  --nc-accent-grad:   linear-gradient(105deg, #8e5fc9 0%, #b57edc 100%);
  --nc-accent-rgb:    153, 102, 204;

  /* Surfaces (purple-tinted dark) */
  --nc-bg:            #0b0710;
  --nc-bg-alt:        #120b18;
  --nc-surface:       #181022;
  --nc-surface-2:     #20162c;
  --nc-elevated:      #291d37;
  --nc-border:        #302340;
  --nc-border-soft:   #241a30;

  /* Header PANELS (dropdowns, search suggestions) — always a white card with
     dark text, whatever the bar itself is painted with. */
  --nc-header-bg:     #ffffff;
  --nc-header-text:   #241a2e;
  --nc-header-muted:  #6b6377;
  --nc-header-border: #ece7f1;
  --nc-header-hover:  #f5f0f8;

  /* Announcement bar — white by default, brand-coloured text.
     Customizer > Noctura Options > Announcement Bar overrides every one. */
  --nc-topbar-bg:      #ffffff;
  /* -strong, not -accent: the plain brand purple on white is 4.09:1, just under
     AA, and the bar is small text. The darker shade reads at 6.95:1. */
  --nc-topbar-color:   var(--nc-accent-strong);
  --nc-topbar-border:  #ece7f1;
  --nc-topbar-chip:    rgba(var(--nc-accent-rgb), 0.10);
  --nc-topbar-chip-hv: rgba(var(--nc-accent-rgb), 0.20);

  /* Navbar SURFACE — gradient by default. These are separate from the
     --nc-header-* panel tokens above so a dark/gradient bar never bleeds white
     text into the white dropdown panels that hang off it.
     Customizer > Noctura Options > Header & Navigation switches the mode. */
  /* Soft brand gradient — a pale lavender wash, not a saturated slab.
     A shop logo is almost always dark ink drawn for a white background, so a
     LIGHT bar is the one that shows it in its own colours. The gradient is
     still there, just tinted rather than filled; PHP recomputes both stops
     from your brand colours. Pick "Brand gradient" in the Customizer for the
     saturated version. */
  --nc-nav-bg:            linear-gradient(105deg, #f5f0fa 0%, #eddef7 100%);
  --nc-nav-fg:            var(--nc-header-text);
  --nc-nav-fg-muted:      var(--nc-header-muted);
  /* On a pale bar the pill RAISES instead of recessing — a white chip on
     lavender. Tinting it with the accent instead put the selected item at
     4.22:1, below AA; white takes it to 6.22:1 and reads more clearly as
     "selected" against the wash. */
  --nc-nav-hover-bg:      rgba(255, 255, 255, 0.72);
  --nc-nav-hover-fg:      var(--nc-accent-strong);
  --nc-nav-active-bg:     #ffffff;
  --nc-nav-border:        rgba(var(--nc-accent-rgb), 0.16);
  --nc-nav-shadow:        0 10px 34px -18px rgba(20, 8, 30, 0.3);
  --nc-nav-field-bg:      #ffffff;
  --nc-nav-field-bg-fc:   #ffffff;
  --nc-nav-field-border:  rgba(var(--nc-accent-rgb), 0.22);
  --nc-nav-field-fg:      var(--nc-header-text);
  /* Placeholder is still text: #8a8296 on a white field is only 3.68:1. */
  --nc-nav-field-ph:      var(--nc-header-muted);
  --nc-nav-badge-bg:      var(--nc-accent-strong);
  --nc-nav-badge-fg:      #ffffff;
  --nc-nav-badge-ring:    #ffffff;

  /* Text */
  --nc-text:          #f3eef8;
  --nc-text-muted:    #a99fb5;
  --nc-text-faint:    #6f6579;
  --nc-heading:       #ffffff;

  /* Feedback. The -soft pair is the 10% tint used behind the matching text,
     so a stock pill or an error notice never needs a hard-coded rgba() that
     the light palette below can't follow. */
  --nc-success:       #34d399;
  --nc-success-soft:  rgba(52, 211, 153, 0.12);
  --nc-danger:        #f472b6;
  --nc-danger-soft:   rgba(244, 114, 182, 0.12);
  --nc-warning:       #fbbf24;
  --nc-sale:          #9966cc;

  /* Typography */
  --nc-font-body:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nc-font-head:    "Outfit", var(--nc-font-body);

  /* Structure */
  --nc-container:     1280px;
  --nc-container-wide:1480px;
  --nc-radius:        14px;
  --nc-radius-sm:     10px;
  --nc-radius-lg:     22px;
  --nc-gap:           24px;

  /* Effects */
  --nc-shadow:        0 20px 55px -18px rgba(0, 0, 0, 0.7);
  --nc-shadow-sm:     0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --nc-glow:          0 10px 30px -6px rgba(var(--nc-accent-rgb), 0.5);
  --nc-ring:          0 0 0 3px var(--nc-accent-soft);
  --nc-transition:    0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --nc-header-h:      76px;
}

/* Light storefront — shop archives, categories/brands & single products.
   IMPORTANT: the light tokens are scoped to the MAIN content area, not <body>.
   On <body> they would cascade into the header, the off-canvas panels and the
   FOOTER — including plugin/page-builder footers (Boostify, Elementor), whose
   dark backgrounds would then get dark text and become unreadable. */
body.nc-light {
  background-color: #ffffff;
  background-image:
    radial-gradient(50rem 30rem at 88% -6%, rgba(var(--nc-accent-rgb), 0.08), transparent 60%),
    radial-gradient(42rem 26rem at -6% 2%, rgba(var(--nc-accent-rgb), 0.05), transparent 55%);
}
body.nc-light .nc-site-main {
  --nc-bg:            #ffffff;
  --nc-bg-alt:        #f7f4fb;
  --nc-surface:       #ffffff;
  --nc-surface-2:     #f6f2fb;
  --nc-elevated:      #ece4f6;
  --nc-border:        #e8e1f1;
  --nc-border-soft:   #f0ebf7;

  --nc-text:          #2c2438;
  --nc-text-muted:    #6a6178;
  --nc-text-faint:    #9a92a8;
  --nc-heading:       #201a2b;

  /* Darker amethyst for text/links so it stays readable on white */
  --nc-accent-2:      #7c4fb8;

  /* Feedback colours have to be restated for a white page. The dark palette's
     mint (#34d399) and hot pink (#f472b6) are picked to glow on #0b0710 and
     measure 1.9:1 and 3.0:1 on white — under AA for the "In stock" line, the
     required-field asterisks, the invalid-field borders and the cart's remove
     button, all of which live inside this scope. These are the same two hues
     resolved for a light ground. */
  --nc-success:       #0e8a53;
  --nc-success-soft:  rgba(14, 138, 83, 0.10);
  --nc-danger:        #c02535;
  --nc-danger-soft:   rgba(192, 37, 53, 0.09);

  --nc-shadow:        0 22px 50px -24px rgba(80, 45, 130, 0.22);
  --nc-shadow-sm:     0 10px 26px -16px rgba(80, 45, 130, 0.18);

  color: var(--nc-text);
}
/* Gradient text starts with white — invisible on a white page. Recolour it
   dark → amethyst inside the light content area (404, search headings, etc.). */
body.nc-light .nc-site-main .nc-gradient-text {
  background: linear-gradient(100deg, var(--nc-heading) 8%, var(--nc-accent) 60%, var(--nc-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* 2. RESET & BASE ========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--nc-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--nc-text);
  background-color: var(--nc-bg);
  background-image:
    radial-gradient(60rem 40rem at 82% -8%, rgba(123, 97, 255, 0.12), transparent 60%),
    radial-gradient(48rem 34rem at -6% 4%, rgba(34, 211, 238, 0.08), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip (not hidden) so it doesn't create a scroll container that breaks position:sticky */
  overflow-x: clip;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--nc-accent-2); text-decoration: none; transition: color var(--nc-transition); }
a:hover { color: var(--nc-text); }

ul, ol { padding-left: 1.2em; }

hr { border: 0; height: 1px; background: var(--nc-border); margin: 2.5rem 0; }

::selection { background: var(--nc-accent); color: #fff; }

:focus-visible { outline: none; box-shadow: var(--nc-ring); border-radius: 6px; }

/* Custom scrollbar */
/* Clean, neutral scrollbar — no coloured border ring (that read as a shadow),
   and a semi-transparent thumb that works on both dark and light pages. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(140, 120, 175, 0.5); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--nc-accent-rgb), 0.75); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(140, 120, 175, 0.5) transparent; }

/* 3. TYPOGRAPHY ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nc-font-head);
  color: var(--nc-heading);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }

.nc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--nc-font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nc-accent-2);
  margin-bottom: 1rem;
}
.nc-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--nc-accent); border-radius: 2px; }

.nc-gradient-text {
  background: linear-gradient(100deg, #fff 10%, var(--nc-accent) 55%, var(--nc-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.6rem;
  border-left: 3px solid var(--nc-accent);
  background: var(--nc-surface);
  border-radius: 0 var(--nc-radius-sm) var(--nc-radius-sm) 0;
  color: var(--nc-text-muted);
  font-style: italic;
}

code, pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}
code { background: var(--nc-surface-2); padding: 0.15em 0.45em; border-radius: 6px; color: var(--nc-accent-2); }
pre { background: var(--nc-surface); padding: 1.2rem; border-radius: var(--nc-radius-sm); overflow-x: auto; border: 1px solid var(--nc-border); }

/* 4. LAYOUT ================================================================ */
.nc-container { width: 100%; max-width: var(--nc-container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.nc-container--wide { max-width: var(--nc-container-wide); }
.nc-container--narrow { max-width: 820px; }

.nc-section { padding-block: clamp(48px, 7vw, 96px); position: relative; }
.nc-section--tight { padding-block: clamp(36px, 5vw, 60px); }
.nc-section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 52px); }
.nc-section-head--center { margin-inline: auto; text-align: center; }
.nc-section-head p { color: var(--nc-text-muted); font-size: 1.05rem; margin-bottom: 0; }

.nc-grid { display: grid; gap: var(--nc-gap); }
.nc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nc-grid--auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.nc-content-area { padding-block: clamp(40px, 5vw, 72px); }
.nc-layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 52px); align-items: start; }

/* 5. BUTTONS & FORMS ======================================================= */
/* The pill treatment is applied ONLY to buttons the theme owns — never a bare
   <button>. A global `button` selector here used to repaint every button on the
   site (plugins, page-builder widgets, sliders, custom nav) as a purple pill.
   Every theme button carries a class (.nc-btn / .nc-icon-btn / .nc-qty-btn …),
   so bare <button> gets only a neutral reset below. */
.nc-btn,
input[type="submit"], input[type="button"], .button, .wp-block-button__link {
  --btn-bg: var(--nc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--nc-font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.9em 1.6em;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #fff;
  background: var(--nc-accent-grad);
  background-color: var(--btn-bg);
  cursor: pointer;
  position: relative;
  transition: transform var(--nc-transition), box-shadow var(--nc-transition), background var(--nc-transition), color var(--nc-transition), border-color var(--nc-transition);
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
/* Bare <button> (plugins, custom components, theme icon/utility buttons that
   supply their own look) — sensible defaults only, no pill. */
button { font-family: inherit; cursor: pointer; }

/* Colour + glow on the theme-styled CTAs (safe — these don't move anything). */
.nc-btn:hover,
.button:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, input[type="button"]:hover {
  color: #fff;
  box-shadow: var(--nc-glow);
}
/* The vertical LIFT (transform) is restricted to the theme's OWN .nc-btn class.
   .button is shared by WooCommerce AND countless plugins/page builders, and
   input submits appear in plugin forms — applying a transform to them shifts
   any control that positions itself with translateY() (nav arrows, etc.).
   So only .nc-btn lifts; everything else keeps its own transform untouched. */
.nc-btn:hover { transform: translateY(-2px); }
.nc-btn:active { transform: translateY(0); }

.nc-btn--gradient { background: var(--nc-accent-grad); }
.nc-btn--solid { background: var(--nc-accent); }
.nc-btn--outline {
  background: transparent;
  border-color: var(--nc-border);
  color: var(--nc-text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nc-btn--outline::before { display: none; }
.nc-btn--outline:hover { border-color: var(--nc-accent); background: var(--nc-accent-soft); box-shadow: none; color: var(--nc-text); filter: none; }
.nc-btn--ghost { background: var(--nc-surface-2); color: var(--nc-text); }
.nc-btn--ghost::before { display: none; }
.nc-btn--ghost:hover { background: var(--nc-elevated); box-shadow: none; filter: none; }
.nc-btn--sm { padding: 0.6em 1.15em; font-size: 0.85rem; }
.nc-btn--lg { padding: 1.1em 2.1em; font-size: 1.02rem; }
.nc-btn--block { width: 100%; }
.nc-btn--icon { padding: 0.8em; border-radius: 50%; }

/* Note: the theme no longer styles bare <button> elements (only its own
   .nc-btn / .nc-icon-btn / … classes), so custom sliders, carousels and
   plugin controls keep their own styling and transforms untouched — no
   compatibility overrides needed. */

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--nc-text);
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius-sm);
  padding: 0.85em 1.1em;
  transition: border-color var(--nc-transition), box-shadow var(--nc-transition);
}
input:focus, textarea:focus, select:focus { border-color: var(--nc-accent); box-shadow: var(--nc-ring); outline: none; }
input::placeholder, textarea::placeholder { color: var(--nc-text-faint); }
label { font-size: 0.9rem; color: var(--nc-text-muted); display: inline-block; margin-bottom: 0.4em; }

/* 6. HEADER & NAV ========================================================== */
/* Announcement / top bar — rotating message slider above the white navbar.
   Manage in Customizer > Noctura Options > Announcement Bar. */
.nc-topbar {
  background: var(--nc-topbar-bg);
  color: var(--nc-topbar-color);
  border-bottom: 1px solid var(--nc-topbar-border);
  font-size: var(--nc-topbar-size, 0.82rem);
  font-weight: 500;
}
.nc-topbar[hidden] { display: none; }
.nc-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 1rem; }
/* Centred variant — no links column, so the message owns the whole bar. */
.nc-topbar--center .nc-topbar__inner { justify-content: center; }
.nc-topbar--center .nc-topbar__slider { flex: 0 1 auto; }
.nc-topbar--center .nc-topbar__msg { justify-content: center; }
.nc-topbar__slider { display: flex; align-items: center; gap: 0.35rem; min-width: 0; flex: 1 1 auto; }
.nc-topbar__track { position: relative; min-width: 0; flex: 1 1 auto; }
.nc-topbar__msg { display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.nc-topbar__msg svg { flex-shrink: 0; }
/* Multi-message mode: fixed-height track, messages crossfade in place */
.nc-topbar__slider--multi .nc-topbar__track { height: 1.6em; overflow: hidden; }
.nc-topbar__slider--multi .nc-topbar__msg {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(9px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.nc-topbar__slider--multi .nc-topbar__msg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-topbar__slider--multi .nc-topbar__msg.is-active { opacity: 1; transform: none; pointer-events: auto; }
.nc-topbar__arrow,
.nc-topbar__close {
  width: 26px; height: 26px; flex-shrink: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--nc-topbar-chip); color: inherit;
  border: 0; border-radius: 50%; cursor: pointer;
  transition: background var(--nc-transition);
}
.nc-topbar__arrow::before,
.nc-topbar__close::before { display: none; }
.nc-topbar__arrow:hover,
.nc-topbar__close:hover { background: var(--nc-topbar-chip-hv); color: inherit; transform: none; box-shadow: none; filter: none; }
.nc-topbar__arrow:focus-visible,
.nc-topbar__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nc-topbar__arrow--prev svg { transform: rotate(90deg); }
.nc-topbar__arrow--next svg { transform: rotate(-90deg); }
.nc-topbar__close { margin-left: 0.4rem; }
.nc-topbar__links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.nc-topbar__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
/* No opacity de-emphasis. Fading a link to 82% dropped these to 3.06:1 — they
   were faint until you hovered them, which is backwards. Full colour at rest;
   the hover state is carried by the underline, not by getting brighter. */
.nc-topbar a, .nc-topbar__links a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--nc-transition); }
.nc-topbar a:hover, .nc-topbar__links a:hover { color: inherit; text-decoration-color: currentColor; }

/* Announcement ticker — the scrolling marquee strip.
   Manage in Customizer > Noctura Options > Announcement Ticker. */
.nc-ticker {
  --nc-ticker-duration: 30s;
  background: var(--nc-ticker-bg, #241a2e);
  color: var(--nc-ticker-color, #ffffff);
  overflow: hidden;
  position: relative;
  font-size: var(--nc-ticker-size, 0.82rem);
  font-weight: 700;
  font-family: var(--nc-font-head);
}
.nc-ticker__hit { display: block; color: inherit; }
.nc-ticker--link .nc-ticker__hit:hover { color: inherit; opacity: 0.88; }
/* width:max-content lets the row size to its content instead of the viewport,
   which is what makes a single-axis transform enough to scroll it. */
.nc-ticker__track {
  display: flex; width: max-content;
  animation: nc-ticker-run var(--nc-ticker-duration) linear infinite;
  will-change: transform;
}
.nc-ticker--reverse .nc-ticker__track { animation-direction: reverse; }
.nc-ticker:hover .nc-ticker__track { animation-play-state: paused; }
.nc-ticker__group { display: flex; align-items: center; flex: 0 0 auto; }
.nc-ticker__item { padding: 0.62em 0; white-space: nowrap; }
.nc-ticker__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nc-ticker__sep { padding: 0 1.6em; opacity: 0.55; flex: 0 0 auto; }
/* Exactly one group's width. The clone that follows takes its place at the end
   of the cycle, so the reset is invisible. */
@keyframes nc-ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Endless motion is a vestibular trigger and unignorable next to real content —
   hold it still and let it wrap normally instead. */
@media (prefers-reduced-motion: reduce) {
  .nc-ticker__track { animation: none; width: 100%; justify-content: center; }
  .nc-ticker__group[aria-hidden="true"] { display: none; }
  .nc-ticker__group { flex-wrap: wrap; justify-content: center; }
  .nc-ticker__item { white-space: normal; }
}

/* Header — gradient navbar by default (see --nc-nav-* tokens) */
.nc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nc-nav-bg);
  color: var(--nc-nav-fg);
  border-bottom: 1px solid var(--nc-nav-border);
  transition: box-shadow var(--nc-transition);
}
.nc-header.is-stuck { box-shadow: var(--nc-nav-shadow); }

/* Dark navbar mode — a saturated or dark bar needs light ink.
   PHP adds .nc-header--dark when the chosen navbar colour is dark. The default
   above is the light bar, so an ordinary dark-ink logo works untouched. */
.nc-header--dark {
  --nc-nav-fg:           #ffffff;
  --nc-nav-fg-muted:     rgba(255, 255, 255, 0.86);
  /* Hover and active states DARKEN the bar. Lightening them was the bug: a
     translucent-white pill under white text collapses to 2.59:1, which is what
     made the open menu item read as washed out. A scrim also gives the right
     affordance — the pill reads as pressed in, not raised. */
  --nc-nav-hover-bg:     rgba(0, 0, 0, 0.18);
  --nc-nav-hover-fg:     #ffffff;
  --nc-nav-active-bg:    rgba(0, 0, 0, 0.28);
  --nc-nav-border:       rgba(255, 255, 255, 0.16);
  --nc-nav-shadow:       0 12px 34px -18px rgba(20, 8, 30, 0.55);
  /* Same reasoning: a recessed field, not a raised one. */
  --nc-nav-field-bg:     rgba(0, 0, 0, 0.16);
  --nc-nav-field-bg-fc:  rgba(0, 0, 0, 0.24);
  --nc-nav-field-border: rgba(255, 255, 255, 0.22);
  --nc-nav-field-fg:     #ffffff;
  --nc-nav-field-ph:     rgba(255, 255, 255, 0.85); /* 0.78 measured 4.47:1 */
  --nc-nav-badge-bg:     #ffffff;
  --nc-nav-badge-fg:     var(--nc-accent-strong);
  --nc-nav-badge-ring:   transparent;
}
.nc-header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: var(--nc-header-h); }
/* Keep the sticky header below the WP admin bar */
.admin-bar .nc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .nc-header { top: 46px; } }

.nc-logo { display: flex; align-items: center; gap: 0.7rem; font-family: var(--nc-font-head); font-weight: 700; font-size: 1.4rem; color: var(--nc-nav-fg); letter-spacing: -0.03em; flex-shrink: 0; transition: opacity var(--nc-transition), color var(--nc-transition); }
.nc-logo:hover { color: var(--nc-nav-hover-fg); opacity: 0.86; }
.nc-logo__mark {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--nc-accent-grad);
  color: #fff; font-size: 1.15rem; box-shadow: 0 6px 18px -6px rgba(var(--nc-accent-rgb), 0.6);
}
/* On a saturated bar the gradient chip disappears into the background —
   invert it to a solid white tile with the brand colour inside. */
.nc-header--dark .nc-logo__mark { background: #fff; color: var(--nc-accent-strong); box-shadow: none; }
.nc-logo img { max-height: 44px; width: auto; display: block; }
/* Last-resort treatment for a dark-ink logo on a DARK bar, where it would
   otherwise vanish. The default navbar is light precisely so this never fires
   and the logo keeps its own colours. Uploading a light logo under
   Customize > Header & Navigation is the better answer when a dark bar is
   wanted; this checkbox can also be switched off entirely. */
.nc-logo--invert img { filter: brightness(0) invert(1); }

/* Primary nav */
.nc-nav { margin-inline: auto; }
.nc-nav ul { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nc-nav li { position: relative; }
.nc-nav > ul > li > a {
  display: flex; align-items: center; gap: 0.4em;
  font-family: var(--nc-font-head);
  font-weight: 600; font-size: 0.95rem;
  color: var(--nc-nav-fg, #ffffff);
  padding: 0.55rem 0.95rem; border-radius: 100px;
  transition: color var(--nc-transition), background var(--nc-transition);
}
.nc-nav > ul > li > a:hover,
.nc-nav > ul > .current-menu-item > a,
.nc-nav > ul > .current_page_item > a,
.nc-nav > ul > .current-menu-ancestor > a,
.nc-nav > ul > .current-menu-parent > a {
  color: var(--nc-nav-hover-fg, #ffffff);
  background: var(--nc-nav-hover-bg, rgba(255, 255, 255, 0.18));
}
/* Current section keeps a slightly stronger fill so it still reads while a
   neighbouring item is being hovered. */
.nc-nav > ul > .current-menu-item > a,
.nc-nav > ul > .current-menu-ancestor > a { background: var(--nc-nav-active-bg, rgba(255, 255, 255, 0.26)); }
.nc-nav .menu-item-has-children > a::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.6;
  transition: transform var(--nc-transition), opacity var(--nc-transition);
  flex-shrink: 0;
}
.nc-nav .menu-item-has-children:hover > a::after,
.nc-nav .menu-item-has-children.is-open > a::after { transform: rotate(225deg) translateY(1px); opacity: 1; }
/* Keep the parent item lit while its panel is open, so "Shop" still reads as
   the active target even though it is a real link you can click through. */
.nc-nav > ul > .menu-item-has-children.is-open > a {
  color: var(--nc-nav-hover-fg, #ffffff);
  background: var(--nc-nav-active-bg, rgba(255, 255, 255, 0.26));
}

/* Dropdown — a white card hanging off the bar. Only the FIRST level is a
   floating panel; every deeper level expands inside it (see below). */
.nc-nav > ul > li > .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 250px; max-width: min(92vw, 720px);
  max-height: calc(100vh - var(--nc-header-h) - 52px);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--nc-header-bg, #ffffff); border: 1px solid var(--nc-header-border, #ece7f1);
  /* The panel states its own ink. It hangs off a bar whose text is white, so
     anything left to inherit lands white-on-white and the menu reads blank. */
  color: var(--nc-header-text, #241a2e);
  border-radius: var(--nc-radius); padding: 8px;
  box-shadow: 0 26px 60px -22px rgba(30, 10, 40, 0.4);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--nc-transition), visibility var(--nc-transition), transform var(--nc-transition);
  z-index: 30; overscroll-behavior: contain;
  list-style: none; margin: 0;
}
/* Flip alignment when a dropdown would overflow the right edge (JS-added) */
.nc-nav > ul > li > .sub-menu.align-right { left: auto; right: 0; }

/* Invisible hover bridge across the gap between a top-level item and its panel.
   It hangs off the <a> — NOT off .sub-menu — because a scrolling panel clips
   any pseudo-element outside its padding box, which left a dead 10px band that
   closed the menu the moment the pointer left the link. */
.nc-nav .menu-item-has-children > a { position: relative; }
.nc-nav > ul > .menu-item-has-children > a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}

.nc-nav > ul > li:hover > .sub-menu,
.nc-nav > ul > li.is-open > .sub-menu,
.nc-nav > ul > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nc-nav .sub-menu li { position: relative; }
.nc-nav .sub-menu a {
  display: flex; align-items: center; gap: 0.4em;
  font-family: var(--nc-font-head);
  padding: 0.62rem 0.9rem; border-radius: var(--nc-radius-sm);
  font-weight: 500; font-size: 0.93rem; line-height: 1.35;
  transition: background var(--nc-transition), color var(--nc-transition);
}
/* Panel ink is defended, not merely declared.
   A white panel hanging off a white-text bar has one catastrophic failure mode
   — invisible links — and a single stray `.nc-nav a { color: #fff }` from a
   plugin, a page builder or Customizer > Additional CSS causes it. The
   `.nc-header` prefix outranks those; !important survives the ones that carry
   it. The hover pair is flagged too, or the base rule would win over it. */
.nc-header .nc-nav .sub-menu a,
.nc-nav .sub-menu a { color: var(--nc-header-text, #241a2e) !important; }
/* Hover ink is --nc-accent-STRONG, not --nc-accent. The plain accent sits at
   3.65:1 on the hover tint, so the row got harder to read the moment you
   pointed at it; the darker shade lands at 5.5:1. It is derived from the brand
   colour in PHP, so it still follows a re-brand. */
.nc-header .nc-nav .sub-menu a:hover,
.nc-header .nc-nav .sub-menu a:focus-visible,
.nc-nav .sub-menu a:hover,
.nc-nav .sub-menu a:focus-visible { color: var(--nc-accent-strong, #7a48b0) !important; }
.nc-nav .sub-menu a:hover,
.nc-nav .sub-menu a:focus-visible { background: var(--nc-header-hover, #f5f0f8); }
.nc-header .nc-nav .sub-menu .current-menu-item > a,
.nc-nav .sub-menu .current-menu-item > a { color: var(--nc-accent-strong, #7a48b0) !important; }
.nc-nav .sub-menu .current-menu-item > a { background: var(--nc-header-hover, #f5f0f8); }

/* ---- Sub-categories open INSIDE the panel -------------------------------
   A 3rd-level list used to fly out sideways, which fell off the right edge and
   detached from the item it belonged to. It now expands in place underneath its
   parent row — indented, hairline-ruled, one group open at a time. */
/* The row itself is the grid — [ link ] over [ group ] — so the reveal
   animates grid-template-rows 0fr → 1fr instead of a guessed max-height.
   That needs no wrapper element (which wp_nav_menu would never give us), it
   eases over the group's real height rather than snapping open early against
   an over-large cap, and it keeps height off the animated properties. */
.nc-nav .sub-menu .menu-item-has-children {
  display: grid; grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.nc-nav .sub-menu .menu-item-has-children.is-open,
.nc-nav .sub-menu .menu-item-has-children:focus-within { grid-template-rows: auto 1fr; }

.nc-nav .sub-menu .sub-menu {
  position: static; left: auto; top: auto;
  /* align-items must be restated: `.nc-nav ul` centres its items for the
     horizontal top-level bar, and in a column that centres every row. */
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  list-style: none; margin: 0 0 0 0.9rem; padding: 0 0 0 0.55rem;
  min-width: 0; max-width: none;
  min-height: 0; /* required, or the item floors the 0fr track at content height */
  border: 0; border-left: 1px solid var(--nc-header-border);
  border-radius: 0; background: transparent; box-shadow: none;
  overflow: hidden;
  opacity: 0; visibility: visible; transform: none;
  transition: opacity 0.22s ease;
}
.nc-nav .sub-menu li.is-open > .sub-menu,
.nc-nav .sub-menu li:focus-within > .sub-menu { opacity: 1; }
.nc-nav .sub-menu .sub-menu a { padding: 0.46rem 0.75rem; font-size: 0.88rem; font-weight: 400; }
.nc-header .nc-nav .sub-menu .sub-menu a,
.nc-nav .sub-menu .sub-menu a { color: var(--nc-header-muted, #6b6377) !important; }
.nc-header .nc-nav .sub-menu .sub-menu a:hover,
.nc-nav .sub-menu .sub-menu a:hover { color: var(--nc-accent-strong, #7a48b0) !important; }
/* Parent-of-a-group row: caret points down, and the row stays lit while the
   group beneath it is open so the relationship is obvious. */
.nc-nav .sub-menu .menu-item-has-children > a::after { margin-left: auto; }
.nc-header .nc-nav .sub-menu .menu-item-has-children.is-open > a,
.nc-nav .sub-menu .menu-item-has-children.is-open > a { color: var(--nc-accent-strong, #7a48b0) !important; }
.nc-nav .sub-menu .menu-item-has-children.is-open > a { background: var(--nc-header-hover, #f5f0f8); font-weight: 600; }

.nc-nav > ul > li > .sub-menu { scrollbar-width: thin; scrollbar-color: #dcd3e4 transparent; }
.nc-nav > ul > li > .sub-menu::-webkit-scrollbar { width: 7px; }
.nc-nav > ul > li > .sub-menu::-webkit-scrollbar-track { background: transparent; }
.nc-nav > ul > li > .sub-menu::-webkit-scrollbar-thumb { background: #dcd3e4; border-radius: 10px; border: 2px solid #fff; }
.nc-nav > ul > li > .sub-menu::-webkit-scrollbar-thumb:hover { background: var(--nc-accent); }

/* When a submenu would exceed the viewport height → expand into columns
   (JS adds .is-columns; a menu item with the CSS class `mega` is always multi-column). */
.nc-nav > ul > li > .sub-menu.is-columns,
.nc-nav .menu-item.mega > .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  align-content: start;
  gap: 2px 8px;
  min-width: 452px;
}
.nc-nav > ul > li > .sub-menu.is-columns.is-columns-3,
.nc-nav .menu-item.mega.mega-3 > .sub-menu { grid-template-columns: repeat(3, minmax(180px, 1fr)); min-width: 620px; }
/* Mega mode: every group is a permanently-open column heading + list. */
.nc-nav .menu-item.mega > .sub-menu > .menu-item-has-children {
  grid-template-rows: auto 1fr; transition: none;
}
.nc-nav .menu-item.mega > .sub-menu > .menu-item-has-children > .sub-menu {
  opacity: 1; overflow: visible;
  margin: 0; padding: 0.2rem 0 0.6rem; border-left: 0;
}
.nc-nav .menu-item.mega > .sub-menu > .menu-item-has-children > a { font-weight: 700; color: var(--nc-accent); }
.nc-nav .menu-item.mega > .sub-menu > .menu-item-has-children > a::after { display: none; }
.nc-nav .menu-item.mega > .sub-menu > .menu-item-has-children.is-open > a { background: transparent; }

/* Inline header search (desktop) — clean pill with the magnifier INSIDE on the
   right. Centering uses margin (not transform) so nothing can shift it. */
.nc-header__search { display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.nc-search-inline { position: relative; width: clamp(180px, 20vw, 280px); margin: 0; }
.nc-search-inline .nc-search-input,
.nc-search-inline input[type="search"] {
  background: var(--nc-nav-field-bg) !important; border: 1px solid var(--nc-nav-field-border) !important; color: var(--nc-nav-field-fg) !important;
  border-radius: 100px; padding: 0.62em 2.9em 0.62em 1.1em; font-size: 0.9rem; width: 100%;
  transition: background var(--nc-transition), border-color var(--nc-transition);
}
.nc-search-inline input[type="search"]::placeholder { color: var(--nc-nav-field-ph); opacity: 1; }
.nc-search-inline input[type="search"]:focus {
  background: var(--nc-nav-field-bg-fc) !important;
  border-color: var(--nc-nav-hover-fg) !important;
  box-shadow: 0 0 0 3px var(--nc-nav-hover-bg); outline: none;
}
.nc-header:not(.nc-header--dark) .nc-search-inline input[type="search"]:focus { border-color: var(--nc-accent) !important; box-shadow: 0 0 0 3px var(--nc-accent-soft); }
.nc-search-inline .nc-search-icon-btn {
  position: absolute; right: 5px; top: 50%; margin-top: -17px;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--nc-nav-fg-muted); cursor: pointer;
  transition: color var(--nc-transition), background var(--nc-transition);
}
.nc-search-inline .nc-search-icon-btn::before { display: none; }
.nc-search-inline .nc-search-icon-btn:hover,
.nc-search-inline .nc-search-icon-btn:active {
  color: var(--nc-nav-hover-fg); background: var(--nc-nav-hover-bg);
  box-shadow: none; transform: none; filter: none;
}
.nc-search-inline .nc-search-icon-btn svg { width: 18px; height: 18px; }

/* Kill the browser's native search-clear (✕) on every themed search field —
   we never want a second cross next to our own controls. */
.nc-search-input::-webkit-search-cancel-button,
.nc-search-inline input[type="search"]::-webkit-search-cancel-button,
.nc-search-form input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; display: none;
}

/* Live search suggestions dropdown */
.nc-has-suggest { position: relative; }
.nc-search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  /* Same reasoning as the dropdown panel: it hangs off a white-text bar, so it
     must state its own ink rather than inherit it. */
  color: var(--nc-header-text, #241a2e);
  background: #fff; border: 1px solid var(--nc-header-border, #ece7f1); border-radius: var(--nc-radius);
  box-shadow: 0 26px 60px -22px rgba(30, 10, 40, 0.45);
  max-height: min(70vh, 460px); overflow-y: auto; overflow-x: hidden;
  display: none; padding: 6px;
  overscroll-behavior: contain;
}
.nc-search-suggest.is-open { display: block; }
.nc-search-suggest a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.6rem; border-radius: var(--nc-radius-sm);
  min-width: 0; max-width: 100%;
}
.nc-header .nc-search-suggest a,
.nc-search-suggest a { color: var(--nc-header-text, #241a2e); }
.nc-header .nc-search-suggest a:hover,
.nc-search-suggest a:hover { color: var(--nc-accent-strong, #7a48b0); }
.nc-search-suggest a:hover { background: var(--nc-header-hover, #f5f0f8); }
.nc-search-suggest img, .nc-search-suggest__ph { width: 46px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--nc-header-hover); }
.nc-search-suggest__info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nc-search-suggest__title { font-weight: 500; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-search-suggest__price { color: var(--nc-accent); font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-search-suggest__all { justify-content: center; font-weight: 600; color: var(--nc-accent); border-top: 1px solid var(--nc-header-border); margin-top: 4px; border-radius: 0; }
.nc-search-suggest__empty { padding: 1rem; text-align: center; color: var(--nc-header-muted); margin: 0; }
/* Scrollbar matches the panel it sits on (light in header, dark in drawer/overlay) */
.nc-search-suggest { scrollbar-width: thin; scrollbar-color: #d9d0e3 transparent; }
.nc-search-suggest::-webkit-scrollbar { width: 8px; height: 0; }
.nc-search-suggest::-webkit-scrollbar-track { background: transparent; }
.nc-search-suggest::-webkit-scrollbar-thumb { background: #d9d0e3; border-radius: 10px; border: 2px solid #fff; }
.nc-search-suggest::-webkit-scrollbar-thumb:hover { background: var(--nc-accent); }
.nc-drawer .nc-search-suggest,
.nc-search-overlay .nc-search-suggest,
.nc-shop-sidebar .nc-search-suggest { scrollbar-color: var(--nc-border) transparent; }
.nc-drawer .nc-search-suggest::-webkit-scrollbar-thumb,
.nc-search-overlay .nc-search-suggest::-webkit-scrollbar-thumb,
.nc-shop-sidebar .nc-search-suggest::-webkit-scrollbar-thumb { background: var(--nc-border); border-color: var(--nc-elevated); }
/* Dark surfaces (drawer, search overlay, shop filters) get a dark suggest panel */
.nc-drawer .nc-search-suggest,
.nc-search-overlay .nc-search-suggest,
.nc-shop-sidebar .nc-search-suggest {
  background: var(--nc-elevated); border-color: var(--nc-border);
  box-shadow: var(--nc-shadow);
}
.nc-drawer .nc-search-suggest a,
.nc-search-overlay .nc-search-suggest a,
.nc-shop-sidebar .nc-search-suggest a { color: var(--nc-text); }
.nc-drawer .nc-search-suggest a:hover,
.nc-search-overlay .nc-search-suggest a:hover,
.nc-shop-sidebar .nc-search-suggest a:hover { background: var(--nc-surface-2); color: var(--nc-accent-2); }
.nc-drawer .nc-search-suggest img, .nc-drawer .nc-search-suggest__ph,
.nc-search-overlay .nc-search-suggest img, .nc-search-overlay .nc-search-suggest__ph,
.nc-shop-sidebar .nc-search-suggest img, .nc-shop-sidebar .nc-search-suggest__ph { background: var(--nc-surface-2); }
.nc-drawer .nc-search-suggest__price,
.nc-search-overlay .nc-search-suggest__price,
.nc-shop-sidebar .nc-search-suggest__price { color: var(--nc-accent-2); }
.nc-drawer .nc-search-suggest__all,
.nc-search-overlay .nc-search-suggest__all,
.nc-shop-sidebar .nc-search-suggest__all { color: var(--nc-accent-2); border-top-color: var(--nc-border); }
.nc-drawer .nc-search-suggest__empty,
.nc-search-overlay .nc-search-suggest__empty,
.nc-shop-sidebar .nc-search-suggest__empty { color: var(--nc-text-muted); }

/* Header actions */
.nc-header__actions { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; }
.nc-icon-btn {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: var(--nc-nav-fg);
  cursor: pointer; transition: all var(--nc-transition); padding: 0;
}
.nc-icon-btn::before { display: none; }
.nc-icon-btn:hover { background: var(--nc-nav-hover-bg); color: var(--nc-nav-hover-fg); box-shadow: none; transform: none; filter: none; }
.nc-icon-btn:focus-visible { outline: 2px solid var(--nc-nav-hover-fg); outline-offset: 2px; }
.nc-icon-btn svg { width: 21px; height: 21px; }
.nc-count, .nc-cart-count {
  position: absolute; top: 1px; right: 1px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 700; font-family: var(--nc-font-head);
  background: var(--nc-nav-badge-bg, #ffffff); border-radius: 100px;
  border: 2px solid var(--nc-nav-badge-ring, transparent); line-height: 1;
}
/* Flagged for the same reason as the dropdown ink: the badge sits inside
   .nc-icon-btn, whose colour is the bar's white. Any failure to resolve the
   token here leaves white digits on a white pill — an invisible cart count. */
.nc-header .nc-count, .nc-header .nc-cart-count,
.nc-count, .nc-cart-count { color: var(--nc-nav-badge-fg, #7a48b0) !important; }
.nc-count[data-count="0"] { display: none; }
.nc-header__search-toggle { display: none; }
.nc-burger { display: none; }

/* Cart slider (off-canvas mini-cart) — WHITE themed, no shadow.
   Local light tokens so every child that uses a var goes light (the panel
   renders outside .nc-site-main, so it wouldn't inherit the light theme). */
.nc-minicart {
  --nc-surface:      #ffffff;
  --nc-surface-2:    #f6f2fb;
  --nc-elevated:     #ece4f6;
  --nc-border:       #e8e1f1;
  --nc-border-soft:  #f0ebf7;
  --nc-text:         #2c2438;
  --nc-text-muted:   #6a6178;
  --nc-text-faint:   #9a92a8;
  --nc-heading:      #201a2b;
  --nc-accent-2:     #7c4fb8;

  position: fixed; top: 0; right: 0; bottom: 0; z-index: 320;
  width: min(412px, 92vw); background: #ffffff;
  border-left: 1px solid var(--nc-border); box-shadow: none;
  transform: translateX(100%); transition: transform var(--nc-transition);
  display: flex; flex-direction: column;
  color: var(--nc-text);
}
.nc-minicart.is-open { transform: translateX(0); }
.nc-minicart__head { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--nc-border); }
.nc-minicart__head h3 { margin: 0; font-size: 1.12rem; display: flex; align-items: center; gap: 0.5rem; }
.nc-minicart__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; overscroll-behavior: contain; }
.nc-minicart__foot { border-top: 1px solid var(--nc-border); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.nc-minicart__subtotal { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--nc-font-head); font-size: 1.05rem; color: var(--nc-heading); margin-bottom: 0.2rem; }
.nc-minicart__empty { text-align: center; color: var(--nc-text-muted); padding: 2.5rem 0; }
.nc-minicart__empty svg { margin: 0 auto 1rem; color: var(--nc-text-faint); }

/* Search overlay (mobile / fallback) */
.nc-search-overlay {
  position: fixed; inset: 0; z-index: 340;
  background: rgba(8, 4, 12, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid; place-items: start center; padding: 14vh 18px 18px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity var(--nc-transition), visibility var(--nc-transition);
}
.nc-search-overlay.is-open { opacity: 1; visibility: visible; }
.nc-search-overlay__box { width: min(680px, 100%); }
.nc-search-overlay__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.nc-search-overlay__top .nc-eyebrow { margin: 0; }
/* Close (✕) button — fixed square, centered glyph, visible on dark, never shifts */
.nc-search-overlay__close {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nc-radius-sm);
  color: var(--nc-text); border: 1px solid var(--nc-border); background: var(--nc-surface-2);
}
.nc-search-overlay__close:hover,
.nc-search-overlay__close:active { background: var(--nc-accent); color: #fff; border-color: var(--nc-accent); transform: none; }
.nc-search-overlay__close svg { width: 20px; height: 20px; }
/* Search bar: [ input (with clear ✕ inside, shows on type) ] [ 🔍 submit outside ] */
.nc-search-inline--overlay { position: relative; display: flex; gap: 0.6rem; align-items: stretch; width: 100%; }
.nc-search-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.nc-search-inline--overlay input[type="search"],
.nc-search-inline--overlay .nc-search-input {
  width: 100%; height: 58px;
  background: var(--nc-surface-2) !important;
  border: 1px solid var(--nc-border) !important;
  color: var(--nc-text) !important;
  font-size: 1.1rem;
  border-radius: var(--nc-radius-sm);
  padding: 0 3em 0 1.2rem; /* right padding leaves room for the clear ✕ */
}
.nc-search-inline--overlay input[type="search"]::placeholder { color: var(--nc-text-faint); }
.nc-search-inline--overlay input[type="search"]:focus { border-color: var(--nc-accent) !important; box-shadow: 0 0 0 3px var(--nc-accent-soft); outline: none; }
/* Hide the browser's native search clear button — we use our own */
.nc-search-inline--overlay input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* Clear ✕ inside the input on the right — hidden until the field has text */
.nc-search-clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--nc-text-muted); cursor: pointer;
}
.nc-search-clear::before { display: none; }
.nc-search-clear:hover,
.nc-search-clear:active { background: var(--nc-elevated); color: var(--nc-text); transform: translateY(-50%); box-shadow: none; }
.nc-search-clear svg { width: 16px; height: 16px; }
.nc-search-field input:not(:placeholder-shown) ~ .nc-search-clear { display: inline-flex; }
/* Magnifier submit OUTSIDE the input (overlay context) */
.nc-search-inline--overlay .nc-search-submit {
  flex: 0 0 58px; width: 58px; height: 58px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nc-radius-sm);
}
.nc-search-inline--overlay .nc-search-submit:hover,
.nc-search-inline--overlay .nc-search-submit:active { transform: none; }
.nc-search-inline--overlay .nc-search-submit svg { width: 22px; height: 22px; }
.nc-search-overlay .nc-search-suggest { top: calc(100% + 10px); }
@media (max-width: 720px) {
  .nc-search-overlay { padding: 12px; align-items: start; }
  .nc-search-overlay__box {
    background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg);
    padding: 1.1rem; box-shadow: var(--nc-shadow);
  }
  .nc-search-overlay__close { width: 40px; height: 40px; }
  .nc-search-inline--overlay input[type="search"] { height: 52px; font-size: 1rem; padding: 0 2.8em 0 1.05rem; }
  .nc-search-inline--overlay .nc-search-submit { flex-basis: 52px; width: 52px; height: 52px; }
  .nc-search-overlay .nc-search-suggest { max-height: min(58vh, 420px); }
}

/* Standalone search form (404, widgets) */
.nc-search-form { display: flex; gap: 0.6rem; align-items: stretch; }
.nc-search-form input[type="search"] { flex: 1; min-width: 0; }
.nc-search-form .nc-btn { flex: 0 0 auto; align-self: stretch; width: 54px; min-width: 54px; padding: 0; border-radius: var(--nc-radius-sm); }
.nc-search-form .nc-btn:hover, .nc-search-form .nc-btn:active { transform: none; }
.nc-search-form .nc-btn svg { width: 20px; height: 20px; }

/* Show/hide inline search vs. toggle by width */
@media (min-width: 1180px) {
  .nc-header__search-toggle { display: none !important; }
}
@media (max-width: 1179px) {
  .nc-header__search { display: none; }
  .nc-header__search-toggle { display: grid; }
}

/* 7. HERO & HOME =========================================================== */
.nc-hero { position: relative; padding-block: clamp(56px, 9vw, 130px); overflow: hidden; }
.nc-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.nc-hero h1 { margin-bottom: 1rem; }
.nc-hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--nc-text-muted); max-width: 46ch; margin-bottom: 2rem; }
.nc-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.4rem; }
.nc-hero__stats { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.nc-hero__stat b { display: block; font-family: var(--nc-font-head); font-size: 1.7rem; color: var(--nc-heading); }
.nc-hero__stat span { font-size: 0.85rem; color: var(--nc-text-faint); }
.nc-hero__visual { position: relative; }
.nc-hero__card {
  position: relative; border-radius: var(--nc-radius-lg); overflow: hidden;
  border: 1px solid var(--nc-border); background: var(--nc-surface);
  box-shadow: var(--nc-shadow); aspect-ratio: 4 / 4.4;
}
.nc-hero__card img { width: 100%; height: 100%; object-fit: cover; }
.nc-hero__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; z-index: -1; }
.nc-hero__blob--1 { width: 340px; height: 340px; background: var(--nc-accent); top: -60px; right: -40px; }
.nc-hero__blob--2 { width: 260px; height: 260px; background: var(--nc-accent-2); bottom: -50px; left: -30px; opacity: 0.35; }
.nc-hero__float {
  position: absolute; background: rgba(24, 16, 34, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--nc-border); border-radius: var(--nc-radius);
  padding: 0.9rem 1.1rem; box-shadow: var(--nc-shadow-sm); display: flex; align-items: center; gap: 0.7rem;
}
.nc-hero__float--tr { top: 8%; right: -6%; }
.nc-hero__float--bl { bottom: 10%; left: -8%; }
.nc-hero__float b { font-family: var(--nc-font-head); color: var(--nc-heading); display: block; font-size: 0.95rem; }
.nc-hero__float span { font-size: 0.75rem; color: var(--nc-text-faint); }
.nc-hero__float-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--nc-accent-soft); color: var(--nc-accent-2); }

/* Feature / trust strip */
.nc-features { border-block: 1px solid var(--nc-border-soft); background: var(--nc-bg-alt); }
.nc-feature { display: flex; align-items: center; gap: 1rem; padding: 1.6rem 0; }
.nc-feature__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--nc-accent-soft); color: var(--nc-accent-2); }
.nc-feature h4 { margin: 0 0 0.15em; font-size: 1rem; }
.nc-feature p { margin: 0; font-size: 0.85rem; color: var(--nc-text-faint); }

/* Category cards */
.nc-cat-card {
  position: relative; display: block; border-radius: var(--nc-radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; border: 1px solid var(--nc-border); background: var(--nc-surface);
  transition: transform var(--nc-transition), box-shadow var(--nc-transition), border-color var(--nc-transition);
}
.nc-cat-card:hover { transform: translateY(-6px); box-shadow: var(--nc-shadow); border-color: var(--nc-accent); }
.nc-cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: transform 0.6s ease, opacity var(--nc-transition); }
.nc-cat-card:hover img { transform: scale(1.08); opacity: 0.7; }
.nc-cat-card__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; background: linear-gradient(to top, rgba(10,11,18,0.92) 8%, transparent 65%); }
.nc-cat-card__body h3 { margin: 0 0 0.15em; font-size: 1.25rem; }
.nc-cat-card__body span { color: var(--nc-text-muted); font-size: 0.85rem; }
.nc-cat-card--tall { grid-row: span 2; aspect-ratio: auto; }
/* Category mosaic grid (responsive) */
.nc-cat-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--nc-gap); }
@media (max-width: 900px) { .nc-cat-grid { grid-template-columns: 1fr 1fr; } .nc-cat-card--tall { grid-row: span 1; aspect-ratio: 3 / 4; } }
@media (max-width: 520px) { .nc-cat-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* Promo banner */
.nc-promo {
  position: relative; border-radius: var(--nc-radius-lg); overflow: hidden;
  padding: clamp(36px, 6vw, 72px);
  background: linear-gradient(120deg, var(--nc-surface) 0%, var(--nc-surface-2) 100%);
  border: 1px solid var(--nc-border);
}
.nc-promo::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--nc-accent-soft), transparent 70%); top: -140px; right: -120px; }
.nc-promo__inner { position: relative; max-width: 560px; }

/* Newsletter */
.nc-newsletter { text-align: center; }
.nc-newsletter form { display: flex; gap: 0.6rem; max-width: 480px; margin: 1.6rem auto 0.8rem; }
.nc-newsletter input { border-radius: 100px; }
.nc-newsletter small { color: var(--nc-text-faint); }

/* Section header w/ link */
.nc-section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 42px); }
.nc-section-head-row .nc-section-head { margin-bottom: 0; }

/* 8. CARDS & PRODUCTS ====================================================== */
.nc-card { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); overflow: hidden; transition: transform var(--nc-transition), box-shadow var(--nc-transition), border-color var(--nc-transition); }
.nc-card:hover { transform: translateY(-4px); box-shadow: var(--nc-shadow); border-color: var(--nc-border); }

/* generic product grid used by home featured (WooCommerce styles in woocommerce.css) */
.nc-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nc-gap); list-style: none; margin: 0; padding: 0; }

/* 9. FOOTER ================================================================ */
.nc-footer { background: var(--nc-bg-alt); border-top: 1px solid var(--nc-border-soft); margin-top: auto; }
.nc-footer__cta { border-bottom: 1px solid var(--nc-border-soft); }
.nc-footer__main { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); padding-block: clamp(44px, 6vw, 72px); }
.nc-footer__about p { color: var(--nc-text-muted); max-width: 34ch; margin-top: 1rem; }
.nc-footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nc-text-faint); margin-bottom: 1.2rem; }
.nc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.nc-footer ul a { color: var(--nc-text-muted); font-size: 0.92rem; }
.nc-footer ul a:hover { color: var(--nc-text); padding-left: 4px; }
.nc-socials { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.nc-socials a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--nc-surface); border: 1px solid var(--nc-border); color: var(--nc-text-muted); }
.nc-socials a:hover { color: #fff; background: var(--nc-accent); border-color: var(--nc-accent); transform: translateY(-2px); }
.nc-footer__pay { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.nc-footer__pay span { padding: 0.35rem 0.7rem; border: 1px solid var(--nc-border); border-radius: 8px; font-size: 0.72rem; color: var(--nc-text-faint); font-family: var(--nc-font-head); }
.nc-footer__bottom { border-top: 1px solid var(--nc-border-soft); padding-block: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--nc-text-faint); }

/* Footer widgets — plugin/native widgets render flat (no card box) and match
   the placeholder column styling, whatever markup they output. */
.nc-footer .nc-widget,
.nc-footer .widget {
  background: transparent; border: 0; border-radius: 0;
  padding: 0; margin: 0 0 1.6rem;
}
.nc-footer .nc-footer__col > *:last-child { margin-bottom: 0; }
.nc-footer .widget-title,
.nc-footer .nc-widget h1, .nc-footer .nc-widget h2, .nc-footer .nc-widget h3,
.nc-footer .nc-widget h4, .nc-footer .nc-widget h5, .nc-footer .nc-widget h6 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--nc-text-faint); margin: 0 0 1.2rem; padding: 0; border: 0;
}
.nc-footer .nc-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.nc-footer .nc-widget ul ul { margin-top: 0.7rem; padding-left: 0.9rem; }
.nc-footer .nc-widget li { margin: 0; }
.nc-footer .nc-widget a { color: var(--nc-text-muted); font-size: 0.92rem; }
.nc-footer .nc-widget a:hover { color: var(--nc-text); }
.nc-footer .nc-widget p { color: var(--nc-text-muted); font-size: 0.92rem; }
.nc-footer .nc-widget select,
.nc-footer .nc-widget input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) { width: 100%; background: var(--nc-surface); }
.nc-footer .nc-widget img { max-width: 100%; height: auto; }
.nc-footer .nc-widget table { width: 100%; font-size: 0.85rem; }
.nc-footer .nc-widget .wp-block-group,
.nc-footer .nc-widget .textwidget { color: var(--nc-text-muted); }

/* Footer-builder plugin compatibility (Boostify HF, Elementor HF / HFE, …) ---
   These plugins output their own footer (an Elementor template) that ships its
   own colours, icons, logo and spacing. The theme's global element styles must
   not repaint them. Insulate the WHOLE builder footer — headings, text, links,
   icons, logo and lists — so its own design wins. (Reported symptom: footer
   icon / text / logo "breaking"; see also the checkout/cart safety net in
   assets/css/woocommerce.css.) The wrapper matches Boostify ([class*="boostify"]),
   Elementor HF (.elementor-location-footer) and HFE (.ehf-footer). */

/* Headings & body text keep the builder's own colour, not the theme's */
:is([class*="boostify"], .elementor-location-footer, .ehf-footer) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  letter-spacing: normal;
}
:is([class*="boostify"], .elementor-location-footer, .ehf-footer)
  :is(p, span, li, td, .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-heading-title) {
  color: inherit;
}

/* Plain links tint on hover; icon & social-icon links keep their own colours */
:is([class*="boostify"], .elementor-location-footer, .ehf-footer)
  a:not(.nc-btn):not(.button):not(.elementor-button):not(.elementor-icon):not(.elementor-social-icon) {
  color: inherit;
}
:is([class*="boostify"], .elementor-location-footer, .ehf-footer)
  a:not(.nc-btn):not(.button):not(.elementor-button):not(.elementor-icon):not(.elementor-social-icon):hover {
  color: var(--nc-accent-2);
}

/* Icons follow the widget's own colour — the global `svg{fill}`/`i` reset and
   the checkout colour overrides must not flatten them */
:is([class*="boostify"], .elementor-location-footer, .ehf-footer)
  :is(.elementor-icon, .elementor-social-icon, .elementor-icon-list-icon) :is(svg, i) {
  color: inherit;
  fill: currentColor;
}

/* …and keep an icon's SIZE, not just its colour.

   `img, svg, video { max-width:100%; height:auto; display:block }` at the top of
   this file is written for content images. An icon SVG carries only a viewBox,
   so `height:auto` lets it scale to its container's width: a 24px phone icon in
   a half-width footer column renders several hundred pixels tall, overlapping
   everything beside it.

   Elementor's own `.elementor-icon svg { width:1em; height:1em }` normally
   outranks the reset, so this only bites when the builder's icon CSS is absent —
   optimized asset loading skipping a widget, a cached page served before the
   stylesheet registered, or a widget whose handle never enqueued. Pinning the
   size here turns that from a broken layout into a slightly plain icon.

   `:not([width])` is what makes this safe: noctura_icon() always prints
   width/height attributes, so the theme's own icons never match this rule. */
:is([class*="boostify"], .ehf-footer, .ehf-header,
    .elementor-location-footer, .elementor-location-header)
  svg:not([width]) {
  width: 1em;
  height: 1em;
}

/* Logo / images — show at the builder's own size (don't force block / height) */
:is([class*="boostify"], .elementor-location-footer, .ehf-footer)
  :is(.elementor-widget-image, .elementor-widget-theme-site-logo) :is(img, svg) {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Lists sit flush (undo the theme's default list indent) */
:is([class*="boostify"], .elementor-location-footer, .ehf-footer) :is(ul, ol) {
  padding-left: 0;
  list-style: none;
}

/* Buttons keep the builder's own look */
:is([class*="boostify"], .elementor-location-footer, .ehf-footer) button:not(.nc-btn):hover {
  transform: none;
  box-shadow: none;
}
:is([class*="boostify"], .elementor-location-footer, .ehf-footer) .elementor-button {
  background-image: none;
}

/* 10. BLOG / SINGLE / COMMENTS ============================================= */
.nc-post-card { display: flex; flex-direction: column; height: 100%; }
.nc-post-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.nc-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.nc-post-card:hover .nc-post-card__media img { transform: scale(1.06); }
.nc-post-card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.nc-post-card__meta { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--nc-text-faint); }
.nc-post-card__title { font-size: 1.2rem; margin: 0; }
.nc-post-card__title a { color: var(--nc-heading); }
.nc-post-card__title a:hover { color: var(--nc-accent-2); }
.nc-post-card__excerpt { color: var(--nc-text-muted); font-size: 0.92rem; margin: 0; flex: 1; }

.nc-tag { display: inline-block; font-size: 0.72rem; font-family: var(--nc-font-head); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nc-accent-2); background: var(--nc-accent-soft); padding: 0.3em 0.8em; border-radius: 100px; }

.nc-single__header { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); }
.nc-single__meta { display: flex; justify-content: center; gap: 1.4rem; color: var(--nc-text-faint); font-size: 0.88rem; margin-top: 1rem; }
.nc-single__thumb { border-radius: var(--nc-radius-lg); overflow: hidden; margin-bottom: clamp(28px, 4vw, 48px); border: 1px solid var(--nc-border); }
.nc-entry-content { font-size: 1.05rem; }
.nc-entry-content h2, .nc-entry-content h3 { margin-top: 1.8em; }
.nc-entry-content img { border-radius: var(--nc-radius); margin-block: 1.5rem; }
.nc-entry-content ul, .nc-entry-content ol { margin-bottom: 1.2em; }
.nc-entry-content > *:last-child { margin-bottom: 0; }

.nc-widget { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.nc-widget .widget-title, .nc-widget h2, .nc-widget h3 { font-size: 1.05rem; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--nc-border); }
.nc-widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.nc-widget ul a { color: var(--nc-text-muted); }
.nc-widget ul a:hover { color: var(--nc-text); }

.nc-comments { margin-top: clamp(36px, 5vw, 60px); }
.nc-comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.nc-comment { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); padding: 1.4rem; }
.nc-comment .children { list-style: none; margin: 1.2rem 0 0; padding-left: clamp(12px, 3vw, 32px); border-left: 2px solid var(--nc-border); display: flex; flex-direction: column; gap: 1.2rem; }
.nc-comment__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.nc-comment__head img { border-radius: 50%; }
.nc-comment__author { font-family: var(--nc-font-head); font-weight: 600; color: var(--nc-heading); }
.nc-comment__date { font-size: 0.8rem; color: var(--nc-text-faint); }

/* Pagination */
.nc-pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: clamp(32px, 4vw, 52px); }
.nc-pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 0.8rem;
  display: inline-grid; place-items: center;
  border: 1px solid var(--nc-border); border-radius: var(--nc-radius-sm);
  color: var(--nc-text-muted); font-family: var(--nc-font-head); font-weight: 600;
  transition: all var(--nc-transition);
}
.nc-pagination .page-numbers:hover,
.nc-pagination .page-numbers.current { background: var(--nc-accent); color: #fff; border-color: var(--nc-accent); }

/* Breadcrumb */
.nc-breadcrumb { font-size: 0.85rem; color: var(--nc-text-faint); padding-block: 1.1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.nc-breadcrumb a { color: var(--nc-text-muted); }
.nc-breadcrumb a:hover { color: var(--nc-accent-2); }

/* Page header banner (heights / bg / breadcrumb controlled per page — see inc/page-header.php) */
.nc-page-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  background-color: var(--nc-bg-alt);
  /* Brand gradient wash — replaced automatically when a page sets its own
     background image (inline style wins over this default). */
  background-image:
    linear-gradient(118deg, rgba(var(--nc-accent-rgb), 0.22) 0%, rgba(var(--nc-accent-rgb), 0.07) 34%, transparent 62%),
    radial-gradient(44rem 24rem at 88% -30%, rgba(var(--nc-accent-rgb), 0.28), transparent 70%);
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--nc-border-soft);
  text-align: center;
}
.nc-page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40rem 20rem at 50% -30%, var(--nc-accent-soft), transparent 70%); pointer-events: none; }
.nc-page-hero--image::before { display: none; }
.nc-page-hero__overlay { position: absolute; inset: 0; background: #06030a; pointer-events: none; }
.nc-page-hero__inner { position: relative; width: 100%; }
.nc-page-hero--compact { padding-block: clamp(16px, 2.5vw, 30px); }
.nc-page-hero--medium  { padding-block: clamp(26px, 4vw, 50px); }
.nc-page-hero--tall    { padding-block: clamp(48px, 7vw, 96px); }
.nc-page-hero--image .nc-page-hero__title,
.nc-page-hero--image h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.nc-page-hero p,
.nc-page-hero__subtitle { color: var(--nc-text-muted); max-width: 60ch; margin-inline: auto; }
.nc-page-hero--image .nc-page-hero__subtitle { color: rgba(255, 255, 255, 0.82); }
.nc-page-hero__subtitle { margin-top: 0.7rem; }
.nc-page-hero__subtitle > *:last-child { margin-bottom: 0; }
.nc-page-hero .nc-eyebrow { justify-content: center; }
.nc-page-hero__crumb { justify-content: center; padding-block: 0; margin-top: 0.9rem; }
.nc-page-hero__inner > .nc-page-hero__crumb:first-child { margin-top: 0; margin-bottom: 0.9rem; }
/* Breadcrumb-only bar (single product) — a slim strip, no empty title space */
.nc-page-hero--crumb-only { padding-block: 0.85rem !important; min-height: 0 !important; text-align: left; }
.nc-page-hero--crumb-only .nc-page-hero__crumb,
.nc-page-hero--crumb-only .nc-page-hero__inner > .nc-page-hero__crumb:first-child {
  justify-content: flex-start; margin: 0;
}
/* Alignment variants */
.nc-page-hero--left  { text-align: left; }
.nc-page-hero--right { text-align: right; }
.nc-page-hero--left p, .nc-page-hero--left .nc-page-hero__subtitle { margin-inline: 0; }
.nc-page-hero--right p, .nc-page-hero--right .nc-page-hero__subtitle { margin-inline: 0 0; margin-left: auto; }
.nc-page-hero--left .nc-eyebrow, .nc-page-hero--left .nc-page-hero__crumb { justify-content: flex-start; }
.nc-page-hero--right .nc-eyebrow, .nc-page-hero--right .nc-page-hero__crumb { justify-content: flex-end; }

/* 404 */
.nc-404 { text-align: center; padding-block: clamp(60px, 10vw, 130px); }
.nc-404 h1 { font-size: clamp(5rem, 18vw, 11rem); line-height: 1; margin: 0; }

/* 11. UTILITIES ============================================================ */
.nc-flex { display: flex; }
.nc-items-center { align-items: center; }
.nc-justify-between { justify-content: space-between; }
.nc-gap-sm { gap: 0.6rem; }
.nc-mt-0 { margin-top: 0; }
.nc-mb-0 { margin-bottom: 0; }
.nc-text-center { text-align: center; }
.nc-muted { color: var(--nc-text-muted); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--nc-accent); color: #fff; padding: 0.8rem 1.2rem; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; color: #fff; }
.nc-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nc-reveal.is-visible { opacity: 1; transform: none; }
body.nc-no-scroll { overflow: hidden; }

.nc-alignwide { width: min(100%, 1100px); margin-inline: auto; }
.nc-alignfull { width: 100%; }

/* Wishlist page */
/* The `hidden` attribute must win over these display:flex rules, otherwise the
   loader/bar/grid stay visible even after JS toggles them (why the page showed
   "Loading…" forever). */
.nc-wishlist [hidden],
.nc-wishlist__loading[hidden],
.nc-wishlist__bar[hidden],
.nc-wishlist__grid[hidden],
.nc-wishlist__empty[hidden] { display: none !important; }
.nc-wishlist__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--nc-surface); border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius); padding: 0.85rem 1.2rem; margin-bottom: 1.5rem;
}
.nc-wishlist__count { display: flex; align-items: center; gap: 0.55rem; color: var(--nc-text-muted); font-size: 0.95rem; }
.nc-wishlist__count svg { color: var(--nc-accent-2); }
.nc-wishlist__count strong { color: var(--nc-heading); font-family: var(--nc-font-head); }
.nc-wishlist__bar-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.nc-wishlist__clear:hover { border-color: var(--nc-danger); color: var(--nc-danger); background: transparent; }
.nc-wishlist__grid li.product.is-removing {
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
@media (max-width: 560px) {
  .nc-wishlist__bar { flex-direction: column; align-items: stretch; text-align: center; }
  .nc-wishlist__count { justify-content: center; }
  .nc-wishlist__bar-actions { justify-content: center; }
  .nc-wishlist__bar-actions .nc-btn { flex: 1; }
}
.nc-wishlist__loading {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 4rem 0; color: var(--nc-text-muted);
}
.nc-wishlist__spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--nc-border); border-top-color: var(--nc-accent);
  animation: nc-spin 0.8s linear infinite;
}
@keyframes nc-spin { to { transform: rotate(360deg); } }
.nc-wishlist__empty { text-align: center; padding: clamp(48px, 8vw, 96px) 0; }
/* Only the big heart icon (direct child) — NOT the arrow inside the button */
.nc-wishlist__empty > svg { display: block; margin: 0 auto 1.2rem; color: var(--nc-accent-2); }
.nc-wishlist__empty h2 { margin-bottom: 0.4rem; }
.nc-wishlist__empty .nc-btn { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: 0.5em; }
.nc-wishlist__empty .nc-btn svg { display: inline-block; margin: 0; color: currentColor; width: 16px; height: 16px; }

/* Long tables inside content never break the layout */
.nc-entry-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }

/* …except WooCommerce's own, which are NOT author content.
   Cart, checkout, my-account and order pages are ordinary WordPress pages, so
   their tables sit inside .nc-entry-content and were being turned into scroll
   containers. `display: block` stops a table doing table layout: the columns
   shrink to fit their text and the whole thing sits in a puddle on the left of
   its container however wide the page is — which is why the cart's line items
   never reached the edge of their own card. These tables already carry
   WooCommerce's `shop_table_responsive` behaviour for small screens. */
.nc-entry-content .woocommerce table,
.nc-entry-content table.shop_table,
.nc-entry-content table.variations,
.nc-entry-content table.woocommerce-product-attributes {
  display: table;
  overflow-x: visible;
}

/* 12. RESPONSIVE =========================================================== */
@media (max-width: 1100px) {
  .nc-hero__grid { grid-template-columns: 1fr; }
  .nc-hero__visual { max-width: 480px; margin-inline: auto; order: -1; }
  .nc-hero__float--tr { right: 2%; }
  .nc-hero__float--bl { left: 2%; }
  .nc-grid--4, .nc-products { grid-template-columns: repeat(3, 1fr); }
  .nc-footer__main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 992px) {
  .nc-nav { display: none; }
  .nc-topbar__links { display: none; }
  .nc-burger { display: grid; }
  .nc-layout-sidebar { grid-template-columns: 1fr; }
  .nc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .nc-header__inner { gap: 0.6rem; justify-content: space-between; }
  /* With the nav hidden, its auto margins vanish — pin actions to the right */
  .nc-header__actions { margin-left: auto; }
  .nc-topbar { font-size: calc(var(--nc-topbar-size, 0.82rem) - 0.04rem); }
  .nc-topbar__inner { justify-content: center; text-align: center; min-height: 36px; }
  .nc-topbar__msg { justify-content: center; }
  /* The links column is gone, so the message + close button own the bar */
  .nc-topbar__actions { margin-left: 0; }
}
@media (max-width: 768px) {
  :root { --nc-header-h: 62px; }
  .nc-header__actions { gap: 0; }
  .nc-single__meta { flex-wrap: wrap; gap: 0.7rem 1.2rem; }
  .nc-page-hero--tall { padding-block: clamp(36px, 9vw, 64px); }
}
@media (max-width: 720px) {
  .nc-grid--2, .nc-grid--3, .nc-grid--4, .nc-products { grid-template-columns: repeat(2, 1fr); }
  .nc-footer__main { grid-template-columns: 1fr; }
  .nc-footer__bottom { flex-direction: column; text-align: center; }
  .nc-hero__stats { gap: 1.4rem; }
  .nc-newsletter form { flex-direction: column; }
  .nc-topbar__msg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 620px) {
  .nc-hide-mobile { display: none !important; }
  .nc-icon-btn { width: 42px; height: 42px; }
  .nc-icon-btn svg { width: 20px; height: 20px; }
  .nc-hero__float { display: none; }
  .nc-logo { font-size: 1.2rem; }
  .nc-logo__mark { width: 34px; height: 34px; }
}
@media (max-width: 480px) {
  .nc-container { padding-inline: 14px; }
  .nc-grid--3, .nc-grid--4, .nc-products, .nc-grid--2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .nc-grid--4 { grid-template-columns: 1fr; }
  .nc-feature { padding: 0.9rem 0; }
  .nc-cat-card--tall { grid-row: span 1; }
  .nc-section { padding-block: clamp(36px, 8vw, 60px); }
  .nc-icon-btn { width: 40px; height: 40px; }
  .nc-count, .nc-cart-count { min-width: 17px; height: 17px; font-size: 0.6rem; }
  .nc-hero__cta .nc-btn { width: 100%; }
  .nc-footer__pay { justify-content: center; }
  .nc-pagination .page-numbers { min-width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  .nc-grid--3, .nc-grid--4, .nc-products, .nc-grid--2, .nc-cat-grid { grid-template-columns: 1fr; }
}

/* Mobile drawer nav (accordion) */
.nc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 300;
  width: min(360px, 90vw); background: var(--nc-surface);
  border-left: 1px solid var(--nc-border); box-shadow: none;
  transform: translateX(100%); transition: transform var(--nc-transition);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
/* Shadow only when open — otherwise its soft blur bleeds back onto the page's
   right edge while the drawer sits off-screen (the "shadow at right"). */
.nc-drawer.is-open { transform: translateX(0); box-shadow: var(--nc-shadow); }
.nc-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--nc-border); position: sticky; top: 0; background: var(--nc-surface); z-index: 2; }
.nc-drawer__title {
  font-family: var(--nc-font-head);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nc-text-faint);
}
.nc-drawer__search { padding: 1.1rem 1.4rem 0.4rem; position: relative; }
.nc-search-inline--drawer { width: 100%; }
.nc-search-inline--drawer input[type="search"] { background: var(--nc-surface-2) !important; border-color: var(--nc-border) !important; color: var(--nc-text) !important; }
.nc-search-inline--drawer input[type="search"]::placeholder { color: var(--nc-text-faint); }
.nc-search-inline--drawer button { color: var(--nc-text-muted); }
.nc-drawer__body { padding: 0.6rem 1.4rem 1.4rem; flex: 1; }
.nc-drawer ul { list-style: none; padding: 0; margin: 0; }
.nc-drawer .nc-drawer__list > .menu-item { border-bottom: 1px solid var(--nc-border-soft); position: relative; }
.nc-drawer .menu-item { position: relative; }
.nc-drawer .menu-item > a { display: block; padding: 0.95rem 3rem 0.95rem 0.1rem; color: var(--nc-text); font-family: var(--nc-font-head); font-weight: 500; }
.nc-drawer .menu-item > a:hover { color: var(--nc-accent-2); }
.nc-drawer .current-menu-item > a { color: var(--nc-accent-2); }
.nc-drawer__toggle {
  position: absolute; top: 0.3rem; right: -0.3rem; width: 44px; height: 44px;
  display: grid; place-items: center; background: transparent; border: 0; color: var(--nc-text-muted);
  cursor: pointer; padding: 0; border-radius: 50%;
}
.nc-drawer__toggle::before { display: none; }
.nc-drawer__toggle:hover { background: var(--nc-surface-2); color: var(--nc-text); box-shadow: none; transform: none; filter: none; }
.nc-drawer__toggle svg { transition: transform var(--nc-transition); }
.nc-drawer .menu-item.is-open > .nc-drawer__toggle svg { transform: rotate(180deg); }
.nc-drawer .sub-menu {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
  margin-left: 0.4rem; padding-left: 0.9rem;
  border-left: 1px solid var(--nc-border);
}
/* Generous height so long lists (e.g. all Brands) are never clipped */
.nc-drawer .menu-item.is-open > .sub-menu { max-height: 4000px; opacity: 1; }
.nc-drawer .menu-item.is-open > a { color: var(--nc-accent-2); }
/* Mega menu (e.g. Brands) in the drawer: reveal every nested group at once when
   the parent opens, so all brands show without tapping each sub-group. */
.nc-drawer .menu-item.mega.is-open > .sub-menu .sub-menu {
  max-height: none; opacity: 1; overflow: visible;
  border-left: 0; margin-left: 0; padding-left: 0.7rem;
}
.nc-drawer .menu-item.mega > .sub-menu .menu-item-has-children > .nc-drawer__toggle { display: none; }
.nc-drawer .menu-item.mega > .sub-menu > .menu-item-has-children > a { font-weight: 700; color: var(--nc-text); }
.nc-drawer .sub-menu .menu-item { border-bottom: 0; }
.nc-drawer .sub-menu a {
  font-size: 0.92rem; color: var(--nc-text-muted); padding: 0.6rem 0.1rem; font-weight: 400;
  transition: color var(--nc-transition), padding-left var(--nc-transition);
}
.nc-drawer .sub-menu a:hover { padding-left: 0.35rem; }
.nc-drawer__extra { border-top: 1px solid var(--nc-border); margin-top: 0.6rem; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.nc-drawer__extra a { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.1rem; color: var(--nc-text-muted); font-family: var(--nc-font-head); font-weight: 500; }
.nc-drawer__extra a:hover { color: var(--nc-text); }
.nc-drawer__extra a svg { color: var(--nc-accent-2); }
/* Logo on dark surfaces (drawer + footer) stays light */
.nc-drawer .nc-logo, .nc-footer .nc-logo { color: var(--nc-heading); }
.nc-drawer .nc-logo:hover, .nc-footer .nc-logo:hover { color: var(--nc-heading); }
/* Icon buttons on dark panels (drawer + mini-cart) use light text */
.nc-drawer .nc-icon-btn, .nc-minicart .nc-icon-btn { color: var(--nc-text-muted); }
.nc-drawer .nc-icon-btn:hover, .nc-minicart .nc-icon-btn:hover { background: var(--nc-surface-2); color: var(--nc-text); }
.nc-drawer .nc-count { border-color: var(--nc-surface); }
.nc-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(8, 4, 12, 0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--nc-transition), visibility var(--nc-transition); }
.nc-overlay.is-open { opacity: 1; visibility: visible; }

/* Navigation progress bar — slim accent line at the very top that animates
   while the next page is being fetched (activated by main.js on link click) */
.nc-nav-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 99991;
  background: var(--nc-accent-grad);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(var(--nc-accent-rgb), 0.6);
  opacity: 0; pointer-events: none;
}
.nc-nav-progress.is-active {
  opacity: 1;
  animation: nc-nav-progress 1.6s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes nc-nav-progress {
  0%   { width: 0; }
  55%  { width: 60%; }
  100% { width: 87%; }
}

/* WhatsApp button z-index kept just below back-to-top so the arrow is always tappable */

/* Floating WhatsApp chat button (bottom right) — text/icon always white.
   It floats over every page and sits on brand green, so a themed link colour
   leaking in (purple label on green) is a legibility failure, not a style
   preference. Flagged so a plugin or Additional CSS rule can't repaint it. */
.nc-whatsapp,
.nc-whatsapp:link,
.nc-whatsapp:visited,
.nc-whatsapp:hover,
.nc-whatsapp:focus,
.nc-whatsapp:active,
a.nc-whatsapp .nc-whatsapp__label,
a.nc-whatsapp .nc-whatsapp__icon { color: #fff !important; }
.nc-whatsapp * { color: inherit; }
.nc-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 994;
  display: inline-flex; align-items: center; justify-content: center;
  height: 58px; min-width: 58px; padding: 0 16px;
  border-radius: 100px;
  /* Lit from above rather than flat brand green, with an inset top highlight —
     the button reads as a physical control instead of a pasted-on circle.
     Deeper than WhatsApp's #25D366: that green carries the white "Chat with
     us" label at 1.98:1, which is unreadable as text. These stops keep the
     brand read while giving the label 4.8:1 and the icon 3.1:1. */
  background: linear-gradient(160deg, #1ba750 0%, #0e8442 45%, #0a6b33 100%);
  box-shadow:
    0 12px 28px -10px rgba(10, 107, 51, 0.62),
    0 3px 10px rgba(20, 8, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition: transform var(--nc-transition), box-shadow var(--nc-transition), filter var(--nc-transition);
}
.nc-whatsapp:hover {
  transform: translateY(-3px);
  /* brightness stays at 1 — lifting it puts the label back under 4.5:1 */
  filter: saturate(1.06);
  box-shadow:
    0 18px 36px -10px rgba(10, 107, 51, 0.7),
    0 6px 16px rgba(20, 8, 30, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.nc-whatsapp:active { transform: translateY(-1px); }
/* Both :focus and :focus-visible — a dashed UA ring was still showing through
   on the plain :focus state, which reads as a broken control. */
.nc-whatsapp:focus,
.nc-whatsapp:focus-visible { outline: none !important; }
.nc-whatsapp:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0a6b33, 0 12px 28px -10px rgba(10, 107, 51, 0.62);
}
.nc-whatsapp__icon {
  width: 28px; height: 28px; flex-shrink: 0; color: #fff;
  filter: drop-shadow(0 1px 1px rgba(12, 74, 36, 0.35));
  transition: transform var(--nc-transition);
}
.nc-whatsapp:hover .nc-whatsapp__icon { transform: scale(1.08); }
.nc-whatsapp__label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; margin-left: 0; color: #fff;
  font-family: var(--nc-font-head); font-weight: 600; font-size: 0.92rem;
  transition: max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-left 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.nc-whatsapp:hover .nc-whatsapp__label,
.nc-whatsapp:focus-visible .nc-whatsapp__label { max-width: 180px; opacity: 1; margin-left: 10px; }
.nc-whatsapp__pulse {
  position: absolute; inset: 0; border-radius: inherit;
  animation: nc-wa-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
/* The ring is decoration; it shouldn't keep moving for someone who asked the
   system to stop animations. */
@media (prefers-reduced-motion: reduce) {
  .nc-whatsapp__pulse { animation: none; }
  .nc-whatsapp:hover { transform: none; }
  .nc-whatsapp:hover .nc-whatsapp__icon { transform: none; }
}
@keyframes nc-wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 167, 80, 0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(27, 167, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 167, 80, 0); }
}
@media (max-width: 600px) {
  .nc-whatsapp { height: 52px; min-width: 52px; right: 14px; bottom: 14px; padding: 0 13px; }
  .nc-whatsapp__icon { width: 26px; height: 26px; }
}

/* Back-to-top button — sits ABOVE the WhatsApp button, bottom right.
   High z-index so third-party chat widgets don't cover it. */
.nc-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 995;
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  background: var(--nc-accent); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(var(--nc-accent-rgb), 0.6), 0 4px 12px rgba(0, 0, 0, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--nc-transition), visibility var(--nc-transition), transform var(--nc-transition), background var(--nc-transition);
}
.nc-to-top::before { display: none; }
/* Stack above the WhatsApp bubble (58px tall + 20px offset + gap) */
.nc-to-top--above-wa { bottom: 90px; }
.nc-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.nc-to-top:hover { background: var(--nc-accent-strong); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(var(--nc-accent-rgb), 0.7), 0 6px 14px rgba(0, 0, 0, 0.25); filter: none; }
.nc-to-top:active { transform: translateY(-1px); }
.nc-to-top svg { width: 20px; height: 20px; transform: rotate(180deg); }
@media (max-width: 600px) {
  .nc-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  .nc-to-top--above-wa { bottom: 76px; }
}

/* Toast notifications — bottom LEFT (chat widgets usually own bottom right) */
.nc-toasts { position: fixed; bottom: 20px; left: 20px; right: auto; z-index: 400; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.nc-toast {
  min-width: 200px; max-width: 320px;
  background: var(--nc-elevated); color: var(--nc-text);
  border: 1px solid var(--nc-border); border-left: 3px solid var(--nc-accent);
  border-radius: var(--nc-radius-sm); padding: 0.85rem 1.1rem;
  font-size: 0.9rem; font-weight: 500; box-shadow: var(--nc-shadow);
  transform: translateX(-130%); opacity: 0;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.34s ease;
}
.nc-toast.is-in { transform: none; opacity: 1; }
.nc-toast--success { border-left-color: var(--nc-success); }
@media (max-width: 520px) {
  .nc-toasts { left: 12px; right: 12px; bottom: 12px; }
  .nc-toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .nc-reveal { opacity: 1; transform: none; }
}