/*
 * WooCommerce -> PXL design.
 *
 * Woo ships a light theme with its own purples, greys and button shapes. Dropped
 * onto this site unstyled it looks like a different company's shop bolted to the
 * side of the brand.
 *
 * Everything here resolves from the tokens already defined in pxl-core.css
 * (--bg-*, --ink*, --magenta, --gold, --hair, --ease). No new colours are
 * invented, so if the palette ever moves, the shop moves with it.
 *
 * Scope: loaded ONLY on shop, product, cart, checkout and account pages.
 */

/* ---------- shell ---------------------------------------------------- */

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

/* The container comes from templates/page-woo.php's `.wrap`, which is the same
   element every designed page uses. This block only owns the vertical rhythm.

   THE TOP PADDING IS NOT DECORATION: `.nav` is `position:fixed`, so without a
   reserved offset the first row of the cart sits underneath it. 62px is the bar,
   the rest is the section rhythm the rest of the site uses. */
.pxl-shop {
  padding: calc(62px + 56px) 0 96px;
  background: var(--bg-0);
  min-height: 60vh;   /* a one-line "your cart is empty" must not collapse the page */
}

/* Woo emits its notices outside the form; keep them on the same measure. */
.woocommerce .woocommerce-notices-wrapper {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* A cart table is wide and does not reflow gracefully. It scrolls INSIDE its own
   box rather than pushing the page sideways — a horizontally scrolling document
   is the failure the mobile gate exists to catch. */
.pxl-shop .woocommerce-cart-form,
.pxl-shop .woocommerce-orders-table,
.pxl-shop .woocommerce-MyAccount-content table {
  overflow-x: auto;
}

/* ---------- headings + prose ----------------------------------------- */

.woocommerce div.product .product_title,
.woocommerce-cart h1,
.woocommerce-checkout h1,
.woocommerce-account h1 {
  color: var(--ink);
  letter-spacing: -.02em;
}

/* Woo's section headings ("Cart totals", "Billing details", "Your order") were
   inheriting a DARK NAVY from the parent theme: measured rgb(25,42,61) on the
   rgb(11,11,11) page, i.e. about 1.2:1, which is effectively invisible and fails
   WCAG AA by a wide margin. They are the labels that tell you what you are about
   to pay for, so they get the same treatment as any other section head here. */
.pxl-shop h2,
.pxl-shop h3,
.pxl-shop .cart_totals h2,
.pxl-shop #order_review_heading,
.pxl-shop .woocommerce-billing-fields h3,
.pxl-shop .woocommerce-MyAccount-content h2,
.pxl-shop legend {
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-page p {
  color: var(--ink-dim);
}

/* ---------- price ----------------------------------------------------- */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--gold);
  font-weight: 700;
}

/* A £0 tool should read as a gift, not as a missing number. */
.woocommerce .price .woocommerce-Price-amount bdi:empty::after,
.woocommerce .price:empty::after {
  content: "Free";
  color: var(--gold);
}

/* ---------- buttons --------------------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  background: var(--magenta);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 8px 30px -6px rgba(215, 0, 90, .5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  /* A pill button that wraps stops being a pill. "Apply coupon" measured
     118x76 with its label on two lines, because the cart row squeezes it and
     the label was free to break. Nowrap keeps every button one line; the
     min-height keeps it a comfortable touch target when it is not. */
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Woo's stock placeholder is a WHITE tile, which reads as a hole punched in the
   page here. Dimmed rather than hidden, so a missing product image is still
   visibly missing — the fix is to set a real image, and this rule stops applying
   the moment one exists. */
.pxl-shop img[src*="woocommerce-placeholder"] {
  opacity: .16;
  border-radius: 10px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
  background: var(--magenta);
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -8px rgba(215, 0, 90, .65);
}

/* Secondary actions (Update cart, Continue shopping) must not compete. */
.woocommerce .cart .button[name="update_cart"],
.woocommerce .return-to-shop .button,
.woocommerce a.button.wc-backward {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair);
  box-shadow: none;
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce a.button.wc-backward:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 255, 255, .04);
}

/* ---------- surfaces: cards, tables, totals --------------------------- */

.woocommerce ul.products li.product,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce .woocommerce-order,
.woocommerce-order-received .woocommerce-order-details {
  background: var(--bg-1);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 22px;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  background: transparent;
  border-color: var(--hair-2);
  color: var(--ink);
}

.woocommerce table.shop_table thead th {
  color: var(--ink-dim);
  font-weight: 600;
}

