/* ── Checkout button pulse animation ── */
.btn-checkout {
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  position: relative;
  overflow: hidden;
}
.btn-checkout:active { transform: scale(.96); }
.btn-checkout-pulse { animation: checkoutPulse .55s ease; }
@keyframes checkoutPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,168,76,.5); }
  40%  { transform: scale(.97); box-shadow: 0 0 0 10px rgba(201,168,76,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}

/* ── Checkout modal ── */
.modal-checkout { max-width: 780px !important; width: 96vw; max-height: 88dvh; overflow-y: auto; }
.co-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
.co-section-title {
  font-family: var(--font-heading); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-dim); margin-bottom: .65rem;
  display: flex; align-items: center; gap: .45rem;
}
.co-section-title.mt2 { margin-top: 1.4rem; }
/* Payment tabs */
.pm-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.pm-tab {
  display: flex; align-items: center; gap: .45rem; padding: 8px 16px;
  border-radius: var(--r2); border: 1px solid var(--border); background: var(--card);
  color: var(--textm); font-family: var(--font-heading); font-size: .72rem;
  letter-spacing: .06em; cursor: pointer; transition: all .2s;
}
.pm-tab:hover { border-color: var(--border2); color: var(--gold-pale); }
.pm-tab.active {
  border-color: var(--gold-dim);
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04));
  color: var(--gold);
}
/* Payment info */
.pm-info-wrap { min-height: 110px; }
.pm-info-card {
  background: linear-gradient(135deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-radius: var(--r2); padding: 1rem 1.15rem;
  animation: pmFadeIn .2s ease;
}
@keyframes pmFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.pm-info-label { font-family: var(--font-heading); font-size: .68rem; letter-spacing: .1em; color: var(--gold-dim); text-transform: uppercase; margin-bottom: .55rem; }
.pm-number {
  font-size: 1.45rem; font-family: var(--font-heading); color: var(--gold-pale);
  letter-spacing: .05em; cursor: pointer; display: flex; align-items: center; gap: .5rem; transition: color .2s;
}
.pm-number:hover { color: var(--gold); }
.pm-copy-icon { font-size: .75rem; opacity: .5; }
.pm-receiver { font-size: .85rem; color: var(--textd); margin: .3rem 0 .65rem; }
.pm-qr { max-width: 150px; border-radius: var(--r2); margin-top: .65rem; border: 1px solid var(--border); display: block; }
.pm-paypal-link { display: inline-flex !important; align-items: center; gap: .4rem; margin-top: .65rem; }
/* Receipt upload */
.co-upload-box {
  display: flex; justify-content: center; border: 2px dashed var(--border2);
  border-radius: var(--r2); padding: 1.25rem; cursor: pointer; transition: all .2s;
  min-height: 100px; position: relative;
}
.co-upload-box:hover { border-color: var(--teal); background: rgba(91,196,196,.04); }
.co-upload-inner { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; color: var(--textd); font-size: .88rem; }
/* Order summary */
.co-items { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.co-item { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--textm); }
.co-item-icon { font-size: 1.05rem; }
.co-item-name { flex: 1; }
.co-item-variant { color: var(--textd); font-size: .77rem; }
.co-item-qty { color: var(--textd); font-size: .8rem; }
.co-item-price { font-family: var(--font-heading); font-size: .82rem; color: var(--gold-pale); }
.co-divider { border: none; border-top: 1px solid var(--border); margin: .5rem 0; }
.co-totals { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.co-total-row { display: flex; justify-content: space-between; font-size: .85rem; color: var(--textm); }
.co-discount { color: var(--teal); }
.co-grand { font-family: var(--font-heading); font-size: 1rem; color: var(--gold-pale); padding-top: .35rem; border-top: 1px solid var(--border); margin-top: .2rem; }
.co-submit-btn { width: 100% !important; justify-content: center; font-size: .82rem !important; padding: 12px 20px !important; }
.co-footer-note { text-align: center; margin-top: .5rem; }
@media (max-width: 620px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-right { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: .5rem; }
  .modal-checkout { max-height: 95dvh !important; border-radius: 16px 16px 0 0 !important; }
  .modal-overlay:has(.modal-checkout) { align-items: flex-end !important; }
}

/* ── Existing nav-logo below ── */
.nav-logo {
  position: relative;
  transition: text-shadow .25s ease, transform .25s ease;
}

.nav-logo::after {
  content: '';
  position: absolute;
  inset: -8px -12px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(201, 168, 76, .18), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}

.nav-logo-glow,
.nav-logo:hover {
  text-shadow: 0 0 18px rgba(201, 168, 76, .35);
  transform: translateY(-1px);
}

.nav-logo-glow::after,
.nav-logo:hover::after {
  opacity: 1;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(300px circle at var(--pointer-x) var(--pointer-y), rgba(201, 168, 76, .07), transparent 60%),
    radial-gradient(260px circle at calc(var(--pointer-x) * .65) calc(var(--pointer-y) * .9), rgba(91, 196, 196, .05), transparent 60%);
}

.hero {
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: auto 10% -20px 10%;
  height: 160px;
  background: radial-gradient(circle at center, rgba(201, 168, 76, .12), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

.hero-notice {
  box-shadow: 0 10px 40px rgba(201, 168, 76, .08);
}

.category-card,
.service-card,
.product-card,
.ticket-card,
.update-card,
.profile-content,
.profile-side,
.admin-panel,
.admin-side {
  backdrop-filter: blur(10px);
}

.category-card:hover,
.service-card:hover,
.product-card:hover {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(201, 168, 76, .1),
    0 0 30px rgba(91, 196, 196, .08);
}

.sec-title {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sec-title::after {
  content: '';
  width: 42px;
  height: 1px;
  margin-left: .8rem;
  background: linear-gradient(90deg, rgba(201, 168, 76, .7), transparent);
}

.cart-sidebar::before,
.modal::before,
.checkout-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(201, 168, 76, .05), transparent 30%, rgba(91, 196, 196, .04) 100%);
}

.modal,
.checkout-box {
  position: relative;
  overflow: hidden;
}

.cart-sidebar {
  overflow: hidden;
}

.footer-links a {
  position: relative;
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: transform .2s ease;
}

.footer-links a:hover::after {
  transform: scaleX(1);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-stat,
.auth-feature-chip,
.auth-stat-box,
.auth-prompt-panel,
.hero-mini-card,
.footer-text {
  position: relative;
  overflow: hidden;
}

.hero-stat::after,
.auth-feature-chip::after,
.auth-stat-box::after,
.auth-prompt-panel::after,
.hero-mini-card::after,
.footer-text::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
  animation: sheenSlide 5.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sheenSlide {
  0%, 72% { transform: translateX(-120%); }
  100% { transform: translateX(140%); }
}

/* ====================================================
   GALE FX v2 — PREMIUM MOTION SYSTEM EXTENSIONS
   ==================================================== */

/* ── Hero floating animation ── */
.hero-emblem-image {
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(.7deg); }
  66%       { transform: translateY(-5px) rotate(-.4deg); }
}

/* ── Hero orb pulse ── */
.hero-orb-glow {
  animation: orbPulse 4.5s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.22); }
}

/* ── Hero title shimmer text ── */
.hero-title {
  background: linear-gradient(
    105deg,
    var(--gold-pale) 0%,
    var(--gold-light) 20%,
    #fff8e1 40%,
    var(--gold-light) 60%,
    var(--gold) 80%,
    var(--gold-pale) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 9s linear infinite;
  text-shadow: none;
}
@keyframes goldShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Hero stat number gradient ── */
.hero-stat-num {
  background: linear-gradient(135deg, var(--gold-pale), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Premium page enter animation ── */
.page.active {
  animation: pageEnterPremium .44s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pageEnterPremium {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.994);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ── Button ripple support ── */
.btn-p,
.btn-s,
.btn-teal,
.btn-checkout,
.btn-danger,
.btn-success,
.variant-add,
.nav-auth-btn {
  position: relative;
  overflow: hidden;
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleExpand .58s linear forwards;
  pointer-events: none;
}
.btn-p .ripple-wave,
.nav-auth-btn .ripple-wave  { background: rgba(255,255,255,.22); }
.btn-s .ripple-wave         { background: rgba(201,168,76,.28); }
.btn-teal .ripple-wave      { background: rgba(91,196,196,.32); }
.btn-checkout .ripple-wave  { background: rgba(255,255,255,.2); }
.btn-danger .ripple-wave    { background: rgba(192,74,74,.32); }
.btn-success .ripple-wave   { background: rgba(74,154,106,.32); }
.variant-add .ripple-wave   { background: rgba(91,196,196,.3); }
@keyframes rippleExpand {
  to { transform: scale(5); opacity: 0; }
}

/* ── Button press feedback ── */
.btn-p:active,
.btn-s:active,
.btn-teal:active,
.btn-checkout:active,
.btn-danger:active,
.btn-success:active,
.variant-add:active,
.nav-auth-btn:active {
  transform: scale(.97) translateY(1px) !important;
  transition: transform .08s !important;
}

/* ── Modal premium entrance ── */
.modal-overlay.open .modal,
.modal-overlay.open .auth-modal {
  animation: modalEnterPremium .38s cubic-bezier(.22, 1, .36, 1);
}
@keyframes modalEnterPremium {
  from { opacity: 0; transform: scale(.93) translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Cart / sidebar spring transition ── */
.cart-sidebar {
  transition: transform .38s cubic-bezier(.34, 1.15, .64, 1) !important;
}
.sidebar {
  transition: transform .38s cubic-bezier(.34, 1.1, .64, 1) !important;
}

/* ── Form input premium focus ── */
.form-input:focus {
  box-shadow: 0 0 0 3px rgba(91,196,196,.12), 0 0 18px rgba(91,196,196,.08) !important;
  transform: translateY(-1px);
  transition: all .22s cubic-bezier(.22, 1, .36, 1) !important;
}

/* ── Category card rich hover overlay ── */
.category-card-rich {
  position: relative;
  overflow: hidden;
}
.category-card-rich::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(175deg, rgba(201,168,76,.07) 0%, transparent 45%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.category-card-rich:hover::after { opacity: 1; }

/* ── Category card glow ring ── */
.category-card:hover {
  box-shadow:
    0 18px 44px rgba(0,0,0,.46),
    0 0 0 1px rgba(201,168,76,.16),
    inset 0 0 30px rgba(201,168,76,.025) !important;
}

/* ── Product card accent top line ── */
.product-card-rich::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent) !important;
  opacity: 0;
  transition: opacity .3s;
  z-index: 2;
}
.product-card-rich:hover::before { opacity: 1 !important; }
.product-card-rich:hover {
  box-shadow:
    0 22px 52px rgba(0,0,0,.52),
    0 0 0 1px rgba(91,196,196,.16),
    inset 0 0 40px rgba(91,196,196,.025) !important;
}

/* ── Service card hover glow ── */
.service-card:hover {
  box-shadow:
    0 22px 52px rgba(0,0,0,.5),
    0 0 0 1px rgba(201,168,76,.16),
    inset 0 0 40px rgba(201,168,76,.025) !important;
}

/* ── Variant add hover glow ── */
.variant-add:hover {
  box-shadow: 0 0 14px rgba(91,196,196,.3) !important;
}

/* ── Cat tab glow ── */
.cat-tab.active {
  box-shadow: 0 0 14px rgba(91,196,196,.15);
}

/* ── Vouch bubble hover ── */
.vouch-bubble {
  transition: transform .25s ease, box-shadow .25s ease;
}
.vouch-bubble:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 28px rgba(0,0,0,.3), 0 0 0 1px rgba(201,168,76,.12);
}

/* ── Auth crest pulse ── */
.auth-crest-core {
  animation: corePulse 3.5s ease-in-out infinite;
}
@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 25px rgba(201,168,76,.18); }
  50%       { box-shadow: 0 0 55px rgba(201,168,76,.4), 0 0 90px rgba(201,168,76,.12); }
}

/* ── How It Works — process section ── */
.process-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem 2.5rem;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 43px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--teal-dim), transparent);
  opacity: .3;
  pointer-events: none;
}
.process-step {
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
  transition: all .3s;
  cursor: default;
}
.process-step:hover {
  border-color: var(--border2);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(201,168,76,.08);
}
.process-step-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,168,76,.18), rgba(201,168,76,.06));
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .86rem;
  color: var(--gold-light);
  margin: 0 auto .85rem;
  position: relative;
  z-index: 1;
}
.process-step-icon {
  font-size: 1.45rem;
  margin-bottom: .6rem;
  display: block;
}
.process-step-title {
  font-family: var(--font-heading);
  font-size: .9rem;
  color: var(--gold-pale);
  margin-bottom: .35rem;
}
.process-step-desc {
  font-size: .83rem;
  color: var(--textd);
  line-height: 1.55;
}

