/* ==============================================================
   OlaOrder Public Shop Page
   "A person's business page" — warm, simple, mobile-first.
   ============================================================== */

/* Storefront background (Pro-only — shops.storefront_background_url).
   Fixed full-viewport layer behind everything (z-index: -1, prepended to
   body), scrim baked into its own background-image (see
   shop-public.js's applyShopBackground). Does not touch any card/section
   background on this page — those stay exactly as they are; the image
   only ever shows through uncovered page background. No
   background-attachment:fixed (iOS Safari scroll-repaint jank) — this
   element is itself position:fixed, achieving the same effect via
   compositing with no per-frame repaint cost. */
.shop-background-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Theme's surface-alt tint applies to the page background ONLY when no
   Pro storefront background image is active — same "wallpaper wins over
   theme tint" rule as the dashboard (see dashboard.css). Falls back to
   transparent (body's own --color-surface-alt shows through, unchanged)
   when no theme is set either. */
body {
  background: var(--ola-theme-surface-gradient, var(--ola-theme-surface-alt, var(--color-surface-alt)));
}
.has-shop-background body {
  background: transparent;
}

/* Real, honest, global fix for a well-documented, real CSS gotcha,
   confirmed live via direct Playwright testing on this exact,
   storefront page: any class that sets its own real `display` value
   (flex, grid, block, etc.) correctly, honestly, overrides the
   browser's own built-in `[hidden] { display: none }` user-agent
   rule, due to real, standard CSS specificity — a plain class
   selector beats an attribute selector's own implicit specificity.
   This exact, same, real bug was already found and fixed once this
   session in the app's own dashboard.css (.photo-gallery-error's own
   real display: flex was silently keeping it visible and, critically,
   intercepting every real click meant for the thumbnails and close
   button underneath it, even while correctly marked hidden) — this
   storefront stylesheet never received that same, correct fix until
   now. This one rule, correctly, globally, protects every real
   element in this whole file that uses `hidden` alongside a real
   display-setting class, not just this one, specific, newly-found
   case. */
[hidden] { display: none !important; }

body { background: var(--color-surface); }

.shop-not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
}

/* ---------- Initial shop loading skeleton ---------- */
.shop-skeleton-banner {
  width: 100%;
  height: 200px;
  border-radius: 0;
}
.shop-skeleton-header {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-6) var(--space-5) var(--space-8);
}
.shop-skeleton-logo {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-lg);
  margin-top: -48px;
  flex-shrink: 0;
}
.shop-skeleton-header-text {
  flex: 1;
  padding-top: var(--space-2);
}
.shop-skeleton-header-text .skeleton-text-md { width: 50%; height: 24px; }
.shop-skeleton-header-text .skeleton-text-sm { width: 70%; }
.shop-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  padding-bottom: var(--space-10);
}
.shop-skeleton-card {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
}
@media (max-width: 640px) {
  .shop-skeleton-header { flex-direction: column; }
  .shop-skeleton-logo { margin-top: -40px; }
  .shop-skeleton-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}

/* ---------- Shop header ---------- */
.shop-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.availability-banner {
  margin-top: var(--space-4);
}

/* ---------- Store Announcement Banner ---------- */
.shop-announcement-banner {
  margin-top: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-warn-soft);
  color: var(--color-warn-text);
}
.shop-announcement-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.shop-announcement-text {
  flex: 1;
  margin: 0;
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}
.shop-announcement-dismiss-btn {
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: var(--text-xl);
  line-height: 1;
  padding: var(--space-1);
  margin: -4px -4px -4px 0;
  border-radius: var(--radius-sm);
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-announcement-dismiss-btn:hover,
.shop-announcement-dismiss-btn:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}
.shop-banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--color-indigo-soft);
}
.shop-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-header-content {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-6) var(--space-5);
}
.shop-logo {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-md);
  margin-top: -48px;
  flex-shrink: 0;
  background: var(--color-surface);
}
.shop-header:not(:has(.shop-banner)) .shop-logo { margin-top: 0; }
.shop-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  background: var(--color-indigo);
  color: white;
}
.shop-header h1 { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.shop-description {
  color: var(--color-ink-50);
  margin-bottom: var(--space-3);
}
.shop-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.shop-tagline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-indigo);
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
}
.shop-tagline-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  opacity: 0.55;
}

/* ---------- About section — premium card treatment ---------- */
.shop-about-section {
  margin-top: var(--space-6);
}
.shop-about-card {
  position: relative;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.shop-about-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-indigo), var(--color-mint));
}
.shop-about-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.shop-about-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--color-indigo-soft);
  color: var(--color-indigo);
  flex-shrink: 0;
}
.shop-about-heading-icon svg {
  width: 16px;
  height: 16px;
}
.shop-about-heading-rule {
  width: 48px;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-indigo), var(--color-mint));
  margin-bottom: var(--space-5);
}
.shop-about-text {
  color: var(--color-ink-70, var(--color-ink-50));
  line-height: var(--leading-relaxed);
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
  white-space: pre-line;
}
.shop-about-block {
  margin-bottom: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.shop-about-block:first-of-type {
  padding-top: 0;
  border-top: none;
}
.shop-about-block:last-child {
  margin-bottom: 0;
}
.shop-about-subheading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-50);
  margin-bottom: var(--space-4);
}
.shop-about-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--color-indigo-soft);
}
.shop-about-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-indigo);
}
.shop-about-icon-badge-mint {
  background: var(--color-mint-soft);
}
.shop-about-icon-badge-mint .shop-about-icon {
  color: var(--color-service);
}
.shop-about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shop-about-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-indigo-soft);
  color: var(--color-indigo-hover);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.shop-about-chip-area {
  background: transparent;
  color: var(--color-ink-70, var(--color-ink-50));
  border: 1px solid var(--color-border);
  font-weight: 500;
}
.shop-about-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.shop-about-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.shop-about-list li .shop-about-icon-badge {
  background: var(--color-mint-soft);
}
.shop-about-list li .shop-about-icon {
  color: var(--color-service);
}
.shop-about-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shop-about-phone-link {
  color: var(--color-indigo);
  font-weight: 600;
  text-decoration: none;
}
.shop-about-whatsapp-link {
  margin-left: var(--space-1);
}
.shop-about-heading-standalone {
  margin-bottom: var(--space-2);
}

/* ---------- About text: clamp + Read more/Show less ---------- */
.shop-about-text-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6.5em;
  transition: max-height var(--duration-slow) var(--ease-out-premium);
  margin-bottom: var(--space-3);
}
.shop-about-text-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  max-height: 60em;
}
.shop-about-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-indigo);
  cursor: pointer;
}
.shop-about-readmore-btn:hover {
  text-decoration: underline;
}
.shop-about-readmore-icon {
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.shop-about-readmore-btn-expanded .shop-about-readmore-icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .shop-about-text-clamped,
  .shop-about-readmore-icon {
    transition: none;
  }
}

/* ---------- Services / Why-choose-us / Areas — side-by-side cards ---------- */
.shop-about-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.shop-about-mini-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.shop-about-mini-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.shop-about-mini-card .shop-about-subheading {
  margin-bottom: var(--space-4);
}
.shop-about-mini-card .shop-about-text {
  font-size: var(--text-base);
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .shop-about-mini-card:hover {
    transform: none;
  }
}
@media (max-width: 640px) {
  .shop-about-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .shop-about-card {
    padding: var(--space-6) var(--space-4);
  }
  .shop-about-heading {
    font-size: var(--text-xl);
  }
}

.shop-currency-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
}
.shop-currency-switcher label {
  color: var(--color-ink-50);
  font-weight: 500;
}
.shop-currency-switcher select {
  width: auto;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.shop-search {
  display: flex;
  align-items: center;
  position: relative;
}
.shop-search-toggle-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  color: var(--color-ink-30-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.shop-search-toggle-btn:hover,
.shop-search.shop-search-expanded .shop-search-toggle-btn {
  color: var(--color-indigo);
}
.shop-search input {
  width: 0;
  min-height: 36px;
  padding: var(--space-1) 0;
  margin-left: 0;
  font-size: var(--text-sm);
  border: none;
  background: none;
  opacity: 0;
  transition: width var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), padding var(--duration-base) var(--ease-standard), margin var(--duration-base) var(--ease-standard);
}
.shop-search.shop-search-expanded input {
  width: 220px;
  max-width: calc(100vw - 160px);
  padding: var(--space-1) var(--space-2);
  margin-left: var(--space-1);
  opacity: 1;
  border-bottom: 1px solid var(--color-border);
}
.shop-price-filter {
  display: flex;
  align-items: center;
  position: relative;
}
.shop-price-filter-toggle-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  color: var(--color-ink-30-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.shop-price-filter-toggle-btn:hover,
.shop-price-filter.shop-price-filter-expanded .shop-price-filter-toggle-btn,
.shop-price-filter-toggle-btn-active {
  color: var(--color-indigo);
}
.shop-price-filter-fields {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--color-ink-50);
  font-size: var(--text-sm);
  transition: width var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.shop-price-filter.shop-price-filter-expanded .shop-price-filter-fields {
  width: 150px;
  opacity: 1;
}
.shop-price-filter-fields input {
  width: 60px;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
}
.shop-category-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 0 0 var(--space-3);
  margin-bottom: var(--space-2);
  scrollbar-width: none;
}
.shop-category-chips::-webkit-scrollbar {
  display: none;
}
.category-chip {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-70);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.category-chip:hover {
  border-color: var(--color-indigo);
}
.category-chip-active {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  color: white;
}
.empty-state-search {
  padding: var(--space-6) var(--space-4);
}
.empty-state-search .no-results-text {
  font-size: var(--text-sm);
  color: var(--color-ink-70);
  margin: var(--space-3) 0 var(--space-1);
}
.empty-state-search .ask-seller-fallback-text {
  font-size: var(--text-sm);
  color: var(--color-ink-50);
  margin: 0 0 var(--space-3);
}

.hint-error {
  color: var(--color-danger);
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-mint-soft);
  color: var(--color-success-text);
}
.meta-chip-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* Deliberately indigo, not the shared mint-green .meta-chip default —
   "Pickup available"/"Delivery available" are capability facts about
   the shop; this is a performance track record (a real, measured
   percentage), and giving it its own tone keeps a buyer from
   skimming it as just another green "yes" chip. */
.meta-chip-fulfillment {
  background: var(--color-indigo-soft);
  color: var(--color-indigo-hover);
}
.shop-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #96690A;
  background: #FFF8E7;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  margin: var(--space-2) 0 0;
}
.shop-verified-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  vertical-align: middle;
}
.shop-verified-badge-medal {
  position: relative;
  width: 26px;
  height: 37px;
  flex-shrink: 0;
}
.shop-verified-badge-ribbon-left,
.shop-verified-badge-ribbon-right {
  position: absolute;
  top: 16px;
  width: 8px;
  height: 18px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  background: linear-gradient(180deg, #D63C3C, #A61E1E);
}
.shop-verified-badge-ribbon-left {
  left: 2px;
  transform: rotate(-10deg);
}
.shop-verified-badge-ribbon-right {
  right: 2px;
  transform: rotate(10deg);
}
.shop-verified-badge-disc {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-surface), var(--color-warn-soft));
  border: 2px solid var(--color-warn);
  box-shadow: 0 2px 4px rgba(11, 14, 26, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-verified-badge-disc img {
  display: block;
  width: 16px;
  height: 16px;
}
.shop-verified-badge-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-warn-text);
  white-space: nowrap;
}
/* Trusted Business — genuinely elevated above Verified Seller, not
   just differently colored. Matches the exact confirmed deeper-gold
   disc and navy ribbon treatment rendered and compared before this
   code was written. */
.shop-verified-badge-trophy .shop-verified-badge-ribbon-left,
.shop-verified-badge-trophy .shop-verified-badge-ribbon-right {
  background: linear-gradient(180deg, #2E3650, #12172A);
}
.shop-verified-badge-trophy .shop-verified-badge-disc {
  background: linear-gradient(135deg, var(--color-gold-gradient-start), var(--color-gold-gradient-end));
  border-color: var(--color-gold);
  box-shadow: 0 2px 4px rgba(11, 14, 26, 0.25);
}
.shop-verified-badge:has(.shop-verified-badge-trophy) .shop-verified-badge-label {
  color: #7A5C10;
}
.shop-rating-count {
  font-weight: 500;
  color: var(--color-ink-50);
}
.shop-order-count-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-50);
  margin: var(--space-2) 0 0;
}
.shop-order-count-icon {
  color: var(--color-success-text, #1E7A4C);
  font-weight: 700;
}
.response-time-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-50);
  margin: var(--space-2) 0 0;
}
.response-time-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.response-time-indicator:empty {
  display: none;
}
.shop-contact-row, .shop-contact-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.contact-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-ink-70);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.contact-icon-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-ink-30);
}
.contact-icon-btn:active {
  transform: scale(0.94);
}
.contact-icon-glyph {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.confirmation-section .shop-contact-row, .confirmation-section .shop-contact-line {
  margin: var(--space-3) 0 var(--space-4);
  justify-content: center;
}

/* ---------- Sections ---------- */
.shop-content { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.order-status-page {
  max-width: 440px;
  padding-top: var(--space-10);
  padding-bottom: var(--space-12);
}
.order-status-back-link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-50);
  margin-bottom: var(--space-4);
  text-decoration: none;
}
.order-status-back-link:hover {
  color: var(--color-indigo);
  text-decoration: none;
}
.order-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  max-height: calc(5 * 6.375rem + 4 * var(--space-3));
  overflow-y: auto;
  padding-right: var(--space-1);
}
.order-history-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.order-history-row:has(.order-history-row-main:hover) {
  border-color: var(--color-ink-30);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.order-history-row:has(.order-history-row-main:focus-visible) {
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px var(--color-indigo-soft);
}
@supports selector(:has(*)) {
  .order-history-row-main:focus-visible {
    outline: none;
  }
}
.order-history-row-main {
  display: block;
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.order-history-row-main:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
}
.order-history-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.order-history-header-row select {
  width: auto;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
}
.order-history-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* Real bug, found by rendering this row with a realistic multi-item
   order summary ("Premium Hand-Woven Aso-Oke Wrapper Set, Ankara
   Fabric Bundle (6 yards) and 2 more items") at 320px: min-width: 0
   on .order-history-row-main correctly let it shrink, but with no
   flex-wrap on the row it shrank all the way down to a narrow,
   one-or-two-word-per-line column rather than reclaiming the row's
   full width, while .order-history-row-actions (status badge + the
   "Order again" button, a fixed-width column) sat beside it the
   whole time. Below 480px the actions column now drops onto its own
   line below the summary/date, giving the order summary its full
   width to read on instead of a squeezed sliver next to the button.
   (Placed after both base rules it overrides, not just inside a
   later media query, since same-specificity source order — not
   media-query position — decides the cascade here.) */
@media (max-width: 480px) {
  .order-history-row-main {
    flex-basis: 100%;
  }
  .order-history-row-actions {
    flex-direction: row;
    align-items: center;
  }
}
.order-history-row-summary {
  font-weight: 600;
  color: var(--color-indigo);
  transition: color var(--duration-fast) var(--ease-standard);
  margin: 0 0 var(--space-1);
}
.order-history-row-main:hover .order-history-row-summary,
.order-history-row-main:focus-visible .order-history-row-summary {
  color: var(--color-indigo-hover);
}
.order-history-shop-link {
  color: var(--color-indigo);
  font-weight: 600;
  text-decoration: none;
}
.order-history-shop-link:hover {
  text-decoration: underline;
}
.order-history-empty {
  text-align: center;
  padding: var(--space-6) 0;
}
#repeat-order-result {
  margin-top: var(--space-3);
}

.order-status-result-card {
  margin-top: var(--space-6);
  text-align: center;
}
.order-status-result-card h2 {
  margin: var(--space-2) 0;
}
.order-review-section {
  margin-top: var(--space-6);
  text-align: center;
}
.order-review-section h4 {
  margin-bottom: var(--space-3);
}
.order-review-stars {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.order-review-star {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  width: 44px;
  height: 44px;
  color: var(--color-ink-50);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.order-review-star-filled { color: #D19700; }
.order-review-item-ratings-label {
  margin: var(--space-3) 0 var(--space-2);
  text-align: left;
}
.order-review-item-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.order-review-item-row:last-child {
  border-bottom: none;
}
.order-review-item-name {
  font-size: var(--text-sm);
  text-align: left;
  min-width: 0;
  overflow-wrap: break-word;
}
.order-review-item-stars {
  margin-bottom: 0;
  flex-shrink: 0;
}
/* Real, confirmed overflow bug: at 320px, a realistic offering name
   (e.g. "Premium Hand-Woven Aso-Oke Wrapper Set with Matching Gele")
   alongside 5 fixed 44px touch-target star buttons (220px+ minimum,
   before gaps) genuinely overflowed the page — .order-review-item-name
   had overflow-wrap but no min-width: 0, so as a flex item it never
   actually shrank below its own content width, it just broke onto a
   narrow forced column while the star row stayed full-width beside
   it. Below 400px, drop the star rating onto its own line under the
   item name — the stars need their full touch-target width to stay
   tappable, so shrinking them isn't an option; giving the name a full
   line above them is the only real fix. */
@media (max-width: 400px) {
  .order-review-item-name {
    flex-basis: 100%;
  }
}
.order-review-item-stars .order-review-star {
  font-size: 20px;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}
.order-review-section textarea {
  text-align: left;
}
.order-review-name-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-ink-70);
  margin: var(--space-2) 0 var(--space-3);
  cursor: pointer;
}
.order-review-name-choice input {
  flex-shrink: 0;
}
.order-status-reason {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: left;
}
.order-status-dispute-note {
  margin-top: var(--space-3);
}
.order-fulfillment-card {
  margin-top: var(--space-4);
  text-align: left;
}
.order-fulfillment-card h4 {
  margin-bottom: var(--space-3);
}
.fulfillment-expected-date {
  margin: 0 0 var(--space-2);
  font-size: 14px;
}
.fulfillment-expected-date strong {
  margin-right: 4px;
}
.fulfillment-bar-track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
  margin: var(--space-2) 0 4px;
}
.fulfillment-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.fulfillment-bar-active { background: var(--color-indigo); }
.fulfillment-bar-overdue { background: var(--color-danger); }
.fulfillment-bar-late { background: var(--color-warn); }
.fulfillment-bar-done { background: var(--color-success); }
.fulfillment-state-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fulfillment-state-icon {
  display: flex;
  flex-shrink: 0;
}
.fulfillment-state-icon-active { color: var(--color-indigo); }
.fulfillment-state-icon-due-today { color: var(--color-warn-text); }
.fulfillment-state-icon-overdue { color: var(--color-danger-text); }
.fulfillment-state-icon-done { color: var(--color-success-text); }
.fulfillment-state-icon-late { color: var(--color-warn-text); }
.fulfillment-state-label {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-50);
}
.fulfillment-state-label-due-today { color: var(--color-warn-text); }
.fulfillment-state-label-late { color: var(--color-warn-text); }
.fulfillment-state-label-done { color: var(--color-success-text); }
.fulfillment-state-overdue {
  color: var(--color-danger-text);
  font-weight: 600;
}
.order-status-timeline-card {
  margin-top: var(--space-4);
  text-align: left;
}
.order-status-timeline-card h4 {
  margin-bottom: var(--space-4);
}
.order-status-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-status-timeline-item {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}
.order-status-timeline-item:last-child {
  padding-bottom: 0;
}
.order-status-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.order-status-timeline-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  z-index: 1;
}
.order-status-timeline-item-current .order-status-timeline-dot {
  background: var(--color-indigo);
  box-shadow: 0 0 0 3px var(--color-indigo-soft);
}
.order-status-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-message-thread-section {
  margin-top: var(--space-4);
  text-align: left;
}
.confirmation-message-entry {
  margin-top: var(--space-3);
  text-align: left;
}
.confirmation-message-entry #confirmation-message-thread-container {
  margin-top: var(--space-3);
}
.order-message-thread-section h4 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-50);
  margin-bottom: var(--space-2);
}
.order-message-thread {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.order-message {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.order-message-seller {
  align-self: flex-end;
  background: var(--color-indigo-soft);
}
.order-message-buyer {
  align-self: flex-start;
  background: var(--color-surface-alt);
}
.order-message-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-50);
  margin-bottom: var(--space-1);
}
.order-message-body {
  font-size: var(--text-sm);
  white-space: pre-wrap;
  word-break: break-word;
}
.order-message-report-btn {
  background: none;
  border: none;
  padding: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-50);
  cursor: pointer;
  text-decoration: underline;
}
.order-message-report-btn:hover { color: var(--color-danger-text); }
.order-message-reply-field {
  margin-bottom: var(--space-2);
}
.ask-seller-prompt {
  text-align: center;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.ask-seller-prompt p {
  color: var(--color-ink-50);
  margin-bottom: var(--space-3);
}
.offering-section { margin-bottom: var(--space-10); }
.section-heading {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.offering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.offering-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.offering-card h3 {
  overflow-wrap: anywhere;
}
.offering-card:hover {
  border-color: var(--color-ink-30);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.offering-card-image {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--color-surface-alt);
  overflow: hidden;
}
.offering-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-out-premium);
}
.offering-card:hover .offering-card-image img {
  transform: scale(1.04);
}
.offering-card-view-more-btn {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  padding: var(--space-1) var(--space-3);
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-slow) var(--ease-out-premium);
}
.offering-card-view-more-btn:hover {
  background: rgba(0, 0, 0, 0.78);
}
.photo-gallery-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-ink-50);
}
.photo-gallery-view-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
/* Real UX gap, found by actually rendering this full-screen gallery
   at desktop widths: the whole view sat inside .container-narrow
   (max-width: 640px), so on a 1100px+ screen the product photo — the
   entire point of this view — was a small, cramped square in the
   middle of a mostly-empty page, while the equivalent gallery
   embedded in the product/service detail page (openProductDetailView
   /openServiceDetailView's drawGallery, same .photo-gallery-view-nav
   classes) already correctly used the wider .container and an
   overlaid nav-button pattern. This view now matches that
   already-proven pattern instead of being a visibly lesser, older
   version of "the same" gallery. */
.photo-gallery-view-main {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.photo-gallery-view-image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.photo-gallery-view-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-gallery-view-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-lg);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.photo-gallery-view-nav-prev { left: var(--space-3); }
.photo-gallery-view-nav-next { right: var(--space-3); }
.photo-gallery-view-nav:hover:not(:disabled) {
  background: var(--color-surface-alt);
  border-color: var(--color-ink-30);
}
.photo-gallery-view-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.photo-gallery-view-counter {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-ink-50);
  margin: var(--space-3) 0;
}
/* Real gap, found by rendering with 8 photos (a realistic count for a
   product with multiple angles/colors) at 320px: only 5 thumbnails
   fit, the rest were hard-clipped with zero visual hint more existed
   — the same "invisible scrollable content" gap already found and
   fixed twice this session for bottom nav bars (seller dashboard,
   platform admin). Same fix: a wrapper that fades the trailing edge
   so a scrollable strip never silently looks like the whole set. */
.photo-gallery-thumbnails-wrap {
  position: relative;
}
.photo-gallery-thumbnails-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--space-1);
  width: 28px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--color-surface) 85%);
  pointer-events: none;
}
.photo-gallery-thumbnails {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}
.photo-gallery-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-slow) var(--ease-out-premium), border-color var(--duration-slow) var(--ease-out-premium);
}
.photo-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.photo-gallery-thumb-active,
.photo-gallery-thumb:hover {
  opacity: 1;
  border-color: var(--color-indigo);
}
@media (prefers-reduced-motion: reduce) {
  .offering-card, .offering-card-image img { transition: none; }
  .offering-card:hover { transform: none; }
  .offering-card:hover .offering-card-image img { transform: none; }
  .offering-card-view-more-btn, .photo-gallery-thumb { transition: none; }
}
.offering-card-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-50);
  background: linear-gradient(135deg, var(--color-indigo-soft), var(--color-mint-soft));
}
.offering-card-image-fallback-service {
  background: linear-gradient(135deg, var(--color-service-soft), var(--color-indigo-soft));
}
.offering-card-body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.offering-card-body h3 { margin: 0; font-size: var(--text-lg); }
.offering-card-price-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: auto;
}
.offering-cart-toast {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  right: 0;
  z-index: 3;
  background: var(--color-ink-90);
  color: white;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  animation: offering-save-toast-fade 1.2s ease-out forwards;
}
.offering-card-price-row .offering-card-price {
  margin: 0;
  white-space: nowrap;
}
.cart-icon-add-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-indigo);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.cart-icon-add-btn:hover {
  background: var(--color-indigo-hover);
  transform: scale(1.06);
}
.cart-icon-add-btn:disabled {
  background: var(--color-ink-10);
  color: var(--color-ink-30-text);
  cursor: not-allowed;
  transform: none;
}
.offering-save-toast {
  position: absolute;
  top: calc(var(--space-3) + 40px);
  right: var(--space-3);
  z-index: 3;
  background: var(--color-ink-90);
  color: white;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  animation: offering-save-toast-fade 1.2s ease-out forwards;
}
@keyframes offering-save-toast-fade {
  0% { opacity: 0; transform: translateY(-4px); }
  15% { opacity: 1; transform: translateX(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.offering-card-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-50);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3em;
  transition: max-height var(--duration-slow) var(--ease-out-premium);
}
.offering-card-desc-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  max-height: 40em;
}
.offering-card-read-more-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-indigo);
  cursor: pointer;
}
.offering-card-read-more-btn:hover {
  text-decoration: underline;
}
.offering-card-read-more-icon {
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.offering-card-read-more-btn-expanded .offering-card-read-more-icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .offering-card-desc,
  .offering-card-read-more-icon {
    transition: none;
  }
}
.offering-card-price {
  font-family: var(--font-mono);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.offering-price-was {
  color: var(--color-ink-50);
  font-weight: 400;
  margin-right: var(--space-1);
}
.offering-price-sale {
  color: var(--color-danger);
  font-weight: 700;
}
.offering-sale-percent-badge {
  display: inline-flex;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  margin-right: var(--space-2);
  vertical-align: middle;
}
.offering-sold-out-badge {
  display: inline-flex;
  background: var(--color-ink-10);
  color: var(--color-ink-50);
  margin-bottom: var(--space-2);
}
.ribbon-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  max-width: calc(100% - var(--space-3) * 2);
  background: var(--color-danger);
  color: white;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1.3;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(225, 86, 86, 0.35);
}
.offering-save-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink-50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.offering-save-btn:hover {
  transform: scale(1.08);
}
.offering-save-btn-active {
  color: var(--color-danger);
}
.discount-code-checkout-field {
  margin-bottom: var(--space-4);
}
.discount-code-input-row {
  display: flex;
  gap: var(--space-2);
}
.discount-code-input-row input {
  flex: 1;
  min-width: 0;
}
.discount-code-input-row .btn {
  flex-shrink: 0;
}
#discount-code-checkout-alert .alert {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}
.offering-card-meta-row {
  font-size: var(--text-xs);
  color: var(--color-ink-50);
  margin: 0 0 var(--space-2);
}
.offering-card-sold-count {
  color: #96690A;
  font-weight: 700;
}
.offering-card-sold-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 2px;
}
.offering-card-meta-row-rating {
  font-weight: 700;
  color: #96690A;
}
.offering-card-rating-count {
  font-weight: 500;
  color: var(--color-ink-50);
}
.offering-stock-low { color: var(--color-warn-text); font-weight: 600; }
.offering-stock-out { color: var(--color-danger-text); font-weight: 600; }
/* Subtle, restrained — a small line under the price, matching the
   existing muted meta-row treatment rather than a loud badge, since
   this is a nuance about the price, not an urgent call to action. */
.offering-negotiable-note {
  font-size: var(--text-xs);
  color: var(--color-ink-50);
  font-style: italic;
  margin: calc(var(--space-1) * -1) 0 var(--space-2);
}
.offering-card-in-cart-note {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-50);
  text-align: center;
  margin: var(--space-2) 0 0;
}
.offering-card-body .btn { margin-top: auto; }

