/* ============================================================
   cc-final.css — comprehensive structural fix
   Loaded LAST after cc.css and cc-qa-fix.css
   Fixes: product-page layout class-name mismatch, /captions/ grid spacing,
   universal page-header treatment, prose styling for content pages,
   suppression of Kadence post-title bar leak.
   ============================================================ */

/* ============================================================
   1. UNIVERSAL PAGE HEADER — every non-home page gets the same hero band
   ============================================================ */
.cc-page-hero,
body:not(.home):not(.cc-front):not(.single-product) main > article > header.entry-header,
body:not(.home):not(.cc-front) .cc-collab-hero,
body:not(.home):not(.cc-front) .cc-collection-hero {
  background: var(--pitch);
  color: var(--paper);
  padding-block: clamp(56px, 8vw, 120px);
  padding-inline: var(--container-pad);
  margin: 0;
  text-align: left;
}

body.single .entry-header,
body.page:not(.home):not(.cc-front) .entry-header,
body.archive:not(.woocommerce) .page-header,
body.blog .page-header,
body.search .page-header {
  background: var(--pitch);
  color: var(--paper);
  padding-block: clamp(56px, 8vw, 120px);
  padding-inline: var(--container-pad);
  margin: 0 0 clamp(48px, 6vw, 96px);
  border: 0;
}

body.single .entry-header > *,
body.page:not(.home):not(.cc-front) .entry-header > *,
body.archive:not(.woocommerce) .page-header > *,
body.blog .page-header > *,
body.search .page-header > * {
  max-width: var(--container-max);
  margin-inline: auto;
}

body.single .entry-title,
body.page:not(.home):not(.cc-front) .entry-title,
body.archive:not(.woocommerce) .page-title,
body.blog .page-title,
body.search .page-title {
  font-family: var(--ff-pixel);
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  color: var(--paper);
  margin: 0;
  text-transform: uppercase;
  word-break: break-word;
}

/* Suppress old featured-image-as-hero rendering on single posts */
body.single .post-thumbnail,
body.single .wp-post-image:first-of-type,
body.single .entry-header .wp-post-image,
.kadence-hero-section .wp-post-image,
.entry-hero .wp-post-image,
.kadence-hero-bg-with-image,
body.single article > .post-thumbnail {
  display: none;
}

/* Kill any Kadence-injected page-title bar with featured-image background */
.kadence-hero-section,
.kadence-hero-bg-image,
.entry-hero-container-inner,
.entry-hero,
header.entry-hero {
  display: none;
}

/* Breadcrumb under page hero (when present) */
.cc-page-hero__crumb,
.entry-header .cc-breadcrumb,
.page-header .cc-breadcrumb {
  font-family: var(--ff-mono);
  font-size: var(--fs-13);
  color: var(--mid);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--s-3);
}

/* ============================================================
   2. PRODUCT PAGE — fix layout class-name mismatch
   Template uses .cc-product-page__inner but CSS targeted .cc-product.
   Add proper grid + column layout for the actual class names.
   ============================================================ */
.cc-product-page {
  padding: 0 0 clamp(64px, 8vw, 128px);
  background: var(--paper);
}

.cc-product-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 80px);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--container-pad);
  align-items: start;
}

@media (min-width: 1024px) {
  .cc-product-page__inner {
    grid-template-columns: 1.2fr 1fr;
  }
}

.cc-product-page__gallery {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  overflow: hidden;
  min-height: 300px;
}

.cc-product-page__gallery .woocommerce-product-gallery,
.cc-product-page__gallery .woocommerce-product-gallery__wrapper,
.cc-product-page__gallery .woocommerce-product-gallery__image {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.cc-product-page__gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.cc-product-page__gallery .flex-control-thumbs {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  list-style: none;
}
.cc-product-page__gallery .flex-control-thumbs li {
  width: 64px;
  height: 64px;
  margin: 0;
}
.cc-product-page__gallery .flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 1px solid var(--hairline);
}
.cc-product-page__gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--text);
}

.cc-product-page__summary {
  position: sticky;
  top: clamp(96px, 12vh, 160px);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: 0;
  background: transparent;
  border: 0;
}

