.site-logo {
  width: clamp(42px, 4.2vw, 56px);
  height: clamp(42px, 4.2vw, 56px);
  flex: 0 0 clamp(42px, 4.2vw, 56px);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}
.footer-logo {
  width: clamp(42px, 4vw, 50px);
  height: clamp(42px, 4vw, 50px);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.hero {
  background:
    radial-gradient(
      circle at 72% 32%,
      color-mix(in srgb, var(--accent) 75%, white) 0,
      transparent 30%
    ),
    linear-gradient(
      125deg,
      var(--primary-dark),
      var(--primary) 62%,
      color-mix(in srgb, var(--primary) 68%, var(--accent))
    );
}
.hero-card .mock {
  background: linear-gradient(
    145deg,
    #fff,
    color-mix(in srgb, var(--accent) 20%, white)
  );
  color: var(--primary);
}
.hero-brand-logo {
  width: clamp(135px, 42vw, 230px);
  max-width: 72%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 18px 45px
    color-mix(in srgb, var(--primary-dark), transparent 65%);
}
.btn-shop {
  background: var(--accent);
  color: var(--primary-dark);
}
.btn-shop:hover {
  background: color-mix(in srgb, var(--accent) 82%, black);
  color: #fff;
}
.category-icon {
  background: color-mix(in srgb, var(--accent) 22%, white);
  color: var(--primary);
}
.search-form {
  background: var(--surface);
}
.shop-footer {
  background: var(--primary-dark);
}
.top-strip,
.cart-link {
  background: var(--primary-dark);
}
.brand-mark {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary), transparent 72%);
}
.text-primary {
  color: var(--primary) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--accent), transparent 78%);
}
.variant-option:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--accent) 13%, white);
}
.template-elegant {
  font-family: Georgia, "Times New Roman", serif;
}
.template-elegant .section-title,
.template-elegant .hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}
.template-elegant .product-card,
.template-elegant .category-card,
.template-elegant .auth-card {
  border-radius: 8px;
}
.template-elegant .btn,
.template-elegant .form-control,
.template-elegant .form-select {
  border-radius: 6px;
}
.template-classic .product-card,
.template-classic .category-card,
.template-classic .auth-card {
  box-shadow: none;
  border-radius: 4px;
}
.template-classic .shop-navbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.template-classic .btn,
.template-classic .form-control,
.template-classic .form-select {
  border-radius: 4px;
}
@media (max-width: 575px) {
  .navbar-brand {
    max-width: 72vw;
  }
  .navbar-brand span {
    min-width: 0;
  }
  .navbar-brand span strong {
    display: block;
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
  }
  .footer-brand {
    font-size: 1.05rem;
  }
}
.product-location-map {
  height: 360px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary), transparent 78%);
  overflow: hidden;
  background: var(--surface);
}
@media (max-width: 575px) {
  .product-location-map {
    height: 300px;
  }
}