/*
 * MODX Tactical Gold theme
 * Palette sampled from the approved visual reference:
 * matte black #0e0d0b, warm charcoal #18150f, vault gold #fed003,
 * aged gold #c7ac25, warm ivory #e1ded2, steel taupe #b0a99a.
 * Loaded last so the theme can be removed without touching app behavior.
 */

:root {
  color-scheme: dark;
  --paper: #0e0d0b;
  --surface: #18150f;
  --surface-soft: #211c13;
  --ink: #f1eee5;
  --black: #090806;
  --muted: #b0a99a;
  --muted-dark: #8f8778;
  --line: rgba(254, 208, 3, .16);
  --line-dark: rgba(225, 222, 210, .16);
  --blue: #fed003;
  --blue-dark: #e0b700;
  --blue-soft: #2b2410;
  --shadow-soft: 0 16px 46px rgba(0, 0, 0, .28);
  --shadow-strong: 0 30px 90px rgba(0, 0, 0, .48);
}

html,
body.storefront {
  background: var(--paper);
  color: var(--ink);
}

body.storefront {
  background-image: none;
}

.storefront .skip-link,
.storefront .primary-button,
.storefront .add-button,
.storefront .filter-tab.active,
.storefront .filter-tab:hover {
  background: var(--blue);
  color: #14110c;
}

.storefront .primary-button:hover,
.storefront .add-button:hover,
.storefront .add-button.is-added {
  background: #ffe04a;
  color: #14110c;
}

.storefront .announcement {
  background: var(--blue);
  color: #14110c;
}

.storefront .announcement span:last-child {
  color: #513210;
}

.storefront .announcement-activity {
  display: inline-block;
  min-width: 190px;
  text-align: center;
  transition: opacity .18s ease, transform .18s ease;
}

.storefront .announcement-activity.is-changing {
  opacity: 0;
  transform: translateY(3px);
}

.storefront .site-header {
  border-color: rgba(254, 208, 3, .22);
  background: rgba(20, 17, 12, .9);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .34);
}

.storefront .brand-mark,
.storefront .footer-brand .brand-mark {
  border-color: rgba(254, 208, 3, .56);
  background: #e1ded2;
}

.storefront .brand-mark img,
.admin-page .admin-mark img,
.legal-page .legal-logo img {
  filter: grayscale(1) sepia(1) saturate(8) hue-rotate(354deg) brightness(1.04) contrast(1.08);
}

.storefront .brand-copy strong,
.storefront .desktop-nav a:hover,
.storefront .desktop-nav a.active {
  color: var(--ink);
}

.storefront .brand-copy small,
.storefront .desktop-nav a {
  color: var(--muted);
}

.storefront .desktop-nav a::after {
  background: var(--blue);
}

.storefront .search-button,
.storefront .cart-button,
.storefront .menu-toggle,
.storefront .filter-tab,
.storefront .search-close,
.storefront .cart-close,
.storefront .modal-close {
  border-color: var(--line);
  background: #211c13;
  color: var(--ink);
}

.storefront .search-button:hover,
.storefront .cart-button:hover,
.storefront .menu-toggle:hover,
.storefront .search-close:hover,
.storefront .cart-close:hover,
.storefront .modal-close:hover {
  border-color: rgba(254, 208, 3, .5);
  background: #2b2410;
}

.storefront .cart-button i {
  background: var(--blue);
  color: #14110c;
}

.storefront .hero {
  border: 1px solid rgba(254, 208, 3, .2);
  background: var(--black);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .54);
}

.storefront .hero-shade {
  background:
    linear-gradient(90deg, rgba(14, 13, 11, .08) 18%, rgba(14, 13, 11, .94) 86%),
    linear-gradient(0deg, rgba(14, 13, 11, .6), transparent 48%);
}

.storefront .eyebrow,
.storefront .hero .eyebrow,
.storefront .inverse .eyebrow,
.storefront .order-flow > .eyebrow,
.storefront .category,
.storefront .section-index,
.storefront .process-grid li > span,
.storefront .benefit > span,
.storefront .footer-main > a:last-child,
.storefront .modal-price,
.storefront .search-result b {
  color: var(--blue);
}

.storefront .hero h1,
.storefront .section-heading.inverse h2,
.storefront .process-grid h3,
.storefront .site-footer {
  color: #f7f3e8;
}

.storefront .hero h1 em {
  color: var(--blue);
}

.storefront .hero-copy > p {
  color: #d8d1ae;
}

.storefront .primary-button.light {
  background: var(--blue);
  color: #14110c;
}

.storefront .primary-button.light:hover {
  background: #ffe04a;
}

.storefront .secondary-button {
  border-color: rgba(254, 208, 3, .52);
  background: rgba(14, 13, 11, .38);
  color: #f1eee5;
}

.storefront .secondary-button:hover {
  border-color: var(--blue);
  background: rgba(254, 208, 3, .1);
  color: #fff7d0;
}

.storefront .secondary-button.dark {
  border-color: var(--line);
  color: var(--ink);
}

.storefront .secondary-button.dark:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: #14110c;
}

.storefront .hero-proof div {
  border-inline-start-color: rgba(254, 208, 3, .24);
}

.storefront .hero-proof dt {
  color: var(--blue);
}

.storefront .hero-proof dd {
  color: #b0a99a;
}

.storefront .product-quick-list,
.storefront .product-card,
.storefront .benefit,
.storefront .catalog-toolbar {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.storefront .game-chip,
.storefront .cart-item,
.storefront .search-field input {
  border-color: var(--line);
  background: var(--surface-soft);
}

.storefront .game-chip:hover,
.storefront .game-chip.selected,
.storefront .search-result:hover {
  border-color: rgba(254, 208, 3, .56);
  background: var(--blue-soft);
}

.storefront .game-chip strong,
.storefront .product-meta h3,
.storefront .price,
.storefront .modal-price,
.storefront .benefit h3,
.storefront .modal-content h2,
.storefront .feature-title,
.storefront .feature-list,
.storefront .search-head h2,
.storefront .search-result,
.storefront .cart-head h2,
.storefront .cart-item-copy strong,
.storefront .cart-total strong,
.storefront .cart-empty strong {
  color: var(--ink);
}

.storefront .toolbar-label,
.storefront .section-heading > p,
.storefront .card-description,
.storefront .about-copy > p,
.storefront .benefit p,
.storefront .launch-note p,
.storefront .modal-description,
.storefront .search-dialog > p,
.storefront .search-field,
.storefront .search-result small,
.storefront .search-hint,
.storefront .cart-description,
.storefront .cart-item-copy small,
.storefront .cart-total span,
.storefront .cart-empty p,
.storefront .cart-footer small {
  color: var(--muted);
}

.storefront .product-card::after {
  background: radial-gradient(320px circle at var(--spot-x, 50%) var(--spot-y, 35%), rgba(254, 208, 3, .12), transparent 68%);
}

.storefront .product-card {
  isolation: isolate;
  transition: border-color .26s ease, box-shadow .36s var(--motion-ease-out), transform .36s var(--motion-ease-out);
}

.storefront .product-card::after {
  transition: opacity .34s ease, background-position .34s ease;
}

.storefront .product-card[data-accent="beta"] { --card-accent: #fed003; }
.storefront .product-card[data-accent="modern"] { --card-accent: #c7ac25; }
.storefront .product-card[data-accent="black-ops"] { --card-accent: #916a24; }

.storefront .product-badge {
  border-color: rgba(254, 208, 3, .5);
  background: rgba(254, 208, 3, .92);
  color: #14110c;
}

.storefront .product-overlay {
  border-color: rgba(254, 208, 3, .28);
  background: rgba(14, 13, 11, .78);
}

.storefront .empty-state,
.storefront .search-empty {
  border-color: rgba(254, 208, 3, .34);
  background: var(--surface);
}

.storefront .order-flow,
.storefront .site-footer {
  background: var(--black);
}

.storefront .order-flow {
  border: 1px solid rgba(254, 208, 3, .18);
}

.storefront .process-grid li {
  border-color: rgba(254, 208, 3, .16);
  background: #18150f;
}

.storefront .launch-note {
  border-color: rgba(254, 208, 3, .26);
  background: #211c13;
  box-shadow: var(--shadow-soft);
}

.storefront .seo-content,
.storefront .faq-section {
  border: 1px solid rgba(254, 208, 3, .2);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.storefront .seo-content {
  padding: clamp(28px, 5vw, 64px);
}

.storefront .seo-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.storefront .seo-content-grid article {
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(254, 208, 3, .16);
  background: rgba(9, 8, 6, .42);
}

.storefront .seo-content-grid article > span {
  display: block;
  margin-bottom: 28px;
  color: var(--blue);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.storefront .seo-content-grid h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1.1rem;
}

.storefront .seo-content-grid p,
.storefront .seo-disclaimer {
  color: var(--muted);
  line-height: 1.9;
}

.storefront .seo-content-grid p {
  margin: 0;
  font-size: .92rem;
}

.storefront .seo-disclaimer {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(254, 208, 3, .14);
  font-size: .82rem;
}

.storefront .faq-section {
  padding: clamp(28px, 5vw, 64px);
}

.storefront .faq-list {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.storefront .faq-list details {
  border: 1px solid rgba(254, 208, 3, .16);
  background: rgba(9, 8, 6, .42);
}

.storefront .faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 20px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.storefront .faq-list summary::-webkit-details-marker {
  display: none;
}

.storefront .faq-list summary::after {
  content: '+';
  color: var(--blue);
  font-size: 1.35rem;
  line-height: 1;
}

.storefront .faq-list details[open] summary::after {
  content: '−';
}

.storefront .faq-list details p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
  line-height: 1.85;
}

.storefront .footer-brand .brand-copy strong {
  color: #f1eee5;
}

.storefront .footer-brand .brand-copy small,
.storefront .footer-main p,
.storefront .footer-bottom {
  color: #9d9585;
}

.storefront .toast {
  border-color: rgba(254, 208, 3, .26);
  background: rgba(20, 17, 12, .96);
  color: #f1eee5;
}

.storefront .modal-backdrop,
.storefront .cart-backdrop,
.storefront .search-backdrop {
  background: rgba(5, 4, 3, .74);
}

.storefront .modal-card,
.storefront .search-dialog,
.storefront .cart-sheet {
  border-color: rgba(254, 208, 3, .2);
  background: #18150f;
}

/* Keep the cart flush with the viewport; the panel itself already fades in. */
.storefront .cart-panel .cart-sheet {
  transform: none !important;
}

.storefront .modal-image-wrap {
  border-inline-end: 1px solid rgba(254, 208, 3, .15);
}

.storefront .order-disclaimer {
  border-color: rgba(254, 208, 3, .22);
  background: #2b2410;
  color: #d8d1ae;
}

.storefront .search-field input {
  color: var(--ink);
  caret-color: var(--blue);
}

.storefront .search-field input:focus {
  border-color: rgba(254, 208, 3, .66);
  box-shadow: 0 0 0 4px rgba(254, 208, 3, .1);
}

.storefront .search-result {
  border-color: var(--line);
  background: #211c13;
}

.storefront .remove-cart-item {
  background: #2a1a15;
  color: #ff9c88;
}

.storefront .checkout-button {
  border: 1px solid rgba(254, 208, 3, .36);
  background: var(--blue);
  color: #14110c;
  cursor: pointer;
}

.storefront .support-chat {
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: inherit;
}

.storefront .support-chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 16px 9px 11px;
  border: 1px solid;
  border-radius: 999px;
  cursor: pointer;
  text-align: start;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.storefront .support-chat-toggle:hover {
  transform: translateY(-2px);
}

.storefront .support-chat-toggle strong,
.storefront .support-chat-toggle small {
  display: block;
}

.storefront .support-chat-toggle strong {
  font-size: .88rem;
}

.storefront .support-chat-toggle small {
  margin-top: 2px;
  opacity: .74;
  font-size: .7rem;
}

.storefront .support-chat-toggle-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 900;
}

.storefront .support-chat-panel {
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 108px));
  overflow: hidden;
  border: 1px solid;
  border-radius: 24px;
}

.storefront .support-chat-panel[hidden] {
  display: none;
}

.storefront .support-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 15px;
  border-bottom: 1px solid;
}

.storefront .support-chat-head h2 {
  margin: 7px 0 0;
  font-size: 1.12rem;
  letter-spacing: -.03em;
}

.storefront .support-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .7rem;
  font-weight: 800;
}

.storefront .support-chat-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.storefront .support-chat-close {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
}

.storefront .support-chat-description {
  margin: 0;
  padding: 13px 18px 0;
  font-size: .76rem;
  line-height: 1.75;
}

.storefront .support-chat-messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
  max-height: 245px;
  overflow-y: auto;
  padding: 14px 18px 8px;
  overscroll-behavior: contain;
}

.storefront .support-chat-message {
  max-width: 88%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  font-size: .78rem;
  line-height: 1.75;
  white-space: pre-wrap;
}

.storefront .support-chat-message.bot {
  align-self: flex-start;
  border-radius: 15px 15px 15px 5px;
}

.storefront .support-chat-message.user {
  align-self: flex-end;
  border-radius: 15px 15px 5px 15px;
}

.storefront .support-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 18px 12px;
}

.storefront .support-chat-suggestions button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .7rem;
}

.storefront .support-chat-form {
  display: flex;
  gap: 7px;
  padding: 0 18px 12px;
}

.storefront .support-chat-form input {
  min-width: 0;
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border: 1px solid;
  border-radius: 12px;
  outline: none;
  font: inherit;
  font-size: .78rem;
}

.storefront .support-chat-form button {
  min-width: 62px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
}

.storefront .support-whatsapp {
  display: block;
  margin: 0 18px 18px;
  padding: 11px 13px;
  border-radius: 12px;
  text-align: center;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.storefront .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.storefront .checkout-button:hover {
  background: #ffe04a;
  color: #14110c;
}

.storefront .support-chat-toggle {
  border-color: rgba(254, 208, 3, .58);
  background: linear-gradient(135deg, #fed003, #b98700);
  color: #14110c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 8px 24px rgba(254, 208, 3, .14);
}

.storefront .support-chat-toggle-mark {
  position: relative;
  flex: 0 0 36px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 31% 27%, #fff6bd 0 7%, transparent 8%),
    radial-gradient(circle at 68% 72%, #e0a500 0 19%, transparent 20%),
    radial-gradient(circle at 48% 45%, #fed003 0 46%, #916900 84%);
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .24), 0 0 0 5px rgba(254, 208, 3, .12);
}

.storefront .support-chat-toggle-mark::before,
.storefront .support-chat-toggle-mark::after {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.storefront .support-chat-toggle-mark::before {
  background: conic-gradient(from 30deg, transparent 0 28%, rgba(255, 248, 191, .78) 40%, transparent 54% 100%);
  mix-blend-mode: screen;
  animation: modx-orb-rotate 5.5s linear infinite;
}

.storefront .support-chat-toggle-mark::after {
  inset: 22%;
  border: 1px solid rgba(255, 248, 191, .55);
  box-shadow: 0 0 14px rgba(254, 208, 3, .68);
  animation: modx-orb-pulse 2.8s ease-in-out infinite;
}

.storefront .support-chat-toggle-mark i,
.storefront .support-chat-toggle-mark b {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.storefront .support-chat-toggle-mark i {
  inset: 31% 34% 35% 32%;
  background: rgba(255, 250, 214, .92);
  box-shadow: 0 0 8px rgba(255, 246, 177, .86);
}

.storefront .support-chat-toggle-mark b {
  inset: 16% 17% auto auto;
  width: 6px;
  height: 6px;
  background: #fff8be;
  box-shadow: 0 0 10px #fff2a8;
}

.storefront .support-chat-panel:not([hidden]) {
  animation: modx-panel-in .34s var(--motion-ease-out) both;
}

.storefront .cart-button.cart-bump i {
  animation: modx-cart-badge-pop .56s cubic-bezier(.22, 1, .36, 1);
}

.storefront .hero-ctas .primary-button,
.storefront .launch-note .primary-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.storefront .hero-ctas .primary-button::after,
.storefront .launch-note .primary-button::after {
  position: absolute;
  inset-block: 0;
  left: -42%;
  width: 32%;
  background: linear-gradient(105deg, transparent, rgba(255, 248, 191, .66), transparent);
  content: '';
  pointer-events: none;
  transform: skewX(-18deg);
  animation: modx-cta-shimmer 4.8s ease-in-out infinite;
}

@keyframes modx-orb-rotate {
  to { transform: rotate(360deg); }
}

@keyframes modx-orb-pulse {
  50% { opacity: .42; transform: scale(.76); }
}

@keyframes modx-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes modx-cart-badge-pop {
  0% { transform: scale(.72) rotate(-8deg); }
  52% { transform: scale(1.18) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes modx-cta-shimmer {
  0%, 62%, 100% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  68% { opacity: 1; }
  82% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}

.storefront .support-chat-panel {
  border-color: rgba(254, 208, 3, .3);
  background: #18150f;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58);
}

.storefront .support-chat-head {
  border-bottom-color: rgba(254, 208, 3, .15);
}

.storefront .support-chat-head h2,
.storefront .support-chat-message {
  color: var(--ink);
}

.storefront .support-chat-status,
.storefront .support-chat-status i,
.storefront .support-chat-suggestions button:hover {
  color: var(--blue);
}

.storefront .support-chat-status i {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(254, 208, 3, .12);
}

.storefront .support-chat-description,
.storefront .support-chat-message.bot {
  color: var(--muted);
}

.storefront .support-chat-message.bot,
.storefront .support-chat-suggestions button,
.storefront .support-chat-form input {
  border-color: rgba(254, 208, 3, .16);
  background: #211c13;
}

.storefront .support-chat-message.user {
  background: var(--blue);
  color: #14110c;
}

.storefront .support-chat-suggestions button {
  color: var(--ink);
}

.storefront .support-chat-form input {
  color: var(--ink);
  caret-color: var(--blue);
}

.storefront .support-chat-form input:focus {
  border-color: rgba(254, 208, 3, .62);
  box-shadow: 0 0 0 4px rgba(254, 208, 3, .1);
}

.storefront .support-chat-form button,
.storefront .support-whatsapp {
  background: var(--blue);
  color: #14110c;
}

.storefront .support-chat-form button:hover,
.storefront .support-whatsapp:hover {
  background: #ffe04a;
}

.storefront .support-chat-close {
  border-color: rgba(254, 208, 3, .22);
  background: #211c13;
  color: var(--ink);
}

.storefront :focus-visible {
  outline-color: rgba(254, 208, 3, .68);
}

@media (hover: hover) and (pointer: fine) {
  .storefront .product-card.is-visible:hover {
    border-color: rgba(254, 208, 3, .48);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(254, 208, 3, .12);
  }

  .storefront .product-card:hover .product-overlay {
    border-color: rgba(254, 208, 3, .72);
    background: rgba(254, 208, 3, .9);
    color: #14110c;
  }

  .storefront .primary-button:hover,
  .storefront .add-button:hover,
  .storefront .filter-tab:hover {
    box-shadow: 0 12px 28px rgba(254, 208, 3, .16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront .support-chat-toggle-mark::before,
  .storefront .support-chat-toggle-mark::after,
  .storefront .support-chat-panel:not([hidden]),
  .storefront .cart-button.cart-bump i,
  .storefront .hero-ctas .primary-button::after,
  .storefront .launch-note .primary-button::after {
    animation: none !important;
  }
}

/* Local admin inherits the same commercial identity without changing behavior. */
.admin-page {
  --bg: #0e0d0b;
  --surface: #18150f;
  --surface-strong: #211c13;
  --surface-soft: #14110c;
  --line: rgba(254, 208, 3, .16);
  --line-strong: rgba(254, 208, 3, .32);
  --text: #f1eee5;
  --muted: #b0a99a;
  --lime: #fed003;
  --lime-strong: #e0b700;
  --blue: #d8d1ae;
  --amber: #d69f35;
  background: var(--bg);
  background-image: none;
}

.admin-page .auth-card,
.admin-page .panel,
.admin-page .admin-stats article {
  border-color: var(--line);
  background: rgba(24, 21, 15, .94);
}

.admin-page .admin-mark {
  border-color: rgba(254, 208, 3, .62);
  background: #e1ded2;
}

.admin-page .auth-card label,
.admin-page .editor-field,
.admin-page .asset-field > label {
  color: #d8d1ae;
}

.admin-page .auth-card input,
.admin-page .editor-field input,
.admin-page .editor-field textarea,
.admin-page .editor-field select,
.admin-page .asset-field input {
  border-color: var(--line);
  background: #14110c;
  color: var(--text);
  caret-color: var(--lime);
}

.admin-page .auth-card input:focus,
.admin-page .editor-field input:focus,
.admin-page .editor-field textarea:focus,
.admin-page .editor-field select:focus,
.admin-page .asset-field input:focus {
  border-color: rgba(254, 208, 3, .66);
  background: #211c13;
  box-shadow: 0 0 0 4px rgba(254, 208, 3, .09);
}

.admin-page .primary,
.admin-page .admin-toast {
  background: var(--lime);
  color: #14110c;
}

.admin-page .ghost,
.admin-page .upload-button {
  border-color: var(--line);
  background: #211c13;
  color: var(--text);
}

.admin-page .ghost:hover,
.admin-page .upload-button:hover {
  border-color: var(--line-strong);
  background: #2b2410;
}

.admin-page .security-note,
.admin-page .product-save-status {
  border-color: rgba(254, 208, 3, .24);
  background: rgba(254, 208, 3, .06);
}

.admin-page .product-editor-card {
  background: #14110c;
}

.admin-page .product-editor-footer {
  background: #18150f;
}

.admin-page .image-preview {
  background: #090806;
}

.admin-page .field-hint,
.admin-page .product-id,
.admin-page .dashboard-footer {
  color: #8f8778;
}

.admin-page .save-dock {
  border-color: rgba(254, 208, 3, .22);
  background: rgba(20, 17, 12, .94);
}

.admin-page .save-dot {
  box-shadow: 0 0 0 5px rgba(254, 208, 3, .09);
}

.admin-page :focus-visible {
  outline-color: rgba(254, 208, 3, .68);
}

/* Public legal/about page. */
.legal-page {
  --bg: #0e0d0b;
  --surface: #18150f;
  --line: rgba(254, 208, 3, .17);
  --text: #f1eee5;
  --muted: #b0a99a;
  --lime: #fed003;
  background: var(--bg);
  background-image: none;
}

.legal-page .legal-card {
  border: 1px solid var(--line);
  background: #18150f;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .4);
}

.legal-page .legal-badge > .legal-logo {
  border-color: rgba(254, 208, 3, .56);
  background: #e1ded2;
}

.legal-page dt {
  color: #8f8778;
}

.legal-page .privacy-note {
  border-right-color: var(--lime);
  background: rgba(254, 208, 3, .06);
}

.legal-page .button {
  background: var(--lime);
  color: #14110c;
}

.legal-page .button:hover {
  background: #ffe04a;
}

@media (max-width: 880px) {
  html.motion-ready .storefront .site-header .desktop-nav,
  .storefront .site-header .desktop-nav {
    border-color: rgba(254, 208, 3, .2);
    background: rgba(24, 21, 15, .98);
  }

  html.motion-ready .storefront .site-header .desktop-nav a,
  .storefront .site-header .desktop-nav a {
    border-bottom-color: rgba(254, 208, 3, .14);
  }
}

@media (max-width: 760px) {
  .storefront .cart-panel {
    align-items: stretch;
    justify-content: flex-start;
  }

  .storefront .cart-sheet {
    inset: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .storefront .cart-head,
  .storefront .cart-description,
  .storefront .cart-footer {
    flex: 0 0 auto;
  }

  .storefront .cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .storefront .cart-empty {
    min-height: 0;
  }

  .storefront .cart-footer {
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }

  .storefront .hero-shade {
    background:
      linear-gradient(180deg, rgba(14, 13, 11, .08) 16%, rgba(14, 13, 11, .97) 72%),
      linear-gradient(90deg, rgba(14, 13, 11, .15), rgba(14, 13, 11, .58));
  }

  .storefront .modal-image-wrap {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(254, 208, 3, .15);
  }

  .storefront .seo-content,
  .storefront .faq-section {
    padding: 26px 18px;
  }

  .storefront .seo-content-grid {
    grid-template-columns: 1fr;
  }

  .storefront .seo-content-grid article {
    min-height: auto;
  }

  .storefront .support-chat {
    inset-inline: 12px;
    bottom: 12px;
  }

  .storefront .support-chat-toggle {
    margin-inline-start: auto;
  }

  .storefront .support-chat-panel {
    width: 100%;
    max-height: min(72vh, 620px);
  }
}

@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .storefront .cart-sheet {
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
    }
  }
}