:root {
  --tcgbaas-navy: #052747;
  --tcgbaas-deep: #041726;
  --tcgbaas-water: #1e77b0;
  --tcgbaas-teal: #17939f;
  --tcgbaas-foam: #ecf6f6;
  --tcgbaas-yellow: #f8b800;
  --tcgbaas-sand: #fbf8f2;
  --tcgbaas-ink: #0a1f33;
}

body.tcgbaas-commerce-page {
  background: var(--tcgbaas-sand);
  color: var(--tcgbaas-ink);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tcgbaas-commerce-page .wp-site-blocks {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 18%, rgb(23 147 159 / 10%) 0 2px, transparent 3px),
    linear-gradient(180deg, #fff 0 170px, var(--tcgbaas-sand) 170px 100%);
}

.tcgbaas-commerce-page header.wp-block-template-part,
.tcgbaas-commerce-page footer.wp-block-template-part {
  color: var(--tcgbaas-navy);
}

.tcgbaas-commerce-page main {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: clamp(36px, 6vw, 84px);
}

.tcgbaas-commerce-page h1,
.tcgbaas-commerce-page h2,
.tcgbaas-commerce-page h3,
.tcgbaas-commerce-page .wc-block-components-title {
  color: var(--tcgbaas-navy);
  font-family: "Bricolage Grotesque", Manrope, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.025em;
}

.tcgbaas-commerce-page .wp-block-woocommerce-checkout,
.tcgbaas-commerce-page .wp-block-woocommerce-cart {
  gap: clamp(24px, 4vw, 52px);
}

.tcgbaas-commerce-page .wc-block-components-sidebar-layout .wc-block-components-main,
.tcgbaas-commerce-page .wc-block-components-sidebar {
  box-sizing: border-box;
}

.tcgbaas-commerce-page .wc-block-components-sidebar {
  align-self: start;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgb(5 39 71 / 12%);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(4 23 38 / 10%);
}

.tcgbaas-commerce-page .wc-block-components-text-input input,
.tcgbaas-commerce-page .wc-block-components-combobox .wc-block-components-combobox-control input,
.tcgbaas-commerce-page .wc-block-components-textarea {
  border: 1px solid rgb(5 39 71 / 24%);
  border-radius: 12px;
  background: #fff;
  color: var(--tcgbaas-ink);
  min-height: 52px;
}

.tcgbaas-commerce-page .wc-block-components-text-input input:focus,
.tcgbaas-commerce-page .wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.tcgbaas-commerce-page .wc-block-components-textarea:focus {
  border-color: var(--tcgbaas-water);
  box-shadow: 0 0 0 3px rgb(30 119 176 / 16%);
  outline: none;
}

.tcgbaas-commerce-page .wc-block-components-button,
.tcgbaas-commerce-page .wc-block-cart__submit-button,
.tcgbaas-commerce-page .wc-block-components-checkout-place-order-button {
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--tcgbaas-yellow);
  color: var(--tcgbaas-deep);
  font-weight: 800;
  box-shadow: 0 10px 28px rgb(248 184 0 / 25%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.tcgbaas-commerce-page .wc-block-components-button:hover,
.tcgbaas-commerce-page .wc-block-components-checkout-place-order-button:hover {
  background: #ffc31a;
  color: var(--tcgbaas-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgb(248 184 0 / 32%);
}

.tcgbaas-commerce-page .wc-block-components-checkout-step {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom-color: rgb(5 39 71 / 12%);
}

.tcgbaas-commerce-page .wc-block-components-product-name,
.tcgbaas-commerce-page a {
  color: var(--tcgbaas-navy);
}

.tcgbaas-commerce-page .wc-block-components-product-image img {
  border-radius: 12px;
  background: var(--tcgbaas-foam);
}

.tcgbaas-commerce-page .woocommerce-error,
.tcgbaas-commerce-page .woocommerce-message,
.tcgbaas-commerce-page .wc-block-components-notice-banner {
  border-radius: 14px;
  border-color: var(--tcgbaas-water);
}

@media (max-width: 782px) {
  .tcgbaas-commerce-page main {
    width: min(100% - 28px, 680px);
    padding-block: 28px 56px;
  }

  .tcgbaas-commerce-page .wc-block-components-sidebar {
    padding: 18px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcgbaas-commerce-page *,
  .tcgbaas-commerce-page *::before,
  .tcgbaas-commerce-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}