:root{
  --wine:#8e0024;
  --wine-dark:#5f0018;
  --cream:#fffaf0;
  --peach:#f5dfce;
  --ink:#151515;
  --muted:#6d625c;
  --blue:#58c9ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Montserrat",Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
}
html{
  background:var(--cream);
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{
  width:100%;
  height:64px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#050505;
  color:var(--wine);
  position:sticky;
  top:0;
  z-index:20;
}
.icon-btn{
  width:32px;height:32px;padding:5px;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:5px
}
.icon-btn span{height:2px;width:22px;background:var(--wine);display:block}
.brand-mark{
  width:48px;height:36px;background:linear-gradient(145deg,#e84537,#a4171f);
  color:#6a0d15;border-radius:3px;display:grid;place-items:center;
  font-weight:800;transform:rotate(-2deg);box-shadow:0 4px 14px #0008
}
.bag{font-size:26px;line-height:1}
.mobile-menu{
  width:100%;
  margin:0 auto;
  max-height:0;
  overflow:hidden;
  background:#111;
  color:#fff;
  transition:max-height .25s ease;
  position:sticky;
  top:64px;
  z-index:19;
}
.mobile-menu.open{max-height:220px}
.mobile-menu a{display:block;padding:14px 22px;border-top:1px solid #ffffff18}
main,footer{width:100%;margin:0 auto;background:var(--cream)}
.section{padding:34px 24px}
.pattern{
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 20px 20px, transparent 13px, #f2d7c3 14px, transparent 15px),
    radial-gradient(circle at 64px 44px, transparent 20px, #f4dfce 21px, transparent 22px);
  background-size:92px 78px;
}
.hero{text-align:center;padding-top:10px}
.eyebrow{color:var(--wine);font-weight:700;font-size:11px;letter-spacing:.06em;margin:0}
.hero h1{
  margin:0 auto 18px;max-width:360px;color:var(--wine);
  font-size:29px;line-height:.96;letter-spacing:.08em;text-transform:lowercase
}
.hero h1 span{display:block}
.hero h2,.concept h2{font-size:15px;margin:22px 0}
.featured-products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end;margin:26px 0 22px}
.mini-product{display:flex;justify-content:center}

.product-art{
    width: 130px;
    height: 90px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 4px 7px 12px rgba(0,0,0,.25);
}

.product-art img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.cta{
    display: block;
    width: fit-content;
    margin: 30px auto;   /* centers it */
    background: var(--wine);
    color: #fff;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.concept{text-align:center;padding-top:32px;padding-bottom:58px}
.concept p{text-align:left;font-size:12px;line-height:1.45;margin:0}
.map-wrap{height:190px;background:#ddd}
.map-wrap iframe{width:100%;height:100%;border:0}
footer{
  min-height:270px;background:var(--wine);color:#fff;text-align:center;padding:55px 22px;
  font-size:11px
}
.socials{display:flex;justify-content:center;gap:34px;margin:18px 0 30px;font-size:24px}
.phone{display:inline-block;margin-top:10px}

.shop-page{min-height:calc(100vh - 64px)}
.page-title{text-align:center;text-transform:uppercase;font-size:18px;margin:0 0 26px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 16px}
.product-card{text-align:center}
.product-card .product-art{width:72px;height:118px;margin:0 auto 10px}
.product-card h3,.product-card p{font-size:11px;margin:5px 0}
.product-card h3{font-weight:500}
.pay-row{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:7px}
.paypal{color:#003087;font-weight:800;font-size:18px}
.pay-btn{
  border:0;border-radius:999px;background:var(--blue);padding:5px 16px;
  font-size:10px;cursor:pointer
}

.product-page{min-height:calc(100vh - 64px)}
.product-kicker{text-align:center;font-size:13px;margin:0 0 40px}
.product-detail{display:grid;grid-template-columns:1fr 150px;gap:24px;align-items:center}
.product-copy h1{font-size:20px;margin:0 0 14px}
.product-copy p{font-size:11px;line-height:1.55;margin:0 0 12px}
.large-product-art{
  width:145px;height:210px;background:#e9dfd7;padding:15px;
  transform:rotate(2deg);box-shadow:7px 9px 14px #0003
}
.stamp{
  width:100%;height:100%;display:grid;place-items:center;background:#873244;color:#f5d8cf;
  font-weight:800;font-size:14px;letter-spacing:.16em;border:5px solid #9b5964
}
.detail-actions{margin-top:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.price{font-weight:800;color:var(--wine)}
.buy-btn{border:0;background:var(--wine);color:#fff;padding:10px 14px;border-radius:999px;cursor:pointer}

@media (min-width:700px){
  html,
  body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
    background:var(--cream);
  }

  .site-header,
  .mobile-menu,
  main,
  footer{
    width:100%;
    max-width:none;
    margin:0;
    border-radius:0;
  }

  .site-header{
    height:72px;
    padding:0 clamp(28px,5vw,72px);
  }

  .mobile-menu{top:72px}

  .section{
    width:100%;
    padding:64px clamp(40px,8vw,120px);
  }

  .hero{
    min-height:620px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:64px;
    padding-bottom:76px;
  }

  .eyebrow{font-size:13px}

  .hero h1{
    max-width:820px;
    font-size:clamp(44px,6vw,76px);
    line-height:.92;
    margin-bottom:36px;
  }

  .hero h2,
  .concept h2{font-size:18px}

  .featured-products{
    width:min(100%,820px);
    max-width:none;
    gap:clamp(22px,4vw,48px);
    margin:40px auto 34px;
    justify-content: center;
  }

  .product-art{
    width:280px;
    height:200px;
  }

  .cta{
    padding:12px 22px;
    font-size:50px;
  }

  .concept{
    min-height:430px;
    display:grid;
    place-content:center;
  }

  .concept p{
    max-width:760px;
    margin:auto;
    font-size:15px;
    line-height:1.7;
  }

  .map-wrap{
    width:100%;
    height:320px;
  }

  footer{
    min-height:300px;
  }

  .shop-page{min-height:calc(100vh - 72px)}
  .page-title{font-size:24px;margin-bottom:44px}

  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:58px 54px;
    width:min(100%,920px);
    margin:0 auto;
  }

  .product-card .product-art{
    width:112px;
    height:180px;
  }

  .product-card h3,
  .product-card p{font-size:13px}

  .pay-btn{
    padding:7px 22px;
    font-size:11px;
  }

  .product-page{min-height:calc(100vh - 72px)}

  .product-kicker{
    font-size:16px;
    margin-bottom:58px;
  }

  .product-detail{
    grid-template-columns:minmax(0,1fr) 320px;
    gap:72px;
    width:min(100%,940px);
    max-width:none;
    margin:auto;
  }

  .product-copy h1{font-size:30px}
  .product-copy p{font-size:15px;line-height:1.7}
  .large-product-art{width:280px;height:400px}
}

@media (min-width:1200px){
  .hero{min-height:680px}
  .section{padding-left:max(80px,calc((100vw - 1200px)/2));padding-right:max(80px,calc((100vw - 1200px)/2))}
}
  .hero{min-height:660px}
  .product-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:420px){
  .product-detail{grid-template-columns:1fr}
  .large-product-art{margin:10px auto 0}
  .featured-products{gap:8px}
  .product-grid{gap:26px 10px}
}


/* Integrated original supplied assets */
.icon-btn{
  display:grid;
  place-items:center;
}
.icon-btn img{
  display:block;
  width:24px;
  height:auto;
}
.bag{
  display:grid;
  place-items:center;
}
.bag img{
  display:block;
  width:22px;
  height:auto;
}
.image-cta{
  background:transparent;
  padding:0;
  border-radius:0;
}
.image-cta img{
  display:block;
  width:160px;
  max-width:100%;
  height:auto;
}
.pattern{
  background-color:var(--cream);
  background-image:url("assets/pattern.png");
  background-repeat:repeat-x;
  background-size:auto 82px;
  background-position:center bottom 18px;
}
.concept.pattern,
.shop-page.pattern,
.product-page.pattern{
  background-image:url("assets/pattern.png");
  background-repeat:repeat-x;
  background-size:auto 82px;
  background-position:center bottom 18px;
}
.socials a{
  display:grid;
  place-items:center;
}
.socials img{
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
}
@media (min-width:700px){
  .icon-btn img{width:28px}
  .bag img{width:24px}
  .image-cta img{
    display: block;
    width: 300px;
    max-width: 200%;
    height: auto;
}
  .socials img{width:20px;height:20px}
}
