/* ALJILD components — WEB-05
 *
 * The component set, built on the layout primitives in layouts.css and the
 * generated scale. Conventions:
 *
 *   - Components never set outer margin. Spacing is the parent layout's job.
 *   - Every size and gap comes from a token. No literal px except hairlines.
 *   - Variants are data-attributes, not extra class names, so a component
 *     reads as one thing with modifiers rather than five near-duplicates.
 *   - Nothing is boxed: no radius, no shadow. Separation comes from space
 *     and, rarely, a hairline.
 */


/* ── Eyebrow / section heading ───────────────────────────────────────── */

.c-eyebrow {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin: 0;
}

.c-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  color: var(--page-fg);
  margin: 0;
  text-wrap: balance;
}

.c-heading[data-size="display"] { font-size: var(--step-4); }
.c-heading[data-size="large"]   { font-size: var(--step-3); }
.c-heading[data-size="small"]   { font-size: var(--step-1); }

.c-prose {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-prose);
  max-inline-size: var(--measure-prose);
  color: var(--page-fg);
  margin: 0;
}

.c-rule {
  inline-size: var(--space-xl);
  block-size: 1px;
  background: var(--accent);
  border: 0;
  margin: 0;
}


/* ── Button ──────────────────────────────────────────────────────────────
   Outline by default. A filled tan block reads as software, not atelier.  */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 44px;
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--page-fg);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.c-btn:hover,
.c-btn:focus-visible {
  background: var(--accent);
  color: var(--accent-fg);
}

.c-btn[data-variant="quiet"] {
  border-color: var(--border);
}

.c-btn[data-variant="quiet"]:hover,
.c-btn[data-variant="quiet"]:focus-visible {
  border-color: var(--page-fg);
  background: transparent;
  color: var(--page-fg);
}

.c-btn[data-variant="text"] {
  border: 0;
  border-block-end: 1px solid var(--accent);
  padding-inline: 0;
  min-block-size: auto;
  padding-block: var(--space-3xs);
}

.c-btn[data-variant="text"]:hover,
.c-btn[data-variant="text"]:focus-visible {
  background: transparent;
  color: var(--page-fg);
  border-block-end-color: var(--page-fg);
}

.c-btn[data-full] { inline-size: 100%; }

.c-btn[disabled],
.c-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .c-btn { transition: none; }
}


/* ── Product card ────────────────────────────────────────────────────── */

.c-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

.c-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.c-card__media {
  position: relative;
  overflow: hidden;
  background: var(--plate);
  margin-block-end: var(--space-s);
}

.c-card__media img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  transition: opacity 300ms ease;
}

/* Second image revealed on hover — crossfade only, never a scale or lift. */
.c-card__media[data-has-alt] img + img {
  position: absolute;
  inset: 0;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
}

.c-card__link:hover .c-card__media[data-has-alt] img + img,
.c-card__link:focus-visible .c-card__media[data-has-alt] img + img {
  opacity: 1;
}

.c-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: var(--leading-tight);
  color: var(--page-fg);
  margin: 0 0 var(--space-3xs);
  flex: 1;
}

.c-card__spec {
  font-family: var(--font-mono);
  font-size: var(--stepn-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3xs);
}

.c-card__price {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--page-fg);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.c-card[data-align="center"] { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .c-card__media img { transition: none; }
}


/* ── Specification table ─────────────────────────────────────────────────
   The brand's central object. Rows without a value are omitted, never
   filled with a dash — an empty row invites an agreeable guess.           */

.c-spec {
  border-block: 1px solid var(--accent);
  padding-block: var(--space-xs);
  margin: 0;
  display: grid;
  gap: var(--space-3xs);
}

.c-spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  padding-block: var(--space-3xs);
}

.c-spec dt {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
}

.c-spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--stepn-1);
  color: var(--page-fg);
  text-align: end;
  font-variant-numeric: tabular-nums;
}


/* ── Price ───────────────────────────────────────────────────────────── */

.c-price {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--page-fg);
  font-variant-numeric: tabular-nums;
}

.c-price del { opacity: 0.45; margin-inline-end: var(--space-2xs); }
.c-price ins { text-decoration: none; }


/* ── Swatch ──────────────────────────────────────────────────────────── */

.c-swatch {
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  background-clip: content-box;
}

.c-swatch[aria-pressed="true"],
.c-swatch[data-selected] {
  outline: 1px solid var(--page-fg);
  outline-offset: 3px;
}

