/* =====================================================================
   Sweet Haven — site additions (extends storefront.css + colors_and_type.css)
   New surfaces: values, reviews, callout, gallery, custom builder,
   checkout, confirmation, newsletter, mobile nav. Accent theming hooks.
   ===================================================================== */

/* ---- accent theming hook (driven by Tweaks) ----------------------- */
:root {
  --sh-accent:        var(--strawberry-300);
  --sh-accent-strong: var(--strawberry-500);
  --sh-accent-soft:   var(--strawberry-100);
  --sh-accent-ink:    var(--strawberry-700);
  --sh-radius-scale:  1;
}
/* re-point the kit's primary actions at the tweakable accent */
.sh-btn.primary { background: var(--sh-accent); }
.sh-btn.primary:hover { background: var(--sh-accent-strong); }
.sh-add { background: var(--sh-accent); }
.sh-add:hover { background: var(--sh-accent-strong); }
.sh-cart-dot { background: var(--sh-accent-strong); }
.sh-hero-title em { color: var(--sh-accent-strong); }
.sh-logo-mark em { color: var(--sh-accent-strong); }

/* ---- shared page scaffolding -------------------------------------- */
.sh-page { max-width: 1180px; margin: 0 auto; padding: 56px 32px 90px; }
.sh-page-title { font: var(--display-2); color: var(--ink); margin: 10px 0 0; letter-spacing: var(--track-display); }
.sh-page-lede { font: var(--body-lg); color: var(--ink-soft); max-width: 560px; margin: 18px 0 0; }
.sh-menu-note { font: var(--body); color: var(--ink-muted); margin: 8px 0 0; max-width: 460px; }
.sh-input {
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 12px 14px; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sh-input:focus { outline: none; border-color: var(--sh-accent-strong); box-shadow: 0 0 0 3px var(--sh-accent-soft); }
.sh-input::placeholder { color: var(--ink-muted); }
.sh-optional { color: var(--ink-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sh-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sh-field-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sh-select-wrap { position: relative; }
.sh-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.sh-select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.sh-btn.lg { padding: 16px 30px; font-size: 16px; }

/* ---- hero meta row ------------------------------------------------ */
.sh-hero-meta { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.sh-hero-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-soft); }
.sh-hero-meta span :first-child { color: var(--caramel-400); }

/* ---- values strip ------------------------------------------------- */
.sh-values { background: var(--bg-sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-values-inner { max-width: 1180px; margin: 0 auto; padding: 56px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.sh-value { text-align: left; }
.sh-value-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r-pill);
  background: var(--bg-elevated); color: var(--chocolate-500);
  box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.sh-value-title { font: var(--h3); color: var(--ink); margin: 0 0 8px; }
.sh-value-text { font: var(--body); color: var(--ink-soft); margin: 0; }

/* ---- reviews ------------------------------------------------------ */
.sh-reviews { max-width: 1180px; margin: 0 auto; padding: 80px 32px; }
.sh-reviews-head { text-align: center; margin-bottom: 40px; }
.sh-reviews-head .sh-section-title { margin-top: 6px; }
.sh-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sh-review {
  background: var(--bg-elevated); border-radius: var(--r-lg); padding: 28px 26px;
  box-shadow: var(--shadow-sm); margin: 0; display: flex; flex-direction: column; gap: 14px;
}
.sh-stars { display: flex; gap: 3px; }
.sh-review blockquote { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 22px; line-height: 1.35; color: var(--ink); margin: 0; }
.sh-review figcaption { display: flex; flex-direction: column; margin-top: auto; }
.sh-review figcaption strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.sh-review figcaption span { font-size: 12.5px; color: var(--ink-muted); }

/* ---- custom callout (home) ---------------------------------------- */
.sh-callout { max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px; }
.sh-callout-inner {
  background: var(--bg-elevated); border-radius: var(--r-xl); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.1fr; box-shadow: var(--shadow-md);
}
.sh-callout-photo { min-height: 360px; }
.sh-callout-copy { padding: 56px 52px; display: flex; flex-direction: column; align-items: flex-start; }
.sh-callout-title { font: var(--h1); color: var(--ink); margin: 12px 0 16px; }
.sh-callout-copy p { font: var(--body-lg); color: var(--ink-soft); margin: 0 0 28px; }

/* ---- gallery teaser (home) ---------------------------------------- */
.sh-teaser { max-width: 1180px; margin: 0 auto; padding: 0 32px 80px; }
.sh-teaser-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.sh-teaser-head .sh-section-title { margin-top: 6px; }
.sh-teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sh-teaser-cell { aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--cream-200); box-shadow: var(--shadow-sm); }

/* ---- newsletter --------------------------------------------------- */
.sh-news { background: var(--bg-inverse); }
.sh-news-inner {
  max-width: 1180px; margin: 0 auto; padding: 64px 32px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
.sh-news .sh-overline { color: var(--caramel-300); }
.sh-news .sh-rule { background: var(--caramel-400); }
.sh-news-title { font: var(--h1); color: var(--cream-50); margin: 10px 0 12px; }
.sh-news-sub { font: var(--body-lg); color: var(--cream-300); margin: 0; max-width: 460px; }
.sh-news-form { display: flex; gap: 12px; }
.sh-news-form .sh-input { background: rgba(255,255,255,.06); border-color: rgba(239,232,216,.28); color: var(--cream-50); }
.sh-news-form .sh-input::placeholder { color: var(--cream-400); }
.sh-news-form .sh-input:focus { border-color: var(--sh-accent); box-shadow: 0 0 0 3px rgba(229,173,168,.25); }
.sh-news-form .sh-btn { white-space: nowrap; }
.sh-news-done { display: inline-flex; align-items: center; gap: 10px; color: var(--cream-50); font: var(--body-lg); }
.sh-news-done :first-child { color: var(--pistachio-300); }

/* ---- custom cakes page -------------------------------------------- */
.sh-custom-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.sh-custom-hero-art { height: 380px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.sh-custom-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.sh-custom-steps span { display: flex; align-items: center; gap: 12px; font: var(--body); color: var(--ink-soft); }
.sh-step-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--r-pill); font-style: normal;
  background: var(--sh-accent-soft); color: var(--sh-accent-ink); font-size: 13px; font-weight: 600;
}
.sh-builder { display: grid; grid-template-columns: 1.4fr .8fr; gap: 40px; align-items: start; }
.sh-builder-form { display: flex; flex-direction: column; }
.sh-chip-row, .sh-size-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sh-size-row { gap: 14px; }
.sh-size-card {
  flex: 1; min-width: 130px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-elevated); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md); padding: 16px 18px;
  transition: all var(--dur) var(--ease);
}
.sh-size-card:hover { border-color: var(--caramel-300); }
.sh-size-card.is-active { border-color: var(--sh-accent-strong); box-shadow: 0 0 0 3px var(--sh-accent-soft); }
.sh-size-label { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); }
.sh-size-serves { font-size: 12.5px; color: var(--ink-muted); }
.sh-size-price { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--chocolate-600); margin-top: 4px; }
.sh-segment.full { display: flex; width: 100%; }
.sh-segment.full .sh-seg-btn { flex: 1; padding: 10px 8px; }

