/* OKB brand layer. Loaded last to normalize legacy storefront skins. */
:root {
  --color-bg: var(--okb-cream);
  --color-base: var(--okb-beige);
  --color-surface: #FFFDF9;
  --color-surface-soft: var(--okb-beige);
  --color-text: var(--okb-black);
  --color-muted: var(--okb-gray);
  --color-border: #DED2C2;
  --color-primary: var(--okb-brown);
  --color-accent: var(--okb-brown);
  --color-accent-hover: var(--okb-brown-dark);
  --navbar-bg: rgba(250, 247, 241, .96);
  --navbar-text: var(--okb-black);
  --navbar-title: var(--okb-brown);
  --footer-bg: var(--okb-black);
  --footer-text: var(--okb-cream);
}

html { background: var(--okb-cream) !important; }

body,
.ss-page {
  background: var(--okb-cream) !important;
  color: var(--okb-black) !important;
  font-family: var(--font-main) !important;
}

::selection { background: var(--okb-soft-pink); color: var(--okb-black); }

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

a { color: var(--okb-brown); }
a:hover { color: var(--okb-brown-dark); }

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

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

input:focus, select:focus, textarea:focus {
  border-color: var(--okb-brown) !important;
  box-shadow: 0 0 0 4px rgba(110, 84, 55, .11) !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(--okb-brown) !important;
  border-radius: .8rem !important;
  background: var(--okb-brown) !important;
  color: #FFFFFF !important;
  padding: .8rem 1.25rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(110, 84, 55, .18);
}

.btn-primary:hover, .ss-btn-primary:hover, .okb-btn-primary:hover {
  background: var(--okb-brown-dark) !important;
  border-color: var(--okb-brown-dark) !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(--okb-camel) !important;
  border-radius: .8rem !important;
  background: var(--okb-beige) !important;
  color: var(--okb-brown) !important;
  padding: .8rem 1.25rem;
  font-weight: 700;
}

.btn-secondary:hover, .ss-btn-secondary:hover, .okb-btn-secondary:hover {
  background: #E9DDC7 !important;
  color: var(--okb-brown-dark) !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(--okb-brown);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.okb-card {
  border: 1px solid #E5DACE;
  border-radius: 1rem;
  background: #FFFDF9;
  box-shadow: 0 12px 34px rgba(62, 45, 29, .06);
}

/* Legacy utility color normalization. */
.bg-\[\#F4EAD6\] { background-color: var(--okb-beige) !important; }
.bg-\[\#FFFCF6\] { background-color: #FFFDF9 !important; }
.bg-\[\#8A6A3F\], .bg-\[\#18A558\] { background-color: var(--okb-brown) !important; }
.hover\:bg-\[\#6F5430\]:hover, .hover\:bg-\[\#128246\]:hover { background-color: var(--okb-brown-dark) !important; }
.text-\[\#8A6A3F\], .text-\[\#18A558\] { color: var(--okb-brown) !important; }
.text-\[\#6F5430\] { color: var(--okb-brown-dark) !important; }
.text-\[\#181818\], .text-\[\#111111\], .text-\[\#0F172A\] { color: var(--okb-black) !important; }
.text-\[\#7A7167\], .text-\[\#6B7280\] { color: var(--okb-gray) !important; }
.border-\[\#D8C7AD\], .border-\[\#E5E5E5\] { border-color: #DED2C2 !important; }
.border-\[\#8A6A3F\], .border-\[\#18A558\] { border-color: var(--okb-brown) !important; }
.accent-\[\#8A6A3F\] { accent-color: var(--okb-brown) !important; }
.focus\:border-\[\#8A6A3F\]:focus { border-color: var(--okb-brown) !important; }

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

.vera-checkout section,
#detalle-producto .rounded-2xl,
#detalle-producto .rounded-xl {
  border-color: #E1D5C7 !important;
}

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

.contact-fab-toggle { border-color: var(--okb-camel) !important; }
.contact-fab-toggle i { color: var(--okb-brown) !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; }
}