:root {
    --accent:      #C8943A;
    --accent-soft: #F0DCB4;
    --accent-pale: #FBF5E8;
    --sage:        #5A7A6A;
    --sage-soft:   #C4D9CE;
    --sage-pale:   #EDF4F0;
    --slate:       #5B7499;
    --slate-soft:  #C4D2E4;
    --slate-pale:  #EDF1F7;
    --rose:        #B85A78;
    --rose-soft:   #F5D0DB;
    --rose-pale:   #FFF0F5;
    --cream:       #FAFAF8;
    --dark:        #141414;
    --mid:         #6A6A6A;
    --light:       #E8E8E4;
    --white:       #FFFFFF;
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.05);
    --shadow-md:   0 8px 32px rgba(0,0,0,0.08);
    --shadow-lg:   0 24px 80px rgba(0,0,0,0.14);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:'Inter','Helvetica Neue',sans-serif; color:var(--dark); background:var(--cream); overflow-x:hidden; min-height:100vh; line-height:1.6; }

  /* ── Nav ── */
  nav { position:sticky; top:0; z-index:300; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 48px; background:rgba(250,250,248,0.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--light); }
  .logo { font-size:21px; font-weight:800; letter-spacing:-0.5px; cursor:pointer; }
  .logo span { color:var(--accent); }
  .nav-links { list-style:none; display:flex; gap:28px; font-size:13px; font-weight:600; color:var(--mid); }
  .nav-links a { text-decoration:none; color:inherit; transition:color .2s; padding-bottom:4px; border-bottom:2px solid transparent; }
  .nav-links a:hover { color:var(--dark); }
  .nav-links a.nav-active { color:var(--accent); border-bottom-color:var(--accent); }
  .nav-right { display:flex; align-items:center; gap:10px; }
  .btn-search-nav { width:38px; height:38px; border-radius:10px; border:1px solid var(--light); background:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; color:var(--mid); }
  .btn-search-nav:hover { border-color:var(--mid); color:var(--dark); }
  .btn-search-nav svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; }
  .btn-ghost-nav { padding:8px 18px; border-radius:8px; border:1px solid var(--light); background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--dark); cursor:pointer; transition:all .2s; }
  .btn-ghost-nav:hover { border-color:var(--mid); }
  .btn-cta-nav { padding:8px 18px; border-radius:8px; border:none; background:var(--dark); color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
  .btn-cta-nav:hover { background:#000; transform:translateY(-1px); }
  .nav-user { display:none; align-items:center; gap:8px; }
  .nav-user.visible { display:flex; }
  .nav-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
  .nav-profile-btn { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border-radius:10px; border:1px solid var(--light); background:transparent; font-family:inherit; cursor:pointer; color:var(--dark); transition:border-color .15s,background .15s; }
  .nav-profile-btn:hover { border-color:var(--slate-soft); background:var(--slate-pale); }
  .nav-profile-text { display:flex; flex-direction:column; align-items:flex-start; }
  .nav-user-name { font-size:13px; font-weight:700; color:var(--dark); line-height:1.2; }
  .nav-profile-label { font-size:10px; font-weight:500; color:var(--mid); line-height:1.2; }
  .btn-logout { padding:6px 14px; border-radius:8px; border:1px solid var(--light); background:transparent; font-family:inherit; font-size:12px; font-weight:600; color:var(--mid); cursor:pointer; }
  .btn-logout:hover { border-color:var(--mid); color:var(--dark); }
  .nav-auth-btns { display:flex; gap:10px; }
  .nav-auth-btns.hidden { display:none; }

  /* ── Hero Nuevo ── */
  .hero-new { background:var(--dark); position:relative; overflow:hidden; padding:80px 24px 72px; text-align:center; }
  .hero-new-bg { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
  .hero-new::before { content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:70%; height:100%; background:radial-gradient(circle,rgba(200,148,58,.12) 0%,transparent 65%); pointer-events:none; }
  .hero-new-inner { position:relative; z-index:2; max-width:720px; margin:0 auto; }
  .hero-new-title { font-size:clamp(36px,5.5vw,64px); font-weight:800; line-height:1.08; letter-spacing:-2px; color:#fff; margin-bottom:18px; }
  .h1-gold { color:var(--accent); }
  .hero-new-sub { font-size:15px; color:rgba(255,255,255,.55); margin-bottom:36px; }
  .hero-searchbar-wrap { position:relative; max-width:600px; margin:0 auto; }
  .hero-searchbar { display:flex; align-items:center; gap:10px; background:#fff; border-radius:100px; padding:8px 8px 8px 22px; box-shadow:0 8px 32px rgba(0,0,0,.35); max-width:600px; margin:0 auto; transition:box-shadow .22s; }
  .hero-searchbar:focus-within { box-shadow:0 10px 40px rgba(0,0,0,.45); }
  .hero-searchbar svg { width:18px; height:18px; stroke:var(--mid); fill:none; stroke-width:2.5; flex-shrink:0; }
  .hero-search-input { flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:15px; color:var(--dark); min-width:0; padding:6px 0; }
  .hero-search-input::placeholder { color:#9ca3af; }
  .hero-searchbar-btn { background:var(--accent); color:#fff; border:none; border-radius:100px; padding:11px 24px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .18s; flex-shrink:0; }
  .hero-searchbar-btn:hover { background:#b37c2a; }
  .hero-brands { margin-top:32px; }
  .hero-brands-label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:14px; }
  .hero-brands-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .hero-brand-chip { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75); border-radius:100px; padding:6px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:all .18s; white-space:nowrap; }
  .hero-brand-chip:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.28); color:#fff; }
  .hero-brand-chip-sp { background:rgba(200,148,58,.18); border-color:rgba(200,148,58,.45); color:#f0c97a; }
  .hero-brand-chip-sp:hover { background:rgba(200,148,58,.28); border-color:rgba(200,148,58,.65); color:#f5d98a; }
  .hero-sp-label { display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; background:rgba(200,148,58,.18); color:rgba(200,148,58,.8); border:1px solid rgba(200,148,58,.25); border-radius:4px; padding:2px 6px; vertical-align:middle; margin-left:6px; }
  .hero-sp-divider { height:1px; background:rgba(255,255,255,.08); margin:16px 0; }

  @keyframes slideInPrice { from{opacity:0;max-height:0} to{opacity:1;max-height:500px} }
  .fcard-a,.fcard-b { display:none; }

  /* ── Controls / Home Section ── */
  /* ── Featured ad strip (home) ── */
  .home-ad-strip { max-width:1160px; margin:0 auto 0; padding:32px 48px 0; }
  .home-ad-card { display:grid; grid-template-columns:200px 1fr; gap:0; border-radius:16px; overflow:hidden; border:1px solid rgba(200,148,58,.25); background:linear-gradient(135deg,#0d0d0d 0%,#1a1200 100%); cursor:pointer; transition:border-color .2s; }
  .home-ad-card:hover { border-color:rgba(200,148,58,.55); }
  .home-ad-img { width:200px; height:160px; object-fit:cover; display:block; }
  .home-ad-img-fallback { width:200px; height:160px; background:linear-gradient(135deg,#1a1200,#2a1f00); display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:800; color:rgba(200,148,58,.4); }
  .home-ad-body { padding:20px 24px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
  .home-ad-badge { font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--accent); border:1px solid rgba(200,148,58,.3); padding:3px 8px; border-radius:4px; width:fit-content; }
  .home-ad-title { font-size:18px; font-weight:800; color:#fff; line-height:1.2; }
  .home-ad-desc { font-size:13px; color:rgba(255,255,255,.55); line-height:1.4; }
  .home-ad-cta { margin-top:4px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent); }
  /* multi-sponsor row */
  .sponsored-row-label { grid-column:1/-1; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--mid); padding:4px 0 8px; }
  .sponsored-row-divider { grid-column:1/-1; height:1px; background:var(--light); margin:4px 0 16px; }
  /* ── Search ad banner (explorar) ── */
  .search-ad-banner { max-width:1100px; margin:0 auto 20px; padding:0 24px; }
  .search-ad-bar { display:flex; align-items:center; gap:16px; padding:14px 20px; border-radius:12px; border:1px solid rgba(200,148,58,.25); background:linear-gradient(90deg,#0d0d0d,#1a1200); cursor:pointer; transition:border-color .2s; }
  .search-ad-bar:hover { border-color:rgba(200,148,58,.5); }
  .search-ad-bar-img { width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0; }
  .search-ad-bar-body { flex:1; min-width:0; }
  .search-ad-bar-title { font-size:14px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .search-ad-bar-desc { font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; }
  .search-ad-bar-badge { font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); border:1px solid rgba(200,148,58,.3); padding:2px 7px; border-radius:4px; white-space:nowrap; }
  .search-ad-bar-arrow { color:var(--accent); flex-shrink:0; }
  /* ── Home KPI row ── */
  /* ── Home see-all / CTA ── */
  .home-see-all-btn { font-size:13px; font-weight:700; color:var(--accent); background:none; border:none; cursor:pointer; padding:0; white-space:nowrap; }
  .home-see-all-btn:hover { text-decoration:underline; }
  .home-explore-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; padding:24px 28px; border-radius:16px; background:var(--dark); }
  .home-explore-cta-text { font-size:16px; font-weight:700; color:#fff; }
  .home-explore-cta-btn { padding:11px 24px; border-radius:10px; background:var(--accent); color:#fff; font-size:14px; font-weight:700; border:none; cursor:pointer; white-space:nowrap; transition:opacity .15s; }
  .home-explore-cta-btn:hover { opacity:.85; }
  .home-section-wrap { max-width:1160px; margin:0 auto 60px; padding:0 48px; }
  .home-section-title-row { display:flex; align-items:baseline; gap:12px; padding:48px 0 16px; border-bottom:1px solid var(--light); margin-bottom:20px; }
  .home-section-title { font-size:22px; font-weight:800; letter-spacing:-0.4px; color:var(--dark); }
  .home-section-count { font-size:13px; color:var(--mid); font-weight:500; }
  .home-section-filters { display:flex; align-items:center; gap:10px; margin-bottom:28px; }

  /* ── Controls / Tabs ── */
  .cat-scroll { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .cat-scroll::-webkit-scrollbar { display:none; }
  .ctab { flex-shrink:0; padding:7px 16px; border-radius:100px; border:1.5px solid var(--light); background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--mid); cursor:pointer; transition:all .18s; white-space:nowrap; }
  .ctab:hover { border-color:var(--mid); color:var(--dark); }
  .ctab.active { background:var(--dark); color:#fff; border-color:var(--dark); }
  .sort-select { flex-shrink:0; padding:7px 34px 7px 13px; border-radius:100px; border:1.5px solid var(--light); background:var(--white); font-family:inherit; font-size:13px; font-weight:600; color:var(--dark); cursor:pointer; outline:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236A6A6A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
  .sort-select:hover { border-color:var(--mid); }
  .feat-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--accent-soft); color:#7A4A00; }

  /* ── Section ── */
  .section { max-width:1100px; margin:0 auto 80px; padding:0 48px; }
  .section-title { font-size:20px; font-weight:800; letter-spacing:-0.4px; }
  .section-title .acc { color:var(--accent); }

  /* ── Cards ── */
  .pcard-img-photo { width:82%; height:82%; object-fit:contain; display:block; }
  .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
  .pcard { background:var(--white); border:none; border-radius:20px; overflow:hidden; cursor:pointer; transition:all .22s; box-shadow:0 2px 14px rgba(0,0,0,.07); display:flex; flex-direction:column; }
  .pcard:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.11); }
  .pcard-img-wrap { padding:14px 14px 6px; }
  .pcard-img { position:relative; aspect-ratio:1; height:auto; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:14px; }
  .pcard-img img { width:100%; height:100%; object-fit:cover; }
  .pcard-img-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .pcard-letter { font-size:60px; font-weight:900; color:rgba(255,255,255,.13); letter-spacing:-3px; line-height:1; user-select:none; }
  .pcard-badge { position:absolute; top:10px; left:10px; z-index:2; font-size:10px; font-weight:700; padding:4px 9px; border-radius:6px; }
  .badge-feat { background:#d6f5e3; color:#1a7a42; }
  .badge-disc { background:var(--sage-soft); color:#2A6644; }
  .pcard-body { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
  .pc-brand { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent); margin-bottom:4px; }
  .pc-name { font-size:14px; font-weight:700; line-height:1.25; color:var(--dark); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .pc-meta { display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
  .pc-size, .pc-conc, .pc-gender { font-size:11px; font-weight:600; color:#5a5a6a; padding:3px 8px; border-radius:6px; letter-spacing:.2px; }
  .pc-size { background:linear-gradient(135deg,#f0efee,#e6e4e0); }
  .pc-conc { background:linear-gradient(135deg,#fef5e4,#f0e3c0); }
  .pc-gender-hombre { background:linear-gradient(135deg,#edf1f7,#d8e3f0); }
  .pc-gender-mujer  { background:linear-gradient(135deg,#fff0f5,#f5dce8); }
  .pc-gender-unisex { background:linear-gradient(135deg,#edf4f0,#d8eee3); }
  .pc-price-row { display:flex; align-items:baseline; gap:5px; margin-bottom:10px; margin-top:auto; }
  .pc-from { font-size:11px; color:var(--mid); font-weight:500; }
  .pc-price { font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--dark); }
  .pc-stores { font-size:12px; font-weight:600; color:var(--mid); border-top:1px solid var(--light); padding-top:9px; display:flex; align-items:center; justify-content:space-between; transition:color .2s; }
  .pc-stores svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; transition:transform .2s; }
  .pcard:hover .pc-stores { color:var(--accent); }
  .pcard:hover .pc-stores svg { transform:translateX(2px); }

  /* Skeleton */
  .skel { animation:pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
  .skel-card { background:var(--white); border:1px solid var(--light); border-radius:16px; overflow:hidden; }
  .skel-img  { height:170px; background:var(--light); }
  .skel-body { padding:14px 16px 16px; }
  .skel-line { height:11px; background:var(--light); border-radius:4px; margin-bottom:8px; }
  .empty-state { grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--mid); font-size:15px; }
  .empty-state strong { display:block; font-size:24px; margin-bottom:8px; color:var(--dark); }

  /* ── Search View ── */
  #search-view { display:none; }
  .search-header { max-width:1100px; margin:0 auto; padding:24px 48px 0; display:flex; align-items:center; gap:16px; }
  .back-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; border:1px solid var(--light); background:var(--white); font-family:inherit; font-size:13px; font-weight:600; color:var(--mid); cursor:pointer; }
  .back-btn:hover { border-color:var(--mid); color:var(--dark); }
  .back-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; }
  .search-view-title { font-size:18px; font-weight:800; }
  .search-bar-wrap { position:relative; max-width:1100px; margin:20px auto; padding:0 48px; }
  .search-bar { display:flex; align-items:center; background:var(--white); border:2px solid var(--light); border-radius:14px; padding:0 16px; transition:border-color .2s; }
  .search-bar:focus-within { border-color:var(--accent); }
  .search-bar svg { width:18px; height:18px; stroke:var(--mid); fill:none; stroke-width:2.5; flex-shrink:0; }
  .search-bar input { flex:1; padding:15px 12px; border:none; background:transparent; font-family:inherit; font-size:16px; color:var(--dark); outline:none; }
  .search-bar input::placeholder { color:rgba(106,106,106,.5); }

  /* ── Autocomplete dropdown ── */
  .autocomplete-dropdown { display:none; position:absolute; top:calc(100% + 8px); left:48px; right:48px; background:var(--white); border:1px solid var(--light); border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.16); overflow:hidden; overflow-y:auto; max-height:420px; z-index:120; text-align:left; }
  .autocomplete-dropdown.open { display:block; }
  .hero-searchbar-wrap .autocomplete-dropdown { left:0; right:0; }
  .ac-section-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--mid); padding:10px 14px 6px; }
  .ac-item { cursor:pointer; }
  .ac-brand-item { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px; font-weight:600; color:var(--dark); }
  .ac-brand-item svg { width:15px; height:15px; stroke:var(--mid); fill:none; stroke-width:2; flex-shrink:0; }
  .ac-perfume-item { display:flex; align-items:center; gap:10px; padding:8px 14px; }
  .ac-perfume-thumb { width:36px; height:36px; border-radius:8px; object-fit:cover; background:var(--light); flex-shrink:0; }
  .ac-perfume-info { flex:1; min-width:0; }
  .ac-perfume-brand { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); }
  .ac-perfume-name { font-size:13px; font-weight:600; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ac-perfume-price { font-size:12px; font-weight:700; color:var(--dark); flex-shrink:0; }
  .ac-item:hover, .ac-item.active { background:var(--accent-pale); }
  .search-clear { width:28px; height:28px; border-radius:7px; border:none; background:var(--light); color:var(--mid); font-size:13px; cursor:pointer; display:none; align-items:center; justify-content:center; flex-shrink:0; }
  .search-clear.visible { display:flex; }
  .search-clear:hover { background:var(--dark); color:#fff; }
  .search-controls-wrap { max-width:1100px; margin:0 auto 16px; padding:0 48px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .gchip { padding:6px 14px; border-radius:100px; border:1px solid var(--light); background:transparent; font-family:inherit; font-size:12px; font-weight:600; color:var(--mid); cursor:pointer; }
  .gchip:hover { border-color:var(--mid); color:var(--dark); }
  .gchip.active { background:var(--dark); color:#fff; border-color:var(--dark); }
  .gchip-cat.active { background:var(--accent); border-color:var(--accent); color:#fff; }
  .brand-chips-wrap { max-width:1100px; margin:0 auto; padding:20px 48px 16px; display:none; flex-direction:column; gap:12px; }
  .brand-chips-wrap.visible { display:flex; }
  .brand-chips-label { font-size:11px; font-weight:700; color:var(--mid); letter-spacing:.5px; text-transform:uppercase; }
  .brand-chips { display:flex; gap:8px; flex-wrap:wrap; }
  .bchip { padding:7px 14px; border-radius:100px; border:1.5px solid var(--light); background:transparent; font-family:inherit; font-size:12px; font-weight:600; color:var(--dark); cursor:pointer; transition:all .15s; }
  .bchip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .sort-label { font-size:12px; font-weight:600; color:var(--mid); white-space:nowrap; }
  .search-sort-wrap { display:flex; align-items:center; gap:8px; }
  .fuzzy-hint { max-width:1100px; margin:-8px auto 10px; padding:0 48px; font-size:12px; color:var(--mid); font-style:italic; }
  .fuzzy-hint strong { color:var(--accent); font-style:normal; cursor:pointer; text-decoration:underline dotted; }

  /* ── Gamification ── */
  .gamif-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .gcard { background:var(--white); border:1px solid var(--light); border-radius:16px; padding:22px; transition:all .2s; }
  .gcard:hover { border-color:var(--mid); }
  .gcard-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--light); color:var(--mid); margin-bottom:10px; }
  .gcard-tag-accent { background:var(--accent-soft); color:#6A4A00; }
  .gcard-highlight { border-color:var(--accent-soft); background:var(--accent-pale); }
  .gcard-highlight:hover { border-color:var(--accent); }
  .gicon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  .gicon svg { width:19px; height:19px; fill:none; stroke-width:2; }
  .gi-p { background:var(--accent-pale); } .gi-p svg { stroke:var(--accent); }
  .gi-l { background:var(--slate-pale); } .gi-l svg { stroke:var(--slate); }
  .gi-m { background:var(--sage-pale); }  .gi-m svg { stroke:var(--sage); }
  .gi-o { background:#F5EBE8; }           .gi-o svg { stroke:#A6685C; }
  .gtitle { font-size:14px; font-weight:700; margin-bottom:5px; color:var(--dark); }
  .gdesc  { font-size:12px; color:var(--mid); line-height:1.55; }

  /* ── Store Modal ── */
  .modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.5); backdrop-filter:blur(5px); display:none; align-items:flex-end; justify-content:center; padding:0; }
  .modal-overlay.open { display:flex; }
  .modal-panel { background:var(--white); border-radius:24px 24px 0 0; width:100%; max-width:560px; padding:24px 28px 40px; max-height:88vh; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; animation:slideUp .26s cubic-bezier(.34,1.2,.64,1); }
  .modal-panel::-webkit-scrollbar { display:none; }
  @keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
  @media (min-height:600px) and (min-width:560px) {
    .modal-overlay { align-items:center; padding:24px; }
    .modal-panel { border-radius:20px; max-height:82vh; }
  }
  .modal-handle { width:36px; height:4px; border-radius:2px; background:var(--light); margin:0 auto 20px; }
  .modal-header { margin-bottom:4px; padding-top:4px; }
  .modal-close { width:30px; height:30px; border-radius:8px; flex-shrink:0; border:1px solid var(--light); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--mid); font-size:14px; }
  .modal-close:hover { background:var(--light); color:var(--dark); }
  /* Modal image bubble */
  .modal-img-section { display:flex; justify-content:center; padding:20px 0 8px; }
  .modal-img-bubble { width:160px; height:160px; border-radius:22px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
  .modal-img-photo { width:85%; height:85%; object-fit:contain; display:block; }
  /* Hero price */
  .modal-price-hero { display:flex; align-items:baseline; gap:10px; margin:0 0 18px; flex-wrap:wrap; }
  .mph-from { font-size:13px; color:var(--mid); font-weight:500; }
  .mph-price { font-size:34px; font-weight:900; letter-spacing:-1.5px; color:var(--dark); line-height:1; }
  .mph-save { font-size:11px; font-weight:700; color:#16a34a; background:rgba(22,163,74,.1); padding:4px 10px; border-radius:100px; align-self:center; }
  .mph-ml { font-size:12px; color:var(--mid); align-self:center; }
  .modal-brand { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
  .modal-name { font-size:17px; font-weight:800; color:var(--dark); line-height:1.25; margin-bottom:8px; word-break:break-word; overflow-wrap:break-word; }
  .modal-meta-row { display:flex; align-items:center; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
  .modal-divider { height:1px; background:var(--light); margin:20px 0; }
  .modal-savings { display:none; }
  .store-list { display:flex; flex-direction:column; gap:8px; }
  .store-row { display:grid; grid-template-columns:32px 1fr auto auto auto; align-items:center; gap:10px; padding:13px 15px; border-radius:14px; border:1.5px solid var(--light); transition:all .18s; }
  .store-row.best { border-color:var(--accent-soft); background:linear-gradient(135deg,#fef9f0,#fdf3e0); }
  .store-row:not(.best):hover { border-color:#ccc; background:#fafafa; }
  .store-rank { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
  .rank-1 { background:var(--accent); color:#fff; }
  .rank-n { background:var(--light); color:var(--mid); }
  .store-name { font-size:14px; font-weight:700; color:var(--dark); }
  .store-sponsored-badge { display:inline-block; margin-left:7px; font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:rgba(200,148,58,.12); color:var(--accent); border:1px solid rgba(200,148,58,.25); vertical-align:middle; }
  .store-diff { font-size:10px; font-weight:700; padding:3px 8px; border-radius:100px; white-space:nowrap; }
  .diff-best { background:var(--accent-soft); color:#7A4A00; }
  .diff-more { background:#f0f0f0; color:var(--mid); }
  .store-price { font-size:16px; font-weight:800; color:var(--dark); white-space:nowrap; }
  .store-price.best-p { color:var(--accent); font-size:18px; }
  .store-cta { padding:7px 14px; border-radius:9px; border:none; background:var(--dark); color:#fff; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block; }
  .store-cta:hover { background:#000; }
  .report-link-btn { background:none; border:none; cursor:pointer; font-size:11px; color:#ddd; padding:0 2px; margin-left:0; line-height:1; }
  .report-link-btn:hover { color:#e57373; }

  /* ── Bottle Rating ── */
  .rating-section { margin-top:28px; padding-top:20px; border-top:1px solid var(--light); }
  .rating-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .rating-title { font-size:14px; font-weight:700; color:var(--dark); }
  .bottle-row { display:flex; gap:8px; margin-bottom:12px; }
  .bottle-btn { width:28px; height:42px; border:none; background:none; cursor:pointer; padding:0; transition:transform .15s, color .15s; color:var(--light); display:flex; align-items:center; justify-content:center; }
  .bottle-btn:hover { transform:scale(1.15); }
  .bottle-btn.filled  { color:var(--accent); }
  .bottle-btn.preview { color:var(--accent-soft); }
  .bottle-btn svg { width:100%; height:100%; }
  .rating-msg  { font-size:11px; color:var(--mid); font-style:italic; }
  .rating-gate { background:var(--slate-pale); border:1.5px solid var(--light); border-radius:12px; padding:20px; text-align:center; font-size:13px; color:var(--mid); }
  .rating-gate a { color:var(--accent); text-decoration:none; font-weight:600; cursor:pointer; }

  /* ── Reviews ── */
  .reviews-section { margin-top:28px; padding-top:20px; border-top:1px solid var(--light); }
  .reviews-title { font-size:14px; font-weight:700; color:var(--dark); margin-bottom:16px; }
  .review-textarea { width:100%; padding:14px 16px; border:1.5px solid var(--light); border-radius:10px; font-family:inherit; font-size:13px; color:var(--dark); resize:vertical; min-height:90px; outline:none; transition:border-color .2s; box-sizing:border-box; line-height:1.6; }
  .review-textarea:focus { border-color:var(--accent); }
  .review-submit-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
  .review-char-count { font-size:11px; color:var(--mid); }
  .review-submit-btn { padding:10px 20px; border-radius:8px; border:none; background:var(--dark); color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
  .review-submit-btn:disabled { opacity:.4; cursor:not-allowed; }
  .review-submit-btn:hover:not(:disabled) { background:#000; }
  .review-list { margin-top:16px; display:flex; flex-direction:column; gap:12px; }
  .review-item { padding:12px; background:var(--slate-pale,#f8f9fc); border-radius:10px; border:1px solid var(--light); }
  .review-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .review-author { font-size:12px; font-weight:700; color:var(--dark); }
  .review-date { font-size:11px; color:var(--mid); }
  .review-stars { font-size:11px; color:#f59e0b; margin-left:auto; }
  .review-bottles { display:flex; gap:3px; margin-left:auto; }
  .review-bottle { width:13px; height:20px; display:inline-flex; align-items:center; color:var(--light); }
  .review-bottle.filled { color:var(--accent); }
  .review-bottle svg { width:100%; height:100%; }
  .review-body { font-size:13px; color:var(--dark); line-height:1.55; }
  .review-footer { margin-top:8px; }
  .review-helpful-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; border:1px solid var(--light); background:transparent; font-family:inherit; font-size:11px; font-weight:600; color:var(--mid); cursor:pointer; transition:all .15s; }
  .review-helpful-btn:hover { border-color:var(--accent); color:var(--accent); }
  .review-helpful-btn.voted { border-color:var(--accent); color:var(--accent); background:var(--accent)11; }
  .helpful-count { font-size:11px; }
  .review-load-more { display:block; width:100%; margin-top:8px; padding:8px; background:none; border:1px dashed var(--light); border-radius:10px; font-family:inherit; font-size:12px; font-weight:600; color:var(--mid); cursor:pointer; transition:all .15s; }
  .review-load-more:hover { border-color:var(--accent); color:var(--accent); }
  .review-gate { font-size:12px; color:var(--mid); margin-bottom:10px; }
  .review-gate a { color:var(--accent); text-decoration:none; font-weight:600; cursor:pointer; }
  .review-msg { font-size:12px; padding:7px 10px; border-radius:7px; margin-top:6px; display:none; }
  .review-msg.ok { display:block; background:#f0fdf4; color:#166534; }
  .review-msg.err { display:block; background:#fff1f2; color:#9f1239; }

  /* ── Auth Modal ── */
  #auth-modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; }
  #auth-modal-overlay.open { display:flex; }
  .auth-panel { background:var(--white); border-radius:20px; width:100%; max-width:400px; padding:32px; animation:fadeScale .22s cubic-bezier(.34,1.2,.64,1); }
  @keyframes fadeScale { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
  .auth-close-row { display:flex; justify-content:flex-end; margin-bottom:4px; }
  .auth-close { width:28px; height:28px; border-radius:8px; border:1px solid var(--light); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--mid); font-size:14px; }
  .auth-close:hover { background:var(--light); }
  .auth-logo { font-size:18px; font-weight:800; margin-bottom:20px; }
  .auth-logo span { color:var(--accent); }
  .auth-tabs { display:flex; margin-bottom:24px; border-bottom:1px solid var(--light); }
  .auth-tab { flex:1; padding:10px 0; text-align:center; font-family:inherit; font-size:13px; font-weight:600; color:var(--mid); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s; }
  .auth-tab.active { color:var(--dark); border-bottom-color:var(--dark); }
  .auth-view { display:none; flex-direction:column; gap:14px; }
  .auth-view.active { display:flex; }
  .auth-field { display:flex; flex-direction:column; gap:6px; }
  .auth-label { font-size:11px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:.5px; }
  .auth-input { padding:11px 14px; border:1px solid var(--light); border-radius:10px; font-family:inherit; font-size:14px; color:var(--dark); outline:none; transition:border-color .2s; }
  .auth-input:focus { border-color:var(--accent); }
  .auth-btn { padding:13px; border-radius:10px; border:none; background:var(--dark); color:#fff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; margin-top:4px; }
  .auth-btn:hover { background:#000; }
  .auth-btn:disabled { opacity:.5; cursor:not-allowed; }
  .auth-msg { font-size:12px; padding:9px 12px; border-radius:8px; display:none; line-height:1.5; }
  .auth-msg.error   { display:block; background:var(--rose-pale); color:#8A2A40; }
  .auth-msg.success { display:block; background:var(--sage-pale); color:#2A6644; }
  .auth-footer-link { text-align:center; font-size:12px; color:var(--mid); }
  .auth-footer-link a { color:var(--accent); text-decoration:none; font-weight:600; cursor:pointer; }
  .auth-footer-link a:hover { text-decoration:underline; }
  .auth-divider { display:flex; align-items:center; gap:10px; margin:10px 0; color:var(--mid); font-size:12px; }
  .auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--light); }
  .btn-google { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px; border-radius:10px; border:1.5px solid var(--light); background:#fff; color:var(--dark); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; margin-bottom:4px; }
  .btn-google:hover { border-color:#dadce0; background:#f8f9fa; box-shadow:0 1px 6px rgba(0,0,0,.1); }

  /* ── Signup promo popup ── */
  #signup-promo-overlay { position:fixed; inset:0; z-index:1900; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; }
  #signup-promo-overlay.open { display:flex; }
  .promo-panel { position:relative; background:var(--white); border-radius:20px; width:100%; max-width:400px; overflow:hidden; animation:fadeScale .25s cubic-bezier(.34,1.2,.64,1); }
  .promo-head { background:linear-gradient(135deg,var(--dark),#2a2a2a); padding:28px 28px 22px; color:#fff; text-align:center; }
  .promo-close { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; z-index:1; }
  .promo-close:hover { background:rgba(255,255,255,.18); }
  .promo-icon { display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
  .promo-icon svg { width:32px; height:32px; color:var(--accent); }
  .promo-head h3 { font-size:19px; font-weight:800; line-height:1.3; margin-bottom:6px; }
  .promo-head h3 span { color:var(--accent); }
  .promo-head p { font-size:13px; color:rgba(255,255,255,.75); line-height:1.5; }
  .promo-body { padding:22px 28px 28px; display:flex; flex-direction:column; gap:16px; }
  .promo-perks { display:flex; flex-direction:column; gap:12px; }
  .promo-perk { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--dark); font-weight:600; }
  .promo-perk-ico { width:34px; height:34px; border-radius:10px; background:var(--accent-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent); }
  .promo-perk-ico svg { width:17px; height:17px; }
  .promo-cta { padding:13px; border-radius:10px; border:none; background:var(--accent); color:#fff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:opacity .2s; }
  .promo-cta:hover { opacity:.9; }
  .promo-skip { text-align:center; font-size:12px; color:var(--mid); background:none; border:none; cursor:pointer; font-family:inherit; }
  .promo-skip:hover { color:var(--dark); text-decoration:underline; }
  .wishlist-btn { width:32px; height:32px; border-radius:50%; border:none; background:var(--light); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; padding:0; flex-shrink:0; }
  .wishlist-btn:hover { background:var(--slate-soft); }
  .wishlist-btn svg { width:16px; height:16px; }
  .wishlist-btn.active svg { fill:var(--dark); stroke:var(--dark); }
  .wishlist-price-row { display:flex; gap:8px; margin-top:12px; }
  .wishlist-price-input { flex:1; padding:9px 12px; border-radius:8px; border:1.5px solid var(--light); font-family:inherit; font-size:13px; outline:none; }
  .wishlist-price-input:focus { border-color:var(--accent); }
  .wishlist-save-btn { padding:9px 16px; border-radius:8px; border:none; background:var(--dark); color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
  .avg-rating { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--mid); margin-top:4px; }

  /* ── Footer ── */
  footer { background:var(--white); padding:52px 48px 40px; border-top:1px solid var(--light); margin-top:60px; }
  /* ── Footer oscuro ── */
  .footer-dark { background:#111111; margin-top:80px; }
  .footer-dark-inner { max-width:1160px; margin:0 auto; padding:64px 48px 32px; }
  .footer-dark-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
  .footer-dark-brand { }
  .foot-logo-dark { font-size:20px; font-weight:800; color:#fff; margin-bottom:12px; }
  .foot-logo-dark span { color:var(--accent); }
  .footer-dark-tagline { font-size:13px; color:rgba(255,255,255,.4); line-height:1.65; }
  .footer-dark-col-title { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:16px; }
  .footer-dark-links { display:flex; flex-direction:column; gap:10px; }
  .footer-dark-links a { font-size:13px; color:rgba(255,255,255,.55); text-decoration:none; cursor:pointer; transition:color .15s; }
  .footer-dark-links a:hover { color:#fff; }
  .footer-dark-link-accent { color:var(--accent) !important; }
  .footer-dark-link-accent:hover { color:#e8a840 !important; }
  .footer-dark-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .footer-dark-bottom p { font-size:12px; color:rgba(255,255,255,.3); }
  .footer-dark-bottom-links { display:flex; gap:20px; }
  .footer-dark-bottom-links a { font-size:12px; color:rgba(255,255,255,.3); text-decoration:none; transition:color .15s; }
  .footer-dark-bottom-links a:hover { color:rgba(255,255,255,.6); }
  /* old footer selectors kept for search-view footer */
  .foot-logo { font-size:20px; font-weight:800; }
  .foot-logo span { color:var(--accent); }
  .foot-copy { font-size:12px; color:var(--mid); }
  .foot-links { list-style:none; display:flex; gap:16px; flex-wrap:wrap; }
  .foot-links li { display:inline; }
  .foot-links a { font-size:12px; color:var(--mid); text-decoration:none; transition:color .15s; }
  .foot-links a:hover { color:var(--accent); }
  /* ── Load more ── */
  .load-more-btn { display:block; width:100%; max-width:320px; margin:32px auto 0; padding:14px 24px; background:transparent; border:1.5px solid var(--light); border-radius:12px; font-size:14px; font-weight:600; color:var(--mid); cursor:pointer; transition:border-color .15s,color .15s; }
  .load-more-btn:hover { border-color:var(--accent); color:var(--accent); }

  @media (max-width:900px) {
    nav { padding:0 24px; }
    .nav-links { display:none; }
    .hero-new { padding:60px 20px 56px; }
    .hero-new-title { font-size:36px; letter-spacing:-1px; }
    .hero-searchbar-placeholder { display:none; }
    .home-section-wrap { padding:0 20px; }
    .home-section-header { flex-direction:column; gap:16px; }
    .home-section-right { width:100%; }
    .section,.search-header,.search-bar-wrap,.search-controls-wrap,.fuzzy-hint,.brand-chips-wrap { padding-left:24px; padding-right:24px; }
    #search-suggest { left:24px; right:24px; }
    .gamif-grid { grid-template-columns:repeat(2,1fr); }
    .footer-dark-inner { padding:48px 24px 24px; }
    .footer-dark-grid { grid-template-columns:1fr 1fr; gap:32px; }
    .footer-dark-bottom { flex-direction:column; align-items:flex-start; gap:8px; }
  }

  /* ── Ads ── */
  .fcard-ad-badge { position:absolute; top:10px; left:10px; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:3px 8px; border-radius:5px; background:rgba(0,0,0,.55); color:var(--accent); border:1px solid rgba(200,148,58,.4); z-index:3; backdrop-filter:blur(4px); }
  .fcard-ad-img { width:100%; height:200px; object-fit:cover; object-position:center top; display:block; }
  .pcard-ad-badge { position:absolute; top:10px; left:10px; z-index:3; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:3px 8px; border-radius:5px; background:rgba(200,148,58,.15); color:var(--accent); border:1px solid rgba(200,148,58,.3); }
  .pcard-sponsored { border-color:var(--accent-soft); }
  .pcard-sponsored:hover { border-color:var(--accent); }

  /* ── Profile view ── */
  .profile-wrap { max-width:960px; margin:0 auto; padding:24px 24px 80px; }
  .profile-layout { display:grid; grid-template-columns:236px 1fr; gap:20px; align-items:start; }
  /* Left sidebar card */
  .profile-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:24px 20px; text-align:center; position:relative; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); }
  .profile-card::before { content:''; position:absolute; top:-50px; right:-50px; width:160px; height:160px; background:var(--accent); border-radius:50%; filter:blur(60px); opacity:.08; pointer-events:none; }
  .profile-avatar-wrap { width:84px; height:84px; margin:0 auto 14px; position:relative; cursor:pointer; }
  .profile-avatar { width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#c06a20); color:#fff; font-size:26px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:-1px; box-shadow:0 0 0 3px rgba(200,148,58,.2),0 4px 20px rgba(200,148,58,.2); overflow:hidden; position:relative; transition:transform .15s; }
  .profile-avatar-wrap:hover .profile-avatar { transform:scale(1.04); }
  .profile-avatar-edit-hint { position:absolute; bottom:0; right:0; width:24px; height:24px; border-radius:50%; background:var(--dark); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25); }
  .profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .avatar-color-picker { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:12px 0 4px; }
  .avatar-color-swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s,border-color .15s; }
  .avatar-color-swatch:hover { transform:scale(1.15); }
  .avatar-color-swatch.selected { border-color:var(--dark); transform:scale(1.15); }
  .avatar-color-label { font-size:10.5px; color:var(--mid); margin-bottom:8px; }
  .profile-name { font-size:16px; font-weight:700; color:var(--dark); line-height:1.2; }
  .profile-email { font-size:11px; color:var(--mid); margin-top:3px; word-break:break-all; line-height:1.4; }
  .profile-join { font-size:10.5px; color:var(--mid); margin-top:2px; }
  .profile-level-badge { display:inline-block; font-size:11px; font-weight:700; padding:4px 12px; border-radius:100px; background:var(--accent); color:#fff; margin:12px 0 8px; }
  .xp-bar-wrap { width:100%; height:5px; background:rgba(0,0,0,.07); border-radius:4px; overflow:hidden; margin-bottom:6px; }
  .xp-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),#e8a94a); border-radius:4px; transition:width .4s ease; }
  .xp-numbers { font-size:12px; font-weight:600; color:var(--dark); }
  .xp-numbers strong { font-size:13px; }
  .xp-next-label { font-size:10.5px; color:var(--mid); margin-top:3px; display:block; }
  .profile-divider { height:1px; background:var(--light); margin:16px 0; }
  .profile-card-stats { display:flex; align-items:center; justify-content:center; gap:0; }
  .pcs-item { flex:1; text-align:center; padding:4px 0; }
  .pcs-val { display:block; font-size:18px; font-weight:800; color:var(--dark); line-height:1; }
  .pcs-label { display:block; font-size:9.5px; font-weight:600; color:var(--mid); margin-top:3px; }
  .pcs-sep { width:1px; height:28px; background:var(--light); flex-shrink:0; }
  /* Right tabs + content */
  .profile-right { min-width:0; }
  .profile-tab-bar { display:flex; background:var(--white); border:1px solid var(--light); border-radius:14px; overflow:hidden; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
  .profile-tab { flex:1; padding:13px 10px; border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--mid); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .15s; border-right:1px solid var(--light); }
  .profile-tab:last-child { border-right:none; }
  .profile-tab.active { background:var(--dark); color:#fff; }
  .profile-tab.active .ptab-count { background:rgba(255,255,255,.18); color:#fff; }
  .ptab-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--light); color:var(--mid); font-size:11px; font-weight:700; }
  .profile-tab-content { display:none; }
  .profile-tab-content.active { display:block; animation:fadeUp .15s ease; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
  .profile-section { background:var(--white); border:1px solid var(--light); border-radius:16px; overflow:hidden; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
  .profile-section-head { padding:14px 18px; border-bottom:1px solid var(--light); display:flex; align-items:center; justify-content:space-between; }
  .profile-section-title { font-size:14px; font-weight:700; color:var(--dark); }
  .profile-section-sub { font-size:11px; color:var(--mid); background:var(--light); padding:2px 9px; border-radius:100px; }
  .profile-section-body { padding:16px 18px; }
  .witem { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--light); }
  .witem:last-child { border-bottom:none; }
  .witem-img { width:52px; height:52px; border-radius:8px; flex-shrink:0; cursor:pointer; overflow:hidden; }
  .witem-letter { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:rgba(255,255,255,.25); }
  .witem-body { flex:1; min-width:0; }
  .witem-brand { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--mid); }
  .witem-name { font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .witem-price-row { display:flex; align-items:center; gap:6px; margin:3px 0 2px; }
  .witem-price { font-size:15px; font-weight:800; }
  .witem-retailer { font-size:11px; color:var(--mid); }
  .witem-alert-on { font-size:11px; color:var(--accent); font-weight:600; }
  .witem-alert-off { font-size:11px; color:var(--mid); }
  .witem-del { flex-shrink:0; width:28px; height:28px; border-radius:7px; border:1px solid var(--light); background:transparent; color:var(--mid); cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
  .witem-del:hover { background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.3); color:#dc2626; }
  .empty-wishlist { text-align:center; padding:40px 20px; }
  .empty-wishlist strong { display:block; font-size:15px; color:var(--dark); margin-bottom:8px; }
  .badge-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .badge-chip { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:100px; background:rgba(200,148,58,.08); border:1px solid rgba(200,148,58,.2); font-size:12px; font-weight:600; color:#8A5A00; }
  .badge-chip-icon { font-size:14px; }
  /* ── Rankings view ── */
  .rnk-header { background:var(--white); border-bottom:1px solid var(--light); }
  .rnk-header-inner { max-width:1160px; margin:0 auto; padding:32px 48px 0; }
  .rnk-title { font-size:28px; font-weight:800; letter-spacing:-0.6px; color:var(--dark); margin:16px 0 6px; }
  .rnk-desc { font-size:14px; color:var(--mid); line-height:1.55; margin-bottom:20px; }
  .rnk-tabs { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:0; }
  .rnk-tabs::-webkit-scrollbar { display:none; }
  .rank-tab { flex-shrink:0; padding:9px 20px; border-radius:100px; border:none; background:#f3f4f6; font-family:inherit; font-size:13px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .18s; white-space:nowrap; position:relative; bottom:-1px; }
  .rank-tab:hover { background:#e5e7eb; color:var(--dark); }
  .rank-tab.active { background:var(--dark); color:#fff; }
  .rankings-wrap { max-width:1160px; margin:0 auto; padding:32px 48px 80px; }
  /* ── Price chart (modal) ── */
  .price-chart-wrap { padding:14px 0; border-bottom:1px solid var(--light); }
  .price-chart-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
  .price-chart-title { font-size:12px; font-weight:700; color:var(--dark); }
  .chart-stat-row { display:flex; gap:14px; }
  .chart-stat { display:flex; flex-direction:column; align-items:flex-end; }
  .cs-label { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--mid); }
  .cs-val { font-size:12px; font-weight:700; }
  .cs-green { color:#16a34a; }
  .cs-accent { color:var(--accent); }
  /* ── Dupes section (modal) ── */
  .dupes-section { padding:14px 0; border-bottom:1px solid var(--light); }
  .dupes-title { font-size:12px; font-weight:700; color:var(--dark); margin-bottom:10px; }
  .dupes-list { display:flex; flex-direction:column; gap:8px; }
  .dupe-item { display:flex; align-items:center; gap:10px; cursor:pointer; padding:9px 10px; border-radius:10px; border:1px solid var(--light); background:var(--white); transition:border-color .15s, background .15s; }
  .dupe-item:hover { border-color:var(--slate-soft); background:var(--slate-pale); }
  .dupe-img { width:44px; height:44px; border-radius:6px; flex-shrink:0; overflow:hidden; }
  .dupe-letter { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:rgba(255,255,255,.25); }
  .dupe-body { flex:1; min-width:0; }
  .dupe-brand { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--mid); }
  .dupe-name { font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dupe-price { font-size:13px; font-weight:700; margin-top:2px; }
  .dupe-sim { font-size:14px; font-weight:800; color:var(--accent); text-align:center; flex-shrink:0; min-width:44px; line-height:1.2; }
  @media (max-width:600px) {
    .profile-layout { grid-template-columns:1fr; }
    .profile-avatar-wrap { width:72px; height:72px; }
    .profile-avatar { width:72px; height:72px; font-size:22px; }
    .rankings-wrap { padding:24px 16px 80px; }
    .rnk-header-inner { padding:24px 16px 0; }
    .rnk-title { font-size:22px; }
    .dupes-hero-dark { padding:36px 16px 36px; }
    .dupes-hero-dark-title { font-size:26px; }
    .dupes-results-wrap { padding:16px 12px 80px; }
  }

  /* ── Badge toast ── */
  .badge-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--dark); color:#fff; border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 32px rgba(0,0,0,.35); z-index:9999; opacity:0; transition:opacity .35s, transform .35s; pointer-events:none; white-space:nowrap; border:1px solid rgba(200,148,58,.3); }
  .badge-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
  .badge-toast-icon { font-size:22px; flex-shrink:0; }
  .badge-toast-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--accent); }
  .badge-toast-name { font-size:14px; font-weight:700; margin-top:1px; }
  .badge-toast-desc { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
  /* ── Simple toast ── */
  .simple-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px); background:#141414; color:#fff; padding:11px 22px; border-radius:100px; font-size:13px; font-weight:600; white-space:nowrap; opacity:0; transition:opacity .25s, transform .25s; z-index:9999; box-shadow:0 4px 20px rgba(0,0,0,.25); }
  .simple-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
  /* ── Purchase button (modal) ── */
  .purchase-btn { padding:8px 18px; border-radius:8px; border:1px solid var(--light); background:var(--white); font-family:inherit; font-size:13px; font-weight:600; color:var(--mid); cursor:pointer; transition:all .18s; }
  .purchase-btn:hover { border-color:var(--mid); color:var(--dark); }
  .purchase-btn.active { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.35); color:#16a34a; }

/* ── Request Alert Card ── */
.request-alert-card{display:flex;gap:16px;align-items:flex-start;background:var(--light);border:1.5px solid var(--sage-soft);border-radius:16px;padding:20px 22px;margin-top:24px;max-width:480px}
.rac-icon{font-size:28px;flex-shrink:0;margin-top:2px}
.rac-body{flex:1}
.rac-title{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px}
.rac-sub{font-size:13px;color:var(--mid);margin-bottom:14px;line-height:1.5}
.rac-form{display:flex;flex-direction:column;gap:8px}
.rac-input{padding:9px 12px;border-radius:9px;border:1.5px solid #d0d0d0;font-family:inherit;font-size:13px;color:var(--dark);outline:none;background:#fff}
.rac-input:focus{border-color:var(--sage-dark)}
.rac-btn{padding:9px 18px;border-radius:9px;border:none;background:var(--dark);color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;align-self:flex-start;transition:opacity .15s}
.rac-btn:hover{opacity:.85}

/* ── Price Chart (upgraded) ── */
.price-chart-wrap{background:var(--light);border-radius:14px;padding:16px 16px 10px;margin:14px 0}
.price-chart-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.price-chart-title{font-size:13px;font-weight:700;color:var(--dark)}
.chart-stat-row{display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.chart-stat{display:flex;flex-direction:column;gap:2px}
.cs-label{font-size:10px;color:var(--mid);font-weight:500}
.cs-val{font-size:13px;font-weight:700;color:var(--dark)}
.cs-green{color:#16a34a}
.cs-accent{color:var(--accent)}

/* ── Badge Grid (profile) ── */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px;margin-top:4px}
.badge-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:#fff;border-radius:14px;border:1.5px solid var(--light);text-align:center;transition:transform .15s,box-shadow .15s;cursor:default}
.badge-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.badge-card.badge-locked{background:var(--cream);border-color:var(--light)}
.badge-card.badge-locked .badge-card-img{filter:grayscale(100%);opacity:.4}
.badge-card.badge-locked .badge-card-name{color:var(--mid)}
.badge-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.badge-card-icon svg{width:32px;height:32px}
.badge-card-img{width:52px;height:52px;border-radius:10px}
.badge-card-fallback{width:52px;height:52px;border-radius:10px;background:var(--light);align-items:center;justify-content:center;font-size:24px}
.badge-card-name{font-size:11px;font-weight:700;color:var(--dark);line-height:1.2}
.badge-card-desc{font-size:10px;color:var(--mid);line-height:1.3}
.cond-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;flex-shrink:0}
.review-badge-chip{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}

/* ── MARKETPLACE ── */
.market-wrap{max-width:1200px;margin:0 auto;padding:20px 16px 60px}

/* Banner */
.market-banner{background:linear-gradient(135deg,var(--dark) 0%,#1a0a2e 100%);border-radius:20px;padding:28px 32px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.market-banner-tag{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;background:var(--accent);color:#fff;padding:3px 10px;border-radius:100px;margin-bottom:10px}
.market-banner-title{font-size:22px;font-weight:900;color:#fff;line-height:1.25;margin-bottom:8px}
.market-banner-sub{font-size:13px;color:rgba(255,255,255,.65);line-height:1.55;margin-bottom:16px;max-width:400px}
.market-sell-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s}
.market-sell-btn:hover{opacity:.85}
.market-banner-right{display:flex;gap:24px;flex-shrink:0}
.market-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.ms-val{font-size:26px;font-weight:900;color:#fff}
.ms-lbl{font-size:11px;color:rgba(255,255,255,.5);text-align:center}

/* Filters */
.market-filters{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.mf-chips{display:flex;gap:8px;flex-wrap:wrap}
.mf-chip{padding:7px 14px;border-radius:100px;border:1.5px solid var(--light);background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--mid);cursor:pointer;transition:all .15s}
.mf-chip:hover{border-color:var(--dark);color:var(--dark)}
.mf-chip.active{border-color:var(--dark);background:var(--dark);color:#fff}

/* Listing card extras */
.market-card{cursor:pointer;position:relative}
.market-cond-badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:100px}
.market-verified-dot{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:#1d4ed8;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.market-seller-row{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--light)}
.market-seller-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--dark),#555);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* WhatsApp CTA */
.market-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border-radius:14px;background:#25d366;color:#fff;font-family:inherit;font-size:15px;font-weight:700;text-decoration:none;transition:opacity .15s}
.market-wa-btn:hover{opacity:.9}

/* Sell form */
.sell-step-title{font-size:14px;font-weight:800;color:var(--dark);margin-bottom:14px}
.sell-input{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #d8d8d8;font-family:inherit;font-size:13px;color:var(--dark);outline:none;background:#fff;box-sizing:border-box}
.sell-input:focus{border-color:var(--dark)}
.sell-label{display:block;font-size:12px;font-weight:600;color:var(--mid);margin-bottom:6px}
.sell-result-item{padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .1s}
.sell-result-item:hover{background:var(--light)}
.sell-condition-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sell-cond-opt{padding:12px;border-radius:12px;border:1.5px solid var(--light);cursor:pointer;transition:all .15s;text-align:center}
.sell-cond-opt:hover{border-color:var(--dark)}
.sell-cond-opt.selected{border-color:var(--dark);background:var(--dark)}
.sell-cond-opt.selected .sco-label,.sell-cond-opt.selected .sco-desc{color:#fff}
.sco-icon{font-size:22px;margin-bottom:4px}
.sco-label{font-size:12px;font-weight:700;color:var(--dark)}
.sco-desc{font-size:10px;color:var(--mid);margin-top:2px}
.sell-note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;background:#f0f9ff;border-radius:10px;font-size:11px;color:#0369a1;line-height:1.5;margin-top:14px}
.sell-plan-opt{padding:14px 12px;border-radius:14px;border:2px solid var(--light);cursor:pointer;transition:all .15s;text-align:center;background:#fff}
.sell-plan-opt:hover{border-color:#aaa}
.sell-plan-opt.selected{border-color:var(--dark);background:var(--dark)}
.sell-plan-opt.selected div{color:#fff!important}
.sell-photo-slot{position:relative;aspect-ratio:1;border-radius:12px;border:1.5px dashed #d0d0d0;background:#fafafa;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .15s}
.sell-photo-slot:hover{border-color:#aaa}
.sell-photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none}

@media(max-width:640px){
  .market-banner{padding:20px;flex-direction:column}
  .market-banner-right{width:100%;justify-content:space-around}
  .market-banner-title{font-size:18px}
}

/* ── SHARE ROW ─────────────────────────────────── */
.modal-action-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 0;gap:8px}
.modal-share-btns{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.modal-action-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.modal-share-row{display:flex;gap:8px;padding:10px 20px 0;flex-wrap:wrap}
.modal-share-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;font-size:12px;font-weight:600;border:1.5px solid var(--light);background:#fff;color:var(--dark);cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;text-decoration:none}
.modal-share-btn svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0}
.modal-share-btn:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.modal-wa-btn{background:#25D366;color:#fff;border-color:#25D366}
.modal-wa-btn:hover{background:#1da851;border-color:#1da851;color:#fff}

/* ── RESPONSIVE MEJORADO ─────────────────────── */
@media (max-width:768px) {
  .home-ad-strip { padding:20px 20px 0; }
  .home-ad-card { grid-template-columns:1fr; }
  .home-ad-img, .home-ad-img-fallback { width:100%; height:120px; }
  .home-ad-body { padding:16px 18px; }
  .home-ad-title { font-size:15px; }
  .home-ad-placeholder { grid-template-columns:1fr; gap:12px; }
  .search-ad-banner { padding:0 14px; }
.home-explore-cta { flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px) {
  /* Cards: bubble 2 columnas en mobile */
  .cards-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .home-section-wrap { padding:0 14px; }
  .pcard { border-radius:16px; }
  .pcard-img-wrap { padding:10px 10px 4px; }
  .pcard-img { border-radius:10px; }
  .pcard-body { padding:6px 10px 12px; }
  .pc-brand { font-size:9px; margin-bottom:1px; }
  .pc-name  { font-size:12px; line-height:1.3; margin-bottom:5px;
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
  .pc-meta  { margin-bottom:5px; gap:3px; }
  .pc-price { font-size:15px; }
  .pc-from  { font-size:10px; }
  .pc-size,.pc-conc,.pc-gender { font-size:9px; padding:2px 5px; }
  .pc-stores { font-size:10px; }
  .pcard-badge { top:5px; left:5px; font-size:9px; padding:2px 6px; }

  /* Nav */
  nav { padding:0 14px; height:52px; }
  .nav-logo { font-size:17px; }
  .nav-actions { gap:6px; }
  .nav-actions .btn { padding:5px 10px; font-size:12px; }

  /* Hero */
  .hero-new { padding:40px 16px 44px; }
  .hero-new-title { font-size:28px; letter-spacing:-.8px; }
  .hero-new-sub { font-size:13px; margin-bottom:24px; }
  .hero-searchbar { padding:8px 8px 8px 18px; }
  .hero-searchbar-placeholder { display:none; }
  .hero-searchbar-btn { padding:8px 16px; font-size:13px; }
  .hero-brands { margin-top:24px; }
  .home-section-wrap { padding:0 12px; }
  .home-section-header { flex-direction:column; gap:12px; padding-top:28px; }
  .footer-dark-inner { padding:40px 16px 20px; }
  .footer-dark-grid { grid-template-columns:1fr 1fr; gap:24px; }

  /* Controls */
  .section,.search-header,.search-bar-wrap,.search-controls-wrap,.fuzzy-hint { padding-left:12px; padding-right:12px; }
  #search-suggest { left:12px; right:12px; }
  .cat-tabs { gap:6px; padding-bottom:4px; }
  .ctab { font-size:11px; padding:5px 12px; }
  .sort-select { font-size:12px; padding:6px 10px; }

  /* Modal */
  .modal-panel { padding:16px 18px 32px; max-height:91vh; }
  .modal-img-section { padding:10px 0 4px; }
  .modal-img-bubble { width:96px; height:96px; border-radius:16px; }
  .modal-header { margin-bottom:2px; }
  .modal-brand { font-size:10px; }
  .modal-name  { font-size:15px; line-height:1.2; margin-bottom:6px; word-break:break-word; overflow-wrap:break-word; }
  .modal-meta-row { gap:4px; margin-bottom:10px; }
  .modal-price-hero { margin:0 0 14px; gap:8px; }
  .mph-price { font-size:26px; }
  .mph-from  { font-size:12px; }
  .store-list { gap:6px; }
  .store-row { padding:10px 12px; gap:7px; }
  .store-name { font-size:12px; }
  .store-price { font-size:14px; }
  .store-price.best-p { font-size:16px; }
  .store-cta { font-size:11px; padding:5px 10px; }
  .modal-action-bar { padding:8px 0 0; }
  .modal-share-btn { font-size:11px; padding:6px 10px; }
  .modal-overlay { align-items:flex-end; }
  .rating-section { margin-top:20px; padding-top:16px; }
  .reviews-section { margin-top:20px; padding-top:16px; }
  
  /* Reviews */
  .reviews-section { padding:0 14px 14px; }
  .review-item { padding:10px 0; }

  /* Search */
  .search-bar-wrap { padding-top:10px; }
  #search-q { font-size:15px; }
  
  /* Home count row */
  .home-count-row { padding:0 12px; }

  /* Profile */
  .profile-wrap { padding:16px 12px 80px; max-width:100%; }
  .profile-layout { grid-template-columns:1fr; }
  .profile-tab { font-size:12px; padding:11px 6px; gap:4px; }

  /* Skeleton — bubble en mobile */
  .skel-card { border-radius:16px; }
  .skel-img  { aspect-ratio:1; height:auto; border-radius:10px; margin:10px 10px 4px; }
}

@media (min-width:481px) and (max-width:767px) {
  .cards-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .pcard-img { height:150px; }
  .section,.search-header,.search-bar-wrap,.search-controls-wrap,.fuzzy-hint { padding-left:16px; padding-right:16px; }
  #search-suggest { left:16px; right:16px; }
  .home-section-wrap { padding:0 16px; }
  .modal-overlay { align-items:flex-end; }
  .modal-inner { border-radius:20px 20px 0 0; }
}

/* ════════════════ EXPLORE HUB ════════════════ */
.explore-hub-wrap { max-width:1100px; margin:0 auto 60px; padding:0 48px; }
.explore-hub-title { font-size:16px; font-weight:700; letter-spacing:-0.2px; margin-bottom:24px; color:var(--mid); text-transform:uppercase; }
.explore-hub-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hub-card { background:var(--white); border:1.5px solid var(--light); border-radius:16px; padding:28px 24px; cursor:pointer; transition:all .22s; position:relative; overflow:hidden; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; }
.hub-card::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,rgba(200,148,58,.04),rgba(200,148,58,0)); opacity:0; transition:opacity .22s; pointer-events:none; }
.hub-card:hover { border-color:var(--accent); box-shadow:0 12px 40px rgba(200,148,58,.12); transform:translateY(-4px); background:linear-gradient(135deg,rgba(200,148,58,.02),transparent); }
.hub-card:hover::before { opacity:1; }
.hub-card-icon { width:48px; height:48px; margin-bottom:16px; display:block; stroke:var(--accent); color:var(--accent); }
.hub-card-title { font-size:15px; font-weight:700; color:var(--dark); margin-bottom:8px; }
.hub-card-desc { font-size:13px; color:var(--mid); line-height:1.5; }
.hub-card-arrow { display:none; }

@media (max-width:1100px) {
  .explore-hub-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px) {
  .explore-hub-wrap { padding:0 24px; }
  .explore-hub-grid { grid-template-columns:1fr; gap:12px; }
  .hub-card { padding:20px 18px; }
  .hub-card-icon { font-size:36px; }
  .hub-card-title { font-size:14px; }
  .hub-card-desc { font-size:12px; }
}

/* ════════════════ ACHIEVEMENTS ════════════════ */
.achievements-wrap { max-width:1100px; margin:0 auto 60px; padding:0 48px; }
.achievements-title { font-size:20px; font-weight:800; letter-spacing:-0.4px; margin-bottom:20px; }
.achievements-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.achievement-card { background:var(--white); border:1.5px solid var(--accent-soft); border-radius:16px; padding:20px; text-align:center; cursor:pointer; transition:all .2s; }
.achievement-card:hover { border-color:var(--accent); box-shadow:0 8px 24px rgba(200,148,58,.15); transform:translateY(-3px); }
.achievement-icon { width:64px; height:64px; margin:0 auto 12px; display:block; }
.achievement-name { font-size:13px; font-weight:700; color:var(--dark); line-height:1.4; }

@media (max-width:1100px) {
  .achievements-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px) {
  .achievements-wrap { padding:0 24px; }
  .achievements-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .achievement-card { padding:16px; }
  .achievement-icon { width:56px; height:56px; }
  .achievement-name { font-size:11px; }
}

/* ════════════════ DUPES VIEW ════════════════ */
.dupes-hero-dark { background:var(--dark); padding:56px 24px 48px; text-align:center; }
.dupes-hero-dark-inner { max-width:680px; margin:0 auto; }
.back-btn-light { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.7); margin-bottom:28px; display:inline-flex; }
.back-btn-light:hover { background:rgba(255,255,255,.18); color:#fff; }
.dupes-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.dupes-hero-dark-title { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-1px; color:#fff; margin-bottom:14px; line-height:1.1; }
.dupes-hero-dark-sub { font-size:15px; color:rgba(255,255,255,.55); line-height:1.65; margin-bottom:28px; max-width:520px; margin-left:auto; margin-right:auto; }
.dupes-search-bar-hero { display:flex; align-items:center; gap:10px; background:var(--white); border:2.5px solid var(--accent); border-radius:14px; padding:14px 18px; max-width:600px; margin:0 auto; box-shadow:0 20px 40px rgba(0,0,0,.35); }
.dupes-search-bar-hero:focus-within { border-color:#e8a840; }
.dupes-search-bar-hero svg { width:18px; height:18px; stroke:var(--mid); fill:none; stroke-width:2.5; flex-shrink:0; }
.dupes-search-bar-hero input { flex:1; border:none; outline:none; font-family:inherit; font-size:16px; color:var(--dark); background:transparent; }
.dupes-search-bar-hero input::placeholder { color:#9ca3af; }
.dupes-search-bar-hero .search-clear { background:none; border:none; cursor:pointer; color:var(--mid); font-size:16px; padding:0 4px; opacity:0; pointer-events:none; }
.dupes-search-bar-hero .search-clear.visible { opacity:1; pointer-events:auto; }
.dupes-popular-wrap { margin-top:24px; }
.dupes-popular-label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:12px; }
.dupes-popular-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.dupes-pop-chip { padding:7px 18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:100px; font-family:inherit; font-size:13px; font-weight:600; color:rgba(255,255,255,.75); cursor:pointer; transition:all .18s; }
.dupes-pop-chip:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff; }
.dupes-results-wrap { max-width:960px; margin:0 auto; padding:24px 24px 80px; }

/* Search bar — reuses search styles but scoped */
.dupes-search-bar { display:flex; align-items:center; gap:10px; background:var(--white); border:1.5px solid var(--light); border-radius:16px; padding:12px 16px; margin-bottom:16px; transition:border-color .2s; box-shadow:var(--shadow-sm); }
.dupes-search-bar:focus-within { border-color:var(--accent); }
.dupes-search-bar svg { width:18px; height:18px; stroke:var(--mid); fill:none; stroke-width:2.5; flex-shrink:0; }
.dupes-search-bar input { flex:1; border:none; outline:none; font-family:inherit; font-size:14px; color:var(--dark); background:transparent; }
.dupes-search-bar input::placeholder { color:#aaa; }

/* Suggestion chips */
.dupes-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.dupe-suggestion-chip { padding:6px 14px; border-radius:100px; border:1.5px solid var(--light); background:var(--white); font-family:inherit; font-size:12px; font-weight:600; color:var(--mid); cursor:pointer; transition:all .15s; }
.dupe-suggestion-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-pale); }

/* Original perfume reference card */
.dupes-original-card { display:flex; align-items:center; gap:16px; background:var(--white); border:1.5px solid var(--light); border-radius:16px; padding:16px; margin-bottom:20px; transition:border-color .2s; }
.dupes-original-card:hover { border-color:var(--accent); }
.dupes-original-notfound { justify-content:center; flex-direction:column; text-align:center; padding:20px; background:var(--accent-pale); border-color:var(--accent-soft); }
.dupes-original-img { width:64px; height:64px; border-radius:12px; overflow:hidden; background:var(--light); flex-shrink:0; }
.dupes-original-letter { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:var(--mid); }
.dupes-original-info { flex:1; min-width:0; }
.dupes-original-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--accent); margin-bottom:3px; }
.dupes-original-brand { font-size:11px; font-weight:600; color:var(--mid); }
.dupes-original-name { font-size:15px; font-weight:700; color:var(--dark); margin-top:2px; }
.dupes-original-price { font-size:13px; color:var(--accent); font-weight:700; margin-top:4px; }

/* Results */
.dupes-count { font-size:12px; font-weight:600; color:var(--mid); margin-bottom:14px; }
.dupes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.dupe-result-card { background:var(--white); border:1.5px solid var(--light); border-radius:16px; overflow:hidden; cursor:pointer; transition:all .2s; }
.dupe-result-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.dupe-result-img { width:100%; height:160px; position:relative; overflow:hidden; }
.dupe-result-img img { transition:transform .3s; }
.dupe-result-card:hover .dupe-result-img img { transform:scale(1.04); }
.dupe-result-letter { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:rgba(255,255,255,.85); }
.dupe-sim-badge { position:absolute; top:8px; right:8px; background:rgba(20,20,20,.75); backdrop-filter:blur(6px); color:#fff; font-size:10px; font-weight:700; padding:3px 7px; border-radius:100px; }
.dupe-result-body { padding:12px; }
.dupe-result-brand { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--mid); margin-bottom:2px; }
.dupe-result-name { font-size:13px; font-weight:700; color:var(--dark); line-height:1.3; margin-bottom:4px; }
.dupe-result-meta { font-size:11px; color:var(--mid); margin-bottom:4px; }
.dupe-result-price { font-size:15px; font-weight:800; color:var(--accent); margin-bottom:2px; }
.dupe-result-store { font-size:11px; color:var(--mid); }
.dupe-result-inspired { font-size:10px; font-weight:600; background:var(--accent-pale); color:var(--accent); padding:3px 8px; border-radius:6px; display:inline-block; margin-top:4px; }

/* Loading / empty states */
.dupes-loading { text-align:center; padding:40px; font-size:14px; color:var(--mid); }
.dupes-empty { text-align:center; padding:40px 20px; color:var(--dark); font-size:15px; font-weight:600; }

@media (max-width:480px) {
  .dupes-wrap { padding:16px 12px 80px; }
  .dupes-hero-title { font-size:22px; }
  .dupes-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .dupe-result-img { height:130px; }
}

/* ════════════════ MOBILE BOTTOM NAV ════════════════ */
.mob-nav {
  display: none;
}

@media (max-width: 768px) {
  .mob-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: rgba(250,250,248,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--light);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: stretch;
  }

  .mob-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 6px 4px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    color: var(--mid);
    cursor: pointer;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
  }

  .mob-tab svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    transition: stroke .15s;
  }

  .mob-tab.active {
    color: var(--accent);
  }

  .mob-tab.active svg {
    stroke: var(--accent);
  }

  /* Add bottom padding to all main views so content clears the bottom nav */
  #home-view,
  #search-view,
  #rankings-view,
  #dupes-view,
  #market-view,
  #profile-view {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Store row: 2-row layout on narrow screens */
  .store-row {
    grid-template-columns: 28px 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }

  .store-rank  { grid-row: 1 / 3; align-self: center; }
  .store-name  { grid-column: 2; grid-row: 1; }
  .store-diff  { grid-column: 3; grid-row: 1; }
  .store-price { grid-column: 2; grid-row: 2; font-size: 15px; }
  .store-cta   { grid-column: 3; grid-row: 2; }
  .report-link-btn { display: none; }

  /* Nav: hide logout button, keep avatar */
  .btn-logout { display: none; }

  /* Gamification cards: 2-col */
  .gamif-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Quiz de firma olfativa ─────────────────────────────────────── */
.quiz-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.quiz-overlay.open { display: flex; }

.quiz-card {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}

.quiz-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.quiz-progress-bar {
  flex: 1;
  height: 6px;
  background: #f0ece6;
  border-radius: 99px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .4s ease;
}
.quiz-step-lbl {
  font-size: 12px;
  color: var(--mid);
  white-space: nowrap;
  font-weight: 600;
}
.quiz-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--mid);
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.quiz-close-btn:hover { background: #f5f5f5; }

.quiz-q {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
  margin-bottom: 24px;
  text-align: center;
}

.quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-opt {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid #ede8e0;
  background: #faf9f7;
  font-size: 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  line-height: 1.4;
}
.quiz-opt:hover {
  border-color: var(--accent);
  background: #fdf8f0;
  transform: translateY(-1px);
}
.quiz-opt:active { transform: translateY(0); }

.quiz-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--mid);
  font-size: 15px;
}
.quiz-loading-emoji {
  font-size: 40px;
  margin-bottom: 16px;
  animation: quiz-pulse 1.2s ease-in-out infinite;
}
@keyframes quiz-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

/* Result screen */
.quiz-result {
  text-align: center;
  padding: 8px 0 0;
  position: relative;
}
.quiz-result-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
}
.quiz-result-subtitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.quiz-result-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 12px;
}
.quiz-result-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 24px;
}

.quiz-recs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--mid);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.quiz-recs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.quiz-rec {
  width: 108px;
  cursor: pointer;
  text-align: center;
}
.quiz-rec-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.quiz-rec-img img { width: 100%; height: 100%; object-fit: cover; }
.quiz-rec-brand { font-size: 10px; color: var(--mid); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-rec-name  { font-size: 11px; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.quiz-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.quiz-cta {
  padding: 12px 32px;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
}
.quiz-retry {
  background: none;
  border: none;
  color: var(--mid);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 4px;
}

/* Launch button in profile card */
.quiz-launch-btn {
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity .15s;
}
.quiz-launch-btn:hover { opacity: 0.88; }
.quiz-launch-btn.secondary {
  background: none;
  border: 2px solid #ede8e0;
  color: var(--mid);
  font-weight: 600;
}

/* Result badge in profile card */
.quiz-profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fdf8f0;
  border: 1.5px solid #ede8e0;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.quiz-profile-emoji { font-size: 20px; }
.quiz-profile-name  { font-size: 13px; font-weight: 700; color: var(--dark); }

@media (max-width: 600px) {
  .quiz-card { padding: 24px 18px 20px; border-radius: 16px; }
  .quiz-q { font-size: 17px; }
  .quiz-opt { font-size: 14px; padding: 12px 14px; }
  .quiz-rec { width: 80px; }
  .quiz-result-title { font-size: 24px; }
}

.profile-sug-link {
  background: none;
  border: none;
  color: var(--mid);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px 0 0;
  width: 100%;
  text-align: center;
}
.profile-sug-link:hover { color: var(--dark); }