/*
Theme Name: PureNit Natural Insect Hair Oil Landing Page
Theme URI: https://example.com
Author: Custom
Author URI: https://example.com
Description: মোবাইল-ফার্স্ট বাংলা প্রোডাক্ট ল্যান্ডিং পেজ থিম (PureNit Head Lice Spray — Natural Insect Hair Oil ডিজাইন)। wp-admin এর "থিম সেটিং" পেজ থেকে সব ছবি ও টেক্সট পরিবর্তনযোগ্য। WooCommerce এর checkout শর্টকোড দিয়ে একই পেজে অর্ডার নেওয়া হয়।
Version: 3.5
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: pn
*/

/* =========================================================
   BASE / RESET (mobile-first)
========================================================= */
:root{
  --primary:#1B5E20;
  --secondary:#4CAF50;
  --gold:#D4AF37;
  --bg:#F8FAF7;
  --text:#222222;
  --text-soft:#666666;
  --cta:#22C55E;
  --cta-hover:#16A34A;
  --line:#e5ece5;
  --radius:16px;
  --shadow:0 10px 26px rgba(27,94,32,.10);
  --container:1200px;
  --content:1140px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Hind Siliguri', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:15px;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Hind Siliguri', sans-serif; font-weight:800; color:var(--primary); }
img{ max-width:100%; display:block; height:auto; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
.wrap{ max-width:var(--content); margin:0 auto; padding:0 18px; }
section{ padding:44px 0; }
.section-title{ position:relative; text-align:center; font-size:23px; color:var(--primary); margin-bottom:26px; padding-bottom:16px; font-weight:800; }
.section-title::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:0; height:3px; border-radius:3px; background:var(--secondary);
  animation:pnUnderline .9s ease .2s forwards;
}
@keyframes pnUnderline{ to{ width:56px; } }
.ph-box{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#eef6ee; color:var(--text-soft); border:1px dashed #bcd8bc;
  border-radius:var(--radius); font-size:12px; padding:14px; min-height:80px;
}
.pn-icon{ width:1em; height:1em; display:inline-block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 26px; border-radius:15px; font-weight:700;
  font-size:17px; border:none; cursor:pointer; font-family:'Hind Siliguri',sans-serif;
}
.btn-order{ background:var(--cta); color:#fff; box-shadow:0 8px 18px rgba(34,197,94,.4); animation:pnPulse 3s ease-in-out infinite; transition:background .2s ease, transform .2s ease; }
.btn-order:hover{ background:var(--cta-hover); transform:translateY(-2px); animation-play-state:paused; }
.btn-order .pn-icon{ width:20px; height:20px; }
.btn-lg{ width:100%; padding:18px 26px; font-size:18px; }

/* reveal-on-scroll (কার্ড/সেকশন ফেড-আপ) */
.pn-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.pn-reveal.pn-in{ opacity:1; transform:translateY(0); }

/* CTA বাটন প্রতি ৩ সেকেন্ডে হালকা "পালস" — চোখে পড়ার জন্য */
@keyframes pnPulse{
  0%,100%{ box-shadow:0 8px 18px rgba(34,197,94,.4); }
  50%{ box-shadow:0 12px 28px rgba(34,197,94,.7); }
}
@keyframes pnFadeUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-left{ animation:pnFadeUp .7s ease both; }
.hero-right{ display:none; animation:pnFadeUp .7s ease .15s both; }

/* =========================================================
   HEADER
========================================================= */
.site-header{ padding:16px 0; background:var(--bg); }
.header-row{ display:flex; align-items:center; }
.logo-wrap{ display:flex; align-items:center; gap:10px; }
.logo-icon, .logo-icon-img{ width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; padding:9px; }
.logo-icon-img{ padding:0; object-fit:contain; background:transparent; }
.logo-text{ display:flex; flex-direction:column; line-height:1.2; }
.logo-name{ font-family:'Baloo Da 2',sans-serif; font-size:21px; font-weight:800; color:var(--primary); letter-spacing:.5px; }
.logo-tag{ font-size:9px; font-weight:600; color:var(--text-soft); letter-spacing:1.2px; }

/* =========================================================
   HERO
========================================================= */
.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#eef6ee 0%,var(--bg) 70%); padding:20px 0 16px; }
.hero-grid{ position:relative; z-index:2; display:flex; flex-direction:column; gap:26px; }

/* ডেস্কটপ-অনলি ফুল-সেকশন ব্যাকগ্রাউন্ড ছবি (মোবাইলে সম্পূর্ণ লুকানো — নিচের
   RESPONSIVE ব্লকে দেখুন) */
.hero-bg-layer{ display:none; }
.hero-bg-layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:right center; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--bg) 0%, var(--bg) 40%, rgba(248,250,247,.7) 52%, rgba(248,250,247,0) 68%);
}

