/* ==========================================================================
   BLKLUX Food Truck — WooCommerce classic cart / checkout / account restyle.
   Scoped under .blklux-theme so nothing leaks into wp-admin.
   ========================================================================== */

.blklux-theme .woocommerce,
.blklux-theme .woocommerce-page {
  color: var(--blklux-ivory);
  font-family: var(--blklux-font-body);
}

.blklux-theme .woocommerce h1,
.blklux-theme .woocommerce h2,
.blklux-theme .woocommerce h3,
.blklux-theme .woocommerce-page h1,
.blklux-theme .woocommerce-page h2,
.blklux-theme .woocommerce-page h3 {
  font-family: var(--blklux-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blklux-ivory);
}

.blklux-theme .woocommerce a:where(:not(.blklux-btn):not(.button):not(.blklux-action):not(.blklux-card):not(.blklux-list-row)) { color: var(--blklux-gold); }

/* --- Notices -------------------------------------------------------------- */

.blklux-theme .woocommerce-message,
.blklux-theme .woocommerce-info,
.blklux-theme .woocommerce-error,
.blklux-theme .woocommerce-notice {
  background: var(--blklux-charcoal);
  border: 1px solid var(--blklux-line);
  border-top-width: 1px;
  border-radius: var(--blklux-r-md);
  color: var(--blklux-ivory);
  padding: 14px 16px 14px 48px;
  margin-bottom: var(--blklux-s-5);
}
.blklux-theme .woocommerce-message::before,
.blklux-theme .woocommerce-info::before { color: var(--blklux-gold); }
.blklux-theme .woocommerce-error { border-color: rgba(217, 101, 79, 0.55); }
.blklux-theme .woocommerce-error::before { color: var(--blklux-ember); }
.blklux-theme .woocommerce-error li { margin: 4px 0; }

/* --- Forms --------------------------------------------------------------- */

.blklux-theme .woocommerce form .form-row label { color: var(--blklux-ivory); font-weight: 600; font-size: var(--blklux-fs-sm); }
.blklux-theme .woocommerce form .form-row .required { color: var(--blklux-gold); text-decoration: none; }
.blklux-theme .woocommerce form .form-row .input-text,
.blklux-theme .woocommerce form .form-row textarea,
.blklux-theme .woocommerce form .form-row select,
.blklux-theme .woocommerce .select2-container .select2-selection--single {
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--blklux-r-md);
  border: 1px solid var(--blklux-line);
  background: var(--blklux-raised);
  color: var(--blklux-ivory);
  font-family: var(--blklux-font-body);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--blklux-dur), box-shadow var(--blklux-dur);
}
.blklux-theme .woocommerce form .form-row .input-text:focus,
.blklux-theme .woocommerce form .form-row textarea:focus,
.blklux-theme .woocommerce form .form-row select:focus { outline: none; border-color: var(--blklux-gold); box-shadow: 0 0 0 3px rgba(212, 165, 72, 0.18); }
.blklux-theme .woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--blklux-ember); }
.blklux-theme .woocommerce form .form-row.woocommerce-validated .input-text { border-color: var(--blklux-line-strong); }
.blklux-theme .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { color: var(--blklux-ivory); line-height: 24px; padding: 0; }
.blklux-theme .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 12px; right: 10px; }
.blklux-theme .woocommerce .select2-container .select2-selection--single .select2-selection__arrow b { border-color: var(--blklux-gold) transparent transparent; }
.select2-container .select2-dropdown { background: var(--blklux-raised); border: 1px solid var(--blklux-line); color: var(--blklux-ivory); }
.select2-container .select2-results__option--highlighted[aria-selected] { background: rgba(212, 165, 72, 0.2); color: var(--blklux-ivory); }
.select2-container .select2-search--dropdown .select2-search__field { background: var(--blklux-charcoal); border: 1px solid var(--blklux-line); color: var(--blklux-ivory); }
.blklux-theme .woocommerce form .form-row ::placeholder { color: var(--blklux-ash-soft); }
.blklux-theme .woocommerce form .woocommerce-input-wrapper { display: block; }

/* --- Buttons ------------------------------------------------------------- */

.blklux-theme .woocommerce .button,
.blklux-theme .woocommerce button.button,
.blklux-theme .woocommerce a.button,
.blklux-theme .woocommerce input.button,
.blklux-theme .woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--blklux-touch);
  padding: 0 var(--blklux-s-5);
  border-radius: var(--blklux-r-md);
  border: 1px solid var(--blklux-line-strong);
  background: transparent;
  color: var(--blklux-gold);
  font-family: var(--blklux-font-body);
  font-weight: 700;
  font-size: var(--blklux-fs-sm);
  letter-spacing: var(--blklux-track-button);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--blklux-dur-fast), filter var(--blklux-dur), background-color var(--blklux-dur);
}
.blklux-theme .woocommerce .button:hover { background: rgba(212, 165, 72, 0.08); color: var(--blklux-gold); }
.blklux-theme .woocommerce .button.alt,
.blklux-theme .woocommerce button.button.alt,
.blklux-theme .woocommerce #place_order,
.blklux-theme .woocommerce .checkout-button,
.blklux-theme .woocommerce button[name="update_cart"]:not(:disabled) {
  background: var(--blklux-gold-gradient);
  color: var(--blklux-gold-ink);
  border-color: transparent;
  box-shadow: 0 12px 24px -14px rgba(212, 165, 72, 0.6);
}
.blklux-theme .woocommerce .button.alt:hover,
.blklux-theme .woocommerce #place_order:hover { filter: brightness(1.06); background: var(--blklux-gold-gradient); color: var(--blklux-gold-ink); }
.blklux-theme .woocommerce #place_order { width: 100%; min-height: 56px; font-size: var(--blklux-fs-md); border-radius: var(--blklux-r-lg); margin-top: var(--blklux-s-4); }
.blklux-theme .woocommerce .button:disabled,
.blklux-theme .woocommerce .button[disabled] { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--blklux-ash); }
.blklux-theme .woocommerce .button:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 3px; }

/* --- Tables (cart, review, orders) --------------------------------------- */

.blklux-theme .woocommerce table.shop_table {
  border: 1px solid var(--blklux-line);
  border-radius: var(--blklux-r-lg);
  border-collapse: separate;
  background: var(--blklux-charcoal);
  overflow: hidden;
  color: var(--blklux-ivory);
}
.blklux-theme .woocommerce table.shop_table th,
.blklux-theme .woocommerce table.shop_table td { border-color: var(--blklux-line-soft); color: var(--blklux-ivory); padding: 14px 16px; }
.blklux-theme .woocommerce table.shop_table th { font-size: var(--blklux-fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blklux-ash); font-weight: 700; }
.blklux-theme .woocommerce table.shop_table tfoot th { color: var(--blklux-ivory); text-transform: none; letter-spacing: 0; font-size: var(--blklux-fs-sm); }
.blklux-theme .woocommerce table.shop_table tfoot .order-total th,
.blklux-theme .woocommerce table.shop_table tfoot .order-total td { font-size: var(--blklux-fs-lg); border-top: 1px solid var(--blklux-line); }
.blklux-theme .woocommerce .amount,
.blklux-theme .woocommerce .woocommerce-Price-amount { color: var(--blklux-gold); font-weight: 700; font-variant-numeric: var(--blklux-nums); }
.blklux-theme .woocommerce table.shop_table .product-name { font-weight: 600; }
.blklux-theme .woocommerce table.shop_table .product-name .product-quantity { color: var(--blklux-gold); font-weight: 700; }
.blklux-theme .woocommerce table.shop_table dl.variation { margin: 6px 0 0; font-size: var(--blklux-fs-xs); color: var(--blklux-ash); }
.blklux-theme .woocommerce table.shop_table dl.variation dt { font-weight: 600; color: var(--blklux-ash); }
.blklux-theme .woocommerce table.shop_table dl.variation dd { margin: 0 0 2px 0; }
.blklux-theme .woocommerce table.shop_table dl.variation dd p { margin: 0; }
.blklux-theme .woocommerce a.remove { color: var(--blklux-ash) !important; }
.blklux-theme .woocommerce a.remove:hover { color: var(--blklux-ember) !important; background: transparent; }
.blklux-theme .woocommerce-cart table.cart img { border-radius: var(--blklux-r-sm); }
.blklux-theme .woocommerce .quantity .qty { min-height: 44px; width: 72px; border-radius: var(--blklux-r-md); border: 1px solid var(--blklux-line); background: var(--blklux-raised); color: var(--blklux-ivory); text-align: center; }
.blklux-theme .woocommerce .coupon .input-text { min-height: 44px; border-radius: var(--blklux-r-md); border: 1px solid var(--blklux-line); background: var(--blklux-raised); color: var(--blklux-ivory); padding: 0 12px; }
.blklux-theme .woocommerce .cart_totals { background: var(--blklux-charcoal); border-radius: var(--blklux-r-lg); box-shadow: var(--blklux-rim); padding: var(--blklux-s-4); }
.blklux-theme .woocommerce .cart_totals table.shop_table { border: 0; background: transparent; }
.blklux-theme .woocommerce .cart_totals h2 { font-size: var(--blklux-fs-xl); margin: 0 0 var(--blklux-s-3); }

