/* =============================================================================
   TCA pattern styles — Change Agenda custom block patterns
   Enqueued via functions.php (enqueue_block_assets → editor + front end).
   ============================================================================= */

/* --- Insights: Feature post (Newspaper, variant B) ------------------------- */
.tca-feature {
  background: var(--wp--preset--color--custom-white);
  padding: 40px;
}
/* Higher specificity (+ !important on gap) to beat the site's global-styles
   ".wp-block-columns{gap:4em !important}" and core column defaults. */
.wp-block-columns.tca-feature {
  align-items: center;
  gap: 60px !important;
}
@media (min-width: 782px) {
  .tca-feature > .wp-block-column:first-child { flex-basis: 55%; }
  .tca-feature > .wp-block-column:last-child  { flex-basis: 45%; }
}
.tca-feature .tca-cat-chip,
.tca-card .tca-cat-chip,
.tca-sp-top .tca-cat-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-red);
  line-height: 1;
}
/* The category term renders as an <a>; the theme's link color/underline win on
   the anchor, so style it directly (the wrapper color only shows un-linked). */
.tca-feature .tca-cat-chip a,
.tca-card .tca-cat-chip a,
.tca-sp-top .tca-cat-chip a {
  color: var(--wp--preset--color--custom-red);
  text-decoration: none;
}
.tca-feature .tca-cat-chip a:hover,
.tca-card .tca-cat-chip a:hover,
.tca-sp-top .tca-cat-chip a:hover {
  text-decoration: none;
  opacity: 0.75;
}
.tca-feature .wp-block-post-title {
  font-size: 44px;
  line-height: 1.05;
  margin: 12px 0 16px;
}
.tca-feature .wp-block-post-title a {
  color: var(--wp--preset--color--custom-essentially-black);
  text-decoration: none;
}
.tca-feature .wp-block-post-title a:hover {
  color: var(--wp--preset--color--custom-red);
}
.tca-feature .wp-block-post-excerpt,
.tca-feature .wp-block-post-excerpt p,
.tca-feature .tca-custom-excerpt,
.tca-feature .tca-custom-excerpt p {
  font-size: 18px;
  line-height: 1.45;
  color: var(--wp--preset--color--custom-essentially-black);
}
.tca-feature .wp-block-post-date {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
  margin-top: 0;
}
/* Feature meta row: date · reading-time on one line (mockup variant B feature). */
.tca-feature-meta {
  display: flex;
  align-items: baseline;
  margin-top: 20px;
}
.tca-feature-meta .tca-read-time::before {
  content: "·";
  margin: 0 10px;
  color: var(--wp--preset--color--custom-dark-grey);
}

/* --- Insights: Post grid (Newspaper, variant B) ---------------------------- */
/* Grid track gap (from .card-b grid: 50px row / 40px col). Different selector
   from the global ".wp-block-columns{gap:4em !important}", so no !important
   needed here — flagged for visual review in case the layout system overrides. */
.wp-block-post-template.is-layout-grid {
  gap: 50px 40px;
}
/* Responsive column count. The block sets a fixed columnCount:3 which jumps
   straight 3 → 1 and leaves cramped cards in the 600–1000px band (chip wrapping
   over two lines, read-time overlapping it). Step it 3 → 2 → 1 instead.
   !important to beat WP's generated ".wp-container-…{grid-template-columns}". */
.wp-block-post-template.is-layout-grid {
  grid-template-columns: 1fr !important;        /* < 600px: single column */
}
@media (min-width: 600px) {
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;   /* 600–999px */
  }
}
@media (min-width: 1000px) {
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;   /* ≥ 1000px */
  }
}
.tca-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* featured images are 16:9 but the card box is 4/3; core leaves img height:auto,
   so the shorter image leaves whitespace below it (an oversized image→meta gap).
   Make it fill the 4/3 box and crop. */
.tca-card .wp-block-post-featured-image img {
  height: 100%;
  object-fit: cover;
}
.tca-card-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* Both meta rows are core/groups (is-layout-flow), so WP adds a block-gap
   margin-block-start to the 2nd child (the read-time). In these flex rows that
   surfaces as an oversized gap / pushed-down read-time — only appears once a
   2nd child exists. Let flex `gap` own the spacing; zero the flow margins. */
.tca-card > *,
.tca-card-meta-top > *,
.tca-feature-meta > * {
  /* !important so this beats WP's flow blockGap rule (.wp-container > * + *,
     margin-block-start:25px) which ties on specificity but wins on source order
     — otherwise meta-top/date keep a 25px top margin on top of the 16px flex gap. */
  margin-block: 0 !important;
}
.tca-read-time {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
  white-space: nowrap;
}
.tca-card .wp-block-post-title {
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}
.tca-card .wp-block-post-title a {
  color: var(--wp--preset--color--custom-essentially-black);
  text-decoration: none;
}
.tca-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--custom-red);
}
.tca-card .wp-block-post-excerpt,
.tca-card .wp-block-post-excerpt p,
.tca-card .tca-custom-excerpt,
.tca-card .tca-custom-excerpt p {
  font-size: 16px;
  line-height: 24px;
  color: var(--wp--preset--color--custom-essentially-black);
  /* the excerpt's inner <p> is a grandchild, so .tca-card > * margin-reset
     misses it — its default margins inflate the title→excerpt / excerpt→date
     gaps on top of the 16px flex gap. Zero them; let the flex gap own spacing. */
  margin: 0;
}
/* ...but keep spacing BETWEEN paragraphs in multi-paragraph excerpts. First p's
   top + last p's bottom stay 0 (above), so the card gaps stay clean. */
.tca-card .wp-block-post-excerpt p,
.tca-card .tca-custom-excerpt p {
  margin-bottom: 12px;
}
.tca-card .wp-block-post-excerpt p:last-child,
.tca-card .tca-custom-excerpt p:last-child {
  margin-bottom: 0;
}
.tca-card .wp-block-post-date {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
}

/* =============================================================================
   Single post — variant B "Wide Rail"  (translated from post_and_category.css)
   Token map: ink/black → custom-essentially-black · red → custom-red ·
   muted → custom-dark-grey · page bg → custom-light-grey · font → aileron.
   NOTE: mockup body prose is "Inter"; using the theme's Aileron until/unless we
   register Inter — flagged for Kay.
   ============================================================================= */

/* --- Header --- */
.tca-sp-back {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.tca-sp-back a {
  color: var(--wp--preset--color--custom-essentially-black);
  text-decoration: none;
}
.tca-sp-back a:hover { color: var(--wp--preset--color--custom-red); }

/* The content wrapper uses .padded-internal { padding: clamp(...) !important },
   which over-pads the top on a single post. Trim just the top (keep the sides).
   Needs !important + higher specificity to beat that global !important rule. */
body.single .padded-internal {
  padding-top: clamp(16px, 3vw, 36px) !important;
}

.tca-sp-top .tca-sp-title {
  font-size: clamp(38px, 6vw, 84px);   /* variant B feature size, fluid */
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 24px 0 28px;
  max-width: 1040px;
  color: var(--wp--preset--color--custom-essentially-black);
}
.tca-sp-dek p {
  font-size: 19px;
  line-height: 28px;
  max-width: 820px;
  margin: 0 0 40px;
  color: var(--wp--preset--color--custom-essentially-black);
}
.tca-sp-byline {
  gap: 40px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(20, 20, 20, 0.2);
}
.tca-sp-byline .tca-author {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-essentially-black);
}
.tca-sp-byline .tca-by-sub,
.tca-sp-byline .tca-read-time {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
}
.tca-sp-hero { margin: 0 0 80px; }
.tca-sp-hero img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
}
@media (max-width: 781px) {
  .tca-sp-hero img { height: 320px; }
}

/* --- Prose (add the class "tca-prose" to the Post Content block) --- */
/* When Post Content is set to Wide, WP generates a container rule
   ".wp-container-…847 > .alignwide{max-width:1240px}" — specificity (0,2,0),
   same as ours but injected inline (later source order), so it wins. !important
   beats it (the generated rule isn't !important). */
.wp-block-post-content.tca-prose { max-width: 820px !important; }
.tca-prose h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  margin: 56px 0 20px;
  color: var(--wp--preset--color--custom-essentially-black);
}
.tca-prose > h2:first-child { margin-top: 0; }
.tca-prose p {
  font-size: 20px;
  line-height: 32px;
  margin: 0 0 20px;
  color: var(--wp--preset--color--custom-essentially-black);
}
/* lede: first paragraph — larger (drop cap removed per Kay) */
.tca-prose > p:first-of-type {
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
}
.tca-prose blockquote {
  margin: 60px -20px;
  padding: 20px 40px;
  border: 0;
  text-align: center;
}
.tca-prose blockquote p {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  color: var(--wp--preset--color--custom-essentially-black);
  margin: 0;
}
.tca-prose blockquote p::before {
  content: "\201C";
  color: var(--wp--preset--color--custom-red);
  font-size: 70px;
  line-height: 0;
  margin-right: 6px;
  vertical-align: -18px;
}
.tca-prose blockquote p::after {
  content: "\201D";
  color: var(--wp--preset--color--custom-red);
  font-size: 70px;
  line-height: 0;
  margin-left: 6px;
  vertical-align: -18px;
}
.tca-prose blockquote cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
}
.tca-prose ul {
  margin: 20px 0 28px;
  padding: 0;
  list-style: none;
}
.tca-prose ul li {
  font-size: 19px;
  line-height: 30px;
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
  color: var(--wp--preset--color--custom-essentially-black);
}
.tca-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 2px;
  background: var(--wp--preset--color--custom-red);
}
/* ordered lists — keep numbers, match body text size (20px) */
.tca-prose ol {
  margin: 20px 0 28px;
  padding-left: 28px;
}
.tca-prose ol li {
  font-size: 20px;
  line-height: 32px;
  padding-left: 6px;
  margin-bottom: 10px;
  color: var(--wp--preset--color--custom-essentially-black);
}
/* in-content links */
.tca-prose a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wp--preset--color--custom-red);
}
.tca-prose a:hover {
  color: var(--wp--preset--color--custom-red);
}
/* "Filed under:" tag row at the end of a post */
.tca-tags {
  margin-top: 48px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
}
.tca-tags a {
  color: var(--wp--preset--color--custom-red);
  text-decoration: none;
}
.tca-tags a:hover { text-decoration: underline; }

