/* Korai Skin Care Design Foundation — V1.0.3
 * The global Elementor color tokens below intentionally replace the default
 * kit palette at render time. Elementor's saved Kit and widget settings are
 * not modified. Explicit per-widget custom colors remain user-controlled.
 */

@font-face {
  font-family: "Korai Gotham";
  src: url("../fonts/Gotham-XLight.otf") format("opentype");
  font-style: normal; font-weight: 200; font-display: swap;
}
@font-face {
  font-family: "Korai Gotham";
  src: url("../fonts/Gotham-Book.otf") format("opentype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Korai Gotham";
  src: url("../fonts/Gotham-Medium.otf") format("opentype");
  font-style: normal; font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Korai Gotham";
  src: url("../fonts/Gotham-Bold.otf") format("opentype");
  font-style: normal; font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Korai Montserrat";
  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}

:root {
  --korai-ivory: #F5F3EF;
  --korai-brown: #514236;
  --korai-sage: #41483C;
  --korai-gold: #C6A77B;
  --korai-sand: #E8DED2;
  --korai-blush: #EAD8D2;
  --korai-font-body: "Korai Gotham", Arial, sans-serif;
  --korai-font-heading: "Korai Montserrat", "Korai Gotham", Arial, sans-serif;
  --korai-radius-sm: 4px;
  --korai-radius-md: 10px;
  --korai-content-width: 1200px;
  --korai-button-bg: var(--korai-brown);
  --korai-button-text: #FFFFFF;
  --korai-button-hover: var(--korai-sage);
}

/*
 * Elementor emits its active Kit palette as --e-global-color-* variables.
 * A more-specific body selector with !important keeps Korai's palette from
 * being silently replaced by the Kit's default green accent on the frontend.
 * These are the four built-in Elementor global colors; custom Kit colors are
 * intentionally left intact.
 */
body.korai-theme-active {
  --e-global-color-primary: #514236 !important;
  --e-global-color-secondary: #41483C !important;
  --e-global-color-text: #514236 !important;
  --e-global-color-accent: #514236 !important;
}

html { -webkit-text-size-adjust: 100%; }
body {
  color: var(--korai-brown);
  background-color: var(--korai-ivory);
  font-family: var(--korai-font-body);
  font-weight: 400;
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: var(--korai-brown);
  font-family: var(--korai-font-heading);
  font-weight: 400;
  line-height: 1.2;
}
a { color: var(--korai-sage); }
a:hover, a:focus { color: var(--korai-brown); }

/* Native controls; Elementor widget-specific settings are not blanket-reset. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
  max-width: 100%;
  color: var(--korai-brown);
  background: #fff;
  border: 1px solid var(--korai-sand);
  border-radius: var(--korai-radius-sm);
  font-family: var(--korai-font-body);
  font-size: 1rem;
  padding: .75rem .9rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--korai-gold);
  outline-offset: 2px;
}
button, input[type="submit"], .button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  font-family: var(--korai-font-body);
  font-weight: 500;
  border-radius: var(--korai-radius-sm);
  transition: background-color .22s ease, color .22s ease,
              border-color .22s ease, box-shadow .22s ease,
              transform .22s ease;
}

/*
 * Korai default interaction for Elementor Button widgets.
 * Scoped to Elementor Button and Loop Grid widgets (including Load More),
 * avoiding unrelated native controls and third-party product-card buttons.
 * Explicit widget hover styling may override this rule when more specific.
 */
body.korai-theme-active .elementor-widget-button .elementor-button:hover,
body.korai-theme-active .elementor-widget-loop-grid .elementor-button:hover {
  background-color: var(--korai-button-hover);
  color: #FFFFFF;
  border-color: var(--korai-button-hover);
  box-shadow: 0 5px 14px rgba(65, 72, 60, .16);
  transform: translateY(-1px);
}

body.korai-theme-active .elementor-widget-button .elementor-button:focus-visible,
body.korai-theme-active .elementor-widget-loop-grid .elementor-button:focus-visible {
  outline: 2px solid var(--korai-gold);
  outline-offset: 3px;
}

body.korai-theme-active .elementor-widget-button .elementor-button:active,
body.korai-theme-active .elementor-widget-loop-grid .elementor-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Optional utility classes for Elementor containers/widgets. */
.korai-heading { font-family: var(--korai-font-heading); color: var(--korai-brown); }
.korai-text { font-family: var(--korai-font-body); color: var(--korai-brown); }
.korai-bg-ivory { background-color: var(--korai-ivory); }
.korai-bg-sand { background-color: var(--korai-sand); }
.korai-bg-blush { background-color: var(--korai-blush); }
.korai-text-sage { color: var(--korai-sage); }
.korai-text-gold { color: var(--korai-gold); }

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