/* ── Trust strip ── */
.trust-strip {
  max-width: 1200px;
  margin: 0 auto;
  padding: .5rem 1.5rem 2rem;
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
}
.trust-item {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--r2);
  transition: all .3s;
}
.trust-item:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.trust-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: rgba(91,196,196,.1);
  border: 1px solid rgba(91,196,196,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--teal);
  flex-shrink: 0;
}
.trust-item-title {
  font-family: var(--font-heading);
  font-size: .78rem;
  color: var(--gold-pale);
  margin-bottom: .1rem;
}
.trust-item-desc {
  font-size: .75rem;
  color: var(--textd);
}

/* ── Premium footer structure ── */
footer {
  background: rgba(7,9,18,.98) !important;
  padding: 3.5rem 2rem 2rem !important;
  margin-top: 5rem !important;
  text-align: left !important;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--teal-dim), transparent);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-brand-tagline {
  font-size: .88rem;
  color: var(--textd);
  line-height: 1.65;
  margin: .65rem 0 1rem;
  max-width: 28ch;
  font-style: italic;
}
.footer-col-title {
  font-family: var(--font-heading);
  font-size: .64rem;
  letter-spacing: .16em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-bottom: .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.footer-col-links a {
  color: var(--textd);
  font-size: .9rem;
  cursor: pointer;
  transition: color .2s;
}
.footer-col-links a:hover { color: var(--gold); }
.footer-bottom-bar {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-social-row {
  display: flex;
  gap: .5rem;
}
.footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--textd);
  font-size: .8rem;
  cursor: pointer;
  transition: all .2s;
}
.footer-social-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: rgba(201,168,76,.06);
}

