/**
 * Warleague design system over WooCommerce's store surfaces (ADR-0082).
 *
 * Enqueued by WordPressDownloads only on WooCommerce pages (product, shop,
 * cart, checkout, and the My-Account area) — ordinary pages, the front page
 * and get-warleague never load it. Values mirror the FE theme.ts tokens; a
 * change there is a change here. Everything is scoped under WooCommerce's own
 * body/wrapper classes.
 */

body.woocommerce,
body.woocommerce-page {
  --wl-red: #9d2211;
  --wl-red-active: #7a1a0d;
  --wl-gold: #cda572;
  --wl-gold-bright: #e6af1e;
  --wl-bg: #181818;
  --wl-band: #141414;
  --wl-card: #1b1b1b;
  --wl-hairline: #303030;
  --wl-hairline-soft: #262626;
  --wl-ink: #ffffff;
  --wl-body: #bcbcbc;
  --wl-muted: #888888;
  --wl-display: 'Bebas Neue', Impact, sans-serif;
  --wl-sans: 'Source Code Pro', ui-monospace, monospace;
}

/* ---- Layout: summary bottom-aligns with the image (desktop) ----------- */

/* Replace WooCommerce's float columns with a grid so the summary column can
   stretch to the gallery's height and pin its content (title … category) to
   the image's bottom edge — the free space sits above the title. Mobile keeps
   WooCommerce's stacked layout untouched. */
@media (min-width: 769px) {
  .woocommerce div.product.type-product {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    column-gap: 4%;
  }

  .woocommerce div.product.type-product > * {
    grid-column: 1 / -1;
  }

  .woocommerce div.product.type-product > div.images {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .woocommerce div.product.type-product > div.summary {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .woocommerce div.product.type-product > div.summary > .product_meta {
    margin-bottom: 0;
  }
}

/* ---- Typography ------------------------------------------------------- */

.woocommerce div.product .product_title {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wl-ink);
  line-height: 1;
  margin: 0 0 12px;
}

.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--wl-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wl-muted);
  /* padding (not margin) so it can't collapse against the content top, and
     !important because WooCommerce's own margin shorthand loads after ours. */
  padding-top: 40px !important;
  margin-bottom: 28px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--wl-muted);
  text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--wl-gold);
}

/* ---- Price ------------------------------------------------------------ */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  font-family: var(--wl-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.5px;
  color: var(--wl-gold-bright);
}

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
  color: var(--wl-muted);
  opacity: 1;
}

/* ---- Buttons — the DS red CTA, square and letterspaced ---------------- */

/* WooCommerce's own sheet (and the theme kit) may load after this one, so the
   brand colors are asserted with !important — the same convention the site's
   hand-authored Kit CSS uses throughout. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce ul.products li.product .button,
.woocommerce .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
  font-family: var(--wl-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--wl-red) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 13px 22px;
  transition: background 120ms ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover {
  color: #fff !important;
  background: var(--wl-red-active) !important;
}

/* The wpcbn "Buy now" companion button steps back to an outline so one CTA
   leads. */
.woocommerce button.wpcbn-btn,
.woocommerce a.wpcbn-btn {
  background: transparent !important;
  border: 1px solid var(--wl-hairline) !important;
  color: var(--wl-body) !important;
}

.woocommerce button.wpcbn-btn:hover,
.woocommerce a.wpcbn-btn:hover {
  background: transparent !important;
  border-color: var(--wl-gold) !important;
  color: var(--wl-ink) !important;
}

/* ---- The purchase form ------------------------------------------------ */

.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}

/* WooCommerce's clearfix pseudo-elements become zero-width flex items and the
   flex gap after them indents the first button — drop them (its sheet loads
   after ours, hence the !important). */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
  content: none !important;
  display: none !important;
}

.woocommerce div.product form.cart div.quantity {
  margin: 0;
}

.woocommerce .quantity .qty {
  font-family: var(--wl-sans);
  font-size: 15px;
  color: var(--wl-ink);
  background: var(--wl-band);
  border: 1px solid var(--wl-hairline);
  border-radius: 0;
  padding: 11px 6px;
  width: 64px;
}

.woocommerce .quantity .qty:focus {
  border-color: var(--wl-gold-bright);
  outline: none;
}

