/*
 * CDS theme (SPEC.md section 9): pure white, generous space, product first.
 * Colors and type come from theme.json (var(--wp--preset--...)).
 */

:root {
  --cds-ink: var(--wp--preset--color--ink, #1d1d1b);
  --cds-muted: var(--wp--preset--color--muted, #5c645a);
  --cds-line: var(--wp--preset--color--line, #e1e6da);
  /* Thomas Creek colors (Mike, Oct 10 2026): blue leads, sage tints,
     green marks Add to Cart and small accents (graphics, never small text). */
  --cds-accent: var(--wp--preset--color--blue, #004b87);
  --cds-accent-dark: #003a69;
  --cds-warm: var(--wp--preset--color--sage, #f2f5ed);
  --cds-green: var(--wp--preset--color--green, #789d4a);
  --cds-green-dark: #688a3f;
  --cds-field: #c5cbbf;
  --cds-star: #fdcc0d;
  /* A thin darker edge gives the gold stars 3:1 on white (WCAG 1.4.11; Mike, Oct 31 2026). */
  --cds-star-edge: #8a6d00;
  --cds-wide: 1600px; /* one content width everywhere, the header's too (Mike, Oct 13 2026) */
  /* The header is as wide as the configured product pages everywhere (Mike, Oct 10 2026). */
  --cds-header-wide: var(--cds-wide);
  --cds-gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* Colors saved in content before the Thomas Creek palette (Workshop bronze, warm). */
.has-bronze-color { color: var(--cds-accent) !important; }
.has-bronze-background-color { background-color: var(--cds-accent) !important; }
.has-warm-color { color: var(--cds-warm) !important; }
.has-warm-background-color { background-color: var(--cds-warm) !important; }
body { margin: 0; background: #fff; color: var(--cds-ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 0.2em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.cds-skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: .5em 1em; z-index: 100; }
.cds-skip:focus { left: 1rem; }
/* The skip link moves focus to <main>; no ring around the whole page. */
.cds-main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 2px; }

/* ---- header ---------------------------------------------------------- */
.cds-header { border-bottom: 1px solid var(--cds-line); background: #fff; position: sticky; top: 0; z-index: 50; }
.admin-bar .cds-header { top: 32px; }
.cds-header__inner { max-width: var(--cds-header-wide); margin: 0 auto; padding: .9rem var(--cds-gutter); display: flex; align-items: center; gap: 2rem; }
.cds-logo a { text-decoration: none; font-weight: 600; font-size: 1.1rem; letter-spacing: .01em; }
/* The V1 logo (600 x 150, with space around the words), about V1's size; the
   negative margin takes back that built-in space so the header stays slim. */
.cds-logo img { height: 60px; width: auto; max-width: none; display: block; margin: -.6rem 0 -.6rem -1rem; }
.cds-nav { flex: 1; align-self: stretch; display: flex; margin: -.9rem 0; }
.cds-nav__head, .cds-nav__utility, .cds-nav-backdrop { display: none; }

/* Top bar: phone on the left, small company links (menu "Header top bar") on the right. */
.cds-utility { border-bottom: 1px solid var(--cds-line); font-size: .8rem; }
.cds-utility__inner { max-width: var(--cds-header-wide); margin: 0 auto; padding: .35rem var(--cds-gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cds-utility__inner > nav { margin-left: auto; }
.cds-utility__phone { margin: 0; color: var(--cds-muted); }
.cds-utility__phone a { color: var(--cds-ink); font-weight: 500; text-decoration: none; }
.cds-utility__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: 1.5rem; }
.cds-utility__list a { color: var(--cds-muted); text-decoration: none; }
.cds-utility__list a:hover { color: var(--cds-accent); }

/* Mega menu (desktop): full-width panels under the header. */
.cds-mega { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 1.6rem; }
.cds-mega__item { display: flex; align-items: center; gap: .15rem; padding: .9rem 0; }
.cds-mega__link, .cds-mega__toggle--label { text-decoration: none; font-size: .95rem; color: var(--cds-ink); white-space: nowrap; }
.cds-mega__link:hover, .cds-mega__item.is-current > .cds-mega__link, .cds-mega__item.is-open > .cds-mega__link { color: var(--cds-accent); }
.cds-mega__toggle { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 24px; min-height: 24px; background: none; border: 0; padding: .35rem .2rem; font: inherit; color: var(--cds-muted); cursor: pointer; } /* 24px target (WCAG 2.5.8) */
.cds-mega__toggle svg { transition: transform .15s; }
.cds-mega__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cds-mega__toggle--label { color: var(--cds-ink); font-size: .95rem; }
.cds-mega__toggle:hover, .cds-mega__toggle[aria-expanded="true"] { color: var(--cds-accent); }
.cds-mega__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--cds-line); border-bottom: 1px solid var(--cds-line); box-shadow: 0 18px 30px -24px rgba(0, 0, 0, .35); }
.cds-mega__item.is-open > .cds-mega__panel { display: block; }
/* Without JavaScript the panels still open on hover and keyboard focus. */
.cds-nav:not(.is-enhanced) .cds-mega__item:hover > .cds-mega__panel,
.cds-nav:not(.is-enhanced) .cds-mega__item:focus-within > .cds-mega__panel { display: block; }
.cds-mega__inner { max-width: var(--cds-header-wide); margin: 0 auto; padding: 2rem var(--cds-gutter) 2.25rem; display: flex; gap: 2.5rem; }
.cds-mega__main { flex: 1; min-width: 0; }
.cds-mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.5rem 2rem; align-content: start; }
.cds-mega__more { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.75rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--cds-line); }
.cds-mega__more-link { color: var(--cds-accent); font-weight: 500; text-decoration: none; }
.cds-mega__more-link::after { content: " →"; }
.cds-mega__more-link:hover { text-decoration: underline; }
.cds-mega__heading { margin: 0 0 .6rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cds-accent); }
.cds-mega__heading a { color: inherit; text-decoration: none; }
.cds-mega__heading a:hover { text-decoration: underline; }
.cds-mega__list { list-style: none; margin: 0; padding: 0; }
.cds-mega__list--wide { columns: 4 10rem; column-gap: 2rem; }
.cds-mega__list li { padding: .28rem 0; break-inside: avoid; }
.cds-mega__sub { text-decoration: none; color: var(--cds-ink); font-size: .95rem; }
.cds-mega__sub:hover, .cds-mega__sub[aria-current] { color: var(--cds-accent); }
.cds-mega__feature { flex: 0 0 300px; display: block; text-decoration: none; color: var(--cds-ink); }
.cds-mega__feature-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cds-warm); }
.cds-mega__feature-text { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; font-weight: 500; }
.cds-mega__feature-text::after { content: "→"; color: var(--cds-green); transition: transform .15s; }
.cds-mega__feature:hover .cds-mega__feature-text { color: var(--cds-accent); }
.cds-mega__feature:hover .cds-mega__feature-text::after { transform: translateX(3px); }
.cds-mega__feature--plain { align-self: start; padding: 1.25rem; background: var(--cds-warm); }
.cds-mega__feature--plain .cds-mega__feature-text { margin: 0; }
/* Build your own (Mike, Oct 21 2026): a card on the right of the panel, with a solid button. */
.cds-mega__cta { flex: 0 0 300px; align-self: start; display: flex; flex-direction: column; gap: .8rem; padding: 1.25rem; background: var(--cds-warm); }
.cds-mega__cta .cds-mega__feature-img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.cds-mega__cta-text { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--cds-ink); }
.cds-mega__cta-button { display: block; padding: .8em .75em; background: var(--cds-accent); color: #fff; border-radius: 2px; font-weight: 600; text-align: center; text-decoration: none; }
.cds-mega__cta-button::after { content: "\00a0→"; } /* a no-break space keeps the arrow with the last word */
.cds-mega__cta-button:hover, .cds-mega__cta-button:focus-visible { background: var(--cds-accent-dark); color: #fff; }
.cds-tools { display: flex; align-items: center; gap: 1rem; }
.cds-search input[type="search"] { border: 1px solid var(--cds-line); border-radius: 2px; padding: .45rem .7rem; font: inherit; font-size: .9rem; width: 12rem; }
.cds-tool { position: relative; display: inline-flex; color: var(--cds-ink); }
.cds-cart-count { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--cds-accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.cds-cart-count.is-empty { display: none; }
.cds-menu-toggle { display: none; background: none; border: 0; padding: .25rem; color: var(--cds-ink); cursor: pointer; }

/* Small desktops and tablets in landscape: tighter spacing, a smaller logo and a
   shorter search box, so the header fits the window instead of running past it. */
@media (min-width: 901px) and (max-width: 1279px) {
  .cds-header:not(.cds-header--focus) .cds-header__inner { gap: 1rem; }
  .cds-header:not(.cds-header--focus) .cds-logo img { height: 48px; margin: -.5rem 0 -.5rem -.8rem; }
  .cds-tools { gap: .75rem; }
  .cds-search input[type="search"] { width: 7.5rem; }
  .cds-mega { gap: 1rem; }
  .cds-mega__link, .cds-mega__toggle--label { font-size: .875rem; }
  .cds-mega__toggle { padding-inline: .1rem; }
}
@media (min-width: 901px) and (max-width: 999px) {
  .cds-search input[type="search"] { width: 5.5rem; }
  .cds-mega { gap: .7rem; }
  .cds-mega__link, .cds-mega__toggle--label { font-size: .8rem; }
}

@media (max-width: 900px) {
  .admin-bar .cds-header { top: 0; }
  /* Menu button, logo centered, account and cart: three columns, so the logo sits
     in the middle of the screen whatever is beside it (Mike, Oct 14 2026). */
  .cds-header:not(.cds-header--focus) .cds-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
  .cds-menu-toggle { display: inline-flex; justify-self: start; }
  .cds-header:not(.cds-header--focus) .cds-logo { justify-self: center; }
  .cds-tools { justify-self: end; }
  .cds-tools .cds-search { display: none; }
  /* Phones: the top bar keeps only the phone; its links move into the menu. */
  .cds-utility__inner { justify-content: center; padding-block: .3rem; }
  .cds-utility__inner > nav { display: none; }
  .cds-logo img { height: 44px; margin: -.45rem 0; }

  /* The menu slides in from the left; one section open at a time. */
  .cds-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(88vw, 380px); flex-direction: column; background: #fff; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .cds-nav.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .admin-bar .cds-nav { top: 46px; }
  .cds-nav__head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid var(--cds-line); }
  .cds-nav__title { font-weight: 600; }
  .cds-nav__close { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 0 .25rem; cursor: pointer; color: var(--cds-ink); }
  .cds-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(29, 29, 27, .4); }
  .cds-mega { flex-direction: column; gap: 0; padding: 0 1.25rem; }
  .cds-nav { margin: 0; }
  .cds-mega__item { flex-wrap: wrap; padding: 0; border-bottom: 1px solid var(--cds-line); }
  .cds-mega__link, .cds-mega__toggle--label { flex: 1; padding: .95rem 0; font-size: 1.05rem; }
  .cds-mega__toggle { padding: .95rem .25rem .95rem 1rem; }
  .cds-mega__toggle--label { flex: 1; justify-content: space-between; padding-left: 0; }
  .cds-mega__panel { position: static; flex-basis: 100%; border: 0; box-shadow: none; }
  .cds-nav:not(.is-enhanced) .cds-mega__item:hover > .cds-mega__panel { display: none; }
  .cds-mega__inner { flex-direction: column; gap: 1.25rem; padding: 0 0 1.25rem; }
  .cds-mega__cols { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .cds-mega__more { flex-direction: column; margin-top: 1rem; padding-top: .8rem; }
  .cds-mega__list--wide { columns: auto; }
  .cds-mega__list li { padding: .4rem 0; }
  .cds-mega__feature { flex: none; }
  .cds-mega__feature-img { aspect-ratio: 16 / 9; }
  .cds-mega__cta { flex: none; align-self: stretch; order: -1; margin-top: .25rem; }
  .cds-mega__cta .cds-mega__feature-img { display: none; }
  .cds-nav__utility { display: block; list-style: none; margin: 1rem 0 2rem; padding: 0 1.25rem; }
  .cds-nav__utility li { padding: .45rem 0; }
  .cds-nav__utility a { color: var(--cds-muted); text-decoration: none; font-size: .95rem; }
  body.cds-nav-locked { overflow: hidden; }
}

/* ---- main content ---------------------------------------------------- */
.cds-main { display: block; min-height: 50vh; }
.cds-entry { max-width: var(--cds-wide); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--cds-gutter); }
.cds-entry__title { max-width: 760px; margin: 0 auto 2rem; }
.entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--cds-wide); }
.entry-content > .alignfull { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.home .cds-entry { padding-top: 0; }

/* ---- blog: archive cards and posts ------------------------------------- */
.cds-entry__header { max-width: 760px; margin: 0 auto 2rem; }
.cds-entry__header .cds-entry__title { margin: 0; }
.cds-entry__meta, .cds-card__meta { color: var(--cds-muted); font-size: .85rem; margin: 0 0 .5rem; }
.cds-entry__meta a { color: var(--cds-muted); }
.cds-entry__image { max-width: var(--cds-wide); margin: 0 auto 2.5rem; }
.cds-entry__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cds-archive .cds-entry__title { max-width: none; margin: 0 0 .75rem; }
.cds-archive__header { margin-bottom: 2.5rem; }
.cds-archive__intro { color: var(--cds-muted); max-width: 760px; }
.cds-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }
.cds-card__link { display: block; text-decoration: none; }
.cds-card__image { aspect-ratio: 3 / 2; background: var(--cds-warm); margin-bottom: .9rem; overflow: hidden; }
.cds-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cds-card__title { font-size: 1.15rem; margin: 0 0 .4rem; }
.cds-card__link:hover .cds-card__title { color: var(--cds-accent); }
.cds-card__excerpt { color: var(--cds-muted); font-size: .95rem; }
.cds-card__excerpt p { margin: 0; }
.navigation.pagination .nav-links { display: flex; gap: .5rem; margin-top: 3rem; }
.navigation.pagination .page-numbers { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--cds-line); text-decoration: none; }
.navigation.pagination .page-numbers.current { border-color: var(--cds-ink); }
.cds-comments { max-width: calc(760px + 2 * var(--cds-gutter)); padding-top: 0; }
.comment-respond { border-top: 1px solid var(--cds-line); padding-top: 1.5rem; }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; font-size: .9rem; margin-bottom: .3rem; }
.comment-form .comment-form-cookies-consent label { display: inline; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; border: 1px solid var(--cds-field); border-radius: 2px; padding: .6rem; font: inherit; }
.comment-form input[type="submit"] { background: var(--cds-accent); color: #fff; border: 0; border-radius: 2px; padding: .8em 1.4em; font: inherit; font-weight: 600; cursor: pointer; }
.comment-form input[type="submit"]:hover { background: var(--cds-ink); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment-body { border-top: 1px solid var(--cds-line); padding: 1rem 0; }
.comment-list .avatar { display: none; }
@media (max-width: 900px) { .cds-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }
@media (max-width: 560px) { .cds-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---- buttons (classic WooCommerce) ------------------------------------ */
.button, button.button, input.button, .wp-element-button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--cds-accent); color: #fff; border: 0; border-radius: 2px; padding: .8em 1.4em; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--cds-accent-dark); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--cds-accent); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--cds-accent-dark); }

/* Add to Cart is Thomas Creek green (Mike, Oct 10 2026). White on this green
   is 3.1 : 1, which passes only as large text, so the label is bold and 19px. */
.single_add_to_cart_button, .woocommerce button.button.single_add_to_cart_button,
.woocommerce button.button.alt.single_add_to_cart_button, .wc-block-components-product-button__button {
  background: var(--cds-green); color: #fff; font-size: 1.1875rem; font-weight: 700;
}
.single_add_to_cart_button:hover, .woocommerce button.button.single_add_to_cart_button:hover,
.woocommerce button.button.alt.single_add_to_cart_button:hover, .wc-block-components-product-button__button:hover { background: var(--cds-green-dark); color: #fff; }

/* ---- shop pages ------------------------------------------------------ */
.cds-shop { max-width: var(--cds-wide); margin: 0 auto; padding: 1.5rem var(--cds-gutter) 4rem; }
.woocommerce-breadcrumb, .cds-breadcrumbs { font-size: .85rem; color: var(--cds-muted); margin: 0 0 1.5rem; }
.woocommerce-breadcrumb a, .cds-breadcrumbs a { color: var(--cds-muted); }
.cds-breadcrumbs a:hover { color: var(--cds-accent); }
.cds-breadcrumbs p { margin: 0; }
.cds-breadcrumbs .separator { margin: 0 .35em; }
.cds-entry > .cds-breadcrumbs, .cds-entry > .woocommerce-breadcrumb { max-width: 760px; margin: 0 auto 1.25rem; }
.woocommerce-products-header__title { margin: .5rem 0 1.5rem; }
.woocommerce-result-count { color: var(--cds-muted); font-size: .9rem; }
.woocommerce-ordering select { border: 1px solid var(--cds-line); padding: .4rem; font: inherit; }
ul.products { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; clear: both; }
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.products::before, ul.products::after, .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; content: none; }
/* Product cards are centered everywhere (Mike, Oct 10 2026). */
ul.products li.product, .woocommerce ul.products li.product { margin: 0; width: auto; float: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
ul.products li.product > a { width: 100%; }
ul.products li.product .star-rating, .woocommerce ul.products li.product .star-rating { margin-left: auto; margin-right: auto; }
/* Price and button line up across a row, whatever the title's length. */
ul.products li.product > .button, .woocommerce ul.products li.product > .button { margin-top: auto; align-self: center; width: auto; }
ul.products li.product a { text-decoration: none; }
/* Product photos are shown whole (Mike: no cut-off pictures), on white like the photos themselves. */
ul.products li.product img { aspect-ratio: 1; object-fit: contain; width: 100%; height: auto; background: #fff; margin-bottom: .9rem; }
ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; font-weight: 500; margin: 0 0 .3rem; }
ul.products li.product .price { color: var(--cds-muted); font-size: .95rem; display: block; margin-bottom: .8rem; }
/* Card buttons (Configure, Select options, Add to cart) are the blue outline
   everywhere; the green, large Add to Cart is the product page's (SPEC.md §9). */
ul.products li.product .button, .woocommerce ul.products li.product .button { padding: .55em 1.1em; font-size: .9rem; font-weight: 500; background: #fff; color: var(--cds-accent); border: 1px solid var(--cds-accent); border-radius: 2px; }
ul.products li.product .button:hover, .woocommerce ul.products li.product .button:hover { background: var(--cds-accent); color: #fff; }
.woocommerce-pagination ul { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 3rem 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--cds-line); text-decoration: none; }
@media (max-width: 900px) { ul.products, ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }

/* ---- product page ---------------------------------------------------- */
.single-product .cds-shop { padding-top: 1rem; }
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: start; }
.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary) { grid-column: 1 / -1; }
.single-product div.product .onsale { display: none; }

/* WooCommerce general styles: neutral price, blue buttons. */
.woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price { color: inherit; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { width: auto; float: none; margin-bottom: 0; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt.disabled { background: var(--cds-accent); color: #fff; opacity: .45; }
.woocommerce button.button.alt.single_add_to_cart_button:disabled, .woocommerce button.button.alt.single_add_to_cart_button.disabled { background: var(--cds-green); }

/* Gallery: thumbnails beside the main image; stays in view while the configurator scrolls. */
.woocommerce div.product div.images.woocommerce-product-gallery, .woocommerce-product-gallery { position: sticky; top: 90px; display: flex; flex-direction: row-reverse; gap: 1rem; margin: 0; opacity: 1 !important; }
.woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { flex: 1; min-width: 0; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img { width: 100%; display: block; background: var(--cds-warm); }
.woocommerce-product-gallery .flex-control-thumbs { list-style: none; margin: 0; padding: 0; width: 72px; flex: 0 0 72px; display: flex; flex-direction: column; gap: .6rem; }
.woocommerce-product-gallery .flex-control-thumbs img { cursor: pointer; opacity: .55; display: block; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery__trigger { position: absolute; top: .75rem; right: .75rem; z-index: 5; background: #fff; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.admin-bar.woocommerce div.product div.images.woocommerce-product-gallery { top: 122px; }

.single-product .summary { padding-top: .5rem; }
.single-product .product_title { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 500; margin: 0 0 .5rem; letter-spacing: -0.01em; }
/* The title stays on one line at any screen size (Mike, Oct 8 2026): it scales
   with the buy box's width so the longest, "Hardwood Dovetail Drawer Box", fits. */
.single-product .summary { container-type: inline-size; }
@supports (font-size: 1cqi) {
  .single-product .product_title { font-size: min(2.4rem, 6.6cqi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.single-product .woocommerce-product-rating { font-size: .9rem; color: var(--cds-muted); margin-bottom: .5rem; }
.single-product .summary .price { font-size: 1.2rem; color: var(--cds-ink); margin: 0 0 1rem; }
/* Review stars everywhere are gold (Mike, Sept 2026) with a thin darker
   outline (Mike, Oct 31 2026): product pages, shop lists, reviews, the
   review form and block product ratings. Empty stars stay a light grey.
   The rating's hidden text is ink, so only the star glyphs are gold. */
.star-rating, .woocommerce .star-rating, .woocommerce p.stars a,
.wc-block-components-product-rating__stars { color: var(--cds-star); }
.woocommerce .star-rating span, .wc-block-components-product-rating__stars span,
.wc-block-grid__product-rating .star-rating span { color: var(--cds-ink); }
.woocommerce .star-rating span::before, .wc-block-components-product-rating__stars span::before,
.wc-block-grid__product-rating .star-rating span::before, .woocommerce p.stars a::before {
  color: var(--cds-star); -webkit-text-stroke: 1px var(--cds-star-edge);
}
.woocommerce .star-rating::before, .wc-block-components-product-rating__stars::before { color: var(--cds-line); opacity: 1; }

.cds-buy-notes { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--cds-line); font-size: .9rem; color: var(--cds-muted); }
.cds-buy-note { padding-left: 1.6rem; position: relative; margin: .35rem 0; }
.cds-buy-note::before { content: ""; position: absolute; left: 0; top: .2em; width: 1rem; height: 1rem; background: var(--cds-accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.cds-buy-note--delivery { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.cds-buy-note--shipping { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }

/* Tabs */
.woocommerce-tabs { margin-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--cds-line); }
.woocommerce-tabs ul.tabs { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; gap: 2rem; border-bottom: 1px solid var(--cds-line); overflow-x: auto; }
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 1rem 0; text-decoration: none; color: var(--cds-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.woocommerce-tabs ul.tabs li.active a { color: var(--cds-ink); border-bottom-color: var(--cds-accent); }
.woocommerce-tabs .panel { max-width: 760px; }

/* Tabs: override WooCommerce's pill styling. */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 2rem; overflow-x: auto; overflow-y: hidden; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 1rem 0; font-weight: 400; color: var(--cds-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cds-ink); }
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: 0; }

/* Review form */
.cds-reviews .comment-form input[type="text"], .cds-reviews .comment-form input[type="email"], .cds-reviews .comment-form textarea { width: 100%; max-width: 30rem; border: 1px solid var(--cds-field); border-radius: 2px; padding: .6rem; font: inherit; display: block; }
.cds-reviews .comment-form label { display: block; margin-bottom: .3rem; font-size: .9rem; }
.cds-reviews .comment-form p { margin: 0 0 1rem; }
.cds-reviews .comment-form-cookies-consent label { display: inline; }

/* Sections below */
.cds-sections { margin-top: clamp(3rem, 7vw, 5rem); }
.up-sells { margin-top: clamp(3rem, 7vw, 5rem); }
.up-sells > h2, .cds-reviews h2 { font-size: 1.4rem; font-weight: 500; }
.cds-reviews { margin-top: clamp(3rem, 7vw, 5rem); max-width: 760px; }
.cds-reviews .commentlist { list-style: none; padding: 0; }
.cds-reviews .comment_container { border-top: 1px solid var(--cds-line); padding: 1rem 0; }
.cds-reviews .avatar { display: none; }

@media (max-width: 900px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .woocommerce div.product div.images.woocommerce-product-gallery, .woocommerce-product-gallery { position: static; flex-direction: column; }
  .woocommerce-product-gallery .flex-control-thumbs { width: auto; flex-direction: row; flex: none; }
  .woocommerce-product-gallery .flex-control-thumbs li { width: 64px; }
}

/* ---- configured products: 3D view + accordion (Mike, Oct 7 2026) ------
   The 3D view takes the gallery's place, as big as the page allows: the
   page uses the full width, the buy box a fixed column, and on desktop the view fills
   the window's height below the header and stays while the column scrolls. */
.cds-configured div.product { grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); gap: 0 clamp(2rem, 3.5vw, 3.5rem); }
.cds-configured div.product > *:not(.cds-stage):not(.summary) { grid-column: 1 / -1; }
.single-product.cds-configured div.product > .cds-stage { grid-column: 1; }
.single-product.cds-configured div.product > .summary { grid-column: 2; }
.cds-configured .cds-stage { position: sticky; top: 84px; height: calc(100vh - 140px); height: calc(100svh - 140px); min-height: 420px; max-height: 1000px; }
.admin-bar.cds-configured .cds-stage { top: 116px; height: calc(100vh - 172px); height: calc(100svh - 172px); }
/* White behind the product photo, so nothing flashes before the 3D view draws (Mike, Oct 20 2026). */
.cds-configured .cds-stage__frame > img { background: #fff; }

/* Accordion under the buy box: one section open at a time. */
.cds-acc { margin-top: 2rem; border-top: 1px solid var(--cds-line); }
.cds-acc__item { border-bottom: 1px solid var(--cds-line); }
.cds-acc__title { list-style: none; cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative; font-weight: 500; }
.cds-acc__title::-webkit-details-marker { display: none; }
.cds-acc__title::after { content: ""; position: absolute; right: .25rem; top: 50%; width: .55rem; height: .55rem; border-right: 1.5px solid var(--cds-ink); border-bottom: 1.5px solid var(--cds-ink); transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.cds-acc__item[open] > .cds-acc__title::after { transform: translateY(-30%) rotate(-135deg); }
.cds-acc__title:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 2px; }
.cds-acc__body { padding: 0 0 1.5rem; font-size: .95rem; }
.cds-acc__body > :first-child, .cds-acc__body .cds-tab-text > :first-child { margin-top: 0; }
.cds-more { color: var(--cds-accent); }
.cds-faq__q { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .35rem; }
.cds-faq__q:first-child { margin-top: 0; }
.cds-faq__a p { margin: 0 0 .5rem; }
.cds-acc .woocommerce-Reviews-title { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
.cds-acc .commentlist { list-style: none; padding: 0; margin: 0; }
.cds-acc .comment_container { border-top: 1px solid var(--cds-line); padding: .75rem 0; }
.cds-acc .avatar { display: none; }
.cds-acc .comment-form input[type="text"], .cds-acc .comment-form input[type="email"], .cds-acc .comment-form textarea { width: 100%; border: 1px solid var(--cds-field); border-radius: 2px; padding: .6rem; font: inherit; display: block; }
.cds-acc .comment-form label { display: block; margin-bottom: .3rem; font-size: .9rem; }
.cds-acc .comment-form p { margin: 0 0 1rem; }
.cds-acc .comment-form-cookies-consent label { display: inline; }
/* Hardware product pages (inc/hardware.php): the Specs table and the downloads list. */
.cds-specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cds-specs th, .cds-specs td { text-align: left; vertical-align: top; padding: .55rem 0; border-bottom: 1px solid var(--cds-line); }
.cds-specs th { width: 38%; padding-right: 1rem; font-weight: 500; color: var(--cds-muted); }
.cds-specs tr:last-child th, .cds-specs tr:last-child td { border-bottom: 0; }
.cds-downloads { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.cds-tab-text + .cds-downloads { margin-top: 1.25rem; }
.cds-downloads:first-child { margin-top: 0; }
.cds-downloads a { display: inline-flex; gap: .35rem; align-items: baseline; color: var(--cds-accent); text-decoration: none; font-weight: 500; }
.cds-downloads a::before { content: "\2193"; }
.cds-downloads a:hover { text-decoration: underline; }
.cds-downloads span { color: var(--cds-muted); font-weight: 400; font-size: .85rem; }

/* Photos: a grid; a click opens the lightbox. */
.cds-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cds-photo { display: block; }
.cds-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cds-warm); }
.cds-photo:hover img, .cds-photo:focus-visible img { opacity: .85; }
.cds-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.cds-lightbox::backdrop { background: rgba(20, 20, 18, .88); }
.cds-lightbox img { position: absolute; inset: 0; margin: auto; max-width: calc(100vw - 7rem); max-height: calc(100vh - 4rem); object-fit: contain; }
.cds-lightbox__btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--cds-ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.cds-lightbox__close { top: 1rem; right: 1rem; }
.cds-lightbox__prev, .cds-lightbox__next { top: 50%; transform: translateY(-50%); }
.cds-lightbox__prev { left: 1rem; }
.cds-lightbox__next { right: 1rem; }
.cds-lightbox.is-single .cds-lightbox__prev, .cds-lightbox.is-single .cds-lightbox__next { display: none; }

@media (max-width: 900px) {
  .cds-configured div.product { grid-template-columns: minmax(0, 1fr); }
  .single-product.cds-configured div.product > .cds-stage, .single-product.cds-configured div.product > .summary { grid-column: 1; }
  /* Phones: the view first, full width and about half the screen tall. */
  .cds-configured .cds-stage, .admin-bar.cds-configured .cds-stage { position: relative; top: auto; height: 52vh; height: 52svh; min-height: 300px; margin: 0 calc(-1 * var(--cds-gutter)) 1rem; }
  .cds-lightbox img { max-width: 100vw; max-height: calc(100vh - 8rem); }
  .cds-lightbox__prev, .cds-lightbox__next { top: auto; bottom: 1rem; transform: none; }
  .cds-lightbox__swatch { width: min(60vh, calc(100vw - 3rem)); height: min(60vh, calc(100vw - 3rem)); margin-top: 4rem; }
  .cds-lightbox__caption { bottom: 4.5rem; }
}

/* ---- block cart, checkout, account ----------------------------------- */
.woocommerce-cart .cds-entry, .woocommerce-checkout .cds-entry, .woocommerce-account .cds-entry { max-width: var(--cds-wide); }
.woocommerce-cart .entry-content > *, .woocommerce-checkout .entry-content > *, .woocommerce-account .entry-content > * { max-width: var(--cds-wide); }
.woocommerce-cart .cds-entry__title, .woocommerce-checkout .cds-entry__title, .woocommerce-account .cds-entry__title { max-width: var(--cds-wide); }
.wc-block-components-button:not(.is-link) { background: var(--cds-accent); color: #fff; border-radius: 2px; }
.wc-block-components-button:not(.is-link):hover { background: var(--cds-accent-dark); }
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--cds-line); }
.woocommerce-MyAccount-navigation li a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--cds-line); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--cds-accent); font-weight: 600; }
@media (max-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-bottom: 1px solid var(--cds-line); padding: .75rem .5rem; text-align: left; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--cds-field); border-radius: 2px; padding: .6rem; font: inherit; width: 100%; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--cds-warm); border-left: 3px solid var(--cds-accent); }
.woocommerce-error { border-left-color: #b32d2e; }
/* WooCommerce's notice icon sat on the first word once our padding replaced its room; the colored edge marks the notice. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; display: none; }
/* WooCommerce focuses a new notice for screen readers; the browser's focus ring drew a second box around it. */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: none; }

/* ---- Pay for order (WooCommerce's classic form, also under block checkout) ---- */
/* The terms checkbox text (a WooCommerce setting carried over from the old site) has new-window icons with no size, so they filled the column. */
.woocommerce-terms-and-conditions-checkbox-text img, img.icon-new-window { display: inline-block; width: .75em; height: .75em; margin: 0 0 0 .2em; vertical-align: baseline; }
.woocommerce-checkout #payment { background: #fff; border: 1px solid var(--cds-line); border-radius: 2px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--cds-line); }
.woocommerce-checkout #payment div.payment_box { background: var(--cds-warm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--cds-warm); }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row { line-height: 1.5; }

/* ---- block patterns --------------------------------------------------- */
.wp-block-details { border-bottom: 1px solid var(--cds-line); padding: 1rem 0; }
.wp-block-details summary { cursor: pointer; font-weight: 500; }
.wp-block-details[open] summary { margin-bottom: .5rem; }

/* Hero: the photo fills the width; text sits left on a darkened side. */
.cds-hero { margin-top: 0; padding-left: 0; padding-right: 0; min-height: clamp(520px, 72vh, 680px) !important; }
.cds-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(29, 29, 27, .78) 0%, rgba(29, 29, 27, .55) 42%, rgba(29, 29, 27, .08) 78%) !important; opacity: 1 !important; }
/* Text lines up with the header (logo) at any width; beats core's "center left" margin:0/width:auto. */
.wp-block-cover.cds-hero.has-custom-content-position.has-custom-content-position.cds-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--cds-header-wide); margin: 0 auto; padding: 0 var(--cds-gutter); }
.cds-hero .wp-block-cover__inner-container > .wp-block-group { max-width: 600px; margin: 0 !important; } /* core's constrained layout centres it with !important */
.cds-hero h1 { margin: .5rem 0 0; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.cds-hero__lead { margin-top: 1rem; line-height: 1.5; opacity: .92; }
.cds-hero .wp-block-buttons { margin-top: 1.75rem; gap: .75rem; }
.cds-hero .wp-block-button__link { background: #fff; color: var(--cds-ink); padding: .9em 1.5em; }
.cds-hero .wp-block-button__link:hover { background: var(--cds-accent); color: #fff; }
.cds-hero .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); }
.cds-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--cds-ink); }
.cds-hero .cds-sr-line { color: #fff; }
.cds-hero .cds-sr-line span:not(.cds-sr-stars):not(.cds-sr-stars > span) { opacity: .92; }
.home .entry-content > .cds-hero:first-child { margin-top: 0; }
@media (max-width: 700px) {
  .cds-hero { min-height: 560px !important; align-items: flex-end !important; padding-bottom: 2.5rem; }
  .cds-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(29, 29, 27, .25) 0%, rgba(29, 29, 27, .82) 60%) !important; }
  .cds-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .cds-hero .wp-block-button__link { display: block; text-align: center; }
}