/* --- Client logos (footer) --- */
.tca-client-logos { margin-top: 40px; }
.tca-client-logos__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  margin: 0 0 20px;
}
.tca-client-logos__row {
  align-items: center;
  gap: 44px;
}
.tca-client-logos__row figure { margin: 0; }
.tca-client-logos__row a { display: inline-flex; }
.tca-client-logos__row img {
  display: block;
  height: auto;
  max-width: 100%;
  /* logos are uploaded white-on-transparent, so no filter needed. They read as
     grey on the dark footer only if opacity is below 1 — keep this at 1. */
  opacity: 1;
  transition: opacity 0.15s;
}
.tca-client-logos__row a:hover img { opacity: 0.8; }

/* --- Home: "Our recent post" band (latest post, copy-left / image-right) --- */
.tca-recent-post {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.tca-rp-eyebrow {
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-essentially-black);
  margin: 0 0 40px;
}
.tca-rp-eyebrow .tca-red { color: var(--wp--preset--color--custom-red); }

/* Section eyebrow — small tracked red kicker used across home bands
   (What we do / About Fiona / The book). Matches home_layout .eyebrow. */
.tca-eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-red);
  line-height: 1.2;
  margin: 0 0 20px;
}
.tca-eyebrow .tca-red { color: var(--wp--preset--color--custom-red); }
@media (max-width: 781px) {
  .tca-eyebrow { font-size: 11px; margin-bottom: 12px; }
}
/* Home hero headline ("Lead. Create. Change.").
   This used to carry core's Fit-text option, whose JS wrote an inline font-size sized to
   fill the 620px column — 155px, three lines, 419px of headline. That pushed the tagline
   and the CTAs past the fold on any screen shorter than ~1100px, i.e. most laptops. Fit
   text is now off (the attribute is gone from parts/header-w-ct-as-home.html) and the size
   is set here instead, so it is reviewable and cannot outgrow the viewport. */
.hero-headline > p {
  font-size: clamp(58px, 9.8vw, 124px);
}
/* Short screens: the binding constraint is height, not width, so trade type size for a
   hero that fits. Desktop-only — the vw clamp already handles phones, which scroll. */
@media (min-width: 782px) and (max-height: 940px) {
  .hero-headline > p { font-size: clamp(54px, 7.8vw, 98px); }
  /* …and reclaim some of the band's 100px yoke, for the same reason. Scoped to the header
     so the home page's other padded-home bands keep their rhythm. Needs the extra
     specificity (not just !important): theme.json's custom CSS sets this as an important
     four-sided shorthand, and it prints inline in <head> — after this stylesheet — so an
     equal-specificity rule would lose the tie on source order. */
  header .wp-block-group.padded-home { padding-block: 56px !important; }
  /* The 240px logo single-handedly sets the height of the whole nav row — the menu beside
     it is only 68px — so it costs ~170px of empty space before the headline even starts.
     160px on short screens buys that back. The asset is 240px square, so this is a 1.5x
     downscale: still sharp, and untouched on normal-height screens.
     Scoped to .padded-home, NOT to `header`: the internal header's logo is 150px and the
     checkout header's is 100px, and a bare `header` selector would blow both UP to 160. */
  header .padded-home .wp-block-site-logo,
  header .padded-home .wp-block-site-logo img {
    width: 160px;
    height: auto;
  }
}
/* The headline group is capped at 50% width (good on desktop/tablet);
   widen it on phones so the type isn't tiny. */
@media (max-width: 600px) {
  .hero-headline > * { max-width: 90% !important; }
}

/* Header cart: no icon until there is something in the cart.
   The Mini-Cart block gives us no empty-state class — the wrapper and button markup are
   identical either way — so the count in the button's aria-label is the hook. It IS
   reactive: the block runs on the Interactivity API and rewrites the label when the cart
   changes, so the icon appears on add without a page load.
   Only the BUTTON is hidden, never the wrapper: the drawer is the wrapper's other child,
   and add-to-cart opens the drawer *before* the cart round-trip finishes — hiding the
   wrapper would hide the drawer during exactly those seconds. */
.tca-mini-cart .wc-block-mini-cart__button[aria-label$=": 0"] {
  display: none;
}

/* "About Fiona" portrait. The source is 426x640 (2:3), which at the column's full width
   stood 105px taller than the bio beside it. Narrowed slightly and cropped to 4:5 so it
   finishes above the text rather than hanging past it. object-fit must be set with the
   aspect-ratio or the browser squashes the portrait instead of cropping it.
   object-position distributes the 85px of overflow: 0% takes it all off the bottom (the
   original, too much headroom), 100% all off the top (head touching the frame). 70% takes
   ~60px off the top and leaves ~25px of air above her — checked against renders at 60/70/
   80/90%. Adjust this one number if the portrait is ever recropped. */
#about-fiona .wp-block-column:first-child img {
  display: block;
  width: 88%;
  max-width: 88%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 70%;
}
@media (max-width: 781px) {
  /* Stacked: the portrait has no text to sit beside, so let it run full width. */
  #about-fiona .wp-block-column:first-child img { width: 100%; max-width: 100%; }
}
/* eyebrow + bottom footer row (meta inline with the read-more link).
   Scoped under .tca-recent-post so margins beat the flow-layout blockGap
   container rule (which zeroes direct children's margins). */
.tca-recent-post .tca-eyebrow { margin-bottom: 24px; }
.tca-recent-post .tca-rp-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.tca-recent-post .tca-rp-meta {
  align-items: baseline;
  gap: 8px 14px;
}
.tca-rp-meta .tca-rp-cat,
.tca-rp-meta .tca-rp-cat a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--custom-red);
  text-decoration: none;
}
.tca-rp-meta .wp-block-post-date,
.tca-rp-meta .tca-read-time {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
}
.tca-rp-meta .tca-read-time::before { content: "·"; margin-right: 8px; }
.tca-recent-post .tca-rp-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 20px;
}
.tca-recent-post .tca-rp-title a {
  color: var(--wp--preset--color--custom-essentially-black);
  text-decoration: none;
}
.tca-recent-post .tca-rp-title a:hover { color: var(--wp--preset--color--custom-red); }
.tca-recent-post .tca-custom-excerpt {
  font-size: 16px;
  line-height: 26px;
  color: var(--wp--preset--color--custom-essentially-black);
  max-width: 560px;
  margin: 0 0 28px;
}
.tca-recent-post .tca-custom-excerpt p { margin: 0 0 12px; }
.tca-recent-post .tca-custom-excerpt p:last-child { margin-bottom: 0; }
.tca-recent-post .tca-rp-more {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-essentially-black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tca-recent-post .tca-rp-more::after { content: "\2192"; color: var(--wp--preset--color--custom-red); font-size: 18px; }
.tca-recent-post__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(9, 8, 7, 0.15);
}
@media (max-width: 781px) {
  .tca-recent-post { grid-template-columns: 1fr; gap: 32px; }
  .tca-recent-post .tca-rp-title { font-size: 26px; }
}

/* --- Body grid: prose + TOC rail (variant B). Uses :has() so it collapses to a
   single centred column when the TOC renders nothing (post with no headings). --- */
.tca-sp-body:has(.tca-toc) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 60px;
  align-items: start;
}
.tca-sp-body:not(:has(.tca-toc)) .tca-prose {
  margin-inline: auto;
}
@media (max-width: 781px) {
  .tca-sp-body:has(.tca-toc) { grid-template-columns: 1fr; }
  .tca-toc { display: none; }
}

/* --- TOC rail (variant B "Wide Rail": right-aligned, right border, sticky) --- */
.tca-toc {
  position: sticky;
  top: 40px;
  border-right: 2px solid rgba(20, 20, 20, 0.1);
  padding: 2px 20px 2px 0;
  text-align: right;
}
.tca-toc__title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--wp--preset--color--custom-dark-grey);
  font-weight: 700;
}
.tca-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tca-toc__item { line-height: 1.35; }
.tca-toc__item a {
  font-size: 14px;
  color: var(--wp--preset--color--custom-essentially-black);
  text-decoration: none;
}
.tca-toc__item a:hover { color: var(--wp--preset--color--custom-red); }
.tca-toc__item.is-active a {
  color: var(--wp--preset--color--custom-red);
  font-weight: 700;
}
.tca-toc__progress {
  margin-top: 24px;
  height: 2px;
  background: rgba(20, 20, 20, 0.1);
}
.tca-toc__progress span {
  display: block;
  width: 0;
  height: 2px;
  background: var(--wp--preset--color--custom-red);
  transition: width 0.1s linear;
}
/* anchor offset so a jumped-to heading isn't tucked under the top */
.tca-prose h2[id] { scroll-margin-top: 90px; }

/* prose column wrapper (content + share + newsletter), capped to reading width */
.tca-sp-main { max-width: 820px; }
.tca-sp-body:not(:has(.tca-toc)) .tca-sp-main { margin-inline: auto; }
/* Breathing room below the post (share/tags) before the newsletter band.
   Stacks with .tca-newsletter's 80px top margin. */
.tca-sp-body { padding-bottom: 48px; }

/* --- Share row --- */
.tca-share {
  margin: 60px 0 40px;
  padding: 28px 0;
  border-top: 1px solid rgba(20, 20, 20, 0.18);
  border-bottom: 1px solid rgba(20, 20, 20, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tca-share__label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
}
.tca-share__links { display: flex; gap: 14px; }
.tca-share__links a {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--wp--preset--color--custom-essentially-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--custom-essentially-black);
  transition: background 0.15s, color 0.15s;
}
.tca-share__links a:hover {
  background: var(--wp--preset--color--custom-essentially-black);
  color: #fff;
}
.tca-share__links svg { display: block; }
.tca-share__links a.is-copied::after {
  content: "Copied";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--wp--preset--color--custom-essentially-black);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
}

