/* ──────────────────────────────────────────────────────────────────
 *  Nano Cart - NEON shop theme (theme-neon.css)
 *
 *  Re-skins the live demo shop to match the "Neon Streets" marketing
 *  site (nanocart.co.uk). Self-contained: the shop does not load the
 *  marketing stylesheet, so the palette, fonts, and chrome are
 *  redeclared here.
 *
 *  EVERY visual rule is gated behind html[data-theme="neon"]. When the
 *  visitor toggles the theme off (data-theme="default"), none of this
 *  applies and the shop falls back to the stock nano-cart.css look that
 *  ships with the product. The .nano-theme-toggle button is styled for
 *  BOTH states so it is always usable.
 *
 *  Fonts (Rajdhani / Saira / Major Mono Display) are loaded in
 *  template.php. The neon shop re-skin works almost entirely by
 *  overriding the --nano-cart-* custom properties that nano-cart.css
 *  already exposes; the rest is a handful of flourish rules + chrome.
 * ────────────────────────────────────────────────────────────────── */

:root {
  --nc-bg:        #0a0210;
  --nc-bg-2:      #14072a;
  --nc-bg-3:      #1d0a3e;
  --nc-ink:       #f5e6ff;
  --nc-ink-dim:   #a890c0;
  --nc-ink-faint: #6b4d8a;
  --nc-magenta:   #ff006e;
  --nc-cyan:      #00f0ff;
  --nc-yellow:    #ffd60a;
  --nc-display:   'Rajdhani', system-ui, sans-serif;
  --nc-body:      'Saira', system-ui, sans-serif;
  --nc-data:      'Major Mono Display', ui-monospace, monospace;
  --nc-marquee-h: 31px;
}

/* Always show the vertical scrollbar so the page width is identical whether a
   page scrolls or not (otherwise a short shop page and a long index page
   differ by the scrollbar width and the centred header/nav shifts). In the
   neon theme, match the marketing site's thin pink->cyan scrollbar so the two
   look identical when navigating between them. */
html { overflow-x: clip; overflow-y: scroll; scrollbar-color: var(--nc-magenta) var(--nc-bg); }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--nc-bg); }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--nc-magenta), var(--nc-cyan)); }

/* The shared chrome (marquee/header/footer) is the neon demo chrome. Hide it
   when the toggle switches to the stock theme, so that view stays the bare
   out-of-the-box product. */
html[data-theme="default"] .marquee,
html[data-theme="default"] .header,
html[data-theme="default"] .footer { display: none; }

/* ─── page backdrop ─────────────────────────────────── */
html[data-theme="neon"] body {
  margin: 0;
  padding-top: var(--nc-marquee-h);   /* clear the fixed marquee strip */
  background: var(--nc-bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 80% 0%, rgba(255, 0, 110, 0.20), transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 60%, rgba(0, 240, 255, 0.13), transparent 55%),
    radial-gradient(ellipse 60% 50% at 60% 100%, rgba(192, 0, 255, 0.18), transparent 60%);
  /* scroll, not fixed: keeps mobile scrolling smooth (lesson from the
     marketing page) */
  background-attachment: scroll;
  color: var(--nc-ink);
  font-family: var(--nc-body);
}
html[data-theme="neon"] ::selection { background: var(--nc-magenta); color: var(--nc-bg); }

/* ─── chrome: hidden by default, shown only in neon ──── */
.nano-neon-chrome { display: none; }
html[data-theme="neon"] .nano-neon-chrome { display: block; }

/* ─── marquee + header ──────────────────────────────────
 * Exact copy of the marketing site (index.html) so the shop chrome
 * matches pixel-for-pixel. Only the palette / max-width tokens are
 * renamed to this stylesheet's --nc-* names (identical values), and a
 * text-decoration reset is added since the shop has no global a{} reset. */