.cc-product-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cc-product-page__title,
.cc-product-page .product_title {
  font-family: var(--ff-pixel);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  word-break: break-word;
}

.cc-product-page__price,
.cc-product-page .price,
.cc-product-page .woocommerce-Price-amount {
  font-family: var(--ff-mono);
  font-size: var(--fs-24);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--text);
  margin: 0;
  display: block;
}

.cc-product-page__price::before {
  content: '[ ';
  color: var(--mid);
}
.cc-product-page__price::after {
  content: ' ]';
  color: var(--mid);
}

.cc-product-page__caption {
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--text);
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  background: var(--paper);
}

.cc-product-page__caption p {
  margin: 0 0 var(--s-3);
}
.cc-product-page__caption p:last-child { margin-bottom: 0; }

.cc-product-page__summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
}

.cc-product-page__summary .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
}
.cc-product-page__summary .quantity .qty {
  width: 60px;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-15);
  border: 0;
  padding: var(--s-3);
  background: var(--paper);
}

.cc-product-page__summary .single_add_to_cart_button {
  font-family: var(--ff-mono);
  font-size: var(--fs-15);
  letter-spacing: var(--ls-wide);
  padding: var(--s-3) var(--s-7);
  background: var(--pitch);
  color: var(--paper);
  border: 1px solid var(--pitch);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  text-transform: lowercase;
}
.cc-product-page__summary .single_add_to_cart_button::before { content: '> '; }
.cc-product-page__summary .single_add_to_cart_button:hover {
  background: var(--paper);
  color: var(--pitch);
}

.cc-product-page__summary .product_meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
  color: var(--mid);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
  margin-top: var(--s-3);
  letter-spacing: var(--ls-wide);
}
.cc-product-page__summary .product_meta > span {
  display: block;
  margin-bottom: var(--s-1);
}

.cc-product-page__belt {
  max-width: var(--container-max);
  margin: clamp(48px, 6vw, 96px) auto 0;
  padding: 0 var(--container-pad);
}

.cc-product-page__belt .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--s-5);
  padding: 0;
  margin: 0 0 var(--s-6);
  border-bottom: 1px solid var(--hairline);
  list-style: none;
}
.cc-product-page__belt .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.cc-product-page__belt .woocommerce-tabs ul.tabs li a {
  font-family: var(--ff-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  padding: var(--s-3) 0;
  color: var(--mid);
  text-decoration: none;
  display: block;
  text-transform: lowercase;
}
.cc-product-page__belt .woocommerce-tabs ul.tabs li.active a,
.cc-product-page__belt .woocommerce-tabs ul.tabs li a:hover {
  color: var(--text);
  border-bottom: 1px solid var(--text);
  margin-bottom: -1px;
}

/* ============================================================
   3. CAPTIONS ARCHIVE — spacious uniform grid
   ============================================================ */
.cc-cap-grid,
body.page-id-21 .cc-product-grid,
body.page-id-21 ul.products,
body.page-id-21 .woocommerce ul.products {
  display: grid !important;
  gap: clamp(20px, 2.5vw, 40px) !important;
  grid-template-columns: 1fr;
  margin: clamp(32px, 4vw, 64px) auto 0;
  padding: 0;
  list-style: none;
  max-width: var(--container-max);
}

@media (min-width: 640px) {
  .cc-cap-grid,
  body.page-id-21 ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .cc-cap-grid,
  body.page-id-21 ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1440px) {
  .cc-cap-grid,
  body.page-id-21 ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.cc-cap-grid > a,
.cc-cap-card,
body.page-id-21 ul.products li.product {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  margin: 0 !important;
  background: var(--paper);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  list-style: none;
  padding: 0;
}

.cc-cap-card:hover,
body.page-id-21 ul.products li.product:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}

.cc-cap-card__media,
body.page-id-21 ul.products li.product .attachment-woocommerce_thumbnail,
body.page-id-21 ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
}

.cc-cap-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc-cap-card__body,
body.page-id-21 ul.products li.product .cc-product-card__body {
  padding: var(--s-5) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 1px solid var(--hairline);
}

