/*
 * WooCommerce surfaces: shop, product, cart, checkout and account, in brand clothes.
 * Authored mobile-first: base rules target 390px, min-width queries add the wider layouts.
 * WooCommerce's own button skin is switched off through the
 * `woocommerce-block-theme-has-button-styles` body class (see inc/woocommerce.php).
 */
/*
 * Cart, checkout and order-received carry `.cp-section.cp-woo`; My Account carries
 * `.cp-section.cp-page`, which had no rule at all and fell through to the 2xl section
 * rhythm — the flow jumped from 64px to 128px between neighbouring pages. Both shells
 * now share one token, with two classes so neither depends on stylesheet order.
 */
.cp-section.cp-woo,
.cp-section.cp-page {
  padding-block: var(--cp-space-xl);
}

.cp-woo {
  padding-block: var(--cp-space-xl);
}

.cp-woo .woocommerce-breadcrumb {
  margin-bottom: var(--cp-space-md);
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
}

.cp-woo h1,
.cp-woo h2.woocommerce-loop-product__title,
.cp-woo .product_title {
  font-family: var(--cp-font-display);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
}

.cp-woo h1,
.cp-woo .product_title {
  font-size: var(--cp-display-md);
}

/*
 * page.php nests the title inside .cp-container, so `.cp-woo > h1` matched nothing and
 * every page in the purchase flow had its heading glued to the content below it.
 */
.cp-woo h1.cp-section__title,
.cp-woo .entry-title {
  margin-bottom: var(--cp-space-md);
}

.cp-woo .woocommerce-products-header__title {
  margin-bottom: var(--cp-space-md);
}

/* Product grid */
.cp-woo ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--cp-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-woo ul.products::before,
.cp-woo ul.products::after {
  content: none;
}

.cp-woo ul.products li.product {
  width: auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cp-line);
  background: var(--cp-sheet);
  float: none;
  transition: border-color var(--cp-duration) var(--cp-ease);
}

.cp-woo ul.products li.product:hover {
  border-color: var(--cp-ink);
}

.cp-woo ul.products li.product > a {
  display: block;
  text-decoration: none;
}

.cp-woo ul.products li.product img {
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  background: var(--cp-slot);
  object-fit: contain;
}

.cp-woo ul.products li.product .woocommerce-loop-product__title {
  padding: var(--cp-space-sm) var(--cp-space-sm) 0;
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-md);
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}

.cp-woo ul.products li.product .price {
  display: block;
  padding: 0 var(--cp-space-sm);
  color: var(--cp-ink);
  font-size: var(--cp-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cp-woo ul.products li.product .price del {
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
  font-weight: 500;
}

.cp-woo ul.products li.product .button {
  margin: var(--cp-space-sm);
}

.cp-woo .onsale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--cp-ink);
  border-radius: 0;
  background: var(--cp-amber);
  color: var(--cp-ink);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  line-height: 1.5rem;
}

/* Buttons — race-plate blocks, 48px touch target minimum. */
.cp-woo .button,
.cp-woo button.button,
.cp-woo input.button,
.cp-woo a.button,
.cp-woo .woocommerce-button,
.woocommerce-message .button,
.woocommerce-info .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 2px solid var(--cp-ink);
  border-radius: 0;
  background: var(--cp-ink);
  color: var(--cp-sheet);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--cp-duration) var(--cp-ease),
    color var(--cp-duration) var(--cp-ease);
}

.cp-woo .button:hover,
.cp-woo button.button:hover,
.cp-woo a.button:hover {
  background: var(--cp-amber);
  color: var(--cp-ink);
}

.cp-woo .button.alt,
.cp-woo button.button.alt,
.cp-woo .checkout-button,
.cp-woo #place_order {
  background: var(--cp-amber);
  border-color: var(--cp-ink);
  color: var(--cp-ink);
}

.cp-woo .button.alt:hover,
.cp-woo button.button.alt:hover,
.cp-woo .checkout-button:hover,
.cp-woo #place_order:hover {
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

.cp-woo .button:disabled,
.cp-woo button.button:disabled,
.cp-woo .button[disabled] {
  border-color: var(--cp-line);
  background: var(--cp-line);
  color: var(--cp-graphite);
  cursor: not-allowed;
  opacity: 1;
}

/* Form controls */
.cp-woo input[type='text'],
.cp-woo input[type='email'],
.cp-woo input[type='tel'],
.cp-woo input[type='number'],
.cp-woo input[type='password'],
.cp-woo input[type='search'],
.cp-woo textarea,
.cp-woo select,
.cp-woo .select2-container .select2-selection--single {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--cp-line);
  border-radius: 0;
  background: var(--cp-sheet);
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  /* Never below 16px, or iOS zooms the page on focus. */
  font-size: max(1rem, var(--cp-text-md));
  transition: border-color var(--cp-duration) var(--cp-ease);
}

.cp-woo textarea {
  min-height: 6rem;
  line-height: 1.5;
  resize: vertical;
}

.cp-woo input:hover,
.cp-woo textarea:hover,
.cp-woo select:hover {
  border-color: var(--cp-graphite);
}

.cp-woo input:focus,
.cp-woo textarea:focus,
.cp-woo select:focus,
.cp-woo input:focus-visible,
.cp-woo textarea:focus-visible,
.cp-woo select:focus-visible {
  border-color: var(--cp-ink);
  outline: 3px solid var(--cp-amber);
  outline-offset: 2px;
}

.cp-woo label {
  display: block;
  margin-bottom: var(--cp-space-2xs);
  font-size: var(--cp-text-sm);
  font-weight: 600;
}

.cp-woo label .required {
  color: var(--cp-danger);
  text-decoration: none;
}

.cp-woo label .optional {
  color: var(--cp-graphite);
  font-weight: 400;
}

.cp-woo .quantity input.qty {
  width: 5rem;
  text-align: center;
}

/* Single product */
.cp-woo div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/*
 * WooCommerce ships `.woocommerce div.product div.summary { float: right; width: 48% }`,
 * which outranks a two-class selector — that is why both columns sat at 301px inside a
 * 628px grid track. Match its shape and add one class so ours wins without !important.
 */
.cp-woo div.product div.images.woocommerce-product-gallery,
.cp-woo div.product div.summary.entry-summary {
  width: 100%;
  margin: 0;
  float: none;
}

