/*
 * BLACKRAM — WooCommerce layer.
 * Loaded only on store screens. WooCommerce ships its own light-themed CSS;
 * this file pulls its blocks into the same monochrome vocabulary as the rest
 * of the site. Every selector is either a Woo class or a br- class, never a
 * bare element, so nothing leaks into the editor or the homepage.
 */

/* ---- store notices ----------------------------------------------------
   Two places print these. The store-notices block prints the ones raised by an
   action — "temporary password", "address saved" — at the top of the page. The
   account screens print theirs inline, in the panel: an empty Downloads tab and
   an empty Orders tab are both a wc_print_notice() call.

   Both go through the same template, and **which** template that is has to be
   read from WooCommerce rather than assumed. As of 11.0 `wc_print_notice()`
   emits the blocks banner — `.wc-block-components-notice-banner` with an inline
   <svg> — and not the classic `.woocommerce-info` most write-ups still
   describe. Verified by capturing the output of the downloads and orders
   endpoints server-side. The classic selectors are kept below because a plugin
   or an older install can still produce them; the blocks rules further down are
   the ones that do the work on this site. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info,
.br-checkout .woocommerce-MyAccount-content .woocommerce-error,
.wc-block-components-notice-banner{
  background:var(--br-notice-bg);
  border:1px solid var(--iron);
  border-color:color-mix(in srgb, var(--br-notice-fg) 20%, transparent);
  color:var(--br-notice-fg);
  border-radius:0;
  font-size:.875rem;
}
/* The classic notices only. Blocks notices are a different construction and are
   already laid out by the rules further down this file. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info,
.br-checkout .woocommerce-MyAccount-content .woocommerce-error{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1.25rem;
  padding:.95rem 1.15rem;margin:0 0 1.75rem;
  border-top-width:1px;line-height:1.6;
}
/* Both pseudo-elements: ::before is the glyph, ::after is the clearfix the
   float layout needed. Neither has a job left in a flex row. */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::after,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-error::after,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message::before,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message::after,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info::before,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info::after,
.br-checkout .woocommerce-MyAccount-content .woocommerce-error::before,
.br-checkout .woocommerce-MyAccount-content .woocommerce-error::after{
  content:none;display:none;
}
/* WooCommerce floats the offer inside the notice to the right. In a flex row an
   auto margin puts it in the same place without taking it out of flow, so a
   long message pushes it to the next line instead of sitting under it.

   `order` as well as the margin, because the two notices disagree about where
   the action goes in the markup: the empty-downloads one puts it after the
   sentence, the temporary-password one puts it before. The reader should not
   have to notice which — the sentence is the notice, the action follows it. */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message .button,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info .button,
.br-checkout .woocommerce-MyAccount-content .woocommerce-error .button{
  float:none;margin:0 0 0 auto;order:1;
}

/* ---- empty cart -------------------------------------------------------- */
/* WooCommerce's own empty state is a white circular emoji, a dotted rule and a
   grid of its default product tiles — placeholder art, star ratings and a grey
   button. The page content carries the BLACKRAM replacement instead (see the
   `blackram/cart-empty` pattern); what is left here is its spacing.
   `.br-section-head` already ends in 2.75rem of air, so only the prose and the
   band under it need saying. */
.wp-block-woocommerce-empty-cart-block > p{margin-block:0}
.br-cart-suggest{margin-block-start:clamp(3rem,6vw,4.75rem)}

/* ---- product page: two columns ---------------------------------------- */
.br-product{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.br-product-media{
  position:relative;
  background:var(--pitch);
  border:1px solid var(--iron);
  aspect-ratio:1/1;
  overflow:hidden;
}
.br-product-media img{width:100%;height:100%;object-fit:cover}
.br-product-media .br-product-art{position:absolute;inset:0;aspect-ratio:auto;border:0}
.br-product-media .br-product-art .br-art-word b{font-size:clamp(1.5rem,3.4vw,2.6rem)}
.br-product-media .br-product-art .br-art-word span{font-size:.75rem}
.br-product-media .wc-block-components-product-image,
.br-product-media .woocommerce-product-gallery{margin:0}
/* WooCommerce's gallery caps itself at the pixel width of the file it was
   given, so a 600px cover sat in the middle of the square with a band of empty
   ground under it. Every wrapper between the frame and the photograph is told
   to fill the frame instead; the crop is the img rule two lines above. */
.br-product-media .wp-block-woocommerce-product-image-gallery,
.br-product-media .woocommerce-product-gallery,
.br-product-media .woocommerce-product-gallery__wrapper,
.br-product-media .woocommerce-product-gallery__image,
.br-product-media .woocommerce-product-gallery__image > a,
.br-product-media .flex-viewport{
  width:100%;height:100%;max-width:none;margin:0;
}
/* the site-wide link underline has no business on a photograph */
.br-product-media .woocommerce-product-gallery__image > a{border-bottom:0}
/* The lightbox trigger ships as a white disc with a black glass drawn out of
   two pseudo-elements. Same treatment as the play button on a product card:
   dark glass, hairline, bone glyph. WooCommerce reaches it through
   `.woocommerce div.product div.images .…__trigger` — four classes and two
   elements — so the override has to out-weigh that, not merely come later. */
.woocommerce .br-page .br-wrap .br-product-media a.woocommerce-product-gallery__trigger{
  position:absolute;top:.8rem;right:.8rem;left:auto;z-index:6;
  width:34px;height:34px;padding:0;border-radius:50%;
  background:rgba(10,9,8,.6);border:1px solid var(--iron-lit);
  transition:background-color .2s ease,border-color .2s ease;
}
.woocommerce .br-page .br-wrap .br-product-media a.woocommerce-product-gallery__trigger::before{
  width:9px;height:9px;left:10px;top:9px;border-color:var(--chalk);
}
.woocommerce .br-page .br-wrap .br-product-media a.woocommerce-product-gallery__trigger::after{
  left:21px;top:19px;height:7px;background:var(--chalk);
}
.woocommerce .br-page .br-wrap .br-product-media a.woocommerce-product-gallery__trigger:hover{
  background:var(--bone);border-color:var(--bone);
}
.woocommerce .br-page .br-wrap .br-product-media a.woocommerce-product-gallery__trigger:hover::before{border-color:var(--void)}
.woocommerce .br-page .br-wrap .br-product-media a.woocommerce-product-gallery__trigger:hover::after{background:var(--void)}

/* WooCommerce hangs its own sale pill off the top-left corner of the gallery,
   half of it outside the frame. Same flag the product cards use for "sold out",
   same corner inset, so the two states of a cover read as one system. */
.br-page .br-product-media span.onsale{
  position:absolute;top:.8rem;left:.8rem;right:auto;z-index:6;margin:0;
  min-width:0;min-height:0;width:auto;height:auto;line-height:1;
  border-radius:0;padding:.32rem .5rem;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--br-sale-fg);background:var(--br-sale-bg);
  border:1px solid var(--iron-lit);
  border-color:color-mix(in srgb, var(--br-sale-fg) 32%, transparent);
}
/* With more than one image WooCommerce turns the wrapper into a slider and
   hangs a thumbnail strip off the bottom. Inside a fixed square the strip has
   nowhere to go and it would eat the photograph, so the frame keeps the active
   slide and the lightbox carries the rest. */
.br-product-media .flex-control-thumbs{display:none}

.br-product-copy > *{margin-block:0}
.br-product-copy > * + *{margin-block-start:1.15rem}

.br-product-copy .wp-block-post-title,
.br-product-copy .wc-block-components-product-title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;line-height:1.14;
  font-size:clamp(1.5rem,3.2vw,2.5rem);
  color:var(--chalk);margin:0;
}
/* The same token the card price reads. They used to be two palette values a
   shade apart, which meant a price could be changed on one surface and not the
   other — the whole point of the setting is that it cannot. */
.br-product-copy .wc-block-components-product-price,
.br-product-copy .price,
.br-product-copy .woocommerce-Price-amount{
  font-family:var(--mono);font-size:1.35rem;letter-spacing:.04em;
  color:var(--br-price);font-variant-numeric:tabular-nums;
}
/* Same split as the card: the struck-out figure is context, not the price, so
   it stays grey however the price itself is painted. */
.br-product-copy .wc-block-components-product-price del,
.br-product-copy .wc-block-components-product-price del .woocommerce-Price-amount,
.br-product-copy .price del,
.br-product-copy .price del .woocommerce-Price-amount{
  color:var(--smoke);font-size:.8em;text-decoration:line-through;
}
.br-product-copy .wc-block-components-product-price ins,
.br-product-copy .price ins{text-decoration:none;background:none}
.br-product-copy .wc-block-components-product-summary,
.br-product-copy .woocommerce-product-details__short-description{
  color:var(--smoke);max-width:52ch;
}

