/* ============================================================
   NEXTFABRI — WooCommerce bridge styles
   Makes Woo's tables, forms, notices and widgets speak the same
   red-on-black language as css/site.css. Loaded after site.css.
   ============================================================ */

/* body is a flex column, so auto margins on main collapse it to
   shrink-to-fit ( grids with minmax(0,1fr) inside then cramp).
   Full width up to the cap restores the intended container. */
body > main.section {
  width: 100%;
}

/* The gallery main image fades between shots (driven by
   js/theme-cart.js setting inline opacity around the swap). */
#nextfabri-main-img {
  transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  #nextfabri-main-img {
    transition: none;
  }
}

/* ---------- Variation swatches ----------
   pa_color renders as circles (backgrounds set inline from the slug
   map in js/theme-cart.js); .selected gets the red ring. White needs
   its own faint ring to read on the dark panel. */
.color-options {
  gap: 0.75rem;
}

.color-btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid var(--gray-600);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.color-btn:hover {
  transform: scale(1.1);
  border-color: var(--white);
}

.color-btn.selected {
  border-color: var(--red-bright);
  box-shadow: 0 0 0 2px var(--charcoal), 0 0 0 4px var(--red);
}

.color-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: none;
}

.color-btn:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .color-btn.selected {
    animation: nf-size-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ============================================================
   AJAX BLOCKER — Woo veils updating panels with a hardcoded white
   overlay (the flash when toggling ship-to-different). Re-skin it
   to the theme: charcoal veil + red spinner. Theme-adaptive via
   vars; !important beats BlockUI's inline styles.
   ============================================================ */
.blockUI.blockOverlay {
  background-color: var(--charcoal) !important;
  opacity: 0.78 !important;
  cursor: wait;
}

.blockUI.blockOverlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 9999px;
  border: 3px solid var(--gray-800);
  border-top-color: var(--red-bright);
  animation: nf-spin 0.8s linear infinite;
}

@keyframes nf-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blockUI.blockOverlay::before {
    animation: none;
    border-top-color: var(--red);
  }
}

/* ============================================================
   VIEW ORDER — de-green the marks, de-table the details table,
   align columns, billing address only.
   ============================================================ */
.woocommerce-view-order mark.order-number,
.woocommerce-view-order mark.order-date,
.woocommerce-view-order mark.order-status {
  background: none;
  color: var(--white);
}

.woocommerce-view-order mark.order-number {
  color: var(--red-bright);
}

.woocommerce .woocommerce-order-details table.shop_table {
  border: 0;
  background: none;
}

.woocommerce .woocommerce-order-details table.shop_table th,
.woocommerce .woocommerce-order-details table.shop_table td {
  border: 0;
  padding: 1rem 0;
  vertical-align: baseline;
}

.woocommerce .woocommerce-order-details table.shop_table th:first-child,
.woocommerce .woocommerce-order-details table.shop_table td:first-child {
  text-align: left;
}

.woocommerce .woocommerce-order-details table.shop_table th:last-child,
.woocommerce .woocommerce-order-details table.shop_table td:last-child {
  text-align: right;
}

.woocommerce .woocommerce-order-details table.shop_table tr.order-total th,
.woocommerce .woocommerce-order-details table.shop_table tr.order-total td {
  border-top: 1px solid var(--gray-800);
  padding-top: 1.1rem;
}

/* Billing + shipping side by side on view-order. */
.woocommerce-view-order .woocommerce-columns.woocommerce-columns--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (max-width: 640px) {
  .woocommerce-view-order .woocommerce-columns.woocommerce-columns--2 {
    grid-template-columns: 1fr;
  }
}

.woocommerce-view-order .woocommerce-column h2 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0 0 1rem;
}

.woocommerce-view-order .woocommerce-column address {
  font-style: normal;
  color: var(--gray-400);
  font-size: 0.9rem;
  line-height: 1.7;
  border: 1px solid var(--gray-800);
  background: var(--charcoal);
  padding: 1.25rem;
}