/* The control is 28px but the hit area must clear 44. */
.c-swatch-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
}


/* ── Field ───────────────────────────────────────────────────────────────
   Visible label always. Placeholder-only labelling disappears the moment
   someone starts typing, which is when it is needed most.                 */

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.c-field__label {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
}

.c-field__label [data-required] { color: var(--accent); }

.c-field input,
.c-field select,
.c-field textarea {
  min-block-size: 44px;
  padding: var(--space-2xs) 0;
  border: 0;
  border-block-end: 1px solid var(--border);
  background: transparent;
  color: var(--page-fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
}

.c-field input:focus-visible,
.c-field select:focus-visible,
.c-field textarea:focus-visible {
  outline: none;
  border-block-end-color: var(--accent);
  border-block-end-width: 2px;
}

.c-field__hint {
  font-size: var(--stepn-1);
  color: var(--ink-meta);
}

.c-field__error {
  font-size: var(--stepn-1);
  color: var(--danger, #A33B2A);
}

.c-field[data-invalid] input,
.c-field[data-invalid] select,
.c-field[data-invalid] textarea {
  border-block-end-color: var(--danger, #A33B2A);
  border-block-end-width: 2px;
}


/* ── Notice ──────────────────────────────────────────────────────────────
   A rule and text. A coloured panel is a box, and boxes are what this
   design does not do.                                                     */

.c-notice {
  border-block-start: 1px solid var(--accent);
  padding-block-start: var(--space-s);
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--page-fg);
}

.c-notice[data-tone="danger"]  { border-block-start-color: var(--danger, #A33B2A); }
.c-notice[data-tone="quiet"]   { border-block-start-color: var(--border); color: var(--ink-meta); }


/* ── Badge ───────────────────────────────────────────────────────────── */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-label);
  font-size: var(--stepn-2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  border: 1px solid var(--border);
  padding: var(--space-3xs) var(--space-2xs);
}

.c-badge[data-tone="accent"] { color: var(--accent); border-color: var(--accent); }


/* ── Tabs ────────────────────────────────────────────────────────────────
   Navigation, not containers. No bar, no chrome, one hairline on active.  */

.c-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-l);
}

.c-tabs a,
.c-tabs button {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  text-decoration: none;
  background: none;
  border: 0;
  border-block-end: 1px solid transparent;
  padding: 0 0 var(--space-3xs);
  cursor: pointer;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

.c-tabs [aria-selected="true"],
.c-tabs .is-active a,
.c-tabs a:hover,
.c-tabs button:hover,
.c-tabs a:focus-visible {
  color: var(--page-fg);
  border-block-end-color: var(--accent);
}


/* ── Accordion — native <details> ────────────────────────────────────── */

.c-accordion {
  border-block-end: 1px solid var(--border);
}

.c-accordion > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  min-block-size: 44px;
  padding-block: var(--space-xs);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--page-fg);
}

.c-accordion > summary::-webkit-details-marker { display: none; }

.c-accordion > summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
}

.c-accordion[open] > summary::after { content: "\2212"; }

.c-accordion__body {
  padding-block-end: var(--space-s);
  max-inline-size: var(--measure-body);
}


/* ── Breadcrumb ──────────────────────────────────────────────────────── */

.c-crumbs {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
}

.c-crumbs a { color: inherit; text-decoration: none; }
.c-crumbs a:hover { color: var(--page-fg); text-decoration: underline; text-underline-offset: 4px; }
.c-crumbs [aria-current] { color: var(--page-fg); }


/* ── Pagination ──────────────────────────────────────────────────────── */

.c-pagination a,
.c-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  font-family: var(--font-mono);
  font-size: var(--stepn-1);
  color: var(--ink-meta);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}

.c-pagination [aria-current],
.c-pagination .current {
  color: var(--page-fg);
  border-block-end-color: var(--accent);
}


/* ── Quantity ────────────────────────────────────────────────────────── */

.c-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
}

.c-qty button {
  min-inline-size: 44px;
  min-block-size: 44px;
  border: 0;
  background: transparent;
  color: var(--page-fg);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  cursor: pointer;
}

.c-qty input {
  inline-size: 3.5rem;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--border);
  background: transparent;
  color: var(--page-fg);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}


/* ── Empty state ─────────────────────────────────────────────────────── */

.c-empty {
  text-align: center;
  padding-block: var(--space-3xl);
  color: var(--ink-meta);
}

