/* =====================================================
   Saddle & Sage Leather Co. - organic minimalism
   ===================================================== */

:root{
  --bone: hsl(38 30% 95%);
  --bone-deep: hsl(38 28% 91%);
  --espresso: hsl(24 20% 15%);
  --espresso-soft: hsl(24 16% 26%);
  --tan: hsl(28 45% 45%);
  --tan-deep: hsl(28 48% 38%);
  --tan-tint: hsl(28 45% 45% / .12);
  --sage: hsl(110 12% 45%);
  --sage-tint: hsl(110 14% 90%);
  --clay: hsl(14 42% 52%);
  --muted: hsl(26 12% 44%);
  --line: hsl(30 20% 84%);
  --card: hsl(38 40% 99%);
  --shadow: 0 2px 12px rgba(60,40,20,.08);
  --shadow-lift: 0 10px 28px rgba(60,40,20,.12);
  --radius: 12px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.33,.72,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--espresso);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }

.container{
  width:min(1160px, 100% - 3rem);
  margin-inline:auto;
}

/* ---------- type ---------- */
h1,h2,.guarantee-statement{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 5.2vw, 3.9rem); }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.5rem); }

.eyebrow{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-variant-caps:all-small-caps;
  color:var(--tan);
  margin-bottom:.9rem;
}

.section-head{ margin-bottom:2.4rem; }
.section-head .eyebrow{ margin-bottom:.55rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  line-height:1;
  padding:.72rem 1.25rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease),
             transform .3s var(--ease);
}
.btn:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
button:focus-visible{
  outline:2px solid var(--tan);
  outline-offset:2.5px;
  border-radius:6px;
}
.btn:focus-visible{ border-radius:var(--radius); }

.btn-lg{ padding:.95rem 1.7rem; font-size:1rem; }

.btn-primary{
  background:var(--tan);
  color:hsl(38 45% 97%);
  box-shadow:var(--shadow);
}
.btn-primary:hover{ background:var(--tan-deep); box-shadow:var(--shadow-lift); }

.btn-outline{
  background:transparent;
  color:var(--espresso);
  border-color:hsl(26 20% 62%);
}
.btn-outline:hover{ border-color:var(--espresso); background:hsl(38 30% 92%); }

.btn-quiet{
  width:100%;
  background:transparent;
  color:var(--espresso);
  border-color:var(--line);
}
.btn-quiet:hover{ border-color:var(--tan); color:var(--tan-deep); background:var(--tan-tint); }
.btn-quiet.added{ border-color:var(--sage); color:var(--sage); background:hsl(110 14% 45% / .1); }

.btn-bone{
  background:var(--bone);
  color:var(--espresso);
}
.btn-bone:hover{ background:hsl(38 32% 88%); }