.woocommerce-view-order .woocommerce-order-details__title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0 0 1.25rem;
}

/* ============================================================
   MOBILE HERO — the 50svh band + pill clearance reads oversized on
   phones. Slimmer band, same composition (mark/waves derive from
   --logo-w and stay glued).
   ============================================================ */
@media (max-width: 768px) {
  .hero {
    min-height: 36svh;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
    gap: 1rem;
  }
}

/* ============================================================
   RAIL CARD HOVER — card pops up, back shot crossfades in.
   .nd-slide's own transform belongs to the carousel JS, so the pop
   lives on the inner link. Hover-capable pointers only; still page
   for reduced-motion users.
   ============================================================ */
.newdrop-carousel .nd-hero-link {
  position: relative;
}

.newdrop-carousel .nd-hero-link .nd-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .newdrop-carousel .nd-hero-link {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  }

  .newdrop-carousel .nd-hero-link .nd-back {
    transition: opacity 0.35s ease;
  }

  .newdrop-carousel .nd-slide:hover .nd-hero-link,
  .newdrop-carousel .nd-slide:focus-within .nd-hero-link {
    transform: translateY(-16px) scale(1.08);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
  }

  .newdrop-carousel .nd-slide:hover .nd-back,
  .newdrop-carousel .nd-slide:focus-within .nd-back {
    opacity: 1;
  }
}

/* ============================================================
   HOMEPAGE RAIL BACKDROP — red smoke behind transparent product
   shots only (cutout flats). Photographic JPEG backgrounds stay
   clean; the .has-smoke class is decided per image in
   front-page.php via nextfabri_image_has_alpha().
   ============================================================ */
.newdrop-carousel .nd-stage {
  background-color: transparent;
}

/* Shared smoke treatment: rails, shop-grid cards, product gallery and
   similar rail — behind transparent cutout shots only. */