/* --- Newsletter (placeholder — form not wired to the email stack yet) --- */
.tca-newsletter {
  background: var(--wp--preset--color--custom-essentially-black);
  color: #fff;
  padding: 60px;
  margin: 80px auto 0;
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.tca-newsletter h3 {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  margin: 0 0 16px;
  color: #fff;
}
.tca-newsletter p {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.tca-nl-form { display: flex; flex-direction: column; gap: 12px; }
.tca-nl-form input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 18px;
  padding: 14px 0;
  outline: none;
}
.tca-nl-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.tca-nl-form input:focus { border-bottom-color: var(--wp--preset--color--custom-red); }
.tca-nl-form button {
  align-self: flex-start;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 26px;
  background: var(--wp--preset--color--custom-red);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.tca-nl-form button:hover {
  background: #fff;
  color: var(--wp--preset--color--custom-essentially-black);
}
@media (max-width: 781px) {
  .tca-newsletter { grid-template-columns: 1fr; padding: 36px; }
}

/* --- Related posts band (variant B) — reuses .tca-card + the grid CSS --- */
.tca-sp-related {
  padding: clamp(40px, 8vw, 100px);
}
.tca-sp-related .tca-related-eyebrow {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-dark-grey);
  margin: 0 0 24px;
}
.tca-sp-related .tca-related-title {
  font-size: 44px;
  line-height: 1;
  margin: 0 0 50px;
  color: var(--wp--preset--color--custom-essentially-black);
}
.tca-sp-related .wp-block-query { margin-top: 0; }

/* =============================================================================
   Category archive — variant B "Chip + grid"  (dark hero + chip-bar + grey grid)
   ============================================================================= */
.tca-cat-hero {
  padding: 60px clamp(24px, 7vw, 100px) 40px;
}
.tca-cat-hero .tca-cat-crumb {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
}
.tca-cat-hero .tca-cat-title {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: #fff;
}
.tca-cat-hero .tca-cat-dek {
  font-size: 20px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 40px;
  /* no max-width on the box: it fills the 1240 content and centres exactly like
     the title, so their left edges match. The line length is capped on the <p>. */
}
.tca-cat-hero .tca-cat-dek:empty { display: none; }
.tca-cat-hero .tca-cat-dek p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  max-width: 720px;
}
.tca-cat-hero .tca-cat-count {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.tca-cat-hero .tca-cat-count b { color: var(--wp--preset--color--custom-red); }

/* chip-bar (rendered by the category-chips block) */
.tca-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.tca-chip {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tca-chip:hover {
  border-color: var(--wp--preset--color--custom-red);
  color: var(--wp--preset--color--custom-red);
}
.tca-chip.is-active {
  background: var(--wp--preset--color--custom-red);
  color: #fff;
  border-color: var(--wp--preset--color--custom-red);
}
.tca-chip__n { font-weight: 400; opacity: 0.7; margin-left: 6px; }

/* grey grid body (reuses .tca-card + the responsive post-template grid) */
.tca-cat-body {
  padding: 80px clamp(24px, 7vw, 100px);
}

/* --- Query pagination (numbered) — blog home + category archive grids --- */
.tca-pagination {
  margin-top: 64px;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tca-pagination .wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tca-pagination .page-numbers,
.tca-pagination .wp-block-query-pagination-previous,
.tca-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  color: var(--wp--preset--color--custom-essentially-black);
  text-decoration: none;
  border: 1px solid rgba(20, 20, 20, 0.2);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tca-pagination a.page-numbers:hover,
.tca-pagination .wp-block-query-pagination-previous:hover,
.tca-pagination .wp-block-query-pagination-next:hover {
  border-color: var(--wp--preset--color--custom-red);
  color: var(--wp--preset--color--custom-red);
}
.tca-pagination .page-numbers.current {
  background: var(--wp--preset--color--custom-essentially-black);
  border-color: var(--wp--preset--color--custom-essentially-black);
  color: #fff;
}
.tca-pagination .page-numbers.dots {
  border: 0;
  min-width: 0;
  padding: 0 4px;
}

/* Full-width bands pick up .has-global-padding, whose side padding = the root
   padding (0 here) — that zeroes their horizontal padding and lets content hit
   the screen edge on mobile. Restore it with !important (same tactic the theme's
   own .padded-internal uses). */
.tca-sp-related { padding-inline: clamp(40px, 8vw, 100px) !important; }
.tca-cat-hero,
.tca-cat-body { padding-inline: clamp(24px, 7vw, 100px) !important; }

/* =============================================================================
   Nav search
   =============================================================================
   The hand-rolled .tca-search* styles that lived here are gone with their markup —
   the search is now a core Search block inside the Navigation block (see the
   "Nav search" section further down). Only the rule below survives: it is header
   layout, not search, and still stops the logo shrinking when the nav grows.
   ============================================================================= */

/* Logo container must never shrink when the search input is open */
.padded-home .wp-block-group.alignwide > .wp-block-group:last-child,
.padded-internal .wp-block-group.alignwide > .wp-block-group:last-child {
  flex-shrink: 0;
}


/* =====================================================================
   Internal-page header: vertical padding only
   =====================================================================
   The global styles (Site Editor > Additional CSS) set a four-sided shorthand
   on a SHARED utility:

     .padded-home, .padded-internal { padding: clamp(20px, 7.51vw - 8.17px, 100px) !important; }

   That's 20px at 375px and 100px at 1440px — too much air above and below the
   logo. Scoped to <header> so the footer, home bands and checkout header keep
   their existing values, and only padding-block is touched so the left/right
   gutters keep the shared clamp. Do not edit .padded-internal itself.
   ===================================================================== */
header .padded-internal { padding-block: clamp(20px, 3vw, 40px) !important; }

/* =====================================================================
   Catalyst Cards product page — built to layouts/v5 D-combined.html
   Brief: Clairvoyance/catalyst-cards-build-brief.md

   No gallery widget, no square crops, no frames, no hairline grid.
   Images sit on the page at their own proportions and multiply into the band.
   ===================================================================== */

.tca-pdp {
  /* Design tokens (colors_and_type.css). ink and bone are not in the WP palette;
     the palette's "essentially black" is #141414, which is charcoal, not ink. */
  --tca-ink: rgb(9, 8, 7);
  --tca-charcoal: rgb(20, 20, 20);
  --tca-smoke: rgb(155, 155, 155);
  --tca-stone: rgb(227, 227, 226);
  --tca-bone: rgb(250, 246, 245);
  --tca-paper: #fff;
  --tca-red: rgb(255, 49, 49);

  --tca-band-x: clamp(20px, 4.4vw, 56px);
  --tca-inner: 1168px;

  color: var(--tca-ink);
  font-family: var(--wp--preset--font-family--aileron);
}

/* ---- flow-margin reset ----------------------------------------------
   WordPress emits `:root :where(.is-layout-flow) > * { margin-block-start: 25px }`
   from the global blockGap. On this page that painted a 25px band of page
   background between every section, and stacked 25px on top of every designed
   margin (eyebrow → heading became 41px instead of 16px).

   Zero it inside the PDP and let the explicit margins below own all spacing.
   Every rule after this is prefixed .tca-pdp so it outranks the reset — keep
   that prefix when adding new spacing here, or the reset will eat it.
   --------------------------------------------------------------------- */
/* NOTE ON SPECIFICITY — load-bearing.
   WP's layout rules are printed INLINE in <head>, and this stylesheet is enqueued
   BEFORE them. `:root :where(.is-layout-flow) > *` scores 0,1,0 (the :where() is
   free), so a plain `.tca-pdp > *` ties and then LOSES on source order. That left
   the gaps around <main>'s own children — above the hero and either side of the
   post-content. Every selector here must beat 0,1,0 outright. */
main.tca-pdp { margin-block: 0; }
.tca-pdp.wp-block-group > *,
.tca-pdp .is-layout-flow > *,
.tca-pdp .is-layout-constrained > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
/* The wrapper WooCommerce puts around <main> is itself a flow child. */
.single-product .wp-block-group.woocommerce.product { margin-block: 0; }

/* ---- bands ---------------------------------------------------------- */

/* Two classes deep so this beats core's .has-global-padding, which WP adds to
   full-width constrained groups and which would otherwise stack its own root
   padding on top of the band's. */
.tca-pdp .tca-band {
  padding-block: clamp(48px, 6vw, 78px);
  padding-inline: var(--tca-band-x);
}
.tca-pdp .tca-band--bone { background: var(--tca-bone); }
.tca-pdp .tca-band--stone { background: var(--tca-stone); }
.tca-pdp .tca-band--charcoal { background: var(--tca-charcoal); color: var(--tca-bone); }

/* Cap the inner column at the design's content width, overriding the block
   layout's own contentSize so every band lines up regardless of how it was authored. */
.tca-pdp .tca-band > :where(:not(.alignfull)) {
  max-width: var(--tca-inner);
  margin-inline: auto;
}

/* Photos are on near-white grounds; multiply merges them into the bone band.
   Only valid over near-white — if an image moves to stone or charcoal it needs a
   real cutout instead. The hero cover PNG has true alpha and is excluded. */
.tca-pdp .tca-blend img { mix-blend-mode: multiply; }

.tca-pdp figure { margin: 0; }
.tca-pdp img { height: auto; max-width: 100%; display: block; }

.tca-pdp .tca-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tca-smoke);
  font-weight: 700;
  margin: 0;
}
.tca-pdp .tca-sec-h {
  font-size: clamp(26px, 2.9vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 16px 0 0;
}

/* ---- 1 · hero ------------------------------------------------------- */

.tca-pdp .tca-hero { padding-block: clamp(48px, 6.2vw, 80px) clamp(56px, 7.2vw, 92px); }

.tca-pdp .tca-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.tca-pdp .tca-hero-media {
  position: relative;
  height: 560px;
}
.tca-pdp .tca-hero-desk {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 372px;
  max-width: 68%;
}
.tca-pdp .tca-hero-cover {
  position: absolute;
  left: 12px;
  top: -26px;
  width: 234px;
  max-width: 44%;
  transform: rotate(-7deg);
  filter: drop-shadow(0 22px 34px rgba(9, 8, 7, 0.26));
}
.tca-pdp .tca-hero-caption {
  position: absolute;
  left: 34px;
  bottom: 44px;
  width: 190px;
  margin: 0;
  border-top: 2px solid var(--tca-ink);
  padding-top: 12px;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---- buy column ----------------------------------------------------- */

.tca-pdp .tca-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 420px;
}

.tca-pdp .tca-buy-title.wp-block-post-title {
  font-size: clamp(38px, 4.1vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 14px 0 0;
  color: var(--tca-ink);
}
.tca-pdp .tca-buy-sub {
  font-size: 19px;
  line-height: 1.45;
  margin: 14px 0 0;
  opacity: 0.78;
}
.tca-pdp .tca-buy-sub p { margin: 0; }

.tca-pdp .tca-buy-rule {
  width: 56px;
  height: 2px;
  background: var(--tca-ink);
  border: 0;
  margin: 30px 0 0;
  opacity: 1;
}

/* Price and its currency note share a baseline row. */
.tca-pdp .tca-buy-price { margin: 28px 0 0; }
.tca-pdp .tca-buy-price .wc-block-components-product-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: clamp(28px, 2.9vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tca-ink);
}
.tca-pdp .tca-price-note {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tca-smoke);
}

.tca-pdp .tca-buy-stock {
  font-size: 13px;
  opacity: 0.7;
  margin: 10px 0 0;
}

/* ---- quantity stepper + add to cart --------------------------------- */

.tca-pdp .tca-buy form.cart {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 30px 0 0;
  flex-wrap: wrap;
}
.tca-pdp .tca-buy form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid rgba(9, 8, 7, 0.22);
  height: 52px;
  float: none;
  margin: 0;
}
.tca-pdp .tca-buy form.cart .quantity label { display: none; }

