/* Titan3D — WooCommerce overrides on top of WC's stripped default markup. */

.woocommerce, .woocommerce-page { color: var(--text-primary); }

/* Default product loop fallback (most archives use t3d-shop instead) */
.woocommerce ul.products,
ul.products {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
@media (max-width: 1024px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: 1fr; }
}
.woocommerce ul.products li.product,
ul.products li.product {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  list-style: none;
  margin: 0;
}

/* Sale flash */
.woocommerce span.onsale {
  background: var(--accent);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  box-shadow:
    0 0 0 1px rgba(94, 106, 210, 0.5),
    0 4px 12px var(--accent-glow);
}

/* WC default buttons -> our token system.
 * !important on text-indent and font-size because WC core / YITH plugins
 * sometimes set text-indent: -9999px or font-size: 0 to hide button text
 * and rely on an icon font (which we don't load). Force visible text. */
.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-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
body.logged-in a.wc-forward,
body a.wc-forward,
a.wc-forward,
.button.wc-forward,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a.button,
.woocommerce-error a.wc-forward {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #FFFFFF;
  padding: 10px 18px !important;
  min-height: 40px;
  min-width: auto !important;
  border: 0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.92rem !important;
  text-indent: 0 !important;
  white-space: nowrap;
  overflow: visible !important;
  cursor: pointer;
  text-decoration: none !important;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-glow);
  transition:
    background var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}
/* Ensure text inside is visible (not hidden by inner spans) */
.woocommerce a.button > *,
.woocommerce button.button > *,
.button.wc-forward > *,
a.wc-forward > * {
  text-indent: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
}
/* Add a CSS arrow for .wc-forward since WC's icon font isn't loaded */
.button.wc-forward::after,
a.wc-forward::after {
  content: '→';
  display: inline-block;
  margin-left: 4px;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
}
/* "View Cart" / "Continue Shopping" buttons inside notices: separate them
 * visually. Catches every button-class permutation WC core / WP blocks
 * emit (button, wc-forward, wp-element-button, wc-block-components-button)
 * via [class*="button"] so the override doesn't lose the specificity battle
 * to the WP block-element button styles. */
.woocommerce-message a[class*="button"],
.woocommerce-info a[class*="button"],
.woocommerce-error a[class*="button"],
.woocommerce-message a.wc-forward,
.woocommerce-info a.wc-forward,
.woocommerce-error a.wc-forward,
.woocommerce-message button[class*="button"],
.woocommerce-info button[class*="button"],
.woocommerce-error button[class*="button"] {
  margin-left: auto !important;
  flex: none;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 0 0 1px var(--border-strong) !important;
  padding: 8px 14px !important;
  min-height: 36px;
  min-width: 0 !important;
  width: auto !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-indent: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  border-radius: var(--radius-md) !important;
  border: 0 !important;
}
.woocommerce-message a[class*="button"]:hover,
.woocommerce-info a[class*="button"]:hover,
.woocommerce-error a[class*="button"]:hover,
.woocommerce-message a.wc-forward:hover,
.woocommerce-info a.wc-forward:hover,
.woocommerce-error a.wc-forward:hover {
  background: var(--surface-strong) !important;
  box-shadow: inset 0 0 0 1px var(--border-accent) !important;
  color: var(--text-primary) !important;
}

/* Notice list items: wrap message + button on same line, push button right */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-error > li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
  width: 100%;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: scale(0.98); }

/* Quantity controls */
.woocommerce .quantity { display: inline-flex; align-items: stretch; gap: 0; }
.woocommerce .quantity .qty {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  width: 4.5rem;
  height: 40px;
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.woocommerce .quantity .qty:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18);
}

/* Notices — clean ring border, no colored left bar */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background: var(--surface);
  color: var(--text-primary);
  padding: 14px var(--space-2);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.woocommerce-info { box-shadow: inset 0 0 0 1px var(--border-accent); color: var(--text-primary); }
