/* ═══════════════════════════════════════════════════════════════════════════
   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}
.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}

/* 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}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.lost{display:grid;gap:1.2rem;justify-items:start;max-inline-size:44ch}