/*
  WooCommerce, spoken in the design's language.

  design.css is the shop front as signed off and is not edited here: it should
  stay close enough to the design source that it can be re-copied. This file is
  everything WooCommerce puts on the page that the design never anticipated,
  mapped onto the same tokens so it does not read as a bolted-on plugin.

  Rules are grouped by where they show up rather than by selector, because the
  next person's question is "why does the cart look wrong", not "what does
  .shop_table do".
*/

/* ------------------------------------------------------------- structure */

/*
  The wrapper WooCommerce templates sit inside. The design's pages each brought
  their own white panel; WooCommerce's do not, so this supplies it.
*/
.wrap {
  background: var(--white);
}

/* WooCommerce prints an empty div when the sidebar is removed. */
.wrap > .widget-area:empty,
#secondary:empty {
  display: none;
}

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

/*
  Notices carry real consequences on a shop: "that piece has gone" arrives
  here. They are given the weight of the callout in the design rather than
  WooCommerce's default green bar.
*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--tint);
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.5;
  list-style: none;
}

.woocommerce-error {
  border-color: rgba(255, 90, 30, .35);
  background: rgba(255, 90, 30, .07);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
  Strip WooCommerce's notice icons.

  It draws them with a ::before in its own icon font, absolutely positioned at
  left:1.5em. Two things went wrong at once: the glyph did not resolve from the
  font and rendered as a tofu box, and because the rule above does not create a
  positioning context the icon was placed against some other ancestor entirely,
  landing on top of the first word instead of beside it.
  The design has no icons on notices, so they go rather than get repaired.
*/
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
  content: none;
  display: none;
}

/*
  Message and action on one row.

  WooCommerce floats the button right, which takes it out of flow: with a long
  message it was overflowing the notice and being cut off at the edge of the
  page. Flex keeps it inside, and flex-shrink:0 stops the label being squashed.
*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: none;
  margin-left: 0;
  flex-shrink: 0;
  /*
    WooCommerce emits the button BEFORE the message text and relies on
    float:right to move it over. Removing the float handed placement back to
    source order, which put the button on the left. Ordering it explicitly
    puts it last whichever side of the text it appears in the markup, and the
    message stays the first thing read.
  */
  order: 2;
}

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

/*
  WooCommerce emits .button everywhere: cart, checkout, account, notices. It is
  given the design's pill so no screen has two different ideas of a button.
*/
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: clamp(46px, 3.6vw, 54px);
  padding: 0 clamp(1.5rem, 2.4vw, 2.3rem);
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
}

.woocommerce .button:disabled,
.woocommerce button.button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* The secondary action in a pair, e.g. "Update basket". */
.woocommerce .button[name="update_cart"],
.woocommerce a.button.wc-backward {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}

/* ----------------------------------------------------------------- forms */

.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0 0 1rem;
}

.woocommerce form .form-row label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}

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

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  height: 50px;
  padding: 0 1rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
}

.woocommerce form .form-row textarea {
  height: auto;
  min-height: 120px;
  padding: .85rem 1rem;
  line-height: 1.5;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: transparent;
}

/* A field WooCommerce has marked invalid, so the error is visible without
   relying on the notice at the top of a long form. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--orange);
}

/* ------------------------------------------------------------------ cart */

.woocommerce-cart-form {
  margin-bottom: 2rem;
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin: 0 0 1.5rem;
}

.woocommerce table.shop_table th {
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.woocommerce table.shop_table td {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.woocommerce table.shop_table .product-thumbnail img {
  width: 84px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--r-tile);
  display: block;
}

.woocommerce table.shop_table .product-name a {
  color: var(--ink);
  font-weight: 600;
}

.woocommerce table.shop_table .product-name a:hover {
  color: var(--orange);
}

/*
  Quantity is hidden on purpose, not by accident.

  Every piece is one of one, so a quantity box can only ever offer a number
  that cannot be fulfilled. Leaving it visible invites somebody to type 2 and
  be told no at checkout.
*/
.woocommerce table.shop_table td.product-quantity .quantity,
.woocommerce table.shop_table th.product-quantity {
  display: none;
}

.woocommerce table.shop_table td.product-quantity::after {
  content: "1";
  color: var(--muted-2);
  font-size: .9rem;
}

.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--muted) !important;
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}

