/*
Theme Name: My Store BD
Theme URI: http://mystorebd.shop/
Author: My Store BD
Author URI: http://mystorebd.shop/
Description: শিশুদের শিক্ষামূলক পণ্যের জন্য কালারফুল ল্যান্ডিং পেজ থিম।
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: mystorebd
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@500;600;700;800&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

:root{
  --cream:#FFF7E8; --purple:#4B2E9E; --purple-deep:#3B2280;
  --coral:#FF6F61; --orange:#FF9143; --pink:#FF6FA5; --green:#3FB27F;
  --yellow:#FFD35C; --ink:#2B2140; --muted:#6b6480; --white:#ffffff;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Hind Siliguri', sans-serif; color:var(--ink); background:#fff; line-height:1.6;}
h1,h2,h3,h4,.brand{font-family:'Baloo Da 2','Hind Siliguri',sans-serif;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
ul{list-style:none;}

/* ===== Site Header (all pages) ===== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:1180px; margin:0 auto; flex-wrap:wrap; gap:14px;
}
.brand{font-size:26px; font-weight:800; color:var(--purple); letter-spacing:.5px;}
.brand span{color:var(--coral);}
.tagline{font-size:11px; color:var(--muted); margin-top:-2px;}
.main-nav ul{display:flex; gap:32px; font-weight:600; font-size:15px;}
.main-nav a:hover{color:var(--coral);}
.head-right{display:flex; align-items:center; gap:18px; font-weight:600;}
.phone-badge{display:flex; align-items:center; gap:8px; color:var(--purple-deep);}
.cart{
  width:38px; height:38px; border-radius:50%; background:var(--pink);
  display:flex; align-items:center; justify-content:center; color:#fff; position:relative;
}
.cart span{
  position:absolute; top:-4px; right:-4px; background:var(--purple);
  color:#fff; font-size:10px; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
@media(max-width:900px){ .main-nav{display:none;} }

/* ===== Homepage ===== */
.hero{background:var(--cream); border-radius:0 0 40px 40px; position:relative; overflow:hidden; padding:60px 0 70px;}
.hero .wrap{display:flex; align-items:center; gap:40px; position:relative; z-index:2;}
.hero-copy{flex:1; min-width:280px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #ffe0b2; color:var(--orange); font-weight:700; font-size:13px; padding:8px 16px; border-radius:999px; margin-bottom:20px;}
.hero h1{font-size:46px; line-height:1.2; color:var(--purple-deep); font-weight:800;}
.hero h1 .l2{color:var(--coral);} .hero h1 .l3{color:var(--green);}
.hero p{margin:20px 0 26px; color:var(--muted); font-size:16px; max-width:480px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; transition:transform .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--coral),var(--orange)); color:#fff; box-shadow:0 10px 20px -8px rgba(255,111,97,.6);}
.btn-outline{background:#fff; color:var(--purple-deep); border:1px solid #e9e2ff;}
.trust-row{display:flex; gap:28px; margin-top:36px; flex-wrap:wrap;}
.trust-item{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; color:var(--purple-deep);}
.trust-icon{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; flex-shrink:0;}
.ic1{background:var(--purple);} .ic2{background:var(--pink);} .ic3{background:var(--coral);}
.hero-art{flex:1; min-width:260px; display:flex; justify-content:center; position:relative;}
.blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; z-index:0;}
.blob1{width:180px; height:180px; background:var(--yellow); top:-40px; left:-30px;}
.blob2{width:140px; height:140px; background:var(--pink); bottom:-30px; right:-10px; opacity:.35;}