/* ---------- Cart bar ---------- */
.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-ink);
  color: white;
  z-index: 15;
  box-shadow: var(--shadow-up-md);
  animation: cartBarIn var(--duration-slow) var(--ease-out-premium);
}
@keyframes cartBarIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-bar { animation: none; }
}
.cart-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
}

/* ---------- Cart / checkout drawer contents ---------- */
.cart-line-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-line-item-unpriceable {
  background: var(--color-danger-soft);
  border-left: 3px solid var(--color-danger);
  padding-left: var(--space-4);
  padding-right: var(--space-5);
  border-radius: var(--radius-sm);
  margin: 0 calc(var(--space-5) * -1);
}
.cart-line-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.cart-line-item-info strong {
  overflow-wrap: break-word;
}
.cart-line-item-stock-note {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-warn-text);
  margin-top: var(--space-1);
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.qty-stepper button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-lg);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
/* Expands the actual tappable area to 44px (touch-target minimum) without
   growing the visible button, which would otherwise look oversized next
   to the quantity number. */
.qty-stepper button::before {
  content: '';
  position: absolute;
  inset: -4px;
}
.qty-stepper button:hover { background: var(--color-surface-alt); border-color: var(--color-ink-30); }
.qty-stepper button:active { transform: scale(0.92); }

@media (max-width: 480px) {
  .cart-line-item {
    flex-wrap: wrap;
  }
  .cart-line-item-info {
    flex-basis: 100%;
  }
  .qty-stepper {
    flex-basis: 0;
    flex-grow: 1;
  }
  .cart-line-item-end.cart-line-item-end {
    flex-basis: 0;
    flex-grow: 1;
  }
}

.cart-currency-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.cart-currency-picker label {
  color: var(--color-ink-50);
  font-weight: 500;
}
.cart-currency-picker select {
  width: auto;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-weight: 600;
}
.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  margin-top: var(--space-2);
}
.cart-total-incomplete-note {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-danger-text);
  margin-top: 2px;
}
.cart-payment-methods-preview {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.cart-payment-methods-preview-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-50);
  margin-bottom: var(--space-2);
}
.cart-payment-methods-details summary.cart-payment-methods-preview-label {
  color: var(--color-indigo);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: 0;
}
.cart-payment-methods-details summary::-webkit-details-marker { display: none; }
.cart-payment-methods-details summary::before {
  content: '▸';
  font-size: var(--text-xs);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.cart-payment-methods-details[open] summary::before {
  transform: rotate(90deg);
}
.cart-payment-methods-details[open] summary {
  margin-bottom: var(--space-2);
}
.cart-total-row-spaced { margin-bottom: var(--space-5); }

.order-status-reference-details {
  margin-top: var(--space-4);
}
.order-status-reference-summary {
  color: var(--color-indigo);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.order-status-reference-summary::-webkit-details-marker { display: none; }
.order-status-reference-summary::before {
  content: '▸';
  font-size: var(--text-xs);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.order-status-reference-details[open] .order-status-reference-summary::before {
  transform: rotate(90deg);
}
.order-status-reference-details[open] .order-status-reference-summary {
  margin-bottom: var(--space-3);
}

.type-toggle {
  display: flex;
  gap: var(--space-2);
}
.type-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.type-btn:hover { border-color: var(--color-ink-30); }
.type-btn.active {
  background: var(--color-indigo-soft);
  border-color: var(--color-indigo);
  color: var(--color-indigo);
}

/* ---------- Persistent header cart icon ---------- */
.cart-icon-btn {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 16;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.cart-icon-btn:hover { transform: scale(1.05); }
.cart-icon-btn:active { transform: scale(0.95); }

.my-orders-link {
  position: fixed;
  top: 72px;
  right: var(--space-4);
  z-index: 16;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.my-orders-link:hover { transform: scale(1.05); text-decoration: none; }
.my-orders-link:active { transform: scale(0.95); }
.favourites-icon-btn {
  position: fixed;
  top: 128px;
  right: var(--space-4);
  z-index: 16;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.favourites-icon-btn:hover { transform: scale(1.05); }
.favourites-icon-btn:active { transform: scale(0.95); }
.cart-icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-indigo);
  color: white;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface);
}
.cart-icon-badge[hidden] { display: none; }

/* ---------- Dedicated cart view (more spacious than a standard drawer) ---------- */
.cart-view {
  max-width: 480px;
}
.cart-view .drawer-header {
  padding: var(--space-2) var(--space-5);
}
.cart-view .drawer-body {
  padding: var(--space-3) var(--space-5);
}
.cart-view .cart-line-item {
  padding: var(--space-2) 0;
}
.cart-view .drawer-footer {
  padding: var(--space-2) var(--space-4);
}
.cart-items-list {
  margin-bottom: var(--space-2);
}
.cart-line-item-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.cart-line-item-title strong {
  min-width: 0;
  overflow-wrap: break-word;
}
.cart-line-item-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.cart-line-item-subtotal {
  font-family: var(--font-mono);
  white-space: nowrap;
}
.cart-footer-actions {
  display: flex;
  gap: var(--space-2);
}
.cart-footer-actions .btn-primary {
  flex: 2;
}
.cart-clear-btn {
  flex: 1;
  color: var(--color-danger-text);
}
.cart-clear-btn:hover { background: var(--color-danger-soft); }

.fieldset-reset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.fieldset-reset legend {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  padding: 0;
}

/* ---------- Confirmation ---------- */
.confirmation-drawer {
  position: fixed;
  inset: 0;
  left: auto;
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.confirmation-content {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}
.confirmation-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-mint-soft);
  color: var(--color-success-text);
  font-size: var(--text-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  animation: confirmPop 400ms var(--ease-out-premium);
}
@keyframes confirmPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .confirmation-icon { animation: none; }
}
.history-results-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.history-results-overlay .drawer-body {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}
.confirmation-reference-box {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-indigo-soft);
  border-radius: var(--radius-md);
  text-align: center;
}
.confirmation-reference-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-indigo-hover);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}
.confirmation-reference-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-2);
}

/* ---------- Premium confirmation-screen section system ---------- */
/* Real, deliberate structure: every real block below (reference,
   payment, message) is visually treated as its own, distinct,
   equal-weight section — a real, consistent left-aligned rhythm
   after the centered icon/heading, rather than everything crammed
   into one continuous, centered scroll. */
.confirmation-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: left;
}
.confirmation-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-50);
  margin: 0 0 var(--space-3);
}

/* Real, deliberate, consistent button system for this screen only —
   every real action button here is full-width and the same real
   height, distinguished by color/weight (primary vs secondary vs
   ghost) rather than by size, so the eye reads one, coherent,
   deliberate stack instead of three, real, mismatched widths. */
.confirmation-action-btn {
  width: 100%;
  min-height: var(--touch-target-min);
}
.confirmation-done-btn {
  width: 100%;
  margin-top: var(--space-6);
}
.confirmation-receipt-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.confirmation-payment-disclaimer {
  margin-bottom: var(--space-4);
}
.confirmation-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-indigo-hover);
  font-weight: 600;
}
.confirmation-share-btn::before {
  content: '♥';
  font-size: var(--text-sm);
}
.payment-methods-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.cart-payment-methods-details .payment-methods-display {
  max-height: 160px;
  overflow-y: auto;
}
.payment-method-card {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.payment-method-card strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-indigo-hover);
  margin-bottom: var(--space-1);
}
.payment-method-number {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  margin: var(--space-1) 0;
}
.payment-method-number-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-1) 0;
}
.payment-method-number-row .payment-method-number {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}
/* Real bug, found by rendering a genuinely long account number (a
   34-char IBAN-style string — some of the seller-entered "custom"
   payment methods can be this long, not just short local account
   numbers) at 320px: with no flex-wrap, the number's own natural
   space-separated wrapping put the Copy button floating mid-way
   through the wrapped number rather than clearly after it — a buyer
   trying to accurately copy a bank number, the single most
   copy-critical piece of text on this page, could easily misread
   which line the button belonged to. flex-wrap lets the Copy button
   drop cleanly below the full number once it needs more than one
   line, matching the equivalent seller-dashboard fix for payment
   method rows this same session found and fixed on the settings
   page. */
@media (max-width: 400px) {
  .payment-method-number-row .payment-method-number {
    flex-basis: 100%;
  }
}
.payment-method-copy-btn {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-indigo-hover);
  background: var(--color-indigo-soft);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.payment-method-copy-btn:hover {
  background: var(--color-indigo);
  color: white;
}
.payment-method-copy-btn-success {
  background: var(--color-mint-soft) !important;
  color: var(--color-success-text) !important;
}
#payment-reported-btn {
  margin-top: var(--space-3);
}
#payment-reported-status {
  margin-top: var(--space-2);
  text-align: center;
}
#payment-proof-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.payment-proof-label {
  margin-bottom: var(--space-2);
}
.payment-proof-thumb {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.payment-proof-file-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.payment-proof-actions {
  display: flex;
  gap: var(--space-2);
}
#payment-proof-error {
  margin-top: var(--space-2);
}
.payment-proof-error-text {
  margin-top: var(--space-2);
  color: var(--color-danger-text);
  font-size: var(--text-sm);
}
.confirmation-reference-note {
  font-size: var(--text-xs);
  color: var(--color-ink-50);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.payment-notice {
  font-size: var(--text-xs);
  color: var(--color-ink-30-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

/* ---------- Footer ---------- */
.shop-faq {
  padding-top: var(--space-10);
  max-width: 640px;
}
.shop-faq h3 {
  text-align: center;
  margin-bottom: var(--space-5);
}
.shop-faq .faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.shop-faq .faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-ink);
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.shop-faq .faq-item summary::-webkit-details-marker { display: none; }
.shop-faq .faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-ink-30-text);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.shop-faq .faq-item[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .shop-faq .faq-item summary::after { transition: none; }
}
.shop-faq .faq-item p {
  margin: var(--space-3) 0 0;
  color: var(--color-ink-50);
  font-size: var(--text-sm);
}
.shop-faq .faq-item summary:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.shop-reviews-heading {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
.shop-reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.shop-review-card {
  padding: var(--space-4);
}
.shop-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.shop-review-stars {
  color: #96690A;
  letter-spacing: 1px;
}
.shop-review-comment {
  font-size: var(--text-sm);
  margin: 0;
}
.shop-review-products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.shop-review-product-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #96690A;
  background: var(--color-warn-soft);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.shop-disclaimer {
  padding-top: var(--space-6);
  text-align: center;
}
.shop-disclaimer h3 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-30-text);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.shop-disclaimer p {
  font-size: var(--text-xs);
  color: var(--color-ink-30-text);
  max-width: 560px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

.shop-footer {
  padding: var(--space-6) 0 100px;
  text-align: center;
  color: var(--color-ink-50);
  font-size: var(--text-xs);
}
.shop-footer-olaorder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.shop-footer-olaorder p {
  margin: 0;
}
.shop-footer-afolaola {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.shop-footer-afolaola-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
.shop-footer-afolaola-tagline {
  color: var(--color-ink-50);
}
.shop-footer-afolaola-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-ink-70);
}
.shop-footer-copyright {
  margin-top: var(--space-2);
  color: var(--color-ink-30-text);
}

.offering-detail-view {
  padding-bottom: var(--space-6);
}
.offering-detail-header {
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
}
.offering-detail-back-btn {
  padding-left: 0;
  padding-right: 0;
}
.offering-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.offering-detail-gallery {
  position: sticky;
  top: var(--space-5);
  /* Without this, a grid item's default min-width is "auto" — it
     refuses to shrink below its content's intrinsic width. The
     thumbnail strip below (.offering-detail-thumbnails) is a flex row
     of non-shrinking 56px thumbnails with no wrap, so a service with
     many photos (10+) has a genuinely wide intrinsic content width —
     18 photos is roughly 1150px. Without min-width: 0, that width
     was winning over the grid's 1fr column sizing, forcing the whole
     two-column layout (and the page itself) wider than the viewport
     — pushing "Request service" off-screen and forcing users to
     scroll horizontally or zoom out to reach it. This lets the grid
     column shrink to its actual allotted width as intended, so the
     thumbnail strip's own overflow-x: auto scrolls internally instead
     of blowing out the page.
  */
  min-width: 0;
}
.offering-detail-main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offering-detail-main-image .photo-gallery-view-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: var(--shadow-md);
}
.offering-detail-main-image .photo-gallery-view-nav-prev { left: var(--space-3); }
.offering-detail-main-image .photo-gallery-view-nav-next { right: var(--space-3); }
.offering-detail-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Same fade-affordance fix as .photo-gallery-thumbnails-wrap above,
   for this second, near-identical thumbnail strip (product/service
   detail page's embedded gallery) — a listing with many photos
   scrolled here too with no hint more existed off-screen. */
.offering-detail-thumbnails-wrap {
  position: relative;
  margin-top: var(--space-3);
}
.offering-detail-thumbnails-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--color-surface) 85%);
  pointer-events: none;
}
.offering-detail-thumbnails {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}
.offering-detail-info h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}
.offering-detail-price {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: var(--space-2) 0;
}
.offering-detail-desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink-70);
  margin: var(--space-4) 0;
  white-space: pre-line;
}
.offering-detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.cart-page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.cart-page-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.cart-page-view .cart-line-item {
  padding: var(--space-3) 0;
}
.checkout-page-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .shop-header-content { flex-direction: column; align-items: flex-start; }
  .shop-logo { margin-top: -40px; }
  .offering-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .offering-card-price-row:has(.request-service-btn) {
    flex-direction: column;
    align-items: stretch;
  }
  .offering-card-price-row:has(.request-service-btn) .request-service-btn {
    width: 100%;
  }
  .offering-detail-body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .offering-detail-gallery {
    position: static;
  }
  .offering-detail-main-image {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 340px) {
  .offering-grid { grid-template-columns: 1fr; }
}

/* ---------- Seller brand-color theme ----------
   --shop-brand-color / -light / -dark / -text are set via the CSSOM on
   #shop-root (see js/core/brand-theme.js + shop-public.js) from the
   seller's shop.brand_color, already contrast-corrected there — never
   set here, and never fall back to anything but the existing default
   theme colors already used throughout this file, so a shop with no
   brand_color (or an invalid one) renders pixel-identical to before
   this theme layer existed.

   Deliberately scoped to #shop-root only (never touches the shared,
   app-wide .btn-primary/.btn-secondary rules in components.css, which
   are also used outside the public shop page), and deliberately
   applied to a short, specific list of elements — header accent, shop
   name, verified badge, buttons a buyer actually acts on, and a couple
   of "important accent" spots — not a blanket override of every color
   in the page. */
/* Curated theme preset (Business + Pro — shops.theme_id) supplies the
   DEFAULT accent/surface here (via --ola-theme-* variables, set on
   #shop-root through the CSSOM by applyThemePreset() in
   theme-presets.js), which the seller's own real brand_color then
   overrides on top when set (applyShopBrandTheme sets --shop-brand-color*
   directly via the CSSOM ONLY when brand_color is a valid, non-null hex —
   see brand-theme.js's own no-op guard — so these var()-with-fallback
   defaults are exactly the values a shop with a theme but no brand_color
   should show, and a shop with neither falls through further to the
   plain --color-indigo default, unchanged from before this feature
   existed). */
#shop-root {
  --shop-brand-color: var(--ola-theme-accent, var(--color-indigo));
  --shop-brand-color-light: var(--ola-theme-accent-soft, var(--color-indigo-soft));
  --shop-brand-color-dark: var(--ola-theme-accent-text, var(--color-indigo-hover));
  --shop-brand-color-text: var(--ola-theme-accent-text, var(--color-indigo));
}
#shop-root .card,
#shop-root .offering-card {
  background: var(--ola-theme-surface, var(--color-surface));
  border-radius: var(--ola-theme-button-radius, var(--radius-md));
  /* Only the two 'dark' cardStyle presets (midnight, espresso) ever set
     --ola-theme-text — every other preset leaves it unset, so this falls
     back to the existing global text color and nothing changes for them. */
  color: var(--ola-theme-text, inherit);
}
#shop-root .card .hint,
#shop-root .offering-card .hint {
  color: var(--ola-theme-text-muted, var(--color-ink-50));
}
/* Same reasoning as the dashboard's equivalent rule — .field label's
   hardcoded --color-ink-90 (components.css) is illegible on a 'dark'
   cardStyle preset's dark card surface. Real risk here specifically:
   the storefront's own checkout/request forms (name, email, address,
   notes fields) render inside #shop-root .card, so a buyer on a
   Midnight/Espresso-themed shop's checkout would otherwise see
   invisible field labels — found by extending the same check already
   done for the dashboard side, not independently rediscovered. */
#shop-root .card .field label,
#shop-root .offering-card .field label {
  color: var(--ola-theme-text, var(--color-ink-90));
}
#shop-root .shop-header {
  border-bottom: 3px solid var(--shop-brand-color);
}
#shop-root .shop-logo-fallback {
  background: var(--shop-brand-color);
}
#shop-root .shop-header h1 {
  color: var(--shop-brand-color-text);
}
/* Real gap, user-reported: the tagline sits directly under the shop
   name in the header and is exactly the kind of "shop name highlight"
   Task 1 asked for, but was missed in the first pass — its color was
   still hardcoded to var(--color-indigo) in the base .shop-tagline
   rule above and never picked up the brand theme. */
#shop-root .shop-tagline {
  color: var(--shop-brand-color-text);
}
#shop-root .btn-primary {
  background: var(--shop-brand-color);
}
#shop-root .btn-primary:hover,
#shop-root .btn-primary:active {
  background: var(--shop-brand-color-dark);
}
#shop-root .response-time-indicator {
  color: var(--shop-brand-color-text);
}
#shop-root .cart-icon-add-btn.add-to-cart-btn {
  background: var(--shop-brand-color);
}
#shop-root .shop-about-icon-badge {
  background: var(--shop-brand-color-light);
  color: var(--shop-brand-color-text);
}
/* Same family as shop-about-icon-badge above, genuinely missed in
   the same audit pass — this is the section's own main heading icon
   (the "About this store" badge itself), not one of the sub-heading
   icons inside it. */
#shop-root .shop-about-heading-icon {
  background: var(--shop-brand-color-light);
  color: var(--shop-brand-color-text);
}
#shop-root .shop-about-card::before,
#shop-root .shop-about-heading-rule {
  background: linear-gradient(90deg, var(--shop-brand-color, var(--color-indigo)), var(--color-mint));
}

/* Confirmation screen — explicitly named in Task 1's scope. Same
   audit pass as the tagline fix above: these were still hardcoded to
   var(--color-indigo)/-hover/-soft and never picked up the brand
   theme, so a themed shop's confirmation screen looked visually
   inconsistent with its own header/buttons right above it. */
#shop-root .confirmation-reference-box {
  background: var(--shop-brand-color-light);
}
#shop-root .confirmation-reference-label {
  color: var(--shop-brand-color-dark);
}
#shop-root .confirmation-share-btn {
  color: var(--shop-brand-color-dark);
}
#shop-root .payment-method-card strong {
  color: var(--shop-brand-color-dark);
}
#shop-root .payment-method-copy-btn {
  color: var(--shop-brand-color-dark);
  background: var(--shop-brand-color-light);
}
#shop-root .payment-method-copy-btn:hover {
  background: var(--shop-brand-color, var(--color-indigo));
}
#shop-root .cart-payment-methods-details summary.cart-payment-methods-preview-label {
  color: var(--shop-brand-color-dark);
}

/* Order-status page (Task 1's other explicitly-named surface) — only
   the "My purchase history" results, where a specific shop.brand_color
   is actually in hand (see order-status.js's own applyShopBrandTheme
   call, which sets these vars directly on that results overlay
   element — no special class needed, custom properties cascade to
   these descendants regardless). The initial lookup form itself
   (order-status-back-link, order-status-reference-summary, etc.)
   renders before any shop is resolved at all, so there's
   deliberately no var(--shop-brand-color-dark) in scope there and
   these rules simply never match anything on that screen. */
.order-history-row-summary,
.order-history-shop-link {
  color: var(--shop-brand-color-dark, var(--color-indigo));
}
.order-history-row-main:hover .order-history-row-summary,
.order-history-row-main:focus-visible .order-history-row-summary {
  color: var(--shop-brand-color, var(--color-indigo-hover));
}

/* ---------- Customer receipt (Task 3) ----------
   Visual language ported from the seller dashboard's own
   js/pages/receipt.js + css/pages/receipt.css (same design tokens,
   confirmed identical in tokens.css) so a buyer's receipt and a
   seller's receipt read as the same product. Rendered inside a
   .customer-receipt-overlay/.customer-receipt-drawer (see
   customer-receipt.js), not #shop-root, since it's a page-level
   overlay opened from the confirmation screen — so these rules are
   scoped to that wrapper instead. */
.customer-receipt-drawer {
  max-width: 560px;
}
.customer-receipt-toolbar {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}
.customer-receipt-close-btn {
  flex-shrink: 0;
}
.customer-receipt-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}
.customer-receipt-body {
  padding: var(--space-4);
  background: var(--color-surface-alt);
}
.customer-receipt-drawer .btn-primary {
  background: var(--shop-brand-color, var(--color-indigo));
}
.customer-receipt-drawer .btn-primary:hover,
.customer-receipt-drawer .btn-primary:active {
  background: var(--shop-brand-color-dark, var(--color-indigo-hover));
}

.receipt-document {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
}
.receipt-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.receipt-shop-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}
.receipt-kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-30-text);
  font-weight: 600;
  margin: 0;
}
.receipt-status-block {
  text-align: center;
  background: var(--shop-brand-color-light, var(--color-mint-soft));
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  margin-bottom: var(--space-5);
}
.receipt-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--shop-brand-color, var(--color-mint));
  color: white;
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.receipt-status-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.receipt-status-logo {
  max-width: 44px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.receipt-status-top .receipt-status-icon-inline {
  width: 24px;
  height: 24px;
  font-size: var(--text-sm);
  margin-bottom: 0;
  flex-shrink: 0;
}
.receipt-status-top .receipt-status-headline {
  margin: 0;
}
.receipt-status-headline {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--shop-brand-color-text, var(--color-success-text));
  margin: 0 0 var(--space-1);
}
.receipt-status-sub {
  font-size: var(--text-sm);
  color: var(--color-ink-50);
  margin: 0;
}
.receipt-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}
.receipt-meta-table td {
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-50);
}
.receipt-meta-table td:last-child { color: var(--color-ink); font-weight: 500; }
.receipt-section-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-30-text);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.receipt-items-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}
.receipt-items-table th {
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-50);
  font-weight: 600;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-ink);
}
.receipt-items-table td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  vertical-align: top;
}
.receipt-items-table th:first-child,
.receipt-items-table td:first-child {
  width: auto;
  padding-right: var(--space-3);
  word-break: break-word;
}
.receipt-items-table th:nth-child(2),
.receipt-items-table td:nth-child(2) { width: 32px; padding-left: var(--space-2); }
.receipt-items-table th:nth-child(3),
.receipt-items-table td:nth-child(3) { width: 110px; }
.receipt-items-table th:nth-child(4),
.receipt-items-table td:nth-child(4) { width: 110px; }
.receipt-items-table td:nth-child(3),
.receipt-items-table td:nth-child(4) {
  white-space: nowrap;
  padding-left: var(--space-3);
}
.receipt-items-table th:nth-child(3),
.receipt-items-table th:nth-child(4) { padding-left: var(--space-3); }
.receipt-col-center { text-align: center; }
.receipt-col-right { text-align: right; }
.receipt-col-strong { font-weight: 700; }
.receipt-mono { font-family: var(--font-mono); }
.receipt-discount-code { color: var(--shop-brand-color-text, var(--color-success-text)); font-weight: 600; }
.receipt-totals-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}
.receipt-totals-table td {
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-50);
}
.receipt-total-row td {
  padding-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}
.receipt-footer-note {
  font-size: var(--text-xs);
  color: var(--color-ink-30-text);
  text-align: center;
  margin: 0 0 var(--space-4);
}
.receipt-footer-brand {
  font-size: var(--text-xs);
  color: var(--color-ink-30-text);
  text-align: center;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* OlaOrder's own "Powered by" credit — always OlaOrder's own indigo,
   never the seller's brand color, matching the exact same rule
   already established on the seller-side receipt for the same reason:
   this line is OlaOrder's own product credit, not the seller's brand. */
.receipt-olaorder-mark {
  display: inline-block;
  vertical-align: middle;
  opacity: 0.9;
}
.receipt-olaorder-word {
  color: var(--color-indigo);
  font-weight: 600;
  text-transform: none;
}

@media (max-width: 600px) {
  .customer-receipt-drawer { max-width: none; }
  .receipt-document { padding: var(--space-5) var(--space-4); }
  .receipt-items-table th:nth-child(2),
  .receipt-items-table td:nth-child(2) { width: 30px; padding-left: var(--space-1); }
  .receipt-items-table th:nth-child(3),
  .receipt-items-table td:nth-child(3) { width: 96px; }
  .receipt-items-table th:nth-child(4),
  .receipt-items-table td:nth-child(4) { width: 96px; }
  .receipt-items-table th:nth-child(3),
  .receipt-items-table th:nth-child(4) { padding-left: var(--space-2); }
  .receipt-items-table td:nth-child(3),
  .receipt-items-table td:nth-child(4) {
    font-size: 11px;
    padding-left: var(--space-2);
    white-space: nowrap;
    line-height: 1.4;
  }
}

/* Real bug, ported fix — this table's CSS (and the exact same bug) is
   duplicated from the app repo's css/pages/receipt.css, confirmed via
   diff to be otherwise identical. Rendering it here with a realistic
   long offering name at 320px reproduces the exact same failure the
   app-side fix already documented: at 320px the fixed 30+96+96=222px
   eaten by Qty/Price/Total leaves the item-name column only ~40-45px,
   which crushes a real multi-word offering name into an unreadable
   single-letter-per-line column rather than wrapping it — this is the
   buyer's own purchase receipt, so it matters at least as much here
   as it does on the seller's copy. Below 400px, drop the rigid
   4-column row for a stacked layout: item name on its own full-width
   line, qty/price inline below it, total right-aligned — identical
   structure to the already-verified app-side fix. */
@media (max-width: 400px) {
  .receipt-items-table,
  .receipt-items-table thead,
  .receipt-items-table tbody,
  .receipt-items-table th,
  .receipt-items-table td,
  .receipt-items-table tr {
    display: block;
    width: auto;
  }
  .receipt-items-table thead { display: none; }
  .receipt-items-table tr {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .receipt-items-table td {
    padding: 0;
    border-bottom: none;
    white-space: normal;
  }
  .receipt-items-table td:first-child {
    padding-bottom: var(--space-1);
    font-weight: 600;
  }
  .receipt-items-table td:nth-child(2),
  .receipt-items-table td:nth-child(3),
  .receipt-items-table td:nth-child(4) {
    display: inline-block;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--color-ink-50);
  }
  .receipt-items-table td:nth-child(2)::before { content: 'Qty '; }
  .receipt-items-table td:nth-child(3)::before { content: ' · '; }
  .receipt-items-table td:nth-child(4) {
    float: right;
    color: var(--color-ink);
    font-weight: 700;
  }
}

/* Printing the receipt overlay: hide everything else on the page
   (including the confirmation screen underneath, and the rest of the
   overlay chrome) and print only the receipt document itself, at full
   page width — same approach as the seller-side receipt's own
   @media print rule. */
@media print {
  body > *:not(.customer-receipt-overlay) { display: none !important; }
  .customer-receipt-overlay {
    position: static;
    background: none;
  }
  .customer-receipt-drawer {
    position: static;
    max-width: none;
    box-shadow: none;
    height: auto;
  }
  .customer-receipt-toolbar { display: none; }
  .customer-receipt-body { padding: 0; background: white; }
  .receipt-document { box-shadow: none; border-radius: 0; padding: var(--space-4); }
}