/* ============================================================
   MOTIONCRAFT — WooCommerce
   ------------------------------------------------------------
   Brands every commerce surface (cart, checkout, my-account and
   every endpoint, order-received, order-pay, lost-password) plus
   the "Order Now" duration selector.

   Rules use ONLY design tokens from assets/css/style.css, so the
   whole layer flips correctly between the default light theme
   (:root) and [data-theme="dark"]. No hardcoded greys.

   Contents
     1.  Page chrome (hero + section)
     2.  Typography + links inside Woo content
     3.  Notices
     4.  Buttons
     5.  Form controls, radios, checkboxes, select2
     6.  Tables
     7.  Cart
     8.  Checkout
     9.  Order received / order pay
     10. My account (all tabs)
     11. Shop / single product
     12. Pagination
     13. Duration selector modal
     14. Responsive (360 -> 1920)
   ============================================================ */

/* ============================================================
   1. PAGE CHROME
   ============================================================ */

.woo-hero.hero--compact {
  min-height: auto;
  padding-top: 9rem;
  padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

/* The hero sub-copy is opacity:0 until the JS entrance timeline runs.
   Woo pages must never depend on that, so animate it from CSS instead. */
.woo-hero .hero__sub {
  opacity: 1;
  transform: none;
  animation: mc-woo-rise 0.9s var(--ease-cinematic) both;
}

.woo-hero .hero__scrub {
  margin-top: var(--space-md);
}

@keyframes mc-woo-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woo-hero .hero__sub {
    animation: none;
  }
}

.woo-section {
  padding-bottom: var(--space-section);
}

.woo-content {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.woo-content::after {
  content: "";
  display: block;
  clear: both;
}

/* ============================================================
   2. TYPOGRAPHY + LINKS INSIDE WOO CONTENT
   ============================================================ */

.woo-content h2,
.woo-content h3,
.woo-content h4 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.woo-content h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0 0 1rem;
}

.woo-content h3 {
  font-size: var(--fs-h3);
  margin: 0 0 0.75rem;
}

