/* ═══════════════════════════════════════════════════════
   GiftIQ v2 — Purple · White · Gold  (App-aligned)
   Fonts: Open Sans (site-aligned)
   ═══════════════════════════════════════════════════════ */

   

   /* Global baseline (moved from /static/css/style.css) */
   :root { color-scheme: light; }
   body.sticky-footer {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
   body.sticky-footer main { flex: 1; }
   img, svg, video, canvas { max-width: 100%; height: auto; }
   @media (prefers-reduced-motion: reduce) {
     * {
       animation-duration: 0.001ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.001ms !important;
       scroll-behavior: auto !important;
     }
   }

   :root {
     /* Core palette — aligned with app's white/purple theme */
     --ivory:    #f8f9fc;
     --ivory-2:  #f1f3f8;
     --ivory-3:  #e4e8f0;
     --surface:  #ffffff;
     --surface-2:#fafbfe;
   
     /* Ink */
     --ink:      #1a1625;
     --ink-2:    #2d2a3e;
     --ink-3:    #4a4760;
     --ink-4:    #7c7994;
     --ink-5:    #b8b5cc;
     --ink-6:    #e0dde8;
   
     /* Primary accent: app purple — replaces sage */
     --sage:     #6a11cb;
     --sage-2:   #5a0db0;
     --sage-lt:  #f0eafd;
     --sage-bd:  #c9aef0;
     --sage-mid: #8b4de0;
   
     /* Gold accent — kept for warmth/ratings */
     --gold:     #c8923a;
     --gold-lt:  #fdf3e3;
     --gold-bd:  #f0d4a8;
   
     /* Semantic */
     --red:      #c0392b;
     --amber:    #d4850a;
   
     /* Borders & shadows */
     --border:   #e2dff0;
     --border-2: #cec9e0;
   
     --r-xs: 4px;
     --r-sm: 8px;
     --r:    12px;
     --r-lg: 16px;
     --r-xl: 20px;
     --r-2xl:28px;
   
     --sh-xs: 0 1px 3px rgba(26,22,37,.05);
     --sh-sm: 0 2px 10px rgba(26,22,37,.07);
     --sh:    0 4px 20px rgba(26,22,37,.08);
     --sh-lg: 0 16px 44px rgba(26,22,37,.10);
     --sh-sage: 0 4px 20px rgba(106,17,203,.22);
   
    --font-d: 'Open Sans', Arial, sans-serif;
    --font-u: 'Open Sans', Arial, sans-serif;
   
     --ease:   cubic-bezier(.4,0,.2,1);
     --spring: cubic-bezier(.34,1.56,.64,1);
     --header: 62px;
   }
   
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; }
   
   body {
     font-family: var(--font-u);
     background: #f8f9fc;
     color: var(--ink);
     min-height: 100vh;
     font-size: 14px;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
   }
   
   img { display: block; max-width: 100%; }
   a { color: inherit; text-decoration: none; }
   button { cursor: pointer; font-family: inherit; border: none; }
   input, select { outline: none; font-family: inherit; }
   .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
   .hidden { display: none !important; }
   
   /* ── Header ─────────────────────────────────────────── */
   .site-header {
     position: fixed; top: 0; left: 0; right: 0;
     z-index: 200; height: var(--header);
     background: rgba(250,248,243,.96);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     box-shadow: 0 1px 0 rgba(255,255,255,.8), var(--sh-xs);
   }
   .header-inner {
     display: flex; align-items: center;
     justify-content: space-between; height: 100%;
   }
   .logo {
     display: flex; align-items: center; gap: 10px;
     font-family: var(--font-d);
     font-size: 22px; font-weight: 700;
     color: var(--ink); letter-spacing: -0.3px;
   }
   .logo em { font-style: italic; color: var(--sage); font-weight: 300; }
   .logo-mark {
     width: 34px; height: 34px;
     background: var(--ink);
     border-radius: var(--r-sm);
     display: flex; align-items: center; justify-content: center;
     color: #fff; flex-shrink: 0;
     box-shadow: 0 2px 8px rgba(26,22,18,.18);
   }
   
   /* ── Search Stage ───────────────────────────────────── */
   .search-stage {
     position: relative;
     padding-top: calc(var(--header) + 56px);
     padding-bottom: 64px;
     background:
       radial-gradient(ellipse 60% 50% at 70% 0%, rgba(106,17,203,.05) 0%, transparent 60%),
       radial-gradient(ellipse 40% 60% at 5% 100%, rgba(106,17,203,.04) 0%, transparent 55%),
       linear-gradient(175deg, #ffffff 0%, #f8f9fc 50%, #f1f3f8 100%);
     border-bottom: 1px solid var(--border);
     overflow: hidden;
   }
   
   /* decorative grain texture */
   .search-stage::before {
     content: "";
     position: absolute; inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
     pointer-events: none; opacity: 0.6;
   }
   
   .stage-inner {
     display: grid;
     grid-template-columns: 1fr 1.08fr;
     gap: 72px; align-items: center; width: 100%;
     position: relative;
   }
   
   /* Headline */
   .stage-headline { position: relative; }
   .stage-eyebrow {
     display: inline-flex; align-items: center; gap: 8px;
     font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
     color: var(--sage); margin-bottom: 20px;
   }
   .eyebrow-dot {
     width: 6px; height: 6px; background: var(--sage);
     border-radius: 50%; animation: blink 2.5s ease-in-out infinite;
   }
   @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
   
   .stage-title {
     font-family: var(--font-d);
     font-size: clamp(38px, 4.2vw, 62px);
     font-weight: 700; line-height: 1.05;
     letter-spacing: -1px; color: var(--ink); margin-bottom: 18px;
   }
   .stage-title em { font-style: italic; font-weight: 300; color: var(--sage); }
   
   .stage-sub {
     font-size: 15.5px; color: var(--ink-3);
     font-weight: 400; max-width: 360px; line-height: 1.7;
   }
   
   /* ── Wizard Card ───────────────────────────────────── */
   .wizard-card {
     background: var(--surface);
     border-radius: var(--r-2xl);
     box-shadow:
       0 0 0 1px rgba(200,185,165,.3),
       0 4px 6px rgba(26,22,18,.04),
       0 24px 60px rgba(26,22,18,.10);
     padding: 30px 28px 26px;
     position: relative; overflow: hidden;
   }
   
   /* top accent stripe */
   .wizard-card::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 3px;
     background: linear-gradient(90deg, #6a11cb 0%, #7c3aed 55%, #4f46e5 100%);
   }
   
   /* subtle inner highlight */
   .wizard-card::after {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 120px;
     background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, transparent 100%);
     pointer-events: none;
   }
   
   .wizard-step { display: none; animation: fadeUp .28s var(--ease) both; }
   .wizard-step.active { display: block; }
   @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
   
   .step-tag {
     display: inline-block;
     font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
     color: var(--sage); background: var(--sage-lt);
     border: 1px solid var(--sage-bd); padding: 3px 11px; border-radius: 20px; margin-bottom: 13px;
   }
   .step-title {
     font-family: var(--font-d);
     font-size: 21px; font-weight: 700; color: var(--ink);
     margin-bottom: 4px; letter-spacing: -0.3px;
   }
   .step-desc { font-size: 12.5px; color: var(--ink-4); margin-bottom: 20px; font-weight: 400; }
   
   /* Interests input */
   .big-input-wrap { position: relative; margin-bottom: 16px; }
   .big-input-icon {
     position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
     color: var(--ink-5); font-size: 13px; pointer-events: none;
   }
   .big-input {
     width: 100%; padding: 12px 14px 12px 36px;
     font-size: 14px; font-weight: 400;
     background: var(--ivory-2); border: 1.5px solid var(--border);
     border-radius: var(--r-sm); color: var(--ink);
     transition: border-color .2s, box-shadow .2s, background .2s;
   }
   .big-input:focus {
     border-color: var(--sage); background: var(--surface);
     box-shadow: 0 0 0 3px rgba(74,124,89,.12);
   }
   .big-input::placeholder { color: var(--ink-5); }
   .big-input.shake { animation: shake .45s ease; }
   @keyframes shake {
     0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
     40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
   }
   
   /* Selects */
   .inline-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
   .select-field { display: flex; flex-direction: column; gap: 5px; }
   .select-lbl {
     font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-4);
   }
   .select-styled {
     padding: 10px 28px 10px 12px;
     background: var(--ivory-2); border: 1.5px solid var(--border);
     border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
     color: var(--ink); appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c8278' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat; background-position: right 10px center;
     transition: border-color .2s, box-shadow .2s, background .2s; cursor: pointer;
   }
   .select-styled:focus {
     border-color: var(--sage); box-shadow: 0 0 0 3px rgba(74,124,89,.1);
     background-color: var(--surface);
   }
   
   /* Budget */
   .budget-input-box {
     display: flex; align-items: center;
     background: var(--ivory-2); border: 1.5px solid var(--border);
     border-radius: var(--r-sm); overflow: hidden;
     transition: border-color .2s, box-shadow .2s, background .2s;
   }
   .budget-input-box:focus-within {
     border-color: var(--sage); box-shadow: 0 0 0 3px rgba(74,124,89,.1);
     background: var(--surface);
   }
   .budget-sym {
     padding: 0 11px; font-size: 13px; font-weight: 600; color: var(--ink-4);
     border-right: 1px solid var(--border); line-height: 42px;
   }
   .budget-input {
     flex: 1; padding: 10px 10px;
     font-size: 14px; font-weight: 600; color: var(--ink);
     background: transparent; border: none; width: 100%;
   }
   .budget-input::-webkit-inner-spin-button,
   .budget-input::-webkit-outer-spin-button { -webkit-appearance: none; }
   
   /* Find button */
   .find-btn {
     display: flex; align-items: center; justify-content: center; gap: 8px;
     width: 100%; padding: 15px 28px; margin-top: 20px;
     background: #6a11cb; color: #fff;
     font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
     border-radius: var(--r-sm);
     box-shadow: 0 2px 0 rgba(90,13,176,.3), 0 4px 16px rgba(106,17,203,.18);
     transition: background .2s, transform .18s var(--spring), box-shadow .2s;
   }
   .find-btn:hover {
     background: #5a0db0; transform: translateY(-2px);
     box-shadow: 0 2px 0 rgba(74,17,140,.4), 0 10px 30px rgba(106,17,203,.28);
   }
   .find-btn:active { transform: scale(.99); box-shadow: 0 1px 4px rgba(26,22,18,.15); }
   .find-btn.loading { opacity: .65; pointer-events: none; }
   .btn-sparkle { font-size: 14px; animation: spin 4s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   .form-note {
     text-align: center; margin-top: 12px;
     font-size: 10.5px; color: var(--ink-5); font-weight: 400;
   }
   
   /* ── Results Stage ─────────────────────────────────── */
   .results-stage {
     background:
       radial-gradient(ellipse 50% 40% at 100% 0%, rgba(106,17,203,.04) 0%, transparent 55%),
       linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory) 100%);
     padding: 0 0 88px;
   }
   
   /* Empty state */
   .results-empty {
     text-align: center; padding: 110px 24px;
   }
   .empty-visual {
     position: relative; width: 90px; height: 90px;
     margin: 0 auto 30px;
     display: flex; align-items: center; justify-content: center;
   }
   .empty-ring {
     position: absolute; border-radius: 50%;
     border: 1.5px solid var(--sage-bd); animation: ripple 2.5s ease-in-out infinite;
   }
   .r1 { width: 90px; height: 90px; }
   .r2 { width: 60px; height: 60px; animation-delay: .45s; }
   @keyframes ripple { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:.8;transform:scale(1.06)} }
   .empty-icon { font-size: 26px; color: var(--sage); }
   .results-empty h3 {
     font-family: var(--font-d); font-size: 23px; font-weight: 600;
     color: var(--ink-2); margin-bottom: 8px;
   }
   .results-empty p { font-size: 13.5px; color: var(--ink-4); max-width: 300px; margin: 0 auto; }
   
   /* Loading */
   .loading-state {
     text-align: center; padding: 110px 24px;
     display: flex; flex-direction: column; align-items: center; gap: 18px;
     color: var(--ink-3); font-size: 14px;
   }
   .loading-dots { display: flex; gap: 7px; }
   .loading-dots span {
     width: 9px; height: 9px; background: var(--sage); border-radius: 50%;
     animation: dot .85s ease-in-out infinite;
   }
   .loading-dots span:nth-child(2) { animation-delay: .17s; }
   .loading-dots span:nth-child(3) { animation-delay: .34s; }
   @keyframes dot { 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }
   
   /* Error */
   .error-state {
     text-align: center; padding: 40px;
     background: #fef2f2; border: 1px solid #fecaca;
     border-radius: var(--r-lg); margin: 32px 0;
     color: var(--red); font-size: 14px;
   }
   
   /* ── Results Toolbar ───────────────────────────────── */
   .results-bar {
     display: flex; align-items: center; justify-content: space-between;
     flex-wrap: wrap; gap: 14px;
     position: sticky; top: 62px; z-index: 10;
     background: rgba(250,248,243,.94);
     backdrop-filter: blur(14px);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 14px 18px;
     margin-bottom: 8px;
     box-shadow: var(--sh-xs);
   }
   .results-count {
     font-family: var(--font-d);
     font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.5px;
     line-height: 1.15;
   }
   .results-sub {
     font-size: 12px; color: var(--ink-4); margin-top: 2px; font-weight: 400;
   }
   .results-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
   .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
   .filter-pill {
     padding: 7px 16px; font-size: 12px; font-weight: 500;
     background: var(--surface); color: var(--ink-3);
     border: 1px solid var(--border); border-radius: 999px;
     transition: all .18s var(--ease);
     box-shadow: var(--sh-xs);
   }
   .filter-pill:hover { border-color: var(--sage); color: var(--sage); background: var(--sage-lt); }
   .filter-pill.active {
     background: #6a11cb; color: #fff;
     border-color: transparent;
     box-shadow: 0 4px 12px rgba(106,17,203,.22);
   }
   .refine-btn {
     padding: 7px 16px; font-size: 12px; font-weight: 500;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: 999px; color: var(--ink-4);
     transition: all .18s; box-shadow: var(--sh-xs);
   }
   .refine-btn:hover { color: var(--ink); border-color: var(--border-2); }
   
   /* ── Concepts strip ────────────────────────────────── */
   .concepts-row {
     display: flex; align-items: center; gap: 10px;
     margin-bottom: 24px; flex-wrap: wrap;
     padding: 10px 16px;
     background: #eef0f8;
     border: 1px solid #c8c5e0;
     border-left: 3px solid #6a11cb;
     border-radius: var(--r-sm);
     box-shadow: 0 2px 8px rgba(26,22,37,.06);
   }
   .concepts-lbl {
     font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
     color: #6a11cb; white-space: nowrap;
   }
   .concepts-list { display: flex; flex-wrap: wrap; gap: 6px; }
   .concept-tag {
     display: inline-flex; align-items: center; gap: 5px;
     padding: 4px 11px; background: rgba(255,255,255,.8);
     border: 1px solid #c8c5e0; border-radius: 999px;
     color: #3d3a55; font-size: 11px; font-weight: 500;
   }
   .concept-score {
     font-size: 9px; color: var(--ink-4); background: rgba(0,0,0,.06);
     padding: 1px 6px; border-radius: 999px; font-weight: 600;
   }
   
   /* ── Product Grid ─────────────────────────────────── */
   .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
     gap: 20px;
   }
   
   /* ── Product Card ─────────────────────────────────── */
   .product-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r-xl);
     overflow: hidden;
     display: flex; flex-direction: column;
     box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, var(--sh-sm);
     transition:
       transform .28s var(--spring),
       box-shadow .28s var(--ease),
       border-color .22s;
     animation: cardIn .35s var(--ease) both;
     will-change: transform;
   }
   .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 44px rgba(26,22,37,.11), 0 1px 0 rgba(255,255,255,.9) inset;
     border-color: #c8c5e0;
   }
   .product-card.no-price .card-price { color: var(--ink-5); font-size: 13px; font-weight: 500; }
   @keyframes cardIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
   
   /* Image zone */
   .card-image-wrap {
     position: relative;
     aspect-ratio: 1 / 1;
     background: linear-gradient(155deg, #fdfcf8 0%, #f5f2e9 100%);
     overflow: hidden;
   }
   .card-image {
     width: 100%; height: 100%;
     object-fit: contain;
     padding: 22px;
     transition: transform .4s var(--spring);
   }
   .product-card:hover .card-image { transform: scale(1.06); }
   
   /* Hover overlay */
   .card-overlay {
     position: absolute; inset: 0;
     background: linear-gradient(to top, rgba(26,22,18,.55) 0%, rgba(26,22,18,.06) 52%, transparent 100%);
     display: flex; align-items: flex-end; justify-content: center;
     padding-bottom: 18px;
     opacity: 0; transition: opacity .24s var(--ease);
   }
   .product-card:hover .card-overlay { opacity: 1; }
   .card-view-btn {
     display: inline-flex; align-items: center; gap: 6px;
     padding: 10px 20px;
     background: var(--surface); color: var(--ink);
     font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
     border-radius: 999px; border: none;
     transform: translateY(8px);
     transition: transform .24s var(--spring), background .18s, color .18s;
     white-space: nowrap;
     box-shadow: 0 4px 16px rgba(0,0,0,.16);
   }
   .product-card:hover .card-view-btn { transform: translateY(0); }
   .card-view-btn:hover { background: var(--sage); color: #fff; }
   
   /* Badges */
   .card-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 5px; flex-wrap: wrap; }
  .giq-badge {
     font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
     padding: 4px 10px; border-radius: 999px;
     backdrop-filter: blur(8px);
   }
  .giq-badge.prime {
     background: rgba(26,22,37,.82); color: #fff;
   }
  .giq-badge.score-badge {
     background: #1a1625; color: #fff;
   }
 .giq-badge.market-badge {
    background: rgba(255,255,255,.92);
    color: var(--ink-2);
    border: 1px solid var(--border);
  }
 .giq-badge.badge-top-pick {
    background: var(--gold-lt);
    color: #7a5418;
    border-color: var(--gold-bd);
  }
 .giq-badge.badge-popular-choice {
    background: #eef0f8;
    color: #3d3a55;
    border-color: #c8c5e0;
  }
 .giq-badge.badge-trending {
    background: #f3eefc;
    color: #5a3d8f;
    border-color: #d5c8ef;
  }
   
  /* Card body (namespaced to avoid Bootstrap `.card-body`) */
  .giftiq-card-body {
    padding: 16px 17px 20px;
    flex: 1; display: flex; flex-direction: column; gap: 0;
  }
   .card-brand { display: none !important; }
   .card-why   { display: none !important; }
   .card-features { display: none !important; }
   
   /* Price row */
   .card-meta-row {
     display: flex; align-items: baseline; justify-content: space-between;
     gap: 8px; margin-bottom: 8px;
   }
   .card-price {
     font-family: var(--font-d);
     font-size: 23px; font-weight: 800;
     color: var(--ink); letter-spacing: -0.6px; line-height: 1;
   }
   .product-card.no-price .card-meta-row .card-price {
     font-size: 13px; font-weight: 500;
     color: var(--ink-5); letter-spacing: 0;
   }
   
   /* Title */
   .card-title {
    font-size: 13px; font-weight: 560;
    color: #1f1f1f; line-height: 1.5;
     display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
     -webkit-box-orient: vertical; overflow: hidden;
     margin-bottom: 14px; flex: 1;
   }
   .card-title-link {
     transition: color .16s var(--ease);
     text-decoration: underline;
     text-decoration-color: transparent;
     text-underline-offset: 2px;
   }
   .product-card:hover .card-title-link,
   .card-title-link:hover {
     color: #2d2a3e;
     text-decoration-color: #c8c5e0;
   }
   
   /* Footer: stars + CTA */
   .card-footer {
     display: flex; align-items: center; justify-content: space-between;
     gap: 8px;
     padding-top: 12px;
     border-top: 1px solid var(--ivory-3);
     margin-top: auto;
   }
   .card-footer-cta {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 8px;
     flex-wrap: wrap;
   }
   .card-share-wrap {
     display: flex;
     align-items: center;
    min-height: 32px;
   }
  /* Share pill button (icon + label) */
  .card-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.15px;
    transition: transform .18s var(--spring), border-color .18s, background .18s, box-shadow .18s, color .18s;
    white-space: nowrap;
  }
  .card-share-ic { display: inline-flex; align-items: center; justify-content: center; }
  .card-share-ic svg { width: 14px; height: 14px; }
  .card-share-btn:hover {
    border-color: #c8c5e0;
    background: #eef0f8;
    color: #3d3a55;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26,22,37,.12);
  }
  .card-share-btn:active { transform: translateY(0); box-shadow: none; }
  .card-share-btn.copied {
    border-color: var(--sage);
    background: var(--sage);
    color: #fff;
  }
   .card-rating { display: flex; align-items: center; gap: 5px; }
   .stars { font-size: 12px; letter-spacing: 1px; color: var(--gold); }
   .review-count { font-size: 10.5px; color: var(--ink-5); font-weight: 400; }
   
   /* Amazon CTA pill */
   .card-link {
     display: inline-flex; align-items: center; gap: 4px;
     font-size: 11.5px; font-weight: 600;
     color: var(--surface);
     padding: 7px 15px;
     background: #1a1625;
     border: none;
     border-radius: 999px;
     transition: background .18s, transform .18s var(--spring), box-shadow .18s;
     letter-spacing: 0.15px; white-space: nowrap;
   }
   .card-link:hover {
     background: #2d2a3e;
     transform: translateY(-1px);
     box-shadow: 0 6px 16px rgba(26,22,37,.22);
   }

   /* Mobile: keep CTA buttons readable and aligned */
   @media (max-width: 575.98px) {
     .card-footer {
       flex-direction: column;
       align-items: stretch;
       gap: 10px;
     }
     .card-footer-cta {
       width: 100%;
       justify-content: stretch;
       flex-wrap: nowrap;
       gap: 10px;
     }
     .card-share-wrap {
       flex: 1 1 50%;
       min-height: 32px;
     }
     .card-share-btn {
       width: 100%;
       justify-content: center;
     }
     .card-link {
       flex: 1 1 50%;
       justify-content: center;
       padding: 10px 14px;
     }
   }
   
   /* Insight tags */
   .card-insights { margin: 4px 0 10px; min-height: 0; }
   .insight-tag {
     display: inline-block; font-size: 10.5px;
     background: #eef0f8; color: #3d3a55;
     border: 1px solid #c8c5e0;
     border-radius: 999px; padding: 2px 9px; margin: 2px 3px 0 0;
     font-weight: 500;
   }
   .insight-drop {
     background: var(--gold-lt); color: var(--gold);
     border-color: var(--gold-bd);
   }
   
   /* Feature tags */
   .feature-tag {
     display: inline-block; font-size: 11px;
     background: var(--ivory-2); color: var(--ink-3);
     border-radius: 4px; padding: 2px 7px; margin: 2px 2px 0 0;
   }
   
   /* No-rating fallback */
   .card-rating:empty { display: none; }
   
  /* ── Share Popover ──────────────────────────────────── */
  .share-popover {
    position: absolute;
    z-index: 9999;
    width: 272px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow:
      0 0 0 1px rgba(26,22,18,.08),
      0 4px 8px rgba(26,22,18,.06),
      0 20px 48px rgba(26,22,18,.16);
    padding: 0;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
    overflow: hidden;
  }
  .share-popover--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .share-popover__arrow {
    position: absolute;
    bottom: -7px;
    width: 14px;
    height: 7px;
    transform: translateX(-50%);
    overflow: visible;
  }
  .share-popover__arrow::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
    filter: drop-shadow(0 2px 3px rgba(26,22,18,.10));
  }
  .share-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f0ece5;
  }
  .share-popover__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8c8278;
  }
  .share-popover__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #f3f0e8;
    color: #5c5448;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
  }
  .share-popover__close:hover { background: #e2dbd2; color: #1a1612; }
  .share-popover__close svg { width: 13px; height: 13px; }

  .share-popover__channels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 14px 12px 10px;
  }
  .share-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 8px;
    border-radius: 12px;
    text-decoration: none;
    color: #1a1612;
    transition: background .16s, transform .16s cubic-bezier(.34,1.56,.64,1);
    cursor: pointer;
  }
  .share-channel:hover {
    background: color-mix(in srgb, var(--channel-color) 10%, transparent);
    transform: translateY(-2px);
  }
  .share-channel:active { transform: translateY(0); }
  .share-channel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--channel-color) 12%, #f8f5f0);
    color: var(--channel-color);
    transition: background .16s, box-shadow .16s;
  }
  .share-channel:hover .share-channel__icon {
    background: color-mix(in srgb, var(--channel-color) 18%, #f8f5f0);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--channel-color) 30%, transparent);
  }
  .share-channel__icon svg { width: 20px; height: 20px; }
  .share-channel__label {
    font-size: 10px;
    font-weight: 600;
    color: #5c5448;
    letter-spacing: 0.1px;
    text-align: center;
    white-space: nowrap;
  }

  .share-popover__divider {
    height: 1px;
    background: #f0ece5;
    margin: 0 12px;
  }
  .share-popover__copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 14px;
  }
  .share-popover__copy-url {
    flex: 1;
    font-size: 11px;
    color: #8c8278;
    background: #f3f0e8;
    border-radius: 8px;
    padding: 7px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: -0.1px;
    border: 1px solid #e2dbd2;
  }
  .share-popover__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s, transform .16s cubic-bezier(.34,1.56,.64,1);
  }
  .share-popover__copy-btn:hover {
    background: var(--sage-lt);
    border-color: var(--sage-bd);
    color: var(--sage-2);
    transform: translateY(-1px);
  }
  .share-popover__copy-btn:active { transform: translateY(0); }
  .share-popover__copy-btn svg { width: 13px; height: 13px; }
  .share-copy-icon { display: block; }
  .share-check-icon { display: none; }
  .share-popover__copy-btn.copied {
    background: var(--sage);
    border-color: var(--sage-2);
    color: #fff;
  }
  .share-popover__copy-btn.copied .share-copy-icon { display: none; }
  .share-popover__copy-btn.copied .share-check-icon { display: block; }

  /* Mobile adjustments */
  @media (max-width: 480px) {
    .share-popover { width: calc(100vw - 24px); max-width: 300px; }
    .share-channel__icon { width: 36px; height: 36px; }
    .share-channel__icon svg { width: 18px; height: 18px; }
  }

   /* ── Footer ─────────────────────────────────────────── */
   .site-footer-simple {
     border-top: 1px solid var(--border);
     background: #f8f9fc; padding: 24px 0;
   }
   .site-footer-simple p {
     text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-4);
   }
   
   /* ── Responsive ────────────────────────────────────── */
   @media (max-width: 1024px) {
     .stage-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 8px; }
     .stage-title { font-size: 44px; }
     .stage-sub { max-width: 100%; }
     .search-stage { padding-bottom: 48px; }
   }
   @media (max-width: 760px) {
     .search-stage { padding-top: calc(var(--header) + 24px); }
     .wizard-card { padding: 24px 20px 20px; }
     .stage-title { font-size: 36px; }
     .container { padding: 0 16px; }
     .results-bar { flex-direction: column; align-items: flex-start; position: static; backdrop-filter: none; }
     .product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
   }
   @media (max-width: 480px) {
     .inline-selects { grid-template-columns: 1fr; }
     .find-btn { width: 100%; }
     .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
     .stage-title { font-size: 31px; }
     .filter-pill { font-size: 10.5px; padding: 5px 10px; }
     .card-price { font-size: 19px; }
   }