/* The Tempt Bakehouse: Classic New York Cheesecake.
   Shared by the home page and the Recipe Shop. Uses ONLY the site's own tokens (--canvas, --surface, --ink,
   --accent, --sun, --berry, --leaf, --night, --disp, --voice, --r-*, --d-*, --out, --emph) and its .btn
   buttons, so it looks like the rest of the site. Every class here is prefixed ck- so it cannot collide with
   either page's own .card, .ph, .tag, .chip, .done and friends. */

/* ---------- tags + small print ---------- */
.ck-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ck-tags li{font-size:12.5px;font-weight:700;line-height:1.2;padding:5px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);white-space:nowrap}
.ck-fine{font-size:13px;line-height:1.45;color:var(--ink-mute)}
.ck-h4{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ck-lbl{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- media slot: a real photo, or the brand plate, until the real file is switched on ---------- */
.ck-slot{position:relative;overflow:hidden;isolation:isolate;background:var(--night)}
.ck-slot>video,.ck-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity var(--d-lg) var(--out)}
.ck-slot.is-live>video,.ck-slot.is-live>img{opacity:1;pointer-events:auto}
.ck-slot.is-live .ck-plate{display:none}
.ck-vctl{position:absolute;right:10px;top:10px;z-index:3;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:2px 2px 0 var(--ink)}
.ck-vctl::before{content:"";width:12px;height:14px;border-left:4px solid var(--ink);border-right:4px solid var(--ink)}
.ck-vctl[data-state="play"]::before{width:0;height:0;border:0;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}

/* the typographic brand plate: the class-materials cream and maroon, the site's type, the gold board as a disc.
   The two plate colours are the only colours in this file that are not site tokens (they come from the class
   materials); change them here. */
.ck-plate{--ck-cream:#FBF1E4;--ck-maroon:#A3324E;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:52px 26px 22px;background:var(--ck-cream);color:var(--ck-maroon);overflow:hidden}
.ck-plate::before{content:"";position:absolute;inset:10px;border:2px solid var(--ck-maroon);border-radius:calc(var(--r-lg) - 12px);pointer-events:none}
.ck-plate-top{position:relative;font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.ck-plate-name{position:relative;font-size:clamp(34px,9.5vw,50px);font-weight:800;line-height:.93;letter-spacing:-.035em;font-variation-settings:"opsz" 96}
.ck-plate-name span,.ck-plate-name em{display:block}
.ck-plate-name em{font-family:var(--voice);font-style:italic;font-weight:400;letter-spacing:-.01em}
.ck-plate-sub{position:relative;font-family:var(--voice);font-style:italic;font-size:clamp(20px,5vw,26px);line-height:1.1;color:var(--ink)}
.ck-plate-disc{position:absolute;right:-14%;bottom:-24%;width:58%;aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);background:var(--sun);opacity:.9}

/* ---------- the card ---------- */
.ck-block{display:grid;gap:clamp(20px,3vw,30px)}
.ck-card{position:relative;display:grid;border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--surface);box-shadow:6px 6px 0 var(--sun),6px 6px 0 3px var(--ink)}
.ck-card-media{position:relative;border-bottom:3px solid var(--ink);border-radius:calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0;overflow:hidden}
.ck-card-media .ck-slot{aspect-ratio:5/4}
.ck-badge{position:absolute;left:12px;top:12px;z-index:4;max-width:calc(100% - 24px);padding:7px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13px;line-height:1.25;letter-spacing:.01em;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.ck-card-body{display:grid;gap:14px;padding:18px 18px 20px;align-content:start}
.ck-title{font-size:clamp(30px,8vw,44px);line-height:.96}
.ck-get{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.ck-get li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.35}
.ck-get li::before{content:"\2713";flex:0 0 24px;height:24px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--sun);font-weight:800;font-size:12px;line-height:1}
.ck-tip{font-family:var(--voice);font-style:italic;font-size:21px;line-height:1.22;border-left:3px solid var(--sun);padding-left:12px}
.ck-earn{font-size:14px;line-height:1.45;color:var(--ink-mute);background:var(--canvas);border:2px dashed var(--ink);border-radius:var(--r-md);padding:10px 12px}
.ck-buy{display:grid;gap:10px}
.ck-pricebox{display:grid;gap:4px}
.ck-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.ck-now{font-size:clamp(38px,10vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variation-settings:"opsz" 96}
.ck-usd{font-size:15px;font-weight:600;color:var(--ink-mute)}
.ck-price.soon{font-size:22px;font-weight:800;color:var(--ink-mute);letter-spacing:-.02em}
.ck-launch{font-size:15px;font-weight:700}
.ck-was{text-decoration-thickness:2px;color:var(--ink-mute)}
.ck-payback{font-size:15px;line-height:1.4;font-weight:600;margin-top:6px}
.ck-buy .btn{width:100%}
.ck-buybtn[aria-disabled="true"],.ck-buybtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:4px 4px 0 var(--ink);transform:none}
.ck-buybtn[aria-busy="true"]{pointer-events:none;opacity:.85}
.ck-buybtn[aria-busy="true"]::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ckspin .7s linear infinite}
@keyframes ckspin{to{transform:rotate(360deg)}}
.ck-under{font-size:13.5px;line-height:1.4;color:var(--ink-mute);text-align:center}

