/* OBERFELDLE — shared styles */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --orange:#ff9100; --orange-b:#ffb347;
  --orange-dim:rgba(255,145,0,.72); --orange-faint:rgba(255,145,0,.10);
  --orange-border:rgba(255,145,0,.30);
  --bg:#080808; --bg2:#0e0e0e; --bg3:#141414;
  --text:#f2ead8; --body:#c9bfb0; --dim:rgba(201,191,176,.58);
}
body{font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* ── Shipping banner ── */
.ship-banner{
  background:linear-gradient(90deg,#1a0600,#2c0f00,#1a0600);
  border-bottom:1px solid var(--orange-border);
  padding:10px 2rem; text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--orange-b);display:flex;align-items:center;justify-content:center;gap:10px;
}
.ship-banner svg{width:14px;height:14px;fill:var(--orange-b);}

/* ── Header ── */
header{
  border-bottom:.5px solid var(--orange-border);
  padding:1.6rem 2.5rem 1.4rem;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.logo{
  font-family:'UnifrakturMaguntia',cursive;
  font-size:34px;color:var(--orange);letter-spacing:.04em;line-height:1;
  text-shadow:0 0 18px rgba(255,145,0,.5),0 0 45px rgba(255,145,0,.18);
  text-decoration:none;
}
.logo span{color:var(--orange-b);}
.tagline{font-size:9px;letter-spacing:.34em;color:var(--orange-dim);text-transform:uppercase;margin-top:6px;}

.header-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.lang-sw{display:flex;gap:4px;}
.lang-btn{
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;background:transparent;border:.5px solid var(--orange-border);
  color:var(--orange-dim);cursor:pointer;border-radius:3px;transition:all .15s;
}
.lang-btn:hover,.lang-btn.active{color:var(--orange);border-color:var(--orange);background:var(--orange-faint);}

.tel-badge{
  display:flex;align-items:center;gap:10px;
  background:var(--orange-faint);border:.5px solid var(--orange-border);
  border-radius:4px;padding:9px 16px;
}
.tel-label{font-size:9px;letter-spacing:.2em;color:var(--orange-dim);text-transform:uppercase;margin-bottom:2px;}
.tel-num{font-size:12.5px;font-weight:600;color:var(--orange);letter-spacing:.06em;}
.icon{width:16px;height:16px;fill:var(--orange);}

/* ── Trust bar ── */
.trust-bar{
  display:flex;justify-content:center;align-items:center;gap:4rem;
  padding:1.8rem 2rem;border-bottom:.5px solid var(--orange-border);flex-wrap:wrap;
}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:8px;}
.trust-item svg{width:30px;height:30px;fill:none;stroke:var(--orange);stroke-width:1.6;}
.trust-label{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--body);font-weight:500;}

/* ── Disclaimer ── */
.disclaimer{
  background:rgba(255,100,0,.05);
  border-top:1px solid rgba(255,100,0,.16);border-bottom:1px solid rgba(255,100,0,.16);
  padding:12px 2rem;text-align:center;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,145,0,.60);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.disclaimer svg{width:12px;height:12px;fill:rgba(255,145,0,.60);}

/* ── Hero ── */
.hero-bg{
  position:relative;
  background-size:cover;background-position:center top;
  padding:8rem 2rem 6rem;overflow:hidden;
}
.hero-overlay{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(to bottom,rgba(4,1,0,.75) 0%,rgba(6,2,0,.45) 45%,rgba(6,2,0,.90) 100%);
}
.hero-content{position:relative;z-index:1;text-align:center;}
.hero-eyebrow{font-size:9.5px;letter-spacing:.48em;color:var(--orange);text-transform:uppercase;margin-bottom:1rem;}
.hero-title{
  font-family:'UnifrakturMaguntia',cursive;
  font-size:68px;font-weight:400;color:#fff5e0;
  letter-spacing:.04em;line-height:1.08;
  text-shadow:0 0 28px rgba(255,145,0,.55),0 0 60px rgba(255,145,0,.22),0 2px 4px rgba(0,0,0,.9);
}
.hero-sub{margin-top:1rem;font-size:11px;letter-spacing:.2em;color:var(--orange-dim);text-transform:uppercase;}
.divider{width:65px;height:1px;background:linear-gradient(90deg,transparent,var(--orange),transparent);margin:1.6rem auto;}

/* ── Filter bar ── */
.filter-bar{display:flex;gap:10px;justify-content:center;padding:2.2rem 2rem 0;flex-wrap:wrap;}
.filter-btn{
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  padding:11px 24px;border:.5px solid var(--orange-border);
  background:transparent;color:var(--orange-dim);cursor:pointer;border-radius:5px;transition:all .15s;
}
.filter-btn:hover{background:var(--orange-faint);color:var(--orange);}
.filter-btn.active{background:var(--orange-faint);color:var(--orange-b);border-color:var(--orange);}

/* ── Grid ── */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1px;background:rgba(255,145,0,.09);
  border-top:1px solid rgba(255,145,0,.09);margin:2rem 0 0;
}

/* ── Product card ── */
.card{background:var(--bg2);display:flex;flex-direction:column;transition:background .2s;}
.card:hover{background:var(--bg3);}

.card-img-wrap{
  position:relative;background:#0b0b0b;
  display:flex;align-items:center;justify-content:center;
  height:180px;overflow:hidden;border-bottom:.5px solid rgba(255,145,0,.10);
  padding:16px;
}
.card-img{max-width:100%;max-height:148px;object-fit:contain;transition:transform .35s;}
.card:hover .card-img{transform:scale(1.06);}

.hplc-badge{
  position:absolute;top:10px;right:10px;
  font-size:8.5px;font-weight:700;letter-spacing:.08em;
  background:rgba(255,145,0,.85);color:#000;
  padding:3px 8px;border-radius:2px;
}

.card-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 16px;}
.card-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:9px;}
.card-badge{
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 9px;background:var(--orange-faint);border:.5px solid var(--orange-border);
  color:var(--orange);border-radius:2px;
}
.status-pill{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px;border-width:.5px;border-style:solid;}
.status-fda {background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.4);color:#4ade80;}
.status-ext {background:rgba(6,182,212,.10);border-color:rgba(6,182,212,.4);color:#22d3ee;}
.status-well{background:rgba(129,140,248,.10);border-color:rgba(129,140,248,.4);color:#a5b4fc;}
.status-res {background:rgba(251,146,60,.10);border-color:rgba(251,146,60,.4);color:#fb923c;}

.card-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--orange-b);margin-bottom:2px;letter-spacing:.03em;}
.card-alias{font-size:9.5px;color:var(--dim);letter-spacing:.07em;margin-bottom:4px;}
.card-dose{font-size:9.5px;color:var(--orange-dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
.card-overview{font-size:11.5px;line-height:1.7;color:var(--body);margin-bottom:16px;flex:1;}

/* Card footer */
.card-footer{
  display:flex;flex-direction:column;gap:11px;
  border-top:.5px solid rgba(255,145,0,.13);padding-top:14px;margin-top:auto;
}
.price-lbl{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:2px;}
.price{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(13px,1.8vw,20px);
  font-weight:500;color:var(--orange-b);
  line-height:1.2;word-break:break-word;
}
.card-btns{display:flex;gap:7px;}
.btn-detail,.btn-inquire{
  font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 0;border-radius:4px;text-decoration:none;transition:all .15s;cursor:pointer;
  flex:1;text-align:center;border-width:1.5px;border-style:solid;
}
.btn-detail{background:transparent;border-color:var(--orange-border);color:var(--orange-dim);}
.btn-detail:hover{border-color:var(--orange);color:var(--orange);}
.btn-inquire{background:var(--orange-faint);border-color:var(--orange);color:var(--orange);}
.btn-inquire:hover{background:var(--orange);color:#000;}
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 0;border-radius:4px;text-decoration:none;transition:all .15s;cursor:pointer;
  flex:1;text-align:center;
}
.btn-detail{background:transparent;border:1.5px solid var(--orange-border);color:var(--orange-dim);}
.btn-detail:hover{border-color:var(--orange);color:var(--orange);}
.btn-inquire{background:var(--orange-faint);border:1.5px solid var(--orange);color:var(--orange);}
.btn-inquire:hover{background:var(--orange);color:#000;}

/* ── Guide section ── */
.guide-wrap{border-top:1px solid var(--orange-border);border-bottom:1px solid var(--orange-border);}
.guide-title-main{
  text-align:center;padding:2.2rem 2rem .4rem;
  font-family:'UnifrakturMaguntia',cursive;font-size:30px;color:var(--orange);
  text-shadow:0 0 18px rgba(255,145,0,.28);
}
.guide-sub{text-align:center;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);padding:0 2rem .4rem;}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1rem 2rem 2.5rem;max-width:1000px;margin:0 auto;}
@media(max-width:640px){.guide-grid{grid-template-columns:1fr;}}
.guide-card{background:var(--bg2);border:.5px solid var(--orange-border);border-radius:6px;overflow:hidden;}
.guide-card-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--orange-b);padding:16px 20px 12px;border-bottom:.5px solid var(--orange-border);}
.gtable{width:100%;border-collapse:collapse;}
.gtable th{font-size:8.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-dim);padding:9px 20px;border-bottom:.5px solid rgba(255,145,0,.12);text-align:left;}
.gtable td{font-size:11.5px;color:var(--body);padding:9px 20px;border-bottom:.5px solid rgba(255,145,0,.07);}
.gtable tr:last-child td{border-bottom:none;}
.gtable tr:hover td{background:rgba(255,145,0,.03);}
.gnote{color:var(--dim);font-size:10.5px;font-style:italic;}

/* ── CTA ── */
.cta-section{
  text-align:center;padding:4.5rem 2rem;
  border-top:.5px solid var(--orange-border);
}
.cta-title{font-family:'UnifrakturMaguntia',cursive;font-size:42px;color:var(--orange);margin-bottom:10px;text-shadow:0 0 26px rgba(255,145,0,.36);}
.cta-sub{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:2.5rem;}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:5px;text-decoration:none;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:all .15s;
}
.cta-phone{background:var(--orange-faint);border:1.5px solid var(--orange);color:var(--orange);}
.cta-phone:hover{background:var(--orange);color:#000;}
.cta-phone svg{fill:currentColor;width:17px;height:17px;}
.cta-wa{background:rgba(37,211,102,.08);border:1.5px solid rgba(37,211,102,.5);color:#4ade80;}
.cta-wa:hover{background:#25d366;border-color:#25d366;color:#fff;}
.cta-wa svg{fill:currentColor;width:17px;height:17px;}
.cta-ig{background:rgba(225,48,108,.08);border:1.5px solid rgba(225,48,108,.4);color:#f472b6;}
.cta-ig:hover{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent;color:#fff;}
.cta-ig svg{fill:currentColor;width:17px;height:17px;}
.cta-num{font-size:13px;}

/* ── Float buttons ── */
.float-btns{position:fixed;bottom:22px;right:20px;z-index:999;display:flex;flex-direction:column;gap:9px;align-items:flex-end;}
.float-btn{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;border-radius:50px;text-decoration:none;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
  box-shadow:0 4px 18px rgba(37,211,102,.4);
  transition:all .18s;color:#fff;white-space:nowrap;background:#25d366;
}
.float-btn:hover{transform:scale(1.05);}
.float-btn svg{width:18px;height:18px;fill:#fff;}
.float-call{background:var(--orange);box-shadow:0 4px 18px rgba(255,145,0,.4);}

/* ── Footer ── */
footer{
  text-align:center;padding:2rem;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,145,0,.34);border-top:.5px solid rgba(255,145,0,.12);
}
.foot-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:9px;}
.foot-links a{color:rgba(255,145,0,.38);text-decoration:none;font-size:9.5px;letter-spacing:.14em;transition:color .15s;}
.foot-links a:hover{color:var(--orange);}

/* Responsive */
@media(max-width:580px){
  .hero-title{font-size:46px;}
  .logo{font-size:28px;}
  .trust-bar{gap:1.8rem;}
  .cta-title{font-size:30px;}
  .float-btns{bottom:14px;right:12px;}
}