.section{padding:70px 0;}
.section-title{text-align:center; margin-bottom:8px; color:var(--purple-deep); font-size:30px; font-weight:800;}
.section-title .star{color:var(--yellow);}
.section-sub{text-align:center; color:var(--muted); margin-bottom:40px;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.pcard{border:1px solid #f0ecff; border-radius:20px; overflow:hidden; transition:box-shadow .2s ease, transform .2s ease; background:#fff;}
.pcard:hover{box-shadow:0 16px 30px -14px rgba(75,46,158,.25); transform:translateY(-4px);}
.pimg{aspect-ratio:1/1; background:linear-gradient(135deg,#ffe9d6,#ffd7e6); display:flex; align-items:center; justify-content:center; color:var(--coral); font-size:44px; overflow:hidden;}
.pimg img{width:100%; height:100%; object-fit:cover;}
.pbody{padding:18px;}
.pbody h3{font-size:17px; margin-bottom:6px; color:var(--purple-deep);}
.pbody p{font-size:13.5px; color:var(--muted); margin-bottom:14px; min-height:40px;}
.price-row{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.price{font-weight:800; color:var(--coral); font-size:17px;}
.old-price{text-decoration:line-through; color:#b9b2cf; font-size:13px;}
.btn-block{display:block; text-align:center; width:100%; padding:11px; border-radius:999px; background:linear-gradient(135deg,var(--coral),var(--orange)); color:#fff; font-weight:700; font-size:14px;}

.why{background:#F3EEFF; border-radius:36px; margin:0 20px;}
.why .wrap{padding:70px 24px;}
.grid4-why{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-card{background:#fff; border-radius:18px; padding:28px 20px; text-align:center;}
.why-icon{width:56px; height:56px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff;}
.why-card h4{font-size:16px; margin-bottom:8px; color:var(--purple-deep);}
.why-card p{font-size:13px; color:var(--muted);}

.cta-strip{margin:70px 24px 0; padding:50px 40px; border-radius:28px; background:linear-gradient(120deg,var(--purple),var(--purple-deep)); color:#fff; text-align:center;}
.cta-strip h2{font-size:26px; margin-bottom:10px;}
.cta-strip p{opacity:.85; margin-bottom:24px;}

@media(max-width:900px){
  .hero .wrap{flex-direction:column; text-align:center;}
  .hero p{margin-left:auto; margin-right:auto;}
  .btn-row, .trust-row{justify-content:center;}
  .grid4, .grid4-why{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:34px;}
}

/* ===== Product landing page ===== */
.plp .topbar{text-align:center; padding:22px 0; font-size:24px; font-weight:800; color:var(--purple-deep);}
.plp .topbar span{color:var(--coral);}
.plp .hero-inner{padding:20px 0 40px;}
.plp .hero-inner .wrap{display:flex; gap:44px; align-items:center;}
.plp .hero-copy2{flex:1; min-width:280px;}
.plp .hero-copy2 h1{font-size:34px; line-height:1.25; color:var(--purple-deep); margin-bottom:12px;}
.plp .hero-copy2 p.sub{color:var(--muted); font-size:15.5px; margin-bottom:22px;}
.plp .badges{display:flex; gap:12px; flex-wrap:wrap;}
.plp .badge{background:#fff; border:1px solid #eee3ff; border-radius:14px; padding:12px 16px; font-size:13px; font-weight:600; color:var(--purple-deep); text-align:center; min-width:110px;}
.plp .badge .big{display:block; font-size:20px; margin-bottom:4px;}
.plp .hero-img{flex:1; min-width:280px; aspect-ratio:4/3; border-radius:24px; background:linear-gradient(135deg,#FFE3AE,#FFD1DC); display:flex; align-items:center; justify-content:center; font-size:80px; box-shadow:0 20px 40px -20px rgba(75,46,158,.35); overflow:hidden;}
.plp .hero-img img{width:100%; height:100%; object-fit:cover;}
.plp .cta-band{text-align:center; padding:10px 0 50px;}
.plp .btn-cta{display:inline-flex; align-items:center; gap:10px; padding:16px 36px; border-radius:999px; background:linear-gradient(135deg,var(--coral),var(--orange)); color:#fff; font-weight:800; font-size:17px; box-shadow:0 14px 26px -12px rgba(255,111,97,.6); border:none; cursor:pointer;}
.plp .cta-note{margin-top:10px; font-size:13px; color:var(--muted);}
.plp .tags4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.plp .tag{background:#fff; border:1px solid #eee3ff; border-radius:16px; padding:18px; text-align:center;}
.plp .tag .ic{font-size:26px; margin-bottom:8px;}
.plp .tag h4{font-size:14.5px; color:var(--purple-deep); margin-bottom:4px;}
.plp .tag p{font-size:12px; color:var(--muted);}
.plp .why-block{background:#F3EEFF; border-radius:28px; padding:44px 34px; display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap;}
.plp .why-img{flex:1; min-width:260px; aspect-ratio:1/1; border-radius:20px; background:linear-gradient(135deg,#4FC1E9,#4B2E9E); display:flex; align-items:center; justify-content:center; font-size:70px; color:#fff; overflow:hidden;}
.plp .why-img img{width:100%; height:100%; object-fit:cover;}
.plp .why-list{flex:1.3; min-width:280px;}
.plp .why-list h3{font-size:21px; color:var(--purple-deep); margin-bottom:18px;}
.plp .check-item{display:flex; gap:12px; margin-bottom:16px;}
.plp .check-ic{width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;}
.plp .check-item h5{font-size:15px; color:var(--ink); margin-bottom:3px;}
.plp .check-item p{font-size:13px; color:var(--muted);}
.plp .reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.plp .review-card{background:#fff; border:1px solid #eee3ff; border-radius:16px; padding:20px;}
.plp .review-card .stars{color:var(--yellow); margin-bottom:8px;}
.plp .review-card p{font-size:13.5px; color:var(--ink); margin-bottom:10px;}
.plp .review-card .name{font-size:12.5px; color:var(--muted); font-weight:600;}
.plp .order-section{background:#fff; border:1px solid #eee3ff; border-radius:28px; padding:40px; margin-top:20px;}
.plp .order-sub{text-align:center; color:var(--muted); margin-bottom:30px; font-size:14px;}
.plp .pkg-options{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px;}
.plp .pkg{border:2px solid #eee3ff; border-radius:16px; padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer;}
.plp .pkg.active{border-color:var(--coral); background:#FFF3F0;}
.plp .pkg-thumb{width:56px; height:56px; border-radius:12px; background:linear-gradient(135deg,#FFE3AE,#FFD1DC); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; overflow:hidden;}
.plp .pkg-thumb img{width:100%; height:100%; object-fit:cover;}
.plp .pkg-info h5{font-size:14px; margin-bottom:4px;}
.plp .pkg-info .p{color:var(--coral); font-weight:800; font-size:15px;}
.plp .order-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px;}
.plp label{display:block; font-size:13.5px; font-weight:600; margin:14px 0 6px; color:var(--ink);}
.plp input[type=text], .plp input[type=tel], .plp textarea{width:100%; padding:12px 14px; border:1px solid #e3ddf5; border-radius:10px; font-family:inherit; font-size:14px;}
.plp .summary{background:#FBF9FF; border-radius:16px; padding:22px;}
.plp .sum-row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--muted);}
.plp .sum-total{display:flex; justify-content:space-between; font-size:16px; font-weight:800; color:var(--purple-deep); border-top:1px dashed #ddd; padding-top:12px; margin-top:8px;}
.plp .cod-note{background:#EAFBF2; color:#1f7a4f; font-size:12.5px; padding:12px 14px; border-radius:10px; margin:16px 0;}
.plp .btn-submit{width:100%; padding:15px; border:none; border-radius:999px; background:var(--green); color:#fff; font-weight:800; font-size:16px; cursor:pointer; margin-top:8px;}

@media(max-width:860px){
  .plp .hero-inner .wrap{flex-direction:column;}
  .plp .tags4{grid-template-columns:repeat(2,1fr);}
  .plp .why-block{flex-direction:column;}
  .plp .reviews{grid-template-columns:1fr;}
  .plp .order-grid{grid-template-columns:1fr;}
  .plp .pkg-options{grid-template-columns:1fr;}
}

/* ===== Footer (all pages) ===== */
.site-footer{background:var(--purple-deep); color:#fff; margin-top:70px; padding-top:60px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:40px;}
.site-footer .brand{color:#fff;}
.site-footer .brand span{color:var(--yellow);}
.footer-desc{color:#cabdf0; font-size:13.5px; margin:14px 0 18px;}
.socials{display:flex; gap:10px;}
.socials a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:14px;}
.fcol h4{font-size:15px; margin-bottom:16px; color:var(--yellow);}
.fcol a, .fcol p{display:block; color:#cabdf0; font-size:13.5px; margin-bottom:10px;}
.copyright{border-top:1px solid rgba(255,255,255,.12); padding:18px 0; text-align:center; font-size:12.5px; color:#a99ad9;}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }