:root {
  --tzagg-bg-dark: #0F0C20;
  --tzagg-bg-void: #000000;
  --tzagg-bg-surface: #171334;
  --tzagg-accent-green: #00FF66;
  --tzagg-accent-cyan: #00F0FF;
  --tzagg-text-main: #FFFFFF;
  --tzagg-text-muted: #A0A0B0;
  --tzagg-glow-green: 0 0 15px rgba(0, 255, 102, 0.4);
  --tzagg-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.4);
  --tzagg-border-cyber: 1px solid rgba(0, 255, 102, 0.3);
  --tzagg-font-heading: 'Orbitron', 'Rajdhani', sans-serif;
  --tzagg-font-ui: 'Rajdhani', 'Orbitron', sans-serif;
  --tzagg-font-body: 'Inter', sans-serif;
  --tzagg-notch: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --tzagg-space-sm: 16px;
  --tzagg-space-md: 32px;
  --tzagg-space-lg: 64px;
  --tzagg-space-xl: 104px;
  --tzagg-measure: 68ch;
}

/* ---------------------------------------------------------------
   0. Retune the parent theme's palette.

      Extendable ships a light palette and paints its own surfaces
      with preset classes that carry !important. Rebinding the preset
      variables themselves turns every theme owned surface dark at the
      source, which is why almost nothing below needs to fight it.
   --------------------------------------------------------------- */

:root {
  --wp--preset--color--background: #0F0C20;
  --wp--preset--color--foreground: #FFFFFF;
  --wp--preset--color--foreground-alt: #A0A0B0;
  --wp--preset--color--primary: #00FF66;
  --wp--preset--color--secondary: #00F0FF;
  --wp--preset--color--tertiary: #171334;
}

/* ---------------------------------------------------------------
   1. Ground. The block theme paints white by default, so the dark
      ground has to be asserted on the document and the site wrapper.
   --------------------------------------------------------------- */

html body,
html body.wp-site-blocks,
html body > .wp-site-blocks {
  background-color: var(--tzagg-bg-dark);
  color: var(--tzagg-text-main);
  font-family: var(--tzagg-font-body);
}

html body {
  -webkit-font-smoothing: antialiased;
  /* The hero breaks its container to the viewport edge, so clip the
     resulting overhang rather than letting it scroll sideways. */
  overflow-x: clip;
}

html body :where(p, li, dd, dt, td, th, label, blockquote) {
  color: var(--tzagg-text-main);
  font-family: var(--tzagg-font-body);
}

html body :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tzagg-font-heading);
  font-weight: 700;
  line-height: 1.08;
  color: var(--tzagg-text-main);
  letter-spacing: -0.01em;
}

html body a {
  color: var(--tzagg-accent-green);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html body a:hover {
  color: var(--tzagg-accent-cyan);
}

html body :where(header, .wp-block-template-part, footer, .wp-block-site-header, .wp-block-site-footer) {
  background-color: var(--tzagg-bg-dark);
  color: var(--tzagg-text-main);
}

html body footer,
html body .wp-block-template-part:last-of-type {
  background-color: var(--tzagg-bg-void);
  border-top: var(--tzagg-border-cyber);
}

/* Site navigation reads as interface, not prose. */
html body .wp-block-navigation a,
html body .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tzagg-text-main);
  text-decoration: none;
}

html body .wp-block-navigation a:hover {
  color: var(--tzagg-accent-green);
}

html body .wp-block-site-title a {
  font-family: var(--tzagg-font-heading);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tzagg-text-main);
  text-decoration: none;
}

/* ---------------------------------------------------------------
   2. Buttons. Transparent ground, green rule, clipped corners.
      The notch is the signature shape and is never rounded off.
   --------------------------------------------------------------- */

html body .wp-element-button,
html body .wp-block-button__link,
html body button,
html body input[type="submit"],
html body .button,
html body a.button,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .woocommerce #respond input#submit,
html body .woocommerce a.button.alt,
html body .woocommerce button.button.alt {
  font-family: var(--tzagg-font-ui);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  background-color: transparent;
  color: var(--tzagg-accent-green);
  border: 1px solid var(--tzagg-accent-green);
  border-radius: 0;
  padding: 14px 30px;
  clip-path: var(--tzagg-notch);
  box-shadow: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  text-decoration: none;
  cursor: pointer;
}

