/* ============================================================
   Back Home Bakery — customer website
   One view at a time (tabs), step-by-step flows for ordering,
   custom requests, and signing in.
   ============================================================ */

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.view { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem); min-height: calc(100vh - 220px); outline: none; }
.view-head { text-align: center; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); max-width: 640px; }
.view-head h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 600; color: var(--wood); margin: 0.35rem 0 0.5rem; }
.view-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- Announcement + paused banners ---------- */
.announce { background: var(--sage-dark); color: #fff; text-align: center; font-size: 0.92rem; font-weight: 700; padding: 0.55rem 16px; }
.announce .script { color: var(--butter); font-size: 1.15rem; margin-right: 0.35rem; }
.paused {
  display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.5rem;
  padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--butter-wash); border: 1px solid rgba(138, 90, 18, 0.25); color: var(--wood);
}
.paused svg { width: 22px; height: 22px; flex: none; color: var(--st-baking); }

/* ---------- Header & tabs ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; }
.brand img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.brand-name { font-family: var(--font-script); font-size: 1.55rem; color: var(--terracotta); line-height: 1; }
.site-tabs { display: flex; gap: 0.25rem; margin-left: auto; align-self: stretch; }
.site-tabs a {
  display: flex; align-items: center; padding: 0 0.85rem; position: relative;
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.93rem;
}
.site-tabs a:hover { color: var(--wood); }
.site-tabs a[aria-current="page"] { color: var(--wood); }
.site-tabs .tab-mark { position: absolute; left: 0.85rem; right: 0.85rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--terracotta); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.acct-btn, .bag-btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.92rem; text-decoration: none;
}
.acct-btn { background: transparent; border: 1.5px solid var(--line-strong); color: var(--wood); }
.acct-btn:hover { background: var(--cream-dark); }
.bag-btn { background: var(--terracotta-deep); border: 0; color: #fff; }
.bag-btn:hover { background: var(--terracotta-dark); }
.acct-btn svg, .bag-btn svg { width: 20px; height: 20px; }
.bag-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: #fff; color: var(--terracotta-dark); font-size: 0.78rem; display: grid; place-items: center; }
.dot-badge { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 2px var(--shiplap); }

/* Bottom tab bar (phones) */
.tabbar { display: none; }

/* ---------- Home ---------- */
.home-hero { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow: hidden; margin-top: calc(-1 * clamp(1.75rem, 4vw, 3rem)); }
.home-hero::before { content: ''; position: absolute; top: -15%; right: -8%; width: 50%; height: 130%; background: radial-gradient(circle, rgba(122, 139, 110, 0.10) 0%, transparent 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center; }
.hero-grid > * { min-width: 0; }
.home-hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5.4vw, 3.7rem); font-weight: 600; color: var(--wood); line-height: 1.12; margin: 0.7rem 0 1.1rem; }
.home-hero h1 .script { font-size: 1.12em; line-height: 1; }
.home-hero .lead { font-size: 1.12rem; color: var(--muted); max-width: 42ch; margin-bottom: 1.9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.5rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--muted); font-size: 0.92rem; }
.hero-facts span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-facts svg { width: 16px; height: 16px; color: var(--sage-dark); }
.hero-facts b { color: var(--wood); }
.hero-visual { position: relative; display: flex; justify-content: center; }
.logo-frame { position: relative; background: var(--white); padding: 1.6rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); max-width: 330px; transform: rotate(-1.5deg); }
.logo-frame::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(122, 139, 110, 0.3); border-radius: 10px; pointer-events: none; }
.logo-frame img { border-radius: 8px; }
.hero-note { position: absolute; right: -6px; bottom: -22px; background: var(--chalk-board); color: var(--chalk); padding: 0.85rem 1.1rem 0.9rem; border-radius: 6px; box-shadow: var(--shadow-lift), 0 0 0 5px #6E5238; transform: rotate(3deg); max-width: 210px; }
.hero-note .script { display: block; color: var(--butter); font-size: 1.35rem; line-height: 1.1; }
.hero-note p { font-size: 0.85rem; opacity: 0.9; margin-top: 0.15rem; }

.home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.tile-link { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.tile-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--sage); }
.tl-img { position: relative; width: 96px; height: 84px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, #fff, var(--cream) 75%); }
.tl-img img { max-width: 90%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(92, 70, 54, 0.22)); }
.tl-img.photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.tl-text { display: grid; gap: 0.1rem; }
.tl-text b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; color: var(--wood); line-height: 1.15; }
.tl-text span:last-child { color: var(--muted); font-size: 0.9rem; }
.tile-link > svg { width: 22px; height: 22px; color: var(--terracotta); }