/* ---- spec table -------------------------------------------------------- */
.br-product-specs{
  border-top:1px solid var(--iron);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
}
.br-product-specs div{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.7rem 0;border-bottom:1px solid var(--iron);
}
.br-product-specs dt,.br-product-specs .br-spec-key{color:var(--smoke);text-transform:uppercase}
.br-product-specs dd,.br-product-specs .br-spec-val{color:var(--chalk);margin:0;text-align:right}

/* ---- add to cart ------------------------------------------------------- */
/* The block wrapper is only a box; the form inside it is the row. Making the
   wrapper the flex container as well cost the row its top margin. */
.br-product-copy .wc-block-add-to-cart-form{
  display:block;margin-block-start:1.75rem;
}
.br-product-copy form.cart{
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:stretch;
}
/* WooCommerce styles this row through `.woocommerce div.product form.cart …`,
   which is specific enough (0,4,3 and up) to swallow anything shorter. Three
   things have to be undone, hence the long selectors:
     · the clearfix pseudo-elements become flex items and shove the row 12px right
     · a bottom margin the block wrapper already owns
     · 4px + 6.5px of right margin that leave the quantity box narrower than the
       button once the row stacks on mobile */
.woocommerce .product .br-product-copy form.cart::before,
.woocommerce .product .br-product-copy form.cart::after{display:none}
.woocommerce .product .br-product-copy form.cart{margin:0}
.woocommerce .product .br-product-copy form.cart .quantity{margin:0}
.woocommerce .product .br-product-copy form.cart .quantity input.qty{margin:0}

/* "Sold individually" — min and max are both 1, so WooCommerce renders the
   quantity input as `type="hidden"` but still prints the wrapper around it,
   holding nothing but that input and a screen-reader label. (The `hidden` class
   it used to put on the wrapper is gone as of the 10.1 template; the first
   selector is there for older copies.) The box measures zero, but it is still a
   flex item, so the row's .75rem gap opened in front of the button and the only
   visible control on the page sat 12px in from the column edge it should line
   up with. A wrapper with nothing to show is not a column. */
.br-product-copy .quantity.hidden,
.br-product-copy .quantity:has(> input[type="hidden"]){display:none}

.br-product-copy .quantity{display:flex}
.br-product-copy .quantity input[type="number"],
.br-product-copy .wc-block-components-quantity-selector input{
  box-sizing:border-box;margin:0;
  width:82px;height:46px;padding:0 .75rem;
  background:var(--surface);border:1px solid var(--iron);color:var(--chalk);
  font-family:var(--mono);font-size:.8125rem;
}
.br-product-copy button[type="submit"],
.br-product-copy .single_add_to_cart_button,
.br-product-copy .wc-block-components-button{
  height:46px;padding:0 1.6rem;border-radius:0;
  background:var(--bone);color:var(--void);border:1px solid var(--bone);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.br-product-copy button[type="submit"]:hover,
.br-product-copy .single_add_to_cart_button:hover,
.br-product-copy .wc-block-components-button:hover{
  background:var(--chalk);border-color:var(--chalk);
}

/* ---- breadcrumbs, sorting, result count -------------------------------- */
.wc-block-breadcrumbs,
.woocommerce-breadcrumb,
.wc-block-product-results-count,
.woocommerce-result-count{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);margin:0;
}
.wc-block-breadcrumbs a,.woocommerce-breadcrumb a{color:var(--smoke);border:0}
.wc-block-breadcrumbs a:hover,.woocommerce-breadcrumb a:hover{color:var(--chalk)}

.wc-block-catalog-sorting select,
.woocommerce-ordering select{
  background:var(--surface);border:1px solid var(--iron);color:var(--chalk);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.6rem 2rem .6rem .8rem;border-radius:0;
}
/* WooCommerce ships this form with `margin:0 0 1em`. In the page head that
   pushed the whole control 14px clear of the heading's baseline — the "the
   filter sits higher than the title" report. Measured: select bottom 187px,
   title bottom 201px. */
.woocommerce-ordering{margin:0}

/* ---- the archive toolbar ----------------------------------------------
   Count on the left, sorting on the right, both reading off the same line as
   the heading. Aligned on the *baseline*, not the box bottom: flush boxes are
   not flush text, because the select is a bordered box with its own padding.
   With flex-end the "Sort by" label sat 14px above the heading's baseline —
   centred inside a 37px control — and the count 2px below it. Nothing in here
   may carry a stray bottom margin either, or it lifts off the line again. */
.br-catalog-tools{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.9rem 1.75rem;
  margin-left:auto;
}
.br-result-count{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);margin:0;
}
.br-sort{display:flex;align-items:baseline;gap:.7rem;margin:0}
.br-sort-label{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--smoke);
}
.br-sort-select{
  background:var(--surface);border:1px solid var(--iron);color:var(--chalk);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.6rem 1.6rem .6rem .8rem;border-radius:0;
  cursor:pointer;transition:border-color .2s ease;
  /* a native select is as wide as its longest option; in a tracked uppercase
     face that was 327px of chrome for a control nobody looks at twice */
  max-width:16rem;
}
.br-sort-select:hover{border-color:var(--iron-lit)}
.br-sort-select:focus-visible{outline:0;border-color:var(--bone)}
/* only reachable when catalog.js did not run; it hides itself once the
   change handler is attached */
.br-sort-go{
  background:none;border:1px solid var(--iron-lit);cursor:pointer;
  padding:.6rem 1rem;color:var(--chalk);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
}
@media (max-width:600px){
  .br-catalog-tools{width:100%;justify-content:space-between}
  .br-sort-label{display:none}
}

/* ---- tabs and related -------------------------------------------------- */
.woocommerce-tabs ul.tabs{
  display:flex;gap:1.75rem;list-style:none;margin:0 0 1.5rem;padding:0 0 .75rem;
  border-bottom:1px solid var(--iron);
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce-tabs ul.tabs li{margin:0;padding:0;background:none;border:0}
.woocommerce-tabs ul.tabs li a{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--smoke);border:0;padding:0;
}
.woocommerce-tabs ul.tabs li.active a{color:var(--chalk)}

.shop_attributes,
.wc-block-product-specifications table{width:100%;border-collapse:collapse;font-size:.8125rem}
.shop_attributes th,.shop_attributes td,
.wc-block-product-specifications th,.wc-block-product-specifications td{
  border-bottom:1px solid var(--iron);padding:.7rem 0;text-align:left;
}
.shop_attributes th,.wc-block-product-specifications th{
  color:var(--smoke);font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:400;width:38%;
}
.shop_attributes td,.wc-block-product-specifications td{color:var(--chalk)}
.shop_attributes td p{margin:0;color:var(--chalk)}

/* ---- cart, checkout, account ------------------------------------------- */
.wc-block-components-title,
.wc-block-cart__submit-container + *,
.woocommerce-cart h2,
.woocommerce-checkout h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  color:var(--chalk);
}
.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.woocommerce table.shop_table{
  background:transparent;border-color:var(--iron);color:var(--chalk);
}
.wc-block-components-text-input input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  background:var(--surface);border:1px solid var(--iron);color:var(--chalk);
  border-radius:0;
}
.wc-block-components-text-input label,
.woocommerce form .form-row label{color:var(--smoke)}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width:900px){
  .br-product{grid-template-columns:1fr;gap:2rem}
  .br-product-media{aspect-ratio:4/3}
  .br-product-copy form.cart{flex-direction:column;align-items:stretch}
  .br-product-copy .quantity{width:100%}
  .br-product-copy .quantity input[type="number"]{width:100%}
  .woocommerce-tabs ul.tabs{gap:1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---- below the fold: details, reviews, related -------------------------- */
.wp-block-woocommerce-product-details,
.woocommerce-tabs,
.br-related{margin-top:clamp(3rem,6vw,5rem)}

.br-product-copy .wp-block-woocommerce-product-meta,
.br-product-copy .product_meta{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--smoke);
  padding-top:1.1rem;border-top:1px solid var(--iron);
}
.br-product-copy .wp-block-woocommerce-product-meta a{color:var(--chalk)}

.woocommerce-Reviews .comment-reply-title,
.woocommerce-Reviews h2,
.woocommerce-Reviews h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  color:var(--chalk);
}
.woocommerce-Reviews p{color:var(--smoke)}