html body .wp-element-button:hover,
html body .wp-block-button__link:hover,
html body button:hover,
html body input[type="submit"]:hover,
html body .button:hover,
html body a.button:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body .woocommerce input.button:hover,
html body .woocommerce #respond input#submit:hover,
html body .woocommerce a.button.alt:hover,
html body .woocommerce button.button.alt:hover {
  background-color: rgba(0, 255, 102, 0.12);
  color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
}

html body .wp-element-button:focus-visible,
html body button:focus-visible,
html body a.button:focus-visible {
  outline: 2px solid var(--tzagg-accent-cyan);
  outline-offset: 2px;
  box-shadow: var(--tzagg-glow-cyan);
}

html body .wp-element-button:active,
html body button:active {
  transform: translateY(1px);
}

/* The ghost variant drops to muted until hovered. */
html body .tz-btn--ghost .wp-block-button__link {
  color: var(--tzagg-text-muted);
  border-color: rgba(160, 160, 176, 0.5);
}

html body .tz-btn--ghost .wp-block-button__link:hover {
  color: var(--tzagg-accent-green);
  border-color: var(--tzagg-accent-green);
}

/* ---------------------------------------------------------------
   3. Page furniture
   --------------------------------------------------------------- */

/* The hero runs the full viewport width while its text stays on the
   same left edge as every section below it. 26rem is half the 52rem
   content column set in theme.json. */
/* The hero is an alignfull block, so the theme already gives it the
   viewport width and the global side padding. Only the vertical rhythm
   is ours, which keeps its text on the same column as every section
   below it without any viewport arithmetic. */
html body .tz-hero {
  padding-top: var(--tzagg-space-xl);
  padding-bottom: var(--tzagg-space-lg);
  border-bottom: var(--tzagg-border-cyber);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(0, 255, 102, 0.12) 0%, rgba(0, 255, 102, 0) 58%),
    radial-gradient(70% 60% at 8% 100%, rgba(0, 240, 255, 0.08) 0%, rgba(0, 240, 255, 0) 60%),
    var(--tzagg-bg-dark);
}

html body .tz-hero__title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.04;
  margin: 0 0 var(--tzagg-space-sm);
}

/* Footer */

html body .tz-footer__nav a {
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tzagg-text-muted);
  text-decoration: none;
}

html body .tz-footer__nav a:hover {
  color: var(--tzagg-accent-green);
}

html body .tz-footer__base {
  border-top: var(--tzagg-border-cyber);
  padding-top: var(--tzagg-space-sm);
  margin-top: var(--tzagg-space-sm);
}

html body .tz-footer__legal {
  color: var(--tzagg-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

/* The hero sits inside an alignfull block, so its reading column comes
   from the layout centring these children at contentSize. Giving them a
   narrower max-width would re-centre them off that column, so the
   measure is left to the column itself. */
html body .tz-hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--tzagg-text-muted);
  margin: 0 0 var(--tzagg-space-md);
}

html body .tz-cta-row {
  gap: var(--tzagg-space-sm);
}

/* No inline padding on sections. The theme's global padding already
   supplies the gutter, and adding more here would push section text off
   the column the hero sits on. */
html body .tz-section {
  padding: var(--tzagg-space-lg) 0;
}

html body .tz-section__title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin: 0 0 var(--tzagg-space-md);
}

html body .tz-section__lede {
  color: var(--tzagg-text-muted);
  max-width: var(--tzagg-measure);
  line-height: 1.7;
  margin-bottom: var(--tzagg-space-md);
}

/* A constrained block layout centres every child with
   `margin-left: auto !important`. Anything we give a reading measure to
   is narrower than the column, so without matching that !important it
   drifts toward the middle and breaks the shared left edge. */