/*
 * The gallery was pinned so the photo would follow the long buy column. It cannot be:
 * Chrome clamps a sticky grid item to the grid CONTAINER, not to its grid area, so the
 * photo travelled down through rows 2 and 3 and painted over the description band and
 * the tabs — 14 overlaps across a scroll sweep, worst 289px (tests/e2e sticky-overlap).
 * Explicit `grid-row` on the columns does not change it; only a wrapper around gallery
 * and summary would, and that needs a WooCommerce template override.
 */
@media (min-width: 900px) {
  .cp-woo div.product div.images.woocommerce-product-gallery {
    align-self: start;
  }
}

/* A 1116px tall photo made the page feel like it had two scrollbars. */
.cp-woo div.product .woocommerce-product-gallery__image img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: var(--cp-slot);
}

.cp-woo div.product .woocommerce-product-gallery__wrapper {
  margin: 0;
}

.cp-woo div.product div.images .flex-control-nav.flex-control-thumbs {
  display: grid;
  /* Fills the row whatever the gallery holds, instead of orphaning the last thumb. */
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: var(--cp-space-2xs);
  margin: var(--cp-space-2xs) 0 0;
  padding: 0;
}

/* WooCommerce floats each thumb at 25%, which inside our grid made them 25px wide. */
.cp-woo div.product div.images .flex-control-nav.flex-control-thumbs li {
  width: 100%;
  margin: 0;
  float: none;
  list-style: none;
}

.cp-woo div.product div.images .flex-control-nav.flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity var(--cp-duration) var(--cp-ease);
}

.cp-woo div.product div.images .flex-control-nav.flex-control-thumbs img.flex-active,
.cp-woo div.product div.images .flex-control-nav.flex-control-thumbs img:hover {
  opacity: 1;
}

.cp-pdp-longdesc {
  max-width: 46rem;
}

/*
 * One 46rem column under a 1312px row left ~576px of dead white beside it. The
 * description is heading-led, so each heading becomes a block and the band fills the
 * row. auto-fit keeps one column on a phone and absorbs a fourth section for free.
 */
.cp-pdp-longdesc--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--cp-space-md) var(--cp-space-lg);
  max-width: none;
}

.cp-pdp-block {
  padding-top: var(--cp-space-sm);
  border-top: var(--cp-border) solid var(--cp-ink);
}

.cp-pdp-block > :first-child {
  margin-top: 0;
}

.cp-pdp-block > :last-child {
  margin-bottom: 0;
}

.cp-pdp-longdesc h2,
.cp-pdp-longdesc h3 {
  margin-top: var(--cp-space-md);
  font-size: var(--cp-text-lg);
  font-weight: 600;
}

.cp-pdp-block h2,
.cp-pdp-block h3 {
  margin-bottom: var(--cp-space-2xs);
}

.cp-pdp-longdesc ul,
.cp-pdp-longdesc ol {
  margin: var(--cp-space-xs) 0;
  padding-left: 1.25rem;
}

.cp-pdp-longdesc li {
  margin-bottom: 0.25rem;
}

.cp-woo div.product .cp-pdp-longdesc,
.cp-woo div.product .woocommerce-tabs,
.cp-woo div.product .related,
.cp-woo div.product .up-sells,
.cp-woo div.product .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

/* Variation picker */
.cp-woo div.product .variations {
  width: 100%;
  margin-block: var(--cp-space-md);
  border-collapse: collapse;
}

.cp-woo div.product .variations th,
.cp-woo div.product .variations td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.cp-woo div.product .variations th.label {
  margin-bottom: var(--cp-space-2xs);
  font-size: var(--cp-text-sm);
  font-weight: 600;
}

.cp-woo div.product .variations .reset_variations {
  display: inline-block;
  margin-top: var(--cp-space-2xs);
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
}

.cp-woo div.product .woocommerce-variation-price {
  margin-bottom: var(--cp-space-sm);
}

/*
 * The buy column runs on a 24px scale, and two seams broke it: the short description sat
 * flush against the variations form at 0px, and WooCommerce's own `form.cart` bottom
 * margin landed at 34px. `div.summary form.cart` is (0,3,3) against core's (0,3,2), so
 * this does not depend on stylesheet order.
 */
.cp-woo div.product div.summary .woocommerce-product-details__short-description {
  margin-bottom: var(--cp-space-md);
}

.cp-woo div.product div.summary form.cart {
  margin-bottom: var(--cp-space-md);
}

/* An empty SKU line ("SKU: N/D") is noise on a made-to-order product. */
.cp-woo div.product .product_meta .sku_wrapper:has(.sku:empty),
.cp-woo div.product .product_meta .sku_wrapper .sku:empty {
  display: none;
}

.cp-woo div.product .product_meta {
  margin-top: var(--cp-space-md);
  padding-top: var(--cp-space-sm);
  border-top: 1px solid var(--cp-line);
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
}

.cp-woo div.product p.price,
.cp-woo div.product span.price {
  color: var(--cp-ink);
  font-size: var(--cp-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*
 * WooCommerce styles these at `.woocommerce div.product .woocommerce-tabs ul.tabs li`
 * — (0,3,3) — so the two-element version of these rules never applied and the tabs kept
 * shipping the core lilac pills with 4px corners. `div.woocommerce-tabs` adds the element
 * that wins. The brand is square, so a radius needs a reason.
 */
.cp-woo div.product div.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-2xs);
  margin: 0 0 var(--cp-space-md);
  padding: 0;
  border-bottom: var(--cp-border) solid var(--cp-ink);
}

.cp-woo div.product div.woocommerce-tabs ul.tabs::before,
.cp-woo div.product div.woocommerce-tabs ul.tabs::after,
.cp-woo div.product div.woocommerce-tabs ul.tabs li::before,
.cp-woo div.product div.woocommerce-tabs ul.tabs li::after {
  content: none;
  border: 0;
  box-shadow: none;
}

.cp-woo div.product div.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp-woo div.product div.woocommerce-tabs ul.tabs li.active {
  background: var(--cp-ink);
}

