:root{
  --navy:#08145a;
  --navy-2:#101d7a;
  --ink:#0d153d;
  --muted:#66708f;
  --line:#e5e9f4;
  --surface:#ffffff;
  --soft:#f7f8ff;
  --soft-blue:#f1f4ff;
  --primary:#2448ff;
  --primary-2:#6d23ff;
  --cyan:#1b9cff;
  --green:#11a75c;
  --orange:#ff7a24;
  --red:#ff3b4f;
  --shadow:0 14px 40px rgba(28,43,107,.10);
  --shadow-sm:0 6px 18px rgba(25,39,98,.08);
  --radius:14px;
  --radius-lg:22px;
  --container:1230px;
  /* Global Typography & Layout (Admin -> Settings -> Typography & Layout).
     Defaults below match the site's original look exactly (scale 1,
     weight 750, body-scale 1) - nothing changes until an admin picks a
     larger option. A small inline <style> block in <head> overrides
     these on the pages that read that admin setting (see header.php). */
  --heading-scale:1;
  --heading-weight:750;
  --body-scale:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:var(--heading-weight)}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:0 0 auto}
.container{width:min(calc(100% - 32px),var(--container));margin:0 auto}
.muted{color:var(--muted)}
.stars{color:#ffb000;letter-spacing:1px}
.text-gradient{background:linear-gradient(90deg,#1764f7,#6d23ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Utility/header */
.utility-bar{background:linear-gradient(90deg,#071052,#0a165f 62%,#101b72);color:#fff;font-size:12px}
.utility-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.utility-benefits,.utility-links{display:flex;align-items:center;gap:22px}
.utility-benefits span,.utility-links span,.utility-links a{display:inline-flex;align-items:center;gap:6px;opacity:.95;white-space:nowrap}
.utility-benefits .icon{width:15px;height:15px}.utility-links a:hover{opacity:.75}
.mock-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-main-row{height:72px;display:flex;align-items:center;gap:22px}
.mock-logo{display:inline-flex;align-items:center;gap:8px;font-size:21px;font-weight:850;white-space:nowrap}
.x-logo{display:inline-grid;place-items:center;font-weight:1000;font-size:34px;line-height:1;letter-spacing:-5px;width:36px;background:linear-gradient(135deg,#2a73ff 0%,#4d38ff 50%,#9a38ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:skew(-7deg)}
.desktop-nav{display:flex;align-items:center;gap:25px;margin-left:auto;white-space:nowrap}
.desktop-nav a{position:relative;font-size:12.5px;font-weight:650;color:#263157;padding:27px 0}
.desktop-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:-1px;height:2px;background:linear-gradient(90deg,#2a65ff,#7533ff);transition:.22s}
.desktop-nav a:hover,.desktop-nav a.active{color:#2b42ff}.desktop-nav a:hover:after,.desktop-nav a.active:after{left:0;right:0}
.mock-header-search{display:flex;align-items:center;border:1px solid #dce2f2;border-radius:9px;overflow:hidden;width:248px;height:40px;background:#fff;box-shadow:0 2px 7px rgba(36,72,255,.04)}
.mock-header-search input{border:0;outline:0;padding:0 12px;width:100%;font-size:12px;color:var(--ink)}
.mock-header-search button,.mobile-search-row button{border:0;background:linear-gradient(135deg,#155cf8,#5821f7);color:white;height:100%;width:43px;display:grid;place-items:center;cursor:pointer}
.mock-header-search button .icon,.mobile-search-row button .icon{width:18px}
.mock-header-actions{display:flex;align-items:center;gap:15px}
.account-action{display:flex;align-items:center;gap:7px}.account-action>svg{width:22px}.account-action span{display:grid;line-height:1.05}.account-action b{font-size:11px}.account-action small{font-size:10px;color:var(--muted)}
.header-cart{position:relative;display:grid;place-items:center}.header-cart svg{width:25px;height:25px}.header-cart span{position:absolute;right:-9px;top:-10px;background:#ff2d3f;color:#fff;border:2px solid #fff;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800}
.header-menu-btn{display:none;border:0;background:none;padding:4px;cursor:pointer}.mobile-search-row,.mobile-drawer{display:none}

/* Buttons and common */
.btn{border:1px solid transparent;border-radius:8px;min-height:43px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;font-size:13px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(40,48,140,.14)}
.btn .icon{width:17px}.btn-primary{color:#fff;background:linear-gradient(100deg,#0e62f6,#4a20ff 70%,#7428ff)}
.btn-secondary{background:#fff;color:var(--ink);border-color:#dfe4f0}.btn-light{background:#fff;color:#2432bc;border-color:#fff}.btn-block{width:100%}.btn-sm{min-height:34px;padding:0 13px;font-size:12px}
.panel,.mock-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 14px rgba(25,39,98,.035)}
.reveal{opacity:0;transform:translateY(10px);transition:.5s ease}.reveal.is-visible{opacity:1;transform:none}

/* Hero */
.mock-hero{background:radial-gradient(circle at 72% 38%,rgba(80,74,255,.10),transparent 30%),linear-gradient(180deg,#fff,#fbfcff);border-bottom:1px solid #eef1f8}
.mock-hero-fullscreen{min-height:88vh;display:flex;align-items:center}
.mock-hero-fullscreen .mock-hero-grid{min-height:auto;width:100%;padding:40px 0}
.mock-hero-fullscreen h1{font-size:clamp(calc(38px * var(--heading-scale)),5.2vw,calc(64px * var(--heading-scale)))}
.mock-hero-grid{min-height:365px;display:grid;grid-template-columns:46% 54%;align-items:center;gap:18px;padding:28px 0 20px}
.mock-hero-copy{position:relative;z-index:2}
.breadcrumbs{font-size:12px;color:#727b9b;margin:0 0 14px}.breadcrumbs a{color:#3154f4;font-weight:700}
.mock-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:20px;background:#eef4ff;color:#1761e8;font-weight:700;font-size:11px;margin-bottom:14px}.mock-eyebrow .icon{width:14px;height:14px}
.mock-hero h1{font-size:clamp(calc(28px * var(--heading-scale)),3.4vw,calc(42px * var(--heading-scale)));line-height:1.18;letter-spacing:-1.4px;margin:0 0 13px;font-weight:850;color:#0e153a;overflow-wrap:break-word}.mock-hero h1 span,.gradient-word{background:linear-gradient(90deg,#1a67f5,#5a29ff 78%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mock-hero-copy>p{font-size:calc(15px * var(--body-scale));max-width:580px;color:#596482;margin:0 0 18px}
.mock-hero-actions{display:flex;gap:12px;margin-bottom:18px}.mock-hero-art{display:flex;align-items:center;justify-content:center;min-height:280px;overflow:hidden}.mock-hero-art img{width:100%;max-width:610px;filter:saturate(1.08) contrast(1.03);animation:heroFloat 5s ease-in-out infinite;image-rendering:-webkit-optimize-contrast}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mock-trust-row{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin:16px 0}
.mock-trust{display:flex;align-items:center;gap:8px;min-width:102px}.mock-trust>span:first-child{width:28px;height:28px;display:grid;place-items:center}.mock-trust svg{width:20px}.mock-trust>span:last-child{display:grid;line-height:1.2}.mock-trust b{font-size:10px}.mock-trust small{font-size:9px;color:#6d7691;white-space:nowrap}
.rating-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #e5e9f4;border-radius:25px;background:#fff;padding:6px 12px;box-shadow:var(--shadow-sm)}.rating-pill-empty{color:var(--muted)}
.avatar-stack{display:flex}.avatar-stack i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d8e7ff,#784bff);color:#fff;font-style:normal;font-size:8px;font-weight:800;border:2px solid #fff;margin-left:-7px}.avatar-stack i:first-child{margin-left:0}.rating-pill>span{display:grid;line-height:1.2}.rating-pill small{font-size:9px;color:#737c99}.rating-pill .stars{font-size:10px}
.hero-search{max-width:520px;display:flex;align-items:stretch;border:1px solid #dbe1ef;border-radius:9px;overflow:hidden;background:#fff;height:48px;margin:17px 0 13px;box-shadow:0 6px 18px rgba(36,72,255,.06)}
.hero-search input{min-width:0;flex:1;border:0;padding:0 15px;outline:0}.hero-search select{border:0;border-left:1px solid #e5e9f4;padding:0 10px;outline:0;background:#fff}.hero-search button{border:0;background:linear-gradient(90deg,#195df5,#6324f4);color:#fff;font-weight:750;padding:0 28px;cursor:pointer}

/* Sections */
.mock-section{padding:30px 0}.mock-section.tight{padding:20px 0}.mock-section.soft{background:#fbfcff}.mock-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:15px}.mock-section-heading h2{font-size:calc(22px * var(--heading-scale));line-height:1.2;margin:0 0 3px;letter-spacing:-.4px}.mock-section-heading p{margin:0;color:var(--muted);font-size:calc(12px * var(--body-scale))}.mock-section-heading>a{font-size:11px;color:#3a3fff;font-weight:800;white-space:nowrap}
.mock-category-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.mock-category-tile{height:86px;border:1px solid #e2e7f2;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:700;transition:.2s;box-shadow:0 2px 9px rgba(25,39,98,.025)}.mock-category-tile:hover{border-color:#775cff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}.category-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#4b37f5;background:linear-gradient(145deg,#f0edff,#eaf6ff)}.category-icon svg{width:22px;height:22px}.category-icon-custom{background:none;overflow:hidden}.category-icon-custom img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.mock-product-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.mock-product-card{border:1px solid #e2e7f2;border-radius:12px;background:#fff;overflow:hidden;min-width:0;box-shadow:0 4px 16px rgba(25,39,98,.035);transition:.2s}.mock-product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mock-product-media{height:190px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--product-from),var(--product-to));overflow:hidden}.mock-product-media img{width:100%;height:100%;object-fit:cover}.product-monogram{font-size:32px;font-weight:900;color:#fff;text-shadow:0 3px 10px rgba(0,0,0,.25)}.sale-tag{position:absolute;z-index:2;top:9px;left:9px;background:#fff;color:#ff3349;border:1px solid #ffbac2;padding:3px 8px;border-radius:7px;font-size:9px;font-weight:850}.mock-product-body{padding:12px 14px 14px}.mock-product-category{display:block;font-size:9px;color:#9aa2bd;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}.mock-product-body h3{font-size:12px;margin:0 0 2px;line-height:1.25}.mock-product-body small{font-size:9px;color:#737c98}.mini-feature-list{margin:7px 0;padding:0;list-style:none;display:grid;gap:3px;color:#5f6987;font-size:9px}.mini-feature-list li:before{content:"✓";color:#18a45d;margin-right:5px}.mock-price-row{display:flex;align-items:center;gap:6px;margin-top:7px}.mock-price-row>span:first-child{display:flex;align-items:baseline;gap:5px;min-width:0}.mock-price-row strong{font-size:15px;white-space:nowrap}.mock-price-row del{color:#9ba2b7;font-size:9px;white-space:nowrap}.rating-mini{font-size:9px;color:#f4a600;margin-left:auto;white-space:nowrap}.mini-cart{width:27px;height:27px;border:0;border-radius:6px;background:linear-gradient(135deg,#285cff,#6024f6);color:#fff;display:grid;place-items:center;cursor:pointer}.mini-cart svg{width:15px;height:15px}.mock-product-card.is-compact .mock-product-media{height:150px}.mock-product-card.is-compact .mock-product-body{padding:8px}.mock-product-card.is-compact h3{font-size:11px}
.mock-feature-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border:1px solid #e4e8f3;background:linear-gradient(90deg,#f8f9ff,#f5f6ff);border-radius:10px;overflow:hidden}.mock-feature-item{min-height:68px;display:flex;align-items:center;justify-content:center;gap:10px;border-right:1px solid #e2e6f2;padding:10px}.mock-feature-item:last-child{border:0}.round-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2239ee;box-shadow:0 3px 12px rgba(30,56,230,.08)}.round-icon svg{width:20px}.mock-feature-item>span:last-child{display:grid;line-height:1.2}.mock-feature-item b{font-size:10px}.mock-feature-item small{font-size:9px;color:#78809a}

/* Service cards / home */
.service-image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service-image-card{position:relative;border:1px solid #e3e8f2;border-radius:12px;min-height:145px;overflow:hidden;background:#f7f8ff}.service-image-card img{width:100%;height:100%;object-fit:cover;transition:.25s}.service-image-card:hover img{transform:scale(1.02)}
.review-faq-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.mock-review-card{border:1px solid var(--line);border-radius:12px;padding:17px;display:flex;gap:14px;background:#fff;min-height:140px}.mock-review-card-empty{align-items:center;justify-content:center}.mock-review-card-empty p{margin:0}.review-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ffd6b9,#6951ef);display:grid;place-items:center;color:#fff;font-weight:900}.mock-review-card>div:last-child{flex:1}.mock-review-card b{font-size:13px}.mock-review-card small{display:block;font-size:10px}.verified{color:#13a55d}.mock-review-card p{font-size:12px;color:#48516f;margin:6px 0 0}.mock-faq-list{border:1px solid var(--line);border-radius:12px;padding:9px;background:#fff}.mock-faq{border-bottom:1px solid #e8ebf4}.mock-faq:last-child{border:0}.mock-faq button{width:100%;border:0;background:none;padding:11px 8px;display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:11px;font-weight:650;color:var(--ink);cursor:pointer}.mock-faq button b{font-size:15px;font-weight:400}.faq-answer{display:none;padding:0 8px 12px;color:var(--muted);font-size:11px}.mock-faq.open .faq-answer{display:block}.mock-faq.open button b{transform:rotate(45deg)}
.mock-cta{min-height:84px;border-radius:12px;background:linear-gradient(100deg,#1d28d2,#283cff 50%,#6531f8);color:#fff;padding:17px 28px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden}.mock-cta:before{content:"";position:absolute;right:10%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.23),transparent 65%)}.mock-cta>div{position:relative;z-index:1}.mock-cta h2{margin:0;font-size:20px}.mock-cta p{margin:2px 0 0;font-size:11px;opacity:.85}.mock-cta .btn{margin-left:auto;position:relative;z-index:2}.mock-cta>img{position:absolute;right:0;bottom:-30px;width:220px;opacity:.65}

/* Tabs/brands/amounts */
.mock-tab-row,.brand-row,.amount-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.mock-tab-row::-webkit-scrollbar,.brand-row::-webkit-scrollbar,.amount-row::-webkit-scrollbar{display:none}.filter-tab,.brand-pill,.amount-pill{border:1px solid #e0e5f0;background:#fff;border-radius:8px;height:52px;min-width:128px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:700;white-space:nowrap}.filter-tab.active,.amount-pill.active{border-color:#563cff;color:#4230eb;background:#f9f8ff;box-shadow:inset 0 0 0 1px #563cff}.brand-pill{height:45px;min-width:125px}.brand-pill img{height:22px;width:auto}.amount-pill{height:38px;min-width:76px;cursor:pointer}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.shop-toolbar h2{margin:0;font-size:20px}.shop-toolbar select{height:38px;border:1px solid #dfe4ef;border-radius:8px;padding:0 12px;background:#fff;font-size:11px}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e2e7f1;border-radius:10px;background:#f9faff}.how-step{display:flex;align-items:center;gap:12px;padding:16px;border-right:1px solid #e3e7f2}.how-step:last-child{border:0}.how-step>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#492cf2;box-shadow:var(--shadow-sm)}.how-step svg{width:20px}.how-step div{display:grid}.how-step b{font-size:10px}.how-step small{font-size:9px;color:var(--muted)}

/* Services/process/pricing/portfolio */
.mock-service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.mock-service-card{border:1px solid #e2e7f2;border-radius:10px;padding:15px;min-height:155px;background:#fff}.service-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#3e37f1;background:linear-gradient(145deg,#edf2ff,#f5ecff);margin-bottom:11px}.service-icon svg{width:22px}.mock-service-card h3{font-size:12px;line-height:1.25;margin:0 0 7px}.mock-service-card p{font-size:10px;color:var(--muted);margin:0 0 8px}.mock-service-card a{font-size:10px;color:#3150f8;font-weight:800}
.mock-process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px dashed #d9dff0;padding-top:14px}.process-step{display:flex;gap:9px;align-items:flex-start;position:relative}.process-step:not(:last-child):after{content:"→";position:absolute;right:12px;top:12px;color:#77809d}.process-step>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f0edff;color:#3e36ee;font-weight:850;font-size:12px}.process-step>div{display:grid;max-width:140px}.process-step b{font-size:11px}.process-step small{font-size:9px;color:var(--muted)}
.portfolio-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.portfolio-card{border:1px solid #e2e6ef;border-radius:9px;overflow:hidden;background:#fff}.portfolio-card img{height:85px;width:100%;object-fit:cover}.portfolio-card div{padding:8px}.portfolio-card b{font-size:10px;display:block}.portfolio-card small{font-size:9px;color:var(--muted)}
.mock-pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mock-price-card{position:relative;border:1px solid #e1e6f0;border-radius:11px;padding:17px;background:#fff;min-height:285px}.mock-price-card.popular{border-color:#6241ff;box-shadow:0 5px 20px rgba(77,46,242,.12)}.popular-label{position:absolute;top:-10px;right:14px;background:#6238f5;color:#fff;padding:3px 9px;border-radius:9px;font-size:9px;font-weight:800}.mock-price-card h3{margin:0 0 4px;font-size:14px}.mock-price-card>p{font-size:10px;color:var(--muted);margin:0}.plan-price{font-size:25px;font-weight:850;margin:10px 0}.mock-price-card ul{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:7px;font-size:10px}.mock-price-card li{display:flex;gap:6px;align-items:center}.mock-price-card li svg{width:14px;color:#0fa45a}
.tech-grid{display:flex;flex-wrap:wrap;gap:8px}.tech-pill{border:1px solid #e0e5ef;border-radius:7px;padding:8px 11px;font-size:10px;background:#fff;display:inline-flex;align-items:center;gap:6px}.tech-dot{width:15px;height:15px;border-radius:4px;background:linear-gradient(135deg,#ff772f,#3b5fff)}

/* Domain */
.tld-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:11px}.tld-card{border:1px solid #e1e6f0;border-radius:10px;padding:17px;text-align:center;background:#fff;min-height:135px}.tld-card strong{display:block;font-size:23px;color:#3156f4}.tld-card:nth-child(2) strong{color:#752df0}.tld-card:nth-child(3) strong{color:#11a25c}.tld-card:nth-child(4) strong{color:#ff7519}.tld-card:nth-child(5) strong{color:#7634ef}.tld-card small{font-size:9px;color:var(--muted)}.tld-card b{font-size:16px;display:block;margin:9px 0}.tld-card a{display:inline-block;padding:5px 15px;border-radius:6px;background:#f0f1ff;color:#3440e9;font-size:10px;font-weight:750}
.three-panel-grid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:14px}.info-panel{border:1px solid #e2e7f2;border-radius:11px;padding:18px;background:#fff;min-height:180px;position:relative;overflow:hidden}.info-panel h3{margin:0 0 8px;font-size:15px}.info-panel p,.info-panel li{font-size:10px;color:var(--muted)}.info-panel ul{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}.info-panel li:before{content:"✓";color:#17a45e;margin-right:7px}.info-panel img{position:absolute;right:0;bottom:0;width:46%;max-height:120px;object-fit:contain}.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.benefit-item{display:flex;gap:10px}.benefit-item>span{width:34px;height:34px;border:1px solid #e1e5f2;border-radius:9px;display:grid;place-items:center;color:#3839ed}.benefit-item svg{width:18px}.benefit-item div{display:grid}.benefit-item b{font-size:11px}.benefit-item small{font-size:9px;color:var(--muted)}

/* Hosting */
.hosting-layout{display:grid;grid-template-columns:210px 1fr;gap:15px}.hosting-layout>div{min-width:0}.hosting-benefits{border:1px solid #e2e7f1;border-radius:11px;padding:16px;background:#fff}.hosting-benefits h3{margin:0 0 15px;font-size:15px}.hosting-benefit{display:flex;gap:9px;margin:0 0 16px}.hosting-benefit>span{width:34px;height:34px;border-radius:50%;background:#f1efff;display:grid;place-items:center;color:#3b35ed}.hosting-benefit b{font-size:10px}.hosting-benefit small{display:block;color:var(--muted);font-size:9px}.hosting-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.hosting-plan{position:relative;border:1px solid #e0e5ef;border-radius:11px;padding:17px;background:#fff}.hosting-plan.popular{border:1.5px solid #6747ff}.hosting-plan h3{font-size:14px;margin:0}.hosting-plan>p{font-size:10px;color:var(--muted);min-height:31px}.hosting-price{font-size:25px;font-weight:850;white-space:nowrap}.hosting-price small{font-size:10px;color:#69718d;font-weight:500}.save-pill{display:inline-block;border:1px solid #ff8a94;color:#ff3448;border-radius:12px;padding:2px 7px;font-size:9px;margin:8px 0}.hosting-plan ul{list-style:none;padding:0;margin:10px 0 15px;display:grid;gap:6px;font-size:10px}.hosting-plan li:before{content:"✓";color:#10a258;margin-right:6px}.billing-toggle{display:flex;justify-content:flex-end;gap:4px;margin-bottom:12px}.billing-toggle button{border:1px solid #e0e4ef;background:#fff;border-radius:7px;padding:7px 13px;font-size:10px}.billing-toggle button.active{background:#f0edff;color:#4c35f1}.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e2e6f1;border-radius:10px;background:#fbfcff}.stat-highlight{display:flex;align-items:center;justify-content:center;gap:13px;padding:20px;border-right:1px solid #e3e6f2}.stat-highlight:last-child{border:0}.stat-highlight strong{font-size:26px;color:#223eea}.stat-highlight small{display:block;color:var(--muted);font-size:10px}

/* Contact */
.contact-main-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}.form-card,.quick-contact-card{border:1px solid #e1e6f0;border-radius:12px;padding:18px;background:#fff}.form-card h2,.quick-contact-card h2{margin:0;font-size:18px}.form-card>p,.quick-contact-card>p{font-size:10px;color:var(--muted);margin:2px 0 14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:grid;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:10px;font-weight:750}.field input,.field select,.field textarea,.admin-table select{width:100%;border:1px solid #dfe4ef;border-radius:7px;background:#fff;padding:10px 11px;outline:0;font-size:11px;color:var(--ink)}.field input:focus,.field select:focus,.field textarea:focus{border-color:#5d47f4;box-shadow:0 0 0 3px rgba(90,66,245,.08)}.contact-method{display:flex;align-items:center;gap:12px;border:1px solid #e2e6f0;border-radius:9px;padding:12px;margin-bottom:8px}.contact-method>span{width:38px;height:38px;border-radius:50%;background:#efeaff;color:#4e32eb;display:grid;place-items:center}.contact-method.green>span{background:#e8fbef;color:#0fa658}.contact-method.blue>span{background:#e9f3ff;color:#1766ed}.contact-method svg{width:20px}.contact-method div{display:grid;line-height:1.25}.contact-method b{font-size:11px}.contact-method small{font-size:9px;color:var(--muted)}.contact-method>em{margin-left:auto;font-size:16px;color:#7e87a1;font-style:normal}.contact-details-grid{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:14px}.detail-card{border:1px solid #e2e6f0;border-radius:11px;padding:16px;background:#fff;min-height:150px}.detail-card h3{font-size:13px;margin:0 0 10px;color:#2543e8}.detail-card p,.detail-card li{font-size:10px;color:#4f5875}.detail-card ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.support-topic-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.support-topic{border:1px solid #e1e6f0;border-radius:10px;padding:13px;background:#fff;display:flex;gap:9px}.support-topic>span{width:32px;height:32px;border-radius:9px;background:#f0edff;color:#4535ee;display:grid;place-items:center}.support-topic svg{width:18px}.support-topic b{font-size:10px}.support-topic small{display:block;font-size:8px;color:var(--muted)}

/* Shop/product/cart/checkout/auth */
.page-header-small{padding:35px 0;background:linear-gradient(180deg,#fafbff,#fff);border-bottom:1px solid #edf0f7}.page-header-small h1{font-size:32px;margin:4px 0}.page-header-small p{color:var(--muted);margin:0}.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:18px}.shop-sidebar{border:1px solid #e1e6f0;border-radius:12px;padding:16px;height:max-content;position:sticky;top:122px}.shop-sidebar h3{margin:0 0 12px;font-size:14px}.shop-sidebar a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 4px;font-size:11.5px;color:#4f5875;border-bottom:1px solid #eef0f6}.shop-sidebar a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shop-sidebar a b{flex-shrink:0;font-weight:700;color:#9aa2bd;background:#f4f6fb;border-radius:20px;padding:1px 8px;font-size:10px}.shop-sidebar a.active{color:#3940ec;font-weight:750}.shop-sidebar a.active b{color:#3940ec;background:#ebedfe}.shop-sidebar a:last-child{border:0}.shop-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}.product-detail-media-wrap{position:sticky;top:125px}.product-detail-media{border:1px solid #e1e6f0;border-radius:16px;overflow:hidden;min-height:420px;display:grid;place-items:center;background:linear-gradient(135deg,var(--product-from),var(--product-to))}.product-detail-media.has-image{background:#fff}.product-media-display{width:100%;height:100%;min-height:420px;display:grid;place-items:center}.product-detail-media .product-monogram{font-size:90px}.product-media-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.product-media-thumb{width:64px;height:64px;border-radius:9px;border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;background:#f4f6fb;position:relative}.product-media-thumb img{width:100%;height:100%;object-fit:cover}.product-media-thumb.active{border-color:var(--primary)}.product-media-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,15,40,.45);color:#fff;font-size:16px}
.product-media-display iframe,.product-media-display video{width:100%;height:100%;border:0;min-height:420px}.product-detail-info h1{font-size:36px;line-height:1.15;margin:8px 0}.product-detail-info>p{color:var(--muted)}.product-detail-price{font-size:32px;font-weight:850;margin:15px 0;white-space:nowrap}.product-detail-price del{font-size:16px;color:#969db1;margin-left:8px}.detail-benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.detail-benefit{border:1px solid #e2e7f1;border-radius:9px;padding:11px;display:flex;gap:9px;align-items:center;font-size:10px}.detail-benefit svg{color:#343cf0}.qty-row{display:flex;gap:10px;margin:16px 0}.qty-control{display:flex;border:1px solid #dfe4ef;border-radius:8px;overflow:hidden}.qty-control button{width:38px;border:0;background:#f8f9fd;font-size:18px}.qty-control input{width:45px;border:0;text-align:center}.product-tabs-nav{display:flex;gap:6px;border-bottom:1px solid #e5e9f4;margin-bottom:22px;overflow-x:auto}.product-tab-btn{border:0;background:none;padding:12px 18px;font-size:12px;font-weight:750;color:#8891ac;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}.product-tab-btn:hover{color:#4f5875}.product-tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.product-tab-panel{display:none}.product-tab-panel.active{display:block}.rich-card{border:1px solid #e1e6f0;border-radius:12px;padding:18px}.rich-card h2{font-size:17px;margin:0 0 10px}.rich-card p,.rich-card li{font-size:11px;color:var(--muted)}
.cart-layout,.checkout-layout{display:grid;grid-template-columns:1fr 360px;gap:20px}.cart-list,.checkout-form-card,.order-summary{border:1px solid #e1e6f0;border-radius:12px;background:#fff;padding:18px}.cart-item{display:grid;grid-template-columns:110px 1fr auto;gap:15px;align-items:center;padding:14px 0;border-bottom:1px solid #edf0f6}.cart-item:last-child{border:0}.cart-thumb{height:75px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--product-from),var(--product-to));display:grid;place-items:center}.cart-thumb img{width:100%;height:100%;object-fit:cover}.cart-thumb span{color:#fff;font-weight:900}.cart-item h3{font-size:13px;margin:0}.cart-item small{font-size:10px;color:var(--muted)}.cart-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.cart-actions input{width:60px;border:1px solid #dde2ee;border-radius:7px;padding:8px;text-align:center}.btn-remove-item{display:inline-flex;align-items:center;gap:5px;border:1px solid #ffd3d9;background:#fff5f6;color:#e0293f;border-radius:7px;padding:8px 11px;font-size:10px;font-weight:700;cursor:pointer}.btn-remove-item:hover{background:#ffe4e7;border-color:#ffb4bd}.btn-remove-item svg{width:13px}.link-button{border:0;background:none;color:#e32942;font-size:10px;cursor:pointer}.order-summary{height:max-content;position:sticky;top:125px}.order-summary h2{font-size:18px;margin:0 0 15px}.summary-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef0f6;font-size:11px}.summary-line.total{font-size:16px;font-weight:850;border:0}.summary-products{display:grid;gap:10px;margin-bottom:12px}.summary-product{display:flex;justify-content:space-between;gap:10px;font-size:10px}.payment-options{display:grid;gap:9px}.payment-option{border:1px solid #e0e5ef;border-radius:8px;padding:12px;display:flex;gap:8px;font-size:11px}.payment-option input{accent-color:#4a34ef}.success-card,.empty-state{max-width:680px;margin:35px auto;text-align:center;border:1px solid #e1e6f0;border-radius:16px;padding:44px 40px;background:linear-gradient(180deg,#fff,#fafbff)}.success-icon,.empty-icon{width:76px;height:76px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:#eafff1;color:#0ca55c;font-size:35px;box-shadow:0 8px 24px rgba(12,165,92,.14);animation:heroFloat 4s ease-in-out infinite}.empty-icon{background:linear-gradient(145deg,#f1efff,#eaf2ff);color:#4b39ef;box-shadow:0 8px 24px rgba(75,57,239,.14)}.empty-state h2{font-size:19px;margin:0 0 6px}.empty-state p{color:var(--muted);font-size:12px;margin:0 0 18px}.auth-wrap{min-height:650px;display:grid;place-items:center;padding:45px 16px;background:radial-gradient(circle at 20% 10%,rgba(66,77,255,.13),transparent 30%),#fafbff}.auth-shell{width:min(900px,100%);display:grid;grid-template-columns:1fr 1fr;border:1px solid #e0e5ef;border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.auth-visual{background:linear-gradient(150deg,#0b1769,#3930ed 65%,#792efa);color:#fff;padding:42px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.auth-visual:after{content:"X";position:absolute;font-size:260px;font-weight:1000;right:-25px;bottom:-85px;opacity:.1}.auth-visual h2{font-size:32px;line-height:1.15;margin:0 0 12px}.auth-visual p{opacity:.82}.auth-card{padding:42px}.auth-card h1{font-size:28px;margin:0 0 6px}.auth-card>p{font-size:11px;color:var(--muted)}.auth-card form{display:grid;gap:13px;margin:20px 0}.auth-card .field label{font-size:11px}.auth-card .field input{height:44px}.track-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}.order-track-result{margin-top:18px;border:1px solid #e1e6f0;border-radius:12px;padding:18px}.track-progress{display:grid;grid-template-columns:repeat(5,1fr);margin-top:20px}.track-step{text-align:center;position:relative}.track-step:before{content:"";position:absolute;left:-50%;right:50%;top:16px;height:2px;background:#e1e5ef}.track-step:first-child:before{display:none}.track-step span{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#e9ecf5;color:#7b849e}.track-step.done span{background:#3150f6;color:#fff}.track-step.done:before{background:#3150f6}.track-step b{display:block;font-size:10px;margin-top:6px}

/* Footer */
.mock-footer{background:linear-gradient(120deg,#102b9e,#07165c 62%,#2634d4);color:#fff;margin-top:0}.footer-main-grid{display:grid;grid-template-columns:1.35fr repeat(4,.75fr) 1.35fr;gap:28px;padding:33px 0 25px}.footer-logo{color:#fff;font-size:17px}.footer-logo .x-logo{font-size:28px;width:30px}.footer-about p,.footer-newsletter p{font-size:10px;color:rgba(255,255,255,.76);max-width:210px}.footer-social{display:flex;gap:8px}.footer-social a{width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.11);display:grid;place-items:center;font-size:10px}.footer-main-grid h4{font-size:12px;margin:0 0 9px}.footer-main-grid>div:not(.footer-about):not(.footer-newsletter){display:flex;flex-direction:column}.footer-main-grid>div>a{font-size:10px;color:rgba(255,255,255,.82);margin:2px 0}.footer-main-grid a:hover{color:#fff}.footer-newsletter form{display:flex;height:38px}.footer-newsletter input{flex:1;border:0;border-radius:6px 0 0 6px;padding:0 12px;min-width:0;font-size:10px}.footer-newsletter button{border:0;background:#5832f5;color:#fff;border-radius:0 6px 6px 0;padding:0 17px;font-size:10px;font-weight:750}.footer-bottom-row{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.82)}.payment-logos{display:flex;align-items:center;gap:16px}.payment-logos i{width:28px;height:17px;border-radius:8px;background:linear-gradient(90deg,#f34c3c 50%,#ffb50b 50%)}.payment-logos .g-color{color:#58b6ff}.footer-bottom-row svg{width:14px}
.mobile-bottom-nav{display:none}

/* Toast */
.toast-stack{position:fixed;right:20px;top:120px;z-index:100;display:grid;gap:8px}.toast{min-width:270px;background:#fff;border-radius:10px;padding:12px 38px 12px 14px;box-shadow:var(--shadow);border-left:4px solid #24a364;position:relative;font-size:12px;display:flex;align-items:flex-start;gap:9px}
.toast-icon{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e9fbef;color:#0e9d55;margin-top:1px}
.toast-icon svg{width:12px}
.toast-error .toast-icon{background:#ffe9ed;color:#d43a52}
.toast-warning .toast-icon{background:#fff4dd;color:#c07d00}.toast-error{border-color:#e33d50}.toast button{position:absolute;right:8px;top:7px;border:0;background:none;font-size:20px;color:#76809a;cursor:pointer}

/* Dashboard shell */
.dashboard-body{background:#f8faff;min-height:100vh}.dash-topbar{height:70px;background:#fff;border-bottom:1px solid #e2e7f1;display:flex;align-items:center}.dash-top-inner{width:100%;display:flex;align-items:center;gap:20px;padding:0 24px}.dash-search{height:40px;max-width:500px;flex:1;border:1px solid #dfe4ef;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px}.dash-search svg{color:#69728e}.dash-search input{border:0;outline:0;width:100%;font-size:11px;background:transparent}.dash-user{margin-left:auto;display:flex;align-items:center;gap:9px}.dash-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffd5bd,#5c44ed);color:#fff;font-weight:850}.dash-user span{display:grid;line-height:1.2}.dash-user b{font-size:11px}.dash-user small{font-size:9px;color:var(--muted)}.dashboard-shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 70px)}.dash-sidebar{background:#fff;border-right:1px solid #e1e6f0;padding:18px 14px;display:flex;flex-direction:column}.dash-sidebar .mock-logo{font-size:18px;padding:0 9px 18px}.dash-nav{display:grid;gap:4px}.dash-nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:8px;font-size:11px;color:#263055;font-weight:650}.dash-nav a.active,.dash-nav a:hover{background:#eeeefe;color:#2d3ff1}.dash-nav svg{width:18px}.dash-sidebar-card{margin-top:auto;background:linear-gradient(150deg,#2945ff,#6f36f6);border-radius:12px;padding:17px;color:#fff}.dash-sidebar-card h3{font-size:14px;margin:0 0 5px}.dash-sidebar-card p{font-size:9px;opacity:.85}.dash-main{padding:25px;min-width:0}.dash-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dash-title-row h1{font-size:25px;margin:0}.dash-title-row p{margin:1px 0 0;color:var(--muted);font-size:11px}.dash-actions{display:flex;gap:8px}.dash-grid-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:15px}.dash-stat{border:1px solid #e1e6f0;border-radius:11px;background:#fff;padding:15px;display:flex;gap:11px;min-height:92px}.dash-stat-icon{width:42px;height:42px;border-radius:11px;background:#f0edff;color:#4338ee;display:grid;place-items:center}.dash-stat-icon svg{width:21px}.dash-stat>div{display:grid;align-content:start}.dash-stat small{font-size:9px;color:#4d5673}.dash-stat strong{font-size:20px;line-height:1.15}.dash-stat a{font-size:9px;color:#3049f3;font-weight:750}.dash-two-col{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:14px}.dash-three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.dash-card{border:1px solid #e1e6f0;border-radius:11px;background:#fff;padding:15px;min-width:0}.dash-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.dash-card-header h2{font-size:14px;margin:0}.dash-card-header a{font-size:9px;color:#3148f2;font-weight:750}.purchase-list,.subscription-grid,.saved-list,.ticket-list{display:grid;gap:8px}.purchase-item{display:grid;grid-template-columns:34px 1fr auto auto;gap:8px;align-items:center;border-bottom:1px solid #eef0f6;padding-bottom:8px}.purchase-item:last-child{border:0;padding-bottom:0}.product-mini-logo{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#f1efff;font-weight:900;color:#3c3bee;overflow:hidden}.product-mini-logo img{width:100%;height:100%;object-fit:cover}.purchase-item div{display:grid}.purchase-item b{font-size:10px}.purchase-item small{font-size:8px;color:var(--muted)}.purchase-item>strong{font-size:10px}.status-pill{padding:3px 7px;border-radius:10px;background:#e9fbef;color:#0e9d55;font-size:8px;font-weight:750}.status-pill.pending{background:#fff4dd;color:#e18700}.status-pill.cancelled{background:#ffe9ed;color:#db3548}.subscription-grid{grid-template-columns:1fr 1fr}.subscription-card{border:1px solid #e2e7f1;border-radius:9px;padding:10px;display:flex;gap:9px;align-items:center}.subscription-card .product-mini-logo{width:42px;height:42px}.subscription-card div{display:grid}.subscription-card b{font-size:10px}.subscription-card small{font-size:8px;color:var(--muted)}.dash-banner{background:linear-gradient(100deg,#2436e7,#5232f7);color:#fff;border-radius:10px;padding:16px;margin-top:10px;position:relative;overflow:hidden}.dash-banner h3{margin:0;font-size:14px}.dash-banner p{font-size:9px;margin:2px 0}.dash-banner img{position:absolute;right:0;bottom:0;height:100%;max-width:45%;object-fit:cover;mix-blend-mode:screen}.saved-item,.ticket-item{display:flex;align-items:center;gap:9px;border-bottom:1px solid #eef0f6;padding:8px 0}.saved-item:last-child,.ticket-item:last-child{border:0}.saved-item>span,.ticket-item>span{width:30px;height:30px;border-radius:8px;background:#eff0ff;color:#3d3bee;display:grid;place-items:center}.saved-item svg,.ticket-item svg{width:17px}.saved-item div,.ticket-item div{display:grid}.saved-item b,.ticket-item b{font-size:9px}.saved-item small,.ticket-item small{font-size:8px;color:var(--muted)}.saved-item em,.ticket-item em{margin-left:auto;font-style:normal;font-size:8px}.progress-ring{width:98px;height:98px;border-radius:50%;background:conic-gradient(#3c36ed 0 76%,#e8eaf3 76%);display:grid;place-items:center;position:relative}.progress-ring:after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:#fff}.progress-ring strong{position:relative;z-index:1;color:#3638eb;font-size:19px}.dash-table{width:100%;border-collapse:collapse}.dash-table th,.dash-table td{text-align:left;padding:9px 7px;border-bottom:1px solid #edf0f6;font-size:9px}.dash-table th{color:#727b96;font-weight:650}.dash-table tr:last-child td{border:0}.chart-box{height:230px;position:relative;overflow:hidden}.chart-box svg{width:100%;height:100%}.quick-actions-list{display:grid}.quick-action{display:flex;align-items:center;gap:10px;border-bottom:1px solid #eef0f6;padding:10px 4px;font-size:10px;font-weight:650}.quick-action:last-child{border:0}.quick-action svg{width:17px;color:#4b4cec}.quick-action span:last-child{margin-left:auto;color:#7d859f}.top-products{display:grid;gap:11px}.top-product-row{display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:center}.top-product-row b{font-size:9px}.top-product-row small{font-size:8px;color:var(--muted)}.bar-line{height:3px;background:#e8eaf1;border-radius:4px;margin-top:4px}.bar-line i{display:block;height:100%;background:#3d43f2;border-radius:4px}.performance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.performance-card{border:1px solid #e2e6ef;border-radius:9px;padding:10px}.performance-card b{font-size:9px}.performance-card strong{display:block;font-size:13px}.sparkline{height:28px;margin-top:5px}.sparkline svg{width:100%;height:100%}.dash-mobile-nav{display:none}
/* These were previously declared inside the @media(max-width:900px) block
   below, which meant they had NO display:none default outside that query —
   on desktop the browser used its normal display (block/inline) instead,
   so the full admin nav list rendered as an unstyled strip of icons and
   labels at the bottom of the page. They're base (always-on) rules now:
   hidden by default everywhere, and only ever shown via the .open class
   that JS adds when the mobile "More" button (itself only visible under
   the mobile nav media query) is tapped. */
.dash-mobile-more-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;color:#4f5875;gap:2px;background:none;border:0;padding:0;font-family:inherit;cursor:pointer;transition:color .2s ease,transform .2s ease}.dash-mobile-more-btn:active{transform:scale(.92)}.dash-mobile-more-btn svg{width:19px;transition:transform .2s ease}.dash-mobile-more-btn.active{color:#2b3df1;font-weight:800}.dash-mobile-more-btn.active:before{content:"";position:absolute;top:4px;width:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,#2a65ff,#7533ff)}.dash-mobile-more-btn.active svg{transform:rotate(90deg)}
.dash-mobile-more-overlay{display:none;position:fixed;inset:0;background:rgba(12,18,45,.45);z-index:89;opacity:0;transition:opacity .2s ease}.dash-mobile-more-overlay.open{display:block;opacity:1}
.dash-mobile-more-sheet{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;z-index:90;padding:10px 16px 20px;max-height:70vh;overflow-y:auto;box-shadow:0 -10px 30px rgba(20,30,90,.18);transform:translateY(12px);opacity:0;transition:transform .22s ease,opacity .22s ease}.dash-mobile-more-sheet.open{display:block;transform:translateY(0);opacity:1}
.dash-mobile-more-handle{width:38px;height:4px;border-radius:3px;background:#dde2ef;margin:2px auto 14px}
.dash-mobile-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dash-mobile-more-grid a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;text-align:center;padding:14px 6px;border-radius:12px;background:#f7f8ff;color:#263055;font-size:9px;font-weight:700;line-height:1.3;min-height:76px}.dash-mobile-more-grid a span{word-break:break-word}.dash-mobile-more-grid a.active{background:#eeeefe;color:#2d3ff1}.dash-mobile-more-grid svg{width:19px;flex:0 0 auto}
.section-order-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.section-order-row{display:flex;align-items:center;gap:12px;border:1px solid #e1e6f0;border-radius:10px;padding:11px 14px;background:#fafbff;cursor:grab}.section-order-row.dragging{opacity:.4}.section-order-row.drag-over{border-color:#4c49f5;box-shadow:0 0 0 2px rgba(76,73,245,.15)}.section-order-handle{color:#9aa3c4;display:flex}.section-order-handle svg{width:17px}.section-order-info{flex:1;min-width:0;display:grid}.section-order-info b{font-size:12px}.section-order-info small{font-size:9px;color:var(--muted)}.section-order-num{width:64px;border:1px solid #dde2ee;border-radius:7px;padding:8px;text-align:center;font-size:11px}

/* Admin tables/forms */
.admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e1e6f0;border-radius:10px;overflow:hidden}.admin-table th,.admin-table td{text-align:left;padding:11px 10px;border-bottom:1px solid #edf0f6;font-size:10px;vertical-align:top}.admin-table th{background:#fafbfe;color:#66708f;font-weight:700}.admin-table tr:last-child td{border:0}.admin-actions{display:flex;gap:6px}.admin-form-panel{border:1px solid #e1e6f0;border-radius:11px;background:#fff;padding:18px;margin-bottom:16px}.admin-form-panel h2{margin:0 0 13px;font-size:16px}

@media(max-width:1180px){
  .desktop-nav{gap:15px}.desktop-nav a{font-size:11px}.mock-header-search{width:205px}.header-main-row{gap:15px}
  .mock-product-grid{grid-template-columns:repeat(4,1fr)}.mock-service-grid{grid-template-columns:repeat(3,1fr)}.mock-category-grid{grid-template-columns:repeat(5,1fr)}
  .support-topic-grid{grid-template-columns:repeat(3,1fr)}.footer-main-grid{grid-template-columns:1.4fr repeat(4,.8fr);}.footer-newsletter{grid-column:1/-1}
  .dash-grid-stats{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:900px){
  body{padding-bottom:68px}.utility-bar{display:none}.mock-header{position:sticky}.header-main-row{height:64px;padding:0 3px;gap:10px}.header-menu-btn{display:block}.mock-logo{font-size:17px}.x-logo{font-size:29px;width:31px}.desktop-nav,.mock-header-search,.account-action span{display:none}.mock-header-actions{margin-left:auto}.account-action{display:grid;place-items:center}.mobile-search-row{display:block;padding:0 0 10px}.mobile-search-row form{height:42px;border:1px solid #dfe4ef;border-radius:8px;display:flex;overflow:hidden}.mobile-search-row input{flex:1;border:0;padding:0 12px;outline:0;font-size:11px}.mobile-drawer{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #e2e6ef;box-shadow:var(--shadow);padding:8px 16px;display:none;grid-template-columns:1fr 1fr;gap:3px}.mobile-drawer.open{display:grid}.mobile-drawer a{padding:10px;border-radius:7px;font-size:12px}.mobile-drawer a:hover{background:#f2f3ff;color:#3444ef}
  .mock-hero-grid{grid-template-columns:1fr;padding:22px 0 16px;gap:5px}.mock-hero h1{font-size:31px;letter-spacing:-.8px}.mock-hero-copy>p{font-size:13px}.mock-hero-art{grid-row:2;min-height:auto}.mock-hero-art img{max-width:560px}.mock-trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rating-pill{margin-top:3px}.mock-hero-actions .btn{flex:1;padding:0 12px}
  .mock-section{padding:24px 0}.mock-category-grid{grid-template-columns:repeat(4,1fr);gap:8px}.mock-category-tile{height:78px;font-size:9px}.category-icon{width:34px;height:34px}.mock-product-grid,.shop-product-grid{grid-template-columns:repeat(2,1fr);gap:10px}.mock-product-media{height:95px}.mini-feature-list{display:none}.mock-product-body h3{font-size:11px}.mock-price-row strong{font-size:14px}
  .mock-feature-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.mock-feature-item{border-right:1px solid #e3e6f2;border-bottom:1px solid #e3e6f2}.mock-feature-item:nth-child(even){border-right:0}.mock-feature-item:nth-last-child(-n+2){border-bottom:0}.service-image-grid{grid-template-columns:1fr 1fr}.review-faq-grid{grid-template-columns:1fr}.mock-section-heading h2{font-size:19px}.mock-tab-row .filter-tab{min-width:95px;height:48px;padding:0 10px}.how-grid{grid-template-columns:1fr 1fr}.how-step:nth-child(2){border-right:0}.how-step:nth-child(-n+2){border-bottom:1px solid #e3e7f2}
  .mock-service-grid{grid-template-columns:repeat(2,1fr)}.mock-process{grid-template-columns:1fr;gap:12px;border:0}.process-step:not(:last-child):after{display:none}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.mock-pricing-grid{grid-template-columns:repeat(2,1fr)}
  .tld-grid{grid-template-columns:repeat(3,1fr)}.three-panel-grid{grid-template-columns:1fr}.contact-main-grid,.contact-details-grid{grid-template-columns:1fr}.support-topic-grid{grid-template-columns:repeat(2,1fr)}.hosting-layout{grid-template-columns:1fr}.hosting-plans{grid-template-columns:repeat(2,1fr)}.stats-strip{grid-template-columns:1fr 1fr}.stat-highlight:nth-child(2){border-right:0}.stat-highlight:nth-child(-n+2){border-bottom:1px solid #e3e6f2}
  .shop-layout{grid-template-columns:1fr}.shop-sidebar{position:static}.shop-sidebar{display:flex;overflow-x:auto;gap:8px}.shop-sidebar h3{display:none}.shop-sidebar a{white-space:nowrap;border:1px solid #e0e5ef;border-radius:7px;padding:7px 10px}.product-detail-grid,.cart-layout,.checkout-layout{grid-template-columns:1fr}.product-detail-media-wrap,.order-summary{position:static}.product-detail-media,.product-media-display{min-height:280px}.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.track-form{grid-template-columns:1fr}.track-progress{grid-template-columns:1fr 1fr;gap:15px}.track-step:before{display:none}
  .footer-main-grid{grid-template-columns:1fr 1fr;gap:20px}.footer-about,.footer-newsletter{grid-column:1/-1}.footer-bottom-row{flex-direction:column;gap:12px;text-align:center}.mock-footer{margin-bottom:0}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:64px;background:#fff;border-top:1px solid #dde2ef;display:grid;grid-template-columns:repeat(5,1fr);z-index:70;box-shadow:0 -5px 20px rgba(13,22,78,.08)}.mobile-bottom-nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:9px;color:#4e5878}.mobile-bottom-nav svg{width:20px;height:20px}.mobile-bottom-nav a.active{color:#2d42f5;font-weight:800}
  .dashboard-body{padding-bottom:64px}.dash-topbar{height:64px}.dash-top-inner{padding:0 14px}.dash-search{display:none}.dashboard-shell{display:block}.dash-sidebar{display:none}.dash-main{padding:16px}.dash-title-row{align-items:flex-start}.dash-title-row h1{font-size:21px}.dash-actions{display:none}.dash-grid-stats{grid-template-columns:1fr 1fr;gap:9px}.dash-stat{padding:11px;min-height:82px}.dash-stat strong{font-size:17px}.dash-stat-icon{width:36px;height:36px}.dash-two-col,.dash-three-col{grid-template-columns:1fr}.subscription-grid{grid-template-columns:1fr 1fr}.performance-grid{grid-template-columns:1fr 1fr}.chart-box{height:200px}.dash-mobile-nav{display:grid;position:fixed;bottom:0;left:0;right:0;height:64px;background:#fff;border-top:1px solid #dde2ef;grid-template-columns:repeat(5,1fr);z-index:80;box-shadow:0 -6px 20px rgba(20,30,90,.06)}.dash-mobile-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;color:#4f5875;gap:2px;transition:color .2s ease,transform .2s ease}.dash-mobile-nav a:active{transform:scale(.92)}.dash-mobile-nav a.active{color:#2b3df1;font-weight:800}.dash-mobile-nav a.active:before{content:"";position:absolute;top:4px;width:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,#2a65ff,#7533ff)}.dash-mobile-nav svg{width:19px;transition:transform .2s ease}.dash-mobile-nav a.active svg{transform:translateY(-1px)}.admin-table{display:block;overflow-x:auto;white-space:nowrap}
}

@media(max-width:560px){
  .mock-hero-fullscreen{min-height:auto;padding:34px 0}.container{width:min(calc(100% - 24px),var(--container))}.mock-logo strong{font-size:16px}.mock-hero-grid{padding-top:16px}.mock-eyebrow{font-size:9px}.mock-hero h1{font-size:calc(27px * var(--heading-scale))}.mock-hero-copy>p{font-size:12px}.mock-hero-actions{gap:8px}.btn{min-height:42px;font-size:11px;padding:0 13px}.mock-trust b{font-size:9px}.mock-trust small{font-size:8px}.mock-hero-art img{width:112%;max-width:none;margin-left:-6%}.rating-pill{padding:5px 9px}.mock-category-grid{grid-template-columns:repeat(4,1fr)}.mock-category-tile{height:72px}.mock-product-grid,.shop-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mock-product-media{height:82px}.mock-product-body{padding:8px}.rating-mini{display:none}.mock-feature-item{padding:8px;justify-content:flex-start}.round-icon{width:32px;height:32px}.mock-feature-item b{font-size:9px}.service-image-grid{grid-template-columns:1fr}.mock-cta{padding:15px;min-height:90px}.mock-cta h2{font-size:16px}.mock-cta .btn{padding:0 12px}.mock-service-grid{grid-template-columns:1fr 1fr}.mock-service-card{padding:12px;min-height:145px}.portfolio-grid{grid-template-columns:1fr 1fr}.mock-pricing-grid{display:flex;overflow-x:auto}.mock-price-card{min-width:250px}.tld-grid{grid-template-columns:repeat(2,1fr)}.benefit-grid{grid-template-columns:1fr}.hosting-plans{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px}.hosting-plans .hosting-plan{scroll-snap-align:start}.hosting-plan{min-width:260px}.stats-strip{grid-template-columns:1fr 1fr}.stat-highlight{padding:13px;gap:8px}.stat-highlight strong{font-size:20px}.contact-main-grid{gap:12px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.support-topic-grid{grid-template-columns:1fr 1fr}.cart-item{grid-template-columns:75px 1fr}.cart-item>div:last-child{grid-column:1/-1}.cart-actions{justify-content:flex-end}.detail-benefits{grid-template-columns:1fr}.product-detail-info h1{font-size:28px}.auth-card{padding:28px 22px}.footer-main-grid{grid-template-columns:1fr 1fr;padding-top:26px}.footer-about,.footer-newsletter{grid-column:1/-1}.footer-main-grid h4{font-size:11px}.footer-main-grid>div>a{font-size:9px}.dash-user span{display:none}.dash-grid-stats{grid-template-columns:1fr 1fr}.dash-stat{display:block}.dash-stat-icon{margin-bottom:7px}.subscription-grid{grid-template-columns:1fr 1fr}.purchase-item{grid-template-columns:32px 1fr auto}.purchase-item>.status-pill{display:none}.dash-three-col{gap:10px}.performance-grid{grid-template-columns:1fr 1fr}.dash-card{padding:12px}.track-progress{grid-template-columns:1fr 1fr}.mock-section-heading>a{font-size:9px}.hero-search{height:44px}.hero-search button{padding:0 18px}
}


/* Milestone 1.2.1 configurable products */
.product-option-panel{margin:18px 0;padding:18px;border:1px solid #dfe4f2;border-radius:14px;background:linear-gradient(180deg,#fff,#f8f9ff)}.product-option-panel h3{margin:0 0 4px;font-size:17px}.product-option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:13px}.product-option-grid .field label{font-size:11px;font-weight:800;color:#222b4e}.product-option-grid select,.product-option-grid input{width:100%;height:44px;border:1px solid #d8deec;border-radius:9px;padding:0 11px;background:#fff;color:#18203f}.variation-status{margin-top:12px;padding:10px 12px;border-radius:8px;background:#fff4e5;color:#9b5d00;font-size:11px;font-weight:700}.variation-status.available{background:#eafaf1;color:#087744}.credential-fields{margin-top:13px;padding-top:13px;border-top:1px dashed #d9deeb}.credential-notice{display:flex;gap:10px;align-items:center;padding:10px;border-radius:9px;background:#eef1ff;color:#2634bd}.credential-notice svg{width:22px}.credential-notice span{display:grid}.credential-notice small{font-size:9px;color:#596386}.secure-note{display:flex!important;align-items:center;gap:4px;color:#3343ca!important;margin-top:4px}.secure-note svg{width:12px}.variation-admin-table{display:grid;gap:7px;overflow-x:auto}.variation-row{display:grid;grid-template-columns:80px 80px 150px 110px 110px 80px 55px 34px;gap:7px;min-width:760px;align-items:center}.variation-row input,.variation-row select{width:100%;height:38px;border:1px solid #dbe0eb;border-radius:7px;padding:0 8px}.variation-head{font-size:9px;font-weight:800;color:#66708f;padding:0 4px}.variation-remove{border:0;background:#fff0f0;color:#cf2f2f;width:30px;height:30px;border-radius:7px;font-size:18px;cursor:pointer}.order-detail-panel{margin-bottom:15px}.order-detail-item{border:1px solid #e4e8f1;border-radius:10px;padding:13px;margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:9px}.order-detail-item h3{margin:0;font-size:13px}.order-detail-item p{margin:3px 0;font-size:10px;color:#68718d}.order-detail-item dl{grid-column:1/-1;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.order-detail-item dl div{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;background:#f7f8fc;border-radius:7px}.order-detail-item dt{font-size:9px;color:#68718d}.order-detail-item dd{margin:0;font-size:9px;font-weight:700}.credential-reveal button{border:0;background:none;color:#3044ed;font-weight:800;cursor:pointer;font-size:9px}@media(max-width:700px){.product-option-grid{grid-template-columns:1fr}.variation-admin-table{overflow-x:auto}.order-detail-item dl{grid-template-columns:1fr}}

/* Milestone 1.2.2 WooCommerce importer */
.import-warning-list,.import-error-list{margin-top:16px;padding:14px 16px;border-radius:14px;background:#fff8e7;border:1px solid #f4d58a}.import-error-list{background:#fff0f1;border-color:#efb8bd}.import-warning-list h3,.import-error-list h3{margin:0 0 8px}.import-warning-list ul,.import-error-list ul{margin:0;padding-left:20px;max-height:260px;overflow:auto}.admin-form-panel input[type=file]{padding:12px;background:#f8f9ff;border:1px dashed #9ea7d5;border-radius:12px}@media(max-width:900px){.dash-grid-stats[style*="repeat(5"]{grid-template-columns:repeat(2,1fr)!important}}

/* Milestone 1.3 — motion & interaction system */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes floatSlow{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-18px)}}
@keyframes floatSlower{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16px,14px) scale(1.06)}}
@keyframes pulseGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes toastIn{from{opacity:0;transform:translateX(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(24px) scale(.97)}}
@keyframes rippleAnim{to{transform:scale(2.6);opacity:0}}
@keyframes barIndeterminate{0%{left:-35%;width:35%}60%{left:100%;width:45%}100%{left:100%;width:45%}}
@keyframes badgePop{0%{transform:scale(1)}35%{transform:scale(1.35)}60%{transform:scale(.92)}100%{transform:scale(1)}}

/* Scroll-reveal (progressive enhancement: content is fully visible without JS) */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1);transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}

/* Progress bars */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#2448ff,#6d23ff,#1b9cff);z-index:9999;transition:width .12s ease;pointer-events:none}
#nav-loading{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#2448ff,#6d23ff);z-index:10000;pointer-events:none;opacity:0;transition:opacity .2s ease}
#nav-loading.active{opacity:1;width:100%;overflow:hidden}
#nav-loading.active:before{content:"";position:absolute;top:0;height:100%;width:45%;background:rgba(255,255,255,.65);animation:barIndeterminate 1.1s ease-in-out infinite}

/* Sticky header */
.mock-header,.dash-topbar{transition:box-shadow .3s ease}
.mock-header.is-scrolled,.dash-topbar.is-scrolled{box-shadow:0 8px 24px rgba(20,30,90,.09)}

/* Hero ambient motion */
.mock-hero{position:relative;overflow:hidden}
.mock-hero:before,.mock-hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.mock-hero:before{width:340px;height:340px;top:-130px;right:6%;background:radial-gradient(circle,rgba(60,90,255,.15),transparent 70%);animation:floatSlow 9s ease-in-out infinite}
.mock-hero:after{width:260px;height:260px;bottom:-110px;left:3%;background:radial-gradient(circle,rgba(150,60,255,.12),transparent 70%);animation:floatSlower 11s ease-in-out infinite}
.mock-hero-grid{position:relative;z-index:1}
.mock-cta:before{animation:pulseGlow 6s ease-in-out infinite}
.auth-visual:after{animation:floatSlower 14s ease-in-out infinite}

/* FAQ smooth accordion (overrides display:none/block toggle) */
.faq-answer{display:block;max-height:0;overflow:hidden;opacity:0;padding:0 8px;transition:max-height .4s ease,opacity .3s ease,padding .3s ease}
.mock-faq.open .faq-answer{max-height:480px;opacity:1;padding:0 8px 12px}
.mock-faq button b{display:inline-block;transition:transform .3s ease}

/* Card hover-lift group */
.mock-price-card,.hosting-plan,.portfolio-card,.tld-card,.support-topic,.detail-card,.mock-service-card,.how-step,.info-panel,.contact-method,.dash-stat,.stat-highlight,.performance-card,.subscription-card,.dash-card{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease}
.mock-price-card:hover,.hosting-plan:hover,.portfolio-card:hover,.tld-card:hover,.support-topic:hover,.detail-card:hover,.mock-service-card:hover,.how-step:hover,.info-panel:hover,.contact-method:hover,.dash-stat:hover,.stat-highlight:hover,.performance-card:hover,.subscription-card:hover,.dash-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(25,39,98,.10);border-color:#cdd4f6}
.mock-feature-item{transition:transform .25s ease,background .25s ease}
.mock-feature-item:hover{transform:translateY(-2px);background:rgba(255,255,255,.6)}

/* Product/category imagery */
.mock-product-media img,.portfolio-card img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mock-product-card:hover .mock-product-media img{transform:scale(1.08)}
.portfolio-card:hover img{transform:scale(1.06)}
.category-icon{transition:transform .3s ease}
.mock-category-tile:hover .category-icon{transform:scale(1.12) rotate(-6deg)}
.mini-cart{transition:transform .22s ease,box-shadow .22s ease}
.mini-cart:hover{transform:scale(1.14) rotate(-4deg);box-shadow:0 8px 18px rgba(40,60,255,.35)}

/* Buttons */
.btn{position:relative;overflow:hidden}
.btn:active{filter:brightness(.94)}
.btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rippleAnim .6s ease-out forwards;pointer-events:none}
.btn-secondary .btn-ripple,.btn-light .btn-ripple{background:rgba(60,70,180,.18)}

/* Toasts */
.toast{animation:toastIn .4s cubic-bezier(.2,.9,.25,1.15)}
.toast.hide{animation:toastOut .28s ease forwards}

/* Cart badge pop */
.header-cart span.pop{animation:badgePop .5s ease}

@media(max-width:900px){
  .mobile-drawer{display:grid;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;pointer-events:none}
  .mobile-drawer.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease;pointer-events:auto}
}

/* Milestone 1.4 — admin chrome: sidebar badges, quick add, notifications, customers/marketing */
.nav-badge{margin-left:auto;background:#ff2d3f;color:#fff;font-size:8px;font-weight:800;border-radius:20px;padding:2px 6px;line-height:1.4}
.dash-sidebar-footer{margin-top:10px;padding:0 9px;font-size:9px;color:var(--muted);text-align:center}
.dash-sidebar-footer a{color:#3049f3;font-weight:700}

.quick-add-dropdown{position:relative}
.quick-add-dropdown summary{list-style:none;cursor:pointer}
.quick-add-dropdown summary::-webkit-details-marker{display:none}
.quick-add-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid #e1e6f0;border-radius:10px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;min-width:190px;z-index:60}
.quick-add-menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;font-size:11px;font-weight:650;color:#263157}
.quick-add-menu a:hover{background:#f2f3ff;color:#3444ef}
.quick-add-menu svg{width:16px}

.topbar-icon-btn{position:relative;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#454e6f;border:1px solid #e5e9f4;background:#fff;flex:0 0 auto;transition:background .2s ease,color .2s ease}
.topbar-icon-btn:hover{background:#f2f3ff;color:#3444ef}
.topbar-icon-btn svg{width:18px}
.icon-badge{position:absolute;top:-6px;right:-6px;background:#ff2d3f;color:#fff;font-size:8px;font-weight:800;border-radius:20px;padding:2px 5px;border:2px solid #fff;min-width:16px;text-align:center}

.trend-up{font-size:10px;font-weight:800;color:#0fa45a;background:#eafaf1;padding:2px 6px;border-radius:8px;vertical-align:middle}

@media(max-width:900px){
  .quick-add-dropdown,.topbar-icon-btn{display:none}
}

/* Milestone 1.5 — image sharpness fixes + refined icon treatment */

/* Hero art: cap display size closer to native source resolution to avoid upscale blur */
.mock-hero-art img{max-width:500px}

/* Product detail: source art is small logo/card artwork, not a full-bleed photo.
   Show it contained and floating on its gradient card instead of stretched/cropped
   to fill the whole panel — this was the worst source of visible blur on the site. */
.product-detail-media{padding:40px}
.product-detail-media img{width:auto;height:auto;max-width:90%;max-height:90%;object-fit:contain;filter:drop-shadow(0 18px 32px rgba(10,20,80,.24));animation:floatSlow 7s ease-in-out infinite}

/* Service showcase images: contain instead of crop so small source art isn't upscaled */
.service-image-card{display:flex;align-items:center;justify-content:center;padding:16px}
.service-image-card img{width:auto;height:auto;max-width:80%;max-height:80%;object-fit:contain;border-radius:0;box-shadow:none;transition:transform .3s ease}
.service-image-card:hover img{transform:scale(1.05)}

/* Icon treatment: replace flat pastel-box look with a more dimensional ring + glow,
   sized up slightly so icons feel crafted rather than like generic placeholder tiles */
.category-icon,.service-icon,.round-icon,.hosting-benefit>span,.contact-method>span,.how-step>span,.support-topic>span,.dash-stat-icon,.saved-item>span,.ticket-item>span,.process-step>span,.benefit-item>span{
  box-shadow:inset 0 0 0 1px rgba(60,55,230,.12),0 6px 16px rgba(45,50,190,.12);
  transform:scale(1.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.mock-service-card:hover .service-icon,
.how-step:hover>span,
.support-topic:hover>span,
.contact-method:hover>span,
.process-step:hover>span,
.saved-item:hover>span,
.ticket-item:hover>span,
.hosting-benefit:hover>span,
.benefit-item:hover>span,
.mock-feature-item:hover .round-icon,
.dash-stat:hover .dash-stat-icon{
  box-shadow:inset 0 0 0 1px rgba(60,55,230,.22),0 10px 24px rgba(45,50,190,.2);
  transform:scale(1.13);
}

/* Milestone 1.7 — coupon at checkout */
.coupon-form{display:flex;gap:8px;margin:14px 0}
.coupon-form input{flex:1;height:38px;border:1px solid #dde2ee;border-radius:8px;padding:0 12px;font-size:11px}
.coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0;padding:10px 12px;border-radius:8px;background:#eafaf1;color:#0b7a45;font-size:11px;font-weight:700}
.coupon-applied svg{width:14px}
.coupon-applied form{margin:0}
.coupon-applied .link-button{color:#0b7a45;text-decoration:underline}

/* Milestone 1.8 — legal pages, settings forms, payment proof */
.legal-content{max-width:760px;margin:0 auto;color:#333d5c;font-size:13px;line-height:1.8}
.legal-content h2{font-size:16px;margin:26px 0 8px;color:#111a3d}
.legal-content p{margin:0 0 10px}
.legal-content ul{margin:0 0 10px;padding-left:20px}
.legal-content li{margin-bottom:6px}
.legal-content em{color:#6a7395}

/* Milestone 1.9 — wishlist, reviews */
.mock-product-card{position:relative}
.product-card-actions{position:absolute;top:10px;right:10px;z-index:5;display:flex;flex-direction:column;gap:8px}
.product-quick-view,.wishlist-heart{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#8891ac;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(20,30,90,.14);transition:transform .2s ease,color .2s ease,background .2s ease,opacity .2s ease}
.product-quick-view svg,.wishlist-heart svg{width:15px}
.product-quick-view:hover,.wishlist-heart:hover{transform:scale(1.12)}
.wishlist-heart.is-active{color:#ff3b6b;background:#fff}
.wishlist-heart.is-active svg{fill:#ff3b6b}
.wishlist-toggle-form{margin:0}
@media(hover:hover){.product-card-actions{opacity:0;transition:opacity .2s ease}.mock-product-card:hover .product-card-actions,.mock-product-card:focus-within .product-card-actions{opacity:1}.wishlist-heart.is-active{opacity:1}.product-card-actions:has(.wishlist-heart.is-active){opacity:1}}

.rating-mini.muted{color:#9aa2bd;font-weight:700}
.stars-inline{color:#ffb02e;letter-spacing:1px;font-size:12px}
.review-form{max-width:520px;margin:16px 0 24px;padding:16px;border:1px solid #e5e9f4;border-radius:12px;background:#fbfbff}
.star-picker{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.star-picker input{position:absolute;opacity:0;pointer-events:none}
.star-picker label{font-size:24px;color:#dde1ef;cursor:pointer;transition:color .15s ease}
.star-picker input:checked ~ label,.star-picker label:hover,.star-picker label:hover ~ label{color:#ffb02e}
.review-list{display:grid;gap:12px;max-width:720px}
.review-item{border:1px solid #e5e9f4;border-radius:10px;padding:12px 14px}
.review-item-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.review-item p{margin:0;font-size:12px;color:#4a5375}

/* Milestone 2.5 — CAPTCHA honeypot (visually hidden but not display:none, to resist basic bot heuristics) */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.captcha-field input{max-width:120px}

/* Milestone 2.6 — user dropdown (profile + logout), subscription cards, admin detail panels */
.dash-user-dropdown{position:relative;margin-left:auto}
.dash-user-dropdown .dash-user{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:9px;padding:4px}
.dash-user-dropdown .dash-user svg{width:14px;color:#9aa2bd;margin-left:2px}
.dash-user-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #e1e6f0;border-radius:10px;box-shadow:var(--shadow);padding:6px;min-width:170px;z-index:70}
.dash-user-menu.open{display:block}
.dash-user-menu a,.dash-user-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:7px;font-size:11px;font-weight:650;color:#263157;background:none;border:0;cursor:pointer;text-align:left}
.dash-user-menu a:hover,.dash-user-menu button:hover{background:#f2f3ff;color:#3444ef}
.dash-user-menu svg{width:15px}
.dash-user-menu form{margin:0}

.subscription-section-heading{font-size:13px;font-weight:800;margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.subscription-section-heading .status-pill{font-size:9px}
.sub-list-card{border:1px solid #e2e7f1;border-radius:10px;padding:13px;display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}
.sub-list-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.sub-list-card .product-mini-logo{width:38px;height:38px;flex:0 0 auto}
.sub-list-card>div:nth-child(2){flex:1;display:grid;gap:2px}
.sub-list-card b{font-size:11px}
.sub-list-card small{font-size:9px;color:var(--muted)}
.sub-list-card strong{font-size:11px}

.order-item-notes{margin-top:10px;padding:10px 12px;background:#f7f8ff;border-radius:8px;font-size:11px;color:#333d5c}
.order-item-notes b{display:block;margin-bottom:3px;color:#3444ef;font-size:10px}
.order-notes-list{display:grid;gap:8px;margin-top:10px}
.order-note-row{border:1px solid #e5e9f4;border-radius:8px;padding:9px 11px;font-size:11px}
.order-note-row.customer-visible{border-color:#bcd8ff;background:#f4f9ff}
.order-note-row small{color:var(--muted);font-size:9px;display:block;margin-top:3px}

.profile-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.profile-detail-grid{grid-template-columns:1fr}}

/* Milestone 2.7 — bundles, ticket threads (order-note-row already styled), staff badges */
.bundle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.bundle-card{border:1px solid #e2e7f1;border-radius:14px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:10px}
.bundle-card h3{font-size:15px}
.bundle-card ul{list-style:none;padding:0;margin:0;font-size:11px;color:#4a5375;display:grid;gap:4px}
.bundle-card ul li:before{content:"✓ ";color:#19a765;font-weight:800}
.bundle-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.bundle-price s{color:var(--muted);font-size:12px}
.bundle-price strong{font-size:20px;color:#1c2340}
.bundle-card form{margin:0}

/* Milestone 2.8 — notification dropdown */
.dash-notif-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #e1e6f0;border-radius:12px;box-shadow:var(--shadow);width:320px;max-width:90vw;z-index:80;overflow:hidden}
.dash-notif-menu.open{display:block}
.dash-notif-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef0f8}
.dash-notif-header b{font-size:12px}
.dash-notif-header form{margin:0}
.dash-notif-header .link-button{font-size:10px;font-weight:700;color:#3444ef}
.dash-notif-list{max-height:340px;overflow-y:auto}
.dash-notif-item{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-bottom:1px solid #f4f5fb;text-decoration:none;color:#263157}
.dash-notif-item:last-child{border-bottom:0}
.dash-notif-item:hover{background:#f7f8ff}
.dash-notif-item span{font-size:11px;font-weight:600;line-height:1.4}
.dash-notif-item small{font-size:9px;color:var(--muted)}
.dash-notif-item.unread{background:#f4f7ff}
.dash-notif-item.unread span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#3444ef;margin-right:6px}

/* Milestone 2.8 — Page Builder: banners, icon/info box grids, carousels */
.pb-grid{display:grid;grid-template-columns:repeat(var(--pb-cols,3),1fr);gap:18px}
@media(max-width:900px){.pb-grid{grid-template-columns:repeat(var(--pb-cols-tablet,3),1fr)}}
@media(max-width:560px){.pb-grid{grid-template-columns:repeat(var(--pb-cols-mobile,2),1fr)}}

.pb-icon-box{background:#fff;border:1px solid #e5e9f4;border-radius:14px;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.pb-icon-box .pb-icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#eef1ff;color:#3444ef}
.pb-icon-box .pb-icon svg{width:22px;height:22px}
.pb-icon-box h4{font-size:calc(14px * var(--heading-scale));margin:0}
.pb-icon-box p{font-size:calc(12px * var(--body-scale));color:var(--muted);margin:0;line-height:1.6}

.pb-info-box{background:#fff;border:1px solid #e5e9f4;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pb-info-box img{width:100%;aspect-ratio:16/10;object-fit:cover}
.pb-info-box h4,.pb-info-box p,.pb-info-box .btn{margin-left:18px;margin-right:18px}
.pb-info-box h4{font-size:calc(14px * var(--heading-scale));margin-top:14px}
.pb-info-box p{font-size:calc(12px * var(--body-scale));color:var(--muted);line-height:1.6;flex:1}
.pb-info-box .btn{margin-bottom:18px;align-self:flex-start}

.pb-banner{position:relative;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;background:linear-gradient(135deg,#151a4d,#3444ef);min-height:220px}
.pb-banner img{width:100%;height:100%;object-fit:cover;max-height:320px}
.pb-banner-content{padding:28px;color:#fff}
.pb-banner-content h3{font-size:calc(24px * var(--heading-scale));margin:0 0 8px}
.pb-banner-content p{font-size:calc(13px * var(--body-scale));opacity:.9;margin:0 0 14px;line-height:1.6}
.pb-banner-center{grid-template-columns:1fr}
.pb-banner-center .pb-banner-content{text-align:center}
.pb-banner-center img{max-height:220px}
@media(max-width:760px){.pb-banner{grid-template-columns:1fr}.pb-banner img{max-height:180px}}

.pb-carousel{position:relative;overflow:hidden;border-radius:14px}
.pb-carousel-track{display:flex;transition:transform .45s ease}
.pb-carousel-slide{flex:0 0 100%;position:relative}
.pb-carousel-slide img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
.pb-carousel-caption{position:absolute;left:0;bottom:0;padding:26px;color:#fff;background:linear-gradient(0deg,rgba(10,14,40,.75),transparent)}
.pb-carousel-caption h3{font-size:20px;margin:0 0 6px}
.pb-carousel-caption p{font-size:12px;margin:0 0 10px;opacity:.9}
.pb-product-carousel .pb-carousel-slide{flex:0 0 calc(100% / var(--pb-cols, 3));padding:0 8px;box-sizing:border-box}
.pb-product-carousel .pb-carousel-track{gap:0}
.pb-carousel-prev,.pb-carousel-next{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #e1e6f0;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:5}
.pb-carousel-prev{left:12px;transform:translateY(-50%) rotate(180deg)}.pb-carousel-next{right:12px}
.pb-carousel-prev svg,.pb-carousel-next svg{width:16px}
.pb-carousel-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.pb-product-carousel .pb-carousel-dots{display:none}
.pb-carousel-dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);border:0;cursor:pointer;padding:0}
.pb-carousel-dots button.active{background:#fff}

/* Card Size preset (Page Builder -> a section -> Layout Settings ->
   Section Style -> Card Size). Normal (no class added) keeps the
   original sizing untouched; Large/Extra Large bump padding, heading
   size and icon size together so "make this section's cards bigger"
   is one dropdown instead of five separate manual fields. Left off
   Banner Carousel on purpose - see pb_style_attr()'s docblock in
   components.php for why border/shadow controls skip that type too;
   the same fixed-corner clipping applies here. */
.pb-cards-large .pb-icon-box,.pb-cards-large .pb-info-box{padding:34px}
.pb-cards-large .pb-info-box{padding:0 0 34px}
.pb-cards-large .pb-info-box h4,.pb-cards-large .pb-info-box p,.pb-cards-large .pb-info-box .btn{margin-left:26px;margin-right:26px}
.pb-cards-large .pb-info-box h4{margin-top:22px}
.pb-cards-large .pb-icon-box h4,.pb-cards-large .pb-info-box h4{font-size:calc(19px * var(--heading-scale))}
.pb-cards-large .pb-icon-box p,.pb-cards-large .pb-info-box p{font-size:calc(13px * var(--body-scale))}
.pb-cards-large .pb-icon-box .pb-icon{width:60px;height:60px;border-radius:16px}
.pb-cards-large .pb-icon-box .pb-icon svg{width:28px;height:28px}
.pb-cards-large .pb-banner{min-height:300px}
.pb-cards-large .pb-banner-content{padding:38px}
.pb-cards-large .pb-banner-content h3{font-size:calc(30px * var(--heading-scale))}
.pb-cards-xlarge .pb-icon-box,.pb-cards-xlarge .pb-info-box{padding:44px}
.pb-cards-xlarge .pb-info-box{padding:0 0 44px}
.pb-cards-xlarge .pb-info-box h4,.pb-cards-xlarge .pb-info-box p,.pb-cards-xlarge .pb-info-box .btn{margin-left:32px;margin-right:32px}
.pb-cards-xlarge .pb-info-box h4{margin-top:28px}
.pb-cards-xlarge .pb-icon-box h4,.pb-cards-xlarge .pb-info-box h4{font-size:calc(23px * var(--heading-scale))}
.pb-cards-xlarge .pb-icon-box p,.pb-cards-xlarge .pb-info-box p{font-size:calc(14px * var(--body-scale))}
.pb-cards-xlarge .pb-icon-box .pb-icon{width:72px;height:72px;border-radius:18px}
.pb-cards-xlarge .pb-icon-box .pb-icon svg{width:32px;height:32px}
.pb-cards-xlarge .pb-banner{min-height:380px}
.pb-cards-xlarge .pb-banner-content{padding:48px}
.pb-cards-xlarge .pb-banner-content h3{font-size:calc(36px * var(--heading-scale))}
.pb-cards-large .pb-product-grid .mock-product-media{height:140px}
.pb-cards-large .pb-product-grid .mock-product-body{padding:16px}
.pb-cards-large .pb-product-grid .mock-product-body h3{font-size:calc(15px * var(--heading-scale))}
.pb-cards-large .pb-product-grid .mock-price-row strong{font-size:19px}
.pb-cards-xlarge .pb-product-grid .mock-product-media{height:170px}
.pb-cards-xlarge .pb-product-grid .mock-product-body{padding:20px}
.pb-cards-xlarge .pb-product-grid .mock-product-body h3{font-size:calc(17px * var(--heading-scale))}
.pb-cards-xlarge .pb-product-grid .mock-price-row strong{font-size:22px}

/* Milestone 2.9 — public header user dropdown (name + hover/click menu) */
.header-user-dropdown{position:relative}
.header-user-dropdown .account-action{background:none;border:0;cursor:pointer;font:inherit}
.header-user-dropdown .dash-user-menu{right:0;left:auto;min-width:190px}
@media(min-width:901px){
  .header-user-dropdown:hover .dash-user-menu{display:block}
}

.pb-icon-custom{background:none!important}
.pb-icon-custom img{width:100%;height:100%;object-fit:contain;border-radius:8px}

/* Milestone 2.10 — unified premium icon treatment + hover micro-interactions */
.category-icon,.service-icon,.pb-icon,.round-icon,.dash-stat-icon{position:relative;box-shadow:0 4px 14px rgba(52,68,239,.10),inset 0 0 0 1px rgba(52,68,239,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.mock-category-tile:hover .category-icon,.mock-service-card:hover .service-icon,.pb-icon-box:hover .pb-icon,.dash-stat:hover .dash-stat-icon{transform:scale(1.1) rotate(-6deg);box-shadow:0 8px 22px rgba(52,68,239,.22),inset 0 0 0 1px rgba(52,68,239,.1)}
.round-icon:hover{transform:scale(1.12);box-shadow:0 8px 20px rgba(30,56,230,.18)}
.pb-icon-box{overflow:hidden}
.pb-icon-box:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(52,68,239,.06),transparent 70%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.pb-icon-box:hover:before{opacity:1}

/* Gradient text shimmer for hero/gradient words — subtle, not distracting */
@keyframes gradientShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.mock-hero h1 span,.gradient-word,.text-gradient{background-size:200% auto;animation:gradientShimmer 6s ease-in-out infinite}

/* Consistent image hover-zoom framework for any product/section image inside a card with overflow:hidden */
.mock-product-media,.pb-info-box,.service-image-card,.portfolio-card{overflow:hidden}
.mock-product-media img,.pb-info-box img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pb-info-box:hover img{transform:scale(1.06)}

/* Smoother, more premium button hover — soft glow instead of a flat lift */
.btn-primary{position:relative;overflow:hidden}
.btn-primary:hover{box-shadow:0 10px 26px rgba(52,68,239,.28),0 2px 8px rgba(52,68,239,.18)}

/* Page load fade-in so navigation between pages feels smoother, not an abrupt cut */
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
.js body{animation:pageFadeIn .35s ease}

/* Animated underline for nav-style text links used across info panels */
.mock-cta,.pb-banner{position:relative;overflow:hidden}
.mock-cta:after,.pb-banner:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.10),transparent 55%);pointer-events:none}

/* Checkout journey stepper */
.checkout-stepper{display:flex;align-items:center;justify-content:center;gap:0;max-width:520px;margin:22px auto 0}
.checkout-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
.checkout-step span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eceef7;color:#7b849e;font-weight:800;font-size:13px;transition:.3s ease}
.checkout-step span svg{width:16px}
.checkout-step b{font-size:10px;font-weight:700;color:#7b849e}
.checkout-step.done span{background:#19a765;color:#fff}
.checkout-step.done b{color:#19a765}
.checkout-step.active span{background:linear-gradient(135deg,#2a65ff,#7533ff);color:#fff;box-shadow:0 6px 16px rgba(52,68,239,.3)}
.checkout-step.active b{color:#2a3a8f;font-weight:800}
.checkout-step-line{flex:1 1 60px;height:2px;background:#e5e9f4;margin:0 6px 20px}
.checkout-step-line.done{background:#19a765}
@media(max-width:560px){.checkout-step b{display:none}.checkout-stepper{max-width:280px}}

/* ============================================================
   DARK MODE — additive overrides only (nothing above this point
   is modified), scoped to [data-theme="dark"] on <html>.
   ============================================================ */
[data-theme="dark"]{
  --navy:#0a1030; --navy-2:#141b52; --ink:#e8ebf7; --muted:#9aa3c4;
  --line:#2a3050; --surface:#151a35; --soft:#1b2140; --soft-blue:#171c3c;
  --shadow:0 14px 40px rgba(0,0,0,.35); --shadow-sm:0 6px 18px rgba(0,0,0,.25);
}
[data-theme="dark"] body{background:#0b0f26;color:var(--ink)}
[data-theme="dark"] .container,[data-theme="dark"] section{color:inherit}
[data-theme="dark"] .mock-header,[data-theme="dark"] .utility-bar,[data-theme="dark"] .dash-topbar,[data-theme="dark"] .dash-sidebar,[data-theme="dark"] .mobile-drawer,[data-theme="dark"] .dash-mobile-nav{background:#12172f;border-color:#232a4d}
[data-theme="dark"] .mock-footer{background:#0a0e22}
[data-theme="dark"] .dash-card,[data-theme="dark"] .admin-form-panel,[data-theme="dark"] .mock-product-card,[data-theme="dark"] .hosting-plan,[data-theme="dark"] .portfolio-card,[data-theme="dark"] .tld-card,[data-theme="dark"] .support-topic,[data-theme="dark"] .detail-card,[data-theme="dark"] .mock-service-card,[data-theme="dark"] .info-panel,[data-theme="dark"] .contact-method,[data-theme="dark"] .stat-highlight,[data-theme="dark"] .mock-review-card,[data-theme="dark"] .mock-faq,[data-theme="dark"] .performance-card,[data-theme="dark"] .subscription-card,[data-theme="dark"] .purchase-item,[data-theme="dark"] .empty-state,[data-theme="dark"] .success-card,[data-theme="dark"] .cart-list,[data-theme="dark"] .checkout-form-card,[data-theme="dark"] .order-summary,[data-theme="dark"] .order-detail-item,[data-theme="dark"] .pb-icon-box,[data-theme="dark"] .pb-info-box,[data-theme="dark"] .bundle-card,[data-theme="dark"] .sub-list-card,[data-theme="dark"] .mock-category-tile,[data-theme="dark"] .auth-card,[data-theme="dark"] .dash-notif-menu,[data-theme="dark"] .dash-user-menu,[data-theme="dark"] .quick-add-menu,[data-theme="dark"] .toast,[data-theme="dark"] .admin-table,[data-theme="dark"] .product-option-panel,[data-theme="dark"] .dash-stat,[data-theme="dark"] .mock-price-card,[data-theme="dark"] .hosting-benefits,[data-theme="dark"] .quick-contact-card,[data-theme="dark"] .form-card,[data-theme="dark"] .mock-panel,[data-theme="dark"] .mock-faq-list,[data-theme="dark"] .auth-shell,[data-theme="dark"] .amount-pill,[data-theme="dark"] .tech-pill{background:#151a35;border-color:#262c4f;color:var(--ink)}
[data-theme="dark"] .legal-content{color:var(--ink)}
/* Storefront main menu bar: links were hardcoded to a dark navy color that
   never changed with the theme, so they went unreadable against the dark
   header. The search box next to it stayed a plain white pill for the same
   reason — background and text color are themed here to match. */
[data-theme="dark"] .desktop-nav a{color:var(--ink)}
[data-theme="dark"] .desktop-nav a:hover,[data-theme="dark"] .desktop-nav a.active{color:#a7b4ff}
[data-theme="dark"] .mock-header-search{background:#0f1330;border-color:#2a3050}
[data-theme="dark"] .mock-header-search input{color:var(--ink)}
[data-theme="dark"] .mock-header-search input::placeholder{color:#5c6491}
[data-theme="dark"] .mobile-drawer{background:#151a35;border-color:#262c4f}
[data-theme="dark"] .mobile-drawer a{color:var(--ink)}
[data-theme="dark"] .mobile-drawer a:hover{background:#1b2140;color:#a7b4ff}
[data-theme="dark"] .mobile-search-row form{background:#0f1330;border-color:#2a3050}
[data-theme="dark"] .mobile-search-row input{color:var(--ink)}
[data-theme="dark"] .dash-search{background:#0f1330;border-color:#2a3050}
[data-theme="dark"] .dash-search input{color:var(--ink)}
[data-theme="dark"] .dash-search input::placeholder{color:#5c6491}
[data-theme="dark"] .account-action{color:var(--ink)}
[data-theme="dark"] .header-menu-btn{color:var(--ink)}
[data-theme="dark"] .section-order-row{background:#151a35;border-color:#262c4f}
[data-theme="dark"] .section-order-num{background:#0f1330;border-color:#2a3050;color:var(--ink)}
[data-theme="dark"] .btn-remove-item{background:#2e131a;border-color:#4a1f2a;color:#ff8a9a}
[data-theme="dark"] .btn-remove-item:hover{background:#3a1720;border-color:#5c2733}
[data-theme="dark"] .hero-search{background:#0f1330;border-color:#2a3050}
[data-theme="dark"] .hero-search input{color:var(--ink)}
[data-theme="dark"] .hero-search input::placeholder{color:#5c6491}
[data-theme="dark"] .hero-search select{background:#0f1330;color:var(--ink);border-color:#2a3050}
[data-theme="dark"] .pb-carousel-prev,[data-theme="dark"] .pb-carousel-next{background:#151a35;border-color:#262c4f;color:var(--ink)}
[data-theme="dark"] .product-mini-logo{background:#1b2140}
[data-theme="dark"] .rating-pill{background:#151a35;border-color:#262c4f}
[data-theme="dark"] .import-warning-list,[data-theme="dark"] .import-error-list{background:#171c3c;border-color:#2b3670;color:var(--ink)}
[data-theme="dark"] .variation-status{background:#2e2210;color:#ffc369}
[data-theme="dark"] .variation-status.available{background:#132a1e;color:#4fd88a}
[data-theme="dark"] .variation-remove{background:#2e131a;color:#ff8a9a}
[data-theme="dark"] .dash-stat-icon,[data-theme="dark"] .round-icon,[data-theme="dark"] .contact-method>span,[data-theme="dark"] .support-topic>span,[data-theme="dark"] .saved-item>span,[data-theme="dark"] .ticket-item>span{background:#1b2140}
[data-theme="dark"] .dash-stat small{color:#9aa3c4}
[data-theme="dark"] .detail-card p,[data-theme="dark"] .detail-card li{color:#9aa3c4}
[data-theme="dark"] .variation-head{color:#9aa3c4}
[data-theme="dark"] .admin-table th{background:#181e3d;color:#9aa3c4}
[data-theme="dark"] .admin-table td,[data-theme="dark"] .admin-table th{border-color:#232a4d}
[data-theme="dark"] .admin-table tr:hover td{background:#181e3d}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#0f1330;border-color:#2a3050;color:var(--ink)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#5c6491}
[data-theme="dark"] .btn-secondary{background:#1b2140;border-color:#2a3050;color:var(--ink)}
[data-theme="dark"] .btn-secondary:hover{background:#232a4d}
[data-theme="dark"] .status-pill{background:#132a1e;color:#4fd88a}
[data-theme="dark"] .status-pill.pending{background:#2e2210;color:#ffc369}
[data-theme="dark"] .status-pill.cancelled{background:#2e131a;color:#ff8a9a}
[data-theme="dark"] .payment-option,[data-theme="dark"] .credential-fields,[data-theme="dark"] .variation-row input,[data-theme="dark"] .variation-row select{background:#0f1330;border-color:#2a3050}
[data-theme="dark"] .secure-note{color:#8fa1ff!important}
[data-theme="dark"] .credential-notice{background:#171c3c;color:#b8c2ff}
[data-theme="dark"] .dash-nav a.active,[data-theme="dark"] .dash-nav a:hover{background:#1b2456;color:#a7b4ff}
[data-theme="dark"] .mock-hero-copy h1,[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:var(--ink)}
[data-theme="dark"] .muted,[data-theme="dark"] small{color:var(--muted)}
[data-theme="dark"] .pb-icon-box:before{background:radial-gradient(circle at 50% 0%,rgba(120,140,255,.10),transparent 70%)}
[data-theme="dark"] .empty-icon,[data-theme="dark"] .success-icon{background:linear-gradient(145deg,#1b2b22,#16233f)}
[data-theme="dark"] .track-step span{background:#232a4d;color:#9aa3c4}
[data-theme="dark"] hr,[data-theme="dark"] .order-detail-item dl div,[data-theme="dark"] .saved-item,[data-theme="dark"] .ticket-item,[data-theme="dark"] .order-note-row{background:#181e3d;border-color:#262c4f}
[data-theme="dark"] .order-note-row.customer-visible{background:#161d38;border-color:#2b3670}
[data-theme="dark"] img{filter:brightness(.94)}

/* Sidebar nav text/icons were unreadable in dark mode (dark navy text on a
   near-black sidebar background) except when active/hovered. */
[data-theme="dark"] .dash-nav a{color:#aab2d6}
/* Dashboard bottom nav (mobile) and the public site's bottom nav both had
   text/icon colors that were never adjusted for dark mode, and the public
   nav's background stayed hardcoded white. */
[data-theme="dark"] .dash-mobile-nav a,[data-theme="dark"] .dash-mobile-more-btn{color:#8791b8}
[data-theme="dark"] .dash-mobile-nav a.active,[data-theme="dark"] .dash-mobile-more-btn.active{color:#a7b4ff}
[data-theme="dark"] .mobile-bottom-nav{background:#12172f;border-color:#232a4d;box-shadow:0 -6px 20px rgba(0,0,0,.35)}
[data-theme="dark"] .mobile-bottom-nav a{color:#8791b8}
[data-theme="dark"] .mobile-bottom-nav a.active{color:#a7b4ff}
/* Mobile "More" sheet and its overlay/handle */
[data-theme="dark"] .dash-mobile-more-sheet{background:#151a35;box-shadow:0 -10px 30px rgba(0,0,0,.4)}
[data-theme="dark"] .dash-mobile-more-handle{background:#2a3050}
[data-theme="dark"] .dash-mobile-more-grid a{background:#1b2140;color:#aab2d6}
[data-theme="dark"] .dash-mobile-more-grid a.active{background:#1b2456;color:#a7b4ff}
[data-theme="dark"] .dash-mobile-more-overlay{background:rgba(0,0,0,.6)}
/* Topbar notification bell / other icon buttons stayed pure white regardless of theme */
[data-theme="dark"] .topbar-icon-btn{background:#1b2140;border-color:#2a3050;color:#aab2d6}
[data-theme="dark"] .topbar-icon-btn:hover{background:#232a4d;color:#a7b4ff}
[data-theme="dark"] .dash-search{border-color:#2a3050}
[data-theme="dark"] .dash-search svg{color:#8791b8}
/* Notification and account dropdown menu items hardcoded a dark navy text
   color, which was invisible against the (already dark-mode-aware) dropdown
   background. */
[data-theme="dark"] .dash-notif-item{color:var(--ink)}
[data-theme="dark"] .dash-notif-item:hover{background:#1b2140}
[data-theme="dark"] .dash-notif-item.unread{background:#171c3c}
[data-theme="dark"] .dash-notif-header{border-color:#232a4d}
[data-theme="dark"] .dash-user-menu a,[data-theme="dark"] .dash-user-menu button{color:var(--ink)}
[data-theme="dark"] .dash-user-menu a:hover,[data-theme="dark"] .dash-user-menu button:hover{background:#232a4d;color:#a7b4ff}
/* Small product/logo tiles (purchase list, subscription cards) often hold
   product images with a white background; giving the tile itself a fixed
   white background in dark mode makes that look like an intentional framed
   logo instead of a jarring bright rectangle. */
[data-theme="dark"] .product-mini-logo{background:#fff}

/* Theme toggle button */
.theme-toggle{background:none;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:0 0 auto}
.theme-toggle svg{width:16px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* Skeleton loading shimmer — applies to every <img> until it finishes loading,
   no HTML changes needed (JS just toggles a .loaded class via the load event) */
img:not(.loaded):not([src=""]){background:linear-gradient(90deg,#eef0f8 25%,#f7f8fc 37%,#eef0f8 63%);background-size:400% 100%;animation:skeletonShimmer 1.4s ease infinite}
[data-theme="dark"] img:not(.loaded):not([src=""]){background:linear-gradient(90deg,#1b2140 25%,#232a4d 37%,#1b2140 63%);background-size:400% 100%}
@keyframes skeletonShimmer{0%{background-position:100% 50%}100%{background-position:0% 50%}}
img.loaded{animation:none}
