/*
Theme Name: Capital Coins Shop
Theme URI: https://www.capitalcoins.co.uk
Description: Checkout, basket and Vault for Capital Coins, styled to match the main site. A child theme of Twenty Twenty-Five; it touches nothing but the shop pages' appearance.
Author: Capital Coins
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: capital-coins-shop
*/

/* ==========================================================================
   WHY THIS THEME EXISTS

   The shop runs on shop.capitalcoins.co.uk and the rest of the site runs on
   Next.js at capitalcoins.co.uk. A customer who has just decided to spend
   £20,000 on a coin crosses between the two at the exact moment they are
   deciding whether to trust us. Arriving at a default WordPress page with a
   different typeface, different colours and rounded buttons reads as having
   been handed off to somebody else's website, and on a payment page that
   reads as a scam. This theme closes that gap.

   WHAT IT DOES NOT DO. It does not touch prices, stock, the basket's
   behaviour, the payment methods or a single line of WooCommerce logic. It is
   fonts, colours, spacing and chrome. Everything functional is WooCommerce's
   and is left exactly as WooCommerce ships it.

   THERE ARE TWO SEPARATE JOBS IN HERE, which is the thing that makes this
   look bigger than it is. Basket and Checkout are the new WooCommerce Blocks:
   React components with .wc-block-components-* class names. My Account — the
   Vault — is still the old shortcode, with .woocommerce-MyAccount-* class
   names and a plain HTML table. They share no CSS whatsoever, so both
   vocabularies are handled below, under their own headings.

   The tokens are copied from src/app/globals.css in the Next.js repository.
   If the palette changes there, it changes here.
   ========================================================================== */

:root {
  --navy: #162139;
  --navy-deep: #10182b;
  --navy-light: #213353;
  --paper: #f4f0e8;
  --ivory: #efeae1;
  --ivory-deep: #e6dfd2;
  --card: #fbf8f2;
  --gold: #a8843e;
  --gold-bright: #bd9b5e;
  --gold-deep: #9a7430;

  --body-text: #3a3f4c;
  --muted: #6e665a;
  --body-on-navy: #cdcbc8;
  --muted-on-navy: #8b94a6;

  /* The darker pair, for small text on light grounds. The main site swaps
     these in under 900px; checkout type is small throughout and mostly sits
     on paper or card, so the accessible pair is used everywhere here. */
  --gold-text: #7a5a1a;
  --muted-text: #645c50;

  --grad-navy: linear-gradient(160deg, var(--navy), var(--navy-deep));
  --grad-gold: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
  --grad-gold-btn: linear-gradient(170deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);

  --rule: rgba(168, 132, 62, 0.16);
  --rule-strong: rgba(168, 132, 62, 0.3);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: Spectral, Georgia, 'Times New Roman', serif;
  --font-label: Jost, system-ui, sans-serif;

  --measure: 1200px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/*
 * Square corners, everywhere, with no exceptions.
 *
 * This is the single change that does most of the work. Twenty Twenty-Five
 * sets border-radius: 9999px on buttons and WooCommerce Blocks round
 * everything to 4px, and nothing else on Capital Coins has a rounded corner
 * anywhere. A pill-shaped gold button is the detail that gives away that
 * these two pages were not built together.
 */
.cc-shop,
.cc-shop *:not(#wpadminbar):not(#wpadminbar *):not([type='radio']) {
  border-radius: 0 !important;
}

/*
 * Except radio buttons, which stay round.
 *
 * The square-corner rule above had made them square, and the shape of a
 * control is not decoration: round means choose one of these, square means
 * tick any that apply. A squared radio beside a squared checkbox tells the
 * customer the wrong thing about the payment options, and on the one screen
 * where a wrong assumption costs money.
 */
.cc-shop input[type='radio'] {
  border-radius: 50% !important;
}

body {
  background: var(--paper);
  color: var(--body-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'lnum' 1;
  -webkit-font-smoothing: antialiased;
}


/*
 * Form controls do not inherit font-family from their parent — a browser
 * default of Arial wins unless something says otherwise. Every button below
 * is given its face explicitly, but this catches anything WooCommerce adds
 * later that is not enumerated here, which on a payment page is the
 * difference between a stray Arial button and nobody noticing.
 */
.cc-shop,
.cc-shop *,
.cc-shop *::before,
.cc-shop *::after {
  box-sizing: border-box;
}

.cc-shop button,
.cc-shop input,
.cc-shop select,
.cc-shop textarea {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5vw, 50px); }
h2 { font-size: clamp(25px, 3vw, 34px); }
h3 { font-size: 22px; }

a { color: var(--gold-text); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--gold-deep) !important;
  outline-offset: 2px;
}

/* All figures lining, so a price never sets with old-style numerals. */
h1, h2, h3, p, span, div, li, td, th, input, button, a, label {
  font-feature-settings: 'lnum' 1;
}


/*
 * Twenty Twenty-Five's own header and footer, hidden on the shop pages.
 *
 * Scoped to .cc-shop, which functions.php adds to the basket, the checkout
 * and the Vault and to nothing else, so every other page on this WordPress
 * keeps the parent theme's header exactly as it is. Hidden rather than
 * removed from the template, because removing it means overriding a template
 * part, and a part that has been edited in the Site Editor lives in the
 * database and silently outranks any file a theme ships.
 */
.cc-shop .wp-site-blocks > header.wp-block-template-part,
.cc-shop .wp-site-blocks > footer.wp-block-template-part,
.cc-shop > header.wp-block-template-part,
.cc-shop > footer.wp-block-template-part {
  display: none !important;
}

/* The injected masthead sits outside .wp-site-blocks, so the space the parent
   theme reserves above its own header is not wanted. */
.cc-shop .wp-site-blocks { padding-top: 0 !important; }

/* --------------------------------------------------------------------------
   The masthead and footer

   Deliberately not the main site's full header. A checkout page has no
   business carrying navigation, a search field or a basket icon — every one
   of them is a way out of a payment that somebody has already decided to
   make. What survives is the part that does the work: the name, a telephone
   number, and a way back if they genuinely want one.
   -------------------------------------------------------------------------- */

.cc-masthead {
  background: var(--grad-navy);
  border-bottom: 2px solid transparent;
  border-image: var(--grad-gold) 1;
  position: relative;
}

.cc-masthead__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.cc-masthead__back,
.cc-masthead__phone {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
  line-height: 1.4;
}

.cc-masthead__back { justify-self: start; }
.cc-masthead__phone { justify-self: end; text-align: right; }

.cc-masthead__back:hover,
.cc-masthead__phone:hover { color: var(--gold-bright); text-decoration: none; }

.cc-masthead__phone strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ivory);
  font-feature-settings: 'lnum' 1;
}

.cc-masthead__brand { justify-self: center; display: block; }
.cc-masthead__brand img { height: 68px; width: auto; }

.cc-foot {
  background: var(--navy-deep);
  color: var(--muted-on-navy);
  margin-top: 72px;
  padding: 28px 24px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.9;
  text-align: center;
}

.cc-foot__inner { max-width: var(--measure); margin-inline: auto; }
.cc-foot a { color: var(--body-on-navy); }
/* No opacity here. Dimming this to 0.75 put the company number and the
   registered address at 3.8:1 against the navy, under the 4.5 that 11px text
   needs — and this is the line that exists precisely so somebody can check
   who they are about to send £20,000 to. It is set in the muted tone and
   left legible. */
.cc-foot__legal { display: block; margin-top: 10px; }

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.woocommerce-page main,
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 56px 24px 0;
}

.woocommerce-page .wp-block-post-title,
.woocommerce-account .wp-block-post-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 50px);
  color: var(--navy);
  margin: 0 0 8px;
}

/* A short gold rule under the page title, the same mark the main site uses
   under a section head. Three gold rules per page is the ceiling; this is
   the only one here. */
/*
 * The page title, pulled to the left edge of the content.
 *
 * theme.json sets a 720px content size, which Twenty Twenty-Five's
 * constrained layout then centres — so the title and its gold rule sat 76px
 * right of the basket, the checkout and the sign-in form, all of which are
 * full width. A heading that does not line up with the thing beneath it
 * reads as a broken page rather than as a margin.
 */
