@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;
}

.canvas-box{
  max-width:1600px;
  margin:0 auto;
  padding:.5rem;}

/* Hero */
.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;
}

.user-btn {
  color:var(--blackColorDim);
}

.user-btn:hover{
  color:var(--primaryColor);
}

.user-btn.logged {
  color:var(--primaryColor);
}

.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;
  box-shadow:0 2px 3px var(--secondaryColor);
}

.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;}

/* Category bar */
.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;}

.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);}

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

.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;
  gap:.22rem;margin-bottom:.55rem;align-items:center;
}

.color-dots{
  display:flex;
  margin:0 .125rem; gap:.22rem; 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);
}

.color-dot{width:15px;height:15px;border-radius:50%;border:1px 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;
}

/* Empty state */
.empty-state{
  grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--lightGreyColor5);
}

.empty-state i{font-size:2.5rem;opacity:.2;display:block;margin:0 auto .75rem;}

/* ════════════════════════════════════════════════════
   shop LAYOUT
════════════════════════════════════════════════════ */

/* ── Panels ── */
.canvas-panel{
  background:var(--whiteColor);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  height: 100%;
}

.canvas-placeholder {
  min-width: 600px;
  min-height: 600px;
  aspect-ratio: 1;
  touch-action: none;
  margin: auto;
  user-select: none; cursor: default;
}

.canvas-panel.left{width: 20%;
  display: flex;
  border-right:1px solid var(--lightGreyColor3);
}

.canvas-panel.center{
  width: 65%;
  display: flex;
  background:var(--lightGreyColor2);
}

@media (max-width:1024px) {
  .canvas-panel {
      flex-direction:row;
  }
  .canvas-panel.left{display: none}
  .canvas-panel.center{width: 100%;}
}

.canvas-tabs-placeholder{
  flex:1;padding:.5rem .25rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

.canvas-tabs-item{
  background:var(--lightGreyColor);
  flex:1;padding:.5rem .25rem;
  font-size:clamp(.8rem, calc(100vw / 1024),1.06rem);
  cursor:pointer;color:var(--lightGreyColor5);
  border:none;background:transparent;
  font-family:var(--titleFont), serif;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  display:flex;align-items:center;justify-content:center;gap:.22rem;
  transition:all .12s;
  border-bottom:2px solid transparent;letter-spacing:.2px;
}

.canvas-tabs-item:hover{color:var(--darkGreyColor);background:var(--lightGreyColor2);}

.canvas-tabs-item.on{
  color:var(--primaryColor);background:var(--whiteColor);
  border-bottom-color:var(--primaryColor);
}

.canvas-tabs-item i{font-size:.72rem;}

.panel-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:.7rem;display:flex;flex-direction:column;gap:.45rem;
  min-height:0;
}

/* ── Section cards ── */
.sec-card{
  border:1px solid var(--lightGreyColor3);border-radius:var(--r-md);overflow:hidden;
  transition:border-color .1s;
}

.sec-card:focus-within{border-color:var(--lightGreyColor4);}

.sec-head{
  padding:.42rem .65rem;background:var(--lightGreyColor);border-bottom:1px solid var(--lightGreyColor3);
  font-size:.62rem;font-weight:700;color:var(--lightGreyColor6);
  letter-spacing:.6px;text-transform:uppercase;
  display:flex;align-items:center;gap:.32rem;
}

.sec-body{padding:.65rem;display:flex;flex-direction:column;gap:.5rem;}

.canvas-toolbar{
  padding:.38rem .65rem;
  display: flex;
  border-bottom:1px solid var(--lightGreyColor3);
  background:var(--whiteColor);align-items:center;
  gap:.25rem;height:42px;
}

.tb-sep{width:1px;height:18px;background:var(--lightGreyColor3);margin:0 .08rem;flex-shrink:0;}

.zoom-badge{
  padding:.2rem .45rem;background:var(--lightGreyColor);border:1px solid var(--lightGreyColor3);
  border-radius:var(--r-sm);font-family:var(--bodyFont);font-size:.66rem;color:var(--lightGreyColor5);
  min-width:44px;text-align:center;
}

.canvas-area{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--lightGreyColor2);
  background-image:radial-gradient(circle,rgba(0,0,0,.08) 1px,transparent 1px);
  background-size:18px 18px;
  padding:28px;
}

.canvas-box{
  position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),var(--sh-xl);
  background:#fff;border-radius:2px;
  transition:transform .2s
  cubic-bezier(.16,1,.3,1);
}