/* the review form ships with browser-default fields on a black page */
#review_form input[type="text"],
#review_form input[type="email"],
#review_form input[type="url"],
#review_form textarea{
  width:100%;max-width:640px;
  background:var(--surface);border:1px solid var(--iron);color:var(--chalk);
  border-radius:0;padding:.7rem .85rem;font-family:var(--body);font-size:.875rem;
}
#review_form textarea{min-height:150px;resize:vertical}
#review_form label{color:var(--smoke);font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:.4rem}
#review_form .stars a{color:var(--smoke)}
#review_form .stars a:hover,#review_form .stars.selected a.active{color:var(--bone)}
#review_form input[type="submit"],
#review_form button[type="submit"]{
  height:46px;padding:0 1.6rem;border-radius:0;cursor:pointer;
  background:var(--bone);color:var(--void);border:1px solid var(--bone);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
}
#review_form input[type="submit"]:hover,
#review_form button[type="submit"]:hover{background:var(--chalk);border-color:var(--chalk)}
#review_form .comment-form-cookies-consent{display:flex;gap:.55rem;align-items:flex-start}
#review_form .comment-form-cookies-consent label{margin:0;text-transform:none;letter-spacing:.04em}

.commentlist,.woocommerce-Reviews .commentlist{list-style:none;padding:0;margin:0 0 2rem}
.commentlist .comment_container{
  display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--iron);
}
.commentlist .comment-text p{color:var(--chalk)}

/* ============================================================
   CART · CHECKOUT · ACCOUNT
   WooCommerce Blocks ship a light theme with its own tokens.
   Rather than fight each rule, the block-level custom properties
   are re-pointed at the palette, then the handful of surfaces
   that hardcode white are painted over.
   ============================================================ */
.br-checkout{
  --wc-blocks-color-white:var(--surface);
  --wp--preset--color--white:var(--surface);
}

.br-checkout .wc-block-components-title,
.br-checkout .wc-block-components-checkout-step__title,
.br-checkout .wp-block-woocommerce-cart-order-summary-heading-block{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  color:var(--chalk);font-size:.9375rem;
}
.br-checkout .wc-block-components-checkout-step__description,
.br-checkout .wc-block-components-checkout-step__heading-content,
.br-checkout p{color:var(--smoke)}

/* --- panels and surfaces ------------------------------------------------ */
/* `.wc-block-components-sidebar` is WooCommerce's grid gutter — it carries a
   left padding only. Painting it as a card produced a box with 28px of air on
   one side and none on the other, and on checkout a second card nested inside
   it. So: the sidebar stays a plain column, and the block inside it is the
   card, with symmetric padding of its own. */
.br-checkout .wc-block-components-sidebar,
.br-checkout .wc-block-cart__sidebar,
.br-checkout .wc-block-checkout__sidebar{
  padding:0;background:transparent;border:0;
}
.br-checkout .wp-block-woocommerce-cart-totals-block,
.br-checkout .wp-block-woocommerce-checkout-order-summary-block{
  background:var(--surface);
  border:1px solid var(--iron);
  border-radius:0;
  color:var(--chalk);
  padding:1.5rem 1.5rem 1.75rem;
}
/* The order summary adds its own 16px inset on top of the card's padding. */
.br-checkout .wc-block-components-order-summary,
.br-checkout .wc-block-components-panel{
  background:transparent;border:0;border-radius:0;padding:0;color:var(--chalk);
}
.br-checkout .wc-block-components-totals-wrapper,
.br-checkout .wc-block-components-order-summary-item{
  border-color:var(--iron);
}
.br-checkout .wc-block-components-totals-wrapper:first-child{border-top:0}

/* A line item's name is a heading here, not prose. */
.br-checkout .wc-block-components-product-name{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk);
}
.br-checkout a.wc-block-components-product-name:hover{color:var(--bone)}
.br-checkout .wc-block-components-product-metadata__description p,
.br-checkout .wc-block-components-product-metadata{color:var(--smoke);font-size:.8125rem}

/* --- where the two columns start ----------------------------------------
   Both columns already begin on the same line — measured, 389px on a 1920
   view. Only the right one shows it: the card has a border there, the left
   has 40px of air before its first word. That air is main.css's prose-heading
   margin (`.br-page :is(h2,h3)`, 2.5rem) landing on a checkout step title,
   which is an <h2>. Between steps that margin *is* the separation and stays;
   on the first step it is the misalignment, so it comes off there and the
   heading meets the card's top edge.

   The card's own title drops its extra 16px for the same reason — with it,
   "Order summary" sat 41px below the border it belongs to. */
.br-checkout .wc-block-checkout__form > .wc-block-components-checkout-step:first-child h2.wc-block-components-checkout-step__title{
  margin-top:0;
}
.br-checkout .wc-block-components-checkout-order-summary__title{margin-top:0}

/* The same 2.5rem lands on a summary line item's <h3> name and pushes it
   below the thumbnail it labels — 518px against the image's 482. A line
   item's name is the row's first word, so the row starts level: name,
   thumbnail and price on one top edge. */
.br-checkout .wc-block-components-order-summary-item__description > h3.wc-block-components-product-name{
  margin:0 0 .5rem;
}
.br-checkout .wc-block-components-order-summary-item__image{margin-top:0}
.br-checkout .wc-block-components-order-summary-item__description{padding-top:0}

/* --- a summary line is a way back to the product ------------------------
   On the cart page WooCommerce makes the thumbnail and the name links. In
   the checkout sidebar the same item is a bare <h3> and a bare <img>, so the
   one screen where a buyer checks what they are about to pay for is the one
   screen with no way through to it. checkout.js puts the destination on the
   row as `data-br-href` — it cannot wrap the nodes, React owns them — and
   these are the affordances that say so. */
.br-checkout .wc-block-components-order-summary-item[data-br-href] .wc-block-components-product-name,
.br-checkout .wc-block-components-order-summary-item[data-br-href] .wc-block-components-order-summary-item__image{
  cursor:pointer;
}
.br-checkout .wc-block-components-order-summary-item[data-br-href] .wc-block-components-product-name:hover{
  color:var(--bone);
}
.br-checkout .wc-block-components-order-summary-item[data-br-href] [role="link"]:focus-visible{
  outline:1px solid var(--bone);outline-offset:3px;
}

/* --- one summary, not two ----------------------------------------------
   WooCommerce renders the checkout summary twice and lets a container query
   choose: above 700px the sidebar card shows and the "fill" copy is hidden;
   below it BOTH stand — a collapsed panel at the top of the page and a second,
   fully open one above Place order. That is WooCommerce's mobile design, not
   a fault, but on a phone it reads as the same card said twice, and the site
   already opens the screen with it. The fill copy goes at every width; the
   panel at the top is the summary, as it is on a desktop.
   (To swap them instead, hide `.wc-block-checkout__sidebar` under 700px and
   drop this rule — the fill copy is the one that sits above the button.) */
.br-checkout .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper{
  display:none;
}

/* Stacked, the summary is a panel that opens, and it arrived reading as an
   empty box: 88px of air between the page rule and its top edge (page head
   32 + block padding 24 + WooCommerce's stacking margin 32), then a card
   whose only content was a title wearing its own rules — three horizontal
   lines around one word. The card is the frame; the title inside it does not
   need a second one. */
@media (max-width:699px){
  .br-checkout .wp-block-woocommerce-checkout{padding-top:0}
  .br-checkout .wc-block-checkout__sidebar{margin-top:0}
  .br-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{
    padding:.25rem 1.25rem;
  }
  .br-checkout .wc-block-components-checkout-order-summary__title{
    border-top:0;border-bottom:0;padding:1rem 0;
  }
  /* Opened, the content needs the rule back — otherwise the first line item
     starts straight under the title with nothing between them. */
  .br-checkout .wc-block-components-checkout-order-summary__content{
    border-top:1px solid var(--iron);
    /* WooCommerce closes the open panel with a second rule, five pixels above
       the card's own border. Two lines, one edge. */
    border-bottom:0;
  }
  .br-checkout .wc-block-checkout__main{margin-top:1.75rem}
}

.br-checkout .wc-block-components-totals-item__label{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);
}
.br-checkout .wc-block-components-totals-item__value,
.br-checkout .wc-block-components-formatted-money-amount,
.br-checkout .wc-block-components-product-price{
  color:var(--chalk);font-family:var(--mono);font-variant-numeric:tabular-nums;
}
/* The grand total ships at 20px in the body face; it should read as a heading. */
.br-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-family:var(--display);font-size:.875rem;letter-spacing:.12em;color:var(--chalk);
}
.br-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.br-checkout .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount{
  color:var(--bone);font-size:1.15rem;
}
.br-checkout .wc-block-components-totals-item__description{color:var(--smoke);font-size:.75rem}

/* Line-item thumbnail and its quantity pip — the pip ships white on white. */
.br-checkout .wc-block-components-order-summary-item__image img,
.br-checkout .wc-block-cart-item__image img{
  background:var(--pitch);border:1px solid var(--iron);
}
/* WooCommerce's stock placeholder is a light grey tile; on this page it reads
   as a hole. Products without a cover borrow the page's own values instead. */