.woo-content p {
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

.woo-content p:last-child {
  margin-bottom: 0;
}

.woo-content a:not(.btn):not(.button) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.woo-content a:not(.btn):not(.button):hover {
  color: var(--color-primary-dark);
}

[data-theme="dark"] .woo-content a:not(.btn):not(.button) {
  color: #8FACCC;
}

[data-theme="dark"] .woo-content a:not(.btn):not(.button):hover {
  color: var(--color-accent);
}

.woo-content abbr[title],
.woo-content .required {
  color: var(--color-accent);
  border: 0;
  text-decoration: none;
}

[data-theme="dark"] .woo-content abbr[title],
[data-theme="dark"] .woo-content .required {
  color: var(--color-accent-alt);
}

.woo-content .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Shared panel surface every Woo block sits on. */
.woo-content .cart_totals,
.woo-content #order_review,
.woo-content .woocommerce-order-details,
.woo-content .woocommerce-customer-details,
.woo-content .woocommerce-MyAccount-content,
.woo-content .woocommerce-form-login,
.woo-content .woocommerce-form-register,
.woo-content .woocommerce-ResetPassword,
.woo-content .woocommerce-EditAccountForm,
.woo-content #customer_details,
.woo-content .woocommerce-thankyou-order-received {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 18px 48px -32px var(--shadow-color);
}

/* ============================================================
   3. NOTICES
   ============================================================ */

.woo-content .woocommerce-notices-wrapper:empty {
  display: none;
}

.woo-content .woocommerce-message,
.woo-content .woocommerce-error,
.woo-content .woocommerce-info {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 1rem 1.15rem 1rem 3.15rem;
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.woo-content .woocommerce-message li,
.woo-content .woocommerce-error li,
.woo-content .woocommerce-info li {
  list-style: none;
  width: 100%;
  margin: 0;
}

.woo-content .woocommerce-message::before,
.woo-content .woocommerce-error::before,
.woo-content .woocommerce-info::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.05rem;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

.woo-content .woocommerce-message {
  border-color: rgba(44, 73, 115, 0.45);
  background:
    linear-gradient(0deg, rgba(44, 73, 115, 0.08), rgba(44, 73, 115, 0.08)),
    var(--bg-card);
}

.woo-content .woocommerce-message::before {
  color: #2C4973;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.3 11 14.8 15.7 9.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.3 11 14.8 15.7 9.6'/%3E%3C/svg%3E");
}

[data-theme="dark"] .woo-content .woocommerce-message::before {
  color: var(--color-accent);
}

.woo-content .woocommerce-error {
  border-color: rgba(75, 116, 162, 0.45);
  background:
    linear-gradient(0deg, rgba(75, 116, 162, 0.08), rgba(75, 116, 162, 0.08)),
    var(--bg-card);
}

.woo-content .woocommerce-error::before {
  color: #4B74A2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v6M12 16.5v.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v6M12 16.5v.2'/%3E%3C/svg%3E");
}

[data-theme="dark"] .woo-content .woocommerce-error::before {
  color: var(--color-accent-alt);
}

.woo-content .woocommerce-info {
  border-color: rgba(143, 172, 204, 0.4);
  background:
    linear-gradient(0deg, rgba(143, 172, 204, 0.07), rgba(143, 172, 204, 0.07)),
    var(--bg-card);
}

.woo-content .woocommerce-info::before {
  color: var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.6M12 7.4v.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.6M12 7.4v.2'/%3E%3C/svg%3E");
}

[data-theme="dark"] .woo-content .woocommerce-info::before {
  color: #8FACCC;
}

.woo-content .woocommerce-message .button,
.woo-content .woocommerce-info .button,
.woo-content .woocommerce-error .button {
  margin-left: auto;
  flex: none;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */

.woo-content .button,
.woo-content button.button,
.woo-content input.button,
.woo-content a.button,
.woo-content .woocommerce-Button,
.woo-content button[type="submit"],
.woo-content input[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.9rem 1.65rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.woo-content .button:hover,
.woo-content button.button:hover,
.woo-content input.button:hover,
.woo-content a.button:hover,
.woo-content .woocommerce-Button:hover,
.woo-content button[type="submit"]:hover,
.woo-content input[type="submit"]:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  box-shadow: 0 12px 28px -10px var(--shadow-color);
  transform: translateY(-2px);
}

.woo-content .button:focus-visible,
.woo-content button:focus-visible,
.woo-content input[type="submit"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.woo-content .button:disabled,
.woo-content .button[disabled],
.woo-content button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Quiet variants (back links, row actions). */
.woo-content a.button.wc-backward,
.woo-content .button.wc-forward:not(.checkout-button),
.woo-content .woocommerce-orders-table .button,
.woo-content .woocommerce-MyAccount-content .button.view,
.woo-content .return-to-shop .button,
.woo-content .cart .actions > .button:not(.checkout-button) {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.woo-content a.button.wc-backward:hover,
.woo-content .button.wc-forward:not(.checkout-button):hover,
.woo-content .woocommerce-orders-table .button:hover,
.woo-content .woocommerce-MyAccount-content .button.view:hover,
.woo-content .return-to-shop .button:hover,
.woo-content .cart .actions > .button:not(.checkout-button):hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.woo-content .checkout-button,
.woo-content #place_order {
  width: 100%;
  font-size: 1rem;
  padding: 1.05rem 1.75rem;
}

/* ============================================================
   5. FORM CONTROLS
   ============================================================ */

.woo-content .form-row,
.woo-content .woocommerce-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  padding: 0;
}

.woo-content .form-row label,
.woo-content .woocommerce-form-row label,
.woo-content .woocommerce-form__label,
.woo-content .quantity label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.woo-content .input-text,
.woo-content input[type="text"],
.woo-content input[type="email"],
.woo-content input[type="tel"],
.woo-content input[type="url"],
.woo-content input[type="number"],
.woo-content input[type="password"],
.woo-content input[type="search"],
.woo-content select,
.woo-content textarea {
  width: 100%;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.woo-content textarea {
  min-height: 120px;
  resize: vertical;
}

.woo-content select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355536B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
}

[data-theme="dark"] .woo-content select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5A2C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.woo-content .input-text::placeholder,
.woo-content textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.65;
}

.woo-content .input-text:focus,
.woo-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.woo-content select:focus,
.woo-content textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(108, 79, 255, 0.14);
}

.woo-content .woocommerce-invalid .input-text,
.woo-content .woocommerce-invalid select,
.woo-content .woocommerce-invalid .select2-container .select2-selection {
  border-color: var(--color-accent-alt);
}

.woo-content .woocommerce-invalid .input-text:focus {
  box-shadow: 0 0 0 4px rgba(255, 79, 163, 0.16);
}

.woo-content .woocommerce-validated .input-text,
.woo-content .woocommerce-validated select {
  border-color: rgba(0, 217, 192, 0.6);
}

.woo-content .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

.woo-content .description,
.woo-content .woocommerce-password-hint,
.woo-content .form-row .optional,
.woo-content small {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* ---------- radios + checkboxes ---------- */

.woo-content input[type="checkbox"],
.woo-content input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.woo-content input[type="checkbox"] {
  border-radius: 6px;
}

.woo-content input[type="radio"] {
  border-radius: 50%;
}

.woo-content input[type="checkbox"]:hover,
.woo-content input[type="radio"]:hover {
  border-color: var(--color-primary);
}

.woo-content input[type="checkbox"]:checked,
.woo-content input[type="radio"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.woo-content input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
}

.woo-content input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

.woo-content input[type="checkbox"]:focus-visible,
.woo-content input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.woo-content .woocommerce-form__label-for-checkbox,
.woo-content label.checkbox,
.woo-content .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}

.woo-content .woocommerce-form__label-for-checkbox span {
  flex: 1;
}

/* ---------- select2 ---------- */

.woo-content .select2-container {
  width: 100% !important;
}

.woo-content .select2-container--default .select2-selection--single {
  min-height: 48px;
  height: 48px;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
}

.woo-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 45px;
  padding-left: 1rem;
  color: var(--text-primary);
}