.c-empty__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--page-fg);
  margin: 0 0 var(--space-2xs);
}

/* The search form inside an empty state inherits the page width and runs to
   1250px. A search box that wide reads as a page element, not an offer. */
.c-empty .search-form,
.c-empty .wp-block-search {
  display: flex;
  gap: var(--space-2xs);
  max-inline-size: 26rem;
  margin-inline: auto;
  align-items: end;
}

.c-empty .search-form label,
.c-empty .search-form .search-field {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* The field sits inside the label, so sizing the label alone left a 336px
   input spilling out of a 266px track and overlapping the submit. */
.c-empty .search-form label {
  display: block;
}

.c-empty .search-form input[type="search"] {
  inline-size: 100%;
  /* Kadence leaves the search field content-box, so a 100% width still grew
     by its 35px side padding and ran over the submit. */
  box-sizing: border-box;
}


/* ── Focus ───────────────────────────────────────────────────────────── */

.c-btn:focus-visible,
.c-card__link:focus-visible,
.c-swatch:focus-visible,
.c-tabs a:focus-visible,
.c-accordion > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   PAGE COMPOSITIONS

   The layout primitives handle arrangement; these handle composition — the
   asymmetry, the scale jumps and the edge-breaking that stop a page reading
   as a stack of centred boxes.

   Principle: centre prose, never composition. A paragraph wants a measure
   and a centre. A page wants tension.
   ══════════════════════════════════════════════════════════════════════ */


/* ── Hero ────────────────────────────────────────────────────────────────
   Copy held to the left on a narrow measure; the photograph runs off the
   right edge of the viewport. The asymmetry is the point — a centred
   headline above a centred image is the arrangement every template makes. */

.c-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-3xl);
}

.c-hero__copy {
  /* The column is sized for the paragraph. The title takes its own, tighter
     measure below — 24ch on both made the body text break every four words. */
  max-inline-size: 38ch;
}

.c-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* The largest thing on the site, and the only use of step-5. */
  font-size: var(--step-4);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--page-fg);
  margin: 0 0 var(--space-m);
  max-inline-size: 15ch;
  text-wrap: balance;
}

.c-hero__media {
  /* Breaks the content column and runs to the viewport edge. */
  margin-inline-end: calc(50% - 50vw);
  background: var(--plate);
}

.c-hero__media img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 72vh;
  object-fit: contain;
  display: block;
}

@media (max-width: 860px) {
  .c-hero {
    grid-template-columns: 1fr;
    gap: var(--space-l);
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .c-hero__copy { max-inline-size: none; }
  .c-hero__media {
    margin-inline: calc(50% - 50vw);
  }
}


/* ── Feature grid ────────────────────────────────────────────────────────
   Four products, not four identical cells. The first is given twice the
   width and a taller frame; the rest sit beside it. Hierarchy inside a grid
   is what makes a collection read as curated rather than as inventory.     */

.c-features {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
  align-items: start;
}

.c-features > :nth-child(1) { grid-column: span 6; }
.c-features > :nth-child(1) .c-card__media { aspect-ratio: 4 / 5; }
.c-features > :nth-child(1) .c-card__title { font-size: var(--step-2); }

.c-features > :nth-child(2),
.c-features > :nth-child(3) { grid-column: span 3; }

/* The fourth drops a row and sits under the pair, offset — the stagger is
   what keeps the block from resolving into a tidy rectangle. */
.c-features > :nth-child(4) {
  grid-column: 7 / span 3;
  margin-block-start: var(--space-l);
}

.c-features .c-card__media {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-features .c-card__media img {
  block-size: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .c-features > :nth-child(1) { grid-column: span 12; }
  .c-features > :nth-child(2),
  .c-features > :nth-child(3) { grid-column: span 6; }
  .c-features > :nth-child(4) { grid-column: span 6; margin-block-start: 0; }
}

@media (max-width: 560px) {
  .c-features > * { grid-column: span 12 !important; margin-block-start: 0 !important; }
}


/* ── Statement ───────────────────────────────────────────────────────────
   The brand paragraph. Prose IS centred and narrow — that is the one place
   symmetry is right, because a measure is a reading aid, not a composition. */

.c-statement {
  max-inline-size: var(--measure-prose);
  margin-inline: auto;
  text-align: center;
}

.c-statement p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-prose);
  color: var(--page-fg);
  margin: 0;
  text-wrap: pretty;
}