.cp-woo div.product div.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.625rem 1rem;
  color: var(--cp-ink);
  font-size: var(--cp-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.cp-woo div.product div.woocommerce-tabs ul.tabs li.active a {
  color: var(--cp-sheet);
}

/* Tables: cart, checkout, orders */
.cp-woo table.shop_table,
.cp-woo table.woocommerce-orders-table {
  width: 100%;
  margin: 0;
  border: 2px solid var(--cp-ink);
  border-collapse: collapse;
  border-radius: 0;
  background: var(--cp-sheet);
}

.cp-woo table.shop_table th,
.cp-woo table.shop_table td,
.cp-woo table.woocommerce-orders-table th,
.cp-woo table.woocommerce-orders-table td {
  padding: var(--cp-space-sm);
  border-bottom: 1px solid var(--cp-line);
  font-size: var(--cp-text-sm);
  text-align: left;
  vertical-align: middle;
}

.cp-woo table.shop_table thead th,
.cp-woo table.woocommerce-orders-table thead th {
  background: var(--cp-page);
  border-bottom: 2px solid var(--cp-ink);
  font-size: var(--cp-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cp-woo table.shop_table tbody tr:last-child th,
.cp-woo table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

.cp-woo table.shop_table .amount,
.cp-woo table.shop_table .woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cp-woo table.shop_table tfoot th,
.cp-woo table.shop_table tfoot td {
  background: var(--cp-page);
  font-weight: 600;
}

.cp-woo table.shop_table tfoot .order-total th,
.cp-woo table.shop_table tfoot .order-total td {
  border-bottom: none;
  font-size: var(--cp-text-md);
  font-weight: 700;
}

.cp-woo .cart_totals h2,
.cp-woo #order_review_heading,
.cp-woo .woocommerce-billing-fields h3,
.cp-woo .woocommerce-additional-fields h3,
.cp-woo .woocommerce-column__title,
.cp-woo .woocommerce-order-details__title,
.cp-woo .woocommerce-order-downloads__title {
  margin-bottom: var(--cp-space-sm);
  font-family: var(--cp-font-display);
  font-size: var(--cp-text-xl);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Notices — same block language as the rest of the site. */
.cp-woo .woocommerce-message,
.cp-woo .woocommerce-info,
.cp-woo .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cp-space-sm);
  margin: 0 0 var(--cp-space-md);
  padding: var(--cp-space-sm) var(--cp-space-md);
  border: 2px solid var(--cp-ink);
  border-left-width: 6px;
  border-radius: 0;
  background: var(--cp-sheet);
  font-size: var(--cp-text-sm);
  list-style: none;
}

.cp-woo .woocommerce-message {
  border-left-color: var(--cp-amber);
}

.cp-woo .woocommerce-error {
  border-left-color: var(--cp-danger);
}

.cp-woo .woocommerce-error li {
  margin: 0;
  list-style: none;
}

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

.cp-woo .woocommerce-message .button,
.cp-woo .woocommerce-info .button {
  margin-left: auto;
}

/* Field-level validation: never colour alone — the message text carries the meaning. */
.cp-woo .woocommerce-invalid input.input-text,
.cp-woo .woocommerce-invalid select,
.cp-woo .woocommerce-invalid textarea {
  border-color: var(--cp-danger);
}

.cp-woo .woocommerce-validated input.input-text {
  border-color: var(--cp-graphite);
}

/* ------------------------------------------------------------------ *
 * Cart
 * ------------------------------------------------------------------ */
.cp-woo .woocommerce-cart-form {
  margin-bottom: var(--cp-space-lg);
}

.cp-woo table.cart img {
  width: 4rem;
  height: auto;
  background: var(--cp-page);
}

/*
 * WooCommerce's small-screen table (max-width: 768px) hides the thumbnail; the piece is
 * the point here, so it comes back. Restored to a normal cell in the 768px query below.
 */
.cp-woo table.shop_table_responsive tr td.product-thumbnail {
  display: block;
  text-align: right;
}

.cp-woo table.shop_table_responsive tr td.product-thumbnail::before {
  content: none;
}

.cp-woo table.cart td.product-thumbnail img {
  display: inline-block;
  width: 5rem;
  margin-left: auto;
}

.cp-woo table.cart td.product-name a {
  font-weight: 600;
  text-decoration: none;
}

.cp-woo table.cart td.product-name a:hover {
  text-decoration: underline;
}

/*
 * WooCommerce core ships `a.remove { color: var(--wc-red) !important }`
 * (plugins/woocommerce/assets/css/woocommerce.css). An important declaration can only be
 * beaten by another important one — no selector, however specific, outranks it — so the
 * two colours below carry the flag and nothing else in this rule does.
 */
.cp-woo table.cart a.remove {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--cp-line);
  border-radius: 0;
  background: var(--cp-sheet);
  color: var(--cp-ink) !important;
  font-size: var(--cp-text-md);
  line-height: 1;
}

.cp-woo table.cart a.remove:hover {
  border-color: var(--cp-ink);
  background: var(--cp-ink);
  color: var(--cp-sheet) !important;
}

/* Coupon row: quiet, collapsed onto one line, never competing with checkout. */
.cp-woo table.cart td.product-remove {
  width: 3.5rem;
}

.cp-woo table.cart td.product-thumbnail {
  width: 6rem;
}

.cp-woo table.shop_table_responsive tr td.actions,
.cp-woo table.cart td.actions {
  padding: var(--cp-space-sm);
  background: var(--cp-page);
  text-align: left;
}

.cp-woo table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-2xs);
  margin-bottom: var(--cp-space-xs);
}

.cp-woo table.cart td.actions .coupon label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cp-woo table.cart td.actions .coupon input#coupon_code {
  flex: 1 1 8rem;
  width: auto;
  min-width: 0;
  font-size: max(1rem, var(--cp-text-sm));
}

.cp-woo table.cart td.actions > .button {
  width: 100%;
}

.cp-woo table.cart td.actions .coupon .button,
.cp-woo table.cart td.actions > .button {
  flex: 0 0 auto;
  min-height: 3rem;
  border-color: var(--cp-line);
  background: transparent;
  color: var(--cp-ink);
  font-size: var(--cp-text-sm);
  font-weight: 500;
}

