/* The Carat Farm — site chrome and ring builder layout. Colours, spacing and radii come from tokens.css. */

body { background: var(--paper); color: var(--ink); }
.cf-bar[hidden] { display: none; }

/* ---------- Header part ---------- */
.cf-strip { background: var(--night); color: #FFF0D2; }
.cf-strip p { margin: 0; font-size: 13px; line-height: 18px; text-align: center; }
.cf-strip strong { color: var(--leaf-lit); font-weight: 600; }
.cf-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.cf-site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.cf-site-logo img { display: block; }
.cf-header .wp-block-navigation a { font: 500 15px/20px var(--font-body); color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.cf-header .wp-block-navigation a:hover { color: var(--leaf-shade); }
.cf-header .wp-block-navigation .current-menu-item > a, .cf-header .wp-block-navigation a[aria-current="page"] { border-color: var(--flesh); font-weight: 600; }
.cf-header .wc-block-mini-cart__badge { background: var(--flesh) !important; color: var(--night) !important; }

/* ---------- Footer part ---------- */
.cf-footer { background: var(--night); color: #FFF0D2; }
.cf-footer a { color: #FFF0D2; text-decoration: none; }
.cf-footer a:hover { color: var(--leaf-lit); }
.cf-footer h2, .cf-footer h3 { color: #FFF0D2; }
.cf-footer .cf-footer__muted { color: #B9B3A6; }
.cf-footer-field { height: 90px; border-bottom: 1px solid #3A332C; background-color: var(--night);
  background-image: repeating-linear-gradient(180deg, transparent 0 22px, #26211C 22px 30px, transparent 30px 34px); }
.cf-footer-field .cf-sprout__mound { background: #2A241D; box-shadow: inset 0 2px 0 #3A332C; }

/* ---------- Field band shortcode ---------- */
.cf-field-band { position: relative; border-radius: var(--radius-lg); }

/* ---------- Builder shell ---------- */
.cf-app { --gutter: clamp(16px, 5vw, 64px); background: var(--paper); }
.cf-app h1 em, .cf-app h2 em { font-style: normal; color: var(--leaf-deep); }
.cfb-steps { padding: 0 var(--gutter); position: relative; z-index: 3; margin-top: -38px; }
.cfb-steps .cf-stepper { box-shadow: var(--shadow-card); }
.cf-app[data-step="review"] .cfb-steps { margin-top: var(--space-8); }

/* Hero (step 1) */
.cfb-hero { position: relative; height: 400px; border-bottom: 1px solid var(--line); }
.cfb-hero__copy { position: absolute; left: var(--gutter); top: 60px; width: min(520px, calc(100% - 2 * var(--gutter))); z-index: 2; }
.cfb-hero__copy::before { content: ""; position: absolute; inset: -28px -36px -32px -40px; background: var(--paper); border-radius: var(--radius-lg); z-index: -1; opacity: .92; }
.cfb-hero__copy h1 { font-size: clamp(42px, 6vw, 64px); line-height: .95; font-weight: 700; letter-spacing: -2px; margin: var(--space-3) 0 var(--space-4); }
.cfb-hero__copy p { font-size: 17px; line-height: 26px; color: var(--ink-soft); max-width: 440px; margin: 0 0 var(--space-6); }
.cfb-hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cfb-hero__big { position: absolute; right: 10%; top: 40px; z-index: 1; }
.cfb-hero__big .cf-mark { height: 250px; width: auto; filter: drop-shadow(0 18px 24px rgba(185, 52, 25, .18)); animation: cfb-bob 5s ease-in-out infinite; }
.cfb-hero__soil { position: absolute; right: calc(10% - 50px); top: 266px; width: 270px; height: 46px; border-radius: 50%; background: var(--furrow); box-shadow: inset 0 4px 0 var(--line); z-index: 2; }
@keyframes cfb-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .cfb-hero__big .cf-mark { animation: none; } }

/* Band (step 2) */
.cfb-band { position: relative; height: 220px; border-bottom: 1px solid var(--line); }
.cfb-band__copy { position: absolute; left: var(--gutter); top: 40px; z-index: 2; max-width: calc(100% - 2 * var(--gutter)); }
.cfb-band__copy::before { content: ""; position: absolute; inset: -16px -28px -20px -28px; background: var(--paper); border-radius: var(--radius-lg); z-index: -1; opacity: .92; }
.cfb-band h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -1.2px; margin-top: var(--space-2); }
.cfb-band p { color: var(--ink-soft); margin-top: var(--space-2); }

/* Main grid */
.cfb-main { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-8); padding: var(--space-12) var(--gutter) var(--space-16); }
.cfb-main--setting { grid-template-columns: 380px 1fr; }
.cfb-filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-6); align-self: start; }
.cfb-filters h2 { font-size: 20px; line-height: 26px; margin: 0; }
.cfb-filters hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.cfb-filters .cf-shapes { grid-template-columns: repeat(3, 1fr); }
.cfb-filters .cf-shape { padding: var(--space-2) 2px; }
.cfb-ranges { display: grid; gap: var(--space-6); }
.cfb-toggle { display: flex; background: var(--furrow); border-radius: var(--radius-md); padding: 3px; }
.cfb-toggle button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 8px; font: 600 13px/18px var(--font-body); color: var(--ink-soft); cursor: pointer; }
.cfb-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 38, 32, .12); }
.cfb-reset, .cfb-link { background: none; border: 0; color: var(--flesh-deep); font: 600 13px/18px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; justify-self: start; padding: 0; }
.cfb-results__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.cfb-results__head h2 { font-size: 26px; line-height: 32px; margin: 0; }
.cfb-results__head p { color: var(--ink-soft); font-size: 14px; margin: 0; }
.cfb-results__head p b { color: var(--leaf-shade); }
.cfb-sort { font: 500 14px/20px var(--font-body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink-soft); border-radius: var(--radius-md); padding: 9px 12px; }
.cfb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); transition: opacity .2s; }
.cfb-grid.is-loading { opacity: .45; pointer-events: none; }
.cfb-more { display: flex; justify-content: center; margin-top: var(--space-8); }
.cfb-chips { margin-bottom: var(--space-6); }
.cfb-error { grid-column: 1 / -1; color: var(--girdle); font-weight: 600; }
.cfb-empty { grid-column: 1 / -1; position: relative; height: 240px; border: 1px dashed var(--line); border-radius: var(--radius-lg); display: grid; place-items: center; text-align: center; }
.cfb-empty p, .cfb-empty__copy { position: relative; z-index: 1; background: var(--paper); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin: 0; }
.cfb-empty--inventory { margin: var(--space-12) var(--gutter); height: 300px; }
.cfb-empty__copy { display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-6) var(--space-8); }
.cfb-empty__copy h2 { margin: 0; font-size: 24px; }
.cfb-empty__copy a.cf-btn { text-decoration: none; }