.cc-shop .wp-block-post-title {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.woocommerce-page .wp-block-post-title::after,
.woocommerce-account .wp-block-post-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  background: var(--grad-gold);
  margin-top: 20px;
}

/* ==========================================================================
   PART ONE — BASKET AND CHECKOUT (the WooCommerce Blocks)

   Class names here belong to WooCommerce's React components. Only colour,
   type, border and spacing are touched. In particular the floating labels in
   the address form are left where they are: they are positioned in JavaScript
   against the input's focus state, and moving them breaks the animation and
   overlaps the typed value.
   ========================================================================== */

.wc-block-components-sidebar-layout {
  gap: 48px;
}

/* ------------------------------------------------- the steps down the left */

.wc-block-components-checkout-step {
  border: 0;
  padding-bottom: 36px;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--font-display) !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none !important;
}

.wc-block-components-checkout-step__heading {
  margin-bottom: 6px;
}

.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted-text);
  line-height: 1.55;
}

/* The step number WooCommerce prints beside each heading. Set in the label
   face so it reads as a mark rather than as body copy. */
.wc-block-components-checkout-step--with-step-number
  .wc-block-components-checkout-step__title::before {
  font-family: var(--font-label) !important;
  color: var(--gold-text) !important;
  font-size: 15px;
  font-weight: 500;
}

/* ------------------------------------------------------------ form fields */

.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='tel'],
.wc-block-components-text-input input[type='number'],
.wc-block-components-textarea,
.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-select__container select,
.wc-block-components-select .components-custom-select-control__button {
  background: var(--card) !important;
  border: 1px solid var(--rule-strong) !important;
  color: var(--body-text) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  padding: 22px 16px 8px !important;
  box-shadow: none !important;
  transition: border-color 0.16s ease;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox-control input.components-combobox-control__input:focus {
  border-color: var(--gold) !important;
  box-shadow: none !important;
}

/* The floating label: font and colour only. Position is WooCommerce's. */
.wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-block-components-select label {
  font-family: var(--font-label) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  color: var(--muted-text) !important;
  text-transform: none;
}

.wc-block-components-text-input.is-active label {
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text) !important;
}

.wc-block-components-validation-error {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #9d2c2c;
}

.cc-shop .wc-block-components-radio-control__input,
.cc-shop .wc-block-components-radio-control input[type='radio'] {
  margin-right: 10px;
  accent-color: var(--gold-deep);
}

.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--body-text);
}

.wc-block-components-checkbox__input[type='checkbox'] {
  border: 1px solid var(--rule-strong);
  background: var(--card);
}

.wc-block-components-checkbox__input[type='checkbox']:checked {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

/* -------------------------------------------------------- payment methods */

/*
 * The payment options.
 *
 * THE LEFT PADDING IS LOad-BEARING AND MUST NOT BE SHORTENED. WooCommerce
 * positions the radio button absolutely at left:16px and relies on the
 * option's own left padding to keep the label clear of it. An earlier
 * version of this rule set `padding: 16px 18px`, which looked harmless and
 * put the radio straight on top of the first few characters: "Fastlane Debit
 * & Credit Cards" rendered as "●tlane Debit & Credit Cards" and "PayPal" as
 * "●yPal". On the one screen where the customer is choosing how to pay, the
 * methods appeared to have corrupted names.
 *
 * 48px clears a 20px control at 16px with 12px of air after it.
 */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 16px 18px 16px 48px;
  margin-bottom: 10px;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--gold);
  background: var(--ivory);
}

/* PayPal's own buttons are PayPal's. Their shape and colour are prescribed by
   PayPal's brand rules and a customer recognises them by it, so the square
   corner rule above is given back here — this is the one place on the site
   where a rounded button is correct. */
.wc-block-components-express-payment .paypal-buttons,
.wc-block-components-express-payment .paypal-buttons *,
.ppcp-button-apm,
#ppc-button-ppcp-gateway,
#ppc-button-ppcp-gateway * {
  border-radius: revert !important;
}

