@runwell/shopify-toolkit 0.18.0 → 0.21.0

package/modules/runwell-bundle-system/assets/runwell-bundle-system.css

@@ -0,0 +1,861 @@
+/* runwell-bundle-system: assets/runwell-bundle-system.css.
+   Styles for the bundle PDP and shared bundle UI. Scoped to the
+   .runwell-bundle-system namespace. Brand tokens come from
+   _shared/css-tokens (--runwell-primary, --runwell-accent,
+   --runwell-cream, --runwell-oat, --runwell-celadon, --runwell-blue,
+   --runwell-tertiary, plus radii and shadows).
+
+   Layout: mobile first at 375px, side-by-side at 1024px+.
+   Tap targets: 44px floor for any interactive element. */
+
+.runwell-bundle-system {
+  font-family: inherit;
+  color: inherit;
+}
+
+.runwell-bundle-system__inner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+@media (min-width: 1024px) {
+  .runwell-bundle-system__inner {
+    grid-template-columns: 1fr 1fr;
+    gap: 48px;
+    align-items: start;
+  }
+}
+
+.runwell-bundle-system__gallery-image {
+  width: 100%;
+  height: auto;
+  border-radius: var(--runwell-radius-md, 12px);
+  display: block;
+}
+
+.runwell-bundle-system__details {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.runwell-bundle-system__sale-prefix {
+  margin: 0;
+  font-size: 0.875rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--runwell-accent, currentColor);
+}
+
+.runwell-bundle-system__title {
+  margin: 0;
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-system__title {
+    font-size: 2.25rem;
+  }
+}
+
+.runwell-bundle-system__description {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  opacity: 0.85;
+}
+
+/* ---------- Quantity tiers (Mode A) ---------- */
+
+.runwell-bundle-system__form {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.runwell-bundle-system__tiers {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.runwell-bundle-system__tier {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  min-height: 44px;
+  border: 2px solid color-mix(in srgb, currentColor 12%, transparent);
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card, #fff);
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.runwell-bundle-system__tier:hover {
+  border-color: color-mix(in srgb, var(--runwell-accent, currentColor) 50%, transparent);
+}
+
+.runwell-bundle-system__tier-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.runwell-bundle-system__tier:has(.runwell-bundle-system__tier-input:checked) {
+  border-color: var(--runwell-accent, currentColor);
+  background: color-mix(in srgb, var(--runwell-accent, currentColor) 6%, var(--runwell-surface-card, #fff));
+}
+
+.runwell-bundle-system__tier-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.runwell-bundle-system__tier-row--prices {
+  justify-content: space-between;
+  font-size: 0.95rem;
+}
+
+.runwell-bundle-system__tier-qty {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.runwell-bundle-system__tier-savings-badge {
+  margin-left: auto;
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: var(--runwell-accent, currentColor);
+  color: var(--runwell-cream, #fff);
+}
+
+.runwell-bundle-system__tier-total {
+  font-weight: 700;
+  font-size: 1.05rem;
+}
+
+.runwell-bundle-system__tier-strikethrough {
+  text-decoration: line-through;
+  opacity: 0.55;
+  font-size: 0.9rem;
+}
+
+.runwell-bundle-system__tier-per-unit {
+  font-size: 0.85rem;
+  opacity: 0.7;
+  margin-left: auto;
+}
+
+.runwell-bundle-system__atc {
+  min-height: 48px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* ---------- Pricing block (shared, used by Mode B and bundle cards) ---------- */
+
+.runwell-bundle-system__pricing {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.runwell-bundle-system__pricing-current {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.runwell-bundle-system__pricing-strikethrough {
+  text-decoration: line-through;
+  opacity: 0.55;
+  font-size: 1rem;
+}
+
+.runwell-bundle-system__pricing-badge {
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: var(--runwell-accent, currentColor);
+  color: var(--runwell-cream, #fff);
+}
+
+/* ---------- Components list (Mode B) ---------- */
+
+.runwell-bundle-system__components {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card, #fff);
+  border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.runwell-bundle-system__components-heading {
+  margin: 0 0 4px 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.75;
+}
+
+.runwell-bundle-system__components-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.runwell-bundle-system__component {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  align-items: center;
+  gap: 10px;
+  font-size: 0.95rem;
+}
+
+.runwell-bundle-system__component-thumb {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: var(--runwell-radius-sm, 4px);
+  display: block;
+}
+
+.runwell-bundle-system__component-thumb--placeholder {
+  background: color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.runwell-bundle-system__component-qty {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+}
+
+.runwell-bundle-system__component-name {
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.runwell-bundle-system__component-price {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.runwell-bundle-system__component--empty {
+  grid-template-columns: 1fr;
+  opacity: 0.7;
+  font-size: 0.9rem;
+}
+
+@media (min-width: 1024px) {
+  .runwell-bundle-system__component-thumb,
+  .runwell-bundle-system__component-thumb--placeholder {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+/* ---------- Cross-supplier disclosure ---------- */
+
+.runwell-bundle-system__cross-supplier {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: var(--runwell-radius-sm, 4px);
+  background: color-mix(in srgb, var(--runwell-blue, currentColor) 8%, transparent);
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+.runwell-bundle-system__cross-supplier-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--runwell-blue, currentColor);
+  color: var(--runwell-cream, #fff);
+  font-size: 0.75rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+/* ---------- FOMO ---------- */
+
+.runwell-bundle-system__fomo {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  border-radius: var(--runwell-radius-sm, 4px);
+  background: color-mix(in srgb, var(--runwell-accent, currentColor) 8%, transparent);
+  font-size: 0.9rem;
+}
+
+.runwell-bundle-system__fomo p {
+  margin: 0;
+}
+
+.runwell-bundle-system__fomo-label {
+  opacity: 0.75;
+  margin-right: 6px;
+}
+
+.runwell-bundle-system__fomo-time {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.runwell-bundle-system__fomo-scarcity strong {
+  color: var(--runwell-accent, currentColor);
+}
+
+/* ---------- Free gift ---------- */
+
+.runwell-bundle-system__free-gift {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card-alt, #f5f5f5);
+}
+
+.runwell-bundle-system__free-gift-label {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.runwell-bundle-system__free-gift-product {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.runwell-bundle-system__free-gift-thumb {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: var(--runwell-radius-sm, 4px);
+}
+
+.runwell-bundle-system__free-gift-name {
+  flex: 1;
+  font-size: 0.95rem;
+}
+
+.runwell-bundle-system__free-gift-price {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 0.95rem;
+}
+
+/* ---------- Empty state ---------- */
+
+.runwell-bundle-system__empty {
+  margin: 0;
+  padding: 16px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card-alt, #f5f5f5);
+  font-size: 0.95rem;
+  opacity: 0.75;
+}
+
+/* ---------- Bundle card (shared by surfaces 1, 2, 3, 4, 6) ---------- */
+
+.runwell-bundle-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card, #fff);
+  text-decoration: none;
+  color: inherit;
+  transition: transform 200ms ease, box-shadow 200ms ease;
+  box-shadow: var(--runwell-shadow-card, 0 2px 8px rgba(0, 0, 0, 0.04));
+}
+
+.runwell-bundle-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--runwell-shadow-elevated, 0 8px 24px rgba(0, 0, 0, 0.06));
+}
+
+.runwell-bundle-card__media {
+  position: relative;
+  border-radius: var(--runwell-radius-sm, 4px);
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+}
+
+.runwell-bundle-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.runwell-bundle-card__badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: var(--runwell-accent, currentColor);
+  color: var(--runwell-cream, #fff);
+}
+
+.runwell-bundle-card__badge--inline {
+  position: static;
+  font-size: 0.7rem;
+}
+
+.runwell-bundle-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.runwell-bundle-card__title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.runwell-bundle-card__meta {
+  margin: 0;
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+
+.runwell-bundle-card__price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 0.95rem;
+}
+
+.runwell-bundle-card__price {
+  font-weight: 700;
+}
+
+.runwell-bundle-card__strikethrough {
+  text-decoration: line-through;
+  opacity: 0.55;
+  font-size: 0.85rem;
+}
+
+.runwell-bundle-card__cta {
+  margin-top: 4px;
+  font-size: 0.85rem;
+  text-align: center;
+  padding: 8px 12px;
+  min-height: 40px;
+}
+
+/* Card variants */
+.runwell-bundle-card--compact {
+  padding: 10px;
+}
+
+.runwell-bundle-card--compact .runwell-bundle-card__title {
+  font-size: 0.95rem;
+}
+
+.runwell-bundle-card--hero .runwell-bundle-card__title {
+  font-size: 1.25rem;
+}
+
+.runwell-bundle-card--hero .runwell-bundle-card__media {
+  aspect-ratio: 4 / 3;
+}
+
+/* ---------- Surface 2: PDP pairs-with ---------- */
+
+.runwell-bundle-pdp-pairs-with {
+  font-family: inherit;
+}
+
+.runwell-bundle-pdp-pairs-with__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.runwell-bundle-pdp-pairs-with__eyebrow {
+  margin: 0;
+  font-size: 0.85rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--runwell-accent, currentColor);
+}
+
+.runwell-bundle-pdp-pairs-with__heading {
+  margin: 0;
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+
+.runwell-bundle-pdp-pairs-with__cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-pdp-pairs-with__cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ---------- Surface 3: home curated stacks ---------- */
+
+.runwell-bundle-home-stacks {
+  font-family: inherit;
+}
+
+.runwell-bundle-home-stacks--bg-oat {
+  background: var(--runwell-oat, transparent);
+}
+
+.runwell-bundle-home-stacks--bg-celadon-tint {
+  background: color-mix(in srgb, var(--runwell-celadon, currentColor) 18%, white);
+}
+
+.runwell-bundle-home-stacks__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.runwell-bundle-home-stacks__eyebrow {
+  margin: 0;
+  font-size: 0.85rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--runwell-accent, currentColor);
+}
+
+.runwell-bundle-home-stacks__heading {
+  margin: 0;
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-home-stacks__heading {
+    font-size: 2.25rem;
+  }
+}
+
+.runwell-bundle-home-stacks__cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-home-stacks__cards {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .runwell-bundle-home-stacks__cards {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.runwell-bundle-home-stacks__empty {
+  margin: 0;
+  padding: 16px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card-alt, #f5f5f5);
+  font-size: 0.9rem;
+  opacity: 0.7;
+}
+
+/* ---------- Surface 4: cart drawer bundle cross-sell ---------- */
+
+.runwell-bundle-cart-xsell {
+  display: block;
+  margin-top: 12px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: color-mix(in srgb, var(--runwell-accent, currentColor) 8%, var(--runwell-surface-card, #fff));
+  padding: 12px;
+}
+
+.runwell-bundle-cart-xsell:empty {
+  display: none;
+}
+
+.runwell-bundle-cart-xsell__eyebrow {
+  margin: 0 0 8px 0;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--runwell-accent, currentColor);
+}
+
+.runwell-bundle-cart-xsell__card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.runwell-bundle-cart-xsell__thumb {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: var(--runwell-radius-sm, 4px);
+  flex-shrink: 0;
+}
+
+.runwell-bundle-cart-xsell__details {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.runwell-bundle-cart-xsell__name {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.runwell-bundle-cart-xsell__price {
+  margin: 0;
+  font-size: 0.85rem;
+  opacity: 0.75;
+}
+
+.runwell-bundle-cart-xsell__cta {
+  min-height: 44px;
+  padding: 0 14px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: var(--runwell-radius-sm, 4px);
+  border: 0;
+  background: var(--runwell-accent, currentColor);
+  color: var(--runwell-cream, #fff);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.runwell-bundle-cart-xsell__cta:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ---------- Surface 5: PDP bundle banner ---------- */
+
+.runwell-bundle-pdp-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  min-height: 44px;
+  border-radius: var(--runwell-radius-sm, 4px);
+  background: color-mix(in srgb, var(--runwell-celadon, currentColor) 18%, white);
+  color: inherit;
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: background-color 150ms ease;
+}
+
+.runwell-bundle-pdp-banner:hover,
+.runwell-bundle-pdp-banner:focus-visible {
+  background: color-mix(in srgb, var(--runwell-celadon, currentColor) 26%, white);
+}
+
+.runwell-bundle-pdp-banner__copy {
+  flex: 1;
+  font-weight: 500;
+}
+
+.runwell-bundle-pdp-banner__chevron {
+  font-size: 1.2rem;
+  font-weight: 700;
+  opacity: 0.6;
+}
+
+/* ---------- Surface 1: /bundles collection grid ---------- */
+
+.runwell-bundle-collection {
+  font-family: inherit;
+}
+
+.runwell-bundle-collection__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.runwell-bundle-collection__heading {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+}
+
+.runwell-bundle-collection__title {
+  margin: 0;
+  font-size: 2rem;
+  line-height: 1.1;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-collection__title {
+    font-size: 2.5rem;
+  }
+}
+
+.runwell-bundle-collection__subline {
+  margin: 0;
+  font-size: 1rem;
+  opacity: 0.75;
+}
+
+.runwell-bundle-collection__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-collection__grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 28px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .runwell-bundle-collection__grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
+  }
+}
+
+.runwell-bundle-collection__grid > .runwell-bundle-card--hero {
+  grid-column: 1 / -1;
+}
+
+.runwell-bundle-collection__empty {
+  margin: 0;
+  padding: 24px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card-alt, #f5f5f5);
+  font-size: 0.95rem;
+  opacity: 0.75;
+}
+
+.runwell-bundle-collection__empty code {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 0.85rem;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* ---------- Surface 6: collection page filter chip ---------- */
+
+.runwell-bundle-collection--filter-chip {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.runwell-bundle-collection__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 18px;
+  min-height: 44px;
+  align-self: flex-start;
+  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease;
+}
+
+.runwell-bundle-collection__chip[aria-pressed="true"] {
+  background: var(--runwell-accent, currentColor);
+  color: var(--runwell-cream, #fff);
+  border-color: var(--runwell-accent, currentColor);
+}
+
+.runwell-bundle-collection__chip-count {
+  opacity: 0.7;
+  font-weight: 500;
+}
+
+.runwell-bundle-collection__pinned {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-collection__pinned {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ---------- Visually hidden helper (for legend) ---------- */
+
+.runwell-bundle-system .visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}