.woocommerce-error { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.30); color: #FCA5A5; }
.woocommerce-message { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.30); color: #6EE7B7; }

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-container--default .select2-selection--single {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  min-height: 44px;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18);
}
.woocommerce form .form-row label {
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Tables */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.woocommerce table.shop_table tr:last-child th,
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table th {
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.9rem;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-size: 0.85rem;
}
.woocommerce-breadcrumb a { color: var(--text-muted); transition: color var(--duration-fast) var(--ease); }
.woocommerce-breadcrumb a:hover { color: var(--text-primary); }

/* Result count + ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.woocommerce .woocommerce-ordering select {
  background: var(--panel);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  min-height: 38px;
  font: inherit;
  font-size: 0.9rem;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: var(--space-4) 0;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { display: inline-block; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 0 0 1px var(--border),
    var(--shadow-inner-top);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--surface-strong);
  color: var(--accent-bright);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 0 14px var(--accent-glow);
}

/* Stock notice */
.woocommerce .stock { color: var(--text-muted); font-size: 0.9rem; }
.woocommerce .stock.in-stock { color: var(--success); }
.woocommerce .stock.out-of-stock { color: var(--danger); }

/* ─── Native HTML elements that bleed through dark theme ────── */

/* <mark> — WC uses these on view-order page for #ID, date, status.
 * Default browser styling is yellow background + black text. */
.woocommerce mark,
.woocommerce-page mark,
.woocommerce-account mark,
mark.order-number,
mark.order-date,
mark.order-status {
  background: var(--accent-soft);
  color: var(--accent-bright);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--border-accent);
}

/* <fieldset> — WC uses for "Password change" group. Default is a thin
 * grooved native border that looks broken on dark theme. */
.woocommerce fieldset,
.woocommerce-page fieldset,
.woocommerce-MyAccount-content fieldset {
  border: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border-radius: var(--radius-xl);
  padding: var(--space-3) !important;
  margin: var(--space-3) 0 !important;
  box-shadow: inset 0 0 0 1px var(--border);
}
.woocommerce fieldset legend,
.woocommerce-page fieldset legend {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0 8px 0 0;
}

/* WC's password "reveal" toggle (eye icon button) */
.woocommerce .show-password-input,
.woocommerce-page .show-password-input,
.password-input .show-password-input {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  text-decoration: none !important;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.woocommerce .show-password-input::before,
.password-input .show-password-input::before {
  content: '';
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.woocommerce .show-password-input:hover::before { filter: brightness(1.5); }
.woocommerce .show-password-input.display-password::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818CFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
}
.password-input { position: relative; }
.password-input input { padding-right: 44px !important; }

/* Address book "shipping/billing address card" boxes shown on /my-account/edit-address/ */
.woocommerce-Addresses .woocommerce-Address {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
}
.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.woocommerce-Address address {
  color: var(--text-secondary);
  font-style: normal;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ─── Login / Register / Lost / Reset password forms ───────────────
 *  Logged-out account screens render inside `<div class="woocommerce">`
 *  which our `.woocommerce-account` rule turns into a 220-px sidebar
 *  grid. With no sidebar present, the form gets pushed into the 220-px
 *  column. Reset that here for the logged-out state and present the
 *  form as a centered auth card. */
body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) 0 var(--space-7);
}
/* When both login + register columns are shown, make room for two cards. */
body.woocommerce-account:not(.logged-in) .woocommerce:has(.u-columns, .col2-set) {
  max-width: 880px;
}
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  margin: 0 0 var(--space-3);
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.lost_reset_password,
form.lost_reset_password {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-radius: var(--radius-2xl);
  padding: var(--space-4) var(--space-4) var(--space-4);
  box-shadow:
    inset 0 0 0 1px var(--border),
    var(--shadow-md);
  max-width: 100%;
  width: 100%;
}
.woocommerce-form-login p,
.woocommerce-form-register p,
.woocommerce-ResetPassword p,
.lost_reset_password p {
  margin: 0 0 var(--space-2);
}
/* Inputs full-width inside auth card */
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"],
.woocommerce-ResetPassword input[type="password"],
.lost_reset_password input[type="text"],
.lost_reset_password input[type="email"] {
  width: 100% !important;
}
/* Submit button — full-width primary inside the auth card */
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-ResetPassword button[type="submit"],
.lost_reset_password button[type="submit"] {
  width: 100%;
  margin-top: var(--space-2);
}

.u-columns,
.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 768px) {
  .u-columns,
  .col2-set { grid-template-columns: 1fr; }
}
.u-column1,
.u-column2,
.col-1,
.col-2 {
  width: auto !important;
  float: none !important;
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-1) 0 var(--space-2);
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.woocommerce-form-login__rememberme input[type="checkbox"],
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* "Lost your password?" — centered link below the submit button */
.woocommerce-LostPassword {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  text-align: center;
}
.woocommerce-LostPassword a {
  color: var(--accent-bright);
  text-decoration: none;
  font-weight: 500;
}
.woocommerce-LostPassword a:hover { color: var(--accent-bright); text-decoration: underline; }