.wc-block-components-express-payment {
  border: 1px solid var(--rule);
  background: var(--card);
  padding: 20px;
}

.wc-block-components-express-payment__title-container,
.wc-block-components-checkout-step__title + .wc-block-components-express-payment__event-buttons {
  font-family: var(--font-label);
}

/* The "or" divider between the express buttons and the card form. */
.wc-block-components-express-payment-continue-rule {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
  border-color: var(--rule-strong) !important;
}

/* ------------------------------------------------- the summary on the right */

/* The basket and the checkout name this panel differently — the checkout
   has an order-summary block inside the sidebar, the basket has the sidebar
   itself. Both get the same card, because to a customer they are the same
   thing in the same place. */
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar > .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar {
  background: var(--card);
  border: 1px solid var(--gold);
  padding: 4px 28px 24px;
}

.wc-block-components-order-summary__button-text,
.wc-block-cart__totals-title,
.wc-block-components-panel__button {
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text) !important;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name,
.wc-block-components-product-name {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600;
  color: var(--navy) !important;
  line-height: 1.2;
}

.wc-block-components-order-summary-item__total-price,
.wc-block-components-product-price__value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold-text);
  font-size: 18px;
}

.wc-block-components-order-summary-item__image img {
  border: 1px solid var(--rule);
  background: var(--paper);
}

/*
 * The product description, out of the order summary.
 *
 * WooCommerce prints each item's short description beside it, which in a
 * narrow sticky column turns one line into eight and pushes the total — the
 * only figure anyone is looking for there — below the fold. They read the
 * description on the product page; here they are checking what they chose
 * and what it costs.
 */
.wc-block-components-product-metadata__description {
  display: none;
}

.wc-block-components-totals-item {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted-text);
  padding-block: 9px;
}

.wc-block-components-totals-item__value { color: var(--body-text); }

.wc-block-components-totals-wrapper {
  border-top: 1px solid var(--rule) !important;
}

/* The one figure that matters on the page. */
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--gold) !important;
  padding-top: 18px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--gold-text);
  line-height: 1;
}

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

/*
 * One gold button per view. On checkout that is Place Order and nothing else,
 * so every other button here is navy or outlined — including Return to Basket
 * and Apply Coupon, which WooCommerce would otherwise render in the same
 * weight as the one action the page is for.
 */
.wc-block-components-button:not(.is-link) {
  font-family: var(--font-label) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 15px 36px !important;
  box-shadow: none;
  transition: background 0.18s ease, filter 0.18s ease;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  font-family: var(--font-label) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  background: var(--grad-gold-btn) !important;
  border: 1px solid var(--gold-deep) !important;
  color: var(--navy-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.26em !important;
  box-shadow: 0 4px 10px rgba(22, 33, 57, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  padding: 18px 40px !important;
  width: 100%;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover { filter: brightness(1.05); }

.wc-block-components-checkout-place-order-button:disabled,
.wc-block-components-button:disabled {
  filter: grayscale(0.55) brightness(0.95);
  box-shadow: none !important;
  cursor: not-allowed;
}

.wc-block-components-button.outlined,
.wc-block-components-button:not(.contained):not(.wc-block-components-checkout-place-order-button):not(.wc-block-cart__submit-button):not(.is-link) {
  background: transparent !important;
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
}

.wc-block-components-button.is-link {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

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

.wc-block-components-notice-banner {
  font-family: var(--font-body);
  font-size: 15px;
  border-width: 1px !important;
  border-left-width: 3px !important;
  background: var(--card) !important;
}

.wc-block-components-notice-banner.is-error   { border-color: #9d2c2c !important; }
.wc-block-components-notice-banner.is-success { border-color: var(--gold) !important; }
.wc-block-components-notice-banner.is-info    { border-color: var(--navy) !important; }

/* ------------------------------------------------------------ the basket */

.wc-block-cart-items__header {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-text);
  border-bottom: 1px solid var(--gold) !important;
}

.wc-block-cart-items__row,
.wc-block-cart-item__wrap {
  border-bottom: 1px solid var(--rule);
}

.wc-block-components-quantity-selector {
  border: 1px solid var(--rule-strong);
  background: var(--card);
}

.wc-block-components-quantity-selector__button {
  font-family: var(--font-label);
  color: var(--navy);
}

.wc-block-components-quantity-selector__input {
  font-family: var(--font-body);
  color: var(--body-text);
}

/*
 * There is deliberately no rule hiding the quantity stepper here.
 *
 * One was written on the assumption that a one-of-one coin would otherwise
 * offer a second of itself. Checked against the live basket: WooCommerce
 * renders no stepper at all on these products — .wc-block-cart-item__quantity
 * holds only the remove button — so the rule matched nothing and the premise
 * was wrong. Woo caps quantity at stock on its own.
 */

/* ==========================================================================
   PART TWO — THE VAULT (My Account, still the old shortcode)

   Different markup, different class names, a plain HTML table, and no
   relation to anything above. WooCommerce has never shipped a My Account
   block, so this is the 2013 template and it has to be styled as such.
   ========================================================================== */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

/*
 * Signing in and resetting a password are single forms with no navigation
 * beside them, so they drop the two-column grid.
 *
 * margin-inline is reset because Twenty Twenty-Five gives every child of a
 * constrained layout `margin-inline: auto`, and the moment a max-width is
 * added that turns into centring — leaving the form sitting 260px right of
 * the page title and the gold rule above it. The heading and the thing it
 * heads share an edge.
 */
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account.woocommerce-lost-password .woocommerce {
  display: block;
  max-width: 480px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gold);
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--rule);
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 2px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-text);
  text-decoration: none;
  transition: color 0.16s ease;
}

.woocommerce-MyAccount-navigation li a:hover { color: var(--navy); }

.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--gold-text);
  font-weight: 500;
}

