/* ==========================================================================
   TrustedCloudShop — WooCommerce layer
   Configuration-first product page: provider identity, then a full-width
   configuration workspace, then the visual, then documentation.
   Woo's own markup and behaviour are untouched; only presentation changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product masthead — provider identity across the full width
   -------------------------------------------------------------------------- */
.tcs-pmast { padding-block: var(--tcs-6) var(--tcs-7); border-bottom: 1px solid var(--tcs-line); }
.tcs-pmast__id { display: flex; align-items: center; gap: var(--tcs-4); margin-bottom: var(--tcs-5); }
.tcs-pmast__glyph {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--tcs-line-strong);
  border-radius: var(--tcs-r-sm);
  background: var(--tcs-surface);
  font-family: var(--tcs-font-mono); font-size: 16px; font-weight: 600;
  color: var(--tcs-accent, var(--tcs-violet-bright));
}
.tcs-pmast__meta { min-width: 0; }
.tcs-pmast__brand {
  display: block; font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs);
  letter-spacing: var(--tcs-track-label); text-transform: uppercase;
  color: var(--tcs-accent, var(--tcs-violet-bright));
}
.tcs-pmast__cat { display: block; font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-faint); margin-top: 3px; letter-spacing: .08em; }
.woocommerce div.product .tcs-pmast__title { font-size: var(--tcs-fs-3xl) !important; margin: 0 0 var(--tcs-4) !important; max-width: 22ch; }
.tcs-pmast__short { font-size: var(--tcs-fs-lg); color: var(--tcs-ink-body); max-width: 68ch; }
.tcs-pmast__short p { margin-bottom: var(--tcs-3); }
.tcs-pmast__short .tcs-short__meta { font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-xs); color: var(--tcs-ink-muted); }
.tcs-pmast__short .tcs-short__meta strong { color: var(--tcs-magenta); }

/* --------------------------------------------------------------------------
   Configuration workspace — the dominant element on the page
   -------------------------------------------------------------------------- */
.tcs-work { padding-block: var(--tcs-7); }
.tcs-work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tcs-4); margin-bottom: var(--tcs-5); }
.tcs-work__head h2 { font-size: var(--tcs-fs-xl) !important; margin: var(--tcs-2) 0 0 !important; }
.tcs-work__count { font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-xs); color: var(--tcs-ink-faint); letter-spacing: .06em; }

.tcs-work__grid { display: grid; gap: var(--tcs-5); align-items: start; }
.tcs-work__grid > * { min-width: 0; }
@media (min-width: 1080px) { .tcs-work__grid { grid-template-columns: minmax(0, 1fr) 360px; } }

/* Configuration list ------------------------------------------------------- */
.tcs-configs {
  border: 1px solid var(--tcs-line);
  border-radius: var(--tcs-r-sm);
  overflow: hidden;
  background: var(--tcs-surface);
}
.tcs-configs__hd {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--tcs-4); align-items: center;
  padding: var(--tcs-3) var(--tcs-5);
  background: var(--tcs-surface-2);
  border-bottom: 1px solid var(--tcs-line-strong);
  font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs);
  letter-spacing: var(--tcs-track-label); text-transform: uppercase; color: var(--tcs-ink-faint);
}
/* Scroll only when the list is long; AWS has twenty options. */
.tcs-configs__list { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; }

