/* Full-card category artwork. The uploaded image is the background of the whole card. */
.category-card{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:var(--card-bg,rgba(255,255,255,.03)) !important;
}
.category-card-bg-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  z-index:0 !important;
}
.category-card-overlay{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.20) 45%,rgba(0,0,0,.78) 100%) !important;
  z-index:1 !important;
}
.category-card-inner{
  position:relative !important;
  z-index:2 !important;
}
.category-card .category-card-top,
.category-card h4,
.category-card small,
.category-card .category-card-action,
.category-card .category-card-count,
.category-card .category-card-icon{
  position:relative !important;
  z-index:3 !important;
}
.category-admin-card{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}
.category-admin-card .category-admin-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:100% !important;
  min-height:100% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  object-fit:cover !important;
  object-position:center center !important;
  z-index:0 !important;
}
.category-admin-card .category-admin-image-placeholder{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  z-index:0 !important;
  opacity:.28 !important;
}
.category-admin-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28) 45%,rgba(0,0,0,.82)) !important;
  z-index:1 !important;
  pointer-events:none !important;
}
.category-admin-card > *:not(.category-admin-image):not(.category-admin-image-placeholder){
  position:relative !important;
  z-index:2 !important;
}

/* ===== Extracted from inline block 12: <style id="cncmood-category-full-card-v2"> ===== */
/* Public category cards: uploaded artwork fills the complete card. */
.category-card { position:relative !important; overflow:hidden !important; }
.category-card .category-card-image {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  border-radius:inherit !important;
  margin:0 !important;
  z-index:0 !important;
  box-shadow:none !important;
}
.category-card .category-card-inner {
  position:relative !important;
  z-index:3 !important;
  min-height:inherit !important;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.22) 48%,rgba(0,0,0,.68) 100%) !important;
}
.category-card .category-card-top,
.category-card .category-card-count,
.category-card h4,
.category-card small,
.category-card .category-card-action { position:relative !important; z-index:4 !important; }
.category-card .category-card-icon { position:relative !important; z-index:4 !important; }

/* Admin category cards: image is also a full-card background. */
.category-admin-card { position:relative !important; overflow:hidden !important; padding:0 !important; min-height:300px !important; }
.category-admin-card .category-admin-image {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  z-index:0 !important;
}
.category-admin-card .category-admin-image-placeholder {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  z-index:0 !important;
  opacity:.32 !important;
}
.category-admin-card::after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.30) 45%,rgba(0,0,0,.78)) !important;
  z-index:1 !important;
  pointer-events:none !important;
}
.category-admin-card > *:not(.category-admin-image):not(.category-admin-image-placeholder) {
  position:relative !important;
  z-index:2 !important;
}
.category-admin-card .category-admin-card-head,
.category-admin-card h3,
.category-admin-card .category-admin-code,
.category-admin-card .category-admin-actions {
  padding-left:18px !important;
  padding-right:18px !important;
}
.category-admin-card .category-admin-card-head { padding-top:18px !important; }
.category-admin-card h3 { margin-top:120px !important; color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.55) !important; }
.category-admin-card .category-admin-code { color:rgba(255,255,255,.82) !important; text-shadow:0 2px 6px rgba(0,0,0,.55) !important; }
.category-admin-card .category-admin-actions { padding-bottom:18px !important; }
@media(max-width:600px){
  .category-admin-card { min-height:270px !important; }
}

/* ===== Extracted from inline block 13: <style> ===== */
.gear-rotate{animation:gear-spin 12s linear infinite;transform-origin:50% 50%}@keyframes gear-spin{100%{transform:rotate(360deg)}}


/* ===== CNCmood Pro v9 — Dark CNC + Wood Detail UI ===== */
body,button,input,select,textarea{
  font-family:'Vazirmatn','Vazir','Tahoma',sans-serif;
}
h1,h2,h3,h4,h5,h6,.logo,.section-title{
  font-family:'Shabnam','Vazirmatn','Vazir','Tahoma',sans-serif;
}

/* Preserve the original dark CNC identity. Wood appears as a material accent,
   not as a global white/brown theme. */