.woocommerce-MyAccount-content p { font-size: 16px; }

/* ------------------------------------------------------- the orders table */

.woocommerce-orders-table,
.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  background: transparent;
}

.woocommerce-orders-table th,
.shop_table thead th {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-text);
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--gold);
}

.woocommerce-orders-table td,
.shop_table td {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--body-text);
  padding: 18px 14px 18px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

/* The purchase date is the reason the history was imported at all, so it is
   set in the label face and does not wrap. */
.woocommerce-orders-table__cell-order-date {
  font-family: var(--font-label) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  color: var(--muted-text) !important;
  white-space: nowrap;
}

.woocommerce-orders-table__cell-order-total,
.woocommerce-orders-table__cell-order-total * {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 600;
  color: var(--gold-text) !important;
}

.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-text);
}

/* --------------------------------------------- forms, buttons and notices */

.woocommerce form .form-row,
.woocommerce-EditAccountForm p { margin-bottom: 20px; }

.woocommerce form .form-row label,
.woocommerce-EditAccountForm label {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 8px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-EditAccountForm input.input-text,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  color: var(--body-text);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 15px;
  box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-EditAccountForm input.input-text:focus {
  border-color: var(--gold);
  outline: none;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 14px 32px;
  transition: background 0.18s ease;
}

.woocommerce .button:hover,
.woocommerce-Button:hover { background: rgba(22, 33, 57, 0.06); }

/* The one gold button in the Vault: signing in, and saving changes. */
.woocommerce button.woocommerce-form-login__submit,
.woocommerce .woocommerce-EditAccountForm button.button,
.woocommerce .woocommerce-ResetPassword button.button {
  background: var(--grad-gold-btn);
  border: 1px solid var(--gold-deep);
  color: var(--navy-deep);
  font-weight: 600;
  letter-spacing: 0.26em;
  box-shadow: 0 4px 10px rgba(22, 33, 57, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.woocommerce button.woocommerce-form-login__submit:hover { filter: brightness(1.05); }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  color: var(--body-text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 16px 20px;
  list-style: none;
  margin: 0 0 28px;
}

.woocommerce-error { border-left-color: #9d2c2c; }

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none; }

.woocommerce-form-login__rememberme {
  font-family: var(--font-body);
  font-size: 15px;
}

.woocommerce-LostPassword {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.woocommerce-address-fields__field-wrapper { margin-bottom: 12px; }

.woocommerce-Address-title h3 { font-size: 20px; margin-bottom: 10px; }


/*
 * Totals under the order table. The intermediate lines — carriage, a
 * discount — take the structural rule; the last row is the figure being
 * paid and takes the gold, in the display face, the same way the block
 * checkout's footer total does. Two gold lines on the table, not four.
 */
.shop_table tfoot th,
.shop_table tfoot td {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-text);
  border-bottom: 1px solid var(--rule);
  padding: 13px 14px 13px 0;
  text-align: left;
}

.shop_table tfoot tr:last-child th,
.shop_table tfoot tr:last-child td {
  border-top: 1px solid var(--gold);
  border-bottom: 0;
  padding-top: 18px;
}

.shop_table tfoot tr:last-child td {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-text);
  line-height: 1;
}

/*
 * A gap between a radio and its label that does not depend on there being a
 * newline between them in WooCommerce's template. There is one before the
 * PayPal label and none before Bank transfer, which is the sort of thing
 * that changes without warning in a plugin update.
 */
.cc-shop ul.wc_payment_methods li.wc_payment_method > input[type='radio'] {
  margin-right: 10px;
  accent-color: var(--gold-deep);
}
/* ==========================================================================
   PART THREE — THE ORDER-PAY PAGE, which is where our customers actually pay

   This is the page the Next.js basket sends people to. /api/checkout creates
   a pending order over the REST API and hands back Woo's own payment_url,
   which is /checkout/order-pay/{id}/?pay_for_order=true&key=… — and that URL
   does not render the Checkout block at all. It renders the classic
   checkout/form-pay.php template: form#order_review, a shop_table of the
   order, and ul.wc_payment_methods.

   So Part One above, for all its length, styles a page most Capital Coins
   customers will never see: the block checkout is only reached by somebody
   browsing shop.capitalcoins.co.uk directly. This part styles the one they
   will. Both are kept, because both are reachable.

   PAYPAL'S CARD FIELDS CANNOT BE STYLED FROM HERE AND THAT IS NOT A BUG.
   Card number, expiry and CVV are iframes served by PayPal, so this
   stylesheet stops at their edge — a payment form that a merchant's CSS
   could reach inside would not be PCI-compliant. What is styled below is the
   container each iframe sits in, which is what the eye actually reads as the
   field. The plugin samples the container's computed style and passes the
   properties PayPal supports through to the iframe, so colour, size, padding
   and weight do carry. The typeface does not: the woff2 is not loaded inside
   PayPal's document, so the digits fall back down the stack. That is why the
   body stack names Georgia second — the card number sets in Georgia, which
   sits beside Spectral far better than the Arial it would otherwise get.
   ========================================================================== */

.cc-shop form#order_review,
.cc-shop .woocommerce-order-pay {
  max-width: 640px;
}

.cc-shop table.order_details,
.cc-shop table.shop_table.order_details {
  width: 100%;
  margin-bottom: 36px;
}

.cc-shop .woocommerce-checkout-payment,
.cc-shop #payment {
  background: var(--card);
  border: 1px solid var(--gold);
  padding: 26px 28px;
}

.cc-shop ul.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * The payment methods, as a divided list rather than a stack of boxes.
 *
 * Each method was its own bordered card, which on a page that is already a
 * bordered box inside a bordered column put three frames around a radio
 * button. A hairline between rows says the same thing and leaves the eye on
 * the one decision being made.
 *
 * The row is the flex container, not the label: WooCommerce puts the radio
 * and the label side by side as siblings, so flexing the label alone drops it
 * onto the line below its own radio.
 */
.cc-shop ul.wc_payment_methods {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.cc-shop ul.wc_payment_methods li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 16px 2px;
}

.cc-shop ul.wc_payment_methods li.wc_payment_method:last-child {
  border-bottom: 0;
}

.cc-shop ul.wc_payment_methods li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  flex: 0 1 auto;
}