.tcs-config {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--tcs-4); align-items: center; width: 100%;
  padding: var(--tcs-4) var(--tcs-5);
  background: transparent; border: 0; border-bottom: 1px solid var(--tcs-line);
  border-left: 3px solid transparent;
  color: var(--tcs-ink-body); text-align: left; cursor: pointer;
  font: inherit;
  transition: background-color var(--tcs-dur-fast) var(--tcs-ease),
              border-color var(--tcs-dur-fast) var(--tcs-ease);
}
.tcs-config:last-child { border-bottom: 0; }
.tcs-config:hover { background: rgba(124, 92, 255, .08); }
.tcs-config[aria-checked="true"] {
  background: var(--tcs-surface-3);
  border-left-color: var(--tcs-violet);
}
.tcs-config__mark {
  width: 18px; height: 18px;
  border: 1px solid var(--tcs-line-strong); border-radius: 50%;
  display: grid; place-items: center; flex: none;
  transition: border-color var(--tcs-dur-fast) var(--tcs-ease);
}
.tcs-config__mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tcs-violet); transform: scale(0);
  transition: transform var(--tcs-dur-fast) var(--tcs-ease-out);
}
.tcs-config[aria-checked="true"] .tcs-config__mark { border-color: var(--tcs-violet); }
.tcs-config[aria-checked="true"] .tcs-config__mark::after { transform: scale(1); }
.tcs-config__name { font-size: var(--tcs-fs-sm); font-weight: 500; color: var(--tcs-ink); line-height: 1.35; }
.tcs-config__sku { display: block; font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-faint); margin-top: 3px; letter-spacing: .04em; }
.tcs-config__price { font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-base); font-weight: 600; color: var(--tcs-magenta); white-space: nowrap; }
.tcs-config__price .woocommerce-Price-amount { font-family: inherit; color: inherit; }

/* Selection summary — sticky rail beside the list on desktop --------------- */
.tcs-buy {
  background: var(--tcs-surface);
  border: 1px solid var(--tcs-line-strong);
  border-radius: var(--tcs-r-sm);
  box-shadow: var(--tcs-shadow-2);
  overflow: hidden;
}
@media (min-width: 1080px) { .tcs-buy { position: sticky; top: calc(var(--tcs-header-h) + var(--tcs-utility-h) + 1.5rem); } }
.tcs-buy__hd {
  padding: var(--tcs-3) var(--tcs-5);
  background: var(--tcs-surface-2);
  border-bottom: 1px solid var(--tcs-line-strong);
  font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs);
  letter-spacing: var(--tcs-track-label); text-transform: uppercase; color: var(--tcs-ink-faint);
}
.tcs-buy__body { padding: var(--tcs-5); }
.tcs-buy__sel {
  font-family: var(--tcs-font-display); font-size: var(--tcs-fs-lg); font-weight: 600;
  color: var(--tcs-ink); line-height: 1.3; margin-bottom: var(--tcs-2);
  min-height: 1.3em;
}
.tcs-buy__sel--empty { color: var(--tcs-ink-faint); font-weight: 400; font-family: var(--tcs-font-sans); font-size: var(--tcs-fs-sm); }
.tcs-buy__meta { font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-faint); letter-spacing: .04em; margin-bottom: var(--tcs-5); }

/* The price readout is the loudest number on the page. */
.tcs-buy__price {
  font-family: var(--tcs-font-mono); font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1;
  color: var(--tcs-magenta); letter-spacing: -.02em;
  padding-bottom: var(--tcs-5); margin-bottom: var(--tcs-5);
  border-bottom: 1px solid var(--tcs-line);
}
.woocommerce div.product .tcs-buy__price .woocommerce-Price-amount,
.woocommerce div.product .tcs-buy__price span.price,
.woocommerce div.product .tcs-buy__price p.price {
  font-family: inherit !important; font-size: inherit !important;
  color: inherit !important; font-weight: inherit !important; margin: 0 !important;
}
.tcs-buy__price del { color: var(--tcs-ink-faint); font-size: .5em; }
.tcs-buy__price ins { text-decoration: none; }

.tcs-buy__aux { display: grid; gap: var(--tcs-2); margin-top: var(--tcs-4); padding-top: var(--tcs-4); border-top: 1px solid var(--tcs-line); }
.tcs-buy__aux .tcs-btn { width: 100%; }
.tcs-buy__note { font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-faint); margin-top: var(--tcs-4); line-height: 1.5; }

/* Woo's own variation form, restyled. When JS is active the native select is
   moved off-screen and the configuration list drives it; without JS the
   select stays visible and everything still works. */
.woocommerce div.product form.cart { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.woocommerce div.product form.cart .variations { width: 100%; margin: 0 0 var(--tcs-4); border: 0; }
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; width: 100%; padding: 0; border: 0; background: none; }
.woocommerce div.product form.cart .variations label {
  display: block; margin-bottom: var(--tcs-2);
  font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs);
  letter-spacing: var(--tcs-track-label); text-transform: uppercase; color: var(--tcs-ink-faint);
}
.woocommerce div.product form.cart .variations select {
  width: 100%; padding: .8rem 2.4rem .8rem 1rem !important;
  background-color: var(--tcs-void) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C83B8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 14px !important;
  border: 1px solid var(--tcs-line-strong) !important; border-radius: var(--tcs-r-sm) !important;
  color: var(--tcs-ink) !important; font-weight: 500;
  -webkit-appearance: none; appearance: none;
}
.woocommerce div.product form.cart .variations select option { background: var(--tcs-surface-2); color: var(--tcs-ink); }
.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: var(--tcs-2); font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-muted); }
/* Woo prints its own price and availability inside the variation wrapper; the
   buy panel shows those instead. */
.tcs-buy .woocommerce-variation-price, .tcs-buy .woocommerce-variation-description { display: none; }
.woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--tcs-2); align-items: stretch; }

.woocommerce .quantity { flex: none; }
.woocommerce .quantity .qty {
  width: 78px; padding: .85rem .5rem !important; text-align: center;
  background: var(--tcs-void) !important; border: 1px solid var(--tcs-line-strong) !important;
  border-radius: var(--tcs-r-sm) !important; color: var(--tcs-ink) !important;
  font-family: var(--tcs-font-mono); font-weight: 600;
}

/* Buttons. Astra's WooCommerce sheet is highly specific about .alt and
   .disabled, so these are marked important rather than fought selector by
   selector. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce-js a.button, .woocommerce-js button.button, .woocommerce-js button.button.alt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tcs-2);
  padding: .9rem 1.6rem;
  background: var(--tcs-violet) !important; color: #fff !important;
  border: 1px solid var(--tcs-violet) !important; border-radius: var(--tcs-r-sm) !important;
  font-family: var(--tcs-font-sans) !important;
  font-weight: 600 !important; font-size: var(--tcs-fs-sm) !important; line-height: 1.2 !important;
  text-decoration: none; text-transform: none;
  transition: background-color var(--tcs-dur-fast) var(--tcs-ease), box-shadow var(--tcs-dur-fast) var(--tcs-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background: var(--tcs-violet-bright) !important; color: #fff !important; box-shadow: var(--tcs-glow);
}
.woocommerce button.button.alt.single_add_to_cart_button { flex: 1 1 190px; }
.woocommerce a.button.wc-backward, .woocommerce a.button.wc-forward {
  background: transparent !important; border-color: var(--tcs-line-strong) !important; color: var(--tcs-ink) !important;
}
.woocommerce a.button.wc-backward:hover, .woocommerce a.button.wc-forward:hover {
  background: rgba(124, 92, 255, .14) !important; border-color: var(--tcs-violet) !important; color: #fff !important; box-shadow: none;
}
.woocommerce button.button:disabled, .woocommerce button.button.disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled,
.woocommerce-js button.button.alt.disabled,
.woocommerce button.button.wc-variation-selection-needed {
  background: var(--tcs-surface-2) !important; color: var(--tcs-ink-faint) !important;
  border-color: var(--tcs-line) !important; cursor: not-allowed; opacity: 1;
}
.woocommerce button.button:disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.wc-variation-selection-needed:hover { box-shadow: none; background: var(--tcs-surface-2) !important; }

.woocommerce div.product .product_meta { margin-top: var(--tcs-4); font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-faint); }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: var(--tcs-1); }
.woocommerce div.product .product_meta a { color: var(--tcs-ink-muted); }
.woocommerce div.product .stock { color: var(--tcs-ok) !important; font-weight: 600; }
.woocommerce div.product .out-of-stock { color: var(--tcs-err) !important; }

/* --------------------------------------------------------------------------
   Product visual — wide cinematic panel below the workspace
   -------------------------------------------------------------------------- */