/* Stage (step 2) */
.cfb-stage { position: sticky; top: var(--space-4); align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cfb-stage__ring { padding: var(--space-6) var(--space-6) var(--space-3); background: radial-gradient(circle at 50% 42%, var(--surface) 0 32%, var(--cream) 78%); min-height: 300px; display: grid; place-items: center; }
.cfb-stage__photo { max-width: 100%; max-height: 300px; object-fit: contain; mix-blend-mode: multiply; }
.cfb-stage__body { padding: var(--space-6); display: grid; gap: var(--space-4); border-top: 1px solid var(--line); }
.cfb-stage__body h2 { font-size: 20px; line-height: 26px; margin: 0; }
.cfb-stage__desc { font-size: 14px; line-height: 21px; color: var(--ink-soft); margin: 0; }
.cfb-label { font: 600 14px/20px var(--font-display); margin-bottom: var(--space-2); display: flex; justify-content: space-between; }
.cfb-opt { font: 400 13px/18px var(--font-body); color: var(--ink-soft); margin-left: var(--space-2); }
.cfb-stone { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--furrow); }
.cfb-stone .cf-shape-icon { color: var(--girdle); display: block; }
.cfb-stone b { font: 600 14px/20px var(--font-display); display: block; }
.cfb-stone span { font-size: 13px; color: var(--ink-soft); }
.cfb-stone .cfb-link { margin-left: auto; }

