/* CuddleCollect /cuddlefamous/ product-code guide + photo tips (mock). Prefix: cf-. Uses tokens.css vars. */
.cf-guide { margin: 1.25rem 0 0.25rem; }
.cf-guide h2 { margin: 0 0 0.4rem; }
.cf-guide-lede { max-width: 42rem; margin: 0 0 1rem; }
.cf-code { font-family: var(--font-mono); font-weight: 600; background: var(--tint); color: var(--ink); padding: 0.05rem 0.3rem; border-radius: 4px; letter-spacing: 0.04em; }
/* tag cards */
.cf-tag-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cf-tag-card { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; min-width: 0; }
.cf-tag-media { position: relative; aspect-ratio: 6 / 5; background: #f5efe6; }
.cf-tag-media picture, .cf-tag-media img { display: block; width: 100%; height: 100%; }
.cf-tag-media img { object-fit: cover; }
.cf-callout { position: absolute; border: 3px solid var(--berry); border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,0.9); pointer-events: none; }
.cf-callout-label { position: absolute; background: var(--berry); color: #fff; font: 600 0.75rem/1 var(--font-sans); padding: 0.3rem 0.45rem; border-radius: 4px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
/* code positions measured on the derived 6:5 crops */
.cf-callout--sewn  { left: 22%; top: 22.5%; width: 51.5%; height: 21%; }
.cf-callout--sewn  .cf-callout-label { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
.cf-callout--swing { left: 37.5%; top: 85.8%; width: 22.5%; height: 10.4%; }
.cf-callout--swing .cf-callout-label { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.cf-tag-card figcaption { padding: 0.6rem 0.85rem 0.7rem; font-weight: 600; border-top: 1px solid var(--line); }
/* tips */
.cf-tips h2 { margin: 0 0 0.6rem; }
.cf-tips ul { margin: 0; padding: 0; list-style: none; }
.cf-tips li { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.45rem 0; }
.cf-tips li + li { border-top: 1px solid #e6dccd; }
.cf-ico { flex: 0 0 auto; width: 24px; height: 24px; color: var(--berry); margin-top: 0.05rem; }
.cf-req { display: inline-block; background: var(--berry); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 0.25rem 0.45rem; border-radius: 999px; margin-left: 0.35rem; vertical-align: 0.1em; }
.cf-tip-sub { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.15rem; }
.cf-tips .cf-tip-tag { background: var(--tint); border-top: 0; border-left: 4px solid var(--berry); padding: 0.6rem 0.7rem; margin-top: 0.35rem; border-radius: 0 6px 6px 0; }
.cf-tips .cf-tip-tag .cf-tip-sub { color: var(--ink); }

/* ---------- Option A: compact (cards + tips beside) ---------- */
.cf-guide--a .cf-guide-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cf-guide--a .cf-tips { background: #f5efe6; border-top: 3px solid var(--berry); border-radius: 0 0 8px 8px; padding: 0.9rem 1rem 0.8rem; }
@media (max-width: 900px) { .cf-guide--a .cf-guide-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cf-guide--a .cf-tag-cards { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; } }

/* ---------- Option B: disclosure + icon rows ---------- */
.cf-guide--b { max-width: 720px; }
.cf-disclosure { border: 1px solid var(--line); border-left: 4px solid var(--berry); border-radius: 0 8px 8px 0; background: #fff; margin: 0 0 1.25rem; }
.cf-disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.6rem 0.9rem; background: var(--tint); font-weight: 600; border-radius: 0 7px 0 0; }
.cf-disclosure > summary::-webkit-details-marker { display: none; }
.cf-disclosure > summary:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
.cf-sum-hint { font-weight: 400; color: var(--ink); margin-left: auto; font-size: 0.9rem; }
.cf-chev { width: 20px; height: 20px; color: var(--berry); transition: transform .15s; flex: 0 0 auto; }
.cf-disclosure[open] .cf-chev { transform: rotate(90deg); }
.cf-disclosure-body { padding: 0.9rem; }
.cf-guide--b .cf-tips li { gap: 0.8rem; align-items: center; padding: 0.55rem 0; border-top: 0; }
.cf-guide--b .cf-ico-wrap { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; }
.cf-guide--b .cf-ico { margin: 0; }
.cf-guide--b .cf-tips .cf-tip-tag { border-left: 0; border-radius: 8px; padding: 0.65rem 0.7rem; }
.cf-guide--b .cf-tips .cf-tip-tag .cf-ico-wrap { background: #fff; }
@media (max-width: 640px) {
  .cf-guide--b .cf-tag-cards { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .cf-disclosure-body { padding: 0.75rem; }
  .cf-sum-hint { display: none; }
}



#tally-photo { min-height: 1750px; }
@media (max-width: 640px) {
  #tally-photo { min-height: 2150px; }
}