/* expandable details */
.ck-more{border-top:2px solid var(--line);padding-top:4px}
.ck-more summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px}
.ck-more summary::-webkit-details-marker{display:none}
.ck-more summary::after{content:"+";font-weight:800;font-size:24px;line-height:1}
.ck-more[open] summary::after{content:"\2212"}
.ck-more-body{display:grid;gap:18px;padding:6px 0 4px}
.ck-more-body p{font-size:15px;line-height:1.45}
.ck-more .ck-slot{aspect-ratio:16/9;border:3px solid var(--ink);border-radius:var(--r-md)}

/* ---------- sales calculator ---------- */
.ck-calc{border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--canvas);padding:clamp(18px,3vw,26px);box-shadow:6px 6px 0 var(--ink);display:grid;gap:12px}
.ck-calc-h{font-size:clamp(26px,6.4vw,36px);line-height:.98}
.ck-calc-lede{font-size:15px;color:var(--ink-mute)}
.ck-calc-in label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;font-size:15px}
.ck-calc-in output{font-weight:800;font-size:26px;letter-spacing:-.03em}
.ck-calc input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:2px 0 0;background:transparent;cursor:pointer}
.ck-calc input[type=range]::-webkit-slider-runnable-track{height:12px;border:2px solid var(--ink);border-radius:999px;background:var(--surface-2)}
.ck-calc input[type=range]::-moz-range-track{height:12px;border:2px solid var(--ink);border-radius:999px;background:var(--surface-2)}
.ck-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);box-shadow:2px 2px 0 var(--ink)}
.ck-calc input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);box-shadow:2px 2px 0 var(--ink)}
.ck-scale{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--ink-mute);margin-top:-4px}
.ck-calc-out{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.ck-calc-out>div{border:2px solid var(--ink);border-radius:var(--r-md);background:var(--surface);padding:10px 14px}
.ck-calc-out dt{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.ck-calc-out dd{margin:2px 0 0;font-size:clamp(26px,7vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ck-calc-out dd small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-mute)}
.ck-calc-pay{font-weight:700;font-size:16px}

/* ---------- reviews ---------- */
.ck-proof{display:grid;gap:14px}
.ck-g{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:14px;color:var(--ink-mute)}
.ck-g b{font-size:30px;line-height:1;color:var(--ink)}
.ck-stars{color:var(--accent);letter-spacing:.1em;font-size:14px}
.ck-quotes{display:grid;gap:16px;grid-template-columns:1fr}
.ck-q{border:3px solid var(--ink);border-radius:var(--r-lg);padding:16px 18px;background:var(--surface);box-shadow:5px 5px 0 var(--sun),5px 5px 0 3px var(--ink)}
.ck-q p{font-family:var(--voice);font-style:italic;font-size:21px;line-height:1.25;margin-top:4px}
.ck-q small{display:block;margin-top:10px;font-size:13px;color:var(--ink-mute)}
.ck-wait{font-size:15px}
.ck-wait a{font-weight:700;border-bottom:2px solid currentColor;padding-bottom:1px;text-decoration:none}

/* ---------- desktop card ---------- */
@media (min-width:860px){
  .ck-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .ck-card-media{border-bottom:0;border-right:3px solid var(--ink);border-radius:calc(var(--r-lg) - 3px) 0 0 calc(var(--r-lg) - 3px)}
  .ck-card-media .ck-slot{aspect-ratio:auto;height:100%;min-height:460px}
  .ck-card-body{padding:26px 28px 26px}
  .ck-plate{padding:72px 40px 32px;gap:12px}
  .ck-plate-top{font-size:12px}
  .ck-plate-name{font-size:clamp(50px,4.8vw,76px)}
  .ck-plate-sub{font-size:clamp(24px,2.2vw,32px)}
  .ck-buy{max-width:440px}
  .ck-calc{grid-template-columns:1fr 1fr;column-gap:28px;align-items:start}
  .ck-calc-h,.ck-calc-lede,.ck-calc-pay,.ck-calc>.ck-fine{grid-column:1/-1}
  .ck-quotes{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ck-slot>video,.ck-slot>img{transition:none}
  .ck-buybtn[aria-busy="true"]::after{animation:none}
}

/* Home recipes shelf: real photos inside the existing .ph tiles (same treatment as the shop). */
.drop .ph .phimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.drop .ph.has-photo .dot{display:none}
.drop .ph.has-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to bottom,rgba(22,17,15,0),rgba(22,17,15,.55));z-index:1;pointer-events:none}
.drop .ph.has-photo .no{z-index:2;color:var(--canvas);opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.drop .ph.has-photo .stamp{z-index:2;background:rgba(22,17,15,.6);color:var(--canvas);border-color:var(--canvas)}
.drop .ph.has-photo .lbl{z-index:2;color:var(--canvas);opacity:.95;text-shadow:0 1px 6px rgba(0,0,0,.6)}