.meet { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.25rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 2rem); margin-top: 1rem; }
.meet > * { min-width: 0; }
.meet .script { font-size: 1.9rem; display: block; line-height: 1.1; margin-bottom: 0.4rem; }
.meet p { color: var(--charcoal); }
.contact-list { display: grid; gap: 0.85rem; align-content: start; }
.contact-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.contact-row .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--sage-wash); color: var(--sage-dark); }
.contact-row .ic svg { width: 18px; height: 18px; }
.contact-row small { display: block; color: var(--muted); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.contact-row a { color: var(--wood); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact-row a:hover { color: var(--terracotta-dark); }

/* ---------- Chalkboard (This Week) ---------- */
.chalkboard {
  --chalk-ink: #F3EEE3;
  position: relative; color: var(--chalk-ink); border-radius: 6px;
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.1rem, 4vw, 3rem) 2.25rem;
  background:
    radial-gradient(ellipse 40% 28% at 16% 20%, rgba(255, 255, 255, 0.06), transparent 70%),
    radial-gradient(ellipse 34% 24% at 84% 66%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(ellipse 22% 16% at 60% 12%, rgba(255, 255, 255, 0.035), transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 105%, rgba(0, 0, 0, 0.2), transparent 70%),
    var(--chalk-board);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.22), 0 0 0 10px #6E5238, 0 0 0 12px #4F3A28;
  margin: 12px;
}
.chalkboard::before { content: ''; position: absolute; top: -18px; left: 8%; right: 8%; height: 14px; background: linear-gradient(90deg, #7A5C3E, #A67C52 20%, #8B6B4A 50%, #A67C52 80%, #7A5C3E); border-radius: 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }
.chalkboard::after {
  content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.chalkboard > * { position: relative; z-index: 1; }
.chalk-head { text-align: center; margin-bottom: 1.25rem; }
.week-label { display: block; font-family: var(--font-script); color: var(--butter); font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1; transform: rotate(-2deg); }
.chalk-title { font-family: var(--font-chalk); font-weight: 700; text-transform: uppercase; font-size: clamp(2.5rem, 6.4vw, 3.8rem); letter-spacing: 0.05em; line-height: 1; color: var(--chalk-ink); margin-top: 0.4rem; filter: url(#chalk); }
.chalk-swash { display: block; width: min(320px, 78%); height: 26px; margin: 0.35rem auto 0; color: var(--butter); opacity: 0.85; filter: url(#chalk); }
.chalk-sub { font-family: var(--font-hand); font-size: 1.25rem; opacity: 0.78; margin-top: 0.2rem; }
.chalk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.chalk-item { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.2rem 0; border-bottom: 1.5px dashed rgba(243, 238, 227, 0.16); }
.ci-thumb { width: 100px; height: 100px; display: grid; place-items: center; color: rgba(243, 238, 227, 0.7); }
.ci-thumb img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.5)); transition: transform 0.25s ease; }
a.ci-thumb:hover img { transform: scale(1.07) rotate(-3deg); }
.ci-thumb.snap img { width: 92%; height: 82%; object-fit: cover; border: 4px solid #F6F1E7; border-bottom-width: 12px; border-radius: 3px; transform: rotate(-3deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
a.ci-thumb.snap:hover img { transform: rotate(0deg) scale(1.05); }
/* No photo yet: the drawing is chalk too, with a little chalk shading. */
.ci-thumb .no-photo { color: inherit; }
.ci-thumb .treat-art { width: 96%; height: 96%; stroke-width: 2.6; opacity: 0.85; filter: url(#chalk); }
.ci-thumb .treat-art :is(.ta-dough, .ta-crust, .ta-cream, .ta-wrap, .ta-glass) { fill: currentColor; fill-opacity: 0.1; }
.ci-thumb .treat-art :is(.ta-choc, .ta-fudge, .ta-pop) { fill: currentColor; fill-opacity: 0.35; }
.ci-thumb .treat-art :is(.ta-pop-line, .ta-leaf-line, .ta-cream-line) { stroke: currentColor; }
.chalk-item.is-out .ci-thumb .treat-art { opacity: 0.45; }
.ci-line { display: flex; align-items: baseline; gap: 0.5rem; }
.ci-name { font-family: var(--font-chalk); font-weight: 700; font-size: 1.95rem; letter-spacing: 0.02em; line-height: 1.02; filter: url(#chalk); }
.ci-name a { color: inherit; text-decoration: none; }
.ci-name a:hover { color: var(--butter); }
.ci-dots { flex: 1; min-width: 0.75rem; border-bottom: 2.5px dotted rgba(243, 238, 227, 0.32); transform: translateY(-0.3rem); }
.ci-price { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; color: var(--butter); white-space: nowrap; line-height: 1; }
.ci-price small { font-size: 1rem; font-weight: 500; color: var(--chalk-ink); opacity: 0.75; margin-left: 0.2rem; }
.ci-desc { font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.2; opacity: 0.88; margin-top: 0.25rem; }
.ci-more { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--butter); text-decoration: none; white-space: nowrap; }
.ci-more:hover { text-decoration: underline; }
.ci-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin-top: 0.65rem; }
.stock { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 0.4rem; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-light); }
.stock.low { color: var(--butter); }
.stock.low::before { background: var(--butter); }
.stock.out { color: rgba(245, 240, 230, 0.6); }
.stock.out::before { background: rgba(245, 240, 230, 0.4); }
.chalk-note { font-family: var(--font-hand); font-size: 1.15rem; opacity: 0.7; }
.ci-add { display: flex; align-items: center; gap: 0.6rem; }
.chalkboard .stepper { background: transparent; border-color: rgba(245, 240, 230, 0.35); }
.chalkboard .stepper button { color: var(--chalk); }
.chalkboard .stepper button:hover { background: rgba(245, 240, 230, 0.12); }
.chalk-item.is-out .ci-thumb img { filter: grayscale(1) brightness(0.75) drop-shadow(0 9px 10px rgba(0, 0, 0, 0.5)); opacity: 0.5; }
.chalk-item.is-out .ci-name, .chalk-item.is-out .ci-desc, .chalk-item.is-out .ci-price { opacity: 0.5; }
.chalk-item.is-out .ci-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.chalk-foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1.5px dashed rgba(243, 238, 227, 0.28); text-align: center; font-family: var(--font-hand); font-size: 1.3rem; }
.chalk-foot b { font-family: var(--font-chalk); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 0.5rem; filter: url(#chalk); }
.chalk-empty { text-align: center; padding: 2rem 0 1rem; font-family: var(--font-hand); font-size: 1.4rem; opacity: 0.85; }

/* ---------- Underline sub-tabs ---------- */
.subtabs { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--line-strong); margin-bottom: 1.75rem; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  flex: none; position: relative; padding: 0.8rem 1rem; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-weight: 700; font-size: 0.95rem; white-space: nowrap;
}
.subtab:hover { color: var(--wood); }
.subtab[aria-selected="true"] { color: var(--wood); }
.subtab .sub-mark { position: absolute; left: 1rem; right: 1rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--terracotta); }

/* ---------- Configurator (menu): big picture + choices ---------- */
.config { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.config > * { min-width: 0; }
.stage {
  position: relative; aspect-ratio: 10 / 9; border-radius: 20px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse 58% 48% at 50% 56%, #FFFFFF 0%, #FBF7F0 45%, var(--cream-dark) 100%);
  border: 1px solid var(--line); color: var(--line-strong);
}
.stage::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 12%; height: 8%; background: radial-gradient(ellipse at center, rgba(92, 70, 54, 0.24), transparent 70%); }
.stage img { position: relative; z-index: 1; max-width: 80%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(92, 70, 54, 0.22)); animation: pop-in 0.3s ease; }
.stage.is-photo::after { display: none; }
.stage.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
/* No photo yet: a drawing of the treat that says "Photo coming soon" (BHB.noPhoto). */
.stage.is-empty::after { display: none; }
.stage .no-photo { position: relative; z-index: 1; gap: 0.5rem; padding: 1rem; animation: pop-in 0.3s ease; }
.stage .treat-art { width: 38%; min-width: 104px; max-width: 220px; height: auto; filter: drop-shadow(0 12px 10px var(--line)); }
.stage .no-photo-words { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
@keyframes pop-in { from { transform: scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } }
.config-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--wood); line-height: 1.1; }
.config-sub { color: var(--muted); margin: 0.35rem 0 0.5rem; }
.config-sub a { color: var(--terracotta-dark); font-weight: 700; }
.opt-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.25rem 0 0.6rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.opt-label b { color: var(--wood); text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.config-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.config-total b { display: block; font-size: 1.6rem; color: var(--wood); line-height: 1.1; }
.config-total span { color: var(--muted); font-size: 0.88rem; }

/* Option tiles — used for every choice (flavors, items, days, kinds, detail levels) */
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.opt-grid.cols-1 { grid-template-columns: 1fr; }
.opt-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt {
  position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 56px;
  padding: 0.6rem 0.8rem; border-radius: 12px; border: 1.5px solid var(--line-strong); background: #fff;
  cursor: pointer; text-align: left; color: var(--charcoal); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s var(--ease-out);
}
.opt:hover { border-color: var(--wood-light); }
.opt[aria-checked="true"] { border-color: var(--wood); box-shadow: inset 0 0 0 1px var(--wood); background: var(--cream); }
.opt[aria-checked="true"]::after {
  content: ''; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--wood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.opt[disabled] { opacity: 0.45; cursor: not-allowed; }
.opt-sw { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sw, var(--cream-dark)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.opt-sw img { width: 100%; height: 100%; object-fit: cover; }
.opt-sw.cut { background: radial-gradient(circle at 50% 60%, #fff, var(--cream) 80%); }
.opt-sw.cut img { object-fit: contain; padding: 3px; }
.opt-text { display: grid; gap: 0.05rem; min-width: 0; padding-right: 1.25rem; }
.opt-text b { font-weight: 700; color: var(--charcoal); font-size: 0.93rem; line-height: 1.25; }
.opt-text small { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.opt-price { margin-left: auto; font-weight: 700; color: var(--wood); white-space: nowrap; padding-right: 1.4rem; font-size: 0.93rem; }
.opt.big { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; min-height: 0; gap: 0; }
.opt.big .opt-img { position: relative; width: 100%; height: 130px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, #fff, var(--cream) 78%); color: var(--line-strong); }
.opt.big .opt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opt.big .opt-img.cut img { position: static; width: auto; height: auto; max-width: 80%; max-height: 85%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(92, 70, 54, 0.22)); }
.opt.big .opt-img .no-photo { gap: 0.15rem; }
.opt.big .opt-img .treat-art { width: 64px; height: 64px; }
.opt.big .opt-img .no-photo-words { font-size: 1.15rem; }
.opt.big .opt-text { padding: 0.75rem 0.9rem 0.85rem; }
.opt.big[aria-checked="true"]::after { top: 10px; right: 10px; width: 22px; height: 22px; background-size: 14px; box-shadow: 0 0 0 3px #fff; }
/* Color tiles (Custom Orders' Colors step): a swatch with its name under it, several to a row; pick as many as you like */
.opt-grid.colors { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 0.45rem; }
.opt.color { flex-direction: column; justify-content: center; gap: 0.35rem; min-height: 0; padding: 0.65rem 0.2rem 0.55rem; text-align: center; }
.opt.color .opt-sw { width: 34px; height: 34px; }
.opt.color .opt-text { padding-right: 0; justify-items: center; }
.opt.color .opt-text b { font-size: 0.74rem; line-height: 1.15; }
.opt.color[aria-checked="true"]::after { top: 5px; right: 5px; width: 16px; height: 16px; background-size: 10px; }
.color-words { margin-top: 1.25rem; }
.opt.day { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 68px; }
.opt.day b { font-size: 1.05rem; color: var(--wood); }
.opt.day small { color: var(--muted); font-size: 0.85rem; }
/* A day Amanda is off ("Closed") or a full one: shown, but it can't be picked.
   Three or more in a row share one wide tile. */
.opt.day.shut[disabled] { opacity: 1; border-style: dashed; background: repeating-linear-gradient(135deg, var(--cream) 0 6px, var(--white) 6px 12px); }
.opt.day.shut b { color: var(--muted); }
.opt.day.shut small { color: var(--st-new); font-weight: 700; }
.opt.day.wide { grid-column: 1 / -1; }
.day-none { margin-top: 1rem; }

/* ---------- Step-by-step flows (custom request, checkout) ---------- */
.progress { list-style: none; margin: 1.25rem auto 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.4rem; max-width: 720px; }
.progress li { font-size: 0.78rem; font-weight: 700; color: var(--faint); }
.progress li::before { content: ''; display: block; height: 4px; border-radius: 4px; background: var(--line-strong); margin-bottom: 0.45rem; }
.progress li.done, .progress li.current { color: var(--wood); }
.progress li.done::before { background: var(--sage-dark); }
.progress li.current::before { background: var(--terracotta); }
.wizard { max-width: 760px; }
.wiz-card { margin-top: 1.5rem; overflow: hidden; }
.wiz-body { padding: clamp(1.25rem, 4vw, 2.25rem); }
.step-count { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.wiz-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.3rem); color: var(--wood); margin: 0.25rem 0 0.35rem; }
.wiz-body > p.muted { margin-bottom: 1.25rem; }
.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.25rem, 4vw, 2.25rem); border-top: 1px solid var(--line); background: var(--cream); }
.wiz-foot .est { color: var(--muted); font-size: 0.85rem; text-align: center; }
.wiz-foot .est b { display: block; color: var(--wood); font-size: 1.15rem; }
.fields { display: grid; gap: 1rem; }
.fields.two { grid-template-columns: 1fr 1fr; }
.fields .full { grid-column: 1 / -1; }
.input.big { min-height: 52px; font-size: 1.05rem; }
.hint { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.7rem 0.85rem; border-radius: var(--radius); font-size: 0.88rem; }
.hint svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.hint.warn { background: var(--butter-wash); color: #6A4510; }
.hint.info { background: var(--sage-wash); color: var(--st-confirmed); }
.form-error { margin-bottom: 1rem; }
.review { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin: 0; }
.review-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); align-items: start; font-size: 0.95rem; }
.review-row:last-child { border-bottom: 0; }
.review-row dt { color: var(--muted); font-weight: 700; font-size: 0.85rem; }
.review-row dd { margin: 0; overflow-wrap: anywhere; }
.linkish { border: 0; background: none; padding: 0; color: var(--terracotta-dark); font-size: 0.85rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.toggle-card { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; padding: 1rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; }
.toggle-card.on { border-color: var(--sage-dark); background: var(--sage-wash); }
.toggle-card input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sage-dark); }
.toggle-card b { color: var(--wood); display: block; }
.toggle-card ul { margin: 0.35rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.88rem; }
.toggle-card .soon { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--st-baking); margin-left: 0.35rem; }
.toggle-card .fine { margin-top: 0.3rem; }
/* "Email me specials and news" (checkout and sign-up): spaced like the cards around it. */
.news-card { margin-top: 0.5rem; }
.fields.two + .news-card { margin-top: 1rem; }
.fields > .news-card { margin-top: 0; }
.fine { font-size: 0.8rem; color: var(--muted); }
.success { text-align: center; padding: 2rem 1rem; }
.success .badge { width: 68px; height: 68px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--sage-wash); color: var(--sage-dark); }
.success .badge svg { width: 34px; height: 34px; }
.success h3 { font-family: var(--font-display); font-size: 2rem; color: var(--wood); }
.success p { color: var(--muted); margin: 0.5rem auto 1.25rem; max-width: 42ch; }
.success .code { display: inline-block; font-weight: 700; letter-spacing: 0.08em; padding: 0.35rem 0.85rem; border-radius: 6px; background: var(--cream-dark); color: var(--wood); }
.success .row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Checkout sheet ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(47, 42, 38, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.sheet-scrim.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: min(500px, 100%);
  display: flex; flex-direction: column; background: var(--shiplap); box-shadow: var(--shadow-lift);
  transform: translateX(100%); visibility: hidden;
}
.sheet.open { transform: none; visibility: visible; }
.sheet-head { display: grid; grid-template-columns: 36px 1fr 36px; gap: 0.75rem; align-items: center; padding: 0.9rem 1.1rem; background: var(--white); border-bottom: 1px solid var(--line); }
.sheet-head .bar { height: 4px; border-radius: 4px; background: var(--line-strong); overflow: hidden; margin-top: 0.35rem; }
.sheet-head .bar i { display: block; height: 100%; background: var(--terracotta); border-radius: 4px; transition: width 0.3s ease; }
.sheet-body { flex: 1; overflow-y: auto; padding: 1.4rem 1.25rem; }
.sheet-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--wood); margin-bottom: 0.25rem; }
.sheet-body > p.muted { margin-bottom: 1.1rem; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); }
.sheet-total span { display: block; font-size: 0.8rem; color: var(--muted); }
.sheet-total b { font-size: 1.4rem; color: var(--wood); }
.bag-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.bag-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.5rem 0.85rem; align-items: center; padding: 0.8rem 0.9rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.bag-thumb { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 60%, #fff, var(--cream) 80%); color: var(--line-strong); }
.bag-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bag-thumb.photo img { width: 100%; height: 100%; object-fit: cover; }
.bag-thumb .sketch { width: 34px; height: 34px; }
.bag-thumb .treat-art { width: 84%; height: 84%; stroke-width: 2.6; }
.bag-line b { color: var(--wood); display: block; line-height: 1.3; }
.bag-line small { color: var(--muted); }
.bag-line .row { grid-column: 2 / -1; display: flex; justify-content: space-between; align-items: center; }
.bag-line .warn { grid-column: 1 / -1; font-size: 0.82rem; color: #6A4510; font-weight: 700; }
.empty-state { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.empty-state svg { width: 42px; height: 42px; color: var(--sage); margin: 0 auto 0.75rem; }
.empty-state .row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.signed-card { display: flex; gap: 0.85rem; align-items: center; padding: 0.9rem 1rem; border-radius: 12px; background: var(--sage-wash); margin-bottom: 1rem; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-dark); color: #fff; font-weight: 700; flex: none; }
.signed-card b { display: block; color: var(--wood); }
.signed-card span { font-size: 0.85rem; color: var(--st-confirmed); }

/* ---------- My Orders / account ---------- */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; max-width: 920px; margin: 0 auto; }
.acct-card { padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: 1rem; }
.acct-card h3 { font-family: var(--font-display); font-size: 1.7rem; color: var(--wood); font-weight: 600; }
.acct-card > p { color: var(--muted); }
.row-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.demo-code { padding: 0.75rem 0.9rem; border-radius: 10px; border: 1.5px dashed var(--st-baking); background: var(--butter-wash); font-size: 0.88rem; color: #6A4510; }
.demo-code b { font-size: 1.15rem; letter-spacing: 0.15em; }
.guest-detail { max-width: 920px; margin: 1.25rem auto 0; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.acct-head h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 2.6rem); font-weight: 600; color: var(--wood); }
.acct-head p { color: var(--muted); }
.orders-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.order-list { display: grid; gap: 0.5rem; }
.order-pick {
  display: grid; gap: 0.2rem; width: 100%; padding: 0.85rem 1rem; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); position: relative;
}
.order-pick:hover { border-color: var(--wood-light); }
.order-pick[aria-current="true"] { border-color: var(--wood); box-shadow: inset 0 0 0 1px var(--wood); }
.order-pick .t { font-weight: 700; color: var(--wood); padding-right: 1.5rem; }
.order-pick .s { font-size: 0.84rem; color: var(--muted); }
.order-pick .new-msg { position: absolute; top: 0.95rem; right: 0.95rem; width: 10px; height: 10px; border-radius: 50%; background: var(--terracotta); }
.order-detail { padding: clamp(1.25rem, 3vw, 2rem); }
.back-link { display: none; margin-bottom: 1rem; }
.td-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.td-head h3 { font-family: var(--font-display); font-size: 1.9rem; color: var(--wood); font-weight: 600; }
.td-head p { color: var(--muted); font-size: 0.9rem; }
.timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.timeline li { position: relative; text-align: center; font-size: 0.8rem; color: var(--faint); padding-top: 34px; font-weight: 700; }
.timeline li::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 2px solid var(--line-strong); z-index: 1; }
.timeline li::after { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
.timeline li:first-child::after { display: none; }
.timeline li.done { color: var(--sage-dark); }
.timeline li.done::before { background: var(--sage-dark); border-color: var(--sage-dark); box-shadow: inset 0 0 0 5px var(--white); }
.timeline li.done::after, .timeline li.current::after { background: var(--sage-dark); }
.timeline li.current { color: var(--wood); }
.timeline li.current::before { background: var(--terracotta); border-color: var(--terracotta); box-shadow: 0 0 0 5px var(--terracotta-wash); }
.quote-box { border: 1.5px solid var(--terracotta); background: var(--terracotta-wash); border-radius: 12px; padding: 1.1rem; margin-bottom: 1.25rem; }
.quote-box .amt { font-size: 1.9rem; font-weight: 700; color: var(--wood); }
.quote-box p { margin: 0.35rem 0 0.9rem; }
.thread-wrap { margin: 1.5rem 0; }
.detail-h { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.thread { display: grid; gap: 0.6rem; margin-bottom: 0.8rem; }
.bubble { max-width: 82%; padding: 0.7rem 0.9rem; border-radius: 14px; font-size: 0.95rem; }
.bubble span { display: block; font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.8; }
.bubble.theirs { background: var(--cream-dark); border-bottom-left-radius: 4px; justify-self: start; }
.bubble.mine { background: var(--sage-dark); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: end; }
.composer .textarea { min-height: 52px; }
.nudge { padding: 0.9rem 1rem; border-radius: 12px; background: var(--cream); border: 1px dashed var(--line-strong); font-size: 0.92rem; display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.lines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines li.total { font-weight: 700; color: var(--wood); border-bottom: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; font-size: 0.93rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.settings-card { padding: 1.25rem; margin-bottom: 1.25rem; display: grid; gap: 1rem; }
.settings-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--wood); }

/* ---------- Product pages ---------- */
.product-page { padding: 1.25rem 0 4rem; }
.crumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; font-size: 0.88rem; color: var(--muted); margin-bottom: 1.25rem; }
.crumbs a { color: var(--wood); font-weight: 700; text-decoration: none; }
.crumbs a:hover { color: var(--terracotta-dark); }
.pd-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.pd-hero > * { min-width: 0; }
.pd-gallery { position: sticky; top: 92px; }
.pd-thumbs { display: flex; gap: 0.6rem; margin-top: 0.85rem; overflow-x: auto; padding: 2px 2px 6px; }
.pd-thumb { flex: none; width: 72px; height: 72px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--white); box-shadow: var(--shadow-soft); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.cut img { object-fit: contain; padding: 6px; }
.pd-thumb[aria-pressed="true"] { border-color: var(--wood); }
.pd-info h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--wood); line-height: 1.08; margin: 0.35rem 0 0.15rem; }
.pd-tagline { font-family: var(--font-script); color: var(--terracotta); font-size: 1.75rem; line-height: 1.2; margin-bottom: 1rem; }
.pd-about { font-size: 1.08rem; margin-bottom: 1.25rem; max-width: 52ch; }
.offer { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.offer-title { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.offer-title b { font-size: 1rem; color: var(--wood); }
.offer-title span { font-size: 0.88rem; color: var(--muted); }
.offer-title .low { color: var(--st-baking); font-weight: 700; }
.offer-main { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; margin-top: 0.85rem; }
.offer-price { font-size: 1.75rem; font-weight: 700; color: var(--wood); line-height: 1; }
.offer-price small { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.offer .ci-add { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.tier-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; font-size: 0.93rem; }
.tier-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--line); }
.tier-list b { color: var(--terracotta-dark); }
.pd-facts { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.45rem; color: var(--muted); font-size: 0.92rem; }
.pd-facts li { display: flex; gap: 0.55rem; align-items: center; }
.pd-facts svg { width: 18px; height: 18px; color: var(--sage-dark); flex: none; }
.pd-tabs { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding: 0 clamp(1.1rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem); }
.pd-tabs .subtabs { margin-bottom: 1.25rem; }
.pd-panel p { font-size: 1.05rem; max-width: 70ch; }
.pd-contains { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--line-strong); }
.pd-grid { columns: 3 220px; column-gap: 0.9rem; }
.pd-grid.single { columns: 1; max-width: 560px; }
.pd-grid.double { columns: 2 240px; max-width: 900px; }
.pd-photo { display: block; width: 100%; margin: 0 0 0.9rem; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; break-inside: avoid; background: var(--cream-dark); }
.pd-photo img { width: 100%; height: auto; transition: transform 0.3s ease; }
.pd-photo:hover img { transform: scale(1.03); }
.pd-sec-head { text-align: center; margin: clamp(2.5rem, 6vw, 3.5rem) 0 1.25rem; }
.pd-sec-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.4rem); color: var(--wood); margin-top: 0.3rem; }
.pd-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pd-more-card { display: grid; gap: 0.25rem; padding: 1rem; text-align: center; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pd-more-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pd-more-img { height: 150px; margin-bottom: 0.5rem; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse 60% 55% at 50% 60%, #FFFFFF, var(--cream) 75%); }
.pd-more-img img { max-height: 130px; max-width: 85%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(92, 70, 54, 0.22)); }
.pd-more-img:not(.cut) img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.pd-more-card b { font-family: var(--font-display); font-size: 1.35rem; color: var(--wood); }
.pd-more-card span:last-child { color: var(--muted); font-size: 0.9rem; }
.pd-fine { max-width: 62ch; margin: 2.75rem auto 0; text-align: center; font-size: 0.82rem; color: var(--muted); }
.pd-missing { text-align: center; padding: 4rem 0; }
.pd-missing h1 { font-family: var(--font-display); color: var(--wood); font-size: 2.4rem; margin-bottom: 0.5rem; }
.lightbox { position: fixed; inset: 0; z-index: 400; display: none; place-items: center; padding: 24px; background: rgba(30, 26, 22, 0.88); }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 12px; box-shadow: var(--shadow-lift); }
.lb-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; }

