:root{
  --lightpink: #fcc2d7;
  --softpink: #f783ac;
  --hotpink: #e64980;
  --peach: #ffc9c9;
  --white: #ffffff;
  --text: #222;
  --radius: 12px;
  --shadow: rgba(0,0,0,0.12);
  --transition: 0.25s ease;
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, var(--lightpink) 0%, #fff 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:20px;}

/* Header */
.site-header{
  background:var(--softpink);
  padding:12px 20px;
  box-shadow:0 4px 14px var(--shadow);
  position:sticky;
  top:0;
  z-index:60;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);font-weight:700}
.brand img{height:44px;border-radius:8px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:16px;align-items:center}
.main-nav a{color:var(--white);text-decoration:none;padding:8px 10px;border-radius:8px;display:inline-block;transition:var(--transition)}
.main-nav li{position:relative}
.main-nav a:hover{background:rgba(255,255,255,0.08)}
/* Submenu */
.submenu{display:none;position:absolute;top:42px;left:0;background:var(--white);color:var(--text);border-radius:8px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.main-nav li:hover .submenu{display:block}
.submenu a{color:var(--text);display:block;padding:8px 12px}

/* Hero */
.hero{display:flex;gap:24px;align-items:center;padding:36px 0}
.hero-img{width:48%;border-radius:14px;box-shadow:0 10px 30px var(--shadow);object-fit:cover}
.hero-copy{width:52%}
.hero-copy h1{color:var(--hotpink);font-size:36px;margin:0 0 10px}
.hero-copy p{font-size:16px;margin:0 0 16px}
.btn{display:inline-block;background:var(--hotpink);color:var(--white);padding:10px 16px;border-radius:10px;text-decoration:none;transition:var(--transition)}
.btn.outline{background:transparent;border:2px solid var(--hotpink);color:var(--hotpink)}

/* Sections */
h2{color:var(--hotpink);margin-top:0}
.features ul{padding-left:18px}
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0}
.teaser-grid article{background:var(--white);padding:12px;border-radius:12px;box-shadow:0 8px 24px var(--shadow);text-align:center}
.teaser-grid img{width:100%;height:200px;object-fit:cover;border-radius:10px}

/* Product list and gallery */
.product-list{display:flex;gap:18px}
.product-list article{flex:1;background:var(--white);padding:12px;border-radius:10px;box-shadow:0 8px 18px var(--shadow)}
.product-gallery img{width:32%;border-radius:10px;margin-right:2%}

/* Shop grid */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.product-card{background:var(--white);padding:12px;border-radius:12px;box-shadow:0 8px 24px var(--shadow);text-align:center;transition:transform var(--transition)}
.product-card:hover{transform:translateY(-6px)}