.cc-shop ul.wc_payment_methods li.wc_payment_method > .payment_box {
  flex: 1 0 100%;
  margin-top: 4px;
}

/*
 * The card brand marks, at 18px and on one line.
 *
 * PayPal supplies seven of them and at full size they wrapped, stranding Elo
 * and Hiper on a second row under the label like an afterthought. They are
 * not hidden, even the two that no British customer will use: a brand mark is
 * a statement about what the shop accepts, and quietly removing one to tidy
 * the row would be a small lie to anyone holding that card.
 */
.cc-shop .wc_payment_method label img {
  max-height: 18px;
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  opacity: 0.85;
}

.cc-shop ul.wc_payment_methods li.wc_payment_method label {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  cursor: pointer;
}

.cc-shop ul.wc_payment_methods li.wc_payment_method label img {
  display: inline-block;
  vertical-align: middle;
  max-height: 24px;
  width: auto;
  margin-left: 10px;
}

.cc-shop .payment_box {
  background: transparent !important;
  border-top: 1px solid var(--rule);
  margin: 14px 0 0;
  padding: 16px 0 4px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted-text);
}

/* WooCommerce draws a little arrow pointing up into the method's label. It
   is a rounded flourish on a page that has no other rounded anything. */
.cc-shop .payment_box::before { display: none !important; }

