/*
Theme Name: Govind Narayan Art Gallery
Theme URI: https://govindnarayanartgallery.com
Author: Govind Narayan Art Gallery
Description: Premium WordPress theme for Govind Narayan Art Gallery — traditional Rajasthani craftsmanship from Jaipur, India.
Version: 3.0.6
License: GNU General Public License v2 or later
Text Domain: gnag
*/

/* ============================================================
   SELF-HOSTED WEB FONTS
   Previously loaded from fonts.googleapis.com / fonts.gstatic.com.
   Files live in /assets/fonts — no external requests, no visitor
   IP data sent to Google (see GNAG_URI enqueue removal in
   functions.php::gnag_assets()).
   ============================================================ */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/playfair-display-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/playfair-display-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/inter-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* ============================================================
   GNAG v3.1 ADDITIONS — Append these rules to style.css
   ============================================================ */

/* ── Logo name fix — GOVIND NARAYAN ──────────────────────── */
.logo-name {
  font-size: 1rem !important;    /* slightly smaller so two words fit */
  letter-spacing: .06em;
}

/* ════════════════════════════════════════════════════════════
   PERSISTENT NAV SEARCH BAR
   Always visible in header-actions; width scales with viewport.
   Dropdown overflows header downward via overflow:visible.
   ════════════════════════════════════════════════════════════ */

/* ── Wrapper (always visible, position:relative for dropdown) ── */
.gnag-search-expand {
  position: relative;
  align-self: center;
  /* Width matches the dropdown min-width exactly */
  width: 300px;
  overflow: visible;
}

/* ── Input pill ─────────────────────────────────────────────── */
.gnag-search-expand-inner {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .36rem .65rem .36rem .7rem;
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity, 0.1));
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  -webkit-backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--glass-highlight, 0.12)),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gnag-search-expand-inner:focus-within {
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(201, 168, 76, 0.12);
}
.gnag-search-expand-icon {
  flex-shrink: 0;
  color: var(--muted);
  pointer-events: none;
  transition: color .2s ease;
}
.gnag-search-expand-inner:focus-within .gnag-search-expand-icon {
  color: var(--accent);
}
#gnag-search-expand input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: .8rem;
  font-family: var(--font-body);
  font-weight: 500;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  padding: 0;
  line-height: 1.5;
  width: 100%;
}
#gnag-search-expand input[type="search"]:focus,
#gnag-search-expand input[type="search"]:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
#gnag-search-expand input[type="search"]::placeholder {
  color: var(--muted);
  font-weight: 400;
}
#gnag-search-input::-webkit-search-cancel-button,
#gnag-search-input::-webkit-search-decoration { display:none !important; -webkit-appearance:none; }

/* ════════════════════════════════════════════════════════════
   SEARCH DROPDOWN  — matches sort/filter panel aesthetic
   ════════════════════════════════════════════════════════════ */
/* ── Dropdown open animation ─────────────────────────────────── */
@keyframes gnagDropIn {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

.gnag-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  min-width: 300px;
  background: rgba(10, 3, 5, 0.72);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.2rem;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
  padding: .4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  transform-origin: top center;
}
.gnag-search-dropdown.open {
  display: block;
  animation: gnagDropIn .18s cubic-bezier(.4,0,.2,1) both;
}

/* ── Section label ───────────────────────────────────────────── */
.gnag-sd-section {
  padding: .35rem .65rem .2rem;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* ── Result rows ─────────────────────────────────────────────── */
.gnag-sd-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .75rem;
  cursor: pointer;
  border-radius: .75rem;
  transition: background .13s, color .13s;
}
.gnag-sd-row:last-child { border-bottom: none; }
.gnag-sd-row:hover,
.gnag-sd-row.active { background: rgba(201,168,76,0.1); color: var(--accent); }
.gnag-sd-thumb {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: .45rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.gnag-sd-thumb-placeholder {
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.gnag-sd-hist-icon { flex-shrink: 0; color: var(--muted); }
.gnag-sd-info { flex: 1; min-width: 0; }
.gnag-sd-title {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gnag-sd-row:hover .gnag-sd-title,
.gnag-sd-row.active .gnag-sd-title { color: var(--accent); }
.gnag-sd-title mark { background: transparent; color: var(--accent); font-weight: 700; }
.gnag-sd-label { font-size: .7rem; color: var(--muted); }
.gnag-sd-arrow { color: var(--muted); flex-shrink: 0; opacity: .5; }
.gnag-sd-del {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-size: .85rem; padding: .15rem .35rem;
  border-radius: .4rem; line-height: 1; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.gnag-sd-del:hover { color: var(--fg); background: var(--border); }
.gnag-sd-empty {
  padding: .9rem .75rem;
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  border-radius: .75rem;
}
/* Skeleton shimmer */
.gnag-sd-loading {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .75rem;
  border-radius: .75rem;
}
.gnag-sd-loading:last-child { border-bottom: none; }
@keyframes gnag-sd-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.gnag-sd-skel {
  border-radius: .4rem;
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 50%, var(--bg-alt) 75%);
  background-size: 400% 100%;
  animation: gnag-sd-shimmer 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
/* Type badges */
.gnag-sd-badge {
  display: inline-block;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .1rem .38rem; border-radius: .3rem;
  margin-left: .3rem; vertical-align: middle; opacity: .85;
}
.gnag-sd-badge--product   { background: rgba(201,168,76,.15);  color: #c9a84c; }
.gnag-sd-badge--service   { background: rgba(100,180,255,.12); color: #64b4ff; }
.gnag-sd-badge--itservice { background: rgba(130,230,130,.12); color: #82e682; }
.gnag-sd-badge--post      { background: rgba(200,150,255,.12); color: #c896ff; }
.gnag-sd-badge--gallery   { background: rgba(255,160,100,.12); color: #ffa064; }
.gnag-sd-badge--page      { background: rgba(180,180,180,.12); color: #aaa;    }
/* View-all footer row */
.gnag-sd-viewall {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .5rem .75rem;
  font-size: .78rem; font-weight: 600;
  color: var(--accent); cursor: pointer;
  border-radius: .75rem;
  margin-top: .2rem;
  transition: background .15s;
}
.gnag-sd-viewall:hover { background: rgba(201,168,76,0.1); }



/* ── Product title — GOLDEN by default on rows ───────────── */
.pr-title,
.pr-title a {
  color: var(--accent) !important;
}
.pr-title a:hover { color: var(--accent-h) !important; }

/* ── Product grid cards — improved text & no badge ─────────── */
/* Remove yellow price pill from product card images on all pages  */
.product-card-badge { display: none !important; }
/* Also hide on product-row pr-price sticker on image */
.pr-price           { display: none !important; }

/* Product card: golden title, better spacing */
.product-card-body {
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.product-card-category {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: .4rem;
  display: block;
  font-weight: 600;
}
.product-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);   /* GOLDEN by default */
  margin-bottom: .55rem;
  line-height: 1.3;
}
.product-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.product-card-title a:hover { color: var(--fg); }
.product-card-desc {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.65;
  flex: 1;
  margin-bottom: .875rem;
}
.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .875rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.product-price {
  font-weight: 700;
  font-size: .9rem;
  color: var(--fg);  /* WHITE price */
}

/* ── Filter & Sort bar (Products / Services pages) ────────── */
.gnag-filter-bar {
  display: flex;
  flex-wrap: nowrap;        /* keep both pills on one line */
  gap: .55rem;
  align-items: center;
  margin-bottom: 2rem;
}
/* Filter pill — left edge, no auto-margin */
.gnag-filter-bar .gnag-filter-wrap {
  margin-left: 0;
}
/* Sort pill — right edge */
.gnag-filter-bar .gnag-sort-wrap-right {
  margin-left: auto;
}
.gnag-filter-btn {
  padding: .38rem 1.05rem;
  border: 1px solid rgba(255,255,255,var(--glass-border-opacity,0.12));
  border-radius: 2rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(var(--glass-btn-blur,18px)) saturate(var(--glass-btn-sat,130%));
  -webkit-backdrop-filter: blur(var(--glass-btn-blur,18px)) saturate(var(--glass-btn-sat,130%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--glass-highlight,0.12));
  cursor: pointer;
  transition: all .22s ease;
  line-height: 1.4;
  white-space: nowrap;
}
.gnag-filter-btn:hover,
.gnag-filter-btn.active {
  border-color: rgba(201,168,76,0.45);
  color: var(--accent);
  background: rgba(201,168,76,var(--glass-tint,0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 2px rgba(201,168,76,0.1);
}
/* Base sort-wrap — used both standalone and inside filter-bar */
.gnag-sort-wrap {
  margin-left: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Filter panel opens left-aligned; sort panel opens right-aligned */
.gnag-filter-panel-left {
  right: auto !important;
  left: 0 !important;
}
.gnag-page-search-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}
.gnag-page-search {
  width: 100%;
  padding: .75rem 1rem .75rem 2.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: .9rem;
  outline: none;
  transition: border-color .25s;
}
.gnag-page-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.gnag-page-search::placeholder { color: var(--muted); }
.gnag-search-icon-inline {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* ── Product Detail — Amazon-style gallery ───────────────── */
.pdp-gallery-outer {
  position: relative;
}
.pdp-gallery-wrap {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: .65rem;
  align-items: start;
}
.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pdp-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  transition: border-color .2s;
  background: var(--card);
}
.pdp-thumb:hover,
.pdp-thumb.active { border-color: var(--accent); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp-main-wrap {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  cursor: crosshair;
  background: var(--card);
  aspect-ratio: 4/3;
}
.pdp-main-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.pdp-zoom-hint {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: rgba(12,6,8,.72);
  color: var(--fg);
  font-size: .72rem;
  padding: .3rem .7rem;
  border-radius: .4rem;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 2;
}
.pdp-main-wrap:hover .pdp-zoom-hint { opacity: 0; }

/* Zoom lens overlay */
.pdp-zoom-lens {
  position: absolute;
  border: 2px solid var(--accent);
  background: rgba(201,168,76,.08);
  pointer-events: none;
  display: none;
  z-index: 3;
}

/* Zoom result popup — appears over the product info column */
.pdp-zoom-result {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + .75rem);
  width: 440px;
  height: 440px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--card);
  z-index: 50;
  background-repeat: no-repeat;
}
.pdp-gallery-outer.zooming .pdp-zoom-lens { display: block; }
.pdp-gallery-outer.zooming .pdp-zoom-result { display: block; }

/* Mobile gallery: no zoom, thumbs row below main */
@media (max-width: 768px) {
  .pdp-gallery-wrap {
    grid-template-columns: 1fr;
  }
  .pdp-thumbs {
    flex-direction: row;
    overflow-x: auto;
    gap: .45rem;
    padding-bottom: .25rem;
    order: 2;
  }
  .pdp-thumb {
    flex-shrink: 0;
    width: 64px;
    aspect-ratio: 1;
  }
  .pdp-main-wrap {
    order: 1;
    cursor: default;
  }
  .pdp-zoom-result { display: none !important; }
  .pdp-zoom-lens   { display: none !important; }
}

/* ── Product Detail — heading/price colours ──────────────── */
#product-title {
  color: var(--accent) !important;
}
.pdp-product-subtitle {
  color: var(--muted) !important;
  font-size: .82rem !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.pdp-price-display {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fg) !important;  /* WHITE price */
}
.pdp-type-badge {
  display: none !important;   /* Remove "Traditional Craft" badge */
}
/* Remove "Choose Type & Size" label on detail page */
.variant-section .variant-label {
  display: none !important;
}
/* But keep it on Products page */
.pr-body .variant-label {
  display: block !important;
}

/* ── Page sections heading style ─────────────────────────── */
.gnag-section-type {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: .5rem;
}

/* ── No-results message ──────────────────────────────────── */
.gnag-no-results {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  font-size: 1rem;
  display: none;
}
.gnag-no-results.visible { display: block; }

/* ============================================================
   DESIGN TOKENS — matches the React app exactly
   ============================================================ */
:root {
  /* Background — dark wine/maroon (matches screenshots) */
  --bg:           #120608;
  --bg-alt:       #1a0c10;
  --card:         #1e1214;
  --card-hover:   #261820;

  /* Text */
  --fg:           #f2ede8;
  --muted:        #9a8a8f;

  /* Accent gold */
  --accent:       #c9a84c;
  --accent-h:     #b8942e;
  --accent-light: rgba(201,168,76,0.12);
  --accent-border:rgba(201,168,76,0.28);

  /* Other */
  --primary:      #7c2d4a;
  --destructive:  #e05252;
  --green:        #4caf7d;
  --border:       rgba(255,255,255,0.07);
  --border-h:     rgba(255,255,255,0.14);

  /* Radius / shadow */
  --r:            0.75rem;
  --r-sm:         0.5rem;
  --shadow:       0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.65);
  --shadow-xl:    0 24px 72px rgba(0,0,0,0.75);

  /* Fonts */
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Easing */
  --spring:  cubic-bezier(0.34,1.56,0.64,1);
  --smooth:  cubic-bezier(0.25,0.1,0.25,1);

  /* Hero heading gradient — overridden by admin settings */
  --hero-grad-1: #f2ede8;   /* start & end  (white/light)  */
  --hero-grad-2: #c9a84c;   /* mid          (gold/accent)  */
}

/* ============================================================
   GLOBAL ANIMATIONS KILL SWITCH
   Set via Appearance → Animation → "Global — All Animations" in
   wp-admin (inc/animation-settings.php); .gnag-anim-off is printed on
   <body> by functions.php when that toggle is off. Covers every plain
   CSS transition/@keyframes site-wide — the hamburger icon, mobile-nav
   panel, hover states, everything. GSAP-driven animations (animation.js,
   glass-depth.js, the mobile-menu stagger and hero-slideshow autoplay
   in main.js) don't use CSS transitions at all, so they're gated
   separately in JS via window.gnagReduceMotion (also set in
   functions.php from the same admin option).

   Uses the same near-zero-duration technique as the site's existing
   prefers-reduced-motion rules (not transition:none) so JS that
   listens for a 'transitionend' event — e.g. the mobile-nav will-change
   cleanup — still fires correctly instead of never resolving. */
.gnag-anim-off,
.gnag-anim-off *,
.gnag-anim-off *::before,
.gnag-anim-off *::after {
  animation-duration: 0.001ms !important;
  animation-delay: -0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: -0.001ms !important;
  scroll-behavior: auto !important;
}
/* Scroll-reveal content must still end up visible — normally GSAP's
   entrance cascade (main.js) sets this, but that's skipped entirely
   when window.gnagReduceMotion is true, so nothing else would. */
.gnag-anim-off .reveal,
.gnag-anim-off .gnag-hero .hero-title,
.gnag-anim-off .gnag-hero .hero-sub,
.gnag-anim-off .gnag-hero .hero-cta-row,
.gnag-anim-off .page-hero .eyebrow,
.gnag-anim-off .hero-inner .eyebrow,
.gnag-anim-off .page-hero h1,
.gnag-anim-off .page-hero p,
.gnag-anim-off .page-hero .btn,
.gnag-anim-off .bfr-hero-title,
.gnag-anim-off .bfr-hero-sub,
.gnag-anim-off .bfr-hero-pills,
.gnag-anim-off .login-card {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  scroll-behavior: auto;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
}
a { color:var(--accent); text-decoration:none; }
img,video { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:700; line-height:1.2; color:var(--fg); }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; }
::selection { background:rgba(201,168,76,.25); color:var(--fg); }

/* ============================================================
   LAYOUT — the fix for small viewport
   ============================================================ */
.gnag-container {
  width: 92%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Header & footer: full-bleed with only a fixed edge gap — always reaches near viewport edges */
#gnag-header .gnag-container,
#gnag-footer .gnag-container {
  width: 100%;
  max-width: none;
  padding-left: 2rem;
  padding-right: 2rem;
}
.gnag-container-sm {
  width: 88%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media(max-width:600px) {
  .gnag-container,
  .gnag-container-sm {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #gnag-header .gnag-container,
  #gnag-footer .gnag-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.section { padding: 4rem 0; }
.section.bg-alt-top-border { background:var(--bg-alt); border-top:1px solid var(--border); }
.section-sm { padding: 2.5rem 0; }
/* About page contact-info bar (Main Office / Business Hours / General
   Inquiries) — slightly less vertical padding than the shared .section-sm
   default, scoped so other .section-sm usages (blog, gallery stats bar)
   are unaffected. */
.section-bg-alt-bordered.section-sm { padding: 1.85rem 0; }

/* Custom Orders page — "What We Can Create" bordered section.
   Slightly tighter than the default .section (4rem) so it doesn't
   stack with the neighbouring sections' own padding into an oversized gap. */
.section-py-tight { padding: 2.5rem 0; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: .6rem;
}
.section-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin-top: .5rem;
  margin-bottom: 1rem;
}
.section-desc {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.6rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  transition: transform 200ms var(--spring), background 250ms ease, border-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: scale(.97) !important; }
.btn-sm-custom { padding:.5rem 1.1rem; font-size:.8rem; }

.btn-gold  { background:var(--accent); color:#0d0608; }
.btn-gold:hover { background:var(--accent-h); color:#0d0608; transform:translateY(-2px) scale(1.02); box-shadow:0 6px 24px rgba(201,168,76,.35); }
.btn-primary { background:var(--accent); color:#0d0608; }
.btn-primary:hover { background:var(--accent-h); color:#0d0608; transform:translateY(-2px) scale(1.02); box-shadow:0 6px 24px rgba(201,168,76,.35); }

.btn-outline { border:1.5px solid var(--accent); color:var(--accent); background:transparent; }
.btn-outline:hover { background:var(--accent-light); transform:translateY(-2px); }

.btn-ghost { border:1.5px solid var(--border-h); color:var(--muted); background:transparent; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.btn-dark  { background:#0d0608; color:var(--accent); border:1.5px solid rgba(0,0,0,.3); }
.btn-dark:hover { background:#1a0c10; color:var(--accent); transform:translateY(-2px); }

.btn-dark-outline { border:1.5px solid rgba(13,6,8,.4); color:#0d0608; background:transparent; }
.btn-dark-outline:hover { background:rgba(13,6,8,.15); color:#0d0608; }

.btn-lg  { padding:.9rem 2rem; font-size:1rem; }
.btn-sm  { padding:.5rem 1.15rem; font-size:.85rem; }
.btn-full { width:100%; justify-content:center; }

/* ── Liquid Glass button variant ─────────────────────────────
   Base fallback styles — overridden at runtime by gnag_glass_inline_css().
   --glass-btn-sat is intentionally lower than --glass-sat to prevent
   over-vivid gold when blurring solid-coloured backgrounds.          */
.btn-glass {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%)) !important;
  -webkit-backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%)) !important;
  border: 1px solid rgba(255,255,255, var(--glass-border-opacity, 0.18)) !important;
  color: rgba(242,237,232,0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, var(--glass-highlight, 0.14)),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 24px rgba(0,0,0,0.22) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.btn-glass:hover {
  background: rgba(201,168,76, var(--glass-tint, 0.12)) !important;
  border-color: rgba(201,168,76,0.45) !important;
  color: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 2px rgba(201,168,76,0.1),
    0 6px 28px rgba(0,0,0,0.28) !important;
  transform: translateY(-2px) scale(1.015);
  text-shadow: 0 0 12px rgba(201,168,76,0.4);
}


.btn-spinner { display:inline-block; width:.9rem; height:.9rem; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   HEADER  —  Liquid Glass
   ============================================================ */
#gnag-header {
  position: relative;          /* scrolls with the page — NOT sticky/fixed */
  z-index: 100;
  background: rgba(12, 4, 6, var(--glass-bg-opacity, 0.45));
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-sat, 200%)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-sat, 200%)) brightness(1.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 40px rgba(0, 0, 0, 0.40);
  
  transition: transform .35s var(--smooth, cubic-bezier(.4,0,.2,1)),
              box-shadow .3s ease;
}
/* JS adds .nav-fixed once user scrolls past the header.
   .nav-hidden slides it off the top; removing it slides it back. */
#gnag-header.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;   /* above all page-level panels (sort/filter at 9999) */
  animation: none;
}
/* Reveal: snappy ease-out so it feels responsive — no delay */
#gnag-header.nav-fixed:not(.nav-hidden) {
  transition: transform .28s cubic-bezier(0,.6,.4,1), box-shadow .3s ease;
}
/* Hide: waits .2s then drifts away over .25s — delay + slow ease-in */
#gnag-header.nav-hidden {
  transform: translateY(-100%);
  pointer-events: none;   /* don't intercept clicks when off-screen */
  transition: transform .25s .2s cubic-bezier(.4,0,1,1), box-shadow .3s ease;
}
/* Subtle iridescent sheen across the top edge */
#gnag-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(201,168,76,  0.03) 0%,
    rgba(100,140,255, 0.04) 40%,
    rgba(201,100,120, 0.03) 70%,
    rgba(201,168,76,  0.02) 100%
  );
  z-index: 0;
}
#gnag-header .gnag-container { position: relative; z-index: 1; }

/* slideDown — removed: GSAP handles this animation */

/* ── True optical centering: equal outer columns ── */
.header-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 5.25rem;
  gap: 1rem;
}
.gnag-logo        { justify-self: start; }
.header-actions   { justify-self: end; }

/* Centre nav column — layout only, no container pill */
.gnag-nav-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo */
.gnag-logo { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.gnag-logo img,
.gnag-logo-icon {
  width: 3.5rem; height: 3.5rem; object-fit:contain;
  transition: transform .6s var(--spring), filter .3s ease;
}
.gnag-logo:hover img,
.gnag-logo:hover .gnag-logo-icon { transform:rotate(360deg) scale(1.08); filter:drop-shadow(0 0 6px rgba(201,168,76,.5)); }
.gnag-logo-icon { font-size:2rem; }
.logo-text { display:flex; flex-direction:column; line-height:1.15; }
.logo-name { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--fg); }
.logo-sub  { font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }

/* Primary nav */
#gnag-nav { display:flex; align-items:center; gap:1.5rem; flex-wrap:nowrap; }
/* Safety: strip bullets if WP ever outputs <li> inside the nav */
#gnag-nav ul { display:contents; list-style:none; padding:0; margin:0; }
#gnag-nav li { list-style:none; display:flex; align-items:center; padding:0; margin:0; }
/* Plain links (no dropdown) — entry animation handled by GSAP in main.js */
#gnag-nav > a {
  font-size:.925rem; font-weight:500; color:var(--muted);
  padding:.25rem 0; position:relative; display:inline-block;
  transition: color .25s ease, transform .2s var(--spring);
}
/* Underline bar — only on direct <a> and .gnag-nav-trigger, NOT dropdown items */
#gnag-nav > a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--smooth); }
/* Hover + active (JS-set only — never WP's current-menu-item) */
#gnag-nav > a:hover                 { color:var(--accent); transform:scale(1.04) translateY(-1px); }
#gnag-nav > a.active                { color:var(--accent); transform:scale(1.04) translateY(-1px); }
#gnag-nav > a:hover::after          { transform:scaleX(1); }
#gnag-nav > a.active::after         { transform:scaleX(1); }
/* PHP server-side active (li.active) — mirrors the JS a.active rules */
#gnag-nav li.active > a         { color:var(--accent); transform:scale(1.04) translateY(-1px); }
#gnag-nav li.active > a::after  { transform:scaleX(1); }
/* Explicitly neutralise every WordPress auto-active class */
#gnag-nav li.current-menu-item > a,
#gnag-nav li.current_page_item > a,
#gnag-nav li.current-menu-ancestor > a,
#gnag-nav li.current-menu-parent > a,
#gnag-nav li.current_page_ancestor > a { color:var(--muted); transform:none; }
#gnag-nav li.current-menu-item > a::after,
#gnag-nav li.current_page_item > a::after,
#gnag-nav li.current-menu-ancestor > a::after { transform:scaleX(0) !important; }

/* Header actions */
.header-actions { display:flex; align-items:center; gap:.8rem; }

/* ── NAV DROPDOWN SYSTEM ─────────────────────────────────────────
   Liquid glass mega-dropdown for Products & Services, Colors, IT Services
   ──────────────────────────────────────────────────────────────── */

/* Wrapper div that replaces the bare <a> for items with dropdowns */
.gnag-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* The trigger link inside a dropdown item */
.gnag-nav-trigger {
  font-size: .925rem;
  font-weight: 500;
  color: var(--muted);
  padding: .25rem .1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  transition: color .25s ease, transform .2s var(--spring);
  
  cursor: pointer;
  text-decoration: none;
}
.gnag-nav-trigger::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--smooth);
}
.gnag-nav-item:hover .gnag-nav-trigger,
.gnag-nav-trigger.active {
  color: var(--accent);
  transform: scale(1.04) translateY(-1px);
}
.gnag-nav-item:hover .gnag-nav-trigger::after,
.gnag-nav-trigger.active::after {
  transform: scaleX(1);
}

/* Chevron arrow rotates on hover */
.gnag-nd-chevron {
  flex-shrink: 0;
  transition: transform .25s var(--spring), opacity .2s ease;
  opacity: .55;
  transform-origin: center;
  margin-top: 1px;
}
.gnag-nav-item:hover .gnag-nd-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── The dropdown panel ────────────────────────── */
.gnag-nav-dropdown {
  position: absolute;
  top: calc(100% + .7rem);
  /* Horizontal position driven by JS classes on .gnag-nav-item:
     .drop-center → centred under trigger (default)
     .drop-right  → left-aligned to trigger left edge (trigger is near left viewport edge)
     .drop-left   → right-aligned to trigger right edge (trigger is near right viewport edge)
  */
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-6px) scale(.97);
  min-width: 220px;
  max-width: 280px;

  /* Liquid glass — matched to account dropdown opacity */
  background: rgba(10, 3, 5, 0.95);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.07);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 1.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, 0.13),
    inset 0 -1px 0 rgba(0,0,0, 0.18),
    0 16px 48px rgba(0,0,0, 0.65),
    0 32px 80px rgba(0,0,0, 0.45),
    0 0 0 1px rgba(255,255,255, 0.04);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity        .22s ease,
    transform      .22s cubic-bezier(.4,0,.2,1),
    visibility     0s  .22s;
  z-index: 200;
  isolation: isolate;
}

/* ── Dynamic direction variants (set by gnagPositionNavDropdowns) ── */
/* Center: default — keep as-is */
.gnag-nav-item.drop-center .gnag-nav-dropdown {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-6px) scale(.97);
}
/* Right: align dropdown left edge to trigger left edge */
.gnag-nav-item.drop-right .gnag-nav-dropdown {
  left: 0;
  right: auto;
  transform: translateY(-6px) scale(.97);
}
/* Left: align dropdown right edge to trigger right edge */
.gnag-nav-item.drop-left .gnag-nav-dropdown {
  left: auto;
  right: 0;
  transform: translateY(-6px) scale(.97);
}

/* Specular top-edge highlight (glass depth) */
.gnag-nav-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    148deg,
    rgba(201,168,76, 0.06) 0%,
    rgba(120,160,255,0.04) 40%,
    transparent             70%
  );
}
/* Bottom caustic leak */
.gnag-nav-dropdown::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12%; right: 12%;
  height: 1.5px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201,168,76, 0.18) 35%,
    rgba(100,160,255,0.12) 65%,
    transparent
  );
  pointer-events: none;
  filter: blur(1px);
}

/* Small connecting bridge so moving mouse diagonally doesn't lose hover */
.gnag-nav-dropdown::before {
  /* extends the clickable area above the panel */
}
.gnag-nav-item::before {
  content: '';
  position: absolute;
  bottom: -0.7rem;
  left: 0; right: 0;
  height: .7rem;
}

/* Show on hover (pointer device only) — all three direction variants */
@media (hover: hover) {
  /* Default / center */
  .gnag-nav-item:hover .gnag-nav-dropdown,
  .gnag-nav-item.drop-center:hover .gnag-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: all;
    transition:
      opacity        .22s ease,
      transform      .22s cubic-bezier(.4,0,.2,1),
      visibility     0s   0s;
  }
  /* Drop right — aligned to left edge, no X translate */
  .gnag-nav-item.drop-right:hover .gnag-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: all;
    transition:
      opacity        .22s ease,
      transform      .22s cubic-bezier(.4,0,.2,1),
      visibility     0s   0s;
  }
  /* Drop left — aligned to right edge, no X translate */
  .gnag-nav-item.drop-left:hover .gnag-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: all;
    transition:
      opacity        .22s ease,
      transform      .22s cubic-bezier(.4,0,.2,1),
      visibility     0s   0s;
  }
}

/* Inner scroll container */
.gnag-nav-dropdown-inner {
  padding: .4rem;
  position: relative;
  z-index: 1;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gnag-nav-dropdown-inner::-webkit-scrollbar { width: 4px; }
.gnag-nav-dropdown-inner::-webkit-scrollbar-track { background: transparent; }
.gnag-nav-dropdown-inner::-webkit-scrollbar-thumb { background: rgba(201,168,76,.25); border-radius: 4px; }

/* Category items — styled to match .gnag-avatar-item */
.gnag-nd-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .75rem;
  border-radius: .75rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.gnag-nd-item:hover {
  background: rgba(201,168,76, .10);
  color: var(--accent);
  /* no translateX — matches account dropdown behaviour */
}
.gnag-nd-item:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255, .03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.08);
  pointer-events: none;
}
.gnag-nd-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.9; }
.gnag-nd-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.gnag-nd-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gnag-nd-arrow {
  font-size: .85em;
  opacity: 0;
  transition: opacity .15s ease;
  color: var(--accent);
  flex-shrink: 0;
}
.gnag-nd-item:hover .gnag-nd-arrow {
  opacity: 1;
}

/* Divider label between categories and types */
.gnag-nd-divider {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
  padding: .5rem .75rem .2rem;
  pointer-events: none;
  border-top: 1px solid var(--border);
  margin-top: .2rem;
}

/* ── Mobile accordion dropdown ───────────────────────────────── */
.gnag-mnav-item-row {
  display: flex;
  align-items: stretch;
  border-radius: .4rem;
  transition: background .2s ease;
}
/* Single unified highlight on the row itself, not two separate
   highlights on the link + button that merely happen to touch. */
.gnag-mnav-item-row:has(.gnag-mnav-link-main:hover),
.gnag-mnav-item-row:has(.gnag-mnav-trigger:hover),
.gnag-mnav-item-row:has(.gnag-mnav-trigger[aria-expanded="true"]) {
  background: var(--accent-light);
}
.gnag-mnav-item-row:has(.gnag-mnav-link-main:hover) .gnag-mnav-link-main,
.gnag-mnav-item-row:has(.gnag-mnav-trigger:hover) .gnag-mnav-trigger,
.gnag-mnav-item-row:has(.gnag-mnav-trigger[aria-expanded="true"]) .gnag-mnav-link-main,
.gnag-mnav-item-row:has(.gnag-mnav-trigger[aria-expanded="true"]) .gnag-mnav-trigger {
  color: var(--accent);
}
.gnag-mnav-link-main {
  flex: 1;
  min-width: 0;
}
#gnag-mobile-nav .mobile-nav-inner a.gnag-mnav-link-main {
  border-radius: 0;
  background: none !important;
}
.gnag-mnav-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  background: none !important;
  border: none;
  color: var(--muted);
  border-radius: 0;
  cursor: pointer;
  transition: color .2s ease;
}
.gnag-mnav-trigger .gnag-nd-chevron {
  transition: transform .25s ease;
}
.gnag-mnav-trigger[aria-expanded="true"] .gnag-nd-chevron {
  transform: rotate(180deg);
}
.gnag-mnav-panel {
  padding: .25rem .75rem .5rem 1.75rem;
}
.gnag-mnav-panel[hidden] { display: none; }
.gnag-mnav-sublink {
  display: block;
  padding: .45rem .5rem;
  font-size: .84rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: .4rem;
  transition: background .15s, color .15s;
}
.gnag-mnav-sublink:hover { background: rgba(201,168,76,.08); color: var(--accent); }
.gnag-mnav-divider {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
  padding: .5rem .5rem .15rem;
}

/* Cart */
.gnag-cart-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; border-radius:50%;
  color:var(--muted);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  -webkit-backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity, 0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--glass-highlight,0.12)), inset 0 -1px 0 rgba(0,0,0,0.12);
  transition: all .25s ease;
  flex-shrink: 0;
  line-height: 0;
}
.gnag-cart-btn:hover {
  color: var(--accent);
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 3px rgba(201,168,76,0.1);
}
.gnag-cart-btn svg { display:block; width:1rem; height:1rem; flex-shrink:0; }

/* ── Compact account icon — mobile header row only ──────────────────
   Mirrors .gnag-cart-btn's glass-pill styling so the hamburger, cart
   and account icons sit in the mobile row as one visually consistent,
   evenly-aligned group. Guest state only — logged-in users get the
   real avatar bubble (.gnag-avatar-btn), which is no longer hidden
   on mobile either. Hidden on desktop, where the labelled "Sign In"
   button (.btn-login-gap) is used instead. */
.gnag-account-btn-mobile {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  -webkit-backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity, 0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--glass-highlight,0.12)), inset 0 -1px 0 rgba(0,0,0,0.12);
  transition: all .25s ease;
  flex-shrink: 0;
  line-height: 0;
}
.gnag-account-btn-mobile svg { display:block; width:1rem; height:1rem; flex-shrink:0; }
.gnag-account-btn-mobile:hover,
.gnag-account-btn-mobile:active {
  color: var(--accent);
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.1);
}
@media (max-width: 768px) {
  .gnag-account-btn-mobile { display: inline-flex; }
}
.cart-badge {
  position:absolute; top:-3px; right:-3px;
  background:var(--accent); color:#0d0608;
  font-size:.6rem; font-weight:700;
  width:1.05rem; height:1.05rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation: badgePop .4s var(--spring) both;
}
.cart-badge.hidden { display:none; }
@keyframes badgePop { 0%{transform:scale(0)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }

/* Hamburger */
.gnag-hamburger {
  display:none; flex-direction:column; gap:5px;
  width:2rem; height:2rem; padding:.2rem;
  align-items:center; justify-content:center;
}
/* Only transition transform/opacity (compositor-only, GPU-composited
   properties) — previously "transition:all" also set up change-tracking
   on width/height/background, which never actually change here, for no
   benefit. will-change is safe to leave static on these 3 spans: it's
   a fixed, small set of elements that exist for the page's whole
   lifetime and are the site's single most-repeated interaction, so the
   promoted-layer cost is negligible and constant rather than growing. */
.gnag-hamburger span { display:block; width:20px; height:2px; background:var(--fg); border-radius:2px; transition:transform .3s var(--smooth), opacity .3s var(--smooth); will-change:transform; }
.gnag-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.gnag-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.gnag-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
#gnag-mobile-nav {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  border-top: 1px solid transparent;
  transition: max-height .45s var(--smooth), opacity .3s ease, border-color .3s ease;
}
#gnag-mobile-nav.open {
  /* --gnag-mnav-h is set inline by main.js from the panel's own measured
     scrollHeight right before .open is added, so this animates across
     exactly the real content distance instead of a large generic value
     that's mostly empty space — fewer wasted intermediate layout frames
     during the transition, most noticeable on 90Hz+ displays where
     there are more of those frames to compute per second. Falls back to
     the previous generic value if JS hasn't run yet for any reason
     (no-JS/very early paint), so behaviour never regresses. */
  max-height: var(--gnag-mnav-h, calc(100vh - 5.25rem));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  border-top-color: var(--border);
  /* Scrolling stays fully functional (touch/swipe/wheel) — this only
     hides the visible scrollbar track so a long link list doesn't show
     its own scrollbar UI inside the dropdown. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge/IE */
}
/* will-change is toggled by main.js only for the duration of the open/
   close transition (added just before, removed on transitionend) —
   max-height isn't a compositor-only property, so this can't make the
   transition itself GPU-composited, but it does let the browser
   pre-allocate the paint/layout work instead of discovering it on the
   first animated frame, which is where jank is most visible. Left off
   the rest of the time so an always-on promoted layer isn't held for a
   panel that's closed/idle for most of the page's lifetime. */
#gnag-mobile-nav.gnag-mnav-animating { will-change: max-height, opacity; }
#gnag-mobile-nav.open::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.mobile-nav-inner { padding:.75rem 0 1rem; }
#gnag-mobile-nav .mobile-nav-inner a {
  display:block; padding:.65rem 1.5rem;
  font-size:.9rem; font-weight:500; color:var(--muted);
  border-radius:.4rem;
  transition:color .2s ease, background .2s ease;
}
#gnag-mobile-nav .mobile-nav-inner a:hover,#gnag-mobile-nav .mobile-nav-inner a.active { color:var(--accent); background:var(--accent-light); }

/* Get a Quote button in mobile footer — reset nav-link overrides */
.mobile-nav-footer .btn {
  opacity:1 !important;
  transform:none !important;
  display:inline-flex !important;
  padding:.7rem 1.6rem !important;
  font-size:.875rem !important;
  font-weight:600 !important;
  color:#0d0608 !important;
  background:var(--accent) !important;
  border-radius:var(--r-sm) !important;
  width:100%;
  justify-content:center;
  transition:transform 200ms var(--spring), background 250ms ease, box-shadow 250ms ease !important;
}
.mobile-nav-footer .btn:hover {
  background:var(--accent-h) !important;
  color:#0d0608 !important;
  transform:translateY(-2px) scale(1.02) !important;
  box-shadow:0 6px 24px rgba(201,168,76,.35) !important;
}
.mobile-nav-footer {
  padding: .875rem 1.5rem 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

@media(max-width:900px){ #gnag-nav{display:none;} .gnag-hamburger{display:flex;} }
@media(min-width:901px){ #gnag-mobile-nav{display:none!important;} }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: 4.5rem 0 3rem;
  text-align: center;
  background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
  /* border-bottom removed — bottom fade handles visual separation */
  position: relative;
  overflow: hidden;
  /* Pull up behind sticky navbar — same technique as .gnag-hero */
  margin-top: -5.25rem;
  padding-top: calc(5.25rem + 4.5rem);
}
/* Top-edge navbar shadow — no bottom fade by default (no-image pages) */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18,6,8,0.72) 0%,
    rgba(18,6,8,0.28) 12%,
    transparent 26%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Restore bottom fade only when hero has a background image */
.page-hero.page-hero-has-img::after {
  background: linear-gradient(
    to bottom,
    rgba(18,6,8,0.72) 0%,
    rgba(18,6,8,0.28) 12%,
    transparent 26%,
    transparent 70%,
    var(--bg) 100%
  );
}
/* Remove bfr-hero-bg bleed below section when no image */
.page-hero:not(.page-hero-has-img) .bfr-hero-bg {
  bottom: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
/* bfr-hero: remove bottom shadow/fade when no background image is set */
.bfr-hero:not(.bfr-hero-has-img) .bfr-hero-bg {
  bottom: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.page-hero .eyebrow,
.page-hero h1,
.page-hero p,
.page-hero > .gnag-container { position: relative; z-index: 2; }
.page-hero .eyebrow {  }
.page-hero h1      {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em;
  padding-bottom: .12em;
  margin: .4rem 0 .75rem;
  background: linear-gradient(135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 55%, var(--hero-grad-1) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  overflow: visible;
  /* entrance handled by GSAP in main.js */
}
.page-hero p       {  }
/* Ambient orb/grid background reused from blog hero — sits behind all other page-hero layers */
.page-hero .bfr-hero-bg { z-index: 0; }

/* ============================================================
   CARDS
   ============================================================ */
.gnag-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  /* hover handled by GSAP */
}
.gnag-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  border-color: rgba(200,169,110,.45);
}
.gnag-anim-off .gnag-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

/* ============================================================
   HERO SECTION
   Full-screen height is a desktop/PC-only treatment — same 901px
   breakpoint the theme already uses for nav (desktop nav vs hamburger).
   On handhelds the hero sizes to its own content instead of being
   forced to fill the viewport (see the max-width:900px override below
   and in each responsive block further down this file).
   ============================================================ */
.gnag-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Pull hero up behind the sticky navbar */
  margin-top: -5.25rem;
  padding-top: 5.25rem;
}
@media (min-width: 901px) {
  .gnag-hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }
}
@media (max-width: 900px) {
  .gnag-hero { min-height: auto; }
  /* Slideshow mode wraps everything in .hero-bg-slideshow, which is
     position:absolute (see its rule below) and so contributes ZERO
     height to this flex container's auto sizing — on desktop that's
     masked by the min-height:100vh above, but here on mobile with
     min-height:auto, .gnag-hero collapsed to ~60px (just the header
     overlap padding) with all its real content invisibly clipped
     inside. Image/Video mode's .hero-inner is normal-flow and already
     sizes this element correctly, so this only needs to target
     Slideshow specifically. */
  .gnag-hero:has(.hero-bg-slideshow) {
    min-height: 70vh;
    min-height: calc(var(--vh, 1vh) * 70);
  }
}
.gnag-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 3;
}
/*
 * Hero background image. The scroll + pointer parallax (see
 * assets/js/animation.js) is applied entirely via GSAP transforms —
 * including the overscan "buffer" scale that keeps travel from ever
 * exposing an edge — so no special sizing is needed here. Animation-
 * specific support CSS (will-change etc.) lives in animation.css.
 *
 * Darkening is applied via the static ::after tint below rather than a
 * CSS `filter` on the <img> itself: a `filter` combined with a GSAP-
 * animated `transform` on the same element forces the browser to
 * re-rasterize the filtered bitmap on every frame, which shows up as
 * pixelation / hairline seams while the image moves. rgba(0,0,0,.74) is
 * intentionally strong — the source artwork has bright, light-toned
 * regions (stone/hexagon wall) alongside much darker ones (fabric,
 * cushions), and pointer-parallax pans the visible crop between them, so
 * a lighter tint let perceived brightness visibly swing as it panned.
 * The darker tint compresses that range so it reads consistently
 * regardless of which part of the image is in view.
 */
.hero-bg-img {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-bg-img::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.74);
  pointer-events: none;
}
.hero-bg-img img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}
.hero-bg-fallback {
  position: absolute; inset: 0;
  background: var(--bg);
}

/*
 * Hero background video (Hero Media Type = "Video"). Same dark-tint
 * approach as the image above — a static ::after overlay rather than a
 * CSS filter, so nothing fights the video's own decoding/compositing.
 */
.hero-bg-video {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-bg-video::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.74);
  pointer-events: none;
}
.hero-bg-video video {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/*
 * Hero image slideshow (Hero Media Type = "Slideshow"). Four transition
 * styles, chosen via the "Slideshow Transition Style" Customizer field
 * (.hero-slideshow-track gets a matching --slide/--fade/--zoom class):
 *
 *   --slide (default) — native horizontal scroll + scroll-snap. Touch
 *     swipe / trackpad / mouse-wheel-shift all work with zero JS.
 *   --fade  — slides stack on top of each other; JS toggles .is-active
 *     and CSS crossfades opacity.
 *   --zoom  — same crossfade as --fade, plus a slow scale-in on the
 *     active slide's image (Ken Burns style).
 *   Background Only — the heading/CTAs are rendered once, outside the
 *     slide stack entirely (see front-page.php), and only plain
 *     background images crossfade behind them. Reuses the --fade CSS
 *     class as-is (front-page.php renders data-transition="fade" for
 *     this mode too) — there's nothing visually different about the
 *     crossfade itself, only which markup is inside vs. outside it.
 *
 * assets/js/hero-slideshow.js reads the same data-transition attribute
 * and branches its navigation logic accordingly — scroll-based for
 * --slide, class-toggle-based for --fade/--zoom (and so, transitively,
 * for Background Only too).
 */
.hero-bg-slideshow {
  position: absolute; inset: 0;
  overflow: hidden;
  /* Only meaningful for "Background Only" mode, where .gnag-container is
     a direct child of this element (text lives outside the slide stack
     entirely — see front-page.php). Slide/Fade/Zoom modes nest their
     text inside .hero-slide--main instead, which centers itself, so this
     has no effect there. Without it, the text sat pinned to the top
     instead of centered like every other mode — and since .hero-overlay
     is a non-uniform gradient (darkest at the very top), that also made
     the text look like it was sitting over different-colored/toned
     background than it does everywhere else. */
  display: flex;
  align-items: center;
}
.hero-slideshow-track {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide the native scrollbar — the arrow buttons are the intended UI,
     swipe/drag still works underneath. */
  scrollbar-width: none;
}
.hero-slideshow-track::-webkit-scrollbar { display: none; }
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ── Fade / Zoom variants ────────────────────────────────────────────
   Both stack every slide absolutely instead of scrolling; JS toggles
   .is-active on exactly one slide at a time and these transitions
   crossfade between whichever two are swapping. */
.hero-slideshow-track--fade,
.hero-slideshow-track--zoom {
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
}
.hero-slideshow-track--fade .hero-slide,
.hero-slideshow-track--zoom .hero-slide {
  position: absolute; inset: 0;
  flex: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.hero-slideshow-track--fade .hero-slide.is-active,
.hero-slideshow-track--zoom .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 1.1s ease;
}
/* Ken Burns zoom — applied to the slide's own <img>. Note: if this same
   image also has pointer-parallax enabled (Settings → Animation → Hero
   Parallax → Pointer → "Also Apply to Slideshow Images"), GSAP's own
   transform takes over that element every time the cursor moves, which
   will override this CSS zoom while the cursor is active over it — the
   two aren't designed to run at once on the same image. */
.hero-slideshow-track--zoom .hero-slide img,
.hero-slideshow-track--zoom .hero-slide .hero-bg-img img {
  transform: scale(1);
  transition: opacity 1.1s ease, transform 7s ease-out;
}
.hero-slideshow-track--zoom .hero-slide.is-active img,
.hero-slideshow-track--zoom .hero-slide.is-active .hero-bg-img img {
  transform: scale(1.08);
}

/* Slide 1 (.hero-slide--main) reuses the full .hero-bg-img /
   .hero-overlay / .hero-inner system already and must NOT get this
   generic plain-image treatment — it would otherwise paint a second dark
   tint on top of the text (pseudo-elements stack last) and strip the
   background image's object-position. Scoped to real slideshow-upload
   slides only. */
.hero-slide:not(.hero-slide--main)::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.74);
  pointer-events: none;
}
.hero-slide:not(.hero-slide--main) > img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Slide 1 mirrors .gnag-hero's own display:flex;align-items:center —
   that centering only reaches direct children, and .hero-inner is now
   nested several levels deeper (inside the slideshow track) than it is
   in plain Image/Video mode, so it needs to be re-established here. */
.hero-slide--main {
  display: flex;
  align-items: center;
}
.hero-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  opacity: .85;
  /* Icon-only — no circle/backdrop. The drop-shadow keeps it readable
     against light or busy parts of whichever image is showing. */
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
  transition: opacity .2s ease, transform .2s ease;
}
.hero-slide-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
}
.hero-slide-arrow--prev { left: 1rem; }
.hero-slide-arrow--next { right: 1rem; }
@media (max-width: 640px) {
  .hero-slide-arrow { width: 2.25rem; height: 2.25rem; }
  .hero-slide-arrow--prev { left: .5rem; }
  .hero-slide-arrow--next { right: .5rem; }
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(18,6,8,.85) 0%, rgba(18,6,8,.3) 18%, transparent 40%),
    linear-gradient(to top,    rgba(18,6,8,.6)  0%, rgba(18,6,8,.2) 20%, transparent 45%),
    linear-gradient(135deg,    rgba(18,6,8,.9)  0%, rgba(18,6,8,.45) 55%, rgba(18,6,8,.75) 100%);
}
.hero-inner { position:relative; z-index:4; padding:5rem 0; max-width:760px; margin-left:0; margin-right:auto; }
.hero-inner .eyebrow {  }
.hero-title {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 700; margin:.6rem 0 1.25rem;
  padding-bottom: .12em;
  background: linear-gradient(135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 55%, var(--hero-grad-1) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  overflow: visible;
  /* entrance handled by GSAP in main.js */
}
.hero-title-line2 {
  display: block;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  color: rgba(242,237,232,.75);
  max-width: 560px; line-height: 1.75; margin-bottom: 2.25rem;
  /* entrance handled by GSAP in main.js */
}
.hero-cta-row { display:flex; gap:.875rem; flex-wrap:wrap;  }

/* Orbs */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; opacity: .35;
}
.orb-1 { width:380px;height:380px; background:rgba(201,168,76,.13); top:-80px;right:-60px; /* animation handled by GSAP */ }
.orb-2 { width:260px;height:260px; background:rgba(124,45,74,.15); bottom:-40px;left:25%; /* animation handled by GSAP */ }
.orb-3 { width:220px;height:220px; background:rgba(201,168,76,.08); top:30%;left:-50px; /* animation handled by GSAP */ }
@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(25px,-35px) scale(1.12)} 66%{transform:translate(-18px,18px) scale(.92)} }
@keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1.15)} 50%{transform:translate(-35px,-45px) scale(1)} }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar { background:var(--bg-alt); border-bottom:1px solid var(--border); padding:2rem 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-item { text-align:center; }
.stat-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--accent); display:block; margin-bottom:.2rem; }
.stat-lbl { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
@media(max-width:600px){ .stats-grid{grid-template-columns:1fr 1fr;} }

/* ============================================================
   PRODUCT CARDS (grid)
   ============================================================ */
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media(max-width:900px){ .product-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .product-grid{grid-template-columns:1fr;} }

.product-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; /* hover handled by GSAP */ }
/* .product-card:hover — handled by GSAP mouseenter/mouseleave in main.js */
.pc-img { position:relative; overflow:hidden; aspect-ratio:4/3; }
.pc-img img { width:100%;height:100%;object-fit:cover; /* hover scale handled by GSAP */ }
/* .product-card:hover .pc-img img — handled by GSAP */
.pc-img::after { content:''; position:absolute;inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); transform:translateX(-100%); transition:transform 0s; }
.product-card:hover .pc-img::after { transform:translateX(100%); transition:transform .8s ease; }
.pc-badge { position:absolute;top:.65rem;right:.65rem; background:var(--accent);color:#0d0608; padding:.2rem .65rem;border-radius:2rem;font-size:.68rem;font-weight:700; }
.pc-body { padding:1.2rem; flex:1; display:flex; flex-direction:column; }
.pc-cat  { font-size:.67rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:.3rem; }
.pc-title { font-size:1rem;margin-bottom:.4rem; }
.pc-desc  { color:var(--muted);font-size:.84rem;line-height:1.6;flex:1; }
.pc-footer { margin-top:.875rem;padding-top:.875rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center; }
.pc-price  { font-weight:700;font-size:.875rem;color:var(--accent); }

/* ============================================================
   PRODUCT ROWS (products page alternating layout)
   ============================================================ */
.product-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  /* hover handled by GSAP */
}
/* .product-row:hover — handled by GSAP */
.product-row.rev .pr-img { order:2; }
.product-row.rev .pr-body { order:1; }
.pr-img { position:relative; aspect-ratio:4/3; overflow:hidden; }
.pr-img img { width:100%;height:100%;object-fit:cover; /* hover scale handled by GSAP */ }
/* .product-row:hover .pr-img img — handled by GSAP */
.pr-img::after { content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(18,6,8,.55),transparent); }
.pr-img::before { content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translateX(-100%);transition:transform 0s;z-index:1; }
.product-row:hover .pr-img::before { transform:translateX(100%);transition:transform .9s ease; }
.pr-price { position:absolute;top:.875rem;right:.875rem;z-index:2;background:var(--accent);color:#0d0608;padding:.3rem .85rem;border-radius:2rem;font-size:.75rem;font-weight:700; }
.pr-body { padding:2.5rem; display:flex; flex-direction:column; justify-content:center; }
.pr-type { font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem; }
.pr-title { font-size:clamp(1.35rem,3vw,2rem);margin-bottom:.875rem; }
.pr-desc  { color:var(--muted);line-height:1.75;margin-bottom:1.5rem; }
.pr-feats { display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.75rem; }
.pr-feats li { display:flex;align-items:center;gap:.7rem;font-size:.875rem;color:var(--muted); }
.feat-dot { width:1.4rem;height:1.4rem;border-radius:50%;background:var(--accent-light);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.feat-dot::after { content:'';width:5px;height:5px;border-radius:50%;background:var(--accent); }
.pr-actions { display:flex;gap:.65rem;flex-wrap:wrap; }
@media(max-width:768px){
  .product-row,.product-row.rev { grid-template-columns:1fr; }
  .product-row.rev .pr-img,.product-row.rev .pr-body { order:unset; }
  .pr-img { min-height:240px; }
  .pr-body { padding:1.5rem; }
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-filters { display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin-bottom:2rem;position:relative;z-index:10; }
/* gf-btn kept for back-compat but hidden — layout now uses gnag-sort-btn pills */
.gf-btn { display:none; }

.gallery-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
@media(max-width:768px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .gallery-grid{grid-template-columns:1fr;} }
.gal-item { border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;cursor:pointer;position:relative; }
.gal-item img { width:100%;height:100%;object-fit:cover; /* hover handled by GSAP */ }
/* .gal-item:hover img — handled by GSAP */
.gal-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(18,6,8,.8),transparent);opacity:0; /* hover handled by GSAP */ display:flex;align-items:flex-end;padding:.875rem; }
/* .gal-item:hover .gal-overlay — handled by GSAP */
.gal-title { font-size:.82rem;font-weight:600;color:var(--fg); }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom:1.1rem; }
.form-label { display:block;font-size:.78rem;font-weight:600;color:var(--fg);margin-bottom:.35rem;letter-spacing:.04em; }
.required-star { color:var(--accent); }
.form-input {
  width:100%; padding:.72rem 1rem;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--fg); font-size:.875rem;
  outline:none; transition:border-color .25s ease,box-shadow .25s ease,transform .2s var(--spring);
}
.form-input::placeholder { color:var(--muted); }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); transform:scale(1.004); }
.form-input-icon { position:relative; }
.form-input-icon .form-input { padding-left:2.5rem; }
.fi-icon { position:absolute;left:.825rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:.875rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
textarea.form-input { resize:vertical;min-height:130px; }
select.form-input { appearance:none; cursor:pointer; }
/* Native <select> elements don't support ::placeholder — the "— Select
   your country —" option was always rendered in the same bright --fg
   text as a real chosen value, unlike every other field's dim --muted
   placeholder. :invalid only matches while the empty first option is
   selected (thanks to `required`), so this automatically brightens back
   to --fg the moment a real country is picked — no JS needed. */
select.form-input:required:invalid { color: var(--muted); }
select.form-input option { color: var(--fg); background: var(--card); }
.form-hint { font-size:.73rem;color:var(--muted);margin-top:.3rem; }
@media(max-width:600px){ .form-row{grid-template-columns:1fr;} }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background: linear-gradient(135deg,var(--accent) 0%,#b8942e 100%);
  border-radius: var(--r);
  padding: 4rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::after { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.1) 0%,transparent 65%);animation:ctaGlow 4s ease-in-out infinite;pointer-events:none; }
@keyframes ctaGlow { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }
.cta-banner > * { position:relative;z-index:1; }
.cta-banner h2 { color:#0d0608;font-size:clamp(1.35rem,4vw,2.25rem);margin-bottom:.75rem; }
.cta-banner p  { color:rgba(13,6,8,.7);max-width:580px;margin:0 auto 1.75rem; }
.cta-btns { display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap; }

/* ============================================================
   FEATURES / VALUES GRID
   ============================================================ */
.features-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
@media(max-width:768px){ .features-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .features-grid{grid-template-columns:1fr;} }
.feature-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.75rem;transition:transform .25s,box-shadow .25s,border-color .25s; }
.feature-card:hover { transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35);border-color:rgba(200,169,110,.45); }
.feature-icon { font-size:1.6rem;margin-bottom:1rem; }
/* Uploaded feature-icon image (page-services/colors/temples/statues/
   handicrafts/it-services.php) — replaces a per-image style="" attribute
   previously built in PHP with wp_get_attachment_image(). */
.gnag-feature-icon-img { width:48px;height:48px;object-fit:contain;display:block; }
.feature-title { font-size:1rem;font-weight:600;margin-bottom:.5rem; }

/* ── Traditional Roots, Modern Vision ───────────────────────── */
.gnag-roots-grid {
  align-items: stretch !important;
}
/* Digital Services card hidden via Page Visibility (Appearance settings
   → Digital/IT Services toggled off) — center the remaining Traditional
   card instead of leaving an empty second column. */
.gnag-roots-grid--single {
  grid-template-columns: 1fr !important;
}
.gnag-roots-grid--single .gnag-roots-card {
  max-width: 560px;
  margin: 0 auto;
}
.gnag-roots-card {
  padding: 2rem;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
}
.gnag-roots-card h3 {
  text-align: center !important;
}
.gnag-roots-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  width: 100%;
}
.gnag-roots-list li {
  font-size: .84rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: .5rem;
}
.gnag-roots-bullet {
  color: var(--accent);
  font-size: .45rem;
  flex-shrink: 0;
  position: relative;
  top: -.05em;
}
.gnag-roots-cta {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: .82rem;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
}
.feature-desc  { font-size:.84rem;color:var(--muted);line-height:1.65; }

/* ============================================================
   FOOTER
   ============================================================ */
#gnag-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 5.5rem 0 2.5rem;
  margin-bottom: 0;
}
.footer-grid { display:grid;grid-template-columns:1.4fr 1fr 1fr 1.8fr;gap:3rem;margin-bottom:3.5rem; }
.footer-col-pair { display:flex;gap:2.5rem; }
.footer-col-pair > div { flex:1;min-width:0; }
.footer-desc  { font-size:.9rem;color:var(--muted);line-height:1.7;margin:.75rem 0 1.25rem; }
.footer-social { display:flex;gap:.7rem;flex-wrap:wrap; }
.soc-link { width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;transition:all .25s ease,transform .3s var(--spring); }
.soc-link svg { display:block;width:1rem;height:1rem;flex-shrink:0; }
.soc-link:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:translateY(-3px) scale(1.14); }
.footer-heading { font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg);margin-bottom:1.2rem;font-family:var(--font-body); }
.footer-links  { display:flex;flex-direction:column;gap:.65rem; }
.footer-links a { font-size:.9rem;color:var(--muted);transition:color .25s ease,padding-left .25s ease; }
.footer-links a:hover { color:var(--accent);padding-left:5px; }
.footer-contact-list { display:flex;flex-direction:column;gap:1rem; }
.fci { display:flex;align-items:flex-start;gap:.8rem; }
.fci-icon { width:2.1rem;height:2.1rem;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);transition:transform .6s var(--spring);line-height:0; }
.fci-icon svg { display:block;width:15px;height:15px;flex-shrink:0; }
.fci:hover .fci-icon { transform:rotate(360deg) scale(1.12); }
.fci-label { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg);display:block;margin-bottom:.1rem; }
.fci-val   { font-size:.86rem;color:var(--muted);display:flex;flex-direction:column;gap:.2rem; }
.fci-val a { color:var(--muted);transition:color .2s;display:block; }
.fci-val a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border);padding-top:1.75rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; }
.footer-copy,.footer-made { font-size:.84rem;color:var(--muted); }
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} .footer-col-pair{flex-direction:column;gap:1.5rem;} }
@media(max-width:540px){ .footer-grid{grid-template-columns:1fr;} .footer-bottom{flex-direction:column;text-align:center;} }

/* ============================================================
   CART
   ============================================================ */
.cart-layout { display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start; }
.cart-item { display:grid;grid-template-columns:90px 1fr;gap:1.1rem;padding:1.1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:.875rem;animation:cartEnter .4s var(--spring) both; }
@keyframes cartEnter { from{opacity:0;transform:translateX(-18px) scale(.96)} to{opacity:1;transform:translateX(0) scale(1)} }
.cart-item.removing { animation:cartLeave .3s ease forwards; }
@keyframes cartLeave { to{opacity:0;transform:translateX(20px) scale(.9)} }
.cart-img { border-radius:.5rem;overflow:hidden;height:80px; }
.cart-img img { width:100%;height:100%;object-fit:cover; }
.cart-summary-box { background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.6rem;position:sticky;top:5.5rem; }
@media(max-width:768px){ .cart-layout{grid-template-columns:1fr;} }

/* Qty controls */
.qty-ctrl { display:inline-flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:.5rem; }
.qty-btn { width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s;font-size:1rem; }
.qty-btn:hover { color:var(--accent);background:var(--accent-light); }
.qty-input { width:2.5rem;text-align:center;background:transparent;border:none;color:var(--fg);font-weight:600;outline:none; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox { display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);align-items:center;justify-content:center;padding:2rem; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw;max-height:86vh;object-fit:contain;border-radius:var(--r); }
/* @keyframes lbPop — removed: GSAP handles this animation (see assets/js/animation.js) */
.lightbox-close { position:absolute;top:1.25rem;right:1.25rem;color:#fff;width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .2s; }
.lightbox-close:hover { background:var(--accent);color:#0d0608; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
#cookie-banner {
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  display:none;
  background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 -8px 32px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .5s var(--spring);
}
#cookie-banner.show { transform:translateY(0); }
.cookie-inner { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0; }

/* ============================================================
   LOGIN CARD
   ============================================================ */
.login-wrap { min-height:90vh;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem;position:relative; }
.login-card {
  width:100%;max-width:440px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:2.25rem;
  box-shadow:var(--shadow-xl);
  /* entrance handled by GSAP in main.js */
}
.login-icon { width:3.25rem;height:3.25rem;border-radius:50%;background:var(--accent-light);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:1.35rem;color:var(--accent); }
.login-tab-bar { display:flex;background:var(--bg);border-radius:.55rem;padding:.2rem;margin-bottom:1.75rem;gap:.2rem; }
.login-tab { flex:1;text-align:center;padding:.55rem;border-radius:.4rem;font-size:.85rem;font-weight:600;transition:all .3s var(--spring);color:var(--muted);text-decoration:none; }
.login-tab.active { background:var(--accent);color:#0d0608; }
.input-icon-wrap { position:relative; }
.input-icon-wrap .form-input { padding-right:2.75rem; }
.input-prefix-icon { position:absolute;left:.85rem;top:50%;transform:translateY(-50%);font-size:.875rem;color:var(--muted);pointer-events:none; }
.pw-toggle { position:absolute;right:.85rem;top:50%;transform:translateY(-50%);color:var(--muted);cursor:pointer;font-size:.875rem;transition:color .2s;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;z-index:2;line-height:0; }
.pw-toggle:hover { color:var(--accent); }
.pw-toggle svg { display:block;pointer-events:none; }
.auth-divider { position:relative;text-align:center;margin:1.1rem 0; }
.auth-divider::before { content:'';position:absolute;inset:0;display:flex;align-items:center;border-top:1px solid var(--border);top:50%; }
.auth-divider span { position:relative;background:var(--card);padding:0 .65rem;font-size:.72rem;color:var(--muted); }
.google-btn { display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.75rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--fg);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .25s; }
.google-btn:hover { border-color:var(--border-h);background:var(--bg-alt); }

/* ============================================================
   CHECKOUT PAGES
   ============================================================ */
.checkout-wrap { min-height:90vh;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem;position:relative;overflow:hidden; }
.checkout-card {
  width:100%;max-width:430px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:2.5rem;text-align:center;box-shadow:var(--shadow-xl);position:relative;z-index:1;
  animation:checkoutPop .7s var(--spring) both;
}
@keyframes checkoutPop { from{opacity:0;transform:scale(.8) translateY(36px)} to{opacity:1;transform:scale(1) translateY(0)} }
.checkout-icon { display:inline-flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:50%;margin-bottom:1.5rem;animation:iconPop .5s var(--spring) .3s both; }
@keyframes iconPop { from{transform:scale(0)} 60%{transform:scale(1.2)} to{transform:scale(1)} }
.checkout-icon-success { background:rgba(76,175,125,.1);border:2px solid rgba(76,175,125,.3); }
.checkout-icon-cancel  { background:rgba(224,82,82,.1); border:2px solid rgba(224,82,82,.3); }

/* ============================================================
   404
   ============================================================ */
.page-404 { min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:4rem 1.5rem; }
.page-404-code { font-family:var(--font-display);font-size:6.5rem;font-weight:700;line-height:1;background:linear-gradient(135deg,var(--fg),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
/* @keyframes fadeUp — removed: GSAP handles this animation */
/* @keyframes fadeIn — removed: GSAP handles this animation */

/* .reveal — initial invisible + shifted state so GSAP .from() has a visible delta to animate.
   The transform here must match the `y` and `scale` values in main.js initReveal()
   so there is no pop: CSS hides it, GSAP animates it in smoothly.
   (Old rule had only opacity:0 — no transform — causing elements to "pop" into place.) */
/* .reveal — initial invisible state so elements don't flash before GSAP runs.
   CSS provides a no-JS fallback: if GSAP fails to load, .visible is never
   added and elements stay hidden — add a JS-detection class if you need
   a CSS-only fallback.
   IMPORTANT: .reveal.visible is applied by GSAP's onComplete callback only,
   never immediately, so it never fights the tween mid-flight. */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.visible { opacity: 1; transform: none; }
/* Cards get a subtle scale too — safe because they don't contain fixed-height images */
.product-card.reveal,
.gnag-card.reveal,
.bfr-card.reveal { opacity: 0; transform: translateY(28px) scale(0.97); }
/* BUGFIX: the two-class selectors above (.gnag-card.reveal etc.) have the
   same specificity as .reveal.visible and are declared AFTER it, so once
   main.js adds the "visible" class the browser's tie-break (source order)
   let the opacity:0 rule above keep winning — cards, blog posts, feed
   items, and the About page "Meet the Owners" cards stayed permanently
   invisible (only plain, non-card .reveal headings ever showed, since
   headings don't carry .gnag-card/.product-card/.bfr-card). These
   three-class selectors are strictly more specific than the two-class
   rules above, so they win unconditionally once .visible is present. */
.product-card.reveal.visible,
.gnag-card.reveal.visible,
.bfr-card.reveal.visible { opacity: 1; transform: none; }
/* Promote reveal elements to their own compositor layer to prevent flicker */
.reveal { will-change: transform, opacity; backface-visibility: hidden; }
/* rd1–rd6: delay is handled in JS (GSAP delay); transition-delay has no
   effect on GSAP tweens so these classes are intentionally left empty here. */

/* Fallback: if GSAP/ScrollTrigger can't run (CDN blocked, slow network,
   any runtime error in the reveal system), main.js adds .gnag-css-reveal
   to <html> and reveals elements purely with this CSS transition, driven
   by a plain IntersectionObserver — so the result is still a real,
   scroll-timed fade + rise instead of every section snapping instantly
   into place with no animation. Scoped to this class so it never runs
   at the same time as (and visually fights) an active GSAP tween. */
.gnag-css-reveal .reveal {
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.rd1, .rd2, .rd3, .rd4, .rd5, .rd6 { /* delay set via GSAP in main.js */ }

/* ── Hero entrance targets (gsap.fromTo() cascades in main.js) ───────
   Same reasoning as .reveal above: hidden here in CSS first so there is
   nothing to flash before GSAP's tween runs. Previously these had no
   pre-hide rule at all, so the browser painted the fully-built hero for
   a frame, main.js then snapped it to opacity:0 the instant it ran, and
   the entrance tween replayed from there — read by visitors as "the
   hero pops in, resets, then plays its intro again". Selectors mirror
   main.js's hero/page-hero/bfr-hero/login-card queries exactly, so this
   only ever hides what GSAP actually goes on to animate back in. */
.gnag-hero .hero-title,
.gnag-hero .hero-sub,
.gnag-hero .hero-cta-row,
.page-hero .eyebrow,
.hero-inner .eyebrow,
.page-hero h1,
.page-hero p,
.page-hero .btn,
.bfr-hero-title,
.bfr-hero-sub,
.bfr-hero-pills,
.login-card {
  opacity: 0;
}

/* Safety net #1 — reduced motion: main.js intentionally skips the GSAP
   entrance cascade for these elements when the user prefers reduced
   motion, so nothing would otherwise ever set their opacity back to 1. */
@media (prefers-reduced-motion: reduce) {
  .gnag-hero .hero-title,
  .gnag-hero .hero-sub,
  .gnag-hero .hero-cta-row,
  .page-hero .eyebrow,
  .hero-inner .eyebrow,
  .page-hero h1,
  .page-hero p,
  .page-hero .btn,
  .bfr-hero-title,
  .bfr-hero-sub,
  .bfr-hero-pills,
  .login-card {
    opacity: 1;
  }
}

/* Safety net #2 — GSAP missing or the entrance-animation block throws:
   main.js adds .gnag-css-reveal to <html> in both cases (see the
   top-of-IIFE guard and the try/catch around the entrance animations).
   Reveal with a plain CSS transition instead of leaving these blank. */
.gnag-css-reveal .gnag-hero .hero-title,
.gnag-css-reveal .gnag-hero .hero-sub,
.gnag-css-reveal .gnag-hero .hero-cta-row,
.gnag-css-reveal .page-hero .eyebrow,
.gnag-css-reveal .hero-inner .eyebrow,
.gnag-css-reveal .page-hero h1,
.gnag-css-reveal .page-hero p,
.gnag-css-reveal .page-hero .btn,
.gnag-css-reveal .bfr-hero-title,
.gnag-css-reveal .bfr-hero-sub,
.gnag-css-reveal .bfr-hero-pills,
.gnag-css-reveal .login-card {
  opacity: 1;
  transition: opacity .6s cubic-bezier(.4,0,.2,1);
}
/* Add-to-cart confirm */
.add-to-cart-btn.added { border-color:#4caf7d;color:#4caf7d;animation:addedPop .4s var(--spring); }
@keyframes addedPop { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }

/* Toast notification */
#gnag-toast {
  position:fixed;bottom:1.75rem;right:1.5rem;z-index:9999;
  padding:.8rem 1.4rem;border-radius:.7rem;font-size:.875rem;font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  transform:translateY(80px);opacity:0;
  transition:transform .4s var(--spring),opacity .3s ease;
  pointer-events:none;
}
#gnag-toast.show { transform:translateY(0);opacity:1; }

/* ============================================================
   WP DEFAULTS
   ============================================================ */
.alignleft  { float:left;margin-right:1.5rem;margin-bottom:.875rem; }
.alignright { float:right;margin-left:1.5rem;margin-bottom:.875rem; }
.aligncenter{ display:block;margin:1.5rem auto; }
.wp-caption-text { font-size:.78rem;color:var(--muted);text-align:center;padding-top:.35rem; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-h);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* Responsive helpers */
@media(max-width:640px){ .section{padding:2rem 0;} .hide-mob{display:none!important;} }
@media(min-width:641px){ .show-mob{display:none!important;} }

/* ============================================================
   SUBCATEGORY / VARIANT SELECTOR (Products page)
   ============================================================ */
.variant-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.variant-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: .75rem;
  display: block;
}
.variant-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.variant-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .85rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--card);
  cursor: pointer;
  transition: all .2s ease, transform .15s var(--spring);
  user-select: none;
}
.variant-chip:hover   { border-color:var(--accent-border); color:var(--fg); transform:scale(1.04); }
.variant-chip.selected { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }

/* Enquire vs Buy split */
.product-action-tabs {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .2rem;
  margin-bottom: 1rem;
  gap: .2rem;
}
.pat-tab {
  flex: 1;
  text-align: center;
  padding: .55rem;
  border-radius: .35rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: all .25s var(--spring);
  border: none;
  background: none;
}
.pat-tab.active { background: var(--accent); color: #0d0608; }

/* ============================================================
   CUSTOM ORDER FORM — Dark theme inputs (fixes white box)
   ============================================================ */
/* BUGFIX: .gnag-card sets overflow:hidden (needed elsewhere for rounded
   image corners), but this card's Country/Type-of-Work/Budget dropdown
   panels are absolutely-positioned children that need to render outside
   the card's own box — overflow:hidden was clipping them off completely,
   on top of the missing .dropdown-menu background fixed above. Border
   radius is unaffected since this card holds a form, not an edge-to-edge
   image. */
.custom-order-form-wrap { overflow: visible; }
.custom-order-form-wrap .form-input,
.custom-order-form-wrap input,
.custom-order-form-wrap select,
.custom-order-form-wrap textarea,
.custom-order-form-wrap .gnag-sort-btn-field {
  background: var(--bg) !important;
  border: 1px solid var(--border-h) !important;
  border-radius: var(--r-sm) !important;
  padding: .72rem 1rem !important;
  width: 100% !important;
  font-size: .875rem !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}
/* Real inputs always show bright typed text (placeholder dimming is handled
   separately below via ::placeholder); the dropdown triggers are excluded
   here on purpose — they stay dim until a value is chosen, via the
   .gnag-sort-btn-field / .has-value rules further down. */
.custom-order-form-wrap .form-input,
.custom-order-form-wrap input,
.custom-order-form-wrap select,
.custom-order-form-wrap textarea {
  color: var(--fg) !important;
}
.custom-order-form-wrap input::placeholder,
.custom-order-form-wrap textarea::placeholder { color: var(--muted) !important; }
.custom-order-form-wrap input:focus,
.custom-order-form-wrap select:focus,
.custom-order-form-wrap textarea:focus,
.custom-order-form-wrap .gnag-sort-btn-field.open {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}
.custom-order-form-wrap select option { background: var(--card); color: var(--fg); }
.custom-order-form-wrap .form-label { color: var(--fg); }
.co-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px){ .co-form-grid{grid-template-columns:1fr;} }

/* Select arrow */
.select-wrap { position:relative; }
.select-wrap::after {
  content:'▾';
  position:absolute; right:.875rem; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none; font-size:.75rem;
}

/* ============================================================
   RAZORPAY CHECKOUT PAGE
   ============================================================ */
.checkout-page-wrap {
  min-height: 90vh;
  background: var(--bg);
  padding: 3rem 0;
}
.checkout-two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  align-items: start;
}
@media(max-width:768px){ .checkout-two-col{grid-template-columns:1fr;} }

.checkout-section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}
.checkout-section-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.razorpay-btn {
  background: linear-gradient(135deg, var(--accent) 0%, #b8942e 100%);
  color: #0d0608;
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: var(--r-sm);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: none;
  cursor: pointer;
  transition: all .25s var(--spring);
}
.razorpay-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(201,168,76,.35); }
.razorpay-btn:active { transform:scale(.97); }
.razorpay-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.secure-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .72rem;
  color: var(--muted);
  margin-top: .75rem;
}
/* ═══════════════════════════════════════════════════════════
   v4 ADDITIONS — Avatar, Mobile Nav, Category, Social, Auth
   ═══════════════════════════════════════════════════════════ */

/* ── Hide cart on mobile ───────────────────────────────────── */
@media (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-mob { display: none; } /* legacy class kept */
}

/* ── Avatar button & dropdown ─────────────────────────────── */
.gnag-avatar-wrap {
  position: relative;
  transform: translateZ(0); /* isolate compositing layer — prevents header repaint on dropdown open */
}
/* ── Compact account button ─────────────────────────────────── */
.gnag-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem; /* matches .gnag-cart-btn exactly */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  -webkit-backdrop-filter: blur(var(--glass-btn-blur, 18px)) saturate(var(--glass-btn-sat, 130%));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity, 0.1));
  border-radius: 50%;
  cursor: pointer;
  color: var(--fg);
  flex-shrink: 0;
  line-height: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--glass-highlight,0.12)), inset 0 -1px 0 rgba(0,0,0,0.12);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.gnag-avatar-btn:hover {
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 3px rgba(201,168,76,0.1);
}
.gnag-avatar-initials {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 0; /* collapses the text's own line box so flex centers the
                     glyph itself, not a font-metric-dependent line box —
                     avoids capital letters sitting high/low per font */
  text-align: center;
}
/* Hide name — keep initials + caret only */
.gnag-avatar-name { display: none; }

/* ── Account dropdown — liquid glass ────────────────────────── */
/*
   IMPORTANT: position:fixed — NOT absolute.
   Using fixed decouples the panel completely from the header's
   layout tree, so opening it can never shift the navbar or any
   other element. top/left/right are set in px by
   gnagPositionAvatarDropdown() every time the menu opens.
*/
.gnag-avatar-dropdown {
  position: fixed;
  top: 0;          /* overridden by JS before panel is made visible */
  right: 0;        /* overridden by JS before panel is made visible */
  left: auto;
  background: rgba(10, 3, 5, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.2rem;
  min-width: 210px;
  box-shadow: 0 16px 48px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,0.09);
  padding: .4rem;
  display: none;
  pointer-events: none;
  z-index: 10100;  /* above fixed header (z-index:10000) */
  transform-origin: top right;
}
/* JS sets .drop-left on the dropdown itself (after portal it lives on <body>) */
.gnag-avatar-dropdown.drop-left {
  transform-origin: top left;
}
/* Opened by JS adding .open directly to the dropdown element */
.gnag-avatar-dropdown.open {
  display: block;
  pointer-events: all;
  animation: gnagDropIn .18s cubic-bezier(.4,0,.2,1) both;
}
.gnag-avatar-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem .5rem;
}
.gnag-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 0;
  text-align: center;
}
.gnag-avatar-fullname {
  font-size: .82rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 .1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.gnag-avatar-email {
  font-size: .68rem;
  color: var(--muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.gnag-avatar-divider {
  height: 1px;
  background: var(--border);
  margin: .2rem .35rem;
}
.gnag-avatar-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .75rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: .75rem;
  transition: color .15s, background .15s;
}
.gnag-avatar-item:hover {
  color: var(--accent);
  background: rgba(201,168,76,0.1);
}
.gnag-avatar-item svg {
  flex-shrink: 0;
  opacity: .7;
}
.gnag-avatar-item--danger { color: #e05252; }
.gnag-avatar-item--danger:hover { color: #ff6b6b; background: rgba(224,82,82,.08); }
.gnag-avatar-badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--bg-dark);
  font-size: .68rem;
  font-weight: 700;
  padding: .05rem .4rem;
  border-radius: 1rem;
  line-height: 1.5;
}

/* Compact Sign In button — glass pill to match new avatar btn */
.header-actions .btn-sm {
  padding: .3rem .85rem;
  font-size: .78rem;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(var(--glass-btn-blur, 18px));
  -webkit-backdrop-filter: blur(var(--glass-btn-blur, 18px));
  border: 1px solid rgba(255,255,255,var(--glass-border-opacity,0.1)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--glass-highlight,0.1)) !important;
}
.header-actions .btn-sm:hover {
  background: rgba(201,168,76,var(--glass-tint,0.12)) !important;
  border-color: rgba(201,168,76,0.4) !important;
}

/* ── Product image overlay (category link) ─────────────────── */
.pr-img-link {
  display: block;
  text-decoration: none;
  position: relative;
}
.pr-img-link .pr-img {
  position: relative;
  overflow: hidden;
}
.pr-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12,6,8,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .25s var(--ease-smooth);
}
.pr-img-link:hover .pr-img-overlay { opacity: 1; }
.pr-img-link:hover .pr-img img { transform: scale(1.04); }

/* ── Category page product card image link ──────────────────── */
/* ── Products grid ─────────────────────────────── */
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
@media(max-width:900px){ .products-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; } }

/* ── Product card image ────────────────────────── */
.product-card-image { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt); }
.product-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.product-card:hover .product-card-image img { transform:scale(1.06); }
.product-card-badge { position:absolute; top:.6rem; right:.6rem; background:var(--accent); color:var(--background); font-size:.72rem; font-weight:700; padding:.25rem .65rem; border-radius:2rem; }
.product-card-image-link { display: block; text-decoration: none; }
.product-card-image-link .product-card-image { cursor: pointer; }

/* ── Color swatch card (only rendered when admin has actually set a
   hex color for the item — see gnag_is_template_visible-style guards
   in the listing page templates) ───────────────────────────────── */
.gnag-color-swatch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: .75rem;
  background: var(--swatch-bg, var(--bg-alt));
}
.gnag-color-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: monospace;
  padding: .2rem .55rem;
  border-radius: 4px;
  background: rgba(0,0,0,.25);
}
.gnag-color-label--light { color: #fff; }
.gnag-color-label--dark  { color: #1a1a1a; background: rgba(255,255,255,.55); }
.gnag-color-swatch-dot {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--swatch-bg, #888);
  border: 1px solid rgba(255,255,255,.4);
}

/* ── Generic placeholder for cards that have neither a featured
   image nor an admin-set color (avoids a blank/empty-looking box) ── */
.gnag-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
}
.gnag-placeholder-icon {
  width: 26%;
  height: 26%;
  color: var(--muted);
  opacity: .45;
}


/* ── Social feed ──────────────────────────────────────────── */
.social-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.social-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1rem;
  border-radius: 2rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s;
}
.social-filter-btn.active,
.social-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.social-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.social-post-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.social-post-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-3px);
}
.social-post-platform {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.social-post-embed {
  padding: .5rem;
  overflow: hidden;
}
.social-post-embed iframe,
.social-post-embed blockquote {
  width: 100% !important;
  max-width: 100% !important;
}
.social-post-caption {
  padding: .75rem 1rem;
  font-size: .83rem;
  color: var(--muted);
  margin: 0;
  border-top: 1px solid var(--border);
}
.social-post-link-card {
  display: block;
  text-decoration: none;
}
.social-post-link-inner {
  padding: 2rem 1.5rem;
  text-align: center;
}
.social-post-link-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--accent);
}
.social-post-link-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 .4rem;
}
.social-post-link-url {
  font-size: .78rem;
  color: var(--muted);
  margin: 0 0 1rem;
}
.social-post-cta {
  display: inline-block;
  padding: .4rem 1.2rem;
  background: var(--accent);
  color: var(--bg-dark);
  border-radius: 2rem;
  font-size: .8rem;
  font-weight: 600;
  transition: opacity .2s;
}
.social-post-link-card:hover .social-post-cta { opacity: .85; }

/* Image-based social card */
.social-post-image-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.social-post-img-wrap {
  overflow: hidden;
  background: var(--bg-alt);
}
.social-post-img-wrap img {
  transition: transform .35s ease;
}
.social-post-card:hover .social-post-img-wrap img {
  transform: scale(1.04);
}
.social-post-card-footer {
  padding: .85rem 1rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.social-post-card-footer .social-post-platform {
  border-bottom: none;
  padding: 0;
  margin-bottom: .1rem;
}
.social-post-card-footer .social-post-cta {
  font-size: .75rem;
  padding: .3rem .9rem;
  margin-top: .4rem;
  align-self: flex-start;
}
.gnag-form-error {
  background: rgba(224,82,82,.12);
  border: 1px solid var(--destructive);
  color: var(--destructive);
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  font-size: .84rem;
  margin-bottom: 1.1rem;
}
.gnag-form-success {
  background: rgba(107,180,100,.12);
  border: 1px solid #4caf50;
  color: #7dbf7a;
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  font-size: .84rem;
  margin-bottom: 1.1rem;
}

/* ── Login tab 3-column ───────────────────────────────────── */
.login-tab-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.login-tab {
  padding: .6rem;
  font-size: .78rem;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
  transition: all .2s;
}
.login-tab.active {
  background: var(--accent);
  color: var(--bg-dark);
  font-weight: 700;
}
.login-tab:hover:not(.active) {
  color: var(--accent);
  background: var(--accent-light);
}

/* ── Account page ─────────────────────────────────────────── */
@media (max-width: 680px) {
  .account-layout { grid-template-columns: 1fr !important; }
}

/* ── Responsive product grid ──────────────────────────────── */
@media (max-width: 480px) {
  .products-grid:not(.gnag-layout--masonry):not(.gnag-layout--carousel):not(.gnag-layout--list-compact) { grid-template-columns: 1fr !important; }
  .social-posts-grid { grid-template-columns: 1fr !important; }
  .social-filter-bar { justify-content: center; }
}

/* ── Sharp images at all DPI ─────────────────────────────── */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img { image-rendering: auto; }
}
/* ══════════════════════════════════════════════════════════════
   GNAG v5 — New additions
   ══════════════════════════════════════════════════════════════ */

/* Legal pages */
.gnag-legal-body { color: var(--muted); line-height: 1.85; font-size: .93rem; }
.gnag-legal-body h2 { font-family: var(--font-display); font-size: 1.2rem; color: var(--accent); margin: 2rem 0 .65rem; font-weight: 700; }
.gnag-legal-body p  { margin: 0 0 1rem; }
.gnag-legal-body ul { padding-left: 1.5rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.gnag-legal-body li { list-style: disc; }
.gnag-legal-body strong { color: var(--fg); }

/* T&C checkbox shake animation */
@keyframes gnagShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* Search overlay keyboard hint */
kbd {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .75rem;
  font-family: var(--font-body);
}

/* Order status badges in account */
.gnag-order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border-radius: 2rem;
  font-size: .78rem;
  font-weight: 700;
}

/* Tracking info box */
.gnag-tracking-box {
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: var(--r-sm);
  padding: .875rem 1rem;
}

/* ── Sort pill + dropdown ── */
.gnag-sort-btn {
  padding: .38rem 1.05rem !important;
  border: 1px solid rgba(255,255,255,var(--glass-border-opacity,0.12)) !important;
  border-radius: 2rem !important;
  font-size: .78rem !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(var(--glass-btn-blur,18px)) saturate(var(--glass-btn-sat,130%)) !important;
  -webkit-backdrop-filter: blur(var(--glass-btn-blur,18px)) saturate(var(--glass-btn-sat,130%)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--glass-highlight,0.12)) !important;
  cursor: pointer;
  transition: all .22s ease;
  line-height: 1.4 !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.gnag-sort-btn::after {
  content: '▾';
  font-size: .65rem;
  line-height: 1;
  transition: transform .2s ease;
}
.gnag-sort-btn.open::after { transform: rotate(180deg); }
.gnag-sort-btn:hover,
.gnag-sort-btn.open {
  border-color: rgba(201,168,76,0.45) !important;
  color: var(--accent) !important;
  background: rgba(201,168,76,var(--glass-tint,0.1)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 2px rgba(201,168,76,0.1) !important;
}
/* Field-style variant — used on the Custom Orders form (Country / Type of
   Work / Budget) so the dropdown trigger matches the look of the plain
   .form-input text fields around it, instead of the pill-shaped glass
   toolbar button above. Panel/option behavior is identical either way. */
.gnag-sort-btn.gnag-sort-btn-field {
  padding: .72rem 1rem !important;
  border: 1px solid var(--border-h) !important;
  border-radius: var(--r-sm) !important;
  font-size: .875rem !important;
  color: var(--muted) !important;
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.gnag-sort-btn.gnag-sort-btn-field:hover { border-color: var(--border-h) !important; color: var(--muted) !important; background: var(--bg) !important; }
.gnag-sort-btn.gnag-sort-btn-field.open {
  border-color: var(--accent) !important;
  color: var(--fg) !important;
  background: var(--bg) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}
.gnag-sort-btn.gnag-sort-btn-field.has-value { color: var(--fg) !important; }
.gnag-sort-panel {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: rgba(10,3,5,0.72);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.2rem;
  padding: .4rem;
  z-index: 500;   /* below fixed nav (10000); above normal page content */
  min-width: 175px;
  box-shadow: 0 16px 48px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,0.09);
  flex-direction: column;
  gap: .1rem;
}
.gnag-sort-panel.open { display: flex; animation: gnagDropIn .18s cubic-bezier(.4,0,.2,1) both; }
/* Variant for long option lists (Country, Type of Work on the Custom
   Orders form) — caps the panel height with a scrollbar instead of
   letting it grow tall enough to overlap page content below it. */
.gnag-sort-panel-scroll { max-height: 280px; overflow-y: auto; flex-wrap: nowrap; }
.gnag-sort-opt {
  background: none !important;
  border: none !important;
  border-radius: .75rem !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  padding: .5rem 1rem !important;
  text-align: left;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  line-height: 1.4 !important;
  width: 100%;
}
.gnag-sort-opt:hover { background: rgba(201,168,76,0.12) !important; color: var(--accent) !important; }
.gnag-sort-opt.active { color: var(--accent) !important; background: rgba(201,168,76,0.12) !important; }

/* ============================================================
   RESPONSIVE — Comprehensive Mobile, Tablet & All-Device Fixes
   Breakpoints: 1200 / 900 / 768 / 640 / 480 / 380
   ============================================================ */

/* ── Responsive layout utility classes ───────────────────────
   Added to PHP templates so media queries can override inline
   grid-template-columns (which !important is needed for)       */

/* Two-column: equal */
.gnag-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
/* Two-column: text+image hero split */
.gnag-two-col-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
/* Two-column: 1.5fr / 1fr (contact, feature) */
.gnag-two-col-wide {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: start;
}
/* Three-column */
.gnag-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
/* Four-column product grid */
.gnag-four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
/* Artistry gallery classes */

/* Two-column: text left, images right */
.gnag-artistry-section .gnag-container > div:first-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.gnag-artistry-section .section-desc {
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 767px) {
  .gnag-artistry-section .gnag-container > div:first-child {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.gnag-art-asym {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: .875rem;
  margin-bottom: .875rem;
}
.gnag-art-asym > div:first-child { grid-row: 1 / 3; }
.gnag-art-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .875rem;
  margin-bottom: .875rem;
}
.gnag-art-mosaic {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: .875rem;
  margin-bottom: .875rem;
}
.gnag-art-thumbs {
  display: grid;
  gap: .875rem;
}

/* ── Artistry scroll-trigger scale ──────────────────────────
   Kept as minimal base — cinema mode handles the real animation.
────────────────────────────────────────────────────────────── */
.gnag-art-scroll-scale {
  will-change: transform;
  transform-origin: center center;
  transition: transform 80ms linear;
}
.gnag-art-scroll-scale.scale-settled:hover img { transform: scale(1.04) !important; }
@media (prefers-reduced-motion: reduce) {
  .gnag-art-scroll-scale { transform: none !important; transition: none !important; }
}

/* ── Image container ── */
.gnag-cinema-images {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Single image slot ── */
.gnag-cinema-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* JS drives scale via inline style; CSS drives opacity transitions */
  transition: opacity 0.55s ease;
  will-change: opacity;
}
.gnag-cinema-img.active { opacity: 1; }

.gnag-cinema-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* JS drives scale */
  will-change: transform;
  transform-origin: center center;
  transform: scale(0.18); /* JS overrides this immediately */
  transition: none; /* JS uses rAF — no CSS transition needed */
  pointer-events: none;
}

/* ── Dark overlay ── */
.gnag-cinema-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* background set inline from PHP */
}

/* ── Header / title ── */
.gnag-cinema-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  padding: 1.5rem;
  max-width: 680px;
  width: 90%;
  /* JS drives opacity */
  opacity: 1;
  transition: opacity 0.4s ease;
}
.gnag-cinema-header .eyebrow {
  color: var(--accent);
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gnag-cinema-header h2 {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  color: #fff;
  margin: 0 0 0.875rem;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.gnag-cinema-header p {
  font-size: clamp(0.88rem, 1.8vw, 1.05rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}

/* ── Progress dots ── */
.gnag-cinema-dots {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 4;
}
.gnag-cinema-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: default;
}
.gnag-cinema-dot.active {
  background: var(--accent);
  transform: scale(1.35);
}

/* ── Bottom progress bar ── */
.gnag-cinema-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.12);
  z-index: 4;
}
.gnag-cinema-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.1s linear;
}

/* ── Reduced motion fallback ── */
@media (prefers-reduced-motion: reduce) {
  .gnag-cinema-img img { transform: scale(1) !important; transition: none !important; }
  .gnag-cinema-img     { opacity: 0; }
  .gnag-cinema-img.active { opacity: 1; }
}
/* Owners grid */
.gnag-owners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

/* ── Large desktop (≤ 1200px) ─────────────────────────────── */
@media (max-width: 1200px) {
  .gnag-container { width: 95%; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 2rem; }
}

/* ── Tablet landscape / Nav collapse (≤ 900px) ───────────── */
@media (max-width: 900px) {
  /* Layout utilities */
  .gnag-two-col-hero    { gap: 2.5rem !important; }
  .gnag-three-col       { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .gnag-four-col        { grid-template-columns: repeat(2, 1fr) !important; gap: .875rem !important; }
  .gnag-art-3col        { grid-template-columns: 1fr 1fr !important; }
  .gnag-art-asym        { grid-template-columns: 1fr !important; }
  .gnag-art-asym > div:first-child { grid-row: unset !important; }
  .gnag-art-mosaic      { grid-template-columns: 1fr !important; }
  .gnag-two-col-wide    { grid-template-columns: 1fr !important; }

  /* Section spacing */
  .section    { padding: 3rem 0; }

  /* Hero adjustments */
  .hero-inner { max-width: 100%; padding: 4rem 0 3rem; }

  /* Stat bar  */
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .stat-num   { font-size: 1.75rem; }

  /* Product detail */
  .pdp-zoom-result { display: none !important; }
  .pdp-zoom-lens   { display: none !important; }

  /* Account layout */
  .account-layout { grid-template-columns: 1fr !important; }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr; }
}

/* ── Tablet portrait (≤ 768px) ────────────────────────────── */
@media (max-width: 768px) {
  /* Header */
  .header-wrap { height: 4.25rem; gap: .75rem; }
  .gnag-logo img,
  .gnag-logo-icon { width: 2.75rem; height: 2.75rem; }
  .logo-name  { font-size: .88rem !important; letter-spacing: .04em; }
  .logo-sub   { font-size: .6rem; }
  .header-actions { gap: .6rem; }

  /* Layout utilities */
  .gnag-two-col      { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .gnag-two-col-hero { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .gnag-three-col    { grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important; }
  .gnag-four-col     { grid-template-columns: repeat(2, 1fr) !important; gap: .875rem !important; }
  .gnag-art-thumbs   { grid-template-columns: repeat(3, 1fr) !important; }
  .gnag-owners-grid  { grid-template-columns: 1fr 1fr !important; }

  /* Inline-style grids — need !important to beat specificity */
  /* front-page carved-from-stone section */
  .gnag-section-stone { grid-template-columns: 1fr !important; gap: 2rem !important; }
  /* about heritage section */
  .gnag-section-heritage { grid-template-columns: 1fr !important; gap: 2rem !important; }
  /* inline grids that we can't add class to */
  .section .gnag-container > div[style*="1fr 1fr"],
  .section .gnag-container > div[style*="1.2fr"],
  .section .gnag-container > div[style*="1.3fr"],
  .section .gnag-container > div[style*="1.4fr"],
  .section .gnag-container > div[style*="1.5fr"],
  .section .gnag-container > div[style*="1.6fr"],
  .section .gnag-container > div[style*="2fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Hero — pull up behind navbar (4.25rem at this breakpoint) */
  .gnag-hero  { margin-top: -4.25rem; padding-top: 4.25rem; }
  .page-hero  { margin-top: -4.25rem; padding-top: calc(4.25rem + 4.5rem); }
  .hero-inner { padding: 3rem 0 2.5rem; }
  .hero-title { font-size: clamp(2.2rem, 7vw, 3.5rem); }
  .hero-cta-row { flex-direction: column; align-items: center; gap: .65rem; }
  .hero-cta-row .btn { width: 100%; justify-content: center; max-width: 320px; }

  /* Section spacing */
  .section    { padding: 2.5rem 0; }
  .section-sm { padding: 1.75rem 0; }

  /* Page hero */
  .page-hero { padding: 3rem 0 2rem; }

  /* CTA Banner */
  .cta-banner { padding: 2.5rem 1.5rem; }
  .cta-btns   { flex-direction: column; align-items: stretch; gap: .65rem; }
  .cta-btns .btn { width: 100%; justify-content: center; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .stat-num   { font-size: 1.6rem; }

  /* Products */
  .product-grid    { grid-template-columns: 1fr 1fr; }
  .products-grid   { grid-template-columns: 1fr 1fr; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr 1fr; }

  /* Features grid */
  .features-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Cart */
  .cart-layout  { grid-template-columns: 1fr; }
  .cart-summary-box { position: static; }

  /* Checkout */
  .checkout-two-col { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col-pair { flex-direction: column; gap: 1.5rem; }

  /* Forms */
  .form-row    { grid-template-columns: 1fr; }
  .co-form-grid { grid-template-columns: 1fr; }

  /* Orbs — reduce on mobile for perf */
  .orb { opacity: .18; }

  /* Product row */
  .product-row,
  .product-row.rev { grid-template-columns: 1fr; }
  .product-row.rev .pr-img,
  .product-row.rev .pr-body { order: unset; }
  .pr-img  { min-height: 220px; }
  .pr-body { padding: 1.5rem; }
}

/* ── Mobile large (≤ 640px) ───────────────────────────────── */
@media (max-width: 640px) {
  /* Container */
  .gnag-container,
  .gnag-container-sm { padding-left: 1.25rem; padding-right: 1.25rem; }
  #gnag-header .gnag-container,
  #gnag-footer .gnag-container { padding-left: 1rem; padding-right: 1rem; }

  /* Section */
  .section    { padding: 2.5rem 0; }
  .section-sm { padding: 1.75rem 0; }

  /* Typography scale */
  .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .section-desc  { font-size: .92rem; }

  /* Hero — sized to content on handhelds, see base .gnag-hero rule */
  .hero-inner { padding: 2.5rem 0 2rem; }
  .hero-sub   { font-size: .9rem; }
  .hero-cta-row .btn { max-width: 100%; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .stat-num   { font-size: 1.5rem; }
  .stat-lbl   { font-size: .68rem; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }
  .feature-card,
  .gnag-roots-card  { padding: 1.35rem; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr 1fr; }

  /* Three-col → single on mobile */
  .gnag-three-col   { grid-template-columns: 1fr !important; }
  .gnag-four-col    { grid-template-columns: repeat(2, 1fr) !important; gap: .875rem !important; }
  .gnag-art-3col    { grid-template-columns: 1fr !important; }
  .gnag-art-thumbs  { grid-template-columns: repeat(2, 1fr) !important; }
  .gnag-owners-grid { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }

  /* Filter bars */
  .gnag-filter-bar { gap: .4rem; }
  .gnag-filter-btn  { font-size: .72rem; padding: .35rem .85rem; }
  .social-filter-bar { justify-content: center; }

  /* Login */
  .login-card { padding: 1.5rem 1.25rem; margin: 0 .5rem; }
  .login-wrap { padding: 2rem 1rem; }

  /* Cookie banner */
  .cookie-inner { flex-direction: column; align-items: stretch; text-align: center; gap: .75rem; }

  /* Products grid */
  .products-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Buttons */
  .btn-lg { padding: .75rem 1.5rem; font-size: .925rem; }
}

/* ── Mobile standard (≤ 480px) ────────────────────────────── */
@media (max-width: 480px) {
  /* Header */
  .header-wrap { height: 3.75rem; }
  .gnag-logo img,
  .gnag-logo-icon { width: 2.4rem; height: 2.4rem; }
  .logo-name { font-size: .8rem !important; }
  .logo-sub  { display: none; }
  .gnag-search-expand { width: clamp(160px, calc(100vw - 220px), 300px); }
  .gnag-cart-btn,
  .gnag-avatar-btn,
  .gnag-account-btn-mobile { width: 2.2rem; height: 2.2rem; }

  /* Hero — pull up behind navbar (3.75rem at this breakpoint) */
  .gnag-hero { margin-top: -3.75rem; padding-top: 3.75rem; }
  .page-hero { margin-top: -3.75rem; padding-top: calc(3.75rem + 3.5rem); }
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero-sub   { font-size: .875rem; margin-bottom: 1.75rem; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: .875rem; }
  .stat-num   { font-size: 1.35rem; }

  /* Products */
  .product-grid    { grid-template-columns: 1fr; }
  .products-grid:not(.gnag-layout--masonry):not(.gnag-layout--carousel):not(.gnag-layout--list-compact) { grid-template-columns: 1fr !important; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr; }

  /* Art thumbs */
  .gnag-art-thumbs { grid-template-columns: repeat(2, 1fr) !important; }

  /* Cart */
  .cart-item { grid-template-columns: 64px 1fr; gap: .75rem; }
  .cart-img  { height: 64px; }
  .cart-summary-box { padding: 1.25rem; }

  /* 404 */
  .page-404-code { font-size: 4rem; }

  /* Checkout pages */
  .checkout-card { padding: 1.75rem 1.25rem; }

  /* CTA banner */
  .cta-banner { padding: 2rem 1.25rem; }

  /* Product card footer */
  .pc-footer      { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .product-card-footer { flex-direction: column; align-items: flex-start; gap: .5rem; }

  /* Filter bar stacking */
  .gallery-filters { gap: .45rem; }

  /* Social posts */
  .social-posts-grid { grid-template-columns: 1fr !important; }

  /* Login tab bar */
  .login-tab-bar { font-size: .75rem; }
  .login-tab     { padding: .5rem .4rem; font-size: .73rem; }

  /* Form inputs — increase tap target */
  .form-input { padding: .875rem 1rem; font-size: 1rem; }
  select.form-input { padding-right: 2.5rem; }

  /* Var chips */
  .variant-chip { padding: .4rem .7rem; font-size: .75rem; }

  /* Product action tabs */
  .pat-tab { font-size: .75rem; padding: .5rem .4rem; }

  /* Section */
  .section { padding: 2rem 0; }
  .section-py-tight { padding: 1.75rem 0; }

  /* Chat widget — fixed 360px panel overflowed the viewport on phones
     narrower than ~410px; make it fill the width with safe margins. */
  .chat-widget { left: .75rem; right: .75rem; width: auto; bottom: 5.75rem; max-height: min(580px, 70vh); }

  /* Footer */
  .footer-social a { width: 2.1rem; height: 2.1rem; }
}

/* ── Small mobile (≤ 380px) ───────────────────────────────── */
@media (max-width: 380px) {
  /* Container */
  .gnag-container { padding-left: 1rem; padding-right: 1rem; }

  /* Header */
  .header-wrap { height: 3.5rem; gap: .5rem; }
  .header-actions { gap: .4rem; }
  .logo-name { font-size: .72rem !important; }
  .gnag-logo { gap: .4rem; }

  /* Hero */
  .hero-title  { font-size: clamp(1.75rem, 10vw, 2.2rem); }
  .hero-sub    { font-size: .82rem; }
  .hero-inner  { padding: 2rem 0 1.5rem; }

  /* Hero — pull up behind navbar (3.5rem at this breakpoint) */
  .gnag-hero { margin-top: -3.5rem; padding-top: 3.5rem; }
  .page-hero { margin-top: -3.5rem; padding-top: calc(3.5rem + 3rem); }
  .btn-lg { padding: .7rem 1.25rem; font-size: .85rem; }

  /* Stats */
  .stat-num { font-size: 1.2rem; }

  /* Cookie */
  .cookie-inner { padding: .875rem 0; }

  /* Product card image ratio — shorter on very small */
  .pc-img { aspect-ratio: 16/9; }
}

/* ── Touch / Pointer improvements ────────────────────────────
   Minimum 44×44px tap targets on touch devices               */
@media (hover: none) and (pointer: coarse) {
  .gnag-search-expand { width: clamp(160px, calc(100vw - 220px), 300px); }
  .gf-btn, .gnag-filter-btn { padding: .55rem 1rem; }
  .gnag-sort-btn    { padding: .55rem 1.1rem !important; }
  .qty-btn          { width: 2.25rem; height: 2.25rem; }
  .btn-sm           { padding: .6rem 1.15rem; }

  /* Disable hover animations that cause sticking on touch */
  .gnag-card:hover  { transform: none; }
  .product-card:hover { transform: none; box-shadow: none; }
  .gnag-card:active  { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.30); }
  .product-card:active { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }

  /* Wider gap on filter bars for easier tapping */
  .gallery-filters { gap: .55rem; }
}

/* ── Safe area / notch support (iPhone X+) ─────────────────── */
@supports (padding: max(0px)) {
  #gnag-header { padding-top: env(safe-area-inset-top); }
  #gnag-footer .gnag-container { padding-bottom: env(safe-area-inset-bottom); }
  #gnag-toast  { bottom: max(1.75rem, env(safe-area-inset-bottom)); }
  #cookie-banner { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Landscape mobile ─────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .gnag-hero  { margin-top: -3.5rem; padding-top: 3.5rem; }
  .page-hero  { margin-top: -3.5rem; padding-top: calc(3.5rem + 2.5rem); }
  .hero-inner { padding: 2rem 0; }
  .header-wrap { height: 3.5rem; }
  #gnag-mobile-nav.open { max-height: calc(100vh - 3.5rem); overflow-y: auto; }
}

/* ── Hero text: stay clear of the slide arrows ───────────────
   The arrows sit at the hero's vertical center (top:50%), which is the
   same height the text block centers itself at — without this, the
   subtitle line ran directly under the arrows. Placed after every other
   .hero-inner padding rule above so this addition isn't silently wiped
   out by their padding shorthand (which resets left/right to 0). */
@media (max-width: 640px) {
  /* Linear scale: 1.85rem clearance at 320px (smallest real phones, where
     the arrow would otherwise sit under the text) down to 1rem at 412px
     (Galaxy S20 Ultra — confirmed fine at 1rem here), then flat at 1rem
     for anything wider. Slope = (1rem - 1.85rem) / (412px - 320px). */
  .hero-inner {
    padding-left:  clamp(1rem, calc(1.85rem - (100vw - 320px) * 0.009239), 1.85rem);
    padding-right: clamp(1rem, calc(1.85rem - (100vw - 320px) * 0.009239), 1.85rem);
  }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  #gnag-header, #gnag-footer, #cookie-banner,
  #gnag-toast { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a    { color: #000 !important; text-decoration: underline; }
}

/* ── Contact info cards grid — responsive ────────────────── */
.gnag-contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}
@media (max-width: 640px) {
  .gnag-contact-info-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (max-width: 380px) {
  .gnag-contact-info-grid { grid-template-columns: 1fr; }
}

/* ── 4-step process grid ──────────────────────────────────── */
.gnag-four-step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .gnag-four-step-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
  .gnag-four-step-grid { grid-template-columns: 1fr 1fr; gap: .875rem; }
}
@media (max-width: 380px) {
  .gnag-four-step-grid { grid-template-columns: 1fr; }
}

/* ── Login / OTP page — mobile fixes ─────────────────────── */
@media (max-width: 480px) {
  .login-wrap  { padding: 1.5rem .75rem; align-items: flex-start; padding-top: 2.5rem; }
  .login-card  { padding: 1.5rem 1.1rem; border-radius: .75rem; }
  /* OTP digit input */
  input[style*="letter-spacing:.3rem"] {
    max-width: 100% !important;
    width: 100% !important;
    letter-spacing: .45rem;
    font-size: 1.1rem;
  }
  /* T&C label wrap */
  label[id="reg-tc-label"],
  label[id="phone-tc-label"] {
    padding: .6rem .75rem;
  }
  .google-btn { padding: .65rem; font-size: .82rem; }
}

/* ── Blog / Single post ───────────────────────────────────── */
@media (max-width: 640px) {
  .gnag-two-col { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* ── Sticky cart summary box ──────────────────────────────── */
@media (max-width: 768px) {
  .cart-summary-box { position: static !important; top: auto !important; }
}

/* ── Filters + sort bar — mobile row wrapping ─────────────── */
@media (max-width: 600px) {
  .gnag-filter-bar { gap: .4rem; }
  .gnag-sort-wrap-right { margin-left: auto; }
  .gnag-sort-btn   { width: 100% !important; justify-content: center; }
  .gnag-sort-panel { right: auto !important; left: 0 !important; width: 100% !important; }
  /* Listing-page Sort dropdown (inc/filter-bar.php): the rule above sizes it
     to the narrow, right-pushed button wrapper, so with min-width:175px it
     ran off the right edge of the screen. Anchor it to the wrap's right
     edge instead — it extends leftward into open space — and clamp its
     width so it can never exceed the viewport regardless of option length. */
  .gnag-sort-panel.gnag-filter-panel-left {
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 1.5rem);
  }
}

/* ── Search overlay — full screen on mobile ───────────────── */
@media (max-width: 640px) {

  .gnag-search-box     { padding: 0; }
  .gnag-search-box input { font-size: 1rem; }
}

/* ── Lightbox — no padding on small screens ───────────────── */
@media (max-width: 480px) {
  .lightbox     { padding: .5rem; }
  .lightbox img { max-width: 100%; max-height: 80vh; }
  .lightbox-close { top: .6rem; right: .6rem; }
}

/* ── Toast — full width on mobile ────────────────────────── */
@media (max-width: 480px) {
  #gnag-toast {
    right: .75rem;
    left: .75rem;
    bottom: 1rem;
    text-align: center;
  }
}

/* ── Tables — horizontal scroll on mobile ────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
}
@media (min-width: 769px) {
  table { display: table; }
}
td, th {
  padding: .65rem .875rem;
  border: 1px solid var(--border);
  font-size: .875rem;
  text-align: left;
  white-space: nowrap;
}
th { color: var(--accent); background: var(--bg-alt); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

/* ── Images inside content — ensure full-width on mobile ──── */
@media (max-width: 640px) {
  .gnag-container img:not([class]) { width: 100%; height: auto; }
  .wp-block-image { width: 100%; }
}

/* ── Tablet-specific: 2-column product grid improvement ────── */
@media (min-width: 481px) and (max-width: 767px) {
  .products-grid:not(.gnag-layout--masonry):not(.gnag-layout--carousel):not(.gnag-layout--list-compact):not(.gnag-layout--list):not(.gnag-layout--timeline) { grid-template-columns: repeat(2, 1fr) !important; }
  .product-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-grid  { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Large tablet (iPad Pro) — 3-col still ok ──────────────── */
@media (min-width: 900px) and (max-width: 1024px) {
  .gnag-container { width: 96%; }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-col-pair { flex-direction: column; gap: 1.5rem; }
}

/* ============================================================
   CUSTOM ORDER PROCESS — Dual layout (desktop cards / mobile stepper)
   ============================================================ */

/* ── Desktop horizontal cards ─────────────────────────────── */
.gnag-process-desktop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.gnag-process-mobile { display: none; }

.gnag-process-card {
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: visible;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.gnag-process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  border-color: rgba(200,169,110,.45);
}
.gnag-process-num {
  position: absolute;
  top: .875rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  color: rgba(201,168,76,.1);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.gnag-process-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.gnag-process-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--fg);
}
.gnag-process-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.65;
}
/* Arrow connector between cards */
.gnag-process-arrow {
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--accent);
  opacity: .5;
  z-index: 2;
  pointer-events: none;
}

/* ── Tablet: 2×2 grid ────────────────────────────────────── */
@media (max-width: 900px) {
  .gnag-process-desktop {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .gnag-process-arrow { display: none; }
}

/* ── Mobile: switch to vertical stepper ─────────────────── */
@media (max-width: 600px) {
  .gnag-process-desktop { display: none; }
  .gnag-process-mobile  { display: flex; flex-direction: column; gap: 0; }

  .gnag-step-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  .gnag-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 2.25rem;
  }
  .gnag-step-circle {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: #0d0608;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--accent-light);
    position: relative;
    z-index: 1;
  }
  .gnag-step-line {
    width: 2px;
    flex: 1;
    min-height: 2.5rem;
    background: linear-gradient(to bottom, var(--accent-border), var(--border));
    margin: .25rem 0;
  }
  .gnag-step-content {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding-bottom: 1.75rem;
    flex: 1;
  }
  .gnag-step-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gnag-step-text { flex: 1; }
  .gnag-step-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: .3rem;
    line-height: 1.3;
  }
  .gnag-step-desc {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.65;
  }
  /* Last row: no bottom padding */
  .gnag-step-row:last-child .gnag-step-content { padding-bottom: 0; }
}

/* ============================================================
   CONTACT INFO CARDS — fully responsive auto-fit grid
   ============================================================ */
.gnag-contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}
/* Ensure cards fill height evenly */
.gnag-contact-info-grid .gnag-card {
  display: flex;
  flex-direction: column;
}
.gnag-contact-info-grid .gnag-card h3 {
  font-size: 1rem;
  margin-bottom: .3rem;
}
/* Icon badge inside contact cards */
.gnag-contact-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .65rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .gnag-contact-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }
}
@media (max-width: 640px) {
  .gnag-contact-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: .875rem;
  }
  .gnag-contact-info-grid .gnag-card { padding: 1.25rem !important; }
  .gnag-contact-info-grid .gnag-card h3 { font-size: .9rem; }
  .gnag-contact-info-grid .gnag-card p  { font-size: .78rem; }
  .gnag-contact-icon { width: 2.25rem; height: 2.25rem; font-size: .95rem; margin-bottom: .75rem; }
}
@media (max-width: 420px) {
  .gnag-contact-info-grid { grid-template-columns: 1fr; }
}

/* ── Contact form + sidebar stacking ─────────────────────── */
.gnag-two-col-wide {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .gnag-two-col-wide { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}

/* ── Contact sidebar cards — full width when stacked ─────── */
@media (max-width: 768px) {
  .gnag-two-col-wide > div:last-child { display: flex; flex-direction: column; gap: 1rem; }
  .cta-banner { text-align: left; }
  .cta-banner .cta-btns { justify-content: flex-start; }
}

/* ── Map responsive height ────────────────────────────────── */
@media (max-width: 640px) {
  iframe[title="Location map"] { height: 220px !important; }
}

/* ============================================================
   LOGO — Dark / Light mode switching
   Uses prefers-color-scheme to show the correct logo variant.
   Both images are in the DOM; CSS hides the irrelevant one.
   ============================================================ */

/* By default both are hidden; the correct media query reveals one */
.gnag-logo-dark-mode,
.gnag-logo-light-mode {
  display: none;
}

/* Dark mode → show the white/light logo */
@media (prefers-color-scheme: dark) {
  .gnag-logo-dark-mode  { display: block; }
  .gnag-logo-light-mode { display: none;  }
}

/* Light mode (or no preference) → show the black/dark logo */
@media (prefers-color-scheme: light),
       (prefers-color-scheme: no-preference) {
  .gnag-logo-light-mode { display: block; }
  .gnag-logo-dark-mode  { display: none;  }
}

/* When neither mode-specific logo is set, the single .gnag-logo-img
   (no dark/light class) behaves as before — always visible */
.gnag-logo-img:not(.gnag-logo-dark-mode):not(.gnag-logo-light-mode) {
  display: block;
}

/* Size + object-fit for all logo images — inherits rotation animation from .gnag-logo img rule above */
.gnag-logo-img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  transition: transform .6s var(--spring, cubic-bezier(0.34,1.56,0.64,1)),
              filter .3s ease;
}
.gnag-logo:hover .gnag-logo-img {
  transform: rotate(360deg) scale(1.08);
  filter: drop-shadow(0 0 6px rgba(201,168,76,.5));
}

/* ══════════════════════════════════════════════════════════
   ARTISTRY CINEMA SCROLL MODE
   Full-viewport scroll-driven image reveal. A tall scroll
   container (N × vh-per-image) holds a sticky frame that
   stays locked in view. JS maps scroll progress per-image
   to scale(startScale → 1) + cross-fade to next image.
══════════════════════════════════════════════════════════ */

/* Section wrapper — no padding; cinema takes full width */
.gnag-artistry-cinema-section {
  position: relative;
  width: 100%;
  overflow: hidden;          /* clip the sticky frame edges   */
  background: #000;
}

/* Scroll container: height is set inline by PHP (N × vh) */
.gnag-cinema-wrap {
  position: relative;
  width: 100%;
}

/* Sticky frame: locks to viewport for the full scroll height */
.gnag-cinema-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image layer — all images stacked, JS controls visibility */
.gnag-cinema-images {
  position: absolute;
  inset: 0;
}

/* Each image slide */
.gnag-cinema-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* JS sets transform: scale(x) directly — no CSS transition needed
     for the scale so it tracks scroll position exactly.
     Opacity transition only — for crossfade between images. */
  transition: opacity 0.55s ease;
}
.gnag-cinema-img.active {
  opacity: 1;
}

/* The actual image inside the slide */
.gnag-cinema-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* transform is applied by JS — will-change avoids repaint   */
  will-change: transform;
  transform-origin: center center;
  /* No CSS transition — JS drives scale directly for accuracy */
  transition: none;
  display: block;
}

/* Dark overlay (alpha set inline by PHP) */
.gnag-cinema-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Header: title + description — centred, fades out at start */
.gnag-cinema-header {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  pointer-events: none;
  /* JS controls opacity */
  transition: opacity 0.4s ease;
}
.gnag-cinema-header .eyebrow {
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  display: block;
}
.gnag-cinema-header h2 {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  color: #fff;
  margin: 0 0 .875rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.gnag-cinema-header p {
  font-size: clamp(.875rem, 2vw, 1.05rem);
  color: rgba(242,237,232,.82);
  max-width: 560px;
  line-height: 1.75;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* Progress dots — bottom centre */
.gnag-cinema-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: .5rem;
  align-items: center;
}
.gnag-cinema-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.5);
  transition: background .3s ease, transform .3s ease;
  cursor: default;
}
.gnag-cinema-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.35);
}

/* Progress bar — very bottom */
.gnag-cinema-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.12);
  z-index: 3;
}
.gnag-cinema-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.1s linear;
}

/* Scroll hint arrow — bounces to signal "scroll down" */
.gnag-cinema-scroll-hint {
  position: absolute;
  bottom: 2.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  animation: cinemaHintBounce 2s ease-in-out infinite;
  pointer-events: none;
}
.gnag-cinema-scroll-hint svg {
  width: 18px; height: 18px;
  opacity: .55;
}
@keyframes cinemaHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .7; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: .3; }
}

/* Reduced motion — static grid fallback */
@media (prefers-reduced-motion: reduce) {
  .gnag-cinema-img img { transition: none; will-change: auto; }
  .gnag-cinema-header  { transition: none; }
  .gnag-cinema-dot     { transition: none; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .gnag-cinema-header h2 { font-size: clamp(1.4rem, 7vw, 2rem); }
  .gnag-cinema-header p  { font-size: .84rem; }
  .gnag-cinema-dots      { bottom: 1.5rem; }
}

/* ── Cinema Content-Section Slides ──────────────────────────
   .gnag-cinema-section-slide wraps:
     .gnag-cinema-section-bg   — optional full-bleed BG image
     .gnag-cinema-section-content — centred/left/right text block
─────────────────────────────────────────────────────────── */

/* The slot itself scales via JS (transform-origin: center) */
.gnag-cinema-section-slide {
  transform-origin: center center;
  will-change: transform, opacity;
  transition: opacity 0.55s ease;   /* crossfade between slides */
}

/* BG image fills the slot exactly like a photo slide */
.gnag-cinema-section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* No transform here — the slot itself scales */
  transition: none;
  will-change: auto;
}

/* Content panel: centred vertically, readable width */
.gnag-cinema-section-content {
  position: relative;
  z-index: 2;                    /* above the BG image */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  pointer-events: auto;          /* allow clicking the CTA button */
  text-shadow: 0 2px 20px rgba(0,0,0,.55);
}

/* Left-aligned variant */
.gnag-cinema-section-slide[style*="text-align:left"] .gnag-cinema-section-content,
.gnag-cinema-section-content[style*="text-align:left"] {
  align-items: flex-start;
  margin: 0 auto 0 8vw;
}

/* Right-aligned variant */
.gnag-cinema-section-slide[style*="text-align:right"] .gnag-cinema-section-content,
.gnag-cinema-section-content[style*="text-align:right"] {
  align-items: flex-end;
  margin: 0 8vw 0 auto;
}

/* Eyebrow */
.gnag-cinema-section-eyebrow {
  display: block;
  color: var(--accent);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .625rem;
  font-weight: 600;
}

/* Heading */
.gnag-cinema-section-heading {
  color: #fff;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}

/* Body */
.gnag-cinema-section-body {
  color: rgba(242,237,232,.84);
  font-size: clamp(.9rem, 2vw, 1.1rem);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 0 1.75rem;
}

/* CTA button */
.gnag-cinema-section-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* inherits .btn .btn-outline .btn-glass from your theme */
}

/* Mobile adjustments for section slides */
@media (max-width: 600px) {
  .gnag-cinema-section-heading { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  .gnag-cinema-section-body    { font-size: .875rem; }
  .gnag-cinema-section-content { padding: 2rem 1.25rem; }
}



/* ============================================================
   BLOG & FEED PAGE  (page-blog.php)  — v2 redesign
   ============================================================ */

/* ── Full-page ambient gradient overlay (orbs only, no gridlines) ──
   Fixed behind all page content so the glow persists while scrolling.  */
.bfr-page-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Ensure header, hero, and main content always sit above the ambient layer */
.site-header,
.bfr-hero,
#bfr-main,
.bfr-section,
footer {
  position: relative;
  z-index: 1;
}

.bfr-ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  animation: bfrAmbientPulse 18s ease-in-out infinite alternate;
}

/* Top-left warm gold orb — mirrors hero orb-1 */
.bfr-ambient-orb-1 {
  width: 700px; height: 700px;
  background: var(--accent);
  opacity: .07;
  top: -200px; left: -150px;
  animation-delay: 0s;
  animation-duration: 20s;
}

/* Bottom-right primary/rose orb — mirrors hero orb-2 */
.bfr-ambient-orb-2 {
  width: 560px; height: 560px;
  background: var(--primary);
  opacity: .08;
  bottom: 5%; right: -120px;
  animation-delay: -6s;
  animation-duration: 17s;
}

/* Mid-page subtle gold accent */
.bfr-ambient-orb-3 {
  width: 420px; height: 420px;
  background: var(--accent);
  opacity: .05;
  top: 42%; left: 55%;
  animation-delay: -11s;
  animation-duration: 22s;
}

/* Lower-left faint fill */
.bfr-ambient-orb-4 {
  width: 500px; height: 500px;
  background: var(--primary);
  opacity: .05;
  bottom: 10%; left: -80px;
  animation-delay: -4s;
  animation-duration: 25s;
}

@keyframes bfrAmbientPulse {
  0%   { transform: scale(1)    translateY(0px); }
  50%  { transform: scale(1.08) translateY(-28px); }
  100% { transform: scale(0.94) translateY(18px); }
}

.bfr-hero-custom-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 12s ease;
}
.bfr-hero-has-img .bfr-hero-custom-img { animation: bfrHeroZoom 18s ease-in-out infinite alternate; }
@keyframes bfrHeroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}
.bfr-hero-custom-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* When a custom image is set, tone down the orbs so they don't fight it */
.bfr-hero-has-img .bfr-orb { opacity: .06; }
.bfr-hero-has-img .bfr-hero-gridlines { opacity: .18; }

/* ── Hero ─────────────────────────────────────────────────── */
.bfr-hero {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 8rem 0 2rem;
  /* Pull up behind sticky navbar (same as page-hero) */
  margin-top: -5.25rem;
  padding-top: calc(5.25rem + 8rem);
}
.bfr-hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: -160px;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
}
.bfr-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .13;
  animation: bfrPulse 14s ease-in-out infinite alternate;
}
.bfr-orb-1 { width:500px; height:500px; background:var(--accent);    top:-140px; left:-100px; animation-delay:0s; }
.bfr-orb-2 { width:380px; height:380px; background:var(--primary);   bottom:-100px; right:-60px; animation-delay:-5s; }
.bfr-orb-3 { width:260px; height:260px; background:var(--accent);    top:38%; left:52%; animation-delay:-10s; opacity:.07; }
@keyframes bfrPulse {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.15) translateY(-20px); }
}
.bfr-hero-gridlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .4;
  /* Fade out well before the hard clip edge — top fades in, bottom fades out by 75% */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 55%, transparent 78%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 55%, transparent 78%);
}
.bfr-hero-inner {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.bfr-hero-inner .eyebrow {  }
.bfr-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em;
  padding-bottom: .12em;
  background: linear-gradient(135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 55%, var(--hero-grad-1) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  overflow: visible;
  /* entrance handled by GSAP in main.js */
}
.bfr-hero-sub {
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  color: var(--muted); line-height: 1.7;
  max-width: 600px;
  /* entrance handled by GSAP in main.js */
}
.bfr-hero-pills {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  /* entrance handled by GSAP in main.js */
}
.bfr-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1.1rem;
  border-radius: 2rem;
  border: 1px solid var(--accent-border);
  background: var(--accent-light);
  color: var(--accent);
  font-size: .82rem; font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}
.bfr-pill:hover { background: var(--accent); color: #0d0608; transform: translateY(-2px); }


/* ── Shared section header ────────────────────────────────── */
.bfr-section { padding: 5.5rem 0; }
.bfr-social-bg { background: transparent; }

.bfr-sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}
.bfr-sh-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800; line-height: 1.1;
  margin-top: .35rem;
}
.bfr-sh-sub {
  color: var(--muted); font-size: .9rem;
  max-width: 460px; margin-top: .4rem;
}

/* ── Shared meta / tags ───────────────────────────────────── */
.bfr-meta {
  display: flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--muted);
}
.bfr-dot { color: var(--border-h); }
.bfr-tag {
  display: inline-flex; align-items: center;
  padding: .2rem .7rem; border-radius: 2rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Featured article ─────────────────────────────────────── */
.bfr-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color .25s, box-shadow .25s, transform .3s var(--smooth);
  margin-bottom: 4rem;
}
.bfr-feature:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.bfr-feature-img {
  position: relative;
  aspect-ratio: 4/3;
  display: block; overflow: hidden;
  background: var(--bg-alt);
  flex-shrink: 0;
  /* Grid's default align-items:stretch would otherwise force this column
     to match the row's height (set by whichever side's text is taller),
     silently overriding aspect-ratio above. align-self:start keeps the
     image's size purely a function of its own (equal) column width, so
     Latest Articles and Latest Updates render the same image size
     regardless of how long the excerpt/caption text next to it is. */
  align-self: start;
}
.bfr-feature-img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .5s var(--smooth);
}
.bfr-feature:hover .bfr-feature-img img { transform: scale(1.05); }
.bfr-img-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  color: var(--muted);
}
.bfr-feature-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,.12) 0%, transparent 60%);
  pointer-events: none;
}
.bfr-feature-badge {
  position: absolute; top: 1rem; left: 1rem;
  padding: .25rem .75rem; border-radius: 2rem;
  background: var(--accent); color: #0d0608;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.bfr-feature-body {
  padding: 2.5rem 2.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  justify-content: center;
}
.bfr-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800; line-height: 1.2;
  color: var(--fg);
}
.bfr-feature-title a { color: inherit; text-decoration: none; transition: color .2s; }
.bfr-feature-title a:hover { color: var(--accent); }
.bfr-feature-excerpt {
  color: var(--muted); font-size: .92rem; line-height: 1.75; flex: 1;
}
.bfr-feature-foot {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.bfr-author {
  display: flex; align-items: center; gap: .65rem;
}
.bfr-author-av {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent-border);
  flex-shrink: 0;
}
.bfr-author-label { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.bfr-author-name  { display: block; font-size: .85rem; font-weight: 600; color: var(--fg); }

/* ── Article grid ─────────────────────────────────────────── */
/* Base .bfr-grid + every layout variant (grid-1…6, list, magazine,
   masonry, list-compact, timeline, carousel) live in ONE place only —
   see "SECTION: BLOG / SOCIAL FEED GRID LAYOUTS" further down this file.
   A second, older copy of these same selectors used to live here too;
   both were the same specificity, so whichever kept winning depended on
   raw source order, and layouts like "list" or "grid-2" would silently
   pick up leftover width/gap declarations the other copy didn't override.
   That duplicate block has been removed — this comment marks where it
   was so it isn't accidentally re-introduced. */
.bfr-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  /* hover handled by GSAP */
}
.bfr-card:hover {
  border-color: rgba(200,169,110,.45);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.bfr-card-img {
  position: relative; display: block;
  aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg-alt);
}
.bfr-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; /* hover scale handled by GSAP */
}
/* .bfr-card:hover .bfr-card-img img — handled by GSAP */
.bfr-img-ph-sm {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.bfr-card-cat {
  position: absolute; top: .75rem; left: .75rem;
  padding: .2rem .65rem; border-radius: 2rem;
  background: rgba(13,6,8,.75);
  border: 1px solid var(--accent-border);
  color: var(--accent); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  backdrop-filter: blur(4px);
}
.bfr-card-body {
  padding: 1.25rem; flex: 1;
  display: flex; flex-direction: column; gap: .55rem;
}
.bfr-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; line-height: 1.35;
  color: var(--fg);
}
.bfr-card-title a { color: inherit; text-decoration: none; transition: color .2s; }
.bfr-card-title a:hover { color: var(--accent); }
.bfr-card-excerpt {
  font-size: .83rem; color: var(--muted); line-height: 1.65; flex: 1;
}
.bfr-readmore {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .5rem; padding-top: .75rem;
  border-top: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--accent);
  text-decoration: none; transition: gap .2s;
}
.bfr-readmore:hover { gap: .55rem; }

/* ── Regular card footer (author + button), mirrors .bfr-feature-foot ── */
.bfr-card-foot {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: .75rem;
  margin-top: .25rem; padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.bfr-author-sm { gap: .5rem; }
.bfr-author-sm .bfr-author-av { width: 28px; height: 28px; border-width: 1.5px; }
.bfr-author-sm .bfr-author-label { font-size: .6rem; }
.bfr-author-sm .bfr-author-name  { font-size: .78rem; }
.bfr-card-foot .btn-sm { padding: .4rem .9rem; font-size: .78rem; }

/* Arrow slides right on hover — used on the featured/card buttons and
   "Read more" links above (All Articles, Read Article/more, View Post). */
.btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow,
.bfr-readmore:hover .btn-arrow { transform: translateX(3px); }

/* ── Divider ──────────────────────────────────────────────── */
.bfr-divider-wrap { display: none; }
.bfr-divider {
  display: flex; align-items: center;
  padding: 3rem 0;
}
.bfr-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-border), transparent);
}


/* ── Social grid ──────────────────────────────────────────── */
.bfr-filters {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.bfr-filter {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem 1rem; border-radius: 2rem;
  border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  font-size: .8rem; cursor: pointer;
  transition: all .2s;
}
.bfr-filter.active, .bfr-filter:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-light);
}
.bfr-fcount {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  padding: 0 4px;
  background: rgba(255,255,255,.07);
  font-size: .67rem; font-weight: 700; color: var(--muted);
}
.bfr-filter.active .bfr-fcount, .bfr-filter:hover .bfr-fcount {
  background: var(--accent-light); color: var(--accent);
}

/* Base .bfr-social-grid + every layout variant live in ONE place only —
   see "SECTION: BLOG / SOCIAL FEED GRID LAYOUTS" further down this file
   (same reasoning as the Article grid note above: a duplicate copy here
   used to fight the consolidated rules on source order alone). */
.bfr-card.bfr-sc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .3s var(--smooth), box-shadow .25s;
}
.bfr-card.bfr-sc:hover {
  border-color: var(--accent-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.bfr-sc-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.bfr-sc-platicon { display: flex; flex-shrink: 0; color: var(--accent); }
.bfr-sc-platname { flex: 1; }
.bfr-sc-ext {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--muted);
  text-decoration: none; transition: all .2s; flex-shrink: 0;
}
.bfr-sc-ext:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }

.bfr-sc-imgwrap {
  display: block; position: relative;
  aspect-ratio: 16/9; overflow: hidden;
}
.bfr-sc-imgwrap img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .4s ease;
}
.bfr-sc:hover .bfr-sc-imgwrap img { transform: scale(1.05); }
.bfr-sc-imgover {
  position: absolute; inset: 0;
  background: rgba(13,6,8,.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transition: opacity .25s;
}
.bfr-sc:hover .bfr-sc-imgover { opacity: 1; }

.bfr-sc-embed { padding: .5rem; overflow: hidden; }
.bfr-sc-embed iframe, .bfr-sc-embed blockquote { width:100%!important; max-width:100%!important; }

.bfr-sc-linkcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 2.5rem 1.5rem; text-align: center;
  text-decoration: none; color: var(--muted); min-height: 160px;
}
.bfr-sc-linkicon  { font-size: 2rem; color: var(--accent); display: block; }
.bfr-sc-linkdomain { font-size: .78rem; }
.bfr-sc-linkcta {
  font-size: .8rem; font-weight: 600; color: var(--accent);
  padding: .3rem .9rem; border-radius: 2rem;
  border: 1px solid var(--accent-border);
  background: var(--accent-light);
  transition: all .2s;
}
.bfr-sc:hover .bfr-sc-linkcta { background: var(--accent); color: #0d0608; }
.bfr-sc-caption {
  padding: .7rem 1rem .9rem;
  font-size: .82rem; color: var(--muted); line-height: 1.55;
  margin: 0; border-top: 1px solid var(--border); flex: 1;
}

/* Regular + featured social cards reuse .bfr-card / .bfr-feature classes
   directly (see page-blog.php) so they're pixel-identical to Latest
   Articles. .bfr-sc-head and .bfr-sc-caption are kept as EXTRA classes on
   those same elements only so the existing "Show Platform Icon" / "Show
   Caption" admin toggles (which target these class names with
   display:none!important) keep working — that !important rule still
   applies regardless of the resets below. Everything else about their
   old bar/caption decoration is reset here to the exact .bfr-meta /
   .bfr-card-title / .bfr-feature-title values, since those rules are
   defined earlier in this file and would otherwise lose the cascade to
   .bfr-sc-head/.bfr-sc-caption's own (later, conflicting) styling. */
.bfr-card.bfr-sc .bfr-sc-head {
  padding: 0; border-bottom: none;
  font-size: .78rem; font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--muted);
}
.bfr-card.bfr-sc .bfr-sc-caption {
  padding: 0; border-top: none; margin: 0; flex: 0;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--fg);
}

/* Featured/latest social post reuses .bfr-feature (see page-blog.php) —
   no separate CSS needed here, which is what guarantees it stays pixel-
   identical to the Latest Articles featured card instead of drifting out
   of sync the way a parallel copy of the same rules could. */
.bfr-feature-img .bfr-sc-embed { width: 100%; height: 100%; padding: 0; }

/* ── Empty states ─────────────────────────────────────────── */
.bfr-empty {
  text-align: center; padding: 6rem 1rem;
}
.bfr-empty-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--bg-alt); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem; color: var(--muted);
}
.bfr-empty h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: .6rem; }
.bfr-empty p  { color: var(--muted); font-size: .9rem; max-width: 380px; margin: 0 auto 1.75rem; }

.bfr-se-icons {
  display: flex; gap: 1rem; justify-content: center;
  margin-bottom: 1.5rem;
}
.bfr-se-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  color: var(--accent);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .bfr-feature         { grid-template-columns: 1fr; }
  .bfr-feature-img     { aspect-ratio: 16/9; }
  .bfr-feature-body    { padding: 1.75rem; }
  .bfr-grid            { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .bfr-social-grid     { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .bfr-hero-title      { font-size: clamp(2rem, 6.5vw, 3rem); }
  .bfr-sh              { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .bfr-hero            { min-height: 0; margin-top: -4.25rem; padding-top: calc(4.25rem + 7rem); padding-bottom: 4rem; }
  .bfr-grid            { grid-template-columns: 1fr; }
  .bfr-social-grid     { grid-template-columns: 1fr; }
  .bfr-feature-foot    { flex-direction: column; align-items: flex-start; }
  .bfr-hero-pills      { flex-direction: column; align-items: center; }
  .bfr-section         { padding: 4rem 0; }
}

/* ============================================================
   GLOBAL FILTER BAR  (.gnag-fb-*)
   All values use theme CSS variables — no hardcoded colours.
   ============================================================ */

/* ── Control row ── */
.gnag-fb-ctrl-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.gnag-fb-count {
  font-size: .8rem;
  color: var(--muted);
  font-family: var(--font-body);
}

/* ── Filter toggle — extends .gnag-filter-btn (already round pill, glass) ── */
.gnag-fb-toggle {
  /* inherits .gnag-filter-btn: round pill, glass, muted → accent on hover/active */
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
}
.gnag-fb-toggle svg { flex-shrink: 0; }

/* ── Badge inside filter toggle button ── */
.gnag-fb-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99rem;
  background: var(--accent);
  color: #0a0305;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-body);
}

/* ── Expandable filter panel ── */
/* matches .gnag-sort-panel glass style */
.gnag-fb-panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 500;   /* below fixed nav (10000); above normal page content — matches .gnag-sort-panel */
  width: min(92vw, 620px);
  background: rgba(10, 3, 5, 0.78);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.2rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,0.07);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1.1rem;
  animation: gnagDropIn .18s cubic-bezier(.4,0,.2,1) both;
}
.gnag-fb-panel[hidden] { display: none !important; }

/* ── Group inside panel ── */
.gnag-fb-group-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-family: var(--font-body);
  margin: 0 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gnag-fb-group-opts { display: flex; flex-direction: column; gap: .1rem; }
.gnag-fb-opt-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .45rem;
  border-radius: .75rem; /* matches .gnag-avatar-item */
  cursor: pointer;
  font-size: .8rem;
  font-family: var(--font-body);
  color: var(--muted);
  transition: background .15s, color .15s;
  user-select: none;
}
.gnag-fb-opt-label:hover {
  background: rgba(201,168,76,.10);
  color: var(--fg);
}
.gnag-fb-opt-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}
.gnag-fb-opt-label.is-checked {
  color: var(--accent);
}

/* ── Active chips bar ── */
.gnag-fb-chips-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
  padding: .5rem .75rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 2rem; /* fully round pill bar */
  font-family: var(--font-body);
  min-height: 2.5rem;  /* keep bar height stable */
}
.gnag-fb-chips-bar[hidden] { display: none !important; }

.gnag-fb-chips-label {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.gnag-fb-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  flex: 1;
}

/* ── Individual chip (round pill, accent tint) ── */
.gnag-fb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 99rem;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.28);
  color: var(--accent);
  font-size: .76rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
  line-height: 1;
}
.gnag-fb-chip:hover {
  background: rgba(201,168,76,.22);
  border-color: rgba(201,168,76,.5);
}
.gnag-fb-chip svg { pointer-events: none; }
.gnag-fb-clear-icon { width: 8px; height: 8px; flex-shrink: 0; pointer-events: none; }

/* ── Clear-all pill (round, danger tint) ── */
.gnag-fb-clear-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 99rem;
  background: rgba(224,82,82,.08);
  border: 1px solid rgba(224,82,82,.22);
  color: #e08080;
  font-size: .76rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}
.gnag-fb-clear-all:hover {
  background: rgba(224,82,82,.18);
  border-color: rgba(224,82,82,.5);
  color: #ff7070;
}

/* ── No-results message ── */
.gnag-fb-noresult {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .9rem;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .gnag-fb-panel { grid-template-columns: 1fr 1fr; padding: 1rem; }
  .gnag-fb-ctrl-row { gap: .4rem; }
  .gnag-fb-chips-bar { border-radius: 1rem; }
  .gnag-fb-sort-wrap { margin-left: auto; }
}
@media (max-width: 400px) {
  .gnag-fb-panel { grid-template-columns: 1fr; }
}


.gnag-avatar-dropdown,
.gnag-avatar-dropdown *,
.gnag-avatar-item {
  pointer-events:auto !important;
}

.gnag-avatar-item{
  position:relative;
  z-index:10101;
}


/* FINAL DROPDOWN FIX */
.gnag-avatar-wrap{position:relative!important;overflow:visible!important;}
.gnag-avatar-btn{position:relative!important;z-index:10101!important;pointer-events:auto!important;}
.gnag-avatar-dropdown{position:fixed!important;margin:0!important;display:none;opacity:1!important;visibility:visible!important;max-width:calc(100vw - 24px)!important;}
.gnag-avatar-dropdown.open{display:block!important;}
#gnag-header,.header-wrap,.header-actions{overflow:visible!important;}

/* ==== Dynamic universal dropdown fixes ==== */
.gnag-nav-dropdown,
.gnag-avatar-dropdown,
.gnag-filter-panel-left,
.gnag-sort-panel,
.gnag-sort-dropdown,
.gnag-filter-dropdown {
  box-sizing:border-box;
  max-width:min(92vw,320px);
}

.gnag-nav-dropdown a,
.gnag-avatar-dropdown a,
.gnag-filter-panel-left a,
.gnag-sort-panel a,
.gnag-sort-dropdown a,
.gnag-filter-dropdown a {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  width:100%;
  gap:.7rem;
}

.gnag-nav-dropdown,
.gnag-filter-panel-left,
.gnag-sort-panel,
.gnag-sort-dropdown,
.gnag-filter-dropdown {
  position:absolute;
  top:calc(100% + .7rem);
}

@media (max-width: 900px){
  .gnag-nav-dropdown,
  .gnag-avatar-dropdown,
  .gnag-filter-panel-left,
  .gnag-sort-panel,
  .gnag-sort-dropdown,
  .gnag-filter-dropdown {
    max-width:calc(100vw - 20px);
  }
}

/* ============================================================
   CAROUSEL CONTROLS — wrapper, arrows, dots
   ============================================================ */
.gnag-carousel-wrap {
  position: relative;
}
.gnag-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,.35);
  background: rgba(13,6,8,.75);
  backdrop-filter: blur(8px);
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, opacity .2s;
  flex-shrink: 0;
}
.gnag-carousel-btn:hover {
  background: rgba(201,168,76,.15);
  border-color: var(--accent);
}
.gnag-carousel-prev { left: -20px; }
.gnag-carousel-next { right: -20px; }
@media (max-width: 640px) {
  .gnag-carousel-prev { left: 4px; }
  .gnag-carousel-next { right: 4px; }
}
.gnag-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 14px;
}
.gnag-carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(201,168,76,.25);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s, width .25s;
  flex-shrink: 0;
}
.gnag-carousel-dot.active {
  background: var(--accent);
  width: 22px;
  border-radius: 4px;
  transform: none;
}

/* ── Products Showcase Carousel ──────────────────────────────── */
.gnag-pr-carousel {
  position: relative;
}
/* fade-shadow mask removed — cards use their own shadows instead */
.gnag-pr-track-outer {
  overflow: hidden;
  position: relative;
}
.gnag-pr-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  will-change: transform;
  cursor: grab;
  user-select: none;
}
.gnag-pr-track:active { cursor: grabbing; }
.gnag-pr-card {
  flex-shrink: 0;
  /* width set by JS */
  text-decoration: none;
  color: inherit;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow:
    0 2px 8px rgba(0,0,0,.45),
    0 6px 24px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.gnag-pr-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 8px 20px rgba(0,0,0,.55),
    0 20px 48px rgba(0,0,0,.35),
    0 0 0 1px rgba(200,169,110,.35),
    inset 0 1px 0 rgba(255,255,255,.07);
  border-color: rgba(200,169,110,.5);
}
.gnag-pr-card-img {
  width: 100%;
  aspect-ratio: var(--pr-card-ratio, 1 / 1);
  overflow: hidden;
  background: var(--bg-alt);
}
.gnag-pr-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gnag-pr-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; opacity: .3;
}
.gnag-pr-card-body { padding: .65rem .85rem .85rem; }
/* Card size modifiers — set via JS from admin option */
.gnag-pr-carousel--size-xxs { --pr-card-min-w: 75px; }
.gnag-pr-carousel--size-xs  { --pr-card-min-w: 95px; }
.gnag-pr-carousel--size-sm  { --pr-card-min-w: 120px; }
.gnag-pr-carousel--size-md  { --pr-card-min-w: 155px; }
.gnag-pr-carousel--size-lg  { --pr-card-min-w: 190px; }
/* Aspect ratio modifiers */
.gnag-pr-carousel--ratio-1-1  { --pr-card-ratio: 1 / 1; }
.gnag-pr-carousel--ratio-4-3  { --pr-card-ratio: 4 / 3; }
.gnag-pr-carousel--ratio-3-4  { --pr-card-ratio: 3 / 4; }
.gnag-pr-carousel--ratio-16-9 { --pr-card-ratio: 16 / 9; }
.gnag-pr-card-type {
  font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent);
  display: block; margin-bottom: .2rem;
}
.gnag-pr-card-title { font-size: .9rem; margin: 0 0 .2rem; line-height: 1.35; font-weight: 600; }
.gnag-pr-card-price { font-size: .82rem; color: var(--accent); font-weight: 600; }
/* Arrows — positioned at the shadow band edges */
.gnag-pr-carousel {
  position: relative;
}
.gnag-pr-carousel-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.gnag-pr-carousel-inner .gnag-pr-track-outer {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Extra top padding so hovering cards don't get clipped.
     Negative margin pulls the space back so layout is unchanged. */
  padding-top: 8px;
  margin-top: -8px;
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.gnag-pr-prev,
.gnag-pr-next {
  flex-shrink: 0;
  position: static;
  transform: none;
  z-index: 2;
}
.gnag-pr-dots { display: none; }

/* ============================================================
   LAYOUT FIXES — Masonry / Compact List / Carousel
   Applied to all four listing pages:
   Products & Services, IT Services, Colors, Blog & Posts
   ============================================================ */

/* ── Carousel: prevent vertical overflow bleed ── */
.products-grid.gnag-layout--carousel,
.bfr-grid--carousel,
.bfr-social-grid--carousel { overflow-y: visible; }

/* ── Masonry: ensure parent doesn't collapse and gap shows ── */
.products-grid.gnag-layout--masonry,
.bfr-grid--masonry,
.bfr-social-grid--masonry { overflow: visible; }

/* ── Compact List: lock horizontal flex even against .product-card base ── */
.products-grid.gnag-layout--list-compact .product-card,
.bfr-grid--list-compact .bfr-card { flex-direction: row !important; }

/* Compact list: image-link wrapper matches thumbnail */
.products-grid.gnag-layout--list-compact .product-card .product-card-image-link {
  flex-shrink: 0; width: 52px; height: 52px;
  display: block; border-radius: 6px; overflow: hidden;
}

/* Compact list: disable hover lift (breaks row alignment) */
.products-grid.gnag-layout--list-compact .product-card:hover,
.bfr-grid--list-compact .bfr-card:hover { transform: none !important; box-shadow: none !important; }

/* Compact list: footer sits inline next to price, smaller CTA */
.products-grid.gnag-layout--list-compact .product-card .product-card-footer {
  flex-wrap: wrap; gap: .3rem;
}
.products-grid.gnag-layout--list-compact .product-card .product-card-footer .btn {
  padding: .18rem .6rem; font-size: .7rem;
}

/* ── Carousel: each card is a column flex so footer stays at bottom ── */
.products-grid.gnag-layout--carousel .product-card,
.bfr-grid--carousel .bfr-card,
.bfr-social-grid--carousel .bfr-sc { display: flex; flex-direction: column; }

/* ── Masonry: vertical-align reset prevents column gap collapse ── */
.products-grid.gnag-layout--masonry .product-card,
.bfr-grid--masonry .bfr-card,
.bfr-social-grid--masonry .bfr-sc { vertical-align: top; }

/* ── Reveal animation reset for carousel / masonry / compact-list ──
   These layouts cannot safely animate translateY: carousel clips with overflow,
   masonry cards overlap columns, compact-list rows shift out of place. ── */
.products-grid.gnag-layout--carousel .product-card.reveal,
.products-grid.gnag-layout--masonry .product-card.reveal,
.products-grid.gnag-layout--list-compact .product-card.reveal,
.bfr-grid--carousel .bfr-card.reveal,
.bfr-grid--masonry .bfr-card.reveal,
.bfr-grid--list-compact .bfr-card.reveal { opacity: 0; transform: translateY(20px) scale(0.97); }

/* ── Masonry: image inside masonry card must be block so height is natural ── */
.products-grid.gnag-layout--masonry .product-card .product-card-image-link,
.products-grid.gnag-layout--masonry .product-card .product-card-image { display: block; width: 100%; aspect-ratio: unset !important; height: auto !important; }
.products-grid.gnag-layout--masonry .product-card .product-card-image img { width: 100%; height: auto !important; object-fit: cover; }

/* ── Blog masonry: same image fix ── */
.bfr-grid--masonry .bfr-card .bfr-card-img { display: block; width: 100%; height: auto !important; aspect-ratio: unset !important; object-fit: cover; }
.bfr-grid--masonry .bfr-card .bfr-card-img img { display: block; width: 100%; height: auto !important; object-fit: cover; }

/* ── Responsive: carousel & masonry never stack to 1-col on mobile ── */
@media (max-width: 600px) {
  .products-grid.gnag-layout--masonry  { columns: 2 160px !important; }
  .products-grid.gnag-layout--carousel { grid-template-columns: unset !important; }
  .bfr-grid--masonry                   { columns: 2 160px !important; }
  .bfr-grid--carousel                  { grid-template-columns: unset !important; }
  .bfr-social-grid--masonry            { columns: 2 140px !important; }
  .bfr-social-grid--carousel           { grid-template-columns: unset !important; }

  /* Compact list on mobile: tiny thumbnail still shows */
  .products-grid.gnag-layout--list-compact .product-card { padding: 8px 10px; gap: 10px; }
  .products-grid.gnag-layout--list-compact .product-card .product-card-image-link,
  .products-grid.gnag-layout--list-compact .product-card .product-card-image { width: 42px; height: 42px; }
  .bfr-grid--list-compact .bfr-card { padding: 8px 0; gap: 10px; }
  .bfr-grid--list-compact .bfr-card .bfr-card-img { width: 42px; height: 42px; min-width: 42px; }
}

/* ═══════════════════════════════════════════════════════════════
   WORLDWIDE SHIPPING STRIP
   ─ shown after hero on Products, IT Services, Colors pages
════════════════════════════════════════════════════════════════ */
.gnag-worldwide-strip {
  background: linear-gradient(180deg, rgba(200,169,110,.045) 0%, transparent 100%);
  border-bottom: 1px solid rgba(200,169,110,.14);
  padding: 2rem 0 2.25rem;
  overflow: hidden;
}
.gnag-worldwide-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.gnag-worldwide-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}
.gnag-worldwide-globe {
  font-size: 1.35rem;
  animation: gnag-pulse-globe 3s ease-in-out infinite;
}
@keyframes gnag-pulse-globe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
.gnag-worldwide-title {
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}
.gnag-worldwide-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.gnag-worldwide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  padding: 1.1rem .75rem;
  border: 1px solid rgba(200,169,110,.14);
  border-radius: 10px;
  background: rgba(200,169,110,.03);
  /* slide-up entrance */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s ease, background .2s, border-color .2s;
}
.gnag-worldwide-item.ws-visible {
  opacity: 1;
  transform: translateY(0);
}
.gnag-worldwide-item:hover {
  background: rgba(200,169,110,.07);
  border-color: rgba(200,169,110,.3);
}
.gnag-worldwide-icon  { font-size: 1.4rem; line-height: 1; }
.gnag-worldwide-item-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: .02em;
}
.gnag-worldwide-item-desc {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Badge slide-in */
.gnag-worldwide-badge {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .5s ease, transform .5s ease;
}
.gnag-worldwide-badge.ws-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .gnag-worldwide-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .gnag-worldwide-items { grid-template-columns: repeat(2, 1fr); }
  .gnag-worldwide-item:last-child { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════
   WORLDWIDE SHIPPING — SLIDING TICKER BANNER
   ─ shown after hero on Products, IT Services, Colors pages
════════════════════════════════════════════════════════════════ */

.gnag-ticker-wrap {
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, #0d0608 0%, #160b0e 100%);
  border-top: 1px solid rgba(200,169,110,.18);
  border-bottom: 1px solid rgba(200,169,110,.18);
  overflow: hidden;
  height: 44px;
}

/* Left pinned label */
.gnag-ticker-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 1.1rem;
  background: var(--accent, #c8a96e);
  color: #0d0608;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
/* Angled right edge */
.gnag-ticker-label::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 44px 0 0 13px;
  border-color: transparent transparent transparent var(--accent, #c8a96e);
}

.gnag-ticker-globe {
  font-size: 1rem;
  animation: gnag-ticker-spin 8s linear infinite;
}
@keyframes gnag-ticker-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Scrolling track area */
.gnag-ticker-outer {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}

.gnag-ticker-track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  padding-left: 2rem;
}
/* Pause on hover — handled per-bar via PHP-generated styles */

@keyframes gnag-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gnag-ticker-item {
  font-size: .78rem;
  color: rgba(200,169,110,.9);
  font-weight: 500;
  letter-spacing: .02em;
  padding-right: .25rem;
}

.gnag-ticker-sep {
  color: rgba(200,169,110,.35);
  font-size: .6rem;
  padding: 0 1.1rem;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .gnag-ticker-wrap { max-width: 100%; }
  .gnag-ticker-label {
    flex-shrink: 1;
    min-width: 8.5rem;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .6rem;
  }
  .gnag-ticker-item  { font-size: .73rem; }
}

/* ── Promo code items inside gnag-offers-section ── */
.gnag-offer-item--promo { align-items: flex-start; }
.gnag-offer-badge-inline {
  display: inline-block;
  background: var(--accent, #c8a96e);
  color: #0d0608;
  font-size: .65rem;
  font-weight: 800;
  padding: .1rem .45rem;
  border-radius: 20px;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-left: .35rem;
}
.gnag-offer-code-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .45rem;
}
.gnag-offer-code-pill {
  background: rgba(200,169,110,.12);
  border: 1.5px solid rgba(200,169,110,.3);
  color: var(--accent, #c8a96e);
  padding: .25rem .65rem;
  border-radius: 5px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .07em;
}
.gnag-offer-copy-btn {
  background: var(--accent, #c8a96e);
  color: #0d0608;
  border: none;
  border-radius: 5px;
  padding: .28rem .65rem;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  transition: opacity .2s;
  white-space: nowrap;
}
.gnag-offer-copy-btn:hover { opacity: .8; }

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE & CURRENCY PICKER — glass style matching account dropdown
   ════════════════════════════════════════════════════════════════ */

/* ── Container ── */
.gnag-i18n-pickers {
  display: flex;
  align-items: center;
  gap: .3rem;
}
/* ── Footer placement: inline below social icons, no separation ── */
.gnag-i18n-pickers--footer {
  justify-content: flex-start;
  padding: .6rem 0 0;
  border-top: none;
  margin-top: 0;
  flex-wrap: wrap;
  gap: .4rem;
}

/* ── Trigger button — matches .gnag-avatar-btn glass feel ── */
.gnag-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: .35rem .65rem;
  cursor: pointer;
  color: var(--muted);
  font-size: .78rem;
  font-family: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  line-height: 1;
  vertical-align: middle;
}
.gnag-picker-btn:hover {
  border-color: rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.08);
  color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 3px rgba(201,168,76,0.08);
}
.gnag-picker-btn[aria-expanded="true"] {
  border-color: rgba(201, 168, 76, 0.5);
  color: var(--fg);
}
#gnag-curr-symbol {
  font-size: .85em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--accent);
}
.gnag-picker-btn[aria-expanded="true"] .gnag-picker-caret {
  transform: rotate(180deg);
}

/* ── Dropdown panel — matches .gnag-avatar-dropdown ── */
.gnag-lc-dropdown {
  position: fixed;            /* portaled to body by JS */
  top: 0;
  left: 0;
  background: rgba(10, 3, 5, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: .3rem;
  display: none;
  pointer-events: none;
  z-index: 10200;             /* above header z-index:10000 and avatar 10100 */
  transform-origin: top right;
}
.gnag-lc-dropdown.open {
  display: block;
  pointer-events: all;
  animation: gnagDropIn .18s cubic-bezier(.4,0,.2,1) both;
}
.gnag-lc-dropdown.open-up {
  display: block;
  pointer-events: all;
  animation: gnagDropUp .18s cubic-bezier(.4,0,.2,1) both;
  transform-origin: bottom right;
}
@keyframes gnagDropUp {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Scrollbar (thin, themed) ── */
.gnag-lc-dropdown::-webkit-scrollbar { width: 4px; }
.gnag-lc-dropdown::-webkit-scrollbar-track { background: transparent; }
.gnag-lc-dropdown::-webkit-scrollbar-thumb { background: rgba(200,169,110,.3); border-radius: 4px; }

/* ── Dropdown heading ── */
.gnag-lc-dropdown-header {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .35rem .75rem .2rem;
  opacity: .65;
}

/* ── Dropdown items — match .gnag-avatar-item ── */
.gnag-lc-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: .45rem .75rem;
  background: none;
  border: none;
  border-radius: .75rem;
  cursor: pointer;
  font-size: .8rem;
  font-family: inherit;
  color: var(--muted);
  text-align: left;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.gnag-lc-item:hover {
  color: var(--accent, #c8a96e);
  background: rgba(201, 168, 76, 0.08);
}
.gnag-lc-item--active {
  color: var(--accent, #c8a96e);
  background: rgba(201, 168, 76, 0.06);
}
.gnag-lc-item--active::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #c8a96e);
  margin-left: auto;
  flex-shrink: 0;
}
.gnag-lc-item-primary {
  font-weight: 600;
  color: var(--fg);
}
.gnag-lc-item:hover .gnag-lc-item-primary,
.gnag-lc-item--active .gnag-lc-item-primary {
  color: var(--accent, #c8a96e);
}
.gnag-lc-item-secondary {
  font-size: .72rem;
  color: var(--muted);
  margin-left: auto;
  padding-left: .4rem;
}
.gnag-lc-item-symbol {
  font-weight: 700;
  min-width: 1.3rem;
  color: var(--fg);
  flex-shrink: 0;
}

/* ── Footer variant — lighter button ── */
/* ── Footer placement: inline below social icons, no separation ── */
.gnag-i18n-pickers--footer {
  justify-content: flex-start;
  padding: .55rem 0 0;
  border-top: none;
  margin-top: 0;
  flex-wrap: wrap;
  gap: .4rem;
}
.gnag-i18n-pickers--footer .gnag-picker-btn {
  font-size: .78rem;
  padding: .32rem .65rem;
  border-color: rgba(255,255,255,.08);
  gap: .32rem;
}
/* Center all children inside picker button */
.gnag-picker-btn > * {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.gnag-picker-btn svg {
  display: block;
  flex-shrink: 0;
  position: relative;
  top: 0;
}

/* ── Mobile: show in mobile nav footer (header picker only) ── */
@media (max-width: 768px) {
  .gnag-i18n-pickers:not(.gnag-i18n-pickers--footer) {
    display: none;
  }
  .gnag-i18n-pickers--footer {
    display: flex;
  }
}

/* restore caret style after insertion above */
.gnag-picker-caret { opacity: .6; transition: transform .2s; }
.gnag-picker-btn[aria-expanded="true"] .gnag-picker-caret { transform: rotate(180deg); }

/* ============================================================
   WORDPRESS ADMIN BAR COMPENSATION
   When logged in as admin, WP adds a 32px (desktop) or 46px
   (mobile) admin bar. The fixed nav must be offset to sit
   below it, and all page-top offsets adjusted accordingly.
   ============================================================ */

/* Desktop admin bar: 32px */
.admin-bar #gnag-header.nav-fixed {
  top: 32px;
}

/* Hero pull-up must account for admin bar height too */
.admin-bar .gnag-hero {
  margin-top: calc(-5.25rem - 32px);
  padding-top: calc(5.25rem + 32px);
}

/* Page hero sections (inner pages) */
.admin-bar .page-hero {
  margin-top: calc(-4.75rem - 32px);
  padding-top: calc(4.75rem + 32px);
}

/* Mobile admin bar: 46px */
@media (max-width: 782px) {
  .admin-bar #gnag-header.nav-fixed {
    top: 46px;
  }
  .admin-bar .gnag-hero {
    margin-top: calc(-3.5rem - 46px);
    padding-top: calc(3.5rem + 46px);
  }
  .admin-bar .page-hero {
    margin-top: calc(-3.5rem - 46px);
    padding-top: calc(3.5rem + 46px);
  }
}

/* ── GnagFB reveal safety: ensure cards in listing grids are always visible ── */
.gnag-listing .product-card { opacity: 1; transform: none; }
.gnag-listing .product-card.reveal { opacity: 0; transform: translateY(28px) scale(0.97); }
.gnag-listing .product-card.reveal.visible { opacity: 1; transform: none; }



/* ══════════════════════════════════════════════════════════════════════
   SECTION: COMPONENTS
   Guest popup, mobile CTA buttons, blog prose styles
   (previously inline in header.php, footer.php, single.php)
   ══════════════════════════════════════════════════════════════════════ */
/* ── Guest popup (header.php) ── */
.gnag-gpop-overlay{position:fixed;inset:0;background:rgba(10,3,5,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:99999;display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:gpop-bg .3s ease;transition:opacity .2s;}
.gnag-gpop-overlay.gnag-gpop-dismissing{opacity:0;}
@keyframes gpop-bg{from{opacity:0;}to{opacity:1;}}
.gnag-gpop{position:relative;background:var(--card);border:1px solid var(--accent-border);border-radius:var(--radius);padding:2.5rem 2rem 2rem;max-width:400px;width:100%;text-align:center;overflow:hidden;animation:gpop-in .32s cubic-bezier(.4,0,.2,1);box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);}
@keyframes gpop-in{from{opacity:0;transform:translateY(20px) scale(.95);}to{opacity:1;transform:none;}}
.gnag-gpop-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(201,168,76,.2),transparent 70%);pointer-events:none;}
.gnag-gpop-x{position:absolute;top:.875rem;right:.875rem;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:all .15s;z-index:1;}
.gnag-gpop-x:hover{color:var(--fg);background:rgba(255,255,255,.07);}
.gnag-gpop-icon{width:58px;height:58px;border-radius:50%;background:var(--accent-light);border:1.5px solid var(--accent-border);display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;}
.gnag-gpop-eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .35rem;font-weight:700;}
.gnag-gpop-title{font-size:1.2rem;font-weight:800;margin:0 0 .6rem;font-family:var(--font-display);line-height:1.3;}
.gnag-gpop-sub{font-size:.84rem;color:var(--muted);margin:0 0 1.6rem;line-height:1.6;}
.gnag-gpop-btns{display:flex;gap:.625rem;justify-content:center;flex-wrap:wrap;margin-bottom:.875rem;}
.gnag-gpop-btns .btn{min-width:130px;}
.gnag-gpop-skip{font-size:.78rem;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .15s;}
.gnag-gpop-skip:hover{color:var(--fg);}

/* ── Host-injected security banner — hidden ───────────────────────────
   #force-footer is injected server-side by the "milesweb-tools" plugin
   (wp-content/plugins/milesweb-tools) OUTSIDE of WordPress theming —
   never present in any theme file. The plugin is kept active (site
   owner's choice), so its banner is hidden purely on the front end
   instead of being removed at the source. */
#force-footer{ display:none !important; }

/* Fallback for the same banner if the plugin ever renders it under a
   different id/class. Applied at runtime by the MutationObserver guard
   in assets/js/main.js, which matches on the banner's own text
   ("...powered by MilesWeb") rather than a specific selector, so it
   keeps working even if the plugin's markup changes. */
.gnag-hidden-host-banner{ display:none !important; }

/* ── Mobile CTA buttons (footer.php) ── */
#gnag-mobile-cta {
  position: fixed;
  bottom: 1.25rem;
  left: 1rem;
  z-index: 9999;
  display: none; /* shown via media query below */
  flex-direction: column;
  gap: .55rem;
  pointer-events: none;
}
.gnag-mob-btn {
  pointer-events: all;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.45);
  transition: transform .2s, box-shadow .2s, opacity .2s;
  opacity: .88;
}
.gnag-mob-btn:hover  { transform: scale(1.1); opacity: 1; box-shadow: 0 5px 18px rgba(0,0,0,.55); }
.gnag-mob-btn:active { transform: scale(.95); opacity: .75; }
.gnag-mob-wa   { background: rgba(28,14,16,.92); border: 1px solid rgba(200,169,110,.35); color: #c8a96e; }
.gnag-mob-call { background: rgba(28,14,16,.92); border: 1px solid rgba(200,169,110,.35); color: #c8a96e; }
@media (max-width: 768px) { #gnag-mobile-cta { display: flex; } }

/* ── Blog single post prose (single.php) ── */
.gnag-prose h1,.gnag-prose h2,.gnag-prose h3,.gnag-prose h4{color:var(--fg);margin:2rem 0 .75rem;line-height:1.3;}
.gnag-prose h2{font-size:1.55rem;}.gnag-prose h3{font-size:1.25rem;}
.gnag-prose p{margin:0 0 1.4rem;}
.gnag-prose ul,.gnag-prose ol{padding-left:1.75rem;margin:0 0 1.4rem;}
.gnag-prose li{margin-bottom:.4rem;}
.gnag-prose blockquote{border-left:3px solid var(--accent);margin:1.5rem 0;padding:.75rem 1.25rem;color:var(--muted);font-style:italic;background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;}
.gnag-prose a{color:var(--accent);text-decoration:underline;}.gnag-prose a:hover{opacity:.8;}
.gnag-prose img{max-width:100%;border-radius:var(--r-sm);margin:1rem 0;}
.gnag-prose figure{margin:1.5rem 0;}.gnag-prose figcaption{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.35rem;}
.gnag-prose code{background:var(--card);padding:.1rem .4rem;border-radius:3px;font-size:.9em;color:var(--accent);}
.gnag-prose pre{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:1rem;overflow-x:auto;margin:1.5rem 0;}
.gnag-prose hr{border:none;border-top:1px solid var(--border);margin:2.5rem 0;}



/* ══════════════════════════════════════════════════════════════════════
   SECTION: PAGES
   Page-specific styles (checkout, legal, account, marquee, gallery)
   (previously inline in 10 page templates)
   ══════════════════════════════════════════════════════════════════════ */
/* ── Marquee animation (page-about.php, page-contact.php) ── */
@keyframes gnag-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gnag-marquee-track { animation: gnag-marquee 28s linear infinite; display: flex; gap: 1.5rem; }
.gnag-marquee-track:hover { animation-play-state: paused; }

/* ── Checkout / Cart (page-cart.php) ── */
.gnag-checkout-layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start;padding:2rem 0 4rem;}
.gnag-checkout-left{display:flex;flex-direction:column;gap:1rem;}
.gnag-summary-sticky{position:sticky;top:5.5rem;}
.gnag-steps-bar{display:flex;align-items:center;}
.gnag-step{display:flex;align-items:center;gap:.35rem;}
.gnag-step-circle{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--muted);transition:all .3s;}
.gnag-step.active   .gnag-step-circle{border-color:var(--accent);background:var(--accent);color:#0d0608;}
.gnag-step.complete .gnag-step-circle{border-color:var(--accent);color:var(--accent);}
.gnag-step-label{font-size:.72rem;color:var(--muted);}
.gnag-step.active   .gnag-step-label{color:var(--accent);font-weight:600;}
.gnag-step.complete .gnag-step-label{color:var(--accent);}
.gnag-step-line{width:28px;height:1px;background:var(--border);margin:0 .3rem;}
@media(max-width:600px){.gnag-step-label{display:none;}.gnag-step-line{width:16px;}}
.gnag-checkout-panel{animation:gnag-panel-in .28s ease;}
@keyframes gnag-panel-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.gnag-form-section-label{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:.65rem;}
.gnag-proceed-btn{width:100%;padding:.875rem 1.5rem;background:var(--accent);color:#0d0608;border:none;border-radius:var(--r-sm,8px);font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s;display:flex;align-items:center;justify-content:center;gap:.5rem;}
.gnag-proceed-btn:hover{opacity:.88;transform:translateY(-1px);}

/* Payment method tabs */
.gnag-pay-tab{display:flex;align-items:center;gap:.7rem;flex:1;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:10px;background:none;cursor:pointer;transition:border-color .2s,background .2s;text-align:left;}
.gnag-pay-tab--active{border-color:var(--accent);background:rgba(200,169,110,.06);}
.gnag-pay-tab-icon{font-size:1.3rem;}
.gnag-pay-tab-name{display:block;font-size:.88rem;font-weight:700;color:var(--fg);}
.gnag-pay-tab-sub{display:block;font-size:.71rem;color:var(--muted);}

.gnag-pay-btn{width:100%;padding:1rem 1.5rem;background:var(--accent);color:#0d0608;border:none;border-radius:8px;font-size:.95rem;font-weight:800;cursor:pointer;transition:opacity .2s,transform .15s;display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.65rem;}
.gnag-pay-btn:hover{opacity:.88;transform:translateY(-1px);}
.gnag-pay-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

.gnag-shipping-option{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s;}
.gnag-shipping-option:has(input:checked){border-color:var(--accent);background:rgba(200,169,110,.06);}
.gnag-shipping-option input[type="radio"]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;}
.gnag-shipping-info{flex:1;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.gnag-shipping-label{font-size:.88rem;font-weight:700;display:block;}
.gnag-shipping-days{font-size:.74rem;color:var(--muted);}
.gnag-shipping-price{font-size:.9rem;font-weight:700;color:var(--accent);display:block;}
.gnag-shipping-note{font-size:.72rem;color:var(--muted);}

.gnag-review-block{border:1px solid var(--border);border-radius:8px;padding:.85rem 1rem;margin-bottom:.85rem;background:var(--bg-alt);}
.gnag-trust-strip{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.73rem;color:var(--muted);}
.gnag-secure-footer{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.72rem;color:var(--muted);padding:.5rem;text-align:center;}
.gnag-rate-spinner{width:2.5rem;height:2.5rem;border:3px solid rgba(200,169,110,.2);border-top-color:var(--accent,#c8a96e);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media(max-width:900px){.gnag-checkout-layout{grid-template-columns:1fr;}.gnag-summary-sticky{position:static;}.gnag-checkout-right{order:-1;}}

/* ── Legal content (page-policy.php) ── */
.gnag-policy-content h2 { font-size:1.3rem; font-weight:700; color:var(--fg); margin:2.5rem 0 .75rem; }
.gnag-policy-content h3 { font-size:1.1rem; font-weight:600; color:var(--fg); margin:2rem 0 .6rem; }
.gnag-policy-content p  { margin-bottom:1.1rem; color:var(--muted); }
.gnag-policy-content ul,
.gnag-policy-content ol { padding-left:1.5rem; margin-bottom:1.1rem; color:var(--muted); }
.gnag-policy-content li { margin-bottom:.4rem; }
.gnag-policy-content a  { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.gnag-policy-content strong { color:var(--fg); }
.gnag-policy-content blockquote {
  border-left:3px solid var(--accent);
  margin:1.5rem 0;
  padding:.75rem 1.25rem;
  background:var(--card);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--muted);
  font-style:italic;
}

/* ── Legal body (page-privacy-policy.php, page-terms.php) ── */
.gnag-legal-body { color: var(--muted); line-height: 1.85; font-size: .93rem; }
.gnag-legal-body h2 { font-family: var(--font-display); font-size: 1.2rem; color: var(--accent); margin: 2rem 0 .65rem; font-weight: 700; }
.gnag-legal-body p  { margin: 0 0 1rem; }
.gnag-legal-body ul { padding-left: 1.5rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.gnag-legal-body li { list-style: disc; }
.gnag-legal-body strong { color: var(--fg); }

/* ── Gallery detail grid responsive (single-gnag_gallery.php) ── */
@media(max-width:860px){
  .gnag-gallery-detail-grid{grid-template-columns:1fr !important;gap:2rem !important;}
}

/* ── Account page: chat chips + typing dots (page-account.php block 1) ── */
/* Chat chips */
.gnag-chip{font-size:.71rem;font-weight:600;padding:.28rem .65rem;border-radius:2rem;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.gnag-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
/* Typing dots */
.gnag-typing-dots{display:inline-flex;gap:3px;align-items:center;}
.gnag-typing-dots span{width:5px;height:5px;background:var(--muted);border-radius:50%;animation:gnag-dot .9s infinite;}
.gnag-typing-dots span:nth-child(2){animation-delay:.15s;}
.gnag-typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes gnag-dot{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-4px);}}
/* Call request banner */
.gnag-call-banner{background:linear-gradient(135deg,rgba(76,175,80,.12),rgba(76,175,80,.04));border:1px solid rgba(76,175,80,.3);border-radius:1rem;padding:.75rem 1rem;font-size:.8rem;margin-top:.25rem;}
.gnag-call-banner strong{display:block;color:#4caf50;margin-bottom:.2rem;font-size:.82rem;}
.gnag-call-banner span{color:var(--muted);line-height:1.55;}

/* ── Account page: main design system (page-account.php block 2) ── */
/* ═══ ACCOUNT PAGE — full design system ═════════════════════ */
:root { --radius:var(--r); }
.gac-main{padding:4rem 0 6rem;min-height:70vh;}
.gac-wrap{max-width:1140px;}
.gac-page-hdr{margin-bottom:2.5rem;}
.gac-title{font-size:clamp(1.5rem,4vw,2.1rem);margin:.25rem 0 0;font-family:var(--font-display);}
.gac-alert{display:flex;align-items:center;gap:.55rem;padding:.875rem 1.1rem;border-radius:1rem;margin-bottom:1.5rem;font-size:.875rem;font-weight:500;}
.gac-alert-ok{background:rgba(76,175,80,.08);border:1px solid rgba(76,175,80,.28);color:#7dbf7a;}
.gac-alert-err{background:rgba(224,82,82,.08);border:1px solid var(--destructive);color:var(--destructive);}
.gac-layout{display:grid;grid-template-columns:248px 1fr;gap:2rem;align-items:start;}
.gac-content{min-width:0;}

/* Sidebar */
.gac-sidebar{position:sticky;top:6rem;}
.gac-profile-card{background:linear-gradient(135deg,rgba(201,168,76,.11),rgba(201,168,76,.03));border:1px solid var(--accent-border);border-radius:1.5rem;padding:1.6rem 1.25rem 1.25rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;margin-bottom:.875rem;position:relative;overflow:hidden;}
.gac-profile-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(201,168,76,.09),transparent 65%);pointer-events:none;}
.gac-avatar{width:72px;height:72px;border-radius:50%;background:var(--accent-light);border:2px solid var(--accent-border);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;}
.gac-initials{font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1;font-family:var(--font-display);}
.gac-avatar-ring{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--accent-border);animation:gac-ring 3s ease-in-out infinite;}
@keyframes gac-ring{0%,100%{opacity:.25;transform:scale(1);}50%{opacity:.75;transform:scale(1.04);}}
.gac-uname{font-weight:700;font-size:.92rem;margin:0;}
.gac-umail{font-size:.72rem;color:var(--muted);margin:0;word-break:break-all;}
.gac-ring-wrap{position:absolute;top:.85rem;right:.85rem;display:flex;align-items:center;justify-content:center;}
.gac-ring-pct{position:absolute;font-size:.55rem;font-weight:800;color:var(--accent);}
.gac-nav{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;overflow:visible;padding:.4rem;}
.gac-nav{padding:.4rem;}
.gac-nav-item{display:flex;align-items:center;gap:.65rem;padding:.65rem .875rem;font-size:.83rem;color:var(--muted);text-decoration:none;border-radius:.875rem;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s;cursor:pointer;position:relative;}
.gac-nav-item:hover{color:var(--fg);background:rgba(255,255,255,.04);border-color:var(--border);}
.gac-nav-item.is-active{color:var(--accent);background:var(--accent-light);border-color:var(--accent-border);font-weight:600;}
.gac-nav-ico{flex-shrink:0;opacity:.6;display:flex;transition:opacity .15s;}
.gac-nav-item.is-active .gac-nav-ico,.gac-nav-item:hover .gac-nav-ico{opacity:1;}
.gac-nav-badge{margin-left:auto;background:rgba(201,168,76,.25);color:var(--accent);border:1px solid var(--accent-border);border-radius:2rem;font-size:.62rem;font-weight:700;padding:.07rem .42rem;line-height:1.5;}
.gac-nav-group{border-top:1px solid var(--border);padding-top:.3rem;margin-top:.3rem;}
.gac-nav-sub{font-size:.77rem;padding:.52rem .875rem;color:var(--muted);}
.gac-nav-sep{border-top:1px solid var(--border);margin:.3rem 0;}
.gac-nav-logout{color:#e05252!important;}
.gac-nav-logout:hover{background:rgba(224,82,82,.07)!important;border-color:rgba(224,82,82,.2)!important;}

/* Tabs */
.gac-tab.gac-hidden{display:none!important;}

/* Cards */
.gac-card{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;padding:1.75rem;margin-bottom:1.25rem;}
.gac-card:last-child{margin-bottom:0;}

/* Welcome */
.gac-welcome{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.gac-welcome-name{font-size:1.1rem;font-weight:700;margin:0 0 .2rem;font-family:var(--font-display);}
.gac-welcome-sub{color:var(--muted);font-size:.84rem;margin:0;}
.gac-welcome-btns{display:flex;gap:.6rem;flex-wrap:wrap;}

/* Stats */
.gac-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.875rem;margin-bottom:1.25rem;}
.gac-stat{background:var(--card);border:1px solid var(--border);border-radius:1.1rem;padding:1.25rem 1rem;text-align:center;text-decoration:none;transition:border-color .18s,transform .18s,background .18s;display:flex;flex-direction:column;align-items:center;gap:.35rem;}
.gac-stat:hover{border-color:var(--accent-border);background:rgba(201,168,76,.03);transform:translateY(-2px);}
.gac-stat-ico{color:var(--accent);opacity:.8;}
.gac-stat-val{font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1;font-family:var(--font-display);}
.gac-stat-lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}

/* Nudge */
.gac-nudge{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;padding:1rem 1.5rem;background:linear-gradient(135deg,rgba(201,168,76,.07),transparent);}
.gac-nudge>div{flex:1;min-width:160px;}
.gac-nudge strong{display:block;font-size:.87rem;margin-bottom:.15rem;}
.gac-nudge span{font-size:.79rem;color:var(--muted);}

.gac-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.gac-card-title{font-size:.93rem;font-weight:700;margin:0;}
.gac-link{font-size:.79rem;color:var(--accent);text-decoration:none;}
.gac-recent-row{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.04);}
.gac-recent-row:last-child{border-bottom:none;}
.gac-microlabel{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.1rem;}

.gac-tab-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;}
.gac-tab-title{font-size:1.1rem;font-weight:700;margin:0;font-family:var(--font-display);}

/* Orders */
.gac-orders{display:flex;flex-direction:column;gap:1.25rem;}
.gac-order-card{padding:0;overflow:hidden;}
.gac-order-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);}
.gac-order-meta{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem;}
.gac-order-items{padding:.875rem 1.5rem;display:flex;flex-direction:column;}
.gac-item-row{display:flex;justify-content:space-between;font-size:.81rem;color:var(--muted);padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.04);}
.gac-item-row:last-child{border-bottom:none;}
.gac-tracking{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.75rem 1.5rem;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2);border-radius:1rem;padding:.875rem 1rem;}
.gac-prep{display:flex;align-items:flex-start;gap:.75rem;margin:.75rem 1.5rem;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:1rem;padding:.875rem 1rem;}
.gac-prep-ttl{font-size:.81rem;font-weight:700;margin:0 0 .2rem;}
.gac-prep-sub{font-size:.77rem;color:var(--muted);margin:0;line-height:1.5;}
.gac-invoice{display:flex;align-items:center;gap:.75rem;margin:.5rem 1.5rem 1.25rem;padding:.6rem 1rem;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:.875rem;font-size:.79rem;color:var(--muted);}
.gac-dl{margin-left:auto;font-size:.77rem;font-weight:700;padding:.3rem .8rem;border-radius:.75rem;background:rgba(201,168,76,.1);color:var(--accent);border:1px solid var(--accent-border);text-decoration:none;transition:background .15s;}
.gac-dl:hover{background:rgba(201,168,76,.2);}
.gac-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .8rem;border-radius:2rem;font-size:.73rem;font-weight:700;border:1px solid;white-space:nowrap;}
.gac-src{display:inline-block;font-size:.63rem;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:2rem;padding:.07rem .42rem;margin-left:.4rem;color:var(--muted);}

/* Empty */
.gac-empty{text-align:center;padding:3rem 2rem;}
.section-pt-15{padding-top:1.5rem;}
.section-py-2{padding-top:2rem;padding-bottom:2rem;}
.form-feedback{font-size:.78rem;margin-top:.5rem;color:var(--muted);}
.flex-col-gap35{display:flex;flex-direction:column;gap:.35rem;}
.gac-empty-ico{font-size:2.8rem;opacity:.3;display:block;margin-bottom:1rem;}
.gac-empty h3{margin:0 0 .5rem;font-size:1.05rem;}
.gac-empty p{color:var(--muted);font-size:.875rem;margin:0 0 1.5rem;}

/* Addresses */
.gac-addr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;}
.gac-addr-card{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;padding:1.5rem;position:relative;transition:border-color .18s;}
.gac-addr-card.gac-addr-default{border-color:var(--accent-border);background:linear-gradient(135deg,rgba(201,168,76,.04),transparent);}
.gac-default-tag{position:absolute;top:.9rem;right:.9rem;font-size:.67rem;font-weight:700;color:var(--accent);background:var(--accent-light);border:1px solid var(--accent-border);border-radius:2rem;padding:.12rem .5rem;}
.gac-addr-label{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem;}
.gac-addr-name{font-weight:600;font-size:.9rem;margin-bottom:.35rem;}
.gac-addr-body{font-size:.81rem;color:var(--muted);line-height:1.65;margin-bottom:.45rem;}
.gac-addr-phone{font-size:.79rem;color:var(--muted);margin-bottom:.875rem;}
.gac-addr-actions{display:flex;gap:.45rem;flex-wrap:wrap;}
.gac-abtn{font-size:.74rem;font-weight:600;padding:.28rem .72rem;border-radius:.875rem;border:1px solid var(--border);color:var(--muted);background:transparent;cursor:pointer;transition:all .15s;}
.gac-abtn:hover{border-color:var(--accent);color:var(--accent);}
.gac-abtn-del:hover{border-color:#e05252!important;color:#e05252!important;}
.order-action-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin:.875rem 1.5rem 0;}
.order-header-bar{margin:.75rem 1.5rem;}
.order-section-heading{font-size:.92rem;font-weight:700;color:var(--fg);margin-bottom:.3rem;}
.order-section-text{font-size:.82rem;color:var(--muted);line-height:1.6;}
.order-address-section{margin:.75rem 1.5rem;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:1rem;padding:.875rem 1rem;}
.order-section-body{font-size:.82rem;color:var(--fg);line-height:1.6;}
.order-detail-body{margin:.75rem 1.5rem;border-top:1px solid var(--border);padding-top:.875rem;}

/* Recently Viewed */
.gac-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.gac-rv-card{background:var(--card);border:1px solid var(--border);border-radius:1.1rem;overflow:hidden;text-decoration:none;transition:transform .18s,border-color .18s;}
.gac-rv-card:hover{transform:translateY(-2px);border-color:var(--accent-border);}
.gac-rv-img{width:100%;height:120px;background-size:cover;background-position:center;}
.gac-rv-info{padding:.75rem;}
.gac-rv-title{display:block;font-size:.82rem;font-weight:600;color:var(--fg);margin-bottom:.25rem;}
.gac-rv-price{font-size:.8rem;font-weight:700;}

/* Reviews */
.gac-star-row{display:flex;gap:.25rem;margin-bottom:.5rem;}
.gac-star{font-size:1.5rem;color:var(--border);background:none;border:none;cursor:pointer;transition:color .1s;padding:0;}
.gac-star.active,.gac-star:hover{color:var(--accent);}
.gac-review-item{padding:.875rem 0;border-bottom:1px solid var(--border);}
.gac-review-item:last-child{border-bottom:none;}
.gac-review-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;flex-wrap:wrap;}
.gac-stars-display{font-size:1rem;letter-spacing:.15rem;}
.gac-review-body{font-size:.84rem;color:var(--muted);line-height:1.6;margin:0;}

/* Saved cards */
.gac-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.25rem;}
.gac-saved-card{background:linear-gradient(135deg,#2a1a1e,#1e1214);border:1px solid var(--accent-border);border-radius:1.25rem;padding:1.5rem;position:relative;overflow:hidden;}
.gac-card-chip{width:34px;height:26px;background:linear-gradient(135deg,#c9a84c,#8a6a2a);border-radius:.4rem;margin-bottom:1rem;}
.gac-card-number{font-family:monospace;font-size:1rem;letter-spacing:.18rem;color:var(--fg);margin-bottom:.875rem;}
.gac-card-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);}
.gac-security-note{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted);padding:.625rem .875rem;background:rgba(201,168,76,.05);border:1px solid var(--accent-border);border-radius:.875rem;margin-top:.75rem;}

/* Field cards */
.gac-field{padding:1.5rem 1.75rem;}
.gac-field-title{display:flex;align-items:center;gap:.6rem;font-size:.93rem;font-weight:700;margin:0 0 .875rem;flex-wrap:wrap;}
.gac-field-cur{font-size:.82rem;color:var(--muted);font-family:monospace;margin:0 0 .875rem;}
.gac-hint{font-size:.79rem;color:var(--muted);margin:0 0 .875rem;line-height:1.55;}
.gac-inline{display:flex;gap:.5rem;max-width:380px;flex-wrap:wrap;}
.gac-inline .form-input{flex:1;min-width:180px;}
.gac-otp-wrap{max-width:390px;}
.gac-otp-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.gac-otp-row .form-input{flex:1;min-width:160px;}
.gac-otp-send-btn{flex-shrink:0;padding:.54rem 1rem;background:transparent;border:1.5px solid var(--accent);color:var(--accent);border-radius:.875rem;cursor:pointer;font-size:.81rem;font-weight:700;white-space:nowrap;transition:all .2s;}
.gac-otp-send-btn:hover{background:rgba(201,168,76,.1);}
.gac-otp-code{letter-spacing:.35rem;text-align:center;font-size:1rem;}
.gac-otp-result{font-size:.79rem;margin-top:.4rem;}

/* Password strength */
.gac-pw-eye{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:.95rem;opacity:.5;transition:opacity .15s;}
.gac-pw-eye:hover{opacity:1;}
.gac-pass-strength{height:4px;background:var(--border);border-radius:2rem;margin-top:.4rem;overflow:hidden;}
.gac-pass-bar{height:100%;width:0;border-radius:2rem;transition:width .3s,background .3s;}

/* Badges */
.gac-badge{font-size:.67rem;font-weight:700;border-radius:2rem;padding:.14rem .52rem;border:1px solid;}
.gac-ok{background:rgba(76,175,80,.09);color:#4caf50;border-color:rgba(76,175,80,.27);}
.gac-warn{background:rgba(255,165,0,.07);color:#f90;border-color:rgba(255,165,0,.26);}
.gac-muted{background:rgba(128,128,128,.07);color:var(--muted);border-color:var(--border);}

/* Completion bar */
.gac-comp-bar{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;background:linear-gradient(135deg,rgba(201,168,76,.08),transparent);}
.gac-comp-bar strong{display:block;font-size:.89rem;margin-bottom:.2rem;}
.gac-comp-bar p{font-size:.79rem;color:var(--muted);margin:0;}

/* 2FA */
.gac-toggle-lbl{display:flex;align-items:center;gap:.75rem;cursor:pointer;margin-bottom:1.25rem;}
.gac-method-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem;}
.gac-mpill{display:flex;align-items:center;gap:.4rem;padding:.48rem .875rem;border-radius:.875rem;border:1.5px solid var(--border);cursor:pointer;font-size:.82rem;transition:all .15s;user-select:none;}
.gac-mpill-active{border-color:var(--accent);background:var(--accent-light);color:var(--accent);}
.gac-mpill:hover{border-color:var(--border-h);}
.gac-toggle{width:44px;height:25px;background:var(--border);border-radius:13px;position:relative;transition:background .2s;flex-shrink:0;}
.gac-toggle-on{background:var(--accent);}
.gac-toggle-thumb{position:absolute;top:3px;left:3px;width:19px;height:19px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.gac-toggle-on .gac-toggle-thumb{left:22px;}

/* Devices */
.gac-device-list{display:flex;flex-direction:column;gap:.75rem;}
.gac-device-row{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border-radius:1rem;border:1px solid var(--border);flex-wrap:wrap;}
.gac-device-row.gac-device-current{border-color:var(--accent-border);background:linear-gradient(135deg,rgba(201,168,76,.04),transparent);}
.gac-device-ico{color:var(--muted);flex-shrink:0;}
.gac-device-info{flex:1;min-width:160px;}
.gac-device-info strong{display:block;font-size:.87rem;margin-bottom:.15rem;}

/* Privacy policy — dynamic WP content */
.gac-privacy-body{padding:2rem 2rem;}
.gac-privacy-body h1,.gac-privacy-body h2{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin:1.75rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border);color:var(--fg);}
.gac-privacy-body h1:first-child,.gac-privacy-body h2:first-child{margin-top:0;}
.gac-privacy-body h3{font-size:.95rem;font-weight:700;margin:1.25rem 0 .4rem;color:var(--fg);}
.gac-privacy-body h4{font-size:.88rem;font-weight:600;margin:1rem 0 .35rem;color:var(--muted);}
.gac-privacy-body p{font-size:.875rem;color:var(--muted);line-height:1.75;margin:0 0 .875rem;}
.gac-privacy-body p:last-child{margin-bottom:0;}
.gac-privacy-body ul,.gac-privacy-body ol{margin:.5rem 0 .875rem 1.25rem;font-size:.875rem;color:var(--muted);line-height:1.7;}
.gac-privacy-body li{margin-bottom:.3rem;}
.gac-privacy-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.gac-privacy-body a:hover{color:var(--accent-h);}
.gac-privacy-body strong,.gac-privacy-body b{color:var(--fg);font-weight:600;}
.gac-privacy-body em{color:var(--muted);}
.gac-privacy-body blockquote{border-left:3px solid var(--accent-border);padding:.5rem 1rem;margin:.875rem 0;background:rgba(255,255,255,.025);border-radius:0 .875rem .875rem 0;}
.gac-privacy-body blockquote p{margin:0;font-style:italic;}
.gac-privacy-body hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0;}
.gac-privacy-body table{width:100%;border-collapse:collapse;font-size:.84rem;margin:.875rem 0;}
.gac-privacy-body table th{text-align:left;padding:.5rem .75rem;background:rgba(255,255,255,.04);color:var(--fg);font-weight:600;border:1px solid var(--border);}
.gac-privacy-body table td{padding:.5rem .75rem;color:var(--muted);border:1px solid var(--border);}
.gac-privacy-body code{font-family:monospace;font-size:.82rem;background:rgba(255,255,255,.07);padding:.1rem .4rem;border-radius:.35rem;color:var(--accent);}
/* fallback old CSS */
.gac-policy-section{padding:1.5rem 1.75rem;}
.gac-policy-hdr{display:flex;align-items:center;gap:.875rem;margin-bottom:1rem;}
.gac-policy-hdr h3{font-size:1rem;font-weight:700;margin:0;font-family:var(--font-display);}
.gac-policy-num{font-size:.75rem;font-weight:800;color:var(--accent);background:var(--accent-light);border:1px solid var(--accent-border);border-radius:.5rem;padding:.2rem .5rem;letter-spacing:.06em;flex-shrink:0;}
.gac-policy-list{display:flex;flex-direction:column;gap:.5rem;}
.gac-policy-item{display:grid;grid-template-columns:160px 1fr;gap:.5rem 1rem;padding:.625rem .875rem;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:.875rem;font-size:.82rem;}
.gac-policy-item strong{color:var(--fg);font-size:.82rem;line-height:1.5;}
.gac-policy-item span{color:var(--muted);line-height:1.6;}
.gac-policy-rights{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0;}
.gac-right-pill{font-size:.79rem;font-weight:600;padding:.3rem .85rem;border-radius:2rem;background:rgba(201,168,76,.08);border:1px solid var(--accent-border);color:var(--accent);}
/* old privacy grid */
.gac-privacy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-bottom:1rem;}
.gac-priv-item{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:1rem;padding:1rem;}
.gac-priv-ico{font-size:1.4rem;margin-bottom:.5rem;}
.gac-priv-item strong{display:block;font-size:.87rem;margin-bottom:.35rem;}
.gac-priv-item p{font-size:.78rem;color:var(--muted);margin:0;line-height:1.5;}

/* Info links */
.gac-info-links{display:flex;flex-direction:column;gap:.5rem;}
.gac-info-link{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border-radius:1rem;border:1px solid var(--border);text-decoration:none;color:var(--fg);transition:border-color .15s,background .15s;}
.gac-info-link:hover{border-color:var(--accent-border);background:rgba(201,168,76,.03);}
.gac-info-link-ico{width:36px;height:36px;border-radius:.875rem;background:var(--accent-light);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;}
.gac-info-link>div{flex:1;}
.gac-info-link strong{display:block;font-size:.87rem;margin-bottom:.15rem;}
.gac-info-link span{font-size:.77rem;color:var(--muted);}

/* Help center */
.gac-help-search-wrap{display:flex;align-items:center;gap:.625rem;padding:.5rem .875rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:2rem;transition:border-color .15s;}
.gac-help-search-wrap:focus-within{border-color:var(--accent);}
.gac-help-search{flex:1;background:transparent;border:none;outline:none;color:var(--fg);font-size:.875rem;}
.gac-help-search::placeholder{color:var(--muted);}
.gac-help-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.875rem;margin-bottom:1.25rem;}
.gac-help-action{background:var(--card);border:1px solid var(--border);border-radius:1.1rem;padding:1.25rem 1rem;text-align:center;text-decoration:none;color:var(--fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.35rem;transition:border-color .18s,transform .18s;}
.gac-help-action:hover{border-color:var(--accent-border);transform:translateY(-2px);}
.gac-ha-ico{font-size:1.5rem;margin-bottom:.1rem;}
.gac-help-action strong{display:block;font-size:.83rem;}
.gac-help-action span{font-size:.73rem;color:var(--muted);}
.gac-help-cats{display:flex;flex-direction:column;gap:.75rem;}
.gac-help-cat{margin-bottom:0;padding:0;overflow:hidden;}
.gac-help-cat-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;cursor:pointer;transition:background .15s;}
.gac-help-cat-head:hover{background:rgba(255,255,255,.025);}
.gac-help-cat-head strong{flex:1;font-size:.9rem;}
.gac-cat-arrow{transition:transform .2s;flex-shrink:0;color:var(--muted);}
.gac-cat-arrow.open{transform:rotate(180deg);}
.gac-help-cat-body{padding:0 1.5rem 1rem;}
.gac-faq-item{border-top:1px solid rgba(255,255,255,.04);}
.gac-faq-q{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;cursor:pointer;font-size:.84rem;gap:.5rem;}
.gac-faq-q:hover{color:var(--accent);}
.gac-faq-a{padding:.5rem 0 .75rem;}
.gac-faq-a p{font-size:.81rem;color:var(--muted);margin:0;line-height:1.6;}

/* Helpers */
.gac-mono{font-family:monospace;}
.gac-gold{color:var(--accent);}
.gac-dim{font-size:.8rem;color:var(--muted);}
.gac-check{display:flex;align-items:center;gap:.5rem;font-size:.84rem;cursor:pointer;}
.gac-check input{accent-color:var(--accent);width:16px;height:16px;}

/* Modal */
.gac-modal-bg{position:fixed;inset:0;background:rgba(10,3,5,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:gac-fadein .18s ease;}
@keyframes gac-fadein{from{opacity:0;}to{opacity:1;}}
.gac-modal{background:var(--card);border:1px solid var(--border);border-radius:1.5rem;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 28px 80px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);animation:gac-modalin .2s cubic-bezier(.4,0,.2,1);}
@keyframes gac-modalin{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.gac-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);}
.gac-modal-hdr h3{margin:0;font-size:.97rem;}
.gac-modal-x{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:all .15s;}
.gac-modal-x:hover{color:var(--fg);background:rgba(255,255,255,.07);}
.gac-modal-body{padding:1.5rem;}
.gac-modal-ftr{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.5rem;border-top:1px solid var(--border);}
.gac-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;}
.gac-fcol{grid-column:1/-1;}

/* Responsive */
@media(max-width:960px){.gac-layout{grid-template-columns:210px 1fr;}.gac-stats{grid-template-columns:repeat(2,1fr);}.gac-help-actions{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){
  .gac-layout{grid-template-columns:1fr;}
  .gac-sidebar{position:static;}
  .gac-profile-card{flex-direction:row;text-align:left;gap:.875rem;padding:1.1rem;border-radius:1.25rem;}
  .gac-nav{display:flex;flex-wrap:wrap;gap:.3rem;background:transparent;border:none;padding:.25rem 0;}
  .gac-nav-item{padding:.38rem .72rem;font-size:.76rem;border-radius:2rem!important;border:1px solid var(--border)!important;}
  .gac-nav-item.is-active{border-color:var(--accent)!important;background:var(--accent-light);}
  .gac-nav-sep,.gac-nav-group{display:none;}
  .gac-addr-grid,.gac-privacy-grid,.gac-cards-grid,.gac-products-grid{grid-template-columns:1fr;}
  .gac-policy-item{grid-template-columns:1fr;gap:.2rem;}
  .gac-modal-grid{grid-template-columns:1fr;}
  .gac-help-actions{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){.gac-stats{grid-template-columns:1fr 1fr;}.gac-welcome{flex-direction:column;align-items:flex-start;}.gac-help-actions{grid-template-columns:1fr 1fr;}}

/* ── Color PDP: svc-clickable (single-gnag_color.php block 2) ── */
.gnag-svc-clickable { transition: background .2s, transform .2s; }
.gnag-svc-clickable:hover { background: rgba(200,169,110,.08); transform: translateY(-2px); }
.gnag-svc-clickable:focus-visible { outline: 2px solid var(--accent,#c8a96e); outline-offset: 2px; }



/* ══════════════════════════════════════════════════════════════════════
   SECTION: DASHBOARD
   Admin dashboard layout and UI
   (previously inline in page-dashboard.php)
   ══════════════════════════════════════════════════════════════════════ */
/* ── Reset & layout ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--sw:250px;--th:60px;}
.gd-wrap{display:flex;min-height:100vh;background:var(--bg);}

/* Sidebar */
.gd-sidebar{width:var(--sw);flex-shrink:0;background:rgba(8,2,4,.96);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:300;transition:transform .25s;}
.gd-logo{padding:1.2rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.65rem;}
.gd-logo-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;overflow:hidden;}
.gd-logo-img{width:100%;height:100%;object-fit:cover;border-radius:9px;}
.gd-logo-text{font-family:var(--font-display);font-size:.92rem;font-weight:700;line-height:1.2;background:linear-gradient(135deg,var(--hero-grad-1) 0%,var(--hero-grad-2) 55%,var(--hero-grad-1) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gd-logo-sub{font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.gd-nav{flex:1;overflow-y:auto;padding:.6rem 0;}
.gd-nav-sec{font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:.7rem 1.4rem .25rem;}
.gd-nav-a{display:flex;align-items:center;gap:.7rem;padding:.55rem 1.4rem;margin:.08rem .55rem;border-radius:.55rem;font-size:.83rem;font-weight:500;color:var(--muted);cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all .16s;position:relative;}
.gd-nav-a:hover{background:rgba(255,255,255,.05);color:var(--fg);}
.gd-nav-a.on{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.25);color:var(--accent);}
.gd-nav-a.on svg{stroke:var(--accent);}
.gd-badge{margin-left:auto;background:#e05252;color:#fff;border-radius:2rem;font-size:.6rem;font-weight:700;padding:.1rem .42rem;min-width:18px;text-align:center;}
.gd-badge.warn{background:#f90;}
.gd-footer{padding:.9rem 1.4rem;border-top:1px solid var(--border);}
.gd-user{display:flex;align-items:center;gap:.65rem;}
.gd-user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--primary));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#120608;flex-shrink:0;overflow:hidden;}
.gd-user-name{font-size:.8rem;font-weight:600;color:var(--fg);}
.gd-user-role{font-size:.64rem;color:var(--muted);}

/* Main */
.gd-main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;}
.gd-topbar{height:var(--th);position:sticky;top:0;z-index:200;background:rgba(8,2,4,.88);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;padding:0 1.75rem;}
.gd-topbar-bc{font-size:.72rem;color:var(--muted);}
.gd-topbar-bc span{color:var(--accent);}
.gd-topbar-title{font-size:.98rem;font-weight:600;color:var(--fg);}
.gd-topbar-right{margin-left:auto;display:flex;align-items:center;gap:.6rem;}
.gd-btn{display:inline-flex;align-items:center;gap:.38rem;padding:.38rem .85rem;border-radius:2rem;font-size:.76rem;font-weight:600;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;text-decoration:none;transition:all .16s;}
.gd-btn:hover{border-color:var(--accent-border);color:var(--accent);background:rgba(201,168,76,.07);}
.gd-btn.gold{background:var(--accent);border-color:var(--accent);color:#120608;}
.gd-btn.gold:hover{background:#b8942e;}
.gd-btn.red{background:rgba(224,82,82,.15);border-color:rgba(224,82,82,.4);color:#e05252;}
.gd-btn.green{background:rgba(76,175,80,.15);border-color:rgba(76,175,80,.4);color:#4caf50;}

/* Content */
.gd-content{flex:1;padding:1.75rem;overflow-x:hidden;}

/* Stats grid */
.gd-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.85rem;margin-bottom:1.75rem;}
.gd-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.3rem;display:flex;align-items:center;gap:.9rem;transition:border-color .2s;}
.gd-stat:hover{border-color:var(--accent-border);}
.gd-stat-icon{font-size:1.55rem;flex-shrink:0;}
.gd-stat-val{font-size:1.55rem;font-weight:700;font-family:var(--font-display);line-height:1.1;}
.gd-stat-lbl{font-size:.68rem;color:var(--muted);margin-top:.18rem;}

/* Section header */
.gd-sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;flex-wrap:wrap;gap:.5rem;}
.gd-sh-title{font-size:.92rem;font-weight:700;color:var(--fg);}

/* Table */
.gd-table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:visible;margin-bottom:1.75rem;}
.gd-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem;}
.gd-table thead tr th:first-child{border-top-left-radius:var(--r);}
.gd-table thead tr th:last-child{border-top-right-radius:var(--r);}
.gd-table tbody tr:last-child td{border-bottom:none;}
.gd-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r);}
.gd-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r);}
.gd-table th{background:rgba(255,255,255,.03);padding:.7rem 1rem;text-align:left;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;}
.gd-table td{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;color:var(--fg);}
.gd-table tr:last-child td{border-bottom:none;}
.gd-table tr:hover td{background:rgba(255,255,255,.02);}
.gd-table code{font-size:.75rem;background:var(--bg-alt);padding:.1rem .4rem;border-radius:.3rem;font-family:monospace;}

/* Status pills */
.gd-pill{display:inline-block;padding:.15rem .65rem;border-radius:2rem;font-size:.68rem;font-weight:600;}
.gd-pill-waiting{background:rgba(224,82,82,.15);border:1px solid rgba(224,82,82,.4);color:#e05252;}
.gd-pill-active{background:rgba(249,144,0,.15);border:1px solid rgba(249,144,0,.35);color:#f90;}
.gd-pill-resolved,.gd-pill-delivered,.gd-pill-confirmed{background:rgba(76,175,80,.12);border:1px solid rgba(76,175,80,.3);color:#4caf50;}
.gd-pill-closed,.gd-pill-cancelled,.gd-pill-former{background:rgba(154,138,143,.1);border:1px solid rgba(154,138,143,.25);color:#9a8a8f;}
.gd-pill-bot_handled,.gd-pill-processing{background:rgba(124,156,201,.12);border:1px solid rgba(124,156,201,.3);color:#7c9dc9;}
.gd-pill-shipped,.gd-pill-in_progress{background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.3);color:var(--accent);}
.gd-pill-open{background:rgba(224,82,82,.15);border:1px solid rgba(224,82,82,.4);color:#e05252;}
.gd-pill-on_hold,.gd-pill-refunded{background:rgba(249,144,0,.12);border:1px solid rgba(249,144,0,.3);color:#f90;}

/* Chat window */
.gd-chat-win{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);min-height:320px;max-height:460px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem;}
.gd-chat-row{display:flex;flex-direction:column;gap:.12rem;}
.gd-chat-row.user{align-items:flex-end;}
.gd-chat-row.admin,.gd-chat-row.bot{align-items:flex-start;}
.gd-chat-bubble{max-width:78%;padding:.5rem .9rem;border-radius:1rem;line-height:1.55;font-size:.84rem;}
.gd-chat-row.user  .gd-chat-bubble{background:#c9a84c;color:#1a0c10;border-radius:1rem 1rem .2rem 1rem;}
.gd-chat-row.admin .gd-chat-bubble{background:rgba(76,175,80,.18);border:1px solid rgba(76,175,80,.3);color:var(--fg);border-radius:1rem 1rem 1rem .2rem;}
.gd-chat-row.bot   .gd-chat-bubble{background:rgba(255,255,255,.07);color:var(--fg);border-radius:1rem 1rem 1rem .2rem;}
.gd-chat-meta{font-size:.64rem;color:rgba(245,240,232,.35);padding:0 .4rem;}

/* Card */
.gd-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;}
.gd-card-title{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem;}

/* Form fields */
.gd-input{width:100%;padding:.4rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:.625rem;color:var(--fg);font-size:.8rem;font-family:inherit;outline:none;transition:border-color .25s ease,box-shadow .25s ease;}
.gd-input::placeholder{color:var(--muted);}
.gd-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
select.gd-input{appearance:none;cursor:pointer;}
.gd-select{
  padding:.38rem 1.05rem;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:2rem !important;
  font-size:.78rem !important;
  font-family:inherit !important;
  font-weight:500 !important;
  color:var(--muted) !important;
  background:rgba(255,255,255,.06) !important;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:all .22s ease;
  white-space:nowrap;
  line-height:1.4 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right .8rem center !important;
  padding-right:2.2rem !important;
  width:auto !important;
}
.gd-select:hover,.gd-select:focus{border-color:rgba(201,168,76,.45) !important;color:var(--accent) !important;background-color:rgba(201,168,76,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 2px rgba(201,168,76,.1) !important;outline:none;}
.gd-select option{background:var(--card);color:var(--fg);}
.gd-label{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.3rem;}
.gd-form-row{margin-bottom:.9rem;}
.gd-textarea{resize:vertical;min-height:90px;}
.textarea-tall{min-height:140px;}

/* Grid layout */
.gd-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.gd-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}

/* Empty state */
.gd-empty{text-align:center;padding:3.5rem 2rem;color:var(--muted);}
.gd-empty-icon{font-size:3rem;margin-bottom:.6rem;}

/* Notice */
.gd-notice{padding:.75rem 1.1rem;border-radius:.6rem;font-size:.84rem;margin-bottom:1.1rem;}
.gd-notice.success{background:rgba(76,175,80,.12);border:1px solid rgba(76,175,80,.35);color:#4caf50;}
.gd-notice.error{background:rgba(224,82,82,.12);border:1px solid rgba(224,82,82,.35);color:#e05252;}

/* Role badge */
.gd-role{display:inline-block;padding:.15rem .6rem;border-radius:.35rem;font-size:.66rem;font-weight:700;letter-spacing:.05em;}
.gd-role-admin{background:rgba(201,168,76,.2);color:var(--accent);}
.gd-role-chat_agent{background:rgba(124,156,201,.15);color:#7c9dc9;}
.gd-role-order_manager{background:rgba(76,175,80,.12);color:#4caf50;}
.gd-role-support{background:rgba(249,144,0,.12);color:#f90;}
.gd-role-owner{background:rgba(201,168,76,.22);color:#c9a84c;border:1px solid rgba(201,168,76,.4);}
.gd-role-finance_manager{background:rgba(76,175,80,.12);color:#4caf50;}
.gd-role-hr_manager{background:rgba(156,39,176,.12);color:#ab47bc;}
.gd-role-art_curator{background:rgba(233,30,99,.1);color:#ec407a;}
.gd-role-logistics{background:rgba(3,169,244,.1);color:#29b6f6;}
.gd-role-sales_exec{background:rgba(255,152,0,.12);color:#ffa726;}

/* Tabs (sub-tabs) */
.gd-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--border);margin-bottom:1.4rem;flex-wrap:wrap;}
.gd-tab-btn{padding:.55rem 1.1rem;font-size:.8rem;font-weight:600;color:var(--muted);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}
.gd-tab-btn.on{color:var(--accent);border-bottom-color:var(--accent);}

/* Filter bar */
.gd-filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center;}
.gd-filter-input{padding:.38rem 1.05rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:2rem;color:var(--muted);font-size:.78rem;outline:none;font-family:inherit;font-weight:500;transition:all .22s ease;min-width:180px;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
.gd-filter-input::placeholder{color:var(--muted);}
.gd-filter-input:focus{border-color:rgba(201,168,76,.45);color:var(--fg);background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 2px rgba(201,168,76,.1);}
.gd-filter-sel{padding:.4rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:.625rem;color:var(--fg);font-size:.8rem;outline:none;font-family:inherit;cursor:pointer;appearance:none;transition:border-color .25s ease,box-shadow .25s ease;}
.gd-filter-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}

/* Assign dropdown */
.gd-assign-wrap{position:relative;display:inline-block;}
.gd-assign-dropdown{position:absolute;top:100%;right:0;min-width:200px;background:var(--card);border:1px solid var(--accent-border);border-radius:.75rem;box-shadow:0 8px 32px rgba(0,0,0,.6);z-index:500;padding:.4rem;display:none;margin-top:.3rem;}
.gd-assign-dropdown.open{display:block;}
.gd-assign-opt{padding:.5rem .75rem;border-radius:.5rem;font-size:.8rem;cursor:pointer;color:var(--fg);display:flex;align-items:center;gap:.6rem;transition:background .15s;}
.gd-assign-opt:hover{background:rgba(255,255,255,.06);}

/* Mobile drawer toggle button — hidden on desktop by default via its
   own class (not fighting .hidden/!important), shown only under the
   tablet breakpoint below */
.gd-mob-toggle{display:none;}

/* Backdrop — real element (not a pseudo-element), sits above normal
   content but below both the sidebar and the sticky topbar, so the
   toggle button always stays reachable to close the drawer again */
.gd-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;}
.gd-backdrop.show{display:block;}
body.gd-drawer-open{overflow:hidden;}

/* Tablet and below — off-canvas sidebar drawer */
@media(max-width:1024px){
  .gd-sidebar{width:250px;transform:translateX(-100%);}
  .gd-sidebar.open{transform:translateX(0);}
  .gd-main{margin-left:0;min-width:0;}
  .gd-mob-toggle{display:inline-flex;}
  .gd-grid-2,.gd-grid-3{grid-template-columns:1fr;}
  .gd-grid-2>*,.gd-grid-3>*{width:100%;min-width:0;}
  .gd-content{min-width:0;}
  .gd-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;width:100%;}
  .gd-table{width:100%;table-layout:auto;}
  .gd-table th:last-child,.gd-table td:last-child{width:1%;white-space:nowrap;}
  .gd-table th,.gd-table td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;}
  .gd-sh{min-width:0;}
}

/* Small tablet / large phone */
@media(max-width:768px){
  .gd-topbar{padding:0 1.1rem;gap:.6rem;}
  .gd-content{padding:1.1rem;}
  .gd-stats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.65rem;}
  .gd-stat{padding:.9rem 1rem;gap:.65rem;}
  .gd-stat-icon{font-size:1.3rem;}
  .gd-stat-val{font-size:1.3rem;}
}

/* Phone */
@media(max-width:600px){
  .gd-topbar-bc{display:none;}
  .gd-topbar-title{font-size:.85rem;}
  .gd-topbar-right{gap:.4rem;}
  .gd-content{padding:.85rem;}
  .gd-table th,.gd-table td{padding:.55rem .5rem;font-size:.72rem;}
  .gd-stats{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:.55rem;}
  .gd-stat{padding:.8rem .9rem;gap:.55rem;}
}

/* Small phone */
@media(max-width:420px){
  .gd-stats{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;}
  .gd-stat{padding:.7rem .75rem;gap:.5rem;}
  .gd-stat-icon{font-size:1.15rem;}
  .gd-stat-val{font-size:1.15rem;}
  .gd-stat-lbl{font-size:.63rem;}
}

/* Nonce form helper */
.gd-inline-form{display:inline;}

/* ── Custom dropdown (matches colors page sort) ── */
.gd-dd-wrap{position:relative;display:inline-flex;align-items:center;}
.gd-dd-btn{padding:.38rem 1.05rem;border:1px solid rgba(255,255,255,.12);border-radius:2rem;font-size:.78rem;font-family:inherit;font-weight:500;color:var(--muted);background:rgba(255,255,255,.06);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);cursor:pointer;transition:all .22s ease;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;line-height:1.4;}
.gd-dd-btn::after{content:'▾';font-size:.65rem;line-height:1;transition:transform .2s ease;}
.gd-dd-btn.open::after{transform:rotate(180deg);}
.gd-dd-btn:hover,.gd-dd-btn.open{border-color:rgba(201,168,76,.45);color:var(--accent);background:rgba(201,168,76,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 2px rgba(201,168,76,.1);}
.gd-dd-panel{display:none;position:absolute;top:calc(100% + .5rem);right:0;background:rgba(10,3,5,.82);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:1.2rem;padding:.4rem;z-index:600;min-width:175px;box-shadow:0 16px 48px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.09);flex-direction:column;gap:.1rem;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.3) transparent;}
.gd-dd-panel.drop-up{top:auto;bottom:calc(100% + .5rem);}
.gd-dd-panel.open{display:flex;animation:gnagDropIn .18s cubic-bezier(.4,0,.2,1) both;}
.gd-dd-opt{background:none;border:none;border-radius:.75rem;color:var(--muted);font-size:.78rem;font-family:inherit;font-weight:500;padding:.5rem 1rem;text-align:left;cursor:pointer;transition:all .18s ease;white-space:nowrap;line-height:1.4;width:100%;}
.gd-dd-opt:hover{background:rgba(201,168,76,.12);color:var(--accent);}
.gd-dd-opt.active{color:var(--accent);background:rgba(201,168,76,.12);}
.gd-dd-opt.has-check::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;margin-right:.5rem;border:1px solid rgba(255,255,255,.2);vertical-align:middle;}
.gd-dd-opt.active.has-check::before{background:var(--accent);border-color:var(--accent);}



/* ══════════════════════════════════════════════════════════════════════
   SECTION: EMPLOYEE DASHBOARD
   Employee dashboard layout and UI
   (previously inline in page-employee.php)
   ══════════════════════════════════════════════════════════════════════ */
/* ── Dashboard Layout ── */
:root { --sidebar-w: 240px; --topbar-h: 60px; }
*,*::before,*::after { box-sizing:border-box; }

.emp-dash { display:flex; min-height:100vh; background:var(--bg); }

/* Sidebar */
.emp-sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:rgba(10,3,5,0.92);
  backdrop-filter:blur(32px) saturate(160%);
  -webkit-backdrop-filter:blur(32px) saturate(160%);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  transition:transform .25s ease;
}
.emp-sidebar-logo {
  padding:1.35rem 1.5rem 1.1rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.7rem;
}
.emp-sidebar-logo-icon {
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#7c2d4a);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.emp-sidebar-logo-text { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--fg); line-height:1.2; }
.emp-sidebar-logo-sub  { font-size:.65rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }

.emp-nav { padding:.75rem 0; flex:1; }
.emp-nav-label { font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:.6rem 1.5rem .3rem; }
.emp-nav-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1.5rem; margin:.1rem .6rem;
  border-radius:.6rem; font-size:.855rem; font-weight:500;
  color:var(--muted); cursor:pointer; text-decoration:none;
  transition:all .18s; border:1px solid transparent;
}
.emp-nav-item:hover { background:rgba(255,255,255,.05); color:var(--fg); }
.emp-nav-item.active { background:rgba(201,168,76,.12); border-color:rgba(201,168,76,.25); color:var(--accent); }
.emp-nav-item svg { flex-shrink:0; }
.emp-nav-badge { margin-left:auto; background:var(--accent); color:#120608; border-radius:2rem; font-size:.62rem; font-weight:700; padding:.1rem .45rem; }

.emp-sidebar-footer {
  padding:1rem 1.5rem;
  border-top:1px solid var(--border);
}
.emp-sidebar-user { display:flex; align-items:center; gap:.7rem; }
.emp-sidebar-user-avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:#120608; flex-shrink:0;
}
.emp-sidebar-user-name { font-size:.82rem; font-weight:600; color:var(--fg); }
.emp-sidebar-user-role { font-size:.68rem; color:var(--muted); }

/* Main area */
.emp-main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

/* Topbar */
.emp-topbar {
  height:var(--topbar-h); position:sticky; top:0; z-index:100;
  background:rgba(10,3,5,0.85);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem;
  padding:0 2rem;
}
.emp-topbar-title { font-size:1rem; font-weight:600; color:var(--fg); flex:1; }
.emp-topbar-breadcrumb { font-size:.75rem; color:var(--muted); }
.emp-topbar-breadcrumb span { color:var(--accent); }
.emp-topbar-actions { display:flex; align-items:center; gap:.6rem; }
.emp-topbar-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .9rem; border-radius:2rem; font-size:.78rem; font-weight:600;
  border:1px solid var(--border); background:rgba(255,255,255,.05);
  color:var(--muted); cursor:pointer; text-decoration:none;
  transition:all .18s;
}
.emp-topbar-btn:hover { border-color:var(--accent-border); color:var(--accent); background:rgba(201,168,76,.08); }
.emp-topbar-btn.primary { background:var(--accent); border-color:var(--accent); color:#120608; }
.emp-topbar-btn.primary:hover { background:#b8942e; }

/* Content */
.emp-content { flex:1; padding:2rem; overflow-x:hidden; }

/* Stats */
.emp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
.emp-stat {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem;
  transition:border-color .2s;
}
.emp-stat:hover { border-color:var(--accent-border); }
.emp-stat-icon { font-size:1.6rem; flex-shrink:0; }
.emp-stat-val  { font-size:1.7rem; font-weight:700; font-family:var(--font-display); line-height:1; }
.emp-stat-lbl  { font-size:.72rem; color:var(--muted); margin-top:.2rem; }

/* Section header */
.emp-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.emp-section-title { font-size:1rem; font-weight:700; color:var(--fg); }
.emp-section-count { font-size:.8rem; color:var(--muted); }

/* Search bar */
.emp-search-row { display:flex; gap:.6rem; margin-bottom:1rem; align-items:center; }
.emp-search-wrap { position:relative; flex:1; }
.emp-search-wrap svg { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.emp-search-input {
  width:100%; padding:.7rem 7rem .7rem 2.75rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); color:var(--fg); font-size:.9rem;
  outline:none; transition:border-color .2s, box-shadow .2s;
  font-family:var(--font-body);
}
.emp-search-input::placeholder { color:var(--muted); }
.emp-search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }

/* Advanced panel */
.emp-adv-panel {
  background:rgba(10,3,5,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--accent-border);
  border-radius:var(--r); padding:1.5rem;
  margin-bottom:1rem;
}
.emp-adv-title { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.25rem; }
.emp-adv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.85rem; }
.gnag-adv-label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; display:block; margin-bottom:.35rem; }

/* Cards grid */
.emp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }

/* Card */
.emp-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.emp-card:hover { border-color:var(--accent-border); box-shadow:var(--shadow); transform:translateY(-2px); }

/* No results */
.emp-empty { text-align:center; padding:4rem 2rem; background:var(--card); border:1px solid var(--border); border-radius:var(--r); }

/* Modal tweaks for dashboard */
#gnag-modal { max-width:820px; }

/* Chips */
.emp-chips { display:flex; flex-wrap:wrap; gap:.4rem; min-height:.5rem; margin-bottom:.5rem; }

/* Responsive */
@media(max-width:900px){
  :root { --sidebar-w:0px; }
  .emp-sidebar { transform:translateX(-240px); }
  .emp-sidebar.open { transform:translateX(0); width:240px; }
  .emp-main { margin-left:0; }
  .emp-stats { grid-template-columns:1fr 1fr; }
  .emp-topbar { padding:0 1rem; }
  .emp-content { padding:1.25rem; }
}
@media(max-width:500px){
  .emp-stats { grid-template-columns:1fr 1fr; }
  .emp-adv-grid { grid-template-columns:1fr; }
}


/* ══════════════════════════════════════════════════════════════════════
   SECTION: BLOG / SOCIAL FEED GRID LAYOUTS
   Static grid, list, timeline, carousel, magazine layout classes.
   Dynamic parts (column count, gaps, ratios, card style, visibility)
   are generated by wp_add_inline_style() in page-blog.php.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Article grid ── */
.bfr-grid { display: grid; gap: var(--bfr-a-gap, 20px); }
.bfr-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.bfr-grid--grid-1 { grid-template-columns: 1fr; }
.bfr-grid--grid-2 { grid-template-columns: repeat(2, 1fr); }
.bfr-grid--grid-3 { grid-template-columns: repeat(3, 1fr); }
/* 2-up layout gets extra breathing room + a taller image — applied to
   both Articles and Social so matching layouts always match visually. */
.bfr-grid--grid-2,
.bfr-social-grid--grid-2 { gap: 2rem; }
.bfr-grid--grid-2 .bfr-card-img,
.bfr-social-grid--grid-2 .bfr-card-img { aspect-ratio: 4/3; }
.bfr-grid--grid-4 { grid-template-columns: repeat(4, 1fr); }
.bfr-grid--grid-5 { grid-template-columns: repeat(5, 1fr); }
.bfr-grid--grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width:900px) {
  .bfr-grid--grid-3,.bfr-grid--grid-4,.bfr-grid--grid-5,.bfr-grid--grid-6 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:600px) { .bfr-grid { grid-template-columns: 1fr; } }

/* Magazine */
.bfr-grid--magazine { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
.bfr-grid--magazine .bfr-card:first-child { grid-row: 1 / 3; }
@media (max-width:700px) { .bfr-grid--magazine { grid-template-columns: 1fr; } .bfr-grid--magazine .bfr-card:first-child { grid-row: auto; } }

/* Masonry (column count set dynamically) */
.bfr-grid--masonry .bfr-card { display: inline-block; width: 100%; margin-bottom: var(--bfr-a-gap, 20px); break-inside: avoid; vertical-align: top; overflow: hidden; }
.bfr-grid--masonry .bfr-card.reveal { transform: none !important; }
.bfr-grid--masonry .bfr-card .bfr-card-img { display: block; width: 100%; aspect-ratio: unset !important; height: auto !important; }
.bfr-grid--masonry .bfr-card .bfr-card-img img { width: 100%; height: auto !important; object-fit: cover; }
.bfr-grid--masonry .bfr-card .bfr-card-body { display: block; width: 100%; }

/* List */
.bfr-grid--list { grid-template-columns: 1fr; }
.bfr-grid--list .bfr-card { display: grid; grid-template-columns: 240px 1fr; }
.bfr-grid--list .bfr-card .bfr-card-img { height: 180px; align-self: start; aspect-ratio: unset; border-radius: 10px 0 0 10px; }
.bfr-grid--list .bfr-card .bfr-card-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width:640px) { .bfr-grid--list .bfr-card { grid-template-columns: 1fr; } .bfr-grid--list .bfr-card .bfr-card-img { border-radius: 10px 10px 0 0; height: 180px; } }

/* Compact list */
.bfr-grid--list-compact { grid-template-columns: 1fr; gap: 0; }
.bfr-grid--list-compact .bfr-card { display: flex; flex-direction: row !important; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.bfr-grid--list-compact .bfr-card:hover { transform: none !important; box-shadow: none !important; }
.bfr-grid--list-compact .bfr-card.reveal { transform: none !important; }
.bfr-grid--list-compact .bfr-card .bfr-card-img { flex-shrink: 0; width: 56px; height: 56px; min-width: 56px; border-radius: 6px; overflow: hidden; aspect-ratio: 1/1 !important; display: block; }
.bfr-grid--list-compact .bfr-card .bfr-card-img img { width: 100%; height: 100%; object-fit: cover; }
.bfr-grid--list-compact .bfr-card .bfr-card-cat { display: none; }
.bfr-grid--list-compact .bfr-card .bfr-card-body { padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.bfr-grid--list-compact .bfr-card .bfr-card-title { font-size: .88rem; margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bfr-grid--list-compact .bfr-card .bfr-meta { font-size: .72rem; color: var(--muted); }
.bfr-grid--list-compact .bfr-card .bfr-card-excerpt { display: none; }
.bfr-grid--list-compact .bfr-card .bfr-readmore { display: none; }
.bfr-grid--list-compact .bfr-card .bfr-card-foot { display: none; }

/* Timeline */
.bfr-grid--timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.bfr-grid--timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(201,168,76,.25); transform:translateX(-50%); }
.bfr-grid--timeline .bfr-card { width: calc(50% - 30px); margin-bottom: var(--bfr-a-gap, 20px); position: relative; }
.bfr-grid--timeline .bfr-card:nth-child(odd)  { align-self: flex-start; margin-right: auto; }
.bfr-grid--timeline .bfr-card:nth-child(even) { align-self: flex-end;   margin-left: auto; }
.bfr-grid--timeline .bfr-card::after { content:''; position:absolute; top:24px; width:12px; height:12px; border-radius:50%; background:#c9a84c; }
.bfr-grid--timeline .bfr-card:nth-child(odd)::after  { right:-39px; }
.bfr-grid--timeline .bfr-card:nth-child(even)::after { left:-39px; }
@media (max-width:700px) { .bfr-grid--timeline::before { display:none; } .bfr-grid--timeline .bfr-card { width:100%; margin-left:0!important; margin-right:0!important; } .bfr-grid--timeline .bfr-card::after { display:none; } }

/* Carousel (flex-basis set dynamically) */
.bfr-grid--carousel { display: flex; gap: var(--bfr-a-gap, 20px); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding-bottom: 14px; -webkit-overflow-scrolling: touch; align-items: stretch; }
.bfr-grid--carousel::-webkit-scrollbar { height: 4px; }
.bfr-grid--carousel::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius:4px; }
.bfr-grid--carousel::-webkit-scrollbar-thumb { background: #c9a84c; border-radius:4px; }
.bfr-grid--carousel .bfr-card.reveal { transform: none !important; }
.bfr-grid--carousel .bfr-card .bfr-card-img { flex-shrink: 0; display: block; }
.bfr-grid--carousel .bfr-card .bfr-card-body { flex: 1; display: flex; flex-direction: column; }
.bfr-grid--carousel .bfr-card .bfr-card-excerpt { flex: 1; }
.bfr-grid--carousel .bfr-card .bfr-readmore { margin-top: auto; }
.bfr-grid--carousel .bfr-card .bfr-card-foot { margin-top: auto; }

/* ── Social grid ── */
.bfr-social-grid { display: grid; gap: var(--bfr-s-gap, 20px); }
.bfr-social-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.bfr-social-grid--grid-1 { grid-template-columns: 1fr; }
.bfr-social-grid--grid-2 { grid-template-columns: repeat(2, 1fr); }
.bfr-social-grid--grid-3 { grid-template-columns: repeat(3, 1fr); }
.bfr-social-grid--grid-4 { grid-template-columns: repeat(4, 1fr); }
.bfr-social-grid--grid-5 { grid-template-columns: repeat(5, 1fr); }
.bfr-social-grid--grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width:900px) {
  .bfr-social-grid--grid-3,.bfr-social-grid--grid-4,.bfr-social-grid--grid-5,.bfr-social-grid--grid-6 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:600px) { .bfr-social-grid { grid-template-columns: 1fr; } }

/* Magazine social */
.bfr-social-grid--magazine { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: var(--bfr-s-gap, 20px); }
.bfr-social-grid--magazine .bfr-sc:first-child { grid-row: 1 / 3; }
@media (max-width:700px) { .bfr-social-grid--magazine { grid-template-columns: 1fr; } .bfr-social-grid--magazine .bfr-sc:first-child { grid-row: auto; } }

/* Timeline social */
.bfr-social-grid--timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.bfr-social-grid--timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(201,168,76,.25); transform:translateX(-50%); }
.bfr-social-grid--timeline .bfr-sc { width: calc(50% - 30px); margin-bottom: var(--bfr-s-gap, 20px); position: relative; }
.bfr-social-grid--timeline .bfr-sc:nth-child(odd)  { align-self: flex-start; margin-right: auto; }
.bfr-social-grid--timeline .bfr-sc:nth-child(even) { align-self: flex-end;   margin-left: auto; }
.bfr-social-grid--timeline .bfr-sc::after { content:''; position:absolute; top:20px; width:12px; height:12px; border-radius:50%; background:#c9a84c; }
.bfr-social-grid--timeline .bfr-sc:nth-child(odd)::after  { right:-39px; }
.bfr-social-grid--timeline .bfr-sc:nth-child(even)::after { left:-39px; }
@media (max-width:700px) { .bfr-social-grid--timeline::before { display:none; } .bfr-social-grid--timeline .bfr-sc { width:100%; margin-left:0!important; margin-right:0!important; } .bfr-social-grid--timeline .bfr-sc::after { display:none; } }

/* Masonry social (column count set dynamically) */
.bfr-social-grid--masonry .bfr-sc { display: inline-block; width: 100%; margin-bottom: var(--bfr-s-gap, 20px); break-inside: avoid; vertical-align: top; overflow: hidden; }

/* List social */
.bfr-social-grid--list { grid-template-columns: 1fr; }
.bfr-social-grid--list .bfr-card { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
.bfr-social-grid--list .bfr-card .bfr-card-img { height: 160px; align-self: start; aspect-ratio: unset; border-radius: 10px 0 0 10px; }
.bfr-social-grid--list .bfr-card .bfr-card-img img { width: 100%; height: 100%; object-fit: cover; }
.bfr-social-grid--list .bfr-card .bfr-card-body { justify-content: center; }
@media (max-width:600px) {
  .bfr-social-grid--list .bfr-card { grid-template-columns: 1fr; }
  .bfr-social-grid--list .bfr-card .bfr-card-img { border-radius: 10px 10px 0 0; height: 180px; aspect-ratio: 16/9; }
}

/* Compact list social */
.bfr-social-grid--list-compact { grid-template-columns: 1fr; gap: 0; }
.bfr-social-grid--list-compact .bfr-card { display: flex; flex-direction: row !important; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.bfr-social-grid--list-compact .bfr-card:hover { transform: none !important; box-shadow: none !important; }
.bfr-social-grid--list-compact .bfr-card.reveal { transform: none !important; }
.bfr-social-grid--list-compact .bfr-card .bfr-card-img { flex-shrink: 0; width: 56px; height: 56px; min-width: 56px; border-radius: 6px; overflow: hidden; aspect-ratio: 1/1 !important; display: block; }
.bfr-social-grid--list-compact .bfr-card .bfr-card-img img { width: 100%; height: 100%; object-fit: cover; }
.bfr-social-grid--list-compact .bfr-card .bfr-card-cat { display: none; }
.bfr-social-grid--list-compact .bfr-card .bfr-card-body { padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.bfr-social-grid--list-compact .bfr-card .bfr-card-title { font-size: .88rem; margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bfr-social-grid--list-compact .bfr-card .bfr-meta { font-size: .72rem; color: var(--muted); }
.bfr-social-grid--list-compact .bfr-card .bfr-readmore { display: none; }

/* Carousel social (flex-basis set dynamically) */
.bfr-social-grid--carousel { display: flex; gap: var(--bfr-s-gap, 20px); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding-bottom: 14px; -webkit-overflow-scrolling: touch; align-items: stretch; }
.bfr-social-grid--carousel::-webkit-scrollbar { height: 4px; }
.bfr-social-grid--carousel::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius:4px; }
.bfr-social-grid--carousel::-webkit-scrollbar-thumb { background: #c9a84c; border-radius:4px; }
.bfr-social-grid--carousel .bfr-sc.reveal { transform: none !important; }
.bfr-social-grid--carousel .bfr-sc .bfr-sc-body { flex: 1; display: flex; flex-direction: column; }


/* ══════════════════════════════════════════════════════════════════════
   SECTION: LISTING LAYOUT GRID (products-grid)
   Static layout classes — dynamic parts (cols, gap, ratio, card style)
   are generated by wp_add_inline_style() in gnag_listing_layout_css().
   ══════════════════════════════════════════════════════════════════════ */

.products-grid { display:grid; gap:var(--gnag-gap); }
.products-grid.gnag-layout--auto   { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.products-grid.gnag-layout--grid-1 { grid-template-columns:1fr; }
.products-grid.gnag-layout--grid-2 { grid-template-columns:repeat(2,1fr); }
.products-grid.gnag-layout--grid-3 { grid-template-columns:repeat(3,1fr); }
.products-grid.gnag-layout--grid-4 { grid-template-columns:repeat(4,1fr); }
.products-grid.gnag-layout--grid-5 { grid-template-columns:repeat(5,1fr); }
.products-grid.gnag-layout--grid-6 { grid-template-columns:repeat(6,1fr); }
@media(max-width:900px){
  .products-grid.gnag-layout--grid-3,
  .products-grid.gnag-layout--grid-4,
  .products-grid.gnag-layout--grid-5,
  .products-grid.gnag-layout--grid-6 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){ .products-grid { grid-template-columns:1fr !important; } }

/* Magazine */
.products-grid.gnag-layout--magazine { grid-template-columns:2fr 1fr; grid-template-rows:auto auto; }
.products-grid.gnag-layout--magazine .product-card:first-child { grid-row:1/3; }
@media(max-width:700px){
  .products-grid.gnag-layout--magazine { grid-template-columns:1fr; }
  .products-grid.gnag-layout--magazine .product-card:first-child { grid-row:auto; }
}

/* Masonry (column count set dynamically) */
.products-grid.gnag-layout--masonry .product-card { display:inline-block; width:100%; margin-bottom:var(--gnag-gap); break-inside:avoid; vertical-align:top; overflow:hidden; }
.products-grid.gnag-layout--masonry .product-card.reveal { transform:none !important; }
.products-grid.gnag-layout--masonry .product-card .product-card-image-link { display:block; width:100%; }
.products-grid.gnag-layout--masonry .product-card .product-card-image { aspect-ratio:unset !important; height:auto !important; width:100%; }
.products-grid.gnag-layout--masonry .product-card .product-card-image img { width:100%; height:auto !important; object-fit:cover; }
.products-grid.gnag-layout--masonry .product-card .product-card-body { display:block; width:100%; }
.products-grid.gnag-layout--masonry .product-card .product-card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }

/* List */
.products-grid.gnag-layout--list { grid-template-columns:1fr; align-items:start; }
.products-grid.gnag-layout--list .product-card { display:grid; grid-template-columns:240px 1fr; align-items:stretch; height:auto; min-height:0; }
.products-grid.gnag-layout--list .product-card .product-card-image { aspect-ratio:auto !important; height:100%; min-height:120px; max-height:220px; border-radius:10px 0 0 10px; overflow:hidden; }
.products-grid.gnag-layout--list .product-card .product-card-image img { width:100%; height:100%; object-fit:cover; }
.products-grid.gnag-layout--list .product-card .product-card-body { padding:.85rem 1.1rem; display:flex; flex-direction:column; justify-content:center; gap:.3rem; }
.products-grid.gnag-layout--list .product-card .product-card-desc { flex:0 1 auto; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.5rem; }
.products-grid.gnag-layout--list .product-card .product-card-footer { margin-top:.5rem; border-top:none; padding-top:0; }
.products-grid.gnag-layout--list .product-card .product-card-title { margin-bottom:.2rem; }
@media(max-width:640px){
  .products-grid.gnag-layout--list .product-card { grid-template-columns:1fr; }
  .products-grid.gnag-layout--list .product-card .product-card-image { border-radius:10px 10px 0 0; min-height:160px; max-height:none; aspect-ratio:16/9 !important; }
}

/* Compact list */
.products-grid.gnag-layout--list-compact { grid-template-columns:1fr; gap:0; align-items:start; }
.products-grid.gnag-layout--list-compact .product-card { display:flex; flex-direction:row !important; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.07); border-radius:0; background:transparent; box-shadow:none; min-height:0; height:auto; overflow:visible; }
.products-grid.gnag-layout--list-compact .product-card:hover { transform:none !important; box-shadow:none !important; }
.products-grid.gnag-layout--list-compact .product-card.reveal { transform:none !important; }
.products-grid.gnag-layout--list-compact .product-card .product-card-image-link { flex-shrink:0; width:52px; height:52px; display:block; border-radius:6px; overflow:hidden; }
.products-grid.gnag-layout--list-compact .product-card .product-card-image { width:52px; height:52px; min-height:0; flex-shrink:0; border-radius:6px; overflow:hidden; aspect-ratio:1/1 !important; }
.products-grid.gnag-layout--list-compact .product-card .product-card-image img { width:100%; height:100%; object-fit:cover; }
.products-grid.gnag-layout--list-compact .product-card .product-card-body { padding:0; flex:1; min-width:0; }
.products-grid.gnag-layout--list-compact .product-card .product-card-title { font-size:.88rem; margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.products-grid.gnag-layout--list-compact .product-card .product-card-desc { display:none; }
.products-grid.gnag-layout--list-compact .product-card .product-card-footer { margin-top:.2rem; border-top:none; padding-top:0; flex-wrap:wrap; gap:.35rem; align-items:center; }
.products-grid.gnag-layout--list-compact .product-card .product-card-footer .btn { padding:.2rem .65rem; font-size:.72rem; }

/* Timeline */
.products-grid.gnag-layout--timeline { display:flex; flex-direction:column; gap:0; position:relative; }
.products-grid.gnag-layout--timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(201,168,76,.25); transform:translateX(-50%); }
.products-grid.gnag-layout--timeline .product-card { width:calc(50% - 30px); margin-bottom:var(--gnag-gap); position:relative; }
.products-grid.gnag-layout--timeline .product-card:nth-child(odd)  { align-self:flex-start; margin-right:auto; }
.products-grid.gnag-layout--timeline .product-card:nth-child(even) { align-self:flex-end; margin-left:auto; }
.products-grid.gnag-layout--timeline .product-card::after { content:''; position:absolute; top:24px; width:12px; height:12px; border-radius:50%; background:#c9a84c; }
.products-grid.gnag-layout--timeline .product-card:nth-child(odd)::after  { right:-39px; }
.products-grid.gnag-layout--timeline .product-card:nth-child(even)::after { left:-39px; }
@media(max-width:700px){
  .products-grid.gnag-layout--timeline::before { display:none; }
  .products-grid.gnag-layout--timeline .product-card { width:100%; margin-left:0!important; margin-right:0!important; }
  .products-grid.gnag-layout--timeline .product-card::after { display:none; }
}

/* Carousel (flex-basis set dynamically) */
.products-grid.gnag-layout--carousel { display:flex; gap:var(--gnag-gap); overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; padding-bottom:14px; -webkit-overflow-scrolling:touch; align-items:stretch; }
.products-grid.gnag-layout--carousel::-webkit-scrollbar { height:4px; }
.products-grid.gnag-layout--carousel::-webkit-scrollbar-track { background:rgba(255,255,255,.05); border-radius:4px; }
.products-grid.gnag-layout--carousel::-webkit-scrollbar-thumb { background:#c9a84c; border-radius:4px; }
.products-grid.gnag-layout--carousel .product-card.reveal { transform:none !important; }
.products-grid.gnag-layout--carousel .product-card .product-card-image-link { display:block; flex-shrink:0; }
.products-grid.gnag-layout--carousel .product-card .product-card-body { flex:1; display:flex; flex-direction:column; }
.products-grid.gnag-layout--carousel .product-card .product-card-desc { flex:1; }
.products-grid.gnag-layout--carousel .product-card .product-card-footer { margin-top:auto; }



/* ============================================================
   EXTRACTED INLINE STYLES — auto-migrated from PHP templates
   ============================================================ */

/* ── Body & Skip Link ─────────────────────────────────────── */
body { background: #120608; }

.gnag-skip-link {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--accent);
  color: #0d0608;
  padding: .5rem 1rem;
  border-radius: .4rem;
  font-size: .85rem;
  font-weight: 600;
  z-index: 999;
  transition: top .3s;
}
.gnag-skip-link:focus  { top: 1rem; }

/* ── Promo Banner ─────────────────────────────────────────── */
#gnag-promo-banner {
  padding: .5rem 1rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.gnag-promo-banner-link {
  background: rgba(0,0,0,.18);
  padding: .2rem .7rem;
  border-radius: 4px;
  font-size: .78rem;
  text-decoration: none;
  white-space: nowrap;
}
.gnag-promo-banner-dismiss {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  opacity: .7;
}

/* ── Header mobile nav user ───────────────────────────────── */
.mobile-create-account-link {
  font-size: .875rem;
  color: var(--muted);
  padding: .4rem 0;
  display: block;
}
.mobile-quote-wrap { padding-top: .5rem; }
.mobile-quote-btn  { margin-top: .25rem; }
.btn-login-gap     { gap: .35rem; }

/* Footer social label */
.footer-social-label {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .5rem;
}

/* ── Search skeleton ──────────────────────────────────────── */
.gnag-sd-skel-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
}
.gnag-sd-skel-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gnag-sd-skel-title {
  height: 13px;
  border-radius: 3px;
}
.gnag-sd-skel-sub {
  height: 10px;
  width: 35%;
  border-radius: 3px;
}

/* ── hero-bg-hero (front-page no-image fallback) ─────────── */
.bfr-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── Artistry section ─────────────────────────────────────── */
.gnag-artistry-section { background: var(--bg); }
.gnag-two-col-text-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.artistry-eyebrow {
  margin-bottom: 1rem;
  display: inline-block;
}
.artistry-title  { margin-top: 0; }
.artistry-desc   { margin-bottom: 2rem; }

/* image layout helpers */
.art-img-wrap {
  border-radius: var(--r);
  overflow: hidden;
}
.art-img-full   { width: 100%; display: block; object-fit: cover; }
.art-img-h280   { height: 280px; }
.art-img-h380   { height: 380px; }
.art-img-h420   { height: 420px; }
.art-img-h220   { height: 220px; }
.art-img-h200   { height: 200px; }
.art-img-h180   { height: 180px; }
.art-img-col    { display: flex; flex-direction: column; gap: .875rem; }
.art-img-col > .art-img-wrap { flex: 1; }

.art-grid-asymmetric {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: .875rem;
}
.art-grid-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .875rem;
}
.art-grid-thumbs {
  display: grid;
  gap: .875rem;
  margin-bottom: .875rem; /* when used above another row */
}

/* Process section */
.process-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.process-img-placeholder {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--border);
}
.process-img-placeholder svg { opacity: .35; }
.process-img-placeholder p   {
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  padding: 0 1rem;
}
.process-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.process-heading {
  font-size: clamp(1.5rem,3vw,2.25rem);
  margin: .6rem 0 1rem;
}
.process-body {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.process-features { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 2rem; }
.process-feature  { display: flex; align-items: flex-start; gap: .75rem; }
.process-feature-icon { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }
.process-feature-title { font-size: .9rem; display: block; margin-bottom: .2rem; }
.process-feature-desc  { color: var(--muted); font-size: .84rem; }

/* About company section */
.about-section     { border-top: none; }
.about-img         { width: 100%; height: 380px; object-fit: cover; }
.about-heading     { font-size: clamp(1.5rem,3vw,2.25rem); margin: .6rem 0 1.25rem; }
.about-desc        { color: var(--muted); line-height: 1.8; margin-bottom: 1.75rem; }
.about-stats-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 2rem; }
.about-stat-card   { padding: 1rem; text-align: center; }
.about-stat-val    { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent); display: block; }
.about-stat-lbl    { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.about-cta-row     { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Products showcase */
.products-showcase {
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.products-header    { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.products-eyebrow   { display: block; text-align: center; }
.products-title     { font-size: clamp(1.5rem,3vw,2.25rem); margin: .6rem 0 2.5rem; text-align: center; }
.products-view-all  { text-align: center; margin-top: 2.5rem; }
.gnag-pr-dots       { display: none; }

/* Roots section */
.roots-heading { font-size: clamp(1.5rem,3.5vw,2.5rem); margin-bottom: .75rem; text-align: center; }
.roots-text-center { text-align: center; margin-bottom: 3rem; }
.roots-link { color: inherit; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.roots-desc-text { text-align: center; }
.roots-icon-accent { font-size: 1.75rem; margin-bottom: 1rem; color: var(--accent); text-align: center; }
.roots-icon-emoji  { font-size: 1.75rem; margin-bottom: 1rem; text-align: center; }
.roots-card-link {
  color: inherit;
  text-decoration: none;
}
.roots-card-heading { font-size: 1.1rem; margin-bottom: 1.1rem; text-align: center; }

/* Reviews section */
.reviews-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.reviews-header     { text-align: center; margin-bottom: 3rem; }
.reviews-heading    { font-size: clamp(1.5rem,3.5vw,2.25rem); margin-bottom: .75rem; }
.reviews-grid       { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1.5rem; }
.review-card        { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.review-stars       { display: flex; gap: .2rem; color: #c8a96e; font-size: 1.1rem; }
.review-body        { color: var(--muted); font-size: .875rem; line-height: 1.75; margin: 0; flex: 1; }
.review-footer      { display: flex; align-items: center; gap: .65rem; border-top: 1px solid var(--border); padding-top: .875rem; }
.review-avatar      {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.review-name        { font-size: .875rem; font-weight: 600; color: var(--fg); display: block; }
.review-date        { font-size: .74rem; color: var(--muted); }
.reviews-view-all   { text-align: center; margin-top: 2rem; }

/* CTA Banner */
.cta-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

/* ── Checkout Success ─────────────────────────────────────── */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.glow-orb-1 {
  position: fixed;
  width: 320px;
  height: 320px;
  background: rgba(76,175,125,.1);
  top: 40px;
  left: 40px;
  animation: orb1 10s ease-in-out infinite;
}
.glow-orb-2 {
  position: fixed;
  width: 380px;
  height: 380px;
  background: rgba(201,168,76,.08);
  bottom: 40px;
  right: 40px;
  animation: orb2 12s ease-in-out infinite;
}
.checkout-main {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.checkout-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  position: relative;
  z-index: 1;
}
.checkout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: rgba(76,175,125,.1);
  border: 2px solid rgba(76,175,125,.3);
  margin-bottom: 1.5rem;
}
.checkout-title { font-size: 1.75rem; font-weight: 700; margin-bottom: .5rem; }
.checkout-body  { color: var(--muted-foreground); margin-bottom: 1.5rem; line-height: 1.7; }
.checkout-details {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.checkout-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
}
.checkout-detail-row:last-child { border-bottom: none; }
.checkout-detail-label { color: var(--muted-foreground); }
.checkout-detail-mono  { font-family: monospace; font-size: .75rem; }
.checkout-status-ok    { color: #4caf7d; font-weight: 700; }
.checkout-notice {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  color: var(--muted-foreground);
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: .5rem;
  padding: .875rem;
  margin-bottom: 1.75rem;
  text-align: left;
}
.checkout-notice-icon  { color: var(--accent); flex-shrink: 0; }
.checkout-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn-flex-center  { flex: 1; justify-content: center; gap: .4rem; }

/* ── Legal pages (privacy / terms / policy) ───────────────── */
.legal-content-wrap { max-width: 780px; margin: 0 auto; }
.legal-date         { color: var(--muted); font-size: .9rem; }
.legal-contact-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem;
  margin-top: 1rem;
}
.legal-contact-box p { margin: 0 0 .5rem; }
.legal-contact-box p:last-child { margin: 0; }
.legal-contact-muted { color: var(--muted); margin: 0 0 .3rem; }
.legal-contact-muted-last { color: var(--muted); margin: 0; }
.legal-contact-name  { color: var(--accent); }
.legal-contact-link  { color: var(--accent); }
.legal-footer-bar {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Policy single page ───────────────────────────────────── */
.policy-hero {
  background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%);
  padding: 5rem 0 3.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.policy-hero-container { max-width: 820px; position: relative; z-index: 1; }
.policy-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.policy-breadcrumb-link { color: var(--muted); transition: color .2s; }
.policy-breadcrumb-link:hover { color: var(--accent); }
.policy-breadcrumb-current { color: var(--fg); }
.policy-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.policy-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: .75rem;
  padding-bottom: .1em;
  background: linear-gradient(135deg,var(--hero-grad-1) 0%,var(--hero-grad-2) 55%,var(--hero-grad-1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  overflow: visible;
}
.policy-excerpt { font-size: 1.05rem; color: var(--muted); line-height: 1.7; max-width: 640px; }
.policy-last-updated { font-size: .78rem; color: var(--muted); margin-top: 1rem; }
.policy-content-section { padding: 4rem 0 6rem; }
.policy-content-container { max-width: 820px; }
.policy-content {
  color: var(--fg);
  line-height: 1.85;
  font-size: .97rem;
}
.policy-back-bar {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.policy-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  color: var(--muted);
  transition: color .2s;
}
.policy-back-link:hover { color: var(--accent); }

/* ── Promo banner base (color set dynamically via inline style) ── */
.gnag-promo-banner-base {
  background: var(--banner-bg, #c8a96e);
  color: var(--banner-fg, #0d0608);
  padding: .5rem 1rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.gnag-promo-banner-text { color: inherit; }
.gnag-promo-banner-link {
  background: rgba(0,0,0,.18);
  padding: .2rem .7rem;
  border-radius: 4px;
  font-size: .78rem;
  text-decoration: none;
  white-space: nowrap;
}
.gnag-promo-banner-dismiss {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  opacity: .7;
}

/* Guest popup hidden state */
.gnag-gpop-hidden { display: none; }

/* Art grid margin-bottom variant */
.art-mb { margin-bottom: .875rem; }

/* Roots card hover effect (CSS instead of inline onmouseover) */
.roots-card-link {
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.roots-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  border-color: rgba(200,169,110,.45);
}

/* btn-flex-center */
.btn-flex-center {
  flex: 1;
  justify-content: center;
  gap: .4rem;
  display: inline-flex;
  align-items: center;
}


/* ============================================================
   REMAINING EXTRACTED STYLES — second pass
   ============================================================ */

/* Section backgrounds */
.section-bg-alt-bordered { background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-bg-alt-top      { background:var(--bg-alt); border-top:1px solid var(--border); }
.section-bg              { background:var(--bg); }

/* Heading scale */
.heading-xl-center    { font-size:clamp(1.5rem,3.5vw,2.5rem); margin-bottom:.75rem; text-align:center; }
.heading-lg-center    { font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:.75rem; text-align:center; }
.heading-lg-center-tight { font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:.5rem; text-align:center; }
.heading-lg-mb        { font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:1.25rem; }
.heading-lg-tight     { font-size:clamp(1.5rem,3vw,2.25rem); margin:.6rem 0 1rem; }
.heading-lg-tight-alt { font-size:clamp(1.4rem,2.8vw,2rem); margin:0 0 .75rem; font-weight:700; }
.heading-lg           { font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:.5rem; }
.heading-lg-spaced    { font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:.75rem; }
.heading-xl-spaced    { font-size:clamp(1.5rem,3.5vw,2.25rem); margin-bottom:.75rem; }
.heading-sm           { font-size:1.2rem; margin-bottom:.4rem; }
.heading-xs           { font-size:1.1rem; margin-bottom:.3rem; }
.heading-xs-center    { font-size:1.1rem; margin-bottom:1.1rem; text-align:center; }
.heading-xxs          { font-size:1.05rem; margin-bottom:.3rem; }
.heading-xxs-no-margin{ font-size:1.05rem; margin:0; }
.custom-heading-xl    { font-size:clamp(1.75rem,4vw,2.75rem); margin:.5rem 0 .75rem; }

/* Text utilities */
.text-muted-body  { color:var(--muted); line-height:1.8; margin-bottom:1.5rem; }
.text-muted-tight { color:var(--muted); line-height:1.7; margin:0; }
.text-muted-sm    { color:var(--muted); font-size:.84rem; line-height:1.7; margin:0; }
.text-muted-xs    { font-size:.82rem; color:var(--muted); }
.text-muted-italic{ font-size:.8rem; color:var(--muted); font-style:italic; }
.text-accent-xs   { font-size:.81rem; color:var(--accent); }
.text-accent-display { font-size:.78rem; color:var(--accent); font-family:var(--font-display); }
.text-muted       { color:var(--muted); }
.text-accent      { color:var(--accent); }
.text-fg          { color:var(--fg); }
.text-destructive { color:var(--destructive); }
.text-tiny-muted  { font-size:.72rem; opacity:.7; }
.text-green       { color:#4caf50; }

/* Layout helpers */
.section-header-center    { text-align:center; margin-bottom:3rem; }
.section-header-center-sm { text-align:center; margin-bottom:2rem; }
.section-header-center-xs { text-align:center; margin-bottom:1.5rem; }
.section-desc-constrained { max-width:600px; margin:0 auto; }
.section-desc-narrow      { max-width:540px; margin:0 auto; }
.section-desc-xs          { max-width:480px; margin:0 auto; }
.section-mt-4             { margin-top:4rem; }
.section-mb-25            { margin-bottom:2.5rem; }
.mb-1   { margin-bottom:1rem; }
.mb-15  { margin-bottom:1.5rem; }
.mb-125 { margin-bottom:1.25rem; }
.mb-75  { margin-bottom:.75rem; }
.mb-5   { margin-bottom:.5rem; }
.mb-875 { margin-bottom:.875rem; }
.mb-175 { margin-bottom:1.75rem; }
.mt-75  { margin-top:.75rem; }
.mt-5   { margin-top:.5rem; }
.d-block { display:block; }
.hidden  { display:none; }
.cursor-pointer { cursor:pointer; }
.width-auto { width:auto; }
.self-start { align-self:flex-start; }
.border-top-divider { border-top:1px solid var(--border); }
.pos-relative-clip { position:relative; overflow:hidden; }
.flex-no-shrink    { flex-shrink:0; }
.orb-fixed         { position:fixed; }
.link-accent-underline { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.accent-checkbox   { accent-color:var(--accent); }

/* Grids */
.gnag-two-col-text-image       { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.grid-two-col-gap15            { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; }
/* Used on page-about.php "What We Create": when the Digital Services card
   is hidden via Page Visibility, center the remaining single card instead
   of leaving an empty second column. */
.grid-two-col-gap15--single    { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
.grid-two-col-gap1             { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-two-col-centered         { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:700px; margin:0 auto; }
.grid-three-col-text-center    { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.grid-three-col-gap15          { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-auto-fit-280             { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
.grid-auto-fit-280-lg          { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:3rem; }
.grid-heritage                 { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:start; }
.grid-export                   { display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; align-items:center; }
.grid-contact-layout           { display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; align-items:start; }
.grid-empty-state              { grid-column:1/-1; text-align:center; padding:4rem 1rem; color:var(--muted); }
.grid-why-cards                { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }

/* Image helpers */
.art-img-wrap   { border-radius:var(--r); overflow:hidden; }
.mb-15.art-img-wrap { margin-bottom:1.5rem; }
.art-img-full   { width:100%; display:block; object-fit:cover; }
.img-cover      { width:100%; height:100%; object-fit:cover; }
.img-cover.img-h260 { height:260px; }
.img-cover.img-h360 { height:360px; }
.gallery-main-img { width:100%; max-height:520px; object-fit:contain; display:block; background:var(--card); }

/* Flex helpers */
.flex-col-gap65  { display:flex; flex-direction:column; gap:.65rem; }
.flex-col-gap2   { display:flex; flex-direction:column; gap:.2rem; }
.flex-col-gap1   { display:flex; flex-direction:column; gap:1rem; }
.flex-col-gap75  { display:flex; flex-direction:column; gap:.75rem; }
.flex-row-gap65  { display:flex; align-items:center; gap:.65rem; }
.flex-row-gap15-wrap { display:flex; gap:1.5rem; flex-wrap:wrap; }
.flex-row-gap65-wrap { display:flex; gap:.65rem; flex-wrap:wrap; }
.policies-chip-row { justify-content:center; }
.flex-tags       { display:flex; flex-wrap:wrap; gap:.4rem; }
.flex-tags-sm    { display:flex; flex-wrap:wrap; gap:.3rem; }
.flex-tags-xs    { display:flex; flex-wrap:wrap; gap:.25rem; }
.flex-col-contact-details { display:flex; flex-direction:column; gap:.4rem; font-size:.8rem; color:var(--muted); text-align:left; }
.feature-row     { display:flex; align-items:flex-start; gap:.75rem; }
.feature-row-icon { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; line-height: 1.4; }
.feature-row-title { font-size:.875rem; color:var(--fg); display:block; }
.feature-row-desc  { font-size:.81rem; color:var(--muted); }

/* Cards */
.card-pad-center    { padding:2rem; text-align:center; }
.card-pad-175       { padding:1.75rem; }
.card-pad-2         { padding:2rem; }
.card-pad-15        { padding:1.5rem; }
.card-pad-h15       { padding:1.25rem 1.5rem; }
.card-pad-15-center { padding:1.5rem; text-align:center; }
.card-pad-225       { padding:2.25rem; }
.card-pad-inner     { padding:1.25rem; }
.card-legacy-pad    { padding:2rem; text-align:center; border-color:rgba(200,169,110,.3); }
.card-flex-col      { display:flex; flex-direction:column; gap:1rem; }
/* Certificates & Registrations — plain, no card box/border around each
   certificate (matches the Gallery page's borderless image treatment). */
.grid-auto-fit-280-lg .feature-card { background:none; border:none; border-radius:0; padding:0; }
.grid-auto-fit-280-lg .feature-card:hover { transform:none; box-shadow:none; border-color:transparent; }
.card-export-enquiry { margin-top:1rem; padding:1.25rem 1.5rem; border-color:rgba(200,169,110,.35); }
.card-accent-border  { border:1px solid rgba(200,169,110,.25); }
.card-section-heading { color:var(--accent); font-size:1rem; margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem; }

/* Avatar / portraits */
.avatar-circle-lg { width:3.5rem; height:3.5rem; border-radius:50%; background:var(--accent-light); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 1rem; }
.avatar-portrait  { width:5rem; height:5rem; border-radius:50%; overflow:hidden; border:2px solid var(--accent-border); margin:0 auto 1.25rem; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; }
.legacy-portrait-placeholder { font-size:2rem; opacity:.5; }

/* Stats */
.stat-val    { font-family:var(--font-display); font-size:1.75rem; font-weight:700; color:var(--accent); display:block; margin-bottom:.25rem; }
.stat-lbl    { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.stat-lbl-xs { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* Contact bar */
.contact-bar-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--fg); display:block; margin-bottom:.25rem; }
.contact-bar-value { font-size:.84rem; color:var(--muted); }

/* Legacy section */
.legacy-name    { font-size:1.1rem; margin-bottom:.2rem; color:var(--fg); }
.legacy-tribute { font-size:.84rem; color:var(--muted); line-height:1.75; border-top:1px solid var(--border); padding-top:.875rem; margin:0; }
.about-role-label { font-size:.8rem; color:var(--accent); margin-bottom:1rem; }

/* Marquee */
.marquee-outer   { margin-top:3rem; overflow:hidden; position:relative; mask-image:linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); }
.marquee-label   { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); text-align:center; margin-bottom:.85rem; }
.marquee-inner   { display:flex; gap:1.5rem; white-space:nowrap; }
.marquee-wrap    { overflow:hidden; position:relative; mask-image:linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); }
.marquee-country-tag { display:inline-flex; align-items:center; gap:.35rem; background:var(--card); border:1px solid var(--border); border-radius:2rem; padding:.3rem .85rem; font-size:.78rem; color:var(--fg); }

/* Cert */
.cert-tag           { font-size:.72rem; padding:.25rem .7rem; background:var(--card); border:1px solid var(--border); border-radius:2rem; color:var(--muted); }
.cert-icon-fallback { font-size:3rem; line-height:1; }
.cert-title         { color:var(--fg); font-size:1rem; }
.cert-number        { font-size:.78rem; color:var(--accent); font-family:monospace; }

/* Store */
.store-name-heading { font-size:1.15rem; margin:0; }
.store-detail-col   { display:flex; flex-direction:column; gap:1rem; }
.store-detail-row   { display:flex; align-items:flex-start; gap:.65rem; }
.store-detail-icon  { color:var(--accent); font-size:1.05rem; }
.store-address-text { color:var(--muted); font-size:.9rem; line-height:1.6; margin:0; }
.store-phone-link   { color:var(--fg); font-size:.9rem; text-decoration:none; }
.store-icon         { color:var(--accent); font-size:1.05rem; flex-shrink:0; }
.hours-heading      { font-size:.85rem; margin-bottom:.75rem; display:flex; align-items:center; gap:.4rem; }
.hours-row          { display:flex; justify-content:space-between; font-size:.83rem; color:var(--muted); padding:.3rem 0; border-bottom:1px solid var(--border); }
.hours-list         { display:flex; flex-direction:column; gap:.65rem; font-size:.85rem; }
.hours-row-space    { display:flex; justify-content:space-between; align-items:center; padding-bottom:.65rem; border-bottom:1px solid var(--border); }
.self-start         { align-self:flex-start; }

/* Map */
.map-container        { margin-top:3rem; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); }
.map-container-offset { margin-top:2.5rem; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); }
.map-iframe           { border:0; display:block; filter:grayscale(80%) invert(90%) contrast(88%); }

/* Contact card items */
.contact-link         { font-size:.85rem; color:var(--fg); text-decoration:none; }
.contact-value        { font-size:.85rem; color:var(--fg); }
.contact-accent-label { font-size:.85rem; color:var(--accent); margin-top:.3rem; }
.sidebar-stack        { display:flex; flex-direction:column; gap:1.25rem; }
.sidebar-card-heading { font-size:1rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; }
.global-reach-box     { margin-top:3.5rem; padding:2.5rem; background:var(--bg-alt); border-radius:var(--r); border:1px solid var(--border); }
.global-reach-header  { text-align:center; margin-bottom:1.75rem; }
.global-reach-eyebrow { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:.5rem; }
.global-reach-heading { font-size:clamp(1.1rem,2.5vw,1.5rem); margin:0 0 .5rem; }
.global-reach-desc    { font-size:.84rem; color:var(--muted); max-width:480px; margin:0 auto; }
.global-reach-cta     { text-align:center; margin-top:1.5rem; }

/* Contact form extras */
.btn-submit-spacing { margin-top:.25rem; padding:.9rem; }
.btn-loading-inner  { display:none; align-items:center; gap:.4rem; }
.btn-text           { display:inline; }
.btn-loading        { display:none; align-items:center; gap:.4rem; }
.divider-line       { flex:1; height:1px; background:var(--border); }
.heading-row-with-gap { display:flex; align-items:center; gap:.6rem; }
.product-card-tags  { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.72rem; color:var(--muted); margin-top:.3rem; }
.card-thumb-bar     { height:100px; display:flex; align-items:flex-end; padding:.5rem .7rem; background:linear-gradient(135deg,var(--card),var(--bg-alt)); flex-shrink:0; }
.divider-text       { font-size:.75rem; color:var(--muted); white-space:nowrap; }
.divider-row        { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }

/* What to expect card */
.cta-banner-sm        { padding:1.75rem; border-radius:var(--r); }
.expect-heading       { color:#0d0608; font-size:1.05rem; margin-bottom:1.1rem; }
.expect-step          { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.875rem; }
.expect-step-num      { width:1.4rem; height:1.4rem; border-radius:50%; background:rgba(13,6,8,.2); color:#0d0608; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.expect-step-title    { color:#0d0608; font-size:.87rem; display:block; }
.expect-step-desc     { color:rgba(13,6,8,.7); font-size:.8rem; }
.export-card-heading  { font-size:1rem; margin-bottom:.85rem; display:flex; align-items:center; gap:.4rem; }
.export-row           { display:flex; align-items:center; gap:.5rem; font-size:.81rem; color:var(--fg); }

/* Cookie banner */
.cookie-inner       { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; }
.cookie-text-wrap   { display:flex; align-items:flex-start; gap:.75rem; flex:1; min-width:260px; }
.cookie-icon        { font-size:1.3rem; line-height:1; flex-shrink:0; margin-top:.1rem; }
.cookie-title       { font-size:.82rem; color:var(--fg); font-weight:600; margin:0 0 .2rem; }
.cookie-desc        { font-size:.77rem; color:var(--muted); line-height:1.6; margin:0; }
.cookie-actions     { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.btn-cookie-reject  { padding:.45rem 1.1rem; background:transparent; border:1px solid var(--border); border-radius:var(--r-sm); font-size:.82rem; cursor:pointer; color:var(--muted); transition:border-color .15s,color .15s; }
.btn-cookie-reject:hover { border-color:var(--fg); color:var(--fg); }
.btn-cookie-accept  { padding:.45rem 1.25rem; background:var(--accent); border:1px solid var(--accent); border-radius:var(--r-sm); font-size:.82rem; font-weight:600; cursor:pointer; color:#0d0608; transition:background .15s; }
.btn-cookie-accept:hover { background:var(--accent-h); }
.cookie-banner      { display:none; position:fixed; left:0; right:0; bottom:0; z-index:9990; background:var(--card); border-top:1px solid var(--border); box-shadow:0 -8px 32px rgba(0,0,0,.4); opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease; }
.cookie-banner.show { opacity:1; transform:translateY(0); }

/* 404 */
.notfound-heading { font-size:1.75rem; margin-bottom:1rem; }
.notfound-body    { color:var(--muted); margin-bottom:2.5rem; }
.notfound-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* page.php */
.page-thumb-wrap   { border-radius:var(--radius); overflow:hidden; margin-bottom:2.5rem; }
/* Featured image inside .page-thumb-wrap (page.php) — replaces a
   style="" attribute previously passed to the_post_thumbnail(). */
.page-thumb-wrap img { width:100%; max-height:460px; object-fit:cover; }
.page-content-body { color:var(--muted); line-height:1.85; font-size:1.05rem; }

/* single.php */
.single-hero-overlay  { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(15,8,3,.55) 0%,rgba(15,8,3,.95) 100%); }
.single-hero-inner    { position:relative; z-index:1; max-width:860px; margin:0 auto; }
.single-breadcrumb    { font-size:.8rem; color:rgba(255,255,255,.6); margin-bottom:1.25rem; display:flex; gap:.5rem; align-items:center; }
.single-breadcrumb-link { color:rgba(255,255,255,.6); }
.single-breadcrumb-sep  { color:rgba(255,255,255,.4); }
.single-cat-link      { text-decoration:none; display:inline-block; margin-bottom:.75rem; }
.single-title         { font-size:clamp(1.75rem,4.5vw,3rem); margin:0 0 1.25rem; line-height:1.2; }
.single-meta          { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; font-size:.83rem; color:rgba(255,255,255,.7); }
.single-content-section { padding:4rem 0 6rem; }
.single-content-wrap    { max-width:800px; margin:0 auto; }
.single-content-body    { color:var(--fg); line-height:1.9; font-size:1.05rem; }
.single-tags-bar        { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; gap:.5rem; flex-wrap:wrap; }
.single-tags-label      { font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.tag-pill               { display:inline-block; font-size:.75rem; padding:.25rem .75rem; border:1px solid var(--border); border-radius:2rem; color:var(--muted); transition:all .2s; }
.tag-pill:hover         { border-color:var(--accent); color:var(--accent); }
.single-nav-grid        { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--border); }
.single-nav-card        { display:block; border:1px solid var(--border); border-radius:var(--r-sm); padding:1rem 1.25rem; text-decoration:none; transition:border-color .2s; }
.single-nav-card:hover  { border-color:var(--accent-border, var(--accent)); }
.single-nav-label       { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; }
.single-nav-title       { font-size:.9rem; font-weight:600; color:var(--fg); }
.single-back-center     { margin-top:2.5rem; text-align:center; }

/* gallery single */
.gallery-hero-bg       { background:var(--bg-alt); border-bottom:1px solid var(--border); }
.gallery-hero-inner    { max-width:1100px; margin:0 auto; padding:4rem 2rem 0; }
.gallery-breadcrumb    { font-size:.8rem; color:var(--muted); margin-bottom:2rem; display:flex; gap:.5rem; align-items:center; }
.gallery-breadcrumb-link { color:var(--muted); transition:color .2s; }
.gallery-breadcrumb-link:hover { color:var(--accent); }
.gallery-thumb-item:hover { border-color:var(--accent); }
.gallery-breadcrumb-sep  { color:var(--muted); opacity:.6; }
.gallery-content-section { padding:3rem 0 5rem; }
.gallery-content-inner   { max-width:1100px; margin:0 auto; padding:0 2rem; }
.gallery-layout-grid     { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.gallery-main-img-wrap   { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin-bottom:1rem; }
.gallery-thumbs          { display:flex; gap:.5rem; flex-wrap:wrap; }
.gallery-cat-link        { text-decoration:none; display:inline-block; margin-bottom:.6rem; }
.gallery-title           { font-size:clamp(1.6rem,3.5vw,2.5rem); margin:0 0 .75rem; line-height:1.2; }
.gallery-medium-badge    { display:inline-block; font-size:.75rem; font-weight:700; padding:.3rem .85rem; border-radius:2rem; }
.gallery-price           { display:inline-block; margin-left:.75rem; font-size:1.1rem; font-weight:700; color:var(--accent); }
.gallery-desc            { color:var(--muted); line-height:1.8; font-size:.95rem; margin-bottom:1.5rem; }
.gallery-details-label   { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:.4rem; }
.gallery-detail-row      { display:flex; align-items:flex-start; gap:.5rem; font-size:.88rem; color:var(--muted); margin-bottom:.4rem; }
.gallery-detail-icon     { color:var(--accent); margin-top:.05rem; }
.gallery-purchase-box    { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); padding:1rem 1.25rem; }
.gallery-purchase-row    { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; padding:.35rem 0; border-bottom:1px solid var(--border); }
.gallery-purchase-label  { color:var(--muted); font-weight:600; }
.gallery-purchase-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.gallery-purchase-note   { font-size:.78rem; color:var(--muted); margin-top:.75rem; }
.gallery-back-bar        { margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--border); text-align:center; }

/* single product listing pages (breadcrumb / filter / card) */
.breadcrumb-bar  { font-size:.78rem; color:var(--muted); margin-bottom:.75rem; display:flex; gap:.5rem; align-items:center; }
.breadcrumb-link { color:var(--muted); transition:color .2s; }
.breadcrumb-link:hover { color:var(--accent); }
.product-hex-overlay { position:absolute; bottom:.6rem; left:.6rem; display:flex; align-items:center; gap:.35rem; background:rgba(0,0,0,.35); border-radius:4px; padding:.2rem .45rem; }
.hex-mono { font-size:.7rem; font-family:monospace; color:#fff; }
.product-name-link { color:inherit; text-decoration:none; }
.product-name-link-wrap { margin-bottom:.3rem; }
.product-subcat  { font-size:.78rem; color:var(--muted); margin-bottom:.4rem; }
.why-card        { border:1px dashed rgba(200,169,110,.4); border-radius:10px; padding:1.1rem 1.25rem; background:var(--card); }
.why-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.why-card-title  { font-weight:700; font-size:.9rem; color:var(--fg); }
.badge-accent    { background:var(--accent); color:#0d0608; font-size:.68rem; font-weight:800; padding:.15rem .5rem; border-radius:4px; }
.why-card-desc   { font-size:.78rem; color:var(--muted); margin:0; }
.why-card-actions { display:flex; gap:.5rem; align-items:center; margin-top:.25rem; }
.btn-cart-qty    { flex:1; background:rgba(200,169,110,.1); border:1px solid rgba(200,169,110,.25); color:var(--accent); }
.btn-cart-add    { background:var(--accent); color:#0d0608; border:none; border-radius:5px; padding:.3rem .65rem; cursor:pointer; }
.section-why-bg  { background:rgba(200,169,110,.04); border-top:1px solid rgba(200,169,110,.12); padding:2.5rem 0; }
.why-heading     { font-size:1.05rem; font-weight:700; margin:0 0 1.25rem; display:flex; align-items:center; gap:.4rem; }
.service-list-item  { font-size:.84rem; color:var(--muted); display:flex; flex-direction:column; gap:.15rem; padding-bottom:.65rem; border-bottom:1px solid var(--border); }
.service-list-title { color:var(--fg); font-size:.875rem; }

/* empty / loading states */
.empty-state-center   { text-align:center; padding:4rem 1rem; color:var(--muted); }
.empty-state-icon     { opacity:.35; margin-bottom:1rem; display:block; margin-left:auto; margin-right:auto; }
.empty-state-heading  { font-size:1.1rem; margin-bottom:.5rem; }
.empty-state-subtitle { font-size:1.05rem; }
.empty-state-body     { font-size:.85rem; }
.empty-heading        { font-size:1.25rem; color:var(--fg); margin-bottom:.5rem; }
.btn-group-center     { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.results-section-heading-wrap { margin-bottom:1.75rem; }
.results-count-badge  { opacity:.6; font-size:.8em; }

/* Search results */
.search-hero-section    { padding:3rem 0 2rem; }
.search-type-filters    { display:flex; gap:.5rem; justify-content:center; margin-top:1.25rem; flex-wrap:wrap; }
.search-input-wrap      { position:relative; flex:1; max-width:460px; }
.search-input-icon      { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); }
.search-input           { width:100%; padding:.65rem .9rem .65rem 2.4rem; border-radius:.5rem; border:1px solid var(--border); background:var(--card); color:var(--fg); font-size:.9rem; }
.btn-search-submit      { padding:.65rem 1.4rem; }
.search-results-area    { padding-top:1.5rem; min-height:40vh; }
.search-results-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.search-card-link       { text-decoration:none; display:flex; flex-direction:column; }
.search-card-thumb      { aspect-ratio:4/3; overflow:hidden; border-radius:.5rem .5rem 0 0; background:var(--bg-card); display:flex; align-items:center; justify-content:center; }
.search-thumb-placeholder-icon { opacity:.2; }
.search-card-body       { padding:.85rem 1rem 1rem; flex:1; display:flex; flex-direction:column; gap:.35rem; }
.search-card-type-badge { align-self:flex-start; font-size:.7rem; }
.search-card-title      { font-size:.975rem; font-weight:600; color:var(--fg); margin:0; line-height:1.35; }
.search-card-price      { font-size:.78rem; color:var(--accent); margin-top:auto; padding-top:.4rem; }
.search-back-bar        { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); text-align:center; }
.search-back-text       { color:var(--muted); margin-bottom:1rem; font-size:.9rem; }

/* Login */
.login-card-wrap     { width:100%; max-width:440px; }
.login-logo-center   { text-align:center; margin-bottom:1.5rem; }
.login-logo-link     { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.login-logo-name     { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--fg); }
.login-logo-sub      { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.login-heading       { text-align:center; font-family:var(--font-display); font-size:1.5rem; margin-bottom:.35rem; }
.login-subheading    { text-align:center; font-size:.84rem; color:var(--muted); margin-bottom:1.5rem; }
.otp-input           { letter-spacing:.5rem; font-size:1.5rem; text-align:center; }
.otp-input-field     { letter-spacing:.35rem; text-align:center; font-size:1.1rem; flex:1; }
.otp-label           { font-size:.75rem; color:var(--muted); }
.otp-row             { display:flex; gap:.5rem; }
.btn-otp-resend      { flex-shrink:0; padding:.55rem .9rem; background:transparent; border:1.5px solid var(--accent); color:var(--accent); border-radius:var(--r-sm); font-size:.83rem; cursor:pointer; transition:background .2s; }
.btn-otp-resend:hover { background:rgba(201,168,76,.1); }
.login-error.hidden  { display:none; }
.login-google-error.hidden { display:none; }
.login-remember-row  { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.login-remember-label{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--muted); cursor:pointer; }
.login-forgot-link   { font-size:.82rem; color:var(--accent); }
.btn-submit-lg       { padding:.9rem; font-size:.95rem; margin-bottom:1rem; }
.btn-pad-9           { padding:.9rem; }
.login-switch-text   { text-align:center; font-size:.84rem; color:var(--muted); }
.login-tc-note       { font-size:.72rem; margin-left:.4rem; color:var(--muted); }
.login-identifier-hint { font-size:.78rem; color:var(--muted); margin-top:.3rem; }
.login-tc-row        { display:flex; align-items:flex-start; gap:.65rem; font-size:.82rem; color:var(--muted); cursor:pointer; }
.login-tc-checkbox   { accent-color:var(--accent); width:15px; height:15px; flex-shrink:0; margin-top:.1rem; cursor:pointer; }
.login-resend-hint   { text-align:center; font-size:.83rem; color:var(--muted); margin-top:1rem; }
.login-resend-msg    { text-align:center; font-size:.82rem; color:var(--muted); margin-top:.4rem; }
.btn-link-accent     { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit; padding:0; }
.tab-switcher        { display:flex; background:var(--bg-alt); border-radius:var(--r-sm); padding:.25rem; margin-bottom:1.5rem; gap:.25rem; }
.tab-btn             { flex:1; padding:.55rem; border-radius:calc(var(--r-sm) - 2px); border:none; cursor:pointer; font-size:.875rem; font-weight:600; font-family:var(--font-body); transition:all .2s; background:transparent; color:var(--muted); }
.tab-btn--active     { background:var(--card); color:var(--fg); }
.google-btn-container { width:100%; min-height:44px; display:flex; justify-content:center; }
.login-google-error  { font-size:.78rem; color:var(--destructive); margin-top:.4rem; text-align:center; }

/* Gallery filter */
.gallery-filter-sublabel { font-size:.72rem; opacity:.75; display:block; margin-top:.25rem; }
.gallery-no-results      { display:none; text-align:center; padding:4rem 1rem; color:var(--muted); }
.gallery-empty-icon      { opacity:.3; display:block; margin:0 auto 1rem; }
.gallery-loading-state   { text-align:center; padding:5rem 1rem; color:var(--muted); }
.gallery-loading-icon    { margin:0 auto 1.25rem; display:block; opacity:.4; }
.gallery-loading-heading { font-size:1rem; font-weight:500; margin-bottom:.5rem; }
.gallery-loading-body    { font-size:.875rem; }
.card-eyebrow-accent     { color:var(--accent); font-size:1.1rem; letter-spacing:.1em; margin-bottom:1rem; }
.card-quote-text         { font-size:.875rem; color:var(--muted); line-height:1.7; margin-bottom:1.25rem; font-style:italic; }
.card-author-name        { font-size:.9rem; display:block; }
.card-author-role        { font-size:.78rem; color:var(--muted); }

/* Blog */
.blog-filter-tags { display:flex; gap:.55rem; flex-wrap:wrap; justify-content:center; margin-top:1.25rem; }

/* Product rating bar */
.rating-bar-fill { background:var(--accent); height:100%; border-radius:2px; }
.star-opacity    { opacity:.5; margin-bottom:.75rem; }

/* custom-orders dropdown */
.dropdown-relative  { position:relative; }
.dropdown-trigger   { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dropdown-chevron   { flex-shrink:0; transition:transform .2s; }
/* BUGFIX: this panel previously had no background/border/shadow/z-index at
   all, so toggling it to display:block made an invisible, see-through box
   — main.js's open/close logic worked, but there was nothing to see.
   Styled to match the theme's other floating menus (.gd-dd-panel /
   .gnag-sort-panel glass look) and given max-height + scroll since the
   Type of Work list can be long. */
.dropdown-menu      {
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:rgba(10,3,5,.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.9rem;
  padding:.4rem;
  box-shadow:0 16px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  z-index:60;
  max-height:280px;
  overflow-y:auto;
}
.dropdown-menu.open { display:block; }
.dropdown-option    { width:100%; display:flex; align-items:center; gap:.55rem; padding:.44rem .75rem; font-size:.83rem; }
.dropdown-sep       { height:1px; background:var(--border); margin:.4rem .35rem; }
.dropdown-empty     { padding:.75rem; font-size:.8rem; color:var(--muted); text-align:center; }
.form-submit-row    { display:flex; gap:.75rem; margin-top:.5rem; flex-wrap:wrap; }
.form-submit-btn    { flex:1; padding:1rem; font-size:.95rem; min-width:180px; }
.form-submit-inner  { display:flex; align-items:center; justify-content:center; gap:.45rem; }
.form-loading-inner { display:none; align-items:center; gap:.5rem; }
.form-note-center   { text-align:center; font-size:.75rem; color:var(--muted); margin-top:.875rem; }

/* Candle bar */
.candle-bar { display:flex; justify-content:center; gap:1.5rem; margin-bottom:2.5rem; opacity:.6; }

/* ============================================================
   UTILITY CLASSES — third pass
   ============================================================ */
.flex-between-wrap      { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.flex-row-gap35         { display:flex; align-items:center; gap:.35rem; }
.flex-row-gap3          { display:flex; gap:.3rem; }
.flex-row-gap4          { display:flex; align-items:center; gap:.4rem; }
.flex-row-gap4-wrap     { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.flex-row-gap5          { display:flex; gap:.5rem; }
.flex-row-gap5-wrap     { display:flex; gap:.5rem; flex-wrap:wrap; }
.flex-row-gap6          { display:flex; align-items:center; gap:.6rem; }
.flex-row-gap6-wrap     { display:flex; gap:.6rem; flex-wrap:wrap; }
.flex-row-gap75         { display:flex; align-items:center; gap:.75rem; }
.flex-col-gap4          { display:flex; flex-direction:column; gap:.4rem; }
.flex-col-gap5          { display:flex; flex-direction:column; gap:.5rem; }
.flex-col-gap6          { display:flex; flex-direction:column; gap:.6rem; }
.flex-col-gap25         { display:flex; flex-direction:column; gap:.25rem; }
.flex-col-gap45         { display:flex; flex-direction:column; gap:.45rem; }
.flex-col-gap85         { display:flex; flex-direction:column; gap:.85rem; }
.flex-1                 { flex:1; }
.flex-1-minw            { flex:1; min-width:0; }
.flex-gap5              { display:flex; gap:.5rem; }
.flex-between           { display:flex; align-items:center; justify-content:space-between; }
.jc-center              { justify-content:center; }
.jc-between             { justify-content:space-between; }
.ai-start               { align-items:start; }
.ai-end                 { align-items:flex-end; }
.ai-center              { align-items:center; }
.flex-gap85-mb85        { gap:.85rem; margin-bottom:.85rem; }
.flex-gap7-mb7          { gap:.7rem; margin-bottom:.7rem; }
.d-inline-flex          { display:inline-flex; }
.d-inline-block         { display:inline-block; }
.d-inline                { display:inline; }
.d-none-force           { display:none!important; }

/* Spacing extras */
.mb-0   { margin-bottom:0; }
.mb-2   { margin-bottom:.2rem; }
.mb-3   { margin-bottom:.3rem; }
.mb-4   { margin-bottom:.4rem; }
.mb-5   { margin-bottom:.5rem; }
.mb-6   { margin-bottom:.6rem; }
.mb-625 { margin-bottom:.625rem; }
.mb-65  { margin-bottom:.65rem; }
.mb-85  { margin-bottom:.85rem; }
.mb-875 { margin-bottom:.875rem; }
.mb-11  { margin-bottom:1.1rem; }
.mb-14  { margin-bottom:1.4rem; }
.mb-2r  { margin-bottom:2rem; }
.mt-1   { margin-top:.1rem; }
.mt-15  { margin-top:.15rem; }
.mt-2   { margin-top:.2rem; }
.mt-3   { margin-top:.3rem; }
.mt-35  { margin-top:.35rem; }
.mt-4   { margin-top:.4rem; }
.mt-5   { margin-top:.5rem; }
.mt-75  { margin-top:.75rem; }
.mt-875 { margin-top:.875rem; }
.mt-1r  { margin-top:1rem; }
.mt-11  { margin-top:1.1rem; }
.mt-125 { margin-top:1.25rem; }
.my-11  { margin-top:1.1rem; margin-bottom:1.1rem; }
.ml-auto { margin-left:auto; }
.ml-5   { margin-left:.5rem; }
.ml-35  { margin-left:.35rem; }
.mr-3   { margin-right:.3rem; }
.pt-25  { padding-top:.25rem; }
.py-1   { padding:.75rem 0; }
.min-w-150 { min-width:150px; }
.min-w-180 { min-width:180px; }
.max-w-380 { max-width:380px; }

/* Font size scale */
.fs-58  { font-size:.58rem; }
.fs-6   { font-size:.6rem; }
.fs-62  { font-size:.62rem; }
.fs-63  { font-size:.63rem; }
.fs-65  { font-size:.65rem; }
.fs-68  { font-size:.68rem; }
.fs-7   { font-size:.7rem; }
.fs-72  { font-size:.72rem; }
.fs-73  { font-size:.73rem; }
.fs-74  { font-size:.74rem; }
.fs-75  { font-size:.75rem; }
.fs-76  { font-size:.76rem; }
.fs-78  { font-size:.78rem; }
.fs-79  { font-size:.79rem; }
.fs-8   { font-size:.8rem; }
.fs-82  { font-size:.82rem; }
.fs-83  { font-size:.83rem; }
.fs-84  { font-size:.84rem; }
.fs-85  { font-size:.85rem; }
.fs-875 { font-size:.875rem; }
.fs-88  { font-size:.88rem; }
.fs-9   { font-size:.9rem; }
.fs-92  { font-size:.92rem; }
.fs-95  { font-size:.95rem; }
.fs-1   { font-size:1rem; }
.fs-11  { font-size:1.1rem; }
.fs-13  { font-size:1.3rem; }
.fs-135 { font-size:1.35rem; }
.fs-2   { font-size:2rem; }
.fs-3   { font-size:3rem; }
.fw-normal   { font-weight:400; }
.fw-semibold { font-weight:600; }
.fw-bold     { font-weight:700; }
.lh-1   { line-height:1; }
.lh-15  { line-height:1.5; }
.lh-155 { line-height:1.55; }
.ws-nowrap { white-space:nowrap; }
.ws-pre    { white-space:pre-line; }
.text-upper  { text-transform:uppercase; }
.text-center { text-align:center; }
.text-right  { text-align:right; }
.text-mid    { color:#555; }
.text-dim    { color:#888; }
.text-success { color:#4caf50; }
.text-danger  { color:#e05252; }
.text-warning { color:#f90; }
.text-info    { color:#7c9dc9; }
.text-online  { color:#10b981; }
.bg-online    { background:#10b981; }
.opacity-4   { opacity:.4; }
.opacity-5   { opacity:.5; }
.opacity-6   { opacity:.6; }
.opacity-7   { opacity:.7; }
.opacity-note { font-size:.62rem; color:rgba(255,255,255,.3); margin-top:.1rem; display:block; }
.resize-v    { resize:vertical; }
.w-full      { width:100%; }
.overflow-y  { overflow-y:auto; }
.ellipsis    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ellipsis-150 { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ellipsis-160 { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ellipsis-180 { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ellipsis-200 { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ellipsis-title { font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:.2rem; }
.monospace   { font-family:monospace; }
.pos-relative { position:relative; }
.full-col    { grid-column:1/-1; }

/* Cart */
.cart-sticky-bar   { background:var(--bg-alt); border-bottom:1px solid var(--border); padding:.75rem 0; position:sticky; top:0; z-index:10; }
.cart-item-sku     { font-size:.7rem; color:var(--muted); border:1px solid var(--border); padding:.18rem .5rem; border-radius:4px; transition:border-color .2s, color .2s; }
.cart-item-sku:hover { border-color:var(--destructive); color:var(--destructive); }
.btn-back-link     { font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:.35rem; background:none; border:none; cursor:pointer; padding:0; transition:color .2s; }
.btn-back-link:hover { color:var(--accent); }
.total-amount      { font-family:var(--font-display); font-size:1.5rem; color:var(--accent); }
.cart-count-badge  { font-size:.75rem; font-weight:400; color:var(--muted); margin-left:.5rem; }
.cart-item-type    { font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.cart-item-footer  { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem; }
.cart-item-price   { font-weight:700; color:var(--accent); }
.cart-item-actions-row { border-top:1px solid var(--border); padding-top:1rem; margin-top:.5rem; }
.btn-cart-wishlist { white-space:nowrap; padding:.55rem 1rem; font-size:.82rem; }
.cart-msg          { font-size:.78rem; margin:.4rem 0 0; }
.cart-saved-msg    { font-size:.76rem; color:var(--accent); margin:.35rem 0 0; }
.cart-section-top  { border-top:1px solid var(--border); padding-top:1rem; margin-top:1rem; }
.cart-section-label { font-size:.8rem; font-weight:600; margin:0 0 .65rem; color:var(--muted); }
.cart-action-row   { display:flex; gap:.75rem; margin-top:1.25rem; }
.btn-cart-sec      { flex:none; padding:.7rem 1.1rem; font-size:.85rem; }
.cart-hint-text    { font-size:.82rem; color:var(--muted); margin:-.25rem 0 1.25rem; }
.cart-loading-state { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2.5rem 1rem; }
.cart-empty-state  { text-align:center; padding:5rem 2rem; max-width:460px; margin:0 auto; }
.cart-empty-icon   { font-size:1.35rem; font-weight:600; color:var(--fg); margin:1.25rem 0 .5rem; }
.mb-25             { margin-bottom:1.5rem; }
.cart-item-detail  { display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.cart-item-top     { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.cart-item-name    { font-size:.95rem; font-weight:600; color:var(--fg); margin:.1rem 0 .15rem; }
.btn-sm-pad        { padding:.5rem .9rem; font-size:.82rem; }
.cart-error-box    { background:rgba(224,82,82,.1); border:1px solid rgba(224,82,82,.35); color:var(--destructive); border-radius:8px; padding:.85rem 1rem; font-size:.85rem; }
.cart-success-box  { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.35); color:#f59e0b; border-radius:8px; padding:.85rem 1rem; font-size:.85rem; display:flex; align-items:center; gap:.5rem; }
.summary-row-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.cart-emoji-icon   { font-size:1.35rem; line-height:1; }
.btn-link-muted    { background:none; border:none; color:var(--muted); font-size:.78rem; cursor:pointer; width:100%; margin-top:.4rem; }
.order-summary-lines { display:flex; flex-direction:column; gap:.5rem; padding-bottom:.85rem; border-bottom:1px solid var(--border); }
.summary-line      { display:flex; justify-content:space-between; font-size:.82rem; }
.summary-line-label { color:var(--muted); flex:1; margin-right:.5rem; }
.total-row         { display:flex; justify-content:space-between; padding-top:.65rem; border-top:1px solid var(--border); }
.trust-badges      { margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.5rem; }
.trust-badge-item  { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--muted); }
.payment-msg       { display:none; margin-top:1rem; padding:.75rem .9rem; border-radius:6px; }
.coupon-box        { background:rgba(201,168,76,.08); border:1px solid var(--accent-border); border-radius:8px; padding:.875rem 1rem; }
.coupon-result     { display:none; margin:1rem 0; padding:.8rem 1rem; border-radius:7px; }
.discount-row      { display:flex; justify-content:space-between; color:#4caf50; }
.summary-section-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.btn-link-accent-sm { font-size:.75rem; color:var(--accent); background:none; border:none; cursor:pointer; padding:0; }
.action-group-end  { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; margin-top:.75rem; }
.tag-row           { display:flex; gap:.65rem; flex-wrap:wrap; }

/* Dashboard / Employee */
.input-icon-abs    { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); pointer-events:none; }
.input-with-icon   { padding-left:2.3rem; min-width:0; width:100%; }
.pt-25             { padding-top:.25rem; }
.detail-row        { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.82rem; }
.detail-row-value  { color:var(--fg); text-align:right; max-width:60%; word-break:break-word; }
.detail-row-wide   { display:flex; gap:.75rem; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.78rem; }
.btn-whatsapp      { width:100%; justify-content:center; margin-top:.875rem; background:#25d366; border-color:#25d366; }
.quick-reply-box   { padding:.75rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:var(--r); }
.quick-replies     { display:flex; flex-wrap:wrap; gap:.35rem; padding:.6rem .875rem; border-bottom:1px solid var(--border); }
.chat-messages     { flex:1; overflow-y:auto; padding:.875rem; display:flex; flex-direction:column; gap:.625rem; min-height:0; }
.chat-widget       { display:none; position:fixed; bottom:90px; right:1.5rem; z-index:9998; width:360px; max-height:580px; background:var(--card); border:1px solid var(--border); border-radius:1rem; flex-direction:column; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.chat-header       { background:linear-gradient(135deg,var(--accent),var(--accent-h)); padding:.875rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.chat-avatar       { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); overflow:hidden; flex-shrink:0; }
.chat-avatar-img   { width:100%; height:100%; object-fit:cover; }
.chat-name         { font-size:.85rem; font-weight:700; color:#1a0c10; margin:0; }
.chat-status       { font-size:.72rem; color:rgba(26,12,16,.75); margin:0; display:flex; align-items:center; gap:.3rem; }
.chat-typing-indicator { padding:.4rem .875rem; font-size:.78rem; color:var(--muted); }
.chat-input-bar    { display:flex; align-items:center; gap:.5rem; padding:.75rem .875rem; border-top:1px solid var(--border); background:var(--card); }
.input-pill        { border-radius:2rem !important; padding-left:1.1rem !important; padding-right:1.1rem !important; }
.gap4              { gap:4px; }
.chat-fab          { display:none; position:fixed; bottom:1.5rem; right:1.5rem; z-index:9997; width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-h)); box-shadow:0 4px 16px rgba(0,0,0,.4); align-items:center; justify-content:center; cursor:pointer; }
.chat-unread-dot   { display:none; position:fixed; bottom:57px; right:13px; z-index:9999; width:18px; height:18px; background:var(--destructive); border-radius:50%; border:2px solid var(--bg); }
.chat-empty-state  { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:.5rem; color:var(--muted); }
.chat-start-btn    { margin-top:.4rem; padding:.4rem 1rem; border-radius:2rem; background:var(--accent); color:#1a0c10; font-size:.78rem; font-weight:600; }
.chat-settings-panel { background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:.875rem; padding:.875rem; }
.badge-dark-pill   { padding:.28rem .65rem; border-radius:2rem; background:rgba(0,0,0,.15); border:1px solid rgba(0,0,0,.15); font-size:.72rem; }
.action-btn-circle { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.vendor-reply-bar  { background:rgba(200,169,110,.08); border-left:3px solid var(--accent); padding:.5rem .75rem; }
.vendor-reply-label { color:var(--accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; display:block; }
.mini-input        { width:100%; padding:.4rem .6rem; border-radius:.625rem; background:var(--bg); color:var(--fg); border:1px solid var(--border); font-size:.8rem; }
.mb-625            { margin-bottom:.625rem; }
.btn-save-sm       { flex:1; padding:.45rem; border-radius:.625rem; background:var(--accent); color:#1a0c10; font-size:.78rem; font-weight:600; }
.btn-cancel-sm     { padding:.45rem .75rem; border-radius:.625rem; background:rgba(255,255,255,.07); color:var(--muted); font-size:.78rem; }
.note-block        { background:var(--bg-alt); border-radius:.45rem; padding:.75rem; font-size:.84rem; line-height:1.65; }
.info-block        { background:var(--bg-alt); border-radius:.45rem; padding:.5rem .75rem; }
.info-block.mt-875 { margin-top:.875rem; }
.info-block-xs     { background:var(--bg-alt); border-radius:.38rem; padding:.35rem .55rem; }
.info-block-sm     { background:var(--bg-alt); border-radius:.45rem; padding:.55rem .8rem; }
.info-block-md     { background:var(--bg-alt); border-radius:.5rem; padding:.6rem .9rem; }
.info-block-lg     { background:var(--bg-alt); border-radius:.5rem; padding:.65rem .9rem; }
.info-block-full   { background:var(--bg-alt); border-radius:.5rem; padding:.6rem .9rem; grid-column:1/-1; }
.info-label-xs     { font-size:.63rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.mono-row          { font-size:.72rem; font-family:monospace; color:var(--muted); padding:.2rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mono-id           { font-family:monospace; font-size:.63rem; color:var(--muted); word-break:break-all; background:var(--bg); padding:.25rem .4rem; border-radius:.25rem; display:block; }
.skill-tag         { font-size:.6rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:4px; padding:.1rem .4rem; }
.skill-tag--gold   { background:rgba(201,168,76,.08); border-color:rgba(201,168,76,.2); }
.online-dot        { width:7px; height:7px; border-radius:50%; background:#10b981; display:inline-block; flex-shrink:0; }
.qr-wrapper        { display:flex; align-items:center; justify-content:center; width:60px; height:60px; padding:6px; box-sizing:border-box; background:#fff; border-radius:4px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.qr-img            { display:block; image-rendering:pixelated; max-width:none; width:48px; height:48px; }
.qr-img--lg        { border-radius:5px; width:120px; height:120px; }
.qr-placeholder    { width:140px; height:140px; display:flex; align-items:center; justify-content:center; opacity:.35; flex-shrink:0; }
.qr-placeholder-text { width:140px; height:140px; display:flex; align-items:center; justify-content:center; font-size:.7rem; text-align:center; color:var(--muted); }
.product-card      { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.product-card-thumb { height:90px; overflow:hidden; position:relative; }
.product-card-category { padding:.5rem .8rem; border-bottom:1px solid var(--border); }
.product-card-body { padding:.8rem; display:flex; flex-direction:column; gap:.35rem; }
.product-card-price { font-size:.75rem; color:var(--accent); font-weight:600; }
.product-label     { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.35rem; }
.card-footer-price { margin-top:auto; padding-top:.5rem; font-size:.78rem; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:.4rem; }
.card-footer-price-sm { font-size:.74rem; color:var(--accent); font-weight:600; margin-top:auto; padding-top:.35rem; }
.card-thumb-100    { height:100px; overflow:hidden; position:relative; flex-shrink:0; }
.card-thumb-80     { height:80px; overflow:hidden; }
.card-thumb-gradient { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 30%,rgba(18,6,8,.8)); }
.card-thumb-badge  { position:absolute; bottom:.5rem; left:.7rem; font-size:.62rem; }
.card-body-sm      { padding:.9rem 1rem; flex:1; display:flex; flex-direction:column; gap:.45rem; }
.card-list-body    { padding:.9rem 1.1rem; flex:1; display:flex; flex-direction:column; gap:.6rem; }
.card-list-body-sm { padding:.8rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.card-body-with-meta { padding:.9rem 1.1rem; display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem; }
.card-header-gradient { background:linear-gradient(135deg,var(--bg-alt),var(--card)); padding:.9rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.card-top-row      { display:flex; align-items:center; gap:.4rem; margin-bottom:.3rem; }
.card-meta-row     { font-size:.76rem; color:var(--muted); display:flex; gap:.6rem; flex-wrap:wrap; }
.card-meta-tags    { font-size:.78rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.5rem; }
.card-item-title   { font-weight:600; font-size:.84rem; color:var(--fg); margin-bottom:.3rem; }
.card-item-name-lg { font-weight:600; color:var(--fg); margin-bottom:.35rem; }
.card-title-sm     { font-weight:600; color:var(--fg); font-size:.92rem; }
.product-info-card { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r); padding:1.25rem; display:flex; gap:.75rem; }
.swatch            { width:28px; height:28px; border-radius:50%; cursor:pointer; }
.swatch--active    { border:2px solid var(--accent); }
.swatch--black     { background:#000; }
.swatch--gold      { background:#c9a84c; }
.swatch--white     { background:#fff; }
.swatch-select-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem; flex-wrap:wrap; }
.swatch-label      { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.modal-overlay     { display:none; position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:10000; backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:1rem; }
.detail-row-item  { display:flex; align-items:center; gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--border); }
.detail-row-item:last-child { border-bottom:none; }
.detail-item-thumb { width:44px; height:44px; border-radius:.5rem; object-fit:cover; flex-shrink:0; }
.detail-item-title { font-size:.85rem; font-weight:600; color:var(--fg); }
.detail-item-price { font-size:.85rem; font-weight:700; color:var(--accent); flex-shrink:0; }
.modal-card-400    { background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1.75rem; width:100%; max-width:400px; }
.modal-card-680    { max-width:680px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; max-height:90vh; }
.modal-card-700    { max-width:700px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; max-height:90vh; }
.modal-card-800    { max-width:800px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; max-height:90vh; }
.modal-card-820    { max-width:820px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; max-height:90vh; }
.modal-header      { background:linear-gradient(135deg,var(--bg-alt),var(--card)); padding:1.5rem 2rem; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:1rem; }
.modal-header--sm  { padding:1.4rem 1.75rem; }
.modal-body        { padding:1.5rem 2rem; }
.modal-body-sm     { padding:1.4rem 1.75rem; }
#gnag-cm-preview   { overflow:hidden; background:var(--bg-alt); }
.detail-img        { display:block; width:100%; height:260px; object-fit:cover; }
.detail-iframe      { display:block; width:100%; height:340px; border:none; }
.modal-body-lg     { padding:1.75rem 2rem; }
.modal-body-pad    { padding:1.25rem 1.75rem; }
.modal-title       { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--fg); }
.modal-title-row   { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.modal-heading     { font-size:.95rem; font-weight:700; color:var(--fg); }
.modal-subtitle    { font-size:.85rem; color:var(--muted); }
.modal-close-btn   { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--bg-alt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--fg); font-size:1rem; line-height:1; transition:border-color .2s, color .2s; }
.modal-close-btn:hover { border-color:var(--accent); color:var(--accent); }
.modal-close-btn--sm { width:32px; height:32px; }
.color-modal-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.color-modal-overlay.hidden { display:none; }
.color-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(3px); }
.color-modal-card { position:relative; z-index:1; max-width:420px; width:100%; max-height:85vh; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2rem 1.75rem 1.75rem; text-align:center; box-shadow:var(--shadow-xl); }
.color-modal-close { position:absolute; top:.75rem; right:.75rem; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07); border:none; color:#fff; cursor:pointer; transition:background .2s; }
.color-modal-close:hover { background:rgba(255,255,255,.14); }
.color-modal-swatches { width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.color-modal-title { font-size:1.15rem; font-weight:700; margin-bottom:.6rem; color:var(--fg); }
.color-modal-desc { font-size:.88rem; color:var(--muted); line-height:1.6; }
.color-modal-hex { font-family:monospace; font-weight:700; font-size:.85rem; color:var(--pdp-text,#fff); }
.color-sku-label { font-size:.75rem; color:var(--muted); }
.color-swatch-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.checkout-back-link { color:var(--muted-foreground); transition:color .2s; }
.checkout-back-link:hover { color:var(--accent); }
.modal-actions     { display:flex; gap:.5rem; justify-content:flex-end; }
.modal-tabs-bar    { background:var(--bg); border-bottom:1px solid var(--border); min-height:0; }
.section-micro-label { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.65rem; }
.section-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.section-divider-label { font-size:.65rem; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.search-no-results { display:none; text-align:center; padding:3rem; background:var(--card); border:1px solid var(--border); border-radius:var(--r); }
.empty-panel       { display:none; text-align:center; padding:1.25rem; background:var(--bg-alt); border-radius:var(--r); color:var(--muted); }
.panel-footer-actions { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border); display:flex; gap:.5rem; }
.panel-section-label { padding:.5rem .75rem; font-size:.8rem; color:var(--muted); }
.panel-empty-state { text-align:center; padding:2rem; color:var(--muted); }
.radio-card        { display:flex; align-items:flex-start; gap:.85rem; cursor:pointer; padding:.75rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:var(--r); transition:border-color .2s; }
.radio-input       { width:auto; margin-top:.15rem; accent-color:var(--accent); }
.delete-confirm-row { display:flex; align-items:center; gap:.65rem; cursor:pointer; font-size:.84rem; }
.collapsible-section { display:none; margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem; }
.danger-card       { border-color:rgba(224,82,82,.4); }
.danger-btn        { color:#e05252; border-color:#e05252; }
.checkbox-danger   { width:auto; accent-color:#e05252; }
.user-avatar-grad  { border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--primary)); display:flex; align-items:center; justify-content:center; }
.user-avatar-grad-28 { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--primary)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-avatar-grad-30 { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--primary)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-avatar-grad-46 { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--primary)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-avatar-grad-50 { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--primary)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-avatar-60    { width:60px; height:60px; border-radius:50%; flex-shrink:0; overflow:hidden; border:2px solid var(--accent-border); background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:1.75rem; }
.user-avatar-64    { width:64px; height:64px; border-radius:50%; flex-shrink:0; overflow:hidden; border:2px solid var(--accent-border); background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:2rem; }
.avatar-28         { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.avatar-initials   { font-size:.65rem; font-weight:700; color:#120608; }
.brand-title-sm    { font-family:var(--font-display); font-size:1rem; font-weight:700; color:#120608; }
.brand-title-md    { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:#120608; }
.brand-title-lg    { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:#120608; }
.badge-xs          { font-size:.65rem; padding:.15rem .5rem; }
.badge-xxs         { font-size:.62rem; padding:.12rem .45rem; }
.badge-sm          { font-size:.73rem; padding:.33rem .7rem; }
.badge-sm-xs       { font-size:.7rem; padding:.28rem .6rem; }
.badge-pad         { padding:.2rem .5rem; }
.badge-accent      { background:var(--accent); color:#0d0608; font-size:.68rem; font-weight:800; padding:.15rem .5rem; border-radius:4px; }
.btn-ghost-accent  { background:transparent; color:var(--accent); font-weight:700; }
.btn-icon-accent   { background:none; border:none; color:var(--accent); cursor:pointer; font-size:.8rem; line-height:1; }
.btn-filter-tag    { padding:.3rem .75rem; border:1px solid var(--border); border-radius:.4rem; font-size:.78rem; color:var(--muted); }
.btn-send          { align-self:stretch; min-width:72px; justify-content:center; }
.btn-send-pill     { border-radius:2rem; padding:.5rem 1rem; flex-shrink:0; }
.btn-save-sm       { flex:1; padding:.45rem; border-radius:.625rem; background:var(--accent); color:#1a0c10; font-size:.78rem; font-weight:600; }
.dropdown-btn-fixed { min-width:170px; justify-content:space-between; }
.dropdown-chevron-abs { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); }
.dropdown-menu-full { min-width:100%; top:calc(100% - .75rem); }
.dropdown-menu-210 { left:0; right:auto; min-width:210px; max-height:260px; overflow-y:auto; }
.dropdown-menu-220 { left:0; right:auto; min-width:220px; }
.dropdown-menu-wide { right:auto; left:0; width:100%; }
.grid-auto-270     { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.grid-auto-260     { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.grid-2-mb15       { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1.5rem; }
.grid-2-mb125      { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1.25rem; }
.grid-2-55         { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.grid-2-mb15-wide  { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.5rem; }
.grid-2-mb175      { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.75rem; }
.grid-2-4          { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.grid-2-35         { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.mini-feedback     { font-size:.76rem; margin:.4rem 0 0; min-height:1em; }
.faq-card-heading  { font-size:.875rem; color:var(--fg); margin-bottom:.4rem; font-weight:600; }
.faq-card-desc     { font-size:.8rem; color:var(--muted); margin-bottom:1rem; }
.heading-lg-alt    { font-size:clamp(1.5rem,3vw,2.25rem); margin:.5rem 0 .75rem; }
.heading-lg-lo     { font-size:clamp(1.5rem,3vw,2.25rem); margin:.6rem 0 1.25rem; }
.heading-2xl       { font-size:2.25rem; margin-bottom:.875rem; }
.heading-lg-mb     { font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:1.25rem; }
.custom-heading-xl { font-size:clamp(1.75rem,4vw,2.75rem); margin:.5rem 0 .75rem; }
.card-pad-25       { padding:2.5rem; }
.about-role-label  { font-size:.8rem; color:var(--accent); margin-bottom:1rem; }


/* checkout cancel danger icon */
.checkout-icon--danger {
  background: rgba(224,82,82,.1);
  border: 2px solid rgba(224,82,82,.3);
}

/* product hex overlay (backdrop variant) */
.product-hex-overlay {
  position: absolute;
  bottom: .6rem;
  left: .6rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: 3px 8px;
}

/* dashboard modal 480 */
.modal-card-480 {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.75rem;
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}

/* radio-card bg-alt variant */
.radio-card {
  background: var(--bg-alt);
  border-radius: .6rem;
}

/* dropdown-trigger !important variant */
.dropdown-trigger {
  background: var(--bg);
}


/* Dynamic-style utility classes */
.gnag-section--disabled { opacity:.4; pointer-events:none; }
.cursor-crosshair        { cursor:crosshair; }
.art-img-dynamic         { height:var(--h,420px); object-fit:cover; }
.art-grid-thumbs         { grid-template-columns:repeat(var(--cols,3),1fr); }
.gnag-cert-img           { display:block;width:auto;max-width:100%;height:auto;max-height:var(--cert-maxh,120px);object-fit:contain;border:none;background:none;margin:0 auto; }
.gnag-cert-img-wrap      { display:block;width:100%;text-align:center;margin-bottom:1rem;border:none;background:none;padding:0;cursor:pointer; }
.gnag-cert-img-wrap:hover .gnag-cert-img { opacity:.85; }
.gnag-order-thumb        { background-image:var(--thumb);background-size:cover;background-position:center; }
.gnag-pdp-related-hero   { background:var(--pdp-rel-hex,var(--bg-alt));width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.gnag-pdp-hero-wrap      { position:relative;overflow:hidden; }
.gnag-color-swatch-bg    { background:var(--swatch-bg,#888); }
.gnag-stock-label        { font-size:.72rem;font-weight:600; }
.gnag-swatch-option      { background:var(--swatch,#888); }
.gnag-pdp-related-swatch { display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--pdp-rel-hex,#888);border:1px solid rgba(255,255,255,.25); }
.gnag-gal-medium-badge   { background:var(--badge-bg,var(--card));color:var(--badge-text,var(--fg)); }
.gallery-thumb-item      { width:70px;height:70px;border-radius:var(--r-sm);overflow:hidden;border:2px solid var(--border);cursor:pointer;transition:border-color .2s; }
.gnag-gal-thumb--active  { border-color:var(--accent) !important; }

/* ══════════════════════════════════════════════════════════════════════
   PRODUCT INFORMATION ACCORDION — used on every single product page
   (single-gnag_color/handicraft/itservice/service/statue/temple.php).
   These classes had no styling at all: the section heading, the
   accordion item/button/chevron/collapsible body, and the spec table
   were all rendering as unstyled native HTML on top of the dark theme.
════════════════════════════════════════════════════════════════════ */
.gnag-prod-info-section { margin: 2.5rem 0; }
.gnag-section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  margin-bottom: 1.25rem;
}

.gnag-accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: .75rem;
  overflow: hidden;
  background: var(--card);
}
.gnag-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.1rem;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.gnag-acc-chevron { flex-shrink: 0; transition: transform .25s ease; color: var(--muted); }
.gnag-accordion-item.open .gnag-acc-chevron { transform: rotate(180deg); color: var(--accent); }

.gnag-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.gnag-accordion-body > table { overflow: hidden; min-height: 0; }
.gnag-accordion-item.open .gnag-accordion-body { grid-template-rows: 1fr; }

.gnag-prod-info-table { width: 100%; border-collapse: collapse; }
.gnag-prod-info-table tr { border-top: 1px solid var(--border); }
.gnag-prod-info-table tr:first-child { border-top: none; }
.gnag-prod-info-table th,
.gnag-prod-info-table td {
  text-align: left;
  vertical-align: top;
  padding: .65rem 1.1rem;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.5;
}
.gnag-prod-info-table th { color: var(--muted); width: 38%; padding-right: 1rem; }
.gnag-prod-info-table td { color: var(--fg); }

/* Narrow screens: stack label above value instead of a cramped
   two-column row, so long labels/values never force horizontal
   scroll on small phones. */
@media (max-width: 480px) {
  .gnag-prod-info-table tr { display: block; padding: .5rem 0; }
  .gnag-prod-info-table th,
  .gnag-prod-info-table td { display: block; width: 100%; padding: .15rem 1.1rem; }
  .gnag-prod-info-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent);
    padding-top: .5rem;
  }
}


/* Login tab — mode-driven active state (replaces inline PHP style) */
.tab-btn--signin-active  { background:var(--card); color:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.tab-btn--signup-active  { background:var(--card); color:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.tab-btn--inactive       { background:transparent; color:var(--muted); box-shadow:none; }

/* Status pills built by JS — colours passed via CSS custom properties */
.gnag-status-pill {
    flex-shrink: 0;
    background: var(--pill-bg, var(--card));
    border: 1px solid var(--pill-bd, var(--border));
    border-radius: 2rem;
    padding: .15rem .65rem;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.gnag-status-badge-pill {
    background: var(--pill-bg, var(--card));
    border: 1px solid var(--pill-bd, var(--border));
    color: var(--pill-t, var(--fg));
    border-radius: 2rem;
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .55rem;
}
/* co-item helpers */
.co-cat-label { display:block; }
.co-cat-sub   { display:block; }

/* ══════════════════════════════════════════════════════════════════════════
   BLOG INDEX — index.php cards (moved from inline styles)
══════════════════════════════════════════════════════════════════════════ */
.blog-card {
    display: flex;
    flex-direction: column;
}
.blog-card-img-wrap {
    aspect-ratio: 4 / 3;
}
.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-card-date {
    font-size: .72rem;
    color: var(--accent);
    margin-bottom: .4rem;
    display: block;
}
.blog-card-title {
    font-size: 1.05rem;
    margin-bottom: .5rem;
}
.blog-card-title a {
    color: var(--foreground);
}
.blog-card-excerpt {
    color: var(--muted);
    font-size: .875rem;
    flex: 1;
}
.blog-card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.blog-no-posts {
    text-align: center;
    color: var(--muted);
    padding: 5rem 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE HOVER-ZOOM WRAPPER (blog cards, index listings)
══════════════════════════════════════════════════════════════════════════ */
.img-zoom { overflow:hidden; }
.img-zoom img { transition:transform .5s var(--spring, ease); }
.img-zoom:hover img { transform:scale(1.08); }

/* ══════════════════════════════════════════════════════════════════════════
   GENERIC PAGE LAYOUT — hero band + main section wrapper (404, index/blog)
══════════════════════════════════════════════════════════════════════════ */
.gnag-page-hero  { padding:4rem 0 2.5rem; text-align:center; border-bottom:1px solid var(--border); }
.gnag-page-title { font-size:clamp(1.75rem,4vw,2.75rem); margin:0; }
.gnag-section    { padding:4rem 0 6rem; }

/* ══════════════════════════════════════════════════════════════════════════
   GNAG-BTN FAMILY — secondary button system used on 404 / blog listing
   (mirrors the .btn / .btn-gold / .btn-outline / .btn-ghost system above)
══════════════════════════════════════════════════════════════════════════ */
.gnag-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem 1.75rem; border-radius:var(--r-sm); font-weight:600;
    font-size:.9rem; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
    transition:all .2s;
}
.gnag-btn-primary { background:var(--accent); color:#0d0608; }
.gnag-btn-primary:hover { background:var(--accent-h); transform:translateY(-2px) scale(1.02); box-shadow:0 6px 24px rgba(201,168,76,.35); }
.gnag-btn-outline { border-color:var(--accent); color:var(--accent); background:transparent; }
.gnag-btn-outline:hover { background:var(--accent-light); transform:translateY(-2px); }
.gnag-btn-ghost { border-color:var(--border-h); color:var(--muted); background:transparent; }
.gnag-btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.gnag-btn-lg { padding:1rem 2.25rem; font-size:.95rem; }
.gnag-btn-sm { padding:.5rem 1.1rem; font-size:.8rem; }
.tap-scale { transition:transform .15s; }
.tap-scale:active { transform:scale(.96); }

.error-404-wrap { text-align:center; padding:5rem 1rem; }
.error-code { font-family:var(--font-display); font-size:clamp(4rem,12vw,7rem); color:var(--accent); line-height:1; margin-bottom:1rem; opacity:.85; }

/* ══════════════════════════════════════════════════════════════════════════
   WIDGET SIDEBAR — moved from register_sidebar() before_widget/before_title
══════════════════════════════════════════════════════════════════════════ */
.widget.gnag-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.footer-heading {
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOMIZER — Glass Reset Button (moved from render_content() inline style)
══════════════════════════════════════════════════════════════════════════ */
#gnag-glass-reset-btn {
    width: 100%;
    margin-top: .4rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER SVG — Flipkart icon fill override (moved from inline style)
══════════════════════════════════════════════════════════════════════════ */
.gnag-flipkart-path {
    fill: var(--bg, #1a0a0c);
}


/* ══════════════════════════════════════════════════════════════════════════
   CHAT ENGINE — pulse animation (moved from inline <style> in chat-engine.php)
══════════════════════════════════════════════════════════════════════════ */
@keyframes gnag-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .6; }
}


/* ══════════════════════════════════════════════════════════════════════════
   FILTER BAR — price range slider & sort (moved from inline style= attrs)
══════════════════════════════════════════════════════════════════════════ */
.gnag-fb-sort-wrap {
    margin-left: auto;
}
.gnag-fb-price-inputs {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .65rem;
    flex-wrap: nowrap;
}
.gnag-fb-price-currency {
    font-size: .8rem;
    color: var(--muted, #999);
    flex-shrink: 0;
}
.gnag-fb-price-sep {
    color: var(--muted, #999);
    font-size: .85rem;
    flex-shrink: 0;
}
.gnag-fb-price-input {
    width: 0;           /* let flex distribute space evenly between both inputs */
    flex: 1 1 0;
    min-width: 0;
    padding: .3rem .4rem;
    background: var(--card, rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    color: inherit;
    font-size: .78rem;
}
.gnag-fb-price-slider-wrap {
    position: relative;
    height: 28px;
    margin: 4px 8px;
}
.gnag-fb-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}
.gnag-fb-slider-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    background: var(--accent, #c8a96e);
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    right: 0%;
}
.gnag-fb-slider-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    pointer-events: none;   /* only the thumb (below) should catch clicks/drags —
                               otherwise whichever input is on top steals every
                               pointer event across the full track width, making
                               the other handle feel stuck. */
}
.gnag-fb-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
}
.gnag-fb-slider-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    pointer-events: auto;
    cursor: pointer;
}
.gnag-fb-slider-thumb {
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    background: var(--accent, #c8a96e);
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.gnag-fb-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--muted, #999);
    margin-top: .35rem;
    padding: 0 8px;
}


/* ══════════════════════════════════════════════════════════════════════════
   SOCIAL FEED — post card (moved from inline style= attrs)
══════════════════════════════════════════════════════════════════════════ */
.social-post-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.social-post-link-inner {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}
.social-post-platform-icon {
    font-size: 2.5rem;
    opacity: .35;
}
.social-post-domain {
    font-size: .8rem;
    color: var(--muted);
    margin: 0;
}
.social-post-caption {
    margin: .4rem 0 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   2FA ADMIN PAGE — verification badges & fieldset (moved from inline style=)
══════════════════════════════════════════════════════════════════════════ */
.gnag-2fa-verified {
    color: green;
    margin-left: .5rem;
}
.gnag-2fa-unverified {
    color: #999;
    margin-left: .5rem;
}
.gnag-2fa-method-wrap {
    margin-top: .75rem;
    padding: .75rem;
    border: 1px solid #ddd;
    display: inline-block;
    border-radius: 4px;
}
.gnag-2fa-method-legend {
    font-size: .85rem;
    color: #666;
}
.gnag-2fa-method-label {
    display: block;
    margin: .25rem 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   COLOR PDP — dynamic hex background (var set via wp_add_inline_style :root)
══════════════════════════════════════════════════════════════════════════ */
.gnag-pdp-hex-bg { background: var(--pdp-hex); }


/* ══════════════════════════════════════════════════════════════════════════
   CUSTOM ORDERS — type dropdown (category label + selectable item)
══════════════════════════════════════════════════════════════════════════ */
.co-cat-label {
    width:100%; display:block; padding:.38rem .75rem .15rem;
    font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--accent,#c8a96e); opacity:.85;
}
.co-type-item, .co-item {
    width:100%; display:block; padding:.42rem .75rem .42rem 1.35rem;
    font-size:.83rem; font-weight:500; color:var(--muted); background:none;
    border:none; border-radius:.75rem; cursor:pointer; text-align:left;
    transition:color .15s, background .15s;
}
.co-type-item:hover, .co-item:hover {
    color:var(--accent); background:rgba(201,168,76,.08);
}
/* Marks the currently-chosen Type of Work item (set via JS on selection) */
.co-item-selected {
    color:var(--accent) !important; background:rgba(201,168,76,.14) !important;
    font-weight:700;
}
.co-dd-item:hover, .dropdown-option:hover {
    color:var(--accent); background:rgba(201,168,76,.1);
}


/* ══════════════════════════════════════════════════════════════════════════
   CUSTOM ORDERS — category label (moved from $cat_style PHP variable)
══════════════════════════════════════════════════════════════════════════ */
.gnag-co-cat-label {
    width: 100%;
    display: block;
    padding: .38rem .75rem .15rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent, #c8a96e);
    opacity: .85;
}

.gnag-login-badge--accent { color: var(--accent); }
.gnag-login-hint--error { color: var(--destructive); }

/* ══════════════════════════════════════════════════════════════════════════
   TRACKING — third-party pixel helpers
   (replaces inline style="" previously set on noscript tags in inc/ads.php)
══════════════════════════════════════════════════════════════════════════ */
.gnag-tracking-pixel { display:none; visibility:hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   SECURITY DETERRENTS — best-effort content-protection only.
   IMPORTANT: no CSS/JS on any website can actually block OS-level screen
   capture (Print Screen, phone screen recording, Snipping Tool, etc.) or
   third-party apps — browsers and operating systems never expose that
   control to a web page. These rules only raise the effort required for
   casual copying (right-click save, drag-out, text-select, iOS long-press)
   and stamp a traceable watermark on the viewport. See assets/js/main.js
   "SECURITY DETERRENTS" module for the full explanation and behaviour.
══════════════════════════════════════════════════════════════════════════ */

/* Disable text selection site-wide, but explicitly restore it for anything
   the visitor legitimately needs to select/copy: form fields, editable
   content, and anything intentionally opted back in via .gnag-selectable
   (e.g. order numbers, tracking numbers, addresses). */
body.gnag-deterrents-on {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* blocks the iOS long-press "Save Image" menu */
}
body.gnag-deterrents-on input,
body.gnag-deterrents-on textarea,
body.gnag-deterrents-on select,
body.gnag-deterrents-on [contenteditable="true"],
body.gnag-deterrents-on .gnag-selectable,
body.gnag-deterrents-on .gnag-selectable * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Privacy blur — applied while the tab is hidden/unfocused (screen-recording
   software and OS task-switcher previews still capture whatever is on
   screen the instant before this class is added, so this only helps for
   sustained recording/mirroring, not an instantaneous screenshot). */
body.gnag-privacy-blur > * {
  filter: blur(24px) brightness(0.7);
  transition: filter .12s ease;
}

/* ── Page Visibility: banner shown only to admins previewing a
   page that's been toggled off in Appearance → Page Visibility ── */
.gnag-pv-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: var(--destructive, #b91c1c);
  color: #fff;
  font-size: .85rem;
  text-align: center;
  padding: .65rem 1rem;
}
.gnag-pv-banner a { color: #fff; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   JS-CREATED ELEMENT CLASSES
   These replace `el.style.cssText = '...'` assignments in main.js.
   Building a full static style block from JS bypasses this
   stylesheet the same way an inline style="" attribute does, so
   each one below is now a class toggled via classList instead.
   Only genuinely dynamic values (computed positions, live toggles,
   per-instance colors) stay as individual el.style.x assignments.
   ══════════════════════════════════════════════════════════════ */

/* Inline form response banner (showResp() in main.js) */
.js-form-resp {
  display: block; padding: .7rem 1rem; border-radius: .5rem;
  font-size: .84rem; margin-top: .75rem;
}
.js-form-resp--ok  { background: rgba(76,175,125,.12); border: 1px solid var(--green); color: var(--green); }
.js-form-resp--err { background: rgba(224,82,82,.12);  border: 1px solid var(--destructive); color: var(--destructive); }

/* Search dropdown result card / row */
.js-search-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.js-search-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .75rem; border-radius: .5rem; cursor: pointer;
  transition: background .15s;
}

/* Grid card (certificates / listing grid) */
.js-grid-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; display: flex;
  flex-direction: column; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

/* Employee/cert modal mini card */
.js-cert-card {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}

/* Filter chip */
.js-filter-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--accent-light); border: 1px solid var(--accent-border);
  border-radius: 2rem; padding: .25rem .75rem; font-size: .75rem;
  color: var(--accent);
}

/* QR canvas (print-certificate flow) */
.js-qr-canvas { display: block; border-radius: 6px; image-rendering: pixelated; }

/* ── Chat widget message row ── */
.js-chat-msg-wrap {
  display: flex; flex-direction: row; gap: .45rem; align-items: flex-end;
}
.js-chat-msg-wrap--user { flex-direction: row-reverse; }

.js-chat-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-light); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.js-chat-avatar--human {
  background: rgba(76,175,80,.12); border-color: rgba(76,175,80,.3); font-size: .8rem;
}
.js-chat-avatar--bot-emoji { font-size: .75rem; }
.js-chat-avatar-img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }

.js-chat-bubble {
  max-width: 84%; padding: .55rem .9rem; border-radius: 1rem 1rem 1rem .25rem;
  font-size: .81rem; line-height: 1.55; background: rgba(255,255,255,.07); color: var(--fg);
}
.js-chat-bubble--user {
  border-radius: 1rem 1rem .25rem 1rem;
  background: var(--accent); color: #1a0c10;
}
.js-chat-bubble--human {
  background: rgba(76,175,80,.1); border: 1px solid rgba(76,175,80,.25); color: var(--fg);
}
.js-chat-bubble--card {
  background: linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.04));
  border: 1px solid var(--accent-border); color: var(--fg);
}
.js-chat-bubble--alert {
  background: rgba(224,82,82,.08); border: 1px solid rgba(224,82,82,.2); color: var(--fg);
}