/* Peptide Global — shared chrome (tokens, header ticker, footer, buttons). */
:root {
  --paper:#FFFFFF; --mist:#F3F7FA; --panel:#E9F0F5; --line:#DCE5EC;
  --ink:#0C2440; --slate:#4A6076; --faint:#7A8FA3;
  --blue:#1F6FB8; --blue-deep:#175A96; --blue-wash:#E4EFF8;
  --coral:#FF6F5E; --coral-deep:#E85843;
  --good:#1E8A5E; --good-wash:#E2F3EB;
  --navy:#0C2440; --navy-ink:#D7E3EE; --navy-line:rgba(255,255,255,.14);
  --shadow:0 10px 30px rgba(12,36,64,.08);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; overflow-x:clip; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.65 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100vw;
}
img { max-width:100%; }
a { color:var(--blue); text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
h1,h2,h3,h4 { font-family:'Poppins',sans-serif; line-height:1.25; margin:0; text-wrap:balance; }
.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,40px); }
.eyebrow {
  font:600 12px/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); display:flex; align-items:center; gap:10px;
}
.eyebrow::before { content:''; width:26px; height:2px; background:var(--coral); border-radius:2px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:10px; cursor:pointer;
  font:600 15px/1 'Inter',sans-serif; padding:15px 26px; border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-coral { background:var(--coral); color:#0C2440; }
.btn-coral:hover { background:var(--coral-deep); }
.btn-navy { background:var(--ink); color:#fff; }
.btn-navy:hover { background:var(--blue); }
.btn-ghost { border-color:var(--line); color:var(--ink); background:var(--paper); }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue); }
.chip { display:inline-flex; align-items:center; gap:7px; border-radius:99px; font:600 12px/1 'Inter',sans-serif; padding:7px 13px; }

/* announcement ticker */
.topbar { background:var(--navy); color:var(--navy-ink); font-size:12.5px; overflow:hidden; }
.ticker-track { display:flex; width:max-content; animation:pg-ticker 32s linear infinite; }
.topbar:hover .ticker-track { animation-play-state:paused; }
.ticker-items { display:flex; align-items:center; gap:46px; list-style:none; margin:0; padding:0 46px 0 0; }
.ticker-items li { display:flex; align-items:center; gap:8px; white-space:nowrap; min-height:38px; }
.ticker-items svg { flex:none; }
.ticker-ruo { font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:11px; color:#FFB3A8; }
@keyframes pg-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track { animation:none; } }

/* header */
.site-header { position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); }
.site-header .wrap {
  display:flex; align-items:center; gap:32px; min-height:74px;
  max-width:none; padding-left:clamp(16px,2vw,32px); padding-right:clamp(16px,2vw,32px);
}
.logo img { height:34px; width:auto; display:block; }
.site-header nav { flex:1 1 auto; display:flex; justify-content:center; min-width:0; }
.primary-menu { display:flex; gap:clamp(4px,1.2vw,22px); list-style:none; margin:0; padding:0; }
.primary-menu a { display:block; padding:10px 14px; border-radius:8px; font:600 14.5px/1 'Inter',sans-serif; color:var(--ink); }
.primary-menu a:hover { background:var(--mist); color:var(--blue); }
.primary-menu a[aria-current="page"] { color:var(--blue); }
.header-tools { display:flex; align-items:center; gap:6px; }
.tool-btn {
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:none; background:none; border-radius:9px; color:var(--ink); cursor:pointer; position:relative;
}
.tool-btn:hover { background:var(--mist); color:var(--blue); }
.cart-count {
  position:absolute; top:3px; right:2px; background:var(--coral); color:#fff;
  font:600 10.5px/1 'Inter',sans-serif; padding:3px 5.5px; border-radius:99px;
}
@media (max-width:960px){ .primary-menu { display:none; } .site-header .wrap { justify-content:space-between; } }

/* footer */
.site-footer { background:var(--navy); color:var(--navy-ink); border-top:1px solid var(--navy-line); margin-top:0; }
.site-footer a { text-decoration:none; }
.footer-stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--navy-line); }
.footer-stat { padding:26px 12px; text-align:center; border-left:1px solid var(--navy-line); }
.footer-stat:first-child { border-left:none; }
.footer-stat b { display:block; font:700 clamp(20px,2.4vw,26px)/1.2 'Poppins',sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.footer-stat span { font:600 10.5px/1.5 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:rgba(215,227,238,.55); }
.footer-main { display:grid; grid-template-columns:1.7fr 1fr 1.1fr 1fr 1fr; gap:clamp(24px,3vw,48px); padding-top:clamp(44px,6vw,64px); padding-bottom:clamp(36px,5vw,52px); }
.footer-brand img { height:30px; width:auto; margin-bottom:18px; display:block; }
.footer-brand p { font-size:13.5px; margin:0 0 20px; max-width:38ch; color:rgba(215,227,238,.75); }
.footer-contact { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-contact li { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:rgba(215,227,238,.75); }
.footer-contact svg { flex:none; margin-top:2.5px; color:rgba(215,227,238,.5); }
.footer-contact a { color:rgba(215,227,238,.9); }
.footer-contact a:hover { color:#fff; }
.payments { display:flex; gap:8px; flex-wrap:wrap; }
.pay-chip { border:1px solid var(--navy-line); border-radius:6px; padding:6px 10px; font:600 11px/1 'Inter',sans-serif; letter-spacing:.04em; color:rgba(215,227,238,.85); }
.footer-col h4 { font:600 12px/1 'Poppins',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:rgba(215,227,238,.75); font-size:13.5px; }
.footer-col a:hover { color:#fff; }
.footer-about { border-top:1px solid var(--navy-line); padding:clamp(30px,4vw,44px) 0; }
.footer-about h4 { font:600 12px/1 'Poppins',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 18px; }
.footer-about-cols { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.footer-about p { margin:0; font-size:13px; line-height:1.75; color:rgba(215,227,238,.6); text-align:justify; }
.site-footer .ruo-note {
  background:rgba(255,111,94,.08); border:1px solid rgba(255,111,94,.28); color:#FFB3A8;
  border-radius:10px; padding:14px 18px; font-size:12.5px; line-height:1.7; margin-bottom:30px;
}
.footer-legal { border-top:1px solid var(--navy-line); padding:20px 0 26px; }
.footer-legal .wrap { display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap; font-size:12px; color:rgba(215,227,238,.55); }
.footer-legal-links { display:flex; gap:8px 20px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.footer-legal-links a { color:rgba(215,227,238,.65); font-size:12px; }
.footer-legal-links a:hover { color:#fff; }
@media (max-width:1020px){ .footer-main { grid-template-columns:1fr 1fr 1fr; } .footer-brand { grid-column:1 / -1; } }
@media (max-width:820px){ .footer-stats { grid-template-columns:repeat(2,1fr); } .footer-stat:nth-child(3) { border-left:none; } .footer-stat:nth-child(n+3) { border-top:1px solid var(--navy-line); } .footer-about-cols { grid-template-columns:1fr; } }
@media (max-width:640px){ .footer-main { grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .footer-main { grid-template-columns:1fr; } }

/* product grid (shop archive) */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card {
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s;
}
.product-card:hover { border-color:var(--blue); box-shadow:var(--shadow); }
.product-media { background:var(--mist); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.product-media img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.badge { position:absolute; top:12px; left:12px; border-radius:6px; padding:5px 9px; font:600 11px/1 'Inter',sans-serif; letter-spacing:.05em; z-index:2; }
.badge-purity { background:var(--good-wash); color:var(--good); }
.product-body { padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-cat { font:600 11px/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.product-title { font:600 16px/1.35 'Poppins',sans-serif; color:var(--ink); }
.product-title a { color:inherit; }
.product-title a:hover { color:var(--blue); }
.price { font:600 17px/1 'Inter',sans-serif; font-variant-numeric:tabular-nums; margin-top:6px; color:var(--ink); }
.price del { color:var(--faint); font-weight:400; font-size:14px; margin-right:7px; }
.price ins { text-decoration:none; }
.add-btn {
  margin-top:14px; width:100%; justify-content:center; padding:12px 0;
  background:var(--ink); color:#fff; border:none; border-radius:9px;
  font:600 14px/1 'Inter',sans-serif; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.add-btn:hover { background:var(--blue); color:#fff; }
@media (max-width:960px){ .product-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .product-grid { grid-template-columns:1fr; } }

/* page title band */
.page-band { background:var(--mist); border-bottom:1px solid var(--line); }
.page-band .wrap { padding-top:clamp(30px,4vw,46px); padding-bottom:clamp(30px,4vw,46px); }
.page-band h1 { font-size:clamp(26px,3.4vw,38px); font-weight:700; letter-spacing:-.01em; margin-top:12px; }
.page-band .eyebrow + h1 { margin-top:12px; }