/* --- Checkout layout ----------------------------------------------------- */

.blklux-theme .woocommerce-checkout .col2-set { display: grid; gap: var(--blklux-s-5); }
.blklux-theme .woocommerce-checkout .col2-set .col-1,
.blklux-theme .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
body.blklux-theme.woocommerce-checkout form.checkout #customer_details.col2-set, body.blklux-theme.woocommerce-checkout form.checkout #order_review, .blklux-theme .woocommerce-checkout #customer_details, .blklux-theme .woocommerce-checkout #order_review { width: 100%; float: none; }
.blklux-theme .woocommerce-checkout .woocommerce-billing-fields,
.blklux-theme .woocommerce-checkout .woocommerce-additional-fields { background: var(--blklux-charcoal); border-radius: var(--blklux-r-lg); box-shadow: var(--blklux-rim); padding: var(--blklux-s-5); }
.blklux-theme .woocommerce-checkout .woocommerce-billing-fields h3,
.blklux-theme .woocommerce-checkout .woocommerce-additional-fields h3,
.blklux-theme .woocommerce-checkout #order_review_heading { font-size: var(--blklux-fs-xl); margin: 0 0 var(--blklux-s-4); }
.blklux-theme .woocommerce-checkout #order_review { background: var(--blklux-charcoal); border-radius: var(--blklux-r-lg); box-shadow: var(--blklux-rim); padding: var(--blklux-s-5); }
.blklux-theme .woocommerce-checkout #order_review table.shop_table { border: 0; background: transparent; border-radius: 0; }
.blklux-theme .woocommerce-checkout #order_review table.shop_table th,
.blklux-theme .woocommerce-checkout #order_review table.shop_table td { padding: 10px 0; }
.blklux-theme .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.blklux-theme .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: var(--blklux-s-3); }
.blklux-theme .woocommerce-checkout .woocommerce-form-login,
.blklux-theme .woocommerce-checkout .checkout_coupon { background: var(--blklux-charcoal); border: 1px solid var(--blklux-line); border-radius: var(--blklux-r-lg); padding: var(--blklux-s-4); margin-bottom: var(--blklux-s-5); }
.blklux-theme .woocommerce-checkout .woocommerce-privacy-policy-text,
.blklux-theme .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { color: var(--blklux-ash); font-size: var(--blklux-fs-xs); }

@media (min-width: 1025px) {
  .blklux-theme form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: var(--blklux-s-6); align-items: start; }
  .blklux-theme form.woocommerce-checkout #order_review_heading { grid-column: 2; margin: 0; }
  .blklux-theme form.woocommerce-checkout #order_review { grid-column: 2; position: sticky; top: 96px; }
  .blklux-theme form.woocommerce-checkout .col2-set { grid-column: 1; grid-row: 1 / span 3; }
  .blklux-theme form.woocommerce-checkout #customer_details, .blklux-theme form.woocommerce-checkout .col2-set, .blklux-theme form.woocommerce-checkout #order_review, .blklux-theme form.woocommerce-checkout #order_review_heading { width: 100%; float: none; }
  .blklux-theme .blklux-checkout-summary { grid-column: 1 / -1; }
}

/* Summary card above the form */
.blklux-checkout-summary { margin: 0 0 var(--blklux-s-5); }
.blklux-checkout-summary__row { display: flex; align-items: center; gap: var(--blklux-s-4); padding: var(--blklux-s-4) var(--blklux-s-5); }
.blklux-checkout-summary__img { width: 72px; height: 72px; border-radius: var(--blklux-r-md); object-fit: cover; flex: none; }
.blklux-checkout-summary__body { flex: 1; min-width: 0; }
@media (max-width: 600px) { .blklux-checkout-summary__img { display: none; } }

/* Pickup time + tip blocks inside the review column */
.blklux-checkout-extras { display: grid; gap: var(--blklux-s-4); margin: var(--blklux-s-3) 0 var(--blklux-s-5); }
.blklux-checkout-block { border: 0; padding: 0; margin: 0; min-width: 0; }
.blklux-checkout-block__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 0; margin: 0 0 12px; font-family: var(--blklux-font-display); font-size: var(--blklux-fs-lg); font-weight: 600; color: var(--blklux-ivory); }
.blklux-checkout-block__amount { font-family: var(--blklux-font-body); font-size: var(--blklux-fs-sm); }
.blklux-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; }
.blklux-slots .blklux-chip { width: 100%; padding: 0 6px; }
.blklux-chip[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.blklux-chip:has(input:checked), .blklux-chip.is-selected { background: var(--blklux-gold-gradient); background-origin: border-box; border-color: transparent; color: var(--blklux-gold-ink); }
.blklux-chip:has(input:focus-visible) { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; }

/* Payment methods */
.blklux-theme .woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.blklux-theme .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--blklux-line-soft); padding: 0 0 var(--blklux-s-3); }
.blklux-theme .woocommerce-checkout #payment ul.payment_methods li { padding: 10px 0; }
.blklux-theme .woocommerce-checkout #payment ul.payment_methods li label { color: var(--blklux-ivory); font-weight: 600; }
.blklux-theme .woocommerce-checkout #payment div.payment_box { background: var(--blklux-raised); color: var(--blklux-ash); border-radius: var(--blklux-r-md); font-size: var(--blklux-fs-sm); }
.blklux-theme .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--blklux-raised); }
.blklux-theme .woocommerce-checkout #payment input[type="radio"] { accent-color: var(--blklux-gold); width: 18px; height: 18px; }

/* --- Thank-you / confirmation ------------------------------------------- */

.blklux-confirmation { text-align: center; margin: 0 auto var(--blklux-s-7); max-width: 640px; display: grid; gap: var(--blklux-s-4); justify-items: center; }
.blklux-confirmation__title { font-size: var(--blklux-fs-3xl); margin-top: var(--blklux-s-3); }
.blklux-confirmation__lead { text-align: center; }
.blklux-confirmation__card { width: 100%; text-align: left; }
.blklux-confirmation__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--blklux-s-4); margin-bottom: var(--blklux-s-5); }
.blklux-confirmation__grid > div { display: grid; gap: 2px; }
.blklux-confirmation__grid strong { font-size: var(--blklux-fs-lg); }
.blklux-confirmation__timeline { margin: 0 0 8px; }
.blklux-confirmation__actions { display: grid; gap: 10px; width: 100%; }
@media (min-width: 600px) { .blklux-confirmation__actions { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.blklux-theme .woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--blklux-font-display); font-size: var(--blklux-fs-xl); text-align: center; color: var(--blklux-ash); }
.blklux-theme .woocommerce-order ul.woocommerce-thankyou-order-details { display: none; }
.blklux-theme .woocommerce-order .woocommerce-order-details,
.blklux-theme .woocommerce-order .woocommerce-customer-details { max-width: 640px; margin-inline: auto; }
.blklux-theme .woocommerce-order .woocommerce-customer-details address { border: 1px solid var(--blklux-line); border-radius: var(--blklux-r-md); background: var(--blklux-charcoal); color: var(--blklux-ivory); }

/* --- My Account ----------------------------------------------------------- */

.blklux-theme .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.blklux-theme .woocommerce-MyAccount-navigation li a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--blklux-r-pill); border: 1px solid var(--blklux-line); color: var(--blklux-ivory); text-decoration: none; font-weight: 600; font-size: var(--blklux-fs-sm); }
.blklux-theme .woocommerce-MyAccount-content { margin-top: var(--blklux-s-5); }
@media (min-width: 1025px) {
  .blklux-theme .woocommerce-account .woocommerce-MyAccount-navigation { width: 240px; float: none; }
  .blklux-theme .woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
  .blklux-theme .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: var(--blklux-s-6); align-items: start; }
  .blklux-theme .woocommerce-MyAccount-navigation ul { flex-direction: column; }
  .blklux-theme .woocommerce-MyAccount-navigation li a { border-radius: var(--blklux-r-md); }
  .blklux-theme .woocommerce-MyAccount-content { margin-top: 0; }
}
.blklux-theme .woocommerce-account .woocommerce-form-login,
.blklux-theme .woocommerce-account .woocommerce-form-register { background: var(--blklux-charcoal); border: 1px solid var(--blklux-line); border-radius: var(--blklux-r-lg); padding: var(--blklux-s-5); max-width: 480px; }
.blklux-theme .woocommerce-account .woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--blklux-gold); }

/* Password reveal: 15px icon becomes a 32px target */
body.blklux-theme .woocommerce form .show-password-input { width: 32px; height: 32px; top: 50%; transform: translateY(-50%); right: 10px; display: grid; place-items: center; }

/* ==========================================================================
   My Account — the customer's dashboard. Same head, same cards and the same
   hover language as the owner's screens; the theme's link colours must not
   reach inside a card, and the current tab must stay readable on gold.
   ========================================================================== */

