:root {
  --ink:#252522;
  --paper:#faf9f6;
  --muted:#817e77;
  --line:#e8e4dc;
  --rose:#e8c9c4;
  --olive:#77795c;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.65
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select {
  font:inherit
}

button,a {
  touch-action:manipulation
}

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

.announcement {
  height:34px;
  background:#282824;
  color:#eee9de;
  text-align:center;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:7px
}

.announcement a {
  color:#e8c9c4
}

.site-header {
  height:83px;
  background:rgba(250,249,246,.97);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5.5%;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(40,40,36,.08);
  transition:box-shadow .3s
}

.wordmark {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1
}

.wordmark small {
  display:block;
  font-size:8px;
  letter-spacing:.23em;
  margin-top:7px;
  color:var(--muted)
}

.mark {
  font-family:var(--serif);
  font-size:29px;
  font-weight:500;
  border:1px solid #b9a892;
  border-radius:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#927866
}

.main-nav,.header-actions {
  display:flex;
  align-items:center;
  gap:30px
}

.main-nav a,.header-actions a,.search-open {
  font-size:11px;
  letter-spacing:.05em
}

.main-nav a:hover,.text-link:hover {
  color:#a77b70
}

.header-actions {
  gap:22px
}

.header-actions a {
  white-space:nowrap
}

.search-open,.menu-toggle {
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:23px;
  padding:8px
}

.count {
  display:inline-grid;
  place-items:center;
  background:#e8c9c4;
  border-radius:50%;
  min-width:17px;
  height:17px;
  font-size:9px;
  margin-left:3px
}

.menu-toggle {
  display:none
}

.hero {
  min-height:615px;
  display:grid;
  grid-template-columns:45% 55%;
  position:relative;
  padding-left:9%;
  background:#f1eee7
}

.hero-copy {
  align-self:center;
  padding:40px 7% 58px 0
}

.eyebrow,.section-kicker {
  font-size:9px;
  font-weight:600;
  letter-spacing:.2em;
  color:#8d796e
}

.hero h1 {
  font:500 clamp(49px,6vw,84px)/1.06 var(--serif);
  letter-spacing:-.04em;
  margin:20px 0 22px
}

.hero h1 em,h2 em,.intro em {
  font-weight:500;
  color:#a88177
}

.hero-text {
  max-width:355px;
  color:#6e6b64;
  font-size:13px;
  line-height:1.9
}

.hero-buttons {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:31px
}

.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding:14px 18px;
  font-size:10px;
  letter-spacing:.05em
}

.button-dark {
  color:white;
  background:#292925
}

.button-outline {
  border:1px solid #a89b8d
}

.button:hover {
  transform:translateY(-2px)
}

.text-link {
  font-size:10px;
  letter-spacing:.04em;
  border-bottom:1px solid #bcb2a6;
  padding-bottom:4px
}

.hero-note {
  margin-top:68px;
  color:#827d73;
  font-size:10px;
  letter-spacing:.08em
}

.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a88177;
  margin-right:7px
}

.hero-image {
  position:relative;
  overflow:hidden;
  background:#e9e5dc;
  min-height:615px
}

.hero-image img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center
}

.hero-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(37,37,34,.83);
  color:#fff;
  padding:14px 24px;
  font-size:9px;
  letter-spacing:.17em;
  display:flex;
  justify-content:space-between
}

.hero-side {
  position:absolute;
  right:22px;
  top:45%;
  writing-mode:vertical-rl;
  letter-spacing:.25em;
  font-size:8px;
  color:#9a948b
}

.section-wrap {
  max-width:1280px;
  margin:auto;
  padding:88px 6%
}

.intro {
  text-align:center;
  padding-top:95px;
  padding-bottom:65px
}

.intro p {
  font:500 clamp(27px,4vw,44px)/1.35 var(--serif);
  margin:15px 0 0
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:30px
}

.section-heading h2,.story-copy h2,.newsletter h2,.page-title {
  font:500 clamp(32px,4vw,49px)/1.17 var(--serif);
  letter-spacing:-.025em;
  margin:8px 0 0
}