/* ── Spotlight ───────────────────────────────────────────────────────────
   The mirror of the hero: image off the LEFT edge, copy right. Repeating
   the move in reverse gives the page a rhythm instead of one clever
   moment followed by a stack of boxes.                                    */

.c-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-xl);
}

.c-spotlight__media {
  margin-inline-start: calc(50% - 50vw);
  background: var(--plate);
}

.c-spotlight__media img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 64vh;
  object-fit: contain;
  display: block;
}

.c-spotlight__copy { max-inline-size: 30ch; }

@media (max-width: 860px) {
  .c-spotlight { grid-template-columns: 1fr; gap: var(--space-l); }
  .c-spotlight__media { margin-inline: calc(50% - 50vw); }
  .c-spotlight__copy { max-inline-size: none; }
}


/* ── Assurance row ───────────────────────────────────────────────────── */

.c-assure {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-xl);
}

.c-assure__item p {
  font-size: var(--stepn-1);
  line-height: 1.6;
  color: var(--ink-meta);
  margin: var(--space-3xs) 0 0;
  max-inline-size: 30ch;
}

@media (max-width: 860px) { .c-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .c-assure { grid-template-columns: 1fr; } }


/* ── Product page: gallery breaks the left edge ─────────────────────── */

@media (min-width: 901px) {
  .aljild-pdp-top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .aljild-pdp-top > .woocommerce-product-gallery {
    margin-inline-start: calc(50% - 50vw);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   PRODUCT IMAGE BLEND

   Lives here, beside the components it applies to. It was previously in
   components.css, which loads earlier — so the per-component rules in this
   file outranked it and the blend silently stopped applying to cards.

   The catalogue is photographed on pure white; the page is cool grey
   (#F1F2F3). multiply maps the image's white onto whatever is behind it, so
   the product sits on the page instead of inside a white rectangle.

   REMOVE when Phase 3 shoots on the page colour — at that point the
   backgrounds already match and blending only costs contrast on dark goods.
   ══════════════════════════════════════════════════════════════════════ */

.c-card__media img,
.c-hero__media img,
.c-spotlight__media img,
.woocommerce-product-gallery__image img,
.woocommerce ul.products li.product img,
.aljild-plate img {
  mix-blend-mode: multiply;
}

/* multiply composites against the backdrop, so the surface behind the image
   must be opaque and must be the page colour — not white, or the blend has
   nothing to do. */
.c-card__media,
.c-hero__media,
.c-spotlight__media,
.woocommerce-product-gallery__image,
.woocommerce ul.products li.product .product-image,
.aljild-plate {
  background: var(--plate);
}

/* The gallery wrapper and its figures inherit Woo/Kadence white in places. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.single-product .aljild-pdp-top > .woocommerce-product-gallery {
  background: var(--plate);
}

@media (prefers-contrast: more) {
  .c-card__media img,
  .c-hero__media img,
  .c-spotlight__media img,
  .woocommerce-product-gallery__image img,
  .woocommerce ul.products li.product img,
  .aljild-plate img {
    mix-blend-mode: normal;
  }
}


/* ── Empty cart ──────────────────────────────────────────────────────────
   The Blocks empty-cart state ships a black crying-face icon, a dotted
   separator and its own product grid. The grid uses .wc-block-grid classes,
   which none of the card blend rules above match — so its product shots kept
   their white photo grounds as slabs on the grey page. */

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before,
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
  display: none;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  display: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--page-fg);
}

/* The cart's remove control is a 24px glyph — a real tap target on a phone
   needs 44px, so the hit area is grown around it without moving the glyph. */
.wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* Pagination links were 30px wide against a 44px height — the height met the
   touch minimum, the width did not. */
nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
  min-inline-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Woo marks the variable add-to-cart unavailable with a .disabled CLASS, not
   the attribute, so the [disabled] rule above never matched it: it sat at full
   opacity with a pointer cursor while doing nothing. Pointer events stay on —
   Woo's own click handler is what tells the shopper to pick a size. */
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce .single_add_to_cart_button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Tab links were 38px tall on a phone — under the 44px touch minimum, and
   they wrap to two rows there, so mis-taps land on the neighbouring row. */
.woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--font-display);
  font-weight: 400;
}

.wc-block-grid__product-image,
.wc-block-grid__product-link {
  display: block;
  background: var(--plate);
}

.wc-block-grid__product-link img {
  mix-blend-mode: multiply;
}