.hero-left h1{ font-family:'Baloo Da 2',sans-serif; font-size:32px; line-height:1.2; color:var(--primary); margin-bottom:12px; }
.hero-sub{ color:var(--text-soft); font-size:15px; margin-bottom:18px; }

.hero-badges{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 10px; margin-bottom:22px; }
.hero-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  transition:transform .25s ease;
}
.hero-badge:hover{ transform:translateY(-3px); }
.hero-badge-ic{ width:46px; height:46px; padding:11px; border-radius:50%; border:1.5px solid var(--secondary); color:var(--primary); }
.hero-badge-ic svg{ width:100%; height:100%; }
.hero-badge span:last-child{ font-size:12.5px; font-weight:700; color:var(--text); line-height:1.25; }

.price-cta-card{
  position:relative; overflow:hidden; background:#fff; border:1.5px solid var(--secondary);
  border-radius:16px; margin-bottom:14px; isolation:isolate;
}
.price-box{
  position:relative; overflow:hidden; display:flex; align-items:baseline; gap:10px; padding:16px 18px;
}
.price-box::before{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(76,175,80,.35), transparent);
  animation:pnShimmer 3.4s ease-in-out infinite;
}
@keyframes pnShimmer{
  0%{ left:-60%; }
  55%{ left:130%; }
  100%{ left:130%; }
}
.price-size{ font-size:13px; font-weight:700; color:var(--text-soft); }
.price-line{ display:flex; align-items:baseline; gap:4px; }
.price-new{ font-size:32px; font-weight:800; color:var(--primary); }
.price-unit{ font-size:15px; font-weight:700; color:var(--primary); }
.price-old{ font-size:16px; text-decoration:line-through; color:#DC2626; }
.price-cta-btn{
  width:100%; border-radius:0 0 14px 14px; animation:none; box-shadow:none;
}
.price-cta-btn:hover{ animation:none; }

.delivery-note{ display:flex; align-items:center; gap:8px; color:var(--text-soft); font-size:13.5px; font-weight:600; margin-bottom:16px; }
.delivery-note .pn-icon{ width:18px; height:18px; color:var(--secondary); flex:none; }


/* =========================================================
   সমস্যা সেকশন
========================================================= */
.problems{ background:var(--bg); }
.problem-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.problem-card{
  text-align:center; background:#fff; border-radius:var(--radius); padding:18px 12px;
  box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.problem-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(27,94,32,.16); }
.problem-img{ border-radius:12px; overflow:hidden; aspect-ratio:1/1; margin-bottom:10px; }
.problem-img img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .35s ease; }
.problem-card:hover .problem-img img{ transform:scale(1.06); }
.problem-cap{ font-size:14px; font-weight:700; color:var(--text); }

