/*
Theme Name: Shiva PolyFab
Theme URI: https://shivapolyfab.com
Author: Shiva PolyFab
Description: Custom theme for Shiva PolyFab — BOPP laminated & non-woven bag manufacturer. Includes built-in SEO title/description control, Open Graph tags, LocalBusiness schema, a no-plugin contact form, and an auto-populating gallery.
Version: 2.0
Requires PHP: 7.4
Text Domain: shiva-polyfab
*/

:root{
  --ink:#0f172a;
  --muted:#5b6478;
  --bg:#f7f8fc;
  --surface:#ffffff;
  --line: rgba(15,23,42,0.08);
  --blue:#2952e3;
  --blue-dark:#1c3aa9;
  --violet:#7c3aed;
  --amber:#f59e0b;
  --coral:#fb5f6b;
  --emerald:#0fb98a;
  --grad-primary: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
  --grad-warm: linear-gradient(135deg, var(--amber) 0%, var(--coral) 100%);
  --shadow-sm: 0 4px 14px rgba(15,23,42,0.06);
  --shadow-lg: 0 30px 60px -20px rgba(41,82,227,0.35);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Segoe UI', system-ui, sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%; display:block;}

/* decorative colour blobs for depth, sit behind content */
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; z-index:0; pointer-events:none;}
.blob.b1{width:340px; height:340px; background:var(--blue); top:-100px; right:-60px;}
.blob.b2{width:280px; height:280px; background:var(--amber); bottom:-80px; left:-60px;}
.blob.b3{width:220px; height:220px; background:var(--emerald); top:40%; right:8%;}

header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 6vw;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:42px; height:42px; border-radius:12px;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-size:15px;
  box-shadow:0 8px 18px -6px rgba(41,82,227,0.6);
  transform:perspective(300px) rotateY(-8deg);
}
.brand-name{font-weight:800; font-size:1.2rem; letter-spacing:0.2px;}
.brand-name span{color:var(--blue);}
.brand-logo-link{display:flex; align-items:center;}
.brand-logo{height:46px; width:auto; display:block;}
nav ul{list-style:none; display:flex; gap:26px;}
nav a{
  font-size:0.88rem; font-weight:700; letter-spacing:0.3px;
  position:relative; padding-bottom:4px; color:var(--muted);
  transition:color .2s ease;
}
nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:3px; border-radius:3px;
  background:var(--grad-primary); transition:width .25s ease;
}
nav a:hover, nav a.current{color:var(--ink);}
nav a:hover::after, nav a.current::after{width:100%;}

#spf-nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
  width:34px; height:34px; border:none; background:transparent; cursor:pointer; padding:0; margin-left:14px;
}
#spf-nav-toggle span{display:block; width:100%; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease, width .25s ease;}
body.spf-nav-open #spf-nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg); width:100%;}
body.spf-nav-open #spf-nav-toggle span:nth-child(2){opacity:0;}
body.spf-nav-open #spf-nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg); width:100%;}

.hero{
  position:relative; z-index:1;
  padding:8vh 6vw 8vh;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:center;
  overflow:hidden;
}
.hero .tag{
  display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:800; letter-spacing:0.5px;
  color:#fff; background:var(--grad-primary);
  padding:7px 16px; border-radius:100px; margin-bottom:20px;
  box-shadow:0 10px 20px -8px rgba(41,82,227,0.5);
}
.hero h1{
  font-size:clamp(2.2rem, 4.5vw, 3.5rem); font-weight:800; line-height:1.14; margin-bottom:20px;
}
.hero h1 em{font-style:normal; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{max-width:520px; color:var(--muted); font-size:1.08rem; margin-bottom:30px;}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  padding:14px 28px; border-radius:10px; font-weight:700; font-size:0.92rem;
  letter-spacing:0.3px; display:inline-block; transition:transform .2s ease, box-shadow .2s ease;
  border:none; cursor:pointer; font-family:inherit;
}
.btn.primary{background:var(--grad-primary); color:#fff; box-shadow:0 14px 26px -10px rgba(41,82,227,0.55);}
.btn.primary:hover{transform:translateY(-3px); box-shadow:0 20px 34px -10px rgba(41,82,227,0.65);}
.btn.ghost{border:1.5px solid var(--line); background:var(--surface); color:var(--ink);}
.btn.ghost:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--blue);}

