/* METALSUAR compatibility layer. Loaded last to normalize legacy storefront skins. */
:root {
  --color-bg: var(--ms-warm-bg);
  --color-base: var(--ms-warm-bg);
  --color-surface: var(--ms-white);
  --color-surface-soft: #EFE4D6;
  --color-text: var(--ms-carbon);
  --color-muted: var(--ms-steel);
  --color-border: var(--ms-border);
  --color-primary: var(--ms-fire);
  --color-accent: var(--ms-fire);
  --color-accent-hover: var(--ms-fire-dark);
  --color-accent-soft: #F0DEC9;
  --navbar-bg: rgba(17, 17, 17, .96);
  --navbar-text: #F5EFE6;
  --navbar-title: #FFFFFF;
  --footer-bg: var(--ms-carbon);
  --footer-text: var(--ms-warm-bg);
}

html { background: var(--color-bg) !important; }

body,
.ss-page {
  background:
    radial-gradient(circle at 86% 4%, rgba(201, 106, 43, .13), transparent 30rem),
    radial-gradient(circle at 8% 0%, rgba(199, 154, 91, .16), transparent 24rem),
    linear-gradient(180deg, var(--color-bg) 0%, #FFFFFF 52%, var(--color-bg) 100%) !important;
  color: var(--color-text) !important;
  font-family: var(--font-main) !important;
}

::selection { background: var(--ms-fire); color: #FFFFFF; }

h1, h2, h3, .okb-heading { font-family: var(--font-heading); font-weight: 900; }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

button, input, select, textarea { font: inherit; }

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  border-color: var(--color-border) !important;
  background-color: #FFFFFF !important;
  color: var(--color-text) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px rgba(201, 106, 43, .13) !important;
  outline: 0 !important;
}

.btn-primary, .ss-btn-primary, .okb-btn-primary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius) !important;
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  padding: .8rem 1.25rem;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(201, 106, 43, .2);
}

.btn-primary:hover, .ss-btn-primary:hover, .okb-btn-primary:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.btn-secondary, .ss-btn-secondary, .okb-btn-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid var(--color-dark) !important;
  border-radius: var(--radius) !important;
  background: var(--color-dark) !important;
  color: #FFFFFF !important;
  padding: .8rem 1.25rem;
  font-weight: 900;
}

.btn-secondary:hover, .ss-btn-secondary:hover, .okb-btn-secondary:hover {
  background: var(--ms-carbon-soft) !important;
  border-color: var(--ms-carbon-soft) !important;
  color: #FFFFFF !important;
}

.okb-container { width: min(100% - 2rem, 80rem); margin-inline: auto; }
.okb-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.okb-eyebrow {
  color: var(--color-accent);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.okb-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  box-shadow: 0 12px 34px rgba(17, 17, 17, .07);
}

/* Legacy utility color normalization. */
.bg-\[\#F4EAD6\],
.bg-\[\#FAF7F1\] { background-color: var(--color-bg) !important; }
.bg-\[\#FFFCF6\] { background-color: var(--color-surface) !important; }
.bg-\[\#8A6A3F\],
.bg-\[\#6E5437\],
.bg-\[\#18A558\] { background-color: var(--color-accent) !important; }
.hover\:bg-\[\#6F5430\]:hover,
.hover\:bg-\[\#5A4630\]:hover,
.hover\:bg-\[\#128246\]:hover { background-color: var(--color-accent-hover) !important; }
.text-\[\#8A6A3F\],
.text-\[\#6E5437\],
.text-\[\#18A558\] { color: var(--color-accent) !important; }
.text-\[\#6F5430\],
.text-\[\#5A4630\] { color: var(--color-accent-hover) !important; }
.text-\[\#181818\],
.text-\[\#111111\],
.text-\[\#0F172A\],
.text-\[\#1C1C1E\] { color: var(--color-text) !important; }
.text-\[\#7A7167\],
.text-\[\#6B7280\],
.text-\[\#8E857A\] { color: var(--color-muted) !important; }
.border-\[\#D8C7AD\],
.border-\[\#DED2C2\],
.border-\[\#E5E5E5\] { border-color: var(--color-border) !important; }
.border-\[\#8A6A3F\],
.border-\[\#6E5437\],
.border-\[\#18A558\] { border-color: var(--color-accent) !important; }
.accent-\[\#8A6A3F\] { accent-color: var(--color-accent) !important; }
.focus\:border-\[\#8A6A3F\]:focus { border-color: var(--color-accent) !important; }

/* Checkout, cart and product-detail polish without touching their JS. */
.vera-checkout > header,
.cart-shell > header { border-color: var(--color-border) !important; }

.vera-checkout section,
#detalle-producto [class*="rounded-"] {
  border-color: var(--color-border) !important;
}

.vera-checkout button[type="submit"],
#detalle-producto button[\@click*="agregarAlCarrito"] {
  min-height: 50px;
  border-radius: var(--radius) !important;
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}

.contact-fab-toggle { border-color: var(--color-border) !important; }
.contact-fab-toggle i { color: var(--color-accent) !important; }

@media (max-width: 640px) {
  .okb-container { width: min(100% - 1.25rem, 80rem); }
  .okb-section { padding-block: 3.5rem; }
  input, select, textarea { font-size: 16px !important; }
  .contact-fab { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}