/* Tighten the page hero on auth screens — the form already has its own h2. */
body.woocommerce-account:not(.logged-in) .t3d-page__header {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}
body.woocommerce-account:not(.logged-in) .t3d-page__header h1 {
  font-size: 2rem;
}

/* ─── WC Block grid (product-new / cross-sells in cart block) ─── */
.wc-block-grid { margin: 0 0 var(--space-3); }
.wc-block-grid__products {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.wc-block-grid.has-3-columns .wc-block-grid__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc-block-grid.has-2-columns .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .wc-block-grid__products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .wc-block-grid__products { grid-template-columns: 1fr; } }

.wc-block-grid__product {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 0 0 var(--space-2) !important;
  margin: 0 !important;
  list-style: none;
  isolation: isolate;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  flex: initial !important;
}
.wc-block-grid__product:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.wc-block-grid__product-link {
  text-decoration: none !important;
  color: inherit !important;
  display: contents;
}
.wc-block-grid__product-image {
  background: var(--panel-elevated) !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  margin: 0 !important;
  width: 100%;
  display: block;
  isolation: isolate;
}
.wc-block-grid__product-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(94, 106, 210, 0.15), transparent 60%),
    linear-gradient(135deg, var(--panel-elevated), var(--panel));
  z-index: 0;
}
.wc-block-grid__product-image img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
/* WC's default placeholder is a white-bordered SVG — hide it; the gradient ::before is enough. */
.wc-block-grid__product-image img.woocommerce-placeholder {
  visibility: hidden;
}
.wc-block-grid__product-title {
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  padding: var(--space-2) var(--space-2) 0;
  margin: 0 !important;
}
.wc-block-grid__product-link:hover .wc-block-grid__product-title { color: var(--accent-bright) !important; }
.wc-block-grid__product-price {
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
  padding: 4px var(--space-2) 0;
  display: block;
  font-variant-numeric: tabular-nums;
}
.wc-block-grid__product-price .amount,
.wc-block-grid__product-price ins { color: var(--text-primary); text-decoration: none; }
.wc-block-grid__product-price del { color: var(--text-disabled); margin-right: 4px; }
.wc-block-grid__product-onsale {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--accent);
  color: #FFFFFF;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.5), 0 4px 12px var(--accent-glow);
}
.wc-block-grid__product-add-to-cart {
  padding: var(--space-1) var(--space-2) 0;
  margin-top: auto;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .button {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 14px !important;
  font-weight: 500;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border: 0;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .button:hover { background: var(--accent-hover) !important; }

/* Empty cart container */
.wp-block-woocommerce-empty-cart-block { text-align: center; padding: var(--space-4) 0 var(--space-3); }
.wp-block-woocommerce-empty-cart-block svg.wc-block-empty-cart__image {
  fill: var(--text-disabled) !important;
  opacity: 0.45;
  margin: 0 auto var(--space-2);
}
.wp-block-woocommerce-empty-cart-block hr.wc-block-empty-cart__separator {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: var(--space-4) auto;
  max-width: 200px;
}
.wp-block-woocommerce-empty-cart-block h2 {
  text-align: left;
  margin-top: var(--space-4);
  letter-spacing: -0.025em;
}

/* ─── WC Block Checkout / Cart full styles ─────────────────────── */
/* All form inputs across the block-based checkout — symmetric padding,
 * static label above (no float animation, much more reliable).
 * Strip native appearance so macOS/Windows select chrome doesn't bleed through.
 * Excludes checkbox/radio (they have separate styling). */
.wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="password"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="search"],
.wc-block-checkout select,
.wc-block-checkout textarea,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"],
.wc-block-components-form input[type="password"],
.wc-block-components-form input[type="number"],
.wc-block-components-form input[type="search"],
.wc-block-components-form textarea,
.wc-block-components-form select,
.wc-block-cart input[type="text"],
.wc-block-cart input[type="email"],
.wc-block-cart input[type="tel"],
.wc-block-cart input[type="number"],
.wc-block-cart select,
.wc-block-cart textarea {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  font: inherit !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.005em;
  min-height: 44px;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  outline: none !important;
}

/* Checkbox + radio — small native squares/circles, accent indigo */
.wc-block-checkout input[type="checkbox"],
.wc-block-checkout input[type="radio"],
.wc-block-cart input[type="checkbox"],
.wc-block-cart input[type="radio"],
.wc-block-components-form input[type="checkbox"],
.wc-block-components-form input[type="radio"],
.wc-block-components-checkbox__input,
input[type="checkbox"].wc-block-components-checkbox__input,
input[type="radio"].wc-block-components-radio-control__input {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 18px !important;
  height: 18px !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--panel) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 4px !important;
  cursor: pointer;
  flex: none !important;
  accent-color: var(--accent);
}
input[type="radio"].wc-block-components-radio-control__input,
.wc-block-checkout input[type="radio"],
.wc-block-cart input[type="radio"] {
  border-radius: 50% !important;
}
/* Checkbox / radio label rows: align nicely */
.wc-block-components-checkbox,
.wc-block-components-radio-control__option {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  cursor: pointer;
}
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
  color: var(--text-secondary) !important;
  font-size: 0.92rem !important;
  flex: 1;
}