html body .tz-page-head__lede,
html body .tz-section__lede,
html body .tz-feature__body,
html body .tz-accordion,
html body .tz-request-form,
html body .tz-prose p,
html body .tz-prose ul,
html body .tz-prose ol {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .tz-page-head {
  padding: var(--tzagg-space-lg) 0 var(--tzagg-space-md);
  border-bottom: var(--tzagg-border-cyber);
}

html body .tz-page-head__title {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin: 0 0 var(--tzagg-space-sm);
}

html body .tz-page-head__lede {
  color: var(--tzagg-text-muted);
  max-width: var(--tzagg-measure);
  line-height: 1.7;
  margin: 0;
}

/* Bundle and feature panels */

html body .tz-panel {
  background-color: var(--tzagg-bg-surface);
  border: var(--tzagg-border-cyber);
  border-radius: 0;
  padding: var(--tzagg-space-md);
  clip-path: var(--tzagg-notch);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

html body .tz-panel:hover {
  border-color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
}

html body .tz-panel__price {
  font-family: var(--tzagg-font-heading);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  line-height: 1;
  color: var(--tzagg-accent-green);
  margin: 0 0 8px;
}

html body .tz-panel__title {
  font-family: var(--tzagg-font-ui);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

html body .tz-panel__body {
  color: var(--tzagg-text-muted);
  line-height: 1.65;
  margin: 0;
}

html body .tz-feature--lead {
  border-left: 2px solid var(--tzagg-accent-green);
  padding-left: var(--tzagg-space-md);
}

html body .tz-feature__title {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  margin: 0 0 12px;
}

html body .tz-feature--small .tz-feature__title {
  font-family: var(--tzagg-font-ui);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html body .tz-feature__body {
  color: var(--tzagg-text-muted);
  line-height: 1.7;
  max-width: var(--tzagg-measure);
  margin: 0;
}

html body .tz-feature--small {
  border-top: var(--tzagg-border-cyber);
  padding-top: var(--tzagg-space-sm);
  margin-bottom: var(--tzagg-space-sm);
}

/* Long form pages */

/* The measure belongs on the running text, not on the section box. A
   narrower box would be centred by the block layout and lose the left
   edge it shares with every other section. */
html body .tz-prose p,
html body .tz-prose ul,
html body .tz-prose ol {
  max-width: 72ch;
}

html body .tz-prose p,
html body .tz-prose li {
  line-height: 1.75;
  color: var(--tzagg-text-muted);
}

html body .tz-prose strong {
  color: var(--tzagg-text-main);
}

html body .tz-prose h2 {
  font-size: 1.35rem;
  font-family: var(--tzagg-font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tzagg-accent-green);
  margin-top: var(--tzagg-space-md);
  margin-bottom: 12px;
}

html body .tz-callout {
  border-left: 2px solid var(--tzagg-accent-cyan);
  background-color: rgba(0, 240, 255, 0.06);
  padding: var(--tzagg-space-sm);
  color: var(--tzagg-text-muted);
  font-size: 0.95rem;
}

/* FAQ accordion */

html body .tz-accordion {
  border-top: var(--tzagg-border-cyber);
  max-width: 78ch;
}

html body .tz-faq {
  border-bottom: var(--tzagg-border-cyber);
}

html body .tz-faq__q {
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--tzagg-text-main);
  padding: 20px 40px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 140ms ease;
}

html body .tz-faq__q::-webkit-details-marker {
  display: none;
}

html body .tz-faq__q::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tzagg-accent-green);
  font-size: 1.5rem;
  line-height: 1;
}

html body .tz-faq[open] .tz-faq__q::after {
  content: "\2212";
}

html body .tz-faq__q:hover {
  color: var(--tzagg-accent-green);
}

html body .tz-faq__a p {
  color: var(--tzagg-text-muted);
  line-height: 1.75;
  margin: 0 0 20px;
  max-width: var(--tzagg-measure);
}

/* ---------------------------------------------------------------
   4. Request form
   --------------------------------------------------------------- */

html body .tz-request-form {
  max-width: 620px;
  border: var(--tzagg-border-cyber);
  background-color: var(--tzagg-bg-surface);
  padding: var(--tzagg-space-md);
  clip-path: var(--tzagg-notch);
}

html body .tz-request-form__field {
  margin-bottom: var(--tzagg-space-sm);
}

html body .tz-request-form label {
  display: block;
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzagg-text-muted);
  margin-bottom: 8px;
}

