/* ==========================================================================
   WooCommerce
   Written to override Woo's defaults through the theme's own tokens rather
   than fighting its stylesheet with !important.
   ========================================================================== */

/* Shop and category grids ------------------------------------------------ */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important;   /* Woo sets a percentage width inline for floats. */
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  text-align: center;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.2s;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

/* Product photography is shot on white; contain avoids cropping heads off. */
.woocommerce ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-0);
  padding: 0;
  line-height: 1.35;
}
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product .price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--gold-deep);
  margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--ink-faint); font-size: 0.85em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  background: var(--gold);
  color: var(--dark);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.8rem;
  margin: var(--sp-2) 0 0;
  transition: background-color 0.2s, transform 0.25s var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--gold-light);
  color: var(--dark);
  transform: translateY(-2px);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  background: var(--dark);
  color: #fff;
}
/* Ink and dark are both brand Black now, so the add-to-cart hover moves to
   gold rather than staying still. Black on gold clears AA at 6.5:1. */
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover { background: var(--gold); color: var(--brand-black); }
.woocommerce a.button.wc-forward { background: transparent; color: var(--gold-deep); }

.woocommerce span.onsale {
  background: var(--dark);
  color: var(--gold-light);
  border-radius: var(--radius-pill);
  font-weight: 700;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 0.45rem 0.9rem;
  top: var(--sp-3);
  left: var(--sp-3);
  margin: 0;
}

/* Single product --------------------------------------------------------- */

.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product .summary { width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.12;
  padding: 0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--gold-deep);
  margin-block: var(--sp-3);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink-soft);
  max-width: 46ch;
}
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--radius); background: #fff; }

.woocommerce div.product form.cart { margin-block: var(--sp-5); }
.woocommerce div.product form.cart .variations { margin-bottom: var(--sp-4); }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: var(--sp-2) 0; display: block; text-align: left; }
.woocommerce div.product form.cart .variations label { font-weight: 700; font-size: 1rem; }
.woocommerce div.product form.cart .variations select {
  font: inherit;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  min-width: 14rem;
  max-width: 100%;
}
.woocommerce div.product form.cart .button { padding-inline: 2.4rem; }
.woocommerce .quantity .qty {
  font: inherit;
  padding: 0.7rem 0.5rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  width: 4.5rem;
}

.size-help { margin: var(--sp-3) 0 var(--sp-4); display: flex; flex-direction: column; gap: 0.15rem; }
.size-help a { font-size: 1rem; }
.size-help span { font-size: 1rem; color: var(--ink-soft); }

.product-reassurance {
  list-style: none;
  padding: var(--sp-4) 0 0;
  margin: var(--sp-4) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 1rem;
  color: var(--ink-soft);
}
.product-reassurance li { position: relative; padding-left: 1.5rem; }
.product-reassurance li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* Tabs ------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.woocommerce div.product .woocommerce-tabs .panel { max-width: 70ch; }
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { display: none; }

/* Cart and checkout ------------------------------------------------------ */

.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--surface); font-weight: 700; }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { padding: var(--sp-4); }
.woocommerce table.cart img { width: 72px; border-radius: var(--radius-sm); background: #fff; }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.woocommerce-checkout #order_review_heading { margin-top: var(--sp-6); }

/* Basket layout ----------------------------------------------------------
   The basket renders through the generic page template, so it lands inside
   .prose, which is capped at reading width. A cart is not prose: squeezed
   to 68ch the totals box drops below the table and off the bottom of the
   screen, which means the two things the customer came to check, the total
   and the checkout button, can only be found by scrolling.

   So cart and checkout drop the reading cap, and from 900px the totals sit
   beside the table. Sticky is on the column rather than the box inside it:
   a grid item with align-items:start is only as tall as its content, so a
   sticky box within it has no room to travel and simply scrolls away. The
   column's grid area spans the full row, which is what gives it something
   to stick against. It earns its keep on a two bra basket, which is the
   one the upsell notice is asking for.

   The top padding is trimmed here too. Ninety-six pixels of air suits a
   content page; on a checkout step it just pushes the price below the fold.
*/
.woocommerce-cart .prose,
.woocommerce-checkout .prose { max-width: none; }

@media (min-width: 900px) {
  .woocommerce-cart .site-main.section,
  .woocommerce-checkout .site-main.section { padding-block-start: var(--sp-6); }

  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.85fr);
    gap: var(--sp-5) var(--sp-6);
    align-items: start;
  }

  /* Messages, and the hidden attribution element, span both columns. */
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce > .woocommerce-info,
  .woocommerce-cart .woocommerce > .woocommerce-message,
  .woocommerce-cart .woocommerce > .woocommerce-error,
  .woocommerce-cart .woocommerce > wc-order-attribution-inputs { grid-column: 1 / -1; }

  .woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; margin-bottom: 0; }

  .woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 2;
    width: 100%;
    margin: 0;
    position: sticky;
    top: 5.75rem; /* clears the sticky 74px header */
  }
  /* WooCommerce floats this at 48% of the old full-width row. */
  .woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }
}