.br-checkout img[src*="woocommerce-placeholder"]{filter:invert(1);opacity:.45}
.br-checkout .wc-block-components-order-summary-item__quantity,
.br-checkout .wc-block-components-order-summary-item__quantity span{
  background:var(--bone);color:var(--void);
  font-family:var(--mono);font-size:.625rem;line-height:1;
  box-shadow:none;
}
.br-checkout .wc-block-components-order-summary-item__quantity{border:1px solid var(--bone)}
.br-checkout .wc-block-components-order-summary-item__quantity span{background:transparent}

/* The coupon disclosure sits inside the card; it should not look like a field. */
.br-checkout .wc-block-components-totals-coupon,
.br-checkout .wc-block-components-panel__button{
  background:transparent;border:0;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);
}
.br-checkout .wc-block-components-panel__button:hover{color:var(--chalk)}

/* --- form fields -------------------------------------------------------- */
.br-checkout .wc-block-components-text-input input,
.br-checkout .wc-block-components-textarea,
.br-checkout .wc-blocks-components-select__select,
.br-checkout .wc-block-components-combobox input,
.br-checkout input[type="text"],
.br-checkout input[type="email"],
.br-checkout input[type="tel"],
.br-checkout input[type="password"],
.br-checkout select,
.br-checkout textarea{
  background:var(--pitch)!important;
  border:1px solid var(--iron)!important;
  color:var(--chalk)!important;
  border-radius:0!important;
  box-shadow:none;
}
.br-checkout .wc-block-components-text-input.is-active label,
.br-checkout .wc-block-components-text-input label,
.br-checkout .wc-blocks-components-select__label,
.br-checkout label{color:var(--smoke)}
.br-checkout .wc-block-components-text-input input:focus,
.br-checkout select:focus,
.br-checkout textarea:focus{border-color:var(--iron-lit)!important;outline:none}
.br-checkout ::placeholder{color:var(--smoke);opacity:.7}

/* --- radios, checkboxes, disclosures ------------------------------------ */
.br-checkout .wc-block-components-radio-control__option,
.br-checkout .wc-block-components-radio-control-accordion-option{
  background:var(--pitch);border:1px solid var(--iron);border-radius:0;color:var(--chalk);
}
.br-checkout .wc-block-components-checkbox__label,
.br-checkout .wc-block-components-checkbox__input + span{color:var(--smoke)}
/* WooCommerce paints its own white box over the native control. */
.br-checkout .wc-block-components-checkbox__input[type="checkbox"]{
  width:16px;height:16px;border-radius:0;
  background:var(--pitch);border:1px solid var(--iron-lit);
}
.br-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked{
  background:var(--bone);border-color:var(--bone);
}
.br-checkout .wc-block-components-checkbox__mark{fill:var(--void)}
.br-checkout .wc-block-components-panel__button{color:var(--chalk)}

/* --- buttons ------------------------------------------------------------ */
/* "Proceed to checkout" is an <a>, so the generic link colour below has to be
   kept away from it — chalk text on a bone button is invisible. */
.br-checkout .wc-block-components-button:not(.is-link),
.br-checkout .wc-block-cart__submit-button,
.br-checkout .wc-block-components-checkout-place-order-button{
  display:flex;align-items:center;justify-content:center;
  background:var(--bone);color:var(--void);border:1px solid var(--bone);
  border-radius:0;min-height:48px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
}
.br-checkout .wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.br-checkout .wc-block-components-button:not(.is-link) span{color:inherit}
.br-checkout .wc-block-components-button:not(.is-link):hover,
.br-checkout .wc-block-components-button:not(.is-link):focus{
  background:var(--chalk);border-color:var(--chalk);color:var(--void);
}
.br-checkout .wc-block-components-button.is-link,
.br-checkout a:not(.wc-block-components-button){color:var(--chalk)}

/* --- prose links -------------------------------------------------------- */
/* main.css deliberately skips `.br-checkout` when it underlines inner-page
   links, because most links here are UI, not text. These few are text. */
.br-checkout .wc-block-components-notice-banner a:not(.button),
.br-checkout .wc-block-checkout__terms a,
.br-checkout .wc-block-components-checkout-step__description a,
.br-checkout .woocommerce-MyAccount-content p a,
.br-checkout .woocommerce-LostPassword a,
.br-checkout .woocommerce-privacy-policy-text a{
  border-bottom:1px solid var(--iron-lit);
}
.br-checkout .wc-block-components-notice-banner a:not(.button):hover,
.br-checkout .wc-block-checkout__terms a:hover,
.br-checkout .wc-block-components-checkout-step__description a:hover,
.br-checkout .woocommerce-MyAccount-content p a:hover,
.br-checkout .woocommerce-LostPassword a:hover,
.br-checkout .woocommerce-privacy-policy-text a:hover{
  border-bottom-color:var(--bone);
}

/* --- notices ------------------------------------------------------------ */
.br-checkout .wc-block-components-notice-banner,
.woocommerce-notices-wrapper .wc-block-components-notice-banner{
  background:var(--br-notice-bg)!important;
  border:1px solid var(--iron)!important;
  border-color:color-mix(in srgb, var(--br-notice-fg) 20%, transparent)!important;
  color:var(--br-notice-fg)!important;
  border-radius:0;
}
.br-checkout .wc-block-components-notice-banner.is-error{border-color:#5a2b28!important}

/* ---- the blocks notice banner -----------------------------------------
   This is the one the account screens actually print. WooCommerce sets the
   status with a coloured disc: a white glyph on a filled circle, blue for
   information, red for an error — three saturated colours on a page that owns
   one, and a shape the rest of the site never uses. The site says the same
   thing with a rule down the left edge instead, which is the same move the
   product page makes for "out of stock".

   The disc goes rather than being repainted. A monochrome disc is still a disc,
   and the sentence beside it already says what it is. */
.wc-block-components-notice-banner > svg{display:none}
.wc-block-components-notice-banner{padding:.95rem 1.15rem;align-items:center}
/* A notice sits above the page title, and WooCommerce leaves 16px between the
   two — under a 32px display heading that reads as the notice being part of
   the title rather than something that happened before it. */
.br-page .woocommerce-notices-wrapper:not(:empty),
.br-page .wp-block-woocommerce-store-notices:not(:empty){margin-bottom:1.75rem}
/* The accent itself is at the foot of this file, not here. It has to be: the
   plate rules down there set `border-color` as a shorthand with !important, and
   among !important declarations the more specific selector wins whatever the
   source order — so the accent has to be said at that same weight, after them. */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content{
  padding:0;line-height:1.6;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__summary{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;color:var(--br-notice-fg);
  margin:0 0 .45rem;
}

/* --- empty cart --------------------------------------------------------- */
.br-checkout .wp-block-woocommerce-empty-cart-block h2,
.br-checkout .wc-block-cart__empty-cart__title{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--chalk);
}

/* --- account ------------------------------------------------------------ */
/* The classic wrapper WooCommerce prints around account and order screens is
   capped at 1000px by `.woocommerce-account main .woocommerce`, which leaves it
   out of line with the page rule above it. `.br-wrap` already owns the measure,
   and the compound selector is what it takes to out-specify that rule. */
.br-page.br-checkout .woocommerce{max-width:none;margin-inline:0}

/* Logged in, WooCommerce floats the menu into a 30% column and the panel into
   the remaining 68% — which left the menu wrapping into a narrow stack. The
   floats are replaced by a real two-column grid: menu left, panel right,
   stacking on narrow screens. */
.br-checkout .woocommerce-MyAccount-navigation,
.br-checkout .woocommerce-MyAccount-content{
  float:none;width:auto;max-width:none;margin:0;
}
/* The grid goes on the wrapper the two share, but only when the account menu is
   actually there — the same wrapper holds the login form when logged out. */
.br-checkout .woocommerce:has(> .woocommerce-MyAccount-navigation){
  display:grid;
  grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);
  grid-template-areas:"notice notice" "nav panel";
  column-gap:clamp(1.25rem,3vw,2.25rem);
  align-items:start;
}
.br-checkout .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper{
  grid-area:notice;
}
.br-checkout .woocommerce-MyAccount-navigation{
  grid-area:nav;
  border-right:1px solid var(--iron);
  padding-right:clamp(1.25rem,3vw,2.25rem);
}
.br-checkout .woocommerce-MyAccount-content{grid-area:panel;min-width:0}
.br-checkout .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.9rem;
}
.br-checkout .woocommerce-MyAccount-navigation li{margin:0;padding:0}
.br-checkout .woocommerce-MyAccount-navigation a{
  display:block;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--smoke);border:0;text-decoration:none;
  transition:color .2s ease;
}
.br-checkout .woocommerce-MyAccount-navigation a:hover{color:var(--chalk)}
.br-checkout .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--chalk);position:relative;text-decoration:none;
}
/* The active marker sits on the column's own divider, not beside the text. */
.br-checkout .woocommerce-MyAccount-navigation li.is-active a::before{
  content:"";position:absolute;right:calc(-1 * clamp(1.25rem,3vw,2.25rem) - 1px);
  top:-.35em;bottom:-.35em;width:1px;background:var(--bone);
}
.br-checkout .woocommerce-MyAccount-content p{color:var(--smoke);max-width:70ch}
.br-checkout .woocommerce-MyAccount-content strong{color:var(--chalk);font-weight:500}

