/*
 * My Account.
 *
 * Its own family stylesheet, loaded only on account pages, alongside base.css
 * and chrome.css. It is not part of home/product (editorial, gold) and not part
 * of funnel (chrome-less 520px shell) — a customer checking an order should
 * still have the site header to shop from, but the page itself is a utility
 * screen, not a marketing one.
 *
 * Tokens are the same ones chrome.css declares. Nothing is redefined here.
 * Note: never write a glob or a closing comment marker inside a CSS comment.
 */

/* ---------------------------------------------------------------------------
 * THE ACCOUNT GRID AND BORDER SYSTEM
 *
 * Everything below derives from three numbers. Nothing here is eyeballed, and
 * no value is written twice.
 *
 *   base unit      4px   — every radius and gutter is a whole multiple of it
 *   grid           1200px content, 12 columns, 24px gutters
 *   border width   1px   — the SAME on all four sides of every card
 *
 * COLUMN MATH
 *   track = (1200 - 11 x 24) / 12 = (1200 - 264) / 12 = 78px
 *   nav   = 3 tracks + 2 gutters = (3 x 78) + (2 x 24) = 234 + 48 = 282px
 *   body  = 9 tracks + 8 gutters = (9 x 78) + (8 x 24) = 702 + 192 = 894px
 *   282 + 24 (the gutter between them) + 894 = 1200. It closes exactly.
 *
 * BORDERS
 *   One width, all four sides, on every card. No accent stripe on a single
 *   edge — a 3px left border against a 1px top border makes a box read as
 *   misaligned next to its neighbours, and emphasis is carried by the
 *   background tint and text colour instead. A `border-bottom` used as a
 *   SEPARATOR between rows is a different thing and is allowed: it is a rule,
 *   not the edge of a card.
 *
 * RADII — concentric, not arbitrary
 *   A rounded box inside another rounded box only looks right when
 *   inner = outer - padding. Radii are therefore a scale, and a nested element
 *   always takes the step below its parent:
 *     --r-lg 16px  page-level panels
 *     --r-md 12px  cards and blocks
 *     --r-sm  8px  inputs, notices, items sitting inside a card
 *     --r-pill      fully round, for status chips and buttons only
 * ------------------------------------------------------------------------ */
.bo-acc{
  --u:4px;                       /* base unit */
  --gutter:calc(var(--u) * 6);   /* 24px */
  --track:78px;                  /* (1200 - 11*24) / 12 */
  --col-nav:calc(var(--track) * 3 + var(--gutter) * 2);   /* 282px */

  --bw:1px;                      /* the only border width used on a card */
  --r-lg:calc(var(--u) * 4);     /* 16px */
  --r-md:calc(var(--u) * 3);     /* 12px */
  --r-sm:calc(var(--u) * 2);     /*  8px */
  --r-pill:999px;

  /* max-width covers the CONTENT box, so the side padding is added to it.
     Written as grid-max + 2 x padding, the inner width is exactly 1200px and
     the column arithmetic above closes; with a plain max-width:1200px the
     padding eats 48px and the body track comes out at 846 instead of 894. */
  max-width:calc(var(--grid-max) + var(--s3) * 2);
  margin:0 auto;
  padding:var(--s5) var(--s3) var(--s7);
}
.bo-acc__head{margin-bottom:var(--s4)}
.bo-acc__head h1{
  font-size:var(--t-2xl);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 6px;
  color:var(--ink);
}
.bo-acc__head p{margin:0;color:var(--ink-2);font-size:var(--t-base)}

/* Two columns on desktop, stacked on mobile. The nav is a rail, not a sidebar
   card, so it does not compete with the content for weight. */
.bo-acc__grid{
  display:grid;
  /* 282px + 24px + 894px = 1200px. minmax(0,1fr) so a long order line can
     shrink the track instead of pushing the page sideways. */
  grid-template-columns:var(--col-nav) minmax(0,1fr);
  gap:var(--gutter);
  align-items:start;
}
@media (max-width:860px){
  .bo-acc__grid{grid-template-columns:minmax(0,1fr);gap:var(--gutter)}
}