/* =========================================================
   সমস্যা সেকশন (বিস্তারিত ইনফোগ্রাফিক)
========================================================= */
.issues{ position:relative; overflow:hidden; background:linear-gradient(180deg,#FCFCF8 0%,#F8FDF8 100%); }
.issues-corner{ position:absolute; width:70px; height:70px; color:var(--secondary); opacity:.25; pointer-events:none; }
.issues-corner-tl{ top:10px; left:6px; transform:rotate(-15deg); }
.issues-corner-tr{ top:10px; right:6px; transform:rotate(105deg) scaleX(-1); }
.issues-corner-br{ bottom:10px; right:6px; width:44px; height:44px; transform:rotate(20deg); }

.issues-top-row{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; text-align:center; margin-bottom:18px; }
.issues-circle{
  width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none;
  box-shadow:0 8px 25px rgba(0,0,0,.12); border:3px solid #fff;
}
.issues-circle img{ width:100%; height:100%; object-fit:cover; }
.issues-circle .ph-box{ width:100%; height:100%; border-radius:50%; font-size:7px; padding:2px; }
.issues-title{ flex:1; font-size:24px; line-height:1.3; color:#111111; }

.issues-divider{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:28px; }
.issues-divider-line{ width:60px; height:3px; background:var(--secondary); border-radius:3px; }
.issues-divider-ic{ width:28px; height:28px; color:var(--secondary); flex:none; }

.issues-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:28px; }
.issue-card{
  display:flex; flex-direction:row-reverse; background:#fff; border:1px solid #E8F0E8; border-radius:20px; overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease;
}
.issue-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.1); }
.issue-card-media{ flex:0 0 36%; }
.issue-card-media img{ width:100%; height:100%; min-height:100px; object-fit:cover; }
.issue-card-media .ph-box{ height:100%; border-radius:0; padding:6px; font-size:9px; }
.issue-card-body{ position:relative; flex:1; padding:10px 8px; }
.issue-badge{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--primary); color:#fff; font-weight:800; font-size:10px; margin-bottom:6px;
}
.issue-title{ font-size:12px; font-weight:800; color:var(--primary); margin-bottom:5px; line-height:1.25; }
.issue-title-line{ display:block; width:26px; height:2px; background:var(--secondary); border-radius:3px; margin-bottom:6px; }
.issue-desc{ font-size:10px; color:#333333; line-height:1.4; margin-bottom:6px; }
.issue-ic{ display:inline-flex; width:22px; height:22px; padding:5px; border-radius:50%; border:1.5px solid var(--secondary); color:var(--primary); }
.issue-ic svg{ width:100%; height:100%; }

.issues-strip{
  display:flex; align-items:center; justify-content:center; gap:12px; text-align:center;
  background:#F5FFF5; border:2px solid #DDEEDD; border-radius:60px; padding:16px 20px;
}
.issues-strip .pn-icon{ width:26px; height:26px; color:var(--secondary); flex:none; }
.issues-strip span{ font-size:15px; font-weight:600; color:var(--primary); }

/* =========================================================
   কেন ব্যবহার করবেন
========================================================= */
.why-choose{ background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); }
.why-choose .section-title{ color:#fff; }
.why-choose .section-title::after{ background:#fff; }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.why-card{
  background:rgba(255,255,255,.14); border-radius:var(--radius); padding:22px 14px; text-align:center;
  transition:transform .25s ease, background .25s ease;
}
.why-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.22); }
.why-ic{ display:inline-flex; width:46px; height:46px; padding:11px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; margin-bottom:10px; animation:pnIconBreathe 2.6s ease-in-out infinite; }
.why-ic svg{ width:100%; height:100%; }
.why-card:nth-child(even) .why-ic{ animation-delay:.5s; }
.why-card:nth-child(3n) .why-ic{ animation-delay:1s; }
.why-card p{ font-size:14px; font-weight:700; color:#fff; }

/* মাঝপথের CTA */
.mid-cta-wrap{ text-align:center; padding:30px 18px; }

/* =========================================================
   উপাদান
========================================================= */
.ingredients{ background:#FFFDF8; }
.ingredients-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.ingredient-card{
  text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 12px; box-shadow:var(--shadow);
}
.ingredient-ic{ display:inline-flex; width:44px; height:44px; padding:10px; border-radius:50%; background:#f6f1df; color:var(--gold); margin-bottom:10px; animation:pnLeafSway 3s ease-in-out infinite; transform-origin:bottom center; }
.ingredient-ic svg{ width:100%; height:100%; }
.ingredient-card:nth-child(even) .ingredient-ic{ animation-delay:.4s; }
@keyframes pnLeafSway{
  0%,100%{ transform:rotate(-8deg); }
  50%{ transform:rotate(8deg); }
}
.ingredient-card p{ font-size:14.5px; font-weight:700; color:var(--primary); }

/* =========================================================
   আমাদের সার্টিফিকেট
========================================================= */
.certificate{ background:#FFFDF8; }
.certificate-media{ max-width:420px; margin:0 auto; background:#fff; padding:10px; border-radius:var(--radius); box-shadow:var(--shadow); }
.certificate-media img{ width:100%; height:auto; display:block; border-radius:calc(var(--radius) - 6px); }

/* =========================================================
   ব্যবহারের নিয়ম (timeline)
========================================================= */
.howto{ background:var(--bg); }
.howto-timeline{ display:flex; flex-direction:column; gap:18px; max-width:520px; margin:0 auto; position:relative; }
.howto-timeline::before{
  content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--line);
}
.howto-step{ display:flex; align-items:flex-start; gap:16px; position:relative; }
.howto-num{
  flex:none; width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; z-index:1;
  animation:pnRingPulse 2.4s ease-in-out infinite;
}
.howto-step:nth-child(even) .howto-num{ animation-delay:.5s; }
@keyframes pnRingPulse{
  0%{ box-shadow:0 0 0 0 rgba(27,94,32,.4); }
  70%{ box-shadow:0 0 0 10px rgba(27,94,32,0); }
  100%{ box-shadow:0 0 0 0 rgba(27,94,32,0); }
}
.howto-step p{ padding-top:8px; font-size:20px; font-weight:600; color:var(--text); }

/* =========================================================
   ট্রাস্ট সেকশন
========================================================= */
.trust{ background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); }
.trust .section-title{ color:#fff; }
.trust .section-title::after{ background:#fff; }
.trust-grid{ display:flex; flex-direction:column; gap:12px; max-width:640px; margin:0 auto; }
.trust-item{
  display:flex; align-items:center; gap:12px; color:#fff; font-size:15px; font-weight:700;
  background:rgba(255,255,255,.12); border-radius:12px; padding:14px 16px;
}
.trust-ic{ width:24px; height:24px; flex:none; color:var(--gold); animation:pnBounceSmall 2.4s ease-in-out infinite; }
.trust-ic svg{ width:100%; height:100%; }
.trust-item:nth-child(even) .trust-ic{ animation-delay:.4s; }
@keyframes pnBounceSmall{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
@keyframes pnIconBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.14); }
}

/* =========================================================
   কাস্টমার রিভিউ
========================================================= */
.reviews{ background:linear-gradient(180deg,#F2FBF3 0%,var(--bg) 100%); }
.reviews-grid{ display:flex; flex-direction:column; gap:16px; }
.review-card{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 20px; border-top:3px solid var(--secondary);
}
.review-quote-ic{ position:absolute; top:10px; right:14px; width:38px; height:38px; color:#eef6ee; z-index:0; }
.review-top, .review-stars, .review-text{ position:relative; z-index:1; }
.review-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.review-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--secondary); padding:2px; }
.review-avatar-ic{ display:flex; align-items:center; justify-content:center; background:#eef6ee; color:var(--primary); padding:12px; }
.review-name{ font-size:15px; font-weight:700; color:var(--primary); }
.review-area{ font-size:12px; color:var(--text-soft); }
.review-stars{ display:flex; align-items:center; gap:2px; margin-bottom:8px; }
.pn-star{ width:15px; height:15px; fill:#e2e8e2; }
.pn-star.filled{ fill:#FFC107; }
.review-card.pn-in .pn-star{ animation:pnStarPop .5s ease both; }
.review-card.pn-in .pn-star:nth-child(1){ animation-delay:.05s; }
.review-card.pn-in .pn-star:nth-child(2){ animation-delay:.15s; }
.review-card.pn-in .pn-star:nth-child(3){ animation-delay:.25s; }
.review-card.pn-in .pn-star:nth-child(4){ animation-delay:.35s; }
.review-card.pn-in .pn-star:nth-child(5){ animation-delay:.45s; }
@keyframes pnStarPop{
  0%{ transform:scale(0); opacity:0; }
  60%{ transform:scale(1.3); opacity:1; }
  100%{ transform:scale(1); }
}
.review-count{ font-size:12px; color:var(--text-soft); margin-right:4px; }
.review-text{ font-size:14.5px; color:var(--text); }

/* =========================================================
   অফার সেকশন
========================================================= */
.offer{ background:linear-gradient(135deg,#DC2626 0%,#F97316 100%); color:#fff; }
.section-title-offer{ text-align:center; color:#fff; font-size:22px; margin-bottom:22px; display:flex; align-items:center; justify-content:center; gap:8px; }
.section-title-offer .pn-icon{ width:24px; height:24px; display:inline-flex; animation:pnFireFlicker 1.4s ease-in-out infinite; transform-origin:center bottom; }
@keyframes pnFireFlicker{
  0%,100%{ transform:scale(1) rotate(0deg); }
  25%{ transform:scale(1.1) rotate(-5deg); }
  50%{ transform:scale(0.95) rotate(4deg); }
  75%{ transform:scale(1.06) rotate(-3deg); }
}
.offer-grid{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.offer-price-box, .offer-contact-box, .offer-features-box{
  background:rgba(255,255,255,.15); border-radius:14px; padding:16px; text-align:center;
}
.offer-size{ display:block; font-size:13px; opacity:.9; margin-bottom:4px; }
.offer-price{ font-size:28px; font-weight:800; animation:pnTextGlow 2s ease-in-out infinite; }
@keyframes pnTextGlow{
  0%,100%{ text-shadow:0 0 0 rgba(255,255,255,0); }
  50%{ text-shadow:0 0 14px rgba(255,255,255,.65); }
}
.offer-contact-ic{ display:inline-flex; width:20px; height:20px; margin-bottom:4px; }
.offer-contact-num{ display:block; font-size:20px; font-weight:800; }
.offer-contact-note{ display:block; font-size:12px; opacity:.9; }
.offer-features-box{ display:flex; flex-direction:column; gap:10px; text-align:right; }
.offer-feature{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.offer-feature .pn-icon{ width:18px; height:18px; flex:none; }
.offer-cta{ display:flex; width:100%; background:#fff; color:#DC2626 !important; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.offer-cta:hover{ background:#f3f4f6; }

/* মোবাইলে (৯০০px এর নিচে) উপরের grid/cta লুকিয়ে প্যাকেজ কার্ড-রো দেখানো হয়;
   ডেস্কটপে (৯০০px+) উল্টো — নিচের রেসপন্সিভ ব্লকে দেখুন */
.offer-package-row{ display:flex; gap:14px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.offer-package-card{
  flex:0 0 47%; scroll-snap-align:start; background:rgba(0,0,0,.18); border:2px solid var(--gold);
  border-radius:16px; padding:14px; text-align:center; cursor:pointer;
}
.offer-package-card.selected{ border-color:#fff; box-shadow:0 0 0 2px var(--gold) inset; }
.offer-package-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; margin-bottom:10px; background:#fff; }
.offer-package-name{ color:#fff; font-weight:800; font-size:14.5px; line-height:1.3; margin-bottom:6px; min-height:38px; }
.offer-package-price-new{ color:var(--gold); font-size:20px; font-weight:800; }
.offer-package-price-old{ color:rgba(255,255,255,.6); font-size:12px; text-decoration:line-through; }
.offer-package-free{ font-size:11.5px; color:rgba(255,255,255,.85); margin:6px 0 10px; }
.offer-package-card .btn-order{ width:100%; padding:10px; font-size:13.5px; }
.offer-disclaimer{ text-align:center; font-size:11.5px; color:rgba(255,255,255,.8); margin-top:6px; }

@media (max-width:899px){
  .offer-has-packages .offer-grid, .offer-has-packages .offer-cta{ display:none; }
}
@media (min-width:900px){
  .offer-package-row, .offer-disclaimer{ display:none; }
}

/* =========================================================
   FAQ (accordion)
========================================================= */
.faq{ background:var(--bg); }
.faq-list{ display:flex; flex-direction:column; gap:10px; max-width:720px; margin:0 auto; }
.pn-faq-item{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.pn-faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:none; border:none; cursor:pointer; padding:16px 18px; font-family:inherit;
  font-size:15px; font-weight:700; color:var(--primary); text-align:right;
}
.pn-faq-q{ transition:background .2s ease; }
.pn-faq-q:hover{ background:#f7fdf7; }
.pn-faq-arrow{ width:18px; height:18px; flex:none; transition:transform .25s ease; color:var(--secondary); }
.pn-faq-item.open .pn-faq-arrow{ transform:rotate(180deg); }
.pn-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.pn-faq-item.open .pn-faq-a{ max-height:240px; }
.pn-faq-a p{ padding:0 18px 16px; font-size:14px; color:var(--text-soft); line-height:1.7; }

/* =========================================================
   অর্ডার ফর্ম
========================================================= */
.order-section{ background:#F3FDF4; }
/* থিম সেটিং → "মোবাইল ভার্সনে দেখান" আনচেক করলে শুধু মোবাইলে (৯০০px এর নিচে) এই সেকশন
   লুকানো থাকে, ডেস্কটপে (৯০০px+) স্বাভাবিকভাবেই দেখা যায় — নিচের ডেস্কটপ মিডিয়া কুয়েরিতে
   কোনো ওভাররাইড দরকার নেই কারণ এই রুলটা শুধু max-width:899px এর জন্য প্রযোজ্য। */
@media (max-width:899px){
  .pn-hide-mobile{ display:none !important; }
  /* মোবাইলে "প্রোডাক্ট ও বিলিং"-এর ব্র্যান্ড/হেডলাইন/বর্ণনা/ফিচার-ব্যাজ ও ছোট ট্রাস্ট-রো
     লুকানো থাকে — শুধু প্যাকেজ কার্ড আর অর্ডার ফর্মটাই দেখা যায়; ডেস্কটপে (৯০০px+) এগুলো থাকে */
  .order-brand-row,
  .order-badge-pill,
  .order-left-heading,
  .order-left-desc,
  .order-left-badges,
  .order-left-trust-row{ display:none !important; }
  /* মোবাইলে হিরোর নিচে প্রোডাক্ট ছবির বক্সটা সম্পূর্ণ লুকানো (উপরে .hero-right{display:none}
     এ করা), তাই হিরো ও পরের সেকশনের মাঝের বাড়তি ফাঁকা জায়গা কমাতে টপ প্যাডিং টাইট করা */
  .issues{ padding-top:16px; }
}
.order-grid{ display:flex; flex-direction:column; gap:18px; }
.order-info-col{
  background:#fff; border:2px solid var(--secondary); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px;
}
/* বাম কলাম — ব্র্যান্ড রো */
.order-brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.order-brand-ic{ width:40px; height:40px; padding:9px; border-radius:50%; background:#eef6ee; color:var(--primary); flex:none; }
.order-brand-ic svg{ width:100%; height:100%; }
.order-brand-name{ font-family:'Baloo Da 2',sans-serif; font-size:19px; font-weight:800; color:var(--primary); line-height:1.2; }
.order-brand-tag{ font-size:10px; font-weight:700; color:var(--text-soft); letter-spacing:1px; }

.order-badge-pill{
  display:inline-block; background:#eef6ee; color:var(--primary); font-size:11.5px; font-weight:700;
  padding:6px 12px; border-radius:20px; margin-bottom:12px; letter-spacing:.3px;
}
.order-left-heading{ font-size:22px; line-height:1.3; color:var(--primary); margin-bottom:10px; }
.order-left-desc{ font-size:14px; color:var(--text-soft); line-height:1.8; margin-bottom:18px; }

.order-left-badges{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
.order-left-badge{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.order-left-badge-ic{ width:40px; height:40px; padding:10px; border-radius:50%; background:#eef6ee; color:var(--primary); }
.order-left-badge-ic svg{ width:100%; height:100%; }
.order-left-badge span:last-child{ font-size:12px; font-weight:700; color:var(--text); line-height:1.25; }

/* প্রোডাক্ট ছবি — শুধু ডেস্কটপে (৯০০px+) টেক্সটের পাশে পাশে দেখানো হয়, মোবাইলে সম্পূর্ণ লুকানো */
.order-left-media{ display:none; }
@media (min-width:900px){
  .order-left-top{ display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:stretch; }
  .order-left-media{ display:block; align-self:stretch; border-radius:18px; overflow:hidden; }
  .order-left-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
  .order-left-media .ph-box{ height:100%; border-radius:0; }
}

/* প্যাকেজ নির্বাচন */
.package-picker{ margin-bottom:22px; }
.package-heading{
  display:flex; align-items:center; gap:12px; text-align:center; font-size:14px; font-weight:700;
  color:var(--primary); margin-bottom:14px;
}
.package-heading::before, .package-heading::after{ content:''; flex:1; height:1px; background:var(--line); }
.package-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.package-card{
  position:relative; background:#fff; border:2px solid var(--line); border-radius:14px; padding:16px 10px;
  text-align:center; cursor:pointer; font-family:inherit; transition:border-color .2s ease, transform .2s ease;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.package-card:hover{ transform:translateY(-2px); }
.package-card.selected{ border-color:var(--secondary); box-shadow:0 6px 16px rgba(76,175,80,.18); }
.package-size-badge{
  position:absolute; top:-11px; left:12px; background:var(--secondary); color:#fff; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px;
}
.package-size-badge-gold{ background:var(--gold); }
.package-selected-badge{ position:absolute; top:8px; right:8px; width:20px; height:20px; color:var(--line); opacity:0; transition:opacity .2s ease, color .2s ease; }
.package-card.selected .package-selected-badge{ opacity:1; color:var(--secondary); }
.package-card-img{ width:100%; aspect-ratio:1/1; max-width:110px; border-radius:10px; overflow:hidden; margin-top:6px; }
.package-card-img img{ width:100%; height:100%; object-fit:cover; }
.package-label{ font-size:14px; font-weight:700; color:var(--text); margin-top:10px; }
.package-price-row{ display:flex; align-items:baseline; gap:8px; }
.package-price-new{ font-size:22px; font-weight:800; color:var(--primary); }
.package-price-old{ font-size:13px; text-decoration:line-through; color:var(--text-soft); }
.package-sub-badge{ font-size:10.5px; font-weight:600; color:var(--text-soft); }
.package-card-btn{ width:100%; margin-top:10px; padding:9px; font-size:13px; }

/* আলাদা "অর্ডার করুন" বাটন শুধু মোবাইলে দেখানো হয় — ডেস্কটপে অর্ডার ডান পাশের
   চেকআউট ফর্ম থেকেই হয়। প্রোডাক্ট ছবি এখন মোবাইল ও ডেস্কটপ দুই জায়গাতেই দেখা যাবে। */
@media (min-width:900px){
  .package-card-btn{ display:none; }
}

.order-left-trust-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.order-left-trust-item{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text); }
.order-left-trust-ic{ width:30px; height:30px; padding:7px; border-radius:50%; background:#eef6ee; color:var(--primary); flex:none; }
.order-left-trust-ic svg{ width:100%; height:100%; }

.order-form-col{ background:#fff; border:2px solid var(--secondary); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.col-heading{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:19px; margin-bottom:14px; text-align:center; color:var(--primary); }
.col-heading-ic{ width:22px; height:22px; color:var(--secondary); }
.col-heading-ic svg{ width:100%; height:100%; }

/* =========================================================
   ফ্লোটিং বাটন
========================================================= */
.pn-floating-btns{ position:fixed; right:16px; bottom:88px; display:flex; flex-direction:column; gap:12px; z-index:60; }
.pn-float-btn{
  position:relative;
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.25); transition:transform .2s ease;
}
.pn-float-btn:hover{ transform:scale(1.08); }
.pn-float-btn::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.85);
  opacity:.8; animation:pnFloatRing 2.4s ease-out infinite; pointer-events:none;
}
.pn-float-btn .pn-icon{ width:26px; height:26px; }
.pn-float-whatsapp{ background:#25D366; }
.pn-float-call{ background:var(--primary); }
.pn-float-call::after{ animation-delay:.6s; }
@keyframes pnFloatRing{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.7); opacity:0; }
}

/* =========================================================
   মোবাইল স্টিকি অর্ডার বার
========================================================= */
.pn-sticky-order{
  position:fixed; left:0; right:0; bottom:0; z-index:59; background:#fff; padding:10px 14px;
  box-shadow:0 -6px 18px rgba(0,0,0,.12); transform:translateY(100%); transition:transform .3s ease;
}
.pn-sticky-order.pn-show{ transform:translateY(0); }
.pn-sticky-order .btn-order{ width:100%; animation:none; }

/* thank-you পেজের অর্ডার-ওভারভিউ থেকে অর্ডার নাম্বার লুকানো */
.woocommerce-order-overview__order.order{ display:none !important; }

/* =========================================================
   RESPONSIVE — TABLET & DESKTOP
========================================================= */
@media (min-width:640px){
  .problem-grid{ grid-template-columns:repeat(3,1fr); }
  .why-grid{ grid-template-columns:repeat(3,1fr); }
  .ingredients-grid{ grid-template-columns:repeat(4,1fr); }
  .hero-badges{ grid-template-columns:repeat(4,1fr); }
  .offer-grid{ flex-direction:row; }
  .offer-price-box, .offer-contact-box, .offer-features-box{ flex:1; }
}

@media (min-width:900px){
  section{ padding:70px 0; }
  .section-title{ font-size:30px; margin-bottom:38px; }
  .pn-floating-btns{ bottom:24px; }
  .pn-sticky-order{ display:none; }

  .hero{ padding:70px 0; min-height:560px; box-sizing:border-box; }
  .hero-bg-layer{ display:block; }
  .hero-grid{ flex-direction:row; align-items:center; gap:50px; width:100%; }
  .hero-left{ flex:1.05; }
  .hero-right{ display:block; flex:1; visibility:hidden; }
  .hero-left h1{ font-size:42px; }
  .hero-sub{ font-size:16px; }

  .problem-grid{ grid-template-columns:repeat(6,1fr); }
  .why-grid{ grid-template-columns:repeat(6,1fr); }

  .issues-top-row{ flex-direction:row; justify-content:center; gap:16px; margin:0 auto 12px; max-width:620px; }
  .issues-circle{ width:80px; height:80px; }
  .issues-title{ font-size:32px; }
  .issues-heading-break{ display:none; }
  .issues-corner{ width:40px; height:40px; }
  .issues-corner-br{ width:26px; height:26px; }
  .issues-divider{ margin-bottom:18px; }
  .issues-divider-line{ width:40px; }
  .issues-divider-ic{ width:20px; height:20px; }
  .issues-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
  .issue-card{ flex-direction:row-reverse; }
  .issue-card-media{ flex:0 0 38%; }
  .issue-card-media img{ min-height:100%; }
  .issue-card-body{ padding:12px 10px; }
  .issue-badge{ width:24px; height:24px; font-size:11px; margin-bottom:6px; }
  .issue-title{ font-size:13px; margin-bottom:5px; line-height:1.25; }
  .issue-title-line{ width:28px; height:2px; margin-bottom:6px; }
  .issue-desc{ font-size:11px; line-height:1.5; margin-bottom:6px; }
  .issue-ic{ width:24px; height:24px; padding:5px; }

  .howto-timeline{ flex-direction:row; max-width:none; }
  .howto-timeline::before{ left:8px; right:8px; top:19px; bottom:auto; width:auto; height:2px; }
  .howto-step{ flex:1; flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .howto-step p{ padding-top:0; }

  .trust-grid{ flex-direction:row; max-width:none; flex-wrap:wrap; }
  .trust-item{ flex:1 1 0; justify-content:center; min-width:180px; }

  .reviews-grid{ flex-direction:row; }
  .review-card{ flex:1; }

  .order-grid{ flex-direction:row; align-items:flex-start; }
  .order-info-col{ flex:1; }
  .order-form-col{ flex:1; position:sticky; top:20px; }
}

@media (min-width:1100px){
  .hero-left h1{ font-size:46px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}