@media (prefers-contrast: more) {
  .wc-block-grid__product-link img { mix-blend-mode: normal; }
}


/* Kadence content wrappers paint their own ground in several places. On a
   single-ground site they must all resolve to the page colour, or a white
   slab appears behind the content and shows at every image edge. */
.content-bg,
.entry-content-wrap,
.content-container,
.site-container,
.site-main,
body.content-style-boxed .content-bg,
body.content-style-unboxed .site {
  background: var(--page-bg);
}


/* ══════════════════════════════════════════════════════════════════════
   COLLECTION PAGE

   One constraint that does not apply to the homepage: product cells must
   stay uniform. People scan an archive to compare, and varying the crop or
   the size makes comparison harder — a grid that looks livelier but reads
   worse. So the composition lives in the header, the pacing and a single
   editorial interruption, not in the cells.
   ══════════════════════════════════════════════════════════════════════ */

.c-collection-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-l);
  align-items: end;
  padding-block: var(--space-2xl) var(--space-xl);
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--space-2xl);
}

.c-collection-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--page-fg);
  margin: 0;
  text-wrap: balance;
}

.c-collection-head__intro {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--ink-meta);
  max-inline-size: 52ch;
  margin: 0 0 var(--space-xs);
}

.c-collection-head__count {
  font-family: var(--font-mono);
  font-size: var(--stepn-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-meta);
  margin: 0;
}

@media (max-width: 860px) {
  .c-collection-head {
    grid-template-columns: 1fr;
    align-items: start;
    padding-block: var(--space-xl) var(--space-l);
    margin-block-end: var(--space-xl);
  }
}


/* ── Grid ────────────────────────────────────────────────────────────────
   Three across. The earlier two-up rule was reasoned for a nine-product
   homepage selection; an archive paginating twelve at a time fills three
   columns properly and two makes the page needlessly long.                */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* Uniform frames. Comparison depends on every product being cropped the
   same way — this is the one place variation actively hurts. */
.woocommerce ul.products li.product .c-card__media,
.woocommerce ul.products li.product .aljild-card__art,
.woocommerce ul.products li.product a img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  inline-size: 100%;
  background: var(--plate);
}


/* ── Editorial interruption ──────────────────────────────────────────────
   One cell of the grid given over to text, partway down. It breaks the
   rhythm of an otherwise relentless catalogue and puts the material
   argument in front of someone who is already comparing pieces.           */

.c-collection-note {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  border-block: 1px solid var(--accent);
}

.c-collection-note h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  color: var(--page-fg);
  margin: 0;
  max-inline-size: 18ch;
}

.c-collection-note p {
  font-size: var(--stepn-1);
  line-height: 1.7;
  color: var(--ink-meta);
  margin: 0;
  max-inline-size: 34ch;
}

@media (max-width: 520px) {
  .c-collection-note { padding-block: var(--space-l); }
}


/* ── Foot ────────────────────────────────────────────────────────────── */

.woocommerce nav.woocommerce-pagination {
  padding-block-start: var(--space-2xl);
  border-block-start: 1px solid var(--border);
  margin-block-start: var(--space-2xl);
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }


/* ── Archive: one header, not two ────────────────────────────────────────
   Kadence renders its own centred title inside an entry-hero, above the
   asymmetric header this theme provides. Filters cover it where Kadence
   exposes one; this is the backstop, and it also collapses the hero's
   padding so removing the title does not leave a screen of dead space.    */

.tax-product_cat .entry-hero-container,
.post-type-archive-product .entry-hero-container,
.tax-product_cat .entry-hero,
.post-type-archive-product .entry-hero,
.tax-product_cat .page-title.archive-title,
.post-type-archive-product .page-title.archive-title,
.tax-product_cat .archive-description,
.post-type-archive-product .archive-description {
  display: none;
}

/* Woo's own count and sorting are replaced by the header's piece count. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce .kadence-shop-view-switch,
.woocommerce .woocommerce-notices-wrapper:empty {
  display: none;
}


/* ── Kadence archive overrides, measured ─────────────────────────────────
   The <ul> carries `products-list-view` alongside `grid-lg-col-3`. The
   list-view class wins and collapses the grid to a single column. Matching
   its specificity is enough — no !important needed.                       */

.woocommerce ul.products.products-list-view,
ul.products.products-list-view {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-l);
}