.newdrop-carousel .nd-hero-link.has-smoke,
.product-media.has-smoke {
  background-color: #0a0a0a;
  background-image: url("../assets/carousel-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   SIZE OPTIONS — sliding pill
   The sizing row becomes a pill track (bordered, rounded): buttons
   go transparent, and one red blob glides under the chosen size
   (theme-cart.js positions the .size-pill via offsetLeft/width).
   Works in both themes off the shared vars.
   ============================================================ */
.size-options {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--gray-800);
  border-radius: 9999px;
  max-width: 100%;
  isolation: isolate;
}

.size-btn {
  position: relative;
  z-index: 1;
  min-width: 2.75rem;
  margin: 0;
  padding: 0.55rem 0.9rem;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  color: var(--gray-400);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.size-btn:not(.selected):not(:disabled):hover {
  color: var(--white);
}

.size-btn.selected {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

.size-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.size-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 9999px;
  background: var(--red-bright);
  z-index: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
  will-change: transform, width;
}

.size-pill.is-hidden {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .size-pill {
    transition: none;
  }
}

/* Light theme: the old hover rule forced white text, which vanishes
   on the pale track — hover reads as deep red ink instead. */
html[data-theme="light"] .size-btn:not(.selected):not(:disabled):hover {
  color: var(--red-dark) !important;
}

html[data-theme="light"] .size-btn.selected {
  color: #fff !important;
}

/* ---------- Checkout: district-keyed shipping ----------
   One rate auto-applies per district, so Woo's radio method list is
   redundant — the order-review shipping line carries the decision. */
.woocommerce-checkout #shipping_method,
.woocommerce-checkout p.woocommerce-shipping-destination {
  display: none !important;
}

/* The summary's pending line: district options spelled out. */
.woocommerce-checkout .ship-pending {
  color: var(--gray-400);
  font-size: 0.8rem;
  line-height: 1.6;
}

.woocommerce-checkout .ship-zone {
  display: block;
  color: var(--gray-400);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

/* ============================================================
   WORDPRESS IMAGE ATTRIBUTES — wp_get_attachment_image prints
   width/height attributes; without an author-level height they
   resolve to fixed px and defeat the aspect-ratio boxes the static
   build's bare <img> tags relied on (900px-tall carousel slides).
   Rail slides keep the original 400px vertical mass while the
   card width slims to 340px; product thumbs stay ratio-driven.
   ============================================================ */
.nd-slide img.nd-hero {
  height: min(400px, 70vw);
  object-fit: contain;
}

.product-thumb img {
  height: auto;
}

/* ============================================================
   MOBILE ACCOUNT ENTRY — mirrors the static build: the Account
   link belongs to the mobile dropdown only. Desktop keeps the
   account icon in the action cluster (the 769px rule in site.css
   hides the icon on mobile, where the menu item takes over).
   ============================================================ */
@media (min-width: 769px) {
  .main-nav nav ul li a[href*="my-account"] {
    display: none;
  }
}

/* ---------- Woo buttons ride the theme .btn ---------- */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .wc-block-components-button {
  background-color: var(--red);
  border: 1px solid var(--red);
  color: var(--white);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82rem;
  padding: 1rem 2rem;
  border-radius: 0;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

html[data-theme="light"] .woocommerce button.button,
html[data-theme="light"] .woocommerce a.button,
html[data-theme="light"] .woocommerce input.button,
html[data-theme="light"] .woocommerce #respond input#submit {
  color: #ffffff;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
  border-top: 2px solid var(--red);
  color: var(--white);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}

.woocommerce-error {
  list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--red-bright);
}

.woocommerce-error {
  border-top-color: var(--red-bright);
}

/* ---------- Forms (mirror static checkout/account design) ----------
   Labels sit ABOVE full-width fields; radios/checkboxes stay inline.
   Covers checkout, edit-account, edit-address, login, register,
   lost-password in one system. */
.woocommerce form .form-row {
  margin: 0 0 1rem;
  padding: 0;
}

.woocommerce form .form-row label {
  display: block;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--gray-400);
  margin-bottom: 0.45rem;
  line-height: 1.5;
}

.woocommerce form .form-row label .required {
  color: var(--red-bright);
  text-decoration: none;
}

.woocommerce form .form-row .woocommerce-input-wrapper {
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  width: 100%;
  background: var(--charcoal);
  border: 1px solid var(--gray-600);
  color: var(--white);
  border-radius: 0;
  padding: 0.75rem;
  min-height: 2.9rem;
  font-size: 1rem;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"] {
  width: auto;
  min-height: 0;
  accent-color: var(--red);
}

.woocommerce form .form-row textarea {
  resize: vertical;
  min-height: 7rem;
  font-family: var(--font-body);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

/* Inline helper text under a field (display-name note etc.). */
.woocommerce form .form-row .description,
.woocommerce form .form-row em {
  display: block;
  color: var(--gray-600);
  font-size: 0.78rem;
  font-style: normal;
  margin-top: 0.4rem;
}

/* Password fieldset on Account Details (unstyled browser box by default). */
.woocommerce fieldset {
  border: 1px solid var(--gray-800);
  padding: 1.5rem;
  margin: 2rem 0 1.5rem;
  min-width: 0;
}

.woocommerce fieldset legend {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 0 0.6rem;
}

/* Save buttons span the form like the static submit. */
.woocommerce form .button[name="save_account_details"],
.woocommerce form .button[name="save_address"],
.woocommerce form .button[name="login"],
.woocommerce form .button[name="register"],
.woocommerce form .button[name="reset_password"] {
  width: 100%;
  margin-top: 0.5rem;
}

.select2-dropdown,
.select2-container--default .select2-results__option {
  background: var(--charcoal);
  color: var(--white);
  border-color: var(--gray-800);
}

/* Select2 (country fields): Woo pins the dropdown arrow to the box
   top and lets the rendered line ride high — center both in the
   taller themed field. */
.select2-container--default .select2-selection--single {
  position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  margin: auto 0 !important;
  transform: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 22px;
}

/* ---------- Single product: variation form ---------- */
/* The attribute <select> stays functional but hidden; buttons in
   .size-options (built by js/theme-cart.js) are the visible UI. */
.product-info-detail table.variations {
  margin-bottom: 0;
}

.product-info-detail .single_variation_wrap .woocommerce-variation-price,
.product-info-detail .single_variation_wrap .woocommerce-variation-availability {
  display: none; /* price mirrors into .price-now via JS */
}

.product-info-detail form.cart {
  margin: 0;
}

/* Buy row shares the row evenly, like the static build. */
.product-detail .buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.product-detail .buy-row .btn,
.product-detail .buy-row .single_add_to_cart_button {
  flex: 1 1 12rem;
  text-align: center;
}

.product-detail .buy-now {
  background-color: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.product-detail .buy-now:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}

html[data-theme="light"] .product-detail .buy-now {
  background-color: var(--white);
  border-color: var(--white);
  color: #ffffff;
}

html[data-theme="light"] .product-detail .buy-now:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

/* Quantity stepper restyles Woo's .quantity into the joined control. */
.product-info-detail .quantity.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  background: var(--charcoal);
  border: 1px solid var(--gray-600);
  float: none !important;
  margin: 0 0 1rem !important;
}

.product-info-detail .quantity .qty-btn {
  width: 3rem;
  min-height: 2.9rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.product-info-detail .quantity .qty-btn:hover:not(:disabled) {
  background: var(--red-dark);
}

.product-info-detail .quantity .qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.product-info-detail .quantity input.qty {
  width: 3.25rem;
  padding: 0.6rem 0.25rem;
  border: 0;
  border-left: 1px solid var(--gray-600);
  border-right: 1px solid var(--gray-600);
  background: transparent;
  color: var(--white);
  font-size: 1rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-info-detail .quantity input.qty::-webkit-outer-spin-button,
.product-info-detail .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes nf-qty-pulse {
    0%   { box-shadow: 0 0 0 0 var(--red); border-color: var(--gray-600); }
    35%  { box-shadow: 0 0 0 4px rgba(224, 23, 34, 0.28); border-color: var(--red); }
    100% { box-shadow: 0 0 0 0 rgba(224, 23, 34, 0); border-color: var(--gray-600); }
  }

  .product-info-detail .quantity.qty-stepper.qty-bump {
    animation: nf-qty-pulse 0.7s ease-out;
  }
}

/* Woo appends its own "View cart" link after every AJAX add; the drawer
   + toast already cover that job, so keep it out of the buy row. */
.product-detail .buy-row .added_to_cart {
  display: none;
}

/* Reset-variations link stays quiet. */
.product-info-detail .reset_variations {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* ---------- Cart drawer mini-cart ----------
   Row: thumb | name+meta | corner (qty×price over remove).
   No subtotal row, no buttons — the drawer footer owns those; the
   total stays hidden in markup for the footer-total sync. */
.cart-drawer .cart-items .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-drawer .cart-items .woocommerce-mini-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-800);
  padding-bottom: 1rem;
}

.cart-drawer .cart-items .mini-thumb img {
  width: 56px;
  height: 72px;
  object-fit: cover;
  display: block;
}

.cart-drawer .cart-items .mini-info {
  min-width: 0;
}

.cart-drawer .cart-items .mini-name {
  display: block;
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.45;
}

.cart-drawer .cart-items .mini-info .variation {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--gray-600);
}

.cart-drawer .cart-items .mini-info .variation dt,
.cart-drawer .cart-items .mini-info .variation dd {
  display: inline;
  margin: 0;
  padding: 0;
}

.cart-drawer .cart-items .mini-info .variation dd + dt::before {
  content: " · ";
}

/* Qty×price pinned to the row's top-right corner, remove under it. */
.cart-drawer .cart-items .mini-qty {
  grid-column: 3;
  grid-row: 1;
  color: var(--gray-400);
  font-size: 0.75rem;
  white-space: nowrap;
  padding-top: 0.1rem;
}

.cart-drawer .cart-items .mini-thumb {
  grid-column: 1;
  grid-row: 1;
}

.cart-drawer .cart-items .mini-info {
  grid-column: 2;
  grid-row: 1;
}

/* Remove sits under the price, quiet until hovered. */
.cart-drawer .cart-items .woocommerce-mini-cart-item a.remove {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--gray-600) !important;
  font-size: 1rem;
  line-height: 1;
  text-align: right;
}

.cart-drawer .cart-items .woocommerce-mini-cart-item a.remove:hover {
  color: var(--red-bright) !important;
  background: none !important;
}

.cart-drawer .cart-items .woocommerce-mini-cart-item .remove {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  margin-top: 0.35rem;
}