.cp-woo table.cart td.actions .coupon .button:hover,
.cp-woo table.cart td.actions > .button:hover {
  border-color: var(--cp-ink);
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

.cp-woo .cart-collaterals,
.cp-woo .cart_totals {
  width: 100%;
  float: none;
}

.cp-woo .cart_totals table.shop_table th {
  width: 50%;
}

.cp-woo .wc-proceed-to-checkout {
  padding: 0;
  margin-top: var(--cp-space-sm);
}

.cp-woo .wc-proceed-to-checkout .checkout-button {
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  font-size: var(--cp-text-md);
}

.cp-woo .cart-empty {
  font-size: var(--cp-text-lg);
}

.cp-woo .return-to-shop {
  margin-top: var(--cp-space-md);
}

/* ------------------------------------------------------------------ *
 * Checkout
 * ------------------------------------------------------------------ */

/* Coupon toggle: a quiet line, not a notice block. */
.cp-woo .woocommerce-form-coupon-toggle .woocommerce-info {
  display: block;
  margin-bottom: var(--cp-space-md);
  padding: 0;
  border: none;
  background: none;
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
}

.cp-woo .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--cp-ink);
  font-weight: 600;
  text-underline-offset: 3px;
}

.cp-woo form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-xs);
  margin: 0 0 var(--cp-space-md);
  padding: var(--cp-space-sm);
  border: 2px solid var(--cp-line);
  border-radius: 0;
}

.cp-woo form.checkout_coupon p {
  margin: 0;
  flex: 1 1 10rem;
}

.cp-woo form.checkout_coupon .form-row-last {
  flex: 0 0 auto;
}

.cp-woo form.checkout {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-md);
}

/*
 * The summary panel is a flex "contents" wrapper on a phone, so its three parts can be
 * ordered independently: totals on top, then the fields, then the payment block.
 */
.cp-woo form.checkout .cp-checkout__panel {
  display: contents;
}

.cp-woo form.checkout .cp-checkout__summary {
  order: -1;
}

.cp-woo form.checkout #customer_details {
  order: 0;
}

.cp-woo form.checkout #payment {
  order: 1;
}

.cp-woo form.checkout #order_review_heading {
  display: none;
}

.cp-woo form.checkout .cp-checkout__eta {
  order: -2;
}

/* Delivery estimate: the strongest reason to finish, so it never hides in the panel. */
.cp-checkout__eta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cp-space-2xs) var(--cp-space-xs);
  margin: 0;
  padding: var(--cp-space-sm) var(--cp-space-md);
  border: 2px solid var(--cp-ink);
  border-left-width: 6px;
  border-left-color: var(--cp-amber);
  background: var(--cp-sheet);
}

.cp-checkout__eta-label {
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cp-checkout__eta-date {
  font-size: var(--cp-text-md);
  font-weight: 700;
}

.cp-woo table.shop_table tr.cp-cart-eta th,
.cp-woo table.shop_table tr.cp-cart-eta td {
  color: var(--cp-ink);
  font-weight: 600;
}

/* Trust line above the pay button. */
/* Stacked, not a row: the second line explains that the bank authenticates the buyer
   on its own domain, and it has to read as a sentence at 390px, not as a squeezed
   flex column next to the gateway logo. */
.cp-checkout__trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cp-space-2xs);
  margin: 0 0 var(--cp-space-sm);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  line-height: 1.5;
}

.cp-checkout__trust strong {
  color: var(--cp-ink);
}

/* The line a buyer must not miss before the bank takes over: it sits above the method
   list, so it is read while choosing PSE rather than after committing to it. */
.cp-woo .cp-gateway-note {
  margin: 0 0 var(--cp-space-xs);
  padding: var(--cp-space-xs);
  border-left: 3px solid var(--cp-amber);
  background: var(--cp-page);
  color: var(--cp-ink);
  font-size: var(--cp-text-xs);
  line-height: 1.5;
}

.cp-checkout__trust-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cp-space-2xs);
  margin-top: var(--cp-space-2xs);
}

.cp-checkout__trust-methods img {
  max-height: 1.125rem;
  width: auto;
  margin: 0;
  float: none;
}

.cp-woo #customer_details,
.cp-woo #customer_details .col-1,
.cp-woo #customer_details .col-2 {
  width: auto;
  float: none;
}

.cp-woo #customer_details {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-md);
}

.cp-woo .woocommerce-billing-fields__field-wrapper,
.cp-woo .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cp-space-sm);
}

.cp-woo form.checkout .form-row {
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
}

.cp-woo form.checkout .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

/* WooCommerce ships field hints as a blue tooltip bubble; make them quiet helper text. */
.cp-woo form .form-row .woocommerce-input-wrapper .description,
.cp-woo form.checkout .form-row .description,
.cp-woo form.checkout .form-row small {
  display: block;
  margin: var(--cp-space-2xs) 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  line-height: 1.4;
}

.cp-woo form .form-row .woocommerce-input-wrapper .description::before,
.cp-woo form .form-row .woocommerce-input-wrapper .description::after {
  content: none;
  display: none;
}

/* Order summary panel */
.cp-checkout__summary {
  border: 2px solid var(--cp-ink);
  background: var(--cp-sheet);
}

.cp-checkout__summary-toggle {
  display: flex;
  align-items: center;
  gap: var(--cp-space-sm);
  min-height: 3.25rem;
  padding: var(--cp-space-sm) var(--cp-space-md);
  background: var(--cp-page);
  font-size: var(--cp-text-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.cp-checkout__summary-toggle::-webkit-details-marker {
  display: none;
}

.cp-checkout__summary-toggle:focus-visible {
  outline: 3px solid var(--cp-amber);
  outline-offset: -3px;
}

.cp-checkout__summary-label::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.6rem;
  border: 2px solid var(--cp-ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--cp-duration) var(--cp-ease);
}

.cp-checkout__summary[open] .cp-checkout__summary-label::after {
  transform: translateY(2px) rotate(-135deg);
}

.cp-checkout__summary-total {
  margin-left: auto;
  font-size: var(--cp-text-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.cp-woo .cp-checkout__summary #order_review {
  width: auto;
  float: none;
}

.cp-woo .cp-checkout__summary table.shop_table {
  border: none;
  border-top: 2px solid var(--cp-ink);
}

.cp-woo .cp-checkout__summary table.shop_table thead {
  display: none;
}

.cp-woo .cp-checkout__summary table.shop_table td,
.cp-woo .cp-checkout__summary table.shop_table th {
  padding: 0.625rem var(--cp-space-md);
}

.cp-woo .cp-checkout__summary table.shop_table td.product-total,
.cp-woo .cp-checkout__summary table.shop_table tfoot td {
  text-align: right;
}

.cp-woo .cp-checkout__summary .product-quantity {
  color: var(--cp-graphite);
  font-weight: 500;
}

/* Payment block — Bold renders its own box; this dresses it in brand clothes. */
.cp-woo #payment,
.cp-woo #payment.woocommerce-checkout-payment {
  padding: 0;
  border: 2px solid var(--cp-ink);
  border-radius: 0;
  background: var(--cp-sheet);
}

.cp-woo #payment ul.payment_methods {
  margin: 0;
  padding: var(--cp-space-md);
  border-bottom: none;
  list-style: none;
}

