:root {
  color-scheme:light;
  --ink:#30221c;
  --muted:#655047;
  --accent:#813f2c;
  --line:#dbc8b8;
  font:100%/1.55 system-ui,sans-serif;
  color:var(--ink);
  background:#fff9f2
}


* {
  box-sizing:border-box
}

body {
  margin:0
}

a {
  color:inherit
}

a:focus-visible,button:focus-visible {
  outline:3px solid #ba612d;
  outline-offset:4px
}

.wrap {
  width:min(100% - 2rem,1120px);
  margin-inline:auto
}

.site-header,nav {
  display:flex;
  align-items:center;
  gap:1.25rem
}

.site-header {
  min-height:76px;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-block:.7rem
}

.site-header a {
  text-decoration:none
}

nav a {
  padding-block:.5rem;
  font-weight:650
}

nav a:hover {
  color:var(--accent)
}

.brand,h1,h2,h3 {
  font-family:Georgia,serif
}

.brand {
  font-size:1.45rem;
  font-weight:bold
}

.brand em {
  color:var(--accent)
}


.hero {
  display:grid;
  align-items:center;
  position:relative;
  isolation:isolate;
  background:#3b2319;
  color:#fff8ef;
  min-height:clamp(390px,34.19vw,690px)
}

.hero img,.hero::before {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.hero img {
  object-fit:cover;
  z-index:-2
}

.hero::before {
  content:"";
  background:linear-gradient(90deg,#24130dec,#24130d75 49%,transparent 78%);
  z-index:-1
}

.hero-copy {
  width:min(100% - 2rem,1120px);
  margin-inline:auto;
  padding-block:2.5rem
}

.eyebrow {
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.17em;
  margin:0 0 .65rem
}

h1,h2,h3 {
  line-height:1.06;
  margin:0
}

h1 {
  font-size:clamp(3rem,6vw,6rem)
}

h2 {
  font-size:clamp(2rem,4vw,3.5rem)
}

h3 {
  font-size:1.45rem
}

.hero-copy>p:not(.eyebrow) {
  max-width:25rem;
  font-size:1.12rem
}


.button,.filters button,.filters a {
  display:inline-block;
  padding:.7rem 1rem;
  min-height:44px;
  font:inherit;
  font-weight:700;
  border-radius:.65rem
}

.button {
  background:#783a27;
  color:white;
  text-decoration:none
}

.button:hover {
  background:#5e2d1e
}

.hero-button {
  background:#fff0de;
  color:var(--ink)
}

.hero-button:hover {
  background:#f1dfcf
}

.shop {
  padding-block:2.5rem 3.5rem;
  scroll-margin-top:1rem
}

.shop .eyebrow {
  color:var(--accent)
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-block:1.4rem
}

.filters button,.filters a {
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  text-decoration:none
}

.filters button:hover,.filters a:hover {
  border-color:var(--accent)
}

.filters button[aria-pressed="true"] {
  background:var(--accent);
  color:white;
  border-color:var(--accent)
}

#results,.card p {
  color:var(--muted)
}


/* Shared collection cards: explicit responsive sizing overrides old inline rules. */
.grid {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1.25rem!important;
  align-items:stretch
}


.grid>.card {
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:0!important;
  background:#fff;
  border:1px solid #dfc5b0;
  border-radius:1rem;
  overflow:hidden;
  min-width:0
}


.card>.photo {
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:6/5;
  flex:none!important;
  background:#fff
}


.card>img,.card>.photo>img {
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:6/5!important;
  object-fit:contain!important;
  background:#fff!important;
  flex:none!important;
  margin:0!important;
  padding:0!important
}


.card>.details,.card>.card-copy {
  display:flex!important;
  flex-direction:column!important;
  flex:1!important;
  padding:1.25rem!important;
  gap:0
}


.card .eyebrow {
  display:block;
  color:#783a27;
  font-size:.85rem;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 .65rem!important
}


.card h3,.collection h3 {
  font-size:1.5rem!important;
  line-height:1.06;
  margin:.5rem 0 0!important
}


.card .actions {
  margin-top:auto
}

.card-copy>p:has(>a.button) {
  margin-top:auto;
  padding-top:.25rem;
  margin-bottom:0
}

.card-copy>p:has(>a.button)~p:has(>a.button) {
  margin-top:.65rem
}

.card-copy p:last-child {
  margin-bottom:0
}


.placeholder {
  width:100%;
  aspect-ratio:6/5;
  display:grid;
  place-items:center;
  background:#f9eee3;
  color:var(--muted);
  padding:1rem
}


.collection-banner {
  background:#f1dfcf;
  text-align:center;
  padding:3rem 0 1.5rem
}

.collection-banner .eyebrow {
  color:#783a27;
  font-size:.85rem;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase
}

.collection-banner h1 {
  font-size:clamp(2.6rem,6vw,4.5rem);
  margin:.4rem 0
}

.disclosure {
  margin:1.5rem auto 0;
  font-size:.95rem;
  color:#553929
}

.collection {
  padding-block:2rem 3.5rem
}

.collection h2 {
  margin-bottom:1.25rem
}


footer {
  background:#35251e;
  color:#fff2e4;
  padding-block:1.6rem
}

footer p {
  margin:.35rem 0 0
}


@media(max-width:56rem) {
  .grid {
  grid-template-columns:repeat(2,minmax(0,1fr))!important
}


}


@media(max-width:36rem) {
  .grid {
  grid-template-columns:1fr!important
}


}


@media(max-width:600px) {
  .hero {
  min-height:0
}

.hero img {
  position:static;
  height:auto;
  aspect-ratio:2/1;
  object-position:72% center
}

.hero::before {
  display:none
}

.hero-copy {
  padding-block:1.5rem 2rem
}

.hero-copy h1 br {
  display:none
}

.filters {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))
}


}


/*========================
   Botton color
------------------------*/
.filters a[aria-current="page"]  {
  
  background: #813f2c;
  
  color: white;
  
  border-color: #813f2c;
  

}



/* Sleepwear and shared footer links */
.card h3 { line-height: 1.25; }
.card .actions { padding-top: .75rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-block: 1rem; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: #e7b590; }