.quiet-link{
  color:var(--tan-deep);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border-bottom:1px solid hsl(28 45% 45% / .35);
  padding-bottom:1px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.quiet-link:hover{ color:var(--tan); border-color:var(--tan); }

/* ---------- announcement ---------- */
.announce{
  background:var(--espresso);
  color:hsl(38 30% 90%);
  text-align:center;
  font-size:.8rem;
  letter-spacing:.04em;
  padding:.5rem 1rem;
}

/* ---------- navbar ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:hsl(38 30% 95% / .92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  box-shadow:var(--shadow);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.8rem 0;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  color:var(--espresso);
}
.monogram{ width:34px; height:34px; color:var(--tan); flex:none; }
.monogram-s{
  font-family:var(--serif);
  font-size:19px;
  fill:currentColor;
}
.wordmark{
  font-family:var(--serif);
  font-size:1.3rem;
  letter-spacing:.01em;
  white-space:nowrap;
}
.nav-links{ display:flex; gap:1.7rem; }
.nav-links a{
  color:var(--espresso-soft);
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  padding:.3rem 0;
  border-bottom:1.5px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.nav-links a:hover{ color:var(--espresso); border-bottom-color:var(--tan); }

.nav-actions{ display:flex; align-items:center; gap:.35rem; }
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--espresso-soft);
  cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.icon-btn:hover{ background:hsl(30 25% 88%); color:var(--espresso); }
.icon-btn svg{ width:20px; height:20px; }
.btn-cart{ margin-left:.4rem; white-space:nowrap; }
.btn-cart svg{ width:17px; height:17px; }
.btn-cart.bump{ animation:bump .4s var(--ease); }
@keyframes bump{ 40%{ transform:scale(1.08); } }

.nav-toggle{ display:none; }
.mobile-menu{
  display:none;
  flex-direction:column;
  border-top:1px solid var(--line);
  padding:.6rem 1.5rem 1rem;
}
.mobile-menu a{
  color:var(--espresso);
  text-decoration:none;
  font-weight:500;
  padding:.65rem 0;
  border-bottom:1px solid hsl(30 20% 88%);
}
.mobile-menu a:last-child{ border-bottom:none; }
.nav.menu-open .mobile-menu{ display:flex; }

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,10fr) minmax(0,9fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  padding-block:clamp(3.5rem, 7vw, 5.5rem);
}
.hero-copy .lede{
  margin-top:1.2rem;
  font-size:1.08rem;
  color:var(--muted);
  max-width:34rem;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.9rem;
}
.trust-row{
  margin-top:1.5rem;
  font-size:.88rem;
  color:var(--muted);
  font-weight:500;
}
.trust-row .star{ color:var(--tan); }
.trust-row .dot{ margin-inline:.45rem; color:hsl(26 15% 70%); }

.hero-photo{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  position:relative;
}
.hero-photo svg{ width:100%; height:auto; aspect-ratio:760/640; }
.photo-note{
  position:absolute;
  left:1rem; bottom:.85rem;
  font-size:.72rem;
  letter-spacing:.05em;
  color:hsl(38 35% 88% / .85);
}

/* ---------- category tiles ---------- */
.categories{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.1rem;
  padding-bottom:clamp(3rem, 6vw, 5rem);
}
.tile{
  position:relative;
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:box-shadow .4s var(--ease);
}
.tile:hover{ box-shadow:var(--shadow-lift); }
.tile-media{ display:block; }
.tile-media svg{
  width:100%; height:auto;
  aspect-ratio:400/460;
  transition:transform .4s var(--ease);
}
.tile:hover .tile-media svg{ transform:scale(1.03); }
.tile-label{
  position:absolute;
  left:1.15rem; bottom:1rem;
  font-family:var(--serif);
  font-size:1.3rem;
  color:hsl(38 40% 95%);
  letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(20,10,4,.4);
}

/* ---------- cards ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid hsl(30 22% 89%);
}

/* ---------- bestsellers ---------- */
.bestsellers{ padding-block:clamp(2.5rem, 5vw, 4rem); }
.product-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4rem;
}
.product{ overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .4s var(--ease), transform .4s var(--ease); }
.product:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.product-media svg{ width:100%; height:auto; aspect-ratio:420/320; }
.product-body{
  padding:1.15rem 1.25rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  flex:1;
}
.product-titleline{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.8rem;
}
.product-titleline h3{
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-.005em;
}
.price{ font-weight:600; font-size:1.02rem; color:var(--espresso); white-space:nowrap; }
.fitment{
  font-size:.85rem;
  color:var(--muted);
  letter-spacing:.01em;
}
.model-select{ display:block; margin-top:.35rem; }
.model-select span{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.3rem;
}
select{
  width:100%;
  appearance:none;
  font-family:var(--sans);
  font-size:.9rem;
  color:var(--espresso);
  background:var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%236b5a49' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8rem center/14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:.6rem 2.2rem .6rem .8rem;
  cursor:pointer;
  transition:border-color .3s var(--ease);
}
select:hover{ border-color:hsl(26 25% 68%); }
.product .btn-quiet{ margin-top:auto; }
.product-body:has(.model-select) .btn-quiet{ margin-top:.55rem; }

