/* Chavill backend-owned CSS chunk: 29e0d55049cdd7d4.css; version: 1.0.0-105db2c98093 */
/* Chavill CSS chunk 5: 29e0d55049cdd7d4.css */

.panel .side {
  background: linear-gradient(180deg, #fff, #f5fbf8);
  box-shadow: 0 18px 45px #1238270d;
}

.panel-section,
#admin > .card,
.order-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.panel-section:hover,
#admin > .card:hover,
.order-card:hover {
  transform: translateY(-2px);
  border-color: #cfe8de;
  box-shadow: 0 18px 45px #12382712;
}

.chat-file span svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-file span:hover,
.chat-send:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 12px 26px #0a806224;
}

.file-feedback {
  display: inline-flex;
  justify-self: start;
  border-radius: 999px;
  padding: 6px 10px;
  background: #e8f4ef;
  color: #0a8062;
  font-size: 12px;
  font-weight: 700;
}

/* Premium UI refresh: softer surfaces, richer interactions, and more polished layouts site-wide. */
:root {
  --ch-primary: #0a8062;
  --ch-primary-2: #12a87e;
  --ch-primary-soft: #eefbf6;
  --ch-bg: #f9fdfb;
  --ch-surface: #ffffff;
  --ch-surface-2: #fbfdfc;
  --ch-border: #e8f1ed;
  --ch-text: #1d3129;
  --ch-muted: #64736c;
  --ch-shadow-sm: 0 10px 28px #1238270c;
  --ch-shadow-md: 0 18px 48px #12382714;
  --ch-shadow-lg: 0 28px 80px #1238271f;
  --ch-radius: 24px;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 12% 8%, #dff7ed 0 260px, transparent 261px),
    radial-gradient(circle at 86% 18%, #eef8f4 0 330px, transparent 331px),
    linear-gradient(180deg, #fbfdfc 0%, var(--ch-bg) 52%, #f8fbfa 100%);
  color: var(--ch-text);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#0a806208 1px, transparent 1px), linear-gradient(90deg, #0a806207 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.nav {
  background: #ffffffd9;
  border-bottom: 1px solid #e8f1edcc;
  box-shadow: 0 14px 36px #1238270b;
}

.nav-inner {
  gap: 18px;
}

.brand {
  position: relative;
  letter-spacing: -.7px;
}

.brand::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 34px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ch-primary), var(--ch-primary-2));
}

.links a,
.mobile-menu a,
.side a {
  transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.links a:hover,
.mobile-menu a:hover,
.side a:hover,
.side a.active {
  transform: translateY(-1px);
}

.nav input,
.input,
select,
textarea {
  border-color: var(--ch-border);
  background: #ffffffef;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.nav input:focus,
.input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: #94d5bd;
  background: #fff;
  box-shadow: 0 0 0 5px #12a87e18, 0 12px 30px #1238270b;
}

.btn {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 24px #0a806218;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, #ffffff2e 45%, transparent 68%);
  transform: translateX(110%);
  transition: transform .45s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px #0a806224;
}

.btn:hover::before {
  transform: translateX(-110%);
}

.btn.ghost {
  background: #ffffffd9;
  box-shadow: 0 8px 22px #1238270a;
}

.btn.ghost:hover {
  border-color: #b8dccc;
  color: var(--ch-primary);
}

.btn.secondary {
  background: linear-gradient(135deg, #e8f4ef, #f5fbf8);
}

.card {
  position: relative;
  border-color: #deebe5;
  border-radius: var(--ch-radius);
  background: linear-gradient(180deg, #ffffff 0%, #fcfefd 100%);
  box-shadow: var(--ch-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover {
  border-color: #cae5d9;
  box-shadow: var(--ch-shadow-md);
}

.hero {
  position: relative;
}

.hero .card,
#hero.card,
.hero-grid .card {
  overflow: hidden;
}

.hero .card::after,
.hero-grid .card::after {
  content: '';
  position: absolute;
  inset: auto -60px -90px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #0a806210;
}

.section-title h2,
.section h1,
.section h2 {
  letter-spacing: -.5px;
}

.section-title h2::after,
.section > h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ch-primary), #82d8b9);
}

.grid {
  align-items: stretch;
}

.product.card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 16px;
}

.product.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ch-shadow-lg);
}

.product-media {
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #eef7f2, #fff);
}

.product.card h3 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.7;
}

.price {
  color: var(--ch-primary);
  letter-spacing: -.2px;
}

.product-icon-actions {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.icon-btn {
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.icon-btn:hover,
.icon-btn.is-active {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px #0a806224;
}

.compare-strip {
  border-color: #cfe8de !important;
}

.compare-strip:hover {
  background: linear-gradient(135deg, #0a8062, #12a87e) !important;
  color: #fff !important;
}

.product-filters {
  position: sticky;
  top: 96px;
  background: #ffffffea;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.filter-panel summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--ch-primary);
}

.check-row,
.check-list label {
  border-radius: 14px;
  padding: 8px 10px;
  transition: background .18s ease, color .18s ease;
}

.check-row:hover,
.check-list label:hover {
  background: var(--ch-primary-soft);
  color: var(--ch-primary);
}