.marquee {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--nc-magenta);
  color: var(--nc-bg);
  font-family: var(--nc-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 2px solid var(--nc-bg);
}
.marquee-track {
  display: inline-block;
  animation: nano-neon-marquee 40s linear infinite;
  padding-left: 100%;
}
.marquee span { margin: 0 22px; }
.marquee .glyph { color: var(--nc-cyan); }
@keyframes nano-neon-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.header {
  position: sticky;
  top: 32px;
  z-index: 90;
  background: rgba(10, 2, 16, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 0, 110, 0.18);
}
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  line-height: 1.65;
}
.brand {
  font-family: var(--nc-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--nc-ink);
  font-size: 22px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-transform: uppercase;
  text-decoration: none;
}
.brand .slash { color: var(--nc-magenta); text-shadow: 0 0 14px var(--nc-magenta); }
.brand .cms { color: var(--nc-cyan); text-shadow: 0 0 14px var(--nc-cyan); }
.brand:hover .slash { color: var(--nc-cyan); text-shadow: 0 0 14px var(--nc-cyan); }
.brand:hover .cms { color: var(--nc-magenta); text-shadow: 0 0 14px var(--nc-magenta); }
.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 18px;
  font-family: var(--nc-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav a { color: var(--nc-ink-dim); padding: 8px 14px 8px 24px; position: relative; text-decoration: none; }
.nav a::before { content: '//'; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--nc-magenta); opacity: 0; transition: opacity 0.2s; }
.nav a:hover { color: var(--nc-ink); }
.nav a:hover::before { opacity: 1; }
.gh-cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;
  font-family: var(--nc-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 11px 22px;
  background: var(--nc-magenta);
  color: var(--nc-bg);
  border: 0;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.gh-cta:hover { background: var(--nc-cyan); color: var(--nc-bg); }

/* footer (full multi-column, mirrors the marketing site) */
.nano-neon-footer {
  margin-top: 64px;
  padding: 56px 0 32px;
  border-top: 1px solid rgba(255, 0, 110, 0.18);
  background: linear-gradient(180deg, var(--nc-bg-2), var(--nc-bg));
  font-family: var(--nc-body);
}
.nano-neon-footer-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.nano-neon-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
}
.nano-neon-footer-col h4 {
  font-family: var(--nc-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--nc-magenta);
  margin: 0 0 14px;
}
.nano-neon-footer-col a {
  display: block;
  padding: 5px 0;
  color: var(--nc-ink-dim);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}
.nano-neon-footer-col a:hover { color: var(--nc-cyan); }
.nano-neon-footer-tag { color: var(--nc-ink-dim); font-size: 14px; margin: 0; }
.nano-neon-footer-strip {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--nc-data);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--nc-ink-faint);
}
.nano-neon-footer-strip p { margin: 0; }
.nano-neon-footer-strip a { color: var(--nc-ink-dim); text-decoration: none; }
.nano-neon-footer-strip a:hover { color: var(--nc-cyan); }
@media (max-width: 780px) {
  .nano-neon-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 460px) {
  .nano-neon-footer-grid { grid-template-columns: 1fr; }
}

/* ─── shop re-skin via the theming contract ──────────── */
/* Overriding the properties nano-cart.css already exposes does the bulk
   of the work. Higher specificity than the stock prefers-color-scheme
   block, so neon wins regardless of the visitor's OS dark-mode setting. */
html[data-theme="neon"] .nano-cart-main {
  --nano-cart-text:        #f5e6ff;
  --nano-cart-text-muted:  #a890c0;
  --nano-cart-text-soft:   #c9b8de;
  --nano-cart-bg:          transparent;
  --nano-cart-bg-soft:     rgba(29, 10, 62, 0.55);
  --nano-cart-border:      rgba(0, 240, 255, 0.28);
  --nano-cart-border-soft: rgba(255, 0, 110, 0.22);
  --nano-cart-accent:      #00f0ff;
  --nano-cart-accent-hover:#4aeeff;
  --nano-cart-link-hover:  #ff3a92;
  --nano-cart-button:      #ff006e;
  --nano-cart-button-hover:#00f0ff;
  --nano-cart-shadow:      0 0 0 1px rgba(0, 240, 255, 0.06);
  --nano-cart-shadow-lift: 0 14px 38px rgba(255, 0, 110, 0.25);
  --nano-cart-radius:      0px;
  --nano-cart-radius-sm:   0px;
  --nano-cart-font:        var(--nc-body);
  --nano-cart-font-display:var(--nc-display);
  --nano-cart-content-width: 1240px;
  background: transparent;
  color: var(--nc-ink);
}