/* Favorites button */
.fav-btn{ background:transparent; border:1px solid #eee; padding:6px 10px; border-radius:20px; font-size:18px; cursor:pointer; color:var(--hotpink) }
.fav-btn.active{ background:var(--hotpink); color:#fff; border-color:var(--hotpink) }
.fav-count{ font-weight:700; color:var(--hotpink); margin-left:4px }
.product-card img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.price{color:var(--hotpink);font-weight:700;margin:8px 0}

/* Product detail small */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.product-detail img{width:100%;border-radius:12px}

/* Table */
.specs{width:100%;border-collapse:collapse;margin-top:12px}
.specs th,.specs td{padding:10px;border:1px solid #eee;text-align:left}

/* Contact */
.contact-info ul{list-style:none;padding:0}
.contact-form form{display:grid;gap:10px;max-width:600px}
.contact-form input,.contact-form textarea{padding:10px;border-radius:8px;border:1px solid #ddd}

/* Newsletter */
.newsletter{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));padding:18px;border-radius:12px;margin-top:18px;box-shadow:0 8px 18px rgba(0,0,0,0.06)}
.newsletter form{display:flex;gap:8px;flex-wrap:wrap}
.newsletter input[type="email"]{flex:1;padding:10px;border-radius:8px;border:1px solid #ddd}

/* Footer */
.site-footer{background:var(--softpink);color:var(--white);padding:20px;margin-top:30px;text-align:center;border-top:4px solid var(--hotpink)}
/* Social links in footer */
.site-footer .socials{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:8px}
.site-footer .socials a{display:inline-flex;align-items:center;gap:8px;color:var(--white);text-decoration:none;padding:6px 8px;border-radius:8px;transition:background .18s}
.site-footer .socials a:hover{background:rgba(255,255,255,0.06)}
.site-footer .socials svg{width:20px;height:20px;flex:0 0 20px}
.site-footer .socials .handle{font-weight:700}

/* Modal cart & chat */
.modal{position:fixed;right:20px;bottom:20px;z-index:80}
.cart-btn{background:var(--white);border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--shadow);cursor:pointer}
.cart-popup{position:fixed;right:20px;bottom:90px;width:340px;background:var(--white);border-radius:12px;box-shadow:0 12px 36px var(--shadow);overflow:hidden}
.cart-header{background:var(--hotpink);color:var(--white);padding:12px}
.cart-body{padding:12px;max-height:340px;overflow:auto}
.cart-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #f1f1f1}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.cart-total{padding:12px;border-top:1px solid #f1f1f1;text-align:right}

/* Chat */
.chat-btn{position:fixed;right:90px;bottom:20px;background:var(--hotpink);color:white;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,0.18)}
.chat-window{position:fixed;right:20px;bottom:90px;width:320px;background:var(--white);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,0.18);overflow:hidden;display:flex;flex-direction:column}
.chat-header{background:var(--softpink);color:white;padding:10px;font-weight:700;text-align:left}
.chat-messages,.chat-content{padding:12px;flex:1;overflow:auto}
.chat-input{display:flex;padding:10px;border-top:1px solid #eee;gap:8px;background:transparent}
.chat-input input{flex:1;padding:8px;border-radius:8px;border:1px solid #ddd}

/* Responsive */
@media (max-width:900px){
  .hero{flex-direction:column}
  .hero-img{width:100%}
  .teaser-grid{grid-template-columns:1fr}
  .product-list{flex-direction:column}
  .shop-grid{grid-template-columns:1fr}
  .main-nav ul{flex-wrap:wrap;gap:6px}
  .product-detail{grid-template-columns:1fr}
}
img {
  transition: 0.3s ease;
}

img:hover {
  transform: scale(1.03);
  opacity: 0.9;
}

button:hover {
  background-color: #e64980;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  /* use brand image size on small screens */
  .brand img {
    width: 150px;
    height: auto;
  }
/* LIVECHAT BUTTON */
#livechat-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #e64980;
  color: white;
  padding: 12px 18px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;
}

/* CHAT BOX */
#livechat-box {
  position: fixed;
  bottom: 80px;
  right: 25px;
  width: 300px;
  height: 380px;
  background: #fcc2d7;
  border-radius: 15px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
}

/* livechat internal header and input use existing chat styles where possible */
#livechat-box .chat-header{background:#f783ac;padding:12px;font-weight:700;text-align:center;color:#fff}
#livechat-box .chat-content{flex:1;padding:10px;overflow-y:auto}
#livechat-box .chat-input{display:flex;background:#fff;padding:10px}
#livechat-box .chat-input input{flex:1;border:none;padding:8px;border-radius:8px;outline:none}
#livechat-box .chat-input button{background:#e64980;color:#fff;margin-left:8px;padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
}

/* Watermark and brand tweaks */
.brand img, .brand .brand-logo{height:44px;border-radius:8px;margin-right:10px;vertical-align:middle}
.site-watermark{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:url('images/logo.jpeg') center/contain no-repeat;opacity:0.06;pointer-events:none;z-index:0}
main, .container, .site-footer{position:relative;z-index:10}
@media (max-width:900px){
  .site-watermark{width:300px;height:300px;opacity:0.05}
}

/* Favorites (heart) */
.fav-btn{
  background:transparent;
  border:1px solid #f1f1f1;
  color:var(--hotpink);
  font-size:18px;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  margin-right:8px;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.fav-btn.active{background:var(--hotpink);color:white}
.fav-count{background:var(--hotpink);color:white;border-radius:999px;padding:2px 8px;font-size:12px;margin-left:6px}

/* Header heart link */
.fav-link{color:var(--white);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px}
.fav-link .fav-count{background:var(--white);color:var(--hotpink);padding:2px 6px;margin-left:6px;font-weight:700}
.fav-link:hover{background:rgba(255,255,255,0.06)}
.fav-link.active{background:rgba(255,255,255,0.9);color:var(--hotpink);box-shadow:0 6px 18px rgba(0,0,0,0.12)}

/* pulse feedback animation */
.pulse{animation:pulse-pop 420ms cubic-bezier(.2,.9,.2,1)}
@keyframes pulse-pop{0%{transform:scale(1);opacity:1}40%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}

/* Toast / Snackbar */
.toast-wrap{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:99999}
.toast{background:rgba(0,0,0,0.85);color:white;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.3);font-weight:600;margin-top:8px;opacity:0;transform:translateY(8px);transition:opacity 220ms ease, transform 220ms ease}
.toast.show{opacity:1;transform:translateY(0)}

/* Share modal */
.share-modal-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;z-index:9999}
.share-modal{background:var(--white);padding:14px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.25);width:380px}
.share-modal input{width:100%;padding:8px;border-radius:8px;border:1px solid #ddd}
.share-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.share-link-trigger{color:var(--white);text-decoration:none;padding:6px 8px;border-radius:8px;display:inline-block}
.share-actions .btn{padding:6px 10px}
.share-actions .btn.outline{padding:6px 10px}
.share-social{display:flex;gap:8px;align-items:center}