html body .tz-request-form input[type="text"],
html body .tz-request-form input[type="email"],
html body .tz-request-form input[type="url"],
html body .tz-request-form textarea {
  width: 100%;
  background-color: var(--tzagg-bg-void);
  border: 1px solid rgba(160, 160, 176, 0.4);
  border-radius: 0;
  color: var(--tzagg-text-main);
  font-family: var(--tzagg-font-body);
  font-size: 1rem;
  padding: 13px 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

html body .tz-request-form input::placeholder,
html body .tz-request-form textarea::placeholder {
  color: rgba(160, 160, 176, 0.75);
}

html body .tz-request-form input:focus,
html body .tz-request-form textarea:focus {
  outline: none;
  border-color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
}

html body .tz-request-form__notice {
  border-left: 2px solid var(--tzagg-accent-green);
  background-color: rgba(0, 255, 102, 0.08);
  padding: 14px var(--tzagg-space-sm);
  margin-bottom: var(--tzagg-space-sm);
  color: var(--tzagg-text-main);
}

html body .tz-request-form__notice--error {
  border-left-color: #FF4D6A;
  background-color: rgba(255, 77, 106, 0.08);
}

html body .tz-request-form__hp {
  position: absolute;
  left: -9999px;
}

/* ---------------------------------------------------------------
   5. WooCommerce
   --------------------------------------------------------------- */

html body.woocommerce-page,
html body .woocommerce {
  background-color: var(--tzagg-bg-dark);
  color: var(--tzagg-text-main);
}

/* Product grid cards */

html body ul.products li.product {
  background-color: var(--tzagg-bg-dark);
  border: var(--tzagg-border-cyber);
  border-radius: 0;
  padding: 14px;
  clip-path: var(--tzagg-notch);
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

html body ul.products li.product:hover {
  border-color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
  transform: translateY(-3px);
}

html body ul.products li.product img {
  border-radius: 0;
  margin-bottom: 14px;
}

html body ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--tzagg-text-main);
  padding: 0;
  margin: 0 0 8px;
}

html body ul.products li.product .price,
html body .woocommerce div.product p.price,
html body .woocommerce div.product span.price {
  font-family: var(--tzagg-font-heading);
  font-weight: 700;
  color: var(--tzagg-accent-green);
  font-size: 1.3rem;
}

html body .woocommerce ul.products li.product .price del {
  color: var(--tzagg-text-muted);
  opacity: 0.7;
}

html body .woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--tzagg-accent-green);
}

html body span.onsale,
html body .woocommerce span.onsale {
  background-color: var(--tzagg-accent-green);
  color: var(--tzagg-bg-void);
  border-radius: 0;
  font-family: var(--tzagg-font-ui);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  clip-path: var(--tzagg-notch);
}

/* Single product */

html body .woocommerce div.product .product_title {
  font-family: var(--tzagg-font-heading);
}

html body .woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: var(--tzagg-border-cyber);
  padding: 0;
}

html body .woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--tzagg-bg-surface);
  border: var(--tzagg-border-cyber);
  border-radius: 0;
}

html body .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--tzagg-font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tzagg-text-muted);
}

html body .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--tzagg-accent-green);
}

html body .woocommerce .quantity input.qty {
  background-color: var(--tzagg-bg-void);
  border: 1px solid rgba(160, 160, 176, 0.4);
  border-radius: 0;
  color: var(--tzagg-text-main);
}

/* Cart, checkout, and account tables must never fall back to white. */

html body .woocommerce table.shop_table,
html body .woocommerce table.shop_table_responsive,
html body .woocommerce-cart table.cart,
html body .woocommerce-checkout table.shop_table,
html body .woocommerce-account table.shop_table,
html body table.woocommerce-orders-table,
html body table.woocommerce-table--order-details,
html body table.woocommerce-table--downloads {
  background-color: var(--tzagg-bg-surface);
  border: var(--tzagg-border-cyber);
  border-radius: 0;
  border-collapse: collapse;
  color: var(--tzagg-text-main);
}