.cp-woo #payment ul.payment_methods li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The Bold gateway ships `label[for="payment_method_bold_co"] { display: inline-flex
 * !important }` (plugins/bold-pagos-en-linea/assets/css/bold_woocommerce_styles.css:15).
 * Same story as `a.remove` above: important beats specificity, so `display` has to carry
 * the flag. The rest of the rule does not, and the second selector is only there so the
 * two labels — Bold's and any other gateway's — land on the same layout.
 */
.cp-woo #payment ul.payment_methods li label,
.cp-woo #payment ul.payment_methods li label[for='payment_method_bold_co'] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cp-space-2xs) var(--cp-space-xs);
  max-width: 100%;
  margin: 0;
  font-size: var(--cp-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-woo #payment ul.payment_methods li label img {
  float: none;
  max-height: 1.25rem;
  width: auto;
  margin: 0;
}

.cp-woo #payment div.payment_box {
  margin: var(--cp-space-sm) 0 0;
  padding: var(--cp-space-sm);
  border: 2px solid var(--cp-line);
  border-radius: 0;
  background: var(--cp-page);
  color: var(--cp-ink);
  font-size: var(--cp-text-sm);
}

.cp-woo #payment div.payment_box::before,
.cp-woo #payment div.payment_box::after {
  content: none;
  display: none;
}

.cp-woo #payment #bold_co_container_info_checkout_page {
  border: 2px solid var(--cp-line);
  border-radius: 0;
  background: var(--cp-sheet);
}

.cp-woo #payment #bold_co_checkout_page_footer {
  border-radius: 0;
  background: var(--cp-page);
}

.cp-woo #payment #bold_co_checkout_page_footer_title,
.cp-woo #payment #bold_co_checkout_page_title {
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
}

.cp-woo #payment .place-order {
  display: block;
  margin: 0;
  padding: var(--cp-space-md);
  border-top: 2px solid var(--cp-line);
}

.cp-woo #payment .woocommerce-privacy-policy-text p,
.cp-woo #payment .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 var(--cp-space-sm);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  line-height: 1.5;
}

/*
 * Sticky pay bar: reachable at any scroll position on a phone.
 *
 * #payment is in the selector on purpose. WooCommerce ships
 * `.woocommerce-page #payment #place_order { margin-bottom: 1em }`
 * (assets/css/woocommerce-smallscreen.css), and two IDs outrank the three classes the
 * theme used to fight it with, so the bar sat 17px above the viewport bottom with a
 * strip of scrolling page showing underneath. Matching the ID count settles it.
 *
 * The bar keeps the container gutter instead of bleeding edge to edge, and wears the
 * brand's hard offset shadow rather than the soft blur that appeared nowhere else.
 */
.cp-checkout .cp-woo form.checkout #payment #place_order {
  position: fixed;
  top: auto;
  right: var(--cp-gutter);
  bottom: calc(var(--cp-space-xs) + env(safe-area-inset-bottom, 0px));
  left: var(--cp-gutter);
  z-index: 45;
  width: auto;
  min-height: 3.5rem;
  margin: 0;
  border-width: 2px;
  font-size: var(--cp-text-md);
  box-shadow: 4px 4px 0 var(--cp-ink);
}

.cp-checkout .cp-woo {
  padding-bottom: 6rem;
}

.cp-checkout .cp-footer {
  padding-bottom: 4rem;
}

/* ------------------------------------------------------------------ *
 * Order received
 * ------------------------------------------------------------------ */
.cp-woo .woocommerce-order {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-lg);
}

/* The gateway can blank this paragraph and print its own notice instead. */
.cp-woo .woocommerce-order > p:empty,
.cp-woo .woocommerce-thankyou-order-received:empty {
  display: none;
}

.cp-woo .woocommerce-order > .woocommerce-info {
  border-left-color: var(--cp-amber);
  font-size: var(--cp-text-md);
}

.cp-woo .woocommerce-thankyou-order-received {
  margin: 0;
  padding: var(--cp-space-md);
  border: 2px solid var(--cp-ink);
  border-left-width: 6px;
  border-left-color: var(--cp-amber);
  background: var(--cp-sheet);
  font-size: var(--cp-text-lg);
  font-weight: 600;
}

.cp-woo ul.woocommerce-order-overview,
.cp-woo ul.woocommerce-thankyou-order-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--cp-ink);
  background: var(--cp-sheet);
  list-style: none;
}

.cp-woo ul.woocommerce-order-overview::before,
.cp-woo ul.woocommerce-order-overview::after,
.cp-woo ul.woocommerce-thankyou-order-details::before,
.cp-woo ul.woocommerce-thankyou-order-details::after {
  content: none;
}

.cp-woo ul.woocommerce-order-overview li {
  margin: 0;
  padding: var(--cp-space-sm) var(--cp-space-md);
  border-bottom: 1px solid var(--cp-line);
  border-right: none;
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cp-woo ul.woocommerce-order-overview li:last-child {
  border-bottom: none;
}

.cp-woo ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--cp-space-2xs);
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-md);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

.cp-woo .woocommerce-customer-details,
.cp-woo .woocommerce-order-details {
  margin: 0;
}

.cp-woo table.woocommerce-table--order-details th:last-child,
.cp-woo table.woocommerce-table--order-details td:last-child {
  text-align: right;
}

