/* ============================================================
   FARMA LIFE — CSS Premium v4
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

:root {
  --ink:#0d0d0b;
  --ink2:#3a3834;
  --ink3:#7a766e;
  --ink4:#b8b4ac;
  --line:#e6e2da;
  --cream:#f7f4ef;
  --cream2:#ede9e2;
  --w:#ffffff;
  --sage:#2e4230;
  --red:#8a2318;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:60px;
}

html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--w); color:var(--ink); font-family:var(--sans); font-weight:300; overflow-x:hidden; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:var(--sans); cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:var(--sans); }

/* ───────────────────────────────────────
   NAV
─────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center;
  padding:0 24px;
}
@media(min-width:768px){ nav { padding:0 48px; } }
@media(min-width:1024px){ nav { padding:0 64px; } }

.nl {
  font-family:var(--serif);
  font-size:15px; font-weight:500;
  letter-spacing:5px; text-transform:uppercase;
  color:var(--ink); flex:1;
}
.nlinks {
  display:none;
  position:absolute; left:50%; transform:translateX(-50%);
}
@media(min-width:900px){
  .nlinks { display:flex; gap:32px; }
  .nlinks a { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink3); font-weight:400; transition:color .2s; }
  .nlinks a:hover { color:var(--ink); }
}
.nright { display:flex; align-items:center; gap:12px; }
.nuser {
  font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink3); display:flex; align-items:center; gap:6px; transition:color .2s;
}
.nuser:hover { color:var(--ink); }
.nwa { display:none; }
@media(min-width:900px){
  .nwa { display:block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3); transition:color .2s; }
  .nwa:hover { color:var(--sage); }
}
.ncart {
  display:flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff;
  padding:9px 16px; border-radius:2px;
  font-size:10px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  transition:opacity .2s;
}
.ncart:hover { opacity:.8; }
.ncart-lbl { display:inline; }
.cn {
  width:17px; height:17px; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff;
  font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.nham {
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none;
  border:1px solid var(--line); border-radius:2px; padding:0 10px;
}
@media(min-width:900px){ .nham { display:none; } }
.nham span { width:100%; height:1.5px; background:var(--ink); transition:all .28s var(--ease); display:block; }
.nham.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nham.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nham.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ───────────────────────────────────────
   MOBILE MENU
─────────────────────────────────────── */
.menu-ov { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:490; display:none; backdrop-filter:blur(4px); }
.menu-ov.on { display:block; }
.menu-drw {
  position:fixed; top:var(--nav-h); left:0; bottom:0;
  width:min(320px,88vw); background:var(--w);
  border-right:1px solid var(--line); z-index:495;
  transform:translateX(-100%); transition:transform .34s var(--ease);
  display:flex; flex-direction:column; padding:36px 28px; overflow-y:auto;
}
.menu-drw.on { transform:translateX(0); }
.menu-section { margin-bottom:36px; }
.menu-label { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink4); margin-bottom:16px; }
.menu-links { display:flex; flex-direction:column; gap:18px; }
.menu-link { font-family:var(--serif); font-size:24px; font-weight:300; color:var(--ink); transition:color .2s; }
.menu-link:hover { color:var(--sage); }
.menu-cats { display:flex; flex-direction:column; gap:12px; }
.menu-cat { font-size:13px; color:var(--ink3); transition:color .15s; padding:2px 0; }
.menu-cat:hover { color:var(--ink); }
.menu-wa {
  margin-top:auto;
  display:inline-flex; align-items:center; gap:12px;
  background:#f0f9f0; border:1px solid #b8ddb8; color:#1e5e1e;
  padding:13px 20px; border-radius:3px; font-size:13px; font-weight:500;
}

