/* ══════════════════════════════════════════════════════
   LAYOUT — nav du haut, structure des sections, nav mobile bas
══════════════════════════════════════════════════════ */

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:60px;background:rgba(255,255,255,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.logo{height:26px;width:auto;cursor:pointer;flex-shrink:0;display:block}
.nav-tabs{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:var(--g1);border:1px solid var(--border);border-radius:var(--r-xl);padding:3px}
.nav-tab{padding:6px 16px;border-radius:calc(var(--r-xl) - 3px);font-size:13px;color:var(--g5);cursor:pointer;transition:all .18s;white-space:nowrap;border:none;background:none;font-family:var(--sans)}
.nav-tab:hover{color:var(--w);background:var(--g2)}.nav-tab.active{background:var(--purple);color:#1A1A1A;font-weight:500}
.nav-right{display:flex;align-items:center;gap:8px}
.gender-toggle{display:flex;background:var(--g1);border:1px solid var(--border);border-radius:30px;padding:3px}
.gender-btn{padding:5px 14px;border-radius:27px;font-size:13px;cursor:pointer;transition:all .18s;border:none;background:none;color:var(--g5);font-family:var(--sans)}
.gender-btn.active{background:var(--w);color:var(--bg);font-weight:500}
.btn-prim{padding:7px 16px;background:var(--purple);border:none;border-radius:var(--r);font-family:var(--sans);font-size:13px;font-weight:500;color:#1A1A1A;cursor:pointer;transition:all .18s}.btn-prim:hover{background:var(--purple-l);color:#fff}
/* Wishlist btn */
.wish-btn{width:36px;height:36px;background:var(--g1);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative;font-size:16px}.wish-btn:hover{border-color:var(--coral)}.wish-cnt{position:absolute;top:-3px;right:-3px;width:16px;height:16px;background:var(--coral);border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600;display:none}
/* Profile with circular progress */
.profile-btn{display:flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;background:var(--g1);border:1px solid var(--border);border-radius:30px;cursor:pointer;transition:all .18s}.profile-btn:hover{border-color:var(--border-h)}
.av-wrap{position:relative;width:30px;height:30px;flex-shrink:0}
.av-svg{position:absolute;inset:0;width:30px;height:30px;transform:rotate(-90deg)}
.av-circle-bg{fill:none;stroke:var(--g2);stroke-width:2}
.av-circle-fg{fill:none;stroke:var(--purple);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .5s;stroke-dasharray:82;stroke-dashoffset:82}
.av-inner{position:absolute;inset:3px;border-radius:50%;background:var(--purple-d);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:12px;color:var(--purple-l)}
.profile-name{font-size:13px;color:var(--g6)}

/* ── SECTIONS shell ── */
main{padding-top:60px;min-height:100vh}.section{display:none}.section.active{display:block}

/* ══════════════════════════════════════════════════════
   BOTTOM MOBILE NAV
══════════════════════════════════════════════════════ */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:110;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}
.mob-nav-inner{display:flex;align-items:stretch;justify-content:space-around}
.mob-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 4px;cursor:pointer;transition:color .18s;color:var(--g4);border:none;background:none;font-family:var(--sans);min-height:56px}
.mob-nav-item.active{color:var(--purple-l)}
.mob-nav-item:hover{color:var(--g6)}
.mob-nav-ico{font-size:18px;line-height:1}
.mob-nav-lbl{font-size:10px;letter-spacing:.03em}