.cart-drawer .cart-items .woocommerce-mini-cart__empty-message {
  color: var(--gray-600);
  text-align: center;
  margin-top: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
}

/* ---------- Cart / checkout pages ---------- */
.woocommerce table.shop_table {
  width: 100%;
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
  border-radius: 0;
  color: var(--white);
}

.woocommerce table.shop_table th {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  color: var(--gray-400);
}

.woocommerce table.shop_table td {
  border-top: 1px solid var(--gray-800);
}

.woocommerce table.shop_table a {
  color: var(--white);
}

.woocommerce table.shop_table a.remove {
  color: var(--gray-400) !important;
}

.woocommerce table.shop_table a.remove:hover {
  color: var(--red-bright) !important;
  background: none !important;
}

/* Cart table cells: Woo's own layout CSS is dequeued (theme styles
   everything), so constrain thumbs + inputs here. */
.woocommerce table.cart img {
  width: 96px;
  max-width: 96px;
  height: auto;
  display: block;
}

.woocommerce table.cart td {
  padding: 1.25rem 0.75rem;
  vertical-align: middle;
}

.woocommerce table.cart .quantity input.qty {
  background: var(--black);
  border: 1px solid var(--gray-600);
  color: var(--white);
  border-radius: 0;
  padding: 0.6rem 0.4rem;
  width: 3.5rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce table.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce table.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
#order_review_heading,
.woocommerce-checkout-review-order,
.woocommerce-checkout #payment {
  background: var(--charcoal) !important;
  border: 1px solid var(--gray-800);
  border-radius: 0 !important;
  color: var(--white);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--gray-800);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--gray-800);
  color: var(--gray-400);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--gray-800);
}

.woocommerce table.shop_table .amount,
.woocommerce .cart_totals .amount {
  color: var(--red-bright);
}

.woocommerce a.checkout-button {
  display: block;
  text-align: center;
}

/* Coupon row inline. */
.woocommerce table.shop_table td.actions .coupon {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.woocommerce table.shop_table td.actions .coupon input {
  width: 11rem !important;
}

/* ---------- Account page: modern tabbed access ----------
   Login and Register share the panel behind a pill segmented
   control; one pane at a time, pane swap animates in. Colors ride
   the theme vars, so both dark and light keep their palette. */
.account-panel .u-columns {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.account-panel .acct-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--gray-800);
  border-radius: 9999px;
  margin: 0 0 1.5rem;
}

.account-panel .acct-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gray-400);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.account-panel .acct-tab:hover {
  color: var(--white);
}

.account-panel .acct-tab.is-active {
  background: var(--red-bright);
  color: #fff;
  cursor: default;
}

.account-panel .acct-tab:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Panes: hidden until their tab opens them; the entrance rides the
   site's easing. Reduced motion gets the swap without the move. */
.account-panel .acct-pane {
  display: none;
  min-width: 0;
  width: 100%;
}

.account-panel .acct-pane.is-active {
  display: block;
  animation: acct-pane-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes acct-pane-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-panel .acct-pane.is-active {
    animation: none;
  }
}

/* Tab labels carry the titles — the panes' headings stay for
   screen readers only. */
.account-panel .acct-pane .contact-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The panel is the box here, so the forms sit borderless inside it. */
.account-panel form.login,
.account-panel form.register {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

.account-panel .woocommerce-button.button {
  width: 100%;
  margin-top: 0.5rem;
}

.account-panel .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-400);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
}

.account-panel .lost_password a,
.account-panel .woocommerce-privacy-policy-text a {
  color: var(--red-bright);
  font-size: 0.85rem;
}

.account-panel .woocommerce-privacy-policy-text {
  color: var(--gray-600);
  font-size: 0.8rem;
}

.account-panel .show-password-input {
  color: var(--gray-400);
}

/* Woo's password-visibility button used to be a font-icon blob (the
   "white dot"): its glyph never shipped (no icon font), so it drew as
   a 3px white speck below the fields. Now a real eye toggle pinned
   inside the row's input, on both login and register.

   Anchored to span.password-input (input + button only), never to the
   whole <p> row — the strength meter and hint text Woo injects under
   the input grow the row, which used to drag the eye down with it. */
.woocommerce-account p.woocommerce-form-row:has(.show-password-input) .input-text {
  padding-right: 2.6rem;
}

.woocommerce-account span.password-input {
  position: relative;
  display: block;
}

.woocommerce-account .show-password-input {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}

.woocommerce-account .show-password-input::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: var(--gray-400);
  transition: background-color 0.2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-account .show-password-input:hover::before,
.woocommerce-account .show-password-input[aria-pressed="true"]::before {
  background-color: var(--white);
}

/* Confirm-password mismatch state (client check blocks submit). */
.nf-pw-mismatch .input-text[aria-invalid="true"] {
  border-color: var(--red-bright);
  outline-color: var(--red-bright);
}

.account-panel .required {
  color: var(--red-bright);
}

/* ---------- My Account ---------- */
.woocommerce .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border: 1px solid var(--gray-800);
  background: var(--charcoal);
}

.woocommerce .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.8rem 1.1rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
}

.woocommerce .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--red-bright);
}

.woocommerce .woocommerce-MyAccount-content {
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
  padding: 2rem;
}

.woocommerce form.login,
.woocommerce form.register {
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
  border-radius: 0;
}

/* ---------- Pagination / result count ---------- */
.woocommerce nav.woocommerce-pagination ul {
  border: 1px solid var(--gray-800);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--white);
  background: var(--charcoal);
  padding: 0.8rem 1.1rem;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--red-dark);
  color: #fff;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  color: var(--gray-400);
}

/* ---------- Price bits ---------- */
.woocommerce .price,
.woocommerce .price .amount {
  color: var(--red-bright);
}

.woocommerce div.product p.price {
  font-size: 1.5rem;
}

.woocommerce span.onsale {
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Page body rhythm for editor content ---------- */
.page-body > *:first-child {
  margin-top: 0;
}

.page-body h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.1rem;
  margin: 2.5rem 0 0.75rem;
}

.page-body h2 span {
  color: var(--red-bright);
}

.page-body p {
  color: var(--gray-400);
  max-width: 800px;
}

/* Buttons keep their own colors — this must not override .btn. */
.page-body p a:not(.btn),
.page-body li a:not(.btn) {
  color: var(--red-bright);
}

/* Cart page line name + line total stay white (links and the
   static red price otherwise paint them brand red). */
.cart-line-info h3,
.cart-line-info h3 a {
  color: var(--white);
}

.cart-line-info h3 a:hover {
  color: var(--red-bright);
}

.cart-line .cart-line-price {
  color: var(--white);
}

/* ============================================================
   CART PAGE — steppers + panel actions.
   (Line rows, summary card and thumbs live in css/site.css under
   .cart-line / .cart-summary, shared with the static build.)
   ============================================================ */
.cart-line .quantity {
  display: inline-flex;
  align-items: stretch;
  background: var(--black);
  border: 1px solid var(--gray-600);
  margin: 0;
  float: none !important;
}

.cart-line .quantity .qty-btn {
  width: 2.2rem;
  min-height: 2.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cart-line .quantity .qty-btn:hover:not(:disabled) {
  background: var(--red-dark);
  color: #fff;
}

.cart-line .quantity .qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cart-line .quantity input.qty {
  min-width: 2.2rem;
  width: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--gray-600);
  border-right: 1px solid var(--gray-600);
  background: transparent;
  color: var(--white);
  font-size: 0.9rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0.4rem 0.2rem;
}

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