@media (max-width: 900px) {
  .woocommerce ul.products.products-list-view,
  ul.products.products-list-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .woocommerce ul.products.products-list-view,
  ul.products.products-list-view { grid-template-columns: 1fr; }
}

/* In list view Kadence lays each card out horizontally. Put it back to a
   vertical card so the three-column grid reads correctly. */
ul.products.products-list-view li.product {
  display: flex;
  flex-direction: column;
}

ul.products.products-list-view li.product .product-details,
ul.products.products-list-view li.product .product-image {
  inline-size: 100%;
  max-inline-size: none;
  padding-inline: 0;
  text-align: start;
}

/* The header carries the piece count; Woo's own line is a duplicate. */
p.woocommerce-result-count,
.woocommerce-result-count,
.kadence-shop-top-row .woocommerce-result-count {
  display: none;
}


/* Backstop for the shop top row, in case the filter name differs by Kadence
   version. The archive header already carries the piece count. */
.kadence-shop-top-row {
  display: none;
}


/* ── List-view backstop ──────────────────────────────────────────────────
   The PHP filter strips `products-list-view`, which is the proper fix. This
   is here because the class is added by the parent theme and its exact
   origin varies by Kadence version — if the filter ever misses, the archive
   silently reverts to horizontal cards.

   !important is used deliberately and only here: the competing declaration
   comes from the parent theme's generated inline CSS, which cannot be
   outranked by specificity from a stylesheet. */

ul.products.products-list-view li.product {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}

ul.products.products-list-view li.product .product-details,
ul.products.products-list-view li.product .product-image {
  inline-size: 100% !important;
  max-inline-size: none !important;
  padding: 0 !important;
}

/* The excerpt belongs on the product page, not in a grid cell — it makes
   cards different heights and turns a comparison into a wall of prose. */
ul.products li.product .woocommerce-product-details__short-description,
ul.products li.product .product-details p:not(.price):not(.c-card__spec) {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════
   CART AND CHECKOUT

   Functional pages. Composition here removes friction rather than adding
   interest: fewer things competing, a clear single next action, and totals
   that stay in view while a long item list scrolls.
   ══════════════════════════════════════════════════════════════════════ */

/* Kadence's page hero leaves ~270px of dead space above the content and a
   centred title, against the asymmetric header used everywhere else. */
/* Every WooCommerce page, not just cart and checkout — scoping this to two
   of them left My Account with a centred title and ~250px of dead space. */
.woocommerce-cart .entry-hero-container-inner,
.woocommerce-checkout .entry-hero-container-inner,
.woocommerce-account .entry-hero-container-inner,
.woocommerce-order-received .entry-hero-container-inner,
.woocommerce-page .entry-hero-container-inner,
.woocommerce-cart .entry-hero,
.woocommerce-checkout .entry-hero,
.woocommerce-account .entry-hero,
.woocommerce-page .entry-hero {
  display: none;
}

.c-checkout-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-l);
  align-items: end;
  padding-block: var(--space-2xl) var(--space-l);
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--space-2xl);
}

.c-checkout-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--page-fg);
  margin: 0;
}

.c-checkout-head p {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--ink-meta);
  margin: 0;
  max-inline-size: 46ch;
}

@media (max-width: 860px) {
  .c-checkout-head {
    grid-template-columns: 1fr;
    align-items: start;
    padding-block: var(--space-xl) var(--space-m);
    margin-block-end: var(--space-xl);
  }
}


/* ── Item rows ───────────────────────────────────────────────────────────
   The excerpt is sales copy. In a cart it is noise between the customer and
   a decision they have already made — and it makes every row a different
   height, so the column of prices stops being scannable.                  */

.wc-block-cart-items__row .wc-block-components-product-metadata__description,
.wc-block-cart-item__wrap .wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__description {
  display: none;
}

.wc-block-cart-items__row {
  padding-block: var(--space-m);
  border-block-end: 1px solid var(--border);
}

/* Give the thumbnail enough size to actually confirm the piece. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  inline-size: 100%;
  max-inline-size: 96px;
  background: var(--plate);
}

.wc-block-cart-item__product .wc-block-components-product-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--page-fg);
  text-decoration: none;
}

.wc-block-cart-item__total,
.wc-block-components-product-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--page-fg);
}

.wc-block-cart-items__header {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  border-block-end: 1px solid var(--page-fg);
}


/* ── Totals ──────────────────────────────────────────────────────────────
   Stays in view while a long item list scrolls — the number a customer is
   deciding against should not require scrolling back.                     */