/* Review (step 3) */
.cfb-review { display: grid; grid-template-columns: 1fr minmax(360px, 500px); gap: var(--space-12); padding: var(--space-8) var(--gutter) var(--space-16); }
.cfb-review__stage { position: relative; min-height: 600px; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; }
.cfb-review__ring { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 2; padding: var(--space-6); background: radial-gradient(circle, var(--surface) 0 45%, transparent 70%); border-radius: 50%; }
.cfb-review__tag { position: absolute; left: var(--space-6); top: var(--space-6); z-index: 3; }
.cfb-review__thumbs { position: absolute; left: var(--space-6); bottom: var(--space-6); z-index: 3; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cfb-review__thumbs button { width: 64px; height: 64px; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 4px; }
.cfb-review__thumbs button[aria-pressed="true"] { border-color: var(--leaf-deep); box-shadow: var(--shadow-glow); }
.cfb-review__info h1 { font-size: clamp(32px, 4vw, 40px); line-height: 1.1; letter-spacing: -1.2px; margin: var(--space-2) 0; }
.cfb-sub { color: var(--ink-soft); margin: 0; }
.cfb-lines { margin-top: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.cfb-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.cfb-line + .cfb-line, .cfb-specs--grid + .cfb-line { border-top: 1px solid var(--line); }
.cfb-line__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--cream); display: grid; place-items: center; color: var(--girdle); overflow: hidden; }
.cfb-line__icon img { width: 100%; height: 100%; object-fit: cover; }
.cfb-line b { font: 600 15px/22px var(--font-display); display: block; }
.cfb-line span { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.cfb-line__r { text-align: right; display: grid; justify-items: end; gap: 2px; }
.cfb-line__r strong { font: 700 16px/22px var(--font-display); font-variant-numeric: tabular-nums; }
.cfb-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.cfb-specs dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.cfb-specs dd { margin: 0; font: 600 14px/20px var(--font-display); }
.cfb-specs--grid { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); margin: 0; }
.cfb-specs--grid div { background: var(--surface); padding: var(--space-3) var(--space-4); }
.cfb-block { margin-top: var(--space-6); }
.cfb-engrave { position: relative; }
.cfb-engrave input, .cfb-contact input { width: 100%; min-height: 44px; padding: 0 64px 0 var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--ink-soft); background: var(--surface); color: var(--ink); font: 400 15px/20px var(--font-body); }
.cfb-engrave input { font-style: italic; }
.cfb-contact { display: grid; gap: var(--space-2); }
.cfb-contact input { padding-right: var(--space-4); }
.cfb-engrave input:focus-visible, .cfb-contact input:focus-visible { outline: 3px solid var(--flesh-deep); outline-offset: 2px; border-color: var(--ink); }
.cfb-engrave small { position: absolute; right: var(--space-4); top: 12px; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cfb-total { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 2px solid var(--ink); display: grid; gap: var(--space-1); }
.cfb-total div { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cfb-total .cfb-total__sum { color: var(--ink); font: 700 26px/32px var(--font-display); margin-top: var(--space-2); }
.cfb-ctas { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.cfb-ctas .cf-btn { min-height: 52px; font-size: 15px; }
.cfb-msg { margin-top: var(--space-3); font-size: 14px; color: var(--ink-soft); min-height: 20px; }
.cfb-msg.is-error { color: var(--girdle); font-weight: 600; }
.cfb-msg.is-ok { color: var(--leaf-shade); font-weight: 600; }
.cfb-msg a { color: var(--flesh-deep); }

/* Diamond details dialog */
.cfb-dialog { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.cfb-dialog::backdrop { background: rgba(18, 16, 14, .55); }
.cfb-dialog { display: grid; grid-template-columns: 1fr 1fr; }
.cfb-dialog:not([open]) { display: none; }
.cfb-dialog__x { position: absolute; top: 10px; right: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; color: var(--ink); }
.cfb-dialog__well { background: radial-gradient(circle at 50% 45%, var(--surface) 0 28%, var(--cream) 70%); display: grid; place-items: center; color: var(--girdle); min-height: 320px; }
.cfb-dialog__well img { max-width: 100%; max-height: 420px; object-fit: contain; }
.cfb-dialog__body { padding: var(--space-8); display: grid; gap: var(--space-2); align-content: start; overflow: auto; }
.cfb-dialog__body h2 { font-size: 28px; margin: 0; }
.cfb-dialog__price { font: 700 22px/28px var(--font-display); margin: 0; }
.cfb-dialog__links { display: flex; gap: var(--space-4); flex-wrap: wrap; margin: 0 0 var(--space-3); }
.cfb-dialog__links a { color: var(--leaf-shade); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .cfb-main, .cfb-main--setting, .cfb-review { grid-template-columns: 1fr; }
  .cfb-stage { position: static; }
  .cfb-hero__big { right: 4%; opacity: .5; }
  .cfb-hero__soil { right: calc(4% - 50px); }
}
@media (max-width: 720px) {
  .cfb-steps .cf-stepper { grid-template-columns: 1fr; }
  .cfb-steps .cf-step + .cf-step { border-left: 0; border-top: 1px solid var(--line); }
  .cfb-steps .cf-step { min-height: 56px; padding: var(--space-3) var(--space-4); }
  .cfb-steps .cf-step:not(.cf-step--active) .cf-step__detail, .cfb-steps .cf-step__icon { display: none; }
  .cfb-hero { height: 460px; }
  .cfb-hero__big { display: none; }
  .cfb-hero__soil { display: none; }
  .cf-bar { flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); }
  .cf-bar__plus { display: none; }
  .cf-bar .cf-btn { width: 100%; }
  .cf-bar__total { margin-left: 0; text-align: left; }
  .cfb-specs--grid { grid-template-columns: repeat(2, 1fr); }
  .cfb-dialog { grid-template-columns: 1fr; }
  .cfb-dialog__well { min-height: 220px; }
  .cfb-review__stage { min-height: 460px; }
  .cfb-review__ring .cf-ring { width: 260px; height: 260px; }
}

/* ---------- Template spacing ---------- */
.cf-header { padding: 14px clamp(16px, 5vw, 64px); align-items: center; }
.cf-footer { padding: 48px clamp(16px, 5vw, 64px) 40px; }
.cf-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cf-footer__legal { font-size: 13px; margin-top: 32px; border-top: 1px solid #3A332C; padding-top: 20px; }
.cf-footer-field { position: relative; overflow: hidden; }
.cf-builder-main, .cf-builder-main > .wp-block-shortcode { margin: 0 !important; padding: 0 !important; max-width: none !important; }
body:has(.cf-builder-main) .wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > header + * { margin-block-start: 0; }
.cfb-review__stage { align-self: start; position: sticky; top: var(--space-4); height: min(640px, calc(100vh - 32px)); min-height: 460px; }
.cfb-filters .cf-grade__chip { font-size: 10.5px; letter-spacing: -.02em; padding: 0 1px; }