/* store.css — the public reseller storefront, and shared chrome for the
   product page.

   Redesigned 2026-08-26. Deliberately its own visual register: no site-nav,
   no Zyentora wordmark up top — the reseller's name carries the page.

   EVERY colour, radius and display face here comes from a theme token
   (themes.css). Nothing is hardcoded, so all four themes restyle these pages
   without a single rule below changing. Structure is shared across themes;
   only the visual language differs.

   Loads on store.html and product.html only — never on Zyentora's own
   marketing pages or the admin dashboard. store.js and product.js are the
   checkout path and are not touched by this file. */

/* ---------------- States ---------------- */
.store-loading,
#store-not-found {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--text-secondary);
}
#store-not-found[hidden] { display: none; }
#store-not-found .btn-secondary { display: inline-flex; margin-top: var(--space-3); }
#store-content[hidden] { display: none; }

/* ---------------- Hero ---------------- */
/* Creator identity first: name, then what they sell, then two lines of bio.
   Kept deliberately short - a huge hero pushed the products below the fold on
   every phone, and the products are the point. */
.store-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6) 0 var(--space-5);
}
.store-hero h1 {
  min-width: 0;
  overflow-wrap: anywhere;   /* reseller-chosen store names */
  margin: 0 0 var(--space-2);
  font-family: var(--t-display, 'Space Grotesk', sans-serif);
  font-weight: var(--t-display-weight, 700);
  font-size: clamp(34px, 8vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.store-subtitle {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Text, not a fill — needs the AA-safe accent. */
  color: var(--t-accent-text, var(--t-accent));
}
.store-bio {
  min-width: 0;
  overflow-wrap: anywhere;
  max-width: 52ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.65;
  /* Two lines maximum, as specified. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trust-strip {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.trust-strip li { display: flex; align-items: center; gap: 8px; }
.trust-strip i { color: var(--t-accent); font-size: 19px; }

/* Hero composition: this store's own covers, fanned. */
.store-hero-visual {
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-hero-visual[hidden] { display: none; }
/* Belt and braces: the fan must never be the thing that widens the page. */
.store-hero-visual { overflow: hidden; }
.store-hero-cover {
  position: absolute;
  width: min(150px, 40%);
  aspect-ratio: 3 / 4;
  border-radius: var(--t-radius-sm, 10px);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center top;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-subtle);
}
/* The fan is sized from the container, not fixed pixels: at 375px a 104px
   spread pushed the outer cover 3px past the viewport. Percentages keep the
   whole composition inside its box at every width. */
.store-hero-cover[data-pos="0"] { z-index: 3; transform: translateY(-6px) scale(1.06); }
.store-hero-cover[data-pos="1"] { z-index: 2; transform: translateX(-62%) rotate(-7deg); }
.store-hero-cover[data-pos="2"] { z-index: 1; transform: translateX(62%) rotate(7deg); }

/* ---------------- Trust strip ---------------- */
.store-assurances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-6);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}
.store-assurance i { display: block; margin-bottom: var(--space-2); font-size: 24px; color: var(--t-accent); }
.store-assurance-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.store-assurance-note { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-secondary); }

/* ---------------- Products ---------------- */
.store-products-section { padding-bottom: var(--space-6); }
.store-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.store-section-eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-accent-text, var(--t-accent));
}
.store-section-title {
  margin: 0;
  font-family: var(--t-display, 'Space Grotesk', sans-serif);
  font-weight: var(--t-display-weight, 600);
  font-size: clamp(24px, 4.5vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.store-product-count { flex: none; font-size: 15px; color: var(--text-tertiary); }

/* Two across on a phone, never auto-fit: auto-fit collapses empty columns
   and stretches whatever is left, which is why a single product once
   rendered as one giant card. */
.card-grid-store {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* ---------------- Product card ---------------- */
.card-grid-store .product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--t-radius, 14px);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.card-grid-store .product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-default);
}

.card-grid-store .card-thumb-link { display: block; text-decoration: none; }
.card-grid-store .card-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--t-radius-sm, 10px);
  background: var(--thumb-mat, var(--surface-2));
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.card-grid-store .card-thumb-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: transform 250ms ease-out;
}
.card-grid-store .product-card:hover .card-thumb-img { transform: scale(1.03); }

.card-grid-store .card-badges {
  position: absolute;
  z-index: 1;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.store-products-section .badge,
.product-detail-badges .badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 10px;
  border-radius: 999px;
}

.card-grid-store .card-title-link { text-decoration: none; }
.card-grid-store .card-title {
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.card-grid-store .card-desc {
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  margin-bottom: var(--space-3);
}
.card-price {
  margin: 0;
  font-family: var(--t-display, 'Space Grotesk', sans-serif);
  font-weight: var(--t-display-weight, 700);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.card-price-was {
  margin-left: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-tertiary);
}
.card-delivery-note {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.card-delivery-note i { color: var(--t-accent); font-size: 15px; }

/* Buy button takes the theme accent, so a Minimal store gets ink and a
   Premium store gets bronze. */
.card-grid-store .store-buy-btn.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--t-radius-sm, 10px);
  background: var(--t-accent);
  color: var(--t-accent-ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease-out;
}
.card-grid-store .store-buy-btn.btn-primary:hover { background: var(--t-accent-hover); }

.store-purchase-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-tertiary);
  text-align: center;
}
.store-purchase-note a { color: var(--text-secondary); }

/* ---------------- Mid-page highlight ---------------- */
/* Replaces the reference's bundle/offer promo, which would have needed data
   this system does not have. Built from the store's real name and real
   product count instead. */
.store-highlight {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--t-radius, 14px);
  box-shadow: var(--shadow-soft);
}
.store-highlight-inner { max-width: 62ch; }
.store-highlight-title {
  margin: 0 0 var(--space-3);
  font-family: var(--t-display, 'Space Grotesk', sans-serif);
  font-weight: var(--t-display-weight, 600);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.store-highlight-body { margin: 0 0 var(--space-4); font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.store-highlight-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);   grid-template-columns: minmax(0, 1fr);
}
.store-highlight-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.store-highlight-points i { flex: none; font-size: 20px; color: var(--t-accent); }

/* ---------------- Closing reassurance ---------------- */
.store-closing { padding: var(--space-5) 0 var(--space-6); border-top: 1px solid var(--border-subtle); }
.store-closing-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.store-closing-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.store-closing-list i { flex: none; font-size: 20px; color: var(--t-accent); }

/* ---------------- Footer ---------------- */
.store-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5) 0 var(--space-4);
  text-align: center;
}
.store-footer p { margin: 0; color: var(--text-tertiary); }
.store-footer p.store-footer-links { font-size: 15px; line-height: 1.6; margin-bottom: var(--space-2); }
/* Real 44px targets: these are the policy links a buyer looks for when
   deciding whether to trust the page. */
.store-footer .store-footer-links a {
  display: inline-block;
  padding-block: 10px;
  color: var(--text-secondary);
  text-decoration: none;
}
.store-footer .store-footer-links a:hover { color: var(--text-primary); }
/* Plain text, not a link — deliberately gives no hover or pointer
   affordance, so nothing invites a customer to click away mid-purchase. */
.store-footer p.store-footer-brand { font-size: 13px; cursor: default; }

/* ---------------- Tablet ---------------- */
@media (min-width: 640px) {
  .card-grid-store { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .card-grid-store .product-card { padding: var(--space-4); }
  .store-hero { padding: var(--space-7) 0 var(--space-6); }
  .store-assurances { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .store-closing-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .store-highlight { padding: var(--space-6); }
}

/* ---------------- Desktop ---------------- */
@media (min-width: 1024px) {
  .card-grid-store { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid-store .card-title { font-size: 19px; }
  /* Copy left, cover composition right. */
  .store-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-6); }
  .store-hero-visual { height: 340px; }
  .store-hero-cover { width: 190px; }
  .store-hero-cover[data-pos="1"] { transform: translateX(-70%) rotate(-7deg); }
  .store-hero-cover[data-pos="2"] { transform: translateX(70%) rotate(7deg); }
}