.tcs-pvis { position: relative; }
.tcs-pvis__frame {
  position: relative;
  border: 1px solid var(--tcs-line);
  border-radius: var(--tcs-r-lg);
  overflow: hidden;
  background: var(--tcs-void);
}
.tcs-pvis__frame img { width: 100%; display: block; }
/* Corner ticks give the panel an instrument-panel feel. */
.tcs-pvis__frame::before, .tcs-pvis__frame::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
  border-color: var(--tcs-violet); opacity: .7;
}
.tcs-pvis__frame::before { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.tcs-pvis__frame::after { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }
.tcs-pvis__cap {
  display: flex; flex-wrap: wrap; gap: var(--tcs-4); justify-content: space-between;
  margin-top: var(--tcs-3);
  font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs);
  color: var(--tcs-ink-faint); letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   Documentation area — magazine reading column
   -------------------------------------------------------------------------- */
.tcs-pdocs { display: grid; gap: clamp(2rem, 5vw, 4rem); }
/* Without this a grid item never shrinks below its min-content width,
   and the options table (min-width: 420px) widens the whole page on a
   phone instead of scrolling inside .tcs-tablescroll. */
.tcs-pdocs > * { min-width: 0; }
@media (min-width: 1080px) { .tcs-pdocs { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } }
.tcs-pdocs__aside { position: sticky; top: calc(var(--tcs-header-h) + var(--tcs-utility-h) + 1.5rem); display: grid; gap: var(--tcs-4); }
@media (max-width: 1079px) { .tcs-pdocs__aside { position: static; } }
.tcs-side {
  background: var(--tcs-surface); border: 1px solid var(--tcs-line);
  border-radius: var(--tcs-r-sm); padding: var(--tcs-5);
}
.tcs-side__t {
  font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); font-weight: 500;
  letter-spacing: var(--tcs-track-label); text-transform: uppercase; color: var(--tcs-ink-faint);
  margin: 0 0 var(--tcs-4); padding-bottom: var(--tcs-3); border-bottom: 1px solid var(--tcs-line);
}
.tcs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tcs-2); counter-reset: t; font-size: var(--tcs-fs-sm); }
.tcs-toc li { counter-increment: t; margin: 0; }
.tcs-toc a { display: flex; gap: var(--tcs-3); color: var(--tcs-ink-muted); text-decoration: none; line-height: 1.4; }
.tcs-toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-violet); flex: none; padding-top: .15em; }
.tcs-toc a:hover { color: var(--tcs-ink); }

/* --------------------------------------------------------------------------
   Shop archive / loops
   -------------------------------------------------------------------------- */