/* Steppers auto-submit via JS; the button stays for no-JS/at. */
.cart-panel-actions [name="update_cart"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   CHECKOUT — static-build look over Woo's native form:
   panel on the left, sticky order summary on the right.
   ============================================================ */
form.checkout.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 2.5rem;
  align-items: start;
}

#customer_details {
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
  padding: 2rem;
  min-width: 0;
}

#customer_details h3,
.woocommerce-checkout h3 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0 0 1.1rem;
}

#customer_details .col-1,
#customer_details .col-2,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  float: none !important;
  width: auto !important;
}

#customer_details .col-2 {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-800);
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none;
  width: 100%;
}

@media (min-width: 640px) {
  .woocommerce-checkout .form-row-first {
    float: left;
    width: 48%;
  }

  .woocommerce-checkout .form-row-last {
    float: right;
    width: 48%;
  }

  .woocommerce-checkout .clear {
    clear: both;
  }
}

#order_review_heading {
  display: none;
}

#order_review.woocommerce-checkout-review-order {
  position: sticky;
  top: 6rem;
  padding: 2rem;
}

#order_review .shop_table {
  border: 0;
  background: none;
  margin-bottom: 1.25rem;
}

#order_review .shop_table td,
#order_review .shop_table th {
  border: 0;
  padding: 0.45rem 0;
}

#order_review .product-name {
  color: var(--gray-400);
  font-size: 0.85rem;
}

#order_review .product-total,
#order_review .cart-subtotal td,
#order_review .shipping td,
#order_review .order-total td {
  text-align: right;
}

#order_review tfoot th {
  text-align: left;
}

#order_review tfoot td {
  color: var(--white);
}

#order_review tfoot td .amount {
  color: var(--white);
}

#order_review .order-total td {
  color: var(--red-bright);
  font-size: 1.05rem;
}

#order_review .order-total td .amount {
  color: var(--red-bright);
}

#order_review .order-total th,
#order_review .order-total td {
  border-top: 1px solid var(--gray-800);
  padding-top: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#order_review .woocommerce-checkout-payment {
  background: none !important;
  border: 0;
  padding: 0;
}

#order_review #place_order {
  width: 100%;
  padding: 1.1rem 2rem;
  margin-top: 1.5rem;
}

/* Breathing room between the privacy text and the button. */
#order_review .form-row.place-order {
  margin-top: 1.5rem;
}

/* Payment methods read as the static radio rows. */
#order_review .wc_payment_method {
  margin-bottom: 0.7rem;
}

#order_review .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--white);
  cursor: pointer;
}

#order_review .wc_payment_method > label img {
  max-height: 1.6rem;
}

#order_review input[name="payment_method"] {
  accent-color: var(--red);
  width: 1rem;
  height: 1rem;
  flex: none;
}

#order_review .payment_box {
  margin: 0.6rem 0 1rem;
}

.checkout-hint {
  color: var(--gray-600);
  font-size: 0.78rem;
  margin: 1rem 0 0;
}

#order_review .product-cell {
  padding: 0;
  border: 0;
}

#order_review .summary-line {
  margin: 0;
}

/* Variation meta renders as a dl; keep it on one quiet line. */
#order_review .summary-meta dl.variation,
#order_review .summary-meta .variation {
  margin: 0;
  padding: 0;
}

#order_review .summary-meta dt,
#order_review .summary-meta dd {
  display: inline;
  margin: 0;
  padding: 0;
}

#order_review .summary-meta dd + dt::before {
  content: " · ";
}

#order_review .summary-name .product-quantity {
  color: var(--gray-400);
  font-weight: 400;
}

/* COD needs no explainer — the method name says it all. Scoped to
   cash-on-delivery so future gateways keep their descriptions.
   !important beats Woo's payment JS, which forces the selected
   method's box open via an inline style. */
#order_review .payment_method_cod .payment_box {
  display: none !important;
}

.checkout-back {
  display: block;
  margin-top: 2rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-400);
}

