:root {

  --sky: #bfe9ff;

  --bubble: #ffb3d9;

  --pink: #ff86b9;

  --blue: #7ed0ff;

  --card: #ffffffcc;

  --text: #333;

  --muted: #666;

  --radius: 16px;

  --transition: 0.3s ease;

  /* Font: Poppins */

  font-family: "Poppins", sans-serif;

}



body {

  margin: 0;

  background: linear-gradient(180deg, var(--sky), #f9f7ff);

  color: var(--text);

}



/* Layout */

.wrap { max-width: 1100px; margin: 0 auto; padding: 20px; }



/* Nav */

header { position: sticky; top: 10px; z-index: 50; }

.nav {

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

  background: linear-gradient(90deg, #fff9, #fff8);

  backdrop-filter: blur(10px);

  padding: 10px 16px; border-radius: 14px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }

.brand .logo {

  background: linear-gradient(135deg, var(--blue), var(--bubble));

  width: 42px; height: 42px; display:flex; align-items:center; justify-content:center;

  border-radius: 10px; color: #fff; font-weight: 800;

  position: relative;

  overflow: hidden;

}

.brand-logo-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

}



nav ul { display:flex; gap:18px; list-style:none; margin:0; padding:0; }

nav a { text-decoration:none; color: var(--muted); font-weight:600; transition:var(--transition); }

nav a:hover { color:#000; }

.search { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #ddd; border-radius:20px; }

.search input { border:none; outline:none; background:none; font-weight:400; }

.search i { color: var(--muted); }



.btn {

  padding:8px 14px; border:none; border-radius:12px;

  background:linear-gradient(90deg,var(--bubble),var(--pink));

  color:#fff; font-weight:700; cursor:pointer;

  box-shadow:0 4px 10px rgba(255,134,185,0.2);

}

.menu-toggle { display:none; background:none; border:none; cursor:pointer; }

.mobile-nav { display:none; margin-top:10px; background:#fff8; backdrop-filter:blur(10px); border-radius:10px; padding:10px; }

.mobile-nav a { display:block; padding:8px; color:#333; text-decoration:none; }



/* Floating Cart */

.floating-cart {

  position: fixed;

  top: 20px;

  right: 20px;

  z-index: 100;

}



/* Hero */

.hero { display:grid; grid-template-columns:1fr 420px; gap:20px; margin-top:20px; border-radius:18px;

  box-shadow:0 10px 30px rgba(0,0,0,0.05); overflow:hidden; background:#fff;

}

.hero-left { padding:50px 40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }



/* 30% OFF Badge (Face forward with hover shadow) */

.badge {

  background:var(--blue); padding:6px 12px; border-radius:20px; font-weight:700; color:#033;

  width:max-content; transition: box-shadow var(--transition);

}

.badge-hover-shadow:hover {

  box-shadow: 0 5px 15px rgba(126, 208, 255, 0.4);

}



.hero-title { font-size:34px; font-weight:800; color:#022; }

.hero-sub { color:#444; }



/* CTA Buttons - ensures both buttons are aligned and use Poppins */

.hero-cta { display: flex; gap: 10px; align-items: center; }

.cta-primary, .cta-secondary {

  padding:12px 18px;

  border-radius:10px;

  font-weight:600;

  cursor:pointer;

  transition:var(--transition);

  font-family: "Poppins", sans-serif;

}



.cta-primary {

  border:none;

  background:linear-gradient(90deg,var(--pink),#ff66a7);

  color:#fff;

  box-shadow:0 5px 15px rgba(255,134,185,0.4);

}

.cta-primary:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,134,185,0.5); }



.cta-secondary {

  border:1px solid #ccc;

  background:transparent;

  color: var(--text);

}

.cta-secondary:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.05); }





.hero-right {

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

  background:linear-gradient(180deg,#fff,#fdfbff);

  perspective: 1000px;

}

.hero-pic {

  width:320px; height:320px; border-radius:18px; overflow:hidden;

  box-shadow:0 10px 30px rgba(0,0,0,0.05);

}

/* Hero pic 3D styling */

#heroPic {

  width:100%; height:100%; object-fit:cover;

  transition: transform 0.1s ease-out;

  transform-style: preserve-3d;

}





/* Categories */

.categories { margin:30px 0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.cat-card {

  display:flex; align-items:center; gap:12px; background:var(--card);

  padding:14px; border-radius:14px; box-shadow:0 10px 20px rgba(0,0,0,0.05);

  transition:var(--transition);

}

/* Lift-up effect for .cat-card (Dogs and Rodents) */

.cat-card:hover { transform:translateY(-5px); }



.cat-card img { width:100px; height:90px; object-fit:cover; border-radius:10px; }

.cat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; grid-column:1/-1; }



.cat-small {

  background:#fff;

  display:flex; align-items:center; gap:8px; padding:10px; border-radius:12px;

  box-shadow:0 6px 15px rgba(0,0,0,0.05);

  transition: transform 0.3s ease;

}

/* Added lift-up effect to Birds and Cats small cards */

.cat-card-hover:hover {

  transform: translateY(-5px);

}



.cat-small img { width:80px; height:70px; border-radius:8px; object-fit:cover; }

.cat-small.explore {

  justify-content:center;

  background:linear-gradient(135deg,#fff,#ffe6f6);

  font-weight:700;

  text-decoration: none;

  color: var(--text);

}

/* Explore 3D */

.explore-3d {

  transform-style: preserve-3d;

  transform: translateZ(0);

  transition: transform 0.3s ease-out, box-shadow 0.3s ease;

}

.explore-3d:hover {

  transform: translateZ(10px);

  box-shadow: 0 10px 20px rgba(255,140,185,0.2);

}



/* Featured */

.section { margin:40px 0; background:#fff; padding:20px; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,0.05); }

.section h3 { font-family: "Poppins", sans-serif; font-weight: 700; }



.tabs { display:flex; gap:10px; margin-bottom:20px; overflow-x: auto; padding-bottom: 5px; }

.tab {

  padding:8px 14px; border-radius:20px; border:1px solid #ddd; cursor:pointer;

  white-space: nowrap;

  font-family: "Poppins", sans-serif;

  font-weight: 600;

}

.tab.active { background:linear-gradient(90deg,var(--bubble),var(--pink)); color:#fff; border:none; }



/* New Style for No Results Message */

.no-results-message {

  text-align: center;

  padding: 40px 0;

  color: var(--muted);

  font-style: italic;

  font-size: 1.1rem;

  display: none; /* Hidden by default */

}



.products { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.product {

  background:#fff; border-radius:12px; padding:12px; text-align:center;

  box-shadow:0 10px 25px rgba(0,0,0,0.05); transition:var(--transition);

  display: flex; flex-direction: column;

  justify-content: space-between;

}

.product > div:first-of-type { font-family: "Poppins", sans-serif; font-weight: 500; }



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

.product img { width:120px; height:120px; object-fit:contain; margin: 0 auto; }

.meta { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }

.price { font-weight:700; color:#222; }

.icon-btn { border:none; background:none; cursor:pointer; color:#ff557f; font-size:16px; }



/* Add to cart - use cta-primary styling */

.product .cta-primary {

  margin-top:8px;

  padding:8px 10px;

  width: 100%;

  font-size: 14px;

}



/* CTA strip */

.cta-strip {

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

  background:linear-gradient(90deg,#ffd3e6,#d1f0ff);

  padding:26px; border-radius:16px; margin:40px 0;

  box-shadow:0 10px 30px rgba(0,0,0,0.05);

}

.cta-strip .left h3 { font-family: "Poppins", sans-serif; font-weight: 700; }

.cta-strip .call { display: flex; gap: 10px; align-items: center; }

.cta-strip .pic { width:240px; height:220px; border-radius:16px; overflow:hidden; }

.cta-strip img { width:100%; height:100%; object-fit:cover; }



/* Request a call/Live chat 3D */

.btn-3d {

  text-decoration: none;

  display: inline-block;

  padding: 10px 16px;

  border-radius: 10px;

  font-weight: 700;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  transform-style: preserve-3d;

}

.btn-3d:hover { transform: translateZ(5px); box-shadow: 0 8px 15px rgba(255,134,185,0.4); }



/* Live chat same format as Request a call */

.cta-secondary-primary {

  background: #fff;

  color: var(--text);

  border: 1px solid #ccc;

  box-shadow: 0 4px 10px rgba(0,0,0,0.05);

}

.cta-secondary-primary:hover { transform: translateZ(5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }





/* Why */

.why { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.card {

  background:#fff; padding:16px; border-radius:14px;

  box-shadow:0 6px 20px rgba(0,0,0,0.05);

  transition: box-shadow 0.3s ease, transform 0.3s ease;

}

.icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center;

  background:linear-gradient(135deg,var(--blue),var(--pink)); color:#fff; border-radius:10px; margin-bottom:8px;

}

/* Why choose us hover shadow */

.card-hover-shadow:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 30px rgba(0,0,0,0.15);

}



/* Footer */

footer { margin-top:40px; background:#fff; padding:20px; border-radius:12px; font-size:14px; color:#555; }

.footer-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }



/* ----------------------------------- */

/* NEW CART STYLES */

/* ----------------------------------- */



.cart-overlay {

  position: fixed;

  top: 0;

  right: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.4);

  z-index: 200;

  visibility: hidden;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.cart-overlay.open {

  visibility: visible;

  opacity: 1;

}



.cart-panel {

  position: absolute;

  top: 0;

  right: 0;

  width: 100%;

  max-width: 400px;

  height: 100%;

  background: #f9f7ff;

  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);

  transform: translateX(100%);

  transition: transform 0.3s ease;

  display: flex;

  flex-direction: column;

}



.cart-overlay.open .cart-panel {

  transform: translateX(0);

}



.cart-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px;

  background: #fff;

  border-bottom: 1px solid #eee;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

}



.cart-header h2 {

  margin: 0;

  font-weight: 700;

}



.close-cart {

  background: none;

  border: none;

  font-size: 30px;

  cursor: pointer;

  color: var(--muted);

  line-height: 1;

}



.cart-content {

  flex-grow: 1;

  padding: 20px;

  overflow-y: auto;

}



.empty-cart-message {

  text-align: center;

  padding: 50px 0;

  color: var(--muted);

  font-style: italic;

}



/* Cart Item Style */

.cart-item {

  display: flex;

  gap: 15px;

  align-items: center;

  margin-bottom: 15px;

  padding: 10px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}



.cart-item-img {

  width: 60px;

  height: 60px;

  object-fit: contain;

  border-radius: 8px;

}



.item-details {

  flex-grow: 1;

}



.item-details .item-name {

  font-weight: 600;

  font-size: 14px;

  margin-bottom: 4px;

}



.item-details .item-price {

  font-weight: 700;

  color: var(--pink);

  font-size: 14px;

}



.item-actions {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

}



.quantity-controls {

  display: flex;

  align-items: center;

  border: 1px solid #ddd;

  border-radius: 8px;

  overflow: hidden;

}



.quantity-controls button {

  background: #fff;

  border: none;

  padding: 5px 10px;

  cursor: pointer;

  font-weight: 600;

  font-size: 16px;

  line-height: 1;

  transition: background 0.2s;

}



.quantity-controls button:hover {

  background: var(--bubble);

  color: #fff;

}



.quantity-controls span {

  padding: 0 10px;

  font-weight: 600;

  font-size: 14px;

}



.remove-item {

  background: none;

  border: none;

  color: var(--muted);

  font-size: 12px;

  cursor: pointer;

  text-decoration: underline;

}



/* Cart Footer */

.cart-footer {

  padding: 20px;

  background: #fff;

  border-top: 1px solid #eee;

  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);

}



.cart-total {

  display: flex;

  justify-content: space-between;

  font-size: 18px;

  margin-bottom: 15px;

}



.total-label {

  font-weight: 600;

}



.total-amount {

  font-weight: 800;

  color: var(--pink);

}



.checkout-btn {

  width: 100%;

  padding: 12px;

  font-size: 16px;

}



/* Responsive */

@media(max-width:1000px){

  .hero { grid-template-columns:1fr; }

  .hero-right { order:-1; }

  .products { grid-template-columns:repeat(2,1fr); }

  .categories { grid-template-columns:1fr; }

  .why { grid-template-columns:1fr; }

}

@media(max-width:600px){

  .menu-toggle { display:block; }

  nav ul { display:none; }

  .mobile-nav.open { display:block; }

  .products { grid-template-columns:1fr; }

  .hero-pic { width: 280px; height: 280px; }

  /* Adjust cart panel size for small screens */

  .cart-panel {

    max-width: 100%;

  }

}