/* ==========================================================================
   Uniy Designz — storefront templates (assets/js/storefront.js)
   One markup structure; four templates differ only through these rules and
   the shop's own colors (--sf-primary, --sf-accent, --sf-surface).
   ========================================================================== */

.sf { background: #fff; color: var(--text-primary); container-type: inline-size; }
.sf-bar-inner, .sf-hero-inner, .sf-body-inner, .sf-foot-inner { max-width: 1120px; margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); }

/* ---- Shop header -------------------------------------------------------- */
.sf-bar { border-bottom: 1px solid var(--border-color); background: #fff; }
.sf-bar-inner { display: flex; align-items: center; gap: var(--space-6); min-height: 60px; }
.sf-brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: 15px; }
.sf-crest {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-full); background: var(--sf-primary); color: #fff;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .02em;
  box-shadow: inset 0 0 0 2px var(--sf-primary), inset 0 0 0 4px rgba(255, 255, 255, .35);
}
.sf-nav { display: none; gap: var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); }
.sf-nav .is-active { color: var(--text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sf-accent); padding-bottom: 4px; }
.sf-cart { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-secondary); }
.sf-cart svg { width: 18px; height: 18px; }
@container (min-width: 720px) { .sf-nav { display: flex; } }

/* ---- Hero ------------------------------------------------------------------ */
.sf-hero { background: var(--sf-primary); color: #fff; }
.sf-hero-inner { padding-top: var(--space-12); padding-bottom: var(--space-12); display: grid; gap: var(--space-3); justify-items: start; }
.sf-kicker { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .8; }
.sf-title { font-size: clamp(24px, 4cqi, 40px); line-height: var(--leading-tight); color: inherit; margin: 0; max-width: 22ch; }
.sf-welcome { max-width: 56ch; opacity: .9; }
.sf-cta {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 var(--space-5); margin-top: var(--space-3);
  border-radius: var(--radius-sm); background: var(--sf-accent); color: var(--sf-primary); font-weight: 700; font-size: var(--text-sm);
}

/* Fundraising meter */
.sf-fund { width: min(100%, 440px); margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.sf-fund-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.sf-fund-row strong { font-size: var(--text-xl); }
.sf-fund-row span { font-size: var(--text-sm); opacity: .85; }
.sf-fund-bar { height: 8px; margin-top: var(--space-2); border-radius: var(--radius-full); background: rgba(255, 255, 255, .25); overflow: hidden; }
.sf-fund-bar span { display: block; height: 100%; border-radius: inherit; background: var(--sf-accent); }
.sf-fund-note { margin-top: var(--space-2); font-size: var(--text-xs); opacity: .85; }

/* ---- Products -------------------------------------------------------------- */
.sf-body { background: #fff; }
.sf-body-inner { padding-top: var(--space-8); padding-bottom: var(--space-10); }
.sf-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); }
.sf-section-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.sf-count { font-size: var(--text-sm); color: var(--text-secondary); }
.sf-grid { display: grid; gap: var(--space-6) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 720px) { .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sf-product-media { aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--sf-surface); }
.sf-product-media picture { display: block; width: 100%; height: 100%; }
/* Product photos sit on white — a tinted stage would change how the
   product's own color reads (a white mug must look white). */
.sf-product-media.has-photo { background: #fff; box-shadow: inset 0 0 0 1px var(--border-color); }
.sf-product-media img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.sf-product-media .media-placeholder { background: var(--sf-surface); }
.sf-product-name { margin-top: var(--space-3); font-weight: 600; font-size: 15px; line-height: var(--leading-snug); }
.sf-product-meta { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 2px; font-size: var(--text-sm); color: var(--text-secondary); }
.sf-product-price { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

.sf-foot { border-top: 1px solid var(--border-color); background: var(--sf-surface); font-size: var(--text-xs); color: var(--text-secondary); }
.sf-foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ---- Template 1: School Spirit — bold, collegiate ---------------------------- */
.sf--school .sf-hero { border-bottom: 6px solid var(--sf-accent); background-image: linear-gradient(115deg, transparent 0 62%, rgba(255, 255, 255, .06) 62% 70%, transparent 70%); }
.sf--school .sf-title { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.sf--school .sf-kicker { color: var(--sf-accent); opacity: 1; }

/* ---- Template 2: Church & Ministry — calm, centered, serif -------------------- */
.sf--church .sf-hero { background: var(--sf-surface); color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.sf--church .sf-hero-inner { justify-items: center; text-align: center; }
.sf--church .sf-title { font-family: var(--font-display); font-weight: 600; color: var(--sf-primary); }
.sf--church .sf-kicker { color: var(--sf-accent); opacity: 1; }
.sf--church .sf-welcome { color: var(--text-secondary); opacity: 1; }
.sf--church .sf-hero-inner::after { content: ""; width: 56px; height: 1px; background: var(--sf-accent); order: 1; margin-top: var(--space-2); }
.sf--church .sf-cta { background: var(--sf-primary); color: #fff; order: 2; }

/* ---- Template 3: Business Merchandise — minimal, corporate --------------------- */
.sf--business .sf-hero-inner { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.sf--business .sf-title { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }
.sf--business .sf-kicker { display: inline-flex; align-items: center; gap: var(--space-2); }
.sf--business .sf-kicker::before { content: ""; width: 24px; height: 2px; background: var(--sf-accent); }
.sf--business .sf-cta { background: #fff; color: var(--sf-primary); }
.sf--business .sf-crest { border-radius: var(--radius-sm); }

/* ---- Template 4: Organization & Fundraising — cause-forward ----------------------- */
.sf--organization .sf-title { font-family: var(--font-display); font-weight: 600; }
/* White button: a shop's accent color is not guaranteed to hold white text. */
.sf--organization .sf-cta { background: #fff; color: var(--sf-primary); }

/* ---- Preview mode (inside a browser frame on marketing pages) --------------------- */
.sf-preview { font-size: 14px; }
.sf-preview .sf-hero-inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.sf-preview .sf-body-inner { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.sf-preview .sf-welcome { font-size: 14px; }

/* ---- Browser frame + example label --------------------------------------------------- */
.browser { position: relative; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.browser-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--background-tertiary); border-bottom: 1px solid var(--border-color); }
.browser-url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px var(--space-3);
  border-radius: var(--radius-full); background: #fff; border: 1px solid var(--border-color);
  font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-url strong { color: var(--text-primary); font-weight: 600; }
.example-flag {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--space-3);
  border-radius: var(--radius-full); background: var(--brand-gold-tint); color: var(--brand-gold-dark);
  border: 1px solid rgba(138, 90, 23, .25); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* Full-page example banner (shop-demo.html) */
.example-banner { background: var(--brand-gold-tint); border-bottom: 1px solid rgba(138, 90, 23, .25); color: var(--brand-gold-dark); font-size: var(--text-sm); }
.example-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.example-banner a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }