/* Storefront visual layer inspired by the supplied Elixer Store reference.
   Loaded only by customer-facing pages; admin.php and admin_reports.php are excluded. */
:root {
  color-scheme: dark !important;
  --main: #13e84a !important;
  --main-rgb: 19,232,74 !important;
  --sub: #05ad39 !important;
  --sub-rgb: 5,173,57 !important;
  --text: #edf3ee !important;
  --text-soft: #a6b0a8 !important;
  --text-mute: #758078 !important;
  --line: rgba(255,255,255,.09) !important;
  --main-05: rgba(19,232,74,.05) !important;
  --main-10: rgba(19,232,74,.10) !important;
  --main-20: rgba(19,232,74,.17) !important;
  --main-30: rgba(19,232,74,.28) !important;
  --main-50: rgba(19,232,74,.45) !important;
  --pm-bg: #070907 !important;
  --pm-surface: #101411 !important;
  --pm-text: #edf3ee !important;
  --pm-text-soft: #a6b0a8 !important;
  --pm-border: rgba(255,255,255,.09) !important;
}
html { background: #070907 !important; color-scheme: dark !important; scroll-padding-top: 90px; }
body {
  background: radial-gradient(900px 560px at 78% 14%, rgba(0,210,62,.075), transparent 58%), #070907 !important;
  background-image: radial-gradient(900px 560px at 78% 14%, rgba(0,210,62,.075), transparent 58%) !important;
  color: #edf3ee !important;
  font-family: 'Kanit', system-ui, sans-serif !important;
  letter-spacing: .01em;
}
body::before, body::after { content: none !important; display: none !important; background: none !important; }
::selection { background: rgba(19,232,74,.32); color: #fff; }
::-webkit-scrollbar-thumb { background: #1d6f34 !important; border: 2px solid #070907 !important; }

/* Compact dark navigation like the reference site */
.nav-wrap {
  top: 0 !important; padding: 8px 0 !important;
  background: rgba(7,9,7,.94) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.2) !important; backdrop-filter: blur(14px) !important;
}
.nav-inner {
  max-width: 1320px !important; min-height: 48px; padding: 6px 10px !important;
  gap: 10px !important; border-radius: 12px !important;
  background: #0b0e0c !important; border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
.nav-logo { height: 32px !important; max-width: 120px; object-fit: contain; }
.nav-links { gap: 2px !important; }
.nav-link-item {
  padding: 8px 11px !important; border-radius: 8px !important; color: #aeb7b0 !important;
  font-size: 12px !important; font-weight: 500; box-shadow: none !important;
}
.nav-link-item i { color: #7d8a80 !important; }
.nav-link-item:hover { background: rgba(19,232,74,.08) !important; color: #e7f6eb !important; }
.nav-link-item:hover i { color: #4bec70 !important; }
.nav-link-item.active { color: #11eb49 !important; background: rgba(19,232,74,.09) !important; box-shadow: inset 0 -2px #13e84a !important; }
.nav-link-item.active i { color: #13e84a !important; }
.nav-actions { gap: 7px !important; }
.nav-btn-ghost, .nav-user {
  min-height: 34px; padding: 6px 11px !important; border-radius: 8px !important;
  background: #101411 !important; border: 1px solid rgba(255,255,255,.09) !important;
  color: #e7eee8 !important; font-size: 11px !important;
}
.nav-btn-ghost:hover, .nav-user:hover { border-color: rgba(19,232,74,.28) !important; background: #111812 !important; color: #fff !important; }
.nav-btn-primary, .btn-primary, .btn-main, .btn-buy-main {
  background: #13e84a !important; background-image: none !important; border: 1px solid #13e84a !important;
  color: #061008 !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(19,232,74,.15) !important;
}
.nav-btn-primary:hover, .btn-primary:hover, .btn-main:hover, .btn-buy-main:hover { background: #38f267 !important; border-color: #38f267 !important; color: #041007 !important; }
.nav-toggle { color: #e7eee8 !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 8px !important; padding: 6px 9px !important; }
.nav-links.open { background: #0b100c !important; border: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 20px 42px rgba(0,0,0,.45) !important; }
.nav-links.open .nav-link-item { color: #d5ddd7 !important; }
.dropdown-menu { background: #111612 !important; border: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 18px 40px rgba(0,0,0,.4) !important; }
.dropdown-item { color: #d7ded8 !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(19,232,74,.1) !important; color: #fff !important; }

/* Homepage: editorial welcome + branded showcase + compact metric rail */
.storefront-container { max-width: 1320px !important; padding: 28px 18px 64px !important; }
.elx-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.95fr); gap: 18px; align-items: stretch; margin: 20px 0 14px; }
.elx-hero-copy {
  min-height: 270px; padding: clamp(24px,4vw,48px); display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: linear-gradient(135deg,#0d120e,#090b09 75%);
  position: relative; overflow: hidden;
}
.elx-hero-copy::after { content: ''; position: absolute; right: -120px; top: -180px; width: 380px; height: 380px; border: 1px solid rgba(19,232,74,.09); border-radius: 50%; box-shadow: 0 0 0 35px rgba(19,232,74,.018),0 0 0 75px rgba(19,232,74,.012); pointer-events: none; }
.elx-eyebrow, .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #39e85f !important; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.elx-eyebrow i { font-size: 10px; }
.elx-hero-title { position: relative; z-index: 1; margin: 14px 0 8px; color: #f0f4f1 !important; font-size: clamp(28px,3.5vw,45px); line-height: 1.18; font-weight: 700; letter-spacing: -.035em; }
.elx-hero-title span { display: block; color: #18ed4f !important; }
.elx-hero-copy p { position: relative; z-index: 1; max-width: 560px; margin: 0; color: #9da79f !important; font-size: 13px; line-height: 1.8; }
.elx-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; position: relative; z-index: 1; }
.elx-hero-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 650; }
.elx-action-main { background: #13e84a; color: #061008 !important; }
.elx-action-main:hover { background: #38f267; color: #041007 !important; }
.elx-action-quiet { background: #111512; color: #dce4de !important; border: 1px solid rgba(255,255,255,.09); }
.elx-action-quiet:hover { border-color: rgba(19,232,74,.35); color: #fff !important; }
.elx-hero-showcase {
  min-height: 270px; padding: clamp(24px,3vw,38px); display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(19,232,74,.14); border-radius: 14px;
  background: radial-gradient(ellipse at 84% 20%, rgba(20,190,61,.24), transparent 45%), linear-gradient(140deg,#101812,#080b09 66%);
}
.elx-hero-showcase::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(120deg,black,transparent 82%); }
.elx-showcase-mark { color: #98a69a !important; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.elx-showcase-title { margin: 6px 0 4px; color: #f2f6f3 !important; font-family: 'Space Grotesk','Kanit',sans-serif; font-size: clamp(26px,3.8vw,48px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.elx-showcase-title span { color: #18ed4f !important; }
.elx-showcase-caption { margin: 0; color: #929e95 !important; font-size: 12px; }
.elx-showcase-line { width: 48px; height: 2px; margin-top: 18px; background: #14e94a; box-shadow: 0 0 18px rgba(19,232,74,.45); }
.elx-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 12px 0 18px; }
.elx-metric { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 13px 15px; background: #0d110e; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; }
.elx-metric-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #1beb4e !important; background: rgba(19,232,74,.08); border: 1px solid rgba(19,232,74,.11); border-radius: 8px; }
.elx-metric-label { display: block; color: #879187 !important; font-size: 10px; line-height: 1.3; }
.elx-metric-value { display: block; color: #eaf0eb !important; font-family: 'Space Grotesk','Kanit',sans-serif; font-size: 19px; font-weight: 700; line-height: 1.25; }
.elx-metric-value small { color: #99a39b !important; font-family: 'Kanit',sans-serif; font-size: 10px; font-weight: 400; margin-left: 4px; }

/* Shared section hierarchy, trust cards and announcement */
.elx-section { margin: 36px 0 18px; }
.elx-section-head, .section-head, .section-header { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 36px 0 16px; }
.elx-section-title, .section-title { margin: 4px 0 0 !important; color: #eff3f0 !important; font-size: clamp(20px,2.3vw,27px) !important; line-height: 1.25; font-weight: 700 !important; letter-spacing: -.025em !important; }
.elx-section-desc, .section-desc { margin: 5px 0 0 !important; color: #8e9991 !important; font-size: 12px !important; }
.elx-section-link, .section-head > a { display: inline-flex !important; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px !important; border: 1px solid rgba(19,232,74,.19) !important; border-radius: 7px !important; background: rgba(19,232,74,.07) !important; color: #42ed69 !important; font-size: 11px !important; text-decoration: none !important; }
.elx-section-link:hover, .section-head > a:hover { background: rgba(19,232,74,.14) !important; color: #b5ffc5 !important; }
.info-panel { margin: 16px 0 28px !important; padding: 12px !important; border-radius: 10px !important; background: #0c100d !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; }
.announce-pill { gap: 10px !important; padding: 5px 8px !important; background: transparent !important; border: 0 !important; border-radius: 7px !important; }
.announce-icon { width: 30px !important; height: 30px !important; color: #13e84a !important; background: rgba(19,232,74,.09) !important; border: 1px solid rgba(19,232,74,.12); }
.announce-marquee { color: #acb5ae !important; font-size: 11px !important; }
.elx-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 16px 0 30px; }
.elx-benefit { display: flex; gap: 13px; padding: 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: #0c100d; }
.elx-benefit-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(19,232,74,.08); color: #21e94f !important; }
.elx-benefit h3 { margin: 0 0 4px; color: #e9efea !important; font-size: 13px; font-weight: 650; }
.elx-benefit p { margin: 0; color: #89948c !important; font-size: 11px; line-height: 1.65; }

/* Category and product discovery */
.elx-categories { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.elx-category { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: #0d110e; text-decoration: none !important; transition: border-color .18s ease,background .18s ease,transform .18s ease; }
.elx-category:hover { border-color: rgba(19,232,74,.3); background: #101712; transform: translateY(-2px); }
.elx-category img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); }
.elx-category-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: rgba(19,232,74,.08); border: 1px solid rgba(19,232,74,.12); color: #22ec50 !important; font-size: 17px; }
.elx-category-name { display: block; color: #e5ece6 !important; font-size: 12px; font-weight: 650; }
.elx-category-count { display: block; margin-top: 3px; color: #7f8b81 !important; font-size: 10px; }
.card, .card-item, .bento-card, .stats-card, .section-card, .rv-wrap, .rv-item,
.product-image-box, .product-info-box, .product-desc-box, .category-hero, .shop-hero,
.auth-card, .login-card, .register-card, .profile-card, .history-card {
  background-color: #0f1310 !important; border-color: rgba(255,255,255,.08) !important; color: #e8eee9 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
}
.bento-card, .stat-card { padding: 16px !important; min-height: unset !important; }
.bento-icon { width: 34px !important; height: 34px !important; margin: 0 !important; border-radius: 8px !important; background: rgba(19,232,74,.08) !important; color: #18e84b !important; box-shadow: none !important; }
.bento-label { color: #879187 !important; font-size: 10px !important; }
.bento-value, .stat-card .stat-num { color: #eef3ef !important; font-size: 18px !important; }
.bento-value small { color: #8d9990 !important; }
.card-item { overflow: hidden; border-radius: 10px !important; text-decoration: none !important; transition: transform .18s ease,border-color .18s ease,background .18s ease !important; }
.card-item:hover { transform: translateY(-3px) !important; border-color: rgba(19,232,74,.3) !important; background: #111612 !important; box-shadow: 0 12px 28px rgba(0,0,0,.26) !important; }
.card-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.card-body { background: #0f1310 !important; padding: 12px !important; }
.card-title { color: #eaf0eb !important; font-size: 12px !important; font-weight: 600 !important; }
.card-price { color: #39ec63 !important; font-family: 'Space Grotesk','Kanit',sans-serif; font-size: 14px !important; font-weight: 700 !important; }
.cat-card-new { border: 1px solid rgba(255,255,255,.09) !important; border-radius: 10px !important; box-shadow: none !important; background: #0f1310 !important; }
.cat-card-new:hover { border-color: rgba(19,232,74,.35) !important; box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; }
.cat-card-overlay { background: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.86) 100%) !important; }
.cat-card-label { color: #f0f5f1 !important; }
.cat-card-count, .product-badge-stock { color: #a8b2aa !important; }
.product-thumb-wrap { background: #101610 !important; }
.soldout-overlay { background: rgba(4,7,5,.78) !important; color: #e8eee9 !important; }
.shop-hero, .category-hero { border-radius: 12px !important; padding: 26px 16px !important; border: 1px solid rgba(255,255,255,.08) !important; background: radial-gradient(ellipse at 50% 0,rgba(19,232,74,.08),transparent 65%),#0b0f0c !important; box-shadow: none !important; }
.shop-hero-logo { max-height: 86px !important; object-fit: contain; }
.shop-hero-sub, .category-desc { color: #98a39a !important; }
.product-title, .category-title { color: #eff4f0 !important; }
.product-price-tag, .card-price, .rv-avg { color: #38eb62 !important; }
.product-stock-badge { background: rgba(19,232,74,.08) !important; border-color: rgba(19,232,74,.18) !important; color: #60ef7e !important; }
.product-detail-wrap { max-width: 1320px !important; }
.breadcrumb-custom, .breadcrumb-custom a { color: #89948c !important; }
.breadcrumb-custom a:hover { color: #38eb62 !important; }
.rv-wrap { border-radius: 10px !important; }

/* Inputs, tables, dialogs and member-facing utilities stay legible */
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select, .form-control, .form-select {
  background-color: #0b0f0c !important; color: #e9f0ea !important; border-color: rgba(255,255,255,.13) !important;
}
input::placeholder, textarea::placeholder, .form-control::placeholder { color: #7f8b82 !important; }
input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus { border-color: rgba(19,232,74,.65) !important; box-shadow: 0 0 0 .2rem rgba(19,232,74,.12) !important; }
select option { background: #0f1310; color: #edf3ee; }
.table, .table > :not(caption) > * > * { color: #e7eee8 !important; border-color: rgba(255,255,255,.08) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }
.table thead th { background: #121813 !important; color: #aeb9b0 !important; }
.modal-content, .swal2-popup { background: #111612 !important; color: #edf3ee !important; border: 1px solid rgba(255,255,255,.1) !important; }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.08) !important; }
.alert-light, .bg-white, .text-bg-light { background: #111612 !important; color: #eaf0eb !important; border-color: rgba(255,255,255,.08) !important; }
.text-muted, small, .small, .form-text { color: #8b968e !important; }
a { color: #43ec69; }
a:hover { color: #85f69d; }
hr { border-color: rgba(255,255,255,.09) !important; opacity: 1 !important; }

/* Footer, ticker and floating controls */
.site-footer, footer { margin-top: 52px; background: #090c0a !important; border-top: 1px solid rgba(255,255,255,.07) !important; border-radius: 0 !important; color: #a4aea6 !important; }
.footer-ticker { background: #0e1710 !important; border-top: 1px solid rgba(19,232,74,.12); border-bottom: 1px solid rgba(19,232,74,.12); }
.footer-ticker-item { color: #54e973 !important; font-size: 10px !important; letter-spacing: .06em; }
.footer-logo { background: #111712 !important; border-color: rgba(255,255,255,.09) !important; }
.footer-name { color: #edf3ee !important; }
.footer-desc, .footer-copy { color: #89948c !important; }
.pm-to-top { background: #13e84a !important; color: #061008 !important; box-shadow: 0 8px 22px rgba(19,232,74,.2) !important; }
.pm-progress { background: #13e84a !important; }

:focus-visible { outline: 2px solid #52f175 !important; outline-offset: 2px; }
@media (max-width: 992px) {
  .elx-hero { grid-template-columns: minmax(0,1fr) minmax(300px,.9fr); }
  .elx-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .elx-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nav-wrap { padding: 6px 0 !important; }
  .nav-links { top: 68px !important; }
}
@media (max-width: 680px) {
  .storefront-container { padding: 16px 12px 44px !important; }
  .elx-hero { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .elx-hero-copy { min-height: 230px; padding: 24px 20px; }
  .elx-hero-showcase { min-height: 180px; padding: 22px 20px; }
  .elx-hero-title { font-size: 31px; }
  .elx-showcase-title { font-size: 31px; }
  .elx-metrics { gap: 8px; margin: 10px 0 14px; }
  .elx-metric { min-height: 64px; padding: 10px; gap: 9px; }
  .elx-metric-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .elx-metric-value { font-size: 17px; }
  .elx-benefits { grid-template-columns: 1fr; gap: 8px; }
  .elx-section-head, .section-head, .section-header { align-items: flex-start; margin-top: 28px; }
  .nav-inner { min-height: 44px; padding: 5px 7px !important; border-radius: 10px !important; }
  .nav-logo { max-width: 92px; height: 29px !important; }
  .nav-actions .nav-btn-ghost { display: none !important; }
  .nav-btn-primary, .nav-user { min-height: 31px; padding: 5px 8px !important; font-size: 10px !important; }
  .nav-links { left: 12px !important; right: 12px !important; top: 62px !important; }
  .nav-links.open .nav-link-item { padding: 11px 12px !important; }
  .card-body { padding: 10px !important; }
  .card-title { font-size: 11px !important; min-height: 2.5em; }
  .site-footer { margin-top: 36px; }
}
@media (max-width: 360px) {
  .elx-metric { align-items: flex-start; flex-direction: column; }
  .nav-logo { max-width: 70px; }
  .nav-btn-primary { font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.elx-banner { overflow: hidden; margin: 0 0 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: #0d110e; }
.elx-banner .carousel-item img { display: block; width: 100%; height: clamp(150px,24vw,300px); object-fit: cover; }
/* Keep catalog content visible even when animation scripts are delayed or disabled. */
.reveal, [data-aos] { opacity: 1 !important; visibility: visible !important; transform: none !important; }