.woocommerce form .form-row { padding: 0; margin-bottom: var(--sp-4); }
.woocommerce form .form-row label { font-weight: 700; font-size: 1rem; margin-bottom: var(--sp-2); display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  font: inherit;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  height: auto;
  line-height: 1.5;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: oklch(55% 0.16 25); }

.vat-callout { margin-bottom: var(--sp-5); }

/* Messages --------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 0;
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-message { background: var(--ok-wash); }
.woocommerce-info { background: var(--note-wash); }
.woocommerce-error { background: var(--warn-wash); }
.woocommerce-message .button,
.woocommerce-info .button { margin: 0 0 0 auto; }

/* Home product cards (theme markup, not Woo's) --------------------------- */

.shop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.shop-offer { font-size: 1rem; color: var(--ink-soft); }
.shop-offer code {
  font-family: inherit;
  font-weight: 700;
  color: var(--gold-deep);
  border: 1px dashed var(--gold);
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  text-align: center;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.2s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.product-card__media img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: var(--radius-sm); width: 100%; }
.product-card h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); margin-top: var(--sp-3); }
.product-card h3 a { text-decoration: none; color: inherit; }
.product-card__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--gold-deep); }
.product-card .btn { margin-top: var(--sp-3); align-self: center; }

/* Sizing page layout ----------------------------------------------------- */

.finder-layout { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: var(--sp-7); }
.finder-aside { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 90px; }
.finder-aside img { border-radius: var(--radius); background: var(--card); }
@media (max-width: 900px) {
  .finder-layout { grid-template-columns: 1fr; }
  .finder-aside { position: static; }
}

.size-chart { margin-top: var(--sp-7); }
.size-chart figcaption { font-size: 1rem; color: var(--ink-soft); margin-bottom: var(--sp-3); max-width: 60ch; }
.size-chart__key { font-size: 1rem; color: var(--ink-faint); margin-top: var(--sp-3); }

.finder__alt summary { cursor: pointer; font-weight: 700; padding: var(--sp-3) 0; }
.finder__alt[open] summary { margin-bottom: var(--sp-3); }

.size-band { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 800px) { .size-band { grid-template-columns: 1fr; } }

/* Search form ------------------------------------------------------------ */

.search-form__row { display: flex; gap: var(--sp-2); }
.search-form .search-field {
  font: inherit;
  flex: 1 1 auto;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
}

/* ==========================================================================
   Shop page: header, facts and the sections under the grid
   The shop opened straight onto a product grid with no H1 and no statement of
   what was being sold. These are the parts that were missing.
   ========================================================================== */

.shop-intro {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
/*
  Copy beside the photograph, facts running the full width underneath. Putting
  all three in one row squeezed the portrait into a slot too narrow to read a
  face in, which defeats the point of having commissioned it.
*/
@media (min-width: 900px) {
  .shop-intro { grid-template-columns: 1.15fr 0.85fr; }
  .shop-intro .shop-facts { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}

.shop-intro__media { margin: 0; }
.shop-intro__media img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  /* Her face sits high in the frame; a centred crop takes the top of her head. */
  object-position: 50% 18%;
  border-radius: 200px 200px var(--radius) var(--radius);
}
@media (max-width: 899px) {
  .shop-intro__media { max-width: 420px; }
  .shop-intro__media img { aspect-ratio: 4 / 3.6; border-radius: var(--radius); }
}

.shop-intro h1 { margin-top: var(--sp-3); }
.shop-intro .lede { margin-top: var(--sp-5); max-width: 56ch; }
.shop-intro .hero__cta { margin-top: var(--sp-5); }

/*
  The multibuy line. Set as a statement rather than a promotional flash: the
  discount is automatic, so it is a fact about the basket, not a coupon to
  chase. The gold wash keeps it findable without shouting at somebody who is
  buying a medical garment.
*/
.shop-intro__offer {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 56ch;
}
.shop-intro__offer strong { display: block; }

/* Four facts, stacked beside the copy on desktop and below it on a phone. */
.shop-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 560px) and (max-width: 899px) {
  .shop-facts { grid-template-columns: 1fr 1fr; }
}
.shop-facts li {
  border-top: 2px solid var(--gold);
  padding-top: var(--sp-3);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.shop-facts strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 0.15rem; }