.sh-builder-summary {
  position: sticky; top: 92px;
  background: var(--bg-elevated); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
.sh-summary-photo { height: 170px; border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; background: var(--cream-200); }
.sh-summary-title { font: var(--h3); color: var(--ink); margin: 6px 0 14px; }
.sh-summary-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; }
.sh-summary-list li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sh-summary-list li span:first-child { color: var(--ink-muted); }
.sh-summary-list li span:last-child { color: var(--ink); text-align: right; font-weight: 500; }
.sh-summary-foot .sh-total { margin: 4px 0 14px; }

/* ---- gallery page ------------------------------------------------- */
.sh-gallery-head { text-align: center; margin-bottom: 40px; }
.sh-gallery-head .sh-overline { justify-content: center; }
.sh-gallery-head .sh-page-title { margin-left: auto; margin-right: auto; }
.sh-gallery-head .sh-page-lede { margin-left: auto; margin-right: auto; text-align: center; }
.sh-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 16px; }
.sh-gallery-cell { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--cream-200); box-shadow: var(--shadow-sm); margin: 0; }
.sh-gallery-cell.span-tall { grid-row: span 2; }
.sh-gallery-cell.span-wide { grid-column: span 2; }
.sh-gallery-cell figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  font: var(--label); color: var(--cream-50); letter-spacing: var(--track-label);
  background: linear-gradient(to top, rgba(46,37,27,.7), transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.sh-gallery-cell:hover figcaption { opacity: 1; }
.sh-gallery-cta { text-align: center; margin-top: 64px; }
.sh-gallery-cta p { font: var(--h2); color: var(--ink); margin: 0 0 20px; }
.sh-gallery-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- checkout ----------------------------------------------------- */
.sh-back { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; color: var(--ink-soft); font: var(--body-sm); font-family: var(--font-sans); margin-bottom: 20px; padding: 0; }
.sh-back:hover { color: var(--ink); }
.sh-checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; margin-top: 28px; }
.sh-fs { border: none; padding: 0; margin: 0 0 28px; }
.sh-fs legend { font: var(--title); color: var(--ink); margin-bottom: 16px; padding: 0; }
.sh-method-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sh-method {
  cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-elevated); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md); padding: 18px 20px; color: var(--chocolate-500);
  transition: all var(--dur) var(--ease);
}
.sh-method:hover { border-color: var(--caramel-300); }
.sh-method.is-active { border-color: var(--sh-accent-strong); box-shadow: 0 0 0 3px var(--sh-accent-soft); }
.sh-method-t { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink); margin-top: 6px; }
.sh-method-s { font-size: 12.5px; color: var(--ink-muted); }
.sh-secure { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-muted); margin: 12px 0 0; }
.sh-transfer { background: var(--bg-sunken); border-radius: var(--r-md); padding: 18px 20px; }
.sh-transfer-lead { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.sh-transfer-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sh-transfer-row:last-of-type { border-bottom: none; }
.sh-transfer-row span:first-child { color: var(--ink-muted); }
.sh-transfer-row span:last-child { color: var(--ink); font-weight: 500; }
.sh-transfer .sh-secure { margin-top: 14px; }

.sh-order-summary {
  position: sticky; top: 92px; background: var(--bg-elevated);
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
.sh-order-lines { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sh-order-line { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 14px; }
.sh-order-qty { color: var(--ink-muted); font-weight: 600; }
.sh-order-name { color: var(--ink); }
.sh-order-name em { display: block; font-style: normal; font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.sh-order-price { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--chocolate-600); }
.sh-order-totals { display: flex; flex-direction: column; gap: 10px; }
.sh-order-totals > div { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); }
.sh-order-grand { padding-top: 12px; border-top: 1px solid var(--line); }
.sh-order-grand span:first-child { font: var(--title); color: var(--ink); }

.sh-empty-page { text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--ink-muted); }
.sh-empty-page .sh-section-title { margin: 0; }
.sh-empty-page p { font: var(--body); margin: 0 0 10px; }

/* ---- confirmation ------------------------------------------------- */
.sh-confirm { display: flex; justify-content: center; }
.sh-confirm-card { max-width: 560px; width: 100%; text-align: center; background: var(--bg-elevated); border-radius: var(--r-xl); padding: 48px 44px; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.sh-confirm-check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-pill); background: var(--pistachio-200); color: var(--pistachio-500); margin-bottom: 20px; }
.sh-confirm .sh-overline { justify-content: center; }
.sh-confirm-title { font: var(--h1); color: var(--ink); margin: 8px 0 12px; }
.sh-confirm-sub { font: var(--body-lg); color: var(--ink-soft); margin: 0 0 28px; }
.sh-confirm-meta { display: flex; justify-content: center; gap: 0; background: var(--bg-sunken); border-radius: var(--r-md); padding: 18px; margin-bottom: 22px; }
.sh-confirm-meta > div { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; border-right: 1px solid var(--line); }
.sh-confirm-meta > div:last-child { border-right: none; }
.sh-confirm-k { font: var(--overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--ink-muted); }
.sh-confirm-v { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--ink); }
.sh-confirm-lines { text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 0 0 22px; }
.sh-confirm-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- mobile nav --------------------------------------------------- */
.sh-only-sm { display: none; }
.sh-mobile-nav { display: none; }
@media (max-width: 860px) {
  .sh-nav { display: none; }
  .sh-hide-sm { display: none; }
  .sh-only-sm { display: inline-flex; }
  .sh-mobile-nav { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); background: rgba(239,232,216,.97); border-bottom: 1px solid var(--line); }
  [data-theme="dark"] .sh-mobile-nav { background: rgba(26,21,15,.97); }
  .sh-mobile-nav.open { max-height: 300px; }
  .sh-mobile-link { padding: 14px 32px; font-size: 16px; color: var(--ink-soft); cursor: pointer; border-top: 1px solid var(--line); }
  .sh-mobile-link.is-active { color: var(--ink); }
}