.woo-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-secondary);
}

.woo-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 45px;
  right: 0.6rem;
}

.woo-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-secondary) transparent transparent;
}

.woo-content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-secondary);
}

.woo-content .select2-container--default.select2-container--focus .select2-selection--single,
.woo-content .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(108, 79, 255, 0.14);
}

/* The dropdown is portalled to <body>, so it cannot be scoped to .woo-content. */
.select2-dropdown {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
  z-index: 300;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  min-height: 44px;
  font-family: var(--font-body);
}

.select2-container--default .select2-results__option {
  color: var(--text-secondary);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--color-primary);
  color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ============================================================
   6. TABLES
   ============================================================ */

.woo-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.woo-content table.shop_table,
.woo-content table.woocommerce-orders-table,
.woo-content table.woocommerce-table--order-details,
.woo-content table.woocommerce-table--downloads,
.woo-content table.woocommerce-MyAccount-downloads {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bg-card);
  margin: 0 0 var(--space-md);
  table-layout: auto;
  word-break: break-word;
}

.woo-content table.shop_table th,
.woo-content table.woocommerce-orders-table th,
.woo-content table.woocommerce-table--downloads th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  padding: 0.9rem 1.1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.woo-content table.shop_table td,
.woo-content table.woocommerce-orders-table td,
.woo-content table.woocommerce-table--downloads td {
  padding: 1.1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.woo-content table.shop_table tbody tr:last-child td,
.woo-content table.woocommerce-orders-table tbody tr:last-child td {
  border-bottom: 0;
}

.woo-content table.shop_table tfoot th,
.woo-content table.shop_table tfoot td {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  padding: 0.9rem 1.1rem;
  color: var(--text-primary);
  text-transform: none;
  font-family: var(--font-body);
  letter-spacing: 0;
  font-size: 0.95rem;
}

.woo-content table.shop_table tfoot tr:last-child th,
.woo-content table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.woo-content table .product-name,
.woo-content table .woocommerce-orders-table__cell-order-number a {
  color: var(--text-primary);
  font-weight: 600;
}

.woo-content table .product-name a {
  color: var(--text-primary);
  text-decoration: none;
}

.woo-content table .product-name a:hover {
  color: var(--color-primary);
}

.woo-content .woocommerce-Price-amount,
.woo-content .amount {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Chosen runtime shown as item meta. */
.woo-content .variation,
.woo-content .wc-item-meta {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
}

.woo-content .variation dt,
.woo-content .wc-item-meta strong,
.woo-content .wc-item-meta .wc-item-meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
}

.woo-content .variation dd,
.woo-content .wc-item-meta li {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  list-style: none;
  display: flex;
  gap: 0.4rem;
}

.woo-content .variation dd p,
.woo-content .wc-item-meta p {
  margin: 0;
}

.woo-content .product-thumbnail img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ============================================================
   7. CART
   ============================================================ */

.woo-content .woocommerce-cart-form {
  margin-bottom: var(--space-lg);
}

.woo-content .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.woo-content .product-remove a.remove:hover {
  background: var(--color-accent-alt);
  border-color: var(--color-accent-alt);
  color: #fff;
  transform: rotate(90deg);
}

/* ---------- quantity stepper ---------- */

.woo-content .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-primary);
  overflow: hidden;
}

.woo-content .quantity input.qty {
  width: 68px;
  min-height: 44px;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.55rem 0.35rem;
  font-weight: 600;
  color: var(--text-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}

.woo-content .quantity input.qty::-webkit-outer-spin-button,
.woo-content .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woo-content .quantity input.qty:focus {
  box-shadow: none;
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* ---------- coupon ---------- */

.woo-content .cart .actions {
  padding: 1.15rem;
  background: var(--bg-secondary);
}

.woo-content .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 0.75rem;
}

.woo-content .coupon label {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.woo-content .coupon #coupon_code {
  flex: 1 1 200px;
  min-width: 0;
  border-radius: var(--radius-pill);
  padding-inline: 1.15rem;
}

.woo-content .coupon .button {
  flex: none;
}

.woo-content .checkout_coupon {
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  margin: 0 0 var(--space-md);
  background: var(--bg-secondary);
}

.woo-content .checkout_coupon .form-row {
  margin-bottom: 0.75rem;
}

/* ---------- totals ---------- */

.woo-content .cart-collaterals {
  display: grid;
  gap: var(--space-md);
}

.woo-content .cart_totals h2 {
  font-size: var(--fs-h3);
}

.woo-content .cart_totals table.shop_table {
  border: 0;
  background: transparent;
  margin: 0;
  overflow: visible;
}

.woo-content .cart_totals table.shop_table th,
.woo-content .cart_totals table.shop_table td {
  background: transparent;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-color);
  text-transform: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
}

.woo-content .cart_totals table.shop_table tr.order-total th,
.woo-content .cart_totals table.shop_table tr.order-total td {
  border-bottom: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  padding-top: 1.1rem;
}

.woo-content .wc-proceed-to-checkout {
  margin-top: 1.25rem;
}

.woo-content .cart-empty {
  text-align: center;
}

.woo-content .return-to-shop {
  margin-top: 1rem;
}

/* ============================================================
   8. CHECKOUT
   ============================================================ */

.woo-content .checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.woo-content #customer_details {
  min-width: 0;
}

.woo-content .col2-set,
.woo-content #customer_details .col2-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-md);
  width: 100%;
}

.woo-content .col2-set .col-1,
.woo-content .col2-set .col-2 {
  width: 100%;
  float: none;
  min-width: 0;
}

.woo-content #order_review_heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--text-primary);
  margin: 0 0 1rem;
}

.woo-content .woocommerce-checkout-review-order-table {
  border: 0;
  background: transparent;
  margin-bottom: 1.25rem;
  overflow: visible;
}

.woo-content .woocommerce-checkout-review-order-table th,
.woo-content .woocommerce-checkout-review-order-table td {
  background: transparent;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-color);
}

.woo-content .woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woo-content .woocommerce-checkout-review-order-table tfoot tr:last-child td {
  border-bottom: 0;
  padding-top: 1.1rem;
}

.woo-content .woocommerce-checkout-review-order-table .product-name {
  padding-right: 1rem;
}

/* ---------- payment ---------- */

.woo-content #payment,
.woo-content .woocommerce-checkout-payment {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
}

.woo-content #payment ul.payment_methods,
.woo-content .wc_payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.6rem;
}

.woo-content .wc_payment_method {
  list-style: none;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 0.85rem 1rem;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.woo-content .wc_payment_method:focus-within {
  border-color: var(--color-primary);
}

.woo-content .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

.woo-content .wc_payment_method > label img {
  max-height: 26px;
  width: auto;
  margin-left: auto;
}

.woo-content .payment_box {
  margin: 0.85rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.woo-content .payment_box::before {
  display: none;
}

.woo-content .payment_box p:last-child {
  margin-bottom: 0;
}

.woo-content .woocommerce-terms-and-conditions-wrapper {
  margin: 0.5rem 0 1rem;
}

.woo-content .woocommerce-terms-and-conditions {
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem;
  background: var(--bg-primary);
  margin-bottom: 0.85rem;
}

.woo-content .woocommerce-privacy-policy-text p {
  font-size: var(--fs-small);
}

.woo-content .woocommerce-form-login-toggle,
.woo-content .woocommerce-form-coupon-toggle {
  margin-bottom: var(--space-md);
}

.woo-content .woocommerce-form-login {
  margin-bottom: var(--space-md);
}

.woo-content .woocommerce-form-login .lost_password {
  margin-top: 0.5rem;
}

.woo-content .blockUI.blockOverlay {
  background: var(--bg-primary) !important;
  opacity: 0.6 !important;
}

/* ============================================================
   9. ORDER RECEIVED / ORDER PAY
   ============================================================ */

.woo-content .woocommerce-thankyou-order-received {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
  border-color: rgba(0, 217, 192, 0.45);
}

.woo-content ul.woocommerce-order-overview,
.woo-content ul.order_details {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
}

.woo-content ul.woocommerce-order-overview li,
.woo-content ul.order_details li {
  list-style: none;
  float: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-card);
}

.woo-content ul.woocommerce-order-overview li strong,
.woo-content ul.order_details li strong {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-primary);
}

.woo-content .woocommerce-order-details,
.woo-content .woocommerce-customer-details {
  margin-bottom: var(--space-md);
}

.woo-content .woocommerce-order-details__title,
.woo-content .woocommerce-column__title,
.woo-content .woocommerce-customer-details h2 {
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
}

.woo-content .woocommerce-order-details .shop_table,
.woo-content .woocommerce-order-details table {
  border: 0;
  background: transparent;
  overflow: visible;
}

.woo-content .woocommerce-order-details .shop_table th {
  background: transparent;
}

.woo-content .woocommerce-customer-details address {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.woo-content .woocommerce-order-downloads {
  margin-top: var(--space-md);
}

.woo-content .woocommerce-order-pay #order_review {
  position: static;
}