/* Hero product visual: layered 3D photo stack */
.hero-visual{
  position:relative; z-index:1; height:400px;
  display:flex; align-items:center; justify-content:center;
  perspective:1200px;
}
.hero-visual .stack-img{
  position:absolute; border-radius:20px; overflow:hidden;
  box-shadow:0 40px 70px -20px rgba(15,23,42,0.35);
  transition:transform .4s ease;
}
.hero-visual .stack-img img{width:100%; height:100%; object-fit:cover;}
.hero-visual .stack-img.main{
  width:260px; height:340px; z-index:3;
  transform:rotateY(-10deg) rotateX(4deg) translateZ(40px);
}
.hero-visual .stack-img.side-a{
  width:190px; height:250px; z-index:2; left:6%; top:8%;
  transform:rotateY(14deg) rotateX(2deg) rotate(-6deg);
  opacity:0.9;
}
.hero-visual .stack-img.side-b{
  width:190px; height:250px; z-index:1; right:2%; bottom:2%;
  transform:rotateY(-16deg) rotate(8deg);
  opacity:0.85;
}
.hero-visual:hover .stack-img.main{transform:rotateY(-4deg) rotateX(2deg) translateZ(60px) scale(1.02);}
.hero-visual .badge{
  position:absolute; bottom:-6px; left:-6px; background:var(--surface); color:var(--ink);
  padding:14px 18px; border-radius:14px; font-weight:800; font-size:0.9rem;
  box-shadow:0 16px 30px -10px rgba(15,23,42,0.25); z-index:4;
  transform:translateZ(60px);
}
.hero-visual .badge small{display:block; font-weight:600; color:var(--muted); font-size:0.72rem; margin-top:2px;}

