/* ============================================================
   SARTO — Old Money aesthetic
   Palette: navy #16233F / cream #F5F1E8 / gold #B8965A / ink #2A2A28
   Type: Playfair Display (display), Cormorant Garamond (body)
   ============================================================ */

:root{
  --navy: #182031;
  --navy-deep: #0D1626;
  --cream: #F5F1E8;
  --cream-soft: #ECE4D3;
  --gold: #B8965A;
  --ink: #24241F;
  --line: rgba(22,35,63,0.15);
  --serif-display: 'Playfair Display', Georgia, serif;
  --serif-body: 'Cormorant Garamond', Georgia, serif;
  --script: 'Cormorant Garamond', serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:19px;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

h1,h2,h3{
  font-family:var(--serif-display);
  font-weight:600;
  color:var(--navy);
  margin:0 0 .4em 0;
  letter-spacing:.02em;
}

.eyebrow{
  font-family:var(--serif-body);
  font-style:italic;
  color:var(--gold);
  letter-spacing:.08em;
  font-size:1.05rem;
  margin-bottom:.3em;
  display:block;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Header ---------- */
.site-header{
  background:var(--navy);
  color:var(--cream);
  border-bottom:2px solid var(--gold);
}
.site-header .header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:22px;
  padding-bottom:16px;
  gap:14px;
}
.brand-row{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.crest-link{
  position:absolute;
  left:0;
}
.crest-link img{
  width:46px;height:46px;object-fit:cover;border-radius:50%;
  border:1px solid var(--gold);
}
.brand-name{
  font-family:var(--serif-display);
  font-size:1.9rem;
  letter-spacing:.18em;
  color:var(--cream);
}
.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  font-size:1.02rem;
  letter-spacing:.03em;
  border-top:1px solid rgba(184,150,90,.3);
  padding-top:14px;
  width:100%;
}
.nav-links a{
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:border-color .2s;
}
.nav-links a:hover{border-color:var(--gold);}
.cart-link{
  position:relative;
  color:var(--cream);
}
.cart-badge{
  background:var(--gold);
  color:var(--navy-deep);
  font-size:.72rem;
  font-family:var(--serif-body);
  font-weight:700;
  border-radius:50%;
  width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:-10px;right:-14px;
}

/* ---------- Hero ---------- */
.hero{
  background:var(--navy);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:50px;
  align-items:center;
  padding-top:70px;
  padding-bottom:70px;
}
.hero-title{
  font-size:3.1rem;
  color:var(--cream);
  line-height:1.08;
}
.hero-tagline{
  font-family:var(--script);
  font-style:italic;
  font-size:1.7rem;
  color:var(--gold);
  margin:.2em 0 .8em 0;
}
.hero-copy{
  font-size:1.15rem;
  color:#D9D3C3;
  max-width:46ch;
  margin-bottom:2em;
}
.hero-img{
  
  padding:10px;
  
}
.hero-img img{width:100%;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--serif-body);
  font-size:1.05rem;
  letter-spacing:.06em;
  padding:13px 34px;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.btn:hover{background:var(--gold);color:var(--navy-deep);}
.btn-solid{
  background:var(--gold);
  color:var(--navy-deep);
  border-color:var(--gold);
}
.btn-solid:hover{background:transparent;color:var(--gold);}
.btn-navy{
  border-color:var(--navy);
  color:var(--navy);
}
.btn-navy:hover{background:var(--navy);color:var(--cream);}

/* ---------- Divider with crest ---------- */
.divider{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 auto 50px auto;
  max-width:340px;
}
.divider::before,.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.divider img{width:30px;height:30px;opacity:.85;}

/* ---------- Sections ---------- */
section{padding:70px 0;}
.section-title{
  text-align:center;
  margin-bottom:8px;
}
.section-sub{
  text-align:center;
  color:#6b6a5f;
  max-width:60ch;
  margin:0 auto 40px auto;
  font-size:1.1rem;
}

/* ---------- Catalog grid ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:38px;
}
.product-card{
  background:#fff;
  border:1px solid var(--line);
  transition:box-shadow .25s, transform .25s;
}
.product-card:hover{
  box-shadow:0 14px 30px rgba(22,35,63,.12);
  transform:translateY(-3px);
}
.product-card img{aspect-ratio:1/1;object-fit:contain;object-position:center;width:100%;background:#182031;padding:18px;}
.product-card-body{padding:22px;text-align:center;}
.product-card-body h3{font-size:1.4rem;margin-bottom:.2em;}
.product-price{
  color:var(--gold);
  font-size:1.2rem;
  font-style:italic;
  margin-bottom:1em;
}

/* ---------- Product detail ---------- */
.product-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:flex-start;
}
.product-detail img{border:1px solid var(--line);background:#182031;padding:24px;}
.product-info .price{
  font-family:var(--serif-display);
  font-size:1.8rem;
  color:var(--navy);
  margin:.3em 0 1em 0;
}
.size-options{
  display:flex;
  gap:10px;
  margin:18px 0 28px 0;
  flex-wrap:wrap;
}
.size-options label{
  border:1px solid var(--navy);
  padding:9px 18px;
  cursor:pointer;
  font-size:1.05rem;
  transition:background .2s,color .2s;
}
.size-options input{display:none;}
.size-options input:checked + span{background:var(--navy);color:var(--cream);}
.size-options label span{display:block;padding:0;margin:-9px -18px;padding:9px 18px;}

/* ---------- Cart / Checkout ---------- */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:34px;}
.cart-table th{
  text-align:left;
  font-family:var(--serif-display);
  font-weight:600;
  color:var(--navy);
  border-bottom:2px solid var(--navy);
  padding:10px 8px;
  font-size:1rem;
}
.cart-table td{
  padding:16px 8px;
  border-bottom:1px solid var(--line);
  font-size:1.1rem;
}
.cart-total{
  text-align:right;
  font-family:var(--serif-display);
  font-size:1.5rem;
  color:var(--navy);
  margin-bottom:30px;
}
.remove-link{color:#a33;font-size:.95rem;}

.form-paper{
  background:#fff;
  border:1px solid var(--line);
  padding:44px;
  max-width:640px;
  margin:0 auto;
}
.form-row{margin-bottom:22px;}
.form-row label{
  display:block;
  font-family:var(--serif-display);
  font-size:1rem;
  color:var(--navy);
  margin-bottom:6px;
}
.form-row input,.form-row textarea{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  background:var(--cream-soft);
  font-family:var(--serif-body);
  font-size:1.05rem;
  color:var(--ink);
}
.form-row input:focus,.form-row textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
}
.errorlist{color:#a33;font-size:.9rem;list-style:none;padding:0;margin:4px 0 0 0;}

/* ---------- Contacts ---------- */
.contacts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}
.contact-item{margin-bottom:22px;}
.contact-item .label{
  font-family:var(--serif-display);
  color:var(--navy);
  font-size:1rem;
  display:block;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-deep);
  color:#B8B4A4;
  padding:44px 0;
  margin-top:60px;
  text-align:center;
}
.site-footer .tagline{
  font-family:var(--script);
  font-style:italic;
  color:var(--gold);
  font-size:1.3rem;
  margin-bottom:.5em;
}
.site-footer small{opacity:.7;}

/* ---------- Messages ---------- */
.messages{list-style:none;padding:0;margin:0;}
.messages li{
  padding:14px 24px;
  font-size:1.05rem;
  text-align:center;
}
.messages .success{background:#DDEAD8;color:#2E5A28;}
.messages .error{background:#F3D7D4;color:#7A2320;}
.messages .info,.messages .warning{background:#F1E7C9;color:#6B5417;}

/* ---------- Order success ---------- */
.success-box{
  max-width:600px;
  margin:0 auto;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  padding:60px 44px;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero .container{grid-template-columns:1fr;padding-top:44px;padding-bottom:44px;}
  .hero-title{font-size:2.2rem;}
  .product-detail{grid-template-columns:1fr;}
  .contacts-grid{grid-template-columns:1fr;}
  .nav-links{gap:16px;font-size:.92rem;flex-wrap:wrap;}
}

/* ---------- Focus visibility (a11y) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}