.woocommerce ul.products { display: grid !important; gap: var(--tcs-4) !important; margin: 0 !important; padding: 0 !important; list-style: none; }
@media (min-width: 620px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

/* --------------------------------------------------------------------------
   Cart, checkout, account
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table, .woocommerce table.shop_attributes {
  width: 100%; border-collapse: collapse; background: var(--tcs-surface);
  border: 1px solid var(--tcs-line) !important; border-radius: var(--tcs-r-sm);
  overflow: hidden; font-size: var(--tcs-fs-sm); color: var(--tcs-ink-body);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td,
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td {
  padding: var(--tcs-4) !important; border-bottom: 1px solid var(--tcs-line) !important;
  text-align: left; vertical-align: middle; background: transparent !important;
}
.woocommerce table.shop_table thead th, .woocommerce table.shop_attributes th {
  font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); font-weight: 500;
  letter-spacing: var(--tcs-track-label); text-transform: uppercase;
  color: var(--tcs-ink-faint) !important; background: var(--tcs-surface-2) !important;
}
.woocommerce table.shop_table td.product-name a { color: var(--tcs-ink) !important; font-weight: 600; }
.woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td.product-total, .woocommerce table.shop_table .amount {
  color: var(--tcs-magenta) !important; font-family: var(--tcs-font-mono); font-weight: 600;
}
.woocommerce table.shop_table .variation { font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-faint); }
.woocommerce table.shop_table img { width: 64px; border-radius: var(--tcs-r-xs); border: 1px solid var(--tcs-line); }
.woocommerce a.remove { color: var(--tcs-err) !important; background: var(--tcs-surface-2); border-radius: var(--tcs-r-xs); }
.woocommerce a.remove:hover { background: var(--tcs-err) !important; color: #fff !important; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tcs-3);
  padding: var(--tcs-4) var(--tcs-5) !important;
  background: var(--tcs-surface) !important; border: 1px solid var(--tcs-line) !important;
  border-left: 3px solid var(--tcs-violet) !important; border-radius: 0 var(--tcs-r-sm) var(--tcs-r-sm) 0;
  color: var(--tcs-ink-body) !important; list-style: none; margin: 0 0 var(--tcs-5) !important;
}
.woocommerce-error { border-left-color: var(--tcs-err) !important; }
.woocommerce-info { border-left-color: var(--tcs-magenta) !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

.woocommerce form .form-row label { font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tcs-ink-faint); }
.woocommerce form .form-row .required { color: var(--tcs-magenta); }
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
  background: var(--tcs-surface) !important; border: 1px solid var(--tcs-line); border-radius: var(--tcs-r-sm); padding: var(--tcs-5);
}
.woocommerce-checkout #payment div.payment_box { background: var(--tcs-surface-2) !important; color: var(--tcs-ink-body) !important; border-radius: var(--tcs-r-xs); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--tcs-surface-2) !important; }
.woocommerce-checkout #payment .place-order .button { width: 100%; padding: 1.05rem 1.6rem !important; }

@media (max-width: 720px) {
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: var(--tcs-2); padding: var(--tcs-4); }
  .woocommerce table.shop_table tbody td { display: flex; align-items: center; justify-content: space-between; gap: var(--tcs-3); padding: 0 !important; border: 0 !important; }
  .woocommerce table.shop_table tbody td::before { content: attr(data-title); font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-2xs); color: var(--tcs-ink-faint); text-transform: uppercase; letter-spacing: .08em; }
  .woocommerce table.shop_table td.product-thumbnail::before, .woocommerce table.shop_table td.product-remove::before { display: none; }
}

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--tcs-line); border: 1px solid var(--tcs-line); border-radius: var(--tcs-r-sm); overflow: hidden; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a { display: block; padding: .8rem 1rem; background: var(--tcs-surface); color: var(--tcs-ink-body); text-decoration: none; font-size: var(--tcs-fs-sm); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--tcs-surface-3); color: var(--tcs-ink); }
@media (min-width: 900px) { .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--tcs-7); } }
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { width: auto !important; float: none !important; }

.woocommerce nav.woocommerce-pagination ul { border: 0 !important; display: flex; gap: var(--tcs-1); justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .8rem;
  background: var(--tcs-surface) !important; border: 1px solid var(--tcs-line) !important;
  border-radius: var(--tcs-r-xs) !important; color: var(--tcs-ink-body) !important;
  font-family: var(--tcs-font-mono); font-size: var(--tcs-fs-xs);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--tcs-violet) !important; border-color: var(--tcs-violet) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   WooCommerce Blocks (cart / checkout)
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { color: var(--tcs-ink-body); }
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-order-summary {
  background: var(--tcs-surface); border: 1px solid var(--tcs-line);
  border-radius: var(--tcs-r-sm); padding: var(--tcs-5);
}
.wc-block-components-panel, .wc-block-components-totals-wrapper,
.wc-block-cart-items__row, .wc-block-components-order-summary-item { border-color: var(--tcs-line) !important; }
.wc-block-components-title, .wp-block-woocommerce-checkout h2,
.wc-block-components-checkout-step__title { color: var(--tcs-ink) !important; font-family: var(--tcs-font-display); }
.wc-block-components-checkout-step__description, .wc-block-components-product-metadata,
.wc-block-components-product-details, .wc-block-components-totals-item__label { color: var(--tcs-ink-muted) !important; }
.wc-block-components-product-price, .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { color: var(--tcs-magenta) !important; font-family: var(--tcs-font-mono); font-weight: 600; }
.wc-block-components-product-name { color: var(--tcs-ink) !important; font-weight: 600; }
.wc-block-components-product-name:hover { color: var(--tcs-violet-bright) !important; }
.wc-block-components-text-input input, .wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox-control input.components-combobox-control__input {
  background: var(--tcs-void) !important; border: 1px solid var(--tcs-line-strong) !important;
  border-radius: var(--tcs-r-sm) !important; color: var(--tcs-ink) !important;
}
.wc-block-components-text-input input:focus, .wc-block-components-select__select:focus,
.wc-block-components-combobox-control input.components-combobox-control__input:focus {
  border-color: var(--tcs-violet) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, .22) !important; outline: none !important;
}
.wc-block-components-text-input label, .wc-block-components-select__label,
.wc-block-components-checkbox__label { color: var(--tcs-ink-muted) !important; }
.wc-block-components-text-input.is-active label { background: transparent !important; }
.wc-block-components-quantity-selector { border-color: var(--tcs-line-strong) !important; border-radius: var(--tcs-r-sm); }
.wc-block-components-quantity-selector__input { background: transparent !important; color: var(--tcs-ink) !important; font-family: var(--tcs-font-mono); }
.wc-block-components-quantity-selector__button { color: var(--tcs-ink-muted) !important; }
.wc-block-components-quantity-selector__button:hover { color: var(--tcs-violet-bright) !important; }
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
  background: var(--tcs-violet) !important; border-color: var(--tcs-violet) !important;
  color: #fff !important; border-radius: var(--tcs-r-sm) !important; font-weight: 600 !important;
}
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--tcs-violet-bright) !important; border-color: var(--tcs-violet-bright) !important; }
.wc-block-components-button.is-link { color: var(--tcs-violet-bright) !important; }
.wc-block-components-notice-banner {
  background: var(--tcs-surface) !important; border-color: var(--tcs-line-strong) !important;
  color: var(--tcs-ink-body) !important; border-radius: var(--tcs-r-sm);
}
.wc-block-components-notice-banner.is-error { border-left-color: var(--tcs-err) !important; }
.wc-block-components-notice-banner.is-success { border-left-color: var(--tcs-violet) !important; }
.wc-block-components-radio-control__option {
  background: var(--tcs-surface-2); border: 1px solid var(--tcs-line);
  border-radius: var(--tcs-r-sm); color: var(--tcs-ink-body);
}
.wc-block-components-radio-control__option--checked-option-highlighted { border-color: var(--tcs-violet); }
.wc-block-components-checkbox__input[type=checkbox] { border-color: var(--tcs-line-strong) !important; }
.wc-block-components-checkbox__input[type=checkbox]:checked { background: var(--tcs-violet) !important; border-color: var(--tcs-violet) !important; }
.wc-block-components-order-summary__button-text { color: var(--tcs-ink) !important; }
.wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img { border-radius: var(--tcs-r-xs); border: 1px solid var(--tcs-line); }

/* Once ui.js takes over, WooCommerce's own variation control is moved
   off-screen rather than removed: the configuration list writes to it, and it
   stays available to assistive technology. Without JS the class is never
   added and the native select renders normally. */
.woocommerce div.product form.cart.tcs-var-enhanced .variations {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* No-JS fallback: label the native select clearly inside the buy panel. */
.tcs-configs__nojs { padding: var(--tcs-4) var(--tcs-5); border-top: 1px solid var(--tcs-line); font-size: var(--tcs-fs-xs); color: var(--tcs-ink-faint); }
.tcs-var-enhanced ~ .tcs-configs__nojs, form.tcs-var-enhanced .tcs-configs__nojs { display: none; }