/* CraveSorted components for Elementor. Tokens follow the active Novamira design "CraveSorted Roast".
   Radius rule: inputs 12px, cards 20px, colour panels 28px, buttons and pills full pill. */
:root {
  --cs-bg: #F4F5F7; --cs-surface: #FFFFFF; --cs-surface-2: #ECEEF1; --cs-surface-3: #E2E5E9;
  --cs-ink: #15171C; --cs-ink-2: #565C66; --cs-ink-3: #656B74;
  --cs-bean: #6F4A2F; --cs-on-bean: #FFFFFF; --cs-bean-tint: #EFE7E0; --cs-bean-deep: #3A2618;
  --cs-crema: #A05D0C; --cs-crema-tint: #FBF1E3; --cs-mark: #6F4A2F;
  --cs-line: rgba(21, 23, 28, 0.09);
  --cs-shadow: 0 1px 2px rgba(58, 38, 24, .05), 0 12px 32px rgba(58, 38, 24, .08);
  --cs-sans: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;
  --cs-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --cs-ease: cubic-bezier(.16, 1, .3, 1);
}
.cs, .cs * { box-sizing: border-box; }
.cs { font-family: var(--cs-sans); color: var(--cs-ink); line-height: 1.55; }
.cs :where(h1, h2, h3, h4, p, ul, figure, blockquote) { margin: 0; padding: 0; border: 0; }
.cs :where(button) { font-family: var(--cs-sans); }
.cs a { color: inherit; }
.cs :focus-visible { outline: 3px solid var(--cs-crema); outline-offset: 3px; border-radius: 6px; }
.cs-num { font-variant-numeric: tabular-nums; }
.cs-small { font-size: 13.5px; color: var(--cs-ink-3); }
.cs-ex { font: 500 11px/1 var(--cs-mono); letter-spacing: .05em; color: var(--cs-ink-3); }

/* buttons and pills */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 13px 22px; border-radius: 999px; font: 600 15px/1 var(--cs-sans); text-decoration: none !important; border: 0; cursor: pointer; transition: transform .2s var(--cs-ease), background .2s; }
.cs-btn:active { transform: translateY(1px) scale(.98); }
.cs-btn-bean { background: var(--cs-bean); color: var(--cs-on-bean) !important; box-shadow: 0 6px 18px rgba(111, 74, 47, .25); }
.cs-btn-bean:hover { transform: translateY(-1px); background: #5E3F28; }
.cs-btn-line { background: transparent; color: var(--cs-ink) !important; box-shadow: inset 0 0 0 1.5px var(--cs-line); }
.cs-btn-sm { padding: 10px 16px; font-size: 14px; }
.cs-pill { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; font: 600 12px/1 var(--cs-sans); white-space: nowrap; }
.cs-pill-bean { background: var(--cs-bean-tint); color: var(--cs-bean); }
.cs-pill-crema { background: var(--cs-crema-tint); color: var(--cs-crema); }

/* header */
.cs-header { position: sticky; top: 0; z-index: 99; background: rgba(244, 245, 247, .78); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--cs-line); }
body.admin-bar .cs-header { top: 32px; }
@media (prefers-reduced-transparency: reduce) { .cs-header { background: var(--cs-bg); backdrop-filter: none; } }
.cs-header-in { max-width: 1200px; margin: 0 auto; height: 68px; padding-inline: 20px; display: flex; align-items: center; gap: 28px; }
.cs-brand { display: flex; align-items: center; gap: 10px; font: 650 17px/1 var(--cs-sans); letter-spacing: -0.02em; text-decoration: none !important; margin-right: auto; color: var(--cs-ink) !important; }
.cs-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--cs-mark); display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 2.5px; padding: 6px; flex: none; }
.cs-mark i { aspect-ratio: 1; border-radius: 50%; background: #FBF1EC; }
.cs-mark i.o { background: transparent; box-shadow: inset 0 0 0 1.3px #FBF1EC; }
.cs-links { display: flex; gap: 26px; font-size: 14.5px; }
.cs-links a { text-decoration: none !important; color: var(--cs-ink-2) !important; transition: color .2s; }
.cs-links a:hover, .cs-links a.cs-on { color: var(--cs-ink) !important; }
.cs-links a.cs-on { font-weight: 600; }
.cs-login { font-size: 14.5px; color: var(--cs-ink-2) !important; text-decoration: none !important; }
.cs-toggle { display: none; background: none; border: 0; font: 600 14px var(--cs-sans); color: var(--cs-ink); padding: 8px 4px; cursor: pointer; }
@media (max-width: 900px) {
  .cs-links, .cs-login { display: none; }
  .cs-toggle { display: block; }
  .cs-header.open .cs-links { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cs-surface); border-bottom: 1px solid var(--cs-line); padding: 8px 20px 16px; }
  .cs-header.open .cs-links a { padding: 12px 0; font-size: 16px; }
}

/* footer */
.cs-footer { max-width: 1200px; margin: 0 auto; padding: 48px 20px 56px; border-top: 1px solid var(--cs-line); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; font-size: 14px; color: var(--cs-ink-2); }
.cs-footer h4 { font: 600 13px/1 var(--cs-sans); color: var(--cs-ink); margin-bottom: 14px; }
.cs-footer nav { display: grid; gap: 10px; }
.cs-footer a { text-decoration: none !important; color: var(--cs-ink-2) !important; } .cs-footer a:hover { color: var(--cs-ink) !important; }
.cs-footer .cs-legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--cs-line); font-size: 13px; color: var(--cs-ink-3); }
@media (max-width: 760px) { .cs-footer { grid-template-columns: 1fr 1fr; } .cs-footer > div:first-child { grid-column: 1 / -1; } }