.canvas-footer{
  padding:.4rem .9rem;border-top:1px solid var(--lightGreyColor3);background:var(--whiteColor);
  display:flex;align-items:center;gap:.65rem;font-size:.72rem;color:var(--lightGreyColor5);
  flex-shrink:0;flex-wrap:wrap;
}

.canvas-footer strong{color:var(--darkGreyColor);font-weight:600;}

/* ════════════════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════════════════ */

.field-hint{font-size:.65rem;color:var(--lightGreyColor5);line-height:1.5;margin-top:.18rem;}

.textarea{
  width:100%;padding:.46rem .65rem;background:var(--lightGreyColor);
  border:1px solid var(--lightGreyColor3);border-radius:var(--r-md);
  color:var(--darkGreyColor);font-family:var(--titleFont);font-size:.82rem;outline:none;
  transition:all .12s;
}

.textarea:focus{border-color:var(--primaryColor);background:var(--whiteColor);box-shadow:0 0 0 3px rgba(232,64,28,.08);}

.textarea::placeholder{color:var(--lightGreyColor4);}

.textarea{resize:vertical;min-height:70px;}

.n-inp{
  width:54px;padding:.32rem .35rem;background:var(--lightGreyColor);border:1px solid var(--lightGreyColor3);
  border-radius:var(--r-sm);color:var(--darkGreyColor);font-family:var(--bodyFont);font-size:.78rem;
  text-align:center;outline:none;
}

.n-inp:focus{border-color:var(--primaryColor);}

.h-inp{
  flex:1;padding:.32rem .45rem;background:var(--lightGreyColor);border:1px solid var(--lightGreyColor3);
  border-radius:var(--r-sm);color:var(--darkGreyColor);font-family:var(--bodyFont);font-size:.78rem;outline:none;
}

.h-inp:focus{border-color:var(--primaryColor);}

/* Slider */
.slider-row{display:flex;align-items:center;gap:.42rem;}

.slider-row input[type=range]{
  flex:1;-webkit-appearance:none;height:4px;background:var(--lightGreyColor3);
  border-radius:2px;outline:none;cursor:pointer;
}

.slider-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--primaryColor);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(232,64,28,.4);
}

/* Swatches */
.swatch-row{display:flex;flex-wrap:wrap;gap:.28rem;align-items:center;}

.swatch{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  margin:0 2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:transform .12s;flex-shrink:0;
}

.swatch:hover{transform:scale(1.18);}

.swatch.on{box-shadow:0 0 0 2px var(--primaryColor),0 0 0 4px #fff,0 0 0 5.5px var(--primaryColor);}

.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%;}

/* Buttons */


.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%;}

.icon-btn{
  width:28px;height:28px;padding:0;border-radius:var(--r-sm);border:1px solid var(--lightGreyColor3);
  background:var(--whiteColor);color:var(--lightGreyColor5);display:flex;align-items:center;justify-content:center;
  font-size:.74rem;cursor:pointer;transition:all .12s;flex-shrink:0;
}

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

.icon-btn:disabled{opacity:.35;cursor:not-allowed;}

.icon-btn.danger:hover{border-color:var(--danger);color:var(--danger);background:#FEF2F2;}

/* Tags / Badges */
.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);}

/* Divider */

/* Upload zone */

/* Font grid */
.canvas-fonts-placeholder{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;}

.font-btn{
  padding:.35rem .4rem;border-radius:var(--r-sm);border:1px solid var(--lightGreyColor3);background:var(--lightGreyColor);
  color:var(--lightGreyColor5);font-size:.72rem;cursor:pointer;transition:all .1s;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

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

.font-btn.on{border-color:var(--primaryColor);color:var(--primaryColor);background:var(--secondaryColor);}

/* Format bar */
.fmt-bar{display:flex;gap:.2rem;}

.fmt-btn{
  flex:1;padding:.34rem;border-radius:var(--r-sm);border:1px solid var(--lightGreyColor3);background:var(--lightGreyColor);
  color:var(--lightGreyColor5);cursor:pointer;font-size:.76rem;font-family:var(--titleFont);
  display:flex;align-items:center;justify-content:center;transition:all .1s;
}

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

.fmt-btn.on{border-color:var(--primaryColor);color:var(--primaryColor);background:var(--secondaryColor);}

/* Logo size grid */

/* Shapes grid */

/* ── Layers ── */

/* ── Properties ── */

/* ════════════════════════════════════════════════════
   CART DRAWER
════════════════════════════════════════════════════ */
.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;
}

.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)}}

/* ════════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════════ */

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

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

/* Steps indicator */

/* Form rows */

/* Preview modal specifics */

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

@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){
  .shop-box{padding:1rem 1rem 1rem;}
  .catalog-items-placeholder{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));}
}