/* ---- responsive collapses ----------------------------------------- */
@media (max-width: 980px) {
  .sh-values-inner { grid-template-columns: 1fr; gap: 26px; }
  .sh-reviews-grid { grid-template-columns: 1fr; }
  .sh-callout-inner { grid-template-columns: 1fr; }
  .sh-callout-photo { min-height: 240px; }
  .sh-teaser-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-news-inner { grid-template-columns: 1fr; }
  .sh-custom-hero { grid-template-columns: 1fr; }
  .sh-custom-hero-art { height: 280px; }
  .sh-builder { grid-template-columns: 1fr; }
  .sh-builder-summary { position: static; }
  .sh-checkout-grid { grid-template-columns: 1fr; }
  .sh-order-summary { position: static; }
  .sh-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sh-field-2col { grid-template-columns: 1fr; }
  .sh-method-row { grid-template-columns: 1fr; }
  .sh-news-form { flex-direction: column; }
  .sh-confirm-meta { flex-direction: column; gap: 14px; }
  .sh-confirm-meta > div { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .sh-confirm-meta > div:last-child { border-bottom: none; }
  .sh-gallery { grid-template-columns: 1fr; }
  .sh-gallery-cell.span-wide { grid-column: span 1; }
}

/* =====================================================================
   DARK MODE — the kit hardcodes its own surfaces; the new surfaces here
   lean on --bg-elevated / --bg-sunken / cream-200, which stay light by
   default. Re-point them to warm dark so light ink reads on them.
   ===================================================================== */
[data-theme="dark"] {
  --bg-elevated: #2a2118;
  --bg-sunken:   #241d15;
}
[data-theme="dark"] .sh-teaser-cell,
[data-theme="dark"] .sh-summary-photo,
[data-theme="dark"] .sh-gallery-cell { background: #342a1f; }
[data-theme="dark"] .sh-confirm-check { background: rgba(157,155,108,.22); color: var(--pistachio-300); }
[data-theme="dark"] .sh-step-n { background: rgba(216,144,138,.18); color: var(--strawberry-300); }
[data-theme="dark"] .sh-value-icon { color: var(--cream-200); }
[data-theme="dark"] .sh-method,
[data-theme="dark"] .sh-size-card { color: var(--cream-200); }

/* ---- "from" price label ------------------------------------------- */
.sh-from { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; font-style: normal;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-right: 3px; }

/* ---- animated brand placeholder (for items without a photo yet) --- */
.sh-photo-fallback { position: relative; width: 100%; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--caramel-200), var(--cream-200) 60%, var(--strawberry-100));
  color: var(--chocolate-500); }