/* Free downloadable products need no quantity chooser. */
.woocommerce div.product.downloadable.virtual form.cart div.quantity {
  display: none;
}

/* The two purchase buttons share the row at equal width; the PayPal smart
   button (which scales with its container) spans exactly both buttons plus
   the gap between them. */
.woocommerce div.product form.cart .button {
  flex: 1 1 0;
  max-width: 220px;
  text-align: center;
}

.woocommerce div.product .ppc-button-wrapper {
  max-width: 452px; /* 2 × 220px buttons + the 12px gap */
}

/* On small screens the buttons and PayPal fill the column. */
@media (max-width: 640px) {
  .woocommerce div.product form.cart .button,
  .woocommerce div.product .ppc-button-wrapper {
    max-width: none;
  }
}

/* ---- Product gallery -------------------------------------------------- */

.woocommerce div.product div.images img {
  background: var(--wl-band);
  border: 1px solid var(--wl-hairline-soft);
}

/* WooCommerce's stock placeholder is a light-grey graphic on white; on the
   dark canvas it becomes a faint glyph instead of a glaring box. */
.woocommerce div.product div.images img[src*="woocommerce-placeholder"],
.woocommerce ul.products li.product img[src*="woocommerce-placeholder"] {
  filter: invert(0.92);
  opacity: 0.25;
}

/* ---- Meta + tabs ------------------------------------------------------ */

.woocommerce div.product .product_meta {
  font-family: var(--wl-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wl-muted);
  border-top: 1px solid var(--wl-hairline-soft);
  padding-top: 16px;
}

.woocommerce div.product .product_meta a {
  color: var(--wl-gold);
  text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
  color: var(--wl-gold-bright);
}

.woocommerce div.product .woocommerce-tabs {
  margin-top: 40px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--wl-hairline);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

/* WooCommerce gives inactive tabs their own margin/padding, so the row would
   shift as the active tab changes — pin both states to the same box. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  margin: 0 24px 0 0 !important;
  padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wl-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--wl-muted);
  padding: 0 0 12px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--wl-body);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--wl-ink);
  box-shadow: inset 0 -2px 0 var(--wl-red);
}

/* The active tab already names the panel — WooCommerce's auto "Description" /
   "Reviews" heading inside it just repeats the label (the Reviews one sits a
   level deeper than the panel, hence the extra selector). */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-of-type,
.woocommerce div.product .woocommerce-Reviews-title {
  display: none;
}

.woocommerce div.product .woocommerce-Tabs-panel h2 {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wl-ink);
  margin: 0 0 12px;
}

.woocommerce div.product .woocommerce-Tabs-panel {
  font-family: var(--wl-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wl-body);
}

/* ---- Product grids (shop, related, upsells) --------------------------- */

.woocommerce ul.products li.product {
  background: var(--wl-card);
  border: 1px solid var(--wl-hairline);
  padding: 0 0 16px !important;
  text-align: left;
  transition: border-color 120ms ease;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--wl-gold);
}

.woocommerce ul.products li.product a img {
  margin: 0 0 12px;
  background: var(--wl-band);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wl-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--wl-ink);
  line-height: 1.35;
  /* Reserve two lines so a wrapping name never changes the card height. */
  min-height: 2.7em;
  padding: 0 16px 4px !important;
}

.woocommerce ul.products li.product .price {
  font-size: 13px;
  padding: 0 16px !important;
}

/* Both card actions take the same full width, stacked, with breathing room
   above the card's bottom edge. */
.woocommerce ul.products li.product .button {
  display: block;
  width: calc(100% - 32px);
  margin: 10px 16px 0 !important;
  padding: 9px 16px;
  font-size: 11px !important;
  text-align: center;
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wl-ink);
  margin: 48px 0 20px;
}

/* ---- Ratings ---------------------------------------------------------- */

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
  color: var(--wl-gold-bright);
}

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--wl-sans);
  background: var(--wl-card);
  border: 1px solid var(--wl-hairline);
  border-top: 2px solid var(--wl-gold);
  color: var(--wl-body);
  border-radius: 0;
}

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

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--wl-gold);
}

.woocommerce-error::before {
  color: var(--wl-red);
}

/* ---- Cart + checkout -------------------------------------------------- */