.cc-cap-card__title,
body.page-id-21 ul.products li.product h2,
body.page-id-21 ul.products li.product h3 {
  font-family: var(--ff-body);
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 !important;
  color: var(--text);
  text-decoration: none;
}

.cc-cap-card__price,
body.page-id-21 ul.products li.product .price,
body.page-id-21 ul.products li.product .woocommerce-Price-amount {
  font-family: var(--ff-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  color: var(--text);
  margin: 0;
}

body.page-id-21 ul.products li.product a {
  text-decoration: none;
  color: var(--text);
}

body.page-id-21 ul.products li.product .button,
body.page-id-21 ul.products li.product .add_to_cart_button {
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  padding: var(--s-2) var(--s-4);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--hairline);
  margin-top: var(--s-3);
  text-transform: lowercase;
}

body.page-id-21 ul.products li.product .button::before { content: '> '; }
body.page-id-21 ul.products li.product .button:hover {
  background: var(--pitch);
  color: var(--paper);
  border-color: var(--pitch);
}

/* ============================================================
   4. CONTENT PAGES — universal prose styling
   Apply readable typography to every page that displays
   .entry-content (about, the-brand, privacy, terms, etc.)
   ============================================================ */
.entry-content,
.cc-prose,
body.page:not(.home):not(.cc-front):not(.page-id-21):not(.cc-collab-page) main .entry-content,
body.single-post .entry-content {
  max-width: 70ch;
  margin: 0 auto;
  padding: 0 var(--container-pad) clamp(48px, 6vw, 96px);
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--text);
}

.entry-content > *,
.cc-prose > * {
  margin-block: 0 1.4em;
}

.entry-content > *:last-child,
.cc-prose > *:last-child {
  margin-bottom: 0;
}

.entry-content p,
.cc-prose p {
  margin: 0 0 1.4em;
}

.entry-content h1,
.cc-prose h1,
.entry-content h2,
.cc-prose h2,
.entry-content h3,
.cc-prose h3,
.entry-content h4,
.cc-prose h4 {
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin: 2em 0 0.5em;
  line-height: var(--lh-snug);
  color: var(--text);
}

.entry-content h1, .cc-prose h1 { font-size: var(--fs-40); }
.entry-content h2, .cc-prose h2 { font-size: var(--fs-28); }
.entry-content h3, .cc-prose h3 { font-size: var(--fs-20); }
.entry-content h4, .cc-prose h4 { font-size: var(--fs-18); }

.entry-content ul,
.cc-prose ul,
.entry-content ol,
.cc-prose ol {
  padding-left: 1.5em;
  margin: 0 0 1.4em;
  list-style: disc;
}
.entry-content ol, .cc-prose ol { list-style: decimal; }

.entry-content ul li,
.cc-prose ul li,
.entry-content ol li,
.cc-prose ol li {
  margin: 0.4em 0;
  list-style: inherit;
}

.entry-content a,
.cc-prose a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.entry-content a:hover,
.cc-prose a:hover {
  text-decoration-thickness: 2px;
}

.entry-content code,
.cc-prose code {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--hairline);
  padding: 0.1em 0.4em;
}

.entry-content blockquote,
.cc-prose blockquote {
  border-left: 2px solid var(--text);
  padding-left: var(--s-4);
  margin: 1.6em 0;
  color: var(--mid);
  font-style: normal;
}

.entry-content hr,
.cc-prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.4em 0;
}

.entry-content figure,
.cc-prose figure,
.cc-blog-single__hero {
  margin: 0 0 1.6em;
}

.entry-content figure img,
.cc-prose figure img,
.cc-blog-single__hero img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}

/* The cc-mono prompt line breaks out of prose grid */
.entry-content .cc-mono,
.cc-prose .cc-mono {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-15);
}

/* ============================================================
   5. SINGLE BLOG POST — kill the giant featured-image hero
   The post's .cc-blog-single__hero (inline at top of content) is
   the ONLY image that should render. Anything Kadence injects
   above the title is suppressed.
   ============================================================ */
body.single-post .post-thumbnail,
body.single-post .entry-content > .post-thumbnail,
body.single-post article > .post-thumbnail,
body.single-post .featured-image,
body.single-post .entry-header .wp-post-image,
body.single-post .kadence-entry-content-style-boxed > img:first-child,
body.single-post .single-content > img:first-child,
body.single-post .entry-content > img:first-child {
  display: none !important;
}