/* The login and register forms are classic WooCommerce markup: a rounded grey
   card, browser-default fields and a grey button on a black page. They are
   rebuilt here as one narrow panel in the site's own vocabulary. */
.br-checkout .woocommerce > h2,
.br-checkout .woocommerce-account h2{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:1rem;color:var(--chalk);margin:0 0 1.1rem;
}
.br-checkout form.woocommerce-form-login,
.br-checkout form.woocommerce-form-register,
.br-checkout form.woocommerce-ResetPassword{
  max-width:26rem;margin:0;padding:1.75rem;
  background:var(--surface);border:1px solid var(--iron);border-radius:0;
}
/* Both password screens are this one form: "Lost password" asks for an address,
   "Set password" asks for a new one twice. One field at 26rem was a card with
   more frame than content, and two fields at 26rem were two narrow columns. It
   is the widest of the three panels because it is the only one that ever holds
   a row. */
.br-checkout form.woocommerce-ResetPassword{max-width:34rem;padding:2rem}

/* ---- classic form rows -------------------------------------------------
   WooCommerce lays these out with floats: `.form-row-first` and
   `.form-row-last` are 47% wide and float opposite ways, with an empty
   `.clear` between them. Three screens here are built out of them, and the
   float layout was wrong on all three:
     · Lost password wraps its single field in `form-row-first`, so the box for
       an email address was 47% of the card — about 195px, and the address
       scrolled inside it while you typed.
     · Set password floats two fields apart, and the right label wraps to two
       lines, so its field started lower than the left one.
     · Account details splits the same way and drifts the same way.
   The floats come off and each container becomes a grid: rows in one column,
   a `first`/`last` pair sharing a row when there is width for it. A fieldset
   is a container too — the password block on the account screen lives in one,
   and its rows are not children of the form. */
.br-checkout .woocommerce form .form-row-first,
.br-checkout .woocommerce form .form-row-last,
.br-checkout .woocommerce form .form-row-wide{float:none;width:auto}
.br-checkout .woocommerce form .clear{display:none}

/* One column is the default, and the second only appears for a form that has an
   actual pair in it. That is what keeps "Lost password" — a single field
   wearing `form-row-first`, because WooCommerce reuses the class — from sitting
   in half a card, which would have been the same bug in a new costume. */
.br-checkout .woocommerce form.woocommerce-form-login,
.br-checkout .woocommerce form.woocommerce-form-register,
.br-checkout .woocommerce form.woocommerce-ResetPassword,
.br-checkout .woocommerce form.woocommerce-EditAccountForm,
.br-checkout .woocommerce form fieldset{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:0 1.5rem;align-items:start;
}
/* Hidden inputs and the nonce are display:none, so they never take a cell. */
.br-checkout .woocommerce form.woocommerce-form-login:has(> .form-row-last),
.br-checkout .woocommerce form.woocommerce-form-register:has(> .form-row-last),
.br-checkout .woocommerce form.woocommerce-ResetPassword:has(> .form-row-last),
.br-checkout .woocommerce form.woocommerce-EditAccountForm:has(> .form-row-last),
.br-checkout .woocommerce form fieldset:has(> .form-row-last){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.br-checkout .woocommerce form.woocommerce-form-login > *,
.br-checkout .woocommerce form.woocommerce-form-register > *,
.br-checkout .woocommerce form.woocommerce-ResetPassword > *,
.br-checkout .woocommerce form.woocommerce-EditAccountForm > *,
.br-checkout .woocommerce form fieldset > *{grid-column:1 / -1}
.br-checkout .woocommerce form > .form-row-first{grid-column:1}
.br-checkout .woocommerce form > .form-row-last{grid-column:2}
.br-checkout .woocommerce form fieldset > .form-row-first{grid-column:1}
.br-checkout .woocommerce form fieldset > .form-row-last{grid-column:2}

/* ---- password strength -------------------------------------------------
   WooCommerce paints this as a peach, salmon or pale green plate with bold
   black type — three colours the site does not own, on a page that owns one.
   The verdict is carried by a rule and a word instead, in the register the
   rest of the form speaks. The hint under it is prose, and was arriving as
   default-size body copy in the middle of a mono form. */
.br-checkout .woocommerce-password-strength{
  margin:.6rem 0 0;padding:.5rem .7rem;
  background:var(--pitch);border:1px solid var(--iron);
  font-family:var(--mono);font-size:.625rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;text-align:left;
  color:var(--smoke);line-height:1.5;
}
.br-checkout .woocommerce-password-strength.short,
.br-checkout .woocommerce-password-strength.bad{
  background:var(--pitch);border-color:#5a2b28;color:var(--alarm);
}
.br-checkout .woocommerce-password-strength.good{
  background:var(--pitch);border-color:#5a4a28;color:#cfa76a;
}
.br-checkout .woocommerce-password-strength.strong{
  background:var(--pitch);border-color:#2c4433;color:#8fbf9f;
}
.br-checkout .woocommerce-password-hint{
  display:block;margin:.55rem 0 0;
  font-size:.75rem;line-height:1.65;color:var(--smoke);
}

/* ---- the reveal control ------------------------------------------------
   WooCommerce draws the eye as a background image: an inline SVG data URI with
   `fill="%23111111"` baked into it. On a #0E0D0B field that is a black mark on
   black — the control was there the whole time and could not be seen. The fill
   is inside the URI, so no colour property reaches it; inverting the layer is
   what turns #111 into #EEE, and it keeps working if WooCommerce redraws the
   icon. Both states, open eye and struck-through, come from the same rule. */
.br-checkout .woocommerce form .show-password-input::before{
  filter:invert(1);opacity:.6;transition:opacity .2s ease;
}
.br-checkout .woocommerce form .show-password-input:hover::before,
.br-checkout .woocommerce form .show-password-input:focus-visible::before{opacity:1}
.br-checkout .woocommerce form .show-password-input:focus-visible{
  outline:2px solid var(--bone);outline-offset:2px;
}
/* The field has to leave room for it, or the reveal sits on top of the text.
   `.input-text` is in the selector to out-specify the shared field rule below,
   which sets the padding on all four sides in one shorthand. */
.br-checkout .woocommerce form .password-input input.input-text,
.br-checkout .woocommerce form .password-input input[type="password"],
.br-checkout .woocommerce form .password-input input[type="text"]{padding-right:2.75rem}
/* Fields, labels and buttons are shared by every classic form in the store
   region: login, register, lost password, account details, addresses. Only the
   three above also get the panel card. */
.br-checkout .woocommerce form .form-row{margin:0 0 1.15rem;padding:0}
.br-checkout .woocommerce form .form-row:last-of-type{margin-bottom:0}
.br-checkout .woocommerce form label{
  display:block;margin:0 0 .45rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--smoke);
}
/* Out-specifies `.woocommerce form .form-row .required{color:red}`. */
.br-checkout .woocommerce form .form-row .required,
.br-checkout .woocommerce form abbr.required{
  color:var(--smoke);text-decoration:none;border:0;
}
.br-checkout .woocommerce form input.input-text,
.br-checkout .woocommerce form input[type="text"],
.br-checkout .woocommerce form input[type="email"],
.br-checkout .woocommerce form input[type="tel"],
.br-checkout .woocommerce form input[type="password"],
.br-checkout .woocommerce form select,
.br-checkout .woocommerce form textarea{
  box-sizing:border-box;width:100%;height:46px;padding:0 .85rem;
  background:var(--pitch);border:1px solid var(--iron);color:var(--chalk);
  border-radius:0;font-family:var(--body);font-size:.875rem;
}
.br-checkout .woocommerce form textarea{height:auto;min-height:120px;padding:.75rem .85rem}
.br-checkout .woocommerce form input:focus,
.br-checkout .woocommerce form select:focus,
.br-checkout .woocommerce form textarea:focus{border-color:var(--iron-lit);outline:none}

/* The password field wraps its reveal button in a relative span. The button's
   icon is a background image, not type — see "the reveal control" below for why
   nothing here can colour it. */
.br-checkout .woocommerce form .password-input{display:block;position:relative}
.br-checkout .woocommerce form .show-password-input{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;
  font-size:1rem;line-height:1;padding:0;
}