/* Hello Elementor's theme.css bleeds EVERY `.alignwide` 80px into both margins,
   unconditionally — no breakpoint, no check that the room exists. WooCommerce's
   Cart and Checkout blocks both ship with `alignwide` on their wrapper, but only
   checkout escapes it: `blocks/checkout.css` sets `margin: 0` on its own
   wrapper, which loads after the theme and cancels the bleed. `blocks/cart.css`
   sets `container-type` and `width: 100%` on its wrapper and no margin at all,
   so the cart alone keeps the -80px.

   And because that `width: 100%` pins the block to its container, the negative
   margin can never widen it — it can only SHIFT it left. On desktop that put
   the cart 104px out of line with everything else on the page; at 375px it
   dragged the whole block to left:-46px, off the screen edge, with the product
   image and the totals labels clipped and no scrollbar to reach them. The
   owner's report: "the shopping card is broken on mobile, the layout is out of
   the screen."

   So: give the cart what checkout already has. Cart and checkout then share one
   measure the whole way through the funnel, which is what they should have had
   from the start. */
.wp-block-woocommerce-cart.alignwide {
  margin-inline: 0;
}

.woocommerce table.shop_table {
  font-family: var(--wl-sans);
  background: var(--wl-card);
  border: 1px solid var(--wl-hairline);
  border-radius: 0;
  border-collapse: collapse;
  color: var(--wl-body);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--wl-hairline-soft);
  color: var(--wl-body);
}

.woocommerce table.shop_table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wl-muted);
}

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

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  font-family: var(--wl-sans);
  font-size: 15px;
  color: var(--wl-ink);
  background: var(--wl-band);
  border: 1px solid var(--wl-hairline);
  border-radius: 0;
  padding: 11px 13px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--wl-gold-bright);
  outline: none;
}

.woocommerce form .form-row label {
  font-family: var(--wl-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wl-muted);
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: var(--wl-card);
  border: 1px solid var(--wl-hairline);
  border-radius: 0;
  color: var(--wl-body);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--wl-band);
  color: var(--wl-body);
}

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

/* ---- Order received (thank-you) page ---------------------------------- */

/* The page title becomes the hero, centred, with a gold confirmation mark
   above it. Scoped to the order-received body so no other page title moves. */
body.woocommerce-order-received .page-header {
  text-align: center;
  padding-top: 32px;
}

body.woocommerce-order-received .page-header .entry-title::before {
  content: "\2713";
  display: block;
  width: 66px;
  height: 66px;
  line-height: 62px;
  margin: 0 auto 22px;
  border: 2px solid var(--wl-gold);
  border-radius: 50%;
  color: var(--wl-gold-bright);
  font-family: var(--wl-sans);
  font-size: 30px;
}

.woocommerce-order {
  max-width: 720px;
  margin: 40px auto 72px;
}

/* The WooCommerce success line becomes a quiet, centred subtitle. */
.woocommerce-order > .woocommerce-thankyou-order-received {
  text-align: center;
  font-family: var(--wl-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wl-body);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto 4px !important;
}

.woocommerce-order > .woocommerce-thankyou-order-received::before {
  content: none !important;
}

/* Key order facts as a clean label -> value list (a bordered receipt panel):
   each row keeps its own label beside its own value, so nothing can wrap out
   of alignment the way a tile grid does. */
.woocommerce-order ul.woocommerce-order-overview {
  list-style: none !important;
  margin: 32px 0 44px !important;
  padding: 0 !important;
  border: 1px solid var(--wl-hairline);
  background: var(--wl-card);
  display: block !important;
  overflow: hidden;
}

.woocommerce-order ul.woocommerce-order-overview li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 15px 22px !important;
  border: none !important;
  border-bottom: 1px solid var(--wl-hairline-soft) !important;
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--wl-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wl-muted);
  text-align: left;
}

.woocommerce-order ul.woocommerce-order-overview li:last-child {
  border-bottom: none !important;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
  display: inline !important;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wl-ink);
  text-align: right;
  word-break: break-word;
}