/* But keep the inline cc-blog-single__hero figure inside content */
body.single-post .cc-blog-single__hero,
body.single-post .entry-content .cc-blog-single__hero {
  display: block !important;
  width: 100%;
  margin: 0 0 var(--s-7);
}
body.single-post .cc-blog-single__hero img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  border: 1px solid var(--hairline);
}

/* Single post title styled like a hero, full bleed against pitch background */
body.single-post .entry-header,
body.single-post header.entry-header {
  background: var(--pitch);
  color: var(--paper);
  padding-block: clamp(56px, 8vw, 120px);
  padding-inline: var(--container-pad);
  margin: 0 0 clamp(32px, 4vw, 64px);
}

body.single-post .entry-title {
  font-family: var(--ff-pixel);
  font-size: clamp(32px, 6vw, 80px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  text-transform: lowercase;
  color: var(--paper);
  margin: 0;
  max-width: var(--container-max);
  margin-inline: auto;
}

body.single-post .entry-meta,
body.single-post .post-meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  color: var(--mid);
  max-width: var(--container-max);
  margin: var(--s-3) auto 0;
}

/* ============================================================
   6. /djcowboy/ + collab pages — better empty/placeholder treatment
   ============================================================ */
.cc-collab-hero {
  background: var(--pitch);
  color: var(--paper);
  padding-block: clamp(64px, 10vw, 160px);
  padding-inline: var(--container-pad);
}

.cc-collab-hero__inner,
.cc-collab__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.cc-collab-hero h1,
.cc-collab-hero__name,
.cc-collab-hero .entry-title {
  font-family: var(--ff-pixel);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 var(--s-5);
}

.cc-collab-hero p {
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--paper);
  max-width: 60ch;
  margin: 0 0 1.4em;
}

.cc-collab-hero p.cc-mono,
.cc-collab-hero .cc-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-14);
  color: var(--mid);
}

.cc-collab__qr {
  margin-top: var(--s-7);
  display: inline-block;
  padding: var(--s-3);
  background: var(--paper);
}
.cc-collab__qr img {
  display: block;
  width: 160px;
  height: 160px;
}

.cc-collab__body {
  padding-block: clamp(48px, 6vw, 96px);
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ============================================================
   7. FIELD-NOTES ARCHIVE (/field-notes/) — consistent header + grid
   ============================================================ */
body.blog .page-header,
body.blog .page-title,
body.archive .page-header,
body.archive .page-title {
  background: var(--pitch);
  color: var(--paper);
}

body.blog main,
body.archive main {
  padding: 0;
}

body.blog .posts-loop,
body.blog .loop-entries,
body.blog .loop,
body.blog .kadence-posts-list,
body.archive .posts-loop,
body.archive .kadence-posts-list {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  grid-template-columns: 1fr;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--container-pad);
}

@media (min-width: 768px) {
  body.blog .posts-loop,
  body.blog .kadence-posts-list,
  body.archive .posts-loop,
  body.archive .kadence-posts-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.blog article,
body.archive article {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: var(--s-7);
  margin: 0;
  transition: border-color var(--t-base) var(--ease);
}

body.blog article:hover,
body.archive article:hover {
  border-color: var(--text);
}

body.blog article .entry-title,
body.archive article .entry-title {
  font-family: var(--ff-body);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-3);
}

body.blog article .entry-title a,
body.archive article .entry-title a {
  color: var(--text);
  text-decoration: none;
}

body.blog article .entry-meta,
body.archive article .entry-meta,
body.blog article .post-date,
body.archive article .post-date {
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
  color: var(--mid);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--s-3);
}

body.blog article .entry-summary,
body.archive article .entry-summary,
body.blog article .post-excerpt,
body.archive article .post-excerpt {
  font-family: var(--ff-body);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--text);
  margin: 0 0 var(--s-4);
}