/* "Password change" ships as a bare fieldset, and the field hints as italics. */
.br-checkout .woocommerce form fieldset{
  border:1px solid var(--iron);border-radius:0;
  padding:1.25rem 1.35rem;margin:1.75rem 0 0;
}
.br-checkout .woocommerce form legend{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.8125rem;color:var(--chalk);padding:0 .5rem;
}
.br-checkout .woocommerce form span.description,
.br-checkout .woocommerce form em{
  display:block;margin-top:.4rem;font-style:normal;
  font-size:.75rem;color:var(--smoke);
}

/* "Remember me" is a label wrapping the checkbox.
   `form label` is in the selector to carry the weight: the shared field rule
   above is `.br-checkout .woocommerce form label` (0,2,2) and WooCommerce adds
   an inline-block of its own, so the flex never applied and the box sat 4px
   off the line of its own words. */
.br-checkout .woocommerce form label.woocommerce-form__label-for-checkbox,
.br-checkout .woocommerce form label.woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:.55rem;margin:0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--smoke);cursor:pointer;
}
.br-checkout .woocommerce-form__input-checkbox{
  appearance:none;-webkit-appearance:none;flex:none;
  width:15px;height:15px;margin:0;border-radius:0;
  background-color:var(--pitch);border:1px solid var(--iron-lit);cursor:pointer;
  /* The tick is always in the box; what changes is its size. Ticked, it grows
     from nothing to 11px on a slightly over-shooting curve, which is the
     difference between a box that fills in and a box that gets ticked.
     `background-size` is animatable, so this needs no extra element — and a
     pseudo-element on a replaced control is the thing browsers disagree about. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%230A0908' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:0 0;
  transition:background-color .18s ease,border-color .18s ease,
             background-size .22s cubic-bezier(.2,1.5,.45,1);
}
.br-checkout .woocommerce-form__input-checkbox:checked{
  background-color:var(--bone);border-color:var(--bone);
  background-size:11px 11px;
}
.br-checkout .woocommerce-form__input-checkbox:focus-visible{
  outline:2px solid var(--bone);outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .br-checkout .woocommerce-form__input-checkbox{transition:none}
}

.br-checkout .woocommerce form button.woocommerce-button,
.br-checkout .woocommerce form button.woocommerce-Button,
.br-checkout .woocommerce form button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;margin:1.35rem 0 0;padding:0 1.8rem;
  background:var(--bone);color:var(--void);border:1px solid var(--bone);
  border-radius:0;cursor:pointer;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background-color .2s ease,border-color .2s ease;
}
.br-checkout .woocommerce form button.woocommerce-button:hover,
.br-checkout .woocommerce form button.woocommerce-Button:hover,
.br-checkout .woocommerce form button[type="submit"]:hover{
  background:var(--chalk);border-color:var(--chalk);
}
/* Inside the narrow card the button fills the width. Submits only: WooCommerce's
   own script appends a <button> reveal control inside every password field, and
   a bare `button` here stretched that one to the width of the field, which put
   its icon against the left edge instead of the right. */
.br-checkout form.woocommerce-form-login button[type="submit"],
.br-checkout form.woocommerce-form-register button[type="submit"],
.br-checkout form.woocommerce-ResetPassword button[type="submit"]{width:100%}

/* The row holding the submit already ends in 1.15rem of its own — it is not the
   form's last row, so it keeps its bottom margin — and 1.1rem on top of that put
   36px between the button and this line, enough that it read as belonging to
   whatever came next rather than to the form above it. */
.br-checkout .woocommerce-LostPassword{
  margin:.15rem 0 0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
}
.br-checkout .woocommerce-LostPassword a{color:var(--smoke)}
.br-checkout .woocommerce-LostPassword a:hover{color:var(--chalk)}

/* Addresses tab: WooCommerce floats the two cards into `.col-1`/`.col-2` and
   drops the edit link in a header with no alignment of its own. */
.br-checkout .woocommerce-Addresses{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
/* Its clearfix pseudo-elements would otherwise occupy a grid cell each. */
.br-checkout .woocommerce-Addresses::before,
.br-checkout .woocommerce-Addresses::after{display:none}
.br-checkout .woocommerce-Addresses .col-1,
.br-checkout .woocommerce-Addresses .col-2{float:none;width:auto;margin:0}
.br-checkout .woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.85rem;margin:0 0 1.1rem;border-bottom:1px solid var(--iron);
}
.br-checkout .woocommerce-Address-title h2,
.br-checkout .woocommerce-Address-title h3{
  flex:1 1 auto;text-align:left;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.9375rem;color:var(--chalk);margin:0;
}
.br-checkout .woocommerce-Address-title .edit{
  flex:none;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--smoke);
}
.br-checkout .woocommerce-Address-title .edit:hover{color:var(--chalk)}
.br-checkout .woocommerce-Address address{
  font-style:normal;color:var(--smoke);font-size:.875rem;line-height:1.7;margin:0;
}
.br-checkout .woocommerce-Address p{font-style:normal;color:var(--smoke)}

/* Logged in: the order and address tables come through unstyled. */
.br-checkout .woocommerce-MyAccount-content table.shop_table,
.br-checkout table.woocommerce-orders-table{
  width:100%;border-collapse:collapse;border:0;
}
/* The rules between rows were `--iron` (#26241F) on `--void` (#0A0908): a
   1px line at about 4% contrast, which on a list of four downloads with
   similar names read as one block of text rather than four things. They are
   `--iron-lit` here — still a hairline, but one the eye can find — and the
   rows have more room, because on this screen the separation is doing the
   work a product image would do elsewhere. */
.br-checkout .woocommerce-MyAccount-content table.shop_table th{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--smoke);font-weight:400;text-align:left;
  padding:.75rem 0;border-bottom:1px solid var(--iron-lit);
}
.br-checkout .woocommerce-MyAccount-content table.shop_table td{
  padding:1.1rem 0;border-bottom:1px solid var(--iron-lit);color:var(--chalk);font-size:.875rem;
}
/* WooCommerce's secondary `.button` LINK — "confirm email address", "view
   order", "pay" — ships as #2f2f2f text, unreadable on this background. The
   colour is forced because WooCommerce Blocks restates it from several
   directions inside notice banners and tables.
   Deliberately `a.button` only: the form submits below are <button class="…
   button"> too, and they are solid bone, so forcing chalk on them would paint
   white text on a cream button. */
.br-page.br-checkout a.button,
.br-checkout .woocommerce-MyAccount-content a.woocommerce-Button{
  display:inline-flex;align-items:center;height:38px;padding:0 1.1rem;
  background:transparent;border:1px solid var(--iron-lit);
  color:var(--chalk)!important;
  border-radius:0;text-decoration:none;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
}
.br-page.br-checkout a.button:hover,
.br-checkout .woocommerce-MyAccount-content a.woocommerce-Button:hover{
  border-color:var(--bone);background:transparent;
}

/* --- account tables on a phone -----------------------------------------
   WooCommerce's own small-screen sheet turns these tables into one row per
   cell, each with a bold "Product:" / "Expires:" label and an identical
   hairline under it. Two downloads therefore print as eight identical rows
   with nothing saying where one product stops and the next starts — and the
   two are usually named alike, because they came from the same shop.

   So on a phone a row stops being a row and becomes a panel: one product, one
   bordered card, its four facts inside it. The label keeps WooCommerce's
   `attr(data-title)` content and loses its bold body face for the mono label
   the rest of the site uses. Cut at 768px, the width WooCommerce's own sheet
   switches at, so there is never a width where half of each layout applies. */
@media (max-width:768px){
  .br-checkout .woocommerce-MyAccount-content table.shop_table_responsive,
  .br-checkout table.shop_table_responsive tbody{display:block;border:0}
  .br-checkout .woocommerce-MyAccount-content table.shop_table_responsive tbody tr{
    display:block;
    margin:0 0 .9rem;padding:.25rem 1.1rem;
    background:var(--surface);border:1px solid var(--iron-lit);
  }
  .br-checkout .woocommerce-MyAccount-content table.shop_table_responsive tbody tr td{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.8rem 0;text-align:right;
    border-bottom:1px solid var(--iron);
    /* WooCommerce rules the top of every row after the first, to separate
       what were rows. The card is the separation now. */
    border-top:0;
  }
  .br-checkout .woocommerce-MyAccount-content table.shop_table_responsive tbody tr td:last-child{
    border-bottom:0;
  }
  .br-checkout .woocommerce-MyAccount-content table.shop_table_responsive tbody tr td::before{
    float:none;flex:none;
    font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
    text-transform:uppercase;font-weight:400;color:var(--smoke);
  }
  /* The last cell is the control, and a 38px box does not belong on the same
     baseline as a one-word label. */
  .br-checkout .woocommerce-MyAccount-content table.shop_table_responsive tbody tr td.download-file,
  .br-checkout .woocommerce-MyAccount-content table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions{
    align-items:center;padding-top:.9rem;
  }
}