/* Custom chevron for selects (since we removed native appearance) */
.wc-block-checkout select,
.wc-block-components-form select,
.wc-block-cart select {
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(-45deg, transparent 50%, currentColor 50%) !important;
  background-position:
    right 18px top 50%,
    right 13px top 50% !important;
  background-size:
    5px 5px,
    5px 5px !important;
  background-repeat: no-repeat !important;
  /* Override the var(--panel) background with the panel + chevron stack */
  background-color: var(--panel) !important;
  cursor: pointer;
}
/* Native select option panel — make options dark too (Chrome/Edge respect this) */
.wc-block-checkout select option,
.wc-block-components-form select option,
.wc-block-cart select option {
  background: var(--panel-elevated);
  color: var(--text-primary);
}
/* Inputs not inside floating-label wrappers — restore symmetric padding */
.wc-block-cart-items__row input,
.wc-block-cart-items__row select,
.wc-block-components-quantity-selector input {
  padding: 8px 12px !important;
  min-height: 36px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-form input:focus,
.wc-block-components-form select:focus,
.wc-block-components-form textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18) !important;
}

/* Static label ABOVE the input — no float animation. Reliable, no overlap.
 * WC's DOM has <input> then <label>; flex-column-reverse rearranges visually. */
.wc-block-components-text-input {
  position: relative;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column-reverse !important;
}
.wc-block-components-text-input label {
  position: static !important;
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.005em;
  line-height: 1.3;
  pointer-events: auto;
  z-index: auto;
}
/* Override any state-specific WC rules that would re-floatify the label */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input.has-value label,
.wc-block-components-text-input:focus-within label {
  position: static !important;
  top: auto !important;
  transform: none !important;
  font-size: 0.85rem !important;
  background: transparent !important;
}

/* Same external-label treatment for the combobox / country-state pickers
 * (e.g. Country/Region, Province). Without this, WC keeps the label
 * floating *inside* the field — with `appearance: none` stripping the
 * native chrome, the label overlaps the selected value text. The DOM is
 * <label><input/><select/>: column-reverse on the wrapper inverts so the
 * label renders above the input. */
.wc-block-components-combobox,
.wc-block-components-country-input,
.wc-block-components-state-input {
  position: relative;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column-reverse !important;
}
.wc-block-components-combobox > label,
.wc-block-components-country-input > label,
.wc-block-components-state-input > label,
.wc-block-components-combobox.is-active > label,
.wc-block-components-combobox.has-value > label,
.wc-block-components-combobox:focus-within > label,
.wc-block-components-country-input.is-active > label,
.wc-block-components-country-input.has-value > label,
.wc-block-components-country-input:focus-within > label,
.wc-block-components-state-input.is-active > label,
.wc-block-components-state-input.has-value > label,
.wc-block-components-state-input:focus-within > label {
  position: static !important;
  top: auto !important;
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.005em;
  line-height: 1.3;
  pointer-events: auto;
  z-index: auto;
}

/* Combobox uses an inner wrapper that sets its own padding-top to make
 * room for the floating label — kill that so the field height matches
 * a plain text input. */
.wc-block-components-combobox .wc-block-components-combobox-control,
.wc-block-components-combobox-control {
  padding-top: 0 !important;
}
.wc-block-components-checkout-step__heading-content,
.wc-block-components-form label {
  color: var(--text-secondary) !important;
}

/* Block headings */
.wc-block-components-title,
.wc-block-checkout__step-title,
.wc-block-checkout__main h2,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2 {
  color: var(--text-primary) !important;
  letter-spacing: -0.025em;
}
.wc-block-components-title { font-size: 1.1rem; font-weight: 500; }