/* headings in the display face, uppercase */
html[data-theme="neon"] .nano-cart-product-title,
html[data-theme="neon"] .nano-cart-category-title,
html[data-theme="neon"] .nano-cart-page-title,
html[data-theme="neon"] .nano-cart-section-title,
html[data-theme="neon"] .nano-cart-card-title,
html[data-theme="neon"] .nano-cart-hero-title {
  font-family: var(--nc-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* cards: clip-path corners + neon hover glow (no continuous animation,
   keeps long category grids smooth on mobile) */
/* Flowing conic-gradient border, lifted from the landing-page cards: a
   solid inner fill clipped to padding-box sits over a rotating
   conic-gradient clipped to border-box, so cyan + magenta light arcs
   travel the perimeter. Driven by --nc-angle (animatable via @property). */
@property --nc-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes nano-neon-cardflow { to { --nc-angle: 360deg; } }

html[data-theme="neon"] .nano-cart-card,
html[data-theme="neon"] .nano-cart-hero-link {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  background-color: var(--nc-bg-2);
  background-image:
    linear-gradient(var(--nc-bg-2), var(--nc-bg-2)),
    conic-gradient(from var(--nc-angle),
      transparent 0deg,
      var(--nc-cyan) 70deg,
      transparent 130deg,
      transparent 240deg,
      var(--nc-magenta) 300deg,
      transparent 360deg);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: none;
  animation: nano-neon-cardflow 8s linear infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
html[data-theme="neon"] .nano-cart-hero-link { animation-duration: 9s; }
/* stagger the grid so the borders don't all peak together */
html[data-theme="neon"] .nano-cart-card:nth-child(3n)   { animation-delay: -2.5s; }
html[data-theme="neon"] .nano-cart-card:nth-child(3n+1) { animation-delay: -5s; }
/* Expanding magenta→cyan underline on hover, lifted from the landing
   page "features" cards so the shop grid feels like the same family. */
html[data-theme="neon"] .nano-cart-card::after,
html[data-theme="neon"] .nano-cart-hero-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nc-magenta), var(--nc-cyan));
  transition: width 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="neon"] .nano-cart-card:hover,
html[data-theme="neon"] .nano-cart-hero-link:hover {
  box-shadow: 0 12px 36px rgba(0, 240, 255, 0.22);
  transform: translateY(-3px);
}
html[data-theme="neon"] .nano-cart-card:hover::after,
html[data-theme="neon"] .nano-cart-hero-link:hover::after { width: 100%; }
html[data-theme="neon"] .nano-cart-card:hover .nano-cart-card-title { color: var(--nc-cyan); }
html[data-theme="neon"] .nano-cart-hero-body,
html[data-theme="neon"] .nano-cart-buy-panel {
  background: rgba(20, 7, 42, 0.6);
  border-color: rgba(0, 240, 255, 0.25);
}

/* Image areas get a themed backdrop so transparent PNGs or letterboxed
   ("contain") images never flash white against the dark theme. */
html[data-theme="neon"] .nano-cart-card-image,
html[data-theme="neon"] .nano-cart-hero-image,
html[data-theme="neon"] .nano-cart-gallery-main,
html[data-theme="neon"] .nano-cart-gallery-thumb-img,
html[data-theme="neon"] .nano-cart-category-banner {
  background: var(--nano-cart-card-image-bg, var(--nc-bg-3));
}

