/* ═══════════════════════════════════════════════════════════════════════════
   Everything that is not one of the two heroes: written pages, the blog, the
   catalogue listing, and the cart, checkout and account screens WooCommerce
   supplies the markup for.

   These pages are paper. The field colour never appears below the bar, because
   a form is easier to fill in on cream than on a saturated ground.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── a heading that carries something ────────────────────────────────────────
   Pages do not print their own name any more: on About or the shop the title
   only repeated the link that was clicked to get there. Three places keep one,
   because there the heading is the content — a post's own name, what was
   searched for, and what a 404 has to say. */
.entry{margin-block-end:clamp(1.4rem,3vw,2.2rem)}
.entry__k{color:var(--faint);margin-block-end:.55rem}
.entry__k a{color:var(--plum)}
.entry__k a:hover{color:var(--field)}
.entry__t{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.8rem,4.8vw,2.9rem);color:var(--plum);max-inline-size:22ch}
.entry__t--lone{margin-block-end:clamp(1.2rem,2.5vw,1.8rem)}
.entry__i{margin-block-start:.8rem;max-inline-size:56ch;color:var(--muted);font-size:1rem}

/* WooCommerce's screens take the whole page: they are tables and two-column
   forms, not prose. */
.wide{max-inline-size:76rem;margin-inline:auto}
.wide > * + *{margin-block-start:1.1em}

/* Woo prints its own way back to the shop under an empty cart; this theme
   already offers one, so the duplicate goes. */
.return-to-shop{display:none}

/* ── running text ────────────────────────────────────────────────────────── */
.prose{max-inline-size:68ch;font-size:1rem}
.prose > * + *{margin-block-start:1.1em}
.prose h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.4rem,3.4vw,2rem);color:var(--plum);margin-block-start:1.8em}
.prose h3{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--plum);
  margin-block-start:1.6em}
.prose a{color:var(--plum);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1.5px;text-decoration-color:rgb(60 26 87 / .35)}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-inline-start:1.4em}
.prose li + li{margin-block-start:.35em}
.prose blockquote{border-inline-start:3px solid var(--gold);padding-inline-start:1.1rem;
  font-size:1.05rem;color:var(--muted)}
.prose img,.prose figure{border-radius:var(--radius);overflow:hidden}
.prose code{font-family:var(--mono);font-size:.86em;background:rgb(60 26 87 / .07);
  padding:.15em .4em;border-radius:.3em}