.collections {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:17px
}

.collection-card {
  height:390px;
  position:relative;
  overflow:hidden;
  background:#ebe8e1
}

.collection-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s
}

.collection-card:hover img {
  transform:scale(1.04)
}

.collection-card:after {
  content:'';
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.62))
}

.collection-card>span {
  position:absolute;
  z-index:1;
  bottom:23px;
  left:24px;
  color:white;
  display:grid
}

.collection-card small {
  font-size:8px;
  letter-spacing:.18em
}

.collection-card b {
  font:500 30px var(--serif)
}

.collection-card i {
  font-style:normal;
  font-size:10px;
  margin-top:7px
}

.products-band {
  background:#f2f0eb
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:25px 16px
}

.product-card {
  min-width:0
}

.product-image {
  position:relative;
  aspect-ratio:.84;
  background:#eeece6;
  overflow:hidden
}

.product-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}

.product-card:hover .product-image img {
  transform:scale(1.035)
}

.product-badge {
  position:absolute;
  top:12px;
  left:12px;
  background:#faf9f6;
  padding:5px 9px;
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase
}

.wish-button {
  position:absolute;
  right:9px;
  top:8px;
  background:rgba(250,249,246,.9);
  border:0;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:18px;
  cursor:pointer
}

.quick-add {
  position:absolute;
  bottom:10px;
  left:10px;
  right:10px;
  padding:11px;
  background:rgba(250,249,246,.94);
  border:0;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transform:translateY(55px);
  transition:.25s
}

.product-card:hover .quick-add,.quick-add:focus {
  transform:translateY(0)
}

.product-meta {
  padding:12px 1px
}

.product-meta h3 {
  font:500 16px var(--serif);
  margin:0 0 3px
}

.product-meta p {
  font-size:10px;
  color:var(--muted);
  margin:0 0 6px
}

.price {
  font-size:11px
}

.price del {
  color:#999;
  margin-right:6px
}

.story-banner {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:480px;
  background:#ebe7df
}

.story-image {
  min-height:450px
}

.story-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.story-copy {
  align-self:center;
  padding:60px 12%
}

.story-copy>p:not(.eyebrow) {
  max-width:380px;
  color:#706d65;
  font-size:12px;
  line-height:1.9;
  margin:21px 0 26px
}

.promise {
  text-align:center
}

.promise-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:42px;
  text-align:left;
  gap:40px
}

.promise-grid>div {
  border-top:1px solid var(--line);
  padding-top:15px
}

.promise-grid span {
  font-size:9px;
  color:#ab877d;
  letter-spacing:.15em
}

.promise-grid h3 {
  font:500 20px var(--serif);
  margin:12px 0 5px
}

.promise-grid p {
  font-size:11px;
  color:var(--muted);
  max-width:260px
}

.newsletter {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:52px 10%;
  background:#e9e4da
}

.newsletter h2 {
  font-size:35px
}

.newsletter>div>p:last-child {
  font-size:11px;
  color:#777
}

.newsletter-form {
  display:flex;
  border-bottom:1px solid #817e77;
  min-width:350px
}

.newsletter-form input {
  flex:1;
  background:transparent;
  border:0;
  outline:0;
  padding:12px 4px;
  font-size:11px
}

.newsletter-form button {
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:10px
}

.site-footer {
  background:#272724;
  color:#f3f0e9;
  padding:54px 7% 20px
}

.footer-main {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:45px;
  padding-bottom:48px
}

.footer-brand p {
  max-width:235px;
  font-size:11px;
  color:#b6b2aa;
  margin:20px 0
}

.site-footer .wordmark {
  color:white
}

.footer-main>div:not(:first-child) {
  display:flex;
  flex-direction:column;
  gap:10px
}

.footer-main h4 {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.17em;
  margin:0 0 8px
}

.footer-main a,.footer-main span {
  font-size:10px;
  color:#c4c0b8
}

.footer-bottom {
  border-top:1px solid #4a4943;
  padding-top:15px;
  display:flex;
  gap:28px;
  color:#aaa69e;
  font-size:9px
}

.footer-bottom span:nth-child(2) {
  margin-right:auto
}

.whatsapp-float {
  position:fixed;
  z-index:15;
  right:22px;
  bottom:22px;
  background:#718269;
  color:white;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px;
  box-shadow:0 5px 18px #0002
}

.search-dialog {
  border:0;
  width:min(680px,92vw);
  padding:45px;
  background:var(--paper);
  box-shadow:0 18px 70px #0003
}

.search-dialog::backdrop {
  background:#1c1c19a8
}

.dialog-close {
  position:absolute;
  right:18px;
  top:15px;
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer
}

.search-form {
  display:flex;
  border-bottom:1px solid #aaa;
  margin:20px 0
}

.search-form input {
  flex:1;
  border:0;
  background:transparent;
  padding:12px 0;
  outline:0;
  font:22px var(--serif)
}

.search-form button {
  border:0;
  background:transparent;
  cursor:pointer
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}


.page-shell {
  max-width:1240px;
  margin:auto;
  padding:66px 6% 100px
}

.page-top {
  text-align:center;
  margin-bottom:45px
}

.page-top .eyebrow {
  margin:0
}

.page-top .page-title {
  margin:10px 0
}

.page-top>p:last-child {
  color:var(--muted);
  font-size:12px
}

.shop-layout {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:38px
}

.filters {
  border-top:1px solid var(--line);
  padding-top:19px
}

.filters h3 {
  font:500 17px var(--serif);
  margin:0 0 18px
}

.filters label {
  display:block;
  font-size:11px;
  margin:13px 0;
  color:#666
}

.filters select,.filters input[type=search],.filters input[type=number] {
  width:100%;
  padding:9px;
  border:1px solid var(--line);
  background:transparent
}

.filter-group {
  margin-bottom:26px
}

.shop-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:17px;
  font-size:10px;
  color:var(--muted)
}

.shop-toolbar select {
  border:0;
  background:transparent;
  padding:8px
}

.product-detail {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:7%;
  align-items:start
}

.gallery-main {
  aspect-ratio:.92;
  background:#edeae4
}

.gallery-main img {
  width:100%;
  height:100%;
  object-fit:cover
}

.gallery-thumbs {
  display:flex;
  gap:8px;
  margin-top:10px
}

.gallery-thumbs button {
  width:66px;
  height:72px;
  border:1px solid transparent;
  padding:0;
  background:none;
  cursor:pointer
}

.gallery-thumbs img {
  width:100%;
  height:100%;
  object-fit:cover
}

.gallery-thumbs button.active {
  border-color:#a88177
}

.detail-info {
  position:sticky;
  top:110px
}

.detail-info h1 {
  font:500 42px/1.2 var(--serif);
  margin:10px 0
}

.detail-info .description {
  color:#716e67;
  font-size:12px;
  line-height:1.9;
  margin:24px 0
}

.detail-price {
  font-size:15px
}

.detail-options {
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:22px 0
}

.quantity {
  display:inline-flex;
  border:1px solid var(--line);
  height:43px;
  align-items:center
}

.quantity button {
  height:100%;
  width:38px;
  background:transparent;
  border:0;
  cursor:pointer
}

.quantity input {
  width:38px;
  border:0;
  background:transparent;
  text-align:center
}

.detail-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.detail-buttons button {
  height:48px;
  border:1px solid #292925;
  cursor:pointer;
  font-size:10px
}

.detail-buttons .add-cart {
  background:#292925;
  color:white
}

.detail-buttons .ask {
  background:transparent
}

.detail-meta {
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:14px;
  color:var(--muted);
  font-size:10px
}

.cart-row {
  display:grid;
  grid-template-columns:96px 1fr auto;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:center
}

.cart-row img {
  width:96px;
  height:110px;
  object-fit:cover
}

