/* ============================================================
   FLORÍADE — UI: header, footer, cards, hero, seções
   ============================================================ */

.no-frames .vine{ display:none !important; }
.no-spin .spin-slow, .no-spin .spin-rev{ animation:none !important; }

.main{ min-height:60vh; }
.icon-btn{
  background:none; border:1px solid var(--line); color:var(--ink);
  width:38px; height:38px; border-radius:50%; font-size:.9rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.icon-btn:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); }

/* ---------------- GRID ---------------- */
.grid{ display:grid; gap:clamp(20px,2.4vw,34px); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-4,.grid-3{ grid-template-columns:1fr 1fr; gap:16px;} }

/* ---------------- SECTION HEADS ---------------- */
.sec-head{ margin-bottom:clamp(34px,5vw,60px); }
.sec-head.center{ text-align:center; }
.sec-title{ font-size:clamp(2rem,4.4vw,3.4rem); margin:.3em 0 .5em; }
.sec-sub{ max-width:60ch; margin:0 auto; }
.sec-head.center .divider{ max-width:340px; margin-inline:auto; }
.sec-foot{ text-align:center; margin-top:clamp(34px,5vw,56px); }
.band{ background:var(--bg-band); border-block:1px solid var(--line-soft); }
.band--deep{ background:var(--bg-deep); }

/* ---------------- HEADER ---------------- */
.hdr{ position:sticky; top:0; z-index:50; background:var(--bg); transition:box-shadow .4s var(--ease); }
.hdr--solid{ box-shadow:0 1px 0 var(--line-soft), 0 12px 30px -22px var(--shadow-strong); }
.hdr-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px clamp(20px,5vw,64px); background:var(--bg-deep);
  font-size:.7rem; white-space:nowrap;
}
.hdr-tagline{ font-size:.58rem; letter-spacing:.22em; }
.hdr-ship{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.hdr-main{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px; transition:padding .4s var(--ease); }
.hdr--solid .hdr-main{ padding-block:9px; }
.hdr-nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); flex:1; }
.hdr-nav--r{ justify-content:flex-end; }
.navlink{
  background:none; border:0; color:var(--ink-soft); font-family:var(--font-serif);
  font-size:1.05rem; letter-spacing:.01em; padding:4px 2px; position:relative; transition:color .3s var(--ease);
}
.navlink::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--gold); transition:right .35s var(--ease); }
.navlink:hover{ color:var(--ink); } .navlink:hover::after{ right:0; }
.navlink.is-active{ color:var(--gold); } .navlink.is-active::after{ right:0; }
.hdr-brand{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; flex:none; }
.hdr-logo{ width:54px; height:54px; color:var(--gold); transition:width .4s var(--ease), height .4s var(--ease); }
.hdr--solid .hdr-logo{ width:40px; height:40px; }
.hdr-word{ font-size:1.7rem; letter-spacing:.06em; color:var(--ink); line-height:1; }
.hdr-sub{ font-family:var(--font-mono); font-size:.5rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); overflow:hidden; max-height:14px; opacity:.85; transition:max-height .4s var(--ease), opacity .3s var(--ease); }
.hdr--solid .hdr-sub{ max-height:0; opacity:0; }
.cart-btn{ position:relative; background:none; border:1px solid var(--line); width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-left:8px; transition:all .3s var(--ease); }
.cart-btn:hover{ border-color:var(--gold); background:var(--seal-bg); }
.cart-glyph{ font-size:1.05rem; }
.cart-btn.bump{ animation:bump .42s var(--ease); }
@keyframes bump{ 0%,100%{transform:none} 35%{transform:scale(1.18)} }
.cart-count{ position:absolute; top:-5px; right:-5px; background:var(--gold); color:var(--bg); font-family:var(--font-mono); font-size:.6rem; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
@media (max-width:820px){
  .hdr-nav .navlink{ display:none; }
  .hdr-main{ display:grid; grid-template-columns:1fr auto 1fr; }
  .hdr-nav--r{ gap:8px; } .cart-btn{ display:inline-flex; }
}
@media (max-width:560px){ .hdr-bar{ display:none; } }

/* ---------------- HERO ---------------- */
.hero{ position:relative; padding:clamp(18px,3vw,30px); }
.hero-frame{
  position:relative; min-height:clamp(560px,86vh,860px); overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(38% 46% at 20% 16%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 72%),
    radial-gradient(38% 46% at 80% 16%, color-mix(in srgb, var(--silver) 16%, transparent), transparent 72%),
    radial-gradient(120% 90% at 50% 32%, var(--seal-bg) 0%, transparent 60%),
    var(--bg);
}
.hero-vine{ position:absolute; z-index:2; }
.hero-vine--t{ top:14px; left:36px; right:36px; }
.hero-vine--b{ bottom:14px; left:36px; right:36px; }
.hero-vine--l{ left:14px; top:36px; bottom:36px; }
.hero-vine--r{ right:14px; top:36px; bottom:36px; }
.hero-wheel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.34; z-index:0; pointer-events:none; will-change:transform; }
.hero-wheel .alch-wheel{ width:min(640px,82vw); height:auto; }
.hero-emblem{ display:block; margin:0 auto clamp(12px,2vw,22px); }
.hero-inner{ position:relative; z-index:3; max-width:880px; padding:clamp(40px,7vw,80px) clamp(20px,5vw,40px); }
.hero-inner::before{ content:""; position:absolute; inset:-6% -10%; z-index:-1; background:radial-gradient(60% 56% at 50% 48%, var(--bg) 38%, transparent 78%); }
.hero-title{ font-size:clamp(2.5rem,6.6vw,5.6rem); margin:.32em 0; }
.hero-amp{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--gold); }
.hero-lead{ max-width:54ch; margin:1.2em auto 0; }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:2.2em; }
.hero-corners{ position:absolute; inset:48px; z-index:2; pointer-events:none; }
.hc{ position:absolute; font-size:1.1rem; opacity:.6; }
.hc-tl{ top:0; left:0; } .hc-tr{ top:0; right:0; } .hc-bl{ bottom:0; left:0; } .hc-br{ bottom:0; right:0; }
.hero-scroll{ text-align:center; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:18px; display:flex; gap:.6em; align-items:center; justify-content:center; }
.hero-scroll .glyph{ color:var(--gold); }

/* ---------------- PRODUCT CARD ---------------- */
.card{ background:var(--panel); border:1px solid var(--line-soft); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); --i:0; }
.card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -34px var(--shadow-strong); border-color:var(--line); }
.card-img-btn{ position:relative; background:none; border:0; padding:0; display:block; overflow:hidden; }
/* lâmina de luz prateada varrendo no hover */
.card-img-btn::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--silver) 30%, transparent) 50%, transparent 62%);
  transform:translateX(-130%); transition:transform 1s var(--ease); }
.card:hover .card-img-btn::after{ transform:translateX(130%); }
.prod-img{ position:relative; aspect-ratio:4/5; background:var(--img-base); overflow:hidden; }
.prod-img--tall{ aspect-ratio:3/4; }
.prod-img image-slot{ display:block; width:100%; height:100%; transition:transform .7s var(--ease); }
.card:hover .prod-img image-slot{ transform:scale(1.04); }
.prod-sigil{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg); opacity:0; transform:scale(.6) rotate(-30deg); transition:all .5s var(--ease); z-index:2; }
.card:hover .prod-sigil{ opacity:1; transform:none; }
.prod-sigil .glyph{ font-size:.9rem; }
.card-line{ white-space:nowrap; position:absolute; left:0; bottom:0; background:var(--bg); color:var(--gold); font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; padding:.5em .9em; border-top:1px solid var(--line-soft); border-right:1px solid var(--line-soft); }
.card-body{ padding:clamp(16px,1.6vw,22px); display:flex; flex-direction:column; gap:6px; flex:1; }
.card-corr{ margin-bottom:2px; }
.corr{ display:inline-flex; align-items:center; gap:.5em; color:var(--gold); }
.corr--mono{ font-family:var(--font-mono); }
.corr .glyph{ font-size:.95rem; }
.corr-dot{ opacity:.5; }
.card-name{ font-size:1.5rem; line-height:1.1; color:var(--ink); cursor:pointer; }
.card-latin{ font-family:var(--font-serif); font-style:italic; color:var(--ink-faint); font-size:.98rem; margin-top:-2px; }
.card-tag{ font-size:.95rem; color:var(--ink-soft); }
.card-foot{ margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line-soft); }
.card-price{ font-size:1.32rem; color:var(--ink); }

.reveal{ --i:0; }

/* ---------------- OPUS BAND ---------------- */
.opus-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px); }
@media (max-width:760px){ .opus-grid{ grid-template-columns:1fr; gap:40px; } }
.opus-card{ text-align:center; position:relative; }
.opus-node{ position:relative; width:88px; height:88px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; }
.opus-ring{ position:absolute; inset:0; border:1px solid var(--gold); border-radius:50%; }
.opus-card:nth-child(1) .opus-ring,
.opus-card:nth-child(2) .opus-ring{ border-color:var(--silver); }
.opus-node::after{ content:""; position:absolute; inset:8px; border:1px solid var(--line); border-radius:50%; opacity:.5; }
.opus-glyph{ position:relative; z-index:1; color:var(--gold); }
.opus-roman{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.3em; color:var(--gold); }
.opus-name{ font-size:1.9rem; margin:.2em 0 0; }
.opus-sub{ font-style:italic; color:var(--ink-faint); font-size:1.1rem; margin-bottom:.6em; }
.opus-desc{ color:var(--ink-soft); max-width:34ch; margin:0 auto; font-size:1rem; }

/* ---------------- COLLECTIONS ---------------- */
.coll-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
@media (max-width:880px){ .coll-grid{ grid-template-columns:repeat(2,1fr);} }
.coll-tile{ position:relative; text-align:left; background:var(--panel); border:1px solid var(--line-soft); padding:clamp(22px,2.4vw,32px); min-height:200px; display:flex; flex-direction:column; gap:8px; transition:all .45s var(--ease); overflow:hidden; }
.coll-tile:hover{ background:var(--panel-2); border-color:var(--gold); transform:translateY(-4px); }
.coll-glyph{ font-size:2rem; color:var(--gold); transition:transform .6s var(--ease); }
.coll-tile:hover .coll-glyph{ transform:rotate(45deg) scale(1.12); }
.coll-name{ font-size:1.45rem; margin-top:auto; color:var(--ink); }
.coll-n{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.coll-arrow{ position:absolute; top:24px; right:24px; color:var(--gold); opacity:0; transform:translateX(-6px); transition:all .4s var(--ease); }
.coll-tile:hover .coll-arrow{ opacity:1; transform:none; }

/* ---------------- QUOTE / CLOSING ---------------- */
.quote-band{ padding-block:clamp(70px,10vw,130px); }
.quote-mark{ font-size:2rem; color:var(--gold); display:block; margin-bottom:18px; }
.quote-txt{ font-size:clamp(1.5rem,3.2vw,2.5rem); font-weight:400; line-height:1.28; max-width:22ch; margin:0 auto; color:var(--ink); }
.quote-cite{ margin-top:24px; }
.closing{ } .closing .seal{ margin-bottom:8px; }
.closing-title{ font-size:clamp(2rem,4.4vw,3.2rem); margin:.3em 0; }
.closing-sub{ max-width:48ch; margin:0 auto 2em; }

/* ---------------- FOOTER ---------------- */
.ftr{ background:var(--bg-deep); margin-top:clamp(40px,8vw,90px); }
.ftr-main{ display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(40px,6vw,90px); padding-block:clamp(50px,7vw,80px); }
@media (max-width:840px){ .ftr-main{ grid-template-columns:1fr; gap:48px;} }
.ftr-brand{ }
.ftr-word{ font-size:2.2rem; margin:18px 0 6px; }
.ftr-motto{ font-style:italic; color:var(--ink-soft); }
.ftr-cols{ display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:30px; }
@media (max-width:560px){ .ftr-cols{ grid-template-columns:1fr 1fr; } .ftr-col--news{ grid-column:1/-1; } }
.ftr-col{ display:flex; flex-direction:column; gap:10px; }
.ftr-col .eyebrow{ margin-bottom:6px; }
.ftr-link{ background:none; border:0; text-align:left; color:var(--ink-soft); font-family:var(--font-serif); font-size:1.05rem; transition:color .3s var(--ease); width:fit-content; }
.ftr-link:hover{ color:var(--gold); }
.ftr-news-txt{ color:var(--ink-soft); font-size:.98rem; }
.ftr-form{ display:flex; gap:8px; margin-top:6px; }
.ftr-form input{ flex:1; background:var(--panel); border:1px solid var(--line); color:var(--ink); padding:.7em 1em; font-family:var(--font-serif); font-size:1rem; }
.ftr-form input::placeholder{ color:var(--ink-faint); }
.ftr-base{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px; border-top:1px solid var(--line-soft); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); flex-wrap:wrap; }
.ftr-glyphs{ display:inline-flex; gap:.55em; font-size:.85rem; }
.ftr-glyphs span{ color:var(--ink-faint); }
.ftr-glyphs .txt-sol{ color:var(--gold); }
.ftr-glyphs .txt-luna{ color:var(--silver); }