/* ---------- Footer ---------- */
.site-footer { background: #3E2F25; color: rgba(245, 240, 230, 0.8); padding: 1.75rem 0; font-size: 0.88rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; }
.site-footer .script { color: var(--butter); font-size: 1.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .site-tabs a { padding: 0 0.55rem; font-size: 0.88rem; }
  .site-tabs .tab-mark { left: 0.55rem; right: 0.55rem; }
  .acct-btn .label, .bag-btn .label { display: none; }
}
@media (max-width: 980px) {
  .hero-grid, .config, .pd-hero, .meet, .acct-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .logo-frame { max-width: 220px; }
  .hero-note { right: auto; left: calc(50% + 50px); bottom: -14px; }
  .home-tiles { grid-template-columns: 1fr; }
  .chalk-list { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .pd-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  :root { --toast-lift: 64px; }
  body { padding-bottom: 64px; }
  .site-tabs { display: none; }
  .header-actions { margin-left: auto; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--white); border-top: 1px solid var(--line); padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(92, 70, 54, 0.08);
  }
  .tabbar a { display: grid; justify-items: center; gap: 0.15rem; padding: 0.35rem 0; color: var(--muted); text-decoration: none; font-size: 0.68rem; font-weight: 700; position: relative; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--terracotta-dark); }
  .tabbar .dot-badge { top: 2px; right: calc(50% - 18px); }
  .orders-layout { grid-template-columns: 1fr; }
  .orders-layout.show-detail .order-list { display: none; }
  .orders-layout:not(.show-detail) .order-detail { display: none; }
  .back-link { display: inline-flex; }
  .fields.two { grid-template-columns: 1fr; }
  .opt-grid.cols-3 { grid-template-columns: 1fr; }
  .view { min-height: 0; }
}
@media (max-width: 560px) {
  .header-row { gap: 0.5rem; min-height: 60px; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1.3rem; }
  .acct-btn, .bag-btn { padding: 0.5rem 0.65rem; }
  .hero-note { display: none; }
  .chalkboard { margin: 10px 4px; }
  .chalk-item { grid-template-columns: 74px minmax(0, 1fr); gap: 0.8rem; }
  .ci-thumb { width: 74px; height: 74px; }
  .ci-name { font-size: 1.7rem; }
  .ci-price { font-size: 1.5rem; }
  .ci-desc { font-size: 1.15rem; }
  .opt-grid { grid-template-columns: 1fr; }
  .opt-grid.days, .opt-grid.kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt.big .opt-img { height: 96px; }
  .timeline li { font-size: 0.66rem; }
  .pd-more-grid { grid-template-columns: 1fr; }
  .offer-main .btn, .config-cta .btn { width: 100%; }
  .review-row { grid-template-columns: 1fr auto; }
  .review-row dd { grid-column: 1 / -1; grid-row: 2; }
  .wiz-foot .est { display: none; }
  .tile-link { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .tl-img { width: 80px; height: 72px; }
}
.opt-sw .treat-art { width: 88%; height: 88%; stroke-width: 3; }
.tl-img .treat-art { width: 74%; height: 74%; }
@media (max-width: 560px) {
  .opt.big .opt-img .treat-art { width: 52px; height: 52px; }
  .opt.big .opt-img .no-photo-words { font-size: 1.05rem; }
}

/* Tap-a-day calendar (custom requests) */
.cal { max-width: 420px; padding: 0.9rem; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.cal-head b { font-size: 1.05rem; color: var(--wood); }
.cal-head .icon-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted); padding: 0.2rem 0; }
.cal-day { position: relative; aspect-ratio: 1; min-height: 40px; border: 1.5px solid transparent; border-radius: 10px; background: var(--cream); color: var(--charcoal); font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.cal-day:hover { border-color: var(--wood-light); }
.cal-day[aria-pressed="true"] { background: var(--wood); color: #fff; border-color: var(--wood); }
.cal-day[disabled] { background: transparent; color: var(--faint); opacity: 0.45; cursor: not-allowed; }
.cal-day.short::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #C99A3C; }
.cal-key { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted); }
.cal-key i { width: 6px; height: 6px; border-radius: 50%; background: #C99A3C; flex: none; }
/* A day Amanda is off ("Closed") or a full one: it says so, and can't be picked.
   Days are 44px tall and as wide as their column (width: 100%, or the square
   shape makes them as wide as they are tall, over the next day), with a
   little more room on a phone. 44px month arrows. */
.cal-day { width: 100%; min-height: 44px; }
.cal-head .icon-btn { width: 44px; height: 44px; }
@media (max-width: 560px) { .cal { padding: 0.5rem; } .cal-grid { gap: 2px; } }
/* A phone: the calendar runs edge to edge across the request card, so each day is 44px wide at 375px. */
@media (max-width: 420px) {
  .wiz-body .cal { margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.25rem)); border-left: 0; border-right: 0; border-radius: 0; }
}
.cal-day small { display: block; margin-top: 1px; font-size: 0.56rem; font-weight: 700; line-height: 1; }
.cal-day.shut[disabled] { opacity: 1; color: var(--faint); background: repeating-linear-gradient(135deg, var(--cream-dark) 0 4px, var(--white) 4px 8px); }
.cal-day.shut small { color: var(--st-new); }
.cal-key { flex-wrap: wrap; column-gap: 1rem; row-gap: 0.3rem; }
.cal-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.cal-key i.shut { width: 12px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--cream-dark) 0 3px, var(--white) 3px 6px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.field-label b { color: var(--wood); }