body.blklux-theme .woocommerce-MyAccount-navigation li > a { color: var(--blklux-ivory); text-decoration: none; transition: color var(--blklux-dur) var(--blklux-ease-out), border-color var(--blklux-dur) var(--blklux-ease-out), background-color var(--blklux-dur) var(--blklux-ease-out); }
body.blklux-theme .woocommerce-MyAccount-navigation li > a:hover,
body.blklux-theme .woocommerce-MyAccount-navigation li > a:focus-visible { color: var(--blklux-gold-light); background: rgba(212, 165, 72, 0.08); border-color: var(--blklux-line-strong); text-decoration: none; }
body.blklux-theme .woocommerce-MyAccount-navigation li > a:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; }
body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a,
body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a:hover,
body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a:focus { color: var(--blklux-ivory); }
body.blklux-theme .woocommerce-MyAccount-navigation li--logout > a { color: var(--blklux-ash); }

/* The hero: head, two facts, then the account's own sections as actions. */
.blklux-account-hero__cards { display: grid; gap: var(--blklux-s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: var(--blklux-s-4); }
.blklux-account-card { display: grid; align-content: start; gap: 2px; }
.blklux-account-card .blklux-stat__value { display: block; margin-top: 2px; }
.blklux-account-card__title { display: block; margin-top: 2px; font-size: var(--blklux-fs-lg); font-weight: 600; }
.blklux-account-hero__title { margin: var(--blklux-s-6) 0 var(--blklux-s-3); font-family: var(--blklux-font-display); font-size: var(--blklux-fs-xl); font-weight: 600; letter-spacing: 0.03em; }
.blklux-account-hero__links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Astra colours every link in the content area; inside our cards the text is
   ours, so restate it at a higher specificity than `.entry-content a`. */
body.blklux-theme .woocommerce-MyAccount-content a.blklux-action,
body.blklux-theme .woocommerce-MyAccount-content a.blklux-action:hover,
body.blklux-theme .woocommerce-MyAccount-content a.blklux-card,
body.blklux-theme .woocommerce-MyAccount-content a.blklux-card:hover { color: var(--blklux-ivory); text-decoration: none; }
body.blklux-theme .woocommerce-MyAccount-content a.blklux-action strong,
body.blklux-theme .woocommerce-MyAccount-content a.blklux-action span,
body.blklux-theme .woocommerce-MyAccount-content a.blklux-card span { text-decoration: none; }
body.blklux-theme .woocommerce-MyAccount-content a.blklux-action:hover .blklux-icon { color: var(--blklux-gold-light); }
body.blklux-theme .woocommerce-MyAccount-content .blklux-action:hover { border-color: var(--blklux-line-strong); background: var(--blklux-raised); box-shadow: var(--blklux-glow); }

/* ==========================================================================
   My Account, second pass. The navigation was a pill floating inside a wider
   bordered row; the reward cards changed shape depending on whether the
   reward happened to have a photo. One row of tabs, one shape of card.
   ========================================================================== */

/* --- the account navigation --------------------------------------------- */
body.blklux-theme .woocommerce-MyAccount-navigation ul { gap: 4px; }
body.blklux-theme .woocommerce-MyAccount-navigation li { display: block; width: 100%; border: 0; padding: 0; margin: 0; list-style: none; }
body.blklux-theme .woocommerce-MyAccount-navigation li > a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--blklux-r-md);
  background: var(--blklux-charcoal);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.blklux-theme .woocommerce-MyAccount-navigation li > a:hover,
body.blklux-theme .woocommerce-MyAccount-navigation li > a:focus-visible { background: var(--blklux-raised); border-color: var(--blklux-line); }
body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a {
  position: relative;
  background: rgba(212, 165, 72, 0.12);
  border-color: rgba(212, 165, 72, 0.45);
  padding-left: 22px;
}
body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--blklux-gold-gradient); }
body.blklux-theme .entry-content .woocommerce-MyAccount-navigation li.is-active > a,
body.blklux-theme .entry-content .woocommerce-MyAccount-navigation li.is-active > a:hover { color: var(--blklux-ivory); }
body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a:hover,
body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a:focus-visible { background: rgba(212, 165, 72, 0.18); border-color: rgba(212, 165, 72, 0.6); color: var(--blklux-ivory); }
body.blklux-theme .woocommerce-MyAccount-navigation li--logout { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--blklux-line-soft); }
body.blklux-theme .woocommerce-MyAccount-navigation li--logout > a { background: transparent; font-weight: 500; }

/* --- headings in the account area ---------------------------------------- */
body.blklux-theme.woocommerce-account .entry-title,
body.blklux-theme .woocommerce-MyAccount-content .blklux-section__title,
body.blklux-theme .woocommerce-MyAccount-content h2,
body.blklux-theme .woocommerce-MyAccount-content h3,
body.blklux-theme .blklux-account-hero__title { text-transform: none; letter-spacing: 0.01em; }
body.blklux-theme .woocommerce-MyAccount-content .blklux-section__title { margin: 30px 0 12px; font-family: var(--blklux-font-display); font-size: var(--blklux-fs-2xl); font-weight: 600; }

/* --- reward cards: one shape, whatever the reward is ---------------------- */
.blklux-rewards__grid { display: grid; gap: var(--blklux-s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); align-items: stretch; }
.blklux-reward {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--blklux-line);
  border-radius: var(--blklux-r-lg);
  background: var(--blklux-charcoal);
  transition: border-color var(--blklux-dur) var(--blklux-ease-out), transform var(--blklux-dur-fast) var(--blklux-ease-out);
}
.blklux-reward:hover { border-color: var(--blklux-line-strong); }
.blklux-reward__media { position: relative; height: 0; padding-top: 75%; overflow: hidden; background: var(--blklux-raised); border-bottom: 1px solid var(--blklux-line-soft); }
.blklux-reward__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.blklux-reward__plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--blklux-font-display);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--blklux-gold);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 165, 72, 0.18), transparent 70%),
    var(--blklux-raised);
}
.blklux-reward__body { display: grid; align-content: start; gap: 4px; padding: 14px 16px 6px; }
.blklux-reward__name { margin: 0; font-family: var(--blklux-font-body); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--blklux-ivory); text-transform: none; letter-spacing: 0; }
.blklux-reward__points { font-size: 13px; font-weight: 600; color: var(--blklux-gold); font-variant-numeric: var(--blklux-nums); }
.blklux-reward__foot { padding: 10px 16px 16px; }
.blklux-reward__foot .blklux-btn { width: 100%; }
.blklux-reward__need { display: block; padding: 9px 0; font-size: 13px; color: var(--blklux-ash); text-align: center; border-top: 1px solid var(--blklux-line-soft); }
.blklux-reward.is-locked { opacity: 1; }
.blklux-reward.is-locked .blklux-reward__media { filter: grayscale(0.55) brightness(0.72); }
.blklux-reward.is-locked .blklux-reward__name { color: var(--blklux-ash); }
.blklux-reward.is-locked .blklux-reward__points { color: var(--blklux-ash); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .blklux-reward:hover { transform: translateY(-2px); }
}

/* --- the membership card ------------------------------------------------- */
.blklux-rewards__hero { padding: var(--blklux-s-5) var(--blklux-s-5) var(--blklux-s-4); }
.blklux-rewards__balance { margin-top: 2px; }
.blklux-rewards__balance .blklux-display { line-height: 1; }
.blklux-rewards__tier { margin-top: 16px; padding-top: 16px; }
.blklux-rewards__hero > p:last-child { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--blklux-line-soft); }

/* the theme sets every h4 in the content area in the display face, uppercase:
   a reward's name is a label, not a headline */
body.blklux-theme .woocommerce-MyAccount-content .blklux-reward__name,
body.blklux-theme .blklux-reward .blklux-reward__name {
  font-family: var(--blklux-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blklux-ivory);
  margin: 0;
}
body.blklux-theme .blklux-reward .blklux-reward__points { font-size: 13px; text-transform: none; letter-spacing: 0; }
body.blklux-theme .blklux-reward .blklux-reward__plate { text-transform: none; }
body.blklux-theme .blklux-reward .blklux-btn { font-size: var(--blklux-fs-xs); }

/* On a phone the eight account links filled the first screen before any
   content; they scroll sideways instead, so the points card is visible at once. */
@media (max-width: 600px) {
  body.blklux-theme .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; margin-bottom: var(--blklux-s-4); }
  body.blklux-theme .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  body.blklux-theme .woocommerce-MyAccount-navigation li { width: auto; flex: 0 0 auto; }
  body.blklux-theme .woocommerce-MyAccount-navigation li > a { width: auto; min-height: 42px; padding: 0 14px; border-radius: var(--blklux-r-pill); border-color: var(--blklux-line); white-space: nowrap; font-size: 14px; }
  body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a { padding-left: 14px; }
  body.blklux-theme .woocommerce-MyAccount-navigation li.is-active > a::before { display: none; }
  body.blklux-theme .woocommerce-MyAccount-navigation li--logout { margin: 0; padding: 0; border: 0; }
}

