/* The Carat Farm — content pages: page hero, sections, tiles, grade scales, shape guide,
   collections, size chart and the contact form. Colours, spacing and radii come from tokens.css. */

.cf-page { --gutter: clamp(16px, 5vw, 64px); }
.cf-page h1 em, .cf-page h2 em { font-style: normal; color: var(--leaf-deep); }
.cf-page .wp-block-post-content > * + * { margin-block-start: 0; }

/* ---------- Page hero: a field band with the copy planted on the left ---------- */
.cf-pagehero { position: relative; overflow: hidden; margin-block: 0 !important; padding: 64px var(--gutter) 80px !important;
  background-color: var(--paper); border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(180deg, transparent 0 34px, var(--furrow) 34px 46px, transparent 46px 52px); }
.cf-pagehero--slim { padding-block: 48px 56px !important; }
.cf-pagehero--tall { padding-block: 96px 120px !important; }
.cf-pagehero__copy { position: relative; z-index: 2; max-width: min(620px, 100%); margin: 0 0 0 max(0px, calc((100% - 1280px) / 2)) !important; }
.cf-pagehero__copy::before { content: ""; position: absolute; inset: -24px -32px -28px -32px; background: var(--paper); border-radius: var(--radius-lg); z-index: -1; opacity: .92; }
.cf-pagehero__copy > * { margin-block: 0; }
.cf-pagehero__copy > * + * { margin-block-start: var(--space-4); }
.cf-pagehero h1, .cf-pagehero .wp-block-post-title { font-size: clamp(38px, 5.5vw, 58px); line-height: 1; letter-spacing: -1.8px; font-weight: 700; }
.cf-pagehero--slim .wp-block-post-title { font-size: clamp(32px, 4vw, 44px); letter-spacing: -1.2px; }
.cf-pagehero .cf-eyebrow + h1 { margin-block-start: var(--space-3); }
.cf-lede { font-size: 18px; line-height: 28px; color: var(--ink-soft); max-width: 540px; }
.cf-pagehero .wp-block-buttons { margin-block-start: var(--space-6); }
.cf-pagehero .cf-field__sprouts { z-index: 1; }

/* ---------- Sections ---------- */
.cf-section { margin-block: 0 !important; padding: var(--space-16) var(--gutter) !important; }
.cf-section + .cf-section { border-top: 1px solid var(--line); }
.cf-section--furrow { background: var(--furrow); }
.cf-section--surface { background: var(--surface); }
.cf-section__head { margin-bottom: var(--space-8) !important; }
.cf-section__head > * { margin-block: 0; max-width: 680px; }
.cf-section__head > * + * { margin-block-start: var(--space-3); }
.cf-section h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -.8px; }
.cf-section h3 { font-size: 19px; line-height: 26px; letter-spacing: -.2px; }
.cf-section p { line-height: 1.65; }
.cf-muted { color: var(--ink-soft); }

/* ---------- Tiles ---------- */
.cf-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6) !important; }
.cf-section--surface .cf-tile { background: var(--paper); }
.cf-tile > * { margin-block: 0; }
.cf-tile > * + * { margin-block-start: var(--space-3); }
.cf-tile p { font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.cf-tile ul { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.cf-tile ul li + li { margin-top: var(--space-1); }
.cf-tile__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--flesh); background: var(--cream); font: 700 15px/1 var(--font-display); color: var(--ink); }
.cf-tile--leaf { border-color: var(--leaf-deep); }
.cf-tile--cream { background: var(--cream); border-color: var(--gold); }

/* ---------- Two-column prose rows ---------- */
.cf-split { gap: var(--space-12) !important; }
.cf-split > .wp-block-column > * { margin-block: 0; }
.cf-split > .wp-block-column > * + * { margin-block-start: var(--space-4); }

/* ---------- Call to action band ---------- */
.cf-cta { margin-block: 0 !important; padding: var(--space-16) var(--gutter) !important; background: var(--night); color: var(--cream); text-align: center; position: relative; overflow: hidden; }
.cf-cta > * { margin-block: 0; position: relative; z-index: 1; }
.cf-cta > * + * { margin-block-start: var(--space-4); }
.cf-cta h2 { color: var(--cream); font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -1px; }
.cf-cta h2 em { color: var(--leaf-lit); font-style: normal; }
.cf-cta p { color: #D9D2C3; max-width: 560px; margin-inline: auto; }
.cf-cta .wp-block-buttons { justify-content: center; margin-block-start: var(--space-6); }
.cf-page .cf-cta .wp-block-button.is-style-outline .wp-block-button__link { color: var(--cream); border-color: #8C8578; }
.cf-page .cf-cta .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #26211C; border-color: var(--cream); color: var(--cream); }

/* Buttons: outline style in the Carat Farm ghost look. */
.cf-page .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-soft); padding: calc(.667em - 1.5px) calc(1.333em - 1.5px); }
.cf-page .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--furrow); border-color: var(--ink); }

/* ---------- Draft note (remove from pages before launch) ---------- */
.cf-draftnote { background: var(--cream); border: 1px dashed var(--girdle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) !important;
  font-size: 14px; line-height: 20px; color: var(--ink); max-width: 1280px; margin: var(--space-8) auto 0 !important; }

/* ---------- Grade scales ---------- */
.cf-scale { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.cf-scale__group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-scale__chips { display: flex; gap: 3px; }
.cf-scale__chips span { flex: 1; min-width: 0; height: 34px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line);
  font: 600 12px/1 var(--font-body); color: var(--ink); border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; }
