/* ==============================================================
   Storefront refinement layer (v1.4.0)
   Loaded after shop.css. Visual only: no markup, id or behaviour
   changes. Everything reads the seller's brand colour and theme
   variables (--shop-brand-color*, --ola-theme-*), so a seller's own
   colours, banner and theme preset still lead; this layer only sets
   structure, scale, spacing and surfaces.
   The one deliberate statement is the header: a cover band with the
   logo resting on its edge and a confident, tightly set shop name.
   Everything below it stays quiet.
   ============================================================== */

/* ---------- Header ---------- */
#shop-root .shop-header {
  position: relative;
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--color-border);
}
/* Cover: the seller's banner when there is one, otherwise a soft
   wash of their brand colour so the logo always has something to rest on. */
#shop-root .shop-banner {
  height: clamp(140px, 24vw, 260px);
}
#shop-root .shop-header:not(:has(.shop-banner))::before {
  content: '';
  display: block;
  height: clamp(88px, 12vw, 132px);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--shop-brand-color) 26%, var(--color-surface)) 0%, transparent 62%),
    color-mix(in srgb, var(--shop-brand-color) 9%, var(--color-surface));
}
#shop-root .shop-header-content {
  align-items: flex-start;
  gap: var(--space-5);
  padding: 0 var(--space-5) var(--space-6);
}
#shop-root .shop-logo,
#shop-root .shop-header:not(:has(.shop-banner)) .shop-logo {
  width: 104px;
  height: 104px;
  margin-top: -52px;
  border: 4px solid var(--color-surface);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 14, 26, 0.08), 0 10px 28px -10px rgba(11, 14, 26, 0.28);
}
#shop-root .shop-logo-fallback {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
}
#shop-root .shop-header-content > div:not(.shop-logo) {
  min-width: 0;
  margin-top: var(--space-4);
}
#shop-root .shop-header h1 {
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: var(--space-2);
  text-wrap: balance;
}
#shop-root .shop-tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0;
  line-height: 1.45;
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
#shop-root .shop-tagline-icon { display: none; }

/* Facts about the shop read as one quiet row, not a stack of coloured pills. */
#shop-root .shop-meta { gap: var(--space-2); margin-bottom: var(--space-3); }
#shop-root .meta-chip,
#shop-root .meta-chip-fulfillment {
  background: transparent;
  color: var(--color-ink-70);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-weight: 500;
  padding: 5px var(--space-3);
}
#shop-root .meta-chip-icon { color: var(--shop-brand-color-text); }
#shop-root .response-time-indicator { font-size: var(--text-sm); font-weight: 500; }

/* ---------- Page rhythm ---------- */
#shop-root .shop-about-card {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 8%, transparent),
              0 12px 32px -18px rgba(11, 14, 26, 0.18);
}
/* The accent on the About card is a short solid brand-colour tab that
   sits inside the rounded corners (the old gradient was squeezed into a
   4px strip and clipped into a green sliver). */
#shop-root .shop-about-card::before {
  top: 20px; bottom: 20px; left: 0; right: auto;
  width: 4px; height: auto;
  border-radius: 0 4px 4px 0;
  background: var(--shop-brand-color, var(--color-indigo));
}
#shop-root .shop-controls {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 8%, transparent),
              0 8px 24px -16px rgba(11, 14, 26, 0.16);
}
#shop-root .section-heading {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
}

/* ---------- Offering cards ---------- */
#shop-root .offering-card {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 8%, transparent),
              0 1px 2px rgba(11, 14, 26, 0.04),
              0 14px 30px -20px rgba(11, 14, 26, 0.22);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
#shop-root .offering-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--shop-brand-color) 38%, transparent),
              0 2px 4px rgba(11, 14, 26, 0.05),
              0 22px 38px -20px rgba(11, 14, 26, 0.3);
}
#shop-root .offering-card-body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
/* Prices are the thing a buyer scans for: the body face with tabular
   figures (so columns of prices line up), instead of a monospace. */
#shop-root .offering-card-price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
#shop-root .offering-price-was { font-weight: 400; }

@media (max-width: 640px) {
  #shop-root .shop-header-content { padding: 0 var(--space-4) var(--space-5); gap: var(--space-3); }
  #shop-root .shop-logo,
  #shop-root .shop-header:not(:has(.shop-banner)) .shop-logo {
    width: 88px; height: 88px; margin-top: -44px; border-radius: 22px;
  }
  #shop-root .shop-header-content > div:not(.shop-logo) { margin-top: 0; }
  #shop-root .shop-about-card, #shop-root .shop-controls { border-radius: 18px; }
  #shop-root .offering-card { border-radius: 16px; }
  #shop-root .offering-card-body h3 { font-size: var(--text-base); }
  #shop-root .offering-card-price { font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) {
  #shop-root .offering-card { transition: none; }
  #shop-root .offering-card:hover { transform: none; }
}

/* Active currency pill: uses the readable shade of the accent and the
   theme's own "text on accent" colour, so the label passes 4.5:1 on every
   preset (white on the Warm/Sunset/Midnight/Espresso accents measured
   2.9 to 3.7). */
#shop-root .shop-currency-pill.is-active {
  background: var(--shop-brand-color-text, var(--shop-brand-color));
  border-color: var(--shop-brand-color-text, var(--shop-brand-color));
}
#shop-root .shop-currency-pill.is-active,
#shop-root .shop-currency-pill.is-active .shop-currency-code {
  color: var(--ola-theme-button-text, #fff);
}
#shop-root.is-dark-card .shop-currency-pill.is-active {
  background: var(--shop-brand-color);
  border-color: var(--shop-brand-color);
}

/* ---------- Image clarity ----------
   Uploads are already stored at up to 1920px (WebP, q0.88), so the
   remaining softness is presentation: a logo cropped by object-fit:cover,
   photo edges that bleed into a white card, and a hover zoom that
   re-samples the photo. */
/* A logo is never cropped: a wide wordmark is shown whole on the logo tile.
   (A square logo fills the tile exactly as before.) */
#shop-root img.shop-logo {
  object-fit: contain;
  box-sizing: border-box;
}
/* The logo sits above the cover band it overlaps. */
#shop-root .shop-logo { position: relative; z-index: 2; }
/* A 1px inner edge gives every photo a crisp, deliberate boundary on both
   light and dark cards. It never captures taps. */
#shop-root .offering-card-image::after,
#shop-root .shop-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 7%, transparent);
}
#shop-root .shop-banner { position: relative; }
#shop-root .shop-banner img { object-position: center; }
/* Gentler zoom keeps the photo sharper while hovering. */
#shop-root .offering-card:hover .offering-card-image img { transform: scale(1.025); }