/* ------------------------------------------- PayPal's card field wrappers */

/*
 * The containers, not the inputs. Each of these holds an iframe; giving the
 * container the same border, ground and padding as every other field on the
 * site is what makes the card form look like it belongs to the shop.
 */
.cc-shop #ppcp-hosted-fields .card_number,
.cc-shop #ppcp-hosted-fields .card_expiry,
.cc-shop #ppcp-hosted-fields .card_cvc,
.cc-shop #ppcp-credit-card-gateway-card-number,
.cc-shop #ppcp-credit-card-gateway-card-expiry,
.cc-shop #ppcp-credit-card-gateway-card-cvc {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  padding: 4px 14px;
  min-height: 52px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--body-text);
  transition: border-color 0.16s ease;
}

.cc-shop #ppcp-hosted-fields .valid { border-color: var(--gold); }
.cc-shop #ppcp-hosted-fields .invalid { border-color: #9d2c2c; }

.cc-shop #ppcp-hosted-fields label {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 7px;
}

.cc-shop #ppcp-credit-card-vault + label,
.cc-shop label[for='ppcp-credit-card-vault'] {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--body-text);
}

/* ------------------------------------------------------- the pay button */

/* The one gold button on the page, and the last thing anybody presses. */
.cc-shop #place_order,
.cc-shop #ppcp-dcc-order-button,
.cc-shop button#place_order {
  width: 100%;
  margin-top: 22px;
  background: var(--grad-gold-btn);
  border: 1px solid var(--gold-deep);
  color: var(--navy-deep);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 18px 40px;
  box-shadow: 0 4px 10px rgba(22, 33, 57, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cc-shop #place_order:hover,
.cc-shop #ppcp-dcc-order-button:hover { filter: brightness(1.05); }

.cc-shop #place_order:disabled {
  filter: grayscale(0.55) brightness(0.95);
  box-shadow: none;
  cursor: not-allowed;
}

/* PayPal's own buttons keep PayPal's shape — see the note in Part One. */
.cc-shop .paypal-buttons,
.cc-shop .paypal-buttons * { border-radius: revert !important; }



/* ----------------------------------------- the two-column pay page (wide) */

/*
 * Shopify's checkout, which is what this is being measured against: the form
 * on the left, the order summary in a tinted panel on the right, the pair
 * centred on the page. WooCommerce ships order-pay as one narrow column, and
 * at 640px pinned to the left of a 1900px screen it reads as an unfinished
 * page rather than a deliberate one.
 *
 * The grid reorders rather than moves anything: form-pay.php emits the table
 * first and the payment box second, which is the right order on a phone —
 * see what you are buying, then pay for it — and the wrong one on a desktop.
 * Below 1000px the grid never applies and the source order stands.
 */