/* ============================================================
   10. MY ACCOUNT
   ============================================================ */

.woo-content .woocommerce-MyAccount-navigation {
  margin: 0 0 var(--space-md);
}

.woo-content .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.woo-content .woocommerce-MyAccount-navigation li {
  list-style: none;
  margin: 0;
}

.woo-content .woocommerce-MyAccount-navigation li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.woo-content .woocommerce-MyAccount-navigation li a:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
  transform: translateY(-1px);
}

.woo-content .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}

.woo-content .woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

.woo-content mark {
  background: rgba(108, 79, 255, 0.16);
  color: var(--text-primary);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.woo-content .woocommerce-orders-table__cell-order-actions .button {
  margin: 0.2rem 0.25rem 0.2rem 0;
  padding: 0.55rem 1rem;
  min-height: 44px;
  font-size: 0.8rem;
}

.woo-content .woocommerce-orders-table__cell-order-status {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.woo-content .woocommerce-Addresses,
.woo-content .u-columns.addresses,
.woo-content .u-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: 1rem;
}

.woo-content .woocommerce-Address,
.woo-content .u-column1,
.woo-content .u-column2 {
  width: 100%;
  float: none;
  min-width: 0;
}

.woo-content .woocommerce-Address address {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 1rem 1.15rem;
  font-style: normal;
  line-height: 1.75;
  color: var(--text-secondary);
}

.woo-content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.woo-content .woocommerce-Address-title h2,
.woo-content .woocommerce-Address-title h3 {
  margin: 0;
  font-size: 1.15rem;
}

.woo-content .woocommerce-Address-title .edit {
  font-size: var(--fs-small);
  font-weight: 600;
}

.woo-content fieldset {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  margin: var(--space-md) 0 0;
}

.woo-content fieldset legend {
  padding: 0 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.woo-content .woocommerce-form-login__submit,
.woo-content .woocommerce-form-register__submit,
.woo-content .woocommerce-EditAccountForm .woocommerce-Button {
  margin-top: 0.5rem;
}

.woo-content .woocommerce-ResetPassword .form-row-first {
  max-width: 460px;
}

/* ============================================================
   11. SHOP / SINGLE PRODUCT (packages are catalog-hidden)
   ============================================================ */

.woo-content ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.woo-content ul.products li.product {
  list-style: none;
  margin: 0;
  width: auto;
  float: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-align: left;
}

.woo-content ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: 0.75rem 0 0.35rem;
}

.woo-content ul.products li.product .price,
.woo-content .product .summary .price {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
}

.woo-content .product .summary .price del {
  opacity: 0.55;
  font-size: 1rem;
}

.woo-content .variations {
  width: 100%;
  margin-bottom: 1rem;
  border: 0;
  background: transparent;
}

.woo-content .variations th,
.woo-content .variations td {
  padding: 0.4rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  vertical-align: middle;
}

.woo-content .woocommerce-variation-price {
  margin-bottom: 0.85rem;
}

.woo-content .reset_variations {
  font-size: var(--fs-small);
}

.woo-content .woocommerce-product-details__short-description {
  margin-bottom: 1rem;
}

.woo-content .product_meta {
  display: none;
}

.woo-content .woocommerce-result-count,
.woo-content .woocommerce-ordering {
  margin-bottom: var(--space-md);
}

/* ============================================================
   12. PAGINATION
   ============================================================ */

.woo-content .woocommerce-pagination ul,
.woo-content nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  border: 0;
  justify-content: center;
}

.woo-content .woocommerce-pagination ul li {
  list-style: none;
  border: 0;
  margin: 0;
  overflow: visible;
}

.woo-content .woocommerce-pagination ul li a,
.woo-content .woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
}

.woo-content .woocommerce-pagination ul li a:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.woo-content .woocommerce-pagination ul li span.current {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}

/* ============================================================
   13. DURATION SELECTOR MODAL
   ============================================================ */

.order-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s var(--ease-standard), visibility 0.32s var(--ease-standard);
}

.order-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.order-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 5, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.order-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition: transform 0.4s var(--ease-cinematic), opacity 0.4s var(--ease-cinematic);
}

[data-theme="dark"] .order-modal__dialog {
  background: var(--bg-card);
}

@supports (max-height: 100svh) {
  .order-modal__dialog {
    max-height: calc(100svh - 2.5rem);
  }
}

.order-modal.is-open .order-modal__dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.order-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  transition: background-color 0.25s var(--ease-standard),
    color 0.25s var(--ease-standard),
    border-color 0.25s var(--ease-standard),
    transform 0.25s var(--ease-standard);
}

.order-modal__close:hover {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
  transform: rotate(90deg);
}

[data-theme="dark"] .order-modal__close:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-card);
}