/* ───────────────────────────────────────
   CART DRAWER
─────────────────────────────────────── */
.cart-ov { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:600; display:none; backdrop-filter:blur(4px); }
.cart-ov.on { display:block; }
.cart-drw {
  position:fixed; right:0; top:0; bottom:0;
  width:min(440px,100vw); background:var(--w);
  border-left:1px solid var(--line); z-index:610;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .36s var(--ease);
}
.cart-drw.on { transform:translateX(0); }
.cdh {
  padding:22px 24px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.cdht { font-family:var(--serif); font-size:20px; font-weight:300; color:var(--ink); }
.cdclose {
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  border:1px solid var(--line); border-radius:2px; padding:7px 14px;
  color:var(--ink3); transition:all .18s;
}
.cdclose:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.cdbody { flex:1; overflow-y:auto; padding:0 24px; }
.cdempty {
  padding:80px 0; text-align:center;
  font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink4);
}
.cditem {
  display:grid; grid-template-columns:70px 1fr auto;
  gap:14px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.cdimg { width:70px; height:92px; background:var(--cream); overflow:hidden; border:1px solid var(--line); flex-shrink:0; }
.cdimg img, .cdimg svg { width:100%; height:100%; object-fit:cover; display:block; }
.cdname { font-family:var(--serif); font-size:15px; font-weight:300; color:var(--ink); margin-bottom:4px; line-height:1.2; }
.cdprice { font-size:12px; color:var(--ink3); }
.qc { display:flex; align-items:center; gap:6px; }
.qb {
  width:28px; height:28px; border:1px solid var(--line); border-radius:2px;
  color:var(--ink3); display:flex; align-items:center; justify-content:center;
  font-size:16px; transition:all .15s;
}
.qb:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.qn { font-size:13px; min-width:22px; text-align:center; color:var(--ink); }
.cdfooter { padding:20px 24px 32px; border-top:1px solid var(--line); flex-shrink:0; }
.cdtrow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.cdtl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink3); }
.cdtv { font-family:var(--serif); font-size:30px; font-weight:300; color:var(--ink); }
.cdtn { font-size:11px; color:var(--ink4); margin-bottom:18px; }
.cdbtn {
  display:block; width:100%; background:var(--ink); color:#fff;
  padding:15px; font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
  border-radius:2px; text-align:center; transition:opacity .2s;
}
.cdbtn:hover { opacity:.78; }

/* ───────────────────────────────────────
   HERO — NOVO DESIGN
─────────────────────────────────────── */
.hero {
  position:relative;
  height:100vh; min-height:640px;
  overflow:hidden;
  padding-top:var(--nav-h);
}

/* Slides */
.slide {
  position:absolute; inset:0;
  display:flex; align-items:stretch;
  opacity:0; transition:opacity .8s var(--ease);
  pointer-events:none; padding-top:var(--nav-h);
}
.slide.on { opacity:1; pointer-events:all; }

/* Texto gigante no fundo — efeito editorial */
.slide-bg-text {
  position:absolute; bottom:-0.15em; left:-0.02em;
  font-family:var(--serif);
  font-size:clamp(120px, 22vw, 280px);
  font-weight:600; font-style:italic;
  color:rgba(255,255,255,.04);
  white-space:nowrap; line-height:1;
  pointer-events:none; user-select:none;
  letter-spacing:-4px;
}

.slide-inner {
  position:relative; z-index:2;
  width:100%; max-width:1400px; margin:0 auto;
  display:flex; align-items:center;
  padding:0 40px;
  gap:40px;
}
@media(min-width:768px){ .slide-inner { padding:0 64px; } }

/* Copy */
.slide-copy {
  flex:1; display:flex; flex-direction:column;
  gap:20px; max-width:520px;
}
.slide-eyebrow {
  display:flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  opacity:.7;
}
.slide-line { width:20px; height:1px; flex-shrink:0; }
.slide-title {
  font-family:var(--serif);
  font-size:clamp(44px, 7vw, 88px);
  font-weight:300; line-height:.9;
  letter-spacing:-2px; color:#fff;
}
.slide-desc {
  font-size:14px; line-height:1.8;
  color:rgba(255,255,255,.5);
  max-width:380px;
}
.slide-footer { display:flex; flex-direction:column; gap:16px; }
.slide-price {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.slide-price-old { font-size:13px; color:rgba(255,255,255,.3); text-decoration:line-through; }
.slide-price-now { font-family:var(--serif); font-size:34px; font-weight:300; color:#fff; letter-spacing:-.5px; }
.slide-pct { font-size:12px; font-weight:500; }
.slide-btns { display:flex; gap:12px; flex-wrap:wrap; }
.slide-btn-primary {
  background:#fff; color:var(--ink);
  padding:13px 28px; border-radius:2px;
  font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
  transition:all .22s; white-space:nowrap;
}
.slide-btn-primary:hover { opacity:.85; }
.slide-btn-ghost {
  border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.7);
  padding:13px 24px; border-radius:2px;
  font-size:10px; font-weight:400; letter-spacing:2px; text-transform:uppercase;
  transition:all .22s; white-space:nowrap;
}
.slide-btn-ghost:hover { border-color:rgba(255,255,255,.7); color:#fff; }

/* Visual da ampola/frasco — CSS puro premium */
.slide-visual {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:clamp(200px, 35vw, 420px);
}
@media(max-width:767px){ .slide-visual { display:none; } }

.slide-visual img {
  max-height:60vh; width:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
  animation:float 7s ease-in-out infinite;
}

/* Frasco CSS */
.slide-vial {
  position:relative;
  width:160px;
  animation:float 7s ease-in-out infinite;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));
}
@keyframes float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

.vial-cap {
  width:60px; height:28px; margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.08) 100%);
  border-radius:4px 4px 0 0;
  border:1px solid rgba(255,255,255,.15);
  border-bottom:none;
}
.vial-neck {
  width:42px; height:20px; margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.06) 100%);
  border-left:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12);
}
.vial-body {
  width:120px; height:220px; margin:0 auto;
  background:linear-gradient(135deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.06) 40%,
    rgba(255,255,255,.02) 100%
  );
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
  position:relative; overflow:hidden;
  backdrop-filter:blur(2px);
}
/* Reflexo lateral */
.vial-body::before {
  content:''; position:absolute;
  top:0; left:8px; bottom:0; width:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 100%);
  border-radius:2px;
}
.vial-liquid {
  position:absolute; bottom:0; left:0; right:0;
  height:55%;
  background:linear-gradient(180deg,
    rgba(var(--accent-rgb, 201,185,154),.15) 0%,
    rgba(var(--accent-rgb, 201,185,154),.08) 100%
  );
  border-top:1px solid rgba(255,255,255,.1);
}
.vial-label {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; width:90%;
  display:flex; flex-direction:column; gap:6px;
  padding:16px 8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:2px;
}
.vial-name {
  font-family:var(--serif); font-style:italic;
  font-size:15px; font-weight:300;
  color:rgba(255,255,255,.9);
  line-height:1.2;
}
.vial-brand {
  font-size:7px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.vial-cat {
  font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent, rgba(255,255,255,.5));
}
.vial-base {
  width:130px; height:12px; margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-top:none; border-radius:0 0 4px 4px;
}

/* Hero controls */
.hero-controls {
  position:absolute; bottom:28px; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; z-index:10;
}
@media(min-width:768px){ .hero-controls { padding:0 64px; } }
.hero-dots { display:flex; gap:8px; align-items:center; }
.hdot {
  width:18px; height:2px; background:rgba(255,255,255,.2);
  border:none; padding:0; transition:all .3s var(--ease);
}
.hdot.on { background:rgba(255,255,255,.8); width:32px; }
.hero-arrows { display:flex; gap:8px; }
.hero-arrows button {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  transition:all .22s;
}
.hero-arrows button:hover { border-color:rgba(255,255,255,.7); color:#fff; }
.hprog {
  position:absolute; bottom:0; left:0;
  height:2px; background:rgba(255,255,255,.25); z-index:10;
  width:0; transition:width linear;
}

/* ───────────────────────────────────────
   MARQUEE
─────────────────────────────────────── */
.mqw { border-bottom:1px solid var(--line); padding:14px 0; overflow:hidden; background:var(--w); }
.mqt { display:flex; white-space:nowrap; animation:mqscroll 32s linear infinite; }
@keyframes mqscroll { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mqi { font-family:var(--serif); font-size:13px; font-style:italic; color:var(--ink4); padding:0 28px; flex-shrink:0; }
.mqs { color:var(--line); font-style:normal; }

/* ───────────────────────────────────────
   CATALOG SECTION
─────────────────────────────────────── */
.catalog-section {
  max-width:1440px; margin:0 auto;
  padding:80px 24px 96px;
}
@media(min-width:768px){ .catalog-section { padding:96px 48px 112px; } }
@media(min-width:1024px){ .catalog-section { padding:112px 64px 128px; } }

.catalog-header {
  display:flex; flex-direction:column; gap:24px;
  margin-bottom:48px;
  padding-bottom:28px; border-bottom:1px solid var(--line);
}
@media(min-width:768px){ .catalog-header { flex-direction:row; align-items:flex-end; } }
.catalog-header-left { flex:1; }
.catalog-pre {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ink4); margin-bottom:8px;
  display:flex; align-items:center; gap:12px;
}
.catalog-pre::before { content:''; width:16px; height:1px; background:var(--ink4); }
.catalog-title {
  font-family:var(--serif);
  font-size:clamp(32px, 5vw, 52px);
  font-weight:300; letter-spacing:-1.5px; color:var(--ink);
  line-height:.9; margin-bottom:8px;
}
.catalog-count { font-size:11px; color:var(--ink4); }
.catalog-header-right { display:flex; flex-direction:column; gap:14px; }
@media(min-width:768px){ .catalog-header-right { align-items:flex-end; } }

/* Search */
.search-wrap {
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:2px;
  padding:11px 16px; background:var(--cream);
  transition:border-color .2s, background .2s;
  width:100%;
}
@media(min-width:640px){ .search-wrap { width:280px; } }
.search-wrap:focus-within { border-color:var(--ink3); background:var(--w); }
.search-wrap svg { color:var(--ink4); flex-shrink:0; }
.search-input {
  border:none; outline:none; background:transparent;
  font-size:13px; font-weight:300; color:var(--ink); flex:1; min-width:0;
}
.search-input::placeholder { color:var(--ink4); }
.search-clear { color:var(--ink4); font-size:18px; padding:0; display:none; line-height:1; }
.search-clear.vis { display:block; }

/* Filter pills */
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pill {
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 14px; border:1px solid var(--line); border-radius:100px;
  background:transparent; color:var(--ink3);
  font-family:var(--sans); transition:all .15s; white-space:nowrap;
}
.pill:hover { border-color:var(--ink3); color:var(--ink2); }
.pill.on { background:var(--ink); border-color:var(--ink); color:#fff; }

/* ───────────────────────────────────────
   PRODUCT GRID — NOVO DESIGN
─────────────────────────────────────── */
.product-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px 12px;
}
@media(min-width:540px){ .product-grid { gap:24px 16px; } }
@media(min-width:768px){ .product-grid { grid-template-columns:repeat(3, 1fr); gap:32px 24px; } }
@media(min-width:1100px){ .product-grid { grid-template-columns:repeat(4, 1fr); gap:40px 28px; } }

.grid-empty {
  grid-column:1/-1; text-align:center;
  padding:80px 20px; font-size:13px; color:var(--ink4);
}

.pcard { display:flex; flex-direction:column; }

/* Imagem */
.pcard-img {
  display:block; position:relative;
  aspect-ratio:3/4; overflow:hidden; border-radius:2px;
  margin-bottom:16px;
}
.pcard-img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .7s var(--ease);
}
.pcard:hover .pcard-img img { transform:scale(1.06); }

/* Placeholder quando não tem foto */
.pcard-placeholder {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:12px; padding:24px;
}
.ph-circle {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
}
.ph-c1 { width:140%; height:140%; top:-20%; left:-20%; }
.ph-c2 { width:80%; height:80%; }
.ph-name {
  position:relative; z-index:2;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(14px, 2.5vw, 18px);
  font-weight:300; color:rgba(0,0,0,.55);
  text-align:center; line-height:1.3;
}
.ph-brand {
  position:relative; z-index:2;
  font-size:8px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(0,0,0,.3);
}

/* Overlay hover */
.pcard-overlay {
  position:absolute; inset:0;
  background:rgba(13,13,11,.5);
  display:flex; align-items:center; justify-content:center;
  gap:8px; opacity:0; transition:opacity .3s var(--ease);
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:#fff; font-family:var(--sans); font-weight:500;
}
@media(hover:none){ .pcard-overlay { display:none; } }
.pcard:hover .pcard-overlay { opacity:1; }

/* Badge */
.pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 9px; font-weight:500; border-radius:1px;
}

/* Info */
.pcard-info { display:flex; flex-direction:column; gap:4px; }
.pcard-cat { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink4); }
.pcard-name {
  display:block; font-family:var(--serif);
  font-size:clamp(15px, 2.5vw, 19px);
  font-weight:300; color:var(--ink); line-height:1.15;
  margin-bottom:2px;
}
.pcard-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.pcard-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pcard-price-now { font-family:var(--serif); font-size:clamp(15px, 2.5vw, 18px); font-weight:300; color:var(--ink); }
.pcard-price-old { font-size:11px; color:var(--ink4); text-decoration:line-through; }
.pcard-add {
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink3); transition:all .18s; flex-shrink:0;
}
.pcard-add:hover { background:var(--ink); border-color:var(--ink); color:#fff; }

/* ───────────────────────────────────────
   TRUST SECTION
─────────────────────────────────────── */
.trust-section { border-top:1px solid var(--line); background:var(--cream); }
.trust-grid {
  max-width:1440px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  border-left:1px solid var(--line);
}
@media(min-width:640px){ .trust-grid { grid-template-columns:repeat(4,1fr); } }
.trust-item {
  padding:36px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media(min-width:640px){ .trust-item { padding:52px 32px; border-bottom:none; } }
.trust-val {
  font-family:var(--serif); font-size:28px; font-weight:300;
  color:var(--ink); letter-spacing:-1px; margin-bottom:10px; line-height:1;
}
.trust-label { font-size:12px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.trust-desc { font-size:11px; color:var(--ink3); line-height:1.6; }

/* ───────────────────────────────────────
   PRODUCT PAGE
─────────────────────────────────────── */
.product-page {
  max-width:1200px; margin:0 auto;
  padding:calc(var(--nav-h) + 40px) 24px 100px;
}
@media(min-width:640px){ .product-page { padding:calc(var(--nav-h) + 60px) 48px 100px; } }
@media(min-width:1024px){ .product-page { padding:calc(var(--nav-h) + 60px) 64px 120px; } }

.product-layout {
  display:grid; grid-template-columns:1fr;
  gap:48px;
}
@media(min-width:768px){ .product-layout { grid-template-columns:1fr 1fr; gap:64px; align-items:start; } }

.product-gallery {}
.product-main-img {
  aspect-ratio:3/4; background:var(--cream); overflow:hidden;
  position:relative; margin-bottom:12px; border-radius:2px;
}
.product-main-img img, .product-main-img svg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.product-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.product-thumb {
  width:76px; height:100px; background:var(--cream2); overflow:hidden;
  border:2px solid transparent; transition:border-color .18s;
  flex-shrink:0; cursor:pointer; border-radius:1px;
}
.product-thumb.active { border-color:var(--ink); }
.product-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.product-info {}
.product-cat { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--ink4); margin-bottom:12px; }
.product-name {
  font-family:var(--serif);
  font-size:clamp(28px, 4vw, 44px);
  font-weight:300; line-height:1.0;
  letter-spacing:-1px; color:var(--ink); margin-bottom:8px;
}
.product-subtitle { font-size:13px; color:var(--ink3); margin-bottom:28px; }
.product-price-wrap {
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:28px; padding-bottom:28px;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.product-price { font-family:var(--serif); font-size:36px; font-weight:300; color:var(--ink); }
.product-price-old { font-size:15px; color:var(--ink4); text-decoration:line-through; }
.product-qty-wrap { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.qty-ctrl {
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:2px; padding:6px 14px;
}
.qty-btn { font-size:20px; color:var(--ink3); transition:color .15s; padding:0; background:none; border:none; cursor:pointer; }
.qty-btn:hover { color:var(--ink); }
.qty-n { font-family:var(--serif); font-size:20px; min-width:28px; text-align:center; color:var(--ink); }
.add-to-cart-btn {
  flex:1; background:var(--ink); color:#fff;
  padding:15px 24px; font-size:10px; font-weight:500; letter-spacing:2px;
  text-transform:uppercase; border-radius:2px; transition:opacity .2s;
}
.add-to-cart-btn:hover { opacity:.78; }
.buy-now-btn {
  display:block; width:100%; text-align:center;
  border:1px solid var(--line); color:var(--ink);
  padding:14px; font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; border-radius:2px;
  margin-bottom:28px; transition:border-color .18s;
}
.buy-now-btn:hover { border-color:var(--ink); }
.product-tabs { border-top:1px solid var(--line); margin-top:24px; }
.tab-btns { display:flex; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab-btn {
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  padding:13px 16px; background:transparent; color:var(--ink3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:all .18s; font-family:var(--sans); white-space:nowrap;
}
.tab-btn.on { color:var(--ink); border-bottom-color:var(--ink); }
.tab-content { padding:24px 0; }
.tab-pane { display:none; font-size:14px; line-height:1.85; color:var(--ink2); }
.tab-pane.on { display:block; }

/* ───────────────────────────────────────
   AUTH
─────────────────────────────────────── */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 40px) 20px 40px; background:var(--cream);
}
.auth-box {
  background:var(--w); border:1px solid var(--line);
  width:100%; max-width:440px; padding:40px 36px;
}
@media(max-width:480px){ .auth-box { padding:32px 24px; } }
.auth-logo {
  font-family:var(--serif); font-size:14px; font-weight:500;
  letter-spacing:5px; text-transform:uppercase; color:var(--ink);
  margin-bottom:32px; display:block; text-align:center;
}
.auth-h { font-family:var(--serif); font-size:28px; font-weight:300; letter-spacing:-.5px; color:var(--ink); margin-bottom:6px; }
.auth-sub { font-size:13px; color:var(--ink3); margin-bottom:30px; }

/* ───────────────────────────────────────
   FORMS (shared)
─────────────────────────────────────── */
.fg { margin-bottom:18px; }
.fl { display:block; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink3); margin-bottom:8px; }
.fi {
  width:100%; padding:12px 14px;
  background:var(--cream); border:1px solid var(--line);
  font-size:14px; font-weight:300; color:var(--ink);
  outline:none; transition:border-color .18s, background .18s; border-radius:2px;
}
.fi:focus { border-color:var(--ink3); background:var(--w); }
.fi::placeholder { color:var(--ink4); }
select.fi { appearance:none; cursor:pointer; }
textarea.fi { min-height:90px; resize:vertical; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:480px){ .frow { grid-template-columns:1fr; } }
.btn-primary {
  display:block; width:100%; background:var(--ink); color:#fff;
  border:none; padding:14px; font-family:var(--sans);
  font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
  border-radius:2px; text-align:center; transition:opacity .2s;
}
.btn-primary:hover { opacity:.78; }
.btn-secondary {
  display:block; width:100%; background:transparent; color:var(--ink);
  border:1px solid var(--line); padding:13px; font-family:var(--sans);
  font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
  border-radius:2px; text-align:center; transition:border-color .18s;
}
.btn-secondary:hover { border-color:var(--ink3); }
.alert { padding:12px 16px; border-radius:2px; font-size:13px; margin-bottom:18px; border:1px solid; line-height:1.5; }
.alert-error { background:#fef2f2; border-color:#fca5a5; color:#991b1b; }
.alert-success { background:#f0fdf4; border-color:#86efac; color:#166534; }

/* ───────────────────────────────────────
   ACCOUNT AREA
─────────────────────────────────────── */
.page-wrap {
  max-width:1040px; margin:0 auto;
  padding:calc(var(--nav-h) + 48px) 24px 80px;
}
@media(min-width:640px){ .page-wrap { padding:calc(var(--nav-h) + 60px) 48px 80px; } }
.page-h { font-family:var(--serif); font-size:clamp(28px, 4vw, 40px); font-weight:300; letter-spacing:-1px; color:var(--ink); margin-bottom:6px; }
.page-sub { font-size:13px; color:var(--ink3); margin-bottom:40px; }
.account-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media(min-width:768px){ .account-grid { grid-template-columns:200px 1fr; } }
.account-nav { display:flex; flex-direction:row; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:28px; }
@media(min-width:768px){ .account-nav { flex-direction:column; border-bottom:none; margin-bottom:0; border-right:1px solid var(--line); padding-right:32px; gap:4px; } }
.account-link { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3); padding:10px 16px; border-bottom:2px solid transparent; white-space:nowrap; transition:all .18s; }
@media(min-width:768px){ .account-link { padding:10px 0 10px 16px; border-bottom:none; border-left:2px solid transparent; } }
.account-link.on, .account-link:hover { color:var(--ink); }
.account-link.on { border-color:var(--ink); }
.card { background:var(--w); border:1px solid var(--line); border-radius:2px; padding:28px; margin-bottom:16px; }
.card-h { font-family:var(--serif); font-size:20px; font-weight:300; color:var(--ink); margin-bottom:20px; }
.order-code { font-family:var(--serif); font-size:16px; font-weight:300; color:var(--ink); }
.order-date { font-size:11px; color:var(--ink3); margin-top:4px; }
.order-status { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:2px; white-space:nowrap; display:inline-block; }
.status-pending    { background:#fef9c3; color:#854d0e; }
.status-confirmed  { background:#dbeafe; color:#1e40af; }
.status-processing { background:#e0e7ff; color:#3730a3; }
.status-shipped    { background:#d1fae5; color:#065f46; }
.status-delivered  { background:#f0fdf4; color:#166534; }
.status-cancelled  { background:#fee2e2; color:#991b1b; }

/* ───────────────────────────────────────
   CHECKOUT
─────────────────────────────────────── */
.checkout-layout { display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:768px){ .checkout-layout { grid-template-columns:1fr 380px; } }
.order-summary-box { background:var(--cream); border:1px solid var(--line); padding:28px; }
@media(min-width:768px){ .order-summary-box { position:sticky; top:calc(var(--nav-h) + 16px); } }
.osb-h { font-family:var(--serif); font-size:20px; font-weight:300; color:var(--ink); margin-bottom:20px; }
.osb-item { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center; }
.osb-img { width:56px; height:74px; background:var(--cream2); overflow:hidden; flex-shrink:0; border-radius:1px; }
.osb-img img, .osb-img svg { width:100%; height:100%; object-fit:cover; display:block; }
.osb-name { font-family:var(--serif); font-size:15px; font-weight:300; color:var(--ink); line-height:1.2; margin-bottom:4px; flex:1; }
.osb-qty { font-size:11px; color:var(--ink3); }
.osb-price { font-family:var(--serif); font-size:15px; color:var(--ink); white-space:nowrap; flex-shrink:0; }
.osb-totals { margin-top:18px; }
.osb-row { display:flex; justify-content:space-between; font-size:13px; color:var(--ink2); padding:6px 0; }
.osb-total { display:flex; justify-content:space-between; padding-top:16px; margin-top:10px; border-top:1px solid var(--line); align-items:baseline; }
.osb-total-l { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3); }
.osb-total-v { font-family:var(--serif); font-size:26px; font-weight:300; color:var(--ink); }
.coupon-wrap { display:flex; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.coupon-wrap .fi { flex:1; padding:10px 12px; }
.coupon-btn { padding:0 18px; background:var(--ink); color:#fff; border:none; border-radius:2px; font-size:10px; letter-spacing:1px; text-transform:uppercase; font-family:var(--sans); white-space:nowrap; }

/* ───────────────────────────────────────
   FOOTER
─────────────────────────────────────── */
footer { border-top:1px solid var(--line); background:var(--w); }
.ftop {
  max-width:1440px; margin:0 auto;
  padding:56px 24px; display:grid;
  grid-template-columns:1fr 1fr; gap:36px;
}
@media(min-width:640px){ .ftop { padding:72px 48px; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px; } }
@media(min-width:1024px){ .ftop { padding:80px 64px; } }
.flog { font-family:var(--serif); font-size:15px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.fsub { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink4); margin-bottom:16px; }
.fdesc { font-size:13px; color:var(--ink3); line-height:1.8; max-width:260px; }
.fct { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink4); margin-bottom:18px; font-weight:500; }
.flinks { display:flex; flex-direction:column; gap:13px; }
.flink { font-size:13px; color:var(--ink3); transition:color .15s; display:block; }
.flink:hover { color:var(--ink); }
.fbot {
  border-top:1px solid var(--line); max-width:1440px; margin:0 auto;
  padding:18px 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
@media(min-width:640px){ .fbot { padding:18px 48px; } }
.fbot span { font-size:11px; color:var(--ink4); }

/* ───────────────────────────────────────
   BREADCRUMB
─────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink4); margin-bottom:32px; flex-wrap:wrap; }
.breadcrumb a { color:var(--ink4); transition:color .15s; }
.breadcrumb a:hover { color:var(--ink); }
.breadcrumb-sep { opacity:.4; }

/* ───────────────────────────────────────
   TOAST
─────────────────────────────────────── */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:#fff;
  padding:12px 24px; border-radius:2px;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  z-index:9999; white-space:nowrap;
  transition:transform .3s var(--ease);
  pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.toast.on { transform:translateX(-50%) translateY(0); }

/* ───────────────────────────────────────
   EMPTY / MISC
─────────────────────────────────────── */
.empty-state { text-align:center; padding:80px 20px; }
.empty-state p { font-family:var(--serif); font-size:22px; font-weight:300; color:var(--ink); margin-bottom:8px; }
.empty-state small { font-size:12px; color:var(--ink3); }

/* ── ACCOUNT NAV FIX ── */
.account-nav {
  position:relative;
  min-height:0;
}
@media(max-width:767px){
  .account-nav {
    display:flex; flex-direction:row;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-bottom:1px solid var(--line);
    margin-bottom:32px; gap:0;
    padding-bottom:0;
    scrollbar-width:none;
  }
  .account-nav::-webkit-scrollbar { display:none; }
  .account-nav .account-link[style*="margin-top:auto"] {
    margin-top:0 !important;
    margin-left:auto;
  }
}
@media(min-width:768px){
  .account-nav {
    display:flex; flex-direction:column;
    border-right:1px solid var(--line);
    padding-right:32px; gap:4px;
    border-bottom:none; margin-bottom:0;
  }
  .account-nav .account-link[style*="margin-top:auto"] {
    margin-top:24px !important;
  }
}

/* ── PILLS FIX — sem fundo preto nos inativos ── */
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pill {
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 16px;
  border:1px solid var(--line); border-radius:100px;
  background:#fff; color:var(--ink3);
  font-family:var(--sans); font-weight:400;
  transition:all .15s; white-space:nowrap;
  cursor:pointer; display:inline-block; text-decoration:none;
}
.pill:hover { border-color:var(--ink3); color:var(--ink2); background:#fff; }
.pill.on { background:var(--ink); border-color:var(--ink); color:#fff; }

/* ── CATALOG LAYOUT FIX ── */
.catalog-section {
  max-width:1440px; margin:0 auto;
  padding:calc(var(--nav-h) + 56px) 24px 96px;
}
@media(min-width:768px){ .catalog-section { padding:calc(var(--nav-h) + 72px) 48px 112px; } }
@media(min-width:1024px){ .catalog-section { padding:calc(var(--nav-h) + 80px) 64px 128px; } }

.catalog-header {
  display:flex; flex-direction:column; gap:24px;
  margin-bottom:48px; padding-bottom:28px;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
@media(min-width:900px){
  .catalog-header { flex-direction:row; align-items:flex-end; }
  .catalog-header-left { flex:1; }
}

/* ── PRODUCT GRID FIX — garantir mínimo de altura nos cards ── */
.pcard-img { min-height:200px; }
@media(min-width:480px){ .pcard-img { min-height:0; } }

/* ── PAGE WRAP — garantir padding top para não ficar atrás da nav ── */
.page-wrap {
  padding-top:calc(var(--nav-h) + 48px);
}
@media(min-width:640px){
  .page-wrap { padding-top:calc(var(--nav-h) + 60px); }
}

/* ── SEARCH ICON FIX ── */
.search-wrap svg { flex-shrink:0; color:var(--ink4); }