/* Under the grid. */
.shop-outro { padding-bottom: 0; }
.shop-help {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
}
.shop-help .callout { margin: 0; }

.shop-quote {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.shop-quote > p:first-child {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.4;
  max-width: 34ch;
  margin-inline: auto;
}
.shop-quote .quote-attr { margin-top: var(--sp-4); }
.shop-quote__more { margin-top: var(--sp-5); }

/*
  Loop images are a mixed set: three tight torso crops shot on white and one
  packshot with its own logo and ribbon baked in. Contain rather than cover
  keeps every one whole, and a floor height stops the shorter packshot from
  collapsing its card relative to the others.
*/
.woocommerce ul.products li.product img {
  padding: var(--sp-3);
  min-height: 180px;
}

/* "Select options" says nothing about what is being chosen. */
.woocommerce ul.products li.product .button { margin-top: auto; }

/* ==========================================================================
   Checkout: choosing how to pay
   Customers were telephoning to say they could not pay by card. They could,
   but the option was last in a quiet list and its label read as another
   PayPal choice. The theme reorders and relabels it; this makes the list
   itself legible enough that the choice is obvious.
   ========================================================================== */

/*
  Stripe decides whether to draw its card form light or dark by sampling a
  colour off this page. It walks a list of selectors, takes the first one
  that is not fully transparent, and asks whether that colour is light. The
  two it tries first sit inside the payment row and are transparent, so it
  landed on #payment, which WooCommerce leaves at rgba(129,110,153,0.14).
  Stripe's test ignores the alpha, so it read that barely-there lilac as a
  solid dark purple, brightness 120 against a threshold of 128, and answered
  with its night theme: a blacked-out card form on a cream page. An opaque
  surface colour here measures 240 and settles it. It also removes a mauve
  cast that was never in the palette.
*/
.woocommerce-checkout #payment { background: var(--surface); }

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--sp-3);
}

/*
  Each method is a card rather than a bare radio row. A tappable target the
  size of the whole row also matters here: this is a checkout used one-handed
  by women who have had shoulder surgery.
*/
.woocommerce-checkout #payment ul.payment_methods > li {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin: 0;
  transition: border-color 0.2s, background-color 0.2s;
}
.woocommerce-checkout #payment ul.payment_methods > li:hover { border-color: var(--line-strong); }

/* The chosen method should be unmistakable before anyone presses pay. */
.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
  border-color: var(--gold-deep);
  background: var(--gold-wash);
}

.woocommerce-checkout #payment ul.payment_methods label {
  font-weight: 700;
  font-size: var(--step-0);
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
  margin-right: var(--sp-3);
  accent-color: var(--gold-deep);
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: -0.15rem;
}

/*
  Woo hides the description until its method is selected, so this is the
  reassurance a hesitating customer sees at the moment she needs it.
*/
.woocommerce-checkout #payment div.payment_box {
  background: transparent;
  margin: var(--sp-3) 0 0;
  padding: 0 0 0 1.95rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* PayPal renders its buttons in an iframe and their styling cannot be
   overridden, so give them room rather than fighting them. */
.woocommerce-checkout #payment div.payment_box .ppc-button-wrapper,
.woocommerce-checkout #payment div.payment_box [id^="ppc-button"] { margin-top: var(--sp-4); }

/*
  While the order is being placed, WooCommerce covers the form with a 60%
  white overlay at z-index 1000. The button sits above it so it stays legible
  and obviously alive, rather than fading out with everything else at exactly
  the moment the customer is wondering whether anything happened.
*/
#place_order.is-placing { position: relative; z-index: 1001; cursor: progress; }
#place_order .btn-spin {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.6em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -0.18em;
  animation: rh-spin 0.7s linear infinite;
}
@keyframes rh-spin { to { transform: rotate(360deg); } }

/* The button is floated right, so the note needs to clear it to sit beneath. */
.place-order-note {
  clear: both;
  margin: var(--sp-3) 0 0;
  text-align: right;
  color: var(--ink-soft);
  font-size: 1rem;
  position: relative;
  z-index: 1001;
}

/* Reduced motion still needs a sign of life, so slow it rather than stop it. */
@media (prefers-reduced-motion: reduce) {
  #place_order .btn-spin { animation-duration: 2.4s; }
}

/* The including-VAT note beside prices: present, quiet, never shouting. */
.price-vat-note { font-size: 0.85em; font-weight: 400; color: var(--ink-faint); margin-left: 0.35em; }