/* Order summary / cart sidebar — ONLY the outer wrapper gets a card bg.
 * Inner totals blocks are transparent so we don't get nested cards. */
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-3) !important;
  isolation: isolate;
  box-shadow: var(--shadow-md);
  border: 0 !important;
  align-self: flex-start;
}

/* Inner sidebar wrappers should NOT get their own card bg */
.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-totals-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Spacing between sidebar sections — use hairline dividers, not stacked cards */
.wp-block-woocommerce-checkout-totals-block > *,
.wp-block-woocommerce-cart-totals-block > * {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.wp-block-woocommerce-checkout-totals-block > *:first-child,
.wp-block-woocommerce-cart-totals-block > *:first-child { padding-top: 0; }
.wp-block-woocommerce-checkout-totals-block > *:last-child,
.wp-block-woocommerce-cart-totals-block > *:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Hide empty WC blocks (placeholder rows for shipping/tax/etc that have no content) */
.wp-block-woocommerce-checkout-totals-block > *:empty,
.wp-block-woocommerce-cart-totals-block > *:empty,
.wc-block-components-totals-wrapper:empty,
.wp-block-woocommerce-cart-order-summary-shipping-block:empty,
.wp-block-woocommerce-cart-order-summary-fee-block:empty,
.wp-block-woocommerce-cart-order-summary-taxes-block:empty,
.wp-block-woocommerce-cart-order-summary-discount-block:empty,
.wp-block-woocommerce-checkout-order-summary-shipping-block:empty,
.wp-block-woocommerce-checkout-order-summary-fee-block:empty,
.wp-block-woocommerce-checkout-order-summary-taxes-block:empty,
.wp-block-woocommerce-checkout-order-summary-discount-block:empty {
  display: none !important;
}

.wc-block-components-order-summary-item {
  border-bottom: 1px solid var(--border) !important;
  padding: var(--space-1) 0 !important;
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: var(--space-1) !important;
}
.wc-block-components-order-summary-item__image {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--radius-md) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(94, 106, 210, 0.20), transparent 60%),
    linear-gradient(135deg, var(--panel-elevated), var(--panel)) !important;
  overflow: hidden;
  position: relative;
}
.wc-block-components-order-summary-item__image img {
  width: 100% !important;
  height: 100% !important;
  /* Contain — never crop. Tier-badge artwork has important text near the
   * edges (e.g. "SILVER TIER"), so cover would clip it. The gradient panel
   * bg behind shows through any letterboxing. */
  object-fit: contain;
  display: block;
  background: transparent !important;
}
/* Hide the WC default white SVG placeholder — let the gradient bg show instead */
.wc-block-components-order-summary-item__image img.woocommerce-placeholder,
.wc-block-components-order-summary-item__image img[src*="woocommerce-placeholder"] {
  visibility: hidden;
}
.wc-block-components-order-summary-item__quantity {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--bg-base) !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
}
.wc-block-components-order-summary-item__title {
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  line-height: 1.4;
}
.wc-block-components-order-summary-item__description {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 400;
  line-height: 1.5;
}
.wc-block-components-order-summary-item__total-price,
.wc-block-components-product-price {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.wc-block-components-product-price__regular,
.wc-block-components-product-price ins { color: var(--text-primary); }
.wc-block-components-product-price del { color: var(--text-disabled); }
.wc-block-components-sale-badge {
  background: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.7rem !important;
  padding: 2px 8px !important;
  box-shadow: inset 0 0 0 1px var(--border-accent);
}
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description small,
.wc-block-components-product-details {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

/* Totals rows */
.wc-block-components-totals-item {
  padding: 8px 0 !important;
  color: var(--text-secondary);
}
.wc-block-components-totals-item__label { color: var(--text-secondary); }
.wc-block-components-totals-item__value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item__total {
  color: var(--text-primary) !important;
  font-size: 1.2rem !important;
  font-weight: 600;
}

/* WC Block notices — clean ring border, no colored left bar */
.wc-block-components-notice-banner,
.wc-block-components-validation-error,
div[role="alert"] {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--border-strong) !important;
  padding: 14px var(--space-2) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wc-block-components-notice-banner.is-info {
  box-shadow: inset 0 0 0 1px var(--border-accent) !important;
}
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.30) !important;
  color: #FCA5A5 !important;
}
.wc-block-components-notice-banner.is-success {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.30) !important;
  color: #6EE7B7 !important;
}
.wc-block-components-notice-banner__content { color: inherit !important; flex: 1; }
.wc-block-components-notice-banner > svg {
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
  fill: var(--accent-bright) !important;
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
}
.wc-block-components-notice-banner.is-error > svg { fill: #FCA5A5 !important; }
.wc-block-components-notice-banner.is-success > svg { fill: #6EE7B7 !important; }
.wc-block-components-notice-banner.is-warning > svg { fill: var(--warning) !important; }

/* Dismiss X button inside the banner — without these explicit overrides it
 * inherits the generic .button accent-bg styles above and renders as a big
 * blank indigo square at the right edge. */
.wc-block-components-notice-banner > .wc-block-components-button,
.wc-block-components-notice-banner > button {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 0 auto !important;
  flex: 0 0 20px;
  color: currentColor !important;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease);
}
.wc-block-components-notice-banner > .wc-block-components-button:hover,
.wc-block-components-notice-banner > button:hover {
  opacity: 1;
  background: transparent !important;
  box-shadow: none !important;
}
.wc-block-components-notice-banner > .wc-block-components-button > svg,
.wc-block-components-notice-banner > button > svg {
  fill: currentColor !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Inline "View cart" / wc-forward link inside the message — render as a
 * plain underlined link, not a chunky button. */
.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner__content a {
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
  padding: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  font: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  box-shadow: none !important;
  border: 0 !important;
  display: inline !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}
.wc-block-components-notice-banner .wc-forward:hover,
.wc-block-components-notice-banner__content a:hover {
  background: transparent !important;
  text-decoration: none !important;
}

/* Payment method radios */
.wc-block-components-radio-control {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-radius: var(--radius-md) !important;
  padding: var(--space-1) var(--space-2) !important;
  margin-bottom: 6px !important;
}
.wc-block-components-radio-control__option { color: var(--text-secondary); }

/* "Add coupons" toggle — make it look like a proper button, not bare text
 * sandwiched between two section dividers */
.wc-block-components-totals-coupon,
.wc-block-components-panel {
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
  padding: 0 !important;
  transition: background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.wc-block-components-totals-coupon:hover,
.wc-block-components-panel:hover {
  background: var(--surface-strong) !important;
  box-shadow: inset 0 0 0 1px var(--border-strong) !important;
}
/* Match the specificity of WC's compound selector that pins padding-left:0
 * on :hover/:focus/:active — without these states explicitly listed our
 * padding loses on hover and the label shifts left. */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon__button:focus,
.wc-block-components-totals-coupon__button:active,
.wc-block-components-panel__button,
.wc-block-components-panel__button:hover,
.wc-block-components-panel__button:focus,
.wc-block-components-panel__button:active {
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  width: 100%;
  border: 0;
  background: transparent !important;
  text-align: center;
  letter-spacing: -0.005em;
}
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
  color: var(--text-secondary) !important;
}
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-panel__button:hover {
  color: var(--text-primary) !important;
}
.wc-block-components-panel__button-icon {
  /* WC defaults to position:absolute pinned to the right; override so the
   * icon participates in the flex layout next to the label. */
  position: static !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  fill: var(--text-muted);
  transition: transform var(--duration-base) var(--ease), fill var(--duration-fast) var(--ease);
  width: 18px !important;
  height: 18px !important;
  flex: none;
}
.wc-block-components-panel__button[aria-expanded="true"] .wc-block-components-panel__button-icon {
  /* When expanded, rotate the chevron up — overrides the static-position transform reset */
  transform: rotate(180deg) !important;
}
.wc-block-components-panel__button[aria-expanded="true"] .wc-block-components-panel__button-icon {
  transform: rotate(180deg);
  fill: var(--accent-bright);
}
.wc-block-components-panel__button[aria-expanded="true"] {
  color: var(--text-primary) !important;
}
/* Expanded panel content — pad it inside the same surface */
.wc-block-components-panel > div:not([role="button"]):not(.wc-block-components-panel__button) {
  padding: 0 14px 14px !important;
}
/* Don't double-divider the coupon panel — remove section border when this is the wrapping block */
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  border-bottom: 0 !important;
  padding-bottom: var(--space-1) !important;
  padding-top: var(--space-1) !important;
}

/* Checkout / cart action buttons */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button.contained,
button.wc-block-components-button {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md) !important;
  border: 0 !important;
  font-weight: 500 !important;
  padding: 14px 24px !important;
  min-height: 52px !important;
  font-size: 1rem !important;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-glow) !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover { background: var(--accent-hover) !important; }
