/* =========================================================
   laaaik it. — shared design system
   Used by index.html and every policy/info page.
   ========================================================= */

:root{
  --black:#0a0a0b;
  --panel:#131315;
  --panel-line:#232327;
  --cobalt:#1A56DB;
  --cobalt-soft:rgba(26,86,219,0.14);
  --bone:#F3F1EA;
  --bone-dim:#A9A8A3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--bone);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{display:block; max-width:100%;}
button{font-family:inherit;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---- Brand mark ---- */
.brand{
  font-family:'Playfair Display', serif;
  font-weight:700;
  letter-spacing:-0.01em;
  text-decoration:none;
}
.dot{color:var(--cobalt);}

/* ---- Header ---- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--panel-line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.nav-logo{font-size:22px;}
.nav-links{display:flex; gap:28px; align-items:center; font-size:14px;}
.nav-links a{
  text-decoration:none; color:var(--bone-dim);
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--bone);}
.nav-cta{
  background:var(--cobalt); color:#fff !important;
  padding:9px 18px; border-radius:2px; font-weight:600; font-size:13px;
  text-decoration:none; letter-spacing:.02em;
}

/* ---- WhatsApp store banner ---- */
.wa-banner{
  background:var(--cobalt-soft); border-bottom:1px solid var(--panel-line);
  padding:11px 0;
}
.wa-banner .wrap{
  display:flex; align-items:center; justify-content:center; gap:10px;
  text-align:center; flex-wrap:wrap;
}
.wa-banner-tag{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cobalt); background:var(--black); padding:4px 9px; border-radius:2px;
  border:1px solid var(--cobalt);
}
.wa-banner p{font-size:13.5px; color:var(--bone); margin:0;}
.wa-banner p a{color:var(--cobalt); text-decoration:underline; font-weight:600;}

/* ---- Flow strip (Browse -> WhatsApp -> Yoco -> Pudo) ---- */
.flow-strip{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:14px 0; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim);
}
.flow-strip span.step{color:var(--bone); font-weight:600;}
.flow-strip span.arrow{color:var(--cobalt);}

/* ---- Hero ---- */
.hero{
  padding:64px 0 64px;
  border-bottom:1px solid var(--panel-line);
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  margin-bottom:22px;
}
.eyebrow .rack-dots{display:flex; gap:5px;}
.eyebrow .rack-dots span{width:4px; height:4px; border-radius:50%; background:var(--cobalt); display:block;}
.hero h1{
  font-family:'Playfair Display', serif;
  font-size:clamp(38px, 5.2vw, 62px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.015em;
}
.hero h1 em{font-style:italic; color:var(--cobalt);}
.hero .lede{
  margin-top:18px; font-family:'Playfair Display', serif; font-style:italic; font-size:19px; color:var(--bone);
}
.hero p{
  margin-top:14px; font-size:16px; line-height:1.6; color:var(--bone-dim); max-width:46ch;
}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn-primary{
  background:var(--cobalt); color:#fff;
  padding:14px 26px; border-radius:2px; text-decoration:none;
  font-weight:600; font-size:14px; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--cobalt);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary:hover{background:#1747b8; transform:translateY(-1px);}
.btn-ghost{
  border:1px solid var(--panel-line); color:var(--bone); background:transparent;
  padding:14px 26px; border-radius:2px; text-decoration:none;
  font-weight:600; font-size:14px; cursor:pointer;
  transition:border-color .15s ease;
}
.btn-ghost:hover{border-color:var(--cobalt);}

.hero-visual{
  position:relative; aspect-ratio:4/5; background:var(--panel);
  border:1px solid var(--panel-line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-visual img{width:100%; height:100%; object-fit:cover;}
.hero-visual::before{
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(26,86,219,0.07) 38px 39px);
  pointer-events:none;
}
.hero-visual-label{
  font-family:'Playfair Display', serif; font-style:italic; font-size:15px; color:var(--bone-dim);
  position:relative; text-align:center; padding:0 30px;
}
.hero-visual-label .dot{font-style:normal;}

.hero-strip{
  margin-top:48px; display:flex; gap:0; border-top:1px solid var(--panel-line);
}
.hero-strip div{
  flex:1; padding:18px 0 0; font-size:13px; color:var(--bone-dim);
  border-right:1px solid var(--panel-line);
}
.hero-strip div:last-child{border-right:none;}
.hero-strip strong{display:block; color:var(--bone); font-family:'Playfair Display',serif; font-size:20px; font-weight:600; margin-bottom:4px;}

/* ---- WhatsApp Channel banner ---- */
.channel-band{
  border-bottom:1px solid var(--panel-line);
  background:var(--panel);
  padding:32px 0;
}
.channel-band .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.channel-copy .section-eyebrow{margin-bottom:8px;}
.channel-copy h3{font-family:'Playfair Display', serif; font-size:21px; font-weight:600; margin-bottom:4px;}
.channel-copy p{font-size:13.5px; color:var(--bone-dim);}

/* ---- Section heads ---- */
.section-head{margin-bottom:40px;}
.section-eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt); margin-bottom:10px; font-weight:600;}
.section-head h2{font-family:'Playfair Display', serif; font-size:clamp(26px,3vw,36px); font-weight:600;}

/* ---- How it works ---- */
.how{padding:64px 0; border-bottom:1px solid var(--panel-line);}
.how-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--panel-line); border:1px solid var(--panel-line);}
.how-step{background:var(--black); padding:26px 20px;}
.how-step .num{font-family:'Playfair Display', serif; color:var(--cobalt); font-style:italic; font-size:22px; margin-bottom:14px;}
.how-step h3{font-size:14.5px; font-weight:600; margin-bottom:8px; letter-spacing:.01em;}
.how-step p{font-size:13px; color:var(--bone-dim); line-height:1.55;}

/* ---- Delivery info band ---- */
.delivery-band{padding:56px 0; border-bottom:1px solid var(--panel-line);}
.delivery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--panel-line); border:1px solid var(--panel-line); margin-bottom:20px;}
.delivery-card{background:var(--black); padding:26px 22px;}
.delivery-card .amount{font-family:'Playfair Display', serif; font-size:26px; font-weight:600; color:var(--cobalt); margin-bottom:8px;}
.delivery-card p{font-size:13.5px; color:var(--bone-dim); line-height:1.55;}
.delivery-band .fineprint{font-size:13px; color:var(--bone-dim);}
.delivery-band .fineprint a{color:var(--cobalt); text-decoration:underline;}

/* ---- Shop ---- */
.shop{padding:64px 0 40px;}
.shop-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;
  margin-bottom:32px;
}
.filters{display:flex; gap:8px; flex-wrap:wrap;}
.filter-btn{
  background:transparent; border:1px solid var(--panel-line); color:var(--bone-dim);
  padding:8px 16px; border-radius:2px; font-size:13px; cursor:pointer;
  transition:all .15s ease;
}
.filter-btn:hover{border-color:var(--cobalt); color:var(--bone);}
.filter-btn.active{background:var(--cobalt); border-color:var(--cobalt); color:#fff;}

.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--panel-line); border:1px solid var(--panel-line);
}
.card{background:var(--black); display:flex; flex-direction:column; cursor:pointer;}
.card-media{
  aspect-ratio:3/4; background:var(--panel); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.card-media::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,0.025) 34px 35px);
  pointer-events:none;
}
.card-media span.ph{
  font-family:'Playfair Display', serif; font-style:italic; color:var(--bone-dim); font-size:13px; position:relative;
}
.card-media img{
  position:relative; width:100%; height:100%; object-fit:cover; z-index:1;
}
.card-media .img-count{
  position:absolute; bottom:10px; right:10px; z-index:2;
  background:rgba(10,10,11,0.75); color:var(--bone); font-size:11px; font-weight:600;
  padding:4px 8px; border-radius:2px; letter-spacing:.02em;
}
.tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--cobalt); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:2px;
}
.tag.sold{background:var(--panel-line); color:var(--bone-dim);}
.tag.condition{
  position:absolute; top:12px; right:12px; left:auto; z-index:2;
  background:var(--black); color:var(--bone); border:1px solid var(--panel-line);
}
.card-body{padding:18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-cat{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--bone-dim);}
.card-name{font-family:'Playfair Display', serif; font-size:17px; font-weight:600; line-height:1.3;}
.card-meta{font-size:12.5px; color:var(--bone-dim); margin-bottom:4px;}
.card-price{font-size:16px; font-weight:600; color:var(--bone); margin-top:auto; padding-top:10px;}
.card-price .was{text-decoration:line-through; color:var(--bone-dim); font-weight:400; font-size:13px; margin-right:6px;}
.card-order{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:1px solid var(--panel-line); color:var(--bone);
  padding:11px; margin-top:12px; border-radius:2px; text-decoration:none;
  font-size:13px; font-weight:600; transition:all .15s ease;
}
.card-order:hover{background:var(--cobalt); border-color:var(--cobalt); color:#fff;}
.card-order.disabled{opacity:.4; pointer-events:none;}

.wa-icon{width:15px; height:15px; flex-shrink:0;}

/* ---- Product detail modal ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(10,10,11,0.88);
  backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--black); border:1px solid var(--panel-line); max-width:920px; width:100%;
  display:grid; grid-template-columns:1.1fr 1fr; position:relative;
}
.modal-close{
  position:absolute; top:14px; right:14px; z-index:5;
  background:var(--black); border:1px solid var(--panel-line); color:var(--bone);
  width:34px; height:34px; border-radius:2px; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{border-color:var(--cobalt);}
.modal-gallery{background:var(--panel); display:flex; flex-direction:column;}
.modal-main-img{aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--panel);}
.modal-main-img img{width:100%; height:100%; object-fit:cover;}
.modal-main-img .ph{
  height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif; font-style:italic; color:var(--bone-dim); font-size:14px; text-align:center; padding:0 30px;
}
.modal-thumbs{display:flex; gap:8px; padding:12px; flex-wrap:wrap;}
.modal-thumb{
  width:56px; height:70px; border:1px solid var(--panel-line); cursor:pointer; overflow:hidden; background:var(--black);
  opacity:.6; transition:opacity .15s ease, border-color .15s ease;
}
.modal-thumb img{width:100%; height:100%; object-fit:cover;}
.modal-thumb.active{opacity:1; border-color:var(--cobalt);}
.modal-info{padding:32px 30px; display:flex; flex-direction:column;}
.modal-cat{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--bone-dim); margin-bottom:10px;}
.modal-name{font-family:'Playfair Display', serif; font-size:26px; font-weight:600; line-height:1.15; margin-bottom:14px;}
.modal-badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.badge{
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px; border:1px solid var(--panel-line); color:var(--bone-dim);
}
.badge.condition-new{color:var(--cobalt); border-color:var(--cobalt);}
.modal-facts{border-top:1px solid var(--panel-line); border-bottom:1px solid var(--panel-line); padding:16px 0; margin-bottom:18px; display:flex; flex-direction:column; gap:9px;}
.modal-fact{display:flex; justify-content:space-between; font-size:13.5px;}
.modal-fact span:first-child{color:var(--bone-dim);}
.modal-price{font-family:'Playfair Display', serif; font-size:28px; font-weight:600; margin-bottom:20px;}
.modal-price .was{text-decoration:line-through; color:var(--bone-dim); font-weight:400; font-size:18px; margin-right:8px;}
.modal-order{margin-top:auto;}

body.modal-lock{overflow:hidden;}

/* ---- CTA band ---- */
.cta-band{
  border-top:1px solid var(--panel-line); border-bottom:1px solid var(--panel-line);
  padding:64px 0; text-align:center; margin-top:24px;
}
.cta-band h2{
  font-family:'Playfair Display', serif; font-size:clamp(26px,3.4vw,40px); font-weight:600;
  max-width:20ch; margin:0 auto 18px;
}
.cta-band p{color:var(--bone-dim); font-size:15px; margin-bottom:28px;}

/* ---- Footer ---- */
footer{padding:48px 0 32px;}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.foot-brand p{color:var(--bone-dim); font-size:13.5px; line-height:1.6; margin-top:14px; max-width:32ch;}
.foot-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--bone-dim); margin-bottom:14px;}
.foot-col a{display:block; font-size:14px; color:var(--bone); text-decoration:none; margin-bottom:10px; opacity:.85;}
.foot-col a:hover{opacity:1; color:var(--cobalt);}
.foot-bottom{
  border-top:1px solid var(--panel-line); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:var(--bone-dim);
}

/* ---- Policy / simple content pages ---- */
.policy-hero{padding:56px 0 32px; border-bottom:1px solid var(--panel-line);}
.policy-hero .section-eyebrow{margin-bottom:12px;}
.policy-hero h1{font-family:'Playfair Display', serif; font-size:clamp(30px,4vw,44px); font-weight:700; margin-bottom:10px;}
.policy-meta{font-size:12.5px; color:var(--bone-dim);}
.policy-body{padding:48px 0 72px; max-width:760px;}
.policy-body h2{font-family:'Playfair Display', serif; font-size:20px; font-weight:600; margin:36px 0 12px;}
.policy-body h2:first-child{margin-top:0;}
.policy-body p{font-size:14.5px; line-height:1.75; color:var(--bone-dim); margin-bottom:12px;}
.policy-body ul, .policy-body ol{margin:0 0 12px 20px; color:var(--bone-dim); font-size:14.5px; line-height:1.75;}
.policy-body li{margin-bottom:4px;}
.policy-body strong{color:var(--bone); font-weight:600;}
.policy-body a{color:var(--cobalt); text-decoration:underline;}
.placeholder-fill{background:var(--cobalt-soft); color:var(--bone); padding:1px 6px; border-radius:2px; font-weight:600;}
.policy-links{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px;}
.policy-links a{
  font-size:13px; border:1px solid var(--panel-line); padding:8px 14px; border-radius:2px; text-decoration:none;
}
.policy-links a:hover{border-color:var(--cobalt); color:var(--cobalt);}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{aspect-ratio:16/9;}
  .hero-strip{flex-wrap:wrap;}
  .hero-strip div{flex:1 1 50%; border-right:none; border-bottom:1px solid var(--panel-line); padding-bottom:14px;}
  .how-steps{grid-template-columns:1fr 1fr;}
  .delivery-grid{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .modal{grid-template-columns:1fr;}
  .modal-main-img{aspect-ratio:4/3;}
  .channel-band .wrap{flex-direction:column; align-items:flex-start;}
}
@media (max-width: 540px){
  .nav-links{display:none;}
  .grid{grid-template-columns:1fr;}
  .how-steps{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .flow-strip{font-size:11px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px;}