/* ---------- material story ---------- */
.material{
  background:var(--sage-tint);
  padding-block:clamp(3.5rem, 7vw, 5.5rem);
  margin-block:clamp(2rem, 4vw, 3rem);
}
.material-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.material-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.macro{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.macro svg{ width:100%; height:auto; aspect-ratio:360/300; }
.macro figcaption{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sage);
  background:var(--card);
  padding:.5rem .8rem;
  font-weight:600;
}
.macro-offset{ margin-top:2.2rem; }
.material-copy .eyebrow{ color:var(--sage); }
.material-copy h2{ margin-bottom:1.1rem; }
.material-copy p{ color:var(--espresso-soft); margin-bottom:.9rem; max-width:33rem; }
.material-copy .quiet-link{ display:inline-block; margin-top:.4rem; }

/* ---------- fit finder ---------- */
.fitfinder{ padding-block:clamp(2.5rem, 5vw, 4rem); }
.fitfinder .container{
  background:var(--card);
  border:1px solid hsl(30 22% 89%);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:clamp(1.8rem, 4vw, 3rem);
}
.fitfinder-head{ margin-bottom:1.6rem; }
.fitfinder-head .eyebrow{ margin-bottom:.5rem; }
.fitfinder-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:1rem;
  align-items:end;
}
.field span{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}
.fitfinder-form select{ padding-block:.85rem; }
.fit-note{
  margin-top:1.1rem;
  font-size:.88rem;
  color:var(--muted);
}
.fit-result{
  margin-top:1.4rem;
  padding:1.1rem 1.25rem;
  border-radius:var(--radius);
  background:var(--tan-tint);
  border:1px solid hsl(28 45% 45% / .3);
  font-size:.95rem;
}
.fit-result strong{ font-weight:600; }
.fit-result .fit-line{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:baseline; }
.fit-result .fitment{ margin-top:.15rem; }

/* ---------- reviews ---------- */
.reviews{ padding-block:clamp(2.5rem, 5vw, 4rem); }
.review-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4rem;
}
.review{ padding:1.5rem 1.5rem 1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.stars{
  color:var(--tan);
  letter-spacing:.22em;
  font-size:.95rem;
}
.review blockquote{
  font-size:.98rem;
  color:var(--espresso-soft);
  flex:1;
}
.review-meta{
  display:flex;
  gap:.8rem;
  align-items:center;
  border-top:1px solid hsl(30 20% 90%);
  padding-top:1rem;
}
.review-thumb{ width:46px; height:46px; flex:none; border-radius:10px; }
.review-name{ display:block; font-weight:600; font-size:.88rem; }
.verified{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  color:var(--sage);
  font-weight:500;
}
.verified svg{ width:14px; height:14px; flex:none; }

/* ---------- guarantee ---------- */
.guarantee{
  background:var(--espresso);
  color:hsl(38 32% 92%);
  text-align:center;
  padding-block:clamp(3.5rem, 7vw, 5.5rem);
  margin-block:clamp(2rem, 4vw, 3rem);
}
.guarantee-mark{
  width:52px; height:52px;
  margin:0 auto 1.4rem;
  color:hsl(28 45% 62%);
}
.guarantee-statement{
  font-size:clamp(1.7rem, 3.6vw, 2.6rem);
  max-width:24ch;
  margin-inline:auto;
}
.guarantee-sub{
  margin-top:1.1rem;
  font-size:.95rem;
  color:hsl(35 20% 72%);
}

/* ---------- journal ---------- */
.journal{ padding-block:clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 5.5rem); }
.journal-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4rem;
}
.journal-card{
  overflow:hidden;
  text-decoration:none;
  color:var(--espresso);
  display:flex;
  flex-direction:column;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.journal-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.journal-media{ display:block; overflow:hidden; }
.journal-media svg{
  width:100%; height:auto;
  aspect-ratio:400/240;
  transition:transform .4s var(--ease);
}
.journal-card:hover .journal-media svg{ transform:scale(1.03); }
.journal-body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:1.15rem 1.25rem 1.3rem;
  flex:1;
}
.journal-title{
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.3;
  flex:1;
}
.journal-read{
  font-size:.88rem;
  font-weight:600;
  color:var(--tan-deep);
  transition:color .3s var(--ease);
}
.journal-card:hover .journal-read{ color:var(--tan); }

