/* Auth + saves UI styles.
 * Imported by /auth/login, /auth/callback, /saved pages, and by saves-init
 * (which dynamically injects a <link> tag the first time it runs).
 *
 * Kept in a separate file from global.css to avoid merge conflicts with the
 * other Claude Code session that owns global.css.
 */

/* ---------- Save button (heart icon) ---------- */
.bw-save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  color: var(--ink, #2d2420);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(45, 36, 32, 0.12);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.bw-save-btn--md { width: 34px; height: 34px; }
.bw-save-btn--sm { width: 28px; height: 28px; }

.bw-save-btn svg {
  width: 60%;
  height: 60%;
  pointer-events: none;
}

.bw-save-btn:hover {
  background: #fff;
  transform: scale(1.06);
}

.bw-save-btn.is-saved {
  color: var(--rose-deep, #a07a72);
}

.bw-save-btn.is-saved svg {
  fill: var(--rose-deep, #a07a72);
  stroke: var(--rose-deep, #a07a72);
}

.bw-save-btn--inline {
  position: static;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Subtle press animation */
.bw-save-btn:active { transform: scale(0.94); }


/* ---------- Mobile sticky save button (product detail page) ---------- */
/* The .btn-save-mobile baseline styles live in global.css. These rules add
 * the saved-state visual (rose-deep fill) without re-declaring the base. */
.btn-save-mobile.is-saved {
  border-color: var(--rose-deep, #a07a72);
  color: var(--rose-deep, #a07a72);
  background: rgba(200, 152, 144, 0.08);
}
.btn-save-mobile .btn-save-icon { font-size: 16px; line-height: 1; }
.btn-save-mobile.is-saved .btn-save-icon { color: var(--rose-deep, #a07a72); }


/* ---------- Header account widget — desktop only ---------- */
/* JS shows these when signed in / out, but on mobile the drawer handles the
 * same UX. Hide on mobile so they don't wrap to a second header row. */
/* All header widgets live inside #bw-header-extras (a single grid cell at the
 * right edge of .site-header). Reset .site-header to a 4-column grid so the
 * wrapper has its own track instead of wrapping onto a new row. */
.site-header {
  grid-template-columns: auto 1fr auto auto !important;
}
@media (max-width: 900px) {
  /* Mobile collapses to 2 cols (logo + wrapper); .nav and .search-pill are
   * hidden by global.css at this breakpoint and the wrapper takes the rest. */
  .site-header {
    grid-template-columns: 1fr auto !important;
  }
  #header-signin-link,
  #header-saved-link,
  #header-signout-btn {
    display: none !important;
  }
  /* The always-visible account heart in the mobile header. */
  #header-account-mobile {
    display: inline-flex !important;
  }
}
#bw-header-extras { grid-column: -2; }


/* ---------- Homepage "Currently loved" — horizontal rail on mobile ---------- */
/* Sample-of-many surface, so swipe-through reads as "graze the wave"
 * (Currently loved products). Editorial sections like Collections keep their
 * vertical stack so each is given full visual weight. */
@media (max-width: 900px) {
  .bw-loved-rail {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    /* No horizontal bleed — cards align flush with the section title's left edge.
     * Small right pad gives the last card breathing room before the viewport edge. */
    padding: 4px 24px 16px 0;
    margin: 0;
    scrollbar-width: none;
  }
  .bw-loved-rail::-webkit-scrollbar { display: none; }
  .bw-loved-rail .product-card {
    flex: 0 0 76%;
    max-width: 320px;
    scroll-snap-align: start;
  }
}
/* Hide the mobile account icon on desktop — desktop has its own widget. */
@media (min-width: 901px) {
  #header-account-mobile { display: none !important; }
}


/* ---------- Auth pages (/auth/login, /auth/callback) ---------- */
.bw-auth-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.bw-auth-card {
  background: var(--paper, #fff);
  border: 1px solid var(--rule, #ebe0d0);
  border-radius: 8px;
  padding: 32px 28px;
}

.bw-auth-card h1 {
  font: 600 28px/1.2 Fraunces, serif;
  font-variation-settings: 'SOFT' 100;
  margin: 0 0 12px;
  color: var(--ink, #2d2420);
}

.bw-auth-sub {
  color: var(--ink-2, #5c4d42);
  font: 14px/1.5 Inter, sans-serif;
  margin: 0 0 24px;
}

.bw-auth-form { display: flex; flex-direction: column; gap: 8px; }

.bw-auth-form label {
  font: 500 12px/1 Inter, sans-serif;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bw-auth-form input[type="email"] {
  font: 16px/1.4 Inter, sans-serif;
  color: var(--ink);
  background: var(--bg, #faf6f1);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.bw-auth-form input[type="email"]:focus { border-color: var(--rose-deep); }

.bw-auth-submit {
  font: 500 15px/1 Inter, sans-serif;
  background: var(--ink, #2d2420);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 13px 18px;
  cursor: pointer;
  margin-top: 8px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  transition: background 0.15s;
}
.bw-auth-submit:hover { background: var(--rose-deep, #a07a72); }

.bw-auth-status {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 6px;
  font: 14px/1.5 Inter, sans-serif;
}
.bw-auth-status--pending { background: var(--bg-cream, #f3ebe0); color: var(--ink-2); }
.bw-auth-status--success { background: #eaf2e3; color: #3d5a2f; }
.bw-auth-status--error   { background: #fce6e6; color: #a23737; }

.bw-auth-foot {
  margin-top: 22px;
  font: 12px/1.5 Inter, sans-serif;
  color: var(--ink-3, #8a7968);
}

/* ---------- /saved page ---------- */
.bw-saved-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.bw-saved-header {
  margin-bottom: 32px;
}

.bw-saved-header h1 {
  font: 600 32px/1.2 Fraunces, serif;
  font-variation-settings: 'SOFT' 100;
  margin: 0 0 8px;
  color: var(--ink);
}

.bw-saved-sub {
  color: var(--ink-2);
  font: 14px/1.5 Inter, sans-serif;
  margin: 0;
}

.bw-saved-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  max-width: 480px;
}

.bw-saved-card p {
  color: var(--ink-2);
  font: 15px/1.6 Inter, sans-serif;
  margin: 0 0 18px;
}

/* Responsive grid override for the saves grid (matches /products grid) */
@media (max-width: 900px) {
  #bw-saved-grid,
  #bw-recs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ---------- Product card image: show full product (no top crop) ---------- */
/* global.css uses object-fit: cover, which clips portrait-oriented product
 * photos (eye serums, tall bottles). Switching to contain shows the whole
 * product with the card's background filling any letterboxing. */
.product-card .product-img {
  object-fit: contain !important;
  padding: 8% !important;
  object-position: center !important;
}


/* ---------- XHS/TikTok quote-card product name — pull it forward ---------- */
/* global.css's .rednote-quote-attr is a single ink-3 line. The product name
 * (the actionable "what's the product?" answer) was indistinguishable from
 * the rest of the attribution metadata. Bold + ink-2 lifts it visually. */
.rednote-quote-attr .rednote-quote-product {
  font-weight: 600;
  color: var(--ink);
}


/* ---------- /creators pills — force 2-column grid on mobile ---------- */
/* global.css uses display:flex + flex-wrap which produces an uneven 1-2 per
 * row layout because chips have `flex-shrink: 0`. Override to a 2-col grid
 * on mobile so all chips share the same width and the layout reads cleanly. */
@media (max-width: 900px) {
  .creator-chips {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .creator-chip {
    flex-shrink: 1 !important;
    min-width: 0;
    padding: 8px 14px 8px 8px !important;
    overflow: hidden;
  }
  .creator-chip .chip-info { min-width: 0; }
  .creator-chip .chip-handle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ---------- Creator filter tabs on mobile ---------- */
/* global.css only sets flex-wrap on .filter-row, not .filter-tabs. On a 390px
 * viewport the 5 tabs overflow and the last ("Mentioned") gets clipped. Allow
 * the tabs themselves to wrap, and shrink padding so they fit two-up. */
@media (max-width: 900px) {
  .filter-tabs {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .filter-tab {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
  }
}


/* ---------- AI recs section on /saved ---------- */
.bw-recs {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
.bw-recs-header { margin-bottom: 28px; max-width: 720px; }
.bw-recs-eyebrow {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 12px;
}
.bw-recs h2 {
  font: 600 28px/1.2 Fraunces, serif;
  font-variation-settings: 'SOFT' 100;
  margin: 0 0 12px;
  color: var(--ink);
}
.bw-recs-blurb {
  font: italic 16px/1.55 'Crimson Pro', Georgia, serif;
  color: var(--ink-2);
  margin: 0;
}
.bw-recs-reason {
  font: italic 12.5px/1.4 'Crimson Pro', Georgia, serif;
  color: var(--rose-deep);
  padding: 6px 12px 10px;
  text-transform: lowercase;
}

/* Skeleton placeholder while /api/recs runs (Gemini cold start = 2-5s) */
.bw-recs-blurb--loading {
  color: var(--ink-3);
  font-style: italic;
  opacity: 0.7;
}
.bw-skel-card {
  aspect-ratio: 0.62;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(45, 36, 32, 0.04) 0%,
    rgba(45, 36, 32, 0.08) 50%,
    rgba(45, 36, 32, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: bw-skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes bw-skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ---------- Real creator avatars on .avi (replaces colored circles) ----- */
/* Coexist with global.css `.product-card .avi` (which hard-codes
 * background-image colors). When an actual <img> is rendered with the same
 * .avi class, the image fills the circle; padding/border are unchanged. */
.product-card .avi-img {
  object-fit: cover;
  object-position: center;
  background: var(--bg-cream) !important;
  display: block;
}
/* Suppress global.css's nth-child color gradients when the avi is an img. */
.product-card .avi-img:nth-child(n) {
  background-image: none !important;
}


/* ---------- Drop the "X mentions" overlay site-wide ---------- */
/* Replaced by the icon/% source-row under the product name (mirror of the
 * collection-page pattern). Hiding via CSS leaves the markup in place so we
 * don't have to touch every render path. */
.product-card .creator-count {
  display: none !important;
}

/* ---------- Source row chips under product name ---------- */
/* When the .src-row-home / .bw-card-source-row sits inside .info (not overlaid
 * on the image), use a tighter margin and inline alignment. */
.product-card .info .bw-card-source-row {
  margin-top: 8px !important;
  padding: 0 !important;
}