/* ---------- Payments ---------- */
.pay-box { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--white); }
.pay-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; }
.pay-sum { font-size: 1.5rem; line-height: 1.1; color: var(--wood); font-variant-numeric: tabular-nums; }
.pay-done { font-size: 0.95rem; }
.pay-box .fine { margin-top: 0.6rem; }
@media (max-width: 560px) { .pay-row .btn { flex: 1 1 100%; } }

/* ---------- Gift shop ---------- */
/* Room for a sixth tab (Shop only shows while something is on the shelf).
   The header's tabs stay compact up to 1100px, and between the phone tab
   bar and 900px the logo stands on its own, without the script name. */
@media (max-width: 1100px) {
  .site-tabs a { padding: 0 0.55rem; font-size: 0.88rem; }
  .site-tabs .tab-mark { left: 0.55rem; right: 0.55rem; }
  .acct-btn .label, .bag-btn .label { display: none; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .brand-name { display: none; }
}
@media (max-width: 760px) {
  .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .tabbar a { min-width: 0; }
  .tabbar a > span:not(.dot-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
#view-shop .view-head h2 .script { font-size: 1.1em; line-height: 1; }

/* Each item is a card: its photo, a kraft price tag, how many are left, and Add to order. */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; }
.gift {
  display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; padding: 0.85rem 0.85rem 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease;
}
.gift:hover { box-shadow: var(--shadow); }
.gift-media { display: grid; gap: 0.55rem; min-width: 0; }
.gift-pic {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden;
  border: 0; border-radius: 12px; background: var(--cream); cursor: zoom-in;
}
.gift-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.gift-pic:hover img { transform: scale(1.04); }
.gift-pic.is-empty { cursor: default; background: radial-gradient(ellipse 60% 55% at 50% 55%, var(--white), var(--cream) 78%); }
.gift-pic.is-empty svg { width: 32%; height: 32%; color: var(--wood-light); opacity: 0.45; }
.gift-thumbs { display: flex; gap: 0.45rem; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.gift-thumbs::-webkit-scrollbar { display: none; }
.gift-thumb { flex: none; width: 48px; height: 48px; padding: 0; overflow: hidden; border-radius: 10px; border: 2px solid transparent; background: var(--cream); cursor: pointer; }
.gift-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gift-thumb[aria-pressed="true"] { border-color: var(--wood); }
.gift-body { flex: 1; display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.gift-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.gift-line h3 { min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--wood); overflow-wrap: anywhere; }
/* A little hang tag, with its hole punched on the left */
.gift-price {
  position: relative; flex: none; margin-top: 0.2rem; padding: 0.2rem 0.65rem 0.2rem 1.2rem;
  background: var(--butter); color: var(--wood); font-weight: 700; font-size: 1rem; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  clip-path: polygon(0.6rem 0, 100% 0, 100% 100%, 0.6rem 100%, 0 50%);
  transform: rotate(-2deg);
}
.gift-price::before { content: ''; position: absolute; left: 0.5rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--white); }
.gift-desc { color: var(--muted); font-size: 0.93rem; line-height: 1.5; overflow-wrap: anywhere; }
.gift-stock { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--sage-dark); }
.gift-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.gift-stock.low { color: var(--st-baking); }
.gift-stock.out { color: var(--muted); }
.gift-foot { padding-top: 0.85rem; border-top: 1px dashed var(--line-strong); }
.gift-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.gift-add .btn { flex: 1 1 9rem; padding-inline: 1rem; }
.gift .stepper button { width: 44px; height: 44px; }
.gift-note { padding: 0.6rem 0; text-align: center; color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.gift.is-out .gift-pic img { filter: grayscale(1); opacity: 0.55; }
.gift.is-out .gift-line h3, .gift.is-out .gift-price { opacity: 0.6; }
/* Phones: the photo beside the words, so more fit on the screen */
@media (max-width: 560px) {
  .gift-grid { gap: 0.85rem; }
  .gift { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.75rem 0.9rem; padding: 0.75rem; }
  .gift-pic { aspect-ratio: 1; }
  .gift-thumb { width: 44px; height: 44px; }
  .gift-line { flex-direction: column; gap: 0.35rem; }
  .gift-line h3 { font-size: 1.3rem; }
  .gift-foot { grid-column: 1 / -1; padding-top: 0.75rem; }
}

/* ============================================================
   Motion
   ============================================================ */

/* ---------- Tab, step and sub-tab changes (move() in shop.js) ----------
   move() puts data-move (page | cat | step | sheet) and data-dir (fwd | back)
   on <html> for the change, and the browser's View Transitions animate
   between the two pictures. Only what is named here moves; the rest swaps
   at once. Named parts draw above the rest of the page while they move,
   so nothing behind the checkout is named during a checkout step. */
html[data-move]:not([data-move="sheet"]) .site-header { view-transition-name: site-header; }
html[data-move]:not([data-move="sheet"]) .tabbar { view-transition-name: tabbar; }
html[data-move]:not([data-move="sheet"]) .tab-mark { view-transition-name: tab-mark; }
html[data-move]:not([data-move="sheet"]) .tab-pill { view-transition-name: tab-pill; }
html[data-move]:not([data-move="sheet"]) .sub-mark { view-transition-name: sub-mark; }
html[data-move] .toasts { view-transition-name: toasts; }   /* keeps toasts on top */
html[data-move="cat"] #view-menu .config,
html[data-move="step"] .wiz-body,
html[data-move="sheet"] .sheet-body { view-transition-name: slide; }
html[data-move="sheet"] .sheet-head .bar i { view-transition-name: step-bar; }

/* The header and tab bar stay put. Outside page changes, so does the page. */
html[data-move]::view-transition-old(site-header), html[data-move]::view-transition-old(tabbar), html[data-move]::view-transition-old(toasts),
html[data-move]:not([data-move="page"])::view-transition-old(root) { animation: none; opacity: 0; }
html[data-move]::view-transition-new(site-header), html[data-move]::view-transition-new(tabbar), html[data-move]::view-transition-new(toasts),
html[data-move]:not([data-move="page"])::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Pages: like an app, the new screen slides in over the old one, which
   drifts back a little and dims. Going back, the top screen slides away. */
html[data-move="page"]::view-transition-old(root),
html[data-move="page"]::view-transition-new(root) { mix-blend-mode: normal; }
html[data-move="page"]::view-transition-old(root) { animation: 560ms var(--spring) both push-under; }
html[data-move="page"]::view-transition-new(root) { animation: 560ms var(--spring) both push-in; box-shadow: var(--shadow-edge); }
html[data-move="page"][data-dir="back"]::view-transition-old(root) { z-index: 1; animation: 460ms var(--ease-out) both push-out; box-shadow: var(--shadow-edge); }
html[data-move="page"][data-dir="back"]::view-transition-new(root) { animation: 560ms var(--spring) both push-back; box-shadow: none; }
@keyframes push-in { from { transform: translateX(100%); } }
@keyframes push-under { to { transform: translateX(-30%); filter: brightness(0.88); } }
@keyframes push-out { to { transform: translateX(100%); } }
@keyframes push-back { from { transform: translateX(-30%); filter: brightness(0.88); } }

/* Steps and menu categories: the new one slides in from the side you're
   heading to while the old one fades away. Steps stay inside their card. */
html[data-move]::view-transition-group(slide) { animation: none; }
html[data-move="step"]::view-transition-group(slide),
html[data-move="sheet"]::view-transition-group(slide) { overflow: clip; }
html[data-move]::view-transition-old(slide) { animation: 200ms var(--ease-in) both slide-fade-out, 420ms var(--ease-out) both slide-out; mix-blend-mode: normal; }
html[data-move]::view-transition-new(slide) { animation: 240ms var(--ease-out) 40ms both slide-fade-in, 560ms var(--spring) both slide-in; mix-blend-mode: normal; }
html[data-move][data-dir="back"]::view-transition-old(slide) { animation-name: slide-fade-out, slide-out-back; }
html[data-move][data-dir="back"]::view-transition-new(slide) { animation-name: slide-fade-in, slide-in-back; }
/* The old one fades as it drifts a little way; the new one slides in over it. */
@keyframes slide-fade-out { to { opacity: 0; } }
@keyframes slide-fade-in { from { opacity: 0; } }
@keyframes slide-out { to { transform: translateX(-24%); } }
@keyframes slide-in { from { transform: translateX(65%); } }
@keyframes slide-out-back { to { transform: translateX(24%); } }
@keyframes slide-in-back { from { transform: translateX(-65%); } }

/* The highlight under the current tab glides to the new one. */
html[data-move]::view-transition-group(tab-mark),
html[data-move]::view-transition-group(sub-mark),
html[data-move]::view-transition-group(step-bar) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
html[data-move]::view-transition-group(tab-pill) { animation-duration: 480ms; animation-timing-function: var(--ease-spring); }
html[data-move]::view-transition-old(tab-mark), html[data-move]::view-transition-old(sub-mark),
html[data-move]::view-transition-old(tab-pill), html[data-move]::view-transition-old(step-bar) { animation: none; opacity: 0; }
html[data-move]::view-transition-new(tab-mark), html[data-move]::view-transition-new(sub-mark),
html[data-move]::view-transition-new(tab-pill), html[data-move]::view-transition-new(step-bar) { animation: none; width: 100%; height: 100%; mix-blend-mode: normal; }

/* The phone tab bar's current tab sits on a soft pill. */
.tab-pill { display: none; }
@media (max-width: 760px) {
  .tabbar .tab-pill {
    display: block; position: absolute; top: calc(0.35rem - 4px); left: 50%;
    width: 56px; height: 30px; margin-left: -28px; border-radius: 999px; background: var(--terracotta-wash);
  }
  .tabbar a svg { position: relative; }
}

/* ---------- Taps ---------- */
.btn:active:not(:disabled), .opt:active:not(:disabled), .tile-link:active, .subtab:active,
.tabbar a:active, .acct-btn:active, .bag-btn:active, .stepper button:active:not(:disabled), .pd-more-card:active { transform: scale(0.97); }
.subtab, .tabbar a, .acct-btn, .bag-btn, .stepper button { transition: transform 0.15s var(--ease-out); }

/* The tile you just picked: its check mark pops and a soft ring fades. */
/* (#view-menu: outranks the scroll "rise" below, which also uses animation.) */
.opt.picked[aria-checked="true"], #view-menu .opt.picked[aria-checked="true"] { animation: tile-pick 0.5s var(--ease-out); }
.opt.picked[aria-checked="true"]::after { animation: check-pop 0.45s var(--ease-spring); }
@keyframes tile-pick { from { box-shadow: inset 0 0 0 1px var(--wood), 0 0 0 7px var(--butter-wash); } }
@keyframes check-pop { from { scale: 0; } }

/* Something went in the bag: the count bounces. */
.bag-count.bump { animation: bump 0.5s var(--ease-spring); }
@keyframes bump { 0% { scale: 1; } 35% { scale: 1.45; } 100% { scale: 1; } }

/* The menu's big picture pops in only when it changes (stage() in shop.js). */
.stage.still img, .stage.still .no-photo { animation: none; }

/* ---------- Menu: the picture stays beside the choices on wider screens ---------- */
@media (min-width: 761px) {
  #view-menu .config > :first-child { position: sticky; top: calc(69px + 1.5rem); }
}

/* ---------- Menu on phones: the total and Add button float above the tab bar ---------- */
@media (max-width: 760px) {
  .config-cta {
    position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5;
    flex-wrap: nowrap; margin: 1.25rem -16px 0; padding: 0.75rem 16px;
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .config-cta .btn { width: auto; flex: none; }
  .config-total { min-width: 0; }
  .config-total b { font-size: 1.35rem; }
  .config-total span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Toasts sit above the floating bar instead of over its button. */
  body:has(#view-menu:not([hidden])) { --toast-lift: 150px; }
}

/* ---------- Checkout on phones: a card that rises over the page ----------
   The page shrinks back and rounds its corners behind it (cardUp() in shop.js
   puts sheet-up, then sheet-closing, on <html> and remembers the scroll spot). */
.sheet.open { transition: transform 0.6s var(--spring), visibility 0s; }
.sheet { transition: transform 0.34s var(--ease-in), visibility 0s 0.34s; }
@media (max-width: 560px) {
  /* Reaches 40px below the screen, so the spring's little overshoot never shows a gap. */
  .sheet { top: 26px; bottom: -40px; padding-bottom: 40px; border-radius: 18px 18px 0 0; overflow: hidden; transform: translateY(100%); }
  .sheet-foot { box-shadow: 0 40px 0 var(--white); }
  .sheet-scrim { background: transparent; }
  .tabbar { transition: transform 0.34s var(--ease-out); }
  html.sheet-up .tabbar { transform: translateY(100%); }
}
@property --page-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .page { background: var(--shiplap); transform-origin: 50% var(--sheet-y, 0px); transition: transform 0.5s var(--ease-out), --page-r 0.5s var(--ease-out), filter 0.5s var(--ease-out); }
  html.sheet-up .page { transform: translateY(14px) scale(0.92); --page-r: 14px; filter: brightness(0.82); }
  /* Clip at the top of the screen so the rounded corners show there, not at the top of the page. */
  html.sheet-up .page, html.sheet-closing .page { clip-path: inset(var(--sheet-y, 0px) 0 0 0 round var(--page-r)); }
  html.sheet-up body, html.sheet-closing body { background: var(--chalk-board); }
}

/* ---------- Scrolling: things rise into place as they come on screen ----------
   Scroll-driven, so nothing replays when the page redraws. Browsers that
   can't do it just show everything. */
@keyframes rise { from { opacity: 0; translate: 0 28px; scale: 0.97; } }
@keyframes stage-away { to { opacity: 0.35; scale: 0.9; translate: 0 16%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #view-menu .opt-grid > .opt, #view-week .chalk-item, #view-home .tile-link, #view-home .meet,
    #view-shop .gift, .pd-tabs, .pd-more-card {
      animation: rise linear both;
      animation-timeline: view(block 0px var(--reveal-end, 0px));
      animation-range: cover 0% cover 22%;
    }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
    body { --reveal-end: 66px; }
    #view-menu { --reveal-end: 150px; }
    /* The big picture eases back as it scrolls away under the header. */
    #view-menu .stage {
      animation: stage-away linear both;
      animation-timeline: view(block 61px 0px);
      animation-range: exit 0% exit 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}