/* ---------------------------------------------------------------- nav */
/* woocommerce-layout.css declares
     .woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}
   at (0,2,0). A plain .bo-acc-nav rule is (0,1,0) and loses, so the nav
   rendered at 30% of its own 220px grid column — 66px, with every label
   wrapping. Matched on specificity rather than reached for !important, the
   same way the PDP gallery had to beat div.images. */
.bo-acc .bo-acc-nav.woocommerce-MyAccount-navigation{
  float:none;
  width:auto;
  margin:0;
}
.bo-acc-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bo-acc-nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  color:var(--ink-2);
  text-decoration:none;
  font-size:var(--t-sm);
  font-weight:500;
  transition:background .15s ease,color .15s ease;
}
.bo-acc-nav a:hover{background:var(--panel);color:var(--ink)}
.bo-acc-nav li.is-active a{background:var(--forest);color:#fff}
.bo-acc-nav li.is-active a svg{color:#fff}
.bo-acc-nav svg{flex:none;color:var(--ink-3)}
.bo-acc-nav a:hover svg{color:var(--ink-2)}

@media (max-width:860px){
  /* Horizontal scroller on mobile. overflow-x on its own forces the other axis
     to auto too, which clips focus rings — hence the explicit overflow-y. */
  .bo-acc-nav ul{
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    gap:6px;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .bo-acc-nav a{white-space:nowrap;border:var(--bw) solid var(--line);padding:8px 12px}
  .bo-acc-nav li.is-active a{border-color:var(--forest)}
}

/* ---------------------------------------------------------------- blocks */
.bo-acc-block{
  background:var(--paper);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s3);
  margin-bottom:var(--gutter);
}
.bo-acc-block__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  margin-bottom:var(--s2);
}
.bo-acc-block__head h2{
  font-size:var(--t-md);margin:0;color:var(--ink);letter-spacing:-.01em;
}
.bo-acc-block__head a{font-size:var(--t-sm);color:var(--forest);text-decoration:none;font-weight:500}
.bo-acc-block__head a:hover{text-decoration:underline}

.bo-acc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s3)}
@media (max-width:560px){.bo-acc-stats{grid-template-columns:1fr}}
/* Inside a --r-md card, so one step down the scale. */
.bo-acc-stat{
  background:var(--panel-2);
  border:var(--bw) solid transparent;
  border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);
}
.bo-acc-stat b{display:block;font-size:var(--t-xl);color:var(--forest-deep);letter-spacing:-.02em;line-height:1.1}
.bo-acc-stat span{display:block;font-size:var(--t-xs);color:var(--ink-2);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}

/* ---------------------------------------------------------------- orders */
.bo-ords{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
/* Sits inside a --r-md block, so it takes --r-sm. */
.bo-ord{
  border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);
  padding:14px var(--s2);
  background:var(--paper);
}
.bo-ord__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:6px}
.bo-ord__num{font-weight:650;color:var(--ink);font-size:var(--t-sm);letter-spacing:.01em}
.bo-ord__items{color:var(--ink-2);font-size:var(--t-sm);line-height:1.45;margin-bottom:10px}
.bo-ord__more{color:var(--ink-3)}
.bo-ord__foot{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.bo-ord__date{color:var(--ink-3);font-size:var(--t-xs)}
.bo-ord__total{font-weight:650;color:var(--ink);font-size:var(--t-sm);margin-left:auto}
/* Woo renders the currency symbol in a nested span. A blanket span rule here
   would print the rupee sign on its own line, so nothing blanket is written. */
.bo-ord__total .woocommerce-Price-amount{white-space:nowrap}
.bo-ord__view{
  font-size:var(--t-xs);font-weight:600;color:var(--forest);
  border:var(--bw) solid var(--line-2);border-radius:var(--r-pill);
  padding:6px 14px;text-decoration:none;
  /* 28px minimum tap target on the funnel, per the checklist. */
  min-height:28px;display:inline-flex;align-items:center;
}
.bo-ord__view:hover{background:var(--panel);border-color:var(--forest)}

/* Status pills. Colour carries meaning, so each also differs in text. */
.bo-ord__status{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--panel);color:var(--ink-2);border:var(--bw) solid var(--line);
}
.bo-st--completed{background:#ECF6F0;color:#116B41;border-color:#CBE7D8}
.bo-st--processing{background:var(--gold-soft);color:#8A6320;border-color:var(--gold-line)}
.bo-st--pending{background:#FDF6E8;color:#8A6320;border-color:#EFE0C2}
.bo-st--cancelled,.bo-st--failed{background:#FBEEEE;color:#93312B;border-color:#EFD3D1}
.bo-st--refunded{background:#EEF1F6;color:#3C4A63;border-color:#D6DDE9}

/* ---------------------------------------------------------------- empty */
.bo-acc-empty{text-align:center;padding:var(--s5) var(--s3)}
.bo-acc-empty h2{font-size:var(--t-lg);margin:0 0 8px;color:var(--ink)}
.bo-acc-empty p{margin:0 auto var(--s3);color:var(--ink-2);max-width:44ch;font-size:var(--t-sm);line-height:1.55}

.bo-acc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--forest);color:#fff;text-decoration:none;
  border:var(--bw) solid transparent;border-radius:var(--r-pill);
  padding:12px var(--s3);
  font-size:var(--t-sm);font-weight:600;cursor:pointer;
  font-family:inherit;
}
.bo-acc-btn:hover{background:var(--forest-deep)}
.bo-acc-btn--ghost{background:transparent;color:var(--forest);border:var(--bw) solid var(--line-2)}
.bo-acc-btn--ghost:hover{background:var(--panel)}

/* ---------------------------------------------------------------- forms */
.bo-acc form .form-row{margin-bottom:var(--s2)}
.bo-acc label{display:block;font-size:var(--t-sm);color:var(--ink-2);margin-bottom:6px;font-weight:500}
/* woocommerce.css declares
     .woocommerce form .form-row .input-text{border-radius:var(--wc-form-border-radius)}
   at (0,3,0). A `.bo-acc input[type=text]` rule is (0,2,1) and loses, which is
   why every field on Edit account rendered at Woo's 4px radius, 8px padding
   and 240px width instead of this theme's. Both selector shapes are listed so
   the rule wins on specificity, not on file order. Third time this exact trap
   has appeared on this build — after the PDP gallery and the account nav. */
.bo-acc input[type=text],.bo-acc input[type=email],.bo-acc input[type=tel],
.bo-acc input[type=password],.bo-acc input[type=number],.bo-acc select,.bo-acc textarea,
.bo-acc form .form-row .input-text,
.bo-acc form .form-row select,
.bo-acc form .form-row textarea{
  width:100%;box-sizing:border-box;
  border:var(--bw) solid var(--line-2);border-radius:var(--r-sm);
  padding:11px 12px;font-size:var(--t-base);font-family:inherit;color:var(--ink);
  background:var(--paper);
}
/* Woo lays form rows out as floated halves. The account forms read better as a
   real grid: two columns that collapse to one, gutters from the same scale. */
.bo-acc .woocommerce-MyAccount-content form .woocommerce-form-row,
.bo-acc .woocommerce-MyAccount-content form .form-row{
  float:none;width:auto;padding:0;margin:0 0 var(--s2);
}
.bo-acc-fieldgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2) var(--gutter);
}
@media (max-width:640px){.bo-acc-fieldgrid{grid-template-columns:minmax(0,1fr)}}
.bo-acc fieldset{
  border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);
  padding:var(--s3);
  margin:var(--gutter) 0 0;
}
.bo-acc legend{padding:0 8px;font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.bo-acc .woocommerce-form-row em,.bo-acc span.description{
  display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:4px;font-style:normal;
}

/* Addresses: two equal cards, same border and radius as every other card. */
.bo-acc .woocommerce-Addresses{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin:0;
}
@media (max-width:640px){.bo-acc .woocommerce-Addresses{grid-template-columns:minmax(0,1fr)}}
.bo-acc .woocommerce-Address{
  border:var(--bw) solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s3);
  background:var(--paper);
  margin:0;
}
.bo-acc .woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  margin-bottom:var(--s2);
}
.bo-acc .woocommerce-Address-title h2,.bo-acc .woocommerce-Address-title h3{
  font-size:var(--t-md);margin:0;color:var(--ink);letter-spacing:-.01em;
}
.bo-acc .woocommerce-Address-title a{font-size:var(--t-sm);color:var(--forest);text-decoration:none;font-weight:500}
.bo-acc .woocommerce-Address-title a:hover{text-decoration:underline}