main{position:relative; z-index:1;}
section{position:relative; z-index:1; padding:7vh 6vw;}
.section-head{margin-bottom:44px; max-width:640px;}
.section-head .kicker{
  color:var(--blue); font-weight:800; text-transform:uppercase; font-size:0.78rem; letter-spacing:1.5px;
}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.3rem); margin-top:10px;}
.page-hero{
  padding:7vh 6vw 5vh; position:relative; overflow:hidden;
  background:linear-gradient(180deg, #eef1ff 0%, var(--bg) 100%);
}
.page-hero h1{font-size:clamp(1.9rem, 4vw, 2.9rem); font-weight:800;}
.page-hero p{color:var(--muted); max-width:640px; margin-top:14px; font-size:1.05rem;}

.stats{
  display:flex; gap:18px; flex-wrap:wrap;
}
.stats div{
  flex:1; min-width:150px; padding:26px 20px; text-align:center;
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.stats div:hover{transform:translateY(-6px); box-shadow:0 20px 34px -14px rgba(41,82,227,0.3);}
.stats div:nth-child(1) .stat-num{color:var(--blue);}
.stats div:nth-child(2) .stat-num{color:var(--coral);}
.stats div:nth-child(3) .stat-num{color:var(--emerald);}
.stats div:nth-child(4) .stat-num{color:var(--violet);}
.stats .stat-num{font-size:2rem; font-weight:800; display:block;}
.stats p{font-size:0.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin-top:4px;}

.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  transform-style:preserve-3d;
}
.card:hover{
  transform:perspective(700px) rotateX(3deg) rotateY(-3deg) translateY(-8px);
  box-shadow:var(--shadow-lg); border-color:transparent;
}
.card .icon{
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px;
  background:var(--grad-primary); box-shadow:0 10px 20px -8px rgba(41,82,227,0.5);
}
.card:nth-child(4n+2) .icon{background:var(--grad-warm); box-shadow:0 10px 20px -8px rgba(251,95,107,0.5);}
.card:nth-child(4n+3) .icon{background:linear-gradient(135deg, var(--emerald), #0aa0e0); box-shadow:0 10px 20px -8px rgba(15,185,138,0.5);}
.card:nth-child(4n+4) .icon{background:linear-gradient(135deg, var(--violet), var(--coral)); box-shadow:0 10px 20px -8px rgba(124,58,237,0.5);}
.card .icon img{width:26px; height:26px; object-fit:contain; filter:brightness(0) invert(1);}
.card .icon.icon-img{
  background:var(--surface); border:1px solid var(--line); box-shadow:none; width:64px; height:64px; border-radius:16px;
}
.card .icon.icon-img img{width:36px; height:36px; filter:none;}
.card h3{font-size:1.08rem; margin-bottom:8px;}
.card p{color:var(--muted); font-size:0.93rem;}
.card .price{display:inline-block; margin-top:14px; font-weight:800; color:var(--coral); font-size:1.1rem;}
.featured-card{position:relative; border:2px solid var(--line); padding-top:44px;}
.featured-card .ribbon{
  position:absolute; top:0; left:24px; transform:translateY(-50%);
  background:var(--grad-primary); color:#fff; font-size:0.75rem; font-weight:800;
  padding:6px 16px; border-radius:100px; letter-spacing:0.3px;
  box-shadow:0 8px 18px -6px rgba(41,82,227,0.5);
}
.featured-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}

/* Process steps (Services: How It Works) */
.process-steps{display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap;}
.process-step{flex:1; min-width:200px; text-align:center; padding:0 12px;}
.step-num{
  width:54px; height:54px; border-radius:50%; margin:0 auto 16px;
  border:3px solid var(--blue); color:var(--blue); background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, background .3s ease, color .3s ease;
}
.process-step:nth-child(3) .step-num{border-color:var(--coral); color:var(--coral);}
.process-step:nth-child(5) .step-num{border-color:var(--emerald); color:var(--emerald);}
.process-step:hover .step-num{background:var(--grad-primary); color:#fff; transform:scale(1.08);}
.process-step:nth-child(3):hover .step-num{background:var(--grad-warm);}
.process-step:nth-child(5):hover .step-num{background:linear-gradient(135deg, var(--emerald), #0aa0e0);}
.process-step h3{font-size:1rem; margin-bottom:8px;}
.process-step p{font-size:0.88rem; color:var(--muted);}
.process-arrow{align-self:center; margin-top:12px; font-size:1.6rem; color:var(--line); font-weight:800;}
@media (max-width:820px){
  .process-arrow{display:none;}
  .process-steps{flex-direction:column;}
}

/* Timeline / journey */
.timeline{display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; position:relative; padding-top:8px;}
.tl-track{
  position:absolute; top:36px; left:56px; right:56px; height:4px;
  background:linear-gradient(90deg, var(--blue), var(--violet), var(--coral), var(--amber), var(--emerald));
  border-radius:4px; z-index:0;
}
.tl-item{position:relative; z-index:1; text-align:center;}
.tl-node{
  width:56px; height:56px; border-radius:50%; background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin:0 auto; position:relative; z-index:2; border:4px solid var(--bg);
  box-shadow:0 10px 20px -6px rgba(41,82,227,0.55);
  transition:transform .3s ease;
}
.tl-node::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--blue); opacity:0; transform:scale(0.85);
  animation:tl-pulse 2.6s ease-out infinite;
}
.tl-item:nth-child(2) .tl-node{background:var(--grad-warm); box-shadow:0 10px 20px -6px rgba(251,95,107,0.55);}
.tl-item:nth-child(2) .tl-node::after{border-color:var(--coral); animation-delay:.4s;}
.tl-item:nth-child(3) .tl-node{background:linear-gradient(135deg, var(--violet), var(--blue)); box-shadow:0 10px 20px -6px rgba(124,58,237,0.55);}
.tl-item:nth-child(3) .tl-node::after{border-color:var(--violet); animation-delay:.8s;}
.tl-item:nth-child(4) .tl-node{background:linear-gradient(135deg, var(--emerald), #0aa0e0); box-shadow:0 10px 20px -6px rgba(15,185,138,0.55);}
.tl-item:nth-child(4) .tl-node::after{border-color:var(--emerald); animation-delay:1.2s;}
.tl-item:nth-child(5) .tl-node{background:linear-gradient(135deg, var(--amber), var(--coral)); box-shadow:0 10px 20px -6px rgba(245,158,11,0.55);}
.tl-item:nth-child(5) .tl-node::after{border-color:var(--amber); animation-delay:1.6s;}
@keyframes tl-pulse{
  0%{opacity:0.6; transform:scale(0.85);}
  80%{opacity:0;}
  100%{opacity:0; transform:scale(1.35);}
}
.tl-item:hover .tl-node{transform:scale(1.12) rotate(-6deg);}
.tl-stem{width:2px; height:18px; background:var(--line); margin:0 auto;}
.tl-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 16px;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; text-align:left;
}
.tl-item:hover .tl-card{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.tl-year{display:inline-block; font-size:0.72rem; font-weight:800; color:var(--blue); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px;}
.tl-card h3{font-size:0.98rem; margin-bottom:6px;}
.tl-card p{font-size:0.85rem; color:var(--muted);}
@media (max-width:980px){
  .timeline{grid-template-columns:1fr 1fr;}
  .tl-track{display:none;}
}
@media (max-width:560px){
  .timeline{grid-template-columns:1fr;}
}

.split{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
}
.split .panel{
  background:var(--ink); color:#e8eaf6; border-radius:20px; padding:44px;
  min-height:280px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.split .panel::before{
  content:''; position:absolute; inset:0; background:var(--grad-primary); opacity:0.15;
}
.split .panel h3{color:var(--amber); font-size:0.85rem; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; position:relative;}
.split .panel p{color:#d7dafc; font-size:1.08rem; position:relative;}
.checklist{list-style:none; margin-top:16px;}
.checklist li{padding:9px 0; border-bottom:1px dashed var(--line); font-size:0.95rem; display:flex; align-items:center; gap:10px;}
.checklist li::before{
  content:'✓'; color:#fff; font-weight:800; font-size:0.75rem;
  background:var(--grad-primary); width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.cta{
  background:var(--grad-primary); color:#fff; border-radius:24px; text-align:center;
  padding:64px 6vw; margin:0 6vw 7vh; position:relative; overflow:hidden;
}
.cta::before{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  background:rgba(255,255,255,0.12); top:-120px; right:-80px;
}
.cta::after{
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,0.1); bottom:-100px; left:-60px;
}
.cta h2{font-size:clamp(1.6rem, 3vw, 2.3rem); margin-bottom:14px; position:relative;}
.cta p{opacity:0.92; margin-bottom:26px; position:relative;}
.cta .btn-row{position:relative;}
.cta .btn.ghost{border-color:rgba(255,255,255,0.6); background:transparent; color:#fff;}
.cta .btn.ghost:hover{background:#fff; color:var(--blue); border-color:#fff;}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:22px;}
.gallery-grid figure{
  border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gallery-grid figure:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--blue);
}
.gallery-grid figure a{
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; background:var(--bg); overflow:hidden;
}
.gallery-grid img{width:100%; height:100%; object-fit:contain; transition:transform .35s ease;}
.gallery-grid figure:hover img{transform:scale(1.05);}
.gallery-grid figcaption{padding:12px 16px; font-size:0.85rem; color:var(--muted); font-weight:600;}
.gallery-empty{padding:40px; text-align:center; background:var(--surface); border:1px dashed var(--line); border-radius:16px; color:var(--muted);}

/* Brand showcase (About page) */
.showcase-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.showcase-card{
  border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
}
.showcase-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.showcase-frame{
  height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(160deg, #eef1ff, var(--bg));
}
.showcase-frame img{max-width:80%; max-height:85%; object-fit:contain; transition:transform .4s ease;}
.showcase-card:hover .showcase-frame img{transform:scale(1.06);}
.showcase-label{
  padding:14px 18px; font-weight:700; font-size:0.92rem; text-align:center;
  background:var(--grad-primary); color:#fff;
}
@media (max-width:820px){
  .showcase-grid{grid-template-columns:1fr;}
}

/* Contact */
.contact-wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:50px;}
.contact-info .item{margin-bottom:22px; background:var(--surface); padding:18px 20px; border-radius:14px; box-shadow:var(--shadow-sm);}
.contact-info .item h2{color:var(--blue); text-transform:uppercase; font-size:0.76rem; letter-spacing:1px; margin-bottom:6px;}

/* Contact page: shopping-bag-styled info panel */
.bag-shape{
  position:relative; background:var(--grad-primary); color:#fff;
  border-radius:26px; padding:56px 36px 40px; min-height:420px;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; overflow:visible;
}
.bag-shape::before{
  content:''; position:absolute; inset:0; border-radius:26px; overflow:hidden;
  background:radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18), transparent 55%);
  pointer-events:none;
}
.bag-shape-inner{position:relative; z-index:2; width:100%;}
.bag-handle{
  position:absolute; top:-30px; width:58px; height:52px;
  border:8px solid rgba(255,255,255,0.9); border-bottom:none;
  border-radius:50px 50px 0 0; z-index:1;
}
.bag-handle-a{left:30%;}
.bag-handle-b{left:58%;}
.bag-shape-logo{
  display:block; height:38px; width:auto; margin:0 auto 24px; padding:10px 18px;
  background:#fff; border-radius:100px; box-shadow:0 10px 22px -8px rgba(0,0,0,0.3);
}
.bag-shape .contact-info .item{
  background:rgba(255,255,255,0.14); box-shadow:none; backdrop-filter:blur(6px);
}
.bag-shape .contact-info .item h2{color:#ffe08a;}
.bag-shape .contact-info .item p, .bag-shape .contact-info .item a{color:#fff; font-weight:600;}
@media (max-width:820px){
  .bag-shape{padding:52px 28px 36px;}
}
form.contact-form{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--shadow-sm);}
form.contact-form label{display:block; font-size:0.85rem; font-weight:700; margin-bottom:6px; margin-top:16px;}
form.contact-form label:first-child{margin-top:0;}
form.contact-form input, form.contact-form textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:0.95rem; background:var(--bg); transition:border-color .2s ease;
}
form.contact-form input:focus, form.contact-form textarea:focus{outline:none; border-color:var(--blue);}
form.contact-form textarea{min-height:120px; resize:vertical;}
form.contact-form button{margin-top:20px; width:100%;}
.form-notice{padding:14px 16px; border-radius:10px; margin-bottom:16px; font-size:0.9rem; font-weight:700;}
.form-notice.success{background:rgba(15,185,138,0.12); color:#0a8a68; border:1px solid var(--emerald);}
.form-notice.error{background:rgba(251,95,107,0.12); color:#c8404b; border:1px solid var(--coral);}

/* Blog */
.post-list{display:grid; gap:24px;}
.post-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px;
  display:grid; grid-template-columns:200px 1fr; gap:22px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.post-card .thumb{border-radius:12px; overflow:hidden; height:140px; background:var(--bg);}
.post-card .thumb img{width:100%; height:100%; object-fit:cover;}
.post-card h2{font-size:1.2rem; margin-bottom:8px;}
.post-card .meta{font-size:0.78rem; color:var(--blue); font-weight:700; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:10px;}
.post-card p{color:var(--muted); font-size:0.92rem;}
.single-post{max-width:1180px; margin:0 auto;}
.single-post .post-kicker{
  display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:800;
  letter-spacing:0.6px; text-transform:uppercase; color:#fff; background:var(--grad-primary);
  padding:6px 14px; border-radius:100px; margin-bottom:16px; box-shadow:0 8px 18px -6px rgba(41,82,227,0.5);
}
.single-post .post-kicker.type-trending{background:var(--grad-warm); box-shadow:0 8px 18px -6px rgba(251,95,107,0.5);}
.single-post .post-kicker.type-news{background:linear-gradient(135deg, var(--emerald), #0aa0e0); box-shadow:0 8px 18px -6px rgba(15,185,138,0.5);}
.single-post .post-kicker.type-commercial{background:linear-gradient(135deg, var(--violet), var(--coral)); box-shadow:0 8px 18px -6px rgba(124,58,237,0.5);}
.single-post h1{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; line-height:1.2; margin-bottom:16px;}
.single-post .meta{color:var(--muted); font-size:0.88rem; margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.single-post .featured{
  border-radius:18px; overflow:hidden; margin-bottom:34px; box-shadow:var(--shadow-lg);
  height:440px; background:linear-gradient(160deg, #eef1ff, var(--bg));
  display:flex; align-items:center; justify-content:center;
}
.single-post .featured img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.single-post .entry-content{font-size:1.14rem; line-height:1.85; color:#2b2f3a;}
.single-post .entry-content p{margin-bottom:22px;}
.single-post .entry-content p:first-of-type{
  font-size:1.28rem; font-weight:500; color:var(--ink); line-height:1.65;
}
.single-post .entry-content h2, .single-post .entry-content h3{margin:36px 0 14px; line-height:1.35;}
.single-post .entry-content h3{
  font-size:1.3rem; color:var(--blue); position:relative; padding-left:18px;
}
.single-post .entry-content h3::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:5px; border-radius:4px;
  background:var(--grad-primary);
}
.single-post .entry-content strong{color:var(--ink);}
.single-post .entry-content blockquote{
  margin:30px 0; padding:22px 26px; border-left:4px solid var(--coral); background:#fff5f5;
  border-radius:0 14px 14px 0; font-size:1.15rem; font-style:italic; color:var(--ink); box-shadow:var(--shadow-sm);
}
.post-steps{display:grid; gap:18px; margin:24px 0;}
.post-step{
  display:flex; gap:18px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease;
}
.post-step:hover{transform:translateX(4px); box-shadow:var(--shadow-lg);}
.post-step .post-step-num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem;
  box-shadow:0 8px 16px -6px rgba(41,82,227,0.5);
}
.post-step:nth-child(3n+2) .post-step-num{background:var(--grad-warm); box-shadow:0 8px 16px -6px rgba(251,95,107,0.5);}
.post-step:nth-child(3n+3) .post-step-num{background:linear-gradient(135deg, var(--emerald), #0aa0e0); box-shadow:0 8px 16px -6px rgba(15,185,138,0.5);}
.post-step-body h3{margin:0 0 8px !important; padding-left:0 !important;}
.post-step-body h3::before{display:none;}
.post-step-body p{margin-bottom:0 !important;}

/* Wide "magazine" layout: prose stays readable, tables/visuals go full-width */
.single-post .entry-content > p,
.single-post .entry-content > h3,
.single-post .entry-content > blockquote,
.single-post .entry-content > .post-steps{
  max-width:800px; margin-left:auto; margin-right:auto;
}

/* Comparison tables */
.single-post .entry-content table{
  width:100%; border-collapse:separate; border-spacing:0; margin:32px 0;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg);
}
.single-post .entry-content th{
  background:var(--grad-primary); color:#fff; padding:14px 20px; text-align:left;
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.5px; font-weight:800;
}
.single-post .entry-content td{
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface); font-size:0.98rem;
}
.single-post .entry-content tr:last-child td{border-bottom:none;}
.single-post .entry-content tr:nth-child(even) td{background:var(--bg);}
.single-post .entry-content .cell-icon{font-size:1.2rem; margin-right:8px;}

/* Live CSS 3D bag pair, embedded inside post body — real transforms, not a flat image */
.mini-stack{
  display:flex; gap:60px; justify-content:center; align-items:flex-end; flex-wrap:wrap;
  padding:50px 20px 40px; margin:34px 0; perspective:1000px;
  background:linear-gradient(160deg, #eef1ff, var(--bg)); border-radius:20px;
}
.bag3d-card{text-align:center;}
.bag3d-shape{position:relative; width:170px; height:210px; margin:0 auto; perspective:700px;}
.bag3d-body{
  position:absolute; left:0; right:0; top:34px; bottom:0; border-radius:16px;
  box-shadow:0 32px 50px -16px rgba(15,23,42,0.45),
             inset -18px 0 30px rgba(0,0,0,0.28),
             inset 18px 0 24px rgba(255,255,255,0.2);
  transform:rotateY(-20deg) rotateX(6deg);
  transition:transform .4s ease;
}
.bag3d-card:hover .bag3d-body{transform:rotateY(-9deg) rotateX(2deg) scale(1.04);}
.bag3d-handle{
  position:absolute; top:0; width:52px; height:44px;
  border:8px solid #1c1f2b; border-bottom:none; border-radius:60px 60px 0 0;
  transform:rotateY(-20deg) rotateX(6deg); transition:transform .4s ease;
}
.bag3d-card:hover .bag3d-handle{transform:rotateY(-9deg) rotateX(2deg);}
.bag3d-handle-a{left:22px;}
.bag3d-handle-b{left:96px;}
.bag3d-label{margin-top:16px; font-size:0.85rem; font-weight:700; color:var(--muted);}
.bag3d-blue .bag3d-body{background:linear-gradient(135deg, #4f6bf0, #2952e3);}
.bag3d-warm .bag3d-body{background:linear-gradient(135deg, #fb923c, #fb5f6b);}
.bag3d-emerald .bag3d-body{background:linear-gradient(135deg, #22d3a8, #0aa0e0);}
.bag3d-violet .bag3d-body{background:linear-gradient(135deg, #9d6ef0, #7c3aed);}
.bag3d-rose .bag3d-body{background:linear-gradient(135deg, #f43f7a, #c2185b);}

/* Friendly icon-row callouts ("cartoon-like" accents) */
.icon-row{display:flex; flex-wrap:wrap; gap:14px; margin:26px 0; max-width:800px; margin-left:auto; margin-right:auto;}
.icon-row .icon-chip{
  display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:100px; padding:9px 18px 9px 9px; box-shadow:var(--shadow-sm); font-size:0.9rem; font-weight:700;
}
.icon-row .icon-chip span.emoji{
  width:32px; height:32px; border-radius:50%; background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.icon-row .icon-chip:nth-child(3n+2) span.emoji{background:var(--grad-warm);}
.icon-row .icon-chip:nth-child(3n+3) span.emoji{background:linear-gradient(135deg, var(--emerald), #0aa0e0);}
@media (max-width:700px){
  .mini-stack{gap:24px;}
  .bag3d-shape{width:130px; height:170px;}
  .bag3d-handle-b{left:74px;}
}

footer.site-footer{
  position:relative; z-index:1; background:var(--ink); color:#c6cae0;
  padding:44px 6vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
  font-size:0.85rem;
}
footer.site-footer a:hover{color:#fff;}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;}
  .hero-visual{height:320px; margin-top:20px;}
  .split{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr;}
  .post-card{grid-template-columns:1fr;}

  header.site-header{flex-wrap:wrap; padding:14px 5vw;}
  #spf-nav-toggle{display:flex;}
  nav#spf-primary-nav{
    order:10; width:100%; max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  nav#spf-primary-nav ul{display:flex; flex-direction:column; gap:0; padding-top:8px;}
  nav#spf-primary-nav li{width:100%;}
  nav#spf-primary-nav a{display:block; padding:13px 4px; border-top:1px solid var(--line); font-size:0.95rem;}
  nav#spf-primary-nav a::after{display:none;}
  body.spf-nav-open nav#spf-primary-nav{max-height:70vh; overflow-y:auto;}
  body.spf-nav-open{overflow:hidden;}
}

@media (max-width:480px){
  header.site-header .btn.primary{padding:9px 14px !important; font-size:0.8rem;}
  .brand-logo{height:38px;}
}