/* ==========================================================================
   Sign in / sign up — one card, with a gold panel that slides across to swap
   between the two forms. The layout follows the split-card pattern the client
   asked for; the palette and type are ours, so the card is onyx with a gold
   gradient panel, Cormorant for the headings and Manrope in the fields.

   Without JavaScript the card has no "is-enhanced" class and falls back to the
   two forms stacked — every field still works, it just does not slide.
   ========================================================================== */

.blklux-auth {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  background: var(--blklux-charcoal);
  border: 1px solid var(--blklux-line);
  border-radius: var(--blklux-r-lg);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

/* --- fallback: no JS, no sliding, both forms one after the other ---------- */
.blklux-auth__forms { display: grid; }
.blklux-auth__form { padding: clamp(28px, 4vw, 48px); min-width: 0; }
.blklux-auth:not(.is-enhanced) .blklux-auth__form + .blklux-auth__form { border-top: 1px solid var(--blklux-line); }
.blklux-auth:not(.is-enhanced) .blklux-auth__panels { display: none; }

/* --- type ----------------------------------------------------------------- */
body.blklux-theme .blklux-auth__title {
  margin: 0 0 6px;
  font-family: var(--blklux-font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--blklux-ivory);
}
body.blklux-theme .blklux-auth__lede { margin: 0 0 22px; max-width: 42ch; font-size: 14.5px; line-height: 1.55; color: var(--blklux-ash); }
body.blklux-theme .blklux-auth__note { margin: -4px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--blklux-ash); }

/* --- fields: the reference's pill, in our dark ---------------------------- */
.blklux-auth__field { margin: 0 0 14px; }
body.blklux-theme .blklux-auth__field > label {
  display: block;
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blklux-ash);
}
.blklux-auth__input {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  min-height: 54px;
  background: var(--blklux-onyx);
  border: 1px solid var(--blklux-line);
  border-radius: 54px;
  transition: border-color var(--blklux-dur-fast) var(--blklux-ease-out), box-shadow var(--blklux-dur-fast) var(--blklux-ease-out);
}
.blklux-auth__input:focus-within { border-color: var(--blklux-gold); box-shadow: 0 0 0 2px rgba(212, 165, 72, 0.28); }
.blklux-auth__input > svg { width: 18px; height: 18px; justify-self: center; color: var(--blklux-gold); opacity: 0.85; }
/* the reveal button brings its own mark, which must not inherit the field icon size */
.blklux-auth__input .show-password-input svg { width: 18px; height: 18px; }
body.blklux-theme .blklux-auth__input input {
  width: 100%;
  min-height: 52px;
  padding: 0 20px 0 2px;
  background: none;
  border: 0;
  outline: none;
  box-shadow: none;
  font-family: var(--blklux-font-body);
  font-size: 15px;
  color: var(--blklux-ivory);
}
body.blklux-theme .blklux-auth__input input::placeholder { color: var(--blklux-ash); opacity: 1; }
body.blklux-theme .blklux-auth__input input:focus { background: none; border: 0; box-shadow: none; outline: none; }
/* WooCommerce wraps the password in its own relative span and hangs a reveal
   button off it. That span is neutralised so the button centres on the pill
   instead, and the field makes room so the text never runs under it. The
   earlier .woocommerce form rule is more specific than it looks, hence the
   extra .blklux-auth in these selectors. */
body.blklux-theme .blklux-auth .blklux-auth__input .password-input { display: contents; }
/* dissolving the wrapper leaves three cells in the pill: mark, field, reveal */
body.blklux-theme .blklux-auth .blklux-auth__input:has(.blklux-auth__reveal) { grid-template-columns: 46px minmax(0, 1fr) auto; }
body.blklux-theme .blklux-auth .blklux-auth__input .show-password-input { position: static; top: auto; right: auto; bottom: auto; left: auto; align-self: center; width: 36px; height: 36px; margin: 0 10px 0 0; padding: 0; transform: none; display: grid; place-items: center; }

.blklux-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 20px; }
body.blklux-theme .blklux-auth__remember { display: inline-flex; align-items: center; gap: 9px; margin: 0; min-height: 32px; font-size: 14px; color: var(--blklux-ash); cursor: pointer; }
body.blklux-theme .blklux-auth__lost { font-size: 13.5px; color: var(--blklux-ash); text-decoration: none; }
body.blklux-theme .blklux-auth__lost:hover { color: var(--blklux-gold-light); text-decoration: underline; text-underline-offset: 4px; }

body.blklux-theme .blklux-auth__form .blklux-btn { width: 100%; min-height: 52px; border-radius: 52px; }

.blklux-auth__swap { margin: 18px 0 0; font-size: 14px; color: var(--blklux-ash); }
body.blklux-theme .blklux-auth__link {
  padding: 4px 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--blklux-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
body.blklux-theme .blklux-auth__link:hover { color: var(--blklux-gold-light); }
.blklux-auth__link:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 3px; border-radius: 4px; }

/* --- enhanced: the sliding card ------------------------------------------ */
@media (min-width: 880px) {
  .blklux-auth.is-enhanced { min-height: 580px; }

  /* the gold shape that travels across the card */
  .blklux-auth.is-enhanced::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 48%;
    width: 2200px;
    height: 2200px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--blklux-gold-gradient);
    transition: transform 1.5s var(--blklux-ease-out), right 1.5s var(--blklux-ease-out);
    z-index: 1;
  }
  .blklux-auth.is-enhanced.is-signup::before { right: 52%; transform: translate(100%, -50%); }

  .blklux-auth.is-enhanced .blklux-auth__forms {
    position: absolute;
    top: 50%;
    left: 75%;
    width: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: minmax(0, 1fr);
    transition: left 0.9s var(--blklux-ease-out);
    z-index: 3;
  }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__forms { left: 25%; }

  .blklux-auth.is-enhanced .blklux-auth__form {
    grid-area: 1 / 1;
    padding: 8px clamp(24px, 3vw, 44px);
    transition: opacity 0.35s var(--blklux-ease-out), visibility 0.35s;
  }
  .blklux-auth.is-enhanced .blklux-auth__form--up { opacity: 0; visibility: hidden; }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__form--in { opacity: 0; visibility: hidden; }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__form--up { opacity: 1; visibility: visible; }
  /* the inline swap line is for the stacked fallback; the panel carries it here */
  .blklux-auth.is-enhanced .blklux-auth__swap--inline { display: none; }

  .blklux-auth.is-enhanced .blklux-auth__panels {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    z-index: 4;
    pointer-events: none;
  }
  .blklux-auth__panel { display: flex; align-items: center; }
  .blklux-auth__panel--left { padding: 48px 16% 48px 10%; }
  .blklux-auth__panel--right { padding: 48px 10% 48px 16%; }
  .blklux-auth__content { transition: transform 0.9s var(--blklux-ease-out) 0.35s; }
  .blklux-auth__panel--right .blklux-auth__content { transform: translateX(900px); }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__panel--left .blklux-auth__content { transform: translateX(-900px); }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__panel--right .blklux-auth__content { transform: translateX(0); }

  /* the panel sits on gold, so everything on it is ink, not ivory */
  .blklux-auth__panel .blklux-auth__brand { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26, 18, 4, 0.62); }
  body.blklux-theme .blklux-auth__panel h3 { margin: 0 0 10px; font-family: var(--blklux-font-display); font-size: clamp(24px, 2.4vw, 31px); font-weight: 600; line-height: 1.1; color: var(--blklux-gold-ink); }
  body.blklux-theme .blklux-auth__panel p { margin: 0 0 22px; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: rgba(26, 18, 4, 0.82); }
  body.blklux-theme .blklux-auth__panel .blklux-btn {
    --btn-bg: transparent;
    --btn-fg: var(--blklux-gold-ink);
    --btn-rim: rgba(26, 18, 4, 0.55);
    width: auto;
    min-height: 44px;
    border-radius: 44px;
    filter: none;
  }
  body.blklux-theme .blklux-auth__panel .blklux-btn:hover,
  body.blklux-theme .blklux-auth__panel .blklux-btn:focus-visible { --btn-bg: rgba(26, 18, 4, 0.1); --btn-fg: var(--blklux-gold-ink); --btn-rim: var(--blklux-gold-ink); filter: none; }

  /* only the panel facing the visitor can be clicked */
  .blklux-auth.is-enhanced .blklux-auth__panels { pointer-events: none; }
  .blklux-auth.is-enhanced .blklux-auth__panel--left { pointer-events: auto; }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__panel--left { pointer-events: none; }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__panel--right { pointer-events: auto; }
}

/* a store with registration switched off needs none of the sliding machinery */
.blklux-auth--single { max-width: 520px; }

/* Below the sliding breakpoint the panels are decoration with no job to do:
   the stacked forms carry their own swap links. */