/* stamp card */
.cs-stage { position: relative; border-radius: 28px; padding: clamp(28px, 4vw, 48px); background: radial-gradient(120% 90% at 85% 10%, #8C5A36 0%, #5A3A24 45%, #2E1E13 100%); overflow: hidden; display: grid; place-items: center; min-height: 440px; }
.cs-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 20% 100%, rgba(226, 162, 87, .25), transparent 70%); pointer-events: none; }
.cs-stage-note { position: absolute; left: 20px; bottom: 16px; z-index: 1; font: 500 12px/1 var(--cs-mono); color: rgba(255,255,255,.75); }
.cs-pass { position: relative; z-index: 1; width: min(340px, 100%); background: var(--cs-surface); border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,.35); overflow: hidden; }
.cs-plain .cs-pass { box-shadow: none; border: 1.5px solid var(--cs-line); }
.cs-pass-band { padding: 18px 20px 16px; background: linear-gradient(135deg, #A86B3F, #6F4A2F); color: #fff; display: grid; gap: 2px; }
.cs-pass-band b { font: 650 20px/1.15 var(--cs-sans); letter-spacing: -0.02em; }
.cs-pass-band span { font-size: 13px; opacity: .85; }
.cs-holes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px; }
.cs-hole { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--cs-surface-3); display: grid; place-items: center; font: 700 12px/1 var(--cs-sans); color: transparent; }
.cs-hole.on { border: 0; background: var(--cs-bean); color: var(--cs-on-bean); transform: rotate(-8deg); }
.cs-hole.press { animation: cs-press .45s var(--cs-ease); }
@keyframes cs-press { 0% { transform: scale(1.5) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.cs-pass-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 20px; font-size: 13.5px; color: var(--cs-ink-2); }
.cs-pass-done { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: rgba(255,255,255,.94); padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.cs-pass.won .cs-pass-done { opacity: 1; pointer-events: auto; }
.cs-pass-done b { font: 650 22px/1.2 var(--cs-sans); }
.cs-col { display: grid; gap: 8px; justify-items: center; }

/* steps */
.cs-steps { display: grid; grid-template-columns: repeat(var(--cs-n, 3), 1fr); position: relative; }
.cs-steps::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 1.5px; background: var(--cs-line); }
.cs-step { position: relative; display: grid; gap: 10px; padding-right: 28px; align-content: start; }
.cs-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--cs-surface); box-shadow: inset 0 0 0 1.5px var(--cs-line); display: grid; place-items: center; font: 600 15px/1 var(--cs-mono); color: var(--cs-bean); }
.cs-step h3 { font: 600 19px/1.3 var(--cs-sans); letter-spacing: -0.015em; color: var(--cs-ink); }
.cs-step p { color: var(--cs-ink-2); }
@media (max-width: 760px) { .cs-steps { grid-template-columns: 1fr; gap: 28px; } .cs-steps::before { display: none; } }

