/*
 * Phương án màu 03 — RAL 6020 Chrome Green
 * Nạp sau các lớp theme khác để bật phương án xanh rêu trầm toàn website.
 */

:root {
  --ink: #20271e;
  --muted: #6e746a;
  --rose: #526047;
  --rose-dark: #37422f;
  --blush: #e8ebe2;
  --cream: #f5f4ed;
  --line: #dedfd7;
  --green: #87927c;
  --gold: #b19a6b;
  --white: #fdfcf8;
  --shadow: 0 22px 60px rgba(42, 51, 37, .12);
}

body {
  background: #fdfcf8;
  color: #20271e;
}

.announcement {
  background: #2b3427;
}

.site-header {
  background: rgba(253, 252, 248, .97);
}

.site-header.sticky {
  background: rgba(253, 252, 248, .94);
  box-shadow: 0 8px 30px rgba(42, 51, 37, .08);
}

.search,
.main-nav {
  border-color: #daddd3;
}

.search:focus-within {
  border-color: #87927c;
  box-shadow: 0 0 0 3px rgba(135, 146, 124, .14);
}

.search > button,
.category-trigger,
.category-pills button.active,
.sale-badge,
.newsletter,
.primary-button,
.checkout-button,
.quick-actions .add-cart,
.floating-chat {
  background: #37422f;
  border-color: #37422f;
}

.search > button:hover,
.primary-button:hover,
.checkout-button:hover,
.quick-actions .add-cart:hover {
  background: #4b5741;
}

.category-trigger:hover {
  background: #2d3727;
}

.header-action:hover,
.hero h1 em,
.eyebrow.rose,
.product-info small,
.hotline,
.text-link:hover,
.journal-card a:hover,
.nav-links a:hover,
.drawer-head small,
.modal-product-copy > small,
.checkout-head small {
  color: #526047;
}

.hero {
  background:
    radial-gradient(circle at 83% 27%, rgba(255, 255, 255, .7), transparent 29%),
    linear-gradient(120deg, #f6f4ed 0%, #e8ebe1 58%, #d3dacb 100%);
}

.hero h1,
.section-heading h2,
.ritual-copy h2 {
  color: #20271e;
}

.hero-copy p {
  color: #62695e;
}

.hero-note {
  border-color: #87927c;
  background: rgba(253, 252, 248, .93);
  box-shadow: 0 18px 40px rgba(42, 51, 37, .1);
}

.hero-note b,
.floating-label b {
  color: #526047;
}

.category-menu {
  border-color: #dedfd7;
  background: #fdfcf8;
}

.category-menu button {
  color: #555d50;
  background: #fdfcf8;
}

.category-menu button:hover {
  color: #37422f;
  background: #f1f2ec;
}

.category-menu span,
.trust-strip article > span {
  color: #77846d;
}

.trust-strip b,
.product-info h3,
.journal-card h3 {
  color: #30392c;
}

.category-pills button {
  border-color: #daddd3;
  color: #636a5f;
}

.category-pills button:hover:not(.active) {
  border-color: #87927c;
  color: #37422f;
  background: #f5f5ef;
}

.product-card {
  border-color: #e0e2db;
}

.product-card:hover {
  border-color: rgba(55, 66, 47, .3);
  box-shadow: 0 20px 45px rgba(42, 51, 37, .1);
}

.product-media,
.modal-product-image,
.cart-item img {
  background: #f6f6f1;
}

.price b,
.modal-price b,
.grand-total b {
  color: #37422f;
}

.stars {
  color: #b19a6b;
}

.outline-button {
  border-color: #37422f;
  color: #37422f;
}

.outline-button:hover {
  background: #37422f;
}

.ritual {
  background: #f1f2ea;
}

.ritual-image {
  background: #dde2d6;
}

.ritual-image::before {
  border-color: rgba(91, 105, 79, .2);
}

.ritual-steps b {
  color: #65725b;
}

.ritual-steps > div {
  border-color: #d9ddd2;
}

.journal-card {
  border-color: #dfe1d9;
}

.journal-card.featured {
  background: #f3f3ec;
}

.journal-card small {
  color: #65725b;
}

.newsletter h2 {
  color: #f8f6ef;
}

.newsletter input {
  background: #fdfcf8;
}

.newsletter button {
  background: #b19a6b;
  color: #20271e;
}

.floating-phone,
.socials a:hover,
.free-shipping span {
  background: #65725b;
}

.footer-logo {
  border-color: #87927c;
}

.hero-dots button {
  background: #a8b09f;
}

.hero-dots button.active {
  background: #526047;
}

footer {
  background: #252d22;
}

.footer-bottom {
  border-color: #414b3c;
  color: #929c8c;
}

.socials a {
  border-color: #55604f;
}

:focus-visible {
  outline-color: #b19a6b;
}

.hotline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 7px 13px 7px 8px;
  border: 1px solid #37422f;
  border-radius: 999px;
  background: #37422f;
  color: #f8f6ef;
  box-shadow: 0 8px 20px rgba(42, 51, 37, .14);
  transition: background .25s, border-color .25s, transform .25s;
}

.hotline-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #d8c492;
  font-size: 14px;
}

.hotline-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.hotline-copy small {
  color: #c5cbbf;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .15em;
}

.hotline-copy strong {
  margin-top: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .055em;
}

.hotline:hover {
  border-color: #4b5741;
  background: #4b5741;
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .hotline {
    display: none;
  }
}