body.e8cp-surface #page {
  color: var(--e8cp-white);
  background:
    radial-gradient(circle at 12% 0%, rgb(169 86 247 / 18%), transparent 38rem),
    linear-gradient(155deg, var(--e8cp-night), var(--e8cp-ink));
}

body.e8cp-surface .site-content {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 56px;
}

body.e8cp-surface :where(.wc-block-components-title, .woocommerce-account h1, .amelia-v2-booking h1) {
  color: var(--e8cp-white);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
}

body.e8cp-surface :where(.wc-block-cart-items, .wc-block-components-totals-wrapper, .wc-block-checkout__main, .wc-block-checkout__sidebar, .woocommerce-MyAccount-content) {
  border: 1px solid var(--e8cp-line);
  border-radius: 22px;
  background: rgb(23 19 41 / 88%);
  box-shadow: 0 22px 65px rgb(0 0 0 / 28%);
}

/* Keep WooCommerce's two-column commerce layout inside the approved content
   container. This addresses intrinsic/minimum sizing at the layout components;
   it does not mask document overflow on html/body. */
body.e8cp-surface :where(
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout,
  .wc-block-components-sidebar-layout,
  .wc-block-cart__main,
  .wc-block-cart__sidebar,
  .wc-block-checkout__main,
  .wc-block-checkout__sidebar
) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

body.e8cp-surface :where(
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout,
  .wc-block-components-sidebar-layout
) {
  width: 100%;
}

body.e8cp-surface :where(.wc-block-components-button, .woocommerce-Button, .um-button) {
  min-height: 50px;
  padding-inline: 22px;
  border: 0;
  border-radius: 999px;
  color: var(--e8cp-night);
  background: linear-gradient(115deg, var(--e8cp-teal), var(--e8cp-blue));
  box-shadow: 0 12px 34px rgb(39 226 193 / 22%);
  font-weight: 800;
}

body.e8cp-surface :where(.wc-block-components-text-input input, .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .um-form input[type="text"], .um-form input[type="email"], .um-form input[type="password"]) {
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 12px;
  color: var(--e8cp-white);
  background: rgb(255 255 255 / 6%);
}

body.e8cp-surface :where(.woocommerce, .wc-block-checkout, .amelia-v2-booking) a:not(.button) {
  color: var(--e8cp-teal);
}

body.e8cp-surface :focus-visible {
  outline: 3px solid var(--e8cp-teal);
  outline-offset: 3px;
}

body.e8cp-surface .amelia-v2-booking #amelia-container {
  --am-c-main-bgr: var(--e8cp-panel);
  --am-c-card-bgr: var(--e8cp-ink);
  --am-c-primary: var(--e8cp-teal);
  --am-c-main-text: var(--e8cp-white);
  --am-c-main-text-op60: var(--e8cp-muted);
  border-radius: 22px;
}

@media (max-width: 720px) {
  body.e8cp-surface .site-content {
    width: min(100% - 24px, 1180px);
    padding-block: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.e8cp-surface :where(.wc-block-components-button, .woocommerce-Button, .um-button) {
    transition: none;
  }
}