/*
Theme Name: JazaTH
Theme URI: https://jazath.dev
Author: JazaTH.dev
Author URI: https://jazath.dev
Description: Tema JazaTH — responsive, mobile-first landing theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jazath-theme
*/

/* =========================================
   TEMPLATE CSS (extracted from JazaTH.html)
   ========================================= */
:root{
  --bg:#0b1220;
  --card:#121a33;
  --text:#eaf0ff;
  --muted:#9fb2d9;
  --brand:#62d3ff;
  --accent:#ffd34d;
  --grad:linear-gradient(135deg,#19b4ff,#6ac7ff 40%,#ffd84d);
  --radius:12px;
  --headH:44px;
}  
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;padding-top:var(--headH)}
a{color:#cfe6ff;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
img{max-width:100%;height:auto}

/* =========================================
   UTILITIES & COMPONENTS
   ========================================= */

/* Service card styles: use CSS variable --svc-color provided inline from template */
.svc.price-card{background:var(--card);border-radius:12px;padding:10px;box-shadow:0 2px 10px rgba(0,0,0,.06);border-left:6px solid var(--svc-color);transition:transform .14s ease,box-shadow .14s ease}
.svc.price-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(2,6,23,.6)}
.svc.price-card .price-head{font-weight:900;font-size:0.9rem;margin-bottom:6px;color:var(--text);} 
.svc.price-card .price-body{color:var(--muted);line-height:1.5}
.svc.price-card .svc-cta{margin-top:12px}
.svc.price-card .svc-cta .btn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.06)}