.woocommerce a.remove:hover {
  background: var(--orange);
  color: var(--white) !important;
}

/* Cart totals panel. */
.cart_totals,
.cart-collaterals .cart_totals {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

.cart_totals h2 {
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.cart_totals table.shop_table td,
.cart_totals table.shop_table th {
  border-bottom: 1px solid var(--line);
  padding: .8rem 0;
}

.cart_totals .order-total td,
.cart_totals .order-total th {
  border-bottom: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.wc-proceed-to-checkout {
  margin-top: 1.2rem;
}

.wc-proceed-to-checkout .button {
  width: 100%;
}

/* Coupons are off by default in the design's flow, but if they are switched
   on they should not look like a different website. */
.woocommerce .coupon {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------- checkout */

/*
  Exactly two columns, not auto-fit.

  auto-fit with a 280px minimum fits FOUR tracks across a 1320px checkout, so
  the billing column landed in track two with an empty track beside it and the
  fields squeezed to 141px. col2-set means two columns; say two.
*/
.woocommerce-checkout .col2-set,
.woocommerce-account .col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}

@media (max-width: 720px) {
  .woocommerce-checkout .col2-set,
  .woocommerce-account .col2-set {
    grid-template-columns: minmax(0, 1fr);
  }
}

.woocommerce-checkout h3 {
  font-size: 1.15rem;
  margin: 0 0 1rem;
}

#order_review,
.woocommerce-checkout-review-order {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-top: 1.6rem;
}

#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

#payment ul.payment_methods li {
  padding: .7rem 0;
}

#payment .payment_box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  margin: .6rem 0 0;
  font-size: .92rem;
}

#place_order {
  width: 100%;
  margin-top: 1rem;
}

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

/* superseded by the logged-in scoped rule further down */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .7rem .9rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--tint);
  color: var(--ink);
}

.woocommerce-MyAccount-content {
  min-width: 0;
}

/* The sign-in and register pair. */
.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

/* ------------------------------------------------------------- pagination */

.woocommerce-pagination {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-pagination ul.page-numbers li {
  border: 0;
}

.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .7rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
}

.woocommerce-pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

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

.woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/*
  A sold piece keeps its price legible rather than struck through. It is a
  record of what the piece went for, not a lapsed offer.
*/
.pcard.sold .price,
.pdp .pdp-price b {
  text-decoration: none;
}

/* --------------------------------------------------------------- Stripe */

/*
  Stripe renders its card fields in an iframe it controls, so it cannot inherit
  the page's styling. Give the box it lands in the same border and radius as
  the theme's own inputs, so the seam is as small as it can be.
*/
.wc-stripe-elements-field,
.wc-stripe-iban-element-field,
#wc-stripe-payment-request-wrapper {
  padding: .9rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--white);
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 820px) {
  /*
    Matches .logged-in so it can actually beat the desktop rule. The stacking
    override used to be one class less specific than the two-column rule it was
    meant to undo, so on a phone the 230px track survived and the panels
    overflowed the screen.
  */
  .woocommerce-account.logged-in .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /*
    The cart table becomes a stack of rows. A four-column table on a phone
    either scrolls sideways or crushes the product name to two characters.
  */
  .woocommerce table.shop_table thead {
    display: none;
  }

  .woocommerce table.shop_table tr {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: .2rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }

  .woocommerce table.shop_table td {
    border: 0;
    padding: 0;
  }

  .woocommerce table.shop_table td.product-thumbnail {
    grid-row: span 4;
  }

  .woocommerce table.shop_table td.product-remove {
    justify-self: end;
  }
}

/*
  A page with no side navigation.

  .content reserves a 230px rail for the help links. Cart, checkout and the
  account pages have no rail, so without this the basket sits in the right-hand
  column with an empty gutter beside it looking like a missing element.
*/
.content.content-full {
  grid-template-columns: minmax(0, 1fr);
}

.content.content-full .prose {
  max-width: none;
}