/* ---------- form fields ----------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="password"],
.wc-block-components-text-input input {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 13px 14px;
  /* min-width:0 so a field can never force the row wider than the viewport.
     A grid/flex item refuses to shrink below its content without it, which is
     the single most common cause of sideways scroll on a phone. */
  min-width: 0;
  width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-page input:focus,
.wc-block-components-text-input input:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-soft);
}

.woocommerce form .form-row label,
.woocommerce-page label {
  color: var(--ink-dim);
  font-weight: 500;
}

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

/* The consent checkbox reads as a choice, not as fine print. */
.woocommerce-checkout #pxl_optin_field label {
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.woocommerce-checkout #pxl_optin_field input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin-top: 4px;
  accent-color: var(--magenta);
}

/* ---------- notices ---------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--bg-2);
  border-top: 3px solid var(--magenta);
  color: var(--ink);
  border-radius: 12px;
}

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

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

/* ---------- mobile ----------------------------------------------------- */
/*
 * Every page shipped from here has broken on a phone at least once, always the
 * same way: something refuses to shrink below its content and the whole page
 * scrolls sideways. Woo's cart table and two-column checkout are exactly that
 * shape, so they collapse to one column early and the table scrolls inside its
 * own box rather than pushing the page.
 */

.woocommerce table.shop_table_responsive,
.woocommerce-cart .woocommerce-cart-form {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
    min-width: 0;
  }

  .woocommerce ul.products[class*="columns-"] li.product {
    width: 100%;
    margin-right: 0;
    min-width: 0;
  }

  .woocommerce-page .site-main {
    padding-inline: 16px;
  }
}

/* ---------- MANAGE MY LICENCE ----------------------------------------
 * The self-service page. Lives here rather than in its own sheet because it is
 * part of the shop flow and loads on the same pages pxl-woo.css already covers.
 */

.pxl-self { max-width: 780px; }

.pxl-self-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 24px;
}

.pxl-self-form label {
  width: 100%;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pxl-self-form input {
  flex: 1 1 260px;
  min-width: 0;              /* the rule that stops a flex item pushing the page sideways */
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--hair-2);
  background: var(--bg-1);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The submit button styles itself rather than borrowing `.pcard-buy`, which lives
   in pxl-store.css — a sheet this page does NOT load. It rendered as WordPress's
   default blue until this existed. Caught by looking, not by reading the class. */
.pxl-self-form button[type="submit"] {
  background: var(--magenta);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 26px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 30px -6px rgba(215, 0, 90, .5);
  transition: transform .35s var(--ease), color .35s var(--ease);
}

.pxl-self-form button[type="submit"]:hover {
  transform: translateY(-2px);
  color: var(--gold);
}

.pxl-self-notice {
  border-left: 3px solid var(--gold);
  background: var(--bg-1);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  color: var(--ink);
  margin-bottom: 20px;
}

.pxl-self-who { color: var(--ink-dim); margin-bottom: 10px; }

/* Blocksy draws vertical rules on every table cell; this design uses horizontal
   rules only, so they are cleared explicitly rather than fought with !important
   further down. */
.pxl-self-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.pxl-self-table th,
.pxl-self-table td { border-left: 0; border-right: 0; border-top: 0; }

.pxl-self-table th {
  text-align: left;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hair-2);
}

.pxl-self-table td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--hair-2);
  color: var(--ink);
  vertical-align: middle;
}

.pxl-self-dim { color: var(--ink-faint); }

.pxl-self-release {
  background: transparent;
  color: var(--magenta);
  border: 1px solid var(--magenta);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.pxl-self-release:hover { background: var(--magenta); color: #fff; }

@media (max-width: 600px) {
  /* The table is four columns of short values; stacking beats a sideways scroll. */
  .pxl-self-table thead { display: none; }
  .pxl-self-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--hair-2); }
  .pxl-self-table td { display: block; border: 0; padding: 3px 0; }
  .pxl-self-table td:first-child { font-weight: 700; }
}

/* ---------- CHROME: footer, mobile drawer, the 900px nav switch --------
 *
 * These are NOT new design. They are the same blocks that pxl-store.css,
 * pxl-home.css, pxl-1to1.css, pxl-group.css and pxl-legal.css each carry — the
 * theme deliberately duplicates them per page sheet rather than moving them into
 * core (there is a note about that decision at pxl-legal.css:117), so a sheet
 * that omits them gets a broken shell.
 *
 * That is exactly what happened here on 2026-08-13, first render, screenshot at
 * 2560x1440: the shop pages load ONLY pxl-core.css + this file, so
 *  - `.mobile-menu` had no `position:fixed`, so the drawer's links rendered in
 *    the normal flow, stacked over the top-left of the cart at desktop width;
 *  - the footer had no grid, so the wordmark rendered at full size and the
 *    contact column fell to the left;
 *  - the 900px switch was missing, so below 900px the desktop menu stayed and
 *    the hamburger never appeared.
 *
 * KEEP IN SYNC with pxl-store.css. Deliberately NOT copied: `.reveal{opacity:0}`.
 * It depends on GSAP ScrollTrigger to reveal, and the shop pages do not enqueue
 * the page JS — copying it would leave content permanently invisible.
 */