.prose table{inline-size:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{text-align:start;padding:.6rem .8rem;border-block-end:1px solid rgb(60 26 87 / .14)}

/* ── the list of posts ───────────────────────────────────────────────────── */
.posts{display:grid;gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.post-card{display:grid;gap:.7rem;align-content:start}
.post-card img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;inline-size:100%}
.post-card__meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.post-card h2{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.16;
  letter-spacing:-.02em;color:var(--plum)}
.post-card p{font-size:.92rem;color:var(--muted)}
.post-card a{position:absolute;inset:0}
.post-card{position:relative}

.pager{display:flex;gap:.6rem;justify-content:center;margin-block-start:clamp(2rem,5vw,3.4rem);
  font-family:var(--mono);font-size:.75rem}
.pager .page-numbers{padding:.6rem .95rem;border-radius:999px;border:1.5px solid rgb(60 26 87 / .2);
  color:var(--plum);transition:background-color .25s,color .25s,border-color .25s}
.pager .page-numbers:hover,.pager .current{background:var(--plum);color:var(--cream);
  border-color:var(--plum)}

/* ── the catalogue ─────────────────────────────────────────────────────────
   The pills and the box sit on one line while there is room for both, and the
   box drops under the pills before either has to shrink to nothing. */
.shopfilter{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;
  margin-block-end:clamp(1.4rem,3vw,2.2rem)}

.shopbar{display:flex;flex-wrap:wrap;gap:.45rem;flex:1 1 auto}
.shopbar a{padding:.55rem 1.05rem;border-radius:999px;border:1.5px solid rgb(60 26 87 / .2);
  font-size:.83rem;font-weight:500;color:var(--plum);
  transition:background-color .25s,color .25s,border-color .25s}
.shopbar a[aria-current]{background:var(--plum);color:var(--cream);border-color:var(--plum);
  font-weight:800}
.shopbar a:hover:not([aria-current]){border-color:var(--plum)}

/* The two inline paddings clear the magnifier and the clear button, so the
   field reads correctly from either side. */
.shopfind{position:relative;display:flex;align-items:center;flex:0 1 20rem;min-inline-size:12rem}
.shopfind .icon{position:absolute;inset-inline-start:.95rem;inline-size:1rem;block-size:1rem;
  color:var(--faint);pointer-events:none}
.shopfind input[type=search]{padding-block:.6rem;padding-inline:2.65rem;border-radius:999px;
  border-color:rgb(60 26 87 / .2);background:#fff;font-size:.88rem}
.shopfind input[type=search]::-webkit-search-cancel-button{display:none}
.shopfind__clear{position:absolute;inset-inline-end:.42rem;inline-size:1.85rem;block-size:1.85rem;
  border-radius:50%;display:grid;place-items:center;color:var(--faint);
  transition:background-color .2s,color .2s}
.shopfind__clear .icon{position:static;inline-size:.8rem;block-size:.8rem}
.shopfind__clear:hover{background:rgb(60 26 87 / .08);color:var(--plum)}
.shopfind__clear[hidden]{display:none}

.shopres__tally{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  margin-block-end:clamp(.9rem,2vw,1.4rem)}

/* While a filter is in flight the old grid stays put and dims: swapping it for
   a spinner would collapse the page height and throw the scroll position. */
.shopres{transition:opacity .2s var(--ease)}
.shopres.is-busy{opacity:.45;pointer-events:none}
@media(prefers-reduced-motion:reduce){.shopres{transition:none}}

/* ── search ──────────────────────────────────────────────────────────────── */
.searchform{display:flex;gap:.5rem;max-inline-size:26rem}
.searchform input[type=search]{flex:1;min-inline-size:0}

/* ── forms, everywhere ───────────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],
input[type=search],input[type=number],select,textarea{
  inline-size:100%;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  padding:.75rem .9rem;border:1.5px solid rgb(60 26 87 / .22);border-radius:.7rem;
  transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--plum);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);
  outline-offset:2px}
label{font-size:.85rem;font-weight:500;display:block;margin-block-end:.3rem}
button[type=submit],input[type=submit],.button,.wp-block-button__link{
  display:inline-block;padding:.85rem 1.6rem;border-radius:999px;background:var(--plum);
  color:var(--cream);font-family:var(--display);font-weight:800;font-size:.92rem;
  border:0;cursor:pointer;transition:background-color .25s}
button[type=submit]:hover,input[type=submit]:hover,.button:hover{background:var(--ink)}

/* ── WooCommerce: cart, checkout, account ────────────────────────────────────
   Woo's own markup, given this site's type and spacing. The classic checkout
   shortcode is used deliberately — the trade fields the B2B plugin adds hook
   into it, and the block checkout has nowhere to put them. */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;padding:.9rem 1.1rem;border-radius:.8rem;margin-block-end:1.2rem;
  font-size:.92rem;background:rgb(60 26 87 / .07);border-inline-start:3px solid var(--plum)}
.woocommerce-error{background:rgb(196 33 43 / .09);border-color:var(--field)}
.woocommerce-message{background:rgb(245 192 66 / .18);border-color:var(--gold)}
.woocommerce-message .button,.woocommerce-info .button{margin-inline-start:.6rem;
  padding:.45rem 1rem;font-size:.8rem}

.woocommerce table.shop_table{inline-size:100%;border-collapse:collapse;font-size:.93rem}
/* Order actions: compact buttons with room between them, the first one (view) filled and the
   rest outlined, so a row of four reads as one action and three options rather than a wall. */
.woocommerce-orders-table__cell-order-actions{white-space:nowrap}
.woocommerce-orders-table__cell-order-actions .button{
  padding:.5rem 1.05rem;font-size:.82rem;line-height:1.2;border-radius:.7rem;
  margin-block:.2rem;margin-inline-end:.45rem}
.woocommerce-orders-table__cell-order-actions .button:last-child{margin-inline-end:0}
.woocommerce-orders-table__cell-order-actions .button:not(.view){
  background:transparent;color:var(--plum);box-shadow:inset 0 0 0 1.5px rgb(60 26 87 / .35)}
.woocommerce-orders-table__cell-order-actions .button:not(.view):hover{
  background:rgb(60 26 87 / .07)}
.woocommerce-orders-table__cell-order-actions .button.cancel{
  color:var(--field);box-shadow:inset 0 0 0 1.5px rgb(196 33 43 / .35)}
.woocommerce-orders-table__cell-order-actions .button.cancel:hover{background:rgb(196 33 43 / .07)}

.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  text-align:start;padding:.85rem .7rem;border-block-end:1px solid rgb(60 26 87 / .14);
  vertical-align:middle}
.woocommerce table.shop_table th{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);font-weight:500}
.woocommerce table.shop_table img{inline-size:3.4rem;border-radius:.5rem}
.woocommerce .quantity input[type=number]{inline-size:4.6rem;text-align:center}
/* Woo puts the coupon field and both buttons in one cell; without this they
   stack into three full-width rows. */
.woocommerce td.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.woocommerce td.actions .coupon{display:flex;gap:.5rem;flex:1 1 20rem}
.woocommerce td.actions .coupon input{flex:1;min-inline-size:0}
.woocommerce td.actions button[name=update_cart]{margin-inline-start:auto}
.woocommerce .cart_totals{max-inline-size:30rem;margin-inline-start:auto}
.woocommerce .wc-proceed-to-checkout{margin-block-start:1rem}
/* Scoped to the panel each heading lives in, never to the body class.
   `.woocommerce-account h2` matched every h2 in the document — including the four column labels
   in the footer, which are set as small mono labels and turned into plum display headings on the
   one page a distributor spends the most time on. A body class says which page this is; it does
   not say which headings belong to WooCommerce. */