/* Order detail tables — Woo's own markup, given this theme's card treatment.
   Note the `table.` in every selector. woocommerce.css writes
   `.woocommerce table.shop_table{border-radius:5px}` at (0,2,1); a rule of
   `.bo-acc .woocommerce-table--order-details` is (0,2,0) and loses on the
   element selector alone, leaving one 5px box among a page of 12px ones.
   FOURTH time this shape has bitten on this build — Woo's stylesheet nearly
   always qualifies with an element, so an override must too. */
.bo-acc table.woocommerce-table--order-details,
.bo-acc table.woocommerce-table--customer-details,
.bo-acc table.woocommerce-orders-table,
.bo-acc table.shop_table{
  border:var(--bw) solid var(--line);
  border-radius:var(--r-md);
  border-collapse:separate;border-spacing:0;
  overflow:hidden;
  width:100%;
}
.bo-acc table.woocommerce-table--order-details th,
.bo-acc table.woocommerce-table--order-details td,
.bo-acc table.woocommerce-orders-table th,
.bo-acc table.shop_table th,
.bo-acc table.shop_table td{
  /* A separator between rows, not an edge of a card — the one place a
     single-side border is the right answer. */
  border-bottom:var(--bw) solid var(--line);
  padding:12px var(--s2);
}
.bo-acc table.woocommerce-table--order-details tfoot tr:last-child th,
.bo-acc table.woocommerce-table--order-details tfoot tr:last-child td,
.bo-acc table.shop_table tfoot tr:last-child th,
.bo-acc table.shop_table tfoot tr:last-child td{border-bottom:0}
.bo-acc .woocommerce-customer-details address{
  border:var(--bw) solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s3);
  background:var(--paper);
}
.bo-acc input:focus,.bo-acc select:focus,.bo-acc textarea:focus{
  outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest);
}
.bo-acc .woocommerce-Button,.bo-acc button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--forest);color:#fff;border:var(--bw) solid transparent;border-radius:var(--r-pill);
  padding:12px var(--s3);font-size:var(--t-sm);font-weight:600;
  cursor:pointer;font-family:inherit;
}
.bo-acc .woocommerce-Button:hover,.bo-acc button[type=submit]:hover{background:var(--forest-deep)}

/* Login and lookup, side by side on desktop. */
.bo-acc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:start}
@media (max-width:760px){.bo-acc-two{grid-template-columns:1fr}}

.bo-lookup__note{font-size:var(--t-xs);color:var(--ink-3);margin-top:10px;line-height:1.5}
.bo-lookup__results{margin-top:var(--s3)}
.bo-lookup__none{color:var(--ink-2);font-size:var(--t-sm);margin-top:var(--s2)}

/* ---------------------------------------------------------------- notices
 * WooCommerce emits notices in three different shapes and it is not
 * consistent about them:
 *
 *   success  <div class="woocommerce-message">
 *   info     <div class="woocommerce-info">
 *   error    <ul  class="woocommerce-error"><li>…</li></ul>   <- a LIST
 *
 * The error one being a <ul> is why an unstyled account page shows bullet
 * points and a stray indent next to a validation message. All three are
 * normalised to the same box here: same 1px border on all four sides, same
 * --r-sm radius, same padding, same type size. Only the three colours differ,
 * and each also differs in wording, so colour is never the only signal.
 *
 * Several errors render as several separate <ul>s rather than one list with
 * several <li>s, so consecutive notices get a tightened top margin instead of
 * a full gap, which otherwise stacks into a wall of whitespace. */