/* The total is the headline figure. */
.woocommerce-order ul.woocommerce-order-overview li.total {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.woocommerce-order ul.woocommerce-order-overview li.total strong {
  font-size: 16px;
  color: var(--wl-gold-bright);
}

/* Section headings + the address panel. */
.woocommerce-order-details > h2,
.woocommerce-customer-details > h2,
.woocommerce-order-downloads > h2 {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wl-ink);
  margin: 44px 0 16px;
}

.woocommerce-customer-details address {
  font-family: var(--wl-sans);
  font-size: 14px;
  line-height: 1.7;
  font-style: normal;
  color: var(--wl-body);
  border: 1px solid var(--wl-hairline);
  background: var(--wl-card);
  border-radius: 0;
  padding: 20px 22px;
}

/* Return-navigation buttons injected under the summary. */
.wl-order-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 44px 0 0;
}

.wl-order-actions .button {
  flex: 0 0 auto;
}

.wl-order-actions .wl-order-secondary,
.wl-order-actions a.button.wl-order-secondary {
  background: transparent !important;
  border: 1px solid var(--wl-hairline) !important;
  color: var(--wl-body) !important;
}

.wl-order-actions .wl-order-secondary:hover,
.wl-order-actions a.button.wl-order-secondary:hover {
  background: transparent !important;
  border-color: var(--wl-gold) !important;
  color: var(--wl-ink) !important;
}

@media (max-width: 640px) {
  .wl-order-actions .button {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---- My Account (orders list + account chrome) ------------------------ */

/* The endpoint title ("Warleague+", "Orders", "Downloads" …) is dressed like
   the /plus feature pages: a Bebas display heading with breathing room above
   it (it otherwise sits tight under the site header). Scoped to the account
   body so no other page title moves. */
body.woocommerce-account .entry-title {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: clamp(32px, 3.1vw, 44px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wl-ink);
  line-height: 1;
  margin: 0 0 34px;
  padding-top: 40px;
}

/* Sticky footer: the account page fills the viewport so the footer pins to
   the bottom even when the content is short (a one-order list otherwise leaves
   the footer floating mid-screen). Same frame as the /plus pages. */
body.woocommerce-account {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.woocommerce-account.admin-bar {
  min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  body.woocommerce-account.admin-bar {
    min-height: calc(100vh - 46px);
  }
}

body.woocommerce-account > main.site-main {
  flex: 1 0 auto;
}

body.woocommerce-account .page-content {
  padding-bottom: 56px;
}

body.woocommerce-account > footer {
  flex: 0 0 auto;
}

/* Two-column shell: a fixed nav rail beside the content, replacing
   WooCommerce's float columns so the gutter is even and nothing shifts.
   Mobile keeps the stacked flow. */
@media (min-width: 769px) {
  /* The theme centres the account content at 820px, which indents the nav rail
     ~160px from the page title and squeezes the content column. Let it span the
     full main width so the rail's left edge lines up with the title and the
     content column reclaims the room on the right. */
  body.woocommerce-account .page-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Only the signed-in account pages have a nav rail; the logged-out
     login/lost-password view is a bare form, and forcing the two-column grid
     on it pushed the form into the (empty) content column — indented, not
     aligned with the title. :has() ties the grid to the rail's existence. */
  body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation,
  body.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Pin each column explicitly — the theme kit sets grid-auto-flow/order on
     descendants, so auto-placement alone can swap or stack them.

     The left column carries two rows: the hub button, then the rail. When the
     hub page is missing the button never prints, and row 1 collapses to zero
     — there is no row-gap, so the rail simply rides back up to the top. */
  body.woocommerce-account .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 2;
  }

  body.woocommerce-account .wl-account-hub {
    grid-column: 1;
    grid-row: 1;
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* -- The way back to the Plus hub (ADR-0084 rule 6) --

   WooCommerce prints this link before the <nav>, so it stands beside the rail
   rather than inside it — and it is dressed to match: the front page's primary
   CTA, red and uppercase, with the same band of light sweeping across it that
   the hero's "Get Warleague" button carries (`wl-shine`, 2.5s, a second of
   stillness first). One animated element on the page, and it is the one link
   that leaves the billing screens behind. */
@keyframes wl-account-hub-shine {
  from { transform: translateX(-140%) skewX(-12deg); }
  to { transform: translateX(140%) skewX(-12deg); }
}

body.woocommerce-account .wl-account-hub {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 15px 18px;
  background: var(--wl-red) !important;
  border: 1px solid var(--wl-red);
  color: #fff !important;
  font-family: var(--wl-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0;
  transition: background 120ms ease;
}

body.woocommerce-account .wl-account-hub:hover,
body.woocommerce-account .wl-account-hub:focus {
  background: var(--wl-red-active) !important;
  color: #fff !important;
}

/* The words and the chevron ride above the sweep instead of under it. */
body.woocommerce-account .wl-account-hub > span {
  position: relative;
  z-index: 2;
}

/* The chevron is set larger than the label — at the label's 12px it reads as
   a stray punctuation mark rather than an arrow — which makes it the tallest
   thing in a centred flex row and grows the button by 3px. `line-height: 0`
   takes the glyph out of the height calculation so the button stays the 46px
   the rail was measured against.

   That leaves the glyph sitting low against uppercase text, which has no
   descenders to balance it: the 2px lift puts its ink centre on the label's
   (measured, not guessed — within 0.2px). It rides the `position: relative`
   the sweep rule above already gives every span, which is also why the lift
   is `top` and not a transform: the hover nudge owns the transform. That nudge
   is the same "onward" lean the carousel's next-button makes, answering the
   pointer rather than looping, since the sweep already owns the idle motion. */
body.woocommerce-account .wl-account-hub__arrow {
  font-size: 17px;
  line-height: 0;
  top: -2px;
  transition: transform 140ms ease;
}

body.woocommerce-account .wl-account-hub:hover .wl-account-hub__arrow,
body.woocommerce-account .wl-account-hub:focus .wl-account-hub__arrow {
  transform: translateX(3px);
}

body.woocommerce-account .wl-account-hub::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-12deg);
  animation: wl-account-hub-shine 2.5s ease-in-out 1s infinite;
}

/* A repeating sweep is exactly the motion a reader may have asked the system
   to stop; the button keeps its colour and its hover, and goes still. */
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-account .wl-account-hub::after {
    animation: none;
  }
}

/* The nav rail: a bordered card of uppercase links, the active one marked
   with a red edge and brighter ink. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border: 1px solid var(--wl-hairline);
  background: var(--wl-card);
}

@media (min-width: 769px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin-bottom: 0;
  }
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--wl-hairline-soft);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 18px;
  font-family: var(--wl-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wl-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--wl-ink);
  background: var(--wl-band);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--wl-ink);
  background: var(--wl-band);
  border-left-color: var(--wl-red);
}

/* The orders table rides the shared shop_table card look; these rules refine
   it for the account list — roomier cells, a row hover, and DS-coloured
   number / total / status. */
body.woocommerce-account .woocommerce-orders-table {
  margin: 0;
}

body.woocommerce-account .woocommerce-orders-table thead th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--wl-hairline) !important;
}

body.woocommerce-account .woocommerce-orders-table tbody td,
body.woocommerce-account .woocommerce-orders-table tbody th {
  padding: 16px;
  font-size: 14px;
  vertical-align: middle;
}

body.woocommerce-account .woocommerce-orders-table tbody tr {
  transition: background 120ms ease;
}

body.woocommerce-account .woocommerce-orders-table tbody tr:hover {
  background: var(--wl-band);
}

/* Order number: a gold link. */
body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  color: var(--wl-gold);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--wl-gold-bright);
}

/* Date reads as quiet meta. */
body.woocommerce-account .woocommerce-orders-table__cell-order-date {
  color: var(--wl-muted);
}

/* Total: the figure in gold, the "for N items" tail muted. */
body.woocommerce-account .woocommerce-orders-table__cell-order-total {
  color: var(--wl-muted);
  font-size: 12px;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  color: var(--wl-gold-bright);
  font-size: 14px;
  font-weight: 700;
}

/* Status as an uppercase label, coloured by the row's status class. */
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-family: var(--wl-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wl-body);
}

body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
  color: var(--wl-gold-bright);
}

body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
  color: #4c9a6a;
}

body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
  color: var(--wl-gold);
}

body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
  color: var(--wl-red);
}

/* The row's View action stays compact against the taller cells. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
  text-align: right;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  padding: 9px 18px;
  font-size: 11px !important;
}

/* Empty state ("No order has been made yet") + its Browse button sit in a
   clean panel with room to breathe. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
  margin-left: 16px;
}

/* Orders pagination (when more than one page of orders exists). */
body.woocommerce-account .woocommerce-pagination {
  margin-top: 28px;
}

