/* ==========================================================================
   XBALM — shared front-end styling (dark)
   WooCommerce pages: My Account, cart, checkout, order received.
   The custom order builder styles itself and is excluded.

   Palette matches /custom/ :
     black #000 · card #232323 · line #3d3d3d · red #FD0000
     Rajdhani display · Poppins body
   ========================================================================== */

:root {
  --xb-red:     #FD0000;
  --xb-red-dk:  #C50000;
  --xb-black:   #000000;
  --xb-card:    #232323;
  --xb-card-hi: #2d2d2d;
  --xb-line:    #3d3d3d;
  --xb-text:    #ffffff;
  --xb-dim:     #c9ced3;
  --xb-muted:   #9aa1aa;
  --xb-ok:      #3ddc84;
  --xb-disp:    "Rajdhani", "Arial Narrow", Impact, sans-serif;
  --xb-body:    "Poppins", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- page ------------------------------------------------------ */

body.woocommerce,
body.woocommerce-page,
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received {
  background-color: var(--xb-black) !important;
  color: var(--xb-text);
  font-family: var(--xb-body);
}
body.woocommerce .wp-site-blocks,
body.woocommerce-page .wp-site-blocks,
body.woocommerce-account .wp-site-blocks {
  background-color: var(--xb-black) !important;
}
body.woocommerce-page p,
body.woocommerce-page li,
body.woocommerce-page td,
body.woocommerce-account p,
body.woocommerce-account li { color: var(--xb-dim); }

/* ---------- headings: red, Rajdhani, uppercase ------------------------ */

body.woocommerce-page h1, body.woocommerce-page h2, body.woocommerce-page h3,
body.woocommerce-account h1, body.woocommerce-account h2, body.woocommerce-account h3,
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
  font-family: var(--xb-disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--xb-red);
}
body.woocommerce-page h1, .woocommerce h1 { font-size: 2.6rem; }
.woocommerce h2 { font-size: 1.55rem; margin-top: 2.2rem; }
.woocommerce h3 { font-size: 1.2rem; }

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

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .woocommerce-Button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background: var(--xb-red);
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--xb-body);
  font-weight: 700;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 13px 26px;
  line-height: 1.2;
  transition: background .12s;
}
/* hover darkens to #C50000 — the same feedback as Proceed to Checkout
   on the order builder, so a button reads as clickable */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background: var(--xb-red-dk);
  color: #fff;
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order { font-size: 1rem; padding: 16px 32px; }

/* ---------- tables ---------------------------------------------------- */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.woocommerce-table--order-details {
  background: var(--xb-card);
  border: 1px solid var(--xb-line);
  border-radius: 0;
  border-collapse: collapse;
  width: 100%;
  color: var(--xb-text);
}
/* only the header row is red — row-header cells stay dark */
.woocommerce table.shop_table thead th,
.woocommerce table.woocommerce-orders-table thead th {
  background: var(--xb-red);
  color: #fff;
  font-family: var(--xb-disp);
  font-weight: 700;
  font-size: .98rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 11px 14px;
  border: none;
  text-align: left;
}
.woocommerce table.shop_table tbody th,
.woocommerce table.woocommerce-orders-table tbody th {
  background: transparent;
  color: var(--xb-text);
  font-weight: 600;
  text-align: left;
  border-top: 1px solid var(--xb-line);
  padding: 12px 14px;
}
.woocommerce table.shop_table td,
.woocommerce table.woocommerce-orders-table td {
  border-top: 1px solid var(--xb-line);
  padding: 12px 14px;
  vertical-align: top;
  color: var(--xb-text);
  font-size: .88rem;
  line-height: 1.5;
}
/* plain links in a row are red; buttons keep their own white label */
.woocommerce table.shop_table td a:not(.button),
.woocommerce table.shop_table tbody th a:not(.button) {
  color: var(--xb-red);
  font-weight: 600;
}
.woocommerce table.shop_table td a.button,
.woocommerce table.shop_table td a.button:hover { color: #fff; }
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  background: #1a1a1a;
  color: var(--xb-text);
  font-weight: 600;
  border-top: 1px solid var(--xb-line);
}
.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
  font-family: var(--xb-disp);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}
.woocommerce table.shop_table .wc-item-meta { font-size: .85rem; color: var(--xb-muted); margin: 6px 0 0; }
.woocommerce table.shop_table .wc-item-meta strong { color: var(--xb-text); font-weight: 600; }

/* ---------- forms: white fields on dark, as on xbalm.com -------------- */

.woocommerce form .form-row label,
.woocommerce-page form .form-row label { color: var(--xb-text); font-weight: 600; font-size: .86rem; margin-bottom: 4px; }

/* Checkout field labels in the brand red, uppercase, in the display face —
   the same treatment as the PRODUCT / QTY / SUBTOTAL header on the order
   summary opposite. Scoped to #customer_details rather than applied to every
   form on the site: this is the one place where the labels are doing the work
   of section headings, and a red uppercase label on the account settings page
   would just be shouting. */
.woocommerce-checkout #customer_details .form-row label{
  color:var(--xb-red);
  font-family:var(--xb-disp);
  font-weight:700;
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.055em;
  margin-bottom:5px;
}
/* the required mark goes white, or it vanishes into a red label and stops
   being a mark at all */
.woocommerce-checkout #customer_details .form-row label .required{
  color:var(--xb-text);text-decoration:none;border:0}
/* "(Optional)" stays quieter than the label it qualifies, and keeps its own
   casing — the string is capitalised in PHP, so no transform here */
.woocommerce-checkout #customer_details .form-row label .optional{
  color:var(--xb-muted);font-weight:600;letter-spacing:.03em;text-transform:none}

/* Field HEIGHT is not set here. It is set once, further down this file, in
   "Checkout fields — one height for everything", which pins height, min-height,
   max-height, padding and line-height with !important. Anything competing from
   here loses, and three rounds were spent discovering that. Change the height
   there. What stays here is only the spacing *between* rows. */

/* labels and rows tighten with them, or the fields shrink and the gaps do not */
.woocommerce-checkout #customer_details .form-row{margin-bottom:9px}
/* The label's own line-height is the other half of the gap, and the invisible
   half. At the inherited 1.4 the label box is 19px tall for 13.76px of text,
   and CSS puts the surplus half above the glyphs and half below — 3.25px of
   dead space inside the box that reads as a gap but is declared by nothing.
   1.15 keeps enough room for the descender in "(Optional)" and cuts that to
   2px. With the 2px margin below it the visible gap is 3.97px, against 9.75px
   before the wrapper and line-height were dealt with. The two numbers that
   matter are not the same number: 2px is declared, ~4px is seen, and the
   difference is the label's own leading. */
.woocommerce-checkout #customer_details .form-row label{
  margin-bottom:2px;
  line-height:1.15}

/* Bind each field to its own label.
   WooCommerce wraps every input in <span class="woocommerce-input-wrapper">,
   which is display:inline out of the box. An inline-block input on a text
   baseline therefore carries half a line of leading above it and descender
   space below — measured at 2.5px, on top of the label's 3px margin, for a
   real gap of 5.5px. That phantom space is not declared by any margin, so no
   margin can remove it; the fix is to stop the wrapper being a line box at all.
   With this, the gap is the label's margin and nothing else: 5.5px -> 3px.
   The 9px between rows is now three times the gap inside a row, which is what
   makes a label read as belonging to the field under it. */
.woocommerce-checkout #customer_details .form-row .woocommerce-input-wrapper{
  display:block}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  background: #fff;
  color: #111;
  border: 1px solid #5a5a5a;
  border-radius: 0;
  padding: 11px 13px;
  font-family: var(--xb-body);
  font-size: .95rem;
  height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--xb-red);
  outline: none;
  box-shadow: 0 0 0 2px rgba(253,0,0,.3);
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
#order_review {
  background: var(--xb-card);
  border: 1px solid var(--xb-line);
  border-radius: 0;
  padding: 22px;
}

/* Billing and shipping are deliberately NOT in the rule above.
   YOUR ORDER puts its heading and red rule above and outside the card, because
   #order_review_heading is a SIBLING of #order_review rather than a child.
   WooCommerce gives billing the opposite structure — the h3 lives inside
   .woocommerce-billing-fields — so to match without editing markup, the card
   moves down a level onto the field wrapper instead. The heading is then
   outside the box by construction. See the wrapper's own rule further down,
   which is where that background and border are declared: one rule owns the
   card, rather than this one owning half of it. */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
  border-bottom: 3px solid var(--xb-red);
  padding-bottom: 8px;
  margin-bottom: 18px;
}

/* margin-top:0 so BILLING DETAILS starts at the same height as YOUR ORDER —
   the two headings are now structurally equivalent and should line up. */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3{margin-top:0}

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

.woocommerce-info, .woocommerce-message, .woocommerce-error {
  background: var(--xb-card);
  color: var(--xb-dim);
  border: 1px solid var(--xb-line);
  border-left: 4px solid var(--xb-red);
  border-radius: 0;
  padding: 16px 20px;
  font-size: .92rem;
}
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none; }
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a { color: var(--xb-red); font-weight: 600; }
.woocommerce-message { border-left-color: var(--xb-ok); }

/* ---------- my account ------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-navigation { width: 24%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--xb-line); background: var(--xb-card);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--xb-line); margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 13px 16px;
  font-family: var(--xb-disp); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--xb-text); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--xb-card-hi); color: var(--xb-red); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--xb-red); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { width: 72%; }

/* ---------- addresses / order received -------------------------------- */

.woocommerce .woocommerce-customer-details address,
.woocommerce ul.order_details {
  background: var(--xb-card);
  border: 1px solid var(--xb-line);
  border-radius: 0;
  color: var(--xb-dim);
  padding: 18px;
}
.woocommerce ul.order_details li { border-right-color: var(--xb-line); color: var(--xb-muted); }
.woocommerce ul.order_details li strong { color: var(--xb-text); }

/* ---------- the custom order panel (xb-account.php) ------------------- */

