@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap');

:root{
  --pink-light:#FFE4EC;
  --pink:#FF9EBB;
  --pink-dark:#FF4D8D;
  --pink-deep:#F7256B;
  --yellow-light:#FFF6B5;
  --yellow:#FFEB7A;
  --yellow-soft:#FFF3A0;
  --brown:#2B1A12;
  --cream:#FFFBF0;
}

body{font-family:'Outfit', sans-serif; background:var(--cream); color:var(--brown); overflow-x:hidden;}

h1, h2, h3, h4, h5, .navbar-brand, .nav-link, .cat-card h3, .price{
  font-family:'Outfit', sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-0.5px;
}

.navbar{background:#ffdbef; border-bottom:3px solid var(--brown); padding:12px 0;}
.navbar .container{display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;}
.navbar-brand{font-size:1.6rem; font-weight:900 !important; gap:8px; display:flex; align-items:center; white-space:nowrap; flex-shrink:0;}
.navbar-brand img{width:auto; height:58px; object-fit:contain;}
.nav-link{font-weight:800 !important; text-transform:uppercase; font-size:0.85rem;}
.cart-btn{background:var(--pink-dark) !important; color:white !important; border-radius:25px; padding:7px 18px !important; border:2.5px solid var(--brown);}

.hero{background:var(--yellow-light); border-bottom:3.5px solid var(--brown); padding:70px 0;}
.hero h1{font-size:4rem; font-weight:900 !important; line-height:0.9;}
.hero .highlight{background:var(--pink-dark); color:white; padding:0 14px; border:2.5px solid var(--brown); border-radius:10px; display:inline-block; transform:rotate(-1deg);}
.hero p{font-weight:600; font-size:1.15rem;}

.btn-main{background:var(--brown); color:white; border-radius:30px; padding:14px 32px; font-weight:800; text-transform:uppercase; border:none;}
.btn-pink{background:var(--pink-deep); color:white; border:3px solid var(--brown); border-radius:30px; padding:14px 32px; font-weight:800; box-shadow:5px 5px 0 var(--brown);}

.cat-card{
  display:block; text-decoration:none; color:var(--brown);
  border:3.5px dashed var(--brown); border-radius:24px;
  padding:26px; height:180px;
  box-shadow:6px 6px 0 var(--brown); transition:0.2s;
  font-weight:800; width:100%; box-sizing:border-box;
}
.cat-card h3{font-size:1.7rem;}
.cat-1{background:var(--pink-dark); color:white;}
.cat-1 h3, .cat-1 p{color:white;}
.cat-2{background:var(--yellow);}
.cat-3{background:var(--pink-light);}
.cat-4{background:var(--yellow-soft);}

.product-card{background:white; border:3px solid var(--brown); border-radius:20px; overflow:hidden; height:100%; box-shadow:5px 5px 0 var(--brown); transition:0.2s;}
/* SQUARE FIX - FORCED */
.product-card img{
  width:100% !important;
  aspect-ratio:1/1 !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  border-bottom:3px solid var(--brown);
  display:block;
}
.price{color:var(--pink-deep); font-size:1.2rem;}

.section-title{font-size:2.8rem; font-weight:900 !important; text-align:center; margin-bottom:20px;}

.footer{background:var(--brown); color:white; padding:40px 0; text-align:center;}
.footer .insta-link{
  display:inline-block;
  background:var(--yellow);
  color:var(--brown);
  font-weight:900;
  font-size:1.3rem;
  padding:8px 22px;
  border-radius:30px;
  border:2.5px solid white;
  text-decoration:none;
}

/* MOBILE ALIGNMENT - FIXED SHADOW CUT */
@media(max-width:768px){
  .container{padding-left:16px; padding-right:16px; overflow:visible;}
  .navbar-brand{font-size:1.05rem !important;}
  .navbar-brand img{height:36px !important;}
  .hero{padding:28px 0 !important;}
  .hero h1{font-size:2.1rem !important;}
  .cat-card{height:auto !important; min-height:120px; padding:18px !important; margin-bottom:14px;}
  /* Bestsellers grid spacing so shadow not cut */
  #bestsellers .row{--bs-gutter-x:14px; --bs-gutter-y:14px; padding-right:6px; padding-bottom:6px;}
  #bestsellers .col-6{padding-right:8px; padding-left:8px; margin-bottom:14px;}
  .product-card{box-shadow:4px 4px 0 var(--brown) !important;}
}
/* PRODUCT DETAIL PAGE - MAKE IT SQUARE LIKE GRID */
.product-detail-img,
.detail-image img,
.single-product-img img,
.quick-view-img img,
#product-img,
.main-image img {
  width:100% !important;
  aspect-ratio:1/1 !important;
  object-fit:contain !important;
  background:white !important;
  border:3px solid var(--brown) !important;
  border-radius:20px !important;
  padding:12px !important;
}

/* If your detail page uses .box or .image */
.box .image img,
.detail-box img {
  aspect-ratio:1/1 !important;
  object-fit:contain !important;
  width:100% !important;
  height:auto !important;
}