/* Narrow: the account menu goes back over the panel as a wrapping row. */
@media (max-width:760px){
  .br-checkout .woocommerce:has(> .woocommerce-MyAccount-navigation){
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"notice" "nav" "panel";
    row-gap:1.75rem;
  }
  .br-checkout .woocommerce-MyAccount-navigation{
    border-right:0;border-bottom:1px solid var(--iron);
    padding:0 0 .9rem;
  }
  .br-checkout .woocommerce-MyAccount-navigation ul{
    flex-direction:row;flex-wrap:wrap;gap:1.25rem;
  }
  .br-checkout .woocommerce-MyAccount-navigation li.is-active a::before{display:none}
  .br-checkout .woocommerce-MyAccount-navigation li.is-active a{
    border-bottom:1px solid var(--bone);
  }
}

@media (max-width:600px){
  .br-checkout form.woocommerce-form-login,
  .br-checkout form.woocommerce-form-register,
  .br-checkout form.woocommerce-ResetPassword{max-width:none;padding:1.25rem}
  /* Two password fields side by side on a phone is two fields nobody can read
     the labels of. The pair stacks; the grid stays, so the gaps still hold.
     The `:has()` is repeated rather than dropped: without it these selectors
     are less specific than the two-column rule they have to undo. */
  .br-checkout .woocommerce form.woocommerce-form-login:has(> .form-row-last),
  .br-checkout .woocommerce form.woocommerce-form-register:has(> .form-row-last),
  .br-checkout .woocommerce form.woocommerce-ResetPassword:has(> .form-row-last),
  .br-checkout .woocommerce form.woocommerce-EditAccountForm:has(> .form-row-last),
  .br-checkout .woocommerce form fieldset:has(> .form-row-last){
    grid-template-columns:minmax(0,1fr);
  }
  .br-checkout .woocommerce form > .form-row-first,
  .br-checkout .woocommerce form > .form-row-last,
  .br-checkout .woocommerce form fieldset > .form-row-first,
  .br-checkout .woocommerce form fieldset > .form-row-last{grid-column:1 / -1}
}

@media (max-width:900px){
  .br-checkout .wc-block-checkout__sidebar{margin-top:2rem}
}

/* notice variants carry their own light backgrounds; repaint all three */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-error{
  background:var(--br-notice-bg)!important;
  color:var(--br-notice-fg)!important;
  border:1px solid var(--iron)!important;
  border-color:color-mix(in srgb, var(--br-notice-fg) 20%, transparent)!important;
}
.wc-block-components-notice-banner.is-error{border-color:#5a2b28!important}
.wc-block-components-notice-banner.is-success{border-color:#2c4433!important}
/* Links in a notice read as prose; the `.button` inside one does not. */
.wc-block-components-notice-banner a:not(.button){color:var(--br-notice-fg);text-decoration:underline}

/* The offer that rides along with a notice — "View cart", "Browse products",
   "Confirm email address". WooCommerce ships it as a .wp-element-button, so it
   inherits the button colour meant for a light fill: #2F2F2F on the notice's
   #141311, a ratio of about 1.2:1. Not a quiet link, an invisible one.

   It is drawn as the same bordered box the account tables use for "View", so
   the one control in a notice looks like every other secondary control on the
   site rather than like a word that happens to be underlined.

   The float goes with it. WooCommerce takes this out of flow and pins it to the
   top of the block, which left a 34px box beside a single line of type with
   their centres 8px apart — the sentence sat visibly high against its own
   button. The content row below is a flex line instead, so the two are centred
   on each other whatever either of them is. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.button,
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-info a.button,
.woocommerce-notices-wrapper .woocommerce-error a.button,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message a.button,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info a.button,
.br-checkout .woocommerce-MyAccount-content .woocommerce-error a.button{
  /* !important because WooCommerce sets the #2f2f2f with one of its own, from
     wc-blocks.css and store-notices.css both, on a three-class selector — so
     the chain has to be matched, not just out-weighed by source order. The
     float, the padding and the underline are forced for the same reason. */
  color:var(--br-notice-fg)!important;
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;
  float:none!important;
  /* the same 38px box, padding and border weight the account tables give
     "View" — this is the site's secondary control, not a second one */
  height:38px;
  padding:0 1.1rem!important;
  /* No `margin-left:auto`. That pushed the button to the right edge of the
     row, which is right while the sentence sits beside it — and wrong the
     moment the row wraps, which is what a phone and a zoomed desktop both do:
     the button ended up alone on a second line, pinned to the right, under a
     sentence starting at the left. The row uses `space-between` instead, and
     a flex line holding one item lays it out from the start, so the button
     sits at the right edge when it shares the line and at the left edge when
     it does not. One rule, every width, no breakpoint to keep in step. */
  margin:0!important;
  order:1;
  background:none!important;
  border:1px solid color-mix(in srgb, var(--br-notice-fg) 32%, transparent)!important;
  border-radius:0;
  opacity:1;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none!important;
  white-space:nowrap;
  transition:border-color .2s ease,background-color .2s ease;
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward:hover,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward:focus-visible,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.button:hover,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.button:focus-visible,
.woocommerce-notices-wrapper .woocommerce-message a.button:hover,
.woocommerce-notices-wrapper .woocommerce-message a.button:focus-visible,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info a.button:hover,
.br-checkout .woocommerce-MyAccount-content .woocommerce-info a.button:focus-visible,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message a.button:hover,
.br-checkout .woocommerce-MyAccount-content .woocommerce-message a.button:focus-visible{
  color:var(--br-notice-fg)!important;
  border-color:var(--br-notice-fg)!important;
}

/* The line the sentence and its button share. `flex-wrap` so a long message
   drops the button onto its own line rather than squeezing it, and the parts
   that are whole paragraphs — a summary, a list of checkout errors — take the
   full width instead of trying to sit beside anything. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;
  justify-content:space-between;
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content > ul,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content > ol,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content > p,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content > .wc-block-components-notice-banner__summary{
  flex:1 1 100%;margin-block:0;
}

/* the order summary heading is a plain sans by default */
.br-checkout .wc-block-components-checkout-order-summary__title,
.br-checkout .wc-block-components-checkout-order-summary__title-text,
.br-checkout .wp-block-woocommerce-checkout-order-summary-block h2,
.br-checkout .wp-block-woocommerce-cart-order-summary-block h2{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.8125rem;color:var(--chalk);
}

/* ---- Out of stock -------------------------------------------------------
   WooCommerce states this in body copy, at body size, in the same colour as
   everything around it — so on a page whose job is to sell, the one fact that
   stops the sale reads as an aside. It is the only red on the product page. */
.br-product-copy p.stock.out-of-stock,
.woocommerce div.product p.stock.out-of-stock{
  display:flex;align-items:center;gap:.6rem;
  margin-block:0;padding:.75rem .9rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--alarm);
  border:1px solid rgba(180,86,79,.4);
  background:rgba(180,86,79,.07);
}
.br-product-copy p.stock.out-of-stock::before,
.woocommerce div.product p.stock.out-of-stock::before{
  content:"";flex:none;width:14px;height:14px;
  border:1.5px solid currentColor;border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) center/1.5px 7px no-repeat;
  transform:rotate(45deg);
}

/* The in-stock line is the opposite problem: nobody needs telling that a thing
   they can buy is buyable, so it stays quiet. */
.br-product-copy p.stock.in-stock{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--smoke);
}

/* ============================================================
   ORDER CONFIRMATION
   WooCommerce renders this screen from its own block template
   (`woocommerce/templates/templates/order-confirmation.html`),
   not from the checkout page — which is why it arrived with no
   wrapper, no measure and none of the type above. The theme now
   ships `templates/order-confirmation.html`, so the page is
   inside `.br-wrap` and carries `.br-checkout`; most of this
   file already applies. What is left is the handful of parts
   that exist nowhere else on the site.
   ============================================================ */

/* The status block is this page's head: it prints the <h1> and the sentence
   under it. Rather than adding a second heading beside it, it becomes the
   head — same rule, same air below as `.br-page-head`, without that rule's
   flex row, which would put the sentence beside the heading instead of
   under it. */
.br-confirm .wc-block-order-confirmation-status{
  margin:0 0 clamp(2rem,4vw,3.25rem);
  padding-bottom:1.25rem;border-bottom:1px solid var(--iron);
}
.br-confirm .wc-block-order-confirmation-status h1{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(1.25rem,2.6vw,2rem);
  line-height:1.2;margin:0 0 .6rem;color:var(--chalk);
}
.br-confirm .wc-block-order-confirmation-status p{margin:0;color:var(--smoke)}