/* Accent small circle using the service color */
.svc.price-card::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--svc-color);display:inline-block;margin-right:8px;vertical-align:middle}

 .wrap{max-width:1200px;margin:0 auto;padding:12px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
.grid{display:grid;gap:12px}
.pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:800}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-weight:900;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eaf0ff}
/* Loading state for small inline feedback on click */
.btn.is-loading{pointer-events:none;opacity:0.9;position:relative}
.btn.is-loading::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.14);border-top-color:#fff;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-btn{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;font-weight:900;background:linear-gradient(90deg,#19b4ff,#6ac7ff,#ffd84d,#19b4ff);background-size:300% 100%;color:#0b1220;transition:background-position .4s ease,transform .12s ease,box-shadow .12s ease}
.cta-btn:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 8px 22px rgba(25,180,255,.25)}
.nav-link:focus-visible,.chip:focus-visible,.btn:focus-visible,.cta-btn:focus-visible{outline:2px solid #62d3ff;outline-offset:2px}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */

/* Jaza namespaced menu groups 🔧
   Use `.jz-header-*`, `.jz-chips-*` and `.jz-sidebar-*` for new styles
   (keeps legacy class names for backward compatibility)
*/
/* Aliases to help gradual migration */
.jz-header{ }
.jz-header .brand{ /* header brand area (alias) */ }
.jz-header-menu .nav-link{ /* header-specific nav-link styling (alias to .nav-link) */ }
.jz-chips{ }
.jz-chips .chip{ /* alias to .chip */ }
.jz-sidebar{ }
.jz-sidebar .jzv2-sidebar{ /* alias container for sidebar-v2 */ }


header.site{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(11,18,32,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:none;transition:transform .2s cubic-bezier(.4,0,.2,1);will-change:transform}
header.site.hide{transform:translateY(-100%)}
header.site.no-anim{transition:none}

.head{display:flex;align-items:center;gap:10px;padding:8px 20px;min-height:var(--headH)}
.head{position:relative;z-index:22;background:rgba(11,18,32,.98);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid transparent;border-image:linear-gradient(90deg, rgba(25,180,255,0) 0%, rgba(25,180,255,0.3) 20%, rgba(255,216,77,0.3) 80%, rgba(255,216,77,0) 100%) 1}
.brand{font-weight:900;font-size:1.5rem;letter-spacing:-0.5px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.head .brand{position:relative;z-index:10005}
/* Ensure the menu button stays at the far-right of the header on all viewports (mobile + desktop) */
.head .jzv2-menu-btn{margin-left:auto;position:relative;z-index:10070}
/* Ensure WP menu outputs (.primary-menu) render inline on desktop */
nav.primary .primary-menu{display:flex;align-items:center;gap:12px;margin:0;padding:0;list-style:none}
nav.primary .primary-menu a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:800;font-size:1.05rem}
.nav-link{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:800;font-size:1.05rem}
.nav-link.active{border-color:rgba(98,211,255,.38);background:rgba(255,255,255,.08);color:#eaf0ff}

.menu-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-weight:900;border:1px solid rgba(255,255,255,.06);background:rgba(7,11,18,.45);color:#eaf0ff;position:relative;z-index:10006;box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.02)}

/* Chips (Sub-nav) */
.chips{position:fixed;top:calc(var(--headH) + 14px);left:0;right:0;z-index:19;background:linear-gradient(180deg,#061022 0%,#071427 60%,#081a2c 100%);border-top:1px solid rgba(255,255,255,.03);box-shadow:0 8px 20px rgba(0,0,0,.45);border-radius:0;padding:2px 0;transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform}
.chips.hide{transform:translateY(calc(-100% - var(--headH) - 14px));}

/* When chips are hidden, collapse the reserved space (global) */
html.chips-hidden, body.chips-hidden{padding-top:var(--headH) !important} 


/* Ensure hide transforms fully off-screen on desktop */
@media (min-width:900px){
  .chips.hide{transform:translateY(calc(-100% - var(--headH) - 14px));}
}
.chips-scroll{display:flex;justify-content:flex-start;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 10px;scroll-padding-left:16px;scrollbar-width:none;-ms-overflow-style:none}
.chips-scroll::-webkit-scrollbar{display:none}
/* When using wp_nav_menu for chips, the menu may render an <li><a> structure; make anchors look like chips */
.chips-scroll ul{display:flex;gap:10px;align-items:center;margin:0;padding:0}
.chips-scroll ul li{list-style:none}
.chips-scroll ul li a{display:inline-flex;padding:6px 18px;border-radius:12px;font-weight:800;color:#eaf0ff;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 -3px 10px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.24);backdrop-filter:blur(4px);text-decoration:none}
.chips-scroll ul li a:hover{transform:translateY(-2px)}
.chip{flex:0 0 auto;padding:6px 18px;border-radius:999px;font-weight:800;color:#eaf0ff;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);font-size:0.95rem;box-shadow:inset 0 -3px 10px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.24);backdrop-filter:blur(4px);margin-right:10px;min-height:28px;display:inline-flex;align-items:center}
.chip.active{background:linear-gradient(90deg,#62d3ff,#ffd34d);-webkit-background-clip:text;background-clip:text;color:transparent;border-color:rgba(98,211,255,.22);box-shadow:0 6px 18px rgba(98,211,255,.08)}

/* Legacy sidebar styles removed — use namespaced `.jzv2-*` styles defined below. */
/* NOTE: The previous `.sidebar`, `.overlay`, `.side-menu` rules were removed to avoid collisions with the new Sidebar V2 implementation. */

/* small tweaks for mobile: keep header nav hidden on mobile (menu button uses .jzv2-menu-btn) */
@media(max-width:899px){nav.primary{display:none !important;visibility:hidden !important}}


/* HERO SECTION */
.hero{position:relative;padding:8px 0 14px;background:radial-gradient(1200px 340px at 50% 0%, rgba(76,201,240,.16), transparent 60%),linear-gradient(180deg,#0b1020 0%, #121735 100%)}
@media (min-width:900px){
  /* add extra top spacing on desktop so hero doesn't sit too close to the chips/header */
  .hero{padding:28px 0 14px}
  /* Lower chips a bit more on desktop and ensure hide transforms them fully out of view */
  .chips{top:calc(var(--headH) + 14px)}
  .chips.hide{transform:translateY(calc(-100% - var(--headH) - 14px));}
}

/* Sidebar footer & overlay-related rules removed */



/* Mobile: ensure hero content is pushed below fixed header + chips to avoid overlap */
@media (max-width:900px){
  /* Reserve space only for the fixed header on mobile; chips space is applied to the hero so it sits directly under the chips */
  html,body{padding-top:var(--headH);}
  .hero{padding-top:calc(var(--chipsH,48px) + 2px) !important; }
  /* Mobile: keep chips fixed (position set globally), adjust sizing */
  /* Shift chips slightly up on mobile so they sit closer to the header */
  .chips{top:calc(var(--headH) + 8px);padding:6px 0;height:var(--chipsH,48px);background:linear-gradient(90deg,#042a3f 0%, #063147 60%);border-bottom:1px solid rgba(255,255,255,.04);box-shadow:0 12px 30px rgba(4,42,63,.6);backdrop-filter:none}
  .chips.hide{transform:translateY(calc(-100% - var(--headH) - 8px));}
  .chips-scroll{padding:6px 10px;scroll-padding-left:12px}
} 
.hero-grid{display:grid;grid-template-columns:1.2fr;gap:14px;align-items:center}
.hero .wrap{padding-top:0}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.25)}


h1.title{margin:0 0 8px;font-size:clamp(1.3rem, 3.2vw, 1.9rem);line-height:1.15;font-weight:900;background:linear-gradient(90deg,#62d3ff 0%,#9fe3ff 35%,#ffd34d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);margin:0 0 14px}

/* SHOP HERO: polished hero match to provided design (arrows, bottom-left dots, right-side small CTA) */
.shop-hero{margin-bottom:22px}
.shop-hero-grid{display:grid;grid-template-columns:1fr 480px;gap:18px;align-items:stretch}
.shop-hero-banner{position:relative;border-radius:14px;overflow:hidden;min-height:220px;max-height:340px;height:calc(min(340px,30vh));box-shadow:0 20px 40px rgba(8,12,20,.6);display:flex;align-items:stretch}

/* FEATURES: Kategori Populer + Top Up card (dark-blue + green scheme) */
.wrap-card{background:linear-gradient(180deg,#031428,#071a33);border-radius:12px;padding:18px;margin:18px 0;box-shadow:0 20px 50px rgba(4,10,24,.6);color:var(--text);border:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden}
.features-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.features-title h2{margin:0;font-size:1.4rem;color:var(--text)}
.features-title .muted{margin:6px 0 0;color:var(--muted)}
.features-actions h3{margin:0;font-size:1.05rem;color:var(--text)}
.features-actions .view-all{font-weight:800;color:var(--brand);margin-left:8px}
.features-grid{display:grid;grid-template-columns:1fr 480px;gap:18px}
.features-left .banner-green{background:linear-gradient(90deg,#0fb45c,#0b8f4a);border-radius:10px;padding:18px;color:#061426;display:flex;align-items:center;min-height:120px;position:relative;overflow:hidden}
.banner-inner h3{margin:0;font-size:1.2rem;font-weight:900;color:#061426}
.banner-inner p{margin:8px 0;color:rgba(0,0,0,.8)}
.banner-inner .cta-small{margin-top:6px;background:rgba(255,255,255,.06);color:#061426;border:1px solid rgba(255,255,255,.06);font-weight:900;padding:8px 10px;border-radius:8px}

/* When banner shows an image, keep green look via dark overlay but use image as background */
.banner-green.has-image{background-color:transparent}
.banner-green.has-image::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg, rgba(6,10,18,.5), rgba(6,10,18,.18));z-index:1}
.banner-green.has-image .banner-inner{position:relative;z-index:2;color:#fff}
.banner-green.has-image .banner-inner h3{color:#fff}
.banner-green.has-image .banner-inner p{color:rgba(255,255,255,.9)}
.banner-green.has-image .banner-inner .cta-small{background:rgba(0,0,0,.45);color:#fff;border:none;box-shadow:0 8px 18px rgba(0,0,0,.4)}
/* When banner uses an image, invert colors for readability */
.banner-green.has-image{background-size:cover;background-position:center}
.wrap-card.has-image{background-color:transparent;background-size:cover;background-position:center}
.wrap-card.has-image::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg, rgba(6,10,18,.62), rgba(6,10,18,.22));border-radius:12px;z-index:1}
.wrap-card.has-image > *{position:relative;z-index:2}
.banner-green.has-image .banner-inner h3{color:#fff}
.banner-green.has-image .banner-inner p{color:rgba(255,255,255,.9)}
.banner-green.has-image .banner-inner .cta-small{background:rgba(0,0,0,.45);color:#fff;border:none;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.features-right .topup-card{display:flex;flex-direction:column;overflow:hidden}
.topup-card .tabs{display:flex;gap:12px;list-style:none;padding:0;margin:0 0 12px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.topup-card .tabs{display:flex;gap:14px;list-style:none;padding:0;margin:0 0 12px 0;border-bottom:1px solid rgba(255,255,255,.04);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-right:28px}
.topup-card .tabs::-webkit-scrollbar{display:none}
.topup-card .tabs::after{content:"";flex:0 0 44px}
.topup-card .tabs li{padding:8px 14px;border-radius:8px 8px 0 0;cursor:pointer;font-weight:800;color:var(--muted);background:transparent;white-space:nowrap;flex:0 0 auto}
.topup-card .tabs li.active{border-bottom:3px solid var(--brand);color:var(--brand)}
.topup-card .tab-body{padding:6px 0}
.topup-card .tab-body{padding-right:8px}
.topup-card .tab-panel{display:none}
.topup-card .tab-panel.active{display:block}
.topup-card .form-row{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.topup-card .form-row .input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.02);color:var(--text)}

/* Ensure selects and filter inputs use dark backgrounds so options/text remain readable */
.topup-card select,
.topup-card .form-row .input,
.template-filter-mobile .input{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));color:var(--text);border:1px solid rgba(255,255,255,.06)}
.topup-card select:focus,.template-filter-mobile .input:focus{outline:none;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.topup-card select option,
.template-filter-mobile .input option{background:var(--card);color:var(--text)}

.category-chips{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;width:100%;padding:12px 6px}
.category-chips .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.04);border-radius:999px;font-weight:800;color:var(--text);box-shadow:inset 0 -6px 12px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.28)}
.category-chips .chip .chip-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.04);color:var(--text)}

@media (max-width:1160px){.features-grid{grid-template-columns:1fr}.wrap-card{padding:12px}.features-actions{margin-top:6px}.shop-hero-aside{order:2}}
@media (max-width:720px){.banner-inner{padding:12px}.category-chips{gap:8px}}
.hero-slides{position:relative;height:100%}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;transform:scale(0.995);border-radius:12px;overflow:hidden;display:grid}
.hero-slide.active{opacity:1;visibility:visible;position:relative;transform:scale(1)}
.hero-slide-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide-placeholder{width:100%;height:100%;background:linear-gradient(180deg,#0b1220,#071427);display:block}
/* small black CTA on right bottom to match example */
.hero-banner-cta{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.85);color:#fff;padding:8px 10px;border-radius:8px;font-weight:800;font-size:0.9rem;text-decoration:none;z-index:6;box-shadow:0 6px 18px rgba(0,0,0,.5),0 6px 18px rgba(98,211,255,.04)}
/* ensure header remains above hero CTA so CTA sits behind header when scrolled */
/* arrows */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.95);color:#061426;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.4);z-index:22}
.hero-arrow.hero-prev{left:12px}
.hero-arrow.hero-next{right:12px}
/* dots bottom-left */
.hero-dots{position:absolute;left:12px;bottom:12px;display:flex;gap:10px;align-items:center;z-index:22}
.hero-dots .dot{width:12px;height:12px;border-radius:50%;border:none;background:rgba(255,255,255,.14);cursor:pointer;transition:transform .18s ease}
.hero-dots .dot.active{background:linear-gradient(90deg,var(--accent),var(--brand));box-shadow:0 10px 28px rgba(98,211,255,.12);transform:scale(1.18)}

/* retain larger overlay for devices where needed but hide by default to match banner-first design */
.slide-overlay{display:none}

.shop-hero-aside .card{padding:12px;border-radius:12px;height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.shop-hero-aside .tabs{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 12px 0;flex-wrap:wrap}
.shop-hero-aside .tabs li{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.02);font-weight:900;cursor:pointer;white-space:nowrap}
.shop-hero-aside .tabs li.active{background:linear-gradient(90deg,#62d3ff,#9fe3ff);color:#0b1220}
.shop-hero-aside .tab-body{min-height:60px}
.shop-hero-aside .tab-body .tab-panel{display:none}
.shop-hero-aside .tab-body .tab-panel.active{display:block}
.shop-hero-aside .tab-body .tab-panel small{color:var(--muted)}

/* Category chips (unified) */
.category-chips{margin-top:12px}

/* ensure chips wrap nicely and align rows */
.category-chips .chip{margin-bottom:8px}

@media (max-width:720px){
  .category-chips{padding:10px 6px}
  .category-chips .chip{flex:1 1 auto;min-width:140px}
}

/* Responsive tweaks */
@media (max-width:1160px){.shop-hero-grid{grid-template-columns:1fr}.shop-hero-banner{min-height:160px}.shop-hero-aside{order:2}}
@media (max-width:720px){.hero-banner-cta{right:10px;bottom:10px;padding:8px 10px}.hero-arrow{width:40px;height:40px}.hero-dots{left:10px;bottom:8px}.category-chips{gap:8px}}

/* CONTENT SECTIONS */
.usp{padding:16px 0;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.usp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px;display:flex;gap:10px;align-items:flex-start;min-width:0;box-shadow:0 10px 26px rgba(0,0,0,.26)}
.ico{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(68% 68% at 30% 30%, rgba(98,211,255,.18), transparent 60%),linear-gradient(180deg,#0a1430,#152a58);border:1px solid rgba(255,255,255,.12)}

.section-title{margin:0 0 6px;font-size:1.35rem;line-height:1.15;font-weight:900;background:linear-gradient(90deg,#62d3ff 0%,#9fe3ff 35%,#ffd34d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-desc{margin:0 0 18px;color:var(--muted);max-width:72ch}

/* Template filter (taxonomy submenu) */
.template-filter{margin:12px 0 18px}
.template-filter .filter-list{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.template-filter .filter-item{flex:0 0 auto}
.template-filter .filter-item a{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);font-weight:800;color:var(--text)}
.template-filter .filter-item a:hover{background:rgba(255,255,255,.04)}
.template-filter .filter-item a.active{background:linear-gradient(90deg,#62d3ff,#ffd34d);-webkit-background-clip:text;background-clip:text;color:transparent;border-color:transparent}

/* Mobile select filter */
.template-filter-mobile{display:none;margin:10px 0}
.template-filter-mobile .input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:var(--text)}

/* Template badge */
.template-badge{display:inline-flex;align-items:center;gap:8px;margin-right:8px;padding:6px 10px;border-radius:999px;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04)}
.template-badge .badge-text{font-weight:900;font-size:0.9rem}
.template-badge svg{width:16px;height:16px;flex-shrink:0;display:block;fill:currentColor}

/* Template Shop Grid & Cards */
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:12px;margin-top:14px}

/* ensure cards stretch to column height and don't collapse */
.template-grid > .template-card{display:flex;flex-direction:column;width:100%;max-width:100%;align-self:stretch}

.template-card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.04);transition:transform .16s ease,box-shadow .16s ease}
.template-card{box-shadow:0 6px 20px rgba(2,6,23,.45)}
.template-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(2,6,23,.6)}
.template-card .card-thumb{height:auto;display:block;position:relative;overflow:hidden;background:linear-gradient(90deg,var(--tpl-color, #62d3ff), rgba(255,255,255,0.12));color:#061426;font-weight:900}
/* Make image fill the entire landscape frame and center via object-fit */
.template-card .card-thumb img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.template-card .card-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.template-card .tpl-title{color:var(--text);text-decoration:none;font-size:1.05rem}
.template-card .tpl-excerpt{color:var(--muted);font-size:0.95rem}
.template-card .card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.template-card .tpl-price{font-weight:900;color:var(--text);background:rgba(0,0,0,.12);padding:6px 8px;border-radius:8px}
.template-card .tpl-price.free{background:linear-gradient(90deg,#4dd9a6,#19b4ff);color:#061426}
.template-card .card-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:center;justify-content:center}
/* Ensure buttons inside cards don't truncate text */
.template-card .card-actions .btn{padding:10px 14px;min-width:86px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:10px;font-weight:900;position:relative;z-index:12}
..template-card .template-quickview{background:rgba(0,0,0,.08);border:1px solid rgba(255,255,255,.04);color:var(--text);padding:10px 14px;transition:transform .14s ease,box-shadow .14s ease,background .12s ease;cursor:pointer}
.template-card .template-quickview:hover,.template-card .template-quickview:focus{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.32);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.template-card .template-quickview:focus-visible{outline:3px solid rgba(98,211,255,.28);outline-offset:3px}
.template-card .demo-btn{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--text);padding:10px 14px;transition:transform .14s ease,box-shadow .14s ease,background .12s ease;cursor:pointer}
.template-card .demo-btn:hover,.template-card .demo-btn:focus{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.32);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.template-card .demo-btn:focus-visible{outline:3px solid rgba(98,211,255,.18);outline-offset:3px}
.template-card .buy-btn{background:var(--brand);color:#061426;border:none;padding:10px 14px;transition:transform .14s ease,box-shadow .14s ease,filter .12s ease;cursor:pointer}
.template-card .buy-btn:hover,.template-card .buy-btn:focus{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35);filter:brightness(1.02)}
.template-card .buy-btn:focus-visible{outline:3px solid rgba(255,214,77,.18);outline-offset:3px}
/* Make share button text-friendly inside cards (override global circular style) */
.template-card .share-btn{width:auto;height:auto;min-width:86px;padding:10px 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.template-card .rating{color:#ffd34d;font-weight:900}
.tpl-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#061426;font-weight:900}
.template-card .tpl-excerpt{min-height:42px}
.template-card .tpl-title{display:block;margin-bottom:6px}
/* Thumb overlay for hover */
.template-card .card-thumb{position:relative}
.template-card .card-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.14));opacity:0;transition:opacity .18s ease;pointer-events:none}
.template-card:hover .card-thumb::after{opacity:1}
/* Quickview modal adjustments */
.quickview-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:200}
.quickview-modal[hidden]{display:none}
.quickview-panel{max-width:980px;width:calc(100% - 32px);background:var(--card);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,.06);position:relative}
.quickview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quickview-image img{width:100%;height:auto;border-radius:8px;display:block}
.quickview-title{margin:0 0 8px;font-weight:900}
.quickview-price{margin-bottom:8px}
.quickview-actions{display:flex;gap:8px;margin-top:12px}
.close-quickview{position:absolute;right:18px;top:12px;background:transparent;border:none;color:var(--muted);font-size:21px}

/* Badges and share */
.tpl-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);color:var(--text);font-weight:800;margin-right:8px;margin-bottom:8px}
.tpl-badge:first-child{margin-left:0}
.tpl-price.free{background:linear-gradient(90deg,#4dd9a6,#19b4ff);color:#061426;padding:6px 8px;border-radius:8px;font-weight:900}
.share-btn{background:transparent;border:1px solid rgba(255,255,255,.06);padding:8px 10px;border-radius:8px;color:var(--text)}

/* Hover shine */
.template-card{position:relative;overflow:hidden}
.template-card::before{content:'';position:absolute;left:-50%;top:0;bottom:0;width:50%;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.12), rgba(255,255,255,0.03));transform:skewX(-20deg) translateX(-120%);opacity:0;transition:transform .6s ease,opacity .4s ease;pointer-events:none}
.template-card:hover::before{transform:skewX(-20deg) translateX(220%);opacity:1}

/* Responsive badge layout */
.tpl-badge{font-size:0.85rem}
.template-card .card-meta .sold{color:var(--muted);font-size:0.9rem}

/* ---------------------------------------------
   Responsive typography and grid
   - clamp() used for fluid font sizes
   - explicit grid breakpoints for templates
   --------------------------------------------- */

/* Fluid type for major headings */
h1.title{font-size:clamp(1.3rem, 3.2vw, 1.9rem)}
.section-title{font-size:clamp(1.25rem, 1.8vw, 1.4rem)}
.tpl-title{font-size:clamp(0.95rem, 1.2vw, 1.05rem)}
.tpl-excerpt{font-size:clamp(0.82rem, 1.0vw, 0.92rem)}

/* Buttons scale slightly */
.btn{font-size:clamp(0.82rem, 1.0vw, 0.92rem);padding:clamp(6px,1vw,8px) clamp(8px,2vw,10px)}

/* Template grid breakpoints: enforce 2 columns for desktop/tablet/mobile; 1 column only for very-small screens */
/* Default: 2 columns */
.template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}

@media (min-width:1024px){
  /* Desktop: 2 columns */
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (min-width:640px) and (max-width:1023px){
  /* Tablet: 2 columns */
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:639px){
  /* Mobile: 2 columns */
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:420px){
  /* Very small phones: single column */
  .template-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:10px}
}

/* Quickview modal responsiveness */
@media (max-width:720px){
  .quickview-grid{grid-template-columns:1fr}
  .quickview-panel{padding:12px}
  .quickview-image{order:-1}
}

/* Desktop: 3 columns */
@media (min-width:981px){
  .template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
/* Mobile: 2 columns for compact, modern look (all sizes <=980px) */
@media (max-width:980px){
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .template-card .card-thumb{height:120px}
  .template-card .card-body{padding:12px}
}
/* Responsive, auto-fill grid ensures consistent horizontal flow */
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;align-items:stretch}
.template-grid > *{height:auto}

/* Card layout: column on mobile, row on desktop (equal heights) */
 .template-card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.04);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;height:100%;min-height:180px;align-items:stretch}
.template-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.45)}

/* Image area - consistent aspect ratio on mobile, fixed width on desktop */
.template-thumb{width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#071427,#061022);display:block;flex-shrink:0}
.template-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
@media (min-width:720px){
  /* Keep card stacked (image on top) for clearer, consistent layout across sizes */
  .template-card{flex-direction:column;min-height:260px}
  .template-thumb{width:100%;aspect-ratio:16/9;height:auto;flex:0 0 auto;border-radius:12px}
  /* small spacing tweak so body content breathes on wider screens */
  .template-card .template-body{padding-top:8px}
}

/* Body/content stretches to fill available card height and keeps CTA at bottom */
.template-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.template-body > *{min-width:0}
.template-card .template-title{font-weight:900;font-size:1.05rem;line-height:1.15;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3rem}
.template-excerpt{margin:8px 0;color:var(--muted);font-size:1rem;flex:1;min-width:0}

/* Ensure action buttons align to bottom and are visually consistent */
.svc-cta{display:flex;gap:8px;align-items:center;margin-top:auto;justify-content:flex-start;flex-wrap:wrap}
.svc-cta .btn{padding:8px 12px;border-radius:10px;white-space:nowrap}
.svc-cta .cta-btn{padding:8px 14px}
/* Price styling: center and visually distinctive */
.svc-cta .price-amount{flex-basis:100%;margin-left:0;margin-top:10px;align-self:center;display:block;text-align:center;font-weight:900;font-size:1.05rem;padding:6px 12px;border-radius:10px;color:transparent;background:linear-gradient(90deg,#62d3ff,#9fe3ff);-webkit-background-clip:text;background-clip:text;border:1px solid rgba(98,211,255,.06);background-color:rgba(9,20,34,.35);box-shadow:0 8px 18px rgba(98,211,255,.03)}

/* Ensure free/download links inside price-amount are visible and clickable */
.svc-cta .price-amount a,
.svc-cta .price-amount .free-link{color:var(--brand);background:none;-webkit-background-clip:unset;background-clip:unset;display:inline-block;padding:6px 12px;border-radius:8px;text-decoration:none;pointer-events:auto}
.svc-cta .price-amount a:hover{opacity:0.95}

/* Ensure free button is above price area and clickable */
.svc-cta{position:relative}
.svc-cta .btn.free-btn{position:relative;z-index:80;pointer-events:auto}
.svc-cta .price-amount{position:relative;z-index:10}

/* Prominent download button for free items */
.svc-cta .btn.free-btn{background:linear-gradient(90deg,#62d3ff,#9fe3ff);color:#061426;border:1px solid rgba(255,255,255,.06);font-weight:900;padding:10px 14px;border-radius:10px}
.svc-cta .btn.free-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.svc-cta .btn.free-btn:active{transform:translateY(0)}


/* Pagination: centered, pill-style, accessible */
.pagination-wrap{margin-top:28px;text-align:center}
.pagination-wrap .page-numbers{display:inline-flex;gap:8px;align-items:center;list-style:none;margin:0;padding:0}
.pagination-wrap .page-numbers li{margin:0}
.pagination-wrap .page-numbers a,.pagination-wrap .page-numbers span{display:inline-block;padding:8px 12px;border-radius:999px;background:transparent;color:var(--muted);min-width:40px;text-align:center;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}
.pagination-wrap .page-numbers a{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);color:#9fe3ff;border:1px solid rgba(255,255,255,0.04);text-decoration:none}
.pagination-wrap .page-numbers a:hover{transform:translateY(-3px);filter:brightness(1.05)}
.pagination-wrap .page-numbers .prev,.pagination-wrap .page-numbers .next{padding:6px 10px;min-width:auto}
.pagination-wrap .page-numbers .current{background:linear-gradient(90deg,#62d3ff,#9fe3ff);color:#061426}
.pagination-wrap .page-numbers .dots{color:var(--muted);padding:8px 10px}

@media (max-width:640px){
  .pagination-wrap .page-numbers{gap:6px}
  .pagination-wrap .page-numbers a,.pagination-wrap .page-numbers span{padding:6px 8px;min-width:34px}
}

/* SEO article block (shop) */
.shop-seo{margin:28px 0;padding:22px;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.03)}
.shop-seo{margin:28px 0;padding:22px;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.03)}
/* Title pill for SEO page header */
.shop-seo .section-header{display:flex;justify-content:center}
.shop-seo .section-header h2{margin:0 0 10px;font-size:1.25rem;text-align:center;display:inline-block;padding:10px 20px;border-radius:999px;background:linear-gradient(90deg,#1ec5ff,#62d3ff 45%,#ffd86a);color:#061426;font-weight:900;box-shadow:0 10px 30px rgba(30,197,255,.12),inset 0 1px rgba(255,255,255,.06)}
/* Constrain SEO article to a centered column and keep paragraphs left-aligned */
.shop-seo .seo-content{max-width:980px;margin:0 auto;text-align:left}
.shop-seo .seo-content p{color:var(--muted);line-height:1.8;margin:0 0 12px}
.shop-seo .seo-content .btn{background:linear-gradient(90deg,#2fb1ff,#5ee0ff);color:#061426;font-weight:800}

/* FAQ block styles */
.shop-faq{margin:18px 0;padding:20px;border-radius:12px;background:linear-gradient(180deg,#051224,#0b1630);border:1px solid rgba(255,255,255,.02)}
.shop-faq .section-header{display:flex;justify-content:center;margin-bottom:12px}
.shop-faq .section-header h2{display:inline-block;padding:8px 18px;border-radius:999px;background:linear-gradient(90deg,#ffd86a,#62d3ff);color:#061426;font-weight:900}
.shop-faq .faq-content{max-width:980px;margin:0 auto;color:var(--muted);line-height:1.8;text-align:left}
.shop-faq .faq-content h3,.shop-faq .faq-content h4{color:var(--text);margin-top:14px}
.shop-faq .faq-content p{margin:0 0 12px}

/* Accordion / FAQ styles */
.shop-faq details.faq-item{border-radius:10px;padding:8px;margin-bottom:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,.02)}
.shop-faq .faq-intro{margin-bottom:10px}
.shop-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-weight:900;color:var(--text);border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));transition:background .18s ease,transform .12s ease}
.shop-faq summary:hover{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));transform:translateY(-2px)}
.shop-faq summary:focus{outline:2px solid rgba(98,211,255,.18);outline-offset:4px}
.shop-faq summary::-webkit-details-marker{display:none}
.shop-faq .faq-body{overflow:hidden;transition:max-height .36s cubic-bezier(.2,.9,.3,1),opacity .28s ease,padding .28s ease;color:var(--muted);padding:0 14px}
.shop-faq .faq-body p{margin:12px 0}
.shop-faq summary::after{content:'';width:18px;height:18px;display:inline-block;border-right:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);transform:rotate(45deg);transition:transform .28s cubic-bezier(.2,.9,.3,1),border-color .2s ease;opacity:0.95}
.shop-faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--brand)}

/* Page title row: title + action */
.page-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.page-title-actions{display:flex;gap:10px;align-items:center}
.btn-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:900;background:linear-gradient(90deg,#42c0ff,#7de0ff 45%,#ffd86a);color:#061426;border:none;box-shadow:0 12px 30px rgba(66,192,255,.12),0 4px 10px rgba(0,0,0,.35);transition:transform .14s ease,box-shadow .14s ease}
.btn-pill:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(66,192,255,.16),0 6px 18px rgba(0,0,0,.4)}
.btn-pill:active{transform:translateY(0)}

@media (max-width:720px){
  .page-title-row{flex-direction:column;align-items:flex-start}
  .page-title-actions{width:100%;display:flex;justify-content:flex-start}
}



/* Small polish: make preview placeholders consistent */
.template-thumb.placeholder{display:grid;place-items:center;padding:12px;color:var(--muted);font-weight:700}

/* Quick View / small screens adjustments */
@media(max-width:520px){
  .template-grid{gap:12px}
  .template-card{min-height:200px}
  .template-thumb{aspect-ratio:16/10}
}

/* Ensure card title wraps and doesn't overflow */
.template-card .template-title a{display:block;word-break:break-word;max-width:100%;overflow-wrap:break-word}
.template-card .template-thumb img{border-radius:8px}
.price-tag{display:inline-flex;gap:8px;align-items:center}
.price-current{font-weight:900;color:#62d3ff}
.price-old{text-decoration:line-through;color:rgba(255,255,255,.45);font-weight:700}
.rating{color:#ffd34d}

/* Compact front-page template list */
.template-front-list{display:flex;gap:12px;margin:12px 0 18px}
.template-mini{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.02);padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.04)}
.template-mini .mini-thumb{width:64px;height:48px;flex:0 0 64px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#061427,#071427);display:grid;place-items:center}
.template-mini .mini-thumb img{width:100%;height:100%;object-fit:cover}
.template-mini .tpl-placeholder{padding:6px;color:var(--muted);font-weight:700;text-align:center}
.template-mini .mini-body{min-width:0}
.template-mini .mini-body a{display:block;color:#eaf0ff;font-weight:800}
.template-mini .mini-price{color:#62d3ff;font-weight:900;margin-top:6px}
.template-mini .mini-demo .btn{padding:6px 8px;font-size:0.9rem;border-radius:8px}
@media (max-width:760px){.template-front-list{flex-direction:column}.template-mini{gap:8px}}

/* Controls layout */
.template-shop-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.template-controls-left{flex:1}
.template-controls-right{display:flex;gap:8px;align-items:center}
.template-search .input{min-width:220px}

/* Quick View Modal */
.quickview-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:200;}
.quickview-modal[hidden]{display:none}
.quickview-panel{max-width:980px;width:calc(100% - 32px);background:var(--card);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,.06)}
.quickview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quickview-image img{width:100%;height:auto;border-radius:8px;display:block}
.quickview-title{margin:0 0 8px;font-weight:900}
.quickview-price{margin-bottom:8px}
.quickview-actions{display:flex;gap:8px;margin-top:12px}
.close-quickview{position:absolute;right:18px;top:12px;background:transparent;border:none;color:var(--muted);font-size:21px}




/* Single Template Styles */
.template-single{padding:20px 0}
.breadcrumbs{color:var(--muted);font-size:1rem;margin-bottom:10px}
/* Hero grid: left content + right sidebar */
.template-hero{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start;margin-bottom:18px}
.template-title{font-size:1.9rem;line-height:1.15;margin:0 0 8px}

/* Sidebar column (image above price) */
.hero-right{display:flex;flex-direction:column;gap:18px;align-items:stretch}

/* Rating badge — more vertical (taller) layout to avoid a wide/landscape look */
.hero-left .template-score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#06b6d4 0%,#7c3aed 100%);color:#fff;padding:18px 24px;border-radius:14px;box-shadow:0 14px 40px rgba(12,18,28,.6);max-width:300px;min-height:128px;width:auto;text-align:center}
.hero-left .template-score .score-icon{display:block;margin:0 auto 6px}
.hero-left .template-score .score-icon svg{width:32px;height:32px;fill:currentColor;opacity:0.98}
.hero-left .template-score .score-body{display:flex;flex-direction:column;align-items:center}
.hero-left .template-score .score-value{font-size:21px;font-weight:900;line-height:1;margin-bottom:2px}
.hero-left .template-score .score-meta{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;opacity:0.95}
.hero-left .template-score .stars{display:flex;gap:4px}
.hero-left .template-score .star{width:12px;height:12px;fill:rgba(255,255,255,0.98)}
.hero-left .template-score .star.empty{fill:rgba(255,255,255,0.18)}
@media(max-width:900px){.hero-left .template-score{max-width:160px;padding:10px;min-height:96px}.hero-left .template-score .score-value{font-size:19px}}
.single-thumb{display:block;border-radius:18px;padding:6px;background:linear-gradient(180deg,#0b1420,#071022);overflow:hidden;box-shadow:0 18px 50px rgba(9,22,41,.7), 0 6px 18px rgba(98,211,255,.04);border:1px solid rgba(255,255,255,.04);position:relative;transition:transform .28s ease,box-shadow .28s ease}
.single-thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(11,18,32,0),rgba(11,18,32,.6));pointer-events:none}
.hero-right .single-thumb img{width:100%;height:100%;display:block;object-fit:cover;border-radius:12px;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.single-thumb:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(9,22,41,.8),0 14px 36px rgba(98,211,255,.06)}
.single-thumb:hover .single-thumb-img{transform:scale(1.05)}
/* optional small overlay actions if present */
.single-thumb .thumb-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:40}
.single-thumb .thumb-actions .btn{padding:6px 10px;border-radius:10px;font-weight:800;font-size:.9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}



/* Price box styling and spacing */
.price-box{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.06);text-align:center;margin-top:0}
.price-box .price-old{margin-bottom:8px;display:block}
.price-current{font-weight:900;color:#62d3ff;font-size:1.45rem}
.sale-info{margin-top:12px;display:flex;flex-direction:column;gap:8px;align-items:center}
.sale-countdown{color:#ffd34d;font-weight:900}
.scarcity{background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;padding:8px 12px;border-radius:14px;font-weight:900}
.price-box.ended .sale-countdown{opacity:.6;text-decoration:line-through}
.price-old{font-weight:700;color:rgba(255,255,255,.55);text-decoration:line-through;font-size:0.95rem}

/* Make sidebar sticky on wide screens so it doesn't collide with content when scrolling */
@media(min-width:1160px){.hero-right{position:sticky;top:96px}}
.template-badges{margin:8px 0 12px;display:flex;gap:8px}
.template-badges .template-badge{margin-right:8px}
.template-single .template-body{display:grid;grid-template-columns:2fr 360px;gap:18px;position:relative}
/* Ensure main content and sidebar occupy correct grid columns */
.template-single .template-body > section{grid-column:1}
.template-single .template-body > aside{grid-column:2}
/* Force sidebar into the second grid column and align it to top */
.template-sidebar{position:relative;grid-column:2;align-self:start}
/* Constrain sidebar inner width so sticky behavior doesn't expand it full-width */
.template-sidebar .sidebar-inner{width:100%;max-width:360px;margin-left:auto;box-sizing:border-box}

/* Layout for right column: keep elements stacked tightly under price-box */
.hero-right{display:flex;flex-direction:column;gap:8px}
.hero-right .related-posts-card{margin-top:0;position:relative;z-index:12;pointer-events:auto}
.hero-right .related-posts-card h2{margin-top:0;margin-bottom:8px}
/* Ensure left-side template cards don't overlap and block interaction */
.template-grid .template-card{position:relative;z-index:5}
/* Make sidebar content visually separated */
.template-sidebar .card{margin-bottom:12px}
/* Inner wrapper is sticky on wide screens */
.template-sidebar .sidebar-inner{position:static}
@media(min-width:1160px){.template-sidebar .sidebar-inner{position:sticky;top:64px;z-index:1 /* reduced to avoid overlapping content */}}
/* When bottom reached, switch to absolute inside the .template-body container */
.template-sidebar .sidebar-inner.stuck-bottom{position:absolute;bottom:12px;top:auto;width:100%;z-index:1;right:0}
.template-features h2,.template-includes h2,.template-seo h2,.template-features h4,.template-includes h4,.template-seo h4{margin:0 0 8px}
.template-features ul{margin:0;padding-left:18px}
.template-includes p{margin:0}

/* Template Description card */
.template-description{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.04);margin:12px 0}
.template-description h2{margin:0 0 10px}
.template-desc-body{color:var(--muted);line-height:1.7;font-size:1rem} 
.template-related{margin-top:28px;position:relative;z-index:3 /* ensure related templates appear above sticky sidebar if they overlap */}
.archive-desc{color:var(--muted);margin:6px 0 14px}
.archive-desc p{margin:0 0 10px;line-height:1.6;text-align:left}
.archive-desc strong{color:#62d3ff;font-weight:800}

/* Product description specific (same style but separate class) */
.product-desc{margin-top:6px}
.product-desc p{margin:0 0 10px;line-height:1.6;text-align:left}
.product-desc ol{margin:8px 0 12px 1.2rem;padding-left:18px}
.product-desc li{margin-bottom:8px}

.template-info-grid{display:grid;grid-template-columns:1fr minmax(200px,320px);gap:18px;align-items:stretch;margin-top:12px}
@media (max-width:1160px){.template-info-grid{grid-template-columns:1fr;gap:12px}
  /* When stacked, ensure main content comes before sidebar */
  .template-single .template-body > section{grid-column:1;grid-row:1}
  .template-single .template-body > aside{grid-column:1;grid-row:2}
}
.template-benefits{background:linear-gradient(180deg, rgba(18,26,48,.7), rgba(10,16,28,.6));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.04);margin:0}
.template-benefits .benefits-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0;padding:0;list-style:none}
.template-benefits .benefits-list li{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));padding:10px 12px;border-radius:10px;font-weight:800;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.03)}
.template-benefits .benefits-list li::before{content:'✓';display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:linear-gradient(180deg,#62d3ff,#9fe3ff);color:#061426;font-weight:900}

.template-benefits h2{ text-align:center; margin:0 0 12px; background: linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Gradient only for Garansi & Support title */
.template-info-grid .template-guarantee h2{ text-align:left; margin:0 0 12px; background: linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.template-guarantee{background:linear-gradient(90deg,#061427,#071427);padding:18px;border-radius:14px;color:#eaf0ff;margin:0;border:1px solid rgba(255,255,255,.03);display:flex;flex-direction:column;gap:12px;transition:transform .18s ease;max-width:100%;box-sizing:border-box;width:100%;min-height:0}
.guarantee-panel{display:flex;gap:12px;align-items:center}
.guarantee-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:84px;padding:8px;border-radius:12px;background:linear-gradient(180deg,#ffd34d,#ffb46a);color:#0b1220;font-weight:900}
.g-num{font-size:1.9rem;line-height:1}
.g-unit{font-size:.8rem;opacity:.95}
.guarantee-text{color:var(--muted);font-weight:700}

@media(min-width:900px){
  /* nudge guarantee panel higher and center number/title */
  .template-info-grid .template-guarantee{transform:translateY(-14px);align-self:stretch;height:100%}
  .template-info-grid .template-guarantee h2{ text-align:center; margin-bottom:6px }
  .template-info-grid .template-guarantee .guarantee-panel{ justify-content:center; align-items:center; gap:18px }
  /* keep descriptive text readable on wide layouts */
  .template-info-grid .template-guarantee .guarantee-text{ text-align:left; max-width:260px }
}

@media(max-width:900px){.template-info-grid{grid-template-columns:1fr;}.template-benefits .benefits-list{grid-template-columns:1fr}.guarantee-panel{flex-direction:row;justify-content:flex-start}}


.template-guarantee{background:linear-gradient(90deg,#061427,#071427);padding:12px;border-radius:12px;color:#eaf0ff;margin:12px 0}
.template-testimonials .testi{background:var(--card);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.06);margin-bottom:10px}
.template-faq .faq-item{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);padding:10px;border-radius:8px;margin-bottom:8px}

.post-content{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.06);line-height:1.7;color:var(--text)}

.template-cta .cta-btn{width:100%;display:inline-block}
.template-share a{margin-right:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);font-weight:800}

/* New compact share UI */
.share-row{display:flex;align-items:center;gap:12px}
.share-label{padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.03);font-weight:900}
.share-icons{display:flex;gap:8px;align-items:center}
.share-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text);cursor:pointer;position:relative;overflow:hidden}
.share-btn svg{width:18px;height:18px}
.share-btn:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.share-btn:focus{outline:2px solid #62d3ff;outline-offset:2px}
/* tooltip from title attribute */
.share-btn[title]:hover::after, .share-btn[title]:focus::after{content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(11,18,32,.95);color:#cfe6ff;padding:6px 8px;border-radius:8px;font-weight:700;white-space:nowrap;box-shadow:0 8px 18px rgba(0,0,0,.5);z-index:220}
/* ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
/* chips hover & ripple */
.highlight-chip{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-weight:800;min-width:120px;text-align:center;cursor:pointer;position:relative;overflow:hidden}
.highlight-chip:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.4)}
.highlight-chip:focus{outline:2px solid #62d3ff;outline-offset:3px}
/* visually-hidden for aria status */
.sr-only{position:absolute;border:0;padding:0;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;clip-path:inset(50%);}
@media (max-width:560px){.share-label{display:none}}

/* Highlight strip above breadcrumbs: features, rating snippet, CTAs */
.template-highlight{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:12px 0;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid rgba(255,255,255,.04)}
.highlight-features{display:flex;gap:8px;flex-wrap:wrap}
.highlight-chip{background:rgba(255,255,255,.03);padding:6px 10px;border-radius:999px;font-weight:800;color:var(--text);border:1px solid rgba(255,255,255,.04)}
.highlight-rating{justify-self:center;text-align:center}
.rating-pill{background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;padding:6px 10px;border-radius:999px;font-weight:900}
.highlight-actions{display:flex;gap:8px;justify-content:flex-end}
.btn.small{padding:6px 10px;font-size:0.92rem;border-radius:10px}
.cta-btn.small{padding:8px 12px;font-size:0.95rem;border-radius:10px}
@media (max-width:900px){.template-highlight{grid-template-columns:1fr;gap:8px;text-align:center}.highlight-actions{justify-content:center}}

/* Hero inline highlight to fill empty left space (below title) */
.hero-highlight{display:grid;grid-template-columns:160px 1fr auto;gap:18px;align-items:center;margin-top:14px;padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid rgba(255,255,255,.04);opacity:0;transform:translateY(8px);transition:opacity .48s ease,transform .48s ease}
.hero-highlight.visible{opacity:1;transform:none}
.hero-left{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero-chips{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.highlight-chip{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-weight:800;min-width:120px;text-align:center}
.hero-rating-wrap{margin-top:6px}
.rating-pill{background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;padding:8px 12px;border-radius:14px;font-weight:900;display:inline-block}
.hero-summary{color:var(--muted);font-weight:700;line-height:1.6}
.hero-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.hero-review-snippet{font-weight:700;color:var(--text);background:rgba(255,255,255,.02);padding:8px 12px;border-radius:10px;max-width:320px;text-align:right}
.hero-action-buttons{display:flex;gap:8px}
/* Chips wrap: place above description and allow scrolling when many */
.hero-chips-wrap{grid-column:1/-1;margin-bottom:10px;display:flex;gap:12px;align-items:center}
.hero-chips{display:flex;flex-wrap:wrap;gap:12px;max-height:140px;overflow:auto;padding-right:6px}
.hero-chips.has-more{max-height:140px}
.hero-chips.expanded{max-height:600px}
.chips-toggle{margin-left:6px}
/* subtle scroll fade on right */
.hero-chips{position:relative}
/* subtle right fade that only appears when overflow exists */
.hero-chips::after{content:'';position:absolute;right:0;top:0;width:28px;height:100%;pointer-events:none;background:linear-gradient(90deg, rgba(11,18,32,0) 0%, rgba(11,18,32,0.35) 60%, rgba(11,18,32,0.6) 100%);display:none;opacity:0;transform:translateX(6px);transition:opacity .18s ease, transform .18s ease;border-radius:0 10px 10px 0}
.hero-chips.overflowing::after{display:block;opacity:1;transform:none}
/* when user scrolls a little, hide overlay briefly to avoid visual block */
.hero-chips.scrolling::after{opacity:0;transform:translateX(6px);}
.hero-chips.scrolled-end::after{opacity:0;transform:translateX(6px)}
.hero-chips.expanded::after{display:none} 
.hero-chips::-webkit-scrollbar{width:8px;height:8px}
.hero-chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:6px}
@media (max-width:1100px){.hero-highlight{grid-template-columns:120px 1fr;}.hero-actions{align-items:flex-start;text-align:left}}
@media (max-width:900px){.hero-highlight{grid-template-columns:1fr;gap:12px;text-align:center}.hero-left{align-items:center}.hero-chips{flex-direction:row;justify-content:center;max-height:80px}.highlight-chip{min-width:0;padding:8px 10px}.hero-actions{align-items:center}.hero-review-snippet{max-width:100%;text-align:center}.hero-chips::after{display:none}}
@media (prefers-reduced-motion: reduce){.hero-highlight{transition:none;transform:none;opacity:1}}
@media (max-width:1160px){
  .template-hero{grid-template-columns:1fr;grid-template-rows:auto auto;align-items:start}
  .template-hero > div{grid-row:2}
  .hero-right{grid-row:1;align-self:start}
  .template-single .template-body{grid-template-columns:1fr}
  .template-benefits .benefits-list{grid-template-columns:1fr}
}

/* small polish for related cards */
.template-card{align-items:flex-start;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);display:flex;gap:12px;flex-direction:column}
.template-card .price-body{padding:0}

/* Card thumbnail: force landscape ratio and center the image */
.card-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));display:block;margin:0 0 12px;position:relative}
.card-thumb img,.card-thumb picture img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:0}

/* Fallback placeholder center alignment */
.tpl-placeholder{display:grid;place-items:center;padding:12px;color:var(--muted);font-weight:700;text-align:center}

/* Modern content cards (SEO / Fitur / Termasuk) */
.content-cards{display:grid;gap:12px;margin-top:12px}
@media(min-width:980px){.content-cards{grid-template-columns:minmax(320px,1fr) 360px;align-items:start}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:120px} 
.card h2{margin:0 0 10px;font-size:1.3rem;font-weight:900;background:linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.card p{margin:0;color:var(--muted);line-height:1.6}

/* Features: two-column list on wide screens and nice bullets */
.features-card ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}

/* Related posts card */
.related-posts-card{padding:12px}
.related-filter{margin-bottom:10px}
.related-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cat-btn{background:transparent;border:1px solid rgba(255,255,255,.06);padding:8px 12px;border-radius:10px;font-weight:800;color:var(--text);cursor:pointer}
.cat-btn.active{background:linear-gradient(90deg,#62d3ff,#ffd34d);color:#0b1220;border-color:rgba(255,255,255,.06);box-shadow:0 8px 18px rgba(0,0,0,.35)}

/* Category pill used in article heading */
.cat-pill{display:inline-block;padding:8px 14px;border-radius:12px;font-weight:900;background:linear-gradient(90deg,#62d3ff,#ffd34d);color:#0b1220;box-shadow:0 8px 18px rgba(0,0,0,.35)}

.article-head{display:flex;align-items:center;justify-content:flex-start;gap:18px;margin-bottom:12px}
.article-head .share-buttons{margin-left:auto;display:flex;gap:8px;align-items:center}
.share-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06);background:transparent;color:#fff;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:16px;transition:transform .14s ease,box-shadow .14s ease,opacity .12s ease}
.share-btn svg{display:block;width:18px;height:18px}
.share-native{background:linear-gradient(90deg,#9be1ff,#6ac7ff);color:#03212a;box-shadow:0 8px 20px rgba(106,199,255,.12);border-color:transparent}
.share-twitter{background:#1DA1F2;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(29,161,242,.12)}
.share-facebook{background:#1877F2;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(24,119,242,.12)}
.share-whatsapp{background:#25D366;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(37,211,102,.12)}
.share-copy{background:linear-gradient(90deg,#ffd34d,#62d3ff);color:#0b1220;border-color:transparent;box-shadow:0 8px 20px rgba(255,211,77,.08)}
.share-btn:hover{transform:translateY(-4px);opacity:0.98}
.share-btn:focus{outline:3px solid rgba(255,255,255,.06);outline-offset:3px}
.share-btn.copied{background:#62d3ff;color:#0b1220;border-color:rgba(255,255,255,.06)}

.related-posts-list{display:grid;gap:12px}
.related-post{display:flex;gap:12px;align-items:flex-start;padding:8px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent);border:1px solid rgba(255,255,255,.03)}
.related-post .rp-thumb img{width:110px;height:66px;object-fit:cover;border-radius:8px}
.related-post .rp-title{font-weight:800;color:#eaf0ff;font-size:1rem}
.related-post .rp-meta{color:var(--muted);font-size:0.85rem;margin-top:6px}
.related-posts-list .loading{padding:12px;text-align:center;color:var(--muted)}
@media(min-width:720px){.features-card ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.features-card li{position:relative;padding-left:28px;color:var(--text);font-weight:700}
.features-card li::before{content:'✓';position:absolute;left:0;top:0;color:#62d3ff;background:rgba(255,255,255,.03);width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:900}

/* Includes card smaller type */
.includes-card p{font-weight:700;color:var(--muted)}

/* Includes chips */
.includes-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.include-chip{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);padding:8px 12px;border-radius:10px;font-weight:800;color:var(--text);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.include-chip:hover{transform:translateY(-3px);box-shadow:0 10px 18px rgba(0,0,0,.36)}
.include-chip:focus{outline:2px solid #62d3ff;outline-offset:3px}
/* When includes card is present keep card spacing modest */
.includes-card{padding-top:14px;padding-bottom:14px}

/* Footer recent posts */
.footer-recent-item{display:flex;gap:12px;align-items:stretch;text-decoration:none;padding:8px;border-radius:10px;transition:background .12s ease}
.footer-recent-item:hover{background:rgba(255,255,255,.02)}
.footer-recent-thumb-wrap{width:54px;flex:0 0 54px;display:block;border-radius:8px;overflow:hidden;align-self:stretch;height:auto}
.footer-recent-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.footer-recent-meta{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:4px 0}
.footer-recent-title{font-size:0.96rem;margin:0}
.footer-recent-item .footer-recent-title{white-space:normal;overflow:hidden;text-overflow:ellipsis}

/* Fallback highlights card */
.highlights-card{padding:14px;}
.highlights-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.highlights-list li{padding-left:28px;position:relative;color:var(--text);font-weight:800}
.highlights-list li::before{content:'✔';position:absolute;left:0;top:0;color:#62d3ff;background:transparent;border-radius:6px;display:grid;place-items:center}

@media (max-width:720px){.includes-chips{justify-content:center}}

/* Rating in card style */
.rating-pill{display:inline-block;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,#ffd34d,#ffb46a);color:#0b1220;font-weight:900}

/* FAQ accordion — modern style */
.template-faq{margin-top:18px}
.faq-list{display:grid;gap:8px}
.faq-item{border:1px solid rgba(255,255,255,.05);border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent)}
.faq-item summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:800}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .caret{transition:transform .22s ease}
.faq-item[open] summary .caret{transform:rotate(90deg)}
.faq-item div{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .28s ease;padding-bottom:0}
.faq-item.opened div{padding:12px 16px}

/* small polish */
.template-seo{padding-bottom:6px;min-height:120px;display:block}
.template-seo p{margin:0 0 14px;line-height:1.65;white-space:pre-line;text-align:left;word-break:normal;hyphens:auto}
.template-seo p + p{margin-top:8px}
.template-seo ol{margin:8px 0 14px 1.2rem;padding-left:18px}
.template-seo ol li{margin-bottom:8px;line-height:1.6}

/* Numbered headings pattern: bold prefix then description — responsive */
.template-seo p strong{color:#62d3ff;font-weight:900;display:inline-block;margin-right:10px}
@media (min-width:720px){.template-seo p strong{min-width:140px}}
@media (max-width:720px){.template-seo p strong{display:block;margin-bottom:6px}}

/* Lists: spacing and clearer items */
.template-seo ol, .template-seo ul{margin:8px 0 12px 1.1rem;padding-left:18px}
.template-seo li{margin-bottom:8px;line-height:1.6}

/* Inline links and highlights */
.template-seo a{color:#62d3ff;text-decoration:underline}
.template-seo mark{background:rgba(98,211,255,.08);padding:2px 6px;border-radius:6px}


/* Code styling for SEO Summary: inline and blocks */
.template-seo code{background:rgba(255,255,255,.02);padding:2px 6px;border-radius:6px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;font-size:.92rem}
.template-seo pre{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.03);padding:12px;border-radius:10px;overflow-x:auto;white-space:pre;line-height:1.5;margin:0 0 12px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;font-size:.95rem}
.template-seo pre code{background:transparent;padding:0;border-radius:0}

.includes-card{padding-top:14px;padding-bottom:14px;min-height:120px;display:flex;flex-direction:column;justify-content:center}
.highlights-card{padding:14px;min-height:120px;display:flex;flex-direction:column;gap:8px;justify-content:center} 

@media (prefers-reduced-motion: reduce){.faq-item div,.hero-highlight{transition:none!important}}


/* Taxonomy (Theme) styles */
.term-hero{padding:36px 0 24px;background:linear-gradient(90deg,#061427,#071427);background-size:cover;background-position:center;color:#eaf0ff;border-radius:12px;margin-bottom:14px}
.term-hero .term-title{font-size:1.8rem;margin:0}
.term-hero .term-tagline{color:#bce9ff;margin-top:8px;font-weight:700}
.term-hero .term-desc{color:var(--muted);margin-top:10px}
.term-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.template-search .input{min-width:220px}
.template-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Keep two columns on most mobile viewports; collapse to one column on very small screens */
@media (max-width:360px){.template-grid{grid-template-columns:1fr}}


/* Theme-specific hero fallback gradients */
.term-hero[data-slug="wordpress"]{background:linear-gradient(90deg,#21759b,#1ea0d7);color:#fff}
.term-hero[data-slug="blogger"]{background:linear-gradient(90deg,#ff8a00,#ffb16a);color:#0b1220}
.term-hero[data-slug="html"]{background:linear-gradient(90deg,#6a1b9a,#ab47bc);color:#fff}
.term-hero[data-slug="amp"]{background:linear-gradient(90deg,#ffb74d,#ff8a65);color:#0b1220}

/* Taxonomy index styles */
.tax-index .theme-list{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:720px){.tax-index .theme-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1160px){.tax-index .theme-list{grid-template-columns:repeat(3,1fr)}}
.theme-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden}
.theme-hero{height:140px;display:block;background-size:cover;background-position:center}
.theme-body{padding:12px}
.theme-name{margin:0 0 6px;font-weight:900}
.theme-tagline{color:#bce9ff;font-weight:700;margin-bottom:8px}
.theme-desc{color:var(--muted);margin-bottom:10px}
.theme-previews{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.theme-preview{display:inline-block;padding:6px 8px;background:rgba(255,255,255,.02);border-radius:8px;border:1px solid rgba(255,255,255,.04)}
.theme-meta{display:flex;gap:10px;align-items:center;justify-content:space-between}
.theme-meta .count{color:var(--muted)}


/* Color variants */
.template-badge.badge-wordpress{background:linear-gradient(90deg,#21759b,#1ea0d7);color:#ffffff}
.template-badge.badge-blogger{background:linear-gradient(90deg,#ff8a00,#ffb16a);color:#0b1220}
.template-badge.badge-html{background:linear-gradient(90deg,#6a1b9a,#ab47bc);color:#ffffff}
.template-badge.badge-amp{background:linear-gradient(90deg,#ffb74d,#ff8a65);color:#0b1220}

/* Ensure price head shows badges neatly */
.price-head{display:flex;align-items:center;gap:12px}

/* Responsive: show select on small screens and hide desktop nav */
@media (max-width:900px){
  .template-filter{display:none}
  .template-filter-mobile{display:block}
  /* Chips responsive: stack below header and reduce visual weight — do not override the mobile gradient set earlier */
  .chips{padding:4px 0;border-radius:0;border-top:none;border-bottom:1px solid rgba(255,255,255,.04);margin-top:6px}
  .chips-scroll{padding:4px 10px;scroll-padding-left:12px}
  .chip{padding:5px 10px;font-size:0.9rem;min-height:26px;margin-right:8px}
}
.price-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.26);display:flex;flex-direction:column;min-width:0}
.price-head{padding:14px;background:linear-gradient(90deg,#62d3ff,#ffd34d);color:#0b1220;font-weight:900}
.price-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.list li{display:flex;align-items:center;gap:8px}

.services{padding:22px 0 10px;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.services-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
.svc{display:flex;flex-direction:column;gap:10px;min-width:0;transition:transform .15s ease,border-color .15s ease}
.svc:hover{transform:translateY(-2px);border-color:rgba(98,211,255,.28)}
.svc h3{margin:0;font-size:1.05rem;line-height:1.25;font-weight:900}
.svc p{margin:0;color:var(--muted)}

.pricing{padding:22px 0;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06)}
.price-grid{grid-template-columns:repeat(1,minmax(0,1fr))}

.testi{padding:22px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%)}
.testi-grid{grid-template-columns:repeat(1,minmax(0,1fr))}

.faq{padding:22px 0;background:linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06)}
.faq-item{background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px}

.contact{padding:60px 0;background:radial-gradient(1000px 420px at 50% 0%, rgba(76,201,240,.08), transparent 60%),linear-gradient(180deg,#0b1020 0%, #0f1730 100%);border-top:1px solid rgba(255,255,255,.06)}
.contact-grid{display:grid;gap:40px}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-details{display:grid;gap:24px;margin-top:12px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.icon-box{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#62d3ff}
.detail-title{margin:0 0 4px;font-size:1rem;font-weight:700;color:#eaf0ff}
.detail-text{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.5}

.contact-form-wrapper{background:var(--card);padding:32px;border-radius:24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px rgba(0,0,0,.2)}
.form{display:grid;gap:16px}
.input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:#eaf0ff;transition:border-color .2s, background .2s,font-size .12s; font-size:0.95rem}
.input:focus{outline:none;border-color:#62d3ff;background:rgba(0,0,0,.4)}
.input::placeholder{color:rgba(255,255,255,.3)}

/* Centered modern contact form */
.wrap.contact{display:block;text-align:center}
.wrap.contact .section-title,.wrap.contact .section-desc{margin-left:auto;margin-right:auto;max-width:820px;text-align:center}
.wrap.contact .contact-form-wrapper{max-width:720px;margin:24px auto;padding:36px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));box-shadow:0 30px 70px rgba(2,8,20,.75);border:1px solid rgba(255,255,255,.04)}
.wrap.contact .contact-form{display:block;text-align:left}
.wrap.contact .contact-form label{display:block;font-weight:700;color:var(--muted);margin-bottom:8px}
.wrap.contact .contact-form input,.wrap.contact .contact-form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text);margin-bottom:12px}
.wrap.contact .contact-form textarea{min-height:130px}
.wrap.contact .form-actions{display:flex;justify-content:center;margin-top:8px}
.wrap.contact .btn-pill{padding:12px 30px;border-radius:999px;background:linear-gradient(90deg,#22b8ff,#ffd36b);color:#061426;font-weight:900;box-shadow:0 16px 50px rgba(34,184,255,.08);border:none;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.wrap.contact .btn-pill:hover{transform:translateY(-3px);box-shadow:0 22px 64px rgba(34,184,255,.12)}

@media (max-width:980px){
  .wrap.contact .contact-form-wrapper{padding:20px;margin:18px}
  .wrap.contact .contact-form{padding:0}
}

select.input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239fb2d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.full-width{width:100%;justify-content:center;padding:14px;font-size:1rem}

/* FOOTER */
.footer{margin-top:24px;flex-shrink:0;padding:0}
.footer-layout{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:60px}
.footer-brand{flex:1 1 320px}
.footer-links{flex:0 0 auto;min-width:140px}
.footer-group{flex:2 1 600px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1024px){.footer-group{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.footer-group{grid-template-columns:1fr}}
.footGlass{width:100%;margin:0;padding:18px 16px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));border-top:1px solid rgba(255,255,255,.18);backdrop-filter:saturate(160%) blur(10px);text-align:center}

/* MEDIA QUERIES */
@media (min-width:720px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (min-width:900px){
  html,body{padding-top:var(--headH)}
  /* Header CTA: show dedicated CTA on desktop and hide duplicate CTA inside nav */
  .header-cta{display:inline-flex;order:2;margin-left:8px;margin-right:8px}
  .menu-btn{order:3}
  .head nav.primary .cta-btn{display:none}
  }

/* Reduce base font-size slightly on very small screens to avoid layout issues */
@media (max-width:480px){
  html,body{font-size:17px}
}
  nav.primary{display:flex;align-items:center;gap:12px;margin-right:12px;order:1}
  /* Desktop: show anchors inside primary (static or generated) */
  nav.primary .nav-link{display:inline-flex;padding:8px 10px;font-size:0.98rem}
  .menu-btn{order:2}
  .head{padding-left:20px;padding-right:20px;min-height:var(--headH);align-items:center}
  .chips{z-index:9999;left:0;right:0;border-radius:0}
  .head .brand{font-size:1.8rem;letter-spacing:-0.5px}
  .hero-grid{grid-template-columns:1.2fr 1fr}
  .usp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Desktop: templates grid use 3 columns to avoid overly large cards */
  .template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .testi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr 1.2fr;align-items:start;gap:80px}
}

@supports (content-visibility: auto){
  .services,.pricing,.testi,.faq,.contact{content-visibility:auto;contain-intrinsic-size:800px}
}
/* Card-specific share button override (ensure Share label not clipped) */
.template-card .card-actions .share-btn,
.template-card .card-actions .btn.share-btn{
  width: auto !important;
  height: auto !important;
  min-width: 96px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* MOBILE: hide desktop primary nav & header CTA; keep hamburger and chips visible */
@media (max-width:899px){
  /* Hide the full primary navigation on mobile to avoid layout break */
  nav.primary{display:none !important; visibility:hidden !important}
  /* Hide the header CTA; move CTA to sidebar if needed (sidebar already has actions)
     This prevents CTA overlapping on small screens */
  .header-cta{display:none !important; visibility:hidden !important}
  /* Ensure menu button is visible and ordered appropriately */
  .menu-btn{display:inline-flex !important; order:2}
  /* Ensure chips remain visible as alternative quick nav */
  .chips{display:block !important}

  /* Chips: allow horizontal scrolling and smaller chips on mobile */
  .wrap.chips-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .wrap.chips-scroll::-webkit-scrollbar{height:6px}
  .wrap.chips-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}
  .chip{white-space:nowrap;padding:6px 10px;font-size:0.92rem}

  /* Hero: stack columns and hide heavy right side (image) to speed mobile */
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-grid .hero-right{display:none}
  .hero-grid .hero-left h1{font-size:1.45rem;line-height:1.18}
  .head{padding:8px 12px}

  /* Sidebar CTA: show mobile-only consult button */
  .consult-mobile{display:block !important;margin-bottom:12px}
  .cta-btn.full-width{display:block;width:100%;padding:12px 14px;border-radius:10px;text-align:center}

  /* USP (features) — make compact 2-column grid and vertical cards on mobile */
  .usp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .usp .card{flex-direction:column;align-items:flex-start;padding:12px;border-radius:12px;min-height:auto}
  .usp .ico{width:44px;height:44px;border-radius:10px;margin-bottom:10px}
  .usp .card b{display:block;margin-bottom:6px;font-size:1.02rem}
  .usp .card small{display:block;color:var(--muted);font-size:0.92rem}

  /* Reduce repeated buttons in lists to avoid long stacks on mobile */
  .services .btn:nth-of-type(n+4){display:none !important}

  /* Make services & templates 2-column on mobile/tablet widths */
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .services-grid .svc, .services-grid .price-card, .services-grid .service-card {padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02));min-height:110px;display:flex;flex-direction:column;justify-content:center}
  .services-grid .svc h3{font-size:1.02rem;margin-bottom:6px}
  .services-grid .svc p{font-size:0.92rem;color:var(--muted);line-height:1.3}

  /* CONTACT: stack and tidy on mobile */
  .contact-grid{grid-template-columns:1fr;gap:20px}
  .contact-left{order:1}
  .contact-panel{order:2}
  .contact-left .contact-item{align-items:center;gap:12px}
  .contact-left .ci-icon{width:44px;height:44px;border-radius:10px}
  .contact-left .ci-body{min-width:0}
  .contact-left .ci-text{font-size:0.95rem;color:var(--muted)}
  .contact-panel .panel-form{display:block;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02));border-radius:14px;border:1px solid rgba(255,255,255,.04)}
  .contact-panel .panel-form input, .contact-panel .panel-form select, .contact-panel .panel-form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.01);color:var(--text);margin-bottom:12px}
  .contact-panel .panel-form textarea{min-height:110px}
  .contact-panel .submit-cta{display:block;width:100%;padding:14px;border-radius:12px;background:linear-gradient(90deg,#19b4ff,#6ac7ff,#ffd84d);color:#061426;font-weight:900;border:none}

  /* MOBILE: custom select replacement styling (mobile-only) */
  .mobile-select{display:block;margin-bottom:12px}
  .mobile-select-button{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);color:var(--text);width:100%;text-align:left}
  .mobile-select-button::after{content:'▾';margin-left:8px;opacity:.9}
  .mobile-select-panel{position:relative;display:block;margin-top:6px}
  .mobile-select-list{max-height:320px;overflow:auto;background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02));border-radius:10px;border:1px solid rgba(255,255,255,.04)}
  .mobile-select-item{display:block;width:100%;text-align:left;padding:12px 14px;border:none;background:transparent;color:var(--text);cursor:pointer}
  .mobile-select-item:hover, .mobile-select-item.focus{background:rgba(255,255,255,.02)}
  .mobile-select-item.selected{background:linear-gradient(90deg,#19b4ff,#6ac7ff);color:#061426;font-weight:800}
  .mobile-select-panel[hidden]{display:none}


  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .template-card{margin:0}
  .template-card .card-thumb{height:110px}
  .template-card .tpl-title{font-size:1rem}
  .template-card .tpl-excerpt{display:none}

}

/* MOBILE (narrow phones): make services & templates 2-column for compact modern look */
@media (max-width:599px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .services-grid .service-card{padding:12px;min-height:90px}

  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .template-card{margin:0}
  .template-card .card-thumb{height:120px}
  .template-card .tpl-title{font-size:0.98rem}
  .template-card .tpl-excerpt{display:none}

  /* Slightly reduce CTA/button sizing in these grids */
  .template-card .card-actions .btn, .services-grid .btn{padding:8px 10px;min-width:64px}
}



  overflow: visible !important;
}
@media (prefers-reduced-motion: reduce){*{animation:none;transition:none;scroll-behavior:auto}}

/* == Sidebar V2 (namespaced, fresh) == */
:root{--jzv2-w:320px;--jzv2-bg:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));--jzv2-acc:#62d3ff}
.jzv2-menu-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,var(--jzv2-acc),#ffd34d);color:#061426;border:none;font-weight:900;cursor:pointer;box-shadow:0 12px 40px rgba(98,211,255,.06);transition:transform .12s ease;margin-left:12px}
.jzv2-menu-btn:active{transform:translateY(1px)}
.jzv2-hamburger{width:22px;height:22px}
.jzv2-menu-btn .jzv2-label{display:none}
@media(min-width:900px){.jzv2-menu-btn .jzv2-label{display:inline-block}}
@media(min-width:900px){
  /* Ensure the menu button stays at the far-right of the header on desktop */
  .head .jzv2-menu-btn{order:3;margin-left:auto;position:relative;z-index:10070}
  /* jzv2-hamburger-right:20260131 */
  .head nav.primary{order:2}
}

.jzv2-sidebar{position:fixed;top:0;right:0;height:100vh;width:var(--jzv2-w);max-width:94vw;transform:translateX(110%);transition:transform .34s cubic-bezier(.2,.9,.2,1);background:#061426;/* solid, non-transparent */box-shadow:-30px 40px 90px rgba(2,6,23,.6);z-index:10060;padding:18px;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.04);backdrop-filter:none}
/* Always start closed unless opened programmatically */
.jzv2-sidebar[aria-hidden="true"]{transform:translateX(110%);visibility:visible}
.jzv2-sidebar.jzv2-open{transform:translateX(0)}

/* Left-side variant: keep hamburger on right but slide sidebar from the left */
.jzv2-sidebar.jzv2-left{ left:0; right:auto; transform:translateX(-110%); box-shadow:30px 40px 90px rgba(2,6,23,.6); border-left:none; border-right:1px solid rgba(255,255,255,.04) }
.jzv2-sidebar.jzv2-left[aria-hidden="true"]{ transform:translateX(-110%); }
.jzv2-sidebar.jzv2-left.jzv2-open{ transform:translateX(0) }

.jzv2-sidebar-inner{display:flex;flex-direction:column;height:100%;gap:12px}
.jzv2-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.jzv2-close{background:transparent;border:0;padding:8px;border-radius:8px;color:var(--text);cursor:pointer;font-size:18px}
/* Search visible by default in sidebar */
.jzv2-search{margin-bottom:12px;display:block}
.jzv2-search input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text)}

/* Social */
.jzv2-social{margin-bottom:10px}
.jzv2-social .jzv2-section-title{font-weight:900;margin:0 0 8px;color:var(--jzv2-acc)}
.jzv2-social-list{display:flex;gap:8px;padding:0;margin:0;list-style:none}
.jzv2-social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.02);color:var(--jzv2-acc);text-decoration:none;border:1px solid rgba(255,255,255,.04);transition:transform .12s,box-shadow .12s}
.jzv2-social-link:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(98,211,255,.06)}

/* Newsletter */
.jzv2-newsletter{margin-bottom:12px}
.jzv2-newsletter-form{display:flex;gap:8px;align-items:center}
.jzv2-newsletter-form input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text)}
.jzv2-newsletter-form .btn.subscribe{padding:8px 10px;border-radius:8px}

/* Recent posts */
.jzv2-recent{margin-bottom:12px}
.jzv2-recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jzv2-recent-list a{display:block;padding:8px;border-radius:8px;background:rgba(255,255,255,.02);color:var(--text);text-decoration:none;font-weight:700}
.jzv2-recent-list a:hover{background:rgba(255,255,255,.04)}

/* Actions and footer tweaks */
.jzv2-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.jzv2-foot{margin-top:12px}

.jzv2-search{margin-bottom:12px;display:none}
.jzv2-sidebar.jzv2-open .jzv2-search{display:block}
.jzv2-overlay{position:fixed;inset:0;background:rgba(2,6,23,.6);opacity:0;visibility:hidden;transition:opacity .28s;z-index:10050}
.jzv2-overlay.jzv2-show{opacity:1;visibility:visible}

/* Reset menu list styles and ensure clean vertical styling */
.jzv2-side-menu{display:flex;flex-direction:column;gap:6px;overflow:auto;padding-right:6px;list-style:none;margin:0;padding:0}
.jzv2-side-menu, .jzv2-side-menu ul{list-style:none;margin:0;padding:0}
.jzv2-side-menu li{list-style:none}
/* Make sidebar menu items visually consistent and clearly visible (non-invasive) */
.jzv2-side-menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);font-weight:800;text-decoration:none;background:rgba(255,255,255,.02);transition:background .12s,transform .08s}
.jzv2-side-menu a:hover{background:rgba(255,255,255,.04);transform:translateY(-2px)}
.jzv2-side-menu a .icon{margin-right:8px;opacity:.95}

/* TEMP DEBUG: highlight sidebar menu area so we can visually confirm presence (remove after debug) */
.jzv2-side-menu.debug-highlight{outline:2px dashed rgba(255,165,0,0.95);background:linear-gradient(180deg, rgba(255,165,0,0.03), rgba(255,165,0,0.01));padding:4px;border-radius:8px}
.jzv2-side-menu.debug-highlight li{min-height:36px}
.jzv2-side-menu.debug-highlight a{background:rgba(0,200,255,0.06)}

/* Make the sidebar inner able to shrink so children that are flex:1 can scroll */
.jzv2-sidebar-inner{ position:relative; min-height:0 }

/* Scrolling wrapper for the menu - prevents overlap with newsletter/recent blocks */
.jzv2-side-menu-wrap{ flex:1 1 auto; min-height:0; overflow:auto; padding-right:6px }

/* Ensure menu has an obvious scroll area on small screens */
.jzv2-side-menu{ max-height: calc(100vh - 260px); overflow:auto }

/* Submenu flyout panel (appears to the left of the sidebar) */
.jzv2-subpanel{ position:absolute; top:0; right:100%; width:var(--jzv2-w); max-width:94vw; background:#061426; box-shadow:-18px 24px 60px rgba(2,6,23,.6); z-index:11000; transform:translateX(8px); opacity:0; visibility:hidden; transition:transform .22s ease, opacity .18s ease; padding:12px; border-left:1px solid rgba(255,255,255,.04); border-radius:8px }
.jzv2-subpanel.jzv2-open{ transform:translateX(0); opacity:1; visibility:visible }
.jzv2-subpanel .jzv2-subpanel-back{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; background:transparent; border-radius:8px; border:1px solid rgba(255,255,255,.04); color:var(--jzv2-acc); cursor:pointer; font-weight:700 }
.jzv2-subpanel ul{ margin-top:12px; list-style:none; padding:0 }
.jzv2-subpanel li a{ display:block; padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.02); color:var(--text); font-weight:700; text-decoration:none }

/* Make sure subpanel doesn't block overlay interactions */
.jzv2-subpanel{ pointer-events:auto }

/* When the sidebar is on the left, the subpanel should fly out to the right */
.jzv2-sidebar.jzv2-left .jzv2-subpanel{ left:100%; right:auto; transform:translateX(-8px); box-shadow:18px 24px 60px rgba(2,6,23,.48); border-left:none; border-right:1px solid rgba(255,255,255,.04) }
.jzv2-sidebar.jzv2-left .jzv2-subpanel.jzv2-open{ transform:translateX(0); opacity:1; visibility:visible }

/* Keep default submenu inline behavior as fallback for non-JS */
.jzv2-has-submenu > ul{ display:none }
.jzv2-has-submenu[aria-expanded="true"] > ul{ display:block }

/* Submenu progressive enhancement */
.jzv2-has-submenu .jzv2-sub-toggle{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:6px}
/* Inline accordion modern style */
.jzv2-has-submenu > ul{margin-top:6px;padding-left:8px;display:block;max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.2,.9,.2,1),opacity .18s ease;opacity:0;border-left:2px solid rgba(255,255,255,.02);padding-left:10px}
.jzv2-has-submenu > ul[hidden]{display:block;/* keep block so animation works; JS will set hidden attr */}
.jzv2-has-submenu.jzv2-sub-open > ul{max-height:1000px;opacity:1}
.jzv2-has-submenu[aria-expanded="true"] > ul{max-height:1000px;opacity:1}
.jzv2-has-submenu[aria-expanded="false"] > ul{max-height:0;opacity:0}
.jzv2-sub-toggle .jzv2-caret{display:inline-block;transition:transform .18s ease;transform-origin:center}
.jzv2-sub-toggle[aria-expanded="true"] .jzv2-caret{transform:rotate(180deg);color:var(--brand)}

/* Make caret a larger, right-aligned touch target */
.jzv2-has-submenu{position:relative}
.jzv2-has-submenu > a{display:flex;align-items:center;padding-right:54px}
.jzv2-has-submenu .jzv2-sub-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;border-radius:8px;padding:6px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02)}
.jzv2-has-submenu .jzv2-sub-toggle:focus{outline:2px solid rgba(98,211,255,.18);outline-offset:2px}

.jzv2-side-menu ul li a{padding:10px 12px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));font-weight:700}
.jzv2-side-menu ul li a:hover{background:rgba(255,255,255,.04);transform:translateY(-1px)}
.jzv2-has-submenu.jzv2-sub-open > a{box-shadow:inset 0 -4px 12px rgba(0,0,0,.28)}
.jzv2-side-menu .jzv2-has-submenu > ul{will-change: max-height, opacity}

/* Safety override: ensure sidebar submenus are rendered as block inside the sidebar
   This prevents global `.sub-menu { display:none }` from hiding our animated accordions
   and is narrowly scoped to the sidebar menu only to avoid affecting templates. */
#jzv2-side-nav .sub-menu,
#jzv2-side-nav .sub-menu[hidden],
.jzv2-side-menu .sub-menu,
.jzv2-side-menu .sub-menu[hidden]{
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}

/* keep existing open states functional */
.jzv2-has-submenu.jzv2-sub-open > ul,
.jzv2-has-submenu[aria-expanded="true"] > ul{max-height:1000px;opacity:1}

/* Temporary guard: hide legacy menu button to avoid duplicate hamburger UI */
.menu-btn.modern{display:none !important}

/* Defensive: ensure overlay is above header */
.jzv2-overlay{z-index:10059}
.jzv2-sidebar{z-index:10060}

/* simple morph lines when open */
.jzv2-menu-btn.jzv2-open .jzv2-line.a{transform-origin:center;transform:translateY(5px) rotate(45deg)}
.jzv2-menu-btn.jzv2-open .jzv2-line.b{opacity:0}
.jzv2-menu-btn.jzv2-open .jzv2-line.c{transform-origin:center;transform:translateY(-5px) rotate(-45deg)}

/* Ensure legacy sidebar UI remains hidden while v2 is active */
.menu-btn{display:none !important}
#sidebar{display:none !important}
#overlay{display:none !important}

/* mobile: hide primary nav to keep header compact */
@media(max-width:899px){ nav.primary{display:none !important;visibility:hidden !important} .header-cta{display:none !important} }

/* End Sidebar V2 */

/* Sidebar removed — ensure no legacy hamburger or overlay shows */
.menu-btn{display:none !important}
#sidebar, #overlay{display:none !important}