@media (max-width: 879px) {
  .blklux-auth__panels { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blklux-auth.is-enhanced::before,
  .blklux-auth.is-enhanced .blklux-auth__forms,
  .blklux-auth.is-enhanced .blklux-auth__form,
  .blklux-auth__content { transition: none; }
}

/* ==========================================================================
   Auth card, second pass.

   1. The account page styles a login/register form as its own bordered box.
      Inside the card that box is a second frame around a frame, so it is
      dissolved — the card is the container, the form is just content.
   2. WooCommerce draws its password reveal with a glyph from its own icon
      font, which sits on the font's baseline rather than in the middle of our
      pill. The glyph is replaced with a masked SVG that centres properly and
      follows the field's colour, with a struck-through eye once revealed.
   ========================================================================== */

/* --- 1. no box inside the box -------------------------------------------- */
body.blklux-theme .blklux-auth .woocommerce-form-login,
body.blklux-theme .blklux-auth .woocommerce-form-register,
body.blklux-theme .woocommerce-account .blklux-auth .woocommerce-form-login,
body.blklux-theme .woocommerce-account .blklux-auth .woocommerce-form-register {
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- 2. the reveal -------------------------------------------------------
   WooCommerce's own reveal button is hidden here and the card draws its own.
   Theirs is positioned by rules that outrank anything scoped to this card, and
   it kept landing half its height above the field; ours answers only to the
   selectors below. The password column is sized for it either way. */
/* !important because every ordinary override of this control has lost to a
   WooCommerce rule; the card replaces it outright rather than restyling it. */
body.blklux-theme .blklux-auth .show-password-input { display: none !important; }
body.blklux-theme .blklux-auth .blklux-auth__reveal {
  grid-area: auto;
  align-self: center;
  justify-self: center;
  width: 36px;
  height: 36px;
  margin: 0 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blklux-ash);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--blklux-dur-fast) var(--blklux-ease-out);
}
body.blklux-theme .blklux-auth .blklux-auth__reveal::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--blklux-eye) center / 20px 20px no-repeat;
  mask: var(--blklux-eye) center / 20px 20px no-repeat;
}
body.blklux-theme .blklux-auth .blklux-auth__reveal:hover { color: var(--blklux-gold-light); }
body.blklux-theme .blklux-auth .blklux-auth__reveal:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; border-radius: 50%; }
body.blklux-theme .blklux-auth .blklux-auth__reveal[aria-pressed="true"] { color: var(--blklux-gold); }
body.blklux-theme .blklux-auth .blklux-auth__reveal[aria-pressed="true"]::after {
  -webkit-mask-image: var(--blklux-eye-off);
  mask-image: var(--blklux-eye-off);
}

/* --- the reveal WooCommerce ships, kept out of the way ------------------- */
body.blklux-theme .blklux-auth .show-password-input {
  border: 0;
  background: none;
  color: var(--blklux-ash);
  cursor: pointer;
  transition: color var(--blklux-dur-fast) var(--blklux-ease-out);
}
body.blklux-theme .blklux-auth .show-password-input:hover { color: var(--blklux-gold-light); }
body.blklux-theme .blklux-auth .show-password-input:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; border-radius: 50%; }
body.blklux-theme .blklux-auth .show-password-input::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--blklux-eye) center / 20px 20px no-repeat;
  mask: var(--blklux-eye) center / 20px 20px no-repeat;
}
body.blklux-theme .blklux-auth .show-password-input.display-password::after {
  color: var(--blklux-gold);
  -webkit-mask-image: var(--blklux-eye-off);
  mask-image: var(--blklux-eye-off);
}
body.blklux-theme .blklux-auth .show-password-input.display-password { color: var(--blklux-gold); }
.blklux-auth {
  --blklux-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --blklux-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6.2A9.9 9.9 0 0 1 12 6c6.4 0 10 6 10 6a17 17 0 0 1-3.2 3.9M6.2 7.8A17 17 0 0 0 2 12s3.6 6 10 6a9.9 9.9 0 0 0 4.2-.9'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* --- 3. polish ----------------------------------------------------------- */
/* the submit is the one filled thing on this side of the card */
body.blklux-theme .blklux-auth .blklux-auth__form button.blklux-btn,
body.blklux-theme .blklux-auth .blklux-auth__form button.blklux-btn:hover,
body.blklux-theme .blklux-auth .blklux-auth__form button.blklux-btn:focus {
  background: var(--blklux-gold-gradient);
  color: var(--blklux-gold-ink);
  border-color: transparent;
}
body.blklux-theme .blklux-auth .blklux-auth__form button.blklux-btn:hover { filter: brightness(1.06); }
body.blklux-theme .blklux-auth .blklux-auth__form button.blklux-btn { margin-top: 4px; letter-spacing: 0.1em; }

/* WooCommerce's privacy line is body copy by default; here it is fine print */
body.blklux-theme .blklux-auth .woocommerce-privacy-policy-text p,
body.blklux-theme .blklux-auth .woocommerce-privacy-policy-text {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--blklux-ash);
}
body.blklux-theme .blklux-auth .woocommerce-privacy-policy-text a { color: var(--blklux-gold); text-decoration: underline; text-underline-offset: 3px; }

/* three fields on the sign-up side need a tighter rhythm than two */
.blklux-auth__form--up .blklux-auth__field { margin-bottom: 12px; }
body.blklux-theme .blklux-auth__form--up .blklux-auth__lede { margin-bottom: 18px; }

/* the card's own frame is enough; nothing inside it draws another line */
body.blklux-theme .blklux-auth .blklux-auth__form > p,
body.blklux-theme .blklux-auth .blklux-auth__form > div { border: 0; }

/* The sign-in card opens with "Welcome back" or "Create an account", so the
   theme's page title above it only repeats the browser tab. It is dropped on
   the signed-out account page; a signed-in customer keeps their heading. */
body.blklux-theme.woocommerce-account:not(.logged-in) .entry-header { display: none; }

/* ==========================================================================
   The card sits in the middle of what is left of the screen, and opens rather
   than appearing. One moment, orchestrated: the card rises and fades in, then
   its contents follow a beat later. Nothing moves after that.
   ========================================================================== */

/* Astra puts 60px of margin above and below the content area, which would
   offset the card from the middle; on this page there is nothing else to
   separate it from, so it goes. What is left to centre in is the viewport
   minus our own header, and on a phone minus the bottom app bar too. */
body.blklux-theme.woocommerce-account:not(.logged-in) #primary.content-area,
body.blklux-theme.woocommerce-account:not(.logged-in) .content-area { margin-top: 0; margin-bottom: 0; }
body.blklux-theme.woocommerce-account:not(.logged-in) .entry-content > .woocommerce {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--blklux-auth-chrome, 73px));
  min-height: calc(100svh - var(--blklux-auth-chrome, 73px));
  padding: 24px 0;
}
@media (max-width: 1024px) {
  body.blklux-theme.woocommerce-account:not(.logged-in) .entry-content > .woocommerce { --blklux-auth-chrome: 143px; }
}

/* --- the opening --------------------------------------------------------- */
.blklux-auth.is-enhanced {
  transition: opacity 560ms var(--blklux-ease-out), transform 640ms var(--blklux-ease-out);
}
.blklux-auth.is-enhanced:not(.is-ready) {
  opacity: 0;
  transform: translateY(22px) scale(0.99);
}
.blklux-auth.is-enhanced .blklux-auth__form > *,
.blklux-auth.is-enhanced .blklux-auth__content > * {
  transition: opacity 460ms var(--blklux-ease-out), transform 460ms var(--blklux-ease-out);
}
.blklux-auth.is-enhanced:not(.is-ready) .blklux-auth__form > *,
.blklux-auth.is-enhanced:not(.is-ready) .blklux-auth__content > * {
  opacity: 0;
  transform: translateY(12px);
}
/* a short stagger, not a cascade: six steps of 55ms and it is done */
.blklux-auth.is-enhanced .blklux-auth__form > *:nth-child(1),
.blklux-auth.is-enhanced .blklux-auth__content > *:nth-child(1) { transition-delay: 200ms; }
.blklux-auth.is-enhanced .blklux-auth__form > *:nth-child(2),
.blklux-auth.is-enhanced .blklux-auth__content > *:nth-child(2) { transition-delay: 255ms; }
.blklux-auth.is-enhanced .blklux-auth__form > *:nth-child(3),
.blklux-auth.is-enhanced .blklux-auth__content > *:nth-child(3) { transition-delay: 310ms; }
.blklux-auth.is-enhanced .blklux-auth__form > *:nth-child(4),
.blklux-auth.is-enhanced .blklux-auth__content > *:nth-child(4) { transition-delay: 365ms; }
.blklux-auth.is-enhanced .blklux-auth__form > *:nth-child(5) { transition-delay: 420ms; }
.blklux-auth.is-enhanced .blklux-auth__form > *:nth-child(n+6) { transition-delay: 475ms; }
/* once open, the swap between the two sides owes nothing to the opening */
.blklux-auth.is-enhanced.is-ready .blklux-auth__form > *,
.blklux-auth.is-enhanced.is-ready .blklux-auth__content > * { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .blklux-auth.is-enhanced,
  .blklux-auth.is-enhanced .blklux-auth__form > *,
  .blklux-auth.is-enhanced .blklux-auth__content > * { transition: none; }
  .blklux-auth.is-enhanced:not(.is-ready) { opacity: 1; transform: none; }
  .blklux-auth.is-enhanced:not(.is-ready) .blklux-auth__form > *,
  .blklux-auth.is-enhanced:not(.is-ready) .blklux-auth__content > * { opacity: 1; transform: none; }
}