.tca-pdp .tca-buy .tca-step {
  width: 46px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  color: var(--tca-ink);
  padding: 0;
}
.tca-pdp .tca-buy .tca-step:hover { background: rgba(9, 8, 7, 0.06); }

.tca-pdp .tca-buy form.cart input.qty {
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--tca-ink);
  -moz-appearance: textfield;
}
.tca-pdp .tca-buy form.cart input.qty::-webkit-outer-spin-button,
.tca-pdp .tca-buy form.cart input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tca-pdp .tca-buy form.cart .single_add_to_cart_button {
  background: var(--tca-ink);
  color: var(--tca-bone);
  height: 52px;
  display: inline-flex;
  align-items: center;
  padding: 0 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  transition: background 0.2s ease;
}
.tca-pdp .tca-buy form.cart .single_add_to_cart_button:hover { background: var(--tca-red); }

/* Add to cart is AJAX (see tca-pdp.js) — the drawer opening is the confirmation, so
   there is no page reload and no green notice. This covers the short gap between the
   click and the drawer sliding in. */
.tca-pdp .tca-buy form.cart.tca-adding { cursor: progress; }
.tca-pdp .tca-buy form.cart.tca-adding .single_add_to_cart_button {
  opacity: 0.72;
  pointer-events: none;
}

/* Volume pricing: one quiet line, never a table. Reserved height stops the
   layout jumping when it swaps to the tier-applied wording. */
.tca-pdp .tca-tier-line {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 400px;
  min-height: 42px;
  opacity: 0.75;
}
.tca-pdp .tca-tier-line strong { opacity: 1; }
.tca-pdp .tca-tier-saving { opacity: 0.72; }

.tca-pdp .tca-buy-shipping {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tca-smoke);
  margin: 28px 0 0;
  border-top: 1px solid rgba(9, 8, 7, 0.12);
  padding-top: 18px;
}

/* ---- 2 · intro ------------------------------------------------------ */

.tca-pdp .tca-intro > :where(:not(.alignfull)) {
  max-width: 800px;
  margin-inline: 0;
}
.tca-pdp .tca-intro-lead {
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.48;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.tca-pdp .tca-intro p + p {
  font-size: 16px;
  line-height: 1.72;
  opacity: 0.8;
  margin: 22px 0 0;
}

/* ---- 3 · what's inside ---------------------------------------------- */

/* The site's global styles force `.wp-block-columns { gap: 4em !important }`,
   so the design's 72px needs !important to land. Ratios use flex-grow rather
   than percentage flex-basis so the gap doesn't push the columns into overflow:
   the design is minmax(0,1fr) / minmax(0,1.1fr). */
.tca-pdp .tca-inside-cols.wp-block-columns,
.tca-pdp .tca-designed-cols.wp-block-columns {
  gap: clamp(32px, 5.6vw, 72px) !important;
  align-items: center;
}
.tca-pdp .tca-inside-cols > .tca-inside-media { flex: 1 1 0 !important; }
.tca-pdp .tca-inside-cols > .tca-inside-copy { flex: 1.1 1 0 !important; }

.tca-pdp .tca-inside-media .wp-block-image { display: flex; justify-content: center; }
.tca-pdp .tca-inside-media img { width: 392px; max-width: 100%; }

.tca-pdp .tca-inside-list {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tca-pdp .tca-inside-list > li {
  position: relative;
  padding-left: 25px;
  font-size: 15.5px;
  line-height: 1.62;
}
/* Square ink markers — the design's 9px bullet, not a disc. */
.tca-pdp .tca-inside-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--tca-ink);
}
.tca-pdp .tca-domains {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tca-pdp .tca-domains li {
  border: 1px solid rgba(9, 8, 7, 0.22);
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.tca-pdp .tca-domains li::before { display: none; }

/* ---- 4 · testimonial ------------------------------------------------ */

.tca-pdp .tca-quote > :where(:not(.alignfull)) {
  max-width: 860px;
  margin-inline: 0;
}
.tca-pdp .tca-quote-body.wp-block-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
}
.tca-pdp .tca-quote-body p {
  font-size: clamp(23px, 2.5vw, 29px);
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.tca-pdp .tca-quote-attr {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 26px 0 0;
  font-size: 13px;
}
.tca-pdp .tca-quote-attr strong { font-weight: 700; letter-spacing: 0.06em; }
.tca-pdp .tca-quote-org { color: var(--tca-smoke); }

/* ---- 5 · designed for ----------------------------------------------- */

.tca-pdp .tca-designed-media .wp-block-image { display: flex; justify-content: center; }
.tca-pdp .tca-designed-media img { width: 400px; max-width: 100%; }

.tca-pdp .tca-designed-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.tca-pdp .tca-designed-list > li {
  font-size: 16px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(9, 8, 7, 0.14);
}

/* ---- 6 · close ------------------------------------------------------ */

.tca-pdp .tca-close {
  padding-block: clamp(56px, 6.7vw, 86px) clamp(60px, 7.5vw, 96px);
  text-align: center;
}
.tca-pdp .tca-close-h {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 auto;
  max-width: 760px;
}
.tca-pdp .tca-close-cta {
  background: var(--tca-ink);
  color: var(--tca-bone);
  height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 0 44px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 34px auto 0;
  transition: background 0.2s ease;
}
.tca-pdp .tca-close-cta:hover { background: var(--tca-red); color: var(--tca-bone); }
.tca-pdp .tca-close-fine {
  font-size: 12.5px;
  color: var(--tca-smoke);
  margin: 18px 0 0;
}

/* ---- responsive ------------------------------------------------------ */

/* The hero's absolute composition can't survive a narrow column — reflow it to
   a stack rather than letting the artwork overlap the buy column. */
@media (max-width: 900px) {
  .tca-pdp .tca-hero-grid { grid-template-columns: 1fr; }
  .tca-pdp .tca-buy { max-width: none; }

  .tca-pdp .tca-hero-media {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 16px;
  }
  .tca-pdp .tca-hero-desk,
  .tca-pdp .tca-hero-cover {
    position: static;
    width: auto;
    max-width: 100%;
  }
  .tca-pdp .tca-hero-cover {
    order: -1;
    transform: rotate(-4deg);
    align-self: center;
  }
  .tca-pdp .tca-hero-caption {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    max-width: 260px;
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .tca-pdp .tca-hero-media { grid-template-columns: 1fr; justify-items: center; }
  .tca-pdp .tca-hero-cover { max-width: 62%; }
  .tca-pdp .tca-hero-desk { max-width: 88%; }
  .tca-pdp .tca-buy form.cart { gap: 10px; }
  .tca-pdp .tca-buy form.cart .single_add_to_cart_button { padding: 0 26px; flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   Nav search — core Search block nested inside the Navigation block
   =====================================================================
   Replaces the hand-rolled .tca-search markup that used to sit BESIDE the nav
   (and so never wrapped with it or collapsed into the hamburger). Core's
   "button only" mode gives the expand/collapse, focus move, Escape-to-close and
   aria-expanded for free via the Interactivity API — we only dress it.

   Motion values from layouts/v4/blog_layout.css .tca-search-input:
   width 0 → 220px over --dur-slow, border/opacity over --dur-base.
   ===================================================================== */

header .tca-nav-search {
  --tca-dur-base: 200ms;
  --tca-dur-slow: 320ms;
  --tca-ease: cubic-bezier(0.2, 0, 0, 1);
  align-items: center;
  border: 0;
  width: auto;
  max-width: 100%;
}
/* The <li> (added by tca_wrap_nav_search_in_li) is the actual flex item of the nav's
   <ul>. Collapsed it is only the icon wide, so it hugs its content and packs onto the
   line after "Contact Us"; expanded it grows to the field width and drops to the next
   line only if there is genuinely no room. */
header .tca-nav-search-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
header .tca-nav-search .wp-block-search__inside-wrapper {
  flex: 0 0 auto;
  width: auto;
}

/* Default state: icon only — no border, no background, no visible field. */
header .tca-nav-search .wp-block-search__button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  color: currentColor;
  line-height: 0;
  cursor: pointer;
  transition: color var(--tca-dur-base) var(--tca-ease);
}
header .tca-nav-search .wp-block-search__button:hover,
header .tca-nav-search .wp-block-search__button:focus-visible {
  color: var(--wp--preset--color--custom-red);
  background: transparent;
}
header .tca-nav-search .wp-block-search__button svg {
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  fill: currentColor;
}

header .tca-nav-search .wp-block-search__inside-wrapper {
  border: 0;
  padding: 0;
  transition: width var(--tca-dur-slow) var(--tca-ease);
}

/* Open state: the underline slides out with the field. */
header .tca-nav-search .wp-block-search__input {
  width: 220px;
  margin-left: 16px;
  padding: 0 0 6px;
  /* Fixed height, applied in BOTH states. Letting the box grow on open (padding +
     underline took it 22px → 28px) made the flex line taller, which re-centred the
     nav links and nudged the whole menu down ~2px — then back up on blur. Only the
     width should animate. 28px = 18px text at normal line-height + 6px + border. */
  height: 28px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--wp--preset--font-family--aileron);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  overflow: hidden;
  transition:
    width var(--tca-dur-slow) var(--tca-ease),
    margin var(--tca-dur-slow) var(--tca-ease),
    opacity var(--tca-dur-base) var(--tca-ease),
    border-color var(--tca-dur-base) var(--tca-ease);
}
header .tca-nav-search .wp-block-search__input::placeholder { color: rgba(255, 255, 255, 0.5); }
header .tca-nav-search .wp-block-search__input:focus {
  outline: 0;
  border-bottom-color: var(--wp--preset--color--custom-red);
}

/* Collapsed — core toggles this class on the form. */
header .tca-nav-search.wp-block-search__searchfield-hidden .wp-block-search__input {
  width: 0;
  margin-left: 0;
  opacity: 0;
  border-bottom-color: transparent;
  /* height deliberately NOT reset — see above. */
}

/* Desktop / overlay swap. Exactly one of the two forms is displayed at a time;
   `display: none` also removes the other from the accessibility tree, so there is
   never a visible-but-aria-hidden field. No JavaScript involved. */
header .tca-nav-search-plain { display: none; }

header .wp-block-navigation__responsive-container.is-menu-open .tca-nav-search-icon { display: none; }
header .wp-block-navigation__responsive-container.is-menu-open .tca-nav-search-item {
  width: 100%;
  flex: 1 1 auto;
  display: block;
}
header .wp-block-navigation__responsive-container.is-menu-open .tca-nav-search-plain {
  display: block;
  width: 100%;
  margin: 28px 0 0;
}
header .wp-block-navigation__responsive-container.is-menu-open .tca-nav-search-plain__input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--wp--preset--font-family--aileron);
  /* Typed keywords read as normal input text, not as a nav label. */
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.02em;
  padding: 6px 0;
}
header .wp-block-navigation__responsive-container.is-menu-open .tca-nav-search-plain__input:focus {
  outline: 0;
  border-bottom-color: var(--wp--preset--color--custom-red);
}
header .wp-block-navigation__responsive-container.is-menu-open .tca-nav-search-plain__input::placeholder {
  color: inherit;
  opacity: 0.55;
}

/* =====================================================================
   Checkout — built to layouts/v4 shop_layout.css (.co-*)
   =====================================================================
   v5 never covered checkout, so v4 is the reference here (agreed 2026-08-18).
   The WooCommerce Checkout block already has the shape v4 assumes — a fields
   column plus a summary rail — so this is a restyle, not a rebuild:

     .co-wrap  →  .wc-block-checkout            (grid 1fr / 470px)
     .co-form  →  .wc-block-checkout__main
     .co-rail  →  .wc-block-checkout__sidebar   (bone, hairline left border)

   Full-bleed on purpose: the bone rail runs to the right edge in the design.
   ===================================================================== */

.tca-checkout {
  --tca-ink: rgb(9, 8, 7);
  --tca-smoke: rgb(155, 155, 155);
  --tca-stone: rgb(227, 227, 226);
  --tca-bone: rgb(250, 246, 245);
  --tca-paper: #fff;
  --tca-red: rgb(255, 49, 49);

  background: var(--tca-paper);
  color: var(--tca-ink);
  font-family: var(--wp--preset--font-family--aileron);
}

/* Same blockGap trap as the product page — WP's inline layout rules are printed
   after this stylesheet, so anything at 0,1,0 loses the tie. Keep two classes. */
main.tca-checkout { margin-block: 0; }
.tca-checkout.wp-block-group > *,
.tca-checkout .is-layout-flow > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---- head ----------------------------------------------------------- */

.tca-checkout {
  --tca-co-gutter: clamp(20px, 3.4vw, 48px);
  /* Bands bleed, CONTENT is constrained: this is the gap between the viewport edge and
     the 1240px content column. Without it the form stretched the full width of a 4K
     screen and the summary pinned itself to the browser edge. */
  --tca-co-inset: max(var(--tca-co-gutter), calc((100vw - 1240px) / 2));
}
.tca-checkout .tca-co-head {
  background: var(--tca-paper);
  max-width: none;
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 52px) var(--tca-co-inset) 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(9, 8, 7, 0.12);
}
.tca-checkout .tca-co-title {
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  color: var(--tca-ink);
}
.tca-checkout .tca-co-back {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tca-smoke);
}
.tca-checkout .tca-co-back a { color: var(--tca-smoke); text-decoration: none; }
.tca-checkout .tca-co-back a:hover { color: var(--tca-red); }

