:root {
  --pantons-teal: #199CA8;
  --pantons-teal-dark: #0E6F78;
  --pantons-teal-soft: #DFF4F5;
  --pantons-gold: #C9A64A;
  --pantons-gold-dark: #B78B2D;
  --pantons-ivory: #F9F8F4;
  --pantons-charcoal: #2D2D2D;
}

body {
  background: #fff;
}

.pantons-badge {
  display: inline-block;
  border-radius: 999px;
  font-weight: 600;
}

.pantons-hero-card,
.pantons-card,
.pantons-side-image img,
.pantons-hero-image img {
  border-radius: 26px;
}

.pantons-hero-card,
.pantons-card {
  background: #fff;
  box-shadow: 0 16px 45px rgba(17, 24, 39, 0.08);
}

.pantons-hero-card {
  padding: 14px;
}

.pantons-hero-image img,
.pantons-side-image img {
  width: 100%;
  height: auto;
  display: block;
}

.pantons-primary-cta .wp-block-button__link {
  box-shadow: 0 14px 32px rgba(25, 156, 168, 0.28);
}

.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid var(--pantons-teal);
  color: var(--pantons-teal);
  background: transparent;
}

.pantons-card h4,
.pantons-review-card p:last-child,
.pantons-order-card h2 {
  margin-top: 0;
}

.pantons-ingredient-list,
.pantons-footer-links {
  padding-left: 1.1rem;
}

.pantons-ingredient-list li,
.pantons-footer-links li {
  margin-bottom: 0.7rem;
}

.pantons-faq-item {
  background: #fff;
  border: 1px solid #ebe7df;
  border-radius: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 25px rgba(17, 24, 39, 0.04);
}

.pantons-faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

.site-header {
  backdrop-filter: saturate(180%) blur(12px);
}

footer a,
.pantons-footer-links a {
  color: #fff;
}

.woocommerce div.product div.images img,
.woocommerce ul.products li.product img {
  border-radius: 18px;
}

.woocommerce span.onsale {
  background: var(--pantons-gold);
  color: #fff;
  border-radius: 999px;
  min-height: auto;
  min-width: auto;
  line-height: 1.2;
  padding: 0.55rem 0.9rem;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
  border-radius: 999px;
  background: var(--pantons-teal);
  color: #fff;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
  background: var(--pantons-teal-dark);
  color: #fff;
}

@media (max-width: 781px) {
  .pantons-hero-shell {
    padding-top: 24px !important;
  }
  .pantons-hero-card {
    margin-top: 22px;
  }
}