/* ── Scroll progress bar ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
  box-shadow: 0 0 6px rgba(201,168,76,.4);
  pointer-events: none;
}

/* ── Hero CTA primary sizing ── */
.hero-cta-primary {
  font-size: .78rem !important;
  padding: 11px 24px !important;
  letter-spacing: .1em !important;
}

/* ── Admin nav active right indicator ── */
.admin-nav-item.active {
  position: relative;
}
.admin-nav-item.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--teal);
  border-radius: 3px 0 0 3px;
}

/* ── Responsive additions ── */
@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
  .process-steps::before { display: none; }
  .trust-strip { gap: .65rem; }
  .trust-item { min-width: 140px; }
}
@media (max-width: 580px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom-bar { flex-direction: column; text-align: center; }
  .trust-strip { flex-direction: column; }
  .process-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* ── Mobile — core fixes ──────────────────────────────────── */
@media (max-width: 640px) {
  /* Nav */
  .nav-inner { padding: 0 .75rem; }
  #brandName { display: none; }                /* hide name on smallest, keep logo mark */
  .nav-right { gap: .3rem; }

  /* Auth modal */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-lg { max-height: 95dvh; border-radius: var(--r3) var(--r3) 0 0; }
  .auth-shell { grid-template-columns: 1fr !important; }
  .auth-art-panel { display: none !important; }   /* hide left panel, show only form on phone */
  .auth-form-panel { padding: 1.5rem 1.25rem; }

  /* Cart */
  .cart-sidebar { width: 100% !important; max-width: 100%; }

  /* Hero */
  .hero { padding: 4rem 1rem 1.5rem !important; }
  .hero-title { font-size: 1.75rem !important; }
  .hero-sub { font-size: .9rem !important; }
  .hero-cta-row { flex-direction: column; gap: .6rem !important; }
  .hero-cta-primary, .hero-cta-secondary { width: 100%; justify-content: center; }
  .hero-mini-cards { display: none; }
  .hero-emblem { max-width: 220px; margin-top: .5rem; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }

  /* Trust strip */
  .trust-strip { padding: .5rem 1rem 1.5rem !important; }
  .trust-item { min-width: unset; }

  /* Sections */
  .section { padding: 1.5rem .9rem !important; }
  .sec-head { flex-direction: column; gap: .75rem !important; align-items: flex-start !important; }

  /* Products */
  .products-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  .product-card { padding: 1rem !important; }
  .product-name { font-size: .85rem !important; }

  /* Checkout */
  .checkout-grid { grid-template-columns: 1fr !important; }
  .checkout-box { padding: 1.1rem !important; }
  .btn-p.btn-checkout-submit, .checkout-box .btn-p { width: 100% !important; }

  /* Profile */
  .profile-grid { grid-template-columns: 1fr !important; }
  .profile-side { display: flex; flex-direction: column; align-items: center; padding: 1.25rem !important; }
  .profile-nav { flex-direction: row; flex-wrap: wrap; gap: .35rem; width: 100%; justify-content: center; }
  .profile-nav-btn { padding: 7px 10px; font-size: .67rem; flex: 1; justify-content: center; min-width: 70px; }

  /* Admin */
  .admin-grid { grid-template-columns: 1fr !important; }
  .admin-side { display: flex; flex-wrap: wrap; gap: .3rem; flex-direction: row; padding: .75rem !important; }
  .admin-nav-item { flex: 1; min-width: 70px; padding: 7px 6px !important; font-size: .62rem; justify-content: center; flex-direction: column; gap: .2rem; text-align: center; }
  .admin-nav-item i { margin: 0; }
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Modals */
  .modal { border-radius: 16px 16px 0 0; max-height: 90dvh; }
  .modal-overlay { align-items: flex-end; }

  /* Forms */
  .form-row { grid-template-columns: 1fr !important; }
  .action-row { flex-wrap: wrap; gap: .4rem; }
  .action-row button { flex: 1; min-width: 70px; }

  /* Inbox */
  .inbox-msg-body { font-size: .85rem !important; }
}

@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr !important; }
  .hero-title { font-size: 1.5rem !important; }
}