/* Stacked "responsive" table on small screens: keep the injected data-title
   label muted and its value in ink so a stacked row still reads as label ->
   value. */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-orders-table.shop_table_responsive tbody td {
    text-align: right;
  }

  body.woocommerce-account .woocommerce-orders-table.shop_table_responsive tbody td::before {
    color: var(--wl-muted);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}

/* ---- My Account: dashboard, addresses, account details, downloads,
        login/register/lost-password ------------------------------------ */

/* Dashboard greeting + the "not X? Log out" / address / downloads
   description paragraphs — WooCommerce prints these as plain <p> tags
   directly in the content column (its own notices, e.g. "no order has been
   made yet", are already covered by the .woocommerce-info rules above). */
body.woocommerce-account .woocommerce-MyAccount-content > p {
  font-family: var(--wl-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--wl-body);
  margin: 0 0 20px;
}

body.woocommerce-account .woocommerce-MyAccount-content > p a {
  color: var(--wl-gold);
  text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content > p a:hover {
  color: var(--wl-gold-bright);
}

body.woocommerce-account .woocommerce-MyAccount-content > p strong {
  color: var(--wl-ink);
}

/* Checkboxes/radios throughout the account area (remember-me, terms) pick up
   the DS gold instead of the browser default blue. */
body.woocommerce-account input[type="checkbox"],
body.woocommerce-account input[type="radio"] {
  accent-color: var(--wl-gold-bright);
}

/* -- Addresses -- */

body.woocommerce-account .woocommerce-Addresses {
  display: grid;
  gap: 24px;
}

@media (min-width: 640px) {
  body.woocommerce-account .woocommerce-Addresses.col2-set {
    grid-template-columns: 1fr 1fr;
  }
}

body.woocommerce-account .woocommerce-Address {
  border: 1px solid var(--wl-hairline);
  background: var(--wl-card);
  padding: 22px 24px;
  float: none !important;
  width: auto !important;
}

body.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wl-ink);
  margin: 0;
}

body.woocommerce-account .woocommerce-Address-title a {
  font-family: var(--wl-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wl-gold);
  text-decoration: none;
}

body.woocommerce-account .woocommerce-Address-title a:hover {
  color: var(--wl-gold-bright);
}

body.woocommerce-account .woocommerce-Address address {
  font-family: var(--wl-sans);
  font-size: 14px;
  line-height: 1.7;
  font-style: normal;
  color: var(--wl-body);
}

/* "You have not set up this type of address yet." */
body.woocommerce-account .woocommerce-Address > p {
  font-size: 14px;
  color: var(--wl-muted);
  margin: 0;
}

/* -- Edit account / edit address forms -- */

body.woocommerce-account .woocommerce-EditAccountForm fieldset,
body.woocommerce-account .woocommerce-address-fields fieldset {
  border: none;
  padding: 0;
  margin: 28px 0 0;
}

body.woocommerce-account .woocommerce-EditAccountForm legend,
body.woocommerce-account .woocommerce-address-fields legend {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wl-ink);
  padding: 0 0 16px;
  border-bottom: 1px solid var(--wl-hairline);
  margin: 0 0 20px;
  width: 100%;
}

body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button,
body.woocommerce-account .woocommerce-address-fields .woocommerce-Button,
body.woocommerce-account .woocommerce-form-login .woocommerce-button,
body.woocommerce-account .woocommerce-form-register .woocommerce-button,
body.woocommerce-account .woocommerce-ResetPassword .woocommerce-button {
  margin-top: 4px;
}

/* -- Downloads (WooCommerce's native My-Account tab: granted + purchased
      downloadable products, ADR-0082) — the same shop_table look as the
      orders list, refined the same way. -- */
body.woocommerce-account .woocommerce-MyAccount-downloads thead th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--wl-hairline) !important;
}

body.woocommerce-account .woocommerce-MyAccount-downloads tbody td {
  padding: 16px;
  font-size: 14px;
  vertical-align: middle;
}

body.woocommerce-account .woocommerce-MyAccount-downloads tbody tr {
  transition: background 120ms ease;
}

