*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; font-family: Arial, sans-serif; }

body.categoryPage{
  min-height:100vh;

  /* Default (will be overridden by JS based on cat) */
  background: url("/images/girl.png") no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}

/* Soft overlay so cards readable */
body.categoryPage::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(255,255,255,0.55);
  z-index:0;
  pointer-events:none;
}

/* Top bar */
.catTopbar{
  position: sticky;
  top: 0;
  z-index: 3;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 24px;
}

.homeBtn,.cartBtn{
  text-decoration:none;
  background: rgba(0,0,0,0.65);
  color:#fff;
  padding:10px 16px;
  border-radius:18px;
  font-weight:800;
}

/* Main */
.catMain{
  position:relative;
  z-index:2;
  padding: 40px 26px 80px;
}

/* 4 per row */
.productsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Responsive */
@media(max-width:1100px){
  .productsGrid{ grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:800px){
  .productsGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:520px){
  .productsGrid{ grid-template-columns: 1fr; }
}

/* Card */
.productCard{
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: 0.25s;
}

.productCard:hover{
  transform: translateY(-6px);
}

/* Square image area */
.productImgWrap{
  width:100%;
  aspect-ratio: 1/1;
  overflow:hidden;
}

.productImage{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: 0.35s;
}

/* Hover zoom */
.productImgWrap:hover .productImage{
  transform: scale(1.15);
}

.productBody{
  padding: 14px 14px 18px;
  text-align:center;
}

.productName{
  font-weight:900;
  font-size:16px;
  color:#111;
  margin-bottom:10px;
}

.productSizes{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.sizeBox{
  padding:6px 10px;
  border:1px solid #111;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  background:#fff;
  cursor:pointer;
  user-select:none;
  transition:0.2s;
}

.sizeBox:hover{
  background:#111;
  color:#fff;
}

.sizeBox.active{
  background:#111;
  color:#fff;
}

.sizeBox.disabled{
  opacity:0.35;
  cursor:not-allowed;
}

.productPrice{
  font-weight:900;
  font-size:17px;
  color:#111;
  margin-bottom:14px;
}

.addBtn{
  width:80%;
  margin:0 auto;
  display:block;
  background:#111;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
}

.addBtn:hover{ background:#333; }

.catMsg{
  margin-top:18px;
  font-weight:900;
  color:#111;
}