.checkout-back:hover {
  color: var(--red-bright);
}

@media (max-width: 900px) {
  form.checkout.checkout {
    grid-template-columns: minmax(0, 1fr);
  }

  #order_review.woocommerce-checkout-review-order {
    position: static;
  }
}

/* ============================================================
   ORDER RECEIVED — success panel, meta grid, details, addresses.
   ============================================================ */
.thankyou-panel {
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
  border-top: 2px solid var(--red);
  padding: 2.5rem;
  max-width: 900px;
}

.thankyou-lede {
  color: var(--gray-400);
  font-size: 1.05rem;
  max-width: 56ch;
}

.thankyou-lede strong {
  color: var(--white);
}

.thankyou-meta {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--gray-800);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem 2rem;
}

.thankyou-meta li {
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-600);
}

.thankyou-meta li strong {
  display: block;
  margin-top: 0.3rem;
  color: var(--white);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
}

.thankyou-details {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-800);
}

.thankyou-details h2 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0 0 1.25rem;
}

.thankyou-details .woocommerce-table--order-details {
  margin-bottom: 2rem;
}

.thankyou-details .woocommerce-customer-details .woocommerce-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 640px) {
  .thankyou-details .woocommerce-customer-details .woocommerce-columns {
    grid-template-columns: 1fr;
  }
}

.thankyou-details address {
  font-style: normal;
  color: var(--gray-400);
  font-size: 0.9rem;
  line-height: 1.7;
  border: 1px solid var(--gray-800);
  padding: 1.25rem;
}

.thankyou-actions {
  margin: 2.5rem 0 0;
}

/* ============================================================
   MY ACCOUNT DASHBOARD — sidebar card + panels, downloads gone.
   ============================================================ */
/* Logged-in dashboard: sidebar + content. Scoped with :has() so the
   logged-out login layout (a single .account-layout child) is never
   squeezed into the sidebar column. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 860px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.woocommerce .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
}

.woocommerce .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
}

.woocommerce .woocommerce-MyAccount-navigation ul li {
  margin: 0;
}

.woocommerce .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.8rem 1rem;
  color: var(--gray-400);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--white);
  background: var(--gray-800);
}

.woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--red-bright);
  border-left-color: var(--red);
  background: rgba(224, 23, 34, 0.07);
}

.woocommerce .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  background: var(--charcoal);
  border: 1px solid var(--gray-800);
  padding: 2rem;
  min-width: 0;
}

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

.woocommerce .woocommerce-MyAccount-content strong,
.woocommerce .woocommerce-MyAccount-content b {
  color: var(--white);
}

.woocommerce .woocommerce-MyAccount-content h2,
.woocommerce .woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0 0 1.1rem;
}

.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 640px) {
  .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

.woocommerce .woocommerce-MyAccount-content address {
  font-style: normal;
  color: var(--gray-400);
  font-size: 0.9rem;
  line-height: 1.7;
}

.woocommerce table.my_account_orders td,
.woocommerce table.my_account_orders th {
  padding: 0.9rem 0.75rem;
  vertical-align: middle;
  text-align: left;
}

.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-number {
  white-space: nowrap;
}

.woocommerce table.my_account_orders .amount {
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Let rows wrap instead of squeezing into one unreadable line. */
  .woocommerce table.my_account_orders,
  .woocommerce table.my_account_orders tbody,
  .woocommerce table.my_account_orders tr,
  .woocommerce table.my_account_orders td {
    display: block;
    width: 100%;
  }

  .woocommerce table.my_account_orders thead {
    display: none;
  }

  .woocommerce table.my_account_orders tr {
    border: 1px solid var(--gray-800);
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
  }

  .woocommerce table.my_account_orders td {
    border: 0;
    padding: 0.4rem 0;
  }

  .woocommerce table.my_account_orders td::before {
    content: attr(data-title) ": ";
    color: var(--gray-600);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
  }
}

.woocommerce table.my_account_orders .button {
  padding: 0.6rem 1.2rem;
  font-size: 0.72rem;
}

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