/* =========================================================
   SUBLIM8 SHOP
   1640px desktop page. base.html remains untouched.
   ========================================================= */

a{color:inherit;text-decoration:none}
.site{width:1640px;margin:0 auto}

.shop-page{
  width:1640px;
  padding:24px 36px 34px;
  box-sizing:border-box;
  background:#fbfaf7;
  color:#151712;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
}

.shop-page .panel{
  border:1px solid #e4ddd5;
  border-radius:13px;
  background:rgba(255,253,250,.97);
}

/* HERO */
.shop-hero{
  min-height:170px;
  padding:28px 34px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:
    radial-gradient(circle at 88% 25%, rgba(248,223,229,.55), transparent 26%),
    linear-gradient(120deg,#fffdfa,#f7f3ed);
}

.shop-title-row{display:flex;align-items:center;gap:10px}
.shop-title-row h1{margin:0;font:700 36px Georgia,"Times New Roman",serif}
.shop-title-row img{width:18px;height:18px}
.shop-hero-copy>p{margin:12px 0 18px;color:#555850;font-size:14px}
.shop-hero-points{display:flex;gap:22px;flex-wrap:wrap}
.shop-hero-points span{font-size:12px;font-weight:700;color:#344C34}
.shop-hero-points b{margin-right:5px;color:#344C34}

.shop-hero-badge{
  width:190px;
  height:92px;
  border:1px solid #d7d0c7;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff8f2;
  box-shadow:0 5px 16px rgba(55,45,36,.05);
}
.shop-hero-badge strong{font:700 20px Georgia,serif;color:#344C34}
.shop-hero-badge span{margin-top:5px;font-size:12px;color:#77716b}

/* TOOLBAR */
.shop-toolbar{
  margin-top:16px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:330px 1fr 180px;
  gap:14px;
  align-items:center;
}

.shop-search{
  height:42px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #cfc8c0;
  border-radius:9px;
  background:#fff;
}
.shop-search span{font-size:21px;color:#344C34}
.shop-search input{width:100%;border:0;outline:0;background:transparent;font-size:13px}

.shop-category-pills{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.shop-category-pills button{
  height:34px;
  padding:0 13px;
  border:1px solid #d4cec6;
  border-radius:18px;
  background:#fff;
  color:#344C34;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.16s;
}
.shop-category-pills button:hover,
.shop-category-pills button.active{background:#344C34;color:#fff;border-color:#344C34}

#shop-sort{
  height:42px;
  padding:0 12px;
  border:1px solid #cfc8c0;
  border-radius:9px;
  background:#fff;
  color:#344C34;
  font-weight:700;
  font-size:12px;
}

/* MAIN LAYOUT */
.shop-layout{
  margin-top:16px;
  display:grid;
  grid-template-columns:245px 1fr;
  gap:16px;
}

.shop-sidebar{
  align-self:start;
  padding:18px;
  box-sizing:border-box;
}

.shop-filter-block + .shop-filter-block{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #e6e0d9;
}

.shop-filter-block h2{
  margin:0 0 12px;
  font:700 17px Georgia,serif;
  color:#344C34;
}

.shop-side-filter{
  width:100%;
  min-height:37px;
  padding:0 9px;
  border:0;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  color:#333630;
  font-size:14px;
  cursor:pointer;
}
.shop-side-filter:hover{background:#f5f2ed}
.shop-side-filter.active{background:#edf2e9;color:#344C34;font-weight:700}
.shop-side-filter em{font-style:normal;color:#8b8882}

.shop-filter-block label{
  min-height:33px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#444640;
}
.shop-filter-block input{accent-color:#344C34}

.shop-membership-card{
  margin-top:24px;
  padding:18px 15px;
  border:1px solid #e1d5c8;
  border-radius:12px;
  background:#fff7ed;
  text-align:center;
}
.shop-membership-card img{width:22px;height:22px}
.shop-membership-card h3{margin:8px 0 6px;font:700 16px Georgia,serif;color:#344C34}
.shop-membership-card p{margin:0 0 12px;font-size:13px;line-height:1.45;color:#6e6963}
.shop-membership-card a{
  height:34px;
  border:1px solid #344C34;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#344C34;
  font-size:12px;
  font-weight:700;
}
.shop-membership-card a:hover{background:#344C34;color:#fff}

/* RESULTS */
.shop-results{
  padding:18px;
  box-sizing:border-box;
}

.shop-results-head{
  min-height:44px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.shop-results-head h2{margin:0 0 4px;font:700 21px Georgia,serif;color:#344C34}
.shop-results-head p{margin:0;color:#77736d;font-size:13px}
.shop-view-tools{display:flex;gap:6px}
.shop-view-tools button{
  width:34px;height:34px;border:1px solid #d4cec6;border-radius:7px;background:#fff;color:#344C34;cursor:pointer
}
.shop-view-tools button.active{background:#344C34;color:#fff}

.shop-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(4,240px);
  gap:16px;
  justify-content:start;
}

.shop-product{
  min-width:0;
  overflow:hidden;
  border:1px solid #dfd8d0;
  border-radius:11px;
  background:#fff;
  box-shadow:0 1px 4px rgba(55,45,36,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.shop-product:hover{
  transform:translateY(-5px);
  border-color:#cdbfb1;
  box-shadow:0 10px 24px rgba(55,45,36,.12);
}

.shop-product-image{
  position:relative;
  width:100%;
  aspect-ratio:1.2 / 1;
  height:auto;
  overflow:hidden;
  background:#f8f4ef;
}
.shop-product-image>img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#f8f4ef;
  transition:transform .22s ease;
}
.shop-product:hover .shop-product-image>img{transform:scale(1.025)}

.product-badge{
  position:absolute;
  left:10px;top:10px;
  padding:5px 8px;
  border-radius:999px;
  background:#fff;
  color:#344C34;
  box-shadow:0 2px 7px rgba(0,0,0,.10);
  font-size:12px;
  font-weight:700;
}

.product-heart{
  position:absolute;
  right:10px;top:10px;
  width:34px;height:34px;
  border:0;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);
  color:#344C34;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.10);
  transition:transform .15s ease,background .15s ease;
}
.product-heart:hover{transform:scale(1.08);background:#fae9ee}
.product-heart.saved{color:#c27d8c}

.quick-view{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translate(-50%,10px);
  opacity:0;
  height:34px;
  padding:0 15px;
  border:0;
  border-radius:8px;
  background:#344C34;
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:opacity .17s ease,transform .17s ease;
}
.shop-product:hover .quick-view{opacity:1;transform:translate(-50%,0)}

.shop-product-info{padding:12px}
.shop-product-info h3{margin:0 0 6px;font:700 14px Georgia,serif}
.product-rating{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.product-rating span{color:#b17a2c;font-size:13px;letter-spacing:1px}
.product-rating small{font-size:12px;color:#777}

.product-price-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}
.product-price-row strong{display:block;font-size:14px}
.product-price-row strong small{font-size:12px;font-weight:400}
.product-price-row div>span{
  display:inline-block;
  margin-top:5px;
  padding:4px 7px;
  border-radius:999px;
  background:#edf2e9;
  color:#344C34;
  font-size:12px;
  font-weight:700;
}

.product-cart{
  width:34px;height:34px;
  flex:0 0 34px;
  border:1px solid #344C34;
  border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  color:#344C34;
  font-size:20px;
  cursor:pointer;
  transition:.15s;
}
.product-cart:hover,.product-cart.added{background:#344C34;color:#fff;transform:translateY(-2px)}

.shop-empty{
  margin-top:14px;
  padding:70px 20px;
  text-align:center;
  border:1px dashed #d9d1c8;
  border-radius:12px;
  background:#fff;
}
.shop-empty div{font-size:36px;color:#b17a2c}
.shop-empty h2{margin:8px 0;font:700 20px Georgia,serif}
.shop-empty p{margin:0;color:#777;font-size:12px}

.shop-pagination{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:7px;
}
.shop-pagination button{
  width:34px;height:34px;
  border:1px solid #d2ccc4;
  border-radius:7px;
  background:#fff;
  color:#344C34;
  cursor:pointer;
}
.shop-pagination button.active{background:#344C34;color:#fff;border-color:#344C34}

/* BOTTOM CTA */
.shop-bottom-cta{
  min-height:82px;
  margin-top:16px;
  padding:14px 20px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(90deg,#f2f5ef,#fffaf5);
}
.shop-bottom-cta>div{display:flex;align-items:center;gap:13px}
.shop-bottom-cta>div>img{
  width:46px;height:46px;padding:7px;box-sizing:border-box;border-radius:50%;background:#fff
}
.shop-bottom-cta h2{margin:0 0 5px;font:700 16px Georgia,serif;color:#344C34}
.shop-bottom-cta p{margin:0;font-size:13px;color:#666}
.shop-bottom-cta>a{
  width:210px;height:40px;
  border:1px solid #344C34;
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:#344C34;
  font-size:12px;font-weight:700;
  transition:.16s;
}
.shop-bottom-cta>a:hover{background:#344C34;color:#fff;transform:translateY(-2px)}


/* =========================================================
   PRODUCT CARD DETAILS — KEEP IMAGE + INFO TOGETHER
   ========================================================= */

.shop-product{
  width:240px;
  min-height:335px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.shop-product-image{
  position:relative;
  width:100%;
  aspect-ratio:1.2 / 1;
  height:auto;
  display:block;
  flex:0 0 auto;
  overflow:hidden;
  background:#f8f4ef;
}

.shop-product-image>img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#f8f4ef;
}

.shop-product-info{
  padding:12px 12px 13px;
  display:block;
  flex:1 1 auto;
  background:#fff;
}

.product-title-link{
  display:block;
}

.shop-product-info h3{
  margin:0 0 0px;
  min-height:34px;
  color:#20251f;
  font:700 14px Georgia,"Times New Roman",serif;
  line-height:1.2;
}

.product-rating{
  margin-bottom:9px;
  display:flex;
  align-items:center;
  gap:7px;
}

.product-rating span{
  color:#b17a2c;
  font-size:20px;
  letter-spacing:.8px;
}

.product-rating small{
  color:#706c66;
  font-size:12px;
}

.product-price-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.product-price-copy{
  min-width:0;
}

.product-price-copy strong{
  display:block;
  color:#20251f;
  font-size:15px;
  line-height:1.15;
}

.product-price-copy strong small{
  font-size:12px;
  font-weight:500;
}

.product-file-info{
  display:block!important;
  margin-top:4px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#77716b!important;
  font-size:12px!important;
  font-weight:500!important;
}

.member-free{
  display:inline-block!important;
  margin-top:6px!important;
  padding:4px 7px!important;
  border-radius:999px!important;
  background:#edf2e9!important;
  color:#344C34!important;
  font-size:12px!important;
  font-weight:700!important;
}

.product-heart{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.94);
  color:#344C34;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.10);
  z-index:3;
}

.product-heart:hover{
  transform:scale(1.08);
  background:#fae9ee;
}

.product-heart.saved{
  color:#c27d8c;
}

.product-cart{
  margin-bottom:1px;
}

.shop-grid{
  align-items:start;
}


/* =========================================================
   VIEW PRODUCT HOVER BUTTON FIX
   ========================================================= */

.quick-view{
  position:absolute;
  left:50%;
  bottom:14px;
  width:120px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,8px);
  opacity:0;
  border:1px solid rgba(255,255,255,.45);
  border-radius:8px;
  background:#344C34;
  color:#fff!important;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 5px 14px rgba(31,45,31,.20);
  cursor:pointer;
  z-index:4;
  transition:opacity .17s ease,transform .17s ease,background .17s ease;
}

.shop-product:hover .quick-view{
  opacity:1;
  transform:translate(-50%,0);
}

.quick-view:hover{
  background:#2c412c;
}


/* Product card title + download layout */
.shop-product-info h3{
  min-height:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}

.product-rating{
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

.product-rating small{
  display:block;
}