.wp-block-woocommerce-cart-order-summary-block {
  position: sticky;
  top: calc(var(--aljild-chrome-h) + 1.5rem);
  align-self: start;
}

@media (max-width: 900px), (max-height: 520px) {
  .wp-block-woocommerce-cart-order-summary-block { position: static; }
}

.wc-block-components-totals-item {
  font-family: var(--font-body);
  padding-block: var(--space-2xs);
}

.wc-block-components-totals-footer-item {
  border-block-start: 1px solid var(--page-fg);
  padding-block-start: var(--space-s);
  margin-block-start: var(--space-s);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--page-fg);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.wc-block-components-panel__button {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  min-block-size: 44px;
}


/* ── Checkout ────────────────────────────────────────────────────────────
   One column of form, generously spaced, with the summary alongside. The
   most common checkout failure is density, not missing features.          */

.wc-block-checkout__form .wc-block-components-checkout-step {
  border: 0;
  padding-inline: 0;
  padding-block: var(--space-l) 0;
}

.wc-block-components-checkout-step__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--page-fg);
}

.wc-block-components-checkout-step__description {
  color: var(--ink-meta);
  font-size: var(--stepn-1);
}

.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-checkout__form .wc-block-components-text-input {
  margin-block-start: var(--space-s);
}

.wp-block-woocommerce-checkout-order-summary-block {
  position: sticky;
  top: calc(var(--aljild-chrome-h) + 1.5rem);
  align-self: start;
}

@media (max-width: 900px), (max-height: 520px) {
  .wp-block-woocommerce-checkout-order-summary-block { position: static; }
}


/* ── Blocks checkout, measured ───────────────────────────────────────────
   The inputs carry no class — Blocks styles them structurally — so they must
   be reached by descendant selectors from the block wrappers. Measured on
   the live page: full 0.8px box border, white background on a grey page.

   White fields on a coloured ground are the single loudest thing on a
   checkout. Hairline underlines put the emphasis back on what is typed.    */

.wp-block-woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-cart input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  min-block-size: 48px;
  padding-inline: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--page-fg);
}

.wp-block-woocommerce-checkout input:focus,
.wp-block-woocommerce-checkout select:focus,
.wp-block-woocommerce-checkout textarea:focus,
.wc-block-components-text-input input:focus {
  outline: none;
  border-block-end-color: var(--accent);
  border-block-end-width: 2px;
  box-shadow: none;
}

/* Blocks floats the label into the field; keep it out of the way of the
   value now that there is no box to sit inside. */
.wc-block-components-text-input label {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
}

/* Order summary: no box. Separation is the hairline above the total. */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-order-summary,
.wc-block-components-sidebar {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Descriptions in the summary are sales copy at the point of payment. The
   earlier rule was scoped to cart rows, which is why these survived. */
.wc-block-components-product-metadata__description {
  display: none;
}

.wc-block-components-order-summary-item {
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--border);
}

.wc-block-components-order-summary-item__image img {
  background: var(--plate);
}

/* Blocks draws its own panels around the summary and the payment area. */
.wc-block-components-panel,
.wc-block-checkout__sidebar,
.wc-block-components-radio-control-accordion-option {
  border-radius: 0;
  box-shadow: none;
}


/* ── Blocks selects ──────────────────────────────────────────────────────
   NOTE the prefix: `wc-blocks-` (plural), not `wc-block-` like every other
   Blocks class. A one-character difference, and the reason the country
   select kept its box after the other fields lost theirs.                 */

.wc-blocks-components-select,
.wc-blocks-components-select__container,
.wc-blocks-components-select__select {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  min-block-size: 48px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--page-fg);
}

.wc-blocks-components-select__label {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
}

.wc-blocks-components-select__select:focus {
  outline: none;
  border-block-end-color: var(--accent);
  border-block-end-width: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   REMAINING WOOCOMMERCE COMPONENTS
   ══════════════════════════════════════════════════════════════════════ */

/* ── My account ────────────────────────────────────────────────────────
   Navigation as a quiet column of text links, not a boxed menu.          */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--page-fg);
  border-block-end-color: var(--accent);
}

.woocommerce-account .woocommerce-MyAccount-content {
  font-family: var(--font-body);
  max-inline-size: var(--measure-body);
}

/* Login and register: two columns of form, unboxed. */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
  border: 0;
  padding: 0;
  border-radius: 0;
}