.woocommerce .cart_totals h2,
.woocommerce-checkout #customer_details h3,
.woocommerce-account .woocommerce-MyAccount-content h2,
#order_review_heading{font-family:var(--display);font-weight:800;font-size:1.25rem;
  color:var(--plum);margin-block:1.6rem .8rem}
.woocommerce-cart-form__cart-item .product-remove a{color:var(--faint);font-size:1.1rem}
.woocommerce-cart-form__cart-item .product-remove a:hover{color:var(--field)}

.woocommerce-checkout .col2-set{display:grid;gap:clamp(1.4rem,4vw,3rem);
  grid-template-columns:1fr}
@media(min-width:56rem){.woocommerce-checkout .col2-set{grid-template-columns:1fr 1fr}}
.form-row{margin-block-end:.9rem}
.form-row-first,.form-row-last{display:inline-block;inline-size:calc(50% - .35rem)}
.form-row-last{margin-inline-start:.6rem}
@media(max-width:34rem){.form-row-first,.form-row-last{inline-size:100%;margin-inline-start:0}}
.woocommerce-checkout #payment{background:rgb(60 26 87 / .05);border-radius:var(--radius);
  padding:1.2rem;margin-block-start:1.2rem}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;display:grid;gap:.7rem;
  margin-block-end:1rem}
.woocommerce-checkout #place_order{inline-size:100%;font-size:1rem}

.woocommerce-account .woocommerce{display:grid;gap:clamp(1.4rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:56rem){
  .woocommerce-account .woocommerce{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}
}
.woocommerce-MyAccount-navigation ul{list-style:none;display:grid;gap:.25rem}
.woocommerce-MyAccount-navigation a{display:block;padding:.6rem .9rem;border-radius:.7rem;
  font-size:.9rem;transition:background-color .25s,color .25s}
.woocommerce-MyAccount-navigation a:hover{background:rgb(60 26 87 / .07)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--plum);color:var(--cream);
  font-weight:800}

/* ── account details ────────────────────────────────────────────────────────
   Woo's edit-account form, laid out. It ships as a single column of boxes with
   the first and last name stacked, and a `<fieldset>` around the password whose
   1px border and floating legend make one section of a form look like a dialog
   dropped on top of it.

   The grid does the arranging, so the two names sit on one row and the markup
   keeps Woo's own class names — `form-row-first` and `form-row-last` still mean
   "half a row", they are just told so by a grid rather than by an inline-block
   width that cannot survive a border being added anywhere near it. */
.hfe{max-inline-size:44rem}

.hfe__part{margin-block-end:2.2rem;padding:0;border:0}
.hfe__part:last-of-type{margin-block-end:1.6rem}

.hfe__h{margin:0 0 .9rem;padding:0;font-family:var(--display);font-weight:800;
  font-size:1.1rem;color:var(--plum)}

.hfe__grid{display:grid;gap:1rem 1.1rem;grid-template-columns:1fr}
@media(min-width:38rem){.hfe__grid{grid-template-columns:1fr 1fr}}

/* Every row is a grid cell now, so Woo's widths and the checkout's are both
   overridden here rather than fought with. */
.hfe .hfe__field{display:grid;align-content:start;gap:.35rem;margin:0;
  inline-size:auto;padding:0}
.hfe .hfe__field--wide{grid-column:1 / -1}

.hfe .hfe__field label{margin:0;font-size:.82rem;font-weight:700;color:var(--plum)}
.hfe .hfe__field .required{color:var(--field);text-decoration:none}

.hfe .hfe__field input{inline-size:100%}

/* An email and a password are typed left to right, but the column they sit in
   is read right to left. `dir="ltr"` on the input gets the caret and the string
   right; anchoring the text to the same edge as the label keeps the form
   reading down one side instead of zig-zagging across it. */
.hfe .hfe__field input[dir="ltr"]{text-align:right}

/* The help line under a field. Woo sets it in italics inside a `<span><em>`,
   which on this page read as an aside in a different voice. */
.hfe__note{margin:0;font-size:.8rem;line-height:1.6;color:var(--faint);font-style:normal}
.hfe__note--block{margin-block-start:.9rem}

.hfe__go{display:flex;margin:0}
.hfe__save{inline-size:auto}

@media(max-width:38rem){
  .hfe__save{inline-size:100%;text-align:center}
}

/* Anything hooking into this form may still print Woo's `<div class="clear">`
   to break floats there are none of. An empty div is a grid cell. */
.hfe .clear{display:none}

/* Woo's own price markup, wherever it lands on cream */
.paper .woocommerce-Price-amount{font-family:var(--display);font-weight:800}
.paper del{opacity:.5}
.paper ins{text-decoration:none}