/* ── Inbox / DM styles ────────────────────────────────────── */
.inbox-list { display: flex; flex-direction: column; gap: .85rem; }
.inbox-msg {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.1rem 1.25rem;
  position: relative;
  transition: all .25s;
}
.inbox-msg.unread {
  border-color: rgba(201,168,76,.28);
  background: linear-gradient(135deg, rgba(201,168,76,.05), var(--card));
}
.inbox-msg-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .55rem;
}
.inbox-msg-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0;
}
.inbox-msg-icon.approved  { background: rgba(74,154,106,.15); color: #7ecf96; border: 1px solid rgba(74,154,106,.2); }
.inbox-msg-icon.rejected  { background: rgba(192,74,74,.15);  color: #e07070; border: 1px solid rgba(192,74,74,.2); }
.inbox-msg-icon.delivered { background: rgba(91,196,196,.12); color: var(--teal); border: 1px solid rgba(91,196,196,.2); }
.inbox-msg-icon.info      { background: rgba(201,168,76,.1);  color: var(--gold); border: 1px solid rgba(201,168,76,.15); }
.inbox-msg-title {
  font-family: var(--font-heading);
  font-size: .82rem;
  color: var(--gold-pale);
  flex: 1;
}
.inbox-msg-time { font-size: .73rem; color: var(--textd); }
.inbox-msg-body { font-size: .88rem; color: var(--textm); line-height: 1.6; }
.inbox-msg-ctas { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .85rem; }
.inbox-msg-ctas .btn-teal, .inbox-msg-ctas .btn-s { font-size: .72rem; padding: 5px 14px; }
.inbox-unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); position: absolute; top: 14px; right: 14px;
}