/* The verification branch — the buyer opening the link later, signed out —
   sits below the head and puts WooCommerce's "Log in here" in the middle of a
   sentence. `a.button` above would make that a 38px box between two words, so
   here it goes back to being what it reads as: a link. */
.br-confirm .wc-block-order-confirmation-status-description{
  margin:0 0 clamp(2rem,4vw,3rem);
}
.br-confirm .wc-block-order-confirmation-status-description p{color:var(--smoke)}
.br-confirm .wc-block-order-confirmation-status-description a.button{
  display:inline;height:auto;padding:0;border:0;
  background:transparent;color:var(--chalk)!important;
  border-bottom:1px solid var(--iron-lit);
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:none;
}
.br-confirm .wc-block-order-confirmation-status-description a.button:hover{
  border-bottom-color:var(--bone);
}

/* The email check itself. This is classic WooCommerce markup — a `.form-row`,
   an `.input-text` and an `<input type="submit">`, not the <button> the login
   screens use, so none of the rules above reach it and it arrived as a grey
   plate with a browser-default field. It becomes the same narrow panel the
   login and reset forms are. */
.br-confirm form.woocommerce-verify-email{
  max-width:26rem;margin:0;padding:1.75rem;
  background:var(--surface);border:1px solid var(--iron);
}
.br-confirm form.woocommerce-verify-email .form-row{margin:0 0 1.15rem;padding:0}
.br-confirm form.woocommerce-verify-email .form-row:last-child{margin:0}
.br-confirm form.woocommerce-verify-email label{
  display:block;margin:0 0 .5rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--smoke);
}
.br-confirm form.woocommerce-verify-email .required{color:var(--smoke);text-decoration:none}
.br-confirm form.woocommerce-verify-email input.input-text{
  width:100%;height:46px;padding:0 .9rem;
  background:var(--pitch);color:var(--chalk);
  border:1px solid var(--iron);border-radius:0;
}
.br-confirm form.woocommerce-verify-email input.input-text:focus{
  border-color:var(--iron-lit);outline:none;
}
.br-confirm form.woocommerce-verify-email input.button{
  width:100%;height:46px;margin:0;padding:0 1.8rem;
  background:var(--bone);color:var(--void);border:1px solid var(--bone);
  border-radius:0;cursor:pointer;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background-color .2s ease,border-color .2s ease;
}
.br-confirm form.woocommerce-verify-email input.button:hover{
  background:var(--chalk);border-color:var(--chalk);
}

/* Order # · Date · Total · Email. WooCommerce prints the four as a bold body
   label over a body value; here they are the same label/value pair the order
   summary and the account tables use. */
.br-confirm .wc-block-order-confirmation-summary{
  margin:0 0 clamp(2rem,4vw,3rem);
  padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--iron);
}
.br-confirm .wc-block-order-confirmation-summary-list{
  display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;margin:0;padding:0;list-style:none;
}
.br-confirm .wc-block-order-confirmation-summary-list-item{
  display:flex;flex-direction:column;gap:.35rem;margin:0;text-align:left;
}
.br-confirm .wc-block-order-confirmation-summary-list-item__key{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--smoke);font-weight:400;
}
.br-confirm .wc-block-order-confirmation-summary-list-item__value{
  color:var(--chalk);font-size:.875rem;
}

/* --- the two tables ----------------------------------------------------
   Order details and Downloads arrive as WooCommerce plates: a boxed table
   with a filled header row. The account screens already answer this shape —
   hairline rows, no outer box, a mono label row — and a buyer sees both
   within a minute of each other, so they are said the same way. */
.br-confirm .wc-block-order-confirmation-totals__table,
.br-confirm .wc-block-order-confirmation-downloads__table{
  width:100%;border-collapse:collapse;border:0;margin:0;
}
.br-confirm .wc-block-order-confirmation-totals__table th,
.br-confirm .wc-block-order-confirmation-downloads__table th{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--smoke);font-weight:400;text-align:left;
  padding:.75rem 1rem .75rem 0;background:transparent;
  border:0;border-bottom:1px solid var(--iron-lit);
}
/* `text-align` is restated on the cells because WooCommerce centres the middle
   columns of the downloads table and leaves its header row left — the count
   sat 54px to the right of the word it answers. Header and value share an
   edge; only the last column turns, and it turns together. */
.br-confirm .wc-block-order-confirmation-totals__table td,
.br-confirm .wc-block-order-confirmation-downloads__table td{
  padding:.95rem 1rem .95rem 0;color:var(--chalk);font-size:.875rem;
  background:transparent;border:0;border-bottom:1px solid var(--iron);
  text-align:left;
}
.br-confirm .wc-block-order-confirmation-totals__table tfoot th,
.br-confirm .wc-block-order-confirmation-totals__table tfoot td{
  border-bottom:0;border-top:1px solid var(--iron-lit);
  color:var(--bone);font-size:.9375rem;padding-top:1.1rem;
}
.br-confirm .wc-block-order-confirmation-totals__table th:last-child,
.br-confirm .wc-block-order-confirmation-totals__table td:last-child,
.br-confirm .wc-block-order-confirmation-downloads__table th:last-child,
.br-confirm .wc-block-order-confirmation-downloads__table td:last-child{
  text-align:right;padding-right:0;
}
.br-confirm .wc-block-order-confirmation-totals__table td a{color:var(--chalk)}
.br-confirm .wc-block-order-confirmation-totals__table .product-quantity{
  font-family:var(--mono);color:var(--smoke);font-weight:400;
}
.br-confirm .woocommerce-Price-amount{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* The download itself is the reason the buyer is on this page, so it is the
   one control here that is filled rather than outlined. `a.button` above
   makes every secondary link an outlined box; this one is answered after it
   and at higher weight so the file, not the invoice, is what the eye lands
   on. */
.br-confirm .wc-block-order-confirmation-downloads__table a.woocommerce-MyAccount-downloads-file{
  background:var(--bone);border-color:var(--bone);color:var(--void)!important;
}
.br-confirm .wc-block-order-confirmation-downloads__table a.woocommerce-MyAccount-downloads-file:hover{
  background:var(--chalk);border-color:var(--chalk);color:var(--void)!important;
}

/* --- addresses ---------------------------------------------------------- */
.br-confirm .wc-block-order-confirmation-address-wrapper{
  gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3rem);
}
.br-confirm .wc-block-order-confirmation-billing-address,
.br-confirm .wc-block-order-confirmation-shipping-address{
  padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--iron);
  font-style:normal;color:var(--smoke);font-size:.875rem;line-height:1.7;
}

/* --- "create an account" ------------------------------------------------
   Offered to guests only. It is a sales pitch on a page that has just taken
   money, so it reads as a panel rather than as more of the receipt. */
.br-confirm .wc-block-order-confirmation-create-account{
  margin:0 0 clamp(2rem,4vw,3rem);
  padding:clamp(1.25rem,3vw,1.75rem);
  background:var(--surface);border:1px solid var(--iron);
}
.br-confirm .wc-block-order-confirmation-create-account h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.9375rem;color:var(--chalk);margin:0 0 1rem;
}
.br-confirm .wc-block-order-confirmation-create-account ul{
  margin:0;padding:0;list-style:none;display:grid;gap:.5rem;
}
.br-confirm .wc-block-order-confirmation-create-account li{
  color:var(--smoke);font-size:.875rem;padding-left:1.4rem;position:relative;
}
.br-confirm .wc-block-order-confirmation-create-account li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:.5rem;height:1px;background:var(--iron-lit);
}
.br-confirm .wc-block-order-confirmation-create-account-description p{
  color:var(--smoke);font-size:.8125rem;text-align:left;
}

/* ---- the notice accent -------------------------------------------------
   The left edge is the status. Said here, at the end, and at the same
   specificity as the plate rules above, because those set `border-color` with
   !important and would otherwise repaint this edge along with the other three.
   Verified against the real markup: WooCommerce 11 prints these notices as
   `.wc-block-components-notice-banner`, so this is what the account screens
   and the store-notices block both land on. */
.br-checkout .wc-block-components-notice-banner,
.woocommerce-notices-wrapper .wc-block-components-notice-banner{
  border-left-width:2px!important;
  border-left-color:var(--iron-lit)!important;
}
.br-checkout .wc-block-components-notice-banner.is-error,
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-error{
  border-left-color:var(--alarm)!important;
}
.br-checkout .wc-block-components-notice-banner.is-success,
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success{
  border-left-color:#4f7a5e!important;
}
.br-checkout .wc-block-components-notice-banner.is-warning,
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-warning{
  border-left-color:#8a7440!important;
}