/* Shared public UI primitives. Loaded after page-specific styles. */

:root {
  --ui-font: var(--sans, "Manrope", Arial, sans-serif);
  --display-font: var(--serif, "Cormorant Garamond", Georgia, serif);
  --heading-weight: 700;
  --control-weight: 800;
  --control-height: 52px;
  --control-radius: 999px;
  --field-radius: 16px;
  --field-border: rgba(101, 71, 58, 0.16);
  --field-border-focus: rgba(101, 71, 58, 0.45);
  --field-background: rgba(255, 253, 249, 0.86);
  --field-focus-ring: 0 0 0 4px rgba(157, 120, 102, 0.11);
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
}

h1,
h2,
h3 {
  font-family: var(--ui-font) !important;
  font-weight: var(--heading-weight) !important;
  text-wrap: balance;
}

.home-page .hero h1,
.catalog-page .catalog-hero h1,
.aromaty-page .aromaty-hero h1,
.masterclass-page .mc-hero h1 {
  color: var(--accent-dark) !important;
  font-family: var(--ui-font) !important;
  font-weight: var(--heading-weight) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.055em !important;
}

.aromaty-page .aromaty-hero h1,
.masterclass-page .mc-hero h1 {
  font-size: clamp(52px, 6.4vw, 96px) !important;
}

.home-page .hero h1 em,
.aromaty-page .aromaty-hero h1 em,
.masterclass-page .mc-hero h1 em {
  display: block;
  color: inherit;
  font-family: var(--display-font) !important;
  font-style: italic;
  font-weight: 500 !important;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

.legal-body main h1 em {
  color: inherit;
  font-family: var(--display-font) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

.eyebrow,
.catalog-page .catalog-hero .eyebrow,
.aromaty-page .aromaty-hero .eyebrow,
.masterclass-page .mc-hero .eyebrow {
  font-family: var(--ui-font) !important;
  font-size: 13px !important;
  font-weight: var(--control-weight) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

.btn {
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: var(--control-weight);
  line-height: 1;
}

/* Compact catalog actions remain a deliberate smaller variant. */
.shop-card-actions .btn,
.shop-card-actions button {
  min-height: 44px;
}

.catalog-page .catalog-search input,
.catalog-page .checkout-form input,
.catalog-page .checkout-form textarea,
.catalog-page .option-row select,
.catalog-page .certificate-field input,
.catalog-page .certificate-field textarea,
.aromaty-page .aromaty-search input,
.masterclass-page .mc-form input,
.masterclass-page .mc-form select,
.masterclass-page .mc-form textarea {
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--field-background);
  color: var(--text);
  font: inherit;
  outline: none;
}

.catalog-page .catalog-search input:focus,
.catalog-page .checkout-form input:focus,
.catalog-page .checkout-form textarea:focus,
.catalog-page .option-row select:focus,
.catalog-page .certificate-field input:focus,
.catalog-page .certificate-field textarea:focus,
.aromaty-page .aromaty-search input:focus,
.masterclass-page .mc-form input:focus,
.masterclass-page .mc-form select:focus,
.masterclass-page .mc-form textarea:focus {
  border-color: var(--field-border-focus);
  box-shadow: var(--field-focus-ring);
}

.catalog-page .catalog-search,
.catalog-page .checkout-form label,
.catalog-page .certificate-field,
.masterclass-page .mc-form label {
  font-family: var(--ui-font);
  font-weight: var(--control-weight);
}

@media (max-width: 900px) {
  .home-page .hero h1,
  .catalog-page .catalog-hero h1,
  .aromaty-page .aromaty-hero h1,
  .masterclass-page .mc-hero h1 {
    font-size: clamp(46px, 13vw, 76px) !important;
    line-height: 0.92 !important;
  }
}

@media (max-width: 640px) {
  .aromaty-page .aromaty-hero h1,
  .masterclass-page .mc-hero h1 {
    font-size: clamp(44px, 12.6vw, 64px) !important;
  }
}