/* ── Bell badge in nav ── */
.inbox-bell-wrap { position: relative; }
.inbox-bell-count {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--rose); color: #fff;
  font-size: .52rem; font-family: 'Cinzel', serif;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
  pointer-events: none;
}
@keyframes bellShake {
  0%,100%{ transform: rotate(0); }
  20%    { transform: rotate(-12deg); }
  40%    { transform: rotate(12deg); }
  60%    { transform: rotate(-8deg); }
  80%    { transform: rotate(8deg); }
}
.bell-shake { animation: bellShake .5s ease; }

/* ── Account stock panel in admin ── */
.acc-stock-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
.acc-stock-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .85rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r); font-size: .82rem; color: var(--textm);
}
.acc-stock-item-label { flex: 1; word-break: break-all; }
.acc-stock-count-badge {
  font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(74,154,106,.15); color: #7ecf96;
  border: 1px solid rgba(74,154,106,.2);
}
.acc-stock-count-badge.empty {
  background: rgba(192,74,74,.15); color: #e07070;
  border-color: rgba(192,74,74,.2);
}
.stock-upload-area {
  border: 1px dashed var(--border2); border-radius: var(--r);
  padding: 1rem; text-align: center;
  color: var(--textd); font-size: .83rem; cursor: pointer;
  transition: all .2s; margin-top: .6rem;
}
.stock-upload-area:hover { border-color: var(--gold-dim); color: var(--gold-pale); }
.stock-upload-area textarea {
  width: 100%; min-height: 90px; resize: vertical;
  background: var(--bg); border: none; outline: none;
  color: var(--text); font-size: .82rem;
  font-family: 'Courier New', monospace; border-radius: var(--r);
  padding: .5rem; margin-top: .5rem;
}