.cart-row h3 {
  font:500 18px var(--serif);
  margin:0
}

.cart-row p {
  color:var(--muted);
  font-size:10px
}

.cart-summary {
  margin:30px 0 0 auto;
  max-width:370px;
  padding:23px;
  background:#f1eee8
}

.cart-summary div {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:16px
}

.cart-summary .button {
  width:100%;
  border:0;
  justify-content:center;
  cursor:pointer
}

.empty-state {
  text-align:center;
  padding:65px 15px;
  background:#f1eee8
}

.empty-state h2 {
  font:500 30px var(--serif)
}

.content-copy {
  max-width:760px;
  margin:auto;
  font-size:13px;
  color:#66635d;
  line-height:2
}

.content-copy h2 {
  font:500 28px var(--serif);
  color:var(--ink);
  margin-top:35px
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px
}

.contact-card {
  padding:28px;
  background:#f1eee8
}

.contact-card input,.contact-card textarea {
  display:block;
  width:100%;
  padding:13px;
  margin:12px 0;
  background:transparent;
  border:1px solid #d8d2c8
}

.contact-card button {
  background:#292925;
  color:white;
  border:0;
  padding:13px 18px;
  cursor:pointer
}

.policy-note {
  padding:17px;
  background:#f1eee8;
  font-size:11px
}


@media(max-width:950px) {
  .site-header {
  padding:0 4%
}

.main-nav {
  gap:15px
}

.hero {
  padding-left:6%;
  grid-template-columns:45% 55%
}

.hero,.hero-image {
  min-height:540px
}

.product-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.collection-card {
  height:330px
}

.header-actions {
  gap:12px
}


}

@media(max-width:700px) {
  .announcement {
  font-size:8px
}

.site-header {
  height:68px;
  padding:0 5%
}

.menu-toggle {
  display:block;
  order:0
}

.wordmark {
  order:1;
  margin-right:auto;
  margin-left:5px;
  font-size:11px
}

.mark {
  width:36px;
  height:36px;
  font-size:24px
}

.header-actions {
  order:2;
  gap:8px
}

.header-actions a {
  font-size:10px
}

.main-nav {
  display:none;
  position:absolute;
  top:68px;
  left:0;
  right:0;
  background:var(--paper);
  padding:18px 6% 25px;
  border-bottom:1px solid var(--line);
  flex-direction:column;
  align-items:stretch;
  gap:0
}

.main-nav.open {
  display:flex
}

.main-nav a {
  padding:13px 0;
  border-bottom:1px solid var(--line)
}

.hero {
  display:flex;
  flex-direction:column;
  padding:0;
  min-height:0
}

.hero-copy {
  padding:52px 8% 34px
}

.hero h1 {
  font-size:57px
}

.hero-note {
  margin-top:37px
}

.hero-image {
  min-height:410px;
  height:100vw;
  max-height:530px
}

.hero-side {
  display:none
}

.section-wrap {
  padding:60px 6%
}

.intro {
  padding:67px 7% 48px
}

.section-heading {
  align-items:start;
  gap:14px
}

.section-heading h2 {
  font-size:34px
}

.section-heading .text-link {
  margin-top:20px;
  white-space:nowrap;
  font-size:9px
}

.collections {
  gap:9px
}

.collection-card {
  height:230px
}

.collection-card>span {
  left:12px;
  bottom:14px
}

.collection-card b {
  font-size:22px
}

.collection-card small {
  font-size:7px
}

.collection-card i {
  font-size:8px
}

.product-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 10px
}

.quick-add {
  transform:none;
  padding:9px;
  font-size:8px
}

.product-meta h3 {
  font-size:14px
}

.story-banner {
  grid-template-columns:1fr
}

.story-image {
  min-height:300px;
  height:75vw
}

.story-copy {
  padding:40px 8% 52px
}

.promise-grid {
  grid-template-columns:1fr;
  gap:18px;
  margin-top:25px
}

.promise-grid>div {
  padding:14px
}