body.blog article .more-link,
body.archive article .more-link,
body.blog article .read-more,
body.archive article .read-more {
  font-family: var(--ff-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  margin-top: var(--s-3);
}
body.blog article .more-link::before,
body.archive article .more-link::before,
body.blog article .read-more::before,
body.archive article .read-more::before {
  content: '> ';
}

/* ============================================================
   8. RESET WC LEAKS on archive pages
   ============================================================ */
body.archive.woocommerce ul.products li.product .price,
body.archive.woocommerce ul.products li.product .woocommerce-Price-amount {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-13) !important;
  color: var(--text) !important;
}

body.archive.woocommerce ul.products li.product h2,
body.archive.woocommerce ul.products li.product h3 {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-15) !important;
  font-weight: 500 !important;
}

/* Hide WC's noisy "Showing 1-N of N results" + sale flash on captions */
body.page-id-21 .woocommerce-result-count,
body.page-id-21 .woocommerce-ordering,
body.page-id-21 .onsale {
  display: none;
}

/* ============================================================
   9. UNIVERSAL — strip default browser link underline on cards
   ============================================================ */
.cc-cap-card,
.cc-product-card,
.cc-rail-card,
.cc-collab-card {
  text-decoration: none !important;
}
.cc-cap-card:visited,
.cc-product-card:visited,
.cc-rail-card:visited,
.cc-collab-card:visited {
  color: inherit;
}

/* ============================================================
   10. FOOTER — match new spacing system
   ============================================================ */
.cc-footer {
  padding-block: clamp(64px, 8vw, 128px);
  border-top: 1px solid var(--hairline);
}

.cc-footer__inner,
.cc-footer > .cc-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.cc-footer a {
  font-family: var(--ff-mono);
  text-decoration: none !important;
}

/* ============================================================
   11. UNIVERSAL safety reset — remove any decorative cruft
   from Kadence post meta / breadcrumb that slips in
   ============================================================ */
.kadence-author-box,
.entry-author,
.author-info,
.post-navigation,
.kadence-related-posts-wrap {
  background: transparent !important;
  border-color: var(--hairline) !important;
}

/* ============================================================
   12. LAYOUT RESCUE — force every root layout element to
   full-width single-block flow. Fights any Kadence body-level
   container that constrains main content to a narrow column.
   ============================================================ */