body.woocommerce-account .woocommerce-MyAccount-downloads tbody tr:hover {
  background: var(--wl-band);
}

body.woocommerce-account .woocommerce-MyAccount-downloads-file a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wl-gold);
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-downloads-file a:hover {
  color: var(--wl-gold-bright);
}

body.woocommerce-account .woocommerce-MyAccount-downloads-file svg {
  fill: currentColor;
}

body.woocommerce-account .woocommerce-MyAccount-downloads-file__count,
body.woocommerce-account .woocommerce-MyAccount-downloads-expires {
  color: var(--wl-muted);
  font-size: 12px;
}

@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-MyAccount-downloads.shop_table_responsive tbody td {
    text-align: right;
  }

  body.woocommerce-account .woocommerce-MyAccount-downloads.shop_table_responsive tbody td::before {
    color: var(--wl-muted);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}

/* -- Login / register / lost-password (the logged-out /my-account/ view) -- */

/* A sign-in card, not a full-bleed band: without a cap the form stretches the
   whole content width and the fields read as a mile-wide strip. Left-aligned
   under the page title (no auto margins). */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword {
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  margin: 0;
  background: var(--wl-card);
  border: 1px solid var(--wl-hairline);
  padding: 28px 26px;
}

body.woocommerce-account .woocommerce-MyAccount-content > h2,
body.woocommerce-account .woocommerce > h2,
body.woocommerce-account .u-columns > h2 {
  font-family: var(--wl-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wl-ink);
  margin: 0 0 18px;
}

body.woocommerce-account .lost_reset_password > p:first-child {
  color: var(--wl-body);
  margin-bottom: 20px;
}

body.woocommerce-account .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--wl-muted);
}

body.woocommerce-account .woocommerce-privacy-policy-text a {
  color: var(--wl-gold);
}

/* -- Login hero: the wordmark stands beside the sign-in card, the same
      color-cycle treatment as the /plus hub's h1, sized up to fill the
      left column instead of sitting as a small page title. -- */
@keyframes wl-login-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wl-login-color {
  0%, 75%, 100% { color: #fff; }
  28% { color: var(--wl-red); }
  55% { color: var(--wl-gold-bright); }
}

body.woocommerce-account main.site-main:has(.woocommerce-form-login) .entry-title {
  font-size: clamp(40px, 9vw, 96px);
  line-height: 0.88;
  letter-spacing: 4px;
  overflow-wrap: break-word;
  animation: wl-login-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
    wl-login-color 20s ease-in-out 2s infinite;
}

@media (min-width: 1024px) {
  body.woocommerce-account main.site-main:has(.woocommerce-form-login) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: center;
    column-gap: 64px;
  }

  body.woocommerce-account main.site-main:has(.woocommerce-form-login) .page-header {
    grid-column: 1;
    grid-row: 1;
  }

  body.woocommerce-account main.site-main:has(.woocommerce-form-login) .page-content {
    grid-column: 2;
    grid-row: 1;
    padding-bottom: 0;
  }

  /* The hero column only gets a slice of the row (the sign-in card claims a
     fixed 460px), so the desktop font size is capped lower than the mobile
     one — "Warleague+" needs to hold a single line at whatever width that
     slice ends up being, not spill onto a second. */
  body.woocommerce-account main.site-main:has(.woocommerce-form-login) .entry-title {
    font-size: clamp(40px, 5.5vw, 68px);
    padding-top: 0;
    margin-bottom: 0;
  }
}

/* The submit button reads as the page's one commitment — 30% wider than the
   standard button padding (22px → 29px each side) so it doesn't get lost
   next to the remember-me row. */
body.woocommerce-account .woocommerce-form-login__submit {
  padding-left: 29px !important;
  padding-right: 29px !important;
}

/* Baseline-aligned by default, the checkbox reads slightly high against the
   "Remember me" label; centering the row on its own cross-axis fixes it, and
   the left margin keeps it from hugging the form's edge. */
body.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
}

/* Quiet by design — a password reset link doesn't compete with the submit
   button for attention. */
body.woocommerce-account .woocommerce-LostPassword a {
  color: var(--wl-muted);
  text-decoration: none;
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
  color: var(--wl-body);
}