.bo-acc .woocommerce-message,
.bo-acc .woocommerce-info,
.bo-acc .woocommerce-error,
.bo-acc ul.woocommerce-error{
  display:flex;
  align-items:flex-start;
  gap:var(--s2);
  flex-wrap:wrap;
  margin:0 0 var(--gutter);
  padding:12px var(--s2);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);
  background:var(--panel);
  color:var(--ink-2);
  font-size:var(--t-sm);
  line-height:1.5;
  /* The error variant arrives as a list. */
  list-style:none;
}
/* Consecutive notices: one gutter between the group, not one per notice. */
.bo-acc .woocommerce-message + .woocommerce-message,
.bo-acc .woocommerce-error + .woocommerce-error,
.bo-acc .woocommerce-info + .woocommerce-info{
  margin-top:calc(var(--gutter) * -1 + var(--u) * 2);
}
.bo-acc ul.woocommerce-error li{list-style:none;margin:0;padding:0}
.bo-acc ul.woocommerce-error li + li{margin-top:6px}

.bo-acc .woocommerce-error,
.bo-acc ul.woocommerce-error{background:#FBEEEE;border-color:#EFD3D1;color:#93312B}
.bo-acc .woocommerce-message{background:#ECF6F0;border-color:#CBE7D8;color:#116B41}
.bo-acc .woocommerce-info{background:var(--gold-soft);border-color:var(--gold-line);color:#7A5714}

/* A notice can carry a button — the email-verification prompt does, and Woo
   renders the <a> BEFORE the text in the source. Ordered visually after it, so
   the sentence reads first and the action sits at the end where it belongs. */
.bo-acc .woocommerce-message .button,
.bo-acc .woocommerce-info .button,
.bo-acc .woocommerce-error .button{
  order:2;
  margin-left:auto;
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;
  padding:7px 16px;
  border:var(--bw) solid currentColor;
  border-radius:var(--r-pill);
  background:transparent;
  color:inherit;
  font-size:var(--t-xs);font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.bo-acc .woocommerce-message .button:hover,
.bo-acc .woocommerce-info .button:hover,
.bo-acc .woocommerce-error .button:hover{background:rgba(0,0,0,.05)}

/* ---------------------------------------------------------------- tables */
.bo-acc table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.bo-acc table th{
  text-align:left;color:var(--ink-3);font-weight:600;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.06em;
  padding:10px 12px;border-bottom:1px solid var(--line);
}
.bo-acc table td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.bo-acc table tr:last-child td{border-bottom:0}
/* Wide content scrolls inside its own container; the page body never does. */
.bo-acc__scroll{overflow-x:auto}

.bo-acc address{font-style:normal;color:var(--ink-2);font-size:var(--t-sm);line-height:1.6}
.bo-acc-none{color:var(--ink-3);font-size:var(--t-sm);margin:0}

/* Pagination on a 9,900-order history. */
.woocommerce-pagination{margin-top:var(--s3);display:flex;gap:8px;justify-content:center}
.woocommerce-pagination .button{
  border:var(--bw) solid var(--line-2);border-radius:var(--r-pill);padding:9px 18px;
  color:var(--forest);text-decoration:none;font-size:var(--t-sm);font-weight:600;
}
.woocommerce-pagination .button:hover{background:var(--panel)}

/* ---------------------------------------------------------------------------
 * TYPOGRAPHY AND RHYTHM INSIDE THE ACCOUNT AREA
 *
 * The account area inherits the marketing type scale, where an h2 is 33px and
 * carries no margin because every marketing section sets its own. Dropped into
 * a utility screen that produced 33px headings sitting flush against the text
 * under them — the "everything is crammed together" reading.
 *
 * Fixed with one vertical rhythm, all of it multiples of the 4px base unit:
 *   space after a heading      = 2u  (8px)
 *   space between paragraphs   = 3u  (12px)
 *   space between cards        = 6u  (24px, one gutter)
 *   card padding               = 6u  (24px), 5u (20px) on mobile
 * ------------------------------------------------------------------------ */
.bo-acc h2{
  font-size:var(--t-md);
  line-height:1.3;
  letter-spacing:-.01em;
  margin:0 0 calc(var(--u) * 2);
  color:var(--ink);
}
.bo-acc h3{
  font-size:var(--t-base);
  line-height:1.35;
  margin:0 0 calc(var(--u) * 2);
  color:var(--ink);
}
/* Woo prints bare <p>s between its sections; give them the same rhythm. */
.bo-acc .woocommerce-MyAccount-content > p{
  margin:0 0 calc(var(--u) * 3);
  color:var(--ink-2);
  font-size:var(--t-sm);
  line-height:1.6;
}
.bo-acc .woocommerce-MyAccount-content > section:not(:last-child),
.bo-acc .woocommerce-MyAccount-content > form > section:not(:last-child){
  margin-bottom:var(--gutter);
}
/* Woo highlights the number/date/status with <mark>, which browsers paint
   yellow. Turned into emphasis rather than a highlighter pen. */
.bo-acc mark{background:none;color:var(--ink);font-weight:650}

.bo-acc-block{padding:var(--gutter)}
@media (max-width:560px){
  .bo-acc-block{padding:calc(var(--u) * 5)}
  .bo-acc{padding-left:var(--s2);padding-right:var(--s2)}
}

/* ---------------------------------------------------------------- order head */
.bo-order__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s2);
  margin-bottom:var(--gutter);
}
.bo-order__label{
  display:block;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:calc(var(--u));
}
/* Qualified with h2 because `.bo-acc h2` above is (0,1,1) and a bare
   `.bo-order__num` is (0,1,0) — the generic heading rule would win and render
   the order number at 18px. The same element-vs-class trap that Woo's
   stylesheet sprang three times on this build, here in my own file. */
.bo-acc h2.bo-order__num{font-size:var(--t-xl);margin:0;letter-spacing:-.02em;line-height:1.1}

/* Facts as a real grid: four equal tracks that collapse to two, never a
   ragged float row. */
.bo-order__facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s2) var(--gutter);
  margin:0;
  padding:var(--gutter) 0 0;
  border-top:var(--bw) solid var(--line);   /* a separator, not a card edge */
}
@media (max-width:640px){.bo-order__facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bo-order__facts div{min-width:0}
.bo-order__facts dt{
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:calc(var(--u));
}
.bo-order__facts dd{
  margin:0;font-size:var(--t-sm);font-weight:600;color:var(--ink);
}
.bo-order__facts dd .woocommerce-Price-amount{white-space:nowrap}

.bo-order__actions{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--gutter);
  padding-top:var(--gutter);
  border-top:var(--bw) solid var(--line);
}
@media (max-width:480px){
  .bo-order__actions{flex-direction:column}
  .bo-order__actions .bo-acc-btn{width:100%}
}

/* Woo's own order-action buttons, wherever they appear outside our template. */
.bo-acc .woocommerce-button,
.bo-acc a.button.wc-forward,
.bo-acc .woocommerce-MyAccount-content a.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;
  padding:10px var(--s3);
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-pill);
  background:transparent;color:var(--forest);
  font-size:var(--t-sm);font-weight:600;text-decoration:none;
}
.bo-acc .woocommerce-button:hover,
.bo-acc .woocommerce-MyAccount-content a.button:hover{background:var(--panel);border-color:var(--forest)}

/* ---------------------------------------------------------------- notes */
.bo-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.bo-notes li{
  border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);
  padding:var(--s2);
  background:var(--panel);
}
.bo-notes__when{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-bottom:calc(var(--u))}
.bo-notes__body p{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}

/* ------------------------------------------------- order detail inner sections */
/* Woo nests <section class="woocommerce-order-details"> and
   <section class="woocommerce-customer-details"> inside one another's output,
   each with its own h2. Flattened so they read as one card. */
.bo-order__detail .woocommerce-order-details,
.bo-order__detail .woocommerce-customer-details{margin:0;padding:0;border:0}
.bo-order__detail .woocommerce-customer-details{margin-top:var(--gutter);padding-top:var(--gutter);border-top:var(--bw) solid var(--line)}
.bo-order__detail h2,
.bo-order__detail .woocommerce-column__title{
  font-size:var(--t-base);
  margin:0 0 calc(var(--u) * 3);
  color:var(--ink);
}
.bo-order__detail .woocommerce-columns{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin:0;
}
@media (max-width:640px){.bo-order__detail .woocommerce-columns{grid-template-columns:minmax(0,1fr)}}
.bo-order__detail .woocommerce-column{width:auto;float:none;padding:0}
.bo-order__detail address{
  font-style:normal;color:var(--ink-2);font-size:var(--t-sm);line-height:1.65;
  border:var(--bw) solid var(--line);border-radius:var(--r-sm);padding:var(--s2);
}