:root {
  --green : #1F4D43;--oak : #E8C9A6;--ink : #1B1F1D;--muted : #5B625F;--line : #E4E6E1;--bg : #FBFBF9
}
* {
  box-sizing : border-box
}
body {
  margin : 0;
  background : var(--bg);
  color : var(--ink);
  font-family : 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height : 1.5
}
a {
  color : inherit;
  text-decoration : none
}
  a : hover {
  text-decoration : underline
}
button {
  font-family : inherit;
  cursor : pointer
}
  :focus-visible {
  outline : 2px solid var(--green);
  outline-offset : 2px
}
.wrap {
  max-width : 1240px;
  margin : 0 auto;
  padding : 0 24px
}
.sr {
  position : absolute;
  width : 1px;
  height : 1px;
  overflow : hidden;
  clip : rect(0 0 0 0);
  white-space : nowrap
}
h1, h2, h3 {
  margin : 0
}
.announce {
  background : var(--green);
  color : #fff;
  text-align : center;
  padding : 10px 24px;
  font-size : 14px;
  font-weight : 600
}
.announce a {
  text-decoration : underline
}
header {
  border-bottom : 1px solid var(--line)
}
.head {
  display : flex;
  flex-wrap : wrap;
  align-items : center;
  gap : 16px 32px;
  padding-top : 20px;
  padding-bottom : 20px
}
.logo {
  font-size : 26px;
  font-weight : 800;
  letter-spacing : -.02em;
  color : var(--green)
}
.logo span {
  color : #B07A47
}
.search {
  flex : 1 1 280px;
  position : relative;
  display : flex;
  align-items : center;
  margin : 0
}
.search svg {
  position : absolute;
  left : 16px
}
.search input {
  width : 100%;
  height : 48px;
  padding : 0 16px 0 44px;
  border : 1px solid #CFD4CE;
  border-radius : 999px;
  background : #fff;
  font : inherit;
  font-size : 15px
}
.icons {
  display : flex;
  gap : 8px
}
.icon-btn {
  position : relative;
  width : 48px;
  height : 48px;
  border : 0;
  background : transparent;
  border-radius : 999px;
  display : flex;
  align-items : center;
  justify-content : center;
  color : var(--ink)
}
.count {
  position : absolute;
  top : 4px;
  right : 2px;
  min-width : 20px;
  height : 20px;
  padding : 0 5px;
  border-radius : 999px;
  background : var(--green);
  color : #fff;
  font-size : 12px;
  font-weight : 700;
  display : none;
  align-items : center;
  justify-content : center
}
nav {
  border-top : 1px solid #EEF0EC
}
nav .wrap {
  display : flex;
  gap : 32px;
  overflow-x : auto;
  white-space : nowrap;
  font-size : 15px;
  font-weight : 600
}
nav a {
  padding : 14px 0
}
.hero {
  display : flex;
  flex-wrap : wrap;
  align-items : center;
  gap : 40px;
  padding-top : 48px;
  padding-bottom : 32px
}
.hero-text {
  flex : 1 1 420px;
  display : flex;
  flex-direction : column;
  gap : 24px
}
.pill {
  align-self : flex-start;
  background : var(--oak);
  font-size : 13px;
  font-weight : 700;
  padding : 6px 14px;
  border-radius : 999px
}
.hero h1 {
  font-size : 56px;
  line-height : 1.05;
  font-weight : 800;
  letter-spacing : -.03em
}
.hero p {
  margin : 0;
  font-size : 18px;
  color : #4A514E;
  max-width : 520px
}
.btns {
  display : flex;
  flex-wrap : wrap;
  gap : 12px
}
.btn {
  display : inline-block;
  font-weight : 700;
  font-size : 16px;
  padding : 16px 28px;
  border-radius : 999px
}
.btn-primary {
  background : var(--green);
  color : #fff
}
.btn-outline {
  border : 1.5px solid var(--ink);
  padding : 14.5px 28px
}
.hero-art {
  flex : 1 1 420px;
  min-width : 0
}
.hero-art svg {
  display : block;
  width : 100%;
  background : #E3EAE4;
  border-radius : 28px
}
.trust {
  display : flex;
  flex-wrap : wrap;
  gap : 16px;
  border-top : 1px solid var(--line);
  border-bottom : 1px solid var(--line);
  padding : 24px 0;
  margin-bottom : 40px
}
.trust div.item {
  flex : 1 1 220px;
  display : flex;
  align-items : center;
  gap : 14px
}
.trust b {
  display : block;
  font-size : 15px
}
.trust small {
  font-size : 14px;
  color : var(--muted)
}
section.block {
  padding-top : 24px;
  padding-bottom : 56px
}
.sec-head {
  display : flex;
  flex-wrap : wrap;
  align-items : flex-end;
  justify-content : space-between;
  gap : 12px 20px;
  margin-bottom : 28px
}
.sec-head h2 {
  font-size : 36px;
  font-weight : 800;
  letter-spacing : -.02em
}
.sec-head a {
  font-weight : 700;
  color : var(--green);
  font-size : 15px
}
.cats {
  display : grid;
  grid-template-columns : repeat(auto-fill, minmax(180px, 1fr));
  gap : 20px
}
.cat {
  display : flex;
  flex-direction : column;
  justify-content : space-between;
  gap : 16px;
  border-radius : 20px;
  padding : 24px;
  min-height : 200px;
  background : #E8EEE9
}
  .cat : nth-child(even) {
  background : #F2E8DB
}
.cat span {
  font-size : 18px;
  font-weight : 700
}
.products-sec {
  background : #F4F5F1;
  padding : 56px 0
}
.tabs {
  display : flex;
  flex-wrap : wrap;
  gap : 8px
}
.tab {
  height : 44px;
  padding : 0 20px;
  border-radius : 999px;
  border : 1.5px solid #CFD4CE;
  background : #fff;
  color : var(--ink);
  font-size : 14px;
  font-weight : 700
}
.tab.active {
  background : var(--green);
  border-color : var(--green);
  color : #fff
}
.grid {
  display : grid;
  grid-template-columns : repeat(auto-fill, minmax(250px, 1fr));
  gap : 24px
}
.card {
  background : #fff;
  border : 1px solid var(--line);
  border-radius : 20px;
  overflow : hidden;
  display : flex;
  flex-direction : column
}
.card-img {
  position : relative;
  background : #EAEEE8;
  height : 220px;
  display : flex;
  align-items : center;
  justify-content : center
}
.badge {
  position : absolute;
  top : 14px;
  left : 14px;
  background : var(--oak);
  font-size : 12px;
  font-weight : 700;
  padding : 4px 10px;
  border-radius : 999px
}
.like {
  position : absolute;
  top : 8px;
  right : 8px;
  width : 44px;
  height : 44px;
  border : 0;
  border-radius : 999px;
  background : #fff;
  display : flex;
  align-items : center;
  justify-content : center
}
.card-body {
  padding : 20px;
  display : flex;
  flex-direction : column;
  gap : 8px;
  flex : 1
}
.room {
  font-size : 12px;
  font-weight : 700;
  letter-spacing : .06em;
  text-transform : uppercase;
  color : var(--muted)
}
.card h3 {
  font-size : 17px;
  font-weight : 700;
  line-height : 1.3
}
.price {
  display : flex;
  align-items : baseline;
  gap : 10px;
  margin-top : 2px
}
.price b {
  font-size : 20px;
  font-weight : 800
}
.price s {
  font-size : 14px;
  color : var(--muted)
}
.add {
  margin-top : auto;
  height : 48px;
  border : 0;
  border-radius : 999px;
  background : var(--green);
  color : #fff;
  font-size : 15px;
  font-weight : 700
}
.sale {
  background : var(--green);
  color : #fff;
  border-radius : 28px;
  padding : 56px 48px;
  display : flex;
  flex-wrap : wrap;
  align-items : center;
  justify-content : space-between;
  gap : 32px
}
.sale-text {
  flex : 1 1 380px;
  display : flex;
  flex-direction : column;
  gap : 14px
}
.sale small {
  font-size : 13px;
  font-weight : 700;
  letter-spacing : .08em;
  text-transform : uppercase;
  color : var(--oak)
}
.sale h2 {
  font-size : 40px;
  line-height : 1.1;
  font-weight : 800;
  letter-spacing : -.02em
}
.sale p {
  margin : 0;
  font-size : 17px;
  color : #D5E2DB;
  max-width : 520px
}
.sale .btn {
  background : var(--oak);
  color : var(--ink);
  font-weight : 800;
  padding : 18px 32px
}
.news {
  display : flex;
  flex-wrap : wrap;
  align-items : center;
  justify-content : space-between;
  gap : 24px;
  border : 1px solid var(--line);
  border-radius : 24px;
  padding : 40px 48px;
  background : #fff;
  margin-bottom : 72px
}
.news h2 {
  font-size : 28px;
  font-weight : 800;
  letter-spacing : -.02em;
  margin-bottom : 6px
}
.news p {
  margin : 0;
  color : #4A514E;
  font-size : 15px
}
.news form {
  flex : 1 1 360px;
  display : flex;
  flex-wrap : wrap;
  gap : 10px;
  margin : 0
}
.news input {
  flex : 1 1 200px;
  height : 52px;
  padding : 0 20px;
  border : 1px solid #CFD4CE;
  border-radius : 999px;
  font : inherit;
  font-size : 15px;
  background : var(--bg)
}
.news button {
  height : 52px;
  padding : 0 28px;
  border : 0;
  border-radius : 999px;
  background : var(--green);
  color : #fff;
  font-size : 15px;
  font-weight : 700
}
footer {
  background : #14201D;
  color : #C9D3CD
}
.foot {
  display : flex;
  flex-wrap : wrap;
  gap : 40px;
  justify-content : space-between;
  padding-top : 56px;
  padding-bottom : 32px
}
.foot .brand {
  flex : 1 1 260px;
  max-width : 340px
}
.foot .brand .logo {
  color : #fff
}
.foot .brand .logo span {
  color : var(--oak)
}
.foot p {
  margin : 12px 0 0;
  font-size : 14px
}
.foot .col {
  flex : 0 1 160px;
  display : flex;
  flex-direction : column;
  gap : 10px;
  font-size : 14px
}
.foot .col b {
  color : #fff;
  margin-bottom : 4px
}
.copy {
  border-top : 1px solid #2A3A35;
  padding : 24px 24px;
  font-size : 13px;
  color : #AEB9B3;
  max-width : 1240px;
  margin : 0 auto
}
  @media (max-width : 640px) {
  .hero h1{font-size : 38px
}
.sale, .news {
  padding : 32px 24px
}
.sale h2 {
  font-size : 30px
}
}