html, body { display: block !important; }
body > header,
body > main,
body > footer,
body > .cc-header,
body > .cc-main,
body > .cc-footer,
body.single-product > .cc-main,
body.single-product main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Kadence body classes that constrain widths — neutralize on every page */
body.content-width-normal .cc-main,
body.content-width-normal main,
body.content-width-narrow .cc-main,
body.content-width-narrow main,
body.content-style-unboxed .cc-main,
body.content-style-unboxed main,
body.content-vertical-padding-show .cc-main,
body.content-vertical-padding-show main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Site-container variants Kadence injects */
.site,
.site-container,
.site-content,
.site-main,
#page,
#content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* WC product page wrapper constraint reset */
body.single-product .woocommerce,
body.single-product main .woocommerce,
body.single-product .cc-product-page,
body.single-product .product-template-default {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ============================================================
   13. PRICE — fix [ $ ] rendering on three lines.
   Force everything inside the price wrapper to display inline
   so the bracket pseudo-elements stay on the same line as
   the woocommerce-Price-amount span.
   ============================================================ */
.cc-product-page__price,
.cc-product-page .price {
  display: inline-block !important;
  margin: 0 !important;
}
.cc-product-page__price .woocommerce-Price-amount,
.cc-product-page__price .woocommerce-Price-currencySymbol,
.cc-product-page__price ins,
.cc-product-page__price del,
.cc-product-page__price bdi,
.cc-product-page__price span,
.cc-product-page .price .woocommerce-Price-amount,
.cc-product-page .price .woocommerce-Price-currencySymbol,
.cc-product-page .price span,
.cc-product-page .price bdi {
  display: inline !important;
  font-family: var(--ff-mono) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Same fix for product card prices in /captions/ grid */
.cc-cap-card__price,
.cc-product-card__price,
ul.products li.product .price {
  display: inline-block !important;
}
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price span,
ul.products li.product .price bdi {
  display: inline !important;
}

/* ============================================================
   14. PRODUCT GALLERY — ensure image fills its container
   ============================================================ */
.cc-product-page__gallery,
.woocommerce-product-gallery {
  width: 100% !important;
  max-width: none !important;
}
.cc-product-page__gallery .woocommerce-product-gallery {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cc-product-page__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__image,
.cc-product-page__gallery figure.woocommerce-product-gallery__wrapper,
.cc-product-page__gallery .flex-viewport,
.cc-product-page__gallery .flex-active-slide {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cc-product-page__gallery img,
.cc-product-page__gallery .woocommerce-product-gallery__image > a > img,
.cc-product-page__gallery .wp-post-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* WooCommerce trigger zoom (magnifier icon) — keep visible but small */
.cc-product-page__gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  background: rgba(255,255,255,0.9);
  padding: 0.4rem;
  border-radius: 0;
  border: 1px solid var(--hairline);
}

/* ============================================================
   15. /collabs/ index — tighter hero, embedded graphic
   ============================================================ */
body.page-template-page-collabs-index .cc-collection-hero,
body.page .cc-collection-hero {
  padding-block: clamp(40px, 5vw, 72px) !important;
  background: var(--pitch);
  color: var(--paper);
  border-bottom: 0;
  margin: 0 0 0;
  position: relative;
  overflow: hidden;
}
body.page-template-page-collabs-index .cc-collection-hero__inner,
body.page .cc-collection-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  position: relative;
  z-index: 2;
}
body.page-template-page-collabs-index .cc-collection-hero::before,
body[class*="page-id-"] .cc-collection-hero::before {
  /* Optional: a subtle bg if a hero image is set via inline style */
  content: none;
}
body.page-template-page-collabs-index .cc-collection-hero__title,
body.page .cc-collection-hero__title {
  font-family: var(--ff-pixel);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--paper);
  margin: 16px 0 24px;
}
body.page-template-page-collabs-index .cc-collection-hero__intro,
body.page .cc-collection-hero__intro {
  color: var(--mid);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}
body.page-template-page-collabs-index .cc-collection-hero__intro a,
body.page .cc-collection-hero__intro a { color: var(--paper); }

/* Inline graphic banner that sits just below the hero on /collabs/ */
.cc-collabs-banner {
  display: block;
  width: 100%;
  background: var(--pitch);
  margin: 0;
}
.cc-collabs-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Collab card grid spacing */
.cc-collab-grid {
  padding: clamp(48px, 6vw, 96px) var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ============================================================
   16. About — inline pixel-art banner
   ============================================================ */
.cc-about-graphic {
  display: block;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto var(--s-9);
  border: 1px solid var(--hairline);
}

/* ============================================================
   17. Product gallery — kill the giant magnifier on default load
   The .woocommerce-product-gallery__trigger is rendered as a huge
   centered icon in default WC styling. Hide unless hovering.
   ============================================================ */
.cc-product-page__gallery .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--text) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  padding: 0 !important;
  margin: 0 !important;
}
.cc-product-page__gallery:hover .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger {
  opacity: 1;
}
.cc-product-page__gallery .woocommerce-product-gallery__trigger img,
.woocommerce-product-gallery__trigger img {
  display: none !important;
}
/* If the trigger renders as text "🔍" emoji, suppress the giant pseudo */
.woocommerce-product-gallery__trigger::before {
  content: '+' !important;
  font-family: var(--ff-mono);
  font-size: 20px;
  line-height: 1;
}

/* ============================================================
   18. Even out section padding — reduce overall whiteness
   on pages that have short content
   ============================================================ */
body.page .entry-content {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(48px, 5vw, 80px);
}
body.page .entry-content > h1:first-child {
  font-family: var(--ff-pixel);
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0 0 var(--s-7);
  line-height: 0.95;
}

/* ============================================================
   19. SIMILAR POSTS / RELATED POSTS — fix the black-box rendering
   When a post has no featured image, Kadence's related-posts widget
   renders a placeholder solid black box. Style it as a hairline-bordered
   card with mono date, no giant placeholder image.
   ============================================================ */