/* ---------- footer ---------- */
.footer{
  background:var(--espresso);
  color:hsl(38 26% 86%);
  padding-block:clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  padding-bottom:2.6rem;
  border-bottom:1px solid hsl(24 16% 26%);
}
.footer-wordmark{
  font-family:var(--serif);
  font-size:1.5rem;
  color:hsl(38 32% 93%);
  margin-bottom:.7rem;
}
.footer-blurb{
  font-size:.92rem;
  color:hsl(35 18% 70%);
  max-width:30rem;
  margin-bottom:1.2rem;
}
.news-form{ display:flex; gap:.6rem; max-width:26rem; }
.news-form input{
  flex:1;
  min-width:0;
  font-family:var(--sans);
  font-size:.92rem;
  padding:.72rem .95rem;
  border-radius:var(--radius);
  border:1.5px solid hsl(24 14% 34%);
  background:hsl(24 18% 19%);
  color:hsl(38 30% 92%);
  transition:border-color .3s var(--ease);
}
.news-form input::placeholder{ color:hsl(30 12% 55%); }
.news-form input:focus{ border-color:var(--tan); outline:none; }
.news-confirm{
  margin-top:.7rem;
  font-size:.85rem;
  color:hsl(110 20% 66%);
  min-height:1.3em;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.5rem;
}
.footer-head{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:hsl(30 15% 58%);
  margin-bottom:.85rem;
}
.footer-cols a{
  display:block;
  color:hsl(38 24% 84%);
  text-decoration:none;
  font-size:.9rem;
  padding-block:.28rem;
  transition:color .3s var(--ease);
}
.footer-cols a:hover{ color:hsl(28 55% 70%); }

.footer-bottom{
  padding-top:1.8rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.pay-badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pay{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  padding:.3rem .6rem;
  border:1px solid hsl(24 14% 32%);
  border-radius:6px;
  color:hsl(35 16% 68%);
}
.footer-legal{
  font-size:.82rem;
  color:hsl(30 12% 58%);
  max-width:56rem;
}
.footer-copy{
  font-size:.78rem;
  color:hsl(30 10% 48%);
}

/* ---------- toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:1.6rem;
  transform:translate(-50%, 12px);
  background:var(--espresso);
  color:hsl(38 30% 92%);
  font-size:.9rem;
  font-weight:500;
  padding:.75rem 1.3rem;
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(30,18,8,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:80;
  max-width:min(92vw, 30rem);
  text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------- a11y helpers ---------- */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- scroll reveal (motion-safe only) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  .reveal.in{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .product-grid,.review-grid,.journal-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .categories{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer-top{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:2rem; }
}

@media (max-width: 800px){
  .hero{ grid-template-columns:1fr; padding-block:2.6rem 3rem; }
  .hero-photo{ order:-1; }
  .material-grid{ grid-template-columns:1fr; }
  .macro-offset{ margin-top:0; }
  .fitfinder-form{ grid-template-columns:1fr; }
  .fitfinder-form .btn{ width:100%; }
}

@media (max-width: 560px){
  .product-grid,.review-grid,.journal-grid{ grid-template-columns:1fr; }
  .categories{ gap:.9rem; }
  .tile-label{ font-size:1.05rem; left:.9rem; bottom:.75rem; }
  .nav-inner{ gap:.6rem; }
  .nav-actions{ gap:.1rem; }
  .nav-actions .icon-btn:not(.nav-toggle){ display:none; }
  .btn-cart{ padding-inline:.8rem; margin-left:.1rem; }
  .monogram{ width:30px; height:30px; }
  .wordmark{ font-size:1.12rem; }
  .announce{ font-size:.72rem; }
  .news-form{ flex-direction:column; }
  .hero-ctas .btn{ flex:1; }
}