.cf-scale__group:first-child .cf-scale__chips span { background: var(--cream); border-color: var(--leaf-deep); }
.cf-scale__label { font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); border-top: 2px solid var(--line); padding-top: 6px; }
.cf-scale__group:first-child .cf-scale__label { border-color: var(--leaf-deep); color: var(--leaf-shade); }
.cf-scale__ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-top: var(--space-2); }
.cf-scale--cut .cf-scale__chips span { font-size: 11.5px; }

/* ---------- Shape guide ---------- */
.cf-shapeguide { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.cf-shapeguide__item { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr; column-gap: var(--space-3); align-items: start;
  padding: var(--space-4); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s; }
.cf-shapeguide__item:hover { border-color: var(--leaf-deep); background: var(--cream); box-shadow: var(--shadow-glow); color: var(--ink); }
.cf-shapeguide__item:focus-visible { outline: 3px solid var(--flesh-deep); outline-offset: 2px; }
.cf-shapeguide__icon { grid-row: 1 / 3; color: var(--ink); }
.cf-shapeguide__item:hover .cf-shapeguide__icon { color: var(--girdle); }
.cf-shapeguide__icon .cf-shape-icon { display: block; width: 44px; height: 44px; }
.cf-shapeguide__item b { font: 600 15px/22px var(--font-display); }
.cf-shapeguide__item span:last-child { font-size: 13px; line-height: 19px; color: var(--ink-soft); }

/* ---------- Collections (WooCommerce products as Carat Farm cards) ---------- */
.cf-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.cf-prod { text-decoration: none; color: var(--ink); }
.cf-prod:hover { color: var(--ink); }
.cf-prod .cf-card__img { width: 100%; height: 100%; object-fit: cover; }
.cf-prod .cf-card__mark { width: 30%; height: auto; opacity: .9; }
.cf-prod .cf-card__price del { color: var(--ink-soft); font-weight: 500; font-size: 14px; margin-right: 4px; }
.cf-prod .cf-card__price ins { text-decoration: none; }
.cf-empty { position: relative; min-height: 300px; border: 1px dashed var(--line); border-radius: var(--radius-lg); display: grid; place-items: center; text-align: center; overflow: hidden; }
.cf-empty__copy { position: relative; z-index: 2; display: grid; gap: var(--space-3); justify-items: center; max-width: 440px; margin: var(--space-6);
  padding: var(--space-6) var(--space-8); background: var(--paper); border-radius: var(--radius-md); }
.cf-empty__copy h2 { margin: 0; font-size: 24px; }
.cf-empty__copy p { margin: 0; color: var(--ink-soft); }
.cf-empty__copy .cf-btn { text-decoration: none; }

/* ---------- Ring size chart ---------- */
.cf-sizechart { margin: 0; }
.cf-sizechart table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-variant-numeric: tabular-nums; }
.cf-sizechart thead { border-bottom: 2px solid var(--ink) !important; }
.cf-sizechart th { font: 600 11px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: var(--space-3) var(--space-4); border: 0; }
.cf-sizechart td { padding: 10px var(--space-4); border: 0; border-top: 1px solid var(--line); font-size: 15px; }
.cf-sizechart td:first-child { font: 600 15px/20px var(--font-display); }
.cf-sizechart tbody tr:nth-child(even) td { background: var(--cf-stripe, #FBF9F5); }
.cf-sizechart figcaption { font-size: 13px; color: var(--ink-soft); margin-top: var(--space-2); }

/* ---------- Contact form ---------- */
.cf-form { display: grid; gap: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); }
.cf-form p { margin: 0; }
.cf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cf-form__field { display: grid; gap: 6px; }
.cf-form label { font: 600 14px/20px var(--font-display); color: var(--ink); }
.cf-form__opt { font: 400 13px/18px var(--font-body); color: var(--ink-soft); margin-left: 4px; }
.cf-form input, .cf-form select, .cf-form textarea { width: 100%; min-height: 44px; padding: 10px var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--ink-soft);
  background: var(--surface); color: var(--ink); font: 400 15px/22px var(--font-body); box-sizing: border-box; }
.cf-form textarea { resize: vertical; min-height: 140px; }
.cf-form input::placeholder, .cf-form textarea::placeholder { color: #8A968F; }
.cf-form input:focus-visible, .cf-form select:focus-visible, .cf-form textarea:focus-visible { outline: 3px solid var(--flesh-deep); outline-offset: 2px; border-color: var(--ink); }
.cf-form__foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cf-form__foot .cf-btn { min-height: 48px; }
.cf-form__msg { font-size: 14px; color: var(--ink-soft); flex: 1; min-width: 200px; }
.cf-form__msg.is-error { color: var(--girdle); font-weight: 600; }
.cf-form__msg.is-ok { color: var(--leaf-shade); font-weight: 600; }
.cf-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Generic pages (cart, checkout, policies) ---------- */
.cf-prose { padding: var(--space-12) var(--gutter) var(--space-16); }

/* ---------- Header tools and nav ---------- */
.cf-header__tools { align-items: center; }
.cf-header .wc-block-customer-account a, .cf-header .wc-block-customer-account a:hover { color: var(--ink) !important; padding: 4px; }
.cf-header .wc-block-customer-account svg { fill: currentColor; }
.cf-header .wc-block-customer-account svg, .cf-header .wc-block-mini-cart__icon { width: 24px; height: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
  .cf-section { padding-block: var(--space-12) !important; }
  .cf-form { padding: var(--space-6); }
  .cf-form__row { grid-template-columns: 1fr; }
  .cf-pagehero .cf-field__sprouts { display: none; }
  .cf-scale { flex-wrap: wrap; row-gap: var(--space-3); }
  .cf-scale__group { flex: 1 1 40% !important; }
}