/* ---- footer ---- */
.footer{border-top:1px solid var(--hair-2);padding:70px 0 40px;background:var(--bg-0)}
.footer-inner{width:100%;padding:0 clamp(20px,3vw,40px)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,3vw,3rem);align-items:end}
.footer-block{min-width:0}
.footer-tag{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.footer-logo{display:inline-block;text-decoration:none}
.footer-logo img{height:46px;width:auto;display:block;margin-bottom:14px}
.footer-contact-socials{justify-content:flex-end;margin-top:20px}
.footer .socials a{color:var(--magenta)}
.footer-block .footer-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.footer-block .footer-val{font-size:14.5px;color:var(--ink-dim);line-height:1.85}
.footer-block .footer-val a{transition:color .2s}
.footer-block .footer-val a:hover{color:var(--gold)}
.footer-contact{text-align:right}
.footer-contact .footer-label{text-align:right}
.footer-bottom{margin-top:44px;padding-top:26px;border-top:1px solid var(--hair-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-bottom span{color:var(--ink-faint);font-size:13px;font-family:'Space Mono',monospace;letter-spacing:.06em}

/* ---- mobile drawer ---- */
/* 2026-09-01  CLOSED-DRAWER BLEED.  Do not drop visibility/pointer-events/overflow-y.
   The drawer used to be hidden by `transform: translateY(-100%)` alone, with
   overflow visible. That hides the BOX, not what overflows it: when the drawer's
   content was taller than the viewport, the excess spilled past the drawer's
   bottom edge and, after the -100% shift, landed back INSIDE the viewport. Being
   position:fixed it then floated over the page at every scroll position -- the
   cart row painted over the PXLMENTOR wordmark and the "Book a free call" button
   painted over every card. Measured on the live homepage: 43px at 390x932, 131px
   at 390x844, 308px at 390x667. The store escaped only because its drawer content
   was shorter; it broke at 667 all the same.
   `visibility:hidden` + `pointer-events:none` is what actually hides it (this is
   what the courses theme already did correctly, which is why courses was clean).
   The `visibility 0s linear .5s` transition delays the flip until the slide-out
   finishes, so the close animation still plays; `.open` resets the delay to 0.
   `overflow-y:auto` is not cosmetic: without it the drawer's own CTA sat 308px
   below the bottom of an iPhone SE and could not be reached when the menu WAS open.
   Gate: bin/mobile-audit.py `hidden-overlay-bleed`, which was added the same day
   because the audit passed this page clean for months. */
.mobile-menu{position:fixed;inset:0;z-index:200;background:rgba(11,11,11,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transform:translateY(-100%);transition:transform .5s var(--ease),visibility 0s linear .5s;display:flex;flex-direction:column;padding:28px;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;pointer-events:none}
.mobile-menu.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .5s var(--ease),visibility 0s}
.mobile-menu .mm-top{display:flex;align-items:center;gap:9px}
.mobile-menu .mm-close{margin-left:auto;background:none;border:0;color:var(--ink);cursor:pointer}
.mobile-menu .mm-close svg{width:28px;height:28px}
.mobile-menu nav{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:6px}
.mobile-menu nav a{font-family:'Sora',sans-serif;font-weight:700;font-size:2rem;letter-spacing:-.03em;color:var(--ink);padding:10px 0}
.mobile-menu nav a.sub{font-size:1.15rem;font-weight:500;color:var(--ink-dim);padding:6px 0 6px 18px}
.mobile-menu .mm-foot{display:flex;flex-direction:column;gap:16px}
/* Do NOT reinstate `.mm-foot .socials{display:flex}` here — see the note in
   pxl-store.css: outside a media query it re-shows the drawer icons at every
   width and overrides the shared rule in pxl-core.css. */

/* ---- responsive ---- */
@media(max-width:900px){
  .nav-menu,.nav-right .btn-primary{display:none}
  .nav-toggle{display:inline-flex}
  .pxl-shop{padding:calc(62px + 40px) 0 72px}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  .socials{display:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-contact{text-align:left}
  .footer-contact .footer-label{text-align:left}
  .footer-contact-socials{justify-content:flex-start}
  .footer .socials{display:flex}
}