/* Shared brand assets, storefront integration and listing layout, independent of theme. */
:root {
  --store-button-radius: 999px;
  --store-background: var(--paper);
  --action-ink: #fff;
}
.brand__lockup { display: block; width: 164px; height: auto; }
[data-theme="dark"] .brand__lockup { background: white; padding: 5px 8px; border-radius: 8px; }
/* Complete store listings reuse the normal gallery, sticky buy box and checkout. */
.item--offering { padding-top: 8px; }
.item--offering .item__head { margin-bottom: 26px; }
.item--offering .item__title { max-width: 30ch; font-size: clamp(30px, 3.5vw, 44px); }
.item--offering .item__type { color: var(--cobalt); font-size: 13px; }
.item__lede { color: var(--ink-2); font-size: 18px; margin-top: 12px; max-width: 60ch; }
.item__new { color: var(--ink-3); font-size: 13px; }
.item--offering .item__art .sticker { display: none; }
.item--offering .buybox { padding: 24px; }
.offering-buy-label { font-size: 12px; font-weight: 700; color: var(--cobalt); }
.item--offering .item__content { gap: 32px; }
.item--offering .section { gap: 18px; }
.item--offering .section__title { font-size: 24px; }
.offering-audience { border-left: 3px solid var(--cobalt); padding: 6px 0 6px 16px; color: var(--ink-2); }
.offering-inclusions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.offering-inclusion { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.offering-check { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--cobalt-soft); color: var(--cobalt); }
.offering-check .icon { width: 16px; height: 16px; }
.offering-inclusion h3, .offering-steps h3 { font-size: 16px; line-height: 1.35; }
.offering-inclusion p, .offering-steps p { font-size: 14px; margin-top: 8px; }
.offering-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; }
.offering-step-number { display: block; color: var(--cobalt); font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.offering-delivery { display: flex; align-items: flex-start; gap: 12px; background: var(--cobalt-soft); padding: 18px; border-radius: 10px; color: var(--ink-2); font-size: 14px; }
.offering-delivery .icon { color: var(--cobalt); margin-top: 2px; }
.offering-faqs { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.offering-faq + .offering-faq { border-top: 1px solid var(--line); }
.offering-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; list-style: none; padding: 18px 20px; font-weight: 700; cursor: pointer; }
.offering-faq summary::-webkit-details-marker { display: none; }
.offering-faq summary .icon { color: var(--cobalt); width: 18px; height: 18px; transition: transform .15s; }
.offering-faq[open] summary .icon { transform: rotate(45deg); }
.offering-faq > p { padding: 0 20px 20px; font-size: 14px; }
.offering-faq summary:hover { background: var(--paper); }
.offering-faq summary:focus-visible { outline-offset: -3px; }
@media (max-width: 1100px) { .topbar__inner { gap: 18px; } }
@media (max-width: 720px) {
  .views { display: none; }
  .item__lede { font-size: 16px; }
  .offering-inclusions, .offering-steps { grid-template-columns: minmax(0, 1fr); }
  .offering-inclusion { padding: 16px; }
  .item--offering .buybox { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .offering-faq summary .icon { transition: none; } }
@media (max-width: 1000px) {
  .brand__lockup { width: 34px; height: 34px; object-fit: contain; }
  [data-theme="dark"] .brand__lockup { padding: 0; background: transparent; }
}
@media (min-width: 721px) and (max-width: 820px) {
  .search__text { display: none; }
  .search__trigger { width: 40px; padding: 0; justify-content: center; }
}

/* Auth and navigation use the same shell on every route. */
body.is-guest .tabbar { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 719px) {
  .topbar__actions { gap: 4px; }
  .topbar__inner { gap: 8px; }
}