/* WooCommerce always prints a notices wrapper, empty or not. In a centred grid
   that empty div takes a row and pushes the card off the middle. */
body.blklux-theme.woocommerce-account:not(.logged-in) .entry-content > .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }

/* ==========================================================================
   WooCommerce's password strength meter and its hint are injected as children
   of the field itself. In a pill laid out as icon / input / reveal they became
   grid items in those columns — the hint ended up 46px wide, one word per line,
   and the meter sat on top of the input in its own salmon bar.

   Both now take a row of their own under the field, and the pill relaxes into a
   rounded block while they are there. The meter is coloured by WooCommerce's
   own state classes, in our palette rather than its default pink.
   ========================================================================== */

body.blklux-theme .blklux-auth .blklux-auth__input:has(.woocommerce-password-strength),
body.blklux-theme .blklux-auth .blklux-auth__input:has(.woocommerce-password-hint) {
  border-radius: 22px;
  padding-bottom: 14px;
  align-items: start;
}
/* the field row keeps the height it had before the messages appeared */
body.blklux-theme .blklux-auth .blklux-auth__input:has(.woocommerce-password-strength) > *:not(.woocommerce-password-strength):not(.woocommerce-password-hint),
body.blklux-theme .blklux-auth .blklux-auth__input:has(.woocommerce-password-strength) .password-input > *,
body.blklux-theme .blklux-auth .blklux-auth__input:has(.woocommerce-password-hint) > *:not(.woocommerce-password-strength):not(.woocommerce-password-hint) {
  align-self: center;
}
body.blklux-theme .blklux-auth .woocommerce-password-strength,
body.blklux-theme .blklux-auth .woocommerce-password-hint {
  grid-column: 1 / -1;
  width: auto;
  margin: 0 16px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  background: rgba(255, 255, 255, 0.03);
  color: var(--blklux-ash);
}
/* WooCommerce's own state classes, in our colours */
body.blklux-theme .blklux-auth .woocommerce-password-strength.short,
body.blklux-theme .blklux-auth .woocommerce-password-strength.bad {
  background: rgba(217, 101, 79, 0.12);
  border-color: rgba(217, 101, 79, 0.35);
  color: var(--blklux-ember);
}
body.blklux-theme .blklux-auth .woocommerce-password-strength.good {
  background: rgba(224, 176, 74, 0.12);
  border-color: rgba(224, 176, 74, 0.35);
  color: var(--blklux-warn);
}
body.blklux-theme .blklux-auth .woocommerce-password-strength.strong {
  background: rgba(127, 184, 122, 0.12);
  border-color: rgba(127, 184, 122, 0.35);
  color: var(--blklux-open);
}
/* the hint is advice, not a verdict: quieter, and only while it is needed */
body.blklux-theme .blklux-auth .woocommerce-password-hint {
  background: none;
  border-color: var(--blklux-line);
  color: var(--blklux-ash);
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  font-size: 12px;
}

/* WooCommerce inserts the meter and hint between the field and our reveal, so
   auto-placement pushed the button onto a row of its own below them. Pin it to
   the field's own row and column; it belongs beside the input, not under it. */
body.blklux-theme .blklux-auth .blklux-auth__input .blklux-auth__reveal { grid-row: 1; grid-column: 3; }

/* ==========================================================================
   The card shows one form at a time at every width. Above 880px the panel
   slides and the two forms cross-fade in the same grid cell; below it there is
   no room to slide, so the form that is not wanted is simply not rendered and
   the inline "New here?" / "Already have an account?" links do the swapping.
   Either way a phone shows sign in or sign up, never both stacked.
   ========================================================================== */
@media (max-width: 879px) {
  .blklux-auth.is-enhanced .blklux-auth__form--up { display: none; }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__form--in { display: none; }
  .blklux-auth.is-enhanced.is-signup .blklux-auth__form--up { display: block; }
  /* the divider between the two stacked forms has nothing left to divide */
  .blklux-auth.is-enhanced .blklux-auth__form + .blklux-auth__form { border-top: 0; }
}

/* The hint is a paragraph of advice nobody reads in a field. The meter's own
   verdict — Weak, Medium, Strong — is the part that is actually useful, and
   public.js trims it down to that one word. */
body.blklux-theme .blklux-auth .woocommerce-password-hint { display: none; }

/* ==========================================================================
   My account → Orders.

   WooCommerce ships this as a bordered spreadsheet with a near-white header
   band, which on a black page reads as a strip of daylight. It is a short list
   of a customer's own orders, so it is set as one: no vertical rules, a hairline
   between rows, the order number in gold, the status as a pill that carries its
   own colour, and one filled button per row at most.

   Under 782px the table becomes cards, labelled from the data-title WooCommerce
   already puts on every cell — a five-column table on a phone is unreadable.
   ========================================================================== */

body.blklux-theme.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: none;
  font-size: 15px;
}

/* --- head: labels, not a band ------------------------------------------- */
body.blklux-theme.woocommerce-account .woocommerce-orders-table thead,
body.blklux-theme.woocommerce-account .woocommerce-orders-table thead tr {
  background: none;
}
body.blklux-theme.woocommerce-account .woocommerce-orders-table thead th {
  padding: 0 16px 12px;
  border: 0;
  border-bottom: 1px solid rgba(212, 165, 72, 0.22);
  background: none;
  font-family: var(--blklux-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--blklux-ash);
  white-space: nowrap;
}
body.blklux-theme.woocommerce-account .woocommerce-orders-table thead th:last-child { text-align: right; }

/* --- rows ---------------------------------------------------------------- */
body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody tr {
  background: none;
  transition: background-color var(--blklux-dur) var(--blklux-ease-out);
}
body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody tr:hover { background: rgba(212, 165, 72, 0.04); }
body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody td,
body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody th {
  padding: 18px 16px;
  border: 0;
  border-bottom: 1px solid var(--blklux-line);
  background: none;
  vertical-align: middle;
  text-align: left;
}
body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody tr:last-child th { border-bottom: 0; }

/* --- the cells ----------------------------------------------------------- */
body.blklux-theme .woocommerce-orders-table__cell-order-number { white-space: nowrap; }
body.blklux-theme .woocommerce-orders-table__cell-order-number a {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--blklux-gold);
  text-decoration: none;
}
body.blklux-theme .woocommerce-orders-table__cell-order-number a:hover { color: var(--blklux-gold-light); text-decoration: underline; text-underline-offset: 4px; }

body.blklux-theme .woocommerce-orders-table__cell-order-date { white-space: nowrap; color: var(--blklux-ash); font-size: 14px; }

/* The status is the one word a customer scans for, so it carries colour from
   the row class WooCommerce already sets. No pill: there is no element inside
   the cell to make one from without overriding the whole template. */
body.blklux-theme .woocommerce-orders-table__cell-order-status { font-weight: 600; font-size: 14px; color: var(--blklux-ivory); }
body.blklux-theme .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--blklux-open); }
body.blklux-theme .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
body.blklux-theme [class*="__row--status-blklux-"] .woocommerce-orders-table__cell-order-status { color: var(--blklux-gold); }
body.blklux-theme .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
body.blklux-theme .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: var(--blklux-warn); }
body.blklux-theme .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.blklux-theme .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
body.blklux-theme .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status { color: var(--blklux-ash); }

body.blklux-theme .woocommerce-orders-table__cell-order-total { color: var(--blklux-ash); font-size: 13.5px; white-space: nowrap; }
body.blklux-theme .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  display: inline-block;
  margin-right: 4px;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blklux-ivory);
}

/* --- actions: one filled button at most ---------------------------------- */
body.blklux-theme .woocommerce-orders-table__cell-order-actions { text-align: right; }
body.blklux-theme .woocommerce-orders-table__cell-order-actions .woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 3px 0 3px 8px;
  padding: 0 14px;
  border: 1px solid var(--blklux-line-strong, rgba(212, 165, 72, 0.3));
  border-radius: var(--blklux-r-pill, 999px);
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blklux-gold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--blklux-dur) var(--blklux-ease-out), color var(--blklux-dur) var(--blklux-ease-out), border-color var(--blklux-dur) var(--blklux-ease-out);
}
body.blklux-theme .woocommerce-orders-table__cell-order-actions .woocommerce-button:hover {
  background: rgba(212, 165, 72, 0.1);
  border-color: var(--blklux-gold);
  color: var(--blklux-gold-light);
}
/* paying is the one thing on this page that is waiting on the customer */
body.blklux-theme .woocommerce-orders-table__cell-order-actions .woocommerce-button.pay {
  background: var(--blklux-gold-gradient);
  border-color: transparent;
  color: var(--blklux-gold-ink);
}
body.blklux-theme .woocommerce-orders-table__cell-order-actions .woocommerce-button.pay:hover { filter: brightness(1.06); color: var(--blklux-gold-ink); }
/* cancelling is not something to invite */
body.blklux-theme .woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel { color: var(--blklux-ash); border-color: var(--blklux-line); }
body.blklux-theme .woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel:hover { color: var(--blklux-ember); border-color: rgba(217, 101, 79, 0.45); background: rgba(217, 101, 79, 0.08); }
.woocommerce-orders-table__cell-order-actions .woocommerce-button:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; }

/* --- a phone gets cards, not a spreadsheet ------------------------------- */
@media (max-width: 782px) {
  body.blklux-theme.woocommerce-account .woocommerce-orders-table thead { display: none; }
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody tr {
    display: block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border: 1px solid var(--blklux-line);
    border-radius: var(--blklux-r-lg);
    background: var(--blklux-charcoal);
  }
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody tr:hover { background: var(--blklux-charcoal); }
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody td,
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    text-align: right;
  }
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody td::before,
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody th::before {
    content: attr(data-title);
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blklux-ash);
  }
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody tr td:last-child { border-bottom: 0; }
  body.blklux-theme .woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-bottom: 14px;
  }
  body.blklux-theme .woocommerce-orders-table__cell-order-actions::before { width: 100%; text-align: left; margin-bottom: 4px; }
  body.blklux-theme .woocommerce-orders-table__cell-order-actions .woocommerce-button { margin: 4px 0 0 8px; }
}

/* Two overrides that need !important. The near-white band on the table head and
   the flat colour on the status cell come from a rule this stylesheet cannot
   outrank — a style injected with equal selectors and later source order still
   loses to it. Everything else on this table is ordinary cascade; these two are
   the exceptions, and they are here together so it stays obvious why. */
body.blklux-theme.woocommerce-account .woocommerce-orders-table thead,
body.blklux-theme.woocommerce-account .woocommerce-orders-table thead tr,
body.blklux-theme.woocommerce-account .woocommerce-orders-table thead th { background: transparent !important; }

body.blklux-theme .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--blklux-open) !important; }
body.blklux-theme .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
body.blklux-theme [class*="__row--status-blklux-"] .woocommerce-orders-table__cell-order-status { color: var(--blklux-gold) !important; }
body.blklux-theme .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
body.blklux-theme .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: var(--blklux-warn) !important; }
body.blklux-theme .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.blklux-theme .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
body.blklux-theme .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status { color: var(--blklux-ash) !important; }

/* "Pending payment" broke across two lines in a narrow column; there is room
   on this table, so the status keeps to one. */
body.blklux-theme.woocommerce-account .woocommerce-orders-table__cell-order-status { white-space: nowrap; }
@media (max-width: 782px) {
  body.blklux-theme.woocommerce-account .woocommerce-orders-table__cell-order-status { white-space: normal; }
}

@media (max-width: 782px) {
  /* The generic cell rule spaces a label against its value; the actions cell is
     a label above a group of buttons, so it needs its own say — and enough
     specificity to get it. */
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding-bottom: 14px;
  }
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-actions::before { width: 100%; margin-bottom: 2px; }
  body.blklux-theme.woocommerce-account .woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-actions .woocommerce-button { margin: 0; }
}

/* --- The "updating" veil ---------------------------------------------------- */
/* WooCommerce blocks whatever it is refreshing with blockUI, whose inline style
   is a white sheet at 60% with a grey loader. On a black page that is a flash of
   daylight over the order summary every time the totals change. Same job, our
   colours: the panel dims instead of blanching, and the spinner is a gold ring.
   The inline styles need !important — blockUI writes them onto the element. */
body.blklux-theme .blockUI.blockOverlay {
  background: rgba(8, 8, 8, 0.66) !important;
  opacity: 1 !important;
  cursor: progress;
}
body.blklux-theme .blockUI.blockOverlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid rgba(212, 165, 72, 0.22);
  border-top-color: var(--blklux-gold);
  border-radius: 50%;
  background: none;
  animation: blklux-spin 680ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.blklux-theme .blockUI.blockOverlay::before { animation-duration: 2s; }
}
/* the same treatment for WooCommerce's own inline loader icon */
body.blklux-theme .woocommerce .blockUI.blockOverlay + .loader,
body.blklux-theme .woocommerce-checkout .processing .blockUI.blockOverlay { background: rgba(8, 8, 8, 0.66) !important; }

/* ------------------------------------------------------------------ *
 * Checkout: the order panel
 *
 * Astra styles #order_review_heading as the top of a joined panel —
 * `border-width: 2px 2px 0` — expecting #order_review to close it from
 * below. Our layout puts the two in separate grid rows, so the heading
 * was left as a box with no bottom: the half-border on screen. The
 * panel now carries its own heading (templates/woocommerce/checkout/
 * review-order.php) and the floating one goes, which removes the stray
 * border rather than patching over it.
 * ------------------------------------------------------------------ */
body.blklux-theme .woocommerce-checkout #order_review_heading { display: none; }
/* Astra draws the other half of that same box on the panel — border 0 2px 2px
   and padding 0 2em, the three sides meant to close under the heading. With the
   heading gone the panel supplies its own edge.

   Astra's selector is `form #order_review:not(.elementor-… #order_review)`,
   which the :not() argument lifts to two IDs. The id is repeated below to match
   that, rather than reaching for !important: this is the same property on the
   same element, so it is a specificity argument and should be won on
   specificity. */
body.blklux-theme .woocommerce-checkout #order_review#order_review {
  border: 0;
  padding: var(--blklux-s-5);
}

/* A <caption>, because update_checkout replaces the table and anything outside
   it would be duplicated on the first refresh. */
.blklux-theme .woocommerce-checkout #order_review .blklux-review__title {
  /* The same type as "Billing details" across from it. They are the two section
     headings of one page and were set in different faces at different sizes —
     Cormorant 22 on the left, Manrope 18 on the right. */
  font-family: var(--blklux-font-display);
  font-size: var(--blklux-fs-xl);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* And the same box. Both cards pad 24px, but the billing heading adds 20px of
     its own above the text, so the right column started a line higher. Matching
     the padding, the rule and the space under it puts the two columns' first
     lines on one baseline, which is what reads as the columns being aligned. */
  padding: 20px 0 14px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--blklux-line-soft);
  text-align: left;
  caption-side: top;
}

/* A line of the order: the food, what it is, what it costs, and a way out. */
.blklux-theme .woocommerce-checkout #order_review table.shop_table.blklux-review td.product-name { padding-right: var(--blklux-s-3); }
.blklux-review__line { display: flex; gap: 12px; align-items: flex-start; }
.blklux-review__thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--blklux-r-sm); overflow: hidden; background: var(--blklux-onyx); box-shadow: inset 0 0 0 1px var(--blklux-line-soft); }
.blklux-review__thumb img, .blklux-theme .woocommerce .blklux-review__img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.blklux-review__body { min-width: 0; }
.blklux-review__name { display: block; font-weight: 600; }

/* The price and the remove control share a cell: the number stays the thing
   you read, the × stays quiet until you look for it. */
.blklux-theme .woocommerce-checkout #order_review table.shop_table.blklux-review td.product-total { text-align: right; white-space: nowrap; }
.blklux-review__price { display: inline-block; vertical-align: middle; }
.blklux-review__remove {
  appearance: none;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid var(--blklux-line-soft);
  border-radius: 50%;
  background: transparent;
  color: var(--blklux-ash);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--blklux-dur-fast) var(--blklux-ease-out), border-color var(--blklux-dur-fast) var(--blklux-ease-out), background var(--blklux-dur-fast) var(--blklux-ease-out);
}
.blklux-review__remove:hover, .blklux-review__remove:focus-visible {
  color: var(--blklux-ember);
  border-color: var(--blklux-ember);
  background: rgba(217, 101, 79, 0.12);
}
.blklux-review__remove[disabled] { opacity: 0.45; cursor: progress; }
.blklux-review tr.is-removing { opacity: 0.45; }

/* The crosshair that every other "Use my location" already carried. */
.blklux-checkout-deliver__gps .blklux-icon { width: 18px; height: 18px; margin-right: 8px; }

/* The price belongs on the line its item starts on. A burger with six add-ons
   makes a tall cell, and centring left the number floating opposite the middle
   of the options list instead of opposite the name it prices. */
.blklux-theme .woocommerce-checkout #order_review table.shop_table.blklux-review tbody td { vertical-align: top; }

/* The 24px the two columns were out by.
 *
 * .col2-set is laid out as a grid here, but it still carries WooCommerce's
 * float-era clearfix pseudo-elements. In a grid those are not clearfixes, they
 * are grid items: ::before took the first row to itself and the 24px row-gap
 * pushed the billing card down a row, so the left column started lower than the
 * order panel beside it. A grid has nothing to clear. */