.wc-block-components-button__text { color: inherit !important; }

/* "Return to cart" link */
.wc-block-components-checkout-return-to-cart-button,
.wc-block-components-button.outlined,
.wc-block-cart__submit-container .wc-block-components-button.outlined {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 500;
}
.wc-block-components-checkout-return-to-cart-button:hover { color: var(--text-primary) !important; }

/* Quantity stepper */
.wc-block-components-quantity-selector,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
  border: 0 !important;
}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector input {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  font-variant-numeric: tabular-nums;
}
.wc-block-components-quantity-selector__button {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 0 !important;
}
.wc-block-components-quantity-selector__button:hover { color: var(--text-primary) !important; }

/* Cart line items — generous spacing, image+meta+actions clearly separated */
.wc-block-cart-items {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-radius: var(--radius-2xl);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-md);
  border: 0;
}
.wc-block-cart-items__header {
  padding: var(--space-1) 0 var(--space-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
/* Cart items table — native table layout with fixed image+total columns */
table.wc-block-cart-items {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.wc-block-cart-items__row {
  background: transparent !important;
}
.wc-block-cart-items__row > td {
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
  vertical-align: top;
}
.wc-block-cart-items__row:last-child > td { border-bottom: 0; }

.wc-block-cart-items__row > td.wc-block-cart-item__image { width: 96px; padding-right: var(--space-2); }
.wc-block-cart-items__row > td.wc-block-cart-item__product { width: auto; padding-right: var(--space-2); }
.wc-block-cart-items__row > td.wc-block-cart-item__total { width: 1%; white-space: nowrap; text-align: right; }

.wc-block-cart-item__image {
  width: 96px;
  height: 96px;
}
.wc-block-cart-item__image img,
.wc-block-cart-item__image a img {
  width: 96px !important;
  height: 96px !important;
  /* Contain — never crop. Tier-badge artwork has edge text ("SILVER TIER")
   * that gets clipped by cover. */
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--panel-elevated);
  display: block;
}

.wc-block-cart-item__product {
  /* Native table-cell layout — content flows top-to-bottom naturally */
  display: table-cell;
  vertical-align: top;
  min-width: 0;
}
.wc-block-cart-item__product > * + * { margin-top: 6px; }
.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none !important;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.wc-block-cart-item__product-name a:hover { color: var(--accent-bright) !important; }
.wc-block-components-product-metadata__description {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  line-height: 1.5;
}
.wc-block-cart-item__prices {
  margin-top: 4px;
  font-size: 0.92rem;
}
.wc-block-cart-item__quantity {
  margin-top: 8px;
}
.wc-block-cart-item__remove-link {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-size: 0.82rem;
  margin-top: 4px;
  display: inline-block;
}
.wc-block-cart-item__remove-link:hover { color: #FCA5A5 !important; }

.wc-block-cart-item__total {
  text-align: right;
  display: table-cell;
  vertical-align: top;
}
.wc-block-cart-item__total > * + * { margin-top: 6px; }
.wc-block-cart-item__total .wc-block-components-product-price {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Cart sidebar (totals) on cart page */
.wc-block-cart__sidebar,
.wp-block-woocommerce-cart-totals-block {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-3) !important;
  isolation: isolate;
  box-shadow: var(--shadow-md);
}

/* Checkout sections — clear vertical rhythm between Contact / Address / Payment */
.wp-block-woocommerce-checkout-fields-block > * {
  margin-bottom: var(--space-4);
}
.wp-block-woocommerce-checkout-fields-block > *:last-child { margin-bottom: 0; }

.wp-block-woocommerce-checkout-fields-block h2,
.wp-block-woocommerce-checkout-contact-information-block h2,
.wp-block-woocommerce-checkout-billing-address-block h2,
.wp-block-woocommerce-checkout-shipping-address-block h2,
.wp-block-woocommerce-checkout-payment-block h2 {
  color: var(--text-primary) !important;
  font-size: 1.1rem;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}

/* Place order block (footer of fields) — separate it visually */
.wp-block-woocommerce-checkout-actions-block {
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.wp-block-woocommerce-checkout-terms-block {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}

/* Card / address summary "Edit" button + body */
.wc-block-components-address-card__edit {
  color: var(--accent-bright) !important;
  text-decoration: none !important;
}
.wc-block-components-address-card {
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
  border: 0 !important;
}
.wc-block-components-address-card__address,
.wc-block-components-address-card address,
.wc-block-components-address-card__address span,
.wc-block-components-address-card address span {
  color: var(--text-secondary) !important;
  font-style: normal;
  line-height: 1.55;
  font-size: 0.92rem;
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
}
.wc-block-components-address-card h2,
.wc-block-components-address-card__address-section > strong,
.wc-block-components-address-card__address-section > span:first-child {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* "Add coupons" panel */
.wc-block-components-totals-coupon {
  border-top: 1px solid var(--border) !important;
  padding-top: var(--space-1);
}

/* Tab labels (e.g. "Shipping / pickup") */
.wc-block-components-checkout-step,
.wc-block-checkout__contact-fields,
.wc-block-checkout__billing-fields {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Checkbox + radio appearance — make boxes visible against dark bg */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input,
input[type="checkbox"].wc-block-components-checkbox__input {
  appearance: auto;
  background: var(--panel) !important;
  border: 1px solid var(--border-strong) !important;
}
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
  color: var(--text-secondary) !important;
}

/* "Save" toggle / "Use shipping as billing" — keep them readable */
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-description {
  color: var(--text-muted) !important;
}

/* ─── WC Block-based Cart/Checkout overrides ─────────────────── */
/* Empty cart icon and copy */
.wp-block-woocommerce-empty-cart-block,
.wp-block-woocommerce-cart-empty-cart-block {
  text-align: center;
  padding: var(--space-5) 0;
}
.wp-block-woocommerce-empty-cart-block svg,
.wp-block-woocommerce-cart-empty-cart-block svg {
  fill: var(--text-muted) !important;
  opacity: 0.5;
}

/* Cart Block heading (e.g. "New in store") */
.wp-block-woocommerce-empty-cart-block h2,
.wp-block-woocommerce-cart-empty-cart-block h2 {
  color: var(--text-primary);
  letter-spacing: -0.025em;
  margin: var(--space-4) 0 var(--space-3);
}

/* Cross-sell / "New in store" product cards from the WC Cart block */
.wp-block-woocommerce-empty-cart-block ul.wp-block-post-template,
.wp-block-woocommerce-empty-cart-block ul.products,
.wp-block-woocommerce-cart-empty-cart-block ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1024px) { .wp-block-woocommerce-empty-cart-block ul.wp-block-post-template { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .wp-block-woocommerce-empty-cart-block ul.wp-block-post-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .wp-block-woocommerce-empty-cart-block ul.wp-block-post-template { grid-template-columns: 1fr; } }

.wp-block-woocommerce-empty-cart-block .wp-block-post,
.wp-block-woocommerce-empty-cart-block li.product {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
  isolation: isolate;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.wp-block-woocommerce-empty-cart-block .wp-block-post:hover,
.wp-block-woocommerce-empty-cart-block li.product:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.wp-block-woocommerce-empty-cart-block .wp-block-post-featured-image,
.wp-block-woocommerce-empty-cart-block .wc-block-components-product-image {
  background: var(--panel-elevated) !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0 !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-post-featured-image img,
.wp-block-woocommerce-empty-cart-block .wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--panel-elevated) !important;
  filter: none;
}
/* Hide WP's default placeholder image entirely (it's a black-on-white SVG) */
.wp-block-woocommerce-empty-cart-block .attachment-woocommerce_thumbnail.size-woocommerce_thumbnail.wp-post-image[src*="woocommerce-placeholder"] {
  visibility: hidden;
}

.wp-block-woocommerce-empty-cart-block .wp-block-post-title,
.wp-block-woocommerce-empty-cart-block .wp-block-post-title a,
.wp-block-woocommerce-empty-cart-block .woocommerce-loop-product__title {
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  padding: 0 var(--space-2);
  margin: var(--space-1) 0 0;
}
.wp-block-woocommerce-empty-cart-block .wp-block-post-title a:hover { color: var(--accent-bright) !important; }

.wp-block-woocommerce-empty-cart-block .wc-block-components-product-price,
.wp-block-woocommerce-empty-cart-block .price {
  color: var(--text-secondary) !important;
  padding: 0 var(--space-2);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button,
.wp-block-woocommerce-empty-cart-block .wc-block-components-product-button {
  padding: 0 var(--space-2) var(--space-2);
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wc-block-components-product-button__button,
.wp-block-woocommerce-empty-cart-block a.button {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 14px !important;
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none !important;
  width: 100%;
  text-align: center;
  display: inline-block;
  box-shadow: var(--shadow-glow);
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover { background: var(--accent-hover) !important; }