/* Small uppercase label over a heading. */

/* Home sections: one rhythm of space between them. */
.home .entry-content > .cds-section, .home .entry-content > .wp-block-group.cds-section { margin-top: clamp(3.5rem, 8vw, 6rem); margin-bottom: 0; }
.home .entry-content > .cds-trust { margin-top: 0; }
.home .entry-content > .cds-steps, .home .entry-content > .cds-contact { margin-top: clamp(3.5rem, 8vw, 6rem); }
.cds-section__head { gap: .5rem 2rem; margin-bottom: 1.5rem; }
.cds-section__head h2 { margin: 0; }
.cds-section__more { margin: 0; }
.cds-section__more a { color: var(--cds-accent); font-weight: 500; text-decoration: none; }
.cds-section__more a::after { content: " →"; }
.cds-section__more a:hover { text-decoration: underline; }
.cds-home-styles ul.products { margin-top: 0; }

/* An intro paragraph followed by the trust bar (hub pages): room between them (Mike, Oct 12 2026). */
.entry-content > .cds-lead + .cds-trust { margin-top: clamp(2rem, 4vw, 3rem); }

/* Trust bar: an icon over each point. */
.cds-trust .wp-block-columns { gap: 2rem; }
/* The icon sits beside the title and text, not on top of them (Mike, Oct 31 2026). */
.cds-trust__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: .9rem; align-content: start; }
.cds-trust__item > * { grid-column: 2; }
.cds-trust__item :is(h2, h3) { margin: .15rem 0 .3rem; }
.cds-trust__item p { margin: 0; }
.cds-trust__item::before { grid-column: 1; grid-row: 1 / span 2; content: ""; display: block; width: 28px; height: 28px; background: var(--cds-green); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.cds-trust__item--size { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 17 17 3l4 4L7 21H3z'/%3E%3Cpath d='M14 6l2 2M11 9l2 2M8 12l2 2'/%3E%3C/svg%3E"); }
.cds-trust__item--plant { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3 4 15h5l-2 6h10l-2-6h5z'/%3E%3C/svg%3E"); }
.cds-trust__item--ship { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.cds-trust__item--warranty { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }

/* How ordering works: numbered steps. */
.cds-steps { padding: clamp(3rem, 7vw, 5rem) 0; counter-reset: step; }
.cds-steps h2 { margin-top: 0; }
.cds-steps__list { gap: 2rem; margin-top: 2rem; }
/* The number sits beside the step's title and text (Mike, Oct 31 2026). */
.cds-step { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; align-content: start; }
.cds-step > * { grid-column: 2; }
.cds-step::before { grid-column: 1; grid-row: 1 / span 2; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--cds-accent); color: #fff; font-weight: 600; }
.cds-step h3 { margin: .45rem 0 .35rem; }
.cds-step p { margin: 0; }
.cds-step a, .cds-trust__item a { color: var(--cds-accent); }

/* Who makes your doors. */
.cds-story .wp-block-media-text__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.cds-story .wp-block-media-text__content { padding: clamp(1.5rem, 4vw, 3.5rem); }
.cds-story h2 { margin: .5rem 0 1rem; }

/* Store reviews on the home page. */
.cds-home-reviews h2 { margin-bottom: 0; }
.cds-home-reviews .cds-sr-list--featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cds-home-reviews .cds-sr-list--featured .cds-sr { border: 0; background: var(--cds-warm); padding: 1.5rem; }
@media (max-width: 900px) { .cds-home-reviews .cds-sr-list--featured { grid-template-columns: minmax(0, 1fr); } }

/* Shop by category: the product grid, with the count kept quiet. */
.cds-categories ul.products li.product-category h2 { font-size: 1.05rem; font-weight: 500; margin: 0; }
ul.products li.product-category mark.count { background: none; color: var(--cds-muted); font-size: .85em; font-weight: 400; }

/* Contact details from Store details ([cds_store_details]). */
.cds-details { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
.cds-details dt { color: var(--cds-muted); font-size: .9rem; padding-top: .1em; }
.cds-details dd { margin: 0; }

/* Content pages: species rows, swatch galleries, paint colors, tables. */
.cds-media-row { margin: 0 auto 2.5rem; }
.cds-media-row .wp-block-media-text__media img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.cds-media-row .wp-block-media-text__content { padding: 0 0 0 2rem; }
.cds-media-row .wp-block-media-text__content > :first-child { margin-top: 0; }
.cds-swatches.wp-block-gallery { gap: 1.25rem; margin-bottom: 2.5rem; }
.wp-block-gallery.has-nested-images.cds-swatches figure.wp-block-image:not(#individual-image) { flex-direction: column; justify-content: flex-start; flex-grow: 0; }
.wp-block-gallery.has-nested-images.cds-swatches figure.wp-block-image:not(#individual-image) img { width: 100%; height: auto; flex: none; }
.wp-block-gallery.has-nested-images.cds-swatches figure.wp-block-image::before { display: none; }
.wp-block-gallery.has-nested-images.cds-photos figure.wp-block-image:not(#individual-image) img { object-fit: cover; }
.wp-block-gallery.has-nested-images.cds-swatches figure.wp-block-image figcaption { position: static; flex: none; background: none; color: var(--cds-ink); text-shadow: none; padding: .5rem 0 0; margin: 0; font-size: .85rem; text-align: center; max-height: none; overflow: visible; }
/* Paint colors: an evenly spaced gallery; a click opens the color large (Mike, Oct 20 2026). */
.cds-colors.cds-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.75rem 1.25rem; margin-bottom: 2.5rem; }
.cds-color { aspect-ratio: 1; border: 1px solid var(--cds-line); border-radius: 2px; }
.cds-color-item { text-align: center; }
/* WordPress's flow layout puts a top margin on every block but the first, which set the
   first swatch higher than the rest (Mike, Oct 20 2026); the grid gap does the spacing. */
.cds-colors.cds-colors > .cds-color-item, .cds-color-item > .cds-color { margin-block: 0; }
.cds-color-item p { margin: .6rem 0 0; font-size: .85rem; line-height: 1.35; }
/* A photo swatch (stain colors, Oct 21 2026) fills the square the same way. */
.cds-color.wp-block-image { overflow: hidden; }
.cds-color.wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The stain photos are a sample board on white, the wood 54% of the width: zoomed to a square of the wood. */
.cds-color--sample.wp-block-image img { transform: scale(1.9); }
.cds-color-item[role="button"] { cursor: pointer; }
.cds-color-item[role="button"]:hover .cds-color, .cds-color-item[role="button"]:focus-visible .cds-color { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cds-ink); }
.cds-color-item[role="button"]:focus-visible { outline: none; }
.cds-lightbox__swatch { position: absolute; inset: 0; margin: auto; width: min(70vh, calc(100vw - 7rem)); height: min(70vh, calc(100vw - 7rem)); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); background-size: cover; background-position: center; }
.cds-lightbox__caption { position: absolute; left: 0; right: 0; bottom: 1.5rem; margin: 0; text-align: center; color: #fff; font-size: 1rem; line-height: 1.5; }
.cds-lightbox__caption strong { display: block; font-size: 1.25rem; font-weight: 600; }
.cds-table table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.cds-table th, .cds-table td { border: 0; border-bottom: 1px solid var(--cds-line); padding: .6rem .75rem .6rem 0; text-align: left; }
.cds-table thead th { border-bottom: 1px solid var(--cds-ink); font-weight: 600; }
.cds-phone { font-size: 1.5rem; font-weight: 500; }
@media (max-width: 600px) { .cds-media-row .wp-block-media-text__content { padding: 1rem 0 0; } .cds-media-row .wp-block-media-text__media img { aspect-ratio: 16 / 9; } }

/* ---- side cart ------------------------------------------------------- */
.cds-drawer { position: fixed; inset: 0; z-index: 1000; }
.cds-drawer[hidden] { display: none; }
/* Logged in: the drawer starts below the admin toolbar, so nothing is cut off
   (Mike, Sept 2026). Under 600px the toolbar scrolls with the page, so the
   drawer covers it instead. */
.admin-bar .cds-drawer { top: 32px; }
@media (max-width: 782px) { .admin-bar .cds-drawer { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cds-drawer { top: 0; z-index: 100000; } }
.cds-drawer__overlay { position: absolute; inset: 0; background: rgba(29, 29, 27, .35); opacity: 0; transition: opacity .25s; }
.cds-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; outline: none;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .08);
}
.cds-drawer.is-open .cds-drawer__overlay { opacity: 1; }
.cds-drawer.is-open .cds-drawer__panel { transform: none; }
.cds-drawer.is-busy .cds-drawer__body, .cds-drawer.is-busy .cds-drawer__foot { opacity: .5; pointer-events: none; }
html.cds-drawer-open { overflow: hidden; }
.cds-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cds-line); }
.cds-drawer__title { margin: 0; font-size: 1.15rem; font-weight: 500; }
.cds-drawer__close { background: none; border: 0; font-size: 1.6rem; line-height: 1; padding: .25rem .4rem; cursor: pointer; color: var(--cds-ink); }
.cds-drawer__body { flex: 1; overflow-y: auto; padding: .5rem 1.25rem; }
.cds-drawer__checks { padding: .75rem 1.25rem 0; }
.cds-drawer__alert { background: var(--cds-warm); border-left: 3px solid #b8862b; font-size: .88rem; }
.cds-drawer__alert summary { cursor: pointer; padding: .65rem .85rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: .75rem; }
.cds-drawer__alert summary::-webkit-details-marker { display: none; }
.cds-drawer__alert summary::after { content: "Show"; font-weight: 400; text-decoration: underline; color: var(--cds-muted); }
.cds-drawer__alert[open] summary::after { content: "Hide"; }
.cds-drawer__alert ul { margin: 0; padding: 0 .85rem .75rem 2rem; max-height: 40vh; overflow-y: auto; }
.cds-drawer__alert li { margin: .3em 0; line-height: 1.45; }
.cds-drawer__save { margin-top: .5rem; padding: .6rem .85rem; background: #eef6e6; border-left: 3px solid var(--cds-green, #789d4a); font-size: .88rem; font-weight: 600; }
.cds-drawer__save span { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #4d6b2c; }
.cds-drawer__save p { margin: .15rem 0 0; }
.cds-drawer__items { list-style: none; margin: 0; padding: 0; }
.cds-drawer__item { padding: 1rem 0; border-bottom: 1px solid var(--cds-line); }
.cds-drawer__top { display: flex; justify-content: space-between; gap: 1rem; }
.cds-drawer__name { margin: 0 0 .25rem; font-weight: 600; font-size: .95rem; }
.cds-drawer__meta { margin: 0; color: var(--cds-muted); font-size: .82rem; line-height: 1.45; }
.cds-drawer__price { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cds-drawer__each { display: block; font-weight: 400; font-size: .78rem; color: var(--cds-muted); }
.cds-drawer__actions { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.cds-drawer__actions input { width: 4.5em; padding: .35em .4em; border: 1px solid var(--cds-field); border-radius: 2px; font: inherit; }
.cds-drawer__link { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; color: var(--cds-muted); text-decoration: underline; cursor: pointer; }
.cds-drawer__link:hover { color: var(--cds-ink); }
.cds-drawer__foot { border-top: 1px solid var(--cds-line); padding: 1rem 1.25rem 1.25rem; }
.cds-drawer__foot:empty { display: none; }
.cds-drawer__sums { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0 0 .5rem; }
.cds-drawer__sums dt { margin: 0; }
.cds-drawer__sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cds-drawer__sums dt:first-child, .cds-drawer__sums dd:nth-child(2) { font-weight: 600; }
.cds-drawer__note { color: var(--cds-muted); font-size: .82rem; margin: 0 0 1rem; }
.cds-drawer__checkout { display: block; width: 100%; text-align: center; }
.cds-drawer__view { display: block; text-align: center; margin-top: .75rem; font-size: .9rem; }
.cds-drawer__empty { margin: 2rem 0; color: var(--cds-muted); text-align: center; }
.cds-drawer__error { background: var(--cds-warm); border-left: 3px solid #b32d2e; padding: .6rem .8rem; font-size: .88rem; margin: .75rem 0; }

/* Pinned cart (docs/configurator/pinned-cart-spec.md, Mike, Oct 15 2026): on
   product pages, 1600px and up, the cart stays open on the right, from the top of
   the screen (under the admin toolbar when logged in) to the bottom; the page and
   the header's contents move over by its width, and the buy bar ends at its edge
   (Mike, Oct 15 2026: to the top, as the header moves over anyway). */
.cds-drawer__pin { display: none; }
.cds-drawer__item.is-new { animation: cds-new-line 2.4s ease-out; }
@keyframes cds-new-line { from { background: #eef6e6; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cds-drawer__item.is-new { animation: none; background: #f5f9f0; } }
@media (min-width: 1600px) {
  :root { --cds-pinned-w: 380px; }
  .single-product .cds-drawer__pin { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; margin-right: .5rem; padding: .3rem .6rem; background: none; border: 1px solid var(--cds-line); border-radius: 2px; font: inherit; font-size: .85rem; color: var(--cds-ink); cursor: pointer; }
  .single-product .cds-drawer__pin:hover, .single-product .cds-drawer__pin[aria-pressed="true"] { border-color: var(--cds-ink); }
  html.cds-cart-pinned .cds-drawer, html.cds-cart-pinned .cds-drawer[hidden] { display: block; left: auto; right: 0; bottom: 0; width: var(--cds-pinned-w); top: 0; z-index: 55; }
  html.cds-cart-pinned body.admin-bar .cds-drawer { top: 32px; }
  html.cds-cart-pinned .cds-drawer__overlay { display: none; }
  html.cds-cart-pinned .cds-drawer__panel { width: 100%; transform: none; transition: none; box-shadow: none; border-left: 1px solid var(--cds-line); }
  html.cds-cart-pinned .cds-main, html.cds-cart-pinned .cds-footer { margin-right: var(--cds-pinned-w); }
  /* The header's contents move over too, so the logo stays in line with the page. */
  html.cds-cart-pinned .cds-header { padding-right: var(--cds-pinned-w); }
  html.cds-cart-pinned .cds-buybar, html.cds-cart-pinned .cds-summary.cds-buybar { right: var(--cds-pinned-w); padding-left: max(var(--cds-gutter), calc((100% - var(--cds-pinned-w) - var(--cds-wide)) / 2 + var(--cds-gutter))); padding-right: var(--cds-gutter); }
}
/* Pinned below 1660px, the header has under 1280px: the small-desktop header. */
@media (min-width: 1600px) and (max-width: 1659px) {
  html.cds-cart-pinned .cds-header:not(.cds-header--focus) .cds-header__inner { gap: 1rem; }
  html.cds-cart-pinned .cds-header:not(.cds-header--focus) .cds-logo img { height: 48px; margin: -.5rem 0 -.5rem -.8rem; }
  html.cds-cart-pinned .cds-tools { gap: .75rem; }
  html.cds-cart-pinned .cds-search input[type="search"] { width: 7.5rem; }
  html.cds-cart-pinned .cds-mega { gap: 1rem; }
  html.cds-cart-pinned .cds-mega__link, html.cds-cart-pinned .cds-mega__toggle--label { font-size: .875rem; }
  html.cds-cart-pinned .cds-mega__toggle { padding-inline: .1rem; }
}
/* ---- footer ---------------------------------------------------------- */
/* Footer: laid out like V1, on the brand blue (Mike, Oct 10 2026). */
.cds-footer { background: var(--cds-accent); color: #fff; margin-top: clamp(4rem, 8vw, 6rem); }
/* A page that ends with a full-width band (the contact strip) meets the footer flush (Mike, Oct 10 2026). */
.cds-entry:has(> .entry-content > .alignfull:last-child) { padding-bottom: 0; }
.cds-main:has(> .cds-entry > .entry-content > .alignfull:last-child) + .cds-footer { margin-top: 0; }
.cds-footer__inner { max-width: var(--cds-wide); margin: 0 auto; padding: 3.5rem var(--cds-gutter) 2.5rem; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
.cds-footer a { color: #fff; text-decoration: none; }
.cds-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cds-footer ul { list-style: none; margin: 0; padding: 0; }
.cds-footer li { margin: .45rem 0; }
.cds-footer__logo { display: inline-block; margin: -.75rem 0 .5rem -1.1rem; font-weight: 600; }
/* The black logo, in white. */
.cds-footer__logo img { display: block; height: 64px; width: auto; filter: brightness(0) invert(1); }
.cds-footer__contact { font-size: .95rem; color: rgba(255, 255, 255, .85); }
.cds-footer__social { display: flex; gap: .5rem; margin-top: 1.25rem !important; }
.cds-footer__social li { margin: 0; }
.cds-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; }
.cds-footer__social a:hover { background: #fff; color: var(--cds-accent); text-decoration: none; }
.cds-footer__title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .7); margin: 0 0 .9rem; }
.cds-footer__menu { font-size: .95rem; }
.cds-footer__legal { max-width: var(--cds-wide); margin: 0 auto; padding: 1.25rem var(--cds-gutter) 2rem; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8rem; color: rgba(255, 255, 255, .75); }
.cds-footer__legal p { margin: 0 auto 0 0; }
.cds-footer__legal a { color: rgba(255, 255, 255, .75); }
/* Sign-up band at the top of the footer; the same form as the cds/signup pattern. */
.cds-footer__signup { max-width: var(--cds-wide); margin: 0 auto; padding: 2.75rem var(--cds-gutter); border-bottom: 1px solid rgba(255, 255, 255, .2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.5rem 3rem; align-items: center; }
.cds-footer__signup-text p { margin: 0; color: rgba(255, 255, 255, .8); }
.cds-footer__signup-text .cds-footer__signup-title { font-size: 1.35rem; font-weight: 500; color: #fff; margin-bottom: .35rem; }
.cds-footer .cds-signup label { color: rgba(255, 255, 255, .85); }
.cds-footer .cds-signup__message { color: #fff; }
.cds-footer .cds-signup__message.is-error { color: #ffd7d2; }
.cds-footer__cards { display: flex; gap: .4rem; margin: 0 !important; }
.cds-footer__cards li { margin: 0; }
.cds-footer__cards img { display: block; width: 38px; height: 24px; }
@media (max-width: 900px) { .cds-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cds-footer__brand { grid-column: 1 / -1; } .cds-footer__signup { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cds-footer__inner { gap: 2rem 1.5rem; } .cds-footer__legal p { width: 100%; } }

/* Full-width bands: their content lines up with the page's wide content
   (same width and left edge as the sections above and below). */
.entry-content > .alignfull.has-background > * { max-width: calc(var(--cds-wide) - 2 * var(--cds-gutter)); margin-left: auto; margin-right: auto; }
/* Full-width bands keep the page's side margins on small screens. */
.entry-content > .alignfull.cds-trust, .entry-content > .alignfull.cds-steps, .entry-content > .alignfull.cds-contact { padding-left: var(--cds-gutter); padding-right: var(--cds-gutter); }

/* Home: four curated category cards. */
.cds-cat-cards h2 { margin-top: 0; }
.cds-cat-cards__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: 1.5rem; }
.cds-cat-cards__grid > .cds-cat-card { margin-block: 0 !important; }
.cds-cat-card > * { margin-block: 0; }
.cds-cat-card .cds-cat-card__img { margin: 0 0 1rem; overflow: hidden; background: #fff; line-height: 0; }
.cds-cat-card .cds-cat-card__img a { display: block; }
.cds-cat-card .cds-cat-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .35s ease; }
.cds-cat-card:hover .cds-cat-card__img img { transform: scale(1.03); }
.cds-cat-card h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.cds-cat-card h3 a { text-decoration: none; color: var(--cds-ink); }
.cds-cat-card h3 a:hover { color: var(--cds-accent); }
.cds-cat-card p { margin: 0; }
@media (max-width: 900px) { .cds-cat-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .cds-cat-card .cds-cat-card__img img { transition: none; } }

/* ---- style landing pages (cds-landing) ---------------------------------- */
.cds-style-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: var(--cds-wide); margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.cds-style-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; margin: .5rem 0 1rem; text-wrap: balance; }
.cds-style-hero__lead { font-size: 1.15rem; color: var(--cds-muted); margin: 0 0 1rem; max-width: 34rem; }
.cds-style-hero__price { margin: 0 0 1.5rem; }
.cds-style-hero__price strong { font-size: 1.35rem; }
.cds-style-hero__buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.cds-style-hero__buttons .is-style-outline .wp-block-button__link { background: transparent; color: var(--cds-accent); border: 1.5px solid var(--cds-accent); }
.cds-style-hero__buttons .is-style-outline .wp-block-button__link:hover { background: var(--cds-accent); color: #fff; }
/* Room photo, or (until there is one) the product photo whole on white (Mike, Oct 10 2026: no sage tile). */
.cds-style-hero__media { background: #fff; }
.cds-style-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cds-style-hero__media--product img { object-fit: contain; }
@media (max-width: 900px) { .cds-style-hero { grid-template-columns: minmax(0, 1fr); } .cds-style-hero__media { order: -1; } }

.cds-style-products h2, .cds-style-gallery h2, .cds-style-reviews h2, .cds-style-others h2 { margin-top: 0; }
.cds-style-products__group { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cds-muted); margin: 2rem 0 1rem; }
.cds-style-products ul.products { margin-top: 0; }

.cds-style-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cds-style-gallery__item { margin: 0; }
.cds-style-gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cds-warm); }
.cds-style-gallery__item figcaption { font-size: .85rem; color: var(--cds-muted); margin-top: .5rem; }
@media (max-width: 900px) { .cds-style-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cds-style-gallery__grid { grid-template-columns: minmax(0, 1fr); } }

.cds-style-reviews .cds-sr-list--featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cds-style-reviews .cds-sr-list--featured .cds-sr { border: 0; background: var(--cds-warm); padding: 1.5rem; }
@media (max-width: 900px) { .cds-style-reviews .cds-sr-list--featured { grid-template-columns: minmax(0, 1fr); } }

/* Styles hub cards: the style's room photo, name, the first sentence of its intro, price and
   rating, centered like the product cards (Mike, Oct 10 2026). A look with one style (MDF) gets
   one wide card, photo beside the text. */
.cds-style-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.cds-style-card { min-width: 0; text-align: center; }
.cds-style-card__img { display: block; overflow: hidden; background: var(--cds-warm); margin-bottom: 1rem; }
.cds-style-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.cds-style-card:hover .cds-style-card__img img { transform: scale(1.03); }
.cds-style-card__name { font-size: 1.2rem; font-weight: 500; margin: 0; }
.cds-style-card__name a { color: var(--cds-ink); text-decoration: none; }
.cds-style-card:hover .cds-style-card__name a { color: var(--cds-accent); }
.cds-style-card__lead { margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--cds-muted); }
.cds-style-card__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem 1rem; margin: .75rem 0 0; font-size: .92rem; font-variant-numeric: tabular-nums; }
.cds-style-card__rating { display: inline-flex; align-items: center; gap: .35rem; color: var(--cds-muted); }
.cds-style-cards--one { grid-template-columns: minmax(0, 1fr); }
.cds-style-cards--one .cds-style-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 2.5rem; text-align: left; }
.cds-style-cards--one .cds-style-card__img { grid-column: 1; grid-row: 1 / -1; margin: 0; }
.cds-style-cards--one .cds-style-card__img img { aspect-ratio: 2 / 1; }
.cds-style-cards--one .cds-style-card > :not(.cds-style-card__img) { grid-column: 2; }
.cds-style-cards--one .cds-style-card__name { grid-row: 2; }
.cds-style-cards--one .cds-style-card__lead { grid-row: 3; font-size: 1.02rem; }
.cds-style-cards--one .cds-style-card__meta { grid-row: 4; justify-content: flex-start; }
.cds-style-others .cds-section__more { margin-top: 1.5rem; }
.cds-style-index__group { margin: 0 0 3rem; }
.cds-hub-lead { color: var(--cds-muted); }
@media (max-width: 1099px) { .cds-style-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }
@media (max-width: 640px) {
  .cds-style-cards { grid-template-columns: minmax(0, 1fr); }
  .cds-style-cards--one .cds-style-card { display: block; text-align: center; }
  .cds-style-cards--one .cds-style-card__img { margin-bottom: 1rem; }
  .cds-style-cards--one .cds-style-card__meta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cds-style-card__img img { transition: none; } }
/* Sections on style pages share the home page's rhythm. */
.entry-content > .cds-section { margin-top: clamp(3.5rem, 8vw, 6rem); }

/* ---- wood species pages (cds-landing; docs/site/species-landing-spec.md) ---- */
/* They use the style pages' layout; only the grades and the hub links are their own. */
.cds-species-woods h2 { margin-top: 0; }
.cds-species-woods__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.cds-species-woods__img { display: block; background: var(--cds-warm); margin-bottom: .75rem; }
.cds-species-woods__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cds-species-woods__item h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.cds-species-woods__item p { margin: 0 0 .35rem; color: var(--cds-muted); }
@media (max-width: 900px) { .cds-species-woods__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } }
@media (max-width: 560px) { .cds-species-woods__list { grid-template-columns: minmax(0, 1fr); } }
.cds-species-link { margin: .75rem 0 0; font-weight: 500; }
.cds-species-link a::after { content: "\00a0→"; } /* a no-break space keeps the arrow with the last word */

/* The species page layout (Mike, Oct 21 2026, from the Walnut mockup): a full-width
   room photo with a white panel over its lower edge, then sections set apart by space. */
/* Style pages use the same layout (Mike, Oct 21 2026); species pages carry both classes. */
.cds-style-page .cds-entry { padding-top: 0; }
.cds-style-page .entry-content > * + * { margin-top: clamp(4rem, 9vw, 7rem); }
.cds-sp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.cds-sp-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.cds-sp-head p { margin: .5rem 0 0; color: var(--cds-muted); max-width: 40em; }
.cds-sp-btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.cds-sp-btn { display: inline-flex; align-items: center; padding: .85em 1.4em; font-weight: 500; text-decoration: none; border: 1.5px solid var(--cds-accent); color: var(--cds-accent); background: #fff; }
.cds-sp-btn::after, .cds-sp-more::after { content: "\00a0→"; }
.cds-sp-btn:hover { background: var(--cds-accent); color: #fff; }
.cds-sp-btn--solid { background: var(--cds-accent); color: #fff; }
.cds-sp-btn--solid:hover { background: var(--cds-accent-dark); border-color: var(--cds-accent-dark); }

/* Hero */
/* What the visitor needs starts above the fold (CLAUDE.md, Design; Mike, Oct 22 2026): the hero is
   as tall as the screen leaves below the header and breadcrumbs, the white panel takes the height its
   text needs, and the photo gets the rest, up to about a 2:1 shape on tall tablets. A longer lead makes the photo shorter, never pushes the
   buttons and rating below the fold. */
.cds-sp-hero { position: relative; display: grid; grid-template-rows: minmax(9rem, 1fr) auto; min-height: clamp(420px, min(100svh - 165px, 46vw + 24rem), 900px); }
.cds-sp-hero--plain { display: block; min-height: 0; }
.cds-sp-hero__img { grid-row: 1; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; max-width: 100%; align-self: end; contain: size; aspect-ratio: auto; } /* contain and aspect-ratio: the photo takes the room left, not the height its width and shape would give it */
.cds-sp-hero__panel { grid-row: 2; position: relative; width: 100%; max-width: var(--cds-wide); margin: -7rem auto 0; padding: 0 var(--cds-gutter); }
.cds-sp-hero--plain .cds-sp-hero__panel { margin-top: 0; }
.cds-sp-hero__card { background: #fff; max-width: 640px; padding: 2.5rem 2.75rem 2.25rem; }
/* A wider panel on laptops: the lead wraps into fewer lines, and the rating sits beside the
   buttons on every page, so the photo keeps more room. 880px leaves room for the longest pair of
   buttons (the home page's) and the rating (Mike, Oct 23 2026: the same place on every page). */
@media (min-width: 1100px) {
  .cds-sp-hero__card { max-width: 880px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; }
  .cds-sp-hero__card > * { flex: 0 0 100%; }
  .cds-sp-hero__card > .cds-sp-btns { flex: 0 0 auto; }
  .cds-sp-hero .cds-sp-hero__card > .cds-sp-hero__rating { flex: 0 0 auto; margin: 0; white-space: nowrap; }
}
.cds-sp-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 500; margin: 0; text-wrap: balance; }
.cds-sp-hero__lead { color: var(--cds-muted); font-size: 1.12rem; margin: 1rem 0 1.25rem; }
.cds-sp-hero__price { margin: 0 0 1.4rem; }
.cds-sp-hero__price strong { font-size: 1.5rem; font-weight: 500; }
.cds-sp-hero__rating { margin: 1.25rem 0 0; font-size: .9rem; }
.cds-sp-hero__rating a { display: inline-flex; align-items: center; gap: .6rem; color: var(--cds-muted); text-decoration: none; }
/* Short laptop screens: the panel overlaps the photo less, so more of the photo shows above it. */
@media (max-height: 760px) and (min-width: 641px) { .cds-sp-hero__panel { margin-top: -3.5rem; } }
@media (max-height: 1000px) and (min-width: 641px) {
  .cds-sp-hero__card { padding: 2rem 2.5rem 1.75rem; }
  .cds-sp-hero h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
  .cds-sp-hero__lead { font-size: 1.05rem; margin: .75rem 0 1rem; }
  .cds-sp-hero__price { margin-bottom: 1rem; }
  .cds-sp-hero__rating { margin-top: 1rem; }
}
@media (max-width: 640px) {
  .cds-sp-hero { min-height: max(400px, 100svh - 140px); grid-template-rows: minmax(5rem, 1fr) auto; }
  .cds-sp-hero__panel { margin-top: 0; padding: 0; }
  .cds-sp-hero__card { padding: 1.25rem var(--cds-gutter) 0; }
  .cds-sp-hero h1 { font-size: 1.9rem; }
  .cds-sp-hero__lead { font-size: 1rem; margin: .6rem 0 .9rem; }
  .cds-sp-hero__price { margin-bottom: .9rem; }
  /* Both buttons on one line. */
  .cds-sp-hero .cds-sp-btns { flex-wrap: nowrap; gap: .5rem; }
  .cds-sp-hero .cds-sp-btn { flex: 1 1 0; justify-content: center; padding: .8em .6em; font-size: .92rem; white-space: nowrap; }
  /* Under 360px they stack, so nothing is wider than the screen (WCAG 1.4.10, 320px). */
  @media (max-width: 359px) { .cds-sp-hero .cds-sp-btns { flex-wrap: wrap; } .cds-sp-hero .cds-sp-btn { flex-basis: 100%; } }
  .cds-sp-hero__rating { margin-top: .9rem; }
}

/* At a glance */
.cds-sp-glance__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cds-sp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; margin: 0; }
.cds-sp-facts div { min-width: 0; border-top: 1px solid var(--cds-line); padding-top: .9rem; }
.cds-sp-facts dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cds-muted); margin-bottom: .35rem; }
.cds-sp-facts dd { margin: 0; font-size: 1.05rem; }
.cds-sp-swatch { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; vertical-align: -.15em; margin-right: .45em; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.cds-sp-tier b { font-weight: 500; }
.cds-sp-tier span { color: var(--cds-field); }
.cds-sp-grades { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .75rem; }
.cds-sp-grades li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.cds-sp-grades img, .cds-sp-grades li > span { width: 56px; height: 56px; object-fit: cover; display: block; background: var(--cds-warm); }
.cds-sp-grades strong { display: block; font-weight: 500; }
.cds-sp-grades div span { color: var(--cds-muted); font-size: .9rem; }
.cds-sp-grades a { font-size: .9rem; white-space: nowrap; }
.cds-sp-glance__grid--one { grid-template-columns: minmax(0, 1fr); }
.cds-sp-glance__grid--one .cds-sp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The style's door in every wood */
.cds-sp-every h3 { font-size: 1rem; font-weight: 500; margin: 0 0 .25rem; }
.cds-sp-every > p { margin: 0 0 1rem; color: var(--cds-muted); font-size: .9rem; }
.cds-sp-every__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem .75rem; }
.cds-sp-every__tile { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--cds-ink); text-decoration: none; font-size: .9rem; }
.cds-sp-every__tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #f6f7f3; mix-blend-mode: multiply; }
.cds-sp-every__tile span { margin-top: .35rem; font-weight: 500; }
.cds-sp-every__tile small { color: var(--cds-muted); font-variant-numeric: tabular-nums; }
.cds-sp-every__tile:hover span { color: var(--cds-accent); }
@media (max-width: 800px) { .cds-sp-glance__grid--one .cds-sp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cds-sp-hardness h3 { font-size: 1rem; font-weight: 500; margin: 0 0 .25rem; }
.cds-sp-hardness p { margin: 0 0 1rem; color: var(--cds-muted); font-size: .9rem; }
.cds-sp-hardness ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cds-sp-hardness li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 3.2rem; align-items: center; gap: .75rem; font-size: .9rem; color: var(--cds-muted); }
.cds-sp-hardness__track { display: block; height: 10px; background: var(--cds-warm); }
.cds-sp-hardness__track span { display: block; height: 100%; background: var(--cds-field); }
.cds-sp-hardness li.is-this { color: var(--cds-ink); font-weight: 500; }
.cds-sp-hardness li.is-this .cds-sp-hardness__track span { background: var(--cds-accent); }
.cds-sp-hardness li span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Pick your style */
.cds-sp-tabs__list { display: flex; gap: .25rem; border-bottom: 1px solid var(--cds-line); margin-bottom: 2rem; overflow-x: auto; scrollbar-width: none; }
.cds-sp-tabs__list button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .8rem 1rem; font: inherit; font-weight: 500; color: var(--cds-muted); cursor: pointer; white-space: nowrap; }
.cds-sp-tabs__list button[aria-selected="true"] { color: var(--cds-ink); border-color: var(--cds-accent); }
.cds-sp-tabs__list button span { font-weight: 400; margin-left: .35em; color: var(--cds-muted); }
.cds-sp-tabs .cds-sp-grid + .cds-sp-grid { margin-top: 3rem; }
.cds-sp-grid[hidden] { display: none; }
/* The wood picker on style pages (theme.js) */
.cds-sp-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 2rem; }
.cds-sp-picker > span { color: var(--cds-muted); font-size: .9rem; margin-right: .25rem; }
.cds-sp-picker button { appearance: none; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .45rem; border: 1px solid var(--cds-line); border-radius: 999px; background: #fff; font: inherit; font-size: .9rem; color: var(--cds-ink); cursor: pointer; }
.cds-sp-picker button img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.cds-sp-picker__paint { width: 24px; height: 24px; border-radius: 50%; background: #edece6; box-shadow: inset 0 0 0 1px var(--cds-line); }
.cds-sp-picker button[aria-pressed="true"] { border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); color: var(--cds-accent); }
.cds-sp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 1.75rem; }
.cds-sp-card { min-width: 0; display: flex; flex-direction: column; }
/* The renders sit on white; multiply lets the panel's tint show through their white. */
.cds-sp-card__media { position: relative; display: block; aspect-ratio: 1 / 1; max-width: 100%; overflow: hidden; background: #f6f7f3; }
.cds-sp-card__media img { position: absolute; display: block; height: auto; mix-blend-mode: multiply; transition: transform .4s ease; }
.cds-sp-card__door { width: 84%; left: -12%; top: 6%; }
.cds-sp-card__front { width: 56%; right: -4%; bottom: 4%; }
.cds-sp-card__one { width: 100%; left: 0; top: 0; }
.cds-sp-card__door:only-child { left: 4%; }
/* The hub cards' corner close-up, the front's profiles in the 3D view, in place of the photo on
   hover (Mike, Oct 22 2026). Multiplied like the photo, so its white margin takes the card's tint. */
.cds-sp-card__media .cds-sp-card__corner { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.cds-sp-card:hover .cds-sp-card__media .cds-sp-card__corner { transform: none; }
@media (hover: hover) {
  .cds-sp-card__media:has(.cds-sp-card__corner) img { transition: transform .4s ease, opacity .3s ease; }
  .cds-sp-card__media:hover .cds-sp-card__corner { opacity: 1; }
  .cds-sp-card__media:hover img:not(.cds-sp-card__corner):has(~ .cds-sp-card__corner) { opacity: 0; }
}
.cds-sp-card:hover .cds-sp-card__media img { transform: translateY(-4px); }
.cds-sp-card--byo .cds-sp-card__media { background: #eef2f6; }
.cds-sp-card__body { padding-top: 1rem; text-align: center; } /* product cards are centered (Mike, Oct 10 2026) */
.cds-sp-card h3 { font-size: 1.15rem; font-weight: 500; margin: 0; }
.cds-sp-card__look { margin: .1rem 0 0; color: var(--cds-muted); font-size: .88rem; }
.cds-sp-card__buy { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
.cds-sp-card__buy a { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; background: var(--cds-warm); color: var(--cds-ink); text-decoration: none; font-size: .92rem; }
.cds-sp-card__buy a span { color: var(--cds-muted); font-variant-numeric: tabular-nums; }
.cds-sp-card__buy a:hover { background: var(--cds-accent); color: #fff; }
.cds-sp-card__buy a:hover span { color: #dfe8f2; }
@media (max-width: 1100px) { .cds-sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .cds-sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } .cds-sp-glance__grid { grid-template-columns: minmax(0, 1fr); } }
/* Two cards across a phone: the link and its price stack, centered. */
@media (max-width: 600px) { .cds-sp-card__buy a { flex-direction: column; align-items: center; gap: 0; } }

/* Rooms */
.cds-sp-rooms__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.cds-sp-rooms__grid--three { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.cds-sp-rooms__grid--many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cds-sp-rooms figure { margin: 0; min-width: 0; display: flex; flex-direction: column; }
/* contain: size keeps the photos' own pixel size out of the grid's row heights. */
.cds-sp-rooms img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; contain: size; }
.cds-sp-rooms__grid--three figure:first-child { grid-row: span 2; }
/* The large kitchen keeps its 4:3 shape and sets the height; the two beside it share that height. */
.cds-sp-rooms__grid--three figure:not(:first-child) img { flex: 1 1 auto; height: 0; min-height: 8rem; aspect-ratio: auto; }
.cds-sp-rooms figcaption { font-size: .82rem; color: var(--cds-muted); margin-top: .5rem; }
@media (max-width: 900px) { .cds-sp-rooms__grid--many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cds-sp-rooms__grid, .cds-sp-rooms__grid--three, .cds-sp-rooms__grid--many { grid-template-columns: minmax(0, 1fr); } .cds-sp-rooms__grid--three figure:first-child { grid-row: auto; } .cds-sp-rooms__grid--three figure:not(:first-child) img { flex: none; height: auto; aspect-ratio: 4 / 3; } }

/* Why (the wood's story, written on the page) */
.cds-style-page .cds-sp-why { max-width: var(--cds-wide); }
.cds-sp-why > h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.01em; margin: 0 0 2rem; }
.cds-sp-why.cds-home-promise > h2 { margin-bottom: .75rem; }
.cds-home-promise > p { color: var(--cds-muted); max-width: 46em; margin: 0 0 2rem !important; }
.cds-home-promise > p:last-child { margin: 2rem 0 0 !important; color: var(--cds-ink); }
.cds-sp-why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; }
.cds-sp-why__grid > * { min-width: 0; margin: 0 !important; }
.cds-sp-why__grid h3 { font-size: 1.1rem; font-weight: 500; margin: 0 0 .4rem; }
.cds-sp-why__grid p { margin: 0; color: var(--cds-muted); max-width: 32em; }
@media (max-width: 700px) { .cds-sp-why__grid { grid-template-columns: minmax(0, 1fr); } }

/* Reviews */
.cds-sp-reviews__sum { display: flex; align-items: center; gap: .75rem; color: var(--cds-muted); }
.cds-sp-reviews__sum b { font-size: 2.6rem; font-weight: 400; line-height: 1; color: var(--cds-ink); }
.cds-sp-reviews .cds-sr-list--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cds-sp-reviews .cds-sr-list--featured .cds-sr { border: 0; background: var(--cds-warm); padding: 1.75rem; }
@media (max-width: 900px) { .cds-sp-reviews .cds-sr-list--featured { grid-template-columns: minmax(0, 1fr); } }

/* Build your own, one line */
.cds-byo-strip { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--cds-line); border-bottom: 1px solid var(--cds-line); padding-block: 1.75rem; }
.cds-byo-strip p { margin: 0; font-size: 1.1rem; font-weight: 500; }
.cds-byo-strip p span { display: block; color: var(--cds-muted); font-size: .95rem; font-weight: 400; }
.cds-byo-strip .cds-byo__button::after { content: "\00a0→"; }

/* Other woods */
.cds-sp-woods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.cds-sp-wood { min-width: 0; color: var(--cds-ink); text-decoration: none; }
.cds-sp-wood img, .cds-sp-wood__blank { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--cds-warm); }
.cds-sp-wood > span:not(.cds-sp-wood__blank) { display: block; margin-top: .5rem; font-weight: 500; }
.cds-sp-wood > small { display: block; color: var(--cds-muted); font-size: .85rem; }
.cds-sp-wood:hover > span:not(.cds-sp-wood__blank) { color: var(--cds-accent); }
.cds-sp-wood--style img { background: #f6f7f3; mix-blend-mode: multiply; object-fit: contain; }
@media (max-width: 900px) { .cds-sp-woods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cds-sp-card__media img, .cds-sp-card__media:has(.cds-sp-card__corner) img, .cds-sp-card__media .cds-sp-card__corner { transition: none; } }
.entry-content > .cds-steps, .entry-content > .cds-contact { margin-top: clamp(3.5rem, 8vw, 6rem); }
.cds-style-page .cds-entry > .cds-breadcrumbs, .cds-style-page .cds-entry > .woocommerce-breadcrumb { max-width: var(--cds-wide); }

/* Hub pages (Cabinet Doors, Drawer Fronts, Drawer Boxes, Wood Species) in the same layout
   (Mike, Oct 22 2026): the hero, then the pages' own headings and text between live sections. */
.cds-hub-page .cds-entry { padding-top: 0; }
.cds-hub-page .cds-entry > .cds-breadcrumbs, .cds-hub-page .cds-entry > .woocommerce-breadcrumb { max-width: var(--cds-wide); }
.cds-hub-page .entry-content > * + * { margin-top: clamp(3.5rem, 7vw, 6rem); }
.cds-hub-page .entry-content > .cds-sp-hero + * { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cds-hub-page .entry-content > .cds-hub-intro + .cds-hub-section { margin-top: clamp(2rem, 4vw, 3rem); }
.cds-hub-page .cds-hub-section > h2, .cds-hub-page .cds-hub-choose > h2, .cds-hub-page .cds-section__head h2, .cds-hub-page .cds-steps > h2, .cds-hub-page .cds-home-reviews > h2, .cds-hub-page .cds-faq > h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.01em; margin: 0 0 .5rem; text-wrap: balance; }
.cds-hub-page .cds-hub-section > p { max-width: 40em; margin: 0 0 2rem; }
.cds-hub-intro > p, .cds-hub-note p { font-size: 1.12rem; color: var(--cds-muted); max-width: 46em; }
.cds-hub-intro > p { margin: 0 0 1.5rem; }
.cds-hub-picker .cds-sp-picker { margin: 0; }
/* All seven woods in one row, four and three on smaller screens. */
.cds-sp-woods--all { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 900px) { .cds-sp-woods--all { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cds-sp-card h3 a { color: inherit; text-decoration: none; }
.cds-sp-card h3 a:hover { color: var(--cds-accent); }
/* Drawer Boxes: the two boxes side by side. */
.cds-hub-choose > h2 { margin-bottom: 1.5rem; }
.cds-choose { gap: 1.5rem; margin: 0 0 1.25rem; }
.cds-choose > .wp-block-column { background: var(--cds-warm); padding: clamp(1.5rem, 3vw, 2.25rem); }
.cds-choose h3 { font-size: 1.2rem; font-weight: 500; margin: 0 0 .5rem; }
.cds-choose p { margin: 0; }
/* Wood Species: the woods compared, and each grade as a card. */
.cds-hub-compare { overflow-x: auto; }
.cds-hub-compare table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.cds-hub-compare th, .cds-hub-compare td { text-align: left; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--cds-line); vertical-align: top; }
.cds-hub-compare thead th { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cds-muted); font-weight: 400; }
.cds-hub-compare tbody th { font-weight: 500; white-space: nowrap; }
.cds-hub-compare tbody th a { color: var(--cds-ink); text-decoration: none; }
.cds-hub-compare tbody th a::after { content: "\00a0→"; color: var(--cds-accent); }
.cds-hub-compare tbody th a:hover { color: var(--cds-accent); }
.cds-hub-compare td:last-child { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.cds-grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.cds-grades > .cds-grade { margin: 0; }
.cds-grade__img { margin: 0 0 1.25rem; }
.cds-grade__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cds-grade h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .5rem; }
.cds-grade p { color: var(--cds-muted); margin: 0 0 .75rem; }
@media (max-width: 800px) { .cds-grades { grid-template-columns: minmax(0, 1fr); } }

/* FAQ inside a page section: heading on the left, questions on the right,
   on the same wide grid as the sections around it. */
@media (min-width: 900px) {
  .entry-content > .cds-section.cds-faq, .entry-content > .cds-section > .cds-faq { max-width: calc(var(--cds-wide) - 2 * var(--cds-gutter)); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .entry-content > .cds-section.cds-faq > *, .entry-content > .cds-section > .cds-faq > * { grid-column: 2; width: 100%; max-width: none !important; }
  .entry-content > .cds-section.cds-faq > h2, .entry-content > .cds-section > .cds-faq > h2 { grid-column: 1; grid-row: 1 / span 20; margin-top: 0; }
  .entry-content > .cds-section > .cds-faq { padding: 0; }
  .entry-content > .cds-section:has(> .cds-faq) { max-width: none; }
}
.cds-faq .wp-block-details:first-of-type { border-top: 1px solid var(--cds-line); }
/* Even rows: the space between questions is the details' own padding, not an extra gap. */
.cds-faq > .wp-block-details { margin-block: 0 !important; }

/* Customer photos on style pages: one even row (8 across, 4 on phones). */
.cds-style-reviews .cds-sr-strip { margin-top: 2rem; }
.cds-style-reviews .cds-sr-strip .cds-sr-media { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; }
.cds-style-reviews .cds-sr-strip .cds-sr-media li { width: auto; height: auto; aspect-ratio: 1; }
.cds-style-reviews .cds-sr-strip .cds-sr-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .cds-style-reviews .cds-sr-strip .cds-sr-media { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- sign-up form (cds-signup: [cds_signup], the footer and the cds/signup pattern) ---- */
.cds-signup__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.cds-signup__field { flex: 1 1 12rem; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.cds-signup label { font-size: .85rem; font-weight: 500; }
.cds-signup input[type="text"], .cds-signup input[type="email"] { font: inherit; padding: .65rem .8rem; border: 1px solid var(--cds-line); border-radius: 4px; background: #fff; color: var(--cds-ink); min-height: 46px; }
/* White on the green is 3.12:1, enough only for large text (19px bold), like Add to Cart (WCAG 1.4.3). */
.cds-signup__button { background: var(--cds-green); color: #fff; border: 0; border-radius: 4px; padding: 0 1.4rem; min-height: 46px; font: inherit; font-size: 1.1875rem; font-weight: 700; cursor: pointer; }
.cds-signup__button:hover { filter: brightness(.92); }
.cds-signup__button:disabled { opacity: .6; cursor: wait; }
.cds-signup__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cds-signup__message { margin: .6rem 0 0; font-size: .9rem; min-height: 1.2em; }
.cds-signup__message.is-error { color: #b42318; }
.cds-signup-band .cds-signup { margin-top: 1.25rem; }
@media (max-width: 480px) { .cds-signup__button { width: 100%; } }

/* ---- inner-page sweep (Oct 2026) ---------------------------------------- */
/* Long words and links in migrated text never widen the page on phones. */
.entry-content { overflow-wrap: anywhere; }
.entry-content table { overflow-wrap: normal; }

/* Blog and other archives: the breadcrumb lines up with the wide title and cards. */
.cds-archive > .cds-breadcrumbs, .cds-archive > .woocommerce-breadcrumb { max-width: none; margin-left: 0; margin-right: 0; }

/* Swatch and diagram galleries: each image at its own shape, caption centered under it. */
.wp-block-gallery.has-nested-images.cds-swatches { align-items: flex-start; }
.wp-block-gallery.has-nested-images.cds-photos figure.wp-block-image:not(#individual-image) img { aspect-ratio: 4 / 3; }

/* Lists of many short items (e.g. paint colors) in columns. */
.cds-list-columns { columns: 3 12rem; column-gap: 2rem; }
.cds-list-columns li { break-inside: avoid; }

/* Products sold without the configurator: options, quantity and button in the house style. */
.single-product:not(.cds-configured) form.cart table.variations { border: 0; margin: 0 0 1rem; width: 100%; border-collapse: collapse; }
.single-product:not(.cds-configured) form.cart table.variations th, .single-product:not(.cds-configured) form.cart table.variations td { border: 0; padding: .35rem 0; vertical-align: middle; text-align: left; background: none; }
.single-product:not(.cds-configured) form.cart table.variations th.label { width: 9rem; padding-right: 1rem; font-weight: 500; font-size: .95rem; }
.single-product:not(.cds-configured) form.cart table.variations select { width: 100%; min-height: 46px; padding: .55rem .75rem; border: 1px solid var(--cds-field); border-radius: 2px; background-color: #fff; font: inherit; color: var(--cds-ink); }
.single-product:not(.cds-configured) form.cart table.variations td.value { position: relative; }
.single-product:not(.cds-configured) form.cart table.variations th.label { white-space: nowrap; }
/* WooCommerce's "Clear" link sits under the last option instead of taking up its row. */
.single-product:not(.cds-configured) form.cart .reset_variations { position: absolute; right: 0; top: 100%; font-size: .85rem; }
.single-product:not(.cds-configured) form.cart .woocommerce-variation-price { margin: 0 0 1rem; }
.single-product:not(.cds-configured) form.cart:not(.variations_form), .single-product:not(.cds-configured) form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.single-product:not(.cds-configured) form.cart .quantity { margin: 0; }
.single-product:not(.cds-configured) form.cart .quantity .qty { width: 5rem; height: 100%; min-height: 50px; padding: .5rem; border: 1px solid var(--cds-field); border-radius: 2px; font: inherit; text-align: center; }
.single-product:not(.cds-configured) form.cart .single_add_to_cart_button { min-height: 50px; padding: 0 2rem; border-radius: 2px; }
@media (max-width: 480px) { .single-product:not(.cds-configured) form.cart table.variations th.label { width: auto; } }

/* Product reviews (paged, newest first): the empty avatar column is gone. */
.cds-reviews .commentlist .comment-text, .cds-acc .commentlist .comment-text { margin: 0; padding: 0; border: 0; }
.cds-reviews .commentlist li, .cds-acc .commentlist li { margin: 0; }
.cds-reviews .woocommerce-pagination, .cds-acc .woocommerce-pagination, .cds-reviews nav.woocommerce-pagination { margin: 1.5rem 0 0; }
.cds-reviews .page-numbers, .cds-acc .page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.cds-reviews .page-numbers a, .cds-reviews .page-numbers span, .cds-acc .page-numbers a, .cds-acc .page-numbers span { display: inline-block; min-width: 2.25rem; padding: .35rem .6rem; border: 1px solid var(--cds-line); text-align: center; text-decoration: none; }
.cds-reviews .page-numbers .current, .cds-acc .page-numbers .current { background: var(--cds-accent); border-color: var(--cds-accent); color: #fff; }

/* My account: the menu on the left, the page on the right. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
@media (max-width: 900px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; } }

/* Cart, checkout and account: the title lines up with the wide page. */
.woocommerce-cart .cds-entry__header, .woocommerce-checkout .cds-entry__header, .woocommerce-account .cds-entry__header { max-width: var(--cds-wide); }
.wc-block-cart__empty-cart__title { margin-top: 1rem; }

/* Cart totals stay in view beside a long list of items (Mike, Oct 14 2026), just
   under the sticky header (103px with the top bar; 91px up to 900px wide). Only on
   screens tall enough to show the whole column. */
@media (min-height: 640px) {
  .wc-block-cart.is-large .wc-block-cart__sidebar { position: sticky; top: calc(103px + 1.5rem); align-self: flex-start; }
  .admin-bar .wc-block-cart.is-large .wc-block-cart__sidebar { top: calc(135px + 1.5rem); }
}
@media (min-height: 640px) and (max-width: 900px) {
  .wc-block-cart.is-large .wc-block-cart__sidebar, .admin-bar .wc-block-cart.is-large .wc-block-cart__sidebar { top: calc(91px + 1.5rem); }
}
/* Tablets (700px and wider): WooCommerce 11.2 stacks the cart below about 800px
   (its "medium" size). Keep two columns there, with a narrower totals column, so
   the totals can stay in view too (Mike, Oct 15 2026). */
@media (min-width: 700px) {
  .wc-block-cart.wc-block-components-sidebar-layout.is-medium { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 2rem; }
  .wc-block-cart.is-medium .wc-block-cart__main { flex: 1 1 0%; width: auto; min-width: 0; padding-right: 0; }
  .wc-block-cart.is-medium .wc-block-cart__sidebar { flex: 0 0 280px; width: 280px; }
}
@media (min-width: 700px) and (min-height: 640px) {
  .wc-block-cart.is-medium .wc-block-cart__sidebar { position: sticky; top: calc(91px + 1.5rem); }
}

/* Cart and checkout lines: no product image and no product description, only
   the name, price and the options chosen (Mike, Oct 11 2026). The checkout
   summary keeps the quantity, shown as "2 ×" before the name. */
.wc-block-cart-items__header-image, .wc-block-cart-item__image { display: none !important; }
.wc-block-cart-items__header .wc-block-cart-items__header-product { visibility: visible; }
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-product { padding-left: 0; }
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 1fr auto; padding-left: 0; }
.wc-block-cart.is-mobile .wc-block-cart-item__product, .wc-block-cart.is-small .wc-block-cart-item__product, .wc-block-cart.is-medium .wc-block-cart-item__product { grid-column: 1 !important; padding-left: 0 !important; }
.wc-block-cart.is-mobile .wc-block-cart-item__total, .wc-block-cart.is-small .wc-block-cart-item__total, .wc-block-cart.is-medium .wc-block-cart-item__total { grid-column: 2 !important; }
.wc-block-components-product-metadata__description { display: none; }
.wc-block-components-order-summary .wc-block-components-order-summary-item__image { flex: 0 0 auto; width: auto; min-width: 0; padding: 4px 0 0; margin: 0; }
.wc-block-components-order-summary .wc-block-components-order-summary-item__description { padding-left: .4rem; }
.wc-block-components-order-summary-item__image img { display: none; }
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity { position: static; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; font-weight: 600; line-height: inherit; transform: none; }
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span { color: inherit; }
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity::after { content: "\00a0×"; }
.woocommerce-cart-form .product-thumbnail { display: none; }

/* Checkout: focused, with no links out (docs/checkout/checkout-spec.md §1). The logo
   goes back to the cart; then the phone number and "Secure checkout". The order
   summary gets more room: 60/40 instead of WooCommerce's 65/35 (Mike, Oct 12 2026). */
/* The header stays at the top while scrolling, so the phone number is always in
   view (Mike, Oct 14 2026). Anything WooCommerce scrolls to (a field error)
   lands below it, and its sticky order summary sits under it. */
html:has(.cds-header--focus) { scroll-padding-top: calc(var(--cds-focus-h, 71px) + 1rem); }
.cds-focus .wc-block-checkout__sidebar.is-sticky { top: calc(var(--cds-focus-h, 71px) + 1rem) !important; }
.cds-header--focus .cds-header__inner { max-width: var(--cds-wide); justify-content: space-between; gap: 1rem; }
.cds-header--focus .cds-logo { margin-right: auto; }
.cds-header--focus .cds-logo:has(+ .cds-focus__title) { margin-right: 2rem; }
.cds-focus__help, .cds-focus__secure { margin: 0; font-size: .9rem; }
.cds-focus__help a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.cds-focus__secure { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--cds-accent); white-space: nowrap; }
.cds-focus__title { margin: 0 auto 0 0; display: flex; align-items: center; gap: .45rem; font-size: 1.35rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.cds-focus__title .cds-lock { color: var(--cds-accent); flex: 0 0 auto; }
/* With the title in the header, the form starts just under it. */
.cds-focus.woocommerce-checkout .cds-entry { padding-top: .75rem; }
.cds-focus.woocommerce-checkout .wp-block-woocommerce-checkout { padding-top: 0; }
.cds-footer--focus { background: #fff; color: var(--cds-muted); border-top: 1px solid var(--cds-line); margin-top: 3rem; }
.cds-footer--focus .cds-footer__legal { border-top: 0; color: var(--cds-muted); }
/* WooCommerce 11.1 sizes the columns by width; 11.2 by flex (a fixed 360px sidebar). */
.wc-block-checkout.wc-block-components-sidebar-layout.is-large .wc-block-components-main { width: 60%; }
.wc-block-checkout.wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar { width: 40%; flex: 0 0 40%; }
@media (max-width: 720px) {
  /* One line: logo, title, phone (Mike, Oct 14 2026). Sizes follow the screen width. */
  .cds-header--focus .cds-header__inner { gap: .4rem; padding-top: .6rem; padding-bottom: .6rem; }
  .cds-header--focus .cds-logo img { height: clamp(22px, 7.5vw, 36px); margin: 0; }
  .cds-header--focus .cds-logo:has(+ .cds-focus__title) { margin-right: 0; }
  .cds-focus__help span { display: none; }
  .cds-focus__help, .cds-focus__secure { font-size: clamp(.65rem, 3.2vw, .8rem); }
  .cds-focus__title { margin: 0 auto; gap: .25rem; font-size: clamp(.75rem, 3.8vw, 1.1rem); }
  .cds-focus__title .cds-lock { width: 1.1em; height: 1.1em; }
  .cds-focus__secure svg { width: 15px; height: 15px; }
  html:has(.cds-header--focus) { --cds-focus-h: 56px; }
}

/* An intro paragraph under a page title. */
.entry-content > .cds-lead { font-size: 1.15rem; color: var(--cds-muted); }

/* Hub pages (/cabinet-doors/ …): a heading and line, then the product row. */
.cds-hub-section > h2 { margin: 0 0 .4rem; }
.cds-hub-section > p { color: var(--cds-muted); margin: 0 0 1.5rem; }
.cds-hub-section .woocommerce ul.products, .cds-hub-section ul.products { margin-top: 0; }

/* Hub pages: breadcrumb, title and intro start at the same left edge as the product rows, and the
   intro and section lines run as wide as the trust bar and product rows (Mike, Oct 12 2026). */
.cds-entry:has(.cds-hub-section) > .cds-breadcrumbs, .cds-entry:has(.cds-hub-section) > .woocommerce-breadcrumb, .cds-entry:has(.cds-hub-section) > .cds-entry__header { max-width: none; }
.cds-entry:has(.cds-hub-section) .entry-content > .cds-lead { max-width: none; margin-left: 0; }
.cds-entry:has(.cds-hub-section) .entry-content > .cds-section:not(.alignwide) { max-width: none; }
.cds-entry:has(.cds-hub-section) .entry-content > .cds-section:not(.alignwide) > *:not(.cds-faq) { max-width: none; margin-left: 0 !important; }
/* Any page with wide content (photo galleries, color swatches, profile drawings): its breadcrumb,
   title and text run as wide as that content, from the same left edge (Mike, Oct 12 2026). */
.cds-entry:has(.entry-content > .alignwide) > .cds-breadcrumbs,
.cds-entry:has(.entry-content > .alignwide) > .woocommerce-breadcrumb,
.cds-entry:has(.entry-content > .alignwide) > .cds-entry__header,
.cds-entry:has(.entry-content > .alignwide) > .cds-entry__title { max-width: none; }
.cds-entry:has(.entry-content > .alignwide) .entry-content > *:not(.alignfull) { max-width: none; }
.cds-entry:has(.entry-content > .alignwide) .entry-content > .is-layout-constrained:not(.alignfull) > :not(.alignleft):not(.alignright):not(.alignfull) { max-width: none; }
/* The style hub (/cabinet-door-styles/) the same: breadcrumb, title and intro at the cards' left edge, as wide as them. */
.cds-entry:has(.cds-style-index) > .cds-breadcrumbs, .cds-entry:has(.cds-style-index) > .woocommerce-breadcrumb, .cds-entry:has(.cds-style-index) > .cds-entry__header { max-width: var(--cds-wide); }
.cds-entry:has(.cds-style-index) .entry-content > .cds-hub-lead { max-width: var(--cds-wide); }

/* Outline buttons are the blue outline everywhere (the home hero keeps its white one). */
.wp-block-button.is-style-outline:not(.cds-hero .wp-block-button) > .wp-block-button__link { background: transparent; color: var(--cds-accent); border: 1.5px solid var(--cds-accent); }
.wp-block-button.is-style-outline:not(.cds-hero .wp-block-button) > .wp-block-button__link:hover { background: var(--cds-accent); color: #fff; }

/* WooCommerce indents each review for an avatar (an ID rule); we show none. */
.woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; border: 0; border-radius: 0; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li { margin: 0; }
.woocommerce #reviews #comments ol.commentlist li img.avatar { display: none; }

/* No floating "Sale!" badges: the struck-through price says it. */
.woocommerce span.onsale, ul.products li.product .onsale { display: none; }

/* Gift card product page (cds-discounts, gift cards spec §1): amount buttons, the recipient form, the balance check. */
.cds-gc { margin: 0 0 1.25rem; display: grid; gap: .9rem; max-width: 34rem; }
.cds-gc__amounts { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cds-gc__amounts legend { grid-column: 1 / -1; font-weight: 500; margin-bottom: .5rem; padding: 0; }
.cds-gc__amount { position: relative; }
.cds-gc__amount input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cds-gc__amount span { display: block; padding: .7rem .25rem; text-align: center; border: 1px solid var(--cds-field); border-radius: 2px; font-weight: 600; background: #fff; }
.cds-gc__amount input:checked + span { border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); color: var(--cds-accent); }
.cds-gc__amount input:focus-visible + span { outline: 2px solid var(--cds-accent); outline-offset: 2px; }
.cds-gc__field { margin: 0; display: grid; gap: .3rem; }
.cds-gc__field label { font-weight: 500; font-size: .95rem; }
.cds-gc__field input, .cds-gc__field textarea { width: 100%; min-height: 46px; padding: .6rem .75rem; border: 1px solid var(--cds-field); border-radius: 2px; font: inherit; box-sizing: border-box; }
.cds-gc__field textarea { min-height: 5.5rem; }
.cds-gc__note { margin: 0; color: var(--cds-muted); font-size: .9rem; }
.cds-gc-balance { margin: 1.5rem 0 0; font-size: .95rem; }
.cds-gc-balance summary { cursor: pointer; color: var(--cds-accent); }
.cds-gc-balance input { min-height: 40px; padding: .4rem .6rem; border: 1px solid var(--cds-field); text-transform: uppercase; width: 16rem; max-width: 100%; }
.cds-gc-balance__out { margin: .25rem 0 0; font-weight: 500; }
.cds-gc-order ul, .cds-gift-use p { margin: 0 0 .5rem; }
.cds-gift-error { color: #b32d2e; }

/* Hardware product pages: the ship estimate and shipping note under the price (cds-orders, Mike, Oct 14 2026). */
/* One line at every width: cds-orders' ship-estimate.js shrinks the font to fit. */
.single-product p.cds-ship { margin: -.25rem 0 1rem; font-size: 15px; color: var(--cds-muted); white-space: nowrap; overflow: hidden; }
.single-product p.cds-ship:empty { display: none; }

/* The narrowest phones: a slightly smaller logo and tighter gaps, so the account
   and cart icons fit their column and the logo stays centered (Oct 14 2026). */
@media (max-width: 360px) {
  .cds-header:not(.cds-header--focus) .cds-header__inner { gap: .5rem; }
  .cds-header:not(.cds-header--focus) .cds-logo img { height: 36px; }
}

/* Buy bar (docs/configurator/buy-bar-spec.md, Mike, Oct 15 2026): on desktop,
   every product page's price, ship line, Add to cart and Chat with Us sit in one
   bar along the bottom of the screen, its contents in line with the header. The
   configurator's price row is the bar on configured products; inc/buy-bar.php
   prints it for the others. Phones and tablets: no bar. */
.cds-buybar--wc { display: none; }
@media (min-width: 901px) {
  .cds-buybar, .cds-summary.cds-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-sizing: border-box; min-height: 72px; margin: 0;
    display: flex; align-items: center; gap: 1.25rem;
    padding: .6rem max(var(--cds-gutter), calc((100% - var(--cds-wide)) / 2 + var(--cds-gutter)));
    background: #fff; border-top: 1px solid var(--cds-line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  }
  .cds-buybar--wc { display: flex; }
  .cds-buybar--wc .cds-buybar__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
  .cds-buybar--wc .cds-buybar__price { font-size: 1.35rem; font-weight: 600; color: var(--cds-ink); }
  .cds-buybar--wc .cds-buybar__price del { font-size: .8em; font-weight: 400; color: var(--cds-muted); }
  .woocommerce div.product .cds-buybar--wc .cds-buybar__price, .single-product .cds-buybar--wc .cds-buybar__ship p.cds-ship { margin: 0; line-height: 1.3; }
  .cds-buybar--wc .cds-buybar__ship .cds-ship { color: var(--cds-muted); }
  .cds-buybar--wc .cds-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
  .woocommerce .cds-buybar--wc .button.alt.cds-buybar__cart { min-width: 11em; padding: .75em 1.4em; background: #789d4a; border-color: #789d4a; color: #fff; font-size: 19px; font-weight: 700; }
  .woocommerce .cds-buybar--wc .button.alt.cds-buybar__cart:hover, .woocommerce .cds-buybar--wc .button.alt.cds-buybar__cart:focus { background: #688a3f; border-color: #688a3f; }
  .woocommerce .cds-buybar--wc .button.alt.cds-buybar__cart.disabled { opacity: .55; }
  /* One price and one Add to cart: the bar's. */
  /* The page's own Add to cart is hidden only when the bar has one to click it. */
  .has-cds-buybar--wc .summary > .price, .has-cds-buybar--wc .summary:has(.cds-buybar__cart) form.cart .single_add_to_cart_button { display: none; }
  /* Room for the bar: under the footer, and where the page scrolls to (a focused field). */
  .has-cds-buybar .cds-footer { padding-bottom: 76px; }
  html:has(body.has-cds-buybar) { scroll-padding-bottom: 96px; }
  .cds-configured .cds-stage { height: calc(100vh - 216px); height: calc(100svh - 216px); }
  .admin-bar.cds-configured .cds-stage { height: calc(100vh - 248px); height: calc(100svh - 248px); }
}
/* The bar is blue, and white where it sits over the blue footer (theme.js adds
   is-light), so it never disappears into it (Mike, Oct 15 2026). */
@media (min-width: 901px) {
  .cds-buybar, .cds-summary.cds-buybar { background: var(--cds-accent); color: #fff; border-top-color: transparent; transition: background-color .2s, color .2s; }
  .cds-buybar.is-light, .cds-summary.cds-buybar.is-light { background: #fff; color: var(--cds-ink); border-top-color: var(--cds-line); }
  .cds-buybar:not(.is-light) .cds-total-label, .cds-buybar:not(.is-light) .cds-total-value, .cds-buybar--wc:not(.is-light) .cds-buybar__price { color: #fff; }
  .cds-buybar:not(.is-light) .cds-ship-box, .cds-buybar:not(.is-light) .cds-ship, .cds-buybar:not(.is-light) .cds-ship-note, .cds-buybar:not(.is-light) .cds-fee, .cds-buybar--wc:not(.is-light) .cds-buybar__price del { color: rgba(255, 255, 255, .85); }
  .cds-buybar:not(.is-light) .cds-tip { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
  .woocommerce .cds-cfg .cds-buybar:not(.is-light) button.button.cds-add-row { background: transparent; color: #fff; }
  .woocommerce .cds-cfg .cds-buybar:not(.is-light) button.button.cds-add-row:hover { text-decoration: underline; }
  /* Add to cart: an outline until the order can be added, then green; white on
     the blue bar, blue on the white one (Mike, Oct 15 2026). The outline and
     text are faded, so it reads as not clickable yet (Mike, Oct 19 2026). */
  .woocommerce .cds-cfg .cds-buybar button.button.alt.cds-cart, .woocommerce .cds-buybar--wc .button.alt.cds-buybar__cart,
  .woocommerce .cds-cfg .cds-buybar button.button.alt.cds-cart:disabled, .woocommerce .cds-buybar--wc .button.alt.cds-buybar__cart.disabled { border-width: 2px; border-style: solid; padding-top: .8em; padding-bottom: .8em; }
  .woocommerce .cds-cfg .cds-buybar:not(.is-light) button.button.alt.cds-cart:disabled, .woocommerce .cds-buybar--wc:not(.is-light) .button.alt.cds-buybar__cart.disabled { background: transparent; border-color: rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .45); opacity: 1; cursor: not-allowed; }
  .woocommerce .cds-cfg .cds-buybar.is-light button.button.alt.cds-cart:disabled, .woocommerce .cds-buybar--wc.is-light .button.alt.cds-buybar__cart.disabled { background: #fff; border-color: rgba(0, 75, 135, .4); color: rgba(0, 75, 135, .45); opacity: 1; cursor: not-allowed; }
  /* A little more room between Add to cart and the chat icon. */
  .cds-buybar .cds-chat-slot { margin-left: .75rem; }
}


/* ---- build your own (category pages) -------------------------------- */
/* Mike, Oct 21 2026: the blank tenon product next to the preset styles. */
.cds-byo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); margin: clamp(2.5rem, 6vw, 4rem) 0; padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--cds-line); background: #fff; }
.cds-byo__media { display: block; }
.cds-byo__img { display: block; width: 100%; height: auto; max-width: 300px; margin: 0 auto; }
.cds-byo__body > * { margin: 0; }
.cds-byo__title { margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cds-byo__text { margin-top: .75rem; max-width: 34rem; color: var(--cds-muted); line-height: 1.55; }
.cds-byo__price { margin-top: 1rem; font-weight: 500; }
.cds-byo__button { margin-top: 1.25rem; }
.cds-byo__button::after { content: "\00a0→"; }
.woocommerce-products-header + .cds-byo, .cds-byo:first-child { margin-top: 0; }
@media (max-width: 700px) {
  .cds-byo { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .cds-byo__img { max-width: 220px; }
  .cds-byo__button { display: block; text-align: center; }
}
.cds-byo-section > .cds-byo { margin: 0; }

/* ---- About Us (Mike, Oct 31 2026): the hub layout, with the shop's story, how we make doors and customer projects ---- */
.cds-eyebrow { margin: 0; color: var(--cds-accent); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cds-hub-page .cds-about-projects > h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.01em; margin: 0 0 .5rem; text-wrap: balance; }
.cds-about-steps > p, .cds-about-projects > p { max-width: 760px; margin: 0; }
.cds-about-steps .cds-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 3rem; margin-top: 2.5rem; }
.cds-about-steps .cds-steps__list > * { margin: 0; }
@media (max-width: 900px) { .cds-about-steps .cds-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cds-about-steps .cds-steps__list { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.cds-about-story .wp-block-media-text__content > * + * { margin-top: 1rem; }
.cds-about-story .cds-eyebrow + h2 { margin-top: .5rem; }
.wp-block-gallery.has-nested-images.cds-about-photos { gap: .75rem; margin-top: 1.75rem; }
.wp-block-gallery.has-nested-images.cds-about-photos figure.wp-block-image:not(#individual-image) img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
@media (max-width: 600px) { .wp-block-gallery.has-nested-images.cds-about-photos figure.wp-block-image:not(#individual-image) { width: calc(50% - .375rem); } }

/* ---- Contact (Mike, Oct 31 2026): three ways to reach us as cards, then quick links. The chat opens on arrival
   at the right, so the page keeps to a 680px column that clears it. ---- */
.cds-contact-lead { font-size: 1.12rem; color: var(--cds-muted); margin: 0 0 2rem; max-width: 680px; }
.cds-contact-ways { display: grid; gap: 1rem; max-width: 680px; }
.cds-contact-ways > *, .cds-contact-links ul > * { margin: 0; }
.cds-contact-way { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1.25rem; align-content: start; background: var(--cds-warm); padding: 1.5rem 1.75rem; border-radius: 4px; }
.cds-contact-way > * { grid-column: 2; margin: 0; }
.cds-contact-way > * + * { margin-top: .6rem; }
.cds-contact-way::before { grid-column: 1; grid-row: 1 / span 3; content: ""; width: 44px; height: 44px; border-radius: 50%; background: var(--cds-accent) var(--icon) center / 22px no-repeat; }
.cds-contact-way--chat { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.cds-contact-way--phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.cds-contact-way--mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.cds-contact-way h2 { font-size: 1.25rem; font-weight: 500; margin-top: .55rem; }
.cds-contact-way .cds-phone { font-size: 1.6rem; line-height: 1.2; }
.cds-contact-way .cds-phone a { color: var(--cds-accent); text-decoration: none; }
.cds-contact-way .cds-phone a:hover { text-decoration: underline; }
.cds-contact-way .wp-block-buttons { margin-top: 1rem; }
.cds-contact-links { max-width: 680px; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cds-contact-links h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 1rem; }
.cds-contact-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.cds-contact-links li a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--cds-line); border-radius: 4px; color: var(--cds-ink); text-decoration: none; }
.cds-contact-links li a::after { content: "→"; color: var(--cds-accent); }
.cds-contact-links li a:hover { border-color: var(--cds-accent); color: var(--cds-accent); }
/* Beside the open chat (380px wide, 20px from the right) the column stops short of it, at any width. */
@media (min-width: 601px) {
  .cds-contact-lead, .cds-contact-ways, .cds-contact-links { max-width: min(680px, calc(50vw - 60px)); }
  /* Left-aligned with the title's 760px column, not centered in it (WordPress centers each block with !important). */
  .entry-content > :is(.cds-contact-lead, .cds-contact-ways, .cds-contact-links) { margin-left: max(0px, calc(50% - 380px)) !important; margin-right: auto !important; }
}
@media (max-width: 600px) { .cds-contact-links ul { grid-template-columns: minmax(0, 1fr); } .cds-contact-way { padding: 1.25rem; column-gap: 1rem; } }

/* ---------- Search and 404 pages (cds-search; Mike, Nov 1 2026) ---------- */
.cds-search { position: relative; }
.cds-search--nav { display: none; }
.cds-results .cds-entry__title { max-width: none; margin: 0 0 1rem; }
.cds-results > .cds-breadcrumbs, .cds-results > .woocommerce-breadcrumb { max-width: none; margin-left: 0; margin-right: 0; } /* in line with the title, as on archives */
.cds-results__header { margin-bottom: 2rem; }
.cds-search--page { display: flex; gap: .5rem; max-width: 40rem; }
.cds-search--page input[type="search"] { flex: 1; min-width: 0; width: auto; border: 1px solid var(--cds-field); border-radius: 2px; padding: .7rem .9rem; font: inherit; font-size: 1rem; }
.cds-search__button { border: 0; border-radius: 2px; padding: .7rem 1.4rem; background: var(--cds-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.cds-search__button:hover, .cds-search__button:focus-visible { background: var(--cds-accent-dark); }
.cds-results__note { margin: .9rem 0 0; color: var(--cds-muted); }
.cds-results__note:empty { display: none; }
.cds-results__lead { font-size: 1.15rem; margin: 0 0 .5rem; }
.cds-results__shortcut { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: baseline; max-width: 56rem; margin: 0 0 3rem; padding: 1.1rem 1.4rem; background: var(--cds-warm); border-left: 4px solid var(--cds-accent); color: var(--cds-ink); text-decoration: none; }
.cds-results__shortcut:hover .cds-results__shortcut-title, .cds-results__shortcut:focus-visible .cds-results__shortcut-title { text-decoration: underline; }
.cds-results__go { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cds-accent); }
.cds-results__shortcut-title { font-size: 1.2rem; font-weight: 600; }
.cds-results__shortcut-title::after { content: "\00a0→"; color: var(--cds-accent); }
.cds-results__shortcut-line { grid-column: 2; color: var(--cds-muted); font-size: .95rem; }
.cds-results__section { margin: 0 0 3.5rem; }
.cds-results__section > h2 { font-size: 1.3rem; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--cds-line); }
.cds-results__count { color: var(--cds-muted); font-weight: 400; font-size: 1rem; margin-left: .3rem; }
.cds-results__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; max-width: 72rem; }
.cds-results__list a { font-weight: 600; color: var(--cds-accent); text-decoration: none; }
.cds-results__list a:hover, .cds-results__list a:focus-visible { text-decoration: underline; }
.cds-results__list p { margin: .25rem 0 0; color: var(--cds-muted); font-size: .95rem; line-height: 1.5; }
.cds-results__none { max-width: 44rem; margin: 0 0 1rem; }
.cds-results__help .cds-cat-cards { margin-top: 2.5rem; }
.cds-guesses { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 72rem; }
.cds-guess { display: flex; gap: 1rem; align-items: center; height: 100%; padding: .9rem; border: 1px solid var(--cds-line); border-radius: 2px; color: var(--cds-ink); text-decoration: none; }
.cds-guess:hover, .cds-guess:focus-visible { border-color: var(--cds-accent); }
.cds-guess:hover .cds-guess__title, .cds-guess:focus-visible .cds-guess__title { text-decoration: underline; }
.cds-guess__img { flex: 0 0 72px; width: 72px; height: 72px; background: var(--cds-warm); }
.cds-guess__img img { width: 72px; height: 72px; object-fit: contain; background: #fff; display: block; }
.cds-guess__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cds-guess__kind { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cds-muted); }
.cds-guess__title { font-weight: 600; color: var(--cds-accent); }
.cds-guess__price { font-size: .9rem; color: var(--cds-muted); }
.cds-notfound__search { margin: 0 0 1rem; }
.cds-notfound__search h2 { font-size: 1.3rem; margin: 0 0 .8rem; }
@media (max-width: 900px) {
  .cds-guesses { grid-template-columns: minmax(0, 1fr); }
  .cds-results__list { grid-template-columns: minmax(0, 1fr); }
  .cds-search--nav { display: block; padding: .9rem 1.25rem; border-bottom: 1px solid var(--cds-line); }
  .cds-search--nav input[type="search"] { width: 100%; font-size: 1rem; padding: .6rem .8rem; }
}
@media (max-width: 560px) {
  .cds-search--page { flex-direction: column; }
  .cds-results__shortcut { grid-template-columns: minmax(0, 1fr); }
  .cds-results__shortcut-line { grid-column: 1; }
}

/* Suggestions under a search box (cds-search's suggest.js). */
.cds-suggest { position: absolute; top: calc(100% + 4px); right: 0; z-index: 90; width: min(28rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow-y: auto; background: #fff; border: 1px solid var(--cds-line); border-radius: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: .4rem 0; text-align: left; }
.cds-search--page .cds-suggest, .cds-search--nav .cds-suggest { left: 0; right: auto; width: 100%; }
.cds-suggest[hidden] { display: none; }
.cds-suggest__label { padding: .6rem 1rem .25rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cds-muted); }
.cds-suggest__opt { display: flex; gap: .75rem; align-items: center; padding: .5rem 1rem; color: var(--cds-ink); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.cds-suggest__opt.is-active, .cds-suggest__opt:hover { background: var(--cds-warm); }
.cds-suggest__opt--go { flex-wrap: wrap; gap: .1rem .5rem; border-bottom: 1px solid var(--cds-line); padding-block: .7rem; }
.cds-suggest__go { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cds-accent); }
.cds-suggest__opt--go .cds-suggest__title { font-weight: 600; flex-basis: 100%; }
.cds-suggest__img { flex: 0 0 40px; width: 40px; height: 40px; background: var(--cds-warm); }
.cds-suggest__img img { width: 40px; height: 40px; object-fit: contain; background: #fff; display: block; }
.cds-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.cds-suggest__meta { font-size: .8rem; color: var(--cds-muted); }
.cds-suggest__opt--all { border-top: 1px solid var(--cds-line); margin-top: .3rem; padding-block: .7rem; color: var(--cds-accent); font-weight: 600; }