/* ------------------------------------------------- WooCommerce's own tokens */

/*
  WooCommerce ships its own custom properties and colours its primary buttons
  from them, which is why "Proceed to checkout" arrived purple. Setting the
  variables fixes every button, badge and highlight it owns in one place,
  rather than chasing individual selectors as each one is noticed.
*/
:root {
  --wc-primary: var(--ink);
  --wc-primary-text: var(--white);
  --wc-secondary: var(--tint);
  --wc-secondary-text: var(--ink);
  --wc-highlight: var(--orange);
  --wc-highlight-text: var(--white);
  --wc-content-bg: var(--white);
  --wc-subtext: var(--muted);
  --wc-green: #2f7a4d;
  --wc-red: var(--orange);
}

/*
  .alt is WooCommerce's "primary action" modifier and carries its own colours
  at a specificity that beats the base rule above. Named explicitly so the
  checkout button matches every other button in the shop.
*/
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .checkout-button {
  background: var(--ink);
  color: var(--white);
  border: 0;
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover {
  background: var(--ink-2);
  color: var(--white);
}

/* ------------------------------------------------------- cart table layout */

/*
  Left to itself the table gives the remove column as much room as the product
  name. These widths put the weight where the information is.
*/
.woocommerce table.shop_table td.product-remove,
.woocommerce table.shop_table th.product-remove {
  width: 44px;
  padding-right: .6rem;
}

.woocommerce table.shop_table td.product-thumbnail,
.woocommerce table.shop_table th.product-thumbnail {
  width: 100px;
}

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table th.product-price,
.woocommerce table.shop_table th.product-subtotal {
  width: 110px;
  text-align: right;
}

.woocommerce table.shop_table td.product-name,
.woocommerce table.shop_table th.product-name {
  width: auto;
}

/* The coupon row sits below the table as its own quiet strip. */
.woocommerce .cart .actions,
.woocommerce table.shop_table td.actions {
  padding-top: 1.2rem;
}

.woocommerce .coupon input#coupon_code {
  height: clamp(46px, 3.6vw, 54px);
  min-width: 180px;
  padding: 0 1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem;
}

/* -------------------------------------------------- checkout field widths */

/*
  WooCommerce lays its forms out with .form-row-first, -last and -wide, which
  are floats in its own stylesheet. Without replacements the fields collapse to
  their intrinsic width and the checkout looks broken on the one page where
  looking broken costs an order.
*/
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container {
  width: 100%;
  box-sizing: border-box;
}

.woocommerce form .woocommerce-billing-fields__field-wrapper,
.woocommerce form .woocommerce-shipping-fields__field-wrapper,
.woocommerce form .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes,
.woocommerce form .form-row#billing_address_1_field,
.woocommerce form .form-row#billing_address_2_field {
  grid-column: 1 / -1;
}

.woocommerce form .form-row-first {
  grid-column: 1;
}

.woocommerce form .form-row-last {
  grid-column: 2;
}

/* WooCommerce floats these; the grid above already positions them. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-wide {
  float: none;
  width: auto;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: auto;
}

@media (max-width: 620px) {
  .woocommerce form .woocommerce-billing-fields__field-wrapper,
  .woocommerce form .woocommerce-shipping-fields__field-wrapper,
  .woocommerce form .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    grid-column: 1;
  }
}

/*
  Place the checkout's two columns explicitly.

  Both report order:0 and grid-column:auto, so auto-placement should follow
  source order, and it did not: billing landed in the right-hand track. Rather
  than keep chasing why, they are pinned. Explicit placement is what we want
  here anyway, because "billing on the left" is a decision rather than a
  side effect of markup order that a WooCommerce update could reverse.
*/
.woocommerce-checkout .col2-set > .col-1 {
  grid-column: 1;
  grid-row: 1;
}

