:root{
  --black:#080808;
  --soft:#121212;
  --white:#f7f7f5;
  --muted:#b6b6b3;
  --gold:#cf9729;
  --gold2:#b87f16;
  --line:#2a2a2a;
  --green:#25D366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{touch-action:manipulation}
.skip-link{
  position:absolute;left:-9999px;top:8px;background:#fff;color:#000;padding:10px;z-index:999
}
.skip-link:focus{left:8px}
.topbar{
  background:var(--gold);color:#0a0a0a;text-align:center;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:8px 12px
}
.site-header{
  position:sticky;top:0;z-index:50;
  min-height:70px;padding:8px 5vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(8,8,8,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.nav{display:flex;gap:24px;align-items:center}
.nav a{font-size:.9rem;color:#ddd}
.nav a:hover,.nav a:focus{color:var(--gold)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:30px}
.hero{
  min-height:calc(100vh - 102px);
  display:grid;grid-template-columns:1fr 1.25fr;
  align-items:center;gap:42px;padding:6vw 5vw;
  background:
    radial-gradient(circle at 20% 20%, rgba(207,151,41,.15), transparent 34%),
    linear-gradient(135deg,#0b0b0b,#050505);
}
.eyebrow{font-size:.78rem;letter-spacing:.2em;color:var(--gold);font-weight:800}
h1,h2,h3{font-family:Oswald,Inter,sans-serif;margin:0}
h1{font-size:clamp(4rem,9vw,8rem);line-height:.88;text-transform:uppercase;letter-spacing:-.03em}
h1 span{color:var(--gold)}
.hero-text{max-width:600px;color:#c9c9c6;line-height:1.7;font-size:1.05rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.btn{
  border:0;border-radius:6px;padding:14px 20px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  min-height:48px
}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#0b0b0b}
.btn-ghost{border:1px solid #4a4a4a;background:transparent;color:#fff}
.btn-dark{background:#0c0c0c;color:#fff;width:100%;border:1px solid #242424}
.hero-price{font-size:1.6rem;font-weight:800}
.hero-price span{font-size:.9rem;color:var(--muted);font-weight:500}
.trust-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;color:#bdbdb9;font-size:.84rem}
.hero-media img{border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.strip{
  display:flex;gap:24px;justify-content:space-around;flex-wrap:wrap;
  padding:18px 5vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:#d5d5d3;text-transform:uppercase;font-size:.76rem;letter-spacing:.14em
}
.section{padding:90px 5vw}
.alt-section{background:#0d0d0d}
.section-head{max-width:760px;margin-bottom:36px}
.section-head h2,.story-section h2,.feature-section h2,.contact-section h2{
  font-size:clamp(2.6rem,6vw,5rem);text-transform:uppercase;line-height:.95
}
.section-head>p:last-child,.story-copy,.feature-section p,.contact-section>p{
  color:#bcbcb9;line-height:1.7
}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.product-card{background:#111;border:1px solid #202020;border-radius:12px;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.product-card:hover{transform:translateY(-3px);border-color:#3a3a3a}
.product-img-wrap{position:relative;background:#fff}
.product-card img{aspect-ratio:1/1;object-fit:cover}
.badge{
  position:absolute;left:12px;top:12px;background:#0a0a0a;color:var(--gold);
  padding:7px 9px;border-radius:999px;font-size:.65rem;font-weight:800;letter-spacing:.12em
}
.product-info{padding:18px}
.tag{font-size:.72rem;letter-spacing:.16em;color:var(--gold);font-weight:800}
.product-info h3{font-size:1.45rem}
.product-desc{color:#a9a9a5;line-height:1.5;font-size:.9rem}
.price{font-size:1.1rem;font-weight:800}
.story-section{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  padding:100px 5vw;background:#f1f0eb;color:#111
}
.story-section .eyebrow{color:#8f6517}
.story-copy{font-size:1.08rem!important;color:#333!important}
.story-slogan{font-family:Oswald,sans-serif;font-size:1.4rem;font-weight:700}
.feature-section{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  padding:100px 5vw
}
.feature-section img{border-radius:16px;background:#fff}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border:1px solid var(--line);background:#101010;padding:26px;border-radius:10px}
.step strong{color:var(--gold);font-size:1.8rem;font-family:Oswald,sans-serif}
.step h3{font-size:1.35rem;margin:10px 0 6px}
.step p{margin:0;color:#aaa;line-height:1.6}
.size-box{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:800px}
.size-box>div{border:1px solid var(--line);background:#111;padding:22px;border-radius:10px;display:grid;gap:8px}
.size-box span{color:#aaa}
.size-box strong{font-size:1.2rem}
.fineprint{color:#818181;font-size:.8rem;margin-top:16px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{border:1px solid var(--line);background:#101010;padding:28px;border-radius:10px}
.info-card h3{font-size:1.5rem}
.info-card p{color:#bdbdbb;line-height:1.7}
.faq-list{display:grid;gap:10px;max-width:900px}
details{border:1px solid var(--line);background:#101010;border-radius:8px;padding:0 18px}
summary{cursor:pointer;font-weight:800;padding:18px 0}
details p{color:#bcbcb9;line-height:1.7;padding:0 0 18px;margin:0}
.contact-section{text-align:center;padding:110px 5vw;background:#0f0f0f}
.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0}
.small{font-size:.88rem}
.policy-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 5vw;display:flex;gap:20px;justify-content:center;flex-wrap:wrap
}
.text-btn{background:none;border:0;color:#aaa;text-decoration:underline;cursor:pointer}
footer{
  padding:28px 5vw;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:20px;color:#999;font-size:.85rem
}
.footer-brand img{width:34px;height:34px}
.floating-wa{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:60;background:var(--green);color:#07140b;font-weight:900;
  padding:13px 18px;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.35)
}
.modal{display:none;position:fixed;inset:0;z-index:100}
.modal.show{display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}
.modal-card{
  position:relative;z-index:1;width:min(92vw,600px);max-height:90vh;overflow:auto;
  background:#151515;border:1px solid #2c2c2c;border-radius:14px;padding:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)
}
.modal-close{position:absolute;right:16px;top:12px;background:none;border:0;color:#fff;font-size:32px;cursor:pointer}
.modal-sub{color:#aaa;margin-top:8px}
form{display:grid;gap:14px;margin-top:20px}
label{display:grid;gap:8px;color:#dededb;font-size:.9rem}
input,select{
  width:100%;background:#0d0d0d;color:#fff;border:1px solid #343434;
  border-radius:6px;padding:12px 13px;min-height:48px
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.full{width:100%;margin-top:4px}
.form-note{color:#8e8e8e;font-size:.78rem;margin:0}
.order-summary{display:flex;justify-content:space-between;gap:20px;padding:15px;border:1px solid #313131;border-radius:8px;background:#0d0d0d}
.order-summary span{color:#aaa}
.order-summary strong{color:var(--gold)}
.checkbox-label{grid-template-columns:auto 1fr;align-items:start}
.checkbox-label input{width:18px;height:18px;min-height:0;margin-top:2px}
.policy-card h3{margin-top:20px}
.policy-card p,.policy-card li{color:#c1c1be;line-height:1.65}
.policy-card ul{padding-left:20px}

@media(max-width:1100px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr}
  .hero-media{order:-1}
  .story-section,.feature-section{grid-template-columns:1fr}
}
@media(max-width:700px){
  .topbar{font-size:.63rem}
  .site-header{min-height:66px}
  .brand span{font-size:1rem}
  .brand img{width:42px;height:42px}
  .menu-btn{display:block}
  .nav{
    position:absolute;top:66px;left:0;right:0;background:#0b0b0b;
    padding:18px 5vw;display:none;flex-direction:column;align-items:flex-start;
    border-bottom:1px solid #222
  }
  .nav.open{display:flex}
  .hero{padding-top:28px;min-height:auto}
  h1{font-size:4.2rem}
  .product-grid,.info-grid,.steps-grid,.size-box{grid-template-columns:1fr}
  footer{align-items:flex-start;flex-direction:column}
  .floating-wa span{display:none}
  .floating-wa::after{content:"WA"}
  .floating-wa{padding:13px 15px}
  .modal-card{padding:24px 18px}
  .two-col{grid-template-columns:1fr}
}

/* V3 product image fit improvements */
.product-img-wrap{
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f7f7f5;
  padding:12px;
}
.product-card img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  border-radius:8px;
}
.hero-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-media img{
  width:100%;
  max-height:72vh;
  object-fit:contain;
  object-position:center;
  background:#f7f7f5;
}
@media(max-width:700px){
  .product-img-wrap{aspect-ratio: 1.05 / 1;padding:8px}
  .hero-media img{max-height:none;width:100%;object-fit:contain}
}

/* V5 Yoco checkout */
.field-help{color:#888;font-size:.76rem;line-height:1.4}
.order-summary-stack{display:grid;gap:8px}
.order-summary.grand{border-color:#8c6d24;background:#111}
.order-summary.grand strong{font-size:1.08rem}
.form-error{min-height:1.1em;color:#ff8a8a;font-size:.82rem;margin:0}
button:disabled{opacity:.62;cursor:not-allowed}
.payment-page{min-height:100vh;display:grid;place-items:center;padding:30px 5vw;background:#080808}
.payment-card{width:min(100%,620px);text-align:center;background:#151515;border:1px solid #2c2c2c;border-radius:16px;padding:40px 28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.payment-card>img{width:110px;height:110px;object-fit:contain;margin:0 auto 18px}
.payment-card h1{font-size:clamp(2.2rem,9vw,4.4rem);line-height:.98;margin:8px 0 16px}
.payment-card p{color:#b9b9b5;line-height:1.6}
.payment-ref{color:var(--gold)!important;font-weight:700}
.payment-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 14px}

/* Shopping cart */
.header-actions{display:flex;align-items:center;gap:12px}
.cart-btn{border:1px solid #454545;background:#151515;color:#fff;border-radius:8px;padding:9px 12px;cursor:pointer;font-weight:700;white-space:nowrap}
.cart-btn span{display:inline-grid;place-items:center;min-width:23px;height:23px;padding:0 4px;background:var(--gold);color:#111;border-radius:99px;margin-left:4px}
.cart-items{display:grid;gap:10px;margin:20px 0;max-height:42vh;overflow:auto}
.cart-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0d0d0d;border:1px solid #303030;border-radius:8px;padding:12px}
.cart-item p{margin:5px 0 0;color:#aaa;font-size:.82rem}
.cart-remove{background:transparent;border:1px solid #555;border-radius:6px;color:#fff;padding:8px;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.header-actions{gap:7px}.cart-btn{font-size:.78rem;padding:8px}.cart-item{align-items:flex-start}}

.social-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.social-links a{border:1px solid #666;border-radius:6px;padding:11px 16px;color:#fff;font-weight:700}
.social-links a:hover,.social-links a:focus,.footer-social a:hover,.footer-social a:focus{color:var(--gold);border-color:var(--gold)}
.footer-social a{color:#ddd;text-decoration:underline;text-underline-offset:3px}