.woocommerce form .form-row label {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-block-end: var(--space-3xs);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  min-block-size: 48px;
  padding-inline: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--page-fg);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-block-end-color: var(--accent);
  border-block-end-width: 2px;
}


/* ── Order tables: orders list, order received, downloads ─────────────── */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.woocommerce-table--order-details {
  border: 0;
  border-collapse: collapse;
  inline-size: 100%;
  font-family: var(--font-body);
}

.woocommerce table.shop_table th {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  font-weight: 500;
  text-align: start;
  padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
  border-block-end: 1px solid var(--page-fg);
}

.woocommerce table.shop_table td {
  padding: var(--space-s) var(--space-s) var(--space-s) 0;
  border-block-end: 1px solid var(--border);
  border-inline: 0;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  border-block-end: 0;
}

.woocommerce .woocommerce-order-overview,
.woocommerce ul.order_details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  margin: 0 0 var(--space-xl);
  padding: 0 0 var(--space-l);
  border-block-end: 1px solid var(--border);
}

.woocommerce ul.order_details li {
  font-family: var(--font-label);
  font-size: var(--stepn-1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  border: 0;
  padding: 0;
  margin: 0;
}

.woocommerce ul.order_details li strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0;
  text-transform: none;
  color: var(--page-fg);
  margin-block-start: var(--space-3xs);
}

/* The thank-you line is the one moment worth setting large. */
.woocommerce .woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  color: var(--page-fg);
  max-inline-size: 24ch;
  margin-block-end: var(--space-l);
  /* It carries .woocommerce-notice--success, so the notice band's accent rule
     landed here — a second hairline directly under the page header's. This
     line is a headline, not a notice. */
  border-block-start: 0;
  padding-block-start: 0;
}

.woocommerce .woocommerce-customer-details address {
  border: 0;
  border-inline-start: 1px solid var(--accent);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s);
  font-style: normal;
  font-family: var(--font-body);
}


/* ── Empty states ────────────────────────────────────────────────────── */

.woocommerce .cart-empty,
.woocommerce .wc-block-cart__empty-cart__title,
.woocommerce-info.woocommerce-no-products-found {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--page-fg);
  text-align: center;
  border: 0;
  padding-block: var(--space-2xl) var(--space-s);
}

.woocommerce .return-to-shop {
  text-align: center;
  padding-block-end: var(--space-3xl);
}


/* ── Search results ──────────────────────────────────────────────────── */

.search-results .page-title,
.woocommerce .woocommerce-info {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--page-fg);
}

.search-no-results .c-empty__title { font-family: var(--font-display); }


/* Gravatar's fallback avatar on My Account is a stock silhouette that says
   nothing. The nav below it is the content. */
.woocommerce-account .kadence-account-avatar,
.woocommerce-account .woocommerce-MyAccount-navigation img.avatar,
.woocommerce-account .woocommerce-MyAccount-user {
  display: none;
}

/* My Account: content left, navigation right, matching the cart's balance. */
@media (min-width: 901px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    inline-size: auto;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    inline-size: auto;
  }
  /* Grid only the two account panels — putting it on .woocommerce swept the
     page header into a column and crushed it to one character per line. */
  .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    grid-template-areas: "header header" "content nav";
    column-gap: var(--space-2xl);
    row-gap: var(--space-xl);
    align-items: start;
  }
  /* The header carries its own bottom margin for the non-grid pages. Inside
     the grid the row-gap owns that space, and the two do not collapse — they
     stacked into ~143px of dead air under the hairline. */
  .woocommerce-account .woocommerce > .c-checkout-head { margin-block-end: 0; }
  /* Kadence wraps the nav in .account-navigation-wrap, so the grid item is
     the wrapper — a grid-area on the nav itself is inert. Measured, not
     assumed: .woocommerce's children are header, wrap, content. */
  .woocommerce-account .c-checkout-head { grid-area: header; }
  .woocommerce-account .account-navigation-wrap {
    grid-area: nav;
    /* Kadence floats this right and lets it shrink to the widest link, which
       left a 100px column inside a 332px track. Grid places it; float is
       noise here. */
    float: none;
    inline-size: 100%;
  }
  /* Kadence's own avatar rule is more specific than a two-class selector. */
  .woocommerce-account .woocommerce .account-navigation-wrap .kadence-account-avatar {
    display: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation { float: none; inline-size: auto; }
  .woocommerce-account .woocommerce-MyAccount-content { grid-area: content; }
}