@import url("./vars.css");

.shop-root{
  flex:1;overflow-y:auto;overflow-x:hidden;
  background:var(--lightGreyColor);
}

.shop-box{
  max-width:1240px;
  margin:0 auto;
  padding:1.5rem;
}

.shop-title{
  background:linear-gradient(135deg,var(--blackColor) 0%,var(--lightGreyColor6) 60%,var(--lightGreyColor5) 100%);
  border-radius:var(--r-md);padding:3.5rem 3rem;margin-bottom:2.5rem;
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
}

.shop-title::before{
  content:'';position:absolute;right:-80px;top:-80px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,var(--lightGreyColor5),transparent 50%);pointer-events:none;
}

.shop-title::after{
  content:'';position:absolute;left:40%;bottom:-100px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,var(--lightGreyColor5),transparent 50%);pointer-events:none;
}

.hero-text{
  font: var(--bodyFont);
  position:relative;z-index:1;
}

.shop-title-eyebrow{
  font: var(--titleFont);
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--primaryColor);
  color:var(--whiteColor);padding:.25rem .75rem;border-radius:var(--r-full);
  font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  margin-bottom:1rem;
}

.shop-title-text{
  font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;
  color:var(--whiteColor);line-height:1.08;letter-spacing:-1px;margin-bottom:.85rem;
}

.shop-title-text em{
  color:transparent;font-style:normal;
  background:linear-gradient(90deg,var(--primaryColor),var(--secondaryColor));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero-sub{
  font-size:.95rem;
  color:var(--whiteColor);
  opacity: .55;
  line-height:1.7;margin-bottom:1.5rem;max-width:400px;
}

.shop-title-btn{
  display:inline-flex;
  align-items:center;gap:.4rem;
  padding:.65rem 1.4rem;
  font-weight:700;font-size:.88rem;border:none;cursor:pointer;
  transition:all .18s;
}

.shop-stats-placeholder{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:.85rem;
}

.shop-stats-card{
  background:var(--whiteColorDim3);
  border:1px solid var(--whiteColorDim);
  border-radius:var(--r-lg);padding:1rem 1.1rem;backdrop-filter:blur(10px);
}

.shop-stats-value {font-size:1.4rem;font-weight:900;color:var(--whiteColor);}

.shop-stats-value span {font-size:.75rem;font-weight:600;color:var(--secondaryColor);}

.shop-stats-label {font-size:.72rem;color:var(--whiteColor);margin-top:.1rem;}

.catalog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;gap:1rem;flex-wrap:wrap;}

.catalog-header-title{
  font-size:1rem;
  color:var(--darkGreyColor);letter-spacing:-.3px;
  cursor: pointer;
}

.catalog-filters-placeholder{display:flex;gap:.35rem;flex-wrap:wrap;}

.catalog-filter-btn{
  padding:.32rem .9rem;border-radius:var(--r-full);
  font-size:clamp(.77rem,calc(100vw / 1024),1.0rem);
  font-weight:600;
  border:1px solid var(--lightGreyColor3);background:var(--whiteColor);color:var(--lightGreyColor6);
  cursor:pointer;transition:all .15s;white-space:nowrap;
}

.catalog-box {
  width: 100%;
}

.catalog-filter-btn:hover{border-color:var(--darkGreyColor);color:var(--darkGreyColor);}

.catalog-filter-btn.on{background:var(--darkGreyColor);color:var(--whiteColor);border-color:var(--darkGreyColor);}

.catalog-box {
  min-height: 75vh;
}
/* Product grid */
.catalog-items-placeholder{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:1.1rem;
}

.catalog-item{
  background:var(--whiteColor);border-radius:var(--r-lg);
  border:1px solid var(--lightGreyColor3);overflow:hidden;cursor:pointer;
  transition:all .22s cubic-bezier(.16,1,.3,1);position:relative;
  display:flex;flex-direction:column;
}

.catalog-item:hover{border-color:var(--primaryColor);transform:translateY(-3px);box-shadow:var(--sh-md);}

.catalog-item:hover .cta-btn{opacity:1;transform:translateY(0);}

.catalog-item:hover .catalog-item-thumbnail{transform:scale(1.05);}

.catalog-item-preview{
  height:185px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,var(--lightGreyColor2) 0%,var(--lightGreyColor) 100%);
  display:flex;align-items:center;justify-content:center;
}

.catalog-item-thumbnail{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  transition:transform .28s ease;
}

.catalog-item-thumbnail img{width:100%;height:100%;object-fit:contain;}

.catalog-item-null {
  filter: grayscale(100%);
  opacity: 75%;
  border: none;
}

.catalog-item-null:hover {
  translate: none;
  transform: none;
  border: none;
}