/* demo panels */
.cs-demo { background: var(--cs-surface); border-radius: 20px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; }
.cs-demo.shadow { box-shadow: var(--cs-shadow); }
.cs-demo.flat { background: transparent; padding: 0; }
.cs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-row h3 { font: 600 19px/1.3 var(--cs-sans); letter-spacing: -0.015em; color: var(--cs-ink); }
.cs-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--cs-surface-2); gap: 2px; }
.cs-seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 999px; font: 600 12.5px var(--cs-sans); color: var(--cs-ink-2); cursor: pointer; }
.cs-seg button[aria-pressed="true"] { background: var(--cs-surface); color: var(--cs-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cs-tile { background: var(--cs-surface-2); border-radius: 14px; padding: 14px; }
.cs-tile strong { display: block; font: 650 26px/1.1 var(--cs-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--cs-ink); }
.cs-tile span { font-size: 12.5px; color: var(--cs-ink-2); }
@media (max-width: 480px) { .cs-tiles { grid-template-columns: 1fr 1fr; } }
.cs-chart { width: 100%; height: auto; display: block; }
.cs-chart .g { stroke: var(--cs-line); }
.cs-chart .t { fill: var(--cs-ink-3); font: 500 11px var(--cs-sans); }
.cs-chart .b { fill: var(--cs-surface-3); }
.cs-chart .b.pk { fill: var(--cs-bean); }

/* menu */
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cs-split > * { min-width: 0; }
@media (max-width: 760px) { .cs-split { grid-template-columns: 1fr; } }
.cs-mlist { display: grid; gap: 8px; }
.cs-mrow { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center; background: var(--cs-surface-2); border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.cs-mrow.nobtn { grid-template-columns: 36px 1fr auto; background: var(--cs-surface); }
.cs-mthumb { width: 36px; height: 36px; border-radius: 10px; }
.cs-mrow b { display: block; font-weight: 600; color: var(--cs-ink); } .cs-mrow em { font-style: normal; font-size: 12px; color: var(--cs-ink-3); }
.cs-mbtns { display: flex; gap: 2px; }
.cs-mbtns button { border: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--cs-surface); color: var(--cs-ink-2); cursor: pointer; font: 600 13px var(--cs-sans); }
.cs-notif { background: var(--cs-surface-2); border-radius: 18px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.cs-notif b { font-size: 15px; color: var(--cs-ink); } .cs-notif p { color: var(--cs-ink-2); font-size: 14px; overflow-wrap: anywhere; }
.cs-preview p { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--cs-ink-2); }

/* fields */
.cs-field { display: grid; gap: 7px; }
.cs-field label { font: 600 14px/1.2 var(--cs-sans); color: var(--cs-ink); }
.cs-field input, .cs-field textarea, .cs-field select { width: 100%; font: 400 15.5px var(--cs-sans); color: var(--cs-ink); background: var(--cs-surface); border: 1.5px solid var(--cs-line); border-radius: 12px; padding: 12px 14px; }
.cs-field textarea { min-height: 100px; resize: vertical; }
.cs-field input:focus, .cs-field textarea:focus, .cs-field select:focus { outline: none; border-color: var(--cs-bean); box-shadow: 0 0 0 4px rgba(111, 74, 47, .16); }
.cs-help { font-size: 13px; color: var(--cs-ink-3); }

/* blog cards */
.cs-posts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.cs-post { border-radius: 20px; overflow: hidden; background: var(--cs-surface); text-decoration: none !important; display: grid; align-content: start; transition: transform .35s var(--cs-ease), box-shadow .35s; color: var(--cs-ink) !important; }
.cs-post:hover { transform: translateY(-3px); box-shadow: var(--cs-shadow); }
.cs-post .art { aspect-ratio: 16 / 9; background: radial-gradient(70% 90% at 30% 20%, #C98B55, #6F4A2F 60%, #2E1E13); background-size: cover; background-position: center; }
.cs-post:nth-child(3n+2) .art { background: linear-gradient(135deg, #E9C9A4, #A05D0C); }
.cs-post:nth-child(3n) .art { background: radial-gradient(90% 90% at 80% 80%, #8E6A50, #3A2618); }
.cs-post .txt { padding: 22px; display: grid; gap: 8px; }
.cs-post h3 { font: 650 20px/1.25 var(--cs-sans); letter-spacing: -0.02em; }
.cs-post:first-child { grid-row: span 2; } .cs-post:first-child .art { aspect-ratio: 4 / 3; } .cs-post:first-child h3 { font-size: 28px; }
@media (max-width: 760px) { .cs-posts { grid-template-columns: 1fr; } .cs-post:first-child { grid-row: auto; } }

@media (prefers-reduced-motion: reduce) { .cs-hole.press { animation: none; } .cs-post, .cs-btn { transition: none; } }