html body .woocommerce table.shop_table th,
html body .woocommerce table.shop_table td,
html body table.woocommerce-orders-table th,
html body table.woocommerce-orders-table td,
html body table.woocommerce-table--downloads th,
html body table.woocommerce-table--downloads td {
  background-color: transparent;
  border-top: 1px solid rgba(0, 255, 102, 0.18);
  border-bottom: none;
  color: var(--tzagg-text-main);
  padding: 14px 12px;
}

html body .woocommerce table.shop_table thead th,
html body table.woocommerce-orders-table thead th {
  font-family: var(--tzagg-font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzagg-text-muted);
  font-size: 0.88rem;
}

html body .woocommerce table.shop_table tfoot th,
html body .woocommerce table.shop_table tfoot td {
  color: var(--tzagg-text-main);
}

html body .woocommerce .cart_totals h2,
html body .woocommerce-checkout h3,
html body #order_review_heading {
  font-family: var(--tzagg-font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tzagg-accent-green);
}

html body .woocommerce .cart-collaterals .cart_totals,
html body #order_review,
html body .woocommerce-checkout #payment {
  background-color: var(--tzagg-bg-surface);
  border: var(--tzagg-border-cyber);
  border-radius: 0;
}

html body .woocommerce-checkout #payment div.payment_box {
  background-color: var(--tzagg-bg-void);
  border-radius: 0;
  color: var(--tzagg-text-muted);
}

html body .woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--tzagg-bg-void);
}

html body .woocommerce-checkout #payment ul.payment_methods {
  border-bottom: var(--tzagg-border-cyber);
}

html body .woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--tzagg-text-main);
  font-family: var(--tzagg-font-ui);
  letter-spacing: 0.03em;
}

/* Checkout and account form fields */

html body .woocommerce form .form-row input.input-text,
html body .woocommerce form .form-row textarea,
html body .woocommerce form .form-row select,
html body .select2-container .select2-selection--single {
  background-color: var(--tzagg-bg-void);
  border: 1px solid rgba(160, 160, 176, 0.4);
  border-radius: 0;
  color: var(--tzagg-text-main);
  font-family: var(--tzagg-font-body);
  padding: 12px 14px;
  height: auto;
}

html body .woocommerce form .form-row input.input-text:focus,
html body .woocommerce form .form-row textarea:focus,
html body .woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
}

html body .woocommerce form .form-row label {
  color: var(--tzagg-text-muted);
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.88rem;
}

html body .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--tzagg-text-main);
  line-height: normal;
}

html body .select2-dropdown {
  background-color: var(--tzagg-bg-surface);
  border: var(--tzagg-border-cyber);
  color: var(--tzagg-text-main);
}

/* Notices */

html body .woocommerce-message,
html body .woocommerce-info,
html body .woocommerce-error {
  background-color: var(--tzagg-bg-surface);
  border-top: none;
  border-left: 2px solid var(--tzagg-accent-green);
  border-radius: 0;
  color: var(--tzagg-text-main);
}

html body .woocommerce-message::before,
html body .woocommerce-info::before {
  color: var(--tzagg-accent-green);
}

html body .woocommerce-error {
  border-left-color: #FF4D6A;
}

html body .woocommerce-error::before {
  color: #FF4D6A;
}

/* My account navigation */

html body .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--tzagg-border-cyber);
}

html body .woocommerce-MyAccount-navigation li {
  border-bottom: var(--tzagg-border-cyber);
}

html body .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 4px;
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tzagg-text-muted);
  text-decoration: none;
}

html body .woocommerce-MyAccount-navigation li.is-active a,
html body .woocommerce-MyAccount-navigation li a:hover {
  color: var(--tzagg-accent-green);
}

/* Cart fee line, where the bundle discount lands. */
html body .woocommerce .cart_totals .fee th,
html body .woocommerce .cart_totals .fee td,
html body .woocommerce-checkout .fee th,
html body .woocommerce-checkout .fee td {
  color: var(--tzagg-accent-green);
}

/* ---------------------------------------------------------------
   5b. WooCommerce Blocks

       The cart and checkout on this install are the block versions,
       which share no markup with the classic shortcodes styled above.
       Their fields ship white with near black text, so they need their
       own pass or the checkout is the one light screen in the store.
   --------------------------------------------------------------- */

html body .wc-block-components-form,
html body .wp-block-woocommerce-checkout,
html body .wp-block-woocommerce-cart {
  color: var(--tzagg-text-main);
}

/* Fields */

html body .wc-block-components-text-input input[type="text"],
html body .wc-block-components-text-input input[type="email"],
html body .wc-block-components-text-input input[type="tel"],
html body .wc-block-components-text-input input[type="number"],
html body .wc-block-components-textarea,
html body .wc-blocks-components-select__container,
html body .wc-block-components-combobox input {
  /* WooCommerce Blocks styles these fields at a higher specificity than
     a child theme can reach, so the surface properties are forced.
     Everything else here wins on the cascade normally. */
  background-color: var(--tzagg-bg-void) !important;
  border: 1px solid rgba(160, 160, 176, 0.4) !important;
  border-radius: 0 !important;
  color: var(--tzagg-text-main) !important;
  font-family: var(--tzagg-font-body);
}

html body .wc-blocks-components-select__select {
  background-color: transparent !important;
  color: var(--tzagg-text-main) !important;
  font-family: var(--tzagg-font-body);
}

html body .wc-blocks-components-select__select option {
  background-color: var(--tzagg-bg-surface);
  color: var(--tzagg-text-main);
}

html body .wc-block-components-text-input input:focus,
html body .wc-block-components-textarea:focus,
html body .wc-blocks-components-select__container:focus-within {
  outline: none;
  border-color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
}

/* The field label floats over the input, so it has to sit on the dark
   ground rather than the white one the block CSS assumes. */
html body .wc-block-components-text-input label,
html body .wc-blocks-components-select__label,
html body .wc-block-components-checkout-step__description,
html body .wc-block-components-address-card__edit {
  color: var(--tzagg-text-muted);
}

html body .wc-block-components-text-input.is-active label {
  background-color: transparent;
}

html body .wc-block-components-checkbox__input,
html body .wc-block-components-radio-control__input {
  accent-color: var(--tzagg-accent-green);
}

/* Panels and steps */

html body .wc-block-components-checkout-step,
html body .wc-block-components-sidebar,
html body .wc-block-components-panel,
html body .wc-block-components-order-summary,
html body .wp-block-woocommerce-checkout-order-summary-block {
  background-color: transparent;
  color: var(--tzagg-text-main);
}

html body .wc-block-components-sidebar,
html body .wp-block-woocommerce-checkout-order-summary-block {
  background-color: var(--tzagg-bg-surface);
  border: var(--tzagg-border-cyber);
  border-radius: 0;
  padding: var(--tzagg-space-sm);
}

html body .wc-block-components-checkout-step__title,
html body .wc-block-components-title,
html body .wc-block-components-order-summary__title {
  font-family: var(--tzagg-font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tzagg-accent-green);
}

html body .wc-block-components-product-name,
html body .wc-block-cart-item__product .wc-block-components-product-name {
  font-family: var(--tzagg-font-ui);
  font-weight: 600;
  color: var(--tzagg-text-main);
  text-decoration: none;
}

html body .wc-block-components-product-metadata,
html body .wc-block-components-product-details {
  color: var(--tzagg-text-muted);
}

/* Prices and totals */

html body .wc-block-components-product-price,
html body .wc-block-formatted-money-amount,
html body .wc-block-components-formatted-money-amount {
  font-family: var(--tzagg-font-heading);
  color: var(--tzagg-accent-green);
}

html body .wc-block-components-totals-item {
  color: var(--tzagg-text-main);
}

html body .wc-block-components-totals-item__label {
  color: var(--tzagg-text-muted);
}

html body .wc-block-components-totals-wrapper {
  border-top: 1px solid rgba(0, 255, 102, 0.18);
}

/* The bundle discount arrives as a fee line, so it reads in the accent. */
html body .wc-block-components-totals-fees .wc-block-components-totals-item__label,
html body .wc-block-components-totals-fees .wc-block-components-formatted-money-amount,
html body .wc-block-components-totals-discount .wc-block-components-totals-item__label {
  color: var(--tzagg-accent-green);
}

/* Cart line rows */

html body .wc-block-cart-items,
html body table.wc-block-cart-items {
  background-color: transparent;
  color: var(--tzagg-text-main);
}

html body .wc-block-cart-items__header,
html body .wc-block-cart-items__header th {
  font-family: var(--tzagg-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzagg-text-muted);
  border-bottom: var(--tzagg-border-cyber);
}

html body .wc-block-cart-items__row td,
html body tr.wc-block-cart-items__row td {
  border-top: 1px solid rgba(0, 255, 102, 0.18);
  background-color: transparent;
  color: var(--tzagg-text-main);
}

html body .wc-block-components-quantity-selector {
  border: 1px solid rgba(160, 160, 176, 0.4);
  border-radius: 0;
  background-color: var(--tzagg-bg-void);
}

html body .wc-block-components-quantity-selector__input,
html body .wc-block-components-quantity-selector__button {
  background-color: transparent;
  color: var(--tzagg-text-main);
  border: none;
}

html body .wc-block-components-quantity-selector__button:hover {
  color: var(--tzagg-accent-green);
}

/* Payment method rows */

html body .wc-block-components-radio-control__option,
html body .wc-block-components-radio-control-accordion-option {
  background-color: var(--tzagg-bg-void) !important;
  border: 1px solid rgba(160, 160, 176, 0.3) !important;
  border-radius: 0 !important;
  color: var(--tzagg-text-main);
}

html body .wc-block-components-radio-control__option--checked-option-highlighted,
html body .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
}

/* Buttons and notices */

html body .wc-block-components-button:not(.is-link) {
  font-family: var(--tzagg-font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  background-color: transparent;
  color: var(--tzagg-accent-green);
  border: 1px solid var(--tzagg-accent-green);
  border-radius: 0;
  clip-path: var(--tzagg-notch);
  box-shadow: none;
}

html body .wc-block-components-button:not(.is-link):hover {
  background-color: rgba(0, 255, 102, 0.12);
  color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
}

html body .wc-block-components-notice-banner,
html body .wc-block-checkout__no-payment-methods-notice {
  background-color: var(--tzagg-bg-surface) !important;
  border-radius: 0;
  color: var(--tzagg-text-main);
}

/* The quantity badge on the order summary thumbnail ships white. */
html body .wc-block-components-order-summary-item__quantity {
  background-color: var(--tzagg-bg-surface) !important;
  border: var(--tzagg-border-cyber);
  border-radius: 0;
  color: var(--tzagg-text-main);
}

html body .wc-block-components-notice-banner.is-error {
  border-color: #FF4D6A;
}

html body .wc-block-components-notice-banner.is-info,
html body .wc-block-components-notice-banner.is-success {
  border-color: var(--tzagg-accent-green);
}

/* Product grid rendered by the Product Collection block */

html body .wc-block-product-template .wc-block-product,
html body .wp-block-woocommerce-product-template li.product {
  background-color: var(--tzagg-bg-dark);
  border: var(--tzagg-border-cyber);
  border-radius: 0;
  padding: 14px;
  clip-path: var(--tzagg-notch);
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

html body .wc-block-product-template .wc-block-product:hover,
html body .wp-block-woocommerce-product-template li.product:hover {
  border-color: var(--tzagg-accent-green);
  box-shadow: var(--tzagg-glow-green);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------
   6. Responsive and motion
   --------------------------------------------------------------- */

@media (max-width: 781px) {
  html body .tz-hero {
    padding-top: var(--tzagg-space-lg);
  }

  html body .tz-hero__title {
    max-width: none;
  }

  html body .tz-feature--lead {
    border-left: none;
    border-top: 2px solid var(--tzagg-accent-green);
    padding-left: 0;
    padding-top: var(--tzagg-space-sm);
  }

  html body .woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  html body ul.products li.product:hover {
    transform: none;
  }
}