/* buy button + hero price: magenta slab with cut corner + glow */
html[data-theme="neon"] .nano-cart-buy-button,
html[data-theme="neon"] .nano-cart-hero-price {
  background: var(--nc-magenta);
  color: var(--nc-bg);
  font-family: var(--nc-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 26px rgba(255, 0, 110, 0.5);
}
html[data-theme="neon"] .nano-cart-buy-button:hover,
html[data-theme="neon"] .nano-cart-hero-link:hover .nano-cart-hero-price {
  background: var(--nc-cyan);
  color: var(--nc-bg);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
}

/* breadcrumb pill: cut corner to match the rest */
html[data-theme="neon"] .nano-cart-breadcrumb {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* gallery main image: cyan edge */
html[data-theme="neon"] .nano-cart-gallery-main-img {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.12);
}

/* footer attribution sits on the dark backdrop */
html[data-theme="neon"] .nano-cart-footer-attribution {
  border-top-color: rgba(255, 0, 110, 0.22);
  color: var(--nc-ink-faint);
}

/* ─── theme toggle button (visible in BOTH themes) ───── */
.nano-theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9500;
  font-family: var(--nc-display, system-ui, sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  color: #222222;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.nano-theme-toggle:hover { border-color: #999999; }
/* CSS-driven label so it reflects the current theme with no JS flash */
.nano-theme-toggle::before { content: "◢◤ "; }
.nano-theme-toggle::after  { content: "View neon theme"; }
html[data-theme="neon"] .nano-theme-toggle {
  border: 1px solid var(--nc-cyan);
  background: rgba(10, 2, 16, 0.85);
  color: var(--nc-cyan);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.35);
}
html[data-theme="neon"] .nano-theme-toggle:hover {
  color: var(--nc-magenta);
  border-color: var(--nc-magenta);
  box-shadow: 0 0 22px rgba(255, 0, 110, 0.4);
}
html[data-theme="neon"] .nano-theme-toggle::after { content: "View stock theme"; }

/* ─── mobile ─────────────────────────────────────────── */
/* responsive header: same breakpoints/behaviour as the marketing site */
@media (max-width: 980px) {
  .nav { display: none; }
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 2, 16, 0.92); }
  .header-inner { justify-content: space-between; gap: 16px; }
}
@media (max-width: 540px) {
  .marquee { font-size: 11px; }
  .gh-cta { padding: 9px 14px; font-size: 12px; }
}
@media (max-width: 600px) {
  .nano-theme-toggle { font-size: 11px; padding: 9px 13px; right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nano-neon-marquee-track,
  html[data-theme="neon"] .nano-cart-card,
  html[data-theme="neon"] .nano-cart-hero-link { animation: none; }
}

/* ─── category off-canvas nav (neon) ─────────────────────
 * The stock panel uses --nano-cart-bg for its backdrop, which neon sets to
 * `transparent` - so give the panel a solid neon backdrop here, and reskin
 * the floating tab + links to the magenta/cyan chrome. */
html[data-theme="neon"] .nano-cart-catnav-btn {
  background: var(--nc-magenta);
  color: var(--nc-bg);
  border: 1px solid var(--nc-magenta);
  border-right: 0;
  font-family: var(--nc-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: 0 0 22px rgba(255, 0, 110, 0.45);
}
html[data-theme="neon"] .nano-cart-catnav-btn:hover {
  background: var(--nc-cyan);
  color: var(--nc-bg);
  border-color: var(--nc-cyan);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.5);
}
html[data-theme="neon"] .nano-cart-catnav-panel {
  background: var(--nc-bg-2);
  border-left: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: -16px 0 44px rgba(255, 0, 110, 0.28);
}
html[data-theme="neon"] .nano-cart-catnav-head {
  border-bottom-color: rgba(0, 240, 255, 0.25);
  font-family: var(--nc-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nc-ink);
}
html[data-theme="neon"] .nano-cart-catnav-close { color: var(--nc-ink-dim); }
html[data-theme="neon"] .nano-cart-catnav-close:hover { color: var(--nc-cyan); }
html[data-theme="neon"] .nano-cart-catnav-links a {
  border-bottom-color: rgba(255, 255, 255, 0.07);
  color: var(--nc-ink-dim);
  font-family: var(--nc-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html[data-theme="neon"] .nano-cart-catnav-links a:hover { color: var(--nc-ink); background: rgba(0, 240, 255, 0.08); }
html[data-theme="neon"] .nano-cart-catnav-links a.is-active { color: var(--nc-cyan); background: rgba(0, 240, 255, 0.08); }

/* ---------------------------------------------------------------------- */
/* Per-deployment tweak: on phones, drop the hamburger icon from the       */
/* floating category tab and show just the "Categories" text, so the tab   */
/* reads as a small, discreet label. Unscoped (no [data-theme]) so it       */
/* applies whichever theme the toggle is on.                                */
/* ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  .nano-cart-catnav-ico { display: none; }
  .nano-cart-catnav-btn {
    padding: 0.85rem 0.4rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
  }
}