.woocommerce-checkout .col2-set > .col-2 {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 720px) {
  .woocommerce-checkout .col2-set > .col-1,
  .woocommerce-checkout .col2-set > .col-2 {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ------------------------------------------------------------- skip link */

/*
  The skip link must be reachable by keyboard but invisible until focused.
  Without this it renders as an ordinary link above everything and pushed the
  whole page down 25px, which is exactly how far the live site had drifted
  from the design.
*/
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 12px 0;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus,
.skip:focus-visible {
  left: 0;
}

/* =========================================================== account area */

/*
  Sign in.

  One centred card on the tint, matching the Penpot board: 460 wide, 40 of
  padding, 380 fields. WooCommerce's own login/register pair is not used
  because the design creates accounts at checkout instead.
*/
.signin-body {
  background: var(--tint);
  padding: clamp(2.4rem, 5vw, 4.4rem) var(--pad);
  display: flex;
  justify-content: center;
}

.signin-card {
  width: min(100%, 460px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 2.6vw, 2.5rem);
}

.signin-card h1 {
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}

.signin-card .lede {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 1.8rem;
}

.signin-card .form-row label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.signin-card .signin-actions {
  margin-top: 1.4rem;
}

.signin-card .signin-actions .button {
  width: 100%;
}

.signin-card .signin-alt {
  margin: 1.3rem 0 0;
  font-size: .92rem;
}

.signin-card .signin-new {
  margin: 1.1rem 0 0;
  color: var(--muted-2);
  font-size: .88rem;
}

/* The page head in the tan strip: breadcrumb and greeting. */
.page-head {
  position: relative;
  z-index: 2;
  padding: clamp(.6rem, 1.6vw, 1.4rem) 0 0;
}

.page-head .crumb {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .6rem;
  display: flex;
  gap: .5rem;
}

.page-head .crumb a {
  color: var(--muted-2);
}

.page-head .crumb a:hover {
  color: var(--ink);
}

.page-head h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  margin: 0;
}

/* The rail. 230 wide with a 54 gutter, as the board has it. */
/*
  The rail only exists when somebody is signed in. Applying the two-column
  grid unconditionally put the sign-in card in the 230px navigation track and
  squeezed it to a ribbon.
*/
.woocommerce-account .woocommerce {
  display: block;
  padding: 0;
  background: var(--white);
}

.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 54px;
  padding: clamp(2rem, 3.6vw, 3.4rem) var(--pad) clamp(2.6rem, 4.6vw, 4.4rem);
  align-items: start;
}

.account-nav ul {
  gap: .25rem;
}

.account-nav li a {
  border-radius: 10px;
  padding: .55rem .8rem;
  font-size: .95rem;
}

.account-nav li.is-active a {
  background: var(--ink);
  color: var(--white);
}

/* Overview panels. */
.acc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.acc-stats > div {
  background: var(--tint);
  border-radius: var(--r-card);
  padding: clamp(1rem, 1.8vw, 1.4rem);
}

.acc-stats b {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.acc-stats span {
  color: var(--muted);
  font-size: .85rem;
}

.acc-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 .9rem;
}

.acc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--ink);
}

a.acc-card:hover {
  border-color: var(--line-2);
}

.acc-order-ref {
  font-weight: 600;
  margin: 0 0 .25rem;
}

.acc-order-meta {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}

.acc-status {
  flex-shrink: 0;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--tint);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.acc-empty,
.acc-address {
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
}