header{
  background:var(--header-bg) !important;
}
footer{
  background:
    linear-gradient(180deg,rgba(15,8,4,.97),rgba(31,15,7,.98)),
    repeating-linear-gradient(8deg,rgba(196,122,56,.045) 0 2px,transparent 2px 10px) !important;
  border-top:1px solid rgba(196,122,56,.34) !important;
  box-shadow:0 -14px 40px rgba(0,0,0,.35);
}
footer a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text) !important;
  padding:7px 11px;
  border-radius:10px;
  border:1px solid rgba(196,122,56,.12);
  background:rgba(196,122,56,.045);
  transition:.22s ease;
}
footer a:hover{
  color:var(--gold) !important;
  background:rgba(196,122,56,.12);
  border-color:rgba(196,122,56,.35);
  transform:translateY(-1px);
}

/* Product cards: keep original dark palette, improve hierarchy only. */
.product-card{
  background:var(--card-bg) !important;
  border-color:rgba(196,122,56,.22) !important;
}
.product-card:hover{
  border-color:var(--primary-light) !important;
}

/* Admin navigation: each item is now an independent, balanced card. */
.admin-layout{
  align-items:flex-start;
  gap:22px !important;
}
.admin-sidebar{
  width:300px !important;
  padding:16px !important;
  background:
    linear-gradient(145deg,rgba(20,10,5,.97),rgba(30,15,8,.96)),
    repeating-linear-gradient(7deg,rgba(196,122,56,.035) 0 2px,transparent 2px 12px) !important;
  border:1px solid rgba(196,122,56,.28) !important;
  border-radius:20px !important;
  box-shadow:0 16px 45px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.admin-sidebar h3{
  margin:3px 6px 14px !important;
  padding:0 4px 12px !important;
  font-family:'Shabnam','Vazirmatn','Vazir',sans-serif !important;
  font-size:1.05rem !important;
  color:var(--gold) !important;
  border-bottom:1px solid rgba(196,122,56,.18);
}
.admin-sidebar a{
  position:relative;
  display:flex !important;
  align-items:center;
  gap:11px;
  min-height:52px;
  padding:11px 13px !important;
  margin:8px 0 !important;
  color:var(--text) !important;
  text-decoration:none;
  border-radius:14px !important;
  border:1px solid rgba(196,122,56,.14) !important;
  background:
    linear-gradient(135deg,rgba(196,122,56,.085),rgba(255,255,255,.018)),
    rgba(12,6,3,.45) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease !important;
}
.admin-sidebar a::before{
  content:'';
  width:3px;
  height:0;
  position:absolute;
  right:-1px;
  top:50%;
  border-radius:8px;
  background:linear-gradient(180deg,var(--gold),var(--primary-light));
  transform:translateY(-50%);
  transition:.2s ease;
}
.admin-sidebar a i{
  flex:0 0 34px;
  width:34px !important;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  border-radius:10px;
  color:var(--gold);
  background:rgba(196,122,56,.10);
  border:1px solid rgba(196,122,56,.14);
  font-size:.95rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.admin-sidebar a:hover{
  color:#fff !important;
  transform:translateX(-3px);
  border-color:rgba(196,122,56,.42) !important;
  background:linear-gradient(135deg,rgba(196,122,56,.16),rgba(255,255,255,.035)) !important;
  box-shadow:0 10px 25px rgba(0,0,0,.24),0 0 20px rgba(196,122,56,.07) !important;
}
.admin-sidebar a:hover i{
  color:#fff;
  background:rgba(196,122,56,.18);
}
.admin-sidebar a.active{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(196,122,56,.22),rgba(139,90,43,.12)) !important;
  border-color:rgba(196,122,56,.55) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.26),0 0 22px rgba(196,122,56,.10) !important;
}
.admin-sidebar a.active::before{
  height:28px;
}
.admin-sidebar a.active i{
  color:var(--gold);
  background:rgba(196,122,56,.22);
  border-color:rgba(196,122,56,.30);
}

/* Keep the admin content dark and spacious; no global white panels. */
.admin-content{
  min-width:0;
  background:transparent !important;
}
.admin-content .card,
.admin-content .dashboard-card,
.admin-content .pro-panel,
.admin-content .pro-kpis>div{
  background:var(--card-bg) !important;
  border-color:rgba(196,122,56,.20) !important;
}
.admin-content table th{
  background:rgba(196,122,56,.08) !important;
  color:var(--primary-light) !important;
}
.admin-content table td{
  border-color:rgba(196,122,56,.10) !important;
}

/* Better admin toolbars without changing functionality. */
.admin-toolbar,.toolbar,.filter-row,.actions-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px !important;
}
.admin-toolbar > *, .toolbar > *, .filter-row > *, .actions-row > *{
  min-width:0;
}