/* ---- two columns ---------------------------------------------------- */

/* Grid ONLY the sidebar-layout. .wc-block-checkout is its ancestor, and gridding both
   nested one inside the other — the inner split then ran in the outer's 1fr track and
   the whole checkout sat squashed against the left edge at ~915px. */
.tca-checkout .wc-block-checkout {
  display: block;
  background: var(--tca-paper);
  padding-top: 0;
}
.tca-checkout .wc-block-components-sidebar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 0;
  background: var(--tca-paper);
  /* Full-bleed, like every other band on the site: capping this at 1240px and centring
     it left the whole checkout floating inside a ~73px margin on all sides, unlike any
     other page. The bone rail runs to the right edge again; the FORM is what gets
     aligned, using the same inset as the product page's content (1168px inner). */
  max-width: none;
  margin-inline: 0;
  /* Inset on both sides: the summary panel is a defined 470px column that ends at the
     container edge, not a band that bleeds to the browser edge (Kay, 2026-08-19). */
  padding-inline: var(--tca-co-inset);
  grid-template-columns: minmax(0, 1fr) 470px;
}
.tca-checkout .wc-block-checkout__main {
  /* The inset now lives on the grid container (above), so the column starts flush. */
  padding: clamp(32px, 4.5vw, 60px) clamp(20px, 5.7vw, 80px) clamp(60px, 8vw, 110px) 0;
  margin: 0;
  max-width: none;
  width: auto;
}
.tca-checkout .wc-block-checkout__sidebar {
  background: var(--tca-bone);
  border-left: 1px solid rgba(9, 8, 7, 0.12);
  border-right: 1px solid rgba(9, 8, 7, 0.12);
  padding: clamp(32px, 4.5vw, 60px) var(--tca-co-gutter) clamp(60px, 8vw, 110px);
  margin: 0;
  max-width: none;
  width: auto;
}

/* ---- field sections -------------------------------------------------- */

.tca-checkout .wc-block-components-checkout-step {
  margin-bottom: 52px;
  padding: 0;
  border: 0;
}
.tca-checkout .wc-block-components-checkout-step:last-child { margin-bottom: 0; }

/* Step headings, per the v1 archive layout Kay linked:
     .num        28x28 ink square, white 13px bold
     section>h2  22px/700 ink, flex, 14px gap
   (Not the small red eyebrow the later v4 file uses — Kay picked this treatment.) */
.tca-checkout .wc-block-components-checkout-step__title {
  font-family: var(--wp--preset--font-family--aileron);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tca-ink);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* The rail's "Order summary" heading keeps the small uppercase treatment. */
.tca-checkout .wc-block-checkout__sidebar .wc-block-components-title {
  font-family: var(--wp--preset--font-family--aileron);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tca-ink);
  margin: 0 0 22px;
}
.tca-checkout .wc-block-components-checkout-step__heading { margin: 0 0 22px; }
.tca-checkout .wc-block-components-checkout-step__description {
  font-size: 13px;
  color: var(--tca-smoke);
  margin: -14px 0 18px;
}

/* ---- inputs ---------------------------------------------------------- */

/* v4 puts the label ABOVE the field; WooCommerce ships floating labels, so the
   label is un-floated here rather than animated into the box. */
.tca-checkout .wc-block-components-text-input,
.tca-checkout .wc-block-components-country-input,
.tca-checkout .wc-block-components-state-input {
  position: static;
  margin-top: 16px;
}
.tca-checkout .wc-block-components-text-input label,
.tca-checkout .wc-block-components-country-input label,
.tca-checkout .wc-block-components-state-input label {
  position: static;
  transform: none !important;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tca-smoke);
  margin: 0 0 8px;
  padding: 0;
  line-height: 1.2;
  max-width: none;
  overflow: visible;
}
.tca-checkout .wc-block-components-text-input input[type="text"],
.tca-checkout .wc-block-components-text-input input[type="email"],
.tca-checkout .wc-block-components-text-input input[type="tel"],
.tca-checkout .wc-block-components-text-input input[type="number"],
.tca-checkout .wc-block-components-address-form input,
.tca-checkout .wc-block-components-combobox input,
.tca-checkout select {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  padding: 0 16px;
  border: 1px solid rgba(9, 8, 7, 0.25);
  border-radius: 0;
  background: var(--tca-paper);
  font-family: var(--wp--preset--font-family--aileron);
  font-size: 16px;
  color: var(--tca-ink);
}
.tca-checkout .wc-block-components-text-input input:focus,
.tca-checkout .wc-block-components-address-form input:focus,
.tca-checkout select:focus {
  outline: 0;
  border-color: var(--tca-ink);
  box-shadow: none;
}