/* Order actions sit in one table cell; keep them from colliding. */
.cp-woo table.shop_table td .woocommerce-button,
.cp-woo table.shop_table td .button {
  margin: 0 0 var(--cp-space-2xs) var(--cp-space-2xs);
  vertical-align: middle;
}

.cp-woo .woocommerce-customer-details address {
  padding: var(--cp-space-md);
  border: 2px solid var(--cp-line);
  border-radius: 0;
  background: var(--cp-sheet);
  font-size: var(--cp-text-sm);
  font-style: normal;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * Wider screens
 * ------------------------------------------------------------------ */
@media (min-width: 600px) {
  .cp-woo .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-woo form.checkout .form-row-wide,
  .cp-woo form.checkout .woocommerce-additional-fields .form-row {
    grid-column: 1 / -1;
  }

  .cp-woo ul.woocommerce-order-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-woo ul.woocommerce-order-overview li {
    border-right: 1px solid var(--cp-line);
  }

  .cp-woo ul.woocommerce-order-overview li:nth-child(2n) {
    border-right: none;
  }
}

/* WooCommerce hands the table back to normal layout at this width. */
@media (min-width: 768px) {
  .cp-woo table.shop_table_responsive tr td.product-thumbnail {
    display: table-cell;
    text-align: left;
  }

  .cp-woo table.cart td.product-thumbnail img {
    margin-left: 0;
  }
}

@media (min-width: 900px) {
  .cp-woo {
    padding-block: var(--cp-space-xl);
  }

  .cp-woo div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cp-woo table.cart td.actions .coupon {
    display: inline-flex;
    width: auto;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .cp-woo table.cart td.actions > .button {
    float: right;
    width: auto;
  }

  /* Cart: items left, totals right. */
  .cp-woo .cart-collaterals {
    display: flex;
    justify-content: flex-end;
  }

  .cp-woo .cart_totals {
    width: min(100%, 26rem);
  }

  /* Checkout: two columns with a sticky summary. */
  .cp-woo form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--cp-space-lg);
    align-items: start;
  }

  .cp-woo form.checkout #customer_details {
    grid-column: 1;
  }

  .cp-woo form.checkout .cp-checkout__panel {
    display: block;
    grid-column: 2;
    position: sticky;
    top: calc(var(--cp-header-height) + var(--cp-space-sm));
  }

  .cp-checkout__summary-toggle {
    display: none;
  }

  /* Back to source order: estimate, heading, totals, payment. */
  .cp-woo form.checkout .cp-checkout__eta,
  .cp-woo form.checkout .cp-checkout__summary,
  .cp-woo form.checkout #customer_details,
  .cp-woo form.checkout #payment {
    order: 0;
  }

  .cp-woo form.checkout .cp-checkout__eta {
    margin-bottom: var(--cp-space-md);
  }

  .cp-woo form.checkout #order_review_heading {
    display: block;
    margin: 0;
    padding: var(--cp-space-sm) var(--cp-space-md);
    border: 2px solid var(--cp-ink);
    border-bottom: none;
    background: var(--cp-page);
  }

  .cp-woo form.checkout .cp-checkout__summary {
    border-top: none;
  }

  .cp-woo form.checkout #payment {
    margin-top: var(--cp-space-md);
  }

  .cp-woo .cp-checkout__summary table.shop_table {
    border-top: none;
  }

  /* Pay button returns to the flow — the summary is already in view. */
  .cp-checkout .cp-woo form.checkout #payment #place_order {
    position: static;
    width: 100%;
    margin: 0;
    border-width: 2px;
    box-shadow: none;
  }

  .cp-checkout .cp-woo {
    padding-bottom: var(--cp-space-xl);
  }

  .cp-checkout .cp-footer {
    padding-bottom: 0;
  }

  .cp-woo ul.woocommerce-order-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cp-woo ul.woocommerce-order-overview li {
    border-bottom: none;
    border-right: 1px solid var(--cp-line);
  }

  .cp-woo ul.woocommerce-order-overview li:nth-child(2n) {
    border-right: 1px solid var(--cp-line);
  }

  .cp-woo ul.woocommerce-order-overview li:last-child {
    border-right: none;
  }

  .cp-woo .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--cp-space-md);
  }
}

/* ------------------------------------------------------------------ *
 * My Account — the pages `.cp-woo` never reaches
 *
 * Everything above this line is scoped to `.cp-woo`, a class `page.php` puts on the
 * article of a shop page. WooCommerce renders My Account through the same template but
 * it is not classed as a shop page, so `.cp-woo` is absent there and all 1400 lines above
 * miss it. That is why the QA measured 13.33px inputs and 18px buttons on the account
 * forms (F-08, F-09) while the checkout next door was fine.
 *
 * The fix is scoped to `body.woocommerce-account`, which WooCommerce core puts on the
 * body itself and which therefore cannot go missing the way `.cp-woo` did. It is
 * deliberately only size and target: no colour, border or skin, because making the
 * account area look like the shop is a redesign and this is not one.
 *
 * Mobile-first: none of it is width-dependent — a 16px field and a 44px target are the
 * floor at 390px and stay the floor at 1440px.
 * ------------------------------------------------------------------ */

/*
 * Measured, not assumed: the 13.33px the QA found is the user-agent default, not a core
 * declaration — deleting this block and keeping only the base.css floor leaves the fields
 * at 16px, so base.css alone carries the font size today. What this block actually buys is
 * the 44px target and the padding that goes with it, and a font-size that will still hold
 * if WooCommerce ever ships one: `body.woocommerce-account .woocommerce input[type='text']`
 * is two classes and two types, which outranks core's `.woocommerce form .form-row
 * input.input-text` without an `!important`.
 */
body.woocommerce-account .woocommerce input[type='text'],
body.woocommerce-account .woocommerce input[type='email'],
body.woocommerce-account .woocommerce input[type='tel'],
body.woocommerce-account .woocommerce input[type='url'],
body.woocommerce-account .woocommerce input[type='number'],
body.woocommerce-account .woocommerce input[type='password'],
body.woocommerce-account .woocommerce input[type='search'],
body.woocommerce-account .woocommerce input[type='date'],
body.woocommerce-account .woocommerce textarea,
body.woocommerce-account .woocommerce select {
  width: 100%;
  min-height: var(--cp-control-target-min);
  padding: 0.5rem 0.75rem;
  font-family: var(--cp-font-body);
  font-size: var(--cp-control-font-min);
}