.related-posts-wrap,
.kadence-related-posts-wrap,
.related-posts,
.similar-posts {
  max-width: var(--container-max);
  margin: clamp(48px, 6vw, 96px) auto 0;
  padding: clamp(48px, 6vw, 96px) var(--container-pad) clamp(64px, 8vw, 128px);
  border-top: 1px solid var(--hairline);
}
.related-posts-wrap > h2,
.kadence-related-posts-wrap > h2,
.related-posts > h2,
.similar-posts > h2,
.related-posts-title {
  font-family: var(--ff-mono);
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--mid);
  text-transform: lowercase;
  margin: 0 0 var(--s-7);
  padding: 0;
}
.related-posts-wrap > h2::before,
.kadence-related-posts-wrap > h2::before,
.related-posts > h2::before {
  content: '> ';
  color: var(--text);
}

.related-posts .related-post,
.kadence-related-posts .related-post,
.related-posts article,
.similar-posts article,
.related-posts > div > article,
.kadence-related-posts-wrap article {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  padding: var(--s-7) !important;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Kill the giant featured-image-as-card-bg pattern */
.related-posts article .post-thumbnail,
.related-posts article .featured-image,
.related-posts article .wp-post-image,
.kadence-related-posts-wrap article .post-thumbnail,
.kadence-related-posts-wrap article .wp-post-image,
.similar-posts article .post-thumbnail,
.similar-posts article img:first-child {
  display: block !important;
  background: var(--paper) !important;
  width: 100% !important;
  height: auto !important;
  max-height: 240px;
  object-fit: cover;
  margin: 0 0 var(--s-3) !important;
  border: 1px solid var(--hairline);
}

/* Hide author byline + clean date format */
.related-posts .post-author,
.related-posts .author-link,
.related-posts .byline,
.kadence-related-posts-wrap .post-author,
.kadence-related-posts-wrap .byline,
.kadence-related-posts-wrap .author-link,
.related-posts .vcard,
body.single-post .post-author,
body.single-post .author-name,
body.single-post .byline,
body.single-post .post-meta-author {
  display: none !important;
}

.related-posts .post-meta,
.related-posts .post-date,
.related-posts time,
.kadence-related-posts-wrap .post-date,
.kadence-related-posts-wrap time,
.kadence-related-posts-wrap .post-meta {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--ls-wide) !important;
  color: var(--mid) !important;
}

.related-posts .post-title,
.related-posts h3,
.related-posts h4,
.kadence-related-posts-wrap h3,
.kadence-related-posts-wrap h4,
.kadence-related-posts-wrap .post-title {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-20) !important;
  font-weight: 600 !important;
  line-height: var(--lh-snug) !important;
  margin: var(--s-2) 0 !important;
  color: var(--text);
}
.related-posts .post-title a,
.kadence-related-posts-wrap .post-title a,
.related-posts h3 a {
  color: var(--text);
  text-decoration: none;
}

/* Layout the related-posts grid */
.related-posts > div,
.kadence-related-posts-wrap > div,
.kadence-related-posts {
  display: grid;
  gap: clamp(20px, 2.5vw, 40px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .related-posts > div,
  .kadence-related-posts-wrap > div,
  .kadence-related-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .related-posts > div,
  .kadence-related-posts-wrap > div,
  .kadence-related-posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Hide author byline on single posts globally (no founder name visible) */
body.single .author-info,
body.single .post-author-name,
body.single-post .post-author,
body.single-post .author,
body.single-post .vcard,
body.single-post .entry-meta .byline,
body.single-post .entry-meta .author,
body.single-post .post-meta .author-link,
body.single-post .post-meta-author {
  display: none !important;
}

/* Date formatting on single post (mono, lowercase) */
body.single-post .entry-meta,
body.single-post .post-meta {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--ls-wide) !important;
  color: var(--mid) !important;
  text-transform: lowercase;
}

/* Category pill on single post */
body.single-post .post-categories,
body.single-post .cat-links,
body.single-post .entry-categories {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--ls-wide);
  color: var(--mid);
  text-transform: lowercase;
}
body.single-post .post-categories a,
body.single-post .cat-links a {
  color: var(--mid);
  text-decoration: none;
}
body.single-post .post-categories a::before,
body.single-post .cat-links a::before {
  content: '~ ';
}