/* ---- selectable rows (shipping / payment) ---------------------------- */

.tca-checkout .wc-block-components-radio-control__option {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 19px 22px;
  border: 1px solid rgba(9, 8, 7, 0.2);
  background: var(--tca-paper);
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 0;
}
.tca-checkout .wc-block-components-radio-control__option:hover { border-color: rgba(9, 8, 7, 0.5); }
.tca-checkout .wc-block-components-radio-control__option-checked,
.tca-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--tca-ink);
  box-shadow: inset 0 0 0 1px var(--tca-ink);
}
/* The design's marker is a 14px SQUARE, not a circle. */
.tca-checkout .wc-block-components-radio-control__input {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
  border: 1px solid var(--tca-ink);
  border-radius: 0;
  background: transparent;
}
.tca-checkout .wc-block-components-radio-control__input:checked {
  background: var(--tca-red);
  border-color: var(--tca-red);
  box-shadow: none;
}
.tca-checkout .wc-block-components-radio-control__input:checked::before,
.tca-checkout .wc-block-components-radio-control__input::before { display: none; }
.tca-checkout .wc-block-components-radio-control__label-group,
.tca-checkout .wc-block-components-radio-control__option-layout { flex: 1; }
.tca-checkout .wc-block-components-radio-control__label { font-size: 16px; color: var(--tca-ink); }
.tca-checkout .wc-block-components-radio-control__secondary-label,
.tca-checkout .wc-block-components-radio-control__description {
  font-size: 13px;
  color: var(--tca-smoke);
  margin-top: 3px;
}

/* ---- place order ----------------------------------------------------- */

.tca-checkout .wc-block-components-checkout-place-order-button,
.tca-checkout .wc-block-checkout__actions button {
  width: 100%;
  height: 60px;
  background: var(--tca-ink);
  color: var(--tca-paper);
  border: 0;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--aileron);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}
.tca-checkout .wc-block-components-checkout-place-order-button:hover,
.tca-checkout .wc-block-checkout__actions button:hover { background: var(--tca-red); }
.tca-checkout .wc-block-checkout__actions_row { margin-top: 8px; }

/* ---- summary rail ---------------------------------------------------- */

.tca-checkout .wc-block-components-checkout-order-summary__title,
.tca-checkout .wc-block-checkout__sidebar .wc-block-components-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tca-ink);
  margin: 0 0 26px;
}
/* The item has FOUR children (image, description, a screen-reader total label, and the
   total price). Forcing a 2-column grid wrapped the price onto a second row under the
   image, which read as a stray price between the item and the coupons. Leave core's own
   layout alone and just set the image size and rhythm. */
.tca-checkout .wc-block-components-order-summary-item {
  margin-bottom: 26px;
  padding: 0;
}
.tca-checkout .wc-block-components-order-summary-item__image { width: 80px; }
.tca-checkout .wc-block-components-order-summary-item__image img { width: 80px; height: auto; }
.tca-checkout .wc-block-components-product-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tca-ink);
}
.tca-checkout .wc-block-components-totals-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--tca-ink);
  padding: 7px 0;
}
.tca-checkout .wc-block-components-totals-item__description { color: var(--tca-smoke); font-size: 13px; }
.tca-checkout .wc-block-components-totals-footer-item {
  font-weight: 800;
  font-size: 26px;
  padding-top: 16px;
  margin-top: 10px;
  border-top: 1px solid rgba(9, 8, 7, 0.15);
}
.tca-checkout .wc-block-components-totals-footer-item-tax {
  font-size: 12px;
  font-weight: 400;
  color: var(--tca-smoke);
}

/* ---- express payments (checkout only — removed from product and cart) -- */

.tca-checkout .wc-block-components-express-payment__title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tca-smoke);
}

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .tca-checkout .wc-block-checkout,
  .tca-checkout .wc-block-components-sidebar-layout { grid-template-columns: 1fr; }
  .tca-checkout .wc-block-checkout__sidebar {
    border-left: 0;
    border-top: 1px solid rgba(9, 8, 7, 0.12);
  }
}

/* =====================================================================
   Cart drawer — core Mini-Cart block styled to layouts/v4 (.drawer)
   =====================================================================
   The cart is a slide-out drawer, not a page (v4 designs it that way, and with
   one product a cart page is a detour). /cart/ still works for anyone who lands
   on it directly — it is a fallback, deliberately left plain.

   Add-to-cart on the product page is a normal form POST, so the page reloads and
   the badge updates; the drawer opens from the header icon. No AJAX add-to-cart.
   ===================================================================== */

/* NB: .wc-block-mini-cart__drawer and .wc-block-components-drawer are the SAME
   element, not nested — a descendant selector between them matches nothing. */
.wc-block-mini-cart__drawer.wc-block-components-drawer {
  width: 490px;
  max-width: 100vw;
  /* Without this the border pushes the drawer 1px past the viewport on a phone. */
  box-sizing: border-box;
  background: rgb(250, 246, 245);
  box-shadow: -36px 0 70px rgba(0, 0, 0, 0.4);
  border-radius: 0;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
  background: rgb(250, 246, 245);
  border-radius: 0;
}
.wc-block-components-drawer__screen-overlay { background: rgba(9, 8, 7, 0.35); }

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  font-family: var(--wp--preset--font-family--aileron);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(9, 8, 7);
  margin: 0;
  padding: 26px 32px;
  border-bottom: 1px solid rgba(9, 8, 7, 0.15);
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close { color: rgb(9, 8, 7); }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover { color: rgb(255, 49, 49); }

.wc-block-mini-cart__drawer .wc-block-mini-cart__items { padding: 30px 32px; }

/* The row is markup-wise a <tr> but core lays it out with `display: grid` over four
   tracks (80px 132px 91px 119px), with the product cell spanning tracks 2-3. Setting a
   width on the image cell overflows its 80px track and slides under the product text —
   widen the TRACK instead, and let the image fill it. */
.wc-block-mini-cart__drawer .wc-block-mini-cart-items { border: 0; }
.wc-block-mini-cart__drawer .wc-block-cart-items__row {
  grid-template-columns: 96px 1fr auto auto;
  column-gap: 22px;
  border-bottom: 1px solid rgba(9, 8, 7, 0.14);
  padding-bottom: 28px;
}
.wc-block-mini-cart__drawer td.wc-block-cart-item__image img { width: 96px; max-width: 100%; }
/* Core sets 14px/500 from `table.wc-block-cart-items .wc-block-cart-items__row
   .wc-block-components-product-name` (0,3,1) — this has to out-specify that. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-mini-cart__drawer a.wc-block-components-product-name {
  font-family: var(--wp--preset--font-family--aileron);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.1;
  color: rgb(9, 8, 7);
  text-decoration: none;
  margin-bottom: 6px;
  /* No `display` here: the row contains BOTH a <span> and an <a> with this class and
     core hides one of them: forcing display printed the product name twice. */
}
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(155, 155, 155);
}
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover { color: rgb(255, 49, 49); }

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
  padding: 26px 32px 32px;
  border-top: 1px solid rgba(9, 8, 7, 0.15);
  background: #fff;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: rgb(9, 8, 7);
  padding: 7px 0;
}

/* Core stacks these as a flex ROW, with "view cart" first in the DOM. The design has
   the ink block button on top and a quiet text link beneath, so: column-reverse. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
}
.wc-block-mini-cart__drawer a.wc-block-mini-cart__footer-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background: rgb(9, 8, 7);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 20px;
  /* These render as <a>, and core's own padding otherwise pushes them to ~81px. */
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  transition: background 0.2s ease;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover { background: rgb(255, 49, 49); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart {
  display: block;
  width: 100%;
  height: auto;
  background: none;
  border: 0;
  /* Core draws this button's outline as an inset box-shadow in currentColor, from a
     selector we can't outrank without silliness. One property, one !important. */
  box-shadow: none !important;
  text-decoration: none;
  margin-top: 16px;
  padding: 6px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(155, 155, 155);
  text-align: center;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart:hover { color: rgb(9, 8, 7); }

/* Loading state — the drawer opens immediately on Add to cart and spins until the
   mini-cart has caught up. Hiding the stale contents matters: without it the drawer
   briefly shows the PREVIOUS cart (or an empty one) before flipping to the new. */
.wc-block-mini-cart__drawer.tca-cart-loading .wc-block-mini-cart__items,
.wc-block-mini-cart__drawer.tca-cart-loading .wc-block-mini-cart__footer,
.wc-block-mini-cart__drawer.tca-cart-loading .wc-block-mini-cart__empty-cart-wrapper {
  visibility: hidden;
}
.wc-block-mini-cart__drawer.tca-cart-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(9, 8, 7, 0.18);
  border-top-color: rgb(9, 8, 7);
  border-radius: 50%;
  animation: tca-spin 640ms linear infinite;
}
@keyframes tca-spin { to { transform: rotate(360deg); } }

/* A frozen ring reads as a hung spinner, so fade instead of rotate. */
@media (prefers-reduced-motion: reduce) {
  .wc-block-mini-cart__drawer.tca-cart-loading::after {
    animation: tca-pulse 1.1s ease-in-out infinite;
    border-top-color: rgba(9, 8, 7, 0.18);
    border-color: rgb(9, 8, 7);
  }
  @keyframes tca-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
}

/* Header trigger: icon + count, inheriting the header's white on graphite. */
header .wc-block-mini-cart__button {
  color: currentColor;
  padding: 0;
  background: transparent;
}
header .wc-block-mini-cart__button:hover { color: var(--wp--preset--color--custom-red); }
header .wc-block-mini-cart__badge {
  background: var(--wp--preset--color--custom-red);
  color: #fff;
  font-weight: 700;
}

/* =====================================================================
   Order received — layouts/v4 (.or-*)
   ===================================================================== */

.tca-or {
  /* Bands bleed, content is constrained to the same 1240px column as the checkout and
     the product page (Kay, 2026-08-19) — it was running the full width of the viewport. */
  --tca-or-inset: max(clamp(20px, 6vw, 80px), calc((100vw - 1240px) / 2));

  --tca-ink: rgb(9, 8, 7);
  --tca-charcoal: rgb(20, 20, 20);
  --tca-smoke: rgb(155, 155, 155);
  --tca-bone: rgb(250, 246, 245);
  --tca-red: rgb(255, 49, 49);
  background: #fff;
  color: var(--tca-ink);
  font-family: var(--wp--preset--font-family--aileron);
}
main.tca-or { margin-block: 0; }
.tca-or.wp-block-group > *,
.tca-or .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }

.tca-or .tca-or-hero {
  background: #fff;
  padding: clamp(64px, 9vw, 130px) var(--tca-or-inset) clamp(56px, 7vw, 100px);
  text-align: center;
}
.tca-or .tca-or-hero .tca-eyebrow {
  color: var(--tca-red);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.tca-or .tca-or-title {
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 22px auto 26px;
  max-width: 900px;
  text-wrap: pretty;
}
.tca-or .tca-or-hero p {
  font-size: 20px;
  line-height: 30px;
  max-width: 680px;
  margin: 0 auto;
  text-wrap: pretty;
}

.tca-or .tca-or-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-top: 1px solid rgba(9, 8, 7, 0.12);
}
.tca-or .tca-or-panels { padding-inline: var(--tca-or-inset); }
.tca-or .tca-or-panel { padding-block: clamp(36px, 5vw, 66px); padding-inline: 0; }
.tca-or .tca-or-panel:first-child { padding-right: clamp(24px, 4vw, 64px); }
.tca-or .tca-or-panel + .tca-or-panel {
  border-left: 1px solid rgba(9, 8, 7, 0.12);
  padding-left: clamp(24px, 4vw, 64px);
}
.tca-or .tca-or-panel-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tca-red);
  margin: 0 0 24px;
}
/* WooCommerce renders these as tables/lists — give the rows the .kv rhythm. */
.tca-or .tca-or-panel table tr,
.tca-or .wc-block-order-confirmation-summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(9, 8, 7, 0.12);
  font-size: 16px;
}
.tca-or .tca-or-panel table tr:last-child,
.tca-or .wc-block-order-confirmation-summary-list li:last-child {
  border-bottom: 1px solid rgba(9, 8, 7, 0.12);
}
.tca-or .tca-or-panel table th,
.tca-or .wc-block-order-confirmation-summary-list li > span:first-child {
  color: var(--tca-smoke);
  font-weight: 400;
  text-align: left;
}
.tca-or .tca-or-panel table td { text-align: right; }
.tca-or .tca-or-panel tfoot tr:last-child { font-weight: 800; font-size: 22px; }

.tca-or .tca-or-next {
  background: var(--tca-bone);
  padding: clamp(56px, 7vw, 100px) var(--tca-or-inset);
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: clamp(40px, 6.5vw, 90px);
  align-items: start;
}
.tca-or .tca-or-next .tca-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tca-red);
  font-weight: 700;
  margin: 0;
}
.tca-or .tca-or-next-title {
  font-weight: 700;
  font-size: clamp(28px, 3.3vw, 38px);
  line-height: 1.06;
  margin: 16px 0 0;
}
.tca-or .tca-or-steps { list-style: none; margin: 0; padding: 0; }
.tca-or .tca-or-steps > li {
  position: relative;
  padding: 24px 0 24px 34px;
  border-top: 1px solid rgba(9, 8, 7, 0.12);
  font-size: 20px;
  line-height: 29px;
}
.tca-or .tca-or-steps > li:last-child { border-bottom: 1px solid rgba(9, 8, 7, 0.12); }
.tca-or .tca-or-steps > li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Centred on the first line, not hung from its top: the li's 24px padding puts us at
     the line box, then half the leftover leading (29px line, 10px square) centres it. */
  top: calc(24px + (29px - 10px) / 2);
  width: 10px;
  height: 10px;
  background: var(--tca-red);
}
.tca-or .tca-or-steps em {
  display: block;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tca-smoke);
  margin-top: 6px;
}

.tca-or .tca-or-close {
  background: var(--tca-charcoal);
  padding: clamp(64px, 8.5vw, 120px) var(--tca-or-inset);
  text-align: center;
}
.tca-or .tca-or-close-title {
  font-weight: 800;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  color: #fff;
  max-width: 960px;
  margin: 0 auto 32px;
  text-wrap: pretty;
}
.tca-or .tca-or-close-link { margin: 0; }
.tca-or .tca-or-close-link a {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--tca-red);
  padding-bottom: 4px;
  text-decoration: none;
}
.tca-or .tca-or-close-link a:hover { color: var(--tca-red); }

@media (max-width: 900px) {
  .tca-or .tca-or-panels { grid-template-columns: 1fr; }
  .tca-or .tca-or-panel + .tca-or-panel {
    border-left: 0;
    border-top: 1px solid rgba(9, 8, 7, 0.12);
  }
  .tca-or .tca-or-next { grid-template-columns: 1fr; }
}

/* ---- corrections after first visual review (2026-08-18) --------------- */

/* Labels sit ABOVE the field in the design. WooCommerce ships floating labels, so the
   DOM order is input-then-label; un-floating alone left every label UNDER its box. */
.tca-checkout .wc-block-components-text-input,
.tca-checkout .wc-block-components-country-input,
.tca-checkout .wc-block-components-state-input {
  display: flex;
  flex-direction: column;
}
.tca-checkout .wc-block-components-text-input label,
.tca-checkout .wc-block-components-country-input label,
.tca-checkout .wc-block-components-state-input label {
  order: -1;
}

/* Height goes on the SELECT only. Putting it on the wrapper/container too clamped the
   whole field — label + select overflowed a 56px box and collided with the row below. */
.tca-checkout .wc-blocks-components-select__select {
  height: 56px;
  min-height: 56px;
  border-radius: 0;
  box-sizing: border-box;
}
.tca-checkout .wc-block-components-country-input,
.tca-checkout .wc-block-components-state-input,
.tca-checkout .wc-blocks-components-select,
.tca-checkout .wc-blocks-components-select__container {
  height: auto;
  min-height: 0;
}
.tca-checkout .wc-blocks-components-select__select {
  border: 1px solid rgba(9, 8, 7, 0.25);
  padding: 0 16px;
  background: var(--tca-paper);
  font-size: 16px;
}
.tca-checkout .wc-blocks-components-select__label { display: none; }
.tca-checkout .wc-block-components-address-form > * { margin-top: 16px; }

/* No accounts on this store — everyone checks out as a guest, so the notice is noise. */
.tca-checkout .wc-block-checkout__guest-checkout-notice,
.tca-checkout .wc-block-checkout__login-prompt { display: none; }

/* Core wraps the summary and the option groups in their own bordered panels, which
   double up with the bone rail and the row borders. Strip them back. */