.order-modal__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.order-modal__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  pointer-events: none;
}

.order-modal__head {
  padding-right: 3.25rem;
  margin-bottom: 1.35rem;
}

.order-modal__eyebrow {
  margin: 0 0 0.6rem;
}

.order-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.order-modal__tag {
  display: inline-block;
  margin: 0.55rem 0 0;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(108, 79, 255, 0.12);
  border: 1px solid rgba(108, 79, 255, 0.28);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .order-modal__tag {
  color: #8FACCC;
}

.order-modal__tag[hidden] {
  display: none;
}

.order-modal__sub {
  margin: 0.85rem 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.order-modal__durations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.35rem;
}

.order-duration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 76px;
  padding: 0.65rem 0.35rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-body);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.order-duration:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.order-duration:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.order-duration.is-selected {
  border-color: transparent;
  background: var(--gradient-brand);
  color: #fff;
}

.order-duration__val {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.order-duration__unit {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.order-duration__price {
  margin-top: 0.28rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.order-duration.is-selected .order-duration__price {
  color: rgba(255, 255, 255, 0.9);
}

.order-modal__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.order-modal__total-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.order-modal__total-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.order-modal__total-length {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.order-modal__total-price {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-modal__note {
  margin: 0.9rem 0 1.35rem;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.order-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.order-modal__actions .btn {
  flex: 1 1 160px;
  justify-content: center;
  min-height: 48px;
}

.order-modal__confirm.is-busy {
  opacity: 0.7;
  cursor: progress;
}

html.order-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

  .order-modal,
  .order-modal__dialog,
  .order-duration,
  .order-modal__close {
    transition: none;
  }

  .order-modal__dialog {
    transform: none;
  }

  .order-duration:hover,
  .order-modal__close:hover {
    transform: none;
  }
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

/* Never let a Woo table push the page sideways. */
.woo-section,
.woo-content {
  overflow-x: clip;
}

/* ---------- phones (360 - 600) ---------- */
@media (max-width: 600px) {
  .woo-hero.hero--compact {
    padding-top: 7.5rem;
  }

  .woo-content table.shop_table,
  .woo-content table.woocommerce-orders-table,
  .woo-content table.woocommerce-table--downloads {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .woo-content table.shop_table thead,
  .woo-content table.woocommerce-orders-table thead,
  .woo-content table.woocommerce-table--downloads thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .woo-content table.shop_table tbody tr,
  .woo-content table.woocommerce-orders-table tbody tr,
  .woo-content table.woocommerce-table--downloads tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
  }

  .woo-content table.shop_table tbody td,
  .woo-content table.woocommerce-orders-table tbody td,
  .woo-content table.woocommerce-table--downloads tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
  }

  .woo-content table.shop_table tbody tr td:last-child,
  .woo-content table.woocommerce-orders-table tbody tr td:last-child,
  .woo-content table.woocommerce-table--downloads tbody tr td:last-child {
    border-bottom: 0;
  }

  .woo-content table.shop_table tbody td::before,
  .woo-content table.woocommerce-orders-table tbody td::before,
  .woo-content table.woocommerce-table--downloads tbody td::before {
    content: attr(data-title);
    flex: none;
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .woo-content table.shop_table tbody td.product-remove {
    justify-content: flex-end;
  }

  .woo-content table.shop_table tbody td.product-thumbnail {
    display: none;
  }

  .woo-content .cart_totals table.shop_table tbody tr,
  .woo-content .woocommerce-checkout-review-order-table tbody tr {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .woo-content table.shop_table tfoot {
    display: block;
    padding: 0.35rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
  }

  .woo-content .cart_totals table.shop_table tfoot,
  .woo-content .woocommerce-checkout-review-order-table tfoot {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .woo-content table.shop_table tfoot tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
  }

  .woo-content .cart .actions {
    display: block;
  }

  .woo-content .coupon {
    flex-direction: column;
    align-items: stretch;
  }

  .woo-content .coupon .button,
  .woo-content .cart .actions > .button {
    width: 100%;
  }

  .woo-content .quantity {
    margin-left: auto;
  }

  .woo-content .woocommerce-MyAccount-navigation ul {
    gap: 0.4rem;
  }

  .woo-content .woocommerce-MyAccount-navigation li a {
    padding: 0.55rem 0.9rem;
    font-size: 0.8rem;
  }

  .order-modal {
    padding: 0.75rem;
  }

  .order-modal__durations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-modal__actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------- 360px and narrower ---------- */
@media (max-width: 380px) {
  .order-modal__durations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-modal__total {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .woo-content .cart_totals,
  .woo-content #order_review,
  .woo-content #customer_details,
  .woo-content .woocommerce-MyAccount-content {
    padding: 1rem;
  }
}

/* ---------- tablets ---------- */
@media (min-width: 601px) {

  .woo-content .col2-set,
  .woo-content #customer_details .col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woo-content .woocommerce-Addresses,
  .woo-content .u-columns.addresses,
  .woo-content .u-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woo-content .form-row-first,
  .woo-content .form-row-last {
    display: inline-flex;
    width: calc(50% - 0.6rem);
    vertical-align: top;
  }

  .woo-content .form-row-first {
    margin-right: 1.1rem;
  }

  .woo-content .form-row-wide {
    width: 100%;
  }
}

/* ---------- desktop: checkout goes two-column ---------- */
@media (min-width: 981px) {
  .woo-content .checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .woo-content #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woo-content #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .woo-content #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 6.5rem;
  }

  .woo-content .cart-collaterals {
    justify-items: end;
  }

  .woo-content .cart_totals {
    width: min(460px, 100%);
  }

  .woo-content .woocommerce-MyAccount-navigation {
    margin-bottom: var(--space-lg);
  }
}

/* ---------- very wide screens: keep line length sane ---------- */
@media (min-width: 1600px) {

  .woo-content .woocommerce-MyAccount-content,
  .woo-content .woocommerce-order-details,
  .woo-content .woocommerce-customer-details {
    max-width: 1200px;
  }
}

/* ============================================================
   LAYOUT OVERRIDES — beat WooCommerce core's float/percentage
   widths (woocommerce-layout.css) with a higher-specificity
   selector so the account columns and order table behave.
   ============================================================ */

/* My Account: Login / Register side by side on desktop, stacked on mobile.
   Core ships `.woocommerce-page .col2-set .col-1{float:left;width:48%}`, which
   collides with our grid — reset it and let the grid do the work. */
.woo-content #customer_login.col2-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.woo-content #customer_login.col2-set .col-1,
.woo-content #customer_login.col2-set .col-2,
.woo-content #customer_login.u-columns .u-column1,
.woo-content #customer_login.u-columns .u-column2 {
  width: 100%;
  float: none;
  min-width: 0;
}

@media (max-width: 860px) {
  .woo-content #customer_login.col2-set {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Checkout billing vs shipping columns, same collision. */
.woo-content #customer_details.col2-set .col-1,
.woo-content #customer_details.col2-set .col-2 {
  width: 100%;
  float: none;
}

/* Order/cart table headings must not hyphenate ("SUBTOTA / L"). */
.woo-content .shop_table th,
.woo-content table.shop_table thead th {
  white-space: nowrap;
}

/* …but the product column may wrap, it carries long package names. */
.woo-content .shop_table th.product-name,
.woo-content .shop_table td.product-name {
  white-space: normal;
}

/* WooCommerce core adds clearfix pseudo-elements to .col2-set / .u-columns
   (`::before{content:" ";display:table}`). Those were needed for its float
   layout, but in a GRID container they become grid items and push the real
   columns out of place (login landed in column 2, register wrapped to row 2).
   The grid needs no clearfix, so remove them. */
.woo-content .col2-set::before,
.woo-content .col2-set::after,
.woo-content .u-columns::before,
.woo-content .u-columns::after,
.woo-content .woocommerce-Addresses::before,
.woo-content .woocommerce-Addresses::after {
  content: none;
  display: none;
}

/* ============================================================
   CUSTOM CHECKOUT POLISH & OVERRIDES
   ============================================================ */

/* 1. Coupon Section: compact, inline, left-aligned */
.woo-content .checkout_coupon:not([style*="display: none"]):not([style*="display:none"]):not([style*="display:  none"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.woo-content .checkout_coupon > p:not(.form-row) {
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

.woo-content .checkout_coupon .form-row {
  margin-bottom: 0 !important;
  width: auto !important;
  flex: 0 1 auto !important;
  display: block !important;
}

.woo-content .checkout_coupon #coupon_code {
  width: 240px !important;
  max-width: 100% !important;
}

.woo-content .checkout_coupon .button {
  width: auto !important;
}

/* 2. Columns: hide Additional Information and make Billing Details full-width */
.woo-content #customer_details.col2-set {
  grid-template-columns: minmax(0, 1fr) !important;
}

.woo-content #customer_details .col-2 {
  display: none !important;
}

/* 3. Your Order alignment / vertical spacing */
@media (min-width: 981px) {
  .woo-content .checkout.woocommerce-checkout {
    grid-template-rows: 1fr !important;
  }

  .woo-content #customer_details {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .woo-content #order_review_heading {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-bottom: 0 !important;
  }

  .woo-content #order_review {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-top: 3.25rem !important;
    position: sticky !important;
    top: 6.5rem !important;
  }
}

/* 4. Payment Box background */
.woo-content .payment_box {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* 5. Place Order Button branding */
.woo-content #place_order,
.woo-content .checkout-button,
.woo-content button#place_order {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.woo-content #place_order:hover,
.woo-content .checkout-button:hover,
.woo-content button#place_order:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
}

/* 6. Terms and conditions / Privacy Policy text removal */
.woo-content .woocommerce-privacy-policy-text,
.woo-content .woocommerce-terms-and-conditions-wrapper {
  display: none !important;
}

/* 7. Dark Mode Checkout Readability & Select2 visibility */
[data-theme="dark"] .woo-content input,
[data-theme="dark"] .woo-content textarea,
[data-theme="dark"] .woo-content select,
[data-theme="dark"] .woo-content .input-text {
  color: #ffffff !important;
  background-color: #11141b !important;
  border-color: rgba(143, 172, 204, 0.28) !important;
}

[data-theme="dark"] .woo-content label,
[data-theme="dark"] .woo-content h3,
[data-theme="dark"] .woo-content h2,
[data-theme="dark"] .woo-content span,
[data-theme="dark"] .woo-content p,
[data-theme="dark"] .woo-content strong,
[data-theme="dark"] .woo-content td,
[data-theme="dark"] .woo-content th {
  color: #ffffff !important;
}

[data-theme="dark"] .woo-content .required {
  color: #ff3366 !important;
}

[data-theme="dark"] .woo-content select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Select2 General Overrides (combats transparent dropdown backgrounds) */
.select2-dropdown {
  background-color: #ffffff !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  z-index: 99999 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #ffffff !important;
  color: #11141b !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 8px !important;
}

.select2-container--default .select2-results__option {
  color: #333333 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #6C4FFF !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: rgba(108, 79, 255, 0.08) !important;
  color: #11141b !important;
}

/* Select2 Dark Mode */
[data-theme="dark"] .select2-dropdown {
  background-color: #1d2740 !important;
  border-color: rgba(143, 172, 204, 0.28) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #11141b !important;
  color: #ffffff !important;
  border-color: rgba(143, 172, 204, 0.28) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
  color: #cccccc !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-theme="dark"] .select2-container--default .select2-results__option[data-selected="true"] {
  background-color: rgba(143, 172, 204, 0.15) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .woo-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #ffffff transparent transparent !important;
}

[data-theme="dark"] .woo-content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #ffffff !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: #11141b !important;
  border-color: rgba(143, 172, 204, 0.28) !important;
}

/* 8. Checkbox & Radio sizes and ticks */
.woo-content input[type="checkbox"],
.woo-content input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
}

.woo-content input[type="checkbox"]:checked::after {
  -webkit-mask-size: 10px 10px !important;
  mask-size: 10px 10px !important;
}

.woo-content input[type="radio"]:checked::after {
  inset: 3.5px !important;
}

/* 9. Validated fields removal of default green border/checkmark */
.woo-content .woocommerce-validated .input-text,
.woo-content .woocommerce-validated select,
.woo-content .woocommerce-validated .select2-selection {
  border-color: var(--border-color) !important;
  background-image: none !important;
}

.woo-content .woocommerce-validated::after {
  content: none !important;
  display: none !important;
}

/* 10. Left alignment of Country and State fields text */
.woo-content select,
.woo-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  text-align: left !important;
  text-align-last: left !important;
  padding-left: 1rem !important;
}

.select2-container--default .select2-results__option {
  text-align: left !important;
}

/* 13. Dark Mode Dropdown Arrow filter logic */
[data-theme="dark"] .select2-selection__arrow,
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  filter: brightness(0) invert(1) !important;
}

/* 11. Responsive Confirm & Start button layout (prevent wrap to 2 lines on mobile) */
@media (max-width: 480px) {
  .woo-content #place_order,
  .woo-content .checkout-button,
  .woo-content button#place_order {
    font-size: 0.9rem !important;
    padding: 0.9rem 1rem !important;
    white-space: nowrap !important;
  }
}

/* 12. Full-width Billing Details fields */
.woo-content .woocommerce-checkout .form-row-first,
.woo-content .woocommerce-checkout .form-row-last {
  display: flex !important;
  width: 100% !important;
  margin-right: 0 !important;
}

/* 14. Remove default WooCommerce padding on payment form-row on mobile */
@media (max-width: 767px) {
  .woocommerce-checkout #payment div.form-row,
  .woo-content #payment div.form-row {
    padding: 0 !important;
  }
}

/* 15. Make Coupon field and button full-width and centered on mobile */
@media (max-width: 767px) {
  .woo-content .checkout_coupon {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  
  .woo-content .checkout_coupon .form-row {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .woo-content .checkout_coupon #coupon_code {
    width: 100% !important;
  }

  .woo-content .checkout_coupon .button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* 16. Stack Credit/Debit Card labels vertically (column direction) */
.woo-content .wc_payment_method > label {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
}

.woo-content .wc_payment_method > label img {
  margin-left: 0 !important;
  margin-top: 0.25rem !important;
}