.xb-panel .xb-ref { background: var(--xb-red); }
.xb-panel .xb-prog li { color: var(--xb-muted); }
.xb-panel .xb-prog li:before { background: var(--xb-line); }
.xb-panel .xb-prog .dot { background: var(--xb-line); }
.xb-panel .xb-prog li.now .lbl, .xb-panel .xb-prog li.done .lbl { color: #fff; }
.xb-panel .xb-doc { background: var(--xb-card); border-color: var(--xb-line); }
.xb-panel .xb-doc h3 { color: var(--xb-muted); }
.xb-panel .xb-doc .nm { color: var(--xb-text); }
.xb-panel .xb-doc a { color: var(--xb-red); font-weight: 600; }
.xb-panel .xb-approve { background: var(--xb-card); border-color: var(--xb-red); }
.xb-panel .xb-approve h3 { color: var(--xb-red); }
.xb-panel .xb-approve p, .xb-panel .xb-approve li { color: var(--xb-dim); }
.xb-panel .xb-ok { background: #13341f; border-color: #2c6b42; color: #b7f0cd; }
.xb-panel .xb-track { background: var(--xb-card); border-color: var(--xb-line); color: var(--xb-dim); }
.xb-panel .xb-track a { color: var(--xb-red); }
.xb-panel .xb-batch td { color: var(--xb-dim); }
.xb-panel .xb-batch td strong { color: var(--xb-text); }

/* ---------- site chrome ----------------------------------------------- */

.wp-site-blocks > header, header.wp-block-template-part {
  background: var(--xb-black);
  border-bottom: 3px solid #fff;
}
.wp-site-blocks > header a, header.wp-block-template-part a { color: #fff; text-decoration: none; }
.wp-site-blocks > header .wp-block-site-title a {
  font-family: var(--xb-disp); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
}
.wp-site-blocks > header a:hover { color: var(--xb-red); }
.wp-site-blocks > header svg { fill: #fff; }

.wp-site-blocks > footer, footer.wp-block-template-part {
  background: var(--xb-black);
  border-top: 3px solid var(--xb-red);
  color: var(--xb-muted);
}
.wp-site-blocks > footer a, footer.wp-block-template-part a { color: var(--xb-muted); }
.wp-site-blocks > footer a:hover { color: #fff; }
.wp-site-blocks > footer .wp-block-site-title a {
  color: #fff; font-family: var(--xb-disp); font-weight: 700; text-transform: uppercase;
}

/* ---------- print -----------------------------------------------------
   Dark backgrounds print badly. Force white paper and black ink, and drop
   navigation and controls that mean nothing on paper. */

@media print {
  header, footer, nav,
  .woocommerce-MyAccount-navigation,
  .xb-approve, .xb-prog,
  .wp-site-blocks > header, .wp-site-blocks > footer,
  #wpadminbar { display: none !important; }

  body, body.woocommerce-page, body.woocommerce-account,
  .wp-site-blocks, .woocommerce table.shop_table,
  .woocommerce .woocommerce-customer-details address,
  .xb-panel .xb-doc, .xb-panel .xb-track {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
  .woocommerce h1, .woocommerce h2, .woocommerce h3,
  body.woocommerce-page h1, body.woocommerce-page h2 { color: #000 !important; }
  .woocommerce table.shop_table th {
    background: #fff !important; color: #000 !important; border-bottom: 2px solid #000 !important;
  }
  .woocommerce table.shop_table td,
  body.woocommerce-page p, body.woocommerce-page li { color: #000 !important; }
  .woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; }
  a[href]::after { content: ""; }
}

/* ==================================================================
   XBALM — store chrome and checkout layout
   Appended to xbalm-front.css. The order builder carries its own copy
   of the header rules inline because it dequeues this stylesheet; these
   serve every WooCommerce page.
   ================================================================== */

body.xb-store{background:#000;color:#e8eaed;margin:0;
  font-family:"Poppins",system-ui,-apple-system,sans-serif}
body.xb-store .wrap{max-width:1160px;margin:0 auto;padding:0 26px}

/* ---------- top strip ---------- */
body.xb-store .topstrip{background:#FD0000;color:#fff;text-align:center;
  font-family:"Rajdhani",sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.05em;padding:7px 26px}
body.xb-store .topstrip a{color:#fff;text-decoration:none}
body.xb-store .topstrip a:hover{text-decoration:underline}

/* ---------- header ---------- */
body.xb-store header{background:#000;border-bottom:3px solid #fff;
  position:sticky;top:0;z-index:40}
body.xb-store .hdr{display:flex;align-items:center;justify-content:space-between;height:62px}
body.xb-store .logo{display:flex;align-items:center;line-height:1;text-decoration:none}
body.xb-store .logo img{height:40px;width:auto;display:block}
@media(max-width:520px){body.xb-store .logo img{height:32px}}

body.xb-store nav{display:flex;gap:6px;font-family:"Rajdhani",sans-serif;
  font-weight:700;font-size:1.02rem;text-transform:uppercase}
body.xb-store nav a{color:#fff;text-decoration:none;padding:9px 15px;letter-spacing:.03em}
body.xb-store nav a:hover{color:#FD0000}
body.xb-store nav a.on{background:#FD0000;color:#fff}
@media(max-width:900px){body.xb-store nav{display:none}}

/* ---------- account controls ---------- */
.xb-hdr-right{display:flex;align-items:center;gap:5px;font-family:"Rajdhani",sans-serif;
  font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.03em}
.xb-hdr-right > a{color:#fff;text-decoration:none;padding:9px 13px;
  transition:background .15s ease,color .15s ease,opacity .15s ease}
.xb-hdr-right > a:hover{color:#FD0000}
.xb-acct-btn{background:#FD0000;color:#fff !important}
.xb-acct-btn:hover{background:#C50000;color:#fff !important;opacity:.92}

/* The cart button is styled in the child theme stylesheet (style.css), which
   loads on every page including the home page — this file does not. Do not add
   a copy back here; two definitions are what made the home page and the rest
   of the site disagree about what the cart looked like. */

.xb-menu{position:relative}
.xb-menu > summary{list-style:none;cursor:pointer;color:#fff;padding:9px 13px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background .15s ease,color .15s ease}
.xb-menu > summary::-webkit-details-marker{display:none}
.xb-menu > summary::marker{content:""}
.xb-menu > summary:hover{color:#FD0000}
.xb-menu[open] > summary{background:#FD0000;color:#fff}
.xb-caret{width:0;height:0;border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;border-top:5px solid currentColor;
  transition:transform .15s ease}
.xb-menu[open] .xb-caret{transform:rotate(180deg)}
.xb-menu-panel{position:absolute;top:calc(100% + 3px);right:0;min-width:212px;
  background:#232323;border:1px solid #3d3d3d;border-top:3px solid #FD0000;
  box-shadow:0 14px 34px rgba(0,0,0,.55);z-index:60;padding:5px 0}
.xb-menu-panel a{display:block;color:#fff;text-decoration:none;padding:11px 17px;
  font-size:.86rem;letter-spacing:.03em;white-space:nowrap}
.xb-menu-panel a:hover,.xb-menu-panel a:focus{background:#FD0000;color:#fff}
.xb-menu-out{border-top:1px solid #3d3d3d;margin-top:5px;padding-top:12px !important;
  color:#9aa1aa !important}
.xb-menu-out:hover{color:#fff !important}
@media(max-width:620px){
  .xb-hdr-right > a,.xb-menu > summary{padding:8px 10px;font-size:.82rem}
}

/* ---------- page shell ---------- */
.xb-store-main{padding:34px 0 60px;min-height:52vh}
.xb-store-title{font-family:"Rajdhani",sans-serif;text-transform:uppercase;
  color:#FD0000;font-size:2rem;letter-spacing:.02em;margin:0 0 22px}

.xb-store-footer{background:#0d0d0d;border-top:1px solid #3d3d3d;padding:30px 0 38px;
  text-align:center}
.xb-store-footer .logo{justify-content:center;margin-bottom:14px}
.xb-store-footer .logo img{height:30px}
.xb-foot-pledge{font-family:"Rajdhani",sans-serif;font-weight:700;color:#fff;
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.xb-foot-meta{color:#9aa1aa;font-size:.84rem;margin:0}
.xb-foot-meta a{color:#FD0000;text-decoration:none}

/* ==================================================================
   Checkout — form left, order summary in a sticky right rail
   ================================================================== */

.woocommerce-checkout form.checkout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,400px);
  grid-template-areas:"cust rhead" "cust review";
  column-gap:36px;align-items:start}
.woocommerce-checkout #customer_details{grid-area:cust}
.woocommerce-checkout #order_review_heading{grid-area:rhead;margin-top:0}
.woocommerce-checkout #order_review{grid-area:review;position:sticky;top:82px}

/* inside the left column, billing and shipping stack rather than sitting
   side by side in half the width they had before */
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  width:100%;float:none;display:block}
.woocommerce-checkout #customer_details .col-2{margin-top:26px}

/* Billing and shipping fields on a 24-column grid.
   WooCommerce's own form-row-first / form-row-last only ever split a row in
   half, which is why city, state and ZIP each took a full line. A grid lets
   them sit at the proportions the fields actually need. Everything defaults
   to full width, so a field we have not named still behaves.

   24 rather than 12 so that half of a 7-column field is expressible. Every
   span below is simply the old 12-column value doubled, which is not an
   approximation: with repeat(N,1fr) and a fixed column-gap, a span of 2k in
   24 columns resolves to exactly the same width as a span of k in 12. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(24,1fr);column-gap:14px;
  /* the card itself — see the note beside the h3 rule near the top of this
     file. It lives here, one level below .woocommerce-billing-fields, so the
     heading and its red rule fall outside the box the way YOUR ORDER's do. */
  background:var(--xb-card);
  border:1px solid var(--xb-line);
  padding:22px}
/* Every row states its START column, not just its width. Grid auto-placement
   is "sparse": a narrow item will slide into whatever space is left on the
   row above it. With company at 6 and apartment at 4, City would have landed
   beside the apartment number rather than under it. Pinning each field to
   column 1 forces a new row, because two items cannot share one cell. The
   two deliberate pairs — first/last and state/ZIP — are the only fields that
   name a start column other than 1. */
.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row{
  grid-column:1 / span 24;float:none;width:auto;padding:0}

#billing_first_name_field,#shipping_first_name_field{grid-column:1 / span 12}
#billing_last_name_field, #shipping_last_name_field {grid-column:13 / span 12}

/* Field widths carry meaning: a box sized to its content tells you how much
   to type before you start typing. A ZIP that is 5 columns wide is telling
   the truth about itself; one that runs the full width is not. */
#billing_company_field,  #shipping_company_field  {grid-column:1 / span 12}

/* Street address and Apt share a line, 14/10. */
#billing_address_1_field,#shipping_address_1_field{grid-column:1 / span 14}
#billing_address_2_field,#shipping_address_2_field{grid-column:15 / span 10}

/* City, then state / ZIP / country sharing the line below.
   State and ZIP are half their former widths. A state dropdown at 7 of 24 is
   narrow, but it is a select — the value is chosen, never typed, and it only
   has to display one state name rather than accept an arbitrary one. ZIP at
   5 of 24 still clears five digits plus the four of a ZIP+4. */
#billing_city_field,     #shipping_city_field    {grid-column:1 / span 12}
#billing_state_field,    #shipping_state_field   {grid-column:1 / span 7}
#billing_postcode_field, #shipping_postcode_field{grid-column:8 / span 5}
/* no grid position for the country field — it is hidden outright below */

/* Phone is optional and a phone number is short. Half width says both without
   a word of copy. Email stays full — an address can run long, and it is the
   one field the whole order depends on reaching. */
#billing_phone_field,    #shipping_phone_field   {grid-column:1 / span 12}

/* the state select is a select2 in WooCommerce and will not shrink on its own */
#billing_state_field .select2-container,
#shipping_state_field .select2-container{width:100% !important}

/* ---- Country --------------------------------------------------------
   WooCommerce's country row is hidden outright. We sell to one country, so it
   renders as fixed text plus a hidden input; the hidden input is what actually
   posts billing_country, and a hidden input submits regardless of CSS. So this
   removes the row from the page without removing the value from the order.

   display:none is deliberate over a clip-based hide: there is nothing here to
   announce. !important because address-i18n.js calls .show() on locale fields,
   which would write an inline display and win over a plain rule.

   The visible USA is drawn on the ZIP field below instead, because this row
   renders in the wrong DOM position — WordPress reports priority 95 for it,
   which should place it after ZIP, but it arrives directly after Company and
   the grid honours DOM order. That ordering bug is still open; this sidesteps
   it rather than fixing it. */
#billing_country_field,
#shipping_country_field{display:none !important}

/* ---- USA beside the ZIP field ---------------------------------------
   Drawn on the ZIP row rather than placed as its own grid item, so it cannot
   be moved by whatever is reordering the country field.

   This is a second place that asserts the country: WooCommerce posts "US"
   from the hidden input, and this line says "USA" independently. They agree
   today because the store sells only to the United States — see the
   woocommerce_countries filter in xb-checkout.php, which renames US to USA.
   If the store ever ships outside the US, this line has to change with it;
   nothing will warn you. */
#billing_postcode_field,
#shipping_postcode_field{position:relative}

#billing_postcode_field::after,
#shipping_postcode_field::after{
  content:"USA";
  position:absolute;
  left:calc(100% + 14px);      /* the field's right edge plus the grid gap */
  bottom:0;                    /* the field box ends at the input, so this
                                  lines USA up with the input, not the label */
  line-height:30px;            /* the input's height — centres the text on it */
  white-space:nowrap;
  font-family:var(--xb-disp);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.06em;
  color:var(--xb-red);
  pointer-events:none;
}

/* three fields across is unusable on a phone */
@media(max-width:600px){
  .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-shipping-fields__field-wrapper > .form-row{grid-column:1 / span 24 !important}
  /* ZIP is full width on a phone, so there is no room to its right. USA drops
     underneath it instead of being pushed off the edge of the screen. */
  #billing_postcode_field::after,
  #shipping_postcode_field::after{
    position:static;display:block;margin-top:6px;line-height:1.2;font-size:1.2rem}
}

@media(max-width:980px){
  .woocommerce-checkout form.checkout{display:block}
  .woocommerce-checkout #order_review{position:static}
  .woocommerce-checkout #order_review_heading{margin-top:30px}
}

/* ---------- coupon / notice bar ---------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message{
  background:#1b1b1b !important;color:#c9ced3 !important;
  border-top:3px solid #FD0000;box-shadow:none;padding:14px 18px}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before{color:#FD0000}
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a{color:#FD0000;font-weight:600}
.woocommerce form.checkout_coupon{background:#1b1b1b;border:1px solid #3d3d3d}

/* ---------- payment box ---------- */
.woocommerce-checkout #payment{background:#1b1b1b;border:1px solid #3d3d3d;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid #3d3d3d;padding:18px}
.woocommerce-checkout #payment ul.payment_methods li{color:#fff}
.woocommerce-checkout #payment ul.payment_methods label{color:#fff;font-weight:600}
.woocommerce-checkout #payment div.payment_box{
  background:#2b2b2b;color:#c9ced3;font-size:.88rem}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#2b2b2b}
.woocommerce-checkout #payment div.form-row.place-order{padding:18px;border-top:1px solid #3d3d3d}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{color:#9aa1aa;font-size:.82rem}

/* ---------- the proof pledge, above Place Order ---------- */
.xb-pledge{background:#232323;border:1px solid #3d3d3d;border-left:4px solid #FD0000;
  padding:16px 18px;margin:0 18px 4px}
.xb-pledge-head{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:#FD0000;font-size:1.02rem;margin:0 0 8px}
.xb-pledge p{color:#c9ced3;font-size:.86rem;margin:0 0 8px;line-height:1.5}
.xb-pledge p:last-child{margin-bottom:0}
.xb-pledge strong{color:#fff}
.xb-pledge a{color:#FD0000;font-weight:600}
.xb-pledge-art{border-top:1px solid #3d3d3d;padding-top:9px;margin-top:10px !important}

/* ---------- form fields: soft grey, not glaring white ---------- */
body.xb-store input[type=text],
body.xb-store input[type=email],
body.xb-store input[type=tel],
body.xb-store input[type=url],
body.xb-store input[type=number],
body.xb-store input[type=password],
body.xb-store input[type=search],
body.xb-store select,
body.xb-store textarea,
body.xb-store .select2-container .select2-selection--single{
  background:#e4e6e8 !important;border:1px solid #a8adb2 !important;
  color:#111 !important;border-radius:2px}
body.xb-store input::placeholder,
body.xb-store textarea::placeholder{color:#6b7075;opacity:1}
body.xb-store input:focus,
body.xb-store select:focus,
body.xb-store textarea:focus{
  background:#f2f3f4 !important;border-color:#FD0000 !important;outline:none;
  box-shadow:0 0 0 2px rgba(253,0,0,.22)}
body.xb-store input:-webkit-autofill,
body.xb-store input:-webkit-autofill:hover,
body.xb-store input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #e4e6e8 inset;
  -webkit-text-fill-color:#111;caret-color:#111}

/* ---------- notice banners (coupon prompt, errors, confirmations) ---------- */
body.xb-store .wc-block-components-notice-banner{
  background:#1b1b1b !important;border:1px solid #3d3d3d !important;
  border-left:4px solid #FD0000 !important;border-radius:0 !important;
  color:#c9ced3 !important;box-shadow:none}
body.xb-store .wc-block-components-notice-banner__content{color:#c9ced3 !important}
body.xb-store .wc-block-components-notice-banner svg{fill:#FD0000}
body.xb-store .wc-block-components-notice-banner a{color:#FD0000;font-weight:600}
body.xb-store .wc-block-components-notice-banner.is-success{border-left-color:#28a35a !important}
body.xb-store .wc-block-components-notice-banner.is-success svg{fill:#28a35a}
body.xb-store select.country_to_state{width:100%}

/* ==================================================================
   XBALM — order status page
   Status and documents first, addresses next, the receipt last.
   Appended to xbalm-front.css.
   ================================================================== */

/* ---------- section order on the view-order page ---------- */
body.woocommerce-view-order .woocommerce-MyAccount-content{
  display:flex;flex-direction:column}
/* the "Order #23 was placed on … and is currently …" line duplicates the
   progress bar and the status detail below it */
body.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type{display:none}
body.woocommerce-view-order .xb-panel{order:1}
body.woocommerce-view-order .woocommerce-customer-details{order:2}
body.woocommerce-view-order .woocommerce-order-details{order:3}

.xb-panel{margin:0 0 34px}
.xb-sec{font-family:"Rajdhani",sans-serif;text-transform:uppercase;color:#FD0000;
  font-size:1.05rem;letter-spacing:.05em;margin:30px 0 12px}
.xb-fine{color:#9aa1aa;font-size:.82rem;margin:10px 0 0;line-height:1.5}

/* ---------- order reference chip ---------- */
.xb-ref{display:inline-block;background:#FD0000;color:#fff;padding:6px 14px;
  font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.08em;
  font-size:.95rem;margin:0 0 20px}

/* ---------- document cards ---------- */
.xb-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin:0 0 26px}
.xb-doc{background:#1b1b1b;border:1px solid #3d3d3d;padding:14px;display:flex;
  flex-direction:column}
.xb-doc h3{margin:0 0 10px;font-family:"Rajdhani",sans-serif;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.09em;color:#9aa1aa;font-weight:700}
.xb-doc-thumb{display:flex;align-items:center;justify-content:center;
  height:200px;background:#fff;border:1px solid #3d3d3d;overflow:hidden;
  transition:border-color .15s ease}
a.xb-doc-thumb:hover{border-color:#FD0000}
.xb-doc-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.xb-doc-noimg{background:#2b2b2b;color:#6f7479;font-family:"Rajdhani",sans-serif;
  font-weight:700;letter-spacing:.1em;font-size:1.1rem}
.xb-doc-ref{margin:10px 0 8px;font-family:"Rajdhani",sans-serif;font-weight:700;
  font-size:.9rem;color:#fff;letter-spacing:.03em;word-break:break-all}
.xb-doc-acts{margin-top:auto;display:flex;gap:14px}
.xb-doc-acts a{color:#FD0000;font-size:.84rem;font-weight:600;text-decoration:none}
.xb-doc-acts a:hover{text-decoration:underline}

/* ---------- progress bar ---------- */
.xb-prog{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap}
.xb-prog li{flex:1 1 0;min-width:92px;text-align:center;position:relative;
  padding-top:30px;font-size:.75rem;color:#8a8a8a;line-height:1.35}
.xb-prog li:before{content:"";position:absolute;top:11px;left:0;right:0;
  height:2px;background:#3d3d3d}
.xb-prog li:first-child:before{left:50%}
.xb-prog li:last-child:before{right:50%}
.xb-prog li.done:before,.xb-prog li.now:before{background:#FD0000}
.xb-prog .dot{position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:#3d3d3d;color:#fff;
  font-size:11px;line-height:18px}
.xb-prog li.done .dot{background:#FD0000}
.xb-prog li.now .dot{background:#FD0000;box-shadow:0 0 0 4px rgba(253,0,0,.25)}
.xb-prog li.now .lbl,.xb-prog li.done .lbl{color:#fff;font-weight:600}

/* ---------- status detail ---------- */
.xb-detail{padding:14px 18px;font-size:.9rem;color:#d7dade;line-height:1.55;
  border:1px solid #3d3d3d;border-left:4px solid #6f7479;background:#1b1b1b}
.xb-detail a{color:#FD0000;font-weight:600}
.xb-detail strong{color:#fff}
.xb-detail--ok{background:#12271b;border-color:#2c5f41;border-left-color:#28a35a}
.xb-detail--wait{background:#2a1618;border-color:#5f2c30;border-left-color:#FD0000}
.xb-detail--go{background:#1b1b1b;border-left-color:#9aa1aa}

/* ---------- approval ---------- */
.xb-approve{border:2px solid #FD0000;background:#1b1b1b;padding:22px;margin:0 0 26px}
.xb-approve h3{margin:0 0 8px;font-family:"Rajdhani",sans-serif;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.04em;color:#fff}
.xb-approve p{color:#c9ced3;font-size:.9rem;margin:0 0 8px}
.xb-approve ul{margin:10px 0 18px 20px;font-size:.9rem;color:#c9ced3}
.xb-btn{background:#FD0000;color:#fff;border:none;padding:15px 30px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;font-size:.95rem;
  font-family:"Rajdhani",sans-serif;transition:background .15s ease}
.xb-btn:hover{background:#C50000}

/* ---------- batch codes ---------- */
.xb-batch{width:auto;font-size:.9rem;margin-top:6px;color:#c9ced3}
.xb-batch td{padding:4px 22px 4px 0;border:none}
.xb-batch strong{color:#fff}

/* ---------- orders list flag ---------- */
.xb-flag{color:#FD0000}

/* ==================================================================
   XBALM — per-label approval table on the order page
   ================================================================== */

.xb-lead{color:#c9ced3;font-size:.92rem;margin:0 0 16px;line-height:1.55}
.xb-lead strong{color:#fff}

.xb-lt{width:100%;border-collapse:collapse;margin:0 0 4px}
.xb-lt thead th{background:#FD0000;color:#fff;font-family:"Rajdhani",sans-serif;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  padding:9px 12px;text-align:left;border:none}
.xb-lt th.n,.xb-lt td.n{text-align:right}
.xb-lt th.c,.xb-lt td.c{text-align:center}
.xb-lt tbody td{background:#1b1b1b;border-bottom:1px solid #3d3d3d;padding:12px;
  color:#e8eaed;font-size:.9rem;vertical-align:middle}
.xb-lt tbody tr:last-child td{border-bottom:none}
.xb-lt tbody td strong{color:#fff;font-family:"Rajdhani",sans-serif;letter-spacing:.03em}
.xb-lt-approved td{background:#14231a}
.xb-lt-changes td{background:#241618}
.xb-lt-conf td{background:#161616;border-top:2px solid #3d3d3d}

/* small label thumbnail in the row */
.xb-lt-thumb{display:inline-flex;align-items:center;justify-content:center;
  width:96px;height:64px;background:#fff;border:1px solid #3d3d3d;overflow:hidden;
  transition:border-color .15s ease}
.xb-lt-thumb:hover{border-color:#FD0000}
.xb-lt-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.xb-lt-pending{color:#6f7479;font-size:.84rem}
.xb-lt td.c a{color:#FD0000;font-weight:600;text-decoration:none}
.xb-lt td.c a:hover{text-decoration:underline}

/* approve control */
.xb-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#2b2b2b;border:1px solid #5a5a5a;padding:8px 14px;
  font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.82rem;color:#fff;transition:border-color .15s ease,background .15s ease}
.xb-check:hover{border-color:#FD0000;background:#332727}
.xb-check input{width:17px;height:17px;accent-color:#FD0000;margin:0;cursor:pointer}
.xb-tick{display:block;color:#3ec26f;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.86rem}
.xb-chg{display:block;color:#FD0000;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.86rem}
.xb-when{display:block;color:#9aa1aa;font-size:.74rem;margin-top:3px;font-weight:400;
  text-transform:none;letter-spacing:0}

/* request changes */
.xb-ask{margin-top:8px;text-align:left}
.xb-ask summary{cursor:pointer;color:#9aa1aa;font-size:.76rem;text-align:center}
.xb-ask summary:hover{color:#FD0000}
.xb-ask textarea{width:100%;margin-top:8px;background:#e4e6e8;border:1px solid #a8adb2;
  color:#111;padding:8px 10px;font-size:.84rem;border-radius:2px}
.xb-btn-sm{background:#FD0000;color:#fff;border:none;padding:7px 14px;margin-top:6px;
  font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.78rem;cursor:pointer}
.xb-btn-sm:hover{background:#C50000}

.xb-lt-submit{margin:18px 0 26px}

/* stack into cards on narrow screens rather than scrolling sideways */
@media(max-width:820px){
  .xb-lt thead{display:none}
  .xb-lt,.xb-lt tbody,.xb-lt tr,.xb-lt td{display:block;width:100%}
  .xb-lt tbody tr{margin-bottom:14px;border:1px solid #3d3d3d}
  .xb-lt tbody td{display:flex;justify-content:space-between;align-items:center;
    gap:14px;border-bottom:1px solid #2b2b2b;text-align:right}
  .xb-lt tbody td:before{content:attr(data-l);color:#9aa1aa;font-size:.74rem;
    text-transform:uppercase;letter-spacing:.06em;text-align:left}
  .xb-lt td.c,.xb-lt td.n{text-align:right}
}

/* ==================================================================
   XBALM — label review window
   Approval happens after looking at the label, not next to it.
   ================================================================== */

/* the row control */
.xb-cell{display:inline-block}
.xb-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.xb-review{background:#2b2b2b;border:1px solid #5a5a5a;color:#fff;cursor:pointer;
  padding:9px 16px;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;white-space:nowrap;
  transition:border-color .15s ease,background .15s ease}
.xb-review:hover{border-color:#FD0000;background:#332727}
.xb-picked{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.xb-undo{background:none;border:none;color:#9aa1aa;font-size:.72rem;cursor:pointer;
  text-decoration:underline;padding:0}
.xb-undo:hover{color:#FD0000}
.xb-lt-picked td{background:#14231a}

button.xb-lt-thumb{padding:0;cursor:pointer}

/* the window */
.xb-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:24px}
.xb-modal[hidden]{display:none}
.xb-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.82)}
.xb-modal-card{position:relative;background:#1b1b1b;border:1px solid #3d3d3d;
  border-top:4px solid #FD0000;max-width:860px;width:100%;max-height:92vh;
  overflow:auto;padding:20px 24px 24px}
.xb-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.xb-modal-head h3{margin:0;font-family:"Rajdhani",sans-serif;text-transform:uppercase;
  letter-spacing:.04em;color:#fff;font-size:1.3rem}
.xb-modal-part{color:#FD0000;font-family:"Rajdhani",sans-serif;font-weight:700;
  letter-spacing:.08em;font-size:.9rem}
.xb-modal-x{background:none;border:none;color:#9aa1aa;font-size:1.9rem;line-height:1;
  cursor:pointer;padding:0 4px}
.xb-modal-x:hover{color:#fff}

.xb-modal-img{background:#fff;border:1px solid #3d3d3d;margin:16px 0 12px;
  display:flex;align-items:center;justify-content:center;min-height:220px;padding:10px}
.xb-modal-img img{max-width:100%;max-height:58vh;object-fit:contain;display:block}

.xb-modal-verify{color:#c9ced3;font-size:.86rem;margin:0 0 16px;line-height:1.55}
.xb-modal-verify a{color:#FD0000;font-weight:600}

.xb-modal-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.xb-btn-ghost{background:none;border:1px solid #5a5a5a;color:#c9ced3;cursor:pointer;
  padding:15px 24px;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;
  transition:border-color .15s ease,color .15s ease}
.xb-btn-ghost:hover{border-color:#FD0000;color:#fff}

.xb-modal-note{margin-top:16px;border-top:1px solid #3d3d3d;padding-top:16px}
.xb-modal-note[hidden]{display:none}
.xb-modal-note label{display:block;color:#c9ced3;font-size:.84rem;margin-bottom:6px}
.xb-modal-note textarea{width:100%;background:#e4e6e8;border:1px solid #a8adb2;color:#111;
  padding:10px 12px;font-size:.9rem;border-radius:2px;margin-bottom:10px}

@media(max-width:620px){
  .xb-modal{padding:0}
  .xb-modal-card{max-height:100vh;border-top-width:3px}
  .xb-modal-img img{max-height:44vh}
  .xb-modal-foot .xb-btn,.xb-modal-foot .xb-btn-ghost{flex:1 1 100%}
}

/* the hidden attribute must beat our own display rules */
.xb-cell [hidden],
.xb-picked[hidden],
.xb-check[hidden],
.xb-fallback[hidden]{display:none !important}

/* ==================================================================
   XBALM — order totals and the ship-to submit block
   The page is the order confirmation now, so the total and the
   destination have to carry that weight.
   ================================================================== */

.xb-lt tfoot td{background:#161616;border-top:1px solid #3d3d3d;padding:9px 12px;
  color:#c9ced3;font-size:.88rem}
.xb-lt tfoot tr:first-child td{border-top:2px solid #3d3d3d}
.xb-lt-total td{background:#1f1f1f !important;color:#fff !important;
  font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.04em;
  font-size:1.05rem;text-transform:uppercase}

.xb-submit{background:#1b1b1b;border:1px solid #3d3d3d;border-left:4px solid #FD0000;
  padding:24px 26px;margin:24px 0 30px}
.xb-submit h3{margin:0 0 10px;font-family:"Rajdhani",sans-serif;text-transform:uppercase;
  letter-spacing:.05em;color:#FD0000;font-size:1.05rem}
.xb-submit-addr{font-style:normal;color:#fff;font-size:1.08rem;line-height:1.55;
  margin:0 0 4px}
.xb-submit-ph{color:#c9ced3;font-size:.92rem;margin:0 0 18px}
.xb-submit-addr + .xb-btn-big{margin-top:18px}

.xb-btn-big{display:inline-block;padding:18px 44px;font-size:1.12rem}
.xb-submit .xb-fine{margin-top:14px;max-width:62ch}
.xb-submit .xb-fine a{color:#FD0000;font-weight:600}

@media(max-width:620px){
  .xb-btn-big{display:block;width:100%;padding:18px 20px}
  .xb-lt tfoot td{font-size:.84rem}
}
.xb-artlink{color:#9aa1aa;font-size:.84rem;margin:0 0 18px}
.xb-artlink a{color:#9aa1aa;text-decoration:underline}
.xb-artlink a:hover{color:#FD0000}

/* ==================================================================
   XBALM — account pages without the left column
   Navigation moved to the header; the content takes the full width.
   ================================================================== */

body.woocommerce-account .woocommerce-MyAccount-navigation{display:none !important}
body.woocommerce-account .woocommerce-MyAccount-content{
  width:100% !important;float:none !important;margin:0 !important;padding:0 !important}

/* the block theme's own post title would now duplicate our heading */
body.woocommerce-account .wp-block-post-title{display:none !important}

.xb-acct-title{font-family:"Rajdhani",sans-serif;text-transform:uppercase;
  color:#FD0000;font-size:2.3rem;letter-spacing:.02em;font-weight:700;
  margin:0 0 6px;line-height:1.05}
.xb-acct-title + *{margin-top:0}

/* orders table — full width now, so let it breathe */
.woocommerce-orders-table{width:100%;border-collapse:collapse;margin-top:18px}
.woocommerce-orders-table thead th{background:#FD0000;color:#fff;
  font-family:"Rajdhani",sans-serif;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;padding:10px 12px;text-align:left;border:none}
.woocommerce-orders-table tbody td{background:#1b1b1b;border-bottom:1px solid #3d3d3d;
  padding:13px 12px;color:#e8eaed;font-size:.9rem;vertical-align:middle}
.woocommerce-orders-table tbody tr:last-child td{border-bottom:none}
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a{
  color:#fff;font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.04em;
  text-decoration:none}
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:hover{color:#FD0000}
.woocommerce-orders-table .woocommerce-button{background:#FD0000;color:#fff;border:none;
  padding:9px 18px;font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.8rem;text-decoration:none;display:inline-block;
  transition:background .15s ease}
.woocommerce-orders-table .woocommerce-button:hover{background:#C50000;color:#fff}

/* stack into cards on a phone rather than scrolling sideways */
@media(max-width:760px){
  .woocommerce-orders-table thead{display:none}
  .woocommerce-orders-table,
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr,
  .woocommerce-orders-table td{display:block;width:100%}
  .woocommerce-orders-table tbody tr{margin-bottom:14px;border:1px solid #3d3d3d}
  .woocommerce-orders-table tbody td{display:flex;justify-content:space-between;
    align-items:center;gap:14px;text-align:right;border-bottom:1px solid #2b2b2b}
  .woocommerce-orders-table tbody td:before{content:attr(data-title);color:#9aa1aa;
    font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;text-align:left}
  .xb-acct-title{font-size:1.8rem}
}

/* the block theme stacks 70px of margin, 70px of padding and 19px more above
   the first line of content — halved, since our own header already separates */
body.xb-woo main.wp-block-group{margin-top:35px !important}
body.xb-woo main > .wp-block-group{padding-top:35px !important}
body.xb-woo .entry-content{margin-top:10px !important}

/* the call to action, one clear line below the status box */
.xb-sec--call{margin-top:55px;font-size:1.35rem}

/* ship-to and bill-to side by side above the submit button */
.xb-submit-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:22px}
.xb-submit-col h3{margin:0 0 10px}
.xb-submit-col .xb-submit-addr{margin-bottom:4px}
.xb-submit-col .xb-submit-ph{margin:0}
@media(max-width:700px){.xb-submit-grid{grid-template-columns:1fr;gap:24px}}

/* ship-to and bill-to side by side above the submit button */
.xb-submit-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:22px}
.xb-submit-col h3{margin:0 0 10px}
.xb-submit-col .xb-submit-addr{margin-bottom:4px}
.xb-submit-col .xb-submit-ph{margin:0}
@media(max-width:700px){.xb-submit-grid{grid-template-columns:1fr;gap:24px}}

/* order total and payment status, up two points */
.xb-lt-total td{font-size:1.42rem !important}
.xb-lt-pay td{font-size:1.07rem !important}
.xb-cart-thumb{width:72px;height:auto;display:block;background:#fff;border:1px solid #3d3d3d}

/* staff console queue */
.xb-q-now{color:#FD0000}
.xb-q-them{color:#9aa1aa}
.xb-q-done{color:#3ec26f}
.xb-q td{vertical-align:top}
.xb-q .xb-when{margin-top:2px}

/* ==================================================================
   XBALM — staff console
   Same surfaces as the customer side, so Amanda and the customer are
   looking at recognisably the same order.
   ================================================================== */

.xb-desk .xb-acct-title{margin-bottom:4px}

.xb-card{background:#1b1b1b;border:1px solid #3d3d3d;padding:10px 22px;margin:0 0 13px}
.xb-card p{color:#c9ced3;font-size:.9rem;margin:0 0 5px}
.xb-card p:last-child{margin-bottom:0}
.xb-card strong{color:#fff}
/* Links in a card are red — but a link that is dressed as a button is not a
   link for this purpose, it is a button, and it brought its own colour.
   Without the exclusion this rule (0,1,1) beat .xb-btn (0,1,0) and painted
   red text onto the red button, which is how "Download PDF" came out
   invisible. .xb-btn-quiet was wrong in the same way and only looked right
   because its background is transparent.

   :where() carries no specificity, so the rule still weighs exactly what it
   did before — it simply stops matching things that style themselves. */
.xb-card a:not(:where(.xb-btn,.xb-btn-sm,.xb-btn-big,.xb-btn-quiet,.xb-btn-ghost)){
  color:#FD0000;font-weight:600}

/* A link dressed as a button is not underlined, because buttons are not.
   This became visible only once the colour fix above stopped .xb-card a
   from winning — the underline was always there, hidden under red-on-red
   text. One bug was sitting behind another. */
a.xb-btn,a.xb-btn-sm,a.xb-btn-big,a.xb-btn-quiet,a.xb-btn-ghost,
a.xb-btn:hover,a.xb-btn-sm:hover,a.xb-btn-big:hover,
a.xb-btn-quiet:hover,a.xb-btn-ghost:hover{text-decoration:none}

.xb-f{display:block;margin:0 0 16px;color:#c9ced3;font-size:.86rem}
/* type=email and type=tel are styled with type=text, not left to the browser.
   The quotation's Email field was added as type=email and came out narrow and
   pale beside the fields above it — it looked broken, and it was just unstyled. */
.xb-f input[type=text],.xb-f input[type=email],.xb-f input[type=tel]{
  display:block;width:100%;max-width:420px;margin-top:6px;
  background:#e4e6e8;border:1px solid #a8adb2;color:#111;padding:10px 12px;border-radius:2px}

/* Label beside the field rather than above it.
 *
 * For a short stack of related facts — who the customer is — the stacked form
 * costs two lines each and makes the block twice as tall as the thing it
 * describes. The values line up down a single column, which is what makes a
 * missing one obvious at a glance. */
/* minmax(0,315px), not a flat 315px.
 *
 * 8.5rem + 315px + the gap is about 465px of content. Inside the two-column
 * form that column is only ~430px once the viewport is near 900px — and the
 * media query below keys off the VIEWPORT, not the column, so a flat 315px
 * would overflow in the gap between the two. minmax lets it shrink instead. */
.xb-f-side{display:grid;grid-template-columns:8.5rem minmax(0,315px);
  align-items:center;gap:0 14px;margin:0 0 8px}
.xb-f-side label{margin:0}

/* The COLUMN is a fixed 315px, not the input.
 *
 * An input sizes itself from its `size` attribute and its type, which is why
 * the email field came out half an inch wider than the three text fields above
 * it and ran outside the block. Letting the grid decide means every field is
 * the same width whatever it holds, and a long address scrolls inside the box
 * instead of stretching it. 315px is about 75% of the 420px these were.
 *
 * min-width:0 because a grid item will not shrink below its intrinsic size
 * without it, which is the other half of the same bug. */
.xb-f-side input[type=text],.xb-f-side input[type=email],.xb-f-side input[type=tel]{
  margin-top:0;width:100%;max-width:100%;min-width:0;box-sizing:border-box}

/* Below 700px everything goes vertical — one column, labels above their
   fields, no side-by-side anything. A narrow screen has room for one of these
   at a time, and a two-column grid squeezed into 380px is worse than a list.
   .xb-2col collapses on its own rule above; these are the parts that did not. */
@media(max-width:700px){
  .xb-f-side{grid-template-columns:minmax(0,315px);gap:0;margin-bottom:14px}
  .xb-f-side input[type=text],.xb-f-side input[type=email],.xb-f-side input[type=tel]{
    margin-top:6px}
  .xb-f-side > .xb-pair{grid-column:1}
  .xb-pair{grid-template-columns:minmax(0,315px);gap:0}
  .xb-pair label{margin-top:10px}
  .xb-pair input[type=text]{margin-top:6px}
  .xb-addrpair{gap:0}
  .xb-addrpair > div + div{margin-top:22px}
}

/* Bill to and Ship to, side by side with their headings level.
 *
 * align-items:start, because the two blocks are not the same height — Ship to
 * has Company and Attention that Bill to does not — and the default stretch
 * would leave the shorter one's heading floating in the middle of the taller
 * one. The pair is read by comparing them, so the tops have to line up. */
.xb-addrpair{align-items:start}
.xb-addrpair .xb-sec{margin-top:0}

/* State and ZIP on one line: two halves of one line of an address. */
.xb-pair{display:grid;grid-template-columns:4.5rem auto minmax(0,1fr);
  align-items:center;gap:0 10px}
.xb-pair label{margin:0;white-space:nowrap}
.xb-pair input[type=text]{margin-top:0;width:100%;min-width:0;box-sizing:border-box}
.xb-f input[type=file]{display:block;margin-top:8px;color:#c9ced3;font-size:.84rem}
.xb-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:700px){.xb-2col{grid-template-columns:1fr;gap:0}}

.xb-card .xb-btn{margin:6px 10px 0 0}
.xb-btn[disabled]{background:#3d3d3d;color:#8a8a8a;cursor:not-allowed}
.xb-btn[disabled]:hover{background:#3d3d3d}

.xb-warn{color:#f0a500 !important}
.xb-ok-line{color:#3ec26f !important;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}

.xb-mini{display:inline-flex;align-items:center;gap:7px;color:#c9ced3;font-size:.78rem;
  margin-top:3px;cursor:pointer}
.xb-mini input{accent-color:#FD0000;width:15px;height:15px;margin:0}

.xb-lt input[type=file]{max-width:190px;font-size:.78rem;color:#c9ced3}

.xb-batchtable{border-collapse:collapse;margin:0 0 16px}
.xb-batchtable th{text-align:left;color:#9aa1aa;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.06em;padding:0 12px 6px 0;font-weight:700}
.xb-batchtable td{padding:0 12px 8px 0}
.xb-batchtable input{background:#e4e6e8;border:1px solid #a8adb2;color:#111;
  padding:8px 10px;border-radius:2px;width:200px}

.xb-notes{max-height:340px;overflow:auto}
.xb-note{border-bottom:1px solid #2b2b2b;padding-bottom:8px;margin-bottom:8px !important;
  font-size:.86rem;color:#c9ced3}
.xb-note:last-child{border-bottom:none}
.xb-note .xb-when{display:block}

/* ==================================================================
   XBALM — customer artwork upload on the order page
   ================================================================== */

.xb-artbox{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start;
  background:#1b1b1b;border:1px solid #3d3d3d;border-left:4px solid #FD0000;
  padding:22px 24px;margin:0 0 26px}
@media(max-width:760px){.xb-artbox{grid-template-columns:1fr;gap:18px}}

.xb-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:150px;padding:22px;cursor:pointer;text-align:center;
  background:#232323;border:2px dashed #5a5a5a;transition:border-color .15s ease,background .15s ease}
.xb-drop:hover,.xb-drop.over{border-color:#FD0000;background:#2b2222}
.xb-drop.has{border-style:solid;border-color:#3ec26f}
.xb-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.xb-drop-big{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:#fff;font-size:1.25rem}
.xb-drop-sub{color:#9aa1aa;font-size:.84rem}
.xb-drop-name{color:#3ec26f;font-size:.88rem;font-weight:600;margin-top:8px;word-break:break-all}
.xb-drop-name[hidden]{display:none}

.xb-artform .xb-btn{margin-top:14px}
.xb-artform .xb-fine{max-width:52ch}

.xb-artalt{border-left:1px solid #3d3d3d;padding-left:26px}
@media(max-width:760px){.xb-artalt{border-left:none;border-top:1px solid #3d3d3d;
  padding-left:0;padding-top:16px}}
.xb-artalt a{color:#FD0000;font-weight:600}
.xb-artalt strong{color:#fff}

/* artwork panel: narrower drop zone, button and email route beside it */
.xb-artbox{grid-template-columns:320px minmax(0,1fr) !important;gap:26px !important}
.xb-artside{display:flex;flex-direction:column;align-items:flex-start}
.xb-artside .xb-btn{margin:0 0 12px}
.xb-artalt{border-left:none !important;padding-left:0 !important;
  border-top:1px solid #3d3d3d;padding-top:14px;margin-top:6px}
@media(max-width:760px){
  .xb-artbox{grid-template-columns:1fr !important}
  .xb-artside{align-items:stretch}
  .xb-artside .xb-btn{width:100%}
}

/* drop zone inside the console card — no red rail, it already sits in one */
.xb-artbox--desk{border:none !important;padding:0 !important;margin:8px 0 0 !important;
  background:transparent !important}
.xb-artbox--desk .xb-artside{justify-content:flex-start}

/* section 1: artwork left, SAP entry right */
.xb-entrygrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:17px;align-items:start}
.xb-entry-art .xb-drop{width:100%}
.xb-entry-art .xb-btn-wide{width:100%;margin-top:6px}
.xb-entry-art p:first-child{margin-top:0}
.xb-entry-sap .xb-f input[type=text]{max-width:100%}
@media(max-width:820px){.xb-entrygrid{grid-template-columns:1fr;gap:24px}}

/* padding and borders must sit inside the declared width, or a 100%-wide
   drop zone overflows its grid column and slides under the next one */
.xb-drop,.xb-card,.xb-btn-wide,.xb-f input[type=text],
.xb-artbox,.xb-entrygrid > div{box-sizing:border-box}

/* the SAP ID is 17 characters — the field should not be 800px wide */
.xb-entry-sap .xb-f input[type=text]{max-width:240px}
.xb-entry-sap .xb-f{margin-bottom:12px}
.xb-entry-sap .xb-f .xb-when{display:block;margin:3px 0 0;line-height:1.35}

/* replace-artwork disclosure, tucked under the file on record */
.xb-replace{margin-top:14px}
.xb-replace summary{cursor:pointer;color:#9aa1aa;font-size:.82rem}
.xb-replace summary:hover{color:#FD0000}
.xb-replace .xb-drop{margin-top:12px;min-height:110px}
.xb-replace .xb-drop-big{font-size:1rem}

/* ship-to, under the artwork — read off the screen and typed into SAP, so the
   lines are tight and the type is a touch larger than the surrounding notes */
.xb-shipto{margin-top:9px;padding-top:7px;border-top:1px solid #2d2d2d}
.xb-shipto-h{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;color:#9aa1aa;margin:0 0 7px}
.xb-shipto p{margin:0 0 1px;font-size:.9rem;line-height:1.45;color:#d6dade}
/* The heading's own margin is written here, as .xb-shipto p.xb-shipto-h, because
   .xb-shipto-h alone LOSES to .xb-shipto p on specificity — class versus
   class-plus-element. Chrome showed the original margin:0 0 7px struck through,
   so that rule has never applied to anyone. */
.xb-shipto p.xb-shipto-h{margin:0 0 4px}
.xb-shipto-co{font-weight:700;color:#fff !important}
.xb-shipto .xb-fine{margin-top:4px}

/* Submitting on the customer's behalf.
   The addresses are shown larger than fine print on purpose: Amanda is meant
   to read them down the phone, and text sized to be skimmed gets skimmed. */
.xb-subrec{margin-top:12px}
.xb-subaddr{margin:10px 0 12px;padding:10px 12px;background:#101010;
  border-left:2px solid var(--red)}
.xb-subaddr p{margin:0 0 2px;font-size:.88rem;line-height:1.5;color:#d6dade}
.xb-subaddr .xb-shipto-h{margin-top:8px}
.xb-subaddr .xb-shipto-h:first-child{margin-top:0}

/* Contact and money, beside the ship-to.
   Borrows .xb-shipto-h for its heading so the two blocks read as a pair at the
   same level rather than as one block and one afterthought. The label column
   is fixed so the four values line up; the value column may wrap, because a
   long email address in a 250px column has nowhere else to go and truncating
   an address Amanda might need to type is worse than a second line. */
.xb-ordermeta{margin-top:9px;padding-top:7px;border-top:1px solid #2d2d2d}
.xb-meta-row{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.xb-meta-k{flex:0 0 62px;font-family:"Rajdhani",sans-serif;font-weight:700;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#8a9098}
.xb-meta-v{flex:1 1 auto;min-width:0;font-size:.9rem;line-height:1.45;color:#d6dade;
  overflow-wrap:anywhere}
a.xb-meta-v{color:#d6dade;text-decoration:underline;text-underline-offset:2px}
a.xb-meta-v:hover{color:#fff}
.xb-meta-free{color:#3ec26f;font-weight:600}
.xb-ordermeta .xb-fine{margin:0}

/* Total is ruled off above, the way it would be on an invoice — the rows above
   it are components, this one is the answer. */
.xb-meta-total{margin-top:7px;padding-top:7px;border-top:1px solid #2d2d2d}
.xb-meta-total .xb-meta-v{font-weight:700;color:#fff}

/* Status carries the most weight of anything in this block: it is the line
   that decides whether the rest of the screen should be acted on at all. */
.xb-meta-paid,.xb-meta-confirming,.xb-meta-unpaid{
  font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.06em}
.xb-meta-paid{color:#3ec26f}
.xb-meta-confirming{color:#e2b33c}
.xb-meta-unpaid{color:#FD0000}

/* one line, one copy button. Always visible rather than revealed on hover —
   Amanda is copying every line in turn, so a control she has to go looking
   for is a control that costs her time on every order. */
.xb-shipto-row{display:flex;align-items:baseline;gap:10px;margin-bottom:1px}
.xb-shipto-row > span{flex:1 1 auto;font-size:.9rem;line-height:1.45;color:#d6dade;
  letter-spacing:.01em}
.xb-copy-mini{flex:0 0 auto;padding:1px 7px;font-size:.66rem;font-family:"Rajdhani",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
  background:transparent;color:#8a9098;border:1px solid #3d3d3d;border-radius:2px;
  transition:color .12s ease,border-color .12s ease,background .12s ease}
.xb-copy-mini:hover{color:#fff;border-color:#FD0000;background:#FD0000}
.xb-copy-mini:focus-visible{outline:2px solid #fff;outline-offset:2px}
.xb-copy-mini.copied{color:#3ec26f;border-color:#3ec26f;background:transparent}

/* what the customer was charged to ship, at the head of section 3 */
.xb-shipcost{display:flex;align-items:baseline;gap:10px;margin:0 0 16px;
  padding-bottom:13px;border-bottom:1px solid #2d2d2d}
.xb-shipcost-l{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;color:#9aa1aa}
.xb-shipcost strong{font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums}

/* staff file viewer */
.xb-filelinks{display:flex;gap:16px}
.xb-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.xb-lb[hidden]{display:none}
.xb-lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.xb-lb-card{position:relative;background:#1b1b1b;border:1px solid #3d3d3d;border-top:4px solid #FD0000;
  max-width:1000px;width:100%;max-height:94vh;display:flex;flex-direction:column;padding:16px 20px 18px}
.xb-lb-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.xb-lb-title{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:#fff;font-size:1.05rem;flex:1;word-break:break-all}
.xb-lb-count{color:#9aa1aa;font-size:.8rem;white-space:nowrap}
.xb-lb-img{background:#fff;border:1px solid #3d3d3d;flex:1;display:flex;align-items:center;
  justify-content:center;min-height:240px;padding:10px;overflow:auto}
.xb-lb-img img{max-width:100%;max-height:68vh;object-fit:contain;display:block}
.xb-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);
  border:1px solid #5a5a5a;color:#fff;font-size:2rem;line-height:1;padding:10px 16px;cursor:pointer;z-index:2}
.xb-lb-nav:hover{border-color:#FD0000;background:#000}
.xb-lb-prev{left:-6px}
.xb-lb-next{right:-6px}
/* flex-wrap:wrap added 19 October. The default is NOWRAP, so the email form's
   flex:0 0 100% did not move it to its own line — it took the width and
   squeezed Download, Email to someone and the hint into narrow columns beside
   it, each wrapping to three or four lines. The form is the only child that
   needs a row of its own; wrap is what lets it have one. */
.xb-lb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.xb-lb-dl{color:#FD0000;font-weight:600;text-decoration:none}
.xb-lb-dl:hover{text-decoration:underline}
@media(max-width:700px){.xb-lb{padding:0}.xb-lb-card{max-height:100vh}.xb-lb-img img{max-height:56vh}}

/* section 1 is a three-column workflow on a desktop screen */
.xb-entrygrid{grid-template-columns:290px 250px minmax(0,1fr) !important;gap:15px !important}
.xb-entry-artist textarea{width:100%;background:#e4e6e8;border:1px solid #a8adb2;color:#111;
  padding:10px 12px;border-radius:2px;margin-top:6px;font:inherit;font-size:.88rem;
  box-sizing:border-box;resize:vertical}
.xb-entry-artist textarea:disabled{background:#2b2b2b;color:#6f7479;border-color:#3d3d3d}
.xb-artist-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.xb-btn-ghost{background:none;border:1px solid #5a5a5a;color:#c9ced3}
.xb-btn-ghost:hover{border-color:#FD0000;background:none;color:#fff}
.xb-replace textarea{width:100%;background:#e4e6e8;border:1px solid #a8adb2;color:#111;
  padding:10px 12px;border-radius:2px;margin:10px 0;font:inherit;font-size:.88rem;box-sizing:border-box}
@media(max-width:1100px){.xb-entrygrid{grid-template-columns:1fr !important}}

/* the SAP ID, once recorded — the number Amanda works from */
.xb-sapid{font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.06em;
  color:#fff;font-size:1.3rem;margin:0 0 2px !important}
.xb-sapinput{width:100%;background:#e4e6e8;border:1px solid #a8adb2;color:#111;
  padding:9px 11px;border-radius:2px;box-sizing:border-box;font:inherit;font-size:.9rem}
.xb-sapid{color:#3ec26f !important;font-size:1.45rem !important}

/* the order ID doubles as a copy button */
button.xb-sapid{background:none;border:none;padding:0;cursor:pointer;text-align:left;
  font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.06em;
  color:#3ec26f;font-size:1.45rem;line-height:1.1}
button.xb-sapid:hover{color:#fff}
button.xb-sapid.copied{color:#fff}
button.xb-sapid,.xb-sapid{font-size:1.38rem !important}
button.xb-sapid,.xb-sapid{font-size:1.25rem !important}

/* compact drop zone, one per label row */
.xb-drop--mini{min-height:0;padding:12px 14px;gap:1px;width:180px;max-width:100%}
.xb-drop--mini .xb-drop-big{font-size:.85rem;letter-spacing:.03em}
.xb-drop--mini .xb-drop-sub{font-size:.72rem}
.xb-drop--mini .xb-drop-name{font-size:.74rem;margin-top:5px}
.xb-lt td .xb-drop--mini{margin:0}

/* submitted / not submitted, beside the approval tally */
.xb-tallyrow{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.xb-tallyrow p{margin:0;max-width:48ch}
.xb-sub{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;text-align:right;white-space:nowrap}
.xb-sub .xb-when{white-space:normal;text-align:right;max-width:26ch;margin-left:auto}
.xb-sub-yes{color:#3ec26f}
.xb-sub-no{color:#FD0000}

/* the status Amanda is scanning for — big enough to catch her eye,
   broken to one word per line so it reads as a stamp, not a sentence */
.xb-sub{font-size:2.1rem !important;line-height:1.02;white-space:normal !important;
  max-width:5.5ch;margin-left:auto}
.xb-sub .xb-when{font-size:.72rem;line-height:1.35;max-width:24ch;
  font-family:"Poppins",sans-serif;font-weight:400;letter-spacing:0;
  text-transform:none;display:block;margin-top:8px}

/* one line, centred in the right half, level with the tally */
.xb-tallyrow{align-items:flex-start}
.xb-tallyrow > p{flex:1 1 46%;margin:0}
.xb-sub{flex:1 1 46%;max-width:none !important;white-space:nowrap !important;
  text-align:center;font-size:1.9rem !important;margin:0 !important;align-self:flex-start}
.xb-sub .xb-when{text-align:center;max-width:none;margin:8px auto 0}
@media(max-width:1180px){.xb-sub{font-size:1.5rem !important}}
.xb-unsub{display:block;margin:6px auto 0;background:none;border:none;cursor:pointer;
  color:#9aa1aa;font-size:.74rem;text-decoration:underline;font-family:"Poppins",sans-serif;
  font-weight:400;letter-spacing:0;text-transform:none}
.xb-unsub:hover{color:#FD0000}

/* in-process control, under the submitted stamp */
.xb-subcol{flex:1 1 46%;display:flex;flex-direction:column;align-items:center}
.xb-subcol .xb-sub{flex:0 0 auto;width:100%}
.xb-prodbox{margin-top:18px;padding-top:16px;border-top:1px solid #3d3d3d;
  width:100%;max-width:340px;text-align:center}
.xb-prodnote{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:#fff;font-size:.95rem;margin:0 0 10px !important}
.xb-prodbox .xb-btn-wide{width:100%}
.xb-prodbox .xb-fine{margin-top:8px}
.xb-prodbox .xb-ok-line{margin:0 0 4px !important}
.xb-prodmail{justify-content:center;margin-top:10px}

/* shipping: narrow carrier, wide tracking */
.xb-shipgrid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.xb-shipgrid .xb-f input[type=text]{max-width:100%}
.xb-unsub-left{margin:10px 0 0;text-align:left}
@media(max-width:820px){.xb-shipgrid{grid-template-columns:1fr;gap:0}}

/* tracking box grows to fit what was pasted */
textarea.xb-grow{width:100%;background:#e4e6e8;border:1px solid #a8adb2;color:#111;
  padding:10px 12px;border-radius:2px;margin-top:6px;box-sizing:border-box;
  font:inherit;font-size:.92rem;line-height:1.45;overflow:hidden;resize:none;
  min-height:42px;font-variant-numeric:tabular-nums}
textarea.xb-grow:focus{background:#f2f3f4;border-color:#FD0000;outline:none;
  box-shadow:0 0 0 2px rgba(253,0,0,.22)}

/* shipped: carrier on its own line, then one tracking number per line */
.xb-carrier{display:block;margin-top:10px;font-family:"Rajdhani",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;font-size:1rem}
.xb-tracklist{display:block;margin-top:4px}
.xb-tracknum{display:block;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;line-height:1.7}

/* final invoice: file on the left, sending on the right */
.xb-invgrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:34px;align-items:start}
.xb-invgrid .xb-btn-wide{width:100%;margin-top:12px}
@media(max-width:820px){.xb-invgrid{grid-template-columns:1fr;gap:22px}}

/* proofs card: work on the left, order state on the right, both from the top */
.xb-proofgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start}
.xb-proofleft > p:first-child{margin-top:0}
.xb-proofleft .xb-f{margin:16px 0 12px;max-width:440px}
.xb-btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.xb-btnrow .xb-btn{margin:0}
.xb-subcol{margin:0}
@media(max-width:900px){.xb-proofgrid{grid-template-columns:1fr;gap:24px}}

/* progress bar in green — completed steps read as done, not as alerts */
.xb-prog li.done:before,.xb-prog li.now:before{background:#3ec26f}
.xb-prog li.done .dot{background:#3ec26f}
.xb-prog li.now .dot{background:#3ec26f;box-shadow:0 0 0 4px rgba(62,194,111,.25)}

/* document card sized to its thumbnail, with the reference and actions
   sharing one line beneath it */
.xb-docs{grid-template-columns:repeat(auto-fit,280px) !important;justify-content:start}
.xb-doc{display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"head head" "thumb thumb" "ref acts";
  gap:0 12px;align-content:start;padding:14px}
.xb-doc h3{grid-area:head}
.xb-doc-thumb{grid-area:thumb;height:auto !important;max-height:210px;padding:0}
.xb-doc-thumb img{max-height:210px;width:auto}
.xb-doc-noimg{grid-area:thumb;min-height:120px}
.xb-doc-ref{grid-area:ref;margin:10px 0 0 !important;align-self:center}
.xb-doc-acts{grid-area:acts;margin:10px 0 0 !important;justify-content:flex-end;align-self:center}

/* order page header: title and reference left, invoice right, tops level */
.xb-ohead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:34px;margin-bottom:22px;flex-wrap:wrap}
.xb-ohead-left{flex:1 1 340px;min-width:0}
.xb-ohead-right{flex:0 0 auto}
.xb-ohead .xb-acct-title{margin:0 0 8px}
.xb-ohead .xb-docs{margin:0}
.xb-oid{font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.06em;
  color:#fff;font-size:1.25rem;margin:0}
.xb-oid span{color:#FD0000}
@media(max-width:820px){.xb-ohead{gap:20px}}

/* staff header: logo, queue, sign out — nothing else */
.xb-deskhdr{background:#000;border-bottom:3px solid #fff;position:sticky;top:0;z-index:40}
.xb-deskhdr .hdr{display:flex;align-items:center;gap:26px;height:58px}
.xb-deskhdr .logo img{height:34px}
.xb-queuelink{margin-right:auto;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.15rem;text-decoration:none;
  color:#fff;background:#FD0000;padding:10px 22px;transition:background .15s ease}
a.xb-queuelink:hover{background:#C50000;color:#fff}
.xb-queuelink.on{background:none;color:#9aa1aa;padding-left:0}
.xb-deskhdr .xb-hdr-right a{font-size:.9rem}
.xb-deskhdr .xb-hello{color:#fff;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}

/* Who is signed in, and what they are.
   Sits to the left of Sign out. The role is the useful half: staff were
   working out their own permissions from which nav links happened to be
   present, which is a poor way to find out and a worse way to find out you
   are wrong. Not a link, so the padding on .xb-hdr-right a does not apply
   and it needs its own. */
.xb-deskhdr .xb-whoami{display:inline-block;line-height:1.15;
  padding:0 14px 0 4px;font-family:"Rajdhani",sans-serif;text-align:right}
.xb-deskhdr .xb-whoami strong{color:#fff;font-weight:700;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.03em}

/* halve the run-in above the heading and below it — every line of empty
   space here is a line the customer scrolls past to reach their labels */
body.xb-woo main.wp-block-group{margin-top:18px !important}
body.xb-woo main > .wp-block-group{padding-top:18px !important}
body.xb-woo .entry-content{margin-top:5px !important}
body.woocommerce-view-order .xb-ohead{margin-bottom:10px}
body.woocommerce-view-order .xb-panel > .xb-sec:first-of-type{margin-top:14px}

/* status sentence beside the heading, in place of the full-width band */
.xb-headstate{max-width:400px;padding:12px 16px;font-size:.9rem;line-height:1.5;
  color:#d7dade;background:#1b1b1b;border:1px solid #3d3d3d;border-left:4px solid #6f7479}
.xb-headstate strong{color:#fff}
.xb-headstate a{color:#FD0000;font-weight:600}
.xb-headstate--ok{background:#12271b;border-color:#2c5f41;border-left-color:#28a35a}
.xb-headstate--wait{background:#2a1618;border-color:#5f2c30;border-left-color:#FD0000}
.xb-headstate--go{border-left-color:#9aa1aa}
@media(max-width:820px){.xb-headstate{max-width:none}}

/* order header in three columns: identity, state, actions */
.xb-ohead{align-items:flex-start;gap:28px}
.xb-ohead-left{flex:1 1 280px}
.xb-ohead-mid{flex:1 1 300px;min-width:0}
.xb-ohead-act{flex:0 1 240px;min-width:0}
.xb-ohead-act:empty{display:none}
.xb-btn-reorder{display:inline-block;text-decoration:none;padding:14px 26px;text-align:center}
.xb-ohead-act .xb-fine{margin-top:8px}
@media(max-width:980px){
  .xb-ohead-mid,.xb-ohead-act{flex:1 1 100%}
  .xb-btn-reorder{width:100%}
}
.xb-ohead-mid .xb-artlink{margin:8px 0 0}

/* receipt and invoice at the foot of the order page */
.xb-paperwork{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap}
.xb-paperwork .xb-docs{margin:0}
.xb-paperside{flex:1 1 300px;min-width:0}
.xb-paperside .xb-btn{display:inline-block;text-decoration:none}
.xb-paperside .xb-fine{max-width:52ch}
.xb-invreq{margin:0}
.xb-invreq .xb-btn-ghost{cursor:pointer}

/* receipt and invoice request, side by side at the foot of the order */
.xb-paperrow{display:flex;gap:24px;align-items:flex-start;margin-top:22px;flex-wrap:wrap}
.xb-papercell{flex:1 1 280px;min-width:0}
.xb-papercell .xb-btn-wide{width:100%;display:block;text-align:center;
  text-decoration:none;padding:16px 20px}
.xb-papercell .xb-fine{max-width:44ch}
.xb-invdoc{margin-top:22px}
.xb-invreq{margin:0}

/* repeat order */
.xb-btn-reorder{display:block;text-decoration:none;text-align:center;padding:13px 20px;
  margin-bottom:10px;line-height:1.2}
.xb-btn-reorder span{display:block;font-size:.7rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;opacity:.85;margin-top:2px}
a.xb-btn-ghost.xb-btn-reorder{color:#c9ced3}
a.xb-btn-ghost.xb-btn-reorder:hover{color:#fff}

.xb-reorder-table .xb-qty{width:120px;text-align:right;background:#e4e6e8;
  border:1px solid #a8adb2;color:#111;padding:9px 11px;border-radius:2px;
  font:inherit;font-variant-numeric:tabular-nums}
.xb-reorder-foot{display:flex;gap:30px;align-items:flex-start;margin:22px 0;flex-wrap:wrap}
.xb-artonfile{flex:1 1 340px;background:#1b1b1b;border:1px solid #3d3d3d;
  border-left:4px solid #3ec26f;padding:16px 18px}
.xb-artonfile .xb-tick{font-size:1.05rem}
.xb-reorder-go{flex:1 1 260px}
.xb-reorder-go .xb-btn-big{width:100%}

.xb-repeatflag{display:inline-block;vertical-align:middle;background:#3ec26f;color:#0d0d0d;
  font-family:"Poppins",sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;margin-left:12px;position:relative;top:-4px}
.xb-repeatline{color:#c9ced3;font-size:.9rem;margin:0 0 14px}
.xb-repeatline a{color:#FD0000;font-weight:600}
.xb-btnrow{align-items:center}
.xb-tallynote{flex:1 1 260px;margin:0 !important;color:#c9ced3;font-size:.86rem;line-height:1.45}
.xb-tallynote strong{color:#fff}
.xb-btnrow{align-items:center}
.xb-tallynote{flex:1 1 260px;margin:0 !important;color:#c9ced3;font-size:.86rem;line-height:1.45}
.xb-tallynote strong{color:#fff}

/* submit sits in the approve column, directly under the last label */
.xb-submitrow td{background:#1b1b1b;border-bottom:2px solid #3d3d3d;padding:14px 12px}
.xb-submitrow .xb-btn{width:100%;padding:14px 16px}
.xb-submitrow .xb-fine{display:block;margin-top:6px;text-align:center;font-size:.72rem;
  line-height:1.35}
@media(max-width:820px){
  .xb-submitrow td[colspan]{display:none}
  .xb-submitrow td.c:before{content:none}
}

/* repeat-order list */
.xb-minilabels{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:4px}
.xb-minilabel{width:48px;height:34px;object-fit:cover;object-position:top center;
  background:#fff;border:1px solid #3d3d3d}
.xb-minilabel-link{display:inline-block;line-height:0;transition:border-color .15s ease}
.xb-minilabel-link:hover .xb-minilabel{border-color:#FD0000}
.xb-orderlink{text-decoration:none}
.xb-orderlink strong{color:#fff;font-family:"Rajdhani",sans-serif;letter-spacing:.04em}
.xb-orderlink:hover strong{color:#FD0000}

/* open and closed order groups, each collapsible */
.xb-ordergroup{margin:0 0 24px}
.xb-ordergroup > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:11px 16px;background:#1b1b1b;border:1px solid #3d3d3d;border-left:4px solid #FD0000;
  transition:border-color .15s ease}
.xb-ordergroup > summary::-webkit-details-marker{display:none}
.xb-ordergroup > summary::marker{content:""}
.xb-ordergroup > summary:hover{border-left-color:#fff}
.xb-groupname{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#fff;font-size:1.1rem;flex:1}
.xb-groupcount{background:#3d3d3d;color:#fff;font-size:.75rem;font-weight:700;
  padding:2px 9px;border-radius:10px;min-width:24px;text-align:center}
.xb-ordergroup[open] > summary{border-left-color:#3ec26f}
.xb-ordergroup[open] .xb-groupcount{background:#FD0000}
.xb-ordergroup > summary:after{content:"Show";color:#9aa1aa;font-size:.76rem}
.xb-ordergroup[open] > summary:after{content:"Hide"}
.xb-ordergroup table{margin-top:0}
.xb-btn-inline{display:inline-block;text-decoration:none}

/* queue groups take their colour from what they mean */
.xb-ordergroup.xb-q-now > summary{border-left-color:#FD0000}
.xb-ordergroup.xb-q-them > summary{border-left-color:#9aa1aa}
.xb-ordergroup.xb-q-done > summary{border-left-color:#3ec26f}
.xb-ordergroup.xb-q-now[open] > summary{border-left-color:#FD0000}
.xb-ordergroup.xb-q-them[open] > summary{border-left-color:#9aa1aa}
.xb-ordergroup.xb-q-done[open] > summary{border-left-color:#3ec26f}
.xb-ordergroup.xb-q-now .xb-groupcount{background:#FD0000}
.xb-ordergroup.xb-q-them .xb-groupcount{background:#3d3d3d}
.xb-ordergroup.xb-q-done .xb-groupcount{background:#2c5f41}

/* customers */
.xb-custlink{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;text-decoration:none;color:#fff;padding:10px 18px;
  border:1px solid #5a5a5a;transition:border-color .15s ease,background .15s ease}
.xb-custlink:hover{border-color:#FD0000;color:#fff}
.xb-custlink.on{background:#FD0000;border-color:#FD0000}
.xb-custfilter{width:100%;max-width:420px;margin:0 0 16px;background:#e4e6e8;
  border:1px solid #a8adb2;color:#111;padding:11px 13px;border-radius:2px;font:inherit;
  box-sizing:border-box}
.xb-custfilter:focus{background:#f2f3f4;border-color:#FD0000;outline:none;
  box-shadow:0 0 0 2px rgba(253,0,0,.22)}
.xb-countpill{display:inline-block;min-width:26px;padding:3px 9px;border-radius:11px;
  font-weight:700;font-size:.82rem;text-align:center}
.xb-count-now{background:#FD0000;color:#fff}

/* customer information */
.xb-notecard{border-left:4px solid #f0a500}
.xb-notecard .xb-sec{margin-top:0}
.xb-notecard textarea{margin-bottom:10px}
.xb-statrow{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.xb-stat{flex:1 1 130px;background:#1b1b1b;border:1px solid #3d3d3d;padding:12px 14px}
.xb-statnum{display:block;font-family:"Rajdhani",sans-serif;font-weight:700;color:#fff;
  font-size:1.35rem;line-height:1.1}
.xb-statlab{display:block;color:#9aa1aa;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;margin-top:3px}
.xb-flavsum{margin:0 0 20px !important;max-width:none}
.xb-custdetails .xb-groupcount{background:#3d3d3d;text-transform:uppercase;letter-spacing:.06em}
.xb-custform .xb-2col{gap:22px}

/* the account note, on every order */
.xb-acctnote{background:#2a2415;border:1px solid #5f5024;border-left:4px solid #f0a500;
  padding:12px 16px;margin:0 0 16px;color:#e8dcc0;font-size:.9rem;line-height:1.5}
.xb-acctnote-tag{display:inline-block;background:#f0a500;color:#1a1a1a;font-size:.66rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;margin-right:10px}
.xb-acctnote a{color:#f0a500;font-size:.78rem;margin-left:10px;text-decoration:underline}

/* customer name and email as separate targets */
.xb-custname{text-decoration:none;display:block}
.xb-custname strong{color:#fff;font-family:"Rajdhani",sans-serif;letter-spacing:.03em;font-size:1rem}
.xb-custname:hover strong{color:#FD0000}
.xb-custmail{display:block;color:#9aa1aa;font-size:.78rem;text-decoration:none;margin-top:2px}
.xb-custmail:hover{color:#FD0000;text-decoration:underline}

/* details / orders tabs on a customer */
.xb-custtabs{display:flex;gap:8px;margin:0 0 20px;border-bottom:1px solid #3d3d3d}
.xb-custtab{display:flex;align-items:center;gap:8px;text-decoration:none;color:#9aa1aa;
  font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1rem;padding:10px 18px;border-bottom:3px solid transparent;
  margin-bottom:-1px}
.xb-custtab:hover{color:#fff}
.xb-custtab.on{color:#fff;border-bottom-color:#FD0000}
.xb-custtab .xb-groupcount{background:#3d3d3d}
.xb-custtab.on .xb-groupcount{background:#FD0000}

/* account standing */
.xb-statuscard{border-left:4px solid #3ec26f}
.xb-statuscard.xb-status-hold{border-left-color:#f0a500}
.xb-statuscard.xb-status-inactive{border-left-color:#FD0000}
.xb-statuscard .xb-sec{margin-top:0}
.xb-statuspick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.xb-statusopt{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#2b2b2b;border:1px solid #5a5a5a;padding:9px 16px;color:#c9ced3;
  font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.85rem}
.xb-statusopt input{accent-color:#FD0000;margin:0}
.xb-statusopt:hover{border-color:#9aa1aa;color:#fff}
.xb-statusopt.on{color:#fff}
.xb-statusopt-active.on{border-color:#3ec26f;background:#14231a}
.xb-statusopt-hold.on{border-color:#f0a500;background:#2a2415}
.xb-statusopt-inactive.on{border-color:#FD0000;background:#2a1618}

.xb-statustag{display:inline-block;font-family:"Poppins",sans-serif;font-size:.6rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;
  margin-left:8px;vertical-align:middle}
.xb-statustag-hold{background:#f0a500;color:#1a1a1a}
.xb-statustag-inactive{background:#FD0000;color:#fff}
.xb-cust-hold td,.xb-cust-inactive td{background:#211d16}

.xb-custtools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.xb-custtools .xb-custfilter{margin:0;flex:1 1 300px}
.xb-statusfilter{display:flex;gap:6px}
.xb-statusfilter button{background:none;border:1px solid #3d3d3d;color:#9aa1aa;cursor:pointer;
  padding:9px 14px;font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.8rem}
.xb-statusfilter button:hover{color:#fff;border-color:#5a5a5a}
.xb-statusfilter button.on{background:#FD0000;border-color:#FD0000;color:#fff}

.xb-acctnote-hold{background:#2a2415;border-color:#5f5024;border-left-color:#f0a500}
.xb-acctnote-inactive{background:#2a1618;border-color:#5f2c30;border-left-color:#FD0000;color:#f0d4d4}
.xb-acctnote-inactive .xb-acctnote-tag{background:#FD0000;color:#fff}
.xb-acctnote-inactive a{color:#FD0000}

/* two matching nav buttons, queue then customers */
.xb-desknav{display:flex;gap:8px;margin-right:auto}
.xb-desknav .xb-custlink{padding:10px 20px}

/* order search */
.xb-desksearch{display:flex;gap:10px;align-items:center;margin:0 0 22px;flex-wrap:wrap}
.xb-desksearch input[type=search]{flex:1 1 420px;background:#e4e6e8;border:1px solid #a8adb2;
  color:#111;padding:12px 14px;border-radius:2px;font:inherit;font-size:.95rem;box-sizing:border-box}
.xb-desksearch input[type=search]:focus{background:#f2f3f4;border-color:#FD0000;outline:none;
  box-shadow:0 0 0 2px rgba(253,0,0,.22)}
.xb-desksearch .xb-btn{margin:0;padding:12px 24px}
.xb-clearsearch{color:#9aa1aa;font-size:.84rem;text-decoration:underline}
.xb-clearsearch:hover{color:#FD0000}

/* search lives in the header, beside the nav */
.xb-desknav{margin-right:0}
.xb-deskhdr .xb-desksearch{display:flex;gap:6px;align-items:center;margin:0 auto 0 6px;flex:0 1 380px}
.xb-deskhdr .xb-desksearch input[type=search]{flex:1 1 auto;min-width:0;padding:8px 11px;
  font-size:.85rem}
.xb-deskhdr .xb-desksearch .xb-btn{padding:9px 16px;font-size:.8rem}
@media(max-width:1100px){.xb-deskhdr .xb-desksearch{flex:0 1 240px}}

/* nav left, search pushed right, sign out last */
.xb-desknav{margin-right:auto}
.xb-deskhdr .xb-desksearch{margin:0 14px 0 0;flex:0 1 360px}
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
/* ==================================================================
   Team screen — /staff/team/
   Append to assets/css/xbalm-front.css
   ================================================================== */

/* The card scrolls sideways rather than the table wrapping. A staff list is
   read down the Name column; a row that wraps onto three lines stops being a
   row you can scan. */
.xb-teamwrap { overflow-x: auto; }

.xb-teamtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.3;
  min-width: 620px;
}

.xb-teamtable th,
.xb-teamtable td {
  padding: 7px 12px 7px 0;
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
}

.xb-teamtable th {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
  font-weight: 600;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.xb-teamtable tbody tr + tr td { border-top: 1px solid rgba(255,255,255,.07); }

/* the email is reference detail, not the thing being scanned */
.xb-teamtable td:nth-child(2) { font-size: 13px; opacity: .82; }

/* counts and status sit tight to the right of the name block */
.xb-teamtable th:nth-child(4),
.xb-teamtable td:nth-child(4) { text-align: right; padding-right: 22px; }

/* "you" reads as part of the name, not as a second line under it */
.xb-teamtable .xb-when {
  display: inline;
  margin-left: 6px;
  font-size: 11px;
  opacity: .6;
}

/* Actions: present, but not competing with the primary red button below the
   table. Two full-size red blocks per row made the destructive one the loudest
   thing on the screen. */
.xb-teamtable td:last-child { width: 1%; padding-right: 0; }

.xb-teamtable .xb-inlineform {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin: 0;
}

.xb-teamtable .xb-btn-quiet,
.xb-btn-quiet {
  background: transparent;
  border: 1px solid rgba(255,255,255,.32);
  color: #e6e6e6;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1.1;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}

.xb-teamtable .xb-btn-quiet:hover,
.xb-btn-quiet:hover {
  border-color: #e2231a;
  color: #fff;
  background: rgba(226,35,26,.12);
}

/* the note under the table */
.xb-teamwrap .xb-fine { margin-top: 12px; }

/* ---- The account ID column ---------------------------------------
   Present for cross-referencing, not for reading. Tabular figures so the
   numbers line up in a column, and quiet enough that the eye still lands on
   the name first.                                                     */
.xb-idcol {
  width: 1%;
  padding-right: 14px !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: .5;
  white-space: nowrap;
}

th.xb-idcol { opacity: .55; }

/* the customers table is the same idea on a wider screen */
#xbCustTable .xb-idcol { padding-right: 16px; }

/* ---- Add a customer ---------------------------------------------- */
.xb-newcustline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.xb-newcustline .xb-fine { margin: 0; }

.xb-newcust .xb-f input[type="text"],
.xb-newcust .xb-f input[type="email"],
.xb-newcust .xb-f textarea { width: 100%; box-sizing: border-box; }

.xb-newcust .xb-sameas { display: block; margin: 0 0 10px; }
.xb-newcust .xb-btn-wide { margin-top: 4px; }

/* ==================================================================
   The order queue — one line per order
   ==================================================================
   Amanda reads this list down the page looking for the row that needs
   her. Two-line rows meant about eight orders on screen; at one tight
   line she gets thirty, which is the difference between scanning and
   scrolling.                                                          */

.xb-lt.xb-q td,
.xb-lt.xb-q th {
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
}

/* The order number anchors the row, so it stays hard left where the eye
   starts. Everything after it is a column of like values, which read
   better centred under their heading. */
.xb-lt.xb-q td:first-child,
.xb-lt.xb-q th:first-child {
  text-align: left;
  padding-left: 0;
}

.xb-lt.xb-q th {
  font-size: 11px;
  letter-spacing: .05em;
  padding-top: 7px;
  padding-bottom: 7px;
}

.xb-lt.xb-q tbody tr + tr td { border-top: 1px solid rgba(255,255,255,.07); }

/* the small print now sits beside its value rather than beneath it */
.xb-lt.xb-q .xb-when,
.xb-lt.xb-q .xb-chg,
.xb-lt.xb-q .xb-sap {
  display: inline;
  margin: 0 0 0 7px;
  font-size: 11px;
}

.xb-lt.xb-q .xb-sap { opacity: .55; }

/* the work order ID, which is how Amanda cross-references SAP */
.xb-lt.xb-q .xb-sapcol { font-variant-numeric: tabular-nums; opacity: .85; }

/* Approved but never submitted — the one row in the list that is stuck
   without anybody knowing, so it is the one thing allowed to shout. */
.xb-lt.xb-q .xb-notsub {
  display: inline;
  margin-left: 7px;
  color: #ff3b30;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
}

.xb-lt.xb-q .woocommerce-button {
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.4;
}

/* ==================================================================
   Sign-in bar above the billing details
   ================================================================== */

/* 20px top and bottom on the whole block — this page's job is to take a
   payment, and everything above the billing fields is a delay */
.xb-signinbar {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  padding: 20px 18px !important;
  margin-bottom: 20px !important;
}

/* the store stylesheet gives the login form a panel of its own inside ours */
body .xb-signinbar .woocommerce-form-login,
body .xb-signinbar .xb-signin-form {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* minmax(0,1fr) rather than 1fr: a grid track defaults to min-content width,
   which let the sign-in row push out past the panel instead of shrinking */
/* the sign-in side carries three controls and the other side one button, so an
   even split starved the half that needed the room */
.xb-signin-main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.xb-signin-main > * { min-width: 0; }
@media (max-width: 820px) {
  .xb-signin-main { grid-template-columns: 1fr; gap: 14px; }
  .xb-signin-or { display: none; }
}

.xb-signin-lede {
  display: block;
  font-size: .82rem;
  color: #a9afb6;
  margin-bottom: 7px;
}

/* the store stylesheet gives login forms a panel of their own; here the bar is
   the panel, so strip it back */
.xb-signinbar .xb-signin-form,
.xb-signinbar .woocommerce-form-login {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* the row itself has to be forced too — something later in the cascade turns
   these back into block elements, which is what stacked the fields and made
   the button full width */
.xb-signinbar .xb-signin-fields {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px;
  width: auto !important;
}
@media (max-width: 620px) {
  .xb-signinbar .xb-signin-fields { flex-wrap: wrap !important; }
}

/* A hidden input is hidden. Something in the cascade sets display on inputs
   generally, which turned the nonce, the referer and the redirect into three
   empty boxes in the middle of the row. */
.xb-signinbar input[type="hidden"] { display: none !important; }

/* WooCommerce's script wraps the password field and appends a reveal toggle,
   positioned against the nearest positioned ancestor. Without a wrapper of its
   own it landed on top of the Log in button. */
/* The wrapper WooCommerce's script puts around the password field becomes the
   flex item, so it has to flex the same way the bare field does. Pinning it to
   a fixed width was what pushed the row onto two lines once the script ran. */
.xb-signinbar .password-input {
  position: relative !important;
  display: block !important;
  flex: 1 1 130px !important;
  min-width: 105px !important;
  max-width: 190px !important;
  width: auto !important;
}
.xb-signinbar .password-input input[type="password"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}
/* the toggle belongs inside the password field, wherever the script hangs it */
.xb-signinbar .xb-pw { position: relative !important; }

.xb-signinbar .xb-pw .show-password-input,
.xb-signinbar .password-input .show-password-input {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  cursor: pointer;
}

/* if it ends up a direct child of the form instead, it has nothing sensible to
   anchor to — better absent than sitting on the Log in button */
.xb-signinbar .xb-signin-form > .show-password-input { display: none !important; }

/* the wrapper the script may add sits inside ours, so it must not re-flex */
.xb-signinbar .xb-pw .password-input {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  position: relative !important;
}

/* the hidden labels are flex children; keep them out of the layout */
.xb-signinbar .xb-signin-fields .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* One line each. The store form styling sets a tall padding meant for the
   full-page account form, which turned two fields into two paragraphs. */
/* email, password and the button on one line — the two fields share the space
   and the button takes only what the word needs */
.xb-signinbar .xb-signin-fields input[type="text"],
.xb-signinbar .xb-signin-fields input[type="password"] {
  flex: 0 0 165px !important;
  width: 165px !important;
  max-width: 165px !important;
  min-width: 0 !important;
  /* every dimension forced: whatever is loading after this sets some
     combination of height, min-height and padding, and leaving any one of them
     unclaimed is enough to give the field a paragraph of air */
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  font-size: .88rem;
  line-height: 36px !important;
  box-sizing: border-box !important;
}

.xb-signinbar .xb-signin-go {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 14px;
  margin: 0;
  background: var(--red, #e2231a);
  color: #fff;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
  line-height: 38px;
  cursor: pointer;
  white-space: nowrap;
}

.xb-signin-lost {
  display: inline-block;
  margin-top: 7px;
  font-size: .78rem;
  color: #a9afb6;
}

/* the vertical rule between the two routes */
.xb-signin-or {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.xb-signin-or::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.16);
}
.xb-signin-or span {
  position: relative;
  background: #131313;
  padding: 4px 0;
  font-size: .72rem;
  color: #8d949b;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.xb-signin-create {
  display: inline-block;
  height: 38px;
  line-height: 36px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  text-decoration: none;
}
.xb-signin-create:hover { border-color: var(--red, #e2231a); }

.xb-signin-why {
  display: block;
  margin-top: 7px;
  font-size: .78rem;
  color: #8d949b;
}

.xb-signin-guest {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem;
  color: #c3c8cd;
  cursor: pointer;
  line-height: 1.45;
}
.xb-signin-guest input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; }

/* ==================================================================
   Promotional code — toggle and form
   ==================================================================
   WooCommerce ships these as a rounded box with a blue circle icon, which
   is the one piece of another brand left on the page.                  */

/* The "Have a promotional code?" prompt is gone and the field is simply
   there. One less click, and one less thing on a page whose job is to take a
   payment — the field explains itself. */
.woocommerce-form-coupon-toggle { display: none !important; }

/* the form carries an inline display:none, waiting for that prompt to be
   clicked; !important is what outranks an inline style */
form.checkout_coupon { display: flex !important; }

/* WooCommerce's blue circle icon, on every notice it puts on the page. It is
   drawn as a background image rather than text, so content:none alone leaves
   the circle sitting there. */
body .woocommerce-info::before,
body .woocommerce-info::after,
body .woocommerce-message::before,
body .woocommerce-error::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* the form it reveals */
form.checkout_coupon {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 0 !important;
  padding: 16px 18px !important;
  margin: 0 0 22px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

form.checkout_coupon p { margin: 0 !important; width: auto !important; }

form.checkout_coupon .form-row,
form.checkout_coupon .form-row-first,
form.checkout_coupon .form-row-last {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

form.checkout_coupon input[type="text"] {
  height: 38px !important;
  min-height: 38px !important;
  width: 190px !important;
  max-width: 100% !important;
  padding: 0 11px !important;
  margin: 0 !important;
  line-height: 36px !important;
  box-sizing: border-box !important;
}

form.checkout_coupon button {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  background: var(--red, #e2231a) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
  cursor: pointer;
}

/* ==================================================================
   Policy pages — Terms, Returns, Privacy
   ==================================================================
   Long-form reading on a dark background, which needs a narrower measure
   and more air than the rest of the site.                            */

body.xb-legal .wp-block-post-content,
body.xb-legal .entry-content,
body.xb-legal main {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 26px;
}

body.xb-legal .wp-block-post-title,
body.xb-legal .entry-title,
body.xb-legal h1 {
  font-family: "Rajdhani", "Arial Narrow", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.05;
  margin: 34px 0 6px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 26px;
}

body.xb-legal .entry-content p,
body.xb-legal .wp-block-post-content p {
  color: #c9ced4;
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 0 15px;
}

body.xb-legal .entry-content h2,
body.xb-legal .wp-block-post-content h2 {
  font-family: "Rajdhani", "Arial Narrow", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.32rem;
  color: #fff;
  margin: 34px 0 10px;
  line-height: 1.15;
}

body.xb-legal .entry-content h3,
body.xb-legal .wp-block-post-content h3 {
  font-size: 1.02rem;
  color: #fff;
  margin: 22px 0 8px;
}

body.xb-legal .entry-content strong,
body.xb-legal .wp-block-post-content strong { color: #fff; }

body.xb-legal .entry-content ul,
body.xb-legal .wp-block-post-content ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: #c9ced4;
  font-size: .95rem;
  line-height: 1.65;
}
body.xb-legal .entry-content li,
body.xb-legal .wp-block-post-content li { margin-bottom: 7px; }

body.xb-legal .entry-content ol,
body.xb-legal .wp-block-post-content ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: #c9ced4;
  font-size: .95rem;
  line-height: 1.65;
}

body.xb-legal .entry-content hr,
body.xb-legal .wp-block-post-content hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.16);
  margin: 26px 0;
}

body.xb-legal .entry-content a,
body.xb-legal .wp-block-post-content a { color: #FD0000; }

/* the last paragraph is the contact block; give it room off the footer */
body.xb-legal .entry-content > p:last-child,
body.xb-legal .wp-block-post-content > p:last-child { margin-bottom: 56px; }

/* ---- Promo strip and header travel together ---------------------- */
.xb-topwrap { position: sticky; top: 0; z-index: 60; }
body.xb-woo .xb-topwrap header { position: static !important; }

/* ---- Legal links ---------------------------------------------- */
.xb-foot-legal { margin-top: 10px; font-size: .78rem; }
.xb-foot-legal a { color: #8d949b; text-decoration: none; margin: 0 9px 0 0; }
.xb-foot-legal a:hover { color: #fff; text-decoration: underline; }

/* WooCommerce gives its privacy boilerplate a lot of room for what it says */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  margin: 2px 0 10px !important;
  padding: 0 !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p {
  margin: 0 !important;
  font-size: .8rem !important;
  line-height: 1.45 !important;
}

/* the pledge fills the column rather than sitting inset within it, which buys
   back the width its text was wrapping against */
.woocommerce-checkout .xb-pledge {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
}

/* Place Order, centred in its column */
.woocommerce-checkout #payment .form-row.place-order,
.woocommerce-checkout .form-row.place-order {
  text-align: center !important;
  margin-top: 14px !important;
}
.woocommerce-checkout #place_order {
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  min-width: 180px;
}

/* the block that now sits under the button */
.woocommerce-checkout .xb-postpledge {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #FD0000;
  background: rgba(255,255,255,.03);
  text-align: left;
}

/* the promise, in the brand colour */
.xb-pledge-head {
  color: #FD0000 !important;
  font-family: "Rajdhani", "Arial Narrow", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  /* back to one line — at 1.12rem it wrapped, and a two-line heading over a
     two-line note reads as four lines of much the same thing */
  font-size: .92rem !important;
  line-height: 1.2;
  margin: 0 0 8px !important;
}

.xb-pledge-terms {
  margin: 0 0 6px !important;
  font-size: .8rem;
  color: #a9afb6;
  line-height: 1.5;
}
.xb-pledge-terms a { color: #d6dade; text-decoration: underline; }

.xb-pledge-art {
  margin: 0 !important;
  font-size: .8rem;
  color: #a9afb6;
  line-height: 1.5;
}
.xb-pledge-art a { color: #d6dade; text-decoration: underline; }

/* ==================================================================
   Order review table — item meta on one line
   ==================================================================
   WooCommerce renders each meta value as a paragraph, so "Artwork:" and
   the filename land on separate lines with the value indented under the
   label. Inline values put each pair on one line and let it use the full
   width of the cell.                                                   */

.woocommerce-checkout-review-order-table .wc-item-meta,
.woocommerce-checkout-review-order-table dl.variation {
  margin: 7px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: .82rem;
  line-height: 1.5;
}

.woocommerce-checkout-review-order-table .wc-item-meta li {
  display: block !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* A dl runs dt, dd, dt, dd in sequence, so making them all inline joined the
   whole thing into one sentence. A two-column grid gives each pair its own
   row and aligns the values against each other. */
.woocommerce-checkout-review-order-table dl.variation {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 2px;
  align-items: start;
}

.woocommerce-checkout-review-order-table dl.variation dt {
  display: block !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600;
  color: #a9afb6;
  white-space: nowrap;
}

.woocommerce-checkout-review-order-table dl.variation dd,
.woocommerce-checkout-review-order-table dl.variation dd p {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #d6dade;
  overflow-wrap: anywhere;
}

/* the other markup WooCommerce uses for the same thing — label and value in a
   list item, where inline is exactly right */
.woocommerce-checkout-review-order-table .wc-item-meta .wc-item-meta-label {
  display: inline !important;
  float: none !important;
  margin: 0 5px 0 0 !important;
  padding: 0 !important;
  font-weight: 600;
  color: #a9afb6;
}

.woocommerce-checkout-review-order-table .wc-item-meta p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #d6dade;
}

/* the money column: hard right, tabular figures, so amounts stack for
   comparison and the totals below line up with the lines above them.

   :not([colspan]) matters more than it looks. A note row spanning the whole
   table has a single cell, which makes that cell both first and last child —
   so it used to inherit nowrap here, refuse to wrap, and force the table
   wider than its column. Any full-width row is prose, never money. */
.woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout-review-order-table td:last-child:not([colspan]) {
  white-space: nowrap;
  text-align: right !important;
  padding-right: 0 !important;
  font-variant-numeric: tabular-nums;
  width: 1%;
}

/* full-width note rows — wrap like the prose they are */
.woocommerce-checkout-review-order-table td[colspan] {
  white-space: normal;
  text-align: left;
  width: auto;
  overflow-wrap: anywhere;
}

.woocommerce-checkout-review-order-table tr.xb-promo-note td {
  padding-top: 0 !important;
  font-size: .82rem;
  color: #a9afb6;
}

/* the product column takes whatever the other two do not need, so flavor
   names stop wrapping onto a second line each */
.woocommerce-checkout-review-order-table th:first-child,
.woocommerce-checkout-review-order-table td.product-name {
  width: auto;
  white-space: normal;
}

/* the quantity column added in script */
.woocommerce-checkout-review-order-table th.product-qty,
.woocommerce-checkout-review-order-table td.product-qty {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 18px;
  font-variant-numeric: tabular-nums;
}
.woocommerce-checkout-review-order-table td.product-qty { color: #d6dade; }

/* one line per flavor, so the rows can be tight */
.woocommerce-checkout-review-order-table tr.cart_item td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ==================================================================
   Checkout fields — one height for everything
   ==================================================================
   30px. Textareas are deliberately excluded: "anything else we should know"
   is meant to invite a few sentences, and a one-line box says don't bother.

   THIS IS THE ONLY PLACE CHECKOUT FIELD HEIGHT IS SET. Everything is pinned
   with !important — height, min-height, max-height, padding and line-height —
   because a block theme supplies its own values for each through theme.json,
   and leaving any one unclaimed gives the field back its padding. Editing a
   height anywhere else in this file will appear to do nothing.

   line-height is height minus the 2px of border, so the text sits centred. */

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row input.input-text {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 11px !important;
  line-height: 28px !important;
  font-size: .92rem !important;
  box-sizing: border-box !important;
}

/* A native <select> is not a text input and must not be sized like one.
   Chrome lays the selected option out with its own internal centring, which it
   derives from the control's own metrics — not from line-height, which it
   normalises away. Pinning height AND max-height to 30px and forcing a 28px
   line-height left the option text sitting low in a box that could not grow,
   so "Select an option" was clipped along the bottom edge.

   The fix is to stop dictating the height and start dictating the padding.
   min-height keeps it aligned with the ZIP field beside it; max-height:none
   means that if the font, the zoom level or the user's own settings ever need
   another pixel, the control takes it instead of cropping its own text. A
   field that silently hides its value is worse than one a pixel out of line. */
.woocommerce-checkout .form-row select {
  height: auto !important;
  min-height: 30px !important;
  max-height: none !important;
  padding: 2px 8px !important;
  line-height: normal !important;
  font-size: .92rem !important;
  box-sizing: border-box !important;
}

/* On a phone the field is also the touch target. 30px is below the 44px
   Apple and Google both publish, so the billing fields get their height back
   on a small screen — !important throughout, for the same reason as above. */
@media (max-width: 600px) {
  .woocommerce-checkout #customer_details .form-row input[type="text"],
  .woocommerce-checkout #customer_details .form-row input[type="email"],
  .woocommerce-checkout #customer_details .form-row input[type="tel"],
  .woocommerce-checkout #customer_details .form-row input[type="number"],
  .woocommerce-checkout #customer_details .form-row input.input-text {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;
    font-size: 1rem !important;
  }
  /* the select grows rather than being clamped, here too */
  .woocommerce-checkout #customer_details .form-row select {
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    font-size: 1rem !important;
  }
}

/* Country and State are select2 widgets rather than plain selects. They do not
   inherit the field styling, so the chosen value was dark text on a dark box —
   selected, and invisible. These make them look like every other field. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 30px !important;
  min-height: 30px !important;
  box-sizing: border-box !important;
  background: #e9e9e9 !important;
  border: 1px solid #b9b9b9 !important;
  border-radius: 0 !important;
  overflow: hidden;

  /* padding:0 is load-bearing, not tidiness. The base field rule near the top
     of this file also matches .select2-container .select2-selection--single
     and gives it padding:11px 13px. This box is border-box at a fixed 30px,
     so 22px of vertical padding left a 6px content box holding a 28px
     __rendered — the value overflowed by 7px and overflow:hidden cropped it,
     which is how "Select an option" arrived with its bottom sliced off.
     select2 puts the padding on __rendered, never on the box around it. */
  padding: 0 !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: block !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 28px 0 11px !important;
  margin: 0 !important;
  color: #111 !important;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6b6b6b !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 28px !important;
  top: 0 !important;
  right: 6px !important;
}

/* select2 matches the plain fields on a phone too */
@media (max-width: 600px) {
  .woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 40px !important;
    min-height: 40px !important;
  }
  .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 38px !important;
    line-height: 38px !important;
    font-size: 1rem !important;
  }
  .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
  }
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #444 transparent transparent transparent !important;
}

/* the list that opens is appended to the body, so it sits outside any of the
   checkout scoping above */
.select2-container--default .select2-dropdown {
  background: #fff !important;
  border: 1px solid #b9b9b9 !important;
  border-radius: 0 !important;
}
.select2-container--default .select2-results__option {
  color: #111 !important;
  font-size: .92rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #FD0000 !important;
  color: #fff !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 34px !important;
  padding: 0 9px !important;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #b9b9b9 !important;
}

/* left alone on purpose */
.woocommerce-checkout .form-row textarea {
  height: auto !important;
  max-height: none !important;
  min-height: 90px !important;
  padding: 10px 11px !important;
  line-height: 1.45 !important;
}

/* ==================================================================
   Checkout sign-in gate
   ================================================================== */

.xb-gate { max-width: 900px; margin: 0 auto 28px; }

.xb-gate-lead {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 22px;
  color: #c9ced4;
}

.xb-gate-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 760px) { .xb-gate-cols { grid-template-columns: 1fr; } }

.xb-gate-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  padding: 22px 24px 24px;
}

.xb-gate-card h2 {
  font-size: 1.15rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.xb-gate-sub { font-size: .86rem; color: #a9afb6; margin: -6px 0 14px; }

.xb-gate-card .form-row { margin-bottom: 12px; }
.xb-gate-card label { display: block; font-size: .84rem; margin-bottom: 5px; color: #c9ced4; }
.xb-gate-card .input-text,
.xb-gate-card input[type="text"],
.xb-gate-card input[type="email"],
.xb-gate-card input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: .95rem;
}

.xb-gate-card .button,
.xb-gate-card button[type="submit"] { width: 100%; }

.xb-gate-cart { margin-top: 18px; font-size: .85rem; color: #a9afb6; text-align: center; }

/* ---- Payment still confirming -------------------------------------
   Neither reassuring green nor alarming red. Something is happening and
   nobody needs to do anything about it.                               */
.xb-confirming {
  color: #d9a441;
  font-weight: 600;
}

/* ---- Screen title with an action beside it ------------------------ */
.xb-titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.xb-titlerow .xb-acct-title { margin: 0; }

/* ---- Building an order for a customer ----------------------------- */
.xb-noline .xb-qty {
  width: 110px;
  text-align: right;
  padding: 7px 9px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.xb-totalline {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 15px;
}

.xb-neworder .xb-statusopt { margin-right: 8px; }
.xb-neworder .xb-f { max-width: 220px; }
.xb-neworder .xb-f input { width: 100%; box-sizing: border-box; }
.xb-neworder .xb-btn-wide { margin-top: 14px; }

/* the picker reuses the team table, but every row is clickable */
#xbPickTable td:last-child { text-align: right; }

/* ---- Assigning a customer to a rep -------------------------------- */
.xb-assignform .xb-f { max-width: 560px; }
.xb-assignform select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 14px;
}

/* ---- Add someone -------------------------------------------------
   The email field was rendering at its default 20-character width next to
   two full-width name fields, which read as a broken layout rather than a
   short field.                                                        */
.xb-team-add .xb-f input[type="text"],
.xb-team-add .xb-f input[type="email"] { width: 100%; box-sizing: border-box; }

.xb-team-add fieldset.xb-f {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  padding: 10px 12px 12px;
  margin: 14px 0;
}

.xb-team-add fieldset.xb-f legend {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
  padding: 0 6px;
}

.xb-team-add .xb-statusopt { font-size: 12px; }

/* ======================================================================
   Quotation screens — compact

   Scoped to .xb-tight rather than changed globally. The console's default
   spacing suits Amanda's order screens, where a mis-click costs a customer
   a wrong order and the air is doing a job. A rep pricing a job is scanning,
   comparing and going back, and wants it all on one screen instead.

   Changing .xb-card globally would have quietly reflowed every screen in the
   console on a Monday morning, which is not a change anybody asked for.
   ================================================================== */

.xb-tight .xb-card{padding:14px 16px;margin:0 0 14px}
.xb-tight .xb-card > .xb-sec:first-child{margin-top:0}
.xb-tight .xb-sec{margin:18px 0 8px;font-size:.98rem}
.xb-tight .xb-lead{margin:0 0 12px}
.xb-tight .xb-f{margin:0 0 10px}
.xb-tight .xb-fine{margin:6px 0 0}
.xb-tight .xb-card p{margin:0 0 6px}
.xb-tight .xb-lt th,.xb-tight .xb-lt td{padding:7px 9px}
.xb-tight .xb-acct-title{font-size:1.9rem}
.xb-tight h3.xb-sec{font-size:.86rem}

/* fields that belong on one line, collapsing when there is no room */
.xb-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin:0 0 10px}
.xb-row .xb-f{margin:0}
.xb-row .xb-f input[type=text],.xb-row .xb-f input[type=number],
.xb-row .xb-f input[type=date],.xb-row .xb-f select{max-width:none;width:100%}

/* "Prepare a quote" — a disclosure dressed as a button, so the builder is
   not sitting open under the list of quotations that already exist. No
   script: <details> does this natively and keeps working if JS fails. */
.xb-disclose{margin:0 0 18px}
.xb-disclose > summary{display:inline-block;background:#FD0000;color:#fff;
  padding:11px 22px;font-family:"Rajdhani",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;cursor:pointer;
  list-style:none;transition:background .15s ease}
.xb-disclose > summary::-webkit-details-marker{display:none}
.xb-disclose > summary:hover{background:#C50000}
.xb-disclose[open] > summary{background:#3d3d3d}
.xb-disclose[open] > summary:hover{background:#4a4a4a}
.xb-disclose > .xb-card{margin-top:14px}

/* The validity date and its button on one line.

   A fixed narrow width rather than an equal-thirds grid: a date input is a
   known size and gains nothing from more. Bottom-aligned, so the button sits
   on the input's baseline rather than floating against its label.

   The explanatory sentence that used to sit here is gone — min and max on the
   input mean the picker will not offer a date outside the window, and
   explaining a limit to somebody who cannot reach it is noise. The wording
   survives in xb_quote_their_expiry_msg(), which is what the validation popup
   and the server's refusal both say to anyone who gets past the picker. */
.xb-dateline{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 4px}
.xb-dateline .xb-f{flex:0 0 15%;min-width:155px;margin:0}
.xb-dateline .xb-f input[type=date]{width:100%;max-width:none}
.xb-dateline > button,
.xb-dateline > .xb-btn{flex:0 0 auto;margin-bottom:1px}
@media(max-width:620px){
  .xb-dateline .xb-f{flex:1 1 100%}
}

/* ======================================================================
   Staff console — one button, and it is small

   The console is a working tool: a rep or Amanda is scanning a screen and
   clicking things, not being guided through a purchase. Big buttons there
   cost vertical space on every screen and give a secondary action the same
   weight as the thing you came to do.

   So on the console every button collapses to one size and one colour. The
   metrics are lifted from .xb-btn-quiet rather than invented, because that is
   the size Fielding pointed at.

   SCOPED TO body.xb-desk DELIBERATELY. The customer side is unchanged: there
   a large, obvious, well-spaced button is doing real work for somebody who
   may be buying from us for the first time. Same stylesheet, two audiences,
   and they want opposite things.

   .xb-btn-ghost is included for completeness but is customer-side only today
   (xb-account.php), so nothing here turns a Cancel into a twin of a Confirm.
   ================================================================== */

body.xb-desk .xb-btn,
body.xb-desk .xb-btn-sm,
body.xb-desk .xb-btn-big,
body.xb-desk .xb-btn-wide,
body.xb-desk .xb-btn-quiet,
body.xb-desk .xb-btn-ghost,
body.xb-desk .xb-btn-inline,
body.xb-desk .xb-disclose > summary,
body.xb-desk .xb-teamtable .xb-btn-quiet{
  background:#FD0000;
  color:#fff;
  border:1px solid transparent;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:5px 10px;
  line-height:1.1;
  border-radius:3px;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
}

body.xb-desk .xb-btn:hover,
body.xb-desk .xb-btn-sm:hover,
body.xb-desk .xb-btn-big:hover,
body.xb-desk .xb-btn-wide:hover,
body.xb-desk .xb-btn-quiet:hover,
body.xb-desk .xb-btn-ghost:hover,
body.xb-desk .xb-btn-inline:hover,
body.xb-desk .xb-disclose > summary:hover,
body.xb-desk .xb-teamtable .xb-btn-quiet:hover{
  background:#C50000;
  color:#fff;
  border-color:transparent;
}

/* An open disclosure is a state, not an action — grey says "already done". */
body.xb-desk .xb-disclose[open] > summary{background:#3d3d3d}
body.xb-desk .xb-disclose[open] > summary:hover{background:#4a4a4a}

/* ----------------------------------------------------------------------
   Three buttons that are a sequence, coloured like one

   Preview email, Test send, Send to client. A rep in a hurry goes straight
   to the third, and the third is the one that cannot be undone — an email
   to a client is gone the moment it leaves. Colour is the cheapest way to
   say "there are two steps before this one" without adding a dialog
   nobody reads.

   Red stays the console default, so Preview email is unremarkable and the
   two that follow are deliberately not. Both still read as buttons: same
   size, same weight, same uppercase.

   These sit AFTER the main console block and BEFORE the disabled one, and
   both halves of that matter. They match .xb-btn-amber at exactly the same
   specificity as body.xb-desk .xb-btn, so they win on source order alone —
   move them above it and the colour silently disappears. The disabled rule
   below carries an attribute selector and outranks them outright, which is
   what keeps a greyed-out Send to client grey instead of inviting green.
   ---------------------------------------------------------------------- */
body.xb-desk .xb-btn-amber{background:#E2700A}
body.xb-desk .xb-btn-amber:hover{background:#B85908}
body.xb-desk .xb-btn-go{background:#19864A}
body.xb-desk .xb-btn-go:hover{background:#116738}

/* Disabled stays grey. Without this the rule above would paint a dead button
   bright red, which is the one colour it must not be. */
body.xb-desk .xb-btn[disabled],
body.xb-desk .xb-btn[disabled]:hover,
body.xb-desk .xb-btn-wide[disabled],
body.xb-desk .xb-btn-wide[disabled]:hover{
  background:#3d3d3d;color:#8a8a8a;cursor:not-allowed;border-color:transparent;
}

/* Tighter gaps now the buttons are smaller. */
body.xb-desk .xb-card .xb-btn{margin:4px 6px 0 0}
body.xb-desk .xb-btnrow{gap:6px}

/* A heading or a button with its explanation beside it rather than beneath.

   Appended after the .xb-tight block on purpose: `.xb-line > .xb-fine` and
   `.xb-tight .xb-fine` carry the same specificity, so the later one wins and
   the margin collapses. Moving this earlier in the file would silently put
   the gap back. */
.xb-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.xb-line > .xb-sec{margin:0;white-space:nowrap}
/* .xb-warn only ever set a colour — its size came from .xb-card p, which
   stops applying the moment it is a <span> in a flex row instead of a
   paragraph. Restored here rather than added to .xb-warn itself, because
   everywhere else it genuinely is a <p> and already sizes correctly. */
.xb-line > .xb-fine,.xb-line > .xb-warn{margin:0;flex:1 1 240px}
.xb-line > .xb-warn{font-size:.9rem;line-height:1.45}
.xb-line > form{margin:0;flex:0 0 auto}
.xb-line > form .xb-btn{margin:0}
@media(max-width:620px){
  .xb-line > .xb-sec{white-space:normal}
  .xb-line > .xb-fine,.xb-line > .xb-warn{flex:1 1 100%}
}

/* The quotation viewer — a <dialog>, so the browser owns the backdrop,
   Escape, focus trapping and restoring focus on close. */
.xb-pdfview{width:min(960px,94vw);height:88vh;padding:0;border:1px solid #3d3d3d;
  background:#1b1b1b;color:#c9ced3}
.xb-pdfview::backdrop{background:rgba(0,0,0,.72)}
.xb-pdfview .xb-pdfbar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid #3d3d3d}
.xb-pdfview .xb-pdfbar strong{color:#fff;font-family:"Rajdhani",sans-serif;
  text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}
.xb-pdfview .xb-pdfacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.xb-pdfview .xb-pdfacts .xb-btn{margin:0}
/* The bar is a known height; the frame takes the rest, so the PDF viewer's
   own scrollbar does the scrolling rather than the dialog growing. */
.xb-pdfview iframe{display:block;width:100%;height:calc(88vh - 52px);border:0;background:#fff}
@media(max-width:620px){
  .xb-pdfview{width:98vw;height:92vh}
  .xb-pdfview iframe{height:calc(92vh - 92px)}
}

/* A logo panel: controls on the left, what is actually on file on the right.
   Showing the stored image matters more than it sounds — a filename tells you
   something was uploaded, not that it was the right thing, and these marks go
   on documents that leave the building. */
.xb-logopanel{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.xb-logopanel .xb-logobody{flex:1 1 320px;min-width:0}
.xb-logoshot{flex:0 0 auto;text-align:center;padding:10px;border:1px solid #3d3d3d;
  background:#fff;border-radius:3px;max-width:240px}
.xb-logoshot img{display:block;max-width:220px;max-height:110px;width:auto;height:auto;margin:0 auto}
.xb-logoshot span{display:block;margin-top:8px;font-family:"Rajdhani",sans-serif;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#6b7279}
@media(max-width:620px){.xb-logoshot{margin-top:12px}}

/* The letterhead as it will actually print — shown back on the settings
   screen, because a row of input boxes does not tell you how the line reads
   once the separators are in. */
.xb-lhpreview{background:#121212;border:1px solid #3d3d3d;border-radius:3px;
  padding:12px 14px;text-align:center;color:#c9ced3;font-size:.86rem;line-height:1.6}

/* The house-letterhead switch, sitting beside its heading. */
.xb-uselh{display:flex;align-items:center;gap:10px;margin:0}
.xb-uselh .xb-check{margin:0;font-size:.84rem;white-space:normal}

/* Textareas in the console, matching the text inputs beside them. */
.xb-f textarea{display:block;width:100%;max-width:560px;margin-top:6px;
  background:#e4e6e8;border:1px solid #a8adb2;color:#111;padding:10px 12px;
  border-radius:2px;font-family:inherit;font-size:.9rem;line-height:1.45;resize:vertical}

/* The "going to" block on a quotation — contact details as a plain stack. */
.xb-who{color:#c9ced3;font-size:.9rem;line-height:1.65;margin:0 0 8px}
.xb-who strong{color:#fff;font-size:1rem}

/* Three across on a quotation; two, then one, as the window narrows. */
.xb-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.xb-3col{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.xb-3col{grid-template-columns:1fr;gap:4px}}

/* An inline label: white and bold, its value in the ordinary grey. */
.xb-lbl{color:#fff;font-weight:700}

/* The three-column head of a quotation, set tight.

   Scoped to .xb-qhead rather than loosened globally: this block is six or
   seven short lines of reference information that a rep scans in one glance,
   which is a different job from a form somebody is filling in. Halving the
   gaps everywhere would have taken the breathing room out of the editor
   below it too. */
.xb-card.xb-qhead p{margin:0 0 3px;line-height:1.35}
.xb-card.xb-qhead .xb-who{line-height:1.3;margin:0 0 4px}
.xb-card.xb-qhead p:last-child{margin-bottom:0}
.xb-card.xb-qhead .xb-sec{margin:0 0 5px}
.xb-card.xb-qhead form{margin-top:7px}
.xb-card.xb-qhead .xb-3col{gap:18px}

/* .xb-card.xb-qhead, not .xb-qhead — .xb-tight .xb-card p already claims
   these paragraphs at (0,2,1), and a single class would have lost to it.
   Two classes plus the element ties, and this block is later in the file,
   so it wins. Same trap as .xb-card a and the invisible button. */

/* The quotation form's two address columns.

   Narrow fields on purpose. The default .xb-f input stretches to 420px,
   which is right for a street address on its own and absurd for a two-letter
   state — and a column of wildly mismatched boxes is harder to scan than a
   column of tidy ones. These are reference fields being checked, not prose
   being written. */
.xb-qform .xb-f{margin:0 0 9px}
.xb-qform .xb-f input[type=text],
.xb-qform .xb-f input[type=number],
.xb-qform .xb-f select{max-width:320px;width:100%}
.xb-qform .xb-sec{margin:0 0 8px}
.xb-qform .xb-fine{margin:6px 0 0;max-width:320px}
.xb-row.xb-row-tight{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  max-width:320px;gap:10px;margin:0 0 9px}

/* Order lines on the quotation form — label, quantity, line amount.
   A worksheet row, not a product tile: no artwork, no card, nothing that
   costs vertical space to repeat what the rep already knows. */
.xb-qlines{max-width:520px;margin:0 0 10px}
.xb-qline{display:grid;grid-template-columns:1fr 110px 92px;gap:10px;
  align-items:center;padding:5px 0;border-bottom:1px solid #2b2b2b}
.xb-qline label{color:#c9ced3;font-size:.88rem;margin:0}
.xb-qline-sub{display:block;color:#7d848b;font-size:.74rem}
.xb-qline input{margin:0;background:#e4e6e8;border:1px solid #a8adb2;color:#111;
  padding:7px 9px;border-radius:2px;width:100%;font-size:.9rem}
.xb-qline-amt{text-align:right;color:#9aa1aa;font-size:.88rem;font-variant-numeric:tabular-nums}
.xb-qline-tot{border-bottom:none;border-top:1px solid #4a4a4a;margin-top:4px;padding-top:9px}
.xb-qline-tot label{color:#fff;font-weight:700}
.xb-qline-tot .xb-qline-amt b{color:#fff;font-size:1rem}
.xb-qtubes{color:#9aa1aa;font-size:.82rem;white-space:nowrap}
.xb-qtubes b{color:#fff}
.xb-qwarn{max-width:520px;margin:0 0 8px}
@media(max-width:560px){
  .xb-qline{grid-template-columns:1fr 90px 80px;gap:8px}
}

/* The quotation form, tightened.

   Appended after the .xb-qform and .xb-qline blocks above so these win on
   source order at equal specificity — same arrangement as the .xb-line
   rules, and the same trap if anybody moves this earlier in the file.

   Roughly half the previous gaps. A rep filling this in is working down a
   known list, not reading prose, and the whole form fitting on one screen
   is worth more than the breathing room. */
.xb-qform .xb-f{margin:0 0 5px}
.xb-qform .xb-f input[type=text],
.xb-qform .xb-f input[type=number],
.xb-qform .xb-f select{margin-top:3px;padding:6px 9px}
.xb-qform .xb-sec{margin:0 0 4px}
.xb-qform .xb-fine{margin:4px 0 0}
.xb-card .xb-row.xb-row-tight{margin:0 0 5px;gap:8px}

/* The label-left rows, re-stated HERE rather than earlier in the file.
 *
 * `.xb-qform .xb-f input[type=text]` just above is two classes and beats
 * `.xb-f-side input[type=text]`, which is one — so the margin-top:3px it sets
 * for the stacked layout was pushing the input 3px below its label and
 * undoing align-items:center. The fix is to win on the same terms rather than
 * to reach for !important, which is the thing task #64 exists to clean up.
 *
 * The trap this leaves: these must stay AFTER the block above. Moving them
 * earlier silently restores the misalignment. */
.xb-qform .xb-f-side{grid-template-columns:8.5rem minmax(0,315px);
  align-items:center;gap:0 14px;margin:0 0 5px}
.xb-qform .xb-f-side label{margin:0}
.xb-qform .xb-f-side input[type=text],
.xb-qform .xb-f-side input[type=email],
.xb-qform .xb-f-side input[type=tel],
.xb-qform .xb-f-side select{margin-top:0;width:100%;max-width:100%;min-width:0;
  box-sizing:border-box}
.xb-qform .xb-pair input[type=text]{margin-top:0}

/* Was .xb-2col.xb-qform, which stopped matching when Customer moved out of the
   two-column grid and Bill to / Ship to became their own pair. */
.xb-card .xb-qform .xb-addrpair{gap:18px}

@media(max-width:700px){
  .xb-qform .xb-f-side{grid-template-columns:minmax(0,315px);gap:0;margin-bottom:10px}
  .xb-qform .xb-f-side input[type=text],
  .xb-qform .xb-f-side input[type=email],
  .xb-qform .xb-f-side input[type=tel],
  .xb-qform .xb-f-side select{margin-top:3px}
  .xb-qform .xb-pair input[type=text]{margin-top:3px}
}

/* Order lines */
.xb-card .xb-qline{padding:3px 0}
.xb-card .xb-qline input{padding:5px 8px}
.xb-card .xb-qline-tot{margin-top:2px;padding-top:6px}
.xb-qlines{margin:0 0 6px}

/* Total tubes and the split button, on one line above the grid. */
.xb-qtotline{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.xb-qtotline .xb-f{flex:0 0 150px;margin:0}
.xb-qtotline .xb-f input{width:100%;max-width:none}
.xb-qtotline > button{flex:0 0 auto;margin-bottom:1px}
.xb-qtotline > button + button{margin-left:0}

/* The form's own headings sit closer to what follows them. */
.xb-card form .xb-sec{margin:14px 0 6px}
.xb-card form .xb-sec:first-of-type{margin-top:0}

/* Total tubes stepper — our own arrows, native spinner hidden.

   The quantities we make are not evenly spaced (100, then 250s), and a
   number input holds one step, so its own arrows would walk 100, 350, 600.
   The shop page reached the same conclusion; this is the console's smaller
   version of the same control. */
.xb-qstep{display:flex;align-items:stretch;margin-top:3px}
.xb-qstep input[type=number]{width:100%;max-width:none;margin:0;text-align:center;
  border-radius:0;border-left:none;border-right:none;
  -moz-appearance:textfield;appearance:textfield}
.xb-qstep input[type=number]::-webkit-outer-spin-button,
.xb-qstep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.xb-qstep button{flex:0 0 30px;background:#3d3d3d;color:#fff;border:1px solid #a8adb2;
  cursor:pointer;font-size:1rem;line-height:1;padding:0;border-radius:2px 0 0 2px}
.xb-qstep button:last-child{border-radius:0 2px 2px 0}
.xb-qstep button:hover{background:#FD0000}
.xb-qtotline .xb-f{flex:0 0 170px}

/* The ordering link, selectable in one click, with Copy beside it. */
.xb-linkrow{display:flex;align-items:stretch;gap:8px;max-width:660px}
.xb-linkbox{width:100%;max-width:560px;background:#e4e6e8;border:1px solid #a8adb2;
  color:#111;padding:8px 10px;border-radius:2px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem}
.xb-linkrow .xb-btn-quiet{flex:0 0 auto;min-width:86px;text-align:center}
/* Copy either worked or it did not, and the button is the only place that can
   say so. Green is the confirmation; the word changes too, because colour
   alone is not a message. */
.xb-btn-ok{background:#0a7a3d;border-color:#0a7a3d;color:#fff}

/* ------------------------------------------------------------------ *
 * Base artwork screen
 * ------------------------------------------------------------------ */

/* A tick that reads as "verified" at a glance. The checksum state is the
   one thing on that table worth seeing without reading. */
.xb-ok-dot { color: #1E8A4C; font-weight: 700; font-size: 1.1em; }

/* The flavour's brand-mark colour, shown beside its hex. The hex alone is
   not checkable by eye, and this colour is one of the three a background
   has to work against. */
.xb-swatch {
  display: inline-block; width: 1em; height: 1em; border-radius: 2px;
  vertical-align: -0.15em; margin-right: .4em;
  border: 1px solid rgba(0,0,0,.25);
}

/* ------------------------------------------------------------------ *
 * The compose screen
 * ------------------------------------------------------------------ */

.xb-cmp-grid { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .xb-cmp-grid { grid-template-columns: 1fr; } }

/* The stage is the label FACE only — the peel-back flap is not composed on,
   so showing it would invite someone to drop a phone number onto it. */
.xb-cmp-stage {
  position: relative; width: 100%;
  background-size: 100% auto; background-repeat: no-repeat; background-position: top center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
  overflow: hidden; touch-action: none; user-select: none;
}
.xb-cmp-empty { padding: 2em 1em; text-align: center; opacity: .6; font-size: .85rem; }

.xb-cmp-box {
  position: absolute; display: flex; align-items: center; justify-content: center;
  cursor: grab; box-sizing: border-box;
  outline: 1px dashed rgba(120,190,255,.9);
  background: rgba(120,190,255,.14);
  font-size: 9px; line-height: 1; white-space: nowrap; color: #cfe6ff;
}
.xb-cmp-box:active { cursor: grabbing; outline-style: solid; }

/* A line box is centred on its own axis, because that is what 'centre' means
   in the stored composition — not a left edge. */
.xb-cmp-line { transform: translateX(-50%); padding: 0 .4em; min-width: 3em; }

.xb-cmp-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .6em; }
.xb-cmp-sw { display: flex; align-items: center; gap: .4em; font-size: .78rem; cursor: pointer;
             padding: 3px 7px 3px 4px; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; }
.xb-cmp-sw span { width: 1.1em; height: 1.1em; border-radius: 2px; border: 1px solid rgba(0,0,0,.3); }
.xb-cmp-sw.off { opacity: .28; cursor: not-allowed; }
.xb-cmp-sw input { margin: 0; }

.xb-cmp-nums { display: flex; flex-wrap: wrap; gap: 8px; margin: .3em 0 .9em; }
.xb-cmp-nums label { font-size: .74rem; display: flex; align-items: center; gap: .3em; }
.xb-cmp-nums input[type=number] {
  width: 4.6em; padding: 2px 4px; font-size: .8rem; text-align: center;
}
.xb-cmp-link { font-size: .72rem; opacity: .8; }

.xb-cmp-line-row { padding: .4em 0; border-top: 1px solid rgba(255,255,255,.08); }
.xb-cmp-actions { display: flex; gap: 10px; margin-top: 1.2em; }

/* Problems, sorted by how much they matter. A stop is a refusal, a warn is
   something to look at, a note is information. */
.xb-cmp-problems { list-style: none; padding: 0; margin: 0 0 1em; }
.xb-cmp-problems li { padding: .4em .7em; margin-bottom: 4px; border-radius: 3px; font-size: .85rem; }
.xb-cmp-stop { background: rgba(200,40,50,.16); border-left: 3px solid #C8282F; }
.xb-cmp-warn { background: rgba(220,160,30,.14); border-left: 3px solid #DCA01E; }
.xb-cmp-note { background: rgba(255,255,255,.06);  border-left: 3px solid rgba(255,255,255,.3); }

.xb-cmp-proof { max-width: 320px; display: block; margin: .6em 0 1.4em;
                border: 1px solid rgba(255,255,255,.18); border-radius: 3px; }

/* Logo gallery on the compose screen ------------------------------------ */

.xb-cmp-logos { display: flex; flex-wrap: wrap; gap: 8px; margin: .3em 0 .7em; }

/* Mid grey behind every thumbnail. A white mark on a dark panel and a dark
   mark on a light one both vanish, and vanishing looks like a broken file. */
.xb-cmp-logo-pick {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px; cursor: pointer; border-radius: 3px;
  background: #8A8A8A; border: 2px solid transparent; min-width: 72px;
}
.xb-cmp-logo-pick.on { border-color: #E8192C; }
.xb-cmp-logo-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.xb-cmp-logo-pick img { max-width: 92px; max-height: 44px; display: block; }
.xb-cmp-logo-pick .xb-fine { color: #222; font-size: .66rem; }
.xb-cmp-logo-none { color: #222; font-size: .78rem; padding: 14px 6px; }

.xb-cmp-logo-manage { margin: .3em 0 1em; padding: .6em; border-radius: 3px;
                      background: rgba(255,255,255,.05); }
.xb-cmp-logo-del { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 8px 0; }
.xb-cmp-logo-del img { max-width: 64px; max-height: 32px; background: #8A8A8A;
                       padding: 3px; border-radius: 2px; }

.xb-linkish { background: none; border: 0; padding: 0; cursor: pointer;
              color: #7FB6FF; text-decoration: underline; font: inherit; }

/* Live stage ------------------------------------------------------------- */

/* The boxes are the type now, not labels for it. Outline only on hover and
   while dragging — a permanent dashed grid makes the stage unreadable as a
   label, which is the one thing it is for. */
.xb-cmp-line, .xb-cmp-logo {
  outline: 0; background: none;
  font-family: Poppins, system-ui, sans-serif; font-weight: 400;
  white-space: nowrap; overflow: visible;
}
.xb-cmp-line:hover, .xb-cmp-logo:hover,
.xb-cmp-line:active, .xb-cmp-logo:active {
  outline: 1px dashed rgba(120,190,255,.95);
  background: rgba(120,190,255,.10);
}
.xb-cmp-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* While a render is in flight. Dimmed rather than blanked: a stage that empties
   on every colour change reads as breakage. */
.xb-cmp-stage.busy { opacity: .55; transition: opacity .12s; }

/* The message only has anything to say when there is no artwork behind. */
.xb-cmp-stage #xbStageMsg { display: none; }
.xb-cmp-stage.no-art #xbStageMsg { display: block; }
.xb-cmp-stage.no-art { background-image: none !important; }

/* Swatches: every colour for every ink, each stating its own contrast ------ */

.xb-cmp-sw { position: relative; }
.xb-cmp-sw.off { opacity: 1; cursor: pointer; }   /* nothing is disabled now */
.xb-cmp-sw em { font-style: normal; }
.xb-cmp-ratio { font-weight: 400; font-size: .68rem; opacity: .6; margin-left: .15em; }

/* Below the floor: cannot be saved. Thin: saveable, worth a look. */
.xb-cmp-sw.poor { border-color: rgba(200,40,50,.75); }
.xb-cmp-sw.poor .xb-cmp-ratio { color: #FF6B74; opacity: 1; }
.xb-cmp-sw.thin { border-color: rgba(220,160,30,.6); }
.xb-cmp-sw.thin .xb-cmp-ratio { color: #E8B84B; opacity: 1; }

/* A dot for a colour filed under the other ink — a hint, not a barrier. */
.xb-cmp-sw.away::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.45);
}

/* The stage is the whole label now, so give the column room for it. */
.xb-cmp-grid { grid-template-columns: minmax(260px, 300px) 1fr; }

/* "What am I composing" header ------------------------------------------- */

.xb-cmp-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.xb-cmp-what .xb-acct-title { margin: 0 8px 0 0; }
.xb-cmp-what label { font-size: .78rem; display: flex; align-items: center; gap: .4em; opacity: .85; }
.xb-cmp-what select { font-size: .8rem; padding: 2px 4px; }

/* Own logo, step 3 ------------------------------------------------------- */

/* Closed and quiet. Most people ordering want their company's label exactly as
   it is and should not be made to think about logos; the ones who need this are
   looking for it. */
.o-ownlogo { margin: 1.1em 0 .4em; padding-top: .9em; border-top: 1px solid rgba(0,0,0,.09); }
.o-chk { display: flex; align-items: center; gap: .55em; cursor: pointer; font-size: .92rem; }
.o-chk input { width: 1.05em; height: 1.05em; }

.o-ownlogo-body { margin: .7em 0 0 1.6em; }
.o-logo-choice { display: flex; gap: 1.2em; margin: .5em 0 .6em; }
.o-radio { display: flex; align-items: center; gap: .4em; font-size: .88rem; cursor: pointer; }

.o-logo-state { display: inline-block; margin-left: .6em; font-size: .82rem; }
.o-logo-state.ok   { color: #1a7f37; }
.o-logo-state.warn { color: #b3261e; }

.o-fine { font-size: .82rem; opacity: .75; line-height: 1.5; margin: .3em 0; }
.o-chk-note { opacity: .7; font-size: .88em; }

/* Publish-as-hero buttons on the compose screen */
.xb-cmp-heroes { display: flex; gap: 8px; flex-wrap: wrap; margin: .5em 0 .2em; }
.xb-cmp-addcolour { margin: .4em 0 1em; padding: .7em; border-radius: 3px;
                    background: rgba(255,255,255,.05); }
.xb-cmp-addcolour label { display: inline-flex; align-items: center; gap: .4em;
                          font-size: .8rem; margin-right: .8em; }
.xb-cmp-logo-del.held { opacity: .72; }
.xb-cmp-logo-del.held .xb-fine { max-width: 16em; line-height: 1.3; }

/* A heading and its single control on one line, to buy vertical space back
   for the stage. Only for sections that ARE one control — a heading over a
   grid of swatches still needs its own line. */
.xb-sec-row { display: flex; align-items: baseline; gap: .8em; margin: 1.1em 0 .4em; }
.xb-sec-row .xb-sec { margin: 0; }
.xb-sec-row select { font-size: .85rem; padding: 2px 4px; }

.xb-logo-take { display: flex; align-items: center; flex-wrap: wrap; gap: .6em; margin: .4em 0; }
.xb-logo-take label { display: flex; align-items: center; gap: .5em; font-size: .82rem; }

/* Logo heading row, and a file control that says what it does ----------- */

.xb-logo-head { gap: 1em; }
.xb-logo-head .xb-linkish { font-size: .8rem; }

/* The native control relabelled: the input is hidden behind a span we style,
   and the chosen filename sits beside it rather than being truncated inside. */
.xb-file { display: inline-flex; align-items: center; cursor: pointer; }
.xb-file input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }
.xb-file-btn {
  display: inline-block; padding: 4px 10px; font-size: .8rem;
  border: 1px solid rgba(255,255,255,.3); border-radius: 3px;
  background: rgba(255,255,255,.06);
}
.xb-file:hover .xb-file-btn { background: rgba(255,255,255,.12); }
.xb-file-name { font-size: .78rem; opacity: .8; }

/* "Position logo" — the label carries the geometry explanation as a hover,
   which keeps three sentences off the page without losing them. */
.xb-pos-row { align-items: center; }
.xb-pos-label {
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  border-bottom: 1px dotted rgba(255,255,255,.4); cursor: help; margin-right: .2em;
}

/* Lines: one row per line of type ---------------------------------------- *
 *
 * A grid rather than flex, so the four columns line up down the section —
 * with flex each row sizes itself and the numbers stagger, which makes a
 * column of figures unreadable at a glance. */
.xb-cmp-line-row {
  display: grid;
  /* The name column is a fixed width rather than 1fr. As 1fr it absorbed all
     the slack and shoved the number boxes to the far right of the column,
     a long way from the name they belong to.
     The trailing 1fr is an empty track: it takes the slack instead, so the
     whole row packs left and the boxes sit beside their labels. */
  grid-template-columns: 7em 4.6em 4.6em 4em auto 1fr;
  gap: 6px; align-items: center;
  padding: 3px 0; border-top: 1px solid rgba(255,255,255,.07);
}
.xb-cmp-line-row input[type=number] {
  width: 100%; padding: 2px 4px; font-size: .8rem;
  /* Centred in the box. These are three- and four-character numbers in a box
     wide enough for a spinner, and left-aligned they sat off to one side with
     a gap after them that read as an empty field. */
  text-align: center;
}
.xb-line-name {
  font-size: .8rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xb-cmp-line-row .xb-cmp-link {
  display: flex; align-items: center; justify-content: center; margin: 0;
}

/* The headings, once. */
.xb-line-head { border-top: 0; padding-bottom: 0; }
.xb-line-head span {
  font-size: .68rem; opacity: .55; letter-spacing: .03em;
  /* Centred too, so each heading sits over the column it names rather than
     drifting left of it. */
  text-align: center;
}

/* Lines: the use column, and a little air between the boxes -------------- */

.xb-cmp-line-row { grid-template-columns: 1.6em 7em 4.6em 4.6em 4em auto 1fr; gap: 10px; }
.xb-cmp-use { display: flex; align-items: center; justify-content: center; margin: 0; }
.xb-line-name.off { opacity: .4; text-decoration: line-through; }
.xb-file-hint { cursor: help; border-bottom: 1px dotted rgba(255,255,255,.3); }

/* A rule between the blocks of the compose column ------------------------ *
 *
 * The column is now a dozen controls deep with no structure to it — ink,
 * logo, type, background, lines, the buttons, the hero row — and the section
 * headings alone were not enough to say where one ended and the next began.
 *
 * Drawn above the heading rather than below, so the rule belongs to the block
 * it opens. In the brand red at low alpha: enough to divide, not enough to
 * compete with the artwork, which is the thing on this screen worth looking
 * at.
 *
 * Direct children only — a heading nested inside a disclosure panel is part
 * of its block, not a new one. */
.xb-cmp-controls > .xb-sec,
.xb-cmp-controls > .xb-sec-row,
.xb-cmp-controls > .xb-cmp-actions {
  /* The button red, #FD0000 — the same var(--xb-red) the Save and Render
     buttons use, at full strength rather than faded. At 38% it read as a
     hairline; these are structure, and the eye is meant to catch them.
   *
     1.5px rather than 2: two reads as a heading rule rather than a divider.
     Worth knowing that this is not exact everywhere — a browser on a standard
     density display rounds a fractional border to whole device pixels, so it
     lands as 1 or 2 depending on the browser, and only renders as a true 1.5
     on a HiDPI screen. Acceptable because either rounding is fine here; it
     would not be for anything load-bearing. */
  border-top: 1.5px solid var(--xb-red);
  /* A quarter of what it was above and below. The rules are close to the
     headings on purpose: a rule with a lot of air around it floats between
     two blocks and belongs to neither. */
  padding-top: .21em;
  margin-top: .29em;
}
.xb-cmp-controls > .xb-sec-row { margin-bottom: .2em; }

/* The first block opens the column; there is nothing above it to divide. */
.xb-cmp-controls > .xb-sec:first-child,
.xb-cmp-controls > .xb-sec-row:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Background as a dropdown ----------------------------------------------- */

.xb-bg-chip {
  display: inline-block; width: 1.15em; height: 1.15em; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.3); vertical-align: -.2em;
}
.xb-bg-chip.empty { background: repeating-linear-gradient(45deg,
  rgba(255,255,255,.12) 0 3px, transparent 3px 6px); }

.xb-bg-note { font-size: .74rem; opacity: .7; }
.xb-bg-note.poor { color: #FF6B74; opacity: 1; }
.xb-bg-note.thin { color: #E8B84B; opacity: 1; }

/* The chosen background, beside its heading ------------------------------ */
.xb-bg-name { font-size: .82rem; }
.xb-cmp-swatches[hidden] { display: none; }

/* The hex beside the name — the thing you quote to a printer or a customer,
   and the only unambiguous name a colour has. */
.xb-bg-hex { font-size: .74rem; opacity: .65; letter-spacing: .02em; }

/* "Change background…" is a link inside a heading row, so it inherits the
   row's baseline but must not inherit the heading's size. */
.xb-bg-change { font-size: .78rem; }

/* The customer's original request, full width under Ship to and Contact.
   Quoted with a rule down the left rather than merely indented: these are
   somebody else's words sitting on a screen otherwise made of Amanda's own
   controls, and without the rule they read as instructions the console is
   giving her. */
.xb-request{border-left:3px solid #FD0000;padding:2px 0 2px 13px;margin:9px 0 0}
.xb-request-hd{display:flex;align-items:center;gap:10px}
.xb-request-hd .xb-shipto-h{margin:0}
.xb-request-h{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.04em;color:#9aa1aa;margin:5px 0 1px}
/* pre-wrap, so a customer who typed a list as separate lines gets a list back
   rather than one run-on paragraph — nl2br handles the breaks, this keeps any
   leading spacing they used */
.xb-request-t{margin:0;line-height:1.5;white-space:pre-wrap}
.xb-request .xb-fine{margin-top:5px}

/* ---------- email this file, in the viewer footer ---------- */
/* 19 October. Beside Download, not under it: they are the two things you do
   with a file you are looking at. */
.xb-lb-mail{
  background:none;border:none;padding:0;cursor:pointer;color:#FD0000;
  font:inherit;text-decoration:underline;text-underline-offset:3px;
}
.xb-lb-mail:hover{color:#fff}
/* 0 0 100%, not 1 1 100%: a basis of 100% can still be shrunk inside the
   footer's flex row, which is what put the fields beside the filename instead
   of under it. */
/* The form's contents are CENTRED, which puts them under "Email to someone" —
   the footer is space-between, so that link sits in the middle. The fields are
   a third of the width because an address and a short note do not need the
   full span of a lightbox, and a 1,000px-wide text box invites an essay. */
/* A COLUMN. Side by side, the address and the note read as two unrelated
   fields; stacked and the same width, they read as one form — and the note is
   the one that grows, so it belongs underneath. */
.xb-lb-mailform{
  flex:0 0 100%;display:flex;flex-direction:column;align-items:center;
  gap:8px;text-align:center;
  margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.18);
}
.xb-lb-mailbtns{display:flex;gap:8px;align-items:center}
/* The three footer controls keep their own line and do not wrap internally —
   "Download this file" broken across two lines reads as two links. */
.xb-lb-foot > .xb-lb-dl,
.xb-lb-foot > .xb-lb-mail,
.xb-lb-foot > .xb-fine{white-space:nowrap;flex:0 0 auto}
/* Names the file it will send. The arrow keys move between files while this
   form is open, so this is what stops a wrong-file send. */
.xb-lb-mailfile{flex:0 0 100%;font-size:.78rem;color:#9aa1aa}
/* font:inherit took the lightbox's own type size, which is set large for a
   dialog title — so two form fields came out at heading scale and made the
   footer twice the height it needed. Sized explicitly instead: these are
   fields in a tool, not display type. */
/* min-width so a third of a narrow viewport does not become a field too small
   to read an address in. */
.xb-lb-mailform input[type=email]{
  flex:0 0 auto;width:34%;min-width:240px;padding:6px 9px;border:1px solid rgba(255,255,255,.25);
  border-radius:4px;background:rgba(255,255,255,.06);color:#fff;
  font-family:inherit;font-size:.86rem;line-height:1.4;
}
.xb-lb-mailform textarea{
  flex:0 0 auto;width:34%;min-width:240px;min-height:58px;resize:vertical;
  padding:6px 9px;border:1px solid rgba(255,255,255,.25);border-radius:4px;
  background:rgba(255,255,255,.06);color:#fff;
  font-family:inherit;font-size:.86rem;line-height:1.4;
}
/* Placeholders at the same size, or the empty state looks bigger than the
   filled one. */
.xb-lb-mailform input::placeholder,
.xb-lb-mailform textarea::placeholder{font-size:.86rem;color:#8a9098}
.xb-lb-mailcount{flex:0 0 100%;font-size:.78rem;color:#9aa1aa}
.xb-lb-mailcount.is-bad{color:#FD0000}
.xb-lb-mailmsg{flex:0 0 100%;font-size:.84rem}
.xb-lb-mailmsg.is-ok{color:#3ec26f}
.xb-lb-mailmsg.is-bad{color:#FD0000}

/* ---------- the desk opens straight into the work ---------- */
/* 19 October. Two separate sources of the gap above ORDER #nn:
 *
   .xb-store-main carries padding:34px 0 60px, which is right for a customer
   landing on a shop page and wrong for a tool somebody has open all day. It is
   scoped to body.xb-desk rather than changed outright — the same rule serves
   every customer-facing page, and none of them asked for this.
 *
   .xb-whobar is a <p> whose own style sets padding but never margin, so it
   keeps the browser's default 1em above and below. That margin is most of
   what was left after the padding went. */
body.xb-desk .xb-store-main{padding-top:0}
body.xb-desk .xb-whobar{margin:0}