@media (min-width: 1000px) {
  .cc-shop .woocommerce {
    max-width: 1120px;
    margin-inline: auto;
  }

  .cc-shop form#order_review {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 400px;
    column-gap: 72px;
    align-items: start;
  }

  .cc-shop #order_review > #payment {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .cc-shop #order_review > table.shop_table {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 18px;
    /* It follows the customer down a long payment form, as Shopify's does.
       The total is the thing they are checking against. */
    position: sticky;
    top: 24px;
  }

  .cc-shop #order_review > .ppcp-messages {
    grid-column: 2;
    grid-row: 2;
  }

  /* The column is the container now, so the box inside it is not. Two nested
     borders around the same content is one more than the content needs. */
  .cc-shop #payment {
    background: transparent;
    border: 0;
    padding: 0;
  }
}

/* The summary, as a panel. border-collapse has to go or the background sits
   outside the border on the corner cells. */
.cc-shop #order_review > table.shop_table {
  background: var(--card);
  border: 1px solid var(--gold);
  border-collapse: separate;
  border-spacing: 0;
}

.cc-shop #order_review > table.shop_table th,
.cc-shop #order_review > table.shop_table td {
  padding-left: 22px;
  padding-right: 22px;
}

.cc-shop #order_review > table.shop_table thead th { padding-top: 18px; }

.cc-shop #order_review > table.shop_table tfoot tr:last-child th,
.cc-shop #order_review > table.shop_table tfoot tr:last-child td {
  padding-bottom: 20px;
}

/* The order-pay page carries no heading, so the full section padding above it
   is just a gap. */
.cc-shop.woocommerce-order-pay main { padding-top: 40px; }
/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .woocommerce-page main,
  .woocommerce-cart main,
  .woocommerce-checkout main,
  .woocommerce-account main {
    padding: 32px 18px 0;
  }

  .wc-block-components-sidebar-layout { gap: 32px; }

  .cc-masthead__inner {
    grid-template-columns: 1fr auto;
    padding: 14px 18px;
    gap: 12px;
  }

  /* The back link goes first on a phone, because the logo takes the middle
     column's place and there is no room for three. */
  .cc-masthead__back { display: none; }
  .cc-masthead__brand { justify-self: start; }
  .cc-masthead__brand img { height: 52px; }
  .cc-masthead__phone strong { font-size: 14px; }

  /* The Vault's navigation stacks above its content rather than beside it. */
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /*
   * The orders table, reflowed. A five-column table at 375px either scrolls
   * sideways or crushes the coin's name to three characters, and this is the
   * page a client visits to look at what they own. Each order becomes a
   * block with its own label against each value.
   */
  .woocommerce-orders-table thead,
  .my_account_orders thead { display: none; }

  .woocommerce-orders-table tr,
  .my_account_orders tr {
    display: block;
    border: 1px solid var(--rule);
    background: var(--card);
    padding: 16px 18px;
    margin-bottom: 14px;
  }

  .woocommerce-orders-table td,
  .my_account_orders td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    border: 0;
    text-align: right;
  }

  .woocommerce-orders-table td::before,
  .my_account_orders td::before {
    content: attr(data-title);
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-text);
    text-align: left;
    flex: 0 0 auto;
  }

  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions,
  .my_account_orders td.woocommerce-orders-table__cell-order-actions {
    display: block;
    text-align: left;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    margin-top: 8px;
  }

  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
    content: none;
  }

  .woocommerce .button { width: 100%; }

  .cc-foot { margin-top: 48px; font-size: 10.5px; }
}

/* ------------------------------------------- a coin beside its order line */

/*
 * Paired with the woocommerce_order_item_name filter in functions.php, which
 * is the only way to get a photograph into WooCommerce's order table — the
 * template prints a name and a price and no image at all.
 *
 * Not cropped square. These are portrait photographs of slabbed coins and the
 * certification label sits across the top, which is the first thing a
 * collector looks for and the first thing a square crop removes. The frame is
 * a fixed width with the height left alone, so a half sovereign and a 5oz
 * proof both sit correctly rather than both being squashed to the same box.
 */
.cc-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cc-line__media {
  flex: 0 0 54px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 3px;
}

.cc-line__media img,
.cc-line .cc-line__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.cc-line__name {
  flex: 1 1 auto;
  padding-top: 2px;
}

@media (max-width: 700px) {
  .cc-line__media { flex-basis: 44px; }
  .cc-line { gap: 11px; }
}