/* Subtle wood grain only where it helps the CNC identity. */
.pro-preview,
.pro-preview-card{
  background-image:
    repeating-linear-gradient(8deg,rgba(196,122,56,.035) 0 2px,transparent 2px 11px),
    linear-gradient(145deg,rgba(196,122,56,.08),rgba(255,255,255,.018)) !important;
}

/* Home page: richer CNC/wood atmosphere while retaining the original dark palette. */
.hero{
  box-shadow:0 18px 55px rgba(0,0,0,.25);
}
.hero::before{
  opacity:.22;
}
.hero h1,.hero h2{
  font-family:'Shabnam','Vazirmatn','Vazir',sans-serif;
  letter-spacing:-.5px;
}
.section-title{
  font-family:'Shabnam','Vazirmatn','Vazir',sans-serif;
}

/* Responsive admin navigation: still card-based, but compact on phones. */
@media(max-width:768px){
  .admin-sidebar{
    width:100% !important;
    padding:12px !important;
  }
  .admin-sidebar a{
    min-height:48px;
    margin:6px 0 !important;
  }
  .admin-layout{
    gap:12px !important;
  }
}


        /* CNCmood V3: product images + mobile smoothness */
        .product-img { contain: layout; }
        .product-cover-img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:rgba(0,0,0,.08); transition:opacity .25s ease; }
        @media (max-width:768px){
            .glass, header { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
            .product-card:hover .product-img img,
            .product-card:hover .product-img i { transform:none !important; }
            .btn { animation:none !important; }
        }

        /* V5 performance-only patch: preserves V3 image logic */
        @media (max-width: 768px) {
            .btn { animation: none !important; }
            .product-card:hover .product-img img,
            .product-card:hover .product-img i { transform: none !important; }
            .glass, header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* Mobile/Android scroll-performance fix:
           backdrop-filter on large admin surfaces can cause temporary
           disappearance/repaint while scrolling. Keep the visual palette,
           but remove GPU-heavy blur from admin surfaces on small screens. */
        @media (max-width: 768px) {
            .admin-sidebar,
            .admin-content .card,
            .admin-content .dashboard-card,
            .admin-content .pro-panel,
            .admin-content .pro-preview-card,
            .admin-content .pro-kpis > div,
            .admin-content .modal-dynamic,
            .admin-content .blog-post-card {
                -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
            }

            .admin-sidebar,
            .admin-content .card,
            .admin-content .dashboard-card,
            .admin-content .pro-panel,
            .admin-content .pro-kpis > div {
                transform: none !important;
                will-change: auto !important;
            }
        }

        .product-card, .product-img { contain: layout; }

/* CNCmood checkout mobile stability patch — scoped only to checkout */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;align-items:start;}
.checkout-layout > .card{min-width:0;box-sizing:border-box;}
.checkout-layout input,.checkout-layout textarea,.checkout-layout select{max-width:100%;box-sizing:border-box;}
@media (max-width:768px){
  .checkout-layout{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;width:100%;}
  .checkout-layout > .card{width:100%;min-width:0;padding:16px!important;overflow:hidden;}
  .checkout-layout .discount-box{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;}
  .checkout-layout .discount-box input{flex:1 1 150px;min-width:0;width:100%;}
  .checkout-layout .discount-box button{flex:0 0 auto;}
  .checkout-layout .btn{max-width:100%;}
  .checkout-layout .info-row{min-width:0;gap:10px;flex-wrap:wrap;}
  .checkout-layout .info-row span,.checkout-layout .info-row b{min-width:0;overflow-wrap:anywhere;word-break:break-word;}
}
@media (max-width:480px){
  .checkout-layout{gap:10px!important;}
  .checkout-layout > .card{padding:13px!important;border-radius:12px;}
  .checkout-layout .discount-box{flex-direction:column;}
  .checkout-layout .discount-box button{width:100%;}
  .checkout-layout input,.checkout-layout textarea,.checkout-layout select{font-size:16px!important;}
}

        /* CNCmood Studio Template Engine */
        :root{--studio-accent:#c47a38;--studio-accent2:#f0b96b;--studio-surface:rgba(20,15,12,.72);--studio-glow:rgba(196,122,56,.22)}
        /* Phase 21.1 — Strong template theme overrides */
        html[data-studio-template="premium"]{--primary:#8b4f24;--primary-light:#d8944b;--gold:#f4d19a;--bg:#17100b;--bg-light:#28170d;--text:#ead8c2;--muted:#ae9a84;--card-bg:rgba(35,21,12,.72);--card-border:rgba(216,148,75,.38);--header-bg:rgba(23,14,8,.92);--input-bg:rgba(12,7,4,.92)}
        html[data-studio-template="titanium"]{--primary:#66727e;--primary-light:#cbd5df;--gold:#eef3f7;--bg:#07090c;--bg-light:#11151a;--text:#d9e0e6;--muted:#89949f;--card-bg:rgba(17,21,26,.78);--card-border:rgba(203,213,223,.28);--header-bg:rgba(7,9,12,.94);--input-bg:rgba(5,7,9,.94)}
        html[data-studio-template="cyber"]{--primary:#168cb3;--primary-light:#55d9ff;--gold:#b86cff;--bg:#070916;--bg-light:#0e1530;--text:#d8e9ff;--muted:#8294b5;--card-bg:rgba(9,14,35,.74);--card-border:rgba(85,217,255,.34);--header-bg:rgba(5,7,20,.94);--input-bg:rgba(4,7,18,.94)}
        html[data-studio-template="titanium"] body{background-image:radial-gradient(circle at 75% 12%,rgba(220,230,240,.10),transparent 28%),linear-gradient(135deg,#07090c,#11151a 55%,#050608)!important}
        html[data-studio-template="cyber"] body{background-image:radial-gradient(circle at 78% 16%,rgba(85,217,255,.14),transparent 28%),radial-gradient(circle at 18% 82%,rgba(184,108,255,.12),transparent 30%),linear-gradient(135deg,#070916,#0e1530 55%,#060817)!important}
        html[data-studio-template="premium"] body{background-image:radial-gradient(circle at 78% 15%,rgba(245,190,110,.14),transparent 30%),linear-gradient(135deg,#17100b,#28170d 55%,#0d0906)!important}
        html[data-studio-template] header{border-bottom-color:var(--primary-light)!important}
        html[data-studio-template] .btn{background:linear-gradient(135deg,var(--primary),var(--primary-light))!important}
        html[data-studio-template] .section-title,html[data-studio-template] .logo .brand-text{color:var(--gold)}
        html[data-studio-template="cyber"] .card,html[data-studio-template="cyber"] .product-card{box-shadow:0 12px 45px rgba(35,120,255,.12),0 0 0 1px rgba(85,217,255,.05)}
        html[data-studio-template="titanium"] .card,html[data-studio-template="titanium"] .product-card{box-shadow:0 12px 45px rgba(0,0,0,.45),0 0 0 1px rgba(220,230,240,.04)}
        html[data-studio-template="premium"] .card,html[data-studio-template="premium"] .product-card{box-shadow:0 12px 45px rgba(90,45,15,.28),0 0 0 1px rgba(216,148,75,.05)}
        body.studio-template-premium{--studio-accent:#c47a38;--studio-accent2:#f6c47d;--studio-surface:rgba(28,18,12,.78);--studio-glow:rgba(245,190,110,.24)}
        body.studio-template-titanium{--studio-accent:#d8dde3;--studio-accent2:#ffffff;--studio-surface:rgba(8,10,13,.82);--studio-glow:rgba(220,230,240,.18)}
        body.studio-template-cyber{--studio-accent:#55d9ff;--studio-accent2:#b86cff;--studio-surface:rgba(7,10,28,.82);--studio-glow:rgba(70,210,255,.22)}
        body.studio-template-premium .hero-slider,body.studio-template-titanium .hero-slider,body.studio-template-cyber .hero-slider{box-shadow:0 18px 60px var(--studio-glow);border-color:color-mix(in srgb,var(--studio-accent) 35%,transparent)}
        body.studio-template-premium .card,body.studio-template-titanium .card,body.studio-template-cyber .card{background:var(--studio-surface)}
        body.studio-template-premium .btn-success,body.studio-template-titanium .btn-success,body.studio-template-cyber .btn-success{background:linear-gradient(135deg,var(--studio-accent),var(--studio-accent2));color:#08090b}
        body.studio-template-cyber .hero-slider{background-image:radial-gradient(circle at 75% 20%,rgba(85,217,255,.14),transparent 30%),radial-gradient(circle at 20% 80%,rgba(184,108,255,.12),transparent 30%)}
        body.studio-template-titanium .hero-slider{background-image:linear-gradient(135deg,rgba(255,255,255,.05),transparent 45%),linear-gradient(315deg,rgba(255,255,255,.035),transparent 55%)}