.newsletter {
  display:block;
  padding:40px 7%
}

.newsletter h2 {
  font-size:31px
}

.newsletter-form {
  min-width:0;
  margin-top:22px
}

.footer-main {
  grid-template-columns:1fr 1fr;
  gap:32px 18px
}

.footer-brand {
  grid-column:1/-1
}

.footer-bottom {
  flex-wrap:wrap;
  gap:12px
}

.footer-bottom span:nth-child(2) {
  display:none
}

.footer-bottom span:first-child {
  margin-right:auto
}

.page-shell {
  padding:45px 5% 70px
}

.shop-layout {
  display:block
}

.filters {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:0 0 12px
}

.filters h3 {
  grid-column:1/-1;
  margin:4px
}

.filter-group {
  margin:0
}

.filters label {
  margin:5px 0
}

.product-detail {
  grid-template-columns:1fr;
  gap:28px
}

.detail-info {
  position:static
}

.detail-info h1 {
  font-size:34px
}

.gallery-main {
  aspect-ratio:1
}

.cart-row {
  grid-template-columns:74px 1fr auto;
  gap:11px
}

.cart-row img {
  width:74px;
  height:88px
}

.cart-row h3 {
  font-size:15px
}

.contact-grid {
  grid-template-columns:1fr;
  gap:25px
}


}

@media(max-width:390px) {
  .header-actions .search-open {
  font-size:19px
}

.header-actions {
  gap:3px
}

.wordmark {
  letter-spacing:.14em
}

.collection-card {
  height:190px
}

.hero-buttons {
  gap:14px
}

.hero-buttons .button {
  gap:15px
}

.section-heading {
  display:block
}

.section-heading .text-link {
  display:inline-block;
  margin-top:13px
}


}



.shop-hero  {
  
  display: flex;
  
  align-items: end;
  
  justify-content: space-between;
  
  gap: 32px;
  
  padding: 28px 0 38px;
  
  margin-bottom: 38px;
  
  border-bottom: 1px solid var(--line);
  

}



.shop-hero .page-title  {
  
  max-width: 650px;
  
  font-size: clamp(38px, 5vw, 61px);
  

}



.shop-hero p:last-child  {
  
  max-width: 540px;
  
  color: var(--muted);
  
  font-size: 12px;
  

}



.shop-hero-link  {
  
  min-width: max-content;
  
  margin-bottom: 10px;
  
  padding: 12px 16px;
  
  border: 1px solid #c8b9ab;
  
  font-size: 10px;
  
  letter-spacing: .05em;
  

}



.shop-hero-link span  {
  
  margin-left: 18px;
  
  color: #a88177;
  

}



.shop-page .shop-layout  {
  
  grid-template-columns: 230px minmax(0, 1fr);
  
  gap: 34px;
  

}



.shop-page .filters  {
  
  position: sticky;
  
  top: 104px;
  
  align-self: start;
  
  padding: 22px 20px;
  
  background: #f2f0eb;
  
  border: 1px solid #eeebe4;
  

}



.filter-heading  {
  
  display: flex;
  
  align-items: start;
  
  justify-content: space-between;
  
  gap: 8px;
  
  padding-bottom: 15px;
  
  border-bottom: 1px solid var(--line);
  

}



.filter-heading .eyebrow  {
  
  margin: 0 0 4px;
  
  font-size: 8px;
  

}



.filter-heading h2  {
  
  margin: 0;
  
  font: 500 20px var(--serif);
  

}



.clear-filters  {
  
  padding: 5px 0;
  
  border: 0;
  
  border-bottom: 1px solid #bcb2a6;
  
  background: transparent;
  
  color: var(--muted);
  
  font-size: 9px;
  
  cursor: pointer;
  

}



.shop-page .filter-group  {
  
  margin: 19px 0;
  

}



.shop-page .filter-group > label,
.filter-label  {
  
  display: flex;
  
  justify-content: space-between;
  
  margin: 0 0 8px;
  
  color: var(--ink);
  
  font-size: 10px;
  
  font-weight: 600;
  

}