/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-emblem-image,
  .hero-orb-glow,
  .hero-title,
  .hero-stat-num,
  .auth-crest-core { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ripple-wave { animation: none !important; }
}

/* ══════════════════════════════════════════
   FEATURE ENHANCEMENTS — Session 3
   ══════════════════════════════════════════ */

/* ── Page transitions ── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.page.active.page-enter { animation: pageEnter .15s ease forwards; }

/* ── Toast stacking ── */
.toast-container { display: flex; flex-direction: column; gap: .4rem; }

/* ── Stock indicator ── */
.product-badges-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .3rem; }
.stock-dot {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .65rem; font-family: var(--font-heading); letter-spacing: .06em;
  padding: 2px 7px; border-radius: 20px;
}
.stock-dot i { font-size: .45rem; }
.stock-dot.in-stock  { color: #4ade80; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25); }
.stock-dot.no-stock  { color: var(--textd); background: rgba(255,255,255,.04); border: 1px solid var(--border); }

/* ── Wishlist ── */
.wishlist-grid { display: flex; flex-direction: column; gap: .65rem; }
.wishlist-card {
  display: flex; align-items: center; gap: .85rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2); padding: .85rem 1rem;
}
.wishlist-card-icon { font-size: 1.5rem; }
.wishlist-card-info { flex: 1; }
.wishlist-card-name  { font-family: var(--font-heading); font-size: .85rem; color: var(--gold-pale); }
.wishlist-card-price { font-size: .78rem; color: var(--textd); margin-top: .2rem; }
.wishlist-card-actions { display: flex; gap: .4rem; }

/* ── Profile section titles & helpers ── */
.profile-section-title {
  font-family: var(--font-heading); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-dim); padding-bottom: .5rem;
  border-bottom: 1px solid var(--border); margin-bottom: 1rem;
}
.profile-section-title.mt3 { margin-top: 2rem; }
.nav-badge {
  background: var(--rose); color: #fff;
  border-radius: 10px; padding: 1px 6px;
  font-size: .6rem; margin-left: .25rem;
}
.profile-avatar-img {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--gold-dim); margin-bottom: .5rem;
}

/* ── Order item chips ── */
.order-items-with-icons { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0; }
.order-item-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; color: var(--textm);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 9px;
}
.order-item-icon { font-size: 1rem; }
.admin-note-msg  { display: flex; align-items: flex-start; gap: .5rem; }

/* ── Admin orders table — icon chips & bulk ── */
.order-icon-chip {
  display: inline-block;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 1px 8px; font-size: .8rem;
  margin: 1px;
}
.admin-note-row { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.admin-note-input { flex: 1; padding: .3rem .5rem !important; font-size: .8rem !important; }
.bulk-actions-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem 0 .75rem; flex-wrap: wrap; }
.order-bulk-chk { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; }
tr.bulk-selected td { background: rgba(201,168,76,.06) !important; }

/* ── Receipt zoom ── */
.receipt-zoom-wrap { text-align: center; cursor: zoom-in; overflow: hidden; }
.receipt-zoom-wrap.zoomed { cursor: zoom-out; overflow: auto; }
.receipt-img { width: 100%; border-radius: 12px; transition: transform .3s ease; display: block; }
.receipt-img.zoomed { transform: scale(2); transform-origin: top left; width: auto; max-width: none; border-radius: 0; }
.receipt-zoom-hint { font-size: .75rem; color: var(--textd); margin-top: .4rem; }

/* ── Announcement bell (reuses inbox-bell-wrap structure) ── */
#announcementBellBtn { position: relative; }

/* ── Admin mobile icon-only tabs ── */
@media (max-width: 480px) {
  .admin-side { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
  .admin-nav-item { justify-content: center; padding: .55rem .65rem; }
  .admin-nav-item span { display: none; }
  .admin-nav-item i { margin: 0; font-size: 1.05rem; }
}

/* ── Mobile nav: compact on small screens ── */
@media (max-width: 600px) {
  #brandName { display: none; }
  .nav-user-name { display: none; }
  .nav-user-chip { padding: 4px 5px; border-radius: 50%; }
  nav { padding: 0 .75rem; }
  #announcementBellBtn { display: none; }
  #announcementBell { display: none !important; }
  .nav-right { gap: .35rem; }
  #navAuthSlot { gap: .35rem; }
}

/* ── Session warn toast ── */
.session-warn-toast { min-width: 260px; }

/* ── Utility ── */
.mt1 { margin-top: .5rem; }
.mt2 { margin-top: 1rem; }
.action-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }