/* VESTRA — Everyday pieces, elevated. Demo build by Cox Technologies. */

:root{
  --ink:#0A0A0A;
  --bg:#FFFFFF;
  --tang:#FF5C39;
  --paper:#F4F3EF;
  --mute:#5C5C5A;
  --hair:1px solid var(--ink);
  --pad:clamp(1rem,4vw,2.5rem);
  --font:"Archivo",system-ui,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font:400 1rem/1.6 var(--font);
  color:var(--ink);
  background:var(--bg);
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:1px}
.on-dark :focus-visible,.site-footer :focus-visible,.toast :focus-visible{outline-color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3,.disp{
  font-family:var(--font);
  font-weight:800;
  font-stretch:125%;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:1.04;
  text-wrap:balance;
}

.mono{filter:grayscale(1) contrast(1.06)}

/* ---------- Promo bar (home only) ---------- */
.promo{background:var(--ink);color:#fff;overflow:hidden;border-bottom:var(--hair)}
.promo-track{
  display:flex;width:max-content;white-space:nowrap;
  animation:marquee 26s linear infinite;
}
.promo:hover .promo-track,
.promo:focus-within .promo-track{animation-play-state:paused}
.promo-track span{
  display:inline-block;padding:.55rem 0;
  font:500 .7rem/1 var(--font);
  text-transform:uppercase;letter-spacing:.22em;
}
.promo-track span::after{content:"\2022";color:var(--tang);padding:0 1.6rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  border-bottom:var(--hair);
  display:flex;align-items:center;gap:1rem;
  padding:.6rem var(--pad);
}
.brand{
  font-family:var(--font);font-weight:800;font-stretch:125%;font-size:1.45rem;
  letter-spacing:.08em;text-decoration:none;line-height:1;
  margin-right:auto;
}
.brand:hover{color:var(--tang)}
.site-nav{display:none}
body.nav-open .site-nav{
  display:flex;flex-direction:column;
  position:absolute;top:100%;left:0;right:0;
  background:var(--bg);border-bottom:var(--hair);
}
.site-nav a{
  text-decoration:none;
  font:500 .78rem/1 var(--font);
  text-transform:uppercase;letter-spacing:.2em;
  padding:1rem var(--pad);
  border-top:1px solid rgba(10,10,10,.15);
}
.site-nav a:hover{background:var(--tang);color:var(--ink)}
.site-nav a[aria-current="page"]{background:var(--ink);color:#fff}
.nav-toggle{
  border:var(--hair);background:none;cursor:pointer;
  font:500 .72rem/1 var(--font);text-transform:uppercase;letter-spacing:.18em;
  padding:.6rem .8rem;min-height:44px;
}
.nav-toggle:hover{background:var(--ink);color:#fff}
.bag-btn{
  border:var(--hair);background:var(--ink);color:#fff;cursor:pointer;
  font:500 .72rem/1 var(--font);text-transform:uppercase;letter-spacing:.18em;
  padding:.6rem .8rem;min-height:44px;
  display:inline-flex;gap:.45rem;align-items:center;
}
.bag-btn:hover{background:var(--tang);color:var(--ink);border-color:var(--ink)}
.bag-btn .bag-count{
  background:var(--tang);color:var(--ink);font-weight:700;
  min-width:1.25rem;text-align:center;padding:.15rem .25rem;border-radius:999px;
}
.bag-btn:hover .bag-count{background:var(--ink);color:#fff}

@media (min-width:1000px){
  .nav-toggle{display:none}
  .site-nav{display:flex;gap:0}
  .site-nav a{border-top:0;padding:.85rem 1.1rem}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font:500 .8rem/1 var(--font);
  text-transform:uppercase;letter-spacing:.2em;
  padding:1rem 1.9rem;min-height:44px;
  background:var(--ink);color:#fff;text-decoration:none;
  border:var(--hair);cursor:pointer;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--tang);border-color:var(--ink);color:var(--ink)}
.btn-ghost{background:none;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Hero ---------- */
.hero{border-bottom:var(--hair)}
.hero-grid{display:grid}
.hero-copy{padding:calc(var(--pad)*1.4) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:1.6rem}
.hero h1{font-size:clamp(2.6rem,9vw,6rem)}
.hero h1 .accent-dot{color:var(--tang)}
.hero-sub{max-width:34ch;color:var(--mute);font-size:1.02rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-photo{border-top:var(--hair);background:var(--paper);overflow:hidden}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:1.15fr 1fr;min-height:72vh}
  .hero-photo{border-top:0;border-left:var(--hair)}
  .hero-photo img{height:100%;aspect-ratio:auto}
}

/* ---------- Sections ---------- */
.section{padding:calc(var(--pad)*1.5) var(--pad);border-bottom:var(--hair)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.section-head h1,.section-head h2{font-size:clamp(1.5rem,4vw,2.4rem)}
.section-head p{color:var(--mute)}
.section-link{font:500 .74rem/1 var(--font);text-transform:uppercase;letter-spacing:.2em;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:.3rem}
.section-link:hover{background:var(--tang);border-color:var(--ink)}

/* ---------- Product grid ---------- */
.product-grid{display:grid;grid-template-columns:1fr;border-top:var(--hair);border-left:var(--hair)}
.product-card{
  border-right:var(--hair);border-bottom:var(--hair);
  display:flex;flex-direction:column;
  position:relative;background:var(--bg);
}
.product-card[hidden]{display:none}
.p-art-wrap{background:var(--paper);border-bottom:1px solid rgba(10,10,10,.25);position:relative;overflow:hidden}
.p-art-wrap svg{width:100%;transition:transform .35s ease}
.product-card:hover .p-art-wrap svg{transform:scale(1.04)}
.p-tag{
  position:absolute;top:.8rem;left:.8rem;
  background:var(--tang);color:var(--ink);
  font:700 .62rem/1 var(--font);text-transform:uppercase;letter-spacing:.18em;
  padding:.4rem .55rem;
}
.p-meta{padding:1rem 1.1rem .4rem;display:flex;justify-content:space-between;gap:.75rem;align-items:baseline}
.p-name{font:500 .92rem/1.3 var(--font);text-transform:uppercase;letter-spacing:.06em}
.p-price{font:500 .92rem/1.3 var(--font);white-space:nowrap}
.p-price s{color:var(--mute);margin-right:.4rem;font-weight:400}
.p-fabric{padding:0 1.1rem;font-size:.8rem;color:var(--mute)}
.p-sizes{display:flex;gap:.5rem;padding:.8rem 1.1rem 1rem;margin-top:auto;flex-wrap:wrap}
.size-btn{
  border:1px solid rgba(10,10,10,.45);background:none;cursor:pointer;
  font:500 .8rem/1 var(--font);letter-spacing:.05em;
  min-width:44px;min-height:44px;padding:0 .6rem;text-align:center;
  transition:background .15s,color .15s,border-color .15s;
}
.size-btn:hover{border-color:var(--ink)}
.size-btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.add-btn{
  border:0;border-top:var(--hair);
  background:var(--ink);color:#fff;cursor:pointer;
  font:500 .74rem/1 var(--font);text-transform:uppercase;letter-spacing:.22em;
  padding:1rem;width:100%;min-height:44px;
  transition:background .15s,color .15s;
}
.add-btn:hover{background:var(--tang);color:var(--ink)}
@media (min-width:640px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.product-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- Shop filters ---------- */
.filter-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.filter-btn{
  border:var(--hair);background:none;cursor:pointer;
  font:500 .72rem/1 var(--font);text-transform:uppercase;letter-spacing:.18em;
  padding:.65rem .95rem;min-height:44px;color:var(--ink);
  transition:background .15s,color .15s;
}
.filter-btn:hover{background:var(--tang);color:var(--ink)}
.filter-btn[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--ink);color:#fff}
.manifesto p{
  font-family:var(--font);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(1.5rem,5vw,3.2rem);line-height:1.1;max-width:22ch;text-wrap:balance;
}
.manifesto p .accent{color:var(--tang)}
.manifesto small{display:block;margin-top:1.6rem;font:500 .85rem/1.5 var(--font);letter-spacing:.08em;color:#B9B9B7}

/* ---------- Lookbook teaser & editorial ---------- */
.tease-grid{display:grid;gap:var(--pad)}
.tease-tile{display:block;text-decoration:none;border:var(--hair)}
.tease-tile img{width:100%;aspect-ratio:3/2;object-fit:cover}
.tease-tile figcaption{
  padding:.9rem 1.1rem;border-top:var(--hair);
  display:flex;justify-content:space-between;gap:1rem;
  font:500 .74rem/1.4 var(--font);text-transform:uppercase;letter-spacing:.14em;
}
.tease-tile:hover figcaption{background:var(--tang)}
@media (min-width:640px){.tease-grid{grid-template-columns:1fr 1fr}}

.lb-statement{
  font-family:var(--font);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(1.4rem,4.5vw,2.6rem);line-height:1.1;max-width:26ch;
  margin-bottom:1rem;text-wrap:balance;
}
.lb-statement .accent-dot{color:var(--tang)}
.lb-intro{max-width:62ch;color:var(--mute);margin-bottom:2.5rem;font-size:1.02rem}
.lb-grid{columns:1;column-gap:var(--pad)}
.lb-item{break-inside:avoid;margin:0 0 var(--pad);border:var(--hair)}
.lb-item img{width:100%;object-fit:cover}
.r45{aspect-ratio:4/5}
.r43{aspect-ratio:4/3}
.r34{aspect-ratio:3/4}
.r11{aspect-ratio:1/1}
.lb-item figcaption{padding:.9rem 1.1rem;border-top:var(--hair);font-size:.82rem;color:var(--mute)}
.lb-item figcaption b{
  display:flex;align-items:center;gap:.6rem;
  font:800 .8rem/1 var(--font);font-stretch:125%;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink);margin-bottom:.45rem;
}
.lb-tag{
  background:var(--tang);color:var(--ink);
  font:700 .62rem/1 var(--font);text-transform:uppercase;letter-spacing:.14em;
  padding:.3rem .45rem;
}
@media (min-width:640px){.lb-grid{columns:2}}

/* ---------- Newsletter / forms ---------- */
.newsletter{background:var(--paper)}
.newsletter h2{font-size:clamp(1.4rem,3.6vw,2.1rem);margin-bottom:.6rem}
.newsletter p{color:var(--mute);max-width:48ch;margin-bottom:1.4rem}
.nl-form{display:flex;flex-wrap:wrap;gap:.7rem;max-width:34rem;align-items:flex-start}
.nl-field{flex:1 1 14rem}

input,select,textarea{
  font:400 .95rem/1.4 var(--font);color:var(--ink);
  background:var(--bg);border:var(--hair);border-radius:0;
  padding:.85rem 1rem;width:100%;
}
textarea{min-height:9rem;resize:vertical}
label{display:block;font:500 .72rem/1 var(--font);text-transform:uppercase;letter-spacing:.2em;margin-bottom:.5rem}
.field{margin-bottom:1.3rem}
.field-row{display:grid;gap:1.3rem}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}

input[aria-invalid="true"],textarea[aria-invalid="true"]{border:2px solid var(--tang)}
.field-error{margin-top:.5rem;font:500 .82rem/1.5 var(--font);color:var(--ink)}
.field-error::before{content:"";display:inline-block;width:.55em;height:.55em;background:var(--tang);margin-right:.5em}

.form-note{
  margin-top:1.4rem;border:2px solid var(--ink);
  background:var(--paper);padding:1.15rem 1.3rem;font-size:.92rem;line-height:1.6;
  flex-basis:100%;
}
.form-note::before{content:"";display:block;width:2.25rem;height:.5rem;background:var(--tang);margin-bottom:.7rem}
.form-note a{font-weight:700}

/* ---------- Contact / care ---------- */
.care-layout{display:grid;gap:calc(var(--pad)*1.5)}
@media (min-width:1000px){.care-layout{grid-template-columns:1.1fr .9fr}}
.anchor-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.2rem}
.anchor-row a{
  text-decoration:none;border:var(--hair);
  font:500 .72rem/1 var(--font);text-transform:uppercase;letter-spacing:.18em;
  padding:.65rem .95rem;min-height:44px;display:inline-flex;align-items:center;
}
.anchor-row a:hover{background:var(--ink);color:#fff}
.care-block{border-top:var(--hair);padding-top:1.6rem;margin-bottom:2.4rem;scroll-margin-top:6rem}
.care-block h2{font-size:1.3rem;margin-bottom:.8rem}
.care-block p,.care-block li{color:var(--mute);font-size:.95rem;max-width:60ch}
.care-block ul{padding-left:1.2rem;margin-top:.6rem}
.size-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.85rem}
.size-table th,.size-table td{border:1px solid rgba(10,10,10,.35);padding:.55rem .7rem;text-align:left}
.size-table th{font:500 .7rem/1 var(--font);text-transform:uppercase;letter-spacing:.15em;background:var(--paper)}
.studio-card{border:var(--hair);padding:1.6rem;background:var(--paper);margin-top:2rem}
.studio-card h3{font-size:1rem;margin-bottom:.7rem}
.studio-card p{font-size:.92rem;color:var(--mute)}
.social-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.social-row span{
  border:1px solid rgba(10,10,10,.45);
  font:500 .7rem/1 var(--font);text-transform:uppercase;letter-spacing:.18em;
  padding:.55rem .85rem;color:var(--mute);
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:calc(var(--pad)*1.5) var(--pad) 5.5rem}
.footer-mark{
  font-family:var(--font);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(3rem,13vw,8.5rem);line-height:.95;letter-spacing:0;
  color:#fff;margin-bottom:2.5rem;
}
.footer-mark span{color:var(--tang)}
.footer-cols{display:grid;gap:2rem;border-top:1px solid rgba(255,255,255,.25);padding-top:2rem}
.footer-cols h3{font-size:.78rem;letter-spacing:.15em;margin-bottom:1rem;color:#B9B9B7}
.footer-cols a{color:#fff;text-decoration:none;display:block;padding:.3rem 0;font-size:.9rem}
.footer-cols a:hover{color:var(--tang)}
.footer-cols p{color:#B9B9B7;font-size:.9rem}
.footer-legal{margin-top:2.5rem;font-size:.75rem;color:#8A8A88;letter-spacing:.05em}
@media (min-width:640px){.footer-cols{grid-template-columns:repeat(3,1fr)}}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:16px;bottom:16px;z-index:9998;
  background:var(--ink);color:#fff;border:1px solid var(--tang);
  font:500 .8rem/1.5 var(--font);letter-spacing:.02em;
  padding:.9rem 1.2rem;max-width:22rem;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.toast.on{opacity:1;transform:none;pointer-events:auto}
.toast a{
  color:#fff;font-weight:700;text-decoration:underline;
  text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:3px;
}
.toast a:hover{color:var(--tang)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .promo-track{animation:none;width:auto;white-space:normal}
  .promo-track span:not(:first-child){display:none}
  .promo-track span::after{content:none}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

.skip-link{position:absolute;left:-999px;top:.75rem;z-index:10000;background:#111;color:#fff;padding:.6rem 1.1rem;border-radius:4px;text-decoration:none;font-weight:600}
.skip-link:focus{left:.75rem}