.filter-label small  {
  
  color: var(--muted);
  
  font-weight: 400;
  

}



.shop-page .filter-group input[type="search"],
.shop-page .filter-group select,
.price-inputs input  {
  
  width: 100%;
  
  min-height: 42px;
  
  padding: 9px 10px;
  
  border: 1px solid #dcd7ce;
  
  border-radius: 0;
  
  background: var(--paper);
  
  color: var(--ink);
  
  font-size: 11px;
  

}



.price-inputs  {
  
  display: grid;
  
  grid-template-columns: 1fr auto 1fr;
  
  align-items: center;
  
  gap: 7px;
  
  color: var(--muted);
  
  font-size: 10px;
  

}



.shop-page .price-inputs input  {
  
  min-width: 0;
  

}



.filter-checks label  {
  
  display: flex;
  
  align-items: center;
  
  gap: 9px;
  
  margin: 10px 0;
  
  color: #625f59;
  
  font-size: 10px;
  

}



.filter-checks input  {
  
  accent-color: #8d796e;
  

}



.filter-note  {
  
  margin: 22px 0 0;
  
  padding-top: 14px;
  
  border-top: 1px solid var(--line);
  
  color: var(--muted);
  
  font-size: 9px;
  
  line-height: 1.7;
  

}



.shop-toolbar  {
  
  min-height: 43px;
  
  margin: 0 0 16px;
  
  padding: 0 0 10px;
  
  border-bottom: 1px solid var(--line);
  

}



.shop-toolbar p  {
  
  margin: 0;
  
  color: var(--ink);
  
  font-size: 10px;
  
  letter-spacing: .04em;
  

}



.sort-control  {
  
  display: flex;
  
  align-items: center;
  
  gap: 9px;
  
  color: var(--muted);
  
  font-size: 9px;
  

}



.sort-control select  {
  
  padding: 7px 4px;
  
  border: 0;
  
  background: transparent;
  
  color: var(--ink);
  
  font-size: 10px;
  

}



.shop-page #shop-grid  {
  
  grid-template-columns: repeat(3, minmax(0, 1fr));
  
  gap: 28px 18px;
  

}



.shop-page #shop-grid .product-image  {
  
  aspect-ratio: .9;
  
  background: #efede7;
  

}



.shop-page #shop-grid .product-image img  {
  
  object-position: center;
  

}



@media (max-width: 900px)  {
  
  .shop-page .shop-layout  {
  
    grid-template-columns: 200px minmax(0, 1fr);
  
    gap: 22px;
  
  
}



  .shop-page #shop-grid  {
  
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
  
}



}



@media (max-width: 700px)  {
  
  .shop-hero  {
  
    align-items: start;
  
    flex-direction: column;
  
    gap: 12px;
  
    padding: 10px 0 24px;
  
    margin-bottom: 25px;
  
  
}



  .shop-hero .page-title  {
  
    font-size: 39px;
  
  
}



  .shop-hero p:last-child  {
  
    margin-bottom: 4px;
  
  
}



  .shop-page .shop-layout  {
  
    display: block;
  
  
}



  .shop-page .filters  {
  
    position: static;
  
    display: grid;
  
    grid-template-columns: 1fr 1fr;
  
    gap: 0 12px;
  
    margin-bottom: 26px;
  
    padding: 17px;
  
  
}



  .filter-heading,
  .filter-note  {
  
    grid-column: 1 / -1;
  
  
}



  .shop-page .filter-group  {
  
    margin: 13px 0 3px;
  
  
}



  .shop-page #shop-grid  {
  
    gap: 21px 11px;
  
  
}



}



@media (max-width: 390px)  {
  
  .shop-page .filters  {
  
    grid-template-columns: 1fr;
  
  
}



  .filter-heading,
  .filter-note  {
  
    grid-column: auto;
  
  
}



  .shop-toolbar  {
  
    align-items: start;
  
  
}



}