.catalog-count {
  color: var(--lightGreyColor5); font-size: 0.85rem;
}

.catalog-item-body{padding:.9rem 1rem 1rem;flex:1;display:flex;flex-direction:column;}

.catalog-item-title{
  font-size:clamp(.92rem, calc(100vw / 1024),1.22rem);
  line-height: 1.5rem;
  color:var(--darkGreyColor);margin-bottom:.18rem;
  letter-spacing:-.2px;}

.catalog-item-desc{font-size:.73rem;color:var(--lightGreyColor5);line-height:1.55;margin-bottom:.7rem;flex:1;}

.color-dots-box{
  display:flex; flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap:.22rem;margin-bottom:.55rem;align-items:center;
}

.color-dots{
  display:flex;
  margin:0 .125rem;
  padding:.3rem; align-items:center;border-radius:16px;
  line-height: normal;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),var(--sh-xl);
  gap: 0.1rem;
}

.color-dot{
  width:15px;height:15px;border-radius:50%;border:0 solid var(--blackColorDim);box-shadow:0 0 0 1px rgba(0,0,0,.08),var(--sh-xl);
}

.catalog-item-footer{display:flex;align-items:center;justify-content:space-between;}

.prod-price{font-size:1rem;font-weight:800;color:var(--darkGreyColor);letter-spacing:-.3px;}

.prod-price small{font-size:.65rem;font-weight:500;color:var(--lightGreyColor5);margin-left:2px;}

.cta-btn{
  display:flex;align-items:center;gap:.28rem;padding:.32rem .72rem;
  background:var(--primaryColor);color:#fff;border-radius:var(--r-full);
  font-size:.72rem;font-weight:700;opacity:0;transform:translateY(4px);
  transition:all .2s;border:none;cursor:pointer;white-space:nowrap;
}

.color-picker-wrap{
  width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--lightGreyColor3);
  cursor:pointer;position:relative; flex-shrink:0;
}

.color-picker-wrap input{position:absolute;inset:-4px;opacity:0;cursor:pointer;width:200%;height:200%;}

.btn:hover:focus{background:var(--lightGreyColor);border-color:var(--darkGreyColor);}

.btn:active{transform:scale(.97);}

.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important;}

.btn-primary{background:var(--primaryColor);border-color:var(--primaryColor);color:#fff;}

.btn-primary:hover{background:var(--primaryColor);border-color:var(--primaryColor);}

.btn-dark{background:var(--darkGreyColor);border-color:var(--darkGreyColor);color:#fff;}

.btn-dark:hover{background:var(--darkGreyColor2);}

.btn-ghost{background:transparent;border-color:transparent;color:var(--lightGreyColor5);}

.btn-ghost:hover{background:var(--lightGreyColor);border-color:var(--lightGreyColor3);color:var(--darkGreyColor);}

.btn-full{width:100%;}

.tag{display:inline-flex;align-items:center;gap:.2rem;padding:.12rem .42rem;border-radius:var(--r-sm);font-size:.62rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}

.tag-brand{background:var(--secondaryColor);color:var(--primaryColor);}

.cart-drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  z-index:400;opacity:0;pointer-events:none;transition:opacity .2s;
}

.cart-drawer-overlay.open{opacity:1;pointer-events:all;}

.drawer-header{
  padding:1.25rem 1.35rem;border-bottom:1px solid var(--lightGreyColor3);
  display:flex;align-items:center;gap:.75rem;flex-shrink:0;
}

.catalog-item.inactive {
  display: none;
}

.catalog-root-placeholder {
  display: grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin: 0 1rem;
  gap: 1rem;
}

.catalog-root-item {
  margin: 1rem;
  padding: 0 2rem;
  width: 100%;
}

.drawer-header h2{font-size:1rem;font-weight:800;color:var(--darkGreyColor);flex:1;letter-spacing:-.3px;}

@keyframes pop{from{transform:scale(0)} to{transform:scale(1)}}

@keyframes fadeIn{from{opacity:0} to{opacity:1}}

@keyframes slideUp{from{transform:translateY(22px);opacity:0} to{transform:translateY(0);opacity:1}}

@media (max-width:1024px){
  :root{--lp:252px;--rp:0px;}
  .shop-box {padding: 1rem 0.5rem;}
  .shop-title {
    border-radius:0;
  }
  .shop-box{margin:0;padding: 0}
  .catalog-box{padding: 1rem}
  .catalog-root-item {margin: 0 auto}
}

@media (max-width:768px){
  :root{--lp:0px;--hh:52px;}
  .shop-title{grid-template-columns:1fr;padding:2rem 1.5rem;}
  .shop-stats-placeholder{grid-template-columns:1fr 1fr;}
}

@media (max-width:480px){
  .catalog-items-placeholder{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));}
}