/* =================================
   EVER BEAUTY — CELIA THEME
   Brand colors
================================= */

:root {
  --ever-primary: #276b78;
  --ever-mint: #84CDBA;
  --ever-background: #F1FAFB;
  --ever-white: #FFFFFF;
}

/* 1. General page background */
html,
body {
  background-color: var(--ever-background) !important;
}

/* 2. Main page containers */
main,
#app,
.app,
.main-content {
  background-color: var(--ever-background);
}

/* 3. Header */
header,
.store-header {
  background-color: var(--ever-primary);
  color: var(--ever-white);
}

/* 4. Header links and icons */
header a,
header button {
  color: var(--ever-white);
}

/* 5. Section headings */
.s-block__title,
.s-block__title h2,
.section-title {
  color: var(--ever-primary);
}

/* 6. Product cards */
.s-product-card {
  background-color: var(--ever-white);
  border-radius: 12px;
  overflow: hidden;
}

/* 7. Product and action buttons */
.s-product-card .s-button-element,
.s-add-product-button {
  background-color: var(--ever-primary);
  border-color: var(--ever-primary);
  color: var(--ever-white);
}

/* 8. Mint accents */
.s-block__title::after {
  border-color: var(--ever-mint);
}

/* 9. Footer */
footer {
  background-color: var(--ever-primary);
  color: var(--ever-white);
}

footer a {
  color: var(--ever-white);
}

/* 10. Keep product images unchanged */
.s-product-card img {
  object-fit: contain;
}