.sh-fallback-name { font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 22px; color: var(--chocolate-600); text-align: center; padding: 0 16px; }
.sh-fallback-shimmer { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform: translateX(-120%); animation: sh-shimmer 3s var(--ease) infinite; }
@keyframes sh-shimmer { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .sh-fallback-shimmer { animation: none; } }
[data-theme="dark"] .sh-photo-fallback { background: linear-gradient(135deg, #3a2f22, #2a2118 60%, #34241f); color: var(--caramel-300); }
[data-theme="dark"] .sh-fallback-name { color: var(--cream-200); }

/* ---- Date picker ------------------------------------------------------- */
.sh-dp { position: relative; }
.sh-dp-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; cursor: pointer; font-family: var(--font-sans);
}
.sh-dp-trigger.is-empty .sh-dp-value { color: var(--ink-muted); }
.sh-dp-trigger.is-open { border-color: var(--sh-accent-strong); box-shadow: 0 0 0 3px var(--sh-accent-soft); }
.sh-dp-icon { color: var(--ink-soft); flex: none; }
.sh-dp-trigger.is-open .sh-dp-icon { color: var(--sh-accent-strong); }

.sh-dp-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: min(296px, calc(100vw - 36px)); padding: 14px;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: sh-dp-in 180ms var(--ease) both;
}
@keyframes sh-dp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sh-dp-pop { animation: none; } }

.sh-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sh-dp-title {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  color: var(--ink); letter-spacing: .01em;
}
.sh-dp-title em { font-style: italic; color: var(--ink-soft); font-weight: 400; }
.sh-dp-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sh-dp-nav:hover:not(:disabled) { background: var(--cream-200); color: var(--ink); border-color: var(--line-strong); }
.sh-dp-nav:disabled { opacity: .3; cursor: not-allowed; }

/* thin caramel rule under the header — the design system signature device */
.sh-dp-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin: 10px 0 6px; padding-top: 10px; border-top: 1px solid var(--caramel-200);
}
.sh-dp-dow span {
  text-align: center; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--ink-muted);
}

.sh-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sh-dp-cell {
  aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 14px; color: var(--ink); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sh-dp-cell.is-blank { pointer-events: none; }
.sh-dp-cell:hover:not(:disabled):not(.is-selected) { background: var(--cream-200); }
.sh-dp-cell.is-today { box-shadow: inset 0 0 0 1px var(--caramel-400); color: var(--caramel-500); }
.sh-dp-cell.is-selected { background: var(--sh-accent-strong); color: var(--cream-50); font-weight: 600; }
.sh-dp-cell:disabled { color: var(--ink-muted); opacity: .4; cursor: not-allowed; }