.gcsf-page{
  width:min(1450px,calc(100% - 30px));
  margin:0 auto;
  padding:24px 0 70px;
}

.gcsf-hero{
  padding:38px 40px;
  border-radius:26px;
  background:linear-gradient(115deg,#15110e,#3b281e 62%,#895639);
  color:#fff;
}

.gcsf-hero>span{
  color:#d4a27f;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.gcsf-hero h1{
  margin:13px 0 0;
  color:#fff;
  font-size:clamp(44px,6vw,82px);
  line-height:.92;
  letter-spacing:-.05em;
}

.gcsf-hero p{
  max-width:650px;
  margin:16px 0 0;
  color:rgba(255,255,255,.68);
  font-size:13px;
}

.gcsf-list{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:22px;
}

.gcsf-campaign{
  padding:20px;
  border:1px solid rgba(60,38,24,.08);
  border-radius:23px;
  background:#faf7f4;
}

.gcsf-head{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  margin-bottom:16px;
}

.gcsf-head>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#181411;
  color:#fff;
  font-size:8px;
  font-weight:900;
}

.gcsf-head>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.gcsf-head small{
  color:#98674d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
}

.gcsf-head strong{
  color:#241c17;
  font-size:13px;
}

.gcsf-head>b{
  padding:8px 11px;
  border-radius:999px;
  background:#eee1d8;
  color:#75482f;
  font-size:9px;
}

.gcsf-products{
  display:grid;
  grid-template-columns:1fr 54px 1fr;
  gap:12px;
  align-items:center;
}

.gcsf-product{
  display:grid;
  grid-template-columns:minmax(160px,42%) minmax(0,1fr);
  gap:15px;
  align-items:center;
  min-height:280px;
  padding:14px;
  border-radius:18px;
  background:#fff;
}

.gcsf-product>img{
  display:block;
  width:100%;
  height:235px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
}

.gcsf-product>div{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.gcsf-product small{
  color:#93664f;
  font-size:6px;
  font-weight:900;
  letter-spacing:.14em;
}

.gcsf-product strong{
  color:#201914;
  font-size:16px;
  line-height:1.15;
}

.gcsf-product b{
  color:#17130f;
  font-size:15px;
}

.gcsf-plus{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin:auto;
  border:1px solid rgba(60,38,24,.1);
  border-radius:50%;
  background:#fff;
  color:#744b36;
  font-size:20px;
}

.gcsf-price{
  display:flex;
  align-items:center;
  gap:7px;
}

.gcsf-price del{
  color:#a99b90;
  font-size:10px;
}

.gcsf-price b{
  color:#75472f;
  font-size:17px;
}

.gcsf-select-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.gcsf-select-wrap>span{
  color:#85776e;
  font-size:7px;
  font-weight:800;
}

.gcsf-variation{
  min-height:38px;
  padding:0 8px;
  border:1px solid rgba(60,38,24,.12);
  border-radius:8px;
  background:#fff;
  font-size:9px;
}

.gcsf-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid rgba(60,38,24,.08);
}

.gcsf-bottom p{
  margin:0;
  color:#7d7067;
  font-size:9px;
}

.gcsf-add{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:180px;
  min-height:48px;
  padding:0 11px 0 15px;
  border:0;
  border-radius:12px;
  background:linear-gradient(105deg,#181411,#6d432e);
  color:#fff;
  cursor:pointer;
}

.gcsf-add span{
  font-size:10px;
  font-weight:850;
}

.gcsf-add b{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
}

.gcsf-add:disabled{
  opacity:.6;
  cursor:wait;
}

.gcsf-message{
  margin-top:10px;
  padding:10px 12px;
  border-radius:9px;
  background:#efe7e1;
  color:#625146;
  font-size:9px;
}

.gcsf-message[hidden]{
  display:none!important;
}

.gcsf-empty{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:45px 25px;
  border-radius:20px;
  background:#f5efea;
  text-align:center;
}

.gcsf-product-offer{
  display:flex;
  align-items:center;
  gap:11px;
  margin:11px 0 14px;
  padding:10px 11px;
  border:1px solid rgba(75,47,31,.09);
  border-radius:12px;
  background:linear-gradient(105deg,#f6f0eb,#fff);
}

.gcsf-product-offer img{
  width:56px;
  height:56px;
  flex:0 0 56px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}

.gcsf-product-offer>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.gcsf-product-offer small{
  color:#936249;
  font-size:6px;
  font-weight:900;
  letter-spacing:.13em;
}

.gcsf-product-offer strong{
  color:#2a211b;
  font-size:9px;
  line-height:1.35;
}

.gcsf-product-offer a{
  width:max-content;
  color:#784a33;
  font-size:8px;
  font-weight:800;
  text-decoration:none;
}

@media(max-width:900px){
  .gcsf-products{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .gcsf-page{
    width:min(100% - 14px,1450px);
  }

  .gcsf-hero{
    padding:25px 18px;
    border-radius:19px;
  }

  .gcsf-hero h1{
    font-size:39px;
  }

  .gcsf-campaign{
    padding:12px;
    border-radius:17px;
  }

  .gcsf-head{
    grid-template-columns:32px minmax(0,1fr);
  }

  .gcsf-head>b{
    grid-column:2;
    justify-self:start;
  }

  .gcsf-product{
    grid-template-columns:105px minmax(0,1fr);
    min-height:0;
    gap:10px;
    padding:10px;
  }

  .gcsf-product>img{
    height:125px;
  }

  .gcsf-product strong{
    font-size:12px;
  }

  .gcsf-bottom{
    flex-direction:column;
    align-items:stretch;
  }

  .gcsf-add{
    width:100%;
  }
}


/* v1.0.2 selected variation image */
.gcsf-product > img{
  transition:opacity .18s ease, transform .24s ease!important;
}

.gcsf-product > img.gcsf-variation-image-loading{
  opacity:.38!important;
  transform:scale(.985)!important;
}

.gcsf-product > img.gcsf-variation-image-active{
  opacity:1!important;
  object-fit:contain!important;
  object-position:center!important;
}