/* The buttons that save an address, change a password or pay an unpaid order. */
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce button[type='submit'],
body.woocommerce-account .woocommerce input[type='submit'],
body.woocommerce-account .woocommerce a.woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cp-control-target-min);
  padding: 0 var(--cp-space-sm);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-sm);
}

/*
 * The account menu. Core prints the links as bare inline anchors inside `li`s, so the
 * whole row looked tappable and only 22px of it was.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  min-height: var(--cp-control-target-min);
}

/*
 * WooCommerce prints the order actions as bare anchors with no separator, so the column
 * read "PagarVerCancelar" as one word. They are actions, so they get spacing and a
 * touch target rather than a comma.
 *
 * This rule used to live in my-account.css under a `.cp-woo` scope. It never fired:
 * my-account.css is only enqueued on the lamp order-detail page, which has no orders
 * table, and the orders page that does have one has no `.cp-woo`.
 */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-2xs);
  align-items: center;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cp-control-target-min);
  padding: 0 var(--cp-space-xs);
  border: var(--cp-border-hair) solid var(--cp-line);
  /*
   * The background is declared, not inherited. These anchors carry WooCommerce's
   * `button` class, so once the account pages started receiving `.cp-woo` the theme's
   * button skin gave them an ink background while this rule was still setting ink
   * text — three black rectangles with invisible labels. A button skin owns both
   * colours or it owns neither.
   */
  background: var(--cp-sheet);
  color: var(--cp-ink);
  font-size: var(--cp-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions a:hover {
  border-color: var(--cp-ink);
  background: var(--cp-ink);
  color: var(--cp-sheet);
}
/* -----------------------------------------------------------------------------
 * The account shell.
 *
 * These pages only started receiving `.cp-woo` once page.php learned that My Account is
 * a shop page like the cart and the checkout — see that file. They live here rather
 * than in my-account.css because that stylesheet is enqueued only on the detail view of
 * a lamp order, while this one loads on every WooCommerce surface, the account shell
 * included. What follows is what the shared styling does not cover: the navigation, the
 * two-column shell, and the width of a form that has no business filling 1312px.
 * -------------------------------------------------------------------------- */

.cp-woo .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--cp-border-hair) solid var(--cp-line);
}

.cp-woo .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: var(--cp-border-hair) solid var(--cp-line);
}

.cp-woo .woocommerce-MyAccount-navigation a {
  display: block;
  /* 44px minimum target, with the label centred in it. */
  padding: 0.8125rem var(--cp-space-sm);
  color: var(--cp-ink);
  font-size: var(--cp-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--cp-duration) var(--cp-ease);
}

.cp-woo .woocommerce-MyAccount-navigation a:hover {
  background: var(--cp-page);
}

.cp-woo .woocommerce-MyAccount-navigation .is-active a {
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

/*
 * A sign-in form is a small task, and a field stretched across the page reads as a
 * form with far more in it than two inputs.
 */
.cp-woo form.woocommerce-form-login,
.cp-woo form.woocommerce-form-register,
.cp-woo form.woocommerce-ResetPassword {
  max-width: 26rem;
  padding: var(--cp-space-md);
  border: var(--cp-border) solid var(--cp-ink);
  background: var(--cp-sheet);
}

.cp-woo form.woocommerce-form-login .woocommerce-form-login__submit {
  width: 100%;
  margin-bottom: var(--cp-space-xs);
}

.cp-woo form.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2xs);
  margin: 0 0 var(--cp-space-xs);
  font-weight: 400;
}

@media (min-width: 901px) {
  /*
   * WooCommerce floats the two columns at 30%/68%. A grid keeps them from collapsing
   * when the content is short and needs no clearfix — but the wrapper it hangs off,
   * `div.woocommerce`, is also the cart's and the checkout's, so the rule is scoped to
   * the account body or it would reshape those too.
   */
  /*
   * Only when there is a navigation to put in the first track. Logged out there is
   * none, and the grid still reserved 15rem for it — the sign-in card sat in the
   * second column against an empty gutter, off-centre for no reason.
   */
  body.woocommerce-account .cp-woo .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--cp-space-lg);
    align-items: start;
  }

  /*
   * Placed explicitly rather than left to auto-flow: with the floats removed the two
   * items landed in the wrong tracks, and a menu that renders where the orders should
   * be is not worth debugging twice.
   */
  body.woocommerce-account .cp-woo .woocommerce-MyAccount-navigation {
    grid-column: 1;
    float: none;
    width: auto;
  }

  body.woocommerce-account .cp-woo .woocommerce-MyAccount-content {
    grid-column: 2;
    float: none;
    width: auto;
  }
}

/*
 * Rhythm inside the account content column.
 *
 * WooCommerce emits these blocks with no margins at all, which on the order view put
 * the intro line flush against the tracker and "Dirección de facturación" flush against
 * the table above it — measured at 0px on both seams. The column runs on one scale
 * rather than each block bringing its own.
 */
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content > * + * {
  margin-top: var(--cp-space-lg);
}

body.woocommerce-account .cp-woo .woocommerce-MyAccount-content > p:first-child {
  margin-bottom: var(--cp-space-md);
}

/*
 * The block titles WooCommerce renders inside those sections: order details, customer
 * details, downloads. They sit directly on their table without this.
 */
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content h2,
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content h3 {
  margin: 0 0 var(--cp-space-md);
  font-family: var(--cp-font-display);
  font-size: var(--cp-display-sm, 1.75rem);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}

body.woocommerce-account .cp-woo .woocommerce-column__title {
  font-size: var(--cp-text-lg);
}

/* The two address columns need air between them, not just inside the card. */
body.woocommerce-account .cp-woo .woocommerce-customer-details address {
  padding: var(--cp-space-md);
  border: var(--cp-border-hair) solid var(--cp-line);
  background: var(--cp-sheet);
  font-style: normal;
  line-height: 1.7;
}

/*
 * The column starts level with the navigation beside it, not 40px below it.
 *
 * `:first-child` does not reach it: WooCommerce opens the column with an empty
 * `.woocommerce-notices-wrapper`, so the first thing anyone sees is the second child
 * and the owl rule above had already given it a top margin. The wrapper is zero-height
 * when there is nothing to announce, which is why it is easy to miss.
 */
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content > :first-child,
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty + * {
  margin-top: 0;
}

/*
 * Action buttons inside the account column.
 *
 * WooCommerce emits them with no margin at all, so "Hacer otro pedido" sat flush
 * against the lamp data table and "Guardar los cambios" against the password fieldset —
 * both measured at 0px. A button that touches what it acts on reads as part of it.
 *
 * One rule rather than one per screen: anything holding a submit or an action link at
 * the end of a block gets the same separation.
 */
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content p.order-again,
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content fieldset + p,
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content form > p:last-child,
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content .woocommerce-Addresses + p {
  margin-top: var(--cp-space-md);
}

/*
 * The password fieldset is a browser default box. It is a group of fields, so it reads
 * as one — with the legend as its label rather than notched into the border.
 */
body.woocommerce-account .cp-woo .woocommerce-MyAccount-content fieldset {
  margin: var(--cp-space-md) 0 0;
  padding: var(--cp-space-md);
  border: var(--cp-border-hair) solid var(--cp-line);
  background: var(--cp-sheet);
}

body.woocommerce-account .cp-woo .woocommerce-MyAccount-content fieldset legend {
  padding: 0 var(--cp-space-2xs);
  font-size: var(--cp-text-sm);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
 * Saved addresses.
 *
 * WooCommerce renders each one as a bare `<address>` — browser-default italic, no
 * border, no padding — under a heading and an inline "Editar" link. Every other block
 * in this account area is a card, so this one read as an unfinished page.
 *
 * Built as a grid so it holds however many WooCommerce decides to render. Today the
 * shop forces `billing_only`, so there is one; with shipping enabled there are two.
 * -------------------------------------------------------------------------- */

body.woocommerce-account .cp-woo .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--cp-space-md);
  margin: 0;
}

/*
 * WooCommerce hands these `col-1`/`col-2` with floats and percentage widths. A grid
 * ignores the floats but not the placement they imply: the two cards landed in tracks
 * two and three and left the first empty. Placed explicitly, as with the account
 * columns above — auto-flow is not worth debugging twice.
 */
@media (min-width: 601px) {
  body.woocommerce-account .cp-woo .woocommerce-Addresses > .col-1 {
    grid-column: 1;
  }

  body.woocommerce-account .cp-woo .woocommerce-Addresses > .col-2 {
    grid-column: 2;
  }
}

body.woocommerce-account .cp-woo .woocommerce-Address {
  display: flex;
  flex-direction: column;
  width: auto;
  padding: var(--cp-space-md);
  border: var(--cp-border) solid var(--cp-ink);
  background: var(--cp-sheet);
  float: none;
}

body.woocommerce-account .cp-woo .woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-2xs) var(--cp-space-sm);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--cp-space-sm);
  padding-bottom: var(--cp-space-sm);
  border-bottom: var(--cp-border-hair) solid var(--cp-line);
}

body.woocommerce-account .cp-woo .woocommerce-Address-title h2,
body.woocommerce-account .cp-woo .woocommerce-Address-title h3 {
  margin: 0;
  font-size: var(--cp-text-lg);
}

/* The edit link is an action, so it looks like one and clears the touch minimum. */
body.woocommerce-account .cp-woo .woocommerce-Address-title a.edit {
  display: inline-flex;
  align-items: center;
  min-height: var(--cp-control-target-min, 2.75rem);
  padding: 0 var(--cp-space-xs);
  border: var(--cp-border-hair) solid var(--cp-line);
  background: var(--cp-sheet);
  color: var(--cp-ink);
  font-size: var(--cp-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body.woocommerce-account .cp-woo .woocommerce-Address-title a.edit:hover {
  border-color: var(--cp-ink);
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

/* Not italic. An address is data, not an aside. */
body.woocommerce-account .cp-woo .woocommerce-Address address {
  margin: 0;
  font-style: normal;
  line-height: 1.7;
}

/*
 * WooCommerce's empty state is one bare sentence. It gets the same room as a filled
 * card so the grid does not lurch when one address is set and the other is not.
 */
body.woocommerce-account .cp-woo .woocommerce-Address > p {
  margin: 0;
  color: var(--cp-graphite);
}
/* -----------------------------------------------------------------------------
 * The dashboard: the first screen after signing in.
 *
 * Here rather than in my-account.css for the same reason as the account shell above:
 * that stylesheet is enqueued only on the detail view of a lamp order, so the card
 * rendered with no border, no background and no progress bar — a styled block whose
 * styles never arrived.
 * -------------------------------------------------------------------------- */

.cp-dash {
  padding: var(--cp-space-md);
  border: var(--cp-border) solid var(--cp-ink);
  background: var(--cp-sheet);
}

.cp-dash__eyebrow {
  margin: 0 0 var(--cp-space-2xs);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-dash__title {
  margin: 0 0 var(--cp-space-2xs);
  font-family: var(--cp-font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}

.cp-dash__meta {
  margin: 0 0 var(--cp-space-md);
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
}

.cp-dash__progress {
  display: flex;
  align-items: center;
  gap: var(--cp-space-sm);
  margin: 0 0 var(--cp-space-sm);
}

.cp-dash__bar {
  flex: 1;
  height: 0.5rem;
  background: var(--cp-line);
}

.cp-dash__bar-fill {
  display: block;
  height: 100%;
  background: var(--cp-amber);
}

.cp-dash__step {
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-dash__next {
  margin: 0 0 var(--cp-space-md);
  padding-left: var(--cp-space-sm);
  border-left: 3px solid var(--cp-amber);
}

.cp-dash__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-xs);
  margin: 0;
}

.cp-dash--empty .cp-dash__lead {
  margin: 0 0 var(--cp-space-sm);
}

/*
 * Signing in is one task on an otherwise empty page, so the card and its heading are
 * centred together rather than hugging a column edge that has nothing in it.
 */
body.woocommerce-account:not(.logged-in) .cp-woo .woocommerce {
  max-width: 26rem;
  margin-inline: auto;
}

body.woocommerce-account:not(.logged-in) .cp-woo h2 {
  text-align: center;
}

body.woocommerce-account:not(.logged-in) .cp-woo form.woocommerce-form-login {
  max-width: none;
}