.acc-address address {
  font-style: normal;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .woocommerce-account.logged-in .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .acc-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
  The sign-in screen is full-bleed tint across the shell, as the board has it.
  page.php wraps every page in .content, which carries the reading padding the
  information pages need, and that padding was leaving a white margin around
  the tint. Removed for this one screen, which supplies its own.
*/
.woocommerce-account:not(.logged-in) .content {
  padding: 0;
}

/*
  The sign-in screen is a shop step too, so page.php now gives it .shop-step and
  the rule that used to widen .prose here no longer has anything to match.
  .shop-step carries max-width:none for every one of them.
*/

/* ------------------------------------------------- account layout repairs */
/*
  Three separate things were breaking the signed-in account screen, and the
  screenshot showed all of them at once: orange bullets on the navigation, a
  navigation rail about 70px wide, and the panels stacked into a narrow column
  with the rest of the page empty.

  1. page.php wrapped every page in <article class="prose">, whose reading
     typography includes an orange dot on every li. The account navigation is a
     list, so it got the dots and the 1.4rem indent that goes with them. Fixed
     at source: cart, checkout and account now render in .shop-step instead.

  2. WooCommerce's own woocommerce-layout.css is still enqueued, and it floats
     the navigation left at width:30% and the content right at width:68%. Those
     are percentages of a grid column here, which is where the ~70px rail came
     from. The theme styles every Woo screen itself, so these are overridden
     rather than inherited.

  3. THE ONE THAT ACTUALLY MOVED THE PANELS. woocommerce.css carries a float
     clearfix on .woocommerce::before and ::after (content:" "; display:table).
     Generated content on a grid container becomes a GRID ITEM, so the grid was
     laying out four things, not two:

         ::before -> row 1 col 1      nav      -> row 1 col 2
         content  -> row 2 col 1      ::after  -> row 2 col 2

     which is exactly the screenshot: navigation alone in the wide column, the
     panels squeezed into the 230px column on the row below. Nothing about the
     grid definition was wrong; it was being fed two invisible children.

     The always-present empty <div class="woocommerce-notices-wrapper"> would
     have taken a cell for the same reason, so it is handled too.
*/

.shop-step {
  max-width: none;
}

/* 2. Undo the stock float layout. Floats are ignored by a grid container, but
      the widths are not, and they are what shrank the rail. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

/* 3a. The clearfix pseudo-elements are meaningless in a grid and must not be
       laid out as items. This is the fix for the displaced panels.

       Applied to every Woo container this theme turns into a grid, not just the
       account one. .col2-set has the same clearfix, and the explicit grid-column
       and grid-row on .col-1 and .col-2 further up this file are a workaround
       for exactly this: two invisible items were shifting the real ones along.
       That workaround is left in place, because it also pins the columns
       against a markup-order change, but it is no longer load-bearing. */
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after,
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
  content: none;
}

/* 3b. An empty notices wrapper must not occupy a cell either. When it does hold
       a notice it spans the full width, above both columns, where a message
       belongs. */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

/* 1. Belt and braces for anything else that ends up inside a prose wrapper:
      the account navigation is never a bulleted list. */
.account-nav li {
  padding-left: 0;
}

.account-nav li::before {
  content: none;
}

/* ==================================================== empty basket skeleton */

/*
  Keeps the shape of a full basket when there is nothing in it: outlined boxes
  where the pieces and the summary would go, at the same widths the filled
  basket uses. Matches the "Basket — Empty" board.
*/
.basket-empty {
  display: grid;
  grid-template-columns: minmax(0, 880fr) minmax(0, 372fr);
  gap: 38px;
  align-items: stretch;
  padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(2rem, 4vw, 3.4rem);
}

.ghost {
  position: relative;
  min-height: 340px;
  padding: 24px;
  border: 1.5px dashed #D8D0BF;
  border-radius: 16px;
  background: rgba(255, 255, 255, .45);
}

.ghost-label {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #A9A296;
}

/* The message, centred in the box where the pieces would have been. */
.ghost-pieces {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ghost-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 480px;
}

.ghost-mark {
  color: var(--tan);
  line-height: 0;
}

.ghost-message h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

.ghost-message p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.ghost-message .btn {
  margin-top: 8px;
}

/* The summary skeleton: bars standing in for the rows and the button. */
.ghost-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.ghost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ghost-row i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: #E6DECD;
}

.ghost-row-total i {
  height: 16px;
}

.ghost-rule {
  height: 1px;
  margin: 6px 0;
  background: #E6DECD;
}

.ghost-pill {
  height: 46px;
  margin-top: 10px;
  border-radius: 999px;
  background: #E6DECD;
}

/* The line under a page-head title. */
.page-head .head-lede {
  margin: .7rem 0 0;
  color: var(--ink);
  font-size: 1rem;
}

@media (max-width: 860px) {
  .basket-empty {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* The skeleton is decoration. On a phone it costs a screenful to say
     nothing, so the message stands on its own. */
  .ghost-summary {
    display: none;
  }

  .ghost-pieces {
    min-height: 300px;
  }
}