.tca-checkout .wc-block-components-order-summary,
.tca-checkout .wc-block-components-order-summary__content,
.tca-checkout .wc-block-components-panel,
.tca-checkout .wc-block-checkout__payment-method,
.tca-checkout .wc-block-components-radio-control-accordion-content {
  border: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
.tca-checkout .wc-block-components-radio-control-accordion-option { border: 0; }
.tca-checkout .wc-block-components-totals-wrapper { padding-left: 0; padding-right: 0; }

/* Numbered steps (1-4), per Kay. Not present in the v4 CSS, so styled to the design's
   idiom: a muted numeral ahead of the red section eyebrow. */
.tca-checkout .wc-block-checkout__main { counter-reset: tca-step; }
.tca-checkout .wc-block-components-checkout-step { counter-increment: tca-step; }
.tca-checkout .wc-block-components-checkout-step__title::before {
  content: counter(tca-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: var(--tca-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* The summary sits in a bordered wrapper div; the design has no box there — just the
   bone rail and the totals separators, which are nested and so survive this. */
.tca-checkout .wc-block-checkout__sidebar > * { border: 0; }

/* v4's .co-rail is a full-height column. Core makes the sidebar sticky and
   flex-start, so the bone stopped partway down the form. */
.tca-checkout .wc-block-checkout__sidebar {
  align-self: stretch;
  position: static;
}

/* Consistent vertical rhythm between fields, and room for the label above each. */
.tca-checkout .wc-block-components-address-form > *,
.tca-checkout .wc-block-components-address-form .wc-block-components-text-input,
.tca-checkout .wc-block-checkout__contact-fields .wc-block-components-text-input {
  margin-top: 22px;
}
.tca-checkout .wc-block-components-address-form > *:first-child { margin-top: 0; }
.tca-checkout .wc-block-components-text-input label,
.tca-checkout .wc-block-components-country-input label,
.tca-checkout .wc-block-components-state-input label {
  margin-bottom: 8px;
}
.tca-checkout .wc-block-components-radio-control-accordion-content { padding: 0 0 16px; }

/* ---- payment section ------------------------------------------------
   The card fields themselves live in a cross-origin Stripe iframe, so nothing here
   can reach inside them — Stripe builds their look client-side by reading this page's
   computed styles (the old server-side appearance transient is deprecated as of
   gateway 10.5.0). What we CAN control is everything around the frame. */

/* Default UA blue underlined links looked wrong against the design's ink/red. */
/* Scoped to the form/summary: a blanket .tca-checkout rule also caught the head's
   "Back to product", which is muted and un-underlined by design. */
.tca-checkout .wc-block-checkout a:not(.wc-block-components-button):not([class*="button"]) {
  color: var(--tca-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.tca-checkout .wc-block-checkout a:not(.wc-block-components-button):not([class*="button"]):hover {
  color: var(--tca-red);
}

/* Give the Stripe frame room without the surrounding box looking hollow. */
.tca-checkout .wc-block-components-radio-control-accordion-content > * { margin-top: 14px; }
.tca-checkout .wc-block-components-radio-control-accordion-content > *:first-child { margin-top: 0; }
.tca-checkout .wc-stripe-blocks-payment-method-content,
.tca-checkout .wc-block-components-radio-control-accordion-content iframe { display: block; }

/* Test-mode badge: quieter, and in the palette rather than amber. */
.tca-checkout .wc-stripe-test-mode-badge,
.tca-checkout .wc-block-components-radio-control__label .test-mode {
  background: rgba(9, 8, 7, 0.06);
  color: var(--tca-smoke);
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Core draws TWO extra rules on top of the design's option boxes:
   1. a 1px ::after separator on every option, doubling the line between them; and
   2. an absolutely-positioned ::after on the --highlight-checked GROUP, 1px on its
      left/right/bottom, which boxed the whole set and left a rule under the last one.
   The bordered cards are the separation — neither is wanted. */
.tca-checkout .wc-block-components-radio-control__option::after,
.tca-checkout .wc-block-components-radio-control--highlight-checked::after {
  display: none;
}

/* ---- order summary rail: totals + coupon --------------------------- */

/* Core puts a border-top on every totals-wrapper, which stacked a second rule 27px
   above the one the design wants directly over Total (and added stray rules above
   "Add coupons" and the subtotal group). The footer item draws the only line. */
.tca-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
  border-top: 0;
}

/* Coupon: the field was 56px but its button rendered 77px, so the control looked
   oversized and mismatched. Same height, aligned on their bottom edge. */
.tca-checkout .wc-block-components-totals-coupon .wc-block-components-text-input {
  margin-top: 0;
}
.tca-checkout .wc-block-components-totals-coupon__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
/* Needs to out-specify the general 56px field rule, which uses input[type="text"]. */
.tca-checkout .wc-block-components-totals-coupon .wc-block-components-text-input input[type="text"],
.tca-checkout .wc-block-components-totals-coupon input {
  height: 48px;
  font-size: 15px;
}
.tca-checkout .wc-block-components-totals-coupon button {
  height: 48px;
  min-height: 0;
  padding: 0 18px;
  background: var(--tca-ink);
  color: var(--tca-paper);
  border: 0;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--aileron);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tca-checkout .wc-block-components-totals-coupon button:hover { background: var(--tca-red); }

/* Focus state: core swaps in floating-label padding (24px 9px 8px) when a field goes
   .is-active, which shoved the caret and typed text to the bottom of the box. Labels sit
   ABOVE the fields here, so the padding must not change on focus.
   Core's rule is `.wc-block-components-form .wc-block-components-text-input.is-active
   input` — the SAME 0,3,1 specificity as the obvious override, but printed inline after
   this stylesheet, so a tie loses. Hence the extra `.wc-block-components-form`. */
.tca-checkout .wc-block-components-form .wc-block-components-text-input.is-active input,
.tca-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.tca-checkout .wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.tca-checkout .wc-block-components-text-input.is-active input,
.tca-checkout .wc-block-components-totals-coupon .wc-block-components-text-input.is-active input {
  /* !important, deliberately. Core sets padding-block-start:24px /
     padding-inline-start:8.5px on the .is-active field to make room for its floating
     label. The declaration is not reachable from an enqueued stylesheet: matching its
     specificity loses the tie on source order (core's styles print inline, after ours),
     and out-specifying it still lost because it sets logical longhands. The labels sit
     above the fields here, so this padding must simply never apply. */
  padding: 0 16px !important;
}

/* Same for selects. */
.tca-checkout .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select,
.tca-checkout .wc-blocks-components-select__container .wc-blocks-components-select__select,
.tca-checkout .wc-blocks-components-select__select:focus {
  padding: 0 16px;
}

/* The expand chevron is absolutely positioned against the select CONTAINER, which now
   includes the label sitting above the field — so it floated off-centre. Pin it to the
   56px select at the container's bottom instead. */
.tca-checkout .wc-blocks-components-select__container .wc-blocks-components-select__expand,
.tca-checkout .wc-blocks-components-select__expand {
  /* Same story as the field padding — core's positioning wins from an inline sheet, so
     force it. 16px = (56px select - 24px icon) / 2, measured from the container bottom
     because the select is the last thing in it. */
  top: auto !important;
  bottom: 16px !important;
  /* Core also centres it with translateY(-50%) against the CONTAINER — which now
     includes the label above the field, leaving the chevron 12px high. */
  transform: none !important;
}

/* The Stripe element and its test-mode notice were flush against the panel edge —
   the accordion content had lost its horizontal padding. Match the option rows. */
.tca-checkout .wc-block-components-radio-control-accordion-content {
  padding: 0 22px 22px;
}

/* The order-confirmation status block is what renders the guest "confirm your email"
   form when WooCommerce cannot verify the shopper (verify_known_shoppers defaults on).
   Removing it left unverified visitors with empty Order/Delivery panels and no reason
   why. It doubles as the design's hero paragraph under the h1. */
.tca-or .tca-or-hero .wc-block-order-confirmation-status,
.tca-or .tca-or-hero .wp-block-woocommerce-order-confirmation-status {
  font-size: 20px;
  line-height: 30px;
  max-width: 680px;
  margin: 0 auto;
  text-wrap: pretty;
}
.tca-or .tca-or-hero form { margin-top: 24px; text-align: left; }
.tca-or .tca-or-hero input[type="email"] {
  height: 56px;
  padding: 0 16px;
  border: 1px solid rgba(9, 8, 7, 0.25);
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
}
.tca-or .tca-or-hero button {
  height: 56px;
  padding: 0 28px;
  background: var(--tca-ink);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* Order/Delivery panels: core renders bordered tables and address cards; the design
   wants plain hairline-separated key/value rows. */
.tca-or .tca-or-panel table,
.tca-or .tca-or-panel .wc-block-order-confirmation-shipping-address,
.tca-or .tca-or-panel .wc-block-order-confirmation-billing-address,
.tca-or .tca-or-panel address {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  font-style: normal;
  background: transparent;
}
/* Cells carry their own 16px padding on top of the row's, which indented the first three
   rows and made them taller than the summary rows below. The row owns the spacing. */
.tca-or .tca-or-panel table th,
.tca-or .tca-or-panel table td { border: 0; padding: 0; }
.tca-or .tca-or-panel a { color: var(--tca-ink); text-decoration: underline; text-underline-offset: 3px; }
.tca-or .tca-or-panel a:hover { color: var(--tca-red); }
.tca-or .tca-or-panel address { line-height: 1.7; font-size: 16px; }

/* ---- order confirmation: hero + panels (v4 .kv rows) ----------------- */

/* The eyebrow inherits text-align from the hero but its box was not full width, so it
   sat left of the headline. */
.tca-or .tca-or-hero .tca-eyebrow {
  display: block;
  width: 100%;
  /* The hero's paragraph rule caps text at 680px for readability; the eyebrow is also a
     <p>, so it inherited that cap with margin:0 and sat left of the headline. */
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* Core lays the summary out as a flex ROW, so Order #/Date/Total shared one line
   instead of stacking as key/value rows. */
.tca-or .tca-or-panel .wc-block-order-confirmation-summary-list {
  display: block;
}
.tca-or .tca-or-lead {
  font-size: 20px;
  line-height: 30px;
  max-width: 680px;
  margin: 26px auto 0;
  text-wrap: pretty;
}

/* Eyebrows are red on this page (Kay, 2026-08-19). */
.tca-or .tca-eyebrow { color: var(--tca-red); }

/* v4's .kv row: label left in smoke, value right, hairline above, 16px. Applied to both
   the totals table and the summary list so the two panels read as one system. */
.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table,
.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table tbody,
.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table tfoot {
  display: block;
  width: 100%;
}
/* The design has no column headings. */
.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table thead { display: none; }

.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table tr,
.tca-or .tca-or-panel .wc-block-order-confirmation-summary-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(9, 8, 7, 0.12);
  font-size: 16px;
  color: var(--tca-ink);
}
.tca-or .tca-or-panel .wc-block-order-confirmation-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tca-or .tca-or-panel .wc-block-order-confirmation-summary-list-item:last-child {
  border-bottom: 1px solid rgba(9, 8, 7, 0.12);
}
.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table th,
.tca-or .tca-or-panel .wc-block-order-confirmation-summary-list-item__key {
  color: var(--tca-smoke);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table td,
.tca-or .tca-or-panel .wc-block-order-confirmation-summary-list-item__value {
  text-align: right;
}
/* .kv.big — the paid total ONLY. tfoot also holds the shipping (and tax) rows, which are
   ordinary .kv rows in the design. */
.tca-or .tca-or-panel .wc-block-order-confirmation-totals__table tfoot tr:last-child {
  font-weight: 800;
  font-size: 22px;
}
.tca-or .tca-or-panel .includes_tax {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--tca-smoke);
}

/* Delivery panel: the .kv rows below carry the hairlines and spacing themselves, so the
   wrapper adds none of its own (it would double the rule above the first row). */
.tca-or .tca-or-panel .wc-block-order-confirmation-shipping-wrapper,
.tca-or .tca-or-panel .wc-block-order-confirmation-billing-wrapper {
  padding: 0;
}
.tca-or .tca-or-panel .wc-block-order-confirmation-shipping-wrapper h2,
.tca-or .tca-or-panel .wc-block-order-confirmation-shipping-wrapper h3,
.tca-or .tca-or-panel .wc-block-order-confirmation-billing-wrapper h2,
.tca-or .tca-or-panel .wc-block-order-confirmation-billing-wrapper h3 {
  font-size: 16px;
  font-weight: 400;
  color: var(--tca-smoke);
  margin: 0 0 8px;
}

/* Method / Estimated rows appended to the delivery address (see tca_delivery_meta_rows). */
.tca-or .tca-or-panel .tca-or-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(9, 8, 7, 0.12);
  font-size: 16px;
}
.tca-or .tca-or-panel .tca-or-kv:last-child { border-bottom: 1px solid rgba(9, 8, 7, 0.12); }
.tca-or .tca-or-panel .tca-or-kv__key { color: var(--tca-smoke); white-space: nowrap; }
.tca-or .tca-or-panel .tca-or-kv__value { text-align: right; }
/* The address is the one multi-line value; single-line rows keep the Order panel's height. */
.tca-or .tca-or-panel .tca-or-kv__value--stack { line-height: 1.7; }