.blklux-theme form.woocommerce-checkout #customer_details.col2-set::before,
.blklux-theme form.woocommerce-checkout #customer_details.col2-set::after { display: none; }

/* ------------------------------------------------------------------ *
 * Order confirmed
 * ------------------------------------------------------------------ */

/* Ivory text on a near-white panel. Astra gives WooCommerce's order headings
 * a light background (#fbfbfb) meant for a light theme, and our ivory type was
 * set on top of it — "Order details" and "Billing address" were legible only
 * by selecting them. They are headings on a dark page, so they are set like the
 * page's other section headings and the background goes. */
body.blklux-theme.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title,
body.blklux-theme.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title,
body.blklux-theme .woocommerce-order h2.woocommerce-order-details__title,
body.blklux-theme .woocommerce-order h2.woocommerce-column__title {
  background: transparent;
  padding: 0;
  margin: 0 0 var(--blklux-s-4);
  border: 0;
  font-family: var(--blklux-font-display);
  font-size: var(--blklux-fs-xl);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--blklux-ivory);
}

/* The confirmation's three actions sit on one row at the default 44px rather
   than three 56px slabs; "Get directions" was wrapping onto two lines inside
   its own button. */
.blklux-confirmation__actions .blklux-btn { white-space: nowrap; }

/* The arrival.
 *
 * One orchestrated sequence, not five separate effects: the seal lands first
 * and everything else follows it up the page in order, so the eye is led from
 * the confirmation to the detail to the thing to do next. Nothing moves after
 * it has arrived, and anyone who has asked for less motion gets the page with
 * no entrance at all rather than a shortened one. */
@keyframes blklux-confirm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body.blklux-theme .woocommerce-order > .woocommerce-thankyou-order-received,
  body.blklux-theme .woocommerce-order > .woocommerce-order-overview,
  .blklux-confirmation > *:not(.blklux-seal) {
    animation: blklux-confirm-rise 520ms var(--blklux-ease-out) both;
  }
  body.blklux-theme .woocommerce-order > .woocommerce-thankyou-order-received { animation-delay: 60ms; }
  body.blklux-theme .woocommerce-order > .woocommerce-order-overview { animation-delay: 150ms; }
  .blklux-confirmation > .blklux-confirmation__title { animation-delay: 300ms; }
  .blklux-confirmation > .blklux-confirmation__lead { animation-delay: 390ms; }
  .blklux-confirmation > .blklux-confirmation__card { animation-delay: 480ms; }
  .blklux-confirmation > .blklux-confirmation__actions { animation-delay: 580ms; }
}

/* The thank-you line is the first thing read, so it is given the page's voice
   instead of a notice box borrowed from a plugin's error styling. */
body.blklux-theme .woocommerce-order > .woocommerce-thankyou-order-received {
  margin: 0 auto var(--blklux-s-5);
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 640px;
  text-align: center;
  font-family: var(--blklux-font-display);
  font-size: var(--blklux-fs-xl);
  color: var(--blklux-ash);
}

/* The payment line belongs with the thank-you above it, not ranged left against
   a centred block. */
body.blklux-theme .woocommerce-order > .woocommerce-order-overview {
  margin: 0 auto var(--blklux-s-5);
  padding: 0;
  border: 0;
  max-width: 640px;
  list-style: none;
  text-align: center;
  color: var(--blklux-ash);
}

/* The order-details table, set like the checkout review it mirrors.
 *
 * WooCommerce renders the options as <ul class="wc-item-meta"> with a <p> per
 * value, which inherits body size — 16px, the same size as the product name, so
 * "Choose size: Double (+$4.00)" shouted as loudly as "Classic Burger". The
 * checkout sets the same information at fs-xs; this matches it, because the two
 * tables show the same order either side of paying. */
body.blklux-theme .woocommerce-table--order-details .wc-item-meta {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: var(--blklux-fs-xs);
  color: var(--blklux-ash);
}
body.blklux-theme .woocommerce-table--order-details .wc-item-meta li { display: flex; gap: 5px; align-items: baseline; margin: 0; }
body.blklux-theme .woocommerce-table--order-details .wc-item-meta li p { margin: 0; display: inline; font-size: inherit; color: inherit; }
body.blklux-theme .woocommerce-table--order-details .wc-item-meta-label {
  font-weight: 600;
  color: var(--blklux-ash-soft);
  font-size: inherit;
}
body.blklux-theme .woocommerce-table--order-details .product-name > .blklux-review__line { align-items: flex-start; }
body.blklux-theme .woocommerce-table--order-details td { vertical-align: top; }
body.blklux-theme .woocommerce-table--order-details .blklux-review__name { font-weight: 600; }
body.blklux-theme .woocommerce-table--order-details .blklux-review__name a { color: var(--blklux-ivory); text-decoration: none; }

/* The page title and the payment line sit above a centred confirmation; ranged
   left they read as belonging to a different page. */
body.blklux-theme.woocommerce-order-received .entry-title { text-align: center; }
/* The payment line is the gateway's own "instructions" setting, which
   WooCommerce prints through wpautop as a bare <p> with no class of its own —
   there is nothing to hook but its position in the order wrapper. */
body.blklux-theme.woocommerce-order-received .woocommerce-order > p {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: var(--blklux-ash);
}

/* ----------------------------------------------------------------- *
 * The petals
 *
 * One burst, once, when the order lands — the only uninvited motion in
 * the whole flow, and it is over in three seconds. Built from a dozen
 * spans so it costs nothing, drawn behind the seal so it never sits on
 * top of anything that has to be read, and not drawn at all for anyone
 * who has asked for less motion.
 * ----------------------------------------------------------------- */
.blklux-petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.blklux-confirmation { position: relative; }
/* Everything except the petal field, which must stay absolute. The rule below
   is as specific as .blklux-petals and comes after it, so without this
   exclusion it reset the field to position: relative and a grid item with no
   content measured 0x0 — fourteen petals animating inside nothing. */
.blklux-confirmation > *:not(.blklux-petals) { position: relative; z-index: 1; }
.blklux-petal {
  position: absolute;
  top: -24px;
  width: 9px;
  height: 14px;
  border-radius: 60% 60% 60% 60% / 70% 70% 40% 40%;
  background: linear-gradient(140deg, var(--blklux-gold-light), var(--blklux-gold));
  opacity: 0;
  animation: blklux-petal-fall var(--dur, 3s) var(--blklux-ease-out) var(--delay, 0s) 1 both;
}
@keyframes blklux-petal-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); }
  12%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(var(--drift, 20px), var(--fall, 420px), 0) rotate(var(--spin, 420deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .blklux-petals { display: none; }
}

/* The "Actions" row in the order table.
 *
 * WooCommerce prints these through the theme's generic .button, so they arrived
 * as two filled slabs in a totals row — louder than the total above them. They
 * are secondary links out of a summary, so they are sized and shaped like every
 * other secondary action in the product. */
body.blklux-theme .woocommerce-order-details .woocommerce-button,
body.blklux-theme .woocommerce-customer-details .woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--blklux-s-4);
  border: 1px solid var(--blklux-line);
  border-radius: var(--blklux-r-md);
  background: transparent;
  color: var(--blklux-gold-light);
  font-family: var(--blklux-font-body);
  font-size: var(--blklux-fs-xs);
  font-weight: 700;
  letter-spacing: var(--blklux-track-button);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  margin: 0 8px 0 0;
  transition: border-color var(--blklux-dur) var(--blklux-ease-out), color var(--blklux-dur) var(--blklux-ease-out), background var(--blklux-dur) var(--blklux-ease-out);
}
body.blklux-theme .woocommerce-order-details .woocommerce-button:hover,
body.blklux-theme .woocommerce-order-details .woocommerce-button:focus-visible {
  border-color: var(--blklux-gold);
  background: rgba(212, 165, 72, 0.08);
  color: var(--blklux-gold-light);
}

/* The three actions under the tracker read left to right from the one you are
   most likely to want. They were three 56px slabs, one of them borderless. */
.blklux-track__actions .blklux-btn,
.blklux-confirmation__actions .blklux-btn { min-height: var(--blklux-touch); }

/* Special offers at checkout, cart and on the receipt. */
.blklux-theme .woocommerce .blklux-was { display: block; margin-bottom: 2px; color: var(--blklux-ash); font-size: 0.82em; font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(156, 149, 138, 0.8); }
.blklux-theme .woocommerce .blklux-now { background: none; text-decoration: none; color: inherit; }
.blklux-theme .woocommerce dl.variation dt.variation-Specialoffer,
.blklux-theme .woocommerce dl.variation dd.variation-Specialoffer,
.blklux-theme .woocommerce dl.variation dd.variation-Specialoffer p { color: var(--blklux-gold); font-weight: 700; }
.blklux-theme .woocommerce tr.blklux-savings th,
.blklux-theme .woocommerce tr.blklux-savings td { color: var(--blklux-gold); font-weight: 700; border-top: 1px dashed var(--blklux-line); }
.blklux-theme .woocommerce tr.blklux-savings .woocommerce-Price-amount { color: var(--blklux-gold); }